*{
            font-family:'Poppins',sans-serif;
        }

        html{
            scroll-behavior:smooth;
        }

        body{
            background:#f8f9fa;
            overflow-x:hidden;
        }

        /* ===========================
            NAVBAR
        =========================== */

        .navbar{
            background:#0d6efd;
            box-shadow:0 5px 15px rgba(0,0,0,.15);
        }

        .navbar-brand{
            font-weight:700;
        }

        .nav-link{
            color:#fff !important;
            margin-left:15px;
            font-weight:500;
            transition:.3s;
        }

        .nav-link:hover{
            color:#ffd54f !important;
        }
        
        /* ==========================
   BRAND NAVBAR
========================== */

.navbar-brand{
    display:flex;
    align-items:center;
    line-height:1.2;
    text-decoration:none;
}

.brand-title{
    display:block;
    color:#fff;
    font-size:22px;
    font-weight:700;
}

.brand-subtitle{
    display:block;
    color:rgba(255,255,255,.85);
    font-size:13px;
    font-weight:400;
    letter-spacing:.3px;
}

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

        .hero{
            min-height:100vh;
            display:flex;
            align-items:center;
            color:#fff;
            background:
                    linear-gradient(
                        rgba(13,110,253,.75),
                        rgba(13,110,253,.75)
                    ),
                    url('images/bg-sekolah.jpg') center center/cover no-repeat;
        }

        .hero h1{
            font-size:58px;
            font-weight:700;
        }

        .hero h5{
            font-weight:400;
            margin:20px 0;
        }

        .hero .btn{
            padding:13px 30px;
            border-radius:50px;
        }
        
        .hero-buttons{
            display:flex;
            gap:15px;
            margin-top:30px;
            flex-wrap:wrap;
        }
        
        /* ===========================
           HERO LOGO
        =========================== */
        
        .hero-logo{
        
            width:320px;
        
            max-width:100%;
        
            filter:drop-shadow(0 15px 35px rgba(0,0,0,.35));
        
            animation:logoFloat 5s ease-in-out infinite;
        
        }
        
        @keyframes logoFloat{
        
            0%{
                transform:translateY(0);
            }
        
            50%{
                transform:translateY(-10px);
            }
        
            100%{
                transform:translateY(0);
            }
        
        }


        /* ===========================
        SECTION
    =========================== */
    
    .section{
        padding:90px 0;
    }
    
    .section-title{
        font-size:40px;
        font-weight:700;
        color:#1d3557;
    }
    
    .section-subtitle{
        color:#6c757d;
        font-size:17px;
        max-width:800px;
        margin:auto;
    }
    
    .about-img{
        width:100%;
        border-radius:20px;
        box-shadow:0 10px 30px rgba(0,0,0,.12);
    }
    
    .about-list{
        list-style:none;
        padding:0;
        margin-top:25px;
    }
    
    .about-list li{
        margin-bottom:15px;
        font-size:17px;
    }
    
    .about-list i{
        color:#0d6efd;
        margin-right:10px;
    }
    
    .stat-card{
        background:#fff;
        border:none;
        border-radius:18px;
        padding:35px 20px;
        text-align:center;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
        transition:.3s;
        height:100%;
    }
    
    .stat-card:hover{
        transform:translateY(-8px);
        box-shadow:0 18px 35px rgba(13,110,253,.18);
    }
    
    .stat-card i{
        font-size:55px;
        margin-bottom:20px;
    }
    
    .stat-card h2{
        font-weight:700;
        margin-bottom:10px;
    }
    
    .stat-card p{
        margin:0;
        color:#666;
        font-weight:500;
    }
    
    /* ===========================
        CARD SISWA PKL
    =========================== */
    
    .student-card{
        border:none;
        border-radius:18px;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
        transition:.3s;
        height:100%;
    }
    
    .student-card:hover{
        transform:translateY(-5px);
        box-shadow:0 15px 30px rgba(13,110,253,.15);
    }
    
    .avatar{
        width:70px;
        height:70px;
        border-radius:50%;
        background:#e9f2ff;
        display:flex;
        justify-content:center;
        align-items:center;
        font-size:34px;
        color:#0d6efd;
    }
    
    .badge-status{
        background:#198754;
        font-size:13px;
        padding:7px 12px;
    }
    
    /* ===========================
        CARD PERUSAHAAN
    =========================== */
    
    .company-card{
        border:none;
        border-radius:20px;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
        transition:.3s;
        height:100%;
    }
    
    .company-card:hover{
        transform:translateY(-8px);
        box-shadow:0 18px 35px rgba(13,110,253,.15);
    }
    
    .company-header{
        background:#0d6efd;
        color:#fff;
        padding:25px;
        text-align:center;
    }
    
    .company-header i{
        font-size:50px;
    }
    
    .company-body{
        padding:25px;
    }
    
    .company-body p{
        margin-bottom:12px;
    }
    
    /* ==========================
    JURNAL
    ========================== */
    
    .filter-box{
        background:#fff;
        padding:25px;
        border-radius:15px;
        box-shadow:0 8px 20px rgba(0,0,0,.08);
    }
    
    .jurnal-card{
        border:none;
        border-radius:18px;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
        transition:.3s;
        height:100%;
    }
    
    .jurnal-card:hover{
        transform:translateY(-5px);
    }
    
    .jurnal-header{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
    
    .jurnal-footer{
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
    
    /* =====================================
       DATA TABLE
    ===================================== */
    
    .table-card{
        background:#fff;
        border-radius:18px;
        padding:25px;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
    }
    
    
    .table thead th{
        position:sticky;
        top:0;
        z-index:5;
        background:#0d6efd !important;
        color:#fff;
        vertical-align:middle;
        white-space:nowrap;
    }
    
    .table td{
        vertical-align:middle;
        white-space:nowrap;
    }
    
    .badge-status{
        font-size:12px;
        padding:7px 12px;
    }
    
    .dataTables_filter{
        margin-bottom:15px;
    }
    
    .dataTables_length{
        margin-bottom:15px;
    }
    
    /* =====================================
       FOOTER
    ===================================== */
    
    .footer{
        background:#0f172a;
        color:#ffffff;
        padding:70px 0 25px;
    }
    
    .footer h5{
        color:#ffffff;
        font-weight:700;
        margin-bottom:20px;
    }
    
    .footer p,
    .footer li,
    .footer a{
        color:#d1d5db;
    }
    
    .footer a{
        text-decoration:none;
        transition:.3s;
    }
    
    .footer a:hover{
        color:#ffc107;
    }
    
    .footer-menu{
        list-style:none;
        padding:0;
        margin:0;
    }
    
    .footer-menu li{
        margin-bottom:10px;
    }
    
    .social-link a{
        display:inline-flex;
        justify-content:center;
        align-items:center;
        width:42px;
        height:42px;
        border-radius:50%;
        background:rgba(255,255,255,.08);
        color:#fff;
        margin-right:10px;
    }
    
    .social-link a:hover{
        background:#0d6efd;
    }
    
    .footer-copy{
        text-align:center;
        margin-top:30px;
        color:#adb5bd;
        line-height:28px;
    }
    
    .footer hr{
        border-color:rgba(255,255,255,.15);
    }
    
    @media (max-width:768px){
    
        .brand-title{
            font-size:17px;
        }
    
        .brand-subtitle{
            font-size:11px;
        }
    
    }

/* ==========================
   MOBILE HERO
========================== */

@media (max-width:768px){

    .hero{
        text-align:left;
    }

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

    .hero h5,
    .hero p{
        font-size:16px;
    }

    .hero-buttons{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .hero-buttons .btn{

        width:auto;

        min-width:220px;

    }

}

@media (max-width:768px){

    .hero{

        text-align:center;

        padding-top:120px;

        min-height:80vh;

    }

    .hero-logo{

        width:180px;

        margin-top:40px;

    }

    .hero-buttons{

        justify-content:center;

        align-items:center;

    }

}