@media screen and (max-width: 390px) and (max-height: 844px) {
     .h-100 {
         height: 340px !important;
     }

     .new-padding {
         padding: 0px;
     }

     .fw-normals {
         font-weight: 400;
         width: 400px !important;
         font-size: 24px;
     }

     .paragraph-text {
         font-weight: 600;
         width: 310px !important;
     }

     .responsive-sales-img {
         margin-left: 12px !important;
     }

     .network-image {
         display: none;
     }

     .dual-interface-description {
         margin-top: 10px;
         font-size: 17px;
         color: #000;
         font-weight: 600;
         margin-bottom: 8px;
     }

     .yellow-path {
         display: none;
     }

     .map-pin {
         position: absolute;
         width: 72px;
         height: auto;
     }

     .pin-1 {
         top: 32%;
         left: 22%;
     }

     .pin-2 {
         top: 30.8%;
         left: 12%;
     }

     .pin-3 {
         top: 31%;
         left: 48%;
     }

     .pin-4 {
         top: 30.8%;
         left: 65%;
     }

     .dual-interface-description {
         margin-top: 6px;
         font-size: 17px;
         color: #000;
         font-weight: 400;
         margin-bottom: 6px;
     }
 }

 .mt-40 {
     margin-top: 2.5rem !important;
 }

 .fw-normals {
     font-weight: 400;
     width: 500px;

 }

 .small-color {
     color: #555;
 }

 .paragraph-text {
     font-weight: 600;
     width: 500px;
 }

 .section-heading-ui {
     text-align: center;
     margin-top: 10px;
     margin-bottom: 40px;
     font-size: 1.25rem;
 }

 .dual-interface-box {
     background-color: #f4a933;
     border-radius: 60px;
     padding: 1px 3px;
     text-align: center;
     margin-bottom: 1rem;
 }


 .dual-interface-title {
     color: #000;
     font-weight: 600;
     margin: 0;
 }

 .dual-interface-description {
     margin-top: 6px;
     font-size: 19px;
     color: #000;
     font-weight: 400;
     margin-bottom: 6px;
 }


 .ui-card {
     border: 1px solid #6570704d;
     border-radius: 30px;
     padding: 20px;
     text-align: center;
     /* height: 100%; */
 }

 .ui-cards {
     border: 1px solid #6570704d;
     border-radius: 30px;
     padding: 20px;
     text-align: center;
     height: 100%;
 }

 .ui-title {
     font-weight: 600;
     color: #000 !important;
     margin-bottom: 10px;
 }

 .ui-description {
     font-weight: 300;
     color: #555;
     font-size: 18px;
     margin-bottom: 20px;
 }

 .ui-image,
 .ui-images {
     height: 500px;
     /* Set this to the height you want (match second image) */
     width: auto;
     max-width: 100%;
     object-fit: contain;
     /* Keeps image proportionate inside the fixed height */
 }


 .section-title {
     font-weight: bold;
     color: #000 !important;
     margin-bottom: 30px;
 }

 .feature-card {
     border: 1px solid #6570704d !important;
     border-radius: 20px;
     padding: 25px 54px;
     text-align: CENTER;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     ALIGN-ITEMS: center;
 }

 .feature-icon {
     width: 40px;
     margin-bottom: 15px;
 }

 .feature-title {
     font-weight: 600;
     color: #000 !important;
     margin-bottom: 10px;
 }

 .feature-desc {
     font-size: 0.95rem;
     color: #555;
     flex-grow: 1;
 }

 .learn-more {
     background-color: #000 !important;
     color: #fff !important;
     font-weight: 500;
     border: none;
     border-radius: 4px;
     padding: 6px 14px;
     margin-top: 20px;
     align-self: start;
 }


 .underline {
     border-bottom: 2px solid rgb(164, 169, 206);
     width: 100%;
     margin-top: auto;
 }

 .network-image {
     width: 100%;
     height: auto;
     max-width: 500px;
 }

 .section-title {
     font-size: 1.8rem;
     font-weight: 600;
 }

 .section-subtext {
     color: #444;
 }

 .value-title {
     color: #000 !important;
     font-weight: 600;
     margin-bottom: 1rem;
     text-align: left;
 }

 .value-icon {
     font-size: 2rem;
     color: #000 !important;
     margin-bottom: 0.5rem;
     text-align: center;
 }

 .value-box h6 {
     font-weight: 600;
 }

 .contact-banner {
     background: linear-gradient(to right, #1a1717 0%, #684949 50%, #321f1f 77%);
     color: white;
     padding: 2rem 1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
 }

 .contact-banner h4 {
     margin: 0;
     font-weight: bold;
     font-size: 1.8rem;
 }

 .contact-banner .btn-text {
     font-weight: 500;
     color: white;
 }

 .value-icon img {
     height: 50px;
     margin-bottom: 0.5rem;
 }

 .value-box {
     width: 100%;
     max-width: 250px;
     /* or 24%, 25%, etc. */
     margin: 0 auto;
     /* centers the box horizontally */
 }

 .width-text {
     width: 500px;
 }

 .row-align {
     display: flex;
     justify-content: space-around;
 }

 .modal-title {
     color: #fff !important;
     font-weight: 500;
 }

 .text-primarys {
     color: #fff !important;
     font-weight: 700;
 }

 .img-fluid {
     width: 82%;
     height: auto;
     margin-bottom: 30px;
 }

 @media (max-width: 768px) {
     .responsive-sales-img {
         max-width: 100%;
         height: auto;
         margin-bottom: 30px;
         margin-left: 79px
     }
 }

 .modal-backdrop {
     background-color: transparent !important;
 }

 /* Prevent transitions during initial load */
 .preload * {
     transition: none !important;
 }

 .ui-map-wrapper {
     position: relative;
     width: 100%;
     max-width: 1300px;
     margin: 0 auto;
     padding: 100px 0;
     overflow: visible;
 }

 /* 🗺️ Background Map */
 .map-path {
     width: 100%;
     height: auto;
     object-fit: contain;
     position: relative;
     top: -2px;
     left: 0;
     z-index: 1;
 }

 /* 🟨 Yellow Path - below cards but above map */
 .yellow-path {
     width: 80%;
     height: auto;
     object-fit: contain;
     position: absolute;
     /* top: 21%; */
     left: 25%;
     z-index: 2;
 }

 /* 🧾 UI Cards already have z-index: 3 through inline style */
 .map-pins {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 2;
     /* on top of path, behind cards */
     pointer-events: none;
     /* prevents clicks if not needed */
 }

 .map-pin {
     position: absolute;
     width: 75px;
     height: auto;
 }

 .pin-1 {
     top: 96.5%;
     left: 27%;
 }

 .pin-2 {
     top: 100%;
     left: 56%;
 }

 .pin-3 {
     top: 90.5%;
     left: 75%;
 }

 .pin-4 {
     top: 55.5%;
     left: 93%;
 }


 .product-overview .product-details .nav .active {
     background-color: #efa940;
     color: #fff !important;
 }

 .product-overview .product-details .nav .active:hover {
     background-color: #efa940;
     color: rgb(230, 192, 137) !important;
 }

 .value-proposition-section {
     padding: 60px 0;
     background-color: #fff;
 }

 .vp-subtitle {
     color: #d69200;
     font-weight: 600;
     font-size: 18px;
 }

 .vp-heading {
     font-size: 28px;
     font-weight: 600;
     line-height: 1.4;
     margin: 20px 0;
 }

 .vp-button {
     background-color: #d69200;
     color: #fff;
     padding: 10px 25px;
     border-radius: 25px;
     font-weight: 500;
     margin-top: 20px;
     border: 1px solid #efa940;
 }

 .vp-button:hover {
     color: black;
     background-color: white;
     border: 1px solid #efa940 !important;
 }

 .vp-card {
     display: flex;
     align-items: flex-start;
     gap: 15px;
     text-align: left;
 }

 .vp-icon-left {
     width: 70px;
     height: auto;
     flex-shrink: 0;
     margin-top: 5px;
 }

 .vp-content {
     flex: 1;
 }

 .vp-percent {
     color: #d69200;
     font-size: 32px;
     font-weight: 700;
     margin: 0 0 5px 0;
 }

 .vp-title {
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 5px;
 }

 .vp-text {
     font-size: 14px;
     color: #333;
     margin: 0;
 }

 /* Laptop screens (992px - 1200px) */
 @media (min-width: 992px) and (max-width: 1200px) {
     .pin-1 {
         top: 35%;
         left: 25%;
     }

     .pin-2 {
         top: 34%;
         left: 15%;
     }

     .pin-3 {
         top: 34%;
         left: 50%;
     }

     .pin-4 {
         top: 33%;
         left: 70%;
     }
 }

 /* Larger desktop screens */
 @media (min-width: 1600px) {
     .pin-1 {
         top: 80.5%;
         left: 27%;
     }

     .pin-2 {
         top: 88.5%;
         left: 56%;
     }

     .pin-3 {
         top: 76%;
         left: 75%;
     }

     .pin-4 {
         top: 42%;
         left: 93%;
     }
 }

 /* Mobile screens (keep your existing mobile styles) */
 @media screen and (max-width: 390px) and (max-height: 844px) {
     .pin-1 {
         top: 32%;
         left: 22%;
     }

     .pin-2 {
         top: 30.8%;
         left: 12%;
     }

     .pin-3 {
         top: 31%;
         left: 48%;
     }

     .pin-4 {
         top: 30.8%;
         left: 65%;
     }
 }

 /* Specific adjustments for 1366x768 screens */
 @media (min-width: 1366px) and (max-width: 1366px) and (min-height: 768px) and (max-height: 768px) {

     .yellow-path {
         width: 75%;
         height: auto;
         object-fit: contain;
         position: absolute;
         top: 24%;
         left: 25%;
         z-index: 2;
     }

     .pin-1 {
         top: 36.5%;
         left: 26%;
     }

     .pin-2 {
         top: 37%;
         left: 52%;
     }

     .pin-3 {
         top: 36%;
         left: 72%;
     }

     .pin-4 {
         top: 29.5%;
         left: 93%;
     }

     /* Optional: Adjust pin size if needed */
     .map-pin {
         width: 72px;
     }

     /* Adjust map container if needed */
     .ui-map-wrapper {
         padding: 80px 0;
     }
 }

 nav a {
     margin-right: 0px !important;
 }

 .ui-map-section {
     display: grid;
     grid-template-areas: "overlap";
 }

 .map-path {
     grid-area: auto;
     z-index: 1;
     align-self: end;
     /* Pushes map to bottom */
 }

 .container.py-1 {
     grid-area: overlap;
     z-index: 2;
     margin-top: -8rem;
     /* Adjust overlap */
 }

 /******************* CANVAS GRADIENT *************/
 @media (min-width: 1024px) {
     .canvas-container {
         height: 30% !important;
         clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 85%) !important;
     }

     .yellow-path {
         width: 80%;
         height: auto;
         object-fit: contain;
         position: absolute;
         top: 162%;
         left: 25%;
         z-index: 2;
     }

     .pin-1 {
         top: 52rem;
         left: 27%;
     }

     .pin-2 {
         top: 53rem;
         left: 56%;
     }

     .pin-3 {
         top: 51rem;
         left: 75%;
     }

     .pin-4 {
         top: 37rem;
         left: 93%;
     }
 }

 @media (min-width: 1900px) {
     .canvas-container {
         height: 20% !important;
         clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 90%) !important;
     }

     .yellow-path {
         width: 80%;
         height: auto;
         object-fit: contain;
         position: absolute;
         top: 100%;
         left: 25%;
         z-index: 2;
     }

     .pin-1 {
         top: 45rem;
         left: 27%;
     }

     .pin-2 {
         top: 48rem;
         left: 56%;
     }

     .pin-3 {
         top: 44rem;
         left: 75%;
     }

     .pin-4 {
         top: 22rem;
         left: 93%;
     }

 }

 .canvas-container {
     position: absolute !important;
     z-index: 1 !important;
     inset: 0;
 }