/* Modern homepage layer: scoped so legacy inner pages keep their existing appearance. */
.home-modern { background: #f5f8fc; color: #1d2d44; overflow: hidden; }
.home-modern * { box-sizing: border-box; }
.home-modern a:hover, .home-modern a:focus { text-decoration: none; }
.home-hero { position: relative; background: #0b3d71; }
.home-hero .carousel, .home-hero .carousel-inner, .home-hero .item { min-height: 600px;  }
.home-hero .item { background-color: #092f56; background-position: center; background-repeat: no-repeat; background-size:contain; }
.home-hero .carousel-inner > .item > .container { align-items: center; bottom: auto; display: block; left: auto; position: static; right: auto; top: auto; }
.home-hero .carousel-inner > .item:before { content: ''; display: table; }
    .home-hero .hero-one {
        background-image:  url('../images/hpbose1.png');
    }
    .home-hero .hero-two {
        background-image:  url('../images/255555.jpg');
    }
    .home-hero .hero-three {
        background-image:   url('../images/Gallery_26_09_2026.png');
    }
    .home-hero .hero-four {
        background-image:   url('../images/Pic_33.png');
    }
    .home-hero .hero-five {
        background-image:   url('../images/hpbose5.jpg');
    }
.hero-copy { color: #fff; max-width: 600px; padding: 92px 15px 74px; text-shadow: 0 2px 10px rgba(0,0,0,.22); }
.hero-eyebrow { display: inline-block; background: #f7bd2b; color: #12233a; padding: 6px 12px; border-radius: 50px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-shadow: none; text-transform: uppercase; }
.hero-copy h1 { font-size: 44px; line-height: 1.13; margin: 16px 0 14px; font-weight: 800; }
.hero-copy p { color: #fff; font-size: 18px; line-height: 1.55; max-width: 620px; }
.hero-action { display: inline-block; background: #fff; border-radius: 5px; color: #0c4b82; font-weight: 700; margin-top: 25px; padding: 12px 19px; text-shadow: none; }
.hero-action:hover { background: #f7bd2b; color: #14283f; }
.home-hero .carousel-indicators { bottom: 15px; }
.home-hero .carousel-indicators li { border: 0; height: 10px; margin: 3px; width: 10px; }
.home-hero .carousel-control { background: none; opacity: .85; width: 9%; }
.home-hero .carousel-control .fa { background: rgba(10, 31, 52, .62); border: 1px solid rgba(255,255,255,.65); border-radius: 50%; display: block; font-size: 32px; height: 48px; line-height: 43px; margin-top: -24px; position: absolute; top: 50%; width: 48px; }
.home-hero .carousel-control.left .fa { left: 50%; margin-left: -24px; }
.home-hero .carousel-control.right .fa { margin-right: -24px; right: 50%; }
.home-hero .carousel-control:hover .fa, .home-hero .carousel-control:focus .fa { background: #f7bd2b; border-color: #f7bd2b; color: #173d64; }
.quick-links { margin: -42px auto 0; position: relative; z-index: 2; }
.quick-link-grid { background: #fff; border-radius: 10px; box-shadow: 0 12px 35px rgba(19,46,74,.16); display: flex; overflow: hidden; }
.quick-link { border-right: 1px solid #e7edf4; color: #244b70; flex: 1; font-size: 14px; font-weight: 700; min-height: 96px; padding: 20px 12px; text-align: center; transition: background .2s, color .2s; }
.quick-link:last-child { border-right: 0; }
.quick-link .fa { color: #e89d0c; display: block; font-size: 25px; margin-bottom: 9px; }
.quick-link:hover { background: #0e4e84; color: #fff; }
.quick-link:hover .fa { color: #f7c54b; }
.home-section { padding: 60px 0; }
.section-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 22px; }
.section-heading h2 { color: #173d64; font-size: 26px; font-weight: 800; }
.section-heading h2:after { background: #e9a719; content: ''; display: block; height: 3px; margin-top: 8px; width: 48px; }
.section-heading a { color: #0d5a98; font-size: 13px; font-weight: 700; }
.info-card { background: #fff; border: 1px solid #e7edf3; border-radius: 10px; box-shadow: 0 6px 20px rgba(19,46,74,.06); height: 390px; overflow: hidden; }
.info-card-head { align-items: center; background: #103f6d; color: #fff; display: flex; justify-content: space-between; padding: 16px 20px; }
.info-card-head.circulars { background: #177465; }
.info-card-head h3 { font-size: 19px; font-weight: 700; }
.info-card-head .fa { color: #f7c54b; font-size: 19px; }
.notice-list { height: 327px; overflow-y: auto; }
.notice-list table { border-collapse: collapse; width: 100%; }
.notice-list td { border-bottom: 1px solid #edf1f5; padding: 13px 16px; vertical-align: top; }
.notice-list td:first-child { color: #6d7c8d; font-size: 12px; font-weight: 700; min-width: 86px; white-space: nowrap; }
.notice-list a { color: #264d72 !important; font-size: 14px; line-height: 1.4; }
.notice-list a:hover { color: #0b7d6d !important; }
.notice-list span { color: #71808d !important; display: block; font-family: Roboto, sans-serif !important; font-size: 12px !important; line-height: 1.4; margin-top: 3px; }
/*====================================================
  BOARD LEADERSHIP
====================================================*/

.leaders-section {
    background: #eaf1f8;
    padding: 55px 0;
}

/* Card */

.leader-card {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 320px;
    padding: 30px 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    transition: transform .35s ease, box-shadow .35s ease;
}

    .leader-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 45px rgba(0,0,0,.18);
    }

    /* Animated Border */

    .leader-card::before {
        content: "";
        position: absolute;
        width: 220%;
        height: 220%;
        left: -60%;
        top: -60%;
        background-image: conic-gradient( transparent 0deg, transparent 260deg, rgba(13,90,152,.15) 280deg, rgba(13,90,152,.45) 300deg, rgba(13,90,152,.75) 320deg, #0d5a98 340deg, #0d5a98 360deg );
        opacity: 0;
    }

    .leader-card:hover::before {
        opacity: 1;
        animation: rotateBorder 2s linear infinite;
    }

    /* Inner White Layer */

    .leader-card::after {
        content: "";
        position: absolute;
        inset: 4px;
        background: #fff;
        border-radius: 14px;
        z-index: 1;
    }

    /* Content */

    .leader-card img,
    .leader-card h3,
    .leader-card p {
        position: relative;
        z-index: 2;
    }

    /* Image */

    .leader-card img {
        width: 120px;
        height: 140px;
        margin: 0 0 20px;
        border-radius: 50%;
        object-fit: cover;
        border: 5px solid #edf3f8;
        transition: all .35s ease;
    }

    

    /* Name */

    .leader-card h3 {
        margin: 0 0 10px;
        color: #173d64;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.4;
    }

    /* Designation */

    .leader-card p {
        margin: 0;
        color: #6b7888;
        font-size: 14px;
        line-height: 1.6;
        font-weight: 500;
    }

/* Rotation */

@keyframes rotateBorder {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
.home-modern + .home-slider-outer, .home-modern ~ .about-cm-outer { display: none; }
@media (max-width: 767px) { .home-hero .carousel, .home-hero .carousel-inner, .home-hero .item { min-height: 360px; } .hero-copy { padding: 65px 28px 62px; } .hero-copy h1 { font-size: 31px; } .hero-copy p { font-size: 16px; } .quick-links { margin: 0; } .quick-link-grid { border-radius: 0; flex-wrap: wrap; } .quick-link { flex-basis: 50%; min-height: 90px; } .quick-link:nth-child(2) { border-right: 0; } .quick-link:nth-child(-n+2) { border-bottom: 1px solid #e7edf4; } .home-section { padding: 38px 0; } .info-card { height: 330px; margin-bottom: 25px; } .notice-list { height: 267px; } .leaders-section { padding-top: 38px; } }
/* Core Structural Blueprint Setup */
.modern-footer {
    background-image: linear-gradient(to bottom, rgba(3, 21, 50, 0.97), rgba(2, 13, 32, 0.99)), url('../images/dhauladhar.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    color: #cbd5e1 !important;
    position: relative;
    padding: 0;
    box-sizing: border-box;
}

    .modern-footer * {
        box-sizing: border-box;
    }

.footer-wave-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: linear-gradient(to right, #0284c7, #f7bd2b);
}

.footer-main-content {
    padding-top: 60px;
    padding-bottom: 30px;
}

/* Flex Container Formatter overrides for older systems */
.brand-header-flex {
    display: flex !important;
    align-items: center !important;
}

.footer-logo {
    width: 60px !important;
    height: 60px !important;
    margin-right: 15px !important;
    display: inline-block;
}

.brand-text {
    display: inline-block;
}

    .brand-text h2 {
        color: #ffffff !important;
        font-size: 24px !important;
        font-weight: 700 !important;
        margin: 0 !important;
    }

    .brand-text h3 {
        color: #94a3b8 !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        margin: 2px 0 0 0 !important;
        line-height: 1.3 !important;
    }

.tagline {
    color: #f7bd2b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    margin: 15px 0 8px 0 !important;
    letter-spacing: 0.05em;
}

.mission-statement {
    color: #94a3b8 !important;
    line-height: 1.6 !important;
    font-size: 13.5px !important;
    margin-bottom: 20px !important;
}

/* Social Icon Blocks */
.footer-social-links {
    margin-top: 15px;
}

    .footer-social-links a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        background-color: rgba(255, 255, 255, 0.05) !important;
        color: #ffffff !important;
        border-radius: 50% !important;
        font-size: 14px !important;
        margin-right: 8px !important;
        transition: all 0.2s ease-in-out !important;
        text-decoration: none !important;
    }

        .footer-social-links a:hover {
            background-color: #0284c7 !important;
            transform: translateY(-3px) !important;
        }

/* Menu Widget Underlines Styles */
.widget-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 8px !important;
    margin-bottom: 20px !important;
}

    .widget-header h4 {
        font-size: 14px !important;
        color: #ffffff !important;
        display: inline-block !important;
        margin: 0 0 0 8px !important;
        letter-spacing: 0.05em;
        font-weight: bold;
    }

.heading-icon {
    color: #f7bd2b !important;
    font-size: 14px !important;
}

/* Dynamic Navigation Links */
.link-grid {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

    .link-grid li {
        position: relative !important;
        padding-left: 14px !important;
        margin-bottom: 10px !important;
    }

        .link-grid li::before {
            content: '>' !important;
            position: absolute !important;
            left: 0 !important;
            top: 1px !important;
            color: #f7bd2b !important;
            font-size: 11px !important;
            font-weight: bold !important;
        }

        .link-grid li a {
            color: #cbd5e1 !important;
            font-size: 13.5px !important;
            transition: all 0.2s ease !important;
            text-decoration: none !important;
            display: inline-block;
        }

            .link-grid li a:hover {
                color: #ffffff !important;
                transform: translateX(3px) !important;
            }

/* Contact Specific Layout elements styles */
.contact-info-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

    .contact-info-list li {
        position: relative !important;
        padding-left: 25px !important;
        margin-bottom: 15px !important;
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }

        .contact-info-list li i {
            color: #f7bd2b !important;
            position: absolute !important;
            left: 0 !important;
            top: 3px !important;
            width: 18px !important;
            text-align: center !important;
        }

/* Dashboard Statistics Flex fallback architecture for cross versions */
.stats-row-border {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    margin-top: 40px !important;
    padding-top: 30px !important;
}

.footer-stats-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    background-color: rgba(2, 13, 32, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    padding: 20px 10px !important;
}

.stat-box {
    flex: 1 !important;
    min-width: 160px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

    .stat-box:last-child {
        border-right: none !important;
    }

    .stat-box i {
        color: #f7bd2b !important;
        font-size: 22px !important;
        margin-right: 12px !important;
    }

.stat-meta strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 14px !important;
}

.stat-meta label {
    display: block !important;
    color: #64748b !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    margin: 2px 0 0 0 !important;
}

/* Base Copyright Elements */
.footer-bottom-bar {
    background-color: #010712;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    padding: 20px 0;
}

.copyright-txt {
    font-size: 13px !important;
    color: #64748b !important;
    margin: 0 0 6px 0 !important;
}

.legal-links a {
    color: #475569 !important;
    font-size: 12.5px !important;
    text-decoration: none !important;
    margin-right: 12px !important;
    transition: color 0.2s ease !important;
}

    .legal-links a:hover {
        color: #cbd5e1 !important;
    }

.dev-container-flex {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.dev-txt {
    line-height: 1.4 !important;
    font-size: 12px !important;
    color: #64748b !important;
    margin-right: 20px !important;
    text-align: right !important;
}

    .dev-txt strong {
        color: #94a3b8 !important;
    }

/* Back to Top Feature circle handle button configuration */
.scroll-top-btn {
    background: linear-gradient(to bottom, #1e293b, #0f172a) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

    .scroll-top-btn i {
        font-size: 11px !important;
        margin-bottom: 1px !important;
    }

    .scroll-top-btn span {
        font-size: 9px !important;
        letter-spacing: 0.5px !important;
    }

    .scroll-top-btn:hover {
        background: #f7bd2b !important;
        color: #010712 !important;
        transform: translateY(-3px) !important;
    }

/* Device Specific Layout Formatter Alignments */
.text-right-desktop {
    text-align: right;
}

@media (max-width: 991px) {
    .stat-box {
        flex-basis: 33.33% !important;
        border-right: none !important;
    }
}

@media (max-width: 767px) {
    .footer-col {
        margin-bottom: 30px !important;
    }

    .stat-box {
        flex-basis: 50% !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }

    .dev-container-flex {
        justify-content: center !important;
        margin-top: 15px !important;
    }
}

@media (max-width: 480px) {
    .stat-box {
        flex-basis: 100% !important;
    }
}
/* FontAwesome v4 Alignment Layer Patch */
.stat-box .fa {
    font-size: 24px !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    display: inline-block !important;
}

.contact-info-list li .fa {
    font-size: 14px !important;
    line-height: 1.5 !important;
}
/* ==========================================================================
   HPBOSE FINAL PREMIUM FOOTER FIXES OVERRIDE LAYER
   ========================================================================== */

.modern-footer {
    background-image: linear-gradient(to bottom, rgba(3, 21, 50, 0.97), rgba(2, 13, 32, 0.99)), url('../images/dhauladhar.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    color: #cbd5e1 !important;
    position: relative;
    padding: 0;
}

/* 1. Reset Encoding & Typography Weights */
.brand-text h2 {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.brand-text h3 {
    color: #94a3b8 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

.tagline {
    color: #f7bd2b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    margin: 15px 0 8px 0 !important;
}

/* 2. Re-create Modern Circular Social Media Rings */
.footer-social-links {
    margin-top: 20px !important;
    display: block !important;
}

    .footer-social-links a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 34px !important;
        height: 34px !important;
        background-color: rgba(255, 255, 255, 0.08) !important; /* Semi-transparent white ring */
        color: #ffffff !important;
        border-radius: 50% !important;
        font-size: 14px !important;
        margin-right: 8px !important;
        transition: all 0.2s ease-in-out !important;
        text-decoration: none !important;
        float: left; /* Fallback for older layouts */
    }

        .footer-social-links a:hover {
            background-color: #0284c7 !important;
            transform: translateY(-3px) !important;
        }

/* 3. Re-align Layout Headers and Nav Bullets */
.widget-header h4 {
    font-size: 14px !important;
    color: #ffffff !important;
    display: inline-block !important;
    margin: 0 0 0 8px !important;
    font-weight: bold !important;
}

.heading-icon {
    color: #f7bd2b !important;
    font-size: 14px !important;
}

.link-grid li::before {
    content: '>' !important;
    position: absolute !important;
    left: 0 !important;
    top: 1px !important;
    color: #f7bd2b !important;
    font-size: 11px !important;
    font-weight: bold !important;
}

/* 4. Fix Counter Dashboard Bar Icon Sizing */
.footer-stats-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    background-color: rgba(2, 13, 32, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    padding: 20px 10px !important;
}

.stat-box {
    flex: 1 !important;
    min-width: 160px !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

    .stat-box:last-child {
        border-right: none !important;
    }

    /* Force clean sizing on dashboard icons */
    .stat-box .fa {
        color: #f7bd2b !important;
        font-size: 24px !important;
        margin-right: 15px !important;
        width: 30px !important;
        text-align: center !important;
        display: inline-block !important;
    }

.stat-meta strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 14px !important;
}

.stat-meta label {
    display: block !important;
    color: #64748b !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    margin: 2px 0 0 0 !important;
}
/* ==========================================================================
   HIGH-FIDELITY LUXURY BLUE FOOTER CORE CSS MODULE
   ========================================================================== */

.premium-modern-footer {
    background: linear-gradient(180deg, rgba(8, 22, 48, 0.98) 0%, rgba(3, 11, 26, 0.99) 100%);
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    color: #94a3b8 !important;
    position: relative;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

    .premium-modern-footer * {
        box-sizing: border-box;
    }

.footer-top-accent-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #0284c7 0%, #38bdf8 50%, #f59e0b 100%);
    box-shadow: 0 2px 20px rgba(56, 189, 248, 0.3);
}

.footer-interior-wrapper {
    padding-top: 75px;
    padding-bottom: 40px;
}

.layout-columns-gutter {
    margin-bottom: 50px;
}

/* Brand Identity & Descriptions layout options */
.brand-title-flex {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 18px;
}

.brand-emblem-vector {
    width: 54px !important;
    height: 54px !important;
    margin-right: 14px !important;
    object-fit: contain;
}

.brand-titles h2 {
    color: #ffffff !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    letter-spacing: -0.02em;
}

.brand-titles h3 {
    color: #64748b !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin: 2px 0 0 0 !important;
    line-height: 1.3 !important;
}

.establishment-badge {
    display: inline-flex;
    align-items: center;
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b !important;
    font-size: 11px !important;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 15px;
    letter-spacing: 0.03em;
}

.badge-accent-dot {
    width: 6px;
    height: 6px;
    background-color: #f59e0b;
    border-radius: 50%;
    margin-right: 6px;
    display: inline-block;
}

.brand-description-text {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #94a3b8 !important;
    margin-bottom: 22px !important;
}

/* Social Buttons Dock Layout */
.social-icon-dock a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #cbd5e1 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    margin-right: 8px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
}

    .social-icon-dock a:hover {
        background-color: rgba(2, 132, 199, 0.15) !important;
        border-color: #0284c7 !important;
        color: #38bdf8 !important;
        transform: translateY(-2px);
    }

/* Modernized Minimal Navigation Columns */
.column-widget-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 25px 0 !important;
}

.premium-nav-links {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

    .premium-nav-links li {
        margin-bottom: 12px !important;
    }

        .premium-nav-links li a {
            color: #94a3b8 !important;
            font-size: 13.5px !important;
            text-decoration: none !important;
            transition: all 0.2s ease !important;
            display: inline-block;
        }

            .premium-nav-links li a:hover {
                color: #38bdf8 !important;
                transform: translateX(4px);
            }

/* Premium Contact Matrix Component cards */
.premium-contact-card {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

    .premium-contact-card li {
        display: flex !important;
        align-items: flex-start !important;
        margin-bottom: 18px !important;
        font-size: 13.5px !important;
        line-height: 1.4 !important;
    }

.icon-ring {
    width: 26px !important;
    height: 26px !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

    .icon-ring i {
        color: #38bdf8 !important;
        font-size: 12px !important;
    }

.email-link-wrap a {
    color: inherit !important;
    text-decoration: none !important;
}

    .email-link-wrap a:hover {
        color: #38bdf8 !important;
    }

/* Floating Frosted Glassmorphism Analytics Counter Deck */
.glass-analytics-deck {
    display: flex !important;
    flex-wrap: wrap !important;
    background: rgba(15, 23, 42, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 14px !important;
    padding: 24px 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
}

.metric-block {
    flex: 1 !important;
    min-width: 170px !important;
    display: flex !important;
    align-items: center !important;
    padding: 5px 15px !important;
}

    .metric-block:not(:last-child) {
        border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    }

    .metric-block i {
        color: #f59e0b !important;
        font-size: 24px !important;
        margin-right: 15px !important;
    }

.metric-data h3 {
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
}

.metric-data label {
    color: #64748b !important;
    font-size: 10.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em;
    margin: 2px 0 0 0 !important;
    font-weight: 500;
}

/* Sub-footer Area and Credits */
.premium-sub-footer {
    background-color: #020710;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
    padding: 22px 0;
}

.bottom-flex-align {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
}

.copyright-legal {
    font-size: 12.5px !important;
    color: #475569 !important;
    display: block;
    margin-bottom: 6px;
}

.legal-links-inline a {
    color: #475569 !important;
    font-size: 12px !important;
    text-decoration: none !important;
    margin-right: 15px !important;
    transition: color 0.2s ease !important;
}

    .legal-links-inline a:hover {
        color: #94a3b8 !important;
    }

.control-wrapper-flex {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.dev-credits-label {
    font-size: 12px !important;
    color: #475569 !important;
    margin-right: 20px !important;
}

.white-highlight {
    color: #64748b !important;
    font-weight: 500;
}

/* Clean Minimal Scroll To Top Trigger Button */
.minimal-top-trigger {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

    .minimal-top-trigger:hover {
        background: #0284c7 !important;
        border-color: #0284c7 !important;
        transform: translateY(-2px);
    }

/* Responsive Grid Adapters overrides */
.text-right-desktop {
    text-align: right;
}

@media (max-width: 991px) {
    .metric-block {
        flex-basis: 33.33% !important;
        border-right: none !important;
        padding: 12px 10px !important;
    }
}

@media (max-width: 767px) {
    .brand-column-padding {
        margin-bottom: 40px !important;
    }

    .links-column {
        margin-bottom: 25px !important;
    }

    .metric-block {
        flex-basis: 50% !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }

    .control-wrapper-flex {
        justify-content: center !important;
        margin-top: 15px !important;
    }
}

@media (max-width: 480px) {
    .metric-block {
        flex-basis: 100% !important;
    }
}
/* ==========================================================================
   HPBOSE LATEST UPDATES UPGRADE MODULE (COMPATIBLE WITH REPEATLAYOUT="FLOW")
   ========================================================================== */

.updates-section-layer {
    background-color: #f8fafc;
    padding: 60px 0;
}

/* Header Elements Styling Layer */
.section-heading-wrapper {
    margin-bottom: 25px;
}

.heading-title-block h2 {
    color: #173d64;
    font-size: 24px;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
}

.heading-subline-accent {
    display: block;
    width: 45px;
    height: 3px;
    background-color: #e9a719;
    margin-top: 6px;
    border-radius: 2px;
}

.premium-view-all-trigger {
    color: #0d5a98;
    font-size: 13.5px;
    font-weight: 700;
    transition: all 0.2s ease;
}

    .premium-view-all-trigger i {
        font-size: 11px;
        margin-left: 6px;
        transition: transform 0.2s ease;
    }

    .premium-view-all-trigger:hover {
        color: #0b3d71;
        text-decoration: none;
    }

        .premium-view-all-trigger:hover i {
            transform: translateX(4px);
        }

/* Base Enhanced Card Architecture Layout */
.enhanced-update-card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(19, 46, 74, 0.05);
    overflow: hidden;
    position: relative;
    height: 400px; /* Locked unified height parameter */
}

/* Card Header Colors Sync to Original Mappings */
.news-accent-card .card-title-header {
    background-color: #103f6d;
}

.news-accent-card .pulse-status-beacon {
    background-color: #f7c54b;
}

.circulars-accent-card .card-title-header {
    background-color: #177465;
}

.circulars-accent-card .pulse-status-beacon {
    background-color: #10b981;
}

.card-title-header {
    padding: 16px 20px;
    color: #ffffff;
}

    .card-title-header h3 {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        display: inline-block;
    }

.header-vector-icon {
    margin-right: 8px;
    font-size: 15px;
}

/* Animated Dynamic Beacon Status Dot Indicators */
.pulse-status-beacon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    float: right;
    margin-top: 6px;
    box-shadow: 0 0 0 rgba(255, 255, 255, 0.4);
    animation: beaconPulse 2s infinite;
}

@keyframes beaconPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

/* Inner Ticker Viewport Panel Configuration */
.ticker-scroll-viewport {
    height: 334px;
    overflow-y: auto;
}

/* Individual Data Item Template Block Formatting */
.single-item-row {
    padding: 14px 20px;
    border-bottom: 1px solid #edf2f7;
    transition: all 0.2s ease-in-out;
}

    .single-item-row:hover {
        background-color: #f8fafc;
    }

/* Structured Clean Date Badge Module */
.date-badge-box {
    width: 84px;
    background-color: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 5px 4px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    color: #475569;
    flex-shrink: 0;
    margin-right: 16px;
}

.badge-txt {
    display: block;
    letter-spacing: -0.01em;
}

/* Text & Hyperlink Controls Alignment */
.notification-meta-text {
    flex-grow: 1;
}

.update-hyperlink {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: bold !important;
    color: #1f4e79 !important;
    text-decoration: none !important;
    line-height: 1.45 !important;
    transition: color 0.15s ease;
}

.news-accent-card .single-item-row:hover .update-hyperlink {
    color: #103f6d !important;
    text-decoration: underline !important;
}

.circulars-accent-card .single-item-row:hover .update-hyperlink {
    color: #177465 !important;
    text-decoration: underline !important;
}

.update-description-label {
    display: block !important;
    margin-top: 4px !important;
    color: #64748b !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: normal !important;
}

/* Custom Webkit Scrollbar elements for the Notification Deck */
.ticker-scroll-viewport::-webkit-scrollbar {
    width: 5px;
}

.ticker-scroll-viewport::-webkit-scrollbar-track {
    background: #f8fafc;
}

.ticker-scroll-viewport::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

    .ticker-scroll-viewport::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* Grid Spacing Helper Utility rule */
.layout-gutter-30 {
    margin-right: -15px;
    margin-left: -15px;
}

    .layout-gutter-30 > [class*="col-"] {
        padding-right: 15px;
        padding-left: 15px;
    }
/* ==========================================
   PREMIUM EXECUTIVE MESSAGE SECTION
========================================== */

.executive-message-section {
    background: #eaf1f8;
    padding: 70px 0;
}


.executive-message-card {
    position: relative;
    background: linear-gradient(135deg, #082f5b, #0d5a98);
    border-radius: 20px;
    min-height: 330px;
    display: flex;
    align-items: center;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(13,90,152,.25);
}


    /* Decorative circles */

    .executive-message-card:before {
        content: "";
        position: absolute;
        width: 350px;
        height: 350px;
        right: -120px;
        top: -120px;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
    }


    .executive-message-card:after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        left: -80px;
        bottom: -80px;
        border-radius: 50%;
        background: rgba(247,189,43,.12);
    }



/* Quote */

.quote-symbol {
    position: absolute;
    right: 45px;
    top: 35px;
    font-size: 70px;
    color: rgba(255,255,255,.15);
}



/* Image */

.executive-photo {
    width: 260px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}


    .executive-photo img {
        width: 170px;
        height: 170px;
        border-radius: 50%;
        object-fit: cover;
        border: 7px solid white;
        box-shadow: 0 15px 35px white;
    }



/* Text */

.executive-content {
    padding: 45px;
    color: white;
    position: relative;
    z-index: 2;
    max-width: 700px;
}


.executive-label {
    color: #f7bd2b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}


.executive-content h2 {
    color: white;
    font-size: 32px;
    font-weight: 800;
    margin: 12px 0 18px;
}


.executive-content p {
    color: rgba(255,255,255,.85);
    font-size: 16px;
    line-height: 1.8;
}


.executive-name {
    margin-top: 20px;
    border-left: 3px solid #f7bd2b;
    padding-left: 15px;
}


    .executive-name strong {
        display: block;
        font-size: 18px;
    }


    .executive-name span {
        color: #cbd5e1;
        font-size: 13px;
    }



/* Button */

.executive-read-btn {
    display: inline-block;
    margin-top: 25px;
    padding: 12px 22px;
    background: #f7bd2b;
    color: #102c4c;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    transition: .3s;
}


    .executive-read-btn:hover {
        background: white;
        color: #0d5a98;
    }



/* Mobile */

@media(max-width:767px) {

    .executive-message-card {
        display: block;
        text-align: center;
    }

    .executive-photo {
        width: 100%;
        padding-top: 35px;
    }


    .executive-content {
        padding: 30px 25px;
    }


        .executive-content h2 {
            font-size: 24px;
        }

    .executive-name {
        text-align: left;
    }
}
/* ==========================================
   MESSAGE CARD PREMIUM ANIMATION
========================================== */

.executive-message-card {
    animation: messageFloat 1s ease forwards;
    transform: translateY(40px);
    opacity: 0;
}


@keyframes messageFloat {

    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.executive-message-card {
    overflow: hidden;
}


    .executive-message-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: -120%;
        width: 60%;
        height: 100%;
        background: linear-gradient( 120deg, transparent, rgba(255,255,255,.18), transparent );
        transform: skewX(-25deg);
        animation: messageShine 5s infinite;
        z-index: 1;
    }


@keyframes messageShine {

    0% {
        left: -120%;
    }

    35%,100% {
        left: 140%;
    }
}
 
.executive-content:before {
    content: "";
    display: block;
    width: 55px;
    height: 4px;
    margin-bottom: 18px;
    border-radius: 10px;
    background: linear-gradient( 90deg, #f7bd2b, #ffe49a, #f7bd2b );
    background-size: 200%;
    animation: goldMove 3s linear infinite;
}


@keyframes goldMove {

    from {
        background-position: 0%;
    }

    to {
        background-position: 200%;
    }
}
.quote-symbol {
    animation: quoteFloat 3s ease-in-out infinite;
}


@keyframes quoteFloat {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Header + Flash Banner Layout */
.board-header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
}

/* Existing header */
.board-second-hdr {
    flex: 1;
}


.chitta-banner {
    position: relative;
    overflow: hidden;
    left:-120px;
}

    .chitta-banner:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0%;
        width: 60%;
        height: 100%;
        background: linear-gradient( 120deg, transparent, rgba(255,255,255,.8), transparent );
        animation: shine 3s infinite;
    }


@keyframes shine {

    0% {
        left: -100%;
    }

    50%,100% {
        left: 150%;
    }
}

.leader-card.active {
    transform: translateY(-8px);
    border-color: #0056b3;
    box-shadow: 0 15px 35px rgba(0,91,187,.25);
}
 

.leader-right {
    max-height: 420px;
    overflow-y: auto;
    padding: 35px;
}

.close-panel {
    position: absolute;
    right: 20px;
    top: 20px;
}

/*==========================================================
    PREMIUM LEADER DETAILS PANEL
==========================================================*/

.leader-details-panel {
    position: relative;
    display: none;
    margin: 50px auto;
    width: 100%;
    max-width: 1100px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(145deg,#ffffff,#f7fbff);
    box-shadow: 0 35px 80px rgba(0,60,120,.18);
    animation: leaderPopup .5s ease;
}

    /* Decorative Background */

    .leader-details-panel:before {
        content: "";
        position: absolute;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: rgba(13,90,152,.06);
        right: -130px;
        top: -130px;
    }

    .leader-details-panel:after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: rgba(247,189,43,.10);
        left: -100px;
        bottom: -120px;
    }


/*==========================================================
LEFT PANEL
==========================================================*/

.leader-left {
    position: relative;
    background: linear-gradient(160deg,#0d4f86,#0a3258);
    color: #fff;
    padding: 80px 45px 45px;
    text-align: center;
    overflow: hidden;
}


    .leader-left:before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: rgba(255,255,255,.06);
        top: -120px;
        right: -90px;
    }

    .leader-left:after {
        content: "";
        position: absolute;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(247,189,43,.12);
        bottom: -80px;
        left: -60px;
    }


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

    .leader-left img {
        width: 180px;
        height: 180px;
        border-radius: 50%;
        object-fit: cover;
        border: 8px solid rgba(255,255,255,.95);
        box-shadow: 0 20px 50px rgba(0,0,0,.35);
        margin: auto;
        display: block;
        position: relative;
        z-index: 2;
        transition: .45s;
    }

    .leader-left:hover img {
        transform: scale(1.06);
    }


    /*==========================================================
NAME
==========================================================*/

    .leader-left h2 {
        margin: 28px 0 8px;
        font-size: 30px;
        font-weight: 800;
        color: #fff;
        letter-spacing: .4px;
    }

    .leader-left h4 {
        color: #ffd25c;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
    }


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

    .leader-left .designation {
        display: inline-block;
        padding: 10px 24px;
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 30px;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
    }


/*==========================================================
RIGHT PANEL
==========================================================*/

.leader-right {
    background: #fff;
    padding: 55px;
    max-height: 650px;
    overflow: auto;
    position: relative;
}


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

    .leader-right h3 {
        font-size: 26px;
        color: #0d4f86;
        font-weight: 800;
        margin-bottom: 30px;
        position: relative;
    }

        .leader-right h3:after {
            content: "";
            width: 70px;
            height: 5px;
            background: linear-gradient(90deg,#0d5a98,#f7bd2b);
            display: block;
            margin-top: 12px;
            border-radius: 20px;
        }


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

    .leader-right h4 {
        color: #0d5a98;
        font-size: 18px;
        margin-top: 30px;
        margin-bottom: 12px;
        font-weight: 700;
        position: relative;
        padding-left: 18px;
    }

        .leader-right h4:before {
            content: "";
            position: absolute;
            left: 0;
            top: 3px;
            width: 6px;
            height: 22px;
            background: #f7bd2b;
            border-radius: 20px;
        }


    .leader-right p {
        color: #5e6775;
        line-height: 1.9;
        font-size: 15px;
        margin-bottom: 18px;
    }

    .leader-right ul {
        padding-left: 22px;
        margin-bottom: 22px;
    }

    .leader-right li {
        margin-bottom: 12px;
        color: #4e5d70;
        line-height: 1.8;
    }


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

    .leader-right::-webkit-scrollbar {
        width: 8px;
    }

    .leader-right::-webkit-scrollbar-thumb {
        background: #0d5a98;
        border-radius: 20px;
    }

    .leader-right::-webkit-scrollbar-track {
        background: #eef3f8;
    }


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

.close-panel {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: #0d5a98;
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    font-size: 20px;
    transition: .3s;
    cursor: pointer;
    z-index: 20;
}

    .close-panel:hover {
        background: #0d5a98;
        color: #fff;
        transform: rotate(90deg);
    }


/*==========================================================
POPUP ANIMATION
==========================================================*/

@keyframes leaderPopup {

    from {
        opacity: 0;
        transform: translateY(40px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.leader-profile {
    font-family: 'Roboto',sans-serif;
}

.leader-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}

    .leader-badges span {
        background: #0d5a98;
        color: #fff;
        padding: 8px 16px;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 600;
    }

.leader-highlight {
    background: #f7fbff;
    border-left: 5px solid #f7bd2b;
    padding: 20px;
    margin: 25px 0;
    font-size: 17px;
    font-style: italic;
    color: #444;
}

.timeline {
    border-left: 4px solid #0d5a98;
    margin-left: 20px;
    padding-left: 30px;
}

.timeline-item {
    position: relative;
    margin-bottom: 30px;
}

    .timeline-item:before {
        content: "";
        width: 16px;
        height: 16px;
        background: #f7bd2b;
        border-radius: 50%;
        position: absolute;
        left: -39px;
        top: 5px;
    }

.timeline-year {
    font-weight: 700;
    color: #0d5a98;
    font-size: 15px;
}

.timeline-title {
    font-size: 18px;
    font-weight: 700;
    margin: 5px 0;
}

.timeline-text {
    color: #666;
    line-height: 1.8;
}

.award-card {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

    .award-card i {
        font-size: 45px;
        color: #0d5a98;
        margin-bottom: 15px;
    }
/*==========================================================
IMAGE GLOW
==========================================================*/

.leader-left img {
    animation: profileGlow 5s infinite alternate;
}

@keyframes profileGlow {

    from {
        box-shadow: 0 20px 40px rgba(0,0,0,.35);
    }

    to {
        box-shadow: 0 25px 60px rgba(247,189,43,.45);
    }
}


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

@media(max-width:991px) {

    .leader-left {
        padding: 50px 30px;
    }

    .leader-right {
        padding: 35px;
    }
}

@media(max-width:767px) {

    .leader-left {
        padding: 45px 25px;
    }

        .leader-left img {
            width: 150px;
            height: 150px;
        }

        .leader-left h2 {
            font-size: 24px;
        }

    .leader-right {
        padding: 25px;
    }
}
/* Keep the long current CET/Vacancies links within their dropdown. */
.board-first-hdr ul.nav #cetVacanciesMenu > .dropdown-menu {
    min-width: 410px;
    width: max-content;
    max-width: calc(100vw - 30px);
}

.board-first-hdr ul.nav #cetVacanciesMenu > .dropdown-menu > li {
    display: block;
    width: auto;
    max-width: none;
    margin-left: 0;
}

.board-first-hdr ul.nav #cetVacanciesMenu > .dropdown-menu > li > a {
    width: auto;
    white-space: nowrap;
}

@media screen and (max-width: 479px) {
    .board-first-hdr ul.nav #cetVacanciesMenu > .dropdown-menu {
        min-width: 0;
        width: calc(100vw - 30px);
    }

.board-first-hdr ul.nav #cetVacanciesMenu > .dropdown-menu > li > a {
        white-space: normal;
    }
}

/* Lightweight CSS mountain artwork for the premium footer. */
.premium-modern-footer { overflow: hidden; }
.footer-mountain-range {
    bottom: 0;
    height: 275px;
    left: 0;
    opacity: .52;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    width: min(52vw, 760px);
    z-index: 0;
}

.footer-mountain-range:before,
.footer-mountain-range:after,
.footer-mountain-range span {
    bottom: -1px;
    content: '';
    display: block;
    position: absolute;
}

.footer-mountain-range:before {
    background: linear-gradient(135deg, #1d4d69, #0a213b);
    clip-path: polygon(0 100%, 0 66%, 18% 27%, 28% 55%, 43% 4%, 61% 56%, 76% 23%, 100% 100%);
    height: 100%;
    left: 0;
    width: 100%;
}

.footer-mountain-range:after {
    background: rgba(42, 107, 137, .76);
    clip-path: polygon(0 100%, 0 72%, 24% 39%, 40% 73%, 58% 29%, 78% 68%, 100% 39%, 100% 100%);
    height: 70%;
    left: 0;
    width: 118%;
}

.footer-mountain-range span {
    background: rgba(167, 220, 237, .7);
    clip-path: polygon(0 100%, 20% 42%, 30% 63%, 45% 5%, 56% 52%, 72% 18%, 100% 100%);
    height: 42%;
    left: 18%;
    width: 76%;
}

.footer-interior-wrapper,
.premium-sub-footer {
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 767px) {
    .footer-mountain-range {
        height: 180px;
        opacity: .35;
        width: 100%;
    }


}

/* ============================================================
   EXECUTIVE MESSAGE + YOUTUBE VIDEO
   ============================================================ */

.executive-message-section {
    padding: 70px 0;
    background: #f5f8fc;
}

.executive-message-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 35px;
    padding: 38px;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 18px 45px rgba(20, 55, 90, 0.10);
    overflow: hidden;
}

/* LEFT SIDE */

.executive-message-left {
    position: relative;
    flex: 1 1 52%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 28px;
}

.executive-photo {
    flex: 0 0 155px;
    width: 155px;
    height: 190px;
    overflow: hidden;
    border-radius: 16px;
    background: white;
    box-shadow: 0 8px 22px white;
}

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

.executive-content {
    position: relative;
    z-index: 2;
    flex: 1;
}

.executive-label {
    display: inline-block;
    margin-bottom: 8px;
    color: #2877b7;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.executive-content h2 {
    margin: 0 0 15px;
    color: #173b61;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
}

.executive-content p {
    margin: 0 0 20px;
    color: #5d6d7e;
    font-size: 15px;
    line-height: 1.8;
}

.executive-name {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
}

.executive-name strong {
    color: #173b61;
    font-size: 16px;
}

.executive-name span {
    margin-top: 3px;
    color: #718096;
    font-size: 13px;
}

.executive-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border-radius: 8px;
    background: #173b61;
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.25s ease;
}

.executive-read-btn:hover {
    background: #2877b7;
    transform: translateY(-2px);
}

.executive-read-btn i {
    font-size: 14px;
}

.quote-symbol {
    position: absolute;
    top: -8px;
    left: -8px;
    color: #FF9800;
    font-size: 75px;
    line-height: 1;
    pointer-events: none;
}


/* RIGHT SIDE - VIDEO */

.executive-video {
    flex: 0 0 46%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.executive-video-header {
    margin-bottom: 15px;
}

.executive-video-header h3 {
    margin: 0;
    color: #173b61;
    font-size: 22px;
    font-weight: 700;
}


/* YOUTUBE RESPONSIVE FRAME */

.executive-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 15px;
    background: #111827;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
}

.executive-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


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

@media (max-width: 991px) {

    .executive-message-card {
        flex-direction: column;
        padding: 30px;
    }

    .executive-message-left {
        flex: 1 1 auto;
    }

    .executive-video {
        flex: 1 1 auto;
        width: 100%;
    }

}


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

@media (max-width: 767px) {

    .executive-message-section {
        padding: 45px 0;
    }

    .executive-message-card {
        padding: 24px;
        border-radius: 16px;
        gap: 30px;
    }

    .executive-message-left {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .executive-photo {
        width: 135px;
        height: 165px;
        flex-basis: 165px;
    }

    .executive-content h2 {
        font-size: 25px;
    }

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

    .executive-video-header h3 {
        font-size: 19px;
    }

}



/* ============================================================
PREMIUM CHAIRMAN SECTION
============================================================ */

.chairman-premium-section {
    position: relative;
    padding: 95px 0 105px;
    overflow: hidden;
    background: linear-gradient( 135deg, #eef6fb 0%, #f8fbfd 48%, #ffffff 100% );
}

    /* ============================================================
BACKGROUND DECORATION
============================================================ */

    .chairman-premium-section::before {
        content: "";
        position: absolute;
        width: 650px;
        height: 650px;
        top: -350px;
        left: -250px;
        border-radius: 50%;
        background: rgba(35, 103, 150, 0.045);
    }

    .chairman-premium-section::after {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        right: -280px;
        bottom: -300px;
        border-radius: 50%;
        background: rgba(35, 103, 150, 0.035);
    }

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

.chairman-premium-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 42px;
}

.chairman-header-line {
    width: 5px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 5px;
    background: linear-gradient( 180deg, #0e5889, #49a0c9 );
}

.chairman-premium-header span {
    display: block;
    margin-bottom: 7px;
    color: #28729e;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
}

.chairman-premium-header h2 {
    margin: 0;
    color: #15334d;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.6px;
}

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

.chairman-premium-card {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 42% 58%;
    min-height: 520px;
    overflow: hidden;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 30px 70px rgba(24, 64, 91, 0.13);
}

/* ============================================================
LEFT PROFILE AREA
============================================================ */

.chairman-profile-area {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 55px 50px;
    overflow: hidden;
    background: linear-gradient( 145deg, #0e4f78 0%, #176991 55%, #2781a5 100% );
}

    /* Decorative circle */

    .chairman-profile-area::before {
        content: "";
        position: absolute;
        width: 430px;
        height: 430px;
        border-radius: 50%;
        top: -220px;
        left: -220px;
        border: 1px solid rgba(255,255,255,0.10);
    }

    .chairman-profile-area::after {
        content: "";
        position: absolute;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        right: -350px;
        bottom: -330px;
        border: 1px solid rgba(255,255,255,0.08);
    }

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

.chairman-image-container {
    position: relative;
    width: 210px;
    margin-bottom: 30px;
    z-index: 2;
}

.chairman-image-glow {
    position: absolute;
    width: 205px;
    height: 205px;
    left: -10px;
    top: -10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    filter: blur(2px);
}

.chairman-image {
    position: relative;
    display: block;
    width: 190px;
    height: 190px;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid rgba(255,255,255,0.95);
    box-shadow: 0 18px 35px rgba(0,0,0,0.22);
}

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

.chairman-image-caption {
    position: relative;
    margin-top: -15px;
    margin-left: 100px;
    width: 205px;
    padding: 13px 17px;
    border-radius: 10px;
    background: rgba(255,255,255,0.96);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

    .chairman-image-caption strong {
        display: block;
        color: #17364e;
        font-size: 14px;
        font-weight: 700;
    }

    .chairman-image-caption span {
        display: block;
        margin-top: 3px;
        color: #708396;
        font-size: 11px;
    }

/* ============================================================
QUOTE
============================================================ */

.chairman-quote {
    position: relative;
    z-index: 2;
    max-width: 380px;
    margin-top: 5px;
}

.chairman-quote-icon {
    margin-bottom: 10px;
    color: rgba(255,255,255,0.45);
    font-size: 25px;
}

.chairman-quote p {
    margin: 0;
    color: rgba(255,255,255,0.94);
    font-size: 17px;
    line-height: 1.75;
    font-weight: 400;
}

/* ============================================================
RIGHT VIDEO AREA
============================================================ */

.chairman-video-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 48px 42px;
    background: #ffffff;
}

/* ============================================================
VIDEO TOP
============================================================ */

.chairman-video-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
}

.chairman-video-label {
    display: block;
    margin-bottom: 9px;
    color: #2780aa;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
}

.chairman-video-top h3 {
    margin: 0;
    color: #17364f;
    font-size: 27px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.3px;
}

/* ============================================================
YOUTUBE ICON
============================================================ */

.chairman-video-youtube {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: #fff1f2;
    color: #df2939;
    font-size: 23px;
}

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

.chairman-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 17px;
    background: #102f46;
    box-shadow: 0 18px 35px rgba(22, 54, 76, 0.17);
}

    .chairman-video-wrapper iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

/* ============================================================
VIDEO BOTTOM
============================================================ */

.chairman-video-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 17px;
}

.chairman-video-info {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #65798b;
    font-size: 12px;
}

    .chairman-video-info i {
        color: #2377a1;
        font-size: 17px;
    }

.chairman-video-duration {
    color: #94a3af;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

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

@media (max-width: 991px) {


    .chairman-premium-section {
        padding: 70px 0 80px;
    }

    .chairman-premium-card {
        grid-template-columns: 1fr;
    }

    .chairman-profile-area {
        padding: 45px;
    }

    .chairman-video-area {
        padding: 40px;
    }
}

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

@media (max-width: 767px) {


    .chairman-premium-section {
        padding: 55px 0 65px;
    }

    .chairman-premium-header {
        margin-bottom: 30px;
    }

        .chairman-premium-header h2 {
            font-size: 29px;
        }

    .chairman-profile-area {
        align-items: center;
        padding: 40px 25px;
        text-align: center;
    }

    .chairman-image-container {
        width: 190px;
    }

    .chairman-image {
        width: 170px;
        height: 170px;
    }

    .chairman-image-glow {
        width: 185px;
        height: 185px;
    }

    .chairman-image-caption {
        margin-left: 55px;
        text-align: left;
    }

    .chairman-quote {
        max-width: 100%;
    }

        .chairman-quote p {
            font-size: 15px;
        }

    .chairman-video-area {
        padding: 32px 20px;
    }

    .chairman-video-top h3 {
        font-size: 22px;
    }

    .chairman-video-youtube {
        width: 43px;
        height: 43px;
        font-size: 19px;
    }
}

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

@media (max-width: 480px) {


    .chairman-premium-header {
        align-items: flex-start;
    }

    .chairman-header-line {
        height: 48px;
    }

    .chairman-premium-header h2 {
        font-size: 25px;
    }

    .chairman-profile-area {
        padding: 35px 18px;
    }

    .chairman-video-area {
        padding: 28px 15px;
    }

    .chairman-video-top {
        gap: 10px;
    }

        .chairman-video-top h3 {
            font-size: 19px;
        }
}

/* ============================================================
HPBOSE PREMIUM PHOTO GALLERY
============================================================ */

.hpbose-gallery-section {
    position: relative;
    padding: 90px 0 100px;
    background: #ffffff;
    overflow: hidden;
}

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

.hpbose-gallery-header {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 38px;
}

.hpbose-gallery-title {
    max-width: 700px;
}

.hpbose-gallery-overline {
    display: block;
    margin-bottom: 9px;
    color: #24749c;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.3px;
}

.hpbose-gallery-title h2 {
    margin: 0;
    color: #17364f;
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.hpbose-gallery-title p {
    margin: 11px 0 0;
    color: #718392;
    font-size: 14px;
    line-height: 1.7;
}

/* ============================================================
VIEW ALL BUTTON
============================================================ */

.hpbose-gallery-view-all {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding: 12px 18px;
    border: 1px solid #dce7ee;
    border-radius: 30px;
    background: #ffffff;
    color: #17668f;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

    .hpbose-gallery-view-all i {
        font-size: 12px;
        transition: transform 0.25s ease;
    }

    .hpbose-gallery-view-all:hover,
    .hpbose-gallery-view-all:focus {
        background: #17668f;
        border-color: #17668f;
        color: #ffffff;
        text-decoration: none;
        transform: translateY(-2px);
    }

        .hpbose-gallery-view-all:hover i {
            transform: translateX(4px);
        }

/* ============================================================
GALLERY LAYOUT
============================================================ */

.hpbose-gallery-layout {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 250px 250px;
    gap: 14px;
    width: 100%;
}

/* ============================================================
ALL GALLERY ITEMS
============================================================ */

.hpbose-gallery-featured,
.hpbose-gallery-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 14px;
    background: #e8eef2;
    text-decoration: none;
}

    .hpbose-gallery-featured img,
    .hpbose-gallery-item img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
    }

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

.hpbose-gallery-featured {
    grid-row: 1 / span 2;
    min-height: 514px;
}

    .hpbose-gallery-featured img {
        object-position: center center;
    }

/* ============================================================
FEATURED OVERLAY
============================================================ */

.hpbose-gallery-image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 25px;
    background: linear-gradient( to top, rgba(5, 27, 43, 0.82) 0%, rgba(5, 27, 43, 0.30) 45%, rgba(5, 27, 43, 0.00) 75% );
    color: #ffffff;
}

.hpbose-gallery-featured-text span {
    display: block;
    margin-bottom: 5px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.8px;
    opacity: 0.82;
}

.hpbose-gallery-featured-text strong {
    display: block;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
}

/* ============================================================
OPEN ICON
============================================================ */

.hpbose-gallery-open {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.94);
    color: #17668f;
    font-size: 15px;
    transition: transform 0.3s ease, background 0.3s ease;
}

/* ============================================================
SMALL GALLERY ITEMS
============================================================ */

.hpbose-gallery-item {
    min-height: 0;
}

.hpbose-gallery-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 51, 76, 0.50);
    color: #ffffff;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    .hpbose-gallery-hover i {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(255,255,255,0.94);
        color: #17668f;
        font-size: 14px;
        transform: scale(0.7);
        transition: transform 0.3s ease;
    }

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

.hpbose-gallery-featured:hover img,
.hpbose-gallery-item:hover img {
    transform: scale(1.06);
}

.hpbose-gallery-featured:hover .hpbose-gallery-open {
    transform: scale(1.08);
}

.hpbose-gallery-item:hover .hpbose-gallery-hover {
    opacity: 1;
}

    .hpbose-gallery-item:hover .hpbose-gallery-hover i {
        transform: scale(1);
    }

/* ============================================================
KEYBOARD ACCESSIBILITY
============================================================ */

.hpbose-gallery-featured:focus-visible,
.hpbose-gallery-item:focus-visible,
.hpbose-gallery-view-all:focus-visible {
    outline: 3px solid rgba(23,102,143,0.35);
    outline-offset: 3px;
}

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

@media (max-width: 991px) {


    .hpbose-gallery-section {
        padding: 70px 0 80px;
    }

    .hpbose-gallery-layout {
        grid-template-columns: 2fr 1fr;
        grid-template-rows: 240px 240px 240px;
    }

    .hpbose-gallery-featured {
        grid-row: 1 / span 2;
    }
}

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

@media (max-width: 767px) {


    .hpbose-gallery-section {
        padding: 55px 0 65px;
    }

    .hpbose-gallery-header {
        align-items: flex-start;
        flex-direction: column;
        margin-bottom: 28px;
    }

    .hpbose-gallery-title h2 {
        font-size: 29px;
    }

    .hpbose-gallery-view-all {
        padding: 10px 16px;
    }

    .hpbose-gallery-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 270px 180px 180px;
    }

    .hpbose-gallery-featured {
        grid-column: 1 / span 2;
        grid-row: auto;
        min-height: 0;
    }
}

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

@media (max-width: 480px) {


    .hpbose-gallery-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 280px 200px 200px 200px 200px;
    }

    .hpbose-gallery-featured {
        grid-column: auto;
    }

    .hpbose-gallery-title h2 {
        font-size: 26px;
    }

    .hpbose-gallery-featured-text strong {
        font-size: 17px;
    }
}