/* ==========================================================
   Kottal Premium Theme
   Responsive Stylesheet
   Version : 0.1 Alpha
========================================================== */


/* ==========================================
   Large Desktop (1400px+)
========================================== */

@media (min-width:1400px){

    .container{
        max-width:1320px;
    }

}


/* ==========================================
   Desktop (1200px - 1399px)
========================================== */

@media (max-width:1399px){

    h1{
        font-size:56px;
    }

    h2{
        font-size:42px;
    }

}


/* ==========================================
   Laptop (992px - 1199px)
========================================== */

@media (max-width:1199px){

    .section{
        padding:80px 0;
    }

    h1{
        font-size:48px;
    }

    h2{
        font-size:38px;
    }

    .hero-section{
        padding:90px 0;
    }

    .offer-banner,
    .newsletter-wrapper{
        padding:50px;
    }

}


/* ==========================================
   Tablet (768px - 991px)
========================================== */

@media (max-width:991px){

    .section{
        padding:70px 0;
    }

    .hero-section{
        text-align:center;
        padding:70px 0;
    }

    .hero-content{
        margin-bottom:50px;
    }

    .hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .hero-features{
        justify-content:center;
        flex-wrap:wrap;
    }

    .floating-card{
        display:none;
    }

    .offer-content{
        text-align:center;
        margin-bottom:40px;
    }

    .offer-buttons{
        justify-content:center;
    }

    .newsletter-wrapper{
        padding:40px;
    }

    .newsletter-content{
        text-align:center;
        margin-bottom:35px;
    }

    .newsletter-features{
        display:inline-block;
        text-align:left;
    }

    .newsletter-box form{
        flex-direction:column;
    }

    .footer-widget{
        margin-bottom:40px;
    }

}


/* ==========================================
   Mobile (576px - 767px)
========================================== */

@media (max-width:767px){

    body{
        font-size:14px;
    }

    .section{
        padding:60px 0;
    }

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

    h2{
        font-size:30px;
    }

    h3{
        font-size:22px;
    }

    .section-header{
        margin-bottom:40px;
        text-align:center;
    }

    .hero-buttons{
        flex-direction:column;
        gap:15px;
    }

    .btn-primary,
    .btn-outline{
        width:100%;
    }

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

    .category-card{
        margin-bottom:20px;
    }

    .product-card{
        margin-bottom:20px;
    }

    .offer-banner{
        padding:35px;
        text-align:center;
    }

    .offer-content h2{
        font-size:34px;
    }

    .newsletter-wrapper{
        padding:30px;
    }

    .newsletter-box{
        padding:25px;
    }

    .newsletter-box input{
        min-width:100%;
    }

    .footer{
        text-align:center;
    }

    .footer-social{
        justify-content:center;
        display:flex;
        gap:15px;
    }

    .footer-bottom-wrapper{
        flex-direction:column;
        gap:15px;
    }

}


/* ==========================================
   Small Mobile (Below 576px)
========================================== */

@media (max-width:575px){

    .container{
        padding:0 20px;
    }

    h1{
        font-size:32px;
    }

    h2{
        font-size:28px;
    }

    .hero-section{
        padding:50px 0;
    }

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

    .offer-banner{
        padding:25px;
    }

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

    .newsletter-wrapper{
        padding:20px;
    }

    .newsletter-box{
        padding:20px;
    }

    .newsletter-box input,
    .newsletter-box button{

        width:100%;

    }

    .scroll-top{

        right:15px;

        bottom:15px;

    }

}


/* ==========================================
   Mobile Navigation
========================================== */

@media (max-width:991px){

    .main-nav{

        display:none;

    }

    .mobile-toggle{

        display:flex;

    }

}

@media (min-width:992px){

    .mobile-toggle{

        display:none;

    }

}


/* ==========================================
   Product Grid
========================================== */

@media (max-width:991px){

    .product-actions{

        opacity:1;

        right:15px;

    }

}

@media (max-width:575px){

    .product-content{

        padding:18px;

    }

}


/* ==========================================
   Category Grid
========================================== */

@media (max-width:767px){

    .category-content{

        padding:20px;

    }

}


/* ==========================================
   Footer
========================================== */

@media (max-width:767px){

    .payment-icons{

        justify-content:center;

        display:flex;

        flex-wrap:wrap;

        gap:15px;

    }

}

/* ==========================================
   CART MOBILE
========================================== */

@media(max-width:991px){

    .cart-item{

        flex-direction:column;

        text-align:center;

    }

    .cart-total{

        text-align:center;

    }

    .cart-summary{

        margin-top:40px;

        position:relative;

        top:0;

    }

}

/* ==========================================
   CHECKOUT
========================================== */

@media(max-width:991px){

    .checkout-summary{

        margin-top:40px;

        position:relative;

        top:0;

    }

}

/* ==========================================
   LOGIN PAGE
========================================== */

@media(max-width:991px){

    .login-intro{

        padding-right:0;

        margin-bottom:50px;

        text-align:center;

    }

}

@media(max-width:576px){

    .login-card{

        padding:30px 25px;

    }

    .login-links{

        flex-direction:column;

        gap:15px;

        text-align:center;

    }

}

/* ==========================================
   REGISTER
========================================== */

@media(max-width:991px){

    .register-intro{

        padding-right:0;

        margin-bottom:50px;

        text-align:center;

    }

}

@media(max-width:576px){

    .register-card{

        padding:30px 25px;

    }

}

/* ==========================================
   SEARCH
========================================== */

@media(max-width:767px){

    .search-form-section label{

        display:block;

        padding:10px 0;

    }

}

/* ==========================================
   MANUFACTURER PAGE
========================================== */

@media(max-width:991px){

    .manufacturer-banner{

        text-align:center;

    }

    .manufacturer-logo{

        margin-top:40px;

    }

}

/* ==========================================
   ACCOUNT DASHBOARD
========================================== */

@media(max-width:991px){

    .account-sidebar{

        margin-bottom:40px;

    }

}

@media(max-width:576px){

    .dashboard-card{

        padding:20px;

    }

}

/* ==========================================
   FORGOTTEN PASSWORD
========================================== */

@media(max-width:576px){

    .forgotten-card{

        padding:30px 25px;

    }

    .forgotten-buttons{

        flex-direction:column;

    }

    .forgotten-buttons .btn-primary,
    .forgotten-buttons .btn-outline{

        width:100%;

    }

}

/* ==========================================
   WISHLIST
========================================== */

@media(max-width:576px){

    .wishlist-actions{

        flex-direction:column;

    }

    .wishlist-actions .btn-primary,
    .wishlist-actions .btn-outline{

        width:100%;

    }

}

/* ==========================================
   ORDER HISTORY
========================================== */

@media(max-width:767px){

    .order-table{

        min-width:700px;

    }

}

/* ==========================================
   ADDRESS BOOK
========================================== */

@media(max-width:576px){

    .address-header{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }

    .address-footer{

        flex-direction:column;

    }

    .address-footer .btn-outline{

        width:100%;

    }

}

/* ==========================================
   EDIT ACCOUNT
========================================== */

@media(max-width:576px){

    .edit-account-card{

        padding:30px 25px;

    }

    .form-actions{

        flex-direction:column;

    }

    .form-actions .btn-primary,
    .form-actions .btn-outline{

        width:100%;

    }

}

/* ==========================================
   ACCOUNT NEWSLETTER
========================================== */

@media(max-width:576px){

    .newsletter-card{

        padding:30px 25px;

    }

}

/* ==========================================
   DOWNLOADS
========================================== */

@media(max-width:767px){

    .download-table{

        min-width:750px;

    }

}
/* ==========================================
   REWARD POINTS
========================================== */

@media(max-width:767px){

    .reward-summary{

        flex-direction:column;

        text-align:center;

        padding:35px;

    }

    .reward-table{

        min-width:650px;

    }

}
/* ==========================================
   TRANSACTIONS
========================================== */

@media(max-width:767px){

    .transaction-summary{

        flex-direction:column;

        text-align:center;

        padding:35px;

    }

    .transaction-table{

        min-width:650px;

    }

}
/* ==========================================
   RECURRING PAYMENTS
========================================== */

@media(max-width:767px){

    .recurring-table{

        min-width:700px;

    }

}

/* ==========================================
   MINI CART
========================================== */

@media(max-width:576px){

    .mini-cart{

        width:100%;

    }

}

/* ==========================================
   QUICK VIEW
========================================== */

@media(max-width:768px){

    .quick-view-modal{

        width:100%;

        height:100%;

        max-width:100%;

        max-height:100%;

        border-radius:0;

    }

    .quick-view-content{

        padding:25px;

    }

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

    .site-header.header-hidden{

        transform:none;

    }

}

@media(max-width:576px){

    .kottal-toast{

        left:15px;

        right:15px;

        min-width:auto;

        bottom:20px;

    }

}

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

@media(max-width:767px){

    .product-thumbnails{

        justify-content:center;

    }

    .product-thumbnails img{

        width:70px;

        height:70px;

    }

}

/* ==========================================
   SCROLL TO TOP
========================================== */

@media(max-width:576px){

    .scroll-top{

        right:20px;

        bottom:20px;

        width:48px;

        height:48px;

        font-size:16px;

    }

}

@media(max-width:991px){

.offer-wrapper{

padding:50px 35px;

min-height:auto;

background-position:center;

}

.offer-content{

max-width:100%;

}

.offer-content h2{

font-size:42px;

}

.offer-content p{

font-size:18px;

}

}

@media (max-width:991.98px){

    .header-wrapper{
        flex-wrap: wrap;
    }

    .header-logo{
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }

    .header-search{
        width: 100%;
        max-width: 100%;
        margin: 15px 0;
        order: 3;
    }

    .header-actions{
        margin-left: auto;
    }
}

@media (max-width:991.98px){

#menu.kottal-menu{

    background:#23452d !important;

    border:none;

    margin-top:15px;

}

#category{

    color:#fff;

    font-size:18px;

    font-weight:600;

}

#menu .navbar-toggler{

    color:#fff;

    font-size:24px;

    border:none;

}

#navbar-menu{

    background:#fff;

    border-radius:0 0 18px 18px;

}

#menu .nav-item{

    border-bottom:1px solid #ececec;

}

#menu .nav-link{

    color:#23452d !important;

    padding:16px 20px;

}

}

@media (max-width:991.98px){

.kottal-header{

    padding:15px 0;

}

.header-wrapper{

    display:grid;

    grid-template-columns:

        50px

        1fr

        auto;

    grid-template-areas:

        "menu logo cart"

        "search search search";

    gap:15px;

}

.mobile-menu-toggle{

    display:flex;

    grid-area:menu;

}

.header-logo{

    grid-area:logo;

    text-align:center;

}

.header-logo img{

    max-width:140px;

}

.header-search{

    grid-area:search;

    width:100%;

}

.header-actions{

    grid-area:cart;

}

.header-actions .header-icon{

    display:none !important;

}

}

@media (max-width:991px){

    #menu.kottal-menu .dropdown-inner{
        display:block;
    }

}

@media(max-width:768px){

.heroSwiper .swiper-slide{

padding:40px 0;

}

.heroSwiper .swiper-button-next,
.heroSwiper .swiper-button-prev{

display:none;

}

}