@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');
   
      section {
        overflow-x: hidden !important;
      }

      .navbar-toggler-icon {
        display: none;
      }

      .custom-toggler {
        border: none;
        background: transparent;
        outline: none;
        padding: 5px;
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      .toggler-icon {
        width: 25px;
        height: 3px;
        background-color: #fff;
        border-radius: 2px;
        transition: 0.4s;
      }

      /* When scrolled */
      .navbar-scrolled .toggler-icon {
        background-color: #000;
      }

      .custom-toggler[aria-expanded="true"] .toggler-icon:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
      }

      .custom-toggler[aria-expanded="true"] .toggler-icon:nth-child(2) {
        opacity: 0;
      }

      .custom-toggler[aria-expanded="true"] .toggler-icon:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
      }
      /* Default navbar style (TOP) */
      .e-store-nav {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: none;
        border-radius: 50px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        padding: 0 20px 0 10px;
        transition: all 0.3s ease-in-out;
        margin-top: 16px;
        margin-left: 20px;
        margin-right: 20px;
      }
      @media screen and (max-width: 769px) {
        .e-store-nav {
          margin-top: 0px;
          margin-left: 0px;
          margin-right: 0px;
        }
        .e-store-nav .nav-link {
          color: #000 !important;
        }
        .hero-content{
          width: 100% !important;
          left: 54% !important;
        }
      }

      .e-store-nav .navbar-toggler-icon {
        filter: invert(0) brightness(0);
      }
      @media screen and (max-width: 769px) {
        .custom-toggler {
          border: 2px solid #000 !important;
        }
        .toggler-icon {
          background-color: #000 !important;
        }
      }
/* =====button */
    .frt{
   margin-right:4px;
      font-size: 15px;
    }
     @media (max-width: 575px) {
 .frt{
  font-size:13px;
 }
}
  .off {
  --bs-btn-color: #fff;
  --bs-btn-bg: #d47d37;
  --bs-btn-border-color: #d47d37;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #d47d37;
  --bs-btn-hover-border-color: #d47d37;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #d47d37;
  --bs-btn-active-border-color: #d47d37;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #d47d37;
  --bs-btn-disabled-border-color: #d47d37;
  padding-bottom:12px;
  padding-top:12px;
}
      /* Navbar when scrolled */
      .navbar-scrolled {
        margin: 0px;
        background: rgba(255, 255, 255, 0.562);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-radius: 0 !important;
        margin-top: 0 !important;
      }

      .e-store-nav .navbar-brand {
        font-weight: bold;
      }

      .e-store-nav a {
        color: #fff;
        transition: color 0.3s;
        margin-right: auto !important;
      }

      .nav-link:focus,
      .nav-link:hover {
        color: #fff;
      }
      .navbar-scrolled a {
        color: #000 !important; /* Dark text on white bg */
      }

      .navbar-icon li {
        font-size: 20px;
      }
      /* Dropdown items text should always be black */
      .e-store-nav .dropdown-menu .dropdown-item {
        color: #000 !important;
      }

      /* On hover keep it dark background if needed */
      .e-store-nav .dropdown-menu .dropdown-item:hover {
        background-color: #f1f1f1;
        color: #000 !important;
      }
      .custom-index-page-hero {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
      }
      
      .hero-video {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: translate(-50%, -50%);
        z-index: -1;
      }

      .hero-content {
        position: relative;
        z-index: 1;
        text-align: start;
        color: #fff;
        top: 60%;
        left:36%;
        width: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      .hero-content h1 {

        margin-bottom: 1rem;
       
      }

/* 
      .hero-content .btn {
        padding: 0.75rem 1.5rem;
        background: #d67e3c;
        color: #fff;
        border: none;
        border-radius: 5px;
        text-decoration: none;
      } */
      .hero-content h1 {
        font-size: 3.5rem;
        font-weight: 700;
      }
      .hero-content p {
        font-size: 25px;
        margin-top: 1rem;
        margin-bottom: 2rem;
        width: 70%;
      }
      /* .hero-content .btn {
        font-size: 1.1rem;
        padding: 0.8rem 2rem;
        border-radius: 50px;
      } */
      /* Animated text */
      .changing-text {
        color: #d67e3c;
        display: inline-block;
        min-width: 180px;
      }

      .custom-accordion .accordion-button::after {
        background-image: none !important;
        content: "";
        width: 20px;
        height: 20px;
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 20px;
        line-height: 1;
      }

      .custom-accordion .accordion-button.collapsed::after {
        content: "+";
        color: #000;
      }

      .custom-accordion .accordion-button:not(.collapsed)::after {
        content: "–";
        color: #fff;
      }

      .custom-accordion .accordion-button {
        background-color: transparent;
        color: #000;
      }

      /* On hover */
      .custom-accordion .accordion-button:hover {
        background-color: #ddd;
        color: #d67e3c;
      }

      .custom-accordion .accordion-button:not(.collapsed) {
        background-color: #d67e3c !important;
        color: #fff !important;
        box-shadow: none;
      }

      .custom-accordion .accordion-body {
        background-color: #f9f9f9;
        color: #333;
      }

      .custom-form-prolitee button {
        background-color: #d67e3c;
        color: #fff;
        border: none;
      }
      .custom-form-prolitee button:hover {
        background-color: #d67e3c;
        color: #fff;
      }
      .custom-form-prolitee button::before {
        background-color: #d67e3c;
      }
      .footer-bg {
        background-color: #f2f2f2;
        background-size: cover; /* ✅ makes image cover whole area */
        background-repeat: no-repeat; /* ✅ prevents tiling */
        background-position: center; /* ✅ keeps image centered */
        width: 100%;
        overflow-x: hidden; /* ✅ center cards vertically */
      }
      .footer-sociel-media {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }
      .footer-sociel-media ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 10px;
        gap: 20px;
        padding-left: 20px !important;
      }
      
      .footer-sociel-media ul li {
        font-size: 14px;
      }
      .footer-text {
        color: #858383;
        font-size: 14px;
        gap: 20px;
      }
      .navbar-logo {
        width: 100% !important;
        height: 44px !important;
      }
      .navbar-meet-btn {
        background-color: #d67e3c;
        color: #fff;
        border-radius: 10px;
        border: none;
        padding: 8px 15px 8px 15px;
      }
      /* Search box */
      .search-box {
        max-width: 150px;
      }

      .search-box .form-control {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: var(--text-light);
        border-radius: 50px;
        padding: 8px 20px;
      }

      .search-box .form-control::placeholder {
        color: rgba(255, 255, 255, 0.7);
      }

      .search-box .btn {
        background: transparent;
        color: var(--text-light);
        border: none;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .navbar-scrolled .search-box .form-control {
        background: rgba(255, 255, 255, 0.8);
        color: var(--text-dark);
      }

      .navbar-scrolled .search-box .form-control::placeholder {
        color: rgba(0, 0, 0, 0.6);
      }

      .navbar-scrolled .search-box .btn {
        color: var(--text-dark);
      }
      :root {
        --primary-color: #d67e3c;
        --secondary-color: #d67e3c;
        --accent-color: #c3169b;
        --text-light: #fff;
        --text-dark: #000;
        --blur-bg: rgba(255, 255, 255, 0.1);
        --blur-bg-scrolled: rgba(255, 255, 255, 0.85);
      }
      .dropdown-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
      }

      /* Icon styling */
      .dropdown-item i {
        font-size: 10px;
        color: #555;
      }

      /* Position nested dropdowns properly */
      .dropdown-menu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
        display: none;
        position: absolute;
      }

      /* Show nested dropdown on hover */
      .dropdown-menu li:hover > .dropdown-menu {
        display: block;
      }

      /* Optional: improve hover color */
      .dropdown-item:hover {
        background-color: #f8f9fa;
      }

      /* Optional: better visual hierarchy */
      .dropdown-menu {
        border-radius: 0;
        border: 1px solid #ddd;
      }

      .search-box input {
        padding-right: 35px;
      }
      .custom-button-read {
        width: 25%;
      }

      @media screen and (max-width: 769px) {
        .custom-button-read {
          width: 100% !important;
        }
      }
      .custom-button {
        background-color: #d67e3c;
        color: #fff;
        width: 50%;
        border: 1px solid #d67e3c;
        padding: 5px 10px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        position: relative;
        overflow: hidden;
        transition: all 0.3s ease;
      }

      .custom-button:hover {
        background-color: transparent;
        color: #d67e3c;
        border: 1px solid #d67e3c;
      }

      .custom-button i.arrow-right {
        transition: transform 0.3s ease, opacity 0.3s ease;
        display: inline-block;
      }

      .custom-button i.arrow-up-right {
        position: absolute;
        right: 20px;
        opacity: 0;
        transform: translateY(10px);
        transition: transform 0.3s ease, opacity 0.3s ease;
      }

      .custom-button:hover i.arrow-right {
        opacity: 0;
        transform: translateY(-10px);
      }
 .custom-career-why-it-matter-title-text h2 {
    font-size: 35px;
    color: #38006f;
    font-weight: bold;
  }
      .custom-button:hover i.arrow-up-right {
        opacity: 1;
        transform: translateY(0);
      }
      .prolite-section-title h2 {
        font-size: 35px;
        font-weight: 700;
        color: #38006f;
      }
      .prolite-section-title p {
        font-size: 20px;
        color: #38006f;
      }
      .prolitee_about_us h2 {
        font-size: 35px;
        font-weight: 700;
        
        color: #38006f;
      }

      .prolitee_about_us img {
        border-radius: 20px;
      }
      .prolitee_about_us h3 {
        color: #000;
        font-size: 32px;
        font-weight: bold;
      }
      .prolitee_about_us p {
        color: #38006f;
       
      }
      .prolitee_about_us h5 {
        color: #000;
        font-size: 24px;
        font-weight: bold;
      }
      .prolitee_about_us ul {
        color: #d67e3c;
        font-size: 18px;
      }
      .custom-bg {
        background-color: #f2f2f2;
        overflow-y: hidden;
      }
      .prolite-blogs h1 {
        color: #000;
        font-weight: 500;
        font-size: 16px;
      }
      .prolite-blogs h2 {
        color: #000;
        font-weight: bold;
        font-size: 22px;
      }
      .prolite-blogs p {
        color: #000;
        font-size: 18px;
      }
      .prolite-blogs .card:hover {
        background-color: #fff;
        cursor: pointer;
      }

      .prolite-blogs .card-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
      }
      .prolite-blogs .card {
        opacity: 0;
        transform: translateY(80px);
        transition: all 0.8s ease-out;
      }

      .prolite-blogs .card.show {
        opacity: 1;
        transform: translateY(0);
      }

      @media (min-width: 768px) {
        .subtitle {
          font-size: 36px;
        }
      }
      .category-slider {
        overflow: hidden;
        position: relative;
        padding: 10px 0;
        margin: 20px 0;
      }

      @media (min-width: 768px) {
        .category-slider {
          margin: 30px 0;
        }
      }
      .scroll-row {
        display: flex;
        width: max-content;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        animation-duration: 40s;
      }

      #slider1 .scroll-row {
        animation-name: scrollLeft;
      }

      #slider2 .scroll-row {
        animation-name: scrollLeft;
      }
      #slider1 .scroll-row {
        animation-name: scrollLeft;
      }

      /* Apply right scroll */
      #slider2 .scroll-row {
        animation-name: scrollRight;
      }
      .category-card {
        flex: 0 0 auto;
        width: 150px;
        height: 90px;
        margin: 0 10px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      @media (min-width: 768px) {
        .category-card {
          width: 200px;
          height: 120px;
          margin: 0 15px;
        }
      }

      .category-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      }

      .category-card img {
        max-width: 70%;
        object-fit: contain;
        height: 100%;
      }
      @keyframes scrollLeft {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }

      @keyframes scrollRight {
        0% {
          transform: translateX(-50%);
        }
        100% {
          transform: translateX(0);
        }
      }
      .logo-carousel {
        overflow: hidden;
        background: #f8f9fa;
        padding: 20px 0;
      }

      .logo-track {
        display: flex;
        width: max-content;
        animation: scroll 80s linear infinite;
      }

      .logo {
        flex: 0 0 160px;
        height: 100px;
        margin: 0 10px;
      }

      .logo img {
        width: 100px;
        height: 80px;
        object-fit: contain;
      }

      /* Keyframes for smooth infinite scroll */
      @keyframes scroll {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-50%);
        }
      }

      .prolite-section-card h2 {
        color: #000;
        font-weight: bold;
        font-size: 22px;
      }

      .prolite-section-card p {
        color: #000;
        font-size: 18px;
      }

      .prolite-section-card .card:hover {
        background-color: #38006f;
        cursor: pointer;
      }

      .prolite-section-card .card:hover h2,
      .prolite-section-card .card:hover p {
        color: #fff;
      }

      .prolite-section-card .card-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
      }

      .prolite-section-card .card {
        opacity: 0;
        transform: translateX(-80px);
        transition: all 0.8s ease-out;
      }

      .prolite-section-card .card.show {
        opacity: 1;
        transform: translateX(0);
      }

      .last {
        padding: 40px 0;
      }
      @media (min-width: 768px) {
        .last {
          padding: 60px 0;
        }
      }
      .title {
        font-size: 20px;
        font-weight: 500;
        color: #ea1e4c;
      }

      @media (min-width: 768px) {
        .title {
          font-size: 24px;
        }
      }
      .subtitle {
        font-size: 24px;
        font-weight: 700;
        color: #000;
        margin-bottom: 20px;
      }

      /* Apply normal left scroll */

      /* Section spacing */
      .tst {
        padding: 40px 0;
      }
      @media (min-width: 768px) {
        .tst {
          padding: 60px 0;
        }
      }

      /* Slider base */
      .slider {
        overflow: hidden;
        position: relative;
        width: 100%;
      }
      .slider-track {
        display: flex;
        transition: transform 0.5s ease;
      }
      .slider-card {
        flex: 0 0 100%;
        box-sizing: border-box;
        padding: 10px;
      }

      /* Responsive cards */
      @media (min-width: 768px) {
        .slider-card {
          flex: 0 0 50%;
          padding: 15px;
        }
      }
      @media (min-width: 1200px) {
        .slider-card {
          flex: 0 0 33.333%; /* 3 cards per row on large screens */
        }
      }

      /* Text style */
      .deprt {
        font-size: 20px;
        color: #d67e3c;
      }
      .testimonial-client {
        font-size: 17px;
      }
      
      .deal {
        text-align: justify;
        font-size: 17px !important;
      }

      /* Navigation buttons */
      .prev,
      .next {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .numberss {
        padding: 40px 0;
      }

      @media (min-width: 768px) {
        .numberss {
          padding: 60px 0;
        }
      }
      .feature-box {
        text-align: center;
        padding: 25px 15px;
        border-radius: 12px;
      }

      @media (min-width: 768px) {
        .feature-box {
          padding: 30px 20px;
        }
      }

      .num {
        font-size: 50px;
        font-weight: bold;
        color: #fff;
      }

  
      .part {
        font-size: 18px;
        font-weight: 400;
        color: #fff;
      }

      .custom-text-justify {
        text-align: justify;
      }
      .custom-bg-purple {
        background-color: #38006f;
      }

      .custom-bg-purple::-webkit-scrollbar {
        display: none;
      }

      /* Hide scrollbar - Firefox */
      .custom-bg-purple {
        scrollbar-width: none;
      }

      /* Hide scrollbar but still allow scrolling */
      .custom-bg-purple {
        -ms-overflow-style: none; /* IE + Edge */
        overflow-y: scroll;
      }
      .footer-line {
        margin-top: 48px;
        height: 0.5px;
        background-color: #000;
        width: 100%;
      }
  
      .custom-experiences-img-one {
        height: 350px;
        border-radius: 40px;
        object-fit: cover;
      }
      .custom-experiences-img-two {
        height: 350px;
        border-radius: 40px;
        object-fit: cover;
      }
      .custom-experiences-img-three {
        height: 350px;
        border-radius: 40px;
        object-fit: cover;
      }
      .custom-experiences-img-four {
        height: 350px;
        border-radius: 40px;
        object-fit: cover;
      }
   
   
      @media screen and (max-width: 769px) {
        .custom-margin {
          margin-top: 1rem;
        }
        .custom-margin-img-three {
          margin-top: 1rem;
        }
        .custom-experiences-img-one,
        .custom-experiences-img-two,
        .custom-experiences-img-three,
        .custom-experiences-img-four {
          height: 100%;
        }
      }
      .custom-experiences-text {
        position: absolute;
        background-color: #d67e3c;
        bottom: 0;
        left: 0;
        border-bottom-left-radius: 40px;
        border-top-right-radius: 90px;
        border-top-left-radius: 30px;
        width: 70%;
        height: 70px;
        display: flex;
        flex-shrink: 0;
        flex-direction: column;
      }
      .custom-experiences-text h1 {
        color: #ffff;
        font-weight: 500;
        font-size: 20px;
      }
      .custom-experiences-text p {
        color: #ffff;
      }

      .custom-contact-us-bg {
        position: absolute;
        height: 10vh;
        background: #fff;
        width: 100%;
        bottom: -1px;
      }
      .custom-contact-us h2 {
        font-size: 35px;
        font-weight: bold;
        color: #ffff !important;
      }
      .custom-contact-us p {
        color: #fff;
        font-size: 17px;
      }
      .custom-contact-us-form {
        border-radius: 40px;
        margin-bottom: 13px;
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
      }
      .custom-contact-us-form h2 {
        font-size: 35px;
        font-weight: bold;
        color: #38006f !important;
      }
      .custom-contact-us-form p {
        color: #000 !important;
        font-size: 20px;
      }
      .custom-contact-us-form input {
        border: none;
        background: #f2f2f2;

        padding-bottom: 10px;
        padding-top: 10px;
        border-radius: 14px;
      }
      .custom-contact-us-form textarea {
        border: none;
        background: #f2f2f2;

        padding-bottom: 10px;
        padding-top: 10px;
        border-radius: 14px;
      }
      .custom-contact-us-form input::placeholder {
        color: #000;
        font-weight: 300;
      }
      .custom-contact-us-form textarea::placeholder {
        color: #000;
        font-weight: 300;
      }
      .custom-contact-us-form input:focus {
        border: none;
        outline: none;
        box-shadow: none;
        background: #f2f2f2;
      }
      .custom-contact-us-form textarea:focus {
        border: none;
        outline: none;
        box-shadow: none;
        background: #f2f2f2;
      }
      .custom-case-study img {
        border-radius: 40px;
        /* height: 300px;
        object-fit: cover; */
      } 
        .custom-case-study h2 {
    font-size: 24px;
    font-weight: bold !important;
    color: #000 !important;
  }
      .custom-case-study p {
         font-size: 17px;
        color: #000 !important;
      }

      .custom-contact-us-icon h5 {
        color: #fff;
      }
      .custom-contact-us-icon i {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #d67e3c;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        color: #fff;
      }
      .custom-contact-us-icon a {
        color: #fff;
        text-decoration: none;
      }

      .about-text {
        text-align: justify;
      }
      .custom-about-us-bg {
        background: radial-gradient(circle, #d67e3c42 0%, #ffffff 30%);
      }
      .two_image {
        height: 44%;
        object-fit: cover;
      }
      .custom-about-us h5 {
        font-size: 17px;
        font-weight: bold;
        color: #38006f;
        margin-bottom: 0px;
      }
      .custom-about-us h2 {
        font-size: 35px;
        font-weight: bold;
        color: #d67e3c !important;
        margin-bottom: 5px;
      }
      .custom-about-us h3 {
        font-size: 35px;
        font-weight: bold;
        color: #38006f !important;
        margin-bottom: 1rem;
      }
      .custom-about-us h6 {
        font-size: 20px;
        font-weight: 500;
        color: #d67e3c !important;
        margin-bottom: 1rem;
      }
      .custom-about-us p {
        color: #7c7a7a;
        font-size: 17px !important;
      }

      .cutsom-about-us-button {
        background-color: #ff6d00;
        width: 200px;
        height: 40px;
        border-radius: 20px;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        padding-left: 8px;
      }
      .cutsom-about-us-button a {
        font-size: 17px;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
        padding-left: 10px;
      }
      .cutsom-about-us-button span {
        font-size: 20px;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
        z-index: 1;
       
      }
      .cutsom-about-us-button i {
        background-color: #fff;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        color: #d67e3c !important;
        justify-content: center;
      }
      .custom-about-us-button-icon {
        background-color: #ff6d00;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        padding-left: 10px;
      }
      .custom-about-us-button-icon i {
        color: #fff;
      }

      .about-section-design {
        width: 100%;
        height: 100px;
        margin: 0;
        background-color: #e7e2e2b3;
        border-radius: 87px;
        border: 1px solid #8888881a;
        display: flex;
        padding: 10px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        gap: 30px;
        border: none;
      }

      .about-section-design-icon {
        background-color: #bebbbb5e;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        transition: background-color 0.4s, transform 0.6s;
        transform-style: preserve-3d;
      }

      .about-section-design-icon i {
        font-size: 40px;
        color: #d67e3c;
        transition: color 0.4s;
      }

      .about-section-design h4 {
        font-size: 24px;
        font-weight: 700;
        line-height: 30px;
        color: #38006f;
      }

      .about-section-design:hover .about-section-design-icon {
        background-color: #38006f;
        transform: rotateY(180deg);
      }

      .about-section-design:hover .about-section-design-icon i {
        color: #d67e3c;
      }

      /* --------------------------services-commen-css-------------------------------------- */

      .custom-service-first-section h1 {
        font-size: 48px;
        color: #38006f;
        font-weight: bold;
      }
      .custom-service-first-section h2 {
        font-size: 30px;
        color: #d67e3c;
        font-weight: bold;
        text-align: start;
      }
    
      .custom-service-first-section h3 {
        font-size: 18px;
        color: #38006f;
        font-weight: bold;
        z-index: 1;
      }
      .custom-service-first-section h4 {
        font-size: 46px;
        color: #d67e3c;
        font-weight: bold;
        z-index: 1;
      }
      .cutsom-about-us-button {
        background-color: #d67e3c;
        width: 200px;
        height: 40px;
        border-radius: 20px;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        padding-left: 8px;
        z-index: 1;
      }
      .cutsom-about-us-button a {
        font-size: 14px;
        font-weight: 600;
        color: #fff;
        text-decoration: none;
        padding-left: 10px;
        z-index: 1;
      }
      .cutsom-about-us-button i {
        background-color: #fff;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        flex-shrink: 0;
        align-items: center;
        color: #d67e3c !important;
        justify-content: center;
        z-index: 1;
      }
      .custom-service-line {
        height: 3px;
        max-width: 250px;
        width: 100%;
        background-color: #38006f;
        position: absolute;
        right: 0px;
        top: 94px;
      }
      .custom-para-line {
        height: 3px;
        max-width: 100px;
        width: 100%;
        background-color: #38006f;
      }

      .custom-service-title,
      .custom-service-para {
        width: fit-content;
      }
      .custom-service-first-section-img img {
        width: 90%;
        height: 400px;
        object-fit: cover;
        border-radius: 15px;
        float: right;
      }
      .custom-service-img-text {
        position: absolute;
        left: 13px;
        background-color: #d67e3c;
        top: 270px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        border-radius: 15px;
        padding-right: 20px;
        padding-left: 20px;
        flex-shrink: 0;
        width: 174px;
      }
      .custom-service-img-text p {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 10px;
      }

      @media screen and (max-width: 769px) {
        .custom-service-first-section-img img {
          width: 100%;
          float: none !important;
        }
        .custom-service-engagement-card p,
        .custom-service-engagement,
        .custom-build-calendar h1 {
          width: 100% !important;
        }
        .custom-culture-companies-text {
         
          border: none!important;
        }
      }

      .custom-curve-border-one {
        position: absolute;
        bottom: 0px;
        right: 0px;
        background-color: #f2f2f2;
        width: 60%;
        height: 83px;
        border-bottom-left-radius: 32px;
        z-index: 2;
      }
      .custom-circle-border-two-bg {
        position: absolute;
        left: -665px;
        bottom: -254px;
        background: radial-gradient(
          circle,
          rgba(255, 119, 0, 1) -35%,
          transparent 23%
        );
        width: 100%;
        height: 498px;
        z-index: 1;
      }
      .custom-curve-border-one-piece {
        position: absolute;
        background-color: #fff;
        bottom: -1px;
        left: 39%;
        height: 40px;
        width: 48px;
        z-index: 1;
      }
      .custom-curve-border-two {
        position: absolute;
        bottom: -1px;
        background-color: #fff;
        width: 40%;
        height: 83px;
        border-top-right-radius: 10px;
        z-index: 10;
      }
      .custom-curve-border-two-text {
        background-color: #d67e3c;
        margin: 10px;
        border-radius: 10px;
        margin-bottom: 0px !important;
        display: flex;
        height: 60px;
      }
      .custom-curve-border-two-text-first-section {
        background-color: #38006f;
        width: 68%;
        border-radius: 10px;

        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .custom-curve-border-two-text-first-section h1 {
        font-size: 14px;
        color: #fff;
        font-weight: 400;
        width: 60%;

        padding-left: 12px;
      }
      .custom-curve-border-two-text-first-section h2 {
        font-size: 32px;
        color: #fff;
        font-weight: bold;
        width: 40%;
        text-align: center;
      }
      .custom-curve-border-two-text-first-section h3 {
        font-size: 14px;
        color: #fff;
        font-weight: 400;
        text-align: end;
        padding-right: 12px;
        padding-top: 12px;
      }
      .custom-curve-border-two-text-second-section {
        background-color: #d67e3c;
        width: 40%;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .custom-curve-border-two-text-second-section h4 {
        font-size: 40px;
        color: #fff;
        font-weight: bold;
        padding-top: 12px;
        padding-left: 12px;
      }
      .custom-curve-border-two-text-second-section h5 {
        font-size: 14px;
        color: #fff;
        font-weight: 400;
        padding-top: 12px;
        padding-right: 17px;
      }

      .custom-culture-companies-bg {
        background: linear-gradient(
          134deg,
          rgba(255, 255, 255, 1) 0%,
          rgba(255, 255, 255, 1) 85%,
          rgb(56 0 111 / 21%) 100%
        );
      }
      .custom-culture-companies {
        border: 2px solid #38006f;
        border-radius: 15px;
        padding: 15px;
        display: flex;
        align-items: center;
      }
      .custom-culture-companies-text {
        width: 20%;
        border-right: 1px solid #000;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .custom-culture-companies h1 {
        font-size: 16px;
        font-weight: bold;
        color: #000;
        margin-bottom: 0px;
      }
      .custom-culture-companies h1 i {
        font-weight: 900;
        color: #38006f;
      }

      .custom-culture-companies-img {
        display: flex;
        gap: 30px;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
        width: 75%;
        position: relative;
        cursor: pointer;
      }

      .custom-culture-companies-img img {
        width: 90px;
        height: 90px;
        object-fit: cover;
        filter: grayscale(100%);
        transition: filter 0.3s ease, transform 0.3s ease;
      }

      .custom-culture-companies-img img:hover {
        filter: grayscale(0%);
        transform: scale(1.05);
      }

      .custom-circle-bg {
        position: absolute;
        top: -290px;
        right: -660px;
        background: radial-gradient(
          circle,
          rgba(255, 119, 0, 1) -35%,
          #f2f2f2 23%
        );
        width: 100%;
        height: 590px;
      }

      /* -------------------------------------------Reuse css --------------------------------- */
      .custom-what-we-do-text h4 {
        font-size: 14px;
        color: #38006f;
        font-weight: bold;
        margin-bottom: 0px;
        padding-right: 10px;
      }
      .custom-what-we-do-text .custom-what-we-do-text-line {
        width: 60px;
        height: 2px;
        background-color: #d67e3c;
      }
      .custom-what-we-do-text h2 {
        font-size: 35px;
        color: #38006f;
        font-weight: bold;
        margin-bottom: 0px;
      
      }
      .custom-what-we-do-text h3 {
        font-size: 24px;
        color: #d67e3c;
        font-weight: bold;
        margin-bottom: 0px;
      }
      .custom-what-we-do-text p {
        font-size: 17px;
        color: #7e7d7d;
      }
      .custom-what-we-do-text ul li {
        gap: 30px;
        padding-bottom: 20px;
        cursor: pointer;
        z-index: 2;
      }
      .custom-what-we-do-text ul li i {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #d67e3c;
        color: #fff;
      }
      .custom-what-we-do-text ul li h4 {
        margin-bottom: 0px;
        font-size: 24px;
        font-weight: bold;
        color: #d67e3c;
      }
      .custom-what-we-do-text ul li:hover i {
        background-color: #38006f;
      }
      .custom-what-we-do-text ul li:hover h4 {
        color: #38006f;
      }
      .custom-what-we-do-text-ul-line {
        width: 90%;
        height: 2px;
        background-color: #d67e3c;
        position: absolute;
        left: 20px;
        top: 18px;
        z-index: 1;
      }

      .custom-employee-brand {
        border-radius: 0px;
        border: none;
      }
      .custom-employee-brand img {
        width: 100%;
        height: 80vh;
        object-fit: cover;
      }
      .custom-employee-brand h1 {
        font-size: 30px;
        color: #fff;
        width: 60%;
        font-weight: bold;
      }
      .custom-employee-brand-bg {
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: #0000008f;
      }
      .custom-employee-brand-new h1 {
        font-size: 30px;
        color: #fff;
        width: 60%;
        font-weight: bold;
      }

      .custom-employee-brand-card {
        background-color: #fff;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px;
        padding: 70px 40px 40px 40px;
        position: relative;
        cursor: pointer;
        height: 100%;
      }
      .custom-employee-brand-card h2 {
        font-size: 24px;
        color: #38006f;
        font-weight: bold;
      }
      .custom-employee-brand-card p {
        font-size: 17px;
        color: #615f5f;
        margin-bottom: 0px;
      }
      .custom-employee-brand-card-icon {
        background-color: #d47d37;
        width: 70px;
        height: 70px;
        position: absolute;
        top: -10px;
        left: -10px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .custom-employee-brand-card-icon i {
        color: #fff;
        font-size: 40px;
      }
      .custom-employee-brand-card:hover {
        background-color: #d47d37;
      }
      .custom-employee-brand-card:hover h2 {
        color: #fff;
      }
      .custom-employee-brand-card:hover p {
        color: #fff;
      }
      .custom-employee-brand-card:hover .custom-employee-brand-card-icon {
        background-color: #fff;
      }
      .custom-employee-brand-card:hover .custom-employee-brand-card-icon i {
        color: #d47d37;
      }

      .custom-image-background {
        background: url("{% static 'website-img/bg our formula.webp' %}")
          no-repeat center center;

        background-size: cover;
        position: relative;
        padding: 80px 0; /* optional: adds spacing so content is visible */
      }

      .custom-image-background::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4); /* adjustable */
        z-index: 1;
      }

      .custom-employee-brand-new {
        position: relative;
        z-index: 2;
      }

      .custom-career-why-it-matter-bg {
        background: radial-gradient(circle, rgb(255 119 0 / 25%) 0%, #fff 18%);
      }
      .custom-career-why-it-matter {
        position: relative;
        height: 500px;
        width: 100%;
      }
      .custom-career-why-it-matter-main-img {
        width: 70%;
        height: 100%;
        object-fit: cover;
        border-radius: 30px;
        float: right;
      }
      .custom-career-why-it-matter-second-img {
        position: absolute;
        width: 50%;
        height: 76%;
        bottom: -30px;
        left: 40px;
        background-color: #fff;
        border-radius: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .custom-career-why-it-matter-second-img img {
        width: 90%;
        height: 92%;
        border-radius: 20px;
        object-fit: cover;
      }
      .custom-career-why-it-matter-icon {
        position: absolute;
        top: 50px;
        left: 13%;
        border-radius: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .custom-career-why-it-matter-icon i {
        color: #d67e3c;
        font-size: 60px;
      }
      .custom-career-why-it-matter-circle {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: #38006f;
        position: absolute;
        left: 45%;
        bottom: 5%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .custom-career-why-it-matter-circle h1 {
        font-size: 35px;
        color: #fff;
        font-weight: bold;
        margin-bottom: 0px;
      }
      .custom-career-why-it-matter-traingle {
        position: absolute;
        bottom: -40px;
        left: 58%;
      }
      .custom-career-why-it-matter-traingle i {
        font-size: 30px;
        color: #38006f;
      }
      .custom-career-why-it-matter-text h3 {
        font-size: 35px;
        color: #d67e3c;
        font-weight: bold;
      }
      .custom-career-why-it-matter-text h2 {
        font-size: 24px;
        color: #38006f;
        font-weight: bold;
      }
      .custom-career-why-it-matter-text p {
        font-size: 17px;
        color: #575555;
        font-weight: 400;
      }
      .custom-career-why-it-matter-text i {
        color: #d67e3c;
        font-size: 18px;
      }
      .custom-career-why-it-matter-col {
        padding-left: 65px;
      }
      .custom-what-we-do-img {
        width: 400px;
        height: 450px;
        border-radius: 50px;
        position: relative;
        z-index: 1;
      }
      .custom-what-we-do-img-image {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50px;
      }
      .custom-what-we-do-img-image img {
        border-top-right-radius: 50px;
        border-bottom-left-radius: 50px;
      }
      .custom-what-we-do-img-bg {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;
      }
      .custom-what-we-do-img-bg img {
        filter: brightness(0) invert(1);
      }
      .custom-what-we-do-img-bg-border-one {
        position: absolute;
        border-top: 16px solid #fff;
        border-left: 16px solid #fff;
        top: -3.5%;
        left: 25.4%;
        width: 65px;
        height: 68px;
        border-top-left-radius: 50px;
      }
      .custom-what-we-do-img-bg-border-two {
        position: absolute;
        border-bottom: 16px solid #fff;
        border-right: 16px solid #fff;
        bottom: -3.6%;
        right: 25.8%;
        width: 65px;
        height: 68px;
        border-bottom-right-radius: 50px;
      }
      .custom-what-we-do-img-bg-border-three {
        position: absolute;
        border-top: 16px solid #fff;
        border-left: 16px solid #fff;
        top: 20.5%;
        left: -2%;
        width: 65px;
        height: 80%;
        border-bottom-left-radius: 80px;
        border-top-left-radius: 83px;
      }
      .custom-what-we-do-bg {
        /* background: radial-gradient(circle, rgb(255 119 0 / 25%) 0%, #fff 18%); */
        background-color: #fff;
      }

      .custom-what-we-do-left-icon {
        position: absolute;
        top: 19px;
        left: 28px;
        z-index: 7;
      }
      .custom-what-we-do-left-icon i {
        color: #d67e3c;
        font-size: 60px;
      }
      .custom-what-we-do-right-icon {
        position: absolute;
        bottom: 19px;
        right: 28px;
        z-index: 7;
      }
      .custom-what-we-do-right-icon i {
        color: #d67e3c;
        font-size: 60px;
      }

      @media screen and (max-width: 769px) {
        .custom-what-we-do-text-ul-line {
          width: 2px;
          height: 82%;
          background-color: #d67e3c;
          position: absolute;
          left: 20px;
          top: 18px;
          z-index: 1;
        }
        .custom-employee-brand img {
          height: 150vh;
        }
        .custom-employee-brand h1 {
          width: 100% !important;
        }
        .custom-career-why-it-matter-bg {
          background: #fff !important;
        }
        .custom-career-why-it-matter-second-img {
          left: 0px !important;
        }
        .custom-career-why-it-matter-icon {
          left: 6% !important;
        }
        .custom-career-why-it-matter-circle {
          left: 33%;
        }
        .custom-career-why-it-matter-col {
          padding-left: 3rem !important;
        }
        .custom-what-we-do-img {
          margin-left: auto !important;
          margin-right: auto !important;
          width: 100% !important;
        }
        .custom-what-we-do-img-bg-border-three {
          top: 18.5% !important;
          height: 82% !important;
        }
        .hero-content h1 {
          font-size: 32px !important;
          width: 96% !important;
          
        }
        .hero-content p {
          font-size: 18px !important;
          width: 80% !important;
        }
        .custom-center-image-in-mobile{
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .custom-culture-companies-img{
          width: 100% !important;
        }
        .custom-culture-companies{
          border: none !important;
        }
        .custom-culture-companies-text{
          display: none!important;
        }
        .custom-culture-companies-img img{
          height: 120px !important;
          width: 120px !important;
        }
         .custom-prolite-active-page-card-four-section .four-section-one {
        width: 55%!important;
    
       
      }
      .custom-prolite-active-page-card-four-section .four-section-two {
        width: 55%!important;
        
        
      }
      .custom-prolite-active-page-card-four-section .four-section-three {
        width: 55%!important;
       
       
      }
      .custom-prolite-active-page-card-four-section .four-section-four {
        width: 55%!important;
       
       
      }
      .custom-prolite-active-page-card-four-section .four-section-five {
        width: 55%!important;
     
       
      }
      .custom-prolite-active-page-card-four-section .four-section-six {
        width: 55%!important;
      
        
      }
      .custom-prolite-active-page-card-four-section .four-section-seven {
        width: 55%!important;
        
       
      }
      
     

      }
      .custom-service-first-section h1 {
        font-size: 48px;
        color: #38006f;
        font-weight: bold;
        width: 86%;
        text-align: start;
      }
   
      .custom-service-first-section {
           width: 75%;
        height: 100%;
        padding-top: 40px;
      }
      .custom-prolitee-banner-design{
        position: absolute;
        bottom: 1%;
        left: 40%;
      }

      @media screen and (max-width: 460px){
         .cutsom-about-us-button span {
          font-size: 8px !important;
        }
        .cutsom-about-us-button i{
          height: 20px !important;
          width:  20px !important;
        }
        .cutsom-about-us-button{
          height: 30px !important;
        }
        .custom-service-first-section h4{
          font-size: 14px !important;
          margin-bottom: 2px !important;
        }
        .custom-service-first-section h3{
          display: none !important;
        }
        .custom-prolitee-banner-design{
          bottom: 26% !important;
        }
      }

      @media screen and (max-width: 500px) {
        .custom-service-first-section h1 {
          font-size: 14px !important;
          width: 80%;
        }
        .custom-service-first-section h2 {
          font-size: 12px !important;
        }
        .custom-service-first-section p {
          font-size: 10px !important;
          margin-bottom: 10px !important;
        }
        .cutsom-about-us-button {
          
        }
     
         .custom-prolitee-banner-design{
          bottom: 21.5% !important;
        }
        .custom-prolitee-banner-design {
          flex-direction: row !important;
        }
        .custom-service-first-section h4 {
          font-size: 20px;
        }
        .custom-service-first-section h3 {
          font-size: 14px;
        }
        .carousel-caption {
          left: 20px;
        }
        .custom-service-first-section {
          width: 71%;
          padding-top: 1px !important;
        }
        /* .custom-employee-brand-card {
          padding: 66px 14px 20px 20px !important;
        } */
      }

      @media screen and (min-width: 500px) and (max-width: 769px) {
        .custom-service-first-section h1 {
          font-size: 20px !important;
          width: 74%;
        }
        .custom-service-first-section h2 {
          font-size: 16px !important;
        }
        .custom-service-first-section p {
          font-size: 10px !important;
          margin-bottom: 10px !important;
        }
       
    
     
        .custom-prolitee-banner-design {
          flex-direction: row !important;
           bottom: 13% !important;
        }
        .custom-service-first-section h4 {
          font-size: 20px;
        }
        .custom-service-first-section h3 {
          font-size: 14px;
        }
        .carousel-caption {
          left: 20px;
        }
        .custom-service-first-section {
          width: 71%;
          padding-top: 8px !important;
        }
      }

      @media screen and (min-width: 769px) and (max-width: 1265px) {
        .custom-service-first-section h1 {
          font-size: 30px !important;
          width: 74%;
        }
        .custom-service-first-section h2 {
          font-size: 18px !important;
        }
        .custom-service-first-section p {
          font-size: 14px !important;
          margin-bottom: 10px;
        }
     
     
       
        .custom-prolitee-banner-design {
          flex-direction: row !important;
        }
        .custom-service-first-section h4 {
          font-size: 20px;
        }
        .custom-service-first-section h3 {
          font-size: 14px;
        }
        .carousel-caption {
          left: 20px;
        }
        .custom-service-first-section {
          width: 71%;
        }
      }

        @media screen and (max-width:769px) {
    .custom-carousel-item{
      height: 35vh;
    }
    .custom-carousel-item img{
      height: 100%;
      object-fit: contain;
    }
  }
    .custom-service-first-section h1{
    color: #fff;
    text-align: center;
    width: 100%;
  }
  .custom-service-first-section p{
    color: #fff;
    text-align: center;
    width: 100%;
  }
      .custom-margin-top {
        margin-top: 72px;
      }
      .custom-carousel-caption {
        position: absolute;
        z-index: 5;
        display: flex;
        top: 0px;
        width: 100%;
        height: auto;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
        color: var(--bs-carousel-caption-color); 
        justify-content: start;
        align-items: center;
      }
    

      #backToTopBtn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 9999;
  background-color: #d67e3c;
  color: #fff;
  border: none;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: none;
  transition: 0.4s ease;
}

/* WhatsApp button hidden by default */
.custom-whatsapp-button {
  position: fixed;
  bottom: 85px;
  right: 25px;
  z-index: 9999;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  display: none;   /* Important */
}

.custom-whatsapp-button img {
  width: 100%;
  height: 100%;
}

      .custom-prolite-active-page-card-four-section {
        display: flex;
        gap: 10px;
        -ms-overflow-style: none;
        scrollbar-width: none;
        overflow-x: auto !important;
        white-space: nowrap;
      }
      .custom-prolite-active-page-card-four-section .four-section-one {
        width: 10%;
    
        object-fit: cover;
        border-radius: 20px;
      }
      .custom-prolite-active-page-card-four-section .four-section-two {
        width: 40%;
        
        object-fit: cover;
        border-radius: 20px;
      }
      .custom-prolite-active-page-card-four-section .four-section-three {
        width: 30%;
       
        object-fit: cover;
        border-radius: 20px;
      }
      .custom-prolite-active-page-card-four-section .four-section-four {
        width: 35%;
       
        object-fit: cover;
        border-radius: 20px;
      }
      .custom-prolite-active-page-card-four-section .four-section-five {
        width: 28%;
     
        object-fit: cover;
        border-radius: 20px;
      }
      .custom-prolite-active-page-card-four-section .four-section-six {
        width: 20%;
      
        object-fit: cover;
        border-radius: 20px;
      }
      .custom-prolite-active-page-card-four-section .four-section-seven {
        width: 45%;
        
        object-fit: cover;
        border-radius: 20px;
      }

      .custom-prolite-active-page-card-four-section img {
        display: inline-block;
        height: 250px;
      }
      .custom-prolite-active-page-card-four-section::-webkit-scrollbar {
        display: none;
      }
      .custom-prolite-active-page-card-four-section {
  will-change: scroll-position;
}


      .custom-career-discover-services-button-nxt-pre {
    display: flex;
    flex-direction: row;
    gap: 20px;
  }
  .custom-career-discover-services-button-nxt-pre button {
    background-color: #d67e3c;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border: none;
    color: #fff;
  }



   .custom-new-curver-image-design {
        width: 380px;
        height: 450px;
        position: relative;
      }
      .custom-new-curver-image-design img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-top-right-radius: 80px;
        border-bottom-left-radius: 80px;
      }
      .custom-new-curver-image-design-border-one {
        width: 120px;
        height: 120px;
        background-color: #fff;
        position: absolute;
        top: 0px;
        left: 0px;
        border-bottom-right-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .custom-new-curver-image-design-border-two {
        width: 120px;
        height: 120px;
        background-color: #fff;
        position: absolute;
        bottom: 0px;
        right: 0px;
        border-top-left-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .custom-new-curver-image-design-border-one i {
        color: #d67e3c;
        font-size: 60px;
      }
      .custom-new-curver-image-design-border-two i {
        color: #d67e3c;
        font-size: 60px;
      }
      .custom-new-curver-image-design-border-one-inner {
        position: absolute;
        width: 165px;
        height: 80px;
        top: -10.7px;
        right: -155px;
        background-color: transparent;
        border-top: 10px solid #fff;
        border-left: 10px solid #fff;
        border-top-left-radius: 55px;
        z-index: 1;
      }
      .custom-new-curver-image-design-border-one-inner span {
        width: 40px;
        height: 48px;
        background-color: #fff;
        position: absolute;
        top: -15px;
        left: -23px;
        border-bottom-right-radius: 50px;
      }
      .custom-new-curver-image-design-border-one-inner-one {
        position: absolute;
        width: 90px;
        height: 80px;
        bottom: -70px;
        left: -10px;
        background-color: transparent;
        border-top: 10px solid #fff;
        border-left: 10px solid #fff;
        border-top-left-radius: 55px;
        z-index: 1;
      }
      .custom-new-curver-image-design-border-one-inner-one span {
        width: 40px;
        height: 48px;
        background-color: #fff;
        position: absolute;
        top: -15px;
        left: -23px;
        border-bottom-right-radius: 50px;
      }
      .custom-new-curver-image-design-border-two-inner {
        position: absolute;
        width: 90px;
        height: 80px;
        top: -70px;
        right: -10px;
        background-color: transparent;
        border-bottom: 10px solid #fff;
        border-right: 10px solid #fff;
        border-bottom-right-radius: 55px;
        z-index: 1;
      }
      .custom-new-curver-image-design-border-two-inner span {
        width: 26px;
        height: 25px;
        background-color: #fff;
        position: absolute;
        bottom: -10px;
        right: -12px;
        border-top-left-radius: 10px;
      }
      .custom-new-curver-image-design-border-two-inner-one {
        position: absolute;
        width: 90px;
        height: 80px;
        bottom: -10px;
        left: -80px;
        background-color: transparent;
        border-bottom: 10px solid #fff;
        border-right: 10px solid #fff;
        border-bottom-right-radius: 55px;
        z-index: 1;
      }
      .custom-new-curver-image-design-border-two-inner-one span {
        width: 26px;
        height: 25px;
        background-color: #fff;
        position: absolute;
        bottom: -10px;
        right: -12px;
        border-top-left-radius: 10px;
      }
      

.custom-circle {
  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* Circle behind everything */
.circle {
  width: 555px;
  height: 555px;
  border-radius: 50%;
  background: conic-gradient(
    #c1a9ec,
    #edd2b3,
    #c1a9ec,
    #c6b2f0,
    #f2f0fe,
    #cc8853,
    #cc8853
  );
  position: absolute;
  z-index: -1; 
}

/* Desktop positions */
.top-corner {
  top: -276px;
  right: -276px;
}

.bottom-corner {
  bottom: -276px;
  left: -276px;
}

/* Make container appear ABOVE circle */
.chors {
  background: white;
  position: relative;
  z-index: 1;
}



/* ===========================
   📱 TABLET VIEW (max 992px)
   =========================== */
@media (max-width: 992px) {

  .circle {
    width: 350px;
    height: 350px;
  }

  .top-corner {
    top: -150px;
    right: -80px;
  }

  .bottom-corner {
    bottom: -150px;
    left: -80px;
  }
}




/* ===========================
   📱 MOBILE VIEW (max 576px)
   =========================== */
@media (max-width: 576px) {

  .circle {
    width: 250px;
    height: 250px;
  }

  .top-corner {
    top: -100px;
    right: -60px;
  }

  .bottom-corner {
    bottom: -100px;
    left: -60px;
  }
}
/* Base (Desktop) */
.plays {
  position: absolute;
  top: 50%;
  left: 172px;
  z-index: -1 !important;
}

.hexc {
  position: absolute;
  bottom: 15%;
  right: 175px;
  z-index: -1 !important;
}

/* Tablet (max-width: 992px) */
@media (max-width: 992px) {
  .plays {
  top: 50%;
  left: 17px;
  }
       
  .hexc {
   bottom: 12%;
    right: 20px; /* smaller right */
  }
}


.plays {
  position: absolute;
  top: 50%;
  left: 30px;
  z-index: -1 !important;
}

.hexc {
  position: absolute;
  bottom: 15%;
  right: 30px;
  z-index: -1 !important;
}

@media (min-width: 1300px) {
  .plays {
    top: 50%;
    left: 110px; /* more space on large screens */
  }

  .hexc {
    bottom: 15%;
    right: 110px; 
  }
}

/* Large Desktop (1200px - 1300px) */
@media (max-width: 1300px) and (min-width: 1200px) {
  .plays {
    top: 50%;
    left: 25px;
  }

  .hexc {
    bottom: 15%;
    right: 25px;
  }
}
/* Desktop (992px - 1200px) */
@media (max-width: 1200px) {
  .plays {
    top: 50%;
    left: 80px;
  }

  .hexc {
    bottom: 15%;
    right: 80px;
  }
}

/* Tablet (768px - 992px) */
@media (max-width: 992px) {
  .plays {
    top: 50%;
    left: 0px;
  }

  .hexc {
    bottom: 12%;
    right: 0px;
  }
}

/* Mobile Landscape (576px - 768px) */
@media (max-width: 768px) {
  .plays {
    top: 50%;
    left: 0px;
    transform: scale(0.8);
  }

  .hexc {
    bottom: 10%;
    right: 0px;
    transform: scale(0.8);
  }
}

/* Mobile Portrait (<576px) */
@media (max-width: 576px) {
  .plays {
    top: 50%;
    left: 20px;
    transform: scale(0.7);
  }

  .hexc {
    bottom: 8%;
    right: 20px;
    transform: scale(0.7);
  }
}
 

 .offsite-section {
        display: flex;
        align-items: center;
        gap: 25px;
        padding: 20px;
    }


.slider-card .card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.slider-card .card-body {
  flex-grow: 1; /* Push footer to bottom */
}

.size {
  max-height: 60px;  /* keep image size uniform */
  object-fit: contain;
}


      .custom-career-build-a-brand {
        background-color: #38006f;
        border-radius: 30px;
        height: 180px;
        width: 100%;
        display: flex;
        align-items: center;
        position: relative;
        justify-content: center;
        padding: 20px;
      }
      .custom-career-build-a-brand-img {
        width: 300px;
        height: 236px;
        object-fit: cover;
        position: absolute;
        z-index: 1;
        top: -56px;
      }
      .custom-career-build-a-brand-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .custom-career-build-a-brand h2 {
        font-size: 35px;
        font-weight: bold;
        color: #fff;
        margin-bottom: 0px;
      }
      .custom-career-build-a-brand p{
        font-size: 24px;
        color: #fff;
      }
      .custom-career-build-a-brand-button {
        display: flex;
        justify-content: center;
    
        
        background-color: transparent;
      }
 

      /* ✅ Mobile Responsive */
@media (max-width: 768px) {
  .custom-career-build-a-brand {
    flex-direction: column;
    height: auto;
    padding: 20px;
    text-align: center;
  }

  .custom-career-build-a-brand-img {
    position: relative;
    top: 0;
    margin-bottom: 15px;
    width: 200px;
    height: 180px;
  }

  .custom-career-build-a-brand h2 {
    font-size: 20px !important; 
    padding: 0 10px;
  }

  .custom-career-build-a-brand-button {
    margin-top: 15px;
    justify-content: center;
  }

  .custom-career-build-a-brand-button button {
    height: auto;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 8px;
  }

  .custom-career-build-a-brand .col-4,
  .custom-career-build-a-brand .col-6,
  .custom-career-build-a-brand .col-2 {
    width: 100%;
    max-width: 100%;
    text-align: center;
  }
}

      @media screen and (max-width: 769px) {
       
       
        .custom-career-build-a-brand-img,
        .custom-career-build-a-brand {
          width: 100% !important;
          height: 100% !important;
        }
        .custom-culture-companies-text{
          width: 60% !important;
        }
        .left-panel{
          display: none !important;
        }
      
     
      }
      @media screen and (max-width: 769px) {

  /* Center the column as a block, but left-align text inside */
  .custom-footer-mobile {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;   /* centers the whole column */
  }

  /* Left align the heading + list inside the column */
  .custom-footer-mobile h6,
  .custom-footer-mobile ul {
      width: 100%;
      text-align: left;
  }

  /* Remove ul padding that causes shifting */
  .custom-footer-mobile ul {
      padding-left: 0 !important;
  }

  .custom-footer-mobile li {
      list-style: none;
      margin-left: 0 !important;
  }
  .video-wrapper{
  height: 100% !important;
    width: 100% !important;
}
}
.video-wrapper{
  height: 400px;
    width: 800px;
}
.custom-video-bg .container{
  justify-content: center;
  display: flex;
}
     
        .video-wrapper video {
    width: 100%!important;
    height: 100%!important;
    border-radius: 20px!important;
    display: block!important;
   
}

.logo-colored { display: none; }
.logo-white { display: block; }

.navbar-scrolled .logo-colored { display: block; }
.navbar-scrolled .logo-white { display: none; }

.e-store-nav .container-fluid {
  display: flex;
  align-items: center;

  padding-left: 12px;
  padding-right: 12px;
}
.navbar-brand{
  max-width: 28% !important;
}
.navbar-brand {
  flex-shrink: 1;
  max-width: 70%;
}

.navbar-toggler {
  flex-shrink: 0;
}


.navbar-logo {
  height: 50px;
  width: auto;
  object-fit: contain;
}

.custom-modal {
  border-radius: 20px;
  overflow: hidden;
}

.left-panel {
  padding: 40px 30px;
  color: #fff;
   background:  
            url("{% static '/website-img/model-pop-bg.webp' %}");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

            background-size: cover;
}

.left-panel h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
}

.left-panel .subtext {
  margin-top: 15px;
  font-size: 14px;
  opacity: 0.9;
}

.features {
  margin-top: 20px;
  padding-left: 20px;
}

.features li {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: bold;
}

.contact {
  margin-top: 25px;
  font-size: 13px;
}

.form-panel {
  background: #fff;
}
.form-panel input{
  background-color: #f5f5f5;
  border: none;
  outline: none;
  box-shadow: none;
  padding-left: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.form-panel input:focus{
   border: none;
  outline: none;
  box-shadow: none;
  background-color: #f5f5f5;
}
.form-panel textarea{
  background-color: #f5f5f5;
  border: none;
  outline: none;
  box-shadow: none;
  padding-left: 10px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.form-panel textarea:focus{
   border: none;
  outline: none;
  box-shadow: none;
  background-color: #f5f5f5;
}
.form-panel::placeholder{
  font-size: 10px;

}


.form-title {
  font-size: 24px;
  font-weight: 700;
  color: #5a2288;
}


.hero p{
  font-size: 25px !important;
}
.hero-team p{
   font-size: 25px !important;
}
.custom-video-bg{
   background:  
            url("{% static 'Offsites-Banner-Background (1).webp' %}");
background-size: cover;
background-position: center;
background-repeat: no-repeat;

            background-size: cover;
}

@media screen and (max-width:769px) {
  .custom-video-bg{
    padding: 1rem !important;
  }
}
.nimber{
font-size: 35px !important;
font-weight: bold;
color: #fff!important;
}
.emp{
font-size: 14px;
color: #fff!important;
}