html {
    
    scroll-behavior: smooth;
}



:root{
    --bg-color:#FFEFD6;
    --white-font:#FFFFFF;
    --orange-font:#DD7F24;
    --border-gredient:linear-gradient(90deg, rgba(140,66,29,1) 0%, rgba(251,230,123,1) 33%, rgba(252,251,231,1) 54%, rgba(247,209,78,1) 77%, rgba(212,160,65,1) 100%);
    
    --bg:#FBE2C0;
    --btn-color:#ed8b00;
    /* --btn-color:#ED8B00; */
    --green-shade:#386A42;
    --light-green:#D9FFE1;
    --gray:#808080;
    --dark-gray:#616161; 
    /* --black:#11111f; */
    --black:#0a0a16;
}
* {
    box-sizing: border-box;
    /* font-family: "Nunito", sans-serif; */
    /* font-family: "Montserrat", sans-serif; */
    font-family: "Open Sans", sans-serif;
    /* font-family: "Roboto Slab", serif; */

}
h1,h2,h3{
    font-family: "Roboto Slab", serif;
}
body {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: #FAFAFA;
}

a {
    text-decoration: none;
    color: inherit;
}


h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

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



.container {
    /* max-width: 1140px; */
    margin-inline: auto;
    width: 90%;
}


@media(max-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media(min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media(min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media(min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}
@media (min-width:1300px) {
    .container{
        max-width: 1240px;
    }
}
.heading{
    /* color: var(--orange-font); */
    /* margin-bottom: 20px; */
    font-size: 2.2rem;
}
@media (max-width:768px) {
    .heading{
        font-size: 2.2rem;
    }
}
@media (max-width:500px) {
    .heading{
        font-size: 1.6rem;
    }
}
.primary-btn{
    /* height: 30px; */
    border-radius: 20px;
    padding-inline: 20px;
    padding-block: 7px;
    font-size: inherit;
    background-color: var(--btn-color);
    color: var(--white-font);
    transition: .3s ease;
    border: 1px solid transparent;
    margin-block: 5px;
    /* display: block; */
}
.primary-btn:hover{
    background-color: white;
    color: var(--btn-color);
    border-color: var(--btn-color);
}
.secondary-btn{
    /* height: 30px; */
    border-radius: 20px;
    padding-inline: 20px;
    padding-block: 15px;
    font-size: inherit;
    background-color: transparent;
    color: var(--btn-color);
    transition: .3s ease;
    border: 2px solid var(--btn-color);
    margin-block: 15px;
    /* display: block; */
}
.secondary-btn:hover{
    background-color: var(--btn-color);

    color: var(--white-font);
}
.primary-btn:hover > svg{
    stroke: var(--btn-color);
}
@media (max-width:768px) {
    .primary-btn, .secondary-btn{
        font-size: 12px;
    }
}

/* navbar */
nav{
    /* background-color: var(--black); */
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    /* background-color: whitesmoke; */
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    z-index: 999;

}
nav > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
} 
.logo img{
    width: 100px;
    height: auto;
    object-fit: cover;
    object-position: center;
}
.container-nav{
    width: 95%;
    margin-inline: auto;
}
.logo{
    display: flex;
    align-items: center;
    gap: 40px;
}
.logo h1{
    color: var(--btn-color);
    /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
    letter-spacing: 3px;
    font-size: 20px;
    font-weight:400 ;
    text-align: right;
}
@media screen and (max-width: 768px) {
    .logo h1{
        font-size: 16px;
    }
 
}
.logo h1 span{
    color: var(--white-font);
}
.btns {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btns a{
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    padding-block: 7px;
}
.btns span{
    color: var(--btn-color);
    font-size: 1.2rem;
    font-weight: 800;
}
@media (max-width:992px) {
    nav > div{
        flex-direction: column;
        align-items: center;
    }
    .btns a{
        padding-block: 5px;
        margin-block: 0;
    }
    .btns{
        padding-bottom: 10px;
    }
    .btns span{
        font-size: 16px;
    }
}
@media (max-width:500px) {
    .logo{
        width: 100%;
        justify-content: space-between;
    }
    .logo h1{
        font-size: 16px;
    }
    .btns{
        flex-direction: column;
        gap: 5px;
        width: 100%;
    }
    .btns a{
        width: 100%;
        
    }
    .logo img{
        width: 70px;
    }
   
}
/* navbar end */

/* hero-section */
.hero-section{
    /* background-image:
    url(./assets/house7.jpeg); */
    /* background-image:
    linear-gradient(181deg, rgba(0, 0, 0, 0.887), rgba(0, 0, 0, 0.218)), url(./assets/hero-img.jpg); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-block:10%;
    position: relative;
}
/* .hero-section::before{
    position: absolute;
    content: '';
    width: 50%;
    height: 100%;
    left: 50px;
    transform: translateX(50%);
    top: 0;
    background-image: url(./assets/house8.jpeg);
    background-position: center;

    background-size: cover;
    opacity: 0.3;
    z-index: -1;

} */
video {
    position: absolute;
    top: 0;
    left: 0px;
    width: 100%;
    /* min-width: 100%; */
    min-height: 100%;
    z-index:-100;
    opacity: 0.1;
    object-fit: cover;
  }
.hero-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hero-content{
    width: 50%;
    color: var(--black);
}
.hero-form{
    max-width: 400px;
}
.hero-content h1{
    font-size: 2.5rem;
    line-height: 50px;
    letter-spacing: 3px;
    margin-bottom: 30px;
}
.hero-content h1 span{
    color: var(--btn-color);
}
.hero-content p{
    font-weight: 400;
    line-height: 20px;
    width: 80%;
    margin-bottom: 30px;
    /* text-align: justify; */
}
.hero-content p span{
    font-weight: 700;
}
.hero-content .secondary-btn{
    font-size: 12px;
}
.hero-form form{
    /* background-color: var(--white-font); */
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    color: var(--black);
    border-radius: 20px;
    border: 1px solid rgb(65, 64, 64);
    padding-inline: 20px;
    padding-block: 30px;
    text-align: center;
    /* max-width: 400px; */
}
.hero-form form h2{
    margin-bottom: 10px;
}
.hero-form form h3{
    font-weight: 400;
    margin-bottom: 20px;
}
.hero-form form > div{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: start;
    gap: 5px;
    margin-block: 20px;
}
.hero-form input{
    width: 100%;
    padding-inline:10px;
    padding-block: 10px;
    background-color: transparent;
    outline: none;
    border: none;
    border-bottom: 1px solid rgb(82, 82, 82);
    color: var(--black);
}

.hero-form .primary-btn{
    /* background-color:  green; */
    width: 100%;
}
@media screen and (max-width: 1200px) {
    .hero-content h1{
        font-size: 2rem;
        line-height: 40px;
    }
}
@media (max-width:992px) {
    .hero-section{
        padding-top: 110px;
    }
    .hero-container{
        flex-direction: column;
        gap: 30px;
    }
    .hero-content{
        width: 100%;
        text-align: center;
    }
    .hero-content p{
        margin-inline: auto;
        text-align: center;
        font-size: 12px;
    }
}
@media (max-width:767px) {
    .hero-content h1{
        font-size: 2rem;
        line-height: 40px;
        margin-bottom: 20px;
    }
    .hero-form form h2{
        font-size: 1.1rem;
    }
    .hero-form form h3{
        font-size: 0.8rem;
    }
    .hero-form form > div{
        font-size: 12px;
    }
}
@media (max-width:500px) {
    .hero-section{
        padding-top: 160px;
    }
    .hero-content h1{
        font-size: 1.4rem;
        line-height: 30px;
        margin-bottom: 10px;
    }
}
/* hero-section end */



/*expertise section  */
.expertise-section{
    padding-block: 2%;
    text-align: center;
    background-color: var(--white-font);
}
.expertise-container{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3%;
}
.expertise{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.expertise .img-wrapper img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.expertise .img-wrapper{
    width: 50px;
}
@media (max-width:768px) {
    .expertise{
        font-size: 12px;
    }
    .expertise .img-wrapper{
        width: 30px;
    }
}
@media (max-width:500px) {
    .expertise{
        font-size: 10px;
    }
}


/* cement-section */
.cement-section{
    padding-block: 1%;
    /* background-color: var(--bg); */
}
.cement-container{
    /* width: 90%; */
}
.cement .img-wrapper img{
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
.cement .img-wrapper{
    width: 100%;
    height: 100px;
    /* aspect-ratio: 1/1; */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* cement-section end */

/* why-choose-section */
.why-choose-section{
    /* margin-block: 5%; */
    padding-block: 5%;
    text-align: center;
    background-color: rgb(239, 240, 244);
    
}
.why-choose-wrapper .heading{
    color: var(--black);
}
.why-choose-container{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.svg-container svg{
    width: 50px;
    height: auto;
    fill: var(--dark-gray);
}
.why-choose{
    padding: 20px;
    text-align: center;
    border: 2px solid gray;
    width: 150px;
    aspect-ratio: 1/1;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: .3s ease;
    color: var(--black);
}
.why-choose:hover{
    border: 2px solid var(--btn-color);
    color: var(--btn-color);
}
.why-choose span{
    font-weight: 600;
    margin-top: 10px;
    display: block;
}
.why-choose-section a{
    margin-inline: auto;
    display: inline-block;
    text-align: center;
    margin-top: 50px;
}
@media (max-width:500px) {
    .why-choose-container > div{
        width: calc(50% - 20px)
    }
    .why-choose-container{
        gap: 20px;
    }
}
@media screen and (max-width: 768px) {
    .why-choose span{
        font-size: 12px;
    }
}
/* WHY-CHOOSE-enD */

/* package-section */
.package-section{
    padding-block: 5%;
    /* background-image: url(./assets/brick-wall-painted-white.jpg); */
    /* background-image: url(./assets/white-grunge-brick-wall-background.jpg); */
    /* background-image: url(./assets/white-brick-wall-textures-background.jpg); */
    /* background-image: url(./assets/red-brick-wall-pattern-texture.jpg); */
    /* background-position: center;
    background-repeat: no-repeat;
    background-size: cover; */
    text-align: center;
    
}
.heading + span{
    color: var(--dark-gray);
    font-size: 16px;
}
@media screen and (max-width: 768px) {
    .heading + span{
        font-size: 14px;
    }
}
@media screen and (max-width: 500px) {
    .heading + span{
        font-size: 12px;
    }
    
}
.package-wrapper{
    margin-top: 20px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    
}
.package{
    width: calc(20% - 20px);
    min-width: 250px;
    /* border: 1px solid gray; */
    text-align: center;
    padding: 20px;
    background-color: rgb(255, 255, 255);
    border: 1px solid var(--black);
    transition: .5s ease;
    border-radius: 20px;
}
.package h2{
    font-size: 1.2rem;
}
   
.package .svg-wrapper{
    width: 30%;
    margin-inline: auto;
}
.package .svg-wrapper svg{
    width: 100%;
    height: auto;
    display: inline-block;

}
.third-btn{
    background-color: var(--btn-color);
    padding-block: 10px;
    padding-inline: 20px;
    color: var(--white-font);
    font-weight: 600;
    margin-top: 20px;
    display: inline-block;
    transition: .3s ease;
    border: 1px solid transparent;
}
.third-btn:hover{
    background-color: var(--white-font);
    color: var(--btn-color);
    border-color: var(--btn-color);
}
@media (max-width:767px) {
    .package{
        width: calc(50% - 20px);
        min-width: unset;
    }
    .package .content h2{
        font-size: 1.2rem;
    }
    .package .content h3{
        font-size: 1rem;
    }
}
/* package-section end */

/* interior section */
.interior-section{
    margin-block: 5%;
}
.interior-container{
    text-align: center;
}
.interior-wrapper{
    display: flex;
    gap: 20px;
    margin-top: 3%;
}
.interior{
    width: calc(33.3333% - 20px);
    padding: 25px;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    border: 1px solid rgb(231, 230, 230);
    text-align: left;
}
.interior h2{
    font-size: 1.2rem;
}
.interior p{
    font-size: 1rem;
}

.interior .img-wrapper{
    width: 70px;
    height: auto;
    aspect-ratio: 1/1;
}
.interior .img-wrapper img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.interior .primary-btn{
    display: inline-block;
    width: 100%;
    text-align: center;
    /* font-size: 20px; */
}
.interior p{
    margin-block: 10px;
}
@media (max-width:992px) {
    .interior{
        width: calc(50% - 20px);
        padding: 15px;
    }
    .interior-wrapper{
        flex-wrap: wrap;
        justify-content: center;
    }
    .interior h2{
        font-size: 1rem;
    }
    .interior p{
        font-size: 0.7rem;
        margin: 0;
    }
    .interior .primary-btn{
        font-size: 0.7rem;
        width: fit-content;
        padding-block: 5px;
    }
}
@media (max-width:400px) {
    .interior{
        width: 100%;
    }
}


/* project-section */
.project-section{
    text-align: center;
    padding-block: 3%;
    /* background-color: var(--black); */
    position: relative;
    overflow: hidden;
    opacity: 1;
}
.project-section::before{
    position: absolute;
    content: '';
    width: 50%;
    height: 100%;
    left: 0%;
    top: 0;
    background-image: url(./assets/house6.jpeg);
    background-position: bottom  left;

    background-size: cover;
    opacity: 0.3;
    
    /* transform: rotate(45deg); */
    /* z-index: 1; */
}
.project-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.project-container h1{
    text-align: left;
    width: 40%;
   

}
.project-wrapper{
    width: 60%;
}
.project .img-wrapper img{
    width: 100%;
    aspect-ratio: 1/1;
    height: auto;
    object-fit: cover;
}

.project{
    
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; */

    
    /* margin-inline: 10px; */
}
.project-owner{
    font-size: 14px;
    text-align: left;
    margin-top: 10px;
}
.project-owner h3{
    font-size: 14px;
}

.project-owner span{
    font-size: 12px;
    font-weight: 700;
}

.project > p{
  text-align: left;
  font-size: 10px;
  text-align: justify;
}
.project-wrapper{
    margin-top: 20px;
}


.slider-btn{
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 10px;
    margin-top: 20px;
}
.slider-btn .button-prev, .slider-btn .button-next{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border:1px solid var(--btn-color);
    background-color: var(--white-font);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .3s ease;
}
.slider-btn .button-prev:hover, .slider-btn .button-next:hover{
    background-color: var(--btn-color);
    color: var(--white-font);
}
.slider-btn .button-prev img, .slider-btn .button-next img{
    width: 20px;
    height: 20px;
}
@media (max-width:992px) {
    .project-container{
        flex-direction: column;
    }
    .project-wrapper{
        width: 100%;
    }
    .project-container h1{
        width: 100%;
    }
    .project-section::before{
        display: none;
    }
    
}
/* project-section end */


/* advantages-section */
.advantage-section{
    position: relative;
    /* margin-block:5%; */
    padding-block: 5%;
    /* background-color: var(--bg); */
    text-align: center;
}
.advantage-section::before{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    /* background-image: url(./assets/house4.png); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.2;
    /* z-index: 1; */
}
.advantage-container{
    z-index: 5;
    position: relative;
}

.advantage-wrapper{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-block: 5%;
}
.aarna, .non-aarna{
    width: 50%;
    /* text-align: center; */
}
.advantage-wrapper h2{
    font-size: 1.1rem;
}
.aarna ul, .non-aarna ul{
    padding-left: 20%;
    margin-top: 20px;
}
.aarna li, .non-aarna li{
    display: flex;
    align-items: center;
    gap: 10px;
    /* color: var(--green-shade); */
    font-size: 14px;
    margin-block: 10px;
    text-align: left;
}
.aarna{
    border-right: 2px dotted var(--btn-color);
}
.aarna li img, .non-aarna li img{
    width: 25px;
    height: 25px;
}
@media screen and (max-width: 768px) {
    .aarna ul, .non-aarna ul{
        padding-left: 10%;
    }
}
@media (max-width:100px) {
    .advantage-wrapper{
        flex-direction: column;
        gap: 30px;
    }
    .aarna, .non-aarna{
        width: 100%;
    }
    .aarna{
        border: none;
    }
    
}
@media (max-width:500px) {
    .aarna ul, .non-aarna ul{
        padding-left: 10px;
    }
    .aarna li, .non-aarna li{
        font-size: 10px;
        gap: 5px;
    }
    .advantage-wrapper h2{
        font-size: 0.8rem;
    }
    .aarna li img, .non-aarna li img {
        width: 20px;
        height: 20px;
    }
}
/* advantages-section end */


/* about section */

.about-section{
    /* margin-bottom: 5%; */
    text-align: center;
    padding-block: 5%;
}
.about-section .heading span{
    color: var(--btn-color);
}
.about-container p{
    margin-top: 10px;
    text-align: justify;
}
.about-container .primary-btn{
    margin-top: 30px;
    display: inline-block;
}
.about-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.about-wrapper .img-wrapper img{
    width: 100%;
    height: auto;
    object-fit: cover;
    opacity: 0.6;
}
.about-wrapper .content{
    width: 50%;
    text-align: justify;
}
.about-wrapper .content p{
    line-height: 1.5rem;
    font-size: 16px;
    letter-spacing: 1px;
    
   
}
.about-wrapper .img-wrapper{
    width: 40%;
}
@media (max-width:992px) {
    .about-wrapper{
        flex-direction: column;
    }
    .about-wrapper .content{
        width: 100%;
    }
    .about-wrapper .content p{
        font-size: 12px;
    }
}
@media (max-width:500px) {
    .about-wrapper .img-wrapper{
        width: 80%;
    }
    .about-wrapper .content{
        text-align: center;
    }
   
}
.mission-section{
    margin-bottom: 5%;
    background-color: var(--black);
    padding-block: 5%;
    /* background-color: #231f20; */
}
.mission-container h2{
    color: var(--btn-color);
    text-align: right;
    border-bottom: 1px solid var(--btn-color);
    width: fit-content;
}
.mission{
    

    width: 90%;
    padding-inline: 20px;
    
}
.mission p{
    color: var(--white-font);
    text-align: justify;
    font-size: 16px;
    margin-top: 20px;
}
.vision{
    border-left: 2px dotted var(--btn-color);
}
@media (max-width:992px) {
    .mission-container h2{
        text-align: center;
    }
    .mission-container .about-wrapper{
        flex-direction: column-reverse;
    }
    .mission-container .about-wrapper{
        color: var(--dark-gray);
    }
    .mission{
        border: none;
        margin-top: 20px;
        width: 100%;
        padding-inline: 0;
    }
    .mission p{
        font-size: 12px;
    }
}

/* about section end */

/* steps section */
.steps-section {
    /* background-color: var(--black); */
    
    margin-block: 5%;
}
.steps-heading .heading{
    /* color: var(--white-font); */
}
.steps-heading{
    text-align: center;
    margin-bottom: 20px;
}

.steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    background-color: var(--white-font);
    border-radius: 20px;
}

.steps-card {
    width: 100%;

}

.steps .steps-filter {
    /* padding: 0 15px; */
    /* width: 100%; */
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.steps .steps-filter .filter-item {
    color: var(--black);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    /* border: 1px solid #c0bfbf; */
    line-height: 1.2;
    transition: all 0.3s ease;
    /* width: 220px; */
    height: 50px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    padding-inline: 10px;
    justify-content: center;
    flex-direction: row;
    margin-block: 10px;
    position: relative;
}


.steps .steps-filter .filter-item::after {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: '.';
    color: transparent;
    background: var(--btn-color);
    height: 2px;
    transition: all .3s;
}

.steps .steps-filter .filter-item:hover::after {
    width: 50%;
}

.steps .steps-filter .filter-item.active {
    color: var(--btn-color);
}

.steps .steps-filter .filter-item.active::after {
    width: 50%;

}

.steps-item {
    /* width: calc(100% / 3); */
    /* width: 25%; */
    padding-inline: 50px;
    padding-block: 30px;
}

.steps-item-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.steps-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.steps .steps-item-inner img {
    width: 100%;
}



.steps .steps-item.show {
    animation: fadeIn 0.9s ease;
}


@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.steps .steps-item.hide {
    display: none;
}

/*responsive*/
@media(max-width: 992px) {
    .steps {
        flex-direction: column;
    }

    .steps-card {
        width: 100%;
    }

    .steps .steps-filter {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        column-gap: 10px;
        margin-block: 10px;
    }

}

@media (max-width:600px) {
    .steps-item {
        padding-inline: 20px;
    }
}
@media (max-width:500px) {
    .steps .steps-filter{
        flex-direction: column;
    }
    .left{
        margin-right: auto;
        margin-left: 50px;
    }
    .right{
        margin-left: auto;
        margin-right: 50px;
    }
    .steps .steps-filter .filter-item{
        height: unset;
        padding-bottom: 5px;
    }
}



/* .consultation button {
    margin-inline: auto;
    margin-top: 20px;
    display: block;

} */

.consultation .hero-form {
    margin-inline: auto;
    margin-top: 3%;
    
}
.consultation .hero-form form{
    border: 1px solid gray
}




/* experts container */
.expert .img-wrapper img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.expert .img-wrapper{
    width: 80%;
    margin-inline: auto;
}

/* book with us container */
.book .img-wrapper img{
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
}
.book .img-wrapper{
    width: 50%;
    margin-inline: auto;
}
/* receive plans */
.plans .img-wrapper img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.plans .img-wrapper{
    width: 60%;
    margin-inline: auto;
}
/* key handover */
.handover .img-wrapper img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.handover .img-wrapper{
    width: 80%;
    margin-inline: auto;
}
/* track and transit */
.track .img-wrapper img{
    width: 100%;
    height: auto;
    object-fit: cover;
    border-bottom-left-radius: 30%;
    border-bottom-right-radius: 30%;
}
.track .img-wrapper{
    width: 50%;
    margin-inline: auto;
}

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

/* contact section */
.contact-section{
    text-align: center;
    margin-block: 5%;
    background-color: rgb(239, 240, 244);
    padding-block: 5%;
}
.contact-btns svg{
    width: 25px;
    height: 25px;
    stroke: var(--white-font);
}

.contact-btns a{
    display: flex;
    align-items: center;
    gap: 10px;
}
.contact-btns a img{
    width: 30px;
    height: 30px;
}
.contact-btns{
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}
@media (max-width:500px) {
    .contact-btns{
        flex-direction: column;
        gap: 0px;
        margin-top: 20px;
    }
}

/* faq-section */

.faq-container {
    
    margin: 50px auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.faq-container h1 {
    text-align: center;
    margin-bottom: 20px;
}

.faq {
    margin-bottom: 10px;
}

.faq-question {
    background-color: whitesmoke;
    
    padding: 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    transition: background 0.3s;
}

.faq-question:hover {
    background: rgb(223, 222, 222);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 25px;
    background: #f1f1f1;
    border-left: 2px solid var(--btn-color);
    border-radius: 0 0 4px 4px;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.faq-toggle {
    font-size: 24px;
}
@media screen and (max-width: 768px) {
    .faq-answer {
        font-size: 14px;
    }
    .faq-question {
        font-size: 14px;
    }
}
@media screen and (max-width: 500px) {
    .faq-answer {
        font-size: 12px;
    }
    .faq-question {
        font-size: 12px;
    }
    
}


/*footer  */
footer{
    background-color: var(--black);
     padding-block: 5%;
 }
 
 .footer-container{
     color: lightgray;
 }
 
 .footer-wrapper{
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
 }
 
 .about{
     width: 40%;
     
 }
 .about p{
     text-align: justify;
     width: 100%;
     max-width: 300px;
     font-size: 14px;
 }
 .about img{
     width: 100px;
     height: auto;
     object-fit: cover;
 }
 
 .footer-item h2{
     /* width: min-content; */
     margin-bottom: 10px;
     font-weight: 500;
 }
 .about h2{
     font-size: 2rem;
 }
 .footer-item ul{
     line-height: 2rem;
 }
 .footer-item li a img{
     width: 20px;
     height: auto;
     object-fit: cover;
 }
 .footer-item li a{
     display: flex;
     align-items: center;
     gap: 10px;
     line-height: 1.2rem;
 }
 .footer-item li{
    margin-block: 15px;
 }
 @media (max-width:991px) {
     .footer-wrapper{
         flex-wrap: wrap;
         justify-content: space-between;
         /* flex-direction: row-reverse; */
         row-gap: 50px;
     }
     .footer-item{
         width: 50%;
         flex: 0 0 auto;
 
     }
     
 }
 @media (max-width:767px) {
     .footer-wrapper{
         flex-direction: row;
         justify-content: center;
         text-align: center;
     }
     .footer-item{
         width: 100%;
         text-align: center;
     }
     .about{
         width: 70%;
     }
     .about p {
         margin-inline: auto;
         font-size: 12px;
     }
     .footer-item h2{
         margin-inline: auto;
         /* text-align: center; */
         
     }
     .footer-item ul li a{
         justify-content: center;
         font-size: 12px;
     }
 }
 
 @media (max-width:500px) {
     .about{
         width: 100%;
     }
 }

 /* footer end */


    /* process */
    .process{
        position: relative;
        display: flex;
        justify-content: center;
        margin-top: 40px;

    }
    .process li{
        width: 15%;
        text-align: center;
        font-size: 12px;
        
    }
.process .img-wrapper{
    border-radius: 50%;
    aspect-ratio: 1/1;
    width: 80px;
    background-color: var(--white-font);
    border: 1px solid rgb(188, 188, 188);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    z-index: 3;
    position: relative;
}
.process .img-wrapper img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
.horizontal-line{
    position: absolute;
    width: 70% !important;
    /* z-index: -1; */
    border-top: 2px dashed gray;
    /* left: 50%; */
    /* content: ''; */
    top: 30%;
}
@media (max-width:767px) {
    .process{
        flex-direction: column;
        gap: 20px;
    }
    .horizontal-line{
        border-left: 2px dashed gray;
        height: 90%;
        left: 40px;
        border-top: none;
        top: 10px;
    }
    .process li{
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
        font-size: 12px;
    }
    .process .img-wrapper{
        margin: 0;
    }
}

/* whatsapp button */
.whatsapp-btn{
    border: none;
    background-color: unset;
    position: fixed;
    right: 0;
    bottom: 25%;
    z-index: 10;
    width: 60px;
}
.whatsapp-btn img{
    width: 100%;
    height: auto;
    object-fit: cover;
}
@media screen and (max-width: 768px) {
    .whatsapp-btn{
        width: 40px;
    }
}

/* scroll animation */
.js-scroll {
    opacity: 0;
    transition: opacity 500ms;
    overflow: hidden;
  }
  
  .js-scroll.scrolled {
    opacity: 1;
  }
  
  .scrolled.fade-in {
    animation: fade-in 1s ease-in-out both;
  }
  .scrolled.fade-in-bottom {
    animation: fade-in-bottom 1s ease-in-out both;
  }
  
  
  .scrolled.slide-left {
    animation: slide-in-left 1s ease-in-out both;
  }
  
  .scrolled.slide-right {
    animation: slide-in-right 1s ease-in-out both;
  }

  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }  

  @keyframes fade-in-bottom {
    0% {
      -webkit-transform: translateY(50px);
      transform: translateY(50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-left {
    0% {
      -webkit-transform: translateX(-100px);
      transform: translateX(-100px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes slide-in-right {
    0% {
      -webkit-transform: translateX(100px);
      transform: translateX(100px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }
  }