@media (max-width: 768px) {

        .recruiter-area .marquee-card img {

            max-width: 500px !important;

        }

    }



    @media (max-width: 575px) {

        .recruiter-area .marquee-card img {

            max-width: 500px !important;

        }

    }



    /* Additional responsiveness and spacing fixes */

    @media (max-width: 991px) {

        .space {

            padding: 80px 0;

        }

        .about1-area .img-box1 img {

            max-width: 100%;

            height: auto;

        }

        .recruiter-area .title-area h2 {

            font-size: 2rem;

        }

        .placement-area .placement-images img {

            margin-bottom: 20px;

        }

        .placement-banner-slider .banner-slide {

            height: 400px !important;

        }

        .mousSwiperTop,
        .mousSwiperBottom {

            padding: 20px 10px;

        }

        .full-image-banner {

            height: 500px !important;

        }

        .full-image-banner .banner-text h2 {

            font-size: 1.8rem !important;

        }

        .popular-course-area-1 .table {

            font-size: 14px;

        }

        .popular-course-area-1 .table th,
        .popular-course-area-1 .table td {

            padding: 8px;

        }

        .partners-wrap1 {

            display: flex;

            flex-wrap: wrap;

            justify-content: center;

            gap: 20px;

        }

        .partners-card {

            flex: 0 0 auto;

            width: 150px;

        }

        .collab-card {

            width: 100%;

            max-width: 200px;

        }

        .why-area-3 .row {

            flex-direction: column;

        }

        .why-area-3 .col-lg-5,
        .why-area-3 .col-lg-7 {

            width: 100%;

        }

        .testi-area3 .row.gx-0.gy-4 .col-xl-8,
        .testi-area3 .row.gx-0.gy-4 .col-xl-4 {

            width: 100%;

        }

        .team-area .slider-area {

            padding: 0 10px;

        }

        .community-area-2 .row {

            flex-direction: column;

        }

        .community-area-2 .col-xl-6 {

            width: 100%;

        }

        .mentorship-area-1 .row {

            flex-direction: column;

        }

        .mentorship-area-1 .col-lg-6 {

            width: 100%;

        }

        .banner-area-1 .banner-wrap1 {

            flex-direction: column;

            text-align: center;

        }

        .banner-area-1 .banner-left-img,
        .banner-area-1 .banner-right-img {

            display: none;

        }

        .blog-arae-3 .slider-area {

            padding: 0 10px;

        }

        .contact-area-1 .row.gx-0.gy-40 .col-lg-6 {

            width: 100%;

        }

        .unique-about {

            padding: 20px;

            margin: 10px 0;

            transition: transform 0.3s ease, box-shadow 0.3s ease;

        }



        /* Tablet specific for about section spacing */

        @media (min-width: 768px) and (max-width: 991px) {

            .unique-about {

                margin: 0;

                padding: 10px;

            }

            .th-hero-wrapper.hero-1 {

                height: 40vh !important;

            }

        }



    }



    @media (max-width: 767px) {

        .space {

            padding: 60px 0;

        }

        .hero-style1 .hero-title {

            font-size: 2rem;

        }

        .counter-wrap1 {

            padding: 30px 0;

        }

        .counter-card {

            width: 100% !important;

            margin: 10px 0 !important;

        }

        .about1-area .row.gy-60 {

            gap: 30px;

        }

        .recruiter-area .row.mt-50 {

            margin-top: 30px;

        }

        .placement-area .row.mt-40 {

            margin-top: 20px;

        }

        .placement-area .row.mt-50 {

            margin-top: 30px;

        }

        .full-image-banner {

            height: 400px !important;

        }

        .full-image-banner .banner-text h2 {

            font-size: 1.5rem !important;

        }

        .popular-course-area-1 .sec-title {

            font-size: 1.8rem;

        }

        .partners-wrap1 {

            gap: 15px;

        }

        .partners-card {

            width: 120px;

        }

        .collab-card {

            max-width: 150px;

            height: 100px;

        }

        .why-area-3 .title-area h2 {

            font-size: 1.8rem;

        }

        .testi-area3 .title-area h2 {

            font-size: 1.8rem;

        }

        .team-area .title-area h2 {

            font-size: 1.8rem;

        }

        .community-area-2 .title-area h2 {

            font-size: 1.8rem;

        }

        .mentorship-area-1 .title-area h2 {

            font-size: 1.8rem;

        }

        .banner-area-1 .box-title {

            font-size: 1.8rem;

        }

        .blog-arae-3 .title-area h2 {

            font-size: 1.8rem;

        }

        .contact-area-1 .title-area h2 {

            font-size: 1.8rem;

        }

    }



    @media (max-width: 575px) {

        .space {

            padding: 50px 0;

        }

        .hero-style1 .hero-title {

            font-size: 1.8rem;

        }

        .counter-wrap1 {

            padding: 20px 0;

        }

        .about1-area .title-area h2 {

            font-size: 1.8rem;

        }

        .recruiter-area .title-area h2 {

            font-size: 1.6rem;

        }

        .placement-area .title-area h2 {

            font-size: 1.8rem;

        }

        .full-image-banner {

            height: 300px !important;

        }

        .full-image-banner .banner-text h2 {

            font-size: 1.2rem !important;

        }

        .popular-course-area-1 .sec-title {

            font-size: 1.6rem;

        }

        .partners-wrap1 {

            gap: 10px;

        }

        .partners-card {

            width: 100px;

        }

        .collab-card {

            max-width: 120px;

            height: 80px;

        }

        .why-area-3 .title-area h2 {

            font-size: 1.6rem;

        }

        .testi-area3 .title-area h2 {

            font-size: 1.6rem;

        }

        .team-area .title-area h2 {

            font-size: 1.6rem;

        }

        .community-area-2 .title-area h2 {

            font-size: 1.6rem;

        }

        .mentorship-area-1 .title-area h2 {

            font-size: 1.6rem;

        }

        .banner-area-1 .box-title {

            font-size: 1.6rem;

        }

        .blog-arae-3 .title-area h2 {

            font-size: 1.6rem;

        }

        .contact-area-1 .title-area h2 {

            font-size: 1.6rem;

        }

        .footer-widget .widget_title {

            font-size: 1.4rem;

        }

    }



    /* Hero background responsiveness */

    @media (max-width: 768px) {

        .th-hero-bg {

            background-size: contain !important;

        }

        .th-hero-wrapper {

            height: auto !important;

            min-height: 100vh;

        }

    }

    .space-bottom {

        padding-bottom: 10px !important;

    }



    @media (max-width: 991px) {

        .space-bottom {

            padding-bottom: 20px !important;

        }

    }



    /* Tablet specific responsiveness */

    @media (min-width: 768px) and (max-width: 991px) {

        .space {

            padding: 60px 0;

        }

        .hero-style1 .hero-title {

            font-size: 2.5rem;

        }

        .about1-area .title-area h2 {

            font-size: 2.2rem;

        }

        .recruiter-area .title-area h2 {

            font-size: 2.2rem;

        }

        .placement-area .title-area h2 {

            font-size: 2.2rem;

        }

        .popular-course-area-1 .sec-title {

            font-size: 2rem;

        }

        .partners-wrap1 {

            gap: 18px;

        }

        .partners-card {

            width: 140px;

        }

        .collab-card {

            max-width: 180px;

        }

        .why-area-3 .title-area h2,

        .testi-area3 .title-area h2,

        .team-area .title-area h2,

        .community-area-2 .title-area h2,

        .mentorship-area-1 .title-area h2,

        .banner-area-1 .box-title,

        .blog-arae-3 .title-area h2,

        .contact-area-1 .title-area h2 {

            font-size: 2rem;

        }

        .placement-banner-slider .banner-slide {

            height: 450px !important;

        }

        .full-image-banner {

            height: 550px !important;

        }

        .full-image-banner .banner-text h2 {

            font-size: 2rem !important;

        }

        .mousSwiperTop,
        .mousSwiperBottom {

            padding: 25px 15px;

        }

        .popular-course-area-1 .table {

            font-size: 15px;

        }

        .popular-course-area-1 .table th,
        .popular-course-area-1 .table td {

            padding: 10px;

        }

    }



    @media (max-width: 767px) {

        .space-bottom {

            padding-bottom: 20px !important;

        }

    }



    /* General responsiveness for small screens */

    @media (max-width: 768px) {

        * {

            box-sizing: border-box;

        }

        img {

            max-width: 100%;

            height: auto;

        }

        .container {

            width: 100%;

            padding-left: 15px;

            padding-right: 15px;

        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {

            line-height: 1.2;

        }

        p {

            line-height: 1.5;

        }

        .th-btn {

            font-size: 14px;

            padding: 10px 20px;

        }

        .sec-title {

            font-size: 1.8rem;

        }

        .sub-title {

            font-size: 1rem;

        }

    }



    @media (max-width: 576px) {

        .sec-title {

            font-size: 1.5rem;

        }

        .th-btn {

            font-size: 12px;

            padding: 8px 16px;

        }

        .counter-number {

            font-size: 1.5rem;

        }

    }






    /* Removed hover display for mega-box to allow click toggle */



    /* Mobile Mega Menu Styles */

    @media (max-width: 991px) {

        .mega-box {

            display: none !important;
            /* Hide desktop version on mobile */

        }



        .mobile-mega-menu {

            display: none;

            background: #fff;

            color: #fff;

            padding: 10px;

            position: absolute;

            top: 100%;

            left: 0;

            right: 0;

            z-index: 9999;

            border: 1px solid #071952;

            max-height: 60vh;

            overflow-y: auto;

        }



        .mobile-mega-menu ul {

            list-style: none;

            padding: 0;

            margin: 0;

        }



        .mobile-mega-menu li {

            border-bottom: 1px solid #071952;

        }



        .mobile-mega-menu a {

            display: block;

            padding: 12px 15px;

            color: #fff;

            text-decoration: none;

            font-weight: 600;

            font-size: 16px;

        }



        .mobile-mega-menu a:hover {

            background: #fff;

        }



        .mobile-mega-submenu {

            display: none;

            background: #fff;

            padding-left: 20px;

        }



        .mobile-mega-submenu li {

            border-bottom: 1px solid #0e0c5c;

        }



        .mobile-mega-submenu a {

            padding: 8px 15px;

            font-size: 14px;

            font-weight: 400;

        }



        /* Hide scrollbars for mobile mega menu */

        .mobile-mega-menu {

            -ms-overflow-style: none;
            /* IE and Edge */

            scrollbar-width: none;
            /* Firefox */

        }

        .mobile-mega-menu::-webkit-scrollbar {

            display: none;
            /* Chrome, Safari and Opera */

        }



        /* Hide scrollbars for the entire page on mobile */

        body {

            -ms-overflow-style: none;

            scrollbar-width: none;

        }

        body::-webkit-scrollbar {

            display: none;

        }

    }



    /* Responsive adjustments for mega menu */

    @media (max-width: 768px) {

        .mega-box {

            width: 95vw !important;

            left: 2.5vw !important;

            top: 120px !important;

        }



        .tab {

            padding: 12px !important;

            font-size: 14px !important;

        }



        .tab-content div {

            padding: 8px 0 !important;

            font-size: 14px !important;

        }

    }



    @media (max-width: 480px) {

        .mega-box {

            width: 98vw !important;

            left: 1vw !important;

            top: 130px !important;

        }



        .tab {

            padding: 10px !important;

            font-size: 13px !important;

        }



        .tab-content div {

            padding: 6px 0 !important;

            font-size: 13px !important;

        }

    }



    /* Additional responsive styles for counter section */

    @media (max-width: 768px) {

        .counter-wrap1 {

            flex-direction: column;

            align-items: center;

        }



        .counter-card {

            width: 100% !important;

            max-width: 300px !important;

            margin: 10px 0 !important;

        }



        .divider {

            display: none !important;

        }

    }



    /* Responsive banner text */

    @media (max-width: 768px) {

        .banner-text h2 {

            font-size: 2rem !important;

        }

    }



    @media (max-width: 480px) {

        .banner-text h2 {

            font-size: 1.5rem !important;

        }

    }



    /* Responsive placement section */

    @media (max-width: 768px) {

        .placement-area .row>div {

            flex: 0 0 100% !important;

            max-width: 100% !important;

        }



        .placement-big-image img,

        .placement-small-image img {

            margin-left: 0 !important;

        }

    }





    /* MAIN SECTION */
    .ct-hero-why {
        width: 100%;
        background: #cb0404;
        overflow: hidden;
    }

    /* FLEX WRAPPER */
    .ct-hero-wrapper {
        display: flex;
        min-height: 80vh;
        align-items: stretch;
    }

    /* LEFT IMAGE */
    .ct-hero-image {
        width: 40%;
        position: relative;
    }

    .ct-hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }


    /* RIGHT CONTENT */
    .ct-hero-content {
        width: 60%;
        padding: 70px 50px;
        background: #cb0404;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* LIST GRID */
    .ct-list-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 35px;
        margin-top: 25px;
    }

    /* LIST STYLE */
    .ct-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .ct-list li {
        color: #fff;
        font-size: 1.1rem;
        padding-left: 30px;
        margin-bottom: 16px;
        position: relative;
        font-weight: 600;
    }

    /* CHECK ICON */
    .ct-list li::before {
        content: "✔";
        position: absolute;
        left: 0;
        top: 2px;
        color: #ffd700;
        font-weight: bold;
    }

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

    /* TABLET */
    @media(max-width: 991px) {

        .ct-hero-wrapper {
            flex-direction: column;
        }

        .ct-hero-image,
        .ct-hero-content {
            width: 100%;
        }

        .ct-hero-image {
            height: 600px;
        }

        .ct-hero-content {
            padding: 40px 30px;
        }

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

    }

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

        .ct-hero-image {
            height: 400px;
        }

        .ct-hero-content {
            padding: 30px 20px;
        }

        .ct-list li {
            font-size: 1rem;
        }

    }



    /* Pulse Animation Keyframes */
    @keyframes pulseAnim {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.6);
        }

        70% {
            transform: scale(1.05);
            box-shadow: 0 0 0 12px rgba(13, 110, 253, 0);
        }

        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
        }
    }

    /* Apply Only On Active Tab */
    .course-tabs .nav-link.active {
        animation: pulseAnim 1.5s infinite;
        /* border-radius: 30px; */
    }






    /* ==============================
   LEGACY GRID LAYOUT
============================== */

    .legacy-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 35px;
        padding: 20px;
    }

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

    .legacy-box {
        background: transparent;
        border-radius: 24px;
        padding: 34px 22px;
        text-align: center;
        box-shadow: 0 25px 55px rgba(0, 0, 0, 0.45);
        transition: none;
        border: 3px solid rgba(252, 252, 252, 0.2);
    }

    /* ==============================
   ICON BADGE STYLE
============================== */

    .icon-badge {
        width: 80px;
        height: 80px;
        background: #fffb00;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        box-shadow: 0 8px 20px rgba(235, 200, 3, 0.4);
    }

    .icon-badge i {
        font-size: 40px;
        color: #0B1B4B;
        transition: none;
    }

    /* ==============================
   TEXT STYLE
============================== */

    .legacy-box span {
        display: block;
        font-size: 2.1rem;
        font-weight: 900;
        margin-bottom: 6px;
        color: #ffd700;
    }

    .legacy-box small {
        font-size: 19px;
        font-weight: 700;
        display: block;
        color: #f0f0f0;
    }

    .legacy-box p {
        font-size: 14px;
        color: #f0f0f0;
        margin-top: 6px;
    }

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

    @media (max-width: 768px) {

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

        .legacy-box {
            padding: 26px 16px;
        }

        .legacy-box span {
            font-size: 1.8rem;
        }
    }

    @media (max-width: 480px) {

        .legacy-box small {
            font-size: 16px;
        }

        .legacy-box p {
            font-size: 13px;
        }
    }




    /* Mobile Slider Wrapper */

    .recruiter-mobile-slider {

        display: none;

        margin-top: 35px;

    }



    /* Grid Layout */

    .mobile-logo-grid {

        display: grid;

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

        gap: 18px;

    }



    /* Logo Card */

    .logo-card {

        /* background: #f0f0f0;

  padding: 10px;

  border-radius: 16px; */

        display: flex;

        justify-content: center;

        align-items: center;

        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);

        transition: all 0.3s ease;

    }





    /* Logo Image */

    .logo-card img {

        max-width: 200px;

        max-height: 200px;

        object-fit: contain;

    }



    /* Mobile Padding */

    @media (max-width: 576px) {

        .logo-card img {

            max-width: 105px;

        }

    }



    .icon-stats {

        background: #071952;

        padding: 100px 0;

    }



    .icon-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));

        gap: 35px;

    }



    .icon-card {

        background: rgba(255, 255, 255, 0.08);

        backdrop-filter: blur(10px);

        padding: 25px 25px;

        border-radius: 22px;

        text-align: center;

        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);

        transition: 0.4s ease;

        position: relative;

    }



    /* .icon-card:hover {

  transform: translateY(-10px);

  box-shadow: 0 25px 60px rgba(0,0,0,0.25);

} */



    .icon-circle {

        width: 75px;

        height: 75px;

        background: #ffd700;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        margin: 0 auto 18px;

        font-size: 28px;

        color: #071952;

        box-shadow: 0 8px 20px rgba(200, 163, 73, 0.4);

    }



    .icon-card h3 {

        font-size: 3rem;

        font-weight: 800;

        color: #F0F0F0;

        margin-bottom: 8px;

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

    }



    .icon-card p {

        font-size: 20px;

        font-weight: bold;



        color: #F0F0F0;

    }

    /* Recruiter Card Style */

    .marquee-card {

        background: #ffffff;

        border-radius: 18px;

        padding: 20px 25px;

        min-width: 200px;

        height: 150px;

        display: flex;

        align-items: center;

        justify-content: center;

        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);

        transition: all 0.4s ease;

        position: relative;

        overflow: hidden;
        border: 2px solid #ffd700;

    }







    /* Logo Inside Card */

    .color-masking img {

        max-width: 150px;

        max-height: 150px;

        object-fit: contain;

        transition: 0.3s ease;

    }





    /* Glass Reflection Effect */

    .marquee-card::after {

        content: "";

        position: absolute;

        top: -50%;

        left: -50%;

        width: 200%;

        height: 200%;

        background: linear-gradient(120deg,

                transparent,

                rgba(255, 255, 255, 0.4),

                transparent);

        transform: rotate(25deg);

        opacity: 0;

        transition: 0.5s;

    }



    .marquee-card:hover::after {

        opacity: 1;

        left: 100%;

    }



    /* Mobile Card Style */

    .recruiter-mobile-slider img {

        background: #f0f0f0;

        padding: 15px;

        border-radius: 15px;

        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);

        transition: 0.3s ease;

    }



    .recruiter-mobile-slider img:hover {

        transform: scale(1.05);

    }



    /* Smooth Swiper */

    .recruiter-marquee .swiper-wrapper {

        transition-timing-function: linear !important;

    }






    /* ===== SECTION STYLE ===== */



    .collab-section {

        padding: 50px 00px;

        background: #071952;

    }



    /* Card Design */

    .collab-card {

        background: #F0F0F0;

        padding: 25px;

        border-radius: 14px;

        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

        display: flex;

        align-items: center;

        justify-content: center;

        height: 120px;

        transition: all 0.3s ease;

        border: #ffd700 4px solid;

    }



    .collab-card img {

        max-width: 100%;

        max-height: 80px;

        object-fit: contain;

    }







    /* ===== MOBILE: 2 LOGOS PER ROW ===== */

    @media (max-width: 576px) {



        .collab-card {

            padding: 15px;

            height: 100px;

            margin: 20px;

        }



        .collab-card img {

            max-height: 55px;

        }



        .title-area h2 {

            font-size: 1.6rem;

        }



    }





    /* Small & Extra Small Screens */

    @media (max-width: 576px) {



        .partners-wrap1 {

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

            gap: 14px;

        }



        .partners-card {

            height: 95px;

            border-radius: 10px;

        }



        .partners-card img {

            max-height: 65px;

            max-width: 100%;

            object-fit: contain;

        }



        .title-area {

            text-align: center !important;

        }



        .sec-title {

            font-size: 22px;

            line-height: 1.3;

        }



        .sec-text {

            font-size: 14px;

        }

    }






    @media (max-width: 768px) {



        .placement-images img {

            max-width: 100%;

            margin-right: 15px;

        }



        .banner-slide {

            height: 400px !important;

            background-size: contain !important;

        }

    }



    @media (max-width: 480px) {



        .banner-slide {

            height: 400px !important;

            border-radius: 10px;

            margin-right: 15px;

        }

    }



    /* ================================
   KEY FEATURES – ICON STYLE
================================ */

    .ct-keyfeatures-creative {
        padding: 100px 20px;
        color: #fff;
        position: relative;
        overflow: hidden;
        background: #071952;
    }

    /* Campus Background Logic */
    .ct-keyfeatures-creative.maqsudan {
        background: linear-gradient(135deg, #8e191b, #bb2226);
    }

    .ct-keyfeatures-creative.shahpur {
        background: linear-gradient(135deg, #243f73, #375f9c);
    }

    /* Heading */
    .keyfeatures-heading {
        text-align: center;
        font-size: 2.7rem;
        font-weight: 800;
        margin-bottom: 70px;
    }

    /* Grid */
    .keyfeatures-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 35px;
    }

    /* Feature Card */
    .keyfeature-box {
        position: relative;
        background: rgba(0, 0, 0, 0.35);
        border-radius: 24px;
        padding: 40px 26px;
        text-align: center;
        box-shadow: 0 25px 55px rgba(0, 0, 0, 0.45);
        overflow: hidden;
        transition: 0.4s ease;
    }

    /* Glow Border */
    .keyfeature-box::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 24px;
        padding: 1.5px;
        /* background: linear-gradient(120deg, #ffb3b3, #ffffff, #ffb3b3); */
        mask:
            linear-gradient(#fff 0 0) content-box,
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        opacity: 0;
        transition: 0.4s;
    }

    .keyfeature-box:hover::before {
        opacity: 1;

    }

    /* Accent Line */
    .keyfeature-box::after {
        content: "";
        position: absolute;
        top: 0;
        left: 15%;
        width: 70%;
        height: 3px;
        background: linear-gradient(90deg, transparent, #f0f0f0, transparent);
        opacity: 0.7;
    }

    /* Icon Wrapper */
    .keyfeature-icon {
        width: 72px;
        height: 72px;
        margin: 0 auto 22px;
        border-radius: 50%;
        background: #ffd700;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Icon */
    .keyfeature-icon i {
        font-size: 34px;
        color: #071952;
        transition: transform 0.3s ease;

    }

    .keyfeature-box:hover .keyfeature-icon i {
        transform: scale(1.15);
    }

    /* Title */
    .keyfeature-box span {
        display: block;
        font-size: 1.5rem;
        font-weight: 800;
        margin-bottom: 10px;
    }

    /* Text */
    .keyfeature-box p {
        font-size: 15px;
        line-height: 1.6;
        opacity: 0.9;
        color: #F0F0F0;
    }

    @media (max-width: 992px) {
        .keyfeatures-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 480px) {
        .keyfeatures-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ================================
   PREMIUM HOVER ANIMATION
================================ */

    /* Card Lift + Tilt Effect */
    .keyfeature-box:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow: 0 35px 65px rgba(0, 0, 0, 0.6);
    }

    /* Glow Border Pulse */
    .keyfeature-box:hover::before {
        opacity: 1;
        animation: glowPulse 1.8s infinite linear;
    }

    @keyframes glowPulse {
        0% {
            filter: blur(0px);
        }

        50% {
            filter: blur(1.2px);
        }

        100% {
            filter: blur(0px);
        }
    }

    /* Shine Sweep Effect */
    /* .keyfeature-box::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        120deg,
        transparent 40%,
        rgba(255,255,255,0.15),
        transparent 60%
    );
    transition: 0.6s;
    pointer-events: none;
} */

    .keyfeature-box:hover::after {
        top: 100%;
        left: 100%;
    }

    /* Icon Bounce + Rotate */
    .keyfeature-box:hover .keyfeature-icon {
        animation: iconBounce 0.6s ease;
        background: #ffd700;
    }

    @keyframes iconBounce {
        0% {
            transform: scale(1);
        }

        40% {
            transform: scale(1.25) rotate(10deg);
        }

        70% {
            transform: scale(0.95) rotate(-6deg);
        }

        100% {
            transform: scale(1);
        }
    }

    /* Icon Color Change */
    .keyfeature-box:hover .keyfeature-icon i {
        color: #071952;
    }

    /* Text Reveal Animation */
    .keyfeature-box span,
    .keyfeature-box p {
        transition: all 0.3s ease;
    }

    .keyfeature-box:hover span {
        letter-spacing: 0.5px;
    }

    .keyfeature-box:hover p {
        opacity: 1;
        transform: translateY(-3px);
    }








    .video-card {
        background: #CB0404;
        border: 14px solid #CB0404;
        /* reduced border */
        border-radius: 22px;
        overflow: hidden;
        transition: transform 0.35s ease, box-shadow 0.35s ease;
        text-align: center;
    }

    /* Control Video Height */
    .video-card video {
        width: 100%;
        height: 600px;
        /* REDUCED HEIGHT */
        object-fit: cover;
        display: block;
        border-radius: 10px;
    }










    .video-info h3 {

        margin-top: 10px;

        font-weight: bolder;

        color: #F0F0F0;

    }

    video:fullscreen {

        width: 100%;

        height: 100%;

        object-fit: contain;

        background: #000;

    }

    video:-webkit-full-screen {

        width: 100%;

        height: 100%;

        object-fit: contain;

        background: #000;

    }



    .video-info p {

        font-size: 14px;

        color: #fff;

        margin-bottom: 0;

    }

    /* Responsive Fix */

    @media (max-width: 768px) {

        .video-card video {

            height: 400px;

        }

    }



    @media (max-width: 576px) {

        .video-card {

            border-width: 12px;

            border-radius: 30px;

        }

        .video-card video {

            height: 400px;

        }

    }



    /* ========================= */
    /* SECTION WRAPPER */
    /* ========================= */
    .maqsudan-campus-section {
        background: #f0f0f0;
        padding: 80px 0;
    }

    /* Section Header */
    .campus-header {
        max-width: 900px;
        margin: 0 auto 60px;
        padding: 0 20px;
    }

    .campus-subtitle {
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 13px;
        font-weight: 600;
        color: #c62828;
    }

    .campus-title {
        color: #F0F0F0;
        font-family: 'Montserrat', sans-serif;

        font-weight: 800;

        text-transform: uppercase;

        letter-spacing: 0.5px;

        font-size: 2.5rem;
    }

    .campus-desc {
        font-size: 18px;
        color: #555;
    }

    /* ========================= */
    /* CAMPUS GRID */
    /* ========================= */
    .maqsudan-campus {
        overflow: hidden;
    }

    /* Box */
    .maqsudan-campus .box {
        height: 600px;
        background-size: cover;
        background-position: center;
        position: relative;
        overflow: hidden;
        transition: transform 0.5s ease;
    }

    .maqsudan-campus .box::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(to top,
                rgba(3, 1, 39, 0.85) 0%,
                rgba(6, 0, 32, 0.4) 40%,
                rgba(7, 0, 22, 0) 70%);
        z-index: 1;
    }



    /* Text Content */
    .maqsudan-campus .content {
        position: absolute;
        left: 10px;
        bottom: 45px;
        z-index: 2;
        color: #fff;
        max-width: 70%;

        /* border-radius: 12px; */
        overflow: hidden;
    }



    /* Heading */
    .maqsudan-campus .content h3 {
        color: #ffd700;
        font-family: 'Montserrat', sans-serif;

        font-weight: 800;

        text-transform: uppercase;

        letter-spacing: 0.5px;

        font-size: 2.5rem;
    }

    /* Paragraph */
    .maqsudan-campus .content p {
        font-size: 18px;
        line-height: 1.5;
        opacity: 0.95;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
        color: #f0f0f0;
    }




    /* Remove Bootstrap spacing issues */
    .maqsudan-campus .row,
    .maqsudan-campus .col-lg-7,
    .maqsudan-campus .col-lg-5 {
        margin: 0 !important;
        padding: 0 !important;
    }

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

        .campus-title {
            font-size: 36px;
        }

        .maqsudan-campus .box {
            height: 400px;
        }

        .maqsudan-campus .content h3 {
            font-size: 28px;
        }
    }

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

        .maqsudan-campus .box {
            height: 400px;
        }

        .maqsudan-campus .content {
            left: 25px;
            bottom: 25px;
            max-width: 90%;
        }

        .campus-desc {
            font-size: 16px;
        }
    }

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

        .campus-title {
            font-size: 28px;
        }

        .maqsudan-campus .box {
            height: 220px;
        }

        .maqsudan-campus .content h3 {
            font-size: 22px;
        }

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




    .virtual-tour-section {

        padding: 20px 20px;

        background: #f0f0f0;

    }



    /* Heading Area */



    .tour-heading {

        font-size: 42px;

        font-weight: 700;

        margin: 15px 0 10px;

    }



    .tour-subtitle {

        max-width: 700px;

        margin: auto;

        font-size: 16px;

        color: #555;

        line-height: 1.7;

    }



    .tour-badge {

        display: inline-block;

        padding: 6px 18px;

        border-radius: 30px;

        background: #CB0404;

        color: #f0f0f0;

        font-size: 14px;

        font-weight: 600;

    }



    /* Large Frame */



    .tour-frame-large {

        position: relative;

        width: 100%;

        max-width: 2000px;

        margin: auto;



        overflow: hidden;





    }



    /* Gradient Border Glow */



    /* .tour-frame-large::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: 22px;

    padding: 2px;

    background: linear-gradient(135deg,#4f46e5,#ff7a18);

    -webkit-mask: linear-gradient(#fff 0 0) content-box, 

                  linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

            mask-composite: exclude;

    pointer-events: none;

} */



    /* Iframe Size */



    .tour-frame-large iframe {

        width: 100%;

        height: 750px;



    }



    /* Responsive */



    @media (max-width: 768px) {



        .tour-heading {

            font-size: 28px;

        }



        .tour-frame-large iframe {

            height: 350px;

        }

    }






    .full-image-banner1 {

        width: 100%;

    }



    /* Banner Background */

    .banner-bg {

        width: 100%;

        aspect-ratio: 16 / 9;
        /* keeps image fully visible */

        background-image: url('../images/b1.jpeg');

        background-repeat: no-repeat;

        background-position: center;

        background-size: contain;
        /* SHOW FULL IMAGE */

    }



    /* Desktop height enhancement */

    @media (min-width: 1200px) {

        .banner-bg {

            aspect-ratio: 21 / 9;

        }

    }



    /* Mobile optimization */

    @media (max-width: 768px) {

        .banner-bg {

            aspect-ratio: 4 / 3;

        }

    }



    /* Optional overlay */

    .vignette-overlay1 {

        position: absolute;

        inset: 0;

        background: linear-gradient(to top,

                rgba(0, 0, 0, 0.25),

                rgba(0, 0, 0, 0.6));

        background: linear-gradient(to top,

                rgba(0, 0, 0, 0.25),

                rgba(0, 0, 0, 0.6));

        pointer-events: none;

    }



    /* Remove gap on small screens */

    @media (max-width: 767px) {

        .full-image-banner1 {

            margin-bottom: 0;

            margin-top: 0;

        }

    }