@import url('https://fonts.googleapis.com/css2?family=Arvo&family=Bebas+Neue&family=Open+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Oswald&family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allison&family=Instrument+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dawning+of+a+New+Day&display=swap');

*{
    margin: 0;
    box-sizing: border-box;
    color: white;
}
@font-face{
    font-family: elista;
    src: url(../fonts/elista/Elista_Personal_Use.ttf);
}

@font-face {
    font-family: "century-gothic";
    src: url(../fonts/century-gothic/CenturyGothic.ttf);
}

:root{
    --century-gothic: "century-gothic";
    --font1: 'Open Sans', sans-serif;
    --font2: 'Arvo', serif;
    --font3: 'Playfair Display', serif;
    --font4: 'Instrument Serif', serif;
    --font-head: 'Didact Gothic', sans-serif;
    --font-content: 'Oswald', sans-serif;
    --primary-color : #1A7248;
    --secondary--color : #816309;  
    --black1: #191919; 
}

h1{
    font-family: var(--century-gothic);
}

h2{
    font-family: var(--century-gothic);
    font-size: 1.2rem;
}

p{
    font-family: var(--century-gothic);
}

a{
    font-family: var(--century-gothic);
    text-decoration: none;
}

.main {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background-color: var(--black1);
}


/* ===========Wrapper ========== */

.wrapper{
    display: none;
    right: 0;
    height: 100%;
    /* background-color: #1a724738; */
    position: fixed;
    display: flex;
    display: flex;
    align-items: center;
    /* z-index: 50; */
}

.wrapperIcon{
    margin-top: 80px;
    height: 200px;
    display: flex;
    gap: 20px;
    padding: 50px 10px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: var(--black1);
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.wrapperIcon a i{
    font-size: 1.8rem;
    transition: 0.5s ease-in-out;
}

.wrapperIcon a i:hover {
    color: var(--primary-color);
    transform: scale(1.5) translateX(-5px) translateY(-5px);
    transition: 0.5s ease-in-out;
}



/* =============SECTION 1 ================ */

.section1{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

/* ========header======== */

nav{
    height: 80px;
    width: 90%;
    background-color: var(--black1);
    display: flex;
    align-items: center;
    position: fixed;
    justify-content: space-between;
    z-index: 99;
}

nav a{
    display: flex;
    gap: 5px;
}

nav a img{
    height: 50px;
    width: 50px;
    object-fit: scale-down;
}
nav a p{
    font-size: 18px;
}

nav ul{
    display: flex;
    list-style: none;
    gap: 2rem;
    right: 0;
}
nav ul li {
    display: flex;
    align-items: center;
    justify-content: center;
}
nav ul li a{
    color: white;
    font-size: 1.2em;
    text-transform: uppercase;
    /* display: flex; */
    /* line-height: 1; */
    /* flex-direction: column; */
    transition: 0.3s ease-in;
}

nav ul li a:hover{
    transform: scale(1.2) translateX(2px) translateY(2px);
    transition: 0.3s ease-in;
}



.contactBtn{
    color: var(--black1);
    padding: 6px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    border: 1.5px solid var(--primary-color);
    font-weight: bolder;
    letter-spacing: 2px;
    transition: 0.5s ease-in;
}
.contactBtn:hover{
    background-color: var(--black1);
    color: var(--primary-color);
    transition: 0.3s ease-in;
}
nav .navBtn{
    display: none;
    /* height: 5rem;
    width: 5rem;
    display: flex;
    align-items: center;
    justify-content: center; */
}

/* .navBtn input{
    display: none;
    height: 4rem;
    width: 4rem;
    opacity: 0;
}

.navBtn i{
    display: none;
    position: absolute;
    font-size: 2rem;
} */

@media screen and (max-width: 925px) {
    nav{
        width: 95%;
    }

    .navUl{
        margin-top: 80px;
        position: absolute;
        padding-left: 0px;
        width: 100%;
        align-self: flex-start;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 30px;
        transform: translatex(-100%);
        transition: 0.5s ease-in;
        background-color: var(--black1);
        padding: 20px 0px;
    }


    nav ul li{
        text-transform: uppercase;
        font-size: 1.2rem;
    }
    nav .navBtn{
        display: block;
        height: 5rem;
        width: 5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .navBtn{
        height: 100%;
        width: 100%;
    }
    .navBtn input{
        z-index: 22;
        height: 2rem;
        width: 2rem;
        opacity: 0;
    }

    .navBtn i{
        position: absolute;
        font-size: 2rem;
    }

}

/* .sec1Content{
    height: 700px;
    width: 90%;
    margin-top: 80px;
    display: flex;
}

.sec1Left{
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 0px 50px;
}

.sec1Left h1{
    font-size: 5rem;
    line-height: 1.1;
    font-weight: 700;
}

.sec1Left p{
    font-size: 1.04rem;
}

.sec1Left a{
    width: 150px;
    height: 45px;
    font-size: 1.02rem;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    color: white;
}

.sec1Right{
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sec1RightContent{
    height: 700px;
    width: 100%;
    display: flex;
}

.bg{
    position: absolute;
    z-index: -1;
    height: 300px;
    width: 150px;
    transform: translate(-10px,-10px);
    background-color: var(--primary-color);
}
.heroImg{
    height: 600px;
    width: 100%;
}

.heroImg img{
    height: 100%;
    width: 100%;
    object-fit: scale-down;
} */

.sec1Content{
    height: calc(100vh - 80px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
}

.swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

.mySwiper .swiper-button-prev,
.mySwiper .swiper-button-next {
    color: var(--primary-color);
}

/* Change color of Swiper navigation on hover */
.mySwiper .swiper-button-prev:hover,
.mySwiper .swiper-button-next:hover {
    color: black;
}
  


.slide{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: 1.1;
}
.bgWrap{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #191919;
    opacity: 20%;
}   

.slide2 .bgWrap{
    background-color: white;    
}

.heroHead{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.wrap{
    letter-spacing: 5rem;
    font-size: 7rem;
    color: transparent;
    font-family: var(--font1);
    font-weight: 900;
    -webkit-text-stroke-color: rgba(255, 255, 255, 0.4);
    -webkit-text-stroke-width: 3.5px;
    /* opacity: 30%; */
}

.txt{
    color: white;
    position: absolute;
    font-size: 3rem;
    /* font-weight: bold; */
    font-weight: 500;
    /* text-transform: uppercase; */
    /* letter-spacing: 2rem; */
    font-family: elista;
    animation: fade-in-right 1s linear;
}

.slide2 .txt{
    color: var(--black1);
}

.slide2 .wrap{
    -webkit-text-stroke-color: #19191991;
}
.slide2 p{
    color: var(--black1);
}

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



.heroDescription{
    width: 50%;
    z-index: 4;
}
.heroDescription p{
    font-size: 1.1rem;
    font-weight: 800;
    text-align: center;
}

.slide1 .wrap {
    letter-spacing: 1.8rem;
}

.slide1{
    background-image: url(../images/index/herosection-1.jpg);
    background-position: center;
    background-size: cover;
}
.slide2{
    background-image: url(../images/index/interior-2.jpg);
    background-position: center;
    background-size: cover;
    /* filter: brightness(50%); */
}

.slide3{
    background-image: url(../images/index/hero-section-4.jpg);
    background-position: center;
    background-size: cover;
}
.slide3 .wrap{
    letter-spacing: 2.5rem;
}
.slide4 .wrap{
    letter-spacing: 1.5rem;
}



.slide4{
    background-image: url(../images/index/hero-section-5.jpg);
    background-position: center;
    background-size: cover;
}

/* =====Section 2======== */

.section2{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 0px 0px 0px;
}

.abtHead{
    height: 100%;
    width: 90%;
    padding: 0px 25px;
}

.abtHead h1{
    width: 100%;
    border-bottom: 4px solid var(--primary-color);
    text-transform: uppercase;
}
.abtContent{
    height: 100%;
    width: 90%;
    display: flex;
}

.abtLeft{
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 10px 25px;
}

.abtLeft h1{
    font-size: 1.8rem;
    font-weight: 500;
}

.abtLeft p{
    font-size: 1.4rem;
    line-height: 1.2;
    /* margin-top: 25px; */
    font-weight: 500;
    padding: 0px 20px 0px 0px;
}

.abtRight{
    height: 100%;
    width: 50%;
    padding: 10px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 25px;
    /* margin-top: -40px; */
}

.abtRight p{
    font-size: 1rem;
}

.abtRight p span{
    font-weight: bold;
    font-size: 1.1rem;
    color: var(--primary-color);
}

/* ========Section 3========== */

.section3{
    padding: 0px 0px;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.workFlowHead{
    height: 100%;
    width: 90%;
    text-align: end;
    padding: 20px 10px;
}

.workFlowHead h1{
    /* width: 50%; */
    padding: 5px 0px;
    text-transform: uppercase;
    font-size: 2.2rem;
    border-bottom: 4px solid var(--primary-color);
}

.howWeWork{
    padding-top: 50px;
    height: 100%;
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 50px;
    /* border-left: 1px solid var(--primary-color); */
    /* border-right: 1px solid var(--primary-color); */
}

.workFlow{
    height: 100%;
    width: 85%;
    display: flex;
}

/* .flow2 .workRight img{
    width: 80%;
} */

.workLeft{
    height: 100%;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px 0px;
}

.workHead{
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    gap: 20px;
    align-items: center;
}

.workHead h1{
    font-size: 5rem;
    letter-spacing: 10px;
    font-family: var(--font1);
    color: transparent;
    -webkit-text-stroke-color: white;
    -webkit-text-stroke-width: 1.5px;
}

.workLine{
    height: 1px;
    background-color: white;
    width: 20%;
}

.workLeft h2{
    font-family: var(--font-head);
    font-size: 2rem;
    color: var(--primary-color);
}

.workContent{
    padding: 10px 0px;
    line-height: 1.2;
}

.workContent p{
    font-size: 1.1rem;
}

.workRight{
    height: 100%;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 2rem;
    padding: 50px 0px;
}

.workRight h1{
    font-size: 5rem;
    letter-spacing: 10px;
    font-family: var(--font1);
    color: transparent;
    -webkit-text-stroke-color: white;
    -webkit-text-stroke-width: 1.5px;
}

.workRight img{
    height: 180px;
    width: 180px;
    /* object-fit: scale-down; */
}

.flow2,.flow4,.flow6,.flow8{
    flex-direction: row-reverse;
}

.flow2 .workRight,.flow4 .workRight,.flow6 .workRight,.flow8 .workRight{
    flex-direction: row;
}

/* ======section 4====== */

.section4{
    height: 100%;
    width: 100%;
}

.facts{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.factHead{
    height: 100%;
    width: 90%;
    display: flex;
    align-items: center;
    border-bottom: 4px solid var(--primary-color);
    border-bottom-width: 2px;
    /* justify-content: center; */
    gap: 10px;
}

.factHead h1{
    font-size: 2rem;
    padding: 5px 0px;
    letter-spacing: 2px;
    /* text-transform: uppercase; */
}

.greenLine{
    height: 4px;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
}

.factDesc{
    width: 90%;
    height: 100%;
    padding: 10px 0px;
}

.factContent{
    height: 100%;
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.fact{
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.fact p{
    font-size: 1.5rem;
    text-align: start;
    align-self: self-start;
    padding-top: 10px;
}

strong{
    /* padding: 20px 50px; */
}

.factLine{
    height: 0.8px;
    width: 100%;
    background-color: var(--primary-color);
}

.stroke{
    font-family: var(--font1);
    font-weight: 900;
    font-size: 5.5rem;
    color: transparent;
    -webkit-text-stroke-color: #1A7248;
    -webkit-text-stroke-width: 1.5px;
}

.per{
    display: flex;
    gap: 10px;
}


/* =========section 5========= */

.section5{
    height: 400px;
    width: 100%;
}

.contact{
    padding: 0px 0px;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bgImg{
    height: 100%;
    width: 100%;
    overflow: hidden;
    /* object-fit: cover; */
    /* position: absolute; */
}

.bgImg img{
    object-fit: cover;
    height: 100%;   
    width: 100%;
}

.contactContent{
    position: absolute;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.contactContent p{
    font-size: 2rem;
    letter-spacing: 1px;
}

.contactContent a{
    text-decoration: none;
    color: white;
    width: 150px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 10px 20px;
    border: 2px solid white;
    transition: 0.8s;
}

.contactContent a:hover{
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    transition: 0.8s;
}

/* ========footer======== */
/* .footer{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footerContent{
    height: 300px;
    width: 90%;
    display: flex;
}

.foot1{
    flex: 1;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.foot2{
    flex: 1;
    padding: 50px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.foot1Link{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.foot1Link a{
    text-decoration: none;
    color: white;
}

.foot3{
    flex: 1;
} */

/* ==========Media Query-Mobile========= */

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

    .wrapper{
        display: none;
    }

    .headerList{
        display: none;
    }
    .sec1Content{
        flex-direction: column;
        /* height: 100%; */
        width: 100%;
    }
    .txt{
        font-size: 1.5rem;
    }
    .wrap{
        font-size: 1rem;
        font-weight: 900;
        letter-spacing: 2px;
        font-family: var(--font1);
        color: transparent;
        -webkit-text-stroke-color: rgba(255, 255, 255, 0.279);
        -webkit-text-stroke-width: 1.5px;
    }
    .slide1 .wrap{
        font-size: 2rem;
        letter-spacing: 0.8rem;
    }
    .slide2 .wrap{
        color: #19191945;
        font-size: 2rem;
        letter-spacing: 1rem;
    }
    .slide3 .wrap{
        font-size: 2rem;
        letter-spacing: 1.5rem;
    }
    .slide3 .txt{
        font-size: 1rem;
    }
    .slide4 .wrap{
        font-size: 1.8rem;
        letter-spacing: 1rem;
    }
    .slide4 .txt{
        font-size: 1rem;
    }

    .heroDescription {
        width: 80%;
        padding: 20px 0px;
    }
    .heroDescription p{
        font-size: 0.8rem;
    }
    /* .sec1Left{
        width: 100%;
        padding: 25px 25px;
    }

    .sec1Left h1{
        font-size: 4rem;
    }
    .sec1Right{
        width: 100%;
    }
    .sec1RightContent{
        height: 600px;
        width: 90%;
    } */

    .abtHead{
        width: 100%;
    }
    .abtHead h1{
        width: 100%;
        font-size: 2.2rem;
    }
    .abtContent{
        flex-direction: column;
    }
    .abtLeft{
        width: 100%;
        padding: 10px 0px;
    }
    .abtLeft p{
        font-size: 1.6rem;
        padding: 0;
        font-weight: bold;
        margin-top: 10px;
    }
    .abtRight{
        width: 100%;
        padding: 0px 0px;
        margin-top: 0;
    }

    /* =====work flow====== */
    .howWeWork{
        width: 100%;
    }
    .workFlow{
        width: 90%;
        flex-direction: column-reverse;
    }

    .workFlowHead{
        text-align: start;
        width: 100%;
        padding: 0px 25px;
    }
    .flow1{
        margin: 0;
    }

    .workLeft{
        width: 100%;
        padding: 10px 10px;
    }
    .workRight{
        width: 100%;
    }

    /* =======facts===== */
    .factContent{
        flex-direction: column;
    }
    .fact{
        gap: 0;
    }
    .stroke{
        font-size: 3.5rem;
    }

    /* =======contact====== */

    .section5{
        height: 100%;
    }
    .contactContent p{
        font-size: 1.4rem;
    }
    .mySwiper .swiper-button-prev,
    .mySwiper .swiper-button-next {
    display: none;
    }
}