.navbar input[type="checkbox"],
 .navbar .hamburger-lines {
     display: none;
 }


 .navbar {
     /* position: fixed; */
     width: 100%;
     background: var(--themeBlack);
     z-index: 100;
     display: flex;
     align-content: center;
     /* height: 130px; */
 }

 .navbar-container {
     display: grid;
     justify-content: space-between;
     align-items: center;
     grid-template-columns: auto auto auto;
 }

 .menu-items {
     order: 2;
     display: flex;
     padding: 6px;
     border-radius: 15px;
     width: 657px;
     align-content: center;
     justify-content: space-evenly;
     line-height: 40px;
 }

 .logo {
     font-size: 2.3rem;
     margin: auto 0;
 }

 .navbar .active {
     color: #6697FF;
     color: #8FB3FF;
 }

 .navbar {

     border-bottom: 1px solid #5b93e6b8;
     border-bottom: 1px solid #5b93e682;
     border-radius: 4px;
 }

 .navbar .defaultBtn a {
     display: flex;
     align-items: center;
     background: none;
     font-size: 15px;
     justify-content: center;
 }

 .navbar .headerBtn {
     order: 3;
     border-radius: 24px;
     text-align: center;
     padding: 10px 20px;
 }



 .navbar .logo img {
     width: 100%;
     height: 40px;
 }



 .navbar a {
     color: var(--white);
     text-decoration: none;
     font-weight: 500;
     font-size: var(--f16);
     font-weight: 500;
     transition: color 0.3s ease-in-out;
     position: relative;
 }

 .menu-items li {
     list-style: none;
     position: relative;
 }

 .menu-items li::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: 0;
     height: 2px;
     width: 0;
     background: #477EF3;
     z-index: 1;
 }

 .menu-items li:hover::after {
     width: 100%;
     transition: .5s ease;
 }

 /* Add this CSS to style the fixed navbar and apply animation */
 .navbar {
     position: fixed;
     top: 0;
     width: 100%;
     /* background-color: #fff; */
     /* Adjust as needed */
     z-index: 10;
     /* Ensure it's above other content */
     transition: top 0.3s;
     /* Add smooth transition effect */
 }

 .navbar.scrolled {
     top: -10px;
     height: 100px;
     /* Adjust this value based on navbar height */
 }

 .dropdown {
     position: relative;
 }


 .dropdown-menu {
     z-index: 1;
     left: 12%;
     /* top: 12%; */
     width: 70%;
     display: none;
     position: fixed;
     /* position: relative; */
     /* overflow: scroll; */

     background-color: #fff;
     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
     z-index: 1;
     background: rgba(255, 255, 255, 0.14);
     border-radius: 10px;
     box-shadow: 0 4px 30px rgb(0, 0, 0);
     backdrop-filter: blur(75px);
     -webkit-backdrop-filter: blur(5px);
     border: 1px solid rgba(255, 255, 255, 0.16);
     color: #FFF;

 }

 .dropdown-menu li {
     display: block;
     padding: 0 20px;
 }

 .dropdown-menu .dropdownItems ul a {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: var(--f14);
 }

 .dropdown-menu .dropdownItems {
     padding: 2vw;
 }

 .dropdown-menu .dropdownItems li {
     padding: 0;
 }

 .dropdown-menu .dropdownItems ul img {
     width: 20px;
 }

 .dropdown-menu .dropdownItems a {
     font-size: var(--f14);
     display: block;
     transition: .3s ease;
 }

 .dropdown-menu .dropdownItems a:hover {
     background: #8FB3FF2B;
     padding: 0 10px;
     border-radius: 4px;
     line-height: 40px;
 }

 .dropdown:hover .dropdown-menu {
     display: block;
     animation: fadeInDown 0.5s ease;
 }

 .dropdown-toggle::after {
     margin-left: 5px;
 }

 @keyframes fadeInDown {
     0% {
         opacity: 0;
         transform: translateY(-90px);
     }

     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Additional styling as needed */

 @media screen and (max-width:1200px) {
     .menu-items {
         width: auto;
     }

     .navbar a {
         font-size: 15px;
         margin: 0 15px;
     }

     .d-p {
         font-size: 16px;
         font-weight: 300;
     }

     .ourServices .swiper .swiper-button-next {
         right: -65%;
     }

     .ourServices .swiper .swiper-button-prev {
         left: -65%;
     }

     .ourServices .swiper {
         width: 420px;
         height: 480px;
     }
 }

 @media (max-width: 768px) {
     .navbar {
         opacity: 0.95;
     }

     .navbar-container input[type="checkbox"],
     .navbar-container .hamburger-lines {
         display: block;
     }

     .navbar-container {
         display: block;
         position: relative;
         height: 64px;
     }

     .navbar-container input[type="checkbox"] {
         position: absolute;
         display: block;
         height: 32px;
         width: 30px;
         top: 20px;
         /* left: 20px; */
         right:20px;
         z-index: 5;
         opacity: 0;
         cursor: pointer;
     }

     .navbar-container .hamburger-lines {
         display: block;
         height: 28px;
         width: 35px;
         position: absolute;
         top: 20px;
         /* left: 20px; */
         right:20px;
         z-index: 2;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
     }

     .navbar-container .hamburger-lines .line {
         display: block;
         height: 4px;
         width: 100%;
         border-radius: 10px;
         background: var(--white);
     }

     .navbar a {
         color: var(--themeBlack);
     }

     .navbar-container .hamburger-lines .line1 {
         transform-origin: 0% 0%;
         transition: transform 0.3s ease-in-out;
     }

     .navbar-container .hamburger-lines .line2 {
         transition: transform 0.2s ease-in-out;
     }

     .navbar-container .hamburger-lines .line3 {
         transform-origin: 0% 100%;
         transition: transform 0.3s ease-in-out;
     }

     .navbar .menu-items {
         padding-top: 30px;
         background: #fff;
         height: 100vh;
         max-width: 300px;
         transform: translate(-250%);
         display: flex;
         flex-direction: column;
         justify-content: start;
         margin-left: -40px;
         padding-left: 40px;
         transition: transform 0.5s ease-in-out;
         box-shadow: 5px 0px 10px 0px #aaa;
         overflow: scroll;
     }

     .navbar .menu-items li {
         margin-bottom: 0;
         font-size: 1.1rem;
         font-weight: 500;
     }

     .logo {
         position: fixed;
         top: 6px;
         /* right: 8px; */
         left: 8px;

         margin: 0;
     }

     .navbar-container input[type="checkbox"]:checked~.menu-items {
         border-top: 65px solid black;
         transform: translateX(0);
         right: -40px !important;
         position: absolute;
         width: 400px;
         top: 0;
         box-shadow: -5px 0px 10px 0px #aaa;
     }

     .navbar-container input[type="checkbox"]:checked~.hamburger-lines .line1 {
         transform: rotate(45deg);
     }

     .navbar-container input[type="checkbox"]:checked~.hamburger-lines .line2 {
         transform: scaleY(0);
     }

     .navbar-container input[type="checkbox"]:checked~.hamburger-lines .line3 {
         transform: rotate(-45deg);
     }

     .navbar .headerBtn {
         opacity: 0;
     }
 }

 @media (max-width: 500px) {
     .navbar-container input[type="checkbox"]:checked~.logo {
         display: none;
     }

     .navbar .menu-items {
         padding-top: 0;
         justify-content: start;
         padding: 20px;
         width: 300px;
     }

     .navbar-container input[type="checkbox"]:checked~.menu-items {
         right: 0 !important;
         /* width: 220px; */
         width: 280px;

     }


     .dropdown-menu {
         width: 100%;
          top: 6%;
          left:2%; 
          overflow: scroll;
          position: relative;
       
     }

     .navbar {
         height: 70px;
     }


 }