/* =========================================================
   Cloud Managed Services page — scoped, section-based CSS
   Palette: Deep Navy #050B18 / Navy #0B1730 / Royal Blue #1D4ED8
            Sky Blue #38BDF8 / White #FFFFFF / Off-white #F5F8FC
            Slate #1E293B / Muted #55647A
   ========================================================= */

/* ---------- Shared section icon badges ---------- */
.section-icon-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:16px; margin-bottom:18px;
  background:linear-gradient(135deg,rgba(29,78,216,.10),rgba(56,189,248,.14));
  border:1px solid rgba(29,78,216,.18);
  transition:transform .3s ease, box-shadow .3s ease;
}
.section-icon-badge:hover{transform:translateY(-4px) rotate(-4deg); box-shadow:0 14px 26px rgba(29,78,216,.18);}
.section-icon-badge-center{margin-left:auto; margin-right:auto; display:flex;}
.section-icon-badge-dark{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);}

/* ---------- HERO (fresh design — background photo) ---------- */
.hero-section{
  position:relative;
  overflow:hidden;
  height:500px;
  background-image:url('../images/cloud-managed-services/hero-bg.webp');
  background-repeat:no-repeat;
  background-position:center right;
  background-size:cover;
  background-color:#050B18;
  display:flex;
  align-items:center;
}
.hero-scrim{
  position:absolute; inset:0;
  background-image:linear-gradient(90deg,
    rgba(4,9,20,.97) 0%,
    rgba(4,9,20,.90) 32%,
    rgba(4,9,20,.55) 50%,
    rgba(4,9,20,.15) 65%,
    rgba(4,9,20,0) 78%);
  pointer-events:none;
}

.hero-content{position:relative; z-index:2; max-width:600px;}

.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(56,189,248,.35);
  color:#BFDBFE; font-size:13px; font-weight:700; letter-spacing:.2px;
  margin-bottom:22px;
  backdrop-filter:blur(6px);
}

.hero-heading{
  font-size:44px; line-height:1.15; font-weight:800; letter-spacing:-.5px;
  margin-bottom:20px;
  background:linear-gradient(95deg,#FFFFFF 15%,#BFE0FF 55%,#38BDF8 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  font-size:17px; line-height:1.7; color:#FFFFFF; max-width:540px; margin-bottom:30px;
}

.hero-cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px;}
.hero-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:10px; font-weight:700; font-size:15px;
  text-decoration:none; transition:transform .25s ease, box-shadow .25s ease, gap .25s ease;
}
.hero-btn-icon{transition:transform .3s ease;}
.hero-btn:hover .hero-btn-icon{transform:translateX(4px);}
.hero-btn-primary{
  color:#04101F;
  background:linear-gradient(95deg,#38BDF8,#1D4ED8);
  box-shadow:0 14px 30px rgba(29,78,216,.45);
}
.hero-btn-primary:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 20px 40px rgba(29,78,216,.55); color:#04101F;}
.hero-btn-secondary{
  color:#E5EEFB;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);
}
.hero-btn-secondary:hover{background:rgba(255,255,255,.14); color:#fff; transform:translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.3);}

.hero-trust-row{display:flex; flex-wrap:wrap; gap:22px; margin-bottom:32px;}
.hero-trust-item{display:flex; align-items:center; gap:8px; color:#FFFFFF; font-size:13.5px; font-weight:600;}

.hero-stats-row{display:flex; flex-wrap:wrap; gap:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.18);}
.hero-stat{display:flex; flex-direction:column;}
.hero-stat-num{font-size:30px; font-weight:800; color:#FFFFFF; display:inline;}
.hero-stat-suffix{font-size:22px; font-weight:800; color:#38BDF8;}
.hero-stat-label{font-size:12.5px; color:#FFFFFF; margin-top:2px;}

@media(max-width:991px){
  .hero-section{
    height:auto;
    padding:110px 0 60px;
    background-image:linear-gradient(180deg, rgba(4,9,20,.96), rgba(4,9,20,.90)), url('hero-bg.jpg');
    background-position:center 20%, center right;
  }
  .hero-scrim{background-image:none;}
  .hero-content{max-width:100%;}
}
@media(max-width:767px){
  .hero-heading{font-size:32px;}
}

/* ---------- WHY UAE GOALS ---------- */
.whyuae-goals-section{padding:30px 0; background:#FFFFFF;}
.whyuae-goals-heading{
  font-size:30px; font-weight:800; margin-bottom:16px;
  background:linear-gradient(95deg,#1D4ED8,#2563EB,#38BDF8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.whyuae-goals-text{font-size:16px; line-height:1.7; color:#55647A; margin-bottom:20px;}
.whyuae-goals-img{width:100%; height:auto; border-radius:16px; box-shadow:0 20px 44px rgba(11,23,48,.12); transition:transform .35s ease, box-shadow .35s ease;}
.whyuae-goals-img:hover{transform:translateY(-6px) scale(1.01); box-shadow:0 26px 54px rgba(11,23,48,.18);}
.whyuae-goals-list{list-style:none; margin:0; padding:0;}
.whyuae-goals-list li{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; margin-bottom:12px;
  border-radius:12px; border:1px solid #E4ECF7;
  background:#F5F8FC; color:#1E293B; font-weight:600; font-size:15px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.whyuae-goals-list li:hover{transform:translateX(6px); box-shadow:0 10px 26px rgba(11,23,48,.1); border-color:#BFDBFE;}
.whyuae-goals-list li svg{transition:transform .3s ease;}
.whyuae-goals-list li:hover svg{transform:scale(1.15) rotate(-6deg);}

/* ---------- WHY UAE PROBLEMS ---------- */
.whyuae-problems-section{padding:30px 0; background:#F5F8FC;}
.whyuae-problems-img{width:100%; height:auto; border-radius:20px; box-shadow:0 24px 50px rgba(11,23,48,.14); object-fit:cover; transition:transform .35s ease;}
.whyuae-problems-img:hover{transform:scale(1.015);}
.whyuae-problems-heading{
  font-size:30px; font-weight:800; margin:0 0 14px 0;
  background:linear-gradient(95deg,#1D4ED8,#2563EB,#38BDF8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.whyuae-problems-text{font-size:16px; line-height:1.7; color:#55647A; margin-bottom:22px;}
.whyuae-problems-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.whyuae-problem-card{
  padding:16px 18px; border-radius:12px; background:#fff;
  border:1px solid #E4ECF7; color:#1E293B; font-size:14px; font-weight:600; line-height:1.5;
  box-shadow:0 8px 20px rgba(11,23,48,.05);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.whyuae-problem-card:hover{transform:translateY(-5px); box-shadow:0 16px 34px rgba(11,23,48,.12); border-color:#93C5FD;}
@media(max-width:767px){.whyuae-problems-grid{grid-template-columns:1fr;}}

/* ---------- WHAT IS ---------- */
.whatis-section{padding:30px 0; background:#FFFFFF;}
.whatis-heading{
  font-size:30px; font-weight:800; margin-bottom:16px;
  background:linear-gradient(95deg,#1D4ED8,#2563EB,#38BDF8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.whatis-text{font-size:16px; line-height:1.7; color:#55647A; margin-bottom:20px;}
.whatis-img{width:100%; height:auto; border-radius:16px; box-shadow:0 20px 44px rgba(11,23,48,.12); transition:transform .35s ease;}
.whatis-img:hover{transform:translateY(-6px);}
.whatis-table{border-radius:14px; overflow:hidden; border:1px solid #E4ECF7;}
.whatis-table-head{display:grid; grid-template-columns:1fr 1.6fr; background:#0B1730; color:#fff; font-weight:700; font-size:13.5px;}
.whatis-table-head span{padding:14px 16px;}
.whatis-table-row{display:grid; grid-template-columns:1fr 1.6fr; border-top:1px solid #E4ECF7; transition:background .2s ease;}
.whatis-table-row:hover{background:#F5F8FC;}
.whatis-table-row span{padding:14px 16px; font-size:14px; color:#1E293B;}
.whatis-table-row span:first-child{font-weight:700; color:#0B1730;}
.whatis-table-row-highlight{background:linear-gradient(90deg,rgba(29,78,216,.08),rgba(56,189,248,.08));}
@media(max-width:575px){
  .whatis-table-head, .whatis-table-row{grid-template-columns:1fr; }
  .whatis-table-head span:first-child, .whatis-table-row span:first-child{border-bottom:1px dashed #E4ECF7;}
}

/* ---------- SERVICES SLIDER ---------- */
.services-section{padding:30px 0; background:#F5F8FC;}
.services-head{max-width:720px; margin:0 auto 34px; text-align:center;}
.services-heading{
  font-size:32px; font-weight:800; margin-bottom:14px;
  background:linear-gradient(95deg,#1D4ED8,#2563EB,#38BDF8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.services-sub{font-size:16px; line-height:1.7; color:#55647A;}

.services-slider{display:flex; align-items:center; gap:14px;}
.services-slider-viewport{overflow:hidden; flex:1 1 auto; border-radius:18px; cursor:grab;}
.services-slider-viewport:active{cursor:grabbing;}
.services-slider-track{display:flex; transition:transform .5s cubic-bezier(.25,.8,.25,1); touch-action:pan-y;}
.services-slider-track.is-dragging{transition:none; cursor:grabbing;}
.services-slide{flex:0 0 100%; max-width:100%; padding:6px; user-select:none;}
@media(min-width:768px){.services-slide{flex:0 0 50%; max-width:50%;}}
@media(min-width:1200px){.services-slide{flex:0 0 33.3333%; max-width:33.3333%;}}

.services-slider-arrow{
  flex:0 0 auto; width:48px; height:48px; border-radius:50%; border:1px solid #E4ECF7;
  background:#fff; color:#1D4ED8; display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow:0 10px 22px rgba(11,23,48,.08);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
}
.services-slider-arrow:hover{
  background:linear-gradient(135deg,#1D4ED8,#38BDF8); color:#fff; transform:scale(1.08);
  box-shadow:0 16px 30px rgba(29,78,216,.3);
}
.services-slider-dots{display:flex; justify-content:center; gap:8px; margin-top:22px;}
.services-slider-dots button{
  width:9px; height:9px; border-radius:50%; border:none; background:#CBD9EE; cursor:pointer;
  transition:transform .25s ease, background .25s ease, width .25s ease;
}
.services-slider-dots button.is-active{background:linear-gradient(90deg,#1D4ED8,#38BDF8); width:26px; border-radius:6px;}
.services-slider-dots button:hover{transform:scale(1.2);}

.services-card{
  height:100%; padding:0 0 24px; border-radius:16px; overflow:hidden;
  background:#fff; border:1px solid #E4ECF7;
  box-shadow:0 10px 26px rgba(11,23,48,.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
.services-card:hover{transform:translateY(-8px); box-shadow:0 24px 46px rgba(11,23,48,.14);}
.services-card-img{width:100%; height:170px; object-fit:cover; display:block; margin-bottom:18px; transition:transform .4s ease;}
.services-card:hover .services-card-img{transform:scale(1.06);}
.services-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px; margin:0 24px 16px;
  background:linear-gradient(135deg,rgba(29,78,216,.10),rgba(56,189,248,.10));
  border:1px solid rgba(29,78,216,.14);
  transition:transform .3s ease;
}
.services-card:hover .services-icon{transform:rotate(-8deg) scale(1.08);}
.services-card-title{font-size:18px; font-weight:800; color:#0B1730; margin:0 24px 10px;}
.services-card-text{font-size:14.5px; line-height:1.7; color:#55647A; margin:0 24px;}

/* ---------- PLATFORMS ---------- */
.platforms-section{padding:30px 0; background:#FFFFFF;}
.platforms-heading{
  font-size:30px; font-weight:800; text-align:center; margin-bottom:14px;
  background:linear-gradient(95deg,#1D4ED8,#2563EB,#38BDF8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.platforms-sub{font-size:16px; line-height:1.7; color:#55647A; text-align:center; max-width:720px; margin:0 auto 30px;}
.platforms-grid{margin-top:10px;}
.platforms-card{
  height:100%; text-align:center; padding:34px 26px; margin-bottom:24px;
  border-radius:18px; border:1px solid #E4ECF7;
  background:linear-gradient(180deg,#FFFFFF,#F5F8FC);
  box-shadow:0 10px 26px rgba(11,23,48,.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
.platforms-card:hover{transform:translateY(-8px); box-shadow:0 24px 46px rgba(11,23,48,.14);}
.platforms-logo{height:56px; width:auto; max-width:100%; margin-bottom:20px; object-fit:contain; transition:transform .3s ease;}
.platforms-card:hover .platforms-logo{transform:scale(1.12);}
.platforms-card-title{font-size:18px; font-weight:800; color:#0B1730; margin-bottom:10px;}
.platforms-card-text{font-size:14.5px; line-height:1.7; color:#55647A;}

/* ---------- INDUSTRIES ---------- */
.industries-section{padding:30px 0; background:#F5F8FC;}
.industries-heading{
  font-size:30px; font-weight:800; text-align:center; margin-bottom:14px;
  background:linear-gradient(95deg,#1D4ED8,#2563EB,#38BDF8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.industries-sub{font-size:16px; line-height:1.7; color:#55647A; text-align:center; max-width:760px; margin:0 auto 40px;}
.industries-item{display:flex; align-items:center; gap:46px; margin-bottom:56px; flex-wrap:wrap;}
.industries-item-reverse{flex-direction:row-reverse;}
.industries-item-img-col{flex:1 1 380px; overflow:hidden; border-radius:18px;}
.industries-item-copy-col{flex:1 1 420px;}
.industries-item-img{width:100%; height:auto; border-radius:18px; box-shadow:0 22px 46px rgba(11,23,48,.14); object-fit:cover; transition:transform .4s ease;}
.industries-item-img-col:hover .industries-item-img{transform:scale(1.06);}
.industries-item-link{text-decoration:none;}
.industries-item-title{font-size:22px; font-weight:800; color:#0B1730; margin-bottom:14px; transition:color .2s ease, transform .2s ease; display:inline-block;}
.industries-item-link:hover .industries-item-title{
  background:linear-gradient(95deg,#1D4ED8,#38BDF8); -webkit-background-clip:text; background-clip:text; color:transparent;
  transform:translateX(4px);
}
.industries-item-text{font-size:15px; line-height:1.75; color:#55647A; margin-bottom:16px;}
.industries-item-points{list-style:none; margin:0; padding:0;}
.industries-item-points li{
  position:relative; padding-left:24px; margin-bottom:10px; font-size:14px; color:#1E293B; font-weight:500;
  transition:transform .2s ease;
}
.industries-item-points li:hover{transform:translateX(4px);}
.industries-item-points li:before{
  content:""; position:absolute; left:0; top:7px; width:9px; height:9px; border-radius:50%;
  background:linear-gradient(135deg,#1D4ED8,#38BDF8);
}
.industries-more{margin-top:20px; padding:40px 32px; border-radius:20px; background:#0B1730;}
.industries-more-title{
  font-size:22px; font-weight:800; margin-bottom:12px;
  background:linear-gradient(95deg,#FFFFFF,#93C5FD,#38BDF8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.industries-more-text{font-size:15px; line-height:1.75; color:#AEC1DC; margin-bottom:26px; max-width:900px;}
.industries-more-grid{margin:0 -8px;}
.industries-more-card{
  height:100%; padding:20px 20px; margin-bottom:16px; border-radius:14px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  transition:transform .25s ease, background .25s ease;
}
.industries-more-card:hover{transform:translateY(-6px); background:rgba(255,255,255,.09);}
.industries-more-card-title{color:#fff; font-size:15.5px; font-weight:700; margin-bottom:8px;}
.industries-more-card p{color:#9FB4D1; font-size:13.5px; line-height:1.6; margin:0;}
@media(max-width:991px){
  .industries-item, .industries-item-reverse{flex-direction:column;}
}

/* ---------- INCLUDED ---------- */
.included-section{padding:30px 0; background:#FFFFFF;}
.included-heading{
  font-size:30px; font-weight:800; margin-bottom:16px;
  background:linear-gradient(95deg,#1D4ED8,#2563EB,#38BDF8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.included-text{font-size:16px; line-height:1.7; color:#55647A; margin-bottom:24px;}
.included-checklist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.included-checklist li{
  position:relative; padding:12px 14px 12px 40px; border-radius:10px;
  background:#F5F8FC; border:1px solid #E4ECF7; font-size:14px; font-weight:600; color:#1E293B;
  transition:transform .2s ease, box-shadow .2s ease;
}
.included-checklist li:hover{transform:translateX(5px); box-shadow:0 10px 22px rgba(11,23,48,.08);}
.included-checklist li:before{
  content:"✓"; position:absolute; left:14px; top:10px; width:18px; height:18px; border-radius:50%;
  background:linear-gradient(135deg,#1D4ED8,#38BDF8); color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.included-img{width:100%; height:auto; border-radius:20px; box-shadow:0 24px 50px rgba(11,23,48,.14); object-fit:cover; transition:transform .35s ease;}
.included-img:hover{transform:scale(1.015);}
@media(max-width:575px){.included-checklist{grid-template-columns:1fr;}}
@media(max-width:991px){.included-img-col{margin-top:26px;}}

/* ---------- WHY SISGAIN ---------- */
.why-section{padding:30px 0; background:#F5F8FC;}
.why-heading{
  font-size:30px; font-weight:800; text-align:center; margin-bottom:14px;
  background:linear-gradient(95deg,#1D4ED8,#2563EB,#38BDF8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.why-sub{font-size:16px; line-height:1.7; color:#55647A; text-align:center; max-width:780px; margin:0 auto 34px;}
.why-body{margin-top:10px;}
.why-img{width:100%; height:auto; border-radius:18px; box-shadow:0 22px 46px rgba(11,23,48,.14); object-fit:cover; transition:transform .35s ease;}
.why-img:hover{transform:scale(1.02);}
.why-card{
  height:100%; padding:22px 20px; margin-bottom:20px; border-radius:16px;
  background:#fff; border:1px solid #E4ECF7; border-left:3px solid #1D4ED8;
  box-shadow:0 10px 24px rgba(11,23,48,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.why-card:hover{transform:translateY(-6px); box-shadow:0 18px 36px rgba(11,23,48,.14);}
.why-card-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px; margin-bottom:10px;
  background:linear-gradient(135deg,rgba(29,78,216,.10),rgba(56,189,248,.10));
  transition:transform .3s ease;
}
.why-card:hover .why-card-icon{transform:rotate(-8deg) scale(1.1);}
.why-card-title{font-size:16px; font-weight:800; color:#0B1730; margin-bottom:8px;}
.why-card p{font-size:13.5px; line-height:1.7; color:#55647A; margin:0;}

/* ---------- PROCESS FLOW ---------- */
.process-section{padding:30px 0; background:#FFFFFF;}
.process-heading{
  font-size:30px; font-weight:800; text-align:center; margin-bottom:14px;
  background:linear-gradient(95deg,#1D4ED8,#2563EB,#38BDF8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.process-sub{font-size:16px; line-height:1.7; color:#55647A; text-align:center; max-width:760px; margin:0 auto 40px;}
.process-img{width:100%; height:auto; border-radius:18px; box-shadow:0 22px 46px rgba(11,23,48,.14); object-fit:cover; transition:transform .35s ease; margin-bottom:20px;}
.process-img:hover{transform:scale(1.02);}
.process-flow{display:flex; align-items:stretch; gap:0; flex-wrap:wrap;}
.process-step{
  flex:1 1 200px; padding:26px 20px; border-radius:16px;
  background:#F5F8FC; border:1px solid #E4ECF7;
  margin-bottom:24px;   
  opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease, box-shadow .3s ease;
}
.process-step.is-visible{opacity:1; transform:translateY(0);}
.process-step:hover{box-shadow:0 16px 34px rgba(11,23,48,.12); transform:translateY(-6px);}
.process-step-num{
  width:38px; height:38px; border-radius:12px; margin-bottom:14px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1D4ED8,#38BDF8); color:#fff; font-weight:800; font-size:16px;
  transition:transform .3s ease;
}
.process-step:hover .process-step-num{transform:scale(1.12) rotate(8deg);}
.process-step-title{font-size:16px; font-weight:800; color:#0B1730; margin-bottom:8px;}
.process-step p{font-size:13.5px; line-height:1.65; color:#55647A; margin:0;}
.process-connector{flex:0 0 46px; display:flex; align-items:center; justify-content:center;}
.process-connector svg{width:100%; height:20px;}
.process-connector-path{stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1s ease;}
.process-connector-path.is-drawn{stroke-dashoffset:0;}
@media(max-width:991px){
  .process-flow{flex-direction:column;}
  .process-connector{flex:0 0 auto; width:100%; height:24px;}
  .process-connector svg{transform:rotate(90deg); width:24px; height:60px; margin:0 auto;}
}

/* ---------- ENGAGEMENT MODELS ---------- */
.engage-section{padding:30px 0; background:#0B1730;}
.engage-heading{
  font-size:30px; font-weight:800; text-align:center; margin-bottom:14px;
  background:linear-gradient(95deg,#FFFFFF,#93C5FD,#38BDF8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.engage-sub{font-size:16px; line-height:1.7; color:#AEC1DC; text-align:center; max-width:760px; margin:0 auto 30px;}
.engage-img{width:100%; height:auto; border-radius:18px; box-shadow:0 22px 46px rgba(0,0,0,.4); object-fit:cover; transition:transform .35s ease;}
.engage-img:hover{transform:scale(1.02);}
.engage-tabs{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px;}
.engage-tab{
  padding:10px 18px; border-radius:999px; font-size:13.5px; font-weight:700; cursor:pointer;
  background:rgba(255,255,255,.05); color:#AEC1DC; border:1px solid rgba(255,255,255,.14);
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.engage-tab.is-active, .engage-tab:hover{background:linear-gradient(95deg,#1D4ED8,#38BDF8); color:#04101F; border-color:transparent; transform:translateY(-2px);}
.engage-panels{max-width:100%;}
.engage-panel{display:none; padding:26px 28px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);}
.engage-panel.is-active{display:block; animation:fadeSlideIn .4s ease;}
.engage-panel h3{color:#fff; font-size:19px; font-weight:800; margin-bottom:10px;}
.engage-panel p{color:#AEC1DC; font-size:14.5px; line-height:1.75; margin:0;}
@keyframes fadeSlideIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* ---------- REAL OPS BANNER ---------- */
.realops-section{padding:30px 0; background:#FFFFFF;}
.realops-card{
  padding:34px 34px; border-radius:16px; text-align:center;
  background:linear-gradient(90deg,rgba(29,78,216,.06),rgba(56,189,248,.06));
  border:1px solid #E4ECF7;
}
.realops-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:60px; height:60px; border-radius:50%; margin-bottom:16px;
  background:linear-gradient(135deg,rgba(29,78,216,.12),rgba(56,189,248,.16));
  transition:transform .3s ease;
}
.realops-icon:hover{transform:scale(1.12) rotate(-6deg);}
.realops-text{font-size:16px; line-height:1.8; color:#1E293B; font-weight:600; margin:0 0 24px;}
.realops-img{width:100%; height:auto; border-radius:14px; box-shadow:0 18px 40px rgba(11,23,48,.12); object-fit:cover; transition:transform .35s ease;}
.realops-img:hover{transform:scale(1.01);}

/* ---------- CASE STUDIES ---------- */
 #CaseStudies {
    background: #07080B;
    padding: 30px 0;
    position: relative;
    overflow: hidden;
    color: #F3F4F6;
  }

  #CaseStudies::before {
    content: "";
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 900px;
    height: 600px;
    background: radial-gradient(circle, rgba(34,211,238,0.10) 0%, rgba(139,92,246,0.06) 45%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
  }

  #CaseStudies::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
  }

  #CaseStudies .cs-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    position: relative;
    z-index: 2;
  }

  #CaseStudies .client-title {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-align: center;
    margin: 0 0 16px 0;
    color: #F3F4F6;
  }



  #CaseStudies .cs-subtext {
    text-align: center;
    max-width: 620px;
    margin: 0 auto 64px auto;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.55;
    color: #8A8F9B;
  }

  /* ===== VIEWPORT (shows exactly one card) ===== */
  #CaseStudies .cs-viewport {
    position: relative;
    max-width: 1140px;
    margin: 0 auto;
    overflow: hidden;
  }

  #CaseStudies .casestudies_slider {
    position: relative;
    overflow: hidden;
  }

  #CaseStudies .slider-casestudies {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
  }

  #CaseStudies .caseStudiesSliderBox {
    flex: 0 0 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px;
  }

  /* ===== CARD ===== */
  #CaseStudies .case_box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 36px;
    background: #0F1219;
    border-radius: 24px;
    overflow: hidden;
    padding: 40px;
    transition: transform 0.35s ease, background 0.35s ease;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 0;
  }

  /* static border */
  #CaseStudies .case_box::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1px;
    background: rgba(255,255,255,0.07);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 1;
  }

  /* animated gradient border on hover */
  #CaseStudies .case_box::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 1.5px;
    background: conic-gradient(from var(--angle, 0deg), #22D3EE, #8B5CF6, #5EE6E0, #22D3EE);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    animation: cs-rotate 3s linear infinite;
    z-index: 2;
  }

  @property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
  }

  @keyframes cs-rotate {
    to { --angle: 360deg; }
  }

  #CaseStudies .case_box:hover {
    transform: translateY(-6px);
    background: rgba(15, 18, 25, 0.92);
    box-shadow: 0 24px 60px -20px rgba(56,189,248,0.25), 0 0 40px rgba(56,189,248,0.08);
  }

  #CaseStudies .case_box:hover::before { opacity: 0; }
  #CaseStudies .case_box:hover::after { opacity: 1; }

  #CaseStudies .case_box__image {
    flex: 0 0 420px;
    width: 420px;
    height: 300px;
    position: relative;
    overflow: hidden;
    /* background: #0C0E14; */
    /* border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.07); */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #CaseStudies .case_box__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }

  #CaseStudies .case_box__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  #CaseStudies .case_box__content h4 {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 14px 0;
    color: #F3F4F6;
  }

  #CaseStudies .case_box__content p {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6;
    color: #C7CAD1;
    margin: 0 0 20px 0;
  }

  #CaseStudies .case_box__points {
    list-style: none;
    margin: 0 0 28px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  #CaseStudies .case_box__points li {
    position: relative;
    padding-left: 22px;
    font-size: 13px;
    font-weight: 400;
    color: #8A8F9B;
    line-height: 1.4;
  }

  #CaseStudies .case_box__points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #22D3EE, #8B5CF6);
  }

  #CaseStudies .viewCaseStudies {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 14px 22px;
    border-radius: 999px;
    background: #F3F4F6;
    color: #07080B;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.3s ease, background 0.3s ease, gap 0.3s ease;
  }

  #CaseStudies .viewCaseStudies i {
    font-style: normal;
    transition: transform 0.3s ease;
  }

  #CaseStudies .viewCaseStudies::after {
    content: "\2192";
    transition: transform 0.3s ease;
  }

  #CaseStudies .viewCaseStudies i {
    display: none; /* font-awesome glyph not loaded, use unicode arrow above */
  }

  #CaseStudies .viewCaseStudies:hover {
    transform: translateY(-3px);
    background: #22D3EE;
  }

  #CaseStudies .viewCaseStudies:hover::after {
    transform: translateX(4px);
  }

  /* ===== DOTS / PROGRESS ===== */
  #CaseStudies .cs-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    flex-wrap: wrap;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
  }

  #CaseStudies .cs-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: none;
    cursor: pointer;
    transition: width 0.35s ease, background 0.35s ease;
    padding: 0;
  }

  #CaseStudies .cs-dot.active {
    width: 26px;
    background: linear-gradient(90deg, #22D3EE, #8B5CF6);
  }

  /* ===== ARROWS ===== */
  #CaseStudies .caseStudiesBottomArrows {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 36px;
  }

  #CaseStudies .caseStudiesBottomArrows button {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    color: #F3F4F6;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
  }

  #CaseStudies .caseStudiesBottomArrows button:hover {
    border-color: rgba(56,189,248,0.55);
    background: rgba(56,189,248,0.08);
    transform: translateY(-2px);
  }

  #CaseStudies .caseStudiesBottomArrows i {
    font-style: normal;
  }

  #CaseStudies .caseStudiesBottomArrows .fa-arrow-left::before { content: "\2190"; }
  #CaseStudies .caseStudiesBottomArrows .fa-arrow-right::before { content: "\2192"; }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 991px) {
    #CaseStudies { padding: 90px 0; }
    #CaseStudies .client-title { font-size: 40px; }
    #CaseStudies .case_box { flex-direction: column; padding: 32px; gap: 24px; }
    #CaseStudies .case_box__image { width: 100%; max-width: 360px; height: 260px; flex: 0 0 260px; }
    #CaseStudies .case_box__content { align-items: center; text-align: center; }
    #CaseStudies .case_box__content h4 { font-size: 24px; }
    #CaseStudies .case_box__points { align-items: flex-start; }
  }

  @media (max-width: 575px) {
    #CaseStudies { padding: 30px 0; }
    #CaseStudies .cs-container { padding: 0 20px; }
    #CaseStudies .client-title { font-size: 30px; }
    #CaseStudies .cs-subtext { font-size: 15px; margin-bottom: 40px; }
    #CaseStudies .case_box { padding: 24px; }
    #CaseStudies .case_box__image { width: 100%; max-width: 280px; height: 220px; flex: 0 0 220px; }
    #CaseStudies .case_box__content h4 { font-size: 21px; }
    #CaseStudies .case_box__points li { font-size: 12px; }
    #CaseStudies .caseStudiesBottomArrows button { width: 42px; height: 42px; }
  }
.tr-gradient-text{
    background: linear-gradient(90deg, #22D3EE, #8B5CF6, #FFFFFF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
   display:inline-block;
    padding-bottom:6px;
    line-height:inherit;
}


/* ---------- CTA ---------- */
.cta-section{position:relative; padding:30px 0; overflow:hidden; background:#0B1730;}
.cta-bg{
  position:absolute; inset:0;
  background-image:radial-gradient(circle at 80% 30%, rgba(56,189,248,.30), transparent 55%),
                    radial-gradient(circle at 10% 80%, rgba(29,78,216,.35), transparent 55%);
}
.cta-icon{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:16px; margin-bottom:16px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  transition:transform .3s ease;
}
.cta-icon:hover{transform:translateY(-4px) rotate(-6deg);}
.cta-heading{
  position:relative; font-size:30px; font-weight:800; margin-bottom:16px;
  background:linear-gradient(95deg,#FFFFFF,#93C5FD,#38BDF8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.cta-text{position:relative; font-size:15.5px; line-height:1.75; color:#AEC1DC; margin-bottom:24px; max-width:560px;}
.cta-btn{
  position:relative; display:inline-flex; align-items:center; gap:9px; padding:14px 28px; border-radius:10px;
  background:linear-gradient(95deg,#38BDF8,#1D4ED8); color:#04101F; font-weight:700; text-decoration:none;
  box-shadow:0 14px 30px rgba(29,78,216,.4);
  transition:transform .25s ease, box-shadow .25s ease;
}
.cta-btn-icon{transition:transform .3s ease;}
.cta-btn:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 20px 40px rgba(29,78,216,.55); color:#04101F;}
.cta-btn:hover .cta-btn-icon{transform:translateX(4px);}
.cta-img-col{position:relative;}
.cta-img{width:100%; height:auto; border-radius:18px; box-shadow:0 24px 50px rgba(0,0,0,.4); object-fit:cover; transition:transform .35s ease;}
.cta-img:hover{transform:scale(1.02);}

/* ---------- FAQ ---------- */
.faq-section{padding:30px 0; background:#FFFFFF;}
.faq-heading{
  font-size:30px; font-weight:800; text-align:center; margin-bottom:14px;
  background:linear-gradient(95deg,#1D4ED8,#2563EB,#38BDF8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.faq-sub{font-size:16px; line-height:1.7; color:#55647A; text-align:center; max-width:760px; margin:0 auto 30px;}
.faq-img{width:100%; height:auto; border-radius:18px; box-shadow:0 22px 46px rgba(11,23,48,.14); object-fit:cover; transition:transform .35s ease;}
.faq-img:hover{transform:scale(1.02);}
.faq-tabs{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px;}
.faq-tab{
  padding:10px 18px; border-radius:999px; font-size:13.5px; font-weight:700; cursor:pointer;
  background:#F5F8FC; color:#55647A; border:1px solid #E4ECF7;
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.faq-tab.is-active, .faq-tab:hover{background:linear-gradient(95deg,#1D4ED8,#38BDF8); color:#fff; border-color:transparent; transform:translateY(-2px);}
.faq-panel{display:none; max-width:100%;}
.faq-panel.is-active{display:block; animation:fadeSlideIn .4s ease;}
.faq-accordion{border-radius:16px; overflow:hidden; border:1px solid #E4ECF7;}
.faq-item{border-top:1px solid #E4ECF7;}
.faq-item:first-child{border-top:none;}
.faq-q{
  width:100%; text-align:left; padding:18px 46px 18px 20px; position:relative;
  background:#fff; border:none; font-size:15px; font-weight:700; color:#0B1730; cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.faq-q:hover{background:#F5F8FC; color:#1D4ED8;}
.faq-q:after{
  content:""; position:absolute; right:20px; top:50%; width:11px; height:11px;
  border-right:2px solid #1D4ED8; border-bottom:2px solid #1D4ED8;
  transform:translateY(-65%) rotate(45deg); transition:transform .25s ease;
}
.faq-q[aria-expanded="true"]:after{transform:translateY(-35%) rotate(-135deg);}
.faq-q:focus-visible, .engage-tab:focus-visible, .faq-tab:focus-visible, .hero-btn:focus-visible, .services-slider-arrow:focus-visible{
  outline:2px solid #38BDF8; outline-offset:2px;
}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease; background:#F5F8FC;}
.faq-a p{margin:0; padding:0 20px; font-size:14px; line-height:1.75; color:#55647A;}
.faq-item.is-open .faq-a{padding:16px 0;}
.faq-item.is-open .faq-a p{padding:0 20px;}

/* ---------- Shared responsive safety ---------- */
.hero-section, .whyuae-goals-section, .whyuae-problems-section, .whatis-section,
.services-section, .platforms-section, .industries-section, .included-section,
.why-section, .process-section, .engage-section, .realops-section,
.casestudy-section, .cta-section, .faq-section{
  max-width:100%;
}
img{max-width:100%;}

/* =========================================================
   RESPONSIVE FIXES — append at end of file
   ========================================================= */

/* ---- FIX 1: Hero background image path (mobile/tablet) ---- */
@media(max-width:991px){
  .hero-section{
    background-image:linear-gradient(180deg, rgba(4,9,20,.96), rgba(4,9,20,.90)),
                      url('../images/cloud-managed-services/hero-bg.jpg');
  }
}

/* ---- FIX 2: Industries section — blank gap bug on mobile ----
   Root cause: flex-basis (380px/420px) applies to WIDTH on desktop
   but becomes HEIGHT once flex-direction:column kicks in on mobile,
   forcing empty space under images. Reset basis to auto. */
@media(max-width:991px){
  .industries-item-img-col,
  .industries-item-copy-col{
    flex:1 1 auto;
    width:100%;
  }
  .industries-item-img-col{
    max-height:none;
  }
}

/* ---- FIX 3: Hero — better scaling on small tablets (768–991px) ---- */
@media(max-width:991px) and (min-width:768px){
  .hero-heading{font-size:38px;}
}

/* ---- FIX 4: Small phones (≤480px) — tighten type & spacing ---- */
@media(max-width:480px){
  .hero-heading{font-size:28px;}
  .hero-sub{font-size:15px;}
  .hero-cta-row{flex-direction:column; align-items:stretch;}
  .hero-btn{width:100%;}

  .whyuae-goals-heading,
  .whyuae-problems-heading,
  .whatis-heading,
  .services-heading,
  .platforms-heading,
  .industries-heading,
  .included-heading,
  .why-heading,
  .process-heading,
  .engage-heading,
  .cta-heading,
  .faq-heading{font-size:24px;}

  .industries-item-title{font-size:19px;}
  .why-card-title{font-size:15px;}
  .services-card-title{font-size:16px;}

  .engage-tab, .faq-tab{
    font-size:12.5px;
    padding:8px 14px;
  }

  #CaseStudies .client-title{font-size:26px;}
  #CaseStudies .case_box{padding:20px;}
  #CaseStudies .case_box__image{max-width:100%; height:200px; flex-basis:200px;}
}

/* ---- FIX 5: Prevent any accidental horizontal scroll on mobile ---- */
html, body{overflow-x:hidden;}

/* ---- FIX 6: Services/Case-study slider arrows don't overlap content on very narrow screens ---- */
@media(max-width:359px){
  .services-slider-arrow,
  #CaseStudies .caseStudiesBottomArrows button{
    width:40px; height:40px;
  }
}

/* ---- FIX 7: Ensure why-sisgain & platform cards never overflow on tiny screens ---- */
@media(max-width:400px){
  .platforms-card{padding:26px 18px;}
  .why-card{padding:18px 16px;}
}
/* ---- FIX 8: Image-to-heading gap in "Why UAE needs managed cloud" section ---- */
@media(max-width:991px){
  .whyuae-problems-img-col{
    margin-bottom:24px;   /* image ke neeche space */
  }
}

/* Same spacing issue can happen in other stacked image+heading blocks —
   safe generic fix for all such columns on mobile */
@media(max-width:991px){
  .whyuae-goals-img,
  .whyuae-problems-img,
  .whatis-img,
  .why-img,
  .process-img,
  .engage-img,
  .faq-img{
    margin-bottom:20px;
  }
}