@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
    font-family: "Open Sans", sans-serif;
}

:root{
    --yellow: #fbba00;
    --white: #fff;
    --black: #000;
    --green: #74a138;
    --normal : 16px;
    --big: 20px;
    --big40: 45px;
    --small: 12px;
}

/* ******************************************************** Common Styles **************************************************/
/* Body previous Background color #f0f0f0 */

.backToTop{
    position: fixed;
    right: 5%;
    bottom: 5%;
    z-index: 9;
    background: var(--green);
    color: var(--white);
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .3s ease-in-out;
    opacity: 0;
    pointer-events: none;
}

.backToTop.show{
    opacity: 1;
    pointer-events: unset;
}

.backToTop:hover{
    color: var(--green);
    background: var(--white);
    border: 1px solid var(--green);
}

.backToTop i{
    font-size: var(--big);
}

section:not(.home, .footer){
    padding-top: 5% !important;
}

@media screen and (max-width:500px) {
    section:not(.home, .footer){
        padding-top: 15% !important;
    }
}

.webButton{
    background: var(--green);
    color: var(--black);
    font-weight: bold;
    font-size: var(--normal);
    padding: 2%;
    border-radius: 15px;
    text-decoration: none;
    transition: all .3s ease-in-out;
}

@media screen and (min-width: 501px) and (max-width: 900px) {
    .webButton{
        padding: 4%;
    }
}

@media screen and (max-width: 500px) {
    .webButton{
        padding: 4%;
    }
}
.webButton:hover{
    background: var(--white);
}



/* *********************************************** Common Styles Ended ***************************************************** */


/* ******************************************************** Home Section ********************************************************** */


@media screen and (min-width: 1024px) {
    .home{
        min-height: 100vh;
    }
}

.header{
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    /* height: 100px; */
}
.header.sticky{
    position: fixed;
    width: 100%;
    /* background: rgba(0, 0, 0, 0.8); */
    top: 0;
    z-index: 99;
}

@media screen and (max-width: 950px) {
    .header{
        justify-content: space-between;
    }
}


.bgHomeImg{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
}


.logo-image{
    margin-left: 1%;
}

.logo-image img{
    height: 75px;
    width: 150px;
    object-fit: cover;
}

.logo-image svg{
    display: none;
}

.Menu_Bar{
    font-size: var(--big);
    color: var(--white);
    margin-right: 25px;
    cursor: pointer;
    display: none;
    transition: all .3s ease-in-out;
}

.Menu_Bar:hover{
    color: var(--green);
}

@media screen and (max-width: 950px) {
    .Menu_Bar{
        display: block;
        z-index: 999;
    }
    .Menu_Bar:hover{
        color: white;
    }
}

.nav-links{
    width: -webkit-fill-available;
    width: -moz-available;
    display: flex;
    justify-content: center;
    margin-left: -5%;
    gap: 3.5%;
}

.nav-links div a {
    text-decoration: none;
    color: var(--white);
    font-weight: bold;
    font-size: var(--normal);
    transition: all .3s ease-in-out;
}

.nav-links div:hover a {
    color: var(--green);
}

@media screen and (max-width: 950px) {
    .nav-links{
        display: none;
    }
    .nav-links a{
        opacity: 0;

        transition: all 0.5s ease-in-out; /* Add transition for opacity */
    }

    .nav-links.activeNav{
        transition-delay: 1s;
        transition: all .5s ease-in-out;
        position: fixed;
        height: 100vh !important;
        width: 100% !important;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 0;
        padding: 0;
        gap: 7%;
        z-index: 999;
        background: var(--green);
        top: 0;
    }
    .nav-links.activeNav a{
        opacity: 1;
    }

    .nav-links div:hover a{
        color: var(--black);
    }
}

.socialIcons{
    display: flex;
    justify-content: center;
    gap: 15%;
}


@media screen and (min-width:1024px) {
    .socialIcons{
        position: relative;
        left: 5%;
    }
}

@media screen and (min-width: 1366px) {
    .socialIcons{
        position: relative;
        left: 15%;
    }
}
.socialIcons a i{
    font-size: 30px;
}
.socialIcons:hover a{
    color: var(--white) !important;
}
.socialIcons a i{
    transition: all .3s ease-in-out;
}

.socialIcons a:hover i{
    color: var(--green);
}
@media screen and (max-width:768px) {
    .socialIcons a:hover i{
        color: var(--black);
    }
}



.cartLink a{
    position: relative;
}
.cartLink i {
    font-size: 20px;
}

#cartCount {
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: -45%;
    border: 0.2px solid black;
    right: -40%;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 11px;
}


.centerText{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.centerText h1{
    font-size: var(--big40);
    color: var(--white);
    font-weight: bold;
}

@media screen and (max-width: 500px) {
    .centerText h1{
        font-size: 25px;
    }
}


.learnMoreHome{
    position: relative;
    top: 20px;
}

.homeIcons{
    margin-top: 75px;
    display: flex;
    width: 100%;
    justify-content: center;
    gap: 3%;
}


@media screen and (max-width: 400px) {
    .homeIcons{
        transform: scale(.7);
    }
}

.home-img{
    padding: 1% 5%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.home-img img{
    height: auto;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
}


/* ************************************************************ Home Section Ended ************************************************************ */

  /* ******************************************************* About Us Section Started ********************************************************* */


  .aboutUs{
    padding: 2.5% 5% !important;
    padding-bottom: 0% !important;
    min-height: 100vh;
  }


  .aboutus-content{
    display: flex;
  }

  @media screen and (max-width: 768px) {
    .aboutus-content{
        flex-direction: column;
    }
  }
  .aboutLeft{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .aboutLeft .aboutImg img{
    object-fit: cover;
    height: auto;
    width: 80%;
    border-radius: 10px;
  }

@media screen and (max-width: 768px) {
    .aboutImg {
        display: flex;
        justify-content: center;
    }
}

  .aboutRight{
    flex: 1;
  }

  .aboutRight{
    padding: 1%;
    display: flex;
    flex-direction: column;
    /* align-items: center; */
    /* justify-content: center; */
  }

  @media screen and (max-width:900px) {
    .aboutRight {
        align-items: center;
        flex-wrap: wrap;
    }
  }

  .aboutSectionh2{
    text-align: left;
    font-size: 30px;
    color: var(--green);
  }

  .centerHeading-about{
    font-weight: bold !important;
    font-size: 29px !important;
  }

  @media screen and (max-width: 500px) {
    .aboutSectionh2 {
        font-size: 20px;
        margin-top: 5%;
    }

    .centerHeading-about{
        font-size: 18px !important;
        width: 80%;
    }
  }

  
  .aboutRight p{
      font-weight: 500;
      font-size: var(--normal);
      margin: 0.5em 0;
      text-align: justify;
    }

.aboutRight p:not(.aboutSectionh2, .centerHeading-about) {
    width: 80%;
}

.about-icon-container {
    width: 100%;
    display: flex;
    margin: 1.5em 0;
    justify-content: center;
    gap: 2%;
}

.about-icon img{
    height: auto;
    width: 70%;
    object-fit: cover;
}


 

  /* ***************************************************** About us Ended ******************************************************************* */


/* ********************************************************* Our products section started *******************************************************/

.our-products{
    padding: 2.5% 5%;
    min-height: 100vh;
}

.product-header > *{
    text-align: center;
}

.pheader{
    font-size: 30px;
    color: var(--green);
}

.header2Products{
    font-weight: 600;
    font-size: 20px;
    margin: .3em 0;
}

.products-outer-container{
    margin: 1.5em 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.product-container{
    width: 45%;
    height: 315px;
    margin: 2em 0;
}

@media screen and (max-width: 768px) {
   .product-container {
    width: 100%;
   } 
}

.product-container img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 10px;
    transition: all .3s ease-in-out;
}

.product-container a:hover img{
    transform: scale(1.05);
}

.product-name {
    margin: .5em 0;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 20px;
}


/* ******************************************************** Our products ended ***************************************************************/

/***************************************************** Our Certifications section started ******************************************************/

.certifications{
    padding: 2.5% 5%;
}

.certificationHeader {
    font-size: 30px;
    text-align: center;
    color: var(--green);
}

.certification-header2{
    margin: .5em 0;
    font-size: 25px;
    font-weight: 700px;
    text-align: center;
}

.certification-outer-container{
    display: flex;
    align-items: center;
    margin: 1.5em 0;
    justify-content: center;
    gap: 7%;
}

.certification-img-container{
    display: flex;
    justify-content: center;
    height: 150px;
    position: relative;
}

.certification-img-container img{
    height: auto;
    width: 100%;
    object-fit: cover;
}

.certification-img-container i {
    position: absolute;
    bottom: 0%;
    right: 0%;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

.certification-img-container i:hover {
    color: var(--green);
}

@media screen and (min-width: 650px)  and (max-width: 900px) {
    .certification-img-container {
        flex: 0 0 calc(50% - 20px); /* Set width to 50% with margin */
        margin: 10px; /* Optional: Adjust margin for spacing between columns */
        height: 200px;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .certification-img-container img{
        height: auto;
        width: 55%;
        object-fit: cover;
    }
    .certification-outer-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 1.5em 0;
    }
    
}
@media screen and (max-width: 649px) {
    .certification-img-container {
        flex: 0 0 calc(100% - 20px); /* Set width to 50% with margin */
        margin: 10px; /* Optional: Adjust margin for spacing between columns */
        height: 150px;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .certification-img-container img{
        height: auto;
        width: 27%;
        object-fit: cover;
    }
    .certification-outer-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        margin: 1.5em 0;
    }
    
}

@media screen and (min-width: 431px) and (max-width: 500px) {
    .certification-img-container img{
        width: 32%;
    }
}

@media screen and (max-width: 430px) {
    .certification-img-container img{
        width: 41%;
    }
}




/******************************************************* Our Certifications Ended **************************************************************/



  /********************************************************* Contact Us Section Started *********************************************************/


.contactUs {
    padding: 2% 5%;
    min-height: 100vh;
}

.contactHeader{
    font-weight: bold;
    font-size: 30px;
    color: var(--green);
}

.contact-sub-heading{
    font-size: 20px;
    font-weight: 500;
    margin: .5em 0;
}

.contact-flex-container{
    display: flex;
    justify-content: center;
    gap: 5%;
}

@media screen and (max-width: 768px) {
    .contact-flex-container{
        justify-content: unset;
        gap: unset;
        flex-direction: column;
    }
}

.contact-flex-container form{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.contactLeftForm{
    flex: 1;
}

.contact-flex-container form > *:not(button){
    margin: .5em 0;
    border-radius: 10px;
    border: none;    
    outline: none;
    border: 1px solid black;
    padding: 10px;
    font-size: 16px;
    transition:  all .3s ease;
}

.contact-flex-container form > *:focus:not(button) {
    border: 2px solid var(--green);
}

.contact-flex-container form textarea::-webkit-scrollbar{
    display: none;
}

.submitBtn{
    border: none;
    outline: none;
    background: var(--green);
    color: var(--white);
    padding: 10px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all .3s ease;
}

.submitBtn:hover{
    color: var(--big);
}

.contactRightMap{
    flex: 1.5;
}

.contactRightMap iframe{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
}

@media screen and (max-width: 768px) {
    .contactRightMap iframe{
        margin-top: 5%;
        width: 100%;
        height: 400px;
    }
}




/* 
  .contactUs{
    min-height: 100vh;
    padding: 2%;
    padding-bottom: 7% !important; 
  }

  .contactUs h2{
    text-align: left;
  }
  .contact-content-Container{
    margin-top: 2%;
    position: relative;
  }

  .contactMap{
    position: relative;
  }

  #contactMapOverlay{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(225,225,225,0);
    z-index: 9;
    cursor: pointer;
  }

  .contactMap .iframeContainer{
    border: none;
    height: 450px;
    width: 100%;
  }

  .iframeContainer iframe{
    height: 100%;
    width: 100%;
    border: none;
  }
  

  .iframeContainer.fullScreen{
    position: fixed;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    }

    

 .closeIcon{
    position: absolute;
    color: var(--green);
    z-index: 99;
    font-size: 25px;
    cursor: pointer;
    font-weight: 500;
    top: 1%;
    right: 3%;
    opacity: 0;
    background: black;
    padding: 0.5%;
    border-radius: 10px;    
    transition: all .3s ease;
  }

  .closeIcon:hover{
    background: #ccc;
    color: #333;
  }

  .closeIcon.active{
    opacity: 1;
  }

  .contactDetailsContainer{
    background: #fff;
    min-height: 50vh;
    width: 75%;
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 10px;
    transform: translate(-50%,0%);
    z-index: 9;
    display: flex;
    box-shadow: -1px 2px 11px 0px rgb(97 97 97 / 70%);
  }

  @media screen and (max-width: 900px) {
    .contactDetailsContainer{
        flex-direction: column;
    }
  }
  @media screen and (max-width: 500px) {
    .contactDetailsContainer{
        width: 90%;
    }
  }

  .contactForm{
    flex: 2;
    padding: 2%;
  }

  .sendMsg{
    font-weight: bold;
    color: var(--green);
    font-size: var(--big);
  }

.formContainer{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

  .inputContainer {
    position: relative;
    margin: 32px 0px;
    width: fit-content;
    padding: 0 25px;
    width: 50%;
}

@media screen and (max-width: 600px) {
    .inputContainer{
        width: 100%;
    }
}
.inputLabel {
    position: absolute;
    top: 0; 
    font-weight: 600;
    color: #333;
    transition: transform 0.2s, font-size 0.2s, color 0.2s;
    pointer-events: none;
}

.contactInput {
    border: none;
    outline: none;
    border-bottom: 1px solid #ccc ;
    width: 100%; 
    font-size: var(--normal);
    font-weight: 500;
}

#addressContainer{
    width: 75%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media screen and (max-width:  600px) {
    #addressContainer{
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
    }
}

.contactInput:focus + .inputLabel,
.contactInput:not(:placeholder-shown) + .inputLabel {
    transform: translateY(-24px) scale(0.8);
    font-size: 0.8em;
    color: gray;
}

.submitBtnContainer{
    margin: 0 2.5em;
}

@media screen and (max-width: 600px) {
     .submitBtnContainer{
        margin: 0;
        margin-top: 4%;
    }
}

.formContainer button{
    border: none;
    outline: none;
    background: var(--green);
    height: 40px;
    width: 40px;
    border-radius: 50%;
    font-size: var(--big);
    color: var(--white);
    cursor: pointer;
    box-shadow: 0 0 10px #ccc;
    transition: all .4s ease-in-out;

}
.formContainer button:hover{
    background: #7da04f;
    color: var(--black);
}

  .contactInformation{
    flex: 1;
    background: var(--green);
    width: 100%;
    border-radius: 10px;
    padding: 2%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 5%;
    
  }
.contactDetails{
    margin-top: 2%;
}

  .contactInformation > *{
    color: var(--white);
  }

.contactInfoHeader{
    font-size: var(--big);
    font-weight: 600;
}


.contactAddress, .contactMobile, .contactEmail{
    display: flex;
    gap: 3%;
}

.contactItems{
    margin-top: 5%;
}

.contactItems > *{
    font-size: var(--normal);
    font-weight: 400;
}


.ContactsocialIcons{
    margin-top: 7%;
    display: flex;
    justify-content: flex-start;
    gap: 5%;
}

.ContactsocialIcons div i{
    font-size: 30px;
    color: white;
    transition: all .3s ease;
}
.ContactsocialIcons div i:hover{
    color: #333;
} */

/* ************************************************************** Contact us Section Over **************************************************************/


.footer{
    width: 100%;
    background: #333;
    color: white;
    padding: 1% 0;
}

.footerDetails{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logoImg, .leftSide, .footer-links {
    flex: 1;
}

.logoImg{
    margin-left: 2%;
    padding: 0%;
}

.logoImg img{
    height: 75px;
    width: 200px;
    object-fit: cover;
}
.logoImg svg{
    display: none;
}

.footer-links{
    display: flex;
    align-items: center;    
    gap: 5%;
    width: 100%;
    margin-left: -15%;
}

@media screen and (max-width: 900px) {
    .footer-links{
        margin-left: unset;
        justify-content: center;
    }
}

.footer-links > * {
    margin: .5em 0;
}


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

    .footerDetails{
        flex-direction: column;
        margin-bottom: 4%;
    }
}
@media screen and (max-width: 600px){

    .footerDetails{
        flex-direction: column;
        margin-bottom: 4%;
    }
}
@media screen and (max-width: 500px){

    .footerDetails{
        flex-direction: column;
        margin-bottom: 4%;
    }
    .footer-links{
        flex-direction: column;
        align-items: center;
        gap: 15%;
    }
    .footer-links > *{
        margin: .5em 0;
    }
}

.footerDetails .footer-links a{
    color: var(--white);
    font-weight: bold;
    text-decoration: none;
    transition: all .3s ease;
}

.footerDetails .footer-links a:hover{
    color: var(--green);
}

.leftSide, .centerFooter, .footer-links{
    flex: 1;
}


.contactDetails{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4%;
}

.address, .email, .phone {
    display: flex;
    gap: 5%;
    width: 80%;
    align-items: flex-start;
    flex: 1;
    margin-top: 2%;
}

.contact-icon{
    display: flex;
    justify-content: center;
}

.footer i{
    font-size: 20px;
    color: var(--green);
}


.copyRights{
    padding-top:.5%;
    border-top: 1px solid white;
}
.copyRights p{
    text-align: center;
}

/* Additional styling */

.order-now {
    position: absolute;
    bottom: -25%;
    visibility: hidden;
    transition:  all .3s ease-in-out;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    text-decoration: none;
    width: 100%;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 4%;
    display: flex;
    justify-content: space-between;
}

@media screen and (max-width: 900px) {
    .order-now {
        bottom: 0%;
        visibility: visible;
    }
}

.product-container a {
    position: relative;
}

.product-container a:hover .order-now {
    bottom: 0%;
    visibility: visible;
    transform: scale(1.05);
}