@media only screen and (max-width: 640px) {
    .nav.fixed-bottom {
        display: flex;
        border-radius: 10px 10px 0 0;
        padding: 8px 0;
        padding-bottom: 0%;
        background: rgb(241, 245, 249);
        background: linear-gradient(
            0deg,
            rgba(241, 245, 249, 1) 0%,
            rgba(255, 255, 255, 1) 50%,
            rgba(241, 245, 249, 1) 100%
        );
    }

    .navbar-info {
        display: none;
    }

    .navbar {
        padding: 6px 0;
    }

    .btn-canvas {
        display: unset;
    }

    .btn-custom {
        font-size: 14px;
    }

    .ion-canvas {
        color: #8b2211;
        --ionicon-stroke-width: 50px;
        font-size: 24px;
        margin-bottom: -5px;
    }

    .ion-canvas:hover {
        color: #610f02;
    }

    .offcanvas {
        background: #f1f5f9;
    }

    .offcanvas-body .navbar-nav .nav-item .nav-link {
        color: #475569;
        font-weight: 600;
        transition: all ease-in-out 500ms;
    }

    .offcanvas-body .navbar-nav .nav-item .nav-link.active,
    .offcanvas-body .navbar-nav .nav-item .nav-link:hover {
        color: #610f02;
        font-weight: 600;
    }

    .offcanvas-body .navbar-nav .nav-item .nav-link .nav-link-indicator,
    .offcanvas-body .navbar-nav .nav-item .nav-link .nav-link-indicator {
        margin-top: 5px;
        width: 0%;
        height: 3px;
        background: #8b2211;
        border-radius: 10px;
        transition: all ease-in-out 200ms;
    }

    .offcanvas-body .navbar-nav .nav-item .nav-link.show .nav-link-indicator,
    .offcanvas-body .navbar-nav .nav-item .nav-link.active .nav-link-indicator,
    .offcanvas-body .navbar-nav .nav-item .nav-link:hover .nav-link-indicator {
        width: 50%;
    }

    .navbar .container .nav.nav-primary {
        display: none;
    }

    .navbar .container .navbar-brand {
        font-size: 18px;
        font-weight: 800;
    }

    .navbar .container .nav-search {
        display: none;
    }

    header .container .card {
        border: none;
    }

    header .container .card .tabs {
        position: relative !important;
    }

    header .container .card .tabs button {
        font-size: 12px;
    }

    header .breadcrumb-body {
        border-bottom: #cbd5e1 1px solid;
    }

    header .breadcrumb-body .breadcrumb {
        font-size: 14px;
        font-weight: 700;
    }

    .modal-title {
        font-size: 14px;
        font-weight: 700;
        color: #8b2211;
    }

    .modal-body .form-floating .form-select {
        font-size: 12px !important;
    }

    .modal-body .form-floating .form-control {
        font-size: 12px !important;
    }

    section {
        padding-top: 16px;
    }

    section.kategori .section-body {
        width: 90%;
    }

    section.kategori .kategori-items .item .title {
        text-decoration: none;
        font-size: 12px;
        font-weight: 700;
        color: #64748b;
        padding-top: 5px;
    }

    section .container .section-title {
        font-size: 14px;
        font-weight: 900;
        color: #334155;
        margin: 0;
    }

    section .container .section-description {
        font-size: 12px;
        margin-top: 2px;
        font-weight: 600;
        color: #64748b;
    }

    section.terbaru .container .section-link {
        background: #f1f5f9;
        color: #8b2211;
        padding: 4px 10px;
        font-size: 12px;
        text-decoration: none;
        border-radius: 5px;
        font-weight: 700;
    }

    section .container .section-link {
        display: inline-flex;
        background: #8b2211;
        color: #f1f5f9;
        padding: 4px 10px;
        font-size: 12px;
        text-decoration: none;
        font-weight: 700;
        border-radius: 5px;
    }
    section .container .section-link:hover {
        background: #610f02;
        font-weight: 900;
    }

    section .section-body .product-swiper {
        margin-right: 0px;
    }

    .card-status {
        font-size: 10px;
    }

    .card-price {
        font-size: 10px;
    }

    section
        .section-body
        .product-swiper
        .swiper-wrapper
        .swiper-slide
        .card
        .card-body {
        padding: 8px 4px;
    }

    section
        .section-body
        .product-swiper
        .swiper-wrapper
        .swiper-slide
        .card
        .card-body
        .card-title {
        font-weight: 700;
        font-size: 14px;
        color: #334155;
    }

    section
        .section-body
        .product-swiper
        .swiper-wrapper
        .swiper-slide
        .card
        .card-body
        .card-text {
        font-weight: 500;
        font-size: 10px;
        color: #64748b;
        text-transform: uppercase;
    }

    .testi {
        margin-bottom: 5px;
    }

    .testi .card .card-body .card-avatar .name-avatar {
        color: #1e293b;
        font-size: 14px;
        font-weight: 700;
        padding-top: 4px;
    }

    .testi .card .card-body .card-avatar .title-avatar {
        color: #64748b;
        font-size: 14px;
    }

    .testi .card .card-body .card-text {
        color: #64748b;
        font-size: 12px;
        font-weight: 600;
    }

    .testi:hover {
        box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.2);
    }

    .testi:hover .card .card-body .card-avatar .name-avatar {
        color: #8b2211;
    }

    .testi:hover .card .card-text {
        color: #1e293b;
    }

    .footer-start .footer-title {
        font-weight: 900;
        color: #f1f5f9;
        text-decoration: none;
        font-size: 18px;
        text-transform: uppercase;
    }

    .footer-start .footer-text {
        color: #cbd5e1;
        font-size: 14px;
    }

    .footer-end {
        border-top: #8b2211 solid 1px;
    }

    .footer-end form div .form-label {
        font-size: 14px;
    }

    .footer-end form div .form-control {
        font-size: 12px;
    }

    .footer-socmed {
        display: none;
    }

    .offcanvas-filter .offcanvas-title {
        color: #8b2211;
        font-size: 16px;
        font-weight: 900;
    }

    .allproduk-body .row {
        --bs-gutter-x: 10px;
        --bs-gutter-y: 10px;
    }

    .allproduk-body .card-title {
        font-weight: 700;
        font-size: 14px;
        color: #334155;
    }
    .allproduk-body .card-text {
        color: #475569;
        font-size: 10px;
    }

    .offcanvas-body .filters {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

    .offcanvas-body .filters h4 {
        font-size: 14px;
        font-weight: 900;
        color: #334155;
    }

    .offcanvas-body .filters .filter-description {
        font-size: 12px;
        font-weight: 600;
        color: #64748b;
    }

    .offcanvas-body .filters input {
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }
    .offcanvas-body .filters .filter-rating .rating {
        color: #ffc428;
    }

    .information {
        font-size: 14px;
    }

    .review .col-sm-7.pt-3.mt-3.mt-sm-0.pt-sm-0 {
        border-top: solid 1px #cbd5e1 !important;
        border-left: none;
    }

    .tab-content b {
        font-size: 14px;
    }

    .tab-content p {
        font-weight: 500;
        color: #475569;
        font-size: 12px;
    }

    .tab-content table {
        font-weight: 500;
        color: #475569;
        font-size: 12px;
    }

    .tab-content textarea {
        font-size: 12px;
    }

    .tab-content input {
        font-size: 12px;
    }

    .card .card-header {
        background: #f1f5f9 !important;
        font-weight: 900;
        color: #334155;
        font-size: 14px;
    }

    .produk-serupa .serupa .card-title {
        color: #334155;
        font-weight: 700;
        font-size: 14px;
    }

    .produk-serupa .serupa .card-text {
        color: #475569;
        font-weight: 400;
        font-size: 12px;
    }

    #toTop {
        z-index: 100;
        display: none;
        margin-right: 10px;
        margin-bottom: 60px;
        padding: 11px 13px;
        border-radius: 100%;
    }

    #toTop .chevron-up-outline {
        --ionicon-stroke-width: 70px;
        font-weight: 900;
        font-size: 16px;
    }

    .header-berita-swiper .card .card-body .card-title {
        font-size: 16px !important;
    }

    .header-berita-swiper .card .card-body .card-text {
        font-size: 12px;
    }

    .berita-terbaru h3 {
        font-size: 20px;
        font-weight: 900;
        color: #1e293b;
    }

    h3.header-title {
        font-size: 20px;
        font-weight: 900;
        color: #1e293b;
    }

    .card-auth {
        min-height: 100vh;
    }
    .card-auth .card-body {
        margin-top: 80px;
    }

    .kontak .row {
        border-bottom: solid 1px #cbd5e1;
    }
}