@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bangers&family=Bebas+Neue&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


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

html {
    min-height: 100vh;
    overflow-x: clip;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #fff;
    overflow-x: clip;
}

/** desktop layout **/

.wrapper{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

nav{
    height: 50px;
    background-color: #FDF3E7;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
}

nav ul{
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

nav li{
    height: 50px;
}

nav a{
    color: #000000;
    font-size: 1rem;
    height: 100%;
    padding: 0 30px;
    text-decoration: none;
    display: flex;
    align-items: center;
} 

nav a:hover{
    background-color: #efc38d;
}

nav li:first-child{
    margin-right: auto;
}

.sidebar{
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 250px;
    z-index: 999;
    background-color: #edd4b5;
    box-shadow: -10px 0 10px rgba(0,0,0,0.1);
    display: none;
    flex-direction: column;
    align-items: start;
    justify-content: start;
}

.sidebar li{
    width: 100%;
}

.sidebar a{
    width: 100%;
}

.menu-button{
    fill: #000000;
    display: none;
}

.close-button{
    fill: #000000;
}

.logo_text {
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.5rem;
}

.nav_text {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
}

#home_hero{
    height: 100vh;
    background: #c53824 url("../images/texture_paper.png") left repeat;
    background-size:auto;
    padding: 1.5rem;
    display: flex;
    justify-content:center;
    align-items:center;
    gap: 2rem;

}

.home_hero_men {
    flex: 1;
    max-width: 50%;
    text-align: center;
    width: 100%;
    flex: 1;
}

.home_hero_men img {
    max-width: 100%;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
}

.home_herobox {
    padding-top: 15px;
    max-width: 400px;
    text-align: center;
}

.home_herobox h1{
    margin-bottom: 0.5rem;
    font-family:"Bangers", sans-serif;
    font-weight: 400;
    font-size: 5rem;
    color: #fff;
}

.home_herobox p{
    margin-bottom: 1.5rem;
    font-family: "Poppins",sans-serif;
    font-size: 1rem;
    color: #fff;
}

.home_hero_btn{
    background-color: #FD863C;
    color: #ffffff;
    font-family: "Poppins",sans-serif;
    font-size: 1rem;
    text-decoration: none;
    padding: 0.5rem 3rem;
    border-radius: 4px;
}

.home_hero_btn:hover {
    background-color: #e05716;
}

#home_intro{
    min-height: 400px;
    background: #fff url(../images/cloth_texture.png) repeat;
    padding: 3rem;
    flex: 1;
    text-align: left;
}

.home_intro_container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
}

.home_introbox{
    flex: 1;
    text-align: left;
    max-width: 400px;
}

.home_introbox h2{
    font-family:"Bangers", sans-serif;
    font-weight: 400;
    font-size: 3rem;
    color: #000;
}

.home_introbox p{
    font-family: "Poppins",sans-serif;
    font-size: 1rem;
    color: #000;
}

.home_intro_flour{
    flex: 1;
    text-align: center;
}

.home_intro_flour img{
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

#home_reason {
    background: url("../images/wall.png") repeat;
    background-repeat: repeat-y;
    background-size: cover;
    padding: 4rem 0;
    position: relative;
    min-height: 1800px;
}

.home_reason_topic h2{
    font-family:"Bangers", sans-serif;
    font-weight: 400;
    font-size: 4rem;
    color: #ffffff;
    margin-bottom: 3rem;
}

.color_card {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin: 1rem 0;
}

.color_card.left {
    justify-content: flex-start;
}

.color_card.right {
    justify-content: flex-end;
}

.home_reason_container {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    max-width: 500px;
}

.paint {
    position: absolute;
    top: -50px;
    left: -180px;
    width: 700px;
    height: 350px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
}

.home_reasonbox{
    position: relative;
    padding: 20px;
    max-width: 300px;
    color: #000;
    z-index: 1;
    box-sizing: border-box;
}

.home_sticker {
    position: absolute;
    width: 250px;
    height: auto;
    z-index: 1;
    pointer-events: none;
}

.blue_icon{
    top: -130px;
    left: -200px;
}

.orange_icon{
    top: 200px;
    left: 260px;
}

.beige_icon{
    top: 300px;
    left: 150px;
}

.white_icon{
    top: 100px;
    left: 400px;
}

.home_reasonbox h3 {
    font-family: "Anton", sans-serif;
    font-size: 2rem;
    font-weight: 600;
    position: relative;
    z-index: 2;
}

.home_reasonbox p {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    position: relative;
    z-index: 2;
}

.yellow {
    background-image: url("../images/yellow.png");
}
.orange {
    background-image: url("../images/orange.png");
}
.paint.orange {
    width: 800px;
    height: 650px;
    top: -130px;
    left: -300px;
}

.blue {
    background-image: url("../images/blue.png");
}
.beige {
    background-image: url("../images/beige.png");
}
.paint.beige {
    width: 850px;
    height: 600px;
    top: -120px;
}

.white {
    background-image: url("../images/white.png");
}
.paint.white {
    width: 850px;
    height: 600px;
    top: -180px;
    left: -250px;
}

.rotate1 {
    transform: rotate(-3deg);
}
.rotate2 {
    transform: rotate(15deg);
}
.rotate3 {
    transform: rotate(4.5deg);
}
.rotate4 {
    transform: rotate(0.5deg);
}
.rotate5 {
    transform: rotate(-15.5deg);
}

.spoon {
    position: absolute;
    top: 1rem;
    right: 0;
    width: 500px;
}

footer{
    background-color: #7A1717;
    color: #fff;
    text-align: center;
    min-height: 100px;
    padding: 20px;
}

footer h3{
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
}

#explore_hero{
    min-height: 550px;
    background: #7A1717 url("../images/texture_paper\ 3.png") repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.explore_hero_container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8rem;
}

.left_hand img{
    width: 200px;
    height: auto;
}

.right_hand img{
    width: 200px;
    height: auto;
}

.explore_herobox {
    text-align: center;
    max-width: 570px;
    color: #fff;
}

.explore_herobox h1{
    font-size: 3.5rem;
    font-family: "Bangers", sans-serif;
    font-weight: 400;
}

.explore_herobox p{
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
}


#explore_about {
    background: url("../images/old\ paper\ texture.png") repeat;
    padding: 200px 20px;
}

.explore_about_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60px;
    gap: 2rem;
    flex-wrap: nowrap;
}


.explore_about_img {
    position: relative;
    width: 45%;
}

.explore_about_img img {
    width: 100%;
    height: auto;
    display: block;
}

.roti_1 img { transform: rotate(-7deg); }
.roti_2 img { transform: rotate(14deg); }
.roti_3 img { 
    transform: rotate(-1deg); 
    max-width: 400px;
}
.roti_4 img { transform: rotate(9.5deg); }
.roti_5 img { transform: rotate(-12deg); }

.nail_1 img,
.nail_2 img,
.nail_3 img,
.nail_4 img,
.nail_5 img {
  position: absolute;
  width: 100px;
}

.nail_1 img { top: -95px; left: 400px; }
.nail_2 img { top: -120px; left: 10px; }
.nail_3 img { top: -60px; left: 130px; }
.nail_4 img { top: -100px; left: -20px; }
.nail_5 img { top: -110px; right: 15px; }

.sticker_1 img {
    position: absolute;
    width: 300px;
}
.sticker_2 img {
    position: absolute;
    width: 200px;
}
.sticker_3 img {
    position: absolute;
    width: 200px;
}
.sticker_4 img {
    position: absolute;
    width: 300px;
}
.sticker_5 img {
    position: absolute;
    width: 200px;
}
.sticker_6 img {
    position: absolute;
    width: 250px;
}

.sticker_1 img { top: -120px; left: -150px; }
.sticker_2 img { bottom: -120px; left: -80px; transform: rotate(-7deg); }
.sticker_3 img { bottom: -15px; right: -60px; transform: rotate(-120deg); }
.sticker_4 img { top: 200px; left: 250px; }
.sticker_5 img { bottom: -70px; right: -90px; transform: rotate(-6deg); }
.sticker_6 img { right: 110px;}

.explore_about_text {
  width: 45%;
  color: #732e00;
  text-align: center;
}

.explore_about_text h2 {
    font-family: "Bangers", sans-serif;
    font-size: 3rem;
    font-weight: 400;
}

.explore_about_text p {
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
}

#explore_how {
    background: #593702 url("../images/wood_texture.png") repeat;
    padding: 80px 0;
}

.explore_how_topic h2 {
    text-align: center;
    font-family: "Bangers", sans-serif;
    color: #4D2409;
    font-size: 3.5rem;
    margin-bottom: 40px;
    font-weight: 400;
}

.explore_how_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.explore_how_card {
    text-align: center;
    padding: 10px;
}

.explore_how_card .adjust_sugar{
    width: 80%;
    height: auto;
    margin-top: 40px;
    margin-bottom: 20px;
}

.explore_how_card .adjust_milk{
    width: 105%;
    height: auto;
    margin-bottom: -15px;
}

.explore_how_card img {
    width: 300px;
    height: auto;
    margin-bottom: 15px;
}

.explore_how_card h3 {
    font-size: 2rem;
    font-family: "Bangers",sans-serif;
    font-weight: 400;
    color: #000;
    margin-bottom: 10px;
}

.explore_how_card p {
    font-family: "Poppins",sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #000;
}

#stories_hero {
    background-image: url("../images/Where_Roti_Canai_Come_From.png");
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 5vw;
    padding-right: 5vw;
    color: white;
    position: relative;
}

.left_container{
    display: flex;
    align-items: center;
    height: 100vh;
    justify-content: flex-start;
}

.stories_herobox {
    max-width: 500px;
    text-align: left;
}

.stories_herobox h1 {
    font-family: "Bangers", sans-serif;
    font-size: 6rem;
    font-weight: 300;
}

#stories_cultural {
    background-image: url("../images/A_cultural_Icon.png");
    background-size: cover;
    background-position: center;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 5vw;
    padding-right: 5vw;
    color: white;
    position: relative;
}

.stories_culturalbox{
    max-width: 480px;
    text-align: left;
}

.stories_culturalbox h2{
    font-family: "Bangers", sans-serif;
    font-size: 3rem;
    font-weight: 400;
}

.stories_culturalbox p{
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 400;
}

#stories_journey{
    background: #000 url(../images/cloth_texture.png) repeat center;
    padding: 5vw 0;
}

.stories_journey_container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    flex-wrap: wrap;
}

.stories_journey_img img{
    max-width: 100%;
    height: auto;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.stories_journey_img {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.stories_journeybox{
    flex: 1;
    min-width: 300px;
    text-align: left;
}

.stories_journeybox h2{
    font-family: "Bangers", sans-serif;
    font-weight: 300;
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.stories_journeybox p{
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 1rem;
}

#stories_mean{
    min-height: 400px;
    background: #7A1717 url("../images/texture_paper\ 3.png") repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.stories_meanbox {
    max-width: 1200px;
    color: #fff;
}

.stories_meanbox h2{
    text-align: center;
    font-size: 3.5rem;
    font-family: "Bangers", sans-serif;
    font-weight: 300;
    margin-bottom: 2rem;
}

.stories_meanbox p{
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
}

.stories_meanbox li{
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
}

.stories_meanbox ul{
    list-style-type: disc;
    padding-left: 2rem;
    margin-bottom: 1rem;
}

#stories_evolution{
    padding: 5vw 0;
    background: #000 url("../images/old\ paper\ texture.png");
}

.stories_evolution_intro{
    text-align: left;
    max-width: 800px;
    margin: 0 auto 3rem auto;
}

.stories_evolution_intro h2{
    font-size: 2.5rem;
    font-weight: 400;
    font-family: "Bangers", sans-serif;
    margin-bottom: 0.5rem;
}

.stories_evolution_intro p{
    font-size: 1rem;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
}

.card_container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 2rem;
    max-width: 1200px;
}

.evolution_card {
    display: flex;
    width: 30%;
    flex-direction: column;
    text-align: left;
}

.evolution_card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.evolution_card_text {
    padding: 1rem;
    font-family: "Poppins", sans-serif;
}

.evolution_card_text li {
    font-size: 1rem;
}

#stories_cta {
    background-image: url("../images/call_to_action.png");
    background-size: cover;
    background-position: center;
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 5vw;
    padding-right: 5vw;
    color: white;
    position: relative;
}

.stories_ctabox {
    max-width: 480px;
    text-align: left;
}

.stories_ctabox h2{
    font-family: "Bangers", sans-serif;
    font-size: 3rem;
    font-weight: 400;
}

.stories_ctabox p{
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 2rem;
}

.cta_button {
    background-color: #F1B36C;
    color: #000;
    font-family: "Poppins",sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.5rem 3rem;
    border-radius: 4px;
}

.cta_button:hover{
    background-color: #ce6c2a;
}





@media screen and (max-width: 768px) {
    .hideOnMobile{
        display: none;
    }

    .menu-button{
        display: block;
    }

    #home_hero {
        flex-direction: column;
        padding: 2rem 1rem 3rem 2rem;
        height: auto;
        gap: 1.5rem;
        text-align: center;
    }

    .home_hero_men {
        max-width: 100%;
        width: 100%;
    }

    .home_hero_men img {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        display: block;
    }

    .home_herobox {
        max-width: 100%;
        padding: 0 1rem;
    }

    .home_herobox h1 {
        font-size: 2.2rem;
        margin-bottom: 1rem;
        color: #fff;
        font-family: "Bangers", sans-serif;
    }

    .home_herobox p {
        font-size: 0.8rem;
        margin-bottom: 1.5rem;
        color: #fff;
        font-family: "Poppins", sans-serif;
    }

    .home_hero_btn {
        font-size: 0.8rem;
        padding: 0.3rem 1.5rem;
        border-radius: 4px;
        margin-bottom: 4rem;
    }

    #home_intro{
        padding: 5rem 1rem 3rem 1rem;
    }

    .home_intro_container {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        text-align: center;
        padding-bottom: 7rem;
    }

    .home_introbox {
        max-width: 90%;
        z-index: 2;
    }

    .home_introbox h2 {
        font-size: 2.2rem;
        margin-bottom: 1rem;
        text-align: center;
    }

    .home_introbox p {
        font-size: 0.8rem;
        text-align: center;
    }

    .home_intro_flour {
        position: relative;
        width: 500px;
        height: auto;
        overflow: visible;
    }

    .home_intro_flour img {
        position: absolute;
        right: -10px;
        bottom: -160px;
        width: 300px;
        max-width: 80%;
        z-index: 0;
    }

    .home_reason_topic h2 {
        font-size: 2.5rem;
        text-align: center;
    }

    #home_reason {
        min-height: 1200px;
    }

    .home_reasonbox{
        margin-bottom: 3rem;
    }

    .home_reasonbox h3 {
        font-size: 1.5rem;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .home_reasonbox p {
        font-size: 0.8rem;
        text-align: center;
    }

    .color_card {
        flex-direction: column;
        align-items: center;
    }

    .home_reason_container {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .home_reasonbox {
        max-width: 90%;
        padding: 1rem;
        position: relative;
    }

    .spoon {
        display: none;
    }

    .home_sticker {
        display: none;
    }

    .paint{
        width: 500px;
        height: 300px;
    }

    .paint.yellow {
        width: 500px;
        height: 300px;
        top: -60px;
        left: -170px;
    }

    .paint.blue {
        width: 500px;
        height: 300px;
        top: -80px;
        left: -80px;
    }

    .paint.orange {
        width: 600px;
        height: 400px;
        top: -60px;
        left: -200px;
    }

    .paint.white {
        width: 600px;
        height: 300px;
        top: -70px;
        left: -180px;
    }

    footer{
        min-height: 60px;
    }

    footer h3{
        font-size: 1rem;
        font-weight: 400;
    }

    footer p{
        font-size: 0.8rem;
    }

    .left_hand,
    .right_hand {
        display: none;
    }

    .explore_hero_container {
        gap: 2rem;
        padding: 0 1.5rem;
    }

    .explore_herobox h1 {
        font-size: 2rem;
        margin-bottom: 15px;
    }

    .explore_herobox p {
        font-size: 0.95rem;
    }

    #explore_about{
        padding: 50px 10px 10px 10px;
    }

    .explore_about_row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        margin-bottom: 50px;
    }

    .explore_about_img {
        order: 1;
        width: 100%;
        text-align: center;
    }
    .explore_about_text {
        order: 2;
        width: 100%;
        text-align: center;
        padding: 0 20px;
    }

    .explore_about_text h2 {
        font-size: 1.5rem;
    }

    .explore_about_text p {
        font-size: 0.8rem;
    }

    .nail_1 img,
    .nail_2 img,
    .nail_3 img,
    .nail_4 img,
    .nail_5 img {
        position: absolute;
        width: 40px;
    }

    .nail_1 img { top: -35px; left: 180px; }
    .nail_2 img { top: -50px; left: 0px; }
    .nail_3 img { top: -25px; left: 70px; }
    .nail_4 img { top: -45px; left: -5px; }
    .nail_5 img { top: -45px; left: 170px; }

    .sticker_1 img{
        position: absolute;
        width: 110px;
    }
    .sticker_2 img{
        position: absolute;
        width: 70px;
    }
    .sticker_3 img {
        position: absolute;
        width: 100px;
    }
    .sticker_4 img {
        position: absolute;
        width: 120px;
    }
    .sticker_5 img {
        position: absolute;
        width: 90px;
    }
    .sticker_6 img {
        position: absolute;
        width: 150px;
    }

    .sticker_1 img { top: -40px; left: -50px; }
    .sticker_2 img { bottom: -20px; left: -10px; transform: rotate(-7deg); }
    .sticker_3 img { bottom: -15px; right: -20px; transform: rotate(0deg); }
    .sticker_4 img { top: 100px; left: 120px; }
    .sticker_5 img { bottom: -30px; right: -10px; transform: rotate(-6deg); }
    .sticker_6 img { bottom: -330px; right: 10px;}

    .explore_about_img img {
        max-width: 100%;
        height: auto;
    }

    .paintbox,
    .paintbox2 {
        position: relative;
        z-index: 1;
    }

    .paintbox2::after {
        content: "";
        position: absolute;
        top: -90px;
        left: 50%;
        transform: translateX(-70%);
        background-image: url("../images/yellow_ink.png");
        background-size: contain;
        background-repeat: no-repeat;
        width: 300px;
        height: 300px;
        z-index: -1;
    }

    .paintbox::after {
        content: "";
        position: absolute;
        top: -160px;
        left: 50%;
        transform: translateX(-50%);
        background-image: url("../images/yellow_ink.png");
        background-size: contain;
        background-repeat: no-repeat;
        width: 500px;
        height: 500px;
        z-index: -1;
    }

    .paintbox h2,
    .paintbox p {
        position: relative;
        z-index: 2;
    }

    .explore_about_img {
        position: relative;
        z-index: 3;
    }

    .explore_how_topic h2 {
        text-align: center;
        font-family: "Bangers", sans-serif;
        color: #4D2409;
        font-size: 2.5rem;
        margin-bottom: 40px;
        font-weight: 400;
    }

    .explore_how_grid {
        grid-template-columns: 1fr;
    }

    .explore_how_card img {
        width: 240px;
        height: auto;
        margin-bottom: 10px;
    }

    .explore_how_card h3 {
        font-size: 2rem;
        font-family: "Bangers",sans-serif;
        font-weight: 400;
        color: #000;
        margin-bottom: 10px;
    }

    .explore_how_card p {
        font-family: "Poppins",sans-serif;
        font-weight: 400;
        font-size: 1rem;
        color: #000;
    }

    #stories_hero {
        background-image: url("../images/where_roti_canai_come_from_2.png");
        justify-content: center;
        padding: 0 15%;
        text-align: center;
    }

    .left_container {
        justify-content: center;
        text-align: center;
    }

    .stories_herobox {
        max-width: 100%;
    }

    .stories_herobox h1{
        font-size: 3rem;
        text-align: center;
    }

    #stories_cultural {
        background-image: none;
        padding: 0;
        height: auto;
    }

    #stories_cultural .left_container{
        background-image: url("../images/a_cultural_icon_2.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        justify-content: center;
        align-items: flex-start;
        padding: 10vh 5vw 5vh 5vw;
        text-align: center;
    }

    #stories_cultural .stories_culturalbox {
        max-width: 90%;
        text-align: center;
    }

    #stories_cultural .stories_culturalbox h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    #stories_cultural .stories_culturalbox p {
        font-size: 0.8rem;
        max-width: 100%;
    }

    #stories_cta {
        background-image: none;
        padding: 0;
        height: auto;
    }

    #stories_cta .left_container{
        background-image: url("../images/call_to_action_2.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        justify-content: center;
        align-items: flex-end;
        padding: 10vh 5vw 15vh 5vw;
        text-align: center;
    }

    #stories_cta .stories_ctabox {
        max-width: 100%;
        text-align: center;
    }

    #stories_cta .stories_ctabox h2{
        font-size: 2rem;
        text-align: center;
    }

    #stories_cta .stories_ctabox p{
        font-size: 0.8rem;
        font-weight: 400;
        margin-bottom: 2rem;
    }

    #stories_cta .cta_button{
        font-size: 0.8rem;
        font-weight: 400;
        text-decoration: none;
        padding: 0.3rem 2rem;
    }

    .stories_journey_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2rem 6vw;
        gap: 2rem;
    }

    .stories_journey_img{
        width: 100%;
    }

    .stories_journey_img img {
        max-width: 90%;
    }

    .stories_journeybox {
        padding: 0;
        max-width: 90vw;
        width: 100%;
        min-width: 200px;
        text-align: center;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .stories_journeybox h2 {
        font-size: 1.5rem;
    }

    .stories_journeybox p {
        font-size: 0.8rem;
    }

    #stories_mean {
        padding: 2rem 1rem;
    }

    .stories_meanbox {
        max-width: 100%;
    }

    .stories_meanbox h2 {
        font-size: 1.5rem;
    }

    .stories_meanbox p {
        font-size: 0.8rem;
    }

    .stories_meanbox li {
        font-size: 0.8rem;
    }

    .stories_meanbox ul {
        padding-left: 1.5rem;
    }

    #stories_evolution{
        padding: 3rem 1rem;
    }

    .card_container {
        flex-direction: column;
        align-items: center;
    }

    .evolution_card {
        width: 100%;
    }

    .evolution_card img {
        height: 180px;
    }

    .evolution_card_text {
        padding: 0.75rem;
        text-align: center;
    }

    .evolution_card_text li {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .stories_evolution_intro h2 {
        font-size: 1.5rem;
        text-align: center;
    }

    .stories_evolution_intro p {
        font-size: 0.95rem;
        text-align: center;
    }









}