/* =====================================================
   Mobile-First Responsive Styles
   Breakpoints:
   - Mobile: < 576px (default)
   - Tablet: ≥ 576px
   - Desktop: ≥ 992px
   - Large Desktop: ≥ 1200px
   ===================================================== */

/* ===================
   Base Mobile Styles (No media query)
   =================== */

/* Ensure all images are responsive by default */
img {
  max-width: 100%;
  height: auto;
}

/* Base container fluidity */
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* Hero section mobile optimization */
.hero_area {
  min-height: auto;
}

/* Navigation mobile styles */
.custom_nav-container .navbar-nav {
  padding-top: 15px;
  padding-left: 0;
  align-items: center;
}

.user_option {
  justify-content: center;
  margin-top: 15px;
}

.custom_nav-container .navbar-nav .nav-item .nav-link {
  padding: 5px 25px;
  margin: 5px 0;
}

/* Slider mobile optimization */
.slider_section .carousel-indicators {
  margin-top: 45px;
}

.slider_section .detail-box h1 {
  font-size: 2.5rem;
}

/* Offer section mobile layout */
.offer_section .box {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.offer_section .box .img-box {
  margin-right: 0;
  margin-bottom: 15px;
}

/* Section spacing for mobile */
.about_section .detail-box,
.book_section .form_container {
  margin-bottom: 45px;
}

.about_section .row {
  flex-direction: column-reverse;
}

/* Rent solution grid for mobile */
.rent_solution_container .col-md-4.col-sm-6 {
  width: 100%;
  float: none;
}

/* ===================
   Tablet Styles (≥576px)
   =================== */
@media (min-width: 576px) {
  .slider_section .detail-box h1 {
    font-size: 3rem;
  }
  
  /* Two-column layout for tablets */
  .rent_solution_container .col-md-4.col-sm-6 {
    float: left;
    width: 50%;
  }
  
  /* Adjust offer section for tablets */
  .offer_section .box {
    flex-direction: row;
    text-align: left;
  }

  .offer_section .box .img-box {
    margin-right: 15px;
    margin-bottom: 0;
  }
}

/* ===================
   Small Desktop Styles (≥768px)
   =================== */
@media (min-width: 768px) {
  .hero_area {
    min-height: 100vh;
  }
  
  .slider_section .detail-box h1 {
    font-size: 3.5rem;
  }
  
  /* Restore desktop navigation */
  .custom_nav-container .navbar-nav {
    padding-top: 0;
    align-items: normal;
  }
  
  .user_option {
    justify-content: flex-end;
    margin-top: 0;
  }
  
  .custom_nav-container .navbar-nav .nav-item .nav-link {
    padding: 10px;
    margin: 0;
  }
}

/* ===================
   Desktop Styles (≥992px)
   =================== */
@media (min-width: 992px) {
  .slider_section .detail-box h1 {
    font-size: 4rem;
  }
  
  /* Three-column layout for desktop */
  .rent_solution_container .col-md-4.col-sm-6 {
    width: 33.333333%;
  }
  
  /* Restore original about section layout */
  .about_section .row {
    flex-direction: row;
  }
  
  .about_section .detail-box,
  .book_section .form_container {
    margin-bottom: 0;
  }
  
  /* Carousel indicator positioning */
  .slider_section .carousel-indicators {
    margin-top: 0;
  }
}

/* ===================
   Large Desktop Styles (≥1200px)
   =================== */
@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

/* ===================
   Extra Small Device Optimizations
   =================== */
@media (max-width: 430px) {
  .offer_section .box {
    flex-direction: column;
    text-align: center;
  }

  .offer_section .box .img-box {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

@media (max-width: 376px) {
  .slider_section .detail-box h1 {
    font-size: 2rem;
  }
}