@media(max-width:768px){

    .navbar{

        flex-direction:column;
        gap:20px;

    }

    .nav-links{

        flex-direction:column;
        text-align:center;
        gap:15px;

    }

    .hero{

        flex-direction:column;
        text-align:center;
        padding:30px 20px;

    }

    .hero h1{

        font-size:35px;

    }

    .hero p{

        font-size:16px;

    }

    .hero-image img{

        width:90%;
        margin-top:30px;

    }

    .btn-primary,
    .btn-secondary{

        display:inline-block;
        width:80%;
        margin:8px auto;

    }

    .card{

        width:90%;
        margin:auto;

    }

}
@media(max-width:768px){

.products-container{

    grid-template-columns:1fr;

}

}
@media(max-width:768px){

    .checkout{

        width:90%;
        padding:25px;

    }

    .checkout h1{

        font-size:30px;

    }

}
@media(max-width:992px){

    .row{

        grid-template-columns:1fr;

    }

}
@media(max-width:768px){

.contact-section{

flex-direction:column;

}

}
/* Mobile Responsive */

@media (max-width: 768px){

    body{
        overflow-x: hidden;
    }

    h1{
        font-size: 28px;
    }

    h2{
        font-size: 22px;
    }

    p{
        font-size: 15px;
    }

    .container{
        width: 90%;
        margin: auto;
    }

}
@media (max-width:768px){

    .hero{
        flex-direction:column;
        text-align:center;
        padding:40px 20px;
        gap:30px;
    }


    .hero-text{
        width:100%;
    }


    .tag{
        font-size:14px;
    }


    .hero h1{
        font-size:36px;
        line-height:1.2;
    }


    .hero p{
        font-size:15px;
        line-height:1.6;
    }


    .hero-buttons{
        display:flex;
        flex-direction:column;
        gap:15px;
        align-items:center;
    }


    .btn-primary,
    .btn-secondary{
        width:80%;
        text-align:center;
    }


    .hero-image{
        width:100%;
    }


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

}
@media (max-width:768px){

    .stats{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:20px;
        padding:30px 20px;
    }


    .stat-box{
        text-align:center;
        padding:20px 10px;
    }


    .stat-box h2{
        font-size:28px;
        margin-bottom:8px;
    }


    .stat-box p{
        font-size:14px;
    }

}
@media (max-width:768px){

    .featured{
        padding:40px 20px;
    }


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


    .section-title p{
        font-size:15px;
    }


    .featured-container{
        display:grid;
        grid-template-columns:1fr;
        gap:25px;
    }


    .card{
        width:100%;
        text-align:center;
    }


    .card img{
        width:100%;
        height:auto;
        border-radius:10px;
    }


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


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


    .shop-btn{
        display:inline-block;
        width:80%;
        text-align:center;
        margin-top:10px;
    }

}
@media (max-width:768px){

    .reviews{
        padding:40px 20px;
    }


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


    .section-title p{
        font-size:15px;
    }


    .review-container{
        display:grid;
        grid-template-columns:1fr;
        gap:20px;
    }


    .review-card{
        text-align:center;
        padding:25px 15px;
    }


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


    .stars{
        font-size:18px;
        margin:10px 0;
    }


    .review-card p{
        font-size:14px;
        line-height:1.6;
    }

}
@media (max-width:768px){

    .newsletter{
        padding:40px 20px;
        text-align:center;
    }


    .newsletter-content h2{
        font-size:28px;
    }


    .newsletter-content p{
        font-size:15px;
        line-height:1.6;
    }


    .newsletter-form{
        display:flex;
        flex-direction:column;
        gap:15px;
        align-items:center;
    }


    .newsletter-form input{
        width:100%;
        padding:12px;
    }


    .newsletter-form button{
        width:100%;
    }



    /* Footer */

    .footer{
        padding:40px 20px;
    }


    .footer-container{
        display:grid;
        grid-template-columns:1fr;
        gap:30px;
        text-align:center;
    }


    .footer-box h3{
        font-size:20px;
    }


    .footer-box p,
    .footer-box a{
        font-size:14px;
        line-height:1.6;
    }


    .footer-box a{
        display:block;
        margin:8px 0;
    }


    .copyright{
        font-size:14px;
        text-align:center;
    }

}
@media (max-width:768px){

    /* Top bar */
    .top-bar{
        font-size:12px;
        text-align:center;
        padding:10px;
    }


    /* Filters */

    .filters{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:10px;
        padding:20px;
    }


    .filters button{
        padding:10px 15px;
        font-size:14px;
    }


    /* Products */

    .products{
        display:grid;
        grid-template-columns:1fr;
        gap:25px;
        padding:20px;
    }


    .product-card{
        width:100%;
        text-align:center;
        padding:20px;
    }


    .product-card img{
        width:100%;
        height:auto;
        object-fit:cover;
    }


    .product-card h3{
        font-size:18px;
        line-height:1.4;
    }


    .product-price{
        font-size:18px;
    }


    .details-btn,
    .add-to-cart{
        width:100%;
        display:block;
        margin-top:10px;
    }


    .rating{
        margin-top:12px;
    }

}
.products{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:15px;
    padding:15px;
}
.product-card{
    width:100%;
    text-align:center;
    padding:12px;
}

.product-card h3{
    font-size:15px;
}

.product-price{
    font-size:16px;
}

.details-btn,
.add-to-cart{
    font-size:13px;
    padding:10px 5px;
}
@media (max-width:768px){

    .tracking-box{
        width:90%;
        margin:30px auto;
        padding:20px;
    }


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


    #order-id{
        font-size:16px;
    }


    #order-details{
        padding:15px;
        margin-top:20px;
    }


    .tracking{
        flex-direction:column;
        gap:20px;
    }


    .line{
        width:3px;
        height:40px;
    }


    .step{
        width:100%;
    }


    .step .icon{
        font-size:32px;
    }


    .step h3{
        font-size:18px;
    }


    .step p{
        font-size:14px;
    }

}
@media (max-width:768px){

    .success{
        width:90%;
        margin:40px auto;
        padding:25px 15px;
        text-align:center;
    }


    .success h1{
        font-size:26px;
        line-height:1.4;
    }


    .success p{
        font-size:15px;
        line-height:1.6;
    }


    #order-id{
        font-size:16px;
    }


    .success .btn-primary{
        display:block;
        width:100%;
        margin:15px 0;
        padding:14px;
        text-align:center;
    }

}
@media (max-width:768px){

    /* Signup Section */

    .signup-section{
        padding:40px 15px;
    }


    .signup-box{
        width:100%;
        max-width:400px;
        padding:25px 20px;
        margin:auto;
    }


    .signup-box h1{
        font-size:26px;
        text-align:center;
    }


    .signup-box > p{
        font-size:15px;
        text-align:center;
        line-height:1.5;
    }


    .signup-box form{
        width:100%;
    }


    .signup-box label{
        font-size:14px;
    }


    .signup-box input{
        width:100%;
        padding:12px;
        font-size:15px;
        box-sizing:border-box;
    }


    .signup-box button{
        width:100%;
        padding:14px;
        font-size:15px;
    }


    .login-link{
        font-size:14px;
        text-align:center;
    }

}
@media (max-width:768px){

    .info-page{
        width:90%;
        margin:30px auto;
        padding:20px 0;
        text-align:center;
    }


    .info-page h1{
        font-size:28px;
        line-height:1.3;
    }


    .info-page h2{
        font-size:21px;
        margin-top:25px;
    }


    .info-page p{
        font-size:15px;
        line-height:1.7;
    }


    .tracking-box{
        display:flex;
        flex-direction:column;
        gap:15px;
        width:100%;
        margin-top:20px;
    }


    .tracking-box input{
        width:100%;
        padding:13px;
        box-sizing:border-box;
        font-size:15px;
    }


    .tracking-box button{
        width:100%;
        padding:13px;
        font-size:15px;
    }

}
@media (max-width:768px){

    .info-page{
        width:90%;
        margin:25px auto;
        padding:15px;
        text-align:center;
    }

    .info-page h1{
        font-size:26px;
        margin-bottom:15px;
    }

    .info-page h2{
        font-size:19px;
        margin-top:18px;
        margin-bottom:8px;
    }

    .info-page p{
        font-size:14px;
        line-height:1.5;
        margin-bottom:12px;
    }

    .footer{
        margin-top:20px;
    }

}
@media (max-width:768px){

    .product-details{
        display:flex;
        flex-direction:column;
        width:90%;
        margin:30px auto;
        gap:25px;
    }


    .product-image{
        width:100%;
        text-align:center;
    }


    .product-image img{
        width:100%;
        max-width:350px;
        height:auto;
    }


    .product-info{
        width:100%;
        text-align:center;
    }


    .product-info h1{
        font-size:25px;
        line-height:1.3;
    }


    .product-info h2{
        font-size:22px;
    }


    .product-info p{
        font-size:14px;
        line-height:1.6;
    }


    .quantity{
        justify-content:center;
        display:flex;
        gap:10px;
        margin:20px 0;
    }


    .quantity input{
        width:60px;
        text-align:center;
    }


    .product-info button{
        width:100%;
        padding:14px;
        margin-top:10px;
    }



    /* Shipping Section */

    .shipping-details{
        width:90%;
        margin:30px auto;
    }


    .shipping-details h2{
        text-align:center;
        font-size:24px;
    }


    .shipping-container{
        display:grid;
        grid-template-columns:1fr;
        gap:15px;
    }


    .shipping-item{
        text-align:center;
        padding:15px;
    }


    .shipping-item h3{
        font-size:18px;
    }


    .shipping-item p{
        font-size:14px;
    }

}
@media (max-width:768px){

    .info-page{
        width:90%;
        margin:25px auto;
        padding:15px;
    }


    .info-page h1{
        font-size:26px;
        text-align:center;
        margin-bottom:18px;
    }


    .info-page h2{
        font-size:19px;
        margin-top:20px;
        margin-bottom:8px;
    }


    .info-page p{
        font-size:14px;
        line-height:1.6;
        margin-bottom:12px;
    }

}
@media (max-width:768px){

    .payment-section{
        width:100%;
        padding:30px 15px;
    }


    .payment-box{
        width:100%;
        max-width:400px;
        margin:auto;
        padding:25px 20px;
    }


    .payment-box h2{
        font-size:26px;
        text-align:center;
    }


    .payment-text{
        font-size:14px;
        text-align:center;
        line-height:1.5;
    }


    .card-icons{
        text-align:center;
        margin:15px 0;
    }


    .card-icons i{
        font-size:30px;
        margin:0 5px;
    }


    #payment-form label{
        font-size:14px;
    }


    #payment-form input{
        width:100%;
        padding:13px;
        font-size:15px;
        box-sizing:border-box;
    }


    .card-row{
        display:flex;
        flex-direction:column;
        gap:15px;
    }


    .input-group{
        width:100%;
    }


    .pay-btn{
        width:100%;
        padding:14px;
        font-size:16px;
        margin-top:15px;
    }

}
@media (max-width:768px){

    .login-section{
        width:100%;
        padding:40px 15px;
    }


    .login-box{
        width:100%;
        max-width:400px;
        margin:auto;
        padding:25px 20px;
    }


    .login-box h1{
        font-size:28px;
        text-align:center;
    }


    .login-box > p{
        text-align:center;
        font-size:15px;
    }


    .login-box form{
        width:100%;
    }


    .login-box label{
        font-size:14px;
    }


    .login-box input{
        width:100%;
        padding:13px;
        font-size:15px;
        box-sizing:border-box;
    }


    .login-box button{
        width:100%;
        padding:14px;
        font-size:16px;
        margin-top:10px;
    }


    .signup,
    .forgot-password{
        text-align:center;
        font-size:14px;
    }

}
@media (max-width:768px){

    .info-page{
        width:90%;
        margin:25px auto;
        padding:15px;
    }


    .info-page h1{
        font-size:26px;
        text-align:center;
        line-height:1.3;
        margin-bottom:18px;
    }


    .info-page h2{
        font-size:19px;
        margin-top:20px;
        margin-bottom:8px;
    }


    .info-page p{
        font-size:14px;
        line-height:1.6;
        margin-bottom:12px;
    }


    .footer{
        margin-top:25px;
    }

}
@media (max-width:768px){

    .contact-section{
        width:90%;
        margin:30px auto;
        display:flex;
        flex-direction:column;
        gap:25px;
    }


    .contact-info,
    .contact-form{
        width:100%;
    }


    .contact-info h1{
        font-size:28px;
        text-align:center;
    }


    .contact-info > p{
        text-align:center;
        font-size:15px;
        line-height:1.6;
    }


    .info-box{
        text-align:center;
        padding:15px;
        margin-bottom:15px;
    }


    .info-box h3{
        font-size:18px;
    }


    .info-box p{
        font-size:14px;
    }


    .contact-form h2{
        text-align:center;
        font-size:24px;
    }


    .contact-form input,
    .contact-form textarea{
        width:100%;
        padding:13px;
        font-size:15px;
        box-sizing:border-box;
    }


    .contact-form textarea{
        min-height:120px;
    }


    .contact-form button{
        width:100%;
        padding:14px;
        font-size:16px;
    }

}
@media (max-width:768px){

    body{
        overflow-x:hidden;
    }


    /* Checkout Heading */

    body > h2{
        text-align:center;
        font-size:26px;
        margin:25px 0;
    }


    /* Form */

    #checkout-form{
        width:90%;
        margin:auto;
        padding:20px;
        box-sizing:border-box;
    }


    #checkout-form input,
    #checkout-form select,
    #checkout-form textarea{
        width:100%;
        padding:13px;
        font-size:15px;
        box-sizing:border-box;
    }


    #checkout-form label{
        font-size:14px;
    }


    .row{
        display:flex;
        flex-direction:column;
        gap:15px;
    }


    .row div{
        width:100%;
    }


    .terms{
        display:flex;
        align-items:center;
        gap:8px;
        font-size:13px;
    }


    .btn-primary{
        width:100%;
        padding:14px;
        margin-top:15px;
    }



    /* Right Side */

    .checkout-right{
        width:90%;
        margin:25px auto;
    }


    .secure-box{
        text-align:center;
        padding:15px;
        font-size:14px;
    }


    .payment-method{
        display:flex;
        flex-direction:column;
        gap:12px;
    }


    .pay-btn{
        display:block;
        width:100%;
        text-align:center;
        padding:14px;
        margin-top:15px;
    }


    #checkout-items{
        width:100%;
    }


    .summary{
        padding:15px;
    }


    .summary p,
    .summary h3{
        display:flex;
        justify-content:space-between;
    }

}
@media (max-width:768px){

    .cart-section{
        width:90%;
        margin:30px auto;
        text-align:center;
    }


    .cart-section h1{
        font-size:28px;
        margin-bottom:20px;
    }


    #cart-items{
        width:100%;
    }


    .cart-item{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:12px;
        padding:15px;
        margin-bottom:15px;
    }


    .cart-item img{
        width:120px;
        height:120px;
        object-fit:cover;
    }


    .cart-item h3{
        font-size:17px;
    }


    .cart-item p{
        font-size:14px;
    }


    .cart-summary{
        width:100%;
        padding:15px;
        margin-top:20px;
    }


    .cart-summary h3{
        font-size:20px;
    }


    .cart-section .btn-primary{
        width:100%;
        padding:14px;
        margin-top:15px;
    }

}
/* About Page Mobile Responsive */

@media (max-width: 768px){

    .about-hero{
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
        gap: 30px;
    }


    .about-text{
        width: 100%;
    }


    .about-text h1{
        font-size: 32px;
        line-height: 1.2;
    }


    .about-text p{
        font-size: 15px;
        line-height: 1.7;
    }


    .about-button{
        display: inline-block;
        margin-top: 15px;
    }


    .about-image{
        width: 100%;
    }


    .about-image img{
        width: 100%;
        height: auto;
        border-radius: 20px;
    }


    .story{
        padding: 40px 20px;
        text-align: center;
    }


    .story h2{
        font-size: 28px;
    }


    .story p{
        font-size: 15px;
        line-height: 1.7;
    }


    .values{
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 30px 20px;
    }


    .value-card{
        width: 100%;
        text-align: center;
        padding: 25px 15px;
    }


    .footer-container{
        flex-direction: column;
        text-align: center;
    }


    .footer-box{
        width: 100%;
        margin-bottom: 25px;
    }

}


/* Small Mobile */

@media (max-width: 480px){

    .about-text h1{
        font-size: 26px;
    }


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


    .story h2{
        font-size: 24px;
    }

}
/* Track Order Mobile Responsive */

@media (max-width: 768px){

    .info-page{
        width: 90%;
        margin: 30px auto;
        padding: 25px 15px;
        text-align: center;
    }


    .info-page h1{
        font-size: 28px;
    }


    .info-page h2{
        font-size: 22px;
        margin-top: 25px;
    }


    .info-page p{
        font-size: 15px;
        line-height: 1.6;
    }


    .tracking-box{
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }


    .tracking-box input{
        width: 100%;
        padding: 14px;
        box-sizing: border-box;
    }


    .tracking-box button{
        width: 100%;
        padding: 14px;
    }

}


@media (max-width: 480px){

    .info-page h1{
        font-size: 24px;
    }


    .info-page h2{
        font-size: 20px;
    }

}
@media (max-width: 768px){

    .tracking-box{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .tracking-box input{
        width: 100%;
    }

    .tracking-box button{
        width: 100%;
    }

}
@media (max-width: 768px){

    .tracking-box{
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .tracking-box input,
    .tracking-box button{
        width: 100% !important;
        display: block !important;
        margin: 10px 0;
    }

}
@media (max-width: 768px){

    .tracking-box{
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .tracking-box input{
        width: 100% !important;
        box-sizing: border-box;
    }

    .tracking-box button{
        width: 100% !important;
    }

}
@media (max-width:768px){

    .tracking-box{
        display:block !important;
        width:100% !important;
    }

    .track-input,
    .track-button{
        width:100% !important;
        display:block !important;
        margin-bottom:15px;
    }

    .track-input input,
    .track-button button{
        width:100% !important;
    }

}
@media (max-width: 768px){

    .tracking{
        flex-direction: column;
        align-items: center;
    }

    .step{
        width: 100%;
        text-align: center;
    }

    .line{
        width: 2px;
        height: 50px;
        margin: 10px 0;
    }

}
@media (max-width:768px){

.tracking-box .tracking{
    display:flex !important;
    flex-direction:column !important;
}

.tracking-box .line{
    height:40px !important;
    width:2px !important;
}

}