/* =========================================================
   CYCLE MART - RESPONSIVE STYLESHEET
   ========================================================= */

/* =========================================================
   LARGE TABLETS / SMALL LAPTOPS
   ========================================================= */

@media (max-width: 1100px) {

    .container {
        width: 92%;
    }

    .nav-links {
        gap: 20px;
    }

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

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

    .products-grid,
    .shop-grid,
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .about-grid,
    .why-grid,
    .delivery-grid,
    .contact-grid {
        gap: 40px;
    }

}


/* =========================================================
   TABLETS
   ========================================================= */

@media (max-width: 900px) {

    /* HEADER */

    .nav-container {
        min-height: 72px;
    }

    .navbar {
        position: fixed;
        top: 72px;
        left: 0;
        right: 0;

        width: 100%;

        background: #ffffff;

        border-top: 1px solid #eeeeee;

        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);

        transform: translateY(-120%);

        opacity: 0;

        visibility: hidden;

        transition:
            transform 0.3s ease,
            opacity 0.3s ease,
            visibility 0.3s ease;

        z-index: 9999;
    }


    .navbar.active {
        transform: translateY(0);

        opacity: 1;

        visibility: visible;
    }


    .nav-links {
        flex-direction: column;

        align-items: stretch;

        gap: 0;

        padding: 15px 0;
    }


    .nav-links li {
        width: 100%;
    }


    .nav-links a {
        display: block;

        width: 100%;

        padding: 15px 6%;

        border-bottom: 1px solid #f1f1f1;
    }


    .menu-toggle {
        display: flex;
    }


    /* HERO */

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


    .hero-content h1 {
        font-size: clamp(44px, 7vw, 62px);
    }


    .hero-content p {
        max-width: 550px;
    }


    /* GRIDS */

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


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


    /* ABOUT */

    .about-grid,
    .why-grid,
    .delivery-grid,
    .contact-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .about-image,
    .why-image,
    .delivery-image,
    .contact-image {
        order: 1;
    }


    .about-content,
    .why-content,
    .delivery-content,
    .contact-content {
        order: 2;
    }


    /* PRODUCT DETAILS */

    .product-details {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .product-gallery {
        max-width: 700px;

        margin: 0 auto;
    }


    /* FAQ */

    .faq-container {
        max-width: 850px;
    }


    /* FOOTER */

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

        gap: 40px;
    }

}


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

@media (max-width: 700px) {

    html {
        scroll-behavior: smooth;
    }


    body {
        overflow-x: hidden;
    }


    .container {
        width: 92%;
    }


    /* HEADER */

    .header {
        position: sticky;

        top: 0;

        z-index: 99999;
    }


    .logo img {
        max-width: 45px;

        max-height: 45px;
    }


    .logo-title {
        font-size: 18px;
    }


    .logo-subtitle {
        font-size: 8px;
    }


    .nav-actions {
        gap: 10px;
    }


    /* HERO */

    .hero {
        min-height: 650px;

        padding: 80px 0;
    }


    .hero-content {
        width: 100%;

        text-align: center;

        margin: 0 auto;
    }


    .hero-content h1 {
        font-size: clamp(38px, 11vw, 52px);

        line-height: 1.05;
    }


    .hero-content p {
        margin-left: auto;

        margin-right: auto;

        font-size: 13px;

        line-height: 1.8;
    }


    .hero-buttons {
        flex-direction: column;

        align-items: stretch;

        width: 100%;

        max-width: 350px;

        margin: 25px auto 0;
    }


    .hero-buttons a {
        width: 100%;

        justify-content: center;
    }


    /* SECTION SPACING */

    section {
        padding-top: 65px;

        padding-bottom: 65px;
    }


    .section-heading {
        margin-bottom: 30px;
    }


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


    /* PRODUCT GRIDS */

    .products-grid,
    .shop-grid,
    .gallery-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .product-card,
    .shop-card {
        width: 100%;
    }


    /* PRODUCT IMAGE */

    .product-image {
        height: 300px;
    }


    .shop-image {
        height: 280px;
    }


    /* FEATURES */

    .features-grid,
    .benefits-grid,
    .services-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .feature-card,
    .benefit-card,
    .service-card {
        padding: 25px 20px;
    }


    /* ABOUT */

    .about-image img,
    .why-image img,
    .delivery-image img,
    .contact-image img {
        width: 100%;

        height: 320px;

        object-fit: cover;
    }


    .about-content h2,
    .why-content h2,
    .delivery-content h2,
    .contact-content h2 {
        font-size: 32px;
    }


    /* GALLERY */

    .gallery-item {
        height: 300px;
    }


    .gallery-item img {
        width: 100%;

        height: 100%;

        object-fit: cover;
    }


    /* PRODUCT DETAILS */

    .product-details {
        display: block;
    }


    .product-main-image {
        width: 100%;

        height: 350px;

        margin-bottom: 25px;
    }


    .product-main-image img {
        width: 100%;

        height: 100%;

        object-fit: contain;
    }


    .product-thumbnails {
        display: grid;

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

        gap: 8px;

        margin-bottom: 30px;
    }


    .product-thumbnail {
        height: 75px;
    }


    .product-info h1 {
        font-size: 32px;
    }


    /* BUTTONS */

    .btn,
    .button,
    .cta-button {
        min-height: 46px;

        padding-left: 18px;

        padding-right: 18px;
    }


    .action-buttons {
        flex-direction: column;

        width: 100%;
    }


    .action-buttons a,
    .action-buttons button {
        width: 100%;

        justify-content: center;
    }


    /* DELIVERY */

    .delivery-box {
        padding: 30px 22px;
    }


    .delivery-actions {
        flex-direction: column;

        width: 100%;
    }


    .delivery-actions a {
        width: 100%;

        justify-content: center;
    }


    /* CONTACT */

    .contact-items {
        gap: 18px;
    }


    .contact-item {
        align-items: flex-start;
    }


    .contact-buttons {
        flex-direction: column;

        width: 100%;
    }


    .contact-buttons a {
        width: 100%;

        justify-content: center;
    }


    /* FAQ */

    .faq-question {
        padding: 18px 15px;

        font-size: 13px;
    }


    .faq-answer {
        padding: 0 15px 18px;

        font-size: 12px;

        line-height: 1.7;
    }


    /* FOOTER */

    .footer {
        padding-bottom: 30px;
    }


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

        gap: 30px;

        text-align: center;
    }


    .footer-brand .logo {
        justify-content: center;
    }


    .footer-column ul {
        align-items: center;
    }

}


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

@media (max-width: 480px) {

    .container {
        width: 94%;
    }


    /* HEADER */

    .nav-container {
        min-height: 64px;
    }


    .navbar {
        top: 64px;
    }


    .logo img {
        width: 40px;

        height: 40px;
    }


    .logo-title {
        font-size: 16px;
    }


    .logo-subtitle {
        font-size: 7px;

        letter-spacing: 1px;
    }


    .nav-icon {
        width: 38px;

        height: 38px;
    }


    .menu-toggle {
        width: 38px;

        height: 38px;
    }


    /* HERO */

    .hero {
        min-height: 580px;

        padding: 65px 0;
    }


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


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


    .hero-label {
        font-size: 8px;

        letter-spacing: 1px;
    }


    /* SECTION */

    section {
        padding-top: 50px;

        padding-bottom: 50px;
    }


    .section-label {
        font-size: 9px;

        letter-spacing: 1.5px;
    }


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


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


    /* IMAGES */

    .product-image {
        height: 270px;
    }


    .shop-image {
        height: 250px;
    }


    .gallery-item {
        height: 260px;
    }


    .about-image img,
    .why-image img,
    .delivery-image img,
    .contact-image img {
        height: 260px;
    }


    /* PRODUCT */

    .product-main-image {
        height: 290px;
    }


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


    .product-thumbnail {
        height: 65px;
    }


    .product-info h1 {
        font-size: 27px;
    }


    .product-info p {
        font-size: 12px;

        line-height: 1.7;
    }


    /* FOOTER */

    .footer-grid {
        gap: 25px;
    }


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


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


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

        text-align: center;
    }

}


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

@media (max-width: 360px) {

    .container {
        width: 95%;
    }


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


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


    .hero-buttons a {
        font-size: 10px;
    }


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


    .product-image {
        height: 240px;
    }


    .shop-image {
        height: 220px;
    }


    .gallery-item {
        height: 230px;
    }


    .product-main-image {
        height: 250px;
    }


    .product-thumbnail {
        height: 55px;
    }

}


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

@media (max-width: 900px) and (orientation: landscape) {

    .hero {
        min-height: 500px;
    }


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


    .navbar {
        max-height: calc(100vh - 70px);

        overflow-y: auto;
    }

}


/* =========================================================
   ACCESSIBILITY / TOUCH DEVICES
   ========================================================= */

@media (hover: none) {

    .product-card:hover,
    .shop-card:hover,
    .gallery-item:hover,
    .feature-card:hover,
    .benefit-card:hover {
        transform: none;
    }

}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }

}