/*---------------------------------------------------- Color------------------------- ------------*/
:root {

    --color_white: #fff;
    --color_black: #2f2f2f;
    --primary_color: #00ca68;
    --secondary_color: #244e27;
    --green-two: #E8F5E4;

}

/* --------------------- Pro Tabs ------------------------------ */

@media (max-width: 1200px) {
    .container {
        width: 900px;
    }

    .banner {
        height: 70vh;
    }

    .topAdsGrid .topAdsImg {
        height: 380px;
    }

    .sectionTitle h2 {
        padding-left: 50px;
    }

    .sectionTitle h2:before {
        left: 0;
    }

    .collectionGrid {
        overflow: auto;
    }

    .collectionBoxHome .collectionBoxImg {
        height: 420px;
    }

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

    .aboutGrid .aboutImg {
        width: 90%;
        height: 68vh;
    }

    .aboutImg .aboutSmallImg {
        right: -12%;
        bottom: 4%;
        width: 45%;
        height: 55%;
    }

    .aboutGrid .aboutText {
        padding-left: 0;
    }

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

    .bottomAdsGrid .bottomAdsImg {
        height: 200px;
    }

    .footerTop {
        display: grid;
        grid-template-columns: 1fr;
        gap: 60px;
        padding: 100px 0 36px;
    }
}


/* --------------------- Mini Tabs ------------------------------ */

@media (max-width: 900px) {
    .container {
        width: 680px;
    }

    .stickyMobileHeader {
        border: none;
    }

    .stickyMobileHeader.is-sticky {
        position: fixed;
        top: 0;
        z-index: 9;
        width: 100%;
        background-color: white;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .menuBtn {
        display: block;
    }

    .stickyHeader.is-sticky {
        display: none;
    }

    .mobileHeader .stickyHeader.is-sticky {
        display: flex;
    }


    .mobileHeader .navbar {
        position: fixed;
        background-color: #00000072;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        transition: 0.1s;
    }

    .mobileMenuShow {
        display: block;
    }

    #menubar .container {
        display: grid;
        grid-template-columns: 2fr 3fr;
        width: 100%;
    }

    #menubar .container .mobileMenu {
        background-color: #fff;
        position: relative;
    }

    .mobileMenu .menuHeader {
        padding: 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ddd;
    }

    .mobileMenu .menuHeader .logo {
        height: 84px;
    }

    .mobileMenu .menuHeader span img {
        height: 20px;
    }

    .mobileMenu .menu {
        flex-direction: column;
        padding: 48px 24px 48px;
        align-items: start;
    }

    .navbar .mobileMenu .menu li {
        font-size: 24px;

    }

    .menuFooter .menu li img {
        height: 26px;
    }

    .bannerSlider .prev,
    .bannerSlider .next {
        top: 90%;
    }

    .menuFooter {
        background-color: #ddd;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
    }

    .filterpanel {
        grid-template-columns: 2fr 3fr;
    }

    .banner {
        height: 40vh;
    }

    .productBox .productImg {
        height: 194px;
    }

    .topAdsGrid {
        gap: 20px;
    }

    .topAdsGrid .topAdsImg {
        height: 300px;
    }

    .collectionGrid {
        gap: 16px;
    }

    .collectionBoxHome .collectionBoxImg {
        height: 316px;
    }

    .achivementGrid {
        gap: 20px;
    }

    .bottomAdsGrid {
        gap: 20px;
    }

    .bottomAdsGrid .bottomAdsImg {
        height: 148px;
    }

    .fotterBottom {
        flex-direction: column;
        row-gap: 2rem;
    }

    .footerBottomIcons img {
        height: 14px;
    }

}


/* --------------------- Mobile ------------------------------ */

@media (max-width: 700px) {
    .container {
        width: 90vw;
    }

    h6 {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .filterpanel {
        grid-template-columns: 1fr 11fr;
    }

    #menubar .container {
        grid-template-columns: 1fr 11fr;
    }

    .profileBtn {
        display: none;
    }

    .headerIcon img {
        width: 16px;
    }

    .headCenter {
        padding: 8px 0 4px;
    }


    .headCenter .logo {
        height: 48px;
    }

    .headRight {
        column-gap: 16px;
    }

    .banner {
        height: 24vh;
    }

    .bannerSlider .prev,
    .bannerSlider .next {
        top: 80%;
        width: 30px;
        height: 30px;
    }

    .bannerSlider .next {
        right: 5vw;
    }

    .bannerSlider .prev {
        left: 5vw;
    }

    .productBox .productImg {
        height: 132px;
    }

    .productDes p {
        font-size: 13px;
    }

    .productDes .price {
        flex-direction: column;
        font-size: 12px;
    }

    .swiper-button-next,
    .swiper-button-prev {
        top: 95% !important;
    }

    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
        left: 0 !important;
    }

    .swiper-button-next,
    .swiper-rtl .swiper-button-prev {
        right: 0 !important;
    }

    .featuredSection {
        padding: 2rem 0;
    }

    .fotterBottom {
        align-items: start;
    }

    .footerBottomIcons {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 2rem;
    }

    .achivementGrid {
        gap: 16px;
        grid-template-columns: 1fr;
    }

    .sectionTitle {
        margin-bottom: 1rem;
    }

    .sectionTitle h2 {
        font-size: 18px;
    }

}