/* Responsive css */
@media (max-width: 768px) {
  :root {
    --section-padding: 25px;
  }

  .section {
   padding: var(--section-padding) 0;
 }

 .visible-xs {
  display: block !important;
}

.hidden-xs {
  display: none !important;
}


.title {
  font-size: 25px;
}

.sub_title {
  font-size: 16px;
}


/*common banner*/
  .common_hero {
    height: auto !important;
    min-height: 300px; 
  }

  .common_hero .item {
    height: auto !important;
    min-height: 300px !important;
  }

  .common_hero .item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; 
  }


/*banner css*/

.hero::before {
   background: none!important;
}

.common_hero::before {
   background: none!important;
}

.custom-owl-carousel {
  width: 100%!important;
  min-height: 100%!important;

}

.custom-owl-carousel .item {
  height: 300px!important;
}

.custom-owl-carousel .item img {
  height: 100%!important;
  width: 100%!important;
}

.slide-content {
  width: 71%;
  height: 100%;
  z-index: 2;
  padding: 5px 15px;
}

.slide-content p {
  font-size: 16px;

}


/*info css*/

.hero-text-section h1 {
  margin-bottom: 10px;
  font-size: 20px;
}


/*package css*/
.package-info img {
  width: 25px!important;
  height: 25px!important;
}

.package-info span .label{
  font-weight: 700;
}



 .guide-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .guide-image {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .guide-img {
        width: 100px;
        height: 100px;
    }



      .price-card {
    max-width: 100%;
    margin: var(--spacing-md) auto;
  }

  .ribbon {
    font-size: 0.85rem;
    padding: var(--spacing-xs) var(--spacing-sm);
    top: -8px;
    left: -8px;
  }

  .price-header {
    padding: var(--spacing-sm);
    margin-top: var(--spacing-sm);
  }

  .price-info {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .sidebar-buttons {
    align-items: center;
  }




}