@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root{
     --p-color:#666;
     --green1:#042F28;
     --green2:#487D35;
     --green3:#6CA957;
     --yellow1:#DAB534;
     --yellow2:#8D711B;
     --mobile-header-offset: 9rem;
     --p-font: "Open Sans", sans-serif;
     --h-font: "Poppins", sans-serif;
    --fs-body: clamp(1.6rem, 1.4rem + 0.3vw, 1.8rem);
    --fs-small: clamp(1.4rem, 1.3rem + 0.2vw, 1.6rem);
    --fs-h1: clamp(3.2rem, 2.2rem + 2.4vw, 5rem);
    --fs-h2: clamp(2.6rem, 2rem + 1.5vw, 3.5rem);
    --outline:.1rem solid rgba(0,0,0,.1);
    --outline-hover:.2rem solid var(--green2);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
    border: none;
    list-style-type: disc;
    /* text-transform: capitalize; */
    transition: all .3s ease-in-out;  
}

html{
    font-size: 62.5%;
    scroll-behavior: smooth;
    scroll-padding-top: 170px;
}

a{
    text-decoration: none;
}

ul li::marker{
    color: var(--green2);
}

body{
    width: 100%;
    background-color: #6ca95713;
    font-size: var(--fs-body);
    line-height: 1.6;

}
body.nav-open{
    overflow: hidden;
}
section{
    padding: 20px 60px
}
.custom-margin {
  margin-top: 70px;
  margin-bottom: 70px;
}
.contact a{
    font-family: var(--h-font);
}
.calculator-box button{
    font-family: var(--h-font);
}


/* header section */

.header{
    position: sticky;
    top: 0; left: 0; right: 0;
    background-color: #fff;
    padding: 20px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
}
.header .logo img{
    height: 80px;
}
.navbar{
    display: flex;
    align-items: center;
    gap: 40px;
}
.navbar a{
    font-weight: 400;
    font-size: 15px;
    font-family: var(--h-font);
    transition: all .3s ease-in-out;
    color: black;
}
.navbar a:hover,
.navbar a.nav-active,
.navbar a.active{
    color: var(--green2);
    border-bottom: 2px solid var(--green1);
}
.burger{
    width: 41px;
    height: 35px;
    display: none;
    cursor: pointer;
}

.burger div{
   width: 25px;
   height: 3px;
   margin: 5px;
    background-color: var(--yellow1);
    border-radius: 8px;
    transition: 0.5s ease-in;
}

/* header section end */


/* home section start */

.home{
   background-image:linear-gradient(rgba(0, 0, 0, 0.59), rgba(0, 0, 0, 0.632)),
    url("../images/mainbg.jpeg");
    width: 100%;
    /* height: 70vh; */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 15%;
    position: relative;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: clamp(52rem, 70vh, 80rem);
    height: 100%;
    padding-block: 4rem;
    padding-top: 20rem;
}
.home h1{
    font-size: var(--fs-h1);
    font-family: var(--h-font);
    margin-bottom: 10px;
    font-weight: 600;
    background: linear-gradient(
    120deg,
    #DAB534 0%,
    #F5E7A1 25%,
    #6CA957 50%,
    #487D35 75%,
    #042F28 100%
  );
  background-size: 250% 250%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  animation: h1GradientShift 7s ease infinite;

}
.home p{
    font-size: 1.6rem;
    font-family: var(--p-font);
    line-height: 1.5;
    font-weight: 400;
    width: 100%;
    max-width: min(90vw, 500px);
    margin-inline: auto;
}
.home ul{
  width: 100%;
  max-width: min(90vw, 500px);
  margin-inline: auto;
  text-align: center;
}
ul li{
    font-size: var(--fs-small);
    font-family: var(--p-font);
    line-height: 1.5;
    width: 500px;
    max-width: 100%;
    font-weight: 300;
}
.span1 {
    font-weight: 500;
    font-size: 1.7rem;
    font-family: var(--p-font);
}
.span1 a{
    color: var(--yellow2);
    transition: all .3s ease-in-out;
}
.span1 a:hover{
    color: var(--yellow1);
    font-size: 1.9rem;
}

/* home section end */


/* report section */

.report-cover{
    background: #6CA957;
    background: linear-gradient(349deg,rgba(108, 169, 87, 0.34) 35%, rgba(93, 151, 73, 0.23) 35%, rgba(0, 0, 0, 1) 100%);
    width: 100%;
}
.report-content{
    width: min(100%, 500px);
    padding: clamp(1.6rem, 4vw, 3rem) !important;
    margin: auto;
}
.report-content img{
    height: 100px;
}
.report-content h2{
    font-size: 2.5rem;
    font-family: var(--h-font);
    margin: 10px 0;
    font-weight: 600;
}
.report-content p{
    font-size: 1.8rem;
    font-family: var(--p-font);
    line-height: 1.5;
    color: var(--p-color);
    font-weight: 500;
}
.progress{
    width: 50%;
    margin-bottom: 10px;
}
.bg-danger {
    background-color: var(--green2) !important;
}



/* report section ends */



/* about section */

.about{
    gap: 40px;
}

.about-content h1{
    font-size: var(--fs-h2);
    font-family: var(--h-font);
    margin-bottom: 20px;
    font-weight: 600;
    border-bottom: 2px solid var(--green2);
}
.about-content h3{
    font-size: 1.7rem;
    font-family: var(--h-font);
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: 500;
}
.about-content p{
    font-size: 1.3rem;
    font-family: var(--p-font);
    line-height: 1.5;
    color: var(--p-color);
    margin-bottom: 20px;
    font-weight: 400;
}
.list-group-item{
    font-size: var(--fs-small);
    font-family: var(--p-font);
    color: var(--p-color);
    font-weight: 400;
}

.swiper .mySwiper1 {
    width: 100%;
    height: 50vh;
}

.mySwiper1 .swiper-slide img {
    display: block;
    width: 100%;
    height: 50vh;
    object-fit: cover;
}

.mySwiper1 .swiper-button-next,
.mySwiper1 .swiper-button-prev {
  color: var(--green2);
}

.mySwiper1 .swiper-pagination-bullet {
  background: var(--green2);
}


/* about section end */


/* services section */

.heading{
    text-align: center;
    /* padding: 2.5rem 0; */
    padding-bottom: 4rem;
    font-size: var(--fs-h2);
    color: var(--black);
    font-family: var(--h-font);
}
.heading span{
    display: inline-block;
    font-family: var(--h-font);
    color: white;
    background-color: var(--green2);
    padding: 8px 28px;
    clip-path: polygon(100% 0, 93% 50%, 100% 99%, 0% 100%, 7% 50%, 0% 0%);
}


.services-slide{
    background: #fff;
    padding: 30px 25px;
    transition: all .3s ease-in-out;
    height: 100%;
}
.services-slide:hover{
    transform: translateY(-10px);
}
.services-slide:hover h3,
.services-slide:hover p,
.services-slide:hover li{
    transform: translateX(10px);
}

.services-slide h3{
    font-size: 1.8rem;
    font-family: var(--h-font);
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--green1);
}
.services-slide p{
   font-size: var(--fs-small);
    font-family: var(--p-font);
    line-height: 1.5;
    color: var(--p-color);
    font-weight: 400;
}
.services-slide i{
    font-size: 6rem;
    color: var(--green2);
}
.services-slide:hover i{
   transform: translateX(10px);
}
.services-slide li{
    font-size: var(--fs-small);
    font-family: var(--p-font);
    line-height: 1.5;
    color: var(--p-color);
    font-weight: 400;
    width: auto;
    max-width: 100%
}

/* services section end */


/* calculator section */

.calculator{
    background-color: #fff;
    border-radius: 10px;
}
.cal-content h1{
    font-size: var(--fs-h2);
    font-family: var(--h-font);
    margin-bottom: 10px;
    font-weight: 600;
}
.cal-content p{
    font-size: 1.4rem;
    font-family: var(--p-font);
    line-height: 1.5;
    color: var(--p-color);
    margin-bottom: 20px;
    font-weight: 400;
}
.calculator-box h3{
    font-size: 1.7rem;
    font-family: var(--h-font);
    margin-bottom: 10px;
    font-weight: 600;
}
.calculator-box p{
    font-size: 1.4rem;
    font-family: var(--p-font);
    line-height: 1.5;
    color: var(--p-color);
    margin-top: 10px;
    font-weight: 400;
}
.calculator-box select, .calculator-box input{
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    font-size: var(--fs-small);
    font-family: var(--p-font);
    border: 1px solid #ccc;
    border-radius: 5px;
}
.calculator-box label{
    font-size: var(--fs-small);
    font-family: var(--p-font);
    margin-bottom: 5px;
    font-weight: 500;
}
.btn-outline-success{
    border-color: var(--green2);
    color: var(--green2);
    padding: 10px 20px;
    border-radius: 5px;
    font-size: var(--fs-small);
    font-family: var(--p-font);
    font-weight: 500;
    transition: all .3s ease-in-out;
}
.btn-outline-success:hover{
    background-color: var(--green3);
    color: #fff;
    border: none;
}
.btn-success{
    background-color: var(--green3);
    border: none;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: var(--fs-small);
    font-family: var(--p-font);
    font-weight: 500;
    transition: all .3s ease-in-out;
}
.btn-success:hover{
    background-color: #fff;
    color: var(--green2);
    border: 1px solid var(--green2);
}
#result{
    font-size: 1.6rem;
    font-family: var(--p-font);
    color: var(--green1);
    margin-top: 10px;
    font-weight: 400;
}


/* calculator section ends */


/* gallery section */

.g-img a img{
    width: 100%;
    height: 200px;
    border-radius: 25px;
    transition: 1s ease-out;
    object-fit: cover;
}
.g-img:hover img{
    transform: scale(1.1);
    filter: grayscale(100%);
}

/* gallery section ends */


/* team section */

.team-box{
    background-color: #fff;
    outline: var(--outline);
    outline-offset: -1rem;
    padding: 20px;
    transition: all .3s ease-in-out;
    height: 100%;
    overflow: hidden;
}
.team-box:hover{
    outline: var(--outline-hover);
    outline-offset: 0rem;
}
.team-box img{
    border-radius: 10px;
    width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
}
.team-box h3{
    font-size: 1.8rem;
    font-family: var(--h-font);
    font-weight: 600;
    margin-top: 10px;
}
.team-box p{
    font-size: 1.5rem;
    font-family: var(--p-font);
    line-height: 1.5;
    color: var(--p-color);
    font-weight: 400;
}

.team-box a i{
    font-size: 2rem;
    color: var(--green2);
    background-color: #eee;
    padding: 10px 15px;
    border-radius: 5px;
}
.team-box a i:hover{
    font-size: 1.5rem;
    color: white;
    background-color: var(--green2);
    padding: 10px 15px;
    border-radius: 5px;
}
.team-social{
    margin: 15px 0 !important;
}

/* team section end */


/* fq section */

.fq-section {
    background-color: #fff;
}

.accordion-item{
    border-color: #487D35;
}
.accordion-header button{
    font-size: 1.4rem;
    font-weight: 400;
    text-decoration: none;
    cursor: pointer;
    font-family: var(--h-font);
}
.accordion-body ul li{
    font-size: var(--fs-small);
    font-family: var(--p-font);
    line-height: 1.5;
    color: var(--p-color);
    font-weight: 400;
}

.accordion-button {
  background-color: transparent;
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(72, 125, 53, 0.25);
  border-color: var(--green2);
}

.accordion-button:not(.collapsed) {
  color: var(--green2);
  background-color: transparent;
  box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
  filter: hue-rotate(45deg) saturate(180%);
}

/* fq section ends */


/* agent section starts */

.agent-content h2{
    font-size: var(--fs-h2);
    font-family: var(--h-font);
    margin-bottom: 10px;
    font-weight: 600;
}
.agent-content p{
    font-size: 1.6rem;
    font-family: var(--p-font);
    line-height: 1.5;
    color: var(--p-color);
    margin-bottom: 10px;
    font-weight: 400;
}

.agent-content ul li{
    font-size: var(--fs-small);
    font-family: var(--p-font);
    line-height: 1.5;
    color: var(--p-color);
    margin-bottom: 10px;
    font-weight: 400;
}
.agent-content a{
    font-family: var(--h-font);
}

.bg-warning {
    background-color: #6ca95724 !important;
}

/* agent section ends */



/* sales section starts */

.sales-content h2{
    font-size: var(--fs-h2);
    font-family: var(--h-font);
    margin-bottom: 10px;
    font-weight: 600;
}
.sales-content p{
    font-size: 1.6rem;
    font-family: var(--p-font);
    line-height: 1.5;
    color: var(--p-color);
    margin-bottom: 10px;
    font-weight: 400;
}
.sales-content a{
    font-family: var(--h-font);
}
.bg-primary{
    background-color: #8d701b33 !important;
}

/* sales section ends */



/* Blog Starts */
.blog-box{
    background-color: #fff;
    transition: all .3s ease-in-out;
    height: 100%;
}

.blog-box img{
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
}
.blog-icons{
    padding: 15px 0;
    border-bottom:2px solid rgba(128, 128, 128, 0.148);
}
.blog-box:hover .blog-icons{
     border-bottom:2px solid var(--green2);
}
.blog-icons i{
    color: var(--green2);
    font-size: 1.5rem;

}
.blog-icons a{
    color: var(--p-color);
    font-size: 1.5rem;

}
.blog-box h3{
    font-size: 2rem;
    color: black;
    margin: 10px 0;
    line-height: 1.8;
}
.blog-box p{
    font-size: 1.4rem;
    color: var(--p-color);
    line-height: 1.8;
}
.btn-outline-warning{
    border-color: var(--green2);
    color: var(--green2);
    padding: 10px 20px;
    border-radius: 5px;
    font-size: var(--fs-small);
    font-family: var(--p-font);
    font-weight: 500;
    transition: all .3s ease-in-out;
}
.btn-outline-warning:hover{
    background-color: var(--green2);
    color: white;
    border-color: var(--green2);
}


/* Blog Ends */



/* map section */

#map iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* map section ends */


/* footer section */

.footer{
    background-color: #fff;
    box-shadow: var(--box-shadow);
}
.footer-content .logo img{
    height: 90px;
}
.footer-content h3{
    font-size: 2.5rem;
    color: var(--green2);
    margin: 2rem 0;
    font-family: var(--h-font);
    font-weight: 400;
}
.footer-content p{
    font-size: 1.5rem;
    color: var(--p-color);
    padding: 10px 0;
    font-family: var(--p-font);
    font-weight: 400;
}
.footer-content .contact-links{
    display: block;
    font-size: 1.6rem;
    color: var(--p-color);
    font-family: var(--p-font);
    font-weight: 400;
    padding: 10px 0;
}
.footer-content .contact-links i{
    font-size: 1.5rem;
    color: var(--green2);
    padding: 10px 0;
    padding-right: 1rem;
}
.footer-content .contact-links:hover i{
    padding-right: 2rem;
}
.social-links {
   display: inline-block;
}
.social-links a{
    margin: 10px 3px;
}
.social-links a i{
    font-size: 2rem;
    color: var(--green2);
    background-color: #eee;
    padding: 10px 15px;
    border-radius: 5px;
}
.social-links a i:hover{
    font-size: 1.5rem;
    color: white;
    background-color: var(--green2);
    padding: 10px 15px;
    border-radius: 5px;
}
.credit{
    background-color: var(--green1);
    padding: 30px 0;
    font-size: 1.2rem;
    color: #fff;
    font-family: var(--p-font);
    font-weight: 400;
}

.contact{
    position: fixed;
    right: 20px;
    bottom: 40px;
    z-index: 2;
}
.contact a{
    padding: 15px;
    background-color: var(--yellow1);
    color: white;
    border-radius: 20px;
    font-size: 1.6rem;
    font-family: var(--p-font);
    font-weight: 400;
    transition: all .3s ease-in-out;
}
.contact a:hover{
    background-color: var(--yellow2);
    color: white;
}
.contact a i{
    font-size: 1.7rem;
    margin-left: 3px;
}

/* footer section ends */




@keyframes h1GradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}




/* Media queries --------------------------------- */

@media (max-width:991px){
    html{
        font-size: 60%;
    }
    section{
        padding: 20px 40px;
    }
    .header{
        padding: 20px 40px;
    }

}






@media (max-width:900px){
    html, body{
        overflow-x: hidden;
        overscroll-behavior-x: none;
    }
    .burger{
        display: block;
    }
    .header{
        overflow: visible;
    }
    .navbar{
        position: fixed;
        top: var(--mobile-header-offset);
        right: -110vw;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        width: min(85vw, 360px);
        height: calc(100dvh - var(--mobile-header-offset));
        align-items: center;
        justify-content: center;
        visibility: hidden;
        pointer-events: none;
        z-index: 1001;
        transition: right .35s ease, visibility .35s ease;
        padding: 20px 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 2rem 1.6rem;
    }
     .navbar a{
    width: 50%;
    text-align: center;
    padding: 0.8rem 0;
  }
    .navbar.active{
        right: 0;
        visibility: visible;
        pointer-events: auto;
    }
    .close .line1{
        transform: rotate(-45deg) translate(-5px,6px);
    }
    .close .line2{
        opacity: 0;
    }
    .close .line3{
        transform: rotate(45deg) translate(-5px,-6px);
    }

}






@media (max-width:768px){
    p{
        font-size: 1.6rem !important;
        line-height: 1.6;
    }
    li{
        font-size: 1.5rem !important;
        line-height: 1.6;
    }
    html{
        font-size: 58%;
    }
    section{
        padding: 20px 30px;
    }
     .header{
        padding: 10px 30px;
    }
    .home p{
        width: 90%;
    }

}



@media (max-width:450px){
    html{
        font-size: 56.25%;
    }
    .navbar{
        width: min(92vw, 360px);
        height: auto;
        min-height: calc(100dvh - var(--mobile-header-offset));
    }

    .home{
         background-image:linear-gradient(rgba(0, 0, 0, 0.59), rgba(0, 0, 0, 0.632)),
    url("../images/mobile-bg.jpeg");
        background-position: 25% 15%;
    }
    .home h1{
        font-size: 4rem;
    }
    .home p{
        font-size: 1.5rem;
    }
    #map{
    height: clamp(240px, 45vh, 400px) !important;
    }
    #map iframe{
    width: 100%;
    height: 100%;
    }
     .contact{
    right: 16px;
    bottom: 80px;
    }
    .contact a{
    font-size: 1.3rem;
    padding: 1rem 1.2rem;
    border-radius: 1.2rem;
    }
  
}