/* ─── BASE RESET & CSS VARIABLES ─── */
*, *::before, *::after { 
box-sizing: border-box; 
margin: 0; 
padding: 0; 
}
:root {
--navy:     #0B1F4B;
--blue:     #1A55E3;
--teal:     #007a69;
--light:    #F4F7FF;
--white:    #FFFFFF;
--gray:     #64748B;
--border:   #E2E8F0;
--dark-bg:  #071630;
--black:    #000000;
--max-width: 1440px;
}
body { 
font-family: 'Inter', sans-serif; 
color: var(--navy); 
background: var(--white);
line-height: 1.5;
overflow-x: hidden;
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* ─── NAVIGATION ─── */
nav {
position: sticky; 
top: 0; 
z-index: 100;
background: var(--white);
padding: 0 5%;
display: flex; 
align-items: center; 
justify-content: space-between;
height: 80px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
a{
   text-decoration:none;
}
.logo img {
max-height: 68px;
width: auto;
}
.nav-links { 
display: flex; 
gap: 2rem; 
list-style: none; 
align-items: center;
}
.nav-links a { 
text-decoration: none; 
color: var(--navy); 
font-size: 0.95rem; 
font-weight: 500; 
transition: color 0.2s ease; 
position: relative; 
}
.nav-links a:hover { 
color: var(--blue); 
}
.has-dropdown::after { 
/*content: ' ▾'; */
font-size: 0.75rem; 
color: var(--gray); 
}
.nav-cta {
background: var(--blue); 
color: var(--white) !important;
padding: 0.7rem 1.4rem; 
border-radius: 6px;
white-space: nowrap;
transition: background 0.2s ease, transform 0.2s ease !important;
}
.nav-cta:hover { 
background: var(--navy) !important; 
transform: translateY(-1px);
}
.nav-links li.has-dropdown {
   position: relative;
}

.nav-links .submenu {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   background: var(--white);
   list-style: none;
   min-width: 180px;
   padding: 0.5rem 0;
   margin: 0;
    border-radius: 0 0 6px 6px;
   border-radius: 6px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.nav-links li.has-dropdown:hover .submenu {
   display: block;
   z-index: 10000;
}

.submenu li {
   width: 100%;
}

.submenu li a {
   display: block;
   padding: 0.6rem 1.2rem;
   white-space: nowrap;
   color: var(--navy);
   font-weight: 400;
}

.submenu li a:hover {
   background: rgba(0, 0, 0, 0.04);
   color: var(--blue);
}
/* ─── HERO SECTION ─── */
.hero {
background-image: url('homepage-herobanner.png');
background-size: cover;
background-position: center;
min-height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 3rem 5% 4rem;
position: relative; 
overflow: hidden;
}
.hero-left { 
z-index: 1; 
max-width: 800px;
}
.hero h1 {
font-family: 'Manrope', sans-serif;
font-size: clamp(2.5rem, 4.5vw, 4.5rem);
font-weight: 800; 
line-height: 1.1;
color: var(--white); 
margin-bottom: 1.5rem;
}
.hero h1 .accent { 
color: var(--black); 
}
.hero-divider { 
width: 60px; 
height: 4px; 
background: var(--teal); 
margin: 1.5rem 0; 
border-radius: 2px; 
}
.hero p { 
color: var(--black); 
font-size: clamp(1.05rem, 1.2vw, 1.35rem); 
line-height: 1.6; 
max-width: 475px; 
margin-bottom: 2.5rem; 
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.hero-btns { 
display: flex; 
gap: 1.2rem; 
flex-wrap: wrap;
margin-bottom: 4rem;
}
.btn-primary {
background: var(--blue); 
color: var(--white);
padding: 0.9rem 2rem; 
border-radius: 7px; 
font-weight: 600; 
font-size: 1rem;
text-decoration: none; 
display: inline-flex; 
align-items: center; 
gap: 0.5rem;
transition: background 0.2s ease, transform 0.15s ease;
}
.btn-primary:hover { 
background: #1242bf; 
transform: translateY(-2px); 
}
.btn-outline {
background: transparent; 
color: var(--white);
border: 2px solid rgb(255 216 26);
padding: 0.9rem 2rem; 
border-radius: 7px; 
font-weight: 600; 
font-size: 1rem;
text-decoration: none; 
display: inline-flex; 
align-items: center; 
gap: 0.5rem;
transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.btn-outline:hover { 
border-color: var(--white); 
background: rgba(255,255,255,0.15); 
transform: translateY(-2px);
}
/* Hero Info Grid Grid/Row Container */
.hero-cards {
z-index: 1;
display: grid; 
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem; 
margin-top: auto;
width: 100%;
}
.hcard {
background: var(--white);
padding: 1.5rem;
display: flex; 
align-items: center; 
gap: 1.2rem;
transition: transform 0.3s ease, box-shadow 0.3s ease; 
cursor: pointer;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.hcard:hover { 
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}
.hcard-ico {
flex-shrink: 0;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.hcard-ico img {
width: 100%;
height: auto;
}
.hcard-content {
flex-grow: 1;
}
.hcard-title { 
font-weight: 700; 
color: var(--navy); 
font-size: 1.05rem; 
margin-bottom: 0.4rem; 
font-family: 'Manrope', sans-serif;
}
.hcard-desc { 
font-size: 0.85rem; 
color: var(--gray); 
line-height: 1.4; 
}
.hcard-arrow { 
color: var(--blue); 
font-size: 1.2rem; 
font-weight: bold;
transition: transform 0.2s ease;
}
.hcard:hover .hcard-arrow {
transform: translateX(3px);
}
/* ─── COMMON SECTION STYLES ─── */
section { 
padding: 3.5rem 5%; 
}
.centered { 
text-align: center; 
/*  margin-bottom: 4rem;*/
}
.sec-label { 
font-size: 0.9rem; 
/*text-transform: uppercase; */
font-weight: 700; 
color: var(--teal); 
margin-bottom: 0.6rem; 
/*letter-spacing: 0.1em;*/
}
.sec-title { 
font-family: 'Manrope', sans-serif; 
font-size: clamp(2rem, 3.5vw, 3.2rem); 
font-weight: 800; 
color: var(--navy); 
line-height: 1.2;
}
.sec-title .accent { 
color: var(--blue); 
}
.sec-divider { 
width: 50px; 
height: 4px; 
background: var(--teal); 
margin: 1rem auto 1.5rem; 
border-radius: 2px; 
}
.sec-sub { 
color: var(--gray); 
font-size: 1.1rem; 
line-height: 1.7; 
max-width: 700px; 
margin: 0 auto 20px;
}
/* ─── INDUSTRIES SECTION ─── */
.industries-bg { 
background: var(--light); 
}
.ind-grid { 
display: grid; 
grid-template-columns: repeat(4, 1fr); 
gap: 2rem; 
/*  max-width: var(--max-width);*/
margin: 0 auto;
margin-bottom: 4rem;
}
.ind-card {
background: var(--white); 
border-radius: 16px; 
overflow: hidden;
box-shadow: 0 4px 20px rgba(11,31,75,0.04);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
display: flex;
flex-direction: column;
height: 100%;
}
.ind-card:hover { 
transform: translateY(-6px); 
box-shadow: 0 15px 35px rgba(11,31,75,0.12); 
}
.ind-img {
height: 220px; 
width: 100%;
display: flex; 
align-items: center; 
justify-content: center;
position: relative;
}
.ind-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ind-badge {
position: absolute; 
bottom: -24px; 
left: 50%; 
transform: translateX(-50%);
width: 55px; 
height: 55px; 
background: var(--white);
border-radius: 50%; 
display: flex; 
align-items: center; 
justify-content: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
z-index: 2;
}
.ind-badge img {
width: 40px;
height: 40px;
object-fit: contain;
}
.ind-body { 
padding: 2.2rem 1.8rem 2rem; 
display: flex;
flex-direction: column;
flex-grow: 1;
}
.ind-divider { 
width: 35px; 
height: 3px; 
background: var(--teal); 
border-radius: 2px; 
margin-bottom: 1rem; 
}
.ind-title { 
font-family: 'Manrope', sans-serif; 
font-weight: 700; 
font-size: 1.2rem; 
color: var(--navy); 
margin-bottom: 0.8rem; 
line-height: 1.4; 
}
.ind-desc { 
font-size: 0.92rem; 
color: var(--gray); 
line-height: 1.6; 
margin-bottom: 1.5rem; 
flex-grow: 1;
}
.ind-arrow { 
font-size: 1.2rem; 
color: var(--blue); 
font-weight: bold;
align-self: flex-start;
transition: transform 0.2s ease;
}
.ind-card:hover .ind-arrow {
transform: translateX(4px);
}
/* ─── WHAT SETS CNT APART ─── */
.apart-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-bottom: 4rem;
}
.apart-card {
border: 1px solid var(--border);
border-radius: 14px;
background: var(--white);
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
}
.apart-card:hover { transform: translateY(-5px); border-color: var(--teal); }
.apart-card-inner { padding: 1.8rem 1.4rem; flex-grow: 1; }
.apart-ico { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.apart-ico img { width: 50px; height: 50px; border-radius: 50%; }
.apart-title { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1rem; color: var(--navy); }
.apart-divider { width: 30px; height: 3px; background: var(--teal); margin-bottom: 1rem; border-radius: 2px; }
.apart-desc { font-size: 0.85rem; color: var(--gray); line-height: 1.6; }
.apart-photo { width: 100%; overflow: hidden; }
.apart-photo img { width: 100%; height: 100%; object-fit: cover; }

/* Stats Bar */
.stats-bar {
background: linear-gradient(rgba(11, 31, 75, 0.5), rgba(11, 31, 75, 0.5)), url('world-map.jpg');
background-size: cover;
background-position: center;
display: grid;
grid-template-columns: repeat(4, 1fr);
border-radius: 16px;
overflow: hidden;
padding: 2rem 0;
}
.stat-item {
padding: 1.5rem;
display: flex;
align-items: flex-start;
gap: 1rem;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-item:last-child { border-right: none; }
.stat-ico img { width: 40px; height: 40px; opacity: 0.9; }
.stat-num { /*font-family: 'Manrope', sans-serif;*/ font-size: 1.5rem; font-weight: 800; color: #05a0ad; line-height: 1; margin-bottom: 0.2rem; }
.stat-lbl { color: var(--white); font-weight: 600; font-size: 1.1rem; margin-bottom: 0.5rem; }
.stat-sub { color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; line-height: 1.4; }

/* Stats Bar */
.stats-bar-1 {
background: linear-gradient(rgba(11, 31, 75, 0.5), rgba(11, 31, 75, 0.5)), url('world-map.jpg');
background-size: cover;
background-position: center;
display: grid;
grid-template-columns: repeat(5, 1fr);
border-radius: 16px;
overflow: hidden;
padding: 2rem 0;
}
.stat-item-1 {
padding: 1.5rem;
/*display: flex;*/
align-items: flex-start;
gap: 1rem;
border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.stat-item-1:last-child { border-right: none; }
.stat-ico-1 {display: flex;justify-content: center;margin-bottom: 3%;}
.stat-content-1{text-align: center;}
.stat-ico-1 img { width: 45px; height: 45px; opacity: 0.9; border: 1px solid #00af54; border-radius: 50%; padding: 5px; }
.stat-num-1 { /*font-family: 'Manrope', sans-serif;*/ font-size: 1.5rem; font-weight: 800; color: var(--white); line-height: 1; margin-bottom: 0.2rem; }
.stat-lbl-1 { color: var(--white); font-weight: 600; font-size: 1.1rem; margin-bottom: 0.5rem; }
.stat-sub-1 { color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; line-height: 1.4; }


/* ─── HOW WE DELIVER VALUE ─── */
.deliver-bg { background: var(--light); }
.deliver-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.deliver-card {
background: var(--white);
border-radius: 16px;
border: 1px solid var(--border);
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 4px 15px rgba(0,0,0,0.03);
transition: box-shadow 0.3s ease;
}
.deliver-card:hover { box-shadow: 0 12px 30px rgba(26, 85, 227, 0.1); }
.deliver-content-inner { padding: 2.2rem; flex-grow: 1; }
.deliver-header-flex { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.inner-ico img {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid var(--border);
padding: 5px;
background: var(--light);
}
.deliver-title { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--navy); margin-bottom: 0.2rem; }
.deliver-subtitle { font-size: 0.8rem; color: var(--teal); font-weight: 600; }
.deliver-desc { font-size: 0.9rem; color: var(--gray); line-height: 1.6; margin-bottom: 1.5rem; }
.deliver-list { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.deliver-list li {
font-size: 0.85rem;
color: var(--navy);
display: flex;
align-items: center;
gap: 0.8rem;
}
.deliver-list li::before {
content: '';
width: 6px;
height: 6px;
background: var(--teal);
border-radius: 50%;
flex-shrink: 0;
}
.deliver-img-box { height: 180px; width: 100%; overflow: hidden; }
.deliver-img-box img { width: 100%; height: 100%; object-fit: cover; }
/* ==========================================================================
case-studies
========================================================================== */
/* ---------------- Section ---------------- */
#case-studies{
/*max-width:1500px;*/
margin:auto;
}
.sec-title{
font-size:48px;
font-weight:800;
text-align:center;
color:var(--primary);
margin-bottom:10px;
}
.sec-divider{
width:80px;
height:4px;
background:var(--teal);
margin:0 auto 20px;
}
/* ---------------- Layout ---------------- */
.case-grid{
display:grid;
grid-template-columns:320px 1fr;
gap:30px;
}
/* ---------------- Sidebar ---------------- */
.case-sidebar{
background:linear-gradient(
135deg,
#061c33,
#0d3154
);
border-radius:25px;
padding:60px 30px;
color:#fff;
background-image:url(s-solve.png);
height:88%;
}
.case-sidebar h2{
font-size: 2.04rem;
line-height: 1.2;
margin: 0 0 1rem 0;
font-weight: 700;
}
.sidebar-divider{
width:50px;
height:4px;
background:var(--secondary);
margin-bottom:25px;
}
.case-sidebar p{
font-size: 1.05rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
margin: 0;
}
/* ---------------- Carousel ---------------- */
.case-content-wrapper{
position:relative;
overflow:hidden;
}
.case-carousel{
overflow:hidden;
}
.case-track{
display:flex;
transition:transform .6s ease;
}
.case-slide{
min-width:100%;
padding:5px;
}
/* ---------------- Card ---------------- */
.case-content-card{
background:#fff;
border:1px solid var(--border);
border-radius:20px;
overflow:hidden;
/*box-shadow:0 10px 40px rgba(0,0,0,.06);*/
display:flex;
flex-direction:column;
}
.case-image{
height:250px;
}
.case-image img{
width:100%;
height:100%;
object-fit:cover;
}
.case-card-body{
padding:30px;
}
.case-cat{
font-size:1.3rem;
font-weight:700;
color:var(--teal);
margin-bottom:15px;
}
.case-card-body h3{
font-size:40px;
color:var(--primary);
/*margin-bottom:10px;*/
}
.case-label{
font-size:15px;
margin-bottom:20px;
color:#666;
}
/* ---------------- Columns ---------------- */
.case-cols{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
.case-col-title{
font-family: 'Manrope', sans-serif;
font-weight: 800;
font-size: 1.3rem;
color: var(--teal);
margin-bottom: 0.2rem;
}
.case-col-title img{
  float: left;
  width: 10%;
  margin-right: 5px;
  background-color: #efefef;
  border-radius: 50%;
  padding: 3px;
}
.case-col p{
/*font-size: 0.85rem;*/
color: var(--navy);
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 5px;
}
.case-col ul{
padding-left:20px;
}
.case-col li{
/*font-size: 0.85rem;*/
color: var(--navy);
/*display: flex;*/
align-items: center;
gap: 0.8rem;
}
/* ---------------- Footer ---------------- */
.case-footer{
display:flex;
justify-content:space-between;
align-items:center;
padding:8px 35px;
background:#b8ebe473;
border-top:1px solid var(--border);
gap:20px;
}
.case-result{
max-width:75%;
}
.read-more-btn{
display: inline-block;
padding: 0.75rem 1.5rem;
border: 1px solid #cedbe5;
border-radius: 6px;
color: var(--primary-dark);
text-decoration: none;
font-weight: 600;
font-size: 0.9rem;
white-space: nowrap;
transition: all 0.2s ease;
}
.read-more-btn:hover{
background:var(--primary);
}
/* ---------------- Arrows ---------------- */
.nav-arrow{
position:absolute;
top:20%;
transform:translateY(-50%);
width:55px;
height:55px;
border:none;
border-radius:50%;
background:#fff;
font-size:22px;
cursor:pointer;
/*box-shadow: 0 10px 30px rgba(0,0,0,.15);*/
z-index:100;
}
.prev-arrow{
left:20px;
}
.next-arrow{
right:20px;
}
.nav-arrow:hover{
background:var(--teal);
color:#fff;
}
/* ==========================================================================
INTELLIGENCE SECTION STYLING
========================================================================== */
#intelligence-section {
--primary-dark: #07162c;
--accent-teal: #008f7a;
--accent-teal-light: #e6f4f2;
--text-main: #2b3d51;
--text-muted: #616e7e;
--border-color: #cce4e0;
/*  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;*/
background: var(--light);
font-family: var(--font-family);
overflow: hidden;
position: relative;
}
#intelligence-section2 {
--primary-dark: #07162c;
--accent-teal: #008f7a;
--accent-teal-light: #e6f4f2;
--text-main: #2b3d51;
--text-muted: #616e7e;
--border-color: #cce4e0;
/*  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;*/
background: var(--white);
font-family: var(--font-family);
overflow: hidden;
position: relative;
}
#intelligence-section * {
box-sizing: border-box;
}
.intel-container {
display: grid;
grid-template-columns: minmax(500px, 650px) 1fr;
min-height: 700px;
max-width: 1920px;
margin: 0 auto;
}
/* --- Left Column Content --- */
.intel-content {
padding: 5rem 4rem 5rem 8% ;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 2;
background-color: #ffffff;
}
.intel-sub {
color: var(--accent-teal);
font-size: 1.1rem;
font-weight: 600;
/*letter-spacing: 0.02em;*/
text-transform: uppercase;
}
.intel-line {
width: 45px;
height: 3px;
background-color: var(--accent-teal);
margin: 0.75rem 0 2rem 0;
}
.intel-title {
font-size: 3.2rem;
font-weight: 800;
line-height: 1.15;
color: var(--primary-dark);
margin: 0 0 1.5rem 0;
letter-spacing: -0.02em;
}
.intel-title .accent {
color: var(--accent-teal);
}
.intel-desc {
font-size: 1.15rem;
line-height: 1.6;
color: var(--text-muted);
margin: 0 0 2.5rem 0;
max-width: 540px;
}
/* --- Feature Info Block --- */
.intel-feature {
display: flex;
gap: 1.25rem;
margin-bottom: 2rem;
max-width: 520px;
}
.feature-icon-wrapper {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #f0f4f8;
display: flex;
align-items: center;
justify-content: center;
}
.feature-icon {
width: 22px;
height: 22px;
color: var(--text-muted);
}
.feature-text strong {
display: block;
font-size: 1.05rem;
color: var(--primary-dark);
margin-bottom: 0.35rem;
font-weight: 700;
}
.feature-text p {
margin: 0;
font-size: 0.95rem;
line-height: 1.5;
color: var(--text-muted);
}
/* --- Call To Action Box --- */
.cta-box {
display: flex;
align-items: center;
gap: 1.25rem;
border: 1px solid var(--border-color);
background-color: #ffffff;
padding: 1.25rem 1.5rem;
border-radius: 8px;
max-width: 420px;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-box:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 143, 122, 0.08);
}
.cta-icon-wrapper {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--accent-teal-light);
display: flex;
align-items: center;
justify-content: center;
}
.cta-icon {
width: 18px;
height: 18px;
color: var(--accent-teal);
transform: scaleX(-1); /* Flips the phone icon direction to mirror the original image */
}
.cta-text strong {
display: block;
font-size: 1.05rem;
color: var(--primary-dark);
margin-bottom: 0.25rem;
font-weight: 700;
}
.cta-text p {
margin: 0;
font-size: 0.9rem;
color: var(--text-muted);
}
/* --- Right Column Imagery with Curved Cutout --- */
.intel-graphic {
position: relative;
width: 100%;
height: 100%;
}
.intel-graphic::before {
content: "";
position: absolute;
top: 0;
left: -1px;
bottom: 0;
width: 120px;
background-color: #ffffff;
/* Recreates the elegant modern organic curve separating layouts */
clip-path: ellipse(0% 57% at 0% 45%);
z-index: 1;
}
.main-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.desktop-only {
display: inline;
}
/* ==========================================================================
PURPOSE SECTION STYLING
========================================================================== */
#purpose-section {
--primary-dark: #0a2240;
--accent-teal: #008489;
--text-main: #2d3e50;
--text-muted: #627182;
--border-light: #eaeff2;
/*  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;*/
/*  padding: 5rem 2rem;*/
background-color: var(--white);;
font-family: var(--font-family);
color: var(--text-main);
box-sizing: border-box;
}
#purpose-section * {
box-sizing: border-box;
}
/* --- Top Header Blocks --- */
.purpose-header {
text-align: center;
margin-bottom: 4rem;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.sub-tag {
font-size: 0.9rem;
/*text-transform: uppercase;*/
font-weight: 700;
color: var(--teal);
margin-bottom: 0.6rem;
letter-spacing: 0.1em;
}
/* Accent decorative dash lines matching image sample */
.sub-tag::before, .sub-tag::after {
content: "";
position: absolute;
top: 50%;
width: 25px;
height: 2px;
background-color: var(--accent-teal);
}
.sub-tag::before { left: -35px; }
.sub-tag::after { right: -35px; }
.main-title {
font-size: 3rem;
font-weight: 800;
color: var(--primary-dark);
margin: 0 0 1.25rem 0;
letter-spacing: -0.02em;
}
.main-title .accent {
color: var(--accent-teal);
}
.main-lead {
font-size: 1.15rem;
line-height: 1.6;
color: var(--text-muted);
margin: 0;
}
/* --- Center Hero Banner Graphics Container --- */
.purpose-banner {
position: relative;
width: 100%;
/*  max-width: 1440px;*/
/*height: 300px;*/
margin: 0 auto 1rem auto;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 15px 40px rgba(10,34,64,0.06);
}
.banner-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.banner-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(10,34,64,0.9) 25%, rgba(10,34,64,0.4) 60%, transparent 100%);
display: flex;
align-items: center;
padding: 0 5%;
}
.banner-text-box {
max-width: 500px;
color: #ffffff;
}
.banner-text-box h3 {
font-size: 2.25rem;
line-height: 1.25;
margin: 0 0 1.25rem 0;
font-weight: 700;
position: relative;
padding-left: 1.5rem;
}
/* Left accent vertical line inside image layer box text */
.banner-text-box h3::before {
content: "";
position: absolute;
left: 0;
top: 5px;
bottom: 5px;
width: 4px;
background-color: var(--accent-teal);
border-radius: 2px;
}
.banner-text-box p {
font-size: 1.05rem;
line-height: 1.6;
margin: 0;
color: rgba(255, 255, 255, 0.85);
padding-left: 1.5rem;
}
/* --- Bottom 4-Column Feature Rows --- */
.purpose-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.5rem;
max-width: 1440px;
margin: 0 auto;
}
.grid-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 1rem;
position: relative;
}
/* Subtle border lines layout separation to mimic sample grid cleanly */
.grid-item:not(:last-child)::after {
content: "";
position: absolute;
right: -1.25rem;
top: 15%;
bottom: 15%;
width: 1px;
background-color: var(--border-light);
}
.icon-circle {
width: 64px;
height: 64px;
border-radius: 50%;
background-color: #f0f7f7;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
color: var(--accent-teal);
transition: transform 0.25s ease;
}
.grid-item:hover .icon-circle {
transform: translateY(-4px);
}
.icon-circle svg {
width: 35px;
height: 35px;
}
.grid-item h4 {
font-size: 1.15rem;
font-weight: 700;
color: var(--primary-dark);
margin: 0 0 1rem 0;
}
.grid-item p {
font-size: 0.85rem;
line-height: 1.6;
color: var(--text-muted);
margin: 0 0 1.25rem 0;
}
.item-link {
font-size: 0.95rem;
color: var(--accent-teal);
text-decoration: none;
font-weight: 600;
margin-top: auto;
transition: opacity 0.2s;
}
.item-link:hover {
text-decoration: underline;
}
/* ==========================================================================
PARTNERSHIPS SECTION STYLING
========================================================================== */
#partnerships-section {
--bg-dark-panel: #061527;
--accent-gold: #f1c40f;
--text-dark: #223142;
--text-light-muted: rgba(255, 255, 255, 0.7);
/*  --font-serif: Georgia, 'Times New Roman', serif;*/
/*  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;*/
background-color: #ebebeb; /* Outer block backdrop match */
/*  padding: 4rem 2rem;*/
/*  font-family: 'Manrope', sans-serif;*/
box-sizing: border-box;
}
#partnerships-section * {
box-sizing: border-box;
}
.partnerships-container {
/*  max-width: 1200px;*/
margin: 0 auto;
}
/* Section main standalone layout title row */
.section-outer-title {
color: #ffffff;
font-size: 2.5rem;
font-weight: 800;
text-align: center;
margin-bottom: 2.5rem;
letter-spacing: 0.03em;
}
/* Main inner display layout container block wrapper */
.partnerships-display-card {
background: linear-gradient(145deg, #091f3a 0%, #030d1a 100%);
border-radius: 12px;
overflow: hidden;
/*  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);*/
display: flex;
flex-direction: column;
}
/* Top core horizontal row shelf displaying tech partner labels */
.logos-shelf-row {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
column-gap: 3rem;
row-gap: 0.1rem;
/*gap: 3rem;*/
/*  padding: 5rem 3rem 6rem 3rem;*/
}
.partner-logo {
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.85;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.partner-logo:hover {
opacity: 1;
transform: scale(1.04);
}
/* Individual identity custom tone coloring logic overrides */
.google-logo { color: #ffffff; }
.aws-logo { color: #ffffff; }
.oracle-logo {
font-family: var(--font-sans);
font-size: 2.5rem;
font-weight: 700;
letter-spacing: 0.05em;
color: #ff0000; /* Iconic Oracle Brand Red Match */
}
/* Bottom offset textual presentation summary box matching screenshot design card skew */
.info-content-plate {
background-color: #f4c430; /* Dynamic highlight golden amber yellow plate palette tone */
color: var(--text-dark);
padding: 3rem 3.5rem;
border-radius: 24px 24px 0 0;
margin: 0 1rem;
}
.info-content-plate h3 {
font-size: 1.85rem;
font-weight: 700;
margin-bottom: 1rem;
letter-spacing: -0.01em;
}
.info-content-plate p {
font-family: var(--font-sans);
font-size: 0.95rem;
line-height: 1.65;
font-weight: 500;
color: #2b3641;
text-align: justify;
}
/* ==========================================================================
TESTIMONIAL PERSPECTIVES SECTION STYLING
========================================================================== */
#testimonials-section {
--primary-dark: #071c35;
--accent-teal: #009984;
--accent-blue: #1c529b;
--text-main: #344356;
--text-muted: #64758d;
--bg-light: #f8fafc;
--border-light: #e2e8f0;
--font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
/* carousel sizing tokens — overridden at each breakpoint below */
--cards-per-view: 3;
--card-gap: 1.75rem;
/*    padding: 6rem 2rem;*/
background: var(--light);
background-image: radial-gradient(circle at 10% 90%, rgba(0, 153, 132, 0.03) 0%, transparent 40%),
radial-gradient(circle at 90% 10%, rgba(28, 82, 155, 0.03) 0%, transparent 40%);
/*    font-family: var(--font-family);*/
color: var(--text-main);
box-sizing: border-box;
position: relative;
overflow: hidden;
}
#testimonials-section * {
box-sizing: border-box;
}
/* --- Top Header Typography --- */
.testimonials-header {
text-align: center;
margin-bottom: 4rem;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.sub-tag {
font-size: 0.85rem;
font-weight: 700;
color: var(--accent-blue);
letter-spacing: 0.08em;
position: relative;
display: inline-block;
margin-bottom: 0.75rem;
}
.sub-tag::before, .sub-tag::after {
content: "";
position: absolute;
top: 50%;
width: 20px;
height: 2px;
background-color: var(--border-light);
}
.sub-tag::before { left: -32px; }
.sub-tag::after { right: -32px; }
.sec-title {
/*    font-size: 3.25rem;*/
font-weight: 800;
color: var(--primary-dark);
margin: 0 0 1.25rem 0;
letter-spacing: -0.02em;
}
.sec-title .accent {
/*    color: var(--accent-teal);*/
}
.main-lead {
font-size: 1.15rem;
line-height: 1.6;
color: var(--text-muted);
margin: 0;
}
/* --- Slider Deck Wrap & Arrow controls --- */
.slider-wrapper {
position: relative;
/*    max-width: 1440px;*/
margin: 0 auto;
padding: 0 1rem;
outline: none;
}
.slider-arrow {
position: absolute;
top: -10%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background-color: #005cb947;
border: 1px solid var(--border-light);
color: var(--text-muted);
font-size: 0.85rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
z-index: 10;
transition: all 0.2s ease, opacity 0.2s ease;
}
.slider-arrow:hover:not(:disabled) {
background-color: var(--bg-light);
color: var(--primary-dark);
border-color: var(--text-muted);
}
.slider-arrow:disabled {
opacity: 0.35;
cursor: default;
}
.prev-arrow { left: -1.25rem; }
.next-arrow { right: -1.25rem; }
/* --- Carousel viewport (clips the sliding track) --- */
.testimonials-viewport {
overflow: hidden;
cursor: grab;
}
.testimonials-viewport:active {
cursor: grabbing;
}
/* --- Sliding track (was a static grid, now a flex strip) --- */
.testimonials-grid {
display: flex;
gap: var(--card-gap);
transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
will-change: transform;
}
.testimonial-card {
flex: 0 0 calc((100% - (var(--cards-per-view) - 1) * var(--card-gap)) / var(--cards-per-view));
background: #ffffff;
border: 1px solid rgba(226, 232, 240, 0.7);
border-radius: 12px;
padding: 2.25rem 2rem;
box-shadow: 0 10px 25px rgba(7, 28, 53, 0.02);
display: flex;
flex-direction: column;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.testimonial-card:hover {
transform: translateY(-4px);
box-shadow: 0 15px 35px rgba(7, 28, 53, 0.05);
}
/* Card Header Meta Profiles */
.card-meta {
display: flex;
align-items: center;
gap: 15rem;
margin-bottom: 1.5rem;
}
.meta-icon-wrapper {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.meta-icon-wrapper svg {
width: 35px;
height: 35px;
}
.color-blue { background-color: #eef4fa; color: var(--accent-blue); }
.color-teal { background-color: #edf7f6; color: var(--accent-teal); }
.meta-label {
font-size: 1rem;
font-weight: 700;
color: #ffffff;
    background-color: #009aab;
    padding: 10px;
    border-radius: 25px;
}
/* Quotes Graphics & Typo elements */
.quote-mark {
font-family: Georgia, serif;
font-size: 3.5rem;
line-height: 1;
color: #0099e7;
margin-bottom: -1rem;
user-select: none;
}
.quote-text {
font-size: 1.05rem;
line-height: 1.6;
color: var(--primary-dark);
margin: 0 0 2rem 0;
font-weight: 500;
flex-grow: 1;
}
.quote-text-l {
font-size: 1rem;
line-height: 1.6;
color: var(--primary-dark);
margin: 0 0 2rem 0;
flex-grow: 1;
}
.card-footer-line {
width: 30px;
height: 2px;
background-color: var(--accent-blue);
margin-top: auto;
}
.testimonial-card:nth-child(even) .card-footer-line {
background-color: var(--accent-teal);
}
/* --- Pagination Elements --- */
.slider-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
margin-top: 2.5rem;
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #cbd5e1;
cursor: pointer;
transition: all 0.25s ease;
}
.dot.active {
background-color: var(--accent-blue);
transform: scale(1.25);
}
/* --- Bottom Links Divider Section --- */
.bottom-cta-row {
max-width: 1440px;
margin: 4rem auto 0 auto;
position: relative;
text-align: center;
}
.bottom-cta-row::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background-color: var(--border-light);
z-index: 1;
}
.view-all-link {
position: relative;
display: inline-block;
padding: 0 1.5rem;
color: var(--accent-blue);
text-decoration: none;
font-weight: 700;
font-size: 1rem;
z-index: 2;
transition: color 0.2s ease;
background: var(--bg-light);
}
.view-all-link:hover {
color: var(--accent-teal);
}
/* ==========================================================================
IMPACT & FOOTER SECTION STYLING
========================================================================== */
#impact-section {
--bg-gradient-start: #031424;
--bg-gradient-end: #051d34;
--accent-cyan: #00a3ad;
--text-light: #ffffff;
--text-muted: #8fa0b0;
--border-muted: rgba(143, 160, 176, 0.3);
/*  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;*/
background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
color: var(--text-light);
font-family: var(--font-family);
/*  padding: 6rem 2rem 2rem 2rem;*/
position: relative;
overflow: hidden;
box-sizing: border-box;
}
#impact-section * {
box-sizing: border-box;
}
/* Decorative abstract particle wave on the right side mimicking the image mesh background */
#impact-section::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 45%;
background: radial-gradient(circle at 80% 50%, rgba(0, 163, 173, 0.15) 0%, transparent 60%);
opacity: 0.8;
pointer-events: none;
z-index: 1;
}
.impact-container {
max-width: 1440px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* --- Content Wrapper Layout --- */
.impact-content {
max-width: 720px;
margin-bottom: 6rem;
}
.impact-tag {
font-size: 0.85rem;
font-weight: 700;
color: var(--accent-cyan);
letter-spacing: 0.08em;
position: relative;
display: inline-block;
margin-bottom: 1.5rem;
padding-left: 35px;
}
/* Decorative tiny dash behind main tag line */
.impact-tag::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 20px;
height: 2px;
background-color: var(--accent-cyan);
transform: translateY(-50%);
}
.impact-title {
font-size: 3.5rem;
font-weight: 800;
margin: 0 0 1.5rem 0;
letter-spacing: -0.02em;
line-height: 1.15;
}
.impact-title .accent {
color: var(--accent-cyan);
}
.impact-desc {
font-size: 1.1rem;
line-height: 1.65;
color: var(--text-muted);
margin: 0 0 1.5rem 0;
}
.impact-lead {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-light);
margin: 0 0 2.5rem 0;
}
/* --- Action Buttons --- */
.impact-buttons {
display: flex;
gap: 1.25rem;
align-items: center;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.9rem 2rem;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
border-radius: 6px;
transition: all 0.25s ease;
white-space: nowrap;
}
.btn .arrow {
margin-left: 0.5rem;
transition: transform 0.2s ease;
}
.btn:hover .arrow {
transform: translateX(3px);
}
/*.btn-primary {
background-color: var(--accent-cyan);
color: var(--text-light);
border: 1px solid var(--accent-cyan);
}
.btn-primary:hover {
background-color: #008790;
border-color: #008790;
}*/
.btn-secondary {
background-color: transparent;
color: var(--text-light);
border: 1px solid rgba(255, 255, 255, 0.4);
}
.btn-secondary:hover {
background-color: rgba(255, 255, 255, 0.05);
border-color: var(--text-light);
}
/* ==========================================================================
FOOTER BAR SECTION STYLING
========================================================================== */
.impact-footer {
border-top: 1px solid var(--border-muted);
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
}
/* Left components: Social Media blocks */
.footer-left {
display: flex;
align-items: center;
gap: 1.5rem;
}
.follow-text {
font-size: 0.9rem;
color: var(--text-muted);
position: relative;
padding-left: 35px;
}
.follow-text::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 20px;
height: 1px;
background-color: var(--border-muted);
}
.social-links {
display: flex;
gap: 0.75rem;
}
.social-icon {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--border-muted);
color: var(--text-light);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.2s ease;
}
.social-icon svg {
width: 16px;
height: 16px;
}
.social-icon:hover {
border-color: var(--accent-cyan);
color: var(--accent-cyan);
background-color: rgba(0, 163, 173, 0.05);
}
/* Right components: Branding Identity */
.footer-right {
display: flex;
align-items: center;
}
.footer-brand {
display: flex;
align-items: center;
}
.brand-logo {
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.03em;
color: var(--text-light);
}
.brand-divider {
width: 1px;
height: 20px;
background-color: var(--border-muted);
margin: 0 1rem;
}
.brand-tagline {
font-size: 0.85rem;
color: var(--text-muted);
letter-spacing: 0.02em;
}
/* ==========================================================================
VARIABLES, GENERAL SETUP & RESET RULES
========================================================================== */
#contact-map-section, #global-site-footer {
--primary-dark: #071c33;
--accent-cyan: #00a896;
--bg-light-tint: #f4f8fb;
--text-dark: #2c3e50;
--text-muted: #64748b;
--text-footer-muted: #94a3b8;
--border-light: #e2e8f0;
--border-footer: rgba(148, 163, 184, 0.15);
/*  --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;*/
font-family: var(--font-family);
box-sizing: border-box;
}
#contact-map-section *, #global-site-footer * {
box-sizing: border-box;
}
.section-container, .footer-container {
/*  max-width: 1440px;*/
margin: 0 auto;
padding: 0 2rem;
}
/* ==========================================================================
1. MAP VISIT US SECTION STYLES
========================================================================== */
#contact-map-section {
background-color: var(--light);
}
.map-centered-header {
text-align: center;
margin-bottom: 3.5rem;
}
.map-tag {
font-size: 1.15rem;
font-weight: 800;
color: var(--primary-dark);
letter-spacing: 0.05em;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.map-header-line {
width: 40px;
height: 3px;
background-color: var(--accent-cyan);
margin: 0.6rem auto 0 auto;
border-radius: 2px;
}
.map-block-grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: 2rem;
align-items: stretch;
}
/* Simulated Map Frame Box */
.map-visual-frame {
background-color: #ffffff;
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 0.75rem;
box-shadow: 0 10px 30px rgba(7, 28, 51, 0.03);
min-height: 400px;
}
.mock-map-bg {
width: 100%;
height: 100%;
background-color: #e5e9f0;
/* Abstract stylized cartography visual simulation background lines patterns */
background-image: radial-gradient(circle at 40% 30%, transparent 120px, rgba(0,0,0,0.02) 121px),
linear-gradient(60deg, transparent 40%, rgba(255,255,255,0.6) 41%, rgba(255,255,255,0.6) 43%, transparent 44%),
linear-gradient(-20deg, transparent 60%, rgba(0,0,0,0.03) 61%, rgba(0,0,0,0.03) 62%, transparent 63%);
border-radius: 8px;
position: relative;
overflow: hidden;
}
/* Simulated interactive location map pins and tooltip layout overlay rules */
.map-marker-pin {
position: absolute;
top: 45%;
left: 35%;
width: 16px;
height: 16px;
background-color: #0252c7;
border: 3px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0 0 6px rgba(2, 82, 199, 0.2);
}
.map-tooltip-card {
position: absolute;
top: 25%;
left: 35%;
transform: translateX(-40%);
background-color: #ffffff;
border: 1px solid var(--border-light);
padding: 0.75rem 1rem;
border-radius: 6px;
box-shadow: 0 4px 15px rgba(0,0,0,0.08);
font-size: 0.85rem;
line-height: 1.4;
color: var(--text-dark);
}
.map-tooltip-card strong { color: var(--primary-dark); font-weight: 700; }
.map-tooltip-card .sub-address { color: var(--text-muted); font-size: 0.8rem; display: block; margin-top: 0.25rem; }
/* Right Profile Sidebar Address Block */
.address-details-card {
background-color: #ffffff;
border: 1px solid var(--border-light);
border-radius: 12px;
padding: 2.5rem 2.25rem;
box-shadow: 0 10px 30px rgba(7, 28, 51, 0.03);
}
.address-card-header {
display: flex;
align-items: center;
gap: 1rem;
border-bottom: 1px solid var(--border-light);
padding-bottom: 1.5rem;
margin-bottom: 1.75rem;
}
.building-icon-box {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--primary-dark);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
.address-card-header h3 {
font-size: 1.35rem;
font-weight: 800;
color: var(--primary-dark);
}
.office-location-tag {
font-size: 0.85rem;
color: var(--accent-cyan);
font-weight: 600;
}
.info-rows-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.info-item-row {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.info-item-row .row-icon {
font-size: 1.1rem;
color: var(--accent-cyan);
margin-top: 0.15rem;
}
.info-item-row p {
font-size: 0.95rem;
line-height: 1.6;
color: var(--text-dark);
font-weight: 500;
}
.info-item-row p a {
color: var(--text-dark);
text-decoration: none;
transition: color 0.2s;
}
.info-item-row p a:hover { color: var(--accent-cyan); }
/* ==========================================================================
2. GLOBAL BRAND FOOTER STYLES
========================================================================== */
#global-site-footer {
background-color: var(--primary-dark);
color: #ffffff;
padding: 5rem 0 2rem 0;
}
/* Modern responsive grid layout setup to display structural link categories across one floor row */
.footer-main-grid {
display: grid;
grid-template-columns: 280px repeat(6, 1fr);
gap: 2rem;
padding-bottom: 4rem;
}
/* Left Brand Positioning column customization */
.footer-brand-col {
grid-column: span 1;
}
.footer-logo {
font-size: 1.65rem;
font-weight: 800;
letter-spacing: -0.02em;
}
.footer-logo .logo-sub { font-weight: 300; opacity: 0.9; }
.brand-tagline {
font-size: 0.8rem;
color: var(--accent-cyan);
font-weight: 700;
/*text-transform: uppercase;*/
letter-spacing: 0.02em;
margin: 1rem 0 1rem 0;
}
.brand-bio {
font-size: 0.85rem;
line-height: 1.55;
color: var(--text-footer-muted);
margin-bottom: 1.5rem;
}
.footer-social-row {
display: flex;
gap: 0.75rem;
}
.social-circle {
width: 34px;
height: 34px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
color: #ffffff;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.2s ease;
}
.social-circle:hover {
background-color: #ffffff;
color: var(--primary-dark);
border-color: #ffffff;
}
/* Right Navigation Columns styling links */
.footer-links-col h3 {
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--accent-cyan);
/*text-transform: uppercase;*/
}
.col-dash {
width: 15px;
height: 2px;
background-color: var(--accent-cyan);
margin: 0.5rem 0 1rem 0;
border-radius: 1px;
}
.footer-links-col ul {
list-style: none;
}
.footer-links-col li {
margin-bottom: 0.65rem;
}
.footer-links-col a {
font-size: 0.82rem;
line-height: 1.4;
color: var(--text-footer-muted);
text-decoration: none;
transition: color 0.15s ease;
display: inline-block;
}
.footer-links-col a:hover {
color: #ffffff;
}
/* Bottom Legals Copyright Area Bar rules */
.footer-legal-bar {
border-top: 1px solid var(--border-footer);
padding-top: 1.75rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.copyright-txt {
font-size: 0.8rem;
color: var(--text-footer-muted);
}
.legal-links {
display: flex;
align-items: center;
gap: 0.75rem;
}
.legal-links a {
font-size: 0.8rem;
color: var(--text-footer-muted);
text-decoration: none;
transition: color 0.15s;
}
.legal-links a:hover { color: #ffffff; }
.legal-pipe {
color: rgba(255,255,255,0.15);
font-size: 0.8rem;
}

/*==============================================================
--------Modal Box
=======================================================*/

button.myBtn {
  margin-top: 10px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
    background: #58b9ca;
    color: #040404;
  cursor: pointer;
  width:25%;
}
button.myBtn:hover { background: #014f5a; color:#fff; }

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 8px;
  position: relative;
}
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
}


/* --- LAPTOP TO SMALL MONITOR SCALING (Down to 1200px) --- */
@media (max-width: 1400px) {

:root { --max-width: 1330px; }
nav { height: 100px; padding: 0 3%; }
.nav-links a { font-size: .85rem; }
section { padding: 3rem 3%; }
.hero { min-height: 80vh; }
.hero h1 { font-size: 3rem; }
.hero p { font-size: 1rem; max-width: 500px; }
.hcard { padding: 2.2rem; gap: 1.5rem; }
.hcard-title { font-size: 1.4rem; }
.hcard-desc { font-size: 1.05rem; }
.case-card-body h3 {
    font-size: 26px;}
.case-col li {
    font-size: 0.85rem;}
.case-col-title {
   font-size: 1rem;
   text-transform: uppercase;
}
.card-meta {
   gap:10rem;
}
.testimonial-card {
   width: 300px;
}
.meta-label {
    font-size: 0.6rem;
    font-weight: 600;
 }
 .quote-text {
    font-size: 0.8rem;
 }
 .quote-text-l {
    font-size: 0.8rem;
   }
   .meta-icon-wrapper svg {
    width: 25px;
    height: 25px;
}
button.myBtn {
   width: 35%;
}
.info-item-row p {
    font-size: 0.75rem;
 }
 .cta-box {
   padding: 1rem 1rem;
}
.read-more-btn {
   font-size: 0.7rem;
}
.case-result{
   font-size: 12px;
}
.ind-card a{
   text-decoration: none;
}
.case-col p {
    font-size: 0.85rem;
    }

.intel-content { padding-left: 5%; padding-right: 2rem; }
.intel-title { font-size: 2.8rem; }
}
}






/* --- LAPTOP TO SMALL MONITOR SCALING (Down to 1200px) --- */
@media (max-width: 1240px) {

:root { --max-width: 1330px; }
nav { height: 100px; padding: 0 3%; }
.nav-links a { font-size: .85rem; }
section { padding: 3rem 3%; }
.hero { min-height: 80vh; }
.hero h1 { font-size: 3rem; }
.hero p { font-size: 1rem; max-width: 500px; }
.hcard { padding: 2.2rem; gap: 1.5rem; }
.hcard-title { font-size: 1.4rem; }
.hcard-desc { font-size: 1.05rem; }
.case-card-body h3 {
    font-size: 26px;}
.case-col li {
    font-size: 0.85rem;}
.case-col-title {
   font-size: 1rem;
   text-transform: uppercase;
}
.card-meta {
   gap:10rem;
}
.testimonial-card {
   width: 300px;
}
.meta-label {
    font-size: 0.6rem;
    font-weight: 600;
 }
 .quote-text {
    font-size: 0.8rem;
 }
 .quote-text-l {
    font-size: 0.8rem;
   }
   .meta-icon-wrapper svg {
    width: 25px;
    height: 25px;
}
button.myBtn {
   width: 35%;
}
.info-item-row p {
    font-size: 0.75rem;
 }
 .cta-box {
   padding: 1rem 1rem;
}
.read-more-btn {
   font-size: 0.7rem;
}
.case-result{
   font-size: 12px;
}
.ind-card a{
   text-decoration: none;
}
.case-col p {
    font-size: 0.85rem;
    }

.intel-content { padding-left: 5%; padding-right: 2rem; }
.intel-title { font-size: 2.8rem; }
}
}





/* =========================================================
   MOBILE & TABLET BREAKPOINT (1024px and below)
   ========================================================= */
@media screen and (max-width: 1024px) {

  /* 3-Line Hamburger Icon Container */
  .mobile-menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px; /* Spacing between lines */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
  }

  /* The 3 Individual Horizontal Lines */
  .mobile-menu-toggle .bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #333; /* Change color if your nav is dark */
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
  }

  /* Hidden Menu by default */
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    padding: 1.5rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }

  /* Expanded Menu */
  .nav-links.active {
    display: flex;
  }

  /* ----------------------------------------------------
     ANIMATION: Transform 3 Lines into an "X" when open
     ---------------------------------------------------- */
  .mobile-menu-toggle.open .bar:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
  }

  .mobile-menu-toggle.open .bar:nth-child(2) {
    opacity: 0; /* Middle line fades out */
  }

  .mobile-menu-toggle.open .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
  }

  /* Submenu and Links formatting */
  .nav-links > li {
    width: 100%;
    margin: 0.5rem 0;
  }

  .nav-links a {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f0f0f0;
  }

  .has-dropdown .submenu {
    display: none;
    padding-left: 1rem;
    background-color: #fafafa;
  }

  .has-dropdown.open .submenu {
    display: block;
  }
}

/* ==========================================================================
─── RESPONSIVE MEDIA QUERIES (BREAKPOINTS) ───
========================================================================== */
/* ─── ULTRA ULTRA-WIDE / 4K MONITORS (3840px and down) ─── */
@media (min-width: 2561px) and (max-width: 3840px) {
:root { --max-width: 2400px; }
nav { height: 100px; padding: 0 8%; }
.nav-links a { font-size: 1.2rem; }
section { padding: 10rem 8%; }
.hero { min-height: 80vh; }
.hero h1 { font-size: 5.5rem; }
.hero p { font-size: 1.6rem; max-width: 900px; }
.hcard { padding: 2.2rem; gap: 1.5rem; }
.hcard-title { font-size: 1.4rem; }
.hcard-desc { font-size: 1.05rem; }
}
/* ─── 2K MONITORS & WIDESCREENS (2560px down to 1920px) ─── */
@media (min-width: 1921px) and (max-width: 2560px) {
:root { --max-width: 1800px; }
section { padding: 2rem 6%; }
.hero h1 { font-size: 4.8rem; }
.hero p { font-size: 1.4rem; max-width: 800px; }
.hcard { padding: 1.8rem; }
.hcard-title { font-size: 1.2rem; }
.hcard-desc { font-size: 0.95rem; }
}
/* ─── STANDARD DESKTOP OPTIMIZATIONS (Up to 1440px) ─── */
@media (max-width: 1440px) {
.hero-cards { gap: 1rem; }
.hcard { padding: 1.2rem 1rem; gap: 0.8rem; }
.hcard-title { font-size: 0.95rem; }
.hcard-desc { font-size: 0.8rem; }
}
/* ─── LAPTOP / SMALL SCREEN DESKTOP (Up to 1200px) ─── */
@media (max-width: 1200px) {
.hero-cards {
grid-template-columns: repeat(2, 1fr);
gap: 1.2rem;
}
.ind-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}
/* ─── TABLET STYLES (Up to 1024px - Covers iPad Pro, 768x1024 Landscape) ─── */
@media (max-width: 1024px) {
nav { padding: 0 4%; }
.nav-links { gap: 1.2rem; }
.nav-links a { font-size: 0.85rem; }
.nav-cta { padding: 0.6rem 1.1rem; }
.hero { min-height: auto; padding-top: 5rem; padding-bottom: 4rem; }
.hero h1 { font-size: 3.2rem; }
}
/* ─── PORTRAIT TABLET (768px down to 480px) ─── */
@media (max-width: 768px) {
nav { height: 70px; }
.nav-links { display: none; } /* Standard solution for missing mobile hamburger menu trigger logic */
.hero { padding: 4rem 4% 3rem; }
.hero h1 { font-size: 2.6rem; }
.hero p { max-width: 100%; font-size: 1.1rem; margin-bottom: 2rem; }
.hero-cards { grid-template-columns: 1fr; gap: 1rem; }
.ind-grid { grid-template-columns: 1fr; gap: 2rem; }
section { padding: 4.5rem 4%; }
.centered { margin-bottom: 2.5rem; }
}
/* ─── SMARTPHONES / MOBILE PORTRAIT ─── 
(Covers 360x800, 390x844, 414x896, 1080x2400 web viewports, etc.) */
@media (max-width: 480px) {
:root {
--side-padding: 5%;
}
nav { padding: 0 var(--side-padding); }
.logo img { max-height: 40px; }
section { padding: 4rem var(--side-padding); }
.hero { padding: 3rem var(--side-padding) 2.5rem; }
.hero h1 { font-size: 2.1rem; line-height: 1.15; }
.hero p { font-size: 1rem; }
.hero-btns { width: 100%; gap: 0.8rem; margin-bottom: 2.5rem; }
.btn-primary, .btn-outline { width: 100%; justify-content: center; padding: 0.85rem 1.5rem; font-size: 0.95rem; }
.hcard { padding: 1.2rem; border-radius: 10px; }
.hcard-title { font-size: 1rem; }
.ind-img { height: 180px; }
.ind-body { padding: 1.8rem 1.2rem 1.5rem; }
.ind-title { font-size: 1.1rem; }
.ind-desc { font-size: 0.88rem; margin-bottom: 1.2rem; }

}
/* ─── RESPONSIVE UPDATES ─── */
@media (max-width: 1200px) {
.apart-grid { grid-template-columns: repeat(2, 1fr); }
.stats-bar { grid-template-columns: repeat(2, 1fr); }
.stat-item:nth-child(2) { border-right: none; }
.stat-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.deliver-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.apart-grid { grid-template-columns: 1fr; }
.stats-bar { grid-template-columns: 1fr; }
.stat-item { border-right: none; }
.deliver-grid { grid-template-columns: 1fr; }
.deliver-content-inner { padding: 1.5rem; }
}

/* ─── RESPONSIVE UPDATES ─── */
@media (max-width: 1200px) {
.apart-grid { grid-template-columns: repeat(2, 1fr); }
.stats-bar-1 { grid-template-columns: repeat(2, 1fr); }
.stat-item-1:nth-child(2) { border-right: none; }
.stat-item-1 { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.deliver-grid-1 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.apart-grid { grid-template-columns: 1fr; }
.stats-bar-1 { grid-template-columns: 1fr; }
.stat-item-1 { border-right: none; }
.deliver-grid-1 { grid-template-columns: 1fr; }
.deliver-content-inner-1 { padding: 1.5rem; }
}
/* ==========================================================================
MEDIA QUERIES & RESPONSIVE BREAKPOINTS
========================================================================== */
/* --- 4K / EXTRA LARGE DISPLAYS --- */
@media (min-width: 2000px) {
.case-grid {
max-width: 1800px;
grid-template-columns: 400px 1fr;
}
.sec-title { font-size: 3.5rem; }
.case-card-body h3 { font-size: 2.4rem; }
.case-image { height: 450px; }
.nav-arrow { top: 225px; }
}
/* --- DESKTOPS / LAPTOPS BOUNDARY (1200px - 1024px) --- */
@media (max-width: 1250px) {
.case-cols { gap: 1.5rem; }
.case-card-body { padding: 2rem; }
}
/* --- TABLET VIEWPORT (Under 1024px to 768px) --- */
@media(max-width:1024px){
.case-grid{
grid-template-columns:1fr;
}
.case-cols{
grid-template-columns:1fr;
}
.case-sidebar{
padding:40px;
}
.case-sidebar h2{
font-size:34px;
}
}
@media(max-width:768px){
.sec-title{
font-size:34px;
}
.case-card-body{
padding:25px;
}
.case-card-body h3{
font-size:28px;
}
.case-image{
height:220px;
}
.case-footer{
flex-direction:column;
align-items:flex-start;
}
.case-result{
max-width:100%;
}
.read-more-btn{
width:100%;
text-align:center;
}
.nav-arrow{
width:42px;
height:42px;
}
}
@media(max-width:576px){
.nav-arrow{
display: block;
}
}
/* ==========================================================================
RESPONSIVE DESIGN SYSTEM BREAKPOINTS
========================================================================== */
/* --- 4K & ULTRA-WIDE RESOLUTIONS --- */
@media (min-width: 2000px) {
.intel-container {
grid-template-columns: 850px 1fr;
min-height: 900px;
}
.intel-content { padding-left: 12%; }
.intel-title { font-size: 4.5rem; }
.intel-desc { font-size: 1.4rem; max-width: 700px; }
.intel-feature { max-width: 650px; }
.cta-box { max-width: 500px; padding: 1.5rem 2rem; }
}
/* --- LAPTOP TO SMALL MONITOR SCALING (Down to 1200px) --- */
@media (max-width: 1350px) {
.intel-content { padding-left: 5%; padding-right: 2rem; }
.intel-title { font-size: 2.8rem; }
}
/* --- SMALL DESKTOPS / TABLETS HORIZONTAL (1200px to 1024px) --- */
@media (max-width: 1199px) {
.intel-container { grid-template-columns: 1.1fr 0.9fr; min-height: 650px; }
.intel-title { font-size: 2.4rem; }
.intel-desc { font-size: 1.05rem; margin-bottom: 1.75rem; }
}
/* --- TABLETS PORTRAIT VIEW (Under 1024px down to 768px) --- */
@media (max-width: 1023px) {
.intel-container {
grid-template-columns: 1fr; /* Turns the side-by-side split into vertical stacked grid blocks */
min-height: auto;
}
.intel-content {
padding: 4rem 3rem;
order: 2; /* Forces text below the graphic banner */
}
.intel-graphic {
height: 400px;
order: 1;
}
.intel-graphic::before {
display: none; /* Disables curve since section dividers are now horizontal */
}
.desktop-only {
display: none;
}
.intel-desc, .intel-feature, .cta-box {
max-width: 100%; /* Allows interactive rows to span beautifully on mobile widths */
}
}
/* --- MOBILE PHONES (767px and below) --- */
@media (max-width: 767px) {
.intel-content {
padding: 3rem 1.25rem;
}
.intel-graphic {
height: 280px; /* Reduced visual hero scale optimized for thumb scrolling */
}
.intel-title {
font-size: 2rem;
}
.intel-desc {
font-size: 1rem;
}
.cta-box {
flex-direction: row;
padding: 1rem;
}
}
/* ==========================================================================
RESPONSIVE LAYOUT BREAKPOINTS
========================================================================== */
/* --- 4K & EXTRA LARGE MONITOR DISPLAYS --- */
@media (min-width: 2000px) {
#purpose-section { padding: 8rem 4rem; }
.purpose-header { max-width: 1100px; margin-bottom: 6rem; }
.main-title { font-size: 4rem; }
.purpose-banner { max-width: 1800px; height: 600px; margin-bottom: 6rem; }
.banner-text-box { max-width: 700px; }
.banner-text-box h3 { font-size: 3rem; }
.purpose-grid { max-width: 1800px; gap: 4rem; }
}
/* --- SMALL DESKTOPS / LAPTOPS BOUNDARY (Down to 1024px) --- */
@media (max-width: 1280px) {
.purpose-grid { gap: 1.5rem; }
.grid-item:not(:last-child)::after { right: -0.75rem; }
.banner-text-box { max-width: 450px; }
.banner-text-box h3 { font-size: 1.85rem; }
}
/* --- HORIZONTAL TABLET RESOLUTIONS (1024px down to 768px) --- */
@media (max-width: 1023px) {
#purpose-section { padding: 4rem 1.5rem; }
.main-title { font-size: 2.35rem; }
.purpose-banner {
height: 380px;
margin-bottom: 3.5rem;
}
.banner-overlay {
background: rgba(10, 34, 64, 0.8); /* Uniform safe overlay contrast tint for smaller screens */
padding: 2rem;
}
/* Transition the 4-column row into a balanced 2x2 grid pattern */
.purpose-grid {
grid-template-columns: repeat(2, 1fr);
gap: 3rem 2rem;
}
.grid-item::after {
display: none !important; /* Clears structural vertical boundary ticks */
}
}
/* --- VERTICAL SMARTPHONES & MOBILE VIEWS --- */
@media (max-width: 640px) {
.main-title { font-size: 1.85rem; }
.sub-tag::before, .sub-tag::after { display: none; } /* Drop visual ticks if viewport space is small */
.purpose-banner {
height: auto;
display: flex;
flex-direction: column;
}
.banner-img {
height: 220px;
}
.banner-overlay {
position: relative;
background: var(--primary-dark);
padding: 2rem 1.25rem;
}
.banner-text-box h3 {
font-size: 1.5rem;
}
/* Drop interactive components cleanly into unified one column scrolling deck */
.purpose-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.grid-item {
padding: 0;
}
}
/* ==========================================================================
RESPONSIVE DESIGN SYSTEM BREAKPOINTS
========================================================================== */
/* --- 4K / ULTRA-WIDE WORKSTATION VIEWPORTS --- */
@media (min-width: 2000px) {
.partnerships-container { max-width: 1800px; }
.section-outer-title { font-size: 2.75rem; margin-bottom: 4rem; }
.logos-shelf-row { padding: 8rem 5rem 10rem 5rem; gap: 6rem; }
.oracle-logo { font-size: 3.5rem; }
.info-content-plate { padding: 4.5rem 5rem; margin: 0 2rem; border-radius: 36px 36px 0 0; }
.info-content-plate h3 { font-size: 2.5rem; }
.info-content-plate p { font-size: 1.2rem; line-height: 1.75; }
}
/* --- LAPTOP TO COMPACT STABLE PC RESOLUTIONS (Down to 1024px) --- */
@media (max-width: 1200px) {
.logos-shelf-row { padding: 4.5rem 2rem 5.5rem 2rem; gap: 2rem; }
.oracle-logo { font-size: 2.2rem; }
}
/* --- TABLET ORIENTATION VIEWPORTS (Under 1024px down to 768px) --- */
@media (max-width: 1023px) {
#partnerships-section { padding: 3rem 1.5rem; }
.section-outer-title { font-size: 1.75rem; }
.logos-shelf-row { padding: 4rem 2rem 4.5rem 2rem; }
.info-content-plate { padding: 2.5rem 2rem; border-radius: 16px 16px 0 0; }
.info-content-plate h3 { font-size: 1.5rem; }
}
/* --- VERTICAL SMARTPHONE RESOLUTIONS (767px and below) --- */
@media (max-width: 767px) {
#partnerships-section { padding: 2.5rem 1rem; }
/* Convert outer contextual header row text into section integration block */
.section-outer-title { display: none; } 
/* Collapse brand graphics arrays straight into simple centered dynamic columns stack block */
.logos-shelf-row {
flex-direction: column;
gap: 3.5rem;
padding: 3.5rem 1.5rem;
}
.info-content-plate {
margin: 0;
border-radius: 12px 12px 0 0;
padding: 2rem 1.5rem;
}
.info-content-plate h3 {
font-size: 1.35rem;
line-height: 1.3;
}
.info-content-plate p {
font-size: 0.9rem;
line-height: 1.55;
text-align: left; /* Clear justify logic patterns cleanly on compact screens */
}
}
/* ==========================================================================
RESPONSIVE LAYOUT BREAKPOINTS
========================================================================== */
@media (min-width: 2000px) {
#testimonials-section { padding: 8rem 4rem; }
.testimonials-header { max-width: 1100px; margin-bottom: 6rem; }
.sec-title { font-size: 4.25rem; }
.slider-wrapper { max-width: 1800px; }
#testimonials-section { --card-gap: 2.5rem; }
.testimonial-card { padding: 3rem; }
.quote-text { font-size: 1.25rem; }
.bottom-cta-row { max-width: 1800px; margin-top: 6rem; }
}
@media (max-width: 1280px) {
#testimonials-section { --card-gap: 1.25rem; }
.testimonial-card { padding: 2rem 1.5rem; }
.sec-title { font-size: 2.75rem; }
}
@media (max-width: 1023px) {
#testimonials-section {
padding: 4rem 1.5rem;
--cards-per-view: 2;
--card-gap: 1.5rem;
}
.slider-arrow {
display: block;
}
}
@media (max-width: 767px) {
#testimonials-section { --cards-per-view: 1; }
.sec-title { font-size: 2rem; }
.main-lead { font-size: 1rem; }
.testimonials-header { margin-bottom: 3rem; }
.testimonial-card {
padding: 2rem;
}
.sub-tag::before, .sub-tag::after {
display: none;
}
.view-all-link {
width: 100%;
padding: 0.5rem 0;
text-align: center;
}
}
@media (prefers-reduced-motion: reduce) {
.testimonials-grid { transition: none; }
}
/* ==========================================================================
MEDIA QUERIES & BREAKPOINTS
========================================================================== */
/* --- 4K / EXTRA LARGE MONITOR DISPLAYS --- */
@media (min-width: 2000px) {
#impact-section { padding: 8rem 4rem 3rem 4rem; }
.impact-container { max-width: 1800px; }
.impact-content { max-width: 900px; margin-bottom: 10rem; }
.impact-title { font-size: 4.5rem; }
.impact-desc { font-size: 1.35rem; }
.impact-lead { font-size: 1.5rem; }
.btn { padding: 1.1rem 2.5rem; font-size: 1.1rem; }
.brand-logo { font-size: 2rem; }
}
/* --- DESKTOPS / SMALL RECTANGLE LAPTOPS BOUNDARY (Down to 1024px) --- */
@media (max-width: 1200px) {
.impact-title { font-size: 2.8rem; }
}
/* --- TABLETS / PORTRAIT ORIENTATION (Under 1024px down to 768px) --- */
@media (max-width: 1023px) {
#impact-section { padding: 5rem 2rem 2rem 2rem; }
.impact-content { max-width: 100%; margin-bottom: 4rem; }
#impact-section::after {
width: 100%;
background: radial-gradient(circle at 90% 90%, rgba(0, 163, 173, 0.12) 0%, transparent 50%);
}
}
/* --- VERTICAL MOBILE SMARTPHONES (767px and below) --- */
@media (max-width: 767px) {
#impact-section { padding: 4rem 1.25rem 1.5rem 1.25rem; }
.impact-title { font-size: 2.25rem; }
.impact-desc { font-size: 1rem; line-height: 1.55; }
/* Stack CTA buttons vertically to fill mobile viewport widths cleanly */
.impact-buttons {
flex-direction: column;
align-items: stretch;
gap: 1rem;
}
.btn {
width: 100%;
}
/* Structural transformation of footer bar row layout elements to vertical list blocks */
.impact-footer {
flex-direction: column;
align-items: flex-start;
gap: 2rem;
padding-top: 1.5rem;
}
.footer-left {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
width: 100%;
}
.follow-text {
padding-left: 0;
}
.follow-text::before {
display: none;
}
.social-links {
width: 100%;
}
.footer-right {
width: 100%;
border-top: 1px solid rgba(143, 160, 176, 0.15);
padding-top: 1.5rem;
}
.brand-divider {
margin: 0 0.75rem;
}
}
/* ==========================================================================
VIEWPORT BREAKPOINTS & RESPONSIVE DESIGN ENVIRONMENT SYSTEM
========================================================================== */
/* --- 4K / EXTRA WIDE MONITORS (2000px and up) --- */
@media (min-width: 2000px) {
.section-container, .footer-container { max-width: 1800px; }
#contact-map-section { padding: 6.5rem 0; }
.map-block-grid { grid-template-columns: 1fr 440px; gap: 3rem; }
.map-visual-frame { min-height: 550px; }
.address-details-card { padding: 4rem 3.5rem; }
.footer-main-grid { grid-template-columns: 360px repeat(7, 1fr); gap: 3rem; }
.brand-bio { font-size: 1rem; }
.footer-links-col a { font-size: 0.95rem; }
}
/* --- LAPTOPS TO COMPACT PC MONITORS (1350px down to 1024px) --- */
@media (max-width: 1350px) {
/* Compresses the extensive footer navigation links safely down into stacked grid lines */
.footer-main-grid {
grid-template-columns: repeat(4, 1fr);
gap: 2.5rem 2rem;
}
.footer-brand-col {
grid-column: span 4;
max-width: 500px;
margin-bottom: 1rem;
}
}
/* --- PORTRAIT TABLETS (1023px down to 768px) --- */
@media (max-width: 1023px) {
#contact-map-section { padding: 3.5rem 0; }
/* Collapses side-by-side maps block layout into unified vertical stacking blocks */
.map-block-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.map-visual-frame {
min-height: 350px;
}
.footer-main-grid {
grid-template-columns: repeat(3, 1fr);
}
.footer-brand-col {
grid-column: span 3;
}
}
/* --- SMARTPHONES & MOBILE DEVICES (767px and below) --- */
@media (max-width: 767px) {
.section-container, .footer-container { padding: 0 1.25rem; }
.map-centered-header { margin-bottom: 2.5rem; }
.address-details-card { padding: 1.75rem 1.5rem; }
.map-tooltip-card {
display: none; /* Hide abstract tooltip pop-up component on mobile viewport touch displays safely */
}
#global-site-footer { padding: 3.5rem 0 2rem 0; }
/* Collapses all structural links into unified clean one-column linear lists layout */
.footer-main-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-brand-col {
grid-column: span 1;
}
.col-dash { margin-bottom: 0.5rem; }
.footer-legal-bar {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
margin-top: 1rem;
}
}


/* ================================
   MOBILE MENU BUTTON
================================ */

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 9999;
    position: relative;
}

.mobile-menu-toggle .bar {
    display: block;
    width: 30px;
    height: 3px;
    background: #333;
    border-radius: 3px;
    transition: 0.3s ease;
}


/* ================================
   DESKTOP
================================ */

.nav-links {
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 0;
    padding: 0;
    list-style: none;
}


/* ================================
   MOBILE
================================ */

@media (max-width: 768px) {

    /* Show hamburger */
    .mobile-menu-toggle {
        display: flex;
    }

    /* Mobile navigation */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        margin: 0;
        padding: 15px 20px;

        background: #fff;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);

        z-index: 9998;
    }

    /* Open menu */
    .nav-links.active {
        display: flex !important;
    }

    /* Menu items */
    .nav-links > li {
        width: 100%;
        margin: 0;
    }

    .nav-links > li > a {
        display: block;
        width: 100%;
        padding: 14px 5px;

        color: #333;
        text-decoration: none;

        border-bottom: 1px solid #eee;
    }


    /* ================================
       HAMBURGER → X
    ================================ */

    .mobile-menu-toggle.open .bar:nth-child(1) {
        transform: translateY(9.5px) rotate(45deg);
    }

    .mobile-menu-toggle.open .bar:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-toggle.open .bar:nth-child(3) {
        transform: translateY(-9.5px) rotate(-45deg);
    }


    /* ================================
       DROPDOWN
    ================================ */

    .has-dropdown .submenu {
        display: none;
        position: static;
        width: 100%;
        padding: 0 0 0 15px;
        background: #fafafa;
    }

    .has-dropdown.open .submenu {
        display: block;
    }
}