body{margin: 0px; padding:0px;}

p{ font-size:18px; text-align:justify; }
    /*------------------------header css start----------------------------*/
        /*-----------top bar css start-----------*/
        .top-bar {
          position: sticky;
          top: 0;
          background-color: #FFF;
          color: #000;
          padding: 10px 0;
          text-align: center;
          display: flex;
          justify-content: center;
          gap: 30px;
          z-index: 1000;
          box-shadow: 1px 1px 3px #f3f3f3;
        }

        .top-bar i {
          margin-right: 8px;
          color: #f1c40f;
        }

        .top-bar a {
          color: #000;
          text-decoration: none;
          font-weight: 500;
        }

          .top-bar a:hover {
            text-decoration: underline;
          }
        /*-----------top bar css start-----------*/
    /*------------------------------- Header  wrapper css start------------------------------ */
    .header {
      background: rgba(0, 0, 0, 0);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 28px;
     
      position: fixed;
      top: 40px; /* height of top-bar */
      z-index: 999;
      width: 100%;
    }

    @media only screen and (max-width:600px) {
  
      .header {
      background: #000; top:65px; padding: 15px 8px; width: 100%; }
}

/* --------------------   header logo css start------------------------*/
    .logo {
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }
    .logo img {
      font-size: 24px;
      font-weight: bold;
      color: #333;
      width: 215px;
      height: 130px;
      transition: width 1s;
    }
    .logo img {
      transition: width 1s, height 1s, opacity 0.3s ease-in-out;
                }
    .logo img {
      transition: all 0.4s ease-in-out;
    }

/*    for mobile*/
@media only screen and (max-width:600px) {
  .logo {
      width:100%; display: block; 
    }
    .logo img{width: 100px; height: auto;}

}
/*------------------------logo css end-------------------------------*/

/*-----------------------navbar css start ---------------------------*/
    .navbar {
      display: flex;
      gap: 25px;
    }

.navbar a {
  position: relative;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  font-size:1.2rem;
}

/* Pseudo-element for underline */
.navbar a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px; /* Adjust spacing below text */
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  width: 100%;
  height: 2px;
  background-color: #FFF;
  transition: transform 0.3s ease;
}

/* On hover, expand the underline */
.navbar a:hover::after {
  transform: translateX(-50%) scaleX(1);
}

    .navbar a {
      text-decoration: none;
      color: #FFF;
      font-weight: 500;
    }

    .header.shrink .navbar a {
      color: #333; /* Change to any color you want on scroll */
    }

   .header.shrink .navbar a::after {
  background-color: #333;} /* New underline color on scroll */
  
  .navbar-toggler-icon {
  width: 1.5em;
  height: 1.5em;
  position: relative;
  background-image: none;
  display: inline-block;
}

/* All three lines */
.navbar-toggler-icon::before,
.navbar-toggler-icon::after,
.navbar-toggler-icon div {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #FFF;
  left: 0;
  transition: 0.3s ease;
}

/* Top line */
.navbar-toggler-icon::before {
  top: 0;
}

/* Middle line */
.navbar-toggler-icon div {
  top: 50%;
  transform: translateY(-50%);
}

/* Bottom line */
.navbar-toggler-icon::after {
  bottom: 0;
}

/* When toggler is open - transform to X */
.navbar-toggler.open .navbar-toggler-icon::before {
  top: 50%;
  transform: rotate(45deg);
}

.navbar-toggler.open .navbar-toggler-icon div {
  opacity: 0;
}

.navbar-toggler.open .navbar-toggler-icon::after {
  bottom: 50%;
  transform: rotate(-45deg);
}







  ul.navbar-nav li a{ color:#FFF; }
  ul.navbar-nav li a:hover{ color:#FFF; }
  @media only screen and (max-width:600px) {
  .navbar { order:2 }


  .navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
    position: absolute;
    width: 308px;
    margin-top: 385px;
    background-color: rgb(3, 59, 93);
    margin-left: -240px;
    padding: 10px 20px;
}

}


.contact-call{ background-color:rgb(3, 59, 93); padding:20px 30px; color:#FFF; text-decoration:none; font-weight:600; }
@media only screen and (max-width:600px) {
  .contact-call{ background-color:rgb(3, 59, 93); padding:10px 10px; color:#FFF; text-decoration:none; font-weight:600; display:block; width:100%; text-align:center;  }

}


/*-----------------------navbar css---------------------------*/
/*------------------------------- Header wrapper css end------------------------------ */
/*------------------------header css end----------------------------*/



    /* Hero Section */
    .hero {
      height: 100vh;
      
      background-size: cover;
      background-position: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      text-align: center;
      position: relative;
    }

    .hero::after {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1;
    }

    .hero-content {
      position: relative;
      z-index: 2;
    }

    .hero h1 {
      font-size: 5rem;
      margin-bottom: 10px;
      text-transform: uppercase;
      font-weight: 800;
    }

    .hero p {
      font-size: 2rem;
      font-weight: 800;
    }



 @media only screen and (max-width:600px) {
  
.hero h1 {
      font-size: 1.5rem;
      margin-bottom: 10px;
      text-transform: uppercase;
      font-weight: 800;
    }

    .hero p {
      font-size: 0.8rem;
      font-weight: 800;
    }
}



    .header.shrink .logo img {
      font-size: 20px;
      width:100px;
      height: auto;
    }
   .shrink{ background:#FFF; }
   
    .submenu-toggle,
.subsubmenu-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.submenu-toggle i,
.subsubmenu-toggle i {
  transition: transform 0.3s ease;
}

/* Arrow animations */
.has-submenu.open > .submenu-toggle i {
  transform: rotate(180deg);
}
.has-subsubmenu.open > .subsubmenu-toggle i {
  transform: rotate(90deg);
}
.footer {
  background-color: #fff;
  color: #000;
}

.footer h5{color: rgb(32 50 102); font-weight: 800; font-size:1.5rem; margin-bottom: 15px;}
.footer p,
.footer a {
  color: #000;
  margin-bottom: 15px;
  display: block;
}

.footer a {
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #007bff; /* Optional hover color */
  text-decoration: underline;
}

/* Submenu toggles and arrow rotation */
.submenu-toggle,
.subsubmenu-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #000;
}

.submenu-toggle i,
.subsubmenu-toggle i {
  transition: transform 0.3s ease;
}

.has-submenu.open > .submenu-toggle i {
  transform: rotate(180deg);
}

.has-subsubmenu.open > .subsubmenu-toggle i {
  transform: rotate(90deg);
}

.submenu,
.subsubmenu {
  display: none;
}

/* Optional: Small text styling for nested links */
.submenu a,
.subsubmenu a {
  color: #444;
  font-size: 0.95rem;
}
.footer-wrapper{ display:block; width:100%; text-align:center;  }
.footer-info{ display:block; width:100%;  }
.footer-info i{ display:block; width:100%; margin:30px 0px 10px 0px;   }
.fooimg{height: 300px;}
.foo-ba-sa{ background-color:rgb(3 59 93); }
.footer-info i {
    text-align: center;
}


/*------------------------faq section css start------------------*/
.hero-section {
  background-size: cover;
  background-position: center;
  position: relative;
  background: url('../images/image-15.webp') no-repeat center center / cover;
}


.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1); /* dark overlay */
  z-index: 0;
}

.hero-section .container {
  position: relative;
  z-index: 1;
}
.hero-section h2{ color:rgb(3 59 93);  }

.accordion-button {
  background-color: rgb(3 59 93); color:#FFF;
}

.accordion-button:not(.collapsed) {
  color: #000;
  background-color: #e9ecef;
}
.accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
.accordion-item{ margin-bottom:10px; }
/*------------------------faq section css end------------------*/


/*------------------section one ------------------------*/
.custom-section {
  background: url('../images/image-16.webp') no-repeat center center / cover;
  position: relative;
  z-index: 1;
}
.custom-section h2{ color:rgb(32 50 102); }
.custom-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.5); /* dark overlay */
  z-index: 0;
}

.custom-section .container {
  position: relative;
  z-index: 1;
}

/* Rounded box for paragraph */
.bg-box {
  background-color: rgba(3, 37, 49, 1); /* light translucent */
  border-radius: 1.3rem;
  backdrop-filter: blur(5px);
  padding:10px 20px; /* Optional: glassy effect */
  
}
/*------------------section one end------------------------*/
/*------------------section two start------------------------*/
a.download-btn{background-color: rgb(3, 59, 93); color: #FFF; text-align:center; padding: 10px 20px; width:250px; margin:0px auto; text-decoration:none; font-size:1.5rem; }
a.download-btn2{background-color: rgb(3, 59, 93); color: #FFF; text-align:center; padding: 10px 20px; width:200px; margin:0px 20px; text-decoration:none; font-size:1.1rem; }
h2.heading-top-n{ color:rgb(66, 66, 66); font-weight:700; margin:10px 0px;}
.sec-two{}
.sec-two .img-one{ width:50%; height:auto; float:left; }



/*---------------------------video section---*/

.video-card {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  background-size: cover;
  background-position: center;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.video-card video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box-shadow-n{ -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 3px 11px 0 !important; }

.box-shadow-n h2{color:rgb(32 50 102); font-size: 4rem; font-weight: 700;}
.box-shadow-nr{ -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 3px 11px 0 !important; border-radius:10px; padding: 10px;}

.icon-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

.info-box h4 {
  margin-bottom: 5px;
}
.parallax-section {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  height: 100vh; /* Full viewport height */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

.parallax-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Dark overlay */
  z-index: 1;
}

.parallax-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 20px;
  font-size: 1.5rem;
}


.text-para-e{ background-color:rgba(255, 255, 255, .7); padding:20px 20px; color:#000; border-radius:20px; }
.image-inner{max-width:450px; display: block; margin: 0px auto;}

.contact-section {
  background: url('../images/image-16.webp') no-repeat center center;
  background-size: cover;
  position: relative;
  color: #fff;
}

.contact-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.1); /* dark overlay */
  z-index: 1;
}

.contact-section .container {
  position: relative;
  z-index: 2;
}

.contact-form {
  background-color: #fff;
  color: #000;
}
/* Tablets: portrait and landscape */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Your tablet-specific styles here */
	.navbar { order:2 }


  .navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
    position: absolute;
    width: 308px;
    margin-top: 385px;
    background-color: rgb(3, 59, 93);
    margin-left: -240px;
    padding: 10px 20px;
}
	
	
    .header.shrink .logo img {
      font-size: 20px;
      width:100px;
      height: auto;
    }
   .shrink{ background:#FFF; }
   
    .submenu-toggle,
.subsubmenu-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.submenu-toggle i,
.subsubmenu-toggle i {
  transition: transform 0.3s ease;
}

/* Arrow animations */
.has-submenu.open > .submenu-toggle i {
  transform: rotate(180deg);
}
.has-subsubmenu.open > .subsubmenu-toggle i {
  transform: rotate(90deg);
}

/* Submenu toggles and arrow rotation */
.submenu-toggle,
.subsubmenu-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: #000;
}

.submenu-toggle i,
.subsubmenu-toggle i {
  transition: transform 0.3s ease;
}

.has-submenu.open > .submenu-toggle i {
  transform: rotate(180deg);
}

.has-subsubmenu.open > .subsubmenu-toggle i {
  transform: rotate(90deg);
}

.submenu,
.subsubmenu {
  display: none;
}

/* Optional: Small text styling for nested links */
.submenu a,
.subsubmenu a {
  color: #444;
  font-size: 0.95rem;
}	
	
	.hero h1 {font-size:2rem;}
	.box-shadow-n h2{font-size:2rem;}
}