/* Basic Reset & Body Styling */
 body,
 html {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Inter', sans-serif;
     background-color: #f8f9fa;
     overflow-x: hidden;
     /* Light gray background for context */
 }

 .header {
     background-color: #0a191b;
     /* padding-top: 0.5rem; */
     /* padding-bottom: 0.5rem; */
     box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
     position: relative;
     z-index: 100;
     /* Ensure header itself is above general content */
 }

 .container {
     max-width: 100%;
     margin-left: auto;
     margin-right: auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-left: 1.5rem;
     padding-right: 1.5rem;
 }

 .logo-container {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     flex-shrink: 0;
 }

 .logo-container img {
     /* height: 2.5rem; */
     width: 100px;
 }

 .navigation-desktop {
     display: flex;
     align-items: center;
     background-color: #ffffff1a;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     border-radius: 9999px;
     padding: 0.75rem 2rem;
     gap: 0.25rem;
     /* margin-right: auto; */
     /* margin-left: 2rem; */
 }

 .nav-item {
     position: relative;
 }

 .nav-link {
     color: #f0f0f0;
     padding: 0.5rem 0.75rem;
     border-radius: 0.375rem;
     font-size: 0.875rem;
     font-weight: 500;
     text-decoration: none;
     display: flex;
     align-items: center;
     transition: color 0.2s ease-in-out;
 }

 .nav-link:hover {
     color: #10B981;
 }

 .dropdown-arrow {
     margin-left: 0.25rem;
     font-size: 0.7em;
     color: #9CA3AF;
     transition: transform 0.2s ease-in-out;
 }

 .nav-item.dropdown {
     position: relative;
 }

 .dropdown-menu {
     position: absolute;
     top: 100%;
     left: -50%;
     background-color: white;
     list-style: none;
     padding: 0;
     margin: 0;
     border-radius: 24px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     overflow: hidden;
     opacity: 0;
     max-height: 0;
     transform: translateY(-10px);
     transition: all 0.3s ease;
     z-index: 10;
     width: 180px;
     border: 10px solid #047857;
     border-top: none;
     margin: 0 auto;
 }

 .nav-item.dropdown:hover .dropdown-menu {
     opacity: 1;
     max-height: 500px;
     transform: translateY(0);
 }

 .dropdown-menu li a {
     display: block;
     padding: 12px 16px;
     color: #000;
     font-weight: 600;
     text-decoration: none;
     font-size: 0.8rem;
 }

 .dropdown-menu li a:hover {
     /* background: #f0f0f0; */
     color: #047857;
 }


 .header-right-section {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .phone-contact {
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 .phone-icon {
     height: 1.5rem;
     width: 1.5rem;
     stroke: #4B5563;
 }

 .phone-number {
     color: #374151;
     font-weight: 500;
     font-size: 0.875rem;
 }

 .cta-button {
     text-decoration: none;
     background-color: #00c389;
     color: #000;
     font-size: 0.875rem;
     font-weight: 600;
     padding: 0.75rem 1.5rem;
     border: none;
     border-radius: 0.5rem;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     transition: all 0.2s ease-in-out;
     display: flex;
     align-items: center;
     cursor: pointer;
 }

 .cta-button:hover {
     background-color: #047857;
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }

 .cta-button-icon-wrapper {
     display: inline-block;
     /* background-color: #000; */
     color: #000;
     border-radius: 0.375rem;
     /* padding: 0.125rem 0.5rem; */
     margin-left: 0.75rem;
     font-size: 0.75rem;
     font-weight: 700;
     transition: background-color 0.2s ease-in-out;
 }

 /* .cta-button:hover .cta-button-icon-wrapper {
     background-color: #10B981;
 } */

 .cta-button-icon {
     width: 0.8rem;
     height: 0.8rem;
     stroke-width: 2.5;
     stroke: currentColor;
 }

 .mobile-menu-button-container {
     display: none;
     margin-left: 1.5rem;
     z-index: 1000;
 }

 .mobile-menu-button {
     color: #374151;
     background: none;
     border: none;
     padding: 0.25rem;
     cursor: pointer;
     font-size: 1.5rem;
 }

 .mobile-menu-button:hover {
     color: #10B981;
 }

 .mobile-menu-button svg {
     height: 1.5rem;
     width: 1.5rem;
 }

 .mobile-menu {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
     transform: none;
     width: 100%;
     max-width: none;
     background-color: #ffffff;
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     border-radius: 0;
     padding: 1rem 0;
     transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
     overflow: hidden;
     min-height: fit-content;
     opacity: 0;
     margin-top: 0.75rem;
     z-index: 1001;
     padding-left: 20px;
     border-bottom-left-radius: 25px;
     border-bottom-right-radius: 25px;
 }

 .mobile-menu.open {
     display: block;
     max-height: auto;
     opacity: 1;
     height: auto;
 }

 .mobile-nav {
     display: flex;
     flex-direction: column;
     gap: 0;
 }

 .mobile-nav-link .dropdown-arrow {
     margin-left: 0.25rem;
     font-size: 1rem;
     color: #000;
     transition: transform 0.2s ease-in-out;
 }

 .mobile-nav-link.active .dropdown-arrow {
     transform: rotate(180deg);
 }


 @media (max-width: 1023px) {

     .navigation-desktop,
     .header-right-section {
         display: none;
     }

     .mobile-menu-button-container {
         display: block;
         color: #000;
     }

     .container {
         padding-left: 1rem;
         padding-right: 1rem;
     }

     .header {
         padding-top: 0.75rem;
         padding-bottom: 0.75rem;
     }

     .nav-link {
         color: #000;
     }
 }

 @media (min-width: 1024px) {
     .mobile-menu {
         display: none !important;
         max-height: 0 !important;
         opacity: 0 !important;
     }

     .mobile-menu.open {
         max-height: 0 !important;
         opacity: 0 !important;
         display: none !important;
     }
 }

 @media (max-width: 639px) {
     .container {
         padding-left: 0.75rem;
         padding-right: 0.75rem;
     }

     .mobile-menu {
         border-radius: 0;
         margin-left: 0;
         margin-right: 0;
     }
 }

 .nav-button {
     border: none;
     background: none;
     color: #374151;
     padding: 0.75rem;
     font-size: 0.875rem;
     font-weight: 500;
     text-decoration: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
     transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
 }


 .dropdown-menu-mobile {
     display: none;
     flex-direction: column;
     padding-left: 1rem;
     padding-right: 1rem;
     margin-top: 0.5rem;
     gap: 0.5rem;
 }

 .dropdown-menu-mobile li {
     list-style: none;
 }

 .dropdown-menu-mobile.open {
     display: flex;
 }

 .dropdown-menu-mobile li a {
     color: #374151;
     font-size: 0.875rem;
     font-weight: 500;
     padding: 0.5rem 0.75rem;
     border-radius: 0.375rem;
     text-decoration: none;
     transition: background-color 0.2s ease-in-out;
 }

 .dropdown-menu-mobile li a:hover {
     color: #047857;
 }

 .dropdown-arrow {
     font-size: 16px;
     font-weight: 700;
     transition: transform 0.3s ease;
 }

 .dropdown-arrow.rotate {
     transform: rotate(180deg);
 }

 .nav-link.dropdown-toggle:hover {
     color: #10B981;
 }

 .banner-container {
     position: relative;
     width: 98%;
     max-width: 1400px;
     /* Max width for the banner */
     height: 350px;
     /* Fixed height for the banner */
     background-image: url('https://images.pexels.com/photos/2422294/pexels-photo-2422294.jpeg?auto=compress&cs=tinysrgb&w=600');
     /* Placeholder background image */
     background-size: cover;
     background-position: center;
     border-radius: 1rem;
     /* Rounded corners for the banner */
     overflow: hidden;
     /* Ensures content respects border-radius */
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     box-sizing: border-box;
     padding: 2rem;
     /* Padding for smaller screens */
     margin: 10px auto;
 }

 /* Overlay for the background image */
 .banner-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.4);
     /* Dark semi-transparent overlay */
     z-index: 1;
 }

 /* Banner title */
 .banner-title {
     position: relative;
     /* Position above the overlay */
     z-index: 2;
     font-size: 4rem;
     /* Large font size for the title */
     font-weight: 700;
     color: #ffffff;
     /* White text color */
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
     /* Subtle text shadow for readability */
 }

 @media (max-width: 768px) {
     .banner-container {
         height: 250px;
         /* Adjust height for smaller screens */
     }

     .banner-title {
         font-size: 2.5rem;
         /* Smaller font size for mobile */
     }
 }

 @media (max-width: 480px) {
     .banner-container {
         height: 200px;
         /* Further adjust height for very small screens */
         border-radius: 0.5rem;
         /* Slightly less rounded corners */
     }

     .banner-title {
         font-size: 2rem;
         /* Even smaller font size for mobile */
     }
 }


 .main-section {
     background-color: transparent;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     padding: 2rem;
 }

 .main-section-container {
     display: flex;
     flex-direction: column;
     max-width: 1200px;
     width: 100%;
     border-radius: 1rem;
     overflow: hidden;
     /* Ensures child elements respect border-radius */
 }

 @media (min-width: 1024px) {
     .main-section-container {
         flex-direction: row;
         /* Two columns on large screens */
     }
 }

 .image-container {
     flex: 1;
     /* Take equal space */
     background-color: #d1d5db;
     /* Placeholder color */
     min-height: 300px;
     /* Minimum height for the image container */
     background-image: url('https://images.pexels.com/photos/3183172/pexels-photo-3183172.jpeg?auto=compress&cs=tinysrgb&w=600');
     /* Placeholder image */
     background-size: cover;
     background-position: center;
     border-radius: 1rem;
 }

 @media (min-width: 1024px) {
     .image-container {
         /* Remove top-right radius on desktop */
         border-radius: 1rem;
         /* Add bottom-left radius on desktop */
     }
 }

 .content-container {
     flex: 1;
     /* Take equal space */
     padding: 2.5rem;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     text-align: left;
 }

 .tag {
     display: inline-flex;
     align-items: center;
     font-size: 0.875rem;
     font-weight: 500;
     color: #4b5563;
     margin-bottom: 1rem;
     border: 2px solid #ccc;
     padding: 5px 10px;
     border-radius: 25px;
 }

 .tag-dot {
     width: 0.5rem;
     height: 0.5rem;
     background-color: #10b981;
     border-radius: 9999px;
     margin-right: 0.5rem;
 }

 .title {
     font-size: 2.5rem;
     font-weight: 700;
     color: #111827;
     line-height: 1.2;
     margin-bottom: 1.5rem;
 }

 .description {
     font-size: 1rem;
     color: #4b5563;
     line-height: 1.6;
     margin-bottom: 1rem;
 }

 .progress-indicators {
     display: flex;
     gap: 2rem;
     margin-bottom: 2rem;
     flex-wrap: wrap;
     /* Allow wrapping on smaller screens */
 }

 .progress-circle {
     position: relative;
     width: 90px;
     /* Size of the circle */
     height: 90px;
     border-radius: 50%;
     background: conic-gradient(#10b981 80%, #e5e7eb 80%);
     /* 80% filled green */
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.25rem;
     font-weight: 600;
     color: #10b981;
     box-sizing: border-box;
 }

 .progress-circle::after {
     content: '';
     position: absolute;
     width: 70px;
     /* Inner circle size */
     height: 70px;
     background-color: #ffffff;
     border-radius: 50%;
     z-index: 1;
 }

 .progress-value {
     position: relative;
     z-index: 2;
 }

 .progress-text {
     font-size: 0.875rem;
     color: #4b5563;
     margin-top: 0.5rem;
     text-align: center;
 }

 .progress-item {
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 /* Second circle specific styling */
 .progress-circle.ninety-percent {
     background: conic-gradient(#10b981 90%, #e5e7eb 90%);
     /* 90% filled green */
 }

 .benefits-section {
     width: 100%;
     border-top: 1px solid #047857;
 }

 .benefits-heading {
     font-size: 1.1rem;
     font-weight: 600;
     color: #111827;
 }

 .benefits-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .benefit-item {
     display: flex;
     align-items: flex-start;
     /* Align icon and text to the top */
     margin-bottom: 1rem;
     font-size: 1rem;
     color: #4b5563;
 }

 .benefit-icon {
     color: #10b981;
     /* Green checkmark */
     margin-right: 0.75rem;
     font-size: 1.2rem;
     flex-shrink: 0;
     /* Prevent icon from shrinking */
 }



 /* Moving Text Section */
 .moving-text-section {
     background-color: #f8f8f8;
     /* Same as body background */
     padding: 40px 0;
     /* Vertical padding */
     overflow: hidden;
     /* Hide overflowing text */
     white-space: nowrap;
     /* Prevent text from wrapping */
 }

 .moving-text-container {
     display: inline-block;
     /* Allows content to be wider than container */
     animation: marquee 20s linear infinite;
     /* Animation for continuous movement */
     /* Removed padding-left: 100%; */
 }

 .moving-text-item {
     display: inline-block;
     /* Keep items in a line */
     font-size: 3.5em;
     /* Large font size */
     font-weight: 900;
     /* Extra bold */
     margin: 0 20px;
     /* Space between items */
     text-transform: uppercase;
 }

 .moving-text-item.black {
     color: #333;
     /* Black text */
 }

 .moving-text-item.outline {
     color: transparent;
     /* Transparent fill */
     -webkit-text-stroke: 2px #333;
     /* Black stroke for outline effect */
     text-stroke: 2px #333;
 }

 .moving-text-item.plus {
     color: #00c389;
     /* Green color for plus sign */
 }

 /* Marquee Animation */
 @keyframes marquee {
     0% {
         transform: translateX(0%);
     }

     100% {
         transform: translateX(-50%);
     }

     /* Changed to -50% for infinite loop with duplicated content */
 }




 .process-section {

     display: flex;
     justify-content: center;
     align-items: center;
     height: auto;
     padding: 2rem 0;
     margin: 10px 20px;
     border-radius: 20px;
     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
     /* Overall padding for the section */
 }

 .process-section-container {
     padding: 4rem;
     max-width: 1280px;
     /* Adjust based on typical large screen width */
     width: 100%;
     display: flex;
     flex-direction: column;
     /* gap: 4rem; */
     /* Space between header and steps grid */
     position: relative;
     /* For positioning decorative elements */
     overflow: hidden;
     /* Ensure decorative elements don't overflow */
 }

 /* Decorative shapes on the right */
 .decorative-shapes {
     position: absolute;
     top: 30%;
     /* Center vertically with transform */
     right: 0;
     /* Align to the right edge of the container */
     width: 250px;
     /* Adjusted width for the group of arrows */
     height: 250px;
     /* Adjusted height for the group of arrows */
     transform: translateY(-50%);
     /* Adjust for vertical centering */
     z-index: 0;
     /* Behind content */
     pointer-events: none;
     /* Do not interfere with clicks */
     overflow: hidden;
     /* Crucial to clip shapes if they exceed container */
 }

 .shape-dark,
 .shape-teal,
 .shape-light {
     position: absolute;
     width: 100%;
     /* Each shape takes full width of parent */
     height: 100%;
     /* Each shape takes full height of parent */
     /* This clip-path now creates a left-pointing triangular arrow */
     clip-path: polygon(100% 0%, 50% 50%, 100% 100%);
     transition: transform 0.3s ease-out;
 }

 .shape-dark {
     background-color: #0d1a1c;
     /* Darkest color from the image */
     z-index: 3;
     /* Foremost arrow */
     transform: translateX(-40%);
     /* Shift left to be the front-most arrow */
 }

 .shape-teal {
     background-color: #10b981;
     /* Teal color from the image */
     z-index: 2;
     /* Middle arrow */
     transform: translateX(-20%);
     /* Less shift left than the dark one */
 }

 .shape-light {
     background-color: #e0e0e0;
     /* Lightest grey color from the image */
     z-index: 1;
     /* Background arrow */
     transform: translateX(0%);
     /* Least shifted, or original position */
 }

 @media (max-width: 1023px) {
     .decorative-shapes {
         display: none;
         /* Hide decorative shapes on smaller screens */
     }
 }

 /* Top Section: "OUR PROCESS" Tag and Main Heading */
 .header-content {
     text-align: left;
     position: relative;
     /* For z-index to be above shapes */
     z-index: 1;
 }

 .process-tag {
     display: inline-flex;
     align-items: center;
     font-size: 0.875rem;
     /* text-sm */
     font-weight: 500;
     /* font-medium */
     color: #4b5563;
     border: 2px solid #ccc;
     padding: 5px 10px;
     border-radius: 25px;
 }

 .process-tag-dot {
     width: 0.5rem;
     height: 0.5rem;
     background-color: #10b981;
     /* Green dot */
     border-radius: 9999px;
     /* Rounded-full */
     margin-right: 0.5rem;
     /* Space between dot and text */
 }

 .main-heading {
     font-size: 3.5rem;
     /* Large heading size */
     font-weight: 800;
     /* Extra bold */
     color: #111827;
     /* Dark text color */
     line-height: 1.2;
     max-width: 800px;
     /* Limit width of heading */
 }

 @media (max-width: 768px) {
     .main-heading {
         font-size: 2.8rem;
         /* Adjust for tablets */
     }
 }

 @media (max-width: 639px) {
     .main-heading {
         font-size: 2.2rem;
         /* Adjust for mobile */
     }

     .step-title {
         font-size: 1rem;
     }
 }

 /* Steps Grid */
 .steps-grid {
     display: grid;
     grid-template-columns: 1fr;
     /* grid-cols-1 */
     gap: 2rem;
 }

 @media (min-width: 768px) {

     /* md:grid-cols-2 */
     .steps-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .step-title {
         font-size: 1rem;
     }
 }

 @media (min-width: 1024px) {

     /* lg:grid-cols-4 */
     .steps-grid {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 /* Individual Step Card - Now without card styling */
 .step-card {
     background-color: transparent;
     /* Remove background */
     border-radius: 0;
     /* Remove border-radius */
     box-shadow: none;
     /* Remove shadow */
     padding: 0;
     /* Remove padding */
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     text-align: left;
 }

 .step-icon-container {
     width: 6rem;
     /* w-16 */
     height: 6rem;
     /* h-16 */
     background-color: #b2f5ea;
     /* bg-teal-200 */
     opacity: 0.7;
     /* bg-opacity-70 */
     border-radius: 0.75rem;
     /* rounded-xl */
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.5rem;
     /* mb-6 */
 }

 .step-icon {
     width: 6rem;
     /* w-8 */
     height: 6rem;
     padding: 1rem;
     /* h-8 */
     color: #047857;
     /* text-teal-600 */
 }

 .step-title {
     font-size: 2rem;
     /* text-xl */
     font-weight: 600;
     /* font-semibold */
     color: #111827;
     /* text-gray-900 */
     margin-bottom: 0.5rem;
     /* mb-2 */
 }

 .step-description {
     color: #4b5563;
     /* text-gray-600 */
     font-size: 1rem;
     /* text-base */
 }



 .team-section {
     font-family: 'Inter', sans-serif;
     background-color: #f8f8f8;
     margin: 0;
     padding: 0;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: auto;
     padding: 2rem 4rem;
 }

 .team-section-container {
     max-width: 1280px;
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 1rem;
     text-align: center;
 }

 /* Header Section */
 .header-content {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     text-align: left;
     /* margin-bottom: 2rem; */
 }

 .header-top {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: flex-start;
     width: 100%;
 }

 @media (min-width: 768px) {
     .header-top {
         flex-direction: row;
         justify-content: space-between;
         align-items: center;
     }
 }

 .team-tag {
     display: inline-flex;
     align-items: center;
     font-size: 0.875rem;
     font-weight: 500;
     color: #4b5563;
     margin-bottom: 0.75rem;
     border: 2px solid #ccc;
     padding: 5px 10px;
     border-radius: 25px;
 }

 .team-tag-dot {
     width: 0.5rem;
     height: 0.5rem;
     background-color: #10b981;
     border-radius: 9999px;
     margin-right: 0.5rem;
 }

 .main-heading {
     font-size: 2.5rem;
     font-weight: 800;
     color: #111827;
     line-height: 1.2;
     text-align: left;
     /* margin-bottom: 1.5rem; */
 }

 @media (min-width: 768px) {
     .main-heading {
         margin-bottom: 0;
         /* font-size: 1.5rem; */
     }
 }

 .navigation-arrows {
     display: flex;
     gap: 1rem;
     margin-top: 1rem;
     justify-content: flex-start;
     width: 100%;
 }

 @media (min-width: 768px) {
     .navigation-arrows {
         margin: 0;
         justify-content: space-between;
         width: auto;
     }

     .arrow-button {
         margin-top: 20px;
         margin-bottom: 0;
         margin: 120px 20px 0 0;
     }
 }

 @media (max-width: 768px) {
     .main-heading {
         font-size: 1.4rem;
         margin-bottom: 0;
     }

     .navigation-arrows {
         margin: 0;
         padding: 0;
     }

     .arrow-button {
         margin-top: 0;
         padding: 0;
     }
 }

 .arrow-button {
     display: flex;
     align-items: center;
     justify-content: center;
     width: auto;
     height: auto;
     background-color: transparent;
     border: none;
     cursor: pointer;
     transition: color 0.3s ease;
     /* Transition for color */
     margin: 30px 0 0 0;
 }

 .arrow-button:hover {
     color: #0d9d78;
 }

 .arrow-button svg {
     width: 4rem;
     height: 2rem;
     color: #4b5563;
     stroke-width: 2;
     transition: color 0.3s ease;
     /* Ensure SVG color also transitions */
 }

 /* Slider Wrapper */
 .team-grid-wrapper {
     overflow-x: hidden;
     /* Hide horizontal scrollbar */
     width: 100%;
 }

 /* Team Grid */
 .team-grid {
     display: flex;
     /* Make it a flex container for horizontal layout */
     transition: transform 0.5s ease-in-out;
     /* Smooth sliding transition */
 }

 /* Team Card */
 .team-card {
     background-color: #f8f8f8;
     border-radius: 1rem;
     overflow: hidden;
     position: relative;
     cursor: pointer;
     flex-shrink: 0;
     width: calc((100% / var(--cards-per-view)) - var(--gap-between-cards-calc));
     margin-right: var(--gap-between-cards);
     /* Apply gap between cards */
 }

 .team-card:last-child {
     margin-right: 0;
     /* No margin on the last card */
 }

 .team-card:hover .team-member-image {
     transform: scale(1.2);
 }

 .team-member-image {
     width: 100%;
     height: 400px;
     object-fit: cover;
     border-radius: 1rem;
     display: block;
     transition: transform 0.5s ease-in-out;
     /* Smooth image zoom transition */
 }

 /* Overlay for text and share button */
 .team-card-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     padding: 1.5rem 1rem;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     text-align: left;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
     border-bottom-left-radius: 1rem;
     border-bottom-right-radius: 1rem;
     z-index: 5;
 }

 .member-name {
     font-size: 1.25rem;
     font-weight: 700;
     color: #10b981;
     margin-bottom: 0.25rem;
     word-break: break-word;
     margin: 0 auto;
 }

 .member-title {
     font-size: 0.9rem;
     color: #10b981;
     margin-bottom: 0;
 }

 /* Share Icon Button (Initially Visible) */
 .share-icon-button {
     position: absolute;
     bottom: -1%;
     right: -1%;
     background-color: #f8f8f8;
     border-top-left-radius: 25px;
     border-bottom-right-radius: 1rem;
     width: 70px;
     height: 70px;
     display: flex;
     justify-content: center;
     align-items: center;
     border: none;
     cursor: pointer;
     transition: background-color 0.3s ease-in-out;
     z-index: 10;
     overflow: visible;
     /* Allow children to be positioned outside */
 }

 .share-icon-button:hover {
     background-color: #0d9d78;
 }

 .share-icon-button svg {
     width: 1.5rem;
     height: 1.5rem;
     color: #4b5563;
     padding: 0.6rem;
     background-color: white;
     border-radius: 10px;
     position: relative;
     z-index: 2;
 }

 /* Social Media Icons (Hidden by default, shown on hover of share button) */
 .social-icons-container {
     position: absolute;
     bottom: 100%;
     /* Position above the button */
     right: 15px;
     display: flex;
     flex-direction: column;
     gap: 1rem;
     opacity: 0;
     transform: translateY(100%);
     /* Start off-screen below */
     transition: opacity 0.3s ease-out, transform 0.3s ease-out;
     z-index: 9;
     padding-bottom: 0.75rem;
     align-items: flex-end;
     pointer-events: none;
     /* Make them unclickable when hidden */
 }

 /* Show social icons on hover of the parent button */
 .share-icon-button:hover .social-icons-container {
     opacity: 1;
     transform: translateY(0);
     /* Slide in upwards */
     pointer-events: auto;
     /* Make them clickable when visible */
 }

 .social-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background-color: #ffffff;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
     transition: background-color 0.2s ease;
     flex-shrink: 0;
 }

 .social-icon:hover {
     background-color: #f0f0f0;
 }

 /* YouTube */
 .social-icon.youtube svg {
     color: #ff0000;
 }

 /* Twitter */
 .social-icon.twitter svg {
     color: #1da1f2;
 }

 /* Facebook */
 .social-icon.facebook svg {
     color: #1877f2;
 }

 .social-icon svg {
     width: 1.2rem;
     height: 1.2rem;
 }


 .experience-section {
     justify-content: center;
     /* Center experience section on smaller screens */
 }

 .mission-vision-row {
     flex-direction: column;
     /* Stack mission/vision title and description */
     align-items: flex-start;
     /* Align to left when stacked */
     padding: 10px 0;
 }

 .mission-vision-title,
 .mission-vision-description {
     flex-basis: auto;
     /* Reset flex-basis */
     width: 100%;
     /* Take full width */
     text-align: left;
     /* Align text to left */
 }

 .mission-vision-description {
     margin-top: 5px;
     /* Add some space between stacked items */
 }

 .know-more-button-container {
     justify-content: center;
     /* Center button on small screens */
 }

 .experience-overlay {
     bottom: 10px;
     /* Adjust for smaller screens */
     left: 10px;
     /* Adjust for smaller screens */
     padding: 10px 15px;
 }

 .experience-overlay .number {
     font-size: 2em;
 }

 .experience-overlay .text {
     font-size: 0.8em;
 }



 .statistics-section {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: auto;
     padding: 1rem 1rem;
 }

 .statistics-section-container {
     max-width: 1280px;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 3rem;
 }

 .statistics-grid {
     display: grid;
     grid-template-columns: 1fr;
     /* Default to single column on small screens */
     gap: 2rem;
     width: 100%;
 }

 @media (min-width: 640px) {
     .statistics-grid {
         grid-template-columns: repeat(2, 1fr);
         /* 2 columns on medium screens */
     }
 }

 @media (min-width: 1024px) {
     .statistics-grid {
         grid-template-columns: repeat(4, 1fr);
         /* 4 columns on large screens */
     }
 }

 .stat-item {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     /* Align content to the left within each item */
     text-align: left;
     padding: 1rem;
     border-radius: 0.5rem;
 }

 .stat-header {
     display: flex;
     align-items: center;
     margin-bottom: 0.5rem;
 }

 .stat-dot {
     width: 0.5rem;
     height: 0.5rem;
     background-color: #10b981;
     /* Green dot color */
     border-radius: 9999px;
     /* Fully rounded */
     margin-right: 0.5rem;
 }

 .stat-title {
     font-size: 1rem;
     font-weight: 500;
     color: #4b5563;
     /* Grey text color */
     white-space: nowrap;
     /* Prevent title from wrapping unless explicitly needed */
 }

 .stat-value {
     font-size: 3.5rem;
     /* Large font size for the number */
     font-weight: 800;
     /* Extra bold */
     color: #111827;
     /* Dark text color */
     line-height: 1.1;
     margin-top: 0.5rem;
     /* Space between title and value */
 }

 @media (min-width: 768px) {
     .stat-value {
         font-size: 4rem;
     }
 }

 @media (min-width: 1024px) {
     .stat-value {
         font-size: 5rem;
     }
 }



 .testimonial-section {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: auto;
     padding: 2rem 1rem;
     position: relative;
     overflow: hidden;
 }

 .testimonial-section-container {
     max-width: 1280px;
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     gap: 3rem;
     position: relative;
     z-index: 1;
 }

 /* Large background "testimonials" text */
 .background-text {
     position: absolute;
     top: -180px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 150px;
     font-weight: 800;
     color: #e0e0e0;
     opacity: 0.5;
     z-index: 0;
     white-space: nowrap;
     pointer-events: none;
 }

 @media (max-width: 768px) {
     .background-text {
         font-size: 80px;
         top: -50px;
     }
 }

 @media (max-width: 480px) {
     .background-text {
         font-size: 50px;
         top: -30px;
     }
 }

 .testimonial-card {
     background-color: #ffffff;
     border-radius: 1rem;
     padding: 2.5rem 2rem;
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
     width: 100%;
     max-width: 100%;
     margin-top: 5rem;
 }

 .tag-customer {
     display: inline-flex;
     align-items: center;
     font-size: 0.75rem;
     font-weight: 500;
     color: #4b5563;
     padding: 0.4rem 0.8rem;
     border: 1px solid #d1d5db;
     border-radius: 9999px;
     margin-bottom: 1.5rem;
     background-color: #f3f4f6;
     letter-spacing: 0.05em;
     text-transform: uppercase;
 }

 .tag-dot {
     width: 0.4rem;
     height: 0.4rem;
     background-color: #10b981;
     border-radius: 9999px;
     margin-right: 0.4rem;
 }

 #dynamicContent {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     width: 100%;
     transition: opacity 0.5s ease-in-out;
 }

 .stars {
     display: flex;
     gap: 0.25rem;
     margin-bottom: 1.5rem;
 }

 .star-icon {
     width: 2rem;
     height: 2rem;
     color: #facc15;
     fill: currentColor;
 }

 .star-icon.empty {
     color: #d1d5db;
 }

 .testimonial-text {
     font-size: 1.5rem;
     font-weight: 600;
     color: #111827;
     line-height: 1.5;
     margin-bottom: 2rem;
     text-align: center;
     width: 900px;
 }

 @media (max-width: 768px) {
     .testimonial-text {
         font-size: 1.2rem;
     }
 }

 .author-info {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .author-avatar {
     width: 3.5rem;
     height: 3.5rem;
     border-radius: 9999px;
     object-fit: cover;
     margin-right: 1rem;
 }

 .author-name {
     font-size: 1.125rem;
     font-weight: 700;
     color: #111827;
 }

 .author-title {
     font-size: 0.875rem;
     color: #4b5563;
 }

 .dots-navigation {
     display: flex;
     gap: 0.75rem;
     margin-top: 1rem;
 }

 .dot {
     width: 0.6rem;
     height: 0.6rem;
     background-color: #d1d5db;
     border-radius: 9999px;
     cursor: pointer;
     transition: background-color 0.3s ease, width 0.3s ease;
 }

 .dot.active {
     background-color: #10b981;
     width: 1.2rem;
 }

 .quote-icon-left,
 .quote-icon-right {
     position: absolute;
     width: 4rem;
     height: 4rem;
     font-size: 4rem;
     font-weight: 800;
     line-height: 1;
     color: #000;
     opacity: 0.2;
     z-index: 2;
     pointer-events: none;
 }

 .quote-icon-left {
     top: 2rem;
     left: 2rem;
 }

 .quote-icon-right {
     bottom: 2rem;
     right: 2rem;
     color: #000;
 }



 .slider-container {
     width: 100%;
     background-color: transparent;
     /* Light background for the slider track */
     padding: 2rem 0;
     white-space: nowrap;
     /* Prevent items from wrapping */
     position: relative;
     overflow: hidden;
     /* Ensure content outside animation is hidden */
 }

 .logo-slide {
     display: inline-block;
     /* Allows items to be on a single line */
     animation: slide-right-to-left 30s linear infinite;
     /* Animation duration and type */
     animation-play-state: running;
     /* Ensures animation is running by default */
 }

 .logo-item {
     display: inline-block;
     margin: 0 40px;
     /* Space between logos */
     vertical-align: middle;
     /* Align images nicely */
 }

 .logo-item img {
     height: 40px;
     /* Standard height for logos */
     width: auto;
     /* Maintain aspect ratio */
     opacity: 0.7;
     /* Slight transparency */
     filter: grayscale(100%);
     /* Grayscale effect */
     transition: opacity 0.3s ease, filter 0.3s ease;
 }

 .logo-item img:hover {
     opacity: 1;
     filter: grayscale(0%);
     /* Full color on hover */
 }

 /* Animation Keyframes */
 @keyframes slide-right-to-left {
     0% {
         transform: translateX(0%);
     }

     100% {
         transform: translateX(-100%);
     }
 }

 /* Duplicate the slide content to create a seamless loop */
 .logo-slide::after {
     content: attr(data-content);
     /* Use a data attribute to duplicate content */
     display: inline-block;
     /* Needs to match the styling of .logo-slide */
 }

 /* Dynamic content for duplication (if using ::after) - not strictly necessary with actual duplicated HTML */
 .logo-slide[data-content]:before {
     content: '';
     /* Prevent extra content from appearing if data-content is empty */
 }




 footer {
     background-color: #0a191b;
     /* Light background for the overall page */
     display: flex;
     justify-content: center;
     align-items: flex-end;
     /* Align footer to the bottom */
     min-height: auto;
 }


 .footer-container {
     background-color: #0a191b;
     /* Dark background for the footer */
     color: #e0e0e0;
     /* Light text color */
     padding: 2rem 1.5rem;
     width: 100%;
     max-width: 1400px;
     /* Max width for the footer content */
     box-sizing: border-box;
 }

 /* Top Section: Logo, Line, and Social Icons */
 .footer-top {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 2rem;
     /* Removed border-bottom here as the line is now a separate element */
     margin-bottom: 2rem;
     padding: 0 30px;
     flex-wrap: wrap;
     /* Allow wrapping on smaller screens */
     gap: 1rem;
     /* Space between items when wrapped */
 }

 .footer-logo {
     width: 120px;
     display: flex;
     align-items: center;
     font-size: 1.8rem;
     font-weight: 700;
     color: #10b981;
     /* Green color for Humace */
     flex-shrink: 0;
     /* Prevent logo from shrinking */
 }

 .footer-logo img {
     width: 100%;
 }

 .footer-logo-icon {
     width: 35px;
     height: 35px;
     background-color: #10b981;
     /* Green background for the icon */
     border-radius: 50%;
     margin-right: 0.75rem;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #0a191b;
     /* Dark color for the placeholder icon */
     font-size: 1.2rem;
 }

 .footer-line {
     flex-grow: 1;
     /* Make the line take up available space */
     height: 1px;
     background-color: rgba(255, 255, 255, 0.1);
     /* Subtle line color */
     margin: 0 1.5rem;
     /* Space on both sides of the line */
     min-width: 50px;
     /* Ensure line is visible even if content is short */
 }

 @media (max-width: 767px) {
     .footer-line {
         display: none;
         /* Hide line on smaller screens if it breaks layout */
     }
 }

 .social-icons {
     display: flex;
     gap: 0.75rem;
     flex-shrink: 0;
     /* Prevent social icons from shrinking */
 }

 .social-icon-link {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     background-color: #ffffff;
     /* White background for the icons */
     border-radius: 50%;
     color: #0a191b;
     /* Dark color for the icon itself */
     font-size: 1rem;
     text-decoration: none;
     transition: background-color 0.3s ease, color 0.3s ease;
 }

 .social-icon-link:hover {
     background-color: #e0e0e0;
     /* Slightly darker white on hover */
     color: #0a191b;
 }

 /* Main Footer Content Grid */
 .footer-main-content {
     display: grid;
     grid-template-columns: 1fr;
     gap: 2.5rem;
     margin-bottom: 2.5rem;
     padding: 20px 30px;
 }

 @media (min-width: 768px) {
     .footer-main-content {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (min-width: 1024px) {
     .footer-main-content {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 .footer-section h3 {
     font-size: 1.1rem;
     font-weight: 600;
     color: #10b981;
     /* Green color for section titles */
     margin-bottom: 1rem;
 }

 .footer-section p,
 .footer-section a {
     font-size: 0.95rem;
     color: #b0b0b0;
     /* Lighter grey for content text */
     text-decoration: none;
     line-height: 1.6;
     transition: scale 0.3s;
     margin-bottom: 5px;
 }

 .footer-section a:hover {
     color: #10b981;
     /* Green on hover for links */
     scale: 1.05;
 }

 .footer-section ul {
     list-style: none;
     padding: 0;
     margin: 0;
     display: grid;
     /* Use grid for two columns */
     grid-template-columns: 1fr;
     /* Default to one column */
     gap: 0.5rem;
     /* Gap between list items */
 }

 @media (min-width: 768px) {

     /* Adjust breakpoint as needed for two columns */
     .footer-section ul.company-links {
         grid-template-columns: 1fr 1fr;
         /* Two columns for company links */
         column-gap: 1.5rem;
         /* Space between columns */
     }
 }

 .footer-section ul li {
     margin-bottom: 0;
     /* Remove individual margin as gap handles spacing */
 }

 .footer-section ul li a {
     display: flex;
     align-items: center;
     width: 170px;
 }

 .footer-section ul li a::before {
     content: '>';
     /* Custom bullet point */
     margin-right: 0.5rem;
     color: #10b981;
     /* Green color for the bullet */
     font-weight: 700;
 }

 /* Newsletter Subscription */
 .newsletter-form {
     display: flex;
     /* Changed to flex for horizontal layout */
     flex-direction: row;
     /* Arrange items in a row */
     gap: 0;
     /* Remove gap between input and button */
     border: 1px solid rgba(255, 255, 255, 0.2);
     /* Add border to the container */
     border-radius: 0.5rem;
     /* Apply border-radius to the container */
     overflow: hidden;
     /* Ensure inner elements conform to border-radius */
 }

 .newsletter-input {
     flex-grow: 1;
     /* Allow input to take available space */
     padding: 0.75rem 1rem;
     background-color: #1a2c2e;
     /* Darker input background */
     border: none;
     /* Remove individual border as it's on the container */
     border-radius: 0;
     /* Remove individual border-radius */
     color: #e0e0e0;
     font-size: 0.95rem;
     outline: none;
     box-sizing: border-box;
 }

 .newsletter-input::placeholder {
     color: #888;
 }

 .newsletter-input:focus {
     /* Border color will be on the container now */
 }

 .newsletter-submit-button {
     padding: 0.75rem 1rem;
     background-color: #10b981;
     /* Green submit button */
     color: #0a191b;
     /* Dark text for button */
     border: none;
     border-radius: 0;
     /* Remove individual border-radius */
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.3s ease;
     flex-shrink: 0;
     /* Prevent button from shrinking */
 }

 .newsletter-submit-button:hover {
     background-color: #0d9a6c;
 }

 /* Bold phone number in Say Hello section */
 .footer-section .phone-number {
     font-weight: 700;
     /* Make phone number bold */
     color: #e0e0e0;
     /* Ensure it's light colored */
 }

 /* Bottom Section: Copyright and Legal Links */
 .footer-bottom {
     background-color: #0a191b;
     /* Same dark background as footer */
     padding-top: 1.5rem;
     /* Removed border-top here as the inner container will have it */
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     /* Center content vertically */
     gap: 1rem;
     text-align: center;
     padding-bottom: 0;
     /* Remove padding-bottom from outer container */
 }

 .footer-bottom-inner {
     background-color: #1a2c2e;
     /* Slightly lighter dark background */
     border-radius: 0.75rem;
     /* Rounded corners */
     padding: 1.25rem 1.5rem;
     /* Padding inside the new container */
     width: calc(100% - 3rem);
     /* Adjust width to account for padding of parent */
     max-width: 1200px;
     /* Max width for the inner container */
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     gap: 1rem;
     box-sizing: border-box;
 }

 @media (min-width: 768px) {
     .footer-bottom-inner {
         flex-direction: row;
     }
 }

 .footer-copyright {
     font-size: 0.85rem;
     color: #888;
     /* Darker grey for copyright text */
     margin: 0;
     /* Remove default paragraph margin */
 }

 .footer-legal-links {
     display: flex;
     gap: 0.75rem;
     /* Reduced gap for pipe separator */
     align-items: center;
     /* Align items for vertical centering of pipe */
 }

 .footer-legal-links a {
     font-size: 0.85rem;
     color: #888;
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .footer-legal-links a:hover {
     color: #10b981;
 }

 .footer-legal-links span.separator {
     color: #888;
     /* Color for the pipe separator */
     font-size: 0.85rem;
 }



 .articles-sections {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     padding: 2rem;
 }

 .articles-container {
     max-width: 1200px;
     width: 100%;
     text-align: center;
 }

 .articles-header {
     margin-bottom: 3rem;
 }

 .articles-tag {
     display: inline-flex;
     align-items: center;
     font-size: 0.875rem;
     font-weight: 500;
     color: #4b5563;
     margin-bottom: 0.5rem;
     /* background-color: #e0e0e0; */
     /* Light grey background for the tag */
     padding: 0.25rem 0.75rem;
     border-radius: 9999px;
     /* Fully rounded */
     border: 2px solid #ccc;
 }

 .articles-tag-dot {
     width: 0.5rem;
     height: 0.5rem;
     background-color: #10b981;
     border-radius: 9999px;
     margin-right: 0.3rem;
 }

 .articles-heading {
     font-size: 2.5rem;
     font-weight: 700;
     color: #111827;
     line-height: 1.2;
 }

 @media (min-width: 768px) {
     .articles-heading {
         font-size: 3.5rem;
     }
 }

 .articles-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 2rem;
     margin-bottom: 40px;
 }

 @media (min-width: 768px) {
     .articles-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (min-width: 1024px) {
     .articles-grid {
         grid-template-columns: repeat(3, 1fr);
     }
 }

 .articles-grid {
     opacity: 0;
     transform: translateX(100px);
 }

 .article-card {
     background-color: #ffffff;
     border-radius: 0.75rem;
     /* Rounded corners for the entire card */
     overflow: hidden;
     /* Ensures image corners are rounded within the card */
     display: flex;
     flex-direction: column;
     text-align: left;
     position: relative;
     /* For absolute positioning of elements inside */
 }

 .article-image-container {
     position: relative;
     /* To position the meta info over the image */
     width: 100%;
     height: 300px;
     /* Fixed height for consistency */
     overflow: hidden;
     /* Ensures image corners are rounded */
     border-top-left-radius: 0.75rem;
     /* Match card border radius */
     border-top-right-radius: 0.75rem;
     /* Match card border radius */
 }

 .article-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     position: relative;
 }

 .article-meta {
     position: absolute;
     /* Position over the image */
     bottom: 0;
     left: 0;
     font-size: 0.875rem;
     color: #000;
     background-color: #ffffff;
     padding: 0.7rem 0.95rem;
     border-top-right-radius: 0.5rem;
     display: flex;
     gap: 0.5rem;
     align-items: center;
     font-size: 0.6rem;
 }

 .article-content {
     padding-left: 10px;
 }

 .article-meta-dot {
     width: 0.375rem;
     height: 0.375rem;
     background-color: #10b981;
     /* border-radius: 9999px; */
     display: inline-block;
     vertical-align: middle;
 }

 .article-title {
     font-size: 1.3rem;
     font-weight: 600;
     color: #111827;
     margin-bottom: 1rem;
     line-height: 1.4;
     margin-top: 20px;
 }

 .read-more-container {
     display: flex;
     align-items: center;
     gap: 10px;
     /* Space between "Readmore" text and the icon button */
 }

 .read-more-text {
     font-size: 1rem;
     /* Adjust as needed */
     font-weight: 600;
     color: #333;
     /* Dark grey color for the text */
     text-decoration: underline;
     /* Underline the text */
     text-underline-offset: 4px;
     /* Adjust underline position */
     transition: color 0.3s ease;
 }

 .read-more-text:hover {
     color: #10b981;
     /* Change color on hover */
 }

 .icon-button {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     /* Size of the square button */
     height: 40px;
     /* Size of the square button */
     background-color: #10b981;
     /* Green background */
     border-radius: 8px;
     /* Rounded corners for the button */
     transition: background-color 0.3s ease;
     cursor: pointer;
     border: none;
     /* Remove default button border */
     padding: 0;
     /* Remove default button padding */
 }

 .icon-button:hover {
     background-color: #0d9a6c;
     /* Darker green on hover */
 }

 .icon-button svg {
     width: 20px;
     /* Size of the arrow icon */
     height: 20px;
     /* Size of the arrow icon */
     color: #ffffff;
     /* White color for the icon */
     stroke-width: 2;
     /* Adjust stroke thickness for the arrow */
 }

 .article-card:hover .article-image {
     transform: scale(1.05);
     /* Scale up image on card hover */
 }







 /* ====================================== Contact Page Design =========================================== */


 .contact-section-container {
     max-width: 1340px;
     width: 100%;
     background-color: transparent;
     padding: 2rem;
     display: flex;
     flex-direction: column;
     gap: 2rem;
     margin: auto;
 }

 .contact-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 2rem;
     border-bottom: 1px solid #ccc;
     padding-bottom: 2rem;
 }

 @media (min-width: 640px) {
     .contact-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (min-width: 1024px) {
     .contact-grid {
         grid-template-columns: repeat(4, 1fr);
     }
 }

 .contact-card {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     text-align: left;
     gap: 1rem;
 }

 .icon-wrapper {
     background-color: #10b981;
     border-radius: 0.5rem;
     width: 3.5rem;
     height: 3.5rem;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-shrink: 0;
 }

 .icon-wrapper svg {
     color: #ffffff;
     width: 1.8rem;
     height: 1.8rem;
     stroke-width: 1.5;
 }

 .contact-title {
     font-size: 2rem;
     font-weight: 600;
     color: #111827;
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
 }

 .contact-details {
     font-size: 0.95rem;
     color: #4b5563;
     line-height: 1.5;
 }

 .contact-details a {
     color: #4b5563;
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .contact-details a:hover {
     color: #10b981;
 }


 /* <================== Why Choose us Contact =================> */

 .why-choose-section-contact {
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     padding: 0 1rem;
     overflow-x: hidden;
     /* Prevent horizontal scroll due to shapes */
 }

 .main-container {
     max-width: 1200px;
     width: 100%;
     display: flex;
     flex-direction: column;
     position: relative;
     /* For absolute positioning of decorative shapes */
 }

 @media (min-width: 1024px) {
     .main-container {
         flex-direction: row;
         gap: 5rem;
     }
 }

 .triangle-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: -50px;
     /* negative space for overlap */
     position: relative;
     height: 200px;
     background: #f5f5f5;
     position: absolute;
     top: 50%;
     left: -8%;
 }

 .triangle {
     width: 0;
     height: 0;
     border-top: 100px solid transparent;
     border-bottom: 100px solid transparent;
     border-left: 100px solid;
     /* Triangle points right */
     position: absolute;
 }

 .triangle:nth-child(1) {
     border-left-color: #1de9b6;
     /* Teal green */
     left: 0;
     z-index: 1;
 }

 .triangle:nth-child(2) {
     border-left-color: #cde5e4;
     /* Light transparent triangle */
     left: 40px;
     z-index: 2;
 }

 .triangle:nth-child(3) {
     border-left-color: #001f20;
     /* Dark triangle */
     left: 80px;
     z-index: 3;
 }

 /* Left Section: Why Choose Us */
 .left-section {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     text-align: left;
     position: relative;
 }

 .tag {
     display: flex;
     align-items: center;
     font-size: 0.875rem;
     font-weight: 500;
     color: #4b5563;
     margin-bottom: 0.75rem;
 }

 .tag-dot {
     width: 0.5rem;
     height: 0.5rem;
     background-color: #10b981;
     border-radius: 9999px;
     margin-right: 0.5rem;
 }

 .heading {
     font-size: 3rem;
     font-weight: 800;
     color: #111827;
     line-height: 1.2;
     margin-bottom: 1.5rem;
 }

 .description {
     font-size: 1rem;
     color: #4b5563;
     line-height: 1.6;
     max-width: 500px;
 }

 /* Decorative Shapes specific styles */

 /* Right Section: Contact Form */
 .right-section {
     flex: 1;
     background-color: #ffffff;
     border-radius: 1rem;
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     padding: 2.5rem 2rem;
     display: flex;
     flex-direction: column;
 }

 .form-header {
     margin-bottom: 1.5rem;
 }

 .form-heading {
     font-size: 1.5rem;
     font-weight: 600;
     color: #111827;
     margin-bottom: 0.5rem;
 }

 .form-subheading {
     font-size: 0.875rem;
     color: #6b7280;
 }

 .form-grid {
     display: grid;
     grid-template-columns: 1fr;
     gap: 1rem;
     margin-bottom: 1.5rem;
 }

 @media (min-width: 640px) {
     .form-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .triangle-wrapper {
         display: none;
     }
 }

 .form-group {
     position: relative;
 }

 .form-input,
 .form-textarea {
     width: 98%;
     padding: 0.75rem 0rem 0.75rem 1rem;
     border: 1px solid #d1d5db;
     border-radius: 0.5rem;
     font-size: 1rem;
     color: #111827;
     outline: none;
     transition: border-color 0.3s ease, box-shadow 0.3s ease;
 }

 .form-input::placeholder,
 .form-textarea::placeholder {
     color: #9ca3af;
 }

 .form-input:focus,
 .form-textarea:focus {
     border-color: #10b981;
     box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
 }

 .form-textarea {
     min-height: 100px;
     resize: vertical;
     grid-column: 1 / -1;
 }

 .checkbox-group {
     display: flex;
     align-items: center;
     margin-bottom: 1.5rem;
 }

 .checkbox-input {
     margin-right: 0.5rem;
     width: 1rem;
     height: 1rem;
     border-radius: 0.25rem;
     border: 1px solid #d1d5db;
     accent-color: #10b981;
 }

 .checkbox-label {
     font-size: 0.9rem;
     color: #4b5563;
 }

 .submit-button {
     background-color: #111827;
     color: #ffffff;
     padding: 1rem 2rem;
     border: none;
     border-radius: 0.5rem;
     font-size: 1rem;
     font-weight: 600;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.75rem;
     transition: background-color 0.3s ease, transform 0.2s ease;
 }

 .submit-button:hover {
     background-color: #1f2937;
     transform: translateY(-2px);
 }

 .submit-button svg {
     width: 1.2rem;
     height: 1.2rem;
     color: #ffffff;
 }



 .trusted-section-container {
     max-width: 1200px;
     width: 100%;
     background-color: #f8f8f8;
     padding: 2rem 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 2rem;
     text-align: center;
     position: relative;
     overflow: hidden;
     margin: 0 auto;
 }

 @media (min-width: 1024px) {
     .trusted-section-container {
         flex-direction: row;
         justify-content: space-between;
         padding: 2rem 1.5rem;
         /* Added horizontal padding for desktop layout */
     }
 }

 .logos-slider-container {
     width: 100%;
     overflow: hidden;
     position: relative;
 }

 .logos-wrapper {
     display: flex;
     /* Changed to flex for better control over children layout */
     width: max-content;
     /* Allows the flex container to naturally expand to fit all content */
     animation: slide-right-to-left 30s linear infinite;
     animation-play-state: running;
 }

 .logo-item {
     flex-shrink: 0;
     /* Prevents logo items from shrinking within the flex container */
     margin: 0 40px;
     /* Space between logos */
     vertical-align: middle;
     /* Align images nicely */
 }

 .logo-item img {
     height: 40px;
     width: auto;
     opacity: 0.7;
     filter: grayscale(100%);
     transition: opacity 0.3s ease, filter 0.3s ease;
 }

 .logo-item img:hover {
     opacity: 1;
     filter: grayscale(0%);
 }

 /* Keyframes for the infinite right-to-left sliding animation */
 @keyframes slide-right-to-left {
     0% {
         transform: translateX(0%);
     }

     100% {
         /* Translates the wrapper by 50% of its own width. Since the content is duplicated,
           this effectively moves one full set of logos, creating a seamless loop. */
         transform: translateX(-50%);
     }
 }

 .description-text {
     font-size: 1.25rem;
     font-weight: 600;
     color: #111827;
     line-height: 1.5;
     flex-shrink: 0;
     max-width: 300px;
     text-align: center;
     padding: 0 1.5rem;
     /* Added padding to ensure spacing on smaller screens */
 }

 @media (min-width: 1024px) {
     .description-text {
         text-align: right;
     }
 }




 .map-section {
     padding: 40px 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #fff;
 }

 .map-container {
     width: 90%;
     max-width: 1200px;
     height: 600px;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
     transition: height 0.3s ease;
 }

 .map-container iframe {
     width: 100%;
     height: 100%;
     border: none;
 }

 /* MEDIA QUERIES */
 @media (max-width: 1024px) {
     .map-container {
         height: 500px;
     }
 }

 @media (max-width: 768px) {
     .map-container {
         height: 400px;
     }
 }

 @media (max-width: 480px) {
     .map-container {
         height: 300px;
         border-radius: 10px;
     }
 }