/* =====================================================
           GENERAL
        ====================================================== */

        * {
            box-sizing: border-box;
        }

        body {

            margin: 0;

            font-family: "Cairo", sans-serif;

            background:
                linear-gradient(
                    180deg,
                    #f4f7fb 0%,
                    #ffffff 100%
                );

            color: #172b4d;

        }


        /* =====================================================
           TOP BAR
        ====================================================== */

        .top-bar {

            background: #062b55;

            color: white;

            font-size: 13px;

            padding: 8px 0;

        }

        .top-bar .container {

            display: flex;

            justify-content: space-between;

            align-items: center;

        }

        .top-info {

            display: flex;

            gap: 25px;

        }

        .top-info span {

            display: flex;

            align-items: center;

            gap: 6px;

        }


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

        .main-navbar {

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

            box-shadow:
                0 4px 25px rgba(0,0,0,.06);

            position: sticky;

            top: 0;

            z-index: 1000;

            backdrop-filter: blur(10px);

        }

        .navbar-brand {

            display: flex;

            align-items: center;

            gap: 12px;

            font-weight: 800;

            color: #062b55 !important;

        }

        .univ-logo {

            width: 55px;

            height: 55px;

            border-radius: 50%;

            object-fit: cover;

        }

        .brand-title {

            line-height: 1.3;

        }

        .brand-title small {

            display: block;

            color: #68758a;

            font-size: 11px;

            font-weight: 600;

        }

        .nav-link {

            color: #243b5a !important;

            font-weight: 600;

            margin: 0 5px;

            transition: .25s;

        }

        .nav-link:hover {

            color: #0d6efd !important;

        }

        .btn-login {

            background: #0d6efd;

            color: white;

            border-radius: 10px;

            padding: 9px 20px;

            font-weight: 700;

            border: none;

        }

        .btn-login:hover {

            background: #084db3;

            color: white;

        }


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

        .hero {

            position: relative;

            overflow: hidden;

            background:
                linear-gradient(
                    135deg,
                    #062b55,
                    #07519b
                );

            min-height: 470px;

            display: flex;

            align-items: center;

            color: white;

        }

        .hero::before {

            content: "";

            position: absolute;

            width: 500px;

            height: 500px;

            border-radius: 50%;

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

            top: -250px;

            left: -100px;

        }

        .hero::after {

            content: "";

            position: absolute;

            width: 350px;

            height: 350px;

            border-radius: 50%;

            background: rgba(255,193,7,.10);

            bottom: -200px;

            right: -100px;

        }

        .hero-content {

            position: relative;

            z-index: 2;

        }

        .hero-badge {

            display: inline-flex;

            align-items: center;

            gap: 8px;

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

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

            padding: 8px 18px;

            border-radius: 50px;

            margin-bottom: 20px;

            font-size: 14px;

        }

        .hero h1 {

            font-size: clamp(30px, 5vw, 52px);

            font-weight: 800;

            line-height: 1.35;

            margin-bottom: 20px;

        }

        .hero h1 span {

            color: #ffc107;

        }

        .hero p {

            font-size: 17px;

            line-height: 2;

            color: rgba(255,255,255,.88);

            max-width: 750px;

        }

        .hero-buttons {

            display: flex;

            gap: 12px;

            flex-wrap: wrap;

            margin-top: 30px;

        }

        .btn-hero-primary {

            background: #ffc107;

            color: #172b4d;

            padding: 12px 25px;

            border-radius: 12px;

            font-weight: 800;

            border: none;

        }

        .btn-hero-primary:hover {

            background: #ffca2c;

            color: #172b4d;

        }

        .btn-hero-outline {

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

            color: white;

            padding: 12px 25px;

            border-radius: 12px;

            font-weight: 700;

        }

        .btn-hero-outline:hover {

            background: white;

            color: #062b55;

        }


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

        .hero-stats {

            margin-top: 40px;

            display: flex;

            gap: 35px;

            flex-wrap: wrap;

        }

        .hero-stat strong {

            display: block;

            font-size: 25px;

            color: #ffc107;

        }

        .hero-stat span {

            font-size: 12px;

            color: rgba(255,255,255,.75);

        }


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

        .section {

            padding: 80px 0;

        }

        .section-header {

            text-align: center;

            margin-bottom: 45px;

        }

        .section-label {

            color: #0d6efd;

            font-weight: 800;

            font-size: 14px;

            margin-bottom: 10px;

        }

        .section-title {

            font-size: 32px;

            font-weight: 800;

            color: #062b55;

        }

        .section-description {

            color: #6c7a90;

            max-width: 700px;

            margin: 10px auto;

            line-height: 1.9;

        }


        /* =====================================================
           OPERATION CARDS
        ====================================================== */

        .operation-card {

            background: white;

            border-radius: 20px;

            border: 1px solid #e8edf4;

            height: 100%;

            padding: 25px;

            position: relative;

            overflow: hidden;

            transition:
                transform .3s,
                box-shadow .3s;

        }

        .operation-card:hover {

            transform: translateY(-7px);

            box-shadow:
                0 18px 45px rgba(6,43,85,.12);

        }

        .operation-number {

            position: absolute;

            top: 15px;

            left: 15px;

            width: 45px;

            height: 45px;

            border-radius: 14px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-weight: 800;

            color: white;

        }

        .operation-icon {

            width: 62px;

            height: 62px;

            border-radius: 17px;

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 27px;

            margin-bottom: 20px;

        }

        .operation-card h3 {

            font-size: 19px;

            font-weight: 800;

            color: #173b63;

            line-height: 1.6;

            padding-left: 45px;

        }

        .operation-card p {

            font-size: 13px;

            color: #6c7a90;

            line-height: 1.8;

            min-height: 45px;

        }

        .operation-date {

            background: #f5f8fc;

            border-radius: 12px;

            padding: 12px;

            margin: 18px 0;

            color: #173b63;

            font-size: 13px;

            font-weight: 700;

        }

        .operation-date i {

            color: #0d6efd;

            margin-left: 5px;

        }


        /* =====================================================
           COLORS
        ====================================================== */

        .blue .operation-icon {

            background: #e8f1ff;

            color: #0d6efd;

        }

        .blue .operation-number {

            background: #0d6efd;

        }

        .green .operation-icon {

            background: #e8f8ef;

            color: #198754;

        }

        .green .operation-number {

            background: #198754;

        }

        .yellow .operation-icon {

            background: #fff8df;

            color: #d49b00;

        }

        .yellow .operation-number {

            background: #d49b00;

        }

        .purple .operation-icon {

            background: #f4eaff;

            color: #7435a7;

        }

        .purple .operation-number {

            background: #7435a7;

        }

        .cyan .operation-icon {

            background: #e4f8fb;

            color: #008ca3;

        }

        .cyan .operation-number {

            background: #008ca3;

        }

        .orange .operation-icon {

            background: #fff0e6;

            color: #ed6c16;

        }

        .orange .operation-number {

            background: #ed6c16;

        }


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

        .operation-btn {

            width: 100%;

            border-radius: 11px;

            padding: 10px;

            font-weight: 700;

        }


        /* =====================================================
           PASSERELLE FEATURE
        ====================================================== */

        .passerelle-section {

            padding: 25px 0 80px;

        }

        .passerelle-box {

            position: relative;

            overflow: hidden;

            border-radius: 25px;

            padding: 50px;

            color: white;

            background:
                linear-gradient(
                    135deg,
                    #3f176d,
                    #7435a7
                );

            box-shadow:
                0 20px 55px rgba(63,23,109,.22);

        }

        .passerelle-box::after {

            content: "LMD";

            position: absolute;

            font-size: 190px;

            font-weight: 900;

            opacity: .05;

            left: 20px;

            bottom: -55px;

        }

        .passerelle-content {

            position: relative;

            z-index: 2;

        }

        .passerelle-tag {

            display: inline-block;

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

            padding: 7px 15px;

            border-radius: 50px;

            font-size: 12px;

            font-weight: 700;

            margin-bottom: 15px;

        }

        .passerelle-box h2 {

            font-size: 30px;

            font-weight: 800;

            margin-bottom: 15px;

        }

        .passerelle-box p {

            line-height: 2;

            color: rgba(255,255,255,.9);

        }

        .passerelle-date {

            display: flex;

            gap: 25px;

            margin: 25px 0;

            flex-wrap: wrap;

        }

        .date-box {

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

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

            padding: 12px 20px;

            border-radius: 12px;

        }

        .date-box small {

            display: block;

            opacity: .7;

            font-size: 11px;

        }

        .date-box strong {

            font-size: 16px;

        }

        .btn-passerelle {

            background: white;

            color: #4b217a;

            padding: 13px 28px;

            border-radius: 12px;

            font-weight: 800;

            border: none;

        }

        .btn-passerelle:hover {

            background: #f5f5f5;

            color: #3f176d;

        }


        /* =====================================================
           TIMELINE
        ====================================================== */

        .timeline {

            position: relative;

            max-width: 900px;

            margin: auto;

        }

        .timeline::before {

            content: "";

            position: absolute;

            top: 0;

            bottom: 0;

            right: 50%;

            width: 3px;

            background: #dce5f0;

            transform: translateX(50%);

        }

        .timeline-item {

            position: relative;

            width: 50%;

            padding: 15px 35px;

        }

        .timeline-item:nth-child(odd) {

            right: 50%;

            text-align: right;

        }

        .timeline-item:nth-child(even) {

            right: 0;

            text-align: left;

        }

        .timeline-dot {

            position: absolute;

            width: 17px;

            height: 17px;

            border-radius: 50%;

            background: #0d6efd;

            top: 25px;

            right: -8px;

            border: 4px solid white;

            box-shadow: 0 0 0 3px #cfe0f8;

        }

        .timeline-item:nth-child(even)
        .timeline-dot {

            right: auto;

            left: -8px;

        }

        .timeline-content {

            background: white;

            border-radius: 15px;

            padding: 18px;

            box-shadow:
                0 5px 25px rgba(0,0,0,.06);

        }

        .timeline-content strong {

            color: #0d6efd;

        }


        /* =====================================================
           IMPORTANT NOTICE
        ====================================================== */

        .notice {

            background: #fff9e8;

            border: 1px solid #f5dfa0;

            border-radius: 20px;

            padding: 25px;

            display: flex;

            gap: 20px;

            align-items: flex-start;

        }

        .notice-icon {

            min-width: 55px;

            height: 55px;

            border-radius: 15px;

            background: #ffc107;

            color: #513d00;

            display: flex;

            justify-content: center;

            align-items: center;

            font-size: 25px;

        }

        .notice h4 {

            font-weight: 800;

            color: #674e00;

        }

        .notice p {

            margin: 0;

            color: #6d5a22;

            line-height: 2;

            font-size: 14px;

        }


        /* =====================================================
           QUICK LINKS
        ====================================================== */

        .quick-card {

            background: white;

            border: 1px solid #e8edf4;

            border-radius: 18px;

            padding: 25px;

            text-align: center;

            height: 100%;

            transition: .25s;

        }

        .quick-card:hover {

            transform: translateY(-5px);

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

        }

        .quick-icon {

            width: 60px;

            height: 60px;

            background: #eaf2ff;

            color: #0d6efd;

            border-radius: 17px;

            display: flex;

            justify-content: center;

            align-items: center;

            font-size: 25px;

            margin: 0 auto 15px;

        }

        .quick-card h5 {

            font-weight: 800;

            color: #173b63;

        }

        .quick-card p {

            font-size: 12px;

            color: #758298;

        }


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

        footer {

            background: #061f3c;

            color: white;

            padding: 55px 0 20px;

        }

        footer h5 {

            font-weight: 800;

            margin-bottom: 20px;

        }

        footer p {

            color: rgba(255,255,255,.65);

            line-height: 2;

            font-size: 13px;

        }

        .footer-link {

            display: block;

            color: rgba(255,255,255,.65);

            text-decoration: none;

            margin-bottom: 10px;

            font-size: 13px;

        }

        .footer-link:hover {

            color: white;

        }

        .footer-bottom {

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

            margin-top: 40px;

            padding-top: 20px;

            color: rgba(255,255,255,.55);

            font-size: 12px;

            text-align: center;

        }

        .portal-url {

            display: inline-flex;

            align-items: center;

            gap: 8px;

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

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

            padding: 10px 18px;

            border-radius: 50px;

            color: white;

            text-decoration: none;

        }


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

        @media (max-width: 768px) {

            .top-info {

                display: none;

            }

            .hero {

                min-height: 550px;

            }

            .hero h1 {

                font-size: 32px;

            }

            .hero p {

                font-size: 14px;

            }

            .section {

                padding: 55px 0;

            }

            .section-title {

                font-size: 26px;

            }

            .passerelle-box {

                padding: 30px 22px;

            }

            .passerelle-box h2 {

                font-size: 24px;

            }

            .timeline::before {

                right: 15px;

            }

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

                width: 100%;

                right: 0;

                text-align: right;

                padding-right: 45px;

                padding-left: 0;

            }

            .timeline-dot,
            .timeline-item:nth-child(even)
            .timeline-dot {

                right: 7px;

                left: auto;

            }

        }