@font-face { font-family: Amicale; src: url('../font/Amicale-Regular.otf'); }

/* navbar */
#navbar {
    transition: transform 0.3s ease-in-out;
}
#navbar.hidden {
    transform: translateY(-100%);
}
.nav-item .nav-link {
    font-size: 20px;
    margin-left: 5px;
    margin-right: 5px;
    font-weight: bold;
}
.navbar {
    transition: background-color 0.3s;
}

.navbar.scrolled {
    background-color: rgb(255, 255, 255); /* Contoh warna background */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* Styling navbar-toggle icon */
.toggle-icon .bar {
    display: block;
    width: 30px;
    height: 3px;
    margin: 5px auto;
    background-color: #333; /* Warna default untuk toggle bar */
    transition: all 0.4s ease;
}

/* Animasi saat toggle aktif (membuka navbar) */
.toggle-icon:not(.collapsed) .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.toggle-icon:not(.collapsed) .bar:nth-child(2) {
    opacity: 0; /* Sembunyikan bar tengah */
}

.toggle-icon:not(.collapsed) .bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Navbar Menu Animation */
.navbar-collapse {
    transition: height 0.4s ease; /* Animasi smooth saat membuka menu */
}

/* Custom styling on collapse */
.navbar-collapse.show {
    background-color: #f8f9fa00;
}


@media (max-width: 768px) {
    .navbar {
        background-color: rgb(255, 255, 255); /* Set background to white for mobile */
        display: flex; /* Use flexbox for alignment */
        justify-content: center; /* Center align items horizontally */
        align-items: center; /* Center align items vertically */
    }

    .navbar-brand {
        margin: 0 auto; /* Center the navbar brand */
    }
}


.fa {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
}

.highlight {
    color: #00008B !important;
}

body {
    margin: 0;
    font-family: 'amicale';
}
button{
    padding: 10px 20px;
    font-size: 1em;
    color: aliceblue;
    font-weight: 700;
    background-color: #00008B;;
    border: none;
    cursor: pointer;
    border-radius: 22px;
}
/* Hero */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
    background: url("../background/Hero-Home.png") no-repeat center center;
    background-size: cover; /* Mengatur ukuran gambar agar cover 100% */
    background-position: center; /* Memastikan posisi gambar di tengah */
    color: white;
    height: 80vh;
}

.hero-text {
    max-width: 32%;
    color: white;
    font-weight: 700;
    margin-right: 35%;
    margin-top: 30px;
}

.hero-text h2 {
    font-size: 2em;
    margin: 0;
}

.hero-text p {
    font-size: 1.5em;
    margin: 20px 0;
}

.hero-text button {
    padding: 20px 20px;
    background-color: transparent; /* Default background */
    font-size: 1em;
    color: aliceblue; /* Default text color */
    font-weight: 700;
    border: 2px solid white;
    cursor: pointer;
    border-radius: 22px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effect */
}

.hero-text button:hover {
    background-color: white; /* Background turns white on hover */
    color: black; /* Text color becomes transparent on hover */
    border-color: transparent; /* Optionally, make border transparent on hover */
}


/* Media query for mobile view */
@media (max-width: 768px) {
    .hero {
        height: auto; /* Allow height to adjust on mobile */
        padding: 20px 10px; /* Add some padding */
        background-position: left center; /* Adjust background position */
        margin-top: 150px;
        justify-content: center;
        align-items: center;
        text-align: center; /* Center align text */
    }

    .hero-text {
        max-width: 100%; /* Allow full width on mobile */
        margin-right: 0; /* Remove right margin */
        margin-left: 0; /* Remove left margin */
    }

    .hero-text h2 {
        font-size: 1.5em; /* Smaller font size on mobile */
        line-height: 1.2; /* Adjust line height for better spacing */
    }

    .hero-text button {
        width: 50%; /* Make button full width */
        padding: 10px; /* Adjust padding for the button */
        margin-top: 20px; /* Add some space between text and button */
    }
}



.stripe {
    width: 17%; /* Default width for larger screens */
    height: 8px; /* Height of the stripe */
    background-color: #00008B; /* Color of the stripe */
    margin: 10px auto; /* Top and bottom margins, and center horizontally */
    border-radius: 22px;
    margin-left: 0; /* Align left on larger screens */
}

@media (max-width: 768px) {
    .stripe {
        width: 75%; /* Make the stripe 75% wide on mobile screens */
        margin-left: auto; /* Center the stripe */
        margin-right: auto; /* Ensure the stripe stays centered */
    }
}


#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: none;
    background-color: #00008B;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 50%;
    font-size: 18px;
    z-index: 9999;
    cursor: pointer;
    width: 50px;
}

#back-to-top:hover {
    background-color: #0056b3;
}
#watermark {
    background-color: #f8f9fa; /* Optional, bisa diatur sesuai keinginan */
    font-size: 14px;
    color: #6c757d;
}

#watermark p {
    margin: 0;
}

#menjadikan {
    text-align: center; /* Center-align content in the section */
    padding: 20px; /* Add padding for better spacing */
}

#menjadikan h2 {
    text-transform: uppercase;
    font-size: 2em; /* Adjust font size for headings */
    font-weight: 700; /* Make the heading bold */
    line-height: 1.2; /* Adjust line height for readability */
    margin-bottom: 20px; /* Space below the heading */
}

#menjadikan p {
    font-size: 1.5em; /* Adjust font size */
    font-weight: 400; /* Regular font weight */
    max-width: 1000px; /* Maximum width for the paragraph */
    margin: 0 auto; /* Center the paragraph horizontally */
    line-height: 1.5; /* Line height for readability */
    color: #1e1e25; /* Text color */
}

/* Media query for mobile responsiveness */
@media (max-width: 768px) {
    #menjadikan h2 {
        font-size: 1.5em; /* Smaller font size for headings on mobile */
    }

    #menjadikan p {
        font-size: 1em; /* Smaller font size for paragraph on mobile */
        padding: 0 10px; /* Add horizontal padding on mobile for spacing */
    }
}



/* program-homepage */
#program-homepage .description {
    font-size: 1.5em;
}

#program-homepage p {
    font-size: 1.2em; /* Adjust paragraph size */
    font-weight: bold;
}

@media (max-width: 768px) {
    #program-homepage .row {
        flex-direction: column;
        text-align: center;
    }

    #program-homepage .image,
    #program-homepage .description {
        width: 100%;
        text-align: center;
    }

    #program-homepage .image img {
        width: 100%; /* Make image full width on small screens */
    }

    #program-homepage li {
        font-size: 1.0rem;
        list-style: none;
        padding-left: 0;
    }

    #program-homepage p {
        font-size: 1.1rem; /* Smaller font size for mobile */
    }
}

/* mengapa */
#mengapa p {
    max-width: 600px;
    text-align: start;
    font-size: 1.2em;
    font-weight: 400;
}

#mengapa h1{
    text-transform: uppercase;
    font-weight: bold;
    font-family: arial;
    margin-bottom: 10px;
}

#mengapa .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row; /* Default direction for larger screens */
}

#mengapa img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    padding-top: 10%;
    border-radius: 20px;
}

#mengapa button {
    padding: 10px 20px;
    font-size: 1em;
    color: aliceblue;
    font-weight: 700;
    background-color: #00008B;
    border: none;
    cursor: pointer;
    border-radius: 22px;
}

/* Add media query for mobile view */
@media (max-width: 768px) {
    #mengapa .container {
        flex-direction: column; /* Change to column for mobile view */
    }

    #mengapa img {
        width: 100%; /* Make the image take full width on mobile */
        padding-top: 0; /* Remove extra top padding on mobile */
    }

    #mengapa p {
        padding-top: 2%; /* Adjust padding for better spacing */
        text-align: center; /* Center the text for mobile view */
    }

    #mengapa h1 {
        text-align: center; /* Center the heading */
    }
    #mengapa button {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto; /* Center the button horizontally */
    }

    .stripe {
        margin-left: auto;
        margin-right: auto;
    }
}


/* testimoni */
#testimoni{
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../background/testimoni-background.jpg");
    color: white;
    height: 90vh;
    background-size: cover;
    background-position: center;
}

#testimoni .card{
    padding-top: 2.5%;
    padding-bottom: 2.5%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 60%;
    max-width: 500px;
    text-align: center;
    background-color: #ffffffc7;
    border: none;

}

#testimoni img{
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
}
@media (max-width: 768px) {
    #testimoni .card {
        max-width: 90%; /* Make cards wider on mobile */
        margin: 0 auto; /* Center cards */
    }

    #testimoni .owl-carousel {
        flex-direction: column; /* Stack carousel items on mobile */
    }
}


#partner {
    margin: 9;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

.logos {
    overflow: hidden; /* Prevent overflow */
    padding: 30px 0;
    margin: 0 auto; /* Center the logos container */
    white-space: nowrap; /* Keep logos in a single line */
    position: relative;
    max-width: 60%; /* Ensure the logos don't exceed the width of the screen */
}

.logos:hover .logos-slide {
    animation-play-state: paused;
}

.logos-slide {
    display: inline-block;
    animation: 10s slide infinite linear;
    /* Set a max width to prevent logos from exceeding the screen */
    max-width: 100%; /* Allow sliding within the visible area */
}

.logos-slide img {
    height: 150px;
    margin: 0 20px; /* Adjust margins as needed */
}

/* Add media query for mobile view */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center align items */
    }

    .logos {
        margin-left: 0; /* Remove left margin */
        text-align: center; /* Center align logos */
        max-width: 100%;

    }

    .logos-slide {
        margin: 0 auto; /* Center the logos slide */
        max-width: none; /* Reset max width for sliding effect */
    }

    .logos:hover .logos-slide {
        animation-play-state: paused;
    }

}


#lokasi {
    background-color: #eefbff;
    padding: 60px 0; /* Adjust top and bottom padding */
}

#lokasi .container {
    max-width: 1140px; /* Constrain container width for better alignment */
    margin: 0 auto; /* Center align the container */

}

#lokasi .lokasi-content {
    display: flex; /* Use flexbox layout for the content */
    justify-content: space-between; /* Space between the map and contact form */
    align-items: flex-start; /* Align items to the top */
    gap: 100px; /* Add some space between the map and form */
}

#lokasi .map,
#lokasi .form {
    width: 48%; /* Make map and form take up 48% each for desktop view */
}

#lokasi .map {
    margin-top: -50px; /* Move the map higher */
}

#lokasi iframe {
    border-radius: 10px; /* Optional: Add some rounding to the map corners */
}

#lokasi .form-control {
    border-radius: 5px; /* Ensure consistent styling for form inputs */
}

#lokasi .email button {
    background: #00008B;
    color: #eefbff;
}

@media (max-width: 768px) {
    #lokasi {
        padding: 20px 10px; /* Reduce padding for mobile screens */
    }
    #lokasi .container {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center align items */
    }

    #lokasi .stripe {
        width: 50px; /* Make the stripe smaller on mobile */
    }

    #lokasi iframe {
        height: 250px; /* Reduce map height on mobile */
    }

    #lokasi button {
        width: 100%; /* Make the button full width */
    }

    #lokasi .lokasi-content {
        flex-direction: column; /* Stack elements on mobile */
    }

    #lokasi .map,
    #lokasi .form {
        width: 100%; /* Make both the map and form full width on mobile */
    }
}




/* Footer */
#footer {
    border-top: 1px solid #00008B;
    height: auto;
    clear: both;
    padding: 20px 0;
    text-align: center; /* Center align all text in footer */
}

#footer .container {
    margin-top: 25px;
}

/* Flex settings for the footer row */
#footer .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Center items horizontally */
}

#footer .logo {
    flex: 0 0 25%; /* Full width on mobile */
    max-width: 25%; /* Ensure full width on mobile */
    padding: 0 15px; /* Optional: Adjust padding */
}

#footer .address {
    flex: 0 0 50%; /* Full width on mobile */
    max-width: auto; /* Ensure full width on mobile */
    padding: 0 15px; /* Optional: Adjust padding */
    font-size: small;
}

#footer .link {
    flex: 0 0 25%; /* Full width on mobile */
    max-width: auto; /* Ensure full width on mobile */
    padding: 0 15px; /* Optional: Adjust padding */
}

/* Image settings */
#footer img {
    width: 150px; /* Default width for larger screens */
}

/* List settings */
#footer ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
}

#footer ul li {
    margin-bottom: 10px; /* Add spacing between items */
    display: flex; /* Align icon and text in a row */
    align-items: center; /* Vertically align icon and text */
    margin-right: 10px; /* Space between icon and text */
}

#footer a {
    color: inherit;
    text-decoration: none;
}

#footer a:hover {
    color: inherit;
    text-decoration: underline;
}

/* Media query for mobile view */
@media (max-width: 768px) {
    #footer .logo,
    #footer .address,
    #footer .link {
        flex: 0 0 100%; /* Full width on mobile */
        max-width: 100%;
        text-align: center; /* Center align content on mobile */
        padding: 10px 20px; /* Optional: Add vertical spacing */
    }

    /* Optional: Adjust image size for better mobile display */
    #footer img {
        width: 80%; /* Make the logo responsive */
        max-width: 150px; /* Optional: Set a max width */
    }
}


/* about1  */
.about-us{
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(0, 0, 0, 0.63), rgba(0, 0, 0, 0.63)), url("../background/tentang-kami.jpg");
    color: white;
    height: 100vh;
    background-size: cover;
    background-position: center;
    text-align: center; /* Menambahkan text-align center untuk memastikan teks di tengah */
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}
.about-us h1{
    margin-top: -20px;
}
.about-us .p-top{
    margin-top: 50px;
    font-size: larger;
    font-weight: 700;
    text-align: start;
}
.about-us ul {
    text-align: left;
    padding-left: 20px; /* Optional: add padding to create space from the left edge */
    border-bottom: 1px solid white;
}
.about-us li{
    margin-bottom: 5px;
}
/* Media query untuk layar kecil */
@media (max-width: 768px) {
    .about-us {
        margin-top: 12%;
        padding: 20px;
        height: auto; /* Menghapus tinggi tetap untuk layar kecil */
    }

    .about-us h1 {
        font-size: 2rem;
    }

    .about-us .p-top,
    .about-us .p-bottom p {
        font-size: 1rem;
        text-align: center;
    }

    .about-us ul {
        padding-left: 10px;
    }

    .about-us li {
        font-size: 1rem;
        line-height: 1.5; /* Membuat jarak antar item lebih nyaman di layar kecil */
    }

    .about-us .p-bottom h3 {
        font-size: 1.2rem;
        text-align: center;
        margin-top: 20px;
    }
}


/* Program */
#program {
    margin-top: 50px;
}

#program .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
#program .content-program {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../background/program-background.jpg");
    color: white;
    min-height: 60vh; /* Menggunakan min-height agar konten sesuai */
    background-size: cover;
    background-position: center;
    text-align: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

#program h1, #program h2 {
    text-transform: uppercase;
    width: 100%;
}
#program h2 {
    padding-bottom: 3px;
    text-transform: uppercase;
}
#program .horizontal-headings {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap; /* Ini akan membuat elemen otomatis pindah baris jika tidak cukup tempat */
}

#program .horizontal-headings h1 {
    font-size: 1.5em; /* Responsive font size */
    text-align: center;
    margin: 10px 0;
}

#program .horizontal-headings h2 {
    margin: 10px; /* Adjust as needed */
}

#program li{
    font-size: 1.1em;
}
#program p{
    font-size: 1.1em;
}
@media (max-width: 768px) { /* Mobile screens */
    #program h1 {
        font-size: 1.5em;
    }

    #program h2 {
        font-size: 1em;
    }

    #program .content-program {
        padding: 20px;
    }

    #program .horizontal-headings {
        flex-direction: column;
        align-items: center;
    }

    .content-syarat .col-md-6,
    .content-prosedur .col-md-6 {
        margin-bottom: 20px;
    }

    .content-prosedur p,
    .content-syarat p {
        font-size: 0.9em;
    }

    .content-prosedur .row, .content-syarat .row {
        flex-direction: column;
        align-items: center;
    }
}


/* Gallery */
#gallery .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.grid-container {
    padding-top: 5%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

#gallery img{
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
    height: 200px;
}
.pagination .page-link {
    font-size: small;
    color: #000;
    text-decoration: none !important;
}

.pagination .page-item.active .page-link {
    background-color: #00008B; /* Warna untuk halaman aktif */
    border-color: #00008B;
    color: #fff; /* Warna teks putih untuk halaman aktif */
}

.pagination .page-item .page-link:hover {
    color: #00008B; /* Warna saat hover */
    text-decoration: none; /* Pastikan tetap tidak ada underline saat hover */
}


/* kontak */
#kontak form{
    border: 2px solid #00008B;
    padding: 20px;
    border-radius: 10px;
}
#kontak .form-control {
    border: 1px solid #00008B; /* Black border */
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 10px;
}

#kontak .btn {
    background-color: #00008B; /* Button color */
    color: #fff; /* Text color */
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
}

#kontak .btn:hover {
    background-color: #00008B; /* Hover color */
}
/* Pendaftaran */
#pendaftaran{
    margin-bottom: 1%;
}
#pendaftaran h1 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 2%;
}
#pendaftaran h3 {
    margin-bottom: 20px;
}
#pendaftaran form{
    align-items: center;
    margin-bottom: 10px;
    margin-left: 12%;
    padding-bottom: 20px;
}
.pendaftaran {
    display: flex;
    justify-content: center;
    align-items: center;
}
#pendaftaran .form-row {
    display: flex;
    justify-content: space-between;
    gap: 10px; /* Adjust gap between columns if needed */
}

#pendaftaran .form-row .col {
    flex: 1;
}
#pendaftaran label{
    font-weight: 500;
}

#pendaftaran .container {
    margin-top: 150px;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2), /* Top shadow */
                0 4px 8px rgba(0, 0, 0, 0.2);  /* Bottom and sides shadow */
    background-color: #fff; /* Ensures background is solid */
    border-radius: 20px;
}



#pendaftaran .form-control{
    border: 1px solid #333333; /* Black border */
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 10px;
}
#pendaftaran button{
    padding: 10px 20px;
    font-size: 1em;
    color: aliceblue;
    font-weight: 700;
    background-color: #00008B;;
    border: none;
    cursor: pointer;
    border-radius: 15px;
}
@media (max-width: 768px) {
    #pendaftaran {
        margin-bottom: 5%;
    }

    #pendaftaran h1 {
        font-size: 1.5em;
        margin-bottom: 15px;
    }

    #pendaftaran .form-row {
        flex-direction: column; /* Stack form fields vertically */
        gap: 15px;
    }

    #pendaftaran form {
        margin-left: 0; /* Center form on mobile */
        padding: 10px;
    }

    #pendaftaran .form-control {
        padding: 8px;
        font-size: 0.9em; /* Adjust input field size */
    }

    #pendaftaran button {
        width: 100%;
        margin-top: 15px;
        padding: 12px;
        font-size: 1.1em;
    }

    #pendaftaran .container {
        margin-top: none;
        box-shadow: none; /* Remove box-shadow on mobile */
    }
}