@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

    :root {
        --primary1-color: #577BC1;
        /* Merah tua */
        --primary-color: #000957;
        --secondary-color: #007bff;
        /* Warna yang lebih cerah */
        --secondary-color-light: #344CB7;
        /* Tetap sama */
        --text-light: #ffffff;
        /* Tetap sama */
        --white: #ffffff;
        /* Tetap sama */
        --black: #000000;
        /* Tetap sama */
        --max-width: 1200px;
        /* Tetap sama */
        --gray: #ced4da;




    }

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    body{
        overflow-x: hidden;

    }

    .section__container {
        max-width: var(--max-width);
        margin: auto;
        padding: 5rem 1rem;
    }

    .section__header {
        font-size: 2.5rem;
        font-weight: 600;
    }

    .section__subheader {
        position: relative;
        isolation: isolate;
        margin-bottom: 1rem;
        padding-left: 20px;
        font-size: 1.2rem;
        font-weight: 500;
    }

    .section__subheader::after {
        position: absolute;
        content: "";
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        height: 45px;
        aspect-ratio: 1;
        background-color: var(--primary1-color);
        z-index: -1;
    }

    .btn {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0.75rem 1.5rem;
        outline: none;
        font-size: 1rem;
        color: var(--white);
        border-radius: 5px;
        cursor: pointer;
    }

    .btn__secondary {
        background-color: transparent;
        border: 1px solid var(--white);
    }

    .btn__primary {
        background-color: var(--primary1-color);
        border: 1px solid var(--primary1-color);
    }

    .btn span {
        font-size: 1.2rem;
        transition: 0.3s;
    }

    .btn:hover span {
        transform: translateX(5px);
    }

    img {
        display: flex;
        width: 100%;
    }

    a {
        text-decoration: none;
    }

    html,
    body {
        scroll-behavior: smooth;
    }

    body {
        font-family: "Poppins", sans-serif;
        color: var(--white);
    }

    header {
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        background-blend-mode: multiply;
    }

    nav {
        max-width: 100vw;
        margin: auto;
        z-index: 99999;
        left: 0;
        top: 0;
        right: 0;
        display: flex;
        position: fixed;
        padding: 0 8px;
        align-items: center;
        justify-content: space-between;
    }
    .nav__logo{
        display: flex;
        gap:5px;
    }
    .nav__logo img{
        width: 4rem;
    }

    .nav__logo a {
        font-size: 1.5rem;
        font-weight: 700;
        color: white;
    }

    .nav__logo .kabupaten-name{
        font-size: 0.9rem;
    }

    .nav__links {
        list-style: none;
        display: flex;
        align-items: center;
        gap: 2rem;
    }

    .link a {
        padding: 5px;
        font-size: 1rem;
        font-weight: 500;
        color: var(--white);
        transition: 0.3s;
    }

    .link a:hover {
        color: var(--primary-color);
    }

    .nav__menu__btn {
        display: none;
        font-size: 1.5rem;
    }

    .header__container {
        padding-block: 5rem 12rem;
        z-index: 10;
    }

    .header__container h1 {
        max-width: 900px;
        margin-inline: auto;
        margin-bottom: 2rem;
        font-size: 4rem;
        font-weight: 700;
        text-align: center;
    }

    .header__container .btn {
        margin: auto;
    }

    .about {
        background-color: var(--gray);
    }

    .about__container {
        padding-block: 0;
    }

    .about__grid {
        padding: 2rem;
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: 4rem;
        align-items: center;
        background-color: var(--primary-color);
        transform: translateY(-5rem);
        border-radius: 10px;
    }

    .about__content .section__header {
        margin-bottom: 1rem;
    }

    .about__content .para {
        color: var(--text-light);
    }

    .about__list {
        display: grid;
        gap: 2rem;
    }

    .about__item {
        display: flex;
        align-items: center;
        gap: 2rem;
    }

    .about__item span {
        /* padding: 13px 20px; */
        font-size: 1.75rem;
        color: var(--secondary-color);
        background-color: var(--gray);
        border-radius: 5px;
    }

    .about__item h4 {
        font-size: 1.2rem;
        font-weight: 600;
    }

    .stats {
        background-color: var(--primary-color);
    }

    .stats__container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .stats__content .section__header {
        margin-bottom: 1rem;
    }

    .stats__content .para {
        margin-bottom: 2rem;
        color: var(--text-light);
    }

    .stats__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .stats__card span {
        font-size: 1.75rem;
        color: var(--primary-color);
    }

    .stats__card h4 {
        font-size: 2rem;
        font-weight: 700;
    }

    .stats__card p {
        font-weight: 500;
    }

    .stats__image {
        display: grid;
        gap: 2rem;
    }

    .stats__image img {
        max-width: 450px;
        margin: auto;
        border-radius: 5px;
    }

    .banner {
        background-image: linear-gradient(to right,
                rgba(0, 0, 0, 0.6),
                rgba(0, 0, 0, 0.2)),
            url("https://img.freepik.com/free-photo/multiracial-group-young-creative-people-smart-casual-wear-discussing-business-brainstorming-meeting-ideas-mobile-application-software-design-project-modern-office_7861-3067.jpg?t=st=1737652953~exp=1737656553~hmac=bfcde6bb03a4d322e311054a383f52a2e9249e5c6661a498521bb8fa73d0a197&w=1380");
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        height: 350px;
        /* Tambahkan ukuran tinggi banner */
    }

    .banner__content {
        max-width: 800px;
    }

    .banner__content .section__header {
        margin-bottom: 1rem;
    }

    .banner__content .para {
        max-width: 600px;
        margin-bottom: 2rem;
    }

    .banner__btns {
        display: flex;
        align-items: center;
        gap: 2rem;
    }

    .blog {
        background-color: var(--primary-color);
    }

    .blog__grid {
        margin-top: 4rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .blog__card img {
        margin-bottom: 1rem;
        height: 210px;
        object-fit: cover;
        border-radius: 5px;
    }

    .blog__card>div {
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .blog__card div span {
        font-size: 0.9rem;
        color: var(--text-light);
    }

    .blog__card div span i {
        margin-right: 5px;
        font-size: 1rem;
        color: var(--primary-color);
    }

    .blog__card h4 {
        margin-bottom: 0.5rem;
        font-size: 1.2rem;
        font-weight: 600;
    }

    .blog__card p {
        color: var(--text-light);
    }

    .subscribe {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: max-content;
    }



    .subscribe__container {
        max-width: 700px;
        text-align: center;
    }

    .subscribe__container .section__subheader {
        max-width: fit-content;
        margin-inline: auto;
    }

    .subscribe__container form {
        margin-block: 2rem 1rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .subscribe__container input {
        flex: 1;
        width: 100%;
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        outline: none;
        border: 1px solid var(--white);
        border-radius: 5px;
    }

    .subscribe__container .btn {
        flex: 1;
        justify-content: center;
    }

    .subscribe__container .para a {
        color: var(--primary-color);
    }


    .visi-misi {
        display: flex;
        justify-content: center;
        background-color: var(--primary-color);
        align-items: center;
        text-align: center;
        padding: 50px 0;
    }

    .visi-misi .logo{
        padding: 20px;
    }

    .visi-misi .logo img{
        width: 20rem;
        margin: 0 auto;
    }

    .visi-misi .logo p{
        text-align: center;
        font-size: 0.9rem;
        width: 80%;
        margin: 0 auto;
    }
    
    .visi, .misi {
        flex: 1;
        padding: 40px;
    }
    
    .visi {
        color: black;
    }
    
    .misi {
        color: white;
    }


    /* struktur */
    .struktur-organisasi {
        text-align: center;
        padding: 50px;
    }
    
    .image-container {
        display: flex;
        width: 70%;
        margin: 0 auto;
        justify-content: center;
    }
    
    .zoomable-image {
        max-width: 100%;
        height: auto;
        cursor: pointer;
        transition: transform 0.3s ease;
    }
    
    .zoomable-image:hover {
        transform: scale(1.05);
    }
    
    /* Modal */
    .modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        justify-content: center;
        object-fit: cover;
        align-items: center;
    }
    
    .modal-content {
        max-width: 90%;
        max-height: 90%;
    }
    
    .close {
        position: absolute;
        top: 20px;
        right: 30px;
        font-size: 40px;
        color: white;
        cursor: pointer;
    }
    
    

    .customer {
        background-color: var(--secondary-color-light);
    }

    .customer__container .para {
        margin-block: 1rem 4rem;
        color: var(--text-light);
    }

    .swiper {
        width: 100%;
        padding-bottom: 4rem;
    }

    .customer__review .swiper-pagination-bullet-active {
        background-color: var(--primary-color);
    }

    .customer__review__card {
        position: relative;
        isolation: isolate;
        max-width: 600px;
        margin-inline: auto;
        text-align: center;
    }

    .customer__review__card span {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 6rem;
        line-height: 4rem;
        color: var(--primary-color);
        opacity: 0.1;
    }

    .customer__review__card p {
        margin-bottom: 2rem;
        color: var(--text-light);
    }

    .customer__review__details {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

    .customer__review__details img {
        max-width: 40px;
        border-radius: 50;
    }

    .customer__review__details h4 {
        font-size: 1.2rem;
        font-weight: 500;
    }

    .customer__review__details h5 {
        font-size: 0.9rem;
        font-weight: 400;
        color: var(--text-light);
    }

    .footer {
        background-color: var(--black);
    }

    .footer__container {
        display: grid;
        grid-template-columns: 1.5fr repeat(3, 1fr);
        gap: 2rem;
    }

    .footer__col h5 a {
        display: inline-block;
        margin-bottom: 1rem;
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--white);
    }

    .footer__col p {
        margin-bottom: 2rem;
        color: var(--text-light);
    }

    .footer__socials {
        display: flex;
        align-items: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .footer__socials a {
        padding: 5px 10px;
        font-size: 1.25rem;
        color: var(--primary-color);
        background-color: var(--secondary-color-light);
        border-radius: 100%;
        cursor: pointer;
        transition: 0.3s;
    }

    .footer__socials a:hover {
        color: var(--white);
        background-color: var(--primary-color);
    }

    .footer__col h4 {
        margin-bottom: 1rem;
        font-size: 1.2rem;
        font-weight: 600;
    }

    .footer__links a {
        margin-bottom: 1rem;
        display: flex;
        color: var(--text-light);
        transition: 0.3s;
    }

    .footer__links a:hover {
        color: var(--primary-color);
    }

    .footer__bar {
        padding: 1rem;
        font-size: 0.8rem;
        text-align: center;
        color: var(--text-light);
    }

    .about-item span .list-image{
        width: 1rem;
        mix-blend-mode: multiply;
        height: 1rem;
        object-fit: cover;
    }

    @media (width < 900px) {
        .nav__links {
            gap: 1.5rem;
        }

        .about__grid {
            grid-template-columns: repeat(1, 1fr);
        }

        .stats__container {
            grid-template-columns: repeat(1, 1fr);
        }

        .stats__image {
            grid-area: 1/1/2/2;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

        .blog__grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem 1rem;
        }

        .footer__container {
            grid-template-columns: 2fr 1fr;
        }

        .banner__content .section__header {
            margin-bottom: 0.5rem;
            font-size: 1.5rem;
            font-weight: 700;
        }

        .para {
            font-size: 0.9rem;
        }

        .section__header {
            font-size: 1.5rem;
            font-weight: 700;
        }
        
    }

    @media (width < 600px) {
        .container-news {
            margin-top: 50px;
        }

        .nav__links {
            position: absolute;
            left: 0;
            top: 68px;
            padding: 2rem;
            width: 100%;
            flex-direction: column;
            transform: scaleY(0);
            transform-origin: top;
            transition: 0.5s;
            background-color: rgba(1, 8, 107, 0.9);
        }

        .nav__links .link a {
            opacity: 0;
        }

        .nav__links.open .link a {
            opacity: 1;
        }

        .nav__links.open {
            transform: scaleY(1);
        }

        .nav__menu__btn {
            display: block;
        }

        .header__container h1 {
            margin-top: 4rem;
            font-size: 3.5rem;
        }

        .stats__image {
            grid-template-columns: repeat(1, 1fr);
        }

        .blog__grid {
            grid-template-columns: repeat(1, 1fr);
        }

        .subscribe__container form {
            flex-direction: column;
        }

        .subscribe__container .btn {
            width: 100%;
        }

        .visi-misi .logo img{
            width: 10rem;
            margin: 0 auto;
        }
    
        .visi-misi .logo p{
            text-align: center;
            font-size: 0.7rem;
            width: 80%;
            margin: 0 auto;
        }

        .visi-misi {
            display: block;
            justify-content: center;
            background-color: var(--primary-color);
            align-items: center;
            text-align: center;
            padding: 20px 0;
        }

        .visi, .misi {
            flex: 1;
            padding: 20px;
        }


    }