/*
===============================================
  JOSIAH MORRA OFFICIAL WEBSITE STYLES
  
  A professional website for elite Canadian rugby player
  Josiah Morra, showcasing his career, achievements,
  and speaking/coaching services.
  
  Author: Abdullah Mahfouz
  Version: 1.0
  Last Updated: August 2025
===============================================
*/

/*
===============================================
  TABLE OF CONTENTS
  
  1. CSS Variables & Configuration
  2. Reset & Base Styles
  3. Navigation & Header
  4. Hero Section
  5. Profile Section
  6. Timeline Section
  7. Achievements Section
  8. Offerings Section
  9. Team Section
  10. Gallery Section
  11. Contact Section
  12. Footer
  13. Utility Classes
  14. Media Queries
===============================================
*/

/* ===============================================
   1. CSS VARIABLES & CONFIGURATION
   Custom properties for consistent theming
   =============================================== */
:root {
  /* Brand Colors */
  --primary: #292d33;        /* Dark gray for text */
  --accent: #ec3325;         /* Red accent for highlights */
  --white: #ffffff;          /* Pure white */
  
  /* Typography */
  --font-primary: 'Poppins', sans-serif;
  
  /* Spacing */
  --section-padding: 80px 0;
  --container-max-width: 1200px;
  
  /* Transitions */
  --transition-smooth: 0.3s ease;
  --transition-slow: 0.6s ease;
  
  /* Shadows */
  --shadow-light: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.15);
  --shadow-heavy: 0 15px 50px rgba(0, 0, 0, 0.2);
}

/* ===============================================
   2. RESET & BASE STYLES
   Normalize and set foundation styles
   =============================================== */

/* Universal reset for consistent rendering */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base body styles */
body {
  font-family: var(--font-primary);
  color: var(--primary);
  line-height: 1.6;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Container for consistent max-width and centering */
.container {
  width: 90%;
  max-width: var(--container-max-width);
  margin: 0 auto;
}

/* Base link styles */
a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
}

/* Base image styles for performance */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===============================================
   3. NAVIGATION & HEADER STYLES
   Fixed header with smooth scroll navigation
   =============================================== */

/* Navigation link hover effects - slide-in underline */
.nav__menu a {
  position: relative;
}

.nav__menu a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--transition-smooth);
}

.nav__menu a:hover::after {
  width: 100%;
}

/* Base image styles for performance */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Navigation */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: var(--white);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}
.logo img {
  height: 40px;
}
.nav__menu {
  list-style: none;
  display: flex;
  gap: 2rem;
}
.nav__menu a {
  font-weight: 500;
  transition: color 0.3s ease;
}
.nav__menu a:hover {
  color: var(--accent);
}

/* let the header sit on top */
.site-header {
  background: transparent;
  box-shadow: none;
  z-index: 10;
}

/* push the hero below the 70px-tall header,
   then make it fill the rest of the viewport */
.hero {
  position: relative;
  margin-top: 70px;                              /* move whole banner below nav */
  height: calc(100vh - 70px);                    /* fill viewport minus header */
  background-image: url('../images/Josiah Morra - DDCSB.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 20%;               /* shift image down so you see his head */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* overlay for text contrast */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
}

/* your centered CTA */
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  width: 100%;
  padding: 0 1rem;
  text-align: center;
  color: #fff;
}

/* nav on top of everything */
.site-header {
  background: transparent;
  box-shadow: none;
}

/* 🔥 Upgraded “Book Josiah” Button */
.btn {
  position: relative;
  display: inline-block;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff;
  background: linear-gradient(45deg, var(--accent) 0%, #d12a1f 100%);
  border: none;
  border-radius: 50px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
}

/* subtle shine layer */
.btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, transparent 60%);
  transform: translate(-100%, -100%) rotate(45deg);
  transition: transform 0.5s ease;
  z-index: -1;
}

/* hover/active states */
.btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.btn:hover::before {
  transform: translate(0, 0) rotate(45deg);
}

.btn:active {
  transform: translateY(-2px) scale(0.98);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}


/* Profile Section */
.profile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: center;
  gap: 2rem;
  padding: 4rem 0;
}
.profile-image {
  position: relative;
}
.profile-image img {
  border-radius: 8px;
}
.profile-born {
  position: absolute;
  bottom: -1.25rem;
  left: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  background: rgba(0,0,0,0.6);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.profile-text h2 {
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}
.profile-text h1 {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
.profile-text p {
  margin-bottom: 1rem;
}
/* Profile Section Background */
#profile {
  position: relative;               /* establish a stacking context */
  background: url('../images/background.png') 
              center center / cover no-repeat;
  padding: 6rem 0;                  /* adjust vertical padding as needed */
  color: var(--white);              /* make text legible over image */
}

/* Optional: dark overlay */
#profile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);       /* tweak opacity to taste */
  z-index: 0;
}

/* make #profile only as tall as its content, but give it a full-bleed background */
#profile {
  position: relative;
  /* remove the background on this element itself if you had one */
  background: none;
}

/* the full-width background stripe behind it */
#profile::before {
  content: '';
  position: absolute;
  top: 0;          /* align with the top of the section */
  left: 50%;       /* start at the middle */
  transform: translateX(-50%); /* shift back half viewport width */
  width: 100vw;    /* full viewport width */
  height: 100%;    /* same height as the section */
  background: url('../images/background.png') center/cover no-repeat;
  z-index: -1;     /* behind all your content */
}


/* Timeline */
.timeline-section h2 {
  text-align: center;
  margin-bottom: 1rem;
}
.timeline-list {
  list-style: none;
  padding: 0;
}
.timeline-list li {
  display: flex;
  margin-bottom: 0.75rem;
}
.timeline-list .year {
  width: 4rem;
  font-weight: 600;
}
.timeline-list .event {
  flex: 1;
}

/* Achievements */
.achievements-section h2 {
  text-align: center;
  margin-bottom: 1rem;
}
.achievements-list {
  list-style: disc inside;
  margin-bottom: 4rem;
}
.achievements-list li {
  margin-bottom: 0.5rem;
}

/* Offerings */
.offerings-section h2 {
  text-align: center;
  margin-bottom: 1rem;
}
.offerings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-bottom: 4rem;
}
.offering {
  background: #fff;
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 4px;
}
.offering h3 {
  margin-bottom: 0.5rem;
}

/* Contact */
.contact-section h2 {
  text-align: center;
  margin-bottom: 1rem;
}
.contact-form {
  display: grid;
  gap: 0.75rem;
  max-width: 500px;
  margin: 0 auto 2rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
}
.contact-form button {
  background: var(--accent);
  color: var(--white);
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.contact-info {
  text-align: center;
  margin-bottom: 4rem;
}
.contact-info p {
  margin-bottom: 0.5rem;
}
.contact-info a {
  color: var(--primary);
}

/* Footer */
.site-footer {
  text-align: center;
  padding: 2rem 0;
  color: #666;
  font-size: 0.9rem;
}

/* Typewriter Animation */
.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.12em solid var(--white);
  animation:
    typing 2s steps(30, end) forwards,
    blink-caret 0.75s step-end infinite;
}
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: var(--white); }
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
  .nav__menu {
    gap: 1rem;
    font-size: 0.9rem;
  }
  .profile {
    display: flex;
    flex-direction: column-reverse;
    padding: 2rem 0;
  }
  .hero-content h1 {
    font-size: 2rem;
  }
}
/* Contact Info Icon Fix */
.contact-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 4rem;
}

.contact-info a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--primary);
  text-decoration: none;
  font-size: 0.9rem;
}

.contact-info img {
  width: 24px;      /* constrain all icons to 24×24 */
  height: 24px;
  object-fit: contain;
}
/* gallery images “pop” on hover */
.gallery-grid img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery-grid img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
/* Hero Section */
.hero {
  position: relative;
  margin-top: 70px;                              /* move whole banner below nav */
  height: calc(100vh - 70px);                    /* fill viewport minus header */
  background-image: url('../images/Josiah Morra - DDCSB.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 20%;               /* shift image down so you see his head */
  display: flex;
  align-items: center;
  justify-content: center;
}


.hero-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  mix-blend-mode: multiply;
  z-index: 0;
}

.hero-content {
  position: relative; z-index: 1;
  text-align: center; color: #fff;
}

/* Gradient-filled, animated text reveal */
.hero-content h1 {
  font-size: 4rem; line-height: 1.1;
  margin-bottom: 0.5rem;
  background: linear-gradient(90deg, #fff, #ec3325, #fff);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 5s ease infinite,
             text-reveal 1.2s ease-out forwards;
}
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes text-reveal {
  0% { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* Subtitle fades in */
.hero-content .subtitle {
  font-size: 1.3rem; margin-bottom: 2rem;
  opacity: 0; transform: translateY(20px);
  animation: fade-slide-in 1s 0.8s forwards;
}
/* — Refined subtitle styling — */
.hero-subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 2.5rem;
  position: relative;
  display: inline-block;
}
.hero-subtitle::after {
  content: '';
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: #ec3325;
  border-radius: 2px;
  opacity: 0.9;
}

/* Responsive tweak for smaller screens */
@media (max-width: 768px) {
  .hero-subtitle {
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    margin-bottom: 2rem;
  }
  .hero-subtitle::after {
    width: 30px;
    height: 2px;
    bottom: -0.4rem;
  }
}

/* 🔥 Simplified CTA button */
.cta-btn {
  display: inline-block;
  margin: 1.5rem auto 0;     /* center + top spacing */
  padding: 1rem 2.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(45deg, var(--accent) 0%, #d12a1f 100%);
  border: none;
  border-radius: 50px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
  position: relative;
  z-index: 2;                /* ensure it floats above overlay */
}

/* subtle “shine” effect on hover */
.cta-btn::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
  transform: translate(-100%, -100%) rotate(45deg);
  transition: transform 0.5s ease;
  z-index: -1;
}

.cta-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4);
}

.cta-btn:hover::before {
  transform: translate(0, 0) rotate(45deg);
}



/* ——————————————————————— */
/* Header Facelift */
/* ——————————————————————— */

/* 1) Semi-transparent frosted glass */
.site-header {
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding: 0.5rem 0;
  transition: padding 0.3s ease, backdrop-filter 0.3s ease;
}

/* shrink on scroll (optional) */
.window-scrolled .site-header {
  padding: 0.3rem 0;
  backdrop-filter: blur(12px);
}

/* 2) Logo tweaks */
.logo img {
  height: 48px;
  transition: transform 0.3s ease;
}
.logo:hover img {
  transform: scale(1.1);
}

/* 3) Nav layout & spacing */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
}

/* 4) Link styling & underline slide */
.nav__menu a {
  position: relative;
  padding: 0.25rem 0;
  font-weight: 600;
  transition: color 0.3s ease;
}
.nav__menu a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
}
.nav__menu a:hover {
  color: var(--accent);
}
.nav__menu a:hover::after {
  width: 100%;
}

/* 5) Make sure header stays on top */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
/* Horizontal Timeline */
.timeline-section {
  padding: 4rem 1rem;
  background: #fefefe;
  overflow-x: auto;
}
.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--primary);
}
.timeline-wrapper {
  overflow-x: auto;
  padding-bottom: 1rem;
}
.timeline {
  display: flex;
  flex-wrap: wrap; /* ✅ allow wrapping instead of forcing horizontal scroll */
  justify-content: center;
  gap: 2rem;
  position: relative;
  padding-top: 3rem;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  z-index: 0;
}
.timeline-item {
  position: relative;
  flex: 1 1 160px; /* ✅ grow/shrink with responsiveness */
  max-width: 200px;
  text-align: center;
  z-index: 1;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 1.5rem;
  left: 2rem;
  height: 2px;
  width: calc(100% - 4rem);
  background: var(--accent);
}
.timeline-item {
  position: relative;
  flex: 0 0 200px;
  text-align: center;
}
.timeline-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  margin: 0 auto 0.5rem auto;
  position: relative;
  top: -1.2rem;
}

.timeline-year {
  margin-top: 0.5rem;
  font-weight: 700;
  color: var(--primary);
}
.timeline-event {
  margin-top: 0.25rem;
  font-size: 0.95rem;
  color: #555;
}
/* Full section styling */
#achievements {
  position: relative;
  overflow: hidden;
  padding: 6rem 1rem 4rem;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  background:
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url('../images/background.png') center/cover no-repeat;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

/* Title + underline */
#achievements > h2 {
  text-align: center;
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 2rem;
  z-index: 10;
  position: relative;
}

#achievements > h2::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: var(--accent);
  margin: 0.5rem auto 2rem;
  border-radius: 2px;
}

/* Layout */
.achievements-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

/* Timeline */
.achievements-timeline {
  flex: 1.2;
  padding-left: 2rem;
  position: relative;
}

.achievements-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12px;
  bottom: 0;
  width: 2px;
  background: var(--accent);
}

/* Timeline items */
.ach-year {
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
  display: block;
}

.ach-content p {
  font-weight: 400;
  font-size: 1rem;
  margin: 0;
  line-height: 1.5;
}

/* Sidebar image */
.achievement-sidebar {
  flex: 0 0 40%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.achievement-sidebar img {
  max-width: 100%;
  height: auto;
  max-height: 680px;
  transform: translateY(50px); /* floated down like soccer */
  object-fit: contain;
}

.achievements-inner {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }

.achievement-sidebar {
    justify-content: center;
  }

.achievement-sidebar img {
    transform: translateY(0);
    max-height: 500px;
  }

.timeline-section {
  padding: 6rem 2rem;
  background-color: #fff;
  color: #222;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 3rem;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: var(--accent);
  margin: 0.5rem auto 0;
  border-radius: 2px;
}


.timeline-section {
  padding: 6rem 2rem;
  background-color: #fff;
  color: #222;
}


.section-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 3rem;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: var(--accent);
  margin: 0.5rem auto 0;
  border-radius: 2px;
}

.timeline-wrapper {
  overflow-x: auto;
  padding-bottom: 1rem;
}

.timeline {
  display: flex;
  gap: 3rem;
  min-width: 900px;
  position: relative;
  padding: 1rem 0;
  border-top: 3px solid var(--accent);
}

.timeline-item {
  text-align: center;
  position: relative;
  flex: 0 0 auto;
}

.timeline-circle {
  width: 40px;
  height: 40px;
  background: var(--accent);
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  position: relative;
  top: -25px;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

.timeline-year {
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 0.5rem;
}

.timeline-event {
  font-size: 1rem;
  margin-top: 0.25rem;
  color: #ccc;
}
.timeline-event {
  font-size: 1rem;
  margin-top: 0.25rem;
  color: #444;
}

.timeline-year {
  color: #111;
}

.timeline-circle {
  background: var(--accent); /* keep this for consistency */
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.offerings-section {
  padding: 6rem 2rem;
  background: #fff;
  text-align: center;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 80px;
  height: 4px;
  background: var(--accent);
  margin: 0.5rem auto 2rem;
  border-radius: 2px;
}

.offerings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.offering-card {
  background: #f9f9f9;
  border-radius: 12px;
  padding: 2rem;
  transition: 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.offering-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.offering-card i {
  font-size: 2.5rem;
  color: var(--accent);
  margin-bottom: 1rem;
}

.offering-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.offering-card p {
  font-size: 1rem;
  color: #444;
  line-height: 1.6;
}

/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  padding-top: 80px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.85);
}

.modal-content {
  display: block;
  margin: auto;
  max-width: 90%;
  max-height: 80vh;
  border-radius: 10px;
}

.modal-close {
  position: absolute;
  top: 30px;
  right: 40px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
.modal-close:hover {
  color: var(--accent);
}
/* Team Section (soccer-style with achievements background) */
.team-section {
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('../images/background.png') center/cover no-repeat;
  padding: 6rem 2rem;
  color: white;
}

.team-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
  gap: 2rem;
}

.team-info {
  flex: 1;
  text-align: center;
}

.team-heading {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
}

.team-heading span {
  font-size: 4rem;
  color: var(--accent);
}

.team-logo {
  width: 120px;
  margin: 1.5rem auto;
  display: block;
}

.team-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: #fff;
  color: #000;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.team-button:hover {
  background: var(--accent);
  color: #fff;
}

.team-photo {
  flex: 1;
  display: flex;
  justify-content: center;
}

.team-photo img {
  max-width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .team-inner {
    flex-direction: column;
    text-align: center;
  }

  .team-heading span {
    font-size: 3.2rem;
  }

  .team-heading {
    font-size: 2.2rem;
  }
}
.contact-section h2 {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

.contact-form {
  max-width: 700px;
  margin: 0 auto 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background-color: #fff;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form .btn.cta {
  padding: 1rem;
  background-color: #e6392d;
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-size: 1.1rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.contact-form .btn.cta:hover {
  background-color: #cc2f24;
}

.contact-info {
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.contact-info a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--dark);
  font-weight: 500;
  text-decoration: none;
}

.contact-info img {
  width: 20px;
  height: 20px;
}
.contact-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
}

.contact-form {
  flex: 1 1 350px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  padding: 0.75rem 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}

.contact-form select {
  background-color: white;
  color: #333;
}

.contact-form textarea {
  resize: vertical;
}

.contact-image {
  flex: 1 1 350px;
  max-width: 450px;
  text-align: center;
}

.contact-image img {
  max-width: 100%;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.contact-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.contact-title {
  position: relative;
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.contact-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: #E7332B; /* your red accent color */
  margin: 0.5rem auto 0;
  border-radius: 2px;
}
.site-footer {
  background-color: #111;
  color: #fff;
  padding: 2rem 0;
  text-align: center;
  margin-top: 4rem;
}

.site-footer .footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.site-footer .highlight {
  color: #e53935;
  font-weight: 600;
}
.cta-button {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.9rem 2rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #e53935, #d32f2f);
  border: none;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(229, 57, 53, 0.3);
  transition: all 0.3s ease;
}

.cta-button:hover {
  background: linear-gradient(135deg, #d32f2f, #b71c1c);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(229, 57, 53, 0.4);
}
html {
  scroll-behavior: smooth;
}
.svg-try-line path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1s ease-out;
}
.svg-try-line.revealed path {
  stroke-dashoffset: 0;
}
/* make each stat card pop on hover */
.stat {
  display: inline-block;
  padding: 1rem;
  border-radius: 8px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.stat:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* the number itself can change color when animating */
.stat-number {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--accent);
  display: inline-block;
  transition: color 0.3s ease;
}
/* ↓ Scroll-down Arrow ↓ */
.scroll-down {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.scroll-down .arrow {
  display: block;
  width: 24px;
  height: 24px;
  border-bottom: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
  animation: arrow-bounce 1.5s infinite;
}

@keyframes arrow-bounce {
  0%   { transform: rotate(45deg) translate(0, 0); opacity: 1 }
  50%  { transform: rotate(45deg) translate(0, 8px); opacity: 0.6 }
  100% { transform: rotate(45deg) translate(0, 0); opacity: 1 }
}
.section-cta {
  text-align: center;
  margin-top: 2rem;
}

.cta-btn.secondary {
  background: rgba(255,255,255,0.2);
  color: #171717;
  padding: 0.75rem 2rem;
  border-radius: 50px;
  transition: background 0.3s ease;
}

.cta-btn.secondary:hover {
  background: rgba(255,255,255,0.35);
}
.media-wrapper {
  perspective: 600px; /* if you still want the hover-tilt */
  text-align: center; /* center it */
  margin: 2rem auto;
}

.media-wrapper .media-img {
  display: inline-block;
  width: 60%;         /* shrink it to 60% of its container */
  max-width: 300px;    /* but never exceed 300px wide */
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}
/* Scrollable navigation on mobile */
.nav-scroll-wrapper {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.nav-scroll-wrapper::-webkit-scrollbar {
  display: none; /* Hide scrollbar on iOS/Android */
}

.nav__menu {
  display: flex;
  gap: 1.5rem;
  white-space: nowrap;
  padding: 0.5rem 0;
}
/* --- Gallery slider --- */
.gallery-section {
  padding: 80px 0;
  background: #f8f9fa;
}

.gallery-section h2 {
  text-align: center;
  margin-bottom: 60px;
  font-size: 2.5rem;
  color: var(--primary);
  position: relative;
}

.gallery-section h2::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--accent);
}

.gallery-slider {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(0,0,0,0.15);
  background: var(--white);
}

.gal-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.gal-slide {
  min-width: 100%;
  user-select: none;
  display: flex;           /* center image */
  align-items: center;
  justify-content: center;
  background: #000;        /* letterbox background */
}

.gal-slide img {
  width: 100%;
  height: auto;            /* allow natural height */
  max-height: 600px;       /* keep overall slider height reasonable */
  object-fit: contain;     /* show entire image */
  display: block;
  transition: transform 0.3s ease;
}

.gal-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 3;
  font-size: 18px;
}

.gal-btn:hover {
  background: rgba(0,0,0,0.8);
  transform: translateY(-50%) scale(1.1);
}

.gal-prev {
  left: 20px;
}

.gal-next {
  right: 20px;
}

.gal-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
}

.gal-dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.7);
  cursor: pointer;
  padding: 0;
  transition: all 0.3s ease;
}

.gal-dots button.active {
  background: var(--accent);
  transform: scale(1.3);
}

.gal-dots button:hover {
  background: rgba(255,255,255,0.9);
  transform: scale(1.1);
}

.gal-dots button.active:hover {
  background: var(--accent);
}

@media (max-width: 768px) {
  .gallery-section {
    padding: 60px 0;
  }
  
  .gallery-section h2 {
    font-size: 2rem;
    margin-bottom: 40px;
  }
  
  .gallery-slider {
    margin: 0 20px;
    border-radius: 15px;
  }
  
  .gal-slide img {
    max-height: 400px;     /* responsive cap */
  }
  
  .gal-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .gal-prev {
    left: 15px;
  }
  
  .gal-next {
    right: 15px;
  }
  
  .gal-dots {
    bottom: 15px;
    gap: 8px;
  }
  
  .gal-dots button {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 480px) {
  .gal-slide img {
    max-height: 300px;     /* smaller screens */
  }
  
  .gal-btn {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
}