/* =========================================
   AKI FEST MOBILE RESPONSIVE DESIGN
========================================= */



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


@media(max-width:1100px){



.hero {


    padding-left:5%;

    padding-right:5%;


}





.hero h1 {


    font-size:75px;


}





.hero-image {


    width:350px;


}





.cards {


    grid-template-columns:

    repeat(2,1fr);


}





.tickets-container {


    grid-template-columns:

    repeat(2,1fr);


}





.gallery {


    grid-template-columns:

    repeat(2,1fr);


}



}









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


@media(max-width:850px){



.navbar {


    width:92%;


    padding:

    15px 20px;


}





.logo {


    font-size:24px;


}





.logo img {


    width:30px;


}





.menu-button {


    display:block;


}




.nav-links {


    position:absolute;


    top:80px;


    left:0;


    width:100%;


    background:white;


    border-radius:30px;


    padding:30px;


    flex-direction:column;


    align-items:center;


    gap:20px;



    opacity:0;


    visibility:hidden;


    transform:

    translateY(-20px);



    transition:.3s;


}





.nav-links.active {


    opacity:1;


    visibility:visible;


    transform:

    translateY(0);


}





}









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


@media(max-width:850px){



.hero {


    min-height:auto;


    flex-direction:column;


    text-align:center;


    padding:

    150px 20px 80px;


}





.hero-content {


    width:100%;


}





.hero h1 {


    font-size:55px;


}





.hero p {


    font-size:20px;


}





.hero-buttons {


    flex-direction:column;


    align-items:center;


}





.main-button,
.secondary-button {


    width:90%;


    max-width:330px;


}





.hero-image {


    margin-top:50px;


    width:280px;


}





.hero-mascot {


    width:280px;


}





.hero-bunny,
.hero-cat {


    width:75px;


}





.hero-bunny {


    right:-10px;


}





.hero-cat {


    left:-10px;


}




}









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


@media(max-width:600px){



.countdown {


    display:grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:15px;


}





.countdown div {


    padding:20px 10px;


    min-width:auto;


}





.countdown span {


    font-size:32px;


}




.festival-start {


    padding:25px;


}



.festival-start h3 {


    font-size:28px;


}



}









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


@media(max-width:850px){



.section {


    padding:

    70px 20px;


}





.section h2 {


    font-size:40px;


}





.section-text {


    font-size:17px;


}




}









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


@media(max-width:850px){



.cards {


    grid-template-columns:

    1fr;


}





.card {


    padding:30px 20px;


}




.feature-icon {


    width:65px;


}




}









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


@media(max-width:650px){



.schedule-card {


    flex-direction:column;


    text-align:center;


}





.schedule-card img {


    width:40px;


}



}









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


@media(max-width:850px){



.tickets-container {


    grid-template-columns:

    1fr;


}





.ticket-card {


    padding:

    35px 25px;


}





.ticket-card h3 {


    font-size:28px;


}





.price {


    font-size:42px;


}





.ticket-card ul {


    padding-left:20px;


}



}





@media(max-width:500px){



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


    flex-direction:column;


    text-align:center;


}





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


    width:35px;


}



}









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


@media(max-width:600px){



.map-placeholder {


    width:90%;


    height:180px;


}



}









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


@media(max-width:700px){



.gallery {


    grid-template-columns:

    repeat(2,1fr);


    gap:12px;


}





.gallery img {


    height:140px;


    border-radius:20px;


}



}









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


@media(max-width:700px){



.faq-card {


    padding:25px 20px;


}





.faq-card h3 {


    font-size:22px;


}



}









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


@media(max-width:600px){



footer {


    padding:

    60px 20px;


}





.footer-mascot {


    width:120px;


}





.footer-ribbon {


    width:90px;


    position:relative;


    left:auto;


    bottom:auto;


}



}









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


@media(max-width:850px){



.festival-decoration {


    overflow:hidden;


}





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


    width:120px;


    right:-40px;


}





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


    width:150px;


    left:-50px;


}





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


    width:100px;


}





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


    width:170px;


}



}









/* =========================
   PARTICLES PERFORMANCE
========================= */


@media(max-width:850px){



.mouse-sparkle {


    display:none;


}





.particle {


    animation-duration:

    14s;


}



}





@media(max-width:450px){



.particle-container {


    display:none;


}



}









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


@media(max-width:400px){



.hero h1 {


    font-size:45px;


}





.hero-mascot {


    width:230px;


}





.countdown span {


    font-size:25px;


}





.gallery img {


    height:110px;


}



}

@media(max-width:600px){


.live-map {


    height:300px;


    border-radius:25px;


}


}