@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap");
/*===========================
  COMMON css 
===========================*/

:root {
  --font-family: "Inter", sans-serif;
  --primary: #267bdb;
  --primary-dark: #2973c9;
  --primary-light: #e2f1ff;
  --accent: #00d4d7;
  --accent-dark: #00bac1;
  --accent-light: #dff9f8;
  --success: #13d527;
  --success-dark: #00ae11;
  --success-light: #eafbe7;
  --secondary: #8f15d5;
  --secondary-dark: #6013c7;
  --secondary-light: #f4e5fa;
  --info: #15b2d5;
  --info-dark: #0f8ca8;
  --info-light: #e0f5fa;
  --caution: #dbbb25;
  --caution-dark: #d58f15;
  --caution-light: #fbf9e4;
  --error: #e6185e;
  --error-dark: #bf1257;
  --error-light: #fce4eb;
  --black: #1d1d1d;
  --dark-1: #2d2d2d;
  --dark-2: #4d4d4d;
  --dark-3: #6d6d6d;
  --gray-1: #8d8d8d;
  --gray-2: #adadad;
  --gray-3: #cdcdcd;
  --gray-4: #e0e0e0;
  --light-1: #efefef;
  --light-2: #f5f5f5;
  --light-3: #fafafa;
  --white: #ffffff;
  --gradient-1: linear-gradient(180deg, #155bd5 0%, #1c3ab6 100%);
  --gradient-2: linear-gradient(180deg, #155bd5 13.02%, #00d4d7 85.42%);
  --gradient-3: linear-gradient(180deg, #155bd5 0%, #8f15d5 100%);
  --gradient-4: linear-gradient(180deg, #155bd5 0%, #13d527 100%);
  --gradient-5: linear-gradient(180deg, #155bd5 0%, #15bbd5 100%);
  --gradient-6: linear-gradient(180deg, #155bd5 0%, #dbbb25 100%);
  --gradient-7: linear-gradient(180deg, #155bd5 0%, #e6185e 100%);
  --gradient-8: linear-gradient(180deg, #1c3ab6 0%, #00bac1 100%);
  --gradient-9: linear-gradient(180deg, #00d4d7 13.02%, #155bd5 85.42%);
  --shadow-1: 0px 0px 1px rgba(40, 41, 61, 0.08),
    0px 0.5px 2px rgba(96, 97, 112, 0.16);
  --shadow-2: 0px 0px 1px rgba(40, 41, 61, 0.04),
    0px 2px 4px rgba(96, 97, 112, 0.16);
  --shadow-3: 0px 0px 2px rgba(40, 41, 61, 0.04),
    0px 4px 8px rgba(96, 97, 112, 0.16);
  --shadow-4: 0px 2px 4px rgba(40, 41, 61, 0.04),
    0px 8px 16px rgba(96, 97, 112, 0.16);
  --shadow-5: 0px 2px 8px rgba(40, 41, 61, 0.04),
    0px 16px 24px rgba(96, 97, 112, 0.16);
  --shadow-6: 0px 2px 8px rgba(40, 41, 61, 0.08),
    0px 20px 32px rgba(96, 97, 112, 0.24);
}

.navbar-expand-lg{
    top: -40px !important;
    transform: translateY(40px);
    transition: transform .7s;
    flex-wrap: wrap !important;
    background-color: var(--primary) !important;
}
.navbar-expand-lg{
    position: fixed !important;
    right: 0; 
    left: 0;
    z-index: 1030;
}
.nav-item a{
    color: var(--light-1) !important;
}
.navbar-area.navbar-nine .navbar-expand-lg .navbar-nav .nav-item a::after{
    background-color: var(--light-1) !important;
}
.navbar-area.navbar-nine .navbar-expand-lg .navbar-toggler .toggler-icon {
    background-color: var(--white);
  }


 
  .navbar-area.navbar-nine .fixed-top .navbar-collapse.show {
    /* background-color: var(--primary); */
    transform: translateX(0%);
    transition: 0.3s all ease-in-out;
  }
  .navbar-area.navbar-nine .fixed-top .navbar-btn .menu-bar {
    color: var(--white);
    background: var(--primary);
    border-color: rgba(238, 238, 238, 0.425);
  }
  
  .navbar-area.navbar-nine .fixed-top .navbar-btn .menu-bar:hover {
    color: var(--primary);
    background: var(--white);
    border-color: var(--primary);
  }



  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
    height: auto;
    display: block;
  }
  
  @media only screen and (min-width: 768px) and (max-width: 991px),
  (max-width: 767px) {
    .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
      height: 0;
      display: none;
    }
    .navbar-area.navbar-nine .fixed-top .navbar-collapse {
        background-color: var(--primary);
        transform: translateX(-300%);
        transition: 0.5s all ease-in-out !important;
      
      }
  }
  
  @media only screen and (min-width: 768px) and (max-width: 991px),
  (max-width: 767px) {
    .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu.show {
      height: auto;
    }
    .navbar-area.navbar-nine .navbar{
      padding: 0px 24px !important;
    }
  }
  
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li {
    position: relative;
  }
  
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler {
    color: var(--black);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
  }
  
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    position: relative;
    color: var(--dark-2);
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
    border-radius: 0;
    margin: 0 0;
    z-index: 5;
    opacity: 1;
  }
  
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a i {
    font-weight: 700;
    font-size: 12px;
  }
  
  @media only screen and (min-width: 768px) and (max-width: 991px),
  (max-width: 767px) {
    .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a i {
      display: none;
    }
  }
  
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i {
    display: inline-block;
  }
  
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    right: auto;
    left: 100%;
    top: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
  }
  
  @media only screen and (min-width: 1200px) and (max-width: 1399px),
  only screen and (min-width: 1400px) {
    .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
      margin-left: 10px;
    }
  }
  
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
      padding-left: 30px;
    }
  }
  
  @media (max-width: 767px) {
    .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
      padding-left: 30px;
    }
  }
  
  @media only screen and (min-width: 768px) and (max-width: 991px),
  (max-width: 767px) {
    .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li .sub-menu.show {
      visibility: visible;
      height: auto;
      position: relative;
    }
  }
  
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
  }
  
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler {
    color: var(--white);
  }
  
  @media only screen and (min-width: 768px) and (max-width: 991px),
  (max-width: 767px) {
    .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler {
      color: var(--primary);
    }
  }
  
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover>a {
    color: var(--primary);
    padding-left: 22px;
  }
  
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover>a i {
    color: var(--primary);
  }
  
  @media only screen and (min-width: 768px) and (max-width: 991px),
  (max-width: 767px) {
    .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover>a {
      color: var(--primary);
    }
  }
  
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover>a::after {
    opacity: 1;
  }
  
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover>a::before {
    opacity: 1;
  }
  
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    top: 115%;
  }
  
  @media only screen and (min-width: 768px) and (max-width: 991px),
  (max-width: 767px) {
    .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-nav-toggler {
      display: inline-block;
      position: absolute;
      top: 0;
      right: 0;
      padding: 10px 14px;
      font-size: 16px;
      background: none;
      border: 0;
      color: var(--white);
    }
    .navbar-area.navbar-nine .fixed-top .navbar-collapse {
        background-color: var(--primary) !important;
  }
}
@media screen and (min-width: 900px) and (max-width: 1600px){
.navbar-expand-lg {
    padding: 0px 110px !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px),
(max-width: 767px) {
  /* .navbar-area.navbar-nine .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: var(--white);
    z-index: 8;
    padding: 10px 16px;
  } */

  .navbar-area.navbar-nine .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: -5%;
    width: 110%;
    background-color: var(--white);
    z-index: 8;
    padding: 10px 16px;
  }

  .navbar-area.navbar-nine .fixed-top .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: var(--white);
    z-index: 8;
    padding: 10px 16px;
  }
}