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

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

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

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

@media(max-width:576px) {
    .section {
        padding: 38px 0;
    }

    .vape-navbar {
        position: relative;
        width: 100%;
        padding: 8px 0;
        background-color: #fff !important;
    }

    .navbar-toggler {
        border-color: transparent !important;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    .vape-left-heading h3 {
        font-size: 28px;
    }

    .vape-link {
        color: #000 !important;
        font-weight: 400;
    }

    .vape-nav-flex {
        row-gap: 10px;
        margin: 15px 0;
    }

    .mb-mar {
        margin-top: 35px;
        row-gap: 15px;
    }

    .pb-mar {
        padding-bottom: 0px;
    }

    .vape-left-heading2 h3 {
        font-size: 28px;
    }

    .d-h5 {
        font-size: 16px;
    }

    .categories--item {
        padding: 17px 20px;
    }

    .categories--img {
        width: 115px;
        overflow: hidden;
        border-radius: 100px;
        background-color: #fff;
        height: 58px;
    }

    .cta-banner {
        flex-direction: column;
    }

    .cta40 {
        flex-basis: auto;
        width: 100%;
        height: 150px;
    }

    .cta60 {
        flex-basis: auto;
        width: 100%;
        height: 150px;
    }

    .overly {
        transform: translateY(0);
    }

    .hero-content h1 {
        color: #fff;
        font-size: 20px;
    }

    .hero-content a {
        background-color: #fff;
        color: #000;
        font-size: 15px;
        padding: 7px 15px;
    }

    .singup-go {
        display: flex;
        align-items: center;
        column-gap: 8px;
    }

    .singup-go i {
        font-size: 18px;
    }

    .modal-body {
        padding: 3rem 1.5rem;
    }

    .cus-close {
        border: 1px solid #ddd;
        padding: 12px;
        border-radius: 50%;
        height: 5px;
        width: 5px;
        right: 9px;
        top: 34px;
        border-bottom-color: transparent;
    }

    .signup-form {
        height: 400px;
    }

    .category-box {
        height: 440px;
    }

    .breadcump h2 {
        text-align: center;
    }

    .breadcump {
        width: 100%;
    }

    .sub-hero {
        width: 100%;
        height: 300px;
    }

    .product-search {
        width: 95%;
    }

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

    .main-account-div {
        flex-direction: column;
        row-gap: 40px;
    }

    .my-account-pills {
        flex-basis: auto;
        width: 100%;
    }

    .my-account-content {
        flex-basis: auto;
    }

    .address-format {
        row-gap: 15px;
        flex-direction: column;
    }

    .billing-address {
        padding: 17px 9px;
        flex-wrap: wrap;
        row-gap: 10px;
    }

    .form-cont {
        background: #fff;
        margin-top: 0;
        margin-bottom: 0;
        padding: 55px 21px 55px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }
    /* about us */
    .logo-content span {font-size:17px;}
    .logo-content {padding:11px;}
    .time-section:before {  left: 2%;}
    .time-section {
        width: 100%;
        padding: 0px 0;}
    /* about us */
    .cart-head ul {  flex-wrap: wrap; justify-content: space-between; row-gap: 15px; }
    .fl-bas1 {
        flex-basis: 100%;
    }
    .flex-bas1 { flex-basis: 100%;}
    .flex-bas2 { flex-basis: 50%;}
    .cart-footer ul {flex-wrap: wrap; row-gap:10px;}
    .user-in{width:100%;}
    .social-flex {
        display: flex
    ;
        align-items: center;
        column-gap: 10px;
        flex-wrap: wrap;
        row-gap: 10px;}
        .socials {
            padding: 15px;
            background-color: #fff;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            border-radius: 4px;
            cursor: pointer;
            transition: 0.3s ease;
            display: flex
        ;
            flex-direction: column;
            row-gap: 8px;
            align-items: center;
            width: 140px;
        }
        .navbar-social {padding-left: 0; column-gap: 15px;}
        .vape-link img {max-width:21px;  min-width: 21px; }
        .info-cart {padding:25px;}
        .vape-link i { color: #000000;}
        a.navbar-brand img { max-width: 70px;}
        .cart-info {
            background-color: #fff;
            box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
            width: 95%;
            padding:15px;
            position: absolute;
            right: 0;
            top: 84px;
            left: 0;
            margin: 0 auto;
        }
        .vape-link span {
            position: absolute;
            top: -7px;
            right: -8px;
            background-color: #000000;
            color: #ffffff;}
            
            .order-details-img {  margin-bottom: 35px; }
            .roder-details-item { display: flex;flex-direction: column;}
            .pro-imgs { width: 100%; height: 250px;}
            .order-details-content ul {  column-gap: 20px; row-gap: 17px;}
            .product-detls h3 { margin-bottom: 0; font-size: 13px;}
}

@media(max-width:425px) {
    .hero-content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 21px;
        display: flex;
        flex-direction: column;
        row-gap: 8px;
    }

    .hero-content h1 {
        color: #fff;
        font-size: 32px;
    }
}

@media(max-width:375px) {
    .fl-bas2 {flex-basis: 50%;}
    .item-prod { display: flex;  justify-content: flex-start;}
    .hero-content {
        position: absolute;
        top:50%;
        transform: translateY(-53%);
        left: 21px;
        display: flex;
        flex-direction: column;
        row-gap: 8px;
    }

    .hero-content h1 {
        color: #fff;
        font-size: 29px;
    }
}

@media(max-width:320px) {
    .hero-content {
        position: absolute;
        top: 50%;
        transform: translateY(-55%);
        left: 21px;
        display: flex;
        flex-direction: column;
        row-gap: 8px;
    }

    .hero-content h1 {
        color: #fff;
        font-size: 25px;
    }
}