/* ==========================================================================
   TAFF - Responsive Stylesheet
   Mobile Responsive Rules (960px, 768px & 400px Breakpoints)
   Strictly using VW Units for all properties (PX only in @media max-width lines)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Breakpoint: 960px (Tablets & Medium Laptops)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 960px) {
  :root {
    --header-height: 16vw;
  }

  /* Preloader Responsive */
  .preloader-glass-card {
    min-width: 70vw;
    padding: 4.17vw 6.25vw 3.65vw;
    border-radius: 2.6vw;
    gap: 1.82vw;
  }

  .golf-stage {
    width: 55vw;
    height: 19.79vw;
  }

  .preloader-title {
    font-size: 2.08vw;
    letter-spacing: 0.18vw;
  }

  .preloader-subtitle {
    font-size: 0.89vw;
    letter-spacing: 0.28vw;
  }

  .emblem-year {
    font-size: 1.04vw;
    letter-spacing: 0.3vw;
  }

  .preloader-progress-track {
    height: 0.29vw;
  }

  /* Global Layout Container Safety */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Header */
  .header {
    padding: 0 3.13vw;
    height: 9.11vw;
  }

  .brand-name {
    font-size: 2.34vw;
  }

  .nav-links {
    gap: 2.34vw;
  }

  .nav-link {
    font-size: 1.76vw;
  }

  /* Section Margins */
  .hero-wrapper,
  .about-section-wrapper,
  .ambassadors-section-wrapper,
  .signature-section-wrapper,
  .global-society-wrapper,
  .impact-section-wrapper,
  .informal-rounds-wrapper,
  .partnerships-section-wrapper,
  .champions-section-wrapper,
  .connect-section-wrapper {
    padding-left: 2.6vw;
    padding-right: 2.6vw;
  }
}

/* --------------------------------------------------------------------------
   2. Breakpoint: 768px (Mobile & Tablet Portrait)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

  /* Preloader Mobile */
  .txt-loading {
    margin-top: 5vw;
    padding-top: 2vw;
  }

  .txt-loading .letters-loading {
    font-size: 5.5vw;
  }

  .spinner-container {
    width: 45vw;
    height: 45vw;
  }

  .preloader-glass-card {
    min-width: 85vw;
    padding: 7.81vw 8.33vw 6.77vw;
    border-radius: 4.17vw;
    gap: 3.13vw;
  }

  .golf-stage {
    width: 75vw;
    height: 28.13vw;
  }

  .preloader-title {
    font-size: 3.65vw;
    letter-spacing: 0.26vw;
  }

  .preloader-subtitle {
    font-size: 1.56vw;
    letter-spacing: 0.39vw;
  }

  .emblem-year {
    font-size: 1.82vw;
    letter-spacing: 0.52vw;
  }

  .preloader-progress-track {
    height: 0.52vw;
  }

  /* Global Mobile Overflow Fix */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  * {
    box-sizing: border-box;
  }

  /* Header & Mobile Drawer Navigation */
  .header {
    padding: 0 4.17vw;
    height: 30vw;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--header-bg);
    transition: all 0.4s ease;
  }

  .header.scrolled {
    height: 31vw;
    box-shadow: 0 1.04vw 3.13vw rgba(0, 0, 0, 0.08);
  }

  .header.scrolled .brand-logo-img {
    width: 46vw;
    margin-top: -2vw;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: 2.6vw;
  }

  .brand-logo-img {
    width: auto;
    height: 50vw;
    margin-top: -2vw;
    margin-left: -6vw;
    transition: all 0.3s ease;
  }

  .brand-logo-icon {
    width: 7.29vw;
    height: 7.29vw;
  }

  .brand-name {
    font-size: 4.8vw;
  }

  .btn-contact-wrapper {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 12vw;
    height: 12vw;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 1vw;
    z-index: 1001;
  }

  .mobile-menu-btn span {
    display: block;
    width: 8vw;
    height: 0.8vw;
    background-color: var(--text-dark, #1a1a1a);
    margin: 1.2vw 0;
    border-radius: 0.8vw;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  .mobile-menu-btn.active span:nth-child(1) {
    transform: translateY(3.2vw) rotate(45deg);
    background-color: var(--primary-purple);
  }

  .mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
  }

  .mobile-menu-btn.active span:nth-child(3) {
    transform: translateY(-3.2vw) rotate(-45deg);
    background-color: var(--primary-purple);
  }

  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(4.17vw);
    -webkit-backdrop-filter: blur(4.17vw);
    padding: 5.21vw 6.25vw;
    gap: 3.13vw;
    box-shadow: 0 3.13vw 7.81vw rgba(0, 0, 0, 0.12);
    border-bottom: 0.26vw solid rgba(0, 0, 0, 0.08);
    z-index: 999;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links li {
    width: 100%;
  }

  .mobile-only-link {
    display: block !important;
  }

  .nav-link {
    display: block;
    width: 100%;
    font-size: 4.17vw;
    padding: 2.6vw 0;
    border-bottom: 0.26vw solid rgba(0, 0, 0, 0.06);
    color: var(--text-dark);
  }

  .nav-link::after {
    display: none;
  }

  /* Section Spacing - Compact Mobile Spacing */
  .hero-wrapper {
    padding-top: 26vw;
    padding-bottom: 4.17vw;
    padding-left: 4.17vw;
    padding-right: 4.17vw;
  }

  .about-section-wrapper {
    padding-top: 3.13vw !important;
    padding-bottom: 4.17vw;
    padding-left: 4.17vw;
    padding-right: 4.17vw;
  }

  .ambassadors-section-wrapper,
  .signature-section-wrapper,
  .global-society-wrapper,
  .impact-section-wrapper,
  .partnerships-section-wrapper,
  .champions-section-wrapper,
  .connect-section-wrapper {
    padding: 4.17vw;
  }

  .informal-rounds-wrapper {
    padding: 3.13vw 4.17vw !important;
    margin: 0 auto !important;
  }

  /* Hide hero content bottom (glassmorphism event cards) on mobile */
  .hero-content-bottom {
    display: none !important;
  }

  /* 1. Welcome to TAF: Full Width Text Box & Video Button at Bottom */
  .about-taf-card {
    height: auto;
    min-height: auto;
    border-radius: 5.21vw;
    overflow: hidden;
  }

  .about-section-wrapper .hero-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 6.25vw 5.21vw;
    gap: 4.17vw;
  }

  .about-section-wrapper .hero-text-block {
    width: 100%;
    max-width: 100%;
  }

  .about-section-wrapper .hero-main-title {
    font-size: 6.5vw;
    line-height: 1.3;
    margin-bottom: 3.13vw;
  }

  .about-section-wrapper .hero-description {
    font-size: 3.96vw;
    line-height: 1.65;
    margin-bottom: 4.17vw;
  }

  .about-section-wrapper .hero-play-btn {
    width: 12.5vw;
    height: 12.5vw;
    align-self: flex-end;
    margin-top: 3.13vw;
    margin-right: 0;
    flex-shrink: 0;
  }

  /* 2. We Are All Ambassadors: Increased Card Height */
  .ambassadors-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5.21vw;
  }

  .ambassadors-text-card {
    order: 1;
    width: 100%;
    height: auto;
    min-height: auto;
    padding: 8.33vw 6.25vw;
    border-radius: 5.21vw;
    box-sizing: border-box;
  }

  .ambassadors-title {
    font-size: 6.0vw;
    line-height: 1.3;
    margin-bottom: 4.17vw;
    width: 100%;
  }

  .ambassadors-paragraph {
    font-size: 3.96vw;
    line-height: 1.7;
    margin-bottom: 3.65vw;
    width: 100%;
  }

  .ambassadors-image-card {
    order: 2;
    width: 100%;
    height: 98.96vw;
    min-height: 98.96vw;
    border-radius: 5.21vw;
    overflow: hidden;
  }

  .ambassadors-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* 3. TAF Signature Experiences */
  .signature-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3.13vw;
    margin-bottom: 6.25vw;
    width: 100%;
    max-width: 100%;
  }

  .signature-main-title {
    font-size: 6.0vw;
    line-height: 1.3;
    width: 100%;
    max-width: 100%;
  }

  .signature-header-desc {
    font-size: 3.96vw;
    line-height: 1.65;
    width: 100%;
    max-width: 100%;
  }

  .signature-grid {
    display: flex;
    flex-direction: column;
    gap: 5.21vw;
    width: 100%;
    max-width: 100%;
    animation: none;
    transform: none;
  }

  .signature-grid .signature-card:nth-child(n+4) {
    display: none;
  }

  .signature-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 5.21vw;
    overflow: hidden;
  }

  .signature-card-bottom {
    width: 100%;
    padding: 4.17vw 5.21vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .signature-card-title {
    font-size: 5.17vw;
    line-height: 1.4;
    width: 100%;
    max-width: 100%;
  }

  .signature-img-wrapper {
    width: 100%;
    height: 35vw;
  }

  .signature-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 4. For the Global Society that matters */
  .global-society-grid {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 5.21vw;
  }

  .global-society-image-card {
    order: 1;
    width: 100%;
    height: 62.5vw;
    min-height: 62.5vw;
    border-radius: 5.21vw;
    overflow: hidden;
  }

  .global-society-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .global-society-text-card {
    order: 2;
    width: 100%;
    padding: 6.25vw 5.21vw;
    border-radius: 5.21vw;
    box-sizing: border-box;
  }

  .global-society-title {
    font-size: 5.6vw;
    line-height: 1.3;
    margin-bottom: 3.65vw;
  }

  .global-society-paragraph {
    font-size: 3.75vw;
    line-height: 1.65;
    margin-bottom: 3.13vw;
  }

  /* 5. Our 3E Impact (e3-carousel) */
  .e3-title {
    font-size: 6.0vw;
  }

  .e3-subtitle {
    font-size: 3.5vw;
  }

  .e3-carousel-track {
    gap: 4vw;
    padding: 5vw 20vw 5vw 20vw;
  }

  .e3-card {
    flex: 0 0 50vw;
    height: 70vw;
    border-radius: 4vw;
  }

  .e3-card.active {
    flex: 0 0 60vw;
    height: 84vw;
    border-radius: 4vw;
  }

  .e3-card-content {
    width: calc(100% - 4vw);
    margin: 2vw;
    border-radius: 2vw;
    padding: 4vw;
    transform: translateY(4vw);
  }

  .e3-card-desc {
    font-size: 3.5vw;
    margin-bottom: 3vw;
  }

  .e3-btn-explore {
    padding: 2vw 4vw;
    border-radius: 1vw;
    font-size: 2.5vw;
  }

  .e3-carousel-controls {
    margin-top: 6vw;
    gap: 4vw;
  }

  .e3-btn-control {
    width: 10vw;
    height: 10vw;
    border-radius: 2vw;
  }

  .e3-btn-control svg {
    width: 4vw;
    height: 4vw;
  }

  /* Old 3E Impact */
  .impact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6.25vw;
  }

  .impact-main-title {
    font-size: 7.71vw;
    line-height: 1.3;
  }

  .impact-nav-controls {
    display: none !important;
  }

  .impact-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 4.17vw;
    width: 100%;
    padding-bottom: 4.17vw;
    scrollbar-width: none;
  }

  .impact-grid::-webkit-scrollbar {
    display: none;
  }

  .impact-column-card {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    box-sizing: border-box;
    border-radius: 5.21vw;
    overflow: hidden;
  }

  .impact-img-box {
    width: 100%;
    height: 62.5vw;
  }

  .impact-column-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .impact-column-content {
    padding: 6.25vw 5.21vw;
  }

  .impact-pillar-tag {
    font-size: 3.96vw;
    font-weight: 700;
    margin-bottom: 2.08vw;
    display: inline-block;
  }

  .impact-pillar-title {
    font-size: 6.04vw;
    line-height: 1.3;
    margin-bottom: 3.13vw;
  }

  .impact-pillar-desc {
    font-size: 4.38vw;
    line-height: 1.65;
    margin-bottom: 4.17vw;
  }

  .impact-column-content .btn-read-more {
    font-size: 4.17vw;
    font-weight: 600;
  }

  /* 6. Section below 3E Impact (Informal Rounds) */
  .informal-gallery-grid {
    display: none !important;
  }

  .informal-icons-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3.13vw !important;
    margin-top: 0 !important;
    margin-bottom: 3.13vw !important;
  }

  .informal-icon-badge {
    width: 18vw !important;
    height: 18vw !important;
    padding: 0 !important;
  }

  .informal-statement-box {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .informal-paragraph {
    font-size: 4.75vw !important;
    line-height: 1.65 !important;
    margin-bottom: 2.6vw !important;
  }

  .informal-paragraph:last-child {
    margin-bottom: 0 !important;
  }

  /* 7. Partnerships & Collaborators */
  .partnerships-section-wrapper {
    max-width: 100%;
    padding-left: 4.17vw;
    padding-right: 4.17vw;
    box-sizing: border-box;
  }

  .partnerships-header {
    margin-bottom: 5.21vw;
    max-width: 100%;
  }

  .partnerships-title {
    font-size: 6.0vw;
    line-height: 1.3;
  }

  .partnerships-desc {
    font-size: 3.75vw;
    line-height: 1.6;
  }

  .partnerships-grid {
    display: flex;
    flex-direction: column;
    gap: 4.17vw;
    width: 100%;
  }

  .partnerships-col {
    display: flex;
    flex-direction: column;
    gap: 4.17vw;
    width: 100%;
  }

  .pillar-card {
    width: 100%;
    padding: 4.17vw 5.21vw;
    border-radius: 4.17vw;
    box-sizing: border-box;
  }

  .pillar-name {
    font-size: 3.96vw;
  }

  .pillar-number {
    font-size: 4.58vw;
  }

  .partnerships-img-card {
    width: 100%;
    height: 52.08vw;
    border-radius: 4.17vw;
    overflow: hidden;
  }

  .partnerships-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .partnerships-card-title {
    font-size: 5.17vw;
  }

  /* 8. The Champions */
  .champions-title {
    font-size: 6.25vw;
    margin-bottom: 4.17vw;
  }

  .champions-carousel-container {
    position: relative;
    padding: 0;
    width: 100%;
  }

  .champions-nav-btn {
    display: none !important;
  }

  .champions-grid {
    display: flex;
    flex-direction: column;
    gap: 5.21vw;
    width: 100%;
  }

  .champions-card {
    width: 100%;
    max-width: 100%;
    height: 62.5vw;
    box-sizing: border-box;
    border-radius: 4.17vw;
    overflow: hidden;
  }

  .champions-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 9. CTA & Footer Mobile Settings */
  .connect-grid {
    display: flex;
    flex-direction: column;
    gap: 5.21vw;
    width: 100%;
  }

  .connect-image-card {
    order: 1;
    width: 100%;
    height: 85vw;
    min-height: 85vw;
    border-radius: 5.21vw;
    overflow: hidden;
  }

  .connect-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .connect-form-card {
    order: 2;
    width: 100%;
    padding: 6.25vw 5.21vw;
    border-radius: 5.21vw;
    box-sizing: border-box;
  }

  .connect-title {
    font-size: 5.6vw;
    margin-bottom: 2.6vw;
  }

  .connect-subtitle {
    font-size: 3.75vw;
    line-height: 1.6;
    margin-bottom: 4.69vw;
  }

  .connect-form-row {
    display: flex;
    flex-direction: column;
    gap: 3.13vw;
    width: 100%;
  }

  .connect-input,
  .connect-select {
    width: 100%;
    font-size: 3.75vw;
    padding: 3.13vw 4.17vw;
    height: 12.5vw;
    border-radius: 3.13vw;
    box-sizing: border-box;
  }

  .btn-connect-submit {
    width: 100%;
    font-size: 3.96vw;
    padding: 3.65vw 5.21vw;
    border-radius: 3.13vw;
    box-sizing: border-box;
  }

  /* Footer */
  .footer-wrapper {
    padding: 8.33vw 4.17vw 6.25vw 4.17vw;
  }

  .footer-container {
    width: 100%;
  }

  .footer-row-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5.21vw;
    width: 100%;
  }

  .footer-brand {
    width: 100%;
  }

  .footer-title {
    font-size: 4.58vw;
  }

  .footer-nav-grid {
    display: flex;
    flex-direction: column;
    gap: 3.13vw;
    width: 100%;
  }

  .footer-nav-col {
    display: flex;
    flex-direction: column;
    gap: 2.6vw;
    width: 100%;
  }

  .footer-link {
    font-size: 4vw;
  }

  .footer-row-middle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4.17vw;
    width: 100%;
  }

  .footer-mission-text {
    width: 100%;
    max-width: 100%;
    font-size: 4.55vw;
    line-height: 1.6;
  }

  .footer-hq-box {
    width: 100%;
    text-align: left;
  }

  .footer-hq-line {
    font-size: 4.55vw;
  }

  .footer-est {
    font-size: 2.76vw;
  }

  .footer-row-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.08vw;
    text-align: center;
    width: 100%;
  }

  .footer-copy,
  .footer-credits {
    font-size: 4vw;
  }

  /* Balanced Mobile Buttons */
  .btn-discover,
  .btn-explore-more,
  .btn-learn-more,
  .btn-read-more {
    font-size: 4vw !important;
    padding: 3vw !important;
    min-height: 7.29vw !important;
    font-weight: 600 !important;
    border-radius: 99.9vw !important;
  }

  .btn-explore-arrow,
  .btn-learn-arrow {
    width: 10.42vw !important;
    height: 10.42vw !important;
    min-width: 10.42vw !important;
    min-height: 10.42vw !important;
  }

  .btn-explore-arrow svg,
  .btn-learn-arrow svg {
    width: 4.17vw !important;
    height: 4.17vw !important;
  }

  .btn-connect-submit,
  .form-submit-btn {
    font-size: 3.75vw !important;
    padding: 3.13vw 5.21vw !important;
    min-height: 11.98vw !important;
    font-weight: 600 !important;
    border-radius: 3.13vw !important;
  }

  .hero-play-btn {
    width: 11.46vw !important;
    height: 11.46vw !important;
    min-width: 11.46vw !important;
    min-height: 11.46vw !important;
  }

  .hero-play-btn svg {
    width: 4.69vw !important;
    height: 4.69vw !important;
  }

  .signature-arrow-btn {
    width: 9.9vw !important;
    height: 9.9vw !important;
    min-width: 9.9vw !important;
    min-height: 9.9vw !important;
  }

  .signature-arrow-btn svg {
    width: 6.25vw !important;
    height: 4.25vw !important;
  }

  /* Modals Mobile */
  .modal-container {
    width: 92vw;
    max-width: 125vw;
    padding: 6.25vw 5.21vw;
    border-radius: 5.21vw;
  }

  .video-modal-container {
    width: 100vw;
    border-radius: 0;
  }

  .video-player-wrapper {
    height: 56.25vw;
    /* maintain 16:9 aspect ratio based on 100vw width */
  }

  .video-close-top-btn {
    top: 2vw;
    right: 2vw;
    width: 8vw;
    height: 8vw;
    font-size: 5vw;
  }

  .video-controls-bar {
    width: 96vw;
    padding: 2.08vw 2.6vw;
    gap: 1.56vw;
  }

  .v-time {
    font-size: 3.13vw;
  }

  /* About Page Mobile Rules */
  .about-hero-banner {
    height: 45vw;
    min-height: 45vw;
    margin-top: 26vw;
  }

  .about-hero-title {
    font-size: 4.5vw;
    margin-bottom: 2.08vw;
  }

  .about-breadcrumb {
    padding: 1.56vw 3.65vw;
    border-radius: 5.21vw;
    gap: 1.56vw;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(2.08vw);
    -webkit-backdrop-filter: blur(2.08vw);
    border: 0.26vw solid rgba(255, 255, 255, 0.25);
  }

  .about-breadcrumb-link,
  .about-breadcrumb-active,
  .about-breadcrumb-sep {
    font-size: 3vw;
  }

  .about-taff-section {
    padding: 6.25vw 4.17vw;
  }

  .about-taff-container {
    max-width: 100%;
    gap: 5.21vw;
  }

  .about-intro-card {
    grid-template-columns: 1fr;
    padding: 6.25vw 5.21vw;
    border-radius: 5.21vw;
    gap: 4.17vw;
  }

  .about-intro-heading {
    font-size: 5vw;
    line-height: 1.3;
  }

  .about-intro-text {
    font-size: 4.3vw;
    line-height: 1.65;
  }

  .about-intro-img-card {
    height: auto;
    border-radius: 4.17vw;
  }

  .about-genesis-grid {
    grid-template-columns: 1fr;
    gap: 4.17vw;
  }

  .about-story-box {
    padding: 5.21vw 4.17vw;
    border-radius: 4.17vw;
  }

  .about-story-top-row {
    display: flex;
    align-items: center;
    gap: 3.13vw;
  }

  .about-story-icon-box {
    width: 11.46vw;
    height: 11.46vw;
    border-radius: 3.13vw;
  }

  .about-story-icon-box svg {
    width: 5.73vw;
    height: 5.73vw;
  }

  .about-story-title {
    font-size: 5.21vw;
  }

  .about-story-paragraph {
    font-size: 4.75vw;
    line-height: 1.65;
  }

  .about-promise-banner {
    padding: 6.25vw 5.21vw;
    border-radius: 5.21vw;
    gap: 4.17vw;
  }

  .about-promise-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.08vw;
  }

  .about-promise-title {
    font-size: 6.25vw;
  }

  .about-promise-badge {
    font-size: 3.13vw;
    padding: 1.04vw 2.6vw;
  }

  .about-promise-text {
    font-size: 4.96vw;
    line-height: 1.65;
  }

  .about-promise-pillars {
    grid-template-columns: 1fr;
    gap: 3.13vw;
  }

  .about-pillar-mini-card {
    padding: 4.17vw;
    border-radius: 3.65vw;
  }

  .about-pillar-name {
    font-size: 5.17vw;
  }

  .about-pillar-desc {
    font-size: 4.55vw;
  }

  .about-promise-badge {
    display: none;
  }

  .about-legacy-card {
    grid-template-columns: 1fr;
    padding: 6.25vw 5.21vw;
    border-radius: 5.21vw;
    gap: 4.17vw;
  }

  .about-legacy-heading {
    font-size: 6vw;
    line-height: 1.3;
  }

  .who-founder-badge {
    display: none;
  }

  .about-legacy-text {
    font-size: 4.96vw;
    line-height: 1.65;
  }

  .about-legacy-img-card {
    height: 85vw;
    border-radius: 4.17vw;
  }

  /* Who We Are Section Mobile Rules */
  .who-we-are-container {
    gap: 5.21vw;
  }

  .who-quote-card {
    padding: 3.65vw 4.17vw;
    border-radius: 3.65vw;
  }

  .who-quote-mark {
    font-size: 8.67vw;
    margin-bottom: 1.04vw;
  }

  .who-quote-text {
    font-size: 4.75vw;
    line-height: 1.45;
    margin-bottom: 1.56vw;
  }

  .who-quote-author {
    font-size: 3.13vw;
  }

  .who-founder-card {
    padding: 6.25vw 5.21vw;
    border-radius: 5.21vw;
    gap: 4.17vw;
  }

  .who-founder-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.08vw;
  }

  .who-founder-title {
    font-size: 5.8vw;
    line-height: 1.3;
  }

  .who-founder-badge {
    font-size: 4.5vw;
    padding: 1.04vw 2.6vw;
  }

  .who-founder-body {
    font-size: 4.5vw;
    line-height: 1.7;
    text-align: justify;
  }

  .who-founder-avatar {
    width: 11.46vw;
    height: 11.46vw;
    font-size: 4.17vw;
  }

  .who-founder-name {
    font-size: 3.96vw;
  }

  .who-founder-role {
    font-size: 3.33vw;
  }

  /* Vision & Mission Mobile Rules */
  .vision-mission-section {
    gap: 5.21vw;
  }

  .vm-top-header {
    grid-template-columns: 1fr;
    gap: 3.13vw;
  }

  .vm-main-heading {
    font-size: 7.5vw;
    padding-top: 3vw;
  }

  .vm-header-desc {
    font-size: 4.96vw;
    line-height: 1.6;
  }

  .vm-feature-grid {
    grid-template-columns: 1fr;
    gap: 4.17vw;
  }

  .vm-card-left {
    height: 88.54vw;
    border-radius: 5.21vw;
  }

  .vm-card-left-title {
    font-size: 5.63vw;
  }

  .vm-card-left-text {
    font-size: 4.75vw;
  }

  .vm-card-right-img-box {
    height: 52.08vw !important;
    border-radius: 5.21vw;
  }

  .vm-card-right-img {
    height: 100% !important;
    object-fit: cover !important;
    border-radius: inherit;
  }

  .about-intro-img {
    height: auto !important;
    object-fit: contain !important;
    border-radius: inherit;
    display: block;
  }

  .vm-card-right-text {
    font-size: 4.96vw;
    line-height: 1.6;
  }

  .vm-dark-action-btn {
    font-size: 3.8vw;
    padding: 0.42vw 0.56vw 0.42vw 1.39vw;
    gap: 2.69vw;
    margin-top: 2vw;
  }

  .vm-btn-arrow-circle {
    width: 7.29vw;
    height: 7.29vw;
    font-size: 3.75vw;
  }

  .vm-pillars-grid {
    display: none;
    grid-template-columns: 1fr;
    gap: 4.17vw;
    opacity: 0;
    transform: translateY(5.21vw);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .vm-pillars-grid.active {
    display: grid !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .vm-pillar-card {
    padding: 6.25vw 5.21vw;
    border-radius: 6.25vw;
  }

  .vm-pillar-img-ring {
    width: 28.65vw;
    height: 28.65vw;
    margin-bottom: 4.17vw;
    border-width: 0.78vw;
  }

  .vm-pillar-title {
    font-size: 5.63vw;
    margin-bottom: 2.6vw;
  }

  .vm-pillar-desc {
    font-size: 3.75vw;
    line-height: 1.6;
    margin-bottom: 4.17vw;
  }

  .vm-pillar-btn {
    font-size: 3.55vw;
    padding: 2.08vw 4.69vw;
  }

  .about-badge {
    padding: 2.42vw 2.97vw;
    font-size: 3.76vw;
  }

  .vm-tag-pill {
    font-size: 3.83vw;
    padding: 1.42vw 2.11vw;
  }

  .vm-card-cta-btn {
    display: none;
  }

  .impact-card p {
    font-size: 4vw;
    text-align: justify;
  }

  .ambassadors-image-card {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   3. Breakpoint: 400px (Compact Mobile)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 400px) {

  .header {
    padding: 0 3vw;
    height: 30vw;
  }

  .brand-name {
    font-size: 4.38vw;
  }

  .hero-wrapper {
    padding-top: 33vw;
    padding-left: 3vw;
    padding-right: 3vw;
  }

  .about-section-wrapper {
    padding-top: 2.5vw !important;
    padding-left: 3vw;
    padding-right: 3vw;
  }

  .ambassadors-section-wrapper,
  .signature-section-wrapper,
  .global-society-wrapper,
  .impact-section-wrapper,
  .informal-rounds-wrapper,
  .partnerships-section-wrapper,
  .champions-section-wrapper,
  .connect-section-wrapper {
    padding: 5vw 3vw;
  }

  .about-section-wrapper .hero-main-title,
  .ambassadors-title,
  .signature-main-title,
  .global-society-title,
  .champions-title,
  .connect-title {
    font-size: 4.8vw;
  }

  .partnerships-title {
    font-size: 4.8vw;
  }

  .impact-main-title {
    font-size: 6.0vw;
  }

  .impact-pillar-title {
    font-size: 5.42vw;
  }

  .impact-pillar-desc {
    font-size: 4.96vw;
    line-height: 1.6;
  }

  /* 5. Our 3E Impact (e3-carousel) 400px */
  .e3-carousel-track {
    padding: 5vw 10vw 5vw 10vw;
  }

  .e3-card {
    flex: 0 0 65vw;
    height: 90vw;
  }

  .e3-card.active {
    flex: 0 0 90vw;
    height: 105vw;
  }

  .e3-card-content {
    padding: 5vw;
  }

  .e3-card-desc {
    font-size: 4vw;
  }

  .e3-btn-explore {
    font-size: 3vw;
    padding: 2.5vw 5vw;
  }

  .e3-btn-control {
    width: 12vw;
    height: 12vw;
  }

  .e3-btn-control svg {
    width: 5vw;
    height: 5vw;
  }

  .about-section-wrapper .hero-description,
  .ambassadors-paragraph,
  .global-society-paragraph,
  .informal-paragraph,
  .signature-header-desc,
  .partnerships-desc,
  .connect-subtitle {
    font-size: 5.44vw;
  }

  .ambassadors-image-card {
    height: 80vw;
    min-height: 80vw;
  }

  .global-society-image-card,
  .connect-image-card,
  .impact-img-box,
  .champions-card {
    height: 47.5vw;
    min-height: 47.5vw;
  }

  .signature-img-wrapper {
    height: 25vw;
    min-height: 75vw;
  }

  .connect-input,
  .connect-select {
    font-size: 4.44vw;
    padding: 2.5vw 3vw;
    height: 11vw;
  }

  .btn-connect-submit,
  .form-submit-btn {
    font-size: 4.65vw !important;
    padding: 2.5vw 4vw !important;
    min-height: 10.5vw !important;
  }


  .footer-logo-svg {
    display: none;
  }

  .footer-logo-img {
    width: 51vw;
    height: 52vw;
    margin-top: -4vw;
    margin-bottom: -4vw;
  }

  .modal-container {
    width: 95vw;
    padding: 4.5vw 3.5vw;
  }

  .informal-title {
    font-size: 4.9vw;
  }
}

/* 3E IMPACT PAGE RESPONSIVE */
@media (max-width: 991px) {

  .impact-card,
  .impact-card.reverse {
    flex-direction: column;
    padding: 6vw;
  }

  .signature-card:hover .signature-img {
    transform: none !important;
  }

  .impact-heading {
    font-size: 5.4vw;
  }

  .impact-text {
    font-size: 3vw;
  }

  .impact-badge {
    font-size: 2vw;
    padding: 1vw 2vw;
  }

  .impact-img-wrap {
    flex: 0 0 auto;
    width: 100%;
    height: 50vw;
  }

  .scroll-to-top {
    width: 6vw;
    height: 6vw;
    right: 2vw;
    bottom: -8vw;
  }

  .scroll-to-top.active {
    bottom: 2vw;
  }

  .scroll-arrow {
    width: 2.4vw;
    height: 2.4vw;
  }

  .hero-events-card {
    height: 80vw;
    min-height: 80vw;
  }
}

@media (max-width: 575px) {
  :root {
    --header-height: 20vw;
  }

  .impact-heading {
    font-size: 7.2vw;
  }

  .impact-text {
    font-size: 4vw;
  }

  .impact-badge {
    font-size: 3vw;
    padding: 1.5vw 3vw;
  }

  .impact-img-wrap {
    flex: 0 0 auto;
    width: 100%;
    height: 65vw;
  }

  .scroll-to-top {
    width: 12vw;
    height: 12vw;
    right: 4vw;
    bottom: -15vw;
  }

  .scroll-to-top.active {
    bottom: 4vw;
  }

  .scroll-arrow {
    width: 4.8vw;
    height: 4.8vw;
  }

  .hero-events-card {
    height: 120vw;
    min-height: 120vw;
  }
}

/* ================= Contact Page Responsive ================= */
@media (max-width: 960px) {
  .contact-info-section {
    padding: 10vw 6vw;
  }

  .contact-info-blocks {
    flex-direction: column;
    gap: 13vw;
    margin-top: 12vw;
  }

  .contact-info-card {
    padding: 8vw 4vw 5vw 4vw;
    border-radius: 2vw;
  }

  .contact-info-icon {
    width: 12vw;
    height: 12vw;
  }

  .contact-info-icon svg {
    width: 5vw;
    height: 5vw;
  }

  .contact-info-card h3 {
    font-size: 3.5vw;
    margin-bottom: 2vw;
  }

  .contact-info-card p {
    font-size: 2.8vw;
  }

  .contact-sec-title h2 {
    font-size: 5vw;
  }

  .contact-sub-title {
    font-size: 2vw;
    margin-bottom: 2vw;
  }

  .contact-sec-title {
    margin-bottom: 6vw;
  }
}

@media (max-width: 575px) {
  .contact-info-section {
    padding: 12vw 6vw;
  }

  .contact-info-card {
    padding: 10vw 4vw 6vw 4vw;
    border-radius: 3vw;
  }

  .contact-info-icon {
    width: 16vw;
    height: 16vw;
  }

  .contact-info-icon svg {
    width: 7vw;
    height: 7vw;
  }

  .contact-info-card h3 {
    font-size: 5vw;
    margin-bottom: 3vw;
  }

  .contact-info-card p {
    font-size: 4vw;
  }

  .contact-sec-title h2 {
    font-size: 7vw;
  }

  .contact-sub-title {
    font-size: 3vw;
  }
}

/* Mobile Adjustments for Champions Lightbox Modal */
@media (max-width: 768px) {
  .champions-modal-content {
    flex-direction: column;
    gap: 4vw;
  }

  .champions-lightbox-img-wrapper {
    max-width: 95vw;
  }

  .champions-lightbox-btn {
    width: 12vw;
    height: 12vw;
  }

  .champions-lightbox-btn svg {
    width: 6vw;
    height: 6vw;
    stroke-width: 0.5vw;
  }

  .champions-lightbox-close {
    top: 2vw;
    right: 2vw;
    width: 8vw;
    height: 8vw;
  }

  .champions-lightbox-close svg {
    width: 4vw;
    height: 4vw;
  }
}

@media (max-width: 991px) {
  .events-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .events-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 2vw;
  }

  .events-lightbox-prev,
  .events-lightbox-next {
    font-size: 5vw;
    padding: 2vw 3vw;
  }

  .events-lightbox-close {
    font-size: 6vw;
    top: 3vw;
    right: 5vw;
  }
}

@media (max-width: 480px) {
  .events-gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 768px) {
  #contact-form-section .connect-image-card {
    height: 85vw !important;
    min-height: 85vw !important;
  }
}