:root {
    --black: #000;
    --blue: #0a223d;
    --red: #a80004;
    --yellow: #ffca2e;
    --green: #039400;
    --small-radius: 6px;
    --big-radius: 10px;
    --white: #fff;
    --red-primary: #a80004;
    --red-light: #FFF4F2;
    --red-light-2: #ffe5e6;
    --red-text: #B70004;
}

/* navbar section styling */
 .navbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 16px 16px;
     background-color: white;
     position: relative;
     z-index: 10;
     position: fixed;
     width: 100%;
     border-bottom: 1px solid #d9d9d9;
 }

 /* Left: Logos */
 .navbar-left {
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .logo {
     height: 40px;
 }

 .x-symbol {
     font-size: 20px;
     margin: 0 10px;
     color: #000;
 }

 /* Right: Links */
 .navbar-links {
     display: flex;
     align-items: center;
     gap: 36px;
     list-style: none;
 }

 .navbar-links a {
     text-decoration: none;
     color: #000;
     font-size: 16px;
     font-weight: 500;
 }

 .navbar-links a:hover {
     text-decoration: underline;
 }

 .contact-btn {
     background-color: #0062E2;
     padding: 8px 15px;
     border-radius: 5px;
     color: white !important;
     font-weight: 500;
     transition: all 0.2s ease;
     text-decoration: none !important;
 }

 .contact-btn:hover {
     background-color: #0051bb;
 }

 /* Burger menu */
 .burger {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
 }

 .burger span {
     width: 25px;
     height: 3px;
     background: #000;
     display: block;
     border-radius: 2px;
 }

 /* Responsive */
 @media (max-width: 1200px) {
     .burger {
         display: flex;
     }

     .navbar-links {
         position: absolute;
         top: 59px;
         width: 100%;
         right: 0;
         background-color: white;
         flex-direction: column;
         width: 100%;
         padding: 20px 16px;
         display: none;
         gap: 24px;
         border-bottom: 1px solid #d9d9d9;
         align-items: start;
     }

     .navbar-links a {
         font-size: 20px;
         display: flex;
         justify-content: space-between;
         width: 100%;
         border-bottom: 1px solid #d9d9d9;
         padding-bottom: 16px;
     }

     .navbar-links a img {
         width: 16px;
     }

     .logo {
         height: 30px;
     }

     .contact-btn {
         width: 100%;
         padding: 20px;
         text-align: center;
         font-size: 20px;
     }

     .navbar-links.show {
         display: flex;
     }
 }

 .tooltip-container {
     position: relative;
     display: inline-block;
     cursor: pointer;
 }

 .custom-tooltip {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px;
    border-radius: 5px;
    font-size: 14px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    white-space: normal;
    max-width: 250px;
    text-align: center;
    z-index: 9999;
}


 /* hero section styling */
 .hero-section {
     padding: 360px 16px 80px;
     background-image: url('../images/hero-section-bg.png');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
 }

 .max-w-container {
     max-width: 1296px;
 }

 .hero-section .max-w-container h1 {
     max-width: 960px;
 }

 .hero-section .max-w-container p {
     max-width: 960px;
 }

 .hero-section a {
     background-color: rgb(255, 255, 255, 0.45);
     padding: 16px 24px;
 }

 @media only screen and (max-width: 990px) {
     .hero-section .max-w-container h1 {
         font-size: 40px;
     }

     .hero-section .max-w-container p {
         font-size: 20px;
     }

     .hero-section .max-w-container h1 {
         font-size: 40px !important;
     }

     .hero-span {
         font-size: 20px !important;
     }
 }

 @media only screen and (max-width: 516px) {
     .hero-section .max-w-container h1 {
         font-size: 32px;
     }

     .hero-section .max-w-container p {
         font-size: 16px;
     }
 }

 /* hero section styling */
 .collab-section {
     max-width: 1296px;
     padding: 160px 16px;
     gap: 64px;
 }

 .collab-section .p-3 {
     width: calc(40% - 32px);
     height: 300px;
     background-color: #010544;
 }

 .collab-section .p-3 img {
     width: 100%;
     max-width: 230px;
 }

 .collab-section .text-container {
     width: calc(60% - 32px);
 }

 @media only screen and (max-width: 990px) {
     .collab-section {
         flex-direction: column;
         gap: 32px;
     }

     .collab-section .text-container,
     .collab-section .p-3 {
         width: 100%;
     }
 }

 @media only screen and (max-width: 516px) {}

 /* section benefit */
 .max-w-1296 {
     max-width: 1296px;
 }

 .benefit-section .card {
     width: 100%;
     flex: 1;
 }

 .benefit-section {
     padding: 120px 16px;

 }

 .xjtlu-gradient-bg {
     background: #CE57C1;
     background: radial-gradient(148.59% 100% at 50% 0%, #ce57c1 0%, #010544 46.54%);
 }

 .benefit-section .max-w-1296 .card {
     min-width: 220px;
 }

 .benefit-section .max-w-1296 .card p:first-of-type {
     color: #16AB59;
 }

 .benefit-section .max-w-1296 .card img {
     width: 56px;
 }

 @media only screen and (max-width: 516px) {
     .benefit-section .max-w-1296 .card {
         min-width: 260px;
     }
 }

 /* scholarship section style */
 .scholarship-section {
     padding: 160px 16px;

 }

 .gap-6 {
     gap: 48px;
 }

 .gray-text {
     color: #424242;
 }

 .title-blue {
     color: #010544;
 }

 /* course */
 .course-section {
     padding: 120px 16px;
     background-color: #F2F2F9;
 }

 .program-title {
     font-size: 16px;
     background-color: #010544;
     color: white;
     margin: 0;
 }

 .program-detail,
 .program-requirement,
 .program-major {
     background-color: white;
     border-bottom: 1px solid #d9d9d9;
 }

 .w-33-flex {
     display: flex;
     flex: 1 1 auto;
     width: 33.33%;
     flex-direction: column;
 }

 .opacity-sub-title {
     opacity: 0;
 }

 @media only screen and (max-width: 1200px) {
     .course-section .w-33-flex {
         width: 100%;
     }

     .course-section .cta-button {
         width: 100%;
         text-align: center;
     }

     .program-title,
     .program-detail,
     .program-requirement,
     .program-major {
         height: fit-content !important;
     }

     .opacity-sub-title {
         opacity: 1;
     }
 }

 .service-section {
     padding: 160px 16px;
     gap: 120px;
 }

 .cta-button {
     border-radius: 8px;
     padding: 16px 24px;
     width: fit-content;
     background: #010544;
     color: white;
     text-decoration: none;
     transition: all 0.3s ease-in-out;
 }

 .cta-button:hover {
     opacity: 0.6;
     background: #010544;
     color: white;
 }

 .w-half-flex {
     width: calc(50% - 24px);
 }

 @media only screen and (max-width: 1200px) {
     .gap-6 {
         gap: 24px;
     }

     .w-half-flex {
         width: 100%;
     }
 }

 .testimonial-section {
     padding: 120px 16px;
 }

 .w-fit {
     width: fit-content;
 }

 .text-blue-xjtlu {
     color: #010544;
 }

 .testimonial-section iframe {
     width: 540px;
 }

 @media only screen and (max-width: 1200px) {
     .testimonial-section iframe {
         width: 100%;
     }

     .iframe-container {
         width: 100%;
     }

     .testimonial-section {
         padding: 80px 16px;
     }
 }

 .consult-form-section {
     padding: 120px 16px;
     background-color: #F2F2F9;
 }

 .form-sub-title {
     font-size: 16px;
     color: #010544;
     text-transform: uppercase;
 }

 .form-sub-description {
     font-size: 14px;
     color: #454989;
 }

 .consult-form-section h2 {
     font-size: 48px;
 }

 .consult-form-section h2+p {
     font-size: 20px;
 }

 .consult-form-section .form {
     border: 1px solid #D9D9D9;
 }

 .stepper {
     position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
 }

 .stepper::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     height: 2px;
     background-color: #e0e0e0;
     z-index: 0;
     transform: translateY(-50%);
 }

 .steps {
     position: relative;
     z-index: 1;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background-color: #e0e0e0;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .steps::before {
     content: attr(data-step);
     color: #333;
 }

 .steps.done {
     background-color: #28a745;
     background-image: url('../images/carbon_checkmark.svg');
     background-repeat: no-repeat;
     background-position: center;
     background-size: 60%;
 }

 .steps.done::before {
     content: '';
 }

 .steps.active:not(.done) {
     background-color: #00113b;
 }

 .steps.active:not(.done)::before {
     color: white;
 }

 .footer {
     padding: 40px 20px;
     background-color: #fff;
     border-top: 1px solid #ddd;
     font-family: sans-serif;
     font-size: 16px;
     color: #333;
 }

 .footer-top {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     flex-wrap: wrap;
     gap: 30px;
     margin-bottom: 30px;
 }

 .footer-logo img {
     height: 56px;
 }

 .footer-columns {
     display: flex;
     gap: 80px;
     flex-wrap: wrap;
 }

 .footer-col h4 {
     font-size: 20px;
     margin-bottom: 10px;
 }

 .footer a:hover {
     text-decoration: underline;
 }

 .footer-col ul {
     list-style: none;
     padding: 0;
 }

 .footer-col li {
     margin-bottom: 8px;
 }

 .footer-col a {
     text-decoration: none;
     color: #424242;
     font-size: 14px;
 }

 .footer-col a span {
     font-size: 12px;
     margin-left: 5px;
 }

 .footer-cta .cta-link {
     color: #007bff;
     text-decoration: none;
     font-weight: 500;
     white-space: nowrap;
     font-size: 20px;
 }

 .footer-cta .cta-link span {
     font-size: 12px;
     margin-left: 5px;
 }

 /* Bottom row */
 .footer-bottom {
     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
     border-top: 1px solid #ddd;
     padding-top: 20px;
     font-size: 12px;
     color: #777;
 }

 .footer-left-links a {
     text-decoration: none;
     color: #777;
     margin-right: 10px;
 }

 .footer-right-copy {
     text-align: right;
 }

 .fw-medium {
     font-weight: 500;
 }


 /* Responsive */
 @media (max-width: 768px) {
     .footer-top {
         flex-direction: column;
         align-items: flex-start;
     }

     .footer-columns {
         flex-direction: column;
         gap: 20px;
     }

     .footer-bottom {
         flex-direction: column;
         gap: 10px;
         text-align: left;
     }

     .footer-right-copy {
         text-align: left;
     }
 }

 [x-cloak] {
     display: none;
 }