:root {
        --brand-red: #e21b1b;
        --text-black: #000000;
        --light: #fff;
        --border-radius: 20px;
        --primary: #e21b1b;
      }

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

      body {
        font-family: "Epilogue-Regular", sans-serif;
        line-height: 1.6;
        color: #222;
        background: #f5f5f5;
      }

      /* =========================
   Container
========================= */
      .container {
        width: 90%;
        max-width: 1300px;
        margin: auto;
      }

      /* =========================
   Hero Section
========================= */

      .hero-content {
        position: relative;
      }

      .hero h1 {
        font-size: 2rem;
        margin-bottom: 0.5rem;
      }

      .hero p {
        max-width: 500px;
        font-size: 0.95rem;
      }

      /* =========================
   About Section
========================= */
      .section {
        padding: 3rem 0;
      }

      .about-grid {
        display: grid;
        gap: 2rem;
      }

      .about-grid img {
        width: 100%;
        border-radius: var(--border-radius);
      }

      .about-text h2 {
        font-size: 2.2rem;
        margin-bottom: 1rem;
      }

      .about-text span {
        color: var(--primary);
      }

      .about-text p {
        margin-bottom: 1rem;
        color: var(--gray);
      }

      /* =========================
   Verticals
========================= */
      .verticals-grid {
        display: grid;
        gap: 1rem;
      }

      .card {
        background: #f5f5f5;
        padding: 1rem;
        border-radius: var(--border-radius);
        border: 1px solid #eee;
        text-align: center;
        font-size: 0.9rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        font-weight: bold;
        -webkit-box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
        box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
      }

      .verticals-grid .card img {
        height: 50px;
      }

      /* =========================
   Certificates
========================= */
      .cert-grid {
        display: grid;
        gap: 1.5rem;
      }

      .cert-card img {
        width: 100%;
        border-radius: var(--border-radius);
      }

      /* =========================
   Mission & Vision
========================= */
      .mv-grid {
        display: grid;
        gap: 1.5rem;
      }

      .mission,
      .vision {
        padding: 2rem;
        border-radius: var(--border-radius);
      }

      .mission {
        background: #111;
        color: #fff;
      }

      .vision {
        background: #e9eff7;
      }

      .mission ul,
      .vision ul {
        margin-top: 1rem;
        padding-left: 1rem;
      }

      .mission li,
      .vision li {
        margin-bottom: 0.5rem;
      }

      /* =========================
   Responsive Breakpoints
========================= */
      @media (min-width: 768px) {
        .hero h1 {
          font-size: 2.5rem;
        }

        .about-grid {
          grid-template-columns: 1fr 1fr;
          align-items: center;
        }

        .verticals-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .cert-grid {
          grid-template-columns: repeat(3, 1fr);
        }

        .mv-grid {
          grid-template-columns: 1.5fr 1fr;
        }

        .footer-grid {
          grid-template-columns: repeat(4, 1fr);
        }
        .outlet-card-overlay .outlet-buttons {
          justify-content: flex-end;
        }        
      }

      @media (min-width: 1024px) {
        .verticals-grid {
          grid-template-columns: repeat(4, 1fr);
        }
      }
.section-title{
  font-size:42px;
  font-weight:600;
}

.section-title .dot{
  color:#e53935;
}

.outlets-section {
  padding: 80px 0;
}

/* LEFT STICKY */
.outlet-sidebar {
  position: sticky;
  top: 120px; /* below header */
}

/* Pills */
.outlet-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.outlet-pill {
  padding: 10px 20px;
  border-radius: 30px;
  border: 1px solid #cfcfcf;
  background: #f5f5f5;
  text-decoration: none;
  color: #333;
  transition: all .3s;
}

.outlet-pill.active {
  border: 2px solid #e53935;
  color: #e53935;
  background: #fff;
}

/* RIGHT CONTENT */
.outlet-item {
  margin-bottom: 120px;
  scroll-margin-top: 150px; /* Prevent hide behind header */
}

.outlet-item h3 {
  font-size: 36px;
  margin-bottom: 20px;
}

.outlet-item p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 25px;
}

/* Smooth Scroll */
html {
  scroll-behavior: smooth;
}

.outlet-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:25px 0;
}

.outlet-pill{
  padding:10px 20px;
  border-radius:30px;
  border:1px solid #cfcfcf;
  background:#f5f5f5;
  font-size:16px;
  cursor:pointer;
  transition:all .3s;
}

.outlet-pill.active{
  border:2px solid #e53935;
  color:#e53935;
  background:#fff;
}

.outlet-desc{
  margin-top:20px;
  font-size:18px;
  color:#555;
}

/* RIGHT PANEL */

.outlet-details{
  padding-left:80px;
}

.outlet-details h3{
  font-size:36px;
  font-weight:600;
}

.outlet-details p{
  font-size:20px;
  line-height:1.6;
  margin:20px 0;
}