@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,100..900;1,100..900&family=Inter:wght@100..900&display=swap');

body {font-family: "Inter", sans-serif; font-weight:500; font-size: 16px;}
h1 {font-family: "Bitter", serif; font-style: normal; font-weight: 800; font-size: 48px; line-height: 1.0;}
h2{font-family: "Bitter", serif; font-weight: 900; font-size: 32px;  padding: 15px 0; line-height: 1.0;}
h3{font-family: "Inter", sans-serif; font-weight:200; font-size: 20px;}
h4{font-family: "Inter", sans-serif; font-weight:200; font-size: 16px; margin: 0;}
h5{font-family: "Inter", sans-serif; font-weight:900; font-size: 10px; letter-spacing: 28%; margin: 0;}

    @media screen and (max-width: 1024px) {
        h1 {font-size: 46px;}}
    @media screen and (max-width: 990px) {
        h1 {font-size: 44px;}}
    @media screen and (max-width: 768px) {
        h1 {font-size: 40px;}}
    @media screen and (max-width: 650px) {
        h1 {font-size: 36px;}
        h2 {font-size: 30px;}
        h3 {font-size: 18px;}
        h4 {font-size: 14px;}}
    @media screen and (max-width: 480px) {
        h1 {font-size: 32px;}
        h3 {font-size: 16px;}}

html {height: 100%;}
body {width: 100%;  margin: 0 auto; background-color: white;}
    

* {margin: 0; padding: 0; outline: none;}
a {text-decoration: none;}
img {max-width: 100%}
p {margin-top: 15px; margin-bottom: 15px;}


.container {width: 92%; max-width: 1100px; margin: 0 auto; }

/*header*/

header { background-color: white;}
    

header{position:fixed; top: 0; left: 0; right: 0; z-index: 9;}    

/**/ header .container { height: 80px; display: flex; justify-content: space-between; align-items: center;}
     
header .container nav {width: 310px;}
    @media screen and (max-width: 768px) {header .container nav {width: 260px;}}  
    @media screen and (max-width: 650px) {header .container nav {width: 230px;}}

/**/ header .container nav ul {list-style: none; display: flex; justify-content: space-between; }
header .container nav ul a {color: #000; text-decoration: none;}
    
header .container nav ul a:hover {font-weight: 800}

    @media screen and (max-width: 650px) {header .container img {width: 80%;}}
   

/*hero with BG*/
.hero {background-image:url(../img/Balm_1200.jpg); background-position: center; background-size: cover; height: 450 px; }
    @media screen and (max-width: 1024px) {.hero {background-image:url(../img/Balm_1024.jpg);}}
    @media screen and (max-width: 768px) {.hero {background-image:url(../img/Balm_768.jpg);}}
    @media screen and (max-width: 650px) {.hero {background-image:url(../img/Balm_650.jpg);}}
   

/*white block in BG*/
.hero-name-in {height: 450px; }
.hero-name-in {position: relative; } 
.hero-name-in {width: 60%; } 
    
.hero-name-in-text {position: absolute; bottom: 0; background-color: white; width: 100%;}
    
.hero-name-in-text h1 {padding: 40px 0 0 50px;} 

    @media screen and (max-width: 1024px) {
        .hero-name-in {width: 65%;}}
    @media screen and (max-width: 990px) {
            .hero-name-in {width: 70%;}}
    @media screen and (max-width: 768px) {
        .hero-name-in {width: 55%; min-width: 500px; }
        .hero-name-in h1 { padding: 30px 0 0 30px;}
    }

    @media screen and (max-width: 650px) {
        .hero, .hero-name-in {height: 360px; }
        .hero-name-in {width: 85%; min-width: 360px; margin: 0 auto; }
        .hero-name-in-text {
            margin: 0 auto; display: flex; flex-direction: column; align-content: space-between;}
        .hero-name-in-text h1 {width: 90%; padding-left: 0; margin: 0 auto;}}


    @media screen and (max-width: 480px) {
        .hero-name-in {min-width: 300px; }
    }



/*block under Balm with text and btn */
.hero-down-in-text {margin-left: 30px; margin-bottom: 60px;}
   
.hero-down-in-text h3 {margin: 20px 0;}

.hero-down-in-text .btn {background-color: black; color: white; 
    border: none; border-radius: 1px;
    letter-spacing: 2px; font-size: 800;
    padding: 15px 30px;
    transition: all 500ms ease;}
    
    @media screen and (max-width: 650px) {
        .hero-down container {margin-bottom: 70px;}
        .hero-down-in {width: 85%; min-width: 360px; margin: 0 auto; }
        .hero-down-in-text {width: 90%; margin: 0 auto;
                margin: 0 auto; display: flex; flex-direction: column; align-content: space-between;}
        .hero-down-in-text h3 {padding: 15px 0;}}

    @media screen and (max-width: 480px) {
        .hero-down-in {min-width: 300px;}}




/* Minje, who are we? */

.about {height: 370px;}
.about-fl {display: flex; flex-direction: row;  justify-content: space-between; align-items: center;}
.about-fl-text {width: 40%; padding-left: 50px; }
.about-fl-img {width: 45%; min-width: 470px;}

    @media screen and (max-width: 1024px) {
        .about {margin-top: 60px; height: 330px;}
        .about-fl-text {width: 45%; padding-left: 50px; }
        .about-fl-img {width: 45%; min-width: 200px;}
        }
    @media screen and (max-width: 990px) {
        .about {margin-top: 120px; height: 260px;}
        .about-fl-text {width: 52%; padding-left: 50px; }
        .about-fl-img {width: 40%; min-width: 315px;}
        }
    @media screen and (max-width: 768px) {
        .about {height: 255px;}
        .about-fl-text {width: 48%; padding-left: 30px; }
        .about-fl-img {width: 45%; min-width: 300px;}
        }
    @media screen and (max-width: 650px) {
        .about {height: auto;}
        .about-fl {width: 85%; min-width: 360px; margin: 0 auto; display: flex; flex-direction: column;}
        .about-fl-text {width: 90%; margin: 0 auto; padding: 0;}
        .about-fl-img {width: 90%;  margin-top: 20px;}
        }
    @media screen and (max-width: 480px) {
        .about-fl {min-width: 300px;}
        }



/* A various range of brands_grey */
.brands { background-color: #F7F5F3; }
.brands-fl {display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.brands-fl-img {width: 40%; padding-left: 50px;}
.brands-fl-text {width: 45%;}
.brands-fl-text-in {width: 80%; margin: 120px auto;}
    @media screen and (max-width: 990px) {
        .brands-fl-text {width: 40%;}
        .brands-fl-text-in {width: 85%;  margin: 90px auto;}
        }
    @media screen and (max-width: 768px) {.brands-fl-text-in {margin-bottom: 90px;}}
    @media screen and (max-width: 650px) {
        .brands {height: auto; margin-top: 60px;}
        .brands-fl {width: 85%; min-width: 360px; margin: 0 auto; display: flex; flex-direction:column-reverse;}
        .brands-fl-text {width: 90%; height: auto; margin: 0 auto;}
        .brands-fl-text-in {width: 100%; margin: 0; padding-top: 60px;}
        .brands-fl-img {width: 90%;  margin: 30px auto 60px; padding: 0 0 0 0;
                        display: flex; justify-content: space-around;}
        }
    @media screen and (max-width: 480px) {
        .brands-fl {width: 85%; min-width: 300px;}
        }
       
            

/* When do we meet? */
.meet-in {width: 40%; margin: 90px auto;}
.meet-in-text h2 {text-align: center;}
.meet-in-text h4 {text-align: center;}
.meet-in-img {display: flex; justify-content: space-evenly; padding-top: 30px;}
    @media screen and (max-width: 1024px) {.meet-in {width: 50%;}}
    @media screen and (max-width: 990px) {.meet-in {width: 40%; margin: 75px auto 90px;}}
    @media screen and (max-width: 768px) {.meet-in {width: 60%;}}
    @media screen and (max-width: 650px) {.meet-in {width: 70%; margin: 45px auto 60px;}}




/* Footer avec contacts */
.footer { background-color: #F7F5F3; }
.footer-fl {display: grid; grid-template-columns: 30% 30% 30%; justify-content: space-between; padding: 30px 0;}
    
    @media screen and (max-width: 650px) {
        .footer-fl {display: grid; grid-template-columns: 100%; grid-template-rows: auto; justify-items: center;
            grid-row-gap: 30px;
            padding: 30px 0 ;}
    }
    

    

/*whatsapp-button*/
.whatsapp-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    z-index: 9999;
    background-color: #25D366;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill='%23FFF' d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3e%3c/svg%3e");    
    background-size: 50%; 
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.whatsapp-button:before,
.whatsapp-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #25D366;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: border-animate 1.5s linear infinite;
    opacity: 0;
}
.whatsapp-button:after{
    animation-delay: .5s;
}
@keyframes border-animate
{
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}