@import url(/level-button);
:root {
    /* Primary Brand Colors */
    --color-primary-900: #001F80; /* Main Primary Blue */
    --color-primary-500: #003E9C; /* Lighter Blue (used in buttons) */
    --color-primary-100: #F7FAFF; /* Light Blue Background */
    --color-primary-border: #96C0FF; /* Border/Accent */
    --color-primary-400: #0047B3;
     --color-primary-Main-B100:#6BA6FF;
    /* Secondary/Accent Colors */
    --color-secondary-900: #920513; /* Deep Red */
    --color-secondary-500: #EF091F; /* Bright Red */
    
    /* Neutral Colors */
    --color-white: #FEFEFE; /* Pure White */
    --color-light-bg: #F6F4F4; /* Light Background */
    
    --color-black-900: #272626; /* Main Text (almost black) */
    --color-black-700: #383636; /* Secondary Text */
    --color-black-400: #757B8A; /* Muted/Subtle Text (from your Figma) */
    
    /* Functional Colors */
    --color-success: #14866d;
    --color-warning: #C31727;
    
    /* UI Specific - Renamed for clarity */
    --color-star: #EFE618; /* Star rating color */
   /* Headings */
   --font-heading: -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     /* Body text */
   --font-body: 'SF Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
   /* UI elements (buttons, inputs, labels, etc.) */
   --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 
   /* System fallback */
   --font-system: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 
} /* BASE SETUP - Apply to body */
body {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--color-black-900);
    background: #fff;
}
/* Display Text */
.display-text-60 {
    font-size: 60px;
    font-weight: 700; /* Bold */
    font-family: var(--font-body);
  }
  
  .display-text-54 {
    font-size: 54px;
    font-weight: 700; /* Bold */
    font-family: var(--font-body);
  }
  
  /* Title Text */
  .title-text-48-bold {
    font-size: 48px;
    font-weight: 700; /* Bold */
    font-family: var(--font-body);
  }
  
  .title-text-48-semibold {
    font-size: 48px;
    font-weight: 600; /* Semibold */
    font-family: var(--font-body);
  }
  
  .title-text-48-medium {
    font-size: 48px;
    font-weight: 500; /* Medium */
    font-family: var(--font-body);
  }
  
  /* Subheading Text */
  .subheading-text-40-medium {
    font-size: 40px;
    font-weight: 500; /* Medium */
    font-family: var(--font-body);
  }
  .subheading-text-40-semibold {
      font-size: 40px;
      font-weight: 600; /* Semibold */
      font-family: var(--font-body);
    }
  /* Subheading Text */
  .subheading-text-30-medium {
      font-size: 30px;
      font-weight: 500; /* Medium */
      font-family: var(--font-body);
    }
  
  .subheading-text-32-semibold {
    font-size: 32px;
    font-weight: 600; /* Semibold */
    font-family: var(--font-body);
  }
  
  .subheading-text-32-regular {
    font-size: 32px;
    font-weight: 400; /* Regular */
    font-family: var(--font-body);
  }
  
  /* Body Text */
  .body-text-24-regular {
    font-size: 24px;
    font-weight: 400; /* Regular */
    font-family: var(--font-body);
  }
  
  .body-text-24-medium {
    font-size: 24px;
    font-weight: 500; /* Medium */
    font-family: var(--font-body);
  }
  
  .body-text-16-regular {
    font-size: 16px;
    font-weight: 400; /* Regular */
    font-family: var(--font-body);
  }
  
/* ===== HEADING CLASSES ===== */
/* Use Archivo for ALL headings */
.heading-hero {
    font-family: var(--font-heading);
    font-size: var(--text-hero);
    font-weight: var(--weight-bold);
    line-height: 120%;
    color: var(--color-black-900);
}

.heading-section {
    font-family: var(--font-heading);
    font-size: var(--text-3xl); /* 40px on desktop */
    font-weight: var(--weight-bold);
    line-height: 120%;
    color: var(--color-primary-900); /* Blue titles */
}

.heading-card {
    font-family: var(--font-heading);
    font-size: var(--text-xl); /* 24px */
    font-weight: var(--weight-bold);
    line-height: 150%;
}

/* ===== BODY TEXT CLASSES ===== */
/* Use DM Sans for ALL readable text */
.body-large {
    font-family: var(--font-body);
    font-size: var(--text-base); /* 18px */
    font-weight: var(--weight-regular);
    line-height: 160%;
}

.body-regular {
    font-family: var(--font-body);
    font-size: var(--text-sm); /* 16px */
    font-weight: var(--weight-regular);
    line-height: 160%;
}

.body-small {
    font-family: var(--font-body);
    font-size: var(--text-xs); /* 14px */
    font-weight: var(--weight-regular);
    line-height: 150%;
}

/* ===== UI TEXT CLASSES ===== */
/* Use Inter for functional elements */
.button-text {
    font-family: var(--font-ui);
    font-size: var(--text-sm); /* 16px */
    font-weight: var(--weight-semibold);
    line-height: 150%;
}

.label-medium {
    font-family: var(--font-ui);
    font-size: var(--text-sm); /* 16px */
    font-weight: var(--weight-medium);
    line-height: 150%;
    color: var(--color-black-400); /* Muted gray */
}

.label-small {
    font-family: var(--font-ui);
    font-size: var(--text-xs); /* 14px */
    font-weight: var(--weight-medium);
    line-height: 150%;
} pased on global css what i can change in my about css 




/* Container for positioning */
.image-wrapper {
    position: relative;
    width: 100%;
    height: 500px;
    /* Adjust based on your image height */
}

/* Main hero image */
.hero-img {
    position: relative;
    z-index: 10;
    /* Highest layer */
    width: 100%;
    max-width: 600px;
    /* Adjust as needed */
}

/* All background elements will use this base class */
.bg-element {
    position: absolute;
    border: 1px solid rgba(0, 31, 128, 0.15);
    /* #001F80 with transparency */
    pointer-events: none;
    z-index: 1;
    /* Behind the main image */
}

/* Individual elements matching your Figma specs */

/* Largest outer circle */
.bg-circle-1 {
    width: 414px;
    height: 414px;
    top: 117px;
    left: 962px;
    border-radius: 50%;
    opacity: 1;
}

/* Second circle */
.bg-circle-2 {
    width: 344px;
    height: 344px;
    top: 152px;
    left: 997px;
    border-radius: 50%;
    opacity: 1;
}

/* Third circle */
.bg-circle-3 {
    width: 265px;
    height: 265px;
    top: 192px;
    left: 1037px;
    border-radius: 50%;
    opacity: 1;
}

/* Fourth circle */
.bg-circle-4 {
    width: 162px;
    height: 162px;
    top: 243px;
    left: 1088px;
    border-radius: 50%;
    opacity: 1;
}



/* Container for positioning context */
.text-wrapper {
    position: relative;
    padding: 40px;
    /* Add padding so text doesn't touch edges */
    min-height: 500px;
    /* Ensure enough height for positioning */
}

/* Updated blur background matching Figma specs */


/* Ensure text content stays above the blur */
.text-wrapper h3,
.text-wrapper p,
.text-wrapper .btn-group {
    position: relative;
    z-index: 1;
}

.team-section {
    padding: 40px 0;
    background: #F7FAFF;
    text-align: center;
}

.section-title {
    
    color: var(--color-primary-900);
    margin-bottom: 24px;

    font-family: SF Pro;
font-weight: 700;
font-style: Bold;
font-size: clamp(24px, 3vw, 40px);

line-height: 60px;
letter-spacing: -2%;
text-align: center;

}

.section-subtitle {
    font-size: 20px;
    font-weight: 400;
    color: #272626;
    max-width: 80%;
    margin: 0 auto 60px auto;
    /* centers under h2 */
    line-height: 32px;
}

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

.team-card {

    padding: 0;                 /* remove inner spacing */
    text-align: left; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}



.team-img {
    width: 150px;
    height: 150px;

    object-fit: cover;
    margin: 0 ;
    /* centers image */
}

.team-name {
    font-size: 20px;
    font-weight: 590;
    margin-bottom: 4px;
    color: var(--black-text-color-Main-g400);
}

.team-job {
    font-size: 18px;
    color: var(--primary-color-Main-B100);
    margin-bottom: 12px;
}

.team-desc {
    font-size: 16px;
    color: var(--white-text-color-Main-W500);
}

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

@media (max-width: 576px) {
    .team-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.faq-section {
    padding: 40px 0;
}

.faq-item {
    border-bottom: 1px solid #E5E7EB;
    padding: 20px 0;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 0;
    font-size: 28px;
    line-height: 120%;
    
    font-weight: 500;
    cursor: pointer;
    color:var(--black-text-color-Main-g400) ;
}

/* QUESTION TEXT */
.faq-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--black-text-color-Main-g400);
    text-align: left;
    flex: 1;
}

/* TOGGLE CIRCLE */
.faq-toggle {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: 1.5px solid var(--primary-color-Main-B100);
    border-radius: 50%;

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

    font-size: 22px;
    line-height: 1;
    color: var(--primary-color-Main-B100);

    position: relative;
}

/* PLUS */
.faq-toggle::before {
    content: "+";
    position: absolute;
}

/* MINUS */
.faq-item.active .faq-toggle::before {
    content: "−";
}




.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    margin-top: 16px;
    font-size:20px;
    color: var(--black-text-color-Main-g400);
    line-height: 33.33 px;
}

/* Active state */
.faq-item.active .faq-answer {
    max-height: 300px;
}

/*New*/
.highlight-card {
    width: 299px;
    height: 322px;

    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 24px;
    padding-right: 24px;

    background: #F7FAFF;
    border-radius: 12px;
    border: 1px solid #96C0FF;

    box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.09);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    text-align: center;
    opacity: 1;
}

.highlights-section {
    padding: 40px 0;
    background: var(--white-text-color-Main);
}

.highlight-card img {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
}

.highlight-card p {
    font-family: "SF Pro Text", "SF Pro", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    font-style: normal;

    font-size: 22px;
    line-height: 32px;
    letter-spacing: 0;
    color: var(--black-text-color-Main);
    text-align: center;
    margin: 0;
}

.highlights-row-wrapper {
    max-width: 1006px;
    /* Figma row width */
    margin: 0 auto;
    /* center the row */
}

.highlights-section .row {
    --bs-gutter-x: 54px;
    /* horizontal gap */
    --bs-gutter-y: 54px;
    /* vertical gap */
}


.highlight-card:hover {
    background: #003E9C;
    border: 1px solid #96C0FF;
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.08);

    transform: scale(1.025);
    /* ≈ 300x330 */
}

.highlight-card:hover p {
    color: var(--white-text-color-Main);
}

.benefits-section {
    padding: 40px 0;
    position: relative;
    overflow: hidden;
    background: #FFFFFF;

    /* keeps blur inside section */
}


/* Ellipse 2669 */
.ellipse-2669 {
    position: absolute;

    width: 303px;
    height: 287px;

    top: 211px;
    left: 1090px;

    background: #FDE6E9;
    border-radius: 50%;

    filter: blur(103px);
    opacity: 1;

    z-index: 0;
}


/* Wrapper = Figma frame */
.benefits-wrapper {
    max-width: 1181px;
    /* text frame width */
    margin: 0 auto;

    display: flex;
    align-items: center;
    /* aligns image with text block */
    gap: 32px;
    /* Figma gap */
}

/* LEFT COLUMN */
.benefits-text {
    max-width: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* Each row */
.benefit-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Icon */
.benefit-item img {
    width: 40px;
    height: 40px;
}

/* Text */
.benefit-item p {
    font-family: "SF Pro Text", system-ui, -apple-system, sans-serif;
    font-size: 20px;
    line-height: 28px;
    margin: 0;
}

.benefits-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: -70px;
}



/* SVG Background */
.benefits-bg {
    position: absolute;
    width: 3500px;
    height: 1414px;
    top: 50px;
    left: 60px;
    background: url("../../../../images/Vector.svg") no-repeat ;

    opacity: 1;
    z-index: 0;
}

.about-section {
    padding: 40px 0;
    background: var(--white-text-color-Main);
}

.about-img {
    max-width: 100%;
    height: auto;
}

/* Keep image from drifting */
.about-img {
    max-width: 100%;
    height: auto;
}

.get-started-btn {
    display: inline-block;
    padding: 12px 24px;
    background: #001F80;
    color: #F7FAFF;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: none;
    margin-right: 8px;
}

.auth-divider {
    display: inline-block;
    width: 1px;
    height: 32px;
    background-color: #000000;
    vertical-align: middle;
    margin: 0 12px;
}

.download-app-link {
    display: inline-block;
    padding: 12px 0;
    background: transparent;
    color: #272626;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: none;
    margin-left: 8px;
    position: relative;
}

/* Add downward arrow */
.download-app-link::after {
    content: " ↓";
    display: inline-block;
    margin-left: 4px;
    font-weight: bold;
}

/* ================= EMPLOYEES ================= */
.employees-section {
    padding: 40px 0;
    background: #FFFFFF;
}

.employees-slider {
    overflow: hidden;
    width: 100%;
}

.employees-track {
    display: flex;
    transition: transform 0.4s ease;
}

.employees-page {
    min-width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
    justify-items: center;
}


/* 2 employee cards side by side */
.employees-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

/* Employee card */
.employee-card {
    width: 100%;
    max-width: 625px;
    min-height: 239px;

    display: flex;
    align-items: flex-start;
    gap: 40px;
}



.employee-img {
    width: 239px;
    height: 239px;
    flex-shrink: 0;
}

.employee-img img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: cover;
}

/* ================= TEXT BLOCK ================= */
.employee-content {
    width: 346px;
    min-height: 206px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* tight, natural spacing */
}


.employee-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}


.employee-stars {
    font-size: 18px;
    color: #EFE618;
    ;
}

.employee-text {
    font-size: 18px;
    font-weight: 590;
    line-height: 24px;
    color: #383636;
    margin: 0;
}

.employee-name {
    font-size: 16px;
    font-weight: 590;
    color: #001F80;
    margin: 0;
    white-space: nowrap;
    /* prevents breaking */
}

.employee-email {
    font-family: "SF Pro Text", system-ui, -apple-system;
    font-weight: 590;
    font-size: 16px;
    line-height: 1.2;
    color: #96C0FF;
    ;
    margin: 0;
}


/* ================= RECTANGLE INDICATORS ================= */
.employee-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

.employee-indicators .indicator {
    width: 120px;
    height: 10px;
    border-radius: 30px;
    background: #EBEBEB;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* Active indicator (future use) */
.employee-indicators .indicator.active {
    background: #001F80;
}


.plans-section {

    background: #F7FAFF;
    padding: 40px 0;
}

.plans-wrapper {
    max-width: 1280px;
    margin: 0 auto;

    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: center;
}



.plan-card {
    flex: 1 1 320px;
    /* ✅ responsive width */
    max-width: 384px;
    padding: 24px;
    background: #F7FAFF;
    border-radius: 16px;
    border: 1px solid #96C0FF;
    box-shadow:
        0px 4px 6px -2px #10182808,
        0px 12px 16px -4px #10182814;

    display: flex;
    flex-direction: column;
    gap: 24px;
}

.plan-card-header {
    text-align: center;
}

.plan-card-header img {
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto 16px auto;
    border-radius: 28px;
    border-width: 6px;

}


.plan-card-header p {
    font-weight: 400;
    font-size: 18px;
}

.plans-p {
    font-weight: 512;
    font-size: 16px;
    color: var(--black-text-color-Main);
}

.plan-card-header h3 {
    font-weight: 590;
    font-size: 20px;
    color: var(--primary-color-Main-B100);

}

.plan-price {
    font-size: 40px;
    font-weight: 590;
    line-height: 60px;
    letter-spacing: -0.02em;
}

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

.plan-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.plan-features img {
    width: 20px;
    height: 20px;
}

.plan-features p {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
}


.plans-section p {
    text-align: center;
}

.plan-card-footer {
    margin-top: auto;
    /* pushes footer to bottom */
    display: flex;
    justify-content: center;
}

.plan-btn {
    width: 100%;
    max-width: 320px;
    height: 48px;

    padding: 12px 20px;
    border-radius: 8px;

    background: #001F80;
    border: 1px solid #001F80;

    color: #FFFFFF;
    font-weight: 600;
    text-decoration: none;
    text-align: center;

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

/* ================= CONTACT FORM ================= */

.contact-section {
    padding: 40px 0;
    background: #F7FAFF;
}

.contact-title {
    font-family:SF Pro;
    font-weight: 700;
    font-style: Bold;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color:var(--color-primary-900);

}

.contact-form {
    max-width: 1082px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Field wrapper */
.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Label */
.field label {

    color: #383636;

    font-weight: 590;
    font-style: Semibold;
    font-size: 20px;

    line-height: 100%;
    letter-spacing: 0%;

}

/* Inputs */
.form-input {
    width: 100%;
    height: 80px;
    padding: 0 24px;

    border-radius: 8px;
    border: 1px solid #96C0FF;

    font-size: 16px;
    font-family: "SF Pro Text", system-ui, -apple-system;
    color: #272626;

    outline: none;
}

/* Textarea */
.form-textarea {
    width: 100%;
    height: 234px;
    padding: 24px;

    border-radius: 8px;
    border: 1px solid #96C0FF;
    resize: none;

    font-size: 16px;
    font-family: "SF Pro Text", system-ui, -apple-system;
    color: #272626;
}




.form-input,
.form-textarea {
    padding-top: 28px;
}

.form-row.two-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
}



.submit-btn {
    position: relative;

    padding: 14px 32px;
    background: #001F80;
    color: #FFFFFF;

    border: none;
    border-radius: 8px;
    cursor: pointer;

    font-size: 16px;
    font-weight: 600;
}



/* BUTTON */
.custom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 8px;
    border: 1px solid #003E9C;

    color: #003E9C;
    font-weight: 600;
    text-decoration: none;
    transition: .3s ease;
}

.custom-btn:hover {
    background: #003E9C;

    color: #fff;
}

.custom-btn.outline {
    background: transparent;
}
.hero-section {
    padding: 40px 0;
    background: var(--color-primary-100, #F7FAFF);
   }
.hero-title,
.hero-title span,
.hero-text {
    text-align: left;
}

.hero-title span,
.hero-title {
    font-family: "SF Pro";
    font-weight: 700;
    font-size:  clamp(30px, 6vw, 62px);
    line-height: 62px;
    text-transform: capitalize;
    margin-bottom: 40px;
    
}




.rate {
    color: #003E9C;
    font-weight: 590;
}

.hero-title span {
    color: #003E9C;
    
}

.hero-text {
    
    font-family: SF Pro;
    font-size: 20px;
    font-weight: 400;
    font-style: Regular;
 
    line-height: 100%;
    letter-spacing: 0%;
  
}

.hero-img {
    max-width: 100%;
}

.student-section {
    padding: 50px 0;
    text-align: center;
    background: #001F80;


}

.student-btn {
    width: 100%;
    max-width: 320px;
    height: 48px;

    padding: 12px 20px;
    background: #FFFFFF;
    color: #001F80;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.student-indicator2 {
    width: 83.25;
    height: 3;
    opacity: 1;
    border-radius: 4.5px;
    color: #D9D9D9;
}

.student-indicator1 {
    width: 45;
    height: 3;
    opacity: 1;
    border-radius: 4.5px;
    color: #D9D9D9;
}


.student-section p {
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 400;
}

.student-title {
    color: #FFFFFF;

    font-size: 32px;
    font-weight: 700;
}

/* PARTNERS */
.partners-section {
    padding: 50px 0;
    text-align: center;
    background: #FCF3F4D9;

}

.partners-title {
    font-weight: 600;
    margin-bottom: 30px;
}

.partners-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
}

/* Each logo gets the same visual box */
.logo-item {
    width: 160px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Image scales INSIDE the box */
.logo-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


/* ABOUT */
.about-section {
    padding: 40px 0;
}



/* PROGRAMS */
.programs-section {
    position: relative;
    overflow: hidden;
    background: #FFFFFF;
padding: 40px 0;

}


/* Keep content above background */
.programs-section .container {
    position: relative;
    z-index: 1;
}


.program-p {
    padding-bottom: 80px;
}




.program-item h3 {
    font-weight: 510;
    font-size: 48px;
    margin-bottom: 15px;
    color: var(--primary-color-Main-B100);
}

.program-link {
    color: #003E9C;

    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 1024px) {
    .employees-grid {
        grid-template-columns: 1fr;
        /* 1 card per row */
        justify-items: center;
    }

    .employee-card {
        width: 100%;
        max-width: 625px;
    }
}

@media (min-width: 992px) and (max-width: 1024px) {

    .employee-content {
        width: 100%;
    }

    .employee-img {
        width: 200px;
        height: 200px;
    }

   
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .vision-logo {
        position: static;
        transform: none;
        margin-top: 16px;
        max-width: 120px;
    }

    .text-wrapper {
        margin-top: 40px;
    }

    .employees-page {
        grid-template-columns: 1fr;
        /* 1 employee per row */
    }

    .employee-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }

    .employee-img {
        width: 100%;
        height: auto;
        max-width: 300px;
    }

    .employee-img img {
        height: auto;
    }

    .employee-content {
        width: 100%;
        align-items: center;
    }

    .employee-meta {
        justify-content: center;
        flex-wrap: wrap;
    }
  /*  .section-title {
    font-size: 36px;

    
    }*/
    .hero-section {
        text-align: center;
    }

    .hero-title,.hero-title span {
       /* font-size: 32px;*/
        line-height: 40px;
        text-align: center;

    }
.hero-text{
    text-align: center;
}

    .about-section {
        text-align: center;
    }

    .about-img {
        margin-top: 24px;
    }

    .get-started-btn,
    .download-app-link {
        display: block;
        margin: 8px 0;
        text-align: center;
        width: 100%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .auth-divider {
        display: none;
    }

 
    .benefits-wrapper {
        flex-direction: column;
    align-items: center;
        text-align: left;
        gap: 24px;
    }

    .benefits-text {
        width: 100%;
        max-width: 340px;      /* controls block width */
        margin: 0 auto;
    
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    
    .benefit-item {
        display: flex;
        align-items: center;
        gap: 12px;
    
        width: 100%;          /* ALL rows same width */
        justify-content: flex-start;
    
        text-align: left;
    }
    
    

    .benefit-item img {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }

    .benefit-item p {
        margin: 0;
        font-size: var(--text-sm);
        line-height: 1.4;
        max-width: 260px;
    }

    .benefits-image {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .benefits-image img {
        margin-top: 0;
        max-width: 90%;
    }

    .ellipse-2669 {
        display: none;
    }
    .program-item {
        text-align: center;
        align-items: center;
    }

    .program-item .col-lg-6 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .program-item h3 {
        text-align: center;
    }

    .program-item p {
        text-align: center;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }

    .program-item img {
        margin-top: 24px;
    }

    .program-item .mt-5 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

}

@media (max-width: 768px) {

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

    .contact-form {
        gap: 24px;
    }

    .form-actions {
        justify-content: center;
    }

    .submit-btn {
        width: 100%;
        max-width: 320px;
    }



    .plan-card {
        max-width: 100%;
    }

    .plan-price {
        font-size: 32px;
        line-height: 44px;
    }
}

@media (max-width: 576px) {
    /*.section-title {
        font-size: 30px;
    
        
        }*/
        
    .faq-question {
        font-size: 18px;
    }
    .faq-question {
        align-items: flex-start;
    }

    .faq-text {
        font-size: 16px;
        line-height: 1.5;
    }

    .faq-toggle {
        margin-top: 2px;
    }
    .program-item h3 {
        font-size: 28px;
    }

    .program-item p {
        font-size: 16px;
        line-height: 24px;
    }

    .program-item img {
        max-width: 90%;
    }
}


@media (max-width: 480px) {
    .plan-card {
        padding: 20px;
    }

    .plan-features p {
        font-size: 14px;
    }

    .benefits-wrapper {
        gap: 16px;
    }

    .benefit-item {
        gap: 12px;
    }

    .benefit-item p {
        font-size: 16px;
        line-height: 24px;
    }

    .benefits-image img {
        max-width: 100%;
    }
}





a {
    text-decoration: none;
    color: inherit;
}

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