:root {
--main-primary-color: #e84e01;
--orange: #ff6f11;
--orange-light: #f7b285;
--orange-pale: #fff4ef;
--orange-xpale: #fff9f6;
--black: #0d0d0d;
--gray-dark: #3a3a3a;
--gray-mid: #6b6b6b;
--gray-light: #e8e3de;
--white: #ffffff;
--cream: #fdfaf7;
--font-display: "DM Serif Display", serif;
--font-body: "Inter", sans-serif;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 32px;
--radius-pill: 100px;
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.07);
--shadow-hover: 0 8px 40px rgba(255, 102, 51, 0.18)
}

body{
    height: 2000px;
    min-width: 320px;
    margin: 0;
    font-family: "Inter", sans-serif;
}

h4{
    margin: 0px;
}



      

.section{
    margin-bottom: 60px;
}

.center_container{
    max-width: 800px;            
    margin: auto;
    padding: 0px 30px;
}        

#section_1{
    min-height: 800px;
}
#bg_shadow {
    content: "";
    position: absolute;
    background: radial-gradient(ellipse at 49% 123%, rgba(217, 217, 217, 1) 0%, rgba(255, 255, 255, 1) 100%);
    height: 65vh;
    width: 100%;
    z-index: -1;
}
.hero_container{
    max-width: 800px;
    width: 100%;
    display: block;
    height: 900px;
    margin: auto
}
#row_1{
    height: 25vh;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
#row_2{
    height: 55vh;
    width: 100%;
}        
#row_3{
    display: block;
    height: 540px;
    width: 100%;            
    text-align: center;
}

#row_4{
    height: 25vh;
    width: 100%;
}
#row_5{
    height: 55vh;
    width: 100%;
}
#row_6{
    /* height: 20vh; */
    width: 100%;
}

.case_container {
    margin: 0 auto;
    max-width: 176px;
    width: 100%;
    position: relative;
    height: 50dvh;
    min-height: 400px;
    /* animation: fadeInUp 0.8s ease-in-out forwards; */
    /* background-color: aqua; */
    /* opacity: 0; */
}
#case {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("img/case.png");
    position: relative;
    z-index: 20000;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
#lid {
    display: block;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("img/lid.png");
    z-index: 19000;
}
#bottle {
    display: block;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("img/bottle.png");
}
#case_shadow {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url("img/case_shadow.png");
    top: 0px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    /* opacity: 0; */
    /* animation: fadeIn 0.3s ease-in-out 0.6s forwards; */
}
.title {
    display: block;
    width: 50%;
    height: 64%;
    position: relative;
    background-size: contain;
    float: left;
    background-repeat: no-repeat;
    /* opacity: 0; */
}

.title_holder {
    position: absolute;
    height: max(100px, 10vh);
    /* background: aqua; */
    max-width: 590px;
    width: 100%;
} 
.sant{
    background-image: url("img/sant.svg");
    background-position: center right;
}     
.ashel{
    background-image: url("img/ashel.svg");
    float: right;
    background-position: center left;
}

.bold_heading{
    font-family: "Inter", sans-serif;
    font-weight: 800;
    text-align: center;
}

.sub_heading{
    font-size: 2em;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    text-align: center;
}

.center_text{
    text-align: center;
}

.paragraph{
    text-align: center;
    font-family: "Inter", sans-serif;
    max-width: 686px;
    display: block;
    margin: 12px auto;    
    font-size: 20px;
    line-height: 25px;
}

.no_margin{
    margin: 0;
}

@media screen and (max-width: 768px) {
    .sub_heading{
        padding: 0px 5%;
    }
    .foi{
        width: 100%;
    }
}

#section_3 {
    position: relative;
    top: -30dvh;
    /* height: max(100px, 10vh); */
    text-align: center;
    width: 100%;
}

#heading_2{
    position: fixed;
    /* max-width: 290px; */
    width: 320px;
    display: block;
    top: -16%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.review_section{
    overflow: hidden;
}

#review_scroll{
    height: 395px;
    width: 5700px;
    background-image: url("img/reviews.png");
    margin-top: 20px;
    animation: slide 60s linear infinite;
}

@keyframes slide {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-1920px, 0, 0); /* The image width */
    }
}

#ingredient_holder{
    display: flex;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    width: 100vw;
    max-width: 500px;
    height: 100vh;
    box-sizing: content-box;
    justify-content: space-between;
    align-items: center;
}

.left_column{
    display: flex;
    flex-direction: column;
    gap: 45px;
    padding-left: 16px;
}

.right_column{
    display: flex;
    flex-direction: column;
    gap: 45px;
    padding-right: 16px;
}

.ingredients{
    display: block;
    position: relative;
    background-image: url("img/ingrediants.svg");
    width: 100px;
    height: 100px;
    background-size: 324px;
    /* opacity: 0; */
}

#ingredient_1{
    background-position: 0px 0px;
}

#ingredient_2{
    background-position: -225px 0px;
}        

#ingredient_3{
    background-position: -110px -100px;
}        

#ingredient_4{
    background-position: -110px 0px;
}

#ingredient_5{
    background-position: 0px -100px;
}

#ingredient_6{
    background-position: -215px -100px;
}

.ingredients label{
    font-family: "Inter", sans-serif;
    bottom: -102px;
    text-align: center;
    display: block;
    width: 100px;
    position: relative;
    color: var(--main-primary-color);
}

.primary_text{
    color: var(--main-primary-color);
}

.image_item{
    max-width: 550px;
    width: 100%;
}

#free_of_section{
    background-color: #e9e9e9;
}

.free_of_container{            
    max-width: 1000px;
    margin: 0 auto;
    min-height: 560px;
    background-image: url("img/creams.jpg");
    background-repeat: no-repeat;
    padding: 20px;
}

#free_of_section h1{
    font-weight: 400;
}

#free_of_section h2{
    font-weight: 200;
}

/* Mobile Styles */
@media screen and (min-width: 1000px) {
    .free_of_caption{
        width: 45%;
        float: left;
    }
    .free_of_items{
        width: 52%;
        float: right;
    }
    
}

/* Standard Syntax */
@media (min-width: 1024px) {
    .free_of_container{            
        background-position: left -75%;
    }

    .foi_row:not(:last-child){
        border-bottom: solid 1px #ccc;
    }

    .header-nav {
        transform: translateX(8%);
    }
    
}

#free_of_section p{
    font-weight: 300;
}

.foi_row{
    display: flex;
    padding: 5px;
    flex-wrap: wrap;
}        

.foi{
    min-width: 202px;
    float: left;
    display: flex;
    align-items: center;
}

.foi_icon {
    display: inline-block;
    background-image: url("img/foi_icons.png");
    width: 80px;
    height: 90px;
    background-size: 186px;
}

.foi_text{
    display: inline-block;
    font-size: 14px;
}

#foi_dda{
    background-position-x: -112px;
}

#parabens{
    background-position-y: -107px;
}

#phenoxyethanol{
    background-position-x: -112px;
    background-position-y: -107px;
}

#dyes{
    background-position-y: -214px;
}

#peg{
    background-position-x: -112px;
    background-position-y: -214px;
}

#essential{
    background-position-y: -321px;
}

#polysorbates{
    background-position-x: -112px;
    background-position-y: -321px;
}

.free_of_items{
    background-color: #fff;
    border-radius: 15px;
    padding: 0px 15px;
    margin-top: 51px;
}

.footer {
    padding: 30px;
    background-image: url("img/footer_bg.svg");
    background-size: cover;
    background-position: top center;
}


@media (min-width: 1024px) {
    .footer {
        padding: 72px 136px 10px;
    }

    #contact_form{
            min-width: 450px;
    }
}

@media (max-width: 1024px) {
    #contact_form {
        min-width: 100%;
        text-align: center;
        /* margin: auto; */
        position: relative;
    }

    

    .mobile_padding{
        padding: 0px 16px;
    }
}

.footer_container {
    display: flex;
    min-height: 320px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

input[type="text"],textarea  {
    max-width: 420px;
    border-radius: 15px;
    display: block;
    padding: 12px;
    border: none;
    /* margin: 9px 0px; */
    width: 94%;
    margin: 12px auto;
    font-family: "Inter", sans-serif;
}

a {
    text-decoration: none;
    color: #000;
}

.submit_botton{
    border-radius: 16px;
    border: none;
    background-color: #000;
    color: #fff;
    font-size: 16px;
    padding: 11px 24px;
    margin: auto;
    font-family: "Inter", sans-serif;
    cursor: pointer;
}

.submit_botton:hover{
    background-color: #653e25;
}