@media screen and (min-width: 1400px) and (max-width: 2562px) {
     .container {
         max-width: 1320px;
     }
 }

 .banner-section {
     background-color: black;
 }



 /* ============== nav bar starts ================ */


 .navbar-main-section-main {
     height: 70px;
     background-color: #000;
 }

 .navbar-main-section {
     position: relative;
     padding-top: 15px;
     height: 45px;
     z-index: 12;
 }

 @media (min-width: 992px) {
     .navbar-main-section-main.is-sticky {
         position: fixed;
         top: 0;
         width: 100%;
         height: 100px;
         z-index: 1000;
         background-color: black;
         /* Optional: for visual clarity */
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         /* Optional: shadow on scroll */
         transition: background-color 0.3s ease, box-shadow 0.3s ease;
         /* Smooth transition */
     }

     .navbar-main-section-main.is-sticky .navbar {
         background: none;
         /* Optional: or use solid white */
         position: relative;
         /* Prevent overlapping issues */
         z-index: 1001;
     }

     /* Sticky nav link text color */
     .navbar-main-section-main.is-sticky .nav-link {
         color: #fff !important;
     }

     /* Sticky logo text color */
     .navbar-main-section-main.is-sticky .logo-nav-main a {
         color: #fff !important;
     }

     /* Optional: smooth transition for color */
     .navbar-main-section-main .nav-link,
     .logo-nav-main a {
         transition: color 0.3s ease;
     }
 }

 .navbar {
     width: 100%;
     position: absolute;
     z-index: 2;
     background: linear-gradient(to right,
             rgba(0, 0, 0, 0.1) 0%,
             /* Dark left edge */
             rgba(0, 0, 0, 0) 50%,
             /* Transparent middle */
             rgba(0, 0, 0, 0.1) 100%);
     /* Dark right edge */
 }

 .navbar-nav {
     margin-left: auto;
 }

 .nav-link {
     color: #ffffff;
     font-size: 14px;
     z-index: 6;
 }

 .logo-nav-main img {
     width: 60px;
     height: 60px;
 }

 .logo-nav-main a {
     color: #ffffff;
     font-weight: 600;
     padding-left: 10px;
 }

 /* Style the dropdown menu */
 .dropdown-menu {
     background-color: #ffffff;
     /* Background color */
     border: 1px solid #ddd;
     /* Border */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     /* Optional shadow */
     transition: all 0.3s ease;
     z-index: 18;
 }

 /* Style each dropdown item */
 .dropdown-item {
     color: #333;
     /* Text color */
     padding: 10px 20px;
     /* Spacing */
     font-size: 15px;
 }

 @media (max-width: 991.98px) {
     .navbar-nav .dropdown:hover>.dropdown-menu {
         display: none !important;
         /* Disable hover on mobile */
     }

     /* Make dropdown-menu show only when .show is added (by JS) */
     #navbarNav .dropdown-menu {
         display: none;
         opacity: 0;
         visibility: hidden;
         transition: none;
         /* Optional, for smooth JS toggling */
     }

     #navbarNav .dropdown-menu.show {
         display: block !important;
         opacity: 1;
         visibility: visible;
     }
 }


 /* Style the dropdown toggle link */
 .nav-link.dropdown-toggle {
     color: #fff;
     /* Bootstrap blue */
 }

 .nav-link.dropdown-toggle:hover {
     color: #0056b3;
 }

 .navbar .dropdown:hover .dropdown-menu {
     display: block;
     margin-top: 0;
     /* Optional: remove delay/jump */
 }

 .navbar-toggler {
     border-color: white;
     /* white border */
 }

 .navbar-toggler-icon {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
 }

 .navbar-collapse {
     display: flex;
     justify-content: space-between;
     align-items: baseline;
 }

 /* =======================  nav bar responsive  ================= */

 @media (max-width: 991.98px) {

     .dropdown-menu {
         background-color: none;
     }

     /* Slide-in menu container */
     #navbarNav {
         position: fixed;
         top: 0;
         left: -100%;
         height: 100vh;
         width: 250px;
         background-color: white;
         color: black;
         padding-top: 60px;
         text-align: left;
         transition: left 0.3s ease;
         z-index: 1008;
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
     }

     .navbar-nav {
         margin-left: 0px;
     }

     /* Show menu */
     #navbarNav.show {
         left: 0;
     }

     /* Style links */
     #navbarNav .nav-link {
         color: black;
         padding: 15px;
         display: block;
         text-align: left;
     }

     /* Optional overlay when menu is open */
     body.menu-open::before {
         content: "";
         position: fixed;
         top: 0;
         left: 250px;
         right: 0;
         bottom: 0;
         background-color: rgba(0, 0, 0, 0.3);
         z-index: 998;
     }

     /* Disable hover dropdown on mobile */
     .navbar-nav .dropdown:hover>.dropdown-menu {
         display: none !important;
     }

     /* Dropdown menu toggling via .show */
     #navbarNav .dropdown-menu {
         display: none;
         opacity: 0;
         visibility: hidden;
         transition: none;
     }

     #navbarNav .dropdown-menu.show {
         display: block !important;
         opacity: 1;
         visibility: visible;
     }

     /* Optional: Add ▼ indicator */
     #navbarNav .nav-item.dropdown>.nav-link::after {
         content: " ▼";
         font-size: 0.7rem;
         margin-left: 5px;
     }
 }



 /* ============== nav bar end ================ */

 .banner-main {
     height: 100vh;
 }

 /* ================  banner css  ==================== */


 .banner-main {
     padding: 30px 20px 0px 20px;
     background-color: #000;
 }

 .banner-main-heading {
     position: absolute;
     top: 40vh;
     width: 50%;
     z-index: 6;
 }

 .banner-main-heading h1 {
     font-size: 50px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 0px;
     text-align: left;
     top: 20px;
     left: 60px;
 }

 .banner-main-heading h2 {
     font-size: 45px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 20px;
     text-align: left;
     top: 20px;
     left: 60px;
 }

 .banner-main-heading h6 {
     font-size: 20px;
     font-weight: 700;
     color: #fff;
     text-align: left;
     margin-bottom: 20px;
     top: 20px;
     left: 60px;
 }

 .banner-video {
     position: relative;
     width: 100%;
     border-radius: 10px;
 }

 .banner-video {
     position: relative;
     width: 100%;
     border-radius: 10px;
 }


 .hero-video video {
     width: 100%;
     height: 95.5vh;
     margin-top: 0px;
     object-fit: cover;
     z-index: 0;
 }

 .video-overlay {
     position: absolute;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to right,
             rgba(0, 0, 0, 1) 0%,
             rgba(0, 0, 0, 0.2) 20%,
             rgba(0, 0, 0, 0.1) 100%);
     z-index: 2;
     pointer-events: none;
 }


 .play-pause-button {
     position: absolute;
     bottom: 15px;
     left: 15px;
     z-index: 10;
     background: rgba(0, 0, 0, 0.6);
     border: none;
     padding: 8px;
     border-radius: 50%;
     cursor: pointer;
 }

 .play-pause-button img {
     width: 24px;
     height: 24px;
 }

 /* Grid overrides (optional, for better spacing) */
 .banner-main .row {
     align-items: center;
 }

 .banner-main .col-lg-4,
 .banner-main .col-lg-8 {
     margin-bottom: 20px;
 }

 /* ========================= banner logo ======================== */

 .badge-a-main {
     width: fit-content;
     text-align: left;
 }

 .badge-a {
     position: relative;
     font-weight: 700;
     font-size: 25px;
     color: #fff;
     padding: 6px 14px;
     display: inline-block;
 }

 /* Left bracket */
 .badge-a::before {
     content: "";
     position: absolute;
     left: 0px;
     /* space from text */
     top: 0;
     bottom: 0;
     width: 50px;
     /* thickness of bracket */
     border-top: 4px solid #FFD700;
     border-bottom: 4px solid #FFD700;
     border-left: 4px solid #FFD700;
 }

 /* Right bracket */
 .badge-a::after {
     content: "";
     position: absolute;
     right: 0px;
     /* space from text */
     top: 0;
     bottom: 0;
     width: 50px;
     border-top: 4px solid #FFD700;
     border-bottom: 4px solid #FFD700;
     border-right: 4px solid #FFD700;
 }



 /* ====================== broucher-strip  ===================================  */


 .download-strip {
     width: 98%;
     position: relative;
     height: 300px;
 }

 /* =============================================================== */

 @media (min-width: 992px) {

     .banner-main .col-lg-4,
     .banner-main .col-lg-8 {
         margin-bottom: 0;
     }

 }

 @media (max-width: 992px) {
     .banner-main {
         height: 104vh;
     }
 }

 /* Media query: 1201px to 1399.98px */
 @media (min-width: 1201px) and (max-width: 1399.98px) {

     .banner-video {
         border-radius: 8px;
     }
 }

 /* Optional: Smaller devices */
 @media (max-width: 767.98px) {
     .banner-main {
         text-align: center;
     }
 }

  @media (max-width: 400px){
    .badge-a {
        font-size: 16px;
         text-align: center;
     }
  }

 /* ================================  nav-responsive  =========================== */

 @media (max-width: 1399px) and (min-width: 1200px) {
     .badge-a {
         font-size: 20px;
         color: #fff;
         padding: 5px 10px;
     }

     .nav-link {
         font-size: 13px;
     }

     .dropdown-item {
         font-size: 13px;
     }
 }

 @media (max-width: 1199px) and (min-width: 1025px) {
     .badge-a {
         font-size: 18px;
         color: #fff;
         padding: 4px 8px;
     }

     .nav-link {
         font-size: 11px;
     }

     .dropdown-item {
         font-size: 11px;
     }
 }

 @media (max-width: 1024px) and (min-width: 992px) {
     .badge-a {
         font-size: 17px;
         color: #fff;
         padding: 4px 8px;
     }

     .nav-link {
         font-size: 10px;
     }

     .dropdown-item {
         font-size: 10px;
     }
 }

 @media screen and (max-width: 992px) {}


 /* ==============================  banner responsive  ========================= */

 @media (max-width: 1399px) and (min-width: 1200px) {
     .banner-main-heading {
         position: absolute;
         top: 45vh;
         width: 50%;
         z-index: 6;
     }

     .banner-main-heading h1 {
         font-size: 45px;
         font-weight: 700;
         color: #fff;
         margin-bottom: 20px;
         text-align: left;
         top: 20px;
         left: 60px;
     }

     .banner-main-heading h2 {
         font-size: 45px;
         font-weight: 700;
         color: #fff;
         margin-bottom: 20px;
         text-align: left;
         top: 20px;
         left: 60px;
     }

     .banner-main-heading h6 {
         font-size: 18px;
         font-weight: 700;
         color: #fff;
         text-align: left;
         margin-bottom: 20px;
         top: 20px;
         left: 60px;
     }

     .banner-main {
         height: 90vh;
     }

     .hero-video video {
         width: 100%;
         height: 84.5vh;
         margin-top: 0px;
         object-fit: cover;
         z-index: 0;
     }

 }

 @media (max-width: 1199px) and (min-width: 992px) {

     .banner-main-heading {
         position: absolute;
         top: 45vh;
         width: 50%;
         z-index: 6;
     }

     .banner-main-heading h1 {
         font-size: 35px;
     }

     .banner-main-heading h2 {
         font-size: 35px;
     }

     .banner-main-heading h6 {
         font-size: 18px;
     }

     .banner-main {
         height: 90vh;
     }

     .hero-video video {
         width: 100%;
         height: 83.5vh;
     }


 }



 @media only screen and (min-width: 782px) and (max-width: 991px) {
     .navbar-main {
         padding: 15px;
     }

     .banner-main-heading {
         position: absolute;
         top: 45vh;
         width: 60%;
         z-index: 6;
     }

     .banner-main-heading h1 {
         font-size: 25px;
     }

     .banner-main-heading h2 {
         font-size: 25px;
     }

     .banner-main-heading h6 {
         font-size: 18px;
     }
 }

 @media only screen and (min-width: 601px) and (max-width: 781px) {
     .navbar-main {
         padding: 15px;
     }

     .banner-main-heading {
         position: absolute;
         top: 45vh;
         width: 60%;
         z-index: 6;
     }

     .banner-main-heading h1 {
         font-size: 25px;
     }

     .banner-main-heading h2 {
         font-size: 25px;
     }

     .banner-main-heading h6 {
         font-size: 18px;
     }

     .section1 {
         background-color: #000;
     }
 }

 @media screen and (max-width: 600px) {
     .navbar-main {
         padding: 15px;
     }

     .logo-nav-main img {
         width: 40px;
         height: 40px;
     }

     .burger {
         vertical-align: middle;
     }

     .banner-main-heading {
         position: absolute;
         top: 45vh;
         width: 80%;
         z-index: 6;
     }

     .banner-main-heading h1 {
         font-size: 25px;
         text-align: center;
     }

     .banner-main-heading h2 {
         font-size: 25px;
         text-align: center;
     }

     .banner-main-heading h6 {
         font-size: 18px;
         text-align: center;
     }

     .section1 {
         background-color: #000;
     }

     .download-strip {
         height: 720px;
     }
 }

 @media screen and (max-width: 375px) {
     .logo-nav-main img {
         width: 40px;
         height: 40px;
     }

     .burger {
         vertical-align: middle;
     }
 }


 /* ====================== broucher-strip responsive  ===================================  */

 @media only screen and (min-width: 768px) and (max-width: 991px) {
     .download-strip {
         width: 98%;
         position: relative;
         height: 650px;
     }
 }


 @media only screen and (min-width: 600px) and (max-width: 767px) {
     .download-strip {
         width: 98%;
         position: relative;
         height: 690px;
     }
 }