* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Inter, Arial, sans-serif;
}

body {
  background: #fff;
  color: #111;
}

html {
  width: 100%;
}

body {
  width: 100%;
  overflow-x: hidden;
}


/* ================= BACK ================= */

.cm-breadcrumb-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 40px;
  /* image madhiri spacing */
  border-bottom: 1px solid #ececec;
}

/* ===== BACK ICON ===== */
.cm-back-btn {
  color: #444;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color 0.25s ease;
}

.cm-back-btn:hover {
  color: #333;
  /* light dark */
}

/* ===== BREADCRUMB ===== */
.cm-breadcrumb-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 17px;
  font-weight: 600;
}

/* LINKS (Home, Services) */
.cm-breadcrumb-link {
  color: #444;
  /* image-la irukura grey */
  text-decoration: none;
  transition: color 0.25s ease;
}

.cm-breadcrumb-link:hover {
  color: #333;
  /* light dark on hover */
}

/* SLASH */
.cm-breadcrumb-sep {
  color: #c2c2c2;
  font-size: 15px;
}

/* CURRENT PAGE */
.cm-breadcrumb-active {
  color: #1f6bff;
  /* exact blue tone */
  font-weight: 600;
}


/* ================= HERO SECTION ================= */
.cm-hero-wrap {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 10px;
  background: linear-gradient(135deg,
      #3b5cff 0%,
      #4a4fe2 45%,
      #6b2fd8 75%,
      #7a1fd0 100%);
  overflow-x: hidden;
}

/* ================= CONTENT ================= */
.cm-hero-content {
  max-width: 1000px;
  text-align: center;
  color: #ffffff;
  animation: cmFadeUp 1.4s ease forwards;
  opacity: 0;
}

/* ================= ICON ================= */
.cm-hero-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 28px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cm-hero-icon i {
  font-size: 30px;
}

/* ================= HEADINGS ================= */
.cm-hero-title {
  font-size: 60px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 30px;
  letter-spacing: 1px;
}

.cm-hero-subtitle {
  font-size: 30px;
  font-weight: 700;
  color: #eef1ff;
  margin-bottom: 26px;
}

/* ================= PARAGRAPHS ================= */
.cm-hero-text {
  font-size: 19px;
  line-height: 1.8;
  color: #e2e3f0;
  max-width: 900px;
  margin: 0 auto 26px;
}

.cm-hero-strong {
  font-size: 19px;
  line-height: 1.8;
  font-weight: 700;
  color: #ffffff;
  max-width: 840px;
  margin: 0 auto 42px;
}

/* ================= BUTTONS ================= */
.cm-btn-wrap {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* PRIMARY BUTTON */
.cm-btn-primary {
  background: #ffffff;
  color: #1f3cff;
  padding: 16px 26px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.35s ease;
}

.cm-btn-primary i {
  transition: transform 0.35s ease;
}

.cm-btn-primary:hover {
  background: #eef1ff;
}

.cm-btn-primary:hover i {
  transform: translateX(7px);
}

/* SECONDARY BUTTON (UPDATED) */
.cm-btn-secondary {
  background: #2f6bff;
  color: #ffffff;
  padding: 16px 26px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #8fb0ff;
  transition: background 0.35s ease;
}

.cm-btn-secondary:hover {
  background: #255ae6;
}

/* ================= STAGGER BASE ================= */
.cm-animate {
  opacity: 0;
  transform: translateY(34px);
}

/* Existing animation */
@keyframes cmFadeUp {
  from {
    opacity: 0;
    transform: translateY(34px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px) {
  .cm-hero-title {
    font-size: 38px;
  }

  .cm-hero-subtitle {
    font-size: 20px;
  }

  .cm-hero-text,
  .cm-hero-strong {
    font-size: 16px;
  }
}


.cm-need-wrap {
  padding: 50px 20px;
  text-align: center;
  overflow-x: hidden;
}

.cm-need-title {
  font-size: 46px;
  font-weight: 500;
  color: #0b0b0b;
  margin-bottom: 48px;
  letter-spacing: 1px;
}

/* ================= GRID ================= */
.cm-need-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

/* ================= CARD ================= */
.cm-need-card {
  /* background:#f8fbff; */
  background: linear-gradient(135deg,
      #ffffff 0%,
      #f9fbff 40%,
      #f2f6ff 70%,
      #edf2ff 100%);
  border-radius: 14px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 14px;

  /* NEW: light blue border */
  border: 1px solid #dbe6ff;

  /* very light shadow */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);

  /* animation base */
  opacity: 0;
  transform: translateY(30px);
}


/* ================= ICON ================= */
.cm-need-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #3b5cff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cm-need-icon i {
  font-size: 18px;
  color: #ffffff;
}

/* ================= TEXT ================= */
.cm-need-text {
  font-size: 17px;
  font-weight: 550;
  /* 🔥 increased weight */
  color: #2b2f38;
  text-align: left;
  line-height: 1.45;
}

/* ================= ANIMATION ================= */
@keyframes cmNeedFadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px) {
  .cm-need-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:560px) {
  .cm-need-grid {
    grid-template-columns: 1fr;
  }
}


/* ================= SECTION ================= */
.ma-wrap {
  margin-top: 50px;
  padding: 40px 30px;
  background: #f8fafc;
}

.ma-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 60px;
}

.ma-title {
  font-size: 48px;
  font-weight: 500;
  color: #0b0b0b;
  margin-bottom: 14px;
  letter-spacing: 1px;
}

.ma-subtitle {
  font-size: 19px;
  line-height: 1.6;
  color: #5f6b7a;
}

/* ================= GRID ================= */
.ma-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ================= CARD BASE ================= */
.ma-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 26px 26px 24px;
  /* box-shadow:0 12px 26px rgba(0,0,0,0.08); */

  /* animation base */
  opacity: 0;
  transform: translateY(-40px);
}

/* ================= CARD COLORS ================= */
.ma-blue {
  background: linear-gradient(180deg, #e7effb, #ffffff);
  border: 1px solid #cfe0ff;
}

.ma-green {
  background: linear-gradient(180deg, #e0f5e9, #ffffff);
  border: 1px solid #bff0d5;
}

.ma-purple {
  background: linear-gradient(180deg, #f6eafe, #ffffff);
  border: 1px solid #e4cfff;
}

.ma-orange {
  background: linear-gradient(180deg, #fff6eb, #ffffff);
  border: 1px solid #ffd9b3;
}

.ma-red {
  background: linear-gradient(180deg, #fff1f1, #ffffff);
  border: 1px solid #ffc5c5;
}

/* ================= CARD CONTENT ================= */
.ma-card-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
}

.ma-blue .ma-card-title {
  color: #2f6bff;
}

.ma-green .ma-card-title {
  color: #1f9d63;
}

.ma-purple .ma-card-title {
  color: #8a3dff;
}

.ma-orange .ma-card-title {
  color: #ff8a00;
}

.ma-red .ma-card-title {
  color: #e03a3a;
}

.ma-card-desc {
  font-size: 17px;
  font-weight: 600;
  color: #444;
  margin-bottom: 19px;
}

.ma-list {
  list-style: none;
  margin-bottom: 18px;
}

.ma-list li {
  font-size: 15px;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}

.ma-blue i {
  color: #2f6bff;
  font-weight: 600;
  font-size: 15px;
}

.ma-green i {
  color: #1f9d63;
  font-weight: 600;
  font-size: 15px;
}

.ma-purple i {
  color: #8a3dff;
  font-weight: 600;
  font-size: 15px;
}

.ma-orange i {
  color: #ff8a00;
  font-weight: 600;
  font-size: 15px;
}

.ma-red i {
  color: #e03a3a;
  font-weight: 600;
  font-size: 15px;
}

/* ================= HR + GOOD FOR ================= */
.ma-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 16px 0 12px;
}

.ma-goodfor-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: #6b7280;
  margin-bottom: 6px;
}

.ma-goodfor-text {
  font-size: 14px;
  color: #374151;
}

/* ================= ANIMATION ================= */
@keyframes maDropFade {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= RESPONSIVE ================= */
@media(max-width:1024px) {
  .ma-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:600px) {
  .ma-grid {
    grid-template-columns: 1fr;
  }
}


/* ================= SECTION ================= */
.ccs-wrap {
  margin-top: 50px;
  padding: 40px 20px;
}

.ccs-head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 60px;
}

.ccs-title {
  font-size: 48px;
  font-weight: 500;
  color: #0b0b0b;
  margin-bottom: 14px;
  letter-spacing: 1px;
}

.ccs-subtitle {
  font-size: 19px;
  line-height: 1.6;
  color: #5f6b7a;

}

/* ================= GRID ================= */
.ccs-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* ================= CARD BASE ================= */
.ccs-card {
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
  border: 1px solid #e3ecff;
  border-radius: 16px;
  padding: 28px 20px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.08);

  opacity: 0;
}

/* left card animation base */
.ccs-card-left {
  transform: translateX(-60px);
}

/* right card animation base */
.ccs-card-right {
  transform: translateX(60px);
}

/* ================= CARD HEADER ================= */
.ccs-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.ccs-icon-box {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: #2f6bff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccs-icon-box i {
  font-size: 20px;
  color: #ffffff;
}

.ccs-card-title {
  font-size: 22px;
  font-weight: 500;
  color: #0f172a;
  letter-spacing: 1px;
}

/* ================= LIST ================= */
.ccs-list {
  list-style: none;
  margin-bottom: 22px;
}

.ccs-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: #374151;
  margin-bottom: 10px;
}

.ccs-list i {
  color: #2f6bff;
  font-size: 16px;
  font-weight: 600;
  margin-top: 2px;
}

/* ================= DIVIDER ================= */
.ccs-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 18px 0 14px;
}

/* ================= DELIVERABLES ================= */
.ccs-deliver-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: #6b7280;
  margin-bottom: 10px;
}

.ccs-deliver-list {
  list-style: none;
}

.ccs-deliver-list li {
  font-size: 14px;
  color: #374151;
  margin-bottom: 6px;
  line-height: 19px;
}

/* ================= ANIMATIONS ================= */
@keyframes ccsSlideFadeLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes ccsSlideFadeRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px) {
  .ccs-grid {
    grid-template-columns: 1fr;
  }
}


/* ================= SECTION ================= */
.cae-section {
  background: #f8fafc;
  padding: 50px 20px;
  margin-top: 80px;
}

.cae-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 70px;
}

.cae-title {
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #0f172a;
  margin-bottom: 15px;
}

.cae-subtitle-strong {
  font-size: 25px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 15px;
}

.cae-subtitle {
  font-size: 18px;
  color: #6b7280;
  line-height: 1.6;
}

/* ================= GRID ================= */
.cae-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* ================= CARD ================= */
.cae-card {
  /* background:linear-gradient(180deg,#f9fbff 0%, #ffffff 100%); */
  background: #ffffff;
  border: 1px solid #e6ecff;
  border-radius: 16px;
  padding: 26px 26px 28px;
  box-shadow: 0 5px 6px rgba(0, 0, 0, 0.08);

  opacity: 0;
}

.cae-card:hover {
  box-shadow: 0 10px 6px rgba(0, 0, 0, 0.08);
}

/* animation start positions */
.cae-left {
  transform: translateX(-90px);
}

.cae-top {
  transform: translateY(-80px);
}

.cae-right {
  transform: translateX(90px);
}

/* ================= CARD HEADER ================= */
.cae-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.cae-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #4663f4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cae-icon-wrap i {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
}

.cae-card-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #0f172a;
}

/* ================= LIST ================= */
.cae-list {
  list-style: none;
}

.cae-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: #374151;
  margin-bottom: 10px;
}

.cae-list i {
  color: #22c55e;
  font-weight: 600;
  font-size: 16px;
  margin-top: 2px;
}

/* ================= ANIMATIONS ================= */
@keyframes caeFadeLeft {
  from {
    opacity: 0;
    transform: translateX(-70px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes caeFadeTop {
  from {
    opacity: 0;
    transform: translateY(-60px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes caeFadeRight {
  from {
    opacity: 0;
    transform: translateX(70px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ================= RESPONSIVE ================= */
@media(max-width:950px) {
  .cae-grid {
    grid-template-columns: 1fr;
  }
}


/* ================= SECTION ================= */
.mmz-section {
  padding: 90px 20px;
}

.mmz-header {
  text-align: center;
  margin-bottom: 60px;
}

.mmz-title {
  font-size: 48px;
  font-weight: 500;
  color: #0f172a;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

.mmz-subtitle {
  font-size: 18px;
  color: #6b7280;
}

/* ================= CARD ================= */
.mmz-card {
  max-width: 1180px;
  margin: 0 auto 34px;
  background: #ffffff;
  border: 1px solid #e6ecff;
  border-radius: 18px;
  padding: 28px 32px;
  box-shadow: 0 14px 18px -18px rgba(0, 0, 0, 0.25);
  opacity: 0;
}

/* start positions */
.mmz-from-right {
  transform: translateX(90px);
}

.mmz-from-left {
  transform: translateX(-90px);
}

/* ================= CARD HEADER ================= */
.mmz-card-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
}

.mmz-step-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  /* background:#3b5cff; */
  background: linear-gradient(135deg,
      #3b5cff 0%,
      #4a4fe2 45%,
      #6b2fd8 75%,
      #7a1fd0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 600;
  font-size: 20px;
}

.mmz-phase-title {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #0f172a;
}

.mmz-phase-time {
  font-size: 16px;
  color: #2563eb;
  font-weight: 600;
  margin-top: 8px;
}

/* ================= LIST ================= */
.mmz-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 30px;
}

.mmz-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #374151;
  opacity: 0;
}

.mmz-list-item i {
  color: #2563eb;
  font-size: 15px;
  font-weight: 600;
}

/* ================= ANIMATIONS ================= */
@keyframes mmzSlideRight {
  from {
    opacity: 0;
    transform: translateX(120px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mmzSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-120px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mmzFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px) {
  .mmz-list {
    grid-template-columns: 1fr;
  }
}


/* ================= SECTION ================= */
.secx-section {
  padding: 80px 20px;
  background: linear-gradient(135deg, #0b1626 0%, #1b2a3f 50%, #0e1c2f 100%);
}

.secxx-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
}

/* ================= CARD ================= */
.secxx-card {
  background: linear-gradient(135deg, #1a2739 0%, #23364f 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 32px 34px;
  color: #e5e7eb;
  opacity: 0;
}

.secxx-left {
  transform: translateX(-140px);
}

.secxx-right {
  transform: translateX(140px);
}

/* ================= TITLES ================= */
.secxx-title {
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 22px;
  letter-spacing: 0.5px;
  color: #ffffff;
}

.secx-title {
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #ffffff;
  margin-bottom: 13px;
  text-align: center;
}

.secx-subtitle-strong {
  font-size: 24px;
  font-weight: 600;
  color: rgb(176, 175, 175);
  line-height: 1.6;
  text-align: center;
  margin-bottom: 40px;
}

.secxx-subtitle {
  font-size: 13px;
  letter-spacing: 0.4px;
  font-weight: 600;
  color: #7dd3fc;
  margin: 26px 0 12px;
}

/* ================= LIST ================= */
.secxx-list {
  list-style: none;
}

.secxx-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: #d1d5db;
  margin-bottom: 10px;
}

.secxx-item i {
  font-size: 14px;
  margin-top: 2px;
}

/* icon colors */
.secxx-lock {
  color: #60a5fa;
  font-weight: 600;
}

.secxx-check {
  color: #22c55e;
  font-size: 16px;
  font-weight: 600;
}

/* ================= RIGHT CARD SPECIAL ================= */
.secxx-framework {
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
}

.secxx-subtitle-right {
  font-size: 14px;
  letter-spacing: 0.4px;
  font-weight: 600;
  /* color:#7dd3fc; */
  margin: 26px 0 12px;
  color: rgb(197, 197, 197);
}

.secxx-desc {
  font-size: 14px;
  color: #9ca3af;
  margin-top: 3px;
}

.secxx-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  margin: 26px 0;
}

/* green square box for compliance icons */
.secxx-check-box {
  width: 30px;
  height: 30px;
  min-width: 22px;
  border-radius: 10px;
  /* background:#16a34a; green box */
  background: linear-gradient(135deg, #098c34, #058a34);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.secxx-check-box i {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

/* ================= ANIMATIONS ================= */
@keyframes secxxSlideInLeft {
  from {
    opacity: 0;
    transform: translateX(-140px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes secxxSlideInRight {
  from {
    opacity: 0;
    transform: translateX(140px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px) {
  .secxx-wrap {
    grid-template-columns: 1fr;
  }
}


/* ================= SECTION ================= */
.cloudsec-wrapper {
  padding: 80px 60px;
  background: #f8fafc;
}

.cloudsec-title {
  text-align: center;
  font-size: 48px;
  font-weight: 500;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.cloudsec-subtitle {
  text-align: center;
  font-size: 23px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 60px;
}

/* ================= CARDS ================= */
.cloudsec-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.cloudsec-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 28px;

  /* smoother shadow */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);

  /* start position (far & soft) */
  transform: translate3d(0, -160px, 0) rotate(-8deg);
  opacity: 0;

  /* IMPORTANT for smoothness */
  will-change: transform, opacity;

  transition:
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1.1s ease,
    box-shadow 0.45s ease,
    background 0.45s ease;
}

/* active state */
.cloudsec-card.active {
  transform: translate3d(0, 0, 0) rotate(0deg);
  opacity: 1;
}


/* scroll active */
.cloudsec-card.active {
  transform: translateY(0) rotate(0deg);
  opacity: 1;
}

/* hover */
.cloudsec-card:hover {
  /* background:#f8fafc; */
  box-shadow: 0 10px 5px rgba(0, 0, 0, 0.28);
}

/* ================= ICON ================= */
.cloudsec-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(to bottom,
      #2563eb,
      #4f46e5,
      #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 22px;
  margin-bottom: 18px;
}

/* ================= TEXT ================= */
.cloudsec-card h4 {
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.cloudsec-highlight {
  font-size: 28px;
  font-weight: 700;
  color: #2563eb;
  margin-bottom: 10px;
}

.cloudsec-desc {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

.cloudsec-list {
  font-size: 14px;
  color: #475569;
  line-height: 1.6;
}

.cloudsec-list li {
  margin-left: 16px;
  list-style: disc;
}

/* ================= RESPONSIVE ================= */
@media(max-width:1100px) {
  .cloudsec-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:600px) {
  .cloudsec-card-grid {
    grid-template-columns: 1fr;
  }
}


/* SECTION */
.cpwrap-section {
  max-width: 1300px;
  margin: 90px auto;
  padding: 0 28px;
}

.cpwrap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* COMMON CARD */
.cpwrap-card {
  border-radius: 18px;
  padding: 30px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.14);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 1.3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 1.3s ease;
}

/* CARD GRADIENTS */
.cpwrap-aws {
  background: linear-gradient(145deg, #fff5e8, #ffffff);
  transform: translateX(-220px);
}

.cpwrap-azure {
  background: linear-gradient(145deg, #f2f8ff, #ffffff);
  opacity: 1;
  transform: none;
}

.cpwrap-gcp {
  background: linear-gradient(145deg, #fff0f0, #ffffff);
  transform: translateX(220px);
}

.cpwrap-card.active {
  transform: translateX(0);
  opacity: 1;
}

/* HEADER */
.cpwrap-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.cpwrap-icon {
  width: 50px;
  height: 50px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 23px;
}

.cpwrap-icon.aws {
  background: linear-gradient(135deg, #ff8a00, #ff5c00);
}

.cpwrap-icon.azure {
  background: linear-gradient(135deg, #0078d4, #005fb8);
}

.cpwrap-icon.gcp {
  background: linear-gradient(135deg, #ea4335, #c5221f);
}

.cpwrap-title {
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #111827;
}

/* BLOCKS */
.cpwrap-block {
  margin-bottom: 22px;
}

.cpwrap-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  margin-bottom: 10px;
}

.cpwrap-aws .cpwrap-label {
  color: #ff7a00;
}

.cpwrap-azure .cpwrap-label {
  color: #0078d4;
}

.cpwrap-gcp .cpwrap-label {
  color: #d93025;
}

.cpwrap-list {
  list-style: none;
}

.cpwrap-list li {
  font-size: 14px;
  color: #374151;
  margin-bottom: 7px;
  line-height: 1.13;
}

.cpwrap-list li {
  position: relative;
  padding-left: 18px;
}

.cpwrap-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #6b7280;
  /* light grey dot */
  font-size: 14px;
  line-height: 1;
}

/* ================= RESPONSIVE ================= */

/* Large tablets / small laptops */
@media (max-width:1200px) {
  .cpwrap-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .cpwrap-card {
    padding: 22px;
  }

  .cpwrap-card h3 {
    font-size: 18px;
  }
}

/* Tablets */
@media (max-width:991px) {
  .cpwrap-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* center card stays normal */
  .cpwrap-card.center-card {
    transform: none !important;
    opacity: 1 !important;
  }

  /* disable side-slide on mobile/tablet */
  .cpwrap-card.left-card,
  .cpwrap-card.right-card {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Mobile */
@media (max-width:576px) {
  .cpwrap-section {
    padding: 50px 16px;
  }

  .cpwrap-card {
    padding: 20px;
    border-radius: 16px;
  }

  .cpwrap-icon {
    width: 42px;
    height: 42px;
  }

  .cpwrap-icon i {
    font-size: 18px;
  }

  .cpwrap-card h3 {
    font-size: 17px;
  }

  .cpwrap-list li {
    font-size: 14px;
    line-height: 1.6;
  }
}


/* ===== SECTION ===== */
.cms-page {
  padding: 70px 20px;
  background: #f8fafc;
  overflow-x: hidden;
}

.cms-wrapper {
  max-width: 1100px;
  margin: auto;
}

/* ===== TITLE ===== */
.cms-title {
  text-align: center;
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.cms-subtitle {
  text-align: center;
  font-size: 23px;
  color: #374151;
  font-weight: 600;
  margin-bottom: 44px;
}

/* ===== CARD ===== */
.cms-card {
  display: grid;
  grid-template-columns: 1.6fr 0.85fr;
  gap: 28px;
  padding: 36px;
  margin-top: 50px;
  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.12);
  /* bottom soft shadow */
}

/* ===== LEFT CONTENT ===== */
.cms-left h3 {
  font-size: 24px;
  letter-spacing: 0.5px;
  font-weight: 500;
  margin-bottom: 22px;
}

.cms-group {
  margin-bottom: 20px;
}

.cms-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

.cms-text {
  font-size: 15px;
  color: #374151;
  line-height: 1.6;
}

/* LIST */
.cms-list {
  list-style: none;
  margin-top: 8px;
}

.cms-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 15px;
  color: #1f2937;
  margin-bottom: 10px;
}

.cms-list i {
  color: #2563eb;
  font-size: 16px;
  margin-top: 2px;
}

/* ===== RIGHT RESULTS BOX ===== */
.cms-right {
  padding: 22px 22px 18px;
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
  border-radius: 14px;
}

.cms-result-title {
  font-size: 14px;
  font-weight: 600;
  color: #125e2f;
  margin-bottom: 14px;
}

.cms-result {
  margin-bottom: 16px;
}

.cms-result h4 {
  font-size: 24px;
  font-weight: 700;
  color: #16a34a;
  margin-bottom: 2px;
}

.cms-result p {
  font-size: 14px;
  color: #065f46;
}

/* ===== ANIMATION ===== */
.cms-animate {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.cms-animate.show {
  opacity: 1;
  transform: translateY(0);
}


/* ================= SECTION ================= */
.cloudcta-sec {
  padding: 60px 20px 60px;
  background: linear-gradient(140deg, #3f63ff 20%, #5b45f2 50%, #7c2de3 100%);
  color: #fff;
  text-align: center;
}

/* ================= HEADINGS ================= */
.cloudcta-title {
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.cloudcta-subtitle {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  color: lightcyan;
}

.cloudcta-desc {
  max-width: 670px;
  margin: 0 auto 42px;
  font-size: 18px;
  line-height: 1.65;
  opacity: 0.95;
}

/* ================= BUTTONS ================= */
.cloudcta-btn-wrap {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 46px;
}

.cloudcta-primary-btn {
  background: #ffffff;
  color: #1f45ff;
  padding: 14px 26px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  transition: all .3s ease;
}

.cloudcta-primary-btn i {
  transition: transform .3s ease;
}

.cloudcta-primary-btn:hover i {
  transform: translateX(6px);
}

/* CALCULATE BUTTON (BLUE STYLE) */
.cloudcta-calc-btn {
  background: #2f55ff;
  color: #fff;
  padding: 14px 26px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  border: 1px solid #4b6bff;
  cursor: pointer;
  transition: all .3s ease;
}

.cloudcta-calc-btn:hover {
  background: #2346e6;
}

.cloudcta-calc-btn.active {
  background: #1a35b8;
  border-color: #1a35b8;
}

/* ================= RESOURCE CARDS ================= */
.cloudcta-card-row {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.cloudcta-card {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px;
  padding: 18px 12px;
  /* SMALLER */
  text-align: center;
  transition: all .3s ease;
  cursor: pointer;
}

.cloudcta-card:hover {
  /* background:rgba(0,0,0,0.2); */
  background: rgba(185, 183, 183, 0.18);
}

.cloudcta-card-icon {
  font-size: 22px;
  margin-bottom: 8px;
}

.cloudcta-card-text {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
}

/* ================= RESPONSIVE ================= */
@media(max-width:900px) {
  .cloudcta-card-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:520px) {
  .cloudcta-title {
    font-size: 32px;
  }

  .cloudcta-btn-wrap {
    flex-direction: column;
  }
}