/* ================= HEADER ================= */
.header-container{
    background:#f5f7fb !important;
    padding:3px 3px;
    box-shadow: 0 5px 7px rgba(0,0,0,.25),
                0 2px 8px rgba(0,0,0,.15);
}

.header-wrapper{
    background: linear-gradient(
        180deg,
        #02140f 0%,
        #0b6b45 35%,
        #0f8a5c 70%,
        #1a3f8b 100%
    );

    position: relative;
    overflow: hidden;

    box-shadow: 0 5px 7px rgba(0,0,0,.25),
                0 2px 8px rgba(0,0,0,.15);
}

/* ================= GLOW EFFECT ================= */
.header-wrapper::before{
    content:"";
    position:absolute;
    top:-150px;
    right:-150px;

    width:380px;
    height:380px;

    background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
    border-radius:50%;
    filter: blur(2px);
    pointer-events:none;
}

/* ================= BISMILLAH ================= */
.bismillah{
    background: rgba(255,255,255,.12);
    padding: 8px 14px;

    font-size: 18px;
    font-weight: 700;
    color: #7fff00;

    text-align:center;
    border-radius: 8px;

    letter-spacing: .5px;
}

/* ================= LOGO AREA ================= */
.logo-area{
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

/* LOGO BOX */
.logo-box{
    display:inline-block;
    padding:4px;
    background:rgba(255,255,255,.15);
    border-radius:50%;
}

/* LOGO IMAGE */
.logo-img{
    width:135px;
    height:auto;
    object-fit:cover;
    border-radius:50%;
    transition: .3s ease;
}

.logo-img:hover{
    transform: scale(1.05) rotate(2deg);
}

/* ================= TITLE ================= */
.site-title h1{
    color:#fff;
    font-size:2rem;
    font-weight:900;
    margin:0;
}

.site-title h3{
    color:#ffe082;
    font-size:20px;
    font-weight:600;
    margin:6px 0;
}

.site-title h4{
    color:#f1f1f1;
    font-size:14px;
    margin:0;
    line-height:1.6;
}

/* ================= DESCRIPTION ================= */
.school-desc{
    color:#e8f5e9;
    font-size:14px;
    margin-top:2px;
}

/* ================= SOCIAL ================= */
.social-all{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.social-icon{
    width:38px;
    height:38px;

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

    border-radius:50%;
    color:#fff;
    font-size:18px;

    transition: .25s ease;
}

.social-icon:hover{
    transform: translateY(-3px) scale(1.05);
    filter: brightness(1.1);
}

/* COLORS */
.facebook{background:#1877f2;}
.youtube{background:#ff0000;}
.twitter{background:#1da1f2;}
.instagram{background:linear-gradient(45deg,#f09433,#bc1888);}
.linkedin{background:#0077b5;}
.whatsapp{background:#25d366;}
.email{background:#6c757d;}

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

    /* TITLE */
    .site-title h1{
        font-size:1.4rem;
    }

    .site-title h4{
        font-size:12px;
    }

    /* LOGO CENTER */
    .logo-area{
        justify-content:center;
    }

    .logo-img{
        width:125px;
        height:auto;
    }

    /* SOCIAL ICON */
    .social-icon{
        width:34px;
        height:34px;
        font-size:16px;
    }

    /* STACK LAYOUT */
    .header-wrapper .row{
        flex-direction:column;
        text-align:center;
    }

    /* SOCIAL POSITION */
    .social-all{
        order:-1;
        margin:8px 0;
    }

    /* LOGO BOX SPACING */
    .logo-box{
        margin-top:5px;
    }

    /* HIDE MOBILE EXTRA INFO */
    .school-name-en,
    .school-desc{
        display:none !important;
    }
}