
.hero-luxury {
  position: relative;
  padding: 120px 0;
  color: #fff;
  overflow: hidden;
}


/* GRADIENT LIGHT */
.hero-gradient {
  position: absolute;
  inset: 0;
 background: linear-gradient(180deg, #f7f9fb 0%, #ffffff 100%);
}

/* LAYOUT */
.hero-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
  z-index: 2;
}

/* SEARCH CARD (GLASS + GLOW) */
.hero-search {
   background: #ffffff;
  color: #1F2D3D;
  padding: 24px;
  border-radius: 16px;
  width: 420px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  border: 1px solid #e6ecf1;
 
}

/* HEADER */
.search-header {
  margin-bottom: 15px;
}

.search-header strong {
  display: block;
  font-size: 18px;
}

.search-header span {
  font-size: 13px;
  color: #666;
}

/* INPUT */
.input-group {
  margin-bottom: 12px;
}

.input-group label {
  font-size: 12px;
  color: #555;
}

.input-group input {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #ddd;
  transition: 0.2s;
  font-size : 16px;
}

.input-group input:focus {
  border-color: #ff3c3c;
  box-shadow: 0 0 0 2px rgba(255,60,60,0.2);
  font-size: 16px;
}

/* BUTTON */
.hero-search button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(90deg, #ff3c3c, #e60023);
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.hero-search button:hover {
  transform: scale(1.03);
}

/* TRUST */
.trust-row {
  margin-top: 12px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  color: #555;
}

/* MOBILE */
@media (max-width: 768px) {

  .hero-luxury {
    padding: 20px 0 60px;
  }

  .hero-wrap {
    flex-direction: column;
  }

  .hero-search {
    width: 100%;
    order: -1;
  }

  .hero-text span {
    font-size: 32px;
    text-align: center;
  }

  .hero-text p,
  .hero-tags {
    text-align: center;
  }
}


/* ICON SPACING */
.hero-tags i,
.search-header i,
.input-group label i,
.trust-row i {
  margin-right: 6px;
  color: #ff3c3c;
}

/* TRUST ICON COLOR */
.trust-row i {
  color: #1c9be6;
}

/* BUTTON ICON */
.hero-search button i {
  margin-right: 6px;
}

/* HEADER ICON */
.search-header i {
  color: #e60023;
}

/* COMPACT CARD */
.hero-search {
  padding: 20px;
  border-radius: 16px;
}

/* INPUT GROUP (SMALLER + CLEAN) */


/* ICON BOX (SMALLER + SHARP) */
.icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 14px;
  background: rgba(43, 123, 187, 0.1);
  color: #2B7BBB;
}

/* COLORS (MORE PREMIUM, LESS LOUD) */


/*.icon-box.orange {*/
/*  background: #ffc107;*/
/*}*/

/* LABEL */
.input-wrap label {
  font-size: 10px;
  color: #999;
}

/* INPUT */
.input-wrap input {
  font-size: 16px;
  font-weight: 500;
}

/* BUTTON (MORE SHARP) */
.hero-search button {
  margin-top: 8px;
  padding: 13px;
  font-size: 14px;
  background: #1c9be6;
  border-radius: 30px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(46,168,223,0.25);
}

.hero-search button i {
  font-size: 13px;
  
}

/* TRUST ROW (FIX ALIGNMENT) */
.trust-row {
  margin-top: 20px;
  font-size: 11px;
  justify-content: space-between;
}

.trust-row span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

/* TRUST ICONS (BETTER STYLE) */
.trust-row i {
  font-size: 14px;
  color: #22c55e;
}


/* INPUT BOX */
.input-group-premium {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid #e6ecf1;
}

/* ICON */
.icon-box {
  
  display: flex;
  align-items: center;
  justify-content: center;
  /*color: #fff;*/
}

/*.icon-box.red {*/
/*  background: #f03a17;*/
/*} */

/*.icon-box.green{*/
/*    background : #28a745;*/
/*}*/

/*.icon-box.orange {*/
/*  background: #ffc107;*/
/*}*/

/* INPUT TEXT */
.input-wrap {
  flex: 1;
}

.input-wrap label {
  font-size: 11px;
  color: #999;
  display: block;
  margin-bottom: 2px;
}

.input-wrap input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 16px;
  font-weight: 500;
  color: #222;
}

/* REMOVE DEFAULT DATE UI COMPLETELY */
input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
}


/* HEADER INLINE (NO BOX) */
.search-header-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 4px 2px;
  padding-left: 17px;
}

/* ICON */
.header-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;

   background: rgba(43, 123, 187, 0.1);
  box-shadow: none;

  display: flex;
  align-items: center;
  justify-content: center;

  /*box-shadow: 0 6px 15px rgb(0 126 255 / 25%);*/
}

.header-icon i {
  /*color: #fff;*/
  color: #2B7BBB;
  font-size: 14px;
}

/* TEXT */
.header-text h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #111;
}

/* SUBTEXT */
.header-text p {
  margin: 2px 0 0;
  font-size: 11px;
  color: #777;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ICON STYLE */
.header-text p i {
  font-size: 11px;
}
.header-text p i {
  color: #6B7280 !important;
}

/*.header-text p i.fa-bolt {*/
/*  color: #ff3c3c;*/
/*}*/

/*.header-text p i.fa-tag {*/
/*  color: #ff8c3c;*/
/*}*/
@media(min-width: 480px) {
  .header-text h3 {
    font-size: 28px;
  }
  .header-text p {
    font-size: 16px;
  }

  .header-text p i {
    font-size: 16px;
  }
}


/* DOT */
.dot {
  width: 4px;
  height: 4px;
  background: #bbb;
  border-radius: 50%;
} 




/* LEFT WRAP */
.hero-left {
  max-width: 520px;
  color: #1F2D3D;
}

/* HEADING */
.hero-left span {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
  color: #1F2D3D;
}

/* GRADIENT TEXT */
.hero-left span span {
  background: none;
  -webkit-text-fill-color: initial;
  color: #1c9be6;
}

/* SUBTEXT */
.hero-sub {
  font-size: 16px;
  color: #6B7C93;
  margin-bottom: 24px;
  line-height: 1.5;
}

/* BADGES */
.hero-badges {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.hero-badges span {
  background: rgba(255,255,255,0.08);
  padding: 10px 14px;
  border-radius: 30px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(6px);
  border: 1px solid #1c9be6;
}

.hero-badges i {
  color: #ff3c3c;
}

/* STATS */
.hero-stats {
  display: flex;
  gap: 30px;
}

.hero-stats div {
  display: flex;
  flex-direction: column;
}

.hero-stats strong {
  font-size: 20px;
  font-weight: 700;
}

.hero-stats span {
  font-size: 12px;
  color: #212529;
}

/* =========================
   TABLET (1024px)
========================= */
@media (max-width: 1024px) {

  .hero-left {
    max-width: 100%;
  }

  .hero-left span {
    font-size: 40px;
    line-height: 1.2;
  }

  .hero-sub {
    font-size: 15px;
  }

  .hero-badges {
    gap: 10px;
  }

  .hero-stats {
    gap: 20px;
  }
}

/* =========================
   MOBILE (768px)
========================= */
@media (max-width: 768px) {

  .hero-left {
    text-align: center;
    margin-top: 20px;
  }

  .hero-left span {
    font-size: 32px;
    line-height: 1.3;
  }

  .hero-sub {
    font-size: 14px;
    margin-bottom: 18px;
  }

  .hero-badges {
    justify-content: center;
    flex-wrap: wrap;
  }

  .hero-stats {
    justify-content: center;
    gap: 18px;
    margin-top: 10px;
  }
}

/* =========================
   SMALL MOBILE (480px)
========================= */
@media (max-width: 480px) {

  .hero-left span {
    font-size: 26px;
  }

  .hero-sub {
    font-size: 13px;
  }

  .hero-badges span {
    font-size: 12px;
    padding: 8px 12px;
  }

  .hero-stats strong {
    font-size: 16px;
  }

  .hero-stats span {
    font-size: 11px;
  }
}
/* NICE SELECT PREMIUM LOOK */
.nice-select {
  width: 100%;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e6ecf1;
  height: 44px;
  line-height: 44px;
  font-size: 14px;
  padding: 0 40px 0 14px;
  box-shadow: none;
  transition: all 0.25s ease;
}

/* HOVER */
.nice-select:hover {
  border-color: #ddd;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* TEXT */
.nice-select .current {
  font-weight: 500;
  color: #222;
}

/* DROPDOWN */
.nice-select .list {
  width: 100%;
  border-radius: 12px;
  margin-top: 6px;
  border: 1px solid #eee;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  padding: 6px 0;
}

/* OPTIONS */
.nice-select .option {
  padding: 4px 14px;
  font-size: 14px;
}

/* HOVER OPTION */
.nice-select .option:hover {
  background: #f7f7f7;
}

/* SELECTED */
.nice-select .option.selected {
  font-weight: 600;
  color: #1c9be6;
}

/* ARROW */
.nice-select:after {
  right: 14px;
  border-color: #999;
  width: 6px;
  height: 6px;
}

/* datepicker */ 
.flatpickr-input {
    height: 48px;
    border-radius: 12px;
    border: none;
    font-size: 16px !important;
    background: transparent;
} 

/* =========================
   MOBILE HEADER (SPOT STYLE)
========================= */

.sa-mobile-header {
  display: none;
}

@media (max-width: 768px) { 
.main-header-style1 {
   
    display: none;
} 

 .sa-left a {
     margin-bottom : -3px;
 }

  .sa-mobile-header {
    display: block;
    background: #232f3e;
    padding: 10px 14px;
    /*position: sticky;*/
    /*top: 0;*/
    /*z-index: 999;*/
  }

  .sa-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
  }

  /* LEFT */
  .sa-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .sa-menu-btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }

  .sa-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    text-decoration: none;
  }

  
  /* BUTTON */
.sa-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background:#37475a;
  color: #ffd814;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  backdrop-filter: blur(6px);
} 

/* ICON */
.sa-app-btn i {
  font-size: 12px;
  transform: translateY(1px); /* 👈 slight drop like SpotAngels */
}

/* HOVER */
.sa-app-btn:hover {
  background: rgba(255,255,255,0.3);
  color : #ffd814 !important;
}

}


.sa-menu-btn {
  width: 25px;
  height: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.sa-menu-btn span {
  display: block;
  height: 3px;
  width: 100%;
  background: #ffffff;
  border-radius: 2px;
  transition: all 0.3s ease;
} 


.logo_header{
    color: #fff;
    font-size: 22px;
    font-family: 'Playfair Display', serif !important;
} 

.sa-left a {
    text-decoration : none;
} 

.sa-right {
  /*transform: translateY(20px);*/

  transition: all 0.3s ease;
}




/* Visible state */
.sa-right.show {
    position: fixed;
  right: 16px;
  top: 20px;
  z-index: 9999;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* Call Cta   */ 






/* Floating CTA Button */


.call-cta {

  width: 100px;
    height: 50px;

  background: #37475a;
  color: #ffd814;
  border-radius: 30px;
  font-size: 16px;
font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;

  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.25),
    inset 0 -3px 6px rgba(0, 0, 0, 0.15);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;

  z-index: 9999;
}

/* Inner icon wrapper for better centering */
.icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Phone Icon */
.call-cta i {
  font-size: 28px;
  
  transform: rotate(277deg); /* tilt like reference */
}

/* Hover (desktop only) */
@media (hover: hover) {
  .call-cta:hover {
    transform: translateY(-2px) scale(1.08);
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.3),
      inset 0 -3px 6px rgba(0, 0, 0, 0.2);
    filter: brightness(1.05);
  }
}

/* Active (tap/click feedback) */
.call-cta:active {
  transform: scale(0.95);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.2),
    inset 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Focus (accessibility) */
.call-cta:focus-visible {
  outline: 3px solid #000;
  outline-offset: 4px;
}




/* Mobile adjustments */
@media (max-width: 480px) {
  .call-cta {
    width: 85px;
    height: 40px;
    bottom: 18px;
    right: 18px;
  }

  .call-cta i {
    font-size: 24px;
  }
}

.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


.is-invalid {
    border: 2px solid #dc3545 !important;
}

.invalid-feedback {
    color: #dc3545;
    font-size: 13px;
    margin-top: 4px;
}

/* NICE SELECT DROPDOWN SCROLL */

.nice-select .list{
    max-height: 300px;
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;

    /* smooth scroll on mobile */
    -webkit-overflow-scrolling: touch;
}

.premium-select.nice-select .list{
    max-height: 225px;
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;

    /* smooth scroll on mobile */
    -webkit-overflow-scrolling: touch;
}

/* optional better scrollbar */
.nice-select .list::-webkit-scrollbar{
    width: 6px;
}

.nice-select .list::-webkit-scrollbar-thumb{
    background: #c1c1c1;
    border-radius: 10px;
}
