h1,
    h2,
    h5 {
      font-weight: 700 !important
    }
    
    
    [data-aos^=fade][data-aos^=fade] {
      opacity: 0
    }
    
    [data-aos=fade-up] {
      transform: translate3d(0, 100px, 0)
    }
    
    h1,
    h2,
    h5 {
      margin-top: 0;
      margin-bottom: .5rem;
      font-weight: 500;
      line-height: 1.2
    }
    
    h1 {
      font-size: calc(1.375rem + 1.5vw)
    }
    
    p {
      margin-top: 0;
      margin-bottom: 1rem
    }
    
    
    .row {
      --bs-gutter-x: 1.5rem;
      --bs-gutter-y: 0;
      display: flex;
      flex-wrap: wrap;
      margin-top: calc(var(--bs-gutter-y) * -1);
      margin-right: calc(var(--bs-gutter-x)/ -2);
      margin-left: calc(var(--bs-gutter-x)/ -2)
    }
    
    .row>* {
      flex-shrink: 0;
      width: 100%;
      max-width: 100%;
      padding-right: calc(var(--bs-gutter-x)/ 2);
      padding-left: calc(var(--bs-gutter-x)/ 2);
      margin-top: var(--bs-gutter-y)
    }
    
    .carousel-indicators {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 2;
      display: flex;
      justify-content: center;
      padding: 0;
      margin-right: 15%;
      margin-bottom: 1rem;
      margin-left: 15%;
      list-style: none
    }
    
    @font-face {
      font-family: bootstrap-icons;
      src: url('https://htppl.co.in/assets/vendor/bootstrap-icons/fonts/bootstrap-icons.woff?4601c71fb26c9277391ec80789bfde9c') format("woff"), url('https://htppl.co.in/assets/vendor/bootstrap-icons/fonts/bootstrap-icons.woff2?4601c71fb26c9277391ec80789bfde9c') format("woff2")
    }
    
    
    h1,
    h2,
    h5 {
      font-family: Raleway, sans-serif
    }
    
    h1 {
      font-size: 38px
    }
    
    .section-title {
      position: relative;
      padding-bottom: 0;
      margin-bottom: 0;
      color: var(--primary-color);
      font-weight: 700
    }
     .section-title {
      position: relative;
      padding-bottom: 0;
      margin-bottom: 0;
      color: black;
      font-weight: 700;
      font-size: 36px;
    }
    .section-title h2 {
      font-size: 20px;
      font-weight: bolder;
      padding: 20px 0;
      margin: 0 0 5px;
      letter-spacing: 2px;
      text-transform: uppercase;
      font-family: Poppins, sans-serif
    }
    
    .about p {
      font-size: 17px
    }
    
    .about h1 {
      font-weight: bolder
    }
    
    .about .content p {
      text-align: justify
    }
    
    @media (max-width:768px) {
      .section-title {
        text-align: center
      }
    
      .section-title::after {
        left: 50%;
        transform: translateX(-50%)
      }
    }
    
    @media (max-width:500px) {
      #hero {
        height: 30vh
      }
    
      .cta-button {
        padding: 2px 20px;
        width: max-content;
        display: inline-block;
        margin: 10px auto
      }
    
      .cta-buttons {
        margin: 0 !important
      }
    
      #hero h2 {
        font-size: 20px !important
      }
    
      #hero h5 {
        font-size: 15px !important;
        margin: 0 !important
      }
    
      #slide-4-buttons {
        margin-top: 50px !important
      }
    
      #hero #slide1 {
        top: 20px
      }
    
      #hero #slide4 {
        top: 20px
      }
    
      #hero #slide5 {
        top: 130px
      }
    
      h1 {
        font-size: 25px !important
      }
    
      .carousel-indicators {
        display: none
      }
    }
    
    
    :root {
      --primary-color: #1a5d1a;
      --secondary-color: #4caf50;
      --accent-color: #e3f2fd;
      --light-color: #f8f9fa;
      --dark-color: #212529
    }
    
    :root {
      --primary-color: #4a9eff;
      --secondary-color: #3182ce;
      --background-dark: #1a2634;
      --text-light: #ffffff;
      --text-muted: #cbd5e1
    }
    
    h2,
    h5 {
      font-weight: 700 !important
    }
    
    :root {
      --animate-duration: 1s;
      --animate-delay: 1s;
      --animate-repeat: 1
    }
    
    .animate__animated {
      -webkit-animation-duration: 1s;
      animation-duration: 1s;
      -webkit-animation-duration: var(--animate-duration);
      animation-duration: var(--animate-duration);
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both
    }
    
    @media (prefers-reduced-motion:reduce),
    print {
      .animate__animated {
        -webkit-animation-duration: 1ms !important;
        animation-duration: 1ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important
      }
    }
    
    @-webkit-keyframes fadeInDown {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
      }
    
      to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
      }
    }
    
    @keyframes fadeInDown {
      0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)
      }
    
      to {
        opacity: 1;
        -webkit-transform: translateZ(0);
        transform: translateZ(0)
      }
    }
    
    .animate__fadeInDown {
      -webkit-animation-name: fadeInDown;
      animation-name: fadeInDown
    }
    
    :root {
      --bs-blue: #0d6efd;
      --bs-indigo: #6610f2;
      --bs-purple: #6f42c1;
      --bs-pink: #d63384;
      --bs-red: #dc3545;
      --bs-orange: #fd7e14;
      --bs-yellow: #ffc107;
      --bs-green: #198754;
      --bs-teal: #20c997;
      --bs-cyan: #0dcaf0;
      --bs-white: #fff;
      --bs-gray: #6c757d;
      --bs-gray-dark: #343a40;
      --bs-primary: #0d6efd;
      --bs-secondary: #6c757d;
      --bs-success: #198754;
      --bs-info: #0dcaf0;
      --bs-warning: #ffc107;
      --bs-danger: #dc3545;
      --bs-light: #f8f9fa;
      --bs-dark: #212529;
      --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0))
    }
    
    *,
    ::after,
    ::before {
      box-sizing: border-box
    }
    
    @media (prefers-reduced-motion:no-preference) {
      :root {
        scroll-behavior: smooth
      }
    }
    
    body {
      margin: 0;
      font-family: var(--bs-font-sans-serif);
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      background-color: #fff;
      -webkit-text-size-adjust: 100%
    }
    
    h2,
    h5 {
      margin-top: 0;
      margin-bottom: .5rem;
      font-weight: 500;
      line-height: 1.2
    }
    
    h2 {
      font-size: calc(1.325rem + .9vw)
    }
    
    @media (min-width:1200px) {
      h2 {
        font-size: 2rem
      }
    }
    
    h5 {
      font-size: 1.25rem
    }
    
    b {
      font-weight: bolder
    }
    
    a {
      color: #0d6efd;
      text-decoration: underline
    }
    
    img {
      vertical-align: middle
    }
    
    button {
      border-radius: 0
    }
    
    button,
    input {
      margin: 0;
      font-family: inherit;
      font-size: inherit;
      line-height: inherit
    }
    
    button {
      text-transform: none
    }
    
    [type=button],
    [type=submit],
    button {
      -webkit-appearance: button
    }
    
    ::-moz-focus-inner {
      padding: 0;
      border-style: none
    }
    
    ::-webkit-datetime-edit-day-field,
    ::-webkit-datetime-edit-fields-wrapper,
    ::-webkit-datetime-edit-hour-field,
    ::-webkit-datetime-edit-minute,
    ::-webkit-datetime-edit-month-field,
    ::-webkit-datetime-edit-text,
    ::-webkit-datetime-edit-year-field {
      padding: 0
    }
    
    ::-webkit-inner-spin-button {
      height: auto
    }
    
    ::-webkit-search-decoration {
      -webkit-appearance: none
    }
    
    ::-webkit-color-swatch-wrapper {
      padding: 0
    }
    
    ::file-selector-button {
      font: inherit
    }
    
    ::-webkit-file-upload-button {
      font: inherit;
      -webkit-appearance: button
    }
    
    
    .carousel {
      position: relative
    }
    
    .carousel-inner {
      position: relative;
      width: 100%;
      overflow: hidden
    }
    
    .carousel-inner::after {
      display: block;
      clear: both;
      content: ""
    }
    
    .carousel-item {
      position: relative;
      display: none;
      float: left;
      width: 100%;
      margin-right: -100%;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden
    }
    
    .carousel-item.active {
      display: block
    }
    
    .carousel-fade .carousel-item {
      opacity: 0;
      transform: none
    }
    
    .carousel-fade .carousel-item.active {
      z-index: 1;
      opacity: 1
    }
    
    .carousel-control-next,
    .carousel-control-prev {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 15%;
      padding: 0;
      color: #fff;
      text-align: center;
      background: 0 0;
      border: 0;
      opacity: .5
    }
    
    .carousel-control-prev {
      left: 0
    }
    
    .carousel-control-next {
      right: 0
    }
    
    .carousel-control-next-icon,
    .carousel-control-prev-icon {
      display: inline-block;
      width: 2rem;
      height: 2rem;
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: 100% 100%
    }
    
    .carousel-control-prev-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")
    }
    
    .carousel-control-next-icon {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e")
    }
    
    .sticky-top {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1020
    }
    
    .d-flex {
      display: flex !important
    }
    
    .justify-content-center {
      justify-content: center !important
    }
    
    .align-items-center {
      align-items: center !important
    }
    
    .ms-auto {
      margin-left: auto !important
    }
    
    .bg-light {
      background-color: #f8f9fa !important
    }
    
    [class*=" bi-"]::before {
      display: inline-block;
      font-family: bootstrap-icons !important;
      font-style: normal;
      font-weight: 400 !important;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      vertical-align: text-bottom;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale
    }
    
    .bi-arrow-up-short::before {
      content: "\f145"
    }
    
    .bi-chevron-left::before {
      content: "\f284"
    }
    
    .bi-chevron-right::before {
      content: "\f285"
    }
    
    :root {
      --swiper-theme-color: #007aff
    }
    
    :root {
      --swiper-navigation-size: 44px
    }
    
    .fab,
    .fas {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1
    }
    
    .fab {
      font-family: "Font Awesome 5 Brands"
    }
    
    .fas {
      font-family: "Font Awesome 5 Pro";
      font-weight: 900
    }
    
    .fa-solid,
    .fab,
    .fas {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: var(--fa-display, inline-block);
      font-style: normal;
      font-variant: normal;
      line-height: 1;
      text-rendering: auto
    }
    
    .fa-solid,
    .fas {
      font-family: "Font Awesome 6 Free"
    }
    
    .fab {
      font-family: "Font Awesome 6 Brands"
    }
    
    .fa-envelope:before {
      content: "\f0e0"
    }
    
    .fa-search:before {
      content: "\f002"
    }
    
    .fa-chevron-down:before {
      content: "\f078"
    }
    
    .fa-times:before {
      content: "\f00d"
    }
    
    :host,
    :root {
      --fa-style-family-brands: "Font Awesome 6 Brands";
      --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands"
    }
    
    .fab {
      font-weight: 400
    }
    
    .fa-linkedin-in:before {
      content: "\f0e1"
    }
    
    .fa-whatsapp:before {
      content: "\f232"
    }
    
    .fa-youtube:before {
      content: "\f167"
    }
    
    :host,
    :root {
      --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free"
    }
    
    :host,
    :root {
      --fa-style-family-classic: "Font Awesome 6 Free";
      --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free"
    }
    
    .fa-solid,
    .fas {
      font-weight: 900
    }
    
    body {
      font-family: "Open Sans", sans-serif;
      color: #444
    }
    
    a {
      color: #ed502e;
      text-decoration: none
    }
    
    h2,
    h5 {
      font-family: Raleway, sans-serif
    }
    
    #hero {
      width: 100%;
      height: 100vh;
      overflow: hidden;
      position: relative
    }
    
    #hero .carousel,
    #hero .carousel-inner,
    #hero .carousel-item,
    #hero .carousel-item::before {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0
    }
    
    #hero .carousel-item {
      background-size: cover;
      background-position: top center;
      background-repeat: no-repeat
    }
    
    #hero .carousel-item::before {
      content: ''
    }
    
    #hero .carousel-container {
      display: flex;
      align-items: center;
      position: absolute;
      bottom: 0;
      top: 82px;
      left: 50px;
      right: 50px
    }
    
    #hero h2 {
      color: #fff;
      margin: 0;
      font-size: 48px;
      font-weight: 700
    }
    
    #hero .carousel-inner .carousel-item {
      background-position: center top
    }
    
    #hero .carousel-inner .carousel-item {
      opacity: 0
    }
    
    #hero .carousel-inner .active {
      opacity: 1
    }
    
    #hero .carousel-control-next,
    .carousel-control-prev {
      opacity: 1
    }
    
    #hero .carousel-control-next-icon,
    #hero .carousel-control-prev-icon {
      line-height: 0;
      background: #ed502e;
      border-radius: 50px;
      color: #fff;
      padding: 20px;
      display: flex;
      align-items: center;
      justify-content: center
    }
    
    @media (max-width:992px) {
      #hero {
        height: 100vh
      }
    
      #hero .carousel-container {
        text-align: center;
        top: 74px
      }
    }
    
    @media (min-width:1024px) {
    
      #hero .carousel-control-next,
      #hero .carousel-control-prev {
        width: 5%
      }
    }
    
    @media (max-height:500px) {
      #hero {
        height: 120vh
      }
    }
    
    section {
      padding: 30px 0
    }
    
    input {
      width: 100%;
      background-color: #fff;
      padding: 15px;
      margin-top: 30px;
      border: none;
      outline: 0
    }
    
    button {
      background-color: #ed502e;
      border: none;
      width: 150px;
      padding: 15px;
      color: #fff
    }
    
    #differ {
      color: #fff;
      margin: 0;
      font-size: 38px;
      margin-top: -50px !important
    }
    
    @media (max-width:1700px) {
      #differ {
        width: 600px !important
      }
    }
    
    .cta-buttons {
      gap: 1rem;
      justify-content: center;
      margin-top: 30px !important
    }
    
    #slide-4-buttons {
      margin-top: 200px !important
    }
    
    .cta-button {
      padding: 1rem 2rem;
      margin: 0 5px;
      border-radius: 50px;
      text-decoration: none;
      font-weight: 700
    }
    
    .primary-button {
      background: #27ae60;
      color: #fff
    }
    
    @media (max-width:768px) {
      #hero h2 {
        font-size: 32px
      }
    
      #differ {
        width: 100% !important
      }
    
      .cta-buttons {
        flex-direction: column
      }
    
      .cta-button {
        width: 100%;
        text-align: center;
        display: block;
        margin: 10px 0
      }
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 10px;
    }
    
    @media (max-width:500px) {
    
      #hero .carousel-control-next-icon,
      #hero .carousel-control-prev-icon {
        background: 0 0
      }
    
      #hero {
        height: 30vh
      }
    
      .cta-button {
        padding: 2px 20px;
        width: max-content;
        display: inline-block;
        margin: 10px auto
      }
    
      .cta-buttons {
        margin: 0 !important
      }
    
      #hero h2 {
        font-size: 20px !important
      }
    
      #hero h5 {
        font-size: 15px !important;
        margin: 0 !important
      }
    
      #slide-4-buttons {
        margin-top: 50px !important
      }
    
      #hero #slide1 {
        top: 20px
      }
    
      #hero #slide4 {
        top: 20px
      }
    
      #hero #slide5 {
        top: 130px
      }
    }
    
    
    @font-face {
      font-family: 'boxicons';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('assets/vendor/boxicons/fonts/boxicons.woff2') format('woff2');
    }
    
    .plus-icon {
      position: absolute;
      color: #000000;
      font-size: 42px;
      font-weight: bold;
      line-height: 44px;
    }
    
    .plus-icon-0 {
      top: 30px;
      left: 115px !important;
    }
    
    .plus-icon-1 {
      top: 30px;
      left: 135px !important;
    }
    
    .plus-icon-2 {
      top: 30px;
      left: 155px;
    }
    
    .plus-icon-3 {
      top: 30px;
      left: 148px;
    }
    
    .plus-icon-4 {
      top: 30px;
      left: 120px;
    }
    
   
    
    @media (max-width: 768px) {
      .section-title {
        font-size: 30px;
      }
    }
    
    :root {
      --primary-color: #1a5d1a;
      --secondary-color: #4caf50;
      --accent-color: #e3f2fd;
      --light-color: #f8f9fa;
      --dark-color: #212529;
    }
    
    
    .card-body {
      padding: 20px !important;
    }
    
    .card-text {
      text-align: justify;
    }
    
    .feature-card {
      border: none;
      border-radius: 8px;
      transition: all 0.3s ease;
      height: 100%;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    }
    
    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    
    .feature-icon {
      font-size: 2.5rem;
      color: #ed502e;
      margin-bottom: 15px;
    }
    
    .expertise-section {
      background-color: #fff1ec;
      padding: 15px 0;
    
    }
    
    .expertise-section h2 {
      margin-bottom: 5px;
      /* reduce gap below heading */
    }
    
    .expertise-section p.lead {
      font-family: "Raleway", sans-serif;
      /* or Inter / Poppins */
      font-size: 16px;
      /* adjust as needed */
      font-weight: 400;
      color: #444;
      margin-top: 0;
      margin-bottom: 20px;
    }
    
    
    .industry-icon {
      font-size: 2rem;
      color: var(--primary-color);
      margin-bottom: 15px;
    }
    
    .industry-item {
      text-align: center;
      margin-bottom: 30px;
    }
    
    @media (max-width: 768px) {
      .section-title {
        text-align: center;
      }
    
      .section-title::after {
        left: 50%;
        transform: translateX(-50%);
      }
    }
    
    /* Main container for the section */
    /* Scope all styles inside the product-carousel wrapper */
    .product-carousel {
      width: 100%;
    }
    
    .product-carousel .products-section {
      padding: 15px 0;
      background-color: #fff1ec;
      text-align: center;
      position: relative;
    }
    
    .product-carousel .products-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: #ffffff;
      /* WHITE */
      z-index: 1;
    }
    
    .product-carousel .products-heading {
      font-size: 36px;
      font-weight: bold;
      border-radius: 8px;
      display: inline-block;
      margin: 10px 0 12px;
      /* remove default gap */
      padding: 0;
    }
    
    @media (max-width: 768px) {
      .product-carousel .products-heading {
        font-size: 30px;
      }
    }
    
    .product-carousel .slider-container {
      position: relative;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      overflow: hidden;
    }
    
    .product-carousel .slider-track {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }
    
    .product-carousel .slide {
      min-width: 25%;
      padding: 0 8px;
      box-sizing: border-box;
      text-align: center;
    }
    
    .product-carousel .slide img {
      width: 100%;
      height: 260px;
      object-fit: cover;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }
    
    .product-carousel .slide img:hover {
      transform: scale(1.05);
    }
    
    .product-carousel .product-name {
      margin-top: 10px;
      font-size: 18px;
      font-weight: bold;
      color: #333;
      text-transform: capitalize;
      letter-spacing: 1px;
    }
    
    .product-carousel .slider-button {
      position: absolute;
      top: 45%;
      transform: translateY(-50%);
      background: #ed502e;
      color: white;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      z-index: 10;
      transition: background-color 0.3s ease;
    }
    
    .product-carousel .prev-button {
      left: 10px;
    }
    
    .product-carousel .next-button {
      right: 10px;
    }
    
    /* Responsive styles */
    @media (max-width: 992px) {
      .product-carousel .slide {
        min-width: 33.333%;
      }
    }
    
    @media (max-width: 768px) {
      .product-carousel .slide {
        min-width: 50%;
      }
    }
    
    @media (max-width: 576px) {
      .product-carousel .slide {
        min-width: 100%;
      }
    }
    
    #product-categories {
      scroll-margin-top: 50px;
    }
    
    
    /* carousel indicators hidden on mobile */
    /*@media (max-width: 995px){*/
    /*  #hidden-on-mobile{*/
    /*    display: none;*/
    /*}*/
    /*  }*/
    .youtube-lazy {
      position: relative;
      width: 100%;
      max-width: 560px;
      aspect-ratio: 16/9;
      overflow: hidden;
      background-color: #000;
      cursor: pointer;
      border-radius: 8px;
    }
    
    .youtube-thumb {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Ensures image covers the area fully */
      display: block;
    }
    
    .youtube-lazy .play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70px;
      height: 50px;
      background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 90 60" xmlns="http://www.w3.org/2000/svg"><rect width="90" height="60" rx="12" fill="red"/><polygon points="35,20 60,30 35,40" fill="white"/></svg>') no-repeat center center;
      background-size: contain;
      pointer-events: none;
    }
    
    .popup-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .popup-container {
      border-radius: 12px;
      position: relative;
      transform: translateY(20px);
      width: 540px;
      /* Slightly larger than image to accommodate padding */
      max-width: 90%;
    }
    
    .popup-close {
      position: absolute;
      top: 15px;
      right: 15px;
      background: rgba(255, 0, 0, 0.7);
      border: 2px solid white;
      color: white;
      font-size: 18px;
      cursor: pointer;
      border-radius: 50%;
      width: 36px;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10;
      transition: all 0.3s ease;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }
    
    /* for mobile devices */
    @media (max-width: 500px) {
      .popup-close {
        top: 65px;
        right: 9vw;
      }
    }
    
    /* for desktop and larger screens */
    @media (min-width: 501px) {
      .popup-close {
        top: -28px;
        right: 1vw;
      }
    }
    
    .popup-close:hover {
      background: rgba(255, 0, 0, 0.7);
      transform: scale(1.1);
    }
    
    .popup-body {
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .popup-image {
      width: 500px;
      height: 500px;
      object-fit: contain;
      /* Changed from cover to contain */
      border-radius: 8px;
    }
    
    @media (max-width: 500px) {
      .popup-image {
        width: 300px;
      }
    }
    
    .show-popup {
      display: flex;
      opacity: 1;
    }
    
    .slide-in {
      animation: slideIn 0.5s forwards;
    }
    
    @keyframes slideIn {
      from {
        transform: translateY(50px);
        opacity: 0;
      }
    
      to {
        transform: translateY(0);
        opacity: 1;
      }
    }
    
    
    .page-wrapper ol,
    .page-wrapper ul {
      padding-left: 2rem;
      margin-top: 0;
      margin-bottom: 1rem;
      padding-bottom: 20px;
    }
    
    
    
    
    /* ===============================
       EXPORT MAP LAYOUT
    ================================ */
    
    .export-map-wrap {
      position: relative;
      width: 100%;
      overflow: visible;
      margin: 0;
      padding: 0;
    }
    
    .world-map {
      width: 100%;
      height: auto;
      display: block;
      margin: 0;
      padding: 0;
    }
    
    .page-wrapper {
      overflow-x: visible !important;
    }
    
    /* ===============================
       DOT BASE
    ================================ */
    
    .map-dot {
      position: absolute;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      z-index: 4;
    }
    
    /* pulse layers */
    .map-dot::before,
    .map-dot::after,
    .map-dot span {
      content: "";
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      opacity: 0;
      z-index: -1;
    }
    
    /* animations */
    .map-dot::before {
      animation: waveSmall 3s infinite;
    }
    
    .map-dot::after {
      animation: waveMedium 3s infinite .5s;
    }
    
    .map-dot span {
      animation: waveLarge 3s infinite 1s;
    }
    
    /* ===============================
       COLORS
    ================================ */
    
    .map-dot.export {
      background: #2f80ff;
      box-shadow: 0 0 8px rgba(47, 128, 255, 0.9);
    }
    
    .map-dot.export::before {
      background: rgba(47, 128, 255, 0.65);
    }
    
    .map-dot.export::after {
      background: rgba(47, 128, 255, 0.45);
    }
    
    .map-dot.export span {
      background: rgba(47, 128, 255, 0.25);
    }
    
    .map-dot.hq {
      background: #ff3b3b;
      box-shadow: 0 0 10px rgba(255, 59, 59, 0.9);
    }
    
    .map-dot.hq::before {
      background: rgba(255, 59, 59, 0.65);
    }
    
    .map-dot.hq::after {
      background: rgba(255, 59, 59, 0.45);
    }
    
    .map-dot.hq span {
      background: rgba(255, 59, 59, 0.25);
    }
    
    .map-dot.branch {
      background: #22c55e;
      box-shadow: 0 0 10px rgba(34, 197, 94, 0.9);
    }
    
    .map-dot.branch::before {
      background: rgba(34, 197, 94, 0.65);
    }
    
    .map-dot.branch::after {
      background: rgba(34, 197, 94, 0.45);
    }
    
    .map-dot.branch span {
      background: rgba(34, 197, 94, 0.25);
    }
    
    /* ===============================
       WAVE ANIMATIONS
    ================================ */
    
    @keyframes waveSmall {
      0% {
        transform: scale(1);
        opacity: .9;
      }
    
      60% {
        transform: scale(2);
        opacity: 0;
      }
    }
    
    @keyframes waveMedium {
      0% {
        transform: scale(1);
        opacity: .7;
      }
    
      60% {
        transform: scale(3);
        opacity: 0;
      }
    }
    
    @keyframes waveLarge {
      0% {
        transform: scale(1);
        opacity: .5;
      }
    
      70% {
        transform: scale(4);
        opacity: 0;
      }
    }
    
    /* ===============================
       POPUP CARD (HARD RESET)
    ================================ */
    
    .pin-box {
      position: absolute;
      bottom: 170%;
      left: 50%;
      transform: translateX(-50%);
      width: 110px;
      background: #fff;
      border-radius: 10px;
      text-align: center;
      padding: 8px 6px 8px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
      opacity: 0;
      pointer-events: none;
      transition: .2s ease;
      z-index: 999;
      line-height: 1 !important;
    }
    
    /* reset all theme styles */
    .pin-box * {
      margin: 0 !important;
      padding: 0 !important;
      line-height: 1.1 !important;
      background: none !important;
      box-shadow: none !important;
    }
    
    /* flag */
    .pin-box img {
      display: block !important;
      width: 42px;
      border-radius: 6px;
      margin: 0 auto 4px !important;
    }
    
    /* title */
    .pin-box strong {
      display: block !important;
      font-size: 12px;
      color: #111;
      margin-bottom: 4px !important;
      /* ONLY GAP HERE */
    }
    
    /* text */
    .pin-box small {
      display: block !important;
      font-size: 10px;
      color: #666;
    }
    
    /* show popup */
    .map-dot:hover {
      z-index: 1000;
    }
    
    .map-dot:hover .pin-box {
      opacity: 1;
    }
    
    /* border by type */
    .map-dot.export .pin-box {
      border: 3px solid #2f80ff;
    }
    
    .map-dot.hq .pin-box {
      border: 3px solid #ff3b3b;
    }
    
    .map-dot.branch .pin-box {
      border: 3px solid #22c55e;
    }
    
    /* ===============================
       MOBILE OPTIMIZATION
    ================================ */
    
    @media (max-width: 768px) {
    
      .map-dot {
        width: 4px;
        height: 4px;
      }
    
      .map-dot::before,
      .map-dot::after,
      .map-dot span {
        inset: -2px;
      }
    
      .pin-box {
        width: 90px;
        bottom: 140%;
      }
    
      .pin-box img {
        width: 32px;
      }
    
      .pin-box strong {
        font-size: 11px;
      }
    
      .pin-box small {
        font-size: 9px;
      }
    
      @keyframes waveSmall {
        0% {
          transform: scale(1);
          opacity: .8;
        }
    
        60% {
          transform: scale(1.6);
          opacity: 0;
        }
      }
    
      @keyframes waveMedium {
        0% {
          transform: scale(1);
          opacity: .6;
        }
    
        60% {
          transform: scale(2.2);
          opacity: 0;
        }
      }
    
      @keyframes waveLarge {
        0% {
          transform: scale(1);
          opacity: .4;
        }
    
        70% {
          transform: scale(2.8);
          opacity: 0;
        }
      }
    }
    
    /* ===== Clients Section ===== */
    
    .color-clients {
      background: #fff;
      padding: 10px 0;
    }
    
    /* Heading spacing fix */
    .color-clients h2 {
      margin: 0 0 5px 0;
      padding: 0;
      text-align: center;
      font-weight: 700;
      font-size: 40px;
      font-family: "Raleway", sans-serif;
    }
    
    /* Remove Bootstrap container spacing */
    .color-clients .container {
      padding-top: 0;
      padding-bottom: 5px;
    }
    
    /* Slick wrapper */
    .customer-logos {
      margin: 0;
      padding: 0;
    }
    
    /* Align slides tightly */
    .customer-logos .slick-track {
      display: flex;
      align-items: center;
    }
    
    /* No left-right gap inside slides */
    .customer-logos .slick-slide {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* Logo sizing (controls spacing visually) */
    .customer-logos img {
      display: block;
      max-height: 80px;
      max-width: 95%;
      /* 🔴 adjust 90–98% if needed */
      width: auto;
      object-fit: contain;
    }