/* Navbar */
    .navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding: 0px;
    }
    .navbar .logo img {height: 40px;}

    .navbar ul {
      list-style: none;
     
    }

    .navbar ul li a{
    padding: 30px 15px;
    }
/* Base dropdown styling */
.navbar ul li {
  position: relative;
}

.navbar ul li .dropdown {
  position: fixed;
  top: 82px;
  left: 0;
  width: 100%; /* take full viewport width */
  background: #fff; /* set background */
  display: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  z-index: 99;
}

/* Show on hover */
.navbar ul li:hover .dropdown {
  display: flex;
  justify-content: space-between; /* left/right content split */
}

/* Left + Right sections */
.dropdown-left, .dropdown-right {
  flex: 1;
  padding: 0 20px;
}

.dropdown-left {
  max-width: 400px;
}

.dropdown-right {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 column layout */
  gap: 20px;
}

    .navbar ul li a {
      text-decoration: none;
      color: #fff !important;
      font-size: 18px;
      /* padding: 10px; */
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 3px;
      cursor: pointer;
      width: fit-content;
    }

    .d-md-block.fixed .navbar ul li a {
      text-decoration: none;
      color: #000;
    }


    .d-md-block.fixed .navbar ul li a:hover, .navbar ul li:hover > a {
      color: #ff5a2c; 
      /* transition: 0.2s all ease-in-out; */
      /* background: rgba(0, 0, 0, 0.4); */
      background: rgba(224, 93, 54,0.8);
    }
    .read.apply-now-btn:hover {
      background: #331766 !important;
      color: #fff !important;
    }
    #contact-menu .dropdown-left p {
      margin-bottom: 5px;
    }
    #contact-menu .dropdown-left p i {
      margin-right: 10px;
    }



    .navbar {max-width:1440px;margin:auto; padding: 0;
      /* padding:0px 18px 24px;    */
      display:flex;justify-content:flex-start;align-items:center;}
.logo {color:#fff;font-size:22px;font-weight:bold;}
.nav {list-style:none;display:flex;gap:32px;}
.nav > li {position:relative;}
.nav > li > a {color:#fff;text-decoration:none;font-size:15px;cursor:pointer;display:flex;align-items:center;gap:6px;}
.arrow {border: solid #fff;border-width: 0 2px 2px 0;display:inline-block;padding:4px;margin-left:4px;transform: rotate(45deg);transition:0.3s;}
.arrow.open {transform: rotate(-135deg);margin-top: 8px;}

/* Mega Menu */

.mega-menu{
position: fixed;
  /* top: 100px; */
  background: #1c1c1c;
  border-top: 1px solid #1c1c1c;
  /* display: none; */
  z-index: 10;
  width: 100vw;
  left: 0;
opacity:0;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  -webkit-transform-origin: top;
  transform-origin: top;
  min-height: 26rem;
-webkit-transition: top 1s ease,-webkit-transform .3s cubic-bezier(.23,1,.32,1);
  transition: top 1s ease,-webkit-transform .3s cubic-bezier(.23,1,.32,1);
  transition: transform .3s cubic-bezier(.23,1,.32,1),top 1s ease;
  transition: transform .3s cubic-bezier(.23,1,.32,1),top 1s ease,-webkit-transform .3s cubic-bezier(.23,1,.32,1);
}


.mega-menu.active {
  /* display:block; */
opacity:1;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  min-height: 26rem;
 -webkit-transition: top 1s ease,-webkit-transform .3s cubic-bezier(.23,1,.32,1);
  transition: top 1s ease,-webkit-transform .3s cubic-bezier(.23,1,.32,1);
  transition: transform .3s cubic-bezier(.23,1,.32,1),top 1s ease;
  transition: transform .3s cubic-bezier(.23,1,.32,1),top 1s ease,-webkit-transform .3s cubic-bezier(.23,1,.32,1);
  
}
.mega-wrapper {max-width: 100%;;margin:auto;display:flex;min-height:420px;}

/* Left Menu */
.mega-left {width: 15%;background:#1c1c1c;padding:32px 24px;}
.mega-left ul {list-style:none;}
.mega-left li {padding:20px 15px;cursor:pointer;font-size:18px;color:#8c8c8c;display:flex;justify-content:space-between;align-items:center;}
.mega-left li:hover,.mega-left li.active{background:#4d4d4d; color: #fff;}
.mega-left .arrow {border-color:#fff;margin-left:4px;transform:rotate(-45deg);}
.mega-left .arrow.open {transform:rotate(-45deg);}

/* Right Panel */
.mega-right {width: 60%;padding:36px 20px; max-height: 100vh;
  overflow: hidden;}
.menu-panel {display:none;}
.menu-panel.active {display:block;}
.panel-grid {display:grid;}
.panel h4{font-size:18px;margin-bottom:6px;color:#e05d36;margin-top: 6px;}
.panel ul{list-style:none;}
.panel li{margin-bottom:0px;}
.panel a{text-decoration:none;font-size:14px;color:#333;}
.panel a:hover{color:#0052cc;}




.panel-grid ul li a {
  padding: 5px 0px 10px 0;
 color: #8c8c8c !important;
}

.panel-grid ul li a:hover {
  background: transparent;
  color: #fff !important;
}

.left-content-menusec {
  padding: 32px 24px;
  width: 25%;
}

.left-content-menusec *{
  font-family: "Lato", sans-serif !important;
}

.left-content-menusec h3{
  color:#ccc;
  font-weight:600;
}

.left-content-menusec p{
   color:#8c8c8c;
}
.mega-left ul li {
  border-bottom: 1px solid #686868;
}
.panel-grid ul {
  column-count: 2;
}

.panel-grid ul li:hover a {
  background: transparent;
  color: #fff !important;
}

.mega-left li:hover .arrow{
  margin-top:0px;
}


.panel-grid.third-heading-level {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.panel-grid.third-heading-level ul{
  column-count: inherit;
}

.panel-grid .item p {
  color: #8c8c8c;
  margin-bottom: 5px;
}

.panel-grid a:hover{
  color:#fff;
}

#wwd-products ul li a:hover, #wwd-products ul li:hover{
  /* background: #4d4d4d; */
}

 #wwd-products ul li:hover{
  /* background: #4d4d4d; */
  background: transparent;
  border: 1px solid #e05d36;
}
 #wwd-products ul li a:hover{
    background: transparent;
 }

#wwd-products ul li{
  border: 1px solid transparent;
}

#wwd-products ul li a{
  padding:10px;
  height: 100%;
  align-items: baseline;
}

#wwd-products .panel-grid ul{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  /* grid-auto-rows: 1fr;  */
}

.panel-grid .item img {
  height: 40px;
  width: auto;
}
#wwd-products p {
  font-size: 16px !important;
}

.who-we-are-tab .panel-grid a {
  padding: 0px 0px;
}


.who-we-are-tab .panel-grid p, .who-we-are-tab .panel-grid a.read-more-btn{
  color:#8c8c8c !important;
}

.who-we-are-tab .panel-grid a.read-more-btn:hover{
  color:#e05d36!important;
}

.panel-grid .read-more-btn {
  padding: 0px;
  font-size: 16px;
}

.about-panel-content {
  display: flex;
  gap: 20px;
}

.about-panel-content img {
  height: fit-content;
  width: 250px;
  aspect-ratio: 16/9;
  border-radius: 8px;
  flex:1 0 0%;
  display: none;
}
.about-panel-text {
  position: relative;
  padding-right: 10px;
  flex:3 0 0%
}
.about-panel-content {
  width: 100% !important;
  align-items: flex-start !important;
}



.drop-menu-title-sec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.dropdown-right h4 {
  color: #e64a19;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
}

.dropdown .read:hover {
  background: transparent !important;
  color: #e64a19 !important;
}
.dropdown-right .item {
  margin-bottom: 30px;
}

.blog-sec, .testimonial-drop-sec {
  display: flex;
  margin-top: 0px;
}
.leftside-blk {
  width: 200px;
  margin-right: 10px;
  height: 100px;
  overflow: hidden;
  border-radius: 10px;
}
.dropdown .item img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
}
.rightside-blk {
  width: 80%;
  padding-top: 5px;
}
.rightside-blk h4 {
  color: #e05d36;
  font-size: 18px;
  margin-bottom: 4px;
  margin-top: 0px;
}
.dropdown .item p {
  font-size: 14px !important;
  color: #333;
  margin-bottom: 10px;
}
.drop-menu-title-sec a {
  padding: 0px !important;
}
.read {
  padding: 10px 0px 10px 0px !important;
  width: 100% !important;
}
.leftside-blk img {
  width: 100% !important;
  border-radius: 8px;
  margin-bottom: 10px;
  height: auto !important;
  object-fit: cover;
  aspect-ratio: 2/1;
  object-position: top;
}
.read .item {
  width: 100%;
}

.panel-grid p {
  color: #8c8c8c;
}

.read.apply-now-btn {
  background: #553b85;
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 50px;
  width: fit-content !important;
  font-size: 16px;
}

.read.apply-now-btn img {
  margin-left: 10px;
}

#careers-open-positions .panel-grid ul {
  column-count: 1;
}


.d-md-block.fixed {
  position: fixed;
  top: 0;
  z-index: 1;
  background-color: rgba(0,0,0,0.5) !important;
  box-shadow: 0px 1px 6px #292929 !important;
  backdrop-filter: blur(8px) !important;
}

.d-md-block.fixed .sgs-text {
  filter: brightness(0) invert(1) !important;
}

.d-md-block.fixed .search-sec .fa.fa-search::before, .d-md-block.fixed .search-sec .fa.fa-times::before {
  color: #fff !important;
}

.mega-right .read {
  padding-bottom: 30px !important;
  border-bottom: 1px solid #686868;
  margin-bottom: 20px;
}

.mega-right .read:last-child {
  padding-bottom: 10px !important;
  border-bottom: 1px solid transparent;
  margin-bottom: 20px;
}


.panel-grid ul li a:hover, .drop-menu-title-sec a:hover {
  background: transparent !important;
}

 #navbar {
    z-index:1001 !important;
  }

.panel-grid a:hover {
    background: transparent !important;
}
/* Menu Responsive Hamburger CSS Start */



/* Mobile */
.menu-toggle {display:none;font-size:22px;color:#fff;cursor:pointer; padding: 20px;}
@media(max-width:1199px){
  .menu-toggle{display:block; }
  .nav{position:absolute;top:70px;left:0;width:100%;background:#000;flex-direction:column;display:none;}
  .nav.active{display:flex; position: fixed;}
  .nav > li{padding: 0px 0px;}
  .mega-menu{position:absolute;border:none; display: none;}
  .mega-wrapper{flex-direction:column;min-height:auto; max-width: 100%;}
  .mega-menu.active{display: block; }
  .mega-left{width:100%;background: transparent; padding: 0px;}
  .mega-right{padding:20px; width: 100%;}
  .panel-grid{grid-template-columns:1fr;}
  .arrow{border-color:#fff;}

.navbar ul li a {
  padding: 10px 15px;
  width: 100%;
}
header {
  order: 5;
}

.nav {
  gap: 0px;
}

.left-content-menusec {
  display: none;
}
.mega-left li {
  padding: 12px 25px;
}
.mega-menu.active {
  position: relative;
  min-height: inherit;
}
}


/* Menu Responsive Hamburger CSS end */


@media (max-width: 1199px) {
  .mega-menu {
    position: relative;
  }

  .mega-right {
    display: none; /* hide default right panel */
  }

  .mobile-panel {
    display: none;
    /* padding: 12px 0 0; */
    margin-top: 10px;
  }

  .mobile-panel.active {
    display: block;
    background: #222;
  }

  .mega-left li {
    cursor: pointer;
    flex-direction: column;
    display: block;
  }

  .mega-left li .arrow {
    transition: transform 0.3s ease;
    position: absolute;
    right: 20px;
    transform: rotate(45deg);
    margin-top: 8px !important;
  }

  .mega-left li.active .arrow {
    transform: rotate(-135deg);
    position: absolute;
    right: 20px;
  }
  .mobile-panel .panel-grid ul {
  column-count: inherit;
 max-height: 400px;
    overflow: auto;
}
.mobile-panel .panel-grid ul li {
  padding: 0px;
}
.product-image {
  float: left;
  margin-right: 20px;
  height: auto !important;
  width: 30px !important;
}

.mobile-panel .panel-grid .item h4 + p {
  margin-left: 50px;
}
.rightside-blk h4 + p{
 margin-left: 0px !important;
}
.leftside-blk {
  display: none;
}
.panel-grid ul li a {
  font-size: 16px;
  padding: 8px 15px;
}
.mobile-panel .panel-grid .item h4 {
  font-size: 18px;
}
.about-panel-text h4 {
  font-size: 18px;
}
.about-panel-text p {
  font-size: 16px !important;
}
.about-panel-content img {
  display: none;
}
.drop-menu-title-sec a {
  width: fit-content !important;
}
.blogs-main-sec, .testimonial-drop-main-sec {
  padding: 20px;
}
.drop-menu-title-sec h4 {
  font-size: 18px;
}
.rightside-blk p, .drop-menu-title-sec a {
  font-size: 16px !important;
}
.panel-grid-content {
  padding: 20px;
}
.panel-grid-content h4 {
  font-size: 18px;
}
.rightside-blk {
  width: 100%;
}

.blogs-main-sec .read:hover, .testimonial-drop-main-sec .read:hover {
  background: #111 !important;
}
.products-list {
  height: 500px;
  overflow: auto;
  column-count: inherit !important;
}
.panel-grid ul li:hover a {
  background: #111;
  color: #fff !important;
}
.about-panel-content:hover, .panel-grid-content:hover {
  background: #111 !important;
}

.second-level-menu + .arrow {
  display: none;
}
.mega-wrapper .second-level-menu {
  width: 90% !important;
  /* width: fit-content !important; */
}
.second-level-menu:hover {
  color: #e05d36 !important;
}
.mobile-plus-minus {
  background: #000;
  width: 40px;
  height: 40px;
  padding: 5px;
  text-align: center;
}
}


@media (min-width:1200px) and (max-width:1478px){

  .left-content-menusec h3 {
  font-size: 24px;
}

.mega-left, .left-content-menusec, .mega-right{
/* padding: 20px 20px !important; */
padding: 20px 20px 20px 20px !important;
}
.panel {
  margin-top: 15px;
}
.about-panel-content:hover {
  background: #1c1c1c !important;
}
.drop-menu-title-sec a {
  font-size: 16px !important;
}
.mega-right .read:hover{
  background:transparent !important;
}
.panel-grid .item img {
  height: 30px;
  width: auto;
}
.products-list h4{
  margin-bottom: 3px;
  margin-top: 3px;
}
.nav {
  gap: 20px;
}
}

@media (max-width:575px){
  .blogs-main-sec, .testimonial-drop-main-sec {
    padding: 20px;
    height: 300px;
    overflow: auto;
  }
}


.second-level-menu {
  padding: 0px !important;
  width: 100% !important;
}

.second-level-menu:hover {
  background: transparent !important;
}

.navbar ul li:hover > a.second-level-menu {
  background: transparent;
}


@media(min-width:576px) and (max-width:767px){
    .top-bar {
    flex-wrap: wrap;
    justify-content: flex-start !important;
  }

  .topbar-right {
  margin-left: auto;
}
}