:root {
     --gradient-primary: linear-gradient(90deg,
             #B921DA,
             #FFA307);
     --primary-color-pink: #B921DA;
     --primary-color-orange: #FFA307;
     --secondary-color-blue: #0565FB;
 }


 body {
     font-family: "Inter", sans-serif;
     background-color: #fff5f2;
 }

 /* ===== Top Bar ===== */
 .top-bar {
     background: var(--gradient-primary);
     color: #fff;
     font-size: 14px;
     padding: 8px 0;
 }

 .top-bar .info span {
     cursor: pointer;
 }

 .top-bar-link {
     color: inherit;
     text-decoration: none;
     font-weight: 500;
 }

 .top-bar-link:hover {
     text-decoration: underline;
 }

 /*
 .top-bar .lang {
     padding-right: 62px;
 } */

 .top-bar i {
     margin-right: 6px;
 }

 /* ===== Navbar ===== */

 .main-navbar {
     position: relative;

     background: #fff5f2;
     padding: 18px 0;
 }

 .main-navbar.is-sticky {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 900;
     background: #fff5f2;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     transform: translateY(-100%);
     opacity: 0;
 }

 .main-navbar.is-sticky.show {
     transform: translateY(0);
     opacity: 1;
     transition: transform 0.7s ease, opacity 0.7s ease;
 }



 .navbar-nav .nav-link {
     font-weight: 600;
     color: #1f2937;
     margin: 0 10px;

 }

 .navbar-nav .nav-link:hover {
     color: var(--primary-color-orange);
 }

 .dropdown-toggle::after {
     margin-left: 0.5em;
     vertical-align: middle;
 }

 .dropdown-menu {
     border: none;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     border-radius: 8px;
     margin-top: 10px;
     padding: 10px 0;
 }

 .dropdown-item {
     padding: 8px 20px;
     font-weight: 500;
     color: #1f2937;
 }

 .dropdown-item:hover {
     background-color: #fff5f2;
     color: var(--primary-color-orange);
 }

 @media (min-width: 992px) {
     .navbar-nav .dropdown:hover>.dropdown-menu {
         display: block;
         margin-top: 0;
     }

     /* Prevent the toggle from acting like a link on hover */
     .navbar-nav .dropdown>.dropdown-toggle:active {
         pointer-events: none;
     }

 }

 /* ===============================
   FIX MOBILE MENU LEFT SHIFT
   =============================== */
 @media (max-width: 991.98px) {

     /* REMOVE ms-auto effect */
     .navbar-collapse .navbar-nav {
         margin-left: 0 !important;
         margin-right: 0 !important;
         align-items: center !important;
         text-align: center;
         width: 100%;
     }

     .navbar-collapse .nav-item {
         width: 100%;
     }

     .navbar-collapse .nav-link {
         margin: 0 !important;
         padding: 14px 0;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     /* Dropdown fixes */
     .navbar-collapse .dropdown-menu {
         position: static !important;
         transform: none !important;
         box-shadow: none;
         border-radius: 12px;
         margin: 8px auto 12px;
         width: 50%;
         text-align: center;
     }

     .navbar-collapse .dropdown-item {
         text-align: center;
         padding: 10px 0;
     }

     /* Keep arrow centered */
     .navbar-collapse .dropdown-toggle::after {
         margin-left: 8px;
     }

     /* Button center */
     .navbar-collapse .btn-primary-custom {
         margin: 12px auto 0;
         display: inline-flex;
     }

     .dropdown-item:hover {
         background-color: #ffffff;
     }

 }


 /* container */
 .lang-switch {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 6px;
     background: #ffffff;
     border-radius: 999px;
 }

 /* language button */
 .lang-switch .lang-option {

     height: 18px;
     padding: 0 6px;
     border-radius: 100px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 10px;
     color: var(--primary-color-pink);
     cursor: pointer;
     transition: all 0.3s ease;
 }

 /* active state */
 .lang-switch .lang-option.active {
     background: var(--primary-color-orange);
     color: #ffffff;
 }



 .discount-input {
     display: flex;
     align-items: center;
     border: 1px solid #dee2e6;
     border-radius: 8px;
     overflow: hidden;
     height: 48px;
     background: #fff;
 }

 .discount-select {
     border: none;
     border-right: 1px solid #dee2e6;
     padding: 0 14px;
     height: 100%;
     font-size: 16px;
     color: #495057;
     background: transparent;
     min-width: 130px;
     cursor: pointer;
 }

 .discount-select:focus {
     outline: none;
 }

 .discount-value {
     border: none;
     flex: 1;
     padding: 0 14px;
     height: 100%;
     font-size: 16px;
     color: #495057;
 }

 .discount-value::placeholder {
     color: #495057;
 }

 .discount-value:focus {
     outline: none;
 }

 /* Focus state like Bootstrap inputs */
 .discount-input:focus-within {
     border-color: #86b7fe;
     box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
 }

 /* Button */
 .btn-primary-custom {
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding: 12px 16px;
     border-radius: 10px;
     font-weight: 700;
     font-size: 14px;
     color: #ffffff;
     border: none;
     text-decoration: none;
     background: var(--gradient-primary);
     overflow: hidden;
     transition: background 0.4s ease, color 0.4s ease;


 }

 .btn-primary-custom .btn-icon {
     font-size: 14px;
     transition: opacity 0.35s ease, transform 0.35s ease;
 }

 /* TEXT */
 .btn-primary-custom .btn-text {
     transition: transform 0.35s ease, opacity 0.35s ease;
 }

 /* HOVER STATE */
 .btn-primary-custom:hover {
     background: #fff;
     box-shadow: inset 0 0 0 1px var(--primary-color-pink);

     color: #E50506;
 }

 /* HIDE ICON ON HOVER */
 .btn-primary-custom:hover .btn-icon {
     opacity: 0;
     transform: translateX(-10px);
 }



 /* ========================= */

 .btn-reverse {
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding: 12px 16px;
     border-radius: 10px;
     font-weight: 700;
     font-size: 14px;

     border: none;
     text-decoration: none;

     overflow: hidden;
     transition: background 0.4s ease, color 0.4s ease;
     background: #ffffff;
     color: #E50506;

 }

 /* ICON VISIBLE BY DEFAULT */
 .btn-reverse .btn-icon {
     opacity: 1;
     transform: translateX(0);
 }

 /* TEXT NORMAL POSITION */
 .btn-reverse .btn-text {
     transform: translateX(0);
 }

 /* HOVER → GRADIENT (LIKE ONLINE DEFAULT) */
 .btn-reverse:hover {
     background: var(--gradient-primary);
     color: #ffffff;
     border: none;
 }

 /* HIDE ICON ON HOVER */
 .btn-reverse:hover .btn-icon {
     opacity: 0;
     transform: translateX(-10px);
 }

 /* TEXT SLIDE ON HOVER */
 .btn-reverse:hover .btn-text {
     transform: translateX(-6px);
 }


 .btn-custom {
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding: 12px 20px;
     border-radius: 6px;
     border: none;
     font-weight: 700;
     font-size: 14px;
     color: #ffffff;
     text-decoration: none;
     background: var(--secondary-color-blue);
     overflow: hidden;
     cursor: pointer;
     transition: transform 0.25s ease, box-shadow 0.25s ease;
 }

 /* sliding overlay */
 .btn-custom::before {
     content: "";
     position: absolute;
     inset: 0;
     background: #034fd1;
     /* darker blue */
     transform: translateX(-100%);
     transition: transform 0.35s ease;
     z-index: 0;
 }

 /* keep text above */
 .btn-custom span,
 .btn-custom i {
     position: relative;
     z-index: 1;
 }

 /* hover state */
 .btn-custom:hover::before {
     transform: translateX(0);
 }

 .btn-custom:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(5, 101, 251, 0.35);
 }


 /* ===== Hero Section ===== */
 .hero {
     position: relative;
     padding: 50px 0 200px 0;
     min-height: 650px;
     background-color: #f5f7ff;

     background-image: url("assets/img/banner-bg.jpg");
     background-repeat: no-repeat;
     background-position: right center;

     /* THIS IS THE KEY */
     background-size: auto 100%;
     z-index: 10;
     overflow: visible;

 }

 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-weight: 600;
     margin-bottom: 15px;
 }



 .hero h1 {
     font-size: 52px;
     font-weight: 800;
     line-height: 1.2;
 }

 .hero h1 span {
     color: #E50506;
 }

 .hero p {
     color: #4b5563;
     font-size: 16px;
     margin-top: 20px;
     max-width: 520px;
 }

 .hero-buttons .btn {
     padding: 12px 26px;
     border-radius: 10px;
     font-weight: 600;
 }





 /* ===== Video Card ===== */
 .video-card {
     background: #fff;
     border-radius: 24px;
     overflow: hidden;
     position: relative;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
 }

 .video-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 8px;
 }

 .modal-close-btn {
     z-index: 1056;
     /* higher than iframe */
 }

 .play-btn {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 70px;
     height: 70px;
     background: #E50506;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 30px;
     z-index: 2;
     cursor: pointer;
     border: none;
 }

 /* Ripple waves */
 .play-btn::before,
 .play-btn::after {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: 50%;
     background: rgba(255, 59, 59, 0.45);
     animation: ripple 2.8s infinite;
     z-index: -1;
     pointer-events: none;
 }

 /* Second wave delay */
 .play-btn::after {
     animation-delay: 1.4s;
 }

 /* Ripple animation */



 .side-discount {
     position: fixed;
     cursor: pointer;
     left: 0;
     top: 55%;
     transform: translateY(-50%);
     width: 44px;
     height: 200px;
     background: var(--gradient-primary);
     z-index: 999;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     border-radius: 0px 20px 20px 0px;
 }

 .side-discount span {
     color: #fff;
     font-weight: 800;
     font-size: 14px;
     letter-spacing: 2px;
     transform: rotate(-90deg);
     white-space: nowrap;
 }

 .side-seminar {
     position: fixed;
     cursor: pointer;
     right: 0;
     top: 55%;
     transform: translateY(-50%);
     width: 44px;
     height: 200px;
     background: var(--gradient-primary);
     z-index: 999;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     border-radius: 20px 0 0 20px;
 }

 /* TEXT */


 .side-seminar span {
     color: #fff;
     font-weight: 800;
     font-size: 14px;
     letter-spacing: 2px;
     transform: rotate(-90deg);
     white-space: nowrap;
 }

 .category-slider-section {
     padding: 60px 0;
     background: transparent;
     position: relative;
     margin-bottom: -360px;

     /* pulls slider into hero */
     z-index: 5;

     margin-left: 100px;
     pointer-events: auto;
     margin-right: 100px;



 }

 /* Card */
 .slider-category-card {
     background: #ffffff;
     border-radius: 20px;
     padding: 30px 20px;
     text-align: center;
     height: 200px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);

 }

 .slider-category-card h5 {
     margin-top: 18px;
     font-weight: 700;
     font-size: 18px;
 }

 .slider-category-card a {
     color: #000;
     text-decoration: none;
 }

 /* Icon */
 .slider-category-card .icon {

     width: 60px;
     height: 60px;
     border-radius: 14px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 26px;
     color: #fff;
 }

 .icon.pink {
     background: #ff6b8a;
 }

 .icon.purple {
     background: #8b5cf6;
 }

 .icon.violet {
     background: #a78bfa;
 }

 .icon.dark {
     background: #374151;
 }

 .icon.green {
     background: #22c55e;
 }

 .icon.blue {
     background: #3b82f6;
 }

 /* Navigation buttons */
 .custom-nav {
     width: 44px;
     height: 44px;
     background: #fff;
     border: 2px solid var(--primary-color-orange);
     border-radius: 50%;
     color: var(--primary-color-orange);

 }



 .custom-nav::after {
     font-size: 16px;
     font-weight: bold;
 }

 .custom-nav:hover {
     background: var(--primary-color-orange);
     color: #fff;
 }

 .custom-nav-testimonial {
     width: 44px;
     height: 44px;
     background: #fff;
     border: 2px solid var(--primary-color-orange);
     border-radius: 50%;
     color: var(--primary-color-orange);

 }



 .custom-nav-testimonial::after {
     font-size: 16px;
     font-weight: bold;
 }

 .custom-nav-testimonial:hover {
     background: var(--primary-color-orange);
     color: #fff;
 }

 .swiper-button-prev {
     position: absolute;
     left: -40px;
 }

 .swiper-button-next {
     position: absolute;
     right: -40px;
 }

 .about-hero {

     padding: 80px 0;
     background: #fff;
 }

 .experience {
     color: #ff2b2b;
     font-weight: 700;
     font-size: 18px;
     display: inline-block;
     margin-bottom: 10px;
 }

 .about-hero h1 {
     font-size: 48px;
     font-weight: 800;
     color: #111;
     margin-bottom: 20px;
 }

 .about-hero p {
     font-size: 16px;
     line-height: 1.8;
     color: #555;
     max-width: 533px;
     text-align: justify;
 }

 /* Buttons */
 .hero-buttons {
     margin-top: 30px;
     display: flex;
     gap: 20px;
 }

 .btn-primary {
     background: #ff2b2b;
     color: #fff;
     padding: 14px 34px;
     border-radius: 12px;
     font-weight: 600;
     text-decoration: none;
 }

 .btn-outline {
     background: #ff2b2b;
     color: #fff;
     padding: 14px 34px;
     border-radius: 12px;
     font-weight: 600;
     text-decoration: none;
 }

 /* Image */
 /* .hero-image-card {
     background: #1c0f24;
     padding: 12px;
     border-radius: 14px;
 } */

 .hero-image {
     position: relative;
     cursor: pointer;
     border-radius: 16px;
     overflow: hidden;
     aspect-ratio: 16 / 9;

 }

 .hero-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;

 }

 /* Stats */
 .stats-grid {
     margin-top: 80px;
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 20px;
 }

 .stat-box {
     background: #f9f9ff;
     border-radius: 20px;
     padding: 28px 20px;
     text-align: center;
 }

 .stat-box h3 {

     font-size: 36px;
     font-weight: 800;
     margin-bottom: 6px;
 }

 .stat-box p {
     margin: 0;
     font-size: 15px;
     font-weight: 600;
     color: var(--primary-color-pink);
     display: flex;
     justify-content: center;
 }

 /* Responsive */
 @media (max-width: 992px) {
     .about-hero h1 {
         font-size: 32px;
         text-align: center;
     }

     .about-hero {
         padding: 40px 0px;

     }

     .experience {
         display: flex;
         justify-content: center;
     }

     .stats-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @keyframes ripple {
     0% {
         transform: scale(1);
         opacity: 0.6;
     }

     100% {
         transform: scale(2.8);
         opacity: 0;
     }
 }

 ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }


 ul li a {
     text-decoration: none !important;
 }

 .course_section_heading h2 {
     color: #1f1e1e;
     font-size: 44px;
     font-weight: 600;
     display: flex;
     justify-content: center;
     margin-top: 20px;
 }

 .section_heading {
     text-align: center;
 }

 .section_heading h2,
 .course_cat_heading h1,
 .section_heading3 h2 {
     color: #1f1e1e;
     font-size: 44px;
     line-height: 54px;
     padding-top: 46px;
     font-weight: 600;
 }

 .section_heading p {
     color: #605f62;
     font-weight: 400;
     text-align: center;
     padding-top: 15px;
     max-width: 789px;
     margin: 0 auto;
     text-align: center;
     padding-bottom: 58px;
 }

 .section_heading2 h2,
 .section_heading3 h2 {
     padding-bottom: 20px !important;
 }

 .section_heading2 p,
 .section_heading3 p {
     color: #605f62;
     padding-bottom: 40px !important;
 }

 .section_heading3 p {
     max-width: 85%;
 }




 .section-title {
     text-align: center;
     margin-bottom: 50px;
     font-weight: bold;
     font-size: 2.5rem;
 }

 .course-card {
     border: 1px solid #dee2e6;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s;
     background: white;
     transition: background-color 0.4s ease, box-shadow 0.4s ease;
 }

 .course-card:hover {
     background-color: #3f3758;
     /* purple dark */
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
 }

 .course-card .card-title {
     cursor: pointer;
     font-size: 20px;
     text-decoration: none;
 }

 .course-card:hover a {
     color: #ffffff !important;

 }

 .course-card:hover .info-item {
     color: #ffffff !important;
 }

 .course-card:hover .view-details-btn {
     color: #ffffff !important;
     border-color: #ffffff;

 }





 .card-footer {
     background-color: transparent;
 }


 .course-img {
     height: 250px;
     object-fit: cover;
     width: 100%;
     border-radius: 10px;
 }

 .badge-code {
     background-color: #ffcccb;
     color: #d63384;
     font-weight: bold;
     padding: 5px 10px;
     border-radius: 20px;
     font-size: 0.85rem;
 }

 .mode-badge {
     margin-left: 10px;
     font-size: 0.9rem;
     display: flex;
     justify-content: center;
     align-items: center;
 }


 .price {
     font-size: 1.5rem;
     color: var(--primary-color-orange);
     font-weight: bold;
 }

 .original-price {
     text-decoration: line-through;
     color: red;
     margin-left: 10px;
 }

 .rating {
     color: #ffc107;
 }

 .info-item {
     color: #6c757d;
     font-size: 0.9rem;
 }

 .enroll-btn {
     border-radius: 50px;
     padding: 10px 30px;
 }

 .view-details-btn {
     border-radius: 10px;
     text-decoration: none;
     align-items: center;
     display: flex;

 }

 .view-details-btn:hover {
     background: var(--gradient-primary);
     border: none;
 }


 /* status badge */
 .status-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 6px 14px;
     border-radius: 999px;
     font-size: 13px;
     font-weight: 600;
     position: relative;
 }

 /* active state */
 .status-badge.online {
     background: rgba(34, 197, 94, 0.15);
     color: #16a34a;
 }

 .status-badge.offline {
     background: rgba(239, 68, 68, 0.12);
     color: #dc2626;
 }

 .status-badge.pre-recorded {
     background: rgba(59, 130, 246, 0.12);
     color: #2563eb;
 }

 .status-badge.corporate {
     background: rgba(168, 85, 247, 0.12);
     color: #7c3aed;
 }

 /* green dot */
 .status-badge .dot {
     width: 8px;
     height: 8px;
     background: #22c55e;
     border-radius: 50%;
     position: relative;
 }

 /* pulse / network animation */
 .status-badge .dot::before {
     content: "";
     position: absolute;
     inset: -6px;
     border-radius: 50%;
     background: rgba(34, 197, 94, 0.35);
     animation: pulse 1.6s infinite ease-out;
 }

 /* animation */
 @keyframes pulse {
     0% {
         transform: scale(0.6);
         opacity: 0.8;
     }

     100% {
         transform: scale(2);
         opacity: 0;
     }
 }



 /* ===== Footer Section ===== */

 #footer {
     padding-top: 50px;
     background: #255e89;
     position: relative;
     z-index: 2;
 }

 #footer .footer_left {
     position: absolute;
     left: 60px;
     top: 57px;
 }

 #footer .footer_right {
     position: absolute;
     right: 60px;
     top: 57px;
 }

 .footer_heading {
     max-width: 674px;
     margin: 0 auto;
     text-align: center;
     padding-bottom: 50px;
 }

 .footer_heading h2 {
     color: #ffffff;

     font-size: 40px;
     font-weight: 700;
     line-height: 54px;

     text-align: center;
 }

 .footer_text a {
     color: #ffffff;
 }

 .footer_heading p {
     color: #bab5ad;
     font-family: 'Inter', sans-serif;
     font-size: 19px;
     font-weight: 400;
     text-align: center;
     padding-top: 5px;
     padding-bottom: 39px;
 }

 .footer_heading .footer_btn {
     text-align: center;

 }

 .footer_heading .footer_btn a {
     width: 200px;
     border-radius: 6px;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
     -ms-border-radius: 6px;
     -o-border-radius: 6px;
     border: 1px solid #ffffff;
     color: #ffffff;
     font-weight: 600;
     font-size: 17px;
     line-height: 54px;
     text-align: center;
     padding: 0;
     transition: all linear 0.3s;
     -webkit-transition: all linear 0.3s;
     -moz-transition: all linear 0.3s;
     -ms-transition: all linear 0.3s;
     -o-transition: all linear 0.3s;
     margin: 0 10px;
 }

 .footer_heading .footer_btn a:hover {
     color: #fff;
     background: var(--gradient-primary);
     border-radius: 10px;
     text-align: center;
     border-radius: 6px;
     -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
     -ms-border-radius: 6px;
     -o-border-radius: 6px;
 }

 .footer_heading .footer_btn button {
     width: 200px;
     border-radius: 6px;
     border: 1px solid #838181;
     color: #000;
     font-weight: 600;
     font-size: 17px;
     line-height: 54px;
     text-align: center;
     padding: 0;
     margin: 0 10px;
     background: transparent;
     cursor: pointer;
     transition: all linear 0.3s;
 }

 /* hover style */
 .footer_heading .footer_btn button:hover,
 .footer_heading .footer_btn button.active {
     color: #fff;
     background: var(--gradient-primary);
     border-radius: 6px;
 }

 .footer_item_1 h5 {
     color: #ffffff;

     font-size: 21px;
     font-weight: 600;
     line-height: 33px;

     margin-bottom: 22px;
 }

 .footer_item_1 ul li {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     margin-bottom: 26px;
     font-family: 'Inter', sans-serif;
 }



 .footer_item_1 ul li:last-child {
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
 }

 .footer_item_1 ul li .footer_icon {
     min-width: 31px;
     height: 31px;

     border-radius: 50%;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     -ms-border-radius: 50%;
     -o-border-radius: 50%;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .footer_item_1 ul li .footer_icon svg {
     line-height: 31px;
     font-size: 14px;
     color: #ffffff;
     opacity: 0.7;
     vertical-align: middle;
     align-self: center;
 }

 .footer_item_1 ul li .footer_text {
     color: #ffffff;
     font-family: 'Inter', sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 14px;
     margin-left: 12px;
     font-family: 'Inter', sans-serif;
     opacity: 0.7;
     line-height: 24px;
 }

 .footer_item_1 ul li .footer_text span {
     display: block;
     line-height: 24px;
     font-family: 'Inter', sans-serif;
 }

 .footer_item_1 ul li .footer_text span a {
     color: #ffffff;
     font-family: 'Inter', sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 14px;
     opacity: 0.7;
 }

 .footer_item_2 h5 {
     color: #ffffff;

     font-size: 21px;
     font-weight: 600;
     line-height: 33px;
     font-family: 'Inter', sans-serif !important;
     margin-bottom: 22px;
 }

 .footer_item_2 ul li {
     margin-bottom: 17px;
 }

 .footer_item_2 ul li a {
     color: #ffffff;
     font-family: 'Inter', sans-serif !important;
     font-size: 16px;
     font-weight: 400;
     line-height: 1.5;

     opacity: 0.7;
 }

 .footer-top {
     padding-bottom: 50px;
 }

 .footer_bottom {
     background: rgb(255, 245, 242);
 }

 .payments {
     padding: 50px 0;
 }

 .payments .payment_item {
     box-shadow: 0 4px 16px rgb(0 0 0 / 6%);
     padding: 1.3rem;
     min-height: 150px;
     margin: 0.3rem;
 }


 .payments .payment_heading {
     display: block;
 }

 .payments .payment_heading h3 {
     color: #2d2d2d;
     font-size: 22px;
     font-weight: 600;
     margin-bottom: 40px;
 }

 .payment_logo {
     max-width: 140px;
     margin-bottom: 7px;
 }

 .payment_qr small {
     font-weight: 600;
     font-size: 24px;
     font-family: 'Inter', sans-serif !important;
 }

 .copy {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     border-top: 1px solid rgba(45, 45, 45, 0.1);
     padding-top: 30px;
     padding-bottom: 30px;
 }

 .copy_text {
     margin-bottom: -20px;
 }

 .copy .copy_text p {

     color: #2d2d2d;
     text-align: center;
     font-family: 'Inter', sans-serif !important;
     font-size: 14px;
 }

 .copy .copy_text p a {
     color: #ff1e1e;
 }

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

 .copy .copy_social_link a {
     width: 39px;
     height: 39px;
     text-align: center;
     line-height: 39px;
     border-radius: 50%;
     -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
     -ms-border-radius: 50%;
     -o-border-radius: 50%;
     border: 1px solid #2d2d2d;
     color: #2d2d2d;
     font-size: 16px;
     background: transparent;
     margin-left: 12px;
     transition: all linear 0.3s;
     -webkit-transition: all linear 0.3s;
     -moz-transition: all linear 0.3s;
     -ms-transition: all linear 0.3s;
     -o-transition: all linear 0.3s;
 }

 .copy .copy_social_link a:hover {
     background: rgb(255, 30, 30);
     border-color: rgb(255, 30, 30);
     color: #fff;
 }

 .footer-social {
     display: flex;
     gap: 14px;
 }

 /* default state */
 .social {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     border: 2px solid #000;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #000;
     font-size: 18px;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 /* hover = solid red circle */
 .social:hover {
     background-color: var(--primary-color-orange);
     /* red */
     border-color: var(--primary-color-orange);
     color: #fff;
 }

 .footer-copyright {
     display: flex;
     align-items: center;
     text-align: center;
     justify-content: space-between;
 }

 /* social icons */
 .footer-social {
     display: flex;
     gap: 14px;
 }

 .success-section {

     padding: 80px 0;
     background: radial-gradient(circle at center, #4b145b, #0c0612);
     color: #fff;
 }

 .section-title {
     text-align: center;
     font-size: 26px;
     margin-bottom: 30px;
 }

 /* ===== Video Card ===== */
 /* .video-card {
     background: #1c0f24;
     padding: 12px;
     border-radius: 14px;
 } */

 .video-thumb {
     position: relative;
     cursor: pointer;
     border-radius: 16px;
     overflow: hidden;
     aspect-ratio: 16 / 9;
     /* 🔥 important */
 }



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

 .success-play-btn {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);

     width: 72px;
     height: 48px;
     background: #ff0000;
     /* YouTube red */
     border-radius: 12px;

     display: flex;
     align-items: center;
     justify-content: center;

     color: #fff;
     font-size: 26px;
     line-height: 1;
     padding-left: 4px;
     /* triangle optical centering */

     pointer-events: none;
     /* click passes to parent */
 }

 /* ===== Testimonial ===== */
 .testimonial-card-home {
     background: linear-gradient(180deg, #2b1432, #1a0c1f);
     border-radius: 22px;
     padding: 16px;
     color: #fff;

     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 /* Top row */
 .testimonial-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     text-align: center;
 }

 .quote {
     font-size: 40px;
     opacity: 0.9;
 }

 .stars {
     color: #ffb703;
     font-size: 18px;
     letter-spacing: 2px;
     margin-top: -20px;
 }

 /* Text */
 .testimonial-text {
     font-size: 12px;
     line-height: 1.7;
     opacity: 0.85;

 }

 /* User */
 .testimonial-user {
     display: flex;
     align-items: center;
     gap: 14px;
 }

 .testimonial-user img {
     width: 54px;
     height: 54px;
     border-radius: 50%;
     object-fit: cover;
 }

 .user-info h6 {
     margin: 0;
     font-size: 10px;
     font-weight: 600;
 }

 .name-row {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .batch {
     background: #7a2a72;
     color: #fff;
     font-size: 8px;
     padding: 4px;
     border-radius: 8px;
 }

 .designation,
 .company {
     display: block;
     font-size: 10px;
     opacity: 0.7;
 }

 .online_courses {
     background-color: #d0d7e2;
     padding-bottom: 60px;
 }

 .why-interactive {
     background: #f4fbf8;
     padding: 80px 0;
     font-family: "Inter", sans-serif;
 }

 .interactive-section-title {
     align-items: flex-start;
     font-size: 42px;
     font-weight: 800;
     color: #110f0f;
     margin-bottom: 16px;
 }

 .section-title span {
     font-weight: 800;
 }

 .section-desc {
     max-width: 920px;
     font-size: 16px;
     line-height: 1.8;
     color: #6b7280;
     margin-bottom: 48px;
 }

 .feature-box {
     background: #ffffff;
     border-radius: 16px;
     padding: 40px 48px;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 28px 40px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
 }

 .feature-item {
     display: flex;
     align-items: flex-start;

     gap: 14px;
     font-size: 15px;
     color: #111827;
     line-height: 1.6;
 }

 /* ===== Icons ===== */
 .icon {
     width: 36px;
     height: 36px;
     border-radius: 10px;
     flex-shrink: 0;

 }



 .newsletter {
     background: #2f363d;
     padding: 80px 0;
     font-family: "Inter", sans-serif;
 }

 .newsletter-container {
     max-width: 1280px;
     margin: auto;
     display: grid;
     grid-template-columns: 1.2fr 1fr;
     gap: 60px;
     align-items: center;
 }

 /* LEFT */


 .newsletter-title {
     color: #fff;
     font-size: 42px;
     font-weight: 800;
     line-height: 1.2;
     margin-bottom: 16px;
 }

 .desc {
     color: #cbd5e1;
     font-size: 15px;
     line-height: 1.7;
     margin-bottom: 32px;
 }

 .feature-list {
     list-style: none;
     padding: 0;
     margin-bottom: 36px;
 }

 .feature-list li {
     display: flex;
     gap: 14px;
     margin-bottom: 18px;
 }

 .feature-list strong {
     color: #fff;
     font-size: 15px;
 }

 .feature-list p {
     color: #cbd5e1;
     font-size: 14px;
     margin: 2px 0 0;
 }

 /* ICONS */
 .icon {
     width: 34px;
     height: 34px;
     border-radius: 10px;
     flex-shrink: 0;
 }

 .pink {
     background: linear-gradient(135deg, #ec4899, #f472b6);
 }

 .blue {
     background: linear-gradient(135deg, #3b82f6, #60a5fa);
 }

 .orange {
     background: linear-gradient(135deg, #fb923c, #fdba74);
 }

 .green {
     background: linear-gradient(135deg, #22c55e, #86efac);
 }

 /* SUBSCRIBE */
 .subscribe-box {
     display: flex;
     gap: 14px;
 }

 .subscribe-box input {
     flex: 1;
     padding: 14px 16px;
     border-radius: 10px;
     border: 1px solid #4b5563;
     background: transparent;
     color: #fff;
 }

 .subscribe-box input::placeholder {
     color: #9ca3af;
 }

 .subscribe-box button {
     background: #16a34a;
     color: #fff;
     border: none;
     padding: 0 26px;
     border-radius: 10px;
     font-weight: 600;
     cursor: pointer;
 }

 /* RIGHT */
 .newsletter-right {
     position: relative;
     background: #d6d3cd;
     border-radius: 20px;
     padding: 30px;
     text-align: center;
 }

 .newsletter-right img {
     max-width: 100%;
     border-radius: 14px;
 }



 .gallery {
     padding: 30px 0;
     width: 100%;

 }

 .gallery .swiper {
     width: 100%;
     margin-bottom: 16px;
 }

 .gallery .swiper-slide {
     width: auto;
 }

 .gallery-top-image {
     position: relative;
     cursor: pointer;
     border-radius: 16px;
     overflow: hidden;
     aspect-ratio: 16 / 9;
     /* 🔥 important */
 }

 .gallery-top-image img {
     width: 100%;
 }

 .gallery-preview {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.9);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     opacity: 0;
     visibility: hidden;
     transition: 0.3s ease;
 }

 .gallery-preview.active {
     opacity: 1;
     visibility: visible;
 }

 .gallery-preview img {
     min-width: 50%;
     min-height: 50%;
     border-radius: 8px;
     margin: 20px;
 }

 .close-preview {
     position: absolute;
     top: 20px;
     right: 30px;
     font-size: 40px;
     color: #fff;
     cursor: pointer;
 }

 .modal {
     z-index: 2000 !important;

 }

 .modal-backdrop {
     z-index: 1990 !important;
 }


 #discountModal .modal-content {
     background: var(--gradient-primary);

     border-radius: 16px;
     border: 1px solid #e9d5ff;
 }

 #discountModal .modal-title {
     color: #000000;
     font-weight: 700;
 }

 #seminarModal .modal-content {
     background: #f8f0dd;

     border-radius: 16px;
     border: 1px solid #e9d5ff;
 }

 #seminarModal .modal-title {
     color: #000000;
     font-weight: 700;
 }

 .explore-categories {
     margin-top: 60px;
     position: relative;
     width: 100%;

     padding: 80px 0;
     background: #f2f3fc;


 }


 .section-title {
     font-size: 36px;
     font-weight: 700;
     margin-bottom: 12px;
     text-align: left;
 }

 .explore-section-desc {
     color: #6b7280;
     font-size: 16px;
     margin-bottom: 24px;
     text-align: justify;
 }



 .category-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 2px;

 }

 .category-card {
     text-align: center;
 }

 .icon-box {
     width: 90%;
     height: 150px;
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 14px;
     font-size: 60px;
     color: #1f2937;
 }

 .explore-category-left {
     display: flex;
     flex-direction: column;
     justify-content: center;


 }

 /* Pastel backgrounds */
 .category-card.green .icon-box {
     background: #ecfdf5;
 }

 .icon-box-green {
     background: #dcfbec;
 }



 .icon-box-purple {
     background: #e5dfff;
 }

 .icon-box-pink {
     background: #ffcee6;
 }

 .category-card a {
     font-size: 14px;
     font-weight: 600;
     color: #111827;
     line-height: 1.4;
     cursor: pointer;
     text-decoration: none;

 }

 .course-search {
     margin-top: 20px;
     max-width: 720px;
     width: 100%;
     height: 56px;
     background: #ffffff;
     border: 1.5px solid #a2a1a1;
     border-radius: 50px;
     display: flex;
     align-items: center;
     overflow: visible;
     position: relative;
     z-index: 20;
 }

 /* ===== CUSTOM SELECT ===== */
 .custom-select {
     height: 100%;
     min-width: 180px;
     background: var(--gradient-primary);
     border-radius: 50px;
     cursor: pointer;
     position: relative;
     z-index: 30;
 }

 .select-trigger {
     height: 100%;
     padding: 0 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     color: #fff;
     font-size: 14px;
     font-weight: 500;
 }

 .select-trigger .arrow {
     margin-left: 10px;
     transition: transform 0.3s ease;
 }

 /* Rotate arrow */
 .custom-select.open .arrow {
     transform: rotate(180deg);
 }

 /* Dropdown options */
 .select-options {
     position: absolute;

     left: 0;
     width: 100%;
     background: #ffffff;
     border-radius: 14px;
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
     list-style: none;
     padding: 8px 0;
     display: none;
     z-index: 9999;
 }

 .custom-select.open .select-options {
     display: block;
 }

 .select-options li {
     padding: 10px 18px;
     font-size: 14px;
     color: #1f2937;
     cursor: pointer;
 }

 .select-options li:hover,
 .select-options li.active {
     background: #fff5f2;
     color: #ff8c00;
 }

 /* ===== INPUT ===== */
 .course-search input {
     flex: 1;
     height: 100%;

     border: none;
     outline: none;
     padding: 0 16px;
     font-size: 15px;
 }

 /* ===== SEARCH BUTTON ===== */
 .search-btn {
     background: transparent;
     border: none;
     padding: 0 18px;
     font-size: 18px;
     cursor: pointer;
 }


 .faq-section {

     margin: auto;
     padding: 60px;
     display: flex;
     justify-content: center;
     background: #EFF0FF;
 }






 /* RIGHT CONTENT */
 .faq-content {
     width: 70%;
 }



 .faq-title {
     font-size: 42px;
     font-weight: 800;
     color: #111111;
     margin-bottom: 12px;
 }

 .faq-desc {
     color: #6b7280;
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 32px;
 }

 /* ACCORDION */
 .faq-accordion {
     border: 1px solid #e5e7eb;
     border-radius: 14px;
     overflow: hidden;
 }

 .faq-item {
     border-bottom: 1px solid #e5e7eb;
 }

 .faq-item:last-child {
     border-bottom: none;
 }

 .faq-question {
     background: white;
     padding: 18px 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     cursor: pointer;

 }

 .faq-question h4 {
     font-size: 16px;
     font-weight: 600;
     color: #111111;
 }

 .faq-toggle {
     font-size: 22px;
     font-weight: 400;
     color: #111111;
     transition: transform 0.3s ease;
 }

 .faq-item.active .faq-question {
     background: transparent;

 }

 .faq-item.active .faq-answer {
     background: transparent;

 }

 .faq-item.active {
     background: color-mix(in srgb,
             var(--primary-color-pink) 8%,
             transparent);
 }

 .faq-item.active .faq-toggle {
     transform: rotate(45deg);
 }



 .faq-answer {
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.35s ease;
     background: white;

 }

 .faq-answer p {
     padding: 0 20px 20px;
     font-size: 15px;
     color: #6b7280;
     line-height: 1.6;
 }

 .inner-banner {
     background-image: url('https://dreamslms-wp.dreamstechnologies.com/wp-content/themes/dreamslms/assets/images/inner-banner.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     z-index: 1;
     position: relative;
     padding: 20px 0px;
 }

 .course-details {
     margin-top: 60px
 }

 .course-sidebar-sec {
     position: absolute;
     top: 200px;
     z-index: 2;
 }

 .course-overview {
     margin-top: 20px;
 }

 .overview-section {
     margin-bottom: 24px;
 }

 .overview-title {
     font-weight: 600;
     margin-bottom: 12px;
 }

 .overview-list {
     padding-left: 18px;
 }

 .overview-list li {
     margin-bottom: 8px;
     line-height: 1.6;
 }

 .career-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 12px;
 }

 .career-item {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .key-highlights {
     width: 65%;
     margin: auto;

 }

 .course-feature-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .course-feature-list li {
     display: flex;
     align-items: center;
     gap: 10px;

     font-size: 15px;
     line-height: 1.6;
 }

 .feature-icon {
     font-size: 18px;
     color: #ff7a00;
     /* orange like image */
     margin-top: 2px;
 }

 .inner-banner p {
     color: #fff;
     margin-right: 80px;
     text-align: justify;

 }

 .hero-info {
     display: grid;
     gap: 12px;
 }

 /* 🖥 Desktop: all in one row */
 @media (min-width: 992px) {
     .hero-info {
         grid-template-columns: repeat(5, auto);
         justify-content: start;
     }
 }

 /* 📱 Mobile: 2 - 2 - 1 layout */
 @media (max-width: 991px) {
     .hero-info {
         grid-template-columns: repeat(2, auto);
         justify-content: start;
     }


 }


 .hero-info-btn {
     text-decoration: none;
     color: white;
     background: #1D2839;
     padding: 8px 18px;
     border-radius: 100px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     cursor: pointer;
     font-size: 14px;


 }

 .hero-info-btn i {
     color: #00ADFF;
 }

 .inner-banner::before {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.75);
     z-index: -1;
 }

 .inner-banner .container {
     position: relative;
     z-index: 2;
 }

 .inner-banner .instructor-name a {
     color: #fff;
     font-size: 18px;
     font-weight: 700;
     text-decoration: none;
 }

 .inner-banner .instructor-name a:hover {
     color: var(--primary-color-orange);
     /* red on hover */
     text-decoration: none;
 }



 .course-sidebar {
     margin-top: -320px;
     position: relative;
     z-index: 100;
 }

 .course-preview img {
     width: 100%;
     border-radius: 12px;
 }


 .tutor-lesson-locked {
     color: #000;
     text-decoration: none;
 }

 .tutor-lesson-locked:hover {
     color: var(--primary-color-orange);
     text-decoration: none;
 }

 .course-features {
     padding: 20px;
 }


 .batch-schedule {
     border-radius: 12px;
 }

 .batch-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .batch-list li {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 12px 0;
     border-bottom: 1px solid #e5e7eb;
 }

 .batch-list li:last-child {
     border-bottom: none;
 }

 .batch-icon {
     width: 42px;
     height: 42px;
     border-radius: 10px;
     background: rgba(255, 159, 67, 0.15);
     /* orange soft bg */
     color: #ff9f43;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
 }

 .batch-list small {
     color: #6b7280;
     font-size: 13px;
 }

 .batch-list p {
     margin: 0;
     font-weight: 600;
     color: #111827;
     font-size: 15px;
 }

 .batch-scroll {
     max-height: 420px;
     /* adjust as needed */
     overflow-y: auto;
     padding-right: 6px;
 }

 /* Optional: smooth scrolling */
 .batch-scroll {
     scroll-behavior: smooth;
 }

 /* Custom scrollbar (Chrome, Edge, Safari) */
 .batch-scroll::-webkit-scrollbar {
     width: 6px;
 }

 .batch-scroll::-webkit-scrollbar-track {
     background: transparent;
 }

 .batch-scroll::-webkit-scrollbar-thumb {
     background-color: #e0e0e0;
     border-radius: 6px;
 }

 .batch-scroll::-webkit-scrollbar-thumb:hover {
     background-color: #c7c7c7;
 }

 /* Firefox */
 .batch-scroll {
     scrollbar-width: thin;
     scrollbar-color: #c7c7c7 transparent;
 }



 .popular_courses {
     margin-top: 100px;
     margin-bottom: 40px;
 }

 .all-popular-courses {
     margin-top: -20px;
     margin-bottom: 20px;
 }

 /* ========================= */
 /* CTA GRADIENT SECTION */
 /* ========================= */

 .cta-gradient {
     max-width: 1200px;
     margin: 80px auto;
     padding: 80px 40px;
     border-radius: 28px;
     display: flex;
     flex-direction: column;
     justify-content: center;

 }



 /* CONTENT */
 .cta-inner {
     position: relative;
     z-index: 2;
     text-align: center;
     max-width: 850px;
     margin: auto;
 }

 /* SMALL TITLE */
 .cta-title {
     color: #000;
     font-size: 26px;
     font-weight: 700;
     margin-bottom: 16px;
 }

 /* BIG HEADING */
 .cta-heading {
     font-size: 40px;
     font-weight: 800;
     margin-bottom: 20px;
     line-height: 1.25;
 }

 /* DESCRIPTION */
 .cta-desc {
     color: #424242;
     font-size: 16px;
     line-height: 1.7;
     margin-bottom: 36px;
 }

 .gradient-text {
     background: linear-gradient(90deg,
             #FFA307,
             #ff3d81,
             #B921DA);

     background-clip: text;
     -webkit-background-clip: text;

     color: transparent;
     -webkit-text-fill-color: transparent;
 }


 .snake-card {
     position: relative;
     width: 100%;
     max-width: 1200px;
     height: 400px;
     margin: 80px auto;
     border-radius: 28px;
     background: #fff;
     overflow: hidden;
 }



 /* 🐍 REAL SNAKE */
 .snake-card::before {
     content: "";
     position: absolute;
     inset: 0;
     padding: 3px;
     border-radius: inherit;

     background:
         linear-gradient(90deg,
             transparent 0%,
             #ff9f0a 30%,
             #ff3d81 50%,
             #a855f7 70%,
             transparent 100%);

     background-size: 200% 100%;
     animation: snakeRun 6s linear infinite;

     /* show only border */
     -webkit-mask:
         linear-gradient(#fff 0 0) content-box,
         linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;


     pointer-events: none;
 }

 .snake-card-auth {
     position: relative;
     width: 100%;

     border-radius: 28px;
     background: #fff;
     overflow: hidden;

 }

 .snake-card-auth::before {
     content: "";
     position: absolute;
     inset: 0;
     padding: 3px;
     border-radius: inherit;

     background:
         linear-gradient(90deg,
             transparent 0%,
             #ff9f0a 30%,
             #ff3d81 50%,
             #a855f7 70%,
             transparent 100%);

     background-size: 200% 100%;
     animation: snakeRun 6s linear infinite;

     /* show only border */
     -webkit-mask:
         linear-gradient(#fff 0 0) content-box,
         linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;


     pointer-events: none;
 }

 @keyframes snakeRun {
     0% {
         background-position: 200% 0;

     }

     100% {
         background-position: -200% 0;
     }
 }

 .exclusive-section {
     padding: 100px 0;
     background: radial-gradient(circle at center, #4b145b, #0c0612);
 }

 .exclusive-title {
     text-align: center;
     font-size: 44px;
     font-weight: 800;
     margin-bottom: 16px;
     color: #ffffff;
 }

 .exclusive-subtitle {
     max-width: 760px;
     margin: 0 auto 70px;
     text-align: center;
     font-size: 18px;
     color: #aeaeae;
     line-height: 1.7;
 }




 .support-grid {
     display: grid;
     gap: 24px;
     margin: 0px 80px;
     margin-bottom: 40px;
 }

 /* Desktop: 5 in one row */
 @media (min-width: 1200px) {
     .support-grid {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 /* Tablet */
 @media (max-width: 1199px) and (min-width: 768px) {
     .support-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 /* Mobile */
 @media (max-width: 767px) {
     .support-grid {
         grid-template-columns: repeat(1, 1fr);
     }

     .support-grid {
         margin: 0px 50px;
     }
 }

 .support-card {
     background: #fdfdf2;
     border-radius: 28px;
     padding: 28px 22px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
 }

 .support-card h4 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 14px;
     color: #111;
 }

 .support-card p {
     font-size: 16px;
     color: #6b7280;
     line-height: 1.7;
 }

 .watch-now-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 6px;
     font-size: 13px;
     font-weight: 600;
     color: #e6392f;
     background: transparent;
     border: 2px solid #e6392f;
     border-radius: 8px;
     width: 140px;
     cursor: pointer;
     transition: all 0.25s ease;
 }

 /* Play icon */
 .watch-now-btn .play-icon {
     width: 20px;
     height: 20px;

     display: flex;
     align-items: center;
     justify-content: center;

     font-size: 12px;
     color: #fff;
     background: #e6392f;

     border-radius: 50%;
 }



 /* Hover effect */
 .watch-now-btn:hover {
     background: rgba(230, 57, 47, 0.08);
     border-color: #e6392f;
 }

 .video-modal {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.7);
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 9999;
 }

 .video-modal.active {
     display: flex;
 }

 .video-modal-content {
     position: relative;
     width: 90%;
     max-width: 800px;
     background: #000;
     border-radius: 12px;
     overflow: hidden;
 }

 .video-modal-content iframe {
     width: 100%;
     height: 450px;
     border: none;
 }

 .video-close {
     position: absolute;
     top: 10px;
     right: 12px;
     background: #fff;
     border: none;
     font-size: 24px;
     line-height: 1;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     cursor: pointer;
     z-index: 2;

 }

 .exclusive-grid {
     display: grid;
     gap: 24px;
 }

 /* Desktop: 5 in one row */
 @media (min-width: 1200px) {
     .exclusive-grid {
         grid-template-columns: repeat(5, 1fr);
     }
 }

 /* Tablet */
 @media (max-width: 1199px) and (min-width: 768px) {
     .exclusive-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 /* Mobile */
 @media (max-width: 767px) {
     .exclusive-grid {
         grid-template-columns: repeat(1, 1fr);
     }
 }

 /* CARD */


 .exclusive-card {
     background: #fdfdf2;
     border-radius: 28px;
     padding: 28px 22px;


     text-align: justify;


 }

 .exclusive-blue {
     background: #efefff;
 }

 .exclusive-purple {
     background: #faefff;
 }

 .exclusive-gray {
     background: #effdff;
 }

 .exclusive-green {
     background: #f4ffef;
 }

 .exclusive-red {
     background: #ffefef;
 }


 .exclusive-card h4 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 14px;
     color: #111;
 }

 .exclusive-card p {
     font-size: 16px;
     color: #6b7280;
     line-height: 1.7;
 }

 /* ICON */
 .exclusive-card .icon {
     width: 56px;
     height: 56px;
     border-radius: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 26px;
     margin-bottom: 20px;
 }

 .exclusive-card .icon i {
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     color: transparent;
 }


 /* ICON COLORS */
 .icon.purple {
     color: var(--primary-color-orange);
     background: #ffedd5;
 }

 .icon.green {
     color: var(--primary-color-orange);
     background: #ffedd5;
 }

 .icon.orange {
     color: var(--primary-color-orange);
     background: #ffedd5;
 }

 .icon.blue {
     color: var(--primary-color-orange);
     background: #ffedd5;
 }

 .icon.pink {
     color: var(--primary-color-orange);
     background: #ffedd5;
 }

 .course-outline {
     padding: 12px;
     background: #fff;

 }

 .outline-wrapper {
     border-radius: 14px;
     background: linear-gradient(135deg, #fff5f2, #f5f7ff);
     border: 1px solid #8b90ff;



 }

 .outline-content {
     margin-top: 30px;
     display: flex;
     flex-direction: column;
     align-items: center;
     /* 🔥 THIS WAS MISSING */
     justify-content: center;

     text-align: center;
     /* 🔥 for text alignment */
 }


 .outline-title {
     text-align: center;
     font-size: 34px;
     font-weight: 800;
     margin-bottom: 12px;
     color: #111;
 }

 .outline-info {
     text-align: center;
     font-size: 16px;
     color: #555;
     margin-bottom: 40px;
 }

 .outline-info .highlight {
     color: #e11d48;
     font-weight: 600;
 }

 .outline-info .info-icon {
     margin-right: 6px;
 }

 /* GRID */
 .outline-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 22px;
 }

 /* CARD */
 .outline-card {
     background: #f3f4f6;
     border-radius: 14px;
     padding: 30px 20px;
     text-align: center;
 }

 .outline-card img {
     width: 52px;
     height: 52px;
     margin-bottom: 14px;
 }

 .outline-card h4 {
     font-size: 18px;
     font-weight: 700;
     color: #333;
 }



 .software-section {
     background: #eef7fb;
     padding: 28px 60px 40px;
 }

 .software-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 14px;
     border-bottom: 1px solid #cfe6f3;
     margin-bottom: 32px;
 }

 .software-header h4 {
     margin: 0;
     font-size: 20px;
     font-weight: 600;
     color: #111;
 }

 .ai-tag {
     font-size: 14px;
     color: #666;
 }

 /* Slider Wrapper */
 .software-slider-wrapper {
     position: relative;
     display: flex;
     align-items: center;
 }

 /* Swiper */
 .softwareSwiper {
     width: 100%;
 }

 /* Slide */
 .swiper-slide {
     display: flex;
     justify-content: center;
 }

 /* Item */
 .software-item {
     text-align: center;
 }

 .software-item img {
     width: 64px;
     height: 64px;
     margin-bottom: 14px;
 }

 .software-item p {
     font-size: 15px;
     font-weight: 500;
     color: #222;
     margin: 0;
 }


 .software-nav:hover {
     background: var(--primary-color-orange);
 }

 .swiper-button-prev::after,
 .swiper-button-next::after {
     font-size: 14px;
     font-weight: bold;
 }

 .swiper-button-prev {
     left: -10px;
 }

 .swiper-button-next {
     right: -10px;
 }





 .instructor-card {
     width: 100%;
     font-family: system-ui, -apple-system, BlinkMacSystemFont;
     color: #1c1d1f;
     background: #f3f3fb;
     padding: 20px;
     border-radius: 10px;
 }

 .top {
     display: flex;
     gap: 20px;
     align-items: flex-start;
 }

 .avatar {
     width: 96px;
     height: 96px;
     border-radius: 50%;
     object-fit: cover;
 }

 .stats {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .stats li {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 14px;
     margin-bottom: 10px;
     color: #1c1d1f;
 }

 .stats i {
     font-size: 16px;
     color: #1c1d1f;
 }

 .title {
     margin: 24px 0 8px;
     font-size: 15px;
     font-weight: 600;
     color: #000;
 }

 .bio {
     font-size: 14px;
     line-height: 1.6;
     color: #3e4143;
     max-height: 72px;
     overflow: hidden;
     transition: max-height 0.35s ease;
 }

 .toggle-btn {
     margin-top: 12px;
     border: none;
     background: #ede7ff;
     color: #5624d0;
     font-size: 14px;
     padding: 8px 14px;
     border-radius: 6px;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 6px;
 }





 .student-showcase {
     padding: 20px;

     background: #fff;
 }

 .section-title {
     font-weight: 700;
     margin-bottom: 20px;
 }

 .projectSwiper img {
     width: 100%;
     border-radius: 12px;
 }

 .testimonial-wrapper {
     position: relative;

     max-width: 800px;
 }

 .testimonial-card {
     background: #fff;
     border-radius: 12px;
     padding: 25px;
     width: 490px;
     height: 250px;

     box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
 }

 .testimonial-card p {
     font-size: 15px;
     line-height: 1.7;
     color: #333;
 }

 .author {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-top: 20px;
 }

 .author img {
     width: 48px;
     height: 48px;
     border-radius: 50%;
 }

 .author h6 {
     margin: 0;
     font-size: 14px;
     color: #333;
 }

 .author span {
     font-size: 12px;
     color: #777;
 }



 .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.4);
     display: none;
     align-items: center;
     justify-content: center;
     z-index: 999;
 }

 .modal-box {
     background: #fff;
     width: 420px;
     padding: 24px;
     border-radius: 12px;
 }

 .modal-box h4 {
     margin-bottom: 12px;
 }

 .modal-box textarea {
     width: 100%;
     height: 120px;
     padding: 10px;
     border-radius: 8px;
     border: 1px solid #ddd;
     resize: none;
 }

 .modal-actions {
     display: flex;
     justify-content: flex-end;
     gap: 12px;
     margin-top: 14px;
 }

 .certificate-section {
     padding: 60px 20px;
     background: radial-gradient(circle at center, #4b145b, #0c0612);
     border-radius: 16px;

 }

 .certificate-container {
     max-width: 1100px;
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1.1fr 1fr;
     gap: 40px;
     align-items: center;
 }

 .certificate-content h2 {
     font-size: 32px;
     font-weight: 700;
     color: #ffffff;
     margin-bottom: 10px;
 }

 .certificate-content .subtitle {
     color: #eaf6ff;
     font-size: 15px;
     margin-bottom: 24px;
 }

 .certificate-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .certificate-list li {
     display: flex;
     align-items: center;

     gap: 12px;
     color: #ffffff;
     font-size: 15px;
     margin-bottom: 14px;
 }

 .certificate-list .icon {
     width: 38px;
     height: 38px;
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.15);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
 }

 @media (max-width: 992px) {
     .certificate-wrapper {
         grid-template-columns: 1fr;
         text-align: center;
     }

     .certificate-list li {
         justify-content: center;
     }
 }

 /* LEFT SLIDER */
 .certificate-slider {
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;

     max-width: 400px;
 }

 .certificate-slider img {
     width: 100%;
     border-radius: 16px;
     background: #fff;
     padding: 16px;
 }

 .certificate-image {
     display: flex;
     justify-content: center;
 }

 .certificate-image img {
     width: 100%;
     max-width: 420px;
     border-radius: 12px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);


 }



 .pagination .page-item .page-link {

     color: #000;
 }

 .see-more {
     bottom: -10px;
     left: 45%;
     background: white;
     border: 1px solid rgb(176, 176, 176);
     padding: 1px 8px;
     font-size: 14px;
     cursor: pointer;
     border-radius: 50px;
     box-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);
     display: none;
     user-select: none;
 }

 .course-description {
     overflow: hidden;
     transition: max-height 0.4s ease;
 }


 .course-prerequisites {
     display: flex;
     align-items: center;
     text-align: center;
     gap: 5px;
     flex-wrap: wrap;
     font-size: 14px;
     background: #f4ffe7;
     border-radius: 16px;
     padding: 0px 20px;
 }

 .course-prerequisites .title {
     font-weight: 600;
     font-size: 30px;
     color: #111;
     margin-top: 7px;
 }

 .course-prerequisites .items {
     display: flex;
     align-items: center;
     gap: 20px;
     flex-wrap: wrap;
 }

 .course-prerequisites .item {
     display: flex;
     align-items: center;
     gap: 6px;
     color: #5a5a5a;
 }

 .course-prerequisites .item i {
     font-size: 20px;
     color: #8bc34a;
 }

 .course-prerequisites .item span {
     font-size: 17px;
     color: #000000;
 }

 .signup-wrapper {


     display: flex;
     align-items: center;
     justify-content: center;
 }

 .signup-card {
     width: 520px;
     background: #fff;
     border-radius: 16px;
     padding: 32px;
     box-shadow: 0 15px 40px rgba(0, 0, 0, .1);
 }

 .signup-card h2 {
     text-align: center;
     margin-bottom: 6px;
 }


 .login-card {
     width: 520px;
     background: #fff;
     border-radius: 16px;
     padding: 32px;
     box-shadow: 0 15px 40px rgba(0, 0, 0, .1);
 }

 .login-wrapper {


     display: flex;
     align-items: center;
     justify-content: center;
 }

 .login-card h2 {
     text-align: center;
     margin-bottom: 6px;
 }


 .signup-subtitle {
     text-align: center;
     font-size: 14px;
     color: #666;
     margin-bottom: 24px;
 }

 .field {
     margin-bottom: 16px;
 }

 .field label {
     display: block;
     font-size: 13px;
     margin-bottom: 6px;
     font-weight: 500;
 }

 .field input,
 .phone-input select {
     width: 100%;
     padding: 12px 14px;
     border-radius: 10px;
     border: 1px solid #ddd;
     font-size: 14px;
 }

 .field input:focus,
 .phone-input select:focus {
     outline: none;
     border-color: #6c63ff;
 }

 .phone-input {
     display: flex;
     gap: 10px;
 }

 .phone-input select {
     width: 120px;
     background: #fff;
     cursor: pointer;
 }

 .password-field {
     position: relative;
 }

 .password-field i {
     position: absolute;
     right: 14px;
     top: 38px;
     cursor: pointer;
     color: #777;
 }

 .terms {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 13px;
     margin: 16px 0;
 }

 .terms a {
     color: #6c63ff;
     text-decoration: none;
 }

 .btn-primary {
     width: 100%;
     padding: 14px;
     border: none;
     border-radius: 12px;
     background: linear-gradient(90deg, #7f5cff, #5b3df5);
     color: #fff;
     font-size: 16px;
     cursor: pointer;
 }

 .signin-text {
     text-align: center;
     font-size: 14px;
     margin-top: 18px;
 }

 .signin-text a {
     color: #6c63ff;
     text-decoration: none;
 }


 .countdown-bar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 14px;
     background: #fff;
     color: #000;
     border-radius: 8px;
     max-width: 900px;
     margin-top: -40px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

 }

 .countdown-text {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 16px;
     font-weight: 500;
 }

 .clock-icon {
     font-size: 18px;
 }

 .timer {
     display: flex;
     gap: 20px;
 }

 .time-box {
     text-align: center;
     min-width: 60px;
     background: white;
     padding: 8px;
     border-radius: 8px;
 }

 .time-box span {
     display: block;
     font-size: 22px;
     font-weight: bold;
     color: #000;
 }

 .time-box small {
     font-size: 12px;
     color: #757575;
 }

 .dashboard {
     display: flex;

 }

 /* ===== SIDEBAR ===== */
 .sidebar {
     width: 260px;
     background: white;
     color: #000;
     padding: 30px 20px;
     height: 600px;
     box-shadow: 4px 0 18px rgba(0, 0, 0, 0.15);
     border-radius: 8px;
 }


 .profile-box {
     text-align: center;
     margin-bottom: 30px;
 }

 .profile-box img {
     width: 90px;
     height: 90px;
     border-radius: 50%;
     border: 4px solid rgba(255, 255, 255, 0.3);
     object-fit: cover;
 }

 .profile-box h3 {
     margin-top: 12px;
     font-size: 18px;
     font-weight: bold;
 }

 /* ===== MENU ===== */
 .menu {
     list-style: none;
     margin-top: 25px;
 }

 .menu li {
     padding: 12px 15px;
     border-radius: 6px;
     cursor: pointer;
     font-size: 16px;
     margin-bottom: 6px;

 }

 .menu li:hover,
 .menu li.active {
     background: rgba(191, 82, 180, 0.17);
 }

 /* ===== MAIN CONTENT ===== */
 .main {
     flex: 1;
     padding: 0px 30px;
 }



 .designed-for-section {
     border-radius: 8px;
     padding: 20px;
     background: white;
 }

 .section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 18px;
 }

 .section-header h2 {
     font-size: 22px;
     font-weight: 600;
 }

 .section-header .badge {
     font-size: 14px;
     color: #666;
 }

 .swiper {
     padding: 10px 0;
 }

 .swiper-slide {
     width: auto;
 }

 .slide-item {
     width: 180px;
     height: 150px;
     background: #f1f3f6;
     border-radius: 14px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;

 }



 .designed-for-card {
     display: flex;
     flex-direction: column;
     gap: 5px;
     text-align: center;
 }

 .slide-item img {
     width: 100px;
     height: 100px;
     object-fit: contain;
 }

 .slide-item p {
     font-size: 15px;
     font-weight: 500;
     color: #333;
 }

 .profile-section {
     background: #fff;
     padding: 30px;
     max-width: 1100px;
     box-shadow: 4px 0 18px rgba(0, 0, 0, 0.15);
     border-radius: 8px;
 }

 .profile-form {
     width: 100%;
 }

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

 .form-group label {
     font-size: 15px;
     font-weight: 500;
     display: block;
     margin-bottom: 6px;
 }


 .form-group input,
 .form-group select {
     width: 100%;
     height: 48px;
     border-radius: 8px;
     border: 1px solid #eee;
     padding: 0 14px;
     font-size: 15px;
     background: #fafafa;
 }

 .form-group input:focus,
 .form-group select:focus {
     outline: none;
     border-color: #4f6ef7;
     background: #fff;
 }

 .form-group input[disabled] {
     background: #eef0f2;
     color: #777;
 }

 /* Profile image section */
 .image-section {
     margin-top: 30px;
 }

 .image-section label {
     font-weight: 500;
     display: block;
     margin-bottom: 10px;
 }

 .btn-gray {
     background: #6c727a;
     color: #fff;
     padding: 10px 18px;
     border-radius: 6px;
     border: none;
     cursor: pointer;
 }

 .hint {
     font-size: 13px;
     color: #777;
     margin-top: 10px;
 }


 /* ===== Scroll To Top Button ===== */
 #scrollTopBtn {
     position: fixed;
     bottom: 24px;
     right: 24px;
     width: 52px;
     height: 52px;
     border-radius: 50%;
     background: var(--primary-color-pink);
     /* red like image */
     color: #fff;
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     cursor: pointer;
     z-index: 9999;

     opacity: 0;
     visibility: hidden;
     transform: translateY(20px);
     transition: all 0.3s ease;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
 }

 #scrollTopBtn:hover {
     background: #f34de3;
     transform: translateY(0) scale(1.05);
 }

 /* Show button */
 #scrollTopBtn.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 /* Mobile size */
 @media (max-width: 576px) {
     #scrollTopBtn {
         width: 46px;
         height: 46px;
         font-size: 20px;
         bottom: 18px;
         right: 18px;
     }
 }

 /* Responsive */
 @media (max-width: 768px) {
     .form-grid {
         grid-template-columns: 1fr;
     }
 }

 /* Mobile */
 @media (max-width: 768px) {
     .slide-item {
         width: 150px;
         height: 140px;
     }
 }



 @media (max-width: 768px) {
     .certificate-container {
         grid-template-columns: 1fr;
         text-align: start;
     }



     .certificate-image img {
         margin: 0 auto;
     }
 }



 /* RESPONSIVE */
 @media (max-width: 1200px) {
     .outline-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 @media (max-width: 768px) {
     .outline-grid {
         grid-template-columns: repeat(1, 1fr);

     }

     .custom-nav-testimonial {
         width: 30px;
         height: 30px;
         background: #fff;
         border: 2px solid var(--primary-color-orange);
         border-radius: 50%;
         color: var(--primary-color-orange);

     }

     .testimonial-card {

         width: 376px;


     }
 }

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


     .faq-section {

         margin-top: 40px;
         margin-bottom: 40px;
     }

     .faq-content {
         width: 80%;
     }

     .faq-title {
         font-size: 34px;
     }
 }

 /* RESPONSIVE */
 @media (max-width: 991px) {
     .category-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 575px) {
     .course-search input {

         width: 200px;

     }

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

     .section-title {
         font-size: 28px;
         display: flex;
         justify-content: center;
     }

     .section-desc {
         display: flex;
         text-align: center;
         justify-content: center;
         padding-left: 14px;
         padding-right: 10px;
     }

     .explore-btn {
         display: flex;
         justify-content: center;
     }

     .subscribe-box {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 14px;
     }

     .subscribe-box button {
         padding: 10px;
         width: 120px;
     }

     .subscribe-box input {
         width: 200px;
     }

     .subtitle {
         display: none;
     }

     .title {
         display: flex;
         justify-content: center;
         text-align: center;
     }

     .desc {
         display: flex;
         justify-content: center;
         text-align: center;
     }

     .footer_btn {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 14px;
     }

     .side-discount {
         width: 30px;
         height: 100px;
     }

     .side-discount span {
         font-size: 6px;
     }

     .side-seminar {
         width: 30px;
         height: 100px;
     }

     .side-seminar span {
         font-size: 6px;
     }

     .course-sidebar {
         margin-top: 0;
         position: relative;
         z-index: 100;
     }


 }

 /* RESPONSIVE */
 @media (max-width: 992px) {
     .newsletter-container {
         grid-template-columns: 1fr;
     }

     .title {
         font-size: 34px;
     }
 }


 /* Responsive */
 @media (max-width: 992px) {
     .feature-box {
         grid-template-columns: repeat(2, 1fr);
         padding: 32px;
     }

     .footer-copyright {
         flex-direction: column;
         gap: 18px;
         text-align: center;
     }
 }



 @media (max-width: 576px) {
     .hero-left {
         text-align: center;
     }

     .hero h1 {
         font-size: 38px;
         font-weight: 800;
         line-height: 1.2;
     }


     .hero-buttons {

         justify-content: center;
         margin-bottom: 20px;
     }

     .category-slider-section {


         margin-left: 50px;
         margin-right: 50px;



     }

     .footer_item_1 ul li .footer_icon {
         min-width: 18px;
         height: 18px;

     }

     .footer_item_1 ul li .footer_icon svg {
         min-width: 18px;
         height: 18px;


     }



     .footer_item_1 {
         margin-left: 10px;
     }

     .footer_item_2 {
         margin-left: 10px;
     }

     .footer-copyright {
         flex-direction: column;
         gap: 18px;
         text-align: center;
     }

     /* logo center */
     .footer_logo {
         display: flex;
         justify-content: center;
     }

     /* 🔥 social in middle */
     .footer-social {
         order: 2;
         justify-content: center;
     }

     /* copyright bottom */
     .copy_text {
         order: 3;
         margin: 0px 50px;
     }

     .copy_text p {
         margin: 0;
         font-size: 14px;
     }



     .modal-content {
         border-radius: 12px;
     }

     .feature-box {
         grid-template-columns: 1fr;
     }

     .section-title {
         font-size: 32px;
     }

     .custom-nav-testimonial {
         width: 30px;
         height: 30px;
         background: #fff;
         border: 2px solid var(--primary-color-orange);
         border-radius: 50%;
         color: var(--primary-color-orange);

     }

     .testimonial-card {

         width: 230px;
         height: 250px;


     }

     .testimonial-card p {

         font-size: 10px;


     }

     .section-title {

         text-align: center;
     }


     .author img {
         width: 40px;
         height: 40px;
         border-radius: 50%;
     }

     .author h6 {
         margin: 0;
         font-size: 14px;
         color: #333;
     }

     .author span {
         font-size: 10px;
         color: #777;
     }

     .custom-select {
         min-width: 120px;

     }

     .signup-card {
         width: 380px;

     }

     .login-card {
         width: 380px;

     }

     .snake-card {

         height: 550px;


     }


     .course-certificate-section {
         padding: 80px 20px;
         background: #fff5f2;
     }

     .certificate-wrapper {
         max-width: 1200px;
         margin: auto;
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 50px;
         padding: 50px;
         border-radius: 22px;
         background: linear-gradient(135deg, #1a0026, #4b1366, #1a0026);
         color: #fff;
     }



     /* RIGHT CONTENT */
     .certificate-content h2 {
         font-size: 30px;
         margin-bottom: 10px;
         text-align: start;
     }

     .subtitle {
         font-size: 16px;
         opacity: 0.9;
         margin-bottom: 30px;
     }

     .certificate-list {
         list-style: none;
         padding: 0;
         margin: 0;
     }

     .certificate-list li {
         display: flex;
         align-items: center;
         gap: 14px;
         margin-bottom: 18px;
         font-size: 12px;
         justify-content: start;


     }

     .certificate-list .icon {
         width: 38px;
         height: 38px;
         border-radius: 8px;
         background: rgba(255, 255, 255, 0.15);
         display: flex;
         align-items: center;
         justify-content: center;
         font-weight: bold;
     }

     .certificate-slider {
         max-width: 300px;
     }

     .countdown-bar {
         display: flex;
         flex-direction: column;
         text-align: center;

     }

     .countdown-text {
         margin-bottom: 10px;
     }

     .countdown-text span {
         font-size: 12px;
     }
 }