/*
---------------------------------------------
Font Reset
---------------------------------------------
*/

@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900");

/*
---------------------------------------------
Layout reset
---------------------------------------------
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}
body {
    background-color: #effaff;
}
footer {
    background-color: #effaff;
    margin-top: 100px;
}

/* Preloader
===================================================== */
#preloader {
    background: #daf5ff url(../images/icon/preloader2.gif) no-repeat center
        center;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease-out;
}
/* =====================================================
Preloader */

/* Landing [HOME]
===================================================== */

.homecarousel-inner {
    position: relative;
    height: 700px;
    overflow: hidden;
}

.homecarousel-item {
    position: relative;
}

.homecarousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.homecarousel-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0.5)
    );
    z-index: 1;
}

.homecarousel-caption {
    position: relative;
    z-index: 2;
}

/* Services [HOME] */
.service {
    margin-top: 140px;
    margin-bottom: 100px;
}
.accordion-scroll {
    height: 200px;
    overflow-y: auto;
}

/* Form [HOME] */
.bg-form {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("../images/kegiatan4.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    margin-top: 100px;
}

/* Team [HOME] */
.team-content img {
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

.team-content:hover img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.team-content .team-text {
    height: 90px;
    overflow: hidden;
}

.team-content .team-text .bg-light,
.team-content .team-text .bg-primary {
    position: relative;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: 0.5s;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
}

.team-content .team-text .bg-primary {
    flex-direction: row;
}

.team-content:hover .team-text .bg-light {
    margin-top: -90px;
}

.team-content .team-text .bg-primary .btn {
    color: var(--primary);
    background: #ffffff;
}

.team-content .team-text .bg-primary .btn:hover {
    color: #ffffff;
    background: var(--secondary);
}

/* Schedule [HOME] */
.schedule {
    background-color: #effafe;
    margin-top: 200px;
}

/* Mitra [HOME] */
.mitra {
    margin-top: 200px;
}
/* ================================================== */

/* Landing [SERVICE]
===================================================== */
.row-none {
    display: none;
}
.row.all,
.row.notaril,
.row.ppat,
.row.lainnya {
    display: flex;
}

.details-service {
    display: none;
}
.detailss:first-child {
    display: block;
}

/* banner service */
.banner-service {
    height: 417px;
    background: url(../images/carousel1.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding-top: 200px;
    padding-bottom: 130px;
    text-align: center;
    background-color: #2a2a2a;
}

.service-detail {
    background-color: #e7f9ff;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    margin-top: -65px;
    min-height: 60px;
}

.service-item {
    background-color: #e7f9ff;
}

.btn-responsive {
    /* padding: 8px 16px; */
    font-size: 14px;
    border-radius: 0;
}

.btn-responsive .active {
    background-color: #e7f9ff;
}

.vborder {
    border-inline-end: 1px solid #dee2e6;
}

/* =========Gallery========= */
.page-heading {
    background-image: url(../images/carousel3.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding-top: 130px;
    padding-bottom: 110px;
    text-align: center;
    background-color: #2a2a2a;
}

.page-heading h1 {
    color: #ffffff;
    text-shadow:
        1px 1px 0 black,
        /* Border sebelah kiri dan atas */ -1px -1px 0 black,
        /* Border sebelah kanan dan bawah */ 1px -1px 0 black,
        /* Border diagonal kanan atas */ -1px 1px 0 black; /* Border diagonal kiri bawah */
    font-size: 62px;
    font-weight: 700;
    line-height: 74px;
}

.page-heading p {
    color: #ffffff;
    text-shadow:
        1px 1px 0 black,
        /* Border sebelah kiri dan atas */ -1px -1px 0 black,
        /* Border sebelah kanan dan bawah */ 1px -1px 0 black,
        /* Border diagonal kanan atas */ -1px 1px 0 black; /* Border diagonal kiri bawah */
    padding: 30px 0px;
    margin: 40px 75px 0px 75px;
    border-top: 2px solid rgba(19, 18, 18, 0.2);
}

.top-categories {
    margin-top: -100px;
}

.card-categories {
    margin: 0 auto;
    width: 300px;
    text-align: center;
    background-color: #fff;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    padding: 30px;
    height: 250px; /* Sesuaikan dengan kebutuhan */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-categories .setara {
    margin-top: 40px;
}

.featured-highlight {
    margin-top: 120px;
}

.card-highlight {
    height: 350px;
    border-radius: 15px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
}

.cardistry {
    border-radius: 15px;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.cardour .card-img-top {
    width: 150px !important;
    height: 150px !important;
    object-fit: cover;
}

.cardour .card-body {
    flex-grow: 1;
}

.icon-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

.icon-container p {
    margin-top: 0.8rem;
    font-size: 13px;
    color: #075b81; /* Warna teks */
    background-color: transparent; /* Latar belakang transparan */
    border: none; /* Menghapus border */
    padding: 0; /* Menghapus padding untuk menghindari efek tombol */
    display: inline; /* Mengubah display ke inline untuk membuatnya lebih seperti teks */
    border-radius: 0; /* Menghapus border-radius untuk tampilan lebih natural */
    font-weight: 500; /* Menebalkan font */
    text-transform: capitalize; /* Capitalize teks */
    letter-spacing: 0.5px; /* Jarak antar huruf */
    transition: color 0.3s; /* Transisi hanya pada warna teks */
}

.card-highlight .hover-effect {
    position: absolute;
    right: -100%;
    bottom: 15px;
    transition: all 0.5s ease;
}

.card-highlight:hover .hover-effect {
    right: 15px; /* Mengatur hover effect muncul ke posisi kanan bawah */
}

.card-highlight .hover-effect .konten {
    background-color: #fff;
    border-radius: 15px;
    padding: 15px 10px;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    font-size: 15px;
}

.card-highlight .award {
    font-size: 15px;
    color: #fff;
    background-color: #0874a7;
    border-radius: 10px;
    padding: 8px 12px;
    margin-bottom: 15px;
    display: block;
    margin: 0 auto; /* Mengatur margin otomatis untuk sentralisasi */
    width: fit-content; /* Menyesuaikan lebar dengan konten */
    margin-bottom: 10px; /* Atur jarak ke bawah */
}

.row-gallery {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    height: 100%;
}

.carousel-gallery {
    width: 100% !important;
    height: 450px !important; /* Menetapkan tinggi tetap */
    object-fit: cover !important; /* Gambar akan memenuhi kontainer tanpa mengubah proporsi */
    overflow: hidden !important; /* Memastikan tidak ada bagian gambar yang melampaui batas */
}

.rousel-container {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.text-container {
    padding-left: 30px;
    position: relative;
    transform: translateY(-50%);
    opacity: 0;
    transition:
        transform 0.5s ease-out,
        opacity 0.5s ease-out;
    -webkit-transition:
        transform 0.5s ease-out,
        opacity 0.5s ease-out;
    -moz-transition:
        transform 0.5s ease-out,
        opacity 0.5s ease-out;
    -ms-transition:
        transform 0.5s ease-out,
        opacity 0.5s ease-out;
    -o-transition:
        transform 0.5s ease-out,
        opacity 0.5s ease-out;
}

.carousel-item.active .text-container {
    transform: translateY(0);
    opacity: 1;
}

.carousel-item-next .text-container,
.carousel-item-prev .text-container {
    transform: translateY(-50%);
    opacity: 0;
}
/* =========Gallery========= */

/*============DASHBOARD============*/
.wrapper {
    position: relative;
}
.wrapper,
body,
html {
    min-height: 100%;
}

/*============DASHBOARD============*/

@media screen and (max-width: 600px) {
    .vborder {
        border-inline-end: 0px;
    }
}

@media screen and (max-width: 768px) {
    .vborder {
        border-inline-end: 0px;
    }
}
/* ================================================== */

.profile {
    margin-top: 140px;
    margin-bottom: 100px;
}

/* main banner carousel */
.carousel-item img {
    width: 100%;
    height: auto; /* Biarkan tinggi gambar menyesuaikan secara otomatis */
    object-fit: cover;
}
/* main banner carousel */

/* form container landing page */
.form-container {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    border: 1px solid #ccc;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

.form-container form {
    color: #1c1c1c;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.colored-input {
    background-color: #ffffff;
}
/* form container landing page*/

/* layanan card */
.card-layanan {
    height: 100%;
}
/* layanan card */

/* Slider
--------------------------------------------------- */
.slider {
    height: 250px;
    margin: auto;
    position: relative;
    width: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.slider-track {
    display: flex;
    width: calc(250px * 22);
    animation: scroll 40s linear infinite;
    -webkit-animation: scroll 15s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 11));
        -webkit-transform: translateX(calc(-250px * 11));
        -moz-transform: translateX(calc(-250px * 11));
        -ms-transform: translateX(calc(-250px * 11));
        -o-transform: translateX(calc(-250px * 11));
    }
}

.slider-item {
    height: 200px;
    width: auto;
    display: flex;
    align-items: center;
    perspective: 100px;
}

.slider-item img {
    height: 200px;
    width: 100%;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    background-color: #ffffff;
}

.slider-item img:hover {
    transform: translateZ(20px);
    -webkit-transform: translateZ(20px);
    -moz-transform: translateZ(20px);
    -ms-transform: translateZ(20px);
    -o-transform: translateZ(20px);
}

/* Gradient */
.slider::before,
.slider::after {
    height: 100%;
    position: absolute;
    width: 15%;
    z-index: 2;
}
/* ---------------------------------------------------
Slider */

/* Responsive
--------------------------------------------------- */

/* Extra large devices, like large desktops */
@media (min-width: 1200px) {
    /*Carousel*/
    .carousel-caption {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 2;
        color: white;
        text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: flex;
    }
    .carousel-caption h5 {
        color: white;
        white-space: nowrap;
        /* Prevents the text from wrapping to the next line */
        width: auto;
        /* Adjust the width as needed */
        text-align: center;
        /* Center align the text */
        display: block;
        /* Ensure it behaves as a block element */
        margin: 0;
        /* Center horizontally */
        font-size: 3rem;
        /* Font size */
    }
    /*Carousel*/

    /* gallery */
    .carousel-gallery {
        height: 550px !important;
    }
    /* gallery */
}

/* Desktops and large laptops */
@media (min-width: 992px) and (max-width: 1200px) {
    /*Carousel*/
    .carousel-item img {
        height: 420px;
    }

    .carousel-caption {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 2;
        color: white;
        text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: flex;
    }
    .carousel-caption h5 {
        color: rgb(246, 246, 246);
        white-space: nowrap;
        /* Prevents the text from wrapping to the next line */
        width: auto;
        /* Adjust the width as needed */
        text-align: center;
        /* Center align the text */
        display: block;
        /* Ensure it behaves as a block element */
        margin: 0;
        /* Center horizontally */
        font-size: 3rem;
        /* Font size */
    }
    /*Carousel*/

    /* About Us Start */

    /* Visi Misi */
    .img-visi {
        width: 100%;
        height: auto;
    }

    /* About Us End */

    /* Service Start */

    /* banner service */
    .banner-service img {
        height: 417px;
    }

    /* button service */
    .btn-responsive {
        padding: 8px 16px;
        font-size: 14px;
        border-radius: 0;
    }
    /* Service Start */
    /* =========Gallery========= */
    .page-heading {
        background-image: url(../images/carousel3.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        padding-top: 150px;
        padding-bottom: 120px;
        text-align: center;
        background-color: #2a2a2a;
    }

    .page-heading h1 {
        color: #ffffff;
        text-shadow:
            1px 1px 0 black,
            /* Border sebelah kiri dan atas */ -1px -1px 0 black,
            /* Border sebelah kanan dan bawah */ 1px -1px 0 black,
            /* Border diagonal kanan atas */ -1px 1px 0 black; /* Border diagonal kiri bawah */
        font-size: 52px;
        font-weight: 700;
        line-height: 74px;
    }

    .page-heading p {
        font-size: 22px;
        color: #ffffff;
        text-shadow:
            1px 1px 0 black,
            /* Border sebelah kiri dan atas */ -1px -1px 0 black,
            /* Border sebelah kanan dan bawah */ 1px -1px 0 black,
            /* Border diagonal kanan atas */ -1px 1px 0 black; /* Border diagonal kiri bawah */
        padding: 30px 0px;
        margin: 40px 75px 0px 75px;
        border-top: 2px solid rgba(19, 18, 18, 0.2);
    }

    .card-highlight {
        height: 300px;
    }

    .card-highlight .hover-effect .konten {
        padding: 20px 15px;
        transform: scale(0.7);
        -webkit-transform: scale(0.7);
        -moz-transform: scale(0.7);
        -ms-transform: scale(0.7);
        -o-transform: scale(0.7);
        font-size: 13px;
    }

    .card-highlight .hover-effect {
        position: absolute;
        right: -100%;
        bottom: -20px;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .card-highlight:hover .hover-effect {
        right: -30px; /* Mengatur hover effect muncul ke posisi kanan bawah */
    }
    /* =========Gallery========= */
}

/* Small laptops */
@media (min-width: 768px) and (max-width: 992px) {
    /*Carousel Landing Page*/

    .carousel-item img {
        height: 700px;
    }

    .carousel-caption {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 2;
        color: white;
        text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: flex;
    }
    .carousel-caption h5 {
        color: white;
        white-space: nowrap;
        /* Prevents the text from wrapping to the next line */
        width: auto;
        /* Adjust the width as needed */
        text-align: center;
        /* Center align the text */
        display: block;
        /* Ensure it behaves as a block element */
        margin: 0;
        /* Center horizontally */
        font-size: 3rem;
        /* Font size */
    }

    .carousel-caption p {
        margin-top: 20px;
        color: white;
        width: auto;
        white-space: nowrap;
        font-size: large;
    }
    /*Carousel Landing Page*/

    /* About Us Start */

    /* Visi Misi */
    .img-visi {
        width: 100%;
        height: auto;
    }

    /* About Us End */

    /* Service Start */

    /* button service */
    .btn-responsive {
        padding: 8px 16px;
        font-size: 14px;
        border-radius: 0;
    }
    /* Service End */
    /* =========Gallery========= */
    .page-heading {
        background-image: url(../images/carousel3.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        padding-top: 70px;
        padding-bottom: 50px;
        text-align: center;
        background-color: #2a2a2a;
    }

    .page-heading h1 {
        color: #ffffff;
        text-shadow:
            1px 1px 0 black,
            /* Border sebelah kiri dan atas */ -1px -1px 0 black,
            /* Border sebelah kanan dan bawah */ 1px -1px 0 black,
            /* Border diagonal kanan atas */ -1px 1px 0 black; /* Border diagonal kiri bawah */
        font-size: 44px;
        font-weight: 700;
        line-height: 74px;
    }

    .page-heading p {
        font-size: 16px;
        color: #ffffff;
        text-shadow:
            1px 1px 0 black,
            /* Border sebelah kiri dan atas */ -1px -1px 0 black,
            /* Border sebelah kanan dan bawah */ 1px -1px 0 black,
            /* Border diagonal kanan atas */ -1px 1px 0 black; /* Border diagonal kiri bawah */
        padding: 30px 0px;
        margin: 40px 75px 0px 75px;
        border-top: 2px solid rgba(19, 18, 18, 0.2);
    }

    .text-container {
        padding-top: 15px;
        height: 200px;
    }
    /* =========Gallery========= */
}

/* Tablets and large mobile devices */
@media (min-width: 576px) and (max-width: 768px) {
    /*Header*/
    .vheader {
        display: none;
    }
    /*Header*/

    /*Carousel*/

    .carousel-item img {
        height: 710px;
    }

    .carousel-caption {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 2;
        color: white;
        text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: flex;
    }
    .carousel-caption h5 {
        color: white;
        white-space: nowrap;
        /* Prevents the text from wrapping to the next line */
        width: auto;
        /* Adjust the width as needed */
        text-align: center;
        /* Center align the text */
        display: block;
        /* Ensure it behaves as a block element */
        margin: 0;
        /* Center horizontally */
        font-size: 3rem;
        /* Font size */
    }

    .carousel-caption p {
        margin-top: 20px;
        color: white;
        width: auto;
        white-space: nowrap;
        font-size: medium;
    }
    /*Carousel*/

    .form-container {
        padding: 15px; /* Mengurangi padding di layar kecil */
        border-radius: 6px; /* Menyesuaikan border-radius untuk layar kecil */
    }

    /* service */

    /* button service */
    .btn-responsive {
        padding: 9px 20px;
        font-size: 14px;
        border-radius: 0;
    }
    /* service */
    /* =========Gallery========= */
    .page-heading {
        background-image: url(../images/carousel3.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        padding-top: 70px;
        padding-bottom: 50px;
        text-align: center;
        background-color: #2a2a2a;
    }

    .page-heading h1 {
        color: #ffffff;
        text-shadow:
            1px 1px 0 black,
            /* Border sebelah kiri dan atas */ -1px -1px 0 black,
            /* Border sebelah kanan dan bawah */ 1px -1px 0 black,
            /* Border diagonal kanan atas */ -1px 1px 0 black; /* Border diagonal kiri bawah */
        font-size: 42px;
        font-weight: 700;
        line-height: 74px;
    }

    .page-heading p {
        font-size: 16px;
        color: #ffffff;
        text-shadow:
            1px 1px 0 black,
            /* Border sebelah kiri dan atas */ -1px -1px 0 black,
            /* Border sebelah kanan dan bawah */ 1px -1px 0 black,
            /* Border diagonal kanan atas */ -1px 1px 0 black; /* Border diagonal kiri bawah */
        padding: 30px 0px;
        margin: 40px 75px 0px 75px;
        border-top: 2px solid rgba(19, 18, 18, 0.2);
    }

    .top-categories {
        margin-top: -60px;
    }

    .card-categories {
        margin-bottom: 20px;
    }

    .text-container {
        padding-top: 15px;
        height: 250px;
    }
    /* =========Gallery========= */
}

.vsejarah {
    margin-top: 150px;
    margin-bottom: 150px;
}

.vmisi {
    margin-top: 150px;
    margin-bottom: 150px;
}
.vmisi-tittle {
    background-color: #daf5ff;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
}
.vmisi-tittle2 {
    background-color: #daf5ff;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

.vteam {
    margin-top: 150px;
    margin-bottom: 150px;
}

#sejarahContent {
    max-height: 300px;
    overflow-y: auto;
}

@media screen and (max-width: 992px) {
    .sejarah-text {
        display: none;
    }
}

/* Navbar Responsive Fixes */
.navbar {
    padding: 0.5rem 0.75rem;
}

.navbar-brand {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

.navbar-toggler {
    padding: 0.25rem 0.5rem;
    border: none;
}

@media (max-width: 991.98px) {
    .navbar {
        padding: 0.5rem 1rem;
    }

    .navbar-collapse {
        background-color: #fff;
        padding: 1rem;
        margin-top: 0.5rem;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .navbar-nav {
        margin-left: 0 !important;
    }

    .nav-item {
        padding: 0.5rem 0;
        text-align: left;
    }

    .navbar-brand img {
        max-height: 45px !important;
    }
}

@media (max-width: 575.98px) {
    .navbar {
        padding: 0.4rem 0.5rem;
    }

    .navbar-brand img {
        max-height: 40px !important;
    }

    .navbar-toggler {
        padding: 0.2rem 0.4rem;
        font-size: 1.1rem;
    }

    .container-xxl {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

@media (max-width: 374.98px) {
    .navbar {
        padding: 0.3rem 0.25rem;
    }

    .navbar-brand img {
        max-height: 35px !important;
    }

    .navbar-toggler {
        padding: 0.15rem 0.3rem;
        font-size: 1rem;
    }

    .container-xxl {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    .navbar-collapse {
        padding: 0.75rem !important;
    }
}

/* Back to Top Button */
#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #1e3a5f;
    color: #d4af37;
    cursor: pointer;
    padding: 15px;
    border-radius: 50%;
    font-size: 18px;
    width: 50px;
    height: 50px;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

#backToTop:hover {
    background-color: #d4af37;
    color: #1e3a5f;
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
    #backToTop {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        padding: 12px;
        font-size: 16px;
    }
}

/* Mobile devices (smallest to largest) */
@media (max-width: 576px) {
    /*Header*/
    .vheader {
        display: none;
    }
    /*Header*/

    /*NavBar*/
    .navbar-toggler {
        margin-right: 1rem;
    }
    /*NavBar*/

    /*Carousel*/
    .carousel-item img {
        height: 680px;
    }

    .carousel-caption {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 2;
        color: white;
        text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .carousel-caption h5 {
        color: white;
        white-space: nowrap;
        /* Prevents the text from wrapping to the next line */
        width: auto;
        /* Adjust the width as needed */
        text-align: center;
        /* Center align the text */
        display: block;
        /* Ensure it behaves as a block element */
        margin: 0;
        /* Center horizontally */
        font-size: 1.2rem;
        /* Font size */
    }

    .carousel-caption p {
        margin-top: 20px;
        color: white;
        width: auto;
        white-space: nowrap;
        font-size: 0.65rem;
    }
    /*Carousel*/

    .form-container {
        padding: 10px; /* Lebih kecil lagi di layar sangat kecil */
        border-radius: 4px; /* Menyesuaikan lagi untuk layar sangat kecil */
    }

    /* ABOUT-US START */

    /* visi misi */
    .visi-misi {
        font-size: smaller;
    }

    .img-visi {
        width: 100%;
        height: auto;
    }

    /* ABOUT-US END */

    /* service */

    /* button service */
    .btn-responsive {
        padding: 8px 16px;
        font-size: 10px;
        border-radius: 3px;
    }

    #serviceDetail {
        border-right: none;
    }
    /* service */
    /* =========Gallery========= */
    .page-heading {
        background-image: url(../images/carousel3.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        padding-top: 160px;
        padding-bottom: 130px;
        text-align: center;
        background-color: #2a2a2a;
    }

    .page-heading h1 {
        color: #ffffff;
        text-shadow:
            1px 1px 0 black,
            /* Border sebelah kiri dan atas */ -1px -1px 0 black,
            /* Border sebelah kanan dan bawah */ 1px -1px 0 black,
            /* Border diagonal kanan atas */ -1px 1px 0 black; /* Border diagonal kiri bawah */
        display: block;
        font-size: 34px;
        font-weight: 700;
        line-height: 50px;
    }

    .page-heading p {
        font-size: 14px;
        color: #ffffff;
        text-shadow:
            1px 1px 0 black,
            /* Border sebelah kiri dan atas */ -1px -1px 0 black,
            /* Border sebelah kanan dan bawah */ 1px -1px 0 black,
            /* Border diagonal kanan atas */ -1px 1px 0 black; /* Border diagonal kiri bawah */
        padding: 30px 0px;
        margin: 40px 75px 0px 75px;
        border-top: 2px solid rgba(19, 18, 18, 0.2);
        line-height: 28px;
    }

    .top-categories {
        margin-top: -100px;
    }

    .card-categories {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }

    .card-highlight {
        height: 250px;
    }

    .card-highlight .hover-effect .konten {
        padding: 10px 5px;
        transform: scale(0.5);
        -webkit-transform: scale(0.5);
        -moz-transform: scale(0.5);
        -ms-transform: scale(0.5);
        -o-transform: scale(0.5);
        font-size: 10px;
    }

    .card-highlight .hover-effect {
        position: absolute;
        right: -100%;
        bottom: -38px;
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
    }

    .card-highlight:hover .hover-effect {
        right: -42px; /* Mengatur hover effect muncul ke posisi kanan bawah */
    }

    .text-container {
        padding-top: 15px;
        height: 300px;
    }
    /* =========Gallery========= */
}
/* Media */