/*
==================================================
NIRWANA88 STORE
RESPONSIVE CSS
==================================================
*/

/*
==================================================
TABLET
1024px
==================================================
*/

@media (max-width: 1024px) {

    .header {
        padding: 25px 5%;
    }

    .header nav {
        gap: 20px;
    }

    .hero {
        padding: 120px 5% 70px;
    }

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

    .feature {
        grid-template-columns: repeat(2, 1fr);
        padding: 60px 5%;
    }

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

    .products {
        padding: 80px 5%;
    }

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

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

}


/*
==================================================
MOBILE
768px
==================================================
*/

@media (max-width: 768px) {

    html,
    body {
        overflow-x: hidden;
        width: 100%;
    }


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

    .header {
        position: relative;
        width: 100%;

        background: #000;

        flex-direction: column;

        gap: 20px;

        padding: 20px;

        box-sizing: border-box;
    }

    .logo {
        text-align: center;
    }

    .header nav {
        width: 100%;

        display: flex;

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

        flex-wrap: wrap;

        gap: 15px;
    }

    .header nav a {
        font-size: 14px;
    }

    .btn-header {
        display: none;
    }


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

    .hero {
        width: 100%;

        flex-direction: column;

        text-align: center;

        padding: 70px 20px;

        box-sizing: border-box;
    }

    .hero-text {
        width: 100%;
    }

    .hero-text h1 {
        font-size: 42px;

        line-height: 1.1;

        letter-spacing: -1px;
    }

    .hero-text p {
        font-size: 16px;

        line-height: 1.7;

        max-width: 600px;

        margin-left: auto;
        margin-right: auto;
    }

    .hero-button {
        display: flex;

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

        flex-direction: column;

        gap: 12px;
    }

    .hero-button a {
        width: 220px;

        box-sizing: border-box;

        text-align: center;
    }

    .hero-image {
        width: 90%;

        margin: 40px auto 0;
    }

    .hero-image img {
        max-width: 100%;
        height: auto;
    }


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

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

        padding: 50px 20px;
    }

    .feature-box {
        padding: 30px;
    }


    /*
    ==============================
    PRODUCTS
    ==============================
    */

    .products {
        padding: 60px 20px;
    }

    .section-title h2 {
        font-size: 35px;
    }

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

        gap: 25px;
    }

    .card {
        padding: 25px;
    }

    .card img {
        width: 100%;

        height: 230px;

        object-fit: contain;
    }


    /*
    ==============================
    FILTER
    ==============================
    */

    .filter-section {
        padding: 60px 20px;
    }

    .filter-box {
        display: flex;

        flex-wrap: wrap;

        justify-content: center;

        gap: 10px;
    }

    .filter-box button {
        max-width: 100%;
    }


    /*
    ==============================
    ABOUT
    ==============================
    */

    .about-home {
        padding: 60px 20px;

        text-align: center;
    }

    .about-home h2 {
        font-size: 35px;

        line-height: 1.2;
    }


    /*
    ==============================
    ABOUT DETAIL
    ==============================
    */

    .about-detail {
        padding: 70px 20px;

        text-align: center;
    }

    .about-detail h2 {
        font-size: 35px;
    }

    .about-detail p {
        line-height: 1.8;
    }


    /*
    ==============================
    VISION & MISSION
    ==============================
    */

    .vision-section {
        grid-template-columns: 1fr;

        padding: 50px 20px;

        gap: 20px;
    }

    .vision-box {
        padding: 30px;
    }


    /*
    ==============================
    PRODUCT DETAIL
    ==============================
    */

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

        padding: 80px 20px;

        text-align: center;

        gap: 40px;
    }

    .detail-image {
        width: 100%;
    }

    .detail-image img {
        max-width: 100%;

        height: auto;
    }

    .detail-info {
        width: 100%;
    }

    .detail-info h1 {
        font-size: 38px;

        line-height: 1.15;
    }

    .color-option,
    .storage-option {
        justify-content: center;

        flex-wrap: wrap;
    }


    /*
    ==============================
    SPECIFICATION
    ==============================
    */

    .specification {
        padding: 70px 20px;
    }

    .specification h2 {
        font-size: 35px;

        text-align: center;
    }

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

        gap: 18px;
    }


    /*
    ==============================
    REVIEW
    ==============================
    */

    .rating-summary {
        padding: 80px 20px 40px;

        text-align: center;
    }

    .rating-number {
        font-size: 50px;
    }

    .stars {
        font-size: 28px;
    }

    .review-list {
        padding: 40px 20px;

        grid-template-columns: 1fr;
    }

    .review-box {
        padding: 25px;

        text-align: center;
    }


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

    .faq-page {
        padding: 80px 20px;
    }

    .faq-page h2 {
        font-size: 35px;

        text-align: center;
    }

    .faq-question {
        font-size: 15px;

        padding: 20px;

        line-height: 1.5;
    }

    .faq-answer {
        line-height: 1.7;
    }


    /*
    ==============================
    CONTACT
    ==============================
    */

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

        padding: 80px 20px;

        gap: 25px;
    }

    .contact-box,
    .contact-form {
        padding: 25px;
    }

    .contact-form input,
    .contact-form textarea {
        width: 100%;

        box-sizing: border-box;
    }


    /*
    ==============================
    ORDER BANNER
    ==============================
    */

    .order-banner {
        padding: 60px 20px;

        text-align: center;
    }

    .order-banner h2 {
        font-size: 32px;

        line-height: 1.2;
    }


    /*
    ==============================
    PROMO
    ==============================
    */

    .promo-section {
        padding: 60px 20px;
    }

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

        gap: 20px;
    }

    .promo-card {
        padding: 30px;
    }


    /*
    ==============================
    TRACKING
    ==============================
    */

    .tracking-section {
        padding: 80px 20px;
    }

    .tracking-box {
        padding: 30px;

        width: 100%;

        box-sizing: border-box;
    }

    .tracking-box h2 {
        font-size: 32px;
    }

    .tracking-input {
        flex-direction: column;

        width: 100%;
    }

    .tracking-input input,
    .tracking-input button {
        width: 100%;

        box-sizing: border-box;
    }

    .tracking-input button {
        margin-top: 10px;
    }

    .order-status {
        padding: 60px 20px;
    }

    .order-status h2 {
        font-size: 35px;

        text-align: center;
    }

    .timeline {
        width: 100%;
    }

    .timeline-item {
        gap: 15px;

        padding: 20px 10px;
    }


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

    footer {
        padding: 40px 20px;

        text-align: center;
    }

}


/*
==================================================
SMALL MOBILE
480px
==================================================
*/

@media (max-width: 480px) {


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

    .header {
        padding: 18px 15px;
    }

    .logo {
        font-size: 22px;
    }

    .header nav {
        gap: 9px;
    }

    .header nav a {
        font-size: 13px;

        padding: 4px 2px;
    }


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

    .hero {
        padding: 55px 18px;
    }

    .hero-text h1 {
        font-size: 35px;

        line-height: 1.12;
    }

    .hero-text p {
        font-size: 15px;

        line-height: 1.7;
    }

    .hero-button a {
        width: 100%;

        max-width: 260px;
    }


    /*
    ==============================
    SECTION TITLE
    ==============================
    */

    .section-title h2,
    .about-home h2,
    .about-detail h2,
    .faq-page h2,
    .specification h2 {
        font-size: 30px;
    }


    /*
    ==============================
    PRODUCT
    ==============================
    */

    .products {
        padding: 50px 15px;
    }

    .card {
        padding: 22px;
    }

    .card h3 {
        font-size: 22px;
    }

    .card strong {
        font-size: 20px;
    }

    .card img {
        height: 210px;
    }


    /*
    ==============================
    DETAIL PRODUCT
    ==============================
    */

    .detail-product {
        padding: 60px 15px;
    }

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


    /*
    ==============================
    RATING
    ==============================
    */

    .rating-summary {
        padding: 60px 15px 35px;
    }

    .rating-number {
        font-size: 44px;
    }

    .stars {
        font-size: 24px;
    }


    /*
    ==============================
    REVIEW
    ==============================
    */

    .review-list {
        padding: 30px 15px;
    }

    .review-box {
        padding: 22px 18px;
    }


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

    .faq-page {
        padding: 60px 15px;
    }

    .faq-page h2 {
        font-size: 30px;
    }

    .faq-question {
        font-size: 14px;

        padding: 17px 15px;
    }


    /*
    ==============================
    CONTACT
    ==============================
    */

    .contact-section {
        padding: 60px 15px;
    }

    .contact-box,
    .contact-form {
        padding: 22px 18px;
    }


    /*
    ==============================
    PROMO
    ==============================
    */

    .promo-section {
        padding: 50px 15px;
    }

    .promo-card {
        padding: 25px 20px;
    }


    /*
    ==============================
    TRACKING
    ==============================
    */

    .tracking-section {
        padding: 60px 15px;
    }

    .tracking-box {
        padding: 25px 18px;
    }

    .tracking-box h2 {
        font-size: 28px;
    }

    .order-status {
        padding: 50px 15px;
    }

    .order-status h2 {
        font-size: 30px;
    }

    .timeline-item {
        padding: 18px 5px;
    }


    /*
    ==============================
    ORDER BANNER
    ==============================
    */

    .order-banner {
        padding: 50px 18px;
    }

    .order-banner h2 {
        font-size: 28px;
    }


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

    footer {
        padding: 35px 15px;
    }

}


/*
==================================================
VERY SMALL SCREEN
360px
==================================================
*/

@media (max-width: 360px) {

    .header nav {
        gap: 7px;
    }

    .header nav a {
        font-size: 12px;
    }

    .hero-text h1 {
        font-size: 31px;
    }

    .hero-text p {
        font-size: 14px;
    }

    .card {
        padding: 18px;
    }

    .card img {
        height: 190px;
    }

    .card h3 {
        font-size: 20px;
    }

    .card strong {
        font-size: 18px;
    }

    .faq-question {
        font-size: 13px;
        padding: 15px 12px;
    }

}