*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
  font-family: "Sora", sans-serif;
}

.serviceSection a {
   text-decoration: none;
}
.headerSection {
  padding-top: 40px;
  padding-bottom: 101px;
}

/* Optional drawer logo (Appearance → TB Logos → Mobile / drawer logo) */
.tb-drawer-logo-mark {
  max-height: 40px;
  width: auto;
  display: block;
  margin-bottom: 10px;
}





/* SERVICE SECTION  */

.serviceSection {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  margin-block: 120px;
}


.serviceText {
  text-align: center;
}

.serviceTitle {
  background-image: linear-gradient(-180deg, #ff711d54 33%, #fff);
  border: 1px solid #ffc5a2;
  border-radius: 40px;
  padding: 4px 12px;
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: rgb(255, 113, 29);
  margin-bottom: 12px;
}

.serviceHeading {
  width: 100%;
  max-width: 721px;
  margin-inline: auto;
  color: #292929;
  font-size: 52px;
}

.servicesContainer {
  margin-top: 60px;
}
.servicesContainer {
  display: flex;
  width: 100%;
  gap: 24px 24px;
  flex-wrap: wrap;
}
.serviceCard {
  flex-basis: calc(50% - 12px);
  background-color: rgb(255, 113, 29);
  border-radius: 20px;
}
.innerCard {
  background: rgb(255, 253, 244);
  border-radius: 20px;
  border: 1px solid #c2c7d0;
  padding: 28px 50px;
  transform-style: preserve-3d;
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
  transition: all 0.5s;
}
.innerCard:hover {
  transform-style: preserve-3d;
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(2deg) skew(0deg)
}
.innerCard:hover a {
  color: rgb(255, 113, 29);
}
.innerCard:hover svg {
  color: rgb(255, 113, 29);
}

.sCardH {
  color: rgb(41, 41, 41);
  font-size: 32px;
  font-weight: 600;
  line-height: 38px;
}

.sCardImage {
  background-color: #ff711d;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  display: flex;
}

.serviceCard .innerOne {
  display: flex;
  align-items: center;
  gap: 24px;
}

.innerTwo {
  margin-top: 22px;
}


.sCardDescription {
  color: #606060;
  font-size: 18px;
  font-weight: 400;
  line-height: 32.4px;
}

.innerTwo svg {
  color: rgb(96, 96, 96);
  margin-top: 20px;
}







/* KEY SECTION  */


.keySection {
    width: 100%;
  max-width: 1360px; 
  margin-inline: auto;
}

.keyInnerLeft {
  position: relative;
}

.keyInnerLeft .imageBox {
  background-color: #2dad7a;
  border-radius: 30px;  
  max-width: 500px;
  display: flex;
    min-height: 642px;
    max-height: 642px;
    position: absolute;
  inset: auto 0% 0%;
}
.keyInnerLeft img {
 position: relative;
 z-index: 10;
 display: flex;
}
.keySection {
  display: flex;
  align-items: center;
  gap: 60px;
}
.keyInnerRight .serviceText {
  text-align: left;
}
.keyInnerRight {
  width: 100%;
}
.keySection .serviceHeading {
  width: 100%;
  max-width: 100%;
}


    .accordion {
      width: 100%;
      /* max-width: 760px; */
      margin-top: 40px;
    }
 
    .accordion-item {
      border-bottom: 1.5px solid #d9d3c8;
      padding-block: 12px;
    }
 

 
    .accordion-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 0;
      cursor: pointer;
      user-select: none;
      gap: 16px;
    }
 
    .accordion-header h3 {
    font-size: 24px;
  font-weight: 600;
  line-height: 28px;
  color: rgb(41, 41, 41);
    }
 
    .accordion-icon {
      width: 38px;
      height: 38px;
      min-width: 38px;
      background: #1a1a2e;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.25s;
    }
 
    .accordion-icon svg {
      width: 16px;
      height: 16px;
      fill: #fff;
      transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    }
 
    .accordion-item.open .accordion-icon svg {
      transform: rotate(180deg);
    }
 
    .accordion-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(.4,0,.2,1);
    }
 
    .accordion-item.open .accordion-body {
      max-height: 300px;
    }
 
    .accordion-body p {
     padding-block: 16px;
  max-width: 660px;
  color: #606060;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
    }


    .keyMainSection {
  background-color: #fffdf4;
  background-image: url("https://cdn.prod.website-files.com/66fe80610869ca4bb9047e99/6704c8df6ff76b3cdd653446_Feature%20Bottom%20Shape.png");
  background-position: 100% 100%;
  background-repeat: no-repeat;
  padding-block: 120px;
  background-size: auto;
}














/* BLOG SECTION  */




.blogSection {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  margin-block: 120px;
}

.blogSection a {
 text-decoration: none;
}


.blogContainer {
  margin-top: 60px;
  display: flex;
  width: 100%;
  gap: 24px 24px;
  flex-wrap: wrap;
}

.blogCard {
  border-radius: 20px;
  flex-basis: calc(33% - 12px);
}
.blogCard .cardImg {
  border-radius: 20px;
  background-color: rgb(255, 113, 29);
}
.cardImg a {
  display: flex;
}
.cardImg img {
  border-radius: 20px;
  width: 100%;
  transform-style: preserve-3d;
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
  transition: all 0.4s;
}
.cardImg:hover img {
  transform-style: preserve-3d;
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(3deg) skew(0deg);
}



.blogText {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}


.bCategory {
  font-size: 12px;
  color: rgb(9, 30, 66);
  line-height: 16px;
  font-weight: 400;
  border: 1px solid #c2c7d0;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
  padding: 5px 8px;
    padding-right: 8px;
    padding-left: 8px;
  transition: border-color .4s, background-color .4s;
  display: inline-flex;
  transition: all .3s;
}
.bCategory:hover {
  background-color: #ff711d;
  color: white;
}

.bTitle {
  color: #292929;
  font-size: 24px;
  line-height: 33px;
  font-weight: 600;
  transition: all .3s;
}
.bTitle:hover {
  color: #ff711d;
}

.blogAuthor {
  color: #ff711d;
  font-weight: 500;
  line-height: 24px;
  transition: all .3s;
}
.blogAuthor:hover {
  color: #292929;
}
.blogDesc {
  color: #606060;
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
}






/* BRAND LOGO SECTION  */


.brandSection {
    padding-block: 120px;
}

.brandInner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 45px;
}

.marqueeTop {
    display: flex;
    width: max-content;
    gap: 100px;
}
.topOne {
    animation: marquee 30s linear infinite reverse;
}
.topTwo {
    animation: marquee 30s linear infinite;
}

.marqueeTopOne {
    display: flex;
    align-items: center;
    gap: 100px;
}

.brandLogo img {
    display: block;
}

/* Animation */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}








/* TESTIMONIAL SECTION  */


.testimonialSection {
  padding-block: 120px;
  background-color: #1c1c1c;
  background-image: url("https://cdn.prod.website-files.com/66fe80610869ca4bb9047e99/67079d50eae233c9465d74a8_Group%201215874725.png");
  background-position: 50%;
  background-size: cover;
  border-radius: 50px;
  position: relative;
}

.testimonialContainer {
  width: 100%;
	max-width: 1360px;
  margin-inline: auto;
}
.serviceTitle.testimonialTitle {
  background-image: linear-gradient(-180deg, #ff711d54 33%, #ff711d00);
}
.serviceHeading.testimonialHeading {
  color: #fffbeb;
  max-width: 1300px;
}
.testimonial {
  margin-top: 70px;
}

.testimonial {
  margin-top: 70px;
  display: flex;
  width: 100%;
  gap: 16px;
}
.testBox {
  padding: 38px 35px 36px;
  background-color: white;
  border-radius: 20px;
  flex-basis: calc(33% - 8px);
}
.testDesc {
  color: rgb(9, 30, 66);
  font-size: 20px;
  line-height: 36px;
  margin-block: 29px;
}
.testAuthor {
  display: flex;
  align-items: center;
  gap: 16px;
}
.authorInfo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aName {
  color: #292929;
  font-size: 18px;
  font-weight: 400;
  line-height: 18px;
}
.aDesignation {
  color: #606060;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
}


.testBox {
  transition: all 0.4s ease;
}

.testBox.active {
  transform: rotateZ(-2.5deg);
}

.testBox:hover {
  transform: rotateZ(-2.5deg);
  z-index: 2;
}

.testimonial:hover .testBox.active:not(:hover) {
  transform: rotateZ(0deg);
}



















.section {
    width: 100%;
    max-width: 1360px;
    margin-inline: auto;
    text-align: center;
    margin-block: 120px;
  }


  /* ── Accordion row ── */
  .accordionVertical {
    display: flex;
    gap: 26px;
    height: 430px;
    align-items: stretch;
  }

  .card {
    background: #2a2a2a;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;

    /* default: collapsed */
    flex-basis: calc(15% - 26px);
    transition: all 0.55s cubic-bezier(0.65, 0, 0.35, 1);
    height: 430px;
  }

  /* card 2 expanded by default — using :has on accordion to not disturb hover */
  .accordionVertical:not(:hover) .card:nth-child(2) {
    flex-basis: calc(55% - 26px);
  }

  /* on hover: hovered card expands, siblings collapse */
  .accordionVertical:hover .card:hover {
    flex-basis: calc(55% - 26px);
  }

  .accordionVertical:hover .card:not(:hover) {
    flex-basis: calc(15% - 26px);
  }

  /* ── Number badge ── */
  .num {
    width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  color: rgb(9, 30, 66);
  flex-shrink: 0;
  line-height: 18px;
  }
  .card:nth-child(1) .num { background: #f9c49a; }
  .card:nth-child(2) .num { background: #a8d8bc; }
  .card:nth-child(3) .num { background: #e8d88a; }
  .card:nth-child(4) .num { background: #f9c49a; }

  /* ── Collapsed view ── */
  .card-collapsed {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 30px;
    gap: 20px;
    height: 100%;
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 1;
    transition: opacity 0.2s ease;
  }

  .title-vertical {
    writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  white-space: nowrap;
  }

  /* ── Expanded view ── */
  .card-expanded {
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    height: 100%;
    position: absolute;
    inset: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 0.2s ease 0s;
    pointer-events: none;
  }

  .card-expanded .header {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .card-expanded .title {
    font-size: 24px;
  font-weight: 600;
  color: #fff;
  text-transform: uppercase;
  line-height: 31px;
  }

  .card-expanded .body {
    color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  line-height: 32px;
  font-weight: 400;
  text-align: left;
  }

  /* Show expanded content on hover */
  .card:hover .card-expanded {
    opacity: 1;
    transition: opacity 0.25s ease 0.3s;
    pointer-events: all;
  }

  .card:hover .card-collapsed {
    opacity: 0;
  }

  /* Default card 2 expanded state (no hover on accordion) */
  .accordionVertical:not(:hover) .card:nth-child(2) .card-expanded {
    opacity: 1;
    pointer-events: all;
  }

  .accordionVertical:not(:hover) .card:nth-child(2) .card-collapsed {
    opacity: 0;
  }





  /* TEAM SECTION  */

  .teamSection {
  padding-block: 120px;
}
.serviceHeading.teamHeading {
  max-width: 800px;
}
.teamContainer {
  width: 100%;
  max-width: 1360px;
  margin-top: 60px;
  margin-inline: auto;
}


.teamRight {
  display: flex;
  gap: 50px;
}
.teamImg img {
  transform: translate3d(0px, 0px, 0px) scale3d(0, 0, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg);
  transform-style: preserve-3d;
  border-radius: 16px;
  transition: all .5s;
}


.teamImg:hover img {
  transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(-10deg) skew(0deg);
  transform-style: preserve-3d;
}

.teamInfo a {
  color: rgb(41, 41, 41);
  font-size: 48px;
  font-weight: 600;
  line-height: 57px;
  text-decoration: none;
  transition: color .5s;
}
.teamInfo a:hover {
  color: #ff711d;
 
}
.teamInfo {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.teamInfo span {
  color: #292929;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
}

.teamBtn {
  color: rgb(41, 41, 41);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.teamBox {
display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgb(194, 199, 208);
  padding-block: 120px;
  position: relative;
}
.teamImg {
  position: absolute;
  inset: 0 180px 0 auto;
}





/* HERO SECTION  */


.heroSection {

  background-image: url("https://cdn.prod.website-files.com/66fe80610869ca4bb9047e99/67022eb371ef993ea911bd4e_Hero%20V1%20BG.png");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  
}


.heroInner {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  display: flex;
  gap: 95px;
}
.heroHeading {
  font-size: 64px;
  color: #fffbeb;
  font-weight: 600;
  line-height: 76px;
}
.heroDesc {
  font-size: 18px;
  color: rgb(255, 255, 255);
  font-weight: 400;
  line-height: 27px;
}
.heroBtn a {
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  line-height: 18px;
  border-radius: 40px;
  padding: 13px 30px;
  display: inline-block;
}
.heroBtn a.start {
  background: #ffd73b;
  color: rgb(9, 30, 66);
}
.heroBtn a.learn {
  color: rgb(255, 255, 255);
  border: 1px solid rgb(255, 255, 255);
}

.heroBox.heroText {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.heroBtn {
  display: flex;
  gap: 16px;
}

.mainBack {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}
.mainImg {
  z-index: 10;
  position: relative;
  overflow: hidden;
  display: flex;
}
.backImg {
  position: absolute;
}
.backImg img {
  animation: imgRotate 10s linear infinite;
  opacity: 1;
  transform-style: preserve-3d;
}

@keyframes imgRotate {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}


.reviewBox {
  z-index: 15;
  background-color: rgb(255, 255, 255);
  border-radius: 20px;
  max-width: 386px;
  display: flex;
  padding: 30px;
  gap: 32px;
  flex-direction: column;
}
.reviewHeading {
  color: rgb(9, 30, 66);
  font-size: 24px;
  font-weight: 600;
  line-height: 31px;
}
.ratting {
  font-size: 32px;
  font-weight: 600;
  color: rgb(9, 30, 66);
  line-height: 40px;
}
.reviewOne {
  display: flex;
  gap: 20px;
  align-items: center;
}
.seeReview {
  color: rgb(9, 30, 66);
  font-size: 18px;
  line-height: 23px;
  font-weight: 400;
  max-width: 108px;
}
.reviewTwo {
  display: flex;
  gap: 20px;
  align-items: center;
}
.rImg {
  margin-left: -28px;
}
.reivewImg {
  display: flex;
}

.reviewBox {
  z-index: 15;
  background-color: rgb(255, 255, 255);
  border-radius: 20px;
  max-width: 386px;
  display: flex;
  padding: 30px;
  gap: 32px;
  flex-direction: column;
  position: absolute;
  bottom: 98px;
  left: 323px;
  width: 100%;
}
.heroBox.heroImages {
  position: relative;
}























 nav {
    background: #f5f0e0;
    border-radius: 999px;
    padding: 20px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1360px;
    margin: 0 auto;
    position: relative;
    z-index: 100;
  }

  .logo {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; flex-shrink: 0;
  }
  .logo-icon {
    width: 42px; height: 42px; background: #1a1a1a;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .logo-text { font-size: 20px; font-weight: 700; color: #1a1a1a; letter-spacing: -0.3px; }

  .nav-links {
    display: flex; align-items: center; gap: 32px;
    list-style: none; position: relative;
  }

  .nav-item { position: static; }

  .nav-links > li > a {
text-decoration: none;
  color: rgb(9, 30, 66);
  font-size: 18px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 0;
  transition: color 0.2s;
  }

  /* Orange pill on hover */
  .nav-item.has-mega:hover > a,
  .nav-item.has-dropdown:hover > a {
    background: #e85d04; color: #fff;
    border-radius: 999px; padding: 6px 14px; margin: 0 -14px;
  }
  .nav-item.has-mega:hover > a svg path,
  .nav-item.has-dropdown:hover > a svg path { stroke: #fff; }

  .chevron svg { transition: transform 0.2s ease; }
  .nav-item:hover .chevron svg { transform: rotate(180deg); }

  /* ── KEY FIX: invisible bridge via padding-bottom + negative margin ── */
  /* The li itself extends downward with padding so mouse doesn't leave the element */
  .nav-item.has-dropdown,
  .nav-item.has-mega {
    position: relative;
    /* extend hover area downward to bridge the gap */
    padding-bottom: 24px;
    margin-bottom: -24px;
  }

  /* ── DROPDOWN (Home) ── */
  .dropdown {
  position: absolute;
  top: calc(100% - 14px);
  left: 0;
  background: #fff;
  border-radius: 12px;
  padding: 10px 0;
  min-width: 180px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  transition-delay: 0s;
  z-index: 200;
  border-width: 5px .5px .5px;
  border-color: rgb(255, 113, 29);
  border-style: solid
  }

  .nav-item.has-dropdown:hover .dropdown {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* Delay the hide so menu lingers a moment before disappearing */
  .nav-item.has-dropdown .dropdown {
    transition: opacity 0.25s ease 0.15s, transform 0.25s ease 0.15s;
  }
  .nav-item.has-dropdown:hover .dropdown {
    transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
  }

  .dropdown a {
    display: block; padding: 10px 20px;
    font-size: 14px; font-weight: 500;
    color: #1a1a1a; text-decoration: none;
    transition: background 0.15s, color 0.15s;
  }
  .dropdown a:hover {color: rgb(255, 113, 29); }

  /* ── MEGA MENU (Pages) ── */
  .mega-wrapper {
   position: absolute;
  top: calc(100% - -3px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  width: 636px;
  background: #fff;
  border-radius: 16px;
  padding: 35px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 28px;
  transition: opacity 0.25s ease 0.15s, transform 0.25s ease 0.15s;
  border-width: 5px .5px .5px;
  border-color: rgb(255, 113, 29);
  border-style: solid;
  opacity: 0;
  }

  .nav-item.has-mega:hover .mega-wrapper {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
  }

  .mega-col h4 {
 font-size: 24px;
  font-weight: 500;
  color: rgb(255, 113, 29);
  margin-bottom: 14px;
  line-height: 36px;
  }
  .mega-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; }
  .mega-col ul li a {
 font-size: 16px;
  font-weight: 400;
  color: rgb(7, 7, 7);
  text-decoration: none;
  display: block;
  line-height: 24px;
  }
  .mega-col ul li a:hover { 
    color: #ff711d; 
  }

  /* ── CTA ── */
  .cta-btn {
 background: #f5c842;
  color: rgb(9, 30, 66);
  font-size: 18PX;
  font-weight: 600;
  border-radius: 999px;
  padding: 15px 40px;
  text-decoration: none;
  }


  /* ── HAMBURGER ── */
  .hamburger {
    display: none; background: #e85d04; border: none;
    border-radius: 50%; width: 46px; height: 46px;
    cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0;
  }

  /* ── MOBILE DRAWER ── */
  .drawer {
    display: none; position: fixed; top: 0; left: 0;
    width: 78%; max-width: 320px; height: 100vh;
    background: #f5f0e0; z-index: 1000;
    padding: 28px 28px 40px; flex-direction: column;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.65,0,0.35,1);
  }
  .drawer.open { transform: translateX(0); }
  .drawer-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
  .drawer-nav { list-style: none; display: flex; flex-direction: column; gap: 0; }
  .drawer-nav > li > a {
    text-decoration: none; color: #1a1a1a; font-size: 17px; font-weight: 500;
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.08); cursor: pointer;
  }
  .drawer-sub {
    display: none;
    flex-direction: column;
  gap: 0;
  background: rgba(0,0,0,0.03);
  border-radius: 8px;
  margin: 4px 0 8px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 250px;
  height: 300px;
  border-width: 5px .5px .5px;
  border-style: solid;
  border-color: #ff711d;
  }
  .drawer-sub.open { display: flex; }
  .drawer-sub a {
  text-decoration: none;
  color: rgb(7, 7, 7);
  font-size: 16px;
  padding: 10px 16px;
  line-height: 24px;
  font-weight: 400;
}
  .drawer-sub a:hover {
  
      color: rgb(255, 113, 29);
}
.drawer-nav {
  padding: 0px;
}
  .drawer-sub a:last-child { border-bottom: none; }
  .drawer-sub h4 {
    font-size: 24px;
  font-weight: 500;
  color: rgb(255, 113, 29);
  padding: 10px 16px 4px;
  text-transform: uppercase;
  line-height: 36px;
  margin: 0px;
  }
  .drawer .cta-btn { margin-top: 24px; text-align: center; padding: 14px 30px; }

  .overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,0.4); z-index: 999;
  }
  .overlay.open { display: block; }

  .dot {
  width: 10px;
  height: 10px;
  background: rgb(255, 113, 29);
  border-radius: 50%;
  display: none !important;
  transition: all 0.5s;
}



.mega-col ul li:hover .dot {
  display: block !important;
}


.mega-col ul li {
  display: flex ;
  align-items: center;
  gap: 10px;
  transition: all 0.5s;
}







/* FOOTER SECTION  */





   .footer {
        width: 100%;
        background-color: rgb(28, 28, 28);
        border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  position: sticky;
  padding-block: 30px;
    }

    footer {
      width: 100%;
      padding: 0 64px;
  max-width: 1170px;
  width: 100%;
  margin-inline: auto;
    }

    /* ── TOP BAR ── */
    .footer-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 28px 0;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }

    .logo-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .logo-icon svg {
      width: 22px;
      height: 22px;
    }

    .logo-name {
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
    }

    .footer-tagline {
      font-size: 38px;
  font-weight: 600;
  color: white;
  line-height: 45px;
    }

    .btn-talk {
      background: var(--accent);
      color: #111;
      font-family: var(--font);
      font-weight: 700;
      font-size: 0.95rem;
      padding: 14px 28px;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s, transform 0.15s;
      white-space: nowrap;
    }

    .btn-talk:hover {
      background: var(--accent-hover);
      transform: translateY(-1px);
    }

    /* ── DIVIDER ── */
    .divider {
      border: none;
      border-top: 1px solid var(--border);
    }

    /* ── MIDDLE SECTION ── */
    .footer-mid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 40px;
      align-items: start;
      padding-block: 30px;
    }

    /* Newsletter */
    .newsletter-title {
      font-size: 38px;
  font-weight: 600;
  line-height: 45px;
  margin-bottom: 28px;
  color: white;
    }

    .newsletter-form {
      display: flex;
      align-items: center;
      background: transparent;
      border: 1.5px solid rgba(255,255,255,0.25);
      border-radius: 50px;
      padding: 6px 6px 6px 20px;
      max-width: 340px;
    }

    .newsletter-form input {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      color: var(--text);
      font-family: var(--font);
      font-size: 0.9rem;
      min-width: 0;
    }

    .newsletter-form input::placeholder {
      color: rgba(255,255,255,0.4);
    }

    .newsletter-form button {
      background: var(--accent);
      color: #111;
      font-family: var(--font);
      font-weight: 700;
      font-size: 0.9rem;
      padding: 10px 22px;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.2s;
      flex-shrink: 0;
    }

    .newsletter-form button:hover {
      background: var(--accent-hover);
    }

    /* Nav columns */
    .nav-col h4 {
      font-size: 20px;
  font-weight: 600;
  color: white;
  margin-bottom: 20px;
  line-height: 36px;
    }

    .nav-col .links-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 16px;
    }

    .nav-col.single-col .links-grid {
      grid-template-columns: 1fr;
    }

    .nav-col a {
      font-size: 16px;
  color: white;
  text-decoration: none;
  transition: color 0.18s;
  line-height: 28px;
  font-weight: 400;
    }

    .nav-col a:hover,
    .nav-col a.active {
      color: rgb(255, 215, 59);
    }

    /* ── BOTTOM BAR ── */
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 22px 0;
    }

    .copyright {
      font-size: 18px;
  color: rgba(255,255,255,1);
  line-height: 28px;
  font-weight: 400;
    }

    .copyright span { color: rgba(255,255,255,1); }

    .socials {
      display: flex;
      gap: 10px;
    }

    .socials a {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text);
      text-decoration: none;
      transition: background 0.2s, color 0.2s;
    }

        :root {
      --bg: #1a1a1a;
      --bg-light: #222222;
      --text: #ffffff;
      --text-muted: #aaaaaa;
      --accent: #f5c518;
      --accent-hover: #e6b800;
      --border: rgba(255,255,255,0.1);
      --font: 'DM Sans', sans-serif;
    }
    .socials a:hover {
      background: rgb(255, 215, 59);
      color: rgb(9, 30, 66);
    }

    .socials svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }