/* =========================================================
   MINI GP RENT
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    .nav {
        gap: 14px;
    }

    .nav a {
        font-size: 11px;
    }

    .hero-container {
        grid-template-columns: 70px 1fr 180px;
    }

    .experience-grid {
        gap: 50px;
    }

    .bikes-grid {
        grid-template-columns: 1fr 1.2fr;
    }

    .bike-features {
        grid-column: 1 / -1;

        display: grid;
        grid-template-columns: repeat(4,1fr);
    }

    .how-grid {
        grid-template-columns: repeat(4,1fr);
    }

    .how-title {
        grid-column: 1 / -1;

        margin-bottom: 60px;
    }

}


@media (max-width: 950px) {

    .header-container {
        height: 72px;
    }

    .nav {
        position: fixed;

        top: 72px;
        left: 0;

        width: 100%;
        height: calc(100vh - 72px);

        display: flex;
        flex-direction: column;
        justify-content: center;

        gap: 22px;

        background: rgba(5,5,5,.98);

        transform: translateX(100%);

        transition: transform .3s ease;
    }

    .nav.open {
        transform: translateX(0);
    }

    .nav a {
        font-size: 23px;
    }

    .btn-header {
        margin-left: auto;
    }

    .menu-toggle {
        display: block;
    }

    /* HERO */

    .hero-container {
        grid-template-columns: 1fr;

        padding-top: 110px;
        padding-bottom: 100px;
    }

    .hero-data,
    .hero-message {
        display: none;
    }

    .hero-content {
        max-width: 700px;
    }

    .hero h1 {
        font-size: clamp(65px,15vw,120px);
    }

    .hero h2 {
        font-size: clamp(45px,9vw,70px);
    }

    /* EXPERIENCE */

    .experience-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    /* BIKES */

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

    .bikes-visual {
        min-height: 380px;
    }

    .bike-features {
        grid-column: auto;

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

    /* HOW */

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

        row-gap: 55px;
    }

    .how-title {
        grid-column: 1 / -1;
    }

    /* EVENT */

    .event-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    /* REVIEWS */

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

    .review p {
        min-height: auto;
    }

    /* FINAL CTA */

    .final-cta-content {
        flex-direction: column;

        align-items: flex-start;

        gap: 40px;
    }

    /* FOOTER */

    .footer-grid {
        grid-template-columns: 1fr;

        justify-items: center;
    }

}


@media (max-width: 650px) {

    .container {
        width: 89%;
    }

    .btn-header {
        display: none;
    }

    .logo-img {
    width: 145px;
    }

    .footer-logo .logo-img {
        width: 180px;
    }

    /* HERO */

    .hero {
        min-height: 760px;
    }

    .hero-container {
        min-height: 760px;
    }

    .hero h1 {
        flex-direction: column;
        align-items: flex-start;

        gap: 8px;

        font-size: 78px;

        letter-spacing: -3px;
    }

    .hero h1 strong {
        margin-left: 0;
    }

    .hero h2 {
        font-size: 48px;
    }

    .hero-content p {
        font-size: 13px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    /* EXPERIENCE */

    .experience {
        padding: 80px 0;
    }

    .section-intro h2 {
        font-size: 48px;
    }

    .experience-features {
        grid-template-columns: 1fr 1fr;
    }

    .feature {
        min-height: 145px;

        padding: 20px;
    }

    /* BIKES */

    .bikes {
        padding: 80px 0;
    }

    .bikes-copy h2 {
        font-size: 55px;
    }

    .bikes-image-wrap {
        height: 330px;
    }

    .bike-features {
        grid-template-columns: 1fr;
    }

    /* HOW */

    .how {
        padding: 80px 0;
    }

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

    .how-title {
        grid-column: auto;
    }

    .step {
        border-left: 3px solid var(--red);

        padding-left: 25px;
    }

    /* EVENT */

    .next-event {
        padding: 80px 0;
    }

    .event-content h2 {
        font-size: 62px;
    }

    .event-buttons {
        flex-direction: column;
    }

    .event-buttons .btn {
        width: 100%;
    }

    .event-calendar {
        padding: 18px;
    }

    /* GALLERY */

    .gallery-preview {
        padding: 80px 0;
    }

    .gallery-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .gallery-grid {
        grid-template-columns: 1fr;

        grid-template-rows: none;
    }

    .gallery-card,
    .gallery-card:first-child {
        min-height: 220px;

        grid-row: auto;
    }

    /* COMMUNITY */

    .community {
        padding: 80px 0;
    }

    .review {
        padding: 27px;
    }

    /* CTA */

    .final-cta {
        padding: 75px 0;
    }

    .final-cta h2 {
        font-size: 67px;
    }

    .final-cta .btn {
        width: 100%;
    }

    /* FOOTER */

    .footer-links {
        flex-direction: column;

        align-items: center;

        gap: 15px;
    }

    .footer-bottom {
        flex-direction: column;

        align-items: center;

        gap: 10px;
    }

}
/* =========================================================
   COME FUNZIONA - RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .how-it-works {
        padding: 80px 0;
    }

    .how-header {
        margin-bottom: 50px;
    }

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

    .how-step {
        min-height: 280px;

        border-bottom:
            1px solid rgba(255,255,255,.10);
    }

    .how-steps::before {
        width: 50%;
    }
}


@media (max-width: 600px) {

    .how-header h2 {
        font-size: 48px;
    }

    .how-steps {
        grid-template-columns: 1fr;
    }

    .how-steps::before {
        width: 100%;
    }

    .how-step {
        min-height: auto;

        padding:
            35px 25px 35px;
    }

    .step-number {
        font-size: 80px;
    }

    .step-icon {
        margin-bottom: 28px;
    }

    .how-cta .btn {
        width: 100%;
        min-width: 0;
    }
}
/* HOME GALLERY */

@media (max-width: 900px) {

    .gallery-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 400px 240px 240px;
    }

    .gallery-main {
        grid-column: 1 / 3;
        grid-row: auto;
    }
}


@media (max-width: 600px) {

    .home-gallery {
        padding: 75px 0;
    }

    .gallery-heading h2 {
        font-size: 44px;
    }

    .gallery-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .gallery-main {
        grid-column: auto;
    }

    .gallery-item {
        height: 260px;
    }

    .gallery-main {
        height: 380px;
    }
}
/* MNGP RANKING */

@media (max-width: 900px) {

    .ranking-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }
}

@media (max-width: 600px) {

    .home-ranking {
        padding: 80px 0;
    }

    .ranking-intro h2 {
        font-size: 50px;
    }

    .ranking-head,
    .ranking-row {
        grid-template-columns:
            50px 1fr 65px 85px;

        padding-left: 15px;
        padding-right: 15px;
    }

    .ranking-row strong {
        font-size: 14px;
    }
}
/* =========================================================
   BOOKING RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .booking-events {
        grid-template-columns: 1fr;
    }

    .booking-times {
        grid-template-columns: repeat(3,1fr);
    }

    .booking-progress {
        margin-bottom: 60px;
    }
}


@media (max-width: 600px) {

    .booking-hero {
        min-height: 450px;
    }

    .booking-hero h1 {
        font-size: 55px;
    }

    .booking-section {
        padding: 60px 0 80px;
    }

    .booking-progress-item strong {
        display: none;
    }

    .booking-progress-item {
        text-align: center;
    }

    .booking-progress-item span {
        margin: 0;
    }

    .booking-events {
        grid-template-columns: 1fr;
    }

    .booking-event-image {
        height: 250px;
    }

    .booking-days {
        display: grid;
        grid-template-columns: repeat(3,1fr);
    }

    .booking-day {
        width: auto;
    }

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

    .booking-form {
        grid-template-columns: 1fr;
    }

    .booking-field-full {
        grid-column: auto;
    }

    .summary-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .booking-navigation {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* =========================================================
   MOTO PAGE RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .moto-page-hero {
        min-height: 650px;
    }

    .moto-intro-grid,
    .moto-electric-grid {
        grid-template-columns: 1fr;
    }

    .moto-intro-grid {
        gap: 50px;
    }

    .moto-intro-image {
        min-height: 430px;
    }

    .moto-fleet-visual {
        height: 480px;
    }

    .moto-fleet-points {
        grid-template-columns: 1fr;
    }

    .moto-fleet-points > div {
        border-left:
            1px solid rgba(255,255,255,.1);
    }

    .moto-electric {
        padding: 90px 0;
    }

    .moto-electric-big {
        display: none;
    }

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

}


@media (max-width: 600px) {

    .moto-page-hero {
        min-height: 600px;
    }

    .moto-page-hero-bg {
        background-position: 60% center;
    }

    .moto-page-hero h1 {
        font-size: 53px;
    }

    .moto-intro,
    .moto-fleet,
    .moto-specs {
        padding: 80px 0;
    }

    .moto-intro-text h2,
    .moto-section-heading h2 {
        font-size: 45px;
    }

    .moto-intro-image {
        min-height: 300px;
    }

    .moto-fleet-visual {
        height: 330px;
    }

    .moto-electric-content h2 {
        font-size: 55px;
    }

    .moto-spec-grid {
        grid-template-columns: 1fr;
    }

    .moto-spec {
        min-height: 150px;
    }

    .moto-track {
        min-height: 600px;
    }

    .moto-track-content h2 {
        font-size: 48px;
    }

    .moto-track-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .moto-track-buttons .btn {
        text-align: center;
    }

}
/* =========================================================
   EVENTS PAGE RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .featured-event {
        grid-template-columns: 1fr;
    }

    .featured-event-image {
        min-height: 500px;
    }

    .featured-event-image::after {
        background:
            linear-gradient(
                180deg,
                transparent 60%,
                #0d0d0d 100%
            );
    }

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

    .events-atmosphere {
        grid-template-columns: 1fr;
    }

    .events-atmosphere-image {
        height: 500px;
    }

}


@media (max-width: 600px) {

    .events-page-hero {
        min-height: 600px;
    }

    .events-page-content h1 {
        font-size: 60px;
    }

    .events-featured,
    .events-experience,
    .events-upcoming {
        padding: 80px 0;
    }

    .events-heading h2 {
        font-size: 48px;
    }

    .featured-event-image {
        min-height: 330px;
    }

    .featured-event-content {
        padding: 30px 25px;
    }

    .featured-event-content h3 {
        font-size: 43px;
    }

    .events-experience-grid {
        grid-template-columns: 1fr;
    }

    .event-exp-card {
        min-height: auto;
    }

    .events-atmosphere-image {
        height: 350px;
    }

    .events-atmosphere-content {
        padding: 60px 25px;
    }

    .events-atmosphere-content h2 {
        font-size: 48px;
    }

    .upcoming-event {
        flex-direction: column;
        align-items: flex-start;

        padding: 30px;
    }

    .events-final {
        padding: 90px 0;
    }

    .events-final h2 {
        font-size: 52px;
    }

}
/* =========================================================
   CIRCUITS PAGE RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .circuits-intro-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .circuit-featured-grid {
        grid-template-columns: 1fr;
    }

    .circuit-featured-image {
        min-height: 500px;
    }

    .circuit-featured-image::after {
        background:
            linear-gradient(
                180deg,
                transparent 60%,
                #0d0d0d 100%
            );
    }

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

    .circuits-coming-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .circuits-hero {
        min-height: 600px;
    }

    .circuits-hero h1 {
        font-size: 58px;
    }

    .circuits-intro,
    .circuit-featured,
    .circuit-driving,
    .circuits-next {
        padding: 80px 0;
    }

    .circuits-intro h2,
    .circuit-heading h2 {
        font-size: 46px;
    }

    .circuit-featured-image {
        min-height: 330px;
    }

    .circuit-featured-content {
        padding: 35px 25px;
    }

    .circuit-featured-content h2 {
        font-size: 48px;
    }

    .circuit-driving-grid {
        grid-template-columns: 1fr;
    }

    .circuit-driving-card {
        min-height: 240px;
    }

    .circuit-action {
        min-height: 620px;
    }

    .circuit-action-content h2 {
        font-size: 48px;
    }

    .circuits-final {
        padding: 90px 0;
    }

    .circuits-final h2 {
        font-size: 55px;
    }

}
/* =========================================================
   RANKING PAGE RESPONSIVE
========================================================= */

@media (max-width: 900px) {

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

    .podium-card,
    .podium-card.first {
        min-height: 300px;
    }

    .podium-card.first {
        order: -1;
    }

    .ranking-table {
        overflow-x: auto;
    }

    .ranking-table-head,
    .ranking-table-row {
        min-width: 760px;
    }

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

}


@media (max-width: 600px) {

    .ranking-page-hero {
        min-height: 600px;
    }

    .ranking-page-content h1 {
        font-size: 60px;
    }

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

    .race-control-inner > div {
        min-height: 75px;

        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .ranking-podium,
    .ranking-full,
    .ranking-system {
        padding: 80px 0;
    }

    .ranking-page-heading h2 {
        font-size: 47px;
    }

    .podium-card,
    .podium-card.first {
        min-height: 270px;
    }

    .record-time {
        font-size: 90px;

        letter-spacing: -4px;
    }

    .record-line {
        flex-direction: column;

        gap: 10px;
    }

    .ranking-system-grid {
        grid-template-columns: 1fr;
    }

    .ranking-system-card {
        min-height: 230px;
    }

    .ranking-final {
        padding: 90px 0;
    }

    .ranking-final h2 {
        font-size: 55px;
    }

}
/* =========================================================
   GALLERY PAGE RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .gallery-page-intro-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .mngp-photo-grid {
        grid-template-columns:
            repeat(2,1fr);

        grid-auto-rows: 280px;
    }

    .gallery-scroll {
        display: none;
    }

}


@media (max-width: 600px) {

    .gallery-page-hero {
        min-height: 650px;
    }

    .gallery-page-hero-bg {
        background-position: 62% center;
    }

    .gallery-page-hero h1 {
        font-size: 65px;
    }

    .gallery-page-intro,
    .mngp-gallery-page {
        padding: 80px 0;
    }

    .gallery-page-intro h2 {
        font-size: 47px;
    }

    .gallery-page-heading {
        flex-direction: column;

        align-items: flex-start;
    }

    .gallery-page-heading h2 {
        font-size: 52px;
    }

    .gallery-photo-count strong {
        font-size: 48px;
    }


    /* MOBILE GALLERY */

    .mngp-photo-grid {
        grid-template-columns: 1fr;

        grid-auto-rows: auto;

        gap: 8px;
    }

    .mngp-photo,
    .mngp-photo.photo-wide,
    .mngp-photo.photo-tall {
        grid-column: auto;
        grid-row: auto;

        height: 280px;
    }

    .mngp-photo:nth-child(1),
    .mngp-photo:nth-child(8),
    .mngp-photo:nth-child(10),
    .mngp-photo:nth-child(12) {
        height: 380px;
    }

    .gallery-page-end {
        min-height: 620px;
    }

    .gallery-page-end h2 {
        font-size: 48px;
    }

    .gallery-end-links {
        flex-direction: column;

        align-items: stretch;
    }

    .gallery-end-links .btn {
        text-align: center;
    }

}
/* =========================================================
   CONTACT PAGE RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .contact-intro-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .contact-departments-grid {
        grid-template-columns: 1fr 1fr;
    }

    .contact-department-card,
    .contact-department-card:nth-child(4),
    .contact-department-card:nth-child(5) {

        grid-column: auto;
    }

    .contact-partner {
        grid-column: 1 / -1 !important;
    }

    .contact-form-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .contact-bottom-inner {
        grid-template-columns: 1fr 1fr;
    }

}


@media (max-width: 600px) {

    .contact-hero {
        min-height: 600px;
    }

    .contact-hero h1 {
        font-size: 62px;
    }

    .contact-intro,
    .contact-form-section {
        padding: 80px 0;
    }

    .contact-intro h2,
    .contact-form-intro h2 {
        font-size: 48px;
    }

    .contact-departments {
        padding-bottom: 80px;
    }

    .contact-departments-grid {
        grid-template-columns: 1fr;
    }

    .contact-partner {
        grid-column: auto !important;
    }

    .contact-department-card {
        min-height: 290px;

        padding: 28px 24px;
    }

    .contact-form {
        grid-template-columns: 1fr;
    }

    .contact-field-full {
        grid-column: auto;
    }

    .contact-form .btn {
        width: 100%;
    }

    .contact-business {
        min-height: 620px;
    }

    .contact-business h2 {
        font-size: 48px;
    }

    .contact-business .btn {
        font-size: 12px;
    }

    .contact-bottom-inner {
        grid-template-columns: 1fr;

        gap: 28px;
    }

}