*{
box-sizing:border-box;
margin:0;
padding:0;
}

html, body{
width:100%;
height:100%;
}

body{
font-family:"Afacad",sans-serif;
display:flex;
align-items:center;
justify-content:center;
overflow: hidden;
}

/* MAIN */

.container{
width:100%;
height:100vh;

display:flex;
align-items:center;
justify-content:center;
/* gap:60px; */

padding:40px;
}

/* TEXT */

.text{
max-width:550px;
}

.title{
font-size:clamp(24px,3vw,40px);
line-height:1;
}

.title h1:nth-child(1),
.title h1:nth-child(3){
color:#14414D;
text-transform:uppercase;
}

.highlight{
background:#3ABF2B;
color:white;
display:inline-block;
padding:4px 10px;
font-style:italic;
text-transform:uppercase;
}

.description{
margin-top:12px;
margin-bottom: 40px;
font-size:clamp(20px,2vw,26px);
color:#2E2E2E;
}

.description span{
font-weight:600;
}

/* LOGO */

.logo{
margin-top:25px;
}

.logo img{
width:180px;
}

/* BOTTLE */

.bottle{
display:flex;
align-items:center;
justify-content:center;
}

.bottle img{
max-width:550px;
width:100%;
transform:translateY(260px);
transition:transform .3s;
}

.bottle img:hover{
transform:translate(20px,110px);
}

/* ====================== */
/* TABLET */
/* ====================== */

@media (max-width:900px){

    .container{
        margin-top: 200px;
        flex-direction:column;
        text-align:center;
        /* gap:30px; */
    }

    .bottle img{
    max-width:180px;
    transform:translate(0px,70px);
    }

    .bottle img:hover{
    transform:translate(0px,0px);
    }
}

/* ====================== */
/* MOBILE */
/* ====================== */

@media (max-width:500px){

    .container{
    padding:20px;
    margin-top: 160px;
    }

    .description{
    font-size:18px;
    }

    .bottle img{
    max-width:180px;
    transform:translate(0px,70px);
    }

    .bottle img:hover{
    transform:translate(0px,0px);
    }

    .highlight{
background:#3ABF2B;
color:white;
display:inline-block;
padding:4px 5px;
font-style:italic;
text-transform:uppercase;
}

.logo{
margin-top:15px;
}
}

@media (max-width:316px){

    .container{
    padding:20px;
    margin-top: 280px;
    }
}