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

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

        .top-header{
            background:#ffffff;
           /*padding:12px 0;
           border-bottom:1px solid #e9ecef;*/
        }

        .logo-box{
            display:flex;
            align-items:center;
            gap:15px;
        }

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

        .site-title h2{
            margin:0;
            font-size:28px;
            font-weight:700;
            color:#1b2a4e;
        }

        .site-title p{
            margin:0;
            color:#6c757d;
            font-size:14px;
        }

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

        .navbar{
            background:linear-gradient(to right, rgba(88, 31, 55, 1), rgba(146, 60, 91, 1));
            padding:12px 0;
        }

        .navbar-nav .nav-link{
            color:#fff !important;
            font-weight:500;
            margin-right:10px;
            transition:0.3s;
            border-radius:8px;
            padding:10px 16px !important;
        }

        .navbar-nav .nav-link:hover{
            background:rgba(255,255,255,0.15);
        }

        .navbar-toggler{
            border:none;
            background:#fff;
            padding:8px 10px;
        }

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

        .hero-section{
            background:
                linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
                url('../executiveassets/images/about_v3.jpg');
            background-size:cover;
            background-position:center;
            min-height:420px;
            display:flex;
            align-items:center;
            color:#fff;
            border-radius:8px;
        }

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

        .hero-content p{
            font-size:18px;
            margin-top:15px;
            max-width:700px;
        }

        .hero-btn{
            margin-top:25px;
        }

        .hero-btn .btn{
            padding:12px 28px;
            border-radius:50px;
            font-weight:600;
        }

        /* ===== MAIN SECTION ===== */

        .main-section{
            margin-top:-60px;
            position:relative;
            z-index:10;
        }

        .card-custom{
            border:none;
            border-radius:20px;
            background:#fff;
            box-shadow:0 8px 25px rgba(0,0,0,0.08);
            overflow:hidden;
            height:100%;
        }

        .card-header-custom{
            background:linear-gradient(to right, rgba(88, 31, 55, 1), rgba(146, 60, 91, 1));
            color:#fff;
            padding:18px;
            font-size:20px;
            font-weight:600;
        }

       
        /* ===== INSTRUCTIONS ===== */

        .instruction-box{
            padding:25px;
        }

        .instruction-box h5{
            font-weight:700;
            margin-bottom:20px;
            color:#1b2a4e;
        }

        .instruction-item{
            display:flex;
            gap:15px;
            margin-bottom:20px;
            align-items:flex-start;
        }

        .instruction-icon{
            min-width:45px;
            height:45px;
            border-radius:12px;
            background:#e8efff;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#581f37;
            font-size:18px;
        }

        .instruction-content h6{
            margin-bottom:5px;
            font-weight:600;
        }

        .instruction-content p{
            margin:0;
            color:#666;
            font-size:14px;
        }

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

        footer{
            margin-top:60px;
            background:linear-gradient(to right, rgba(88, 31, 55, 1), rgba(146, 60, 91, 1));
            color:#fff;
            padding:20px 0;
            text-align:center;
        }

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

        @media(max-width:991px){

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

            .main-section{
                margin-top:30px;
            }

            .logo-box{
                flex-direction:column;
                text-align:center;
            }

            .site-title h2{
                font-size:22px;
            }
        }

        @media(max-width:576px){

            .hero-section{
                min-height:350px;
                text-align:center;
            }

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

            .hero-content p{
                font-size:15px;
            }

            .card-header-custom{
                font-size:18px;
            }

            .navbar-nav{
                padding-top:10px;
            }
        }


    /* Main Content Sections */
    .content-section {
        padding: 20px;
        border: 1px solid #ddd;
        background-color: #fff;

        overflow-y: auto;
    }
    .news-section {
        background-color: #f8f9fa;
    }
    .instructions-section {
        background-color: #e9ecef;
    }
    .video-section {
        background-color: #f8f9fa;
    }

    .scroller-container {
        width: 100%;
        overflow: hidden;
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        color: #000;
        padding: 10px 0;
        border-top: 2px solid #F8BE52;
        border-bottom: 2px solid #F8BE52;
        position: relative;

    }

    .scroller {
        display: inline-block;
        white-space: nowrap;
        padding-left: 100%;
        animation: scroll-left 60s linear infinite; /* slowed down */
    }

    .scroller span {
        display: inline-block;
        margin-right: 50px;
        font-size: 1.2rem;
        font-weight: 500;
        animation: blink 1.5s infinite alternate;
    }

    @keyframes scroll-left {
        0% {
            transform: translateX(0%);
        }
        100% {
            transform: translateX(-100%);
        }
    }

    @keyframes blink {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0.8;
        }
    }

.news-scroll-container {
    height: 500px;
    position: relative;
    overflow: hidden !important;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.news-scroll-container::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.news-scrollnew {
    animation: scrollNews 20s linear infinite;
    will-change: transform;
}

.news-scrollnew:hover {
    animation-play-state: paused;
}


@keyframes scrollNews {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

.news-item {
    background: #f8f9fc;
    border-left: 4px solid #314c8c;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
}

.news-item h6 {
    margin-bottom: 5px;
    font-weight: 600;
}

.news-date {
    display: block;
    color: #6c757d;
    font-size: 12px;
    margin-bottom: 8px;
}

.news-item p {
    margin: 0;
    font-size: 14px;
}
#newsBox,
.news-scroll-container {
    overflow-y: hidden !important;
}