*{
 margin: 0px;
 box-sizing: border-box;
 padding: 0px;   
   font-family: "Roboto", sans-serif;
}

/* CSS Variables for Section Typography */
:root {
    /* Section Titles & Subtitles */
    --section-title-size: calc(2.4vw + 0.1rem);
    --section-subtitle-size: calc(0.85vw + 0.1rem);
    --section-title-size-mobile: 32px;
    --section-subtitle-size-mobile: 14px;
    
    /* Headings */
    --heading-h1: calc(2.8vw + 0.2rem);
    --heading-h2: calc(2.2vw + 0.1rem);
    --heading-h3: calc(1.6vw + 0.1rem);
    --heading-h4: calc(1.2vw + 0.1rem);
    --heading-h5: calc(1vw + 0.1rem);
    --heading-h6: calc(0.9vw + 0.1rem);
    --step-number-size: calc(5vw + 0.1rem);
    --heading-h1-small: calc(1.85vw + 0.1rem);
    /* Body Text */
    --body-text-large: calc(0.9vw + 0.1rem);
    --body-text-regular: calc(0.91vw + 0.05rem);
    --body-text-small: calc(0.7vw + 0.05rem);
    
    /* Navigation */
    --nav-text-size: calc(0.8vw + 0.05rem);
    --nav-text-size-mobile: 14px;
    
    /* Buttons */
    --button-text-size: calc(0.8vw + 0.05rem);
    --button-text-size-mobile: 15px;
    
    /* Cards & Features */
    --card-title-size: calc(1.2vw + 0.1rem);
    --card-text-size: calc(0.8vw + 0.05rem);
    
    /* Forms */
    --form-label-size: calc(0.75vw + 0.05rem);
    --form-input-size: calc(0.8vw + 0.05rem);
    
    /* Footer */
    --footer-heading-size: calc(1vw + 0.1rem);
    --footer-text-size: calc(0.75vw + 0.05rem);
    
    /* Mobile Overrides */
    --heading-h1-mobile: 28px;
    --heading-h2-mobile: 24px;
    --heading-h3-mobile: 20px;
    --body-text-mobile: 14px;
    --card-title-mobile: 18px;
    
    /* ===== SPACING - COMPONENT PADDING ===== */
    /* Hero Banner */
    --hero-banner-padding-y: calc(5vw + 2rem);
    --hero-banner-padding-y-mobile: 50px;
    
    /* Apply Box */
    --apply-box-padding: calc(2vw + 0.1rem);
    --apply-box-padding-mobile: 30px 20px;
    
    /* Section Padding */
    --section-padding-y: calc(4vw + 1.5rem);
    --section-padding-y-mobile: 50px;
    
    /* Navigation */
    --nav-menu-item-padding: calc(0.5vw + 0.5rem) calc(0.8vw + 0.5rem);
    --nav-menu-item-padding-tablet: 12px 15px;
    --nav-menu-item-padding-mobile: 18px 25px;
    
    /* Overview Section */
    --overview-section-padding: calc(4vw + 1.5rem) 0;
    --overview-section-padding-mobile: 50px 0;
    
    /* Feature Box */
    --feature-box-padding: 0;
    --feature-box-padding-mobile: 25px 20px;
    
    /* Attend Box */
    --attend-box-padding: calc(0.5vw + 0.5rem) 6%;
    --attend-box-padding-mobile: 30px 40px;
    
    /* Pedagogy Item */
    --pedagogy-item-padding: calc(0.6vw + 0.5rem) calc(1vw + 0.8rem);
    --pedagogy-item-padding-mobile: 15px 20px;
    
    /* Curriculum Item */
    --curriculum-item-padding: calc(1.7vw + 0.1rem);
    --curriculum-item-padding-mobile: 20px;
    
    /* Objective Card */
    --objective-card-padding: calc(1.5vw + 1rem) calc(1vw + 1rem);
    --objective-card-padding-mobile: 30px 20px;
    
    /* Testimonial Slide */
    --testimonial-slide-padding: calc(2vw + 1.5rem);
    --testimonial-slide-padding-mobile: 30px 20px;
    --testimonial-text-padding: 0 20px;
    
    /* Assessment Card */
    --assessment-table-cell-padding: calc(0.5vw + 0.5rem) calc(0.8vw + 0.5rem);
    --assessment-table-cell-padding-mobile: 10px 12px;
    
    /* Organizations Slider */
    --org-logo-box-padding-tablet: 25px;
    --org-logo-box-padding-mobile: 20px;
    
    /* About Section */
    --about-content-padding: calc(1.5vw + 1rem);
    --about-content-padding-mobile: 25px 20px;
    
    /* Fee Section */
    --fee-box-padding: calc(1vw + 0.5rem) calc(1vw + 1rem);
    --fee-box-padding-mobile: 18px 20px;
    --fee-info-box-padding: calc(1.2vw + 1rem);
    --fee-info-box-padding-mobile: 20px;
    --fee-points-item-padding: calc(0.4vw + 0.4rem) 0 calc(0.4vw + 0.4rem) calc(1vw + 0.8rem);
    
    /* Footer */
    --footer-top-padding: calc(2vw + 2rem) 0 calc(1.5vw + 1.5rem);
    --footer-top-padding-mobile: 40px 0 30px;
    --footer-bottom-padding: calc(0.8vw + 0.8rem) 0;
    --footer-logo-padding: calc(0.5vw + 0.5rem);
    
    /* Modal */
    --modal-header-padding: calc(1vw + 1rem) calc(1.5vw + 1rem);
    --modal-header-padding-mobile: 25px 25px;
    --modal-body-padding: calc(1.5vw + 1rem) calc(2vw + 1rem);
    --modal-body-padding-mobile: 25px;
    --modal-subtitle-padding: 0 calc(1.5vw + 1rem) calc(0.8vw + 0.5rem);
    --modal-subtitle-padding-mobile: 0 30px 15px;
    
    /* Registration Modal */
    --registration-modal-header-padding: calc(1vw + 1rem) calc(1.5vw + 1rem);
    --registration-modal-body-padding: calc(1.2vw + 1rem) calc(1.5vw + 1rem) calc(1.5vw + 1rem) calc(1.5vw + 1rem);
    --registration-modal-body-padding-mobile: 30px 25px;
    
    /* Form Elements */
    --form-input-padding: calc(0.5vw + 0.5rem) calc(0.8vw + 0.5rem);
    --form-button-padding: calc(0.5vw + 0.5rem) calc(1.2vw + 1rem);
    
    /* Certificate Note */
    --certificate-note-padding: calc(1vw + 1rem);
    --certificate-note-padding-mobile: 20px;
    
    /* Button Padding */
    --btn-registration-padding: calc(0.5vw + 0.4rem) calc(0.8vw + 0.5rem);
    --btn-brochure-padding: calc(0.5vw + 0.4rem) calc(0.8vw + 0.5rem);
    --btn-read-more-padding: calc(0.5vw + 0.5rem) calc(1.5vw + 1rem);
    --btn-read-more-padding-mobile: 10px 25px;
    
    /* Facility Section */
    --facility-content-padding: calc(1.2vw + 0.1rem);
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

.main-wrapper {
    overflow-x: hidden;
    width: 100%;
}

/* Top Header with Logos */
.top-header {
    background: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
    position: relative;
    z-index: 1000;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo-left img,
.header-logo-right img {
    height: 60px;
    width: auto;
    object-fit: contain;
}
.header-logo-right img{
      height: 80px;
}
/* Responsive Header */
@media (max-width: 768px) {
    .top-header {
        padding: 10px 0;
    }
    
    .header-container {
        padding: 0 20px;
    }
    
    .header-logo-left img,
    .header-logo-right img {
        height: 40px;
    }
}

@media (max-width: 480px) {
    .header-logo-left img,
    .header-logo-right img {
        height: 35px;
    }
    
    .header-container {
        padding: 0 15px;
    }
}

img{
    max-width: 100%;
}
/* Hero Banner Redesign */
.hero-banner {
    background-image: linear-gradient(135deg, rgba(0, 51, 102, 0.95) 0%, rgba(0, 0, 0, 0.7) 100%), url("../images/banner.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */
    position: relative;
}

.hero-banner .container {
    width: 90%;
 
    margin: 0 auto;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: var(--hero-banner-padding-y) 0;
}

.hero-banner .inner-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 60px;
}

.hero-banner .heading-container {
    width: 55%;
    color: #fff;
}

.hero-banner .heading-container h1 {
    color: #ffffff;
 
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: 0.9;
    display: block;
}
.hero-banner h1{
    font-size: var(--heading-h1-small);
}
.hero-banner .big-text {
    display: block;
    font-size: var(--heading-h1);
    font-weight: 300;
    line-height: 1.1;
    margin-top: 15px;
    font-family: 'Roboto', sans-serif;
}

.hero-banner .big-text b {
    font-weight: 900;
    color: #00bfa5; /* Teal accent instead of red for a tech/future look */
    text-shadow: 0 0 20px rgba(0, 191, 165, 0.3);
}

.hero-banner .sub-heading-container {
    margin-top: 30px;
    border-left: 5px solid #00bfa5;
    padding-left: 20px;
}

.hero-banner .sub-heading-container h2 {
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 1px;
    line-height: 1.5;
    font-weight: 400;
    font-size: var(--heading-h3);
    max-width: 90%;
}

.hero-banner .sub-heading-container img {
    display: none;
}

.banner-logos {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
}

.banner-logos img {
    height: 90px; /* Consitent height */
    width: auto;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.9); /* Slight background if logos are transparent/dark */
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.banner-logos img:hover {
    transform: translateY(-5px);
}


/* Particles */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1; /* Behind content but above background */
    pointer-events: none; /* Allow clicking through */
}

.hero-banner .container {
    position: relative;
    z-index: 2; /* Ensure content is above particles */
}

/* Apply Box Styles - Professional Redesign */
/* Apply Box Styles - Professional Redesign */
.apply-box {
    width: 45%; /* Slightly wider for better spacing */
    background: rgba(255, 255, 255, 0.1); /* Darker/Subtle Glass */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.4); /* Highlight top border */
    border-radius: 12px; /* Clean, modern radius */
    padding: var(--apply-box-padding);
    margin-top: 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.apply-box-inner-container {
    display: flex;
    flex-direction: column; /* Stacked layout for dashboard feel */
    gap: 25px;
}

.col1, .col2 {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically center items */
    border: none;
    padding: 0;
    width: 100%;
}

.col1 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 25px;
    gap: 20px; /* Add gap between text and buttons */
}


/* Apply Deadline Section */
.apply-deadline {
    margin-bottom: 0;
    text-align: left;
    flex-shrink: 0; /* Prevent text from wrapping/shrinking */
}

.apply-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: block;
}

.apply-date {
    font-size: 30px;
    color: #fff;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    background: none;
    -webkit-text-fill-color: initial;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.batch-info {
    font-size: 13px;
    color: #00bfa5;
    font-weight: 600;
    margin-top: 8px;
    background: rgba(0, 191, 165, 0.1);
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid rgba(0, 191, 165, 0.2);
}

/* Apply Buttons - Professional Actions */
.apply-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons vertically for better layout */
    gap: 12px;
    min-width: 200px; /* Ensure minimum width for buttons */
}

.apply-buttons .btn {
    text-decoration: none;
    width: 100%; /* Full width within container */
    white-space: nowrap;
    font-size: 14px;
    padding: 12px 20px;
    border-radius: 6px; /* Sqaured off slightly */
    justify-content: center;
}

.btn-registration {
    text-decoration: none;
    background: #00bfa5; /* Primary Action */
    color: #000;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 191, 165, 0.3);
}

.btn-registration:hover {
    background: #00a890;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 191, 165, 0.4);
}

.btn-brochure {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px);
}
.btn-brochure i,.btn-registration i{
    margin-right: 10px;
}

.btn-brochure:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    transform: translateY(-2px);
}

/* Duration Info - Dashboard Style */
.col2 {
    display: flex;
    justify-content: space-between; /* Spread out duration and schedule */
    gap: 20px;
    align-items: flex-start; /* Align top */
}

.duration-info {
    text-align: left;
    margin-bottom: 0;
}

.duration-title {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.duration-value {
    font-size: 24px;
    color: #fff;
    font-weight: 700;
    margin: 0;
}

.duration-unit {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    display: inline-block;
    margin-left: 5px;
}

/* Schedule Info */
.schedule-info {
    flex-direction: row;
    display: flex;
   
    gap: 30px;
}

.schedule-item {
    display: flex;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--body-text-regular);
}

.schedule-item i {
    font-size: var(--card-title-size);
    color: #00bfa5;
    min-width: auto;
}

.schedule-item span {
    line-height: 1.4;
    display: block;
}

/* Responsive */
@media (max-width: 768px) {
    .apply-box-inner-container {
        flex-direction: column;
        gap: 30px;
    }
    
    .apply-date {
        font-size: 36px;
    }
    
    .duration-value {
        font-size: 56px;
    }
}


/* Main Navigation */
.main-navigation {
    background: #000;
    padding: 0;
    position: relative;
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

.main-navigation.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

.main-navigation .container {
    max-width: 100%;
    padding: 0;
}

.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.nav-menu li {
    margin: 0;
}

.nav-menu a {
    display: block;
    padding: var(--nav-menu-item-padding);
    color: #fff;
    text-decoration: none;
    font-size: var(--nav-text-size);
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-menu a:hover {
    background: #1a1a1a;
    color: #00bfa5;
}

/* Mobile Navigation Logo */
.nav-logo-mobile {
    display: none;
}

.nav-logo-mobile img {
    height: 40px;
    width: auto;
    background: #fff;
    padding: 8px 12px;
    border-radius: 6px;
}

/* Hamburger Menu Button */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1000;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.hamburger-menu span {
    width: 100%;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

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

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

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

/* Responsive Navigation */
@media (max-width: 1200px) {
    .nav-menu a {
        padding: var(--nav-menu-item-padding-tablet);
        font-size: var(--nav-text-size);
    }
}

@media (max-width: 992px) {
    .nav-logo-mobile {
        display: block;
    }
    
    .hamburger-menu {
        display: flex;
    }
    
    .main-navigation .container {
        position: relative;
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: #000;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 80px 0 20px;
        transition: right 0.3s ease;
        overflow-y: auto;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    .nav-menu li {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .nav-menu a {
        padding: var(--nav-menu-item-padding-mobile);
        font-size: var(--nav-text-size-mobile);
        white-space: normal;
        display: block;
    }
    
    .nav-menu a:hover {
        background: #1a1a1a;
        color: #00bfa5;
        padding-left: 30px;
    }
}

@media (max-width: 768px) {
    .nav-menu {
        width: 250px;
    }
    
    .nav-menu a {
        padding: 16px 20px;
        font-size: var(--nav-text-size-mobile);
    }
}

.container{
    width: 87%;
    margin: 0px auto;
}

/* Overview Section */
.overview-section {
    padding: var(--overview-section-padding);
    background: #f8f9fa;
}

.overview-content {
    display: flex;
    gap: 60px;
    align-items: center;
}

.overview-image {
    flex: 0 0 45%;
    max-width: 45%;
}

.overview-image img {
    width: 100%;
    height: auto;
    display: block;
}

.overview-text {
    flex: 1;
}

.section-icon {
    font-size: 34px; /* Reduced from 36px/30px for better balance */
    margin-bottom: 20px; /* Increased from 15px for better spacing */
    display: block;
margin-right: 10px;
    text-align: center;
    /* Color will be defined by specific sections */
    color: #333; /* Fallback */
}

/* Match Icon Colors to Headings */
/* Overview - Teal/Default */
.overview-text .section-icon { 
    color: #00bfa5; 
    text-align: left;
}

/* Program Objectives - Center generic? Check h2 style */
.section-header:has(.section-title-center) .section-icon { color: #003366; } /* Assuming Navy */

/* Highlight - Dark */
.section-header:has(.section-title-dark) .section-icon { color: #333; }

/* Who Should Attend - Blue */
.section-header:has(.section-title-blue) .section-icon { color: #0056b3; } /* Adjust to match actual blue class */

/* Pedagogy */
.section-header:has(.section-title-pedagogy) .section-icon { color: #d32f2f; } /* Example color, will check file */

/* Journey */
.section-header:has(.section-title-journey) .section-icon { color: #f57c00; }

/* Curriculum */
.section-header:has(.section-title-curriculum) .section-icon { color: #1976d2; }

/* Faculty */
.section-header:has(.section-title-faculty) .section-icon { color: #388e3c; }

/* Assessment */
.section-header:has(.section-title-assessment) .section-icon { color: #7b1fa2; }

/* Certification */
.section-header:has(.section-title-certification) .section-icon { color: #c2185b; }

/* Organizations */
.section-header:has(.section-title-organizations) .section-icon { color: #0288d1; }

/* Learners */
.section-header:has(.section-title-learners) .section-icon { color: #e64a19; }

/* About */
.section-header:has(.section-title-about) .section-icon { color: #455a64; }

/* Fee */
.fee-left .section-icon { 
    color: #00bfa5;
    text-align: left;
}

.overview-text p {
    font-size: var(--body-text-regular);
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
    text-align: justify;
}

.overview-text h2 {
    font-size: var(--section-title-size);
    color: #003366;
    margin-bottom: 25px;
    font-weight: bold;
}

.overview-text p {
    font-size: var(--body-text-regular);
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
    text-align: justify;
}

.overview-text strong {
    color: #003366;
    font-weight: 600;
}

.overview-text sup {
    font-size: 0.7em;
    vertical-align: super;
}

/* Responsive Overview Section */
@media (max-width: 992px) {
    .overview-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .overview-image {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .overview-text h2 {
        font-size: var(--section-title-size-mobile);
    }
}

@media (max-width: 768px) {
    .overview-section {
        padding: var(--overview-section-padding-mobile);
    }
    
    .overview-text h2 {
        font-size: var(--section-title-size-mobile);
    }
    
    .overview-text p {
        font-size: var(--body-text-mobile);
        text-align: left;
    }
}


/* Programme Highlights Section */
.highlights-section {
    padding: 80px 0;
    background: #ffffff;
    position: relative;
}

.section-title-center {
    text-align: center;
    font-size: var(--section-title-size);
    margin-bottom: 60px;
    color: #003366;
    font-weight: bold;
    letter-spacing: 2px;
}

.highlights-list {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


/* Responsive Highlights */
@media (max-width: 768px) {
    .highlights-section {
        padding: 50px 0;
    }
    
    .section-title-center {
        font-size: var(--section-title-size-mobile);
        margin-bottom: 40px;
    }
    
    .highlight-item {
        padding: 15px 25px;
        border-radius: 40px;
    }
    
    .highlight-number {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
    
    .highlight-text {
        font-size: 16px;
    }
    
    .highlight-item:hover {
        transform: translateX(5px);
    }
}


/* Programme Highlight Features Section */
.programme-features-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.section-title-dark {
    text-align: center;
    font-size: var(--section-title-size);
    margin-bottom: 60px;
    color: #333;
    font-weight: bold;
    letter-spacing: 2px;
}

.features-grid-highlight {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

    margin: 0 auto;
}

.feature-box {
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    min-height: 200px;
}

.feature-box:hover {
    transform: translateY(-10px);
    
}

.feature-icon-box {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.feature-icon-box i {
    font-size: var(--heading-h2);
    color: #fff;
}

.feature-box h3 {
    font-size: var(--card-title-size);
    color: #2c3e50;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

/* Responsive Programme Features */
@media (max-width: 1200px) {
    .features-grid-highlight {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .features-grid-highlight {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .section-title-dark {
        font-size: var(--section-title-size-mobile);
    }
}

@media (max-width: 768px) {
    .programme-features-section {
        padding: 50px 0;
    }
    
    .features-grid-highlight {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .section-title-dark {
        font-size: var(--section-title-size-mobile);
        margin-bottom: 40px;
    }
    
    .feature-box {
        min-height: auto;
        padding: var(--feature-box-padding-mobile);
    }
    
    .feature-icon-box {
        width: 70px;
        height: 70px;
    }
    
    .feature-icon-box i {
        font-size: var(--heading-h2);
    }
}


/* Who Should Attend Section */
.who-attend-section {
    padding: 80px 0;
    background: #fff;
}

.section-title-blue {
    text-align: center;
    font-size: var(--section-title-size);
    margin-bottom: 60px;
    color: #0056b3;
    font-weight: bold;
    letter-spacing: 2px;
}

.attend-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:70px;
    column-gap:120px; 
    width: 80%;
    margin: 0 auto;
}
.outer-attend-box{
    position: relative;
}

.attend-box {
    background: #fff;
    overflow: hidden;
    padding: var(--attend-box-padding);
    border-radius: 50px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    position: relative;
    border: 0px solid;
    transition: all 0.3s ease;
}

.outer-attend-box::before
 {
    top: -41%;
    content: '';
    position: absolute;
    left: -14%;
    height: 147px;
    width: 100%;
    background-repeat: no-repeat;
    background-image: url(../images/polymar.png);
    background-size: contain;
}
.outer-attend-box.attend-green::before
 {
    
    background-image: url(../images/polymar-green.png);
    ;
}
.outer-attend-box.attend-orange::before
 {
    
    background-image: url(../images/polymar-orange.png);
    ;
}
.outer-attend-box.attend-light-blue::before
 {
    
    background-image: url(../images/polymar-blue.png);
    ;
}

.attend-box::after {
    content: '';
    position: absolute;
    bottom: 11px;
    transform: rotate(273deg);
    right: -9px;
    width: 82px;
    height: 51px;
    border-radius: 0 0 50px 50px;
    border: 7px solid;
    border-top: none;
    background: #fff;
}
.attend-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

.attend-box h3 {
    font-size: calc(1vw + 0.1rem);
    font-weight: 600;
    margin: 0;
    position: relative;
    z-index: 1;
    line-height: 1.5;
}

/* Color Variations for Attend Boxes */
.attend-blue {
    border-color: #2563eb;
}

.attend-blue::before,
.attend-blue::after {
    border-color: #2563eb;
}

.attend-blue h3 {
    color: #2563eb;
}

.attend-yellow {
    border-color: #f59e0b;
}

.attend-yellow::before,
.attend-yellow::after {
    border-color: #f59e0b;
}

.attend-yellow h3 {
    color: #f59e0b;
}

.attend-teal {
    border-color: #14b8a6;
}

.attend-teal::before,
.attend-teal::after {
    border-color: #14b8a6;
}

.attend-teal h3 {
    color: #14b8a6;
}

.attend-light-blue {
    border-color: #3b82f6;
}

.attend-light-blue::before,
.attend-light-blue::after {
    border-color: #3b82f6;
}

.attend-light-blue h3 {
    color: #3b82f6;
}

/* Responsive Who Should Attend */
@media (max-width: 992px) {
    .attend-grid {
        gap: 30px;
    }
    
    .section-title-blue {
        font-size: var(--section-title-size-mobile);
    }
    
    .attend-box h3 {
        font-size: var(--card-title-mobile);
    }
}

@media (max-width: 768px) {
    .who-attend-section {
        padding: 50px 0;
    }
    
    .attend-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .section-title-blue {
        font-size: var(--section-title-size-mobile);
        margin-bottom: 40px;
    }
    
    .attend-box {
        padding: var(--attend-box-padding-mobile);
    }
    
    .attend-box h3 {
        font-size: var(--card-title-mobile);
    }
}


/* Pedagogy Section */
.pedagogy-section {
    padding: 80px 0;
    background-image: url("../images/tech-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

.section-title-pedagogy {
    text-align: center;
    font-size: var(--section-title-size);
    margin-bottom: 60px;
    color: #ffffff!important;
    font-weight: bold;
    letter-spacing: 2px;
}

.pedagogy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.pedagogy-item {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgb(255, 255, 255);
    padding: var(--pedagogy-item-padding);
    border-radius: 80px;
    transition: all 0.3s ease;
}

.pedagogy-item:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateX(10px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.pedagogy-checkbox {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
}

.pedagogy-checkbox img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pedagogy-item h3 {
    font-size: var(--card-title-size);
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

/* Responsive Pedagogy */
@media (max-width: 992px) {
    .pedagogy-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .section-title-pedagogy {
        font-size: var(--section-title-size-mobile);
    }
}

@media (max-width: 768px) {
    .pedagogy-section {
        padding: 50px 0;
    }
    
    .pedagogy-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .section-title-pedagogy {
        font-size: var(--section-title-size-mobile);
        margin-bottom: 40px;
    }
    
    .pedagogy-item {
        padding: var(--pedagogy-item-padding-mobile);
    }
    
    .pedagogy-checkbox {
        width: 24px;
        height: 24px;
    }
    
    .pedagogy-item h3 {
        font-size: var(--body-text-regular);
    }
}


/* Learning Journey Section */
.learning-journey-section {
    padding: 80px 0;
    background: #fff;
}

.section-title-journey {
    text-align: center;
    font-size: var(--section-title-size);
    margin-bottom: 60px;
    color: #003366;
    font-weight: bold;
    letter-spacing: 2px;
}

.journey-image-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.journey-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

/* Responsive Learning Journey */
@media (max-width: 992px) {
    .section-title-journey {
        font-size: var(--section-title-size-mobile);
    }
}

@media (max-width: 768px) {
    .learning-journey-section {
        padding: 50px 0;
    }
    
    .section-title-journey {
        font-size: var(--section-title-size-mobile);
        margin-bottom: 40px;
    }
    
    .journey-image-container {
        padding: 0 10px;
    }
}


/* Programme Curriculum Section */
.curriculum-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.section-title-curriculum {
    text-align: center;
    font-size: var(--section-title-size);
    margin-bottom: 60px;
    color: #003366;
    font-weight: bold;
    letter-spacing: 2px;
}

.curriculum-list {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.curriculum-item {
    background: #fff;
    border-radius: 90px;
    padding: var(--curriculum-item-padding);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.curriculum-item:hover {
    transform: translateX(10px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.curriculum-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0;
    border-bottom: none;
    cursor: pointer;
    user-select: none;
}

.curriculum-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex: 1;
}

.curriculum-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    flex-shrink: 0;
}

.curriculum-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.accordion-icon {
    width: 30px;
    height: 30px;
    background:#FF6361;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.curriculum-item.active .accordion-icon {
    transform: rotate(45deg);
}

.curriculum-header h3 {
    font-size: var(--heading-h4);
    color: #1e3a8a;
    font-weight: 700;
    margin: 0;
    flex: 1;
}

.curriculum-hours {
    background: #1e3a8a;
    color: #fff;
    padding: 8px 20px;
    border-radius: 20px;
    font-size: var(--body-text-regular);
    font-weight: 600;
    white-space: nowrap;
}

.curriculum-content {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.curriculum-item.active .curriculum-content {
    max-height: 1000px;
    padding-top: 20px;
    margin-top: 15px;
    border-top: 2px solid #e5e7eb;
}

.curriculum-content li {
    padding: 8px 0 8px 25px;
    position: relative;
    color: #4b5563;
    line-height: 1.6;
}

.curriculum-content li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: #667eea;
    font-weight: bold;
}

/* Responsive Curriculum */
@media (max-width: 992px) {
    .section-title-curriculum {
        font-size: var(--section-title-size-mobile);
    }
    
    .curriculum-header h3 {
        font-size: var(--card-title-mobile);
    }
}

@media (max-width: 768px) {
    .curriculum-section {
        padding: 50px 0;
    }
    
    .section-title-curriculum {
        font-size: var(--section-title-size-mobile);
        margin-bottom: 40px;
    }
    
    .curriculum-item {
        padding: var(--curriculum-item-padding-mobile);
    }
    
    .curriculum-header {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
    
    .curriculum-right {
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
    }
    
    .curriculum-header h3 {
        font-size: var(--card-title-mobile);
    }
    
    .curriculum-hours {
        margin-left: 0;
    }
    
    .curriculum-content li {
        font-size: var(--body-text-mobile);
    }
}


/* Assessment Section */
.assessment-section {
    padding: 80px 0;
    background: #fff;
}

.section-title-assessment {
    text-align: center;
    font-size: var(--section-title-size);
    margin-bottom: 60px;
    color: #7b1fa2;
    font-weight: bold;
    letter-spacing: 2px;
}

.assessment-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 40px;
}

.assessment-card {
 
    border-radius: 15px;

    display: flex;
    flex-direction: column;
}

.assessment-subtitle {
    font-size: var(--heading-h3);
    color: #1e3a8a;
    font-weight: bold;
    margin-bottom: 25px;
    text-align: center;
}

.table-responsive {
    overflow-x: auto;
}

.assessment-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.assessment-table thead {
    background: #FF6361;
    color: #fff;
}

.assessment-table th {
    padding: var(--assessment-table-cell-padding);
    text-align: left;
    font-weight: 600;
    font-size: var(--body-text-regular);
}

.assessment-table td {
    padding: var(--assessment-table-cell-padding);
    border-bottom: 1px solid #e5e7eb;
    color: #4b5563;
}

.assessment-table tbody tr:hover {
    background: #f3f4f6;
}

.assessment-table tbody tr:last-child td {
    border-bottom: none;
}

.weight-cell {
    text-align: center;
    font-weight: 600;
    color: #667eea;
    font-size: var(--card-title-size);
}

.total-row {
    background: #e0e7ff !important;
}

.total-row td {
    font-size: var(--card-title-size);
    color: #1e3a8a;
}

/* Certification Table Specific Styles */
.certification-table th {
    text-align: center;
}

.certification-table td {
    text-align: center;
}

.certificate-cell {
    font-weight: 600;
    padding: var(--assessment-table-cell-padding);
    border-radius: 5px;
    font-size: var(--body-text-regular);
}

.certificate-cell.success {
    background: #d1fae5;
    color: #065f46;
}

.certificate-cell.completed {
    background: #dbeafe;
    color: #1e40af;
}

.certificate-cell.participated {
    background: #fef3c7;
    color: #92400e;
}

.certificate-cell.no-cert {
    background: #fee2e2;
    color: #991b1b;
}

/* Certificate Note */
.certificate-note {
    background:#003366;
    color: #fff;
    padding: var(--certificate-note-padding);
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.certificate-note p {
    font-size: var(--body-text-regular);
    line-height: 1.8;
    margin: 0;
}

.certificate-note strong {
    font-weight: 700;
}

/* Responsive Assessment */
@media (max-width: 992px) {
    .section-title-assessment {
        font-size: var(--section-title-size-mobile);
    }
    
    .assessment-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .assessment-card {
        padding: 30px 20px;
    }
    
    .assessment-subtitle {
        font-size: var(--heading-h4);
    }
}

@media (max-width: 768px) {
    .assessment-section {
        padding: 50px 0;
    }
    
    .section-title-assessment {
        font-size: var(--section-title-size-mobile);
        margin-bottom: 40px;
    }
    
    .assessment-grid {
        gap: 20px;
    }
    
    .assessment-card {
        padding: 20px 15px;
    }
    
    .assessment-subtitle {
        font-size: var(--card-title-mobile);
    }
    
    .assessment-table th,
    .assessment-table td {
        padding: var(--assessment-table-cell-padding-mobile);
        font-size: var(--body-text-mobile);
    }
    
    .weight-cell {
        font-size: var(--body-text-regular);
    }
    
    .certificate-note {
        padding: var(--certificate-note-padding-mobile);
    }
    
    .certificate-note p {
        font-size: var(--body-text-mobile);
    }
}


/* Participating Organizations Section */
.organizations-section {
    padding: 80px 0;
background-image: url("../images/bg3.png");
background-repeat: no-repeat;
background-size: cover;
}

.section-title-organizations {
    text-align: center;
    font-size: var(--section-title-size);
    margin-bottom: 60px;
    color: #0288d1;
    font-weight: bold;
    letter-spacing: 2px;
}

.organizations-slider {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
}

.org-slide {
    padding: 10px;
}

.org-logo-box {
   gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.org-logo-box:hover {
    background: #f9fafb;
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.org-logo-box img {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Slick Slider Custom Styles */
.organizations-slider .slick-prev,
.organizations-slider .slick-next {
    width: 40px;
    height: 40px;
    background: #1e3a8a;
    border-radius: 50%;
    z-index: 1;
}

.organizations-slider .slick-prev:hover,
.organizations-slider .slick-next:hover {
    background: #2563eb;
}

.organizations-slider .slick-prev {
    left: 0;
}

.organizations-slider .slick-next {
    right: 0;
}

.organizations-slider .slick-prev:before,
.organizations-slider .slick-next:before {
    font-size: var(--heading-h4);
    opacity: 1;
}

.organizations-slider .slick-dots {
    bottom: -50px;
}

.organizations-slider .slick-dots li button:before {
    font-size: var(--body-text-small);
    color: #1e3a8a;
    opacity: 0.3;
}

.organizations-slider .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #1e3a8a;
}

/* Responsive Organizations */
@media (max-width: 992px) {
    .section-title-organizations {
        font-size: var(--section-title-size-mobile);
    }
    
    .organizations-slider {
        padding: 0 40px;
    }
    
    .org-logo-box {
        padding: var(--org-logo-box-padding-tablet);
        min-height: 100px;
    }
}

@media (max-width: 768px) {
    .organizations-section {
        padding: 50px 0 80px;
    }
    
    .section-title-organizations {
        font-size: var(--section-title-size-mobile);
        margin-bottom: 40px;
    }
    
    .organizations-slider {
        padding: 0 30px;
    }
    
    .org-logo-box {
        padding: var(--org-logo-box-padding-mobile);
        min-height: 90px;
    }
    
    .org-logo-box img {
        max-height: 60px;
    }
    
    .organizations-slider .slick-prev,
    .organizations-slider .slick-next {
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 480px) {
    .organizations-slider {
        padding: 0 20px;
    }
}


/* Learners Speak Section */
.learners-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #3b4a8c 0%, #2d3561 100%);
    color: #fff;
}

.section-title-learners {
    text-align: center;
    font-size: var(--section-title-size);
    margin-bottom: 60px;
    color: #ffffff!important;
    font-weight: bold;
    letter-spacing: 2px;
}

.learners-slider {
    margin: 0 auto;
    padding: 0 50px;
}

.testimonial-slide {
    padding: 20px;
}

.testimonial-content {
    display: flex;
    gap: 30px;
    flex-direction: column;
    margin-bottom: 30px;
}

.testimonial-avatar {
    flex-shrink: 0;
}

.testimonial-avatar img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #fff;
    object-fit: cover;
}

.testimonial-text {
    flex: 1;
}

.testimonial-text p {
    font-size: var(--body-text-regular);
    line-height: 1.8;
    color: #ffffff;
    margin: 0;
}

.testimonial-author {
    text-align: center;
}

.testimonial-author h4 {
    font-size: var(--heading-h4);
    font-weight: bold;
    color: #fff;
    margin: 0 0 5px 0;
}

.testimonial-author p {
    font-size: var(--body-text-regular);
    color: rgba(255, 255, 255, 0.9);
    margin: 3px 0;
}

.author-designation {
    font-size: var(--body-text-small) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Slick Slider Custom Styles for Learners */
.learners-slider .slick-prev,
.learners-slider .slick-next {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    z-index: 1;
}

.learners-slider .slick-prev:hover,
.learners-slider .slick-next:hover {
    background: rgba(255, 255, 255, 0.4);
}

.learners-slider .slick-prev {
    left: 0;
}

.learners-slider .slick-next {
    right: 0;
}

.learners-slider .slick-prev:before,
.learners-slider .slick-next:before {
    font-size: var(--heading-h4);
    opacity: 1;
}

.learners-slider .slick-dots {
    bottom: -50px;
}

.learners-slider .slick-dots li button:before {
    font-size: var(--body-text-small);
    color: #fff;
    opacity: 0.5;
}

.learners-slider .slick-dots li.slick-active button:before {
    opacity: 1;
    color: #fff;
}

/* Responsive Learners */
@media (max-width: 992px) {
    .section-title-learners {
        font-size: var(--section-title-size-mobile);
    }
    
    .learners-slider {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .learners-section {
        padding: 50px 0 80px;
    }
    
    .section-title-learners {
        font-size: var(--section-title-size-mobile);
        margin-bottom: 40px;
    }
    
    .learners-slider {
        padding: 0 30px;
    }
    
    .testimonial-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
    }
    
    .testimonial-avatar img {
        width: 80px;
        height: 80px;
    }
    
    .testimonial-text p {
        font-size: var(--body-text-regular);
    }
    
    .testimonial-author h4 {
        font-size: var(--card-title-mobile);
    }
}

@media (max-width: 480px) {
    .learners-slider {
        padding: 0 20px;
    }
    
    .testimonial-slide {
        padding: 10px;
    }
}


/* About Us Section */
.about-section {
    padding: 80px 0;
    background: #f8f9fa;
}

.section-title-about {
    text-align: center;
    font-size: var(--section-title-size);
    margin-bottom: 60px;
    color: #455a64;
    font-weight: bold;
    letter-spacing: 2px;
}

.about-content {
    background: #fff;
    padding: var(--about-content-padding);
    border-radius: 10px;
}

.about-content p {
    font-size: var(--body-text-regular);
    line-height: 1.5;
    color: #4b5563;
    margin-bottom: 25px;
    text-align: justify;
}

.about-content p:last-child {
    margin-bottom: 0;
}

.about-content strong {
    color: #1e3a8a;
    font-weight: 700;
}

.about-read-more {
    text-align: center;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid #e5e7eb;
}

.btn-read-more {
    background: #fff;
    color: #1e3a8a;
    border: 2px solid #1e3a8a;
    padding: var(--btn-read-more-padding);
    border-radius: 8px;
    font-size: var(--body-text-regular);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(30, 58, 138, 0.1);
}

.btn-read-more:hover {
    background: #1e3a8a;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 58, 138, 0.25);
}

.btn-read-more i {
    font-size: var(--body-text-regular);
    transition: transform 0.3s ease;
}

.btn-read-more:hover i {
    transform: scale(1.1);
}
#aboutModal{
/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(30, 41, 59, 0.85);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    position: relative;
    background-color: #fff;
    margin: 3% auto;
    padding: 0;
    border-radius: 20px;
    width: 90%;
    max-width: 1000px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@keyframes slideDown {
    from {
        transform: translateY(-100px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.modal-content h2 {
    background: linear-gradient(135deg, #1e3a8a 0%, #3b4a8c 100%);
    color: #fff;
    padding: var(--modal-header-padding);
    margin: 0;
    font-size: var(--heading-h2);
    font-weight: 700;
  
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 0.5px;
}

.modal-body {
    padding: var(--modal-body-padding);
    overflow-y: auto;
    max-height: calc(90vh - 120px);
    background: #fff;
}

.modal-body p {
    font-size: var(--body-text-regular);
    line-height: 2;
    color: #374151;
    margin-bottom: 25px;
    text-align: justify;
    font-weight: 400;
}

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

.modal-body p:last-child {
    margin-bottom: 0;
}

.modal-body strong {
    color: #1e3a8a;
    font-weight: 700;
}

.modal-close {
    color: #ffffff;
    font-size: var(--heading-h2);
    left: 93%;
    top: 4%;
    position: absolute;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

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

/* Scrollbar Styling for Modal */
.modal-body::-webkit-scrollbar {
    width: 10px;
}

.modal-body::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 10px;
    margin: 10px 0;
}

.modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
    border: 2px solid #f3f4f6;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Modal Overlay Effect */
.modal::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
    pointer-events: none;
}
}
/* Responsive About Us */
@media (max-width: 992px) {
    .section-title-about {
        font-size: var(--section-title-size-mobile);
    }
    
    .about-content {
        padding: 40px;
    }
}

@media (max-width: 768px) {
    .about-section {
        padding: 50px 0;
    }
    
    .section-title-about {
        font-size: var(--section-title-size-mobile);
        margin-bottom: 40px;
    }
    
    .about-content {
        padding: 30px 25px;
    }
    
    .about-content p {
        font-size: var(--body-text-regular);
        text-align: left;
    }
}

@media (max-width: 480px) {
    .about-content {
        padding: var(--about-content-padding-mobile);
    }
    
    .about-content p {
        font-size: var(--body-text-mobile);
    }
    
    .btn-read-more {
        padding: var(--btn-read-more-padding-mobile);
        font-size: var(--button-text-size-mobile);
    }
    
    .modal-content {
        width: 95%;
        margin: 5% auto;
        border-radius: 15px;
    }
    
    .modal-content h2 {
        font-size: var(--heading-h3);
        padding: var(--modal-header-padding-mobile);
        border-radius: 15px 15px 0 0;
    }
    
    .modal-body {
        padding: var(--modal-body-padding-mobile);
    }
    
    .modal-body p {
        font-size: var(--body-text-regular);
        line-height: 1.8;
    }
    
    .modal-close {
        font-size: var(--heading-h2);
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 5% auto;
    }
    
    .modal-content h2 {
        font-size: var(--heading-h3);
        padding: var(--modal-header-padding-mobile);
    }
    
    .modal-body {
        padding: var(--modal-body-padding-mobile);
    }
}


/* Participation Fee Section */
.fee-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
    position: relative;
    overflow: hidden;
}

.fee-section::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    z-index: 0;
}

.fee-section::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    z-index: 0;
}

.fee-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.fee-left h2 {
    font-size: var(--section-title-size);
    color: #1e3a8a;
    font-weight: bold;
    margin-bottom: 30px;
}

.fee-box {
    background: #fff;
    padding: var(--fee-box-padding);
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.fee-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.fee-label {
    font-size: var(--body-text-small);
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.fee-amount {
    font-size: var(--heading-h2);
    color: #1e3a8a;
    font-weight: bold;
    margin: 0;
}

.fee-gst {
    font-size: var(--card-title-size);
    color: #6b7280;
    font-weight: normal;
}

.fee-info-box {
    background: #fff;
    padding: var(--fee-info-box-padding);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.fee-info-box h3 {
    font-size: var(--card-title-size);
    color: #1e3a8a;
    font-weight: bold;
    margin-bottom: 25px;
    line-height: 1.5;
}

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

.fee-points li {
    padding: var(--fee-points-item-padding);
    position: relative;
    color: #4b5563;
    line-height: 1.6;
    font-size: var(--body-text-regular);
}

.fee-points li::before {
    content: '•';
    position: absolute;
    left: 10px;
    color: #1e3a8a;
    font-weight: bold;
    font-size: var(--heading-h4);
}

.fee-highlight {
    color: #991b1b !important;
    font-weight: 600 !important;
}

/* Fee Brochure Button */
.fee-brochure-btn {
    margin-top: 30px;
}

.btn-download-brochure {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #003366;
    color: #fff;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-size: var(--button-text-size);
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3);
    transition: all 0.3s ease;
}

.btn-download-brochure:hover {
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(30, 58, 138, 0.4);
}

.btn-download-brochure i {
    font-size: 18px;
}

/* Responsive Fee Section */
@media (max-width: 992px) {
    .fee-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .fee-left h2 {
        font-size: var(--heading-h2);
    }
}

@media (max-width: 768px) {
    .fee-section {
        padding: 50px 0;
    }
    
    .fee-left h2 {
        font-size: var(--section-title-size-mobile);
        margin-bottom: 25px;
    }
    
    .fee-box {
        padding: var(--fee-box-padding-mobile);
    }
    
    .fee-amount {
        font-size: var(--section-title-size-mobile);
    }
    
    .fee-gst {
        font-size: var(--body-text-regular);
    }
    
    .fee-info-box {
        padding: var(--fee-info-box-padding-mobile);
    }
    
    .fee-info-box h3 {
        font-size: var(--body-text-regular);
    }
    
    .fee-points li {
        font-size: var(--body-text-mobile);
    }
    
    .btn-download-brochure {
        width: 100%;
        justify-content: center;
        padding: 12px 25px;
        font-size: var(--button-text-size-mobile);
    }
}

@media (max-width: 480px) {
    .fee-box {
        padding: var(--fee-box-padding-mobile);
    }
    
    .fee-amount {
        font-size: var(--heading-h3);
    }
    
    .fee-info-box {
        padding: var(--fee-info-box-padding-mobile);
    }
}


/* Main Footer */
.main-footer {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%);
    color: #fff;
}

.footer-top {
    padding: var(--footer-top-padding);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
}

.footer-col h4 {
    font-size: var(--heading-h4);
    font-weight: bold;
    margin-bottom: 25px;
    color: #fff;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 3px;
    background: #667eea;
}

.footer-logo {
    margin-bottom: 20px;
}

.footer-logo img {
    max-width: 180px;
    height: auto;
    background: #fff;
    padding: var(--footer-logo-padding);
    border-radius: 8px;
}

.footer-desc {
    font-size: var(--body-text-var);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 25px;
}

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

.footer-social a {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    background: #667eea;
    transform: translateY(-3px);
}

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

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: var(--body-text-regular);
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: #fff;
    padding-left: 5px;
}

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

.footer-contact li {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--body-text-regular);
    line-height: 1.6;
}

.footer-contact i {
    color: #667eea;
    font-size: var(--card-title-size);
    margin-top: 3px;
    flex-shrink: 0;
}

.footer-bottom {
    background: rgba(0, 0, 0, 0.2);
    padding: var(--footer-bottom-padding);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

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

.footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--body-text-small);
}

.footer-bottom-links {
    display: flex;
    gap: 15px;
    align-items: center;
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: var(--body-text-small);
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: #fff;
}

.footer-bottom-links span {
    color: rgba(255, 255, 255, 0.4);
}

/* Responsive Footer */
@media (max-width: 1200px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
        gap: 30px;
    }
}

@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .footer-top {
        padding: var(--footer-top-padding-mobile);
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .footer-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .footer-social {
        justify-content: center;
    }
    
    .footer-col h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .footer-col {
        text-align: center;
    }
    
    .footer-links a {
        display: block;
    }
    
    .footer-contact li {
        justify-content: center;
        text-align: left;
    }
}

/* Program Objectives - Modern Cards Redesign */


.objectives-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 140px;
}

.objective-card {
    background: transparent;
    padding: var(--objective-card-padding);
    border-radius: 20px;
    transition: all 0.4s ease;
    text-align: center;
    position: relative;
    /* overflow: hidden; Removed to let number stick out */
    height: 100%;
    display: flex;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    border: none;
}

.objective-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Soft shadow */
    border-bottom: 4px solid transparent;
    z-index: -1;
    transition: all 0.4s ease;
}

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

.objective-card:hover::before {
    box-shadow: 0 20px 40px rgba(0, 51, 102, 0.15); /* Blue-ish shadow on hover */
    border-bottom-color: #003366; /* Educational Blue */
}

.objective-card .icon-box {
    width: 80px;
    height: 80px;
    background: rgba(0, 51, 102, 0.05); /* Very light blue bg */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2; /* Ensure icon is above bg */
}

/* ... existing icon-box hover ... */

.objective-card:hover .icon-box {
    background: #003366; /* Solid blue on hover */
    transform: scale(1.1);
}

.objective-card .icon-box i {
    font-size: var(--heading-h2);
    color: #003366;
    transition: all 0.3s ease;
}

.objective-card:hover .icon-box i {
    color: #ffffff;
}

.objective-card p {
    font-size: var(--body-text-regular);
    line-height: 1.6;
    color: #444;
    margin: 0;
    font-weight: 500;
    position: relative;
    z-index: 2; /* Ensure text is above bg */
}

/* Optional: Step Number if needed again */
.step-number {
    position: absolute;
    top: calc(-4.4vw + 0.1rem);
    left: 20px; /* Moved to left as per user preference in edit */
    font-size: calc(var(--step-number-size) + 0.5rem);
    font-weight: 700;
    color: rgba(0, 51, 102, 0.08); /* Slight blue tint */
    line-height: 1;
    z-index: -2; /* Behind the ::before bg */
}

/* Responsive */
@media (max-width: 1200px) {
    .objectives-grid {
        gap: 20px;
        grid-template-columns: repeat(2, 1fr); /* 2x2 on tablet/small laptops */
    }
    .objective-card {
        padding: var(--objective-card-padding-mobile);
    }
}

@media (max-width: 768px) {
    .objectives-grid {
        grid-template-columns: 1fr; /* Stacked on mobile */
        gap: 25px;
    }
}

/* Hero Banner Responsive */
@media (max-width: 1200px) {
    .hero-banner .container {
        padding: var(--hero-banner-padding-y-mobile) 0;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    
    .hero-banner .inner-container {
        flex-direction: column;
        gap: 40px;
    }
    
    .hero-banner .heading-container {
        width: 100%;
        margin-bottom: 30px;
    }
    
    .hero-banner .sub-heading-container {
        justify-content: center;
        border-left: none;
        padding-left: 0;
        border-bottom: 3px solid #00bfa5;
        padding-bottom: 20px;
        display: inline-block;
    }
    
    .apply-box {
        width: 80%;
        margin-top: 0;
    }
}

@media (max-width: 768px) {
    .hero-banner .big-text {
        font-size: calc(var(--heading-h1) + 0.5rem);
    }
    
    .hero-banner .heading-container h1 {
        font-size: var(--card-title-mobile);
    }
    
    .apply-box {
        width: 95%;
        padding: var(--apply-box-padding-mobile);
    }
    
    .apply-box-inner-container {
        gap: 30px;
    }
    
    .col1 {
        border-right: none;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        padding-right: 0;
        padding-bottom: 20px;
    }
    
    .col2 {
        padding-left: 0;
    }
}

/* Section Headings Decor */
.section-header {
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
}

.section-header h2 {
    /* Ensuring consistent base style for headings inside wrapper */
    margin-bottom: 15px;
    font-size: var(--section-title-size);
    position: relative;
    color:#003366;
    display: inline-block;
    padding-bottom: 10px;
}

.divider {
    height: 4px;
    width: 70px;
    background: linear-gradient(90deg, #003366 0%, #00bfa5 100%);
    margin: 0 auto 15px auto;
    border-radius: 2px;
}

.section-subtitle {
    font-size: var(--section-subtitle-size);
    color: #666;
    font-weight: 500;
    max-width: 600px;
    margin: 0 auto;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
}


/* Learners Speak Section - Premium Redesign */
.learners-section {
    padding: 80px 0;
    background-color: #f8fafc; /* Light off-white background */
    position: relative;
}

.learners-section .section-header {
    margin-bottom: 50px;
}



.learners-slider {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.testimonial-slide {
    background: #fff;
    border-radius: 15px;
    padding: var(--testimonial-slide-padding);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Soft, premium shadow */
    text-align: center;
    position: relative;
    outline: none; /* Remove focus outline */
}

.testimonial-content {
    margin-bottom: 30px;
}

.testimonial-avatar {
    width: 100px;
    height: 100px;
    margin: 0 auto ;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-text {
    position: relative;
    padding: var(--testimonial-text-padding);
}

.testimonial-text::before {
    content: '\201C'; /* Left Indise Quote */
    font-family: serif;
    font-size: 60px;
    color: #e64a19; /* Match secondary color */
    opacity: 0.2;
    position: absolute;
    top: -30px;
    left: 0;
}

.testimonial-text p {
    font-size: var(--card-title-size);
    line-height: 1.8;
    color: #4b5563; /* Slate 600 */
    font-style: italic;
    margin: 0;
}

.testimonial-author h4 {
    font-size: var(--heading-h4);
    font-weight: 700;
    color: #1e3a8a; /* Navy Blue */
    margin: 0 0 5px;
}

.testimonial-author p {
    font-size: var(--body-text-regular);
    color: #6b7280; /* Gray 500 */
    margin: 0;
    font-weight: 500;
}

.author-designation {
    font-size: var(--body-text-small);
    color: #9ca3af !important; /* Lighter gray */
    margin-top: 2px;
}

/* Slick Dots Customization */
.learners-slider .slick-dots {
    bottom: -40px;
}

.learners-slider .slick-dots li button:before {
    font-size: calc(var(--body-text-small) - 0.2rem);
    color: #cbd5e1; /* Light slate */
    opacity: 1;
}

.learners-slider .slick-dots li.slick-active button:before {
    color: #1e3a8a; /* Active Navy Blue */
}

/* Slick Arrows Customization */
.learners-slider .slick-prev, 
.learners-slider .slick-next {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 10;
    transition: all 0.3s ease;
}

.learners-slider .slick-prev:hover, 
.learners-slider .slick-next:hover {
    background: #1e3a8a;
    box-shadow: 0 6px 15px rgba(30, 58, 138, 0.3);
}

.learners-slider .slick-prev:before, 
.learners-slider .slick-next:before {
    color: #1e3a8a;
    font-size: var(--heading-h4);
    opacity: 1;
}

.learners-slider .slick-prev:hover:before, 
.learners-slider .slick-next:hover:before {
    color: #fff;
}

.learners-slider .slick-prev {
    left: -60px;
}

.learners-slider .slick-next {
    right: -60px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .testimonial-slide {
        padding: var(--testimonial-slide-padding-mobile);
    }
    
    .testimonial-text p {
        font-size: var(--body-text-regular);
    }
    
    .learners-slider .slick-prev, 
    .learners-slider .slick-next {
        display: none !important; /* Hide arrows on mobile */
    }
}




/* Learners Speak Section - White Subtitle Override */
.learners-section .section-subtitle {
    color: #ffffff;
}

/* Pedagogy Section - White Subtitle Override */
.pedagogy-section .section-subtitle {
    color: #ffffff;
}

/* Mobile Responsive Typography */
@media (max-width: 768px) {
    .section-title-center,
    .section-title-dark,
    .section-title-blue,
    .section-title-pedagogy,
    .section-title-journey,
    .section-title-curriculum,
    .section-title-assessment,
    .section-title-organizations,
    .section-title-learners,
    .section-title-about {
        font-size: var(--section-title-size-mobile);
        margin-bottom: 40px;
    }
    
    .section-subtitle {
        font-size: var(--section-subtitle-size-mobile);
        margin-bottom: 30px;
    }
}

/* Registration Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    margin: 3% auto;
    padding: 0;
    position: relative;
    border: none;
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.4s ease;
    overflow: hidden;
}

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

.registration-modal h2 {
    background: linear-gradient(135deg, #003366 0%, #00bfa5 100%);
    color: #fff;
    padding: var(--registration-modal-header-padding);
    margin: 0;
    font-size: var(--section-title-size-mobile);
    justify-content: center;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 15px;
}

.registration-modal h2 i {
    font-size: var(--heading-h2);
}

.registration-modal .modal-subtitle {
    text-align: center;
    background: linear-gradient(135deg, #003366 0%, #00bfa5 100%);
    color: rgba(255, 255, 255, 0.9);
    padding: var(--modal-subtitle-padding);
    margin: 0;
    font-size: var(--body-text-regular);
    font-weight: 400;
}

.registration-modal .modal-close {
    color: #fff;
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: var(--heading-h2);
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
}

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

.modal-body {
    padding: var(--modal-body-padding);
}

/* Form Styles */
.registration-modal .form-group {
    margin-bottom: 25px;
}

.registration-modal .form-group:first-child {
    margin-top: 0;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
    font-size: var(--body-text-small);
    letter-spacing: 0.5px;
}

.form-group .required {
    color: #e74c3c;
    margin-left: 3px;
}

.form-group input {
    width: 100%;
    padding: var(--form-input-padding);
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: var(--body-text-regular);
    transition: all 0.3s ease;
    background: #fff;
    color: #333;
    font-family: 'Roboto', sans-serif;
}

.form-group input:focus {
    outline: none;
    border-color: #00bfa5;
    box-shadow: 0 0 0 3px rgba(0, 191, 165, 0.1);
}

.form-group input::placeholder {
    color: #999;
}

.form-hint {
    display: block;
    margin-top: 6px;
    font-size: var(--body-text-small);
    color: #666;
    font-style: italic;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 35px;
    justify-content: center;
}

.form-actions .btn {
    padding: var(--form-button-padding);
    border: none;
    border-radius: 8px;
    font-size: var(--button-text-size-mobile);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.btn-submit {
    background: linear-gradient(135deg, #00bfa5 0%, #00a890 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 191, 165, 0.3);
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 191, 165, 0.4);
}

.btn-cancel {
    background: #f5f5f5;
    color: #666;
    border: 2px solid #e0e0e0;
}

.btn-cancel:hover {
    background: #e0e0e0;
    color: #333;
}

/* Responsive Modal */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        margin: 5% auto;
    }
    
    .registration-modal h2 {
        padding: 25px 30px;
        font-size: var(--heading-h3);
    }
    
    .modal-subtitle {
        padding: var(--modal-subtitle-padding-mobile);
        font-size: var(--body-text-mobile);
    }
    
    .modal-body {
        padding: var(--modal-body-padding-mobile);
    }
    
    .form-actions {
        flex-direction: column;
    }
    
    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .modal-close {
        right: 15px;
        top: 15px;
        font-size: var(--heading-h2);
    }
}
/* Facility Section */
.facility-section {
    padding: var(--section-padding-y) 0;
    padding-bottom: 0px !important;
background-image: url(../images/bg02.jpg);
background-repeat: no-repeat;
background-position: center;

background-size: cover;
}

.section-title-facility {
    font-size: var(--section-title-size);
    font-weight: 700;
    color: #2c3e50;

    letter-spacing: 2px;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.facility-slider {
    margin-top: 50px;
    padding: 0 20px;
}

.facility-slide {
    padding: 15px;
}

.facility-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

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

.facility-image {
    height: calc(14vw + 0.5rem);
    overflow: hidden;
    position: relative;
}

.facility-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.facility-card:hover .facility-image img {
    transform: scale(1.1);
}

.facility-content {
    padding: var(--facility-content-padding);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.facility-content h3 {
    font-size: var(--heading-h4); /* Using variable */
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 600;
}

.facility-content p {
    font-size: var(--body-text-regular); /* Using variable */
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
    flex-grow: 1;
}

.btn-read-more-facility {
    background: transparent;
    border: 2px solid #003366;
    color: #003366;
    padding: 10px 25px;
    border-radius: 25px;
    font-size: var(--body-text-regular); /* Using variable */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: center;
    margin-top: auto;
}

.btn-read-more-facility:hover {
    background: #003366;
    color: #fff;
}

/* Facility Modal Specifics */
.facility-modal-image {
    width: 100%;
    height: 300px;
    margin-bottom: 25px;
    border-radius: 10px;
    overflow: hidden;
}
#facilityModal .modal-content h2 {
        background: linear-gradient(135deg, #1e3a8a 0%, #3b4a8c 100%);
        color: #fff;
        padding: var(--modal-header-padding);
        margin: 0;
        font-size: var(--heading-h2);
        font-weight: 700;
        display: flex;
        justify-content: space-between;
        align-items: center;
        letter-spacing: 0.5px;
    }
.facility-modal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.facility-modal-desc {
    font-size: var(--body-text-regular);
    line-height: 1.8;
    color: #444;
}

/* Responsive Facility */
@media (max-width: 992px) {
    .section-title-facility {
        font-size: var(--section-title-size-mobile);
    }
}

@media (max-width: 768px) {
    .facility-section {
        padding: var(--section-padding-y-mobile) 0;
    }
    
    .facility-slider {
        margin-top: 30px;
        padding: 0;
    }
    
    .facility-modal-image {
        height: 200px;
    }
}

/* Facility Modal Close Button Fix */
#facilityModal .modal-content {
    position: relative;
}

#facilityModal .modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2.5rem;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    z-index: 10;
    line-height: 1;
    transition: color 0.3s ease;
}

#facilityModal .modal-close:hover {
    color: #e74c3c;
}

/* Facility Modal Unique Close Button */
.facility-close-btn {
    position: absolute;
    top: 31px;
    right: 20px;
    font-size: 2.5rem;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    z-index: 1001;
    line-height: 1;
    transition: color 0.3s ease;
}

.facility-close-btn:hover {
    color: #e74c3c;
}