html, body {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}


:root {
  /* Colors */
  --color-white: #f4f4f5;
  --color-black: #231f20;
  --color-gray: #c2c2bf;
  --color-dark: #2c3337;
  --color-blue: #249cd1;
  --color-yellow: #eec21b;
  --color-blue-light: #4dc3f7;
  --color-blue-dark: #1b7ca8;
  --color-yellow-light: #f7dc6f;
  --color-yellow-dark: #cba715;
  --color-border: rgba(0, 0, 0, 0.1);
  --color-shadow: rgba(0, 0, 0, 0.15);
  

  /* Font Sizes */
  --font-s-small: 0.7rem;
  --font-s-medium: 0.9rem;
  --font-s-normal: 1.1rem;
  --font-s-large: 1.4rem;
  --font-s-gigantte: 1.8rem;

  --fonts-nav: font-nav;
  --fonts-italic: font-italic;
  --fonts-text: font-text;
  --fonts-title: font-title;
  --fonts-subtitle: font-subtitle;
  --fonts-navigation: font-navigation;

  --mx-width: 1366px;



  /* Letter Spacing */
  --letter-spacing-shore: 0.73px;
  --letter-spacing-medium: 1.1px;
  --letter-spacing-large: 1.5px;

  
  /* Spacing */
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;

  /* Border Radius */
  --radius-small: 5px;
  --radius-medium: 10px;
  --radius-large: 20px;

  /* Shadows */
  --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
  --box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;

  /* Transitions */
  --transition-normal: 0.3s ease-in-out;

  /* Line Height */
  --line-height-normal: 1.5;

  /* Z-index */
  --z-header: 1000;
  --z-modal: 2000;
}

@font-face {
  font-family: 'font-nav';
  src: url(../fonts/font-nav.ttf);
}

@font-face {
  font-family: 'font-navigation';
  src: url(../fonts/font-navigation.OTF);
}


@font-face {
  font-family: 'font-italic';
  src: url(../fonts/font-italic.OTF);
}

@font-face {
  font-family: 'font-text';
  src: url(../fonts/font-texts.OTF);
}

@font-face {
  font-family: 'font-title';
  src: url(../fonts/font-title.OTF);
}

@font-face {
  font-family: 'font-subtitle';
  src: url(../fonts/font-subtitle.OTF);
}


/* Full-Width Section Layout */
.hero, .story, .free-space, .mission-vision, .cta {
  width: 100%;
  padding: 100px 20px;
  display: flex;
  justify-content: center;
}

/* 🎯 HERO SECTION */
.hero {
  background-color: var(--color-white);
}

.hero h1 {
  font-size: 3rem;
  font-family: var(--fonts-title);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: var(--letter-spacing-medium);
}

/* 🧩 STORY SECTION */
.story {
  background: var(--color-blue);
  color: var(--color-white);
}

/* ⚙️ PURPOSE SECTION */
.free-space {
  background: var(--color-yellow);
  color: var(--color-dark);
}

/* 🎯 MISSION & VISION CARDS */
.mission-vision .cards {
  width: 100%;
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap; /* ✅ allows wrapping on smaller screens */
}



.mission-vision .card {
  background: #fff;
  padding: 35px 25px;
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-medium);
  width: 100%;
  max-width: 380px;
  transition: transform var(--transition-normal),
  box-shadow var(--transition-normal);
}

.mission-vision .card {
  background: #fff;
  padding: 35px 25px;
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-medium);
  width: 100%;
  max-width: 380px;
  transition: transform var(--transition-normal),
              box-shadow var(--transition-normal);
}

.mission-vision .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.mission-vision i {
  color: var(--color-blue);
  margin-bottom: 15px;
}

/* 🚀 CALL TO ACTION */
.cta {
  background: var(--color-yellow-dark);
  color: var(--color-black);
}

.cta .cta-btn {
  padding: 15px 35px;
  border-radius: 50px;
  background: var(--color-black);
  color: var(--color-yellow);
  text-decoration: none;
  font-family: var(--fonts-navigation);
  letter-spacing: 1px;
  transition: var(--transition-normal);
}

.cta .cta-btn:hover {
  background: var(--color-blue-dark);
  color: var(--color-white);
  transform: scale(1.05);
}

/* ✅ Text Styling */
h2 {
  font-family: var(--fonts-subtitle);
  font-size: var(--font-s-large);
  text-align: center;
  letter-spacing: var(--letter-spacing-medium);
}

h3 {
  font-family: var(--fonts-subtitle);
  color: var(--color-dark);
  letter-spacing: var(--letter-spacing-shore);
}

p {
  font-family: var(--fonts-text);
  font-size: var(--font-s-normal);
  letter-spacing: var(--letter-spacing-shore);
  max-width: 900px;
  line-height: 1.3;
}

/* 📱 Responsive */
@media screen and (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .mission-vision .cards {
    flex-direction: column;
    padding: 10px;
  }
   .mission-vision .cards {
    flex-direction: column;
    align-items: center;
  }

  .mission-vision .card {
    max-width: 100%;
  }

    .mission-vision .cards {
    flex-direction: column;
    align-items: center;
    padding: 0 20px; /* ✅ Mobile padding */
  }

  .mission-vision .card {
    max-width: 100%;
  }

  .hero .container,
.story .container,
.free-space .container,
.mission-vision .container,
.cta .container {
  width: 100%;
  max-width: var(--mx-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
  text-align: center;
}
}


/* ---------- Centered container + side padding ---------- */
.container {
  max-width: 1100px;      /* controls how wide the text area becomes */
  margin: 0 auto;         /* centers it in the page */
  padding: 0 28px;        /* left & right padding for desktop */
  box-sizing: border-box;
}

/* Ensure sections use the centered container layout */
.hero .container,
.story .container,
.free-space .container,
.mission-vision .container,
.cta .container {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0 28px;
  box-sizing: border-box;
}

/* Make the paragraph blocks slightly narrower for better readability */
.story .container p,
.free-space .container p {
  max-width: 900px;
  margin: 0 auto;    /* center the paragraph block within the container */
  text-align: left;  /* keep left alignment for business copy */
  line-height: 1.6;
  font-size: 1rem;
  padding-left: 4px; /* tiny left inset to avoid visual flush */
}

/* If you don't have .container in some sections, ensure the section itself keeps padding */
.story,
.free-space {
  padding-left: 48px;
  padding-right: 48px;
}

/* Adjust spacing at narrower sizes (mobile) */
@media screen and (max-width: 768px) {
  .container,
  .hero .container,
  .story .container,
  .free-space .container,
  .mission-vision .container,
  .cta .container {
    padding: 0 20px;
  }

  /* make paragraphs breathe more vertically on mobile */
  .story .container p,
  .free-space .container p {
    padding-left: 0;
    max-width: 100%;
    font-size: 0.98rem;
    line-height: 1.65;
  }

  /* smaller top/bottom paddings for sections */
  .hero,
  .story,
  .free-space,
  .mission-vision,
  .cta {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

.hero, .story, .free-space, .mission-vision, .cta {
  padding: 140px 20px;  /* ⬅️ more space top and bottom */
}

.free-space .container .hero-content {
  padding: 0 50px;
}


/* --------------------------
   Mission & Vision — improved
   Place this AFTER existing .mission-vision rules
   -------------------------- */

.mission-vision {
  width: 100%;
  /* more breathing room above and below the whole section */
  padding: 120px 0;               /* top & bottom padding */
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

/* keep a centered inner container with side padding */
.mission-vision .container {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 0 48px;               /* left & right padding for desktop */
  box-sizing: border-box;
}

/* card grid */
.mission-vision .cards {
  display: flex;
  gap: 40px;                     /* space between cards */
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;               /* allow wrapping on smaller screens */
  width: 100%;
}

/* single card appearance and inner padding */
.mission-vision .card {
  background: #fff;
  padding: 40px 30px;            /* inner padding for desktop */
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-medium);
  width: calc(50% - 20px);       /* two cards side-by-side with gap */
  max-width: 520px;
  box-sizing: border-box;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

/* ensure icons and text align nicely */
.mission-vision .card i {
  display: block;
  margin-bottom: 12px;
}

/* hover */
.mission-vision .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

/* --------------------------
   Responsive adjustments
   -------------------------- */
@media screen and (max-width: 992px) {
  .mission-vision {
    padding: 100px 0;
  }
  .mission-vision .container {
    padding: 0 36px;
  }
  .mission-vision .card {
    padding: 36px 24px;
    width: 100%;                  /* stack cards on smaller desktops/tablets */
    max-width: 700px;             /* keep them from getting too wide */
  }
}

@media screen and (max-width: 480px) {
  .mission-vision {
    padding: 48px 0;              /* smaller top/bottom on phones */
  }
  .mission-vision .container {
    padding: 0 20px;
  }
  .mission-vision .cards {
    gap: 20px;
  }
  .mission-vision .card {
    padding: 24px 18px;           /* comfortable inner padding on mobile */
    border-radius: 14px;
    width: 100%;
  }
  .mission-vision h3 {
    font-size: 1.05rem;
  }
  .mission-vision p {
    font-size: 0.98rem;
    line-height: 1.6;
  }
}