/* Mobile Fixes for Index.html */

/* Global mobile adjustments */
@media (max-width: 768px) {
  /* Fix slider height for mobile */
  .slider .slide {
    height: 100vh !important; /* Override inline style */
    min-height: 500px;
  }

  /* Adjust slide content for mobile */
  .slide-title {
    font-size: 42px !important;
    margin-bottom: 10px;
  }

  .slide-subtitle {
    font-size: 18px !important;
  }

  /* Fix service categories container for mobile */
  .service-categories-container {
    margin-top: -50px;
    margin-bottom: 30px;
    padding: 0;
  }

  .service-categories {
    flex-direction: column;
  }

  .service-category {
    height: auto;
    padding: 20px;
  }

  /* Fix About Us section layout */
  .about-section {
    padding: 50px 0;
  }

  .about-container {
    padding: 0 15px;
  }

  .about-heading {
    font-size: 32px;
  }

  .about-text {
    font-size: 14px;
  }

  /* Fix the years badge */
  .years-badge {
    margin: 40px auto;
  }

  .years-number {
    font-size: 120px;
    margin-top: -100px;
    margin-left: -30px;
  }

  .years-text {
    font-size: 48px;
    margin-top: 0;
    margin-left: -60px;
  }

  .years-diamond {
    width: 150px;
    height: 150px;
    margin-top: -75px;
    margin-left: -75px;
  }

  /* Fix gallery grid layout */
  .gallery-container {
    padding: 10px;
  }

  .gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .gallery-item {
    width: 100%;
    height: 250px;
  }

  .gallery-item img {
    height: 100%;
    object-fit: cover;
  }

  /* Remove grid positioning in mobile view */
  .item-1,
  .item-2,
  .item-3,
  .item-4,
  .item-5,
  .item-6,
  .item-7,
  .item-8,
  .item-9 {
    grid-column: auto;
    grid-row: auto;
  }

  /* Services section */
  .services-section {
    padding: 30px 15px;
  }

  .services-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 15px;
  }

  .flip-card {
    height: 280px;
  }

  /* Image modal fixes */
  .modal-content {
    max-width: 95%;
  }

  /* Footer adjustments */
  .footer-section {
    margin-top: 30px;
    padding: 40px 0 0;
  }

  .footer-container {
    padding: 0 15px;
  }

  /* Mobile menu specific adjustments */
  .menu-btn {
    position: absolute;
    top: 25px;
    right: 20px;
  }

  /* Add padding to body for fixed mobile navigation */
  body {
    padding-bottom: 60px;
  }

  /* Fix the modal z-index to appear above mobile navigation */
  #imageModal {
    z-index: 2000;
  }
}

/* Extra small devices adjustments */
@media (max-width: 576px) {
  .slide-title {
    font-size: 36px !important;
  }

  .years-number {
    font-size: 100px;
  }

  .years-text {
    font-size: 40px;
  }

  .years-diamond {
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;
  }

  /* Ensure flip cards are usable on smaller screens */
  .flip-card {
    height: 250px;
  }

  .flip-card-front,
  .flip-card-back {
    padding: 15px;
  }

  .card-title {
    font-size: 1.3rem;
  }

  .flip-card-back p {
    font-size: 0.8rem;
  }

  /* Section titles */
  .section-title h2,
  .section-title1 h2 {
    font-size: 1.5rem;
  }

  .section-title::before,
  .section-title1::before {
    width: 80px;
  }
}