@font-face {
    font-family: 'Roboto-Condensed';
    src: url('font/RobotoCondensed-Bold.eot');
    src: url('font/RobotoCondensed-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/RobotoCondensed-Bold.woff2') format('woff2'),
        url('font/RobotoCondensed-Bold.woff') format('woff'),
        url('font/RobotoCondensed-Bold.ttf') format('truetype'),
        url('font/RobotoCondensed-Bold.svg#RobotoCondensed-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Black';
    src: url('font/Roboto-Black.eot');
    src: url('font/Roboto-Black.eot?#iefix') format('embedded-opentype'),
        url('font/Roboto-Black.woff2') format('woff2'),
        url('font/Roboto-Black.woff') format('woff'),
        url('font/Roboto-Black.ttf') format('truetype'),
        url('font/Roboto-Black.svg#Roboto-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Bold';
    src: url('font/Roboto-Bold.eot');
    src: url('font/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
        url('font/Roboto-Bold.woff2') format('woff2'),
        url('font/Roboto-Bold.woff') format('woff'),
        url('font/Roboto-Bold.ttf') format('truetype'),
        url('font/Roboto-Bold.svg#Roboto-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Light';
    src: url('font/Roboto-Light.eot');
    src: url('font/Roboto-Light.eot?#iefix') format('embedded-opentype'),
        url('font/Roboto-Light.woff2') format('woff2'),
        url('font/Roboto-Light.woff') format('woff'),
        url('font/Roboto-Light.ttf') format('truetype'),
        url('font/Roboto-Light.svg#Roboto-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url('font/Roboto-Medium.eot');
    src: url('font/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
        url('font/Roboto-Medium.woff2') format('woff2'),
        url('font/Roboto-Medium.woff') format('woff'),
        url('font/Roboto-Medium.ttf') format('truetype'),
        url('font/Roboto-Medium.svg#Roboto-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('font/Roboto-Regular.eot');
    src: url('font/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
        url('font/Roboto-Regular.woff2') format('woff2'),
        url('font/Roboto-Regular.woff') format('woff'),
        url('font/Roboto-Regular.ttf') format('truetype'),
        url('font/Roboto-Regular.svg#Roboto-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-Thin';
    src: url('font/Roboto-Thin.eot');
    src: url('font/Roboto-Thin.eot?#iefix') format('embedded-opentype'),
        url('font/Roboto-Thin.woff2') format('woff2'),
        url('font/Roboto-Thin.woff') format('woff'),
        url('font/Roboto-Thin.ttf') format('truetype'),
        url('font/Roboto-Thin.svg#Roboto-Thin') format('svg');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}


        html {
        scroll-behavior: smooth; /* Membuat efek scroll jadi halus */
        scroll-padding-top: 80px; /* Ubah angka ini (misal: 70px, 80px, 90px) sesuaikan dengan tinggi navbar Anda */
        }
        body {
            font-family: 'Roboto', sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .bg-custom-dark {
            background-color: #001C3D !important;
        }
        .bg-custom-cyan {
            background-color: #00A3C4 !important;
        }
        .navbar-dark .navbar-nav .nav-link {
            color: #00A3C4 !important;
            font-weight: bold;
            font-size: 0.9rem;
            text-transform: uppercase;
            padding-top: 15px !important;
            padding-bottom: 15px !important;
        }
        .navbar-dark .navbar-nav .nav-link:hover {
            color: #ffffff !important;
        }
        .logo-title {
            color: #001C3D;
            font-weight: 800;
            font-size: 1.4rem;
            letter-spacing: 0.5px;
        }
        .logo-subtitle {
            color: #00A3C4;
            font-size: 0.75rem;
            font-weight: bold;
            letter-spacing: 2px;
        }
        /* Mengatur ukuran kotak ikon email pada mode desktop */
        .email-box {
            width: 50px;
            text-decoration: none;
            transition: background-color 0.2s ease;
        }
        .email-box:hover {
            background-color: #008fae !important;
        }
        
        /* Modifikasi khusus untuk ikon email saat masuk ke dalam list menu di HP */
        @media (max-width: 991.98px) {
            .email-nav-item {
                padding-top: 10px;
                padding-bottom: 15px;
            }
            .email-mobile-btn {
                background-color: #00A3C4;
                color: black !important;
                display: inline-flex !important;
                align-items: center;
                justify-content: center;
                width: 50px;
                height: 45px;
                border-radius: 4px;
            }
        }


        
        /* --- Tema Warna Utama --- */
        .bg-custom-dark {
            background-color: #001C3D !important;
        }
        .bg-custom-cyan {
            background-color: #00A3C4 !important;
        }

        /* --- Tipografi & Menu Navigasi --- */
        .navbar-dark .navbar-nav .nav-link {
            color: #00A3C4 !important;
            font-weight: bold;
            font-size: 0.9rem;
            text-transform: uppercase;
            padding-top: 15px !important;
            padding-bottom: 15px !important;
        }
        .navbar-dark .navbar-nav .nav-link:hover {
            color: #ffffff !important;
        }
        .logo-title {
            color: #001C3D;
            font-weight: 800;
            font-size: 1.4rem;
            letter-spacing: 0.5px;
        }
        .logo-subtitle {
            color: #00A3C4;
            font-size: 0.75rem;
            font-weight: bold;
            letter-spacing: 2px;
        }

        /* --- Desain Kotak Ikon Email Desktop --- */
        .email-box {
            width: 50px;
            text-decoration: none;
            transition: background-color 0.2s ease;
        }
        .email-box:hover {
            background-color: #008fae !important;
        }

        /* --- Aturan Khusus Layar HP / Mobile (Breakpoint < 992px) --- */
        @media (max-width: 991.98px) {
            .email-nav-item {
                padding-top: 10px;
                padding-bottom: 15px;
            }
            .email-mobile-btn {
                background-color: transparent !important;
                display: flex !important;
                align-items: center;
                justify-content: center;
                width: 50px;
                height: 50px;
            }
        }

        /* --- Arsitektur Animasi Efek Blur ke Fix (On Load) --- */
        @keyframes blurToClear {
            0% {
                filter: blur(15px);
                opacity: 0;
                transform: scale(0.98);
            }
            100% {
                filter: blur(0px);
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Pemicu Animasi Gambar */
        .animasi-blur-img {
            animation: blurToClear 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
        }

        /* Pemicu Animasi Teks (Mundur 0.5 Detik setelah Gambar) */
        .animasi-blur-text {
            opacity: 0;
            animation: blurToClear 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
            animation-delay: 0.5s;
        }

        
        .style-footer-text, .style-footer-text a {
            font-size: 0.8rem;
            letter-spacing: 0.5px;
        }
        .style-footer-text a:hover {
            color: #00cdf7 !important; /* Efek menyala tipis saat kursor di atas link */
        }