/* ========== Base (Mobile First, < 576px) ========== */
body {
  overflow-x: hidden;
  margin: 0 !important;
  padding: 0 !important;
}

.moments-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}

.moments-left,
.moments-right {
  width: 100%;
}

.moments-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

/* Common sections for mobile */
.food_main_div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.footer_container,
.story_div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.story_text_section,
.collage-container {
  padding: 0 1em;
}

.call-us-section .container h1 {
  padding: 1em;
  font-size: 2em;
  text-align: center;
}

.mob_email_input .form-group {
  width: 100% !important;
}

/* Responsive */
@media (max-width: 768px) {
  body{
    overflow-x: hidden;
  }

  header .position-absolute h1 {
    font-size: 32px;
  }
  header .position-absolute p {
    font-size: 16px;
  }
    .moments-wrapper {
        flex-direction: column;
    }

    .moments-left, .moments-right {
        width: 100%;
    }

    .moments-row img {
        width: 100%;
    }
    .about-content {
        flex-direction: column;
        align-items: center;
    }

    .about-image-box {
        flex: 1;
    }

    .about-text-box {
        margin-top: 100px !important;
        font-size: 1em;
        width: 100%;
        /* bottom: -80px; */
        flex: 0;
    }
    .food_main_div{
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }
    .moments-wrapper {
        flex-direction: column;
      }
    
      .moments-left,
      .moments-right {
        width: 100%;
      }
    
      .moments-row {
        flex-direction: column;
      }
    
      .moments-row img {
        width: 100%;
      }
      .footer_container{
        display: grid;
        grid-template-columns: repeat(1,1fr);
      }
       /* About Style */

       .story_div{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        justify-content: center;
      }
      .story_text_section{
        padding: 0em 2em;
      }
      .collage-container{
        padding: 0em 2em;
      }

      .mission-row {
        justify-content: center !important;
      }
    
      .mission-wrapper {
        width: 80%;
      }
    
      .mission-card {
        text-align: center;
      }
      .call-us-section .container h1{
        padding: 1em;
        font-size: 2.5em;
      }
      .mob_email_input .form-group{
        width: 100% !important;
      }
      .submit_btn_div {
        text-align: right;
        margin-top: 1em;
      }
}
@media (min-width: 768px) {
  .contact_container {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .contact_text_container,
  .contact_form_container {
    width: 48%;
  }

  .mob_email_input {
    flex-direction: row;
  }

  .email_input,
  .phone_input {
    width: 100%;
  }

  .form_style {
    text-align: left;
  }
}

@media (width: 1080px) {
  .moments-wrapper {
    display: flex;
    gap: 10px; /* reduced from 20px */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: flex-end;
  }

  .moments-left {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .moments-left img {
      width: 80%;
    height: 400px;
    width: auto;
    object-fit: cover;
    border-radius: 10px;
    display: block;
  }

  .moments-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: flex-end;
  }

  .moments-row {
    display: flex;
    gap: 15px;
  }

  .moments-row img {
    height: 190px;
    width: auto;
    object-fit: cover;
    border-radius: 10px;
    flex-grow: 1;
    display: block;
  }
}

@media (width: 1024px) {
  body{
    overflow-x: hidden !important;
  }
  .moments-wrapper {
    display: flex;
    gap: 10px; /* reduced from 20px */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: flex-end;
  }

  .moments-left {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .moments-left img {
      width: 80%;
    height: 400px;
    width: auto;
    object-fit: cover;
    border-radius: 10px;
    display: block;
  }

  .moments-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: flex-end;
  }

  .moments-row {
    display: flex;
    gap: 15px;
  }

  .moments-row img {
    height: 190px;
    width: auto;
    object-fit: cover;
    border-radius: 10px;
    flex-grow: 1;
    display: block;
  }
}
@media (width: 1280px) {
  .moments-wrapper {
    display: flex;
    gap: 10px; /* reduced from 20px */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: flex-end;
  }

  .moments-left {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .moments-left img {
      width: 80%;
    height: 400px;
    width: auto;
    object-fit: cover;
    border-radius: 10px;
    display: block;
  }

  .moments-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: flex-end;
  }

  .moments-row {
    display: flex;
    gap: 15px;
  }

  .moments-row img {
    height: 190px;
    width: auto;
    object-fit: cover;
    border-radius: 10px;
    flex-grow: 1;
    display: block;
  }
}

@media (width: 1366px) {
  .moments-wrapper {
    display: flex;
    gap: 10px; /* reduced from 20px */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: flex-end;
  }

  .moments-left {
    flex: 1;
    display: flex;
    justify-content: center;
  }

  .moments-left img {
      width: 80%;
    height: 400px;
    width: auto;
    object-fit: cover;
    border-radius: 10px;
    display: block;
  }

  .moments-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: flex-end;
  }

  .moments-row {
    display: flex;
    gap: 15px;
  }

  .moments-row img {
    height: 190px;
    width: auto;
    object-fit: cover;
    border-radius: 10px;
    flex-grow: 1;
    display: block;
  }
}

/* Laptop view – works for almost every laptop size */
@media (min-width: 1024px) and (max-width: 1920px) {
  body{
    overflow-x: hidden !important;
  }
  .moments-wrapper {
    display: flex;
    gap: 20px; /* more spacing */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: flex-start; /* align top instead of bottom */
  }

  /* Left Large Image */
  .moments-left {
    flex: 1.2; /* slightly bigger than right side */
    display: flex;
    justify-content: center;
  }

  .moments-left img {
      width: 80%;
    height: 400px;
    width: auto;
    object-fit: cover;
    border-radius: 10px;
    display: block;
  }

  /* Right Side 2x2 Grid */
  .moments-right {
    flex: 1.8; /* give more space so images are not cramped */
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: flex-start; /* start from top */
  }

  .moments-row {
    display: flex;
    gap: 15px;
  }

  .moments-row img {
    height: 190px; /* or auto if you want natural height */
    width: 100%; /* fill available space */
    object-fit: cover;
    border-radius: 10px;
    flex: 1; /* all images same width */
    display: block;
  }
}




@media (max-width: 640px) {
  body {
    overflow-x: hidden !important;
    margin: 0;
    padding: 0;
  }


  .hero-content h1{
    margin-top: 2em;
  }


  .about-title {
    font-size: 2em;
    font-weight: bold;
    color: #333;
    font-family: Roboto, sans-serif;
    text-align: center;
    white-space: normal;
    padding: 0 10px;
  }


  .facilities-container {
    padding: 10px;
    max-width: 100%;
    margin: 0 auto;
  }

  .facilities-container h2 {
    padding: 0.5em 0;
    font-size: 1.3rem;
    text-align: center;
  }

  .facilitiesSwiper {
    padding: 0 !important;
  }

  .facilitiesSwiper .swiper-wrapper {
    padding-left: 0 !important;
  }

  .facilities_swiper{
    display: grid !important;
    gap: 2em;
  }

  .facilitiesSwiper .swiper-slide {
    width: 100% !important;
    height: auto;
    padding: 10px;
    box-sizing: border-box;
  }

  .facilities-container .card {
    max-width: 100%;
    height: auto;
    padding: 10px;
    text-align: center;
    margin:1em 0em;
  }

  .card .icon {
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
  }

  .card h3 {
    font-size: 1rem;
    margin: 5px 0;
  }


  .facilitiesSwiper .swiper-button-prev,
  .facilitiesSwiper .swiper-button-next {
    font-size: 0.7em;
    padding: 0.5em;
    top: 45%;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    width: 30px;
    height: 30px;
  }

  .facilitiesSwiper .swiper-button-prev {
    left: 5px;
  }

  .facilitiesSwiper .swiper-button-next {
    right: 5px;
  }

  .facilitiesSwiper,
.facilitiesSwiper .swiper-wrapper {
  padding: 0 !important;
  margin: 0 !important;
}

.facilities_swiper {
  display: grid !important;
  gap: 0 !important; /* small gap avoid overflow */
}


  .moments-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }

  .moments-left,
  .moments-right {
    width: 100%;
  }

  .moments-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

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

  .food_main_div {
    display: grid;
    grid-template-columns: 1fr; /* single column */
    gap: 10px;
  }


  .footer_container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }


  .story_div {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
  }

  .story_text_section,
  .collage-container {
    padding: 0 1em;
  }


  .call-us-section .container h1 {
    padding: 1em;
    font-size: 2em;
    text-align: center;
  }

  .mob_email_input .form-group {
    width: 100% !important;
  }

  .submit_btn_div {
    text-align: right;
    margin-top: 1em;
  }
  .address_section {
    margin-left: -2.5em !important;
  }
  .story_text_section{
    width: 20em;
  }
  .collage-container{
    width: 20em;
  }

  .choose_main_div{
    display: grid;
    grid-template-columns: repeat(1,1fr);
  }

  .call-us-section .container h2 {
    text-align: center;
    padding: 0;
    font-size: 1.5em;
  }

}


/* ========== Tablets (≥ 576px and < 992px) ========== */
@media (min-width: 576px) {
  body{
    overflow-x: hidden !important;
    margin: 0;
    padding: 0;
  }
  .text-shadow h1 {
    font-size: 2rem;
  }

  .about-content {
    flex-direction: column;
    align-items: center;
  }

  .about-image-box {
    flex: 1;
  }

  .about-text-box {
    margin-top: 100px !important;
    font-size: 1em;
    width: 100%;
    bottom: 1em;
    flex: 0;
  }

  .food_main_div {
    grid-template-columns: repeat(2, 1fr);
  }

  .moments-left img {
      width: 80%;
    height: 300px;
    object-fit: cover;
  }

  .story_div {
    grid-template-columns: repeat(2, 1fr);
  }

  .story_text_section,
  .collage-container {
    padding: 0 2em;
  }
}

/* ========== Laptops (≥ 992px and < 1440px) ========== */
@media (min-width: 992px) {
  .text-shadow h1 {
    font-size: 3rem;
  }

  .about-text-box {
    bottom: -120px;
    /* left: 10%; */
  }

  .food_main_div {
    grid-template-columns: repeat(4, 1fr);
  }

  .moments-wrapper {
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .moments-left,
  .moments-right {
    flex: 1;
  }

  .moments-row {
    flex-direction: row;
    gap: 15px;
  }

  .moments-row img {
    width: 50%;
  }

  .moments-left img {
    height: 25em;
  }
}


@media (width: 1024px) {
  body{
    overflow-x: hidden !important;
  }
  .moments-wrapper {
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }

  .moments-left,
  .moments-right {
    flex: 1;
  }

  .moments-row {
    flex-direction: row;
    gap: 15px;
  }

  .moments-row img {
    width: 50%;
  }

  .moments-left img {
    height: 25em;
  }
  .feature-card p{
    width: 17em !important;
  }
}

/* ========== Large Laptops & Desktops (≥ 1440px) ========== */
@media (min-width: 1440px) {
  .moments-left img {
      width: 80%;
    height: 400px;
  }

  .moments-row img {
    height: 190px;
  }
}

/* MOBILE STACKING */
@media (max-width: 992px) {
  .about-container {
    flex-direction: column;
    align-items: center;
    margin: 0em 2em !important;
  }

  .about-content,
  .about-images {
    max-width: 100%;
  }

  .about-images {
    margin-top: 20px;
  }
}