:root {
  /*font Variable*/
  --Altone-font:  'Altone', sans-serif;
  --BigBang-font:  'BigBang', sans-serif;
  --Merriweather-font:  'Merriweather', sans-serif;
  --Latifa-font:  'Latifa', sans-serif;
  --Inter-font:  'Inter', sans-serif;
  /*Color Variable*/
  --color-primary: #0f0f0f;
  --color-primary-rgb: 15, 15, 15;
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-black: #13213b;
  --color-black-rgb: 0, 0, 0;
  --color-1: #c5c5c5;
  --color-1-rgb: 197, 197, 197;
  --color-2: #f5f5f5;
  --color-2-rgb: 245, 245, 245;
  --color-3: #191919;
  --color-3-rgb: 25, 25, 25;
  --color-4: #313131;
  --color-4-rgb: 49, 49, 49;
  --color-5: #eaeaea;
  --color-5-rgb: 234, 234, 234;
}
html{
    scrollbar-width: none;
}
body,.main{
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    background-color: #F3EAE0;
    scrollbar-width: none;
}
a{
    text-decoration: none;
}
button:focus{
    outline: 0;
    box-shadow: 0px 0px 0px #0f0f0f00 !important;
}
/* .btn1{
    font-family: var(--Altone-font);
    font-weight: 600;
    font-size: 16px;
    color: #223148;
    line-height: 80%;
    letter-spacing: 2%;
    text-transform: capitalize;


    border-width: 1px;
    border-radius: 100px;
    height: 53px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 24px;
    padding-left: 24px;
    gap: 10px;
    border: 1px solid  #223148;
    background: linear-gradient(#FFFFFF);
     transition: color 0.3s ease, background 0.3s ease, border 0.3s ease;
}

.btn1:hover {
    color: #ffffff;
    background: linear-gradient(263.45deg, #2F486D 2.65%, #223148 97.04%);
    border-color: transparent;
} */
 .btn1 {
    position: relative;
    overflow: hidden;
    z-index: 1;

    font-family: var(--Altone-font);
    font-weight: 600;
    font-size: 16px;
    color: #223148;

    border: 1px solid #223148;
    border-radius: 100px;
    height: 53px;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 24px;

    background: #ffffff;
    cursor: pointer;

    transition: color 0.3s ease;
}

/* Gradient layer */
.btn1::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(263.45deg, #2F486D, #223148);
    opacity: 0;
    transition: opacity 0.4s ease; /* smooth fade */
    z-index: -1;
}

.btn1:hover::before {
    opacity: 1;
}

.btn1:hover {
    color: #fff;
    /* border-color: transparent; */
}
.btn3{
    font-family: var(--Altone-font);
    font-weight: 600;
    font-size: 16px;
    color: #fff;;
    line-height: 80%;
    letter-spacing: 2%;
    text-transform: capitalize;


    border-width: 1px;
    border-radius: 100px;
    height: 53px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 24px;
    padding-left: 24px;
    gap: 10px;
    background:transparent;
    border: 1px solid  #fff;
    transition: all .3s linear;

}
.btn3:hover{
    background-color: #fff;
     color: #223148;
}
.btn4{
 font-family: var(--Inter-font);
    font-weight: 600;
    font-style: Semi Bold;
    font-size: 16px;
    color: #fff;;
    line-height: 80%;
    letter-spacing: 2%;
    text-transform: capitalize;

    width: fit-content;
    /* margin: auto; */
    border-width: 1px;
    border-radius: 100px;
    height: 53px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 36px;
    padding-left: 36px;
    gap: 10px;
border-radius: 100px;
border: 1px solid #223148;
transition: all .3s linear;
background: var(--blueaccent1, #2F486D);

}
.btn4:hover{
    background-color: transparent;
    color: #223148;
}
.btn5{
    font-family: var(--Inter-font);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 80%; /* 12.8px */
    letter-spacing: 0.32px;
    text-transform: capitalize;
    
    display: flex;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #757575;
    
    border-radius: 100px;
    background: #FFF;
    border: none;
    
}
.btn5.active{
    color: #fff;
border-radius: 100px;
background: #223148;
}

.btn2 {
    position: relative;
    overflow: hidden;
    z-index: 1;

    font-family: var(--Altone-font);
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    line-height: 1;
    letter-spacing: 2%;
    text-transform: capitalize;

    width: fit-content;
    margin: auto;
    border-radius: 100px;
    height: 53px;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 36px;
    gap: 10px;

    border: 1px solid #223148;
    background: linear-gradient(180deg, #2F486D 0%, #223148 100%);

    cursor: pointer;
    transition: color 0.3s ease, border 0.3s ease;
}

/* White overlay */
.btn2::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.btn2:hover::before {
    opacity: 1;
}

.btn2:hover {
    color: #223148;
    border-color: #bfbfbf;
}
.header{
    position: fixed;
    top: 0;
    z-index: 1090;
    width: 100%;
    padding: 15px 0;
    transition: transform 0.4s ease;
}
/* Hide header */
.header.hide {
    transform: translateY(-100%);
}
.header .container{
        transition: all 0.4s ease;
}
/* Optional: add background when scrolled */
.header.scrolled .container{
    width: 95%;
    background-color: #223148;
    padding: 10px 24px;
    border-radius: 32px;
}
.header.scrolled {
    /* background: rgba(0, 0, 0, 0. 8); */
    /* backdrop-filter: blur(10px); */
    
}
.head-contain{
    display: flex;
    justify-content: space-between;
}
.menusidebtn{
    gap: 0 15px;
}
.container{
    max-width: 100%;
    padding: 0 40px;
}
.promise{
    background: #223148;
}
.pb-extra{
    padding: 90px 0;

}
.p-90{
    padding: 60px 0;
}
.heading{
    max-width: 750px;
    margin: auto;
    text-align: center;
}
.heading h2{
    color: #F5F5F5;
    font-size: 40px;
    font-family: var(--BigBang-font);
}
.heading p{
    color: #F5F5F5;
    font-family: var(--Merriweather-font);
    font-weight: 400;
}
.heading.dark h2{
    color: #223148;
}
.heading.dark p{
    color: #505050;
}
.promise{
    position: relative;
}
.promise-container{
    max-width: 1050px;
    margin: auto;
}
.promise-container{
    display: flex;
    position: relative;
}
.promise-container .img{
    
}
.promise-container .img-1.img{
    margin-right: -30px;
    position: relative;
    z-index: 2;
}
.promise-container .img-2{
          position: relative;
    z-index: 4;
}
.promise-container .img-3.img{
    margin-left: -30px;
        position: relative;
    z-index: 0;
}
.promise-container{
    padding: 90px 0;
}
.promise-container::after{
    position: absolute;
    top: 0;
    left: -22.5%;
    content: "";
    display: block;
    height: 862px;
    background-size: contain;
    width: 100%;
    background-repeat: no-repeat;
    background-image: url("../img/promise/leftcir.png");
}
.promise-container::before{
    position: absolute;
    top: 0;
    right: -81.5%;
    content: "";
    display: block;
     height: 862px;
    background-size: contain;
    width: 100%;
    background-repeat: no-repeat;
    background-image: url("../img/promise/rightcir.png");
}
.manufacturing{
    max-width: 878px;
    margin: auto;
    padding: 60px 0 0;
}
.manufacturing p{
    text-align: center;
    font-family: var(--Merriweather-font);
    font-size: 16px;
    color: #F5F5F5;
}
.manufacturing .row{
    gap: 30px 0;
}
.manufacturing .row .manufacturingbox{
    padding: 20px;
}
 .manufacturing .row .manufacturingbox img{
    margin: auto;
    display: block;
 }
 .cta{
    padding: 0 20px;
}
/* .slide2 .btn3 {
    border-color: #223148;
    color: #223148 !important;
} */
.slide2 .mixblaned .btn3{

}
.slide2 .mixblaned h2{
color:  #ffffff;

}
.cta .ctaimg{
      /* height: 100vh; */
    background-image: url(../img/cta/cta1.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 100px;
    gap: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    flex-direction: column;
  }
  .cta .ctaimg p{
    font-family: var(--Altone-font);
    font-size: 20px;
    color: #fff;
    margin: 0;
    font-weight: 400;
    margin-bottom: 40px;
  }
  .cta .ctaimg h1{
    font-size: 96px;
    font-family: var(--BigBang-font);
    color: #FFFFFF;
    margin: 0;
    margin-bottom: 20px;
    font-weight: 400;
    line-height: 99px;
  }
 .cta .ctaimg .cont6{
    max-width: 668px;
    margin: auto; 
    align-items: center;
    text-align: center;
 }
 .line{
    width: 100%;
    padding: 20px 0;
 }
 .line ul{
    display: flex;
    list-style: none;
    justify-content: space-between;
    align-items: center;
    gap: 0 20px;
    padding: 0;
 }
 .line ul li{
    color: #F3EAE0;
    font-size: 24px;
    font-family: var(--Latifa-font);
    position: relative;
    width: 100%;
    text-align: center;
 }
 .line ul li.line1{
    /* content: ""; */
     width: 100%;
    height: 1px;
    display: block;
    top: 50%;
        /* transform: translate(100%,100%); */
    /* position: absolute; */
    left: 0;
    background-color: #FFFAF4;
 }
.mainhaid{
    font-family: var(--BigBang-font);
    color: #223148;
    font-size: 64px;
    text-align: center;
}
.contactdetails{}
.contactdetails .add{
        border-radius: 16px;
}
.contactdetails > a{
    color: #1E1E1E;
    font-family: var(--Merriweather-font);
    font-size: 16px;
    font-weight: 400;
    display: flex;
    gap: 10px;
    padding: 20px 40px;
    border: 1px solid #D9D9D9 ;
    width: fit-content;
    border-radius: 100px;
}
.contactdetails > a span{
    width: 90%;
}
.sociallionk{
    margin-top: 20px;
}
.sociallionk ul{
    display: flex;
    padding: 0;
    list-style: none;
    gap: 10px;
    margin-bottom: 0;
}
.sociallionk ul li a{
    /* padding: 10px; */
        /* padding: 20px 40px; */
    border: 1px solid #D9D9D9 ;
    width: fit-content;
    border-radius: 8px;
    height: 48px;
    width: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sociallionk ul li a{
    color: #1E1E1E;
}
 .map iframe{
    border-radius: 8px;
    overflow: hidden;
}
.sideconat{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.footer{
    background-color: #223148;
}
.footer .container{
    display: flex;
    justify-content: space-between;
}
.footerlogo{

}
.footermenu{
    width: 500px;
}
.footermenu .footheader{
    font-family: var(--BigBang-font);
    font-weight: 400;
    font-size: 22px;
    color: #FFFFFF;
    margin-bottom: 20px;
}
.footermenu ul{
    padding: 0;
    list-style: none;

}
.footermenu ul li{
    margin-bottom: 10px;
}
.footermenu ul li a{
    font-family: var(--Altone-font);
    font-size: 16px;
    color: #FFFFFF;
    font-weight: 400;
    text-transform: capitalize;
}
.copyright{
    background: #1E1E1E;
    padding: 20px 0;
}
.copyright p{
    margin-bottom: 0;
    text-align: center;
    color: #FFFFFF;
}
.servies {
    text-align: center;
}
.swiper-slide.swiper-slide-active img{
    scale: 1;
}
.swiper-slide.swiper-slide-prev img{
    /* transform: translateX(0%); */
}
.swiper-slide.swiper-slide-next img{
    /* transform: translateX(10%); */
}
.swiper-slide .servies h3{
    font-family: var(--Latifa-font);
font-weight: 400;
font-size: 25px;
text-transform: capitalize;
display: none;
color: #FFFFFF;
margin-top: 20px;
}
.swiper-slide.swiper-slide-active .servies h3{
    display: block;
}

.swiper-slide img{
    scale: 0.7;
}
.servies figure{
    height: 400px;
    width: 600px;
    margin: auto;
}
.servies figure img{
    width: 100%;
    height: 100%;
    border-radius: 16px;
}
.slider1{
    position: relative;
    padding: 120px 0;
    z-index: 22;
}
.slider1::after{
content: "";
position: absolute;
top: 51px;
left: 50%;
height: 580px;
display: block;
background-image: url(../img/slider/bg.png);
width: 66%;
margin: auto;
transform: translateX(-50%);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.slider1 .swiper-button-next{
    left: auto;
    right: 21%;
    transform: translateX(50%);
}
.slider1 .swiper-button-next,
.slider1 .swiper-button-prev{
    color: #223148;
  padding: 24px;
    height: 64px;
    width: 100px;
    background-color: #F3EAE0;
    border-radius: 100px;
    border: 1px solid #223148;
}
.slider1 .swiper-button-prev{
    right: 79%;
    left: auto;
    transform: translateX(50%);

}
.services{
    position: relative;
}
.slider1 {
    margin-bottom: 0px;

}
.mySwiper2 .servies figure{
    height: 100%;
    width: 100%;
}
.mySwiper2 .swiper-slide img{
    scale: 1;
}
.services::after{
content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 92%;
    display: block;
    background-image: url(../img/slider/bground.png);
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.services .btn2{
    position: relative;
    z-index: 21;
}
.beauty{
    position: relative;
}
.beauty::after{
    content: "";
    position: absolute;
    top: -440px;
    left: 50%;
    height: 1174px;
    display: block;
    background-image: url(../img/beauty/round1.png);
     width: 991px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 11;
    transform: translateX(-50%);

}
.beauty::before{
    content: "";
    position: absolute;
    top: -419px;
    left: 50%;
    height: 1235px;
    z-index: 12;
    display: block;
    background-image: url(../img/beauty/round2.png);
    width: 593px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translateX(-50%);

}
.beauty .heading{
    max-width: 537px;

}
.beauty .container{
    position: relative;
    z-index: 13;
}
.beauty .imgscroll{
    display: flex;
    margin-top: 90px;
    position: relative;
    z-index: 14;
    justify-content: space-between;
    transform: rotate(90deg);
}
.beauty .imgscroll .img1.imgauto{
    margin-top: 250px;
}
.beauty .imgscroll .img2.imgauto{
    margin-top: 120px;
}

/* ************************************************************* */
.how-to-use{
position:relative;
color:white;
z-index: 16;
}

.sticky-wrapper{
position:sticky;
top:0;
z-index: 16;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.title{
font-size:60px;
margin-bottom:80px;
}






.stackmain{
    padding: 120px 0 120px;
    position: relative;
}
/* .stackmain::before{
    content: "";
    position: absolute;
    top: -505px;
    left: 50%;
    height: 1299px;
    z-index: 1;
    display: block;
    background-image: url(../img/stack/round1.png);
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translateX(-50%);

} */
.stackmain .logo2{
    margin: auto;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 20;
}
.stackmain .container{
    position: relative;
    z-index: 14;
}

/* ******************************************************************************************** */
.stackmain{
    height:770px;
    position:relative;
}

.stackcardcon{
    width:774px;
    margin:50px auto;
    position:relative;
    height:370px;

}

.stackcard{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding: 30px;
    border-radius:20px;
    display:flex;
    flex-direction: column;
    align-items:center;
    gap: 0px 0;
    justify-content:center;
    font-size:30px;
    background:#eee;
        border-radius: 595.84px;
}
/* colors just for demo */
.stackcard:nth-child(1){
    background:#2F486D;
    z-index:1;
}

.stackcard:nth-child(2){
    background:#223148;
    z-index:2;
}

.stackcard:nth-child(3){
    background:#2F486D;
    z-index:3;
}
.stackcard h2{
    font-family: var(--Latifa-font);
font-weight: 400;
font-style: Regular;
font-size: 48px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-transform: capitalize;
color: #FFFFFF;
margin-bottom: 18px;
margin-top: 20px;
max-width: 400px;
margin: auto;

}
.stackcard p{
font-family: var(--Merriweather-font);
font-weight: 400;
font-style: Regular;
font-size: 16px;
line-height: 140%;
letter-spacing: 2%;
text-align: center;
text-transform: capitalize;
color: #FFFFFF;
max-width: 481px;
margin: auto;
}
.hero{
/* height:100vh; */
/* background:#334a63; */
position:relative;
overflow:hidden;
z-index: 18;
}

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

.bannerslide{
    height: 100%;

        padding: 60px 0;
}
.slide1{
    background: #223148;
}
.slide2{
    background: #223148;
}
.slide3{
    background: #223148;
}
.bannerslide .container{
    text-align: left;
    height: 100%;
    display: flex;
    /* flex-direction: column; */
    justify-content:end;
    align-items: center;
}
.bannerslide .containet{
    width: 600px;
    position: absolute;
    left: 52px;
    z-index: 10;
    /* mix-blend-mode: difference; */
    
}
.bannerslide h2{
    font-family: var(--BigBang-font);
    font-weight: 400;
    /* mix-blend-mode: difference; */
    font-style: normal;

    
    font-size: 128px;
    line-height: 100%;
    letter-spacing: 0;
    text-transform: capitalize;
    
    color: #ffffff;
    margin-bottom: 30px;
}
.mixblaned{
}
.bannerslide .img{
/* width: 800px; */
/* height: 700px; */
display: flex;
}

.how-to-use{
    position: relative;
    /* overflow: hidden; */
}


.curve-wrapper{
position:relative;
/* height:500px; */
z-index: 19;
}

.cards{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.cardmain{
position:absolute;
width:240px;
will-change:transform;
}
.menupopup{
    background: #223148;
    /* z-index: 120; */
}
.menubtn.active .burger{
    display: none;
}
.menubtn.active .close{
    display: block;
}
.menubtn .burger{
    display: block;
}
.menubtn .close{
    display: none;
}


.curveimg img{
    width: 100%;
}
.curveimg{
    position: absolute;
    top: 400px;
    left: 0;
    width: 100%;
}
/* ************************************************** */
.menu-wrapper{
    display: flex;
    gap: 100px;
}

.menu li{
    list-style: none;
    font-size: 24px;
    cursor: pointer;
    margin-bottom: 10px;
}
.sidebox{
    display: flex;
    justify-content: center;
    align-items: center;
}


.sidebox img{
width: 580px;
height: 359px;
opacity: 1;
border-radius: 50px;

    object-fit: cover;
    transition: 0.4s ease;
}
.menudiv{
height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.menu-wrapper .menu{
        display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}
.menu-wrapper .menu li:hover a{
    color: #FFFFFF;
}
.menu-wrapper .menu li a {
    color: #ffffff6f;
    font-family: var(--BigBang-font);
font-weight: 400;
font-style: Regular;
font-size: 40px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
text-transform: capitalize;
transition: all .3s linear;
display: flex;
align-items: center;
gap: 10px ;

}
.menu-wrapper .menu .dropdown-menu .dropdown-item{
    font-size: 32px;
}
.menu-wrapper .menu::after{
    content: "";
    position: absolute;
    height: 200px;
    width: 1px;
    background: #D9D9D9;
    display: block;
    top: 50%;
    right: -50px;
    z-index: 2000;
    transform: translate(-50%, -50%);
}
.banner .owl-dots .owl-dot.active span{
    background-color: #FFFFFF;
}
.banner .owl-dots .owl-dot span{
    width: 21px;
    height: 33px;
    opacity: 1;
    border-width: 1px;
    border: 1px solid var(--white, #FFFFFF);
    background-color: #223148;

}
.banner .owl-dots{
    position: absolute;
    bottom: 67px;
    display: flex;
    flex-direction: column;
    left: 39px;
}
.normal{
    display: block;
}
.bannerslide .img img{
    object-fit: contain;
    width: 900px;
    height: 800px;
}
.mobsvg{
    display: none;
}
.breadcrumb{
    background-image: url(../img/banner/breadcrumb.webp);
    background-size: cover;
    background-position: center center;
    margin-bottom: 0;
    width: 100%;
}
.breadcrumb h2{
    font-family: var(--BigBang-font);
font-weight: 400;
font-size: 128px;
line-height: 100%;
letter-spacing: 0%;
text-transform: capitalize;
color: #FFFFFF;
margin-top: 190px;
text-align: center;
}
.breadcrumb ul{
    display: flex;
    margin-top: 60px;
    gap: 20px;
    width: fit-content;
    padding: 10px 30px;
    list-style: none;
    border-radius: 100px;
    border: 1px solid #757575;
    background-color:#00000033;
}
.breadcrumb ul li{
    display: flex;
    align-items: center;
}
.breadcrumb ul li:last-child a{
color: #fff;
}
.breadcrumb ul li a{
    font-family: var(--Inter-font);
font-weight: 400;
font-size: 12px;
line-height: 80%;
letter-spacing: 0px;
color: #757575;

}
.about-container{
    padding: 0 205px;
    width: 100%;
}
.big{
    display: block;
}
.mob{
    display: none;
}
.aboutdetails{}
.aboutdetails .head h2{
color:  #223148;

/* h2 */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;
font-family:var(--BigBang-font);
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
}
.aboutdetails .head p{
    color: #757575;
font-family: var(--Merriweather-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 22.4px */
text-transform: capitalize;
margin-bottom: 0;
}

.scalecontent{
    margin-top: 57px;
    display: flex;
    justify-content: center;
}
.aboutheading{
color:  #223148 !important;
text-align: center;
font-family: var(--BigBang-font);
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
}
.different .heading h2{
    
    text-align: left;
margin-bottom: 40px;
}
.box1{
    text-align: left;
}
.box1 h3{
    color: var(--blueaccent1, #2F486D);
font-family: var(--Merriweather-font);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 28px */
margin-top: 16px;
text-transform: capitalize;
}
.box1 p{
    color: #757575;
font-family: var(--Inter-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 120%; /* 19.2px */
text-transform: capitalize;
margin-top: 8px;
}
.different .about-container .heading .row{
    gap: 30px 0;
}
.principles{
    padding-top: 40px;
}
.principles h2{
    margin-bottom: 40px !important;
}
.principles .imgcontainer{
    position: relative;
    border-radius: 200px;
    overflow: hidden;
}
.principles .imgcontainer .content{
    position: absolute;
    top: 130px;
    width: 100%;
    padding: 20px;
    z-index: 11;
    background-color: #fff;
}
.principles .imgcontainer .content h3{
    color: #223148;
font-family: var(--Merriweather-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
margin-bottom: 16px;
}
.principles .imgcontainer .content p{
    color: #223148;
font-family: var(--Inter-font);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
}
.principles .imgcontainer{
    position: relative;
}
.principles .imgcontainer::after{
     content: "";
     display: block;
    inset: 0;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #00000080;
}
.principles .imgcontainer figure{
    margin-bottom: 0;
}
.principles .imgcontainer figure img{
    width: 100%;
    height: 600px;
    object-fit: cover;
    
}
.seconadheading{
    color: #223148;
font-family:var(--BigBang-font);
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 130px;
text-align: center;
text-transform: capitalize;
}
.scalecontent img{
    scale: 0.1;
    width: 100%;
}
/* ************************************ */
.visionmossion {
    height: 900px;
}
.principles .row .col-lg-3{
    padding: 0 5px;
}
.visionmossion .about-container {
    position: sticky;
    top: 0px;
    width: 100%;
    margin: auto;
}

.cardw {
    height: 700px;
    width: 100%;
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    margin-top: 50px;
}

/* Different colors */
.cardw:nth-child(1) {z-index: 1 !important; }
.cardw:nth-child(2) {  
    /* margin-top: 270px; */
    z-index: 2 !important; 
}
.cardw:nth-child(2) .abcont{
    background: #f3eae0;
    
}
.cardw:nth-child(3) .abcont{
    background: #f3eae0;
    
}
.ab3 p{
    margin-top: 30px;
    margin-bottom: 30px;
}
.cardw:nth-child(3) {z-index: 4 !important; }

.visionmossion .cardw .abcont h3{
    color: var(--blueaccent2, #223148);
    margin-top: 200px;

/* h2 */
font-family: var(--BigBang-font);
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
}
.abcont{
    width: 500px;
}
.visionmossion .cardw .abcont p{
    color: var(--blueaccent2, #223148);
font-family: var(--Merriweather-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 22.4px */
text-transform: capitalize;
}
.abcont ul li{
    color: var(--blueaccent2, #223148);
font-family: var(--Merriweather-font);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
    padding: 10px 20px;
    border-radius: 100px;
border: 1px solid #D9D9D9;
padding: 16px 20px ;
width: fit-content;
margin-bottom: 16px;
transition: all .3s linear;

}
.abcont ul li:hover{
background: rgba(255, 255, 255, 0.80);
}
.abcont ul{
    list-style: none;
    padding: 0;
    margin: 0;
}
.cardw figure{
    height: 710px;
    width: 400px;
}
.cardw figure img{
    height: 100%;
    width: 100%;
    object-fit: contain;
}
.blog-container{
    padding: 0 204px;
    width: 100%;
}
.blog-grid{}
.blog-grid .img-box{}
.blog-grid .img-box figure {
    margin-bottom: 10px;
}
.blog-grid .img-box figure img{
    width: 100%;
}
.blog-grid .img-box .tag{
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: #F5F5F5;
    display: block;
    width: fit-content;
    color: var(--blueaccent1, #2F486D);
font-family: var(--Merriweather-font);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
margin-bottom: 14px;
}
.blog-grid .content{}
.blog-grid  .content ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 16px;
    gap: 8px;
}
.blog-grid .content ul li{
    color:#757575;
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
}
.blog-grid .content h3{
    color: var(--blueaccent2, #223148);
font-family: var(--Merriweather-font);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
margin-bottom: 10px;
}
.blog-grid .content h2{
    color: var(--blueaccent2, #223148);
font-family: var(--Merriweather-font);
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
margin-bottom: 10px;
}
.blog-grid  .content p{
    color: #757575;
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
margin-bottom: 32px;
}
.blog-section{
    padding: 60px 0;
}
.filters{
    margin-bottom: 48px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.blog-grid{
    gap: 48px 0;
}
.blog-content{
    padding: 0 88px;
    margin-top: 33px;
}
.blog-content p{
    color: #303030;
font-family: var(--Merriweather-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
text-transform: capitalize;
}
.blog-content h3{
    color: #303030;
font-family: var(--Merriweather-font);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 28px */
text-transform: capitalize;
}
.blog-content ol li{}
.blog-content ol li{
    color: #303030;
font-family: var(--Inter-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 180%; /* 28.8px */
text-transform: capitalize;
}
.blog-container  hr{
    margin: 64px 0 ;
    border-color: #D9D9D9;
    background-color: #aaaaaa;
}
.likes h2{
    color: var(--blueaccent2, #223148);
font-family: var(--BigBang-font);
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
}
.likes .btn4{
border-radius: 100px;
border: 1px solid #223148;
background-color: transparent;
color: #223148;
}
.copyright p a{
    color: #fff;
}
.gallery-grid figure img{
    width: 100%;
    height: 100%;
}
.gallery-grid .content h3{
    color: var(--blueaccent2, #223148);
font-family: var(--Merriweather-font);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
margin-bottom: 0;
}
.gallery-grid{
    gap: 28px 0;
}
.video{
    position: relative;
}
.video div{
  position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.skin-head{
    padding: 60px 0 280px;
    background-color: #223148;
}
.skin-head .container{
    max-width: 620px;
    text-align: center;
    padding: 0;
}
.skin-head .container p{
    padding-top: 27px;
    color: var(--white, #FFF);
text-align: center;
font-family: var(--Merriweather-font);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 28px */
text-transform: capitalize;
}
.skin-section{
    margin-top: -187px;
}
.sectionhed{
    padding: 105px 0 300px;
    border-radius: 1000px;
border: 1px solid #757575;
background: var(--offwhite, #F3EAE0);

}
.sectionhed h2{
    color: var(--blueaccent2, #223148);
text-align: center;

letter-spacing: -1px;

/* h2 */
font-family: var(--BigBang-font);
font-size: 40px;
font-style: normal;
font-weight: 400;
line-height: 40px;
text-transform: capitalize;
max-width: 590px;
margin: auto;
}
.promise-container > div {
    transition: all .3s ease;
    position: relative;
}

.promise-container > div:hover {
    z-index: 111 !important;
    /* transform: translateY(-10px) scale(1.02); */
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.15); */
}
.skinbox{
    padding: 20px;
    border-radius: 50px;
    border: 1px solid #757575;
    background-color: #F3EAE0;
    transition: all .3s linear;
    height: 100%;
}
 .hidedesk{
     display: none !important;
    }
    .hidemobe{
        display: flex;
    }
 .mobileview{
     display: none !important;
    }
    .diskview{
        display: block;
    }
.gallery-grid div:hover{
    cursor: pointer;

}
.skinbox figure{
    border-radius: 200px 200px 20px 20px;
        margin-top: -170px;
}
.skinbox figure img{
    width: 100%;
    height: 100%;
}
.skinbox h3{
    color: #2C2C2C;
font-family: var(--Merriweather-font);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
    transition: all .3s linear;
}
.skinbox p{
    color: #757575;
font-family: var(--Inter-font);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
    transition: all .3s linear;
}
.skinbox:hover{
background-color: #2F486D;

}
.skinbox figure img{
    object-fit: cover;
    width: 100%;
}
.skinbox figure{
    height: 360px;
        transition: all .3s linear;
        overflow: hidden;
}
.skinbox:hover figure{
    height: 400px;
      margin-top: -210px;
}
.skinbox:hover button{
    background-color: #FFFFFF;
}
.skinbox:hover h3{
    color: #fff;
}
.skinbox:hover p{
    color: #B3B3B3;
}
.skinbox button{
    border-radius: 100px;
border: 0.5px solid #383838;
background-color: transparent;
color: #2F486D;
margin: auto;
transition: all .3s linear;
}
/* .skinbox button:hover{
     background: linear-gradient(263.45deg, #2F486D 2.65%, #223148 97.04%);
     color: #fff;
} */
.skinlist .bg{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}
.skinlist .bg img{
    width: 100%;
    margin-top: 150px;
}
.skinlist .bg img:first-child{
 margin-top: 250px;
}
.skinlist{
    margin-top: -75px;
    /* background-image: url(./../img/round.png);
    background-size: contain;
    background-position: center center; */
    position: relative;
}

.skinlist .row{
    gap: 210px 0;
    position: relative;
    z-index: 33;
}
.btround{
    margin-top: -104px;
}
.btround div{
    max-width: 856px;
    padding: 268px 30px 126px;
    margin: auto;
    border-radius: 1000px 1000px 0 0;
border: 1px solid #757575;
}
.btround div h2{
    color: var(--blueaccent2, #223148);
    text-align: center;
    max-width: 573px;
    margin: auto;
    /* h2 */
    font-family: var(--BigBang-font);
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    text-transform: capitalize;
}
.btround div a{
display: flex;
margin: auto;
margin-top: 36px;
}
.contact{
    padding: 60px 0;
}
.contact .contact-form{
    width: 504px;
    margin: auto;
}
.contact .contact-form h2{
    font-family: var(--BigBang-font);
font-weight: 400;
font-size: 40px;
line-height: 100%;
letter-spacing: 0%;
text-transform: capitalize;
color: #223148;
margin-bottom: 40px;
}
.conbox.active span{
    color: #1E1E1E;
}
.conbox span{
    font-family: var(--Inter-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 2%;
    text-transform: capitalize;
    display: block;
    color: #757575;
    transition: all .3s linear;
}
.conbox input:focus,
.conbox input:focus-visible,
.conbox textarea:focus,
.conbox textarea:focus-visible{
    border: 1px solid #757575;
       border-top: none;
    border-left: none;
    border-right: none;
    box-shadow: none;
    outline: none;
}
.conbox input,
.conbox textarea{
    border: 1px solid #757575;
    background: transparent;
    padding: 17px 10px 10px;
    width: 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--Altone-font);
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 2%;
    /* text-transform: capitalize; */
}
.conbox input::placeholder,
.conbox textarea::placeholder{
    color: #B3B3B3;
}
.contact-form .row{
    gap: 20px 0;
}
.contact-form p{
    font-family: var(--Inter-font);
font-weight: 400;
font-size: 14px;
line-height: 100%;
letter-spacing: 2%;
text-transform: capitalize;
color: #B3B3B3;

}
.sociallionk h3{
    font-family: var(--Merriweather-font);
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 2%;
text-transform: capitalize;

}
.qr{
    padding: 10px;
    border-radius: 16px;
    border: 1px solid #D9D9D9;
    width: fit-content;
    margin: auto;
}
.qr p{
    font-family: var(--Altone-font);
font-weight: 400;
font-size: 16px;
line-height: 100%;
letter-spacing: 2%;
text-transform: capitalize;
color: #1E1E1E;
margin-bottom: 0;

}
.map-section{
    padding-bottom: 60px;
}
.map.sociallionk{
    margin-top: 40px;
}
.thank{
    background-color: #223148;
}
.thank .bxo12{

    padding: 200px 0 60px;
}
.thank h1{
    font-family: var(--BigBang-font);
font-weight: 400;
font-size: 200px;
line-height: 80%;
letter-spacing: -4%;
text-align: center;
text-transform: uppercase;
color: #F3EAE0;
margin-bottom: 0;

}
.thank p{
font-family: var(--Altone-font);
font-weight: 400;
font-size: 24px;
line-height: 80%;
letter-spacing: -4%;
text-align: center;
text-transform: uppercase;
color: #F3EAE0;

}
.thank .btn1{
    width: fit-content;
    margin: auto;
    margin-top: 30px;
    display: flex;
}
.team .seconadheading{
    margin-top: 100px;
}
.teambox:hover .teamname{
    color: #fff;
}
.teambox:hover{
    background-color: #FFF;
}
.teambox:hover p{
    color:#2F486D
}
.teambox:hover .teamname{
    color: #2F486D;
}
.teambox{
        transition: all .3s linear;
}
.teambox .discription {
    color: #757575 !important;
    font-family: var(--Inter-font);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 20px;
    text-transform: capitalize;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all .6s linear;
}

.teambox:hover .discription {
    max-height: 200px; /* adjust based on your content */
    opacity: 1;
}
.teambox:hover figure{
    height: 100%;
        margin-top: -170px;
}
.teambox figure{
    height: 100%;
}
.teambox .teamname{
    color: var(--blueaccent1, #2F486D);
font-family: var(--Merriweather-font);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
}
.teambox p{
    color: #2F486D;
font-family: var(--Inter-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;

}
.teambox ul{
    display: flex;
    gap: 0 8px;
    padding: 0;
    list-style: none;
    margin-bottom: 0;
}
.teambox ul li{}
.teambox ul li a svg path{
    transition: all .3s linear;
}
.teambox ul li a:hover svg path{
    stroke:#fff
}
.teambox ul li a:hover{
    border-color: #fff;
    color: #fff;
    background-color: #2F486D;
}
.teambox ul li a{

display: flex;
width: 56px;
height: 80px;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 144px;
border: 1px solid var(--blueaccent1, #2F486D);
transition: all .3s linear;
}
.team{
    padding-top: 40px;

}
.team .row{
        gap: 210px 0;
        margin-top: 190px;
}
.slider1  .swiper-pagination{
    display: none;
}
/* Dropdown base */
/* Parent */
.menu .dropdown {
    position: relative;
}

/* Hidden state */
.menu .dropdown-menu {
    display: block; /* important */
    position: absolute;
    max-height: 0;
    top: 40px;
    overflow: hidden;
    opacity: 0;
    width: 100%;

    transform: translateY(-10px);
    transition: 
        max-height 0.4s ease,
        opacity 0.3s ease,
        transform 0.3s ease;

    border: none;
    border-radius: 10px;
    padding: 0;
}

/* Show state */
.menu .dropdown .dropdown-menu{
    padding-left: 20px;

}
.menu .dropdown:hover .dropdown-menu {
    max-height: 300px; /* adjust height */
    opacity: 1;
    transform: translateY(0);
    padding: 10px 10px;
}

/* Items */
.menu .dropdown-menu .dropdown-item {
    padding: 10px 20px;
    transition: all 0.3s ease;
    width: 100%;
}

/* Hover effect */
.menu .dropdown-menu .dropdown-item:hover {
    background: #015190;
    color: #fff;
    transform: translateX(5px);
} 
.dropdown-menu li:last-child{
    margin-bottom: 0;
}   
/* Show animation */
.menu .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Item animation */
.menu .dropdown-menu .dropdown-item {
    transition: all 0.3s ease;
    padding: 2px 0px;
}
.dropdown-toggle::after {
    display: none;
}
.arrow-icon {
    display: inline-flex;
    transition: transform 0.3s ease;
}

/* Rotate on hover */
.menu .dropdown:hover .arrow-icon {
    transform: rotate(180deg);
}

/* Hover effect */
.menu .dropdown-menu .dropdown-item:hover {
    /* background: #015190; */
    background-color: transparent;
    color: #fff;
    transform: translateX(5px);
}
.dropdown-menu{
    background-color: #223148;
    text-align: left;
}
.dropdown-menu li{
    text-align: left;
}
.dropdown-menu li a{
    font-family:var(--BigBang-font);
font-weight: 400;
font-style: Regular;
font-size: 40px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
text-transform: capitalize;
color: #FFFFFF;
text-align: left !important;

}

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

.testimonial-slider .item{}
.testimonial-slider .item .textcard{
    display: flex;
    background-color: #FFFFFF;
    padding: 40px 60px;
    border-radius: 40px;
    gap: 20px;
    transition: all .3s linear;
}
.testimonial-slider .item .textcard .row{
    gap: 30px 0;
}
.testimonial-slider .item .textcard figure{
    width: 100%;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0;
    margin: auto;
}
.testimonial-slider .item .textcard figure img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.testimonial-slider .owl-item.active.center .item .textcard{
    background-color: #223148;
}
.testimonial-slider .owl-item.active.center .item .textcard span{
    color: #FFFFFFB2;
}
.testimonial-slider .owl-item.active.center .item .textcard h4{
    color: #fff;
}
.testimonial-slider .owl-item.active.center .item .textcard p{
    color: #fff;
}
.testimonial-slider .owl-item.active .item .textcard{}
.testimonial-slider .item .textcard .content p{
    font-family: var(--Altone-font);
    font-weight: 500;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 4%;
    text-transform: capitalize;
     transition: all .3s linear;

}
.testimonial-slider .item .textcard .content h4{
    font-family: var(--Altone-font);
font-weight: 400;
font-size: 16px;
line-height: 100%;
letter-spacing: 4%;
text-transform: capitalize;
margin-bottom: 0;
margin-top: 30px;
 transition: all .3s linear;

}
.testimonial-slider .item .textcard .content span{
    font-family: var(--Altone-font);
font-weight: 400;
font-size: 16px;
line-height: 100%;
letter-spacing: 4%;
text-transform: capitalize;
 transition: all .3s linear;

}

.testimonial-section .testimonial-slider .owl-nav{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}
.testimonial-section .testimonial-slider .owl-nav button svg{
 transition: all .3s linear;
}
.testimonial-section .testimonial-slider .owl-nav button:hover svg{
    fill: #fff;
}
.blog-grid .content .btn1,
.likes .btn4{
    height: 45px;
    background-color: transparent;
    font-size: 16px;
}
.sharediv {
    display: flex;
    position: relative;
    justify-content: space-between;
}
.sharediv .share{
}
.sharediv .share h3{}
.sharediv .share ul {
    position: absolute;
    top: 100%;

    display: flex;
    flex-direction: column;

    padding: 0 5px;
    border-radius: 100px;
    background-color: #fff;
    margin-bottom: 0;

    max-height: 0;
    opacity: 0;
    overflow: hidden;

    transform: translateY(10px);

    transition: 
        max-height 0.4s ease,
        opacity 0.3s ease,
        transform 0.3s ease,
        padding 0.3s ease;
}
.sharediv .share ul li{}
.sharediv .share ul li a{
    height: 56px;
    justify-content: center;
    align-items: center;
    width: 56px;
    display: flex;
    border-radius: 100px;
    transition: all .3s linear;
}
.sharediv .share ul li:hover a{
    background-color: #223148;
}
.sharediv .share ul li:hover a svg path{
    fill: #fff;
}
.sharediv .share:hover ul {
    max-height: 300px; /* adjust */
    opacity: 1;
    transform: translateY(0);
    padding: 10px 5px;
}
.imgpopslide{
    z-index: 2000;
}
.imgpopslide .modal-content{
    border-radius: 24px;
    background-color: #223148;
}
.imgpopslide .modal-body{
    position: relative;
    padding: 30px;
}
.imgpopslide .modal-body .btn-close{
    position: absolute;
    right: 20px;
    top: 20px;
    color: #fff;
    /* background-color: #fff; */
    background-image: url(./../img/x.png);
}
.imgpopslide .modal-body figure img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 24px;
}
.imgpopslide .modal-body figure{
    height: 576px;
    width: 100%;
}
.imgpopslide .modal-body h3{
    color: #FFF;
font-family: var(--Merriweather-font);
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
margin-bottom: 12px;
}
.imgpopslide .modal-body  iframe{
    height: 500px;
}
.popimg .popimg{}
.popimg.owl-carousel .owl-dots{
border-radius: 100px;
border: 1px solid #767676;
width: fit-content;
margin: auto;
display: flex;
padding: 10px 16px;
}
.popimg.owl-carousel .owl-nav{
    display: none;
}
.popimg.owl-carousel .owl-dots .owl-dot span{
    background-color: #5A5A5A;
}
.popimg.owl-carousel .owl-dots .owl-dot.active span{
    background-color: #fff;
}

.serviceform.modal{
    z-index: 1160 !important;
}
.serviceform .modal-content{
    border-radius: 24px;
}
.serviceform .modal-body .btn-close{
    position: absolute;
    top: 20px;
    right: 20px;
}
.serviceform .modal-body figure img{
    height: 100%;
    width: 100%;object-fit: cover;
}
.serviceform .modal-body figure {
    height: 100%;
    width: 100%;
    margin-bottom: 0;
}
.serviceform .modal-body{
    position: relative;
    padding: 8px;
}
.popupform{
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: center;
}
.popupform h2{
    color: var(--blueaccent2, #223148);
    font-family: var(--BigBang-font);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
}
.popupform form{
    margin-top: 40px;
}
.popupform form .conbox{
    color: #1E1E1E;
font-family: var(--Altone-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.32px;
text-transform: capitalize;
}
.popupform form .conbox span{
    color: #1E1E1E;
    font-family: var(--Altone-font);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.32px;
    text-transform: capitalize;
}
.popupform form .row{
    gap: 20px 0;
}
.popupform form .conbox input::placeholder{
    
    color: #B3B3B3;
}
.popupform form .conbox input{
    color: #1E1E1E;
    border-radius: 8px;
    border-bottom: 1px solid #757575;
font-family: var(--Altone-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 12px;
letter-spacing: 0.32px;
/* text-transform: capitalize; */
}
.privacy{
    padding: 70px 0;
}
.privacy h3{
    color: var(--blueaccent2, #223148);
font-family: var(--BigBang-font);
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 40px;
margin-bottom: 0;
text-transform: capitalize;
}
.privacy h4{
    color: var(--blueaccent2, #223148);
font-family: var(--BigBang-font);
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: normal;
margin-top: 40px;
margin-bottom: 0;
text-transform: capitalize;
}

.privacy p{
    color: var(--blueaccent2, #223148);
font-family: var(--Altone-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
margin-top: 16px;
margin-bottom: 0;
}

.privacy ul li{
    color: var(--blueaccent2, #223148);
font-family: var(--Altone-font);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
text-transform: capitalize;
margin-top: 8px;
margin-bottom: 0;
}
.breadcrumb h2.blogdetailshed{
    font-size: 84px;
}
.tac .blog-container{
    padding: 0 150px;
}
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px; /* optional spacing */
}

.gallery-grid .gallery-item:nth-child(8n+1) {
    grid-column: span 4;
}
.gallery-grid .gallery-item:nth-child(8n+2) {
    grid-column: span 8;
}
.gallery-grid .gallery-item:nth-child(8n+3) {
    grid-column: span 4;

}
.gallery-grid .gallery-item:nth-child(8n+4) {
    grid-column: span 4;
}
.gallery-grid .gallery-item:nth-child(8n+5) {
    grid-column: span 4;
}
.gallery-grid .gallery-item:nth-child(8n+6) {
    grid-column: span 8;
}
.gallery-grid .gallery-item:nth-child(8n+7) {
    grid-column: span 4;
}
.gallery-grid .gallery-item:nth-child(8n+8) {
    grid-column: span 12;
}
.gallery-grid .gallery-item img{
    height: 400px;
    /* height: 100%; */
    width: 100%;
    object-fit: cover;
    border-radius: 16px;
}



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

#loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #F3EAE0; /* change as per theme */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}





/* Fade out effect */
#loader.fade-out {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}

.invalid-feedback p{
        color: #dc3545;
}

.cards .cardmain img{
    border-radius: 6px;
}

#loadercontact{
    position:fixed;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
    top:0;
    left:0;
    z-index:9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loader-box1{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:#fff;
}