/* =====================================================
   ALLEGROLANDIA - RESPONSIVE STYLE
===================================================== */


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


@media (max-width:1100px){


.container {

    width:90%;

}



.menu {

    gap:20px;

    font-size:15px;

}



.logo img {

    width:170px;

}



.cards {

    grid-template-columns:repeat(2,1fr);

}



.event-grid {

    grid-template-columns:repeat(2,1fr);

}



.numbers-grid {

    grid-template-columns:repeat(2,1fr);

    gap:50px;

}



}








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


@media (max-width:768px){



/* GENERAL */


.container {

    width:90%;

}



.section {

    padding:60px 0;

}



h2 {

    font-size:36px;

}



p {

    font-size:16px;

}





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


.header {

    height:90px;

}



.nav {

    height:90px;

}



.logo {

    padding:8px 0;

}


.logo img {

    width:155px;

}





/* NASCONDE MENU DESKTOP */


.menu {


    position:fixed;

    top:80px;

    left:0;


    width:100%;


    background:white;


    display:flex;

    flex-direction:column;


    align-items:flex-start;


    padding:25px 30px;


    gap:0;


    box-shadow:
    0 20px 40px rgba(0,0,0,.12);


    transform:translateY(-120%);


    transition:.35s ease;


    z-index:999;


}



.menu.active {


    transform:translateY(0);


}



.menu a {


    width:100%;


    padding:16px 0;


    border-bottom:1px solid #eeeeee;


    color:#1D2939;


}




.header-btn {


    display:none;


}






/* HAMBURGER */


.hamburger {


    display:flex;


    width:32px;


    height:24px;


    flex-direction:column;


    justify-content:space-between;


    cursor:pointer;


    z-index:1001;


}



.hamburger span {


    height:3px;


    width:100%;


    background:#1D2939;


    border-radius:10px;


    transition:.3s;


}





.hamburger.open span:nth-child(1){


    transform:
    translateY(10px)
    rotate(45deg);


}



.hamburger.open span:nth-child(2){


    opacity:0;


}



.hamburger.open span:nth-child(3){


    transform:
    translateY(-10px)
    rotate(-45deg);


}








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


.hero {


    height:calc(100vh - 80px);


    margin-top:80px;


}



.hero-content {


    text-align:center;


}



.hero h1 {


    font-size:44px;


}



.hero p {


    font-size:17px;


}



.hero-buttons {


    flex-direction:column;


    gap:15px;


}



.hero-buttons .btn {


    width:100%;


}








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


.grid-2 {


    grid-template-columns:1fr;


    gap:35px;


}



.grid-2 .image-box {


    order:-1;


}






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


.cards {


    grid-template-columns:1fr;


}



.card img {


    height:230px;


}







/* =====================================================
   EVENTS
===================================================== */


.event-grid {


    grid-template-columns:1fr;


}






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


.gallery-grid {


    grid-template-columns:1fr;


}



.gallery-grid img {


    aspect-ratio:auto;


}








/* =====================================================
   NUMBERS
===================================================== */


.numbers-grid {


    grid-template-columns:1fr;


    gap:40px;


}



.numbers strong {


    font-size:50px;


}








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


.footer {


    text-align:center;


}



.footer-grid {


    grid-template-columns:1fr;


    gap:35px;


}



}








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


@media(max-width:380px){



.hero h1 {


    font-size:38px;


}



.logo img {


    width:130px;


}



}


@media(max-width:768px){

    .hours-grid{

        grid-template-columns:1fr;

    }

}



@media(max-width:900px){

    .labs-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


@media(max-width:600px){

    .labs-grid{

        grid-template-columns:1fr;

    }

}


/* =====================================================
   PAGINE INTERNE - TABLET
===================================================== */

@media (max-width:992px){

    /* HERO INTERNE */

    .page-hero{
        height:360px;
    }

    .page-title h1{
        font-size:56px;
    }

    .page-title p{
        font-size:20px;
    }


    /* ENTRADA POR HORA */

    .price-grid,
    .daily-grid{
        grid-template-columns:1fr 1fr;
        gap:30px;
    }

    .price-card,
    .daily-card{
        padding:35px;
    }

    .daily-card strong{
        font-size:48px;
    }


    /* FESTA DE ANIVERSÁRIO */

    .package-grid{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

    .package-card:nth-child(2),
    .package-card.featured{
        transform:none;
    }

    .extras-grid{
        grid-template-columns:repeat(2,1fr);
    }


    /* LABORATÓRIOS */

    .labs-grid{
        grid-template-columns:repeat(2,1fr);
    }


    /* CAMPUS DE FÉRIAS */

    .details-grid{
        grid-template-columns:repeat(2,1fr);
    }


    /* EVENTOS */

    .event-cards-grid{
        grid-template-columns:repeat(2,1fr);
    }


    /* CONTACTO */

    .contact-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


/* =====================================================
   PAGINE INTERNE - MOBILE
===================================================== */

@media (max-width:768px){

    /* HERO INTERNE */

    .page-hero{
        height:320px;
        margin-top:90px;
    }

    .page-title{
        text-align:center;
    }

    .page-title h1{
        font-size:42px;
    }

    .page-title p{
        font-size:17px;
        margin:15px auto 0;
    }


    /* ENTRADA POR HORA */

    .price-grid,
    .daily-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .price-card,
    .daily-card{
        padding:30px 24px;
    }

    .price-card h3,
    .daily-card h3{
        font-size:28px;
    }

    .price-card h4{
        gap:20px;
        font-size:18px;
    }

    .price-card span{
        font-size:24px;
        white-space:nowrap;
    }

    .daily-card strong{
        font-size:46px;
    }


    /* FESTA DE ANIVERSÁRIO */

    .center-text{
        font-size:17px;
    }

    .package-grid,
    .extras-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .package-card,
    .extras-grid div{
        padding:30px 24px;
    }

    .package-card strong{
        font-size:48px;
    }

    .package-card:nth-child(2),
    .package-card.featured{
        transform:none;
    }


    /* PACOTE ESCOLAR */

    .lunch-menu{
        padding:18px;
    }

    .school-cta,
    .lab-info,
    .info-box,
    .campus-warning{
        padding:65px 0;
    }

    .school-cta i,
    .lab-info i{
        width:75px;
        height:75px;
        font-size:32px;
    }


    /* CAMPUS DE FÉRIAS */

    .timeline{
        margin-top:40px;
    }

    .timeline::before{
        left:35px;
    }

    .timeline-item{
        grid-template-columns:70px 1fr;
        gap:20px;
        align-items:start;
    }

    .timeline-item > span{
        width:70px;
        height:70px;
        font-size:19px;
    }

    .timeline-item div{
        padding:24px;
    }

    .timeline-item h3{
        font-size:24px;
    }

    .details-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .details-grid div{
        padding:28px 20px;
    }


    /* EVENTOS */

    .event-cards-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .event-card2 img{
        height:240px;
    }


    /* CONTACTO */

    .contact-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .contact-info iframe{
        height:360px;
    }

    .hours-box{
        padding:30px 24px;
    }

    .contact-form{
        margin-top:35px;
    }

    .contact-form input,
    .contact-form textarea{
        padding:16px 18px;
    }

    .contact-header{
        padding:125px 0 65px;
    }

    .contact-header h1{
        font-size:44px;
    }

    .contact-header p{
        font-size:17px;
    }

}


/* =====================================================
   PAGINE INTERNE - SMALL MOBILE
===================================================== */

@media (max-width:480px){

    .page-hero{
        height:290px;
    }

    .page-title h1{
        font-size:36px;
    }

    .page-title p{
        font-size:16px;
    }


    /* ENTRADA POR HORA */

    .price-card,
    .daily-card,
    .package-card,
    .extras-grid div,
    .timeline-item div,
    .details-grid div,
    .contact-card,
    .hours-box{
        padding:25px 20px;
    }

    .price-card h4{
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
    }

    .price-card span{
        font-size:23px;
    }

    .daily-card strong,
    .package-card strong{
        font-size:42px;
    }


    /* CAMPUS DE FÉRIAS */

    .timeline::before{
        display:none;
    }

    .timeline-item{
        grid-template-columns:1fr;
        gap:15px;
    }

    .timeline-item > span{
        width:auto;
        height:auto;
        min-width:90px;
        padding:10px 18px;
        border-radius:50px;
        justify-self:start;
    }


    /* EVENTOS */

    .event-card2 img{
        height:210px;
    }

    .event-card2 h3{
        font-size:24px;
    }


    /* CONTACTO */

    .contact-info iframe{
        height:300px;
        border-radius:18px;
    }

    .contact-header h1{
        font-size:38px;
    }

}





@media (max-width:768px) {

    .birthday-form {
        padding: 30px 22px;
        border-radius: 18px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .form-group-full {
        grid-column: auto;
    }

    .form-choice label {
        margin-right: 18px;
    }

}

@media (max-width:480px) {

    .birthday-form {
        padding: 25px 18px;
    }

    .form-choice label {
        display: flex;
        margin: 10px 0 0;
    }

}