*,*:hover{
    transition: all 500ms ease;
}

.bg-bluedark{
    background-color: #163a76;
}

.bg-bluedark-hover:hover{
    background-color: #163a76;
}

html,body{
    height: 100%;
    width: 100%;
    font-family: 'Quicksand', sans-serif;
}
a:hover{
    text-decoration: none;
}
.bg-orange{
    background: #f35c22;
}
.btnContact-us{
    border-radius: 1rem;
}
.fa-xs{
    font-size: 10px;
}
.text-orange{
    color: #f35c22;
}
.leftmenu{
    z-index: 6;
}
.leftmenu ul a:hover{
    color: #f35c22!important;
}

.close-menu-mobile{
    width: 25px;
    filter: brightness(0) invert(1);
    cursor: pointer;
}

header{
    z-index: 5;
}
header .header-links li.animationOut:not(:last-child):after {
    content: ' ';
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 0px;
    background: white;
    display: block;
    animation: nav-bottom-line-out 200ms ease-in;
    animation-fill-mode: forwards;
}
header .header-links li.animationIn:not(:last-child):hover:after {
    content: ' ';
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 0px;
    background: white;
    display: block;
    animation: nav-bottom-line-in 200ms ease-in;
    animation-fill-mode: forwards;
}
.search-box{
    /* opacity: 0; */
    top: 59px;
}
.search-box span{
    right: 0;
    top: 0;
}
.search-box span:hover{
    cursor: pointer;
}
.openSearchBoxContent{
    animation: open-searchBox 200ms ease-in;
    animation-fill-mode: forwards;
    display: block!important;
}
.closeSearchBoxContent{
    animation: close-searchBox 200ms ease-in;
    animation-fill-mode: forwards;
    display: block!important;
}
.search-results{
    background: white;
    width: 100%;
    top: 30px;
    position: relative;
}
.search-results a{
    transition: 0ms;
}
.search-results a:hover{
    transition: 0ms;
    font-weight: bold;
}
.top-section{
    border-bottom-left-radius: 10rem;
}
.header-bottom-border{
    border-color: #8b8b8b57 !important;
}
.arrow-right::after{
    content: ' ';
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 0;
    height: 0;
    border-left: 80rem solid transparent;
    border-right: 0px solid transparent;
    border-top: 8px solid transparent;
    clear: both;
    border-bottom: 4vw solid #ffffff;
}
.open-menu-mobile{
    width: 40px;
    filter: brightness(0) invert(1);
    cursor: pointer;
}
.services .card-container:hover .card{
    transform: translateY(-0.5rem);
    box-shadow: 0px 0px 10px gainsboro;
}
.services .card-container .card .card-link img {
    width: 40px;
}
.services .card-container .card .card-image{
    width: 60px;
}
.services .card-container:hover .card .card-image{
    transform: scale(1.2);
}
.services .card-container:first-child .card .card-image img{
    background-image: linear-gradient(45deg, #4CAF50, #b5ff5f);
    border-radius: 3rem;
    padding: 1rem;
    box-shadow: 0px 0px 2px 0px #b5ff5f;
}
.services .card-container:first-child:hover .card .card-image img{
    background-image: linear-gradient(25deg, #4CAF50, #b5ff5f);
    border-radius: 3rem;
    padding: 0.7rem;
    box-shadow: 0px 0px 10px 0px #b5ff5f;
}
.services .card-container:first-child:hover .card .card-link img{
    filter: invert(50%) sepia(11%) saturate(3046%) hue-rotate(80deg) brightness(100%) contrast(135%);
}

.services .card-container:nth-child(2) .card .card-image img{
    background-image: linear-gradient(45deg, #f7734a, #ffa78d);
    border-radius: 3rem;
    padding: 1rem;
    box-shadow: 0px 0px 2px 0px #ffa78d
    
}
.services .card-container:nth-child(2):hover .card .card-image img{
    background-image: linear-gradient(25deg, #f7734a, #ffa78d);
    border-radius: 3rem;
    padding: 0.7rem;
    box-shadow: 0px 0px 10px 0px #ffa78d;
}
.services .card-container:nth-child(2):hover .card .card-link img{
    filter: invert(0%) sepia(5%) saturate(3000%) hue-rotate(322deg) brightness(100%) contrast(102%);
}

.services .card-container:nth-child(3) .card .card-image img{
    background-image: linear-gradient(45deg, #03A9F4, #abf4fd);
    border-radius: 3rem;
    padding: 1rem;
    box-shadow: 0px 0px 2px 0px #abf4fd
    
}
.services .card-container:nth-child(3):hover .card .card-image img{
    background-image: linear-gradient(25deg, #03A9F4, #abf4fd);
    border-radius: 3rem;
    padding: 0.7rem;
    box-shadow: 0px 0px 10px 0px #abf4fd;
}
.services .card-container:nth-child(3):hover .card .card-link img{
    filter: invert(0%) sepia(5%) saturate(3000%) hue-rotate(130deg) brightness(100%) contrast(80%);
}

.whyus{
    background-color: #f6f9ff;
}
.whyus ul li{
    box-shadow: 0px 0px 6px gainsboro;
    opacity: 0.7;
}
.whyus ul li:hover{
    cursor: pointer;
    transform: translateX(10px) scale(1.1);
    opacity: 1;
}
.whyus ul li:first-child img{
    width: 50px;
    background: #4CAF50;
    border-radius: 7px;
    padding: 8px;
    box-shadow: 0px 0px 4px #4CAF50;
}
.whyus ul li:nth-child(2) img{
    width: 50px;
    background: #f7734a;
    border-radius: 7px;
    padding: 8px;
    box-shadow: 0px 0px 4px #f7734a;
}
.whyus ul li:nth-child(3) img{
    width: 50px;
    background: #03A9F4;
    border-radius: 7px;
    padding: 8px;
    box-shadow: 0px 0px 4px #03A9F4;
}
.abus li img{
    width: 20px;
}

.portfolio-linkmore img{
    width: 20px!important;
}
.portfolio-image img{
    height: 180px;
    object-fit: cover;
    object-position: center;
}
.portfolio .owl-stage-outer{
    padding: 13px;
}

.portfolio-linkmore .btn.focus, .portfolio-linkmore .btn:focus {
    box-shadow: 0 0 0 0.2rem rgba(170, 170, 170, 0.25);
}

.hw{
    background: #05054f;
}
.hw-list-number p{
    width: 20px;
    height: 20px;
    background: #00000069;
}

.hw-videoPlayIcon{
    width: 50px;
    z-index: 1;
}

.hw-videoPlayIcon:hover {
    transform: rotate(45deg);
}
.hw-videoPlayIcon:hover:active {
    animation: play-rotate 1s ease-out;
}

.hw-videoPlayIcon:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    border: 1px solid transparent;
    border-radius: 50%;
    animation: pulse-border 1.5s ease-out infinite;
    
  }
  .hw-videoPlayIcon:after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 80px;
    height: 80px;
    border: 1px solid transparent;
    border-radius: 50%;
    animation: pulse-border 1.5s ease-out infinite;
    animation-delay: 0.7s;
  }

.videoPlay{
    background-image: url(../img/sucess-b.jpg);
    opacity: 0.4;
    background-size: cover;
    background-position: center;
}
.hw-details-bg{
    background-image: url(../img/1.jpg);
    opacity: 0.1;
    background-size: cover;
    background-position: center;
}
.testimonials .card-image img{
    width: 80px;
    height: 80px;
    object-fit: cover;
    object-position: center;
}
.testimonials-dots button {
    background: transparent;
    border: none;
}
.testimonials-dots button:focus {
    outline: none;
}
.testimonials-dots button:after {
    content: ' ';
    background: orange;
    width: 6px;
    height: 6px;
    position: absolute;
    bottom: 0;
    border-radius: 100%;
}
.testimonials-dots button.active:after {
    content: ' ';
    box-shadow: 0px 0px 0px 1px orange;
}
.testimonials .owl-arrows img{
    width: 40px;
    height: 40px;
    transition: 0ms;
}

.testimonials .owl-arrows img.arr-left,
.testimonials .owl-arrows img.arr-right{
    filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(333deg) brightness(95%) contrast(110%);
}

.testimonials .owl-arrows img.arr-left:hover,
.testimonials .owl-arrows img.arr-right:hover{
    cursor: pointer;
    transition: 0ms;
    filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(158deg) brightness(40%) contrast(102%);
}
.testimonials .left{
    left: -4rem;
    top: -10rem; 
}
.testimonials .right{
    right: -4rem;
    top: -10rem; 
}
.subscribe{
    z-index: 1;
}
.subscribe:before{
    content: ' ';
    background-image: url(https://cdn.pixabay.com/photo/2016/11/29/08/01/architecture-1868272_1280.jpg);
    opacity: 0.04;
    background-position: center;
    background-size: cover;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
}
.input-subscribe{
    border-radius: 1rem;
}
.input-subscribe-icon{
    position: absolute;
    top: 0;
    right: 16px;
    height: 100%;
    display: flex;
    align-items: center;
    color: gray;
    cursor: pointer;
}

.input-subscribe-icon:hover i{
    color: #163a76;
    transform: scale(1.2);
}

.input-subscribe-social-icons li a i{
    width: 30px;
    height: 30px;
}
.input-subscribe-social-icons li:hover a i{
    background: #f35c22;
    box-shadow: 0px 4px 0px 1px #b34318;
}
.input-subscribe-social-icons li:active:hover a i{
    background: #f35c22;
    transform: translateY(4px);
    box-shadow: 0px 0px 0px 0px #b34318;
}
.top-footerLine a:hover{
    color: #163a76!important;
    font-weight: 500;
}
.bottom-footerLine a:hover{
    color: #f35c22!important;
    font-weight: 500;
}
::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.1);
	background-color: #F5F5F5;
	border-radius: 10px;
}

::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #163a76;
	background-image: -webkit-linear-gradient(top, #163a76 0%, #193e7e 50%, #193e7e 51%, #163a76 100%);
}








@keyframes open-searchBox {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes close-searchBox {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


@keyframes nav-bottom-line-out {
    0% {
        height: 2px;
    }
    100% {
        height: 0px;
    }
}

@keyframes nav-bottom-line-in {
    0% {
        height: 0px;
    }
    100% {
        height: 2px;
    }
}

@keyframes play-rotate {
    0% {
        transform: rotate(45deg);
    }
    100% {
        transform: rotate(400deg);
    }
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }
    1% {
        border-color: white;
    }
    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}

@media (max-width: 880px) {
    .testimonials .owl-arrows {
        display: none!important;
    }
}

@media (max-width: 992px) {
    .top-section{
        border-bottom-left-radius: unset;
    }
    .arrow-right::after{
        display: none;
    }
}

@media screen and (max-width: 1310px) and (min-width: 1199px) {
    .testimonials .owl-arrows {
        display: none!important;
    }
}

@media screen and (max-width: 1120px) and (min-width: 991px) {
    .testimonials .owl-arrows {
        display: none!important;
    }
}