/* ==========================================================================
   COMMON CSS - Reusable styles across all pages
   Merged from css/styles.css and index.css
   ========================================================================== */

/* Force scrolling on mobile */
@media (max-width: 767px) {
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto;
    position: relative !important;
  }
}

/* ==========================================================================
   CUSTOM HEADER STYLES - Common across all pages
   ========================================================================== */

/* Nav container flex display */
.cs_main_header_right .cs_nav.cs_heading_color {
  display: flex;
  justify-content: center;
  flex: 1;
}

/* Nav list gap */
.cs_nav_list {
  gap: 30px;
}

/* Book button background color */
a.cs_btn_style_1.cs_btn_color_1[style*="background-color"] {
  background-color: #D5AB5A !important;
}

/* ==========================================================================
   MODERN FOOTER STYLES
   ========================================================================== */

/* Hide subtitle before pseudo-element */
.cs_section_subtitle::before {
  display: none !important;
}

.cs_section_subtitle {
  padding-left: 0 !important;
}

/* ==========================================================================
   MEGAMENU DROPDOWN STYLES
   ========================================================================== */

/* Parent li positioning */
.cs_hasDropdown {
  position: relative;
}

/* Nav dropdown trigger */
.cs_navDropdownTrigger {
  cursor: pointer;
  position: relative;
}

/* Megamenu wrapper */
.cs_megamenu_wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  padding: 20px;
  min-width: 480px;
  width: max-content;
  max-width: 520px;
}

/* Show megamenu on hover */
.cs_hasDropdown:hover .cs_megamenu_wrapper {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(20px);
}

/* Megamenu container */
.cs_megamenu_container {
  width: 100%;
}

/* Service cards grid - 2x2 layout */
.cs_service_cards_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

/* Individual service card - Compact */
.cs_service_card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  border-radius: 10px;
  background: #fafafa;
  transition: all 0.25s ease;
  text-decoration: none;
  border: 1px solid transparent;
  min-height: 120px;
}

.cs_service_card:hover {
  background: #ffffff;
  border-color: #D5AB5A;
  box-shadow: 0 4px 16px rgba(213, 171, 90, 0.12);
  transform: translateY(-2px);
}

/* Service card icon - Compact */
.cs_service_card_icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #D5AB5A 0%, #b8923f 100%);
  border-radius: 10px;
  margin-bottom: 12px;
  transition: all 0.25s ease;
}

.cs_service_card:hover .cs_service_card_icon {
  transform: scale(1.05);
}

.cs_service_card_icon i {
  font-size: 18px;
  color: #ffffff;
}

/* Service card title - Compact */
.cs_service_card_title {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 4px 0;
  line-height: 1.3;
  transition: color 0.25s ease;
}

.cs_service_card:hover .cs_service_card_title {
  color: #D5AB5A;
}

/* Service card description */
.cs_service_card_desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #666666;
  margin: 0;
  line-height: 1.4;
}

.cs_mobile_simple_links {
  display: none;
}

/* ==========================================================================
   RESPONSIVE STYLES - Tablet and Mobile
   ========================================================================== */

/* iPad Landscape (1024px and below) */
@media (max-width: 1024px) {
  .cs_megamenu_wrapper {
    min-width: 480px;
    padding: 16px;
  }
  
  .cs_service_cards_grid {
    gap: 10px;
  }
  
  .cs_service_card {
    padding: 14px;
  }
  
  .cs_service_card_icon {
    width: 36px;
    height: 36px;
    margin-bottom: 10px;
  }
  
  .cs_service_card_icon i {
    font-size: 16px;
  }
  
  .cs_service_card_title {
    font-size: 13px;
  }
  
  .cs_service_card_desc {
    font-size: 11px;
  }
}

/* iPad Portrait (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .cs_megamenu_wrapper {
    min-width: 420px;
    padding: 14px;
    left: 0;
    transform: translateY(20px);
  }
  
  .cs_hasDropdown:hover .cs_megamenu_wrapper {
    transform: translateY(20px);
  }
  
  .cs_service_cards_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .cs_service_card {
    padding: 12px;
  }
  
  .cs_service_card_icon {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
  }
  
  .cs_service_card_icon i {
    font-size: 14px;
  }
}

/* Mobile Devices (below 768px) */
@media (max-width: 767px) {
  /* Hide desktop megamenu on mobile */
  .cs_megamenu_wrapper {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    min-width: auto;
    background: transparent;
    margin-top: 0;
    display: none;
    overflow: hidden;
  }
  
  /* Show megamenu when parent has active class */
  .cs_hasDropdown.active > .cs_megamenu_wrapper,
  .menu-item-has-children.active > .cs_megamenu_wrapper {
    /* Let jQuery slideToggle handle display */
  }
  
  /* Simple text list for mobile - hide grid */
  .cs_service_cards_grid {
    display: none;
  }
  
  /* Mobile simple text links - use nested ul */
  .cs_megamenu_container {
    padding: 0;
  }
  
  .cs_megamenu_container > .cs_service_cards_grid::before {
    content: '';
    display: block;
  }
  
  /* Alternative simple list - add directly as nested list */
  .cs_megamenu_wrapper > .cs_megamenu_container > .cs_service_cards_grid > .cs_service_card {
    display: none;
  }
  
  /* Simple text dropdown - show title only as text links */
  .cs_hasDropdown .cs_megamenu_wrapper::before {
    content: '';
    display: block;
  }
  
  /* Show simple text links instead of cards on mobile */
  .cs_mobile_simple_links {
    display: block;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  .cs_mobile_simple_links li {
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  
  .cs_mobile_simple_links li:last-child {
    border-bottom: none;
  }
  
  .cs_mobile_simple_links a {
    display: block;
    padding: 14px 16px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  
  .cs_mobile_simple_links a:hover {
    color: #D5AB5A;
    padding-left: 20px;
  }
  
  /* Show simple links on mobile when dropdown is active */
  .cs_hasDropdown.active .cs_mobile_simple_links,
  .menu-item-has-children.active .cs_mobile_simple_links {
    /* Let jQuery slideToggle handle this inside wrapper */
  }
  
  /* Hide service cards on mobile */
  .cs_hasDropdown .cs_service_cards_grid,
  .menu-item-has-children .cs_service_cards_grid {
    display: none;
  }
}

/* Apply to any screen size where mobile menu is active */
@media (max-width: 1199px) {
  /* Dropdown toggle button styling */
  .cs_munu_dropdown_toggle {
    display: block;
    width: 44px;
    height: 44px;
    position: absolute;
    right: 0;
    top: 4px;
    transform: none;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    left: auto;
  }
  
  .cs_munu_dropdown_toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    background: #333;
    transform: translate(-50%, -50%);
  }
  
  .cs_munu_dropdown_toggle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 12px;
    background: #333;
    transform: translate(-50%, -50%);
  }
  
  .cs_munu_dropdown_toggle.active::after {
    display: none;
  }
  
  /* Reset the inner span from style.css */
  .cs_munu_dropdown_toggle span {
    display: none !important;
  }
}

/* ==========================================================================
   COMMON UTILITY STYLES
   ========================================================================== */

/* Header Styles */
.cs_main_header_right .cs_nav {
  display: flex;
  justify-content: center;
  flex: 1;
}

.cs_main_header_right .cs_nav_list {
  gap: 30px;
}

.cs_btn_style_1.cs_btn_color_1.gold-btn {
  background-color: #D5AB5A;
}

/* Banner Video */
.mobile-banner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Value Card Divider */
.cs_value_card_divider {
  height: 1px;
  background: #141F4C;
  opacity: 0.1;
  margin: 1.5rem 0;
  border-radius: 2px;
}

/* Marquee Card Meta */
.cs_mq_meta {
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
  color: #888;
}

/* Custom Nav Styles */
.cs-nav-custom {
  display: flex;
  justify-content: center;
  flex: 1;
}

.cs-nav-list-custom {
  gap: 30px;
}

/* Gold Button - Default state same as hover */
.cs-btn-gold {
  background-color: #D5AB5A !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
}

.cs-btn-gold:hover {
  background-color: #D5AB5A !important;
  border-color: #D5AB5A !important;
  color: #141F4C !important;
  box-shadow: none !important;
  transform: none !important;
}

.cs-btn-gold:hover img,
.cs-btn-gold:hover svg {
  transform: none !important;
  filter: none !important;
}

.cs-btn-gold::before {
  display: none !important;
}

/* Polished Price Tag Styling */
.cs_card_price_tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #D5AB5A 0%, #B88A44 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 20px;
  letter-spacing: 1.5px;
  box-shadow: 0 8px 15px rgba(213, 171, 90, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.cs_card_price_tag i {
  font-size: 10px;
  opacity: 0.9;
}

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

.cs_value_card_style_1:hover .cs_card_price_tag::before {
  left: 100%;
}

.cs_value_card_style_1:hover .cs_card_price_tag {
  background: linear-gradient(135deg, #141F4C 0%, #1e2d63 100%);
  box-shadow: 0 10px 20px rgba(20, 31, 76, 0.3);
  transform: translateY(-3px) scale(1.02);
}

/* Inquiry Form Submit Button */
.cs_inquiry_submit {
  background-color: #16214D;
}

/* Clock Icon */
.fas.fa-clock {
  margin-right: 5px;
}

/* Arrow Right Icon */
.fas.fa-arrow-right {
  transition: transform 0.3s ease;
}

/* ==========================================================================
   ADDITIONAL COMMON STYLES
   ========================================================================== */

/* CTA Image Section */
.cta-image-section {
}

.cta-image-section img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 991px) {
  .cta-image-section {
    padding: 40px 0;
  }
}

@media (max-width: 767px) {
  .cta-image-section {
    padding: 30px 0;
  }
}

/* Mobile Marquee */
.packages-marquee {
  display: none;
}

@media (max-width: 991px) {
  .popular-packages {
    padding: 60px 0;
  }
}

@media (max-width: 767px) {
  .popular-packages {
    padding: 40px 0;
  }
  .popular-packages .cs_section_title_style_1 {
    font-size: 28px !important;
  }
  .popular-packages .cs_section_subtitle {
    font-size: 18px !important;
  }
  .popular-packages .row.popular-packages-scroll {
    display: none !important;
  }
  .popular-packages .packages-marquee {
    display: block !important;
  }
}

/* Popular Packages Section */
.popular-packages {
  background-color: #F4F0ED;
  padding: 80px 0;
}

.section-header.text-center {
  margin-bottom: 50px;
}

.section-header .cs_section_subtitle {
  font-weight: 600;
}

.section-header .cs_section_title_style_1 {
  color: #1a1a1a;
}

/* Package Card */
.package-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  height: 100%;
}

.package-image {
  position: relative;
}

.package-image img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.package-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #141F4C;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

.package-content {
  padding: 25px;
}

.package-content h3 {
  font-size: 24px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 15px;
}

.package-content p {
  color: #666666;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.package-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.package-meta span:first-child {
  font-size: 14px;
  color: #888;
}

.package-meta span:last-child {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
}

/* Book Now Button */
.btn-book-now {
  display: inline-block;
  width: 100%;
  text-align: center;
  background: #141F4C;
  color: #ffffff;
  padding: 14px 24px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all 0.3s ease;
}

/* View All Packages Button */
.view-all-packages {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: #1a1a1a;
  padding: 16px 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  border: 2px solid #1a1a1a;
  transition: all 0.3s ease;
}

.view-all-packages i {
  transition: transform 0.3s ease;
}

/* Package Card Hover */
.popular-packages .package-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.popular-packages .btn-book-now:hover {
  background: #333333 !important;
}

.popular-packages .view-all-packages:hover {
  background: #1a1a1a;
  color: #ffffff !important;
}

.popular-packages .view-all-packages:hover i {
  transform: translateX(5px);
}

/* Packages Marquee - Mobile Only Auto-Scroll */
@media (max-width: 767px) {
  .packages-marquee {
    display: none;
    overflow: hidden;
    padding: 20px 0;
  }
  
  .packages-marquee::before,
  .packages-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
  }
  
  .packages-marquee::before {
    left: 0;
    background: transparent;
  }
  
  .packages-marquee::after {
    right: 0;
    background: transparent;
  }
  
  .packages-marquee-wrapper {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: packagesMarquee 25s linear infinite;
    cursor: grab;
  }
  
  .packages-marquee-card {
    flex: 0 0 280px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  }
  
  .packages-marquee-card .package-image {
    position: relative;
  }
  
  .packages-marquee-card .package-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
  }
  
  .packages-marquee-card .package-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #141F4C;
    color: #ffffff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
  }
  
  .packages-marquee-card .package-content {
    padding: 20px;
  }
  
  .packages-marquee-card .package-content h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
  }
  
  .packages-marquee-card .package-content p {
    color: #666666;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
  }
  
  .packages-marquee-card .package-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-top: 10px;
    border-top: 1px solid #eee;
  }
  
  .packages-marquee-card .package-meta span:first-child {
    font-size: 12px;
    color: #888;
  }
  
  .packages-marquee-card .package-meta span:last-child {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
  }
  
  .packages-marquee-card .btn-book-now {
    display: block;
    width: 100%;
    text-align: center;
    background: #141F4C;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
  }
  
  @keyframes packagesMarquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

/* ==========================================================================
    MOBILE MENU TOGGLE VISIBILITY FIX
    ========================================================================== */
/* Only show hamburger toggle at mobile breakpoint (768px) */
@media (max-width: 768px) {
  .cs_site_header.cs_style_1 .cs_menu_toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999 !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
  }
  
  /* Hamburger container */
  .cs_site_header.cs_style_1 .cs_menu_toggle .hamburger {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 18px !important;
    position: relative !important;
  }
  
  /* Each line */
  .cs_site_header.cs_style_1 .cs_menu_toggle .hamburger span {
    display: block !important;
    position: absolute !important;
    width: 20px !important;
    height: 2px !important;
    background: #141F4C !important;
    border-radius: 1px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    transition: all 0.3s ease !important;
    margin: 0 !important;
  }
  
  .cs_site_header.cs_style_1 .cs_menu_toggle .hamburger span:nth-child(1) {
    top: 2px !important;
  }
  
  .cs_site_header.cs_style_1 .cs_menu_toggle .hamburger span:nth-child(2) {
    top: 50% !important;
    transform: translateX(-50%) translateY(-50%) !important;
  }
  
  .cs_site_header.cs_style_1 .cs_menu_toggle .hamburger span:nth-child(3) {
    bottom: 2px !important;
  }
  
  /* Open state - X icon */
  .cs_site_header.cs_style_1 .cs_menu_toggle.cs_toggle_active .hamburger span:nth-child(1) {
    top: 50% !important;
    transform: translateX(-50%) translateY(-50%) rotate(45deg) !important;
  }
  
  .cs_site_header.cs_style_1 .cs_menu_toggle.cs_toggle_active .hamburger span:nth-child(2) {
    opacity: 0 !important;
    transform: translateX(-50%) translateY(-50%) scale(0) !important;
  }
  
  .cs_site_header.cs_style_1 .cs_menu_toggle.cs_toggle_active .hamburger span:nth-child(3) {
    bottom: 50% !important;
    transform: translateX(-50%) translateY(50%) rotate(-45deg) !important;
  }
  
  .cs_site_header.cs_style_1 .cs_main_header_right {
    padding-right: 44px !important;
  }
}

/* Desktop - hide toggle */
@media (min-width: 769px) {
  .cs_site_header.cs_style_1 .cs_menu_toggle {
    display: none !important;
  }
}

/* ==========================================================================
    MODERN CONTACT PAGE STYLES
    ========================================================================== */

/* Hero Section */
.cs_contact_hero {
  position: relative;
  padding: 140px 0 80px;
  background: linear-gradient(135deg, #141F4C 0%, #1e2d63 50%, #2a3f6f 100%);
  overflow: visible;
}

.cs_contact_hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="rgba(255,255,255,0.1)"/></svg>');
  background-size: 30px 30px;
  opacity: 0.5;
}

.cs_contact_hero::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(213, 171, 90, 0.15) 0%, transparent 70%);
  border-radius: 50%;
}

.cs_hero_overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(20, 31, 76, 0.9) 0%, rgba(20, 31, 76, 0.7) 100%);
}

.cs_contact_hero_content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
}

.cs_contact_hero_content * {
  overflow: visible !important;
}

.cs_contact_badge {
  display: inline-block;
  background: rgba(213, 171, 90, 0.2);
  color: #D5AB5A;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
  border: 1px solid rgba(213, 171, 90, 0.3);
}

.cs_contact_hero_title {
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
  line-height: 1.2;
  white-space: normal;
  overflow: visible;
}

.cs_contact_hero_text {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  margin-bottom: 30px;
}

.cs_contact_hero_breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 15px;
}

.cs_contact_hero_breadcrumb a {
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.3s ease;
}

.cs_contact_hero_breadcrumb a:hover {
  color: #D5AB5A;
}

.cs_contact_hero_breadcrumb .separator {
  color: rgba(255, 255, 255, 0.5);
}

.cs_contact_hero_breadcrumb .current {
  color: #D5AB5A;
}

/* Contact Section */
.cs_contact_section {
  padding: 80px 0;
  background: #ffffff;
}

/* Contact Cards - New Design */
.cs_contact_cards_wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}

.cs_contact_card {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  text-decoration: none;
  overflow: hidden;
  transition: all 0.35s ease;
}

.cs_contact_card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #D5AB5A;
  transform: scaleY(0);
  transition: transform 0.35s ease;
}

.cs_contact_card:hover::before {
  transform: scaleY(1);
}

.cs_contact_card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  border-color: #D5AB5A;
}

.cs_card_visual {
  width: 52px;
  height: 52px;
  min-width: 52px;
  background: linear-gradient(135deg, #141F4C 0%, #1e2d63 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.cs_card_visual::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(213, 171, 90, 0.3) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.cs_contact_card:hover .cs_card_visual::after {
  opacity: 1;
}

.cs_card_visual i {
  font-size: 20px;
  color: #D5AB5A;
  position: relative;
  z-index: 1;
}

.cs_card_info {
  flex: 1;
}

.cs_card_label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.cs_card_info h3 {
  font-size: 15px;
  font-weight: 700;
  color: #141F4C;
  margin: 0;
  line-height: 1.3;
}

.cs_card_action {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: #f5f5f5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s ease;
}

.cs_card_action i {
  font-size: 12px;
  color: #141F4C;
  transition: transform 0.35s ease;
}

.cs_contact_card:hover .cs_card_action {
  background: #D5AB5A;
}

.cs_contact_card:hover .cs_card_action i {
  color: #141F4C;
  transform: translateX(3px);
}

/* Location & Hours cards (not clickable) */
.cs_location_card,
.cs_hours_card {
  cursor: default;
}

.cs_location_card::before,
.cs_hours_card::before {
  display: none;
}

.cs_location_card:hover,
.cs_hours_card:hover {
  transform: none;
}

/* Contact Content Wrapper */
.cs_contact_content_wrapper {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 50px;
  align-items: start;
}

/* Form Styles */
.cs_contact_form_wrapper {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.cs_form_header {
  margin-bottom: 35px;
}

.cs_form_header h2 {
  font-size: 28px;
  font-weight: 700;
  color: #141F4C;
  margin-bottom: 10px;
}

.cs_form_header p {
  font-size: 15px;
  color: #666;
  margin: 0;
}

.cs_contact_form .cs_form_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.cs_form_group {
  margin-bottom: 20px;
}

.cs_form_group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #141F4C;
  margin-bottom: 8px;
}

.cs_form_field {
  width: 100%;
  padding: 14px 18px;
  font-size: 15px;
  font-family: 'DM Sans', sans-serif;
  color: #333;
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.cs_form_field:focus {
  outline: none;
  background: #ffffff;
  border-color: #D5AB5A;
  box-shadow: 0 4px 15px rgba(213, 171, 90, 0.1);
}

.cs_form_field::placeholder {
  color: #999;
}

select.cs_form_field {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

.cs_submit_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 36px;
  background: linear-gradient(135deg, #D5AB5A 0%, #b8923f 100%);
  color: #141F4C;
  font-size: 16px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  margin-top: 10px;
}

.cs_submit_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(213, 171, 90, 0.3);
}

.cs_submit_btn i {
  font-size: 16px;
}

.cs_form_status {
  margin-top: 15px;
  font-size: 14px;
  text-align: center;
}

/* Sidebar */
.cs_contact_sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cs_sidebar_card {
  background: #ffffff;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.cs_sidebar_card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #141F4C;
  margin-bottom: 15px;
}

.cs_sidebar_card p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 0;
}

.cs_sidebar_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #D5AB5A;
  margin-top: 15px;
  transition: gap 0.3s ease;
}

.cs_sidebar_link:hover {
  gap: 12px;
}

.cs_sidebar_link i {
  font-size: 12px;
}

/* Social Card */
.cs_social_links {
  display: flex;
  gap: 12px;
}

.cs_social_link {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
  border-radius: 10px;
  color: #141F4C;
  font-size: 18px;
  transition: all 0.3s ease;
}

.cs_social_link:hover {
  background: #141F4C;
  color: #D5AB5A;
  transform: translateY(-3px);
}

/* CTA Card */
.cs_cta_card {
  background: linear-gradient(135deg, #141F4C 0%, #1e2d63 100%);
  border: none;
}

.cs_cta_card h3 {
  color: #ffffff;
}

.cs_cta_card p {
  color: rgba(255, 255, 255, 0.75);
}

.cs_cta_icon {
  width: 50px;
  height: 50px;
  background: rgba(213, 171, 90, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.cs_cta_icon i {
  font-size: 22px;
  color: #D5AB5A;
}

.cs_cta_phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: #D5AB5A;
  margin-top: 15px;
  transition: color 0.3s ease;
}

.cs_cta_phone:hover {
  color: #ffffff;
}

.cs_cta_phone i {
  font-size: 16px;
}

/* Map Section */
.cs_map_section {
  padding-bottom: 80px;
}

.cs_map_wrapper {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
}

.cs_map_wrapper iframe {
  display: block;
}

/* Responsive Styles */
@media (max-width: 1199px) {
  .cs_contact_hero {
    padding: 120px 0 60px;
  }
  
  .cs_contact_hero_title {
    font-size: 46px;
  }
  
  .cs_contact_cards_wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .cs_contact_content_wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .cs_contact_sidebar {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .cs_sidebar_card {
    flex: 1;
    min-width: 280px;
  }
}

@media (max-width: 767px) {
  .cs_contact_hero {
    padding: 100px 0 50px;
  }
  
  .cs_contact_hero_title {
    font-size: 36px;
  }
  
  .cs_contact_hero_text {
    font-size: 16px;
  }
  
  .cs_contact_cards_wrapper {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
  }
  
  .cs_contact_card {
    padding: 22px 20px;
    flex-direction: row;
    text-align: left;
    align-items: center;
    gap: 16px;
  }
  
  .cs_card_visual {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
  }
  
  .cs_card_visual i {
    font-size: 18px;
  }
  
  .cs_card_info h3 {
    font-size: 14px;
  }
  
  .cs_card_action {
    display: none;
  }
  
  .cs_contact_form_wrapper {
    padding: 30px 20px;
  }
  
  .cs_form_header h2 {
    font-size: 24px;
  }
  
  .cs_contact_form .cs_form_row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .cs_sidebar_card {
    min-width: 100%;
  }
  
  .cs_sidebar_card.cs_cta_card {
    text-align: center;
  }
  
  .cs_cta_icon {
    margin: 0 auto 20px;
  }
  
  .cs_map_wrapper iframe {
    height: 300px;
  }
}

/* ==========================================================================
    ABOUT PAGE STYLES
    ========================================================================== */

/* About Intro Section */
.cs_about_intro_section {
  padding: 80px 0;
  background: #ffffff;
}

.cs_about_intro_wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.cs_about_intro_image {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.cs_about_intro_image img {
  width: 100%;
  height: 450px;
  object-fit: cover;
}

.cs_about_intro_badge {
  position: absolute;
  bottom: 30px;
  left: 30px;
  background: #141F4C;
  padding: 20px 28px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 30px rgba(20, 31, 76, 0.3);
}

.cs_badge_number {
  font-size: 32px;
  font-weight: 700;
  color: #D5AB5A;
  line-height: 1;
}

.cs_badge_text {
  font-size: 13px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 5px;
}

.cs_about_intro_content {
  padding: 20px 0;
}

.cs_about_label {
  display: inline-block;
  background: rgba(213, 171, 90, 0.15);
  color: #D5AB5A;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.cs_about_title {
  font-size: 38px;
  font-weight: 700;
  color: #141F4C;
  line-height: 1.2;
  margin-bottom: 24px;
}

.cs_about_text {
  font-size: 16px;
  color: #666;
  line-height: 1.8;
  margin-bottom: 20px;
}

.cs_about_features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 30px 0;
}

.cs_feature_item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cs_feature_item i {
  color: #D5AB5A;
  font-size: 18px;
}

.cs_feature_item span {
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.cs_about_btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #D5AB5A 0%, #b8923f 100%);
  color: #141F4C;
  padding: 16px 32px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 20px;
  transition: all 0.3s ease;
}

.cs_about_btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(213, 171, 90, 0.3);
  gap: 16px;
}

.cs_about_btn i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

/* Stats Section */
.cs_stats_section {
  padding: 60px 0;
  background: linear-gradient(135deg, #141F4C 0%, #1e2d63 100%);
}

.cs_stats_wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.cs_stat_item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.cs_stat_item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-5px);
}

.cs_stat_icon {
  width: 60px;
  height: 60px;
  min-width: 60px;
  background: rgba(213, 171, 90, 0.2);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cs_stat_icon i {
  font-size: 24px;
  color: #D5AB5A;
}

.cs_stat_content {
  display: flex;
  flex-direction: column;
}

.cs_stat_number {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
}

.cs_stat_label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 5px;
}

/* Why Choose Us Section */
.cs_why_choose_section {
  padding: 100px 0;
  background: #f8f9fa;
}

.cs_section_header {
  max-width: 900px;
  margin: 0 auto 60px;
  text-align: center;
  overflow: visible;
}

.cs_section_header * {
  overflow: visible !important;
}

.cs_section_badge {
  display: inline-block;
  background: rgba(213, 171, 90, 0.15);
  color: #D5AB5A;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.cs_section_header .cs_section_title {
  font-size: 40px;
  font-weight: 700;
  color: #141F4C;
  margin-bottom: 16px;
  line-height: 1.2;
}

.cs_section_header .cs_section_subtitle {
  font-size: 17px;
  color: #666;
  line-height: 1.7;
  white-space: nowrap;
  overflow: visible;
}

.cs_section_header {
  max-width: 900px;
  margin: 0 auto 60px;
  text-align: center;
  overflow: visible;
}

.cs_section_header * {
  overflow: visible !important;
}

@media (max-width: 767px) {
  .cs_section_header .cs_section_subtitle {
    font-size: 15px;
    white-space: normal;
  }
}

.cs_why_choose_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.cs_why_choose_card {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.35s ease;
}

.cs_why_choose_card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: #D5AB5A;
}

.cs_choose_card_icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 25px;
  background: linear-gradient(135deg, #141F4C 0%, #1e2d63 100%);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s ease;
}

.cs_why_choose_card:hover .cs_choose_card_icon {
  background: linear-gradient(135deg, #D5AB5A 0%, #b8923f 100%);
}

.cs_choose_card_icon i {
  font-size: 28px;
  color: #D5AB5A;
  transition: color 0.35s ease;
}

.cs_why_choose_card:hover .cs_choose_card_icon i {
  color: #141F4C;
}

.cs_why_choose_card h3 {
  font-size: 20px;
  font-weight: 700;
  color: #141F4C;
  margin-bottom: 12px;
}

.cs_why_choose_card p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin: 0;
}

/* Services Preview Section */
.cs_services_preview_section {
  padding: 100px 0;
  background: #ffffff;
}

.cs_services_preview_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 50px;
}

.cs_service_preview_card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: #141F4C;
  display: block;
  text-decoration: none;
}

.cs_service_preview_image {
  position: relative;
  height: 320px;
  overflow: hidden;
}

.cs_service_preview_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.cs_service_preview_card:hover .cs_service_preview_image img {
  transform: scale(1.1);
}

.cs_service_preview_overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(20, 31, 76, 0.3) 0%, rgba(20, 31, 76, 0.9) 100%);
}

.cs_service_preview_content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  z-index: 1;
}

.cs_service_preview_icon {
  width: 50px;
  height: 50px;
  background: rgba(213, 171, 90, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.cs_service_preview_icon i {
  font-size: 22px;
  color: #D5AB5A;
}

.cs_service_preview_content h3 {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}

.cs_service_preview_content p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 15px;
  line-height: 1.6;
}

.cs_service_preview_link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #D5AB5A;
  transition: gap 0.3s ease;
}

.cs_service_preview_card:hover .cs_service_preview_link {
  gap: 12px;
}

.cs_service_preview_link i {
  font-size: 12px;
}

.cs_services_preview_cta {
  text-align: center;
}

.cs_btn_outline {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  color: #141F4C;
  padding: 16px 32px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  border: 2px solid #141F4C;
  transition: all 0.3s ease;
}

.cs_btn_outline:hover {
  background: #141F4C;
  color: #ffffff;
  gap: 16px;
}

/* CTA Section */
.cs_cta_section {
  padding: 80px 0;
  background: #f8f9fa;
}

.cs_cta_box {
  position: relative;
  background: linear-gradient(135deg, #141F4C 0%, #1e2d63 100%);
  border-radius: 24px;
  padding: 60px;
  overflow: hidden;
}

.cs_cta_content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.cs_cta_badge {
  display: inline-block;
  background: rgba(213, 171, 90, 0.2);
  color: #D5AB5A;
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.cs_cta_content h2 {
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.2;
}

.cs_cta_content p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  margin-bottom: 30px;
}

.cs_cta_buttons {
  display: flex;
  gap: 16px;
}

.cs_cta_primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #D5AB5A;
  color: #141F4C;
  padding: 16px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.cs_cta_primary:hover {
  background: #ffffff;
  transform: translateY(-2px);
}

.cs_cta_primary i {
  font-size: 14px;
}

.cs_cta_secondary {
  display: inline-flex;
  align-items: center;
  padding: 16px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.cs_cta_secondary:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.cs_cta_decoration {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  pointer-events: none;
}

.cs_cta_circle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213, 171, 90, 0.2) 0%, transparent 70%);
}

.cs_cta_circle_1 {
  width: 400px;
  height: 400px;
  top: -100px;
  right: -100px;
}

.cs_cta_circle_2 {
  width: 300px;
  height: 300px;
  bottom: -80px;
  right: 100px;
}

/* About Page Responsive */
@media (max-width: 1199px) {
  .cs_about_intro_wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .cs_about_intro_image img {
    height: 400px;
  }
  
  .cs_stats_wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .cs_why_choose_grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .cs_services_preview_grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Mobile Slider Styles - Auto scroll on mobile only */
@media (max-width: 767px) {
  /* Ensure parent sections have proper overflow */
  .cs_why_choose_section,
  .cs_services_preview_section,
  .at-services,
  .at-features,
  .pt-tours-section,
  .north-island-attractions,
  .cs_fleet_section {
    overflow: hidden;
  }

  /* Why Choose Us - Mobile Slider */
  .cs_why_choose_grid {
    display: block !important;
    padding: 0 15px;
    overflow: visible !important;
  }
  
  .cs_why_choose_grid.slick-slider {
    overflow: visible !important;
  }
  
  .cs_why_choose_grid .slick-list {
    overflow: visible !important;
  }
  
  .cs_why_choose_grid .slick-track {
    display: flex;
    flex-wrap: nowrap;
  }
  
  .cs_why_choose_grid .cs_why_choose_card {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
    padding: 30px 20px;
  }
  
  /* Services Preview - Mobile Slider */
  .cs_services_preview_grid {
    display: block !important;
    padding: 0 15px;
    overflow: visible !important;
  }
  
  .cs_services_preview_grid.slick-slider {
    overflow: visible !important;
  }
  
  .cs_services_preview_grid .slick-list {
    overflow: visible !important;
  }
  
  .cs_services_preview_grid .slick-track {
    display: flex;
    flex-wrap: nowrap;
  }
  
  .cs_services_preview_grid .cs_service_preview_card {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
  }
  
  /* Slick Slider Mobile Overrides */
  .cs_why_choose_grid.slick-initialized,
  .cs_services_preview_grid.slick-initialized {
    display: block !important;
  }
  
  .slick-slider {
    overflow: visible !important;
  }
  
  .slick-list {
    overflow: visible !important;
    padding: 0 !important;
  }
  
  .slick-track {
    display: flex !important;
  }
  
  .slick-slide {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0;
    margin: 0 !important;
  }
  
  .slick-slide > div {
    padding: 0 0;
  }

  /* Airport Transfer Grid */
  .at-transfer-grid {
    display: block !important;
    padding: 0 15px;
  }
  
  .at-transfer-grid.slick-slider {
    overflow: visible !important;
  }
  
  .at-transfer-grid .slick-track {
    display: flex;
    flex-wrap: nowrap;
  }
  
  .at-transfer-grid .at-transfer-card {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
    padding: 30px 20px;
  }

  /* Airport Features Grid */
  .at-features-grid {
    display: block !important;
    padding: 0 15px;
  }
  
  .at-features-grid.slick-slider {
    overflow: visible !important;
  }
  
  .at-features-grid .slick-track {
    display: flex;
    flex-wrap: nowrap;
  }
  
  .at-features-grid .at-feature-card {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
    padding: 25px 20px;
  }

  /* Private Tours Grid */
  .pt-tour-grid {
    display: block !important;
    padding: 0 15px;
  }
  
  .pt-tour-grid.slick-slider {
    overflow: visible !important;
  }
  
  .pt-tour-grid .slick-track {
    display: flex;
    flex-wrap: nowrap;
  }
  
  .pt-tour-grid .pt-tour-card {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
  }

  /* Attractions Grid */
  .attractions-grid {
    display: block !important;
    padding: 0 15px;
  }
  
  .attractions-grid.slick-slider {
    overflow: visible !important;
  }
  
  .attractions-grid .slick-track {
    display: flex;
    flex-wrap: nowrap;
  }
  
  .attractions-grid .attraction-card {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
  }

  /* Fleet Grid */
  .cs_fleet_grid {
    display: block !important;
    padding: 0 15px;
  }
  
  .cs_fleet_grid.slick-slider {
    overflow: visible !important;
  }
  
  .cs_fleet_grid .slick-track {
    display: flex;
    flex-wrap: nowrap;
  }
  
  .cs_fleet_grid .cs_fleet_card {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
  }

  /* Ensure cards have full width with no text clipping */
  .cs_why_choose_card,
  .cs_service_preview_card,
  .at-transfer-card,
  .at-feature-card,
  .pt-tour-card,
  .attraction-card,
  .cs_fleet_card {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }
  
  .cs_why_choose_card *,
  .cs_service_preview_card *,
  .at-transfer-card *,
  .at-feature-card *,
  .pt-tour-card *,
  .attraction-card *,
  .cs_fleet_card * {
    overflow: visible !important;
  }
  
  /* Slider Navigation Dots */
  .slick-dots {
    display: flex !important;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
  }
  
  .slick-dots li {
    margin: 0;
  }
  
  .slick-dots li button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(20, 31, 76, 0.2);
    text-indent: -9999px;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .slick-dots li.slick-active button {
    background: #D5AB5A;
    width: 30px;
    border-radius: 5px;
  }
  
  /* Slider Arrow Styles */
  .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: #141F4C;
    font-size: 18px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  
  .slick-arrow:hover {
    background: #141F4C;
    color: #D5AB5A;
  }
  
  .slick-prev {
    left: -10px;
  }
  
  .slick-next {
    right: -10px;
  }
  
  /* Arrow visibility */
  .slick-arrow {
    opacity: 0.7;
  }
  
  .slick-arrow:hover {
    opacity: 1;
  }
  
  /* Custom Slick Arrow Styles for Mobile Sliders */
  .slick-slider .slick-prev,
  .slick-slider .slick-next {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: #ffffff;
    color: #141F4C;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .slick-slider .slick-prev {
    left: 5px;
  }

  .slick-slider .slick-next {
    right: 5px;
  }

  .slick-slider .slick-prev:hover,
  .slick-slider .slick-next:hover {
    background: #141F4C;
    color: #D5AB5A;
  }

  .slick-slider .slick-prev::before,
  .slick-slider .slick-next::before {
    display: none;
  }

  /* Slick dots container */
  .slick-slider {
    position: relative;
  }

  /* Ensure proper spacing for slider containers */
  .cs_why_choose_grid.slick-slider,
  .cs_services_preview_grid.slick-slider,
  .at-transfer-grid.slick-slider,
  .at-features-grid.slick-slider,
  .pt-tour-grid.slick-slider,
  .attractions-grid.slick-slider,
  .cs_fleet_grid.slick-slider {
    padding: 0 20px;
  }

  /* Hide arrows on smaller screens */
  @media (max-width: 480px) {
    .slick-slider .slick-prev,
    .slick-slider .slick-next {
      display: none !important;
    }
  }
}

@media (max-width: 767px) {
  .cs_about_intro_section {
    padding: 60px 0;
  }
  
  .cs_about_intro_image img {
    height: 300px;
  }
  
  .cs_about_intro_badge {
    bottom: 20px;
    left: 20px;
    padding: 15px 20px;
  }
  
  .cs_badge_number {
    font-size: 26px;
  }
  
  .cs_about_title {
    font-size: 28px;
  }
  
  .cs_about_features {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .cs_stats_wrapper {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .cs_stat_item {
    padding: 24px;
  }
  
  .cs_stat_number {
    font-size: 28px;
  }
  
  .cs_why_choose_section {
    padding: 60px 0;
  }
  
  .cs_section_header {
    margin-bottom: 40px;
  }
  
  .cs_section_header .cs_section_title {
    font-size: 28px;
  }
  
  .cs_why_choose_grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .cs_why_choose_card {
    padding: 30px 24px;
  }
  
  .cs_services_preview_section {
    padding: 60px 0;
  }
  
  .cs_service_preview_image {
    height: 280px;
  }
  
  .cs_cta_section {
    padding: 60px 0;
  }
  
  .cs_cta_box {
    padding: 40px 24px;
  }
  
  .cs_cta_content h2 {
    font-size: 26px;
  }
  
  .cs_cta_buttons {
    flex-direction: column;
  }
  
  .cs_cta_primary,
  .cs_cta_secondary {
    width: 100%;
    justify-content: center;
  }

  /* Mobile Grid Sliders - Shared Styles */
  .at-transfer-grid,
  .at-features-grid,
  .pt-tour-grid,
  .attractions-grid,
  .cs_fleet_grid {
    display: block !important;
    padding: 0 15px;
  }

  .at-transfer-grid.slick-initialized,
  .at-features-grid.slick-initialized,
  .pt-tour-grid.slick-initialized,
  .attractions-grid.slick-initialized,
  .cs_fleet_grid.slick-initialized {
    display: block !important;
  }
}

/* ==========================================================================
    MOBILE RESPONSIVE FIXES
========================================================================== */
@media (max-width: 767px) {
  /* Base reset - minimal to allow scrolling */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Enable touch scrolling */
  body {
    touch-action: auto;
  }

  /* Viewport meta fix */
  @viewport {
    width: device-width;
    zoom: 1.0;
  }

  @-ms-viewport {
    width: device-width;
  }

  .container {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: auto;
    margin-right: auto;
  }

  .row {
    display: block;
    margin-left: -8px;
    margin-right: -8px;
  }

  .row::after {
    content: "";
    display: table;
    clear: both;
  }

  /* Section */
  section {
    padding: 50px 0;
    width: 100%;
  }

  /* Main wrapper */
  .cs_main_header,
  .cs_main_header_in {
    width: 100%;
    max-width: 100%;
  }

  /* Contact hero section */
  .cs_contact_hero {
    width: 100%;
    max-width: 100%;
    padding: 100px 16px 50px;
    position: relative;
    display: block;
  }

  .cs_contact_hero_content {
    width: 100%;
    max-width: 100%;
    padding: 20px 0;
    display: block;
  }

  .cs_contact_hero_title {
    font-size: 26px;
    line-height: 1.3;
    white-space: normal;
    word-wrap: break-word;
    display: block;
  }

  .cs_contact_hero_text {
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
  }

  /* Cards */
  .cs_why_choose_card,
  .cs_service_preview_card,
  .at-transfer-card,
  .at-feature-card {
    width: 100%;
    max-width: 100%;
    margin-bottom: 12px;
    padding: 16px;
    display: block;
    overflow: visible;
  }

  /* Slick slider mobile */
  .slick-list {
    overflow: visible !important;
  }

  .slick-track {
    display: block;
  }

  .slick-slide {
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .slick-dots {
    display: flex;
    justify-content: center;
    padding: 20px 0;
  }

  /* Make sure preloader doesn't block scrolling */
  .cs_preloader {
    display: none !important;
    visibility: hidden;
  }

  /* Clear floats */
  .row::after {
    content: "";
    display: table;
    clear: both;
  }

  /* Column fixes */
  .col-12,
  [class*="col-"] {
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;
    float: none;
  }

  /* Fix any remaining overflow issues */
  section, article, main, header {
    max-width: 100%;
  }

  /* ----------------------
     BASE CARD STYLES
     ---------------------- */
  .cs_why_choose_card,
  .cs_service_preview_card,
  .at-transfer-card,
  .at-feature-card,
  .pt-tour-card,
  .attraction-card,
  .cs_fleet_card,
  .cs_contact_card,
  .cs_booking_card,
  .cs_car_card,
  .package-card,
  .packages-marquee-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
    padding: 16px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
    word-wrap: break-word;
    hyphens: auto;
  }

  /* Remove last margin */
  .cs_why_choose_card:last-child,
  .cs_service_preview_card:last-child,
  .at-transfer-card:last-child,
  .at-feature-card:last-child,
  .pt-tour-card:last-child,
  .attraction-card:last-child,
  .cs_fleet_card:last-child,
  .cs_contact_card:last-child,
  .cs_booking_card:last-child,
  .cs_car_card:last-child,
  .package-card:last-child,
  .packages-marquee-card:last-child {
    margin-bottom: 0 !important;
  }

  /* ----------------------
     CARD CONTENT ALIGNMENT
     ---------------------- */
  .cs_why_choose_card,
  .at-transfer-card,
  .at-feature-card {
    text-align: left;
  }

  .cs_why_choose_card > *,
  .cs_service_preview_card > *,
  .at-transfer-card > *,
  .at-feature-card > *,
  .pt-tour-card > *,
  .attraction-card > *,
  .cs_fleet_card > * {
    max-width: 100%;
  }

  /* ----------------------
     CARD IMAGES
     ---------------------- */
  .cs_why_choose_card img,
  .at-transfer-card img,
  .at-feature-card img,
  .pt-tour-card img,
  .attraction-card img,
  .cs_fleet_card img,
  .package-card img,
  .packages-marquee-card img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover;
    border-radius: 8px !important;
  }

  .cs_service_preview_image img {
    width: 100% !important;
    height: 200px !important;
  }

  .cs_service_preview_image {
    height: 200px !important;
  }

  .package-image img {
    width: 100% !important;
    height: 180px !important;
  }

  /* ----------------------
     CARD ICONS
     ---------------------- */
  .cs_choose_card_icon,
  .at-transfer-icon,
  .at-feature-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    margin: 0 auto 16px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px !important;
  }

  .cs_choose_card_icon i,
  .at-transfer-icon i,
  .at-feature-icon i {
    font-size: 24px !important;
  }

  /* ----------------------
     CARD TEXT STYLES
     ---------------------- */
  .cs_why_choose_card h3,
  .at-transfer-title,
  .at-feature-title,
  .pt-tour-title,
  .attraction-title,
  .cs_fleet_card_title {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
    text-align: center;
  }

  .cs_why_choose_card p,
  .at-transfer-desc,
  .at-feature-desc,
  .pt-tour-desc,
  .attraction-desc,
  .cs_fleet_card_desc {
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center;
    margin-bottom: 0 !important;
  }

  .cs_why_choose_card h3 {
    text-align: center;
  }

  .cs_why_choose_card p {
    text-align: center;
  }

  /* ----------------------
     SERVICE PREVIEW CARD
     ---------------------- */
  .cs_service_preview_card {
    display: flex;
    flex-direction: column;
  }

  .cs_service_preview_content {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 20px !important;
    background: #141F4C !important;
  }

  .cs_service_preview_content h3 {
    font-size: 18px !important;
    text-align: center;
  }

  .cs_service_preview_content p {
    font-size: 13px !important;
    text-align: center;
  }

  .cs_service_preview_link {
    justify-content: center;
  }

  .cs_service_preview_icon {
    display: none !important;
  }

  /* ----------------------
     INTERACTIVE ELEMENTS
     ---------------------- */
  .cs_why_choose_card a,
  .at-transfer-card a,
  .at-feature-card a,
  .btn-book-now,
  .cs_service_preview_link,
  .cs_sidebar_link {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  /* Buttons */
  .btn-book-now {
    width: 100% !important;
    margin-top: 16px !important;
    text-align: center !important;
  }

  /* ----------------------
     SLIDER SPECIFIC
     ---------------------- */
  .slick-slider {
    padding: 0 !important;
  }

  .slick-list {
    padding: 0 !important;
    overflow: visible !important;
  }

  .slick-track {
    display: block !important;
  }

  .slick-slide {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
  }

  .slick-slide > div {
    width: 100%;
  }

  /* ----------------------
     SLIDER DOTS
     ---------------------- */
  .slick-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none;
    padding: 20px 0 !important;
    margin: 0 !important;
  }

  .slick-dots li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .slick-dots li button {
    width: 12px !important;
    height: 12px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(20, 31, 76, 0.2) !important;
    text-indent: -9999px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .slick-dots li.slick-active button {
    background: #D5AB5A !important;
    width: 32px !important;
    border-radius: 6px !important;
  }

  /* ----------------------
     SLIDER ARROWS
     ---------------------- */
  .slick-arrow {
    display: none !important;
  }

  /* ----------------------
     PREVENT HORIZONTAL SCROLL
     ---------------------- */
  .row, .col-12, .col-md-6, .col-md-4, .col-md-3 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* ----------------------
     FOOTER CARDS
     ---------------------- */
  .footer-card {
    padding: 20px 16px !important;
    margin-bottom: 12px !important;
  }

  .contact-item {
    padding: 12px 0 !important;
  }

  /* ----------------------
     OTHER CARD COMPONENTS
     ---------------------- */
  .cs_contact_card {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .cs_card_visual {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
  }

  .cs_card_info {
    width: 100% !important;
  }

  .cs_card_action {
    display: none !important;
  }

  .cs_booking_card {
    text-align: center !important;
    padding: 20px 16px !important;
  }

  .cs_car_card {
    padding: 16px !important;
  }

  .cs_car_card_image {
    width: 100% !important;
    height: 180px !important;
    object-fit: cover;
  }

  .cs_car_card_content {
    padding: 16px !important;
  }

  .cs_car_card_title {
    font-size: 16px !important;
  }

  .cs_car_card_meta {
    font-size: 13px !important;
  }

  .cs_car_card_desc {
    font-size: 13px !important;
  }

  /* Package Cards */
  .package-content {
    padding: 16px !important;
  }

  .package-content h3 {
    font-size: 18px !important;
    text-align: center;
  }

  .package-content p {
    font-size: 13px !important;
    text-align: center;
  }

  .package-meta {
    flex-direction: column !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .package-meta span:first-child {
    font-size: 12px !important;
  }

  .package-meta span:last-child {
    font-size: 18px !important;
  }

  .package-badge {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }

  /* Booking Cards */
  .cs_booking_icon {
    width: 48px !important;
    height: 48px !important;
    margin: 0 auto 12px !important;
  }

  .cs_booking_icon i {
    font-size: 20px !important;
  }

  .cs_booking_card h4 {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  /* ----------------------
     STATS SECTION
     ---------------------- */
  .cs_stats_wrapper {
    gap: 12px !important;
  }

  .cs_stat_item {
    flex-direction: column !important;
    text-align: center !important;
    padding: 20px 16px !important;
  }

  .cs_stat_icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    margin-bottom: 12px !important;
  }

  .cs_stat_icon i {
    font-size: 20px !important;
  }

  .cs_stat_number {
    font-size: 24px !important;
  }

  .cs_stat_label {
    font-size: 12px !important;
  }

  /* ----------------------
     CTA SECTION
     ---------------------- */
  .cs_cta_box {
    padding: 30px 20px !important;
  }

  .cs_cta_content {
    text-align: center !important;
  }

  .cs_cta_content h2 {
    font-size: 22px !important;
  }

  .cs_cta_content p {
    font-size: 14px !important;
  }

  .cs_cta_buttons {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .cs_cta_primary,
  .cs_cta_secondary {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ----------------------
     HERO SECTION
     ---------------------- */
  .cs_contact_hero {
    position: relative;
    padding: 120px 20px 60px !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  .cs_contact_hero_content {
    padding: 20px 0 !important;
  }

  .cs_contact_hero_title {
    font-size: 26px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    margin-bottom: 12px !important;
    display: block !important;
    overflow: visible !important;
  }

  .cs_contact_hero_text {
    font-size: 14px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }

  /* ----------------------
     ABOUT SECTION
     ---------------------- */
  .cs_about_intro_section {
    padding: 50px 0 !important;
  }

  .cs_about_intro_wrapper {
    gap: 30px !important;
  }

  .cs_about_intro_image img {
    height: 250px !important;
  }

  .cs_about_intro_badge {
    bottom: 15px !important;
    left: 15px !important;
    padding: 12px 16px !important;
  }

  .cs_badge_number {
    font-size: 22px !important;
  }

  .cs_badge_text {
    font-size: 11px !important;
  }

  .cs_about_title {
    font-size: 24px !important;
    text-align: center;
  }

  .cs_about_text {
    font-size: 14px !important;
    text-align: center;
  }

  .cs_about_features {
    gap: 10px !important;
  }

  .cs_feature_item {
    justify-content: center;
  }

  .cs_about_btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ----------------------
     SECTION HEADERS
     ---------------------- */
  .cs_section_header {
    margin-bottom: 30px !important;
  }

  .cs_section_header .cs_section_title {
    font-size: 24px !important;
  }

  .cs_section_header .cs_section_subtitle {
    font-size: 14px !important;
    white-space: normal !important;
  }

  /* ----------------------
     FORM ELEMENTS
     ---------------------- */
  .cs_contact_form_wrapper {
    padding: 24px 16px !important;
  }

  .cs_form_header h2 {
    font-size: 20px !important;
    text-align: center;
  }

  .cs_contact_form .cs_form_row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .cs_form_field {
    font-size: 14px !important;
    padding: 12px 14px !important;
  }

  .cs_submit_btn {
    padding: 14px 24px !important;
    font-size: 14px !important;
  }

  /* ----------------------
     FOOTER
     ---------------------- */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .footer-card {
    text-align: center !important;
  }

  .social-links {
    justify-content: center !important;
  }

  .footer-links {
    text-align: center !important;
  }

  .contact-list {
    text-align: center !important;
  }

  .contact-item {
    flex-direction: column !important;
    gap: 8px !important;
  }

  .footer-bottom {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
  }

  /* ----------------------
     UTILITY CLASSES
     ---------------------- */
  .text-center {
    text-align: center !important;
  }

  .d-flex {
    display: flex !important;
  }

  .flex-column {
    flex-direction: column !important;
  }

  .justify-content-center {
    justify-content: center !important;
  }

  .align-items-center {
    align-items: center !important;
  }

  .mb-2 { margin-bottom: 8px !important; }
  .mb-3 { margin-bottom: 12px !important; }
  .mb-4 { margin-bottom: 16px !important; }
  .mt-2 { margin-top: 8px !important; }
  .mt-3 { margin-top: 12px !important; }
  .mt-4 { margin-top: 16px !important; }
  .p-2 { padding: 8px !important; }
  .p-3 { padding: 12px !important; }
  .p-4 { padding: 16px !important; }
}
}