/*
=========================================================
AQUAFARM
Responsive Stylesheet
FILE: assets/css/responsive.css
=========================================================
*/

/* ======================================================
1600px
====================================================== */

@media screen and (max-width:1600px){

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

    .hero-wrapper{
        min-height:700px;
    }

}

/* ======================================================
1440px
====================================================== */

@media screen and (max-width:1440px){

    .hero-content{
        padding:70px;
    }

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

    .section-title{
        font-size:38px;
    }

}

/* ======================================================
1366px
====================================================== */

@media screen and (max-width:1366px){

    .products-grid{
        gap:24px;
    }

    .feature-card{
        gap:15px;
    }

    .glass-testimonial{
        width:380px;
    }

}

/* ======================================================
1280px
====================================================== */

@media screen and (max-width:1280px){

    .hero-wrapper{
        min-height:680px;
    }

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

    .hero-content{
        width:55%;
    }

    .hero-image{
        width:55%;
    }

    .why-wrapper{
        padding:60px;
    }

}

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

@media screen and (max-width:1024px){

    .section-padding{
        padding:100px 0;
    }

    .hero{
        padding-top:150px;
    }

    .hero-wrapper{
        min-height:650px;
    }

    .hero-content{
        padding:60px;
    }

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

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

    .features-wrapper{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

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

    .why-wrapper{
        padding:55px;
    }

    .why-features{
        gap:30px;
    }

    .glass-testimonial{
        position:relative;
        right:auto;
        bottom:auto;
        margin-top:50px;
        width:100%;
    }

    .why-fish{
        width:320px;
        opacity:0.15;
    }

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

}

/* ======================================================
991px
====================================================== */

@media screen and (max-width:991px){

    .nav-menu,
    .desktop-btn{
        display:none;
    }

    .mobile-toggle{
        display:flex;
    }

    .navbar{
        padding:16px 22px;
    }

    .hero-wrapper{
        flex-direction:column;
        min-height:auto;
    }

    .hero-content{
        width:100%;
        padding:70px 50px 50px;
        order:2;
    }

    .hero-image{
        position:relative;
        width:100%;
        height:450px;
        order:1;
    }

    .hero-image::before{
        width:100%;
        height:120px;
        top:auto;
        bottom:0;

        background:linear-gradient(
            to bottom,
            rgba(255,255,255,0),
            rgba(255,255,255,1)
        );
    }

    .features{
        margin-top:-60px;
    }

    .section-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .why-wrapper{
        padding:50px 40px;
    }

}

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

@media screen and (max-width:768px){

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

    .hero{
        padding-top:140px;
        padding-bottom:100px;
    }

    .hero-content{
        padding:60px 35px 40px;
    }

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

    .hero-content p{
        margin-bottom:30px;
    }

    .hero-buttons{
        gap:14px;
    }

    .btn{
        padding:14px 24px;
        font-size:14px;
    }

    .features-wrapper{
        padding:30px;
    }

    .feature-card{
        flex-direction:column;
    }

    .product-image{
        height:240px;
    }

    .product-content h4{
        font-size:20px;
    }

    .why-wrapper{
        padding:45px 30px;
    }

    .why-features{
        flex-direction:column;
        gap:25px;
    }

    .glass-testimonial{
        padding:28px;
    }

    .footer{
        padding-top:80px;
    }

}

/* ======================================================
576px
====================================================== */

@media screen and (max-width:576px){

    .container{
        padding-inline:16px;
    }

    .main-header{
        top:15px;
    }

    .navbar{
        border-radius:24px;
        padding:14px 18px;
    }

    .logo img{
        width:42px;
    }

    .logo-text h2{
        font-size:20px;
    }

    .logo-text span{
        font-size:11px;
    }

    .mobile-toggle{
        width:44px;
        height:44px;
    }

    .hero{
        padding-top:120px;
        padding-bottom:80px;
    }

    .hero-wrapper{
        border-radius:24px;
    }

    .hero-image{
        height:320px;
    }

    .hero-content{
        padding:40px 24px 35px;
    }

    .hero-content h1{
        font-size:34px;
        line-height:1.15;
        margin-bottom:20px;
    }

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

    .hero-buttons{
        width:100%;
        flex-direction:column;
        align-items:stretch;
    }

    .btn{
        width:100%;
    }

    .features{
        margin-top:-40px;
    }

    .features-wrapper{
        grid-template-columns:1fr;
        padding:24px;
        border-radius:24px;
    }

    .feature-card{
        flex-direction:row;
    }

    .feature-icon{
        width:54px;
        height:54px;
    }

    .section-title{
        font-size:32px;
    }

    .products{
        padding-top:90px;
    }

    .products-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .product-image{
        height:260px;
    }

    .product-content{
        padding:20px;
    }

    .product-content h4{
        font-size:20px;
    }

    .product-arrow{
        width:44px;
        height:44px;
    }

    .why-choose{
        padding:90px 0;
    }

    .why-wrapper{
        padding:35px 24px;
        border-radius:24px;
    }

    .why-item{
        flex-direction:column;
    }

    .why-icon{
        width:54px;
        height:54px;
    }

    .glass-testimonial{
        border-radius:20px;
        padding:24px;
    }

    .why-fish{
        width:240px;
    }

    .footer-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }

    .footer-title{
        margin-bottom:18px;
    }

    .social-links a{
        width:44px;
        height:44px;
    }

    .mobile-menu{
        width:78%;
        padding:24px;
    }

}

/* ======================================================
480px
====================================================== */

@media screen and (max-width:480px){

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

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

    .hero-content{
        padding:35px 22px 30px;
    }

    .hero-image{
        height:280px;
    }

    .product-image{
        height:230px;
    }

    .why-wrapper{
        padding:30px 22px;
    }

    .mobile-links a{
        font-size:17px;
    }

}

/* ======================================================
390px
====================================================== */

@media screen and (max-width:390px){

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

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

    .btn{
        padding:13px 20px;
    }

    .section-title{
        font-size:26px;
    }

    .product-content h4{
        font-size:18px;
    }

}

/* ======================================================
375px
====================================================== */

@media screen and (max-width:375px){

    .hero-content{
        padding:32px 20px 28px;
    }

    .hero-image{
        height:260px;
    }

    .feature-card{
        gap:12px;
    }

    .feature-content h4{
        font-size:16px;
    }

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

    .glass-testimonial{
        padding:22px;
    }

}

/* ======================================================
360px
====================================================== */

@media screen and (max-width:360px){

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

    .section-title{
        font-size:24px;
    }

    .navbar{
        padding:12px 16px;
    }

    .mobile-menu{
        width:82%;
    }

    .product-content{
        flex-direction:column;
        align-items:flex-start;
    }

}

/* ======================================================
320px
====================================================== */

@media screen and (max-width:320px){

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

    .hero-content{
        padding:28px 18px 24px;
    }

    .hero-image{
        height:220px;
    }

    .btn{
        font-size:13px;
        padding:12px 18px;
    }

    .section-title{
        font-size:22px;
    }

    .features-wrapper,
    .why-wrapper{
        padding:20px;
    }

    .mobile-menu{
        width:85%;
        padding:20px;
    }

}

/* ======================================================
ABOUT FARM RESPONSIVE
====================================================== */

@media screen and (max-width:991px){

    .about-farm-wrapper{
        grid-template-columns:1fr;
    }

    .about-farm-image{
        order:1;
    }

    .about-farm-content{
        order:2;
    }

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

}

@media screen and (max-width:576px){

    .about-farm{
        padding-top:10px;
        padding-bottom:80px;
    }

    .about-farm-wrapper{
        gap:40px;
    }

    .experience-card{
        position:relative;
        left:auto;
        bottom:auto;
        margin-top:-60px;
        width:100%;
    }

    .experience-card h3{
        font-size:42px;
    }

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

    .testimonial-card{
        padding:25px;
        border-radius:24px;
    }

}

/* ======================================================
TESTIMONIAL RESPONSIVE FIX
====================================================== */

@media screen and (max-width:991px){

    .testimonial-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

}

@media screen and (max-width:576px){

    .testimonials{
        padding:70px 0 90px;
    }

    .testimonial-grid{
        margin-top:40px;
    }

    .testimonial-card{
        padding:24px;
        border-radius:24px;
    }

    .testimonial-stars{
        margin-bottom:18px;
    }

    .testimonial-stars i{
        font-size:16px;
    }

    .testimonial-text{
        font-size:15px;
        line-height:1.8;
        margin-bottom:25px;
    }

    .testimonial-user{
        gap:12px;
    }

    .testimonial-user img{
        width:52px;
        height:52px;
    }

    .testimonial-user h4{
        font-size:18px;
    }

}

/* ======================================================
PRODUCTS PAGE RESPONSIVE
====================================================== */

@media screen and (max-width:1200px){

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

}

@media screen and (max-width:768px){

    .page-hero{
        padding:150px 0 60px;
    }

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

    .page-hero p{
        font-size:18px;
    }

    .filters-wrapper{
        flex-direction:column;
        align-items:stretch;
    }

    .product-search{
        width:100%;
    }

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

    .cart-summary-card{
        padding:40px 30px;
    }

    .cart-summary-card h2{
        font-size:34px;
    }

    .summary-price{
        font-size:42px;
    }

}

@media screen and (max-width:576px){

    .page-hero{
        padding:135px 0 50px;
    }

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

    .page-hero p{
        font-size:16px;
        line-height:1.8;
    }

    .breadcrumb{
        font-size:14px;
    }

    .filter-buttons{
        gap:10px;
    }

    .filter-buttons button{
        padding:12px 18px;
        font-size:14px;
    }

    .product-search input{
        height:54px;
    }

    .product-image{
        height:240px;
    }

    .product-content{
        padding:22px;
    }

    .product-top h3{
        font-size:24px;
    }

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

    .product-actions{
        flex-direction:column;
    }

    .quantity-box{
        width:140px;
    }

    .cart-summary-card{
        border-radius:30px;
        padding:35px 24px;
    }

    .cart-summary-card h2{
        font-size:28px;
    }

    .summary-price{
        font-size:36px;
    }

    .summary-buttons{
        width:100%;
        flex-direction:column;
    }

    .summary-buttons .btn{
        width:100%;
        justify-content:center;
    }

}

/* =========================================================
CART PAGE RESPONSIVE
========================================================= */

@media(max-width:1024px){

    .cart-layout{
        grid-template-columns:1fr;
    }

    .cart-summary-sidebar{
        position:relative;
        top:0;
    }

}

@media(max-width:768px){

    .cart-item-card{
        flex-direction:column;
        padding:20px;
        border-radius:24px;
    }

    .cart-item-image{
        width:100%;
        height:240px;
        min-width:100%;
    }

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

    .cart-item-bottom{
        flex-direction:column;
        align-items:flex-start;
    }

    .cart-price,
    .cart-total{
        font-size:24px;
    }

    .summary-header h2{
        font-size:28px;
    }

    .summary-total h3{
        font-size:30px;
    }

}

@media(max-width:576px){

    .cart-page{
        overflow:hidden;
    }

    .cart-item-card{
        padding:18px;
    }

    .cart-item-image{
        height:220px;
    }

    .cart-item-top{
        flex-direction:column;
    }

    .remove-cart-item{
        width:46px;
        height:46px;
    }

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

    .cart-item-description{
        font-size:15px;
    }

    .cart-price,
    .cart-total{
        font-size:22px;
    }

    .cart-summary-sidebar{
        padding:24px;
        border-radius:24px;
    }

    .summary-header h2{
        font-size:24px;
    }

    .summary-total{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    .summary-total h3{
        font-size:28px;
    }

}
/* =========================================================
CHECKOUT RESPONSIVE
========================================================= */

@media(max-width:1024px){

    .checkout-layout{
        grid-template-columns:1fr;
    }

    .checkout-summary{
        position:relative;
        top:0;
    }

}

@media(max-width:768px){

    .checkout-card,
    .checkout-summary{
        padding:24px;
        border-radius:24px;
    }

    .checkout-form-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .checkout-card-header h2{
        font-size:28px;
    }

    .payment-content{
        padding:18px;
    }

    .payment-content i{
        width:54px;
        height:54px;
        font-size:20px;
    }

    .checkout-total-item.total h3{
        font-size:28px;
    }

}

@media(max-width:576px){

    .checkout-page{
        overflow:hidden;
    }

    .checkout-card,
    .checkout-summary{
        padding:20px;
    }

    .checkout-card-header h2{
        font-size:24px;
    }

    .payment-content{
        align-items:flex-start;
    }

    .payment-content h4{
        font-size:18px;
    }

    .checkout-product{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .checkout-product strong{
        width:100%;
        margin-left:0;
        margin-top:10px;
    }

    .checkout-total-item.total{
        flex-direction:column;
        align-items:flex-start;
    }

    .checkout-total-item.total h3{
        font-size:26px;
    }

}

/* =========================================================
PAYMENT PAGE RESPONSIVE
========================================================= */

@media(max-width:1024px){

    .payment-layout{
        grid-template-columns:1fr;
    }

    .payment-summary{
        position:relative;
        top:0;
    }

}

@media(max-width:768px){

    .payment-card,
    .payment-summary{
        padding:24px;
        border-radius:24px;
    }

    .payment-method-content{
        padding:20px;
    }

    .payment-method-icon{
        width:60px;
        height:60px;
        font-size:22px;
    }

    .payment-method-text h4{
        font-size:20px;
    }

    .paystack-box{
        padding:28px;
    }

    .paystack-box h3{
        font-size:28px;
    }

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

    .payment-total-item.total h3{
        font-size:28px;
    }

}

@media(max-width:576px){

    .payment-page{
        overflow:hidden;
    }

    .payment-card,
    .payment-summary{
        padding:20px;
    }

    .payment-method-content{
        flex-direction:column;
        align-items:flex-start;
    }

    .payment-method-text h4{
        font-size:18px;
    }

    .paystack-box{
        padding:24px;
        border-radius:24px;
    }

    .paystack-box h3{
        font-size:24px;
    }

    .payment-product{
        align-items:flex-start;
        flex-wrap:wrap;
    }

    .payment-product strong{
        width:100%;
        margin-left:0;
        margin-top:10px;
    }

    .payment-total-item.total{
        flex-direction:column;
        align-items:flex-start;
    }

    .payment-total-item.total h3{
        font-size:26px;
    }

}
/* =========================================================
PAYMENT SUCCESS RESPONSIVE
========================================================= */

@media(max-width:1024px){

    .success-wrapper{
        padding:45px;
    }

    .success-wrapper h1{
        font-size:44px;
    }

}

@media(max-width:768px){

    .success-wrapper{
        padding:32px;
        border-radius:30px;
    }

    .success-icon{
        width:100px;
        height:100px;
        font-size:36px;
    }

    .success-wrapper h1{
        font-size:36px;
    }

    .success-order-info{
        grid-template-columns:1fr;
    }

    .success-summary{
        padding:24px;
    }

    .success-product{
        flex-direction:column;
        align-items:flex-start;
    }

    .success-total{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .success-total h3{
        font-size:32px;
    }

}

@media(max-width:576px){

    .payment-success-page{
        overflow:hidden;
    }

    .success-wrapper{
        padding:24px 18px;
    }

    .success-wrapper h1{
        font-size:28px;
    }

    .success-wrapper p{
        font-size:15px;
    }

    .success-info-card{
        padding:22px;
    }

    .success-info-card h4{
        font-size:18px;
    }

    .success-product-left{
        flex-direction:column;
        align-items:flex-start;
    }

    .success-product img{
        width:100%;
        height:220px;
    }

    .success-total h3{
        font-size:28px;
    }

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

    .success-note{
        text-align:left;
        justify-content:flex-start;
    }

}
/* =========================================================
ORDERS PAGE RESPONSIVE
========================================================= */

@media(max-width:1200px){

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

}

@media(max-width:1024px){

    .order-item{
        flex-direction:column;
        align-items:flex-start;
    }

    .order-right{
        width:100%;
        align-items:flex-start;
    }

}

@media(max-width:768px){

    .orders-wrapper{
        padding:28px;
        border-radius:28px;
    }

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

    .order-left{
        flex-direction:column;
        align-items:flex-start;
    }

    .order-left img{
        width:100%;
        height:240px;
    }

    .order-left h3{
        font-size:22px;
    }

    .order-price{
        font-size:24px;
    }

}

@media(max-width:576px){

    .orders-page{
        overflow:hidden;
    }

    .order-stats-grid{
        grid-template-columns:1fr;
    }

    .order-stat-card{
        padding:24px;
        border-radius:24px;
    }

    .orders-wrapper{
        padding:20px;
    }

    .order-item{
        gap:22px;
    }

    .order-left img{
        height:220px;
        border-radius:20px;
    }

    .order-left h3{
        font-size:20px;
    }

    .order-price{
        font-size:22px;
    }

}