/* Responsive Styles for Scholarship Portal
   This file contains responsive styles for all pages */

/* Base responsive settings */
:root {
  --vh: 1vh;
}

/* Global responsive adjustments */
html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
}

/* Base styles for "How It Works" section to ensure proper alignment across all devices */
.hero-section .relative.bg-white\/10.backdrop-blur-sm.rounded-xl {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}





.hero-section .flex.items-center.mb-2.xs\:mb-3.sm\:mb-4 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-section .space-y-3.xs\:space-y-4.sm\:space-y-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hero-section .flex.items-center.group\/step {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.hero-section .relative.bg-gradient-to-r.text-white.rounded-full {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Extra small devices (phones, 576px and down) */
@media (max-width: 576px) {
  h1, .h1 {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  h2, .h2 {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  h3, .h3 {
    font-size: 1.25rem;
    line-height: 1.3;
  }

  p {
    font-size: 0.95rem;
  }

  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Adjust section padding for mobile */
  section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  /* Adjust hero section height for mobile */
  section.hero-section {
    height: auto;
    min-height: calc(100vh - 64px);
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding-top: 1rem;
    padding-bottom: 2rem;
  }

  /* Adjust card spacing for mobile */
  .card, .contact-card {
    margin-bottom: 1rem;
  }

  /* Adjust form elements for mobile */
  input, textarea, select, button {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  /* Adjust grid layouts for mobile */
  .grid {
    grid-template-columns: 1fr;
  }

  /* Show form on mobile */
  .mobile-form-container {
    display: block;
  }

  /* Fix for very small screens */
  @media (max-width: 360px) {
    .px-4 {
      padding-left: 0.5rem;
      padding-right: 0.5rem;
    }

    .text-3xl {
      font-size: 1.5rem;
    }

    .text-xl {
      font-size: 1.1rem;
    }

    /* Contact page specific fixes for very small screens */
    .hero-section .text-3xl.sm\:text-6xl.md\:text-8xl.lg\:text-9xl {
      font-size: 1.75rem;
      line-height: 1.2;
    }

    .hero-section .text-base.sm\:text-lg {
      font-size: 0.875rem;
      line-height: 1.4;
    }

    /* Fix hero buttons for very small screens */
    .hero-section .flex.flex-col.sm\:flex-row {
      gap: 0.5rem;
    }

    .hero-section .py-3.sm\:py-4.px-6.sm\:px-8 {
      padding: 0.5rem 0.75rem;
      font-size: 0.8rem;
    }

    .hero-section .h-4.w-4.sm\:h-5.sm\:w-5 {
      width: 0.875rem;
      height: 0.875rem;
    }

    /* Fix stat cards for very small screens */
    .stat-card {
      padding: 0.5rem;
    }

    .stat-card .bg-gradient-to-r.w-12.h-12.sm\:w-16.sm\:h-16 {
      width: 2rem;
      height: 2rem;
      margin-bottom: 0.5rem;
    }

    .stat-card .h-6.w-6.sm\:h-8.sm\:w-8 {
      width: 1rem;
      height: 1rem;
    }

    .counter-value {
      font-size: 1.5rem;
    }

    .counter-suffix {
      font-size: 1rem;
    }

    .stat-card .text-gray-300.text-base.sm\:text-lg {
      font-size: 0.75rem;
    }

    /* Fix contact options section for very small screens */
    #contact-options .text-2xl.sm\:text-3xl.md\:text-4xl {
      font-size: 1.25rem;
    }

    #contact-options .text-base.md\:text-xl {
      font-size: 0.875rem;
    }

    #contact-options .p-4.sm\:p-5 {
      padding: 0.75rem;
    }

    #contact-options .h-16.sm\:h-20 {
      height: 3rem;
    }

    #contact-options .h-8.w-8 {
      width: 1.5rem;
      height: 1.5rem;
    }

    /* Fix contact form section for very small screens */
    .scholarship-form-container {
      padding: 0.75rem;
      margin-top: 1rem;
    }

    #contact-form .text-3xl.sm\:text-4xl.md\:text-5xl {
      font-size: 1.25rem;
    }

    #contact-form .text-base.sm\:text-lg.md\:text-xl {
      font-size: 0.875rem;
    }

    /* Adjust form elements for very small screens */
    .scholarship-form-container input,
    .scholarship-form-container select,
    .scholarship-form-container textarea {
      padding: 0.5rem;
      font-size: 14px;
    }

    .scholarship-form-container .pl-10 {
      padding-left: 2rem;
    }

    .scholarship-form-container label {
      font-size: 12px;
    }

    .scholarship-form-container button {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      font-size: 0.875rem;
    }

    /* Fix map section for very small screens */
    #location .text-3xl.md\:text-5xl {
      font-size: 1.25rem;
    }

    #location .text-xl {
      font-size: 0.875rem;
    }

    #location .w-full.h-\[250px\].sm\:h-\[300px\].md\:h-\[400px\].lg\:h-\[450px\] {
      height: 200px;
    }

    /* Mobile menu adjustments for very small screens */
    #mobile-menu-button {
      padding: 0.25rem;
    }

    #mobile-menu-button svg {
      width: 1.25rem;
      height: 1.25rem;
    }

    #mobileMenu {
      top: 64px;
    }

    #mobileMenu a {
      padding: 0.5rem 0.75rem;
      font-size: 0.875rem;
    }

    #mobileMenu svg {
      width: 1rem;
      height: 1rem;
      margin-right: 0.5rem;
    }

    #mobileMenu .mt-4 a {
      font-size: 0.875rem;
      padding: 0.5rem;
    }
  }
}

/* Small devices (landscape phones, 576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  h1, .h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  h2, .h2 {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  /* Adjust section padding for small devices */
  section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* Medium devices (tablets, 768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  /* Adjust grid layouts for tablets */
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) ;
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) ;
  }

  /* Specific hero section adjustments for tablets */
  #about-us-hero {
    min-height: 110vh ;
    display: flex ;
    flex-direction: column ;
    justify-content: center ;
  }

  /* About us page tablet fixes */
  #about-us-hero .grid-cols-2 {
    grid-template-columns: 1fr ;
    gap: 2rem ;
  }

  #about-us-hero .text-center.lg\:text-left {
    text-align: center ;
  }

  #about-us-hero .justify-center.lg\:justify-start {
    justify-content: center ;
  }

  #about-us-hero .container {
    padding-top: 20vh ; /* Increased padding to push content further down */
  }

  #about-us-hero .relative.mx-auto.max {
    margin: 0 auto ;
  }

  #about-us-hero .slide-in-right {
    margin-top: 1rem ;
    display: flex ;
    justify-content: center ;
    width: 100% ;
  }

  #about-us-hero .relative.bg-white\/10.backdrop-blur-md {
    width: 100% ;
    max-width: 400px ;
  }

  /* Timeline tablet fixes */
  .timeline-item {
    padding-left: 30px ;
    padding-right: 30px ;
  }

  /* Mission & Values section tablet fixes */
  #our-mission .grid-cols-2 {
    gap: 1.5rem ;
  }

  /* Impact stats tablet fixes */
  #our-impact .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) ;
    gap: 1rem ;
  }

  /* Scholarship categories tablet fixes */
  #scholarship-categories .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr) ;
  }

  /* How it works page tablet fixes */
  #how-it-works-hero .lg\:grid-cols-12 .lg\:col-span-6 {
    grid-column: span 12 / span 12 ;
  }

  #how-it-works-hero .lg\:text-left {
    text-align: center ;
  }

  #how-it-works-hero .lg\:justify-start {
    justify-content: center ;
  }

  #how-it-works-hero .lg\:mx-0 {
    margin-left: auto ;
    margin-right: auto ;
  }

  #how-it-works-hero .hidden.lg\:block {
    display: none ;
  }

  /* Application process tablet fixes */
  #application-process .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) ;
    gap: 1.5rem ;
  }

  /* Detailed process tablet fixes */
  #detailed-process .md\:flex-row {
    flex-direction: column ;
  }

  #detailed-process .md\:text-left {
    text-align: center ;
  }

  #detailed-process .md\:mx-0 {
    margin-left: auto ;
    margin-right: auto ;
  }

  /* Scholarship page tablet fixes */
  .hero-section .grid.grid-cols-1.lg\:grid-cols-12 {
    display: grid ;
    grid-template-columns: 1fr ;
    gap: 2rem ;
  }

  .hero-section .lg\:col-span-7,
  .hero-section .lg\:col-span-5 {
    grid-column: span 1 / span 1 ;
  }

  .hero-section .lg\:text-left {
    text-align: center ;
  }

  .hero-section .mx-auto.lg\:mx-0 {
    margin-left: auto ;
    margin-right: auto ;
  }

  .hero-section .slide-in-right {
    animation: none ;
    opacity: 1 ;
    transform: none ;
  }

  /* Fix "How It Works" section for tablets */
  .hero-section .relative.bg-white\/10.backdrop-blur-sm.rounded-xl {
    max-width: 500px ;
    margin-left: auto ;
    margin-right: auto ;
    padding: 1.75rem ;
    width: 100% ;
  }

  /* Fix step numbers and text alignment for tablets */
  .hero-section .flex.items-center.group\/step {
    margin-bottom: 1.25rem ;
    display: flex ;
    align-items: center ;
    justify-content: flex-start ;
    width: 100% ;
  }

  .hero-section .relative.bg-gradient-to-r.text-white.rounded-full {
    width: 2.5rem ;
    height: 2.5rem ;
    min-width: 2.5rem ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
  }

  .hero-section .text-white.font-medium {
    font-size: 1.125rem ;
    line-height: 1.4 ;
    display: flex ;
    align-items: center ;
  }

  /* Fix "How It Works" header */
  .hero-section .flex.items-center.mb-2.xs\:mb-3.sm\:mb-4 {
    margin-bottom: 1.5rem ;
    display: flex ;
    align-items: center ;
    justify-content: center ;
  }

  /* Fix spacing between steps */
  .hero-section .space-y-3.xs\:space-y-4.sm\:space-y-5 {
    display: flex ;
    flex-direction: column ;
    gap: 1.25rem ;
    align-items: center ;
    width: 100% ;
  }

  /* Fix vertical alignment of each step */
  .hero-section .space-y-3.xs\:space-y-4.sm\:space-y-5 > div {
    display: flex ;
    align-items: center ;
    width: 100% ;
  }

  /* Fix stat cards for tablets */
  .hero-section .grid.grid-cols-4 {
    display: grid ;
    grid-template-columns: repeat(4, 1fr) ;
    gap: 1rem ;
    max-width: 600px ;
    margin-left: auto ;
    margin-right: auto ;
  }
}




/* Extra large devices (desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* Desktop-specific adjustments for larger screens */
  .hero-section .container {
    max-width: 1140px;
  }
}

/* Specific fixes for exact 1024px width screens */
@media (min-width: 1020px) and (max-width: 1030px) {
  /* Ensure no horizontal overflow */
  html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }

  /* Fix hero section container - inherit from main 1024px rules */
  .hero-section {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
    min-height: 100vh;
  }

  .hero-section .w-full.px-1.max-w-screen-2xl.mx-auto {
    max-width: 1024px;
    padding-left: 2rem;
    padding-right: 2rem;
    margin: 0 auto;
  }

  /* Ensure grid layout matches main 1024px rules */
 

  /* Video container sizing matches main rules */
  .video-container-wrapper {
    width: 320px;
    height: 320px;
    margin: 1rem auto;
    border-radius: 12px;
  }

  .hero-section video,
  .video-optimized {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
  }

  /* Course categories card sizing */
  .hero-section .bg-white\/90.backdrop-blur-sm.shadow-2xl {
    max-width: 100%;
    width: 100%;
    padding: 1.5rem;
    margin-top: 2rem;
  }

  /* Course slider container sizing */
  .course-slider-container {
   
    padding: 30px 0;
    margin-bottom: 1rem;
  }

  .category-card {
    width: 240px;
    margin-right: 20px;
  }

  .category-shape {
    height: 270px;
    padding: 1.25rem;
  }

  /* Fix text sizing */
  .hero-section h1.text-4xl {
    font-size: 2.25rem;
    line-height: 1.2;
  }

  .hero-section h1.text-3xl {
    font-size: 1.875rem;
    line-height: 1.2;
  }

  /* Fix rating section */
  .hero-section .flex.items-center.justify-center.space-x-2 {
    margin-top: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
  }
}

/* Hero section responsive adjustments */
@media (max-width: 767px) {
  .hero-title {
    text-align: center;
  }

  .hero-description {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-buttons {
    justify-content: center;
  }

  /* Improve hero section layout */
  .hero-section {
    padding: 0.5rem 0.5rem 0.5rem;
    height: auto;
    min-height: 100vh;
    max-height: none;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative;
    z-index: 10;
  }

  /* Ensure hero content is fully visible and positioned lower */
  .hero-section .container {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 10vh; /* Reduced padding to position content better */
  }

  /* Fix grid layout for mobile */
  .hero-section .grid.grid-cols-1.lg\:grid-cols-12 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Ensure text is readable */
  .hero-section .text-4xl.xs\:text-5xl.sm\:text-6xl.lg\:text-7xl {
    font-size: 1.75rem;
    line-height: 1.3;
  }

  .hero-section h1 {
    font-size: 2rem;
    line-height: 1.2;
  }

  .hero-section p {
    font-size: 1rem;
    line-height: 1.5;
  }

  /* Adjust flex layout */
  .hero-section .flex-col {
    gap: 1rem;
  }

  /* Center content */
  .hero-section .items-center {
    justify-content: center;
  }

  /* Fix form layout */
  .hero-section .flex-col.md\:flex-row {
    flex-direction: column;
    width: 100%;
  }

 

  /* Scholarship page specific improvements for mobile */
  .hero-section .slide-in-right {
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* Improve "How It Works" section on mobile */
  .hero-section .relative.bg-white\/10.backdrop-blur-sm.rounded-xl {
    padding: 1.25rem;
    margin-top: 0.5rem;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Fix step numbers and text for better readability */
  .hero-section .flex.items-center.group\/step {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
  }

  .hero-section .relative.bg-gradient-to-r.text-white.rounded-full {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Ensure vertical alignment of all circles */
  .hero-section .space-y-3.xs\:space-y-4.sm\:space-y-5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* Fix vertical alignment of each step */
  .hero-section .space-y-3.xs\:space-y-4.sm\:space-y-5 > div {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .hero-section .text-white.font-medium {
    font-size: 1rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
  }

  /* Fix "How It Works" header */
  .hero-section .flex.items-center.mb-2.xs\:mb-3.sm\:mb-4 {
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-section .bg-gradient-to-r.from-purple-500.to-indigo-500.rounded-lg.p-1.xs\:p-1\.5.sm\:p-2.mr-2.xs\:mr-3 {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Fix spacing between steps */
  .hero-section .space-y-3.xs\:space-y-4.sm\:space-y-5 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    width: 100%;
  }

  /* Fix vertical alignment of each step */
  .hero-section .space-y-3.xs\:space-y-4.sm\:space-y-5 > div {
    display: flex;
    align-items: center;
    width: 100%;
  }

  /* Fix text alignment */
    .hero-section .text-base.xs\:text-lg.sm\:text-xl.md\:text-2xl.font-bold.text-white {
      text-align: center;
    }
  
  }


/* Contact page specific responsive styles */
@media (max-width: 767px) {
  /* Adjust stat cards on mobile */
  .stat-card {
    padding: 1rem;
    margin-bottom: 0.75rem;
  }

  .counter-value {
    font-size: 2rem;
  }

  /* Fix hero section grid layout */
  .hero-section .grid.grid-cols-1.lg\:grid-cols-2 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Fix hero section stat cards grid */
  .hero-section .grid.grid-cols-1.sm\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  /* Adjust hero section text sizes */
  .hero-section .text-3xl.sm\:text-6xl.md\:text-8xl.lg\:text-9xl {
    font-size: 2.5rem;
    line-height: 1.2;
  }

  .hero-section .text-base.sm\:text-lg {
    font-size: 1rem;
    line-height: 1.5;
  }

  /* Fix contact options section */
  #contact-options .grid.grid-cols-1.sm\:grid-cols-2.lg\:grid-cols-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Adjust contact form on mobile */
  .scholarship-form-container {
    padding: 1.5rem;
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Fix form grid layout */
  .scholarship-form-container .grid.grid-cols-1.sm\:grid-cols-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Adjust map section on mobile */
  #location iframe {
    height: 300px;
  }

  /* Fix location info card */
  #location .flex.bg-white {
    flex-direction: column;
    padding: 1rem;
  }

  #location .flex.bg-white .bg-gradient-to-r {
    margin-bottom: 1rem;
    align-self: center;
  }

  /* Fix mobile contact info card */
  .lg\:hidden.mb-10 .bg-gradient-to-r.rounded-xl {
    padding: 1rem;
  }

  .lg\:hidden.mb-10 .grid.grid-cols-1.sm\:grid-cols-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

/* Fix for iOS 100vh issue */
@supports (-webkit-touch-callout: none) {
  .min-h-screen, .h-screen, [style*="height: 100vh"] {
    height: calc(var(--vh, 1vh) * 100);
  }

  section.hero-section {
    height: calc(var(--vh, 1vh) * 100 - 70px);
  }
}

/* Special handling for iOS devices (added by JS) */
body.ios-device {
  /* Prevent elastic scrolling */
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Special handling for very small screens (added by JS) */
body.very-small-screen {
  /* Reduce all font sizes */
  font-size: 14px;
}

body.very-small-screen h1 {
  font-size: 1.5rem;
}

body.very-small-screen h2 {
  font-size: 1.25rem;
}

body.very-small-screen h3 {
  font-size: 1.1rem;
}

body.very-small-screen p {
  font-size: 0.875rem;
}

body.very-small-screen .quick-application-container {
  padding: 0.5rem;
}

body.very-small-screen .hero-section {
  padding: 0.5rem;
}

/* Fix for devices with notches */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Animation adjustments for mobile */
@media (max-width: 767px) {
  .animate-blob {
    animation-duration: 5s; /* Slower animations on mobile */
  }
}

/* Navbar responsive fixes */
@media (max-width: 767px) {
  nav {
    height: 70px;
  }

  /* Mobile menu button fixes */
  #mobile-menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    z-index: 60;
    position: relative;
    background-color: rgba(237, 233, 254, 0.8);
    color: #6d28d9;
    border: 1px solid #8b5cf6;
    box-shadow: 0 2px 5px rgba(124, 58, 237, 0.3);
    cursor: pointer;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
  }

  #mobile-menu-button:hover,
  #mobile-menu-button:focus {
    background-color: rgba(221, 214, 254, 0.9);
    box-shadow: 0 3px 8px rgba(124, 58, 237, 0.4);
    transform: translateY(-1px);
  }

  #mobile-menu-button:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(124, 58, 237, 0.3);
  }

  /* Mobile menu content fixes */
  #navbar-content {
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    width: 100%;
    background-color: white;
    z-index: 50;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Mobile menu styling */
  #mobileMenu {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    width: 100%;
    background-color: white;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: opacity 0.3s ease, transform 0.3s ease;
    border-top: 2px solid #8b5cf6;
  }

  /* Mobile menu animation */
  #mobileMenu.hidden {
    display: none;
  }

  #mobileMenu:not(.hidden) {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }

  /* Ensure mobile menu items are properly spaced */
  #navbar-content .flex-col,
  #mobileMenu .space-y-1 {
    gap: 0.5rem;
  }

  /* Ensure mobile menu items are properly styled */
  #navbar-content a,
  #mobileMenu a {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    width: 100%;
    transition: all 0.2s ease;
  }

  #mobile-menu a:hover {
    background-color: #f3f4f6;
  }

  /* Active state for mobile menu button */
  #mobile-menu-button.active,
  #mobile-menu-button[aria-expanded="true"] {
    background-color: #EBF5FF;
    color: #2563EB;
  }

  /* Mobile search container */
  #mobile-search-container {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: white;
    z-index: 49;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }

  /* Apply Now button in mobile menu */
  #mobile-menu .mt-4 a {
    margin-top: 0.5rem;
    transition: all 0.3s ease;
  }

  #mobile-menu .mt-4 a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
  }
}

/* Footer responsive adjustments */
@media (max-width: 767px) {
  footer .grid {
    gap: 2rem;
  }
}

/* Fix for fixed position elements on iOS */
@supports (-webkit-touch-callout: none) {
  .fixed {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
  }
}

/* Scholarship page specific responsive styles */
@media (max-width: 767px) {
  .scholarship-card {
    margin-bottom: 1.5rem;
  }

  /* Fix for horizontal overflow issues */
  .scholarship-card .absolute {
    max-width: 100%;
  }

  /* Ensure section containers don't cause overflow */
  section .container {
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Fix for gradient blobs causing overflow */
  .animate-blob {
    max-width: 80vw;
    max-height: 80vw;
  }

  /* Fix stat cards on mobile */
  .hero-section .grid.grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-top: 1rem;
  }

  /* Improve stat card styling */
  .hero-section .group.bg-white\/10.backdrop-blur-sm.rounded-lg {
    padding: 0.75rem;
  }

  .hero-section .text-lg.xs\:text-xl.sm\:text-2xl.font-bold.text-white {
    font-size: 1.1rem;
    line-height: 1.2;
  }

  .hero-section .text-purple-200.text-xs {
    font-size: 0.7rem;
    line-height: 1.2;
  }

  /* Fix scholarship diagram on mobile */
  .hero-section .scholarship-diagram-container {
    transform: scale(0.85);
    margin-bottom: 0.5rem;
  }

  /* Ensure "How It Works" section is fully visible */
  .hero-section .slide-in-right.opacity-0 {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* About us page specific responsive styles */
@media (max-width: 767px) {
  .team-member-card {
    margin-bottom: 1.5rem;
  }

  /* Hero section fixes */
  #about-us-hero .grid-cols-2 {
    grid-template-columns: 1fr;
  }

  #about-us-hero .text-center.lg\:text-left {
    text-align: center;
  }

  #about-us-hero .justify-center.lg\:justify-start {
    justify-content: center;
  }

  #about-us-hero .max-w-md {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  #about-us-hero .container {
    padding-top: 25vh; /* Increased to 25vh to shift content even lower */
    padding-bottom: 5vh; /* Add bottom padding for better spacing */
  }

  /* Ensure the hero section has proper height on mobile */
  #about-us-hero {
    min-height: 100vh;
    justify-content: flex-start; /* Align content from the top with padding */
  }

  /* Additional mobile-specific adjustments for hero container */
  @media (max-width: 640px) {
    .hero-container, #about-us-hero .container {
      padding-top: 30vh; /* Even more padding on small mobile devices */
    }
  }

  /* Timeline fixes */
  .timeline-container::after {
    left: 20px;
    margin-left: 0;
  }

  .timeline-item {
    width: 100%;
    padding-left: 50px;
    padding-right: 10px;
  }

  .timeline-left, .timeline-right {
    left: 0;
  }

  .timeline-left::after, .timeline-right::after {
    left: 10px;
    right: auto;
  }

  /* Mission & Values section fixes */
  #our-mission .grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* Impact stats fixes */
  #our-impact .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  #our-impact .counter-item {
    margin-bottom: 1rem;
  }

  #our-impact .text-4xl {
    font-size: 1.75rem;
  }

  #our-impact .w-16.h-16 {
    width: 3rem;
    height: 3rem;
  }

  #our-impact .h-8.w-8 {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* Scholarship categories fixes */
  #scholarship-categories .grid-cols-3 {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  #scholarship-categories .p-8 {
    padding: 1.5rem;
  }

  #scholarship-categories .mb-16 {
    margin-bottom: 2rem;
  }

  #scholarship-categories .text-xl {
    font-size: 1.1rem;
  }

  #scholarship-categories .w-20.h-20 {
    width: 4rem;
    height: 4rem;
  }

  #scholarship-categories .w-16.h-16 {
    width: 3rem;
    height: 3rem;
  }

  /* Fix background decorations */
  .absolute.animate-blob {
    opacity: 0.1;
  }

  /* Fix section spacing */
  section.py-20 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Fix container padding */
  .container.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Fix gap spacing */
  .gap-12 {
    gap: 1.5rem;
  }

  /* Fix text sizes */
  .text-3xl.md\:text-5xl {
    font-size: 2rem;
  }

  /* Fix button spacing */
  .inline-flex.px-8.py-4 {
    padding: 0.75rem 1.5rem;
  }
}

/* How it works page specific responsive styles */
@media (max-width: 767px) {
  /* General fixes */
  .step-card {
    margin-bottom: 1.5rem;
  }

  /* Hero section fixes */
  #how-it-works-hero {
    height: auto;
    min-height: 100vh;
    padding-bottom: 2rem;
  }

  #how-it-works-hero .text-4xl {
    font-size: 2rem;
  }

  #how-it-works-hero .text-lg {
    font-size: 1rem;
  }

  #how-it-works-hero .text-2xl {
    font-size: 1.25rem;
  }

  #how-it-works-hero .text-3xl {
    font-size: 1.5rem;
  }

  #how-it-works-hero .grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  #how-it-works-hero .space-y-5 {
    margin-top: 1rem;
  }

  /* Process steps fixes */
  .process-step {
    margin-bottom: 2rem;
  }

  .process-step .p-8 {
    padding: 1.5rem;
  }

  .process-step .w-16.h-16 {
    width: 3.5rem;
    height: 3.5rem;
  }

  .process-step .w-12.h-12 {
    width: 2.5rem;
    height: 2.5rem;
  }

  /* Detailed process fixes */
  #detailed-process .p-6 {
    padding: 1.25rem;
  }

  #detailed-process .space-y-12 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  #detailed-process .grid-cols-2 {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  #detailed-process .space-y-4 {
    margin-top: 1rem;
  }

  /* Fix background decorations */
  #application-process .absolute.animate-blob,
  #detailed-process .absolute.animate-blob,
  #eligibility .absolute.animate-blob {
    opacity: 0.1;
    max-width: 70vw;
    max-height: 70vw;
  }
}

/* Fix for touch events on mobile */
@media (max-width: 767px) {
  .touch-manipulation {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Fix for Quick Application section on mobile */
@media (max-width: 576px) {
  /* Quick Application section fixes */
  .quick-application-container {
    padding: 1rem;
    margin-bottom: 0;
  }

  .quick-application-container h3 {
    font-size: 1.1rem;
  }

  .quick-application-container p {
    font-size: 0.9rem;
  }

  .quick-application-container svg {
    width: 18px;
    height: 18px;
  }

  /* Improve grid layout for features */
  .quick-application-container .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
}

/* Even smaller screens */
@media (max-width: 360px) {
  .quick-application-container {
    padding: 0.75rem;
  }

  .quick-application-container h3 {
    font-size: 1rem;
  }

  .quick-application-container p {
    font-size: 0.8rem;
  }

  .quick-application-container svg {
    width: 16px;
    height: 16px;
  }

  /* Single column for very small screens */
  .quick-application-container .grid {
    grid-template-columns: 1fr;
  }
}

/* Specific fixes for small phones (480px and below) */
@media (max-width: 480px) {
  /* Contact page fixes for small phones */
  .hero-section .text-3xl.sm\:text-6xl.md\:text-8xl.lg\:text-9xl {
    font-size: 2rem;
    line-height: 1.2;
  }

  .hero-section .text-base.sm\:text-lg {
    font-size: 0.95rem;
    line-height: 1.4;
  }

  /* Fix stat cards for small phones */
  .hero-section .grid.grid-cols-1.sm\:grid-cols-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .stat-card {
    padding: 0.75rem;
  }

  .stat-card .bg-gradient-to-r.w-12.h-12.sm\:w-16.sm\:h-16 {
    width: 2.5rem;
    height: 2.5rem;
  }

  .stat-card .h-6.w-6.sm\:h-8.sm\:w-8 {
    width: 1.25rem;
    height: 1.25rem;
  }

  .counter-value {
    font-size: 1.75rem;
  }

  .counter-suffix {
    font-size: 1.25rem;
  }

  /* Fix contact options section for small phones */
  #contact-options .text-2xl.sm\:text-3xl.md\:text-4xl {
    font-size: 1.5rem;
  }

  #contact-options .text-base.md\:text-xl {
    font-size: 0.95rem;
  }

  /* Fix contact form section for small phones */
  #contact-form .text-3xl.sm\:text-4xl.md\:text-5xl {
    font-size: 1.5rem;
  }

  #contact-form .text-base.sm\:text-lg.md\:text-xl {
    font-size: 0.95rem;
  }

  /* Fix form inputs for small phones */
  .scholarship-form-container input,
  .scholarship-form-container textarea {
    padding: 0.5rem 0.75rem;
    font-size: 0.95rem;
  }

  .scholarship-form-container .pl-10 {
    padding-left: 2.25rem;
  }

  .scholarship-form-container label {
    font-size: 0.8rem;
  }

  /* Fix map section for small phones */
  #location .text-3xl.md\:text-5xl {
    font-size: 1.5rem;
  }

  #location .text-xl {
    font-size: 0.95rem;
  }

  /* How it works page fixes for small phones */
  #how-it-works-hero .text-4xl {
    font-size: 1.75rem;
  }

  #how-it-works-hero .text-lg {
    font-size: 0.95rem;
  }

  #how-it-works-hero .px-6 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #how-it-works-hero .py-3 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  #how-it-works-hero .space-x-4 {
    gap: 0.5rem;
  }

  /* Process steps fixes for small phones */
  .process-step .p-8 {
    padding: 1rem;
  }

  .process-step .w-16.h-16 {
    width: 3rem;
    height: 3rem;
  }

  .process-step .w-12.h-12 {
    width: 2rem;
    height: 2rem;
  }

  .process-step .text-xl {
    font-size: 1.1rem;
  }

  /* Detailed process fixes for small phones */
  #detailed-process .p-6,
  #detailed-process .p-4 {
    padding: 1rem;
  }

  #detailed-process .space-y-12 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  #detailed-process .text-2xl {
    font-size: 1.25rem;
  }

  #detailed-process .w-14.h-14 {
    width: 2.5rem;
    height: 2.5rem;
  }

  /* Fix CTA buttons for small phones */
  .inline-flex.px-8.py-4,
  .inline-flex.px-8.py-3 {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }

  /* About us page fixes for small phones */
  #about-us-hero .text-4xl {
    font-size: 1.75rem;
  }

  #about-us-hero .text-lg {
    font-size: 0.95rem;
  }

  #about-us-hero .px-6 {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  #about-us-hero .py-3 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  #about-us-hero .container {
    padding-top: 20vh; /* Increased padding for very small screens */
  }

  /* Timeline fixes for small phones */
  .timeline-item {
    padding-left: 45px;
    padding-right: 5px;
    margin-bottom: 1.5rem;
  }

  .timeline-container::after {
    left: 18px;
  }

  .timeline-left::after, .timeline-right::after {
    left: 8px;
  }

  .timeline-item .p-6 {
    padding: 1rem;
  }

  .timeline-item .text-2xl {
    font-size: 1.1rem;
  }

  .timeline-item .w-14.h-14 {
    width: 2.5rem;
    height: 2.5rem;
  }

  .timeline-item .text-xl {
    font-size: 0.9rem;
  }

  /* Scholarship page specific fixes for small phones */
  /* Fix "How It Works" section */
  .hero-section .relative.bg-white\/10.backdrop-blur-sm.rounded-xl {
    padding: 1rem;
  }

  .hero-section .flex.items-center.mb-2.xs\:mb-3.sm\:mb-4 {
    margin-bottom: 0.75rem;
  }

  .hero-section .bg-gradient-to-r.rounded-lg.p-1.xs\:p-1\.5.sm\:p-2.mr-2.xs\:mr-3 {
    padding: 0.75rem;
    margin-right: 0.75rem;
  }

  .hero-section .h-4.w-4.xs\:h-5.xs\:w-5.sm\:h-6.sm\:w-6.text-white {
    width: 1rem;
    height: 1rem;
  }

  .hero-section .text-base.xs\:text-lg.sm\:text-xl.md\:text-2xl.font-bold.text-white {
    font-size: 1.25rem;
  }

  .hero-section .space-y-3.xs\:space-y-4.sm\:space-y-5 {
    margin-top: 0.75rem;
    gap: 0.75rem;
  }

  .hero-section .flex.items-center.group\/step {
    margin-bottom: 0.75rem;
  }

  .hero-section .relative.mr-3 {
    margin-right: 0.75rem;
  }

  .hero-section .relative.bg-gradient-to-r.text-white.rounded-full.w-6.h-6.xs\:w-7.xs\:h-7.sm\:w-8.sm\:h-8.md\:w-9.md\:h-9 {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
  }

  .hero-section .text-white.font-medium.text-sm.xs\:text-base.sm\:text-lg {
    font-size: 0.9rem;
  }

  /* Fix stat cards for small phones */
  .hero-section .grid.grid-cols-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1rem;
  }

  .hero-section .group.bg-white\/10.backdrop-blur-sm.rounded-lg.p-2.xs\:p-3 {
    padding: 0.75rem;
  }

  .hero-section .text-lg.xs\:text-xl.sm\:text-2xl.font-bold.text-white.mb-0\.5 {
    font-size: 1.1rem;
  }

  .hero-section .text-purple-200.text-xs {
    font-size: 0.7rem;
  }

  /* Fix scholarship diagram for small phones */
  .hero-section .scholarship-diagram-container {
    transform: scale(0.9);
    margin-bottom: 0.75rem;
  }
}



/* Ensure hamburger menu button and menu are always visible and clickable at 320px */
@media (max-width: 320px) {
  #mobile-menu-button, .mobile-menu-toggle, .mobile-menu-button {
    display: flex;
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    z-index: 10001;
    position: relative;
  }
  #mobile-menu, #mobileMenu, .mobile-menu {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: 56px;
    width: 100vw;
    max-width: 100vw;
    z-index: 10000;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.12);
  }
  #mobile-menu.active, #mobileMenu.active, .mobile-menu.active,
  #mobile-menu:not(.hidden), #mobileMenu:not(.hidden), .mobile-menu:not(.hidden) {
    display: block;
    opacity: 1;
    visibility: visible;
    max-height: 500px;
    pointer-events: auto;
  }
}