
@media(min-width:576px) {
    .filter-main-area.d-none {
        display: block !important;
    }
}
@media(min-width:768px){
     .zoom-wrapper-area.fixed {
    top: 50px !important;
    position: fixed;
    width: 39%;
}
}
@media (min-width: 992px) {
    .product-banner-section .owl-carousel.fix-3-layout .item {
        width: 33.33% !important;
    }
    .zoom-wrapper-area.fixed {
    width: 35%;
}
}
@media(min-width:1200px) {
    .container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 25px;
    }
}




@media(max-width:1199px){

}

@media(max-width:991px) {
    header .login-bar .menu-area {
        border-top: none;
        border-bottom: none;
        padding: 0;
    }
    header .login-bar .menu-area.active{
        z-index: 11;
    }

    header .login-bar .area-1 {
        margin-left: 60px;
    }

    header .login-bar .menu-area .navbar-nav .nav-item {
        margin-bottom: 10px;
    }

    header .login-bar .menu-area .navbar {
        position: absolute;
        z-index: 9;
        width: 96%;
    }

    header .login-bar .menu-area .navbar-collapse {
        position: relative;
        top: -35px;
        background-color: #fff;
    }

    .banner-main .banner-part-1 .carousel-item h2 {
        font-size: 24px;
    }

    .product-section .product-item .card .action-btn-area .btn {
        font-size: 12px;
        padding: 4px 8px;
        border-radius: 6px;
        width: 90% !important;
        margin: 0 auto 10px;
    }

    .product-section .action-btn-area .d-flex {
        gap: 5px !important;
    }

    .menu-area.active {
        position: absolute;
        top: 0;
    }

    header .navbar-nav {
        background-color: #fff;
        box-shadow: 10px 10px 20px 10px #0000003d;
        padding: 45px 10px 20px 10px;
        position: absolute;
        left: -15px;
        top: 12px;
        max-width: 652px;
        height: 100%;
        min-width: 500px;
    }

    .banner-main .banner-part-1 .carousel-item .product-img span {
        height: 65px;
        width: 65px;
        line-height: 52px;
        border: 2px solid #fff;
        top: -26px !important;
        right: -20px !important;
        font-size: 14px;
    }

    .sub-headline h5 {
        font-size: 24px;
    }

    .btn.type-02 {
        padding: 8px 20px;
    }

    .menu-area .navbar-collapse {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        /* width: 100%; */
        height: 100vh;
        background-color: white;
        z-index: 9999;
        opacity: 0;
        transform: translateX(-100%);
        transition: transform 0.4s ease, opacity 0.4s ease;
    }

    .menu-area.active .navbar-collapse {
        display: block;
        opacity: 1;
        transform: translateX(0);
        position: fixed !important;
        height: 120vh;
        top: -12px !important;
    }

    .menu-area .cls-btn {
        position: absolute;
        top: 10px;
        left: 20px;
        z-index: 10000;
        opacity: 0;
        transition: opacity 0.3s ease 0.05s;
        /* delay of 0.05s */
    }

    .menu-area.active .cls-btn {
        opacity: 1;
    }

    .menu-area.active .cls-btn .btn {
        display: block !important;
        background: #fff;
        border-radius: 50%;
        box-shadow: 0 2px 6px 4px #0000001c;
        position: absolute;
        z-index: 99;
        right: -15px;
        top: 11px;
        opacity: 1 !important;
    }

    .cls-btn .btn {
        background: transparent;
        border: none;
        font-size: 28px;
        cursor: pointer;
    }

    .menu-area.active .navbar-toggler {
        display: none;
    }
    #result {
    display: none !important;
}
}

@media(max-width:767px) {
    header .login-bar .login-group li a.text-dark span {
        display: none;
    }

    header .login-bar .ctg-btn .btn {
        font-size: 12px;
        padding: 8px 12px;
    }

    .banner-main .banner-part-2 ul {
        gap: 15px;
        display: flex;
        flex-direction: row;
        height: 100%;
        justify-content: space-between;
        margin-top: 15px;
    }

    .delevery-info-main .col-6.area2 {
        border: none !important;
    }

    .product-section .action-btn-area .d-flex {
        gap: 25px !important;
    }

    .vission-mission-area .img-area {
        max-width: 100%;
        margin-bottom: 20px;
    }

    .vission-mission-area .info p {
        font-size: 14px;
        line-height: 20px;
    }

    .vission-mission-area .info h4 {
        font-size: 17px;
        margin-bottom: 5px;
    }

    .vission-mission-area {
        padding: 20px 0;
    }

    .vission-mission-area .mb-5 {
        margin-bottom: 15px !important;
    }

    .enquire-main .info h2 {
        line-height: 32px;
        font-size: 24px;
    }

    .enquire-main .info .btn.type-03 {
        margin: 15px 0;
    }

    .enquire-main {
        padding: 35px 0;
    }

    .donation-main .card .img-area {
        height: 200px;
    }

    .donation-main .card .info h4 {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .donation-main .card .info ul li {
        font-size: 14px;
        font-weight: 600 !important;
    }

    .footer-area p,
    .footer-area ul li {
        font-size: 14px;
        line-height: 18px;
    }

    .product-section .product-item .card .badge-group .badge {
        margin: 0 !important;
    }

    .donation-main p {
        font-size: 14px;
        line-height: 20px;
    }

    .filter-main-area .filter-sidebar {
        padding: 12px;
        max-width: 100%;
    }

    .product-section .product-item .card .action-btn-area {
        margin-top: 5px;
    }

    .product-section .product-item .card .action-btn-area p.icon {
        font-size: 18px;
    }

    .enquire-main-2 .enquire-heading {
        font-size: 20px;
        margin-bottom: 0;
    }

    .product-details-main .product-image-area .image-box {
        position: relative;
        width: 100%;
    }

    .product-details-main .product-image-area .zoom-preview {
        display: none !important;
    }
         .zoom-wrapper-area.fixed {
    top: 0 !important;
    position: relative;
    width: 100%;
}
.zoom-wrapper-area .slideshow-items {
    width: 100%;
}
    .zoom-wrapper-area .slideshow-items {
        width: 100%;
        margin: 0 auto;
    }

}

@media(max-width:600px) {
    header .login-bar .ctg-bar {
        min-width: 32px;
    }

    header .login-bar .logo-area {
        max-width: 140px;
    }

    header .login-area {
        position: relative;
    }

    header .login-bar .area-2 {
        position: absolute;
        top: 45px;
        max-width: 100% !important;
        width: 100%;
    }

    header .login-bar .login-area .part-2 {
        gap: 15px;
        margin-left: 10px;
    }

    header .login-bar .login-group {
        gap: 10px;
    }

    header .login-bar .login-group li::after {
        display: none;
    }

    header .sub-header p,
    header .sub-header ul,
    header .sub-header ul li,
    .sub-header ul li a,
    header .sub-header span {
        color: white;
        margin: 0;
        font-size: 12px;
    }

    header .login-bar .menu-area .navbar-toggler {
        top: -42px;
        padding: 2px 6px;
    }

    header .login-bar .area-1 {
        margin-left: 42px;
    }

    .banner-main {
        margin-top: 40px;
    }

    .banner-main .banner-part-1 .carousel-item .btn {
        padding: 10px 20px;
        font-size: 14px;
        gap: 7px;
    }

    .delevery-info-main .icon-area {
        width: 30px;
    }

    .delevery-info-main .icon-area img {
        width: 100%;
    }

    .delevery-info-main .info h6 {
        font-size: 14px;
        line-height: 18px;
        margin-bottom: 0 !important;
    }

    .delevery-info-main .info .small {
        line-height: 16px;
    }

    .delevery-info-main .d-flex .col-6 {
        gap: 10px !important;
    }

    .category-main .product-icon {
        width: 75px;
        height: 75px;
    }

    .product-bigger-banner h2 {
        font-size: 24px;
    }

    .product-section .product-item .card {
        padding: 6px;
    }

    .product-section .product-item .card .card-body .card-title {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .product-section .product-item .card .card-body p {
        font-size: 12px;
        margin-bottom: 0px !important;
    }

    .product-section .product-item .card .rating-area ion-icon {
        font-size: 14px;
    }

    .col-6,
    .col-md-6,
    .col-sm-6,
    .col-md-4,
    .col-sm-4,
    .col-md-3,
    .col-sm-3 {
        padding: 0 6px;
    }

    header .login-bar .ctg-btn .btn {
        position: absolute;
        top: 40px;
        right: 0;
    }

    header .login-bar .area-2 {
        top: 40px;
    }

    header .login-bar .search-area {
    }

    header .login-bar .search-area .form-control {
        padding: 6px 10px 6px 30px;
        font-size: 12px;
        transition: 0.5s ease;
        border-radius: 6px;
    }

    header .login-bar .search-area .icon {
        position: absolute;
        top: 6px;
    }

    .breadcrumb-area {
        margin-top: 30px;
    }

    .breadcrumb-area ul li {
        font-size: 14px !important;
    }

    .breadcrumb-main {
        margin-bottom: 12px !important;
    }

    .enquire-main-2 .enquire-btn {
        margin-top: 15px;
        padding: 8px 16px;
        font-size: 14px;
    }

    .product-banner-section .item {
        max-width: 100% !important;
        margin: 0;
    }
        .zoom-wrapper-area .slideshow-items {
        width: 100%;
        margin: 0;
    }
}

@media(max-width:575px) {

    .vission-mission-area .area2 {
        flex-direction: column-reverse !important;
    }

    .filter-main-area .filter-sidebar .filter-box {
        display: none !important;
    }

    .filter-main-area .filter-sidebar h5 {
        margin-right: 15px;
        font-size: 15px;
    }

    .sub-headline .pd-head {
        display: none;
    }

    .sub-headline .form-select {
        font-size: 14px;
        margin-left: auto;
    }

    .sub-headline h5 {
        font-size: 17px;
    }

    .sub-headline .head-f {
        display: inline-flex !important;
    }

    .enquire-main-2 .enquire-content {
        padding: 16px;
        max-width: 80%;
    }

    header .navbar-nav {
        min-width: 280px;
    }

    .filter-main-area.d-none .filter-sidebar {
        display: none;
    }

    .filter-main-area .filter-sidebar {
        display: block;
    }

    .cart-main-sec .card-header h5 {
        font-size: 15px;
    }

}

@media(max-width:450px) {
    .delevery-info-main .d-flex {
        flex-direction: column;
        gap: 8px !important;
    }

    .delevery-info-main .info {
        text-align: center !important;
    }

    .banner-main .banner-part-1 .carousel-item p.text-primary::after {
        top: 12px;
        left: -17px;
        width: 10px;
    }

    .banner-main .banner-part-1 .carousel-item p.text-primary {
        font-size: 12px;
        font-weight: 600;
        margin-left: 10px;
        margin-bottom: 7px;
    }

    .banner-main .banner-part-1 .carousel-item h2 {
        font-size: 17px;
        margin-bottom: 5px;
    }

    .banner-main .banner-part-1 .carousel-item p {
        font-size: 12px;
        line-height: 16px;
        margin-bottom: 10px;
    }

    .banner-main .banner-part-1 .carousel-item .product-img span {
        height: 50px;
        width: 50px;
        border-radius: 50%;
        line-height: 40px;
        top: -27px !important;
        right: -7px !important;
        margin: 0 !important;
        font-size: 11px;
        border: 2px solid #fff;
    }

    .banner-main .banner-part-1 .carousel-item .btn {
        padding: 8px 16px;
        font-size: 12px;
        gap: 7px;
    }

    .banner-main .banner-part-1 .carousel-item .d-flex {
        padding: 15px !important;
    }

    .footer-area .img-area {
        width: 140px;
    }

    .product-bigger-banner h2 {
        font-size: 17px;
    }

    .product-bigger-banner p {
        font-size: 14px;
        line-height: 18px;
    }

    .btn.type-01 {
        padding: 6px 14px;
        font-size: 14px;
        font-weight: 600;
    }
      .btn.type-04 {
        padding: 6px 14px;
        font-size: 14px;
        font-weight: 600;
    }

    header .login-bar .price-dropdown .dropdown .btn {
        font-size: 12px;
    }

    .breadcrumb-area ul li {
        font-size: 12px !important;
    }

    .breadcrumb-area {
        padding: 8px 5px !important;
    }

    .login-sign-section {
        width: 250px;
    }

}

@media (max-width: 400px) {
    header .login-bar .ctg-btn .btn {
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 40px;
        right: 0;
    }

    .product-section .product-item .card .action-btn-area .btn {
        padding: 4px 4px;
        width: 98% !important;
    }

    header .login-bar .area-2 {
        top: 54px;
    }

    header .login-bar .search-area .form-control {
        padding: 6px 10px 6px 30px;
        font-size: 12px;
        transition: 0.5s ease;
        border-radius: 6px;
    }

    header .login-bar .search-area {
        margin-right: 0;
    }

    header .login-bar .search-area .icon {
        position: absolute;
        top: 6px;
        left: 6px;
    }

    header .login-bar {
        padding: 6px 0;
    }

    header .login-bar .login-group {
        gap: 5px;
    }

    header .login-bar .menu-area .navbar-toggler-icon {
        display: inline-block;
        width: 15px;
        height: 15px;
    }

    header .login-bar .menu-area .navbar-toggler {
        top: -42px;
        padding: 2px 5px;
    }

    header .login-bar .area-1 {
        margin-left: 32px;
    }

    header .login-bar .area-1 {
        margin-right: 2px;
    }
}

@media(max-width:767px) {
  .ctg-section-01 .ctg-card .ctg-img {
    max-width: 100px;
  }

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

@media (max-width: 600px) {
    .category-main2 .product-icon {
        width: 75px;
        height: 75px;
    }
}