/* ===============================================
   ADU DLAMINI ACADEMY - MASTER STYLESHEET
   Combined styles for all pages
   =============================================== */

/* === GLOBAL RESET & BASE STYLES === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden;
    margin:0;
}

/* === NAVIGATION STYLES === */


/**Secondary Navigation, Above main nav***/
.top-menu {
    display: flex;
    /* Pushes child elements to the far ends of the container */
    justify-content: space-between;
    width:100%;
    padding-bottom:10px;
}


.sec-nav {
    padding-left:10%;
    
}
.sec-nav li {
    padding:10px;
}

.sec-nav a {
    font-family: "Abril Fatface";
  font-weight: 400;
  font-style: normal;
    font-size: 1rem;
    color:#1e0870 !important;
}



/***Social links***/
.social-links ul {
  list-style-type: none; /* Removes bullet points */
  padding: 0;
  margin: 0;
  display: flex; /* Activates Flexbox */
  justify-content: center; /* Centers the icons horizontally (optional) */
  gap: 20px; /* Adds space between the icons */
  margin-left:50px;
}

.social-links li a {
  /* Add styling for your icons (color, size, padding) */
  color: #1e0870;
  font-size: 20px;
  padding:10px;
  text-decoration: none; /* Removes underlines from links */
}



.login-menu li {
    border-style:solid;
    border-color:#1e0870;
    border-radius:2px;
    border-width:1px;
    padding:10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    color:#1e0870;
    
}

.login-menu li a {
    color:#1e0870;
}

.login-menu li:hover {
    background-color:#1e0870 !important;
}

.login-menu li a:hover {
    color:#fff;
}



#loginBtn {
    background-color:#1e0870 !important;
    
}

#loginBtn a {
    color:#fff;
}

#loginBtn:hover {
    background-color:#fff;
}

#loginBtn a:hover {
    color:#1e0870 !important;
}





/*Main menu, second header*/
.main-menu {
    background: rgba(30, 8, 112, 0.95);
    max-height:70px;
      display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px 5%;
  box-shadow: 0px 1px 10px #999;
}

.main-menu ul {
    margin-right:20%;
}

nav {
    
    position:relative;
    width: 90%;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1;
    transition: all 0.4s ease;
    background: transparent;
    max-height:70px;
}

nav.scrolled {
    background: #1e0870;
    padding: 1rem 5%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Logo Styles */
.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
}

.logo img {
    height: 70px;
    width:auto;
    margin-left:0px;
}

.logo-icon {
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.logo-icon:hover {
    transform: rotate(10deg) scale(1.1);
}







.top-menu {
    margin-top:5px;
    background-color:white !important;
    display: flex;
    width:100% !important;
}


@media (max-width: 768px) {
  .top-menu {
    flex-direction: column; /* Vertical on mobile */
    align-items: center;
    justify-content: center;
    
  }
}

.top-menu ul {
    text-align: right;
  list-style-type: none;
  padding-right: 20px;
}


.top-menu li {
  margin-right: 0px;    
  list-style-type: none; 
  
  float: right;
}


.top-menu li a {
    color:rgba(30, 8, 112, 0.95);
    font-family:Roboto;
    text-decoration:none;
}


/* Nav Links */
.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
    transition: all 0.4s ease;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.nav-links li a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: white;
    transition: width 0.3s ease;
}

.nav-links li a:hover::after {
    width: 100%;
}

/* Login Button */
.login-btn {
    background: white;
    color: #1e0870;
    padding: 0.7rem 2rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
}

/* Hamburger Menu 
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1;
}

.hamburger span {
    width: 30px;
    height: 5px;
    background: white;
    transition: all 0.3s ease;
    border-radius: 3px;
}

.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -8px);
}
*/
/* === HERO SECTION (HOME PAGE) === */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #1e0870 0%, #4a1ba8 100%);
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: -1;
    width: 100%;
    padding: 0 5%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-top: 80px;
}

.hero-text {
    color: white;
}

.hero-text h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    animation: slideInLeft 0.8s ease;
}

.hero-text .highlight {
    font-size: 5rem;
    display: block;
    font-weight: 900;
}

.hero-text p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0.95;
    animation: slideInLeft 1s ease;
}

.cta-btn {
    background: #1e86c5 !important;
    color: #fff;
    padding: 1rem 3rem;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 1px;
    text-decoration: none;
    
    box-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0,) !important;
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 1px 1px 1px rgba(94, 200, 242, 0.4);
}

.hero-image {
    position: relative;
    animation: slideInRight 0.8s ease;
}

.hero-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.decorative-circle {
    position: absolute;
    width: 300px;
    height: 300px;
    border: 20px solid rgba(94, 200, 242, 0.3);
    border-radius: 50%;
    top: -50px;
    right: -50px;
    animation: pulse 3s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}



.slider-container {
  width: 100vw;
  height: 70vh;
  position: relative;
  overflow: hidden;
}

.slider-wrapper {
  display: flex;
  width: 300vw; /* 3 slides * 100vw */
  height: 100%;
  transition: transform 0.6s ease-in-out;
}

.slide {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

.bg-media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* This makes the media fill the screen */
  z-index: -1;
}

/* Optional: Content styling */
.content {
    color:#1e0870;
    background-color: #fff;
    padding:0;
  place-items: center;
  min-width:300px;
  opacity:0.8;
  border-radius: 15px 50px;
  padding:25px;

}
.content h1 {
  font-family: sans-serif;
  font-size: 2rem;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.content p {
    font-family: arial;
    font-size:1.2rem;
    justify-content:center;
}

/* Navigation Dots */
.nav-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.dot {
  width: 15px;
  height: 15px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  cursor: pointer;
}

.dot.active { background: white; }


/* Nav Buttons */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  padding: 15px;
  cursor: pointer;
  z-index: 0;
  font-size: 24px;
}
.nav-btn:hover { background: rgba(255, 255, 255, 0.4); }
.prev { left: 20px; }
.next { right: 20px; }




.btnHome {
    font-family: 'Roboto';
    text-align: center;
    font-size: 1rem;
    z-index: 1;
        background: #1e86c5 !important;
    border-radius: 2px;
    box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset, rgba(44, 187, 99, .15) 0 1px 2px, rgba(44, 187, 99, .15) 0 2px 4px, rgba(44, 187, 99, .15) 0 4px 8px, rgba(44, 187, 99, .15) 0 8px 16px, rgba(44, 187, 99, .15) 0 16px 32px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-family: CerebriSans-Regular, -apple-system, system-ui, Roboto, sans-serif;
    padding: 12px 24px;
    margin-bottom
Shorthand property to set values for the thickness of the margin area. If left is omitted, it is the same as right. If bottom is omitted it is the same as top, if right is omitted it is the same as top. Negative values for margin properties are allowed, but there may be implementation-specific limits..

Widely available across major browsers (Baseline since January 2018)
Learn more

Don't show
: 10px;
    text-align: center;
    text-decoration: none;
    transition: all 250ms;
    border: 0;
    font-size: 16px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}


@keyframes slideContentFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-content h1 {
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    font-weight: 900;
}

.slide-content .highlight {
    display: block;
    font-size: 5.5rem;
    color: #5ec8f2;
    font-weight: 900;
}

.slide-content p {
    font-size: 1.8rem;
    margin-bottom: 2.5rem;
    opacity: 0.95;
}

/*
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.3);
    color: white;
    border: none;
    font-size: 2rem;
    padding: 1rem 1.5rem;
    cursor: pointer;
    z-index: 4;
    transition: all 0.3s ease;
    border-radius: 5px;
}


.slider-btn:hover {
    background: rgba(255, 255, 255, 0.5);
}

.slider-btn.prev {
    left: 2rem;
}

.slider-btn.next {
    right: 2rem;
}*/

.slider-dots {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 1;
}

.dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active,
.dot:hover {
    background: white;
    transform: scale(1.2);
}

/*aCCREDITED By; LOGOS SEC*/
.logo-section {
  padding: 40px 20px;
  text-align: center;
  background-color: #f9f9f9;
}

.logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 30px; /* Space between logos */
  max-width: 1200px;
  margin: 0 auto;
}

.logo-item {
  flex: 0 1 150px; /* Mobile: 150px base width */
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-item img {
  max-width: 100%;
  height: auto;
  filter: grayscale(100%); /* Makes logo gray */
  opacity: 0.7;
  transition: all 0.3s ease;
}

/* Hover effect to bring color back */
.logo-item img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Tablet and Desktop adjustments */
@media (min-width: 768px) {
  .logo-item {
    flex: 0 1 180px; /* Slightly larger on desktop */
  }
}






/*Feature courses section*/
:root {
    --brand-primary: #003366; /* Deep College Blue */
    --brand-accent: #ffcc00;  /* Gold highlight */
    --surface-light: #ffffff;
    --shadow-soft: 0 8px 24px rgba(0,0,0,0.08);
}

.featured-programs {
    padding: 80px 5%;
    background: #f8f9fa;
}

.featured-programs h1 {
    font-style: italic;
}

.programs-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Unique Class Name to Avoid Conflicts */
.edu-program-card {
    background: var(--surface-light);
    border-radius: 12px;
    border-top: 5px solid var(--brand-primary);
    box-shadow: var(--shadow-soft);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.edu-program-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    border-top-color: var(--brand-accent);
}

.edu-card-badge-area { padding: 20px 25px 0; }

.edu-badge {
    background: #eef2f7;
    color: var(--brand-primary);
    padding: 6px 12px;
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
}

.edu-card-content { padding: 20px 25px; flex-grow: 1; }

.edu-title {
    color: var(--brand-primary);
    font-size: 1.4rem;
    margin-bottom: 12px;
    line-height: 1.3;
}

.edu-stats {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 15px;
}

.edu-description {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
}

.edu-card-action {
    padding: 20px 25px;
    background: #fafafa;
    border-radius: 0 0 12px 12px;
}

.edu-link {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.edu-link:hover { text-decoration: underline; }




:root {
    --edu-blue: #1a5f7a;
    --edu-accent: #ffcc00;
}

.edu-news-section { padding: 60px 5%; background: #ffffff; }

.edu-news-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.edu-news-header h2 { color: var(--edu-blue); font-size: 2rem; border-left: 5px solid var(--edu-accent); padding-left: 15px; }

/* The uniquely named slider container */
.edu-news-slider-wrapper { overflow: hidden; position: relative; }

.edu-news-carousel {
    display: flex;
    gap: 25px;
    transition: transform 0.5s ease-in-out;
    padding-bottom: 10px;
}


/**Latest news and posts***/
.edu-news-item {
    min-width: 320px;
    flex: 0 0 320px;
    background: #f9f9f9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.edu-news-img { height: 180px; background-size: cover; background-position: center; background-color: #ddd; }

.edu-news-content { padding: 20px; }

.edu-news-date { font-size: 0.8rem; color: #888; font-weight: bold; text-transform: uppercase; }

.edu-news-content h3 { font-size: 1.2rem; margin: 10px 0; color: var(--edu-blue); min-height: 3em; }

.edu-news-content p { font-size: 0.9rem; color: #555; line-height: 1.5; margin-bottom: 15px; }

.edu-read-more { color: var(--edu-blue); font-weight: bold; text-decoration: none; font-size: 0.9rem; border-bottom: 2px solid transparent; }

.edu-read-more:hover { border-bottom-color: var(--edu-accent); }

/* Control Buttons */
.edu-ctrl-btn {
    background: var(--edu-blue);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
}

.edu-ctrl-btn:hover { background: #13465a; }




/* Mobile fallback: Show 1 card instead of 4 */
@media (max-width: 768px) {
  .gmn-news-item {
    flex: 0 0 100% !important;
  }
}

/*ONLINE application modal; floating btn*/
.btn-apply {
    position: fixed;
    float:left;;
    bottom: 30px;
    left: 30px;
    font-family:'Roboto';
    text-align: center;
    font-size: 1rem;
    z-index: 999;
  
  border-radius: 15px 50px;
  box-shadow: rgba(255, 245, 235, .2) 0 -25px 18px -14px inset,rgba(255, 255, 255, .15) 0 1px 2px,rgba(255, 245, 235, .15) 0 2px 4px,rgba(255, 255, 255, .15) 0 4px 8px,rgba(255, 245, 235, .15) 0 8px 16px,rgba(255, 255, 255, .15) 0 16px 32px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 12px 24px;
  margin-bottom: 10px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;

}
.button-33:hover {
  box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);

}

.whatsapp-float:hover {
    background-color: #20ba5a;
    transform: scale(1.1);
}

@keyframes pulse-whatsapp {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}


/* === WHATSAPP FLOAT BUTTON === */
.whatsapp-float {
    position: fixed;
    float:right;
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 20px;
    background-color: #25d366;
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 35px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    animation: pulse-whatsapp 2s infinite;
}

.whatsapp-float:hover {
    background-color: #20ba5a;
    transform: scale(1.1);
}

@keyframes pulse-whatsapp {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* === FORM SECTION TITLES === */
.form-section-title {
    margin: 2rem 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e0e0e0;
}

.form-section-title h3 {
    color: #1e0870;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.form-section-title p {
    color: #666;
    font-size: 1rem;
}

.registration-fee-info {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 1rem;
    border-radius: 5px;
    margin-top: 0.5rem;
}

.registration-fee-info strong {
    color: #856404;
}

/* === FILE INPUT STYLING === */
input[type="file"] {
    padding: 0.8rem;
    border: 2px dashed #0082f5;
    border-radius: 10px;
    cursor: pointer;
    background: #f8f9fa;
    transition: all 0.3s ease;
}

input[type="file"]:hover {
    background: #e9ecef;
    border-color: #1e0870;
}

.form-group small {
    display: block;
    margin-top: 0.3rem;
    color: #6c757d;
    font-size: 0.85rem;
}

/* === ADVISOR CONTACT === */
.advisor-contact {
    text-align: center;
    margin: 1.5rem 0;
    padding: 1rem;
    background: #e7f3ff;
    border-radius: 10px;
}

.advisor-link {
    color: #0082f5;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.advisor-link:hover {
    color: #1e0870;
    text-decoration: underline;
}

/* === MAP SECTION === */
.map-section {
    padding: 4rem 5%;
    background: white;
    text-align: center;
}

.map-section h2 {
    color: #1e0870;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    font-weight: 900;
}

.map-container {
    max-width: 1400px;
    margin: 0 auto 1.5rem auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.map-note {
    color: #666;
    font-size: 1.2rem;
    margin: 1rem 0;
    font-weight: 600;
}

.map-btn {
    display: inline-block;
    background: #0082f5;
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 1rem;
    transition: all 0.3s ease;
}

.map-btn:hover {
    background: #1e0870;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 130, 245, 0.4);
}

/* === RESPONSIVE HERO SLIDER === */
@media (max-width: 968px) {
    .content h1 {
        font-size: 3rem;
    }
    
    .content .highlight {
        font-size: 3.5rem;
    }
    
    .content p {
        font-size: 1.3rem;
    }
    
    .btnHome {
        padding: 0.8rem 1.2rem;
        font-size: 1.5rem;
        margin-top:-20px;
    }
    
    .slider-btn.prev {
        left: 1rem;
    }
    
    .slider-btn.next {
        right: 1rem;
    }
}

@media (max-width: 768px) {
    .hero-slider {
        height: 80vh;
    }
    
    .slide-content h1 {
        font-size: 2.2rem;
    }
    
    .slide-content {
        font-size: 2.8rem;
    }
    
    .slide-content p {
        font-size: 1.1rem;
    }
    
    .cta-btn {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }
    
    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 28px;
        bottom: 20px;
        right: 20px;
    }
}

@media (max-width: 480px) {
    .slide-content h1 {
        font-size: 1.8rem;
    }
    
    .slide-content .highlight {
        font-size: 2.2rem;
    }
    
    .slide-content p {
        font-size: 1rem;
    }
    
    .slider-btn {
        padding: 0.5rem 0.8rem;
        font-size: 1.2rem;
    }
    
    .slider-dots {
        bottom: 2rem;
    }
    
    .dot {
        width: 10px;
        height: 10px;
    }
}


/* === PAGE HERO (COURSES PAGE) === */
.page-hero {
    background: linear-gradient(135deg, #0082f5 0%, #1e0870 100%);
    padding: 150px 5% 80px 5%;
    text-align: center;
    color: white;
}

.page-hero h1 {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

.page-hero p {
    font-size: 1.5rem;
    opacity: 0.95;
    max-width: 800px;
    margin: 0 auto;
}

/* === FILTER SECTION === */
.filter-section {
    background: white;
    padding: 2rem 5%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 100px;
    z-index: 100;
}

.filter-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-label {
    font-weight: 700;
    color: #1e0870;
    font-size: 1.1rem;
}

.filter-btn {
    background: #f0f0f0;
    color: #1e0870;
    border: 2px solid transparent;
    padding: 0.7rem 1.5rem;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.filter-btn:hover {
    background: #0082f5;
    color: white;
    transform: translateY(-2px);
}

.filter-btn.active {
    background: #1e0870;
    color: white;
    border-color: #1e0870;
}

/* === COURSES SECTION === */
.courses-section {
    padding: 4rem 5%;
    background: #f5f5f5;
    min-height: 70vh;
}

.courses-container {
    max-width: 1400px;
    margin: 0 auto;
}

.category-title {
    font-size: 2.5rem;
    color: #1e0870;
    margin-bottom: 2rem;
    font-weight: 900;
    border-bottom: 4px solid #0082f5;
    padding-bottom: 0.5rem;
}


.courses-category {
    margin-bottom:70px;
}
/*
.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 10rem;
}
*/
.course-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.course-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

.course-image {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background: linear-gradient(135deg, #0082f5 0%, #1e0870 100%);
}

.course-content {
    padding: 1.5rem;
}

.course-title {
    font-size: 1.5rem;
    color: #1e0870;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.course-subtitle {
    color: #0082f5;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.course-description {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.course-content ul {
    list-style-type: none;
    margin:10px;
}


.course-footer {
    display: flex;
    gap: 1rem;
}

.read-more-btn, .apply-btn {
    flex: 1;
    padding: 0.8rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.read-more-btn {
    background: #f0f0f0;
    color: #1e0870;
}

.read-more-btn:hover {
    background: #1e0870;
    color: white;
}

.apply-btn {
    background: #0082f5;
    color: white;
}

.apply-btn:hover {
    background: #0066cc;
    transform: translateY(-2px);
}

/* === MODAL STYLES === 
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.active {
    display: flex;
    opacity: 1;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background: white;
    border-radius: 20px;
    max-width: 900px;
    width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    animation: modalSlideIn 0.4s ease;
}



.modal {
  display: none; /* Hidden by default 
  position: fixed;
  z-index: 1; /*Sit on top 
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4); /* Black background with opacity 
  justify-content: center; /* Center the modal content 
  
  align-items: center;
}

.modal-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  position: relative;
}

.close, .close-btn {
  color: #aaa;
  float: right;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
}



*/


/*New Modals , critical modals*/
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
 
}

.modal.is-visible {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-height: 100vh;
  overflow-y: auto;
  position: relative;
  
}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  cursor: pointer;
  font-size: 24px;
}




table {
  /* Collapse borders into a single border */
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  /* Optional: Add a subtle shadow for depth */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px; /* Rounded corners for the table container */
  overflow: hidden; /* Ensures the inner borders adhere to the radius */
}

/* General cell styling */
th, td {
  padding: 12px 15px; /* Ample padding for readability */
  text-align: left; /* Align text consistently */
    border-left: 1px solid black;
  border-right: 1px solid black;
  /* Optional: add padding for better readability */
  padding: 8px; 
  
}

/* Header specific styling */
/* 1. The Wrapper: Handles the horizontal scroll on small screens */
        .table-wrapper {
            width: 100%;
            overflow-x: auto; /* Enable horizontal scrolling */
            margin: 20px 0;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        /* 2. The Table: Standard styling */
        table {
            width: 100%;
            min-width: 800px; /* Forces scroll if screen is narrower than 800px */
            border-collapse: collapse;
            font-family: sans-serif;
            background-color: white;
        }

        /* 3. Headers and Cells */
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }

        /* 4. Header Styling */
        thead tr {
            background: linear-gradient(135deg, #0082f5 0%, #1e0870 100%);
    padding: 150px 5% 80px 5%;
            color: #ffffff;
            text-align: left;
            font-weight: bold;
        }

        /* 5. Zebra Striping (Alternating Rows) */
        tbody tr:nth-of-type(even) {
            background-color: #f3f3f3;
        }

        /* 6. Hover effect for better UX */
        tbody tr:hover {
            background-color: #f1f9f8;
            transition: background-color 0.2s ease;
        }

        /* Responsive Hint for Users */
        .table-wrapper::after {
            content: "Scroll horizontally to see more →";
            display: block;
            text-align: center;
            font-size: 0.8rem;
            color: #888;
            padding: 10px;
        }
        @media (min-width: 801px) {
            .table-wrapper::after { display: none; }
        }

/* Style for the caption */
caption {
  padding: 10px;
  font-size: 1.2em;
  font-weight: bold;
  caption-side: top; /* Position the caption at the top */
}




/* Pure CSS method: Show the specific modal when its ID is targeted by the URL hash */
.modal:target {
  display: flex; 
}

/*LOGIN FORM*/
/* Bordered form */
form {
  border: 3px solid #f1f1f1;
}

/* Full-width inputs */
input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all button
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}
s */
/* Add a hover effect for buttons */
button:hover {
  opacity: 0.8;
}

/* Extra style for the cancel button (red) */
.cancelbtn {
  width: auto;
  padding: 10px 18px;
  background-color: #f44336;
}

/* Center the avatar image inside this container */
.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

/* Avatar image */
img.avatar {
  width: 40%;
  border-radius: 50%;
}

/* Add padding to containers */
.container {
  padding: 16px;
}

/* The "Forgot password" text */
span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
    display: block;
    float: none;
  }
  .cancelbtn {
    width: 100%;
  }
}


@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    background: linear-gradient(135deg, #1e0870 0%, #0082f5 100%);
    color: white;
    padding: 2rem;
    border-radius: 20px 20px 0 0;
    position: relative;
}

.close-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-modal:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.modal-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    font-weight: 900;
}

.modal-subtitle {
    font-size: 1.1rem;
    opacity: 0.95;
}

.modal-body {
    padding: 2rem;
}

.modal-body h3 {
    color: #1e0870;
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: 700;
    border-bottom: 2px solid #0082f5;
    padding-bottom: 0.5rem;
}

.modal-body h3:first-child {
    margin-top: 0;
}

.modal-body h4 {
    color: #0082f5;
    font-size: 1.1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.modal-body ul {
    list-style-position: inside;
    margin-left: 1rem;
}

.modal-body li {
    color: #333;
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.info-box {
    background: #f8f8f8;
    padding: 1.5rem;
    border-radius: 10px;
    text-align: center;
    border: 2px solid #e0e0e0;
}

.info-box h4 {
    color: #1e0870;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-box p {
    color: #333;
    font-weight: 600;
    font-size: 1.1rem;
}

.apply-now-btn {
    display: block;
    width: 100%;
    background: #0082f5;
    color: white;
    padding: 1rem;
    border: none;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 2rem;
    transition: all 0.3s ease;
}

.apply-now-btn:hover {
    background: #0066cc;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 130, 245, 0.4);
}

/* === APPLICATION SECTION === */
.apply-section {
    padding: 5rem 5%;
    background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
}

.apply-container {
    max-width: 1200px;
    margin: 0 auto;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.apply-header {
    background: linear-gradient(135deg, #1e0870 0%, #0082f5 100%);
    color: white;
    padding: 3rem;
    text-align: center;
}

.apply-header h2 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 900;
}

.apply-header p {
    font-size: 1.3rem;
    opacity: 0.95;
}

.apply-content {
    padding: 3rem;
}

.application-form .form-row {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.application-form .form-group {
    display: flex;
    flex-direction: column;
}

.application-form .form-group.full-width {
    grid-column: 1 / -1;
}

.application-form .form-group label {
    color: #1e0870;
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.application-form .form-group input,
.application-form .form-group select,
.application-form .form-group textarea {
    padding: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.application-form .form-group input:focus,
.application-form .form-group select:focus,
.application-form .form-group textarea:focus {
    outline: none;
    border-color: #0082f5;
    box-shadow: 0 0 0 3px rgba(0, 130, 245, 0.1);
}

.application-form .submit-btn {
    width: 100%;
    background: #0082f5;
    color: white;
    padding: 1.2rem;
    border: none;
    border-radius: 10px;
    font-size: 1.3rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.application-form .submit-btn:hover {
    background: #0066cc;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 130, 245, 0.4);
}

/* === APPLICATION MODAL === */
.application-modal .modal-content {
    max-width: 800px;
}

.form-container {
    padding: 2rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    color: #1e0870;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.8rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #0082f5;
}

.submit-btn {
    width: 100%;
    background: #0082f5;
    color: white;
    padding: 1rem;
    border: none;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.submit-btn:hover {
    background: #0066cc;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 130, 245, 0.4);
}

/* === STATS SECTION === */
.stats-section {
    background: linear-gradient(135deg, #0082f5 0%, #1e0870 100%);
    padding: 5rem 5%;
    color: white;
    text-align: center;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

.stat-card {
    padding: 2rem;
}

.stat-number {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
    display: block;
}

.stat-label {
    font-size: 1.2rem;
    opacity: 0.95;
}

/* === GALLERY SECTION === */
.gallery-section {
    padding: 5rem 5%;
    background: #1e0870;
}

.section-title-white {
    text-align: center;
    color: white;
    font-size: 3rem;
    margin-bottom: 3rem;
    font-weight: 900;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.value-card {
    text-align: center;
    padding: 2rem;
    background: #f8f8f8;
    border-radius: 15px;
    transition: transform 0.3s ease;
}

.value-card:hover {
    transform: translateY(-10px);
}

.value-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.value-card h3 {
    color: #1e0870;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.value-card p {
    color: #666;
    line-height: 1.6;
}

.why-choose-section {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    margin-bottom: 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.why-choose-section h2 {
    color: #1e0870;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 900;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-item {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #f8f8f8;
    border-radius: 15px;
}

.feature-number {
    font-size: 2rem;
    font-weight: 900;
    color: #0082f5;
    flex-shrink: 0;
}

.feature-item h3 {
    color: #1e0870;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.feature-item p {
    color: #666;
    line-height: 1.6;
}

.stats-highlight {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.stat-box {
    background: linear-gradient(135deg, #1e0870 0%, #0082f5 100%);
    color: white;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
}

.stat-box h3 {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 0.5rem;
}

.stat-box p {
    font-size: 1.1rem;
    opacity: 0.95;
}

.cta-section {
    background: linear-gradient(135deg, #1e0870 0%, #0082f5 100%);
    color: white;
    padding: 4rem;
    border-radius: 8px;
    text-align: center;
}

.cta-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 900;
}

.cta-section p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary, .btn-secondary {
    padding: 1rem 3rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-primary {
    background: white;
    color: #1e0870;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background: white;
    color: #1e0870;
    transform: translateY(-3px);
}

/* === APPLY PAGE STYLES === */
.apply-page-section {
    padding: 4rem 5%;
    background: #f5f5f5;
}

.apply-page-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
}

.application-info {
    background: white;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    height: fit-content;
    position: sticky;
    top: 120px;
}

.application-info h2 {
    color: #1e0870;
    font-size: 2rem;
    margin-bottom: 2rem;
    font-weight: 900;
}

.info-box-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: #f8f8f8;
    border-radius: 10px;
}

.info-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.info-item h3 {
    color: #1e0870;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.info-item p, .info-item ul {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
}

.info-item ul {
    margin: 0;
    padding-left: 1.2rem;
}

.info-item li {
    margin-bottom: 0.3rem;
}

.application-form-container {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.application-form-container h2 {
    color: #1e0870;
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    font-weight: 900;
}

.form-description {
    color: #666;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.required {
    color: #e74c3c;
}

.checkbox-group {
    margin: 1.5rem 0;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    cursor: pointer;
    color: #555;
    font-weight: normal;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.checkbox-label a {
    color: #0082f5;
    text-decoration: underline;
}

.form-note {
    text-align: center;
    color: #999;
    font-size: 0.9rem;
    margin-top: 1rem;
}

/* === CONTACT PAGE STYLES === */
.contact-section {
    padding: 4rem 5%;
    background: #f5f5f5;
}

.contact-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
}

.contact-info {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    height: fit-content;
}

.contact-info h2 {
    color: #1e0870;
    font-size: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 900;
}

.contact-info > p {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
}

.contact-item {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #f8f8f8;
    border-radius: 15px;
}

.contact-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.contact-item h3 {
    color: #1e0870;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.contact-item p {
    color: #666;
    line-height: 1.8;
}

.social-contact h3 {
    color: #1e0870;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.social-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
}

.social-btn.facebook { background: #1877f2; }
.social-btn.instagram { background: #e4405f; }
.social-btn.tiktok { background: #000000; }
.social-btn.youtube { background: #ff0000; }
.social-btn.linkedin { background: #0a66c2; }

.social-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.contact-form-wrapper {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.contact-form-wrapper h2 {
    color: #1e0870;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    font-weight: 900;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.map-section {
    padding: 4rem 5%;
    background: white;
    text-align: center;
}

.map-section h2 {
    color: #1e0870;
    font-size: 2.5rem;
    margin-bottom: 2rem;
    font-weight: 900;
}

.map-container {
    max-width: 1400px;
    margin: 0 auto 1rem auto;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.map-note {
    color: #666;
    font-size: 1.1rem;
    margin-top: 1rem;
}

/* === LEGAL PAGES STYLES === */
.legal-content {
    padding: 4rem 5%;
    background: #f5f5f5;
    min-height: 80vh;
}

.legal-container {
    max-width: 1000px;
    margin: 0 auto;
    background: white;
    padding: 4rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.legal-section {
    margin-bottom: 3rem;
}

.legal-section:last-child {
    margin-bottom: 0;
}

.legal-section h2 {
    color: #1e0870;
    font-size: 2rem;
    margin-bottom: 1.5rem;
    font-weight: 900;
    padding-bottom: 0.5rem;
    border-bottom: 3px solid #0082f5;
}

.legal-section h3 {
    color: #0082f5;
    font-size: 1.3rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.legal-section p {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.legal-section p strong {
    color: #1e0870;
    font-weight: 700;
}

.legal-section ul, .legal-section ol {
    margin-left: 2rem;
    margin-bottom: 1.5rem;
}

.legal-section li {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 0.8rem;
}

.legal-section li strong {
    color: #1e0870;
    font-weight: 700;
}

.legal-footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 2px solid #e0e0e0;
    text-align: center;
}

.legal-footer p {
    color: #999;
    font-size: 0.95rem;
    font-style: italic;
    margin-bottom: 0.5rem;
}

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

/* Tablet */
@media (max-width: 968px) {
    .hero-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .hero-text h1 {
        font-size: 3rem;
    }

    .hero-text .highlight {
        font-size: 3.5rem;
    }

    .card-container {
        grid-template-columns: 1fr !important;
    }

    .card-container.left-image .card-image,
    .card-container.left-image .card-content {
        order: unset;
    }

    .courses-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .gallery-grid {
        column-count: 2;
    }

    .page-hero h1 {
        font-size: 3rem;
    }

    .contact-container {
        grid-template-columns: 1fr;
    }

    .apply-page-container {
        grid-template-columns: 1fr;
    }

    .application-info {
        position: static;
    }

    .legal-container {
        padding: 3rem 2rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

@media screen and (max-width: 768px) {
    /* 1. Move menu to the LEFT */
    .nav-links {
        position: fixed;
        left: -100%; /* Start off-screen on the left */
        top: 0;
        height: 100vh;
        width: 80%; /* Width of the drawer */
        background-color: #1e0870; 
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Align text to the left */
        padding: 80px 40px;      /* Space for the logo/top */
        transition: 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        box-shadow: 5px 0 15px rgba(0,0,0,0.2);
        z-index: 1000;
    }

    /* 2. Toggle class for sliding in */
    .nav-links.active {
        left: 0;
    }

    .nav-links li {
        margin: 15px 0;
        list-style: none;
    }

    .nav-links li a {
        font-size: 1.2rem;
        color: #fff;
        text-decoration: none;
    }

    /* 3. Hamburger to "X" Animation */
    .hamburger {
        display: block;
        cursor: pointer;
        z-index: 1001; /* Must stay above the sliding menu */
        padding: 10px;
    }

    .hamburger span {
        display: block;
        width: 30px;
        height: 3px;
        background: #fff;
        margin: 5px 0;
        transition: 0.4s;
        border-radius: 4px;
    }

    /* The "X" Transformation */
    .hamburger.toggle span:nth-child(1) {
        transform: rotate(-45deg) translate(-5px, 6px);
    }
    .hamburger.toggle span:nth-child(2) {
        opacity: 0;
        transform: translateX(-20px);
    }
    .hamburger.toggle span:nth-child(3) {
        transform: rotate(45deg) translate(-5px, -6px);
    }
}
    

 

    .hero-text h1 {
        font-size: 2.5rem;
    }

    .hero-text .highlight {
        font-size: 3rem;
    }

    .hero-text p {
        font-size: 1.2rem;
    }

    .page-hero h1 {
        font-size: 2.5rem;
    }

    .page-hero p {
        font-size: 1.2rem;
    }
    
    .content {
        width:100px !important;
    }

    .filter-section {
        top: 80px;
    }

    .category-title {
        font-size: 2rem;
    }

    .courses-grid {
        grid-template-columns: 1fr;
    }

    .modal-content {
        width: 95%;
        max-height: 90vh;
    }

    .modal-title {
        font-size: 1.5rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .card-content {
        padding: 2rem;
    }

    .card-content h2 {
        font-size: 2rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .stat-number {
        font-size: 3rem;
    }

    .gallery-grid {
        column-count: 2;
    }

    .facilities-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .social-icons {
        right: 10px;
        gap: 10px;
    }

    .social-icons a {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    /* About Page Mobile */
    .about-section {
        grid-template-columns: 1fr;
        padding: 2rem;
    }

    .about-section.reverse {
        grid-template-columns: 1fr;
    }

    .about-section.reverse .about-text,
    .about-section.reverse .about-image {
        order: unset;
    }

    .about-text h2 {
        font-size: 2rem;
    }

    .values-section, .why-choose-section {
        padding: 2rem;
    }

    .values-section h2, .why-choose-section h2 {
        font-size: 2rem;
    }

    .cta-section {
        padding: 2rem;
    }

    .cta-section h2 {
        font-size: 2rem;
    }

    .cta-buttons {
        flex-direction: column;
    }

    /* Apply Page Mobile */
    .apply-page-container {
        grid-template-columns: 1fr;
    }

    .application-info {
        position: static;
    }

    .application-form-container {
        padding: 2rem;
    }

    /* Contact Page Mobile */
    .contact-container {
        grid-template-columns: 1fr;
    }

    .contact-info, .contact-form-wrapper {
        padding: 2rem;
    }

    .social-buttons {
        flex-direction: column;
    }

    .social-btn {
        width: 100%;
        justify-content: center;
    }

    /* Legal Pages Mobile */
    .legal-container {
        padding: 2rem 1.5rem;
    }

    .legal-section h2 {
        font-size: 1.6rem;
    }

    .legal-section ul, .legal-section ol {
        margin-left: 1rem;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        column-count: 1;
    }

    nav {
        padding: 1rem 3%;
    }

    .logo {
        font-size: 1.2rem;
    }

    .logo img {
        height: 60px;
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    .hero-text .highlight {
        font-size: 2.5rem;
    }

    .cta-btn {
        padding: 0.8rem 2rem;
        font-size: 1rem;
    }

    .page-hero {
        padding: 120px 5% 60px 5%;
    }

    .page-hero h1 {
        font-size: 2rem;
    }

    .page-hero p {
        font-size: 1rem;
    }

    .modal-body {
        padding: 1.5rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .legal-container {
        padding: 1.5rem 1rem;
    }

    .legal-section h2 {
        font-size: 1.4rem;
    }

    .legal-section p, .legal-section li {
        font-size: 0.95rem;
          font-weight: 900;
    }
}
  
/* === GALLERY SECTION === */

.gallery-grid {
    column-count: 3;
    column-gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
}

.gallery-grid img {
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem; /* For spacing between rows */
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    break-inside: avoid; /* Prevents images from breaking across columns */
}

.gallery-grid img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* === FACILITIES SECTION === */
.facilities-section {
    margin-top: 100px !important;
    padding: 5rem 5%;
    background: linear-gradient(135deg, #0082f5 0%, #1e0870 100%);
}

.facilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.facility-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.facility-card:hover {
    transform: translateY(-10px);
}

.facility-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.facility-card h3 {
    padding: 1.5rem;
    text-align: center;
    color: #1e0870;
    font-size: 1.5rem;
    font-weight: 700;
}

/* === CARD SECTION === */
.card-section {
    padding: 5rem 5%;
    background: #f5f5f5;
}

.card-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1400px;
    margin: 0 auto;
    gap: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    overflow: hidden;
    
}

.card-container.right-image {
    grid-template-columns: 1fr 1fr;
}

.card-container.left-image .card-image {
    order: 1;
}

.card-container.left-image .card-content {
    order: 2;
}

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

.card-content {
    padding: 4rem;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-content h2 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    font-weight: 900;
}

.card-content p {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.course-list {
    list-style: none;
    margin-bottom: 2rem;
}

.course-list li {
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 1.1rem;
}

.apply-btn {
    display: inline-block;
    background: white;
    color: #1e0870;
    padding: 1rem 3rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.apply-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3);
}

/* === FOOTER === */
.footer {
    background: #1e0870;
    color: white;
    padding: 4rem 5% 2rem 5%;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
    max-width: 1400px;
    margin: 0 auto 3rem auto;
}

.footer-section h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.footer-section ul {
    list-style: none;
}

.footer-section li {
    padding: 0.5rem 0;
    opacity: 0.9;
}

.footer-section a {
    color: white;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-section a:hover {
    opacity: 0.7;
}

.social-links li {
    font-size: 1.1rem;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* === SOCIAL MEDIA ICONS === */
.social-icons {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 999;
}

.social-icons a {
    width: 50px;
    height: 50px;
    background: #0082f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 130, 245, 0.4);
}

.social-icons a:hover {
    transform: scale(1.1);
    background: #1e0870;
}

/* === ABOUT PAGE STYLES === */
.about-content {
    padding: 4rem 5%;
    background: #f5f5f5;
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
}

.about-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 5rem;
    background: white;
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.about-section.reverse {
    grid-template-columns: 1fr 1fr;
}

.about-section.reverse .about-text {
    order: 1;
}

.about-section.reverse .about-image {
    order: 2;
}

.about-image img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 8px;
}

.about-text h2 {
    color: #1e0870;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    font-weight: 900;
}

.about-text p {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.values-section {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    margin-bottom: 3rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.values-section h2 {
    color: #1e0870;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;

}



/*Enquiry form*/
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #1e86c5 !important;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}



/*Student Registration Form Styling*/

/* Unique wrapper to isolate styles */
#lms-reg-wrapper {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px;
}

#lms-reg-container {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 450px;
    text-align: center;
}

#lms-reg-title {
    color: #2d3748;
    font-size: 1.8rem;
    margin-bottom: 8px;
    font-weight: 700;
}

#lms-reg-subtitle {
    color: #718096;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

.lms-reg-group {
    text-align: left;
    margin-bottom: 20px;
}

.lms-reg-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.lms-reg-group input, 
.lms-reg-group select {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.lms-reg-group input:focus, 
.lms-reg-group select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

#lms-reg-submit-btn {
    width: 100%;
    padding: 14px;
    background-color: #667eea;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
    margin-top: 10px;
}

#lms-reg-submit-btn:hover {
    background-color: #5a67d8;
    transform: translateY(-1px);
}

#lms-reg-submit-btn:active {
    transform: translateY(0);
}




/**Life at Adu dlamini*/


/*Testimonials*/
/* Container Styles */
.testimonial-container {
    max-width: 1100px;
    margin: 50px auto;
    padding: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.header {
    text-align: center;
    margin-bottom: 40px;
}

.header h2 {
    font-size: 2.5rem;
    color: #1a2a6c;
    margin-bottom: 10px;
}

/* Grid Layout */
.testimonial-grid {
    gap: 30px;
}

/* Video Card Styles */
.video-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.video-card:hover {
    transform: translateY(-5px);
}

.video-wrapper video {
    width: 100%;
    aspect-ratio: 13 / 16; /* TikTok/Reels style vertical video */
    object-fit: cover;
    display: block;
    background: #000;
}

/* Text Styles */
.student-details {
    padding: 20px;
}

.student-details h3 {
    margin: 0;
    font-size: 1.25rem;
    color: #333;
}

.major {
    color: #007bff;
    font-weight: bold;
    font-size: 0.9rem;
    margin: 5px 0;
}

.quote {
    font-style: italic;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.4;
}



/*News and Events*/
:root {
    --college-blue: #1a2a6c;
    --accent-gold: #f5af19;
    --text-gray: #444;
}

.event-wrapper {
    padding: 60px 20px;
    border-bottom: 1px solid #eee;
}

.event-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    align-items: center;
}

/* Media Gallery Styles */
.event-media {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.main-display video, .main-display img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.thumbnail-grid img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.thumbnail-grid img:hover {
    opacity: 0.7;
}

/* Info Styles */
.event-info {
    flex: 0.8;
}

.event-date {
    display: block;
    font-weight: bold;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.event-title {
    font-size: 2.2rem;
    color: var(--college-blue);
    margin-bottom: 15px;
}

.event-description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-gray);
    margin-bottom: 25px;
}

.btn-secondary {
    display: inline-block;
    padding: 12px 25px;
    border: 2px solid var(--college-blue);
    color: var(--college-blue);
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-secondary:hover {
    background: var(--college-blue);
    color: #fff;
}

/* Responsive for Mobile */
@media (max-width: 768px) {
    .event-container {
        flex-direction: column;
    }
}



/*Study Table*/
/* Unique container identifier */
.custom-card-table {
  border-collapse: separate;
  border-spacing: 12px; /* Adjust for more/less space between fields */
  width: 100%;
}

/* Targeting headers and cells specifically within this table */
.custom-card-table th, 
.custom-card-table td {
      
  padding: 18px;
  background-color: #fff;
  border: 1px solid #eee; /* Optional: light border for definition */
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.custom-card-table td a {
    text-decoration:none;
    color: #000 !important;
    text-transform: uppercase;
    font-weight:900;
    font-size:0.8rem;
    font-family: Arial;
}

/* Grow effect scoped to our unique table */
.custom-card-table th:hover, 
.custom-card-table td:hover {
  transform: translateY(-5px) scale(1.02); /* Moves up slightly and grows */
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
  z-index: 10;
  position: relative; /* Required for z-index to work effectively */
  background-color: #fcfcfc;
}

/* Unique header styling */
.custom-card-table th {
  color: #fff !important;    
  background: linear-gradient(135deg, #0082f5 0%, #1e0870 100%) !important;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1px;
}



/* Responsive Breakpoint - usually 768px for tablets/phones */
@media screen and (max-width: 768px) {
  
  /* Force the table to stop behaving like a table */
  .custom-card-table, 
  .custom-card-table thead, 
  .custom-card-table tbody, 
  .custom-card-table th, 
  .custom-card-table td, 
  .custom-card-table tr {
    display: block;
    width: 100%;
  }

  /* Hide the header row (it doesn't work well in card view) */
  .custom-card-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .custom-card-table tr {
    margin-bottom: 20px; /* Space between the "cards" */
  }

  .custom-card-table td {
    /* Make each cell look like a row inside the card */
    position: relative;
    padding-left: 50% !important; /* Make room for the label */
    text-align: right;
    border-bottom: 1px solid #eee;
    margin-bottom: 0;
    border-radius: 0; /* Flatten inner borders */
    box-shadow: none; /* Shadow goes on the row, not the cell */
  }

  .custom-card-table td:last-child {
    border-bottom: 0;
    border-radius: 0 0 10px 10px;
  }
  
  .custom-card-table td:first-child {
    border-radius: 10px 10px 0 0;
  }

  /* Create the labels (Project Name, Status, etc.) using Data Attributes */
  .custom-card-table td::before {
    content: attr(data-label); /* Pulls text from the HTML */
    position: absolute;
    left: 15px;
    width: 45%;
    text-align: left;
    font-weight: bold;
    color: #555;
  }
}



/*Mobile Study table*/
/* Mobile Optimization (Below 768px) */
@media screen and (max-width: 768px) {
  .custom-card-table {
    border: 0;
  }

  /* Hide the real header row */
  .custom-card-table thead {
    display: none;
  }

  .custom-card-table tr {
    display: block;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background: #fff;
  }

  .custom-card-table td {
    display: flex; /* Use flex instead of block */
    justify-content: space-between; /* Pushes Label to left, Data to right */
    align-items: center;
    text-align: right;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    position: relative;
    min-height: 45px;
    word-break: break-word; /* Prevents long text from breaking layout */
  }

  /* We remove the absolute positioning to let flexbox handle it */
  .custom-card-table td::before {
    content: attr(data-label);
    font-weight: bold;
    text-align: left;
    padding-right: 10px;
    color: #333;
    flex-shrink: 0; /* Keeps the label from squishing */
    width: 40%;    /* Gives the label a set area */
  }
  .custom-card-table td {
    color: #333 !important; 
    opacity: 1 !important;
    visibility: visible !important;
}
}



/*New banner Online Coming soon*/
/* Unique Namespace: gem-edu */
  #gem-edu-marketing-container {
    --gem-primary: #2563eb;
    --gem-dark: #1e293b;
    --gem-accent: #fbbf24;
    --gem-white: #ffffff;
    
    background: #f8fafc;
    padding: 80px 20px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    display: flex;
    justify-content: center;
  }

  .gem-edu-wrapper {
    max-width: 1100px;
    width: 100%;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 40px;
    align-items: center;
  }

  .gem-edu-badge {
    background: var(--gem-accent);
    color: var(--gem-dark);
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
  }

  .gem-edu-title {
    font-size: 2.8rem;
    color: var(--gem-dark);
    margin: 20px 0;
    line-height: 1.1;
  }

  .gem-edu-title span { color: linear-gradient(135deg, #0082f5 0%, #1e0870 100%); }

  .gem-edu-description {
    font-size: 1.1rem;
    color: #64748b;
    margin-bottom: 30px;
    line-height: 1.6;
  }

  .gem-edu-stats {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
  }

  .gem-edu-stat-item strong {
    display: block;
    font-size: 1.5rem;
    color: var(--gem-dark);
  }

  .gem-edu-cta {
    background-color: #1e86c5;
    color: white;
    border: none;
    padding: 16px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 2px;
    cursor: pointer;
    transition: transform 0.2s;
  }

  .gem-edu-cta:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3); }

  /* Interactive Card Styles */
  .gem-edu-interactive-card {
    perspective: 1000px;
    height: 350px;
  }

  .gem-edu-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    cursor: pointer;
  }

  .gem-edu-interactive-card:hover .gem-edu-card-inner { transform: rotateY(180deg); }

  .gem-edu-card-front, .gem-edu-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  }

  .gem-edu-card-front { background: linear-gradient(135deg, #0082f5 0%, #1e0870 100%); color: white; }
  .gem-edu-card-back { background-color: #1e86c5 !important; color: white; transform: rotateY(180deg); }

  .gem-edu-card-back ul { list-style: none; padding: 0; }
  .gem-edu-card-back li { margin: 10px 0; font-size: 1.1rem; }

  @media (max-width: 768px) {
    .gem-edu-wrapper { grid-template-columns: 1fr; text-align: center; }
    .gem-edu-stats { justify-content: center; }
  }