/**
* Template Name: Learner
* Template URL: https://bootstrapmade.com/learner-bootstrap-course-template/
* Updated: Jul 08 2025 with Bootstrap v5.3.7
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/






@charset "UTF-8";

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
    --default-font: "Poppins", sans-serif;
    --heading-font: "Poppins", sans-serif;
    --nav-font: "Poppins", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
    --primary-red-color: #e03f42;
    /* #ed1b1f #E03F42*/
    --background-color: #ffffff;
    /* Background color for the entire website, including individual sections */
    --default-color: #000000;
    /* Default color used for the majority of the text content across the entire website */
    --heading-color: #0F0D6B;
    /* #243e91 Color for headings, subheadings and title throughout the website */
    --accent-color: #0F0D6B;
    /*#103f90 Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --surface-color: #ffffff;
    /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff;
    /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
    --casht-blue: #0F0D6B;
    --casht-blue-mid: #0a0947;
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
    --nav-color: rgb(0 0 0 / 70%);
    /* The default color of the main navmenu links */
    --nav-hover-color: #000000;
    /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff;
    /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff;
    /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #394450;
    /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #136ad5;
    /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}





















/* ── CTA Block 2 ────────────────────────────────────────────── */
.upg-cta2-section {
    padding: 80px 0;
    background: #f8faff;
}

.upg-cta2-row {
    gap: 0;
}

.upg-cta2-img-wrap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
}

.upg-cta2-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.upg-cta2-img-wrap:hover img {
    transform: scale(1.03);
}

.upg-cta2-content {
    padding: 0 0 0 48px;
}

.upg-cta2-title {
    font-size: 32px;
    font-weight: 800;
    color: #1a2035;
    line-height: 1.25;
    margin-bottom: 16px;
}

.upg-cta2-desc {
    font-size: 15px;
    color: #718096;
    line-height: 1.8;
    margin-bottom: 32px;
    border-left: 4px solid #1a6fc4;
    padding-left: 16px;
}

.upg-cta2-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.upg-cta2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s ease;
    padding: 10px 30px;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.upg-cta2-btn--primary {
    background: #1a6fc4;
    color: #fff;
    /* border: 2px solid #1a6fc4; */
    display: inline-block;
    background: var(--accent-color);
    color: var(--contrast-color);
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    margin-top: auto;
}

.upg-cta2-btn--primary:hover {
    background: #080d6a;
    border-color: #080d6a;
    color: #fff;
    transform: translateY(-2px);
}

.upg-cta2-btn--outline {
    background: transparent;
    color: #080d6a;
    border: 2px solid #080d6a;
}

.upg-cta2-btn--outline:hover {
    background: #080d6a;
    color: #fff;
    transform: translateY(-2px);
}

/* no image — center layout */
.upg-cta2-content.text-center .upg-cta2-desc {
    border-left: none;
    padding-left: 0;
}

.upg-cta2-content.text-center .upg-cta2-buttons {
    justify-content: center;
}

@media (max-width: 991px) {
    .upg-cta2-content {
        padding: 40px 0 0;
    }
    .upg-cta2-title { font-size: 26px; }
}

@media (max-width: 575px) {
    .upg-cta2-section { padding: 60px 0; }
    .upg-cta2-btn { width: 100%; }
    .upg-cta2-buttons { flex-direction: column; }
}











.emp-ch-image {
    width: 100%;
    /* height: 400px; */
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 20px;
    margin-top: 22px;
}

.emp-ch-image img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
}



































/* ── SPEAKERS SECTION ───────────────────────────────────── */
.ndma-speakers-section {
  padding: 20px 0 10px;
}

.ndma-speakers-section__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.ndma-speakers-section__icon {
  width: 30px; height: 30px;
  border-radius: 6px;
  background: #eef2ff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ndma-speakers-section__icon i {
  font-size: 15px;
  color: #4361ee;
}

.ndma-speakers-section__title {
  font-weight: 700;
  font-size: 16px;
  color: #1a1a2e;
  margin: 0;
}

.ndma-speakers-section__divider {
  height: 2px;
  background: linear-gradient(to right, #1b0068, transparent);
  margin-bottom: 18px;
  border-radius: 2px;
}

/* ── SPEAKERS GRID ──────────────────────────────────────── */
.ndma-speakers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* ── SPEAKER CARD ───────────────────────────────────────── */
.ndma-speaker-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: #f8f9fa;
  border: 1px solid #eee;
  transition: box-shadow .2s, transform .2s;
}
.ndma-speaker-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  transform: translateY(-2px);
}

.ndma-speaker-card__avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #e0e0e0;
  background: #ddd;
}
.ndma-speaker-card__avatar img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.ndma-speaker-card__info {
  flex: 1; min-width: 0;
}
.ndma-speaker-card__name {
  font-weight: 700;
  font-size: 18px;
  color: #0F0D6B;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ndma-speaker-card__role {
  font-size: 12.5px;
  color: #000000;
  margin: 0 0 1px;
  line-height: 1.3;
}
.ndma-speaker-card__org {
  font-size: 12px;
  color: #888;
  margin: 0;
  font-weight: 500;
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 576px) {
  .ndma-speakers-grid { grid-template-columns: 1fr; }
}





























/* ── Stat Section ── */
.stat-item {
   position: relative;
   padding: 2rem 1.5rem;
   border-radius: 12px;
   /* background: #ffffff; */
   /* border: 1px solid #e8edf3; */
   overflow: hidden;
   cursor: default;
   transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
               box-shadow 0.35s ease,
               border-color 0.35s ease;
}

/* Animated bottom accent bar */
.stat-item::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%) scaleX(0);
   width: 80%;
   height: 3px;
   background: linear-gradient(90deg, #f82b31, #ffa6a9);
   border-radius: 2px 2px 0 0;
   transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-item:hover {
   transform: translateY(-8px);
   box-shadow: 0 16px 40px rgba(13, 110, 253, 0.12),
               0 4px 12px rgba(0, 0, 0, 0.06);
   border-color: rgba(13, 110, 253, 0.25);
}

.stat-item:hover::after {
   transform: translateX(-50%) scaleX(1);
}

/* Icon scale + color shift on hover */
.stat-item .stat-icon {
   font-size: 2rem;
   /* color: #6c757d; */
   display: block;
   margin-bottom: 0.75rem;
   transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
               color 0.3s ease;
}

.stat-item:hover .stat-icon {
   transform: scale(1.2);
   color: #080d6a;
}

/* Number color shift */
.stat-item h4 {
   transition: color 0.3s ease;
}

.stat-item:hover h4 {
   color: #080d6a;
}



















/* ── Contact Section ── */
.emp-contact {
  padding: 80px 0;
}

.emp-contact-banner {
  display: flex;
  align-items: center;
  background: #f5f9ff;
  border-radius: 16px;
  overflow: hidden;
  margin: 40px 0 32px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
}

.emp-contact-banner-img {
  flex: 0 0 34%;
  /* max-height: 220px; */
  overflow: hidden;
}

.emp-contact-banner-img img {
  width: 100%;
  height: 100%;
  /* object-fit: contain; */
  display: block;
}

.emp-contact-banner-info {
  flex: 1;
  padding: 32px 36px;
}

.emp-contact-banner-info p {
  font-size: 16px;
  color: #444;
  margin-bottom: 20px;
  line-height: 1.7;
}

.emp-contact-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.emp-contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}

.emp-contact-btn:hover { opacity: 0.85; }

.emp-contact-btn.email {
  background: #eef4fc;
  color: #0F0D6B;
  border: 1px solid #c5dbf5;
}

.emp-contact-btn.whatsapp {
  background: #e8f8ef;
  color: #25d366;
  border: 1px solid #b2e8c8;
}

/* Office Cards */
.emp-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.emp-contact-card {
  background: #fff;
  border: 1px solid #e5edf8;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.emp-contact-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.emp-desk-flag {
  width: 36px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.emp-contact-card-head h5 {
  margin: 0;
  font-size: 15px;
  color: #1a1a2e;
}

.emp-contact-card-head h5 span {
  font-weight: 400;
  color: #888;
  font-size: 13px;
}

.emp-contact-card p {
  font-size: 13px;
  color: #555;
  margin-bottom: 10px;
  line-height: 1.6;
}

.emp-contact-card p i,
.emp-contact-card a i {
  color: #0F0D6B;
  margin-right: 6px;
}

.emp-contact-card a {
  font-size: 13px;
  font-weight: 600;
  color: #0F0D6B;
  text-decoration: none;
}

.emp-contact-card a:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 768px) {
  .emp-contact-banner {
    flex-direction: column;
  }

  .emp-contact-banner-img {
    flex: 0 0 200px;
    width: 100%;
    max-height: 200px;
  }

  .emp-contact-banner-info {
    padding: 24px 20px;
  }

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






























 /* ═══════════════════════════════════════════════════════════
     WHY PARTNER
  ═══════════════════════════════════════════════════════════ */
    .emp-why {
      padding: 80px 0;
      background: var(--light);
    }

    .emp-why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      margin-top: 48px;
    }

    @media(max-width:991px) {
      .emp-why-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media(max-width:576px) {
      .emp-why-grid {
        grid-template-columns: 1fr;
      }
    }

    .emp-why-card {
      background: #fff;
      border-radius: var(--radius);
      padding: 36px 30px;
      border: 1.5px solid rgba(26, 95, 191, .09);
      transition: all .28s;
      position: relative;
      overflow: hidden;
    }

    .emp-why-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: red;
      transform: scaleX(0);
      transition: transform .28s;
      transform-origin: left;
    }

    .emp-why-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: transparent;
    }

    .emp-why-card:hover::before {
      transform: scaleX(1);
    }

    .emp-why-icon {
      width: 52px;
      height: 52px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--light2), #d4e6f8);
      display: grid;
      place-items: center;
      font-size: 1.4rem;
      color: #0F0D6B;
      margin-bottom: 20px;
      transition: all .28s;
    }

    .emp-why-card:hover .emp-why-icon {
      background: #e03f42;
      color: #fff;
    }

    .emp-why-card h4 {
      font-size: 1.05rem;
      font-weight: 800;
      margin: 0 0 10px;
      color: var(--navy);
    }

    .emp-why-card p {
      font-size: .88rem;
      color: var(--muted);
      line-height: 1.65;
      margin: 0;
    }

    /* Featured card */
    .emp-why-card.featured {
      background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
      border-color: transparent;
      color: #fff;
    }

    .emp-why-card.featured::before {
      background: linear-gradient(90deg, var(--accent), #f9cf6e);
    }

    .emp-why-card.featured .emp-why-icon {
      background: rgba(255, 255, 255, .15);
      color: var(--accent);
    }

    .emp-why-card.featured:hover .emp-why-icon {
      background: var(--accent);
      color: var(--navy);
    }

    .emp-why-card.featured h4 {
      color: #fff;
    }

    .emp-why-card.featured p {
      color: rgba(255, 255, 255, .75);
    }





















    /* ═══════════════════════════════════════════════════════════
     TALENT AREAS
  ═══════════════════════════════════════════════════════════ */
    .emp-talent {
      padding: 80px 0;
      background: var(--white);
    }

    .emp-talent-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: 48px;
    }

    @media(max-width:991px) {
      .emp-talent-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media(max-width:480px) {
      .emp-talent-grid {
        grid-template-columns: 1fr;
      }
    }

    .emp-talent-card {
      background: #fab9ba0a;
      border-radius: var(--radius);
      padding: 30px 20px;
      text-align: center;
      border: 1.5px solid transparent;
      transition: all .25s;
      cursor: default;
    }

    .emp-talent-card:hover {
      background: linear-gradient(135deg, #e8f2ff, #f0fafa);
      border-color: rgba(26, 95, 191, .2);
      transform: translateY(-4px);
      box-shadow: var(--shadow);
    }

    .emp-talent-emoji {
      font-size: 2rem;
      margin-bottom: 12px;
      display: block;
    }

    .emp-talent-card h5 {
      font-size: 18px;
      font-weight: 700;
      color: var(--navy);
      margin: 0;
      line-height: 1.3;
    }
    .emp-talent-img img {
    width: 100%;
    margin-bottom: 18px;
}






/* ── Process Section ── */
.emp-process {
  padding: 80px 0;
}

.emp-process-grid {
  max-width: 750px;
  margin: 50px auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.emp-process-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background-color: white;
  margin-bottom: 20px;
  padding: 5px;
  border-radius: 10px;
}

.emp-process-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.emp-process-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #0F0D6B;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
}

.emp-process-line {
  width: 2px;
  flex: 1;
  min-height: 40px;
  background: linear-gradient(to bottom, #0F0D6B, #d0e4f7);
  margin: 6px 0;
}

.emp-process-content {
  padding-bottom: 36px;
  flex: 1;
}

.emp-process-item.last .emp-process-content {
  padding-bottom: 0;
}

.emp-process-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #eef4fc;
  color: #0F0D6B;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.emp-process-content h4 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #1a1a2e;
}

.emp-process-content p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* Responsive */
@media (max-width: 576px) {
  .emp-process-grid {
    max-width: 100%;
  }

  .emp-process-number {
    width: 40px;
    height: 40px;
    font-size: 13px;
  }

  .emp-process-content h4 {
    font-size: 15px;
  }
}





.emp-cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #e8f1fb 0%, #f0f5ff 100%);
}
 
.emp-cta-inner {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 60px;
    align-items: center;
}
 
/* ── Left ──────────────────────────────────────────────────────── */
.emp-cta-heading {
    font-size: 36px;
    font-weight: 800;
    color: #1a2035;
    line-height: 1.2;
    margin-bottom: 16px;
}
 
.emp-cta-highlight {
    color: #0F0D6B;
}
 
.emp-cta-sub {
    font-size: 15px;
    color: #4a5568;
    line-height: 1.7;
    margin: 0;
}
 
/* ── Form Card ─────────────────────────────────────────────────── */
.emp-cta-form-wrap {
    background: #fff;
    border-radius: 16px;
    padding: 36px 32px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.08);
}
 
.emp-cta-form { display: flex; flex-direction: column; gap: 20px; }
 
.emp-cta-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
 
/* ── Fields ────────────────────────────────────────────────────── */
.emp-cta-field { display: flex; flex-direction: column; gap: 6px; }
 
.emp-cta-label {
    font-size: 13px;
    font-weight: 700;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 6px;
}
 
.emp-cta-optional {
    font-weight: 400;
    color: #1a6fc4;
    font-size: 12px;
}
 
.emp-cta-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
 
.emp-cta-input-wrap--textarea { align-items: flex-start; }
 
.emp-cta-icon {
    position: absolute;
    left: 14px;
    color: #a0aec0;
    font-size: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
 
.emp-cta-icon--top {
    top: 14px;
    transform: none;
}
 
.emp-cta-input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #2d3748;
    background: #fff;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
 
.emp-cta-input:focus {
    border-color: #1a6fc4;
    box-shadow: 0 0 0 3px rgba(26,111,196,.1);
}
 
.emp-cta-input::placeholder { color: #a0aec0; }
 
.emp-cta-textarea {
    padding: 11px 14px 11px 40px;
    resize: vertical;
    min-height: 110px;
    line-height: 1.5;
}
 
/* ── Buttons ───────────────────────────────────────────────────── */
.emp-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
 
.emp-cta-btn-primary {
    width: 100%;
    padding: 14px;
    background: #0F0D6B;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .2s;
}
 
.emp-cta-btn-primary:hover {
    background: #0d47a1;
    transform: translateY(-1px);
}
 
.emp-cta-btn-whatsapp {
    width: 100%;
    padding: 14px;
    background: #fff;
    color: #25d366;
    border: 2px solid #25d366;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background .2s, transform .2s;
}
 
.emp-cta-btn-whatsapp:hover {
    background: #f0fff4;
    color: #1a9e4a;
    border-color: #1a9e4a;
    transform: translateY(-1px);
}
 
/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .emp-cta-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .emp-cta-heading { font-size: 28px; }
}
 
@media (max-width: 575px) {
    .emp-cta-row { grid-template-columns: 1fr; }
    .emp-cta-form-wrap { padding: 24px 20px; }
}




























 /* ═══════════════════════════════════════════════════════════
     CHALLENGE vs SOLUTION
  ═══════════════════════════════════════════════════════════ */
    .emp-challenge {
      padding: 80px 0;
      background: var(--white);
    }

    .emp-ch-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
    }

    @media(max-width:768px) {
      .emp-ch-grid {
        grid-template-columns: 1fr;
      }
    }

    .emp-ch-card {
      border-radius: 20px;
      padding: 44px 40px;
      position: relative;
      overflow: hidden;
    }

    .emp-ch-card.problem {
      background: #fff5f5;
      border: 1.5px solid #fecaca;
    }

    .emp-ch-card.solution {
      background: #0048001c;
      color: #fff;
    }

    .emp-ch-icon-wrap {
      width: 54px;
      height: 54px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      font-size: 1.5rem;
      margin-bottom: 20px;
    }

    .problem .emp-ch-icon-wrap {
      background: #fee2e2;
      color: #dc2626;
    }

    .solution .emp-ch-icon-wrap {
      background: #ffffff;
      color: green;
    }

    .emp-ch-card h3 {
      font-size: 1.35rem;
      font-weight: 800;
      margin: 0 0 10px;
    }

    .problem h3 {
      color: black;
    }

    .solution h3 {
      color: black;
    }

    .emp-ch-card p {
      font-size: .93rem;
      line-height: 1.65;
      margin: 0 0 24px;
    }

    .problem p {
      color: black;
    }

    .solution p {
      color: black;
    }

    .emp-ch-points {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .emp-ch-points li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: .9rem;
      line-height: 1.5;
    }

    .problem .emp-ch-points li {
      color: black;
    }

    .solution .emp-ch-points li {
      color: black;
    }

    .emp-ch-dot {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      font-size: .75rem;
      margin-top: 1px;
    }

    .problem .emp-ch-dot {
      background: #fecaca;
      color: #dc2626;
    }

    .solution .emp-ch-dot {
      background: white;
      color: green;
    }

























.event-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 20px 0;
}
.event-hero-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgb(36 36 36 / 90%);
    font-size: 14px;
    font-weight: 500;
}
.event-hero-meta-item i {
    font-size: 16px;
    color: #0F0D6B;
    flex-shrink: 0;
}



/* ================================================================
   Instructor Widget Card — centered design
   Add to your main frontend CSS file
   ================================================================ */

.instructor-widget-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    text-align: center;
    padding: 30px 20px 24px;
}

/* ── Avatar ───────────────────────────────────────────────────── */
.iwc-avatar-wrap {
    margin-bottom: 16px;
}

.iwc-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f0f0f0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

/* ── Body ─────────────────────────────────────────────────────── */
.iwc-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── Name ─────────────────────────────────────────────────────── */
.iwc-name {
    font-size: 16px;
    font-weight: 700;
    color: #212529;
    margin: 0 0 4px;
}

/* ── Designation ──────────────────────────────────────────────── */
.iwc-designation {
    font-size: 13px;
    color: #6c757d;
    margin: 0 0 12px;
}

/* ── Meta (qualification + experience) ───────────────────────── */
.iwc-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.iwc-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #555;
    background: #f5f7ff;
    padding: 4px 10px;
    border-radius: 20px;
}

.iwc-meta-item i {
    color: #1a6fc4;
    font-size: 13px;
}

.enroll_button {
    display: block;
    text-align: center;
}

.custom{
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, var(--accent-color),
 color-mix(in srgb, var(--accent-color), blue 20%));
    color: var(--contrast-color);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    transition: all 0.3s;
}







































:root {
    --adp: #103f90;
    --adp-dk: #0d47a1;
    --adp-lt: #e8f1fb;
    --adp-text: #1a2035;
    --adp-muted: #718096;
}

/* ── Overview ─────────────────────────────────────────────────── */
.adm-overview { padding: 80px 0; }
.adm-overview-badge { display: inline-block; background: var(--adp-lt); color: var(--adp); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:2px; padding:5px 14px; border-radius:20px; margin-bottom:16px; }
.adm-overview-title {font-size:38px;font-weight:800;color:var(--adp-text);line-height:1.2;margin-bottom:18px;}
.adm-overview-title span { color: var(--adp); }
.adm-overview-text {/* font-size:15px; */color:#4a5568;line-height:1.8;margin-bottom:32px;}
.adm-overview-stats { display:flex; align-items:center; gap:24px; }
.adm-stat { text-align:center; }
.adm-stat-num { display:block; font-size:28px; font-weight:800; color:var(--adp); }
.adm-stat-label { font-size:12px; color:var(--adp-muted); font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.adm-stat-divider { width:1px; height:40px; background:#e2e8f0; }
.adm-overview-visual { position:relative; height:320px; display:flex; align-items:center; justify-content:center; }
.adm-visual-ring { width:180px; height:180px; border-radius:50%; background:linear-gradient(135deg,var(--adp),var(--adp-dk)); display:flex; align-items:center; justify-content:center; font-size:72px; color:#fff; box-shadow:0 20px 50px rgba(26,111,196,.3); }
.adm-floating-badge { position:absolute; background:#fff; border-radius:30px; padding:10px 18px; font-size:13px; font-weight:600; color:var(--adp-text); box-shadow:0 8px 24px rgba(0,0,0,.1); display:flex; align-items:center; white-space:nowrap; }
.adm-floating-badge i { color:var(--adp); }
.adm-fb-1 { top:20px; left:0; }
.adm-fb-2 { top:50%; right:0; transform:translateY(-50%); }
.adm-fb-3 { bottom:20px; left:10px; }

/* ── Common Section ───────────────────────────────────────────── */
.adm-section { padding:80px 0; }
.adm-elig-section {/* background:#f8faff; */}
.adm-process-section {background: #f5faff;}
.adm-fi-section {background: #f5faff;}
.adm-policy-section { background:#fff; }
.adm-sec-header { margin-bottom:20px; }
.adm-sec-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--adp); display:block; margin-bottom:8px; }
.adm-sec-title {/* font-size:32px; */font-weight:800;color:var(--adp-text);}
.adm-sec-title span { color:var(--adp); }
.adm-sec-sub {/* font-size:15px; */color:var(--adp-muted);max-width:540px;margin:10px auto 0;line-height:1.7;}

/* ── Eligibility ─────────────────────────────────────────────── */
.adm-elig-card { background:#fff; border-radius:14px; padding:28px 22px; text-align:center; height:100%; border:1px solid #e8edf5; box-shadow:0 2px 12px rgba(0,0,0,.05); transition:transform .2s,box-shadow .2s; }
.adm-elig-card:hover { transform:translateY(-5px); box-shadow:0 12px 30px rgba(26,111,196,.12); }
.adm-elig-icon { width:60px; height:60px; background:var(--adp-lt); border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:24px; color:var(--adp); }
.adm-elig-card h5 {/* font-size:15px; */font-weight:700;color:var(--adp-text);margin-bottom:8px;}
.adm-elig-card p {/* font-size:13px; */color:var(--adp-muted);line-height:1.6;margin:0;}
.adm-elig-note { background:linear-gradient(135deg,#fff8e1,#fff3cd); border-left:4px solid #f59e0b; border-radius:0 8px 8px 0; padding:14px 20px; font-size:14px; color:#4a5568; margin-top:32px; display:flex; align-items:center; }
.adm-elig-note i { color:#f59e0b; }


/* ── Process Grid ─────────────────────────────────────────────── */
.adm-process-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
    margin-top: 48px;
    position: relative;
}
 
.adm-proc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}
 
/* Horizontal connector line between bubbles */
.adm-proc-connector {
    position: absolute;
    top: 36px; /* half of bubble height */
    right: -50%;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--adp), var(--adp-lt));
    z-index: 0;
}
 
.adm-proc-bubble {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #0F0D6B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
    box-shadow: 0 6px 20px rgba(26,111,196,.3);
    flex-shrink: 0;
    z-index: 1;
    margin-bottom: 16px;
}
 
.adm-proc-num {
    position: absolute;
    top: -14px;
    right: -18px;
    width: 35px;
    height: 35px;
    background: #e03f42;
    border-radius: 50%;
    font-size: 17px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border: 2px solid #fff;
}
 
.adm-proc-label strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--adp-text);
    margin-bottom: 4px;
}
 
.adm-proc-label span {
    font-size: 12px;
    color: var(--adp-muted);
    line-height: 1.4;
    display: block;
}
 
/* ── Mobile: vertical list with icon + text side by side ─────── */
@media (max-width: 991px) {
    .adm-process-grid {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
    .adm-proc-connector { display: none; }
    .adm-proc-item {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
        gap: 16px;
        background: #fff;
        border: 1px solid #e8edf5;
        border-radius: 12px;
        padding: 18px 16px;
        box-shadow: 0 2px 10px rgba(0,0,0,.05);
    }
    .adm-proc-bubble {
        margin-bottom: 0;
        flex-shrink: 0;
        width: 56px;
        height: 56px;
        font-size: 20px;
    }
    .adm-proc-num {
        width: 18px;
        height: 18px;
        font-size: 9px;
        top: -4px;
        right: -4px;
    }
    .adm-proc-label {
        padding-top: 4px;
    }
}
 
@media (max-width: 575px) {
    .adm-process-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ── Process ─────────────────────────────────────────────────── */
.adm-process-track { display:flex; align-items:center; justify-content:center; gap:0; margin-top:40px; }
.adm-process-step { display:flex; align-items:center; }
.adm-process-bubble { position:relative; width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--adp),var(--adp-dk)); display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; box-shadow:0 6px 20px rgba(26,111,196,.3); flex-shrink:0; }
.adm-process-num { position:absolute; top:-6px; right:-6px; width:22px; height:22px; background:#f59e0b; border-radius:50%; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; color:#fff; border:2px solid #fff; }
.adm-process-line { width:60px; height:3px; background:linear-gradient(90deg,var(--adp),var(--adp-lt)); flex-shrink:0; }
.adm-process-labels { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:20px; }
.adm-process-label { text-align:center; padding:0 4px; }
.adm-process-label strong { display:block; font-size:13px; color:var(--adp-text); font-weight:700; margin-bottom:4px; }
.adm-process-label span { font-size:11px; color:var(--adp-muted); line-height:1.4; display:block; }
.adm-open-note { font-size:13px; color:var(--adp-muted); }

/* ── Fees & Intake ───────────────────────────────────────────── */
.adm-fi-card { background:#fff; border-radius:16px; padding:36px 32px; height:100%; border:1px solid #e8edf5; box-shadow:0 4px 20px rgba(0,0,0,.06); }
.adm-fi-card--alt {/* background:linear-gradient(135deg,#f0f7ff,#e8f1fb); */border-color:#c8dff5;}
.adm-fi-header { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.adm-fi-icon { width:52px; height:52px; background:var(--adp-lt); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--adp); flex-shrink:0; }
.adm-fi-title { font-size:20px; font-weight:800; color:var(--adp-text); margin:0; }
.adm-fi-desc {/* font-size:14px; */color:#4a5568;line-height:1.7;margin-bottom:20px;}
.adm-fi-list { list-style:none; padding:0; margin:0 0 20px; }
.adm-fi-list li { display:flex; align-items:center; gap:10px; font-size:14px; color:#4a5568; padding:7px 0; border-bottom:1px solid rgba(0,0,0,.04); }
.adm-fi-list li:last-child { border:none; }
.adm-fi-list i { color:var(--adp); font-size:16px; flex-shrink:0; }
.adm-fi-link { font-size:14px; font-weight:700; color:var(--adp); text-decoration:none; display:inline-flex; align-items:center; }
.adm-fi-link:hover { text-decoration:underline; }
.adm-fi-alert { background:#fff8e1; border-radius:8px; padding:12px 16px; font-size:13px; color:#4a5568; display:flex; align-items:center; }
.adm-fi-alert i { color:#f59e0b; flex-shrink:0; }

/* ── Policies ────────────────────────────────────────────────── */
.adm-policy-grid { display:flex; flex-direction:column; gap:16px; margin-top:40px; max-width:800px; margin-left:auto; margin-right:auto; }
.adm-policy-item { display:flex; align-items:flex-start; gap:20px; background:#fff; border:1px solid #e8edf5; border-radius:12px; padding:22px 24px; box-shadow:0 2px 10px rgba(0,0,0,.04); transition:transform .2s,box-shadow .2s; }
.adm-policy-item:hover { transform:translateX(4px); box-shadow:0 6px 20px rgba(26,111,196,.1); border-color:#c8dff5; }
.adm-policy-icon { width:48px; height:48px; background:var(--adp-lt); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--adp); flex-shrink:0; }
.adm-policy-item h5 { font-size:15px; font-weight:700; color:var(--adp-text); margin:0 0 4px; }
.adm-policy-item p { font-size:13px; color:var(--adp-muted); line-height:1.5; margin:0; }

/* ── CTA ─────────────────────────────────────────────────────── */
.adm-cta {padding:80px 0;background: #210474;}
.adm-cta-box { display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.adm-cta-left h2 { font-size:30px; font-weight:800; color:#fff; margin-bottom:12px; }
.adm-cta-left p { font-size:15px; color:rgba(255,255,255,.8); margin:0; line-height:1.7; }
.adm-cta-right { display:flex; flex-direction:column; gap:14px; flex-shrink:0; }
.adm-cta-primary { background:#fff; color:var(--adp); padding:15px 32px; border-radius:8px; font-weight:700; font-size:15px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; transition:transform .2s,box-shadow .2s; }
.adm-cta-primary:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.2); color:var(--adp-dk); }
.adm-cta-secondary { background:transparent; color:#fff; padding:15px 32px; border-radius:8px; font-weight:700; font-size:15px; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; border:2px solid rgba(255,255,255,.5); transition:all .2s; }
.adm-cta-secondary:hover { background:rgba(255,255,255,.1); border-color:#fff; color:#fff; }

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:992px) {
    .adm-overview-title { font-size:28px; }
    .adm-overview-visual { height:240px; }
    .adm-visual-ring { width:130px; height:130px; font-size:52px; }
    .adm-process-labels { grid-template-columns:repeat(3,1fr); }
    .adm-cta-box { flex-direction:column; text-align:center; }
    .adm-cta-right { flex-direction:row; }
}
@media(max-width:768px) {
    .adm-overview-stats { flex-wrap:wrap; }
    .adm-process-track { flex-wrap:wrap; gap:12px; }
    .adm-process-line { display:none; }
    .adm-process-labels { grid-template-columns:repeat(2,1fr); }
    .adm-sec-title { font-size:24px; }
    .adm-cta-right { flex-direction:column; }
}
@media(max-width:480px) {
    .adm-process-labels { grid-template-columns:1fr; }
}





































.hero-text h2 {
    font-weight: bold;
}



.stat-icon {
    font-size: 2.5rem;
    color: #0F0D6B;
    display: block;
    margin-bottom: 0.75rem;
}




/* ── Top brand row border ── */
.footer-brand-row-wrap {
  border-bottom: none;
}

/* ── Contact list ── */
.footer-contact-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .84rem;
  color: rgba(255,255,255,.55);
}

.footer-contact-list li > i {
  font-size: .9rem;
  color: #7eb3ff;
  margin-top: .15rem;
  flex-shrink: 0;
}

.footer-contact-list li div {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.footer-contact-list li a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .2s;
}

.footer-contact-list li a:hover { color: #fff; }

/* ── Social desc ── */
.footer-social-desc {
  font-size: .8rem;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* ── Social icon buttons ── */
.footer-social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.footer-social-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: rgba(255,255,255,.7) !important;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  text-decoration: none;
  transition: background .2s, border-color .2s, color .2s, transform .2s;
}

.footer-social-btn:hover {
  background: #2d5bbf;
  border-color: #2d5bbf;
  color: #fff !important;
  transform: translateY(-3px);
}


.footer-social-btn span {
  display: none !important;
}


























































.btn-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .875rem;
  color: #0F0D6B;
  background: transparent;
  border: none;
  padding: 0;
  text-decoration: none;
  transition: gap .2s ease, color .2s ease;
}

.btn-link-arrow:hover {
  color: #1a2e5a;
  gap: .65rem;
}

.btn-link-arrow i {
  font-size: .85rem;
  transition: transform .2s ease;
}

.btn-link-arrow:hover i {
  transform: translateX(3px);
}





























/* ── Programs Tab Nav ── */
.programs-col-heading {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-color); /* your red/blue accent */
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.programs-tab-nav {
  border-bottom: none !important;
  gap: 0;
  display: flex !important;
  width: 100%;
}

.programs-tab-nav .nav-item {
  flex: 1;
}

.programs-tab-nav .nav-link {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .9rem;
  color: #4a5a7a;
  background: #e8eef8;
  border: none !important;
  border-radius: 0 !important;
  padding: .8rem 1rem;
  width: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  position: relative;
  transition: color .2s ease, background .2s ease;
}

.programs-tab-nav .nav-link:hover {
  background: #d0dff5;
  color: #2d5bbf;
}

/* Active tab — blue + triangle pointer */
.programs-tab-nav .nav-link.active {
  background: linear-gradient(135deg, #0F0D6B 0%, #0F0D6B 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Triangle arrow at bottom of active tab */
.programs-tab-nav .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #0F0D6B;
  z-index: 10;
}

/* Tab content panel — add top gap for the arrow */
.programs-tab-content {
  background: #fff;
  border: 1.5px solid #d0dff5;
  border-radius: 0 0 .85rem .85rem;
  padding: 2rem 2.5rem 1.6rem;
  margin-top: 10px;
  box-shadow: 0 6px 24px rgba(45,91,191,.08);
}

/* ── Tab Content Panel ── */
.programs-tab-content {
  background: #fff;
  border: 1.5px solid #d0dff5;
  border-top: none;
  border-radius: 0 0 .85rem .85rem;
  padding: 2rem 2.5rem 1.6rem;
  box-shadow: 0 6px 24px rgba(45,91,191,.08);
}

/* ── List ── */
.programs-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid #e8eef8;
  padding-bottom: 1.5rem;
}

.programs-list li {
  font-family: "Poppins", sans-serif;
  font-size: .95rem;
  font-weight: 500;
  color: #1a2e5a;
  padding: .5rem 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  border-bottom: 1px dashed #e8eef8;
  transition: color .2s, gap .2s;
  cursor: default;
}

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

.programs-list li:hover { color: #2d5bbf; gap: .85rem; }

.programs-list li i {
  font-size: .7rem;
  color: #2d5bbf;
  flex-shrink: 0;
}

/* ── Footer button ── */
.programs-tab-footer { text-align: center; }

.programs-explore-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #0F0D6B;
  color: #fff !important;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: .9rem;
  padding: .65rem 1.8rem;
  border-radius: 40px;
  text-decoration: none;
  transition: opacity .2s, transform .2s;
}

.programs-explore-btn:hover { opacity: .88; transform: translateX(2px); }

@media (max-width: 767px) {
  .programs-tab-nav {
    flex-wrap: wrap !important;
  }

  .programs-tab-nav .nav-item {
    flex: 0 0 50%;
    width: 50%;
  }

  .programs-tab-nav .nav-link {
    font-size: .78rem;
    padding: .7rem .5rem;
  }

  .programs-tab-content {
    padding: 1.5rem 1.2rem;
  }
}

@media (max-width: 480px) {
  .programs-tab-nav .nav-item {
    flex: 0 0 100%;
    width: 100%;
  }
}




































.cta-section {
  background: #e03f42;
  padding: 5rem 1rem;
  position: relative;
  overflow: hidden;
}



.cta-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

/* ── Inner ── */
.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

/* ── Icon ── */
.cta-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  color: white;
  margin: 0 auto 1.5rem;
}

/* ── Title ── */
.cta-title {
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: white;
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -.5px;
}

.cta-title span {
  background: linear-gradient(90deg, #7eb3ff 0%, #a5c8ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Description ── */
.cta-desc {
  font-size: 1rem;
  color: white;
  line-height: 1.75;
  margin-bottom: 2rem;
}

/* ── Buttons ── */
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

.cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: #fff;
  color: #0b1628 !important;
  font-weight: 700;
  font-size: .9rem;
  padding: .72rem 1.6rem;
  border-radius: .5rem;
  text-decoration: none;
  border: none;
  transition: background .2s, transform .2s, box-shadow .2s;
}

.cta-btn-primary:hover {
  background: #e8f0ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,255,255,.12);
}

.cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: linear-gradient(135deg, #2d5bbf 0%, #3d6fd4 100%);
  color: #fff !important;
  font-weight: 600;
  font-size: .9rem;
  padding: .72rem 1.6rem;
  border-radius: .5rem;
  text-decoration: none;
  border: none;
  transition: opacity .2s, transform .2s, box-shadow .2s;
}

.cta-btn-secondary:hover {
  opacity: .88;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(45,91,191,.4);
}

.cta-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: transparent;
  color: white;
  font-weight: 600;
  font-size: .9rem;
  padding: .7rem 1.6rem;
  border-radius: 1.5rem;
  text-decoration: none;
  border: 1.5px solid rgb(255 255 255);
  transition: border-color .2s, color .2s, background .2s, transform .2s;
}

.cta-btn-ghost:hover {
  border-color: rgba(255,255,255,.5);
  color: #fff !important;
  background: rgba(255,255,255,.06);
  transform: translateY(-2px);
}

@media (max-width: 576px) {
  .cta-buttons { flex-direction: column; align-items: center; }
  .cta-btn-primary,
  .cta-btn-secondary,
  .cta-btn-ghost { width: 100%; justify-content: center; }

  .top-bar{
    display: none;
  }
}












































.comm-section {
  background: #0F0D6B;
  padding: 2rem 1rem;
}

.comm-inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

/* Left */
.comm-left { flex: 1; min-width: 220px; }

.comm-title {
  font-weight: 700;
  font-size: 1.3rem;
  color: #fff;
  margin-bottom: .65rem;
  line-height: 1.3;
}

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

.comm-bullets li {
  font-size: .85rem;
  color: rgba(255,255,255,.85);
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .3rem;
}

.comm-bullets li i {
  font-size: .75rem;
  color: #6ee7b7;
  flex-shrink: 0;
}

/* Right: form */
.comm-right { flex: 2; min-width: 280px; }

.comm-fields {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.comm-input {
  flex: 1;
  min-width: 120px;
  background: #fff !important;
  border: none !important;
  border-radius: .35rem !important;
  color: #333 !important;
  font-size: .875rem !important;
  padding: .6rem .9rem !important;
  outline: none;
}

.comm-input::placeholder { color: #999 !important; }

.comm-input:focus {
  box-shadow: 0 0 0 2px rgba(255,255,255,.5) !important;
}

.comm-btn {
  background: #fff;
  color: var(--casht-blue) !important;
  font-weight: 700;
  font-size: .875rem;
  padding: .6rem 1.4rem;
  border-radius: .35rem;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, transform .2s;
  flex-shrink: 0;
}

.comm-btn:hover {
  background: #dce8ff;
  transform: translateY(-1px);
}

/* Success */
.comm-success {
  display: none;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  font-weight: 600;
  color: #6ee7b7;
}

.comm-success i { font-size: 1.2rem; }

@media (max-width: 767px) {
  .comm-inner { flex-direction: column; align-items: flex-start; gap: 1.2rem; }
  .comm-fields { flex-direction: column; }
  .comm-input, .comm-btn { width: 100%; flex: none; }
}


































/* ── Section ── */
.ea-section {
  background: #f5faff;
  padding: 5rem 1rem;
}

.ea-section-title {
  font-weight: 700;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  color: var(--casht-navy);
}

.ea-section-sub {
  font-size: .97rem;
  color: var(--casht-muted);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

.ea-divider {
  width: 48px; height: 3px;
  background: linear-gradient(90deg, var(--casht-blue), var(--casht-blue-mid));
  border-radius: 2px;
  margin: .9rem auto 0;
}

/* ══════════════════════════
   EVENTS PANEL
══════════════════════════ */
.ea-panel {
  background: #fff;
  border: 1.5px solid rgba(61,111,212,.11);
  border-radius: .9rem;
  box-shadow: 0 4px 24px rgba(45,91,191,.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ea-panel__header {
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  border-bottom: 1.5px solid rgba(61,111,212,.09);
}

.ea-panel__header--events {
  background: #0F0D6B;
}

.ea-panel__heading {
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.ea-panel__view-all {
  font-size: .75rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .25rem;
  white-space: nowrap;
  transition: color .2s;
}

.ea-panel__view-all:hover { color: #fff; }

.ea-panel__body { flex: 1; }

/* Featured Event */
.ea-event--featured {
  display: block;
  text-decoration: none;
  border-bottom: 1px solid rgba(61,111,212,.09);
  transition: background .2s;
}

.ea-event--featured:hover { background: #f4f8ff; }

.ea-event__featured-img {
  position: relative;
  height: 190px;
  overflow: hidden;
}

.ea-event__featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.ea-event--featured:hover .ea-event__featured-img img {
  transform: scale(1.04);
}

.ea-event__featured-badge {
  position: absolute;
  top: .75rem; left: .75rem;
  background: linear-gradient(135deg, var(--casht-blue), var(--casht-blue-mid));
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: .25rem .7rem;
  border-radius: 2rem;
}

.ea-event__featured-date {
  position: absolute;
  bottom: .75rem; right: .75rem;
  background: rgba(255,255,255,.95);
  border-radius: .5rem;
  padding: .35rem .6rem;
  text-align: center;
  line-height: 1.1;
  min-width: 44px;
}

.ea-event__featured-body {
  padding: 1rem 1.5rem 1.2rem;
}

.ea-event__featured-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--casht-navy);
  margin: .35rem 0 .5rem;
  line-height: 1.35;
}

.ea-event__featured-desc {
  font-size: .83rem;
  color: var(--casht-muted);
  line-height: 1.65;
  margin-bottom: .65rem;
}

/* Thumb Events */
.ea-event--thumb {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: .85rem 1.5rem;
  border-bottom: 1px solid rgba(61,111,212,.07);
  text-decoration: none;
  transition: background .2s;
}

.ea-event--thumb:last-child { border-bottom: none; }
.ea-event--thumb:hover { background: #f4f8ff; }

.ea-event__thumb {
  flex-shrink: 0;
  width: 80px;
  height: 64px;
  border-radius: .5rem;
  overflow: hidden;
  position: relative;
}

.ea-event__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.ea-event--thumb:hover .ea-event__thumb img { transform: scale(1.08); }

.ea-event__thumb-date {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(26,46,90,.75);
  text-align: center;
  padding: .1rem 0;
  line-height: 1.1;
}

.ea-event__thumb-date .ea-event__day {
  font-size: .9rem;
  font-weight: 700;
  color: #fff;
  display: block;
}

.ea-event__thumb-date .ea-event__month {
  font-size: .55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(255,255,255,.8);
}

/* Shared event date block (featured) */
.ea-event__day {
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--casht-blue);
  display: block;
}

.ea-event__month {
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--casht-muted);
}

.ea-event__tag {
  display: inline-block;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--casht-blue);
  background: rgba(45,91,191,.08);
  border-radius: 2rem;
  padding: .15rem .6rem;
  margin-bottom: .25rem;
}

.ea-event__title {
  font-weight: 600;
  font-size: .88rem;
  color: var(--casht-navy);
  line-height: 1.4;
  margin-bottom: .25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ea-event__meta {
  font-size: .73rem;
  color: var(--casht-muted);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ea-event__meta span {
  display: flex;
  align-items: center;
  gap: .25rem;
}

.ea-event__meta i { font-size: .78rem; color: var(--casht-blue); }

/* Panel footer */
.ea-panel__footer {
  padding: .9rem 1.5rem;
  border-top: 1.5px solid rgba(61,111,212,.09);
  background: #fafcff;
}

.ea-panel__footer-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--casht-blue);
  text-decoration: none;
  transition: gap .2s, color .2s;
}

.ea-panel__footer-btn:hover { color: var(--casht-navy); gap: .6rem; }

/* ══════════════════════════
   ANNOUNCEMENTS PANEL
══════════════════════════ */
.ea-announce-panel {
  background: #fff;
  border: 1.5px solid rgba(61,111,212,.11);
  border-radius: .9rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 24px rgba(45,91,191,.08);
}

.ea-announce-panel__header {
  padding: 1.1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  border-bottom: 1px solid rgba(61,111,212,.09);
  background: #0F0D6B;
}

.ea-announce-panel__header i { font-size: 1.1rem; color: #fff; }

.ea-announce-panel__body { flex: 1; padding: .4rem 0; }

.ea-ann-item {
  display: block;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(61,111,212,.07);
  text-decoration: none;
  transition: background .2s;
  position: relative;
}

.ea-ann-item:last-child { border-bottom: none; }
.ea-ann-item:hover { background: #f4f8ff; }

.ea-ann-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--casht-blue);
  opacity: 0;
  transition: opacity .2s;
}

.ea-ann-item:hover::before { opacity: 1; }

.ea-ann-item__label {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  border-radius: 2rem;
  padding: .15rem .65rem;
  margin-bottom: .4rem;
}

.ea-ann-item__label--new      { color: #1a6e3d; background: rgba(26,110,61,.10); }
.ea-ann-item__label--deadline { color: #c0420a; background: rgba(192,66,10,.10); }
.ea-ann-item__label--info     { color: var(--casht-blue); background: rgba(45,91,191,.09); }
.ea-ann-item__label--update   { color: #7a5200; background: rgba(122,82,0,.10); }

.ea-ann-item__title {
  font-weight: 500;
  font-size: .875rem;
  color: var(--casht-navy);
  line-height: 1.45;
  margin-bottom: .5rem;
}

.ea-ann-item__footer {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  color: var(--casht-muted);
}

.ea-ann-item__footer i { font-size: .8rem; color: var(--casht-blue); }

.ea-announce-panel__footer {
  padding: .9rem 1.5rem;
  border-top: 1px solid rgba(61,111,212,.09);
  background: #fafcff;
}

.ea-announce-panel__footer .ea-panel__footer-btn {
  color: var(--casht-blue);
}

.ea-announce-panel__footer .ea-panel__footer-btn:hover { color: var(--casht-navy); }



























/* ── Section ── */
.news-section {
    background: white;
    padding: 5rem 1rem;
}

/* ── Section Header ── */
.news-header-label {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--casht-blue);
    background: rgba(45, 91, 191, .08);
    border-radius: 2rem;
    padding: .3rem 1rem;
    margin-bottom: .9rem;
}

.news-title {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    color: #0F0D6B;
    margin-bottom: .5rem;
}

.news-subtitle {
    font-size: .97rem;
    color: var(--casht-muted);
    line-height: 1.7;
    max-width: 520px;
}

/* ── News Card ── */
.news-card {
    background: #fff;
    border: 1.5px solid rgba(61, 111, 212, .11);
    border-radius: var(--radius-card);
    box-shadow: 0 4px 20px rgba(45, 91, 191, .07);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(45, 91, 191, .14);
}

/* thumbnail */
.news-card__thumb {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.news-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.news-card:hover .news-card__thumb img {
    transform: scale(1.06);
}

/* category badge on image */
.news-card__badge {
    position: absolute;
    top: .9rem;
    left: .9rem;
    background: #e03f42;
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: .28rem .75rem;
    border-radius: 2rem;
}

/* body */
.news-card__body {
    padding: 1.4rem 1.5rem 1.6rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-card__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .78rem;
    color: var(--casht-muted);
    margin-bottom: .8rem;
}

.news-card__meta span {
    display: flex;
    align-items: center;
    gap: .3rem;
}

.news-card__meta i {
    font-size: .85rem;
    color: var(--casht-blue);
}

.news-card__title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--casht-navy);
    line-height: 1.45;
    margin-bottom: .65rem;
    flex: 1;
}

.news-card__excerpt {
    font-size: .865rem;
    color: var(--casht-muted);
    line-height: 1.65;
    margin-bottom: 1.2rem;
}

/* read more link */
.news-card__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .85rem;
    font-weight: 600;
    color: #0F0D6B;
    text-decoration: none;
    transition: gap .2s ease, color .2s ease;
}

.news-card__link:hover {
    color: var(--casht-navy);
    gap: .55rem;
}

.news-card__link i {
    font-size: .9rem;
}

/* ── Divider line under header ── */
.news-divider {
    width: 52px;
    height: 3px;
    background: linear-gradient(90deg, var(--casht-blue), var(--casht-blue-mid));
    border-radius: 2px;
    margin-top: 1rem;
}

/* ── CTA Button ── */
.news-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: #0F0D6B;
    color: #fff !important;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .3px;
    padding: .65rem 1.6rem;
    border-radius: 50px;
    text-decoration: none;
    border: none;
    margin-top: 2.8rem;
    transition: opacity .2s ease, transform .2s ease;
}

.news-btn:hover {
    opacity: .88;
    transform: translateX(2px);
}

/* ── Row gutter ── */
.news-row {
    --bs-gutter-x: 1.3rem;
    --bs-gutter-y: 1.3rem;
}


































/* ── Section ── */
.sp-section {
    background: #f5faff;
    padding: 5rem 1rem 4rem;
    overflow: hidden;
}

/* ── Header ── */
.sp-title {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    color: var(--casht-navy);
    margin-bottom: .85rem;
}

.sp-desc {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--casht-muted);
    max-width: 680px;
    margin: 0 auto 3rem;
}

/* ── Partner Type Cards ── */
.sp-card {
    background: #ffffff;
    border: 1.5px solid rgba(61, 111, 212, .12);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(45, 91, 191, .08);
    padding: 2rem 1.5rem 1.8rem;
    text-align: center;
    height: 100%;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}

.sp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 36px rgba(45, 91, 191, .14);
}

.sp-card__icon {
        width: 60PX;
    height: 60px;
    border-radius: 50%;
    background: #0F0D6B;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    margin: 0 auto 1.2rem;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.sp-card:hover .sp-card__icon {
    background: #0F0D6B;
    color: white;
    transform: scale(1.08);
}

.sp-card__title {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--casht-navy);
    margin-bottom: .6rem;
}

.sp-card__text {
    font-size: .875rem;
    color: var(--casht-muted);
    line-height: 1.65;
    margin: 0;
}

/* ── Trusted Partners Label ── */
.sp-trusted-label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--casht-navy);
    margin-bottom: 1.4rem;
}

/* ── Infinite Marquee Carousel ── */
.sp-marquee-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin-top: 2.8rem;
}

/* fade edges */
.sp-marquee-wrap::before,
.sp-marquee-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.sp-marquee-wrap::before {
    left: 0;
    background: linear-gradient(90deg, #eef4fc 0%, transparent 100%);
}

.sp-marquee-wrap::after {
    right: 0;
    background: linear-gradient(270deg, #eef4fc 0%, transparent 100%);
}

.sp-marquee-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: marquee 28s linear infinite;
}

.sp-marquee-wrap:hover .sp-marquee-track {
    animation-play-state: paused;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.sp-logo-item {
    flex-shrink: 0;
    background: #fff;
    border: 1.5px solid rgba(61, 111, 212, .12);
    border-radius: .7rem;
    padding: .8rem 1.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 140px;
    /* height: 64px; */
    box-shadow: 0 2px 10px rgba(45, 91, 191, .07);
    transition: box-shadow .2s ease, transform .2s ease;
    cursor: default;
}

.sp-logo-item:hover {
    box-shadow: 0 6px 20px rgba(45, 91, 191, .14);
    transform: translateY(-2px);
}

.sp-logo-item span {
    font-weight: 700;
    font-size: 1rem;
    color: var(--casht-navy);
    letter-spacing: .5px;
    white-space: nowrap;
}

.sp-logo-item .sp-logo-sub {
    font-weight: 400;
    font-size: .65rem;
    color: var(--casht-muted);
    letter-spacing: .3px;
    line-height: 1.2;
}

/* ── CTA Button ── */
.sp-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: linear-gradient(135deg, #0F0D6B 0%, #0F0D6B 100%);
    color: #fff !important;
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .3px;
    padding: .65rem 1.6rem;
    border-radius: 50px;
    text-decoration: none;
    border: none;
    margin-top: 2.4rem;
    transition: opacity .2s ease, transform .2s ease;
}

.sp-btn:hover {
    opacity: .88;
    transform: translateX(2px);
}

/* ── Row gutter ── */
.sp-cards-row {
    --bs-gutter-x: 1.2rem;
    --bs-gutter-y: 1.2rem;
}




















/* ── Section ── */
.adv-section {
    background: linear-gradient(160deg, #f0f6ff 0%, #e4edf9 60%, #d6e5f6 100%);
    padding: 5rem 1rem;
}

.adv-title {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    color: var(--casht-navy);
    margin-bottom: 2.8rem;
}

/* ── Card ── */
.adv-card {
    background: #ffffff;
    border: 1.5px solid rgba(61, 111, 212, .12);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(45, 91, 191, .08);
    padding: 1.4rem 1.6rem 1.4rem 1.4rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    height: 100%;
    transition: transform .25s ease, box-shadow .25s ease;
    overflow: hidden;
    position: relative;
}

.adv-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--casht-blue) 0%, var(--casht-blue-mid) 100%);
    border-radius: 4px 0 0 4px;
    opacity: 0;
    transition: opacity .25s ease;
}

.adv-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(45, 91, 191, .14);
}

.adv-card:hover::before {
    opacity: 1;
}

/* ── Icon bubble ── */
.adv-card__icon {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dce8f8 0%, #c5dafc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    color: #0F0D6B;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.adv-card:hover .adv-card__icon {
    background: linear-gradient(135deg, #dce8f8 0%, #c5dafc 100%);
    color: #e03f42;
    transform: scale(1.08);
}

/* ── Text ── */
.adv-card__body {
    flex: 1;
}

.adv-card__title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--casht-navy);
    margin-bottom: .3rem;
    line-height: 1.35;
}

.adv-card__text {
    font-size: .875rem;
    color: var(--casht-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── Grid gutter ── */
.adv-grid .row {
    --bs-gutter-x: 1.2rem;
    --bs-gutter-y: 1.2rem;
}


































/* ── Section ── */
.lia-section {
    background: #f5faff;
    padding: 5rem 1rem;
}

.lia-title {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    color: var(--casht-navy);
    margin-bottom: .85rem;
}

.lia-desc {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--casht-muted);
    max-width: 620px;
    margin: 0 auto 2.6rem;
}

/* ── Masonry Grid ── */
.lia-grid {
    columns: 3;
    column-gap: 10px;
}

.lia-cell {
    break-inside: avoid;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.lia-cell img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform .4s ease;
}

.lia-cell:hover img {
    transform: scale(1.05);
}

/* video cell overlay stays the same */
.lia-cell--video img {
    filter: brightness(.55);
}

@media (max-width: 767px) {
    .lia-grid {
        columns: 2;
    }
}

@media (max-width: 480px) {
    .lia-grid {
        columns: 1;
    }
}

/* ── Center video cell ── */
.lia-cell--video {
    grid-column: 2;
    grid-row: 2;
    cursor: pointer;
}

.lia-cell--video img {
    filter: brightness(.55);
}

.lia-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    color: #fff;
    text-align: center;
    padding: 1rem;
    pointer-events: none;
}

.lia-play-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .18);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

.lia-cell--video:hover .lia-play-btn {
    background: rgba(255, 255, 255, .32);
}

.lia-play-btn svg {
    width: 20px;
    height: 20px;
    fill: #fff;
    margin-left: 3px;
}

.lia-video-label {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .8px;
    text-transform: uppercase;
    opacity: .9;
    line-height: 1.4;
}

.lia-video-label strong {
    font-size: 1rem;
    font-weight: 700;
    display: block;
    letter-spacing: 0;
    text-transform: none;
}

/* ── Button ── */
.lia-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: #0F0D6B;
    color: #fff !important;
    font-family: var(--default-font);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .3px;
    padding: .65rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    border: none;
    margin-top: 2rem;
    transition: opacity .2s ease, transform .2s ease;
}

.lia-btn:hover {
    opacity: .88;
    transform: translateX(2px);
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .lia-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(5, 160px);
    }

    .lia-cell--video {
        grid-column: 1 / -1;
        grid-row: 3;
    }
}

@media (max-width: 480px) {
    .lia-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(9, 180px);
    }

    .lia-cell--video {
        grid-column: 1;
        grid-row: 5;
    }
}



/* ── Carousel (new only) ── */
.lia-carousel {
    position: relative;
    overflow: hidden;
}

.lia-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}
.lia-slide.active {
    display: block;
    opacity: 1;
}
.lia-slide.fade-out {
    display: block;
    opacity: 0;
}

.lia-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
.lia-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: #ccc;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, transform 0.3s ease;
}
.lia-dot.active {
    background: #0F0D6B;
    transform: scale(1.3);
}



























/* ── Section wrapper ───────────────────────────────────────── */
.casht-welcome {
    background: linear-gradient(160deg, #f0f6ff 0%, #e4edf9 60%, #d6e5f6 100%);
    padding: 4.5rem 1rem 5rem;

    color: var(--casht-text);
    position: relative;
    overflow: hidden;
}

/* subtle decorative blob */
.casht-welcome::before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(61, 111, 212, .13) 0%, transparent 70%);
    top: -140px;
    right: -120px;
    border-radius: 50%;
    pointer-events: none;
}

.casht-welcome::after {
    content: '';
    position: absolute;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(61, 111, 212, .09) 0%, transparent 70%);
    bottom: -100px;
    left: -80px;
    border-radius: 50%;
    pointer-events: none;
}

/* ── Headings ──────────────────────────────────────────────── */
.casht-heading {

    font-weight: 700;
    color: var(--casht-navy);
    font-size: clamp(1.8rem, 4vw, 2.55rem);
    letter-spacing: -.5px;
    margin-bottom: 1rem;
}

.casht-lead {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--casht-muted);
    max-width: 660px;
    margin: 0 auto;
}

.casht-lead+.casht-lead {
    margin-top: .75rem;
}

.casht-divider {
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg, var(--casht-blue), var(--casht-blue-mid));
    border-radius: 2px;
    margin: 1.6rem auto 0;
}

/* ── Cards ─────────────────────────────────────────────────── */
.casht-card {
    background: var(--casht-white);
    border: 1.5px solid rgba(61, 111, 212, .13);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 2.4rem 2rem 2rem;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
    height: 100%;
}

.casht-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(45, 91, 191, .16);
}

/* icon bubble */
.casht-card__icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dce8f8 0%, #c5dafc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 2rem;
}

.casht-card__title {

    font-size: 1.25rem;
    font-weight: 700;
    color: var(--casht-blue);
    margin-bottom: .7rem;
}

.casht-card__text {
    font-size: .97rem;
    line-height: 1.7;
    color: var(--casht-muted);
    margin-bottom: 1.5rem;
}

/* ── Button ────────────────────────────────────────────────── */
.casht-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: linear-gradient(135deg, var(--casht-blue) 0%, var(--casht-blue-mid) 100%);
    color: var(--casht-white) !important;

    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .3px;
    padding: .6rem 1.4rem;
    border-radius: 6px;
    border: none;
    text-decoration: none;
    transition: opacity .2s ease, transform .2s ease;
}

.casht-btn:hover {
    opacity: .88;
    transform: translateX(2px);
}

.casht-btn__arrow {
    font-size: 1rem;
    line-height: 1;
}

/* ── Cards row spacing ─────────────────────────────────────── */
.casht-cards-row {
    margin-top: 2.8rem;
}









/*-----------------------------------------------------
-------------------------------------------------------
# CASHT MAIN WEBSITE STYEL START HERE
------------------------------------------------------
------------------------------------------------------*/
.casht_home_intro {
    position: relative;
    overflow: hidden;
}

/* Title */

.casht_intro_title {
    font-weight: 700;
}

/* Text */

.casht_intro_text {
    color: var(--default-color);
    line-height: 1.7;
}

/* Cards */

.casht_intro_card {
    background: #fff;
    padding: 35px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    height: 100%;
    transition: 0.3s;
}

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

/* Icon */

.casht_intro_icon {
    font-size: 36px;
    color: var(--accent-color);
}

/* Card title */

.casht_card_title {
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 10px;
}

/* Card text */

.casht_card_text {
    font-size: 18px;
    margin-bottom: 20px;
}



/* casht Mission Section Cards */

.casht_mission-card {
    background: var(--primary-red-color);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    transition: all .3s ease;
    color: #fff !important;
}

.casht_mission-card h3 {
    color: #fff !important;
}

.casht_mission-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* casht Icon Circle */

.casht_icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    font-size: 28px;
    background: #f5f7fb;
    color: var(--accent-color);
}


/*--------------------------------------------
# SCHOOL SLIDER ON CASHT HOME PAGE
----------------------------------------------*/

/* Make every slide stretch to same height */
.schools-slider {
    display: flex;
}

/* Card layout */
.school-card {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.swiper-pagination {
    bottom: 0 !important;
}

.swiper-pagination-bullet .swiper-pagination-bullet-active {
    color: var(--accent-color) !important;
    background-color: var(--accent-color) !important;
}

.schools-slider {
    padding-bottom: 40px !important;
    /* space for pagination */
}

/* Image fixed height */
.school-card img {
    height: 180px;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
}

/* Limit description to 3 lines and add ... */
.school-card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;

    line-clamp: 2;
    /* standard property */
    -webkit-line-clamp: 2;
    /* chrome/safari support */

    overflow: hidden;
}


/* FOUNDER MESSAGE ON CASHT HOME PAGE */
/* Remove stretch — each col manages its own height */
.leadership-section .row {
    align-items: flex-start;
}

/* Image wrapper — fixed height, never grows */
.leadership-img-wrapper {
    position: relative;
    height: 545px;        /* fixed, never changes */
    overflow: hidden;
    border-radius: 10px;  /* all corners rounded, independent */
}

.leadership-img {
    width: 100%;
    height: 484px;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/* Name / role bar at bottom of image */
.leader-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    color: black;
    padding: 12px 18px;
}

.leader-name {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 2px;
    color: #e03f42;
}

.leader-role {
    font-size: 17px;
    margin: 0;
    color: black;
}

/* Right panel — independent, grows on expand */
.leader-panel {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;  /* all corners rounded, independent */
    padding: 35px 40px;
    display: flex;
    flex-direction: column;
}

/* "LEADERSHIP MESSAGE" heading */
.leader-section-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #e03f42;
    border-bottom: 5px solid #e03f42;
    padding-bottom: 8px;
    margin-bottom: 20px;
    display: inline-block;
    width: 300px;
}

/* Message text — collapsed by default */
.leader-message {
    max-height: 210px;
    overflow: hidden;
    transition: max-height 0.6s ease;
    line-height: 1.8;
    font-size: 0.95rem;
    color: #333;
}

.leader-message.open {
    max-height: 1200px;
}

/* Blockquote */
.leader-quote {
    border-left: 4px solid #cc0000;
    padding: 10px 16px;
    margin: 20px 0 12px 0;
    background: transparent;
    font-size: 20px;
    line-height: 1.65;
    color: #111;
}

.leader-quote .text_red {
    color: #cc0000;
}

/* Read More button */
.btn-link-arrow.read-toggle {
    background: none;
    border: none;
    color: #0F0D6B;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.btn-link-arrow.read-toggle:hover {
    color: #cc0000;
    text-decoration: underline;
}

/* Mobile */
@media (max-width: 768px) {
    .leadership-img-wrapper {
        height: 461px;
        border-radius: 10px;
        margin-bottom: 20px;
    }

    .leader-panel {
        border-radius: 10px;
        padding: 25px 20px;
    }

    .leader-message {
        max-height: 220px;
    }
}

/* CASHT PROGRAMS TABS SECTION */
/* Tabs with bottom border indicator */
.programs-pathways .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: #000;
    font-weight: 500;
    transition: all 0.3s;
}

.programs-pathways .nav-tabs .nav-link.active {
    border-bottom: 3px solid var(--primary-red-color);
    color: var(--primary-red-color);
    background-color: transparent;
}

.programs-pathways .card:hover {
    transform: translateY(-5px);
    transition: all 0.3s;
}

/*-------------------------------------------------
# GLOBAL RED/BLUE TEXT + blue bg
---------------------------------------------------*/
.text_red {
    color: var(--primary-red-color) !important;
}

.text_blue {
    color: var(--accent-color) !important;
}

p.csl_hero_subheading {
    font-size: 22px !important;
    font-weight: 400;
    margin-bottom: 25px;
    font-style: italic;
    color: #000 !important;
}

.bg_blue {
    background-color: var(--accent-color) !important;
}

/*-------------------------------------------------
# ELEMENTS/IMAGES HIDDEN ON MOBILE VIEW
---------------------------------------------------*/
@media (max-width: 767px) {
    .csl_mob_hidden {
        display: none !important;
    }

    /*-------------------------------------------------
# BUTTONS FULL WIDTH + CENTER ALIGN ON MOBILE VIEW
---------------------------------------------------*/
    .csl_btn_mob_w_100 {
        width: 100% !important;
        text-align: center !important;

    }

    /*-------------------------------------------------
# CONTENT CENTER ALIGN ON MOBILE VIEW
---------------------------------------------------*/
    .csl_mob_content_center {
        text-align: center !important;
    }

    .csl_col_content_center {
        text-align: center;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
}

/*-------------------------------------------------
# HOME PAGE - MISSION/MOTO/APPROACH SECTION
--------------------------------------------------*/
/* Card styling improvement */
.mission-card {
    background: var(--primary-red-color);
    padding: 20px;
    /* more breathing space inside */
    border-radius: 20px;
    transition: all .3s ease;
}

/* Space between cards */
.row.g-4>div {
    margin-bottom: 10px;
}

/* Icon circle */
.icon-circle {
    width: 110px;
    height: 110px;
    background: #fff;
    color: var(--primary-red-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 25px;
    /* space under icon */
    font-size: 60px;
    /* bigger icon */
}

/* Title */
.mission-card h3 {
    font-size: 26px;
    /* bigger heading */
    font-weight: 700;
    margin-bottom: 18px;
    color: #fff !important;
    /* space between title and text */
}

/* Description */
.mission-card p {
    font-size: 20px;
    line-height: 1.6;
    margin: 0;
}

/* Optional hover (makes it feel nicer) */
.mission-card:hover {
    transform: translateY(-6px);
}

/*----------------------------------------------
# FOUNDERS NOTE SECTION
-----------------------------------------------*/
/* Founder Image */
.founder-img {
    border-radius: 18px;
}

/* Founder Card */
.founder-card {
    background: #fff;
}

/* Founder Name Box */
.founder-info {
    background: var(--primary-red-color);
    padding: 14px;
    border-radius: 10px;
    margin-top: 12px;
}

.founder-info h5 {
    color: #fff;
    font-weight: 700;
}

.founder-info p {
    font-size: 14px;
    font-weight: 500;
    color: #fff;

}

/* Founder Note Box */
.founder-note {
    background: #f7f7f7;
    padding: 30px 35px;
    border-radius: 14px;
    border: 2px solid var(--primary-red-color);
}

/* Founder Title */
.founder-title {
    color: var(--primary-red-color);
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* Quote Box */
.rumi-quote {
    background: white;
    padding: 15px 20px;
    border-left: 4px solid var(--primary-red-color);
    border-radius: 6px;
    font-style: italic;
}

/* Mission Highlight */
.mission-highlight {
    border-left: 5px solid var(--primary-red-color);
    padding-left: 15px;
    margin-top: 25px;
}

.mission-highlight h4 {
    font-weight: 800;
}

/*---------------------------------------------------
# PROGRAM PAGE - GERMAN PROGRAM PAGE
----------------------------------------------------*/

.csl_text_border {
    border: 2px solid var(--accent-color);
    color: #000;
    padding: 20px;
    border-radius: 20px;
    font-size: 18px;
}

/* Fix width issue of cards inside swiper */
.course-slider .swiper-slide>.col-lg-4,
.course-slider .swiper-slide>.col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

/* ============================= */
/* 1. Force swiper-slide card to full width inside slider */
/* ============================= */
.course-slider .swiper-slide>.col-lg-4,
.course-slider .swiper-slide>.col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: flex;
    /* allow flex for equal height */
}

/* ------------------------------ */
/* Equal height cards & button bottom */
/* ------------------------------ */
.course-slider .swiper-slide {
    display: flex;
}

.course-slider .course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.course-slider .course-card .course-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.course-slider .course-card .btn-course {
    margin-top: auto;
}

/*--------------------------------------------------
#Program page training section
------------------------------------------------------*/
.training-cards .card-color {
    padding: 30px 15px;
    border-radius: 15px;
    color: #fff;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.card-red {
    background: var(--primary-red-color);
}

.card-blue {
    background: var(--accent-color);
}

.training-cards .icon-box {
    font-size: 40px;
}

.training-cards .card-color h4 {
    font-size: 20px;
    color: #fff !important;
    font-weight: 600;
    margin-bottom: 12px;
}

.training-cards .card-color p {
    font-size: 14.5px;
    line-height: 1.6;
}

.training-cards .card-color:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}


.training-approach {
    background: linear-gradient(135deg, #f5f7fa, #e0f2fe);
}

.training-approach h2 {
    font-weight: 700;
    font-size: 32px;
}

.training-approach .icon {
    font-size: 36px;
    flex-shrink: 0;
}

.training-approach .text-red {
    color: var(--primary-red-color);
}

.training-approach .text-blue {
    color: var(--accent-color);
}

.training-approach h5 {
    font-weight: 600;
    margin-bottom: 5px;
}

.training-approach p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
}

/* ======================================
   Good to know section
   Reverse columns on mobile
   Add spacing between columns
====================================== */



/* Mobile only */
@media (max-width: 767px) {
    .csl_m_rr {
        flex-direction: column-reverse !important;
    }

    /* center text inside both columns */
    .csl_m_rr>[class*="col"] {
        text-align: center !important;
        align-items: center !important;
    }

    .csl_m_rr img {
        margin-top: 30px !important
    }
}


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



/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

h2.accordion-header .accordion-button {
    font-weight: bold !important;
}

.footer-link {
    color: #fff !important;
    text-decoration: none;
}

.footer-link:hover {
    color: #dcdcdc !important;
    text-decoration: underline;
}

.dd:hover {
    color: black !important;
}

/* Mobile menu overlay only for mobile */


@media (max-width: 991px) {

    .casht_mobile_menu {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 80%;
        max-width: 320px;
        background: #fff;
        padding: 25px;
        z-index: 9999;
        overflow-y: auto;
    }

}

.top-bar {
    background-color: var(--primary-red-color) !important;
    padding: 10px 0;
}

.top-bar a {
    color: #fff !important;
}

.top-bar .dropdown ul li a {
    color: #000 !important;
}

a.link_topbar {
    text-decoration: underline;
    /* background-color: #103f90; */
    padding: 5px 10px;
    border-radius: 4px;
}

.top-bar .btn-blue,
.mob-btn-blue {
    padding: 10px 20px;
    font-weight: 500;
    font-size: 16px;
    border-radius: 50px;
    transition: all 0.3s ease;
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--contrast-color);
}

.top-bar .btn-blue:hover,
.mob-btn-blue:hover {
    background-color:
        color-mix(in srgb, var(--accent-color), black 15%);
    border-color:
        color-mix(in srgb, var(--accent-color), black 15%);
    transform: translateY(-2px);
}

.main-image.hero img {
    width: 85% !important;
}

.course-badge span {
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
}

/* .course-details .course-hero .hero-content .course-badge span.category {
  background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
} */
.course-badge span.category {
    background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
    color: var(--accent-color);
}











h1.course_title {
    font-weight: bold;
}

/* CTA Section Styles */
.cta-section {
    padding: 40px 20px;
    /* background-color: #201e1e; */
    text-align: center;
    /* border-radius: 12px; */
}

.cta-section h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
}

.cta-section p {
    font-size: 18px;
    margin-bottom: 25px;
}

.cta-button {
    background-color: #ff0000;
    color: #fff;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #fd5e5e;
}

.instructor-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    /* ensures image corners match card */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Full-width image */
.instructor-card .instructor-img {
    width: 100%;
    height: 200px;
    /* adjust height as you like */
    object-fit: cover;
    border-radius: 0;
    /* remove circle */
    border: none;
    display: block;
}

/* Body styling */
.instructor-card .card-body {
    padding: 20px;
}

.instructor-name {
    font-weight: 600;
    margin-bottom: 5px;
}

.instructor-title {
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 15px;
}

/* Optional hover effect */
.instructor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}

.light-background {
    --background-color: #f5faff;
    --surface-color: #ffffff;
}

.dark-background {
    --background-color: #060606;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #252525;
    --contrast-color: #ffffff;
}

.accent-background {
    --background-color: #136ad5;
    --default-color: #243e91;
    --heading-color: #243e91;
    --accent-color: #acd0fc;
    --surface-color: #4188de;
    --contrast-color: #ffffff;
}

.course-image-page img {
    border-radius: 13px;
    margin-bottom: 20px;
}

/* Smooth scroll */
:root {
    scroll-behavior: smooth;
}

h2.top_welcome {
    color: var(--primary-red-color);
    font-weight: 700;
}

.blue {
    color: var(--accent-color);
}

.btn_blue {
    background-color: var(--accent-color);
}

.red {
    color: var(--primary-red-color);
    ;
}

h2.bold {
    font-weight: 700;
}

h3.red.about_sec {
    font-size: 22px;
    font-weight: 600;
}

.sec_pa {
    background-color: #e5e5e5;
    padding: 17px;
    border-radius: 32px;
    margin-bottom: 20px;
}

.btn-blue {
    padding: 10px 30px;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 50px;
    transition: all 0.3s ease;
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--contrast-color);
}

.btn-blue:hover {
    background-color:
        color-mix(in srgb, var(--accent-color), black 15%);
    border-color:
        color-mix(in srgb, var(--accent-color), black 15%);
    transform: translateY(-2px);
}

.btn-red {
    background-color: var(--primary-red-color);
    color: white;
    border-radius: 20px;
}

.btn-red:hover {
    background-color: #dc3545;
    color: white;
    border-radius: 20px;
}

span.head_s {
    font-size: 22px;
}

.bg-grey {
    background-color: grey;
}

.stat-item p {
    color: #080d6a;
    font-weight: 600;
}

img.footer_logo {
    width: 250px;
    background-color: white;
    border-radius: 3px;
    padding: 5px;
}

.blog-wrapper {
    background: #f9f9f9;
    padding: 20px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgb(0 0 0 / 23%);
}

.blog-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
}

.blog-meta {
    color: #888;
    font-size: 14px;
    margin-bottom: 20px;
}

.blog-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.blog-content {
    font-size: 17px;
    line-height: 1.7;
    color: #444;
}

.share-btns {
    margin-top: 40px;
}

.share-button {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    margin-right: 10px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.share-button i {
    margin-right: 8px;
    font-size: 18px;
}

.facebook-btn {
    background-color: #3b5998;
}

.linkedin-btn {
    background-color: #0077b5;
}

.share-button:hover {
    opacity: 0.9;
}

.more-articles {
    margin-top: 60px;
}

.more-articles h4 {
    font-weight: 700;
    margin-bottom: 30px;
    border-bottom: 2px solid #0077b5;
    padding-bottom: 10px;
}

.article-card {
    background-color: #f9f9f9;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    box-shadow: 0 5px 18px rgb(0 0 0 / 16%);
    transition: all 0.3s ease;
}

.article-card img {
    border-radius: 10px;
    margin-bottom: 15px;
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.article-card h5 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 10px;
}

.article-card .blog-snippet {
    font-size: 14px;
    color: #666;
    flex-grow: 1;
}

.article-card .read-more {
    color: #0a66c2;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.article-card .read-more:hover {
    color: #004182;
}

img.feature-icon {
    width: 28px;
}

img.counter-icon {
    margin-bottom: 10px;
        width: 85px;
    height: 80px;
}

img.course-icon {
    width: 40px;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: var(--default-font);
}

a {
    color: black;
    text-decoration: none;
    transition: 0.3s;
}

/* a:hover {
    color: #3a3a3a;
    text-decoration: none;
} */

h1,
h2,
h3,
h4,
h5,
h6 {
    /* color: var(--heading-color); */
    font-family: var(--heading-font);
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--heading-color);
    font-weight: 700;
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
    display: none;
    background: #df1529;
    color: #ffffff;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.php-email-form .sent-message {
    display: none;
    color: #ffffff;
    background: #059652;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.php-email-form .loading {
    display: none;
    background: var(--surface-color);
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
}

.php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid var(--accent-color);
    border-top-color: var(--surface-color);
    animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
    --background-color: #f5faff;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --accent-color: #2e80e4;
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 15px 0;
    transition: all 0.5s;
    z-index: 997;
    top: 58px !important;
}

@media (max-width:768px) {
    .header {
        top: 0 !important
    }

}

.header .logo {
    line-height: 1;
}

.header .logo img {
    max-height: 55px;
    margin-right: 8px;
    margin-top: 8px;
    height: 60px;
}

.header .logo h1 {
    font-size: 30px;
    margin: 0;
    font-weight: 700;
    color: var(--heading-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
    color: var(--contrast-color);
    background: #E03F42;
    font-size: 16px;
    padding: 8px 25px;
    margin: 0 0 0 30px;
    border-radius: 50px;
    transition: 0.3s;
    border: 2px solid color-mix(in srgb, var(--contrast-color), transparent 90%);
    font-weight: 600;
}

span.total-price {
    font-size: 30px;
    font-weight: 700;
    color: #103f90;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
    color: white;
    background: #ff9090;
}

@media (max-width: 1200px) {
    .header .logo {
        order: 1;
    }

    .header .logo img {
        height: auto;
        width: 200px;
    }

    .header .btn-getstarted {
        order: 2;
        margin: 0 15px 0 0;
        padding: 6px 15px;
    }

    .header .navmenu {
        order: 3;
    }
}

.scrolled .header {
    box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
    .navmenu {
        padding: 0;
    }

    .navmenu ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
    }

    .navmenu li {
        position: relative;
    }

    .navmenu>ul>li {
        white-space: nowrap;
        padding: 15px 7px;
    }

    .navmenu>ul>li:last-child {
        padding-right: 0;
    }

    .navmenu a,
    .navmenu a:focus {
        color: var(--nav-color);
        font-size: 17px;
        padding: 0 2px;
        font-family: var(--nav-font);
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
        position: relative;
    }

    .navmenu a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        transition: 0.3s;
    }

    .navmenu>ul>li>a:before {
        content: "";
        position: absolute;
        height: 2px;
        bottom: -6px;
        left: 0;
        background-color: var(--nav-hover-color);
        visibility: hidden;
        width: 0px;
        transition: all 0.3s ease-in-out 0s;
    }

    .navmenu a:hover:before,
    .navmenu li:hover>a:before,
    .navmenu .active:before {
        visibility: visible;
        width: 100%;
    }

    .navmenu li:hover>a,
    .navmenu .active,
    .navmenu .active:focus {
        color: var(--nav-hover-color);
    }

    .navmenu .dropdown ul {
        margin: 0;
        padding: 10px 0;
        background: var(--nav-dropdown-background-color);
        display: block;
        position: absolute;
        visibility: hidden;
        left: 14px;
        top: 130%;
        opacity: 0;
        transition: 0.3s;
        border-radius: 4px;
        z-index: 99;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    }

    .navmenu .dropdown ul li {
        min-width: 200px;
    }

    .navmenu .dropdown ul a {
        padding: 10px 20px;
        font-size: 15px;
        text-transform: none;
        color: var(--nav-dropdown-color);
    }

    .navmenu .dropdown ul a i {
        font-size: 12px;
    }

    .navmenu .dropdown ul a:hover,
    .navmenu .dropdown ul .active:hover,
    .navmenu .dropdown ul .active,
    .navmenu .dropdown ul li:hover>a {
        color: var(--nav-dropdown-hover-color);
    }

    .navmenu .dropdown:hover>ul {
        opacity: 1;
        top: 100%;
        visibility: visible;
    }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: 100%;  /* Changed from -90% to open on the RIGHT */
    visibility: hidden;
}

.navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: 100%;  /* Changed from -100% to open on the RIGHT */
    visibility: visible;
}

.navmenu .dropdown ul a i {
    display: none; /* Hide the existing down arrow */
}

.navmenu .dropdown .dropdown > a::after {
    content: "›";
    font-size: 18px;
    margin-left: 5px;
    line-height: 0;
    vertical-align: middle;
}


}

/* Mobile Navigation */
@media (max-width: 1199px) {
    .mobile-nav-toggle {
        color: var(--nav-color);
        font-size: 28px;
        line-height: 0;
        margin-right: 10px;
        cursor: pointer;
        transition: color 0.3s;
    }

    .navmenu {
        padding: 0;
        z-index: 9997;
    }

    .navmenu ul {
        display: none;
        list-style: none;
        position: absolute;
        inset: 60px 20px 20px 20px;
        padding: 10px 0;
        margin: 0;
        border-radius: 6px;
        background-color: var(--nav-mobile-background-color);
        border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
        box-shadow: none;
        overflow-y: auto;
        transition: 0.3s;
        z-index: 9998;
    }

    .navmenu a,
    .navmenu a:focus {
        color: var(--nav-dropdown-color);
        padding: 10px 20px;
        font-family: var(--nav-font);
        font-size: 17px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
    }

    .navmenu a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: 0.3s;
        background-color: color-mix(in srgb,
                var(--accent-color),
                transparent 90%);
    }

    .navmenu a i:hover,
    .navmenu a:focus i:hover {
        background-color: var(--accent-color);
        color: var(--contrast-color);
    }

    .navmenu a:hover,
    .navmenu .active,
    .navmenu .active:focus {
        color: var(--nav-dropdown-hover-color);
    }

    .navmenu .active i,
    .navmenu .active:focus i {
        background-color: var(--accent-color);
        color: var(--contrast-color);
        transform: rotate(180deg);
    }

    .navmenu .dropdown ul {
        position: static;
        display: none;
        z-index: 99;
        padding: 10px 0;
        margin: 10px 20px;
        background-color: var(--nav-dropdown-background-color);
        transition: all 0.5s ease-in-out;
    }

    .navmenu .dropdown ul ul {
        background-color: rgba(33, 37, 41, 0.1);
    }

    .navmenu .dropdown>.dropdown-active {
        display: block;
        background-color: rgba(33, 37, 41, 0.03);
    }

    .mobile-nav-active {
        overflow: hidden;
    }

    .mobile-nav-active .mobile-nav-toggle {
        color: #fff;
        position: absolute;
        font-size: 32px;
        top: 15px;
        right: 15px;
        margin-right: 0;
        z-index: 9999;
    }

    .mobile-nav-active .navmenu {
        position: fixed;
        overflow: hidden;
        inset: 0;
        background: rgba(33, 37, 41, 0.8);
        transition: 0.3s;
    }

    .mobile-nav-active .navmenu>ul {
        display: block;
    }
}

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
.footer {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  background: #0c0b4f;
  color: rgba(255,255,255,.75);
}

/* ── Top bar ── */
.footer-topbar {
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: .65rem 0;
  font-size: .78rem;
}

.footer-topbar__left {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  color: rgba(255,255,255,.6);
}

.footer-topbar__left i { color: #7eb3ff; font-size: .8rem; }

.footer-topbar__left a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  transition: color .2s;
}

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

.footer-topbar__sep {
  width: 1px; height: 14px;
  background: rgba(255,255,255,.2);
  display: inline-block;
}

.footer-topbar__right {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.footer-topbar__right a {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.65);
  font-size: .85rem;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}

.footer-topbar__right a:hover {
  background: #2d5bbf;
  border-color: #2d5bbf;
  color: #fff;
}

/* ── Main ── */
.footer-main {
  padding: 3.5rem 0 2.5rem;
}

/* Brand */
.footer-brand {
  display: inline-block;
  margin-bottom: 1rem;
}

.footer-brand img {
  height: 48px;
  /* filter: brightness(0) invert(1); */
}

.footer-desc {
  font-size: .84rem;
  line-height: 1.75;
  color: rgba(255,255,255,.55);
  text-align: left;
  margin-bottom: 1.1rem;
}

.footer-map-btn {
  display: inline-flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  line-height: 1.5;
  transition: color .2s;
}

.footer-map-btn i { color: #7eb3ff; margin-top: .1rem; flex-shrink: 0; }
.footer-map-btn:hover { color: rgba(255,255,255,.85); }

/* Headings */
.footer-heading {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  position: relative;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 28px; height: 2px;
  background: linear-gradient(90deg, #2d5bbf, #3d6fd4);
  border-radius: 2px;
}

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

.footer-links li {
  padding: .3rem 0;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .84rem;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  transition: color .2s, gap .2s;
}

.footer-links a i {
  font-size: .65rem;
  color: #3d6fd4;
  transition: transform .2s;
}

.footer-links a:hover {
  color: rgba(255,255,255,.9);
  gap: .6rem;
}

.footer-links a:hover i { transform: translateX(2px); }

/* Contact card */
.footer-contact-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: .65rem;
  padding: 1rem 1.1rem;
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .8rem;
}

.footer-contact-item > i {
  font-size: .85rem;
  color: #7eb3ff;
  margin-top: .15rem;
  flex-shrink: 0;
}

.footer-contact-item div,
.footer-contact-item span {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
}

.footer-contact-item a {
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .2s;
}

.footer-contact-item a:hover { color: #fff; }

/* ── Bottom bar ── */
.footer-bottom {
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 1rem 0;
  font-size: .78rem;
  color: rgba(255,255,255,.35);
}

.footer-bottom strong { color: rgba(255,255,255,.6); }

.footer-bottom__links {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.footer-bottom__links a {
  color: rgba(255,255,255,.35);
  text-decoration: none;
  transition: color .2s;
}

.footer-bottom__links a:hover { color: rgba(255,255,255,.75); }

.footer-bottom__links span { color: rgba(255,255,255,.2); }

/* ── Responsive ── */
@media (max-width: 768px) {
  .footer-topbar .container { justify-content: center; text-align: center; }
  .footer-topbar__left { justify-content: center; }
  .footer-bottom { text-align: center; }
  .footer-bottom .container { justify-content: center; }
  .footer-links a { justify-content: center; }
  .footer-heading::after { left: 50%; transform: translateX(-50%); }
  .footer-heading { text-align: center; }
  .footer-brand { display: flex; justify-content: center; }
  .footer-desc { text-align: center; }
  .footer-map-btn { justify-content: center; }
}

/* ── Brand row: full width above columns ── */
.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-brand img {
  height: 52px;
  background-color: white;
  padding: 3px;
  border-radius: 4px;
}

.footer-brand-row .footer-desc {
  flex: 1;
  min-width: 220px;
  font-size: .875rem;
  color: rgba(255,255,255,.5);
  line-height: 1.7;
  border-left: 1px solid rgba(255,255,255,.1);
  padding-left: 2rem;
  margin: 0;
}

.footer-brand-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(45,91,191,.6), rgba(255,255,255,.06), transparent);
}

/* Map link inside contact card */
.footer-map-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  font-weight: 600;
  color: #7eb3ff;
  text-decoration: none;
  border: 1px solid rgba(125,179,255,.25);
  border-radius: .35rem;
  padding: .3rem .75rem;
  margin-top: .25rem;
  transition: background .2s, color .2s;
}

.footer-map-link:hover {
  background: rgba(125,179,255,.1);
  color: #a5c8ff;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .footer-brand-row {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .footer-brand-row .footer-desc {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 1rem;
  }
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    overflow: hidden;
    background: var(--background-color);
    transition: all 0.6s ease-out;
}

#preloader:before {
    content: "";
    position: fixed;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 6px solid #ffffff;
    border-color: var(--accent-color) transparent var(--accent-color) transparent;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 99999;
    background-color: var(--accent-color);
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

.scroll-top i {
    font-size: 24px;
    color: var(--contrast-color);
    line-height: 0;
}

.scroll-top:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
    color: var(--contrast-color);
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
    color: var(--default-color);
    background-color: #0F0D6B;
    padding: 25px 0;
    position: relative;
}

.breadcrumbs a {
    color: #fff !important;
}

.page-title h1 {
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.page-title .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
    padding-left: 10px;
    color: white;
}

.page-title .breadcrumbs ol li+li::before {
    content: "/";
    display: inline-block;
    padding-right: 10px;
    color: white;
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 60px 0;
    scroll-margin-top: 90px;
    overflow: clip;
}

@media (max-width: 1199px) {

    section,
    .section {
        scroll-margin-top: 66px;
    }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
    text-align: center;
    padding-bottom: 60px;
    position: relative;
}

.section-title h2 {
    font-size: 32px;
    font-weight: 700;
    position: relative;
}

.section-title h2:before,
.section-title h2:after {
    content: "";
    width: 50px;
    height: 2px;
    background: var(--accent-color);
    display: inline-block;
}

.section-title h2:before {
    margin: 0 15px 10px 0;
}

.section-title h2:after {
    margin: 0 0 10px 15px;
}

.section-title p {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .section-title h2 {
        font-size: 20px;
    }

    .section-title h2:before,
    .section-title h2:after {
        content: "";
        width: 20px;
        height: 2px;
        background: var(--accent-color);
        display: inline-block;
    }
}

/*--------------------------------------------------------------
# Courses Hero Section
--------------------------------------------------------------*/
.courses-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 60px 0 0px;
}

.courses-hero .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.courses-hero .hero-text h1 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.0;
    margin-bottom: 1.5rem;
    color: var(--heading-color);
}

@media (max-width: 768px) {
    .courses-hero .hero-text h1 {
        font-size: 2.5rem;
    }
}

.courses-hero .hero-text p {
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.courses-hero .hero-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 576px) {
    .courses-hero .hero-stats {
        flex-direction: column;
        gap: 1rem;
    }
}

.courses-hero .hero-stats .stat-item {
    text-align: center;
}

.courses-hero .hero-stats .stat-item .number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
}

.courses-hero .hero-stats .stat-item .label {
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    font-weight: 500;
}

.courses-hero .hero-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 2.5rem;
}

@media (max-width: 576px) {
    .courses-hero .hero-buttons {
        flex-direction: column;
    }
}

.courses-hero .hero-buttons .btn {
    padding: 10px 30px;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.courses-hero .hero-buttons .btn.btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--contrast-color);
}

.courses-hero .hero-buttons .btn.btn-primary:hover {
    background-color: color-mix(in srgb, var(--accent-color), black 15%);
    border-color: color-mix(in srgb, var(--accent-color), black 15%);
    transform: translateY(-2px);
}

.courses-hero .hero-buttons .btn.btn-outline {
    background-color: transparent;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
}

.courses-hero .hero-buttons .btn.btn-outline:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: translateY(-2px);
}

.hero-features {
    display: flex;
    gap: 2.5rem;
}

@media (max-width: 768px) {
    .hero-features {
        flex-wrap: wrap;
        gap: 1rem;
    }
}

.hero-features .feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* width: 420px; */
}

.hero-features .feature i {
    font-size: 1.25rem;
    color: var(--accent-color);
}

.hero-features .feature span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--default-color);
    width: 102px;
}

.courses-hero .hero-image {
    position: relative;
}

.courses-hero .hero-image .main-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    /* box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); */
    text-align: center;
}

.courses-hero .hero-image .main-image img {
    width: 100%;
    height: auto;
    /* border-radius: 20px; */
    margin: 0px auto;
}

.courses-hero .hero-image .floating-cards {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.courses-hero .hero-image .floating-cards .course-card {
    position: absolute;
    background: var(--surface-color);
    border-radius: 15px;
    padding: 1rem 1.25rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 200px;
}

.courses-hero .hero-image .floating-cards .course-card:nth-child(1) {
    top: 20%;
    left: -10%;
}

.courses-hero .hero-image .floating-cards .course-card:nth-child(2) {
    top: 50%;
    right: -15%;
}

.courses-hero .hero-image .floating-cards .course-card:nth-child(3) {
    bottom: 20%;
    left: -5%;
}

.courses-hero .hero-image .floating-cards .course-card .card-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.courses-hero .hero-image .floating-cards .course-card .card-icon i {
    font-size: 1.5rem;
    color: var(--accent-color);
}

.courses-hero .hero-image .floating-cards .course-card .card-content h6 {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--heading-color);
    line-height: 1.2;
}

.courses-hero .hero-image .floating-cards .course-card .card-content span {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

@media (max-width: 992px) {
    .courses-hero .hero-image .floating-cards .course-card {
        display: none;
    }
}

.courses-hero .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    overflow: hidden;
}

.courses-hero .hero-background .bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.courses-hero .hero-background .bg-shapes .shape {
    position: absolute;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.courses-hero .hero-background .bg-shapes .shape.shape-1 {
    width: 300px;
    height: 300px;
    top: 10%;
    right: 10%;
    animation: float 6s ease-in-out infinite;
}

.courses-hero .hero-background .bg-shapes .shape.shape-2 {
    width: 200px;
    height: 200px;
    bottom: 20%;
    left: 5%;
    animation: float 8s ease-in-out infinite reverse;
}

.courses-hero .hero-background .bg-shapes .shape.shape-3 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 30%;
    animation: float 7s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

@media (max-width: 992px) {
    .courses-hero {
        padding: 100px 0 60px;
        min-height: auto;
    }

    .courses-hero .hero-text {
        margin-bottom: 3rem;
    }
}

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

    .courses-hero .hero-stats {
        justify-content: center;
    }

    .courses-hero .hero-features {
        justify-content: center;
    }
}

/*--------------------------------------------------------------
# Featured Courses Section
--------------------------------------------------------------*/
.featured-courses .course-card {
    background: var(--surface-color);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 25px color-mix(in srgb, var(--default-color), transparent 90%);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.featured-courses .course-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px color-mix(in srgb, var(--default-color), transparent 85%);
}

.featured-courses .course-image {
    position: relative;
    overflow: hidden;
    height: 220px;
}

.featured-courses .course-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.featured-courses .course-image:hover img {
    transform: scale(1.05);
}

.featured-courses .course-image .badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.featured-courses .course-image .badge.featured {
    background: var(--accent-color);
    color: var(--contrast-color);
}

.featured-courses .course-image .badge.new {
    background: #28a745;
    color: white;
}

.featured-courses .course-image .badge.certificate {
    background: #ffc107;
    color: #212529;
}

.featured-courses .course-image .badge.popular {
    background: #ff6b35;
    color: white;
}

.featured-courses .course-image .price-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: var(--heading-color);
    color: var(--contrast-color);
    padding: 8px 15px;
    border-radius: 25px;
    font-weight: 700;
    font-size: 14px;
}

.featured-courses .course-content {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.featured-courses .course-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.featured-courses .course-meta span {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 15px;
    font-weight: 500;
}

.featured-courses .course-meta span.level {
    background: color-mix(in srgb, var(--accent-color), transparent 85%);
    color: var(--accent-color);
}

.featured-courses .course-meta span.duration {
    background: color-mix(in srgb, var(--heading-color), transparent 85%);
    color: var(--heading-color);
}

.featured-courses h3 {
    margin-bottom: 15px;
    font-size: 20px;
    line-height: 1.3;
}

.featured-courses h3 a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 700;
}

.featured-courses h3 a:hover {
    color: var(--accent-color);
}

.featured-courses p {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.featured-courses .instructor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.featured-courses .instructor .instructor-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.featured-courses .instructor .instructor-info h6 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--heading-color);
}

.featured-courses .instructor .instructor-info span {
    font-size: 12px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.featured-courses .course-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-top: 15px;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.featured-courses .course-stats .rating {
    display: flex;
    align-items: center;
    gap: 3px;
}

.featured-courses .course-stats .rating i {
    color: #ffc107;
    font-size: 12px;
}

.featured-courses .course-stats .rating span {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    font-size: 12px;
    margin-left: 8px;
    font-weight: 500;
}

.featured-courses .course-stats .students {
    display: flex;
    align-items: center;
    gap: 5px;
}

.featured-courses .course-stats .students i {
    color: var(--accent-color);
    font-size: 14px;
}

.featured-courses .course-stats .students span {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    font-size: 12px;
    font-weight: 500;
}

.featured-courses .btn-course {
    display: inline-block;
    background: var(--accent-color);
    color: var(--contrast-color);
    padding: 12px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    margin-top: auto;
}

.featured-courses .btn-course:hover {
    background: color-mix(in srgb, var(--accent-color), black 10%);
    transform: translateY(-2px);
}

.featured-courses .more-courses {
    margin-top: 50px;
}

.featured-courses .more-courses .btn-more {
    display: inline-block;
    background: transparent;
    color: var(--accent-color);
    padding: 15px 40px;
    border: 2px solid var(--accent-color);
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.featured-courses .more-courses .btn-more:hover {
    background: var(--accent-color);
    color: var(--contrast-color);
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .featured-courses .course-image {
        height: 200px;
    }

    .featured-courses .course-content {
        padding: 20px;
    }

    .featured-courses h3 {
        font-size: 18px;
    }

    .featured-courses .course-stats {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

/*--------------------------------------------------------------
# Course Categories Section
--------------------------------------------------------------*/
.course-categories .category-card {
    background: #f8f8ff54;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid #d0e6ff45;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    display: block;
}

.course-categories .category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    text-decoration: none;
}

.course-categories .category-card .category-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}

.course-categories .category-card .category-icon i {
    font-size: 30px;
    color: var(--contrast-color);
}

.course-categories .category-card h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--heading-color);
}

.course-categories .category-card .course-count {
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    font-weight: 500;
}

.course-categories .category-card.category-tech .category-icon {
    background: linear-gradient(135deg, #0c0d6d, #0e0f6c);
}

.course-categories .category-card.category-tech:hover {
    border-color: #3b82f6;
}

.course-categories .category-card.category-business .category-icon {
    background: linear-gradient(135deg, #10b981, #047857);
}

.course-categories .category-card.category-business:hover {
    border-color: #10b981;
}

.course-categories .category-card.category-design .category-icon {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.course-categories .category-card.category-design:hover {
    border-color: #8b5cf6;
}

.course-categories .category-card.category-health .category-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.course-categories .category-card.category-health:hover {
    border-color: #ef4444;
}

.course-categories .category-card.category-language .category-icon {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

.course-categories .category-card.category-language:hover {
    border-color: #f97316;
}

.course-categories .category-card.category-science .category-icon {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.course-categories .category-card.category-science:hover {
    border-color: #06b6d4;
}

.course-categories .category-card.category-marketing .category-icon {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

.course-categories .category-card.category-marketing:hover {
    border-color: #ec4899;
}

.course-categories .category-card.category-finance .category-icon {
    background: linear-gradient(135deg, #059669, #047857);
}

.course-categories .category-card.category-finance:hover {
    border-color: #059669;
}

.course-categories .category-card.category-photography .category-icon {
    background: linear-gradient(135deg, #64748b, #475569);
}

.course-categories .category-card.category-photography:hover {
    border-color: #64748b;
}

.course-categories .category-card.category-music .category-icon {
    background: linear-gradient(135deg, #7c3aed, #5b21b6);
}

.course-categories .category-card.category-music:hover {
    border-color: #7c3aed;
}

.course-categories .category-card.category-engineering .category-icon {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.course-categories .category-card.category-engineering:hover {
    border-color: #6b7280;
}

.course-categories .category-card.category-law .category-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.course-categories .category-card.category-law:hover {
    border-color: #f59e0b;
}

.course-categories .category-card.category-culinary .category-icon {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
}

.course-categories .category-card.category-culinary:hover {
    border-color: #f43f5e;
}

.course-categories .category-card.category-sports .category-icon {
    background: linear-gradient(135deg, #84cc16, #65a30d);
}

.course-categories .category-card.category-sports:hover {
    border-color: #84cc16;
}

.course-categories .category-card.category-writing .category-icon {
    background: linear-gradient(135deg, #6366f1, #4338ca);
}

.course-categories .category-card.category-writing:hover {
    border-color: #6366f1;
}

.course-categories .category-card.category-psychology .category-icon {
    background: linear-gradient(135deg, #14b8a6, #0d9488);
}

.course-categories .category-card.category-psychology:hover {
    border-color: #14b8a6;
}

.course-categories .category-card.category-environment .category-icon {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.course-categories .category-card.category-environment:hover {
    border-color: #22c55e;
}

.course-categories .category-card.category-communication .category-icon {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
}

.course-categories .category-card.category-communication:hover {
    border-color: #0ea5e9;
}

@media (max-width: 576px) {
    .course-categories .category-card {
        padding: 20px 15px;
    }

    .course-categories .category-card .category-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 15px;
    }

    .course-categories .category-card .category-icon i {
        font-size: 24px;
    }

    .course-categories .category-card h5 {
        font-size: 14px;
    }

    .course-categories .category-card .course-count {
        font-size: 13px;
    }
}

/*--------------------------------------------------------------
# Featured Instructors Section
--------------------------------------------------------------*/
.featured-instructors .instructor-card {
    background: var(--surface-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--default-color), transparent 94%);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.featured-instructors .instructor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--default-color), transparent 88%);
}

.featured-instructors .instructor-card:hover .instructor-image .overlay-content {
    opacity: 1;
}

.featured-instructors .instructor-card:hover .instructor-image img {
    transform: scale(1.05);
}

.featured-instructors .instructor-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.featured-instructors .instructor-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.featured-instructors .instructor-image .overlay-content {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.featured-instructors .instructor-image .rating-stars {
    background: var(--surface-color);
    padding: 8px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--default-color), transparent 90%);
}

.featured-instructors .instructor-image .rating-stars i {
    color: #ffc107;
    font-size: 12px;
}

.featured-instructors .instructor-image .rating-stars i.bi-star {
    color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.featured-instructors .instructor-image .rating-stars span {
    font-size: 12px;
    font-weight: 600;
    margin-left: 4px;
    color: var(--heading-color);
}

.featured-instructors .instructor-image .course-count {
    background: var(--accent-color);
    color: var(--contrast-color);
    padding: 8px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.featured-instructors .instructor-image .course-count i {
    font-size: 14px;
}

.featured-instructors .instructor-image .course-count span {
    font-size: 12px;
    font-weight: 600;
}

.featured-instructors .instructor-info {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.featured-instructors .instructor-info h5 {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--heading-color);
}

.featured-instructors .instructor-info .specialty {
    color: var(--accent-color);
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.featured-instructors .instructor-info .description {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.featured-instructors .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: color-mix(in srgb, var(--accent-color), transparent 95%);
    border-radius: 12px;
}

.featured-instructors .stats-grid .stat {
    text-align: center;
}

.featured-instructors .stats-grid .stat .number {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--heading-color);
    line-height: 1;
    margin-bottom: 4px;
}

.featured-instructors .stats-grid .stat .label {
    font-size: 11px;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.featured-instructors .action-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.featured-instructors .action-buttons .btn-view {
    background: var(--accent-color);
    color: var(--contrast-color);
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
}

.featured-instructors .action-buttons .btn-view:hover {
    transform: translateY(-2px);
}

.featured-instructors .action-buttons .social-links {
    display: flex;
    gap: 6px;
}

.featured-instructors .action-buttons .social-links a {
    width: 32px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    transition: all 0.3s ease;
}

.featured-instructors .action-buttons .social-links a:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--contrast-color);
    transform: scale(1.1);
}

.featured-instructors .action-buttons .social-links a i {
    font-size: 14px;
}

@media (max-width: 1399px) {
    .featured-instructors .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}

@media (max-width: 1199px) {
    .featured-instructors .col-lg-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }
}

@media (max-width: 991px) {
    .featured-instructors .instructor-card {
        margin-bottom: 20px;
    }

    .featured-instructors .instructor-image {
        height: 220px;
    }

    .featured-instructors .instructor-info {
        padding: 20px;
    }

    .featured-instructors .instructor-info h5 {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .featured-instructors .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .featured-instructors .instructor-image {
        height: 200px;
    }

    .featured-instructors .instructor-info {
        padding: 18px;
    }
}

@media (max-width: 575px) {
    .featured-instructors .row>* {
        width: 100% !important;
    }

    .featured-instructors .instructor-image {
        height: 250px;
    }

    .featured-instructors .instructor-image .overlay-content {
        opacity: 1;
    }

    .featured-instructors .action-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .featured-instructors .action-buttons .btn-view {
        width: 100%;
        text-align: center;
    }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
    padding: 80px 0;
    overflow: hidden;
}

.testimonials .critic-reviews {
    margin-bottom: 60px;
}

.testimonials .critic-reviews .critic-review {
    background-color: var(--surface-color);
    padding: 30px;
    border-radius: 15px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: transform 0.3s ease;
}

.testimonials .critic-reviews .critic-review .review-quote {
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 80px;
    font-family: Georgia, serif;
    color: var(--accent-color);
    opacity: 0.2;
    line-height: 1;
}

.testimonials .critic-reviews .critic-review .stars {
    margin-bottom: 15px;
    display: flex;
}

.testimonials .critic-reviews .critic-review .stars i {
    color: #ffd700;
    margin-right: 3px;
    font-size: 18px;
}

.testimonials .critic-reviews .critic-review p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: var(--default-color);
    font-style: italic;
}

.testimonials .critic-reviews .critic-review .critic-info .critic-name {
    font-weight: 600;
    color: var(--heading-color);
    font-size: 16px;
}

.testimonials .critic-reviews .critic-review:hover {
    transform: translateY(-10px);
}

.testimonials .testimonials-container {
    margin-bottom: 60px;
}

.testimonials .testimonials-container .swiper-wrapper {
    height: auto !important;
    padding-bottom: 20px;
}

.testimonials .testimonials-container .testimonial-item {
    background-color: var(--surface-color);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    height: 100%;
    border-top: 3px solid var(--accent-color);
}

.testimonials .testimonials-container .testimonial-item .stars {
    margin-bottom: 15px;
    display: flex;
}

.testimonials .testimonials-container .testimonial-item .stars i {
    color: #ffd700;
    margin-right: 3px;
    font-size: 16px;
}

.testimonials .testimonials-container .testimonial-item p {
    font-size: 15px;
    font-style: italic;
    margin-bottom: 20px;
    color: var(--default-color);
    line-height: 1.6;
}

.testimonials .testimonials-container .testimonial-item .testimonial-profile {
    display: flex;
    align-items: center;
}

.testimonials .testimonials-container .testimonial-item .testimonial-profile img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 4px solid color-mix(in srgb, var(--accent-color), transparent 80%);
    margin-right: 15px;
}

.testimonials .testimonials-container .testimonial-item .testimonial-profile div h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 5px;
    color: var(--heading-color);
}

.testimonials .testimonials-container .testimonial-item .testimonial-profile div h4 {
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    margin: 0;
    font-weight: normal;
}

.testimonials .testimonials-container .swiper-pagination {
    margin-top: 20px;
    position: relative;
}

.testimonials .testimonials-container .swiper-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background-color: color-mix(in srgb, var(--accent-color), transparent 70%);
    opacity: 1;
}

.testimonials .testimonials-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: var(--accent-color);
    width: 20px;
    border-radius: 10px;
}

.testimonials .overall-rating {
    background-color: var(--surface-color);
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    display: inline-block;
}

.testimonials .overall-rating .rating-number {
    font-size: 48px;
    font-weight: 700;
    color: var(--heading-color);
    line-height: 1;
    margin-bottom: 10px;
}

.testimonials .overall-rating .rating-stars {
    margin-bottom: 15px;
}

.testimonials .overall-rating .rating-stars i {
    color: #ffd700;
    font-size: 22px;
    margin: 0 3px;
}

.testimonials .overall-rating p {
    color: var(--default-color);
    font-size: 15px;
    margin-bottom: 15px;
}

.testimonials .overall-rating .rating-platforms {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.testimonials .overall-rating .rating-platforms span {
    font-size: 14px;
    color: var(--accent-color);
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    padding: 5px 15px;
    border-radius: 20px;
}

@media (max-width: 992px) {
    .testimonials .section-header h2 {
        font-size: 28px;
    }

    .testimonials .critic-reviews .critic-review {
        margin-bottom: 30px;
    }

    .testimonials .testimonials-container .testimonial-item {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .testimonials {
        padding: 60px 0;
    }

    .testimonials .section-header h2 {
        font-size: 24px;
    }

    .testimonials .overall-rating {
        padding: 30px;
    }

    .testimonials .overall-rating .rating-number {
        font-size: 36px;
    }

    .testimonials .overall-rating .rating-stars i {
        font-size: 18px;
    }
}

/*--------------------------------------------------------------
# Recent Blog Posts Section
--------------------------------------------------------------*/
.recent-blog-posts .card {
    border: none;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    overflow: hidden;
    height: 100%;
    background-color: var(--surface-color);
}

.recent-blog-posts .card:hover .card-img-wrapper img {
    transform: scale(1.1);
}

.recent-blog-posts .card .card-top {
    padding: 1rem;
}

.recent-blog-posts .card .card-top img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.recent-blog-posts .card .card-top .author-name {
    font-size: 0.9rem;
    color: var(--heading-color);
}

.recent-blog-posts .card .card-top .likes {
    font-size: 0.9rem;
    color: var(--accent-color);
}

.recent-blog-posts .card .card-top .likes i {
    margin-right: 0.25rem;
}

.recent-blog-posts .card .card-img-wrapper {
    overflow: hidden;
    max-height: 250px;
}

.recent-blog-posts .card .card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.recent-blog-posts .card .card-body {
    padding: 1.5rem;
}

.recent-blog-posts .card .card-body .card-title {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--heading-color);
    font-weight: 600;
}

.recent-blog-posts .card .card-body .card-title a {
    color: inherit;
}

.recent-blog-posts .card .card-body .card-title:hover {
    color: var(--accent-color);
}

.recent-blog-posts .card .card-body .card-text {
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--default-color), transparent 25%);
}

/*--------------------------------------------------------------
# Cta Section
--------------------------------------------------------------*/
.cta {
    position: relative;
    overflow: hidden;
}

.cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("../img/bg/abstract-bg-3.webp") center/cover;
    opacity: 0.03;
    z-index: 1;
}

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

.cta .cta-content {
    padding-right: 30px;
}

@media (max-width: 991px) {
    .cta .cta-content {
        padding-right: 0;
        margin-bottom: 40px;
    }
}

.cta .cta-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 24px;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .cta .cta-content h2 {
        font-size: 2rem;
    }
}

.cta .cta-content p {
    font-size: 1.1rem;
    margin-bottom: 32px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    line-height: 1.6;
}

.cta .features-list {
    margin-bottom: 32px;
}

.cta .features-list .feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

.cta .features-list .feature-item i {
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-right: 12px;
    flex-shrink: 0;
}

.cta .features-list .feature-item span {
    font-weight: 500;
    color: var(--default-color);
}

.cta .cta-actions {
    margin-bottom: 40px;
}

.cta .cta-actions .btn {
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 16px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.cta .cta-actions .btn.btn-primary {
    background: var(--accent-color);
    border: 2px solid var(--accent-color);
    color: var(--contrast-color);
}

.cta .cta-actions .btn.btn-primary:hover {
    background: color-mix(in srgb, var(--accent-color), black 10%);
    border-color: color-mix(in srgb, var(--accent-color), black 10%);
    transform: translateY(-2px);
}

.cta .cta-actions .btn.btn-outline {
    background: transparent;
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
}

.cta .cta-actions .btn.btn-outline:hover {
    background: var(--accent-color);
    color: var(--contrast-color);
    transform: translateY(-2px);
}

.cta .stats-row {
    display: flex;
    gap: 40px;
}

@media (max-width: 576px) {
    .cta .stats-row {
        flex-direction: column;
        gap: 24px;
    }
}

.cta .stats-row .stat-item h3 {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--accent-color);
    margin-bottom: 8px;
    line-height: 1;
}

.cta .stats-row .stat-item p {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--heading-color);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cta .cta-image {
    position: relative;
}

.cta .cta-image img {
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.cta .cta-image .floating-element {
    position: absolute;
    background: var(--surface-color);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.cta .cta-image .floating-element.student-card {
    top: 20px;
    right: -20px;
}

@media (max-width: 576px) {
    .cta .cta-image .floating-element.student-card {
        right: 10px;
        padding: 15px;
    }
}

.cta .cta-image .floating-element.course-card {
    bottom: 30px;
    left: -20px;
}

@media (max-width: 576px) {
    .cta .cta-image .floating-element.course-card {
        left: 10px;
        padding: 15px;
    }
}

.cta .cta-image .floating-element .card-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cta .cta-image .floating-element .card-content i {
    font-size: 2rem;
    color: var(--accent-color);
}

.cta .cta-image .floating-element .card-content .text .number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--heading-color);
    line-height: 1;
}

.cta .cta-image .floating-element .card-content .text .label {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    font-weight: 500;
}

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

.about .subtitle {
    display: inline-block;
    color: var(--accent-color);
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    position: relative;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.about .about-content {
    /* padding-left: 20px; */
    padding-right: 30px !important;
}

.about .about-content h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

@media (max-width: 992px) {
    .about .about-content h2 {
        font-size: 2rem;
    }
}

.about .about-content p {
    margin-bottom: 2rem;
    font-size: 1.05rem;
    line-height: 1.8;
    color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.about .stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 2rem;
}

.about .stats-row .stats-item {
    flex: 1;
    min-width: 100px;
}

.about .stats-row .stats-item .count {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--accent-color);
    display: block;
    margin-bottom: 0.5rem;
}

.about .stats-row .stats-item p {
    margin-bottom: 0;
    font-size: 0.95rem;
    font-weight: 500;
}

.about .mission-card {
    background-color: var(--surface-color);
    padding: 2.5rem 1.5rem;
    border-radius: 8px;
    height: 100%;
    position: relative;
    transition: all 0.3s ease-in-out;
    text-align: center;
    box-shadow: 0 5px 18px rgb(60 55 55 / 19%);
}

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

.about .mission-card:hover .icon-box {
    background-color: var(--accent-color);
    color: var(--contrast-color);
}

.about .mission-card .icon-box {
    background: linear-gradient(135deg, red, #8f270d);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease-in-out;
}

.about .mission-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.about .mission-card p {
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.8;
    color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.about .achievements {
    padding-left: 20px;
}

.about .achievements h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

@media (max-width: 992px) {
    .about .achievements h2 {
        font-size: 2rem;
    }
}

.about .achievements p {
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
    line-height: 1.8;
    color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.about .achievements .achievements-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2rem;
}

.about .achievements .achievements-list li {
    padding: 0.5rem 0;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.about .achievements .achievements-list li i {
    color: var(--accent-color);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.about .achievements .btn-explore {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--accent-color);
    color: var(--contrast-color);
    padding: 0.75rem 1.5rem;
    border-radius: 30px;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.about .achievements .btn-explore:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
    gap: 0.75rem;
}

.about .achievements .btn-explore i {
    font-size: 1rem;
}

.about .about-gallery img {
    border: 5px solid var(--surface-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.about .about-gallery img:hover {
    transform: scale(1.02);
}

@media (max-width: 992px) {

    .about .about-content,
    .about .achievements {
        padding-left: 0;
        padding-right: 0 !important;
        /* margin-top: 2rem;*/
    }

    .about .achievements {
        padding-top: 30px;
    }

    .about .about-gallery {
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    .about {
        padding: 40px 0;
    }

    .about .stats-row {
        justify-content: center;
        gap: 1.5rem;
    }

    .about .stats-row .stats-item {
        flex: 0 0 40%;
        text-align: center;
    }

    .about .mission-card {
        margin-bottom: 1.5rem;
    }
}

/*--------------------------------------------------------------
# Courses 2 Section
--------------------------------------------------------------*/
.courses-2 .course-filters {
    background-color: var(--surface-color);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
}

.courses-2 .course-filters .filter-title {
    color: var(--heading-color);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid color-mix(in srgb, var(--accent-color), transparent 80%);
}

.courses-2 .course-filters .filter-group {
    margin-bottom: 25px;
}

.courses-2 .course-filters .filter-group h5 {
    color: var(--heading-color);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
}

.courses-2 .course-filters .filter-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.courses-2 .course-filters .filter-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: var(--default-color);
    padding-left: 25px;
    transition: color 0.3s ease;
}

.courses-2 .course-filters .filter-checkbox:hover {
    color: var(--accent-color);
}

.courses-2 .course-filters .filter-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.courses-2 .course-filters .filter-checkbox input:checked~.checkmark {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.courses-2 .course-filters .filter-checkbox input:checked~.checkmark:after {
    display: block;
}

.courses-2 .course-filters .filter-checkbox .checkmark {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 16px;
    width: 16px;
    background-color: var(--surface-color);
    border: 2px solid color-mix(in srgb, var(--default-color), transparent 70%);
    border-radius: 3px;
    transition: all 0.3s ease;
}

.courses-2 .course-filters .filter-checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 4px;
    top: 1px;
    width: 4px;
    height: 8px;
    border: solid var(--contrast-color);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.courses-2 .courses-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
}

.courses-2 .courses-header .search-box {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.courses-2 .courses-header .search-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.courses-2 .courses-header .search-box input {
    width: 100%;
    padding: 12px 20px 12px 45px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
    border-radius: 25px;
    font-size: 14px;
    background-color: var(--surface-color);
    color: var(--default-color);
    transition: all 0.3s ease;
}

.courses-2 .courses-header .search-box input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.courses-2 .courses-header .search-box input::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.courses-2 .courses-header .sort-dropdown select {
    padding: 12px 40px 12px 15px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
    border-radius: 8px;
    background-color: var(--surface-color);
    color: var(--default-color);
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.courses-2 .courses-header .sort-dropdown select:focus {
    outline: none;
    border-color: var(--accent-color);
}

.courses-2 .courses-grid .course-card {
    background-color: var(--surface-color);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    margin-bottom: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.courses-2 .courses-grid .course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.courses-2 .courses-grid .course-image {
    position: relative;
    overflow: hidden;
}

.courses-2 .courses-grid .course-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.courses-2 .courses-grid .course-image:hover img {
    transform: scale(1.05);
}

.courses-2 .courses-grid .course-image .course-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--accent-color);
    color: var(--contrast-color);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.courses-2 .courses-grid .course-image .course-badge.badge-free {
    background-color: #28a745;
}

.courses-2 .courses-grid .course-image .course-badge.badge-new {
    background-color: #ff6b35;
}

.courses-2 .courses-grid .course-image .course-badge.badge-certificate {
    background-color: #6f42c1;
}

.courses-2 .courses-grid .course-image .course-price {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #28a745;
    color: var(--contrast-color);
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.courses-2 .courses-grid .course-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.courses-2 .courses-grid .course-content .course-meta {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.courses-2 .courses-grid .course-content .course-meta span {
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

.courses-2 .courses-grid .course-content .course-meta span.category {
    background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
    color: var(--accent-color);
}

.courses-2 .courses-grid .course-content .course-meta span.level {
    background-color: color-mix(in srgb, var(--heading-color), transparent 85%);
    color: var(--heading-color);
}

.courses-2 .courses-grid .course-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--heading-color);
    line-height: 1.4;
}

.courses-2 .courses-grid .course-content p {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.courses-2 .courses-grid .course-content .course-stats {
    margin-bottom: 20px;
}

.courses-2 .courses-grid .course-content .course-stats .stat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-right: 15px;
    margin-bottom: 8px;
    font-size: 13px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.courses-2 .courses-grid .course-content .course-stats .stat i {
    color: var(--accent-color);
}

.courses-2 .courses-grid .course-content .course-stats .rating {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.courses-2 .courses-grid .course-content .course-stats .rating i {
    color: #ffc107;
    font-size: 12px;
}

.courses-2 .courses-grid .course-content .course-stats .rating span {
    margin-left: 5px;
}

.courses-2 .courses-grid .course-content .instructor-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    padding-top: 15px;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.courses-2 .courses-grid .course-content .instructor-info .instructor-avatar {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    object-fit: cover;
}

.courses-2 .courses-grid .course-content .instructor-info .instructor-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--heading-color);
}

.courses-2 .courses-grid .course-content .btn-course {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--contrast-color);
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
    margin-top: auto;
}

.courses-2 .courses-grid .course-content .btn-course:hover {
    background-color: color-mix(in srgb, var(--accent-color), black 15%);
    color: var(--contrast-color);
    transform: translateY(-2px);
}

.courses-2 .pagination-wrapper {
    margin-top: 40px;
}

.courses-2 .pagination-wrapper .pagination .page-item {
    margin: 0 3px;
}

.courses-2 .pagination-wrapper .pagination .page-item .page-link {
    border: none;
    background-color: var(--surface-color);
    color: var(--default-color);
    padding: 12px 16px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.courses-2 .pagination-wrapper .pagination .page-item .page-link:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
}

.courses-2 .pagination-wrapper .pagination .page-item.active .page-link {
    background-color: var(--accent-color);
    color: var(--contrast-color);
}

.courses-2 .pagination-wrapper .pagination .page-item.disabled .page-link {
    background-color: color-mix(in srgb, var(--surface-color), transparent 50%);
    color: color-mix(in srgb, var(--default-color), transparent 50%);
    cursor: not-allowed;
}

.courses-2 .pagination-wrapper .pagination .page-item.disabled .page-link:hover {
    background-color: color-mix(in srgb, var(--surface-color), transparent 50%);
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}

@media (max-width: 992px) {
    .courses-2 .course-filters {
        margin-bottom: 20px;
    }

    .courses-2 .courses-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .courses-2 .courses-header .search-box {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .courses-2 .courses-grid .course-card {
        margin-bottom: 20px;
    }

    .courses-2 .course-filters {
        padding: 20px;
    }
}

/*--------------------------------------------------------------
# Course Details Section
--------------------------------------------------------------*/
.course-hero {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: nowrap;
    /* width: 191%; */
}

/* Content column */
.course-hero .hero-content {
    flex: 0 0 60%;
    /* 60% fixed width, no shrink */
    max-width: 60%;
}

/* Image column */
.course-hero .hero-image {
    flex: 0 0 40%;
    /* 40% fixed width, no shrink */
    /* max-width: 40%; */
    position: relative;
}

/* Image behavior */
.course-hero .hero-image img {
    width: 100%;
    height: auto;
    /* border-radius: 12px; */
    display: block;
}

/* Responsive fallback */
@media (max-width: 992px) {
    .course-hero {
        flex-direction: column;
        text-align: center;
    }

    .course-hero .hero-content,
    .course-hero .hero-image {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 992px) {
    .course-details .course-hero {
        flex-direction: column;
        text-align: center;
    }
}

.course-details .course-hero .hero-content {
    flex: 1;
}

.course-details .course-hero .hero-content .course-badge {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

@media (max-width: 992px) {
    .course-details .course-hero .hero-content .course-badge {
        justify-content: center;
    }
}

.course-details .course-hero .hero-content .course-badge span {
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
}

.course-details .course-hero .hero-content .course-badge span.category {
    background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
    color: var(--accent-color);
}

.course-details .course-hero .hero-content .course-badge span.level {
    background-color: color-mix(in srgb, var(--heading-color), transparent 85%);
    color: var(--heading-color);
}

.course-details .course-hero .hero-content h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    color: var(--heading-color);
}

@media (max-width: 768px) {
    .course-details .course-hero .hero-content h1 {
        font-size: 32px;
    }
}

.course-details .course-hero .hero-content .course-subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    margin-bottom: 30px;
}

.course-details .course-hero .hero-content .instructor-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background-color: #103f90;
    border-radius: 15px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 992px) {
    .course-details .course-hero .hero-content .instructor-card {
        justify-content: center;
    }
}

.course-details .course-hero .hero-content .instructor-card .instructor-image {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid grey;
}

.course-details .course-hero .hero-content .instructor-card .instructor-details h5 {
    margin: 0 0 5px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--heading-color);
}

.course-details .course-hero .hero-content .instructor-card .instructor-details span {
    display: block;
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    margin-bottom: 8px;
}

.course-details .course-hero .hero-content .instructor-card .instructor-details .instructor-rating {
    display: flex;
    align-items: center;
    gap: 5px;
}

.course-details .course-hero .hero-content .instructor-card .instructor-details .instructor-rating i {
    color: #ffc107;
    font-size: 14px;
}

.course-details .course-hero .hero-content .instructor-card .instructor-details .instructor-rating span {
    font-size: 13px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    margin-left: 8px;
    margin-bottom: 0;
}

.course-details .course-hero .hero-image {
    flex: 1;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    /* width: 100%!important; */
}

.course-details .course-hero .hero-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.course-details .course-hero .hero-image .play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.course-details .course-hero .hero-image .play-overlay .play-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--accent-color);
    border: none;
    color: var(--contrast-color);
    font-size: 32px;
    margin-bottom: 15px;
    transition: all 0.3s;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-color), transparent 50%);
}

.course-details .course-hero .hero-image .play-overlay .play-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 40px color-mix(in srgb, var(--accent-color), transparent 40%);
}

.course-details .course-hero .hero-image .play-overlay span {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--contrast-color);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.course-details .course-nav-tabs .nav-tabs {
    border: none;
    background-color: var(--surface-color);
    border-radius: 15px;
    padding: 10px;
    margin-bottom: 40px;
    box-shadow: 0 5px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

.course-details .course-nav-tabs .nav-tabs .nav-item {
    flex: 1;
}

.course-details .course-nav-tabs .nav-tabs .nav-link {
    border: none;
    border-radius: 10px;
    padding: 15px 20px;
    text-align: center;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    background: none;
    font-weight: 500;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 224px;
}

@media (max-width: 576px) {
    .course-details .course-nav-tabs .nav-tabs .nav-link {
        padding: 12px 10px;
        font-size: 14px;
        flex-direction: column;
        gap: 5px;
    }
}

.course-details .course-nav-tabs .nav-tabs .nav-link i {
    font-size: 18px;
}

@media (max-width: 576px) {
    .course-details .course-nav-tabs .nav-tabs .nav-link i {
        font-size: 16px;
    }
}

.course-details .course-nav-tabs .nav-tabs .nav-link.active {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.course-details .course-nav-tabs .nav-tabs .nav-link:hover:not(.active) {
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--accent-color);
}

.course-details .course-nav-tabs .tab-content .overview-section {
    margin-bottom: 40px;
}

.course-details .course-nav-tabs .tab-content .overview-section h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--heading-color);
    font-weight: 700;
}

.course-details .course-nav-tabs .tab-content .overview-section p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--default-color);
    margin-bottom: 15px;
}

.course-details .course-nav-tabs .tab-content .skills-grid {
    margin-bottom: 40px;
}

.course-details .course-nav-tabs .tab-content .skills-grid h3 {
    font-size: 24px;
    margin-bottom: 30px;
    color: var(--heading-color);
    font-weight: 700;
}

.course-details .course-nav-tabs .tab-content .skills-grid .skill-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 25px;
    background-color: var(--surface-color);
    border-radius: 15px;
    margin-bottom: 20px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    transition: all 0.3s;
}

.course-details .course-nav-tabs .tab-content .skills-grid .skill-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--default-color), transparent 85%);
}

.course-details .course-nav-tabs .tab-content .skills-grid .skill-item .skill-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg,
            var(--accent-color),
            color-mix(in srgb, var(--accent-color), blue 20%));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.course-details .course-nav-tabs .tab-content .skills-grid .skill-item .skill-icon i {
    font-size: 24px;
    color: var(--contrast-color);
}

.course-details .course-nav-tabs .tab-content .skills-grid .skill-item .skill-content h5 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--heading-color);
}

.course-details .course-nav-tabs .tab-content .skills-grid .skill-item .skill-content p {
    margin: 0;
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.course-details .course-nav-tabs .tab-content .requirements-section h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: var(--heading-color);
    font-weight: 700;
}

.course-details .course-nav-tabs .tab-content .requirements-section .requirements-list {
    list-style: none;
    padding: 0;
}

.course-details .course-nav-tabs .tab-content .requirements-section .requirements-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 15px;
    color: var(--default-color);
}

.course-details .course-nav-tabs .tab-content .requirements-section .requirements-list li i {
    color: var(--accent-color);
    font-size: 18px;
    flex-shrink: 0;
}

.course-details .course-nav-tabs .tab-content .curriculum-overview {
    margin-bottom: 30px;
}

.course-details .course-nav-tabs .tab-content .curriculum-overview .curriculum-stats {
    display: flex;
    gap: 30px;
    padding: 25px;
    background-color: var(--surface-color);
    border-radius: 15px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 576px) {
    .course-details .course-nav-tabs .tab-content .curriculum-overview .curriculum-stats {
        flex-direction: column;
        gap: 15px;
    }
}

.course-details .course-nav-tabs .tab-content .curriculum-overview .curriculum-stats .stat {
    display: flex;
    align-items: center;
    gap: 12px;
}

.course-details .course-nav-tabs .tab-content .curriculum-overview .curriculum-stats .stat i {
    color: var(--accent-color);
    font-size: 20px;
}

.course-details .course-nav-tabs .tab-content .curriculum-overview .curriculum-stats .stat span {
    font-weight: 600;
    color: var(--default-color);
}

.course-details .course-nav-tabs .tab-content .accordion .curriculum-module {
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
}

.course-details .course-nav-tabs .tab-content .accordion .curriculum-module .accordion-button {
    background-color: var(--surface-color);
    color: var(--default-color);
    border: none;
    padding: 25px;
    font-weight: 600;
    box-shadow: none;
}

.course-details .course-nav-tabs .tab-content .accordion .curriculum-module .accordion-button:not(.collapsed) {
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
    color: var(--heading-color);
}

.course-details .course-nav-tabs .tab-content .accordion .curriculum-module .accordion-button:focus {
    box-shadow: none;
}

.course-details .course-nav-tabs .tab-content .accordion .curriculum-module .accordion-button .module-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.course-details .course-nav-tabs .tab-content .accordion .curriculum-module .accordion-button .module-info .module-title {
    font-size: 18px;
}

.course-details .course-nav-tabs .tab-content .accordion .curriculum-module .accordion-button .module-info .module-meta {
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    font-weight: 400;
}

.course-details .course-nav-tabs .tab-content .accordion .curriculum-module .accordion-body {
    padding: 0;
}

.course-details .course-nav-tabs .tab-content .accordion .curriculum-module .accordion-body .lessons-list .lesson {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 25px;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 95%);
    transition: background-color 0.3s;
}

.course-details .course-nav-tabs .tab-content .accordion .curriculum-module .accordion-body .lessons-list .lesson:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
}

.course-details .course-nav-tabs .tab-content .accordion .curriculum-module .accordion-body .lessons-list .lesson:last-child {
    border-bottom: none;
}

.course-details .course-nav-tabs .tab-content .accordion .curriculum-module .accordion-body .lessons-list .lesson i {
    color: var(--accent-color);
    font-size: 18px;
    margin-right: 15px;
}

.course-details .course-nav-tabs .tab-content .accordion .curriculum-module .accordion-body .lessons-list .lesson .lesson-title {
    flex: 1;
    font-size: 15px;
    color: var(--default-color);
}

.course-details .course-nav-tabs .tab-content .accordion .curriculum-module .accordion-body .lessons-list .lesson .lesson-time {
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    font-weight: 500;
}

.course-details .course-nav-tabs .tab-content .reviews-summary {
    margin-bottom: 40px;
    text-align: center;
    padding: 40px;
    background-color: var(--surface-color);
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.course-details .course-nav-tabs .tab-content .reviews-summary .rating-overview .overall-rating .rating-number {
    font-size: 64px;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
    margin-bottom: 10px;
}

.course-details .course-nav-tabs .tab-content .reviews-summary .rating-overview .overall-rating .rating-stars {
    margin-bottom: 10px;
}

.course-details .course-nav-tabs .tab-content .reviews-summary .rating-overview .overall-rating .rating-stars i {
    font-size: 24px;
    color: #ffc107;
    margin: 0 2px;
}

.course-details .course-nav-tabs .tab-content .reviews-summary .rating-overview .overall-rating .rating-text {
    font-size: 16px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.course-details .course-nav-tabs .tab-content .reviews-list .review-item {
    padding: 30px;
    background-color: var(--surface-color);
    border-radius: 15px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    margin-bottom: 25px;
}

.course-details .course-nav-tabs .tab-content .reviews-list .review-item .reviewer-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.course-details .course-nav-tabs .tab-content .reviews-list .review-item .reviewer-info .reviewer-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.course-details .course-nav-tabs .tab-content .reviews-list .review-item .reviewer-info .reviewer-details {
    flex: 1;
}

.course-details .course-nav-tabs .tab-content .reviews-list .review-item .reviewer-info .reviewer-details h6 {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--heading-color);
}

.course-details .course-nav-tabs .tab-content .reviews-list .review-item .reviewer-info .reviewer-details .review-rating i {
    color: #ffc107;
    font-size: 14px;
    margin-right: 2px;
}

.course-details .course-nav-tabs .tab-content .reviews-list .review-item .reviewer-info .review-date {
    font-size: 13px;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.course-details .course-nav-tabs .tab-content .reviews-list .review-item .review-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--default-color);
    margin: 0;
}

.course-details .enrollment-card {
    background-color: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    border-radius: 20px;
    margin-bottom: 30px;
    box-shadow: 0 10px 40px color-mix(in srgb, var(--default-color), transparent 90%);
    /* position: sticky; */
    /* top: 100px; */
}

.course-details .enrollment-card .card-header {
    padding: 30px 30px 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 95%);
}

.course-details .enrollment-card .card-header .price-display {
    display: flex;
    align-items: center;
    gap: 15px;
    /* margin-bottom: 15px; */
}

.course-details .enrollment-card .card-header .price-display .current-price {
    font-size: 36px;
    font-weight: 700;
    color: var(--accent-color);
}

.course-details .enrollment-card .card-header .price-display .original-price {
    font-size: 20px;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
    text-decoration: line-through;
}

.course-details .enrollment-card .card-header .price-display .discount {
    padding: 5px 12px;
    background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
    color: var(--accent-color);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.course-details .enrollment-card .card-header .enrollment-count {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.course-details .enrollment-card .card-header .enrollment-count i {
    color: var(--accent-color);
}

.course-details .enrollment-card .card-body {
    padding: 30px;
}

.course-details .enrollment-card .card-body .course-highlights {
    margin-bottom: 30px;
}

.course-details .enrollment-card .card-body .course-highlights .highlight-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.course-details .enrollment-card .card-body .course-highlights .highlight-item i {
    color: var(--accent-color);
    font-size: 16px;
    width: 16px;
}

.course-details .enrollment-card .card-body .course-highlights .highlight-item span {
    font-size: 14px;
    color: var(--default-color);
}

.course-details .enrollment-card .card-body .action-buttons {
    margin-bottom: 25px;
}

.course-details .enrollment-card .card-body .action-buttons .btn-primary {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg,
            var(--accent-color),
            color-mix(in srgb, var(--accent-color), blue 20%));
    color: var(--contrast-color);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    transition: all 0.3s;
}

.course-details .enrollment-card .card-body .action-buttons .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.course-details .enrollment-card .card-body .action-buttons .btn-secondary {
    width: 100%;
    padding: 16px;
    background-color: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s;
}

.course-details .enrollment-card .card-body .action-buttons .btn-secondary:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
}

.course-details .enrollment-card .card-body .guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.course-details .enrollment-card .card-body .guarantee i {
    color: var(--accent-color);
}

.course-details .course-details-card {
    background-color: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    border-radius: 20px;
    padding: 30px;
    margin-bottom: 30px;
}

.course-details .course-details-card h4 {
    font-size: 20px;
    margin-bottom: 25px;
    color: var(--heading-color);
}

.course-details .course-details-card .detail-grid .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 95%);
}

.course-details .course-details-card .detail-grid .detail-row:last-child {
    border-bottom: none;
}

.course-details .course-details-card .detail-grid .detail-row .detail-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--default-color);
}

.course-details .course-details-card .detail-grid .detail-row .detail-value {
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.course-details .share-course-card {
    background-color: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
}

.course-details .share-course-card h4 {
    font-size: 20px;
    margin-bottom: 25px;
    color: var(--heading-color);
}

.course-details .share-course-card .social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.course-details .share-course-card .social-links .social-link {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    text-decoration: none;
}

.course-details .share-course-card .social-links .social-link.facebook {
    background-color: #1877f2;
    color: white;
}

.course-details .share-course-card .social-links .social-link.facebook:hover {
    background-color: color-mix(in srgb, #1877f2, black 10%);
}

.course-details .share-course-card .social-links .social-link.twitter {
    background-color: #1da1f2;
    color: white;
}

.course-details .share-course-card .social-links .social-link.twitter:hover {
    background-color: color-mix(in srgb, #1da1f2, black 10%);
}

.course-details .share-course-card .social-links .social-link.linkedin {
    background-color: #0077b5;
    color: white;
}

.course-details .share-course-card .social-links .social-link.linkedin:hover {
    background-color: color-mix(in srgb, #0077b5, black 10%);
}

.course-details .share-course-card .social-links .social-link.email {
    background-color: var(--accent-color);
    color: white;
}

.course-details .share-course-card .social-links .social-link.email:hover {
    background-color: color-mix(in srgb, var(--accent-color), black 10%);
}

.course-details .share-course-card .social-links .social-link:hover {
    transform: translateY(-3px);
}

@media (max-width: 992px) {
    .course-details .enrollment-card {
        position: static;
    }
}

/*--------------------------------------------------------------
# Instructors Section
--------------------------------------------------------------*/
.instructors .instructor-card {
    background: var(--surface-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--default-color), transparent 94%);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.instructors .instructor-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px color-mix(in srgb, var(--default-color), transparent 88%);
}

.instructors .instructor-card:hover .instructor-image .overlay-content {
    opacity: 1;
}

.instructors .instructor-card:hover .instructor-image img {
    transform: scale(1.05);
}

.instructors .instructor-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.instructors .instructor-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.instructors .instructor-image .overlay-content {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.instructors .instructor-image .rating-stars {
    background: var(--surface-color);
    padding: 8px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--default-color), transparent 90%);
}

.instructors .instructor-image .rating-stars i {
    color: #ffc107;
    font-size: 12px;
}

.instructors .instructor-image .rating-stars i.bi-star {
    color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.instructors .instructor-image .rating-stars span {
    font-size: 12px;
    font-weight: 600;
    margin-left: 4px;
    color: var(--heading-color);
}

.instructors .instructor-image .course-count {
    background: var(--accent-color);
    color: var(--contrast-color);
    padding: 8px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.instructors .instructor-image .course-count i {
    font-size: 14px;
}

.instructors .instructor-image .course-count span {
    font-size: 12px;
    font-weight: 600;
}

.instructors .instructor-info {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.instructors .instructor-info h5 {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--heading-color);
}

.instructors .instructor-info .specialty {
    color: var(--accent-color);
    font-weight: 600;
    font-size: 14px;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.instructors .instructor-info .description {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.instructors .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: color-mix(in srgb, var(--accent-color), transparent 95%);
    border-radius: 12px;
}

.instructors .stats-grid .stat {
    text-align: center;
}

.instructors .stats-grid .stat .number {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: var(--heading-color);
    line-height: 1;
    margin-bottom: 4px;
}

.instructors .stats-grid .stat .label {
    font-size: 11px;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.instructors .action-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.instructors .action-buttons .btn-view {
    background: var(--accent-color);
    color: var(--contrast-color);
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
}

.instructors .action-buttons .btn-view:hover {
    transform: translateY(-2px);
}

.instructors .action-buttons .social-links {
    display: flex;
    gap: 6px;
}

.instructors .action-buttons .social-links a {
    width: 32px;
    height: 32px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    transition: all 0.3s ease;
}

.instructors .action-buttons .social-links a:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--contrast-color);
    transform: scale(1.1);
}

.instructors .action-buttons .social-links a i {
    font-size: 14px;
}

@media (max-width: 1399px) {
    .instructors .col-xl-3 {
        flex: 0 0 auto;
        width: 25%;
    }
}

@media (max-width: 1199px) {
    .instructors .col-lg-4 {
        flex: 0 0 auto;
        width: 33.333333%;
    }
}

@media (max-width: 991px) {
    .instructors .instructor-card {
        margin-bottom: 20px;
    }

    .instructors .instructor-image {
        height: 220px;
    }

    .instructors .instructor-info {
        padding: 20px;
    }

    .instructors .instructor-info h5 {
        font-size: 18px;
    }
}

@media (max-width: 767px) {
    .instructors .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .instructors .instructor-image {
        height: 200px;
    }

    .instructors .instructor-info {
        padding: 18px;
    }
}

@media (max-width: 575px) {
    .instructors .row>* {
        width: 100% !important;
    }

    .instructors .instructor-image {
        height: 250px;
    }

    .instructors .instructor-image .overlay-content {
        opacity: 1;
    }

    .instructors .action-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .instructors .action-buttons .btn-view {
        width: 100%;
        text-align: center;
    }
}

/*--------------------------------------------------------------
# Instructor Profile Section
--------------------------------------------------------------*/
.instructor-profile .instructor-hero-banner {
    position: relative;
    border-radius: 25px;
    overflow: hidden;
    background: linear-gradient(135deg,
            var(--accent-color),
            var(--heading-color));
    margin-bottom: 40px;
}

.instructor-profile .instructor-hero-banner .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.instructor-profile .instructor-hero-banner .hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.instructor-profile .instructor-hero-banner .hero-background .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--accent-color), transparent 20%) 0%,
            color-mix(in srgb, var(--accent-color), transparent 30%) 100%);
}

.instructor-profile .instructor-hero-banner .hero-content {
    position: relative;
    z-index: 2;
    padding: 60px 40px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-avatar {
    position: relative;
    flex-shrink: 0;
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-avatar img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    border: 6px solid var(--contrast-color);
    object-fit: cover;
    box-shadow: 0 20px 40px color-mix(in srgb, var(--default-color), transparent 70%);
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-avatar .status-badge {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: var(--contrast-color);
    color: var(--accent-color);
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 5px 15px color-mix(in srgb, var(--default-color), transparent 80%);
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-avatar .status-badge i {
    font-size: 14px;
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-info {
    color: var(--contrast-color);
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-info h2 {
    color: var(--contrast-color);
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px color-mix(in srgb, var(--default-color), transparent 70%);
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-info .title {
    font-size: 20px;
    margin-bottom: 20px;
    opacity: 0.9;
    font-weight: 500;
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-info .credentials {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-info .credentials .credential {
    background-color: color-mix(in srgb,
            var(--contrast-color),
            transparent 80%);
    color: var(--contrast-color);
    padding: 8px 16px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 600;
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-info .rating-overview {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-info .rating-overview .stars i {
    color: #ffc107;
    font-size: 18px;
    margin-right: 2px;
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-info .rating-overview .rating-text {
    font-size: 16px;
    opacity: 0.9;
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-info .contact-actions {
    display: flex;
    align-items: center;
    gap: 20px;
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-info .contact-actions .btn-contact {
    background-color: var(--contrast-color);
    color: var(--accent-color);
    padding: 15px 30px;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-info .contact-actions .btn-contact:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px color-mix(in srgb, var(--default-color), transparent 70%);
    color: var(--accent-color);
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-info .contact-actions .social-media {
    display: flex;
    gap: 10px;
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-info .contact-actions .social-media a {
    width: 45px;
    height: 45px;
    background-color: color-mix(in srgb,
            var(--contrast-color),
            transparent 80%);
    color: var(--contrast-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
}

.instructor-profile .instructor-hero-banner .hero-content .instructor-info .contact-actions .social-media a:hover {
    background-color: var(--contrast-color);
    color: var(--accent-color);
    transform: translateY(-3px);
}

.instructor-profile .content-tabs .custom-tabs {
    background-color: var(--surface-color);
    border-radius: 15px;
    padding: 8px;
    border: none;
    box-shadow: 0 5px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

.instructor-profile .content-tabs .custom-tabs .nav-item .nav-link {
    border: none;
    border-radius: 10px;
    color: var(--default-color);
    font-weight: 500;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    margin-right: 5px;
    width: 174px;
}

.instructor-profile .content-tabs .custom-tabs .nav-item .nav-link i {
    font-size: 16px;
}

.instructor-profile .content-tabs .custom-tabs .nav-item .nav-link.active {
    background-color: var(--accent-color);
    color: var(--contrast-color);
}

.instructor-profile .content-tabs .custom-tabs .nav-item .nav-link:hover:not(.active) {
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--accent-color);
}

.instructor-profile .content-tabs .custom-tab-content {
    padding: 40px 0;
}

.instructor-profile .content-tabs .custom-tab-content .about-content .bio-section {
    margin-bottom: 40px;
}

.instructor-profile .content-tabs .custom-tab-content .about-content .bio-section h4 {
    color: var(--heading-color);
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: 600;
}

.instructor-profile .content-tabs .custom-tab-content .about-content .bio-section p {
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 16px;
}

.instructor-profile .content-tabs .custom-tab-content .about-content .expertise-grid h4 {
    color: var(--heading-color);
    font-size: 24px;
    margin-bottom: 25px;
    font-weight: 600;
}

.instructor-profile .content-tabs .custom-tab-content .about-content .expertise-grid .skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.instructor-profile .content-tabs .custom-tab-content .about-content .expertise-grid .skills-grid .skill-item {
    background-color: var(--surface-color);
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.instructor-profile .content-tabs .custom-tab-content .about-content .expertise-grid .skills-grid .skill-item i {
    font-size: 32px;
    color: var(--accent-color);
    margin-bottom: 15px;
}

.instructor-profile .content-tabs .custom-tab-content .about-content .expertise-grid .skills-grid .skill-item span {
    font-weight: 600;
    color: var(--heading-color);
}

.instructor-profile .content-tabs .custom-tab-content .about-content .expertise-grid .skills-grid .skill-item:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px);
}

.instructor-profile .content-tabs .custom-tab-content .experience-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.instructor-profile .content-tabs .custom-tab-content .experience-grid .experience-card {
    display: flex;
    gap: 30px;
    background-color: var(--surface-color);
    padding: 30px;
    border-radius: 15px;
    border-left: 5px solid var(--accent-color);
}

.instructor-profile .content-tabs .custom-tab-content .experience-grid .experience-card .timeline-marker {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    padding: 10px 15px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
    height: fit-content;
}

.instructor-profile .content-tabs .custom-tab-content .experience-grid .experience-card .experience-details h5 {
    color: var(--heading-color);
    font-size: 22px;
    margin-bottom: 8px;
    font-weight: 600;
}

.instructor-profile .content-tabs .custom-tab-content .experience-grid .experience-card .experience-details .institution {
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 16px;
}

.instructor-profile .content-tabs .custom-tab-content .experience-grid .experience-card .experience-details p {
    line-height: 1.7;
    margin: 0;
}

.instructor-profile .content-tabs .custom-tab-content .courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.instructor-profile .content-tabs .custom-tab-content .courses-grid .course-item {
    background-color: var(--surface-color);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 20px color-mix(in srgb, var(--default-color), transparent 90%);
    transition: all 0.3s ease;
}

.instructor-profile .content-tabs .custom-tab-content .courses-grid .course-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px color-mix(in srgb, var(--default-color), transparent 80%);
}

.instructor-profile .content-tabs .custom-tab-content .courses-grid .course-item .course-thumb {
    position: relative;
}

.instructor-profile .content-tabs .custom-tab-content .courses-grid .course-item .course-thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.instructor-profile .content-tabs .custom-tab-content .courses-grid .course-item .course-thumb .course-level {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--accent-color);
    color: var(--contrast-color);
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.instructor-profile .content-tabs .custom-tab-content .courses-grid .course-item .course-info {
    padding: 25px;
}

.instructor-profile .content-tabs .custom-tab-content .courses-grid .course-item .course-info h5 {
    color: var(--heading-color);
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 600;
}

.instructor-profile .content-tabs .custom-tab-content .courses-grid .course-item .course-info .course-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.instructor-profile .content-tabs .custom-tab-content .courses-grid .course-item .course-info .course-stats span {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.instructor-profile .content-tabs .custom-tab-content .courses-grid .course-item .course-info .course-stats span i {
    color: var(--accent-color);
}

.instructor-profile .content-tabs .custom-tab-content .courses-grid .course-item .course-info .price {
    color: var(--accent-color);
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

.instructor-profile .content-tabs .custom-tab-content .reviews-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.instructor-profile .content-tabs .custom-tab-content .reviews-container .review-card {
    background-color: var(--surface-color);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

.instructor-profile .content-tabs .custom-tab-content .reviews-container .review-card .review-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.instructor-profile .content-tabs .custom-tab-content .reviews-container .review-card .review-header .reviewer-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.instructor-profile .content-tabs .custom-tab-content .reviews-container .review-card .review-header .reviewer-info h6 {
    color: var(--heading-color);
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: 600;
}

.instructor-profile .content-tabs .custom-tab-content .reviews-container .review-card .review-header .reviewer-info p {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    margin-bottom: 8px;
    font-size: 14px;
}

.instructor-profile .content-tabs .custom-tab-content .reviews-container .review-card .review-header .reviewer-info .review-rating i {
    color: #ffc107;
    font-size: 14px;
    margin-right: 2px;
}

.instructor-profile .content-tabs .custom-tab-content .reviews-container .review-card p {
    line-height: 1.7;
    margin: 0;
    font-style: italic;
}

.instructor-profile .sidebar-widgets {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.instructor-profile .sidebar-widgets .stats-widget,
.instructor-profile .sidebar-widgets .achievements-widget,
.instructor-profile .sidebar-widgets .contact-widget {
    background-color: var(--surface-color);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px color-mix(in srgb, var(--default-color), transparent 90%);
}

.instructor-profile .sidebar-widgets .stats-widget h4,
.instructor-profile .sidebar-widgets .achievements-widget h4,
.instructor-profile .sidebar-widgets .contact-widget h4 {
    color: var(--heading-color);
    font-size: 20px;
    margin-bottom: 25px;
    font-weight: 600;
}

.instructor-profile .sidebar-widgets .stats-widget .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.instructor-profile .sidebar-widgets .stats-widget .stats-grid .stat-box {
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    border: 2px solid color-mix(in srgb, var(--accent-color), transparent 85%);
    transition: all 0.3s ease;
}

.instructor-profile .sidebar-widgets .stats-widget .stats-grid .stat-box:hover {
    border-color: var(--accent-color);
    transform: translateY(-3px);
}

.instructor-profile .sidebar-widgets .stats-widget .stats-grid .stat-box .stat-icon {
    width: 50px;
    height: 50px;
    background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
    color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
}

.instructor-profile .sidebar-widgets .stats-widget .stats-grid .stat-box .stat-icon i {
    font-size: 20px;
}

.instructor-profile .sidebar-widgets .stats-widget .stats-grid .stat-box .stat-content h5 {
    color: var(--heading-color);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
}

.instructor-profile .sidebar-widgets .stats-widget .stats-grid .stat-box .stat-content p {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    font-size: 14px;
    margin: 0;
}

.instructor-profile .sidebar-widgets .achievements-widget .achievement-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.instructor-profile .sidebar-widgets .achievements-widget .achievement-list .achievement-item {
    display: flex;
    gap: 15px;
}

.instructor-profile .sidebar-widgets .achievements-widget .achievement-list .achievement-item i {
    width: 40px;
    height: 40px;
    background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
    color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.instructor-profile .sidebar-widgets .achievements-widget .achievement-list .achievement-item .achievement-text h6 {
    color: var(--heading-color);
    font-size: 16px;
    margin-bottom: 5px;
    font-weight: 600;
}

.instructor-profile .sidebar-widgets .achievements-widget .achievement-list .achievement-item .achievement-text p {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    font-size: 14px;
    margin: 0;
}

.instructor-profile .sidebar-widgets .contact-widget .contact-info {
    margin-bottom: 25px;
}

.instructor-profile .sidebar-widgets .contact-widget .contact-info .contact-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.instructor-profile .sidebar-widgets .contact-widget .contact-info .contact-item i {
    width: 35px;
    height: 35px;
    background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
    color: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.instructor-profile .sidebar-widgets .contact-widget .contact-info .contact-item span {
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.instructor-profile .sidebar-widgets .contact-widget .office-hours {
    padding: 20px;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    border-radius: 12px;
    border-left: 4px solid var(--accent-color);
}

.instructor-profile .sidebar-widgets .contact-widget .office-hours h6 {
    color: var(--heading-color);
    font-weight: 600;
    margin-bottom: 10px;
}

.instructor-profile .sidebar-widgets .contact-widget .office-hours p {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    margin: 0;
    font-size: 14px;
}

@media (max-width: 992px) {
    .instructor-profile .instructor-hero-banner .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .instructor-profile .instructor-hero-banner .hero-content .instructor-info .credentials {
        justify-content: center;
    }

    .instructor-profile .instructor-hero-banner .hero-content .instructor-info .contact-actions {
        justify-content: center;
    }

    .instructor-profile .sidebar-widgets {
        margin-top: 40px;
    }
}

@media (max-width: 768px) {
    .instructor-profile .instructor-hero-banner .hero-content {
        padding: 40px 20px;
    }

    .instructor-profile .instructor-hero-banner .hero-content .instructor-avatar img {
        width: 140px;
        height: 140px;
    }

    .instructor-profile .instructor-hero-banner .hero-content .instructor-info h2 {
        font-size: 32px;
    }

    .instructor-profile .instructor-hero-banner .hero-content .instructor-info .credentials {
        flex-direction: column;
        gap: 10px;
    }

    .instructor-profile .instructor-hero-banner .hero-content .instructor-info .contact-actions {
        flex-direction: column;
        gap: 15px;
    }

    .instructor-profile .custom-tabs .nav-item .nav-link {
        padding: 12px 15px;
        font-size: 14px;
    }

    .instructor-profile .stats-widget .stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

/*--------------------------------------------------------------
# Enroll Section
--------------------------------------------------------------*/
.enroll {
    background: linear-gradient(135deg,
            var(--surface-color) 0%,
            color-mix(in srgb, var(--accent-color), transparent 95%) 100%);
}

.enroll .enrollment-form-wrapper {
    background: var(--surface-color);
    border-radius: 20px;
    padding: 50px 40px;
    box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 85%);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

@media (max-width: 768px) {
    .enroll .enrollment-form-wrapper {
        padding: 30px 20px;
        border-radius: 15px;
    }
}

.enroll .enrollment-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    background: linear-gradient(45deg,
            var(--heading-color),
            var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 768px) {
    .enroll .enrollment-header h2 {
        font-size: 2rem;
    }
}

.enroll .enrollment-header p {
    font-size: 1.1rem;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    line-height: 1.6;
}

.enroll .enrollment-form .form-group {
    margin-bottom: 1.5rem;
}

.enroll .enrollment-form .form-group .form-label {
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.enroll .enrollment-form .form-group .form-control,
.enroll .enrollment-form .form-group .form-select {
    background-color: var(--surface-color);
    border: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 1rem;
    transition: all 0.3s ease;
    color: var(--default-color);
}

.enroll .enrollment-form .form-group .form-control:focus,
.enroll .enrollment-form .form-group .form-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 80%);
    outline: none;
}

.enroll .enrollment-form .form-group .form-control::placeholder,
.enroll .enrollment-form .form-group .form-select::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.enroll .enrollment-form .form-group textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.enroll .enrollment-form .schedule-options .form-check {
    margin-bottom: 12px;
    padding: 15px 20px;
    background: color-mix(in srgb, var(--accent-color), transparent 95%);
    border-radius: 10px;
    border: 2px solid color-mix(in srgb, var(--accent-color), transparent 85%);
    transition: all 0.3s ease;
}

.enroll .enrollment-form .schedule-options .form-check:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.enroll .enrollment-form .schedule-options .form-check .form-check-input {
    margin-top: 3px;
    margin-left: 0px;
}

.enroll .enrollment-form .schedule-options .form-check .form-check-input:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.enroll .enrollment-form .schedule-options .form-check .form-check-label {
    font-weight: 500;
    margin-left: 10px;
    cursor: pointer;
}

.enroll .enrollment-form .agreement-section {
    background: color-mix(in srgb, var(--heading-color), transparent 95%);
    padding: 20px;
    border-radius: 10px;
    border-left: 4px solid var(--accent-color);
}

.enroll .enrollment-form .agreement-section .form-check {
    margin-bottom: 15px;
}

.enroll .enrollment-form .agreement-section .form-check:last-child {
    margin-bottom: 0;
}

.enroll .enrollment-form .agreement-section .form-check .form-check-input:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}

.enroll .enrollment-form .agreement-section .form-check .form-check-label {
    font-size: 0.95rem;
    line-height: 1.5;
}

.enroll .enrollment-form .agreement-section .form-check .form-check-label a {
    color: var(--accent-color);
    text-decoration: underline;
    font-weight: 600;
}

.enroll .enrollment-form .agreement-section .form-check .form-check-label a:hover {
    color: var(--heading-color);
}

.enroll .enrollment-form .btn-enroll {
    background: var(--accent-color);
    color: var(--contrast-color);
    border: none;
    padding: 16px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.enroll .enrollment-form .btn-enroll:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,
            transparent,
            color-mix(in srgb, var(--contrast-color), transparent 80%),
            transparent);
    transition: left 0.5s;
}

.enroll .enrollment-form .btn-enroll:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.enroll .enrollment-form .btn-enroll:hover:before {
    left: 100%;
}

.enroll .enrollment-form .btn-enroll:active {
    transform: translateY(-1px);
}

.enroll .enrollment-form .btn-enroll .bi {
    font-size: 1.2rem;
}

.enroll .enrollment-form .enrollment-note {
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    font-style: italic;
}

.enroll .enrollment-form .enrollment-note .bi {
    color: var(--accent-color);
    margin-right: 5px;
}

.enroll .enrollment-benefits {
    background: var(--surface-color);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 15px 50px color-mix(in srgb, var(--default-color), transparent 90%);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    height: fit-content;
    position: sticky;
    top: 100px;
}

.enroll .enrollment-benefits h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--heading-color);
    text-align: center;
}

.enroll .enrollment-benefits .benefit-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    padding: 20px;
    background: color-mix(in srgb, var(--accent-color), transparent 95%);
    border-radius: 15px;
    transition: all 0.3s ease;
}

.enroll .enrollment-benefits .benefit-item:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    transform: translateX(5px);
}

.enroll .enrollment-benefits .benefit-item .benefit-icon {
    background: var(--accent-color);
    color: var(--contrast-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 15px;
    flex-shrink: 0;
}

.enroll .enrollment-benefits .benefit-item .benefit-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: var(--heading-color);
}

.enroll .enrollment-benefits .benefit-item .benefit-content p {
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    margin: 0;
    line-height: 1.4;
}

.enroll .enrollment-benefits .enrollment-stats {
    background: var(--accent-color);
    padding: 25px;
    border-radius: 15px;
    text-align: center;
}

.enroll .enrollment-benefits .enrollment-stats .stat-item {
    display: block;
    margin-bottom: 15px;
}

.enroll .enrollment-benefits .enrollment-stats .stat-item:last-child {
    margin-bottom: 0;
}

.enroll .enrollment-benefits .enrollment-stats .stat-item .stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    color: var(--contrast-color);
    line-height: 1;
}

.enroll .enrollment-benefits .enrollment-stats .stat-item .stat-label {
    display: block;
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--contrast-color), transparent 20%);
    margin-top: 5px;
}

@media (max-width: 992px) {
    .enroll .enrollment-benefits {
        margin-top: 50px;
        position: static;
        top: auto;
    }
}

/*--------------------------------------------------------------
# Courses Events Section
--------------------------------------------------------------*/
.courses-events {
    background-color: var(--surface-color);
}

.courses-events .event-card {
    background: var(--surface-color);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.courses-events .event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.courses-events .event-card .event-image {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.courses-events .event-card .event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.courses-events .event-card .event-image .date-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--accent-color);
    color: var(--contrast-color);
    border-radius: 8px;
    text-align: center;
    padding: 8px;
    min-width: 50px;
    font-weight: 600;
}

.courses-events .event-card .event-image .date-badge .day {
    display: block;
    font-size: 18px;
    line-height: 1;
}

.courses-events .event-card .event-image .date-badge .month {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
}

.courses-events .event-card .event-content {
    padding: 25px;
}

.courses-events .event-card .event-content .event-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.courses-events .event-card .event-content .event-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
}

.courses-events .event-card .event-content .event-meta span i {
    color: var(--accent-color);
}

.courses-events .event-card .event-content .event-title {
    margin-bottom: 15px;
    font-size: 22px;
    line-height: 1.3;
}

.courses-events .event-card .event-content .event-title a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.courses-events .event-card .event-content .event-title a:hover {
    color: var(--accent-color);
}

.courses-events .event-card .event-content .event-description {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    margin-bottom: 20px;
    line-height: 1.6;
}

.courses-events .event-card .event-content .event-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.courses-events .event-card .event-content .event-footer .instructor {
    display: flex;
    align-items: center;
    gap: 10px;
}

.courses-events .event-card .event-content .event-footer .instructor .instructor-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.courses-events .event-card .event-content .event-footer .instructor span {
    font-weight: 500;
    color: var(--heading-color);
}

.courses-events .event-card .event-content .event-footer .event-price .price {
    font-size: 20px;
    font-weight: 600;
    color: var(--accent-color);
}

.courses-events .event-card .event-content .event-footer .event-price .price.free {
    color: #28a745;
}

.courses-events .event-card .event-content .event-actions {
    display: flex;
    gap: 15px;
}

.courses-events .event-card .event-content .event-actions .btn {
    padding: 10px 25px;
    border-radius: 25px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.courses-events .event-card .event-content .event-actions .btn.btn-primary {
    background: var(--accent-color);
    color: var(--contrast-color);
    border-color: var(--accent-color);
}

.courses-events .event-card .event-content .event-actions .btn.btn-primary:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
    border-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.courses-events .event-card .event-content .event-actions .btn.btn-outline {
    background: transparent;
    color: var(--accent-color);
    border-color: var(--accent-color);
}

.courses-events .event-card .event-content .event-actions .btn.btn-outline:hover {
    background: var(--accent-color);
    color: var(--contrast-color);
}

@media (max-width: 768px) {
    .courses-events .event-card .event-image {
        height: 250px;
    }

    .courses-events .event-card .event-content {
        padding: 20px;
    }

    .courses-events .event-card .event-content .event-footer {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .courses-events .event-card .event-content .event-actions {
        flex-direction: column;
    }

    .courses-events .event-card .event-content .event-actions .btn {
        text-align: center;
    }
}

.courses-events .pagination-wrapper {
    margin-top: 50px;
}

.courses-events .pagination-wrapper .pagination .page-item .page-link {
    color: var(--default-color);
    background: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
    margin: 0 3px;
    border-radius: 5px;
    padding: 10px 15px;
    transition: all 0.3s ease;
}

.courses-events .pagination-wrapper .pagination .page-item .page-link:hover {
    background: var(--accent-color);
    color: var(--contrast-color);
    border-color: var(--accent-color);
}

.courses-events .pagination-wrapper .pagination .page-item.active .page-link {
    background: var(--accent-color);
    color: var(--contrast-color);
    border-color: var(--accent-color);
}

.courses-events .pagination-wrapper .pagination .page-item.disabled .page-link {
    color: color-mix(in srgb, var(--default-color), transparent 50%);
    background: color-mix(in srgb, var(--surface-color), transparent 50%);
    border-color: color-mix(in srgb, var(--default-color), transparent 90%);
    cursor: not-allowed;
}

.courses-events .sidebar-widget {
    background: var(--surface-color);
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.courses-events .sidebar-widget .widget-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--heading-color);
    position: relative;
    padding-bottom: 10px;
}

.courses-events .sidebar-widget .widget-title:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--accent-color);
}

.courses-events .sidebar-widget.search-widget .search-form {
    position: relative;
}

.courses-events .sidebar-widget.search-widget .search-form .form-control {
    padding-right: 50px;
    border: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
    border-radius: 25px;
    padding: 12px 20px;
    background: var(--surface-color);
    color: var(--default-color);
}

.courses-events .sidebar-widget.search-widget .search-form .form-control:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 80%);
}

.courses-events .sidebar-widget.search-widget .search-form .form-control::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.courses-events .sidebar-widget.search-widget .search-form .search-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--accent-color);
    color: var(--contrast-color);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.courses-events .sidebar-widget.search-widget .search-form .search-btn:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.courses-events .sidebar-widget.filter-widget .filter-content .filter-group {
    margin-bottom: 20px;
}

.courses-events .sidebar-widget.filter-widget .filter-content .filter-group .filter-label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--heading-color);
}

.courses-events .sidebar-widget.filter-widget .filter-content .filter-group .form-select {
    background: var(--surface-color);
    color: var(--default-color);
    border: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
    border-radius: 8px;
    padding: 10px 15px;
}

.courses-events .sidebar-widget.filter-widget .filter-content .filter-group .form-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-color), transparent 80%);
}

.courses-events .sidebar-widget.filter-widget .filter-content .filter-apply-btn {
    background: var(--accent-color);
    color: var(--contrast-color);
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 500;
    width: 100%;
    transition: background 0.3s ease;
}

.courses-events .sidebar-widget.filter-widget .filter-content .filter-apply-btn:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.courses-events .sidebar-widget.upcoming-widget .upcoming-list .upcoming-item {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.courses-events .sidebar-widget.upcoming-widget .upcoming-list .upcoming-item:last-child {
    border-bottom: none;
}

.courses-events .sidebar-widget.upcoming-widget .upcoming-list .upcoming-item .upcoming-date {
    background: color-mix(in srgb, var(--accent-color), transparent 85%);
    color: var(--accent-color);
    border-radius: 8px;
    text-align: center;
    padding: 8px;
    min-width: 50px;
    font-weight: 600;
    height: fit-content;
}

.courses-events .sidebar-widget.upcoming-widget .upcoming-list .upcoming-item .upcoming-date .day {
    display: block;
    font-size: 16px;
    line-height: 1;
}

.courses-events .sidebar-widget.upcoming-widget .upcoming-list .upcoming-item .upcoming-date .month {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
}

.courses-events .sidebar-widget.upcoming-widget .upcoming-list .upcoming-item .upcoming-content {
    flex: 1;
}

.courses-events .sidebar-widget.upcoming-widget .upcoming-list .upcoming-item .upcoming-content .upcoming-title {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1.3;
}

.courses-events .sidebar-widget.upcoming-widget .upcoming-list .upcoming-item .upcoming-content .upcoming-title a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.courses-events .sidebar-widget.upcoming-widget .upcoming-list .upcoming-item .upcoming-content .upcoming-title a:hover {
    color: var(--accent-color);
}

.courses-events .sidebar-widget.upcoming-widget .upcoming-list .upcoming-item .upcoming-content .upcoming-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

.courses-events .sidebar-widget.upcoming-widget .upcoming-list .upcoming-item .upcoming-content .upcoming-meta .time {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    display: flex;
    align-items: center;
    gap: 5px;
}

.courses-events .sidebar-widget.upcoming-widget .upcoming-list .upcoming-item .upcoming-content .upcoming-meta .time i {
    color: var(--accent-color);
}

.courses-events .sidebar-widget.upcoming-widget .upcoming-list .upcoming-item .upcoming-content .upcoming-meta .price {
    font-weight: 600;
    color: var(--accent-color);
}

.courses-events .sidebar-widget.upcoming-widget .upcoming-list .upcoming-item .upcoming-content .upcoming-meta .price.free {
    color: #28a745;
}

.courses-events .sidebar-widget.newsletter-widget {
    background: linear-gradient(135deg,
            var(--accent-color),
            color-mix(in srgb, var(--accent-color), transparent 20%));
    color: var(--contrast-color);
}

.courses-events .sidebar-widget.newsletter-widget .widget-title {
    color: var(--contrast-color);
}

.courses-events .sidebar-widget.newsletter-widget .widget-title:after {
    background: var(--contrast-color);
}

.courses-events .sidebar-widget.newsletter-widget p {
    color: color-mix(in srgb, var(--contrast-color), transparent 10%);
    margin-bottom: 20px;
}

.courses-events .sidebar-widget.newsletter-widget .newsletter-form {
    position: relative;
}

.courses-events .sidebar-widget.newsletter-widget .newsletter-form input[type="email"] {
    background: var(--contrast-color);
    color: var(--accent-color);
    border: none;
    border-radius: 25px;
    padding: 12px 20px;
    width: 100%;
    margin-bottom: 15px;
}

.courses-events .sidebar-widget.newsletter-widget .newsletter-form input[type="email"]::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.courses-events .sidebar-widget.newsletter-widget .newsletter-form input[type="email"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--contrast-color), transparent 70%);
}

.courses-events .sidebar-widget.newsletter-widget .newsletter-form button {
    background: var(--contrast-color);
    color: var(--accent-color);
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.courses-events .sidebar-widget.newsletter-widget .newsletter-form button:hover {
    background: color-mix(in srgb, var(--contrast-color), transparent 10%);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .courses-events .sidebar-widget {
        padding: 20px;
    }
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-toggle {
    position: relative;
    margin-bottom: 2rem;
}

.pricing .pricing-toggle span {
    font-size: 1rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    transition: all 0.3s ease;
    cursor: pointer;
}

.pricing .pricing-toggle span.active {
    color: var(--accent-color);
    font-weight: 600;
}

.pricing .pricing-toggle span .badge {
    background-color: color-mix(in srgb, #4caf50, transparent 70%);
    color: #4caf50;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    margin-left: 0.5rem;
}

.pricing .pricing-toggle .form-check-input {
    width: 3rem;
    height: 1.5rem;
    background-color: color-mix(in srgb, var(--accent-color), transparent 70%);
    border: none;
    cursor: pointer;
}

.pricing .pricing-toggle .form-check-input:checked {
    background-color: var(--accent-color);
}

.pricing .pricing-toggle .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-color), transparent 70%);
    border-color: transparent;
}

.pricing .pricing-item {
    background-color: var(--surface-color);
    border-radius: 0.75rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    height: 100%;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.pricing .pricing-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.pricing .pricing-item.popular {
    border-color: var(--accent-color);
    box-shadow: 0 10px 25px color-mix(in srgb, var(--accent-color), transparent 85%);
}

.pricing .pricing-item.popular .popular-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: color-mix(in srgb, #9c27b0, transparent 80%);
    color: #9c27b0;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
}

.pricing .pricing-item .pricing-header {
    margin-bottom: 1.5rem;
}

.pricing .pricing-item .pricing-header .pricing-category {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--heading-color);
}

.pricing .pricing-item .pricing-header .price-wrap {
    margin-bottom: 0.5rem;
}

.pricing .pricing-item .pricing-header .price-wrap .price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 0;
}

.pricing .pricing-item .pricing-header .price-wrap .price sup {
    font-size: 1.25rem;
    position: relative;
    top: -0.75rem;
}

.pricing .pricing-item .pricing-header .price-wrap .price span {
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.pricing .pricing-item .pricing-header .price-wrap .yearly {
    display: none;
}

.pricing .pricing-item .pricing-header .pricing-description {
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    margin-bottom: 0;
}

.pricing .pricing-item.yearly-active .pricing-header .price-wrap .monthly {
    display: none;
}

.pricing .pricing-item.yearly-active .pricing-header .price-wrap .yearly {
    display: block;
}

.pricing .pricing-cta {
    margin-bottom: 1.5rem;
}

.pricing .pricing-cta .btn-primary {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--contrast-color);
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.pricing .pricing-cta .btn-primary:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
    border-color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.pricing .pricing-features {
    flex-grow: 1;
}

.pricing .pricing-features h6 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--heading-color);
}

.pricing .pricing-features .feature-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.pricing .pricing-features .feature-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    color: var(--default-color);
}

.pricing .pricing-features .feature-list li i {
    color: var(--accent-color);
    margin-right: 0.5rem;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.pricing .pricing-features .feature-list li .feature-highlight {
    color: #9c27b0;
    font-weight: 600;
}

.pricing.yearly-active .pricing-toggle .monthly {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    font-weight: 500;
}

.pricing.yearly-active .pricing-toggle .yearly {
    color: var(--accent-color);
    font-weight: 600;
}

.pricing.yearly-active .pricing-item .price-wrap .monthly {
    display: none;
}

.pricing.yearly-active .pricing-item .price-wrap .yearly {
    display: block;
}

@media (max-width: 992px) {
    .pricing .pricing-item {
        margin-bottom: 2rem;
    }
}

@media (max-width: 768px) {
    .pricing .row.gy-4>[class*="col-"] {
        margin-bottom: 2rem;
    }

    .pricing .pricing-item {
        padding: 1.5rem;
    }

    .pricing .pricing-header .price-wrap .price {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .pricing .pricing-toggle {
        flex-direction: column;
    }

    .pricing .pricing-toggle .form-check {
        margin: 1rem 0;
    }

    .pricing .pricing-toggle span .badge {
        display: block;
        margin: 0.5rem auto 0;
        width: fit-content;
    }
}

/*--------------------------------------------------------------
# Blog Hero Section
--------------------------------------------------------------*/
.blog-hero .blog-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
}

@media (max-width: 991px) {
    .blog-hero .blog-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 768px) {
    .blog-hero .blog-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.blog-hero .blog-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px color-mix(in srgb, var(--default-color), transparent 90%);
    transition: transform 0.3s ease-in-out;
    background-color: var(--surface-color);
}

.blog-hero .blog-item:hover {
    transform: translateY(-5px);
}

.blog-hero .blog-item:hover img {
    transform: scale(1.05);
}

.blog-hero .blog-item:hover .blog-content {
    background: linear-gradient(0deg,
            color-mix(in srgb, var(--default-color), transparent 10%) 0%,
            transparent 100%);
}

.blog-hero .blog-item.featured {
    grid-column: span 8;
}

@media (max-width: 991px) {
    .blog-hero .blog-item.featured {
        grid-column: span 6;
    }
}

@media (max-width: 768px) {
    .blog-hero .blog-item.featured {
        grid-column: span 1;
    }
}

.blog-hero .blog-item.featured .post-title {
    font-size: 2rem;
}

@media (max-width: 768px) {
    .blog-hero .blog-item.featured .post-title {
        font-size: 1.5rem;
    }
}

.blog-hero .blog-item:not(.featured) {
    grid-column: span 4;
}

@media (max-width: 991px) {
    .blog-hero .blog-item:not(.featured) {
        grid-column: span 3;
    }
}

@media (max-width: 768px) {
    .blog-hero .blog-item:not(.featured) {
        grid-column: span 1;
    }
}

.blog-hero .blog-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
    aspect-ratio: 16/9;
}

.blog-hero .blog-item .blog-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(0deg,
            color-mix(in srgb, var(--default-color), transparent 20%) 0%,
            transparent 100%);
    transition: background 0.3s ease-in-out;
}

.blog-hero .blog-item .post-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    color: var(--contrast-color);
}

.blog-hero .blog-item .post-meta .date,
.blog-hero .blog-item .post-meta .category {
    display: flex;
    align-items: center;
}

.blog-hero .blog-item .post-meta .date::before,
.blog-hero .blog-item .post-meta .category::before {
    font-family: "bootstrap-icons";
    margin-right: 0.5rem;
    font-size: 1rem;
}

.blog-hero .blog-item .post-meta .date::before {
    content: "\f282";
}

.blog-hero .blog-item .post-meta .category::before {
    content: "\f5d3";
}

.blog-hero .blog-item .post-title {
    margin: 0;
    font-family: var(--heading-font);
}

.blog-hero .blog-item .post-title a {
    color: var(--contrast-color);
    text-decoration: none;
}

.blog-hero .blog-item .post-title a:hover {
    color: color-mix(in srgb, var(--contrast-color), transparent 20%);
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts {
    padding-top: 60px;
    padding-bottom: 62px;
}

.blog-posts article {
    background-color: var(--surface-color);
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
    border-radius: 8px;
    overflow: hidden;
}

.blog-posts .post-img img {
    transition: 0.5s;
}

.blog-posts .post-content {
    padding: 30px;
}

.blog-posts .post-title {
    font-size: 20px;
    line-height: 24px;
    color: var(--heading-color);
    font-weight: 600;
    transition: 0.3s;
    margin-bottom: 20px;
}

.blog-posts .meta {
    position: relative;
    margin-top: -20px;
    padding: 0 30px;
}

.blog-posts .meta i {
    font-size: 16px;
    color: var(--accent-color);
}

.blog-posts .meta span {
    font-size: 15px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-posts .meta .post-date {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    font-size: 13px;
    padding: 6px 12px;
    text-align: center;
    margin-right: 15px;
    border-radius: 4px;
}

.blog-posts .meta .post-date span {
    display: block;
    color: var(--contrast-color);
    font-weight: 700;
    font-size: 20px;
}

.blog-posts .readmore {
    display: flex;
    align-items: center;
    font-weight: 400;
    line-height: 1;
    transition: 0.3s;
    color: color-mix(in srgb, var(--heading-color), transparent 20%);
}

.blog-posts .readmore i {
    line-height: 0;
    margin-left: 6px;
    font-size: 16px;
}

.blog-posts article:hover .post-title,
.blog-posts article:hover .readmore {
    color: var(--accent-color);
}

.blog-posts article:hover .post-img img {
    transform: scale(1.1);
}

/*--------------------------------------------------------------
# Pagination 2 Section
--------------------------------------------------------------*/
.pagination-2 {
    padding-top: 0;
}

.pagination-2 nav {
    position: relative;
}

.pagination-2 ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pagination-2 li {
    margin: 0;
    transition: all 0.3s ease-in-out;
}

.pagination-2 li.ellipsis {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    padding: 8px 16px;
    user-select: none;
}

.pagination-2 li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 8px 16px;
    color: var(--default-color);
    background-color: var(--surface-color);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 4px color-mix(in srgb, var(--default-color), transparent 90%);
}

.pagination-2 li a.active {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.pagination-2 li a:hover:not(.active) {
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px color-mix(in srgb, var(--default-color), transparent 85%);
}

.pagination-2 li a i {
    font-size: 14px;
}

.pagination-2 li a span {
    margin: 0 4px;
}

@media (max-width: 575px) {
    .pagination-2 ul {
        gap: 4px;
    }

    .pagination-2 li a {
        min-width: 36px;
        height: 36px;
        padding: 8px 12px;
        font-size: 14px;
    }
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

.blog-details .article-header {
    max-width: 800px;
    margin: 0 auto 3rem;
    text-align: center;
}

.blog-details .article-header .meta-categories {
    margin-bottom: 1.5rem;
}

.blog-details .article-header .meta-categories .category {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    margin: 0 0.5rem;
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--accent-color);
    border-radius: 30px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.blog-details .article-header .meta-categories .category:hover {
    background: var(--accent-color);
    color: var(--contrast-color);
    transform: translateY(-2px);
}

.blog-details .article-header .title {
    font-size: 3.2rem;
    line-height: 1.2;
    margin-bottom: 2rem;
    color: var(--heading-color);
}

@media (max-width: 768px) {
    .blog-details .article-header .title {
        font-size: 2.2rem;
    }
}

.blog-details .article-header .article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.blog-details .article-header .article-meta .author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.blog-details .article-header .article-meta .author .author-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.blog-details .article-header .article-meta .author .author-info {
    text-align: left;
}

.blog-details .article-header .article-meta .author .author-info h4 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--heading-color);
}

.blog-details .article-header .article-meta .author .author-info span {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    font-size: 0.9rem;
}

.blog-details .article-header .article-meta .post-info {
    display: flex;
    gap: 1.5rem;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    font-size: 0.95rem;
}

.blog-details .article-header .article-meta .post-info span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .blog-details .article-header .article-meta {
        justify-content: center;
        text-align: center;
    }

    .blog-details .article-header .article-meta .post-info {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }
}

.blog-details .article-featured-image {
    margin: 0 -2rem 3rem;
    height: 500px;
    overflow: hidden;
    border-radius: 16px;
}

.blog-details .article-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 768px) {
    .blog-details .article-featured-image {
        margin: 0 -1rem 2rem;
        height: 300px;
    }
}

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

.blog-details .article-wrapper {
    display: grid;
    /* grid-template-columns: minmax(200px, 300px) 1fr; */
    gap: 3rem;
    position: relative;
}

@media (max-width: 992px) {
    .blog-details .article-wrapper {
        grid-template-columns: 1fr;
    }
}

.blog-details .article-wrapper .table-of-contents {
    position: sticky;
    top: 100px;
    height: fit-content;
    padding: 2rem;
    background: var(--surface-color);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

@media (max-width: 992px) {
    .blog-details .article-wrapper .table-of-contents {
        display: none;
    }
}

.blog-details .article-wrapper .table-of-contents h3 {
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    color: var(--heading-color);
}

.blog-details .article-wrapper .table-of-contents nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog-details .article-wrapper .table-of-contents nav ul li {
    margin-bottom: 0.75rem;
}

.blog-details .article-wrapper .table-of-contents nav ul li a {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    padding-left: 1rem;
    position: relative;
}

.blog-details .article-wrapper .table-of-contents nav ul li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-color);
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.3s ease;
}

.blog-details .article-wrapper .table-of-contents nav ul li a:hover,
.blog-details .article-wrapper .table-of-contents nav ul li a.active {
    color: var(--heading-color);
}

.blog-details .article-wrapper .table-of-contents nav ul li a:hover::before,
.blog-details .article-wrapper .table-of-contents nav ul li a.active::before {
    opacity: 1;
}

.blog-details .article-wrapper .article-content {
    font-size: 1.15rem;
    line-height: 1.8;
}

.blog-details .article-wrapper .article-content .content-section {
    margin-bottom: 4rem;
}

.blog-details .article-wrapper .article-content .content-section .lead {
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--heading-color);
    margin-bottom: 2rem;
}

.blog-details .article-wrapper .article-content .content-section h2 {
    font-size: 2.2rem;
    color: var(--heading-color);
    margin-bottom: 1.5rem;
}

.blog-details .article-wrapper .article-content .content-section .highlight-quote {
    margin: 3rem 0;
    padding: 3rem;
    background: var(--surface-color);
    border-radius: 12px;
    position: relative;
}

.blog-details .article-wrapper .article-content .content-section .highlight-quote::before {
    content: "“";
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 5rem;
    color: color-mix(in srgb, var(--accent-color), transparent 85%);
    font-family: serif;
    line-height: 1;
}

.blog-details .article-wrapper .article-content .content-section .highlight-quote blockquote {
    padding-left: 3rem;
}

.blog-details .article-wrapper .article-content .content-section .highlight-quote blockquote p {
    font-size: 1.5rem;
    font-style: italic;
    color: var(--heading-color);
    margin-bottom: 1rem;
}

.blog-details .article-wrapper .article-content .content-section .highlight-quote blockquote cite {
    font-style: normal;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.blog-details .article-wrapper .article-content .content-section .image-with-caption {
    margin: 2rem 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.blog-details .article-wrapper .article-content .content-section .image-with-caption.right {
    float: right;
    max-width: 450px;
    margin: 0 0 2rem 2rem;
}

@media (max-width: 768px) {
    .blog-details .article-wrapper .article-content .content-section .image-with-caption.right {
        float: none;
        max-width: 100%;
        margin: 2rem 0;
    }
}

.blog-details .article-wrapper .article-content .content-section .image-with-caption img {
    width: 100%;
}

.blog-details .article-wrapper .article-content .content-section .image-with-caption figcaption {
    padding: 1rem;
    background: var(--surface-color);
    text-align: center;
    font-size: 0.9rem;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.blog-details .article-wrapper .article-content .content-section .feature-points {
    display: grid;
    gap: 2rem;
    margin: 2rem 0;
}

.blog-details .article-wrapper .article-content .content-section .feature-points .point {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.blog-details .article-wrapper .article-content .content-section .feature-points .point i {
    font-size: 2rem;
    color: var(--accent-color);
}

.blog-details .article-wrapper .article-content .content-section .feature-points .point h4 {
    margin: 0 0 0.5rem;
    color: var(--heading-color);
}

.blog-details .article-wrapper .article-content .content-section .feature-points .point p {
    margin: 0;
    font-size: 1rem;
}

.blog-details .article-wrapper .article-content .content-section .comparison-grid {
    margin: 2rem 0;
}

.blog-details .article-wrapper .article-content .content-section .comparison-grid .comparison-card {
    background: var(--surface-color);
    border-radius: 12px;
    padding: 2rem;
    height: 100%;
}

.blog-details .article-wrapper .article-content .content-section .comparison-grid .comparison-card .icon {
    margin-bottom: 1rem;
}

.blog-details .article-wrapper .article-content .content-section .comparison-grid .comparison-card .icon i {
    font-size: 2rem;
    color: var(--accent-color);
}

.blog-details .article-wrapper .article-content .content-section .comparison-grid .comparison-card h4 {
    color: var(--heading-color);
    margin-bottom: 1rem;
}

.blog-details .article-wrapper .article-content .content-section .comparison-grid .comparison-card ul {
    padding-left: 1.2rem;
    margin: 0;
}

.blog-details .article-wrapper .article-content .content-section .comparison-grid .comparison-card ul li {
    margin-bottom: 0.5rem;
    color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.blog-details .article-wrapper .article-content .content-section .key-principles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
}

@media (max-width: 768px) {
    .blog-details .article-wrapper .article-content .content-section .key-principles {
        grid-template-columns: 1fr;
    }
}

.blog-details .article-wrapper .article-content .content-section .key-principles .principle {
    text-align: center;
    padding: 2rem;
    background: var(--surface-color);
    border-radius: 12px;
    position: relative;
}

.blog-details .article-wrapper .article-content .content-section .key-principles .principle .number {
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-color);
    color: var(--contrast-color);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
}

.blog-details .article-wrapper .article-content .content-section .key-principles .principle h4 {
    color: var(--heading-color);
    margin: 1rem 0;
}

.blog-details .article-wrapper .article-content .content-section .key-principles .principle p {
    margin: 0;
    font-size: 0.95rem;
}

.blog-details .article-wrapper .article-content .content-section .info-box {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: color-mix(in srgb, var(--accent-color), transparent 95%);
    border-radius: 12px;
    margin: 2rem 0;
}

.blog-details .article-wrapper .article-content .content-section .info-box .icon i {
    font-size: 2.5rem;
    color: var(--accent-color);
}

.blog-details .article-wrapper .article-content .content-section .info-box .content h4 {
    color: var(--heading-color);
    margin-bottom: 0.5rem;
}

.blog-details .article-wrapper .article-content .content-section .info-box .content p {
    margin: 0;
}

.blog-details .article-wrapper .article-content .content-section .future-trends {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 2rem 0;
}

@media (max-width: 768px) {
    .blog-details .article-wrapper .article-content .content-section .future-trends {
        grid-template-columns: 1fr;
    }
}

.blog-details .article-wrapper .article-content .content-section .future-trends .trend {
    text-align: center;
    padding: 2rem;
    background: var(--surface-color);
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.blog-details .article-wrapper .article-content .content-section .future-trends .trend:hover {
    transform: translateY(-5px);
}

.blog-details .article-wrapper .article-content .content-section .future-trends .trend i {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
}

.blog-details .article-wrapper .article-content .content-section .future-trends .trend h4 {
    color: var(--heading-color);
    margin-bottom: 1rem;
}

.blog-details .article-wrapper .article-content .content-section .future-trends .trend p {
    margin: 0;
    font-size: 0.95rem;
}

.blog-details .article-footer {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .article-footer h4 {
    color: var(--heading-color);
    margin-bottom: 1.5rem;
}

.blog-details .article-footer .share-article {
    margin-bottom: 3rem;
}

.blog-details .article-footer .share-article .share-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.blog-details .article-footer .share-article .share-buttons .share-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    background: var(--surface-color);
    border-radius: 30px;
    color: var(--heading-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-details .article-footer .share-article .share-buttons .share-button i {
    font-size: 1.2rem;
}

.blog-details .article-footer .share-article .share-buttons .share-button:hover {
    background: var(--accent-color);
    color: var(--contrast-color);
    transform: translateY(-2px);
}

.blog-details .article-footer .share-article .share-buttons .share-button.twitter:hover {
    background: #1da1f2;
}

.blog-details .article-footer .share-article .share-buttons .share-button.facebook:hover {
    background: #4267b2;
}

.blog-details .article-footer .share-article .share-buttons .share-button.linkedin:hover {
    background: #0077b5;
}

.blog-details .article-footer .article-tags .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.blog-details .article-footer .article-tags .tags .tag {
    padding: 0.5rem 1rem;
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--accent-color);
    border-radius: 30px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.blog-details .article-footer .article-tags .tags .tag:hover {
    background: var(--accent-color);
    color: var(--contrast-color);
    transform: translateY(-2px);
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
    padding-top: 60px;
    padding-bottom: 30px;
}

.blog-comments .comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.blog-comments .comments-header .title {
    color: var(--heading-color);
    font-size: 32px;
    font-weight: 700;
    font-family: var(--heading-font);
    margin: 0;
}

.blog-comments .comments-header .comments-stats {
    background: color-mix(in srgb, var(--default-color), transparent 95%);
    padding: 8px 20px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.blog-comments .comments-header .comments-stats .count {
    font-size: 18px;
    font-weight: 700;
}

.blog-comments .comments-header .comments-stats .label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.blog-comments .comments-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.blog-comments .comment-thread {
    position: relative;
}

.blog-comments .comment-thread:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 25px;
    top: 80px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom,
            color-mix(in srgb, var(--accent-color), transparent 40%),
            color-mix(in srgb, var(--accent-color), transparent 90%));
    z-index: 0;
}

@media (min-width: 768px) {
    .blog-comments .comment-thread:not(:last-child)::after {
        left: 35px;
    }
}

.blog-comments .comment-box {
    position: relative;
    transition: all 0.3s ease;
}

.blog-comments .comment-box.reply {
    margin-left: 50px;
    margin-top: 25px;
}

@media (min-width: 768px) {
    .blog-comments .comment-box.reply {
        margin-left: 70px;
    }
}

.blog-comments .comment-wrapper {
    display: flex;
    gap: 20px;
    position: relative;
}

.blog-comments .avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.blog-comments .avatar-wrapper img {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    object-fit: cover;
    border: 3px solid var(--surface-color);
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

@media (min-width: 768px) {
    .blog-comments .avatar-wrapper img {
        width: 70px;
        height: 70px;
    }
}

.blog-comments .avatar-wrapper img:hover {
    transform: scale(1.05);
}

.blog-comments .avatar-wrapper .status-indicator {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #4caf50;
    border: 2px solid var(--surface-color);
    z-index: 1;
}

.blog-comments .comment-content {
    flex: 1;
    background-color: var(--surface-color);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.blog-comments .comment-content:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.blog-comments .comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.blog-comments .comment-header .user-info h4 {
    color: var(--heading-color);
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 5px;
}

.blog-comments .comment-header .user-info .time-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-comments .comment-header .user-info .time-badge i {
    font-size: 13px;
}

.blog-comments .comment-header .engagement .likes {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
    border-radius: 20px;
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 500;
}

.blog-comments .comment-header .engagement .likes i {
    font-size: 13px;
}

.blog-comments .comment-body p {
    color: var(--default-color);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.blog-comments .comment-actions {
    display: flex;
    gap: 15px;
}

.blog-comments .comment-actions .action-btn {
    background: none;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.blog-comments .comment-actions .action-btn i {
    font-size: 15px;
    transition: all 0.3s ease;
}

.blog-comments .comment-actions .action-btn:hover {
    color: var(--accent-color);
    background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
}

.blog-comments .comment-actions .action-btn:hover.like-btn i {
    transform: scale(1.2);
    color: #ff4b6e;
}

.blog-comments .comment-actions .action-btn:hover.reply-btn i {
    transform: translateX(-3px);
}

.blog-comments .comment-actions .action-btn:hover.share-btn i {
    transform: translateY(-2px);
}

.blog-comments .comment-actions .action-btn.like-btn.active {
    color: #ff4b6e;
}

.blog-comments .replies-container {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

@media (max-width: 768px) {
    .blog-comments .comments-header {
        margin-bottom: 30px;
    }

    .blog-comments .comments-header .title {
        font-size: 24px;
    }

    .blog-comments .comments-header .comments-stats {
        padding: 6px 15px;
    }

    .blog-comments .comments-header .comments-stats .count {
        font-size: 20px;
    }

    .blog-comments .comments-header .comments-stats .label {
        font-size: 12px;
    }

    .blog-comments .comment-content {
        padding: 20px;
    }

    .blog-comments .comment-header .user-info h4 {
        font-size: 16px;
    }

    .blog-comments .comment-header .user-info .time-badge {
        font-size: 13px;
    }

    .blog-comments .comment-body p {
        font-size: 14px;
    }

    .blog-comments .comment-actions .action-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
}

/*--------------------------------------------------------------
# Blog Comment Form Section
--------------------------------------------------------------*/
.blog-comment-form {
    padding-top: 30px;
    max-width: 900px;
    margin: 30px auto 0 auto;
    padding-bottom: 60px;
}

.blog-comment-form form {
    background-color: var(--surface-color);
    padding: 30px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog-comment-form form h4 {
    font-weight: bold;
    font-size: 22px;
}

.blog-comment-form form p {
    font-size: 14px;
}

.blog-comment-form form input {
    background-color: var(--surface-color);
    color: var(--default-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
    font-size: 14px;
    border-radius: 4px;
    padding: 10px 10px;
}

.blog-comment-form form input:focus {
    color: var(--default-color);
    background-color: var(--surface-color);
    box-shadow: none;
    border-color: var(--accent-color);
}

.blog-comment-form form input::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.blog-comment-form form textarea {
    background-color: var(--surface-color);
    color: var(--default-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
    border-radius: 4px;
    padding: 10px 10px;
    font-size: 14px;
    height: 120px;
}

.blog-comment-form form textarea:focus {
    color: var(--default-color);
    box-shadow: none;
    border-color: var(--accent-color);
    background-color: var(--surface-color);
}

.blog-comment-form form textarea::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.blog-comment-form form .form-group {
    margin-bottom: 25px;
}

.blog-comment-form form .btn-primary {
    border-radius: 4px;
    padding: 10px 20px;
    border: 0;
    background-color: var(--accent-color);
    color: var(--contrast-color);
}

.blog-comment-form form .btn-primary:hover {
    color: var(--contrast-color);
    background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .contact-main-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 992px) {
    .contact .contact-main-wrapper {
        grid-template-columns: 45% 55%;
        min-height: 600px;
    }
}

.contact .map-wrapper {
    height: 300px;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
}

@media (min-width: 992px) {
    .contact .map-wrapper {
        height: 100%;
        position: sticky;
        top: 100px;
    }
}

.contact .contact-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact .contact-cards-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

@media (min-width: 576px) {
    .contact .contact-cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

.contact .contact-card {
    background-color: var(--surface-color);
    padding: 24px 20px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact .contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.contact .contact-card .icon-box {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact .contact-card .icon-box i {
    font-size: 22px;
    color: var(--accent-color);
}

.contact .contact-card .contact-text h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--heading-color);
}

.contact .contact-card .contact-text p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--default-color);
    margin-bottom: 0;
}

.contact .contact-form-container {
    background-color: var(--surface-color);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.contact .contact-form-container h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--heading-color);
    position: relative;
    padding-left: 15px;
}

.contact .contact-form-container h3:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background-color: var(--accent-color);
    border-radius: 2px;
}

.contact .contact-form-container>p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 25px;
    color: var(--default-color);
}

.contact .contact-form-container .php-email-form .form-control {
    height: auto;
    padding: 14px 20px;
    border-radius: 10px;
    background-color: color-mix(in srgb, var(--background-color), #f5f8fd 30%);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    color: var(--default-color);
    transition: all 0.3s ease;
}

.contact .contact-form-container .php-email-form .form-control:focus {
    background-color: var(--surface-color);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 85%);
}

.contact .contact-form-container .php-email-form .form-control::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.contact .contact-form-container .php-email-form textarea.form-control {
    min-height: 140px;
}

.contact .contact-form-container .php-email-form .form-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
}

@media (max-width: 576px) {
    .contact .contact-form-container .php-email-form .form-submit {
        flex-direction: column;
        align-items: flex-start;
    }
}

.contact .contact-form-container .php-email-form button {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    border: none;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.contact .contact-form-container .php-email-form button:hover {
    background-color: color-mix(in srgb, var(--accent-color), #000 15%);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px color-mix(in srgb, var(--accent-color), transparent 75%);
}

.contact .contact-form-container .php-email-form .social-links {
    display: flex;
    gap: 12px;
}

.contact .contact-form-container .php-email-form .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--background-color), #f5f8fd 20%);
    color: var(--heading-color);
    font-size: 16px;
    transition: all 0.3s ease;
}

.contact .contact-form-container .php-email-form .social-links a:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .contact .contact-form-container {
        padding: 25px 20px;
    }

    .contact .contact-form-container h3 {
        font-size: 22px;
    }
}

/*--------------------------------------------------------------
# Terms Of Service Section
--------------------------------------------------------------*/
.terms-of-service .tos-header {
    margin-bottom: 60px;
}

.terms-of-service .tos-header .last-updated {
    display: inline-block;
    padding: 8px 20px;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    border-radius: 30px;
    color: var(--accent-color);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.terms-of-service .tos-header h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.terms-of-service .tos-header p {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
}

.terms-of-service .tos-content .content-section {
    margin-bottom: 50px;
    scroll-margin-top: 100px;
}

.terms-of-service .tos-content .content-section:last-child {
    margin-bottom: 0;
}

.terms-of-service .tos-content .content-section h3 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    color: var(--heading-color);
}

.terms-of-service .tos-content .content-section p {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    line-height: 1.7;
    margin-bottom: 20px;
}

.terms-of-service .tos-content .content-section p:last-child {
    margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .info-box {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
    border-radius: 15px;
    margin-top: 20px;
}

.terms-of-service .tos-content .content-section .info-box i {
    font-size: 1.5rem;
    color: var(--accent-color);
    flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .info-box p {
    margin: 0;
    font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .list-items {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.terms-of-service .tos-content .content-section .list-items li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.terms-of-service .tos-content .content-section .list-items li:last-child {
    margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .list-items li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-color);
}

.terms-of-service .tos-content .content-section .alert-box {
    display: flex;
    gap: 20px;
    padding: 25px;
    background-color: var(--surface-color);
    border-radius: 15px;
    border-left: 4px solid var(--accent-color);
    margin-top: 20px;
}

.terms-of-service .tos-content .content-section .alert-box i {
    font-size: 2rem;
    color: var(--accent-color);
    flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .alert-box .alert-content h5 {
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.terms-of-service .tos-content .content-section .alert-box .alert-content p {
    margin: 0;
    font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .prohibited-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 576px) {
    .terms-of-service .tos-content .content-section .prohibited-list {
        grid-template-columns: 1fr;
    }
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background-color: var(--surface-color);
    border-radius: 12px;
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item i {
    color: #dc3545;
    font-size: 1.2rem;
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item span {
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.terms-of-service .tos-content .content-section .disclaimer-box {
    background-color: var(--surface-color);
    padding: 25px;
    border-radius: 15px;
    margin-top: 20px;
}

.terms-of-service .tos-content .content-section .disclaimer-box p {
    margin-bottom: 15px;
    font-weight: 500;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li:last-child {
    margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li::before {
    content: "•";
    position: absolute;
    left: 8px;
    color: var(--accent-color);
}

.terms-of-service .tos-content .content-section .notice-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
    border-radius: 15px;
    margin-top: 20px;
}

.terms-of-service .tos-content .content-section .notice-box i {
    font-size: 1.5rem;
    color: var(--accent-color);
    flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .notice-box p {
    margin: 0;
    font-size: 0.95rem;
}

.terms-of-service .tos-contact {
    margin-top: 60px;
}

.terms-of-service .tos-contact .contact-box {
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--accent-color), transparent 95%) 0%,
            color-mix(in srgb, var(--accent-color), transparent 98%) 100%);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    align-items: center;
    gap: 30px;
}

@media (max-width: 576px) {
    .terms-of-service .tos-contact .contact-box {
        flex-direction: column;
        text-align: center;
    }
}

.terms-of-service .tos-contact .contact-box .contact-icon {
    width: 60px;
    height: 60px;
    background-color: var(--accent-color);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.terms-of-service .tos-contact .contact-box .contact-icon i {
    font-size: 1.8rem;
    color: var(--contrast-color);
}

.terms-of-service .tos-contact .contact-box .contact-content {
    flex: 1;
}

.terms-of-service .tos-contact .contact-box .contact-content h4 {
    font-size: 1.4rem;
    margin-bottom: 8px;
}

.terms-of-service .tos-contact .contact-box .contact-content p {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    margin-bottom: 15px;
}

.terms-of-service .tos-contact .contact-box .contact-content .contact-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    background-color: var(--accent-color);
    color: var(--contrast-color);
    border-radius: 30px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s;
}

.terms-of-service .tos-contact .contact-box .contact-content .contact-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@media print {
    .terms-of-service .tos-contact {
        display: none;
    }

    .terms-of-service .content-section {
        page-break-inside: avoid;
    }
}

/*--------------------------------------------------------------
# Privacy Section
--------------------------------------------------------------*/
.privacy {
    font-size: 1rem;
    line-height: 1.7;
}

.privacy .privacy-header {
    margin-bottom: 60px;
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    padding-bottom: 40px;
}

.privacy .privacy-header .header-content {
    max-width: 800px;
    margin: 0 auto;
}

.privacy .privacy-header .header-content .last-updated {
    font-size: 0.95rem;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    margin-bottom: 20px;
}

.privacy .privacy-header .header-content h1 {
    font-size: 2.8rem;
    color: var(--heading-color);
    margin-bottom: 20px;
    font-weight: 600;
}

.privacy .privacy-header .header-content .intro-text {
    font-size: 1.2rem;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    line-height: 1.6;
}

.privacy .privacy-content {
    max-width: 800px;
    margin: 0 auto 60px;
}

.privacy .privacy-content .content-section {
    margin-bottom: 50px;
}

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

.privacy .privacy-content .content-section h2 {
    font-size: 1.8rem;
    color: var(--heading-color);
    margin-bottom: 25px;
    font-weight: 600;
}

.privacy .privacy-content .content-section h3 {
    font-size: 1.4rem;
    color: var(--heading-color);
    margin: 30px 0 20px;
    font-weight: 500;
}

.privacy .privacy-content .content-section p {
    margin-bottom: 20px;
}

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

.privacy .privacy-content .content-section ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.privacy .privacy-content .content-section ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
}

.privacy .privacy-content .content-section ul li:last-child {
    margin-bottom: 0;
}

.privacy .privacy-content .content-section ul li::before {
    content: "•";
    position: absolute;
    left: 8px;
    color: var(--accent-color);
}

.privacy .privacy-contact {
    max-width: 800px;
    margin: 0 auto;
    padding-top: 40px;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.privacy .privacy-contact h2 {
    font-size: 1.8rem;
    color: var(--heading-color);
    margin-bottom: 20px;
    font-weight: 600;
}

.privacy .privacy-contact p {
    margin-bottom: 20px;
}

.privacy .privacy-contact .contact-details {
    background-color: var(--surface-color);
    padding: 25px;
    border-radius: 10px;
}

.privacy .privacy-contact .contact-details p {
    margin-bottom: 10px;
}

.privacy .privacy-contact .contact-details p:last-child {
    margin-bottom: 0;
}

.privacy .privacy-contact .contact-details p strong {
    color: var(--heading-color);
    font-weight: 600;
}

@media print {
    .privacy {
        font-size: 12pt;
        line-height: 1.5;
    }

    .privacy .privacy-header {
        text-align: left;
        border-bottom: 1pt solid #000;
        padding-bottom: 20pt;
        margin-bottom: 30pt;
    }

    .privacy h1 {
        font-size: 24pt;
    }

    .privacy h2 {
        font-size: 18pt;
        page-break-after: avoid;
    }

    .privacy h3 {
        font-size: 14pt;
        page-break-after: avoid;
    }

    .privacy p,
    .privacy ul {
        page-break-inside: avoid;
    }

    .privacy .contact-details {
        border: 1pt solid #000;
        padding: 15pt;
    }
}

@media (max-width: 767px) {
    .privacy .privacy-header {
        margin-bottom: 40px;
        padding-bottom: 30px;
    }

    .privacy .privacy-header .header-content h1 {
        font-size: 2.2rem;
    }

    .privacy .privacy-header .header-content .intro-text {
        font-size: 1.1rem;
    }

    .privacy .privacy-content .content-section {
        margin-bottom: 40px;
    }

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

    .privacy .privacy-content .content-section h3 {
        font-size: 1.3rem;
    }
}

/*--------------------------------------------------------------
# Error 404 Section
--------------------------------------------------------------*/
.error-404 {
    padding: 100px 0;
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--background-color), transparent 0%),
            color-mix(in srgb, var(--background-color), var(--accent-color) 4%));
}

.error-404 .error-wrapper {
    position: relative;
    overflow: hidden;
}

.error-404 .error-illustration {
    position: relative;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-404 .error-illustration i {
    font-size: 9rem;
    color: color-mix(in srgb, var(--accent-color), transparent 10%);
    position: relative;
    z-index: 2;
    animation: pulse 2s infinite;
}

.error-404 .error-illustration .circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.6;
}

.error-404 .error-illustration .circle.circle-1 {
    width: 200px;
    height: 200px;
    background: color-mix(in srgb, var(--accent-color), transparent 80%);
    animation: float 6s ease-in-out infinite;
}

.error-404 .error-illustration .circle.circle-2 {
    width: 120px;
    height: 120px;
    background: color-mix(in srgb, var(--heading-color), transparent 85%);
    top: 30%;
    left: 25%;
    animation: float 8s ease-in-out infinite;
}

.error-404 .error-illustration .circle.circle-3 {
    width: 80px;
    height: 80px;
    background: color-mix(in srgb, var(--accent-color), transparent 75%);
    bottom: 20%;
    right: 30%;
    animation: float 7s ease-in-out infinite reverse;
}

.error-404 .error-content {
    padding: 30px 0;
}

.error-404 .error-badge {
    display: inline-block;
    background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
    color: var(--accent-color);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 30px;
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.error-404 .error-code {
    font-size: clamp(5rem, 10vw, 8rem);
    font-weight: 900;
    margin: 0;
    background: linear-gradient(135deg,
            var(--heading-color),
            var(--accent-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    letter-spacing: -2px;
}

.error-404 .error-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 1.5rem;
}

.error-404 .error-description {
    font-size: 1.1rem;
    color: color-mix(in srgb, var(--default-color), transparent 15%);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.error-404 .error-actions {
    display: flex;
    gap: 1rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.error-404 .error-actions .btn-home,
.error-404 .error-actions .btn-help {
    padding: 0.8rem 1.8rem;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.error-404 .error-actions .btn-home i,
.error-404 .error-actions .btn-help i {
    font-size: 1.2rem;
}

.error-404 .error-actions .btn-home {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    border: none;
}

.error-404 .error-actions .btn-home:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.error-404 .error-actions .btn-help {
    background-color: transparent;
    color: var(--accent-color);
    border: 2px solid color-mix(in srgb, var(--accent-color), transparent 75%);
}

.error-404 .error-actions .btn-help:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    transform: translateY(-3px);
}

.error-404 .error-suggestions {
    padding: 1.5rem;
    background-color: color-mix(in srgb,
            var(--background-color),
            var(--accent-color) 5%);
    border-radius: 12px;
}

.error-404 .error-suggestions h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--heading-color);
    margin-bottom: 1rem;
}

.error-404 .error-suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.error-404 .error-suggestions ul li {
    margin-bottom: 0.8rem;
}

.error-404 .error-suggestions ul li:last-child {
    margin-bottom: 0;
}

.error-404 .error-suggestions ul li a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--default-color);
    font-size: 1.05rem;
    transition: all 0.3s;
}

.error-404 .error-suggestions ul li a i {
    color: var(--accent-color);
    font-size: 1.1rem;
    transition: transform 0.3s;
}

.error-404 .error-suggestions ul li a:hover {
    color: var(--accent-color);
}

.error-404 .error-suggestions ul li a:hover i {
    transform: translateX(3px);
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@media (max-width: 992px) {
    .error-404 .error-illustration {
        height: 300px;
        margin-bottom: 2rem;
    }
}

@media (max-width: 768px) {
    .error-404 {
        padding: 70px 0;
    }

    .error-404 .error-code {
        font-size: clamp(4rem, 12vw, 6rem);
    }

    .error-404 .error-title {
        font-size: 1.8rem;
    }

    .error-404 .error-actions {
        flex-direction: column;
    }

    .error-404 .error-actions .btn-home,
    .error-404 .error-actions .btn-help {
        width: 100%;
        justify-content: center;
    }
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
    /* Add your styles here */
}