/* =========================================================
   RENTNGO - RESPONSIVE STYLES
========================================================= */


/* =========================================================
   TABLET
   1024px and below
========================================================= */

@media (max-width: 1024px) {

    .container {
        width: min(94%, var(--container));
    }

    /* Header */

    .desktop-nav {
        gap: 20px;
    }

    /* Hero */

    .hero-container {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .hero-content h1 {
        font-size: 43px;
    }

    .hero-image-wrapper {
        min-height: 320px;
    }

    .hero-car-image {
        width: 100%;
    }

    /* Search */

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

    .search-btn {
        width: 100%;
    }

    /* Benefits */

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

    /* Cars */

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

    /* Steps */

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

    /* Why */

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

    /* Footer */

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


/* =========================================================
   MOBILE
   768px and below
========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       GLOBAL
    ----------------------------------------------------- */

    .container {
        width: min(92%, 600px);
    }

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .navbar {
        min-height: 68px;
    }

    .desktop-nav {
        display: none;
    }

    .header-book-btn {
        display: none;
    }

    .mobile-menu-btn {
        display: flex;

        align-items: center;
        justify-content: center;
    }

    .mobile-nav {
        display: none;

        flex-direction: column;

        padding: 10px 4% 18px;

        background: #fff;

        border-top: 1px solid var(--border-light);

        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.06);
    }

    .mobile-nav.open {
        display: flex;
    }

    .mobile-nav a {
        padding: 13px 5px;

        border-bottom: 1px solid var(--border-light);

        color: var(--text-medium);

        font-size: 13px;

        font-weight: 600;
    }

    .mobile-nav a:last-child {
        border-bottom: none;
    }

    .mobile-nav a:hover {
        color: var(--primary);
    }

    .mobile-book-link {
        margin-top: 10px;

        padding: 12px !important;

        border-radius: 8px;

        background: var(--primary);

        color: #fff !important;

        text-align: center;
    }


    /* -----------------------------------------------------
       HERO
    ----------------------------------------------------- */

    .hero-section {
        padding: 42px 0 30px;
    }

    .hero-container {
        min-height: auto;

        display: flex;

        flex-direction: column;

        gap: 15px;

        text-align: center;
    }

    .hero-content {
        display: flex;

        flex-direction: column;

        align-items: center;
    }

    .hero-label {
        margin-bottom: 11px;

        font-size: 9px;

        letter-spacing: 1px;
    }

    .hero-content h1 {
        max-width: 500px;

        font-size: clamp(34px, 9vw, 44px);

        line-height: 1.08;

        letter-spacing: -1.4px;

        margin-bottom: 15px;
    }

    .hero-description {
        max-width: 470px;

        font-size: 13px;

        line-height: 1.65;

        margin-bottom: 20px;
    }

    .hero-buttons {
        justify-content: center;

        width: 100%;
    }

    .hero-buttons .btn {
        min-width: 125px;
    }

    .hero-image-wrapper {
        width: 100%;

        min-height: 220px;

        margin-top: 0;
    }

    .hero-glow {
        width: 260px;
        height: 150px;

        filter: blur(40px);
    }

    .hero-car-image {
        width: 100%;

        max-width: 480px;
    }


    /* -----------------------------------------------------
       SEARCH CARD
    ----------------------------------------------------- */

    .search-container {
        margin-top: 5px;
    }

    .search-card {
        padding: 17px;

        border-radius: 15px;
    }

    .search-card-header {
        align-items: flex-start;

        gap: 10px;

        margin-bottom: 15px;
    }

    .search-card-header h2 {
        font-size: 18px;
    }

    .search-location {
        font-size: 10px;

        padding: 6px 8px;
    }

    .search-fields {
        display: flex;

        flex-direction: column;

        gap: 11px;
    }

    .search-field {
        width: 100%;
    }

    .field-input {
        height: 47px;
    }

    .search-btn {
        width: 100%;

        height: 47px;

        margin-top: 2px;
    }

    .search-filters {
        display: flex;

        flex-direction: column;

        gap: 11px;

        margin-top: 14px;

        padding-top: 14px;
    }

    .filter-field {
        width: 100%;
    }

    .filter-field select {
        height: 44px;
    }


    /* -----------------------------------------------------
       BENEFITS
    ----------------------------------------------------- */

    .benefits-section {
        padding: 18px 0;
    }

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

        gap: 9px;
    }

    .benefit-card {
        min-height: 78px;

        padding: 11px;

        gap: 8px;
    }

    .benefit-icon {
        width: 34px;
        height: 34px;

        font-size: 12px;

        border-radius: 8px;
    }

    .benefit-card h3 {
        font-size: 10px;
    }

    .benefit-card p {
        font-size: 8px;

        line-height: 1.4;
    }


    /* -----------------------------------------------------
       GENERAL SECTIONS
    ----------------------------------------------------- */

    .cars-section,
    .offer-section,
    .how-section,
    .why-section,
    .reviews-section {
        padding: 48px 0;
    }

    .section-heading {
        display: block;

        margin-bottom: 22px;
    }

    .section-heading h2 {
        font-size: 25px;
    }

    .section-heading p {
        font-size: 11px;
    }

    .view-all {
        display: inline-block;

        margin-top: 10px;

        font-size: 11px;
    }


    /* -----------------------------------------------------
       CARS
    ----------------------------------------------------- */

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

        gap: 13px;
    }

    .car-image-container {
        height: 205px;

        padding: 20px;
    }

    .car-info {
        padding: 15px;
    }

    .car-info h3 {
        font-size: 14px;
    }

    .car-specs {
        font-size: 9px;
    }

    .car-price strong {
        font-size: 16px;
    }


    /* -----------------------------------------------------
       OFFER
    ----------------------------------------------------- */

    .offer-card {
        min-height: auto;

        display: block;

        padding: 30px 23px;

        border-radius: 20px;
    }

    .offer-card h2 {
        font-size: 28px;

        letter-spacing: -0.7px;
    }

    .offer-card p {
        font-size: 11px;

        max-width: 330px;
    }

    .offer-decoration {
        right: 15px;
        bottom: 5px;

        font-size: 80px;
    }


    /* -----------------------------------------------------
       HOW IT WORKS
    ----------------------------------------------------- */

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

        gap: 11px;

        margin-top: 28px;
    }

    .step-card {
        padding: 20px;

        display: grid;

        grid-template-columns: auto 1fr;

        column-gap: 13px;
    }

    .step-number {
        grid-row: span 2;

        margin-bottom: 0;
    }

    .step-card h3 {
        font-size: 13px;

        margin-bottom: 3px;
    }

    .step-card p {
        font-size: 10px;
    }


    /* -----------------------------------------------------
       WHY RENTNGO
    ----------------------------------------------------- */

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

        gap: 10px;

        margin-top: 25px;
    }

    .why-card {
        padding: 20px 12px;
    }

    .why-icon {
        width: 42px;
        height: 42px;

        margin-bottom: 11px;

        font-size: 17px;

        border-radius: 11px;
    }

    .why-card h3 {
        font-size: 11px;

        margin-bottom: 5px;
    }

    .why-card p {
        font-size: 9px;

        line-height: 1.6;
    }


    /* -----------------------------------------------------
       REVIEWS
    ----------------------------------------------------- */

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

        gap: 11px;

        margin-top: 25px;
    }

    .review-card {
        padding: 20px;
    }

    .review-stars {
        font-size: 11px;

        margin-bottom: 9px;
    }

    .review-card > p {
        font-size: 10px;

        margin-bottom: 13px;
    }


    /* -----------------------------------------------------
       CTA
    ----------------------------------------------------- */

    .cta-section {
        padding: 25px 0 50px;
    }

    .cta-card {
        min-height: auto;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        padding: 30px 23px;

        border-radius: 20px;

        gap: 20px;
    }

    .cta-card h2 {
        font-size: 25px;
    }

    .cta-card p {
        font-size: 10px;
    }

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


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

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

        gap: 30px 20px;

        padding: 45px 0;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-column h3 {
        font-size: 11px;
    }

    .footer-column a,
    .footer-column p {
        font-size: 9px;
    }

    .footer-bottom {
        padding: 15px 0;
    }

    .footer-bottom p {
        font-size: 8px;
    }

}


/* =========================================================
   SMALL MOBILE
   480px and below
========================================================= */

@media (max-width: 480px) {

    .container {
        width: 92%;
    }

    /* Header */

    .navbar {
        min-height: 62px;
    }

    .logo {
        font-size: 20px;
    }


    /* Hero */

    .hero-section {
        padding-top: 30px;
    }

    .hero-content h1 {
        font-size: 34px;

        letter-spacing: -1.2px;
    }

    .hero-description {
        font-size: 12px;
    }

    .hero-buttons {
        flex-direction: column;

        gap: 8px;
    }

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

    .hero-image-wrapper {
        min-height: 180px;
    }


    /* Search */

    .search-card-header {
        flex-direction: column;
    }

    .search-location {
        align-self: flex-start;
    }


    /* Benefits */

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

    .benefit-card {
        min-height: 68px;
    }


    /* Sections */

    .cars-section,
    .offer-section,
    .how-section,
    .why-section,
    .reviews-section {
        padding: 42px 0;
    }

    .section-heading h2 {
        font-size: 23px;
    }


    /* Cars */

    .car-image-container {
        height: 190px;
    }


    /* Offer */

    .offer-card h2 {
        font-size: 25px;
    }


    /* Why */

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

    .why-card {
        text-align: left;

        display: grid;

        grid-template-columns: auto 1fr;

        column-gap: 12px;

        padding: 17px;
    }

    .why-icon {
        grid-row: span 2;

        margin: 0;
    }


    /* Footer */

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

    .footer-brand {
        grid-column: auto;
    }

}

/* =========================================================
   MOBILE TYPOGRAPHY IMPROVEMENTS
========================================================= */

@media (max-width: 768px) {

    /* Navigation */
    .mobile-nav a {
        font-size: 14px;
    }

    /* Hero */
    .hero-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .hero-label {
        font-size: 10px;
    }

    /* Search */
    .search-small-title {
        font-size: 10px;
    }

    .search-card-header h2 {
        font-size: 20px;
    }

    .search-location {
        font-size: 11px;
    }

    .search-field label,
    .filter-field label {
        font-size: 11px;
    }

    .field-input input,
    .field-input select {
        font-size: 13px;
    }

    .filter-field select {
        font-size: 13px;
    }

    /* Benefits */
    .benefit-card h3 {
        font-size: 12px;
    }

    .benefit-card p {
        font-size: 10px;
    }

    /* Sections */
    .section-label {
        font-size: 10px;
    }

    .section-heading p {
        font-size: 13px;
        line-height: 1.6;
    }

    .view-all {
        font-size: 12px;
    }

    /* Cars */
    .car-info h3 {
        font-size: 16px;
    }

    .car-specs {
        font-size: 11px;
    }

    .car-price strong {
        font-size: 18px;
    }

    .car-price span {
        font-size: 11px;
    }

    .car-details-btn {
        height: 40px;
        font-size: 11px;
    }

    .car-category {
        font-size: 9px;
    }

    /* Offer */
    .offer-label {
        font-size: 9px;
    }

    .offer-card p {
        font-size: 13px;
        line-height: 1.7;
    }

    .coupon-box span {
        font-size: 13px;
    }

    .coupon-box button {
        font-size: 11px;
    }

    /* How it works */
    .step-card h3 {
        font-size: 15px;
    }

    .step-card p {
        font-size: 12px;
        line-height: 1.7;
    }

    /* Why RentNGo */
    .why-card h3 {
        font-size: 14px;
    }

    .why-card p {
        font-size: 11px;
        line-height: 1.7;
    }

    /* Reviews */
    .review-card > p {
        font-size: 12px;
        line-height: 1.75;
    }

    .review-user strong {
        font-size: 13px;
    }

    .review-user span {
        font-size: 11px;
    }

    /* CTA */
    .cta-card p {
        font-size: 12px;
        line-height: 1.7;
    }

    /* Footer */
    .footer-brand p {
        font-size: 12px;
    }

    .footer-column a,
    .footer-column p {
        font-size: 11px;
    }

    .footer-column h3 {
        font-size: 13px;
    }

    .footer-bottom p {
        font-size: 10px;
    }
}


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

@media (max-width: 480px) {

    .hero-description {
        font-size: 13px;
    }

    .search-card-header h2 {
        font-size: 19px;
    }

    .section-heading p {
        font-size: 12px;
    }

    .car-info h3 {
        font-size: 15px;
    }

    .step-card h3 {
        font-size: 14px;
    }

    .step-card p {
        font-size: 11px;
    }

    .why-card h3 {
        font-size: 13px;
    }

    .why-card p {
        font-size: 11px;
    }

}