body {
   font-family: 'Poppins';
   background-color: #FFFFFF;
 }

 .header_logo {
   height: 50px;
   width: 175px;
 }

 .arrow {
   position: relative;
   width: 80px;
   border-top: 1px dashed #006C82;
   margin: 0px 7px 50px 11px;

 }


 .arrow::after {
   content: "";
   position: absolute;
   right: -6px;
   top: -5px;
   border: 4px solid transparent;
   border-left-color: #006C82;
 }

 .arrow-list {
   height: 25px;
   margin: 0;
   margin-right: 10px;
   padding: 0;
 }

 p {
   font-family: 'DM Sans' !important;
   font-size: large;
 }

 h1 {
   font-weight: bold !important;
   font-size: 2rem !important;
   margin-bottom: 20px;
   line-height: 1.2 !important;
 }

 h3 {
   font-size: 1.875rem !important;
   font-weight: bold !important;
   margin-bottom: 20px !important;
 }

 h2 {
   font-family: 'DM Sans' !important;
   font-weight: bolder !important;
   font-size: 18px !important;
   letter-spacing: 5px !important;
   text-transform: uppercase;
   color: #006C82;
 }

 h5 {
   font-family: 'DM Sans' !important;
 }


 #faqs {
   font-family: 'DM Sans' !important;
   font-size: large;
 }

 .accordion-button {
   font-size: large;
 }

 .navbar .dropdown-toggle::after {
   display: none;
 }

 .dropdown-arrow {
   font-size: 1.1rem;
   /* adjust size */
   margin-left: 0.3rem;
   /* space from text */
   vertical-align: middle;
 }

 .nav-item {
   margin-left: 10px;
   ;
   font-family: 'Poppins';
   font-size: 17px;
   font-weight: bold;
 }

 /* Add your own arrow (example: FontAwesome or Unicode) */
 .nav-link {
   color: #006C82 !important;
   text-wrap: nowrap !important;
   font-family: 'Poppins' !important;
   font-size: 17px !important;
   font-weight: 600 !important;
 }

 .navbar-nav .nav-link.active {
   color: #FE6B00 !important;
 }

 .navbar-nav .nav-link:hover {
   color: #FE6B00 !important;
 }

 .dropdown-menu .dropdown-item.active {
   background-color: #FE6B00 !important;
   color: #fff !important;
 }

 option {
   color: #4d4d4d;
 }

 /* 
 section h2 {
   font-size: 1.875rem;
 } */

 @media (min-width: 768px) {
   /* section h2 {
     font-size: 2.25rem;
     line-height: 2.5rem;
   } */
 }

 header {
   z-index: 111111111111 !important;
 }

 @media (max-width: 991.98px) {
   .dropdown-menu {
     max-height: 60vh;
     overflow-y: auto;
   }
 }

 .dropdown-item:focus,
 .dropdown-item:hover {
   background-color: transparent;
 }

 .list-unstyled {
   margin-top: 15px !important;
 }

 .list-unstyled li {
   display: flex;
   align-items: center !important;
   line-height: 1.7rem;

 }


 .styled li {
   line-height: 1.5;
 }

 .unstyled li {
   line-height: 35px;
 }

 .ul_background {
   background: linear-gradient(to bottom right, #fff4ee, #eee5e1, #e9f1f1, #ecffff, #d7edee);
   border-right: 1px solid #e0e0e0;
 }

 /* ====================================================================================================================
  HOME PAGE CSS -- START
====================================================================================================================*/

 .item-content {
   display: flex !important;
   flex-direction: column !important;
   font-weight: 700 !important;
   text-align: left !important;
   justify-content: center !important;
 }

 #services .card {
   border: 1px solid #e6e6e6;
   border-radius: 10px !important;
   position: relative;
   height: 100%;
   padding: 2rem 1.5rem;
 }

 .card_img {
   position: absolute;
   background: white;
   padding: 0.7rem;
   border-radius: 10px !important;
   border: 1px solid #e6e6e6;
   top: 0;
   left: 75px;
 }


 .card-body a {
   font-family: 'DM Sans';
   font-size: medium;
   align-items: center !important;
   color: #006C82;
   font-weight: bold;
 }

 .industries_card {
   align-items: center;
   text-align: center;
   justify-content: center;
   border-radius: 10px !important;
   border: 1px solid #e6e6e6;
   padding: 40px 0;

 }

 .why-chose-card {
   background-color: #ffffff;
   border-radius: 10px;
   align-items: center;
   text-align: center;
   justify-content: center;
   flex-direction: column;
   display: flex;
   padding: 8% 8% 8% 8%;
   box-shadow: 3px 3px 10px 0px rgba(69, 69, 69, 0.3);
   height: 90%;
   width: 90%;

 }

 /* ====================================================================================================================
  HOME PAGE CSS -- END
====================================================================================================================*/

 /* ====================================================================================================================
  ABOUT-US PAGE CSS -- START
====================================================================================================================*/

 @media (min-width: 768px) {

   h1 {
     font-size: 3rem !important;
     line-height: 3.5rem !important;
     margin-bottom: 10px !important;
   }

   h3 {
     font-size: 2.25rem !important;
     line-height: 2.5rem !important;
   }
 }

 .award-card {
   background: #fff;
   border: 1px solid #dee2e6;
   border-radius: 0.75rem;
   transition: 0.3s;
 }

 .award-card:hover {
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
   transform: translateY(-4px);
 }

 .award-image {
   width: 180px;
   height: 140px;
   margin: 0;
   padding: 0;
   margin-left: auto;
   margin-right: auto;
 }

 .award-image img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
 }

 .team-card {
   background: #fff;
   border: 1px solid #dee2e6;
   border-radius: .75rem;
   transition: .3s
 }

 .team-card:hover {
   box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
   transform: translateY(-4px)
 }

 .team-img {
   width: 250px;
   height: 250px;
   object-fit: cover;
   border-radius: 25%;
   margin-bottom: 1rem;
   margin-left: auto;
   margin-right: auto;
 }

 .dropdown-menu {
   z-index: -20 !important;
 }


 .custom-radius {
   border-top-left-radius: 10px;
   /* Pair 1 */
   border-bottom-right-radius: 10px;
   /* Pair 1 */

   border-top-right-radius: 80px;
   /* Pair 2 */
   border-bottom-left-radius: 80px;
   /* Pair 2 */
 }

 .vision-card {
   transition: all 0.3s ease-in-out;
 }

 .vision-card p {
   display: none
 }

 .vision-card:hover {
   filter: brightness(1.05);

 }

 .vision-card:hover h3 {
   display: none
 }

 .vision-card:hover p {
   display: block
 }

 /* ====================================================================================================================
  ABOUT-US PAGE CSS -- END
====================================================================================================================*/







 /* Rectangles (dividers) - kept for consistent styling with original design */
 .rectangle-10 {
   background: var(--accent, #00b4d8);
   width: 2.5rem;
   /* 40px */
   height: 0.25rem;
   /* 4px */
   border-radius: 0.125rem;
   /* Small border-radius */
   /* margin-top: 13px !important;*/
 }

 .optimize_img {
   height: 50px;
   width: 100%;
 }

 .optimize_award_img {
   height: 125px !important;
 }

 .carousel-item {
   height: 52vh;
   min-height: 500px;
 }

 .backgroundgray {
   background-color: #F0F3FA !important;
   background-blend-mode: multiply;
   /* or overlay */
 }

 @media (max-width: 640px) {

   /* small screens and low */
   .smStatistics {
     margin-top: 0 !important;
     margin-bottom: 0 !important;
   }
 }


 @media (max-width: 767.98px) {
   .carousel-item {
     height: auto;
     min-height: 350px;
     padding: 2rem 0;
   }
 }

 .carousel-item img.bg-img {
   position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: -1;
 }

 /* ✅ Fix: Proper caption */
 .carousel-caption {
   position: absolute;
   bottom: 15%;
   /* place it above the bottom */
   left: 10%;
   right: 10%;
   text-align: left;
   display: block;
   /* reset flex */
 }


 .btn-hover-blue {
   background: #fff;
   color: #FE6B00;
   height: 60px;
   border: 1px solid #FE6B00;
 }

 /* Hover styles */
 .btn-hover-blue:hover {
   background: #FFFFFF;
   color: #45B0E6;
   border-color: #45B0E6;
 }

 .btn-hover-dark:hover {
   background: #fff;
   color: #fff;
   border-color: #fff;
 }

 /* Buttons */
 .btn-custom-orange {
   background-color: #FE6B00;
   border-color: #FE6B00;
   color: #fff;
   padding: 0.75rem 2rem;
   border-radius: 0.375rem;
   font-weight: 600;
   max-width: 350px;
   display: flex;
   /* enable flex */
   justify-content: center;
   /* center horizontally */
   align-items: center;
   /* center vertically */
   margin: 0 auto;
   /* center button itself */

 }

 #carouselExampleCaptions .btn-custom-orange {
   margin: 0 0;
 }

 .btn-custom-orange:hover {
   background-color: #45B0E6;
   border-color: #45B0E6;
   color: #ffffff;
 }

 /* Hero Image */
 .hero-image-container {
   position: relative;
   display: flex;
   justify-content: center;
   /* default center for mobile */
 }

 @media (min-width: 768px) {
   .hero-image-container {
     justify-content: flex-end;
     /* right aligned for desktop */
   }
 }

 .hero-main-image {
   max-width: 100%;
   height: auto;
   margin-top: -60px;
 }

 /* Animated circles */
 .animated-circle {
   position: absolute;
   border-radius: 50%;
   opacity: 0.6;
   animation: pulse 2s infinite;
 }

 .animated-circle.orange {
   background: #FE6B00;
 }

 .animated-circle.blue {
   background: #0dcaf0;
 }

 .animated-circle.green {
   background: #198754;
 }

 @keyframes pulse {

   0%,
   100% {
     transform: scale(1);
     opacity: 0.6;
   }

   50% {
     transform: scale(1.1);
     opacity: 0.8;
   }
 }

 /* Responsive text scaling */
 .hero-title {
   font-size: 2rem;
 }

 .hero-subtitle {
   font-size: 1rem;
 }

 @media (min-width: 768px) {
   .hero-title {
     font-size: 3rem;
   }

   .hero-subtitle {
     font-size: 1.125rem;
   }
 }

 @media (min-width: 992px) {
   .hero-title {
     font-size: 3.5rem;
   }

   .hero-subtitle {
     font-size: 1.25rem;
   }
 }

 /* Extra mobile adjustments */
 @media (max-width: 575.98px) {
   .carousel-caption {
     bottom: 5%;
     left: 50%;
     right: auto;
     transform: translateX(-50%);
     text-align: center;
     width: 90%;
   }

   .hero-title {
     font-size: 1.6rem;
     line-height: 1.3;
   }

   .hero-subtitle {
     font-size: 0.9rem;
   }

   .btn-custom-orange {
     padding: 0.5rem 1.25rem;
     font-size: 0.9rem;
   }
 }

 p {
   color: #424242;
 }

 .text-black {
   color: #333333 !important;

 }

 .text-orange {
   color: #FE6B00 !important;
 }

 .text-lightblue {
   font-family: 'DM Serif';
   font-size: 96px;
   color: #00A2C2 !important;
   bottom: 0;
   right: 10px;
   z-index: 10;
   position: absolute;
   opacity: 0.2;
 }

 .text-cyan {
   color: #006C82;
 }

 .text-darkgray {
   color: #212121;
   font-size: 16px;
   line-height: 20px;
 }

 .bg-cyan {
   background-color: #006C82 !important;
 }

 .bg-orange {
   background-color: #FE6B00 !important;
 }

 .collapse {
   visibility: initial !important;
 }

 .ddlservice {
   width: auto !important;
   padding: 50px !important;
   margin: 10px -270px !important;
 }

 .carousel-indicators [data-bs-target] {
   background-color: aqua;
   padding: 5px;
   border-radius: 50%;
   height: 10px;
   width: 10px;
   opacity: 0.5;
 }

 .carousel-indicators .active {
   opacity: 1;
   background-color: rgb(255, 94, 0);
 }

 /* ✅ Make carousel background image responsive with max height */
 .carousel-item img {
   width: 100%;
   height: auto;
   max-height: 500px;
   /* adjust this for desktop */
   object-fit: cover;
 }

 @media (min-width: 767.98px) {
   .modal_border_right {
     border-right: 1px solid #ffad5c;
     border-radius: 0.0rem;
     /* optional rounded on desktops */
   }
 }

 @media (max-width: 767.98px) {
   .carousel-item img {
     max-height: 300px;
     /* smaller height on mobile */
   }

   .modal_border_right {
     border-right: none !important;
   }

   p {
     font-size: medium;
   }
 }

 footer p {
   color: #ffffff;
 }


 @media (max-width: 992px) {
   .modal-fullscreen-lg-down {
     padding: 30px !important;
   }


 }

 /* For large devices and up */
 @media (min-width: 992px) {
   .home_dropdown_menu {
     left: 50% !important;
     transform: translateX(-50%) !important;
     max-width: 95vw;
     /* safety: don’t overflow screen */
     min-width: 60vw;
     top: 70px !important;

   }
 }


 /* ----------------------------------------------------------------------------------------------------------------
    FOR SERVICE WORK FLOW -- START
 ----------------------------------------------------------------------------------------------------------------*/

 /* Arrows */

 /* Horizontal Arrow */
 .arrow-horizontal {
   font-size: 1.3rem;
   font-weight: bold;
   color: #006C82;

   align-self: center;
 }

 /* Vertical Arrow */
 .arrow-vertical {
   position: absolute;
   left: 50%;
   /* center align under the box */
   bottom: -40px;
   /* push it outside */
   transform: translateX(-50%);
   font-size: 2rem;
   color: #006C82;
   /* cyan color, change as needed */
 }




 .l-arrow {
   position: absolute;
   left: 50%;
   bottom: -160px;
   /* how far below the box the L starts */
   width: 55%;
   /* horizontal length */
   height: 160px;
   /* vertical length */
 }

 /* vertical dotted line */
 .l-arrow::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 2px;
   height: 100%;
   border-left: 2px dashed #006C82;
 }

 /* horizontal dashed line */
 .l-arrow::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px;
   border-bottom: 2px dashed #006C82;
 }

 /* arrowhead */
 .l-arrow .arrowhead {
   position: absolute;
   bottom: -5px;
   /* aligns with horizontal line */
   right: -10px;
   /* at the end of line */
   width: 0;
   height: 0;
   border-left: 15px solid #006C82;
   border-top: 6px solid transparent;
   border-bottom: 6px solid transparent;
 }


 /* Step Circles */
 .step-circle_automation {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   background: #fff;
   margin: auto;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }

 .step-circle_automation img {
   width: 50px;
   height: 50px;
   object-fit: contain;
 }

 .step-text {
   font-size: 0.9rem;
   font-weight: 600;
   margin-top: 0.5rem;
 }


 /* ----------------------------------------------------------------------------------------------------------------
    FOR SERVICE WORK FLOW -- END
 ----------------------------------------------------------------------------------------------------------------*/
 /* ----------------------------------------------------------------------------------------------------------------
    FOR SERVICE PAGE, ABOUT, CONTACT -- START
 ----------------------------------------------------------------------------------------------------------------*/

 .step-circle {
   width: 90px;
   height: 90px;
   border-radius: 50%;
   background: #f8f9fa;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
   margin: 15px 0px;
   ;
 }

 .hero-section {
   background: url('/assets/images/about_banner.jpg');
   /* Placeholder for header background */
   min-height: 350px;
   /* Minimum height for the hero section */
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   color: white;
   position: relative;
   z-index: 1;
 }

 .hero-section::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
   /* Overlay for readability */
   z-index: -1;
 }

 .right-image-panel {
   text-align: -webkit-right;
 }

 .hero-section p {
   color: #ffffff;
 }

 li {
   font-family: 'DM Sans';
   font-size: medium;
   line-height: 34px !important;
 }

 .timeline {
   position: relative;
   padding: 50px 0;
 }

 .timeline::after {
   content: '';
   position: absolute;
   top: 55px;
   left: 8%;
   right: 8%;
   border-top: 2px dashed #999;
   z-index: 1;
 }

 .timeline-step {
   text-align: center;
   position: relative;
   z-index: 2;
 }

 .step-number {
   display: inline-block;
   background: #027c8d;
   color: #fff;
   font-weight: bold;
   font-size: 18px;
   width: 60px;
   height: 60px;
   line-height: 60px;
   border-radius: 8px;
   margin-bottom: 15px;
   position: relative;
 }

 .circle-dot {
   width: 12px;
   height: 12px;
   background: #ff6600;
   border-radius: 50%;
   position: absolute;
   left: 50%;
   bottom: -25px;
   transform: translateX(-50%);
 }

 .timeline-content {
   margin-top: 15px;
 }

 .timeline-content h5 {
   color: #027c8d;
   font-weight: bold;
   font-size: 16px;
 }

 .timeline-content ul {
   list-style: none;
   padding: 0;
   margin: 0;
   text-align: left;
 }

 .timeline-content ul li {
   font-size: 14px;
   margin-bottom: 6px;
 }

 section {
   padding: 70px 20px;
 }

 .about_statistics {
   height: 60px;
   width: 60px;
 }

 @media (max-width: 766px) {
   .about_images {
     width: 100% !important;
     margin-top: 15px;
     margin-left: 0px !important;
   }

   li {
     line-height: 30px !important;
   }
 }

 /*=======================================================================
  ## FAQ's -- START
=======================================================================*/
 .faq-section .line {
   width: 30px;
   height: 2px;
   background: #0aa;
   margin-right: 10px;
 }

 .faq .accordion-item {
   border: 0;
   border-bottom: 1px solid #00A2C2;
   padding: 0px 20px;
   background: transparent;
 }

 .faq .accordion-button {
   background: none;
   border: 0;
   padding: 1rem 0;
   font-weight: 600;
   color: #111;
   box-shadow: none;
   font-size: 18px;

 }

 #faqs h4 {
   font-family: 'Poppins' !important;
   font-size: 36px;
   line-height: 40px;
 }

 .faq .accordion-button::after {
   content: "+";
   color: #00A2C2;
   font-weight: 700;
   font-size: x-large;
   margin-left: auto;
   background: none;
 }

 .faq .accordion-button:not(.collapsed)::after {
   content: "–";
 }

 .faq .accordion-body {
   padding: 0 0 1rem;
   color: #555;
   font-size: large;
 }

 /*=======================================================================
  ## FAQ's -- END
=======================================================================*/
 /* ----------------------------------------------------------------------------------------------------------------
    FOR SERVICE PAGE, ABOUT, CONTACT -- END
 ----------------------------------------------------------------------------------------------------------------*/


 /* ----------------------------------------------------------------------------------------------------------------
    FOR MODEL -- START
 ----------------------------------------------------------------------------------------------------------------*/
 .modal-content {
   border-radius: 1rem;
   /* Rounded corners for the modal */
   overflow: hidden;
   /* Ensures content respects rounded corners */
   box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
   /* Subtle shadow */
 }

 .modal-body {
   padding: 0;
   /* Remove default padding to control inner layout */
 }

 .left-panel {
   background-image: linear-gradient(to right, #e0f2f7, #c2e6ed);
   /* Light gradient background */
   padding: 2.5rem;
   border-top-left-radius: 1rem;
   border-bottom-left-radius: 1rem;
   color: #333;
 }

 .left-panel h3 {
   font-weight: bold;
   font-size: x-large !important;
   color: #0e7490;
   /* Blue for heading */
   margin-bottom: 1rem;
 }

 .left-panel p {
   font-size: 0.95rem;
   line-height: 1.5;
   margin-bottom: 1.5rem;
 }

 .left-panel ul {
   list-style: none;
   /* Remove default bullet points */
   padding: 0;
   margin-bottom: 2rem;
 }

 .left-panel ul li {
   margin-bottom: 0.75rem;
   font-size: 0.9rem;
   display: flex;
   align-items: center;
 }

 .left-panel ul li::before {
   content: "\2192";
   /* Right arrow character */
   color: #ff8c00;
   /* Orange color for arrows */
   font-weight: bold;
   display: inline-block;
   width: 1.2em;
   margin-left: -1.2em;
   margin-right: 0.5em;
 }


 .career-box img {
   /* padding: 10px; */
   height: 60px;

 }

 .career-box a {
   color: #0e7490;
   text-decoration: none;
   font-weight: bold;
 }

 .career-box a:hover {
   text-decoration: underline;
 }

 .right-panel {
   padding: 2.5rem;
 }

 .form-control {
   border-radius: 0.5rem;
   padding: 0.75rem 1rem;
   border: 1px solid #ced4da;
 }

 .form-control:focus {
   border-color: #80bdff;
   box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
 }

 .modal-body {
   font-size: large;
 }

 .panelHeight {
   user-select: none;
   /* prevent selecting text */
   -webkit-user-select: none;
   /* Chrome, Safari */
   -moz-user-select: none;
   /* Firefox */
   -ms-user-select: none;
   /* IE/Edge */
 }

 /* ================================  

#chooseFile::-webkit-file-upload-button

-- change color for choosefile button color 

===================================*/

 #chooseFile::-webkit-file-upload-button {
   background-color: #0e7490;
   border-radius: 10px;
   color: white;

 }

 #chooseFileCareer::-webkit-file-upload-button {
   background-color: #0e7490;
   border-radius: 10px;
   color: white;

 }

 /* ----------------------------------------------------------------------------------------------------------------
    FOR MODEL -- END
 ----------------------------------------------------------------------------------------------------------------*/
 /* ----------------------------------------------------------------------------------------------------------------
    FOR CAREER DETAILS -- START
 ----------------------------------------------------------------------------------------------------------------*/
 ul.styled {
   list-style: none;
   padding: 0;
 }

 ul.styled li {
   display: flex;
   align-items: center;
 }

 ul.styled li::before {
   content: "●";
   margin-right: .5rem;
   font-size: larger;
   line-height: 2rem;
 }

 .img_height_overview {
   height: 30%;
 }

 .height-adjust {
   max-height: 125px;
   padding: 0;
 }


 .icon-wrapper {
   transition: background-color 0.3s ease;
 }

 .icon-wrapper:hover {
   background-color: #006C82 !important;
   color: #ffffff !important;
   /* LinkedIn blue, or any color */
   cursor: pointer;
 }

 /* ----------------------------------------------------------------------------------------------------------------
    FOR CAREER DETAILS -- END
 ----------------------------------------------------------------------------------------------------------------*/
 /* ----------------------------------------------------------------------------------------------------------------
    FOR CASE STUDIES LISTING -- START
 ----------------------------------------------------------------------------------------------------------------*/
 .card-item {
   height: 100%;
   margin-top: 10px !important;
 }

 #pagination .page-item.active .page-link {
   background-color: transparent;
   /* active page background */
   border-color: #FE6B00;
   color: #FE6B00;
   /* active page text */
 }

 #pagination .page-link {
   color: #000000;
   /* normal text color */
   background: none;
   border-radius: 6px;
   /* rounded corners */
   margin: 0;
   padding: auto;
   font-size: larger;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 #pagination .page-link:hover {
   background-color: #FE6B00;
   /* hover effect */
   color: #FFFFFF !important;
 }

 .prev .next {
   background-color: #6fb7c4 !important;
   color: #FFFFFF !important;
   font-size: x-large !important;
   padding-top: 4px;

 }

 .next {
   background-color: #FFFFFF !important;
   color: #00B4D8 !important;
   font-size: x-large !important;
   padding-top: 4px;
 }

 /* Default (small devices) */
 .responsive-img {
   width: 100%;
 }

 /* Large devices and up (≥992px) */
 @media (min-width: 992px) {
   .responsive-img {
     width: 75%;
     height: 50%;
   }
 }

 .icon-box {
   width: 100%;
   /* responsive */
   padding: 20px 0px;
 }

 .icon-box img {
   object-fit: contain;
   /* keeps proportions */
 }

 .result_cards p {
   color: #006C82;
   padding-top: 5px;
   font-size: 1.25rem;
   line-height: 1.75rem;

 }

 .gradient-border {
   position: relative;
   border-radius: 8px;
   /* rounded corners */
   padding: 0;
   /* space for the border */
   background: linear-gradient(90deg, #00B4D8, #28f0bb, #FE6B00);
   /* border gradient */
 }

 /*
 .gradient-border>* {
   background: #fff;

   border-radius: 6px;

   padding: 1rem;
 }*/


 .gradient-border>div {
   background: #fff;
   border-radius: 7px;
   /* 1px less than parent */
   padding: 1rem;
   margin: 1px;
   /* creates consistent 1px border */
   height: 98%;
 }



 .bgPurple {
   position: relative;
   background: linear-gradient(90deg, #5C6692, #394886);
   /* border gradient */
 }

 .bgPurple h1 {
   font-size: xxx-large;
   font-weight: bold;
 }

 .bgPurple p {
   font-size: large;
   color: white;
 }

 .border-thick {
   --bs-border-width: 5px;

   border-color: #00B4D8 !important;

 }

 .page-item {
   border-radius: 10%;
 }

 @media (max-width: 767.98px) {
   #pnsolution .step-circle {
     width: 55px;
     height: 55px;
   }
 }

 /* ----------------------------------------------------------------------------------------------------------------
    FOR CASE STUDIES LISTING -- END
 ----------------------------------------------------------------------------------------------------------------*/


 /* ----------------------------------------------------------------------------------------------------------------
    FOR Development Services -- START
 ----------------------------------------------------------------------------------------------------------------*/

 /* Custom color palette */
 :root {
   --primary: #0e7490;
   --secondary: #164e63;
   --bg-light: #f8fafc;
   --text-dark: #1f2937;
   --text-light: #4b5563;
 }

 /* Custom connecting line styles for desktop */
 .process-line {
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
   /* z-index: 10; */
 }

 .process-line-path {
   position: relative;
   height: 2px;
   background-image: linear-gradient(to right, var(--primary) 50%, transparent 50%);
   background-size: 15px 1px;
 }

 .step-container {
   position: relative;
   padding: 0;
 }

 .step-card li {
   line-height: 24px !important;
 }

 .step-card {
   /* background-color: white; */

   /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); */
   transition: all 0.3s ease-in-out;
   margin: 5px 46px;
   /* padding: 1rem 2rem; */
   /* border-left: 4px solid var(--accent); */
   /* Consistent accent border */
 }

 .step-number-circle {
   background-color: var(--primary);
   color: white;
   width: 80px;
   height: 80px;
   border-radius: 20px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
   transition: transform 0.3s ease-in-out;
   /* border: 4px solid var(--bg-light); */
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .connector-line-v {
   position: absolute;
   left: 46%;
   width: 2px;
   background-color: var(--primary);
   z-index: 10;
 }

 .top-step .connector-line-v {
   height: 120px;
   bottom: 80px;
   margin-bottom: 22px;
   margin-left: 2px;
 }

 .bottom-step .connector-line-v {
   height: 120px;
   top: 80px;
   margin-top: 22px;
   margin-left: 2px;
 }

 .step-box {
   width: 70px;
   height: 70px;
   margin-top: -35px;
   background-color: var(--primary);
   /* teal */
   color: white;
   font-size: 25px;
   font-weight: 500;
   border-radius: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   margin-bottom: 30px;

   /* z-index: 11; */
 }

 .step-box_bottom {
   width: 70px;
   height: 70px;
   /* margin-top: 35px; */
   background-color: var(--primary);
   /* teal */
   color: white;
   font-size: 25px;
   font-weight: 500;
   border-radius: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   margin-top: 30px;
   /* z-index: 1111; */
 }

 .step-box::before {
   content: "";
   position: absolute;
   top: -10px;
   left: 50%;
   transform: translateX(-50%);
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-bottom: 10px solid #007C89;
   /* teal arrow */
 }

 .step-box_bottom::after {
   content: "";
   position: absolute;
   top: 70px;
   left: 50%;
   transform: translateX(-50%);
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   border-top: 10px solid #007C89;
   /* teal arrow */
 }

 .step-dot {
   width: 18px;
   height: 18px;
   background-color: orange;
   border-radius: 50%;
   margin-bottom: 50px;
 }

 .step-dot_bottom {
   width: 18px;
   height: 18px;
   background-color: orange;
   border-radius: 50%;
   margin-top: 15px;

 }

 /* ----------------------------------------------------------------------------------------------------------------
    FOR Development Services -- END
 ----------------------------------------------------------------------------------------------------------------*/
 /* ----------------------------------------------------------------------------------------------------------------
    FOR Development Services -- START
 ----------------------------------------------------------------------------------------------------------------*/
 .service-block {
   position: relative;
   background-repeat: no-repeat;
   background-position: right bottom;
   border-radius: 10px;
   background-size: contain;
   background-color: #ffffff;
   height: 100%;
   padding: 30px 40px;
 }

 .service-block ul li {
   line-height: 1.7rem;
 }

 /* Variants for different masks */
 .service-block.mask1 {
   background-image: url('/staging.datasostech.com/assets/images/service_mask1.jpg');
 }

 .service-block.mask2 {
   background-image: url('/staging.datasostech.com/assets/images/service_mask2.jpg');
 }

 /* Image block */
 .service-image {
   background: url('/staging.datasostech.com/assets/images/WorkflowAutomation_card.jpg') center/cover no-repeat;
 }

 h5 {
   font-weight: bold !important;
   font-size: 1.25rem !important;
   color: #006C82;
   margin-bottom: 10px;
   background: transparent;
 }

 .case-card {
   position: relative;
   border-radius: .75rem;
   overflow: hidden;
   box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
   transition: transform .3s;
   cursor: pointer;
 }

 .case-card:hover {
   transform: scale(1.05);
 }

 .case-card img {
   width: 100%;
   height: 370px;
   object-fit: cover;
 }

 .case-footer {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: #006C82;
   /* cyan-800 */
   color: #fff;
 }

 .case-footer i {
   transition: transform .3s;
   font-size: 1.25rem;
 }

 .case-card:hover .case-footer i {
   transform: translateX(5px);
 }

 .case-hover {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   background: #006C82;
   /* cyan-900 */
   color: #e5e7eb;
   transform: translateY(100%);
   transition: transform .5s;
 }

 .case-card:hover .case-hover {
   transform: translateY(0);
 }

 /* ----------------------------------------------------------------------------------------------------------------
    FOR Development Services -- END
 ----------------------------------------------------------------------------------------------------------------*/