:root{
    --dark-black: #000000;
    --gray-cyan: #284444;
    --dark-gray: #545454;
    --light-gold: #a08963;
    --gray: #a6a6a6;
    --light-gray: #d9d9d9;
    --bright-gray: #e7e9ec;
    --white: #fff;
}

*{
    margin: 0;
    padding: 0;
}

html, body{
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
}

a{
    text-decoration: none;
}

.header{
    background-image: url(header-bg.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
}

    header{
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 999; 
    }

    .logo img{
        height: auto;
        width: 14vw;
    }

    .nav__list{
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    header ul li{
        position: relative;
        list-style: none;
    }

    .nav__link{
        position: relative;
        text-decoration: none;
        color: var(--light-gray);
        margin: 0 23px;
        font-size: 1.2vw;
        transition: 0.3s;
    }

    .nav__link:hover{
        color: var(--white);
    }

    .nav-button{
        padding: 1rem 2rem;
        border: none;
        border-radius: 2rem;
        z-index: 1;
        background: var(--light-gold);
        color: var(--white);
        position: relative;
        font-weight: 600;
        font-size: 1.2vw;
        -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
        box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
        transition: all 250ms;
        overflow: hidden;
        cursor: pointer;
        font-family: 'Poppins', sans-serif;
    }

    .nav-button a{
        color: var(--white);
        text-decoration: none;
    }

    .nav-button:hover a{
        color: var(--dark-black)
    }

    .nav-button::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0;
        background-color: var(--white);
        z-index: -1;
        -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
        box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
        transition: all 250ms
    }

    .nav-button:hover {
        color: var(--dark-black);
    }

    .nav-button:hover::before {
        width: 100%;
    }

    .nav__toggle,
    .nav__close{
        display: none;
    }

.dropdown{
  position: relative;
}

.dropdown-menu{
  display: none;
  list-style: none;
  padding-left: 1rem;
}

.dropdown-menu li a{
  display: block;
  padding: 0.7rem 0;
  color: var(--light-gray);
  font-size: 1.1vw;
}

@media (min-width: 1024px) {
  .dropdown{
    position: relative;
  }

  .dropdown-menu{
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 250px;
    background-color: rgba(160, 137, 99, 1);
    padding: 0.5rem 0;
    border-radius: 4px;
    z-index: 999;
  }

  .dropdown:hover .dropdown-menu{
    display: block;
  }
}


    @media (max-width: 1024px){
        .nav-button{
            display: none;
        }
        .nav__menu{
            position: fixed;
            top: -100%;
            left: 0;
            width: 100%;
            background: rgba(160, 137, 99, 0.4);
            backdrop-filter: blur(12px); 
            box-shadow: -10px 0 10px rgba(0, 0, 0, 0.2); 
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            padding-block: 4.5rem 3.5rem;
            z-index: 100;
            transition: top 1s;
        }
        .nav__list{
            display: flex;
            flex-direction: column;
            row-gap: 2.5rem;
            text-align: center;
        }
        .nav__link{
            color: var(--white);
        }
        .nav__link:hover{
            color: var(--white);
        }
        .nav__close{
            position: absolute;
            top: 1.15rem;
            right: 1.5rem;
        }
        .show-menu{
            top: 0;
        }
        .fa-bars{
            margin-right: 1rem;
        }
        .nav__toggle{
            font-size: 1.5rem;
            color: var(--white);
            cursor: pointer;
            display: block;
        }
        .nav__close{
            font-size: 1.5rem;
            color: var(--white);
            cursor: pointer;
            display: block;
        }
    }

@media (min-width: 800px) and (max-width: 1024px){
    header{
        padding: 10px 15px;
    }
    .dropdown-menu{
        padding-left: 0;
    }
    .dropdown-menu li:nth-child(1){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(2){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(3){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(4){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(5){
        margin-top: 2rem;
    }
    .dropdown-menu li a{
        font-size: 1.9vw;
        padding: 0;
        color: var(--white);
    }
    .logo img{
        width: 19vw;
    }
    .nav__link{
        font-size: 1.9vw;
    }
    .fa-bars{
        font-size: 3vw;
    }
}

@media (max-width: 800px){
    header{
        padding: 10px 10px;
    }
}

@media (min-width: 600px) and (max-width: 800px) {
   .logo img{
        width: 24vw;
    }
    .nav__link{
        font-size: 2.3vw;
    }
    .fa-bars{
        font-size: 4.2vw;
    }
    .dropdown-menu{
        padding-left: 0;
    }
    .dropdown-menu li:nth-child(1){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(2){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(3){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(4){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(5){
        margin-top: 2rem;
    }
    .dropdown-menu li a{
        font-size: 2.3vw;
        padding: 0;
        color: var(--white);
    }
}

@media (min-width: 500px) and (max-width: 600px){
    .header{
        height: 80vh;
    }
    .logo img{
        width: 29vw;
    }
    .nav__link{
        font-size: 3.1vw;
    }
    .fa-bars{
        font-size: 5.8vw;
    }.dropdown-menu{
        padding-left: 0;
    }
    .dropdown-menu li:nth-child(1){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(2){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(3){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(4){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(5){
        margin-top: 2rem;
    }
    .dropdown-menu li a{
        font-size: 3.1vw;
        padding: 0;
        color: var(--white);
    }
}

@media (max-width: 500px){
    .header{
        height: 80vh;
    }
    .logo img{
        width: 34vw;
    }
    .nav__toggle{
        font-size: 1.4rem;
    }
    .fa-bars{
        margin-right: 1rem;
    }
    .nav__link{
        font-size: 3.7vw;
    }
    .fa-bars{
        font-size: 6.3vw;
    }.dropdown-menu{
        padding-left: 0;
    }
    .dropdown-menu li:nth-child(1){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(2){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(3){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(4){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(5){
        margin-top: 2rem;
    }
    .dropdown-menu li a{
        font-size: 3.7vw;
        padding: 0;
        color: var(--white);
    }
}

@media (max-width: 400px){
    .header{
        height: 80vh;
    }
    .logo img{
        width: 39vw;
    }
    .nav__link{
        font-size: 4.2vw;
    }
    .fa-bars{
        font-size: 8.2vw;
    }.dropdown-menu{
        padding-left: 0;
    }
    .dropdown-menu li:nth-child(1){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(2){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(3){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(4){
        margin-top: 2rem;
    }
    .dropdown-menu li:nth-child(5){
        margin-top: 2rem;
    }
    .dropdown-menu li a{
        font-size: 4.2vw;
        padding: 0;
        color: var(--white);
    }
}

.main-textbox{
    top: 23%;
    position: relative;
    left: 6%;
}

.main-textbox h1{
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
    color: var(--white);
    font-size: 4vw;
    font-weight: 300;
}

.main-textbox h1 b{
    font-weight: 700;
}

@media (min-width: 800px) and (max-width: 1024px){
    .main-textbox h1{
        font-size: 5vw;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .main-textbox h1{
        font-size: 6.2vw;
    }
}

@media (min-width: 450px) and (max-width: 600px){
    .main-textbox h1{
        font-size: 7.3vw;
    }
}

@media (max-width: 450px){
    .main-textbox{
        margin-right: 10%;
    }
    .main-textbox h1{
        font-size: 8.3vw;
    }
}

.about-con{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-left: 8%;
    padding: 5% 0;
}

.about-textbox{
    flex-basis: 54%;
}

.about-head-h{
    color: var(--gray-cyan);
    font-size: 3.5vw;
    font-weight: 300;
}

.about-head-h b{
    font-weight: 700;
}

.about-textbox p{
    color: var(--dark-gray);
    font-size: 1.2vw;
}

.about-btns{
    margin-top: 2rem;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 2rem;
}

.about-btn1{
    color: var(--gray-cyan);
    background: transparent;
    border: none;
    font-size: 1.2vw;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
}

.about-btn1:hover{
    letter-spacing: 1px;
}

.about-btn2{
    padding: .8rem 2rem;
    border: none;
    border-radius: 2rem;
    z-index: 1;
    color: var(--white);
    background: var(--gray-cyan);
    position: relative;
    font-weight: 600;
    font-size: 1.2vw;
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
    box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
    transition: all 250ms;
    overflow: hidden;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

.about-btn2 a{
    color: var(--white);
    text-decoration: none;
}

.about-btn2:hover a{
    color: var(--dark-black);
}

.about-btn2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: var(--light-gray);
    z-index: -1;
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    transition: all 250ms
}

.about-btn2:hover {
    color: var(--dark-black);
}

.about-btn2:hover::before {
    width: 100%;
}

.about-pic img{
    display: block;
    height: auto;
    width: 17vw;
}

@media (min-width: 800px) and (max-width: 1024px){
    .about-textbox{
        flex-basis: 60%;
    }
    .about-head-h{
        font-size: 4.7vw;
    }
    .about-textbox p{
        font-size: 1.4vw;
    }
    .about-btn1{
        font-size: 1.4vw;
    }
    .about-btn2{
        font-size: 1.4vw;
    }
    .about-pic img{
        width: 21vw;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .about-textbox{
        flex-basis: 67%;
    }
    .about-head-h{
        font-size: 5vw;
    }
    .about-textbox p{
        font-size: 1.7vw;
    }
    .about-btn1{
        font-size: 1.7vw;
    }
    .about-btn2{
        font-size: 1.7vw;
    }
    .about-pic img{
        width: 25vw;
    }
}

@media (min-width: 450px) and (max-width: 600px){
    .about-con{
        padding: 9% 0;
        margin-left: 7%;
    }
    .about-textbox{
        flex-basis: 67%;
    }
    .about-head-h{
        font-size: 6.5vw;
    }
    .about-textbox p{
        font-size: 2.1vw;
    }
    .about-btns{
        gap: 1.2rem;
    }
    .about-btn1{
        font-size: 2.1vw;
    }
    .about-btn2{
        font-size: 2.1vw;
    }
    .about-pic img{
        width: 29vw;
    }
}

@media (max-width: 450px){
    .about-con{
        padding: 13% 0;
        margin-left: 7%;
    }
    .about-textbox{
        flex-basis: 67%;
    }
    .about-head-h{
        font-size: 8vw;
    }
    .about-textbox p{
        font-size: 2.9vw;
    }
    .about-btns{
        gap: 1.4rem;
        flex-direction: column;
        align-items: flex-start;
    }
    .about-btn1{
        font-size: 2.9vw;
        padding: 0 2rem;
    }
    .about-btn2{
        font-size: 2.9vw;
    }
    .about-pic img{
        width: 29vw;
    }
}

.sec-three-con{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.sec-pic-b img{
    display: block;
    height: auto;
    width: 47vw;
}

.ser-con{
    display: flex;
    justify-content: center;
    align-items: center;
}

.row-r{
    flex-direction: row-reverse;
}

.ser-text{
    flex-basis: 45%;
    margin: 2rem;
}

.ser-text h2{
    color: var(--dark-black);
    font-size: 1.5vw;
    font-weight: 500;
}

.ser-text p{
    color: var(--dark-gray);
    font-size: 1.2vw;
    margin-top: .6rem;
}

.ser-pic img{
    display: block;
    height: auto;
    width: 26vw;
}

@media (min-width: 800px) and (max-width: 1024px){
    .ser-text{
        margin: 1.8rem;
    }
    .ser-text h2{
        font-size: 1.9vw;
    }
    .ser-text p{
        font-size: 1.4vw;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .sec-three-con{
        flex-direction: column;
        align-items: center;
        margin-top: 10%;
    }
    .sec-pic-b{
        height: 64vh;
        width: 100%;
    }
    .sec-pic-b img{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .ser-con{
        justify-content: flex-end;
    }
    .ser-text{
        flex-basis: 41%;
        margin: 1.8rem;
    }
    .ser-text h2{
        font-size: 2.7vw;
    }
    .ser-text p{
        font-size: 1.8vw;
    }
    .ser-pic img{
        width: 49vw;
    }
}

@media (min-width: 450px) and (max-width: 600px){
    .sec-three-con{
        flex-direction: column;
        align-items: center;
        margin-top: 10%;
    }
    .sec-pic-b{
        height: 50vh;
        width: 100%;
    }
    .sec-pic-b img{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .ser-con{
        justify-content: center;
        flex-direction: column;
    }
    .ser-text{
        margin: 3.8rem 11%;
    }
    .ser-text h2{
        font-size: 3.7vw;
    }
    .ser-text p{
        font-size: 2.3vw;
    }
    .ser-pic{
        height: 40vh;
        width: 100%;
    }
    .ser-pic img{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

@media (max-width: 450px){
    .sec-three-con{
        flex-direction: column;
        align-items: center;
        margin-top: 10%;
    }
    .sec-pic-b{
        height: 40vh;
        width: 100%;
    }
    .sec-pic-b img{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .ser-con{
        justify-content: center;
        flex-direction: column;
    }
    .ser-text{
        margin: 3.8rem 12%;
    }
    .ser-text h2{
        font-size: 4.5vw;
    }
    .ser-text p{
        font-size: 3vw;
    }
    .ser-pic{
        height: 35vh;
        width: 100%;
    }
    .ser-pic img{
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

.service-head{
    text-align: center;
    padding: 5rem 10%;
}

.service-head-h{
    color: var(--gray-cyan);
    font-size: 3.5vw;
    font-weight: 300;
}

.service-head-h b{
    font-weight: 700;
}

.service-head p{
    color: var(--dark-gray);
    font-size: 1.2vw;
}

.services-con{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.4rem;
    margin-bottom: 5rem;
}

.service-col{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
}

.service-pic {
    position: relative;
    overflow: hidden;
    width: 35vw;
    cursor: pointer;
}

.service-pic img {
    display: block;
    height: auto;
    width: 100%;
    border-radius: 1rem;
    filter: brightness(60%);
    transition: filter 0.3s ease;
}

.service-pic:hover img {
    filter: brightness(100%);
}

.service-text {
    position: absolute;
    bottom: 3%;
    left: 0;
    width: 90%;
    padding: 10px 20px;
    color: white;
    text-align: left;
}

.service-text h2{
    color: var(--white);
    font-size: 1.5vw;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

.service-text p{
    color: var(--white);
    font-size: 1.1vw;
    margin-top: .5rem;
}

.service-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 4rem;
}

@media (min-width: 800px) and (max-width: 1024px){
    .service-head{
        padding: 5rem 7%;
    }
    .service-head-h{
        font-size: 4.7vw;
    }
    .service-head p{
        font-size: 1.4vw;
    }
    .services-con{
        gap: .8rem;
    }
    .service-col{
        gap: .8rem;
    }
    .service-pic{
        width: 37vw;
    }
    .service-text h2{
        font-size: 1.9vw;
    }
    .service-text p{
        font-size: 1.4vw;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .service-head{
        padding: 5rem 6%;
    }
    .service-head-h{
        font-size: 6vw;
    }
    .service-head p{
        font-size: 1.8vw;
    }
    .services-con{
        gap: 1rem;
        flex-direction: column;
    }
    .service-col{
        gap: 1rem;
    }
    .service-pic{
        width: 58vw;
        height: 44vh;
    }
    .service-pic img{
        height: 100%;
        object-fit: cover;
    }
    .service-text h2{
        font-size: 2.5vw;
    }
    .service-text p{
        font-size: 1.8vw;
    }
}

@media (min-width: 450px) and (max-width: 600px){
    .service-head{
        padding: 5rem 10%;
    }
    .service-head-h{
        font-size: 7vw;
    }
    .service-head p{
        font-size: 2.3vw;
    }
    .services-con{
        gap: 1rem;
        flex-direction: column;
    }
    .service-col{
        gap: 1rem;
    }
    .service-pic{
        width: 68vw;
        height: 53vh;
    }
    .service-pic img{
        height: 100%;
        object-fit: cover;
    }
    .service-text h2{
        font-size: 3.2vw;
    }
    .service-text p{
        font-size: 2.2vw;
    }
}

@media (max-width: 450px){
    .service-head{
        padding: 5rem 12%;
    }
    .service-head-h{
        font-size: 8vw;
    }
    .service-head p{
        font-size: 3vw;
    }
    .services-con{
        gap: 1rem;
        flex-direction: column;
    }
    .service-col{
        gap: 1rem;
    }
    .service-pic{
        width: 70vw;
        height: 49vh;
    }
    .service-pic img{
        height: 100%;
        object-fit: cover;
    }
    .service-text h2{
        font-size: 3.9vw;
    }
    .service-text p{
        font-size: 2.9vw;
    }
}

.projects-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5% 8%;
    flex-wrap: wrap;
}

.projects-head-h{
    color: var(--gray-cyan);
    font-size: 3.5vw;
    font-weight: 300;
}

.projects-head-h b{
    font-weight: 700;
}

.portfolio-con{
    padding-bottom: 6rem;
}

.portfolio-swiper{
    width: 78%;
    position: relative;
    left: 13%;
}

.project-pic{
    display: block;
    height: 57vh;
    width: 25vw;
}

.project-pic img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: .5rem;
}

@media (min-width: 900px) and (max-width: 1100px){
    .portfolio-swiper{
        width: 100%;
    }
    .project-pic{
        width: 32vw;
    }
}

@media (min-width: 800px) and (max-width: 1024px){
    .projects-head{
        padding: 5% 7% 10% 7%;
    }
    .projects-head-h{
        font-size: 4.2vw;
    }
}

@media (min-width: 600px) and (max-width: 900px){
    .portfolio-swiper{
        width: 93%;
    }
    .project-pic{
        width: 44vw;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .projects-head{
        padding: 5% 5% 11% 5%;
    }
    .projects-head-h{
        font-size: 5vw;
    }
}

@media (min-width: 480px) and (max-width: 600px){
    .portfolio-con{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .portfolio-swiper{
        width: 66%;
        left: 0;
    }
    .project-pic{
        width: 100%;
    }
    .projects-head{
        padding: 5% 5% 16% 5%;
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        justify-content: center;
    }
    .projects-head-h{
        font-size: 6.3vw;
    }
}

@media (max-width: 480px){
    .portfolio-con{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .portfolio-swiper{
        width: 75%;
        left: 0;
    }
    .project-pic{
        width: 100%;
    }
    .projects-head{
        padding: 5% 5% 16% 5%;
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        justify-content: center;
    }
    .projects-head-h{
        font-size: 7.3vw;
    }
}

.footer{
    background: var(--light-gold);
}

.footer-links{
    padding-top: 7rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 5rem;
}

.footer-link{
    flex-basis: 20%;
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
}

.footer-ul-h1{
    color: var(--white);
    font-size: 1.5rem;
}

.footer-link ul{
    list-style-type: none;
}

.footer-link ul li a{
    text-decoration: none;
    color: var(--white);
    transition: all 0.5s ease;
}

.footer-link ul li .foot-hover:hover{
    letter-spacing: 2px;
}

.footer-link ul li{
    font-size: .75rem;
    margin-top: .75rem;
}

.footer-link ul li:hover{
    color: var(--white);
}

.fa-chevron-right{
    color: var(--white);
    margin-right: 1rem;
}

.foot-mar{
    margin-right: 1rem;
    color: var(--white);
}

.fa-brands{
    font-size: 1.1rem;
}

.fl-footer{
    display: flex;
    justify-content: start;
    align-items: center;
}

.footer-panel{
    background: var(--dark-black);
    color: var(--white);
    padding:  1.8rem 0;
    font-weight: 500;
    font-size: .85rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-panel p{
    margin: 0 1rem;
}

.footer-panel p a{
    text-decoration: none;
    color: var(--white);
    font-weight: 700;
}

@media (min-width: 600px) and (max-width: 1024px){
    .footer-text{
        margin-left: 2rem;
    }
    .footer-h1{
        margin-left: 2rem;
        font-size: 2rem;
    }
    .footer-link{
        flex-basis: 40%;
        margin-bottom: 2rem;
        margin-right: 1rem;
    }
    .footer-ul-h1{
        font-size: 1.1rem;
    }
}


@media (max-width: 600px){
    .footer-text{
        margin-left: 0;
    }
    .footer-text .small{
        margin-left: 1.5rem;
    }
    .footer-h1{
        margin-left: 2rem;
        font-size: 1.5rem;
    }
    .footer-link{
        flex-basis: 80%;
        margin-bottom: 2rem;
        margin-right: 1rem;
    }
    .footer-ul-h1{
        font-size: 1rem;
    }
    .footer-link ul li{
        font-size: .65rem;
    }
    .footer-link p{
        font-size: .65rem;
    }
    .footer-panel{
        padding: 1.4rem 0;
        font-size: .65rem;
    }
}

.socials {
    display: flex;
    align-items: center;
    margin: 1rem 0 0 0.45rem;
}

.social {
    border: 1px solid var(--white);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex; 
    justify-content: center;
    align-items: center;
    margin-right: 1rem; 
}

.social a {
    text-decoration: none;
    color: var(--white);
    font-size: 18px;
    transition: 0.5s;
}

.social a i{
    margin-right: 0;
}

.hidden {
    opacity: 0;
    transition: opacity 1.5s ease, transform 1.5s ease;
}

.from-left {
    transform: translateX(-150px);
}

.from-left.show {
    transform: translateX(0);
    opacity: 1;
}

.from-right {
    transform: translateX(150px);
}

.from-right.show {
    transform: translateX(0);
    opacity: 1;
}

.from-bottom {
    transform: translateY(150px);
}

.from-bottom.show {
    transform: translateY(0);
    opacity: 1;
}

.from-top {
    transform: translateY(-150px);
}

.from-top.show {
    transform: translateY(0);
    opacity: 1;
}

.sep-header{
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

.renovation-page{
    background-image: url(renovation-page-bg.jpg);
}

.pool-page{
    background-image: url(pool-page-bg.jpg);
}

.gypsum-page{
    background-image: url(ceiling-page-bg.jpg);
}

.bathroom-page{
    background-image: url(bathroom-page-bg.jpg);
}

.mep-page{
    background-image: url(mep-page-bg.jpg);
}

.about-page{
    background-image: url(about-page-bg.jpg);
}

.contact-page{
    background-image: url(contact-page-bg.jpg);
}

.services-page{
    background-image: url(services-page-bg.jpg);
}

.projects-page{
    background-image: url(projects-page-bg.jpg);
}

.page-links{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    top: 24%;
    left: 7%;
    margin-right: 25%;
}

.page-links ul{
    display: flex;
    align-items: baseline;
    justify-content: center;
    list-style-type: none;
    color: var(--light-gray);
    margin-left: .5rem;
}

.page-links ul li a{
    text-decoration: none;
    color: var(--white);
    font-size: 1.1vw;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
}

.page-link span{
    margin: 0 .55rem;
    font-size: 1.1vw;
}

.page-links h1{
    color: var(--white);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
    font-size: 3.5vw;
}

.page-links p{
    color: var(--white);
    font-size: 1.2vw;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
}

@media (min-width: 800px) and (max-width: 1024px){
    .page-links{
        left: 6%;
        top: 20%;
    }
    .page-links ul li a{
        font-size: 1.4vw;
    }
    .page-link span{
        font-size: 1.4vw;
    }
    .page-links h1{
        font-size: 4.5vw;
    }
    .page-links p{
        font-size: 1.5vw;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .page-links{
        left: 6%;
        top: 20%;
    }
    .page-links ul li a{
        font-size: 1.8vw;
    }
    .page-link span{
        font-size: 1.8vw;
    }
    .page-links h1{
        font-size: 6vw;
    }
    .page-links p{
        font-size: 1.9vw;
    }
}

@media (min-width: 420px) and (max-width: 600px){
    .sep-header{
        height: 80vh;
    }
    .page-links{
        left: 6%;
        top: 16%;
        margin-right: 20%;
    }
    .page-links ul li a{
        font-size: 2.4vw;
    }
    .page-link span{
        font-size: 2.4vw;
    }
    .page-links h1{
        font-size: 7.7vw;
    }
    .page-links p{
        font-size: 2.5vw;
    }
}

@media (max-width: 420px){
    .sep-header{
        height: 80vh;
    }
    .page-links{
        left: 6%;
        top: 16%;
        margin-right: 18%;
    }
    .page-links ul li a{
        font-size: 3.1vw;
    }
    .page-link span{
        font-size: 3.1vw;
    }
    .page-links h1{
        font-size: 9vw;
    }
    .page-links p{
        font-size: 3.1vw;
    }
}

.sepser-main-con{
    padding: 7rem 10%;
    text-align: center;
    display: flex ;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sepser-main-h{
    color: var(--gray-cyan);
    font-size: 2.5vw;
}

.sepser-main-con p{
    color: var(--dark-gray);
    font-size: 1.2vw;
    margin-top: .5rem;
}

.sepser-main-con h2{
    color: var(--light-gold);
    font-size: 1.8vw;
    margin-top: 1rem;
}

.sepser-btns{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.sepser-btn{
    padding: .8rem 2rem;
    border: none;
    border-radius: 2rem;
    color: var(--white);
    z-index: 1;
    background: var(--light-gold);
    position: relative;
    font-weight: 600;
    font-size: 1.2vw;
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
    box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
    transition: all 250ms;
    overflow: hidden;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

.sepser-btn a{
    color: var(--white);
}

.sepser-btn:hover a{
    color: var(--dark-black);
}

.sepser-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: var(--light-gray);
    z-index: -1;
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    transition: all 250ms
}

.sepser-btn:hover {
    color: var(--dark-black);
}

.sepser-btn:hover::before {
    width: 100%;
}

.sepser-pic img{
    display: block;
    height: auto;
    width: 76vw;
    margin-top: 5rem;
}

@media (min-width: 800px) and (max-width: 1024px){
    .sepser-main-h{
        font-size: 3.1vw;
    }
    .sepser-main-con p{
        font-size: 1.4vw;
    }
    .sepser-main-con h2{
        font-size: 2.5vw;
    }
    .sepser-btn{
        font-size: 1.4vw;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .sepser-main-con{
        padding: 6rem 8%;
    }
    .sepser-main-h{
        font-size: 3.8vw;
    }
    .sepser-main-con p{
        font-size: 1.7vw;
    }
    .sepser-main-con h2{
        font-size: 3vw;
    }
    .sepser-btn{
        font-size: 1.7vw;
    }
    .sepser-pic img{
        width: 80vw;
        margin-top: 4rem;
    }
}

@media (min-width: 450px) and (max-width: 600px){
    .sepser-main-con{
        padding: 6rem 8%;
    }
    .sepser-main-h{
        font-size: 4.4vw;
    }
    .sepser-main-con p{
        font-size: 2.4vw;
    }
    .sepser-main-con h2{
        font-size: 3.6vw;
    }
    .sepser-btn{
        font-size: 2.4vw;
    }
    .sepser-pic img{
        width: 80vw;
        margin-top: 4rem;
    }
}

@media (max-width: 450px){
    .sepser-main-con{
        padding: 6rem 8%;
    }
    .sepser-main-h{
        font-size: 5.8vw;
    }
    .sepser-main-con p{
        font-size: 3.1vw;
    }
    .sepser-main-con h2{
        font-size: 4.6vw;
    }
    .sepser-btns{
        gap: 1rem;
        flex-direction: column;
    }
    .sepser-btn{
        font-size: 3.1vw;
    }
    .sepser-pic img{
        width: 80vw;
        margin-top: 4rem;
    }
}

.swiper-head{
    color: var(--gray-cyan);
    text-align: center;
    margin-bottom: 1rem;
}

.swiper-head p{
    font-size: 1.6vw;
}

.swiper-head-h{
    font-size: 2.8vw;
}

.renovation-swiper{
    width: 100%;
    height: 100vh;
    position: relative;
}

.swiper-wrapper{
    width: 100% !important;
}

.slide-1{
    background-image: url(swiper-sep-pic1.jpg);
}

.slide-2{
    background-image: url(swiper-sep-pic2.jpg);
}

.slide-3{
    background-image: url(swiper-sep-pic3.jpg);
}

.slide-4{
    background-image: url(swiper-sep-pic4.jpg);
}

.slide-5{
    background-image: url(swiper-sep-pic5.jpg);
}

.slide-6{
    background-image: url(swiper-sep-pic6.jpg);
}

.renovation-swiper .swiper-slide {
    width: 100% !important;
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: start;
    background-size: cover;
    background-position: center;
}

.swiper-text{
    position: relative;
    left: 10%;
    margin-right: 30%;
}

.swiper-text h2{
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    color: var(--white);
    font-size: 2.5vw;
}

.swiper-text p{
    color: var(--white);
    font-size: 1.2vw;
    margin-top: .5rem;
}

.renovation-swiper .swiper-button-prev,
.renovation-swiper .swiper-button-next {
    width: 45px !important;
    height: 45px !important;
    background-size: cover;
    background-position: center;
    color: transparent !important;
}

.renovation-swiper .swiper-button-prev {
    background-image: url('arrow-left.png');
}

.renovation-swiper .swiper-button-next {
    background-image: url('arrow-right.png');
}
    
.custom-pagination {
    position: absolute;
    bottom: 30px;
    width: 100%;
}

.steps-wrapper {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-top: 40px;
}
 
.progress-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    height: 2px;
    background: var(--light-gold);
    z-index: 1;
}

.progress-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 5px;
    transform: translateY(-50%);
    background: var(--light-gold);
    transition: width 0.3s ease;
    z-index: 2;
}
 
.step {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    flex: 1;
    position: relative;
    z-index: 3;
}
 
.step .dot {
    width: 14px;
    height: 14px;
    background: var(--light-gold);
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.step.active .dot {
    border: 2px solid white;
    background: white;
}
    
.step .label {
    margin-bottom: 5px;
    font-size: 1.1vw;
    font-weight: 400;
}

.step .number {
    margin-top: 5px;
    font-size: 1.1vw;
    font-weight: 400;
}
 
.step.active {
    color: #fff;
    font-weight: bold;
}

@media (min-width: 800px) and (max-width: 1024px){
    .swiper-head p{
        font-size: 2.2vw;
    }
    .swiper-head-h{
        font-size: 3.5vw;
    }
    .swiper-text{
        margin-right: 27%;
    }
    .swiper-text h2{
        font-size: 3.2vw;
    }
    .swiper-text p{
        font-size: 1.4vw;
    }
    .renovation-swiper .swiper-button-prev,
    .renovation-swiper .swiper-button-next{
        width: 50px !important;
        height: 50px !important;
    }
    .step .label{
        font-size: 1.3vw;
    }
    .step .number{
        font-size: 1.3vw;
    }
    .step .dot{
        width: 15px;
        height: 15px;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .swiper-head p{
        font-size: 3vw;
    }
    .swiper-head-h{
        font-size: 4.2vw;
    }
    .swiper-text{
        margin-right: 27%;
        left: 13%;
    }
    .swiper-text h2{
        font-size: 4.5vw;
    }
    .swiper-text p{
        font-size: 1.7vw;
    }
    .renovation-swiper .swiper-button-prev,
    .renovation-swiper .swiper-button-next{
        width: 50px !important;
        height: 50px !important;
    }
    .step .label{
        font-size: 1.7vw;
    }
    .step .number{
        font-size: 1.7vw;
    }
    .step .dot{
        width: 15px;
        height: 15px;
    }
}

@media (min-width: 470px) and (max-width: 600px){
    .swiper-head p{
        font-size: 3.8vw;
    }
    .swiper-head-h{
        font-size: 5vw;
    }
    .swiper-text{
        margin-right: 25%;
    }
    .swiper-text h2{
        font-size: 5.7vw;
    }
    .swiper-text p{
        font-size: 2.2vw;
    }
    .renovation-swiper .swiper-button-prev,
    .renovation-swiper .swiper-button-next{
        display: none;
    }
    .custom-pagination{
        bottom: 50px;
    }
    .step .label{
        display: none;
    }
    .step .number{
        display: none;
    }
    .step .dot{
        width: 15px;
        height: 15px;
    }
}

@media (max-width: 470px){
    .swiper-head p{
        font-size: 4.5vw;
    }
    .swiper-head-h{
        font-size: 6vw;
    }
    .swiper-text{
        margin-right: 20%;
    }
    .swiper-text h2{
        font-size: 7.2vw;
    }
    .swiper-text p{
        font-size: 3vw;
    }
    .renovation-swiper .swiper-button-prev,
    .renovation-swiper .swiper-button-next{
        display: none;
    }
    .custom-pagination{
        bottom: 50px;
    }
    .step .label{
        display: none;
    }
    .step .number{
        display: none;
    }
    .step .dot{
        width: 15px;
        height: 15px;
    }
}

.ser-projects-sec{
    background-image: url(projects-bg.jpg);
    background-size: cover;
    background-position: center;
}

.ser-projects-head{
    color: var(--gray-cyan);
    text-align: center;
    padding: 5rem 10%;
}

.ser-projects-head p{
    font-size: 1.7vw;
}

.ser-project-h{
    font-size: 2.7vw;
}

.ser-projects-con{
    padding-bottom: 5rem;
}

.project-swiper .swiper-slide{
    padding: 0 7%;
    flex-shrink: unset;
}

.ser-project-pic{
    display: block;
    height: 50vh;
    width: 43vw;
    cursor: pointer;
}

.ser-project-pic img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.image-modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.8);
    animation: fadeIn 0.5s ease-in-out;
    justify-content: center;
    align-items: center;
}

.image-modal img {
    max-width: 80vw;
    max-height: 80vh;
    border-radius: 1rem;
    animation: zoomIn 0.2s ease-in-out;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
    transition: transform 0.3s ease-in-out;
}

.close-modal {
    position: absolute;
    top: 1rem;
    right: 3rem;
    font-size: 3rem;
    color: white;
    cursor: pointer;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from { transform: scale(0.5); }
    to { transform: scale(1); }
}

@media (min-width: 800px) and (max-width: 1024px){
    .ser-projects-head p{
        font-size: 2.3vw;
    }
    .ser-project-h{
        font-size: 3.3vw;
    }
    .project-swiper .swiper-slide{
        padding: 0 12%;
    }
    .ser-project-pic{
        height: 46vh;
        width: 52vw;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .ser-projects-head p{
        font-size: 3vw;
    }
    .ser-project-h{
        font-size: 4vw;
    }
    .ser-project-pic{
        height: 45vh;
        width: 57vw;
    }
}

@media (min-width: 480px) and (max-width: 600px){
    .ser-projects-head p{
        font-size: 3.8vw;
    }
    .ser-project-h{
        font-size: 5vw;
    }
    .project-swiper .swiper-slide{
        padding: 0 3%;
    }
    .ser-project-pic{
        height: 45vh;
        width: 64vw;
    }
}

@media (max-width: 480px){
    .ser-projects-head p{
        font-size: 4.6vw;
    }
    .ser-project-h{
        font-size: 6.2vw;
    }
    .project-swiper .swiper-slide{
        padding: 0 2%;
    }
    .ser-project-pic{
        height: 45vh;
        width: 68vw;
    }
}

.whyus-head{
    padding: 5rem 9%;
}

.whyus-head-h{
    color: var(--gray-cyan);
    font-size: 3.2vw;
}

.whyus-head p{
    color: var(--dark-gray);
    font-size: 1.2vw;
}

.whyus-con{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 1.3rem;
    padding-bottom: 5rem;
}

.whyus-el{
    flex-basis: 15%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.whyus-icon{
    background: var(--bright-gray);
    height: 90px;
    width: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.whyus-icon img{
    display: block;
    height: auto;
    width: 4vw;
}

.whyus-el h2{
    color: var(--dark-gray);
    font-size: 1.5vw;
    margin-top: 1rem;
}

.whyus-el p{
    color: var(--dark-gray);
    font-size: 1.1vw;
    margin-top: .4rem;
}

@media (min-width: 800px) and (max-width: 1024px){
    .whyus-head{
        padding: 5rem 10% 5rem 8%;
    }
    .whyus-head-h{
        font-size: 3.9vw;
    }
    .whyus-head p{
        font-size: 1.4vw;
    }
    .whyus-con{
        margin: 0 7%;
    }
    .whyus-el{
        flex-basis: 28%;
    }
    .whyus-icon img{
        width: 5.4vw;
    }
    .whyus-el h2{
        font-size: 2.1vw;
    }
    .whyus-el p{
        font-size: 1.3vw;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .whyus-head{
        padding: 5rem 10% 5rem 8%;
    }
    .whyus-head-h{
        font-size: 4.5vw;
    }
    .whyus-head p{
        font-size: 1.7vw;
    }
    .whyus-con{
        margin: 0 6%;
    }
    .whyus-el{
        flex-basis: 31%;
    }
    .whyus-icon img{
        width: 6.6vw;
    }
    .whyus-el h2{
        font-size: 2.5vw;
    }
    .whyus-el p{
        font-size: 1.6vw;
    }
}

@media (min-width: 480px) and (max-width: 600px){
    .whyus-head{
        padding: 5rem 10% 5rem 9%;
    }
    .whyus-head-h{
        font-size: 5.8vw;
    }
    .whyus-head p{
        font-size: 2.2vw;
    }
    .whyus-con{
        margin: 0 17%;
        flex-direction: column;
        gap: 1.8rem;
    }
    .whyus-icon img{
        width: 8.2vw;
    }
    .whyus-el h2{
        font-size: 3.2vw;
    }
    .whyus-el p{
        font-size: 2.1vw;
    }
}

@media (max-width: 480px){
    .whyus-head{
        padding: 5rem 9% 5rem 9%;
    }
    .whyus-head-h{
        font-size: 7.3vw;
    }
    .whyus-head p{
        font-size: 3vw;
    }
    .whyus-con{
        margin: 0 14%;
        flex-direction: column;
        gap: 1.8rem;
    }
    .whyus-icon img{
        width: 10.2vw;
    }
    .whyus-el h2{
        font-size: 4.5vw;
    }
    .whyus-el p{
        font-size: 2.8vw;
    }
}

.about-sep-sec{
    background: var(--bright-gray);
}

.about-sep-con{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 8%;
    padding: 5rem 4% 0 4%;
}

.about-sephead-h{
    color: var(--gray-cyan);
    font-size: 3vw;
    font-weight: 300;
}

.about-sephead-h b{
    font-weight: 700;
}

.about-text-con{
    flex-basis: 35%;
}

.about-text-con h2{
    color: var(--gray-cyan);
    font-size: 2.2vw;
    font-weight: 500;
    margin-top: 1rem;
}

.about-text-con p{
    color: var(--dark-gray);
    font-size: 1.1vw;
    margin-top: .8rem;
}

.about-text-con h3{
    color: var(--dark-gray);
    font-size: 1.3vw;
    margin-top: .7rem;
}

.about-sep-h1{
    padding: 2rem 6% 0 6%;
}

.about-sep-big-h{
    color: rgba(166, 166, 166, 0.5);
    text-transform: uppercase;
    font-size: 9vw;
}

@media (min-width: 800px) and (max-width: 1024px){
    .about-sephead-h{
        font-size: 3.6vw;
    }
    .about-text-con{
        flex-basis: 39%;
    }
    .about-text-con p{
        font-size: 1.4vw;
    }
    .about-text-con h2{
        font-size: 3vw;
    }
    .about-text-con h3{
        font-size: 1.6vw;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .about-sep-con{
        padding: 5rem 9% 0 9%;
        flex-direction: column;
    }
    .about-sephead-h{
        font-size: 5vw;
    }
    .about-text-con p{
        font-size: 1.8vw;
    }
    .about-text-con h2{
        font-size: 3.7vw;
    }
    .about-text-con h3{
        font-size: 2.2vw;
    }
    .about-sep-big-h{
        font-size: 12vw;
    }
}

@media (min-width: 480px) and (max-width: 600px){
    .about-sep-con{
        padding: 5rem 9% 0 9%;
        flex-direction: column;
    }
    .about-sephead-h{
        font-size: 6.4vw;
    }
    .about-text-con p{
        font-size: 2.3vw;
    }
    .about-text-con h2{
        font-size: 4.7vw;
    }
    .about-text-con h3{
        font-size: 3vw;
    }
    .about-sep-big-h{
        font-size: 15vw;
    }
}

@media (max-width: 480px){
    .about-sep-con{
        padding: 5rem 8% 0 8%;
        flex-direction: column;
    }
    .about-sephead-h{
        font-size: 7.7vw;
    }
    .about-text-con p{
        font-size: 3vw;
    }
    .about-text-con h2{
        font-size: 5.7vw;
    }
    .about-text-con h3{
        font-size: 3.8vw;
    }
    .about-sep-h1{
        padding: 2rem 5% 0 5%;
    }
    .about-sep-big-h{
        font-size: 16vw;
    }
}

.vision-con{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 5rem 4%;
    gap: 4%;
}

.vision-text{
    flex-basis: 39%;
}

.vision-h{
    color: var(--gray-cyan);
    font-size: 4vw;
    font-weight: 300;
    margin-bottom: .5rem;
}

.vision-h b{
    font-weight: 700;
}

.vision-text p{
    color: var(--dark-gray);
    font-size: 1.1vw;
}

.vision-text ul{
    margin: .8rem 0;
    display: flex;
    flex-direction: column;
    gap: .8rem;
}

.vision-btn-con{
    margin-top: 1.4rem;
}

.vision-btn{
    padding: .8rem 2rem;
    border: none;
    border-radius: 2rem;
    color: var(--white);
    z-index: 1;
    background: var(--light-gold);
    position: relative;
    font-weight: 600;
    font-size: 1.1vw;
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
    box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
    transition: all 250ms;
    overflow: hidden;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

.vision-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: var(--light-gray);
    z-index: -1;
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    transition: all 250ms
}

.vision-btn:hover {
    color: var(--dark-black);
}

.vision-btn:hover::before {
    width: 100%;
}

.vision-pic img{
    display: block;
    height: auto;
    width: 32vw;
}

@media (min-width: 800px) and (max-width: 1024px){
    .vision-text{
        flex-basis: 42%;
    }
    .vision-h{
        font-size: 5vw;
    }
    .vision-text p{
        font-size: 1.3vw;
    }
    .vision-text ul{
        gap: .6rem;
        margin-top: .6rem 0;
    }
    .vision-btn-con{
        margin-top: 1.1rem;
    }
    .vision-btn{
        font-size: 1.3vw;
    }
    .vision-pic img{
        width: 39vw;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .vision-con{
        padding: 5rem 8%;
        gap: 2rem;
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    .vision-h{
        font-size: 6.3vw;
    }
    .vision-text p{
        font-size: 1.7vw;
    }
    .vision-btn-con{
        margin-top: 1.3rem;
    }
    .vision-btn{
        font-size: 1.7vw;
    }
    .vision-pic{
        height: 47vh;
        width: 71vw;
    }
    .vision-pic img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (min-width: 480px) and (max-width: 600px){
    .vision-con{
        padding: 5rem 8%;
        gap: 2rem;
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    .vision-h{
        font-size: 7.5vw;
    }
    .vision-text p{
        font-size: 2.2vw;
    }
    .vision-btn-con{
        margin-top: 1.3rem;
    }
    .vision-btn{
        font-size: 2.2vw;
    }
    .vision-pic{
        height: 47vh;
        width: 78vw;
    }
    .vision-pic img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 480px){
    .vision-con{
        padding: 5rem 9%;
        gap: 2rem;
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    .vision-h{
        font-size: 8.5vw;
    }
    .vision-text p{
        font-size: 3vw;
    }
    .vision-btn-con{
        margin-top: 1.3rem;
    }
    .vision-btn{
        font-size: 2.9vw;
    }
    .vision-pic{
        height: 40vh;
        width: 78vw;
    }
    .vision-pic img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.aim-con{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2rem 10%;
}

.aim-h{
    color: var(--gray-cyan);
    font-size: 4vw;
    font-weight: 300;
}

.aim-h b{
    font-weight: 700;
}

.accordion{
    border-top: 1px solid #ccc;
    flex-basis: 48%;
}

.accordion-item{
    border-bottom: 1px solid #ccc;
}

.accordion-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    padding: 1.5rem 0;
}
 
.accordion-header h3{
    margin: 0;
    font-size: 1.5vw;
    font-weight: 500;
    color: var(--dark-gray);
    display: flex;
    align-items: center;
    gap: .7rem;
}
 
.accordion-header .toggle-icon{
    font-size: 1.5rem;
    transition: transform 0.3s;
}
 
.accordion-header.active .toggle-icon{
    transform: rotate(45deg);
}
 
.accordion-content{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.3s ease;
}

.accordion-content p{
    color: var(--dark-gray);
    font-size: 1.1vw;
}
 
.accordion-content.active {
    max-height: 200px; 
    padding: 0 0 1rem 0;
}

.number {
    font-weight: 400;
    margin-right: 10px;
    color: var(--dark-gray);
}

@media (min-width: 800px) and (max-width: 1024px){
    .aim-con{
        padding: 2rem 7%;
    }
    .aim-h{
        font-size: 4.6vw;
    }
    .accordion{
        flex-basis: 51%;
    }
    .accordion-header h3{
        font-size: 1.9vw;
    }
    .accordion-content p{
        font-size: 1.4vw;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .aim-con{
        flex-direction: column;
        gap: 2.5rem;
    }
    .aim-h{
        font-size: 6vw;
    }
    .accordion-header h3{
        font-size: 2.6vw;
    }
    .accordion-content p{
        font-size: 1.8vw;
    }
}

@media (min-width: 480px) and (max-width: 600px){
    .aim-con{
        flex-direction: column;
        gap: 2.5rem;
    }
    .aim-h{
        font-size: 7.4vw;
    }
    .accordion-header h3{
        font-size: 3.2vw;
    }
    .accordion-content p{
        font-size: 2.2vw;
    }
}

@media (max-width: 480px){
    .aim-con{
        flex-direction: column;
        gap: 2.5rem;
        padding: 2rem 8%;
    }
    .aim-h{
        font-size: 8.7vw;
    }
    .accordion-header h3{
        font-size: 4vw;
    }
    .accordion-content p{
        font-size: 3vw;
    }
}

.stats-head{
    padding: 4rem 10%;
}

.stats-h{
    color: var(--gray-cyan);
    font-size: 3vw;
    font-weight: 300;
    margin-bottom: .5rem;
}

.stats-h b{
    font-weight: 700;
}

.stats-con{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.8rem;
    padding-bottom: 5rem;
}

.stats-el{
    flex-basis: 25%;
}

.stats-small-h{
    color: var(--gray-cyan);
    font-size: 3vw;
}

.stats-el p{
    color: var(--dark-gray);
    font-size: 1.2vw;
}

@media (min-width: 800px) and (max-width: 1024px){
    .stats-head{
        padding: 4rem 8%;
    }
    .stats-h{
        font-size: 3.8vw;
    }
    .stats-small-h{
        font-size: 3.8vw;
    }
    .stats-el p{
        font-size: 1.4vw;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .stats-head{
        padding: 4rem 8%;
    }
    .stats-h{
        font-size: 5vw;
    }
    .stats-con{
        justify-content: start;
        gap: 2.8rem;
        margin: 0 9%;
    }
    .stats-el{
        flex-basis: 42%;
    }
    .stats-small-h{
        font-size: 4.8vw;
    }
    .stats-el p{
        font-size: 1.8vw;
    }
}

@media (min-width: 480px) and (max-width: 600px){
    .stats-head{
        padding: 4rem 8%;
    }
    .stats-h{
        font-size: 6.1vw;
    }
    .stats-con{
        justify-content: start;
        gap: 2.3rem;
        margin: 0 10%;
        flex-direction: column;
        align-items: flex-start;
    }
    .stats-small-h{
        font-size: 5.8vw;
    }
    .stats-el p{
        font-size: 2.3vw;
    }
}

@media (max-width: 480px){
    .stats-head{
        padding: 4rem 8%;
    }
    .stats-h{
        font-size: 7.1vw;
    }
    .stats-con{
        justify-content: start;
        gap: 2.3rem;
        margin: 0 10%;
        flex-direction: column;
        align-items: flex-start;
    }
    .stats-small-h{
        font-size: 7vw;
    }
    .stats-el p{
        font-size: 3.1vw;
    }
}

.contactinfo-sec{
    background: var(--bright-gray);
}

.contactinfo-con{
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    padding: 5rem 0;
    flex-wrap: wrap;
}

.contactinfo-el{
    flex-basis: 25%;
    border: 2px solid var(--light-gold);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 2rem 1.3rem;
}

.contactinfo-icon img{
    display: block;
    height: auto;
    width: 4vw;
}

.contactinfo-el p{
    color: var(--dark-gray);
    font-size: 1.1vw
}

.contactinfo-el p a{
    text-decoration: none;
    color: var(--dark-gray);
}

@media (min-width: 800px) and (max-width: 1024px){
    .contactinfo-el{
        flex-basis: 22%;
        flex-wrap: wrap;
        flex-direction: column;
        text-align: center;
    }
    .contactinfo-icon img{
        width: 6vw;
    }
    .contactinfo-el p{
        font-size: 1.3vw;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .contactinfo-con{
        gap: .8rem;
        padding: 5rem 5%;
    }
    .contactinfo-el{
        flex-basis: 22%;
        flex-wrap: wrap;
        flex-direction: column;
        text-align: center;
    }
    .contactinfo-icon img{
        width: 8vw;
    }
    .contactinfo-el p{
        font-size: 1.6vw;
    }
}

@media (min-width: 480px) and (max-width: 600px){
    .contactinfo-con{
        padding: 5rem 22%;
        flex-direction: column;
    }
    .contactinfo-el{
        flex-wrap: wrap;
        flex-direction: column;
        text-align: center;
    }
    .contactinfo-icon img{
        width: 11vw;
    }
    .contactinfo-el p{
        font-size: 2.1vw;
    }
}

@media (max-width: 480px){
    .contactinfo-con{
        padding: 5rem 19%;
        flex-direction: column;
    }
    .contactinfo-el{
        flex-wrap: wrap;
        flex-direction: column;
        text-align: center;
    }
    .contactinfo-icon img{
        width: 13vw;
    }
    .contactinfo-el p{
        font-size: 2.8vw;
    }
}

.contactform-con{
    padding-bottom: 5rem;
}

.form-in{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.6rem;
}

.contact-form  .form-input input{
    padding: .7rem 1rem;
    border-radius: .7rem;
    display: block;
    width: 35vw;
    outline: none;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    background: var(--white);
    margin: 1rem 0;
    border: none;
    font-size: 1.1vw;
}

.contact-form textarea{
    height: 9.8rem;
    border: none;
    padding: .7rem 1rem;
    border-radius: .7rem;
    display: block;
    width: 35vw;
    outline: none;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
    background: var(--white);
    margin: .5rem 0;
    font-size: 1.1vw;
}

.form-input{
    position: relative;
}

.form-input input:focus {
    outline: 0;
    border-color: #777;
}

.form-input.success input{
    border: 2px solid var(--success-color);
}

.form-input.error input{
    border: 2px solid var(--error-color);
}

.form-input textarea:focus {
    outline: 0;
    border-color: #777;
}

.form-input.success textarea{
    border: 2px solid var(--success-color);
}

.form-input.error textarea{
    border: 2px solid var(--error-color);
}

.form-input small {
    color: var(--error-color);
    position: absolute;
    bottom: 0;
    left: 0;
    visibility: hidden;
}

.form-input.error small {
    visibility: visible;
}

.form-input.error small{
    visibility: visible;
    color: #A52A2A;
    font-weight: 500;
}

.contactform-btn-con{
    display: flex;
    justify-content: end;
    margin: 1rem 13%;
}

.contactform-btn{
    padding: .8rem 3rem;
    border: none;
    border-radius: 2rem;
    color: var(--white);
    z-index: 1;
    background: var(--gray-cyan);
    position: relative;
    font-weight: 600;
    font-size: 1.1vw;
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
    box-shadow: 4px 8px 19px -3px rgba(0, 0, 0, 0.27);
    transition: all 250ms;
    overflow: hidden;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

.contactform-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: var(--light-gray);
    z-index: -1;
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    transition: all 250ms
}

.contactform-btn:hover {
    color: var(--dark-black);
}

.contactform-btn:hover::before {
    width: 100%;
}

.google-map{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5rem;
}

.google-map iframe{
    width: 54vw;
    height: 40vh;
}

@media (min-width: 800px) and (max-width: 1024px){
    .contact-form .form-input input{
        width: 39vw;
        font-size: 1.3vw;
    }
    .contact-form textarea{
        width: 39vw;
        font-size: 1.3vw;
    }
    .contactform-btn{
        font-size: 1.3vw;
    }
    .google-map iframe{
        width: 70vw;
        height: 45vh;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .form-in{
        gap: 0;
        flex-direction: column;
    }
    .contact-form .form-input input{
        width: 60vw;
        font-size: 1.6vw;
    }
    .contact-form textarea{
        width: 60vw;
        margin: 0;
        font-size: 1.6vw;
    }
    .contactform-btn-con{
        margin: 2rem 19%;
    }
    .contactform-btn{
        font-size: 1.6vw;
    }
    .google-map iframe{
        width: 63vw;
        height: 43vh;
    }
}

@media (min-width: 480px) and (max-width: 600px){
    .form-in{
        gap: 0;
        flex-direction: column;
    }
    .contact-form .form-input input{
        width: 75vw;
        font-size: 2.2vw;
    }
    .contact-form textarea{
        width: 75vw;
        margin: 0;
        font-size: 2.2vw;
    }
    .contactform-btn-con{
        margin: 2rem 11%;
    }
    .contactform-btn{
        font-size: 2.1vw;
    }
    .google-map iframe{
        width: 74vw;
        height: 45vh;
    }
}

@media (max-width: 480px){
    .form-in{
        gap: 0;
        flex-direction: column;
    }
    .contact-form .form-input input{
        width: 75vw;
        font-size: 2.74vw;
    }
    .contact-form textarea{
        width: 75vw;
        margin: 0;
        font-size: 2.74vw;
    }
    .contactform-btn-con{
        margin: 2rem 0;
        justify-content: center;
    }
    .contactform-btn{
        font-size: 2.9vw;
    }
    .google-map iframe{
        width: 74vw;
        height: 45vh;
    }
}

.sep-services-con{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin: 0 5% 5rem 5%;
}

.sep-ser-pic {
    position: relative;
    overflow: hidden;
    width: 23vw;
    cursor: pointer;
}

.sep-ser-pic img {
    display: block;
    height: auto;
    width: 100%;
    border-radius: 1rem;
    filter: brightness(80%);
    transition: filter 0.3s ease;
}

.sep-ser-pic:hover img {
    filter: brightness(100%);
}

.sep-service-text {
    position: absolute;
    bottom: 3%;
    left: 0;
    width: 90%;
    padding: 10px 20px;
    color: white;
    text-align: left;
}

.sep-service-text h2{
    color: var(--white);
    font-size: 1.5vw;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

.sep-service-text p{
    color: var(--white);
    font-size: 1.1vw;
    margin-top: .5rem;
}

@media (min-width: 800px) and (max-width: 1024px){
    .sep-services-con{
        gap: .7rem;
    }
    .sep-ser-pic{
        width: 25vw;
    }
    .sep-service-text h2{
        font-size: 1.8vw;
    }
    .sep-service-text p{
        font-size: 1.3vw;
    }
}

@media (min-width: 600px) and (max-width: 800px){
    .sep-ser-pic{
        width: 35vw;
    }
    .sep-service-text h2{
        font-size: 2.3vw;
    }
    .sep-service-text p{
        font-size: 1.6vw;
    }
}

@media (min-width: 480px) and (max-width: 600px){
    .sep-services-con{
        flex-direction: column;
    }
    .sep-ser-pic{
        width: 59vw;
    }
    .sep-service-text h2{
        font-size: 3.2vw;
    }
    .sep-service-text p{
        font-size: 2.2vw;
    }
}

@media (max-width: 480px){
    .sep-services-con{
        flex-direction: column;
    }
    .sep-ser-pic{
        width: 65vw;
    }
    .sep-service-text h2{
        font-size: 3.8vw;
    }
    .sep-service-text p{
        font-size: 2.8vw;
    }
}

.mr-t{
    margin-top: 4rem;
}

.container {
  position: relative;
  padding: 0 2rem 4rem 2rem;
}

.container .image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .50rem;
}

.container .image-container .media {
  width: 27vw;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .1);
  overflow: hidden;
  cursor: pointer;
  height: 26vw;
}

.container .image-container .media img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: .2s linear;
}

.container .image-container .media:hover img{
  transform: scale(1.1);
}

.container .popup-media {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 100;
  display: none;
  opacity: 0;
  transform: scale(0.8); 
  transition: opacity 0.4s ease, transform 0.4s ease; 
}

.container .popup-media.active {
  display: block;
  opacity: 1;
  transform: scale(1); 
}

.container .popup-media span {
  position: absolute;
  top: 2%;
  right: 10px;
  font-size: 60px;
  color: #fff;
  cursor: pointer;
  z-index: 100;
}

.container .popup-media img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  max-height: 75%;
  max-width: 65%;
  object-fit: cover;
}

@keyframes popupOpen {
  from {
      opacity: 0;
      transform: scale(0.8);
  }
  to {
      opacity: 1;
      transform: scale(1);
  }
}

.container .popup-media {
  animation: popupOpen 0.4s ease forwards;
  display: none;
  opacity: 0;
}

@media (max-width: 768px) {
  .container .popup-media img {
      width: 90%;
  }
}

@media (min-width: 600px) and (max-width: 900px){
  .container .image-container .media{
      width: 41vw;
      height: 33vw;
  }
}

@media (max-width: 600px){
  .container .image-container .media{
      width: 70vw;
      height: 65vw;
  }
}

.whatsapp-main {
    position: fixed;
    bottom: 40px;
    right: 0;
    transform: translateX(-22px);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    width: 4rem;
}

.whatsapp-main a {
    display: block;
    margin-bottom: 0.5rem;
}

.whatsapp-img, .whatsapp-main img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 50%;
}