:root{

     --primary-color : #555555;

     --secondary-color : #F4F8FF;

     --text-color : #7C8192;

     --accent-color : #333;

     --accent-secondary-color : #555555;

     --bg-color : #FFFFFF;

     --white-color : #FFFFFF;

     --black-color : #000000;

     --divider-color : #555;

     --dark-divider-color : #FFFFFF1A;

     --error-color : rgb(230, 87, 87);

     --default-font : "Sora", sans-serif;

}

/************************************/

/*** 02. General css ***/

/************************************/

 html, body{

     width: 100%;

     overflow-x: clip;

}

 body{

     font-family: var(--default-font);

     font-size: 16px;

     font-weight: 400;

     line-height: 1em;

     color: var(--text-color);

     background: var(--bg-color);

}

 ::-webkit-scrollbar-track{

     background: linear-gradient(180deg, var(--accent-secondary-color) 0%, var(--accent-color) 100%);

     border-left: 1px solid var(--accent-secondary-color);

}

 ::-webkit-scrollbar{

     width: 7px;

     background: linear-gradient(180deg, var(--accent-secondary-color) 0%, var(--accent-color) 100%);

}

 ::-webkit-scrollbar-thumb{

     background: var(--white-color);

}

 ::selection{

     color: var(--primary-color);

     background-color: var(--accent-color);

     filter: invert(1);

}

 p{

     line-height: 1.6em;

     margin-bottom: 1.5em;

}

 h1, h2, h3, h4, h5, h6{

     font-weight: 600;

     line-height: 1.2em;

     color: #555555;

     margin :0;

}

 figure{

     margin: 0;

}

 img{

     max-width: 100%;

}

 a{

     text-decoration: none;

}

 a:hover{

     text-decoration: none;

     outline: 0;

}

 a:focus{

     text-decoration: none;

     outline: 0;

}

 .container{

     max-width: 1500px;

}

 .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{

     padding-right: 15px;

     padding-left: 15px;

}

 .image-anime{

     position: relative;

     overflow: hidden;

}

 .image-anime:after{

     content: "";

     position: absolute;

     width: 200%;

     height: 0%;

     left: 50%;

     top: 50%;

     background-color: rgba(255,255,255,.3);

     transform: translate(-50%,-50%) rotate(-45deg);

     z-index: 1;

}

 .image-anime:hover:after{

     height: 250%;

     transition: all 600ms linear;

     background-color: transparent;

}

 .reveal{

     position: relative;

     display: -webkit-inline-box;

     display: -ms-inline-flexbox;

     display: inline-flex;

     visibility: hidden;

     overflow: hidden;

}

 .reveal img{

     height: 100%;

     width: 100%;

     -o-object-fit: cover;

     object-fit: cover;

     -webkit-transform-origin: left;

     transform-origin: left;

}

 .row{

     margin-right: -15px;

     margin-left: -15px;

}

 .row > *{

     padding-right: 15px;

     padding-left: 15px;

}

 .row.no-gutters{

     margin-right: 0px;

     margin-left: 0px;

}

 .row.no-gutters > *{

     padding-right: 0px;

     padding-left: 0px;

}

 .btn-default{position: relative;display: inline-block;background: linear-gradient(to right, var(--accent-secondary-color) 0%, #7f7f7f 50%, var(--accent-secondary-color) 100%);background-size: 200% auto;border-radius: 10px;font-size: 16px;font-weight: 600;line-height: 1.25em;text-transform: capitalize;color: var(--white-color);padding: 15px 46px 15px 24px;border: none;transition: all 0.4s ease-in-out;z-index: 0;}

 .btn-default:hover{

     background-position: right center;

}

 .btn-default::before{

     content: '';

     position: absolute;

     top: 50%;

     right: 24px;

     transform: translateY(-50%);

     background-image: url(../images/arrow-white.svg);

     background-repeat: no-repeat;

     background-position: center center;

     background-size: cover;

     width: 12px;

     height: 12px;

     transition: all 0.4s ease-in-out;

     z-index: 1;

}

 .btn-default:hover:before{

     transform: translateY(-50%) rotate(45deg);

}

 .btn-default.btn-highlighted{

     background: transparent;

     border: 1px solid var(--white-color);

     color: var(--white-color);

     padding: 14px 46px 14px 24px;

     overflow: hidden;

}

 .btn-default.btn-highlighted:hover{

     color: var(--primary-color);

}

 .btn-default.btn-highlighted:hover:before{

     filter: brightness(1) invert(1);

}

 .btn-default.btn-highlighted::after{

     content: '';

     position: absolute;

     top: 0;

     right: 0;

     bottom: 0;

     width: 0;

     height: 100%;

     background: var(--white-color);

     z-index: -1;

     transition: all 0.4s ease-in-out;

}

 .btn-default.btn-highlighted:hover::after{

     right: auto;

     left: 0;

     width: 100%;

}

 .readmore-btn{

     position: relative;

     display: inline-block;

     font-weight: 500;

     line-height: normal;

     text-transform: capitalize;

     color: var(--primary-color);

     padding-right: 22px;

     transition: all 0.4s ease-in-out;

}

 .readmore-btn::before{

     content: '';

     position: absolute;

     top: 50%;

     right: 0;

     transform: translateY(-50%);

     background-image: url('../images/arrow-primary.svg');

     background-repeat: no-repeat;

     background-position: center center;

     background-size: cover;

     width: 12px;

     height: 12px;

     transition: all 0.4s ease-in-out;

}

 .readmore-btn:hover::before{

     transform: translateY(-50%) rotate(45deg);

}

 .cb-cursor:before{

     background: var(--accent-color);

}

 .preloader{

     position: fixed;

     top: 0;

     left: 0;

     right: 0;

     bottom: 0;

     z-index: 1000;

     background: linear-gradient(90deg, var(--accent-secondary-color) 0%, #b1b1b1 100%);

     display: flex;

     align-items: center;

     justify-content: center;

}

 .loading-container, .loading {
    height: 200px;
    position: relative;
    width: 200px;
    border-radius: 100%;
}

 .loading-container{

     margin: 40px auto;

}

 .loading{

     border: 1px solid transparent;

     border-color: transparent var(--white-color) transparent var(--white-color);

     animation: rotate-loading 1.5s linear 0s infinite normal;

     transform-origin: 50% 50%;

}

 .loading-container:hover .loading, .loading-container .loading{

     transition: all 0.5s ease-in-out;

}

 #loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 96px;
    transform: translate(-50%, -50%);
}

 @keyframes rotate-loading{

     0%{

         transform: rotate(0deg);

    }

     100%{

         transform: rotate(360deg);

    }

}

 .section-row{

     margin-bottom: 80px;

}

 .section-row .section-title{

     margin-bottom: 0;

}

 .section-title.section-title-center{

     width: 100%;

     max-width: 990px;

     text-align: center;

     margin: 0 auto;

}

 .section-btn{

     text-align: right;

}

 .section-content-btn .section-btn{

     margin-top: 20px;

     text-align: left;

}

 .section-title-content p{

     margin-bottom: 20px;

}

 .section-title-content p:last-child{

     margin-bottom: 0;

}

 .section-title{

     margin-bottom: 40px;

}

 .section-sub-title h3, .section-title h3{

     position: relative;

     display: inline-block;

     font-size: 14px;

     font-weight: 400;

     text-transform: capitalize;

     line-height: normal;

     color: var(--primary-color);

     border: 1px solid var(--divider-color);

     border-radius: 100px;

     padding: 8px 16px 8px 32px;

     margin-bottom: 15px;

}

 .section-sub-title h3::before, .section-title h3::before{

     content: '';

     position: absolute;

     left: 16px;

     top: 50%;

     transform: translateY(-50%);

     background: var(--accent-color);

     border-radius: 50%;

     width: 6px;

     height: 6px;

}

 .section-title h1{

     font-size: 50px;

     font-weight: 400;

     letter-spacing: -0.02em;

     margin-bottom: 0;

     cursor: none;

}

 .section-title h2{

     font-size: 46px;

     font-weight: 400;

     letter-spacing: -0.02em;

     margin-bottom: 0;

     cursor: none;

}

 .section-title h2 span, .section-title h1 span{

     font-weight: 600;

}

 .section-title p{

     margin-top: 20px;

     margin-bottom: 0;

}

 .dark-section{

     background: var(--primary-color);

}

 .dark-section .section-title-content p, .dark-section .section-title p, .dark-section .section-title h3, .dark-section .section-title h1, .dark-section .section-title h2{

     color: var(--white-color);

}

 .dark-section .section-sub-title h3, .dark-section .section-title h3{

     border-color: var(--dark-divider-color);

}

 .dark-section .section-title h3::before{

     background: var(--white-color);

}

 .help-block.with-errors ul{

     margin: 0;

     text-align: left;

}

 .help-block.with-errors ul li{

     color: var(--error-color);

     font-weight: 500;

     font-size: 14px;

}

/************************************/

/**** 03. Header css ****/

/************************************/

 header.main-header{

     position: absolute;

     top: 30px;

     left: 0;

     right: 0;

     width: 100%;

     max-width: 1840px;

     margin: 0 auto;

     background: var(--bg-color);

     box-shadow: 0 0 10px 0 rgba(41, 48, 66, 0.02);

     border-radius: 12px;

     z-index: 100;

}

 header.main-header .header-sticky{

     position: relative;

     top: 0;

     z-index: 100;

}

 header.main-header .header-sticky.hide{

     transform: translateY(-100%);

     transition: transform 0.3s ease-in-out;

     border-radius: 0;

}

 header.main-header .header-sticky.active{

     position: fixed;

     top: 30px;

     left: 0;

     right: 0;

     transform: translateY(0);

     width: 100%;

     max-width: 1840px;

     margin: 0 auto;

     background: var(--bg-color);

     box-shadow: 0 0 10px 0 rgba(41, 48, 66, 0.02);

     border: 1px solid var(--divider-color);

     border-radius: 12px;

}

 .navbar{

     padding: 20px;

     align-items: center;

}

 header.main-header .container-fluid{

     padding: 0;

}

 .navbar-brand{

     padding: 0;

     margin: 0;

}

 .main-menu .nav-menu-wrapper{

     flex: 1;

     text-align: center;

     margin: 0 20px;

}

 .main-menu .nav-menu-wrapper > ul{

     align-items: center;

     display: inline-flex;

}

 .main-menu ul li{

     position: relative;

     margin: 0 5px;

}

 .main-menu ul li a{

     font-size: 16px;

     font-weight: 500;

     line-height: 1.1em;

     padding: 15px 10px !important;

     color: var(--primary-color);

     text-transform: capitalize;

     transition: all 0.3s ease-in-out;

}

 .main-menu ul li.submenu > a:after{

     content: '\f107';

     font-family: 'FontAwesome';

     font-weight: 900;

     font-size: 14px;

     margin-left: 8px;

}

 .main-menu ul li a:hover, .main-menu ul li a:focus{

     color: var(--accent-color);

}

 .main-menu ul ul{

     visibility: hidden;

     opacity: 0;

     transform: scale(1,0.8);

     transform-origin: top;

     padding: 0;

     margin: 0;

     list-style: none;

     width: 235px;

     border-radius: 12px;

     position: absolute;

     left: 0;

     top: 100%;

     background: var(--accent-color);

     transition: all 0.3s ease-in-out;

     text-align: left;

}

 .main-menu ul li.submenu:first-child ul{

     width: 235px;

}

 .main-menu ul ul ul{

     left: 100%;

     top: 0;

     text-align: left;

}

 .main-menu ul li:hover > ul{

     visibility: visible;

     opacity: 1;

     transform: scale(1,1);

     padding: 5px 0;

}

 .main-menu ul li.submenu ul li.submenu > a:after{

     content: '\f105';

     float: right;

}

 .main-menu ul ul li{

     margin: 0;

     padding: 0;

}

 .main-menu ul ul li a{

     color: var(--white-color);

     padding: 8px 20px !important;

     transition: all 0.3s ease-in-out;

}

 .main-menu ul ul li a:hover, .main-menu ul ul li a:focus{

     color: var(--primary-color);

     background-color: transparent;

     padding: 8px 20px 8px 23px !important;

}

 .header-btn{

     text-align: end;

}

 .main-menu ul li.highlighted-menu{

     display: none;

}

 .responsive-menu, .navbar-toggle{

     display: none;

}

 .responsive-menu{

     top: 0;

     position: relative;

}

 .slicknav_btn{

     background: var(--accent-color);

     padding: 0;

     display: flex;

     align-items: center;

     justify-content: center;

     width: 38px;

     height: 38px;

     margin: 0;

     border-radius: 8px;

}

 .slicknav_icon .slicknav_icon-bar{

     display: block;

     width: 100%;

     height: 3px;

     width: 22px;

     background-color: var(--white-color);

     border-radius: 6px;

     margin: 4px auto !important;

     transition: all 0.1s ease-in-out;

}

 .slicknav_icon .slicknav_icon-bar:first-child{

     margin-top: 0 !important;

}

 .slicknav_icon .slicknav_icon-bar:last-child{

     margin-bottom: 0 !important;

}

 .navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){

     transform: rotate(-45deg) translate(-5px, 5px);

     background-color: var(--white-color);

}

 .navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){

     opacity: 0;

}

 .navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){

     transform: rotate(45deg) translate(-5px, -5px);

     background-color: var(--white-color);

}

 .slicknav_menu{

     position: absolute;

     width: 100%;

     padding: 0;

     background: var(--accent-color);

}

 .slicknav_menu ul{

     margin: 5px 0;

}

 .slicknav_menu ul ul{

     margin: 0;

}

 .slicknav_nav .slicknav_row, .slicknav_nav li a{

     position: relative;

     font-size: 16px;

     font-weight: 500;

     text-transform: capitalize;

     padding: 7px 20px;

     color: var(--white-color);

     line-height: normal;

     margin: 0;

     border-radius: 0 !important;

     transition: all 0.3s ease-in-out;

}

 .slicknav_nav a:hover, .slicknav_nav a:focus, .slicknav_nav .slicknav_row:hover{

     background-color: transparent;

     color: var(--primary-color);

}

 .slicknav_menu ul ul li a{

     padding: 7px 20px 7px 30px;

}

 .slicknav_arrow{

     font-size: 0 !important;

}

 .slicknav_arrow:after{

     content: '\f107';

     font-family: 'FontAwesome';

     font-weight: 900;

     font-size: 12px;

     margin-left: 8px;

     color: var(--white-color);

     position: absolute;

     right: 15px;

     top: 50%;

     transform: translateY(-50%);

     transition: all 0.3s ease-out;

}

 .slicknav_open > a .slicknav_arrow:after{

     transform: translateY(-50%) rotate(-180deg);

     color: var(--primary-color);

}

/************************************/

/*** 04. Hero css ***/

/************************************/

 .hero{

     position: relative;

     background: url('../images/hero-bg-image.png') no-repeat;

     background-position: top center;

     background-size: auto;

     padding: 260px 0 100px;

}

 .hero.hero-bg-image{

     position: relative;

     display: block;

     background: url('../images/hero-bg.jpg') no-repeat;

     background-position: center center;

     background-size: cover;

     padding: 270px 0 160px;

     overflow: hidden;

}

 .hero.hero-bg-image::before{

     content: '';

     position: absolute;

     top: 0;

     bottom: 0;

     left: 0;

     right: 0;

     background: linear-gradient(90deg, rgba(15, 36, 83, 0.8) 45%, transparent 65%);

     width: 100%;

     height: 100%;

     z-index: 1;

}

 .hero.hero-bg-image.hero-video .hero-bg-video{

     position: absolute;

     top: 0;

     right: 0;

     left: 0;

     bottom: 0;

     width: 100%;

     height: 100%;

}

 .hero.hero-bg-image.hero-video .hero-bg-video video{

     width: 100%;

     height: 100%;

     object-fit: cover;

}

 .hero .container{

     position: relative;

     z-index: 2;

}

 .hero.hero-bg-image .hero-content{

     text-align: left;

     max-width: 100%;

     margin: 0;

}

 .hero.hero-bg-image .hero-content .section-title p{

     max-width: 700px;

     margin-left: 0;

}

 .hero.hero-bg-image .hero-content .hero-body{

     justify-content: left;

}

 .hero.hero-bg-image .hero-content .hero-body .video-play-button p{

     color: var(--white-color);

}

 .hero-content{

     max-width: 1050px;

     text-align: center;

     margin: 0 auto 40px;

}

 .hero-content .section-title h3{

     padding: 6px 20px 6px 6px;

}

 .hero-content .section-title h3::before{

     display: none;

}

 .hero-content .section-title h3 span{

     display: inline-block;

     color: var(--white-color);

     background: var(--accent-color);

     border-radius: 100px;

     padding: 6px 12px;

     margin-right: 5px;

}

 .hero-content .section-title p{

     max-width: 890px;

     margin-left: auto;

     margin-right: auto;

}

 .hero-body{

     display: flex;

     flex-wrap: wrap;

     align-items: center;

     justify-content: center;

     gap: 20px;

}

 .video-play-button{

     display: inline-flex;

     align-items: center;

}

 .video-play-button a{

     height: 50px;

     width: 50px;

     background: var(--accent-color);

     border-radius: 50%;

     display: flex;

     justify-content: center;

     align-items: center;

     cursor: none;

     transition: all 0.3s ease-in-out;

}

 .video-play-button a i{

     font-size: 18px;

     color: var(--white-color);

     margin-left: 2px;

     transition: all 0.3s ease-in-out;

}

 .video-play-button:hover a{

     background: var(--primary-color);

}

 .video-play-button p{

     font-weight: 600;

     color: var(--primary-color);

     margin: 0 0 0 10px;

}

 .hero-item-list{

     display: flex;

     flex-wrap: wrap;

     align-items: end;

     gap: 30px;

}

 .hero-item{

     position: relative;

     width: calc(25% - 22.5px);

     background: var(--secondary-color);

     border-radius: 20px;

     overflow: hidden;

     padding: 40px;

}

 .hero-item.box-1{

     background: var(--primary-color);

     padding: 20px;

}

 .hero-item-content h3{

     font-size: 20px;

     line-height: 1.4em;

}

 .hero-item-content p{

     margin: 10px 0 0;

}

 .hero-item-content h2{

     font-size: 46px;

}

 .hero-item.dark-box .hero-item-content h2, .hero-item.dark-box .hero-item-content h3, .hero-item.dark-box .hero-item-content p{

     color: var(--white-color);

}

 .hero-item.box-1 .hero-item-content{

     padding: 10px;

}

 .hero-item.dark-box.box-1 .hero-item-content p span{

     color: var(--text-color);

}

 .hero-author-image{

     border-radius: 12px;

     overflow: hidden;

     margin-top: 20px;

}

 .hero-author-image figure{

     display: block;

}

 .hero-author-image img{

     width: 100%;

     aspect-ratio: 1 / 0.95;

     object-fit: cover;

}

 .hero-item.box-2{

     background: var(--accent-color) url('../images/hero-info-item-bg.png') no-repeat;

     background-position: top right;

     background-size: auto;

}

 .hero-counter{

     margin-bottom: 60px;

}

 .hero-client-box{

     border-bottom: 1px solid var(--divider-color);

     margin-bottom: 40px;

     padding-bottom: 40px;

}

 .satisfy-client-images{

     display: inline-flex;

     align-items: center;

}

 .satisfy-client-image{

     position: relative;

     display: inline-block;

     border: 1px solid var(--white-color);

     border-radius: 50%;

     margin-left: -16px;

     overflow: hidden;

     z-index: 1;

}

 .satisfy-client-image:first-child{

     margin-left: 0;

}

 .satisfy-client-image figure{

     display: block;

}

 .satisfy-client-image img{

     width: 100%;

     max-width: 50px;

}

 .satisfy-client-image.add-more{

     width: 52px;

     height: 52px;

     background: var(--accent-color);

     border-radius: 50%;

     display: flex;

     justify-content: center;

     align-items: center;

}

 .satisfy-client-image.add-more i{

     font-size: 20px;

     color: var(--primary-color);

}

 .satisfy-client-image.add-more h3{

     font-size: 16px;

     color: var(--primary-color);

}

 .hero-client-content{

     margin-top: 20px;

}

 .hero-item.box-4{

     background: linear-gradient(90deg, var(--accent-secondary-color) 0%, var(--accent-color) 100%);

}

 .hero-item-image{

     margin-top: 60px;

     text-align: center;

}

 .hero-item-image figure{

     display: block;

}

 .hero-item-image img{

     width: 100%;

     max-width: 280px;

}

/************************************/

/*** 05. Scrolling Ticker css ***/

/************************************/

 .our-scrolling-ticker{

     position: relative;

     background: linear-gradient(90deg, var(--accent-secondary-color) 0%, var(--accent-color) 100%);

     padding: 25px 0;

     z-index: 1;

}

 .scrolling-ticker-box{

     --gap: 80px;

     position: relative;

     display: flex;

     overflow: hidden;

     user-select: none;

     gap: var(--gap);

     align-items: center;

}

 .scrolling-content{

     flex-shrink: 0;

     display: flex;

     gap: var(--gap);

     min-width: 100%;

     animation: scroll 60s linear infinite;

}

 @keyframes scroll{

     from{

         transform: translateX(0);

    }

     to{

         transform: translateX(calc(-100% - var(--gap)));

    }

}

 .scrolling-content span img{

     width: 100%;

     max-width: 170px;

}

/************************************/

/*** 06. About Us css ***/

/************************************/

 .about-us{

     padding: 100px 0;

}

 .about-image-box{

     height: 100%;

     display: flex;

     flex-direction: column;

     justify-content: space-between;

     margin-right: 4.688vw;

}

 .about-us-image figure{

     display: block;

     border-radius: 12px;

}

 .about-us-image figure img{

     width: 100%;

     aspect-ratio: 1 / 1.15;

     object-fit: cover;

     border-radius: 12px;

}

 .about-us-body{

     display: flex;

     flex-wrap: wrap;

     align-items: center;

}

 .about-review-box{

     border-right: 1px solid var(--divider-color);

     margin-right: 4.167vw;

     padding-right: 4.167vw;

}

 .about-client-box{

     display: flex;

     flex-wrap: wrap;

     align-items: center;

     gap: 15px;

     border-bottom: 1px solid var(--divider-color);

     margin-bottom: 30px;

     padding-bottom: 30px;

}

 .about-client-content{

     max-width: 300px;

}

 .about-client-content p{

     margin-bottom: 0;

}

 .about-google-review-box{

     display: flex;

     flex-wrap: wrap;

     align-items: center;

     gap: 10px 0;

}

 .about-google-review{

     border-right: 1px solid var(--divider-color);

     margin-right: 30px;

     padding-right: 30px;

}

 .about-google-review-header{

     display: flex;

     flex-wrap: wrap;

     align-items: center;

     margin-bottom: 10px;

}

 .about-google-review-header .icon-box{

     margin-right: 10px;

}

 .about-google-review-header .icon-box img{

     width: 100%;

     max-width: 30px;

}

 .about-google-review-content p{

     color: var(--primary-color);

     margin-bottom: 0;

}

 .google-review-content{

     display: flex;

     align-items: center;

     gap: 2px;

}

 .google-review-content i{

     font-size: 16px;

     color: var(--accent-color);

}

 .google-review-content p{

     font-weight: 600;

     color: var(--primary-color);

     margin-bottom: 0;

}

 .about-author-content h3{

     font-size: 20px;

     margin-bottom: 5px;

}

 .about-author-content p{

     margin-bottom: 0;

}

 .about-us-circle a{

     display: inline-block;

     border-radius: 50%;

}

 .about-us-circle img{

     width: 100%;

     max-width: 130px;

     border-radius: 50%;

     animation: infiniterotate 20s infinite linear;

}

 @keyframes infiniterotate{

     from{

         transform: rotate(0deg);

    }

     to{

         transform: rotate(360deg);

    }

}

 .about-us-circle a:hover img{

     animation-play-state: paused;

}

/************************************/

/*** 07. Our Services css ***/

/************************************/

 .our-services{

     background: var(--secondary-color) url('../images/service-bg.png') no-repeat;

     background-position: center center;

     background-size: 100% auto;

     padding: 100px 0;

}

 .service-item{

     position: relative;

     min-height: 420px;

     display: flex;

     flex-direction: column;

     justify-content: space-between;

     gap: 30px;

     background: var(--white-color);

     border-radius: 12px;

     padding: 40px;

     height: calc(100% - 30px);

     margin-bottom: 30px;

     overflow: hidden;

     transition: all 0.4s ease-in-out;

}

 .service-item::before{

     content: '';

     position: absolute;

     right: 0;

     bottom: 0;

     left: 0;

     height: 0;

     width: 100%;

     background: linear-gradient(90deg, var(--accent-secondary-color) 0%, var(--accent-color) 100%);

     transition: all 0.4s ease-in-out;

}

 .service-item.active:before, .service-item:hover:before{

     height: 100%;

}

 .service-item-body{

     position: relative;

     z-index: 1;

}

 .service-item-header{

     display: flex;

     flex-wrap: wrap;

     justify-content: space-between;

     align-items: center;

     gap: 15px;

     border-bottom: 1px solid var(--divider-color);

     padding-bottom: 25px;

     margin-bottom: 25px;

     transition: all 0.4s ease-in-out;

}

 .service-item.active .service-item-header, .service-item:hover .service-item-header{

     border-color: var(--dark-divider-color);

}

 .service-item-title{

     width: calc(100% - 60px);

}

 .service-item-title h3{

     font-size: 20px;

     transition: all 0.4s ease-in-out;

}

 .service-item-title h3 a{

     color: inherit;

}

 .service-item-btn a{

     width: 44px;

     height: 44px;

     display: flex;

     justify-content: center;

     align-items: center;

     background: var(--white-color);

     border: 1px solid var(--divider-color);

     border-radius: 50%;

}

 .service-item-btn a img{

     width: 100%;

     max-width: 12px;

     transition: all 0.4s ease-in-out;

}

 .service-item-btn a:hover img{

     transform: rotate(45deg);

}

 .service-item-content p{

     margin-bottom: 0;

     transition: all 0.4s ease-in-out;

}

 .service-item.active .service-item-title h3, .service-item:hover .service-item-title h3, .service-item.active .service-item-content p, .service-item:hover .service-item-content p{

     color: var(--white-color);

}

 .service-item .icon-box{

     position: relative;

     width: 60px;

     height: 60px;

     display: flex;

     justify-content: center;

     align-items: center;

     background: var(--accent-color);

     border-radius: 50%;

     overflow: hidden;

     z-index: 1;

}

 .service-item .icon-box::before{

     content: '';

     position: absolute;

     top: 0;

     right: 0;

     bottom: 0;

     left: 0;

     transform: scale(0);

     background: var(--white-color);

     border-radius: 50%;

     transition: all 0.4s ease-in-out;

}

 .service-item.active .icon-box::before, .service-item:hover .icon-box::before{

     transform: scale(1);

}

 .service-item .icon-box img{

     width: 100%;

     max-width: 30px;

     transition: all 0.4s ease-in-out;

}

 .service-item.active .icon-box img, .service-item:hover .icon-box img{

     filter: brightness(1) invert(1);

}

 .service-bg-icon{

     position: absolute;

     right: -20px;

     bottom: -20px;

     z-index: 1;

}

 .service-bg-icon img{

     width: 100%;

     max-width: 100px;

     transition: all 0.3s ease-in-out;

}

 .service-item.active .service-bg-icon img, .service-item:hover .service-bg-icon img{

     filter: brightness(0) invert(1);

}

 .section-footer-text{

     margin-top: 30px;

     text-align: center;

}

 .section-footer-text p{

     color: var(--primary-color);

     margin-bottom: 0;

}

 .section-footer-text p span{

     font-size: 14px;

     font-weight: 500;

     background: var(--accent-color);

     color: var(--white-color);

     padding: 3px 10px;

     border-radius: 100px;

     margin-right: 5px;

}

 .section-footer-text p a{

     font-weight: 600;

     text-transform: capitalize;

     text-decoration: underline;

     text-underline-offset: 3px;

     color: var(--accent-color);

     transition: all 0.3s ease-in-out;

}

 .section-footer-text p a:hover{

     color: var(--primary-color);

}

 .dark-section .section-footer-text p{

     color: var(--white-color);

}

 .dark-section .section-footer-text p a:hover{

     color: var(--white-color);

}

 .section-footer-text ul{

     margin: 15px 0 0;

     padding: 0;

     list-style: none;

}

 .section-footer-text ul li{

     display: inline-block;

     font-weight: 600;

     line-height: normal;

     color: var(--primary-color);

     margin-right: 10px;

}

 .section-footer-text ul li:last-child{

     margin: 0;

}

 .section-footer-text ul li i{

     color: var(--accent-color);

}

 .dark-section .section-footer-text ul li, .dark-section .section-footer-text ul li i{

     color: var(--white-color);

}

 .section-footer-text.section-footer-contact p{

     display: flex;

     flex-wrap: wrap;

     align-items: center;

     justify-content: center;

}

 .section-footer-text.section-footer-contact span{

     width: 40px;

     height: 40px;

     padding: 0;

     display: inline-flex;

     justify-content: center;

     align-items: center;

     margin-right: 10px;

}

 .section-footer-text.section-footer-contact span img{

     max-width: 20px;

}

/************************************/

/*** 08. Why Choose Us css ***/

/************************************/

 .why-choose-us{

     padding: 100px 0;

}

 .why-choose-content{

     margin-right: 15px;

}

 .why-choose-body{

     display: flex;

     flex-wrap: wrap;

     align-items: center;

     gap: 20px 30px;

     background: var(--secondary-color);

     border-radius: 20px;

     padding: 40px 30px;

}

 .why-choose-counter-content{

     display: flex;

     flex-wrap: wrap;

     align-items: center;

     gap: 20px;

     width: calc(60% - 30px);

     padding-right: 30px;

     border-right: 1px solid var(--divider-color);

}

 .why-choose-counter .circle{

     position: relative;

     display: inline-block;

     color: var(--accent-color);

     background: var(--white-color);

     border-radius: 50%;

}

 .circle .progress_value{

     position: absolute;

     top: 50%;

     left: 50%;

     transform: translate(-50%, -52%);

     font-size: 20px;

     color: var(--primary-color);

     font-weight: 600;

     display: flex;

     align-items: center;

     justify-content: center;

     background: var(--secondary-color);

     border-radius: 50%;

}

 .why-choose-counter-info{

     width: calc(100% - 110px);

}

 .why-choose-counter-info p{

     margin: 0;

}

 .why-choose-counter-list{

     width: 40%;

}

 .why-choose-counter-list ul{

     list-style: disc;

     margin: 0;

     padding-left: 20px;

}

 .why-choose-counter-list ul li{

     line-height: 1.5em;

     margin-bottom: 15px;

}

 .why-choose-counter-list ul li:last-child{

     margin: 0;

}

 .why-choose-counter-list ul li::marker{

     color: var(--accent-color);

     transition: all 0.3s ease-in-out;

}

 .why-choose-item-list{

     display: flex;

     flex-wrap: wrap;

     gap: 30px;

     margin-top: 40px;

}

 .why-choose-item{

     width: calc(50% - 15px);

}

 .why-choose-item .icon-box{

     position: relative;

     background: var(--accent-color);

     border-radius: 50%;

     width: 50px;

     height: 50px;

     display: flex;

     align-items: center;

     justify-content: center;

     margin-bottom: 30px;

     overflow: hidden;

     z-index: 1;

}

 .why-choose-item .icon-box::before{

     content: '';

     position: absolute;

     top: 0;

     bottom: 0;

     right: 0;

     left: 0;

     background: linear-gradient(90deg, var(--accent-secondary-color) 0%, var(--accent-color) 100%);

     border-radius: 50%;

     width: 100%;

     height: 100%;

     transform: scale(0);

     transition: all 0.4s ease-in-out;

     z-index: 0;

}

 .why-choose-item:hover .icon-box::before{

     transform: scale(1);

}

 .why-choose-item .icon-box img{

     position: relative;

     max-width: 24px;

     z-index: 1;

}

 .why-choose-item-content h3{

     font-size: 20px;

}

 .why-choose-item-content p{

     margin: 10px 0 0 0;

}

 .why-choose-btn{

     border-top: 1px solid var(--divider-color);

     margin-top: 40px;

     padding-top: 40px;

}

 .why-choose-image-box{

     display: flex;

     flex-wrap: wrap;

     align-items: center;

     gap: 20px;

}

 .why-choose-img-box-1{

     width: calc(54% - 10px);

}

 .why-choose-img-box-1 .why-choose-image{

     padding: 40px 0 0 40px;

     background: url('../images/why-choose-image-bg.png') no-repeat;

     background-position: top left;

     background-size: 140px auto;

}

 .why-choose-image figure{

     display: block;

     border-radius: 12px;

}

 .why-choose-image img{

     width: 100%;

     object-fit: cover;

     border-radius: 12px;

}

 .why-choose-image.image-1 img{

     aspect-ratio: 1 / 1.585;

}

 .why-choose-img-box-2{

     width: calc(46% - 10px);

}

 .why-choose-img-box-2 .why-choose-image{

     margin-bottom: 20px;

}

 .why-choose-img-box-2 .why-choose-image:last-child{

     margin-bottom: 0;

}

 .why-choose-image.image-2 img{

     aspect-ratio: 1 / 1.48;

}

 .why-choose-image.image-3 img{

     aspect-ratio: 1 / 1.1;

}

 .year-experience-box{

     position: relative;

     max-width: 300px;

     display: flex;

     flex-wrap: wrap;

     align-items: center;

     background: linear-gradient(90deg, var(--accent-secondary-color) 0%, var(--accent-color) 50%, var(--accent-secondary-color));

     background-size: 200% auto;

     border: 4px solid var(--white-color);

     border-radius: 12px;

     padding: 20px;

     margin-top: 60px;

     margin-left: auto;

     transition: all 0.4s ease-in-out;

     animation: yearboxmove 2s infinite alternate linear;

     z-index: 1;

}

 @keyframes yearboxmove{

     from{

         transform: translateX(30px);

    }

     to{

         transform: translateX(100px);

    }

}

 .year-experience-box:hover{

     background-position: right center;

}

 .year-experience-box h2{

     font-size: 34px;

     color: var(--white-color);

     width: 70px;

     margin-right: 10px;

}

 .year-experience-box p{

     font-weight: 600;

     color: var(--white-color);

     margin-bottom: 0;

}

/************************************/

/*** 09. How It Work css ***/

/************************************/

 .how-it-work{

     background: var(--secondary-color) url('../images/how-it-work-bg.png') no-repeat;

     background-size: cover;

     background-position: center center;

     padding: 100px 0;

}

 .how-it-work .section-title h2 .work-title-images{

     display: inline-block;

}

 .how-it-work .section-title h2 .work-title-images img{

     width: 100%;

     max-width: 44px;

     border-radius: 50%;

     border: 1px solid var(--white-color);

     margin-left: -14px;

}

 .how-it-work .section-title h2 .work-title-images img:first-child{

     margin: 0;

}

 .how-work-item{

     background-color: var(--white-color);

     border-radius: 12px;

     min-height: 410px;

     display: flex;

     flex-direction: column;

     justify-content: space-between;

     gap: 30px;

     height: calc(100% - 30px);

     margin-bottom: 30px;

     padding: 40px 35px;

}

 .how-work-item-header{

     display: flex;

     justify-content: space-between;

     align-items: center;

     gap: 15px;

}

 .how-work-item-header .icon-box{

     position: relative;

     width: 60px;

     height: 60px;

     background-color: var(--accent-color);

     border-radius: 50%;

     display: flex;

     justify-content: center;

     align-items: center;

     transition: all 0.4s ease-in-out;

}

 .how-work-item-header .icon-box::before{

     content: '';

     position: absolute;

     top: 0;

     right: 0;

     bottom: 0;

     left: 0;

     background: var(--primary-color);

     border-radius: 50%;

     width: 100%;

     height: 100%;

     transform: scale(0);

     transition: all 0.4s ease-in-out;

     z-index: 0;

}

 .how-work-item:hover .how-work-item-header .icon-box::before{

     transform: scale(1);

}

 .how-work-item-header .icon-box img{

     position: relative;

     width: 100%;

     max-width: 30px;

     z-index: 1;

}

 .how-work-item-no h3{

     font-size: 20px;

     line-height: 1.4em;

}

 .how-work-item-content h3{

     font-size: 20px;

     line-height: 1.4em;

}

 .how-work-item-content p{

     margin: 10px 0 0;

}

 .how-work-btn{

     border-top: 1px solid var(--divider-color);

     margin-top: 30px;

     padding-top: 30px;

}

/************************************/

/*** 10. Our Case Studies css ***/

/************************************/

 .our-case-study{

     padding: 100px 0;

}

 .case-study-item{

     position: relative;

     border-radius: 12px;

     height: calc(100% - 30px);

     margin-bottom: 30px;

     overflow: hidden;

}

 .case-study-image a, .case-study-image figure{

     display: block;

     cursor: none;

}

 .case-study-image figure img{

     width: 100%;

     aspect-ratio: 1 / 1.45;

     object-fit: cover;

     transition: all 0.4s ease-in-out;

}

 .case-study-item:hover .case-study-image figure img{

     transform: scale(1.1);

}

 .case-study-item-btn{

     position: absolute;

     top: 30px;

     right: 30px;

     transform: scale(0);

     opacity: 0;

     visibility: hidden;

     transition: all 0.4s ease-in-out;

     z-index: 1;

}

 .case-study-item:hover .case-study-item-btn{

     transform: scale(1);

     opacity: 1;

     visibility: visible;

}

 .case-study-item-btn a{

     background: linear-gradient(to right, var(--accent-secondary-color) 0%, var(--accent-color) 50%, var(--accent-secondary-color) 100%);

     background-size: 200% auto;

     border-radius: 50%;

     width: 50px;

     height: 50px;

     display: flex;

     align-items: center;

     justify-content: center;

     transition: all 0.4s ease-in-out;

}

 .case-study-item-btn a:hover{

     background-position: right center;

}

 .case-study-item-btn a img{

     width: 100%;

     max-width: 14px;

     transition: all 0.4s ease-in-out;

}

 .case-study-item-btn a:hover img{

     transform: rotate(45deg);

}

 .case-study-item-content{

     position: absolute;

     left: 30px;

     right: 30px;

     bottom: 30px;

     background: var(--divider-color);

     backdrop-filter: blur(30px) saturate(180%);

     -webkit-backdrop-filter: blur(30px) saturate(180%);

     border-radius: 12px;

     padding: 20px;

}

 .case-study-item-content h3{

     font-size: 20px;

     color: var(--white-color);

     margin-bottom: 15px;

}

 .case-study-item-content h3 a{

     color: inherit;

}

 .case-study-item-content ul{

     list-style: none;

     display: flex;

     flex-wrap: wrap;

     gap: 10px;

     margin: 0;

     padding: 0;

}

 .case-study-item-content ul li a{

     font-size: 14px;

     color: var(--white-color);

     background: var(--dark-divider-color);

     border: 1px solid var(--dark-divider-color);

     backdrop-filter: blur(30px);

     -webkit-backdrop-filter: blur(30px);

     border-radius: 100px;

     display: block;

     padding: 7px 15px;

     transition: all 0.4s ease-in-out;

}

 .case-study-item-content ul li a:hover{

     background-color: var(--white-color);

     color: var(--primary-color);

}

/************************************/

/*** 11. Intro Video css ***/

/************************************/

 .intro-video{

     position: relative;

     background: url('../images/intro-video-bg.jpg') no-repeat;

     background-position: center center;

     background-size: cover;

     padding: 160px 0;

}

 .intro-video::before{

     content: '';

     position: absolute;

     top: 0;

     right: 0;

     bottom: 0;

     left: 0;

     width: 100%;

     height: 100%;

     background: var(--black-color);

     opacity: 50%;

     z-index: 1;

}

 .intro-video .container{

     position: relative;

     z-index: 2;

}

 .our-video-circle{

     text-align: center;

     margin-bottom: 120px;

}

 .our-video-circle a{

     display: inline-block;

     border-radius: 50%;

     cursor: none;

}

 .our-video-circle a img{

     width: 100%;

     max-width: 130px;

     border-radius: 50%;

     animation: infiniterotate 20s infinite linear;

}

 .our-video-circle a:hover img{

     animation-play-state: paused;

}

 .intro-video-list{

     max-width: 1150px;

     margin: 60px auto 0;

}

 .intro-video-list ul{

     display: flex;

     flex-wrap: wrap;

     justify-content: center;

     align-items: center;

     gap: 20px 30px;

     list-style: none;

     margin: 0;

     padding: 0;

}

 .intro-video-list ul li{

     position: relative;

     font-size: 14px;

     line-height: normal;

     color: var(--white-color);

     background: var(--dark-divider-color);

     backdrop-filter: blur(30px);

     -webkit-backdrop-filter: blur(30px);

     border: 1px solid var(--dark-divider-color);

     border-radius: 40px;

     padding: 10px 16px 10px 46px;

}

 .intro-video-list ul li::before{

     content: '\f058';

     position: absolute;

     font-family: 'Font Awesome 7 Free';

     font-size: 18px;

     font-weight: 900;

     color: var(--accent-color);

     left: 16px;

     top: 50%;

     transform: translateY(-50%);

     line-height: normal;

}

/************************************/

/*** 12. Our Features css ***/

/************************************/

 .our-features{

     padding: 100px 0;

}

 .feature-item-box{

     display: flex;

     flex-wrap: wrap;

     gap: 30px;

}

 .feature-item{

     width: calc(33.33% - 20px);

     background: var(--secondary-color);

     border-radius: 12px;

     min-height: 420px;

     display: flex;

     flex-direction: column;

     justify-content: space-between;

     gap: 30px;

     text-align: center;

     padding: 50px;

}

 .feature-item.box-1{

     width: calc(41% - 15px);

}

 .feature-item.box-2{

     width: calc(59% - 15px);

}

 .feature-image figure{

     display: block;

     border-radius: 12px;

     overflow: hidden;

}

 .feature-image img{

     object-fit: cover;

}

 .feature-scrolling-ticker{

     margin: 0 -50px;

}

 .feature-scrolling-ticker .scrolling-ticker-box{

     --gap: 25px;

     margin-bottom: 30px;

}

 .feature-scrolling-ticker .scrolling-ticker-box:last-child{

     margin-bottom: 0;

}

 .feature-scrolling-ticker .scrolling-content span{

     font-size: 14px;

     color: var(--primary-color);

     display: inline-flex;

     align-items: center;

     gap: 10px;

     border: 1px solid var(--divider-color);

     padding: 9px 16px;

     border-radius: 100px;

}

 .feature-scrolling-ticker .scrolling-content span img{

     max-width: 20px;

}

 .feature-scrolling-ticker .scrolling-ticker-box.scroll-reverse .scrolling-content{

     animation-direction: reverse;

}

 .feature-scrolling-ticker .scrolling-ticker-box:hover .scrolling-content{

     animation-play-state: paused;

}

 .feature-item-content h3{

     font-size: 20px;

}

 .feature-item-content p{

     margin: 15px 0 0;

}

 .our-features .section-footer-text{

     margin-top: 60px;

}

/************************************/

/*** 13. Our Pricing css ***/

/************************************/

 .our-pricing{

     background: var(--primary-color) url('../images/pricing-bg-image.png') no-repeat;

     background-position: center center;

     background-size: cover;

     padding: 100px 0;

}

 .our-pricing-swich{

     display: flex;

     align-items: center;

     justify-content: center;

     gap: 30px;

     margin-bottom: 60px;

     padding: 0;

}

 .our-pricing-swich .form-check-label{

     color: var(--white-color);

     font-size: 20px;

     font-weight: 600;

     cursor: pointer;

}

 .our-pricing-swich.form-switch .form-check-input{

     width: 75px;

     height: 40px;

     --bs-form-check-bg: var(--white-color);

     --bs-form-switch-bg: url('../images/pricing-swich-circle.svg');

     background-size: 28px auto;

     background-position: left 5px center;

     border-radius: 100px;

     border: none;

     outline: none;

     box-shadow: none;

     cursor: pointer;

     margin: 0;

     transition: all 0.3s ease-in-out;

}

 .form-switch .form-check-input:checked{

     background-color: var(--accent-color);

     background-position: right 5px center;

}

 .pricing-item{

     position: relative;

     background: var(--dark-divider-color);

     backdrop-filter: blur(30px);

     -webkit-backdrop-filter: blur(30px);

     border-radius: 12px;

     height: calc(100% - 30px);

     margin-bottom: 30px;

     padding: 40px;

     overflow: hidden;

}

 .pricing-header{

     border-bottom: 1px solid var(--dark-divider-color);

     margin-bottom: 25px;

     padding-bottom: 25px;

}

 .pricing-header h3{

     font-size: 16px;

     color: var(--white-color);

}

 .pricing-header p{

     color: var(--white-color);

     margin: 10px 0 0;

}

 .pricing-header h2{

     font-size: 36px;

     color: var(--white-color);

     margin-top: 20px;

}

 .pricing-header h2 sub{

     font-size: 16px;

     font-weight: 500;

     bottom: 0;

}

 .pricing-body h3{

     font-size: 18px;

     color: var(--white-color);

     margin-bottom: 20px;

}

 .pricing-body ul{

     list-style: disc;

     margin: 0;

     padding-left: 20px;

}

 .pricing-body ul li{

     color: var(--white-color);

     line-height: 1.5em;

     margin-bottom: 15px;

}

 .pricing-body ul li:last-child{

     margin-bottom: 0;

}

 .pricing-body ul li::marker{

     color: var(--accent-color);

}

 .pricing-btn{

     margin-top: 30px;

}

 .pricing-btn .btn-default{

     width: 100%;

     text-align: center;

     padding: 14px;

}

 .pricing-btn .btn-default::before{

     display: none;

}

 .pricing-item.highlighted-box::after{

     content: 'most popular';

     position: absolute;

     font-size: 14px;

     font-weight: 600;

     text-transform: capitalize;

     color: var(--white-color);

     top: 30px;

     right: -48px;

     width: 180px;

     height: 34px;

     display: flex;

     justify-content: center;

     align-items: center;

     background: var(--accent-color);

     transform: rotate(48deg);

     transition: all 0.4s ease-in-out;

}

 .pricing-item.highlighted-box .pricing-header{

     margin-right: 20px;

}

 .pricing-benefit-list{

     margin-top: 30px;

}

 .pricing-benefit-list ul{

     list-style: none;

     margin: 0;

     padding: 0;

     display: flex;

     flex-wrap: wrap;

     justify-content: center;

     gap: 20px 40px;

}

 .pricing-benefit-list ul li{

     color: var(--white-color);

     display: inline-flex;

     align-items: center;

}

 .pricing-benefit-list ul li img{

     width: 100%;

     max-width: 20px;

     margin-right: 15px;

}

/************************************/

/*** 14. Our FAQs css ***/

/************************************/

 .our-faqs{

     padding: 100px 0;

}

 .our-faqs-content{

     position: sticky;

     top: 40px;

}

 .faq-accordion .accordion-item{

     position: relative;

     background: var(--secondary-color);

     border-radius: 12px;

     margin-bottom: 30px;

     overflow: hidden;

}

 .faq-accordion .accordion-item:last-child{

     margin-bottom: 0;

}

 .faq-accordion .accordion-header .accordion-button{

     font-size: 18px;

     font-weight: 500;

     line-height: normal;

     background: transparent;

     color: var(--primary-color);

     padding: 25px 70px 25px 25px;

     transition: all 0.3s ease-in-out;

}

 .faq-accordion .accordion-header .accordion-button.collapsed{

     background: transparent;

}

 .faq-accordion .accordion-item .accordion-button::after, .faq-accordion .accordion-item .accordion-button.collapsed::after{

     content: '\2b';

     font-family: 'FontAwesome';

     position: absolute;

     right: 25px;

     top: 50%;

     bottom: auto;

     transform: translateY(-50%);

     width: 34px;

     height: 34px;

     display: flex;

     justify-content: center;

     align-items: center;

     font-size: 18px;

     color: var(--white-color);

     background: var(--accent-color);

     border-radius: 5px;

     transition: all 0.4s ease-in-out;

}

 .faq-accordion .accordion-button:not(.collapsed)::after{

     content: '\f068';

}

 .faq-accordion .accordion-item .accordion-body{

     border-top: 1px solid var(--divider-color);

     background: transparent;

     padding: 25px;

}

 .faq-accordion .accordion-item .accordion-body p{

     margin: 0;

}

/************************************/

/*** 15. Our Tesimonial css ***/

/************************************/

 .our-testimonials{

     position: relative;

     background: url('../images/testimonial-bg.jpg') no-repeat;

     background-position: center center;

     background-size: cover;

     padding: 100px 0;

}

 .our-testimonials::before{

     content: '';

     position: absolute;

     top: 0;

     right: 0;

     bottom: 0;

     left: 0;

     width: 100%;

     height: 100%;

     background: var(--black-color);

     opacity: 25%;

     z-index: 1;

}

 .our-testimonials .container{

     position: relative;

     z-index: 2;

}

 .testimonial-google-review{

     display: inline-block;

     background: var(--dark-divider-color);

     backdrop-filter: blur(30px);

     -webkit-backdrop-filter: blur(30px);

     border-radius: 12px;

     padding: 25px;

     margin-top: 60px;

}

 .testimonial-google-review .about-google-review-content p, .testimonial-google-review .google-review-content p{

     color: var(--white-color);

}

 .testimonial-slider{

     position: relative;

     background: var(--white-color);

     border-radius: 12px;

     padding: 3.125vw;

     margin-left: 15px;

}

 .testimonial-slider .swiper-wrapper{

     cursor: none;

}

 .testimonial-item{

     min-height: 460px;

     display: flex;

     flex-direction: column;

     justify-content: space-between;

     gap: 30px;

}

 .testimonial-header{

     display: flex;

     flex-wrap: wrap;

     justify-content: space-between;

     align-items: center;

     gap: 20px;

}

 .testimonial-logo img{

     width: 100%;

     max-width: 160px;

}

 .testimonial-quote img{

     width: 100%;

     max-width: 40px;

}

 .testimonial-content p{

     font-size: 20px;

     font-weight: 600;

     color: var(--primary-color);

     margin-bottom: 0;

}

 .testimonial-author-content{

     border-top: 1px solid var(--divider-color);

     padding-top: 50px;

     margin-top: 50px;

}

 .testimonial-author-content h3{

     font-size: 20px;

     text-transform: capitalize;

}

 .testimonial-author-content p{

     text-transform: capitalize;

     margin: 5px 0 0;

}

 .testimonial-slider-btn{

     position: absolute;

     bottom: 0;

     right: 0;

     display: flex;

     align-items: center;

     z-index: 1;

}

 .testimonial-slider .testimonial-button-next, .testimonial-slider .testimonial-button-prev{

     position: relative;

     width: 50px;

     height: 50px;

     background: var(--accent-color);

     border-radius: 50%;

     transition: all 0.4s ease-in-out;

}

 .testimonial-slider .testimonial-button-next{

     margin-left: 20px;

}

 .testimonial-slider .testimonial-button-next:hover, .testimonial-slider .testimonial-button-prev:hover{

     background: var(--primary-color);

}

 .testimonial-slider .testimonial-button-next::before, .testimonial-slider .testimonial-button-prev::before{

     content: '';

     position: absolute;

     top: 50%;

     bottom: 0;

     left: 50%;

     right: 0;

     background: url('../images/arrow-white.svg');

     background-repeat: no-repeat;

     background-position: center center;

     background-size: 14px auto;

     transform: translate(-50%, -50%) rotate(45deg);

     transition: all 0.3s ease-in-out;

}

 .testimonial-slider .testimonial-button-prev::before{

     transform: translate(-50%, -50%) rotate(-135deg);

}

/************************************/

/*** 16. Our Blogs css ***/

/************************************/

 .our-blog{

     padding: 100px 0 70px;

}

 .post-item{

     height: calc(100% - 30px);

     margin-bottom: 30px;

}

 .post-featured-image{

     margin-bottom: 20px;

}

 .post-featured-image a{

     cursor: none;

     display: block;

     border-radius: 12px;

     overflow: hidden;

}

 .post-featured-image figure{

     display: block;

}

 .post-featured-image img{

     width: 100%;

     aspect-ratio: 1 / 0.725;

     object-fit: cover;

     transition: all 0.4s ease-in-out;

}

 .post-item:hover .post-featured-image img{

     transform: scale(1.1);

}

 .post-item-content{

     margin-bottom: 20px;

}

 .post-item-content h2{

     font-size: 20px;

     line-height: 1.4em;

}

 .post-item-content h2 a{

     color: inherit;

}

/************************************/

/*** 17. Footer css ***/

/************************************/

 .main-footer{

     background: linear-gradient(90deg, var(--accent-secondary-color) 0%, var(--accent-color) 100%);

     padding: 100px 0 0;

}

 .footer-scrolling-ticker-box{

     margin-bottom: 80px;

     padding-bottom: 100px;

     border-bottom: 1px solid var(--dark-divider-color);

}

 .footer-scrolling-ticker-box .container-fluid{

     padding: 0;

}

 .footer-scrolling-ticker{

     position: relative;

}

 .footer-scrolling-ticker .scrolling-ticker-box{

     --gap: 30px;

}

 .footer-scrolling-ticker .scrolling-content span{

     display: flex;

     align-items: center;

     font-size: 140px;

     line-height: normal;

     font-weight: 500;

     letter-spacing: -0.02em;

     text-transform: uppercase;

     color: var(--white-color);

}

 .footer-scrolling-ticker .scrolling-content span img{

     max-width: 80px;

     margin-right: 30px;

}

 .footer-contact-btn{

     position: absolute;

     top: 50%;

     left: 50%;

     transform: translate(-50%, -50%);

     z-index: 1;

}

 .footer-contact-btn a{

     width: 180px;

     height: 180px;

     background: var(--accent-color);

     border-radius: 50%;

     display: flex;

     flex-direction: column;

     gap: 20px;

     font-size: 22px;

     font-weight: 600;

     line-height: 1.4em;

     color: var(--white-color);

     justify-content: center;

     align-items: center;

     text-align: center;

     padding: 30px;

     transition: all 0.4s ease-in-out;

}

 .footer-contact-btn a:hover{

     background: var(--primary-color);

}

 .footer-contact-btn a img{

     width: 100%;

     max-width: 18px;

     transition: all 0.4s ease-in-out;

}

 .footer-contact-btn a:hover img{

     transform: rotate(45deg);

}

 .footer-logo img{

     width: 100%;

     max-width: 160px;

}

 .about-footer-content{

     margin-top: 20px;

}

 .about-footer-content p{

     color: var(--white-color);

     margin: 0;

}

 .footer-links h3{

     font-size: 20px;

     color: var(--white-color);

     margin-bottom: 30px;

}

 .footer-links p{

     color: var(--white-color);

     margin-bottom: 20px;

}

 .footer-links p:last-child{

     margin-bottom: 0;

}

 .footer-links ul{

     list-style: none;

     margin: 0;

     padding: 0;

}

 .footer-links ul li{

     color: var(--white-color);

     line-height: 1.5em;

     border-bottom: 1px solid var(--dark-divider-color);

     padding-bottom: 20px;

     margin-bottom: 20px;

}

 .footer-links ul li:last-child{

     margin-bottom: 0;

     padding-bottom: 0;

     border-bottom: none;

}

 .footer-links ul li a{

     color: inherit;

     transition: all 0.3s ease-in-out;

}

 .footer-links ul li a:hover{

     color: var(--black-color);

}

 .footer-location{

     margin: 0 1.042vw;

}

 .footer-contact{

     margin-right: 2.604vw;

}

 .footer-newsletter-form .form-group{

     display: flex;

     align-items: center;

     background: var(--dark-divider-color);

     border-radius: 5px;

     padding: 7px;

}

 .footer-newsletter-form .form-group .form-control{

     width: 70%;

     font-size: 14px;

     font-weight: 400;

     line-height: 1.4em;

     color: var(--white-color);

     background: transparent;

     border: none;

     border-radius: 0;

     outline: none;

     box-shadow: none;

     padding: 8px;

}

 .footer-newsletter-form .form-group .form-control::placeholder{

     color: var(--white-color);

}

 .footer-newsletter-form .newsletter-btn{

     width: 30%;

     font-size: 12px;

     background: var(--white-color);

     padding: 10px;

     border-radius: 5px;

     border: none;

     box-shadow: none;

     outline: none;

     transition: all 0.3s ease-in-out;

}

 .footer-newsletter-form .newsletter-btn:hover{

     background: var(--primary-color);

     color: var(--white-color);

}

 .footer-copyright{

     border-top: 1px solid var(--dark-divider-color);

     padding: 40px 0 60px;

     margin-top: 80px;

}

 .footer-copyright-box{

     display: flex;

     align-items: center;

     flex-wrap: wrap;

     justify-content: space-between;

     gap: 15px;

}

 .footer-copyright-text p{

     color: var(--white-color);

     margin: 0;

}

 .footer-menu ul{

     display: flex;

     flex-wrap: wrap;

     gap: 15px 30px;

     list-style: none;

     margin: 0;

     padding: 0;

}

 .footer-menu ul li{

     color: var(--white-color);

     text-transform: capitalize;

     line-height: 1.5em;

}

 .footer-menu ul li a{

     color: inherit;

     transition: all 0.3s ease-in-out;

}

 .footer-menu ul li a:hover{

     color: var(--black-color);

}

/************************************/

/*** 18. About Us Page css ***/

/************************************/

 .page-header{

     position: relative;

     background: url('../images/page-header-bg.png') no-repeat;

     background-position: top center;

     background-size: cover;

     padding: 180px 0 60px;

     overflow: hidden;

}

 .page-header-box{

     text-align: center;

}

 .page-header-box h1{

     display: inline-block;

     font-size: 50px;

     font-weight: 400;

     letter-spacing: -0.02em;

     margin-bottom: 10px;

     cursor: none;

}

 .page-header-box h1 span{

     font-weight: 600;

}

 .page-header-box ol{

     margin: 0;

     padding: 0;

     justify-content: center;

}

 .page-header-box ol li.breadcrumb-item{

     font-size: 16px;

     font-weight: 400;

     line-height: normal;

     text-transform: capitalize;

     color: var(--text-color);

}

 .page-header-box ol li.breadcrumb-item a{

     color: inherit;

}

 .page-header-box ol .breadcrumb-item+.breadcrumb-item::before{

     color: var(--text-color);

}

 .our-value{

     background: var(--secondary-color) url('../images/our-value-bg.png') no-repeat;

     background-position: center center;

     background-size: cover;

     padding: 100px 0;

}

 .our-value-image-box{

     position: relative;

     display: flex;

     flex-wrap: wrap;

     align-items: end;

     margin: 0 35px 20px 0;

}

 .our-value-img-1{

     width: 65%;

     padding-bottom: 160px;

}

 .our-value-img-2{

     position: relative;

     width: calc(35% + 130px);

     margin-left: -130px;

     z-index: 1;

}

 .our-value-img-1 figure, .our-value-img-2 figure{

     display: block;

     border-radius: 12px;

}

 .our-value-img-2 figure{

     width: 100%;

     border: 6px solid var(--white-color);

     box-shadow: 0 0 10px 0 rgba(15, 36, 83, 0.10);

     transform: rotate(4.79deg);

}

 .our-value-img-2 figure img, .our-value-img-1 figure img{

     width: 100%;

     object-fit: cover;

     border-radius: 12px;

}

 .our-value-img-1 figure img{

     aspect-ratio: 1 / 1.242;

}

 .our-value-img-2 figure img{

     aspect-ratio: 1 / 1.36;

}

 .our-value-img-2 .contact-us-circle{

     position: absolute;

     top: 50%;

     transform: translate(-60%, 0%);

     z-index: 1;

}

 .our-value-img-2 .contact-us-circle a{

     border: 6px solid var(--white-color);

}

 .contact-us-circle a{

     display: inline-block;

     border-radius: 50%;

}

 .contact-us-circle a img{

     width: 100%;

     max-width: 130px;

     border-radius: 50%;

     animation: infiniterotateprime 20s infinite linear;

}

 .contact-us-circle a:hover img{

     animation-play-state: paused;

}

 @keyframes infiniterotateprime{

     from{

         transform: rotate(0deg);

    }

     to{

         transform: rotate(360deg);

    }

}

 .our-value-list{

     display: flex;

     flex-wrap: wrap;

     gap: 30px;

}

 .our-value-item{

     position: relative;

     background-color: var(--white-color);

     border-radius: 12px;

     width: calc(50% - 15px);

     padding: 40px;

     overflow: hidden;

     z-index: 1;

}

 .our-value-item::before{

     content: '';

     position: absolute;

     top: 0;

     right: 0;

     bottom: 0;

     left: 0;

     width: 100%;

     height: 0;

     background-color: var(--accent-color);

     border-radius: 12px 12px 0 0;

     transition: all 0.4s ease-in-out;

}

 .our-value-item:hover:before{

     height: 100%;

     top: auto;

}

 .our-value-item .icon-box{

     position: relative;

     width: 50px;

     height: 50px;

     background-color: var(--accent-color);

     border-radius: 50%;

     display: flex;

     align-items: center;

     justify-content: center;

     margin-bottom: 20px;

     z-index: 1;

     transition: all 0.5s ease-in-out;

}

 .our-value-item:hover .icon-box{

     background-color: var(--white-color);

}

 .our-value-item .icon-box img{

     position: relative;

     width: 100%;

     max-width: 24px;

     transition: all 0.5s ease-in-out;

     z-index: 1;

}

 .our-value-item:hover .icon-box img{

     filter: brightness(0) invert(0);

}

 .our-value-item-content h3{

     position: relative;

     font-size: 20px;

     z-index: 1;

     transition: all 0.4s ease-in-out;

}

 .our-value-item:hover .our-value-item-content h3, .our-value-item:hover .our-value-item-content p{

     color: var(--white-color);

}

 .our-value-item-content p{

     position: relative;

     margin: 10px 0 0;

     z-index: 1;

     transition: all 0.4s ease-in-out;

}

 .our-awards{

     padding: 100px 0;

}

 .awards-info{

     position: sticky;

     top: 20px;

     display: flex;

     flex-direction: column;

     justify-content: space-between;

     min-height: 600px;

}

 .award-image img{

     width: 100%;

     max-width: 235px;

}

 .award-item{

     display: flex;

     flex-wrap: wrap;

     align-items: center;

     gap: 30px 80px;

     border-top: 1px solid var(--divider-color);

     margin-top: 40px;

     padding-top: 40px;

}

 .award-item:first-child{

     margin-top: 0;

}

 .award-item-info{

     width: calc(100% - 130px);

     display: flex;

     flex-wrap: wrap;

     align-items: center;

}

 .award-year{

     width: 20%;

     padding-right: 20px;

}

 .award-year p{

     line-height: normal;

     margin-bottom: 0;

}

 .award-item-body{

     width: 80%;

     display: flex;

     align-items: center;

     justify-content: space-between;

}

 .award-item-title{

     width: 65%;

     max-width: 390px;

}

 .award-item-body h3{

     font-size: 20px;

     line-height: 1.4em;

}

 .award-item-content{

     width: 35%;

     padding-left: 20px;

}

 .award-item-body p{

     margin-bottom: 0;

}

 .award-item-button a{

     width: 50px;

     height: 50px;

     border: 1px solid var(--divider-color);

     border-radius: 50%;

     display: flex;

     justify-content: center;

     align-items: center;

     transition: all 0.4s ease-in-out;

}

 .award-item-button a:hover{

     background: var(--accent-color);

}

 .award-item-button a img{

     width: 100%;

     max-width: 14px;

     transition: all 0.4s ease-in-out;

}

 .award-item-button a:hover img{

     filter: brightness(0) invert(1);

     transform: rotate(45deg);

}

 .our-team{

     padding: 100px 0;

}

 .team-item{

     position: relative;

     border-radius: 12px;

     overflow: hidden;

     height: calc(100% - 30px);

     margin-bottom: 30px;

}

 .team-image a{

     display: block;

     cursor: none;

}

 .team-image figure{

     display: block;

     border-radius: 12px;

}

 .team-image figure img{

     width: 100%;

     aspect-ratio: 1 / 1.16;

     object-fit: cover;

     border-radius: 12px;

     transition: all 0.5s ease-in-out;

}

 .team-item:hover .team-image figure img{

     transform: scale(1.1);

}

 .team-item-body{

     position: absolute;

     left: 30px;

     right: 30px;

     bottom: 30px;

     text-align: center;

     background: var(--dark-divider-color);

     backdrop-filter: blur(180px);

     -webkit-backdrop-filter: blur(180px);

     border-radius: 12px;

     padding: 18px;

     overflow: hidden;

     z-index: 1;

}

 .team-content h3{

     font-size: 20px;

     margin-bottom: 5px;

}

 .team-content h3 a{

     color: var(--white-color);

}

 .team-content p{

     color: var(--white-color);

     margin-bottom: 0;

}

 .team-social-list{

     height: 0;

     opacity: 0;

     visibility: hidden;

     transition: all 0.4s ease-in-out;

}

 .team-item:hover .team-social-list{

     height: 40px;

     opacity: 1;

     visibility: visible;

     margin-top: 20px;

}

 .team-social-list ul{

     list-style: none;

     display: inline-flex;

     justify-content: center;

     align-items: center;

     gap: 20px;

     margin: 0;

     padding: 0;

}

 .team-social-list ul li a{

     position: relative;

     width: 40px;

     height: 40px;

     display: flex;

     justify-content: center;

     align-items: center;

     border: 1px solid var(--dark-divider-color);

     border-radius: 5px;

     overflow: hidden;

     transition: all 0.4s ease-in-out;

}

 .team-social-list ul li a:hover{

     border-color: var(--divider-color);

}

 .team-social-list ul li a::before{

     content: '';

     position: absolute;

     top: 0;

     right: 0;

     bottom: 0;

     left: 0;

     transform: scale(0);

     background: linear-gradient(90deg, var(--accent-secondary-color) 0%, var(--accent-color) 100%);

     border-radius: 5px;

     transition: all 0.4s ease-in-out;

}

 .team-social-list ul li a:hover:before{

     transform: scale(1);

}

 .team-social-list ul li a i{

     position: relative;

     font-size: 18px;

     color: var(--white-color);

     z-index: 1;

     transition: all 0.4s ease-in-out;

}

/************************************/

/*** 19. Services Page css ***/

/************************************/

 .page-services{

     padding: 100px 0 70px;

}

 .page-services .service-item{

     background: var(--secondary-color);

}

/************************************/

/*** 20. Service Single css ***/

/************************************/

 .page-service-single{

     padding: 100px 0;

}

 .page-single-sidebar{

     position: sticky;

     top: 20px;

     margin-right: 20px;

}

 .page-category-list{

     background: var(--secondary-color);

     border-radius: 12px;

     margin-bottom: 40px;

     overflow: hidden;

}

 .page-category-list h3{

     font-size: 20px;

     color: var(--white-color);

     background: var(--accent-color);

     padding: 20px 30px;

}

 .page-category-list ul{

     list-style: none;

     margin: 0;

     padding: 30px;

}

 .page-category-list ul li{

     line-height: 1.5em;

     border-bottom: 1px solid var(--divider-color);

     padding-bottom: 25px;

     margin-bottom: 25px;

}

 .page-category-list ul li:last-child{

     border-bottom: none;

     margin: 0;

     padding: 0;

}

 .page-category-list ul li a{

     position: relative;

     display: block;

     text-transform: capitalize;

     color: var(--primary-color);

     padding-right: 30px;

}

 .page-category-list ul li a::before{

     content: '';

     position: absolute;

     top: 5px;

     right: 0;

     background: url('../images/arrow-primary.svg') no-repeat;

     background-position: center center;

     background-size: cover;

     width: 12px;

     height: 12px;

     transition: all 0.4s ease-in-out;

}

 .page-category-list ul li a:hover::before{

     transform: rotate(45deg);

}

 .sidebar-cta-box{

     position: relative;

     background: url('../images/sidebar-cta-bg-image.jpg') no-repeat;

     background-position: center center;

     background-size: cover;

     border-radius: 12px;

     text-align: center;

     padding: 60px;

     overflow: hidden;

}

 .sidebar-cta-box:before{

     content: '';

     position: absolute;

     top: 0;

     right: 0;

     bottom: 0;

     left: 0;

     background: var(--black-color);

     opacity: 50%;

     width: 100%;

     height: 100%;

     z-index: 0;

}

 .sidebar-cta-content, .sidebar-cta-btn{

     position: relative;

     z-index: 1;

}

 .sidebar-cta-content h3{

     position: relative;

     display: inline-block;

     font-size: 14px;

     font-weight: 400;

     text-transform: capitalize;

     line-height: normal;

     color: var(--white-color);

     border: 1px solid var(--dark-divider-color);

     border-radius: 100px;

     padding: 8px 16px 8px 32px;

     margin-bottom: 20px;

}

 .sidebar-cta-content h3::before{

     content: '';

     position: absolute;

     left: 16px;

     top: 50%;

     transform: translateY(-50%);

     background: var(--white-color);

     border-radius: 50%;

     width: 6px;

     height: 6px;

}

 .sidebar-cta-content h2{

     font-size: 20px;

     color: var(--white-color);

}

 .sidebar-cta-content p{

     color: var(--white-color);

     margin: 15px 0 0;

}

 .sidebar-cta-btn{

     margin-top: 30px;

}

 .page-single-image{

     margin-bottom: 40px;

}

 .page-single-image figure{

     border-radius: 12px;

     display: block;

}

 .page-single-image img{

     width: 100%;

     aspect-ratio: 1 / 0.578;

     object-fit: cover;

     border-radius: 12px;

}

 .service-entry{

     margin-bottom: 60px;

}

 .service-entry p{

     margin-bottom: 20px;

}

 .service-entry h2{

     font-size: 46px;

     font-weight: 400;

     letter-spacing: -0.02em;

     margin-bottom: 20px;

}

 .service-entry h2 span{

     font-weight: 600;

}

 .service-entry h3{

     font-size: 20px;

     line-height: 1.4em;

     margin-bottom: 10px;

}

 .service-entry p:last-child, .service-entry h3:last-child, .service-entry ul:last-child{

     margin: 0;

}

 .service-entry ul{

     list-style: disc;

     padding-left: 20px;

     margin: 40px 0 0;

}

 .service-entry ul li{

     line-height: 1.5em;

     margin-bottom: 15px;

}

 .service-entry ul li:last-child{

     margin-bottom: 0;

}

 .service-entry ul li::marker{

     color: var(--accent-color);

}

 .service-benefits-box, .service-security-box{

     margin-top: 60px;

}

 .service-benefit-list{

     display: flex;

     flex-wrap: wrap;

     gap: 30px;

     background-color: var(--secondary-color);

     border-radius: 20px;

     padding: 40px;

     margin-top: 40px;

}

 .service-benefit-item{

     width: calc(50% - 15px);

}

 .service-benefit-item .icon-box{

     position: relative;

     background: var(--accent-color);

     border-radius: 50%;

     width: 50px;

     height: 50px;

     display: flex;

     align-items: center;

     justify-content: center;

     margin-bottom: 20px;

     overflow: hidden;

     z-index: 1;

}

 .service-benefit-item .icon-box::before{

     content: '';

     position: absolute;

     top: 0;

     bottom: 0;

     right: 0;

     left: 0;

     background: linear-gradient(90deg, var(--accent-secondary-color) 0%, var(--accent-color) 100%);

     border-radius: 50%;

     width: 100%;

     height: 100%;

     transform: scale(0);

     transition: all 0.4s ease-in-out;

     z-index: 0;

}

 .service-benefit-item:hover .icon-box::before{

     transform: scale(1);

}

 .service-benefit-item .icon-box img{

     position: relative;

     max-width: 24px;

     z-index: 1;

}

 .service-security-steps{

     display: flex;

     flex-wrap: wrap;

     gap: 30px;

     margin-top: 40px;

}

 .security-step-item{

     width: calc(33.33% - 20px);

     background-color: var(--secondary-color);

     border-radius: 12px;

     min-height: 350px;

     display: flex;

     flex-direction: column;

     justify-content: space-between;

     gap: 30px;

     padding: 30px;

}

 .security-step-header{

     display: flex;

     justify-content: space-between;

     align-items: center;

     gap: 15px;

}

 .security-step-header .icon-box{

     position: relative;

     width: 50px;

     height: 50px;

     background-color: var(--accent-color);

     border-radius: 50%;

     display: flex;

     justify-content: center;

     align-items: center;

     transition: all 0.4s ease-in-out;

}

 .security-step-header .icon-box::before{

     content: '';

     position: absolute;

     top: 0;

     right: 0;

     bottom: 0;

     left: 0;

     background: var(--primary-color);

     border-radius: 50%;

     width: 100%;

     height: 100%;

     transform: scale(0);

     transition: all 0.4s ease-in-out;

     z-index: 0;

}

 .security-step-item:hover .security-step-header .icon-box::before{

     transform: scale(1);

}

 .security-step-header .icon-box img{

     position: relative;

     width: 100%;

     max-width: 24px;

     z-index: 1;

}

 .security-step-btn{

     border-top: 1px solid var(--divider-color);

     margin-top: 25px;

     padding-top: 25px;

}

/************************************/

/*** 21. Blog Archive css ***/

/************************************/

 .page-blog{

     padding: 100px 0;

}

 .page-pagination{

     margin-top: 30px;

     text-align: center;

}

 .page-pagination ul{

     justify-content: center;

     padding: 0;

     margin: 0;

}

 .page-pagination ul li a, .page-pagination ul li span{

     display: flex;

     text-decoration: none;

     justify-content: center;

     align-items: center;

     background: var(--secondary-color);

     color: var(--primary-color);

     border-radius: 10px;

     width: 40px;

     height: 40px;

     margin: 0 5px;

     font-weight: 600;

     line-height: 1em;

     transition: all 0.3s ease-in-out;

}

 .page-pagination ul li.active a, .page-pagination ul li a:hover{

     background: var(--primary-color);

     color: var(--white-color);

}

/************************************/

/*** 22. Blog Single css ***/

/************************************/

 .page-single-post{

     padding: 100px 0;

}

 .post-single-meta{

     margin-top: 5px;

}

 .post-single-meta ol li{

     font-size: 18px;

     color: var(--text-color);

     margin-right: 15px;

}

 .post-single-meta ol li:last-child{

     margin-right: 0;

}

 .post-single-meta ol li i{

     font-size: 18px;

     color: var(--text-color);

     margin-right: 5px;

}

 .post-image{

     position: relative;

     margin-bottom: 30px;

}

 .post-image figure{

     display: block;

     border-radius: 12px;

     overflow: hidden;

}

 .post-image img{

     width: 100%;

     aspect-ratio: 1 / 0.50;

     object-fit: cover;

     border-radius: 12px;

}

 .post-content{

     width: 100%;

     max-width: 1250px;

     margin: 0 auto;

}

 .post-entry{

     border-bottom: 1px solid var(--divider-color);

     padding-bottom: 30px;

     margin-bottom: 30px;

}

 .post-entry:after{

     content: '';

     display: block;

     clear: both;

}

 .post-entry a{

     color: var(--accent-color);

}

 .post-entry h1, .post-entry h2, .post-entry h3, .post-entry h4, .post-entry h5, .post-entry h6{

     font-weight: 600;

     line-height: 1.2em;

     margin: 0 0 0.44em;

}

 .post-entry h1{

     font-size: 50px;

}

 .post-entry h2{

     font-size: 46px;

}

 .post-entry h3{

     font-size: 40px;

}

 .post-entry h4{

     font-size: 30px;

}

 .post-entry h5{

     font-size: 24px;

}

 .post-entry h6{

     font-size: 20px;

}

 .post-entry p{

     margin-bottom: 20px;

}

 .post-entry p:last-child{

     margin-bottom: 0;

}

 .post-entry p strong{

     color: var(--primary-color);

     font-size: 18px;

     font-weight: 600;

}

 .post-entry ol{

     margin: 0 0 30px;

}

 .post-entry ul{

     padding: 0;

     margin: 20px 0 20px;

     padding-left: 20px;

}

 .post-entry ol li, .post-entry ul li{

     position: relative;

     font-size: 18px;

     font-weight: 500;

     line-height: 1.6em;

     color: var(--text-color);

     margin-bottom: 15px;

}

 .post-entry ul li:last-child{

     margin-bottom: 0;

}

 .post-entry ul ul, .post-entry ul ol, .post-entry ol ol, .post-entry ol ul{

     margin-top: 20px;

     margin-bottom: 0;

}

 .post-entry ul ul li:last-child, .post-entry ul ol li:last-child, .post-entry ol ol li:last-child, .post-entry ol ul li:last-child{

     margin-bottom: 0;

}

 .post-entry blockquote{

     background: var(--secondary-color) url('../images/icon-blockquote.svg');

     background-repeat: no-repeat;

     background-position: 30px 30px;

     background-size: 45px;

     border-radius: 12px;

     padding: 30px 30px 30px 90px;

     margin-bottom: 30px;

}

 .post-entry blockquote p{

     font-size: 20px;

     font-weight: 600;

     line-height: 1.4em;

     color: var(--primary-color);

}

 .post-entry blockquote p:last-child{

     margin-bottom: 0;

}

 .tag-links{

     font-size: 20px;

     font-weight: 600;

     text-transform: capitalize;

     color: var(--primary-color);

     display: inline-flex;

     align-items: center;

     flex-wrap: wrap;

     gap: 15px;

}

 .post-tags .tag-links a{

     display: inline-block;

     font-size: 16px;

     font-weight: 500;

     text-transform: capitalize;

     line-height: 1em;

     background: linear-gradient(to right, var(--accent-secondary-color) 0%, var(--accent-color) 50%, var(--accent-secondary-color) 100%);

     background-size: 200% auto;

     color: var(--white-color);

     border-radius: 10px;

     padding: 12px 20px;

     transition: all 0.3s ease-in-out;

}

 .post-tags .tag-links a:hover{

     background-position: right center;

}

 .post-social-sharing{

     text-align: right;

}

 .post-social-sharing ul{

     list-style: none;

     padding: 0;

     margin: 0;

}

 .post-social-sharing ul li{

     display: inline-block;

     margin-right: 10px;

}

 .post-social-sharing ul li:last-child{

     margin-right: 0;

}

 .post-social-sharing ul li a{

     display: flex;

     align-items: center;

     justify-content: center;

     text-align: center;

     background: linear-gradient(to right, var(--accent-secondary-color) 0%, var(--accent-color) 50%, var(--accent-secondary-color) 100%);

     background-size: 200% auto;

     color: var(--white-color);

     border-radius: 10px;

     width: 40px;

     height: 40px;

     transition: all 0.3s ease-in-out;

}

 .post-social-sharing ul li:hover a{

     background-position: right center;

}

 .post-social-sharing ul li a i{

     font-size: 18px;

     color: inherit;

}

/************************************/

/*** 23. Case Study css ***/

/************************************/

 .page-case-study{

     padding: 100px 0 70px;

}

 .page-case-study .case-study-image figure img{

     aspect-ratio: 1 / 1.065;

}

/************************************/

/*** 24. Case Study Single css ***/

/************************************/

 .page-case-study-single{

     padding: 100px 0;

}

 .case-study-category-list ul li{

     display: flex;

     justify-content: space-between;

     gap: 10px;

     align-items: center;

}

 .case-study-category-list ul li span{

     font-weight: 500;

     color: var(--primary-color);

}

 .case-study-entry{

     margin-bottom: 60px;

}

 .case-study-entry p{

     margin-bottom: 20px;

}

 .case-study-entry h2{

     font-size: 46px;

     font-weight: 400;

     letter-spacing: -0.02em;

     margin-bottom: 20px;

}

 .case-study-entry h2 span{

     font-weight: 600;

}

 .case-study-entry h3{

     font-size: 20px;

     line-height: 1.4em;

     margin-bottom: 10px;

}

 .case-study-entry p:last-child, .case-study-entry h3:last-child{

     margin: 0;

}

 .case-study-entry ul{

     display: flex;

     flex-wrap: wrap;

     gap: 20px 15px;

     list-style: none;

     padding: 0;

     margin: 40px 0 0;

}

 .case-study-entry ul li{

     position: relative;

     width: calc(50% - 7.5px);

     line-height: 1.5em;

     padding-left: 25px;

}

 .case-study-entry ul li::before{

     content: '\f058';

     position: absolute;

     font-family: 'Font Awesome 7 Free';

     font-size: 16px;

     font-weight: 900;

     color: var(--accent-color);

     top: 0px;

     left: 0;

}

 .case-study-overview, .case-study-solutions{

     margin-top: 60px;

}

 .project-solution-item{

     border-top: 1px solid var(--divider-color);

     margin-top: 40px;

     padding-top: 40px;

}

 .project-solution-item:first-child{

     border-top: none;

     padding-top: 0;

}

 .project-solution-header, .project-solution-body{

     margin-bottom: 40px;

}

 .project-solution-body{

     display: flex;

     flex-wrap: wrap;

     gap: 30px;

}

 .project-solution-body-item{

     width: calc(50% - 15px);

     background: var(--secondary-color);

     border-radius: 12px;

     padding: 40px;

}

 .project-solution-body-item .icon-box{

     position: relative;

     background: var(--accent-color);

     border-radius: 50%;

     width: 50px;

     height: 50px;

     display: flex;

     align-items: center;

     justify-content: center;

     margin-bottom: 30px;

     overflow: hidden;

     z-index: 1;

}

 .project-solution-body-item .icon-box::before{

     content: '';

     position: absolute;

     top: 0;

     bottom: 0;

     right: 0;

     left: 0;

     background: var(--primary-color);

     border-radius: 50%;

     width: 100%;

     height: 100%;

     transform: scale(0);

     transition: all 0.4s ease-in-out;

     z-index: 0;

}

 .project-solution-body-item:hover .icon-box::before{

     transform: scale(1);

}

 .project-solution-body-item .icon-box img{

     position: relative;

     max-width: 24px;

     z-index: 1;

}

 .project-solution-images{

     display: flex;

     flex-wrap: wrap;

     gap: 30px;

}

 .project-solution-img{

     width: calc(50% - 15px);

}

 .project-solution-img figure{

     display: block;

     border-radius: 12px;

}

 .project-solution-img img{

     width: 100%;

     aspect-ratio: 1 / 0.745;

     object-fit: cover;

     border-radius: 12px;

}

/************************************/

/*** 25. Team Page css ***/

/************************************/

 .page-team{

     padding: 100px 0 70px;

}

/************************************/

/*** 26. Team Single css ***/

/************************************/

 .page-team-single{

     padding: 100px 0;

}

 .team-single-image figure{

     display: block;

     border-radius: 12px;

}

 .team-single-image img{

     width: 100%;

     aspect-ratio: 1 / 1.475;

     object-fit: cover;

     border-radius: 12px;

}

 .team-single-content{

     background: var(--secondary-color);

     border-radius: 12px;

     margin-bottom: 40px;

     padding: 50px;

}

 .team-member-about, .team-member-achivement{

     margin-bottom: 60px;

}

 .team-contact-list{

     display: flex;

     flex-wrap: wrap;

     gap: 30px;

     border-top: 1px solid var(--divider-color);

     padding-top: 40px;

}

 .team-contact-list-title{

     width: 100%;

}

 .team-contact-list-title h3{

     font-size: 20px;

}

 .team-contact-item{

     width: calc(50% - 15px);

     display: flex;

     flex-wrap: wrap;

     align-items: center;

}

 .team-contact-item .icon-box{

     position: relative;

     width: 50px;

     height: 50px;

     background-color: var(--accent-color);

     border-radius: 50%;

     display: flex;

     justify-content: center;

     align-items: center;

     margin-right: 20px;

}

 .team-contact-item .icon-box::before{

     content: '';

     position: absolute;

     top: 0;

     right: 0;

     bottom: 0;

     left: 0;

     background: var(--primary-color);

     border-radius: 50%;

     width: 100%;

     height: 100%;

     transform: scale(0);

     transition: all 0.4s ease-in-out;

     z-index: 0;

}

 .team-contact-item:hover .icon-box::before{

     transform: scale(1);

}

 .team-contact-item .icon-box img{

     position: relative;

     width: 100%;

     max-width: 24px;

     z-index: 1;

}

 .team-contact-item-content{

     width: calc(100% - 70px);

}

 .team-contact-item-content h3{

     font-size: 20px;

     line-height: 1.4em;

}

 .team-contact-item-content p{

     margin: 0 0 5px;

}

 .team-achivement-list .skills-progress-bar{

     margin-bottom: 35px;

}

 .team-achivement-list .skills-progress-bar:last-child{

     margin-bottom: 0px;

}

 .skills-progress-bar .skill-data{

     display: flex;

     justify-content: space-between;

     margin-bottom: 15px;

}

 .skills-progress-bar .skill-data .skill-title, .skills-progress-bar .skill-data .skill-no{

     line-height: 1.5em;

     font-weight: 500;

     color: var(--primary-color);

     text-transform: capitalize;

}

 .skills-progress-bar .skillbar .skill-progress{

     position: relative;

     width: 100%;

     height: 6px;

     background: var(--divider-color);

     border-radius: 100px;

     overflow: hidden;

}

 .skills-progress-bar .skillbar .skill-progress .count-bar{

     position: absolute;

     top: 0;

     left: 0;

     bottom: 0;

     background: var(--accent-color);

     border-radius: 100px;

}

 .member-info-body{

     display: flex;

     flex-wrap: wrap;

     align-items: center;

     gap: 20px;

}

 .member-info-list{

     width: calc(75% - 10px);

}

 .member-info-list ul{

     list-style: disc;

     padding-left: 20px;

     margin: 0;

}

 .member-info-list ul li{

     line-height: 1.5em;

     margin-bottom: 15px;

}

 .member-info-list ul li:last-child{

     margin-bottom: 0;

}

 .member-info-list ul li::marker{

     color: var(--accent-color);

}

 .member-info-body .contact-us-circle{

     width: calc(25% - 10px);

     text-align: center;

}

 .contact-us-form.team-contact-form{

     padding: 50px;

     margin: 0;

}

/************************************/

/*** 27. Pricing Page css ***/

/************************************/

 .page-pricing{

     padding: 100px 0;

}

 .page-pricing .our-pricing-swich .form-check-label{

     color: var(--primary-color);

}

 .page-pricing .our-pricing-swich.form-switch .form-check-input{

     --bs-form-check-bg: var(--secondary-color);

     border: 1px solid var(--divider-color);

}

 .page-pricing .pricing-item{

     background: var(--secondary-color);

}

 .page-pricing .pricing-item .pricing-header{

     border-color: var(--divider-color);

}

 .page-pricing .pricing-item .pricing-header h3, .page-pricing .pricing-item .pricing-header h2, .page-pricing .pricing-item .pricing-body h3{

     color: var(--primary-color);

}

 .page-pricing .pricing-item .pricing-header p, .page-pricing .pricing-item .pricing-body ul li{

     color: var(--text-color);

}

 .page-pricing .pricing-benefit-list ul li{

     color: var(--primary-color);

}

/************************************/

/*** 28. Testimonials Page css ***/

/************************************/

 .page-testimonials{

     padding: 100px 0 70px;

}

 .page-testimonials .testimonial-item{

     background: var(--secondary-color);

     border-radius: 12px;

     height: calc(100% - 30px);

     margin-bottom: 30px;

     padding: 50px;

}

/************************************/

/*** 29. Image Gallery css ***/

/************************************/

 .page-gallery{

     padding: 100px 0 70px;

}

 .page-gallery-box .photo-gallery{

     height: calc(100% - 30px);

     margin-bottom: 30px;

}

 .page-gallery-box .photo-gallery a{

     cursor: none;

}

 .page-gallery-box .photo-gallery figure{

     display: block;

     border-radius: 12px;

}

 .page-gallery-box .photo-gallery img{

     width: 100%;

     aspect-ratio: 1 / 0.767;

     object-fit: cover;

     border-radius: 12px;

}

/************************************/

/*** 30. Video Gallery css ***/

/************************************/

 .page-video-gallery{

     padding: 100px 0 70px;

}

 .video-gallery-image{

     height: calc(100% - 30px);

     margin-bottom: 30px;

     overflow: hidden;

}

 .video-gallery-image a{

     position: relative;

     display: block;

     cursor: none;

}

 .video-gallery-image a::before{

     content: '';

     position: absolute;

     top: 0;

     left: 0;

     right: 0;

     bottom: 0;

     background-color: var(--primary-color);

     border-radius: 12px;

     opacity: 0%;

     visibility: hidden;

     width: 100%;

     height: 100%;

     z-index: 1;

     transform: scale(0);

     transition: all 0.4s ease-in-out;

}

 .video-gallery-image:hover a::before{

     opacity: 50%;

     visibility: visible;

     transform: scale(1);

}

 .video-gallery-image a::after{

     content: '\f04b';

     font-family: 'FontAwesome';

     position: absolute;

     top: 50%;

     left: 50%;

     right: 0;

     transform: translate(-50%, -50%);

     font-size: 20px;

     background: var(--accent-color);

     color: var(--white-color);

     border-radius: 50%;

     height: 60px;

     width: 60px;

     cursor: none;

     display: flex;

     align-items: center;

     justify-content: center;

     opacity: 0;

     visibility: hidden;

     transition: all 0.5s ease-in-out;

     z-index: 1;

}

 .video-gallery-image:hover a::after{

     opacity: 1;

     visibility: visible;

}

 .video-gallery-image img{

     width: 100%;

     aspect-ratio: 1 / 0.767;

     object-fit: cover;

     border-radius: 12px;

}

/************************************/

/*** 31. FAQs Page css ***/

/************************************/

 .page-faqs{

     padding: 100px 0;

}

 .page-faqs .page-single-faqs{

     margin-bottom: 60px;

}

 .page-faqs .page-single-faqs:last-child{

     margin-bottom: 0px;

}

/************************************/

/*** 32. Contact Us Page css ***/

/************************************/

 .page-contact-us{

     padding: 100px 0;

}

 .page-contact-us .container{

     position: relative;

     z-index: 1;

}

 .contact-info-list{

     display: flex;

     flex-wrap: wrap;

     gap: 30px;

     margin-bottom: 100px;

}

 .contact-info-item{

     position: relative;

     width: calc(25% - 22.5px);

     background: var(--white-color);

     border: 1px solid var(--divider-color);

     border-radius: 12px;

     padding: 40px 35px;

     text-align: center;

     overflow: hidden;

}

 .contact-info-item::before{

     content: '';

     position: absolute;

     top: 0;

     right: 0;

     bottom: 0;

     left: 0;

     width: 100%;

     height: 0;

     background: linear-gradient(90deg, var(--accent-secondary-color) 0%, var(--accent-color) 100%);

     transition: all 0.4s ease-in-out;

}

 .contact-info-item:hover:before{

     height: 100%;

     top: auto;

}

 .contact-info-item .icon-box{

     position: relative;

     background: var(--primary-color);

     border-radius: 5px;

     width: 50px;

     height: 50px;

     display: flex;

     align-items: center;

     justify-content: center;

     margin: 0 auto;

     margin-bottom: 20px;

     overflow: hidden;

}

 .contact-info-item .icon-box::before{

     content: '';

     position: absolute;

     top: 0;

     bottom: 0;

     left: 0;

     right: 0;

     background: var(--white-color);

     border-radius: 5px;

     height: 100%;

     width: 100%;

     transform: scale(0);

     transition: all 0.4s ease-in-out;

}

 .contact-info-item:hover .icon-box::before{

     transform: scale(1);

}

 .contact-info-item .icon-box img{

     position: relative;

     width: 100%;

     max-width: 24px;

     z-index: 1;

     transition: all 0.4s ease-in-out;

}

 .contact-info-item:hover .icon-box img{

     filter: brightness(0) invert(0);

}

 .contact-info-content h3{

     position: relative;

     font-size: 20px;

     text-transform: capitalize;

     margin-bottom: 15px;

     z-index: 1;

     transition: all 0.4s ease-in-out;

}

 .contact-info-item:hover .contact-info-content h3{

     color: var(--white-color);

}

 .contact-info-content p{

     position: relative;

     margin-bottom: 0;

     z-index: 1;

     transition: all 0.4s ease-in-out;

}

 .contact-info-content p:last-child{

     margin-bottom: 0;

}

 .contact-info-item:hover .contact-info-content p{

     color: var(--white-color);

}

 .contact-info-content p a{

     color: inherit;

}

 .google-map{

     margin-right: 15px;

}

 .google-map-iframe{

     height: 580px;

}

 .google-map-iframe iframe{

     width: 100%;

     height: 100%;

     border-radius: 12px;

     overflow: hidden;

}

 .contact-us-form{

     height: 100%;

     background-color: var(--secondary-color);

     border-radius: 12px;

     align-content: center;

     margin-left: 15px;

     padding: 60px;

}

 .contact-us-form .section-title h2{

     font-size: 36px;

}

 .contact-us-form form .form-label{

     color: var(--primary-color);

     margin-bottom: 15px;

     font-weight: 600;

}

 .contact-us-form form .form-control{

     font-size: 16px;

     font-weight: 400;

     line-height: 1.5em;

     color: var(--primary-color);

     background-color: transparent;

     border: 1px solid var(--divider-color);

     border-radius: 12px;

     padding: 12px 20px;

     outline: none;

     box-shadow: none;

}

 .contact-us-form form .form-control::placeholder{

     color: var(--text-color);

}

/************************************/

/*** 33. 404 Error Page css ***/

/************************************/

 .error-page{

     padding: 100px 0px;

}

 .error-page-image{

     text-align: center;

     margin-bottom: 30px;

}

 .error-page-image img{

     width: 100%;

     max-width: 40%;

}

 .error-page-content{

     text-align: center;

}

 .error-page-content .section-title{

     margin-bottom: 15px;

}

/************************************/

/*** 36. Responsive css ***/

/************************************/

 @media only screen and (max-width: 1840px){

     header.main-header .header-sticky.active, header.main-header{

         width: calc(100% - 40px);

    }

}

 @media only screen and (max-width: 1440px){

     .container{

         max-width: 1300px;

    }

     .hero-item-list{

         gap: 20px;

    }

     .hero-item{

         width: calc(25% - 15px);

         padding: 30px 20px;

    }

     .hero-item.box-1 .hero-item-content{

         padding: 0;

    }

     .hero-client-box{

         margin-bottom: 30px;

         padding-bottom: 30px;

    }

     .hero-item-image{

         margin-top: 30px;

    }

     .about-client-box{

         margin-bottom: 20px;

         padding-bottom: 20px;

    }

     .service-item{

         min-height: 380px;

         padding: 30px 25px;

    }

     .service-bg-icon{

         right: -15px;

         bottom: -15px;

    }

     .service-bg-icon img{

         max-width: 80px;

    }

     .why-choose-content{

         margin: 0;

    }

     .why-choose-body{

         gap: 20px;

         padding: 30px 20px;

    }

     .why-choose-counter-content{

         width: calc(60% - 20px);

         padding-right: 20px;

    }

     .how-work-item{

         padding: 30px 25px;

         min-height: 370px;

    }

     .case-study-item-btn{

         top: 20px;

         right: 20px;

    }

     .case-study-item-btn a{

         width: 44px;

         height: 44px;

    }

     .case-study-item-btn a img{

         max-width: 12px;

    }

     .case-study-item-content{

         left: 20px;

         right: 20px;

         bottom: 20px;

         padding: 15px;

    }

     .case-study-item-content h3{

         font-size: 18px;

    }

     .our-video-circle{

         margin-bottom: 80px;

    }

     .feature-item{

         min-height: initial;

         padding: 40px;

    }

     .feature-scrolling-ticker{

         margin: 0 -40px;

    }

     .pricing-item{

         padding: 30px;

    }

     .pricing-header p, .pricing-body ul li{

         font-size: 14px;

    }

     .pricing-item.highlighted-box::after{

         font-size: 12px;

         height: 30px;

         top: 24px;

         right: -55px;

    }

     .testimonial-google-review{

         margin-top: 40px;

    }

     .testimonial-author-content{

         padding-top: 40px;

         margin-top: 40px;

    }

     .our-value-item{

         padding: 30px 25px;

    }

     .team-item-body{

         left: 20px;

         right: 20px;

         bottom: 20px;

    }

     .sidebar-cta-box{

         padding: 40px;

    }

     .service-benefit-list{

         padding: 30px;

    }

     .service-security-steps{

         gap: 20px;

    }

     .security-step-item{

         width: calc(33.33% - 13.67px);

         min-height: 300px;

         padding: 20px;

    }

     .security-step-btn{

         margin-top: 20px;

         padding-top: 20px;

    }

     .project-solution-body-item{

         padding: 30px;

    }

     .team-single-content, .contact-us-form.team-contact-form{

         padding: 40px;

    }

     .team-contact-list{

         gap: 30px 20px;

    }

     .team-contact-item{

         width: calc(50% - 10px);

    }

     .team-contact-item .icon-box{

         width: 44px;

         height: 44px;

         margin-right: 10px;

    }

     .team-contact-item .icon-box img{

         max-width: 20px;

    }

     .team-contact-item-content{

         width: calc(100% - 54px);

    }

     .member-info-list{

         width: calc(100% - 150px);

    }

     .member-info-body .contact-us-circle{

         width: auto;

    }

     .page-testimonials .testimonial-item{

         padding: 30px;

    }

     .contact-info-item{

         padding: 30px 25px;

    }

     .contact-info-content p{

         font-size: 14px;

    }

     .contact-us-form{

         padding: 55px;

    }

}

 @media only screen and (max-width: 1024px){

     .section-title-content{

         margin-top: 10px;

    }

     .section-btn{

         text-align: left;

         margin-top: 15px;

    }

     .section-content-btn .section-btn{

         margin-top: 15px;

    }

     .main-menu .nav-menu-wrapper{

         margin: 0 10px;

    }

     .main-menu ul li{

         margin: 0;

    }

     .hero-item{

         width: calc(50% - 10px);

    }

     .hero-author-image{

         max-width: 300px;

         margin: 20px auto 0;

    }

     .about-image-box{

         flex-direction: column-reverse;

         margin-right: 0;

    }

     .about-us-image{

         margin-bottom: 30px;

    }

     .about-us-image figure img{

         aspect-ratio: 1 / 0.6;

    }

     .about-google-review{

         margin-right: 20px;

         padding-right: 20px;

    }

     .service-item{

         min-height: 300px;

    }

     .service-item-header{

         padding-bottom: 20px;

         margin-bottom: 20px;

    }

     .service-item .icon-box{

         width: 50px;

         height: 50px;

    }

     .service-item .icon-box img{

         max-width: 24px;

    }

     .why-choose-content{

         margin-bottom: 30px;

    }

     .why-choose-body{

         padding: 20px;

    }

     .why-choose-item .icon-box{

         margin-bottom: 20px;

    }

     .why-choose-image-box{

         max-width: 700px;

         margin: 0 auto;

    }

     .how-work-item{

         min-height: initial;

    }

     .how-work-item-header .icon-box{

         width: 50px;

         height: 50px;

    }

     .how-work-item-header .icon-box img{

         max-width: 24px;

    }

     .how-work-btn{

         margin-top: 20px;

         padding-top: 20px;

    }

     .case-study-image a figure img{

         aspect-ratio: 1 / 1.1;

    }

     .case-study-item-content ul li a{

         padding: 5px 12px;

    }

     .intro-video{

         padding: 100px 0;

    }

     .intro-video-list ul{

         gap: 15px 20px;

    }

     .intro-video-list ul li{

         padding: 8px 12px 8px 38px;

    }

     .intro-video-list ul li::before{

         font-size: 16px;

         left: 12px;

    }

     .feature-item-box{

         gap: 20px;

    }

     .feature-item{

         width: calc(50% - 10px);

         padding: 30px;

    }

     .feature-item.box-1{

         width: calc(50% - 10px);

    }

     .feature-item.box-2{

         width: 100%;

         order: 5;

    }

     .feature-scrolling-ticker{

         margin: 0 -30px 20px;

    }

     .feature-scrolling-ticker .scrolling-ticker-box{

         --gap: 20px;

         margin-bottom: 20px;

    }

     .feature-item-content p{

         margin: 10px 0 0;

    }

     .our-pricing-swich{

         gap: 15px;

         margin-bottom: 40px;

    }

     .our-pricing-swich .form-check-label{

         font-size: 18px;

    }

     .our-pricing-swich.form-switch .form-check-input{

         width: 60px;

         height: 32px;

         background-size: 22px auto;

    }

     .pricing-header{

         margin-bottom: 20px;

         padding-bottom: 20px;

    }

     .pricing-header h2{

         font-size: 28px;

    }

     .pricing-body ul li{

         margin-bottom: 10px;

    }

     .our-faqs-content{

         position: initial;

         margin-bottom: 30px;

    }

     .faq-accordion .accordion-header .accordion-button{

         padding: 15px 55px 15px 15px;

    }

     .faq-accordion .accordion-item .accordion-button::after, .faq-accordion .accordion-item .accordion-button.collapsed::after{

         right: 15px;

         width: 28px;

         height: 28px;

         font-size: 16px;

    }

     .faq-accordion .accordion-item .accordion-body{

         padding: 15px;

    }

     .testimonial-item{

         min-height: 310px;

    }

     .testimonial-author-content{

         padding-top: 30px;

         margin-top: 30px;

    }

     .testimonial-slider .testimonial-button-next, .testimonial-slider .testimonial-button-prev{

         width: 40px;

         height: 40px;

    }

     .testimonial-slider .testimonial-button-next::before, .testimonial-slider .testimonial-button-prev::before{

         background-size: 12px auto;

    }

     .footer-scrolling-ticker-box{

         margin-bottom: 40px;

         padding-bottom: 40px;

    }

     .footer-scrolling-ticker .scrolling-content span{

         font-size: 110px;

    }

     .footer-scrolling-ticker .scrolling-content span img{

         max-width: 60px;

    }

     .footer-contact-btn a{

         width: 140px;

         height: 140px;

         gap: 10px;

         font-size: 20px;

         padding: 20px;

    }

     .footer-contact-btn a img{

         max-width: 14px;

    }

     .about-footer, .footer-links{

         margin: 0 0 40px;

    }

     .footer-links h3{

         margin-bottom: 20px;

    }

     .footer-links ul li{

         margin-bottom: 15px;

         padding-bottom: 15px;

    }

     .footer-menu ul{

         gap: 15px;

    }

     .footer-copyright{

         padding: 30px 0;

         margin-top: 0;

    }

     .our-value-image-box{

         max-width: 700px;

         margin: 0 auto 50px;

    }

     .award-item{

         gap: 20px 30px;

    }

     .award-item-info{

         width: calc(100% - 70px);

    }

     .award-year{

         width: 22%;

    }

     .award-item-body{

         width: 78%;

    }

     .award-item-button a{

         width: 40px;

         height: 40px;

    }

     .award-item-button a img{

         max-width: 12px;

    }

     .page-single-sidebar{

         margin-right: 0;

    }

     .page-category-list h3{

         padding: 15px 20px;

    }

     .page-category-list ul{

         padding: 20px;

    }

     .page-category-list ul li{

         padding-bottom: 20px;

         margin-bottom: 20px;

    }

     .page-category-list ul li a{

         padding-right: 20px;

    }

     .page-category-list ul li a::before{

         width: 10px;

         height: 10px;

    }

     .sidebar-cta-box{

         padding: 40px 20px;

    }

     .page-single-image{

         margin-bottom: 30px;

    }

     .service-entry{

         margin-bottom: 40px;

    }

     .service-benefits-box, .service-security-box{

         margin-top: 40px;

    }

     .service-benefit-list{

         padding: 20px;

         gap: 30px 20px;

         margin-top: 30px;

    }

     .service-benefit-item{

         width: calc(50% - 10px);

    }

     .service-benefit-item .icon-box{

         margin-bottom: 15px;

    }

     .service-security-steps{

         margin-top: 30px;

    }

     .security-step-item{

         width: calc(50% - 10px);

         min-height: initial;

    }

     .case-study-entry{

         margin-bottom: 40px;

    }

     .case-study-overview, .case-study-solutions{

         margin-top: 40px;

    }

     .case-study-entry ul{

         gap: 15px;

         margin-top: 30px;

    }

     .project-solution-item{

         margin-top: 30px;

         padding-top: 30px;

    }

     .project-solution-header, .project-solution-body{

         margin-bottom: 30px;

    }

     .project-solution-body{

         gap: 20px;

    }

     .project-solution-body-item{

         width: calc(50% - 10px);

         padding: 20px;

    }

     .project-solution-images{

         gap: 20px;

    }

     .project-solution-img{

         width: calc(50% - 10px);

    }

     .team-single-content, .contact-us-form.team-contact-form{

         padding: 30px;

    }

     .team-member-about, .team-member-achivement{

         margin-bottom: 40px;

    }

     .team-contact-list{

         gap: 20px;

    }

     .team-contact-item-content h3{

         font-size: 18px;

    }

     .team-achivement-list .skills-progress-bar{

         margin-bottom: 25px;

    }

     .member-info-list ul li{

         font-size: 14px;

         margin-bottom: 10px;

    }

     .contact-info-item{

         padding: 20px 20px;

    }

     .contact-info-list{

         gap: 20px;

    }

     .contact-info-item{

         width: calc(50% - 10px);

    }

     .google-map{

         margin: 0 0 30px 0;

    }

     .contact-us-form{

         height: auto;

         margin-left: 0;

         margin-top: 30px;

         padding: 40px;

    }

     .contact-us-form form .form-label{

         margin-bottom: 10px;

    }

     .contact-us-form form .form-control{

         padding: 10px 15px;

    }

}

 @media only screen and (max-width: 991px){

     .btn-default{

         padding: 13px 40px 13px 18px;

    }

     .btn-default::before{

         right: 18px;

    }

     .btn-default.btn-highlighted{

         padding: 12px 40px 12px 18px;

    }

     header.main-header{

         margin: 0;

         top: 0;

         width: 100%;

         border-radius: 0;

    }

     header.main-header .header-sticky.active{

         width: 100%;

         top: 0;

         border-top: none;

         border-left: none;

         border-right: none;

         border-radius: 0;

    }

     .navbar{

         padding: 20px 0;

    }

     header.main-header .container-fluid{

         padding: 0 15px;

    }

     .slicknav_nav li, .slicknav_nav ul{

         display: block;

    }

     .responsive-menu, .navbar-toggle{

         display: block;

    }

     .section-row{

         margin-bottom: 40px;

    }

     .section-title.section-title-center{

         max-width: 100%;

    }

     .section-title{

         margin-bottom: 30px;

    }

     .section-sub-title h3, .section-title h3{

         margin-bottom: 10px;

         padding: 7px 12px 7px 28px;

    }

     .section-sub-title h3::before, .section-title h3::before{

         left: 12px;

    }

     .section-title h1{

         font-size: 38px;

    }

     .section-title h2{

         font-size: 36px;

    }

     .section-title p{

         margin-top: 10px;

    }

     .hero{

         padding: 150px 0 50px;

    }

     .hero.hero-bg-image{

         padding: 170px 0 80px;

    }

     .hero-content .section-title h3{

         padding: 4px 16px 4px 4px;

    }

     .hero-content .section-title h3 span{

         padding: 3px 10px;

    }

     .hero-author-image img{

         aspect-ratio: 1 / 0.7;

    }

     .hero-item-content h2{

         font-size: 36px;

    }

     .hero-client-box{

         margin-bottom: 20px;

         padding-bottom: 20px;

    }

     .hero-item-image img{

         max-width: 210px;

    }

     .our-scrolling-ticker{

         padding: 20px 0;

    }

     .scrolling-ticker-box{

         --gap: 40px;

    }

     .scrolling-content span img{

         max-width: 140px;

    }

     .about-us{

         padding: 50px 0;

    }

     .about-us-circle img{

         max-width: 100px;

    }

     .our-services{

         padding: 50px 0;

    }

     .service-item{

         min-height: initial;

    }

     .section-footer-text{

         margin-top: 10px;

    }

     .why-choose-us{

         padding: 50px 0;

    }

     .why-choose-counter-list ul li{

         margin-bottom: 10px;

    }

     .why-choose-btn{

         margin-top: 30px;

         padding-top: 30px;

    }

     .year-experience-box{

         margin-top: 40px;

         max-width: 280px;

    }

     .year-experience-box h2{

         font-size: 28px;

         width: 55px;

    }

     .how-it-work{

         padding: 50px 0;

    }

     .how-it-work .section-title h2 .work-title-images img{

         max-width: 38px;

    }

     .our-case-study{

         padding: 50px 0;

    }

     .our-video-circle{

         margin-bottom: 60px;

    }

     .our-video-circle a img{

         max-width: 100px;

    }

     .intro-video-list{

         margin-top: 40px;

    }

     .our-features{

         padding: 50px 0;

    }

     .feature-item{

         width: calc(50% - 10px);

         padding: 20px;

    }

     .feature-scrolling-ticker{

         margin: 0 -20px;

    }

     .feature-scrolling-ticker .scrolling-ticker-box{

         margin-bottom: 15px;

    }

     .our-features .section-footer-text{

         margin-top: 40px;

    }

     .our-pricing{

         padding: 50px 0;

    }

     .pricing-item{

         padding: 20px;

    }

     .pricing-item.highlighted-box .pricing-header{

         margin-right: 30px;

    }

     .pricing-btn .btn-default{

         padding: 12px;

    }

     .pricing-benefit-list{

         margin-top: 10px;

    }

     .pricing-benefit-list ul{

         gap: 10px 25px;

    }

     .pricing-benefit-list ul li{

         font-size: 14px;

    }

     .pricing-benefit-list ul li img{

         margin-right: 10px;

    }

     .our-faqs{

         padding: 50px 0;

    }

     .faq-accordion .accordion-item{

         margin-bottom: 20px;

    }

     .our-testimonials{

         padding: 50px 0;

    }

     .our-testimonial-content{

         margin-bottom: 30px;

    }

     .testimonial-google-review{

         margin-top: 30px;

    }

     .testimonial-slider{

         margin-left: 0;

    }

     .testimonial-logo img{

         max-width: 140px;

    }

     .testimonial-quote img{

         max-width: 30px;

    }

     .testimonial-content p{

         font-size: 18px;

    }

     .testimonial-author-content{

         padding-top: 20px;

         margin-top: 20px;

    }

     .our-blog{

         padding: 50px 0 20px;

    }

     .post-item-content{

         margin-bottom: 15px;

    }

     .post-item-content h2{

         font-size: 18px;

    }

     .main-footer{

         padding: 50px 0 0;

    }

     .footer-scrolling-ticker{

         padding: 20px 0;

    }

     .footer-scrolling-ticker .scrolling-ticker-box{

         --gap: 15px;

    }

     .footer-scrolling-ticker .scrolling-content span{

         font-size: 80px;

    }

     .footer-scrolling-ticker .scrolling-content span img{

         max-width: 40px;

         margin-right: 15px;

    }

     .page-header{

         padding: 170px 0 80px;

    }

     .page-header-box h1{

         font-size: 38px;

    }

     .our-value{

         padding: 50px 0;

    }

     .our-value-list{

         gap: 20px;

    }

     .our-value-item{

         padding: 20px;

    }

     .our-awards{

         padding: 50px 0;

    }

     .awards-info{

         min-height: initial;

    }

     .award-image{

         display: none;

    }

     .award-item{

         padding-top: 30px;

         margin-top: 30px;

    }

     .our-team{

         padding: 50px 0;

    }

     .page-services{

         padding: 50px 0 20px;

    }

     .page-service-single{

         padding: 50px 0;

    }

     .page-single-sidebar{

         margin-bottom: 30px;

    }

     .page-category-list{

         margin-bottom: 30px;

    }

     .page-category-list ul li{

         padding-bottom: 15px;

         margin-bottom: 15px;

    }

     .sidebar-cta-content h3{

         margin-bottom: 15px;

    }

     .sidebar-cta-btn{

         margin-top: 20px;

    }

     .service-entry p{

         margin-bottom: 15px;

    }

     .service-entry h2{

         font-size: 36px;

         margin-bottom: 15px;

    }

     .service-entry ul{

         margin-top: 30px;

    }

     .service-entry ul li{

         margin-bottom: 10px;

    }

     .service-security-box .section-footer-text{

         margin-top: 30px;

    }

     .page-blog{

         padding: 50px 0;

    }

     .page-pagination{

         margin-top: 10px;

    }

     .page-single-post{

         padding: 50px 0;

    }

     .post-image{

         margin-bottom: 20px;

    }

     .post-entry h1, .post-entry h2, .post-entry h3, .post-entry h4, .post-entry h5, .post-entry h6{

         margin: 0 0 0.42em;

    }

     .post-entry h2{

         font-size: 36px;

    }

     .post-entry p{

         margin-bottom: 15px;

    }

     .post-entry ol li, .post-entry ul li{

         font-size: 16px;

         margin-bottom: 10px;

    }

     .post-entry blockquote{

         background-position: 20px 20px;

         background-size: 40px;

         padding: 20px 20px 20px 70px;

         margin-bottom: 20px;

    }

     .post-entry blockquote p{

         font-size: 18px;

    }

     .post-tags{

         margin-bottom: 20px;

    }

     .post-tags .tag-links a{

         padding: 10px 15px;

    }

     .post-social-sharing ul{

         text-align: left;

    }

     .page-case-study-single{

         padding: 50px 0;

    }

     .case-study-entry h2{

         font-size: 36px;

         margin-bottom: 15px;

    }

     .case-study-entry p{

         margin-bottom: 15px;

    }

     .page-team{

         padding: 50px 0 20px;

    }

     .page-team-single{

         padding: 50px 0;

    }

     .team-single-image img{

         aspect-ratio: 1 / 0.9;

    }

     .team-single-content{

         margin-bottom: 30px;

    }

     .team-contact-list{

         padding-top: 30px;

    }

     .page-pricing{

         padding: 50px 0;

    }

     .page-testimonials{

         padding: 50px 0 20px;

    }

     .page-testimonials .testimonial-item{

         padding: 20px;

    }

     .page-gallery{

         padding: 50px 0 20px;

    }

     .page-video-gallery{

         padding: 50px 0 20px;

    }

     .page-faqs{

         padding: 50px 0;

    }

     .page-faqs .page-single-faqs{

         margin-bottom: 40px;

    }

     .page-contact-us{

         padding: 50px 0;

    }

     .contact-info-list{

         margin-bottom: 50px;

    }

     .google-map-iframe{

         height: 450px;

    }

     .contact-us-form{

         padding: 30px;

    }

     .contact-us-form .section-title h2{

         font-size: 32px;

    }

     .error-page{

         padding: 50px 0px;

    }

     .error-page-image{

         margin-bottom: 20px;

    }

     .error-page-image img{

         max-width: 80%;

    }

}

 @media only screen and (max-width: 767px){

     .section-row{

         margin-bottom: 30px;

    }

     .section-title h1{

         font-size: 28px;

    }

     .section-title h2{

         font-size: 26px;

    }

     .video-play-button p{

         font-size: 14px;

         margin-left: 5px;

    }

     .hero-item{

         width: 100%;

         padding: 20px;

    }

     .hero-item-content h3{

         font-size: 18px;

    }

     .hero-item-content h2{

         font-size: 26px;

    }

     .hero-item-content p{

         margin-top: 5px;

    }

     .hero-counter{

         margin-bottom: 40px;

    }

     .hero-item-image{

         margin-top: 20px;

    }

     .hero-item-image img{

         max-width: 240px;

    }

     .our-scrolling-ticker{

         padding: 15px 0;

    }

     .scrolling-content span img{

         max-width: 120px;

    }

     .about-review-box{

         border-right: none;

         margin: 0 0 20px;

         padding-right: 0;

    }

     .about-client-box{

         gap: 10px;

         margin-bottom: 15px;

         padding-bottom: 15px 

    }

     .about-google-review{

         margin-right: 10px;

         padding-right: 10px;

    }

     .about-google-review-header .icon-box{

         margin-right: 5px;

    }

     .about-google-review-header .icon-box img{

         max-width: 24px;

    }

     .about-author-content h3{

         font-size: 18px;

    }

     .service-item{

         padding: 20px;

    }

     .service-item-title h3{

         font-size: 18px;

    }

     .section-footer-text ul li{

         margin-right: 5px;

    }

     .section-footer-text.section-footer-contact span{

         width: 32px;

         height: 32px;

    }

     .section-footer-text.section-footer-contact span img{

         max-width: 16px;

    }

     .why-choose-counter-content, .why-choose-counter-list{

         width: 100%;

    }

     .why-choose-counter-content{

         padding: 0;

         border: none;

    }

     .why-choose-counter-info p{

         font-size: 14px;

    }

     .why-choose-item{

         width: 100%;

    }

     .why-choose-item-content h3{

         font-size: 18px;

    }

     .why-choose-item-content p{

         margin-top: 5px;

    }

     .why-choose-img-box-1, .why-choose-img-box-2{

         width: 100%;

    }

     .why-choose-img-box-1 .why-choose-image{

         background-size: 90px auto;

         padding: 20px 0 0 20px;

    }

     .why-choose-image.image-1 img{

         aspect-ratio: 1 / 1.05;

    }

     .why-choose-image.image-2 img{

         aspect-ratio: 1 / 1.1;

    }

     .why-choose-image.image-3 img{

         aspect-ratio: 1 / 0.9;

    }

     .year-experience-box{

         max-width: 100%;

         margin: 15px 0 0;

         padding: 15px;

         animation: none;

    }

     .year-experience-box h2{

         font-size: 22px;

    }

     .how-work-item-content h3{

         font-size: 18px;

    }

     .how-work-btn{

         margin-top: 15px;

         padding-top: 15px;

    }

     .intro-video{

         padding: 50px 0;

    }

     .our-video-circle{

         margin-bottom: 40px;

    }

     .feature-item, .feature-item.box-1, .feature-item.box-2{

         width: 100%;

    }

     .feature-item.box-2{

         order: initial;

    }

     .feature-item-content h3{

         font-size: 18px;

    }

     .pricing-header h2{

         font-size: 24px;

         margin-top: 15px;

    }

     .pricing-header h2 sub{

         font-size: 14px;

    }

     .pricing-benefit-list{

         margin-top: 5px;

    }

     .pricing-benefit-list ul li{

         font-size: 12px;

    }

     .pricing-benefit-list ul li img{

         max-width: 16px;

         margin-right: 5px;

    }

     .faq-accordion .accordion-item{

         border-radius: 8px;

    }

     .faq-accordion .accordion-header .accordion-button{

         font-size: 16px;

         padding: 10px 42px 10px 10px;

    }

     .faq-accordion .accordion-item .accordion-body{

         padding: 10px;

    }

     .faq-accordion .accordion-item .accordion-body p{

         font-size: 14px;

    }

     .faq-accordion .accordion-item .accordion-button::after, .faq-accordion .accordion-item .accordion-button.collapsed::after{

         font-size: 12px;

         width: 24px;

         height: 24px;

         right: 10px;

    }

     .testimonial-google-review{

         padding: 15px;

    }

     .testimonial-slider{

         padding: 20px;

    }

     .testimonial-content p{

         font-size: 16px;

    }

     .testimonial-author-content{

         padding-top: 15px;

         margin-top: 15px;

    }

     .testimonial-author-content h3{

         font-size: 18px;

    }

     .testimonial-slider-btn{

         position: initial;

         justify-content: center;

         margin-top: 15px;

    }

     .testimonial-slider .testimonial-button-next{

         margin-left: 15px;

    }

     .post-featured-image{

         margin-bottom: 15px;

    }

     .footer-scrolling-ticker-box{

         margin-bottom: 30px;

         padding-bottom: 30px;

    }

     .footer-scrolling-ticker{

         padding: 25px 0;

    }

     .footer-scrolling-ticker .scrolling-content span{

         font-size: 50px;

    }

     .footer-scrolling-ticker .scrolling-content span img{

         max-width: 30px;

    }

     .footer-contact-btn a{

         width: 110px;

         height: 110px;

         font-size: 16px;

         padding: 12px;

    }

     .about-footer, .footer-links{

         margin: 0 0 40px;

    }

     .about-footer-content{

         margin-top: 15px;

    }

     .footer-links h3{

         font-size: 18px;

         margin-bottom: 15px;

    }

     .footer-links ul li{

         margin-bottom: 10px;

         padding-bottom: 10px;

    }

     .footer-copyright{

         padding: 15px 0;

    }

     .footer-copyright-box{

         justify-content: center;

    }

     .footer-menu ul{

         gap: 5px 12px;

    }

     .footer-menu ul li{

         font-size: 14px;

    }

     .page-header-box h1{

         font-size: 28px;

    }

     .our-value-img-1{

         width: 75%;

         padding-bottom: 100px;

    }

     .our-value-img-2{

         width: calc(25% + 100px);

         margin-left: -100px;

         z-index: 1;

    }

     .our-value-img-2 .contact-us-circle{

         top: 36%;

    }

     .our-value-img-2 .contact-us-circle a img{

         max-width: 90px;

    }

     .our-value-item{

         width: 100%;

    }

     .our-value-item-content h3{

         font-size: 18px;

    }

     .award-item{

         gap: 15px 10px;

         padding-top: 20px;

         margin-top: 20px;

    }

     .award-item-info{

         width: calc(100% - 50px);

    }

     .award-year{

         width: 100%;

         padding: 0;

         margin-bottom: 10px;

    }

     .award-item-body{

         width: 100%;

    }

     .award-item-title{

         width: 72%;

    }

     .award-item-body h3{

         font-size: 16px;

    }

     .award-item-content{

         width: 28%;

         padding-left: 15px;

    }

     .award-item-body p{

         font-size: 14px;

    }

     .team-content h3{

         font-size: 18px;

    }

     .team-content p{

         font-size: 14px;

    }

     .page-category-list h3{

         font-size: 18px;

    }

     .sidebar-cta-box{

         padding: 30px 20px;

    }

     .sidebar-cta-content h2{

         font-size: 18px;

    }

     .page-single-image{

         margin-bottom: 20px;

    }

     .page-single-image img{

         aspect-ratio: 1 / 0.68;

    }

     .service-entry h2{

         font-size: 26px;

    }

     .service-entry h3{

         font-size: 18px;

    }

     .service-entry ul li{

         font-size: 14px;

    }

     .service-benefit-item{

         width: 100%;

    }

     .security-step-item{

         width: 100%;

    }

     .security-step-btn{

         margin-top: 15px;

         padding-top: 15px;

    }

     .post-single-meta ol li, .post-single-meta ol li i{

         font-size: 16px;

    }

     .post-image img{

         aspect-ratio: 1 / 0.7;

    }

     .post-entry blockquote{

         background-position: 15px 15px;

         padding: 60px 15px 15px 15px;

    }

     .post-entry blockquote p{

         font-size: 16px;

    }

     .post-entry h2{

         font-size: 26px;

    }

     .tag-links{

         font-size: 18px;

    }

     .case-study-entry h2{

         font-size: 26px;

    }

     .case-study-entry h3{

         font-size: 18px;

         margin-bottom: 5px;

    }

     .case-study-entry ul{

         gap: 10px;

         margin-top: 20px;

    }

     .case-study-entry ul li{

         width: 100%;

    }

     .project-solution-item{

         margin-top: 20px;

         padding-top: 20px;

    }

     .project-solution-body-item{

         width: 100%;

    }

     .project-solution-body-item .icon-box{

         margin-bottom: 20px;

    }

     .project-solution-img{

         width: 100%;

    }

     .team-single-image img{

         aspect-ratio: 1 / 1.1;

    }

     .team-single-content, .contact-us-form.team-contact-form{

         padding: 20px;

    }

     .team-contact-item{

         width: 100%;

    }

     .skills-progress-bar .skill-data{

         margin-bottom: 10px;

    }

     .member-info-list{

         width: 100%;

    }

     .contact-info-item{

         width: 100%;

    }

     .contact-info-item .icon-box{

         margin-bottom: 15px;

    }

     .contact-info-content h3{

         margin-bottom: 10px;

    }

     .google-map-iframe{

         height: 350px;

    }

     .contact-us-form{

         padding: 20px;

    }

     .contact-us-form .section-title h2{

         font-size: 28px;

    }

}

 .navbar-brand img{

     width: 170px;

     float: left;

     margin-top: -10px;

     margin-bottom: -10px;

}

 .main-footer{

     padding-top: 0px;

}

 .footer-copyright {

     border-top: 1px solid var(--dark-divider-color);

     padding: 40px 0 40px;

     margin-top: 10px;

}

 .page-contact-us{

     padding-top: 30px;

}

 .page-contact-us .container{

     max-width: 98%;

}

/* MAIN FORM CONTAINER */

 .form_us1 {margin: auto;background: #f8f8f8;padding: 35px 18px;border-radius: 24px;position: relative;}

 .form_us1 > h2 {

     margin-top: 0;

     margin-bottom: 30px;

     color: var(--primary);

     font-weight: 600;

     font-size: 22px;

     text-align: center;

     color: #555555;

}

/* EACH FIELD GROUP */

 .form_us1 > .form-group {

     margin-bottom: 22px;

     position: relative;

}

 .form_us1 > .form-group > label {

     display: block;

     margin-bottom: 6px;

     font-weight: 400;

     color: var(--text-dark);

     font-size: 15px;

     margin-bottom: 5px;

     color: #555;

}

/* INPUT FIELD */

 .form_us1 > .form-group > input {width: 100%;padding: 14px 44px;border: 2px solid #d4d4d4;border-radius: 10px;font-size: 15px;transition: 0.25s;background: #ffffff;padding-left: 38px;padding-right: 20px;}

/* SVG ICON INSIDE INPUT */

 .form_us1 > .form-group > svg {

     position: absolute;

     bottom: 0px;

     left: 12px;

     width: 18px;

     height: 18px;

     fill: var(--primary);

     opacity: 0.7;

     margin-bottom: 14px;

}

/* FOCUS EFFECT */

 .form_us1 > .form-group > input:focus {

     outline: none;

     border-color: var(--primary);

     box-shadow: 0 0 0 3px rgba(35,70,147,0.15);

}

/* BUTTON */

 .form_us1 > button:hover {

     background: #1b356f;

}

 .form-group i{

     float: left;

     margin-top: -32px;

     position: relative;

     z-index: 9;

     margin-left: 12px;

     font-size: 16px;

     color: #555555;

}

 .form_us2 {

     max-width: 960px;

     margin: 0 auto;

     background: #ffffff;

     padding: 30px 32px 36px;

     border-radius: 16px;

     box-shadow: 0 8px 25px rgba(0,0,0,0.12);

}

/* HEADER ROW */

 .form_us2 > .top-row {

     display: flex;

     align-items: center;

     gap: 12px;

     margin-bottom: 18px;

}

 .form_us2 > .top-row > label {

     font-weight: 400;

     color: #333;

     font-size: 14px;

}

 .form_us2 > .top-row > input {

     width: 70px;

     padding: 6px 8px;

     border-radius: 8px;

     border: 2px solid #edf3fe;

     font-size: 14px;

}

/* TABS */

 .form_us2 > .tabs {

     display: flex;

     flex-wrap: wrap;

     gap: 8px;

     margin-bottom: 20px;

}

 .form_us2 > .tabs > button {

     padding: 12px 14px;

     border-radius: 999px;

     border: 1px solid #d0d4e2;

     background: #ffffff;

     color: #333;

     cursor: pointer;

     font-size: 14px;

     font-weight: 500;

     transition: 0.2s;

}

 .form_us2 > .tabs > button:hover {

     background: #eef1f9;

}

 .form_us2 > .tabs > button.active {background: var(--primary);color: #fff;border-color: var(--primary);background: linear-gradient(to right, var(--accent-secondary-color) 0%, #7f7f7f 50%, var(--accent-secondary-color) 100%);}

/* MAIN PANEL WRAPPER */

 .form_us2 > .panel-wrapper {background: #f8f8f8;border-radius: 12px;padding: 16px 16px 18px;}

/* INDIVIDUAL PANELS */

 .form_us2 > .panel-wrapper > .problem-panel {

     display: none;

}

 .form_us2 > .panel-wrapper > .problem-panel.active {

     display: block;

     margin-bottom: 20px;

}

/* PANEL TITLE */

 .form_us2 > .panel-wrapper > .problem-panel > h3 {

     margin-top: 0;

     margin-bottom: 8px;

     font-size: 16px;

     color: #555555;

     font-weight: 500;

     margin-top: 6px;

}

/* SELECTION LAYOUT */

 .form_us2 > .panel-wrapper > .problem-panel > .selection-grid {

     display: grid;

     grid-template-columns: 1.4fr 1fr;

     gap: 14px;

}

 .form_us2 > .panel-wrapper > .problem-panel > .selection-grid > .selected-box, .form_us2 > .panel-wrapper > .problem-panel > .selection-grid > .available-box {

     background: #ffffff;

     border-radius: 12px;

     border: 1px solid #d5d8e5;

     padding: 10px 10px 12px;

}

/* Selected problems */

 .form_us2 > .panel-wrapper > .problem-panel > .selection-grid > .selected-box > .selected-list {

     display: flex;

     flex-direction: column;

     gap: 8px;

     max-height: 180px;

     overflow-y: auto;

}

 .form_us2 > .panel-wrapper > .problem-panel > .selection-grid > .selected-box > .selected-list > .chip {

     display: flex;

     align-items: center;

     justify-content: space-between;

     padding: 10px 12px;

     border-radius: 10px;

     border: 1px solid var(--chip-border);

     background: var(--chip-bg);

     font-size: 14px;

}

/* chip remove button */

 .form_us2 > .panel-wrapper > .problem-panel > .selection-grid > .selected-box > .selected-list > .chip > button {

     border: none;

     background: transparent;

     cursor: pointer;

     padding: 0;

     margin-left: 10px;

     display: flex;

     align-items: center;

}

 .form_us2 > .panel-wrapper > .problem-panel > .selection-grid > .selected-box > .selected-list > .chip > button > svg {

     width: 14px;

     height: 14px;

     fill: #b95050;

}

/* Available problems list */

 .form_us2 > .panel-wrapper > .problem-panel > .selection-grid > .available-box > ul {

     list-style: none;

     padding: 0;

     margin: 0;

     max-height: 200px;

     overflow-y: auto;

}

 .form_us2 > .panel-wrapper > .problem-panel > .selection-grid > .available-box > ul > li {

     padding: 6px 10px;

     border-radius: 8px;

     font-size: 13px;

     cursor: pointer;

     transition: 0.15s;

     background: #e8e8e836;

     margin: 8px 0px;

}

 .form_us2 > .panel-wrapper > .problem-panel > .selection-grid > .available-box > ul > li:hover {

     background: #eef1f9;

}

/* footer note area */

 .form_us2 > .note-area {

     margin-top: 20px;

}

 .form_us2 > .note-area > label {

     display: block;

     margin-bottom: 12px;

     margin-top: 30px;

     font-weight: 500;

     color: #555555;

     font-size: 16px;

}

 .form_us2 > .note-area > textarea {

     width: 100%;

     min-height: 100px;

     border-radius: 10px;

     border: 2px solid #d6dae4;

     padding: 10px 12px;

     resize: vertical;

     font-size: 14px;

}

 .form_us2 > .note-area > textarea:focus {

     outline: none;

     border-color: var(--primary);

     box-shadow: 0 0 0 3px rgba(35,70,147,0.16);

}

 .problem-panel {

     overflow: hidden;

     transition: all 0.25s ease;

     max-height: 0;

     opacity: 0;

}

 .problem-panel.active {

     max-height: 600px;

     opacity: 1;

}

 .form_left_side{

     float: left;

     width: 28%;

     background: #fff;

     border-radius: 10px;

     padding: 0px;

}

 .form_right_side{

     float: right;

     width: 70%;

}

 :root {

     --bg-light: #f4f6fa;

     --chip-bg: #ffe6e6;

     --chip-border: #f2a1a1;

}

 .form_us1 > .form-group > input:focus, .form_us2 > .note-area > textarea:focus{

     outline: none !important;

     box-shadow: 0 0 0 0px rgba(35, 70, 147, 0.0) !important;

     border-color: #d3dbeb;

}

 .submt_btn {background: linear-gradient(to right, var(--accent-secondary-color) 0%, #7f7f7f 50%, var(--accent-secondary-color) 100%);color: #fff;float: right;padding: 16px 30px;display: inline-block;/*margin-top: 30px;*/font-size: 20px;border-radius: 12px;border: none;}

 .clear{

     clear: both;

}

 .scrolling-content span img {

     width: 100%;

     max-width: 170px;

     background: #ffffff21;

     padding: 14px 0px;

     border-radius: 12px;

}

 .form_us1 > .form-group > select {

     width: 100%;

     padding: 14px 44px;

     border: 2px solid #dfe8f8;

     border-radius: 10px;

     font-size: 15px;

     transition: 0.25s;

     background: #ffffff;

     padding-left: 33px;

}

 .form_us1 > .form-group > select:focus {

     outline: none;

     border-color: #d3dbeb;

     box-shadow: 0 0 0 0px rgba(35,70,147,0.15);

}

 .form_roprt_2{

}

 .hlaf_inpt{

    float: left;

    width: 49%;

    margin-top: 30px;

}

 .hlaf_inpt label{

    float: left;

    width: 100%;

    font-size: 16px;

    color: #333;

    margin-bottom: 10px;

}

 .hlaf_inpt textarea, .hlaf_inpt input{

    float: left;

    width: 100%;

    border: 2px solid #d5def0;

    border-radius: 10px;

    padding: 10px;

    font-size: 15px;

    line-height: 24px;

    background: #ffffff;

}

 .hlaf_inpt textarea:focus, .hlaf_inpt input:focus{

     outline: none;

}

 .full_inpt{

    float: left;

    width: 100%;

}

 .full_inpt label{

     float: left;

     width: 100%;

     font-size: 16px;

     color: #333;

     margin-bottom: 10px;

}

 .full_inpt textarea{

     float: left;

     width: 100%;

     border: 2px solid #d5def0;

     border-radius: 10px;

     padding: 20px;

     font-size: 15px;

     line-height: 24px;

     background: #f6f6f6;

}

 .full_inpt textarea:focus{

     outline: none;

}

 .hlaf_inpt_1{

     float: left;

}

 .hlaf_inpt_2{

     float: right;

}





.inner_box_1{



}



.inner_box_1{float: left;background: #edf3fe;margin-top: 50px;padding: 20px;border-radius: 18px;}



.inner_box_1_labl{

    float: left;

    width: 100%;

    font-size: 18px;

    color: #111;

    font-weight: 500;

    margin-top: 10px;

    margin-bottom: -10px;

}