/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

/*#background-header {
	background: linear-gradient(-45deg, #ee7752, #d2006a, #4df9f3, #2600f1);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
	height: 100vh;
}*/

#background-header{
    background: linear-gradient(86deg, #009ffd, #2a2a72, #83eaf1, #045de9);
    background-size: 800% 800%;

    -webkit-animation: AnimationName 20s ease infinite;
    -moz-animation: AnimationName 20s ease infinite;
    animation: AnimationName 20s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 78%}
    50%{background-position:100% 23%}
    100%{background-position:0% 78%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 78%}
    50%{background-position:100% 23%}
    100%{background-position:0% 78%}
}
@keyframes AnimationName {
    0%{background-position:0% 78%}
    50%{background-position:100% 23%}
    100%{background-position:0% 78%}
}

.bold-header-text {
    color:#1f1f1f; font-weight: bold;
}
.call-to-action{
    position: relative;
    z-index: 1;
}

.call-to-action.call-to-action-dark {
    border-radius: 20px;
    box-shadow: 0 20px 30px rgba(0, 7, 46, 0.1);
    background: linear-gradient(314.65deg, #2196f3, #0d47a1);
    
    transition: 1s;
    
}

.icon-holder {
    background-color: #fff; padding: 10px; border-radius: 5px;
}

.call-to-action.call-to-action-dark:hover {
    background: #2250fc!important;
    cursor: pointer;
    transform:translateY(-15px);
    box-shadow: 0 6px 38px rgba(0, 0, 0, 0.05);
}

.icon-holder i {
    font-size: 50px; color:#0d47a1
}
#services{
    padding-top: 150px;
}

.text-counter{
    font-size: 120px!important;
    color: #fff;
}

.copyright-content {
    background: #181c39!important;
}

#footer {
    background: #0a92eb!important;
}

.talk {
    background-color: #181c39!important;
}

.grid li {
    background-color: #f6f6f6!important;
}