:root{--primary:#2e7d32;--accent:#c4392b;--white:#fff;--yellow:#ffad00}
    body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; color:#222}
    a{color:var(--primary)}
.bg_notofication { background:var(--yellow) !important;}
.bg_accent   { background:var(--accent); color: var(--white);}
.nav-link {
	color: var(--white) !important; }
h1.display-5 {
        font-size: 3.5rem;
        font-weight: 500;
    }
.text-notification {
    color: var(--white) !important;
}
.trip_type { display: flex;}
.btn.btn-primary { line-height: 1; padding: 13px 26px; background: #2e7d32 !important; border-color: #2e7d32;-hover-color: #fff;hover-bg: #2e7d32;hover-border-color: #2e7d32; focus-shadow-rgb: 49, 132, 253; active-color: #fff; active-bg: #2e7d32; }

.btn:hover{
	color:var(--yellow) !important;
	background-color:var(--primary) !important;
	border-color: var(--primary) !important;}
.btn_cstm:hover{
	color:#333 !important; 
	background-color:#fff !important; 
	border-color:#fff !important}

.btn-outline-primary { color: #fff !important; line-height: 1; padding: 13px 26px; background: #2e7d32 !important; border-color: #2e7d32 !important; hover-bg: #2e7d32;hover-border-color: #2e7d32; focus-shadow-rgb: 49, 132, 253; active-bg: #2e7d32; }


.d-grid-cstm {
    display: grid !important
;
    align-items: end;
}

    /* Header */
    .topbar{background:#fff;padding:10px 0;border-bottom:1px solid #eee}
    .brand{font-weight:700;color:var(--primary);letter-spacing:1px}
    .phone-sm{font-size: 26px; font-weight:600}

    /* Navbar center */
    .navbar .navbar-nav{gap:18px}
    .navbar .navbar-collapse{justify-content:center}

    /* HERO + INQUIRY FORM */
    .hero{background-image:url("../images/Ethiopian-aeroplane-hero-BG.webp");background-size:cover;background-position:center;position:relative;padding:80px 0}
    .hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,20,40,0.45),rgba(8,20,40,0.55))}
    .hero .container{position:relative;z-index:2}
    .hero h1{color:#fff}
    .hero p.lead{color:#e6eefc}

    /* Inquiry form card */
    .inquiry-card{background:rgba(255,255,255,0.98);padding:22px;border-radius:12px;box-shadow:0 10px 40px rgba(8,20,40,0.18)}

    /* Form groups and layout */
    .form-group{margin-bottom:16px}
    .form-group label{display:block;margin-bottom:6px;font-weight:600;color:#333}
    .form-control,.form-select{padding:10px 12px;border-radius:8px;border:1px solid #d7dbe0}
    .form-control:focus,.form-select:focus{box-shadow:none;border-color:var(--primary)}
    /* about us image */
.about-image {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.about-image img {
  width: 100%;
  display: block;
  border-radius: 12px;
}

.image-overlay-top-right {
   position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 15px 25px;
  border-radius: 8px;
  max-width: 80%;
}
.image-overlay-top-right h4 {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 600;
}

.image-overlay-top-right p {
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.image-overlay-top-right .btn {
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 4px;
}

    /* Trip toggle style */
    .trip-toggle label{margin-right:12px;font-weight:600}
    .trip-toggle input{margin-right:6px}

    /* Feature boxes */
    .feature-box{background:#fff;padding:26px;border-radius:10px;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,0.04);transition:transform .18s ease}
    .feature-box:hover{transform:translateY(-6px)}
    .feature-box i{font-size:32px;color:#2e7d32}

    /* Hot destinations */
    .dest-card{border-radius:10px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.06)}
    .dest-card img{width:100%;height:180px;object-fit:cover}
    .dest-card h6{margin:12px}
.hot-destinations h2 {
  font-weight: 700;
  color: #333;
}

.destination-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
  transition: transform 0.3s ease-in-out;
}

.destination-card img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease;
}

.destination-card:hover img {
  transform: scale(1.1);
}

.destination-card .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  text-align: center;
  padding: 20px;
  transition: all 0.4s ease;
  transform: translateY(100%);
}

.destination-card:hover .overlay {
  transform: translateY(0);
}

.destination-card h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
}

.destination-card p {
  font-size: 1.1rem;
  margin: 8px 0;
}

.destination-card .btn {
  margin-top: 10px;
  border-radius: 30px;
  font-weight: 600;
}
.contact-info {
    background-color: var(--white) !important;
    padding: 25px;
    margin-bottom: 25px;
}
.contact-info p a {
    color: var(--accent);
    font-size: 15px;
    display: block;
    margin-top: 5px;
}

    /* Fare layout */
    .fare-card{background:linear-gradient(180deg,#fff,#f7f9ff);border-radius:12px;padding:18px;box-shadow:0 10px 30px rgba(9,30,66,0.06);display:flex;gap:12px;align-items:center}
    .fare-card .logo{width:68px;height:48px;object-fit:contain;border-radius:8px}
    .fare-card .meta{flex:1}
    .fare-card .price{font-weight:800;color:var(--primary);font-size:20px}

    /* Marquee-style popular destinations (continuous) */
    .marquee-wrap{overflow:hidden}
    .marquee{display:flex;gap:18px;align-items:center;animation:marquee 22s linear infinite}
    .marquee .item{min-width:220px}
    @keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
    .marquee:hover{animation-play-state:paused}

    /* CTA */
    .cta{background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;padding:36px;border-radius:12px}

    /* Info boxes */
    .info-box{display:flex;gap:12px;align-items:flex-start;padding:14px;background:#fff;border-radius:10px}
    .info-box i{font-size:26px;color:var(--primary);margin-top:4px}

    /* Footer */
    footer{background:#333;color:#cbd7ea;padding:48px 0}
    footer a{color:#d6e6ff}

    @media(min-width:992px){
      .hero .inquiry-col{max-width:520px}
    }