.elementor-7 .elementor-element.elementor-element-73ce2a4 > .elementor-background-overlay{background-color:#003447;opacity:0.72;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-7 .elementor-element.elementor-element-73ce2a4{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-17px;margin-bottom:0px;}.elementor-7 .elementor-element.elementor-element-73ce2a4 > .elementor-shape-bottom svg{height:118px;}.elementor-7 .elementor-element.elementor-element-e47a002 .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:18px;font-weight:600;color:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-anim-text.wpr-anim-text-type-rotate-1 b{-webkit-animation-duration:2s;animation-duration:2s;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-anim-text.wpr-anim-text-type-slide b{-webkit-animation-duration:2s;animation-duration:2s;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-anim-text.wpr-anim-text-type-zoom b{-webkit-animation-duration:2s;animation-duration:2s;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-anim-text.wpr-anim-text-type-push b{-webkit-animation-duration:2s;animation-duration:2s;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-highlighted-text svg path{-webkit-animation-delay:3s;animation-delay:3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-highlighted-text svg.wpr-highlight-x path:first-child{-webkit-animation-delay:-webkit-calc(3s + 0.3s);animation-delay:calc(3s + 0.3s);}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-highlighted-text svg.wpr-highlight-double path:last-child{-webkit-animation-delay:-webkit-calc(3s + 0.3s);animation-delay:calc(3s + 0.3s);}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-highlighted-text svg.wpr-highlight-double-underline path:last-child{-webkit-animation-delay:-webkit-calc(3s + 0.3s);animation-delay:calc(3s + 0.3s);}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-anim-text-cursor{-webkit-animation-duration:0.7s;animation-duration:0.7s;}.elementor-7 .elementor-element.elementor-element-c7c635a.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-advanced-text{text-align:left;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-advanced-text a{text-align:left;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-advanced-text-preffix{color:#FFFFFF;font-family:"Kanit", Sans-serif;font-size:85px;font-weight:700;padding-top:0px;padding-bottom:0px;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-anim-text{color:#FFFFFF;padding:0px 0px 0px 0px;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-highlighted-text{color:#FFFFFF;padding:0px 0px 0px 0px;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-anim-text b, .elementor-7 .elementor-element.elementor-element-c7c635a .wpr-anim-text b i,.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-anim-text,.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-highlighted-text{font-family:"Kanit", Sans-serif;font-size:85px;font-weight:700;font-style:normal;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-advanced-text-suffuix{padding-top:0px;padding-bottom:0px;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-advanced-text-suffix{color:#333333;}.elementor-7 .elementor-element.elementor-element-e8e8bb4{margin-top:31px;margin-bottom:100px;}.elementor-7 .elementor-element.elementor-element-fcea5f1{text-align:center;}.elementor-7 .elementor-element.elementor-element-fcea5f1 .elementor-heading-title{font-family:"Kanit", Sans-serif;font-size:55px;font-weight:600;color:#00092A;}.elementor-7 .elementor-element.elementor-element-21e52bd{text-align:center;font-family:"Poppins", Sans-serif;font-size:14px;font-weight:400;color:#666666;}.elementor-7 .elementor-element.elementor-element-ab9da86{--display:flex;--margin-top:-100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-7 .elementor-element.elementor-element-ab9da86 > .elementor-shape-top .elementor-shape-fill, .elementor-7 .elementor-element.elementor-element-ab9da86 > .e-con-inner > .elementor-shape-top .elementor-shape-fill{fill:#003447;}.elementor-7 .elementor-element.elementor-element-ab9da86 > .elementor-shape-top svg, .elementor-7 .elementor-element.elementor-element-ab9da86 > .e-con-inner > .elementor-shape-top svg{height:120px;}.elementor-7 .elementor-element.elementor-element-e5e34da{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:070px 0px 0px 0px;}body.elementor-page-7:not(.elementor-motion-effects-element-type-background), body.elementor-page-7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(max-width:1024px) and (min-width:768px){.elementor-7 .elementor-element.elementor-element-4350afe{width:100%;}}@media(max-width:1366px){.elementor-7 .elementor-element.elementor-element-73ce2a4{padding:80px 20px 0px 20px;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-advanced-text-preffix{font-size:75px;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-anim-text b, .elementor-7 .elementor-element.elementor-element-c7c635a .wpr-anim-text b i,.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-anim-text,.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-highlighted-text{font-size:75px;}.elementor-7 .elementor-element.elementor-element-e8e8bb4{padding:0px 20px 0px 20px;}.elementor-7 .elementor-element.elementor-element-fcea5f1 .elementor-heading-title{font-size:50px;}}@media(max-width:767px){.elementor-7 .elementor-element.elementor-element-73ce2a4{padding:150px 20px 150px 20px;}.elementor-7 .elementor-element.elementor-element-c7c635a{width:var( --container-widget-width, 284.667px );max-width:284.667px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:284.667px;--container-widget-flex-grow:0;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-advanced-text-preffix{font-size:55px;}.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-anim-text b, .elementor-7 .elementor-element.elementor-element-c7c635a .wpr-anim-text b i,.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-anim-text,.elementor-7 .elementor-element.elementor-element-c7c635a .wpr-highlighted-text{font-size:50px;}.elementor-7 .elementor-element.elementor-element-fcea5f1 .elementor-heading-title{font-size:35px;}}/* Start custom CSS for html, class: .elementor-element-e5e34da *//* Outer container */
.naweela-tree {
  width: 100%;
  overflow-x: auto;
  padding: 60px 20px;
  /* light chasmatic background */
}

/* Horizontal layout */
.naweela-tree .tree-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: nowrap; /* horizontal layout for desktop & tablet */
}

/* Each company card */
.naweela-tree .company-tree {
  position: relative;
  flex-shrink: 0;
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease;
}

.naweela-tree .company-tree:hover {
  transform: translateY(-10px);
}

/* Parent rectangle clickable */
.naweela-tree .parent {
  background: #255E7E; /* chasmatic teal */
  color: #fff;
  width: 200px;
  height: 200px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.naweela-tree .parent:hover {
  background: #094256; /* brighter on hover */
}

/* Logo inside parent */
.naweela-tree .parent img {
  width: 130px;
  height: 130px;
  object-fit: contain;
  margin-bottom: 8px;
}

/* Brands container */
.naweela-tree .brands {
  position: absolute;
  width: 180%;
  height: 100%;
  top: 0;
  left: 2;
  pointer-events: none;
  z-index: 2;
}

/* Individual brand buttons */
.naweela-tree .brand {
  position: absolute;
  background: linear-gradient(135deg, #F6A800, #fbbf24);
  color: #fff;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: auto; /* clickable when visible */
}

/* Top and bottom brand positions */
.naweela-tree .brand.top {
  top: 5%;
  left: 50%;
  transform: translateX(-50%) translateY(-70%);
}

.naweela-tree .brand.bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* Show brands on hover (parent or brand) */
.naweela-tree .company-tree:hover .brand.top {
  opacity: 1;
  transform: translateX(-50%) translateY(-60px);
}

.naweela-tree .company-tree:hover .brand.bottom {
  opacity: 1;
  transform: translateX(-50%) translateY(60px);
}

/* Optional: slow disappearance */
.naweela-tree .company-tree .brand {
  transition-delay: 0.2s;
}

/* Tablet adjustments (still horizontal) */
@media (max-width: 1024px) {
  .naweela-tree .tree-container {
    gap: 30px;
    flex-wrap: nowrap; /* remain horizontal */
  }
  .naweela-tree .company-tree {
    width: 200px;
  }
  .naweela-tree .parent {
    width: 190px;
    height: 160px;
  }
  .naweela-tree .parent img {
    width: 90px;
    height: 90px;
  }
  .naweela-tree .company-tree:hover .brand.top {
    transform: translateX(-50%) translateY(-50px);
  }
  .naweela-tree .company-tree:hover .brand.bottom {
    transform: translateX(-50%) translateY(50px);
  }
}

/* Mobile view — vertical layout */
@media (max-width: 768px) {
  .naweela-tree .tree-container {
    flex-direction: column;
    align-items: center;
    gap: 25px;
  }
  .naweela-tree .company-tree {
    width: 180px;
  }
  .naweela-tree .parent {
    width: 160px;
    height: 140px;
  }
  .naweela-tree .parent img {
    width: 80px;
    height: 60px;
  }
  .naweela-tree .company-tree:hover .brand.top {
    transform: translateX(-50%) translateY(-40px);
  }
  .naweela-tree .company-tree:hover .brand.bottom {
    transform: translateX(-50%) translateY(40px);
  }
}/* End custom CSS */