/* =========================
   ROOT VARIABLES
========================= */
:root {
  --h1-xl: 40px;
  --h1-lg: 35px;
  --h1-md: 30px;
  --h2-xl: 30px;
  --h2-lg: 25px;
  --p-base: 14px;
}


/* =========================
   RESPONSIVE - 1500px
========================= */

@media screen and (max-width: 1500px) {
  .swiperText h1 {
   font-size: var(--h1-lg);
  }
  .swiperText h2 {
    font-size: var(--h1-md);
  }
  .swiperText p {
    font-size: var(--p-base);
  }
}

/* =========================
   RESPONSIVE - 1200px
========================= */

@media screen and (max-width: 1200px) {
  section.SwiperOuterWrapper .swiper-wrapper {
    height: 400px;
  }

  .swiperText h1 {
    font-size: var(--h1-xl);
  }


  .swiper-slide {
    background-position: right top !important;
    background-size: 100% 100% !important;
  }

  .mainHeader .header-left
 {
    max-width: 20%;
    flex: 0 0 20%;
  }
  .mainHeader .header-center
 {
    max-width: 30%;
    flex: 0 0 30%;
  }
  .mainHeader .header-right
 {
    max-width: 50%;
    flex: 0 0 50%;
  }

  .menuList > li > a {
    color: var(--bg-white);
    padding: 15px 0;
    margin: 0 5px;
    display: block;
    font-size: 12px;
  }

  .single-blog-text p {
    font-size: 16px;
  }
  .single-blog-text h2 {
    font-size: 30px;
  }
  .single-blog-text span.date {
    font-size: 12px;
  }

  .slide_left {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .Single_Product .productcartbtn a {
    font-size: 14px;
    max-width: 37%;
    flex: 0 0 37%;
  }

  #viewmodal .modal-dialog {
    max-width: 1000px;
  }

  .ptb-150.login-bg {
    padding-top: 50px !important;
  }

  .cartButtons {
    justify-content: flex-start;
    column-gap: 15px;
  }

  .product__cart-actions a {
    max-width: unset;
    flex: 0 0 auto;
  }
}

/* =========================
   RESPONSIVE - 992px
========================= */
@media screen and (max-width: 992px) {
  span.badgenum {
    color: var(--color-primary);
    font-size: 13px;
    margin: 0;
  }

  a.logo {
    max-width: 115px;
  }

  header.mainHeader {
    padding: 15px 0;
  }

  .header_search {
    margin: 15px 0 0 0;
  }

  .mainHeader .header-right
 {
    position: absolute;
    top: 65px;
    right: 0;
  }

  a.sf-with-ul {
    border: 0;
  }

  nav.siteMenu.sticky {
    position: static !important;
  }

  .flex-menu li {
    width: 100%;
  }

  .menuList li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  ul.menuList > li:last-child a.sf-with-ul {
    border: 0 !important;
  }

  button.sidebarToggle.navtoggle {
    display: none !important;
  }

  ul.menuList li > a i {
    float: right;
  }

  ul.menuList > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
  }

  .sf-mega {
    position: static !important;
    padding: 10px 0;
    max-height: 250px;
    overflow-y: auto;
  }

  ul.submenu-list {
    display: block !important;
  }

  .siteMenu .col-md-12 {
    padding: 0;
  }

  ul.sub-list {
    padding: 0 15px;
  }

  .flex-menu {
    display: none;
  }

  .mobileHeader {
    display: block;
    padding: 0;
  }

  .mainHeader {
    display: none;
  }

  a.mobileLogo {
    max-width: 130px;
    display: table;
    width: 100%;
    margin: 0;
  }

  .mobile-flex {
    display: block;
  }

  .header_rightlinks.mob-headerLinks {
    padding: 0;
    background: var(--text-dark);
    border-top: 1px solid var(--border-light);
    width: 100%;
  }

  .mobileHeader .col-lg-12.col-md-12.col-sm-12.col-12 {
    padding: 0;
  }

  .mobileHeader .header_rightlinks li a {
    color: var( --text-light);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .mobileHeader .header_rightlinks li a i {
    font-size: 18px !important;
  }

  .mobileHeader .header_rightlinks {
    display: flex;
    justify-content: space-between;
  }

  .mobileHeader span.badge.badge_nav {
    font-size: 9px;
    top: -11px;
    font-weight: 500;
    padding: 2px 4px;
  }

  .mob-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
  }

  button.sidebarToggle {
    font-size: 14px;
    color: var( --text-dark) !important;
    border: 1px solid var(--border-light);
    padding: 5px 10px !important;
    line-height: normal;
  }

  button.categoryToggle {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 23px;
    color: var(--bg-white);
  }

  .mob-headerLinks ul.d-flex.align-items-center {
    justify-content: space-between;
    width: 100%;
  }

  li.catg {
    background:  var(--color-primary);
  }

  li.catg a {
    color: var(--bg-white) !important;
  }

  .swiper-button-prev.swiper-button-white,
  .swiper-button-next.swiper-button-white {
    color: var(--text-medium) !important;
  }

  .mobileHeader .header_rightlinks li {
    border-color: rgba(255, 255, 255, 0.3);
    padding: 14px;
    margin: 0;
    width: 100%;
  }

  ul.menuList.sf-menu {
    display: block;
  }

  section.SwiperOuterWrapper .swiper-wrapper {
    height: 350px;
  }

  .swiperText h1 {
    font-size: var(--h1-lg);
  }


  .swiper-slide {
    background-position: right !important;
    background-size: cover !important;
  }

  ul.footernav li a {
    word-break: break-all;
  }

  .footerWrapper .col-sm-4.col-md-4,
  .footerWrapper .col-sm-8.col-md-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .footerWrapper .col-sm-8.col-md-8 .col-sm-4.col-md-4 {
    flex: 0 0 33.3%;
    max-width: 33.3%;
  }

  .footer-social-links {
    margin-bottom: 30px;
  }

  .blogMainSection .col-md-3 {
    flex: 0 0 35%;
    max-width: 35%;
  }

  .blogMainSection .col-md-9 {
    flex: 0 0 65%;
    max-width: 65%;
  }

  ul.blog_social_links {
    flex-wrap: wrap;
  }
  ul.blog_social_links li a {
    width: auto;
    padding: 5px 10px;
  }

  .product_item_Wrapper .col-lg-10.col-md-10.col-sm-10.col-12 {
    flex: 0 0 70%;
    max-width: 70%;
  }

  .product_item_Wrapper .col-lg-2.col-md-2.col-sm-2.col-12 {
    flex: 0 0 30%;
    max-width: 30%;
  }

  .top_product_Wrapper .col-md-3 {
    flex: 0 0 33.3%;
    max-width: 33%;
  }

  .badge-stockout {
    font-size: 9px;
  }

  .d-flex-caption {
    flex-wrap: wrap;
  }

  .mainSection .col-sm-6.col-md-6.col-lg-6.col-12 {
    max-width: 100%;
    flex: 0 0 100%;
  }

  .product-Description {
    margin: 20px 0 0 0;
  }

  .swiper-button-prev:after,
  .swiper-button-next:after {
    font-size: 22px;
  }
}

/* =========================
   RESPONSIVE - 768px
========================= */
@media screen and (max-width: 768px) {
  .single-blog-text h2 {
    font-size: 30px;
  }
  .single-blog-text p {
    font-size: 16px;
  }

  .topHeader .col-md-9 {
    display: none;
  }

  ul.menuList,
  .topbar_address .d-flex,
  .flex-buttons,
  ul.blog_social_links {
    flex-wrap: wrap;
  }

  .swiperText {
    padding: 0 15px;
    left: 0;
  }

  .swiperText h1 {
    font-size: var(--h1-md);
  }
  .swiperText h2 {
    font-size: var(--h2-lg);
  }

  h2.main_heading {
    font-size: 20px;
  }

  .main-footer .col-sm-4.col-md-4 {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  section.SwiperOuterWrapper .swiper-wrapper {
    height: 350px;
  }

  .hoverOverlay {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    left: 20px;
  }

  .custom-product .col-sm-6.col-md-6.col-lg-6.col-12 {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  .modal_product_wrapper .product-Description {
    margin-top: 30px;
  }

  .slide_left {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
  }

  #viewmodal .Slick_Product_Slider {
    display: none;
  }

  h1.prod-name {
    font-size: 25px;
  }
  h2.prod-title,
  span.prod-discount {
    font-size: 14px;
  }

  .color-select {
    margin-right: 5px;
  }

  .about_text h2 {
    font-size: 25px;
  }

  .ptb-80 {
    padding: 50px 0;
  }

  .contact_Sectn_1 .page_heading {
    margin-bottom: 30px;
  }
  .contactbanner h1 {
    font-size: 25px;
  }

  .Left_address_sectn {
    min-height: auto;
    margin-bottom: 50px;
  }

  .contact_Sectn_1 .col-md-4.col-sm-4,
  .contact_Sectn_1 .col-md-8.col-sm-8 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  p.signup-header {
    float: none;
    margin-top: 20px;
    text-align: left;
    display: flex;
    align-items: center;
    line-height: normal;
  }

  .product_check_bx {
    padding: 8px 0;
    display: inline-block;
    margin: 0 10px 0 0;
  }

  .topPost {
    margin: 30px 0;
  }

  .top_product_Wrapper .col-md-3.col-sm-3.col-lg-3.col-12 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .innerBannerText h1 {
    font-size: 30px;
  }

  .Slick_Product_Slider {
    flex-wrap: wrap;
  }

  .slide_thumbnail {
    flex: 0 0 100%;
    max-width: 100%;
    order: 1;
    cursor: pointer;
    display: none;
  }

  .Single_Product .product-Description {
    margin-top: 15px;
  }
  .Single_Product .single-product-quantity {
    margin: 0 0 15px 0;
  }

  .service_Section .col-md-3 {
    width: 50%;
  }
  .service_Section {
    padding-top: 0;
    margin-top: 30px;
  }

  .banner_Deal_Section .col-md-6 {
    width: 50%;
  }

  .deal_text h2 {
    font-size: 16px;
  }
  .deal_text h3 {
    font-size: 14px;
  }

  .deal_text .swiperbtn {
    margin: 0;
    padding: 10px;
    font-size: 10px;
    line-height: normal;
  }

  section.newsLetter_Section h2 {
    font-size: 25px;
  }
  section.newsLetter_Section h4 {
    font-size: 16px;
  }

  .footerWrapper .col-sm-8.col-md-8 {
    max-width: 100%;
    flex: 0 0 100%;
  }

  .footerWrapper .col-sm-8.col-md-8 .footerItem {
    margin: 30px 0 0 0;
  }

  .footerWrapper .col-sm-8 .col-md-4 {
    flex: 0 0 33.3%;
    max-width: 33.3%;
  }

  h3.footerHeading {
    font-size: 14px !important;
  }

  .main-footer a {
    word-break: break-all;
    font-size: 12px !important;
    line-height: normal;
  }

  .apply-coupon {
    max-width: 66%;
  }

  a.btn-grad.updatebtn {
    margin-top: 0;
  }

  button.applycoupon {
    flex: 0 0 46%;
    max-width: 46%;
  }

  .blog-right .col-lg-4.col-md-4.col-sm-4.col-12 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .product_item_Wrapper .col-lg-10.col-md-10.col-sm-10.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .product_item_Wrapper
    .top_product_Wrapper
    .col-md-3.col-sm-3.col-lg-3.col-12 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .product_item_Wrapper .col-lg-2.col-md-2.col-sm-2.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .main_product_Wrapper {
    margin: 40px 0 0 0;
  }
  .filter_bg {
    padding-left: 20px;
    padding-right: 20px;
  }
  .product_header {
    font-size: 25px;
  }

  .Single_Product .cartButtons.productcartbtn {
    flex-wrap: wrap;
  }

  .cartButtons.productcartbtn a.addcart,
  .cartButtons.productcartbtn a.checkoutbtn {
    width: 100%;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    font-size: 15px;
    margin: 15px 0 0 0;
  }

  .avail_item {
    border: 1px dashed var(--border-light);
    padding: 30px 15px;
    margin: 0 0 15px 0;
    justify-content: center;
  }

  .availability-feat .col-lg-3.col-md-3.col-sm-3.col-12 {
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
  }

  ul#myTab li a {
    padding: 7px 20px;
  }
  .blogMainSection .col-md-3,
  .blogMainSection .col-md-9 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* =========================
   RESPONSIVE - 576px
========================= */
@media screen and (max-width: 576px) {
  .deal_text h2 {
    font-size: 16px;
  }
  .deal_text h3 {
    font-size: 14px;
  }

  .deal_text .swiperbtn {
    margin: 0;
    padding: 10px;
    font-size: 10px;
    line-height: normal;
  }

  .deal_item {
    margin-bottom: 15px;
  }

  .top_cat_caption .d-flex-caption {
    display: block;
  }
  .top_cat_caption h1 {
    font-weight: 400;
    margin: 10px 0;
  }

  .badge-stockout {
    font-size: 9px;
  }

  section.newsLetter_Section h2 {
    font-size: 18px;
  }
  section.newsLetter_Section h4 {
    font-size: 16px;
  }

  .newsletterForm {
    display: block;
  }

  button.btn-grad-two.newsletter-btn {
    display: block;
    margin: 15px 0 0 0;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
  }

  .brand_logo_slider img {
    margin: 0 auto;
    display: table;
  }

  .paybill_images ul {
    flex-wrap: wrap;
    margin: 0;
  }

  .paybill_images li {
    margin: 5px;
  }

  ul.footernav li a,
  p.abouttext {
    font-size: 12px;
  }

  a.footerLogo {
    max-width: 150px;
  }

  a.btn-grad-two.scrollcart span {
    font-size: 10px !important;
    letter-spacing: 0.05em;
  }

  .ovrlybtn {
    font-size: 16px;
    flex: 0 0 40px;
    max-width: 40px;
    height: 40px;
  }

  .cartButtons {
    flex-wrap: wrap;
  }

  .cartButtons a {
    max-width: 100%;
    flex: 0 0 100%;
    font-size: 14px !important;
    margin: 0 0 15px 0;
  }

  .row-1 .order-2 {
    order: 1;
  }
  .row-1 .order-1 {
    order: 2;
  }

  .row-1 .order-2 .about_image,
  .row-2 .about_image {
    margin-bottom: 30px;
    text-align: center;
  }

  button.applycoupon {
    flex: 0 0 50%;
    max-width: 50%;
  }

  a.btn-grad.updatebtn {
    margin: 20px 0 0 0;
    margin-left: auto;
  }

  .filterWrapper {
    flex-wrap: wrap;
    margin: 40px 0;
  }

  .top_product_Wrapper .col-md-3.col-sm-3.col-lg-3.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .avail_item {
    border: 1px dashed var(--border-light);
    padding: 30px 15px;
    margin: 0 0 15px 0;
    justify-content: center;
  }

  .banner_Deal_Section .col-md-6 {
    width: 100%;
  }
}

/* =========================
   RESPONSIVE - 420px
========================= */
@media screen and (max-width: 420px) {
  .top_cat_Wrapper .col-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}