/* CSS Variables 
  */
:root {
    
    --primary-color: #D4AF37;      
    --secondary-color: #2C3E50;    
    --dark-filler: #F7F9FC;        
    --light-text: #FFFFFF;        
    --dark-text: #0F1419;       

    /* Fonts */
    --body-font: 'Montserrat', sans-serif;
    --heading-font: 'Philosopher', serif;
    
    /* Transitions */
    --transition-fast: all 0.3s ease;
    --transition-medium: all 0.5s ease;
    --transition-slow: all 0.8s ease;
    
    /* Spacing */
    --section-padding: 5rem 0;
    --container-width: 1200px;
    
    /* Borders */
    --border-radius-sm: 0.6rem;
    --border-radius-md: 0.6rem;
    --border-radius-lg: 1.2rem;
    --border-radius-full: 5rem;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: 500;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--body-font);
    font-weight: 300;
    color: var(--dark-text);
    background-color: var(--light-text);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--secondary-color);
    line-height: 1.2;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--primary-color);
}

img {
    max-width: 100%;
    height: auto;
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
    transition: var(--transition-fast);
}

.btn {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    text-align: center;
    transition: var(--transition-fast);
}

.btn-primary {
    background-color: var(--primary-color);
    color: #EBF6FC;
}

.btn-primary:hover {
    background-color: #4A87CA;
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--light-text);
}

.btn-secondary:hover {
    background-color: #2a2e2a;
}

.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--dark-text);
    max-width: 700px;
    margin: 0 auto;
    margin-right: 0rem;
}

/* Header Styles */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color:  var(--light-text);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 2000;
    padding: 1.2rem 0;
    transition: var(--transition-medium);
}

.header .container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    padding: 0 0 0 1rem;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--heading-font);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    white-space: nowrap;
    flex-shrink: 0;
    margin-right: 3rem;
}

.logo a img {
    height: 42px;
    width: auto;
}

.main-nav {
    margin: 0;
    flex: 0 1 auto;
    margin-right: 1rem;
}

.main-nav-and-ctas {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    margin-left: 0;
    margin-right: 0;
}
.hero-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
   
}
.main-nav ul {
    display: flex;
    gap: 1.8rem;
    justify-content: flex-start;
}

.main-nav a {
    font-weight: 600;
    position: relative;
    padding-bottom: 0.3rem;
    font-size: 0.95rem;
    margin-left: 0;
    white-space: nowrap;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: var(--transition-medium);
}

.main-nav a:hover::after {
    width: 100%;
}

.header-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-right: 0;
    margin-left: 0;
    white-space: nowrap;
}

.mobile-cta {
    display: none;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.desktop-cta {
    display: flex;
}

.desktop-cta .phone-link {
    display: none;
}

.phone-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: var(--border-radius-md);
    padding: 0.7rem 1rem;
    background-color:  var(--primary-color);
    color:  var(--light-text);
    margin-left: 0;
    transition: var(--transition-medium);
    white-space: nowrap;
}

.phone-link i {
    display: none;
}

.phone-link:hover {
    background-color: var(--secondary-color);
    color:  var(--light-text);
}

.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    color: var(--secondary-color);
}

#contact-btn {
    display: none;
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 600px;
    height: calc(100vh - 5rem);
    background: url('bg_photos/main.png') no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    padding: 120px 0 60px;
    margin-top: 5.5rem;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}


.hero-content {
    position: relative;
    z-index: 1;
    color:  var(--light-text);
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero h1 {
    font-size: 3.5rem;
    color:  var(--light-text);
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.hero-titles {
    margin-top: -4rem;
    max-width: 800px;
}

.subtitle {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    color: var(--light-text);
}

/* Flight Search Form */
.flight-search {
    background-color:  var(--light-text);
    border-radius: var(--border-radius-md);
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
    max-width: 39rem;
    margin: 0 auto;
    margin-bottom: 1rem;
}

.search-tabs {
    display: flex;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--dark-filler);
    justify-content: center;
}

.tab-btn {
    padding: 0.8rem 1.5rem;
    font-weight: 600;
    color: var(--dark-text);
    position: relative;
    opacity: 0.7;
    font-size: 0.95rem;
    margin: 0 0.5rem;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
}

.tab-btn.active {
    opacity: 1;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--primary-color);
}



.search-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row {
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap; /* Fix for requirement 3 */
}

.form-group {
    flex: 1;
    position: relative;
    border: 1px solid var(--dark-filler);
    border-radius: var(--border-radius-sm);
    font-family: inherit;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
}

.form-group:focus-within {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(27, 156, 163, 0.2);
}

svg, #people-icon {
    color: var(--secondary-color);
    margin-left: 0.8rem ;
    position: absolute;
    z-index:1;
}

#return-svg {
    height: 100%;
}

#exchange-arrow {
    position:initial;
    margin-left: 0;
}
 
.form-group input {
  display: inline-block;
  background-color: transparent;
}

#returtn-from-group {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.form-group input,
.form-group select {
    width: calc(100% - calc(24px + 0.8rem));
    padding:0.8rem 1rem 0.8rem 0.5rem;
    border-radius: var(--border-radius-sm);
    border: 0px;
    font-family: inherit;
    transition: var(--transition-fast);
    font-size: 0.95rem;
    color: var(--dark-text);
    text-transform: capitalize;
    margin-left: calc(24px + 0.8rem);
}

#cabin-class-fg {
    background-color: var(--light-text);
}

#cabin-class-fg select{
    background-color: var(--light-text);
    padding-left: calc(0.5rem -  3px);
}

.city-suggestions {
    color: var(--dark-text);
    text-transform: capitalize;
    font-size: 0.9rem;
}

/* Remove input focus styles since we're using form-group focus */
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: transparent;
    box-shadow: none;
}

.airport-code {
    position: absolute;
    right: 6px;
    bottom: 1.3rem;
    transform: translateY(-50%);
     background-color: #e8e7e773;
    backdrop-filter: blur(10px);
    padding: 0.15rem 0.3rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05rem;
    color: var(--secondary-color);
    display: none;
}

.city-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--light-text);
    border: 1px solid var(--dark-filler);
    border-radius: var(--border-radius-sm);
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
    display: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.city-suggestions div {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.city-suggestions div:hover {
     background-color: #e8e7e773;
    backdrop-filter: blur(10px);;
}

.swap-btn {
    align-self: flex-end;
    width: 1rem;
    height: calc(2.5rem + 2px);
    display: flex;
    align-items: center;
    justify-content: center;
    }

.swap-btn #exchange-arrow {
    transition: var(--transition-fast);
}

.swap-btn #exchange-arrow:hover  {
    color: var(--primary-color);
}

.travelers-group {
    position: relative;
}

.travelers-dropdown {
    position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  min-width: 5rem;
  max-width: none;
    background-color: var(--light-text);
    border: 1px solid var(--dark-filler);
    border-radius: var(--border-radius-sm);
    padding: 1rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    z-index: 10;
    display: none;
}

.traveler-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
}

.traveler-option {
    color: var(--dark-text);
    font-size: 0.95rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.count {
    color: var(--dark-text);
    min-width: 20px;
    text-align: center;
}

.counter {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.counter-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--light-text);
  backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    transition: var(--transition-fast);
}

.counter-btn:hover {
    background-color: var(--primary-color);
    color: var(--light-text);
}

.traveler-total {
    padding: 0.8rem 0;
    margin: 0.7rem 0;
    border-top: 1px solid var(--dark-filler);
    border-bottom: 1px solid var(--dark-filler);
    font-weight: 600;
    text-align: center;
    color: var(--dark-text);
    font-size: 0.95rem;
}

.done-btn {
    width: 100%;
    padding: 0.6rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.95rem;
    top: 0rem;
    opacity: 1;
}

.search-btn {
    padding: 0.9rem 1.2rem ;
    font-size: 1rem;
    max-width: 200px;
    margin: 0 auto;
    background-color: var(--primary-color);
    color:  var(--light-text);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-medium);
}

.search-btn:hover {
    background-color: var(--secondary-color);
    color:  var(--light-text);
}


/* Multi-city flights */
.multi-city-flight {
    display: flex;
    width: 102%;
    gap: 0.6rem;
    margin-bottom: 1rem;
    align-items: center;
    position: relative;
}

.add-flight-btn {
    background-color: var(--light-text);
    backdrop-filter: blur(10px);
    color: var(--primary-color);
    padding: 0.6rem 1rem;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    transition: var(--transition-medium);
    width: 40%;
    justify-content: center;
}

.multi-city-buttons {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: -1rem;
}

.error-message {
    position: absolute;
    top: 100%;
    left:0;
    width: 100%;
    height: auto;
    background-color: #b50a0a;
    color: var(--light-text);
    padding: 0.3rem 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.8rem;
    z-index: 100;
    /*white-space: nowrap;*/
    text-align: center;
}

.form-group.has-error {
    border-color: #b50a0a;
}

/* Show buttons only in multi-city mode */
#flight-search-form[data-tab="multi-city"] #multi-city-buttons {
    display: flex;
}

#flight-search-form[data-tab="round-trip"] #multi-city-buttons,
#flight-search-form[data-tab="one-way"] #multi-city-buttons {
    display: none;
}

.add-flight-btn:hover {
    background-color: var(--primary-color);
    color: var(--light-text);
}

.remove-flight-btn {
    color: var(--secondary-color);
    padding: 0.6rem;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    margin: 0.4rem 0.6rem 0.2rem 0;
    height: 40px;
    transition: var(--transition-medium);
    transform: scale(1.1);
    transform-origin: center;
}

.remove-flight-btn:hover {
color: #b50a0a;
}

#search-button {
    display: flex;
    justify-content: center;
    align-items: center;
}

#add-flight, #clear-all {
    top: 0;
    opacity: 1;
    margin-top: 0;
}

#clear-all {
    background-color:var(--secondary-color);
    color: var(--light-text);
    padding: 0.6rem 1rem;
    border-radius: var(--border-radius-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    transition: var(--transition-medium);
    width: 40%;
    justify-content: center;
}
#clear-all:hover {
     background-color: #b50a0a;
     color:  var(--light-text);

}

/* Flight numbering */
.flight-number {
    position: absolute;
    top: -20px;
    left: 10px;
    background: var(--primary-color);
    color: var(--light-text);
    padding: 2px 8px;
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
    z-index: 2;
}

/* Airlines Section */
#airlines {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4rem;
    width: 100%;
    margin:2rem 2rem 0 2rem;
    gap: 3rem;
}

.airline {
    height: 4rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 10rem;
    filter: grayscale(100%) brightness(0) invert(80%);
    opacity: 0.7;
transition: var(--transition-medium);
transform-origin: center;
}

.airline:hover {
    transform: scale(1.1);
}

#swiss{
    background-image: url(swiss-removebg-preview.png);
}
#emerites {
        background-image: url(emirites1_1_-removebg-preview.png);
}
#luft{
    background-image: url(luft.png);
}
#singapore {
        background-image: url(singapore.png);
}
#airfrance {
        background-image: url(airfrance-removebg-preview.png);
}

/* Best Deals Section */
#best-deals-container {
    margin: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.best-deals {
    padding: var(--section-padding);
    background-color:var(--light-text);
     display: flex;
    justify-content: center;
    align-items: center;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-width);
    position: relative;
    margin: 0 4rem 2rem 4rem;
    
}

.view-all {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.95rem;
}

.view-all i {
    transition: var(--transition-fast);
}

.view-all:hover i {
    transform: translateX(3px);
}


/* Best Deals Carousel */
.deals-carousel {
    position: relative;
    overflow: hidden;
    width:calc(18rem * 4 + 1.5rem * 3 + 1.5rem + 1.5rem / 2);
    padding: 0;
}

.deals-carousel-window {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color:  var(--light-text);
    backdrop-filter: blur(10px);
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.carousel-btn:hover {
    background-color: var(--primary-color);
    color: var(--light-text);
}

.prev-btn {
    left: 5px;
}

.next-btn {
    right: 5px;
}

.deals-container {
    display: flex;
    gap: 1.5rem;
    padding: 1rem;
    transition: transform 0.5s ease;
    width: max-content;
}


@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-18rem));
    }
}

.deal-card {
    min-width: 18rem;
    height: calc(180px + 3rem + 1rem + 0.3rem + 1.3rem + 1.1rem + 0.4rem + 0.7rem + 0.8rem + 0.8rem + 1rem) ;
    background-color:  var(--light-text);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    transition: var(--transition-medium);
    flex-shrink: 0;
    position: relative;
}


.deal-card .btn-secondary{
   opacity: 1;
}


.deal-image {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
}
.new {
    background-image: url(newyork.jpg);
}
.dubai {
    background-image: url(dubai.jpg);
}
.london {
    background-image: url(london.jpg);
}
.sydney {
 background-image: url(sydney.jpg);
}
.los {
    background-image: url(losangeles.jpg) !important;
}
.tokyo {
    background-image: url(tokyo.jpg);
}
.hong {
 background-image: url(hongkong.jpg);
}
.miami {
    background-image: url(miami.jpg);
}
.singapore {
    background-image: url(singapore.jpg);
}
.paris {
    background-image: url(paris.jpg);
}
.card-image {
    position: absolute;
    height: calc(180px + 3rem + 1rem + 0.3rem + 1.3rem + 1.1rem + 0.4rem + 0.7rem + 0.8rem + 0.8rem + 1rem);
    width: 18rem;
    z-index: 500;
    background-size: cover;
    background-position: center;
    transition: var(--transition-slow);
}

.deal-content {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 1000;
}

.btn-secondary {
    position: relative;
    top: 11.5rem;
    opacity: 0;
    transition: var(--transition-medium);
}

.deal-content h3 {
    margin-bottom: 0.3rem;
    font-size: 1.6rem;
    color:  var(--light-text);
}

.deal-price {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.4rem 0 0.7rem 0;
    color:  var(--light-text);
}

/* Why Us Section */
.why-us {
    padding: var(--section-padding);
    background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 50%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.why-us::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 8s ease-in-out infinite;
    pointer-events: none;
}

.why-us::after {
    content: '';
    position: absolute;
    bottom: -30%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(44, 62, 80, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 10s ease-in-out infinite reverse;
    pointer-events: none;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }
    50% {
        transform: translateY(-30px) translateX(20px);
    }
}

.why-us-header {
    text-align: center;
    margin-bottom: 3.5rem;
    position: relative;
    z-index: 1;
}

.why-us-subtitle {
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}

.why-us-header h2 {
    font-size: 2.8rem;
    color: var(--dark-text);
    margin: 0;
    font-family: var(--heading-font);
    font-weight: 700;
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.reason-card {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 0.8rem;
    transition: var(--transition-medium);
}

.reason-card:hover {
    background-color: var(--dark-filler);
    transform: translateY(-2px);
}

.reason-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: var(--dark-filler);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--primary-color);
    line-height: 1;
    margin: 0;
}

.reason-content h3 {
    font-size: 1.1rem;
    color: var(--dark-text);
    margin: 0 0 0.5rem 0;
    font-weight: 700;
}

.reason-content p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Travel Advisors Section */
.travel-advisors {
    padding: var(--section-padding);
    background-color: var(--light-text);
    text-align: center;
}

.advisors-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
    background-color: white;
    padding: 3.5rem 3rem;
    border-radius: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.advisors-header {
    margin-bottom: 2.5rem;
}

.advisors-subtitle {
    font-size: 0.85rem;
    letter-spacing: 2px;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
}

.advisors-header h2 {
    font-size: 2.2rem;
    color: var(--dark-text);
    margin: 0;
    font-family: var(--heading-font);
    font-weight: 700;
}

.advisors-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: -0.8rem;
    margin-bottom: 2rem;
}

.advisor-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: 3px solid var(--dark-filler);
    position: relative;
    margin: 0 -0.4rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: var(--transition-medium);
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.advisor-avatar:nth-child(1) {
    background-image: url('bg_photos/fake_people/1.png');
}

.advisor-avatar:nth-child(2) {
    background-image: url('bg_photos/fake_people/2.png');
}

.advisor-avatar:nth-child(3) {
    background-image: url('bg_photos/fake_people/3.png');
}

.advisor-avatar:nth-child(4) {
    background-image: url('bg_photos/fake_people/4.png');
}

.advisor-avatar:nth-child(5) {
    background-image: url('bg_photos/fake_people/5.png');
}

.advisor-avatar::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    background-color: #22c55e;
    border: 2px solid var(--dark-filler);
    border-radius: 50%;
}

.advisor-avatar:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.advisors-highlight {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark-text);
    margin-bottom: 1.2rem;
}

.advisors-description {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 700px;
}

.advisors-btn {
    padding: 0.9rem 2.5rem;
    font-size: 0.95rem;
    letter-spacing: 1px;
    font-weight: 600;
    transition: var(--transition-fast);
}

.advisors-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* How It Works Section */
.how-it-works {
    padding: var(--section-padding);
    background: linear-gradient(rgba(44, 62, 80, 0.85), rgba(44, 62, 80, 0.85)), url('how_it_works.png') center/cover no-repeat fixed;
    position: relative;
    overflow: hidden;

    
}

.how-it-works h2,
.how-it-works h3,
.how-it-works p,
.how-it-works .section-subtitle {
    color: var(--light-text) !important;
}

#how-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 1200px;
    position: relative;
    margin: 0 auto 6rem auto;
    padding: 0 2rem;
}

#how-header h2 {
    margin: 0 0 1rem 0;
    font-size: 3rem;
    color: var(--light-text);
    font-weight: 700;
}

#how-header .section-subtitle {
    margin: 0;
    font-size: 1.2rem;
    color: var(--light-text);
    font-weight: 400;
}

#how-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.how-wrapper {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.steps-grid-professional {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3.5rem;
    max-width: 1300px;
    margin: 0 auto;
    align-items: flex-start;
    padding: 0 2.5rem;
    position: relative;
}

.steps-grid-professional::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 12.5%;
    right: 12.5%;
    height: 1px;
    background: var(--primary-color);
    opacity: 0.25;
    z-index: 0;
    pointer-events: none;
}

.step-card {
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transition: all var(--transition-medium);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: visible;
    z-index: 1;
}

.step-card::before {
    display: none;
}

.step-card:hover {
    transform: translateY(0);
    box-shadow: none;
    border-color: transparent;
}

.step-number {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 3px solid var(--primary-color);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    font-weight: 400;
    margin-bottom: 2.5rem;
    transition: all var(--transition-medium);
    position: relative;
    z-index: 2;
}

.step-card:hover .step-number {
    background: var(--primary-color);
    color: var(--light-text);
    transform: scale(1.1);
}

.step-card h3  {
    margin-bottom: 1.2rem;
    font-size: 1.5rem;
    color: var(--light-text);
    font-weight: 700;
    transition: color var(--transition-medium);
    letter-spacing: -0.5px;
}

.step-card:hover h3 {
    color: var(--primary-color);
}

.step-card p {
    font-size: 1.1rem;
    color: #e8e8e8;
    line-height: 1.6;
    margin: 0;
}


#step1 {
    border: none;
    cursor: pointer;
}

#step1:hover {
    background-color: transparent;
    box-shadow: none;
    border-color: transparent;
    transform: translateY(0);
}

#step1:hover h3 {
    color: var(--primary-color);
}

#step1:hover p {
    color: #777;
}

#step1:hover .step-number {
    background: var(--primary-color);
    color: var(--light-text);
}

/* Reviews Section */
.reviews {
    padding: var(--section-padding);
    background-color: var(--light-text);
}

#reviews-container {
    margin: 0;
    max-width: 100%;
}

#reviews-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-width);
    position: relative;
    margin: 0 4rem 2rem 4rem;
}



#grid-container {
    width: 100%;
    height: auto;
     display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 4.5rem 0;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.review-card {
     background-color: var(--light-text);
    border-radius: var(--border-radius-md);
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: var(--transition-medium);
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.reviewer-info {
    margin-bottom: 0.5rem;
}

.reviewer-name {
    font-weight: 600;
    color: var(--secondary-color);
}

.review-date {
    font-size: 0.85rem;
    color: #666;
}

.review-rating {
    color: #ffc107;
    font-size: 1rem;
}

.review-content h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.review-content p {
    color: var(--dark-text);
}

/* FAQ Section */
.faq {
    padding: var(--section-padding);
    background-color: var(--light-text);
}

#faq-container {
    margin: 0;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#faq-header {
      display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--container-width);
    position: relative;
    margin: 0 4rem 2rem 4rem;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 1rem;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    transition: var(--transition-medium);
 box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}

.faq-item:hover {
transform: translateY(-7px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.faq-item:hover .faq-question{
    background: transparent;
}

.faq-question {
    width: 100%;
    padding: 1.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 1.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color:  var(--light-text);
    transition: var(--transition-medium);
    border-radius: var(--border-radius-sm);
}

.faq-question i {
    transition: var(--transition-medium);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: var(--transition-medium);
    background-color:  var(--light-text);
}

.faq-answer p {
    padding: 1rem 1.5rem 1.5rem;
}

.faq-item.active .faq-question {
    background-color: var(--secondary-color);
    color:  var(--light-text);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    max-height: 500px;
}


/* Disclaimer Section */
.disclaimer {
    background-color: var(--secondary-color);
    padding: 2rem 0;
    font-size: 0.85rem;
    color: rgb(166, 166, 166);
}

/* Image Banner Sections */
.image-banner {
    position: relative;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.image-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(44, 62, 80, 0.7) 0%, rgba(44, 62, 80, 0.5) 50%, rgba(44, 62, 80, 0.7) 100%);
    z-index: 1;
}

.image-banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--light-text);
    max-width: 800px;
    padding: 0 2rem;
}

.image-banner-content h3 {
    font-size: 3rem;
    color: var(--light-text);
    margin-bottom: 1rem;
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
}

.image-banner-content p {
    font-size: 1.4rem;
    color: var(--light-text);
    font-weight: 300;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    opacity: 0.95;
}

/* Specific banner backgrounds */
.luxury-cabin {
    background-image: url('luxury.png');
}

.business-interior {
    background-image: url('plane-seat.jpg');
}

.world-destinations {
    background-image: url('world(2).jpg');
}

#disclaimer {
    padding-top:0;
    padding-bottom: 1.5rem;
}

.disclaimer .container {
    max-width: 90vw;
    text-align: center;
}

.disclaimer h3 {
     color: rgb(166, 166, 166);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.disclaimer p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

header .container{
    position: relative;
}

/* Footer */
.footer {
    background-color: var(--secondary-color);
    color:  var(--light-text);
    padding: 3rem 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 1rem;
}

.footer-col h3 {
    color:  var(--light-text);
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

.footer-col p {
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: var(--transition-fast);
}

.social-links a:hover {
    background-color: var(--primary-color);
    color:  var(--light-text);
}

.footer-col ul li {
    margin-bottom: 0.5rem;
}

.footer-col ul li i {
    margin-right: 0.5rem;
    color: var(--primary-color);
    width: 20px;
    text-align: center;
}

.newsletter-form input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: none;
    border-radius: var(--border-radius-sm);
    margin-bottom: 0.8rem;
    font-family: inherit;
}

.newsletter-form .btn {
    top: 0;
    opacity: 1;
}

.footer-bottom {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.copyright {
    opacity: 0.7;
}

.legal-links {
    display: flex;
    gap: 1.5rem;
}

.legal-links a {
    opacity: 0.7;
    transition: var(--transition-fast);
}

.legal-links a:hover {
    opacity: 1;
    color: var(--primary-color);
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-medium);
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background-color:  var(--light-text);
    border-radius: var(--border-radius-md);
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    position: relative;
    transform: translateY(20px);
    transition: var(--transition-medium);
}

.modal.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    color: var(--dark-text);
    opacity: 0.5;
    transition: var(--transition-fast);
}

.modal-close:hover {
    opacity: 1;
    color: var(--primary-color);
}

.modal h2 {
    margin-bottom: 1.5rem;
    text-align: center;
}

#modal-contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Responsive Styles */
@media (max-width: 992px) {
    .hero h1 {
        font-size: 3rem;
    }
    
    .subtitle {
        font-size: 1.2rem;
    }
    
    
    .form-row {
        
        gap: 0.5rem;
    }
    
    
}

@media (max-width: 768px) {
    .header {
        z-index: 500 !important;
    }
    .main-nav {
        position: fixed;
        top: 80px;
        right: -2.8rem;
        width: 50%;
        background-color:  var(--light-text);
        padding: 1rem;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        transform: translateX(150%);
        transition: var(--transition-medium);
        z-index: 200;
    }
    
    .main-nav.active {
        transform: translateX(0);
    }
    
    .main-nav ul {
        flex-direction: column;
        gap: 1rem;
        margin-left: 0;
        align-items: center;
        text-align: center;
        width: 100%;
    }
    
    .mobile-phone-link {
        color: var(--secondary-color) !important;
        font-weight: 600 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }
    
    .mobile-phone-link i {
        color: var(--primary-color);
        margin-right: 0;
        font-size: 1.2rem;
    }
    
    .desktop-cta {
        display: none !important;
    }
    
    .mobile-cta {
        display: flex !important;
        flex-direction: column;
        width: 100%;
        align-items: center;
        gap: 1rem;
        margin-top: 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .mobile-cta .btn {
        width: 80%;
        max-width: 300px;
    }
    
    .mobile-menu-btn {
        display: block;
        position: absolute;
        right: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
        margin-right: 0;
        z-index: 1000;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .view-all {
        align-self: flex-end;
    }
    
    .step-arrow {
        display: none !important;
    }
    
    .why-us-header h2 {
        font-size: 2.3rem;
    }
    
    .reasons-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .reason-card {
        padding: 1.2rem;
    }
    
    .reason-icon {
        width: 55px;
        height: 55px;
        font-size: 1.6rem;
    }
    
    .reason-content h3 {
        font-size: 1rem;
    }
    
    .reason-content p {
        font-size: 0.9rem;
    }
    
    .travel-advisors {
        padding: 3.5rem 1.5rem;
    }
    
    .advisors-content {
        padding: 2.5rem 1.5rem;
        border-radius: 1.2rem;
    }
    
    .advisors-header h2 {
        font-size: 2rem;
    }
    
    .advisors-images {
        gap: -0.6rem;
    }
    
    .advisor-avatar {
        width: 55px;
        height: 55px;
        margin: 0 -0.35rem;
    }
    
    .advisors-highlight {
        font-size: 0.98rem;
    }
    
    .advisors-description {
        font-size: 0.92rem;
    }
    
    .deals-container {
        animation-duration: 60s;
    }

    /* Image banners on tablet */
    .image-banner {
        height: 300px;
        
    }
    
    .image-banner-content h3 {
        font-size: 2.2rem;
    }
    
    .image-banner-content p {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    /* How It Works mobile tune-up */
    .how-it-works {
        padding: 3rem 1.25rem;
        background-position: center;
    }
    #how-header {
        margin: 0 auto 3rem auto;
        padding: 0 1rem;
    }
    #how-header h2 {
        font-size: 2.1rem;
        line-height: 1.2;
    }
    #how-header .section-subtitle {
        font-size: 1.05rem;
        line-height: 1.4;
    }
    .steps-grid-professional {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 0;
        position: relative;
    }
    .steps-grid-professional::before {
        display: none;
    }
    .step-card {
        padding: 1.5rem 1.25rem;
        width: 100%;
        max-width: 26rem;
        margin: 0 auto;
    }
    .step-number {
        width: 80px;
        height: 80px;
        font-size: 2.1rem;
        margin-bottom: 1.5rem;
    }
    .step-card h3 {
        font-size: 1.25rem;
        line-height: 1.3;
    }
    .step-card p {
        font-size: 0.98rem;
        line-height: 1.55;
    }

    :root {
        --section-padding: 3rem 0;
    }
    
    .hero {
        min-height: 600px;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .subtitle {
        font-size: 1rem;
    }
    
    .flight-search {
        padding: 1.5rem;
    }
    
    .feature-card {
        padding: 1.5rem;
    }
    
    .travel-advisors {
        padding: 2.5rem 1rem;
    }
    
    .advisors-content {
        padding: 2rem 1.2rem;
        border-radius: 1rem;
    }
    
    .advisors-header h2 {
        font-size: 1.5rem;
    }
    
    .advisors-subtitle {
        font-size: 0.75rem;
        letter-spacing: 1.5px;
    }
    
    .advisors-images {
        gap: -0.4rem;
        margin-bottom: 1.5rem;
    }
    
    .advisor-avatar {
        width: 45px;
        height: 45px;
        margin: 0 -0.3rem;
    }
    
    .advisors-highlight {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }
    
    .advisors-description {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
        line-height: 1.5;
    }
    
    .advisors-btn {
        padding: 0.8rem 2rem;
        font-size: 0.9rem;
    }
    
    .why-us-header h2 {
        font-size: 1.8rem;
    }
    
    .why-us-subtitle {
        font-size: 0.75rem;
        letter-spacing: 1.5px;
    }
    
    .reasons-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .reason-card {
        flex-direction: row;
        padding: 1rem;
    }
    
    .reason-icon {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
    }
    
    .reason-content h3 {
        font-size: 0.95rem;
    }
    
    .reason-content p {
        font-size: 0.85rem;
    }
    
    .step {
        padding: 1.5rem 1rem;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    
    .legal-links {
        justify-content: center;
    }
    
    .submit-btn {
        width: 100%;
    }

    /* Image banners on mobile */
    .image-banner {
        height: 250px;
    }
    
    .image-banner-content h3 {
        font-size: 1.8rem;
    }
    
    .image-banner-content p {
        font-size: 1rem;
    }
}

/* Flatpickr Custom Styles */
.flatpickr-calendar {
    border-radius: var(--border-radius-md) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
    font-family: var(--body-font) !important;
}

.flatpickr-day.selected, .flatpickr-day.selected:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.flatpickr-day.today {
    border-color: var(--primary-color) !important;
}

.flatpickr-day:hover {
    background: rgba(27, 156, 163, 0.1) !important;
}
.done-btn {
      top: 0rem;
    opacity: 1;
}
/* Additional styles for sales offer page */
/* Sales offer page specific styles */
.sales-offer {
    padding: 4rem 0;
    background-color: var(--light-text);
}

.offer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 94%;
    margin: 2.5rem auto 1rem auto;
    padding: 0 1.5rem;
}

.offer-details {
    flex: 1;
    width: 40rem;
    background-color:  var(--light-text);
    border-radius: 0.6rem;
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.offer-form-container {
    flex: 1;
    max-width: 30rem;
}

.offer-form .form-group input {
    margin-left: 0;
}

.offer-form .form-group label {
    margin: 0;
    width: 3rem;
       display: flex;
    justify-content: center;
    align-items: center;
}

.offer-form .form-group {
    margin-bottom: 1rem;
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.search-results-header h3{
    color: var(--primary-color);
}

.route-info {
    margin-bottom: 1.5rem;
}

.route {
    font-size: 1.7rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--secondary-color);
    text-transform: capitalize;
}

.edit-search {
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
    margin-left: 10px;
}

.flight-details {
    background-color: var(--light-text);
    border-radius: 0.6rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.detail-row {
    display: flex;
    margin-bottom: 0.5rem;
}

.detail-label {
    font-weight: 600;
    min-width: 150px;
}

.price-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.old-price {
    text-decoration: line-through;
    color: #888;
    font-size: 1.2rem;
}

.new-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
}

.selling-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.selling-point {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.selling-point i {
    color: var(--primary-color);
}

.phone-callout {
    background-color: var(--light-text);
    padding: 1rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    position: relative;
}

.fa-clock {
    margin-right: 1.2rem;
    margin-left: 0.5rem;
}

.phone-callout p {
    max-width: 20rem;
    font-size: 0.9rem;
}


.phone-callout p b {
    font-weight: 600;
font-size: 1.1rem;
}

.phone-callout .phone-link {
   margin-left: auto;
   flex-shrink: 0;
   width: auto;

}

.exclusive-deals {
    text-align: center;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--secondary-color);
}

.offer-form {
    background-color:  var(--light-text);
    border-radius: 0.6rem;
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.offer-details {
    background-color:  var(--light-text);
    border-radius: var(--border-radius-md);
    padding: 2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.offer-form h3 {
    font-size: 1.4rem;
}

.form-title {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

.form-subtitle {
    text-align: center;
    margin-bottom: 1.5rem;
    color: var(--dark-text);
}


.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
}


.phone-input {
    display: flex;
}

.phone-prefix {
    background-color:var(--light-text);
    border-radius: 0.3rem 0 0 0.3rem;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.5rem;
}

.phone-input input {
    border-radius: 0 0.3rem 0.3rem 0;
}

.checkbox-group {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.checkbox-group input {
    border: var(--dark-filler);
    transition: var(--transition-medium);
}

.submit-btn {
    width: 100%;
  padding: 1rem;
    background-color: var(--primary-color);
    color:  var(--light-text);
    border: none;
    border-radius: 0.3rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.submit-btn:hover {
    background-color: var(--secondary-color);
    color:  var(--light-text);
}

.get-quote-section {
    padding: 4rem 0;
    background-color: var(--light-text);
}

.get-quote-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.quote-form {
    background-color:  var(--light-text);
    border-radius: 0.6rem;
    padding: 2.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.quote-form form .form-group input {
    margin: 0;
    
}

.quote-form form .form-group label {
      margin: 0;
    width: 3rem;
       display: flex;
    justify-content: center;
    align-items: center;
}


.quote-form form .form-group {
    margin-bottom: 1rem;
 }

.quote-form form{
    position: relative;
  
}


.quote-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.quote-header h2 {
    color: var(--primary-color);
    font-size: 1.6rem;
}

.quote-description {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--dark-text);
}

.form-group textarea {
    width: 100%;
    padding: 0.8rem;
    border: none;
    border-radius: 0.3rem;
    font-family: inherit;
    min-height: 120px;
    resize: vertical;
}

@media (max-width: 768px) {
    .selling-points {
        grid-template-columns: 1fr;
    }
    
    .price-container {
        flex-direction: column;
        align-items: flex-start;
    }
}
#search-form-row  { height: 2.55rem;}
#how-container {
    max-width: 100%;
}
.how-container {
    max-width: var(--container-width);
}
/* Animation styles*/



/* Loading Screen Styles */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--light-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

#loading-counter {
    font-size: 3.5rem;
    font-weight: 400;
    color: var(--dark-text);
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 10;
    bottom: 5rem;
}

#animation-container {
    margin: 0 auto;
    width: 70rem;
    height: 70rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 25rem;
}

#outside-border {
    width: 70rem;
    height: 70rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--secondary-color);
    border-radius: 50%;
    position: relative;
    z-index: 50;
}

#true-globe {
    width: 71rem;
    height: 35.5rem;
    background-color: var(--light-text);
    border-top-left-radius: 35rem;
    border-top-right-radius: 35rem;
    position: absolute;
    top: -0.5rem;
    left: -0.5rem;
    z-index: 50;
}

#map {
    width: 69.5rem;
    height: 69.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--light-text);
    border-radius: 50%;
    position: absolute;
    top: 0.25rem;
    left: 0.25rem;
    z-index: 100;
}

#true-map {
    width: 69rem;
    height: 69rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(world\(2\).jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
    z-index: 200;
}

#planea {
    left: -1.5rem;
    top:35rem;
    position: absolute;
    z-index: 1000;
    transform: rotate(-90deg);
}

#planea svg {
    width: 3rem;
    height: 3rem;
}

#animation-steps-container {
    display: flex;
    justify-content: center;
    max-width: 90%;
    margin-top: 1rem;
    gap: 2rem;
    position: relative;
    z-index: 10;
    bottom: 5rem;
}
 .stepa {
    color: var(--dark-text);
    font-weight: 400;
    font-size: 0.9rem;
    transition: all 0.5s ease;
    text-align: center;
    transform-origin: center;
}

.stepa.active {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1rem;
    opacity: 1;
    transform-origin: center;
}

.progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 5px;
    background: var(--secondary-color);
    width: 0%;
    transition: width 0.2s linear;
}

@media (max-width: 768px) {
    #animation-container {
        width: 220px;
        height: 220px;
    }
    
    #loading-counter {
        font-size: 2.8rem;
    }
    
    #steps-container {
        gap: 0.8rem;
        margin-top: 1.8rem;
    }
    
    .step {
        min-width: 160px;
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }
    
    .step.active {
        font-size: 0.9775rem;
    }
}
 /* Additional styles for best-deals page */
       #bestdeals {
        padding-top: 2rem;
       }
 
 .best-deals-hero {
            position: relative;
            min-height: 400px;
            background: url('bg_photos/best_deals_bg.png') no-repeat center center;
            background-size: cover;
            display: flex;
            align-items: center;
            padding: 120px 0 60px;
            margin-top: 5rem;
        }
        
        .best-deals-hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .best-deals-hero-content {
            position: relative;
            z-index: 1;
            color:  var(--light-text);
            max-width: 100%;
            margin: 0 auto;
            text-align: center;
            width: 100%;
        }
        
        .best-deals-hero-content h1 {
            font-size: 3.5rem;
            color:  var(--light-text);
            margin-bottom: 1.5rem;
            line-height: 1.1;
        }
        
        .best-deals-hero-content p {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            color: var(--light-text);
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .filter-tabs {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin: 2rem 0;
            padding: 0 1.5rem;
        }
        
        .filter-btn {
            padding: 0.8rem 1.5rem;
            background-color:  var(--light-text);
            border: none;
            border-radius: var(--border-radius-sm);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition-medium);
        }
        
        .filter-btn.active {
            background-color: var(--primary-color);
            color:  var(--light-text);
        }
        
        .filter-btn:hover:not(.active) {
            background-color: var(--dark-filler);
        }
        
        .deals-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 2rem;
            padding: 2rem;
            max-width: var(--container-width);
            margin: 0 auto;
        }
        
        .deal-card-grid {
            background-color: var(--light-text);
            border-radius: var(--border-radius-md);
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition-medium);
             height: calc(180px + 3rem + 1rem + 0.3rem + 1.3rem + 1.1rem + 0.4rem + 0.7rem + 0.8rem + 0.8rem + 1rem) ;
            display: flex;
            flex-direction: column;
            position: relative;
            
        }
        
        .deal-card-grid:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .deal-image-grid {
            height: 100%;
            background-size: cover;
            background-position: center;
            position: relative;
        }
    
        
        .deal-content-grid {
            position: absolute;
            top: 1.5rem;
            left: 1.5rem;
            z-index: 1000;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .deal-content-grid h3 {
            margin-bottom: 0.3rem;
            font-size: 1.5rem;
        }
        
        .deal-price-grid {
            font-size: 1.1rem;
            font-weight: 600;
            margin: 0.4rem 0 0.7rem 0;
        }
        
        .deal-content-grid .btn {
            margin-top: auto;
            align-self: flex-start;
             transition: var(--transition-medium);

        }
        .deal-card-grid .btn-secondary{
        opacity: 1;
}
.btn-secondary {
    background-color: var(--light-text) ;
    color: var(--primary-color);
}

 .deal-content-grid .btn:hover {
    background-color: var(--primary-color);
    color:  var(--light-text);
}
.deal-content .btn:hover {
    background-color: var(--primary-color);
    color:  var(--light-text);
}
        
        .quote-section {
            background-color: var(--light-text);
            padding: 4rem 0;
        }
        
        .quote-container {
            max-width: 700px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }
        
        .quote-form {
            background-color:  var(--light-text);
            border-radius: var(--border-radius-md);
            padding: 2.5rem;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .quote-header {
            text-align: center;
            margin-bottom: 1.5rem;
        }
        
        .quote-header h2 {
            color: var(--primary-color);
            font-size: 1.8rem;
        }
        
        .quote-description {
            text-align: center;
            margin-bottom: 2rem;
            color: var(--dark-text);
        }
        
        @media (max-width: 768px) {
            .best-deals-hero-content h1 {
                font-size: 2.5rem;
            }
            
            .best-deals-hero-content p {
                font-size: 1.1rem;
            }
            
            .filter-tabs {
                justify-content: flex-start;
                overflow-x: auto;
                padding-bottom: 0.5rem;
                scrollbar-width: thin;
            }
            
            .filter-btn {
                flex-shrink: 0;
            }
            
            .deals-grid {
                grid-template-columns: 1fr;
                padding: 1rem;
            }
        }


/*Blog Styles*/
        .blog-hero {
            position: relative;
            min-height: 550px;
            background: url('bg_photos/our_blog_bg.png') no-repeat center center;
            background-size: cover;
            display: flex;
            align-items: center;
            padding: 120px 0 60px;
            margin-top: 5rem;
        }

        .blog-hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3);
        }

        .blog-hero-content {
            position: relative;
            z-index: 1;
            color:  var(--light-text);
            max-width: 100%;
            margin: 0 auto;
            text-align: center;
            width: 100%;
        }

        .blog-hero-content h1 {
            font-size: 3.5rem;
            color:  var(--light-text);
            margin-bottom: 1.5rem;
            line-height: 1.1;
        }

        .blog-hero-content p {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            color: var(--light-text);
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .blog-posts {
            padding: var(--section-padding);
            background-color: var(--light-text);
        }

        .blog-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .blog-card {
            background-color:  var(--light-text);
            border-radius: var(--border-radius-md);
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: var(--transition-medium);
        }

        .blog-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .blog-image {
            height: 200px;
            overflow: hidden;
        }

        .blog-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-medium);
        }

        .blog-card:hover .blog-image img {
            transform: scale(1.05);
        }

        .blog-content {
            padding: 1.5rem;
        }

        .blog-date {
            font-size: 0.85rem;
            color: var(--primary-color);
            margin-bottom: 0.5rem;
        }

        .blog-content h3 {
            margin-bottom: 1rem;
            font-size: 1.4rem;
            line-height: 1.3;
        }

        .blog-excerpt {
            margin-bottom: 1.5rem;
            color: var(--dark-text);
            font-size: 0.8rem;
        }

        .read-more {
            display: inline-block;
            color: var(--primary-color);
            font-weight: 600;
            position: relative;
            margin-top: auto;
        }

        .read-more::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary-color);
            transition: var(--transition-medium);
        }

        .read-more:hover::after {
            width: 100%;
        }
/*About Us Styles*/
 .about-hero {
            position: relative;
            min-height: 550px;
            background: url('bg_photos/our_story_bg.png') no-repeat center center;
            background-size: cover;
            display: flex;
            align-items: center;
            padding: 120px 0 60px;
            margin-top: 5rem;
        }
        
        .about-hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
        }
        
        .about-hero-content {
            position: relative;
            z-index: 1;
            color:  var(--light-text);
            max-width: 100%;
            margin: 0 auto;
            text-align: center;
            width: 100%;
        }
        
        .about-hero-content h1 {
            font-size: 3.5rem;
            color:  var(--light-text);
            margin-bottom: 1.5rem;
            line-height: 1.1;
        }
        
        .about-hero-content p {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            color: var(--light-text);
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .who-we-are {
            padding: 5rem 0 1rem 0;
            background-color: var(--light-text);
        }
        
        .story-container {
            display: flex;
            gap: 3rem;
            align-items: center;
            margin-bottom: 4rem;
        }
        
        .story-content {
            flex: 1;
        }
        
        .story-image {
            flex: 1;
            border-radius: var(--border-radius-lg);
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .story-image img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s ease;
        }
        
        .story-image:hover img {
            transform: scale(1.03);
        }
         
    
        .stats-section {
            padding: 4rem 0;
            background-color: var(--primary-color);
            color:  var(--light-text);
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            text-align: center;
        }
        
        .stat-item h3 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            color:  var(--light-text);
        }
        
        .stat-item p {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        @media (max-width: 768px) {
            .story-container {
                flex-direction: column;
            }
            
            .about-hero-content h1 {
                font-size: 2.5rem;
            }
            
            .about-hero-content p {
                font-size: 1.1rem;
            }
        }
        .detail-value strong {
  font-weight: 700;
}
        .phone-search {
            background-color: var(--dark-filler);
        }
        
        input, textarea, select {
    text-transform: none !important;
}

       .error-message {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #b50a0a;
    color:  var(--light-text);
    padding: 0.5rem 0.75rem;
    border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
    font-size: 0.8rem;
    z-index: 1000;
    text-align: left;
    animation: fadeIn 0.3s ease;
}

.form-group {
    position: relative;
}

.phone-input {
    position: relative;
}

.phone-input .error-message {
    bottom: -2.5rem;
    border-radius: var(--border-radius-sm);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


        /*Phone Prefix Styles*/
#p1, #p2, #p3, #p4 {
    width: auto;
    margin: 0;
   padding: 0.5rem 0.3rem;
   text-align: center;
}

/* tiny dropdown */
.phone-select-wrapper{
    position:relative;
    width:100%;
}
.phone-prefix-select{
    appearance:none;
    -webkit-appearance:none;
    border:none;
    background:var(--light-text);
    font-size:1rem;
    padding:.4rem .5rem;
    cursor:pointer;
    width:4rem;
    height: 100%;
    border-radius:4px;
}


.phone-search{
    width:100%;
    padding:.35rem 2rem;
    font-size:.9rem;
    position: relative;
    top: 0;
    left: 0.2rem;
      background: #f8f9fa; /* Slightly darker background */
    border-bottom: 2px solid #007bff;
}

.fa-phone{
    width: 3rem;
    display: flex;
    justify-content: center;
}

#phone, #contact-phone, #modal-phone {
    position: relative;
    left: -5rem;
    width: 20rem;
}

.phone-dropdown{
    position:absolute;
    left:0;right:0;
    max-height:220px;
    width: 13rem;
    overflow-y:auto;
    background: var(--light-text);
    border:1px solid #ccc;
    border-radius:4px;
    z-index:999;
    box-shadow:0 2px 6px rgba(0,0,0,.15);
    display:none;
}
.phone-option{
    padding:.45rem .8rem;
    cursor:pointer;
    font-size:.9rem;
    display:flex;
    justify-content:space-between;
}
.phone-option:hover{background:var(--light-text);}
.phone-option small{color:#666;}

.phone-link .fa-phone {
    width: auto;
}
input, textarea, select {
    text-transform: none !important;
}

textarea:focus {border:none;
box-shadow:none; }

.modal-pop-up {
    position: fixed;
    width: 100%;
    height: 100vh;
    margin: auto;
    justify-content: center;
    align-items: center;
    z-index: 10000000;
  display: none;  
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  
  /* initial state – ok */
}
.modal-pop-up.show {
  display: flex !important;
}

.modal-pop-up .get-quote-section .get-quote-container {
    padding: 0;
}

.modal-pop-up .get-quote-section{
    padding: 0;
    margin: 2rem;
    border-radius: var(--border-radius-md);
}



#reviews-header .section-subtitle {margin-left:auto;
    flex: 1;
}
#reviews {padding:auto 1.5rem;
    position: relative;
}
#reviews-container{
    position: relative;
}

    #reviews-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    position: relative;
    margin: 0 auto 2.5rem auto; /* Changed to auto margins */
    padding: 0 1.5rem; /* Add padding instead of margins */
}
    
    
    /* hide the unwanted airport-code span completely */
.airport-code { display: none !important; }


  /* parent animates, children don’t */
/* --- smooth, slow hover on suggestion rows --- */
.hover-bg {
  transition: background-color 1.2s ease;
  will-change: background-color;
  transform: translateZ(0);          /* one GPU layer, no ghosting */
}

/* children inherit colour instantly, no own transition */
.hover-bg,
.hover-bg * {
  background-color: inherit !important;
  transition: none !important;
}

/* hover colour + text colour */
.hover-bg:hover,
.hover-bg:hover * {
  background-color: var(--light-text) !important;
}

.hover-bg:hover .code-span {
  color: var(--secondary-color) !important;
}

.city-suggestions {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  min-width: 18rem;   /* a bit smaller */
  max-width: none;
  z-index: 10;
}
#quote-phone {
  position: relative;
  left: -5rem;
  width: 20rem;
}

.flatpickr-next-month, .flatpickr-prev-month {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
.flatpickr-next-month svg{
  margin-left: 0rem !important;
  font-weight: 600;
}
.flatpickr-prev-month svg{
  margin-left: 0rem !important;
}
.card-image{
z-index: 100;
}
#clear-all, #add-flight {
       padding: 0.9rem 1.2rem;
       margin-top: 0rem;
   }
   .remove-flight-btn {
       background-color:  #f2a9b6;
       color:  var(--light-text) ;
       transition: var(--transition-medium);
       margin: 0.4rem 0.6rem 0.4rem 0;
   }
   .remove-flight-btn:active {
       background-color: #b50a0a;
       color:  var(--light-text);
   }
   .remove-flight-btn:hover {
       background-color: #b50a0a;
       color:  var(--light-text) ;
   }
.card-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);  /* dark screen */
  opacity: 1;
  transition: opacity .3s;
  z-index: 700;
  pointer-events: none;
}


.card-image:hover {
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.1);
}

.deal-card:hover {
    transform: translateY(-5px);
}
 .blog-carousel .deal-card .deal-content {
     top: 0.5rem;
 }
.deal-content {z-index:500 !important}

.who-we-are .container {max-width:100%;}
.who-we-are .container .story-container {margin:0 5rem 4rem 5rem;}

/* Vertical & horizontal track */
::-webkit-scrollbar {
  width: 12px;            /* vertical */
  height: 12px;           /* horizontal */
}

/* Track (background) */
::-webkit-scrollbar-track {
  background:  var(--light-text);
}

/* Thumb (the draggable handle) */
::-webkit-scrollbar-thumb {
  background: var(--secondary-color);
  border-radius: 12px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

header {
    z-index: 2000;
    
}
.deal-content-grid {
    z-index: 50 !important;
}
.deal-content{
    z-index: 100 !important;
}
.step {
    z-index: 50 !important;
}
/* Firefox-only (scrollbar-color) */
html, .city-suggestions, .modal-body,.phone-dropdown {
  scrollbar-color: var(--secondary-color)  var(--light-text);  /* thumb and track */
  scrollbar-width: thin;             /* thin | auto | none */
}

.read-more {position:absolute;
    bottom: 1.5rem;
    left:1.5rem;
    margin-top: 1.5rem;
}
.blog-card {
    position: relative;
}
.blog-content{
    padding-bottom: 4rem;
}

.header-cta .phone-link {margin-right:2rem;}

/* =========  RESPONSIVE FIXES TO BE APPENDED  ========= */


/* -------------------------------------------------------
   1. WHY-US-SECTION
   ----------------------------------------------------- */
@media (max-width: 770px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
    grid-template-rows: repeat(3, 1fr);    /* 3 rows */
    width: 100%;
    gap: 0.75rem;
  }
  .feature-card {
    padding: 1rem;
    font-size: 0.85rem;
  }
}

/* -------------------------------------------------------
   2. HOW-IT-WORKS SECTION
   ----------------------------------------------------- */
/* 2a. 1024px down – visual-road-map shorter by 4rem */
@media (max-width: 1024px) {
  #visual-roadmap {
    height: calc(21rem - 4rem); /* -4rem as requested */
  }
  #animation-steps-container{
      margin-top: -2rem !important;
  }
  #loading-counter{
      margin-bottom: 2rem !important;
  }
   .header {
        z-index: 500 !important;
    }
    .main-nav {
        position: fixed;
        top: 80px;
        right: -2.8rem;
        width: 50%;
        background-color:  var(--light-text);
        padding: 1rem;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        transform: translateX(150%);
        transition: var(--transition-medium);
        z-index: 200;
    }
    
    .main-nav.active {
        transform: translateX(0);
    }
    
    .main-nav ul {
        flex-direction: column;
        gap: 1rem;
        margin-left: 1rem;
    }
    
    .header-cta {
        display: block;
    }
    
    .header-cta a {
        margin-right: 0!important;
        position: absolute;
        right: 4rem;
        z-index: 501;
        top: 50%;
        transform: translateY(-50%);
    }
    .mobile-menu-btn {
        display: block;
        margin-right: 0.5rem;
    }
    
}

/* 2b. 770px down – complete redesign */
@media (max-width: 770px) {
  /* reset the whole how-it-works layout */
  .how-wrapper {
    position: relative;
    flex-direction: column;
    align-items: center;
  }

  /* each step: left & bottom margin reset */
  .step-card {
    margin-left: 0 !important;
    margin-bottom: 1.5rem;
    width: 100%;
    max-width: 25rem;
    padding: 2rem 1.5rem;
  }


@media (max-width: 770px) {
    .section-header {
        flex-direction: column;
        text-align: center;
    }
    
    .section-header h2 {
        font-size: 2rem !important;
        margin-bottom: 0.5rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
        margin: 0 auto;
        order: 2;
    }
}

@media (max-width: 600px) {
    body {
        overflow-x: hidden;
    }
    
    .container {
        width: 100%;
        padding: 0 1rem;
    }
    #multi-city-buttons{
        justify-content: center;
        gap: 0.5rem;
    }
    #multi-city-buttons button {
        width: 100%;
        
    }
    #search-form-row button {
        max-width: 100%;
    }
}


/* Flight Search Form */
@media (max-width: 770px) {
    
    #airlines {
        display: none;
    }
}

/* Why Us Section */
@media (max-width: 770px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        height: auto;
    }
    .offer-form-container {margin-left:auto;
        margin-right: auto;
    }
}

/* How It Works */
@media (max-width: 1024px) {
    .steps-grid-professional {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .step-card::after {
        display: none;
    }
}

@media (max-width: 770px) {
    .quote-form {
        padding: 1.8rem 1.2rem;
    }
    
    .step-card {
        margin-left: 0 !important;
        margin-bottom: 1.5rem;
        width: 100%;
        padding: 2rem 1.5rem;
    }
    
    .steps-grid-professional {
        grid-template-columns: 1fr;
    }

#how-it-works{
    padding-bottom: 4rem;
}

}

/* FAQ Section */
@media (min-width: 480px) and (max-width: 770px) {
    .faq {
        margin: 0 1rem;
    }
}

@media (max-width: 480px) {
    .faq-question {
        font-size: 1rem;
        padding: 1rem;
    }
    
    .faq-answer p {
        font-size: 0.9rem;
    }
    #grid-container{
    padding: 1rem 0;
    }
    .reviews-grid{
        gap:1rem;
    }
}

/* Footer */
@media (max-width: 1024px) {
    .footer-grid > :nth-child(2) {
        display: none;
    }
    .sales-offer{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    
}

@media (max-width: 770px) {
    .footer-grid > :nth-child(2) {
        display: block;
    }
    
     .header-cta .phone-link p {
         display: inline;
     }
    .footer-grid > :nth-child(2) ul {
        columns: 2;
        column-gap: 2rem;
    }
    .steps-container {width:100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .step {
        min-width: 100%;
    }
    #animation-steps-container{
      margin-top: 1rem !important;
  }
  #loading-counter{
      margin-top: 6rem !important;
  }
}
    
     #outside-border,
    #map,
    #true-map {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        
    }
    
    #true-globe {
        width: 101%;
        height: 50.5%;
        border-radius: 50% 50% 0 0;

        
        
    }
    #animation-container {
        width: 160vmin;
        height: 160vmin;
        bottom: -95vmin;
    }
     #map{
        margin-left:-0.25rem ;
        
        border: 0.25rem solid var(--light-text);
     }
    #loading-counter {
        font-size: 2.8rem;
        position: relative;
        bottom: 8rem;
        z-index: 500;
    }
    
    .stepa {
        font-size: 0.8rem;
    }
    
    .stepa.active {
        font-size: 0.92rem;
    }
    #animation-steps-container {
        gap: 0.85rem;
        flex-direction: column;
        bottom: 10rem;
        z-index: 500;
    }
    #loading-screen {
    overflow-x: hidden;
     overflow: hidden;
        position: fixed;
}
#planea {
        top: 48%;
        left: -1.9%;
        transform: rotate(-90deg);
       width: 2.3rem;
       height: 2.3rem;
       z-index: 500;
       
    }
}

 @media (max-width: 700px) {
       .phone-callout .phone-link,  #cabin-display, #passengers-display{
        flex: 1;
    }
    .phone-callout i{
        flex:0 ;
    }
    
     .phone-callout .phone-link , #cabin-display, #passengers-display{
        order: 3;
        flex: 100%;
        margin-top: 1rem !important;
        margin: auto;
     }
    #cabin-display, #passengers-display{
        margin-top:0rem !important;
    }
    
    .phone-callout, .detail-row, .search-results-header {
        flex-wrap: wrap;
    }
    
 }
/* 1.  Remove the hard-coded / max-width widths */
.offer-details,
.offer-form-container {
    flex: 1 1 0;              /* let flexbox decide */
    min-width: 0;             /* allow shrinking past content */
    max-width: 100%;          /* never overflow viewport */
}

/* 2.  Ensure the container can actually shrink */
.offer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    width: 96%;              /* full line */
    max-width: var(--container-width);  /* 1200 px */
    margin: 2.5rem auto 1rem;
    padding: 0;               /* no side padding needed */
}
/* Additional fixes for body overflow */
@media (max-width: 600px) {
    html, body {
        width: 100%;
        overflow-x: hidden;
    }
    .offer-details{
        width: 96%!important;
    }
    .offer-form-container{
        width: 75% !important;
    }
    .how-it-works {
        padding: 2rem 0;
    }
     .form-group{
        flex: 1;
    }
    #search-form-row {
        order: 3;
        flex: 100%;
    }
    
     #search-form-row .btn {
         width: 100% ;
         
     }
    .form-row {
        flex-wrap: wrap;
    }
   #ariv .city-suggestions{
       left: 21%;
   }
    #depart .city-suggestions{
       left: 79%;
   }
    .ariv .city-suggestions{
       left: 21%;
   }
    .depart .city-suggestions{
       left: 79%;
   }
   
   
   #clear-all, #add-flight {
       padding: 0.9rem 1.2rem;
       margin-top: 0rem;
   }
   .offer-container{
        flex-direction: column;
        width: 100%;
        justify-content: center !important;
        align-items: center !important;
        margin-left: auto;
        padding: 0 !important;
        
    }
    .offer-details{ width: 96% !important}

}


@media (max-width: 480px) {
    .offer-form-container{ width: 96% !important;
       
    }
    
    .special-deal-section .container, .deal-details-container{
        padding: 0 !important;
        margin: auto;
    }
    .deal-details-container{
        width: 96%;
    }
    
      .ariv .city-suggestions{
       left: 21%;
   }
    .depart .city-suggestions{
       left: 79%;
   }
     .multi-city-departure{
        flex: 1;
    }
    .multi-city-departure {
        order: 3;
        flex: 100%;
    }
    
    .multi-city-flight {
        flex-wrap: wrap;
    }
    .quote-header{
        margin-bottom: 0.5rem;
    }
    
    .features-grid {
        padding: 0 0 2rem 0;
    }
    .header-cta .phone-link p {
         display: none;
     }
    
    .why-us {
        padding-bottom: 1rem;
    }
    #best-deals-container .section-header{
        margin-bottom: 1rem !important;
    }
    .section-header {
        margin: 0 0 2rem 0 !important;
    }
    
    .flight-search {
        padding-top: 0.5rem;
    }
    .offer-details{
        padding: 1.5rem;
    }
    .flight-details, .price-container{
        margin-bottom: 1rem;
    }
    
    .sales-offer .offer-container{
        padding: 0.7rem;
    }
    
     #outside-border,
    #map,
    #true-map {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        
    }
    .fa-clock {display:none;}
    
    .fa-ticket {
        right:-2rem!important;
    }
    
    #true-globe {
        width: 101%;
        height: 50.5%;
        border-radius: 50% 50% 0 0;
        
    }
    #city-description-text {
        display: none;
    }
    
    #animation-container {
        width: 160vmin;
        height: 160vmin;
        bottom: -95vmin;
    }
     #map{
        margin-left:-0.25rem ;
        
        border: 0.25rem solid var(--light-text);
     }
    #loading-counter {
        font-size: 2.8rem;
        margin-bottom: 1rem;
        z-index: 500;
    }
    
    .offer-container{
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }
    .offer-details{ width: 96% !important;

    }
    .offer-form-container{
        margin: 0 !important;
        width: 96% !important;
    }

    .stepa {
        font-size: 0.8rem;
    }
    
    .stepa.active {
        font-size: 0.92rem;
    }
    #animation-steps-container {
        flex-direction: column;
        gap: 0.7rem;
        margin-bottom: 3rem;
        z-index: 500;
    }
    #loading-screen {
    overflow-x: hidden;
     overflow: hidden;
        position: fixed;
}
#planea {
        top: 46%;
        left: -1.95%;
        transform: rotate(-90deg);
       
    }
    #planea svg { width: 2.2rem;
    height: 2.2rem;}
    
    .quote-form {
        flex: 1;
        width: 96vw !important;
    }
    .step-content {
        padding: 1rem;
    }
    .step-content h3 {
        margin-bottom: 0.45rem;
    }
    
    textarea{
        min-height: 100px!important;
    }
    
    .quote-description{
        margin-bottom: 1rem;
        font-size: 0.95rem;
    }
    .checkbox-group label {
        font-size: 0.8rem !important;
    }
    .flight-search {
        padding: 0.5rem 1rem 1.5rem 1rem;
    }
    header .phone-link{
        font-size: 1.3rem;
    }
    .who-we-are .container .section-header {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .who-we-are {
        padding: 4rem 0;
    }
    .story-container{
        margin: 0rem 1rem !important;
        width: 96%;
    }
}

/* default: 3 or more columns */
.blog-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* ≤ 1024 px – 2 columns */
@media (max-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .main-nav{
      border-radius: var(--border-radius-sm);
  }
}

/* ≤ 770 px – 1 column */
@media (max-width: 770px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }
  .offer-form-container{ width: 86% ;
       
    }
  .blog-excerpt{
      margin-bottom: 1rem !important;
  }
}
        
        .custom-dropdown {
            position: relative;
            width: 100%;
        
        }
        
        .dropdown-select {
            margin-left: calc(24px + 0.8rem);
            width: calc(100% - calc(24px + 0.8rem));
            font-size: 0.95rem;
  border-radius: var(--border-radius-sm);
  padding: 0.7rem 1rem 0.7rem 0.5rem;
            background:  var(--light-text);
            cursor: pointer;
            color: var(--secondary-color);
            position: relative;
            text-align: left;
        }
        
        .dropdown-select:after {
            content: "";
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid var(--secondary-color);
            transition: all 0.3s ease;
            
        }
        
        .dropdown-select.open:after {
            transform: translateY(-50%) rotate(180deg);
        }
        
        
        .dropdown-select.open {
            border-radius: var(--border-radius-sm);
        }
        
        .dropdown-options {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background:  var(--light-text);
          border-radius: var(--border-radius-sm);
            overflow: hidden;
            z-index: 100;
            display: none;
            max-height: 300px;
            overflow-y: auto;
            border-top: none;
              box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  z-index: 10;
        }
        
        .dropdown-options.open {
            display: block;
        }
        
        .dropdown-option {
            padding: 0.3rem 0.5rem;
            cursor: pointer;
            transition: var(--transition-medium);
            display: flex;
            align-items: center;
            color: var(--secondary-color);
        }
        
        .dropdown-option:hover {
           background-color: var(--light-text);
        }
        
        .dropdown-option.selected {
            background: var(--light-text);
        }
        
        .dropdown-option svg {
            margin-right: 10px;
            width: 18px;
            height: 18px;
        }
        
        .hidden-select {
            display: none;
        }
        
        .value-display {
           display: none;}
@media (max-width: 1200px) {
    .deal-details-container {
    gap: 1rem !important;
  }
  #animation-steps-container{
    margin-bottom: 4.5rem;
  }

}
@media (min-width: 1200px) {
    .deal-details-container {
    gap: 1rem !important;
  }
  #animation-steps-container{
    margin-bottom: 4.5rem;
  }

}
@media (max-width: 1142px) {
  .deal-details-container {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
}
@media (max-width: 1024px) {
    .offer-container{
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
    }
    .offer-form-container{ width: 60%;
        min-width: 15rem;
    }
  .deal-details-container {
    grid-template-columns: 1fr !important;
    gap: 2rem;
  }
}
@media (max-width: 950px) {
  #stat4 {
    display: none !important; 
  }
}
@media (max-width: 710px) {
  #stat4 {
    display: block !important;
  }
}

.carousel-btn{
    z-index: 400 !important;
}
.get-quote-container {
    padding: 0;
    width: 96vw;
    display: flex;
    justify-content: center;
    align-items: center;
}


.best-deals, #reviews {
    padding-bottom:2rem ;
}
.quote-section{
    padding-bottom: 2rem;
}
.get-quote-section{
    padding-top: 0rem;
    padding-bottom: 2rem;
}
.multi-city-departure{
    margin-right: 0.4rem;
}
#add-flight{
    background-color: var(--light-text);
}
#add-flight:hover {
  background-color: var(--primary-color);
}
#clear-all{
    background-color: #CC5C5C;
    color:  var(--light-text)!important;
}
.remove-flight-btn {
    background-color: #CC5C5C;
}
.error-message{
    z-index: 100 !important;
}
.flight-details{
    padding-bottom: 1rem!important;
}
@media (max-width: 480px) {
  .checkbox-group label {
    font-size: 0.7rem !important;
  }
    
}
  @media (max-width: 900px) {
  .feature-card {
    padding: 0.25rem;}}
    
    .phone-link{
        background-color: var(--secondary-color) ;
    }
    #search-form-row .search-btn {
        background-color: var(--secondary-color) ;
    }
      .phone-link:hover{
        background-color: var(--primary-color);
    }
     #search-form-row .search-btn:hover {
        background-color: var(--primary-color);
    }
    
    
    .header.scrolled       { background: var(--light-text) !important; box-shadow: 0 2px 6px rgba(0,0,0,.08) !important; }
.header.scrolled .container .logo a{ color: var(--primary-color) !important; }   /* logo text */
.header.scrolled .container .mobile-menu-btn i { color: var(--secondary-color) !important; } /* hamburger / close */
    .hero-titles .subtitle {
        font-weight: 600 !important;
        font-size: 1.3rem !important;
    }
    .hero-titles h1 {
        margin-bottom: 0.6rem !important;
    }
    .hero {
        padding: 4rem 0 60px !important;
        margin-top: 0;
    }
   @media (max-width: 768px) {

  /* 1.  hide first and last airline-logo divs */
  #airlines > div:first-child,
  #airlines > div:last-child {
    display: none;
  }
#airlines {
    display: flex;
    justify-content: center;
    align-items: center;
    
}
  /* 2.  shrink only the gap between the remaining logos */
  #airlines {
    gap: 1rem;          /* <-- adjust to whatever tighter spacing you want */
  }

  /* 3.  keep each logo’s own size unchanged */
 
}


 /*REDESIGN------------------------------------------------------------------------------------------------------------------------------------------*/
.header-cta .phone-link{
    background-color: transparent;
    padding-right: 0;
}
.header.scrolled .container .header-cta .phone-link{
    background-color: transparent;
    padding-right: 0;
    color: var(--secondary-color);
}
 .main-nav.active {
     height: calc(100vh - 4.8rem );
     border-radius: 0;
     margin-top: -0.2rem;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     width: 60%;
     box-shadow: none;
 }
 .main-nav.active ul{
     justify-content: center;
    align-items: center;
gap: 2.5rem;
margin-top: -10rem;
 }
 .main-nav.active ul li a{
     font-size: 1.2rem;
     font-weight: 500;
 }
 
 @media (max-width:1024px){
  .main-nav {
     height: calc(100vh - 4.8rem );
     border-radius: 0;
    margin-top: -0.09rem;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     width: 60%;
     box-shadow: none;
     border-left: 2px solid var(--dark-filler);
 }
 .main-nav ul{
     justify-content: center;
    align-items: center;
gap: 2.5rem;
margin-top: -10rem;
 }
 .main-nav ul li a{
     font-size: 1.2rem;
     font-weight: 500;
 }}
 
 @media (min-width:1024px){
      .main-nav ul li a{
          color:  var(--light-text);
      }
 }
  
 @media (min-width:600px){
      .header-cta .phone-link{
    background-color: transparent;
    padding-right: 1rem;
}
      
 }
 /*REDESIGN------------------------------------------------------------------------------------------------------------------------------------------*/
 .hero-content{
     margin-top: 0rem;
 }
 #clear-all {
  background-color: transparent;
  color: var(--secondary-color) !important;
}
.remove-flight-btn {
    background-color: transparent;
    color: var(--secondary-color) !important;
}
.remove-flight-btn i{
    background-color: transparent;
    color: var(--secondary-color) !important;
}
 #clear-all i{
  background-color: transparent;
  color: var(--secondary-color) !important;
}
#clear-all:hover {
  background-color: transparent;
  color: var(--secondary-color) !important;
}
.remove-flight-btn:hover{
    background-color: transparent;
    color: var(--secondary-color) !important;
}
#clear-all, #add-flight {
    padding: 0.2rem 1.2rem;
    margin-top: 0rem;
  }

#add-flight:hover{
   background-color: transparent !important;
   color: var(--primary-color);
}
.flight-number{
    top: -16px;
  left: 2px;
  background: transparent;
  color: gray;
  font-weight: 600;
  
}
#multi-city-container > :first-child{
    margin-top: 0.6rem;
}
/* Allow hero to grow when content expands */
.hero {
    height: auto;          /* remove fixed 100vh */
    min-height: 100vh;  
   /* still fill screen on load */
}

.multi-city-flight{
    margin-top: 1.7rem;
    
}
.hero-titles {
  margin-top: 0;
  max-width: 800px;
}

  /*REDESIGN------------------------------------------------------------------------------------------------------------------------------------------*/
  .book-now-btn{
      color: var(--secondary-color);
  }
 /*REDESIGN------------------------------------------------------------------------------------------------------------------------------------------*/
 #why-us-header h2{
     color:var(--secondary-color) !important;
 }
 .section-subtitle {
     color: var(--primary-color)!important ;
 }
 .feature-content p,.feature-content h3 {
     color: var(--secondary-color) !important;
 }
 .feature-content i {
     color: var(--primary-color) !important;
 }
 .feature-card {
     background-color: transparent;
     transition: none;
     margin-bottom: 0;
 }
 .feature-card:hover {
     transform: translateY(0.0rem);
     box-shadow: none;
    
     
 }
 .features-grid svg {
     transform: rotate(90deg);
     position: relative;
     margin-left: 0;
     font-size: 1rem;
     
 }
 
 .features-grid hr {
     color: var(--dark-filler);
     width: 1.5rem;
     height: 2px;
     transform: rotate(90deg);
     margin: 0.5rem 0;
 }
 .grid-spacer {
  visibility: hidden;   /* keeps the layout, hides the element */
  pointer-events: none; /* just in case */
}

 @media (max-width: 770px) {
    .features-grid {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    #visual-roadmap {
    display: none;
}
    .features-grid > :nth-child(3){
        display: none;
    }
  }
  @media (min-width: 770px) {

    .features-grid hr {
        display: none;
    }
.feature-card {
    height: 100%;

}
     .features-grid svg{
         display: none;
     }
     .features-grid {
         grid-template-columns: repeat(3, 1fr);
         grid-template-rows: repeat(2, 1fr);
        gap: 0rem;
        height: 100% !important;
  
     }
      .features-grid > :nth-child(3){
        display: flex;
    }
 
     
  }
 /*REDESIGN------------------------------------------------------------------------------------------------------------------------------------------*/

@media (min-width:770px){
    .fa-arrow-down{
         display: none;
     }
}
 @media (max-width:770px){
     .fa-arrow-down {
          font-size: 24px;
          color: var(--secondary-color);
          margin-bottom: 1rem;
     }
 }
 
  header {
        background-color: transparent !important;
        box-shadow: none !important;
        position: fixed !important;
    }
    header  .container .logo a {
        color:  var(--light-text) ;
        
    }
    .fa-bars, .fa-times {
        color: var(--light-text) ;
    }
    
   /*REDESIGN------------------------------------------------------------------------------------------------------------------------------------------*/
   
   .faq-item{
       box-shadow: none;
       
   }
     .faq-item:hover{
       box-shadow: none;
       
   }
   .faq-container{
       border-radius: var(--border-radius-lg);
       padding: 1.5rem;
      box-shadow:
0 2px 3px rgba(0,0,0,.04),
0 6px 12px -3px rgba(0,0,0,.07),
0 14px 28px -6px rgba(0,0,0,.06);
   }
    /*REDESIGN------------------------------------------------------------------------------------------------------------------------------------------*/
    .review-card, .deal-card-grid, .deal-card, .blog-card{
       box-shadow:
0 2px 3px rgba(0,0,0,.04),
0 6px 12px -3px rgba(0,0,0,.07),
0 14px 28px -6px rgba(0,0,0,.06);
    }
    section {padding: 4rem 0rem !important;}
    
    hr {
        width: 80%;
        color: var(--dark-filler);
        margin: 0 auto;
        height: 2px;
    }
    .flight-details {
        padding: 0;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
  border-top: 2px solid var(--dark-filler);
  border-bottom: 2px solid var(--dark-filler);
border-radius: 0;
padding-top: 1rem;
    }
    .route {
        font-size: 1.4rem;
    }
    .sales-offer {
        padding-top: 0rem !important; 
    }
    .offer-cta {
        padding: 0.7rem 1.2rem;
        color: var(--light-text);
        font-weight: 600;
        font-size: 0.9rem;
        border-radius: var(--border-radius-sm);
        background-color: var(--secondary-color);
        position: absolute;
        right: 0;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        cursor: pointer;
        
    }
    .offer-cta:hover {
        background-color: var(--primary-color);
        transition: var(--transition-medium);
    }
    .offer-cta .fa-chevron-right {
        margin-top: 0.2rem;
    margin-left: 0.5rem;
    }
    .price-container{
        display: flex;
        align-items: center;
        width: 100%;
        flex-direction: row;
        position: relative;
    }
    .offer-details {
         box-shadow:none;
         position: relative;
    }
    .offer-form, .quote-form{
         box-shadow:
0 2px 3px rgba(0,0,0,.04),
0 6px 12px -3px rgba(0,0,0,.07),
0 14px 28px -6px rgba(0,0,0,.06);
    }
    .about-book {
     position: relative;
  min-height: 300px;
  background: url('ss33.jpg') no-repeat center center;
    background-size: auto;
  background-size: cover;
  display: flex;
  align-items: center;
  padding: 120px 0 60px;
  padding-top: 5rem;
    }
    .about-book .container .about-hero-content h1 {
        margin-bottom: 0;
    }
    @media (min-width:1023px){
        .sales-offer  hr {
            display: none;
        }
    }
    .best-deals-hero , .blog-hero{
        margin-top: 0;
        padding-top: 8rem!important;
    }
    .filter-btn:hover{
        background-color: #e7e5e8;
    }
    .about-hero {
        margin-top: 0;
        padding-top: 5rem;
    }
    /* override anything that sets position / top / right */
.special-deal-info .deal-features .fa-ticket {
    position: absolute !important;
    z-index: 100;
    top: 1rem;
    right: 0;
    height: 100%;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: rotate(-45deg);
    margin: 0 2rem;
}
.modal-pop-up .get-quote-section {
    padding: 0!important;
}
.newsletter-form .btn {
    color: var(--secondary-color);
}
.newsletter-form .btn:hover {
    color: var(--light-text);
}
.faq-question {
    color: var(--secondary-color);
    
}
#reviews {
    display: none ;
}

header.scrolled .container .main-nav-and-ctas .main-nav ul li a {
    color: var(--secondary-color);
}
#articleModal .hr {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: var(--secondary-color)!important;
  padding: auto 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--light-text)!important;
  display: flex;
  justify-content: center;
}
.modal-close:hover {
    color: var(--primary-color);
}
.modal-body header {
    position: relative !important;
}
#reviews {
  display: block;
} 
 .fa-ticket{
     font-size: 4rem;
  color: var(--secondary-color) !important;
 }
 textarea {
  background: var(--light-text);
}
header .container {
  position: relative;
}
.phone-link{
    margin-left: 0rem;
}
     /*REDESIGN------------------------------------------------------------------------------------------------------------------------------------------*/