:root {
    --primary-color: #e4620bf6;
    --primary-dark: #121418;
    --primary-light: #4a7bc8;
    --secondary-color: #6c757d;
    --accent-color: #00a8a8;
    --light-color: #f8f9fa;
    --dark-color: #212529;
    --gray-light: #e9ecef;
    --gray-medium: #adb5bd;
    --gray-dark: #495057;
    

    --font-main: 'Inter', poppins;
    --font-secondary: 'Source Sans Pro', sans-serif;
    
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);
    
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    --solution-row-h: 340px;
    --header-height: 4rem;
    --roi-card-bg: rgba(255,255,255,0.95);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

html {
    scroll-behavior: smooth;
    height: 100%;
    overflow-x: clip;
}

body {
    font-family: var(--font-main);
    color: var(--dark-color);
    line-height: 1.6;
    /* overflow-x: hidden !important; */
    min-height: 100vh;
    position: relative;
    overflow-x: clip;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.205)), 
        url('/content/img/bg-main.jpg');
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
    overflow-x: hidden !important;
}


.main-wrapper {
    position: relative;
    min-height: 100vh;
    background: rgba(255, 255, 255, 0.88); 
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* .container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    /*padding: 0 var(--spacing-sm);
} */

.section {
    /* padding: var(--spacing-md) 0; */
    width: 100%;
    position: relative;
    background: rgba(255, 255, 255, 0.952); 
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.3);  */
}

/* @keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-animate {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger-item {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.stagger-visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; } */

.approach {
    background: rgba(255, 255, 255, 0);
    /*padding: var(--spacing-xl) 0;*/
    overflow: visible;
}

.industries {
    background: rgba(248, 249, 250, 0.85);
}

.case-highlight {
    background: rgba(33, 37, 41, 0.92);
    color: white;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.process {
    background: rgba(255, 255, 255, 0.88);
}

.insights {
    background: rgba(255, 255, 255, 0);
    padding-bottom: var(--spacing-lg);
    /* padding: 20px; */
}

.cta {
    background: rgba(248, 249, 250, 0);
    /* padding: 50px; */
}

.footer {
    background: rgb(19, 19, 15);
    color: white;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

ul {
    list-style: none;
}

.btn {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
    font-family: var(--font-main);
        display: flex;
    align-items: center;
    justify-content: center;
}

.btn-spinner {
  margin-left: .5rem;
  width: 1em; height: 1em;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.visually-hidden { position:absolute!important; clip:rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border: none;
    /* padding: 10px 20px; */
    font-weight: 600;
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary1 {
    background: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    padding: 10px 20px;
    justify-content: flex-end;
    margin-left: auto;
}

.btn-secondary1:hover {
    background: var(--primary-color);
    color: white;
}
.btn-secondary {
    background: transparent;
    border: 2px solid var(linear-gradient(135deg, var(--primary-color), var(--primary-dark)));
    /* color: var(--primary-color); */
    padding: 10px 20px;
    gap: 1rem;
}

.btn-secondary:hover {
    background: var(--primary-color);
    color: white;
}
.btn-large {
    /* padding: var(--spacing-sm) var(--spacing-lg); */
    font-size: 1.1rem;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
}

.section-description {
    font-size: 1.1rem;
    color: var(--gray-dark);
    max-width: 700px;
    margin: 0 auto;
}

/* Header*******************/
.header {
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 3px;
    top: 0;
    width: 100%;
    align-items: center;
    height: 4.0rem;
    background: rgba(255, 255, 255, 0.507);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: var(--shadow-sm);
    z-index: 999999;
    transition: all var(--transition-normal);
    padding: 0 var(--spacing-sm);
    /* transform: none !important; */
}


.header.scrolled {
    /* padding-top: 5px;
    padding-bottom: 5px; */
    /* height:2rem;
    padding: 25px; */
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: var(--shadow-md);
    transform: none !important;
    position: fixed;
    display: flex;
    z-index: 999999;
    height: 4.0rem;
} 

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    transition: padding var(--transition-normal);
    width: 100%;
    margin: 0 auto;
    padding-left: 0;
    padding-right: var(--spacing-md);
}

/* .header.scrolled .header-content {
    padding: 0.8rem var(--spacing-md);
} */


.logo {
    margin-left: 0; 
    padding-left: var(--spacing-md); 
}

.logo a {
    display: flex;
    align-items: center;
}

/*.logo-img {
    height: auto;
    width: auto;
    max-height: 55px;
    display: block;
    transition: max-height var(--transition-normal);
}*/

/* .header.scrolled .logo-img {
    max-height: 45px;
} 
.header.scrolled .logo-img {
    height: 2rem; /* Even smaller when scrolled 
}*/
.logo-highlight {
    color: var(--primary-color);
}

/* Navigation NEW ***************/
.navnbar-wrapper{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0;
    position: relative;
    /* margin: 5px;
    padding-right: 20px; */
}
.logo-wrapper {
    flex: 0 0 auto;
    text-align: left;
    display: flex;
    align-items: center;
}

.logo-img{
    width: auto;
    height: 3.5rem; /* Reduced from 3rem */
    max-width: 180px; /* Limit maximum width */
    /* object-fit: contain; */
    transition: height var(--transition-normal);
}
.menus-wrapper{
    flex:0 0 auto;
    display: flex;
    text-align: left;
}

/* Navigation ***************/
.nav-list {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    /* justify-content: space-around; */
    justify-content: flex-start;
}

.nav-link {
    font-weight: 600;
    color: var(--gray-dark);
    padding: var(--spacing-xs) 0;
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.nav-link:hover,
.nav-link:focus-visible {
    color: var(--primary-color);
    outline: none;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width var(--transition-normal);
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-item.active > .nav-link::after {
    width: 100%;
}

/* Dropdown Menus ************/
.nav-item.has-dropdown {
    position: relative;
}

.dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
    z-index: 100;
}

.nav-item.has-dropdown:hover > .dropdown,
.nav-item.has-dropdown:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.nav-list > .nav-item.has-dropdown:nth-last-child(-n + 2) .dropdown {
  left: auto !important;
  right: 0 !important;           /* anchor to the right so it doesn't overflow right side */
}

/* ensure the position stays consistent on hover/focus */
.nav-list > .nav-item.has-dropdown:nth-last-child(-n + 2):hover .dropdown,
.nav-list > .nav-item.has-dropdown:nth-last-child(-n + 2):focus-within .dropdown {
  left: auto !important;
  right: 0 !important;
  transform: translateY(0) !important;
}

.dropdown-item {
    position: relative;
    display: block;
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--gray-dark);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
    text-decoration: none;
    white-space: nowrap;
    text-decoration: none;
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
    color: var(--primary-color);
    background-color: rgba(253, 252, 251, 0);
    outline: none;
}

.dropdown-item::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: var(--spacing-sm);
    right: var(--spacing-sm);
    height: 2px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-normal);
}

.dropdown-item:hover::after,
.dropdown-item:focus-visible::after,
.dropdown-item.active::after {
    transform: scaleX(1);
}

.dropdown .has-submenu {
    position: relative;
}

.dropdown .submenu {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
    z-index: 1001;
    pointer-events: none;
}

.dropdown .has-submenu:hover > .submenu,
.dropdown .has-submenu:focus-within > .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: all;
}
.nav-list > .nav-item.has-dropdown:last-child .dropdown,
.nav-list > .nav-item.has-dropdown:nth-last-child(2) .dropdown {
    left: auto;
    right: 0;
}

.nav-list > .nav-item.has-dropdown:last-child .submenu,
.nav-list > .nav-item.has-dropdown:nth-last-child(2) .submenu {
    left: auto;
    right: 100%;
}

/* Caret icon rotation *****************/
.nav-item.has-dropdown > .nav-link .chev,
.dropdown .has-submenu > .dropdown-item .chev {
    transition: transform var(--transition-normal);
}

.nav-item.has-dropdown:hover > .nav-link .chev,
.nav-item.has-dropdown:focus-within > .nav-link .chev,
.dropdown .has-submenu:hover > .dropdown-item .chev,
.dropdown .has-submenu:focus-within > .dropdown-item .chev {
    transform: rotate(180deg);
}

.mobile-menu-toggle {
    display: none; /* Hidden by default on desktop */
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    z-index: 9999;
    margin-left: auto;
    padding: 0;
    opacity: 1 !important; /* Force visibility when displayed */
    visibility: visible !important;
    position: relative;
    color: #000 !important;
}
.mobile-menu-toggle :hover{
    color: var(--primary-color);
}
/* Hero Section ************************/
.hero {
    position: relative;
    width: 100%;
    min-height: 100vh;
    /* overflow: hidden; */
    background: rgba(255, 255, 255, 0.95);
    /* backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px); */
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 50px;
    /* margin-top: 20px; */
    /* padding-top: 4rem; */
}

.hero-bg {
    position: absolute;
    inset: 0;
    /* z-index: -1; */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.007), rgba(255, 255, 255, 0)),
        url('/content/img/hero_bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    
    filter: brightness(1.1) contrast(0.9);
    opacity: 1;
}

.hero-content {
    /* display: block; */
    /* margin-top: 100px; */
    position: relative;
    z-index: 2;
    text-align: center;
}
.hero-card {
    /*max-width: clamp(50px, 48vw, 100%);
    box-shadow: var(--shadow-xl);
    border: 1px solid rgba(15, 23, 42, 0.1);
    background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);*/
    
    display: flex;
    flex-direction: column;
    min-height: 520px;
    color: var(--dark-color);
    padding: clamp(50px, 3.5vw, 32px);
    border-radius: var(--radius-lg);
    position: relative;

    /* margin-top: 100px; */
}
.hero .container {
    width: 100%;
    margin: 0px;
    min-height: calc(100vh - 4rem);
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.hero-title {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
    margin: 0 0 var(--spacing-sm);
    color: var(--primary-color);
    margin-left: auto;
    margin-right: auto;
}

.hero-subtitle {
    font-size: 2.5rem;
    color: var(--gray-light);
    margin: 0 0 var(--spacing-lg);
    text-shadow: 2px 2px #131212;
    margin-left: auto;
    margin-right: auto;
}

.hero-cta {
    /* display: flex; */
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    
    margin-top: auto;       /* pushes CTA to bottom */
    padding-top: 2rem;      /* visual spacing from text */
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
}

.btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* padding: 12px 18px; */
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    font-weight: 700;
    border: none;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(238, 126, 52, 0.25);
    background: color-mix(in oklab, var(--primary-color) 92%, black);
}

.link-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-dark);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: color 180ms ease, border-color 180ms ease;
}

.link-secondary:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Cards Container *********************/
.cards-container {
    display: flex !important;
    height: 100%; 
    width: 100%;
    position: relative;
    gap: var(--spacing-md); 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: stretch; 
    margin-bottom: var(--spacing-md);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.cards-container::-webkit-scrollbar {
    height: 8px;
}
.cards-container::-webkit-scrollbar-track {
    background: var(--gray-light);
    border-radius: 4px;
}

.cards-container::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 4px;
}

.card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-xl);
    flex: 0 0 calc(25% - var(--spacing-md));
    min-width: 250px; /* Minimum card width */
    max-width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: flex-start;
    text-align: left;
    position: relative;
    overflow: hidden;
    margin: 0;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    color: var(--dark-color);
    opacity: 1; 
    transform: scale(1); 
    transition: all var(--transition-normal);
    /* margin-bottom: var(--spacing-sm); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: var(--card-bg);
}
.card.active {
    opacity: 1;
    transform: scale(1);
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
                rgba(0, 0, 0, 0.6) 0%, 
                rgba(0, 0, 0, 0.4) 50%,
                rgba(0, 0, 0, 0.6) 100%);
    z-index: 1;
    transition: background var(--transition-normal);
}
.card.active::before {
    background: linear-gradient(135deg, 
                rgba(0, 0, 0, 0.5) 0%, 
                rgba(0, 0, 0, 0.2) 50%,
                rgba(0, 0, 0, 0.5) 100%);
}

.card:hover::before {
    background: rgba(0, 0, 0, 0.2);
}
.card > * {
    position: relative;
    z-index: 2;
    transform: translateY(0); 
    opacity: 1; 
    transition: transform var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1),
                opacity var(--transition-slow) cubic-bezier(0.4, 0, 0.2, 1);
}

.card:not(.active) > * {
    transform: translateY(30px);
    opacity: 0;
}

.card.active > * {
    transform: translateY(0);
    opacity: 1;
}

.card:hover {
    transform: translateY(-30px);
    box-shadow: var(--shadow-xl);

}

.card-icon {
    width: 100px; 
    height: 100px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    color: white;
    font-size: 2.5rem;
    transition: all var(--transition-normal);
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 10px 30px rgba(238, 126, 52, 0.3);
}

.card.active .card-icon {
    transform: scale(1.15) translateY(-5px);
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 15px 40px rgba(238, 126, 52, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
}

.card.active .card-title {
    transition-delay: 0.3s;
}
.card.active .card-description {
    transition-delay: 0.4s;
}
.card:hover .card-icon {
    transform: scale(1.1);
    /* background-color: var(--primary-dark); */
    box-shadow: 0 15px 40px rgba(238, 126, 52, 0.4);
}
.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    
}

.card-description {
    font-size: 1rem;
    color: white;
    line-height: 1.6;
    flex-grow: 1; 
}
.card-list {
    margin-top: 0rem;
    padding-left: 0;
    list-style: none;
}

.card-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.6rem;
    font-size: 1rem;
    color: #f1f1f1;
}

.card-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-size: 1.2rem;
    line-height: 1;
    top: 0.2rem;
}

.card:not(.active) .card-icon,
.card:not(.active) .card-title,
.card:not(.active) .card-description {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.card.active .card-icon,
.card.active .card-title,
.card.active .card-description {
    opacity: 1 !important; 
    transform: translateY(0) !important;
}

.card.active .card-icon {
    transition-delay: 0.2s;
}

.card.active .card-title {
    transition-delay: 0.3s;
}

.card.active .card-description {
    transition-delay: 0.4s;
}

.card:hover {
    transform: scale(0.98);
}
.card.active:hover {
    transform: scale(1.02);
}

.cards-container .card:first-child {
    opacity: 1;
    transform: scale(1);
}

.nav-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    border: 2px solid var(--primary-color);
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    padding: 0;
}


.nav-dot:hover {
    background: rgba(238, 126, 52, 0.3);
    transform: scale(1.2);
}
.nav-dot.active {
    background: var(--primary-color);
    transform: scale(1.3);
    box-shadow: 0 0 0 4px rgba(238, 126, 52, 0.2);
}

.nav-dot.active::after {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.card-nav-btn {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
    font-size: 1.8rem;
    color: var(--primary-color);
    pointer-events: all;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}


.card-nav-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
    box-shadow: var(--shadow-xl);
}


.card-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: scale(0.9);
}

.card-nav-btn:disabled:hover {
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
    transform: scale(0.9);
}


/* Auto-play indicator ****************/
.auto-play-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
    color: var(--gray-dark);
    font-size: 0.9rem;
}

.auto-play-toggle {
    width: 40px;
    height: 20px;
    background: var(--gray-light);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
}
.auto-play-toggle.active {
    background: var(--primary-color);
}

.auto-play-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform var(--transition-normal);
}

.auto-play-toggle.active::after {
    transform: translateX(20px);
}

.cards-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* margin: var(--spacing-lg) 0; */
}

.cards-nav-arrows,
.cards-nav-dots,
.auto-play-indicator {
    display: none !important;
}
.cards-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 10;
}
.card-nav-btn {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
    font-size: 1.5rem;
    color: var(--primary-color);
    pointer-events: all;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    margin: 0 var(--spacing-md);
}
.card-nav-btn:hover {
    background: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.card-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Industries Section ********************/
.industries-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
}

.industry-item {
    text-align: center;
    max-width: 300px;
}
.industry-solution{
    padding-bottom: 20px;
}
.industry-solutions i{
    color:var(--primary-dark);
    font-size: x-large;
    padding: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.industry-icon {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    color: var(--primary-color);
    font-size: 2.5rem;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.industry-item:hover .industry-icon {
    transform: scale(1.1);
    background-color: var(--primary-color);
    color: white;
}

.industry-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--dark-color);
}

.industry-list {
    text-align: left;
}

.industry-list li {
    padding: var(--spacing-xs) 0;
    color: var(--gray-dark);
    position: relative;
    padding-left: var(--spacing-md);
}

.industry-list li::before {
    content: '•';
    color: var(--primary-color);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Case Highlight ******************/
.case-highlight .case-title {
    color: white;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.case-description {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-lg);
    opacity: 0.9;
}

.case-results {
    margin-bottom: var(--spacing-lg);
}

.case-results li {
    padding: var(--spacing-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.case-results i {
    color: var(--accent-color);
}

/* Process Section ******************/
.process-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-md);
}

.process-phase {
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    text-align: left;
    flex: 1;
    max-width: 100%;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.process-phase::before {
    content: none;
}
.process-phase:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    background: rgba(255, 255, 255, 0.95);
}

.phase-number {
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto var(--spacing-sm);
}

.phase-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: var(--dark-color);
}

.phase-subtitle {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.phase-description {
    color: var(--gray-dark);
    font-size: 0.95rem;
}

.process-arrow {
    font-size: 1.5rem;
    color: var(--primary-color);
}

/* Insights Section ***********************/
.insights-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.insight-card {
    border-radius: var(--radius-lg);

    transition: all var(--transition-normal);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    opacity: 1;
    transform: translateY(22px);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    height: 100%; 
    
    position: relative; 
    overflow: hidden;

}

.insight-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
  background-size: 200% 100%;
  animation: gradient-pan 3s linear infinite paused;
  z-index: 1;
}

.insight-card:hover::after,
.insight-card:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}

.insight-card:hover {
    transform: translateY(-10px);
    /*box-shadow: var(--shadow-xl);
    background: rgba(255, 255, 255, 0.95);*/
}

.insight-image-home {
    height: 200px;
    overflow: hidden;
}

.image-placeholder.small {
    height: 100%;
    border-radius: 0;
}

.insight-content-home {
    padding: var(--spacing-lg);
    
    display: flex;
    flex-direction: column;
    flex-grow: 1;

}

.insight-category-home {
    display: inline-block;
    background: rgba(248, 249, 250, 0.8);
    color: var(--primary-color);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.insight-title-home {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--dark-color);
}

.insight-description {
    color: var(--gray-dark);
    margin-bottom: var(--spacing-md);
}

.insight-link {
    color: var(--primary-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
}

.insight-link:hover {
    color: var(--primary-dark);
    gap: 8px;
}

/* CTA Section **********************/
.cta-content {
    text-align: center;
}

.cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--dark-color);
}

.cta-description {
    font-size: 1.1rem;
    color: var(--gray-dark);
    margin-bottom: var(--spacing-xl);
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.cta-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    /* padding: 20px; */
}

.cta-step {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally */
    text-align: center; /* Center text */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.cta-step::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.cta-step:hover::after,
.cta-step:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.step-number {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto var(--spacing-md); /* Center horizontally with auto margins */
    flex-shrink: 0;
}

.step-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    width: 100%;
}

.step-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: var(--primary-color);
    text-align: center;
}

.step-description {
    color: var(--gray-dark);
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

.step-link {
    display: inline-block;
    color: var(--primary-color);
    font-weight: 600;
    padding: 4px 0;
    text-align: center;
    margin-top: auto;
}

.step-link:hover {
    color: var(--primary-dark);
}

.step-links {
        display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center; /* Center the links */
    width: 100%;
}
.step-links .step-link {
    display: block;
    text-align: center;
}
/* Footer ********************/
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    padding-top: var(--spacing-md);
    /* padding-left: var(--spacing-lg); */
    margin-bottom: var(--spacing-sm);
}

.footer-logo .logo-text {
    font-size: 1.8rem;
    color: white;
}

.footer-description {
    opacity: 0.8;
    margin-top: var(--spacing-sm);
    max-width: 400px;
}

.footer-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: white;
}

.footer-links li {
    margin-bottom: var(--spacing-xs);
}

.footer-links a {
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.footer-links a:hover {
    opacity: 1;
    color: white;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    opacity: 0.8;
}

.footer-contact i {
    color: var(--primary-color);
    margin-top: 4px;
}

.footer-bottom {
    border-top: 1px solid rgba(250, 143, 4, 0.925);
    text-align: center;
}

.copyright {
    opacity: 0.7;
    font-size: 0.9rem;
    margin: 10px 0 10px;
    /*padding-bottom: 15px;*/

}

/* Scroll-to-top button *********************/
.scroll-to-top {
    position: fixed;
    bottom: 30px !important; /* Keep at bottom */
    right: 30px !important;
    z-index: 999 !important;
    width: 50px;
    height: 50px;
    background: rgba(238, 126, 52, 0.9);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-normal);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: rgba(30, 58, 107, 0.9);
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

/* Image placeholders *************/
.image-placeholder {
    width: 100%;
    background: linear-gradient(135deg, var(--gray-light), var(--gray-medium));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-dark);
    position: relative;
    overflow: hidden;
}

.image-placeholder::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.3) 50%, transparent 70%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.image-placeholder.dark {
    background: linear-gradient(135deg, var(--dark-color), var(--primary-dark));
    color: white;
}

.image-placeholder.small {
    height: 200px;
}

.placeholder-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.placeholder-content i {
    font-size: 3rem;
    margin-bottom: var(--spacing-xs);
}

/* Services Page Styles *******************/
/* Services Page Specific Styles */
.services-main {
    padding: var(--spacing-xl) 0;
    background: transparent; /* Remove background so body background shows */
    min-height: 100vh;
    width: 100%;
}

.services-hero {
    text-align: center;
    padding: var(--spacing-xl) 0;
    margin-bottom: var(--spacing-xl);
    background: transparent; /* Make it transparent */
}

.services-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--dark-color);
    margin-bottom: var(--spacing-md);
}

.services-subtitle {
    font-size: 1.2rem;
    color: var(--gray-dark);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Service Section Styles - Fix visibility */
.service-section {
    background: rgba(255, 255, 255, 0.95); /* Semi-transparent white */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-lg);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--primary-color);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    opacity: 1; /* Ensure it's visible */
    visibility: visible; /* Ensure it's visible */
    min-height: 300px; /* Minimum height */
    display: block; /* Ensure block display */
    width: 100%;
    position: relative;
    z-index: 1;
}

.service-section:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    background: rgba(255, 255, 255, 0.98);
}

.service-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.service-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.service-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0;
}

.service-description {
    font-size: 1.1rem;
    color: var(--gray-dark);
    line-height: 1.8;
    margin-bottom: var(--spacing-md);
    opacity: 1;
}

.service-features {
    margin: var(--spacing-lg) 0;
    padding-left: var(--spacing-lg);
    opacity: 1;
}

.service-features li {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-sm);
    position: relative;
    line-height: 1.6;
    opacity: 1;
}

.service-features li strong {
    color: var(--primary-color);
    display: block;
    margin-bottom: 4px;
    font-size: 1.1rem;
}

.service-features li::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 10px;
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
}

.service-cta {
    margin-top: var(--spacing-lg);
    display: inline-block;
}

.services-cta {
    text-align: center;
    padding: var(--spacing-xl);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-xl);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.cta-description {
    font-size: 1.3rem;
    color: var(--gray-dark);
    margin-bottom: var(--spacing-lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 1;
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}


body {
    background: transparent;
}

.container {
    background: transparent;
    position: relative;
    
    z-index: 1;
    padding: 10px;
    /* margin-top: 50px; 
    margin-bottom: 50px;*/
}

.service-section.section-animate,
.services-cta.section-animate {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.service-section.stagger-item,
.services-cta.stagger-item {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ourSolutions Page Specific Styles */
.solutions-main {
    padding: var(--spacing-xl) 0;
    background: transparent;
    min-height: 100vh;
}

.solutions-hero {
    text-align: center;
    padding: var(--spacing-xl) 0;
    margin-bottom: var(--spacing-xl);
}

.solutions-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--dark-color);
    margin-bottom: var(--spacing-md);
}

.solutions-subtitle {
    font-size: 1.2rem;
    color: var(--gray-dark);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Solutions Grid */
.solutions-grid {
    display: grid;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

/* Business Outcome Sections */
.outcome-section {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(5px);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    box-shadow: var(--shadow-lg);
    border-top: 4px solid var(--primary-color);
    margin-bottom: var(--spacing-xl);
}

.outcome-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid rgba(238, 126, 52, 0.1);
}

.outcome-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.outcome-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-color);
    margin: 0;
}

.outcome-description {
    font-size: 1.1rem;
    color: var(--gray-dark);
    margin: var(--spacing-sm) 0;
}

/* Products Grid */
.products-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.product-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
    border-left: 4px solid var(--primary-color);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-left-color: var(--primary-dark);
}

.product-header {
    margin-bottom: var(--spacing-md);
}

.product-icon {
    width: 50px;
    height: 50px;
    background: var(--primary-color);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

.product-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: var(--spacing-xs);
}

.product-tagline {
    font-size: 1rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.product-description {
    font-size: 0.95rem;
    color: var(--gray-dark);
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: var(--spacing-md);
}

.product-features {
    margin: var(--spacing-md) 0;
    padding-left: var(--spacing-md);
}

.product-features li {
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    position: relative;
    font-size: 0.9rem;
    color: var(--gray-dark);
}

.product-features li::before {
    content: '✓';
    position: absolute;
    left: -1rem;
    color: var(--primary-color);
    font-weight: bold;
}

.product-actions {
    margin-top: auto;
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: all var(--transition-normal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

/* Consulting Sections */
.consulting-section {
    background: rgba(30, 58, 107, 0.05);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    margin: var(--spacing-xl) 0;
    border: 1px solid rgba(30, 58, 107, 0.1);
}

.consulting-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.consulting-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-dark);
    margin-bottom: var(--spacing-sm);
}

.consulting-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
}

.consulting-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-md);
}

.consulting-card h4 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    font-size: 1.3rem;
}

/* CTA Section */
.solutions-cta {
    text-align: center;
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, rgba(238, 126, 52, 0.1) 0%, rgba(30, 58, 107, 0.05) 100%);
    border-radius: var(--radius-xl);
    margin-top: var(--spacing-xl);
}
/* Enhanced Service/Solution Page Styles */
.enhanced-service-main,
.enhanced-solutions-main {
    
    background: transparent;
    min-height: 100vh;
}

.enhanced-hero {
    text-align: center;
    padding: var(--spacing-md) 0;
    /*margin-bottom: var(--spacing-xl);
    position: relative;
    background: #c9c1c113;*/
    overflow: hidden; 
}

.enhanced-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));*/
    z-index: -1;
}

.enhanced-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--dark-color);
    margin-bottom: var(--spacing-md);
    animation: fadeUp 0.8s ease-out;
}

.enhanced-subtitle {
    font-size: 1.2rem;
    color: var(--gray-dark);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
    animation: fadeUp 0.8s ease-out 0.2s both;
}

/* Split Layout Sections */
.split-section {
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    opacity: 0;
    border: none;
    transition: opacity 0.8s ease, transform 0.8s ease;
    width: 100%;
}

.split-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.split-section.alternate {
    border-left: none;
    /*border-right:var(--primary-color);*/
}

/* ======ourservices.html==========================================*/
.enhanced-hero-ourservice{
     position: relative;
    width: 100vw;                 /* Full viewport width */
    margin-left: calc(50% - 50vw); /* Break out of container */
    
    min-height: 60vh;            /* Full screen height (optional) */
    height: 70vh;
    background-image: url('/content/hero-images/our-services.jpg');
    background-size: cover;       /* Cover entire section */
    background-position: center;  /* Keep image centered */
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    padding: 0 20px;
}
.split-content-ourservice {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* Equal columns for image and content */
    gap: var(--spacing-sm);
    align-items: start;
    position: relative;
}
.split-section-ourservice .split-header-ourservice,
.split-section-ourservice .split-description-ourservice {
    grid-column: 1 / -1;  /* Span both columns */
}
/* Left Image Styling */
.split-image-ourservice {
    grid-column: 1 / 2;
    /* height: 100%;
    min-height: 400px; 
    align-items: center;
    display: flex;
    justify-content: center;*/
    max-height: 600px;
    background-size: cover;
    overflow: hidden;
    border-radius: var(--radius-xl);
    /*box-shadow: var(--shadow-lg);*/
    transition: all var(--transition-normal);
    position: relative;
    align-self: start;
    display: flex;
    max-height: clamp(240px, 40vh, 460px);
}
.split-image-ourservice::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: linear-gradient(135deg, rgba(238, 126, 52, 0.1), rgba(30, 58, 107, 0.1));*/
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
    border-radius: var(--radius-xl);
}

.split-image-ourservice:hover::after {
    opacity: 1;
}

.split-image-container-ourservice {
    height: 100%;
    display: flex;
    align-items: top;
    justify-content: center;
}
.split-image-ourservice img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 100%; 
    transition: transform 0.8s ease;

}

/* Right Content Styling - Dominant Area */
.split-text-ourservice {
    /*background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(238, 126, 52, 0.15);
    height: 100%;*/
    grid-column: 2 / 3;  
    display: flex;
    flex-direction: column;
    padding: 0;
}

.split-text-content-ourservice {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.split-header-ourservice {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    
    /* border-bottom: 4px solid rgba(238, 126, 52, 0.37); 
    margin-bottom: var(--spacing-sm);*/
}
.split-icon-ourservice {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    box-shadow: 0 8px 25px rgba(238, 126, 52, 0.3);
    flex-shrink: 0;
    /* animation: pulse 2s infinite; */
}

.split-title-ourservice {
    font-size: 2.3rem;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0;
    line-height: 1.2;
    border-bottom: 4px solid rgba(238, 126, 52, 0.37);
}

.split-description-ourservice {
    font-size: 1.15rem;
    color: var(--gray-dark);
    line-height: 1.7;
    /*padding: 0 0 var(--spacing-md) 0;*/
    margin-bottom: var(--spacing-sm);
    grid-column: 1 / -1;  /* Explicitly span both columns */
}

.split-description-ourservice::before {
    /*content: '"';*/
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 4rem;
    color: var(--primary-color);
    opacity: 0.1;
    font-family: serif;
    line-height: 1;
}

/* Enhanced Feature Cards Grid */
.features-cards-container-ourservice {   
    display: flex;
    flex-wrap: wrap;                 /* the “wrap” you asked for */
    gap: var(--spacing-md);
    align-items: stretch;
    justify-content: space-around;
}

.feature-card-ourservice {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 100%;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    height: auto; 
    flex: 1 1 260px;          
    display: flex;    
    min-width: 340px;
    max-width: 100%;
}

.feature-card-ourservice:nth-last-child(1):nth-child(odd) {
  flex-basis: 100%;                
}

.feature-card-ourservice .feature-card-description-ourservice {
  flex: 1 1 auto;                  /* grow to equalize card heights */
}

.feature-card-ourservice:nth-last-child(1):nth-child(odd) {
  flex-basis: 100%;
}


.feature-card-ourservice::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(238, 126, 52, 0.03), rgba(30, 58, 107, 0.02));
    z-index: 0;
}

.feature-card-ourservice::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.feature-card-ourservice:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: rgba(238, 126, 52, 0.3);
    background: rgba(255, 255, 255, 0.25);
}

.feature-card-ourservice:hover::after {
    transform: scaleX(1);
}

.feature-card-header-ourservice {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    position: relative;
    z-index: 1;
    
}

.feature-card-header-ourservice i {
    color: var(--primary-color);
    font-size: 1.8rem;
    background: linear-gradient(135deg, rgba(238, 126, 52, 0.1), rgba(30, 58, 107, 0.05));
    width: 55px;
    height: 55px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.feature-card-ourservice:hover .feature-card-header i {
    transform: scale(1.1) rotate(5deg);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
}

.feature-card-header-ourservice h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    line-height: 1.3;
    flex: 1;
}

.feature-card-description-ourservice {
    font-size: 0.95rem;
    color: var(--gray-dark);
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 1;
    flex-grow: 1;
    text-align: justify;
}
.split-section-ourservice.alternate .split-content-ourservice {
    grid-template-columns: 1fr 1fr;
}

.split-section-ourservice.alternate .split-image-ourservice {
    grid-column: 2 / 3;  /* Move image to right column */
    order: 2;
}

.split-section-ourservice.alternate .split-text-ourservice {
    grid-column: 1 / 2;  /* Move content to left column */
    order: 1;
}

.split-section-ourservice.alternate .split-header-ourservice,
.split-section-ourservice.alternate .split-description-ourservice {
    grid-column: 1 / -1;  /* Still span full width */
    order: 0;
}

/* CTA Button Styling */
.split-cta-container-ourservice {
    margin-top: auto;
    padding-top: var(--spacing-lg);
    border-top: 2px solid rgba(238, 126, 52, 0.1);
    display: flex;
    justify-content: center;
}

.split-cta-ourservice {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
    border-radius: var(--radius-lg);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-decoration: none;
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(238, 126, 52, 0.3);
}

.split-cta-ourservice::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.split-cta-ourservice:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 20px 40px rgba(238, 126, 52, 0.4);
    color: white;
}

.split-cta-ourservice:hover::before {
    left: 100%;
}

.split-cta-ourservice i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.split-cta-ourservice:hover i {
    transform: translateX(5px);
}


/* Animation for staggered card appearance */
@keyframes cardSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.feature-card-ourservice {
    animation: cardSlideIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    opacity: 0;
}


.feature-card-ourservice:nth-child(1) { animation-delay: 0.1s; }
.feature-card-ourservice:nth-child(2) { animation-delay: 0.2s; }
.feature-card-ourservice:nth-child(3) { animation-delay: 0.3s; }
.feature-card-ourservice:nth-child(4) { animation-delay: 0.4s; }
.feature-card-ourservice:nth-child(5) { animation-delay: 0.5s; }
.feature-card-ourservice:nth-child(6) { animation-delay: 0.6s; }

.split-section-ourservice {
    margin-bottom: var(--spacing-xl);
    margin-top: 10px;
    position: relative;
}

/* Add subtle pattern overlay to cards */
.feature-card-ourservice {
    background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    background-size: 30px 30px;
}

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


/* Enhanced Product Cards */
.enhanced-products-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(auto, 1fr));
    gap: var(--spacing-lg);
    /*margin-top: var(--spacing-lg);*/
    align-items: stretch;
}

.product-image {
    height: 200px;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Enhanced CTA Section */
.enhanced-cta {
    text-align: center;
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);/*
    margin-top: var(--spacing-xl);
    background: linear-gradient(135deg, rgba(238, 126, 52, 0.1) 0%, rgba(30, 58, 107, 0.05) 100%);*/
    opacity: 1 !important;
    transform: translateY(30px);
    transition: opacity 0.8s ease 0.4s, transform 0.8s ease 0.4s;
    width: 100%;
    visibility: visible !important;
}

.enhanced-cta.visible {
    opacity: 1;
    transform: translateY(0);
}

.enhanced-cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.enhanced-cta-description {
    font-size: 1.2rem;
    color: var(--gray-dark);
    margin-bottom: var(--spacing-lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.enhanced-cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.enhanced-cta-buttons .btn {
    box-sizing: border-box;
    flex: 0 0 auto;                /* do NOT stretch arbitrarily */
    max-width: 100%;               /* never exceed container */
    white-space: normal;           /* <-- allow wrapping */
    line-height: 1.2;              /* nicer multi-line rhythm */
    overflow-wrap: anywhere;       /* prevent overflow on long words */
    text-align: center;
    padding: 10px 16px;

}

/* Enhanced CTA Section Animation */

/* Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.split-image {
    animation: fadeInLeft 1s ease-out;
}

.split-section.alternate .split-image {
    /*border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    order: 2;
    -webkit-mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 1) 60%,
        rgba(0, 0, 0, 0.9) 65%,
        rgba(0, 0, 0, 0.7) 70%,
        rgba(0, 0, 0, 0.5) 75%,
        rgba(0, 0, 0, 0.3) 80%,
        rgba(0, 0, 0, 0.1) 85%,
        rgba(0, 0, 0, 0) 90%
    );
    mask-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 1) 60%,
        rgba(0, 0, 0, 0.9) 65%,
        rgba(0, 0, 0, 0.7) 70%,
        rgba(0, 0, 0, 0.5) 75%,
        rgba(0, 0, 0, 0.3) 80%,
        rgba(0, 0, 0, 0.1) 85%,
        rgba(0, 0, 0, 0) 90%
    );*/
}

.split-text {
    animation: fadeInRight 1s ease-out 0.2s both;
}

.split-section.alternate .split-text {
    animation: fadeInLeft 1s ease-out 0.2s both;
}

/*   industries PAGE SPECIFIC STYLES - start   ============================================ */
.enhanced-hero-industries{
    position: relative;
    width: 100vw;                 /* Full viewport width */
    margin-left: calc(50% - 50vw); /* Break out of container */
    
    min-height: 60vh;            /* Full screen height (optional) */
    height: 70vh;            /* Full screen height (optional) */
    
    background-image: url('/content/hero-images/industrie-expertise.jpg');
    background-size: cover;       /* Cover entire section */
    background-position: center;  /* Keep image centered */
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    padding: 0 20px;
}
/* Fix for split-features to show only tick mark */
.split-features-industries {
    list-style: none !important;
    padding-left: var(--spacing-md) !important;
    margin: var(--spacing-md) 0 !important;
}

.split-features-industries li {
    margin-bottom: var(--spacing-sm);
    padding-left: 2rem;
    position: relative;
    line-height: 1.6;
    color: var(--gray-dark);
}

.split-features-industries li::before {
    content: "✓" !important;
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.1rem;
    background: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    top: 0.2rem !important;
    animation: none !important;
}

/* Remove any conflicting bullet styles */
.split-features-industries li strong {
    color: var(--primary-color);
    display: block;
    margin-bottom: 4px;
    font-size: 1.1rem;
}
.split-header-industries{
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 3px solid(--primary-color);
    margin-bottom: 20px;
    margin-top: 20px;
}
/* Industry Challenges Cards */
.industry-challenge-cards-industries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.challenge-card-industries {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-lg);
    background-size: 30px 30px;
    background-size: auto;
    padding: var(--spacing-md);
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.challenge-card-industries:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(238, 126, 52, 0.3);
    box-shadow: var(--shadow-lg);
}
.challenge-card-industries::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.challenge-card-industries:hover::after,
.challenge-card-industries:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.challenge-card-industries i {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 0;

}

.challenge-card-industries h4 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
    font-size: 1.1rem;
}
.challenge-card-header-industries {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    width: 100%;
}
.split-title-industries{
    color: var(--primary-color);
    border-bottom: 4px solid rgba(238, 126, 52, 0.37);
    font-size: 2rem;
}
.split-description-industries{
    color: var(--gray-dark);
    font-size: 1.15rem;
}
.challenge-card-industries p{
    color: var(--gray-dark);
}
/* Solution Cards */
.solution-cards-industries {
    display: flex;
    
    flex-wrap: wrap;            /* allows wrapping on small screens */
    gap: var(--spacing-md, 16px);
    align-items: stretch;
    /* display: grid;
    gap: var(--spacing-md, 16px); 
    margin: var(--spacing-lg) 0;*/
}

.solution-cards-industries .solution-card-industries {
  flex: 1 1 280px;            /* grow, shrink, base width 280px */
  max-width: 360px;           /* optional: prevent cards from getting too wide */
  display: flex;
  flex-direction: column;
}

.solution-card-link {
  display: block;              /* anchor becomes block */
  text-decoration: none;       /* no underline for the whole card */
  color: inherit;              /* inherit text color */
}

.solution-card-industries {
    display: flex;
    flex-wrap: wrap;               /* allows us to push the paragraph to a new line */
    align-items: center;           /* vertically center icon & title on the first row */
    column-gap: 10px;              /* space between icon and title */
    row-gap: 8px;  
    padding: 16px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-lg);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    min-height: 100px;
    outline: none; 
    position: relative;
    overflow: hidden;
}
.solution-card-industries::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.solution-card-industries:hover::after,
.solution-card-industries:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.solution-card-industries > i {
    
    order: 0;
    flex: 0 0 auto;                /* don't grow/shrink; keep natural width */
    font-size: 1.25rem;
    color: var(--primary-color)

}

.solution-card-industries > .solution-title,
.solution-card-industries > span { /* fallback: some cards use <span> without .solution-title */
    grid-column: 2;
    grid-row: 1;
    font-weight: 600;
    line-height: 1.2;
}

.solution-card-industries > p,
.solution-card-industries > .solution-desc { /* supports both raw <p> and .solution-desc */     
    order: 2;
    flex: 1 1 100%;                /* occupy full width on a new line */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .25s ease;
    margin: 0;

}

/* .solution-card-industries:hover > p,
.solution-card-industries:focus-visible > p,
.solution-card-industries:hover > .solution-desc,
.solution-card-industries:focus-visible > .solution-desc {
  max-height: 240px; /* adjust if you have longer text 
  opacity: 1;
} */

.solution-card-link:focus-visible .solution-card-industries,
.solution-card-link:hover .solution-card-industries {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  border-color: rgba(0,0,0,.10);
}

/* Title always visible */
.solution-card-industries .solution-title {
  font-weight: 600;
  line-height: 1.2;
}

/* Paragraph hidden by default, appears on hover/focus */
/* .solution-card-industries .solution-desc {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .25s ease, opacity .25s ease;
} */

/* reveal on hover and keyboard focus */
/* .solution-card-link:hover .solution-desc,
.solution-card-link:focus-visible .solution-desc,
.solution-card-industries:focus-visible .solution-desc {
  max-height: 200px; /* enough for two lines; adjust as needed 
  width: 250px;
  opacity: 1;
} */
.solution-card-industries > p,
.solution-card-industries > .solution-desc,
.solution-card-industries .solution-desc {
    max-height: none;
    opacity: 1;
    overflow: visible;
}
/* Optional: icon spacing */
.solution-card-industries i {
  font-size: 1.25rem;
  color: var(--primary-color);
}

/* Keyboard focus ring on the link container for accessibility */
.solution-card-link:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 4px;
  border-radius: 12px;
}

.solution-card-industries p{
    margin-left: var(--spacing-md);
}
.solution-card-industries:hover, 
.solution-card-industries:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}


.solution-card-industries {
  transition: transform .2s ease, box-shadow .2s ease;
}

/* .solution-card-industries i {
    color: var(--primary-color);
    font-size: 2rem;
    margin-right: 10px;
    /*gap: 50px;
    margin-bottom: var(--spacing-sm);
} */

.solution-card-industries span {
    display: block;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1rem;
}

/* Trust Solutions Cards */
.trust-solutions-cards-industries {
    display: grid;
    grid-template-columns:2fr 1fr;
    gap: var(--spacing-md);
    align-items: stretch;
}

.trust-card-industries {
    background: rgba(255, 255, 255, 0.15);
    background-size: auto;
    background-size: auto;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    background-size: 30px 30px;
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: all var(--transition-normal);
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.trust-card-industries::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.trust-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}
.trust-card-industries:hover::after,
.trust-card-industries:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.trust-card-industries:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.trust-card-industries h4 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.trust-card-industries h4 i {
    font-size: 1.5rem;
}

.trust-card-industries ul {
    list-style: none;
    padding-left: 1rem;
}

.trust-card-industries li {
    margin-bottom: var(--spacing-xs);
    padding-left: 1.5rem;
    position: relative;
    color: var(--gray-dark);
}

.trust-card-industries li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

/* Case Study Card */
.case-study-card-industries {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    border-left: 4px solid var(--primary-color);
}

.case-study-card-industries h4 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.case-study-card-industries em {
    display: block;
    font-style: italic;
    color: var(--gray-dark);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-md);
}

.case-study-card-industries strong {
    color: var(--primary-color);
}

/* Adjust split-content for 30/70 layout */
.split-content-industries {
    display: flex;
    
    gap: var(--spacing-xl);
    align-items: flex-start;
    /* padding: var(--spacing-md); */
}

.split-section-industries.alternate .split-content-industries {
    direction: ltr;
}

.split-image-industries {
    height: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.split-image-industries img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

/* .split-text-industries {
    padding: var(--spacing-md);
} */
.split-icon-industries{
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(238, 126, 52, 0.3);
    /* animation: pulse 2s infinite;    */
}

/* Image row layout for trust-solutions-cards-industries */
.trust-solutions-cards-industries.with-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    align-items: stretch;
    margin-top: 30px;
}

.trust-solutions-cards-industries.with-image .trust-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.trust-solutions-cards-industries.with-image .trust-image-side {
    max-height: 450px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark-color);
    position: relative;
}

.trust-solutions-cards-industries.with-image .trust-image-side img {
    width: 100%;
    height: auto;
    max-width: 450px;
    object-fit: contain;
    position: left;
    transition: transform 0.6s ease;
    display: block;
}

.trust-solutions-cards-industries.with-image .trust-image-side .image-overlay-text {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-lg);
    /*background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);*/
    color:var(--gray-dark);
}

/*   idustries PAGE SPECIFIC STYLES - end   ============================================ */

/* Fix for Industries page visibility */
.enhanced-industries-main .split-section {
    background: rgba(255, 255, 255, 0.493) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    /*box-shadow: var(--shadow-lg) !important;
    border: 1px solid rgba(238, 126, 52, 0.1) !important;*/
    margin-bottom: var(--spacing-xl) !important;
}

.enhanced-industries-main .split-text {
    background: linear-gradient(90deg, rgba(237, 238, 240, 0.493), rgba(240, 134, 22, 0.15));
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid rgba(238, 126, 52, 0.15) !important;
    padding: var(--spacing-xl) !important;
}

.enhanced-industries-main .split-image img {
    /*border-radius: var(--radius-lg);*/
    box-shadow: var(--shadow-md);
}
/* FIX FOR OUR PROCESS PAGE VISIBILITY */
.enhanced-process-main {
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-process-main .split-section {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    background: rgba(255, 255, 255, 0.349) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.enhanced-process-main .process-section {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}


/* Ensure all child elements are visible */
.enhanced-process-main * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Specific fix for split-section content */
.enhanced-process-main .split-section .split-content,
.enhanced-process-main .split-section .split-text,
.enhanced-process-main .split-section .split-image {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Fix for process section content */
.enhanced-process-main .process-section .process-timeline,
.enhanced-process-main .process-section .process-phase,
.enhanced-process-main .process-section .phase-content {
    opacity: 1 !important;
    visibility: visible !important;
}
.process-timeline {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) 0;
    margin: var(--spacing-xl) 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--gray-light);
    width: 100%;
}

/* Custom scrollbar for process timeline */
.process-timeline::-webkit-scrollbar {
    height: 8px;
}

.process-timeline::-webkit-scrollbar-track {
    background: var(--gray-light);
    border-radius: 4px;
}

.process-timeline::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 4px;
}

.split-section.visible .partnership-features .feature:nth-child(1) {
    transition-delay: 0.1s;
    opacity: 1;
    transform: translateX(0);
}

.split-section.visible .partnership-features .feature:nth-child(2) {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translateX(0);
}

.split-section.visible .partnership-features .feature:nth-child(3) {
    transition-delay: 0.3s;
    opacity: 1;
    transform: translateX(0);
}

.split-section.visible .partnership-features .feature:nth-child(4) {
    transition-delay: 0.4s;
    opacity: 1;
    transform: translateX(0);
}

/* Framework stages animation */
.framework-stages .stage {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.split-section.visible .framework-stages .stage:nth-child(1) {
    transition-delay: 0.1s;
    opacity: 1;
    transform: translateY(0);
}

.split-section.visible .framework-stages .stage:nth-child(2) {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translateY(0);
}

.split-section.visible .framework-stages .stage:nth-child(3) {
    transition-delay: 0.3s;
    opacity: 1;
    transform: translateY(0);
}

.split-section.visible .framework-stages .stage:nth-child(4) {
    transition-delay: 0.4s;
    opacity: 1;
    transform: translateY(0);
}

/* Support services animation */
.support-services .service {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.split-section.visible .support-services .service:nth-child(1) {
    transition-delay: 0.1s;
    opacity: 1;
    transform: translateX(0);
}

.split-section.visible .support-services .service:nth-child(2) {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translateX(0);
}

.split-section.visible .support-services .service:nth-child(3) {
    transition-delay: 0.3s;
    opacity: 1;
    transform: translateX(0);
}

.split-section.visible .support-services .service:nth-child(4) {
    transition-delay: 0.4s;
    opacity: 1;
    transform: translateX(0);
}

/* Benefits grid animation */
.benefits-grid .benefit {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.split-section.visible .benefits-grid .benefit:nth-child(1) {
    transition-delay: 0.1s;
    opacity: 1;
    transform: translateY(0);
}

.split-section.visible .benefits-grid .benefit:nth-child(2) {
    transition-delay: 0.2s;
    opacity: 1;
    transform: translateY(0);
}

.split-section.visible .benefits-grid .benefit:nth-child(3) {
    transition-delay: 0.3s;
    opacity: 1;
    transform: translateY(0);
}

.split-section.visible .benefits-grid .benefit:nth-child(4) {
    transition-delay: 0.4s;
    opacity: 1;
    transform: translateY(0);
}

/* Metrics grid animation */
.metrics-grid .metric {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.split-section.visible .metrics-grid .metric:nth-child(1) {
    transition-delay: 0.1s;
    opacity: 1;
    transform: scale(1);
}

.split-section.visible .metrics-grid .metric:nth-child(2) {
    transition-delay: 0.2s;
    opacity: 1;
    transform: scale(1);
}

.split-section.visible .metrics-grid .metric:nth-child(3) {
    transition-delay: 0.3s;
    opacity: 1;
    transform: scale(1);
}

.split-section.visible .metrics-grid .metric:nth-child(4) {
    transition-delay: 0.4s;
    opacity: 1;
    transform: scale(1);
}

/* Force visibility for content inside visible sections */
.split-section.visible .split-text,
.split-section.visible .split-image,
.process-section.visible .process-timeline,
.process-section.visible .section-header {
    opacity: 1 !important;
}

/* Make sure content is visible even before animation */
.split-text,
.split-image,
.process-timeline,
.section-header,
.phase-content,
.feature-content,
.service-content {
    opacity: 1 !important;
}

/* Initial state - sections should be invisible */
.split-section:not(.visible),
.enhanced-cta:not(.visible),
.process-section:not(.visible) {
    opacity: 0;
    transform: translateY(30px);
}

/* Ensure transitions work */
.split-section,
.enhanced-cta,
.process-section {
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Override any conflicting styles */
.enhanced-process-main .split-section,
.enhanced-process-main .enhanced-cta,
.enhanced-process-main .process-section {
    opacity: 0 !important; /* Start invisible */
    visibility: visible !important;
    transform: translateY(30px) !important;
}

.enhanced-process-main .split-section.visible,
.enhanced-process-main .enhanced-cta.visible,
.enhanced-process-main .process-section.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
/* Horizontal scroll for product cards in specific sections */
.horizontal-scroll-container {
    display: flex !important;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: 0;
    scroll-behavior: smooth;
    gap: 0;
    padding: 10px;
    margin-bottom: var(--spacing-md);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--gray-light);
    scroll-padding: 0;
    scroll-snap-type: x mandatory;

}

.horizontal-scroll-container::-webkit-scrollbar {
    height: 6px;
}

.horizontal-scroll-container::-webkit-scrollbar-track {
    background: var(--gray-light);
    border-radius: 3px;
}

.horizontal-scroll-container::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 3px;
}


/* Navigation dots for horizontal scroll */
.scroll-nav {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-md);
    /*padding: var(--spacing-sm) 0;*/
}

.scroll-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray-medium);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
}

.scroll-dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
}

.scroll-dot:hover {
    background: var(--primary-light);
    transform: scale(1.1);
}

/* Add scroll hint for mobile */
.scroll-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    color: var(--gray-dark);
    font-size: 0.9rem;
    margin-top: var(--spacing-sm);
    opacity: 0.8;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

.scroll-hint i {
    font-size: 1rem;
}

/* Auto-scroll pause on hover */
.horizontal-scroll-container:hover {
    scroll-behavior: auto;
}
/*   OUR PROCESS PAGE SPECIFIC STYLES - FIXED   ============================================ */

/* Enhanced Process Page Main Container */
.enhanced-process-main-ourprocess {
    background: transparent;
    min-height: 100vh;
    padding-top: var(--header-height);
}

/* Enhanced Hero Section - Fixed */
.enhanced-hero-ourprocess {
    position: relative;
    width: 100%;                 /* Full viewport width */
    margin-left: 0; /* Break out of container */
    min-height: 60vh;            /* Full screen height (optional) */
    height: 70vh;            /* Full screen height (optional) */
    background-image: url('/content/hero-images/our-process.jpg');
    background-size: cover;       /* Cover entire section */
    background-position: center;  /* Keep image centered */
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    
    inline-size: 100svw;               /* use small viewport width */
    margin-inline: calc(50% - 50svw)

}

.enhanced-title-ourprocess {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.enhanced-subtitle-ourprocess {
    font-size: 1.3rem;
    color: var(--gray-dark);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

/* Process Methodology Section - Fixed */
.process-section-ourprocess {
    padding: var(--spacing-xl) 0;
    /*margin: var(--spacing-xl) 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(238, 126, 52, 0.1);*/
    width: 100%;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.section-header-ourprocess {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding: 0 var(--spacing-md);
    opacity: 1 !important;
    visibility: visible !important;
}

.process-icon-ourprocess {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    margin: 0 auto var(--spacing-md);
    box-shadow: 0 10px 30px rgba(238, 126, 52, 0.3);
    opacity: 1 !important;
    visibility: visible !important;
}

.section-title-ourprocess {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
    opacity: 1 !important;
    visibility: visible !important;
}

.section-description-ourprocess {
    font-size: 1.3rem;
    color: var(--gray-dark);
    max-width: 700px;
    margin: 0 auto;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Process Timeline - Fixed */
.process-timeline-ourprocess {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 4 equal columns */
    gap: var(--spacing-lg) !important;
    /*padding: var(--spacing-xl) var(--spacing-md) !important;
    margin: var(--spacing-xl) 0 !important;*/
    width: 100% !important;
    min-height: 450px;
}
.process-timeline-ourprocess::-webkit-scrollbar {
    height: 8px;
}

.process-timeline-ourprocess::-webkit-scrollbar-track {
    background: var(--gray-light);
    border-radius: 4px;
}

.process-timeline-ourprocess::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 4px;
}

.process-phase-ourprocess {
    flex: 1 1 auto !important;
    min-width: 0 !important; /* Allow shrinking below content size */
    max-width: 100% !important;
    height: auto !important;
    min-height: 400px;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--spacing-md) !important;
    padding: var(--spacing-lg) !important;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all var(--transition-normal) !important;
    position: relative !important;
    opacity: 1 !important;
    transform: translateY(20px) !important;
    overflow: hidden;
}
.process-phase-ourprocess::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.process-phase-ourprocess:hover::after,
.process-phase-ourprocess:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.process-phase-ourprocess::before {
    content: none !important;
}
.process-phase-ourprocess:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-xl) !important;
    /* background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95)) !important; */
}

.phase-number-ourprocess {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto var(--spacing-md);
    position: relative;
    z-index: 1;
    box-shadow: 0 8px 20px rgba(238, 126, 52, 0.3);
    flex-shrink: 0;
}

.phase-content-ourprocess {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.phase-title-ourprocess {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-xs);
    color: var(--primary-color);
    text-align: center;
}

.phase-description-ourprocess {
    font-size: 1rem;
    color: var(--gray-dark);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
    text-align: center;
    /* flex-grow: 1; */
}
.phase-activities-ourprocess {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.phase-activities-ourprocess li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    color: var(--gray-dark);
    padding: 6px 0;
    font-size: 0.95rem;
    line-height: 1.4;
}
.phase-activities-ourprocess i {
    color: var(--primary-color);
    font-size: 0.9rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Split Section Styles for Process Page - Fixed */
.split-section-ourprocess {
    /*padding: var(--spacing-xl) 0;
    margin: var(--spacing-xl) 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(238, 126, 52, 0.1);*/
    width: 100%;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
/* 
.split-content-ourprocess {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    align-items: stretch;
    /*padding: 0 var(--spacing-md);
    margin-bottom: 10px;
    opacity: 1 !important;
    visibility: visible !important;
} */

.split-text-ourprocess {
    /* padding: var(--spacing-lg); */
    opacity: 1 !important;
    visibility: visible !important;
}

.split-header-ourprocess {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    opacity: 1 !important;
    visibility: visible !important;
}

.split-icon-ourprocess {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(238, 126, 52, 0.3);
    opacity: 1 !important;
    visibility: visible !important;
}

.split-title-ourprocess {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    opacity: 1 !important;
    visibility: visible !important;
    border-bottom: 4px solid rgba(238, 126, 52, 0.37);
}

.split-description-ourprocess {
    font-size: 1.15rem;
    color: var(--gray-dark);
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
    opacity: 1 !important;
    visibility: visible !important;
}

/* Partnership Features */
.partnership-features-ourprocess {
        display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    height: 100%;
    width: 100%;
}

.feature-ourprocess {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}
.feature-ourprocess::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.feature-ourprocess:hover::after,
.feature-ourprocess:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.feature-ourprocess:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.feature-icon-ourprocess {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    flex-shrink: 0;
    opacity: 1 !important;
    visibility: visible !important;
}
.feature-content-ourprocess {
    flex: 1;
}
.feature-content-ourprocess h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--primary-color);
    opacity: 1 !important;
    visibility: visible !important;
}

.feature-content-ourprocess p {
    font-size: 0.95rem;
    color: var(--gray-dark);
    line-height: 1.5;
    opacity: 1 !important;
    visibility: visible !important;
     margin-bottom: 0;
}

/* Partnership Principles */
.partnership-principles-ourprocess {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 2px solid rgba(238, 126, 52, 0.1);
    opacity: 1 !important;
    visibility: visible !important;
}

.partnership-principles-ourprocess h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
    opacity: 1 !important;
    visibility: visible !important;
}

.split-features-ourprocess {
    list-style: none;
    padding: 0;
    margin: 0;
    opacity: 1 !important;
    visibility: visible !important;
    width: 100%;
}

.split-features-ourprocess li {
    padding: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    position: relative;
    color: var(--gray-dark);
    line-height: 1.6;
    opacity: 1 !important;
    visibility: visible !important;
}

.split-features-ourprocess li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.1rem;
}

/* Framework Stages */
.framework-stages-ourprocess {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    height: 100%;
    width: 100%;
}

.stage-ourprocess {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}
.stage-ourprocess::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.stage-ourprocess:hover::after,
.stage-ourprocess:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.stage-ourprocess:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.stage-header-ourprocess {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    opacity: 1 !important;
    visibility: visible !important;
}

.stage-number-ourprocess {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    flex-shrink: 0;
    opacity: 1 !important;
    visibility: visible !important;
}

.stage-title-ourprocess {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0;
    opacity: 1 !important;
    visibility: visible !important;
}

.stage-activities-ourprocess {
    list-style: none;
    padding: 0;
    margin: 0;
    opacity: 1 !important;
    visibility: visible !important;
    flex: 1;
}

.stage-activities-ourprocess li {
    padding: 6px 0;
    padding-left: var(--spacing-md);
    position: relative;
    color: var(--gray-dark);
    font-size: 0.95rem;
    opacity: 1 !important;
    visibility: visible !important;
}

.stage-activities-ourprocess li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

/* Framework Benefits */
.framework-benefits-ourprocess {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 2px solid rgba(238, 126, 52, 0.1);
    opacity: 1 !important;
    visibility: visible !important;
}

.framework-benefits-ourprocess h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--primary-color);
    opacity: 1 !important;
    visibility: visible !important;
}

.benefits-grid-ourprocess {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    width: 100%;
}

.benefit-ourprocess {
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}
.benefit-ourprocess::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.benefit-ourprocess:hover::after,
.benefit-ourprocess:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.benefit-ourprocess:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.benefit-ourprocess i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.benefit-ourprocess h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--primary-color);
    opacity: 1 !important;
    visibility: visible !important;
}

.benefit-ourprocess p {
    font-size: 0.9rem;
    color: var(--gray-dark);
    line-height: 1.5;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Support Services */
.support-services-ourprocess {
        display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    height: 100%;
    width: 100%;
}

.service-ourprocess {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}
.service-ourprocess::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.service-ourprocess:hover::after,
.service-ourprocess:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.service-ourprocess:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.service-icon-ourprocess {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.3rem;
    flex-shrink: 0;
    opacity: 1 !important;
    visibility: visible !important;
    margin-bottom: var(--spacing-sm);
}

.service-content-ourprocess h3 {
    font-size: 1.2rem;
    /* font-weight: 600; */
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
    opacity: 1 !important;
    visibility: visible !important;
}

.service-content-ourprocess ul {
    list-style: none;
    padding: 0;
     margin: var(--spacing-sm) 0 0 0;
    opacity: 1 !important;
    visibility: visible !important;
}

.service-content-ourprocess li {
    padding: 4px 0 4px var(--spacing-md);
    position: relative;
    color: var(--gray-dark);
    font-size: 0.95rem;
}

.service-content-ourprocess li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
}

/* Success Metrics */
.success-metrics-ourprocess {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    /* border-top: 2px solid rgba(238, 126, 52, 0.1); */
    opacity: 1 !important;
    visibility: visible !important;
}

.success-metrics-ourprocess h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--primary-color);
    opacity: 1 !important;
    visibility: visible !important;
}

.metrics-grid-ourprocess {
    display: grid;
    grid-template-columns:repeat(4, 1fr) ;
    gap: var(--spacing-lg);
    opacity: 1 !important;
    visibility: visible !important;
}

.metric-ourprocess {
    text-align: center;
    padding: var(--spacing-md);
    transition: all var(--transition-normal);
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    min-width: 0;           /* critical for grid/flex children */
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}
.metric-ourprocess::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.metric-ourprocess:hover::after,
.metric-ourprocess:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.metric-ourprocess:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.metric-value-ourprocess {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
    opacity: 1 !important;
    visibility: visible !important;
}

.metric-label-ourprocess {
    font-size: 0.95rem;
    color: var(--gray-dark);
    font-weight: 600;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Enhanced CTA for Process Page - Fixed 
/* .enhanced-cta {
    text-align: center;
    padding: var(--spacing-md);
    /*background: linear-gradient(135deg, rgba(238, 126, 52, 0.1) 0%, rgba(30, 58, 107, 0.05) 100%);
    border-radius: var(--radius-xl);
    margin: var(--spacing-xl) 0;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(238, 126, 52, 0.1);
    width: 100%;'''''
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    margin: 10px 10px;
} */

.enhanced-cta-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-cta-description {
    font-size: 1.3rem;
    color: var(--gray-dark);
    margin-bottom: var(--spacing-lg);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-cta-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    opacity: 1 !important;
    visibility: visible !important;
}

.enhanced-process-main-ourprocess * {
    opacity: 1 !important;
    visibility: visible !important;
}


/* ============================================
   OUR PROCESS PAGE - IMAGE LAYOUT STYLES
   ============================================ */

/* Partnership Features with Image */
.partnership-with-image-ourprocess {
        display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Content takes 60%, Image 40% */
    gap: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    align-items: stretch;
    width: 100%;
}

.partnership-features-wrapper-ourprocess {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.partnership-image-wrapper-ourprocess {
    position: relative;
    height: 100%;
    min-height: 400px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); */
}

.partnership-features-image-ourprocess {
    width: 100%;
    /* height: 100%; */
    object-fit: contain;
    max-height: 450px;
    transition: transform 0.6s ease;
}

.partnership-image-wrapper-ourprocess:hover .partnership-features-image-ourprocess {
    transform: scale(1.05);
}

/* Partnership Principles with Image */
.partnership-principles-with-image-ourprocess {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr; /* Image 40%, Content 60% */
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    align-items: stretch;
    width: 100%;
}

.principles-image-wrapper-ourprocess {
    position: relative;
    height: 100%;
    min-height: 350px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); */
}

.principles-image-ourprocess {
    width: 100%;
    /* height: 100%; */
    object-fit: contain;
    max-height: 350px;
    transition: transform 0.6s ease;
}

.principles-image-wrapper-ourprocess:hover .principles-image-ourprocess {
    transform: scale(1.05);
}

.principles-content-wrapper-ourprocess {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md) 0;
    padding: 0;
    width: 100%;
}

.principles-content-wrapper-ourprocess h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
}

/* Implementation Framework with Image */
.framework-with-image-ourprocess {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Content 60%, Image 40% */
    gap: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    align-items: stretch;
    width: 100%;
}

.framework-stages-wrapper-ourprocess {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.framework-image-wrapper-ourprocess {
    position: relative;
    height: 100%;
    min-height: 450px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); */
}

.framework-image-ourprocess {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.6s ease;
}

.framework-image-wrapper-ourprocess:hover .framework-image-ourprocess {
    transform: scale(1.05);
}

/* Framework Benefits with Image */
.framework-benefits-with-image-ourprocess {
    display: grid;
    grid-template-columns: 0.8fr 1.20fr; /* Content 60%, Image 40% */
    gap: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    align-items: stretch;
    width: 100%;
}

.benefits-content-wrapper-ourprocess {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.benefits-content-wrapper-ourprocess h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
}

.benefits-image-wrapper-ourprocess {
    position: relative;
    height: 100%;
    min-height: 300px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); */
}

.benefits-image-ourprocess {
    width: 100%;
    /* height: 100%; */
    max-height: 450px;
    object-fit: contain;
    transition: transform 0.6s ease;
}

.benefits-image-wrapper-ourprocess:hover .benefits-image-ourprocess {
    transform: scale(1.05);
}

/* Success & Support with Image */
.support-with-image-ourprocess {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* Content 60%, Image 40% */
    gap: var(--spacing-lg);
    margin: var(--spacing-md) 0;
    align-items: stretch;
    width: 100%;
}

.support-services-wrapper-ourprocess {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.support-image-wrapper-ourprocess {
    position: relative;
    height: 100%;
    min-height: 450px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    /* box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); */
}

.support-image-ourprocess {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.support-image-wrapper-ourprocess:hover .support-image-ourprocess {
    transform: scale(1.05);
}

/* Image Overlay Content */
.image-overlay-content-ourprocess {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-lg);
    /* background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); */
    color: var(--gray-dark);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.image-overlay-content-ourprocess h4 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.image-overlay-content-ourprocess p {
    font-size: 0.95rem;
    opacity: 0.9;
}




/* ENHANCED INSIGHTS PAGE STYLES   ============================================ */
.enhanced-hero-insights{
    position: relative;
    width: 100vw;                 /* Full viewport width */
    margin-left: calc(50% - 50vw); /* Break out of container */
    
    min-height: 60vh;            /* Full screen height (optional) */
    height: 70vh;            /* Full screen height (optional) */
    
    background-image: url('/content/hero-images/insights.jpg');
    background-size: cover;       /* Cover entire section */
    background-position: center;  /* Keep image centered */
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    padding: 0 20px;
}
.enhanced-insights-main {
    background: transparent;
    min-height: 100%;
}

/* Enhanced Hero Section */
.enhanced-hero {
    text-align: center;
    padding: var(--spacing-xl) 0;
    margin-top: var(--spacing-md);
    /*border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(238, 126, 52, 0.1);
    
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
     margin-bottom: var(--spacing-lg);*/
}

.enhanced-title {
    font-size: 3rem;
    font-weight: 800;
    color: var(--dark-color);
    margin-bottom: var(--spacing-md);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.enhanced-subtitle {
    font-size: 1.3rem;
    color: var(--light-color);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
    text-shadow: 2px 2px #131212;
}

/* Insights Categories Navigation */
.insights-categories {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding: var(--spacing-sm);
    /*margin: var(--spacing-xl) 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);*/
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(238, 126, 52, 0.1);
}

.category-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    color: var(--gray-dark);
    text-decoration: none;
    transition: all var(--transition-normal);
    min-width: 100px;
}

.category-link:hover {
    transform: translateY(-3px);
    background: rgba(238, 126, 52, 0.1);
    color: var(--primary-color);
}

.category-link.active {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    box-shadow: var(--shadow-md);
}

.category-link i {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-xs);
}

.category-link span {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

/* Insights Sections */
.insights-section {
    padding: var(--spacing-md) 0;
    /*margin: var(--spacing-xl) 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(238, 126, 52, 0.1);*/
}

.insights-section.alternate {
    /*background: rgba(248, 249, 250, 0.95);*/
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-md) 0;
    /* margin-top: var(--spacing-md); */
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
    /* margin-top: var(--spacing-xl); */
}

.section-description {
    font-size: 1.3rem;
    color: var(--gray-dark);
    max-width: 700px;
    margin: 0 auto;
}

/* Industry Trends Grid */
.insights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    /* padding: 0 var(--spacing-md); */
}

.insight-card-large {
    overflow: hidden;
    transition: all var(--transition-normal);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
}

.insight-card-large:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.insight-image {
    height: 100%;
    min-height: 300px;
    overflow: hidden;
}

.insight-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.insight-card-large:hover .insight-image img {
    transform: scale(1.05);
}

.insight-content {
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.insight-content::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    /* background: linear-gradient(90deg, var(--primary-color), var(--primary-dark)); */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.insight-content:hover::after,
.insight-content:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.insight-category {
    display: inline-block;
    background: rgba(238, 126, 52, 0.1);
    color: var(--primary-color);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    align-self: flex-start;
}

.insight-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
    line-height: 1.3;
}

.insight-description {
    font-size: 1.1rem;
    color: var(--gray-dark);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    flex-grow: 1;
    text-align: justify;
}

.insight-meta {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    color: var(--gray-medium);
    font-size: 0.9rem;
}

.insight-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.insights-small-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.insight-card-small {
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;  
    display: flex;             
    flex-direction: column;
    position: relative;
    overflow: hidden;
}
.insight-card-small::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.insight-card-small:hover::after,
.insight-card-small:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.insight-card-small:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.insight-card-small .insight-content {
    padding: 0;
    
    display: flex;           
    flex-direction: column;
    flex: 1;
}

.insight-card-small .insight-link {
  margin-top: auto;          /* pins the link to the bottom of the card */
  align-self: flex-start;    /* optional: keep link aligned to left */
}

.insight-card-small .insight-title {
    font-size: 1.3rem;
    margin-bottom: var(--spacing-sm);
}

.insight-card-small .insight-description {
    font-size: 1rem;
    margin-bottom: var(--spacing-md);
}

.insight-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.insight-link:hover {
    gap: 10px;
    color: var(--primary-dark);
}

/* Case Studies */
.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-lg);
    /* padding: 0 var(--spacing-md); */
}

.case-study-card {
    overflow: hidden;
    transition: all var(--transition-normal);
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;

    display: flex;         
    flex-direction: column;
}

.case-study-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.case-study-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--spacing-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    gap: 15px;
}

.case-study-industry {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.case-study-results {
    display: flex;
    gap: var(--spacing-xs);
}

.result-tag {
    background: rgba(255, 255, 255, 0.2);
    padding: 10px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 1px;
}

.case-study-content {
    padding: var(--spacing-xl);
    display: flex;           
    flex-direction: column;
    flex: 1; 
    position: relative;
    overflow: hidden;
}
.case-study-content::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.case-study-content:hover::after,
.case-study-content:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.case-study-content .btn {
  margin-top: auto;          /* pushes button to the bottom edge */
  align-self: flex-start;    /* keep left-aligned; change to center if needed */
}

.case-study-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
}

.case-study-description {
    color: var(--gray-dark);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

.case-study-highlights {
    /* background: rgba(248, 249, 250, 0.5);
    padding: var(--spacing-lg); */
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
}

.case-study-highlights h4 {
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
    font-size: 1.1rem;
}

.case-study-highlights ul {
    list-style: none;
    padding-left: 0;
}

.case-study-highlights li {
    padding: 4px 0;
    color: var(--gray-dark);
    position: relative;
    padding-left: 24px;
}

.case-study-highlights li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

/* Whitepapers */
.whitepapers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    /* padding: 0 var(--spacing-md); */
}

.whitepaper-card {
    padding: var(--spacing-md);
    transition: all var(--transition-normal);
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.whitepaper-card::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.whitepaper-card:hover::after,
.whitepaper-card:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.whitepaper-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.whitepaper-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    margin-bottom: var(--spacing-lg);
}

.whitepaper-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.whitepaper-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
}

.whitepaper-description {
    color: var(--gray-dark);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    flex-grow: 1;
}

.whitepaper-details {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    color: var(--gray-medium);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-lg);
}

.whitepaper-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Webinars */
.webinars-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    /* padding: 0 var(--spacing-md); */
}

.upcoming-webinar {
    padding: var(--spacing-xl);
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.upcoming-webinar::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.upcoming-webinar:hover::after,
.upcoming-webinar:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.webinar-badge {
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--primary-color);
    color: white;
    padding: 6px 40px;
    transform: rotate(45deg);
    font-size: 0.8rem;
    font-weight: 600;
}

.webinar-content {
    position: relative;
    z-index: 1;
}

.webinar-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--primary-color);
}

.webinar-details {
    /* background: rgba(248, 249, 250, 0.5); */
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.webinar-details p {
    margin-bottom: 8px;
    color: var(--gray-dark);
}

.webinar-details i {
    color: var(--primary-color);
    margin-right: 8px;
    width: 20px;
}

.webinar-description {
    color: var(--gray-dark);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

.recorded-webinars {
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.recorded-webinars::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.recorded-webinars:hover::after,
.recorded-webinars:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.section-subtitle {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--primary-color);
}

.recorded-session {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
    background: rgba(248, 249, 250, 0.5);
    margin-bottom: var(--spacing-md);
    transition: all var(--transition-normal);
}

.recorded-session:hover {
    background: rgba(238, 126, 52, 0.1);
    transform: translateX(5px);
}

.session-thumbnail {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    flex-shrink: 0;
}

.session-content {
    flex-grow: 1;
}

.session-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--primary-color);
}

.session-description {
    color: var(--gray-dark);
    font-size: 0.95rem;
    margin-bottom: var(--spacing-sm);
}

.session-meta {
    display: flex;
    gap: var(--spacing-md);
    color: var(--gray-medium);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-sm);
}

.session-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.session-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--transition-normal);
}

.session-link:hover {
    gap: 10px;
    color: var(--primary-dark);
}

/* FAQs */
.faq-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-lg);
    /* padding: 0 var(--spacing-md); */
}

.faq-category {
    padding: var(--spacing-xl);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.faq-category::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.faq-category:hover::after,
.faq-category:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.faq-category-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.faq-category-title i {
    color: var(--primary-color);
}

.faq-accordion {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.faq-item {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.faq-question {
    width: 100%;
    padding: var(--spacing-md);
    /* background: white; */
    border: none;
    text-align: left;
    font-weight: 600;
    color: var(--dark-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--transition-fast);
    font-size: 1.1rem;
    position: relative;
    overflow: hidden;
}

.faq-question:hover {
    background: rgba(238, 126, 52, 0.05);
    color: var(--primary-color);
}

.faq-question.active {
    background: rgba(238, 126, 52, 0.1);
    color: var(--primary-color);
}

.faq-question::after {
    content: '+';
    font-size: 1.2rem;
    transition: transform var(--transition-normal);
}

.faq-question.active::after {
    content: '−';
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-normal);
    background: rgba(248, 249, 250, 0.5);
}

.faq-answer p {
    padding: var(--spacing-md);
    margin: 0;
    color: var(--gray-dark);
    line-height: 1.6;
    font-size: 1rem;
}

/* Deep Dives */
.deep-dive-articles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: var(--spacing-lg);
    /* padding: 0 var(--spacing-md); */
}

.deep-dive-article {
    padding: var(--spacing-xl);
    transition: all var(--transition-normal);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.deep-dive-article::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.deep-dive-article:hover::after,
.deep-dive-article:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.deep-dive-article:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.article-header {
    margin-bottom: var(--spacing-lg);
}

.article-category {
    display: inline-block;
    background: rgba(238, 126, 52, 0.1);
    color: var(--primary-color);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.article-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--primary-color);
    line-height: 1.3;
}

.article-excerpt p {
    color: var(--gray-dark);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

.article-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.author {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.author-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary-color);
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 600;
    color: var(--dark-color);
}

.author-title {
    font-size: 0.9rem;
    color: var(--gray-medium);
}

/* Newsletter Section */
.newsletter-section {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    padding: var(--spacing-xl);
    /* margin: var(--spacing-xl) 0; */
    color: white;
    text-align: center;
}

.newsletter-content {
    max-width: 600px;
    margin: 0 auto;
}

.newsletter-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: white;
}

.newsletter-description {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: var(--spacing-lg);
}

.newsletter-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    gap: var(--spacing-sm);
}

.form-group input {
    flex-grow: 1;
    padding: 12px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.9);
}

.form-group input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.form-group .btn-primary {
    background: white;
    color: var(--primary-color);
    font-weight: 600;
    padding: 12px 30px;
}

.form-group .btn-primary:hover {
    background: var(--light-color);
    transform: translateY(-2px);
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
    text-align: left;
}

.form-check input {
    margin-top: 4px;
}

.form-check label {
    font-size: 0.9rem;
    opacity: 0.8;
    line-height: 1.4;
}


/* Smooth scrolling for in-page navigation */
html {
    scroll-behavior: smooth;
}

/* Active category highlight */
.category-link.active {
    position: relative;
    overflow: hidden;
}

.category-link.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    /*background: white;*/
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Animation for section appearance */
.insights-section {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover effects for cards */
.insight-card-large,
.case-study-card,
.whitepaper-card,
.deep-dive-article {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.insight-card-large:hover,
.case-study-card:hover,
.whitepaper-card:hover,
.deep-dive-article:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
/* ============================================
   ABOUT US PAGE STYLES
   ============================================ */
.enhanced-hero-aboutus{
    position: relative;
    width: 100vw;                 /* Full viewport width */
    margin-left: calc(50% - 50vw); /* Break out of container */
    
    min-height: 60vh;            /* Full screen height (optional) */
    height: 70vh;            /* Full screen height (optional) */
    
    background-image: url('/content/hero-images/about-us.jpg');
    background-size: cover;       /* Cover entire section */
    background-position: center;  /* Keep image centered */
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    padding: 0 20px;
}
/* Enhanced About Us Main Container */
.enhanced-about-main {
    /* padding: var(--spacing-xl) 0; */
    background: transparent;
    min-height: 100vh;
    width: 100%;
}

/* Split Section Styling for About Us */
.split-section-aboutus {
    /*padding: var(--spacing-xl) 0;
    margin: var(--spacing-xl) 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(238, 126, 52, 0.1);*/
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.split-section-aboutus.visible {
    opacity: 1;
    transform: translateY(0);
}

.split-content-aboutus {
    display: grid;
    gap: var(--spacing-xl);
    align-items: stretch;
    /*padding: 0 var(--spacing-md);*/
}

.split-text-aboutus {
    /*padding: var(--spacing-lg);*/
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.split-header-aboutus {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    /*margin-bottom: var(--spacing-lg);*/
}

.split-icon-aboutus {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(238, 126, 52, 0.3);
}

.split-title-aboutus {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    border-bottom: 4px solid rgba(238, 126, 52, 0.37);
}

.split-description-aboutus {
    font-size: 1.15rem;
    color: var(--gray-dark);
    line-height: 1.8;
    /*margin-bottom: var(--spacing-lg);*/
}

/* Timeline Styling */
.timeline-aboutus {
    display: flex;
    flex-wrap: wrap;               /* allow wrapping */
    gap: var(--spacing-md);
    /* padding: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-md) 0; */
    width: 100%;
}

.timeline-event-aboutus {
    flex: 1 1 280px;      /* flexible width */
    min-width: 240px;     /* prevents being too small */
    max-width: 100%;
    width: 100%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0,0,0,0.25);
    border-radius: 16px;
    padding: var(--spacing-md);
    position: relative;
    overflow: hidden;
}
.timeline-event-aboutus::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.timeline-event-aboutus:hover::after,
.timeline-event-aboutus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.timeline-event-aboutus.visible {
    opacity: 1;
    transform: translateX(0);
}


.event-year-aboutus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    height: 32px;
    padding: 0 12px;

    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: #fff;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    box-shadow: 0 6px 18px rgba(238, 126, 52, 0.30);
    margin-bottom: var(--spacing-sm);

}

.event-content-aboutus h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 6px;

}

.event-content-aboutus p {   
    color: var(--gray-dark);
    line-height: 1.6;
    margin: 0;
    text-wrap: pretty;

}

.timeline-event-aboutus:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.timeline-aboutus::-webkit-scrollbar {
  height: 6px;
}
.timeline-aboutus::-webkit-scrollbar-track {
  background: var(--gray-light);
  border-radius: 3px;
}
.timeline-aboutus::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 3px;
}
/* === Our Approach → Principles as Horizontal Cards (About Us) === */

/* Turn the container into a horizontal card row with gentle snap */
.approach-principles-aboutus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    width: 100%;
}
.approach-card-aboutus {
    width: 100%;
    min-width: 0;

    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-radius: 16px;
    padding: var(--spacing-md);
    box-shadow: 0 8px 16px rgba(0,0,0,0.25);

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* WebKit scrollbar (match your other scroll containers) */
.approach-principles-aboutus::-webkit-scrollbar {
  height: 6px;
}
.approach-principles-aboutus::-webkit-scrollbar-track {
  background: var(--gray-light);
  border-radius: 3px;
}
.approach-principles-aboutus::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 3px;
}

/* Each principle becomes a card */
.principle-aboutus {
  flex: 0 0 clamp(260px, 30vw, 340px); /* responsive card width */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  scroll-snap-align: start;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  /* preserve your initial entrance animation */
  opacity: 1;                /* ensure visible in card layout */
  transform: translateX(0);  /* reset shift now that layout is different */
  position: relative;
    overflow: hidden;
}


/* Keep your circular number token prominent */
.principle-number-aboutus {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(238, 126, 52, 0.30);
  flex-shrink: 0;
}

/* Title + copy inside the card */
.principle-content-aboutus h3 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--primary-color);
}
.principle-content-aboutus p {
  margin: 0;
  color: var(--gray-dark);
  line-height: 1.6;
}

/* Optional: subtle divider on very wide screens to anchor the row */
/* Mission & Vision Cards */
.mission-vision-content-aboutus {
    display: grid;
    gap: var(--spacing-lg);
    /* margin: var(--spacing-lg) 0; */

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.mission-card-aboutus,
.vision-card-aboutus {
    padding: var(--spacing-md);
    border-left: 4px solid var(--primary-color);
    transition: all var(--transition-normal);
    opacity: 0;
    transform: translateY(20px);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.mission-card-aboutus::after, .vision-card-aboutus::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.mission-card-aboutus:hover::after,
.mission-card-aboutus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.vision-card-aboutus:hover::after,
.vision-card-aboutus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.mission-card-aboutus.visible,
.vision-card-aboutus.visible {
    opacity: 1;
    transform: translateY(0);
}

.mission-card-aboutus:hover,
.vision-card-aboutus:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.card-icon-aboutus {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
}

.card-title-aboutus {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.card-description-aboutus {
    color: var(--gray-dark);
    line-height: 1.6;
}

/* Core Values */
.core-values-aboutus {
    /*margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 2px solid rgba(238, 126, 52, 0.1);*/
}

.core-values-aboutus h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--primary-color);
}

.values-grid-aboutus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
}

.value-aboutus {
    text-align: center;
    padding: var(--spacing-md);
    transition: all var(--transition-normal);
    opacity: 0;
    transform: translateY(20px);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.value-aboutus::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.value-aboutus:hover::after,
.value-aboutus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.value-aboutus.visible {
    opacity: 1;
    transform: translateY(0);
}

.value-aboutus:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.value-icon-aboutus {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin: 0 auto var(--spacing-md);
}

.value-aboutus h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--primary-color);
}

.value-aboutus p {
    font-size: 0.9rem;
    color: var(--gray-dark);
    line-height: 1.5;
}

/* Team Stats */
.team-stats-aboutus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-lg);
    /*margin: var(--spacing-lg) 0;*/
}

.stat-aboutus {
    text-align: center;
    padding: var(--spacing-md);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s ease;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.stat-aboutus::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.stat-aboutus:hover::after,
.stat-aboutus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.stat-aboutus.visible {
    opacity: 1;
    transform: scale(1);
}

.stat-number-aboutus {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.stat-label-aboutus {
    font-size: 0.9rem;
    color: var(--gray-dark);
    font-weight: 600;
}

/* Team Departments */
.team-departments-aboutus {
   /* margin: var(--spacing-xl) 0;*/
}

.team-departments-aboutus h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
}

.departments-grid-aboutus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.department-aboutus {
    padding: var(--spacing-md);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.department-aboutus::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.department-aboutus:hover::after,
.department-aboutus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.department-aboutus.visible {
    opacity: 1;
    transform: translateY(0);
}

.department-aboutus h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.department-aboutus p {
    font-size: 0.9rem;
    color: var(--gray-dark);
    line-height: 1.5;
}

/* Leadership Team */
.leadership-team-aboutus {
    /*margin-top: var(--spacing-xl);
    border-top: 2px solid rgba(238, 126, 52, 0.1);*/
    padding-top: var(--spacing-sm);
    
}

.leadership-team-aboutus h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--primary-color);
}

.leadership-grid-aboutus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
}

.leader-aboutus {
    overflow: hidden;
    transition: all var(--transition-normal);
    opacity: 0;
    transform: translateY(20px);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    position: relative;
}
.leader-aboutus::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.leader-aboutus:hover::after,
.leader-aboutus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.leader-aboutus.visible {
    opacity: 1;
    transform: translateY(0);
}

.leader-aboutus:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.leader-image-aboutus {
    height: 200px;
    overflow: hidden;
}

.leader-image-aboutus img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform var(--transition-normal);
}

.leader-aboutus:hover .leader-image-aboutus img {
    transform: scale(1.1);
}

.leader-info-aboutus {
    padding: var(--spacing-md);
}

.leader-info-aboutus h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.leader-title-aboutus {
    font-size: 0.9rem;
    color: var(--gray-dark);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.leader-bio-aboutus {
    font-size: 0.9rem;
    color: var(--gray-dark);
    line-height: 1.5;
}

/* Approach Principles */
.approach-principles-aboutus {
    /*margin: var(--spacing-lg) 0;*/
}

.principle-aboutus::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.principle-aboutus:hover::after,
.principle-aboutus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.principle-aboutus.visible {
    opacity: 1;
    transform: translateX(0);
}

.principle-number-aboutus {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    flex-shrink: 0;
}

.principle-content-aboutus h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.principle-content-aboutus p {
    color: var(--gray-dark);
    line-height: 1.6;
}

/* Differentiators */
.differentiators-aboutus {
    /*margin-top: var(--spacing-xl);
    border-top: 2px solid rgba(238, 126, 52, 0.1);*/
    padding-top: var(--spacing-sm);
}

.differentiators-aboutus h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--primary-color);
}

.split-features-aboutus {
    list-style: none;
    padding: 0;
    margin: 0;
}

.split-features-aboutus li {
    padding: var(--spacing-sm) 0;
    padding-left: var(--spacing-lg);
    position: relative;
    color: var(--gray-dark);
    line-height: 1.6;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.split-features-aboutus li.visible {
    opacity: 1;
    transform: translateY(0);
}

.split-features-aboutus li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.1rem;
}

/* Certifications */
.certifications-grid-aboutus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-sm) 0;
}

.certification-aboutus {
    text-align: center;
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
    opacity: 0;
    transform: translateY(20px);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.certification-aboutus::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.certification-aboutus:hover::after,
.certification-aboutus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.certification-aboutus.visible {
    opacity: 1;
    transform: translateY(0);
}

.certification-aboutus:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.cert-icon-aboutus {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    margin: 0 auto var(--spacing-md);
}

.certification-aboutus h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--primary-color);
}

.certification-aboutus p {
    font-size: 0.9rem;
    color: var(--gray-dark);
    line-height: 1.5;
}

/* Technology Partners */
.technology-partners-aboutus {
    /*margin-top: var(--spacing-xl);*/
    padding-top: var(--spacing-sm);
    border-top: 2px solid rgba(238, 126, 52, 0.1);
}

.technology-partners-aboutus h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--primary-color);
}

.partners-logos-aboutus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-lg);
    align-items: center;
}

.partner-logo-aboutus {
    padding: var(--spacing-md);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s ease;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.partner-logo-aboutus::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.partner-logo-aboutus:hover::after,
.partner-logo-aboutus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.partner-logo-aboutus.visible {
    opacity: 1;
    transform: scale(1);
}

.partner-logo-aboutus img {
    max-width: 100%;
    max-height: 40px;
    opacity: 0.7;
    transition: all var(--transition-normal);
}

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

/* Success Metrics */
.success-metrics-aboutus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-lg);
    /*margin: var(--spacing-lg) 0;*/
}

.metric-aboutus {
    text-align: center;
    padding: var(--spacing-md);
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s ease;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.metric-aboutus::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.metric-aboutus:hover::after,
.metric-aboutus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.metric-aboutus.visible {
    opacity: 1;
    transform: scale(1);
}

.metric-aboutus:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.metric-value-aboutus {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.metric-label-aboutus {
    font-size: 0.9rem;
    color: var(--gray-dark);
    font-weight: 600;
}

/* Testimonials */
.testimonials-aboutus {
    /*margin: var(--spacing-xl) 0;*/
}

.testimonials-aboutus h3 {
    font-size: 1.5rem;
    font-weight: 700;
    /*margin-bottom: var(--spacing-lg);*/
    color: var(--primary-color);
}
.testimonial-card-aboutus {
    flex: 1 1 300px;      /* Flexible width */
    min-width: 260px;     /* Prevent too small */
    max-width: 100%;
    width: 100%;

    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border-radius: 16px;
    padding: var(--spacing-md);
    box-shadow: 0 8px 16px rgba(0,0,0,0.25);
}
.testimonial-slider-aboutus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.testimonial-slider-aboutus::-webkit-scrollbar {
    height: 6px;
}

.testimonial-slider-aboutus::-webkit-scrollbar-track {
    background: var(--gray-light);
    border-radius: 3px;
}

.testimonial-slider-aboutus::-webkit-scrollbar-thumb {
    background-color: var(--primary-color);
    border-radius: 3px;
}

.testimonial-aboutus {
    flex: 0 0 calc(50% - var(--spacing-lg));
    padding: var(--spacing-lg);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}
.testimonial-aboutus::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.testimonial-aboutus:hover::after,
.testimonial-aboutus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.testimonial-aboutus.visible {
    opacity: 1;
    transform: translateY(0);
}

.testimonial-content-aboutus p {
    font-style: italic;
    color: var(--gray-dark);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
    position: relative;
}

.testimonial-content-aboutus p::before {
    font-size: 3rem;
    color: var(--primary-color);
    opacity: 0.3;
    position: absolute;
    top: -15px;
    left: -10px;
}

.testimonial-author-aboutus {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.author-info-aboutus h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 2px;
}

.author-info-aboutus p {
    font-size: 0.9rem;
    color: var(--gray-medium);
}

/* Client Logos */
.client-logos-aboutus {
    /*margin-top: var(--spacing-xl);*/
}

.client-logos-aboutus h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--primary-color);
}

.logos-grid-aboutus {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--spacing-lg);
    align-items: center;
}

.client-logo-aboutus {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: flex-start;
    height: auto;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s ease;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: 20px;
    gap: 8px;
    min-width: 0; 
    position: relative;
    overflow: hidden;   
}
.client-logo-aboutus::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.client-logo-aboutus:hover::after,
.client-logo-aboutus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.client-logo-aboutus.visible {
    opacity: 1;
    transform: scale(1);
}

.client-logo-aboutus img {
    width: 100%;
    height: 140px;
    max-width: 140px; 
    object-fit: contain;
    /* filter: grayscale(100%); */
    opacity: 0.85;
    transition: all var(--transition-normal);
}

.client-logo-aboutus p {
  margin: 0;
  text-align: center;
  line-height: 1.35;
  color: var(--gray-dark);
  word-break: break-word;     /* prevent long words from busting the box */
}

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

/* ===========================   CONTACT US PAGE   =========================== */
.enhanced-hero-contactus{
    position: relative;
    width: 100vw;                 /* Full viewport width */
    margin-left: calc(50% - 50vw); /* Break out of container */
    
    min-height: 60vh;            /* Full screen height (optional) */
    height: 70vh;            /* Full screen height (optional) */
    
    background-image: url('/content/hero-images/contact-us.jpg');
    background-size: cover;       /* Cover entire section */
    background-position: center;  /* Keep image centered */
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;
    padding: 0 20px;
}

/* Main wrapper */
.enhanced-contact-main {
  background: transparent;
  min-height: 100vh;
}

/* --- Hero (reuses .enhanced-hero title/subtitle already present) --- */
.enhanced-contact-main .enhanced-hero {
  text-align: center;
  padding: var(--spacing-xl) 0 var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

/* --- Quick Contact options (3 cards) --- */
.contact-options-contactus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin: var(--spacing-md) 0 var(--spacing-lg);
}

.contact-option-contactus {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.contact-option-contactus:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.option-icon-contactus {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  display: grid;
  place-items: center;
  margin-bottom: var(--spacing-sm);
  box-shadow: 0 10px 24px rgba(238, 126, 52, 0.30);
}

.option-title-contactus {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--primary-color);
  margin-bottom: 4px;
}

.option-description-contactus {
  color: var(--gray-dark);
  margin-bottom: 6px;
}

.option-link-contactus {
  color: var(--gray-dark);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.option-link-contactus:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* --- Form + Info two-column layout --- */
.contact-content-contactus {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-lg);
  align-items: stretch;
  margin-bottom: var(--spacing-xl);
  margin-top: var(--spacing-lg);
}
.contact-form-section-contactus,
.contact-info-section-contactus {
    height: 100%;
    display: flex;
    flex-direction: column;
}
/* Form column */
.contact-form-section-contactus {
      border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-md) var(--spacing-lg); /* Reduced padding */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    max-height: 100%; /* Ensure it doesn't overflow */
    /* overflow-y: auto; */
    position: relative;
    overflow: hidden;
}
.contact-form-section-contactus::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.contact-form-section-contactus:hover::after,
.contact-form-section-contactus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.contact-form-section-contactus .section-title-contactus {
    font-size: 1.6rem; /* Slightly smaller */
    margin-bottom: 4px;
}
.contact-form-section-contactus .section-description-contactus {
    margin-bottom: var(--spacing-sm); /* Reduced margin */
    font-size: 0.95rem;
}

.section-title-contactus {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: var(--spacing-xs);
}

.section-description-contactus {
  color: var(--gray-dark);
  margin-bottom: var(--spacing-md);
  font-size: 1.30rem;
}

.contact-form-contactus .form-row-contactus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* gap: var(--spacing-sm); */
   gap: 0.3rem; 
}

.contact-form-contactus .form-group-contactus {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--spacing-sm);
}

.contact-form-contactus label {
    font-weight: 600;
    /* margin-bottom: 4px; */
    color: var(--dark-color);
    font-size: 0.9rem;
}

.contact-form-contactus input,
.contact-form-contactus select,
.contact-form-contactus textarea {
    appearance: none;
    font: inherit;
    padding: 6px 10px; /* Reduced padding */
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: var(--radius-md);
    background: #fff;
    color: var(--dark-color);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
    font-size: 0.95rem;
    border-color: #e74c3c;
}

.contact-form-contactus textarea {
    resize: vertical;
    min-height: 80px; /* Reduced from 6 rows equivalent */
    max-height: 120px;
}

.contact-form-contactus input:focus,
.contact-form-contactus select:focus,
.contact-form-contactus textarea:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary-color) 25%, transparent);
}

.contact-form-contactus input:invalid[required],
.contact-form-contactus select:invalid[required],
.contact-form-contactus textarea:invalid[required] {
  border-color: #e74c3c;
}

.form-check-contactus {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--spacing-xs);
    align-items: start;
    margin: 4px 0 var(--spacing-sm);
}

.form-check-contactus label {
  font-size: 0.85rem;
  color: var(--gray-dark);
}

/* Info sidebar */
.contact-info-section-contactus {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    height: 100%;
}

.contact-info-card-contactus {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    flex: 1 1 auto; /* Allow cards to grow/shrink as needed */
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0; /* Prevent flex overflow issues */
    position: relative;
    overflow: hidden;
}
.contact-info-card-contactus::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.contact-info-card-contactus:hover::after,
.contact-info-card-contactus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.info-title-contactus {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary-color);
  margin-bottom: var(--spacing-sm);
}

.info-item-contactus {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--spacing-sm);
  align-items: start;
  padding: 10px 0;
  /* border-bottom: 1px dashed rgba(0,0,0,0.08); */
}

.info-item-contactus:last-child {
  border-bottom: none;
}

.info-icon-contactus {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(238, 126, 52, 0.30);
}

.quick-links-contactus {
  list-style: none;
  padding: 0;
  margin: 0;
}

.quick-links-contactus li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}

.quick-links-contactus a {
  color: var(--primary-dark);
  text-decoration: none;
  font-weight: 600;
}

.quick-links-contactus a:hover {
  color: var(--primary-color);
}

/* --- Consultation cards (3-up) --- */
.consultation-section-contactus {
  /* padding: var(--spacing-xl) 0; */
}

.section-header-contactus {
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

.consultation-options-contactus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.consultation-option-contactus {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  text-align: center;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  position: relative;
    overflow: hidden;
}
.consultation-option-contactus::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.consultation-option-contactus:hover::after,
.consultation-option-contactus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.consultation-option-contactus:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.consultation-icon-contactus {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-sm);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  display: grid;
  place-items: center;
}

.consultation-title-contactus {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 4px;
}

.consultation-description-contactus {
  color: var(--gray-dark);
  margin-bottom: var(--spacing-sm);
}

/* --- Resources grid (3-up) --- */
.resources-section-contactus {
  padding: var(--spacing-xl) 0;
}

.resources-grid-contactus {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
}

.resource-card-contactus {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--spacing-sm);
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.resource-card-contactus:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.resource-icon-contactus {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: #fff;
  display: grid;
  place-items: center;
}

.resource-title-contactus {
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: 4px;
}

.resource-description-contactus {
  color: var(--gray-dark);
  margin-bottom: 6px;
}

.resource-link-contactus {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: none;
}
.resource-link-contactus:hover { color: var(--primary-color); }

/* --- Map & Getting Here --- */
.map-section-contactus {
  padding: var(--spacing-xl) 0 var(--spacing-lg);
}

.map-container-contactus {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--spacing-lg);
    align-items: stretch;
}

.map-placeholder-contactus {
    min-height: 400px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-xl);
    padding: var(--spacing-lg);
    text-align: center;
}

.map-content-contactus i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-md);
}

.location-details-contactus h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid rgba(238, 126, 52, 0.2);
}
.map-content-contactus h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}
.transport-options-contactus {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.map-content-contactus .btn-secondary {
    margin-top: var(--spacing-md);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.map-content-contactus p {
    color: var(--gray-dark);
    margin-bottom: 8px;
}

.transport-contactus {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: var(--spacing-md);
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: transform var(--transition-normal);
    position: relative;
    overflow: hidden;
}
.transport-contactus::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease;
    background-size: 200% 100%;
    animation: gradient-pan 3s linear infinite paused;
    z-index: 1;
}
.transport-contactus:hover::after,
.transport-contactus:focus-within::after {
  transform: scaleX(1);
  animation-play-state: running;
}
.transport-contactus:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.transport-contactus i {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}
.transport-contactus div {
    flex: 1;
}
.transport-contactus h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 4px;
}
.transport-contactus p {
    color: var(--gray-dark);
    font-size: 0.95rem;
    margin: 0;
}
.map-section-contactus .section-header-contactus {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    width: 100%;
}
.map-section-contactus .section-title-contactus {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}
/* Social links inside the contact info card (bottom row) */
.social-links-contactus {
  margin-top: var(--spacing-sm);
  padding-top: var(--spacing-sm);
  /* border-top: 1px dashed rgba(0, 0, 0, 0.08); */
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.social-links-contactus .social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  /* background: rgba(255, 255, 255, 0.6); */
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}

.social-links-contactus .social-link:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
}

.social-links-contactus .social-link img {
  width: 20px;
  height: 20px;
  display: block;
}

/* Optional brand tints on hover */
.social-links-contactus .social-link.fb:hover { color: #1877F2; }
.social-links-contactus .social-link.tw:hover { color: #111; }  /* X */
.social-links-contactus .social-link.ig:hover { color: #E1306C; }
.social-links-contactus .social-link.ln:hover { color: #0414f5; }
.social-links-contactus .social-link.pt:hover { color: #d60d06f8; }

/* If the card ever uses grid gaps at the bottom, keep spacing consistent */
.contact-info-card-contactus .social-links-contactus:last-child {
  margin-top: var(--spacing-sm);
}

/* ===== Consultation Modal (centered) ===== */
.consultation-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 10000;

  /* Center the dialog perfectly */
  display: none;           /* default */
}
.consultation-modal.open {
  display: grid;           /* turn on grid only when open */
  place-items: center;     /* center horizontally + vertically */
}

.consultation-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Dialog */
.consultation-modal__dialog {
  position: relative; z-index: 1;
  width: min(720px, 92vw);
  /* keep 6vh/6vw breathing room from screen edges */
  margin: 0;
  padding: var(--spacing-xl);
  background: rgba(255, 255, 255, 0.98);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid rgba(238, 126, 52, 0.12);

  /* Ensure it never gets hidden by header and fits viewport */
  max-height: calc(100vh - (var(--header-height) + 10vh));
  overflow: auto;
}

/* Close button, unchanged */
.consultation-modal__close {
  position: absolute; top: 10px; right: 14px;
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: rgba(0,0,0,0.04); color: var(--dark-color);
  font-size: 1.4rem; cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.consultation-modal__close:hover { background: rgba(0,0,0,0.08); transform: scale(1.05); }


/*=================contactus--end=====================================*/

/* base animation */
.enhanced-hero-oursolutions{
    position: relative;
    width: 100vw;                 /* Full viewport width */
    margin-left: calc(50% - 50vw); /* Break out of container */
    
    min-height: 60vh;            /* Full screen height (optional) */
    height: 70vh;             /* Full screen height (optional) */
    
    background-image: url('/content/hero-images/our-solution.jpg');
    background-size: cover;       /* Cover entire section */
    background-position: center;  /* Keep image centered */
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    text-align: center;
    padding: 0 20px;
}
        .split-section-oursolutions {
            
            position: relative;
            isolation: isolate; 
            z-index: 0;
            margin-bottom: var(--spacing-md);
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
        .split-section-oursolutions.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* main container uses flex column – description on top, then row */
        .split-content-oursolutions {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-lg);
        }

        .split-row-oursolutions {
            /* order: 2; */         
            display: flex;
            align-items: stretch;
            gap: var(--spacing-xl);
        }

        /* description row – spans full width, placed at the top */
        .split-description-oursolutions {
            order: 1;
            width: 100%;
            margin: 0; /* gaps handle vertical spacing */
            font-size: 1.15rem;
        }

        .split-image-content-oursolutions,
        .split-text-oursolutions {
            flex: 1 1 0;
            display: flex;
            flex-direction: column;
            min-height: 0;  
            min-width: 0;              
        }

        /* two‑column row for image + cards */
        .split-row-oursolutions {
            display: flex;
            flex-wrap: nowrap;            /* keep columns side-by-side on desktop */
            gap: var(--spacing-xl);
            align-items: stretch;         /* equalize column heights */
            min-height: 500px;

        }

        /* left/right columns */
        .split-image-content-oursolutions {
            flex: 1 1 320px;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
            height: auto;
             min-height: 0;
        }

        .split-header-oursolutions {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            margin-top: 10px;
        }

        .split-header-oursolutions { order: 0; }

        .split-icon-oursolutions {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.8rem;
            box-shadow: 0 8px 25px rgba(238,126,52,0.3);
            flex-shrink: 0;
        }

        .split-title-oursolutions {
            font-size: 2rem;
            font-weight: 800;
            color: var(--primary-color);
            margin: 0;
            border-bottom: 4px solid rgba(238, 126, 52, 0.37);
            flex: 1;
            min-width: 0;
            word-break: break-word;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .solution-column-image {
            /* display: block; */
                display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-lg);
            align-items: stretch;
            height: 100%;                 /* take full height of parent */
            overflow-y: auto;             /* enable scrolling if cards overflow */
            padding-right: 4px;
            max-height: 500px;
            object-fit: contain;
        }

        .split-image-content-oursolutions,
        .split-text-oursolutions {
            flex: 1 1 0;
            display: flex;
            flex-direction: column;
        }

        /* right column: product cards */
        .split-text-oursolutions {
            flex: 1 1 320px;
            display: flex;
            flex-direction: column;
            height: auto;
            min-height: 0;
        }

        .enhanced-products-container-oursolutions {
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-lg);
            align-items: stretch;
            flex: 1;
            overflow: hidden;
            padding-right: 4px;

        }

        /* product card styling */
        .enhanced-product-card-oursolutions {
            flex: 1 1 280px;
            min-width: 260px;
            height: 100%;                 /* let card determine its own height */
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255,255,255,0.3);
            /* box-shadow: 0 8px 16px rgba(0,0,0,0.25); */
            border-radius: var(--radius-lg);
            padding: var(--spacing-lg);
            transition: all 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .enhanced-product-card-oursolutions::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
        }

        .enhanced-product-card-oursolutions:hover {
            transform: translateY(-8px) scale(1.01);
            /* box-shadow: 0 20px 40px rgba(0,0,0,0.15); */
            border-color: rgba(238,126,52,0.3);
            background: rgba(255,255,255,0.25);
        }

        .enhanced-product-card-oursolutions:hover::after {
            transform: scaleX(1);
        }

        .enhanced-product-header-oursolutions {
            display: flex;
            align-items: center;
            gap: var(--spacing-sm);
            margin-bottom: var(--spacing-sm);
        }

        .enhanced-product-icon-oursolutions {
            width: 55px;
            height: 55px;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.8rem;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .enhanced-product-text-oursolutions {
            flex: 1;
        }

        .enhanced-product-title-oursolutions {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--primary-color);
            margin: 0 0 4px;
        }

        .enhanced-product-tagline-oursolutions {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--gray-dark);
            opacity: 0.9;
        }

        .enhanced-product-description-oursolutions {
            font-size: 0.95rem;
            color: var(--gray-dark);
            line-height: 1.6;
            /* margin-bottom: var(--spacing-md); */
        }

        .enhanced-product-features-oursolutions {
            list-style: none;
            padding-left: 0;
            margin: var(--spacing-sm) 0;
        }

        .enhanced-product-features-oursolutions li {
            padding-left: 1.5rem;
            position: relative;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
            color: var(--gray-dark);
        }

        .enhanced-product-features-oursolutions li::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: var(--primary-color);
            font-weight: bold;
        }

        .enhanced-product-actions-oursolutions {
            margin-top: 5px;
            display: flex;
            flex-wrap: wrap;
            gap: var(--spacing-sm);
            padding-top: var(--spacing-sm);
            border-top: 1px solid rgba(0,0,0,0.05);
        }
        
        
        .enhanced-product-actions-oursolutions .btn,
        .enhanced-cta-buttons .btn {           
            white-space: nowrap;       /* single line */
            overflow: hidden;          /* clip overflow */
            text-overflow: ellipsis;   /* show … if clipped by width */
            word-break: normal;
            hyphens: none;
            box-sizing: border-box;
            flex: 0 1 auto;            /* allow growth if there is room */
            max-width: 100%; 
                    /* no automatic hyphenation */
        }
        
        .enhanced-product-actions-oursolutions,
        .enhanced-cta-buttons {
            display: flex;
            gap: var(--spacing-sm);
            flex-wrap: wrap;           /* critical for mobile and narrow widths */
            align-items: stretch;
        }

        .split-section-oursolutions:nth-of-type(even) .split-row-oursolutions {
        flex-direction: row-reverse;  /* image <-> text swap */
        }

        /* Option B (kept for compatibility): respect your `.alternate` class */
        .split-section-oursolutions.alternate .split-row-oursolutions {
        flex-direction: row-reverse;
        }

        /* alternate layout: image on the right (applied to the row) */
        .split-section-oursolutions.alternate .split-row-oursolutions {
            flex-direction: row-reverse;
        }
        .split-section-oursolutions .split-image-content-oursolutions {
            position: relative;
            overflow: hidden;
        }
        /* hide broken images */
        .solution-column-image[src=""],
        .solution-column-image:not([src]) {
            display: none;
        }

    /* Workforce Asset Carousel Styles */
/* Workforce Asset Carousel - Dot Controlled */
.workforce-carousel-container {
    width: 100%;
    position: relative;
    padding: 10px 0;
}

.workforce-carousel-viewport {
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.workforce-carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.workforce-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Dot indicators - Now clickable and visible */
.workforce-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    padding: 10px 0;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--primary-color);
    opacity: 0.3;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
}

.carousel-dot:hover {
    opacity: 0.7;
    transform: scale(1.2);
}

.carousel-dot.active {
    opacity: 1;
    width: 30px;
    border-radius: 15px;
    background: var(--primary-color);
    cursor: default;
    transform: scale(1);
}

/* Card styling enhancements */
.workforce-carousel-slide .enhanced-product-card-oursolutions {
    height: 100%;
    margin: 0;
    /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
}

/* reCAPTCHA v3 badge positioning */
.grecaptcha-badge {
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: 100px !important; /* Above scroll-to-top */
    right: 30px !important;
    z-index: 998 !important;
    
    /* Minimal size - icon only */
    width: 70px !important;
    height: 60px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: white !important;
    animation: gentlePulse 2s ease 3 !important;
    animation-delay: 1s !important;
}
.grecaptcha-badge:hover {
    width: 256px !important; /* Standard reCAPTCHA width */
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
}
@keyframes gentlePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
        /*=================oursolution--end=====================================*/

/*====================roi calc========================*/

.results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 cards per row */
    gap: 20px;
  align-items: stretch;
}
.result-card:nth-child(3) {
    grid-column: 1 / -1; /* span full row */
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-lg);
}

/* Unify all calculator "cards" with site-wide card language */
.result-card,
.how-step {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.30);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}
.result-card:nth-child(3) {
    overflow-x: auto !important;
}
.roi-card {
    /* background: rgba(255, 255, 255, 0.92); */
    max-width: 1200px;
    margin: 0 auto 2rem auto;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    /* border-left: 5px solid var(--primary-color); */
    backdrop-filter: blur(6px);
}

.roi-card fieldset {
    border: none;
    padding: 0;
    margin: 0;
}
.roi-card legend {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* Spacing / typography variations per block */
.result-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
}

.result-card .actions {
    margin-top: auto; 
    padding-top: 1rem;
}

.result-card h3 {
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: var(--spacing-sm);
}

/* bottom accent bar like other cards */
.result-card::after,
.how-step::after,
.kpi::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--primary-dark));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms ease;
  background-size: 200% 100%;
  /* matches pattern used by insight/industry cards */
  animation: gradient-pan 3s linear infinite paused;
}
.result-card:hover::after,
.how-step:hover::after,
.kpi:hover::after {
  transform: scaleX(1);
  animation-play-state: running;
}

/* Key-value list inside result cards */
.result-card .kv {
  margin-bottom: 1rem;
  text-align: left;
  padding-left: 0;
}
.result-card .kv li {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(0,0,0,.08);
}
.result-card .kv li:last-child { border-bottom: none; }
.result-card .kv span { color: var(--gray-dark); }
.result-card .kv strong { color: var(--primary-color); }

/* KPI tiles in hero */
.roi-hero-kpis {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    justify-content: center;
    padding-top: var(--spacing-xl);
    margin-bottom: -40px;
}

.roi-hero-kpis .kpi {
    flex: 1 1 200px; /* responsive, equal width */
    max-width: 250px; 
    background: rgba(255, 255, 255, 0.9);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: var(--shadow-md);
}

.kpi-label {
  display: block;
  font-size: .9rem;
  color: var(--gray-dark);
}
.kpi-value {
  display: block;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--primary-color);
  margin-top: 2px;
}

/* How-it-works steps aligned with cards */
.how-step {
  padding: var(--spacing-lg);
  text-align: left;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.how-step i {
  color: var(--primary-color);
  font-size: 1.6rem;
  margin-bottom: var(--spacing-sm);
}
.how-step h3 {
  color: var(--primary-color);
  font-weight: 700;
  margin-bottom: 6px;
}
.how-step p { color: var(--gray-dark); }
.how-step:hover { transform: translateY(-3px); box-shadow: var(--shadow-xl); }
#roiForm {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    background: #ffffff83;
}
/* Fieldset (roi-section) brought closer to site cards */
.roi-section {
  /* background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg); */
  border: 1px solid rgba(255, 255, 255, 0.30);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.field-row1,
.field-row2,
.field-row3,
.field-row4,
.field-row5,
.field-row6 {
    display: flex;
    flex-wrap: wrap;          /* allows wrapping to next row */
    gap: 12px;
    align-items: flex-start;
    padding: 10px;
}
.field-row1 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem; /* match field-row3 gap */
}

.form-field1 {
    max-width: 350px;
    width: 100%;
}

#industry {
    min-width: 220px;
     width: 100%;
}

.form-field2:has(#industry) {
  grid-column: span 2;
}

#payrollMethod {
  min-width: 320px;   /* adjust to taste */
  width: 100%;
}
#auditConfidence{
    min-width: 50%;
    width: 80%;
    padding: 10px;
}
.roi-section1,
.roi-section2,
.roi-section3,
.roi-section4,
.roi-section5 {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box; 
}

.form-field1, .form-field2, .form-field3, .form-field4, .form-field5, .form-field6 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;   /* responsive width */
    max-width: auto;  /* prevents oversized fields */
    min-width: 0;
}
.form-field1 label,
.form-field2 label,
.form-field3 label,
.form-field4 label,
.form-field5 label,
.form-field6 label {
    white-space: nowrap;
    font-size: 0.9rem;
    min-width: fit-content;
}
.roi-section2 label,
.roi-section3 label,
.roi-section4 label,
.roi-section5 label {
    min-width: 180px;
    font-size: 0.9rem;
}
.roi-section1 legend,
.roi-section2 legend,
.roi-section3 legend,
.roi-section4 legend,
.roi-section5 legend {
    color:var(--primary-color);
    font-weight: 700;
}
.form-field1 input,
.form-field2 input,
.form-field3 input,
.form-field4 input,
.form-field5 input,
.form-field6 input,
.form-field1 select,
.form-field2 select,
.form-field3 select,
.form-field4 select,
.form-field5 select,
.form-field6 select {
    width: 120px;
    min-width: 100px;
    max-width: 140px;
    padding: 4px 6px;
    font-size: 0.85rem;
}

.roi-section1 .field-row2 {
    display: flex;
    flex-wrap: wrap !important; /* allow wrapping only in this section */
}

.roi-section1 .field-row2 .form-field2 {
    flex: 1 1 30%;
    min-width: 280px;
}

.roi-section2 .field-row3,
.roi-section3 .field-row4,
.roi-section4 .field-row5,
.roi-section5 .field-row6 {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    gap: 16px 24px;
    align-items: center;
}

.roi-section2 .form-field3,
.roi-section3 .form-field4,
.roi-section4 .form-field5,
.roi-section5 .form-field6 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.roi-section3 .form-field {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-start; /* instead of space-between */
}
.roi-section3 .form-field label {
    width: 100%;  /* same as others */
}
input[type="range"] {
    -webkit-appearance: none;
    width: 120px;
    height: 4px;
    background: #ddd;
    border-radius: 4px;
    outline: none;
}

/* Thumb (Chrome, Edge, Safari) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    background: #e4620bf6; /* your primary color */
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
}

/* Track fill (Chrome trick using gradient) */
input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(to right, #e4620bf6 var(--value, 50%), #ddd var(--value, 50%));
}

/* Firefox */
input[type="range"]::-moz-range-thumb {
    height: 14px;
    width: 14px;
    background: #e4620bf6;
    border: none;
    border-radius: 50%;
}

input[type="range"]::-moz-range-progress {
    background-color: #e4620bf6;
    height: 4px;
}

input[type="range"]::-moz-range-track {
    background: #ddd;
    height: 4px;
}
/* Labels aligned nicely */
.roi-section2 .form-field3 label {
    min-width: 180px;   /* IMPORTANT: keeps vertical alignment */
    font-size: 0.9rem;
}

/* Inputs compact */
.roi-section2 .form-field3 input,
.roi-section2 .form-field3 select {
    width: 120px;
    min-width: 100px;
    padding: 4px 6px;
    font-size: 0.85rem;
}

fieldset {
    padding: 10px 12px !important;
    margin: 10px 0 !important;
}

label {
    margin-bottom: 3px !important;
    display: block;
    word-wrap: break-word;
}

input, select {
    padding: 6px 8px !important;
}

.roi-section1 .form-field2 .split {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;   /* row stays single-line */
    overflow: hidden !important;    /* prevents right overflow */
}

/* ✅ Allow input groups to shrink but not break */
.roi-section1 .form-field2 .split > div {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    min-width: 50px !important;       /* necessary to avoid overflow */
    white-space: nowrap !important;
    justify-content: space-between;
}

/* ✅ Small “Tip” text stays on the same line but shrinks */
.roi-section1 .form-field2 .split small {
    white-space: nowrap !important;
    flex-shrink: 1 !important;     /* allow it to compress */
    opacity: 0.8;
}

/* ✅ Make the input fields narrower to fit cleanly */
#mixSalaried,
#mixHourly {
    width: 55px !important;
    min-width: 50px !important;
}

#empCount {
    width: 45px !important;    /* fits 2–3 digits */
    text-align: right;
}
.roi-section3 .form-field input[type="range"] {
    width: 120px;       /* control size */
    display: block;
}
.result-card .note {
  margin-top: 15px;
  padding-top: 12px;
  /* border-top: 1px solid #e5e7eb; */
  font-size: 0.85rem;
  color: #6b7280;
  line-height: 1.5;
  /* background-color: #f9fafb; */
  padding: 12px;
  border-radius: 8px;
  display: block !important;
}

.result-card .note strong {
  color: var(--primary-color);
  font-weight: 700;
}
.split div {
  display: flex;
  flex-wrap: wrap;   /* allow wrapping */
  gap: 6px;
}

.split span {
  word-break: break-word;
}
/* Actions row spacing consistency */
.section .actions { margin-top: var(--spacing-md); display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }
.enhanced-cta-roi{
    padding: var(--spacing-md);
}
/* Table (snapshot) small polish to match theme */
.snapshot {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  
}
.snapshot thead th {
  background: rgba(238, 126, 52, 0.10);
  color: var(--primary-color);
  text-align: left;
  padding: .75rem;
}
.snapshot tbody td {
  padding: .65rem .75rem;
  border-top: 1px solid rgba(0,0,0,.05);
  color: var(--gray-dark);
  text-align: left;
}

.benchmarks {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.benchmarks table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    margin-top: var(--spacing-md);
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-md);
}
.enhanced-section p{
    margin-bottom: var(--spacing-sm);
}
.benchmarks thead th {
    background: rgba(238, 126, 52, 0.10); /* subtle primary tint */
    color: var(--primary-color);
    font-weight: 700;
    text-align: left;
    padding: 12px 16px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

.benchmarks tbody td {
    padding: 12px 16px;
    font-size: 0.95rem;
    color: var(--gray-dark);
    border-bottom: 1px solid rgba(0,0,0,.05);
    text-align: left;
}

.benchmarks tbody tr:last-child td {
    border-bottom: none;
}

/* Optional: Row hover for readability */
.benchmarks tbody tr:hover {
    background: rgba(0,0,0,0.03);
}

.benchmarks::-webkit-scrollbar {
    height: 6px;
}
.benchmarks::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  width: 16px;
  height: 16px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  color: #555;
  cursor: help;
}

.info-tip:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.roi-card1 .form-field1.error input,
.roi-card1 .form-field1.error select,
.roi-card1 .form-field2.error input,
.roi-card1 .form-field2.error select,
.roi-card1 .form-field3.error input,
.roi-card1 .form-field3.error select,
.roi-card1 .form-field4.error input,
.roi-card1 .form-field4.error select,
.roi-card1 .form-field5.error input,
.roi-card1 .form-field5.error select,
.roi-card1 .form-field6.error input,
.roi-card1 .form-field6.error select {
    border-color: #dc3545;
    background-color: #fff8f8;
}
.field-error-msg {
    color: #dc3545;
    font-size: 0.7rem;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.field-error-msg i {
    font-size: 0.65rem;
}
.validation-toast {
    position: fixed;
    top: 100px;
    right: 20px;
    background: #dc3545;
    color: white;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    max-width: 350px;
    animation: slideIn 0.3s ease;
    pointer-events: none;
}
.validation-toast i {
    font-size: 1.1rem;
}
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.validation-summary-inline {
    background: #fff3f3;
    border-left: 4px solid #dc3545;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 12px;
    display: none;
}
.validation-summary-inline ul {
    margin: 8px 0 0 20px;
    color: #721c24;
}
.validation-summary-inline i {
    margin-right: 8px;
    color: #dc3545;
}

/* Print */
@media print{
  header, footer, #btnPrint, #btnSample, .actions a[href*="consultation"]{ display:none !important; }
  body{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .section{ page-break-inside:avoid; }
}
/* Additional styles for anchor sections */
    .insight-section {
      scroll-margin-top: 80px;
    }
    .back-to-insights {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: var(--spacing-md);
      color: var(--primary-color);
      font-weight: 600;
      text-decoration: none;
      transition: all var(--transition-fast);
    }
    .back-to-insights:hover {
      gap: 12px;
      color: var(--primary-dark);
    }
    .insight-navigation {
      display: flex;
      flex-wrap: wrap;
      gap: var(--spacing-sm);
      margin: var(--spacing-lg) 0;
      padding: var(--spacing-md);
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(8px);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .insight-nav-link {
      padding: 8px 16px;
      border-radius: var(--radius-md);
      color: var(--gray-dark);
      font-weight: 600;
      text-decoration: none;
      transition: all var(--transition-fast);
    }
    .insight-nav-link:hover {
      background: rgba(238, 126, 52, 0.1);
      color: var(--primary-color);
    }

/* ============================================
   RESPONSIVE STYLES FOR ALL DEVICES
   ============================================ */

/* Large Desktop (1400px and above) */
@media (min-width: 1400px) {
    .container {
        max-width: auto;
        margin: 0 auto;
    }
    
    .hero-title {
        font-size: 3.5rem;
    }
    
    .section-title {
        font-size: 2.8rem;
    }
}

/* Desktop (1200px to 1399px) */
@media (max-width: 1399px) {
    .container {
        max-width: 100%;
        margin: 0 auto;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .cards-container {
        gap: var(--spacing-sm);
    }
    
    .card {
        max-width: calc(25% - var(--spacing-sm));
        padding: var(--spacing-lg);
    }
}

/* Small Desktop / Large Tablet (992px to 1199px) */
@media (max-width: 1199px) {
    .container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 var(--spacing-md);
    }
    
    /* Header */
    .header {
        padding: 0 var(--spacing-md);
    }
    
    .nav-list {
        gap: var(--spacing-sm);
    }
    
    .nav-link {
        font-size: 0.95rem;
    }
    
    /* Hero Section */
    .hero-title {
        font-size: 2.8rem;
    }
    
    .hero-subtitle {
        font-size: 1.3rem;
    }
    
    /* Cards - 2x2 grid on tablet */
    .cards-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .card {
        max-width: 100%;
        margin-bottom: 0;
    }
    
    /* Insights */
    .insights-container {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* CTA Steps */
    .cta-steps {
        grid-template-columns: repeat(1fr);
    }
    
    .cta-step:last-child {
        grid-column: span 2;
    }
    
    /* Footer */
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg);
        align-items: left;
    }
}

/* Tablet (768px to 991px) */
@media (max-width: 991px) {
    :root {
        --spacing-xl: 3rem;
        --spacing-lg: 2rem;
        --spacing-md: 1.5rem;
    }
    
    body::before {
        position: fixed;
        padding-top: 0 !important;
        overflow-x: hidden !important;
    }

    .container {
        max-width: 100%;
    }

    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 60px !important;
        background: #ffffff !important;
        z-index: 999999 !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    }
    .header.scrolled{
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
    }

    .navnbar-wrapper {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        height: 100% !important;
        padding: 0 15px !important;
        margin: 0 !important;
        background: transparent !important;
    }
    
    .logo-wrapper {
        flex: 0 1 auto !important;
        max-width: 70% !important;
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }
    .logo-wrapper a {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }
    .logo-img {
        height: 40px !important;
        width: auto !important;
        max-width: 140px !important;
        display: block !important;
    }
    
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 1000000 !important;
        color: #e4620b !important;
    }
    .mobile-menu-toggle i {
        font-size: 28px !important;
        color: #e4620b !important;
    }
    .menus-wrapper {
        position: fixed !important;
        top: var(--header-height, 60px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.3s ease-in-out !important;
        z-index: 99999 !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .menus-wrapper.open {
        max-height: calc(100vh - var(--header-height, 60px)) !important;
        overflow-y: auto !important;
    }
    
    .menus-wrapper .nav-list {
        display: flex !important;
        flex-direction: column !important;
        padding: 20px !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
    }
    
    .menus-wrapper .nav-item {
        display: block !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .menus-wrapper .nav-link {
        display: flex !important;
        padding: 12px 0 !important;
        color: #333 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Dropdown adjustments for mobile */
    .dropdown {
        position: static;
        background: transparent;
        box-shadow: none;
        padding: 0;
        min-width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: max-height 0.3s ease;
        max-height: 0;
        overflow: hidden;
        pointer-events: all;
    }
    
    .nav-item.has-dropdown:hover > .dropdown,
    .nav-item.has-dropdown:focus-within > .dropdown {
        max-height: 400px;
        transform: none;
    }
    
    .dropdown-item {
        padding: 0.75rem 1rem 0.75rem 2rem;
        white-space: normal;
    }
    .dropdown-item:last-child {
        border-bottom: none;
    }
    .submenu {
        position: static;
        background: transparent;
        box-shadow: none;
        padding: 0 0 0 1rem;
        opacity: 1;
        visibility: visible;
        transform: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        pointer-events: all;
    }
    
    .dropdown .has-submenu:hover > .submenu,
    .dropdown .has-submenu:focus-within > .submenu {
        max-height: 300px;
        transform: none;
    }
    
    .nav-list > .nav-item.has-dropdown:last-child .dropdown,
    .nav-list > .nav-item.has-dropdown:nth-last-child(2) .dropdown {
        right: auto;
        left: 0;
    }
    
    .nav-list > .nav-item.has-dropdown:last-child .submenu,
    .nav-list > .nav-item.has-dropdown:nth-last-child(2) .submenu {
        right: auto;
        left: 0;
    }
    /* Hide dropdown indicators on mobile initially */
    .nav-item.has-dropdown > .nav-link .chev,
    .dropdown .has-submenu > .dropdown-item .chev {
        transition: transform var(--transition-normal);
    }
    .nav-item.has-dropdown.dropdown-open > .dropdown {
        max-height: 400px;
        padding: var(--spacing-xs) 0;
    }
    
    .has-submenu.submenu-open > .submenu {
        max-height: 300px;
        padding: var(--spacing-xs) 0;
    }
    
    .nav-item.has-dropdown.dropdown-open > .nav-link .fa-chevron-down {
        transform: rotate(180deg);
    }
    
    .has-submenu.submenu-open > .dropdown-item .fa-chevron-down {
        transform: rotate(180deg);
    }
    /* Hero Section */
    .hero {
        min-height: auto;
        padding: var(--spacing-xl) 0;
    }
    
    .hero-card {
        padding: var(--spacing-lg);
        max-height: 120px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .hero-cta {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .hero-cta .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    

    .section-title {
        font-size: 2.2rem;
    }
    
    .section-description {
        font-size: 1rem;
        padding: 0 var(--spacing-md);
    }
    
    /* Cards */
    .cards-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .card {
        max-width: 100%;
    }
    
    .card-icon {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
    
    /* Insights */
    .insights-container {
        grid-template-columns: 1fr;
    }
    
    .insight-card {
        max-width: 100%;
    }
    
    .insight-image-home {
        height: 180px;
    }
    
    /* CTA Steps */
    .cta-steps {
        grid-template-columns: 1fr;
    }
    
    .cta-step {
        grid-column: auto !important;
    }
    
    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    /* Process Timeline (for ourprocess page) */
    .process-timeline-ourprocess {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md) !important;
        margin-bottom: var(--spacing-sm);
    }
    
    .process-phase-ourprocess {
        min-height: auto;
    }
    .metrics-grid-ourprocess{
        grid-template-columns: repeat(1fr);
    }
    .enhanced-title, .enhanced-cta-title{
        font-size: 1.8rem;
    }
    .enhanced-subtitle{
        font-size: 1.15rem;
    }
    .split-icon-ourservice{
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
    }
    .split-title-ourservice{
        font-size: 1.3rem;
    }
    /* Split sections for all pages */
    .split-content-ourservice,
    .split-content-industries,
    .split-content-ourprocess,
    .split-content-aboutus {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-md);
    }
    
    .split-image-ourservice,
    .split-image-industries,
    .split-image-ourprocess {
        max-height: 300px;
        grid-column: 1 !important;
    }
    
    .split-text-ourservice,
    .split-text-industries,
    .split-text-ourprocess {
        grid-column: 1 !important;
    }
    .split-title-oursolutions {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.9rem;
    }
    .split-section-ourservice .split-image-ourservice,
    .split-section-ourservice .split-text-ourservice {
        grid-column: 1 / -1 !important;
        order: initial !important;  /* <-- critical line */
    }
    
    .split-section-ourservice .split-header-ourservice,
    .split-section-ourservice .split-description-ourservice {
        grid-column: 1 / -1 !important;
    }
    .split-section-oursolutions{
        margin-top: var(--spacing-sm);
    }
    .split-row-oursolutions {
        display: flex;
        flex-direction: column !important;
        gap: 20px;
    }
    .split-row-oursolutions.alternate {
        flex-direction: column !important;
    }
    .split-section-oursolutions .split-row-oursolutions {
        flex-direction: column !important;
    }
    
    .split-image-content-oursolutions,
    .split-text-oursolutions {
        width: 100% !important;
        max-width: 100%;
        flex: 0 0 100%;
    }
    .enhanced-product-card-oursolutions {
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .enhanced-product-actions-oursolutions {
        flex-direction: column;
        align-items: stretch;
    }

    .enhanced-product-actions-oursolutions .btn {
        width: 100% !important;
        white-space: normal;
    }
    .split-row-oursolutions:not(.alternate) 
    .split-image-content-oursolutions {
        order: 1;
    }

    .split-row-oursolutions:not(.alternate) 
    .split-text-oursolutions {
        order: 2;
    }

    /* Correct order for alternate layout */
    .split-row-oursolutions.alternate 
    .split-image-content-oursolutions {
        order: 1;   /* image first */
    }

    .split-row-oursolutions.alternate 
    .split-text-oursolutions {
        order: 2;   /* text below */
    }
    .solution-column-image {       
        width: 100%;
        height: auto;
        max-height: clamp(220px, 40vh, 460px);
        object-fit: contain;
        display: block;
    }
    
    .workforce-carousel-container { position: relative; width: 100%; overflow: hidden;}
    .workforce-carousel-viewport { overflow: hidden; width: 100%; overflow: hidden;}

    .workforce-carousel-track {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease;
    will-change: transform;
    }

    .workforce-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    }
    .newsletter-section{
        margin-bottom: var(--spacing-sm);
    }
    /* Dots – keep them small and tappable on 412px */
    .workforce-carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 12px;
    }
    .carousel-dot {
    width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid var(--primary-color);
    background: rgba(0,0,0,.1);
    cursor: pointer; transition: transform .2s, background .2s;
    }
    .carousel-dot.active { background: var(--primary-color); transform: scale(1.15); }

    .trust-solutions-cards-industries {
      flex-direction: column;
    }
    .split-icon-industries{
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
    }
    .split-title-industries, .phase-title-ourprocess    {
        font-size: 1.3rem;
    }
    .trust-cards-grid {
        grid-template-columns: 1fr;
    }

    .trust-image-side {
        margin-top: var(--spacing-md);
    }
    .section-title-ourprocess{
        font-size: 2rem;
    }
    .split-icon-ourprocess, .phase-number-ourprocess, .feature-icon-ourprocess, .service-icon-ourprocess{
        height: 40px;
        width: 40px;
        font-size: 1.3rem;
    }
    .split-title-ourprocess{
        font-size: 1.5rem;
    }
    /* Partnership sections */
    .partnership-with-image-ourprocess,
    .partnership-principles-with-image-ourprocess,
    .framework-with-image-ourprocess,
    .framework-benefits-with-image-ourprocess,
    .support-with-image-ourprocess {
        grid-template-columns: 1fr !important;
    }
    
    .partnership-image-wrapper-ourprocess,
    .principles-image-wrapper-ourprocess,
    .framework-image-wrapper-ourprocess,
    .benefits-image-wrapper-ourprocess,
    .support-image-wrapper-ourprocess {
        min-height: 250px;
        order: -1;
    }
    
    .metrics-grid-ourprocess {
        grid-template-columns: repeat(1, 1fr);
        gap: var(--spacing-md);
    }
    
    .feature-ourprocess {
        display: flex;
        flex-direction: column;
        align-items: center;     /* centers icon + text */
        text-align: center;      /* center text */
    }

    .feature-icon-ourprocess, .service-icon-ourprocess {
        margin: 0 auto;          /* center icon block */
    }

    /* ===== FIX: CENTER HEADINGS IN SPLIT SECTIONS ===== */

    .split-section-ourprocess h3 {
        text-align: center;
        width: 100%;
    }
    .process-icon-ourprocess{
        height: 50px;
        width: 50px;
        font-size: 1.2rem;
    }
    /* Contact page */
    .contact-content-contactus {
        grid-template-columns: 1fr !important;
    }
    
    .contact-options-contactus,
    .consultation-options-contactus,
    .resources-grid-contactus {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .consultation-options-contactus {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
    }

    .consultation-option-contactus:nth-child(3) {
        grid-column: 1 / -1 !important;
    }
    .map-container-contactus {
        grid-template-columns: 1fr !important;
    }
    .social-links-contactus {
        flex-direction: column;   
        align-items: flex-start;  
        gap: 8px;
    }
    .social-links-contactus .social-link{
        width: 100%;              /* optional: full width inside card */
        justify-content: flex-start;
    }
    .consultation-icon-contactus{
        height: 40px;
        width: 40px;
        font-size: 1.3rem;
    }
    /* About Us page */
    .values-grid-aboutus,
    .leadership-grid-aboutus,
    .certifications-grid-aboutus {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .team-stats-aboutus {
        grid-template-columns: repeat(2, 1fr);
    }

    .split-header-aboutus {
        display: flex;
        align-items: center;
        justify-content: flex-start; /* keep left */
        gap: 10px;
    }

    .split-icon-aboutus {
        margin: 0;
    }

    .split-title-aboutus {
        margin: 0;
    }
    .testimonial-slider-aboutus {
        grid-template-columns: 1fr;
    }
    .partners-logos-aboutus{
        grid-template-columns: 1fr;
    }
    .success-metrics-aboutus{
        grid-template-columns: 1fr;
    }
    .logos-grid-aboutus{
        grid-template-columns: 1fr;
    }
    .principle-aboutus, .principle-content-aboutus{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        text-align: left;
    }
    .footer-bottom{
        padding: 0.4rem 0;
    }
    .footer-logo {
        display: flex;
        justify-content: left;
    }
    
    .footer-description {
        /* margin-left: auto; */
        margin-right: auto;
        justify-content: left;
    }
    
    .footer-contact li {
        justify-content: left;
    }
    .field-row{ grid-template-columns: 1fr; }
    .results-grid{ grid-template-columns: 1fr; }
    .how-grid{ grid-template-columns: 1fr; }
    #roiForm {
        padding: 10px;
        padding-bottom: 30px;
        background: #ffffff83;
        width: 100%;
    }

    .benchmarks table th,
    .benchmarks table td {
        font-size: 0.85rem;
        padding: 6px 8px;
    }
    .enhanced-hero{
        margin-top: var(--spacing-lg);
        padding-top: 100px;
    }
    .enhanced-cta{
        padding-bottom: 30px;
    }
    .enhanced-title {
        font-size: 1.6rem;
    }

    .section-title {
        font-size: 1.5rem;
    }
    
    
    .roi-card1 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Lock roi-section1 inside card */
    .roi-card1 > .roi-section1 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        margin: 0;
    }

    /* Force first row stack */
    .roi-section1 .field-row1 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 14px;
    }

    /* Force form fields to obey width */
    .roi-section1 .form-field1 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }


    .field-row1,
    .field-row2,
    .field-row3,
    .field-row4,
    .field-row5,
    .field-row6 {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /* Make every field full width */
    .form-field1,
    .form-field2,
    .form-field3,
    .form-field4,
    .form-field5,
    .form-field6 {
        width: 100% !important;
        max-width: 100%;
        flex-direction: column;
    }

    /* Improve label readability */
    .form-field1 label,
    .form-field2 label,
    .form-field3 label,
    .form-field4 label,
    .form-field5 label,
    .form-field6 label {
        font-size: 0.95rem;
        line-height: 1.4;
        white-space: normal;
    }

    #roiForm input,
    #roiForm select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #roiForm .field-row1,
    #roiForm .field-row2,
    #roiForm .field-row3,
    #roiForm .field-row4,
    #roiForm .field-row5,
    #roiForm .field-row6 {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    
    #roiForm .form-field1,
    #roiForm .form-field2,
    #roiForm .form-field3,
    #roiForm .form-field4,
    #roiForm .form-field5,
    #roiForm .form-field6 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        box-sizing: border-box !important;
    }
    
    #roiForm fieldset {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    [class^="field-row"] {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    [class^="form-field"] {
        width: auto;
    }

    .snapshot {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    table {
        width: 100%;
        max-width: 100%;
        border-collapse: collapse;
    }

    /* Buttons */
    .btn {
        font-size: 1rem;
        /* padding: 12px; */
    }

    /* Result values */
    .kv li strong {
        font-size: 1rem;
    }
}


/* Mobile Landscape (576px to 767px) */
@media (max-width: 767px) {
    :root {
        --spacing-xl: 2.5rem;
        --spacing-lg: 1.8rem;
        --spacing-md: 1.2rem;
    }
    body::before {
        position: fixed;
        padding-top: 0 !important;
        overflow-x: hidden !important;
    }
    .container {
        max-width: 540px;
    }
    .header{
        background: rgba(255, 255, 255, 0.904) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    .header.scrolled{
        background: rgba(255, 255, 255, 0.452);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }
    .menus-wrapper{
        background: rgba(255, 255, 255, 0.322);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
    }

    /* Header */
    .logo-wrapper {
        flex: 0 0 60%;
    }
    
    .logo-img {
        width: 80%;
        height: auto;
    }
    .mobile-menu-toggle {
        display: inline-flex !important;
        position: relative !important;
        z-index: 1000000 !important;
        color: #000;
        align-items: center;
        justify-content: center;

    }
    
    /* Hero Section */
    .hero {
        padding: var(--spacing-lg) 0;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-card {
        padding: var(--spacing-md);
    }
    
    /* Cards */
    .card {
        padding: var(--spacing-md);
    }
    
    .card-icon {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }
    
    .card-title {
        font-size: 1.3rem;
    }
    
    .card-description {
        font-size: 0.95rem;
    }
    
    .card-list li {
        font-size: 0.95rem;
    }
    .split-section-oursolutions{
        margin-top: var(--spacing-sm);
    }
    /* Industries */
    .industries-container {
        gap: var(--spacing-lg);
    }
    
    .industry-item {
        max-width: 100%;
    }
    
    .industry-icon {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }
    
    .industry-title {
        font-size: 1.3rem;
    }
    .industry-challenge-cards-industries,
    .solution-cards-industries {
        grid-template-columns: 1fr;
    }
    .trust-solutions-cards-industries {
        grid-template-columns: 1fr;   /* Stack */
    }

    .trust-cards-grid {
        grid-template-columns: 1fr;   /* One card per row */
    }

    .trust-image-side {
        order: 2;                     /* Image below cards */
        margin-top: var(--spacing-md);
    }
    
    .trust-solutions-cards-industries.with-image {
        display: grid;
        grid-template-columns: 1fr;     /* stack */
        gap: var(--spacing-md);
    }
    .trust-solutions-cards-industries.with-image .trust-cards-grid {
        grid-template-columns: 1fr;     /* cards single column too */
    }
    .trust-solutions-cards-industries.with-image .trust-image-side {
        max-height: none;
        order: 2;                        /* put image below text (optional) */
    }
    .trust-solutions-cards-industries.with-image .trust-image-side img {
        width: 100%;
        height: auto;
        max-width: 100%;
        object-fit: contain;             /* prevent cropping on narrow screens */
    }

    /* Process phases */
    .process-phase {
        padding: var(--spacing-md);
    }
    
    .phase-title {
        font-size: 1.3rem;
    }
    
    /* Insights */
    .insight-content-home {
        padding: var(--spacing-md);
    }
    
    .insight-title-home {
        font-size: 1.2rem;
    }
    
    .insight-description {
        font-size: 0.95rem;
    }
    .newsletter-section{
        margin-bottom: var(--spacing-sm);
    }
    /* CTA */
    .cta-title {
        font-size: 2rem;
    }
    
    .cta-description {
        font-size: 1rem;
    }
    
    .step-title {
        font-size: 1.2rem;
    }
    
    .step-description {
        font-size: 0.95rem;
    }
    
    /* Contact page */
    .contact-options-contactus,
    .consultation-options-contactus,
    .resources-grid-contactus {
        grid-template-columns: 1fr !important;
    }
    
    .contact-form-contactus .form-row-contactus {
        grid-template-columns: 1fr;
    }
    
    .contact-info-card-contactus {
        padding: var(--spacing-md);
    }
    
    .info-item-contactus {
        grid-template-columns: 40px 1fr;
    }
    
    .info-icon-contactus {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    /* About Us page */
    .values-grid-aboutus,
    .leadership-grid-aboutus,
    .certifications-grid-aboutus {
        grid-template-columns: 1fr;
    }
    
    .team-stats-aboutus {
        grid-template-columns: 1fr;
    }
    
    .timeline-event-aboutus {
        min-width: 100%;
    }
    
    .split-header-aboutus {
        /* flex-direction: column;
        text-align: center; */
        gap: var(--spacing-sm);
    }
    
    .split-icon-aboutus {
        height: 40px;
        width: 40px;
        font-size: 1.3rem;
    }
    .value-icon-aboutus{
        height: 40px;
        width: 40px;
        font-size: 1.3rem;
    }
    .cert-icon-aboutus{
        height: 40px;
        width: 40px;
        font-size: 1.3rem;
    }
    .split-title-aboutus {
        font-size: 1.5rem;
        text-align: left;
    }
    
    .mission-card-aboutus,
    .vision-card-aboutus {
        padding: var(--spacing-md);
    }
    
    .card-icon-aboutus {
        margin: 0 auto var(--spacing-md);
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }
    
    .card-title-aboutus {
        text-align: center;
    }
    .partners-logos-aboutus{
        grid-template-columns: 1fr;
    }
    .success-metrics-aboutus{
        grid-template-columns: 1fr;
    }
    .logos-grid-aboutus{
        grid-template-columns: 1fr;
    }
    .card-description-aboutus {
        text-align: center;
    }
    
    /* Our Solutions page */
    .enhanced-product-card-oursolutions {
        padding: var(--spacing-md);
    }
    
    .enhanced-product-header-oursolutions {
        flex-direction: column;
        text-align: center;
    }
    
    .enhanced-product-icon-oursolutions {
        margin: 0 auto;
    }
    
    .enhanced-product-title-oursolutions {
        font-size: 1.2rem;
        text-align: center;
    }
    
    .enhanced-product-tagline-oursolutions {
        text-align: center;
    }
    
    .enhanced-product-actions-oursolutions {
        justify-content: center;
    }
    
    .enhanced-product-actions-oursolutions .btn {
        width: 100%;
    }
    
    /* Carousel dots */
    .workforce-carousel-dots {
        gap: 10px;
    }
    
    .carousel-dot.active {
        width: 25px;
    }
    .footer-description {
        justify-content: left;
    }
    /* Footer */
    .footer-bottom {
        padding: 0.4rem 0;
        align-items: left;
    }
    
    .copyright {
        font-size: 0.85rem;
    }
    
    /* Scroll to top button */
    .scroll-to-top {
        bottom: 20px !important;
        right: 15px !important;
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
    }
    .grecaptcha-badge {
        bottom: 90px !important;
        right: 15px !important;
        width: 65px !important;
        height: 60px !important;
        transform: scale(0.9) !important;
        transform-origin: bottom right !important;
    }
    .grecaptcha-badge:hover {
        width: 240px !important;
        transform: scale(1) !important;
    }
     

  /* ---------- Hero ---------- */
  .enhanced-title {
    font-size: 2rem;
  }

  .section-description {
    font-size: 1rem;
  }

  .enhanced-cta button {
    width: 100%;
    margin-bottom: 10px;
  }
  
    .field-row1,
    .field-row2,
    .field-row3,
    .field-row4,
    .field-row5,
    .field-row6 {
        flex-wrap: wrap;
        gap: 16px;
    }

    /* Two columns max */
    .form-field1,
    .form-field2,
    .form-field3,
    .form-field4,
    .form-field5,
    .form-field6 {
        flex: 1 1 100%;
    }

  .results-grid {
    grid-template-columns: 1fr;
  }

  .result-card {
    padding: 1rem;
  }

  .snapshot {
    display: block;
    overflow-x: auto;
    width: 100%;
  }
   .solution-cards-industries .solution-card-industries {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
  }
  .enhanced-cta {
    margin-bottom: 30px;
  }
}

@media (max-width: 600px) {

  .hero-card {
        padding: var(--spacing-lg);
        min-height: 320px;
    }
    .hero-cta{
        font-weight: 100;
    }
    
}

/* Mobile Portrait (up to 575px) */
@media (max-width: 575px) {
    :root {
        --spacing-xl: 2rem;
        --spacing-lg: 1.5rem;
        --spacing-md: 1rem;
        --spacing-sm: 0.8rem;
        --spacing-xs: 0.4rem;
    }
    
    /* Hero Section */
    .hero-title {
        font-size: 1.8rem;
    }
    .hero-card {
        padding: var(--spacing-lg);
        max-height: 120px;
    }
    .hero-subtitle {
        font-size: 1rem;
    }
    
    /* Section Headers */
    .section-title {
        font-size: 1.8rem;
    }
    
    /* Cards */
    .card-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .card-title {
        font-size: 1.2rem;
    }
    
    /* Industry items */
    .industry-icon {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }
    
    .industry-title {
        font-size: 1.2rem;
    }
    
    /* Process phases */
    .phase-number {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .phase-title {
        font-size: 1.2rem;
    }
    
    /* CTA */
    .cta-title {
        font-size: 1.8rem;
    }
    
    .step-number {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    /* Navigation dots */
    .nav-dot {
        width: 12px;
        height: 12px;
    }
    
    .nav-dot.active {
        width: 16px;
        height: 16px;
    }
    
    /* Insights page */
    .category-link {
        min-width: 70px;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .category-link i {
        font-size: 1.2rem;
    }
    
    .category-link span {
        font-size: 0.8rem;
    }
    
    .insight-card-large {
        grid-template-columns: 1fr;
    }
    
    .insight-image {
        min-height: 200px;
    }
    
    .insight-content {
        padding: var(--spacing-md);
    }
    
    .insight-title {
        font-size: 1.3rem;
    }
    
    .case-study-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .case-study-results {
        flex-wrap: wrap;
    }
    
    .result-tag {
        padding: 8px 10px;
    }
    .webinars-container{
        grid-template-columns: 1fr;
    }
    .webinar-details p {
        font-size: 0.9rem;
    }
    
    .recorded-session {
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
    }
    
    .session-thumbnail {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .session-content {
        text-align: center;
    }
    
    .session-meta {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .deep-dive-articles {
        grid-template-columns: 1fr;
    }
    
    .article-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    /* Newsletter */
    .newsletter-form .form-group {
        flex-direction: column;
    }
    
    .form-group .btn-primary {
        width: 100%;
    }
    
    /* Contact page */
    .resource-card-contactus {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .resource-icon-contactus {
        margin: 0 auto;
    }
    
    .transport-contactus {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .transport-contactus i {
        margin: 0 auto;
    }
    
    .social-links-contactus {
        justify-content: center;
    }
    
    /* Process page */
    .partnership-features-ourprocess,
    .framework-stages-ourprocess,
    .support-services-ourprocess {
        grid-template-columns: 1fr;
        margin-bottom: var(--spacing-sm);
    }
    
    .partnership-with-image-ourprocess,
    .partnership-principles-with-image-ourprocess,
    .framework-with-image-ourprocess,
    .framework-benefits-with-image-ourprocess,
    .support-with-image-ourprocess {
        grid-template-columns: 1fr !important;
        gap: var(--spacing-md);
    }
    
    .split-text-ourprocess,
    .partnership-image-wrapper-ourprocess,
    .principles-image-wrapper-ourprocess,
    .framework-image-wrapper-ourprocess,
    .benefits-image-wrapper-ourprocess,
    .support-image-wrapper-ourprocess {
        min-width: 0; /* critical inside grid/flex to prevent overflow */
    }

    .stage-header-ourprocess {
        flex-direction: column;
        text-align: center;
    }
    
    .stage-number-ourprocess {
        margin: 0 auto;
    }
    
    .benefits-grid-ourprocess {
        grid-template-columns: 1fr;
    }
    
    .metric-ourprocess {
        padding: var(--spacing-sm);
        grid-template-columns: 1fr;
    }
    
    .metric-value-ourprocess {
        font-size: 1.8rem;
    }
    
    /* Our Solutions carousel */
    .workforce-carousel-dots {
        gap: 8px;
    }
    
    .carousel-dot {
        width: 10px;
        height: 10px;
    }
    
    .carousel-dot.active {
        width: 20px;
    }
    
    /* Footer */
    .footer-description {
        justify-content: left;
    }
    .footer-contact li {
        font-size: 0.9rem;
    }
    
    .footer-links a {
        font-size: 0.9rem;
    }
    .solution-cards-industries .solution-card-industries {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
  }
}

@media (max-width: 480px) {
    
    .mobile-menu-toggle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
    
    .mobile-menu-toggle i {
        font-size: 24px !important;
    }
    .hero-card {
        padding: var(--spacing-lg);
        min-height: 320px;
    }
    .hero-cta{
        font-weight: 10px;
    }
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    .logo-img {
        height: 35px !important;
        max-width: 120px !important;
    }
    
    .navnbar-wrapper {
        padding: 0 10px !important;
    }
    .split-content-industries {
        display: flex;
        flex-direction: column;         /* stack */
        gap: var(--spacing-md);
    }

    /* Relax the tall image container so it’s always visible on small screens */
    .split-image-industries {
        min-height: auto;               /* was 500px */
        max-height: none;
    }
    .split-image-industries img {
        width: 100%;
        height: auto;
        object-fit: contain;            /* avoid cropping */
    }
    
    .solution-cards-industries {
        display: grid;
        grid-template-columns: 1fr;      /* full-width cards */
        gap: var(--spacing-sm);
    }
    .solution-cards-industries .solution-card-industries {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100%;
    }
    /* keep the paragraph visible but allow natural wrapping */
    .solution-card-industries > p,
    .solution-card-industries > .solution-desc {
        max-height: none;
        opacity: 1;
        overflow: visible;
    }
    
    .logos-grid-aboutus .client-logo-aboutus { 
        flex-direction: column; align-items: center; 
    }
    .logos-grid-aboutus .client-logo-aboutus p { 
        text-align: center; 
    }
    .consultation-modal__dialog { 
        margin: 3vh 7px 0 0; 
        padding: var(--spacing-lg); 
    }
    .section-title-contactus{
        font-size: 1.3rem;
    }
    .grecaptcha-badge {
        bottom: 85px !important;
        right: 10px !important;
        width: 60px !important;
        height: 55px !important;
    }
    
    .grecaptcha-badge:hover {
        width: 220px !important;
    }
    
    .scroll-to-top {
        bottom: 15px !important;
        right: 10px !important;
    }
    

    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    #roiForm {
        padding: 10px;
        padding-bottom: 30px;
        background: #ffffff83;
    }

    .benchmarks table th,
    .benchmarks table td {
        font-size: 0.85rem;
        padding: 6px 8px;
    }
    
    .enhanced-title {
    font-size: 1.6rem;
    }

    .section-title {
        font-size: 1.5rem;
    }
    
    
    .roi-card1 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Lock roi-section1 inside card */
    .roi-card1 > .roi-section1 {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        margin: 0;
    }

    /* Force first row stack */
    .roi-section1 .field-row1 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 14px;
    }

    /* Force form fields to obey width */
    .roi-section1 .form-field1 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }


    .field-row1,
    .field-row2,
    .field-row3,
    .field-row4,
    .field-row5,
    .field-row6 {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    /* Make every field full width */
    .form-field1,
    .form-field2,
    .form-field3,
    .form-field4,
    .form-field5,
    .form-field6 {
        width: 100% !important;
        max-width: 100%;
        flex-direction: column;
    }

    /* Improve label readability */
    .form-field1 label,
    .form-field2 label,
    .form-field3 label,
    .form-field4 label,
    .form-field5 label,
    .form-field6 label {
        font-size: 0.95rem;
        line-height: 1.4;
        white-space: normal;
    }

    #roiForm input,
    #roiForm select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    #roiForm .field-row1,
    #roiForm .field-row2,
    #roiForm .field-row3,
    #roiForm .field-row4,
    #roiForm .field-row5,
    #roiForm .field-row6 {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    
    #roiForm .form-field1,
    #roiForm .form-field2,
    #roiForm .form-field3,
    #roiForm .form-field4,
    #roiForm .form-field5,
    #roiForm .form-field6 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        box-sizing: border-box !important;
    }
    
    #roiForm fieldset {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        overflow: hidden;
    }

    [class^="field-row"] {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    [class^="form-field"] {
        width: auto;
    }

    .snapshot {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    table {
        width: 100%;
        max-width: 100%;
        border-collapse: collapse;
    }

    /* Buttons */
    .btn {
        font-size: 1rem;
        /* padding: 12px; */
    }

    /* Result values */
    .kv li strong {
        font-size: 1rem;
    }


}

/* Small Mobile (up to 375px) */
@media (max-width: 375px) {
    .hero-title {
        font-size: 1.5rem;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .section-description {
        font-size: 0.9rem;
    }
    
    .card {
        padding: var(--spacing-sm);
    }
    
    .card-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
    
    .card-description {
        font-size: 0.85rem;
    }
    
    .card-list li {
        font-size: 0.85rem;
    }
    
    .industry-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
    
    .industry-title {
        font-size: 1.1rem;
    }
    
    .industry-list li {
        font-size: 0.85rem;
    }
    
    .phase-number {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .phase-title {
        font-size: 1.1rem;
    }
    
    .phase-description {
        font-size: 0.85rem;
    }
    
    .cta-title {
        font-size: 1.5rem;
    }
    
    .cta-description {
        font-size: 0.95rem;
    }
    
    .step-title {
        font-size: 1.1rem;
    }
    
    .step-description {
        font-size: 0.85rem;
    }
    
    .footer-title {
        font-size: 1rem;
    }
    
    .footer-description,
    .footer-links a,
    .footer-contact li {
        font-size: 0.85rem;
        justify-content: left;
    }
}

/* Print styles */
@media print {
    .header,
    .footer,
    .scroll-to-top,
    .hero-cta,
    .btn,
    .insight-link,
    .step-link,
    .nav-dot,
    .card-nav-btn,
    .auto-play-indicator {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .main-wrapper {
        background: white;
        backdrop-filter: none;
    }
    
    .section {
        background: white;
        page-break-inside: avoid;
    }
    
    .card,
    .insight-card,
    .process-phase,
    .cta-step {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* Height-based media queries for better experience on short screens */
@media (max-height: 600px) {
    .hero {
        min-height: auto;
        padding: var(--spacing-lg) 0;
    }
    
    .hero-content {
        margin-top: 40px;
    }
    
    .menus-wrapper.open {
        max-height: 80vh;
    }
    
    .nav-list {
        padding: var(--spacing-sm);
    }
    .footer-description {
        justify-content: left;
    }

}

/* Better responsive approach - use clamp() for fluid sizing */
:root {
    --fluid-h1: clamp(1.8rem, 5vw, 2.5rem);
    --fluid-h2: clamp(1.5rem, 4vw, 2rem);
    --fluid-h3: clamp(1.2rem, 3vw, 1.5rem);
    --fluid-text: clamp(0.9rem, 2.5vw, 1rem);
}

/* Update your typography to use fluid sizes */
.hero-title {
    font-size: 80px;
}

.section-title {
    font-size: var(--fluid-h2);
}

.card-title {
    font-size: var(--fluid-h3);
}

.card-description{
    font-size: var(--fluid-text);
}
/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .card:hover {
        transform: none;
    }
    
    .card:hover .card-icon {
        transform: none;
    }
    
    .btn:hover,
    .btn-primary:hover,
    .btn-secondary:hover {
        transform: none;
    }
    
    .nav-link::after {
        display: none;
    }
    
    .dropdown {
        transition: none;
    }
    
    .card-nav-btn {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
    }
    
    .scroll-to-top {
        width: 44px;
        height: 44px;
    }
        .grecaptcha-badge:active {
        width: 256px !important;
        transition: width 0.2s ease !important;
    }
    
    /* Return to icon after 3 seconds */
    @keyframes autoCollapse {
        0% { width: 256px !important; }
        100% { width: 70px !important; }
    }
    
    .grecaptcha-badge:not(:active) {
        animation: autoCollapse 0.3s ease 3s forwards !important;
    }
}

/* Landscape orientation specific fixes */
@media (orientation: landscape) and (max-height: 500px) {
    .hero {
        min-height: auto;
        padding: 20px 0;
    }
    
    .hero-content {
        margin-top: 20px;
    }
    
    .hero-card {
        padding: var(--spacing-md);
    }
    
    .menus-wrapper.open {
        max-height: 80vh;
    }
}

@media (min-width: 992px) {
    .split-section-ourservice.alternate .split-content-ourservice {
        grid-template-columns: 1fr 1fr;
    }
    .split-section-ourservice.alternate .split-image-ourservice {
        grid-column: 2 / 3;   /* image on the right */
    }
    .split-section-ourservice.alternate .split-text-ourservice {
        grid-column: 1 / 2;   /* text on the left  */
    }
    .split-row-oursolutions { flex-direction: row; }
    /* flip on sections that have .alternate */
    .split-section-oursolutions.alternate .split-row-oursolutions { flex-direction: row-reverse; }

}

/* High-resolution screens */
/* @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .hero-bg {
        background-image: linear-gradient(rgba(255, 255, 255, 0.007), rgba(255, 255, 255, 0)), url('/content/img/hero_bg@2x.png');
    }
} */

/* Accessibility - Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .card,
    .btn,
    .nav-link::after,
    .dropdown,
    .process-phase,
    .insight-card {
        transition: none !important;
    }
}        
/* Desktop (1200px to 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

/* Small Desktop / Large Tablet (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 960px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* Navigation */
    .nav-list {
        gap: 15px;
    }

    .nav-link {
        font-size: 0.9rem;
    }

    /* Cards - 3 columns */
    .cards-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .card {
        max-width: 100%;
    }

    /* Insights - 2 columns */
    .insights-container {
        grid-template-columns: repeat(2, 1fr);
    }

    /* CTA Steps - 3 columns */
    .cta-steps {
        grid-template-columns: repeat(1fr);
    }
}

/* iPad Landscape & Small Tablets (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        max-width: 720px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* Header */
    .header {
        height: 70px;
    }

    .logo-img {
        height: 45px;
    }

    /* Navigation - Already handled by mobile menu */

    /* Hero Section */
    .hero {
        min-height: auto;
        padding: 100px 0 60px;
        margin-top: 70px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

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

    /* Cards - 2 columns */
    .cards-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .card {
        max-width: 100%;
        padding: 30px;
    }

    /* Industries */
    .industries-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    /* Process Timeline */
    .process-timeline-ourprocess {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    /* Insights - 2 columns */
    .insights-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .insight-card {
        margin-bottom: 0;
    }

    /* CTA Steps - 2 columns */
    .cta-steps {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .cta-step:last-child {
        grid-column: span 2;
    }

    /* Split sections for all pages */
    .split-content-ourservice,
    .split-content-industries,
    .split-content-ourprocess,
    .split-content-aboutus {
        display: grid;
        grid-template-columns: 1fr 1fr !important;
        gap: 30px;
        align-items: center;
    }

    .split-image-ourservice,
    .split-image-industries,
    .split-image-ourprocess {
        max-height: 350px;
        object-fit: contain;
    }

    /* Partnership sections */
    .partnership-with-image-ourprocess,
    .partnership-principles-with-image-ourprocess,
    .framework-with-image-ourprocess,
    .framework-benefits-with-image-ourprocess,
    .support-with-image-ourprocess {
        display: grid;
        grid-template-columns: 1fr 1fr !important;
        gap: 30px;
    }

    /* Contact page */
    .contact-content-contactus {
        grid-template-columns: 1fr 1fr !important;
        gap: 30px;
    }

    .contact-options-contactus,
    .consultation-options-contactus,
    .resources-grid-contactus {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .map-container-contactus {
        grid-template-columns: 1.5fr 1fr !important;
        gap: 30px;
    }

    /* About Us page */
    .values-grid-aboutus,
    .leadership-grid-aboutus,
    .certifications-grid-aboutus {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .team-stats-aboutus {
        grid-template-columns: repeat(4, 1fr);
    }

    .timeline-aboutus {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* iPad Portrait (768px to 991px) - Specific adjustments */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
    .hero-title {
        font-size: 2.2rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .split-content-ourservice,
    .split-content-industries,
    .split-content-ourprocess,
    .split-content-aboutus {
        gap: 20px;
    }
}

/* iPad Landscape (992px to 1199px) - Already covered above */

/* Mobile Landscape (576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .container {
        max-width: 540px;
        margin: 0 auto;
        padding: 0 15px;
    }

    /* Cards - 2 columns on landscape mobile */
    .cards-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .card {
        padding: 20px;
    }

    .card-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    /* Insights - 2 columns */
    .insights-container {
        grid-template-columns: repeat(1fr);
        gap: 15px;
    }

    .insight-image-home {
        height: 150px;
    }

    /* Process Timeline */
    .process-timeline-ourprocess {
        grid-template-columns: repeat(1fr) !important;
        gap: 15px !important;
    }

    /* Contact page */
    .contact-options-contactus,
    .consultation-options-contactus,
    .resources-grid-contactus {
        grid-template-columns: repeat(1fr) !important;
    }

    .contact-form-contactus .form-row-contactus {
        grid-template-columns: 1fr;
    }
}

/* Mobile Portrait (up to 575px) */
@media (max-width: 575px) {
    .container {
        padding: 0 15px;
    }

    /* Cards - 1 column */
    .cards-container {
        grid-template-columns: 1fr;
    }

    /* Insights - 1 column */
    .insights-container {
        grid-template-columns: 1fr;
    }

    /* Process Timeline - 1 column */
    .process-timeline-ourprocess {
        grid-template-columns: 1fr !important;
    }

    /* Contact page - 1 column */
    .contact-options-contactus,
    .consultation-options-contactus,
    .resources-grid-contactus {
        grid-template-columns: 1fr !important;
    }

    /* About Us - 1 column */
    .values-grid-aboutus,
    .leadership-grid-aboutus,
    .certifications-grid-aboutus {
        grid-template-columns: 1fr;
    }

    .team-stats-aboutus {
        grid-template-columns:1fr;
    }
}

/* iPad Pro (1024px to 1366px) - Special handling */
@media (min-width: 1024px) and (max-width: 1366px) {
    .container {
        max-width: 1200px;
        padding: 0 30px;
    }

    /* Adjust card sizes for larger tablets */
    .card {
        padding: 35px;
    }

    .card-icon {
        width: 90px;
        height: 90px;
        font-size: 2.2rem;
    }

    /* Better spacing for iPad Pro */
    .section {
        padding: 60px 0;
    }
}

/* iPad Pro Landscape specific */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .hero-title {
        font-size: 3rem;
    }

    .cards-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

/* iPad Pro Portrait specific */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
    .hero-title {
        font-size: 2.8rem;
    }

    .cards-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .process-timeline-ourprocess {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Fix for iPad Mini and smaller tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    .process-phase-ourprocess {
        min-height: 350px;
    }

    .enhanced-product-card-oursolutions {
        padding: 20px;
    }

    .split-title-ourservice,
    .split-title-industries,
    .split-title-ourprocess,
    .split-title-aboutus {
        font-size: 1.8rem;
    }
}


/* ============================================
   COMPLETE TABLET MEDIA QUERIES
   ============================================ */

/* Small Tablets (600px to 767px) 
   - iPad Mini (portrait)
   - Amazon Fire HD 8
   - Samsung Galaxy Tab A 8"
   - Google Pixel C
   - Microsoft Surface Go
*/
@media (min-width: 600px) and (max-width: 767px) {
    .container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* Header adjustments */
    .header {
        height: 65px;
    }

    .logo-img {
        height: 40px;
    }

    /* Hero Section */
    .hero {
        padding: 80px 0 40px;
        margin-top: 65px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    /* Cards - 2 columns */
    .cards-container {
        display: grid;
        grid-template-columns: repeat(1fr);
        gap: 15px;
    }

    .card {
        padding: 20px;
    }

    .card-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    /* Industries - 2 columns */
    .industries-container {
        display: grid;
        grid-template-columns: repeat(1fr);
        gap: 20px;
    }

    /* Process Timeline - 2 columns */
    .process-timeline-ourprocess {
        display: grid !important;
        grid-template-columns: repeat(1fr) !important;
        gap: 15px !important;
    }

    .process-phase-ourprocess {
        min-height: 320px;
    }

    /* Insights - 2 columns */
    .insights-container {
        grid-template-columns: repeat(1fr);
        gap: 15px;
    }

    .insight-image-home {
        height: 160px;
    }

    /* CTA Steps - 2 columns */
    .cta-steps {
        display: grid;
        grid-template-columns: repeat(1fr);
        gap: 15px;
    }

    .cta-step:last-child {
        grid-column: span 2;
    }

    /* Split sections */
    .split-content-ourservice,
    .split-content-industries,
    .split-content-ourprocess,
    .split-content-aboutus {
        display: grid;
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .split-image-ourservice,
    .split-image-industries,
    .split-image-ourprocess {
        max-height: 280px;
        object-fit: contain;
    }

    /* Contact page */
    .contact-options-contactus,
    .consultation-options-contactus,
    .resources-grid-contactus {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }

    .contact-content-contactus {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .map-container-contactus {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* About Us */
    .values-grid-aboutus,
    .leadership-grid-aboutus {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .team-stats-aboutus {
        grid-template-columns: repeat(2, 1fr);
    }

    .timeline-aboutus {
        display: grid;
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        gap: 25px;
        text-align: left;
    }
}

/* Medium Tablets (768px to 991px) 
   - iPad Air (portrait & landscape)
   - iPad Pro 11" (portrait)
   - Samsung Galaxy Tab S7/S8
   - Microsoft Surface Pro
   - Amazon Fire HD 10
*/
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        max-width: 720px;
        margin: 0 auto;
        padding: 0 25px;
    }

    /* Header */
    .header {
        height: 70px;
    }

    .logo-img {
        height: 45px;
    }

    /* Hero Section */
    .hero {
        min-height: auto;
        padding: 90px 0 50px;
        margin-top: 70px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

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

    .hero-cta {
        flex-direction: row;
        gap: 15px;
    }

    /* Cards - 2/3 columns */
    .cards-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .card {
        padding: 30px;
    }

    .card-icon {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }

    /* Industries - 2 columns */
    .industries-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .industry-icon {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }

    /* Process Timeline - 2 columns */
    .process-timeline-ourprocess {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }

    .process-phase-ourprocess {
        min-height: 350px;
        padding: 25px !important;
    }

    /* Insights - 2 columns */
    .insights-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .insight-card {
        margin-bottom: 0;
    }

    .insight-image-home {
        height: 180px;
    }

    .insight-content-home {
        padding: 20px;
    }

    /* CTA Steps - 2 columns */
    .cta-steps {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .cta-step:last-child {
        grid-column: span 2;
    }

    .cta-step {
        padding: 25px;
    }

    /* Split sections - 2 columns */
    .split-content-ourservice,
    .split-content-industries,
    .split-content-ourprocess,
    .split-content-aboutus {
        display: grid;
        grid-template-columns: 1fr 1fr !important;
        gap: 30px;
        align-items: center;
    }

    .split-image-ourservice,
    .split-image-industries,
    .split-image-ourprocess {
        max-height: 350px;
        object-fit: contain;
    }

    .split-text-ourservice,
    .split-text-industries,
    .split-text-ourprocess {
        padding: 0;
    }

    .split-title-ourservice,
    .split-title-industries,
    .split-title-ourprocess,
    .split-title-aboutus {
        font-size: 1.8rem;
    }

    /* Our Solutions page */
    .split-row-oursolutions {
        display: grid;
        grid-template-columns: 1fr 1fr !important;
        gap: 25px;
    }

    .enhanced-product-card-oursolutions {
        padding: 25px;
    }

    /* Partnership sections */
    .partnership-with-image-ourprocess,
    .partnership-principles-with-image-ourprocess,
    .framework-with-image-ourprocess,
    .framework-benefits-with-image-ourprocess,
    .support-with-image-ourprocess {
        display: grid;
        grid-template-columns: 1fr 1fr !important;
        gap: 30px;
    }

    .partnership-image-wrapper-ourprocess,
    .principles-image-wrapper-ourprocess,
    .framework-image-wrapper-ourprocess,
    .benefits-image-wrapper-ourprocess,
    .support-image-wrapper-ourprocess {
        min-height: 300px;
    }

    /* Contact page */
    .contact-content-contactus {
        grid-template-columns: 1fr 1fr !important;
        gap: 30px;
    }

    .contact-options-contactus,
    .consultation-options-contactus,
    .resources-grid-contactus {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px;
    }

    .contact-form-section-contactus {
        padding: 25px;
    }

    .map-container-contactus {
        grid-template-columns: 1.5fr 1fr !important;
        gap: 30px;
    }

    .map-placeholder-contactus {
        min-height: 350px;
    }

    /* About Us page */
    .values-grid-aboutus {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .leadership-grid-aboutus {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .certifications-grid-aboutus {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .team-stats-aboutus {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .timeline-aboutus {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .testimonial-slider-aboutus {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
}

/* Large Tablets (992px to 1199px) 
   - iPad Pro 12.9" (portrait)
   - Samsung Galaxy Tab S8 Ultra
   - Microsoft Surface Laptop
   - Large Android Tablets
*/
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 960px;
        margin: 0 auto;
        padding: 0 30px;
    }

    /* Header */
    .header {
        height: 75px;
    }

    .logo-img {
        height: 50px;
    }

    .nav-list {
        gap: 20px;
    }

    .nav-link {
        font-size: 0.95rem;
    }

    /* Hero Section */
    .hero {
        padding: 100px 0 60px;
        margin-top: 75px;
    }

    .hero-title {
        font-size: 2.8rem;
    }

    /* Cards - 3/4 columns */
    .cards-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .card {
        padding: 35px;
    }

    /* Industries - 3 columns */
    .industries-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 35px;
    }

    /* Process Timeline - 3/4 columns */
    .process-timeline-ourprocess {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 25px !important;
    }

    /* Insights - 3 columns */
    .insights-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    /* CTA Steps - 3 columns */
    .cta-steps {
        grid-template-columns: repeat(1fr);
        gap: 25px;
    }

    /* Split sections */
    .split-content-ourservice,
    .split-content-industries,
    .split-content-ourprocess,
    .split-content-aboutus {
        gap: 40px;
    }

    .split-title-ourservice,
    .split-title-industries,
    .split-title-ourprocess,
    .split-title-aboutus {
        font-size: 2rem;
    }

    /* Our Solutions */
    .enhanced-products-container-oursolutions {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    /* Contact page */
    .contact-options-contactus,
    .consultation-options-contactus,
    .resources-grid-contactus {
        gap: 25px;
    }

    /* About Us */
    .values-grid-aboutus {
        grid-template-columns: repeat(4, 1fr);
    }

    .leadership-grid-aboutus {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* iPad Pro & High-End Tablets (1024px to 1366px) 
   - iPad Pro 12.9" (landscape)
   - Samsung Galaxy Tab S9 Ultra
   - Microsoft Surface Pro 9
*/
@media (min-width: 1024px) and (max-width: 1366px) {
    .container {
        max-width: 1200px;
        padding: 0 35px;
    }

    /* Enhanced spacing for larger tablets */
    .section {
        padding: 70px 0;
    }

    .section-title {
        font-size: 2.5rem;
    }

    /* Better card presentation */
    .card {
        padding: 40px;
        transition: transform 0.3s ease;
    }

    .card:hover {
        transform: translateY(-5px);
    }

    .card-icon {
        width: 90px;
        height: 90px;
        font-size: 2.2rem;
    }

    /* Split section enhancements */
    .split-image-ourservice,
    .split-image-industries,
    .split-image-ourprocess {
        max-height: 450px;
    }
}

/* iPad Pro Landscape specific */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .cards-container {
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }

    .hero-title {
        font-size: 3.2rem;
    }

    .process-timeline-ourprocess {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* iPad Pro Portrait specific */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait) {
    .cards-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .process-timeline-ourprocess {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .insights-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Foldable Devices (special handling) 
   - Samsung Galaxy Fold
   - Huawei Mate X
   - Microsoft Surface Duo
*/
@media (max-width: 600px) and (min-width: 280px) and (orientation: portrait) {
    .container {
        padding: 0 12px;
    }

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

    .section-title {
        font-size: 1.5rem;
        padding-top: 20px;
    }

    .card {
        padding: 15px;
    }

    .card-icon {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

/* Foldable Devices - Unfolded/Spread state */
@media (min-width: 600px) and (max-width: 800px) and (orientation: landscape) {
    .cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet Landscape orientation helper */
@media (orientation: landscape) and (max-height: 600px) {
    .hero {
        min-height: auto;
        padding: 60px 0;
    }

    .menus-wrapper.open {
        max-height: 80vh;
    }
}



/* Tablets with hover capability (like Surface with mouse/keyboard) */
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    }
    
    .btn:hover {
        transform: translateY(-2px);
    }
}

/* Tablets with touch only */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) {
    .card:active {
        transform: scale(0.98);
    }
    
    .btn:active {
        transform: scale(0.95);
    }
}