* { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: 'Inter', sans-serif;
      background: #fff;
      color: #2d3748;
      line-height: 1.6;
    }

    h1, h2, h3 {
      font-family: 'DM Sans', sans-serif;
      line-height: 1.3;
    }

    /* Hero */
    .hero {
      background: #0f172a;
      color: #fff;
      padding: 80px 24px 60px;
    }

    .hero-wrap { max-width: 1140px; margin: 0 auto; }

    .hero h1 { font-size: 48px; margin-bottom: 16px; }

    .hero-sub {
      font-size: 20px;
      color: #94a3b8;
      margin-bottom: 32px;
    }

    .hero-desc {
      font-size: 16px;
      line-height: 1.7;
      color: #cbd5e1;
      max-width: 680px;
      margin-bottom: 36px;
    }

    .btn-group { display: flex; gap: 12px; flex-wrap: wrap; }

    .btn {
      padding: 14px 28px;
      border-radius: 6px;
      font-weight: 600;
      text-decoration: none;
      font-size: 15px;
      display: inline-block;
      transition: all 0.3s ease;
    }

    .btn:hover { transform: translateY(-4px) scale(1.03); }

    .btn-solid { background: #3b82f6; color: #fff; }
    .btn-solid:hover { background: #2563eb; }

    .btn-outline {
      border: 1.5px solid #475569;
      color: #e2e8f0;
    }
    .btn-outline:hover {
      border-color: #94a3b8;
      background: rgba(255,255,255,0.05);
    }

    /* Stats */
    .stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 32px;
      margin-top: 56px;
      padding-top: 48px;
      border-top: 1px solid #334155;
    }

    .stat h3 { font-size: 36px; font-weight: 700; margin-bottom: 4px; }
    .stat p { font-size: 14px; color: #94a3b8; }

    /* Services */
    .services { padding: 80px 24px; background: #f8fafc; }

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

    .section-top { margin-bottom: 48px; }

    .section-top h2 {
      font-size: 36px;
      font-weight: 700;
      margin-bottom: 12px;
      color: #0f172a;
    }

    .section-top p {
      font-size: 18px;
      color: #64748b;
      max-width: 600px;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: 24px;
    }

    .card {
      background: #fff;
      padding: 32px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

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

    /* Includes */
    .includes {
      padding: 80px 24px;
      background: #1e293b;
      color: #fff;
    }

    .includes h2 {
      font-size: 36px;
      margin-bottom: 40px;
    }

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

    .check-item {
      display: flex;
      align-items: start;
      gap: 12px;
      font-size: 15px;
      padding: 16px;
      background: rgba(255,255,255,0.05);
      border-radius: 6px;
      transition: background 0.2s ease, transform 0.2s ease;
    }

    .check-item:hover {
      background: rgba(255,255,255,0.1);
      transform: translateX(6px);
    }

    /* Features */
    .features { padding: 80px 24px; }

    .feature-card {
      background: #fff;
      padding: 28px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      transition: transform .3s, box-shadow .3s;
    }

    .feature-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    }

    /* CTA */
    .cta {
      padding: 80px 24px;
      background: #0f172a;
      color: #fff;
      text-align: center;
    }

    .cta h2 { font-size: 40px; margin-bottom: 16px; }
    .cta p { font-size: 18px; margin-bottom: 32px; }

    /* Mobile */
    @media (max-width: 768px) {
      .hero h1 { font-size: 36px; }
      .hero-sub { font-size: 18px; }
      .section-top h2 { font-size: 28px; }
      .cta h2 { font-size: 32px; }
    }

    @media (max-width: 480px) {
      .hero { padding: 60px 20px 40px; }
      .btn-group { flex-direction: column; }
      .btn { text-align: center; }
      .services, .includes, .features, .cta { padding: 60px 20px; }
    }
    
/* ================================================================
   PREMIUM HAND-DESIGNED GRID INTERACTIONS
================================================================= */

/* Services diagram */
.services-diagram {
  padding: 80px 20px;
  text-align: center;
}

.services-title h2 {
  font-size: 38px;
  font-weight: 700;
}

.services-title p {
  font-size: 18px;
  color: #555;
  margin-bottom: 40px;
}

/* Diagram container */
.diagram-container {
  position: relative;
  max-width: 1100px;
  margin: auto;
  padding-top: 60px;
}

/* Center circle */
.center-circle {
  width: 150px;
  height: 150px;
  background: white;
  border-radius: 50%;
  border: 8px solid #dce3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 60px;
  margin: auto;
  position: relative;
  z-index: 10;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Service Boxes */
.service-box {
  position: absolute;
  width: 260px;
  padding: 20px;
  border-radius: 18px;
  color: #fff;
  backdrop-filter: blur(5px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.service-box h3 { font-size: 18px; font-weight: 700; }
.service-box p { font-size: 14px; margin-top: 8px; }

/* Gradients */
.box1 { background: linear-gradient(135deg,#ffb34d,#ff884d); top:0; left:45%; transform:translate(-250px,-20px); }
.box2 { background: linear-gradient(135deg,#3cc8ff,#4285ff); top:0; left:54%; transform:translate(10px,-20px); }
.box3 { background: linear-gradient(135deg,#4d68ff,#7c4dff); top:140px; left:35%; transform:translate(-320px,0); }
.box4 { background: linear-gradient(135deg,#fca14e,#ff5f45); top:140px; left:65%; transform:translate(60px,0); }
.box5 { background: linear-gradient(135deg,#ff4d88,#ff6cab); top:250px; left:50%; transform:translate(-270px,20px); }
.box6 { background: linear-gradient(135deg,#00c4b4,#009f88); top:250px; left:50%; transform:translate(20px,20px); }

/* Responsive Service Boxes */
@media (max-width: 900px) {
  .service-box { position: static; width: 90%; margin: 20px auto; transform:none !important; }
  .diagram-container { display:flex; flex-direction:column; align-items:center; }
}

/* Cards responsive */
@media(max-width:768px){
  .card, .feature-card { padding:22px; }
  .card:hover, .feature-card:hover { transform:translateY(-6px); }
}

/* ======================= TIMELINE ======================= */
/* General Styles */

.point {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1E6CFF;
  border: 5px solid #bcd7ff;
  margin: 0 auto 6px;
  transition: 0.4s ease;
  opacity: 0.4;
}

.point.glow {
  box-shadow: 0 0 20px #4c8dff, 0 0 40px #80b6ff;
  opacity: 1;
}

.timeline-item {
  opacity: 0;
  transition: 0.5s ease;
  position: absolute;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 140px;
  color: #003C8F;
  font-size: 13px;
  font-weight: 600;
}

.timeline-item.show {
  opacity: 1;
  transform: translateY(-8px);
}

/* ========================================= */
/* Container & Titles */
/* ========================================= */

.line-timeline {
  padding: 20px 0 100px;
  display: flex;
  justify-content: center;
  background: #f8fbff;
  margin-top: 20px;
  overflow: hidden;
}

.timeline-title {
  text-align: center;
  padding-top: 120px;
}

.timeline-title h2 {
  font-size: 36px;
  font-weight: 700;
  color: #0b2b66;
}

/* ========================================= */
/* Timeline Canvas */
/* ========================================= */

.timeline-container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: auto;
  max-height: 420px;
  box-sizing: border-box;
  overflow: hidden;
}

.timeline-container::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 0;
  width: 2px;
  height: 100%;
  background: #d3e2ff;
}

.timeline-container::after {
  content: "";
  position: absolute;
  bottom: 30px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #d3e2ff;
}

/* ========================================= */
/* Timeline Node Positions */
/* ========================================= */

.timeline-item:nth-child(1) { left: 10%; top: 350px; }
.timeline-item:nth-child(2) { left: 20%; top: 260px; }
.timeline-item:nth-child(3) { left: 30%; top: 220px; }
.timeline-item:nth-child(4) { left: 40%; top: 210px; }
.timeline-item:nth-child(5) { left: 50%; top: 200px; }
.timeline-item:nth-child(6) { left: 60%; top: 150px; }
.timeline-item:nth-child(7) { left: 70%; top: 230px; }
.timeline-item:nth-child(8) { left: 80%; top: 110px; }
.timeline-item:nth-child(9) { left: 90%; top: 80px; }

/* ========================================= */
/* SVG Graph Line */
/* ========================================= */

.graph-line polyline {
  fill: none;
  stroke: #167bff;
  stroke-width: 4;
  stroke-linecap: round;
}

.graph-line polyline.animate-line {
  stroke: url(#blueGradient);
  stroke-width: 5;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  animation: drawLine 4s ease forwards;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

.timeline-item.show p{
  margin-left: 20px;
}

.timeline-item[data-x="150"][data-y="250"] p {
  margin-left: 40px;
  margin-bottom: 40px;
}

.timeline-item[data-x="450"][data-y="220"] p {
  padding-top: 30px; /* Move the text down further from the point */
  margin-left: -10px;
}

/* ============================= */
/* Mobile View: Don't Apply Changes */
/* ============================= */
@media (max-width: 576px) {
  .timeline-item[data-x="450"][data-y="220"] p {
    padding-top: 0;  /* Keep the original positioning in mobile view */
    margin-left: 20px;
    
  }
}
.timeline-item[data-x="150"][data-y="250"] p {
  padding-top: 0;

}
/* ========================================= */
/* Responsive - Tablet */
/* ========================================= */

@media (max-width: 991px) {
  .timeline-container { height: 350px; }
  .timeline-title h2 { font-size: 30px; }
  .timeline-item { width: 120px; font-size: 12px; }

  .timeline-item:nth-child(1) { top: 300px; }
  .timeline-item:nth-child(2) { top: 230px; }
  .timeline-item:nth-child(3) { top: 250px; }
  .timeline-item:nth-child(4) { top: 3100px; }
  .timeline-item:nth-child(5) { top: 190px; }
  .timeline-item:nth-child(6) { top: 130px; }
  .timeline-item:nth-child(7) { top: 200px; }
  .timeline-item:nth-child(8) { top: 100px; }
  .timeline-item:nth-child(9) { top: 70px; }
}

@media (max-width: 768px) {
  .timeline-container { height: 300px; }
  .timeline-item { width: 90px; font-size: 11px; }
}

/* ========================================= */
/* Mobile (Original Layout Adjustment) */
/* ========================================= */

@media (max-width: 576px) {

  .graph-line { display: none; }

  .timeline-container {
    height: auto;
    padding-bottom: 80px;
  }

  .timeline-item {
    position: relative !important;
    width: 95%;
    max-width: 330px;
    text-align: left;
    margin: 25px auto;
    transform: none !important;
  }

  .timeline-item .point {
    position: absolute;
    left: 0;
    top: 4px;
  }

  .timeline-container::before {
    left: 8px;
    width: 2px;
    height: 100%;
  }

  .timeline-container::after {
    display: none;
  }

  .timeline-title h2 {
    font-size: 24px;
  }
}

/* ========================================= */
/* Point Override + Glow */
/* ========================================= */

.timeline-item .point {
  position: absolute;
  width: 16px;
  height: 16px;
  background-color: #007bff;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.timeline-item .point.glow {
  box-shadow: 0 0 8px 2px rgba(0,123,255,0.5);
}

/* ========================================= */
/* Mobile Vertical Timeline Override */
/* ========================================= */

@media (max-width: 576px) {

  .graph-line,
  .timeline-container::after {
    display: none !important;
  }

  .timeline-container::before {
    left: 12px;
    width: 2px;
    height: 100%;
    background: #d3e2ff;
  }

  .timeline-container {
    height: auto !important;
    padding-bottom: 60px;
    margin-left: 30px;
  }

  .timeline-item {
    position: relative !important;
    width: calc(100% - 40px);
    max-width: 100%;
    margin: 30px 0 30px 40px;
    text-align: left;
    transform: none !important;
    opacity: 1;
    transition: 0.3s ease;
  }

  .timeline-item:nth-child(n) {
    left: auto !important;
    top: auto !important;
  }

  .timeline-item .point {
    width: 14px;
    height: 14px;
    background: #1E6CFF;
    border: 4px solid #bcd7ff;
    left: -33px;
    top: 6px;
    opacity: 0.4;
    transition: 0.4s ease;
  }

  .timeline-item.show .point {
    opacity: 1;
  }

  .timeline-item.show .point.glow {
    box-shadow:
      0 0 12px rgba(30,108,255,0.8),
      0 0 20px rgba(76,141,255,0.5);
  }

  .timeline-item span,
  .timeline-item p {
    display: block;
    font-size: 14px;
    line-height: 1.45;
  }
}

/* Why Choose Us - Circular Layout */
.why-choose-us {
  background: #ffffff;
  padding: 60px 20px 80px;
  overflow-x: hidden; /* avoid horizontal scroll */
}

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

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

.section-top h2 {
font-size: 28px;
    color: #64748b;
    max-width: 600px;

    /* Center text */
    text-align: center;

    /* Center element itself */
    margin: 0 auto;
}

.section-top p {
  font-size: 17px;
    color: #64748b;
    max-width: 600px;
    text-align: center;
    margin: 0 auto;
}

/* MAIN DIAGRAM WRAPPER */
.circular-diagram {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  height: 540px; /* reduced height */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 40px; /* smaller left padding to avoid overflow */
}

/* LARGE GRAY CIRCLE */
.background-circle {
  position: absolute;
  width: 520px;
  height: 520px;
  background: linear-gradient(135deg, #e5e5e5 0%, #d0d0d0 100%);
  border-radius: 50%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.10);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* PURPLE CENTER CIRCLE */
.center-element {
  position: absolute;
  width: 260px;
  height: 260px;
  background: linear-gradient(135deg, #a490ff, #8b7ff5);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 1px;
  box-shadow: 0 22px 55px rgba(107, 90, 224, 0.6);
  left: 18%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

/* ORBIT CIRCLES */
.orbit-item {
  position: absolute;
  z-index: 5;
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
}

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

.orbit-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Circle colors */
.purple-circle  { background: linear-gradient(135deg, #a490ff, #8b7ff5); }
.blue-circle    { background: linear-gradient(135deg, #70b8ff, #5ba4ff); }
.cyan-circle    { background: linear-gradient(135deg, #50d9d9, #40c9c9); }
.gray-circle    { background: linear-gradient(135deg, #909090, #757575); }
.orange-circle  { background: linear-gradient(135deg, #ffbb55, #ffaa3d); }
.green-circle   { background: linear-gradient(135deg, #75dd9e, #60cd8e); }

/* ==========
   ORBIT POSITIONS
   All aligned around RIGHT half of gray circle
   from top to bottom
   ========== */

/* 1 – top */
.orbit-top {
  top: 8%;
  left: 64%;
  animation-delay: 0.1s;
}

/* 2 – upper-right */
.orbit-right-top {
  top: 24%;
  left: 70%;
  animation-delay: 0.2s;
}

/* 3 – mid-right */
.orbit-right-bottom {
  top: 40%;
  left: 74%;
  animation-delay: 0.3s;
}

/* 4 – lower-right */
.orbit-bottom {
  top: 56%;
  left: 72%;
  animation-delay: 0.4s;
}

/* 5 – lower-right (near bottom) */
.orbit-left-bottom {
  top: 72%;
  left: 66%;
  animation-delay: 0.5s;
}

/* 6 – very bottom on right edge */
.orbit-left-top {
  top: 86%;
  left: 60%;
  animation-delay: 0.6s;
}

/* ==========
   TEXT BLOCKS
   ========== */

.orbit-text {
  position: absolute;
  z-index: 5;
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
  display: flex;
  align-items: center;
  gap: 16px;
}

.text-divider {
  width: 70px;
  height: 2px;
  background: linear-gradient(90deg, #d0d0d0, #e0e0e0);
  flex-shrink: 0;
}

.orbit-text h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 4px;
  white-space: nowrap;
}

.orbit-text p {
  font-size: 15px;
  color: #6a7c91;
  max-width: 260px;
  line-height: 1.5;
}

/* Text positions: neatly in a vertical column on the right */
.text-top {
  top: 8%;
  left: 78%;
  animation-delay: 0.1s;
}

.text-right-top {
  top: 24%;
  left: 78%;
  animation-delay: 0.2s;
}

.text-right-bottom {
  top: 40%;
  left: 78%;
  animation-delay: 0.3s;
}

.text-bottom {
  top: 56%;
  left: 78%;
  animation-delay: 0.4s;
}

.text-left-bottom {
  top: 72%;
  left: 78%;
  animation-delay: 0.5s;
  flex-direction: row;
}

.text-left-top {
  top: 86%;
  left: 78%;
  animation-delay: 0.6s;
  flex-direction: row;
}

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

@media (max-width: 1200px) {
  .circular-diagram {
    height: 500px;
    padding-left: 20px;
  }

  .background-circle {
    width: 460px;
    height: 460px;
  }

  .center-element {
    width: 230px;
    height: 230px;
    font-size: 30px;
  }

  .orbit-circle {
    width: 80px;
    height: 80px;
    font-size: 34px;
  }

  .orbit-text h3 {
    font-size: 18px;
  }

  .orbit-text p {
    font-size: 14px;
  }

  .text-divider {
    width: 55px;
  }
}

@media (max-width: 991px) {
  .circular-diagram {
    height: auto;
    flex-direction: column;
    padding: 20px 10px 0;
  }

  .background-circle {
    display: none;
  }

  .center-element {
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    margin-bottom: 40px;
  }

  .orbit-item,
  .orbit-text {
    position: relative !important;
    transform: none !important;
    margin: 22px auto 0;
    text-align: center;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  .orbit-text {
    margin-top: 8px;
    flex-direction: column !important;
  }

  .orbit-text h3,
  .orbit-text p {
    text-align: center !important;
    white-space: normal !important;
  }

  .text-divider {
    display: none;
  }
}

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

  .center-element {
    width: 210px;
    height: 210px;
    font-size: 26px;
  }

  .orbit-circle {
    width: 72px;
    height: 72px;
    font-size: 30px;
  }

  .orbit-text h3 {
    font-size: 17px;
  }

  .orbit-text p {
    font-size: 14px;
  }
}
/* ======================================
   ORBIT FINE ALIGNMENT & SPACING PATCH
   ====================================== */

/* Push all orbit icons closer to grey border */
.orbit-top           { top: %; left: 52%; }
.orbit-right-top     { top: 15%; left: 64%; }
.orbit-right-bottom  { top: 32%; left: 69%; }
.orbit-bottom        { top: 52%; left: 69%; }
.orbit-left-bottom   { top: 76%; left: 64%; }
.orbit-left-top      { top: 80%; left: 52%; }

/* Space out text blocks to match icons on arc */
.text-top            { top: 2%;  left: 60%; }
.text-right-top      { top: 18%; left: 73%; }
.text-right-bottom   { top: 33%; left: 77%; }
.text-bottom         { top: 50%; left: 77%; }
.text-left-bottom    { top: 79%; left: 72%; }
.text-left-top       { top: 90%; left: 60%; }

/* Increase gap between divider and text */
.orbit-text {
  gap: 22px;
}

/* Slightly extend divider for better balance */
.text-divider {
  width: 85px;
}

/* Tighter vertical rhythm */
.orbit-text h3 {
  margin-bottom: 2px;
}
/* ===============================
   GLOBAL SIZE SCALE ADJUSTMENT
   =============================== */

/* Reduce entire Why Choose Us diagram size */
.circular-diagram{
  max-width: 900px;   /* original 1100px → smaller */
  height: 460px;     /* original 540px → shorter */
}

/* Reduce main background circle */
.background-circle{
  width: 450px;      /* original 520px → smaller */
  height: 450px;
}

/* Reduce purple center circle */
.center-element{
  width: 215px;      /* original 260px */
  height: 215px;
  font-size: 28px;  /* scale down text */
}

/* Reduce orbit circle size */
.orbit-circle{
  width: 72px;      /* original 90px */
  height: 72px;
  font-size: 30px;
}

/* Reduce divider length slightly */
.text-divider{
  width: 65px;      /* original 85px */
}

/* Reduce heading + paragraph size */
.orbit-text h3{
  font-size: 18px;
}

.orbit-text p{
  font-size: 14px;
}

/* Mobile even tighter */
@media (max-width:768px){

  .circular-diagram{
    max-width: 100%;
    height: auto;
    overflow: visible;

  }

  .center-element{
    width: 190px;
    height: 190px;
    font-size: 24px;
  }

  .orbit-circle{
    width: 64px;
    height: 64px;
    font-size: 26px;
  }
}

/* ================================
   FIX: REMOVE VERTICAL SCROLL BAR
   ================================ */

/* Give diagram just enough height to cover last items */
.circular-diagram{
    height: 620px;   /* increased from 540px */
    overflow: visible;
}
/* Slight upward nudge for all lower nodes balance */

.orbit-left-bottom  { top: 72%; }
.text-left-bottom  { top: 72%; }

/* No section page scroll leakage */
body{
    overflow-x: hidden;
}

/* ===== EXPERTISE BASE ===== */
:root{
  --edu-blue:#1f4fd8;
  --edu-blue-light:#eaf0ff;
  --edu-blue-soft:#f4f7ff;
  --edu-text-dark:#0f2f45;
  --edu-text-muted:#5f6f86;
  --edu-border:#dfe7ff;
}

.expertise-section{
  padding:80px 20px;
  background:linear-gradient(180deg,#f6f9ff,#ffffff);
}

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

.expertise-header h2{
  font-size:32px;
  color:#0f2f45;
  margin-bottom:8px;
}

.expertise-header p{
  font-size:15px;
  color:#555;
}

/* ===== CARD WRAPPER ===== */
.expertise-card{
  max-width:1100px;
  margin:0 auto;
  background:#ffffff;
  border:1px solid #e5eaf0;
  border-radius:16px;
  padding:40px;
}

/* COURSE TITLE */
.expertise-card-title{
  text-align:center;
  font-size:22px;
  margin-bottom:35px;
  color:#0a6d77;
}

/* GRID */
.course-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:28px;
}

/* COURSE CARD */
.course-card{
  background:#fff;
  border:1px solid #edf0f4;
  border-radius:12px;
  padding:26px;
  opacity:0;
  transition:all 0.9s ease;
}

.course-card h4{
  font-size:18px;
  color:#0f2f45;
  margin-bottom:10px;
}

.course-card p{
  font-size:14px;
  color:#555;
  line-height:1.6;
}

/* LIST */
.course-card ul{
  padding-left:18px;
  margin-top:12px;
}

.course-card ul li{
  font-size:14px;
  margin-bottom:8px;
}

/* TAGS */
.course-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.course-tags span{
  font-size:12px;
  padding:6px 12px;
  border:1px solid #dbe2ea;
  border-radius:20px;
  background:#f8fafc;
  color:#0a6d77;
}

/* ===== ANIMATIONS ===== */
.slide-from-right{ transform:translateX(80px); }
.slide-from-left{ transform:translateX(-80px); }

.course-card.active{
  opacity:1;
  transform:translateX(0);
}
.course-grid.two-by-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

/* MOBILE */
@media (max-width: 768px) {
  .course-grid.two-by-two {
    grid-template-columns: 1fr;
  }
}

.course-grid.two-by-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

@media (max-width: 768px) {
  .course-grid.two-by-two {
    grid-template-columns: 1fr;
  }
}

.course-card {
  background: #ffffff;
  border: 1px solid #e5efff;
  border-radius: 18px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.course-btn {
  margin-top: 20px;
  align-self: flex-start;
  padding: 10px 26px;
  border-radius: 24px;
  background: linear-gradient(135deg, #2563eb, #1e40af);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.course-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);
}

/*images*/
/* COURSE IMAGE */
.course-image {
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 14px;
  margin-bottom: 16px;
}

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

.course-card:hover .course-image img {
  transform: scale(1.06);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .course-image {
    height: 160px;
  }
}