/*====================================================
 PRODUCT PAGE
====================================================*/





.product-hero{
                background-image: url(/images/bg-3.webp);
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;


height:100vh;

display:flex;

align-items:center;

justify-content:space-between;


/* padding:30px 0; */
padding-top: 30px;
padding-left: 6%;
padding-right: 4%;



 /* background:

radial-gradient(

circle at right,

rgba(140,198,63,.25),

transparent 40%

),

#050505; */


}




.product-text{


width:45%;
padding-left: 25px;


}



.product-text span{


color:var(--green);

letter-spacing:5px;


}



.product-text h1{


font-family:"Bebas Neue";


font-size:110px;


line-height:.8;


margin:25px 0;


}




.product-text p{


color: white;

font-size:18px;

max-width:400px;


}




.product-text button{


margin-top:40px;


padding:18px 50px;


border:none;


border-radius:50px;


background:var(--green);


}





.product-visual{


width:45%;


height:700px;


position:relative;


display:flex;


align-items:center;


justify-content:center;


}




.product-glow{


position:absolute;


width:500px;

height:500px;


background:var(--green);


filter:blur(100px);


opacity:.3;


}




.product-bottle{


width:450px;


position:relative;


z-index:2;


filter:

drop-shadow(

0 50px 70px

rgba(0,0,0,.8)

);


}



.ingredient{


position:absolute;


font-size:70px;


z-index:3;


}




.lemon-one{

top:20%;

right:15%;

}



.mint-one{

bottom:25%;

left:0%;

}



.ice-one{

bottom:16%;

right:14%;

}





.product-story{


min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

flex-direction:column;


text-align:center;


}



.product-story h2{


font-family:"Bebas Neue";


font-size:110px;


line-height:.85;


}



.product-story p{


margin-top:40px;

color:#aaa;

max-width:500px;


}

@media only screen and (max-width:768px){
    .product-text{
        text-align: left;
        padding-top: 10px;
    }

    .product-p{
        display: flex;
        justify-content: start;
        text-align: left;
        /* padding-bottom: 20px;     */
    }

    .div3{
        margin-top: 0px !important;
    }
}


/*====================================================
 NUTRITION SECTION
====================================================*/


.nutrition{


    min-height:100vh;


    display:flex;


    align-items:center;


    justify-content:center;


    background:#050505;


}





.nutrition h2{


    text-align:center;


    font-family:"Bebas Neue";


    font-size:100px;


}





.nutrition-card{


    display:inline-flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;


    width:250px;


    height:250px;


    margin:25px;


    border-radius:50%;


    background:

    rgba(255,255,255,.05);


    border:

    1px solid rgba(255,255,255,.15);


}

@media only screen and (max-width:768px){
    .nutrition-card{
        width: 150px;
        height: 150px;
    }

    .nutrition-card h3{
        font-size: 50px !important;
    }
   
}


.nutrition-card h3{


    font-family:"Bebas Neue";


    font-size:80px;


    color:var(--green);


}




.nutrition-card span{


    color:#aaa;


}





/*====================================================
 PRODUCT CTA
====================================================*/


.product-cta{


    min-height:80vh;


    display:flex;


    flex-direction:column;


    align-items:center;


    justify-content:center;


    text-align:center;


}




.product-cta h2{


    font-family:"Bebas Neue";


    font-size:110px;


    line-height:.85;


}





.product-cta a{


    margin-top:50px;


    padding:20px 60px;


    border-radius:50px;


    background:var(--green);


    color:#000;


}





@media(max-width:900px){


.product-hero{


flex-direction:column;

height:auto;

padding-top:150px;

padding-bottom: 30px;

}



.product-text,

.product-visual{


width:100%;


}



.product-text h1{


font-size:90px;


}




.product-visual{


height:500px;


}




.product-bottle{


width:300px;


}



.ingredient-grid{


grid-template-columns:1fr;


}




.ingredients h2,

.nutrition h2{
font-size:70px;

}

.product-story h2{
    font-size: 70px;
}

.product-cta h2{
    font-size: 70px;
}

}

@media only screen and (max-width:768px){
    .cta-button{
        padding: 10px 30px;
    }
    
    .product-story{
        min-height: 80vh;
    }

    .nutrition {
        min-height: 80vh;
    }

    
}

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

    .product-text{
        padding-left: 0px;
        padding-top: 0px;
    }

    .product-text h1 {
        font-size: 60px !important;
    }

    .product-text p {
        font-size: 16px !important;
    }

    .cta-button{
        padding: 10px 40px;
    }

    .product-bottle{
        width: 250px;
        left: 10%;
    }
    .ingredient{
        font-size: 50px;
    }

    .product-visual {
        height: 400px;
    }

    .product-story h2{
        font-size: 50px;
    }

    .product-story {
        min-height: 70vh;
    }

    .product-story p {
        padding: 0 15px;
        font-size: 16px;
    }

    .ingredients h2{
        font-size: 50px;
    }

    .ingredients{
        padding: 40px 8% 100px 8%;
    }

    .ingredient-grid{
        margin-top: 0;
    }

    .nutrition h2{
        font-size: 50px;
    }

    .nutrition-card {
        width: 130px;
        height: 120px;
    }

    .nutrition-card h3{
        font-size: 25px !important;
        text-align: center;
    }

    .nutrition-card span{
        font-size: 16px;
        text-align: center;
    }

    .nutrition-card{
        display: block;
        padding-top: 20px;
    }

    .sp{
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .product-cta h2 {
        font-size: 50px;
    }

    .ingredient-grid div{
        text-align: center;
    }

    .logo2{
        height:100px;
        width: 150px;
    }
 
}