@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Fredoka:wght@300;400;500;600;700&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ultra&display=swap');
/* @media (min-width: 992px) { */



    .title-banner {
        font-family: Ultra;
        font-weight: 700;
        font-size: 76px;
        line-height: 72px;
        color: #868383;
    }

    .subtitle-banner {
        font-family: Roboto;
        font-weight: 400;
        font-size: 18px;
        line-height: 26px;
        text-align: justify;
    }

    .slide-banner {
        border-radius: 66px;
    }

    hr {
        border: solid;
        background: #2b2a2a;
        margin-top: 60px;
    }

    .title-about {
        font-family: Roboto;
        font-weight: 700;
        font-size: 44px;
        line-height: 30px;
        color: #CD0000;
        text-shadow: 1px 1px 2px #000;
        margin-top: 20px;
        margin-bottom: 35px;
    }

    .subtitle-about {
        font-family: Roboto;
        font-weight: 400;
        font-size: 19px;
        line-height: 26px;
    }

    .btn-kategori {
        width: 100%;
        border-radius: 16px;
        border: 1px solid #000000;
        font-family: Roboto;
        font-weight: 400;
        font-size: 20px;
        line-height: 26px;
    }

    .card-produk {
        border-radius: 50px;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }

    .img-produk {
        border-radius: 30px 30px 0px 0px;
    }

    .card-body-produk {
        border-radius: 0px 0px 30px 30px;
    }

    .card-blog {
        border-radius: 50px;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }

    .img-blog {
        border-radius: 15px 15px 0px 0px;
    }

    .card-body-blog {
        border-radius: 0px 0px 15px 15px;
    }

     /* Page all blog */

     .date-blog {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 600;
        line-height: 15px;
    }

    .title-blog {
        font-family: Roboto;
        font-size: 28px;
        font-weight: 700;
        line-height: 36px;
        color: #CD0000;
    }

    .deskripsi-blog {
        font-family: Roboto;
        font-size: 18px;
        font-weight: 400;
        line-height: 27px;
    }

    .img-all-blog {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 10px;
    }

    .img-crop{
        width: 100%;
        height: 300px;
        object-fit: cover;
        /* border-radius: 10px; */
    }

    /* End Page all blog */


    /* All Produk */

    .bg-all-produk {
        background: -webkit-linear-gradient(130deg, #CD0000 40%, #fff 40%);
        background: -o-linear-gradient(130deg, #CD0000 40%, #fff 40%);
        background: -moz-linear-gradient(130deg, #CD0000 40%, #fff 40%);
        background: linear-gradient(130deg, #CD0000 40%, #fff 40%);
    }

     .title-produk {
        font-family: Roboto;
        font-size: 19px;
        font-weight: 700;
        line-height: 26px;
        color: #CD0000;
    }
    /* End All Produk */





    .title-footer {
        font-family: Fredoka;
        font-size: 32px;
        font-weight: 500;
        line-height: 38px;
        color: #fff;
    }

    .subtitle-footer {
        font-family: Fredoka;
        font-size: 20px;
        font-weight: 400;
        line-height: 24px;
        color: #fff;
    }

    .footer-kanan {
        text-align: right;
        justify-content: end;
    }

/* } */

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #CD0000;
    border-color: #CD0000;
}



@media (max-width: 600px) {

    .title-banner {
        font-family: Alfa Slab One;
        font-weight: 700;
        font-size: 35px;
        line-height: 42px;
        color: #868383;
    }

    .subtitle-banner {
        font-family: Roboto;
        font-weight: 400;
        font-size: 16px;
        line-height: 26px;
        text-align: justify;
    }

    .slide-banner {
        margin-top: 30px;
        border-radius: 66px;
    }

    hr {
        border: solid;
        background: #2b2a2a;
        margin-top: 50px;
    }

    .title-about {
        font-family: Roboto;
        font-weight: 700;
        font-size: 32px;
        line-height: 30px;
        color: #CD0000;
        text-shadow: 1px 1px 2px #000;
        margin-bottom: 20px;
    }

    .subtitle-about {
        font-family: Roboto;
        font-weight: 400;
        font-size: 16px;
        line-height: 26px;
    }

    .btn-kategori {
        width: 100%;
        border-radius: 16px;
        border: 1px solid #000000;
        font-family: Roboto;
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
    }

    .card-produk {
        border-radius: 50px;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }

    .img-produk {
        border-radius: 30px 30px 0px 0px;
    }

    .card-body-produk {
        border-radius: 0px 0px 30px 30px;
    }

    .card-blog {
        border-radius: 50px;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }

    .img-blog {
        border-radius: 15px 15px 0px 0px;
    }

    .card-body-blog {
        border-radius: 0px 0px 15px 15px;
    }

     /* Page all blog */

     .date-blog {
        font-family: Roboto;
        font-size: 13px;
        font-weight: 600;
        line-height: 15px;
    }

    .title-blog {
        font-family: Roboto;
        font-size: 23px;
        font-weight: 700;
        line-height: 36px;
        color: #CD0000;
    }

    .deskripsi-blog {
        font-family: Roboto;
        font-size: 16px;
        font-weight: 400;
        line-height: 27px;
    }

    .img-all-blog {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 10px;
    }
    .img-crop{
        width: 100%;
        height: 250px;
        object-fit: cover;
        /* border-radius: 10px; */
    }

    /* End Page all blog */

     /* All Produk */

     .bg-all-produk {
        background: -webkit-linear-gradient(120deg, #CD0000 40%, #fff 40%);
        background: -o-linear-gradient(120deg, #CD0000 40%, #fff 40%);
        background: -moz-linear-gradient(120deg, #CD0000 40%, #fff 40%);
        background: linear-gradient(120deg, #CD0000 40%, #fff 40%);
    }

     .title-produk {
        font-family: Roboto;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
        color: #000;
    }
    /* End All Produk */


   

   

    .title-footer {
        font-family: Fredoka;
        font-size: 22px;
        font-weight: 500;
        line-height: 28px;
        color: #fff;
    }

    .subtitle-footer {
        font-family: Fredoka;
        font-size: 17px;
        font-weight: 400;
        line-height: 21px;
        color: #fff;
    }

    .footer-kanan {
        text-align: left;
    }


    .page-item.active .page-link {
        z-index: 3;
        color: #fff;
        background-color: #CD0000;
        border-color: #CD0000;
    }
}