/* ===================================
   Hero Slider Styles
   =================================== */
.hero-slider-section {
    min-height: 40vh;
    position: relative;
    width: 100%;
    max-height: 40vh;
    overflow: hidden;
    /*padding-top: 30px;*/
}

.hero-slider-container {
  height: 100%;
  position: relative;
}

.hero-carousel {
  height: 100%;
}

.hero-carousel .carousel-inner {
  height: 100%;
}

.hero-slide {
  height: 40vh;
  position: relative;
  width: 100%;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 0.7) 100%
  );
  z-index: 2;
}

.banner-image {
    width: 100%;
    height: 100%; /* or set a fixed height like 400px / 80vh */
    overflow: hidden;
}

.banner-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fills, crops, keeps aspect ratio */
    object-position: center; /* centers the image */
    display: block;
}


.hero-content {
  position: relative;
  height: 100%;
 display: flex;
 align-items: flex-end;
 justify-content: center;
  z-index: 3;
  padding:0;
}

.hero-text {
  color: white;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  animation: slideInUp 1s ease-out;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.5rem;
  font-weight: 300;
  margin-bottom: 2.5rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2.5rem;
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
  border-radius: 50px;
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
  position: relative;
  overflow: hidden;
}

.hero-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
  background: linear-gradient(135deg, #0056b3 0%, #003d82 100%);
  color: white;
}

.hero-btn:hover::before {
  left: 100%;
}

.hero-btn svg {
  transition: transform 0.3s ease;
}

.hero-btn:hover svg {
  transform: translateX(4px);
}

/* Carousel Indicators */
.hero-carousel .carousel-indicators {
  bottom: 2rem;
  margin: 0;
}

.hero-carousel .carousel-indicators [data-bs-target] {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  margin: 0 0.5rem;
  transition: all 0.3s ease;
}

.hero-carousel .carousel-indicators [data-bs-target].active {
  background-color: white;
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Carousel Controls */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
  width: 5%;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.hero-carousel .carousel-control-prev:hover,
.hero-carousel .carousel-control-next:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.2);
}

.carousel-control-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.carousel-control-icon:hover {
  background-color: white;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.carousel-control-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-slider-section {
    height: 60vh;
    min-height: 400px;
    max-height: 500px;
  }
  
  .hero-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }
  
  .hero-subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
  }
  
  .hero-btn {
    padding: 0.875rem 2rem;
    font-size: 1rem;
  }
  
  .hero-content {
    padding: 1rem 0;
  }
  
  .hero-carousel .carousel-indicators {
    bottom: 1rem;
  }
  
  .hero-carousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    margin: 0 0.25rem;
  }
}

@media (max-width: 480px) {
  .hero-slider-section {
    height: 25vh;
    min-height: 25vh;
  }
  
  .hero-slide {
    height: 25vh;
    position: relative;
    width: 100%;
}

/* Carousel Controls */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
        width: auto !important;
        opacity: 0.4;
        transition: all 0.3s ease;
        z-index: 100 !important;
        margin: 3px;
}

.hero-slider-section {
    padding-top: 5px!important;
}

  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .hero-actions {
    gap: 0.5rem;
  }
  
  .hero-btn {
    padding: 0.5rem 1.5rem;
    font-size: 0.85rem;
  }
}

/* =========================
   Core Layout & Variables
   ========================= */

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1200px;
    }
}

.bg-white{
    background: var(--bg-white);
}

.bg-secondary{
    background: var(--bg-secondary);
}

.home-search-section{
    background:var(--bg-secondary);
}

.home-search-wrapper {
    flex: 1;
    max-width: 850px;
}


.filter-content{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    gap: var(--spacing-2xl);
}
.text-center { text-align: center; }

/* =========================
   Categories / Tabs
   ========================= */

.categories-section {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    padding: 10px 0px 10px;
    transition: all 0.3s ease;
    margin-bottom: 10px;
}

.categories-section.scrolled { top: 64px; }

.categories-header { text-align: center; margin-bottom: var(--spacing-2xl); }
.categories-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}
.categories-subtitle { font-size: var(--font-size-lg); color: var(--text-secondary); }

/* Tabs (horizontal scroll + centered) */
.categories-tabs,
.categories-tabs::-webkit-scrollbar { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.categories-tabs { display:flex; gap:var(--spacing-md); justify-content:center; overflow-x:auto; padding:0 24px; }

/* Category tab button */
.category-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 50px 5px;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-size: .75rem;
    color: black;
    font-weight: 600;
    flex-shrink: 0;
}

.category-tab svg { width: 32px;height: 32px; }
.category-tab:hover { border-color:var(--primary-color); color:var(--primary-color); transform:translateY(-2px); }
.category-tab.active { 
    color: var(--text-primary);
    border-bottom-color: var(--text-primary); }

/* =========================
   Services Grid & Cards
   ========================= */

.services-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-xl);
}

@media (min-width: 1200px) {
  .services-grid { grid-template-columns: repeat(6, 1fr); gap: var(--spacing-lg); }
}

.service-card {
  overflow:hidden;
  transition: all 0.3s ease;
}
.service-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Images carousel inside card */
.service-images {position: relative;height: 174px;overflow: hidden; }
.service-image {position: absolute;top: 0;left: 0;width:100%; height:100%; object-fit:cover; transition:opacity 0.3s ease;border-radius: 1rem; opacity:1; }
.service-image.active { opacity:1; }

.image-nav {
  position:absolute; top:50%; left:0; right:0;
  transform: translateY(-50%);
  display:flex; justify-content:space-between; padding:0 var(--spacing-sm);
  opacity:0; transition: opacity 0.3s ease;
}
.service-card:hover .image-nav { opacity:1; }

.image-nav-btn {
  width:32px; height:32px; background:rgba(255,255,255,0.9);
  border:none; border-radius:var(--radius-full);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-primary); transition: all 0.2s ease;
}
.image-nav-btn:hover { background: var(--bg-white); }

/* Dots and badge */
.image-dots { position:absolute; bottom:var(--spacing-sm); left:50%; transform:translateX(-50%); display:flex; gap:var(--spacing-xs); }
.image-dot { width:6px; height:6px; background:rgba(255, 255, 255, 0.6); border-radius:var(--radius-full); transition:all 0.2s ease; }
.image-dot.active { background:var(--bg-white); width:18px; }
.view-images-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgb(255 255 255 / 47%);
    backdrop-filter: blur(20px);
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: #393939;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}
.service-card:hover .view-images-btn {
    opacity: 1;
}

.service-badge {
  position:absolute; top:var(--spacing-sm); left:var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--secondary-color); color: var(--text-primary);
  border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight:500; z-index:2;
}

/* Service info */
.service-info { padding-top: 7px; }
.service-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:var(--spacing-sm); }
.service-title {
  margin:0; line-height:var(--line-height-tight); flex:1; margin-right:var(--spacing-sm);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  font-size:.775rem; line-height:1.25rem; color: rgb(26 24 25); font-weight:600;
}
.service-rating, .service-location {
  display:flex; align-items:center; gap:var(--spacing-xs); font-size:var(--font-size-sm); color:var(--text-secondary); white-space:nowrap;
}
.service-location { margin-bottom: var(--spacing-md); }

.service-price { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); color: var(--primary-color); }
.service-price .price-unit { font-size: var(--font-size-sm); color: var(--text-secondary); font-weight: var(--font-weight-semibold); }

/* =========================
   Category Scroll / Horizontal list
   ========================= */

.category-scroll-container { position:relative; overflow:hidden; }
.category-services {
  display:flex; gap:var(--spacing-lg);flex-direction:column-reverse; overflow-x:auto; scroll-behavior:smooth;scrollbar-width:none; -ms-overflow-style:none;
}
.category-services::-webkit-scrollbar { display:none; }

.service-scroll-item { flex:0 0 auto; width:280px; }
@media (min-width:1024px) {
  .service-scroll-item { width: calc((100% - 5 * var(--spacing-lg)) / 6); }
}
@media (max-width:768px) {
  .service-scroll-item { width: calc((100% - var(--spacing-lg)) / 2); }
  .category-scroll-container { padding:0; }
  .category-services { gap:var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); }
}

/* Fix for small screens: corrected calc() syntax */
@media (max-width:480px) {
  .service-scroll-item { width: calc((100% - var(--spacing-lg)) / 2); }
  .category-services { padding: var(--spacing-sm) 0; }
  .property-images { border-radius:10px; margin-bottom:8px; }
}

/* =========================
   Section Headers & Controls
   ========================= */

.section-header { text-align:start; }
.section-header .section-title {
  margin-top:6px; margin-bottom:6px; font-size:1.3rem; line-height:2rem; color:rgb(17 24 39); font-weight:600;
}
.section-header-with-scroll {
  display:flex; justify-content:space-between; align-items:center; gap:var(--spacing-md);
  margin-top:12px; margin-bottom:12px;
}
.section-header-with-scroll .section-title {
  margin-top:6px; margin-bottom:6px; font-size:1.5rem; line-height:2rem; color:rgb(17 24 39); font-weight:600;
}
.section-header-with-scroll .section-subtitle { margin:0;color: var(--text-primary);font-size: .75rem; }

.scroll-controls { display:flex; gap:var(--spacing-xs); }
.scroll-arrow {
  width:32px; height:32px; background:var(--bg-white); border:1px solid var(--border-color);
  border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center;
  color:var(--text-primary); transition: all 0.2s ease;
}
.scroll-arrow:hover:not(:disabled) { background:var(--primary-color); color:var(--text-white); border-color:var(--primary-color); }
.scroll-arrow:disabled { opacity:0.5; cursor:not-allowed; }

/* =========================
   Destinations / Cards
   ========================= */

.destinations-section { padding:var(--spacing-3xl) 0; background-color:var(--bg-light); }
.destinations-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap:var(--spacing-xl); }
.destination-card {
  background-color:var(--bg-primary); border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-md);
  transition:all 0.3s ease; position:relative;
}
.destination-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-xl); }
.destination-image { position:relative; height:200px; overflow:hidden; }
.destination-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease; }
.destination-card:hover .destination-image img { transform:scale(1.05); }
.destination-overlay { position:absolute; inset:0; background:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.7) 100%); }
.destination-badge {
  position:absolute; top:var(--spacing-md); left:var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-sm); background-color:var(--primary-color); color:var(--text-white);
  border-radius:var(--radius-full); font-size:var(--font-size-xs); font-weight:500; z-index:2;
}
.destination-info { padding:var(--spacing-lg); }
.destination-name { font-size:var(--font-size-xl); font-weight:var(--font-weight-semibold); color:var(--text-primary); margin-bottom:var(--spacing-sm); }
.destination-description { font-size:var(--font-size-sm); color:var(--text-secondary); line-height:var(--line-height-relaxed); margin-bottom:var(--spacing-md); }
.destination-meta { display:flex; justify-content:space-between; align-items:center; }
.destination-rating { display:flex; align-items:center; gap:var(--spacing-xs); font-size:var(--font-size-sm); color:var(--text-secondary); }
.destination-price { font-size:var(--font-size-lg); font-weight:var(--font-weight-semibold); color:var(--primary-color); }
.price-unit { font-size:var(--font-size-sm); color:var(--text-secondary); font-weight:var(--font-weight-normal); }

/* =========================
   Why / Features / Grid
   ========================= */

.why-travela-section { background:#f7f7f7;padding: var(--spacing-3xl) 0;margin-top:6px;margin-bottom:6px; }
.section-badge {
  display:inline-block; padding:6px 16px; background:var(--primary-color); color:white;
  border-radius:20px; font-size:12px; font-weight:700; margin-bottom:16px; letter-spacing:0.5px;
}

.features-grid {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:40px;
  margin-top:48px;
}
.feature-item { text-align:center; }
.feature-icon {
  width:80px; height:80px; background:linear-gradient(135deg,var(--primary-color) 0%, var(--secondary-color) 100%);
  border-radius:50%; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:36px;
}
.feature-title { font-size:16px; font-weight:700; color:var(--text-primary); margin-bottom:12px; }
.feature-description { font-size:14px; color:var(--text-secondary); line-height:1.6; }

/* =========================
   App Download / Hero / About
   ========================= */

.app-download-section { color:var(--text-white);
    padding: var(--spacing-3xl) 0;margin-top:6px;margin-bottom:6px; }
.app-download-content { display:grid; grid-template-columns: 1fr 1fr; gap:var(--spacing-3xl); align-items:start; }
.app-download-text .section-title { font-size: 2rem;line-height: 2.5rem;color: rgb(17 24 39);font-weight:700;margin-top:10px;width: 24rem; }
.app-download-text .section-subtitle { font-size: 1rem;line-height: 1.5rem;color: rgb(114 114 114);font-weight:700;margin-top:10px; }
.app-buttons { display:flex; gap:var(--spacing-md); margin-bottom:var(--spacing-xl); }
.app-button {
  display:flex; align-items:center; gap:var(--spacing-sm);
  background:var(--bg-white); color:var(--text-primary); text-decoration:none; border-radius:var(--radius-lg);
  font-weight:500; transition:all 0.3s ease;
  margin-top:10px;
}
.app-button:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }

.qr-code-wrapper { text-align:center; }
.qr-code-wrapper img { border-radius:var(--radius-lg); background:var(--bg-white); padding:var(--spacing-sm); }

.hero {
  position:relative;
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
  display:flex; align-items:center; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none;
}
.hero-content { position:relative; z-index:2; text-align:center; color:var(--text-white); padding:var(--spacing-md) 0; }
.hero-title { font-size:clamp(1.5rem,3vw,1.5rem); font-weight:var(--font-weight-bold); line-height:var(--line-height-tight); margin-bottom:var(--spacing-sm); text-shadow:0 2px 4px rgba(0,0,0,0.1); }
.hero-subtitle { font-size:var(--font-size-xl); font-weight:var(--font-weight-normal); line-height:var(--line-height-relaxed); margin-bottom:var(--spacing-sm); opacity:0.95; max-width:600px; margin-left:auto; margin-right:auto; }
.hero-search { max-width:800px; margin:0 auto; }

/* =========================
   Blog / About / Misc
   ========================= */

.blog-section { background:var(--bg-light);padding: var(--spacing-3xl) 0;margin-top:6px;margin-bottom:6px; }
.blog-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:32px; margin-top:48px; }
.blog-card { background:white; border-radius:16px; overflow:hidden; transition:all 0.3s ease; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.blog-card:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.12); }
.blog-image { width:100%; height:240px; overflow:hidden; }
.blog-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.3s ease; }
.blog-card:hover .blog-image img { transform:scale(1.05); }
.blog-content { padding:24px; }
.blog-title { font-size:18px; font-weight:700; color:var(--text-primary); margin-bottom:12px; line-height:1.4; }
.blog-excerpt {
  font-size:14px; color:var(--text-secondary); line-height:1.7; margin-bottom:16px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-link { font-size:14px; font-weight:600; color:var(--primary-color); text-decoration:none; }
.blog-link:hover { text-decoration:underline; }

/* =========================
   Responsive Consolidation
   ========================= */

@media (max-width:1200px) {
  .category-items { grid-auto-columns: calc((100% - 60px) / 4); }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width:1024px) {
  .category-items { grid-auto-columns: calc((100% - 40px) / 3); }
  .categories-section { top:64px; }
  .properties-grid.grid-3 { grid-template-columns: repeat(2, 1fr); }
  .app-download-content { grid-template-columns: 1fr; text-align:center; }
  .app-download-text { display:flex; flex-direction:column; align-items:center; }
  .about-grid { grid-template-columns:1fr!important; }
}

@media (max-width:768px) {
  .section-title { font-size:20px; }
  .category-items { grid-auto-columns: calc((100% - 20px) / 3); gap:10px; }
  .categories-tabs { justify-content:center; padding:0 16px; gap:16px; }
  .category-tab { padding:8px 12px 12px;flex-direction:column!important; }
  .category-tab.active { border-bottom:1px solid; }
  .property-location, .property-title, .price, .period { font-size:14px; }
  .features-grid { grid-template-columns:1fr; gap:32px; }
  .properties-grid.grid-3 { grid-template-columns:1fr; }
  .scroll-arrow { width:28px; height:28px; }
  .blog-grid { grid-template-columns:1fr; }
  .app-buttons { flex-direction:column; }
  .main-home { margin-top:30px!important; }
}

@media (max-width:640px) {
  .category-items { grid-auto-columns: calc((100% - 10px) / 2); }
  .section-header-with-scroll { margin-top:12px; margin-bottom:12px; }
}

@media (max-width:480px) {
  .category-items { grid-auto-columns: calc((100% - 5px) / 2); }
  .property-images { border-radius:10px; margin-bottom:8px; }
  .property-location { font-size:13px; }
  .property-title { font-size:13px; }
  .price, .period { font-size:13px; }
  .app-download-content { grid-template-columns: 1fr; gap:60px; align-items:center; }
  .qr-code-wrapper { width:160px; height:160px; background:white; padding:12px; border-radius:12px; }
  .app-mockup img { max-width:400px; width:100%; border-radius:16px; }
}

/* About Section */
.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-text p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 16px;
}

.about-image img {
    width: 100%;
    border-radius: 16px;
}

/* Calendar - Updated with Red Selection */
.date-calendar {
    padding: 24px;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    background: white;
}

.calendar-months {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
}


.calendar-month-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    text-align: center;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day-header {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
    text-align: center;
    padding: 10px 0;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 400;
}

.calendar-day:not(.empty):not(.disabled):not(.booked):hover {
    /*background: #f7f7f7;*/
    font-weight: 600;
}

/* Red styling for selected dates */
.calendar-day.selected {
    background: #E31C5F;
    color: white;
    font-weight: 600;
}

.calendar-day.checkin {
    border-radius: 8px 0 0 8px;
}

.calendar-day.checkout {
    border-radius: 0 8px 8px 0;
}

.calendar-day.in-range {
    background: #FFE7EF;
    color: #E31C5F;
    font-weight: 500;
}

/* Booked dates styling */
.calendar-day.booked {
    color: #ddd;
    text-decoration: line-through;
    cursor: not-allowed;
    background: #f9f9f9;
}

.calendar-day.disabled {
    color: #ddd;
    cursor: not-allowed;
}

.calendar-day.empty {
    cursor: default;
}

.calendar-day.today {
    font-weight: 700;
}

.calendar-day.today::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #E31C5F;
    border-radius: 50%;
}