/* =========================================
   AKI FEST MAIN STYLE
   Pastel Festival Theme
========================================= */


* {

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

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

    background:#fff4f9;

    color:#5b3b4a;

    overflow-x:hidden;

}



h1,
h2,
h3 {

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

}



img {

    max-width:100%;

    display:block;

}







/* =========================
   LOADER
========================= */


.loader {

    position:fixed;

    inset:0;

    background:#fff4f9;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:9999;

}



.loader img {

    width:180px;

}



.loader h2 {

    margin-top:20px;

    color:#ff75a8;

}







/* =========================
   NAVBAR
========================= */


.navbar {


    position:fixed;


    top:25px;


    left:50%;


    transform:translateX(-50%);


    width:90%;


    max-width:1200px;


    padding:15px 30px;


    background:

    rgba(255,255,255,.75);


    backdrop-filter:blur(15px);


    border-radius:40px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    z-index:1000;


    box-shadow:

    0 10px 30px rgba(255,140,183,.15);


}





.logo {


    display:flex;


    align-items:center;


    gap:10px;


    color:#ff75a8;


    font-size:28px;


    font-weight:800;


}





.logo img {


    width:35px;


}






.nav-links {


    display:flex;


    gap:30px;


}




.nav-links a {


    color:#704b5b;


    text-decoration:none;


    font-weight:700;


    transition:.3s;


}





.nav-links a:hover {


    color:#ff75a8;


}






.menu-button {


    display:none;


    border:0;


    background:none;


    font-size:30px;


    color:#ff75a8;


}









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


.festival-decoration {

    position:absolute;

    inset:0;

    pointer-events:none;

}



.festival-decoration img {


    position:absolute;


    pointer-events:none;


    z-index:0;


}



.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%;


}









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


.hero {


    min-height:100vh;


    padding:

    180px 8% 80px;


    display:flex;


    justify-content:space-between;


    align-items:center;


    position:relative;


    background:

    linear-gradient(

    135deg,

    #fff4f9,

    #ffd6e7

    );


}



.hero-content {


    max-width:650px;


    z-index:5;


}



.badge {


    display:inline-block;


    background:white;


    padding:

    10px 20px;


    border-radius:30px;


    color:#ff75a8;


    font-weight:800;


}




.hero h1 {


    font-size:100px;


    color:#ff75a8;


}



.hero p {


    font-size:28px;


    margin:30px 0;


}





.hero-buttons {


    display:flex;


    gap:20px;


}





.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;


    cursor:pointer;


    border:none;


}




.main-button {


    background:

    linear-gradient(

    135deg,

    #ff8cb7,

    #ffa6c9

    );


    color:white;


}





.main-button img {


    width:25px;


}





.secondary-button {


    background:white;


    color:#ff75a8;


}







.hero-image {


    width:450px;


    position:relative;


}



.hero-mascot {


    width:420px;


}





.hero-bunny,
.hero-cat {


    position:absolute;


    width:120px;


}





.hero-bunny {


    right:-20px;


    bottom:50px;


}





.hero-cat {


    left:-20px;


    bottom:20px;


}









/* =========================
   COUNTDOWN
========================= */


.countdown {


    display:flex;


    gap:15px;


    margin-top:50px;


}




.countdown div {


    background:white;


    padding:20px;


    border-radius:25px;


    min-width:90px;


    box-shadow:

    0 10px 30px rgba(255,140,183,.15);


}





.countdown span {


    display:block;


    color:#ff75a8;


    font-size:40px;


    font-weight:800;


}








/* =========================
   SECTIONS
========================= */


.section {


    padding:

    100px 8%;


    text-align:center;


    position:relative;


}





.section.pink {


    background:#ffd6e7;


}





.section-icon {


    width:70px;


    margin:

    auto auto 20px;


}





.section h2 {


    font-size:55px;


    color:#ff75a8;


    margin-bottom:30px;


}





.section-text {


    max-width:800px;


    margin:auto;


    font-size:20px;


}









/* =========================
   FEATURE CARDS
========================= */


.cards {


    margin-top:50px;


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}





.card {


    background:white;


    padding:40px;


    border-radius:35px;


    box-shadow:

    0 15px 40px rgba(255,140,183,.15);


}





.feature-icon {


    width:80px;


    margin:auto;


}









/* =========================
   SCHEDULE
========================= */


.schedule-card {


    background:white;


    max-width:600px;


    margin:20px auto;


    padding:25px;


    border-radius:30px;


    display:flex;


    align-items:center;


    gap:20px;


}





.schedule-card img {


    width:45px;


}









/* =========================
   TICKETS
========================= */


.tickets-container {


    margin-top:50px;


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}






.ticket-card {


    background:white;


    padding:40px 30px;


    border-radius:40px;


    box-shadow:

    0 15px 40px rgba(255,140,183,.15);


    transition:.3s;


}





.ticket-card:hover {


    transform:translateY(-10px);


}





.ticket-card h3 {


    font-size:32px;


    color:#ff75a8;


    margin:20px 0;


}





.ticket-icon {


    width:70px;


    margin:auto;


}





.ticket-card ul {


    text-align:left;


    margin:25px 0;


    padding-left:20px;


}





.ticket-card li {


    margin-bottom:12px;


}





.price {


    font-size:50px;


    font-weight:800;


    color:#ff75a8;


}






.ticket-card.premium {


    border:

    3px solid #ffb3d0;


}





.ticket-card.vip {


    background:

    linear-gradient(

    135deg,

    #fff4f9,

    #ffd6e7

    );


    border:

    3px solid #ff8cb7;


}







.ticket-note,
.free-entry-note {


    margin-top:40px;


    background:white;


    border-radius:30px;


    padding:25px;


    display:flex;


    justify-content:center;


    align-items:center;


    gap:15px;


}





.ticket-note img,
.free-entry-note img {


    width:40px;


}









/* =========================
   LOCATION
========================= */


.map-placeholder {


    margin:40px auto 0;


    width:300px;


    height:200px;


    background:white;


    border-radius:30px;


    display:flex;


    align-items:center;


    justify-content:center;


}



.map-placeholder img {


    width:70px;


}









/* =========================
   GALLERY
========================= */


.gallery {


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;


}





.gallery img {


    width:100%;


    height:280px;


    object-fit:cover;


    border-radius:35px;


}









/* =========================
   FAQ
========================= */


.faq-card {


    background:white;


    max-width:700px;


    margin:20px auto;


    padding:30px;


    border-radius:30px;


}









/* =========================
   FOOTER
========================= */


footer {


    padding:

    80px 20px;


    background:#ff8cb7;


    color:white;


    text-align:center;


}





.footer-mascot {


    width:150px;


    margin:auto;


}




.footer-ribbon {


    width:120px;


    margin:

    30px auto 0;


    position:relative;


    left:auto;


    bottom:auto;


}









/* PARTICLES */


.particle-container {


    pointer-events:none;


}

.live-map {

    width:100%;
    max-width:900px;
    height:450px;
    margin:40px auto;
    border-radius:35px;
    overflow:hidden;
    box-shadow:
    0 15px 40px rgba(255,140,183,.2);

}


.live-map iframe {

    width:100%;
    height:100%;
    border:0;

}