/* ============================================================
   our_packages.html — page-specific stylesheet
   Auto-extracted from inline <style> block(s) in this page so it
   can be edited/cached separately from the markup.
   Shared/global rules (navbar, footer, floating icons, animations,
   preloader) live in css/nav_bar.css. Package-detail-page rules
   live in css/package_detail.css.
   ============================================================ */
/* Hero Section */

    .hero-section {
      background: url('../../images/pngs/places.webp') repeat center center;
      height:55vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.7);
    }

    /* Packages Section Styling */
    .packages-section {
      padding: 80px 0;
      background: linear-gradient(to bottom, #f8f9fa, #e9ecef);
    }
/* Section Title */


    .section-title {
      position: relative;
      margin-bottom: 50px;
      text-align: center;
      font-weight: 700;
    }
/* Section Title */


    .section-title:after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
      border-radius: 2px;
    }
/* Package Card */


    .package-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      height: 100%;
    }
/* Package Card (hover state) */


    .package-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    }
/* Package Image */


    .package-image {
      height: 300px;
      background-size: cover;
      background-position: center;
      position: relative;
    }
/* Package Overlay */


    .package-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
      padding: 20px 15px 15px;
      color: white;
    }
/* Package Title */


    .package-title {
      font-weight: 700;
      margin-bottom: 5px;
      font-size: 1.4rem;
    }
/* Package Content */


    .package-content {
      padding: 20px;
    }
/* Package Features */


    .package-features {
      list-style: none;
      padding: 0;
      margin-bottom: 20px;
    }
/* Package Features Li */


    .package-features li {
      margin-bottom: 8px;
      display: flex;
      align-items: center;
    }
/* Package Features I */


    .package-features i {
      color: var(--primary-color);
      margin-right: 10px;
      font-size: 14px;
    }
/* Package Price */


    .package-price {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--dark-color);
      margin-bottom: 20px;
      text-align: center;
    }
/* Btn Package */


    .btn-package {
      background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
      color: var(--dark-color);
      font-weight: 600;
      border: none;
      padding: 10px 20px;
      border-radius: 6px;
      width: 100%;
      transition: all 0.3s ease;
    }
/* Btn Package (hover state) */


    .btn-package:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(255, 140, 0, 0.4);
    }
/* Btn View More */


    .btn-view-more {
      display: block;
      margin: 50px auto 0;
      max-width: 200px;
      background: var(--dark-color);
      color: white;
      font-weight: 600;
      padding: 12px 25px;
      border-radius: 6px;
      transition: all 0.3s ease;
    }
/* Btn View More (hover state) */


    .btn-view-more:hover {
      background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
      color: var(--dark-color);
      transform: translateY(-3px);
    }