/*==================================================
            SMP PASUNDAN LELES
        OFFICIAL SCHOOL WEBSITE
==================================================*/

/*==================================================
                GOOGLE FONT
==================================================*/
html,
body{
    overflow-x:hidden;
    width:100%;
}

*{
    box-sizing:border-box;
}

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


/*==================================================
                ROOT VARIABLES
==================================================*/

:root{

    /* Primary */

    --primary:#0D6EFD;

    --primary-dark:#0A58CA;

    --secondary:#198754;

    --warning:#FFC107;

    --danger:#DC3545;


    /* Neutral */

    --white:#FFFFFF;

    --light:#F8F9FA;

    --gray:#6C757D;

    --dark:#212529;

    --border:#E5E7EB;


    /* Shadow */

    --shadow-sm:0 5px 15px rgba(0,0,0,.08);

    --shadow:0 10px 30px rgba(0,0,0,.12);

    --shadow-lg:0 15px 40px rgba(0,0,0,.18);


    /* Radius */

    --radius:12px;

    --radius-lg:20px;

    --radius-xl:30px;


    /* Transition */

    --transition:.35s ease;

}


/*==================================================
                    RESET
==================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;

    font-size:16px;

    color:var(--dark);

    background:var(--white);

    line-height:1.7;

    overflow-x:hidden;

}

img{

    width:100%;

    display:block;

}

a{

    text-decoration:none;

    color:inherit;

}

ul{

    list-style:none;

}

button{

    border:none;

    cursor:pointer;

    font-family:'Poppins',sans-serif;

}

input,
textarea,
select{

    font-family:'Poppins',sans-serif;

    outline:none;

}

::selection{

    background:var(--primary);

    color:#fff;

}


/*==================================================
                SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#efefef;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}


/*==================================================
                GLOBAL
==================================================*/

section{

    padding:100px 0;

}

.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}

.section-header{

    text-align:center;

    margin-bottom:60px;

}

.section-header span{

    display:inline-block;

    color:var(--primary);

    font-weight:600;

    text-transform:uppercase;

    margin-bottom:15px;

}

.section-header h2{

    font-size:42px;

    margin-bottom:20px;

}

.section-header p{

    width:70%;

    margin:auto;

    color:var(--gray);

}


/*==================================================
                    BUTTON
==================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:15px 35px;

    border-radius:50px;

    font-weight:600;

    transition:var(--transition);

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-5px);

    box-shadow:var(--shadow);

}

.btn-outline{

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

/*==================================================
                    HEADER
==================================================*/

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:#fff;

    box-shadow:0 2px 15px rgba(0,0,0,.08);

    z-index:9999;

    transition:var(--transition);

}

header.sticky{

    box-shadow:var(--shadow);

}


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

.navbar{
    width:90%;
    max-width:1200px;
    margin:0 auto;

    display:flex;
    justify-content:space-between;
    align-items:center;

    height:85px;
}

.nav-container{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
}


/*==================================================
                    LOGO
==================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.logo img{

    width:60px;

    height:60px;

    object-fit:contain;

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-text h2{

    font-size:22px;

    color:var(--primary);

    font-weight:700;

    line-height:1.2;

}

.logo-text span{

    font-size:13px;

    color:var(--gray);

}


/*==================================================
                MENU NAVIGASI
==================================================*/

.nav-menu{

    display:flex;

    align-items:center;

    gap:35px;

}

.nav-menu li{

    position:relative;

}

.nav-menu li a{

    font-size:15px;

    font-weight:500;

    color:var(--dark);

    transition:var(--transition);

}

.nav-menu li a:hover{

    color:var(--primary);

}

.nav-menu li a.active{

    color:var(--primary);

}


/* Garis bawah menu */

.nav-menu li a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:var(--transition);

}

.nav-menu li a:hover::after,

.nav-menu li a.active::after{

    width:100%;

}


/*==================================================
                HAMBURGER
==================================================*/

.menu-toggle{

    display:none;

    font-size:28px;

    color:var(--primary);

    cursor:pointer;

}


/*==================================================
                PAGE BANNER
==================================================*/

.page-banner{

    padding-top:170px;

    padding-bottom:100px;

    background:
    linear-gradient(

        rgba(13,110,253,.85),

        rgba(13,110,253,.85)

    ),

    url("../images/banner.jpg");

    background-size:cover;

    background-position:center;

    text-align:center;

    color:#fff;

}

.page-banner-content span{

    display:inline-block;

    padding:10px 22px;

    background:rgba(255,255,255,.15);

    border-radius:50px;

    margin-bottom:20px;

    font-weight:600;

}

.page-banner-content h1{

    font-size:54px;

    margin-bottom:20px;

}

.page-banner-content p{

    max-width:750px;

    margin:auto;

    line-height:1.8;

}

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

.hero{

    padding-top:170px;

    padding-bottom:110px;

    background:linear-gradient(
        135deg,
        #f8fbff 0%,
        #eef6ff 100%
    );

    overflow:hidden;

}

.hero-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}


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

.hero-content span{

    display:inline-block;

    padding:10px 22px;

    background:#EAF4FF;

    color:var(--primary);

    border-radius:50px;

    font-weight:600;

    margin-bottom:20px;

}

.hero-content h1{

    font-size:58px;

    line-height:1.2;

    color:var(--dark);

    margin-bottom:25px;

}

.hero-content p{

    color:var(--gray);

    margin-bottom:35px;

    font-size:17px;

    text-align:justify;

}

.hero-button{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}


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

.hero-image{

    position:relative;

}

.hero-image img{

    width:100%;

    border-radius:var(--radius-lg);

    animation:heroFloat 4s ease-in-out infinite;

}


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

.hero-card{

    position:absolute;

    background:#fff;

    padding:18px 22px;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    display:flex;

    align-items:center;

    gap:15px;

}

.hero-card i{

    width:55px;

    height:55px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:22px;

}

.hero-card h4{

    font-size:22px;

    margin-bottom:4px;

}

.hero-card p{

    font-size:14px;

    color:var(--gray);

}

.hero-card.card-top{

    top:40px;

    left:-40px;

}

.hero-card.card-bottom{

    bottom:40px;

    right:-40px;

}


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

.hero-stats{

    margin-top:45px;

    display:flex;

    gap:25px;

    flex-wrap:wrap;

}

.hero-stat{

    text-align:center;

}

.hero-stat h3{

    font-size:34px;

    color:var(--primary);

    margin-bottom:8px;

}

.hero-stat p{

    color:var(--gray);

    font-size:15px;

}


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

@keyframes heroFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

/*==================================================
                REUSABLE COMPONENTS
==================================================*/


/*==============================
            GRID
==============================*/

.grid-2{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:40px;

}

.grid-3{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.grid-4{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}



/*==============================
            CARD
==============================*/

.card{

    background:#fff;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    border:1px solid var(--border);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}



/*==============================
        CARD IMAGE
==============================*/

.card-image{

    overflow:hidden;

}

.card-image img{

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.6s;

}

.card:hover .card-image img{

    transform:scale(1.08);

}



/*==============================
        CARD BODY
==============================*/

.card-body{

    padding:25px;

}

.card-body h3{

    font-size:24px;

    margin-bottom:15px;

    color:var(--dark);

}

.card-body p{

    color:var(--gray);

    text-align:justify;

}



/*==============================
            BADGE
==============================*/

.badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}

.badge-primary{

    background:#EAF4FF;

    color:var(--primary);

}

.badge-success{

    background:#EAFBF0;

    color:var(--secondary);

}

.badge-warning{

    background:#FFF7DD;

    color:#C98A00;

}



/*==============================
        IMAGE EFFECT
==============================*/

.image-hover{

    overflow:hidden;

    border-radius:var(--radius);

}

.image-hover img{

    transition:.6s;

}

.image-hover:hover img{

    transform:scale(1.08);

}



/*==============================
            ICON BOX
==============================*/

.icon-box{

    width:75px;

    height:75px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:30px;

    margin-bottom:20px;

}



/*==============================
        GLASS EFFECT
==============================*/

.glass{

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.2);

}



/*==============================
            DIVIDER
==============================*/

.divider{

    width:80px;

    height:4px;

    background:var(--primary);

    margin:20px auto;

    border-radius:30px;

}



/*==============================
            HOVER
==============================*/

.hover-up{

    transition:var(--transition);

}

.hover-up:hover{

    transform:translateY(-12px);

}



/*==============================
        SECTION BACKGROUND
==============================*/

.bg-light{

    background:var(--light);

}

.bg-white{

    background:#fff;

}

.bg-primary{

    background:var(--primary);

    color:#fff;

}

/*==================================================
                    ABOUT SCHOOL
==================================================*/

.about{

    background:var(--white);

}

.about-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:70px;

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.about-image img:hover{

    transform:scale(1.03);

}

.about-content span{

    display:inline-block;

    color:var(--primary);

    font-weight:600;

    text-transform:uppercase;

    margin-bottom:15px;

}

.about-content h2{

    font-size:42px;

    margin-bottom:25px;

    line-height:1.3;

}

.about-content p{

    color:var(--gray);

    margin-bottom:18px;

    text-align:justify;

}

.about-list{

    margin-top:30px;

}

.about-list li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:15px;

}

.about-list i{

    color:var(--secondary);

    margin-top:5px;

}



/*==================================================
            PRINCIPAL MESSAGE
==================================================*/

.principal{

    background:var(--light);

}

.principal-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.principal-image img{

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

}

.principal-content span{

    color:var(--primary);

    font-weight:600;

    text-transform:uppercase;

}

.principal-content h2{

    font-size:40px;

    margin:20px 0;

}

.principal-content p{

    color:var(--gray);

    text-align:justify;

    margin-bottom:18px;

}

.principal-content h4{

    margin-top:30px;

    color:var(--dark);

}

.principal-content small{

    color:var(--gray);

}



/*==================================================
                VISION MISSION
==================================================*/

.vision-mission{

    background:#fff;

}

.vision-wrapper{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

.vision-card{

    background:#fff;

    padding:40px;

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

    border:1px solid var(--border);

    transition:var(--transition);

}

.vision-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.vision-card i{

    width:80px;

    height:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:34px;

    margin-bottom:25px;

}

.vision-card h3{

    font-size:28px;

    margin-bottom:20px;

}

.vision-card p{

    color:var(--gray);

    text-align:justify;

}

.vision-card ul{

    margin-top:20px;

    padding-left:20px;

    list-style:disc;

}

.vision-card ul li{

    margin-bottom:12px;

    color:var(--gray);

}



/*==================================================
                SCHOOL HISTORY
==================================================*/

.history{

    background:var(--light);

}

.history-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.history-image img{

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

}

.history-content span{

    color:var(--primary);

    font-weight:600;

    text-transform:uppercase;

}

.history-content h2{

    font-size:42px;

    margin:20px 0;

}

.history-content p{

    color:var(--gray);

    margin-bottom:18px;

    text-align:justify;

}



/*==================================================
            ORGANIZATION STRUCTURE
==================================================*/

.organization{

    background:#fff;

}

.organization img{

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

}



/*==================================================
                STATISTICS
==================================================*/

.statistics{

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-dark)

    );

    color:#fff;

}

.statistics .section-header span,

.statistics .section-header h2,

.statistics .section-header p{

    color:#fff;

}

.statistics-wrapper{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.stat-card{

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(10px);

    padding:35px;

    border-radius:var(--radius);

    text-align:center;

    transition:var(--transition);

}

.stat-card:hover{

    transform:translateY(-10px);

}

.stat-card i{

    font-size:42px;

    margin-bottom:20px;

}

.stat-card h3{

    font-size:38px;

    margin-bottom:10px;

}

.stat-card p{

    font-size:16px;

}

/*==================================================
                    TEACHER PAGE
==================================================*/

.teacher-page{

    background:var(--light);

}


/*==================================================
                TEACHER INTRO
==================================================*/

.teacher-intro{

    text-align:center;

    margin-bottom:70px;

}

.teacher-intro h2{

    font-size:42px;

    margin-bottom:20px;

}

.teacher-intro p{

    width:70%;

    margin:auto;

    color:var(--gray);

}


/*==================================================
                TEACHER GRID
==================================================*/

.teacher-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}


/*==================================================
                TEACHER CARD
==================================================*/

.teacher-card{

    background:#fff;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    border:1px solid var(--border);

}

.teacher-card:hover{

    transform:translateY(-12px);

    box-shadow:var(--shadow);

}


/*==================================================
                TEACHER IMAGE
==================================================*/

.teacher-image{

    overflow:hidden;

}

.teacher-image img{

    width:100%;

    height:330px;

    object-fit:cover;

    transition:.6s;

}

.teacher-card:hover img{

    transform:scale(1.08);

}


/*==================================================
                TEACHER INFO
==================================================*/

.teacher-info{

    padding:25px;

    text-align:center;

}

.teacher-info h3{

    font-size:22px;

    margin-bottom:8px;

}

.teacher-info h4{

    font-size:16px;

    color:var(--primary);

    margin-bottom:15px;

    font-weight:600;

}

.teacher-info p{

    color:var(--gray);

    font-size:15px;

    line-height:1.7;

}


/*==================================================
                SOCIAL ICON
==================================================*/

.teacher-social{

    margin-top:20px;

    display:flex;

    justify-content:center;

    gap:12px;

}

.teacher-social a{

    width:40px;

    height:40px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--light);

    transition:var(--transition);

}

.teacher-social a:hover{

    background:var(--primary);

    color:#fff;

}


/*==================================================
                    SECTION TITLE
==================================================*/

.teacher-title{

    margin-top:80px;

    margin-bottom:40px;

}

.teacher-title h2{

    font-size:34px;

    color:var(--primary);

    margin-bottom:10px;

}

.teacher-title p{

    color:var(--gray);

}


/*==================================================
                KEPALA SEKOLAH
==================================================*/

.principal-card{

    display:grid;

    grid-template-columns:350px 1fr;

    gap:50px;

    align-items:center;

    background:#fff;

    padding:40px;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

}

.principal-card img{

    border-radius:var(--radius-lg);

}

.principal-info h2{

    font-size:36px;

    margin-bottom:10px;

}

.principal-info h4{

    color:var(--primary);

    margin-bottom:20px;

}

.principal-info p{

    color:var(--gray);

    text-align:justify;

}


/*==================================================
                STAFF CARD
==================================================*/

.staff-card{

    background:#fff;

    border-radius:var(--radius);

    padding:30px;

    text-align:center;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.staff-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.staff-card i{

    width:80px;

    height:80px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:34px;

    margin-bottom:20px;

}

.staff-card h3{

    margin-bottom:10px;

}

.staff-card p{

    color:var(--gray);

}

/*==================================================
                FACILITY PAGE
==================================================*/

.facility-page{

    background:var(--white);

}


/*==================================================
            FACILITY PREVIEW
==================================================*/

.facility-preview{

    background:var(--white);

}

.facility-wrapper{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.facility-card{

    background:#fff;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

    border:1px solid var(--border);

}

.facility-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.facility-card img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.6s;

}

.facility-card:hover img{

    transform:scale(1.08);

}

.facility-content{

    padding:25px;

}

.facility-content h3{

    font-size:24px;

    margin-bottom:15px;

}

.facility-content p{

    color:var(--gray);

    text-align:justify;

}


/*==================================================
            FACILITY DETAIL
==================================================*/

.facility-detail{

    padding:90px 0;

    background:#fff;

}

.facility-detail.gray{

    background:var(--light);

}

.facility-detail-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.facility-detail-wrapper.reverse{

    direction:rtl;

}

.facility-detail-wrapper.reverse>*{

    direction:ltr;

}


/*==================================================
            FACILITY IMAGE
==================================================*/

.facility-image{

    overflow:hidden;

    border-radius:var(--radius-lg);

}

.facility-image img{

    width:100%;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

    transition:.6s;

}

.facility-image:hover img{

    transform:scale(1.05);

}


/*==================================================
        FACILITY DESCRIPTION
==================================================*/

.facility-description span{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:60px;

    height:60px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:22px;

    font-weight:700;

    margin-bottom:20px;

}

.facility-description h2{

    font-size:38px;

    margin-bottom:20px;

}

.facility-description p{

    color:var(--gray);

    text-align:justify;

    margin-bottom:25px;

}

.facility-description ul{

    margin-top:20px;

}

.facility-description ul li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:15px;

    color:var(--dark);

}

.facility-description ul li i{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--secondary);

    color:#fff;

    font-size:13px;

}


/*==================================================
            FACILITY GALLERY
==================================================*/

.facility-gallery{

    background:var(--light);

}

.facility-gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

.facility-gallery-item{

    overflow:hidden;

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

}

.facility-gallery-item img{

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.6s;

}

.facility-gallery-item:hover img{

    transform:scale(1.08);

}


/*==================================================
            FACILITY CLOSING
==================================================*/

.facility-closing{

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-dark)

    );

    color:#fff;

    text-align:center;

}

.facility-closing h2{

    font-size:42px;

    margin-bottom:20px;

}

.facility-closing p{

    max-width:750px;

    margin:auto;

    line-height:1.8;

    margin-bottom:35px;

}

.facility-closing .btn{

    background:#fff;

    color:var(--primary);

}

.facility-closing .btn:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow);

}

/*==================================================
                EXTRACURRICULAR PAGE
==================================================*/

.extra-page{

    background:var(--light);

}


/*==================================================
            EXTRACURRICULAR GRID
==================================================*/

.extra-wrapper{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}


/*==================================================
            EXTRACURRICULAR CARD
==================================================*/

.extra-card{

    background:#fff;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    border:1px solid var(--border);

    transition:var(--transition);

}

.extra-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}


/*==================================================
            EXTRA IMAGE
==================================================*/

.extra-image{

    overflow:hidden;

}

.extra-image img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.6s;

}

.extra-card:hover img{

    transform:scale(1.08);

}


/*==================================================
            EXTRA CONTENT
==================================================*/

.extra-content{

    padding:25px;

}

.extra-content h3{

    font-size:24px;

    margin-bottom:12px;

}

.extra-content p{

    color:var(--gray);

    text-align:justify;

    margin-bottom:20px;

}


/*==================================================
            EXTRA INFO
==================================================*/

.extra-info{

    display:flex;

    flex-direction:column;

    gap:12px;

}

.extra-info li{

    display:flex;

    align-items:center;

    gap:12px;

    color:var(--gray);

}

.extra-info li i{

    width:30px;

    height:30px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:13px;

}


/*==================================================
        EXTRA ACHIEVEMENT
==================================================*/

.extra-achievement{

    margin-top:80px;

}

.extra-achievement-wrapper{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.achievement-card{

    background:#fff;

    padding:35px;

    border-radius:var(--radius);

    text-align:center;

    box-shadow:var(--shadow-sm);

    border:1px solid var(--border);

    transition:var(--transition);

}

.achievement-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.achievement-card i{

    width:90px;

    height:90px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--warning);

    color:#fff;

    font-size:40px;

    margin-bottom:20px;

}

.achievement-card h3{

    margin-bottom:15px;

    font-size:24px;

}

.achievement-card p{

    color:var(--gray);

}


/*==================================================
            TRAINING SCHEDULE
==================================================*/

.training{

    background:#fff;

}

.training-table{

    width:100%;

    border-collapse:collapse;

    margin-top:40px;

    overflow:hidden;

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

}

.training-table thead{

    background:var(--primary);

    color:#fff;

}

.training-table th{

    padding:18px;

    text-align:center;

}

.training-table td{

    padding:18px;

    text-align:center;

    border-bottom:1px solid var(--border);

}

.training-table tbody tr:hover{

    background:#F8FBFF;

}

/*==================================================
                    GALLERY PAGE
==================================================*/

.gallery-page{

    background:var(--white);

}


/*==================================================
                FILTER BUTTON
==================================================*/

.gallery-filter{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:50px;

}

.gallery-filter button{

    padding:12px 28px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    transition:var(--transition);

}

.gallery-filter button:hover,

.gallery-filter button.active{

    background:var(--primary);

    color:#fff;

}


/*==================================================
                GALLERY GRID
==================================================*/

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}


/*==================================================
                GALLERY ITEM
==================================================*/

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

    cursor:pointer;

}

.gallery-item img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.6s;

}

.gallery-item:hover img{

    transform:scale(1.12);

}


/*==================================================
                GALLERY OVERLAY
==================================================*/

.gallery-overlay{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    padding:25px;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.85)

    );

    color:#fff;

    opacity:0;

    transition:var(--transition);

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

.gallery-overlay span{

    display:inline-block;

    padding:6px 14px;

    border-radius:30px;

    background:var(--primary);

    font-size:13px;

    margin-bottom:12px;

}

.gallery-overlay h3{

    font-size:22px;

    margin-bottom:8px;

}

.gallery-overlay p{

    font-size:14px;

    opacity:.9;

}


/*==================================================
                LIGHTBOX
==================================================*/

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.9);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.lightbox.active{

    display:flex;

}

.lightbox img{

    width:90%;

    max-width:900px;

    border-radius:var(--radius);

}

.lightbox-close{

    position:absolute;

    top:30px;

    right:40px;

    font-size:42px;

    color:#fff;

    cursor:pointer;

}


/*==================================================
                VIDEO GALLERY
==================================================*/

.video-gallery{

    margin-top:100px;

}

.video-wrapper{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

.video-card{

    overflow:hidden;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}

.video-card iframe{

    width:100%;

    height:320px;

    border:none;

}


/*==================================================
                GALLERY STATS
==================================================*/

.gallery-stat{

    margin-top:90px;

}

.gallery-stat-wrapper{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.gallery-stat-card{

    background:#fff;

    padding:35px;

    text-align:center;

    border-radius:var(--radius);

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.gallery-stat-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.gallery-stat-card h2{

    color:var(--primary);

    font-size:42px;

    margin-bottom:10px;

}

.gallery-stat-card p{

    color:var(--gray);

}

/*==================================================
                    NEWS PAGE
==================================================*/

.news-page{

    background:var(--light);

}


/*==================================================
                    NEWS GRID
==================================================*/

.news-wrapper{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

}


/*==================================================
                    NEWS LIST
==================================================*/

.news-list{

    display:grid;

    gap:35px;

}


.news-card .card-body{

    display:flex;
    flex-direction:column;
    gap:15px;

}


/*==================================================
                    NEWS CONTENT
==================================================*/

.news-content{

    padding:30px;

}

.news-meta{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-bottom:18px;

    color:var(--gray);

    font-size:14px;

}

.news-meta i{

    color:var(--primary);

    margin-right:6px;

}

.news-content h2{

    font-size:30px;

    margin-bottom:15px;

    transition:var(--transition);

}

.news-card:hover h2{

    color:var(--primary);

}

.news-content p{

    color:var(--gray);

    text-align:justify;

    margin-bottom:25px;

}

.news-content .btn{

    margin-top:10px;

}


/*==================================================
                    SIDEBAR
==================================================*/

.news-sidebar{

    display:flex;

    flex-direction:column;

    gap:30px;

}

.sidebar-box{

    background:#fff;

    padding:30px;

    border-radius:var(--radius);

    box-shadow:var(--shadow-sm);

}

.sidebar-box h3{

    margin-bottom:20px;

    color:var(--primary);

    font-size:24px;

}


/*==================================================
                SEARCH BOX
==================================================*/

.search-box{

    display:flex;

}

.search-box input{

    flex:1;

    padding:14px;

    border:1px solid var(--border);

    border-radius:8px 0 0 8px;

}

.search-box button{

    padding:14px 20px;

    background:var(--primary);

    color:#fff;

    border-radius:0 8px 8px 0;

}


/*==================================================
                CATEGORY
==================================================*/

.category-list{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.category-list a{

    display:flex;

    justify-content:space-between;

    padding:12px 18px;

    background:#F8F9FA;

    border-radius:8px;

    transition:var(--transition);

}

.category-list a:hover{

    background:var(--primary);

    color:#fff;

}


/*==================================================
                LATEST NEWS
==================================================*/

.latest-news{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.latest-item{

    display:flex;

    gap:15px;

}

.latest-item img{

    width:90px;

    height:70px;

    object-fit:cover;

    border-radius:8px;

}

.latest-info h4{

    font-size:16px;

    margin-bottom:8px;

    transition:var(--transition);

}

.latest-item:hover h4{

    color:var(--primary);

}

.latest-info span{

    color:var(--gray);

    font-size:13px;

}


/*==================================================
                    TAGS
==================================================*/

.tag-wrapper{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.tag{

    padding:8px 16px;

    background:#EEF4FF;

    color:var(--primary);

    border-radius:30px;

    transition:var(--transition);

}

.tag:hover{

    background:var(--primary);

    color:#fff;

}


/*==================================================
                PAGINATION
==================================================*/

.pagination{

    margin-top:60px;

    display:flex;

    justify-content:center;

    gap:12px;

}

.pagination a{

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#fff;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.pagination a:hover,

.pagination a.active{

    background:var(--primary);

    color:#fff;

}

/*==================================================
                    PPDB PAGE
==================================================*/

.ppdb-page{

    background:var(--white);

}


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

.ppdb-hero{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    text-align:center;

    border-radius:var(--radius-lg);

    padding:80px 50px;

    margin-bottom:80px;

}

.ppdb-hero h2{

    font-size:48px;

    margin-bottom:20px;

}

.ppdb-hero p{

    max-width:750px;

    margin:auto;

    line-height:1.8;

    margin-bottom:35px;

}


/*==================================================
                PPDB INFO
==================================================*/

.ppdb-info{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.ppdb-card{

    background:#fff;

    padding:35px;

    border-radius:var(--radius);

    text-align:center;

    box-shadow:var(--shadow-sm);

    border:1px solid var(--border);

    transition:var(--transition);

}

.ppdb-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.ppdb-card i{

    width:80px;

    height:80px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-size:34px;

    margin-bottom:25px;

}

.ppdb-card h3{

    margin-bottom:15px;

    font-size:24px;

}

.ppdb-card p{

    color:var(--gray);

}


/*==================================================
            REGISTRATION FLOW
==================================================*/

.registration-flow{

    margin-top:100px;

}

.flow-wrapper{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

}

.flow-card{

    position:relative;

    background:#fff;

    padding:35px;

    border-radius:var(--radius);

    text-align:center;

    box-shadow:var(--shadow-sm);

    border:1px solid var(--border);

    transition:var(--transition);

}

.flow-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.flow-number{

    width:60px;

    height:60px;

    margin:auto;

    margin-bottom:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--secondary);

    color:#fff;

    font-size:24px;

    font-weight:700;

}

.flow-card h3{

    margin-bottom:15px;

}

.flow-card p{

    color:var(--gray);

}


/*==================================================
            REQUIREMENTS
==================================================*/

.requirement{

    margin-top:100px;

}

.requirement-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}

.requirement-image img{

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

}

.requirement-content h2{

    font-size:40px;

    margin-bottom:20px;

}

.requirement-content ul{

    margin-top:25px;

}

.requirement-content li{

    display:flex;

    gap:15px;

    margin-bottom:18px;

    align-items:flex-start;

}

.requirement-content i{

    color:var(--secondary);

    margin-top:5px;

}


/*==================================================
                SCHEDULE TABLE
==================================================*/

.schedule-table{

    width:100%;

    border-collapse:collapse;

    margin-top:50px;

    box-shadow:var(--shadow-sm);

    overflow:hidden;

    border-radius:var(--radius);

}

.schedule-table thead{

    background:var(--primary);

    color:#fff;

}

.schedule-table th{

    padding:18px;

}

.schedule-table td{

    padding:18px;

    border-bottom:1px solid var(--border);

    text-align:center;

}

.schedule-table tbody tr:hover{

    background:#F8FBFF;

}


/*==================================================
            CTA PPDB
==================================================*/

.ppdb-cta{

    margin-top:100px;

    background:linear-gradient(
        135deg,
        var(--secondary),
        #157347
    );

    color:#fff;

    padding:70px;

    border-radius:var(--radius-lg);

    text-align:center;

}

.ppdb-cta h2{

    font-size:42px;

    margin-bottom:20px;

}

.ppdb-cta p{

    max-width:700px;

    margin:auto;

    margin-bottom:30px;

}

.ppdb-cta .btn{

    background:#fff;

    color:var(--secondary);

}

/*==================================================
                    CONTACT PAGE
==================================================*/

.contact-page{

    background:var(--light);

}

/*==================================================
                    FOOTER
==================================================*/

footer{

    background:#0f172a;

    color:#fff;

    padding:80px 0 25px;

}

.footer-wrapper{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.5fr;

    gap:45px;

}


/* =========================================
   FOOTER LOGO
========================================= */

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: 15px;
}

.footer-logo img {
    width: 100px;
    height: 100px;
    max-width: 100px;
    object-fit: contain;
    margin: 0 auto;
}

.footer-logo h3 {
    font-size: 26px;
    margin: 0;
}

.footer-logo p {
    text-align: center;
    margin: 0;
    line-height: 1.7;
}


/* =========================================
   FOOTER LOGO - MOBILE
========================================= */

@media (max-width: 768px) {

    .footer-logo {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 12px;
    }

    .footer-logo img {
        width: 90px !important;
        height: 90px !important;
        max-width: 90px !important;
        margin: 0 auto;
        object-fit: contain;
    }

    .footer-logo h3 {
        font-size: 24px;
        margin: 0;
    }

    .footer-logo p {
        max-width: 330px;
        margin: 0 auto;
        text-align: center;
        font-size: 14px;
        line-height: 1.7;
    }

}

/*=========================================
            FOOTER TITLE
=========================================*/

.footer-title{

    margin-bottom:25px;

    font-size:22px;

    position:relative;

}

.footer-title::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:60px;

    height:3px;

    background:var(--primary);

}


/*=========================================
            FOOTER MENU
=========================================*/

.footer-links{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.footer-links a{

    color:#CBD5E1;

    transition:var(--transition);

}

.footer-links a:hover{

    color:#fff;

    padding-left:8px;

}


/*=========================================
            CONTACT INFO
=========================================*/

.footer-contact{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.footer-contact li{

    display:flex;

    gap:12px;

    align-items:flex-start;

}

.footer-contact i{

    color:var(--primary);

    margin-top:5px;

}

.footer-contact span{

    color:#CBD5E1;

}


/*=========================================
            SOCIAL MEDIA
=========================================*/

.footer-social{

    margin-top:30px;

    display:flex;

    gap:15px;

}

.footer-social a{

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(255,255,255,.08);

    color:#fff;

    transition:var(--transition);

}

.footer-social a:hover{

    background:var(--primary);

    transform:translateY(-5px);

}


/*=========================================
            COPYRIGHT
=========================================*/

.footer-bottom{

    margin-top:60px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.1);

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:20px;

}

.footer-bottom p{

     width:70%;
     text-align: center;
    margin:auto;
    color:var(--gray);

}

.footer-bottom a{

    color:var(--primary);

    font-weight:600;

}


/*==================================================
                CONTACT WRAPPER
==================================================*/

.contact-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:start;

}


/*==================================================
                CONTACT INFO
==================================================*/

.contact-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.contact-card{

    display:flex;

    gap:20px;

    align-items:flex-start;

    background:#fff;

    padding:30px;

    border-radius:var(--radius);

    border:1px solid var(--border);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.contact-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.contact-card i{

    width:65px;

    height:65px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--primary);

    color:#fff;

    border-radius:50%;

    font-size:28px;

    flex-shrink:0;

}

.contact-card h3{

    margin-bottom:10px;

    font-size:22px;

}

.contact-card p{

    color:var(--gray);

    line-height:1.8;

}


/*==================================================
                CONTACT FORM
==================================================*/

.contact-form{

    background:#fff;

    padding:40px;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

}

.contact-form h2{

    margin-bottom:30px;

    font-size:34px;

}

.contact-form .form-group{

    margin-bottom:20px;

}

.contact-form label{

    display:block;

    margin-bottom:10px;

    font-weight:600;

}

.contact-form input,

.contact-form textarea{

    width:100%;

    padding:16px;

    border:1px solid var(--border);

    border-radius:10px;

    transition:var(--transition);

    font-size:15px;

}

.contact-form textarea{

    resize:vertical;

    min-height:160px;

}

.contact-form input:focus,

.contact-form textarea:focus{

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(13,110,253,.15);

}

.contact-form button{

    width:100%;

}


/*==================================================
                    MAP
==================================================*/

.map{

    margin-top:80px;

}

.map iframe{

    width:100%;

    height:450px;

    border:none;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

}


/*==================================================
            SOCIAL CONTACT
==================================================*/

.social-contact{

    margin-top:40px;

    display:flex;

    gap:15px;

}

.social-contact a{

    width:50px;

    height:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    transition:var(--transition);

}

.social-contact a:hover{

    background:var(--secondary);

    transform:translateY(-5px);

}

/*==================================================
                RESPONSIVE DESIGN
==================================================*/


/*=========================================
            LARGE LAPTOP
=========================================*/

@media(max-width:1200px){

.container{

    width:95%;

}

.hero-content h1{

    font-size:48px;

}

.section-header h2{

    font-size:38px;

}

.teacher-grid{

    grid-template-columns:repeat(3,1fr);

}

.extra-wrapper{

    grid-template-columns:repeat(3,1fr);

}

.facility-wrapper{

    grid-template-columns:repeat(2,1fr);

}

.gallery-grid{

    grid-template-columns:repeat(2,1fr);

}

.statistics-wrapper{

    grid-template-columns:repeat(2,1fr);

}

.footer-wrapper{

    grid-template-columns:repeat(2,1fr);

}

}



/*=========================================
                TABLET
=========================================*/

@media(max-width:992px){

.hero-container,

.about-wrapper,

.principal-wrapper,

.history-wrapper,

.facility-detail-wrapper,

.requirement-wrapper,

.contact-wrapper,

.news-wrapper{

    grid-template-columns:1fr;

}

.facility-detail-wrapper.reverse{

    direction:ltr;

}

.hero-image{

    order:-1;

}

.hero-content{

    text-align:center;

}

.hero-button{

    justify-content:center;

}

.hero-stats{

    justify-content:center;

}

.teacher-grid{

    grid-template-columns:repeat(2,1fr);

}

.extra-wrapper{

    grid-template-columns:repeat(2,1fr);

}

.facility-wrapper{

    grid-template-columns:repeat(2,1fr);

}

.gallery-grid{

    grid-template-columns:repeat(2,1fr);

}

.video-wrapper{

    grid-template-columns:1fr;

}

.ppdb-info{

    grid-template-columns:1fr;

}

.flow-wrapper{

    grid-template-columns:repeat(2,1fr);

}

.statistics-wrapper{

    grid-template-columns:repeat(2,1fr);

}

.gallery-stat-wrapper{

    grid-template-columns:repeat(2,1fr);

}

.footer-wrapper{

    grid-template-columns:1fr 1fr;

}

.nav-menu{

    position:fixed;

    top:85px;

    left:-100%;

    width:280px;

    height:calc(100vh - 85px);

    background:#fff;

    flex-direction:column;

    justify-content:flex-start;

    padding-top:40px;

    transition:.4s;

    box-shadow:var(--shadow);

}

.nav-menu.active{

    left:0;

}

.menu-toggle{

    display:block;

}

}



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

@media (max-width:768px){

    section{
        padding:70px 0;
    }

    .container,
    .contact-container,
    .ppdb-container{
        width:100%;
        max-width:100%;
        padding-left:20px;
        padding-right:20px;
    }

    /* ================= MENU ================= */

    .mobile-menu{
        height:100vh;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    .mobile-menu ul{
        padding-bottom:40px;
    }

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

    .hero{
        padding-top:140px;
    }

    .page-banner{
        padding-top:140px;
    }

    .hero-content h1{
        font-size:38px;
    }

    .page-banner-content h1{
        font-size:40px;
    }

    .section-header h2{
        font-size:32px;
    }

    .section-header p{
        width:100%;
    }

    .about-content h2,
    .principal-content h2,
    .history-content h2,
    .facility-description h2{
        font-size:32px;
    }

    /* ================= GRID ================= */

    .teacher-grid,
    .extra-wrapper,
    .facility-wrapper,
    .gallery-grid,
    .statistics-wrapper,
    .gallery-stat-wrapper,
    .vision-wrapper,
    .flow-wrapper,
    .contact-wrapper,
    .requirement-wrapper{
        grid-template-columns:1fr;
    }

    .contact-wrapper,
    .requirement-wrapper{
        gap:30px;
    }

    .principal-card{
        grid-template-columns:1fr;
        text-align:center;
    }

    /* ================= PPDB ================= */

    .ppdb-info{
        grid-template-columns:1fr;
    }

    .ppdb-hero{
        padding:50px 25px;
    }

    .ppdb-hero h2{
        font-size:34px;
    }

    .ppdb-cta{
        padding:40px 25px;
    }

    .ppdb-cta h2{
        font-size:30px;
    }

    /* ================= CONTACT ================= */

    .contact-form{
        padding:25px;
    }

    .contact-map iframe{
        width:100%;
        height:300px;
        display:block;
    }

    /* ================= FOOTER ================= */

    /* ================= FOOTER ================= */

/* ================= FOOTER ================= */

.footer-wrapper{
    grid-template-columns:1fr;
    gap:40px;
    text-align:center;
}

.footer-logo{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    gap:12px;
    margin-bottom:15px;
}

.footer-logo img{
    width:90px;
    height:90px;
    object-fit:contain;
    margin:0 auto;
}

.footer-logo h2{
    font-size:24px;
    line-height:1.3;
    margin-bottom:5px;
}

.footer-logo span{
    font-size:13px;
}

.footer-about p{
    margin-top:15px;
    text-align:center;
    font-size:15px;
    line-height:1.8;
}

.footer-links{
    align-items:center;
}

.footer-contact{
    align-items:center;
}

.footer-contact li{
    justify-content:center;
    text-align:center;
}

.footer-social{
    justify-content:center;
}

.footer-bottom{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    text-align:center;
}
    /* ================= TABLE ================= */

    .training-table,
    .schedule-table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

    /* ================= IMAGE ================= */

    img,
    iframe{
        max-width:100%;
        height:auto;
    }
}


/*=========================================
            SMALL MOBILE
=========================================*/

@media(max-width:576px){

.logo-text h2{

    font-size:18px;

}

.logo-text span{

    display:none;

}

.hero-content h1{

    font-size:32px;

}

.page-banner-content h1{

    font-size:34px;

}

.btn{

    width:100%;

}

.hero-button{

    flex-direction:column;

}

.hero-card{

    display:none;

}

.contact-form{

    padding:25px;

}

.ppdb-hero{

    padding:50px 25px;

}

.ppdb-hero h2{

    font-size:34px;

}

.gallery-item img{

    height:220px;

}

.news-content{

    padding:20px;

}

.news-content h2{

    font-size:24px;

}

}



/*=========================================
            EXTRA SMALL
=========================================*/

@media(max-width:400px){

.hero-content h1{

    font-size:28px;

}

.section-header h2{

    font-size:28px;

}

.about-content h2,

.principal-content h2,

.history-content h2,

.facility-description h2{

    font-size:28px;

}

.hero-stat h3{

    font-size:28px;

}

.stat-card h3{

    font-size:30px;

}

.logo img{

    width:50px;

}

}

/*==========================================

            BACK TO TOP

==========================================*/



.back-top{

    position: fixed;

    right: 28px;

    bottom: 35px;



    width: 62px;

    height: 62px;



    border-radius: 50%;



    background: linear-gradient(135deg,#0D6EFD,#0A58CA);



    display:flex;

    justify-content:center;

    align-items:center;



    color:#fff;

    font-size:26px;



    cursor:pointer;



    box-shadow:

        0 12px 35px rgba(13,110,253,.35),

        0 5px 15px rgba(0,0,0,.12);



    opacity:0;

    visibility:hidden;



    transform:translateY(25px);



    transition:.35s ease;



    z-index:99999;

}



.back-top.show{



    opacity:1;

    visibility:visible;

    transform:translateY(0);



}



.back-top:hover{



    transform:translateY(-8px) scale(1.08);



    box-shadow:

        0 18px 40px rgba(13,110,253,.45),

        0 8px 20px rgba(0,0,0,.18);



}



.back-top:active{



    transform:scale(.95);



}



.back-top i{



    font-size:24px;

    color:#fff;



}/*==========================================
            BACK TO TOP
==========================================*/

.back-top{

    position: fixed;

    right: 18px;
    bottom: 22px;

    width: 56px;
    height: 56px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    font-size:22px;

    border:3px solid #fff;

    cursor:pointer;

    box-shadow:
        0 10px 30px rgba(13,110,253,.25),
        0 4px 12px rgba(0,0,0,.12);

    opacity:0;
    visibility:hidden;

    transform:translateY(25px);

    transition:
        opacity .35s ease,
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;

    z-index:9999;

}

.back-top.show{

    opacity:1;
    visibility:visible;

    transform:translateY(0);

}

.back-top:hover{

    background:linear-gradient(
        135deg,
        #0A58CA,
        #084298
    );

    transform:translateY(-4px) scale(1.03);

    box-shadow:
        0 15px 35px rgba(13,110,253,.35),
        0 8px 18px rgba(0,0,0,.18);

}

.back-top:active{

    transform:scale(.95);

}

.back-top i{

    color:#fff;
    font-size:22px;

}

@media(max-width:768px){

    .back-top{

        width:54px;
        height:54px;

        right:16px;
        bottom:18px;

        font-size:20px;

    }

}

/*==========================================
            NEWS CARD
==========================================*/

.news-card{

    display:flex;
    flex-direction:column;

    height:100%;

}

.news-card .card-image img{

    width:100%;
    height:240px;
    object-fit:cover;

}

.news-card .card-body{

    display:flex;
    flex-direction:column;

    flex:1;

    padding:28px;

}

.news-card h3{

    margin:15px 0 12px;

    line-height:1.4;

    min-height:60px;

}

.news-card p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

    flex:1;

}

.news-card .btn{

    margin-top:auto;

    align-self:flex-start;

    display:inline-flex;

    align-items:center;

    gap:8px;

}

/* ==================================================
   FINAL RESPONSIVE FIX
   SMP PASUNDAN LELES
   ================================================== */

/* ================================
   MOBILE HEADER
   ================================ */

@media (max-width: 768px){

    .navbar{
        width:100%;
        height:70px;
        padding:0 20px;
    }

    .logo{
        gap:10px;
        min-width:0;
    }

    .logo img{
        width:45px;
        height:45px;
        flex-shrink:0;
    }

    .logo-text{
        min-width:0;
    }

    .logo-text h2{
        font-size:17px;
        line-height:1.2;
        white-space:nowrap;
    }

    .logo-text span{
        display:none;
    }

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        width:42px;
        height:42px;
        flex-shrink:0;
        font-size:24px;
    }

    .nav-menu{
        top:70px;
        height:calc(100vh - 70px);
        width:85%;
        max-width:300px;
    }

}


/* ================================
   CONTACT MOBILE
   ================================ */

@media (max-width: 768px){

    .contact-card{
        display:grid;
        grid-template-columns:55px minmax(0, 1fr);
        column-gap:15px;
        row-gap:5px;
        width:100%;
        padding:20px;
        min-width:0;
    }

    .contact-card i{
        width:55px;
        height:55px;
        font-size:22px;
        grid-column:1;
        grid-row:1 / span 2;
    }

    .contact-card h3{
        grid-column:2;
        min-width:0;
        font-size:19px;
        margin:0;
    }

    .contact-card p{
        grid-column:2;
        min-width:0;
        margin:0;
        font-size:14px;
        line-height:1.7;

        /* Mencegah alamat/email keluar layar */
        overflow-wrap:anywhere;
        word-break:break-word;
    }

}


/* ================================
   CONTACT SECTION
   ================================ */

@media (max-width: 576px){

    .contact-card{
        padding:18px;
        column-gap:12px;
    }

    .contact-card i{
        width:48px;
        height:48px;
        font-size:20px;
    }

    .contact-card h3{
        font-size:18px;
    }

    .contact-card p{
        font-size:13px;
    }

}


/* ================================
   FACILITY MOBILE
   ================================ */

@media (max-width: 768px){

    .facility-detail{
        padding:60px 0;
    }

    .facility-detail-wrapper{
        display:flex;
        flex-direction:column;
        gap:30px;
    }

    .facility-detail-wrapper.reverse{
        direction:ltr;
    }

    .facility-detail-wrapper > *{
        width:100%;
        min-width:0;
    }

    .facility-description{
        width:100%;
    }

    .facility-description span{
        width:50px;
        height:50px;
        font-size:18px;
        margin-bottom:15px;
    }

    .facility-description h2{
        font-size:28px;
        line-height:1.3;
        margin-bottom:18px;
    }

    .facility-description p{
        font-size:15px;
        line-height:1.8;
    }

    .facility-image{
        width:100%;
        border-radius:16px;
    }

    .facility-image img{
        width:100%;
        height:auto;
        object-fit:cover;
    }

}


/* ================================
   SMALL MOBILE
   ================================ */

@media (max-width: 400px){

    .navbar{
        padding:0 15px;
    }

    .logo img{
        width:40px;
        height:40px;
    }

    .logo-text h2{
        font-size:15px;
    }

    .menu-toggle{
        width:38px;
        height:38px;
        font-size:22px;
    }

    .container{
        padding-left:15px;
        padding-right:15px;
    }

    .facility-description h2{
        font-size:25px;
    }

}

/* ==================================================
   CONTACT - MOBILE RESPONSIVE FIX
   ================================================== */

/* Kontainer informasi kontak */
.contact-info{
    width:100%;
    min-width:0;
}

/* Card kontak */
.contact-card{
    width:100%;
    max-width:100%;
    min-width:0;

    display:flex;
    align-items:flex-start;

    gap:18px;
    padding:25px;

    box-sizing:border-box;
}

/* Ikon kontak */
.contact-card i{
    width:58px;
    height:58px;

    min-width:58px;
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:24px;
}

/* Area teks */
.contact-card > div{
    flex:1;
    min-width:0;
    max-width:100%;
}

/* Judul */
.contact-card h3{
    margin:0 0 8px;
    font-size:20px;
    line-height:1.4;
}

/* Isi kontak */
.contact-card p{
    margin:0;

    max-width:100%;

    font-size:15px;
    line-height:1.7;

    color:var(--gray);

    /* Sangat penting untuk alamat/email */
    overflow-wrap:anywhere;
    word-break:break-word;
}


/* ==================================================
   CONTACT MOBILE
   ================================================== */

@media(max-width:768px){

    .contact-info{
        width:100%;
        min-width:0;
    }

    .contact-card{
        display:flex;

        width:100%;
        max-width:100%;

        padding:20px;

        gap:14px;

        box-sizing:border-box;
    }

    .contact-card i{
        width:50px;
        height:50px;

        min-width:50px;

        font-size:21px;
    }

    .contact-card > div{
        min-width:0;
        flex:1;
    }

    .contact-card h3{
        font-size:18px;
        margin-bottom:6px;
    }

    .contact-card p{
        font-size:14px;
        line-height:1.7;

        overflow-wrap:anywhere;
        word-break:break-word;
    }

}


/* ==================================================
   SMALL MOBILE
   ================================================== */

@media(max-width:576px){

    .contact-card{
        padding:18px;
        gap:12px;
    }

    .contact-card i{
        width:46px;
        height:46px;
        min-width:46px;

        font-size:19px;
    }

    .contact-card h3{
        font-size:17px;
    }

    .contact-card p{
        font-size:13px;
        line-height:1.65;
    }

}


/* ==================================================
   EXTRA SMALL MOBILE
   ================================================== */

@media(max-width:400px){

    .contact-card{
        padding:16px;
        gap:10px;
    }

    .contact-card i{
        width:42px;
        height:42px;
        min-width:42px;

        font-size:17px;
    }

    .contact-card h3{
        font-size:16px;
    }

    .contact-card p{
        font-size:12.5px;
    }

}

/* ==================================================
   PREVENT HORIZONTAL OVERFLOW
   ================================================== */

html,
body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}

.container,
.contact-container,
.contact-wrapper,
.contact-info,
.contact-card{
    max-width:100%;
}

/* ==================================================
   DETAIL EKSTRAKURIKULER - REVISI
   ================================================== */

.extra-detail {
    padding: 90px 0;
}

.extra-detail.gray {
    background: #f7f9fc;
}

/* Layout foto + teks */
.extra-detail .extra-wrapper {
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;
    gap: 60px;
}

/* Urutan terbalik untuk section PMR */
.extra-detail .extra-wrapper.reverse {
    grid-template-columns: 55% 45%;
}

/* Foto */
.extra-detail .extra-image {
    width: 100%;
    overflow: hidden;
    border-radius: 20px;
}

.extra-detail .extra-image img {
    display: block;
    width: 100%;
    height: 430px;
    object-fit: cover;
    border-radius: 20px;
}

/* Konten */
.extra-detail .extra-content {
    padding: 0;
}

.extra-detail .extra-content > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    background: var(--primary);
    color: #fff;

    border-radius: 50%;

    font-size: 20px;
    font-weight: 600;

    margin-bottom: 22px;
}

.extra-detail .extra-content h2 {
    font-size: 38px;
    font-weight: 700;
    color: var(--dark);

    margin: 0 0 20px;
}

.extra-detail .extra-content p {
    color: var(--gray);

    font-size: 17px;
    line-height: 1.9;

    text-align: left;

    margin: 0 0 25px;
}

/* List fasilitas/kegiatan */
.extra-detail .extra-content ul {
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: 13px;
}

.extra-detail .extra-content ul li {
    display: flex;
    align-items: center;
    gap: 12px;

    color: var(--dark);

    font-size: 16px;
}

.extra-detail .extra-content ul li i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    flex-shrink: 0;

    background: #e8f7ef;
    color: #15945d;

    border-radius: 50%;

    font-size: 13px;
}

/* Hover foto */
.extra-detail .extra-image img {
    transition: transform .5s ease;
}

.extra-detail .extra-image:hover img {
    transform: scale(1.03);
}


/* ==================================================
   TABLET
   ================================================== */

@media (max-width: 992px) {

    .extra-detail .extra-wrapper,
    .extra-detail .extra-wrapper.reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .extra-detail .extra-image {
        order: -1;
    }

    .extra-detail .extra-image img {
        height: 380px;
    }

    .extra-detail .extra-content h2 {
        font-size: 34px;
    }
}


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

@media (max-width: 768px) {

    .extra-detail {
        padding: 60px 0;
    }

    .extra-detail .extra-wrapper,
    .extra-detail .extra-wrapper.reverse {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .extra-detail .extra-image {
        width: 100%;
        order: -1;
    }

    .extra-detail .extra-image img {
        width: 100%;
        height: 240px;
        border-radius: 16px;
    }

    .extra-detail .extra-content {
        width: 100%;
    }

    .extra-detail .extra-content > span {
        width: 50px;
        height: 50px;

        font-size: 17px;

        margin-bottom: 16px;
    }

    .extra-detail .extra-content h2 {
        font-size: 30px;
        line-height: 1.3;
        margin-bottom: 15px;
    }

    .extra-detail .extra-content p {
        font-size: 15px;
        line-height: 1.8;

        text-align: left;

        margin-bottom: 22px;
    }

    .extra-detail .extra-content ul {
        gap: 10px;
    }

    .extra-detail .extra-content ul li {
        font-size: 14px;
        line-height: 1.5;
        align-items: flex-start;
    }

    .extra-detail .extra-content ul li i {
        width: 27px;
        height: 27px;

        flex-shrink: 0;
        margin-top: 1px;
    }
}


/* ==================================================
   SMALL MOBILE
   ================================================== */

@media (max-width: 480px) {

    .extra-detail {
        padding: 50px 0;
    }

    .extra-detail .extra-image img {
        height: 210px;
    }

    .extra-detail .extra-content h2 {
        font-size: 27px;
    }

    .extra-detail .extra-content p {
        font-size: 14px;
        line-height: 1.75;
    }

    .extra-detail .extra-content ul li {
        font-size: 13px;
    }
}

/* ==================================================
   TIMELINE - PROFIL SEKOLAH
================================================== */

.timeline {
    padding: 90px 0;
    background: #f8fafc;
}

.timeline .section-header {
    text-align: center;
    margin-bottom: 70px;
}

.timeline .section-header span {
    display: inline-block;
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.timeline .section-header h2 {
    font-size: 38px;
    color: var(--dark);
    margin: 0;
}


/* WRAPPER */

.timeline-wrapper {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}


/* GARIS TENGAH */

.timeline-wrapper::before {
    content: "";
    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 3px;

    background: #dbe7f5;

    transform: translateX(-50%);
}


/* ITEM */

.timeline-item {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;

    margin-bottom: 60px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}


/* TAHUN */

.timeline-year {
    position: absolute;

    left: 50%;
    transform: translateX(-50%);

    width: 90px;
    height: 90px;

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;

    background: var(--primary);
    color: #fff;

    border: 7px solid #f8fafc;
    border-radius: 50%;

    font-size: 16px;
    font-weight: 700;

    z-index: 2;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}


/* CARD */

.timeline-content {
    width: calc(50% - 75px);

    background: #fff;

    padding: 28px 30px;

    border-radius: 16px;

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
}


/* ITEM GANJIL */

.timeline-item:nth-child(odd) {
    justify-content: flex-start;
}


/* ITEM GENAP */

.timeline-item:nth-child(even) {
    justify-content: flex-end;
}


/* JUDUL */

.timeline-content h3 {
    font-size: 21px;
    color: var(--dark);

    margin: 0 0 10px;
}


/* PARAGRAF */

.timeline-content p {
    color: var(--gray);

    font-size: 15px;
    line-height: 1.8;

    margin: 0;

    text-align: left;
}


/* ==================================================
   TABLET & MOBILE
================================================== */

@media (max-width: 768px) {

    .timeline {
        padding: 60px 0;
    }

    .timeline .section-header {
        margin-bottom: 50px;
    }

    .timeline .section-header h2 {
        font-size: 30px;
    }


    /* Garis pindah ke kiri */

    .timeline-wrapper::before {
        left: 35px;
        transform: none;
    }


    .timeline-item,
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        display: block;

        padding-left: 90px;

        margin-bottom: 40px;
    }


    /* Tahun */

    .timeline-year {
        left: 35px;

        width: 70px;
        height: 70px;

        transform: translateX(-50%);

        border-width: 5px;

        font-size: 13px;
    }


    /* Card */

    .timeline-content {
        width: 100%;

        padding: 22px;

        border-radius: 14px;
    }


    .timeline-content h3 {
        font-size: 19px;
    }


    .timeline-content p {
        font-size: 14px;
        line-height: 1.7;
    }
}


/* ==================================================
   HP KECIL
================================================== */

@media (max-width: 480px) {

    .timeline {
        padding: 50px 0;
    }

    .timeline .section-header h2 {
        font-size: 27px;
    }

    .timeline-wrapper::before {
        left: 29px;
    }

    .timeline-item,
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        padding-left: 72px;
    }

    .timeline-year {
        left: 29px;

        width: 58px;
        height: 58px;

        font-size: 11px;
    }

    .timeline-content {
        padding: 18px;
    }

    .timeline-content h3 {
        font-size: 17px;
    }

    .timeline-content p {
        font-size: 13px;
    }
}

/* ==================================================
   RESPONSIVE CARD - BERITA & INFORMASI
================================================== */

@media (max-width: 768px) {

    /* Container agar tidak melebar keluar layar */
    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }

    /* Semua grid kartu menjadi 1 kolom */
    .news-grid,
    .berita-grid,
    .popular-grid,
    .article-grid,
    .info-grid,
    .cards-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100%;
    }

    /* Kartu */
    .news-card,
    .berita-card,
    .popular-card,
    .article-card,
    .info-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Gambar kartu */
    .news-card img,
    .berita-card img,
    .popular-card img,
    .article-card img,
    .info-card img {
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: cover;
        display: block;
    }

    /* Judul */
    .news-card h3,
    .berita-card h3,
    .popular-card h3,
    .article-card h3,
    .info-card h3 {
        font-size: 20px;
        line-height: 1.4;
        word-break: normal;
        overflow-wrap: break-word;
    }

    /* Isi */
    .news-card p,
    .berita-card p,
    .popular-card p,
    .article-card p,
    .info-card p {
        font-size: 15px;
        line-height: 1.7;
        word-break: normal;
        overflow-wrap: break-word;
    }
}

/* ==================================================
   RESPONSIVE GALERI
   SMP PASUNDAN LELES
================================================== */

/* DESKTOP */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    width: 100%;
}


/* CARD */
.gallery-card {
    width: 100%;
    min-width: 0;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    box-sizing: border-box;
}


/* GAMBAR */
.gallery-image {
    width: 100%;
    height: 230px;
    overflow: hidden;
}

.gallery-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* ISI CARD */
.gallery-content {
    padding: 25px;
    box-sizing: border-box;
}

.gallery-content h3 {
    margin: 15px 0 12px;
    font-size: 22px;
    line-height: 1.35;
    word-break: normal;
    overflow-wrap: break-word;
}

.gallery-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    word-break: normal;
    overflow-wrap: break-word;
}

.gallery-category {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 992px) {

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 25px;
    }

}


/* ==================================================
   HP
================================================== */

@media (max-width: 768px) {

    .gallery-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
        width: 100%;
    }

    .gallery-card {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .gallery-image {
        width: 100%;
        height: 210px;
    }

    .gallery-content {
        padding: 20px;
    }

    .gallery-content h3 {
        font-size: 20px;
        line-height: 1.4;
    }

    .gallery-content p {
        font-size: 14px;
        line-height: 1.7;
    }

}


/* ==================================================
   HP KECIL
================================================== */

@media (max-width: 480px) {

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gallery-image {
        height: 200px;
    }

    .gallery-content {
        padding: 18px;
    }

    .gallery-content h3 {
        font-size: 19px;
    }

    .gallery-content p {
        font-size: 14px;
    }

}

/* ==================================================
   FOOTER - LOGO & COPYRIGHT
================================================== */

.footer-col img {
    width: 150px;
    height: 150px;
    object-fit: contain;
    display: block;
    margin-bottom: 15px;
}


/* =========================================
   FOOTER BOTTOM
========================================= */

.footer-bottom {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.10);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 25px 20px 28px;
    margin: 0;
    box-sizing: border-box;
}

.footer-bottom p {
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
}

.footer-bottom .copyright {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
}

.footer-bottom .developer-info {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    line-height: 1.6;
}


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

@media (max-width: 768px) {

    .footer-bottom {
        padding: 20px 15px 24px;
    }

    .footer-bottom .copyright {
        font-size: 12px;
    }

    .footer-bottom .developer-info {
        max-width: 330px;
        margin-left: auto;
        margin-right: auto;
        font-size: 11px;
        line-height: 1.6;
    }

}

/* ==================================================
   GURU - RESPONSIVE MOBILE
================================================== */

@media (max-width: 768px) {

    /* =========================================
       HALAMAN GURU
       2 FOTO KE SAMPING
    ========================================= */

    .teacher-page .teacher-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 15px;
        width: 100%;
    }

    .teacher-page .teacher-card {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .teacher-page .teacher-image {
        width: 100%;
        height: 190px;
        overflow: hidden;
    }

    .teacher-page .teacher-image img {
        width: 100%;
        height: 190px;
        object-fit: cover;
        object-position: center top;
    }

    .teacher-page .teacher-info {
        padding: 15px 10px;
    }

    .teacher-page .teacher-info h3 {
        font-size: 15px;
        line-height: 1.4;
        margin-bottom: 5px;
    }

    .teacher-page .teacher-info h4 {
        font-size: 12px;
        line-height: 1.4;
        margin-bottom: 5px;
    }

    .teacher-page .teacher-info p {
        font-size: 11px;
        line-height: 1.5;
    }


    /* =========================================
       GURU DI HALAMAN UTAMA / INDEX
       2 FOTO KE SAMPING
    ========================================= */

    .teacher-preview .teacher-card {
        width: 100%;
        min-width: 0;
    }

    .teacher-preview .teacher-card img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        object-position: center top;
    }

    .teacher-preview .teacher-info {
        padding: 15px 10px;
    }

    .teacher-preview .teacher-info h3 {
        font-size: 15px;
        line-height: 1.4;
    }

    .teacher-preview .teacher-info h4 {
        font-size: 12px;
        line-height: 1.4;
    }

}

/* ==================================================
   RESPONSIVE KARTU GURU
   DESKTOP 4 KOLOM
   MOBILE 2 KOLOM
================================================== */

/* DESKTOP */
.teacher-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.teacher-card {
    width: 100%;
}

/* FOTO DESKTOP */
.teacher-card > img {
    width: 100%;
    height: 330px;
    display: block;
    object-fit: cover;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 992px) {

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

    .teacher-card > img {
        height: 280px;
    }

}


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

@media (max-width: 768px) {

    .teacher-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .teacher-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    .teacher-card > img {
        width: 100% !important;
        height: 180px !important;
        object-fit: cover !important;
        display: block;
    }

    .teacher-info {
        padding: 12px 8px !important;
    }

    .teacher-info h3 {
        font-size: 15px !important;
        line-height: 1.3;
        margin-bottom: 5px;
    }

    .teacher-info span {
        font-size: 11px !important;
        line-height: 1.4;
    }

    .teacher-info p {
        font-size: 11px !important;
        margin-top: 4px;
    }

}


/* ==================================================
   HP KECIL
================================================== */

@media (max-width: 480px) {

    .teacher-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .teacher-card > img {
        height: 145px !important;
    }

    .teacher-info {
        padding: 10px 5px !important;
    }

    .teacher-info h3 {
        font-size: 13px !important;
    }

    .teacher-info span {
        font-size: 10px !important;
    }

    .teacher-info p {
        font-size: 10px !important;
    }

}

/* ==================================================
   PREVIEW GURU DI INDEX.HTML
   KHUSUS HALAMAN UTAMA
================================================== */

/* DESKTOP */
.teacher-preview .teacher-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

.teacher-preview .teacher-card {
    width: 100%;
    min-width: 0;
}

.teacher-preview .teacher-card > img {
    width: 100%;
    height: 260px;
    object-fit: contain;
    background: #f5f5f5;
    display: block;
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 992px) {

    .teacher-preview .teacher-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .teacher-preview .teacher-card > img {
        height: 230px;
        object-fit: contain;
    }

}


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

@media (max-width: 768px) {

    .teacher-preview .teacher-wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .teacher-preview .teacher-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    .teacher-preview .teacher-card > img {
        width: 100% !important;
        height: 170px !important;
        object-fit: contain !important;
        background: #f5f5f5;
    }

    .teacher-preview .teacher-info {
        padding: 10px 7px !important;
    }

    .teacher-preview .teacher-info h3 {
        font-size: 14px !important;
        line-height: 1.3;
    }

    .teacher-preview .teacher-info p {
        font-size: 10px !important;
        line-height: 1.4;
    }

}


/* ==================================================
   HP KECIL
================================================== */

@media (max-width: 480px) {

    .teacher-preview .teacher-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .teacher-preview .teacher-card > img {
        height: 140px !important;
    }

    .teacher-preview .teacher-info {
        padding: 8px 5px !important;
    }

    .teacher-preview .teacher-info h3 {
        font-size: 12px !important;
    }

    .teacher-preview .teacher-info p {
        font-size: 9px !important;
    }

}

/* =========================
   PERBAIKAN VISI & MISI MOBILE
   ========================= */
@media (max-width: 768px) {

    .vision-mission,
    .visi-misi,
    .vision-card,
    .mission-card {
        padding: 30px 25px !important;
        margin-bottom: 25px !important;
        min-height: auto !important;
        height: auto !important;
    }

    .vision-mission h2,
    .visi-misi h2,
    .vision-card h2,
    .mission-card h2 {
        font-size: 32px !important;
        margin-bottom: 20px !important;
    }

    .vision-mission p,
    .visi-misi p,
    .vision-card p,
    .mission-card p {
        font-size: 18px !important;
        line-height: 1.7 !important;
        margin-bottom: 0 !important;
    }

    .vision-mission .icon,
    .visi-misi .icon,
    .vision-card .icon,
    .mission-card .icon {
        width: 100px !important;
        height: 100px !important;
        margin-bottom: 25px !important;
    }
}

@media (max-width: 768px) {

    /* Kartu Visi & Misi */
    .vision-card,
    .mission-card,
    .visi-card,
    .misi-card {
        padding: 20px 20px !important;
        margin-bottom: 18px !important;
        min-height: 0 !important;
        height: auto !important;
    }

    /* Icon */
    .vision-card .icon,
    .mission-card .icon,
    .visi-card .icon,
    .misi-card .icon {
        width: 75px !important;
        height: 75px !important;
        margin: 0 0 18px 0 !important;
    }

    /* Judul */
    .vision-card h2,
    .mission-card h2,
    .visi-card h2,
    .misi-card h2 {
        font-size: 28px !important;
        margin: 0 0 15px 0 !important;
    }

    /* Isi */
    .vision-card p,
    .mission-card p,
    .visi-card p,
    .misi-card p {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
    }

    /* List pada Misi */
    .mission-card ul,
    .misi-card ul {
        margin: 0 !important;
        padding-left: 20px !important;
    }

    .mission-card li,
    .misi-card li {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin-bottom: 8px !important;
    }
}

/* =========================================
   FIX BERITA & INFORMASI - MOBILE
   SMP PASUNDAN LELES
========================================= */

@media (max-width: 768px) {

    /* Semua grid 3 kolom menjadi 1 kolom */
    .grid-3 {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100%;
    }

    /* Semua card tidak boleh melebar */
    .grid-3 > *,
    .news-card,
    .card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Judul card */
    .card-body h3,
    .news-card h3 {
        font-size: 21px;
        line-height: 1.4;
        overflow-wrap: break-word;
        word-break: normal;
    }

    /* Isi card */
    .card-body p,
    .news-card p {
        font-size: 15px;
        line-height: 1.7;
        overflow-wrap: break-word;
    }

    /* Gambar */
    .card-image,
    .news-card .card-image {
        width: 100%;
        overflow: hidden;
    }

    .card-image img,
    .news-card .card-image img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        display: block;
    }
}


/* HP kecil */
@media (max-width: 480px) {

    .grid-3 {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .card-body {
        padding: 20px;
    }

    .card-body h3,
    .news-card h3 {
        font-size: 20px;
    }

    .card-body p,
    .news-card p {
        font-size: 14px;
    }

    .card-image img,
    .news-card .card-image img {
        height: 200px;
    }
}

/* ==================================================
   WAKIL KEPALA SEKOLAH - MOBILE
================================================== */

@media (max-width: 768px) {

    .vice-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .vice-card {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .vice-card img {
        width: 100%;
        height: 300px !important;
        object-fit: cover;
        object-position: center top;
        display: block;
    }

    .vice-content {
        padding: 18px;
    }

    .vice-content h3 {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 6px;
    }

    .vice-content span {
        font-size: 14px;
        line-height: 1.5;
    }
}


/* HP kecil */
@media (max-width: 480px) {

    .vice-card img {
        height: 250px !important;
    }

    .vice-content {
        padding: 15px;
    }

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

    .vice-content span {
        font-size: 13px;
    }
}

/* =========================================
   WAKIL KEPALA SEKOLAH - MOBILE
   FOTO TIDAK DIPOTONG
========================================= */

@media (max-width: 768px) {

    .vice-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .vice-card {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .vice-card img {
        width: 100%;
        height: 260px !important;
        object-fit: contain !important;
        object-position: center;
        display: block;
        background: #f5f5f5;
    }

    .vice-content {
        padding: 18px;
    }

    .vice-content h3 {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 6px;
    }

    .vice-content span {
        font-size: 14px;
        line-height: 1.5;
    }
}


/* HP kecil */
@media (max-width: 480px) {

    .vice-card img {
        height: 230px !important;
    }

    .vice-content {
        padding: 15px;
    }

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

    .vice-content span {
        font-size: 13px;
    }
}

/* =========================================
   GALERI SEKOLAH
========================================= */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.gallery-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.gallery-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

.gallery-content {
    padding: 20px;
}

.gallery-content h3 {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.4;
    color: #111827;
}

.gallery-content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #64748b;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 768px) {

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-top: 30px;
    }

    .gallery-card img {
        height: 220px;
    }

    .gallery-content {
        padding: 16px;
    }

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

    .gallery-content p {
        font-size: 14px;
    }
}


/* =========================================
   HP
========================================= */

@media (max-width: 480px) {

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gallery-card img {
        height: 220px;
    }

    .gallery-content {
        padding: 16px;
    }

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

    .gallery-content p {
        font-size: 14px;
    }
}

/* =========================================
   GALERI SEKOLAH
========================================= */

.gallery-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.gallery-item {
    width: 100%;
    height: 240px;
    border-radius: 16px;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 768px) {

    .gallery-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
        margin-top: 30px;
    }

    .gallery-item {
        height: 220px;
    }
}


/* =========================================
   HP
========================================= */

@media (max-width: 480px) {

    .gallery-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gallery-item {
        height: 220px;
    }
}

/* =========================================
   CONTACT INFO - MOBILE
========================================= */

@media (max-width: 480px) {

    .contact-item {
        display: flex;
        align-items: flex-start;
        gap: 18px;
    }

    .contact-item .contact-icon {
        flex-shrink: 0;
    }

    .contact-item .contact-content {
        flex: 1;
        min-width: 0;
    }

    .contact-item .contact-content h3 {
        margin: 0 0 8px;
    }

    .contact-item .contact-content p {
        margin: 0;
        line-height: 1.6;
        word-break: normal;
    }

}

@media (max-width: 480px) {

    /* Khusus item alamat */
    .contact-item:last-child {
        align-items: flex-start;
    }

    .contact-item:last-child .contact-content {
        display: block;
    }

    .contact-item:last-child .contact-content h3 {
        display: block;
        margin: 0 0 8px 0;
    }

    .contact-item:last-child .contact-content p {
        display: block;
        margin: 0;
        line-height: 1.6;
    }
}

/* =========================================
   DETAIL BERITA - GAMBAR
========================================= */

.news-detail img,
.news-content img,
.article-content img {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
    margin: 0 auto 30px;
    border-radius: 12px;
    object-fit: contain;
}


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

@media (max-width: 480px) {

    .news-detail img,
    .news-content img,
    .article-content img {
        width: 75%;
        max-width: 280px;
        max-height: 350px;
        margin: 0 auto 25px;
    }





}

@media (max-width: 480px) {

    .news-detail img:nth-of-type(2),
    .news-content img:nth-of-type(2),
    .article-content img:nth-of-type(2) {
        width: 65%;
        max-width: 250px;
        height: auto;
        max-height: 320px;
        object-fit: contain;
        display: block;
        margin: 0 auto 25px;
    }

}

/* =========================================
   IKON VISI & MISI - MOBILE
========================================= */

@media (max-width: 480px) {

    .vision-mission img,
    .vision-mission .icon,
    .vision-mission i {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

}

@media (max-width: 480px) {

    .vision-card .icon,
    .mission-card .icon {
        width: 70px;
        height: 70px;
        min-width: 70px;
        font-size: 30px;
    }

}

/* =========================================
   INFORMASI KONTAK
========================================= */

.contact-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 40px;
    margin-bottom: 60px;
}

.contact-info-card {
    display: flex;
    align-items: center;
    gap: 20px;

    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 25px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.contact-info-icon {
    width: 70px;
    height: 70px;
    min-width: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #1769ff;
    color: #ffffff;

    border-radius: 50%;
}

.contact-info-icon i {
    font-size: 28px;
}

.contact-info-content {
    min-width: 0;
}

.contact-info-content h3 {
    margin: 0 0 6px;
    font-size: 22px;
    color: #111827;
}

.contact-info-content a,
.contact-info-content p {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: #64748b;
}

.contact-info-content a {
    text-decoration: none;
}

.contact-info-content a:hover {
    color: #1769ff;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 768px) {

    .contact-info {
        grid-template-columns: 1fr;
        gap: 20px;
    }

}


/* =========================================
   HP
========================================= */

@media (max-width: 480px) {

    .contact-info {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 30px;
        margin-bottom: 45px;
    }

    .contact-info-card {
        gap: 15px;
        padding: 20px;
        align-items: flex-start;
    }

    .contact-info-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
    }

    .contact-info-icon i {
        font-size: 23px;
    }

    .contact-info-content h3 {
        font-size: 19px;
        margin-bottom: 5px;
    }

    .contact-info-content a,
    .contact-info-content p {
        font-size: 15px;
        line-height: 1.5;
    }

    /* Alamat tidak menimpa label */
    .contact-info-card:last-child {
        align-items: flex-start;
    }

    .contact-info-card:last-child .contact-info-content {
        flex: 1;
        min-width: 0;
    }

    .contact-info-card:last-child p {
        word-break: normal;
        overflow-wrap: break-word;
    }

}

/* ================================
   FOTO GURU / TENAGA KEPENDIDIKAN
================================ */

.guru-card img,
.guru-image img,
.staff-card img {
    width: 100%;
    max-width: 420px;
    height: 420px;
    object-fit: cover;
    object-position: center top;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
}

/* DESKTOP */
@media (min-width: 992px) {
    .guru-card img,
    .guru-image img,
    .staff-card img {
        max-width: 380px;
        height: 380px;
    }
}

/* TABLET */
@media (min-width: 768px) and (max-width: 991px) {
    .guru-card img,
    .guru-image img,
    .staff-card img {
        max-width: 320px;
        height: 320px;
    }
}

/* MOBILE */
@media (max-width: 767px) {
    .guru-card img,
    .guru-image img,
    .staff-card img {
        width: 85%;
        max-width: 280px;
        height: 280px;
        margin: 0 auto;
        border-radius: 10px;
    }
}

/* ==================================================
   FIX FOTO WAKIL KEPALA SEKOLAH
   DESKTOP + MOBILE
================================================== */

/* DESKTOP */
.vice-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.vice-card {
    width: 100%;
    overflow: hidden;
    background: #fff;
    border-radius: 12px;
}

.vice-card img {
    width: 100%;
    height: 280px !important;
    object-fit: contain !important;
    object-position: center;
    display: block;
    background: #f5f5f5;
}

/* TABLET */
@media (max-width: 992px) {
    .vice-card img {
        height: 260px !important;
    }
}

/* MOBILE */
@media (max-width: 768px) {

    .vice-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .vice-card img {
        width: 100%;
        height: 260px !important;
        object-fit: contain !important;
        object-position: center;
        background: #f5f5f5;
    }
}

/* HP KECIL */
@media (max-width: 480px) {

    .vice-card img {
        height: 220px !important;
    }
}

/* ==================================================
   FIX FOTO KEPALA SEKOLAH
   AGAR LEBIH KECIL & PROPORSIONAL
================================================== */

.principal-card {
    grid-template-columns: 280px 1fr;
    gap: 35px;
    padding: 30px;
}

/* Foto Kepala Sekolah */
.principal-card img {
    width: 280px !important;
    max-width: 100%;
    height: auto !important;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 14px;
}

/* Tablet */
@media (max-width: 992px) {

    .principal-card {
        grid-template-columns: 240px 1fr;
        gap: 25px;
        padding: 25px;
    }

    .principal-card img {
        width: 240px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {

    .principal-card {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 25px 20px;
        text-align: center;
    }

    .principal-card img {
        width: 220px !important;
        max-width: 80%;
        height: auto !important;
        margin: 0 auto;
    }

    .principal-info h2 {
        font-size: 28px;
    }

    .principal-info h4 {
        font-size: 16px;
    }

    .principal-info p {
        text-align: justify;
        font-size: 14px;
        line-height: 1.7;
    }
}

/* HP kecil */
@media (max-width: 480px) {

    .principal-card {
        padding: 20px 15px;
    }

    .principal-card img {
        width: 190px !important;
        max-width: 75%;
    }

    .principal-info h2 {
        font-size: 24px;
    }

    .principal-info h4 {
        font-size: 14px;
    }

    .principal-info p {
        font-size: 13px;
    }
}

/* =========================================
   FOTO KEPALA SEKOLAH - FINAL FIX
========================================= */

.principal-card > img {
    width: 280px !important;
    max-width: 280px !important;
    height: 350px !important;
    object-fit: contain !important;
    object-position: center top !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Desktop */
@media (min-width: 993px) {
    .principal-card {
        grid-template-columns: 280px 1fr !important;
        gap: 35px !important;
        align-items: center !important;
    }

    .principal-card > img {
        width: 280px !important;
        max-width: 280px !important;
        height: 350px !important;
    }
}

/* Tablet */
@media (max-width: 992px) {
    .principal-card {
        grid-template-columns: 240px 1fr !important;
        gap: 25px !important;
    }

    .principal-card > img {
        width: 240px !important;
        max-width: 240px !important;
        height: 300px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .principal-card {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    .principal-card > img {
        width: 220px !important;
        max-width: 220px !important;
        height: 280px !important;
        margin: 0 auto !important;
    }
}

/* HP kecil */
@media (max-width: 480px) {
    .principal-card > img {
        width: 190px !important;
        max-width: 190px !important;
        height: 240px !important;
    }
}

/* ==================================================
   KEPALA SEKOLAH - TAMPILAN KARTU
   FOTO DI ATAS, INFORMASI DI BAWAH
================================================== */

.principal-card {
    display: block !important;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 25px;
    text-align: center;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: var(--shadow);
}

/* FOTO KEPALA SEKOLAH */
.principal-card > img {
    width: 280px !important;
    max-width: 280px !important;
    height: 330px !important;
    object-fit: contain !important;
    object-position: center;
    display: block !important;
    margin: 0 auto 20px auto !important;
    border-radius: 12px;
    background: #f5f5f5;
}

/* INFORMASI */
.principal-info {
    width: 100%;
    text-align: center;
}

.principal-info h2 {
    font-size: 24px;
    margin-bottom: 8px;
}

.principal-info h4 {
    font-size: 16px;
    margin-bottom: 15px;
}

.principal-info p {
    font-size: 14px;
    line-height: 1.7;
    text-align: center;
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 992px) {

    .principal-card {
        max-width: 450px;
        padding: 22px;
    }

    .principal-card > img {
        width: 260px !important;
        max-width: 260px !important;
        height: 310px !important;
    }
}

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

@media (max-width: 768px) {

    .principal-card {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        padding: 20px;
    }

    .principal-card > img {
        width: 230px !important;
        max-width: 230px !important;
        height: 280px !important;
        margin-bottom: 18px !important;
    }

    .principal-info h2 {
        font-size: 22px;
    }

    .principal-info h4 {
        font-size: 15px;
    }

    .principal-info p {
        font-size: 14px;
        text-align: center;
    }
}

/* ==================================================
   HP KECIL
================================================== */

@media (max-width: 480px) {

    .principal-card {
        max-width: 340px;
        padding: 18px;
    }

    .principal-card > img {
        width: 200px !important;
        max-width: 200px !important;
        height: 245px !important;
    }

    .principal-info h2 {
        font-size: 20px;
    }

    .principal-info h4 {
        font-size: 14px;
    }

    .principal-info p {
        font-size: 13px;
    }
}

/* ==================================================
   KEPALA SEKOLAH
   DESKTOP: FOTO DI ATAS, INFORMASI DI BAWAH
================================================== */

.headmaster-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 25px !important;
}

/* Kotak foto */
.headmaster-image {
    width: 300px !important;
    max-width: 300px !important;
    margin: 0 auto !important;
}

/* Foto Kepala Sekolah */
.headmaster-image img {
    width: 300px !important;
    max-width: 300px !important;
    height: 350px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 15px !important;
}

/* Informasi di bawah foto */
.headmaster-content {
    width: 100% !important;
    max-width: 750px !important;
    text-align: center !important;
}

.headmaster-content h2 {
    margin-bottom: 10px;
}

.headmaster-content > p {
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
}

/* Informasi Jabatan, Pendidikan, Masa Jabatan */
.headmaster-info {
    display: flex !important;
    justify-content: center !important;
    gap: 50px !important;
    text-align: center !important;
    margin-top: 25px;
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 992px) {

    .headmaster-image,
    .headmaster-image img {
        width: 260px !important;
        max-width: 260px !important;
    }

    .headmaster-image img {
        height: 310px !important;
    }

    .headmaster-info {
        gap: 30px !important;
    }
}

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

@media (max-width: 768px) {

    .headmaster-wrapper {
        gap: 20px !important;
    }

    .headmaster-image,
    .headmaster-image img {
        width: 230px !important;
        max-width: 230px !important;
    }

    .headmaster-image img {
        height: 280px !important;
    }

    .headmaster-info {
        flex-direction: column !important;
        gap: 15px !important;
    }
}

/* HP KECIL */
@media (max-width: 480px) {

    .headmaster-image,
    .headmaster-image img {
        width: 200px !important;
        max-width: 200px !important;
    }

    .headmaster-image img {
        height: 245px !important;
    }
}

/* ==================================================
   BERITA TERBARU - BERANDA
   RESPONSIVE DESKTOP / TABLET / MOBILE
================================================== */

/* DESKTOP */
.news-preview .news-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 30px !important;
    width: 100%;
}

.news-preview .news-card {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
    border-radius: 16px;
}

.news-preview .news-card img {
    width: 100%;
    height: 230px;
    display: block;
    object-fit: cover;
}

.news-preview .news-content {
    padding: 22px;
    box-sizing: border-box;
}

.news-preview .news-content h3 {
    font-size: 20px;
    line-height: 1.4;
    margin: 10px 0;
    overflow-wrap: break-word;
}

.news-preview .news-content p {
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
    overflow-wrap: break-word;
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 992px) {

    .news-preview .news-wrapper {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 25px !important;
    }

    .news-preview .news-card img {
        height: 220px;
    }
}

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

@media (max-width: 768px) {

    .news-preview .news-wrapper {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .news-preview .news-card {
        width: 100%;
        max-width: 100%;
    }

    .news-preview .news-card img {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    .news-preview .news-content {
        padding: 18px;
    }

    .news-preview .news-content h3 {
        font-size: 19px;
        line-height: 1.45;
    }

    .news-preview .news-content p {
        font-size: 14px;
        line-height: 1.7;
    }
}

/* ==================================================
   HP KECIL
================================================== */

@media (max-width: 480px) {

    .news-preview .news-wrapper {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .news-preview .news-card img {
        height: 200px;
    }

    .news-preview .news-content {
        padding: 16px;
    }

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

    .news-preview .news-content p {
        font-size: 13px;
    }
}

/* =========================================
   TENTANG SEKOLAH - RESPONSIVE
========================================= */

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

.about-image img{
    width:100%;
    max-width:700px;
    height:400px;
    object-fit:cover;
}

/* Tablet */
@media (max-width: 768px){

    .about-image img{
        width:100%;
        max-width:100%;
        height:300px;
    }

}

/* HP */
@media (max-width: 480px){

    .about-image img{
        width:100%;
        max-width:100%;
        height:240px;
    }

}

/* =========================================
   IKON VISI & MISI - MOBILE
========================================= */

@media (max-width: 768px){

    .vision-card i{
        width:60px;
        height:60px;
        font-size:24px;
    }

}

/* =========================================
   WARNA SOSIAL MEDIA FOOTER
========================================= */

/* Instagram */
.footer-social a:nth-child(1) {
    background: linear-gradient(
        45deg,
        #feda75,
        #fa7e1e,
        #d62976,
        #962fbf,
        #4f5bd5
    ) !important;

    color: #fff !important;
}

/* YouTube */
.footer-social a:nth-child(2) {
    background: #FF0000 !important;
    color: #fff !important;
}

/* TikTok */
.footer-social a:nth-child(3) {
    background: #000000 !important;
    color: #fff !important;
}

/* Hover */
.footer-social a:nth-child(1):hover {
    transform: translateY(-5px);
    filter: brightness(1.1);
}

.footer-social a:nth-child(2):hover {
    transform: translateY(-5px);
    background: #cc0000 !important;
}

.footer-social a:nth-child(3):hover {
    transform: translateY(-5px);
    background: #111 !important;
}

/* =========================================
   FOTO PROFIL SEKOLAH
   AGAR TIDAK TERLALU BESAR
========================================= */

.profile-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-image img {
    width: 100%;
    max-width: 650px;
    height: 380px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border-radius: 16px;
}

/* Tablet */
@media (max-width: 992px) {
    .profile-image img {
        max-width: 550px;
        height: 330px;
    }
}

/* HP */
@media (max-width: 768px) {
    .profile-image img {
        width: 100%;
        max-width: 100%;
        height: 280px;
    }
}

/* HP kecil */
@media (max-width: 480px) {
    .profile-image img {
        height: 230px;
    }
}

/* =========================================
   STRUKTUR ORGANISASI
========================================= */

.organization-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px auto 0;
}

.organization-wrapper img {
    width: 60%;
    max-width: 750px;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 18px;
}

/* Desktop / Laptop */
@media (min-width: 992px) {
    .organization-wrapper img {
        width: 75%;
        max-width: 900px;
    }
}

/* Tablet */
@media (max-width: 991px) {
    .organization-wrapper img {
        width: 88%;
        max-width: 750px;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .organization-wrapper {
        margin-top: 20px;
    }

    .organization-wrapper img {
        width: 94%;
        max-width: 100%;
        border-radius: 12px;
    }
}