
.lvl-card{
  background:#0A0B19;
  padding-top:4rem!important;
  padding-bottom:3rem!important
}

footer li{
  list-style-type:none!important
  
}

.border{
  width:65%;
  border:1.5px solid transparent;
  border-image:linear-gradient(90deg,rgba(1,15,51,0) -20%,rgba(1,15,51,.6) 86%,rgba(1,15,51,0) 100%)!important;
  border-image-slice:1!important;
  position:relative;
  top:-27px;
  right:59px;
}

@media (min-width: 992px){

  .borders{
    border:1px solid;
  }

  .red-hover {
    white-space: nowrap;
  }
}
.social-icons .icon-div {
  border: 1px solid #808E9D;
  border-radius: 50px;
  padding: 8px;
  transition: border-color 0.3s; /* Add a transition for a smooth effect */
}

.social-icons .icon-div:hover {
  border: 1px solid #FF595E !important;
}

.social-icons .icon-div:hover img {
  filter: brightness(0) saturate(100%) invert(49%) sepia(85%) saturate(1936%) hue-rotate(323deg) brightness(98%) contrast(107%);
}


@media (max-width: 991.98px){
  .socialmediaimg{
    width:auto!important;
    padding-right:3rem;
    padding-left:3rem
  }
}
.line-height-22{
  line-height: 24px;
}
.width-icon{
  width: 18%;
  height: 5%;
}
.width-icon-1{
  width: 35%;
  height: 15%;
}
.email-phone:hover img{
  filter: brightness(0) saturate(100%) invert(49%) sepia(85%) saturate(1936%) hue-rotate(323deg) brightness(98%) contrast(107%);
}
.red-bck-color {
  color:#ff595ecc ;
}
.width-parg{
  width: 85%;
}
.width85{
  width: 85%;
}
@media (max-width:992.98px){
  .width85{
    width: 100%;
  }
}

@media (max-width: 1399.98px) and (min-width: 992px) {
  .width-parg {
    width: 93%;
  }

  .minimixe-col ul {
    padding-left: 0px !important;
  }
}

/* HEADER.SCSS */
.home-header {
background-color: #07142f;
z-index: 999;
transition: background-color 0.3s;
 
}

.home-header .navbar-toggler-icon {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path stroke="rgba(255, 255, 255, 1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 7h22M4 15h22M4 23h22"/></svg>');
}

.home-header.scrolled {
background-color: #FAFAFF !important;
}

.home-header.scrolled .nav-link.theme-secondary {
color: black !important;
}

.home-header.scrolled .navbar {
box-shadow: -1px 20px 14px 0px rgba(141, 141, 141, 0.09) !important;
}

.home-header.scrolled .navbar .nav-link:hover {
background-color: transparent;
color: black !important;
}

.home-header.scrolled .menu-items-1 a,
.home-header.scrolled .menu-items-2 a {
color: #1E1E1E !important;
}

.home-header.scrolled .menu-items-1 a:hover,
.home-header.scrolled .menu-items-2 a:hover {
background-color: transparent;
color: #21D496 !important;
}

.home-header.scrolled .dropdown-background {
background-color: #FAFAFF !important;
box-shadow: -1px 20px 14px 0px rgba(141, 141, 141, 0.09) !important;
transition: 0.3s;
}

.home-header.scrolled .shown-menu-2 {
background-color: #FAFAFF !important;
box-shadow: -1px 20px 14px 0px rgba(141, 141, 141, 0.09) !important;
transition: 0.3s;
}

.home-header.scrolled .navbar-brand:hover {
background-color: transparent !important;
}

.home-header.scrolled .offcanvas-body {
background-color: #FAFAFF !important;
}

.home-header.scrolled .offcanvas-header {
background-color: #FAFAFF !important;
}

.navbar-brand .main{
  position: relative;
  z-index: 9999;
}

.nav-link.theme-secondary {
  color: #0b162e; 
}


.nav-item a {
  padding: 5px 12px;
}

.nav-link.active {
  border-radius: 23px;
  padding: 5px 12px;
}

.navbar a:hover {
  background-color: #0b162e;
}
/* Navbar styles */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background-color: transparent;
width: 100%;
}

.navbar-toggler {
cursor: pointer;
}

.navbar-nav {
padding: 10px 10px;
margin: 0 10px;
list-style: none;
padding-left: 0;
display: flex; 
gap: 1rem; 
}

.nav-item {
position: relative;
transition: all 2s
}



.nav-link:hover {
color: #ff595e; 
}

/* Dropdown styles */
.dropdown-menu {
display: none !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
background-color: #fff !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
padding: 0 !important;
z-index: 999 !important;
min-width: 200px !important; 
}

.dropdown-item {
padding: 10px 20px;
text-decoration: none;
color: #333;
display: block;
white-space: nowrap;
}

.nav-item:hover .dropdown-menu {
display: block; 
}

/* Offcanvas styles */
.offcanvas {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}

.offcanvas.show {
display: flex;
}

/* .offcanvas-body {
background-color: white;
padding: 20px;
width: 90%;
max-width: 500px;
text-align: center;
border-radius: 8px;
} */

/* Add Media Query for Small Screens */
@media (max-width: 991px) {
.navbar-nav {
  display: none; /* Hide navbar links by default on small screens */
}

.navbar-nav.active {
  display: flex;
  flex-direction: column;
  gap: 0; /* Remove gap for vertical layout */
  background-color: white;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 1rem 0;
}

.navbar-toggler {
  display: block; /* Ensure toggler is shown */
}

.navbar-toggler.active + .navbar-nav {
  display: flex;
}

.dropdown-menu {
  position: static; /* Ensure dropdowns are not absolute on mobile */
  box-shadow: none;
}

.dropdown-item {
  padding: 15px 20px; /* Increase padding for better touch targets */
}
.navbar-brand .main-logo{
  z-index: -1;
}
}

  .nav-item:hover .menu-items-1 , .nav-item:hover .menu-items-2 {
    display: block !important; 
  }
  .menu-items-1, .menu-items-2{
    display: none;
  }
  .dropdown-background {
    position: absolute;
      top: -2px;
      /* left: 0; */
      width: 194vw;
      height: 110%;
      background-color: #0b162e;
      opacity: 0;
      transition: opacity 0.2s;
      z-index: -1;
      right: -420%;
  }
  
  /* Show background on hover */
  .dropdown:hover .dropdown-background , .second-dropdown:hover .dropdown-background  {
    opacity: 1; /* Make background visible */
  }
  .btn-theme-primary-home{
    z-index: 1000;
  }
  
  .menu-items-1 .dropdown-item,.menu-items-2 .dropdown-item{
    color:  #B3BCC5 ;
    font-weight: 200;
  }
  .dropdown-item:hover{
      color: #21D496 !important;
    }
    .nav-link.dropdown-toggle:hover {
      color: #21D496;
    }
    .active{
      color: #21D496 !important;
      background-color: transparent;
    }
    .dropdown-item:focus{
      background-color: transparent !important;
    }
    .offcanvas-start {
      top: 0px !important;
      width: 285px !important;
      height: 100% !important;
      background-color: #07142f !important; /* Match background color to your navbar */
      transition: transform 0.3s ease-in-out;
    }
    
   
    
    .navbar-toggler-icon {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path stroke="rgba(255, 255, 255, 1)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M4 7h22M4 15h22M4 23h22"/></svg>');
    }
    .offcanvas-body {
      padding: 1rem;
      color: #fff;
      overflow: scroll; 
    }
    .offcanvas-backdrop {
      display: none !important;
    }
    .offcanvas-backdrop.show {
      display: none !important;
    }

    @media (max-width:991.98px){
      .navbar-nav {
        padding: 0px 10px;
        margin: 0 10px;
      }
    }

    .nav-link {
      background: transparent !important;}

    .btn-close {
      filter: invert(1);
    }

    .phone-icon {
      width: 17px;
      height: 24px !important;
    }
    
 

.dropdown:hover .dropdown-menu {
  display: block;
}

/* Fix for mobile */
@media (max-width: 991px) {
  .dropdown-menu {
    position: static;
    width: auto;
  }
}
