/* =========================================
   AKI FEST HERO SECTION
   CLEAN + OVERFLOW SAFE VERSION
========================================= */


/* =========================
   HERO MAIN
========================= */


.hero {


    min-height:100vh;


    padding:180px 8% 80px;


    display:flex;


    justify-content:space-between;


    align-items:center;


    position:relative;


    overflow:hidden;


    background:


    linear-gradient(

    135deg,

    #fff4f9,

    #ffd6e7

    );


}







/* =========================
   HERO CONTENT
========================= */


.hero-content {


    max-width:650px;


    position:relative;


    z-index:5;


}







.badge {


    display:inline-block;


    background:white;


    padding:10px 20px;


    border-radius:30px;


    color:#ff75a8;


    font-weight:800;


}







.hero h1 {


    font-family:'Fredoka',sans-serif;


    font-size:100px;


    color:#ff75a8;


    line-height:1;


}







.hero p {


    font-size:28px;


    margin:30px 0;


    color:#5b3b4a;


}







/* =========================
   HERO BUTTONS
========================= */


.hero-buttons {


    display:flex;


    gap:20px;


}

/* changed */
.secondary-button{
    margin-left:auto;
    margin-right:auto;
}


.main-button,
.secondary-button {


    padding:16px 35px;


    border-radius:50px;


    text-decoration:none;


    display:flex;


    align-items:center;


    justify-content:center;


    gap:10px;


    font-weight:800;


}







.main-button {


    background:


    linear-gradient(

    135deg,

    #ff8cb7,

    #ffa6c9

    );


    color:white;


}







.main-button img {


    width:25px;


}







.secondary-button {


    background:white;


    color:#ff75a8;


}







/* =========================
   HERO IMAGE AREA
========================= */


.hero-image {


    width:450px;


    max-width:45vw;


    position:relative;


    z-index:3;


    flex-shrink:0;


}







.hero-mascot {


    width:420px;


    max-width:100%;


    height:auto;


    position:relative;


}







/* =========================
   SMALL CHARACTERS
========================= */


.hero-bunny,
.hero-cat {


    position:absolute;


    width:120px;


    height:auto;


    z-index:2;


}







.hero-bunny {


    right:-10px;


    bottom:50px;


}







.hero-cat {


    left:-10px;


    bottom:20px;


}







/* =========================
   DECORATIONS
========================= */


.festival-decoration {


    position:absolute;


    inset:0;


    pointer-events:none;


    overflow:hidden;


    z-index:1;


}



.festival-decoration img {


    position:absolute;


    max-width:100%;


    pointer-events:none;


}







.festival-decoration img:nth-child(1){


    width:220px;


    top:120px;


    right:20px;


}




.festival-decoration img:nth-child(2){


    width:240px;


    left:-50px;


    top:350px;


}




.festival-decoration img:nth-child(3){


    width:170px;


    right:100px;


    top:500px;


}




.festival-decoration img:nth-child(4){


    width:280px;


    top:100px;


    left:35%;


}







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


@media(max-width:1100px){


    .hero {


        padding-left:5%;


        padding-right:5%;


    }



    .hero h1 {


        font-size:75px;


    }



    .hero-image {


        width:350px;


    }



    .hero-mascot {


        width:350px;


    }


}







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


@media(max-width:850px){


    .hero {


        min-height:auto;


        flex-direction:column;


        text-align:center;


        padding:150px 20px 70px;


        width:100%;


    }





    .hero-content {


        width:100%;


    }






    .hero h1 {


        font-size:55px;


        line-height:1.1;


    }





    .hero p {


        font-size:20px;


    }





    .hero-buttons {


        flex-direction:column;


        align-items:center;


    }





    .main-button,
    .secondary-button {


        width:90%;


        max-width:330px;


    }






    /* SAFE IMAGE POSITION */


    .hero-image {


        width:280px;


        max-width:85vw;


        margin:50px auto 0;


        position:relative;


    }





    .hero-mascot {


        width:280px;


        max-width:100%;


    }






    .hero-bunny {


        width:70px;


        right:-5px;


        bottom:30px;


    }





    .hero-cat {


        width:70px;


        left:-5px;


        bottom:20px;


    }






    .festival-decoration {


        display:none;


    }


}







/* =========================
   SMALL PHONES
========================= */


@media(max-width:400px){


    .hero h1 {


        font-size:45px;


    }



    .hero-mascot {


        width:230px;


    }



    .hero-bunny,
    .hero-cat {


        width:55px;


    }


}