/*----padding, maring, overflow control---------------*/
body, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}


/* ---------- Hero Background with Multiple Images ---------- */
    .hero-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* Desktop view: hero-bg.png at 65%, hero1-bg.JPG default size */
      background: 
        url('hero-bg.png') no-repeat left top / 65% auto,
        url('hero1-bg.jpg') no-repeat right top / auto;
      z-index: -1;
    }
    /* Mobile view: change hero-bg.png to 100% */
    @media (max-width: 992px) {
      .hero-bg {
        background: 
          url('hero-bg.png') no-repeat left top / 100% auto,
          url('hero1-bg.jpg') no-repeat right top / auto;
      }
    }
    
/* Target iPad Pro in portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-section {
    padding-top: 40px; /* Adjust padding for better alignment */
    margin-top: 0;
  }
}

/* Target iPad Pro in landscape mode */
@media (min-width: 1024px) and (max-width: 1366px) {
  .hero-section {
    padding-top: 50px;
    margin-top: 0;
  }
}

    /* ---------- Contact Info ---------- */
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
}

/* Header container */
.header-contact {
  display: flex;
  justify-content: flex-end; /* right align on desktop */
  align-items: center;
  gap: 20px;
  padding: 15px 30px;
}

/* Contact item */
.contact-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-item img {
  width: 20px;
  height: 20px;
  display: block;
}

.contact-item span {
  font-size: 14px;
  line-height: 1;
}

/* Mobile: center items */
@media (max-width: 768px) {
  .header-contact {
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
  }
}






    
/* ---------- Navbar ---------- */
.custom-navbar {
  padding: 10px 50px;
  background-color: transparent;
  position: relative;
  z-index: 100;
}

.custom-navbar .navbar-brand img {
  max-width: 375px;
  height: auto;
  padding-left: 50px;
}

.custom-navbar .nav-item {
  font-size: 1.1rem;
  font-weight: 500;
  padding: 0 10px;
}

.custom-navbar .nav-link {
  color: black !important;
  transition: 0.3s;
  padding: 12px 20px;
}

.custom-navbar .nav-link:hover,
.custom-navbar .nav-link:focus,
.custom-navbar .nav-link:active {
  color: white !important;
  background-color: black;
  border-radius: 5px;
}

/* Dropdown Menu */
.custom-navbar .dropdown:hover .dropdown-menu {
  display: block;
}

.custom-navbar .dropdown-menu {
  display: none;
  background: transparent;
  border: none;
  box-shadow: 0px 4px 6px rgba(0,0,0,0.1);
}

.custom-navbar .dropdown-menu a {
  color: black !important;
}

.custom-navbar .dropdown-menu a:hover {
  background-color: black !important;
  color: white !important;
}

/* ---------- Mobile View (≤ 992px) ---------- */
@media (max-width: 992px) {
  .custom-navbar {
    padding: 0;
    background-color: black !important; /* Changes navbar background to black */
  }

  .custom-navbar .navbar-brand img {
    max-width: 250px;
    padding-left: 0;
  }

  .custom-navbar .nav-link {
    padding: 10px 15px;
    text-indent: 10px;
    color: white !important; /* Changes text color to white */
  }

  .custom-navbar .navbar-nav .nav-link:hover,
  .custom-navbar .navbar-nav .nav-link:focus,
  .custom-navbar .navbar-nav .nav-link:active {
    color: black !important;
    background-color: white !important;
    border-radius: 5px;
  }

  /* Ensure dropdown menu has a black background and white text */
  .custom-navbar .dropdown-menu {
    background-color: black !important;
  }

  .custom-navbar .dropdown-menu a {
    color: white !important;
  }

  .custom-navbar .dropdown-menu a:hover {
    background-color: white !important;
    color: black !important;
  }
}

    
    /* ---------- Hero Area with Slider Section ---------- */
    .hero-area {
      position: relative;
      height: 100vh;
      display: flex;
      align-items: center;
      color: white;
      text-align: center;
    }
    .hero-area .container-fluid {
      position: relative;
      z-index: 2;
    }
    
    /* ---------- Slider Section Styles ---------- */
    .slider_section .box {
      padding: 20px;
    }
    .slider_section .detail-box h1 {
      font-size: 3rem;
      font-weight: bold;
      color: black; /* h1 color is black on desktop */
      margin: 0 auto 100px auto; /* Desktop: 100px bottom margin, no top margin */
    }
    /* Mobile view: Change h1 size to 1.8rem and adjust margins: top 13px, bottom 25px */
    @media (max-width: 992px) {
      .slider_section .detail-box h1 {
        font-size: 1.8rem !important;
        margin: 13px auto 25px auto !important;
      }
    }
    /* Desktop media query for h1 (min-width: 993px) with a top margin of 20px */
    @media (min-width: 993px) {
      .slider_section .detail-box h1 {
        margin: 20px auto 100px auto !important;
      }
    }
    
    .slider_section .btn-box a {
      display: inline-block;
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      transition: 0.3s;
    }
    .slider_section .btn-box a:hover {
      background-color: #0056b3;
    }
    
    /* ---------- QR Code Styles ---------- */
    .qr-container {
      text-align: center;
      margin-top: 20px;
    }
    .qr-container .qr-code {
      max-width: 60%; /* Set to 60% */
    }
    .qr-container .qr-heading {
      margin-top: 10px;
      font-size: 1.5rem;
      color: black; /* Set heading color to black */
    }

.navbar-toggler-icon {
    filter: invert(1); /* Converts black to white */
}

@media (max-width: 992px) {
  .hero-area {
    height: auto !important;  /* Adjust height dynamically */
    padding-top: 80px; /* Push content right below navbar */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
  }

  .slider_section .detail-box h1 {
    margin: 0 auto 20px auto !important; /* Reduce bottom margin */
    font-size: 2rem !important; /* Adjust for tablets */
  }

  .qr-container {
    margin-top: 10px !important; /* Reduce space */
  }

  .qr-container .qr-code {
    max-width: 40%; /* Resize QR code for better fit */
  }
}