/* ================== HERO SECTION ================== */

.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/hero-bg.jpeg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: white;
    text-align: center;
    padding: 100px 100px 150px 100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.hero img {
    width: 400px;
}

.hero-1 {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
}

.hero-2 {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
}

.hero h1 {
    font-size: 50px;
}

.hero p {
    font-size: 20px;
    margin-bottom: 15px;
}

.hero h3 {
    font-size: 30px;
    font-style: italic;
    margin-bottom: 50px;
}

.hero-buttons {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

@media (max-width: 1024px) {
    .hero {
        flex-direction: column;
        padding: 100px 20px 50px 20px;
        text-align: center;
    }

    .hero-1,
    .hero-2 {
        width: 100%;
        align-items: center;
        margin-bottom: 30px;
    }

    .hero img {
        width: 250px;
    }

    .hero h1 {
        font-size: 30px;
    }

    .hero p {
        font-size: 16px;
        margin-bottom: 0px;
    }

    .hero h3 {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .hero-buttons {
        gap: 10px;
        margin-top: 15px;
    }
}

/* ================== END HERO SECTION ================== */

/* ================== MAIN INFO SECTION ================== */

.main-info {
    background-color: #04293B;
    padding: 100px;
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.info-card {
    background-color: white;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    flex: 1;
    margin-top: -200px;
    transition: transform 0.3s;
}

.info-card:hover {
    transform: translateY(-10px);
    cursor: pointer;
}

.info-card h2 {
    font-size: 70px;
    color: #04293B;
    margin: 15px 0;
}

.info-card h3 {
    font-size: 25px;
    color: #04293B;
    margin: 15px 0;
}

.icon {
    width: 80px;
    height: 80px;
}

@media (max-width: 1024px) {
    .main-info {
        background-color: #04293B;
        padding: 50px;
        display: flex;
        justify-content: center;
        gap: 30px;
        flex-wrap: wrap;
    }

    .info-card {
        background-color: white;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        flex: 1;
        margin-top: 0px;
    }

    .info-card h2 {
        font-size: 50px;
        color: #04293B;
        margin: 15px 0;
    }

    .info-card h3 {
        font-size: 20px;
        color: #04293B;
        margin: 15px 0;
    }

    .icon {
        width: 60px;
        height: 60px;
    }
}

/* ================== END INFO SECTION ================== */

/* ================== VISI SECTION ================== */

.visi {
    display: flex;
    gap: 50px;
    padding: 100px;
    align-items: center;
    background-color: #f9f9f9;
}

.visi-content {
    flex: 1;
}

.visi-content h2 {
    font-size: 40px;
    color: #04293B;
    margin-bottom: 20px;
}

.visi-content h3 {
    font-size: 20px;
    color: #04293B;
    margin-top: 30px;
    margin-bottom: 15px;
}

.visi-content p {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    margin-bottom: 15px;
}

.visi-content ul {
    margin-left: 20px;
    margin-top: 15px;
}

.visi-content li {
    font-size: 16px;
    color: #333;
    margin-bottom: 10px;
}

.visi-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.visi-image img {
    width: 500px;
    max-width: 100%;
    height: auto;
}

@media (max-width: 1024px) {
    .visi {
        flex-direction: column;
        padding: 50px;
        gap: 30px;
    }

    .visi-content h2 {
        font-size: 30px;
    }

    .visi-content h3 {
        font-size: 18px;
    }

    .visi-content p,
    .visi-content li {
        font-size: 14px;
    }
}

/* ================== END VISI SECTION ================== */

/* ================== MISI SECTION ================== */

.misi {
    padding: 100px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    background-color: #04293B;
}

.misi>h2 {
    font-size: 30px;
    color: #ffffff;
    margin-bottom: 50px;
    text-align: center;
}

.misi-content {
    display: flex;
    gap: 0;
    align-items: center;
}

.misi-content-reverse {
    display: flex;
    flex-direction: row-reverse;
    gap: 0;
    align-items: center;
}

.misi-text {
    width: 50%;
    flex: 1;
}

.misi-text h2 {
    font-size: 30px;
    color: #ffffff;
    margin: 0px 100px;
    line-height: 1.5;
}

.misi-text p {
    font-size: 16px;
    color: #ffffff;
    margin: 0px 100px;
    line-height: 2;
}

.misi-image {
    width: 50%;
    flex: 1;
    display: flex;
    justify-content: center;
}

.misi-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .misi {
        padding: 50px;
    }

    .misi>h2 {
        font-size: 25px;
    }

    .misi-content {
        flex-direction: column-reverse;
    }

    .misi-content-reverse {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }

    .misi-text {
        width: 50%;
        flex: 1;
        margin-bottom: 30px;
    }

    .misi-text h2 {
        font-size: 25px;
        color: #ffffff;
        margin: 0px;

    }

    .misi-text p {
        font-size: 12px;
        color: #ffffff;
        margin: 0px;

    }

    .misi-text {
        width: 100%;
        flex: 1;
    }

    .misi-image {
        width: 100%;
        flex: 1;
        display: flex;
        justify-content: center;
    }

    .misi-image img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        margin-bottom: 15px;
    }
}

/* ================== END MISI SECTION ================== */

/* ================== PENGUMUMAN SECTION ================== */

/* ================== END PENGUMUMAN SECTION ================== */

/* ================== STRATEGIC PLAN SECTION ================== */
.strategic-plan {
    padding: 100px 0px 100px 0px;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    gap: 70px;
}

.strategic-plan-content {
    display: flex;
    gap: 0;
    align-items: center;
}

.strategic-plan-content-reverse {
    display: flex;
    flex-direction: row-reverse;
    gap: 0;
    align-items: center;
}

.strategic-plan-image-reverse {
    width: 50%;
    flex: 1;
    display: flex;
    justify-content: center;
}

.strategic-plan-image-reverse img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    border-radius: 20px 0px 0px 20px;
}

.strategic-plan-image {
    width: 50%;
    flex: 1;
    display: flex;
    justify-content: center;
}

.strategic-plan-image img {
    width: 100%;
    height: 700px;
    object-fit: cover;
    border-radius: 0px 20px 20px 0px;
}

.strategic-plan-wrapper {
    width: 50%;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 50px 100px;
}

.strategic-plan-wrapper h1 {
    font-size: 25px;
    color: #333;
    margin-bottom: 25px;
}

.strategic-plan-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.strategic-plan-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    color: #04293B;
    text-decoration: none;
    transition: transform 0.3s;
}

.strategic-plan-card h2 {
    font-size: 20px;
}

.strategic-plan-card:hover {
    transform: scale(1.05);
    cursor: pointer;
}

@media (max-width: 1024px) {
    .strategic-plan {
        padding: 50px 20px 50px 20px;
        gap: 50px;
    }

    .strategic-plan-content {
        flex-direction: column;
    }

    .strategic-plan-content-reverse {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .strategic-plan-image,
    .strategic-plan-image-reverse {
        width: 100%;
        flex: 1;
        margin-bottom: 30px;
        padding: 0px 20px;
    }

    .strategic-plan-image img,
    .strategic-plan-image-reverse img {
        width: 100%;
        height: 300px;
        object-fit: cover;
        border-radius: 20px;
    }

    .strategic-plan-wrapper {
        width: 100%;
        flex: 1;
        padding: 20px;
    }

    .strategic-plan-wrapper h1 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .strategic-plan-cards {
        grid-template-columns: repeat(2fr, 1);
        gap: 20px;
    }

    .strategic-plan-card {
        flex-direction: column;
        padding: 20px;
        text-align: center;
    }

    .strategic-plan-card h2 {
        font-size: 16px;
    }
}

/* ================== END STRATEGIC PLAN SECTION ================== */

/* ================== ACARA SECTION ================== */
.events {
    display: flex;
    flex-direction: column;
    padding: 100px;
    background-color: #04293B;
    text-align: center;
}

.events>h2 {
    font-size: 30px;
    color: #ffffff;
    margin-bottom: 50px;
    text-align: center;
}

.events-content {
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: center;
}

.events-content {
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: center;
}

.events-lastest {
    flex: 1;
}

.events-banner-card-lastest {
    position: relative;
    width: 100%;
    height: 700px;
    border-radius: 20px;
    overflow: hidden;
    margin: auto;
}

.events-banner-card {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 350px;
    border-radius: 20px;
    overflow: hidden;
    margin: auto;
}

.events-banner-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.events-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}

.events-banner-content {
    position: absolute;
    bottom: 30px;
    left: 40px;
    color: white;
    z-index: 2;
    text-align: left;

}

.events-badge {
    background: #FFD500;
    color: #000;
    padding: 6px 14px;
    border-radius: 14px;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 12px;
    font-weight: bold;
}

.events-banner-content h2 {
    font-size: 20px;
    margin: 0;
    font-weight: 600;
    max-width: 600px;
}

.events-date {
    margin: 8px 0 20px;
    font-size: 15px;
    opacity: 0.85;
}

.events-btn-more {
    color: white;
    font-weight: bold;
    text-decoration: none;
    font-size: 15px;
}

.events-others {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    .events {
        padding: 50px;
        justify-content: center;
    }

    .events>h2 {
        font-size: 25px;
    }

    .events-content {
        flex-direction: column;
        gap: 30px;
    }

    .events-banner-content {
        left: 20px;
        bottom: 20px;
    }

    .events-banner-card {
        height: 300px;
    }

    .events-banner-card h2,
    .events-banner-card-lastest h2 {
        font-size: 15px;
    }

    .events-banner-card-lastest {
        max-height: 300px;
    }

    .events-others {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .events-date {
        font-size: 12px;
    }


}

/* ================== END ACARA SECTION ================== */

/* ================== EKATALOG SECTION ================== */
.ekatalog-home {
    display: flex;
    flex-direction: column;
    padding: 100px;
    background-color: #f9f9f9;
    text-align: center;
}

.ekatalog-home>h2 {
    font-size: 30px;
    color: #04293B;
    margin-bottom: 50px;
    text-align: center;
}

.e-katalog-content-home {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

.e-katalog-content-home a {
    text-decoration: none;
    color: #04293B;
}

.btn-ekatalog-home {
    display: inline-block;
    padding: 12px 30px;
    background: #04293B;
    border: #04293B 1px solid;
    color: #ffffff;
    text-decoration: none;
    border-radius: 5px;
    transition: transform 0.3s;
}

.btn-ekatalog-home:hover {
    transform: scale(1.05);
}

.katalog-card-home {
    padding: 50px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

@media (max-width: 1024px) {
    .ekatalog-home {
        padding: 50px 30px;
        justify-content: center;
    }

    .ekatalog-home>h2 {
        font-size: 25px;
    }

    .e-katalog-content-home {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .btn-ekatalog-home {
        padding: 8px 16px;
        font-size: 12px;
    }

}

/* ================== DAFTARKAN BISNIS ANDA SECTION ================== */
.daftarkan-bisnis-anda {
    background:
        linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
        url("../images/bg.png");
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 100px;
    background-color: #f9f9f9;
    text-align: center;
    gap: 100px;
}

.daftarkan-bisnis-anda img {
    width: 300px;
}

.daftarkan-bisnis-anda h1 {
    font-size: 40px;
    color: #ffffff;
}

@media (max-width: 1024px) {
    .daftarkan-bisnis-anda {
        padding: 50px;
        flex-direction: column;
    }
}

/* ================== END DAFTARKAN BISNIS ANDA SECTION ================== */

/* ================== BERITA DOKUMENTASI SECTION ================== */
.berita-home {
    display: flex;
    flex-direction: column;
    padding: 100px;
    background-color: #f9f9f9;
    text-align: center;
}

.berita-home>h2 {
    font-size: 30px;
    color: #04293B;
    margin-bottom: 50px;
    text-align: center;
}

.berita-home-content {
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: center;
}

.berita-home-lastest {
    flex: 1;
}

.berita-home-banner-card {
    border: #04293B 1px solid;
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    margin: auto;
}

.berita-home-banner-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.berita-home-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
}

.berita-home-banner-content {
    position: absolute;
    bottom: 30px;
    left: 40px;
    color: white;
    z-index: 2;
    text-align: left;

}

.berita-home-badge {
    background: #FFD500;
    color: #000;
    padding: 6px 14px;
    border-radius: 14px;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 12px;
    font-weight: bold;
}

.berita-home-banner-content h2 {
    font-size: 20px;
    margin: 0;
    font-weight: 600;
    max-width: 600px;
}

.berita-home-date {
    margin: 8px 0 20px;
    font-size: 15px;
    opacity: 0.85;
}

.berita-home-btn-more {
    color: white;
    font-weight: bold;
    text-decoration: none;
    font-size: 15px;
}

.berita-home-others {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    flex-wrap: wrap;

}

.berita-home-others-banner {
    border: #04293B 1px solid;
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.berita-home-others-content {
    text-align: left;
    margin-top: 10px;
}

.berita-home-others-content h2 {
    font-size: 18px;
    margin: 0;
}

.berita-home-others-btn-more {
    color: #04293B;
    font-weight: bold;
    text-decoration: none;
    font-size: 15px;
}

.berita-home-more {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}


@media (max-width: 1024px) {
    .berita-home {
        padding: 50px;
        justify-content: center;
    }

    .berita-home>h2 {
        font-size: 25px;
    }

    .berita-home-content {
        flex-direction: column;
        gap: 30px;
    }


    .berita-home-banner-content {
        left: 20px;
        bottom: 20px;
    }

    .berita-home-others-banner {
        height: 200px;
    }

    .berita-home-others-content h2 {
        font-size: 15px;
        margin: 0;
    }

    .berita-home-date {
        font-size: 12px;
    }

    .berita-home-btn-more,
    .berita-home-others-btn-more {
        font-size: 12px;
    }

    .berita-home-more {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 20px;
    }

}


/* ================== BUKU INFORMASI SECTION ================== */

.buku-informasi-home {
    display: flex;
    flex-direction: column;
    padding: 100px;
    background-color: #f9f9f9;
    text-align: center;
}

.buku-informasi-home>h2 {
    font-size: 30px;
    color: #04293B;
    margin-bottom: 50px;
    text-align: center;
}

.buku-informasi-home-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.anggota-carousel a {
    color: #04293B;
    text-decoration: none;
}

.buku-card {
    padding: 50px;
    text-align: center;
    border: 1px solid #04293B;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.buku-card:hover {
    cursor: pointer;
}

.buku-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    margin-bottom: 20px;
    border: #04293B 1px solid;
    border-radius: 10px;

}

.buku-card h4 {
    font-size: 20px;
    margin-bottom: 10px;
}

.buku-card p {
    font-size: 16px;
}

.buku-card .container {
    padding: 0 10px;
}

@media (max-width: 1024px) {
    .buku-informasi-home {
        padding: 50px;
        justify-content: center;
    }

    .buku-informasi-home>h2 {
        font-size: 25px;
    }

    .buku-card {
        padding: 20px;
    }

    .buku-card img {
        height: 100px;
    }

    .buku-card h4 {
        font-size: 15px;
    }

    .buku-card p {
        font-size: 14px;
    }
        /* Indicator Dots */
        .kegiatan-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            border: 2px solid #04293B;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .kegiatan-indicator.active {
            background: #04293B;
            transform: scale(1.2);
        }

        .kegiatan-indicator:hover {
            background: rgba(4, 41, 59, 0.7);
        }

        /* Fade Animation */
        .events-content {
            transition: opacity 0.5s ease-in-out;
        }

        .events-content.fade-out {
            opacity: 0;
        }

        .events-content.fade-in {
            opacity: 1;
        }
}