@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    --primary-color--: #173653;
    --secondary-color-: #FFF3F3;  
    --blue-color--: #548edb;
}

a{
    text-decoration: none !important;
    font-size: 16px;
    line-height: 1;
    color: #111111;
}

ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

body{
    font-family: "Plus Jakarta Sans", sans-serif;
    color: #111111;
}

/* h1,h2,h3,h4,h5,h6{
    margin-bottom: 0;
    font-family: "Epilogue", sans-serif;
} */

p{
    font-size: 16px;
    margin: 0;
}

section{
    overflow: hidden;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex; 
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.loader {
    border: 10px solid var(--primary-color--);
    border-top: 10px solid var(--blue-color--);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: spin 2s linear infinite;
}

/* Loading spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}

.top_header{
    padding: 10px 4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1111119E;
}

.top_header ul li{
    display: flex;
    align-items: center;
    color: #fff;
    gap: 10px;
    font-size: 18px;
}

.top_header ul li a{
    color: #fff;
}

.top_header ul li a i{
    padding-right: 5px;
}

.top_header ul li a:hover{
    color: var(--blue-color--);
}

.header{
    display: flex;
    align-items: center;
    padding: 10px 4%;
}

.header .logo{
    flex: 1;
}

.header .logo img{
    width: 65px;
}

.header nav ul{
    display: flex;
    gap: 20px;
}

.header nav ul li a{
    color: #fff;
    font-family: "Epilogue", sans-serif;
    transition: 0.3s;
}

.header nav ul li a:hover{
    color: var(--blue-color--);
}

.header .header_right{
    flex: 1;
    text-align: end
}

.lets_talk_btn{
    display: inline-block;
    padding: 10px 25px;
    background: #fff;
    border-radius: 50px;
    transition: 0.3s;
}

.lets_talk_btn:hover{
    background: var(--blue-color--);
    color: #fff;
}

.lets_talk_btn i{
    display: inline-block;
    font-size: 20px;
    transition: 0.3s;
}

.lets_talk_btn:hover i{
    transform: rotate(45deg);
}

.banner{
    position: relative;
}

.banner::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(290.27deg, rgba(0, 0, 0, 0.34) 20.06%, rgba(255, 255, 255, 0) 32.1%, rgba(0, 0, 0, 0) 46.92%, rgba(0, 0, 0, 0.55) 101.12%);
    z-index: 2;
}

.banner .banner_counter{
    position: absolute;
    left: 5%;
    bottom: 30%;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 20px 40px;
    width: 600px;
}

.banner .banner_counter .count h3{
    font-size: 36px;
    color: #fff;
    font-weight: 400;
}

.banner .banner_counter .count p{
    color: #fff;
}

.banner .banner_counter .counter_heading h2{
    font-weight: 400;
    font-size: 36px;
    color: #fff;
}

.banner .banner_content{
    position: absolute;
    right: 5%;
    top: 35%;
    z-index: 3;
    width: 370px;
    text-align: end;
}

.banner .banner_content p{
    color: #fff;
    font-weight: 400;
    font-size: 20px;
    margin-bottom: 10px;
}

.banner_slider_sec{
    position: relative;
}

.banner_slider_sec .banner_slider_arrows{
    position: absolute;
    bottom: 20px;
    left: 5%;
    display: flex;
    gap: 20px;
}

.banner_slider_sec .banner_slider_arrows button{
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border: 1px solid #fff;
    color: #fff;
    font-size: 24px;
    background: none;
    transition: 0.3s;
}

.banner_slider_sec .banner_slider_arrows button:hover{
    background: #fff;
    color: #111;
}

.banner_slider_sec .banner_slider_dots{
    position: absolute;
    bottom: 20px;
    right: 5%;
}

.banner_slider_sec .banner_slider_dots ul{
    display: flex;
    gap: 5px;
}
.banner_slider_sec .banner_slider_dots ul li button{
    background: #fff;
    color: #fff;
    border: 1px solid #fff;
    font-size: 0;
    height: 6px;
    width: 24px;
    outline: none;
    transition: 0.3s;
}
.banner_slider_sec .banner_slider_dots ul li.slick-active button{
    background: var(--blue-color--);
    border: 1px solid var(--blue-color--);
    width: 35px;
}

.get_consultation_btn{
    display: inline-block;
    font-size: 18px;
    padding: 15px 20px;
    background: #fff;
    color: #000;
    transition: 0.3s;
}

.get_consultation_btn:hover{
    background: var(--blue-color--);
    color: #fff;
}

.heading h2{
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color--);
    letter-spacing: 20%;
}

.about_heading h3{
    font-weight: 400;
    font-size: 36px;
}

.about_content{
    width: 240px;
}

.about_content p{
    font-weight: 500;
    font-size: 16px;
    color: #888888B8;
}

.about_content p span{
    color: var(--primary-color--);
}

.about_learn_more{
    /* text-align: end; */
    display: flex;
    gap: 40px;
    align-items: center;
}

.about_learn_more::before{
    content: '';
    height: 1px;
    width: 100%;
    background: #111111;
}

.learn_more_btn{
    display: inline-block;
    padding: 10px 20px;
    color: var(--primary-color--);
    border: 1px solid var(--primary-color--);
    transition: 0.3s;
    white-space: nowrap;
}

.learn_more_btn i{
    padding-left: 10px;
}

.learn_more_btn:hover{
    background: var(--primary-color--);
    color: #fff;
}

.why_choose_card{
    background: var(--secondary-color-);
    padding: 20px;
    border-radius: 20px;
    height: 100%;
}

.why_choose_card img{
    height: 80px;
}

.why_choose_card h3{
    font-weight: 400;
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.about_sec_bg{
    position: relative;
    z-index: 2;
}

.about_sec_bg .shape_1{
    position: absolute;
    width: 100%;
    max-width: 800px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.fw_500{
    font-weight: 500 !important;
}

.our_services_flex{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.our_services_flex .about_heading{
    width: 560px;
}

.bg_primary{
    background: var(--primary-color--);
}

.flip-box {
  background-color: transparent;
  width: 100%;
  height: 100%;
  /* border: 1px solid #f1f1f1; */
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner , .team_card:hover .flip-box .flip-box-inner{
  transform: rotateY(180deg);
}

.flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  top: 0;
  left: 0;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
    background: #fff;
    padding: 10px;
    padding-bottom: 0;
}

/* Style the back side */
.flip-box-back {
  background-color: #173653;
  color: white;
  transform: rotateY(180deg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flip-box-back .content{
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.flip-box-back .content .up_arrow{
    font-size: 28px;
}

.flip-box-back .content h3{
    font-weight: 600;
    font-size: 32px;
}

.flip-box-back .social_m{
    display: flex;
    gap: 10px;
}

.flip-box-back .social_m a{
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50%;
    transition: 0.3s;
}

.flip-box-back .social_m a:hover{
    background: #fff;
    color: var(--primary-color--);
}

.team_card:hover .team_card_content{
    opacity: 0;
}

.team_card .team_card_content h3{
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin-top: 10px;
}

.team_card .team_card_content p{
    color: #fff;
}

.consultation_btn{
    display: inline-block;
    padding: 10px 10px;
    border: 1px solid #fff;
    color: #fff;
    font-size: 14px;
    transition: 0.3s;
}

.consultation_btn:hover{
    background: #fff;
    color: var(--primary-color--);
}

.fw_600{
    font-weight: 600 !important;
}

.fw_400{
    font-weight: 400 !important;
}

.text_gray{
    color: #91928F;
}

.youtube_sec{
    position: relative;
    overflow: hidden;
    border-radius: 55px;
}

.youtube_sec i{
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 70px;
    color: #fff;
    transform: translate(-50%, -50%);
}

.content_card p{
    font-size: 16px;
    font-weight: 500;
}

.content_card p span{
    font-size: 20px;
    color: var(--primary-color--);
}

.testimonials_bg{
    background: url(../images/testimonial_bg.avif) var(--secondary-color-) no-repeat ;
    /* position: relative; */
    background-size: 50% 100%;
    background-position: left bottom;
}

.testimonials_flex{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.testimonials_flex .heading{
    flex: 1;
}

.testimonial_card{
    background: #fff;
    padding: 20px;
    border: 1px solid #91928F3D;
}

.testimonial_card .logo img{
    height: 60px;
}

.testimonial_card .content p{
    color: #000;
    font-size: 20px;
}

.testimonial_card .testimonial_footer{
    border-top: 1px solid #0F130C;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
    padding-top: 10px;
}

.read_all_btn{
    display: inline-block;
    padding: 10px 24px;
    font-size: 16px;
    color: var(--blue-color--);
    border: 1px solid var(--blue-color--);
    transition: 0.3s;
}

.read_all_btn:hover{
    background: var(--blue-color--);
    color: #fff;
}

.border{
    border: 0.6px solid #111111 !important;
}

/* .blogs_slider .slick-slide .blogs_card .content{
    display: none;
}

.blogs_slider .slick-slide.slick-current.slick-active .blogs_card .content{
    display: flex;
} */

.blogs_card{
    display: flex;
    gap: 20px;
    /* width: 800px; */
}

.blogs_card img{
    /* width: 450px; */
    width: 50%;
    flex: 0 0 auto;
}

.blogs_card .content{
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    padding-left: 30px;
    /* width: 480px; */
}

.blogs_card .content h3{
    font-size: 28px;
    font-weight: 500;
    color: #111111;
}

.blogs_card .content p{
    font-size: 20px;
    color: #111111;
}

.blogs_card .content span{
    display: flex;
    justify-content: space-between;
    color: var(--blue-color--);
}

.blogs_card .content span i{
    color: #111111;
}

footer{
    background: var(--primary-color--);
}

.footer_main_heading h2{
    color: #fff;
    font-size: 32px;
}

.footer_main_content p{
    font-weight: 400;
    font-size: 16px;
    color: #fff;
}

.border-1{
    border: 1px solid #FFFFFF90;
}

.footer_menu h3{
    font-size: 18px;
    color: #fff;
    font-weight: 600;
}

.footer_menu ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.footer_menu ul li a{
    color: #fff;
    font-weight: 400;
}

.footer_menu ul li a:hover{
    color: var(--blue-color--);
}

.border-2{
    border-bottom: 1px solid #FFFFFF;
    /* height: 1px; */
    opacity: 1;
}

.copy_right{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.copy_right p{
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    gap: 10px 30px;
}

.copy_right ul{
    display: flex;
    gap: 20px;
}

.copy_right ul li a{
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    color: #fff;
    border: 1px solid  #fff;
    border-radius: 50%;
    font-size: 26px;
    transition: 0.3s;
}

.copy_right ul li a:hover{
    background: #fff;
    color: var(--primary-color--);
}

.footer_icons{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.footer_icons img{
    width: 64px;
}

.img_flip{
    transform: rotateY(180deg);
}

.services_bg{
    background: #eff7ff;
    position: relative;
    height: 100vh;
}
.services_nav ul{
    display: flex;
    gap: 30px;
    border-bottom: 1px solid #E9E9E9;
}

.services_nav li button{
    font-weight: 500;
    font-size: 20px;
    border: none;
    background: none;
    padding-bottom: 10px;
    position: relative;
    transition: 0.3s;
}

.services_nav li button.active{
    color: var(--primary-color--);
}

.services_nav li button::before{
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color--);
    transition: 0.3s;
}

.services_nav li button.active::before{
    width: 100%;
}

.services_card{
    background: #fff;
    padding: 40px 30px;
    border-radius: 20px 20px 0 0;
}

.services_card .services_card_heading{
    color: var(--primary-color--);
    font-size: 36px;
    font-weight: 500;
}

.services_card .content p{
    font-size: 20px;
}

.services_card .handled_by{
    font-size: 16px;
    color: #BAB7B7;
    font-weight: 500;
}

.handled_ul li{
    color: var(--primary-color--);
}

.handled_ul li:not(:last-child){
    margin-bottom: 5px;
}

.services_card_slider{
    position: relative;
}

.services_card_slider .services_card{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
}


#services_card_1 { z-index: 1; }
#services_card_2 { z-index: 2; }
#services_card_3 { z-index: 3; }
#services_card_4 { z-index: 4; }
/* .services_card {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
  z-index: 1;
  position: relative;
}

.services_card.active {
  opacity: 1;
  transform: translateY(0);
  z-index: 10;
} */

.inner_banner{
    background: var(--primary-color--);
    padding-top: 180px;
    position: relative;
    padding-bottom: 40px;
}

.inner_banner .circle_shape_1{
    position: absolute;
    height: 300px;
    border: 35px solid #7BB9FF26;
    aspect-ratio: 1/1;
    right: 0;
    top: 50%;
    transform: translate(25% , -25%);
    border-radius: 50%;
    z-index: -1;
}

.breadcrumb ul{
    display: flex;
    position: relative;
    z-index: 2;
    flex-wrap: wrap;
}

.breadcrumb ul li, .breadcrumb ul li a{
    color: #fff;
    font-size: 20px;
    font-weight: 500;
}

.breadcrumb ul li a:hover{
    color: var(--blue-color--);
}


.breadcrumb ul li i{
    margin: 0 10px;
}

.inner_heading{
    font-weight: 500;
    font-size: 46px;
    color: #fff;
    margin-top: 70px;
    position: relative;
    z-index: 2;
}

.about_content_1 p{
    font-size: 20px;
}

.values_content p{
    font-size: 20px;
}

.values_row .values_col:not(:nth-child(3n - 0)){
    border-right: 1px solid #EDEDED;
}