/* ------------------ style.css (responsive) ------------------ */

/* =====================================================
   VARIABLES
   ===================================================== */

:root {

  --accent-1: #1f5f9d;
  --accent-2: #2c6fb6;
  --accent-3: #1f9d8a;

  --muted: #666;
  --bg: #fff;

  --container: 1100px;

  --radius: 12px;

  --gap: 20px;

  --nav-height: 64px;

}


/* =====================================================
   GLOBAL
   ===================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {

  margin: 0;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial;

  background: var(--bg);

  color: #1b1b1b;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  line-height: 1.5;
}

.container {

  width: 100%;

  max-width: var(--container);

  margin: 0 auto;

  padding: 18px;
}


/* =====================================================
   NAVIGATION
   ===================================================== */

header {

  position: sticky;

  top: 0;

  z-index: 60;

  background: rgba(255,255,255,0.78);

  backdrop-filter: blur(6px) saturate(110%);

  border-bottom:
    1px solid rgba(0,0,0,0.06);

  box-shadow:
    0 6px 20px rgba(10,20,30,0.04);
}

.nav-container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  height: var(--nav-height);
}


/* =====================================================
   LOGO
   ===================================================== */

.logo {

  color: var(--accent-1);

  font-weight: 800;

  text-decoration: none;

  letter-spacing: .2px;

  font-size: 18px;

  display: inline-block;
}


/* =====================================================
   NAV LINKS
   ===================================================== */

.nav-links {

  display: flex;

  gap: 12px;

  align-items: center;
}

.nav-links a {

  position: relative;

  text-decoration: none;

  color: var(--accent-1);

  padding: 8px 12px;

  border-radius: 999px;

  font-weight: 600;

  transition:
    transform .18s ease,
    color .18s ease;
}

.nav-links a::after {

  content: "";

  position: absolute;

  left: 10px;

  right: 10px;

  bottom: -6px;

  height: 3px;

  background:
    linear-gradient(
      90deg,
      var(--accent-2),
      var(--accent-3)
    );

  transform: scaleX(0);

  transform-origin: left center;

  transition:
    transform .22s cubic-bezier(.2,.9,.3,1);

  border-radius: 3px;
}

.nav-links a:hover {

  transform: translateY(-2px);

  color: #163f67;
}

.nav-links a:hover::after,
.nav-links a.active::after {

  transform: scaleX(1);
}

.nav-links a.active {

  background:
    rgba(31,95,157,0.08);

  padding: 8px 16px;
}


/* =====================================================
   HAMBURGER
   ===================================================== */

.nav-toggle {

  display: none;

  background: transparent;

  border: 0;

  width: 44px;

  height: 44px;

  border-radius: 8px;

  align-items: center;

  justify-content: center;

  cursor: pointer;
}

.hamburger {

  width: 22px;

  height: 2px;

  background: var(--accent-1);

  display: block;

  position: relative;

  transition: all .22s ease;
}

.hamburger::before,
.hamburger::after {

  content: "";

  position: absolute;

  left: 0;

  width: 22px;

  height: 2px;

  background: var(--accent-1);

  transition: all .22s ease;
}

.hamburger::before {
  top: -7px;
}

.hamburger::after {
  top: 7px;
}


/* OPEN HAMBURGER */

.nav-toggle.open .hamburger {
  background: transparent;
}

.nav-toggle.open .hamburger::before {

  transform: rotate(45deg);

  top: 0;
}

.nav-toggle.open .hamburger::after {

  transform: rotate(-45deg);

  top: 0;
}


/* =====================================================
   PANELS
   ===================================================== */

.panel {

  padding: 40px 0;
}

.panel-inner {

  display: flex;

  gap: var(--gap);

  align-items: center;
}


/* LEFT */

.panel-left {

  flex: 1;

  min-width: 220px;
}


/* RIGHT */

.panel-right {

  flex: 1;

  display: flex;

  justify-content: center;

  align-items: center;
}


/* =====================================================
   PANEL IMAGE
   ===================================================== */

.panel-image {

  width: 100%;

  max-width: 560px;

  height: 340px;

  border-radius: var(--radius);

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  box-shadow:
    0 10px 30px rgba(10,20,30,0.08);
}


/* =====================================================
   SECTION COLORS
   ===================================================== */

.panel-home {
  background: #FFF6E9;
}

.panel-about {
  background: #F1FFEE;
}

.panel-vision {
  background: #EEF6FF;
}

.panel-mission {
  background: #FFF0F2;
}


/* =====================================================
   EVENTS
   ===================================================== */

.events-section {

  background: #F7F8FA;

  padding: 44px 0;
}

.event-card {

  display: flex;

  gap: 18px;

  background: #fff;

  border-radius: 12px;

  padding: 18px;

  box-shadow:
    0 8px 22px rgba(0,0,0,0.05);

  align-items: flex-start;
}

.event-image {

  width: 40%;

  min-width: 200px;

  height: 260px;
  background-repeat: no-repeat;
  border-radius: 12px;

  background-size: contain;

  background-position: center;
}

.event-content {
  flex: 1;
  min-width: 0;
}


/* =====================================================
   101 EARTHMOVERS VIDEO GALLERY
   ===================================================== */

.yatra-video-gallery {

  width: 100%;

  margin-top: 35px;

  padding: 30px 0;
}

.yatra-gallery-heading {

  text-align: center;

  margin-bottom: 22px;
}

.yatra-gallery-heading h3 {

  margin: 0;

  font-size: 26px;

  color: #163f67;
}

.yatra-gallery-heading p {

  margin: 7px 0 0;

  color: #666;

  font-size: 14px;
}


/* =====================================================
   VIDEO GRID
   ===================================================== */

.yatra-video-grid {

  width: 100%;

  max-width: 900px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 20px;
}


/* =====================================================
   VIDEO CARD
   ===================================================== */

.yatra-video-card {

  width: 100%;

  background: #ffffff;

  border: 1px solid #e5e5e5;

  border-radius: 12px;

  overflow: hidden;

  box-shadow:
    0 6px 18px rgba(0,0,0,0.07);
}


/* =====================================================
   VIDEO
   ===================================================== */

/*
   IMPORTANT:

   Videos keep their original aspect ratio.
   They are NOT cropped.
*/

.yatra-video-card video {

  display: block;

  width: 100%;

  height: auto;

  max-height: 360px;

  object-fit: contain;

  background: #000;

  margin: 0 auto;
}


/* =====================================================
   VIDEO TITLE
   ===================================================== */

.video-title {

  padding: 11px 14px;

  text-align: center;

  font-size: 14px;

  font-weight: 700;

  color: #333;
}


/* =====================================================
   PHOTO GALLERY
   ===================================================== */

.gallery-section {

  background: #F8FBFF;

  padding: 48px 0;

  text-align: center;
}

.gallery-section h2 {

  margin-top: 0;

  color: #163f67;
}

.muted {

  color: #666;

  margin-bottom: 25px;
}


/* =====================================================
   PHOTO SLIDER
   ===================================================== */

.slider {

  width: 100%;

  max-width: 900px;

  margin: 0 auto;

  position: relative;

  overflow: hidden;

  border-radius: 14px;

  background: #111;
}


/* =====================================================
   SLIDES CONTAINER
   ===================================================== */

.slides {

  display: flex;

  width: 100%;

  transition:
    transform .55s
    cubic-bezier(.22,.9,.3,1);

  will-change: transform;
}


/* =====================================================
   INDIVIDUAL SLIDE
   ===================================================== */

/*
   IMPORTANT:

   Your gallery has both PORTRAIT and LANDSCAPE photos.

   "contain" makes the ENTIRE photo visible.

   Nothing is:
   - cropped
   - stretched
   - distorted
   - zoomed excessively
*/

.slide {

  flex: 0 0 100%;

  min-width: 100%;

  width: 100%;

  height: 500px;

  background-size: contain;

  background-position: center center;

  background-repeat: no-repeat;

  background-color: #111;
}


/* =====================================================
   SLIDER BUTTONS
   ===================================================== */

.slider-btn {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background: rgba(255,255,255,0.9);

  border: 0;

  padding: 8px 10px;

  border-radius: 8px;

  cursor: pointer;

  z-index: 30;

  color: var(--accent-1);

  box-shadow:
    0 8px 20px rgba(0,0,0,0.12);

  display: flex;

  align-items: center;

  justify-content: center;
}

.slider-btn:hover {

  background: #fff;
}

.slider-btn.prev {
  left: 10px;
}

.slider-btn.next {
  right: 10px;
}


/* =====================================================
   SLIDER DOTS
   ===================================================== */

.slider-dots {

  position: absolute;

  bottom: 12px;

  left: 50%;

  transform: translateX(-50%);

  width: 90%;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: center;

  gap: 6px;

  z-index: 35;
}


/* JavaScript-created dots */

.slider-dots button,
.slider-dot {

  width: 9px;

  height: 9px;

  min-width: 9px;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background:
    rgba(255,255,255,0.8);

  opacity: .65;

  cursor: pointer;

  transition:
    .2s ease;
}


/* ACTIVE DOT */

.slider-dots button.active,
.slider-dot.active {

  background: #ffffff;

  opacity: 1;

  transform: scale(1.3);
}


/* =====================================================
   CONTACT
   ===================================================== */

.contact-section {

  background: #FDFDFD;

  padding: 40px 0;
}

.contact-grid {

  display: flex;

  gap: 24px;

  align-items: flex-start;

  flex-wrap: wrap;
}

.contact-grid > div {

  flex: 1 1 320px;

  min-width: 260px;
}


/* =====================================================
   PRESIDENT CARD
   ===================================================== */

.president-card {

  max-width: 360px;

  background: #fff;

  padding: 18px;

  border-radius: 12px;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.06);

  text-align: center;
}

.president-photo {

  width: 100%;

  height: 260px;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  border-radius: 10px;

  margin-bottom: 12px;
}


/* =====================================================
   INPUTS
   ===================================================== */

input,
textarea {

  width: 100%;

  padding: 12px;

  border-radius: 8px;

  border: 1px solid #e6e6e6;

  margin-bottom: 12px;

  font-size: 15px;
}


/* =====================================================
   FOOTER
   ===================================================== */

footer {

  padding: 20px 0;

  text-align: center;

  border-top:
    1px solid rgba(0,0,0,0.04);

  margin-top: 30px;
}


/* =====================================================
   TABLET
   ===================================================== */

@media (max-width: 900px) {

  /* PANELS */

  .panel-inner {

    flex-direction: column-reverse;

    gap: 16px;
  }

  .panel-image {

    max-width: 100%;

    height: 260px;
  }


  /* EVENTS */

  .event-card {

    flex-direction: column;
  }

  .event-image {

    width: 100%;

    height: 240px;

    min-width: unset;
  }


  /* VIDEOS */

  .yatra-video-grid {

    grid-template-columns:
      repeat(2, minmax(0,1fr));

    gap: 16px;
  }

  .yatra-video-card video {

    width: 100%;

    height: auto;

    max-height: 300px;

    object-fit: contain;
  }


  /* SLIDER */

  .slider {

    max-width: 100%;
  }

  .slide {

    height: 400px;

    background-size: contain;

    background-position: center center;

    background-repeat: no-repeat;
  }


  /* NAVIGATION */

  .nav-toggle {

    display: flex;
  }

  .nav-links {

    display: none;

    position: fixed;

    right: 12px;

    top: var(--nav-height);

    background:
      rgba(255,255,255,0.98);

    border-radius: 12px;

    box-shadow:
      0 20px 60px rgba(2,8,23,0.12);

    padding: 12px;

    flex-direction: column;

    min-width: 200px;
  }

  .nav-links a {

    padding: 10px 14px;

    display: block;
  }

  .container {

    padding: 14px;
  }

  .president-photo {

    height: 220px;
  }

}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 600px) {

  /* NAVIGATION */

  .nav-links {

    right: 8px;

    min-width: 160px;

    padding: 10px;
  }

  .nav-container {

    padding: 8px 12px;
  }

  .logo {

    font-size: 16px;
  }


  /* PANELS */

  .panel-image {

    height: 200px;
  }

  .panel-left h1 {

    font-size: 20px;
  }


  /* EVENTS */

  .event-card {

    padding: 12px;
  }


  /* =====================================================
     VIDEOS
     ===================================================== */

  .yatra-video-grid {

    grid-template-columns: 1fr;

    gap: 18px;
  }

  .yatra-video-card video {

    width: 100%;

    height: auto;

    max-height: 320px;

    object-fit: contain;
  }


  /* =====================================================
     PHOTO SLIDER
     ===================================================== */

  .slider {

    width: 100%;

    border-radius: 10px;
  }

  .slide {

    height: 300px;

    background-size: contain;

    background-position: center center;

    background-repeat: no-repeat;
  }


  /* SLIDER BUTTONS */

  .slider-btn {

    width: 38px;

    height: 38px;

    font-size: 20px;

    padding: 6px;
  }

  .slider-btn.prev {

    left: 8px;
  }

  .slider-btn.next {

    right: 8px;
  }


  /* DOTS */

  .slider-dots {

    width: 85%;

    gap: 5px;

    bottom: 9px;
  }

  .slider-dots button,
  .slider-dot {

    width: 7px;

    height: 7px;

    min-width: 7px;
  }


  /* CONTACT */

  .contact-grid {

    gap: 14px;
  }

}


/* =====================================================
   SMALL PHONES
   ===================================================== */

@media (max-width: 480px) {

  .panel-image {

    height: 200px;
  }

  .panel-left h1 {

    font-size: 20px;
  }

  .nav-links {

    right: 8px;

    min-width: 160px;

    padding: 10px;
  }

  .nav-container {

    padding: 8px 12px;
  }

  .logo {

    font-size: 16px;
  }

  .event-card {

    padding: 12px;
  }

  .contact-grid {

    gap: 14px;
  }


  /* VIDEOS */

  .yatra-video-card video {

    width: 100%;

    height: auto;

    max-height: 300px;

    object-fit: contain;
  }


  /* SLIDER */

  .slide {

    height: 280px;

    background-size: contain;

    background-position: center center;

    background-repeat: no-repeat;
  }

}