:root{
	--primary-green:#d5e6d1;
	--primary-color-2:#b05d46;
	--white-color:#ffffff;
	--black-color:#000000;


	--secondary-green:#6d9167;
	--secondary-color-2:#f8e5e0;

}
@media (min-width: 1200px) and (max-width: 1300px) {
    
}
@media (min-width: 992px) and (max-width: 1199px) {
}
@media (min-width: 768px) and (max-width: 991px) {
}
@media (max-width: 767px) {
}

@media (min-width: 300px) and (max-width: 767px) {

    .container{
        max-width: 350px;
        width: 100%;
    }
    
    .header_wapper .nav-menu-l ,.header_wapper .nav-menu-r  {display: none;}
    .header_wapper {
        display: flex;
    }

    nav{
        display: flex;
        align-items: center;
    
    }

    .off-screen-menu{
        background-color: var(--white-color);
        height: 100vh;
        max-width: 450px;
        position: fixed;
        top: 0px;
        right: -450px;
        display: flex;
        
        align-items: center;
        text-align: center;
        transition: .3s ease;
        width: 100%;
        z-index: 10;

    }
    .off-screen-menu.active ul li{
        color: var(--black-color);
        list-style-type: none;
        font-family: 'Gotham';
        font-size: 40px;
        padding-left: 20px;
        text-align: left;
    }

    .off-screen-menu.active{
        right: 0px;

    }

    .ham-menu{
      height: 50px;
      width: 50px; 
      margin: 0px 10px 0px auto;
      position: relative;
      z-index: 20;
     
    }

    .ham-menu span{
        display: block;
        height: 4px;
        width: 100%;
        background-color: var(--primary-color-2);
        border-radius: 25px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: .3s ease;
    }

    .ham-menu span:nth-child(1){
        top: 25%;
    }
    .ham-menu span:nth-child(3){
        top: 75%;
    }

    .ham-menu.active span:nth-child(1){
        top: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .ham-menu.active span:nth-child(2){
        opacity: 0;
    }
    .ham-menu.active span:nth-child(3){
        top: 50%;
        transform: translate(-50%,-50%) rotate(-45deg);
    }

    .best-pro-collective{
        display: block;
    }
    .product-info{
        text-align:center
    }
    .why-us p{
        font-size: 150px;
    }
    .ingredients-header-text h2{
        text-align: center;
    } 
    .desktop-img-ep{
        display: none;
    }
    .mobile-img-ep{
        display: block;
    }

    .para-one, .para-three, .para-two{
        text-align: center;
        padding: 20px 0px;

    }
    .essentials_photos img{
        height: 280px
    }
    .comp-tab-header-img{
        flex-direction: column;
    }
    .comp-tab-header-body .body-text3{
        padding: 0px;
    }
    .off-screen-menu active ul{
    position: absolute;
    left: 20px;
    top: 100px;
}
.banner_wapper img{
    height: 300px;
}


.written-content .nav{
    flex-direction:column
}
#primary-img{
    height: 500px;
}
.main-contact-us .form{
    display: block; 
    z-index: 1;
}

.main-contact-us{
padding: 0px 0px 20px 0px;
}

.footer-links ul{
flex-direction: column;
align-items: center;
}


}


    @media (max-width: 768px) {
        
      }