.teams {
     background: linear-gradient(to right, #255d95, #255d95);
 }
 
 :root {
     --primary: rgb(0 86 214);
     --secondary: rgb(0 86 214);
     --dark: #021927;
     --light-bg: #f5f9fc;
     --bg-primary: #0c3762;
 }
 
 body {
     /* font-family: Roboto, Arial, Helvetica, sans-serif; */
     /* font-family: 'Rubik', sans-serif; */
     font-family: 'Roboto', sans-serif;
 }
 /* Navbar */
 
 .navbar {
     padding: 15px 0;
     transition: 0.3s;
 }
 /* Hero */
 
 .btn-color {
     background: #fff !important;
     color: #0c69a8 !important;
 }
 
 .hero {
     padding: 75px 0 100px;
     background: linear-gradient(to right, #255d95, #255d95);
 }
 
 .hero h1 {
     font-size: 42px;
     font-weight: 700;
 }
 /* Button Animation */
 
 .btn-primary {
     transition: 0.3s;
 }
 
 .btn-primary:hover {
     transform: scale(1.05);
 }
 /* Image Animation */
 
 .hero img {
     transition: 0.4s;
 }
 
 .hero img:hover {
     transform: scale(1.05);
 }
 /* Cards */
 
 .hclass {
     font-size: 2.5rem;
     font-style: italic;
     font-weight: 900;
     color: black;
 }
 
 .feature-box {
     padding: 25px;
     border-radius: 15px;
     background: #fff;
     height: 100%;
     /* transition: 0.4s; */
     border: 2px solid rgb(12 105 168);
     box-shadow: 5px 10px lightblue;
 }
 
 .feature-box:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
 }
 /* Footer */
 
 footer {
     background: #021927;
     color: #fff;
 }
 /* Logo */
 
 .logo {
     height: 50px;
 }
 /* Nav links spacing */
 
 .navbar-nav .nav-link {
     margin: 0 10px;
     font-weight: 500;
     transition: 0.3s;
     color: #fff;
 }
 /* Hover effect */
 
 .navbar-nav .nav-link:hover {
     color: #fff;
 }
 /* Active link */
 
 .text-primary {
     color: var(--primary) !important;
 }
 
 .btn-primary {
     background: var(--primary) !important;
     border: none;
 }
 
 .btn-primary:hover {
     background: #0d6efd !important;
 }
 
 .navbar-nav .nav-link.active {
     color: #fff;
     font-weight: 600;
 }
 /* Login button */
 
 .btn-primary {
     border-radius: 20px;
     padding: 6px 20px;
 }
 
 .core-services-section {
     background: linear-gradient(to right, #255d95, #255d95);
 }
 /* Small top text */
 
 .letter-spacing {
     letter-spacing: 3px;
     font-size: 14px;
 }
 /* Card Design */
 
 .service-card {
     background: #fff;
     border-radius: 15px;
     padding: 40px 20px;
     transition: 0.4s;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
     height: 100%;
 }
 
 .service-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
 }
 /* Icon Circle */
 
 .icon-box {
     width: 80px;
     height: 80px;
     background: #e6f4fa;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
 }
 
 .icon-box i {
     font-size: 30px;
     color: #1b9cc8;
 }
 /* Text */
 
 .service-card h5 {
     font-weight: 600;
     margin-bottom: 10px;
 }
 
 .service-card p {
     color: #6c757d;
     font-size: 14px;
 }
 
 .courses-section {
     background: linear-gradient(to right, #f8f9fa, #fff);
 }
 
 .Services-section {
     background: linear-gradient(to right, #255d95, #255d95);
 }
 /* Card */
 
 .course-card {
     background: #fff;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
     transition: 0.3s;
 }
 
 .course-content p {
     margin: 0;
     font-size: 18px;
     color: var(--primary);
 }
 
 .course-card:hover {
     transform: translateY(-10px) scale(1.02);
 }
 /* Image */
 
 .course-card img {
     height: 200px;
     object-fit: cover;
     width: 100%;
 }
 /* Content */
 
 .course-content {
     padding: 15px;
 }
 
 .course-content h5 {
     /* font-weight: 600; */
 }
 /* Parent container me ye ensure karo */
 
 .swiper {
     /* padding: 0 50px; */
     /* arrows ke liye space */
     overflow: hidden;
     /* side ka extra content hide */
 }
 /* Navigation Buttons */
 
 .swiper-button-next,
 .swiper-button-prev {
     background: #255d95;
     width: 45px;
     height: 45px;
     border-radius: 50%;
     /* perfect circle */
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
     color: #fff;
     /* arrow color */
 }
 /* Arrow size fix */
 
 .swiper-button-next::after,
 .swiper-button-prev::after {
     font-size: 18px;
     font-weight: bold;
 }
 /* Position thoda bahar laane ke liye */
 
 .swiper-button-prev {
     left: 0px;
 }
 
 .swiper-button-next {
     right: 0px;
 }
 
 .course-content .btn-primary {
     border-radius: 20px;
     padding: 5px 15px;
 }
 
 .Services-wrapper {
     position: relative;
 }
 
 .Services-content .btn-primary {
     border-radius: 20px;
     padding: 5px 15px;
 }
 /* Arrow bottom center */
 
 .carousel-control-prev,
 .carousel-control-next {
     top: auto;
     bottom: -50px;
     width: auto;
 }
 
 .carousel-control-prev {
     left: 45%;
 }
 
 .carousel-control-next {
     right: 45%;
 }
 /* Arrow design */
 
 .custom-arrow {
     background-color: #333;
     border-radius: 50%;
     padding: 15px;
 }
 /* Card hover */
 
 .card:hover {
     transform: translateY(-8px);
     transition: 0.3s;
 }
 
 .fontsize1 {
     font-size: 15px;
 }
 
 .fontsize2 {
     font-size: 13px;
 }
 
 .footer-section {
     position: relative;
     background: #0d6efd;
     /* background: url('https://images.unsplash.com/photo-1518770660439-4636190af475') center/cover no-repeat; */
 }
 /* DARK OVERLAY */
 
 .footer-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to right, #0056d6, #0056d6)
 }
 
 .contentNumber-0-2-420 {
     height: 30%;
     padding: 17px;
     font-size: 25px;
     background: rgb(242, 252, 255);
     font-weight: 700;
     margin: 20px;
     justify-content: center;
 }
 
 .bg-video1 {
     position: relative;
     min-height: 100vh;
     /* 👈 increase height */
     overflow: hidden;
     display: flex;
     align-items: center;
 }
 
 .service-hero {
     position: relative;
     min-height: 90vh;
     overflow: hidden;
 }
 /* FOR COURSES PAGE SPECIALLY */
 /* VIDEO */
 
 .bg-video {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform: translate(-50%, -50%);
     z-index: 0;
     /* 👈 behind everything */
 }
 
 .colorp {
     color: rgb(12 105 168) !important;
 }
 /* DARK OVERLAY */
 
 .service-hero::before {
     content: "";
     position: absolute;
     inset: 0;
     /* background: rgba(0, 0, 0, 0.5); */
     z-index: 1;
     /* 👈 above video */
 }
 /* TEXT CONTENT */
 
 .service-hero .container {
     position: relative;
     z-index: 2;
     /* 👈 above overlay */
 }
 
 .navbar {
     /* //  background: linear-gradient(to right, #234056, #11aade); */
     background: linear-gradient(to right, #0056d6, #0056d6);
 }
 /* DARK OVERLAY */
 /* LINKS */
 
 .footer-link {
     color: #fff;
     text-decoration: none;
 }
 
 .footer-link:hover {
     color: #020202;
 }
 /* SOCIAL ICONS */
 
 .social-icon {
     font-size: 18px;
     color: #fff;
     transition: 0.3s;
 }
 
 .social-icon:hover {
     color: rgb(12 105 168);
 }
 /* LOGO */
 
 .footer-section .logo img {
     /* filter: brightness(0) invert(1); */
     /* white logo effect */
 }
 /* MOBILE */
 
 @media (max-width: 768px) {
     .footer-section {
         text-align: center;
     }
     .social-icon {
         font-size: 20px;
     }
 }
 /* ABOUT HERO */
 
 .about-hero {
     height: 280px;
     margin-top: 80px;
     background: url('../image/about.jpg');
 }
 /* CONTACT HERO */
 
 .contact-hero {
     height: 280px;
     margin-top: 80px;
     background: url('../image/about.jpg');
 }
 
 .logo-slider {
     overflow: hidden;
     white-space: nowrap;
     position: relative;
 }
 
 .logo-track {
     display: inline-block;
     animation: scroll 20s linear infinite;
 }
 /* Body */
 
 .logo-track img {
     height: 80px;
     margin: 6px;
     width: 110px;
     border-radius: 7%;
     border: 3px solid #fff;
     box-shadow: 0 2px 6px rgb(74, 78, 78);
 }
 /* RIGHT → LEFT Animation */
 
 @keyframes scroll {
     0% {
         transform: translateX(0);
     }
     100% {
         transform: translateX(-50%);
     }
 }
 
 .gallery-hero {
     height: 280px;
     margin-top: 80px;
     background: url('../image/about.jpg');
 }
 /* COMMON HERO EFFECT (optional shared class bana sakte ho) */
 
 .about-hero,
 .contact-hero,
 .gallery-hero {
     position: relative;
     overflow: hidden;
 }
 /* Animated background pattern */
 /* HERO SECTION */
 
 .hero {
     height: 94vh;
     position: relative;
     overflow: hidden;
 }
 /* IMAGE / VIDEO */
 
 .hero-media {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 /* OVERLAY */
 
 .overlay {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.6);
 }
 /* TEXT CENTER FIX */
 
 .carousel-item {
     height: 94vh;
 }
 
 .carousel-caption-custom {
     position: absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     z-index: 2;
     color: #fff;
     width: 90%;
 }
 /* TEXT STYLE */
 
 .carousel-caption-custom h1 {
     font-size: 52px;
     font-weight: 700;
     /* animation: fadeUp 1s ease; */
 }
 
 .modal-lg,
 .modal-xl {
     --bs-modal-width: 600px !important;
 }
 
 .carousel-caption-custom p {
     font-size: 18px;
     margin-top: 10px;
     /* animation: fadeUp 1.2s ease; */
 }
 
 .carousel-caption-custom .btn {
     margin-top: 20px;
     padding: 10px 25px;
     font-size: 16px;
 }
 /* ANIMATION */
 
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translate(-50%, 20%);
     }
     to {
         opacity: 1;
         transform: translate(-50%, -50%);
     }
 }
 /* CONTROLS CENTER BOTTOM */
 
 .custom-controls {
     position: absolute;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 12px;
     z-index: 999;
     /* 🔥 FIX */
 }
 
 .carousel-caption-custom {
     z-index: 2;
 }
 
 .custom-controls {
     z-index: 5;
 }
 /* BUTTON STYLE */
 
 .nav-btn {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     border: none;
     background: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(6px);
     color: #fff;
     font-size: 24px;
     transition: 0.3s;
 }
 
 .nav-btn:hover {
     background: rgb(12 105 168);
     transform: scale(1.1);
 }
 /* TABLET */
 
 .custom-controls {
     position: absolute;
     bottom: 90px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 12px;
 }
 
 @media (max-width: 992px) {
     .carousel-caption-custom h1 {
         font-size: 36px;
     }
     .carousel-caption-custom p {
         font-size: 16px;
     }
 }
 /* MOBILE */
 
 @media (max-width: 992px) {
     .hero,
     .hero-media {
         height: 94vh;
     }
     .carousel-caption-custom h1 {
         font-size: 24px;
     }
     .carousel-caption-custom p {
         font-size: 14px;
     }
     .carousel-caption-custom .btn {
         font-size: 14px;
         padding: 8px 18px;
     }
     .nav-btn {
         width: 40px;
         height: 40px;
         font-size: 18px;
     }
     .custom-controls {
         bottom: 15px;
     }
     .custom-controls {
         position: absolute;
         bottom: 28px;
         left: 50%;
         transform: translateX(-50%);
         display: flex;
         gap: 12px;
     }
 }
 
 .carousel {
     position: relative;
 }
 /* IMPORTANT */
 
 .carousel-inner {
     position: relative;
     z-index: 1;
 }
 
 .overlay {
     z-index: 2;
 }
 /* 🔥 BUTTON ALWAYS ON TOP */
 
 .nav-btn {
     width: 55px;
     height: 55px;
     border-radius: 50%;
     border: none;
     background: rgba(0, 0, 0, 0.6);
     /* darker for visibility */
     color: #fff;
     font-size: 26px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 /* ===== GLOBAL ===== */
 
 section {
     position: relative;
     overflow: hidden;
 }
 
 h2 {
     letter-spacing: 0.5px;
 }
 /* ===== GLASS EFFECT CARD ===== */
 
 .glass-card {
     background: rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(12px);
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.3);
     transition: 0.4s;
 }
 
 .glass-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
 }
 /* ===== COMPANY LOGOS ===== */
 
 .company-logo img {
     filter: grayscale(100%);
     opacity: 0.6;
     transition: 0.4s;
 }
 
 .company-logo img:hover {
     filter: grayscale(0);
     opacity: 1;
     transform: scale(1.1);
 }
 /* ===== SECTOR CARDS ===== */
 
 .sector-card {
     background: #fff;
     border-radius: 18px;
     padding: 30px;
     transition: 0.4s;
     border: 1px solid #eee;
 }
 
 .sector-card:hover {
     background: linear-gradient(135deg, rgb(12 105 168), #00c6ff);
     color: #fff;
     transform: translateY(-10px);
 }
 
 .sector-card i {
     transition: 0.4s;
 }
 
 .sector-card:hover i {
     transform: scale(1.2);
 }
 /* ===== ACHIEVEMENT SECTION ===== */
 
 .achievement-box h2 {
     font-size: 40px;
     background: linear-gradient(45deg, #00c6ff, rgb(12 105 168));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
 
 .achievement-box {
     transition: 0.3s;
 }
 
 .achievement-box:hover {
     transform: scale(1.05);
 }
 /* ===== TRAINING ADVANTAGES ===== */
 
 .advantage-card {
     border-radius: 20px;
     padding: 25px;
     background: #fff;
     transition: 0.4s;
     border: 1px solid #eee;
 }
 
 .advantage-card:hover {
     background: linear-gradient(135deg, rgb(12 105 168), #00c6ff);
     color: #fff;
     transform: translateY(-8px);
 }
 /* ===== PLACEMENT CARDS ===== */
 
 .placement-card {
     /* border-radius: 18px;
     padding: 25px;
     background: #fff;
     transition: 0.4s;
     border: 1px solid #eee; */
 }
 
 .placement-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }
 /* ===== TESTIMONIAL ===== */
 
 .testimonial-card {
     border-radius: 20px;
     padding: 25px;
     background: #fff;
     position: relative;
     transition: 0.4s;
     border: 1px solid #eee;
 }
 
 .testimonial-card::before {
     font-size: 60px;
     position: absolute;
     top: -10px;
     left: 15px;
     color: rgb(12 105 168);
 }
 
 .testimonial-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }
 /* ===== BACKGROUND SHAPES ===== */
 /* section::after {
     content: "";
     position: absolute;
     width: 200px;
     height: 200px;
     background: radial-gradient(circle, rgba(13, 110, 253, 0.15), transparent);
     top: -50px;
     right: -50px;
     border-radius: 50%;
 } */
 /* ===== BUTTON MODERN ===== */
 /* Container spacing */
 
 .placement-slider {
     position: relative;
     padding: 0 60px;
     /* space for arrows */
 }
 /* Common arrow style */
 
 .placement-prev,
 .placement-next {
     color: #1e6fa8;
     width: 45px;
     height: 45px;
     background: #fff;
     border-radius: 50%;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }
 /* Move LEFT button outside */
 
 .placement-prev {
     left: 0;
 }
 /* Move RIGHT button outside */
 
 .placement-next {
     right: 0;
 }
 /* Center vertically */
 
 .swiper-button-prev,
 .swiper-button-next {
     top: 50%;
     transform: translateY(-50%);
 }
 
 .btn-primary {
     background: linear-gradient(135deg, rgb(0 86 214), #00c6ff);
     border: none;
     border-radius: 30px;
     padding: 8px 20px;
     transition: 0.3s;
 }
 
 .placement-img {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     margin-bottom: 10px;
 }
 
 .swiper {
     padding-bottom: 20px;
 }
 
 .swiper-slide {
     height: auto;
 }
 
 .btn-primary:hover {
     transform: scale(1.05);
 }
 /* ===== RESPONSIVE ===== */
 
 @media (max-width: 768px) {
     h2 {
         font-size: 24px;
     }
 }
 
 .placement-card {
     /* background: #fff;
     border-radius: 20px;
     transition: 0.3s;
     border: 2px solid rgb(12 105 168);
     box-shadow: 5px 10px lightblue; */
 }
 
 .placement-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }
 
 .placement-img {
     width: 80px;
     height: 80px;
     border-radius: 50%;
 }
 
 .course-img-box {
     width: 100%;
     height: 300px;
     overflow: hidden;
 }
 
 .course-modal-img {
     min-width: 100%;
     min-height: 100%;
     border-radius: 10px;
 }
 
 @media (max-width: 768px) {
     .course-img-box {
         height: 200px;
     }
 }
 
 .testimonial-next,
 .testimonial-prev {
     color: rgb(12 105 168);
     width: 45px;
     height: 45px;
     background: #fff;
     border-radius: 50%;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 /* Move right arrow outside */
 
 .testimonial-next {
     right: -60px;
     /* adjust as needed */
 }
 /* Move left arrow outside */
 
 .testimonial-prev {
     left: -60px;
     /* adjust as needed */
 }
 
 .testimonialSwiper {
     position: relative;
     overflow: visible;
     padding-bottom: 50px;
     /* IMPORTANT */
 }
 
 .testimonial-next,
 .testimonial-prev {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
 }
 /* Move outside */
 
 .testimonial-next {
     right: -50px;
 }
 
 .testimonial-prev {
     left: -50px;
 }
 
 .container {
     overflow: visible;
 }
 
 .swiper-wrapper {
     overflow: visible;
 }
 
 .swiper-pagination-bullet {
     background: #ccc;
     opacity: 1;
     width: 10px;
     height: 10px;
 }
 
 .swiper-pagination-bullet-active {
     background: rgb(12 105 168);
     width: 25px;
     border-radius: 10px;
 }
 
 .placement-swiper-pagination-bullet {
     background: #ccc;
     opacity: 1;
     width: 10px;
     height: 10px;
 }
 
 .placement-swiper-pagination-bullet-active {
     background: rgb(12 105 168);
     width: 25px;
     border-radius: 10px;
 }
 
 .myteam-swiper-pagination-bullet {
     background: #ccc;
     opacity: 1;
     width: 10px;
     height: 10px;
 }
 
 .myteam-swiper-pagination-bullet-active {
     background: rgb(12 105 168);
     width: 25px;
     border-radius: 10px;
 }
 
 .testimonial-card {
     background: #ffffff;
     border-radius: 12px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     height: 100%;
     transition: 0.3s;
 }
 
 .testimonial-card:hover {
     transform: translateY(-5px);
 }
 
 .quote-icon {
     font-size: 30px;
     color: #ff6b35;
     margin-bottom: 10px;
 }
 
 .testimonial-text {
     font-size: 15px;
     color: #333;
     line-height: 1.6;
     min-height: 80px;
 }
 
 .user-img {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     object-fit: cover;
 }
 
 .service-section {
     position: relative;
 }
 
 .service-img {
     border-radius: 12px;
     width: 100%;
 }
 
 .service-card h3 {
     font-weight: 700;
     margin-bottom: 10px;
 }
 
 .sub-text {
     font-weight: 600;
     margin-bottom: 10px;
 }
 /* Reverse fix */
 
 .flex-md-row-reverse .service-card {
     margin-left: 0;
     margin-right: -80px;
 }
 /* Mobile Fix */
 
 @media (max-width: 768px) {
     .service-card {
         margin: 20px 0 0 0;
     }
 }
 
 .login-section {
     min-height: auto;
     width: 100%;
 }
 /* Card design */
 
 .login-card {
     width: 100%;
     max-width: 100%;
     background: #fff;
     padding: 5px;
     border-radius: 12px;
     transition: 0.3s;
 }
 /* Hover effect (modern feel) */
 /* Input styling */
 
 .login-card .form-control {
     border-radius: 8px;
     padding: 10px;
 }
 /* Button styling */
 
 .login-card .btn {
     border-radius: 8px;
     padding: 10px;
     background: linear-gradient(135deg, #00aaff, #007bff);
     border: none;
 }
 
 .login-card .btn:hover {
     background: linear-gradient(135deg, #007bff, #0056b3);
 }
 /* SPECIALLY FOR COURSES CARDS */
 /* CARD */
 
 .course-card {
     background: #fff;
     border-radius: 16px;
     overflow: hidden;
     cursor: pointer;
     transition: all 0.3s ease;
     height: 100%;
     border: 1px solid #eee;
 }
 /* HOVER */
 
 .course-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
 }
 /* IMAGE */
 
 .course-img img {
     width: 100%;
     height: 200px;
     object-fit: cover;
 }
 /* BODY */
 
 .course-body {
     padding: 18px;
 }
 /* TAG */
 
 .course-tag {
     font-size: 12px;
     letter-spacing: 1px;
     color: #6c757d;
     font-weight: 600;
 }
 /* TITLE */
 
 .course-title {
     font-size: 18px;
     font-weight: 600;
     margin: 8px 0;
 }
 /* DESC */
 
 .course-desc {
     font-size: 14px;
     color: #555;
     margin-bottom: 10px;
 }
 /* FOOTER */
 
 .course-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 /* PRICE */
 
 .price {
     font-weight: 600;
     color: #0d6efd;
 }
 
 .price del {
     color: red;
     font-weight: 400;
     margin-right: 5px;
 }
 /* BUTTON (edX style minimal) */
 
 .view-btn {
     border: none;
     background: none;
     color: rgba(244, 0, 0, 0.79);
     font-weight: 600;
     cursor: pointer;
 }
 
 .view-btn:hover {
     text-decoration: underline;
 }
 
 .course-actions {
     display: flex;
     gap: 10px;
     /* 👈 control space here */
     align-items: center;
 }
 /* remove unwanted spacing */
 
 .buy-btn,
 .view-btn {
     margin: 0;
     padding: 0;
 }
 /* SECTION */
 
 .career-section {
     width: 100%;
     overflow: hidden;
 }
 /* WRAPPER */
 
 .career-wrapper {
     display: flex;
     min-height: 450px;
 }
 /* LEFT IMAGE */
 
 .career-img {
     width: 50%;
     background: url('../image/course2.png') center/cover no-repeat;
 }
 /* RIGHT SIDE */
 
 .career-content {
     width: 50%;
     background: #7A7A7A;
     color: #fefefe;
     position: relative;
     display: flex;
     align-items: center;
     padding: 60px;
 }
 /* PERFECT SLANT FIX */
 
 .career-content::before {
     content: "";
     position: absolute;
     left: -48px;
     top: 0;
     width: 200px;
     height: 100%;
     background: #7A7A7A;
     transform: skewX(-12deg);
 }
 /* TEXT FIX */
 
 .content-box {
     max-width: 480px;
     z-index: 2;
 }
 
 .content-box h2 {
     font-size: 42px;
     font-weight: 700;
     line-height: 1.2;
 }
 
 .content-box p {
     margin: 20px 0;
     opacity: 0.9;
 }
 /* BUTTONS */
 
 .btn-group {
     display: flex;
     gap: 12px;
     /* 👈 THIS FIXES spacing */
 }
 
 .btn-yellow {
     background: #14181b;
     color: #ffffff;
     padding: 10px 22px;
     border-radius: 30px;
     font-weight: 600;
     text-decoration: none;
 }
 
 .btn-outline {
     border: 1px solid #fff;
     color: #fff;
     padding: 10px 22px;
     border-radius: 30px;
     text-decoration: none;
 }
 /* 🔥 RESPONSIVE FIX */
 
 @media (max-width: 768px) {
     .career-wrapper {
         flex-direction: column;
     }
     .career-img,
     .career-content {
         width: 100%;
     }
     .career-content::before {
         display: none;
         /* remove slant on mobile */
     }
 }
 
 .h2class {
     font-weight: 1000;
     font-size: 60px;
     font-style: italic;
     line-height: 66px;
     font-family: "inter";
 }
 
 .gallarytext {
     font-family: "Inter", Sans-serif;
     font-size: 65px;
     font-weight: 900;
     font-style: italic;
     line-height: 65px;
     position: relative;
     z-index: 2;
     text-align: center;
     line-height: 1.1;
     color: #fff;
     letter-spacing: -2px;
     text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
     align-items: center;
     justify-content: center;
 }
 
 .section-subtitle {
     font-size: 13px;
     letter-spacing: 2px;
     color: #0d6efd;
     font-weight: 600;
     margin-bottom: 8px;
 }
 
 .section-title {
     font-size: 38px;
     font-weight: 800;
     color: #1a1a1a;
     margin-bottom: 10px;
 }
 
 .section-desc {
     font-size: 15px;
     color: #6c757d;
     max-width: 600px;
     margin: auto;
 }
 
 .category-card {
     background: #ffffff;
     border-radius: 16px;
     padding: 30px 20px;
     text-align: center;
     transition: all 0.3s ease;
     border: 1px solid #eaeaea;
     position: relative;
     overflow: hidden;
 }
 /* Hover Gradient Effect */
 
 .category-card::before {
     content: "";
     position: absolute;
     width: 100%;
     height: 0%;
     background: linear-gradient(135deg, #0d6efd, #00c6ff);
     left: 0;
     bottom: 0;
     z-index: 0;
     transition: 0.4s;
 }
 
 .category-card:hover::before {
     height: 100%;
 }
 /* Content above gradient */
 
 .category-card * {
     position: relative;
     z-index: 2;
 }
 
 .category-card:hover {
     transform: translateY(-8px);
     color: white;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
 }
 
 .category-card h5 {
     font-weight: 500;
     margin-top: 10px;
 }
 
 .category-card p {
     font-size: 13px;
     color: #6c757d;
 }
 
 .category-card:hover p {
     color: #eaeaea;
 }
 /* Icon */
 
 .category-card .icon {
     font-size: 28px;
     color: #0d6efd;
 }
 
 .category-card:hover .icon {
     color: white;
 }
 /* =========================================
   Trainers Section
========================================= */
 
 .trainers-index {
     /* background: #f8f9fa; */
     margin-bottom: 60px;
 }
 /* Section Title */
 
 .section-title .sub-title {
     text-transform: uppercase;
     font-size: 12px;
     letter-spacing: 1px;
     color: #6c757d;
     margin-bottom: 8px;
     margin-top: 45px;
 }
 
 .section-title h2 {
     font-size: 32px;
     font-weight: 700;
     color: #222;
 }
 /* =========================================
   Slider Wrapper
========================================= */
 
 .team-slider-wrapper {
     position: relative;
     padding-bottom: 0px;
 }
 /* Swiper */
 
 .teamSwiper {
     overflow: hidden;
     width: 100%;
 }
 /* Slides */
 
 .swiper-slide {
     height: auto;
 }
 /* =========================================
   Member Card
========================================= */
 
 .member {
     background: #fff;
     border-radius: 14px;
     overflow: hidden;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
     transition: 0.4s ease;
     height: 100%;
     width: 100%;
     max-width: 320px;
     /* important */
     margin: auto;
 }
 
 .member:hover {
     transform: translateY(-6px);
 }
 /* Image */
 
 .member-image {
     overflow: hidden;
 }
 
 .member-image img {
     width: 100%;
     height: 220px;
     /* reduced */
     object-fit: cover;
     display: block;
     transition: 0.4s ease;
 }
 
 .member:hover .member-image img {
     transform: scale(1.05);
 }
 /* Content */
 
 .member-content {
     padding: 16px 14px;
     text-align: center;
 }
 
 .member-content h4 {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 4px;
     color: #222;
 }
 
 .member-content span {
     display: block;
     font-size: 12px;
     color: #777;
     margin-bottom: 10px;
     font-style: italic;
 }
 
 .member-content p {
     font-size: 13px;
     line-height: 1.5;
     color: #555;
     margin-bottom: 14px;
 }
 /* Social */
 
 .social {
     display: flex;
     justify-content: center;
     gap: 10px;
 }
 
 .social a {
     width: 32px;
     height: 32px;
     background: #f1f1f1;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #333;
     font-size: 14px;
     transition: 0.3s ease;
     text-decoration: none;
 }
 
 .social a:hover {
     background: #0d6efd;
     color: #fff;
 }
 /* =========================================
   Pagination
========================================= */
 
 .team-slider-wrapper .swiper-pagination {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: auto;
     z-index: 10;
 }
 
 .team-slider-wrapper .swiper-pagination-bullet {
     width: 8px;
     height: 8px;
     background: #c0c0c0;
     opacity: 1;
     margin: 0 5px !important;
     transition: 0.3s;
 }
 
 .team-slider-wrapper .swiper-pagination-bullet-active {
     width: 24px;
     border-radius: 20px;
     background: #0d6efd;
 }
 /* =========================================
   Responsive
========================================= */
 
 @media (max-width: 768px) {
     .section-title h2 {
         font-size: 24px;
     }
     .member {
         max-width: 240px;
     }
     .member-image img {
         height: 200px;
     }
 }
 /* =========================================
   TOP PLACEMENTS SECTION
========================================= */
 
 .placements-section {
     background: linear-gradient(to bottom, #cbe0fb, #fdfdfd);
     overflow: visible;
     margin-top: 10px;
     margin-bottom: 10px;
 }
 /* Heading */
 
 .section-heading .sub-title {
     display: inline-block;
     background: rgba(13, 110, 253, 0.08);
     color: #0d6efd;
     padding: 8px 18px;
     border-radius: 30px;
     font-size: 13px;
     font-weight: 600;
     margin-bottom: 10px;
     margin-top: 10Px;
 }
 
 .section-heading h2 {
     font-size: 35px;
     font-weight: 800;
     color: #1f1f1f;
     margin-bottom: 10px;
 }
 
 .section-heading p {
     color: #666;
     font-size: 16px;
     max-width: 650px;
     margin: auto;
     line-height: 1.7;
     margin-bottom: 15px;
 }
 /* Slider */
 
 .placement-slider-wrapper {
     position: relative;
     padding-bottom: 0px;
 }
 
 .placementSwiper {
     overflow: hidden;
 }
 /* Card */
 
 .placement-card {
     background: #fff;
     border-radius: 24px;
     overflow: visible;
     padding: 12px 12px;
     position: relative;
     transition: 0.3s ease;
     box-shadow: 0 8px 35px rgba(0, 0, 0, 0.06);
     border: 1px solid rgba(255, 255, 255, 0.04);
 }
 
 .placement-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
 }
 /* Top */
 
 .placement-top {
     position: relative;
     margin-bottom: 22px;
 }
 /* Image */
 
 .placement-image {
     width: 120px;
     height: 120px;
     margin: auto;
     border-radius: 50%;
     overflow: hidden;
     background: #f4f7fb;
     border: 5px solid #fff;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
 }
 
 .placement-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 /* Verified */
 
 .company-logo {
     position: absolute;
     right: 30%;
     bottom: 0;
     width: 34px;
     height: 34px;
     background: #0d6efd;
     color: #fff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 16px;
     border: 3px solid #fff;
 }
 /* Content */
 
 .placement-content {
     text-align: center;
 }
 
 .placement-content h4 {
     font-size: 26px;
     font-weight: 700;
     margin-bottom: 10px;
     color: #1f1f1f;
 }
 
 .company-name {
     color: #666;
     font-size: 15px;
     margin-bottom: 22px;
 }
 /* Info */
 
 .placement-info {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 12px;
     flex-wrap: wrap;
 }
 /* Badge */
 
 .role-badge {
     padding: 10px 18px;
     border-radius: 30px;
     font-size: 13px;
     font-weight: 700;
 }
 
 .role-badge.green {
     background: rgba(25, 135, 84, 0.12);
     color: #198754;
 }
 
 .role-badge.yellow {
     background: rgba(255, 193, 7, 0.15);
     color: #c48b00;
 }
 
 .role-badge.blue {
     background: rgba(13, 110, 253, 0.12);
     color: #0d6efd;
 }
 /* Salary */
 
 .salary {
     background: #f4f7fb;
     padding: 10px 16px;
     border-radius: 30px;
     font-weight: 700;
     color: #111;
     font-size: 13px;
 }
 /* Pagination */
 
 .placement-swiper-pagination {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
 }
 
 .placement-swiper-pagination .swiper-pagination-bullet {
     width: 10px;
     height: 10px;
     background: #c8c8c8;
     opacity: 1;
     margin: 0 6px !important;
     transition: 0.3s ease;
 }
 
 .placement-swiper-pagination .swiper-pagination-bullet-active {
     width: 30px;
     border-radius: 30px;
     background: #0d6efd;
 }
 /* Responsive */
 
 @media(max-width:991px) {
     .section-heading h2 {
         font-size: 34px;
     }
 }
 
 @media(max-width:767px) {
     .section-heading h2 {
         font-size: 28px;
     }
     .placement-card {
         padding: 24px 18px;
     }
     .placement-content h4 {
         font-size: 22px;
     }
 }
 
 .placementSwiper {
     padding-bottom: 60px;
 }
 
 .swiper-slide {
     height: auto;
 }
 /* stars uses for ratings */
 
 .testimonial-rating {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 18px;
 }
 
 .stars {
     color: #ffc107;
     font-size: 20px;
     letter-spacing: 2px;
 }
 
 .rating-number {
     background: #f1f5f9;
     color: #111827;
     padding: 4px 10px;
     border-radius: 30px;
     font-size: 14px;
     font-weight: 600;
 }
 /* =========================
   ACHIEVEMENT SECTION
========================= */
 
 .achievement-section {
     /* background: #f7fbff; */
     overflow: visible;
     margin-bottom: 0px;
     margin-top: 45px;
 }
 
 .achievement-tag {
     background: rgba(13, 110, 253, 0.1);
     color: #0d6efd;
     padding: 8px 18px;
     border-radius: 30px;
     font-weight: 600;
     font-size: 14px;
 }
 
 .achievement-title {
     font-size: 30px;
     font-weight: 800;
     line-height: 1.1;
     margin-bottom: .5rem;
     color: #223a58;
 }
 
 .achievement-text {
     font-size: 16px;
     color: #64748b;
     line-height: 1.2;
 }
 /* FEATURES */
 
 .feature-item {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 8px;
     font-size: 15px;
     font-weight: 500;
     color: #1e293b;
 }
 
 .feature-item i {
     color: #0d6efd;
     font-size: 20px;
 }
 /* BUTTONS */
 
 .achievement-btns {
     display: flex;
     gap: 15px;
 }
 
 .explore-btn {
     background: #0d6efd;
     color: #fff;
     padding: 14px 28px;
     border-radius: 50px;
     font-weight: 600;
     transition: 0.3s;
 }
 
 .explore-btn:hover {
     background: #0056d2;
     color: #fff;
 }
 
 .join-btn {
     border: 2px solid #0d6efd;
     color: #0d6efd;
     padding: 14px 28px;
     border-radius: 50px;
     font-weight: 600;
     transition: 0.3s;
 }
 
 .join-btn:hover {
     background: #0d6efd;
     color: #fff;
 }
 /* STATS */
 
 .stat-box h3 {
     font-size: 35px;
     font-weight: 800;
     color: #0d6efd;
 }
 
 .stat-box p {
     color: #64748b;
     font-weight: 600;
     margin-top: 5px;
 }
 /* IMAGE SECTION */
 
 .achievement-image-wrapper {
     position: relative;
 }
 
 .achievement-main-img {
     border-radius: 30px;
     width: 100%;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
 }
 /* FLOATING CARDS */
 
 .about-floating-card {
     position: absolute;
     background: #fff;
     padding: 18px 22px;
     border-radius: 20px;
     display: flex;
     align-items: center;
     gap: 15px;
     box-shadow: 0 10px 35px rgba(0, 0, 0, 0.1);
     min-width: 240px;
 }
 
 .top-card {
     top: 30px;
     right: -30px;
 }
 
 .bottom-card {
     bottom: 30px;
     left: -30px;
 }
 
 .card-icon {
     width: 55px;
     height: 55px;
     background: rgba(13, 110, 253, 0.1);
     color: #0d6efd;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
 }
 
 .floating-card h4 {
     margin: 0;
     font-size: 28px;
     font-weight: 700;
 }
 
 .floating-card p {
     margin: 0;
     color: #64748b;
     font-size: 14px;
 }
 /* RESPONSIVE */
 
 @media(max-width:991px) {
     .achievement-title {
         font-size: 38px;
     }
     .top-card {
         right: 0;
     }
     .bottom-card {
         left: 0;
     }
 }
 
 @media(max-width:576px) {
     .achievement-title {
         font-size: 30px;
     }
     .achievement-btns {
         flex-direction: column;
     }
     .floating-card {
         position: static;
         margin-top: 20px;
     }
 }
 /* =========================
   WHY J2J SECTION
========================= */
 
 .why-j2j-section {
     background: #f5f9ff;
     position: relative;
     overflow: hidden;
 }
 
 .section-title .mini-title {
     color: #0d6efd;
     font-weight: 700;
     letter-spacing: 2px;
     font-size: 14px;
 }
 
 .section-title h2 {
     font-size: 35px;
     font-weight: 800;
     margin-top: 5px;
     color: #0b1c39;
 }
 
 .section-title p {
     max-width: 650px;
     margin: auto;
     margin-top: 10px;
     margin-bottom: 10px;
     color: #6c757d;
     font-size: 16px;
     line-height: 1.2;
     font-weight: 400;
 }
 /* CARD */
 
 .why-card {
     background: #fff;
     border-radius: 24px;
     padding: 25px 20px;
     position: relative;
     overflow: hidden;
     transition: 0.4s ease;
     height: 100%;
     border: 1px solid #edf2f7;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }
 
 .why-card:hover {
     transform: translateY(-12px);
     box-shadow: 0 20px 45px rgba(13, 110, 253, 0.18);
 }
 /* TOP ICON */
 
 .why-icon {
     width: 75px;
     height: 75px;
     background: rgba(13, 110, 253, 0.10);
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;
     transition: 0.4s ease;
 }
 
 .why-icon i {
     font-size: 34px;
     color: #0d6efd;
 }
 
 .why-card:hover .why-icon {
     background: #0d6efd;
     transform: rotate(-15deg);
 }
 
 .why-card:hover .why-icon i {
     color: #fff;
 }
 /* NUMBER */
 
 .why-number {
     position: absolute;
     top: 25px;
     right: 30px;
     font-size: 50px;
     font-weight: 800;
     color: rgba(13, 110, 253, 0.08);
 }
 /* TEXT */
 
 .why-card h4 {
     font-size: 24px;
     font-weight: 700;
     color: #0b1c39;
     margin-bottom: 15px;
     line-height: 1.4;
 }
 
 .why-card p {
     color: #6c757d;
     line-height: 1.8;
     font-size: 15px;
     margin-bottom: 0;
 }
 /* HOVER BOTTOM LINE */
 
 .hover-line {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0%;
     height: 5px;
     background: linear-gradient(to right, #0d6efd, #00bfff);
     transition: 0.4s;
 }
 
 .why-card:hover .hover-line {
     width: 100%;
 }
 /* RESPONSIVE */
 
 @media(max-width:991px) {
     .section-title h2 {
         font-size: 38px;
     }
 }
 
 @media(max-width:576px) {
     .section-title h2 {
         font-size: 30px;
     }
     .why-card {
         padding: 30px 22px;
     }
 }
 /* partners section in services */
 /* ===== PARTNERS SECTION ===== */
 
 .partners-section {
     background: #f7f9fc;
     position: relative;
     overflow: hidden;
 }
 /* TOP TAG */
 
 .partner-tag {
     background: rgba(12, 105, 168, 0.1);
     color: #0d6efd;
     padding: 10px 20px;
     border-radius: 30px;
     font-size: 14px;
     font-weight: 600;
     display: inline-block;
 }
 /* TITLE */
 
 .partner-title {
     font-size: 42px;
     font-weight: 800;
     color: #111;
     margin-bottom: 15px;
 }
 
 .partner-desc {
     max-width: 700px;
     margin: auto;
     color: #666;
     font-size: 16px;
     line-height: 1.7;
 }
 /* CARD */
 
 .partner-card {
     background: #fff;
     border: 1px solid #eee;
     border-radius: 18px;
     padding: 30px 20px;
     text-align: center;
     transition: 0.4s ease;
     height: 100%;
     cursor: pointer;
     position: relative;
     overflow: hidden;
 }
 /* HOVER EFFECT */
 
 .partner-card::before {
     content: "";
     position: absolute;
     top: -100%;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, #0c69a8, #1f8fff);
     transition: 0.5s;
     z-index: 1;
 }
 
 .partner-card:hover::before {
     top: 0;
 }
 /* CONTENT */
 
 .partner-card img {
     width: 100px;
     height: 70px;
     object-fit: contain;
     position: relative;
     z-index: 2;
     transition: 0.4s;
 }
 
 .partner-card h6 {
     margin-top: 18px;
     font-weight: 700;
     color: #222;
     position: relative;
     z-index: 2;
     transition: 0.4s;
 }
 /* HOVER */
 
 .partner-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 40px rgba(12, 105, 168, 0.2);
 }
 
 .partner-card:hover h6 {
     color: #fff;
 }
 
 .partner-card:hover img {
     transform: scale(1.08);
 }
 /* MOBILE */
 
 @media(max-width:768px) {
     .partner-title {
         font-size: 30px;
     }
     .partner-card {
         padding: 20px 15px;
     }
     .partner-card img {
         width: 80px;
     }
 }
 /* ===== PREMIUM PRICING ===== */
 
 .premium-pricing {
     background: linear-gradient(rgba(248, 250, 255, 0.97), rgba(248, 250, 255, 0.97)), url('assets/image/pattern.png');
     background-size: cover;
     position: relative;
     overflow: hidden;
     padding: 25px 0 40px;
     min-height: 92vh;
     display: flex;
     align-items: center;
 }
 /* HEADING */
 
 .pricing-badge {
     background: rgba(12, 105, 168, 0.1);
     color: #0d6efd;
     padding: 7px 18px;
     border-radius: 50px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1.5px;
 }
 
 .pricing-title {
     font-weight: 700;
     color: #111;
     line-height: 1.15;
     font-size: 34px;
     margin-bottom: 12px;
     letter-spacing: -1px;
 }
 
 .pricing-title span {
     color: #0d6efd;
 }
 
 .pricing-subtitle {
     max-width: 620px;
     margin: auto;
     color: #777;
     font-size: 15px;
     font-weight: 400;
     line-height: 1.7;
     margin-top: 8px;
     margin-bottom: 25px;
 }
 /* CARD */
 
 .premium-card {
     position: relative;
     background: #fff;
     border-radius: 24px;
     padding: 24px;
     overflow: hidden;
     transition: 0.35s ease;
     border: 1px solid rgba(12, 105, 168, 0.08);
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
     height: 100%;
 }
 
 .premium-pricing .row {
     --bs-gutter-x: 18px;
     --bs-gutter-y: 18px;
 }
 /* GLOW EFFECT */
 
 .card-glow {
     position: absolute;
     width: 140px;
     height: 140px;
     opacity: 0.6;
     background: #0d6efd;
     border-radius: 50%;
     top: -100px;
     right: -100px;
     transition: 0.5s;
     z-index: -1;
 }
 /* HOVER */
 
 .premium-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 18px 40px rgba(12, 105, 168, 0.12);
 }
 
 .premium-card:hover .card-glow {
     transform: scale(1.5);
 }
 /* ACTIVE CARD */
 
 .active-card {
     background: linear-gradient(135deg, #0c69a8, #0a4e7e);
     color: #fff;
     transform: scale(1.02);
 }
 
 .active-card .plan-text,
 .active-card .plan-features li,
 .active-card .plan-price span {
     color: rgba(255, 255, 255, 0.85);
 }
 /* POPULAR TAG */
 
 .popular-tag {
     position: absolute;
     top: 18px;
     right: -42px;
     background: #ffb703;
     color: #111;
     font-weight: 800;
     font-size: 10px;
     padding: 8px 42px;
     transform: rotate(45deg);
     letter-spacing: 1px;
 }
 /* ICON */
 
 .plan-icon {
     width: 58px;
     height: 58px;
     background: rgba(12, 105, 168, 0.08);
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 18px;
     margin-bottom: 18px;
     transition: 0.4s;
 }
 
 .plan-icon i {
     font-size: 24px;
     color: #0d6efd;
 }
 
 .active-card .plan-icon {
     background: rgba(255, 255, 255, 0.12);
 }
 
 .active-card .plan-icon i {
     color: #fff;
 }
 /* TITLE */
 
 .premium-card h4 {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 10px;
 }
 /* PRICE */
 
 .plan-price {
     font-size: 40px;
     font-weight: 700;
     color: #0d6efd;
     line-height: 1;
     margin-bottom: 10px;
 }
 
 .plan-price span {
     font-size: 14px;
     font-weight: 400;
     color: #666;
 }
 
 .active-card .plan-price {
     color: #fff;
 }
 /* TEXT */
 
 .plan-text {
     color: #666;
     margin-bottom: 20px;
     font-size: 14px;
     line-height: 1.6;
 }
 /* FEATURES */
 
 .plan-features {
     list-style: none;
     padding: 0;
     margin: 0 0 35px;
 }
 
 .plan-features li {
     margin-bottom: 8px;
     font-size: 14px;
     color: #333;
     display: flex;
     align-items: center;
     gap: 8px;
     font-weight: 400;
 }
 
 .plan-features i {
     color: #0d6efd;
     font-size: 14px;
 }
 
 .active-card .plan-features i {
     color: #fff;
 }
 /* BUTTON */
 
 .plan-btn {
     display: inline-block;
     width: 100%;
     text-align: center;
     padding: 11px;
     border-radius: 12px;
     background: #0d6efd;
     color: #fff;
     text-decoration: none;
     font-weight: 600;
     transition: 0.4s;
     font-size: 14px;
 }
 
 .plan-btn:hover {
     background: #111;
     color: #fff;
     transform: scale(1.03);
 }
 
 .active-btn {
     background: #fff;
     color: #0d6efd;
 }
 
 .active-btn:hover {
     background: #ffb703;
     color: #111;
 }
 /* RESPONSIVE */
 
 @media(max-width:991px) {
     .pricing-title {
         font-size: 38px;
     }
     .active-card {
         transform: scale(1);
     }
     .plan-price {
         font-size: 50px;
     }
 }
 
 @media(max-width:576px) {
     .pricing-title {
         font-size: 30px;
     }
     .premium-card {
         padding: 35px 25px;
     }
     .plan-price {
         font-size: 42px;
     }
 }
 /* ===== PREMIUM ABOUT SECTION ===== */
 
 .premium-about-section {
     padding: 45px 0;
     background: #f8fafc;
     overflow: hidden;
 }
 /* IMAGE SIDE */
 
 .about-image-wrapper {
     position: relative;
 }
 
 .main-about-img {
     width: 100%;
     max-height: 480px;
     object-fit: cover;
     border-radius: 24px;
     box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
 }
 
 .floating-card {
     position: absolute;
     right: -15px;
     bottom: -20px;
     width: 170px;
     background: #fff;
     border-radius: 18px;
     padding: 8px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
 }
 
 .floating-card img {
     width: 100%;
     border-radius: 12px;
 }
 /* EXPERIENCE BADGE */
 
 .experience-badge {
     position: absolute;
     top: -15px;
     left: -15px;
     width: 110px;
     height: 110px;
     background: #0d6efd;
     color: #fff;
     border-radius: 20px;
     z-index: 2;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     box-shadow: 0 10px 30px rgba(13, 110, 253, 0.35);
 }
 
 .experience-badge h2 {
     font-size: 28px;
     font-weight: 700;
     margin-bottom: 3px;
 }
 
 .experience-badge span {
     font-size: 10px;
     text-transform: uppercase;
     letter-spacing: 1px;
     text-align: center;
 }
 /* CONTENT */
 
 .section-tag {
     display: inline-block;
     background: rgba(13, 110, 253, 0.1);
     color: #0d6efd;
     padding: 6px 14px;
     border-radius: 30px;
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 1px;
     margin-bottom: 12px;
 }
 
 .premium-content h2 {
     font-size: 36px;
     font-weight: 600;
     line-height: 1.15;
     color: #111827;
     margin-bottom: 12px;
 }
 
 .premium-content h2 span {
     color: #0d6efd;
 }
 
 .main-text {
     font-size: 14px;
     line-height: 1.6;
     color: #6b7280;
     margin-bottom: 20px;
 }
 /* FEATURES */
 
 .feature-item {
     display: flex;
     gap: 14px;
     padding: 0px 0;
     border-bottom: 1px solid #e5e7eb;
 }
 
 .feature-number {
     min-width: 42px;
     height: 42px;
     border-radius: 50%;
     background: rgba(13, 110, 253, 0.08);
     color: #0d6efd;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 13px;
     font-weight: 700;
 }
 
 .feature-content h5 {
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 4px;
     color: #111827;
 }
 
 .feature-content p {
     margin: 0;
     color: #6b7280;
     line-height: 1.5;
     font-size: 13px;
 }
 /* BUTTONS */
 
 .premium-btn-group {
     margin-top: 20px;
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
 }
 
 .premium-btn {
     padding: 11px 24px;
     border-radius: 10px;
     font-size: 14px;
     font-weight: 600;
     text-decoration: none;
     transition: 0.3s ease;
 }
 
 .primary-btn {
     background: #0d6efd;
     color: #fff;
     box-shadow: 0 8px 20px rgba(13, 110, 253, 0.25);
 }
 
 .primary-btn:hover {
     transform: translateY(-3px);
     color: #fff;
 }
 
 .outline-btn {
     border: 1.5px solid #d1d5db;
     color: #111827;
 }
 
 .outline-btn:hover {
     background: #111827;
     border-color: #111827;
     color: #fff;
 }
 /* RESPONSIVE */
 
 @media(max-width:991px) {
     .premium-content {
         margin-top: 20px;
     }
     .premium-content h2 {
         font-size: 30px;
     }
     .floating-card {
         width: 140px;
         right: 0;
     }
 }
 
 @media(max-width:767px) {
     .premium-about-section {
         padding: 35px 0;
     }
     .premium-content h2 {
         font-size: 24px;
     }
     .floating-card {
         display: none;
     }
     .experience-badge {
         width: 90px;
         height: 90px;
     }
     .experience-badge h2 {
         font-size: 22px;
     }
 }
 /* =========================
   SERVICES SECTION
========================= */
 
 .Services-section {
     padding: 70px 0;
     background: #f5f7fb;
     overflow: hidden;
 }
 
 .services-mini-title {
     display: inline-block;
     background: #e8f0ff;
     color: #0d6efd;
     padding: 8px 20px;
     border-radius: 50px;
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 18px;
 }
 
 .services-heading {
     font-size: 52px;
     font-weight: 800;
     color: #111;
     line-height: 1.1;
     margin-bottom: 16px;
 }
 
 .services-heading span {
     color: #0d6efd;
 }
 
 .services-subheading {
     font-size: 18px;
     color: #6c757d;
     max-width: 760px;
     margin: auto;
 }
 /* =========================
   SCROLL AREA
========================= */
 
 .Services-wrapper {
     position: relative;
     margin-top: 55px;
 }
 
 .Services-scroll {
     display: flex;
     gap: 24px;
     overflow-x: auto;
     scroll-behavior: smooth;
     padding: 10px;
 }
 
 .Services-scroll::-webkit-scrollbar {
     display: none;
 }
 /* =========================
   CARD
========================= */
 
 .service-home-card {
     min-width: 300px;
     max-width: 300px;
     background: #fff;
     border-radius: 28px;
     overflow: hidden;
     transition: 0.4s ease;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     border: 1px solid #edf1f7;
     position: relative;
 }
 
 .service-home-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 45px rgba(13, 110, 253, 0.15);
 }
 /* =========================
   IMAGE
========================= */
 
 .service-home-img {
     position: relative;
     overflow: hidden;
     height: 210px;
 }
 
 .service-home-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: 0.5s ease;
 }
 
 .service-home-card:hover img {
     transform: scale(1.08);
 }
 /* =========================
   BADGE
========================= */
 
 .available-badge {
     position: absolute;
     top: 18px;
     right: 18px;
     background: rgba(255, 255, 255, 0.95);
     color: #0d6efd;
     padding: 10px 18px;
     border-radius: 50px;
     font-size: 14px;
     font-weight: 700;
     backdrop-filter: blur(10px);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
 }
 /* =========================
   CONTENT
========================= */
 
 .service-home-content {
     padding: 24px;
 }
 
 .service-tags {
     display: flex;
     gap: 10px;
     margin-bottom: 18px;
 }
 
 .service-tags span {
     background: #edf4ff;
     color: #0d6efd;
     padding: 8px 16px;
     border-radius: 50px;
     font-size: 13px;
     font-weight: 700;
 }
 
 .service-home-content h4 {
     font-size: 32px;
     font-weight: 700;
     color: #101828;
     margin-bottom: 14px;
     line-height: 1.2;
 }
 
 .service-home-content p {
     font-size: 15px;
     color: #667085;
     line-height: 1.8;
     margin-bottom: 24px;
 }
 /* =========================
   FOOTER
========================= */
 
 .service-home-footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
 }
 
 .working-count {
     font-size: 14px;
     color: #667085;
 }
 
 .working-count strong {
     color: #111827;
 }
 /* =========================
   BUTTON
========================= */
 
 .enquiry-btn {
     border: none;
     background: linear-gradient(135deg, #0d6efd, #0056d6);
     color: white;
     padding: 12px 24px;
     border-radius: 14px;
     font-size: 15px;
     font-weight: 700;
     transition: 0.3s ease;
 }
 
 .enquiry-btn:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(13, 110, 253, 0.35);
 }
 /* =========================
   SCROLL BUTTONS
========================= */
 
 .Services-scroll-btn {
     position: absolute;
     top: 42%;
     transform: translateY(-50%);
     width: 55px;
     height: 55px;
     border: none;
     border-radius: 50%;
     background: white;
     color: #111;
     font-size: 28px;
     z-index: 20;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     transition: 0.3s ease;
 }
 
 .Services-scroll-btn:hover {
     background: #0d6efd;
     color: white;
 }
 
 .Services-scroll-btn.left {
     left: -15px;
 }
 
 .Services-scroll-btn.right {
     right: -15px;
 }
 /* =========================
   MOBILE
========================= */
 
 @media(max-width:768px) {
     .services-heading {
         font-size: 38px;
     }
     .service-home-card {
         min-width: 260px;
     }
     .service-home-content h4 {
         font-size: 24px;
     }
 }
 /* 26/05/2026 */
 /* =========================
   HOME SERVICES SECTION
========================= */
 
 .j2-services-home {
     /* padding: 70px 0; */
     background: #f7f9fc;
     overflow: hidden;
 }
 
 .j2-services-heading {
     text-align: center;
     margin-bottom: 40px;
 }
 
 .j2-services-heading span {
     background: #eaf2ff;
     color: #1565ff;
     padding: 8px 22px;
     border-radius: 30px;
     font-size: 13px;
     font-weight: 700;
     display: inline-block;
     margin-bottom: 18px;
 }
 
 .j2-services-heading h2 {
     font-size: 35px;
     font-weight: 800;
     color: #0b132a;
     margin-bottom: 12px;
 }
 
 .j2-services-heading h2 strong {
     color: #1565ff;
 }
 
 .j2-services-heading p {
     color: #6f7b91;
     font-size: 16px;
 }
 /* =========================
   WRAPPER
========================= */
 
 .j2-scroll-wrapper {
     position: relative;
 }
 
 .j2-services-row {
     display: flex;
     gap: 22px;
     overflow-x: auto;
     scroll-behavior: smooth;
     padding: 10px 5px 20px;
 }
 
 .j2-services-row::-webkit-scrollbar {
     display: none;
 }
 /* =========================
   CARD
========================= */
 
 .j2-service-card {
     min-width: 260px;
     max-width: 260px;
     background: #fff;
     border-radius: 26px;
     overflow: hidden;
     flex-shrink: 0;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
     transition: 0.35s ease;
     border: 1px solid #edf1f7;
     padding-bottom: 0px !important;
 }
 
 .j2-service-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
 }
 /* =========================
   IMAGE
========================= */
 
 .j2-service-image {
     position: relative;
     height: 170px;
     overflow: hidden;
 }
 
 .j2-service-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: 0.4s ease;
 }
 
 .j2-service-card:hover img {
     transform: scale(1.06);
 }
 /* =========================
   BADGE
========================= */
 
 .j2-available {
     position: absolute;
     top: 10px;
     right: 10px;
     background: white;
     color: #1565ff;
     padding: 4px 10px;
     border-radius: 50px;
     font-size: 12px;
     font-weight: 600;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
 /* =========================
   CONTENT
========================= */
 
 .j2-service-content {
     padding: 18px;
     margin-bottom: -20px !important;
 }
 
 .j2-tags {
     display: flex;
     gap: 10px;
     margin-bottom: 10px;
 }
 
 .j2-tags span {
     background: #edf4ff;
     color: #1565ff;
     padding: 4px 16px;
     border-radius: 30px;
     font-size: 13px;
     font-weight: 600;
 }
 
 .j2-service-content h4 {
     font-size: 19px;
     font-weight: 800;
     color: #111827;
     margin-bottom: 10px;
     line-height: 1.3;
 }
 
 .j2-service-content p {
     font-size: 14px;
     color: #6b7280;
     line-height: 1.7;
     margin-bottom: 18px;
     min-height: 70px;
 }
 /* =========================
   FOOTER
========================= */
 
 .j2-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }
 
 .j2-working {
     font-size: 13px;
     color: #6b7280;
 }
 
 .j2-working strong {
     color: #111827;
 }
 
 .j2-enquiry-btn {
     border: none;
     background: linear-gradient(135deg, #1565ff, #0d47d9);
     color: white;
     padding: 11px 22px;
     border-radius: 14px;
     font-size: 14px;
     font-weight: 700;
     transition: 0.3s;
 }
 
 .j2-enquiry-btn:hover {
     transform: scale(1.05);
 }
 /* =========================
   SCROLL BUTTONS
========================= */
 
 .j2-scroll-btn {
     position: absolute;
     top: 42%;
     transform: translateY(-50%);
     width: 48px;
     height: 48px;
     border: none;
     border-radius: 50%;
     background: white;
     color: #1565ff;
     font-size: 22px;
     font-weight: 700;
     box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12);
     z-index: 10;
     transition: 0.3s;
 }
 
 .j2-scroll-btn:hover {
     background: #1565ff;
     color: white;
 }
 
 .j2-scroll-left {
     left: -15px;
 }
 
 .j2-scroll-right {
     right: -15px;
 }
 /* =========================
   MOBILE
========================= */
 
 @media(max-width:768px) {
     .j2-services-heading h2 {
         font-size: 34px;
     }
     .j2-service-card {
         min-width: 220px;
         max-width: 220px;
     }
     .j2-service-image {
         height: 150px;
     }
 }
 /* ============================= */
 /* J2J PREMIUM BRAND SECTION */
 /* ============================= */
 
 .j2j-brand-section {
     /* padding: 45px 0; */
     background: #f4f7fc;
     overflow: hidden;
 }
 /* SMALL BADGE */
 
 .j2j-brand-badge {
     display: inline-block;
     background: linear-gradient(135deg, #0d6efd, #4da3ff);
     color: #fff;
     font-size: 13px;
     font-weight: 600;
     padding: 8px 22px;
     border-radius: 50px;
     margin-bottom: 18px;
     box-shadow: 0 8px 20px rgba(13, 110, 253, 0.18);
 }
 /* TITLE */
 
 .j2j-brand-title {
     font-size: 52px;
     font-weight: 800;
     color: #08142e;
     margin-bottom: 35px;
     line-height: 1.1;
 }
 
 .j2j-brand-title span {
     color: #0d6efd;
 }
 /* SLIDER */
 
 .j2j-brand-slider {
     width: 100%;
     overflow: hidden;
     position: relative;
 }
 /* TRACK */
 
 .j2j-brand-track {
     display: flex;
     align-items: center;
     gap: 22px;
     width: max-content;
     animation: j2jbrandmove 30s linear infinite;
 }
 /* CARD */
 
 .j2j-brand-card {
     min-width: 140px;
     height: 85px;
     background: #fff;
     border-radius: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 18px;
     border: 1px solid #edf2ff;
     box-shadow: 0 10px 30px rgba(35, 68, 78, 0.05);
     transition: 0.35s ease;
 }
 /* HOVER */
 
 .j2j-brand-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 18px 40px rgba(13, 110, 253, 0.15);
 }
 /* LOGO */
 
 .j2j-brand-card img {
     max-width: 140px;
     max-height: 75px;
     object-fit: contain;
     /* filter: grayscale(100%); */
     /* opacity: 0.75; */
     transition: 0.35s ease;
 }
 
 .j2j-brand-card:hover img {
     filter: grayscale(0%);
     opacity: 1;
     transform: scale(1.06);
 }
 /* ANIMATION */
 
 @keyframes j2jbrandmove {
     0% {
         transform: translateX(0);
     }
     100% {
         transform: translateX(-50%);
     }
 }
 /* RESPONSIVE */
 
 @media(max-width:768px) {
     .j2j-brand-section {
         padding: 35px 0;
     }
     .j2j-brand-title {
         font-size: 34px;
     }
     .j2j-brand-card {
         min-width: 140px;
         height: 80px;
         border-radius: 18px;
     }
     .j2j-brand-card img {
         max-width: 95px;
     }
 }
 /* ========================= */
 /* J2J CORE SERVICES SECTION */
 /* SMALL COMPACT VERSION */
 /* ========================= */
 
 .j2j-core-services {
     padding: 16px 0;
     background: #f7f9fc;
 }
 /* BADGE */
 
 .j2j-core-badge {
     display: inline-block;
     background: #eaf2ff;
     color: #0d6efd;
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 1.5px;
     padding: 6px 16px;
     border-radius: 50px;
     margin-bottom: 12px;
 }
 /* HEADING */
 
 .j2j-core-heading {
     font-size: 35px;
     font-weight: 800;
     color: #0b1633;
     margin-bottom: 0;
 }
 /* CARD */
 
 .j2j-core-card {
     background: #fff;
     border-radius: 18px;
     padding: 22px;
     display: flex;
     align-items: flex-start;
     gap: 16px;
     border-left: 4px solid #0d6efd;
     transition: 0.35s ease;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
     height: 100%;
 }
 /* HOVER */
 
 .j2j-core-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 14px 30px rgba(13, 110, 253, 0.10);
 }
 /* ICON */
 
 .j2j-core-icon {
     min-width: 55px;
     height: 55px;
     border-radius: 16px;
     background: #edf4ff;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .j2j-core-icon i {
     font-size: 24px;
     color: #0d6efd;
 }
 /* CONTENT */
 
 .j2j-core-content h4 {
     font-size: 21px;
     font-weight: 700;
     color: #0b1633;
     margin-bottom: 8px;
 }
 
 .j2j-core-content p {
     font-size: 14px;
     line-height: 1.7;
     color: #5d6b82;
     margin-bottom: 12px;
 }
 /* SMALL TAG */
 
 .j2j-core-content span {
     display: inline-block;
     background: #fff1f2;
     color: #e63946;
     font-size: 11px;
     font-weight: 700;
     padding: 6px 14px;
     border-radius: 50px;
 }
 /* RESPONSIVE */
 
 @media(max-width:768px) {
     .j2j-core-services {
         padding: 35px 0;
     }
     .j2j-core-heading {
         font-size: 28px;
     }
     .j2j-core-card {
         padding: 18px;
         gap: 14px;
     }
     .j2j-core-icon {
         min-width: 48px;
         height: 48px;
     }
     .j2j-core-icon i {
         font-size: 20px;
     }
     .j2j-core-content h4 {
         font-size: 18px;
     }
     .j2j-core-content p {
         font-size: 13px;
     }
 }
 /* =========================================
   J2J TRAINING PROGRAMS SECTION
   UNIQUE CLASS NAMES
========================================= */
 
 .j2j-trainings-zone {
     background: linear-gradient(180deg, #f4f8ff 0%, #eef5ff 100%);
     padding: 32px 0 !important;
     overflow: hidden;
     position: relative;
 }
 /* SOFT BACKGROUND GLOW */
 
 .j2j-trainings-zone::before {
     content: "";
     position: absolute;
     width: 420px;
     height: 420px;
     background: rgba(13, 110, 253, 0.06);
     border-radius: 50%;
     top: -180px;
     left: -140px;
     filter: blur(40px);
 }
 
 .j2j-trainings-zone::after {
     content: "";
     position: absolute;
     width: 350px;
     height: 350px;
     background: rgba(0, 123, 255, 0.05);
     border-radius: 50%;
     bottom: -180px;
     right: -120px;
     filter: blur(40px);
 }
 
 .j2j-trainings-zone .j2j-main-wrap {
     width: 100%;
     max-width: 1320px;
     margin: auto;
     padding: 0 72px;
     position: relative;
     z-index: 2;
 }
 /* =========================
   HEADING
========================= */
 
 .j2j-course-headingbox {
     text-align: center;
     margin-bottom: 24px;
 }
 
 .j2j-course-mini-title {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     background: rgba(13, 110, 253, 0.10);
     color: #0d6efd;
     font-size: 10px;
     font-weight: 700;
     padding: 6px 14px;
     border-radius: 50px;
     margin-bottom: 12px;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(13, 110, 253, 0.10);
 }
 
 .j2j-course-main-title {
     font-size: 35px;
     font-weight: 800;
     color: #08142e;
     margin-bottom: 6px;
     line-height: 1.2;
 }
 
 .j2j-course-main-title span {
     color: #0d6efd;
 }
 
 .j2j-course-subtext {
     color: #6b7280;
     font-size: 0.88rem;
     margin: 0;
 }
 /* =========================
   COURSE SLIDER AREA
========================= */
 
 .j2j-slider-shell {
     position: relative;
 }
 
 .j2j-horizontal-course-track {
     display: flex;
     gap: 18px;
     overflow-x: auto;
     scroll-behavior: smooth;
     padding: 8px 4px 14px;
 }
 
 .j2j-horizontal-course-track::-webkit-scrollbar {
     display: none;
 }
 /* =========================
   CARD WIDTH
========================= */
 
 .j2j-single-course-unit {
     flex: 0 0 235px;
 }
 /* =========================
   PREMIUM CARD
========================= */
 
 .j2j-course-glass-card {
     background: rgba(255, 255, 255, 0.92);
     border-radius: 22px;
     overflow: hidden;
     cursor: pointer;
     transition: all 0.35s ease;
     border: 1px solid rgba(255, 255, 255, 0.6);
     position: relative;
     backdrop-filter: blur(12px);
     box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05), 0 2px 8px rgba(15, 23, 42, 0.04);
 }
 /* TOP BORDER EFFECT */
 
 .j2j-course-glass-card::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 4px;
     /* background: linear-gradient(90deg,#0d6efd,#00bfff);
    z-index: 5; */
 }
 
 .j2j-course-glass-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 18px 40px rgba(13, 110, 253, 0.12), 0 10px 20px rgba(0, 0, 0, 0.05);
 }
 /* =========================
   IMAGE
========================= */
 
 .j2j-course-banner {
     position: relative;
     overflow: hidden;
 }
 
 .j2j-course-banner img {
     width: 100%;
     height: 145px;
     object-fit: cover;
     display: block;
     transition: transform 0.45s ease;
 }
 
 .j2j-course-glass-card:hover .j2j-course-banner img {
     transform: scale(1.07);
 }
 /* IMAGE OVERLAY */
 
 .j2j-course-banner::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient( to top, rgba(0, 0, 0, 0.20), transparent 50%);
 }
 /* =========================
   PREMIUM BADGE
========================= */
 
 .j2j-course-floating-tag {
     position: absolute;
     top: 12px;
     left: 12px;
     background: rgba(255, 255, 255, 0.92);
     color: #0d6efd;
     font-size: 10px;
     font-weight: 700;
     padding: 5px 10px;
     border-radius: 5px;
     backdrop-filter: blur(12px);
     border: 0px solid rgba(255, 255, 255, 0.7);
     z-index: 4;
     box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
 }
 /* =========================
   CONTENT
========================= */
 
 .j2j-course-detail-box {
     padding: 15px;
 }
 
 .j2j-course-title {
     font-size: clamp(0.88rem, 1vw, 1.05rem);
     font-weight: 700;
     /* line-height: 1.3; */
     color: #08142e;
     margin-bottom: -2px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     min-height: 44px;
     word-break: break-word;
 }
 /* =========================
   DURATION
========================= */
 
 .j2j-course-duration-chip {
     display: inline-flex;
     align-items: center;
     background: #edf4ff;
     color: #0d6efd;
     font-size: 11px;
     font-weight: 700;
     padding: 7px 14px;
     border-radius: 7px;
     margin-bottom: 10px;
     border: 1px solid rgba(13, 110, 253, 0.08);
 }
 /* =========================
   PRICE ROW
========================= */
 
 .j2j-course-bottom-flex {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 10px;
 }
 /* =========================
   PRICE
========================= */
 
 .j2j-price-wrapper {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 4px;
 }
 
 .j2j-old-course-price {
     color: #dc3545;
     font-size: 0.78rem;
     text-decoration: line-through;
     font-weight: 700;
 }
 
 .j2j-new-course-price {
     color: #0d6efd;
     font-size: 1rem;
     font-weight: 600;
 }
 /* =========================
   BUTTON
========================= */
 
 .j2j-course-action-btn {
     border: none;
     outline: none;
     background: linear-gradient( 135deg, #0d6efd, #0056d6);
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     padding: 5px 18px;
     border-radius: 14px;
     transition: 0.3s ease;
     box-shadow: 0 8px 18px rgba(13, 110, 253, 0.22);
     margin-left: 20px !important;
 }
 
 .j2j-course-action-btn:hover {
     transform: translateY(-2px);
     background: linear-gradient( 135deg, #0056d6, #0d6efd);
     box-shadow: 0 12px 24px rgba(13, 110, 253, 0.28);
 }
 /* =========================
   ARROWS
========================= */
 
 .j2j-slider-arrow {
     position: absolute;
     top: 45%;
     transform: translateY(-50%);
     width: 42px;
     height: 42px;
     border: none;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.92);
     color: #0d6efd;
     font-size: 1rem;
     font-weight: 800;
     z-index: 20;
     backdrop-filter: blur(10px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     transition: 0.3s ease;
 }
 
 .j2j-slider-arrow:hover {
     background: #0d6efd;
     color: #fff;
     transform: translateY(-50%) scale(1.08);
 }
 
 .j2j-slider-left {
     left: -12px;
 }
 
 .j2j-slider-right {
     right: -12px;
 }
 /* =========================
   RESPONSIVE
========================= */
 
 @media(max-width:768px) {
     .j2j-trainings-zone {
         padding: 26px 0 !important;
     }
     .j2j-trainings-zone .j2j-main-wrap {
         padding: 0 16px;
     }
     .j2j-course-main-title {
         font-size: 1.35rem;
     }
     .j2j-course-subtext {
         font-size: 0.82rem;
     }
     .j2j-single-course-unit {
         flex: 0 0 210px;
     }
     .j2j-course-banner img {
         height: 128px;
     }
     .j2j-course-title {
         min-height: 40px;
         font-size: 0.86rem;
     }
     .j2j-slider-arrow {
         display: none;
     }
 }
 /* =========================
        HERO SECTION
========================= */
 
 .j2j-hero-section {
     padding-top: 120px;
     padding-bottom: 10px;
     background: #f4f8fc;
     overflow: hidden;
     position: relative;
 }
 
 .j2j-hero-content {
     padding-right: 40px;
 }
 /* BADGE */
 
 .hero-badge {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     background: rgba(13, 110, 253, 0.1);
     color: #0d6efd;
     padding: 6px 15px;
     border-radius: 40px;
     font-size: 14px;
     font-weight: 600;
     margin-bottom: 20px;
 }
 
 .hero-badge i {
     font-size: 15px;
 }
 /* HEADING */
 
 .j2j-hero-content h1 {
     font-size: 25px;
     line-height: 1.1;
     font-weight: 800;
     color: #0b2239;
     margin-bottom: 20px;
 }
 
 .j2j-hero-content h1 span {
     color: #0d6efd;
 }
 
 .j2j-hero-content p {
     font-size: 15px;
     line-height: 1.5;
     color: #6c757d;
     margin-bottom: 20px;
 }
 /* FEATURES */
 
 .hero-features {
     margin-bottom: 35px;
 }
 
 .hero-feature-item {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 7px;
 }
 
 .hero-feature-item i {
     color: #0d6efd;
     font-size: 18px;
 }
 
 .hero-feature-item span {
     color: #0b2239;
     font-weight: 500;
 }
 /* BUTTONS */
 
 .hero-btns {
     display: flex;
     gap: 18px;
     margin-bottom: 45px;
 }
 
 .hero-btn {
     padding: 16px 32px;
     border-radius: 14px;
     text-decoration: none;
     font-weight: 700;
     transition: 0.4s ease;
     display: inline-block;
 }
 
 .primary-btn {
     background: #0d6efd;
     color: #fff;
     box-shadow: 0 10px 25px rgba(13, 110, 253, 0.25);
 }
 
 .primary-btn:hover {
     background: #0b5ed7;
     transform: translateY(-4px);
     color: #fff;
 }
 
 .secondary-btn {
     border: 2px solid #dbe6f5;
     color: #0b2239;
     background: #fff;
 }
 
 .secondary-btn:hover {
     border-color: #0d6efd;
     color: #0d6efd;
     transform: translateY(-4px);
 }
 /* STATS */
 
 .hero-stats {
     display: flex;
     gap: 25px;
     flex-wrap: wrap;
 }
 
 .hero-stat-box h3 {
     font-size: 30px;
     font-weight: 800;
     color: #0d6efd;
     margin-bottom: 5px;
 }
 
 .hero-stat-box p {
     font-size: 15px;
     margin: 0;
     color: #6c757d;
 }
 /* IMAGE */
 
 .hero-image-wrapper {
     position: relative;
 }
 
 .hero-image-wrapper img {
     width: 100%;
     border-radius: 28px;
     object-fit: cover;
     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
 }
 /* FLOATING CARDS */
 
 .hero-floating-card {
     position: absolute;
     background: #fff;
     border-radius: 18px;
     padding: 10px 15px;
     display: flex;
     align-items: center;
     gap: 15px;
     box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
     animation: floatY 3s ease-in-out infinite;
 }
 
 .top-card {
     top: 40px;
     right: -40px;
 }
 
 .bottom-card {
     left: -40px;
     bottom: 40px;
 }
 
 .hero-floating-icon {
     width: 55px;
     height: 55px;
     background: rgba(13, 110, 253, 0.1);
     color: #0d6efd;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
 }
 
 .hero-floating-card h4 {
     margin: 0;
     font-size: 14px;
     font-weight: 700;
     color: #0b2239;
 }
 
 .hero-floating-card p {
     margin: 0;
     font-size: 10px;
     color: #6c757d;
 }
 /* FLOAT ANIMATION */
 
 @keyframes floatY {
     0% {
         transform: translateY(0px);
     }
     50% {
         transform: translateY(-10px);
     }
     100% {
         transform: translateY(0px);
     }
 }
 /* =========================
        RESPONSIVE
========================= */
 
 @media(max-width:991px) {
     .j2j-hero-section {
         padding: 80px 0;
     }
     .j2j-hero-content {
         padding-right: 0;
         margin-bottom: 50px;
     }
     .j2j-hero-content h1 {
         font-size: 48px;
     }
     .top-card {
         right: 10px;
     }
     .bottom-card {
         left: 10px;
     }
 }
 
 @media(max-width:576px) {
     .j2j-hero-content h1 {
         font-size: 38px;
     }
     .hero-btns {
         flex-direction: column;
     }
     .hero-btn {
         width: 100%;
         text-align: center;
     }
     .hero-stats {
         gap: 18px;
     }
     .hero-floating-card {
         padding: 14px 16px;
     }
     .hero-floating-card h4 {
         font-size: 18px;
     }
 }
 /* =====================================================
   ABOUT PAGE
===================================================== */
 
 .j2j-about-section {
     /* padding:100px 0; */
     margin-top: 120px;
     margin-bottom: 0px;
     background: #ffffff;
     overflow: hidden;
     position: relative;
 }
 
 .j2j-about-image-wrapper {
     position: relative;
     border-radius: 26px;
     overflow: hidden;
     animation: j2jFadeLeft 1s ease;
 }
 
 .j2j-about-main-image {
     width: 100%;
     height: 420px;
     object-fit: cover;
     border-radius: 26px;
     transition: 0.6s ease;
 }
 
 .j2j-about-image-wrapper:hover .j2j-about-main-image {
     transform: scale(1.06);
 }
 
 .j2j-experience-box {
     position: absolute;
     left: 22px;
     bottom: 22px;
     background: #0d6efd;
     padding: 18px 24px;
     border-radius: 20px;
     min-width: 180px;
     color: #fff;
     box-shadow: 0 15px 40px rgba(217, 50, 79, 0.25);
     animation: j2jFloating 4s ease-in-out infinite;
 }
 
 .j2j-experience-box h2 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 5px;
     line-height: 1;
 }
 
 .j2j-experience-box p {
     margin: 0;
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 1px;
 }
 
 .j2j-mini-title {
     display: flex;
     align-items: center;
     gap: 12px;
     color: #0d6efd;
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 3px;
     margin-bottom: 18px;
     animation: j2jFadeRight 1s ease;
 }
 
 .j2j-mini-title span {
     width: 32px;
     height: 2px;
     background: #0d6efd;
 }
 
 .j2j-main-title {
     font-size: 35px;
     font-weight: 800;
     line-height: 1.2;
     color: #08142e;
     margin-bottom: 20px;
     animation: j2jFadeRight 1s ease;
 }
 
 .j2j-about-text {
     font-size: 15px;
     line-height: 1.4;
     color: #667085;
     margin-bottom: 14px;
     animation: j2jFadeRight 1.1s ease;
 }
 /* =====================================================
   INFO CARDS
===================================================== */
 
 .j2j-info-card {
     background: #ffffff;
     border-radius: 22px;
     padding: 12px 36px;
     border-top: 3px solid #0d6efd;
     box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
     transition: 0.45s ease;
     position: relative;
     overflow: hidden;
     height: 100%;
 }
 /* HOVER EFFECT */
 
 .j2j-info-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
 }
 /* TOP LIGHT EFFECT */
 
 .j2j-info-card::before {
     content: "";
     position: absolute;
     top: -120%;
     left: -20%;
     width: 140%;
     height: 220%;
     background: linear-gradient( rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
     transform: rotate(25deg);
     transition: 0.7s;
 }
 
 .j2j-info-card:hover::before {
     top: 120%;
 }
 
 .j2j-card-icon {
     width: 48px;
     height: 48px;
     border-radius: 50%;
     /* background:#fff2f5; */
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 5px;
     animation: j2jFloating 3s ease-in-out infinite;
 }
 
 .j2j-card-icon i {
     font-size: 30px;
     color: #0d6efd;
     transition: 0.4s ease;
 }
 
 .j2j-info-card:hover .j2j-card-icon i {
     transform: rotate(10deg) scale(1.15);
 }
 
 .j2j-info-card h4 {
     font-size: 26px;
     font-weight: 700;
     color: #0f2341;
     margin-bottom: 14px;
 }
 
 .j2j-info-card p {
     font-size: 14px;
     line-height: 1.4;
     color: #667085;
     margin: 0;
 }
 
 @keyframes j2jFloating {
     0% {
         transform: translateY(0px);
     }
     50% {
         transform: translateY(-10px);
     }
     100% {
         transform: translateY(0px);
     }
 }
 /* LEFT ENTRY */
 
 @keyframes j2jFadeLeft {
     from {
         opacity: 0;
         transform: translateX(-60px);
     }
     to {
         opacity: 1;
         transform: translateX(0);
     }
 }
 /* RIGHT ENTRY */
 
 @keyframes j2jFadeRight {
     from {
         opacity: 0;
         transform: translateX(60px);
     }
     to {
         opacity: 1;
         transform: translateX(0);
     }
 }
 
 @media(max-width:991px) {
     .j2j-main-title {
         font-size: 32px;
     }
     .j2j-about-main-image {
         height: 350px;
     }
 }
 
 @media(max-width:767px) {
     .j2j-about-section {
         padding: 50px 0;
     }
     .j2j-main-title {
         font-size: 28px;
     }
     .j2j-about-main-image {
         height: 300px;
     }
     .j2j-experience-box {
         min-width: 150px;
         padding: 14px 18px;
     }
     .j2j-experience-box h2 {
         font-size: 32px;
     }
     .j2j-experience-box p {
         font-size: 11px;
     }
     .j2j-info-card {
         padding: 22px 20px;
     }
 }
 /* =========================================
   EXACT TIMELINE UI DESIGN
========================================= */
 
 .j2j-timeline-section {
     padding: 55px 0;
     background: #fff;
     overflow: hidden;
 }
 /* TITLE */
 
 .j2j-timeline-title {
     font-size: 35px;
     font-weight: 800;
     color: #11284a;
     margin-bottom: 55px;
 }
 /* MAIN AREA */
 
 .j2j-timeline-main {
     position: relative;
 }
 /* LINE */
 
 .j2j-timeline-line {
     position: absolute;
     top: 12px;
     left: 0;
     width: 100%;
     height: 3px;
     background: #5893ec;
 }
 /* EACH ITEM */
 
 .j2j-time-item {
     position: relative;
     text-align: center;
     padding: 0 18px;
     transition: 0.35s ease;
 }
 /* DOT */
 
 .j2j-time-dot {
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: #fff;
     border: 3px solid #0d6efd;
     margin: auto;
     position: relative;
     top: -3px;
     z-index: 2;
     transition: 0.3s ease;
 }
 
 .j2j-time-dot::before {
     content: "";
     width: 8px;
     height: 8px;
     background: #0d6efd;
     border-radius: 50%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }
 /* YEAR */
 
 .j2j-time-year {
     font-size: 26px;
     font-weight: 800;
     color: #0d6efd;
     margin-top: 18px;
     margin-bottom: 8px;
     line-height: 1;
     transition: 0.3s ease;
 }
 /* HEADING */
 
 .j2j-time-heading {
     font-size: 16px;
     font-weight: 700;
     color: #11284a;
     margin-bottom: 10px;
 }
 /* TEXT */
 
 .j2j-time-text {
     font-size: 14px;
     line-height: 1.5;
     color: #7b8794;
     margin: 0;
 }
 /* HOVER EFFECT */
 
 .j2j-time-item:hover {
     transform: translateY(-8px);
 }
 
 .j2j-time-item:hover .j2j-time-year {
     transform: scale(1.05);
 }
 
 .j2j-time-item:hover .j2j-time-dot {
     box-shadow: 0 0 0 8px rgba(199, 61, 82, 0.12);
 }
 /* RESPONSIVE */
 
 @media(max-width:991px) {
     .j2j-timeline-line {
         display: none;
     }
     .j2j-time-dot {
         margin-bottom: 10px;
     }
     .j2j-time-item {
         margin-bottom: 35px;
     }
     .j2j-timeline-title {
         font-size: 32px;
         margin-bottom: 40px;
     }
 }
 
 @media(max-width:576px) {
     .j2j-timeline-section {
         padding: 45px 0;
     }
     .j2j-time-year {
         font-size: 42px;
     }
     .j2j-time-heading {
         font-size: 15px;
     }
     .j2j-time-text {
         font-size: 13px;
     }
     .j2j-timeline-title {
         font-size: 28px;
     }
 }
 /* =========================================
   JUMP2JOIN CORE VALUES SECTION CSS
========================================= */
 
 .newj2j-core-values-section {
     /* width:100%; */
     margin-top: 5PX;
     margin-bottom: 5px;
     background: #f5f8fc;
     position: relative;
 }
 
 .newj2j-core-values-container {
     /* max-width:1200px; */
     margin-left: 5%;
     margin-right: 5%;
     margin-block: 15px;
 }
 
 .newj2j-core-values-heading {
     text-align: center;
     margin-bottom: 10px;
 }
 
 .newj2j-core-values-heading span {
     display: inline-block;
     padding: 8px 18px;
     border-radius: 50px;
     background: #e8f1ff;
     color: #0d6efd;
     font-size: 13px;
     font-weight: 600;
     letter-spacing: 0.5px;
     margin-bottom: 10px;
 }
 
 .newj2j-core-values-heading h2 {
     font-size: 35px;
     font-weight: 800;
     color: #0f172a;
     margin-bottom: 10px;
     line-height: 1.2;
 }
 
 .newj2j-core-values-heading p {
     max-width: 700px;
     margin: auto;
     color: #64748b;
     font-size: 16px;
     line-height: 1.9;
 }
 
 .newj2j-core-values-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 18px;
 }
 /* CARD */
 
 .newj2j-core-card {
     background: #ffffff;
     border-radius: 24px;
     padding: 20px 15px;
     text-align: center;
     transition: all 0.4s ease;
     border: 1px solid rgba(0, 0, 0, 0.04);
     box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
     position: relative;
     overflow: hidden;
 }
 
 .newj2j-core-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 45px rgba(11, 74, 143, 0.12);
 }
 
 .newj2j-core-icon {
     width: 75px;
     height: 75px;
     border-radius: 50%;
     background: #edf4fb;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: auto auto 28px;
 }
 
 .newj2j-core-icon i {
     font-size: 30px;
     color: #0d6efd;
 }
 
 .newj2j-core-card h3 {
     font-size: 18px;
     font-weight: 600;
     color: #0f172a;
     margin-bottom: 14px;
 }
 
 .newj2j-core-card p {
     font-size: 14px;
     line-height: 1.9;
     color: #64748b;
     margin: 0;
 }
 /* =========================================
   RESPONSIVE CSS
========================================= */
 
 @media(max-width:1100px) {
     .newj2j-core-values-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
 @media(max-width:768px) {
     .newj2j-core-values-section {
         padding: 70px 15px;
     }
     .newj2j-core-values-grid {
         grid-template-columns: 1fr;
     }
     .newj2j-core-values-heading h2 {
         font-size: 32px;
     }
     .newj2j-core-values-heading p {
         font-size: 15px;
     }
     .newj2j-core-card {
         padding: 38px 24px;
     }
 }