body{
  background: #E9EDF0;
  color:#15578A;
  padding-top: 80px;
  font-family: Poppins, Arial, sans-serif;
}
body .container {
    max-width: 1200px; /* prevents content from stretching too much on large screens */
    margin: 0 auto;    /* centers the container */
}

html{
  scroll-behavior: smooth;
}

/* ================= HEADER + NAVBAR ================= */

header{
  height: auto;
}

.navbar {
  transition: all 0.3s ease-in-out;
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(8px);
}

/* Brand (Logo + Text) */
.navbar-brand{
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  color:#222 !important;
}

.navbar-brand span{
  color:#155DB0;
}

/* Menu links */
.navbar-nav .nav-link{
  color:#333 !important;
  font-weight:500;
  position: relative;
  padding: 8px 5px;
  transition: 0.3s;
}

/* Hover effect */
.navbar-nav .nav-link:hover{
  color:#155DB0 !important;
}

/* Underline animation */
.navbar-nav .nav-link:not(.btn)::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  height:2px;
  width:0;
  background:#155DB0;
  transition: 0.3s;
}

.navbar-nav .nav-link:not(.btn):hover::after{
  width:100%;
}

/* Contact Button special style */
.navbar-nav .btn-danger{
  border-radius:30px;
  font-weight:600;
  padding:6px 18px !important;
  border:none;
}

/* Optional logo image */
.site-logo{
  height:45px;
  width:auto;
  margin-right:10px;
}

/* ================= MOBILE VIEW (FIXED & CLEAN) ================= */
@media (max-width: 768px){

  body {
    padding-top: 110px;
  }

  .navbar{
    min-height: 110px;
    padding: 15px 12px !important;
  }

  /* Center brand + keep toggler right */
.navbar .container {
  position: static !important;
}
.navbar-toggler {
  z-index: 1060;
}
  .navbar-brand {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
  }

  .navbar-toggler {
    z-index: 1060;
    border: none;
    padding: 6px 10px;
    position: absolute;
    right: 15px;
  }

  .navbar-collapse{
    background:#fff;
    padding:15px;
    margin-top:10px;
    border-radius:10px;
    text-align: center;
  }

  .navbar-nav{
    gap:10px !important;
  }

  .navbar-nav .nav-link{
    padding:12px;
    font-size:16px;
  }

  .navbar-nav .btn-danger{
    width:100%;
    text-align:center;
    margin-top: 8px;
  }
}

/* ================= DESKTOP VIEW ================= */
@media (min-width: 769px){

  .navbar{
    min-height: 75px;
    padding: 10px 0;
  }
}

/* ================= SHRINK ON SCROLL ================= */
.navbar.shrink {
  min-height: 65px !important;
  padding: 8px 12px !important;
}
    
    /* Hero Section */
    .hero{
      min-height:85vh;
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:40px 8%;
      gap:20px;
    }
    .hero-text{
      max-width:600px;
    }
    .hero-text h1{
      font-size:52px;
      color:#fff;
      line-height:1.2;
      margin-bottom:15px;
    }
    .hero-text h2{
      font-size:35px;
      color:#fff;
      line-height:1.2;
      margin-bottom:15px;
    }
     .hero-text h5{
      font-size:1.9em;
      color:#fff;
      line-height:1.2;
      margin-bottom:15px;
    }
    .hero-text span{color:#ffcc00;}
    .hero-text p{
      color:#cfd8dc;
      margin-bottom:25px;
      line-height:1.6;
    }
    .btn{
      display:inline-block;
      padding:14px 28px;
      background:#ffcc00;
      color:#000;
      border-radius:30px;
      text-decoration:none;
      font-weight:600;
      transition:.3s;
    }
    .btn:hover{background:#ffe066; transform:scale(1.05)}
    .hero-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 400px; /* desired height */
    font-size: 28px;
    font-weight: 800;
}

.hero-image img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover; /* ensures image covers container without distortion */
    border-radius: 6px; /* rounded corners */
}
@media (max-width: 767px) {
    .hero-image {
        height: auto;
    }

    .hero-image img {
        width: 100%;
        height: auto;
    }
}

    /* Countdown */
    .countdown{
      margin-top:25px;
      display:flex;
      gap:15px;
    }
    .time{
      background:rgba(255,255,255,0.08);
      padding:12px 16px;
      border-radius:12px;
      text-align:center;
      min-width:70px;
    }
    .time h3{font-size:20px}
    .time small{font-size:12px;color:#bbb}

    /* Deals (Slider) Section */
    .deals{
      padding:60px 8%;
      background:#0b1620;
    }
    .section-title{
      text-align:center;
      margin-bottom:40px;
    }
    .section-title h2{
      font-size:34px;
      margin-bottom:10px;
    }
    .section-title p{color:#9fb3c8}

    .deal-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:25px;
    }
    .deal-card{
      background:linear-gradient(160deg,#112233,#0a1b2a);
      padding:15px;
      border-radius:16px;
      transition:.3s;
    }
    .deal-card:hover{transform:translateY(-8px)}

/* Slider Styles */
.slider-wrapper{position:relative;overflow:hidden}
.slider{display:flex;gap:25px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:10px}
.slider::-webkit-scrollbar{display:none}
.slide-btn{position:absolute;top:40%;transform:translateY(-50%);background:#ffcc00;border:none;color:#000;font-size:22px;padding:12px 16px;border-radius:50%;cursor:pointer}
.slide-btn.prev{left:-10px}
.slide-btn.next{right:-10px}
.home-carousel .item{
    position:relative;
    height:80vh;
    min-height:380px;
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    justify-content:center;
}

.home-carousel .overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.45));
}

.home-carousel .content{
    position:relative;
    z-index:2;
    color:#fff;
    padding:1.5rem;
    max-width:1000px;
}

.home-carousel .btn{
    display:inline-block;
    padding:.75rem 1.25rem;
    border-radius:8px;
    background:#ff6b6b;
    color:#fff;
    text-decoration:none;
    font-weight:600;
}

@media (max-width:640px){
    .home-carousel .item{
        height:60vh;
    }
}

/* STOP mixing problem */
.home-carousel-section,
.hero-section,
.deals-section,
.cta-section {
    position: relative;
    clear: both;
    overflow: hidden;
}

/* Give proper height to carousel */
.home-carousel .item {
    height: 70vh;
}

.home-carousel .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Prevent Owl from stretching page */
.owl-stage,
.owl-stage-outer {
    overflow: hidden !important;
}

/* Fix container overflow issue */
.container-fluid {
    overflow-x: hidden;
}
  
   .deal-card{
      border-radius:16px;
      background: rgba(255,255,255,0.08);
      box-shadow: 0 8px 20px rgba(0,0,0,0.25);
      backdrop-filter: blur(6px);
    }

.deal-img{
  width: 100%;
  height: 150px;              /* Increase as needed */
  border-radius: 14px;
  background-position: center;
  background-size: cover;      /* IMPORTANT */
  background-repeat: no-repeat;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.25);
}
    .deal-info{padding-top:12px}
    .deal-info h4{margin-bottom:6px}
    .price{
      font-weight:700;
      color:#fff;
    }
    .old{color:#778ca3;text-decoration:line-through;margin-left:8px}

    /* Call to Action */
    .cta-section{
      padding:70px 8%;
      text-align:center;
      background:linear-gradient(135deg,#ff512f,#dd2476);
    }
    .cta-section h2{font-size:36px;margin-bottom:12px}

    /* Footer */
    footer{
      text-align:center;
      padding:25px;
      font-size:14px;
      color:#9fb3c8;
      background:#050a10;
    }

    @media(max-width:900px){
      .hero{flex-direction:column; text-align:center}
      .hero-image{width:100%;}
    }
    
    footer {
    background: linear-gradient(120deg, #0f2027, #203a43, #2c5364); /* matches body gradient */
    color: #ffffff;
    font-size: 14px;
}
.feature-icon {
  width: 70px;
  height: 70px;
  background: #046DBD;
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  font-size: 28px;
}

footer a {
    color: #ffcc00; /* highlight links if any */
    text-decoration: none;
    transition: 0.3s;
}

footer a:hover {
    color: #ffd633;
    text-decoration: underline;
}