/* =========================
   Emtel Business — Styles
   Mobile-first, responsive
   ========================= */

/* CSS Variables */
:root{
  --bg-dark:#0B0E16;
  --bg-grey:#0f1422;
  --brand:#EC2B38;
  --brand-2:#ED6B75;
  --text:#1A1A1A;
  --muted:#5f6b7a;
  --white:#fff;
  --card:#ffffff;
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --radius:18px;
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --space-6:48px;
  --space-7:72px;
  --maxw:1200px;
}


a[data-page],
a[data-page]:hover,
a[data-page]:visited,
a[data-page]:active {
  text-decoration: none !important;
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
}



/* Reset + Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

.main-wrapper{overflow:hidden}

/* Utilities */
.container,
.section-container{/*max-width:var(--maxw);*/ margin:0 auto; /*padding:0 var(--space-4)*/}
.no-side-padding{padding-left:0!important;padding-right:0!important}
.highlight{)}
.section-title{font-size:clamp(24px,5vw,35px); margin:0 0 var(--space-3)}
.section-title1{font-size:clamp(22px,4.5vw,34px);  margin:0 0 var(--space-3)}
.section-title-white{color:var(--white)}
.section-subtitle,.section-subtitle1{; margin:0 0 var(--space-4)}

/* Buttons */
.cta-button{
  background:var(--brand);
  color:#fff;
  border:none;
  padding:12px 18px;
  border-radius:999px;
  font-weight:700;
  box-shadow:var(--shadow);
  transition:transform .12s ease, opacity .12s ease, background .2s ease;
}
.cta-button:hover{transform:translateY(-1px);opacity:.95}
.read-more,.read-more1{
  display:inline-block;
  margin-top:var(--space-2);
  font-weight:600;
  color:var(--brand);
}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:60vh;
  display:grid;
  place-items:center;
  background:linear-gradient(180deg, rgba(11,14,22,.65), rgba(11,14,22,.65));
  overflow:hidden;
}

.hero-overlay{
  position:absolute; inset:0;
  /*background:linear-gradient(180deg, rgba(11,14,22,.35) 0%, rgba(11,14,22,.8) 100%);*/
  z-index:-1;
}
.hero-container{width:100%}
.hero-content{
  text-align:left;
  color:#fff;
  padding: var(--space-6) var(--space-4);
}
.hero-content h1{margin-bottom:var(--space-3); line-height:1.1}
.hero-content p{margin:0 0 var(--space-4); color:#e9edf3}

/* Wave banner under hero */
.eb-wave-internet-dia{position:relative}
.wave-hero-dia-img{width:100%; height:auto;}

/* ===== Intro (internet-dia1) ===== */
.internet-dia1{
  background: radial-gradient(1200px 600px at 70% -10%, #1a2032 0%, #0f1422 40%, #0b0e16 100%), var(--bg-dark);
  color:#fff;
  padding: var(--space-6) 0;
}
.container-internet1{
  display:grid;
  gap:var(--space-5);
  align-items:center;
  /*max-width:var(--maxw); */
  margin:0 auto; padding:0 var(--space-4);
}
.private-network-content1 p{margin:0 0 var(--space-3)}
.private-network-image1{justify-self:center}
.private-network-image1 img{max-width:520px; border-radius:var(--radius)}

/* ===== Services ===== */
.services{background:#fff; padding: var(--space-6) 0}
.services-inner{text-align:center}
.services-grid1{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-4);
  margin-top:var(--space-4);
}
.service-card1{
  
  border-radius:var(--radius);
  padding:var(--space-4);
  box-shadow:var(--shadow);
}
.service-icon{width:56px;height:56px;margin:0 auto var(--space-2)}
.service-icon img{width:100%;height:100%;object-fit:contain}
.services-image{width:100%; margin-top:var(--space-5)}

/* ===== Solutions ===== */
.solutions{padding: var(--space-6) 0; background:#ffffff}
.solutions .container{text-align:center}
.solutions-grid{
  margin-top:var(--space-4);
  display:grid;
  gap:var(--space-4);
  text-align:left;
}


/*.solution-card{
  border:1px solid #eef0f3;
  border-radius:var(--radius);
  padding:var(--space-4);
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}*/

.solution-icon img{width:100%;height:100%;object-fit:contain}

/* ===== Private Network ===== */
.private-network{
  padding: var(--space-6) 0;
  background:#fff;
}
.private-network .container{
  display:grid;
  gap:var(--space-5);
  align-items:center;
}
.private-network-content p{margin:0 0 var(--space-3); }
.private-network-image{justify-self:center}
.private-network-image img{max-width:540px; border-radius:var(--radius)}
.private-image{width:100%; opacity:.9}

/* ===== Why Choose ===== */
.why-choose{
  padding: var(--space-6) 0;
  background:#fafbfc;
}
.why-choose .container{
  display:grid;
  gap:var(--space-5);
  align-items:center;
}
.why-choose-image{justify-self:center}
.why-choose-image img{max-width:640px; border-radius:var(--radius)}

/* ===== Cross Sell ===== */
.cross-sell-section{padding: var(--space-6) 0; background:#fff}
.cross-sell-content{max-width:var(--maxw); margin:0 auto; padding:0 var(--space-4); text-align:center}
.cross-sell-cards{
  margin-top:var(--space-4);
  display:grid;
  gap:var(--space-4);
}
.cross-sell-card{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  text-align:left;
  display:flex;
  flex-direction:column;
}
.card-img-placeholder img{width:100%; height:auto; display:block}
.card-body{padding:var(--space-4)}
.card-body h4{font-size:clamp(18px,3.5vw,22px); margin:0 0 var(--space-2)}
.card-body p{; margin:0 0 var(--space-3)}

/* ===== Footer (basic safety) ===== */
footer{width:100%}

/* =========================
   Breakpoints
   ========================= */

/* ≥600px (large phones / small tablets) */
@media (min-width:600px){
  .services-grid1{grid-template-columns:repeat(2,1fr)}
  .solutions-grid{grid-template-columns:repeat(2,1fr)}
  .cross-sell-cards{grid-template-columns:repeat(2,1fr)}
}

/* ≥768px (tablets) */
@media (min-width:768px){
  .hero{min-height:68vh}
  .hero-content{padding: var(--space-7) var(--space-4)}
  .container-internet1{
    grid-template-columns:1.1fr .9fr;
  }
  .private-network .container{
    grid-template-columns:1.1fr .9fr;
  }
  .why-choose .container{
    grid-template-columns:1fr 1fr;
  }
}

/* ≥992px (small desktops) */
@media (min-width:992px){
  .solutions-grid{grid-template-columns:repeat(3,1fr)}
  .services-grid1{grid-template-columns:repeat(3,1fr)}
  .cross-sell-cards{grid-template-columns:repeat(3,1fr)}
}

/* ≥1200px (large desktops) */
@media (min-width:1200px){
  .hero-content h1{font-size:35px}
  .hero-content p{font-size:18px}
}

/* =========================
   Minor polish / edge cases
   ========================= */
.stars-container{position:relative}
.wave-image,
.section-container .bottom{margin-top:var(--space-6)}

.read-more u, .read-more1 u{text-underline-offset:2px}
.read-more:hover, .read-more1:hover{opacity:.9}

/* Ensure long words don’t overflow on mobile */
h1,h2,h3,h4,p,a,button{word-wrap:break-word;overflow-wrap:anywhere}

/* -------------- HERO (Internet page variants) -------------- */
.hero{
  /* keep base behavior from styles.css, just ensure min-height on small screens */
  min-height: var(--hero-min);
}
.hero-container-internet{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}
.hero-content-internet{
  text-align:center;
  color:#fff;
  padding:56px 0 64px;
}
.hero-title-internet{
  margin:0 0 12px;
  font-weight:800;
  line-height:1.15;
  /* Scales 26px → 44px */
  font-size: clamp(26px, 6vw, 44px);
}
.hero-description-internet{
  margin:0 0 20px;
  color:#e9edf3;
  /* Scales 15px → 18px */
  font-size: clamp(15px, 3.2vw, 18px);
}

/* ===========================================================
   DIA Page Responsive Additions
   =========================================================== */

/* ---------- Global connectivity map ---------- */
.connectivity-map-section1{ background:#fff; padding:56px 0 }
.choose-emtel2{ max-width:var(--maxw); margin:0 auto; padding:0 var(--space-4) }
.map-wrapper{ margin-top:16px }
.map-image{ width:100%; height:auto; display:block; object-fit:cover; }

/* ---------- Secondary intro (private-network2) ---------- */
.private-network2{ padding:56px 0; background:#fff }
.private-network2 .container-internet1{ gap:28px }
.private-network2 p{  }

/* ---------- “What is DIA” block ---------- */
.why-choose-content1{ color:#0b0e16 }
.why-choose-content1 p{ ; margin:0 0 12px }

/* ---------- DIA features section ---------- */
.dedicated-access-section{ background:#fff }
.hero-section1{ position:relative; padding:56px var(--space-4); background:radial-gradient(1200px 600px at 80% -10%, #1a2032 0%, #0f1422 40%, #0b0e16 100%); color:#fff }
.hero-content1{ max-width:var(--maxw); margin:0 auto; text-align:center }
.hero-title{ margin:0; font-size:clamp(22px,4.6vw,32px); font-weight:800 }
.hero-subtitle{ margin:6px 0 14px; font-size:clamp(20px,4.4vw,28px); font-weight:800; color:#e9edf3 }
.hero-description{ margin:0 auto 18px; max-width:900px; color:#dbe2ee }
.options-container{ display:grid; grid-template-columns:1fr; gap:16px; max-width:900px; margin:18px auto 4px }
.option{  padding:18px; text-align:left }
.option-guarantee{ display:inline-block; font-weight:800;color:#0b0e16; border-radius:999px; margin-bottom:8px }

/* ---------- Comparison table ---------- */
.comparison-section{ padding:40px var(--space-4) 56px; background:#fff }
.comparison-section .comparison-title{ text-align:center; ; max-width:900px; margin:0 auto 18px }
.comparison-table{ display:grid; grid-template-columns:1fr; gap:16px; max-width:900px; margin:0 auto }
.plan-column{ background:#fff; border:1px solid #eef0f3; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); text-align:center }
.plan-name{ font-weight:800; font-size:clamp(18px,4vw,22px); margin:0 0 4px }
.plan-guarantee{ color:var(--brand); font-weight:700; margin:0 0 10px }
.feature-item{ padding:10px 0; }
.feature-text{ padding:10px 0;   }
.checkmark{ font-size:18px; color:#18b36e }
.plan-target{ margin-top:10px;  }


/* ---------- Benefits grid ---------- */
.benefits-section{ background:#fafbfc; padding:56px 0 }
.trust-section{ max-width:var(--maxw); margin:0 auto; padding:0 var(--space-4) }
.section-title-dark{ font-size:clamp(24px,5vw,36px); margin:0 0 8px; font-weight:800; color:#0b0e16 }
.section-description{ ; margin:0 auto;  }
.features-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:18px }
.feature-card{ background:#fff;  border-radius:var(--radius); padding:18px; box-shadow:var(--shadow) }
.main-feature{ padding:0; overflow:hidden }
.main-feature-image{ width:100%; object-fit:cover }
.feature-icon{ width:44px; height:44px; margin-bottom:10px }
.feature-title{ margin:0 0 6px; font-size:clamp(18px,4vw,20px); font-weight:700 }
.feature-description{ margin:0;  }

/* ---------- Responsive breakpoints ---------- */
@media (min-width:600px){
  .options-container{ grid-template-columns:repeat(2,1fr) }
  .comparison-table{ grid-template-columns:repeat(2,1fr) }
}
@media (min-width:768px){
  .container-internet1{ grid-template-columns:1.1fr .9fr }
  .role-high-speed .container-internet1{ grid-template-columns:1fr 1fr }
  .private-network2 .container-internet1{ grid-template-columns:1.1fr .9fr }
}
@media (min-width:992px){
  .features-grid{ grid-template-columns:1.3fr 1fr 1fr }
  .features-grid .main-feature{ grid-column:1/2; }
}

/* ===========================================================
   Enterprise Broadband — Page Additions
   =========================================================== */

/* ---------- HERO (Enterprise Broadband variant) ---------- */
.enterprise_broadband-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--space-4);
}
.hero-content_broadband{
  text-align:center;
  color:#fff;
  padding:56px 0 64px;
}
.hero-content_broadband h1{
  margin:0 0 12px;
  line-height:1.15;
  font-weight:800;
  font-size:clamp(28px,6vw,48px);
}
.hero-content_broadband p{
  margin:0 0 18px;
  color:#e9edf3;
  font-size:clamp(15px,3.2vw,18px);
}

/* ---------- Intro block (reuses .internet-dia1) ---------- */
.internet-dia1{ padding:56px 0 }
.section-title-white{ color:#fff }

/* ---------- “Why choose Enterprise Broadband?” section ---------- */
.section-header-enterprise-1{
  text-align:center;
  margin-bottom:18px;
}
.section-title-enterprise-1{
  font-size:clamp(24px,5vw,36px);
  margin:0 0 8px;
  font-weight:800;
  color:#0b0e16;
}
.section-description-enterprise-1{
  ;
  margin:0 auto;
  max-width:860px;
}

/* ---------- Features grid (reuses global feature styles if present) ---------- */
.features-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:18px;
}
.feature-card{
  background:#fff;

  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.main-feature{ padding:0; overflow:hidden }
.main-feature-image{
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover;
}
.feature-icon{ width:44px; height:44px; margin-bottom:10px }
.feature-icon img{ width:100%; height:100%; object-fit:contain }
.feature-title{ margin:0 0 6px; font-size:clamp(18px,4vw,20px); font-weight:700 }
.feature-description{ margin:0;  }

/* ---------- Cross-sell (inherits base) ---------- */
.cross-sell-section{ padding:56px 0 }
.cross-sell-content{ max-width:1200px; margin:0 auto; padding:0 var(--space-4); text-align:center }

/* ===========================================================
   Breakpoints
   =========================================================== */

/* ≥600px */
@media (min-width:600px){
  /* nothing special needed yet */
}

/* ≥768px (tablets) */
@media (min-width:768px){
  .hero .hero-content_broadband{ text-align:left; padding:82px 0 96px; max-width:800px }
  .container-internet1{ grid-template-columns:1.1fr .9fr } /* intro two-column */
  .features-grid{ grid-template-columns:repeat(2,1fr) }
}

/* ≥992px (small desktops) */
@media (min-width:992px){
  .features-grid{ grid-template-columns:1.3fr 1fr 1fr } /* main image taller on left */
  .features-grid .main-feature{ grid-column:1/2;  }
}

/* ≥1200px */
@media (min-width:1200px){
  .hero-content_broadband h1{ font-size:56px }
  .hero-content_broadband p{ font-size:18px }
}

/* ===========================================================
   Print tweaks
   =========================================================== */
@media print{
  .hero, .eb-wave-internet-dia{ display:none !important }
  a[href]::after{ content:" (" attr(href) ")"; font-size:12px }
}

/* ===========================================================
   BizConnect (SMEs) — Page Additions
   =========================================================== */

/* ---------- Dedicated benefits (image + feature cards) ---------- */
.dedicated-benefits-section{ background:#fff; padding:56px 0 }
.dedicated-container{
  
  margin:0 auto;
  padding:0 var(--space-4);
}

.section-header-enterprise-1{ text-align:center; margin-bottom:18px }
.section-title-enterprise-1{
  font-size:clamp(24px,5vw,36px);
  margin:0 0 8px;
  font-weight:800;
  color:#0b0e16;
}
.section-description-enterprise-1{
  ;
  margin:0 auto;
  max-width:860px;
}

/* Image on top */
.dedicated-image-wrapper{ margin: 14px 0 10px }
.dedicated-image{
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* Feature cards */
.dedicated-features-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:16px;
}
.dedicated-card{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.dedicated-icon{ width:44px; height:44px; margin-bottom:10px }
.dedicated-icon img{ width:100%; height:100%; object-fit:contain }
.dedicated-card-title{
  margin:0 0 6px;
  font-size:clamp(18px,4vw,20px);
  font-weight:700;
}
.dedicated-card-text{ margin:0;  }

/* ---------- Story/Use-case block ---------- */
.role-high-speed{ padding:56px 0; background:#fafbfc }
.role-high-speed .container-internet1{ gap:28px }
.role-high-speed .why-choose-image{ justify-self:center }
.role-high-speed .why-choose-image img{
  width:100%; max-width:640px; border-radius:var(--radius);
}
.role-high-speed .why-choose-content p{  }

/* ---------- Cross-sell spacing (inherits base styles) ---------- */
.cross-sell-section{ padding:56px 0 }
.cross-sell-content{ max-width:var(--maxw); margin:0 auto; padding:0 var(--space-4); text-align:center }

/* ===========================================================
   Breakpoints
   =========================================================== */

/* ≥600px */
@media (min-width:600px){
  .dedicated-features-grid{ grid-template-columns:repeat(2,1fr) }
}

/* ≥768px (tablets) */
@media (min-width:768px){
  .container-internet1{ grid-template-columns:1.1fr .9fr }  /* hero intro two-column */
}

/* ≥992px (small desktops) */
@media (min-width:992px){
  .dedicated-features-grid{ grid-template-columns:repeat(4,1fr) }
}

/* ≥1200px */
@media (min-width:1200px){
  /* no extra rules needed yet */
}

/* ===========================================================
   Print
   =========================================================== */
@media print{
  .hero, .eb-wave-internet-dia{ display:none !important }
  a[href]::after{ content:" (" attr(href) ")"; font-size:12px }
}

/* ===========================================================
   Private Networks — Page Additions
   =========================================================== */

/* ---------- HERO (Private Networks variant) ---------- */
.private_network_hero-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--space-4);
}
.private_network_hero-content{
  text-align:center;
  color:#fff;
  padding:56px 0 64px;
}
.private_network_hero-content h1{
  margin:0 0 12px;
  line-height:1.15;
  font-weight:800;
  font-size:clamp(28px,6vw,48px);
}
.private_network_hero-content p{
  margin:0 0 18px;
  color:#e9edf3;
  font-size:clamp(15px,3.2vw,18px);
}

/* ---------- Intro (Dedicated Private Networks) ---------- */
.dedicated-private-network{ background:#0b0e16; padding:56px 0 }
.dedicated-private-network p{ color:#e9edf3 }

/* ---------- Benefits section ---------- */
.benefits-section{ background:#fafbfc; padding:56px 0 }
.section-title-black{
  font-size:clamp(24px,5vw,36px);
  font-weight:800;
  color:#0b0e16;
  margin:0 0 12px;

}
.features-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:18px;
}
.feature-card{
  background:#fff;

  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.main-feature{ padding:0; overflow:hidden }
.main-feature-image{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:var(--radius) }
.feature-icon{ width:44px; height:44px; margin-bottom:10px }
.feature-icon img{ width:100%; height:100%; object-fit:contain }
.feature-title{ margin:0 0 6px; font-size:clamp(18px,4vw,20px); font-weight:700 }
.feature-description{ margin:0;  }

/* ---------- Explore Local & International Private Networks ---------- */
.private-network1{ background:#fff; padding:56px 0 }
.private-network-content1-bold{ margin:0 0 8px; font-size:clamp(18px,4vw,20px); font-weight:700; color:#0b0e16 }
.private-network-content1-n{ ; margin:0 0 12px }
.learn-more-local-private-network,
.learn-more-international-private-network{
  display:inline-block;
  margin-top:8px;
  font-weight:600;
  color:var(--brand);
  text-decoration:none;
}
.learn-more-local-private-network:hover,
.learn-more-international-private-network:hover{ opacity:.85 }

/* ---------- Cross-sell spacing (inherits base) ---------- */
.cross-sell-section{ padding:56px 0 }
.cross-sell-content{ max-width:1200px; margin:0 auto; padding:0 var(--space-4); text-align:center }

/* ===========================================================
   Breakpoints
   =========================================================== */

/* ≥600px */
@media (min-width:600px){
  .features-grid{ grid-template-columns:repeat(2,1fr) }
}

/* ≥768px */
@media (min-width:768px){
  .private_network_hero-content{ text-align:left; padding:82px 0 96px; max-width:820px }
  .container-internet1{ grid-template-columns:1.1fr .9fr }
  .features-grid{ grid-template-columns:repeat(3,1fr) }
}

/* ≥992px */
@media (min-width:992px){
  .features-grid{ grid-template-columns:1.3fr 1fr 1fr }
  .features-grid .main-feature{ grid-column:1/2; }
}

/* ===========================================================
   Print tweaks
   =========================================================== */
@media print{
  .hero, .eb-wave-internet-dia{ display:none !important }
  a[href]::after{ content:" (" attr(href) ")"; font-size:12px }
}

/* ===========================================================
   Local Private Network — Page Additions
   =========================================================== */

.private_network_hero-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--space-4);
}
.private_network_hero-content{
  text-align:center;
  color:#fff;
  padding:56px 0 64px;
}
.private_network_hero-content h1{
  margin:0 0 12px;
  line-height:1.15;
  font-weight:800;
  font-size:clamp(26px,6vw,46px);
}
.private_network_hero-content p{
  margin:0 0 18px;
  color:#e9edf3;
  font-size:clamp(15px,3.2vw,18px);
}

/* ---------- Intro block (reuses .internet-dia1 layout) ---------- */
.internet-dia1{ padding:56px 0 }


/* ===========================================================
   Benefits Section (cards + image)
   =========================================================== */
.network-benefits-section{ background:#fff; padding:56px 0 }
.network-benefits-wrapper{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--space-4);
}
.network-benefits-header{
  text-align:center;
  margin-bottom:18px;
}
.network-benefits-title{
  font-size:clamp(24px,5vw,36px);
  font-weight:800;
  color:#0b0e16;
  margin:0 0 8px;
}
.network-benefits-header p{
  ;
  margin:0 auto;
}

/* Cards grid */
.network-benefits-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:18px;
}
.network-card,
.network-image-card{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.network-card{
  padding:18px;
}
.network-icon{
  width:44px; height:44px; margin-bottom:10px;
}
.network-icon img{ width:100%; height:100%; object-fit:contain }
.network-card-title{
  margin:0 0 6px;
  font-size:clamp(18px,4vw,20px);
  font-weight:700;
  color:#0b0e16;
}
.network-card-text{ margin:0;  }

/* Image card */
.network-image-card img{
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover;
}

/* ===========================================================
   Private Local Network — Use Cases block
   =========================================================== */
.private-local-network{ background:#0b0e16; padding:56px 0 }
.private-local-network .container-internet1{ gap:28px }
.network-benefits-header-button{
  display:inline-block;
  border:none;
  background:#fff;
  color:#0b0e16;
  font-weight:800;
  letter-spacing:.2px;
  padding:8px 14px;
  border-radius:999px;
  margin-bottom:10px;
  box-shadow:var(--shadow);
}
.private-local-network .section-title-white{ margin:6px 0 10px }
.private-local-network-content1,
.private-local-network-content1 p{ color:#e9edf3 }
.private-local-network-content-p{ margin:0 0 8px }
.private-local-network .private-network-image1 img{
  width:100%; max-width:520px; border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ===========================================================
   Responsive Breakpoints
   =========================================================== */

/* ≥600px */
@media (min-width:600px){
  /* make benefits grid 2-up */
  .network-benefits-grid{ grid-template-columns:repeat(2,1fr) }
}

/* ≥768px (tablets) */
@media (min-width:768px){
  .private_network_hero-content{ text-align:left; padding:82px 0 96px; max-width:840px }
  .container-internet1{ grid-template-columns:1.1fr .9fr }

  /* benefits grid: 3-up; force image card to span 2 columns for balance */
  .network-benefits-grid{ grid-template-columns:repeat(3,1fr); gap:18px }
  .network-image-card{ grid-column: span 2 }
}

/* ≥992px (small desktops) */
@media (min-width:992px){
  /* 3-up with image card on the right, taller */
  .network-benefits-grid{
    grid-template-columns:1fr 1fr 1fr;
    grid-auto-rows:1fr;
    gap:18px;
  }
  /* Make the image card occupy the full third column across two rows */
  .network-image-card{
    grid-column:3 / 4;
   
    display:block;
  }

  /* Use cases: keep two-column layout and tighten copy width */
  .private-local-network .container-internet1{ grid-template-columns:1.1fr .9fr }
  .private-local-network .private-local-network-content1{ max-width:680px }
}

/* ≥1200px */
@media (min-width:1200px){
  .private_network_hero-content h1{ font-size:52px }
  .private_network_hero-content p{ font-size:18px }
}

/* ===========================================================
   Accessibility & Print
   =========================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
}
@media print{
  .hero{ display:none !important }
  a[href]::after{ content:" (" attr(href) ")"; font-size:12px }
}

/* ===========================================================
   International Private Network (IPN) — Page Additions
   =========================================================== */

.pni-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--space-4);
}
.hero-content_pni{
  text-align:center;
  color:#fff;
  padding:56px 0 64px;
}
.hero-content_pni h1{
  margin:0 0 12px;
  line-height:1.15;
  font-weight:800;
  font-size:clamp(26px,6vw,46px);
}
.hero-content_pni p{
  margin:0 0 18px;
  color:#e9edf3;
  font-size:clamp(15px,3.2vw,18px);
}



/* ---------- Intro block (International Private Network) ---------- */
.international-private-network{
  padding:56px 0;
  background:#0b0e16; /* dark to match hero */
}
.international-private-network .p-white{ color:#e9edf3 }

/* ===========================================================
   Benefits Section (cards + image)
   =========================================================== */
.section-header-enterprise{ text-align:center; margin-bottom:18px }
.section-title-enterprise{
  font-size:clamp(24px,5vw,36px);
  margin:0 0 8px;
  font-weight:800;
  color:#0b0e16;
}
.section-description-enterprise{
  margin:0 auto;
  max-width:900px;
}

/* Reuse features grid styles; add safeguards */
.features-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:18px;
}
.feature-card{
  background:#fff;

  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.main-feature{ padding:0; overflow:hidden }
.main-feature-image{
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--radius);
}
.feature-icon{ width:44px; height:44px; margin-bottom:10px }
.feature-icon img{ width:100%; height:100%; object-fit:contain }
.feature-title{ margin:0 0 6px; font-size:clamp(18px,4vw,20px); font-weight:700 }
.feature-description{ margin:0;  }

/* ===========================================================
   Use Cases (private-local-network) — safe if already defined
   =========================================================== */
.private-local-network{ background:#0b0e16; padding:56px 0 }
.private-local-network .container-internet1{ gap:28px }
.network-benefits-header-button{
  display:inline-block;
  border:none;
  background:#fff;
  color:#0b0e16;
  font-weight:800;
  letter-spacing:.2px;
  padding:8px 14px;
  border-radius:999px;
  margin-bottom:10px;
  box-shadow:var(--shadow);
}
.private-local-network .section-title-white{ margin:6px 0 10px }
.private-local-network-content1,
.private-local-network-content1 p{ color:#e9edf3 }
.private-local-network-content-p{ margin:0 0 8px }
.private-local-network .private-network-image1 img{
  width:100%; max-width:520px; border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ===========================================================
   Breakpoints
   =========================================================== */

/* ≥600px */
@media (min-width:600px){
  .features-grid{ grid-template-columns:repeat(2,1fr) }
}

/* ≥768px (tablets) */
@media (min-width:768px){
  .hero .hero-content_pni{ text-align:left; padding:82px 0 96px; max-width:500px }
  .container-internet1{ grid-template-columns:1.1fr .9fr }

  /* benefits grid: 3-up; balance image span on medium screens */
  .features-grid{ grid-template-columns:repeat(3,1fr); gap:18px }
  .features-grid .main-feature{ grid-column: span 2 }
}

/* ≥992px (small desktops) */
@media (min-width:992px){
  /* Tall image on the left across two rows */
  .features-grid{
    grid-template-columns:1.3fr 1fr 1fr;
    grid-auto-rows:1fr;
  }
  .features-grid .main-feature{
    grid-column:1 / 2;
   
  }

  .private-local-network .container-internet1{ grid-template-columns:1.1fr .9fr }
}

/* ≥1200px */
@media (min-width:1200px){
  .hero-content_pni h1{ font-size:52px }
  .hero-content_pni p{ font-size:18px }
}

/* ===========================================================
   Accessibility & Print
   =========================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important }
}
@media print{
  .hero, .wave-private-network-int{ display:none !important }
  a[href]::after{ content:" (" attr(href) ")"; font-size:12px }
}

/* ===========================================================
   Data Centre & Cloud Page
   =========================================================== */

.network-security-container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--space-4);
}
.hero-content_network-security{
  text-align:center;
  color:#fff;
  padding:56px 0 64px;
}
.hero-content_network-security h1{
  margin:0 0 12px;
  line-height:1.15;
  font-weight:800;
  font-size:clamp(26px,6vw,46px);
}
.hero-content_network-security p{
  margin:0 0 18px;
  color:#e9edf3;
  font-size:clamp(15px,3.2vw,18px);
}


/* ---------- Intro Section ---------- */
.internet-dia1{
  background:#0b0e16;
  padding:56px 0;
}
.internet-dia1 .section-title-white{ margin-bottom:12px }
.internet-dia1 p{ color:#e9edf3 }

/* ---------- Benefits Section ---------- */
.section-header-enterprise.alternative{ text-align:center; margin-bottom:20px }
.section-header-enterprise.alternative h2{
  font-size:clamp(24px,5vw,36px);
  margin:0 0 8px;
  font-weight:800;
}
.section-header-enterprise.alternative p{
  max-width:900px;
  margin:0 auto;
}

/* features grid reused */
.features-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:18px;
}
.feature-card{
  background:#fff;
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.main-feature{ padding:0; overflow:hidden }
.main-feature-image{
  width:100%; height:auto; display:block;
  border-radius:var(--radius);
  aspect-ratio:16/9; object-fit:cover;
}
.feature-icon{ width:44px; height:44px; margin-bottom:10px }
.feature-icon img{ width:100%; height:100%; object-fit:contain }
.feature-title{ margin:0 0 6px; font-size:clamp(18px,4vw,20px); font-weight:700 }
.feature-description{ margin:0;  }

/* ---------- Data Centre Solutions Section ---------- */
.data-centre-section{
  background:#f9fafa;
  padding:56px 0;
}
.section-header-data-centre{ text-align:center; margin-bottom:28px }
.section-title-data-centre{
  font-size:clamp(24px,5vw,34px);
  font-weight:800;
  margin:0 0 8px;
}
.section-description-data-centre{  }

.solutions-grid-data-centre{
  display:grid;
  
  gap:16px;
  align-items:start;
}
.solutions-left-data-centre{
  display:grid;
  gap:16px;
}
.solution-card-data-centre{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}
.solution-card-data-centre h3{ margin:0 0 6px; font-weight:700 }
.solution-description{ margin:0;  }

.image-placeholder img{
  width:100%;
  max-width:520px;
  border-radius:var(--radius);
  display:block;
  margin:auto;
}

.button-wrapper{ text-align:center; margin-top:24px }
.learn-more-local-private-network{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  background:#0b0e16;
  color:#fff;
  font-weight:700;
  text-decoration:none;
  box-shadow:var(--shadow);
}

/* ---------- Cloud Solutions Section ---------- */
.solutions{
  padding:56px 0;
  background:#fff;
  text-align:center;
}
.solutions-grid{
  display:grid;

  gap:18px;
  margin-top:20px;
}
/*.solution-card{
  background:#f9fafa;
  border:1px solid #e5e7eb;
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
}*/
.solution-card h3{ font-weight:700; margin:0 0 8px; text-decoration:none }
.solution-card p{ margin:0; }
.solution-icon img{ object-fit:contain; margin-bottom:10px }

.services-image{ width:100%; height:auto; margin-top:30px }

/* ---------- Cross-Sell Section ---------- */
/* .cross-sell-section{ background:#ffffff; color:#000000; padding:56px 0 }
.cross-sell-content{ max-width:1200px; margin:auto; text-align:center }
.cross-sell-content h2{ font-size:clamp(24px,5vw,34px); margin-bottom:14px; font-weight:800 } */

.cross-sell-card img{ width:100%; height:auto; display:block }
.card-body{ padding:16px; text-align:left }
.card-body h4{ margin:0 0 8px; font-weight:700 }
.read-more1{ color:var(--link); font-weight:600; cursor:pointer }

/* ---------- Breakpoints ---------- */
@media (min-width:600px){
  .features-grid{ grid-template-columns:repeat(2,1fr) }
  .solutions-grid{ grid-template-columns:repeat(3,1fr) }
  .cross-sell-cards{ grid-template-columns:repeat(2,1fr) }
}
@media (min-width:768px){
  .hero-content_network-security{ text-align:left; padding:82px 0 96px; max-width:820px }
  .container-internet1{ grid-template-columns:1.1fr .9fr }
  .features-grid{ grid-template-columns:repeat(3,1fr) }
  .features-grid .main-feature{ grid-column: span 2 }
  .solutions-grid-data-centre{ grid-template-columns:1fr 1fr auto }
}
@media (min-width:992px){
  .features-grid{ grid-template-columns:1.3fr 1fr 1fr; grid-auto-rows:1fr }
  .features-grid .main-feature{ grid-column:1/2; }
  .cross-sell-cards{ grid-template-columns:repeat(3,1fr) }
}
@media (min-width:1200px){
  .hero-content_network-security h1{ font-size:52px }
  .hero-content_network-security p{ font-size:18px }
}

/* ===========================================================
   Data Centre — Page Additions
   =========================================================== */

.data-centre-container{
  width:100%; max-width:1200px; margin:0 auto; padding:0 var(--space-4);
}
.hero-content_data-centre{
  text-align:center; color:#fff; padding:56px 0 64px;
}
.hero-content_data-centre h1{
  margin:0 0 12px; line-height:1.15; font-weight:800;
  font-size:clamp(26px,6vw,46px);
}
.hero-content_data-centre p{
  margin:0 0 18px; color:#e9edf3;
  font-size:clamp(15px,3.2vw,18px);
}


/* ---------- INTRO (dark) ---------- */
.internet-dia1{ background:#0b0e16; padding:56px 0 }
.internet-dia1 .section-title-white{ margin-bottom:12px }
.internet-dia1 p{ color:#e9edf3 }

/* ---------- SHARED FEATURE GRID ---------- */
.features-grid{
  display:grid; grid-template-columns:1fr; gap:16px; margin-top:18px;
}
.feature-card{
  background:#fff;  border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow);
}
.main-feature{ padding:0; overflow:hidden }
.main-feature-image{
  width:100%; height:auto; display:block; border-radius:var(--radius);
  aspect-ratio:16/9; object-fit:cover;
}
.feature-icon{ width:44px; height:44px; margin-bottom:10px }
.feature-icon img{ width:100%; height:100%; object-fit:contain }
.feature-title{ margin:0 0 6px; font-size:clamp(18px,4vw,20px); font-weight:700 }
.feature-description{ margin:0;  }

/* ---------- BENEFITS (Why choose DC) ---------- */
.benefits-section{ background:#fafbfc; padding:56px 0 }
.section-header-enterprise{ text-align:center; margin-bottom:18px }
.section-title-enterprise{
  font-size:clamp(24px,5vw,36px); margin:0 0 8px; font-weight:800; color:#0b0e16;
}
.section-description-enterprise{ ; margin:0 auto; max-width:900px }

/* ---------- SOLUTIONS (light) ---------- */
.solutions{ padding:56px 0; background:#fff; text-align:center }
.p-style{ ; max-width:900px; margin:0 auto 16px }
.solutions-grid{
  display:grid; grid-template-columns:1fr; gap:18px; margin-top:20px;
}
/*.solution-card{
  background:#f9fafa; border:1px solid #e5e7eb; border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow); text-align:left;
}*/

/* ---------- SOLUTIONS (dark band) ---------- */
.solutions-dark{ padding:56px 0; background:#0b0e16; color:#fff; text-align:center }
.solutions-dark .solutions-grid .solution-card{
  background:#ffffff; border-color:#ffffff; color:#000000;
}
.solutions-dark .solution-card p{ color:#000000ab }

/* ---------- CROSS-SELL ---------- */
.cross-sell-section{ padding:56px 0; background:#fff }
.cross-sell-content{ max-width:1200px; margin:0 auto; text-align:center }
.cross-sell-cards{
  display:grid; grid-template-columns:1fr; gap:18px; margin-top:24px;
}

.cross-sell-card img{ width:100%; height:auto; display:block }
.card-body{ padding:16px }
.card-body h4{ margin:0 0 8px; font-weight:700 }
.read-more1{ color:var(--brand); font-weight:600 }

/* ---------- SECOND BENEFITS (Certs & Compliance) ---------- */
/* Uses same .features-grid styles; no extra needed */

/* ---------- LAYOUT HELPERS ---------- */
.container{ margin:0 auto; padding:0 var(--space-4) }

/* ===========================================================
   BREAKPOINTS
   =========================================================== */

/* ≥600px */
@media (min-width:600px){
  .solutions-grid{ grid-template-columns:repeat(3,1fr) }
  .cross-sell-cards{ grid-template-columns:repeat(2,1fr) }
}

/* ≥768px (tablets) */
@media (min-width:768px){
  .hero-content_data-centre{ text-align:left; padding:82px 0 96px; max-width:820px }
  .container-internet1{ grid-template-columns:1.1fr .9fr }
  .features-grid{ grid-template-columns:repeat(3,1fr) }
  .features-grid .main-feature{ grid-column: span 2 }           /* medium screens */
}

/* ≥992px (small desktops) */
@media (min-width:992px){
  .features-grid{ grid-template-columns:1.3fr 1fr 1fr; grid-auto-rows:1fr }
  .features-grid .main-feature{ grid-column:1/2; } /* tall left image */
  .cross-sell-cards{ grid-template-columns:repeat(3,1fr) }
}

/* ≥1200px */
@media (min-width:1200px){
  .hero-content_data-centre h1{ font-size:52px }
  .hero-content_data-centre p{ font-size:18px }
}

/* ===========================================================
   PRINT
   =========================================================== */
@media print{
  .hero, .eb-wave-internet-dia{ display:none !important }
  a[href]::after{ content:" (" attr(href) ")"; font-size:12px }
}

/* ===========================================================
   Colocation Services — Page Additions
   =========================================================== */

.data-centre-container{ width:100%; max-width:1200px; margin:0 auto; padding:0 var(--space-4) }
.hero-content_data-centre{ text-align:center; color:#fff; padding:56px 0 64px }
.hero-content_data-centre h1{ margin:0 0 12px; line-height:1.15; font-weight:800; font-size:clamp(26px,6vw,46px) }
.hero-content_data-centre p{ margin:0 0 18px; color:#e9edf3; font-size:clamp(15px,3.2vw,18px) }


/* ---------- INTRO (dark) ---------- */
.internet-dia1{ background:#0b0e16; padding:56px 0 }
.internet-dia1 .section-title-white{ margin-bottom:12px }
.internet-dia1 p{ color:#e9edf3 }

/* ===========================================================
   Colocation Benefits (custom grid)
   =========================================================== */
/* .colocation-benefits{ background:#fff; padding:56px 0 } */
.colocation-wrapper{ max-width:1200px; margin:0 auto; padding:0 var(--space-4) }

.section-header-enterprise{ text-align:center; margin-bottom:18px }
.section-title-enterprise{ font-size:clamp(24px,5vw,36px); margin:0 0 8px; font-weight:800; color:#0b0e16 }
.section-description-enterprise{ ; margin:0 auto; max-width:900px }

.colocation-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:18px;
}

/* Feature cards */
.colocation-card,
.colocation-card-feature{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.colocation-card{ padding:18px }
.colocation-card img.colocation-icon{ width:44px; height:44px; object-fit:contain; margin-bottom:10px }
.colocation-heading{ margin:0 0 6px; font-size:clamp(18px,4vw,20px); font-weight:700; color:#0b0e16 }
.colocation-text{ margin:0;  }

/* Image feature */
.colocation-card-feature img{
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover;
}

/* Span helpers (become active at wider breakpoints) */
.col-span-1-5{}   /* becomes ~1.5 columns later */
.col-span-0-75{}  /* becomes ~0.75 column later */
.col-span-3{}     /* becomes 3 columns later */

/* ===========================================================
   Dark “Certified & Standards” band
   =========================================================== */
.benefits-section-colation{
  background:#0b0e16;
  padding:56px 0;
  color:#fff;
}
.section-title-enterprise-white{
  font-size:clamp(24px,5vw,36px);
  margin:0 0 8px;
  font-weight:800;
  color:#fff;
  text-align:center;
}
.section-description-enterprise-white{
  color:#cfd6e3;
  margin:0 auto;
  max-width:900px;
  text-align:center;
}

/* Reuse global features grid */
.features-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:18px }
.feature-card{
  background:#fff; border-radius:var(--radius);
  padding:18px; box-shadow:var(--shadow)
}
.main-feature{ padding:0; overflow:hidden }
.main-feature-image{ width:100%; height:auto; display:block; border-radius:var(--radius); aspect-ratio:16/9; object-fit:cover }
.feature-icon{ width:44px; height:44px; margin-bottom:10px }
.feature-icon img{ width:100%; height:100%; object-fit:contain }
.feature-title{ margin:0 0 6px; font-size:clamp(18px,4vw,20px); font-weight:700; color:#0b0e16 }
.feature-description{ margin:0;  }

/* ===========================================================
   Cross-sell
   =========================================================== */
.cross-sell-section{ padding:56px 0; background:#fff }
.cross-sell-content{ max-width:1200px; margin:0 auto; text-align:center }
.cross-sell-card img{ width:100%; height:auto; display:block }
.card-body{ padding:16px }
.card-body h4{ margin:0 0 8px; font-weight:700 }
.read-more1{ color:var(--brand); font-weight:600 }

/* ===========================================================
   Breakpoints
   =========================================================== */

/* ≥600px */
@media (min-width:600px){
  .colocation-grid{ grid-template-columns:repeat(2,1fr) }
}

/* ≥768px (tablets) */
@media (min-width:768px){
  .hero-content_data-centre{ text-align:left; padding:82px 0 96px; max-width:840px }
  .container-internet1{ grid-template-columns:1.1fr .9fr }

  /* Colocation grid: 3-up, use spans */
  .colocation-grid{ grid-template-columns:repeat(3,1fr) }

  /* Let the first big image span 2 columns on md */
  .colocation-grid .col-span-1-5{ grid-column: span 2 }
  /* Regular cards naturally take 1 column on md */

  /* Benefits (dark band) images layout */
  .features-grid{ grid-template-columns:repeat(3,1fr) }
  .features-grid .main-feature{ grid-column: span 2 } /* medium */
}

/* ≥992px (small desktops) */
@media (min-width:992px){
  /* Colocation grid: 4-up with intentional spans */
  .colocation-grid{ grid-template-columns:repeat(4,1fr); gap:18px }

  /* First large image ~1.5 columns -> span 2 on desktop for emphasis */
  .colocation-grid .col-span-1-5{ grid-column: span 2 }

  /* Standard cards keep 1 column each; make the long description card span full row */
  .colocation-grid .col-span-3{ grid-column: 1 / -1 }  /* stretches across all 4 columns */

  /* Benefits (dark band): tall main image on the left */
  .features-grid{ grid-template-columns:1.3fr 1fr 1fr; grid-auto-rows:1fr }
  .features-grid .main-feature{ grid-column:1/2; }
}

/* ≥1200px */
@media (min-width:1200px){
  .hero-content_data-centre h1{ font-size:52px }
  .hero-content_data-centre p{ font-size:18px }
}

/* ===========================================================
   Print
   =========================================================== */
@media print{
  .hero, .eb-wave-internet-dia{ display:none !important }
  a[href]::after{ content:" (" attr(href) ")"; font-size:12px }
}


/* ===========================================================
   Lift & Shift — Unique Sections
   =========================================================== */

/* General Section */
.liftandshift-section {
  padding: 56px 0;
  background: #fff;
  text-align: center;
}
.liftandshift-section .section-title {
  font-size: clamp(24px, 5vw, 36px);
  margin-bottom: 12px;
}
.liftandshift-section .section-subtitle {
  margin: 0 auto 32px;
}

/* Cards Grid */
.liftandshift-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 24px;
}
.liftandshift-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  text-align: left;
  position: relative;
}
.liftandshift-card .card-number {
  width: 36px;
  height: 36px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.liftandshift-card .star-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
}
.liftandshift-card .star-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.liftandshift-card .card-title {
  margin: 0 0 8px;
  font-size: clamp(18px, 4vw, 20px);
  font-weight: 700;
 
}
.liftandshift-card .card-description {
  margin: 0;
}

/* Dark Section (Who Needs Lift & Shift) */
.liftandshift-section-dark {
  background: #0b0e16;
  color: #fff;
  padding: 56px 0;
  text-align: center;
}
.liftandshift-section-dark .section-title {
  font-size: clamp(24px, 5vw, 36px);
  font-weight: 800;
  margin-bottom: 12px;
  
}
.liftandshift-section-dark .section-description-liftandshift-section-white {
  margin: 0 auto 32px;
  
}

/* Responsive Grid */
@media (min-width: 768px) {
  .liftandshift-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .liftandshift-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===========================================================
   Work Area Recovery — Unique Additions (no duplicates)
   =========================================================== */

/* --- Icon feature row (Why Choose WAR?) --- */
.icon-info-wrapper{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:24px;
}
.icon-info-card{

  text-align:left;
}
.icon-info-card img{
  width:44px; height:44px; object-fit:contain; margin-bottom:10px;
}
.icon-info-title{
  margin:0 0 8px;
  font-size:clamp(18px,4vw,20px);
  font-weight:700;
  color:#0b0e16;
}
.icon-info-desc{ margin:0;  }

/* --- “Who needs WAR?” cards --- */
.liftandshift-cards-5{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:24px;
}
.liftandshift-card-5{
  background:#0f1422;               /* darker card to sit on .liftandshift-section-dark */
  border:1px solid #1e2433;
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  text-align:left;
  color:#e9edf3;
}
.liftandshift-card-5 .star-icon{
  width:36px; height:36px; margin-bottom:12px;
}
.liftandshift-card-5 .star-icon img{
  width:100%; height:100%; object-fit:contain;
}
.liftandshift-card-5 .card-title{
  margin:0 0 20px;
  font-size:clamp(18px,4vw,20px);
  font-weight:700;
}
.liftandshift-card-5 .card-description{
  margin:0;
}

/* --- Responsive layout (reuses site breakpoints) --- */
@media (min-width:768px){
  .icon-info-wrapper{ grid-template-columns:repeat(3,1fr) }
  .liftandshift-cards-5{ grid-template-columns:repeat(2,1fr) }
}
@media (min-width:992px){
  .liftandshift-cards-5{ grid-template-columns:repeat(4,1fr) }
}
@media (min-width:1200px){
  .liftandshift-cards-5{ grid-template-columns:repeat(5,1fr) }
}

/* ===========================================================
   Cloud Solutions — Unique Additions (no duplicates)
   =========================================================== */

/* Uses existing:
   - .network-security-container, .hero-content_network-security (hero)
   - .eb-wave-internet-dia / .wave-hero-dia-img (wave under hero)
   - .internet-dia1 (dark intro)
   - .colocation-benefits / .colocation-grid / .colocation-card* (benefits grid)
   Do NOT redefine those here to avoid duplication.
*/

/* ---------- “Explore Cloud Solutions” cards (dark band) ---------- */
.datacentre-cloud-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:24px;
}
.datacentre-cloud-card{
  background:#0f1422;            /* sits nicely on .liftandshift-section-dark */
  border:1px solid #1e2433;
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  color:#e9edf3;
  text-align:left;

  /* make the CTA stick to the bottom without <br> spacers */
  /* display:flex; */
  flex-direction:column;
  min-height: 280px;             /* tweak as needed */
}
.datacentre-cloud-card .card-title{
  /* margin:0 0 10px; */
  font-size:clamp(18px,4vw,20px);
  font-weight:700;
}
.datacentre-cloud-card .card-description{
  margin:0 0 14px;
}
.data-centre-cloud-btn{
  margin-top:auto;               /* pushes button to bottom */
  display:inline-block;
  padding:10px 16px;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
  background:#ffffff;
  color:#0b0e16;
  box-shadow:var(--shadow);
}
.data-centre-cloud-btn:hover{ opacity:.92 }

/* ---------- Responsive layout ---------- */
@media (min-width:768px){
  .datacentre-cloud-cards{ grid-template-columns:repeat(2,1fr) }
}
@media (min-width:992px){
  .datacentre-cloud-cards{ grid-template-columns:repeat(3,1fr) }
}

/* ===========================================================
   IaaS — Unique Additions (no duplicates)
   =========================================================== */

/* ---------- "What is IaaS?" split section ---------- */
.infras-section-iaas{ background:#fff; padding:56px 0 }
.infras-section-iaas .container-internet1{
  display:grid;
  gap:50px;
  align-items:center;
}
.infras-section-iaas .why-choose-image img{
  width:100%; height:auto; display:block; border-radius:var(--radius); box-shadow:var(--shadow);
}
.infras-section-iaas .why-choose-content .section-title{
  margin:0 0 10px; font-size:clamp(24px,5vw,36px); font-weight:800; color:#0b0e16;
}
.infras-section-iaas .why-choose-content p{ margin:0;  }

/* ---------- Benefits (IaaS features grid) ---------- */
.iaas-benefits-section{ background:#f9fafa; padding:56px 0 }
.iaas-features-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:18px;
}
.iaas-feature-card{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.iaas-feature-card .feature-icon{ width:44px; height:44px; margin-bottom:10px }
.iaas-feature-card .feature-icon img{ width:100%; height:100%; object-fit:contain }
.iaas-feature-card .feature-title{
  margin:0 0 20px; font-size:clamp(18px,4vw,20px); font-weight:700; 
}
/* ---------- “Who can benefit” uses .datacentre-cloud-cards from Cloud page ----------
   No redefinition here to avoid duplicates. Only small scope tweaks if needed. */
.liftandshift-section-dark .datacentre-cloud-card .card-title{
  line-height:1.25;              /* nicer for multi-line headings on dark cards */
}

/* ===========================================================
   Breakpoints (reuse site breakpoints)
   =========================================================== */
@media (min-width:768px){
  .infras-section-iaas .container-internet1{ grid-template-columns:1.1fr .9fr }
  .iaas-features-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (min-width:992px){
  .iaas-features-grid{ grid-template-columns:repeat(3,1fr) }
}

/* Cloud Backup — optional page-specific tweaks (no duplicates) */
.infras-section-iaas .why-choose-content p { line-height: 1.6 }
.colocation-benefits .section-header-enterprise { margin-bottom: 10px }
.liftandshift-section-dark .section-description-liftandshift-section-white { max-width: 900px }


/* ===========================================================
   DRaaS — Page-unique additions (no duplicates)
   =========================================================== */

/* ---------- Hero (unique class names for this page) ---------- */
.dr-container{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56vh;
  padding:20px;
}
.hero-content_dr{
  max-width: 980px;
  text-align: center;
}
.hero-content_dr h1{
  font-size: clamp(26px, 5.5vw, 44px);
  font-weight: 800;
  margin: 0 0 10px;
  color: #fff;
}
.hero-content_dr p{
  margin: 0 auto 16px;
  color: #e9edf3;
  max-width: 900px;
}

/* ---------- “How does it work?” cards ---------- */
.possibilities{
  background:#fff;
  padding:56px 0;
}
.possibilities-header .section-title{
  font-size:clamp(24px,5vw,36px);
  margin:0 0 10px;
}

.possibilities-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:22px;
}
.possibility-item{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  text-align:left;
}
.possibility-item .card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.possibility-item .card-title{
  margin:0;
  font-size:clamp(18px,4vw,20px);
  font-weight:700;
}
.possibility-item p{ margin:0;  }

/* ---------- Dark band: “Why does your business need DRaaS?” ---------- */
.dr-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:22px;
}
.dr-card{
  background:#0f1422;           /* harmonises with .liftandshift-section-dark */
  border:1px solid #1e2433;
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  color:#e9edf3;
  text-align:left;
}
.dr-card .card-title{
  margin:0 0 8px;
  font-size:clamp(18px,4vw,20px);
  font-weight:700;
  color:#fff;
}
.dr-card .card-description{ margin:0; color:#cfd6e3 }

/* ---------- Feature image + bullets split ---------- */
.dr-section{
  background:#fff;
  padding:56px 0;
}
.dr-container1{ max-width:1200px; margin:0 auto; padding:0 16px }
.dr-content{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin-top:22px;
  align-items:start;
}
.dr-left .dr-image-placeholder img{
  width:100%; height:auto; display:block;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
/* right column feature list */
.dr-features{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}
.dr-feature{
  background:#fff;
  border:1px solid #eef0f3;
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:flex-start;
}
.dr-feature .feature-icon{
  width:42px; height:42px; flex:0 0 42px;
}
.dr-feature .feature-icon img{
  width:100%; height:100%; object-fit:contain;
}
.dr-feature-title{
  margin:0 0 4px;
  font-size:clamp(16px,3.8vw,18px);
  font-weight:700;
  color:#0b0e16;
}
.dr-feature-description{ margin:0;  }

/* ---------- Responsive tweaks ---------- */
@media (min-width:768px){
  .possibilities-grid{ grid-template-columns:repeat(2,1fr) }
  .dr-cards{ grid-template-columns:repeat(2,1fr) }
  .dr-content{ grid-template-columns:1.05fr .95fr }
  .dr-features{ grid-template-columns:repeat(2,1fr) }
}
@media (min-width:992px){
  .possibilities-grid{ grid-template-columns:repeat(3,1fr) }
}

/* ===========================================================
   Network & Security — page-unique additions (no duplicates)
   =========================================================== */

/* ---------- Network solutions grid (4-up on desktop) ---------- */
.possibilities-grid-4{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-top:22px;
}

/* ---------- Dark section variant for Security solutions ---------- */
.possibilities-dark{
  background:#0f1422;            /* deep navy */
  padding:56px 0;
}

.possibilities-dark .possibilities-header{ margin-bottom:6px }


.possibilities-dark .possibility-item p{ color:#0e0e0e }

/* Buttons inside dark section */

.possibilities-dark .data-centre-cloud-btn:hover{
  border-color:#EC2B38;
  color:#fff;
}

/* ---------- Minor polish for the intro band on this page ---------- */
.internet-dia1 .private-network-content1 .section-title-white{
  margin-bottom:8px;
}

/* ===========================================================
   Breakpoints
   =========================================================== */
@media (min-width:600px){
  .possibilities-grid-4{ grid-template-columns:repeat(2,1fr) }
}
@media (min-width:992px){
  .possibilities-grid-4{ grid-template-columns:repeat(4,1fr) }
}

/* ===========================================================
   Networks page — responsive, page-unique styles (no duplicates)
   Targets classes that only appear on this page.
   =========================================================== */

/* ---------- Hero tweaks ---------- */
.hero-content_network-security h1{
  font-size: clamp(28px, 4.8vw, 44px);
  line-height: 1.15;
  margin-bottom: 10px;
}
.hero-content_network-security p{
  max-width: 820px;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.6;
}

/* ---------- Text center intro block ---------- */
.text-center-block{
  text-align:center;
  margin: 0 auto 22px auto;
  padding: 8px 16px;
}

/* ---------- Networks dark/light bands ---------- */
.networks-dark{
  background:#0f1422;
  color:#e9edf3;
  padding: 56px 0;
}
.networks-light{
  background:#FBFAFA;
  padding: 56px 0;
}


.networks-dark .networks-readmore-btn:hover{
  border-color:#EC2B38;
  color:#fff;
}

.networks-light .networks-readmore-btn:hover{
  border-color:#EC2B38;
  color:#0f1422;
}

/* ---------- Feature icon (used inside cards here) ---------- */
.colocation-card .feature-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px; height:48px;
  border-radius:12px;
  background:#fff;
  margin-bottom:10px;
}
.colocation-card .feature-icon img{ width:26px; height:26px }

/* ---------- Image/text pairing spacing just for networks bands ---------- */
.networks-dark .container-internet1,
.networks-light .container-internet1{
  gap: 28px;
}

/* ===========================================================
   Responsive layout
   =========================================================== */

/* Base (mobile-first) */
.private-network-image1 img{ width:100%; height:auto; display:block }

/* Make the hero container breathe on very small screens */
@media (max-width: 479px){
  .hero-content_network-security{ padding: 0 14px }
}

/* ≥600px: two-up layout for banded sections if not already handled globally */
@media (min-width:600px){
  .networks-dark .container-internet1,
  .networks-light .container-internet1{
    display:grid;
    grid-template-columns: 1fr 1fr;
    align-items:center;
  }
  .networks-dark .why-choose-image,
  .networks-light { order:1 }
  .networks-dark .why-choose-content,
  .networks-light .private-network-content1 .private-network-image1{ order:2 }
}

/* ≥768px: bump typographic scale slightly */
@media (min-width:768px){
  .networks-dark .p-white{ font-size: 16.5px }
}

/* ≥992px: widen gutters and constrain content width */
@media (min-width:992px){
  .networks-dark .container-internet1,
  .networks-light .container-internet1{
    column-gap: 40px;
  }
  .text-center-block{ padding: 0 24px }
}

/* ≥1200px: comfortable hero and grid rhythm */
@media (min-width:1200px){
  .hero-content_network-security h1{ font-size: 48px }
  .hero-content_network-security p{ font-size: 18px }
}


/* ===========================================================
   Managed SD-WAN page — responsive, page-unique styles
   (keeps to sdwan-* selectors to avoid collisions)
   =========================================================== */

/* ---------- Hero typography (keeps global spacing intact) ---------- */
.hero-content_network-security h1{
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.15;
  margin-bottom: 10px;
}
.hero-content_network-security p{
  max-width: 880px;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.6;
}

/* ===========================================================
   SD-WAN feature band
   =========================================================== */

.sdwan-section{
  position: relative;
  overflow: clip;
  padding: 56px 0;      /* safe default; adjusts via MQs below */
  background: #0f1422;  /* keeps contrast if bg image fails */
}
.sdwan-bg-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .22;         /* subtle texture behind content */
  pointer-events: none;
}
.sdwan-container{
  position: relative;   /* make text sit above bg image */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  color: #e9edf3;
  text-align: left;
}
.sdwan-title{
  font-size: clamp(22px, 4.6vw, 36px);
  line-height: 1.2;
  margin-bottom: 12px;
}
.sdwan-subtitle{
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.7;
  color: #cfd6e3;
  margin-bottom: 22px;
  max-width: 980px;
}

/* Cards grid */
.sdwan-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr; /* mobile first */
}
.sdwan-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 18px;
  backdrop-filter: blur(2px);
}
.sdwan-card-title{
  font-size: clamp(16px, 3.2vw, 20px);
  margin-bottom: 10px;
  line-height: 1.3;
  color: #ffffff;
}
.sdwan-card p,
.sdwan-card li{
  color: #dbe3f2;
  font-size: 15.5px;
  line-height: 1.65;
}
.sdwan-card ul{
  padding-left: 18px;
  margin: 8px 0 0 0;
}
.sdwan-card li{
  margin: 8px 0;
}

/* ===========================================================
   Responsive tweaks
   =========================================================== */

@media (max-width: 479px){
  .hero-content_network-security{ padding: 0 14px }
  .sdwan-section{ padding: 44px 0 }
}

@media (min-width: 600px){
  .sdwan-grid{
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}

@media (min-width: 768px){
  .sdwan-section{ padding: 64px 0 }
  .sdwan-grid{
    gap: 22px;
  }
  .sdwan-card{ padding: 20px }
}

@media (min-width: 992px){
  .sdwan-title{ font-size: 38px }
  .sdwan-subtitle{ font-size: 18px }
  .sdwan-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .sdwan-card{ padding: 22px }
}

@media (min-width: 1200px){
  .sdwan-section{ padding: 72px 0 }
  .sdwan-grid{ gap: 26px }
  .sdwan-card{ padding: 24px }
}


/* ===========================================================
   Managed CPE page — responsive, page-unique tweaks
   (re-uses existing sdwan-* base styles without redefining them)
   =========================================================== */

/* Make the special bottom block look like a card and span full width on wide screens */
.sdwan-row-span{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 18px;
  color: #e9edf3;
}

.sdwan-row-span p{
  color: #dbe3f2;
  font-size: 15.5px;
  line-height: 1.65;
  margin-top: 6px;
}

/* Default grid (mobile-first) already stacks; span both columns on larger viewports */
@media (min-width: 768px){
  .sdwan-row-span{ padding: 20px }
}
@media (min-width: 992px){
  .sdwan-row-span{
    grid-column: 1 / -1; /* take the full row in the 2-col grid */
    padding: 22px;
  }
}
@media (min-width: 1200px){
  .sdwan-row-span{ padding: 24px }
}

/* Minor hero refinements for readability on small screens (no duplicates) */
.hero-content_network-security h1{
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.15;
  margin-bottom: 10px;
}
.hero-content_network-security p{
  max-width: 880px;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.6;
}
/* ===========================================================
   Managed WiFi page — responsive enhancements (no duplicates)
   =========================================================== */

/* Hero text sizing for readability across screens */
.hero-content_network-security h1{
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.15;
  margin-bottom: 10px;
}
.hero-content_network-security p{
  max-width: 880px;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.6;
}

/* Two-column info band (image + copy) */
.internet-dia1 .container-internet1{
  align-items: center;
}
@media (max-width: 900px){
  .internet-dia1 .container-internet1{
    grid-template-columns: 1fr;       /* stack */
    gap: 22px;
  }
  .internet-dia1 .private-network-image1{ order: 2; }
  .internet-dia1 .private-network-content1{ order: 1; }
}
.private-network-image1 img{
  width: 100%;
  height: auto;
  display: block;
}

/* SD-WAN style content section reused here (dark WiFi section) */
.sdwan-section .sdwan-bg-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sdwan-section .sdwan-container{
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 32px);
}
.sdwan-title{
  font-size: clamp(24px, 4.8vw, 36px);
  line-height: 1.2;
}
.sdwan-subtitle{
  max-width: 940px;
  margin: 10px auto 24px auto;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.65;
}

/* Card grid */
.sdwan-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px){
  .sdwan-grid{ grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (min-width: 1100px){
  .sdwan-grid{ gap: 24px; }
}
.sdwan-card{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: clamp(14px, 2.5vw, 22px);
}
.sdwan-card-title{
  font-size: clamp(18px, 3.2vw, 22px);
  line-height: 1.3;
  margin-bottom: 8px;
}
.sdwan-card ul{
  margin: 8px 0 0 18px;
  padding: 0;
}
.sdwan-card li{
  margin: 6px 0;
  line-height: 1.55;
}

/* “Why choose” feature grid under the dark section */
.colocation-benefits .text-center-block{
  margin: 0 auto 10px;
  text-align: center;
  padding: 0 16px;
}
.colocation-benefits .highlight{
  
  line-height: 1.25;
}

/* Feature grid (image + 5 cards) */
.colocation-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 780px){
  .colocation-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (min-width: 1080px){
  .colocation-grid{
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px;
  }
}

/* Card spans for provided classes (keep intent but stay responsive) */
.colocation-card-feature.col-span-1-5{
  
  grid-column: span 2;
}


@media (min-width: 780px){
  .colocation-card-feature.col-span-1-5{
    grid-column: 1 / -1;               /* hero image spans row */
  }
}
@media (min-width: 1080px){
  .colocation-card-feature.col-span-1-5{
    grid-column: 1 / 3;                /* image becomes first column on desktop */
  }
}

/* Card visuals */
.colocation-card,
.colocation-card-feature{
  background: #fff;
  border: 1px solid #e9eef4;
  border-radius: 14px;
  padding: 18px;
}
.colocation-card-feature img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.colocation-card .feature-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 10px;
}
.colocation-card .feature-icon img{
  width: 26px;
  height: 26px;
}

/* Headings/text inside feature cards */
.colocation-heading{
  font-size: clamp(16px, 3.3vw, 20px);
  line-height: 1.35;
  margin: 6px 0;
}
.colocation-text{
  font-size: 15px;
  line-height: 1.6;
  color: #2a3646;
}

/* Cross-sell (keeps cards tidy on phones) */
.cross-sell-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 760px){
  .cross-sell-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px){
  .cross-sell-cards{ grid-template-columns: repeat(3, 1fr); }
}
.cross-sell-card .card-img-placeholder img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Buttons inside this page */
.data-centre-cloud-btn,
.networks-readmore-btn,
.read-more1{
  white-space: nowrap;
}

/* ===========================================================
   LAN Solutions page — responsive enhancements (scoped)
   =========================================================== */

/* Hero content sizing */
.hero-content_network-security h1{
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.15;
  margin-bottom: 10px;
}
.hero-content_network-security p{
  max-width: 920px;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.6;
}

/* Two-column intro (image + copy) */
.internet-dia1 .container-internet1{
  align-items: center;
}
@media (max-width: 900px){
  .internet-dia1 .container-internet1{
    grid-template-columns: 1fr; /* stack on mobile */
    gap: 22px;
  }
  .internet-dia1 .private-network-image1{ order: 2; }
  .internet-dia1 .private-network-content1{ order: 1; }
}
.private-network-image1 img{
  width: 100%;
  height: auto;
  display: block;
}


/* Feature grid */
.colocation-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 780px){
  .colocation-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (min-width: 1080px){
  .colocation-grid{
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* Image feature spanning rules */
.colocation-card-feature.col-span-1-5{ grid-column: auto; }
@media (min-width: 780px){
  .colocation-card-feature.col-span-1-5{ grid-column: 1 / -1; }
}
@media (min-width: 1080px){
  .colocation-card-feature.col-span-1-5{ grid-column: 1 / 3; }
}

/* Card visuals */
.colocation-card,
.colocation-card-feature{
  background: #fff;
  border: 1px solid #e9eef4;
  border-radius: 14px;
  padding: 18px;
}
.colocation-card-feature img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}
.colocation-card .feature-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #f3f6fb;
  margin-bottom: 10px;
}
.colocation-card .feature-icon img{
  width: 26px;
  height: 26px;
}

/* Card text */
.colocation-heading{
  font-size: clamp(16px, 3.3vw, 20px);
  line-height: 1.35;
  margin: 6px 0;
}
.colocation-text{
  font-size: 15px;
  line-height: 1.6;
  color: #2a3646;
}

/* Section subtitle after features */
.section-subtitle{
  max-width: 980px;
  margin: 6px auto 0;
  padding: 0 16px;
  font-size: clamp(14px, 2.2vw, 18px);
  line-height: 1.65;
  text-align: center;
}

/* Cross-sell grid */
.cross-sell-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 760px){
  .cross-sell-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px){
  .cross-sell-cards{ grid-template-columns: repeat(3, 1fr); }
}
.cross-sell-card .card-img-placeholder img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Keep text buttons tidy */
.read-more1{ white-space: nowrap; }

/* ===========================================================
   Business Services page — responsive enhancements (scoped)
   =========================================================== */

/* Hero */
.hero-content_network-security h1{
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.15;
  margin-bottom: 8px;
}
.hero-content_network-security p{
  max-width: 900px;
  font-size: clamp(14px, 2.1vw, 18px);
  line-height: 1.6;
}

/* Two-column intro (image + copy) */
.internet-dia1 .container-internet1{
  align-items: center;
}
.private-network-image1 img{
  width: 100%;
  height: auto;
  display: block;
}
.section-title-white{
  font-size: clamp(22px, 4.5vw, 36px);
  line-height: 1.2;
}
@media (max-width: 920px){
  .internet-dia1 .container-internet1{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .internet-dia1 .private-network-content1{ order: 1; }
  .internet-dia1 .private-network-image1{ order: 2; }
}

/* =========================
   “Why Choose Emtel” section
   ========================= */
.emtel-choice-section{
  position: relative;
  overflow: hidden;
}
.emtel-choice-background-image{
  width: 100%;
  height: auto;
  display: block;
}
.emtel-choice-background-overlay{
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.35);
}
.emtel-choice-container{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) 16px;
}
.emtel-choice-title{
  text-align: center;
  font-size: clamp(24px, 4.8vw, 36px);
  margin-bottom: 18px;
  color: #fff;
}
.emtel-choice-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 860px){
  .emtel-choice-cards{
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}
.emtel-choice-card{
  background: #fff;
  border: 1px solid #e9eef4;
  border-radius: 14px;
  padding: 16px;
}
.emtel-choice-image{
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin-bottom: 10px;
}
.emtel-choice-card-title{
  font-size: clamp(18px, 3.3vw, 22px);
  line-height: 1.3;
  margin: 6px 0 8px;
}
.emtel-choice-card-text{
  font-size: 15px;
  line-height: 1.65;
  color: #2a3646;
}

/* =========================
   Solutions (zebra rows)
   ========================= */
.cyber-security-container,
.cyber-security-container-dark{
  margin: 0 auto;
  padding: clamp(20px, 4vw, 40px) 16px;
}
.header-dark .section-title{
  text-align: center;
  font-size: clamp(22px, 4.6vw, 34px);
  line-height: 1.2;
}
.solution-section{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
  margin: 18px 0;
}
.solution-section .image-container img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.cyber-security-container-dark .content-container-light-1{
 
  color: #fff;
  border-color: rgba(255,255,255,0.12);
}
.solution-section h3{
  font-size: clamp(18px, 3.4vw, 22px);
  margin: 4px 0 6px;
}
.solution-section .subtitle{
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 6px;
}
.solution-section p{
  font-size: 15px;
  line-height: 1.65;
}
@media (min-width: 900px){
  .solution-section{
    grid-template-columns: 1.05fr 1fr;
    gap: 22px;
  }
  .solution-section.reverse{
    grid-template-columns: 1fr 1.05fr;
  }
  .solution-section.reverse .image-container{ order: 1; }
  .solution-section.reverse .content-container,
  .solution-section.reverse .content-container-light-1{ order: 2; }
}

/* =========================
   “Key Features … SASE” heading tweak
   ========================= */
.cyber-security-container-dark .header-dark .section-title{
  color: #fff;
}
.highlight-light{
  color: #8ecbff; /* subtle accent for dark bg */
}

/* =========================
   Cross-sell cards
   ========================= */
.cross-sell-cards{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 760px){
  .cross-sell-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px){
  .cross-sell-cards{ grid-template-columns: repeat(3, 1fr); }
}
.cross-sell-card{
  background: #fff;
  border: 1px solid #e9eef4;
  border-radius: 14px;
  overflow: hidden;
}
.card-img-placeholder img{
  width: 100%;
  height: auto;
  display: block;
}
.card-body{
  padding: 14px 16px 18px;
}
.card-body h4{
  font-size: clamp(16px, 3.2vw, 20px);
  line-height: 1.3;
  margin: 0 0 6px;
}
.card-body p{
  font-size: 15px;
  line-height: 1.65;
  color: #2a3646;
}
.read-more1{ white-space: nowrap; }

/* Spacing polish for wave image */
.wave-hero-dia-img{
  width: 100%;
  height: auto;
  display: block;
}

/* ===========================================================
   SOC page — responsive tweaks
   Targeted to this page only (safe to append globally)
   =========================================================== */

/* Hero */
.hero-content_network-security h1 {
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.15;
}
.hero-content_network-security .cta-button {
  margin-top: 16px;
}

/* Keep hero text readable over image */
/* .hero .hero-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.13) 0%, rgba(0, 0, 0, 0.164) 60%, rgba(0, 0, 0, 0.164) 100%);
} */

/* Constrain hero inner container */
.network-security-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 32px);
}

/* Intro section (image + text) */
.container-internet1 {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
}
.container-internet1 .private-network-image1 img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

/* “Possibilities” dark section */
.possibilities-dark .possibilities-title .section-title {
  font-size: clamp(24px, 3.8vw, 40px);
  line-height: 1.2;
}
.possibilities-dark .p-style {
  font-size: clamp(14px, 1.65vw, 18px);
}
.possibilities-dark .possibilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: 16px;
}

/* Service operations section */
.service-operations-section {
  padding: clamp(36px, 6vw, 72px) 0;
}
.service-operations-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 28px);
  text-align: center;
}
.service-operations-title {
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.2;
  margin-bottom: 10px;
}
.service-operations-description,
.service-operations-tagline {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(14px, 1.65vw, 18px);
}

/* Cross-sell grid */
.cross-sell-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}
.cross-sell-card {
  border-radius: 14px;
  overflow: hidden;
}
.cross-sell-card .card-img-placeholder img {
  width: 100%;
  height: auto;
  display: block;
}

/* ===============================
   Breakpoints
   =============================== */
@media (max-width: 1024px) {
  .container-internet1 { grid-template-columns: 1fr; }
  .private-network-content1 { order: 1; }
  .private-network-image1  { order: 2; }

  .possibilities-dark .possibilities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cross-sell-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .hero { min-height: 60vh; }
  .hero-content_network-security { text-align: center; }
  .cta-button { width: 100%; max-width: 420px; }

  .possibilities-dark .possibilities-grid {
    grid-template-columns: 1fr;
  }
  .cross-sell-cards {
    grid-template-columns: 1fr;
  }
}


/* ===========================================================
   Managed Services page — responsive tweaks
   Safe to append globally; selectors are scoped
   =========================================================== */

/* Hero */
.hero-content_network-security h1 {
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.15;
}
.hero-content_network-security p {
  font-size: clamp(14px, 1.7vw, 18px);
  max-width: 900px;
}
/* .hero .hero-overlay{
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.13) 0%, rgba(0, 0, 0, 0.164) 60%, rgba(0, 0, 0, 0.164) 100%);
} */
.network-security-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 32px);
}

/* Intro split */
.container-internet1{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
}
.private-network-image1 img{
  width:100%;height:auto;display:block;border-radius:14px;
}

/* Dark possibilities v2 */
.possibilities-dark-2{
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 7vw, 90px) 0;
}
.possibilities-dark-2 .container{
  margin: 0 auto; padding: 0 clamp(16px, 3vw, 28px);
}
.possibilities-dark-2 .section-title{
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.2;
}
.possibilities-grid-2{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: 18px;
}
.possibilities-grid-2 .possibility-item{
  
  border: 1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  padding: clamp(14px, 2.2vw, 22px);
}

/* Solutions sections (image + content blocks) */
.cyber-security-container,
.cyber-security-container-dark{
  margin: 0 auto; padding: clamp(40px, 7vw, 90px) clamp(16px,3vw,28px);
}
.solution-section{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  margin-bottom: clamp(22px, 4vw, 40px);
}
.solution-section.reverse{
  grid-template-columns: 1.05fr .95fr;
}
.solution-section .image-container img{
  width: 100%; height: auto; display: block; border-radius: 14px;
}
.content-container h3,
.content-container-light-1 h3{
  font-size: clamp(20px, 2.6vw, 28px);
  margin-bottom: 8px;
}
.content-container .subtitle{
  font-size: clamp(14px, 1.6vw, 18px);
  opacity: .9;
}

/* Cross-sell */
.cross-sell-cards{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap: clamp(16px, 2.5vw, 28px);
}
.cross-sell-card{ border-radius:14px; overflow:hidden; }
.cross-sell-card .card-img-placeholder img{ width:100%; height:auto; display:block; }

/* Headings */
.section-title{
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.2;
}

/* ===============================
   Breakpoints
   =============================== */
@media (max-width: 1024px){
  .container-internet1{ grid-template-columns: 1fr; }
  .private-network-content1{ order:1; }
  .private-network-image1{ order:2; }

  .solution-section,
  .solution-section.reverse{
    grid-template-columns: 1fr;
  }

  .possibilities-grid-2{ grid-template-columns: 1fr; }
  .cross-sell-cards{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 640px){
  .hero{ min-height: 60vh; }
  .hero-content_network-security{ text-align:center; }
  .cta-button{ width:100%; max-width:420px; }

  .cross-sell-cards{ grid-template-columns: 1fr; }
}


/* ===========================================================
   Professional Services page — responsive layout & typography
   Safe to append globally; selectors scoped by existing classes
   =========================================================== */


/* Intro split (text + image) */
.container-internet1{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
}
.private-network-content1 .section-title-white{
  font-size: clamp(22px, 3.4vw, 36px);
  line-height: 1.2;
}
.private-network-image1 img{
  width: 100%; height: auto; display: block; border-radius: 14px;
}

/* Middle feature band (dr-section-middle layout) */
.dr-section-middle{
  padding: clamp(40px, 7vw, 90px) 0;
}
.dr-container1-middle{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px,3vw,28px);
}
.dr-container1-middle .highlight{
  text-align: center;
  font-size: clamp(22px, 3.2vw, 34px);
  margin-bottom: clamp(18px, 3vw, 28px);
}
.dr-content{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
}
.dr-left .dr-image img{ width:100%; height:auto; display:block; border-radius:14px; }
.dr-features{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 2vw, 20px);
}
.dr-feature{
  background: #0b11200f; /* subtle */
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: clamp(12px, 2vw, 18px);
}
.dr-feature-title{
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.25;
}

/* Dark section: “Our Professional Services” rows */
.cyber-security-container-dark{
  
  margin: 0 auto;
  padding: clamp(40px, 7vw, 90px) clamp(16px,3vw,28px);
}
.cyber-security-container-dark .section-title{
  font-size: clamp(24px, 3.6vw, 40px);
}
.solution-section{
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  margin-bottom: clamp(22px, 4vw, 40px);
}
.solution-section.reverse{
  grid-template-columns: 1.05fr .95fr;
}
.solution-section .image-container img{
  width: 100%; height: auto; display: block; border-radius: 14px;
}
.content-container-light-1 h3{
  font-size: clamp(20px, 2.6vw, 28px);
  margin: 0 0 6px;
}
.content-container-light-1 .subtitle{
  font-size: clamp(13px, 1.5vw, 18px);
  opacity: .95;
}

/* Cross-sell */
.cross-sell-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}
.cross-sell-card{ border-radius: 14px; overflow: hidden; }
.cross-sell-card .card-img-placeholder img{ width:100%; height:auto; display:block; }
.section-title{
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.2;
}

/* ===============================
   Breakpoints
   =============================== */
@media (max-width: 1024px){
  .container-internet1{ grid-template-columns: 1fr; }
  .private-network-content1{ order:1; }
  .private-network-image1{ order:2; }

  .dr-content{ grid-template-columns: 1fr; }
  .dr-features{ grid-template-columns: 1fr 1fr; }

  .solution-section,
  .solution-section.reverse{ grid-template-columns: 1fr; }

  .cross-sell-cards{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 640px){
  .hero{ min-height: 60vh; }
  .hero-content_network-security{ text-align: center; }
  .cta-button{ width: 100%; max-width: 420px; }

  .dr-features{ grid-template-columns: 1fr; }
  .cross-sell-cards{ grid-template-columns: 1fr; }
}

/* ===========================================================
   BIO / About Emtel page — responsive layout & polish
   Safe to append; selectors scoped to existing classes
   =========================================================== */

/* Light section (internet-dia2) */
.internet-dia2{
  padding: clamp(40px, 7vw, 90px) 0;
  background: #0b112405; /* subtle tint */
}
.container-internet2{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px,3vw,28px);
}
.text-center{
  text-align: center;
}
.section-title-white{
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.2;
}
.description-paragraph{
  max-width: 880px;
  margin: 12px auto 0;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
  color: #0f172a;
}

/* Dark section (internet-dia3) */
.internet-dia3{
  padding: clamp(40px, 7vw, 90px) 0;
  background: #0b1120; /* dark */
}
.container-internet3{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px,3vw,28px);
}
.description-paragraph-light{
  max-width: 900px;
  margin: 10px auto 0;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.5;
  color: #e5e7eb;
}


.section-title{
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.2;
  text-align: center;
}
.section-subtitle{
  max-width: 900px;
  margin: 10px auto 24px;
  text-align: center;
}


/* ===============================
   Breakpoints
   =============================== */
@media (max-width: 1024px){
  .cross-sell-cards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .hero{ min-height: 60vh; }
  .hero-content_network-security{ text-align: center; }
  .cta-button{ width: 100%; max-width: 420px; }
  .cross-sell-cards{ grid-template-columns: 1fr; }
}


/* ================================================
   Cyber Security page – responsive layout & polish
   Safe to append; selectors scoped to existing HTML
   ================================================ */

.container-internet1{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px,3vw,28px);
}
.private-network-content1 .section-title-white{
  font-size: clamp(24px,3.6vw,40px);
  line-height: 1.2;
}
.private-network-content1 p{
  font-size: clamp(15px,1.6vw,18px);
  line-height: 1.5;
}
.private-network-image1 img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* 3-up “Why Choose” cards */
.liftandshift-section{ padding: clamp(40px,7vw,90px) 0; }
.liftandshift-section .container{ margin: 0 auto; padding: 0 clamp(16px,3vw,28px); }
.section-title{
  font-size: clamp(24px,3.6vw,40px);
  line-height: 1.2;
  text-align: center;
}
.liftandshift-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  margin-top: 12px;
}
.liftandshift-card{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: clamp(14px,2vw,18px);
}
.liftandshift-card .card-title{ font-size: clamp(16px,2.2vw,20px); }
.liftandshift-card .card-description{ line-height: 1.7; }

/* Long “Overview” sections */
.cyber-security-container{ padding: clamp(40px,7vw,90px) 0; }
.cyber-security-container .header-dark{
  max-width: 1100px; margin: 0 auto; padding: 0 clamp(16px,3vw,28px);
}
.cyber-security-container .header-dark h1{
  font-size: clamp(24px,3.6vw,40px);
  line-height: 1.2;
  text-align: center;
}
.cyber-security-container .intro-text{
  max-width: 900px;
  margin: 10px auto 0;
  text-align: center;
  font-size: clamp(15px,1.6vw,18px);
  line-height: 1.5;
  margin-bottom: 30px;
}

.solution-section{
  max-width: 1100px;
  margin: clamp(18px,2.8vw,28px) auto;
  padding: 0 clamp(16px,3vw,28px);
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(16px,2.5vw,28px);
  align-items: center;
}
.solution-section.reverse{ grid-template-columns: 1fr 1.15fr; }

.image-container img{
  width: 100%; height: auto; display: block; border-radius: 14px;
}
.content-container, .content-container-light-1{
  display: flex; flex-direction: column; gap: 8px;
}
.content-container h3,
.content-container-light-1 h3{
  font-size: clamp(18px,2.6vw,26px);
  margin: 0;
}
.subtitle{ font-weight: 600; opacity: .9; }
.content-container p,
.content-container-light-1 p{
  line-height: 1.5;
  font-size: clamp(15px,1.6vw,18px);
}

.learn-more-btn{
  align-self: flex-start;
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.1);
  background: #ffffff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.learn-more-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 18px rgba(2,6,23,.08); }

/* Breakpoints */
@media (max-width: 1024px){
  .liftandshift-cards{ grid-template-columns: repeat(2, 1fr); }
  .solution-section,
  .solution-section.reverse{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px){
  .hero{ min-height: 60vh; }
  .hero-content_network-security{ text-align: center; }
  .cta-button{ width: 100%; max-width: 420px; }
  .liftandshift-cards{ grid-template-columns: 1fr; }
}

/* =========================================================
   Firewall page – responsive layout & small visual polish
   Safe to append; scoped to classes already in your markup
   ========================================================= */

.section-title-white {
  font-size: clamp(24px,3.6vw,40px);
  line-height: 1.2;
}
.private-network-content1 p {
  font-size: clamp(15px,1.6vw,18px);
  line-height: 1.5;
}
.private-network-image1 img {
  width: 100%; height: auto; display: block; border-radius: 12px;
}

/* Dark features (possibilities) */
.possibilities-dark { padding: clamp(40px,7vw,90px) 0; position: relative; }
.possibilities-dark .container { max-width: 1100px; margin: 0 auto; padding: 0 clamp(16px,3vw,28px); }
.possibilities-title .section-title {
  font-size: clamp(24px,3.6vw,40px);
  text-align: center;
}
.possibilities-title .section-subtitle {
  font-size: clamp(15px,1.6vw,18px);
  line-height: 1.5;
}
.possibilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px,2.5vw,28px);
  margin-top: clamp(16px,2.5vw,28px);
}
.possibility-item {
  background: #0b0b0b;
  color: #fff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: clamp(14px,2.2vw,18px);
}
.possibility-item .card-title { font-size: clamp(16px,2.2vw,20px); }

/* Mid sections (dr-section-middle blocks) */
.dr-section-middle { padding: clamp(40px,7vw,90px) 0; }
.dr-container1-middle { margin: 0 auto; padding: 0 clamp(16px,3vw,28px); }
.dr-container1-middle .highlight {
  font-size: clamp(22px,3.2vw,36px);
  text-align: center; line-height: 1.2;
}
.dr-content {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(16px,2.5vw,28px);
  align-items: center;
  margin-top: clamp(14px,2vw,20px);
}
.dr-image img { width: 100%; height: auto; border-radius: 12px; display: block; }
.dr-features { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dr-feature { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 12px; padding: 14px; }
.dr-feature-title { font-size: clamp(16px,2.2vw,20px); }
.dr-feature-description { line-height: 1.7; }

/* Light / Dark narrative sections */
.networks-light, .networks-dark { padding: clamp(40px,7vw,90px) 0; }
.networks-light .container-internet1,
.networks-dark .container-internet1 {
  margin: 0 auto; padding: 0 clamp(16px,3vw,28px);
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(16px,2.5vw,28px);
  align-items: center;
}
.networks-dark .section-title { text-align:left; font-size: clamp(24px,3.6vw,40px); }
.p-white { color: #fff; }

/* Cross-sell */
.cross-sell-section { padding: clamp(40px,7vw,90px) 0; }
.cross-sell-content {  margin: 0 auto; padding: 0 clamp(16px,3vw,28px); }
.cross-sell-cards {
  display: grid; gap: clamp(16px,2.5vw,28px);
  grid-template-columns: repeat(3, 1fr);
}
.cross-sell-card {
  background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 14px;
  overflow: hidden; display: flex; flex-direction: column;
}
.card-img-placeholder img { width: 100%; height: auto; display: block; }
.card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }

/* Buttons */
.learn-more-btn,
.read-more1,
.cta-button {
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.learn-more-btn:hover,
.cta-button:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(2,6,23,.08); }

/* Breakpoints */
@media (max-width: 1024px){
  .container-internet1 { grid-template-columns: 1fr; }
  .possibilities-grid { grid-template-columns: repeat(2, 1fr); }
  .dr-content { grid-template-columns: 1fr; }
  .networks-light .container-internet1,
  .networks-dark .container-internet1 { grid-template-columns: 1fr; }
  .cross-sell-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .hero { min-height: 60vh; }
  .hero-content_network-security { text-align: center; }
  .cta-button { width: 100%; max-width: 420px; }
  .possibilities-grid { grid-template-columns: 1fr; }
  .cross-sell-cards { grid-template-columns: 1fr; }
}

/* =========================================================
   SASE page – responsive layout, spacing & readability
   Safe to append; only uses classes already in your markup
   ========================================================= */

.section-title-white { font-size: clamp(24px,3.6vw,40px); line-height: 1.2; }
.private-network-content1 p { font-size: clamp(15px,1.6vw,18px); line-height: 1.5; }
.private-network-image1 img { width: 100%; height: auto; display: block; border-radius: 12px; }

/* Secondary narrative blocks (networks-light) */
.networks-light { padding: clamp(40px,7vw,90px) 0; }
.networks-light .container-internet1 { grid-template-columns: 1.1fr 1fr; }
.networks-light .section-title { font-size: clamp(22px,3.2vw,36px); }
.networks-light p { font-size: clamp(15px,1.6vw,18px); line-height: 1.5; }

/* “Cyber-security-container” sections (features list) */
.cyber-security-container { padding: clamp(40px,7vw,90px) 0; }
.header-dark, .cyber-header { margin: 0 auto; padding: 0 clamp(16px,3vw,28px); }
.header-dark .section-title { font-size: clamp(24px,3.6vw,40px); text-align: center; }


.solution-section { 
  max-width: 1500px; margin: 0 auto; 
  padding: clamp(16px,2.2vw,22px) clamp(16px,3vw,28px);
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(16px,2.2vw,28px);
  align-items: center;
}
.solution-section.reverse { grid-template-columns: 1fr 1.05fr; }
.image-container img { width: 100%; height: auto; border-radius: 12px; display: block; }
.content-container, .content-container-light-1 {
  display: grid; gap: 8px;
}
.content-container h3,
.content-container-light-1 h3 { font-size: clamp(18px,2.4vw,24px); }
.subtitle { opacity: .85; font-weight: 600; }
.learn-more-btn { margin-top: 8px; }

/* SASE Benefits block */
.sase-benefits-section { padding: clamp(40px,7vw,90px) 0; }
.sase-benefits-container { margin: 0 auto; padding: 0 clamp(16px,3vw,28px); }
.sase-benefits-header { text-align: center;margin: 0 auto; }
.sase-benefits-title { font-size: clamp(24px,3.6vw,40px); }
.sase-benefits-description { font-size: clamp(15px,1.6vw,18px); line-height: 1.5; }

.sase-benefits-content {
  margin-top: clamp(16px,2.5vw,28px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2.2vw,28px); align-items: center;
}
.sase-benefits-image { width: 100%; height: auto; border-radius: 12px; display: block; }
.sase-benefits-right { display: grid; gap: clamp(12px,1.8vw,16px); }
.sase-benefit-card {
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px;
  padding: clamp(12px,1.8vw,16px); display: grid; gap: 6px;
}
.sase-benefit-title { font-size: clamp(16px,2.2vw,20px); }

/* Applications grid */
.sase-applications-section { padding: clamp(40px,7vw,90px) 0; }
.sase-applications-container { max-width: 1100px; margin: 0 auto; padding: 0 clamp(16px,3vw,28px); }
.sase-applications-title { font-size: clamp(22px,3.2vw,36px); text-align: center; }
.sase-applications-subtitle { text-align: center; margin-top: 6px; }

.sase-applications-grid {
  margin-top: clamp(16px,2.5vw,28px);
  display: grid; gap: clamp(16px,2.2vw,28px);
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}
.sase-application-card {
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px;
  padding: clamp(12px,1.8vw,16px); display: grid; gap: 6px;
}
.sase-application-title { font-size: clamp(16px,2.2vw,20px); }
.sase-application-large { width: 100%; height: auto; border-radius: 12px; display: block; }

.card-img-placeholder img { width: 100%; height: auto; display: block; }
.card-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }

/* Buttons – subtle interaction */
.learn-more-btn,
.read-more1,
.cta-button { transition: transform .15s ease, box-shadow .15s ease; }
.learn-more-btn:hover,
.cta-button:hover { transform: translateY(-1px); }

/* ===================== Breakpoints ===================== */
@media (max-width: 1024px){
  .container-internet1 { grid-template-columns: 1fr; }
  .networks-light .container-internet1 { grid-template-columns: 1fr; }
  .solution-section,
  .solution-section.reverse { grid-template-columns: 1fr; }
  .sase-benefits-content { grid-template-columns: 1fr; }
  .sase-applications-grid { grid-template-columns: repeat(2, 1fr); }
  .cross-sell-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px){
  .hero { min-height: 60vh; }
  .hero-content_network-security { text-align: center; }
  .cta-button { width: 100%; max-width: 420px; }
  .sase-applications-grid,
  .cross-sell-cards { grid-template-columns: 1fr; }
}


/* =========================================================
   Endpoint Protection – responsive layout & typography
   ========================================================= */

.section-title-white { font-size: clamp(24px,3.6vw,40px); line-height: 1.2; }
.private-network-content1 p { font-size: clamp(15px,1.6vw,18px); line-height: 1.5; }
.private-network-image1 img { width: 100%; height: auto; border-radius: 12px; display:block; }

/* Endpoint container */
.endpoint-protection-container { padding: clamp(40px,7vw,90px) 0; background: #0b1220; }
.endpoint-protection-header {  margin: 0 auto; padding: 0 clamp(16px,3vw,28px); }
.endpoint-protection-title { color:#fff; font-size: clamp(24px,3.6vw,40px); text-align: center; }
.endpoint-protection-intro { color:#dfe7ff; font-size: clamp(15px,1.6vw,18px); line-height: 1.9; text-align: center; max-width: 900px; margin: 10px auto 0; }

/* Two-up feature grids */
.endpoint-protection-grid{
 margin: clamp(16px,2.4vw,28px) auto 0;
  padding: 0 clamp(16px,3vw,28px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2.2vw,28px);
}
.endpoint-protection-section{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: clamp(14px,2vw,18px);
  display: grid; gap: 10px;
}
.endpoint-protection-section-title{
  color:#9cc2ff; font-size: clamp(18px,2.6vw,24px); line-height: 1.25;
}
.endpoint-protection-image{ width: 100%; height: auto; border-radius: 12px; display:block; }
.endpoint-protection-text{ color:#e8efff; line-height: 1.5; }

/* Bullet lists */
.endpoint-protection-features,
.endpoint-light{ display: grid; gap: 10px; margin-top: 6px; }
.endpoint-protection-features li,
.endpoint-light li{ display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.endpoint-protection-bullet,
.endpoint-protection-bullet-light{
  width: 10px; height: 10px; border-radius: 50%;
  margin-top: 9px;
}
.endpoint-protection-bullet{ background: #4cc9f0; }
.endpoint-protection-bullet-light{ background: #0b5fff; }
.endpoint-protection-features p,
.endpoint-light p{ color:#e8efff; line-height: 1.7; }
.endpoint-light p{ color:#1b2430; } /* light block later */

/* Light block under integration */
.networks-light{ padding: clamp(40px,7vw,90px) 0; background:#f7f9fc; }
.networks-light .container-internet1{ grid-template-columns: 1.1fr 1fr; }
.networks-light .section-title{ font-size: clamp(22px,3.2vw,36px); }
.networks-light p{ font-size: clamp(15px,1.6vw,18px); line-height: 1.5; }
.networks-light .private-network-image1 img{ border-radius: 12px; }


.card-img-placeholder img{ width:100%; height:auto; display:block; }
.card-body{ padding: 16px; display:flex; flex-direction:column; gap:8px; }

/* Buttons – hover micro-interaction */
.cta-button, .read-more1 { transition: transform .15s ease, box-shadow .15s ease; }
.cta-button:hover, .read-more1:hover { transform: translateY(-1px); }

/* ===================== Breakpoints ===================== */
@media (max-width: 1024px){
  .container-internet1 { grid-template-columns: 1fr; }
  .networks-light .container-internet1 { grid-template-columns: 1fr; }
  .endpoint-protection-grid { grid-template-columns: 1fr; }
  .cross-sell-cards { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px){
  .hero{ min-height: 60vh; }
  .hero-content_network-security{ text-align: center; }
  .cta-button{ width: 100%; max-width: 420px; }
  .cross-sell-cards{ grid-template-columns: 1fr; }
}

/* =========================================================
   Analytics – responsive layout & typography
   ========================================================= */

.section-title-white { font-size: clamp(24px,3.6vw,40px); line-height: 1.2; }
.private-network-content1 p {  font-size: clamp(15px,1.6vw,18px); line-height: 1.5; }
.private-network-image1 img { width: 100%; height: auto; border-radius: 12px; display:block; }

/* Analytics – header block */
.iaas-benefits-section { padding: clamp(40px,7vw,90px) 0; background:#fff; }
.trust-section { margin: 0 auto; padding: 0 clamp(16px,3vw,28px); }
.analytics-section-header {margin: 0 auto; }
.analytics-section-title { font-size: clamp(24px,3.6vw,40px); line-height: 1.2; }
.analytics-section-subtitle { font-size: clamp(15px,1.6vw,18px); line-height: 1.5; color:#1b2430; }

/* Feature grid (cards) */
.iaas-features-grid{
  margin-top: clamp(16px,2.4vw,28px);
  display: grid; gap: clamp(16px,2.4vw,28px);
  grid-template-columns: repeat(3, 1fr);
}
.iaas-feature-card{
  background:#fff; border:1px solid rgba(0,0,0,.06);
  border-radius:14px; padding: clamp(14px,2vw,18px);
  display:flex; flex-direction:column; gap:8px;
}
.feature-title{ font-size: clamp(16px,2.4vw,20px); line-height:1.3 }
.feature-description{ line-height:1.75; }

/* Dark section: reasons/benefits */
.liftandshift-section-dark { padding: clamp(40px,7vw,90px) 0; background:#0b1220; }
.liftandshift-section-dark .section-title-white{
  text-align:center; font-size: clamp(22px,3.2vw,36px);
}
.liftandshift-cards-managed-sdwan{
  margin-top: clamp(16px,2.4vw,28px);
  display:grid; gap: clamp(16px,2.4vw,28px);
  grid-template-columns: repeat(3, 1fr);
}
.liftandshift-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: clamp(14px,2vw,18px);
}
.liftandshift-card .card-title{ color:var(--brand); font-size: clamp(16px,2.4vw,20px); margin-bottom: 20px; }
.liftandshift-card .card-description{ color:black; line-height:1.8; }

.card-img-placeholder img{ width:100%; height:auto; display:block; }
.card-body{ padding: 16px; display:flex; flex-direction:column; gap:8px; }

/* Buttons – micro-interactions */
.cta-button, .read-more1 { transition: transform .15s ease, box-shadow .15s ease; }
.cta-button:hover, .read-more1:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(2,6,23,.08); }

/* ===================== Breakpoints ===================== */
@media (max-width: 1100px){
  .container-internet1 { grid-template-columns: 1fr; }
}
@media (max-width: 1024px){
  .iaas-features-grid { grid-template-columns: repeat(2, 1fr); }
  .liftandshift-cards-managed-sdwan { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .hero{ min-height: 60vh; }
  .hero-content_network-security{ text-align:center; }
  .cta-button{ width: 100%; max-width: 420px; }
  .iaas-features-grid,
  .liftandshift-cards-managed-sdwan,
  .cross-sell-cards{ grid-template-columns: 1fr; }
}

/* =========================================================
   Web Application Firewall (WAF) – responsive styles
   ========================================================= */

/* ---------- Buttons micro-interactions ---------- */
.cta-button,.read-more1{transition:transform .15s ease,box-shadow .15s ease;}
.cta-button:hover,.read-more1:hover{transform:translateY(-1px);}

/* ===================== Breakpoints ===================== */
@media (max-width:1100px){
  .container-internet1{grid-template-columns:1fr;}
}
@media (max-width:1024px){
  .possibilities-grid{grid-template-columns:repeat(2,1fr);}
  .cross-sell-cards{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .hero{min-height:60vh;}
  .hero-content_network-security{text-align:center;}
  .cta-button{width:100%;max-width:420px;}
  .possibilities-grid,.cross-sell-cards{grid-template-columns:1fr;}
}

/* =========================================================
   DDoS Protection – responsive styles
   ========================================================= */

/* ---------- Secondary “networks-light” (two-column) ---------- */
.networks-light{padding:clamp(40px,7vw,90px) 0;}
.networks-light .container-internet1{margin:0 auto;padding:0 clamp(16px,3vw,28px);display:grid;grid-template-columns:1.12fr 1fr;gap:clamp(16px,2.4vw,28px);align-items:center;}
.networks-light .section-title{font-size:clamp(22px,3.2vw,36px);}

/* ---------- DDoS “why choose” dark strip ---------- */
.ddos-protection-dark{padding:clamp(40px,7vw,90px) 0;}
.ddos-title{text-align:center;margin:0 auto 24px;padding:0 clamp(16px,3vw,28px);}
.ddos-features{
  margin:0 auto;
  padding:0 clamp(16px,3vw,28px);
  display:grid;gap:clamp(16px,2.4vw,28px);
  grid-template-columns:repeat(3,1fr);
}
.ddos-feature{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:clamp(14px,2vw,18px);
}
.ddos-feature h2{font-size:clamp(16px,2.4vw,20px);line-height:1.3;}
.ddos-feature p{line-height:1.75;}

/* ---------- DDoS flow cards ---------- */
.ddos-container{padding:clamp(40px,7vw,90px) 0;}



/* =========================================================
   Home – responsive styles
   ========================================================= */

/* ---------- Hero ---------- */
.hero .hero-background{object-fit:cover;}
.hero .hero-overlay{background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.15) 60%,rgba(0,0,0,.06))}
.network-security-container{max-width:1200px;margin:0 auto;padding:clamp(16px,3vw,32px);}
.hero-content_network-security h1{font-size:clamp(28px,5vw,54px);line-height:1.1;}
.hero-content_network-security p{font-size:clamp(15px,1.7vw,18px);max-width:760px}

/* ---------- Trusted Partner ---------- */
.trusted-partner-section{padding:clamp(36px,6vw,80px) 0;background:#0b1220;}
.trusted-partner-container{margin:0 auto;position:relative;padding:0 clamp(16px,3vw,28px);}
.trusted-text{color:#fff}
.trusted-text .section-title-white{font-size:clamp(24px,3.6vw,40px);line-height:1.2;margin-bottom:8px;}
.trusted-desc{font-size:clamp(15px,1.6vw,18px);line-height:1.85;}
.trusted-wave{position:absolute;right:0;width:100%;height:auto;display:block;opacity:.9}
@media (max-width:900px){
  .trusted-wave{position:static;width:100%;margin:18px auto 0;display:block}
}

/* ---------- “Why Choose Emtel Business” ---------- */
.home-container{padding:clamp(44px,7vw,96px) 0;background:#fff;}
.home-header{max-width:1200px;margin:0 auto;padding:0 clamp(16px,3vw,28px);text-align:center;}
.section-title-black{font-size:clamp(24px,3.6vw,40px);line-height:1.2;color:#0b1220;}
.home-description{max-width:860px;margin:10px auto 0;font-size:clamp(15px,1.6vw,18px);line-height:1.85;color:#2b3345;}

.home-content{max-width:1200px;margin:28px auto 0;padding:0 clamp(16px,3vw,28px);display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(18px,3vw,28px);align-items:center;}
.home-professional-image{width:100%;height:auto;border-radius:14px;display:block;}
.home-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2.4vw,22px);}

.home-feature-card{
  background:#fff;border:1px solid rgba(2,6,23,.08);border-radius:14px;
  padding:clamp(14px,2vw,18px);display:flex;gap:12px;align-items:flex-start;
  transition:transform .15s ease,box-shadow .15s ease;
}
.home-feature-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(2,6,23,.08);}
.home-feature-card .feature-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex:none}
.home-card-title{font-size:clamp(16px,2.2vw,20px);margin-bottom:6px;line-height:1.25;}
.home-card-description{font-size:clamp(14px,1.5vw,16px);line-height:1.75;color:#2b3345;}

.home-cta-section{text-align:center;margin-top:clamp(18px,3vw,28px);}
.home-cta-section .cta-button{min-width:220px}

/* ---------- Shared section shells ---------- */
.home-connectivity-section,
.home-data-centre-section{position:relative;padding:clamp(48px,7vw,96px) 0;}
.home-wave-background{position:absolute;inset:0;background:radial-gradient(1200px 600px at 50% -10%,rgba(255,255,255,.06),transparent 60%);pointer-events:none;}
.home-connectivity-container{max-width:1200px;margin:0 auto;padding:0 clamp(16px,3vw,28px);position:relative;z-index:1;}
.section-title-no-margin{margin:0;font-size:clamp(18px,2.6vw,22px);opacity:.85}
.home-section-header .section-title-white{font-size:clamp(24px,3.6vw,38px);}
.home-section-header .section-title-black{font-size:clamp(24px,3.6vw,38px);}
.home-section-description-light,
.home-section-description-dark{font-size:clamp(14px,1.6vw,18px);line-height:1.85;max-width:860px}

/* ---------- Solutions grid (hero + 3 cards) ---------- */
.home-solutions-grid{
  margin-top:18px;display:grid;gap:clamp(16px,2.4vw,24px);
  align-items:stretch;
}
.home-hero-card{position:relative;border-radius:16px;overflow:hidden;min-height:320px;}
.home-hero-image{width:100%;height:100%;object-fit:cover;display:block;}
.home-hero-overlay,.home-hero-overlay-left{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.55));
  display:flex;align-items:flex-end;justify-content:flex-end;
  padding:18px;
}
.home-hero-overlay-left{justify-content:flex-start;}
.home-hero-text{color:#fff;font-weight:700;font-size:clamp(16px,2.6vw,22px);background:rgba(0,0,0,.35);padding:10px 14px;border-radius:12px;}

.home-solution-cards{display:grid;gap:clamp(14px,2vw,18px);}
.home-solution-card{
  background:#fff;border:1px solid rgba(2,6,23,.08);border-radius:16px;overflow:hidden;
  transition:transform .15s ease,box-shadow .15s ease;display:flex;flex-direction:column;
}
.home-solution-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(2,6,23,.08);}
.home-card-image-container{position:relative;}
.home-card-image{width:100%;height:auto;display:block;}
.home-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.28));pointer-events:none;}
.home-card-content{padding:14px 16px;}
.home-card-text{font-size:clamp(14px,1.5vw,16px);line-height:1.75;color:#2b3345;}

.home-cta-container{text-align:center;margin-top:clamp(16px,2.6vw,24px);}
.home-cta-button{display:inline-block;padding:12px 18px;border-radius:999px;border:1px solid rgba(2,6,23,.12);transition:transform .15s ease,box-shadow .15s ease;}
.home-cta-button:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(2,6,23,.08);}

/* ---------- Buttons micro-interactions ---------- */
.cta-button,[data-page].home-cta-button{transition:transform .15s ease,box-shadow .15s ease;}
.cta-button:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(2,6,23,.1);}

/* ===================== Breakpoints ===================== */
@media (max-width:1100px){
  .home-content{grid-template-columns:1fr;}
}

@media (max-width:1024px){
  .home-solutions-grid{grid-template-columns:1fr;}
}

@media (max-width:768px){
  .hero{min-height:62vh;}
  .hero-content_network-security{text-align:center;}
  .cta-button{width:100%;max-width:420px;}
  .home-cards-grid{grid-template-columns:1fr;}
}

@media (max-width:560px){
  .home-hero-card{min-height:240px;}
}

/* =========================================================
   Business Comms – responsive styles
   ========================================================= */

/* ---------- “Stay Connected” split ---------- */
.container-internet1{
  max-width:1200px;margin:0 auto;
  padding:clamp(18px,3vw,28px);display:grid;gap:clamp(16px,2.6vw,28px);
  grid-template-columns:1.05fr .95fr;align-items:center;
}
.private-network-content1 p{line-height:1.85;}
.private-network-image1 img{width:100%;height:auto;display:block;border-radius:14px;}
@media (max-width:1024px){.container-internet1{grid-template-columns:1fr}}
@media (max-width:640px){.private-network-content1{text-align:left}}

/* ---------- SIP Trunking section ---------- */
.sip-trunking-section{padding:clamp(44px,7vw,96px) 0;background:#0b1220;position:relative;}
.sip-trunking-section .section-title{color:#fff;margin-bottom:6px;}
.sip-trunking-section .section-title-black{color:#fff;opacity:.92;margin-bottom:10px;}
.sip-trunking-section .description{color:#dfe6f3;line-height:1.85;font-size:clamp(14px,1.6vw,16px);}
.container-4{max-width:1200px;margin:0 auto;padding:0 clamp(16px,3vw,28px);}
.content-wrapper{
  display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(16px,2.6vw,28px);align-items:center;
}
.image-container-1 img{width:100%;height:auto;border-radius:16px;display:block;}
.content-area{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:clamp(14px,2.2vw,22px);}
.features-section h3,.best-for-section h3{color:#fff;margin:12px 0 6px;font-size:clamp(16px,2.2vw,18px);}
.features-list{display:grid;gap:8px;margin:0;padding-left:18px;color:#eaf0ff;}
.best-for-text{color:#eaf0ff}
.sip-trunking-section .cta-button{margin-top:12px;}
@media (max-width:1024px){.content-wrapper{grid-template-columns:1fr}}

/* ---------- Cloud PABX section ---------- */
.pabx-hero-section{padding:clamp(44px,7vw,96px) 0;background:#0f172a;}
.pabx-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(16px,2.6vw,28px);align-items:center;}
.pabx-content .section-title{color:#cbd5e1}
.pabx-content .section-title-white{font-size:clamp(24px,3.4vw,40px)}
.pabx-text{color:#dbe4ff;line-height:1.85}
.pabx-features h3,.pabx-target h3{color:#fff;margin:12px 0 6px}
.pabx-list{color:#eaf0ff;margin:0 0 10px 18px;}
.pabx-target-text{color:#eaf0ff}
.pabx-btn{
  display:inline-block;margin-top:8px;padding:10px 16px;border-radius:999px;
  background:#fff;color:#0b1220;font-weight:600;transition:transform .15s ease,box-shadow .15s ease;
}
.pabx-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(2,6,23,.15);}
@media (max-width:1024px){.pabx-grid{grid-template-columns:1fr}}

/* ---------- Bulk SMS section ---------- */
.sms-hero-section{padding:clamp(44px,7vw,96px) 0;background:#ffffff;}
.sms-container{max-width:1200px;margin:0 auto;padding:0 clamp(16px,3vw,28px);}
.sms-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(16px,2.6vw,28px);align-items:center;}
.sms-label{color:#0b1220;opacity:.85;font-size:clamp(16px,2.2vw,18px);margin:0 0 4px;}
.sms-title{font-size:clamp(24px,3.6vw,40px);line-height:1.15;margin:0 0 6px;color:#0b1220}
.sms-text{color:#2b3345;line-height:1.85}
.sms-features h3,.sms-target h3{color:#0b1220;margin:12px 0 6px}
.sms-list{margin:0 0 12px 18px;color:#2b3345}
.sms-btn{
  display:inline-block;margin-top:8px;padding:10px 16px;border-radius:999px;border:1px solid rgba(2,6,23,.12);
  transition:transform .15s ease,box-shadow .15s ease;background:#0b1220;color:#fff;font-weight:600;
}
.sms-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(2,6,23,.15);}
@media (max-width:1024px){.sms-grid{grid-template-columns:1fr}}

/* ---------- Cross-sell cards ---------- */
/* .cross-sell-section{padding:clamp(44px,7vw,96px) 0;}
.cross-sell-content{margin:0 auto;padding:0 clamp(16px,3vw,28px);}
.cross-sell-section .section-title{color:var(--brand)}
.cross-sell-section .section-subtitle{color:#0e0e0e;line-height:1.85}
.cross-sell-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.2vw,20px);margin-top:14px;}
.cross-sell-card{
  background:#ffffff;border:1px solid rgba(255,255,255,.08);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  transition:transform .15s ease,box-shadow .15s ease;
} */
.cross-sell-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(2,6,23,.18);}
.card-img-placeholder img{width:100%;height:auto;display:block;}
.card-body{padding:14px 16px;color:#eaf0ff}
.card-body h4{font-size:clamp(16px,2.2vw,20px);margin:0 0 6px;color:var(--brand)}
.card-body p{font-size:clamp(14px,1.5vw,16px);line-height:1.75;color:#000000}
.read-more1{cursor:pointer;display:inline-block;margin-top:6px;}
@media (max-width:980px){.cross-sell-cards{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.cross-sell-cards{grid-template-columns:1fr}}

/* ---------- Buttons (global micro-interactions) ---------- */
.cta-button{transition:transform .15s ease,box-shadow .15s ease;}
.cta-button:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(2,6,23,.1);}

/* ---------- Utilities & small tweaks ---------- */
.eb-wave-internet-dia .wave-hero-dia-img{width:100%;display:block;height:auto;}
.image-container-1{align-self:stretch;}
.image-container-1 img{height:100%;object-fit:cover;}
@media (max-width:860px){.image-container-1 img{height:auto}}

/* ---------- Mobile typography tightening ---------- */
@media (max-width:768px){
  .hero{min-height:60vh;}
  .hero-content_network-security{text-align:center;}
  .cta-button{width:100%;max-width:420px;}
}

/* =========================================================
   SIP Trunking – responsive enhancements
   ========================================================= */

/* ---------- Business section (image + copy) ---------- */
.business-container{
  margin:0 auto;padding:clamp(32px,6vw,80px) clamp(16px,3vw,28px);
  display:grid;gap:clamp(16px,2.6vw,28px);grid-template-columns:1fr 1.1fr;align-items:center;
}
.business-img img{width:100%;height:auto;border-radius:16px;display:block;}
.business-content h2{font-size:clamp(22px,3.2vw,34px);margin:0 0 8px;}
.business-content p{line-height:1.9;color:#2b3345;}
@media (max-width:1024px){.business-container{grid-template-columns:1fr}}
@media (max-width:640px){.business-content{text-align:left}}

/* ---------- Why section ---------- */
.why-container{padding:clamp(40px,6vw,88px) 0;background:#0b1220;}
.why-container .section-title-white{margin:0 auto 10px;text-align:center;}
.why-img{max-width:1100px;margin:0 auto;padding:0 clamp(16px,3vw,28px);}
.why-img img{width:100%;height:auto;border-radius:16px;display:block;}

.why-columns{
  max-width:1200px;margin:clamp(12px,2vw,18px) auto 0;
  padding:0 clamp(16px,3vw,28px);
  display:grid;gap:clamp(16px,2.4vw,24px);
  grid-template-columns:1.1fr .9fr;align-items:start;
}
.why-left .why-item{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px;}
.checkmark-image{width:28px;height:28px;object-fit:contain;margin-top:2px;}
.why-text{color:#eaf0ff;line-height:1.8;}

.why-right .why-box{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;
  padding:clamp(14px,2.4vw,20px);color:#eaf0ff;
}
.why-right .why-box + .section-divider{opacity:.12;margin:14px 0;}
.why-right h3{margin:0 0 8px;font-size:clamp(16px,2.3vw,20px);color:#ff4d4f;}
.why-right ul{margin:0 0 0 18px;line-height:1.85;}
@media (max-width:1024px){.why-columns{grid-template-columns:1fr}}
@media (max-width:540px){.why-left .why-item{grid-template-columns:28px 1fr;padding:10px}}


.card-img-placeholder img{width:100%;height:auto;display:block;}
.card-body{padding:14px 16px;color:#eaf0ff}
.card-body h4{font-size:clamp(16px,2.2vw,20px);margin:0 0 6px;color:#fff}
.card-body p{font-size:clamp(14px,1.5vw,16px);}
.read-more1{cursor:pointer;display:inline-block;margin-top:6px;}
@media (max-width:980px){.cross-sell-cards{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.cross-sell-cards{grid-template-columns:1fr}}

/* ---------- Buttons (global micro-interactions) ---------- */
.cta-button{transition:transform .15s ease,box-shadow .15s ease;}
.cta-button:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(2,6,23,.1);}

/* ---------- Small utilities ---------- */
.eb-wave-internet-dia .wave-hero-dia-img{width:100%;display:block;height:auto;}

/* =========================================================
   Cloud PABX – responsive enhancements
   ========================================================= */

.private-network-content1 h2{font-size:clamp(22px,3.2vw,34px);margin-bottom:12px; margin-top: 20px;}
.private-network-content1 p{line-height:1.9;}
.private-network-image1 img{width:100%;height:auto;display:block;border-radius:14px;}
@media (max-width:1024px){.container-internet1{grid-template-columns:1fr}}

/* ---------- Business section ---------- */
.business-container{
margin:0 auto;
  padding:clamp(32px,6vw,80px) clamp(16px,3vw,28px);
  display:grid;gap:clamp(16px,2.6vw,28px);
  grid-template-columns:1fr 1.1fr;align-items:center;
}
.business-img img{width:100%;height:auto;border-radius:16px;display:block;}
.business-content h2{font-size:clamp(22px,3.2vw,34px);margin:0 0 12px;}
.business-content p{line-height:1.85;color:#2b3345;}
@media (max-width:1024px){.business-container{grid-template-columns:1fr}}

/* ---------- Why section ---------- */
.why-container{padding:clamp(40px,6vw,88px) 0;background:#0b1220;}
.why-container h2{font-size:clamp(22px,3.2vw,34px);color:#fff;text-align:center;margin:0 auto 24px;}
.why-img{margin:0 auto;padding:0 clamp(16px,3vw,28px);}
.why-img img{width:100%;height:auto;border-radius:16px;display:block;}
.why-columns{margin:clamp(20px,3vw,32px) auto;padding:0 clamp(16px,3vw,28px);display:grid;gap:clamp(16px,2.4vw,24px);grid-template-columns:1.1fr .9fr;align-items:start;}
.why-left .why-item{display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:flex-start;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:12px;}
.checkmark-image{width:28px;height:28px;object-fit:contain;margin-top:2px;}
.why-text{color:#eaf0ff;line-height:1.8;}
.why-right .why-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:clamp(14px,2.4vw,20px);color:#eaf0ff;}
.why-right h3{margin:0 0 10px;font-size:clamp(16px,2.3vw,20px);color:#ff4d4f;}
.why-right ul{margin:0 0 0 18px;line-height:1.85;}
@media (max-width:1024px){.why-columns{grid-template-columns:1fr}}
@media (max-width:540px){.why-left .why-item{grid-template-columns:28px 1fr;padding:10px}}

/* ---------- Cross-sell ---------- */
.card-img-placeholder img{width:100%;height:auto;display:block;}
.card-body{padding:14px 16px;color:#eaf0ff}
.card-body h4{font-size:clamp(16px,2.2vw,20px);margin:0 0 8px;color:var(--brand)}
.card-body p{font-size:clamp(14px,1.5vw,16px);}
.read-more1{cursor:pointer;display:inline-block;margin-top:6px;}
@media (max-width:980px){.cross-sell-cards{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.cross-sell-cards{grid-template-columns:1fr}}

/* ============ BULK SMS – RESPONSIVE ============ */

.business-img img { width: 100%; height: auto; border-radius: 14px; display: block; }
.business-content { max-width: 820px; }

/* Why section */
.why-container { padding-inline: min(4vw, 48px); }
.why-container .section-title-white { text-align: center; margin-bottom: 1rem; }
.why-img img { width: 100%; height: auto; border-radius: 14px; display: block; }
.why-columns {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2rem;
  margin-top: 2rem;
  align-items: start;
}
.why-left { display: grid; gap: 1rem; }
.why-item { display: grid; grid-template-columns: 36px 1fr; gap: .75rem; align-items: start; }
.checkmark-image { width: 28px; height: 28px; object-fit: contain; margin-top: .15rem; }
.why-text { color: #fff; line-height: 1.5; }
.why-right { display: grid; gap: 1.25rem; }
.why-box { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 1.25rem 1.15rem; }
.why-box ul { padding-left: 1.1rem; }
.why-box li { margin: .35rem 0; }

/* Cross-sell cards grid hardening */
.cross-sell-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.25rem;
}
.cross-sell-card { border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.cross-sell-card .card-img-placeholder img { width: 100%; height: auto; display: block; }
.cross-sell-card .card-body { padding: 1rem 1rem 1.25rem; }
.read-more1 { cursor: pointer; }

/* Buttons */
.cta-button, .pabx-btn, .sms-btn, .home-cta-button, .learn-more-btn {
  padding: .9rem 1.25rem;
  border-radius: 999px;
  line-height: 1;
}

/* ---------- Breakpoint: ≤ 1200px ---------- */
@media (max-width: 1200px) {
  .container-internet1 { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .business-container { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .why-columns { grid-template-columns: 1fr 1fr; }
  .hero .hero-content_network-security h1 { font-size: clamp(28px, 4.2vw, 44px); }
  .hero .hero-content_network-security p { font-size: clamp(15px, 1.7vw, 18px); }
}

/* ---------- Breakpoint: ≤ 992px (tablet landscape) ---------- */
@media (max-width: 992px) {
  .container-internet1 { grid-template-columns: 1fr; }
  .private-network-image1 { order: -1; } /* image first for visual variety */
  .private-network-content1 { text-align: center; margin-inline: auto; }
  .business-container { grid-template-columns: 1fr; }
  .business-img { order: -1; }
  .business-content { text-align: center; margin-inline: auto; }
  .why-columns { grid-template-columns: 1fr; }
  .why-right { order: 2; }
  .why-left, .why-right { max-width: 760px; margin-inline: auto; }
  .cross-sell-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* ---------- Breakpoint: ≤ 768px (tablet portrait) ---------- */
@media (max-width: 768px) {
  .hero { min-height: 62vh; }
  .hero .hero-content_network-security { padding: 1.5rem; }
  .hero .hero-content_network-security h1 { font-size: clamp(26px, 6.2vw, 34px); }
  .hero .hero-content_network-security p { font-size: 15px; }
  .cta-button { width: 100%; max-width: 420px; }
  .eb-wave-internet-dia .wave-hero-dia-img { max-height: 54px; object-fit: contain; }
  .why-item { grid-template-columns: 30px 1fr; }
  .checkmark-image { width: 24px; height: 24px; }
  .why-box { padding: 1rem; }
}

/* ---------- Breakpoint: ≤ 560px (large phones) ---------- */
@media (max-width: 560px) {
  .section-title-white, .section-title, .section-title-black {
    font-size: clamp(22px, 6.4vw, 28px);
    line-height: 1.15;
  }
  .p-style, .section-subtitle, .analytics-section-subtitle,
  .home-card-text, .business-content p, .private-network-content1 p {
    font-size: 15px;
  }
  .cross-sell-cards { grid-template-columns: 1fr; }
  .cross-sell-card .card-body { padding: .9rem; }
  .hero .hero-content_network-security p { margin-top: .5rem; }
  .private-network-image1 img,
  .business-img img,
  .why-img img { border-radius: 10px; }
}

/* ---------- Breakpoint: ≤ 400px (compact phones) ---------- */
@media (max-width: 400px) {
  .hero { min-height: 56vh; }
  .cta-button { padding: .8rem 1rem; font-size: 14px; }
  .why-item { grid-template-columns: 26px 1fr; gap: .6rem; }
  .checkmark-image { width: 22px; height: 22px; }
}

/* Accessibility & misc */
.hero-content_network-security h1,
.section-title-white, .section-title, .section-title-black { word-wrap: break-word; }
img[alt]{ font-style: italic; } /* tiny a11y hint for missing images */