/* ==============================
   HERO BANNER (AFTER NAVBAR)
============================== */

.hero-banner{
  position:relative;
  width:100%;
  height:70vh;              /* screenshot jesa */
  min-height:420px;
  overflow:hidden;

  /* background image */
  background-image:url("assets/solution-hero.jpg"); /* <-- replace later */
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* dark overlay */
.hero-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);  /* screenshot jesa dark layer */
}

/* center content */
.hero-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:0 18px;
}

/* big heading */
.hero-title{
  margin:0 0 12px;
  color:#fff;
  font-weight:800;
  letter-spacing:.5px;
  line-height:1.05;
  font-size:clamp(32px, 4.2vw, 72px);
  text-shadow:0 10px 30px rgba(0,0,0,.55);
}

/* small text */
.hero-subtitle{
  margin:0;
  color:#fff;
  font-weight:600;
  letter-spacing:.6px;
  font-size:clamp(14px, 1.3vw, 22px);
  opacity:.95;
  text-shadow:0 8px 22px rgba(0,0,0,.45);
}

/* Optional: subtle fade-in (nice & clean) */
.hero-content{
  animation:heroFade .8s ease both;
}
@keyframes heroFade{
  from{opacity:0; transform:translateY(12px);}
  to{opacity:1; transform:translateY(0);}
}

/* Responsive tweaks */
@media (max-width:768px){
  .hero-banner{ height:62vh; min-height:360px; }
}
@media (max-width:480px){
  .hero-banner{ height:58vh; min-height:320px; }
}


/* ==============================
   SOLUTIONS INTRO (IMAGE + TEXT)
============================== */

.sol-intro{
  padding:70px 18px;
  background:#ffffff;
}

.sol-intro-wrap{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:36px;
  align-items:center;
}

/* image box */
.sol-intro-media{
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.10);
  background:#eef3f9;
  position:relative;
}

.sol-intro-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio: 16 / 10;
  transform:scale(1.02);
}

/* text side */
.sol-intro-content{
  padding:6px 0;
}

.sol-intro-title{
  margin:0 0 14px;
  font-size:clamp(22px, 2.2vw, 34px);
  font-weight:900;
  letter-spacing:-.2px;
  color:#0b1b2a;
  line-height:1.15;
}

.sol-intro-content p{
  margin:0 0 12px;
  font-size:16px;
  line-height:1.75;
  color:#1f2a37;
}

.sol-intro-note{
  margin-top:14px;
  padding:14px 16px;
  border-left:4px solid #0b63b6;
  background:linear-gradient(90deg, rgba(11,99,182,.10), rgba(11,99,182,0));
  border-radius:12px;
  font-weight:700;
}

/* Optional button */
.sol-intro-actions{ margin-top:16px; }

.sol-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 18px;
  border-radius:12px;
  background:#0b63b6;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 14px 30px rgba(11,99,182,.25);
  transition:.2s ease;
}
.sol-btn:hover{ transform:translateY(-2px); }

/* Responsive */
@media (max-width: 980px){
  .sol-intro-wrap{
    grid-template-columns:1fr;
    gap:18px;
  }
  .sol-intro{ padding:56px 16px; }
  .sol-intro-media img{ aspect-ratio: 16 / 11; }
}


/* ==============================
   OUR CORE SOLUTIONS (7 CARDS)
   Layout:
   [1][2][3][4]
     [5][6][7]  (center aligned)
============================== */

.core-solutions{
  padding:70px 18px;
  background:#ffffff;
}

.core-wrap{
  max-width:1200px;
  margin:0 auto;
}

.core-title{
  text-align:center;
  margin:0 0 26px;
  font-size:clamp(24px, 2.2vw, 34px);
  font-weight:900;
  color:#0b1b2a;
  letter-spacing:-.2px;
}

/* ✅ 12-column grid for perfect centering */
.core-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:22px;
}

/* Card style (same screenshot feel) */
.core-card{
  background:#f3f8ff;                 /* light blue */
  border:1px solid #cfe3ff;           /* soft blue border */
  border-radius:18px;
  padding:26px 22px;
  box-shadow:0 18px 40px rgba(10, 40, 90, .08);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  transform:perspective(900px) rotateX(0) rotateY(0);
  will-change:transform;

  /* ✅ default width: 4 cards in first row */
  grid-column: span 3;
}

.core-card h3{
  margin:0 0 10px;
  font-size:18px;
  font-weight:900;
  color:#0b2a4a;
  line-height:1.25;
}

.core-card p{
  margin:0;
  font-size:15.5px;
  line-height:1.7;
  color:#253243;
}

/* hover effect: slight tilt + lift (no button) */
.core-card:hover{
  transform:perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-6px);
  box-shadow:0 26px 60px rgba(10, 40, 90, .14);
  border-color:#9fc6ff;
}

/* ✅ Second row: 3 cards centered (5,6,7) */
.core-card:nth-child(5){ grid-column: 2 / span 3; }
.core-card:nth-child(6){ grid-column: span 3; }
.core-card:nth-child(7){ grid-column: span 3; }

/* Responsive */
@media (max-width: 1100px){
  .core-grid{
    grid-template-columns:repeat(3, 1fr);
  }
  .core-card{
    grid-column:auto;
  }
  .core-card:nth-child(5),
  .core-card:nth-child(6),
  .core-card:nth-child(7){
    grid-column:auto;
  }
}

@media (max-width: 560px){
  .core-grid{ grid-template-columns:1fr; }
  .core-card{ padding:22px 18px; border-radius:16px; }
}


/* ==============================
   RO SOLUTIONS – PLAIN CONTENT
============================== */

.sol-textblock{
  padding:60px 18px;
  background:#ffffff;   /* pure white */
}

.sol-textwrap{
  max-width:1000px;
  margin:0 auto;
  padding:0;            /* no card padding */
  border:none;          /* no border */
  border-radius:0;      /* no rounded card */
  background:none;      /* remove blue bg */
  box-shadow:none;      /* remove shadow */
}

/* Heading */
.sol-texttitle{
  margin:0 0 16px;
  font-size:clamp(24px, 2.3vw, 34px);
  font-weight:900;
  color:#0b1b2a;
}

/* Paragraphs */
.sol-textwrap p{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.85;
  color:#1f2a37;
}

/* Lead line */
.sol-textlead{
  margin:20px 0 10px;
  font-weight:800;
  color:#0b2a4a;
}

/* Usage list */
.sol-list{
  margin:8px 0 18px;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px 26px;
}

.sol-list li{
  position:relative;
  padding-left:22px;
  font-weight:700;
  color:#1d2a3a;
}

.sol-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#0b63b6;
}

/* Final note (no card look, just accent line) */
.sol-textnote{
  margin-top:16px;
  padding-left:14px;
  border-left:3px solid #0b63b6;
  background:none;
  font-weight:600;
  color:#1f2a37;
}

/* Chips section stays clean */
.sol-chips{
  margin-top:26px;
}

.sol-chips-title{
  font-size:18px;
  font-weight:900;
  margin-bottom:12px;
  color:#0b2a4a;
}

/* Responsive */
@media (max-width:700px){
  .sol-list{
    grid-template-columns:1fr;
  }
}


/* ==============================
   SOFTENING – CLEAN TEXT STYLE
============================== */

.soft-textblock{
  padding:26px 18px 60px; /* gap fix included */
  background:#fff;
}

.soft-wrap{
  max-width:1000px;
  margin:0 auto;
}

/* center heading as you want */
.soft-title{
  margin:0 0 16px;
  text-align:center;
  font-size:clamp(24px, 2.3vw, 34px);
  font-weight:900;
  color:#0b1b2a;
  letter-spacing:-.2px;
}

/* paragraphs */
.soft-p{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.85;
  color:#1f2a37;
}

/* last paragraph with subtle accent (optional, looks professional) */
.soft-note{
  margin-top:14px;
  padding-left:14px;
  border-left:3px solid #0b63b6;
}


/* ==============================
   DM / MIXBED (TEXT LEFT + IMAGE RIGHT)
============================== */

.dm-split{
  padding:60px 18px;
  background:#ffffff;
}

.dm-wrap{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap:34px;
  align-items:center;
}

/* Text */
.dm-title{
  margin:0 0 14px;
  font-size:clamp(24px, 2.3vw, 34px);
  font-weight:900;
  color:#0b1b2a;
  letter-spacing:-.2px;
  line-height:1.15;
}

.dm-text p{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.85;
  color:#1f2a37;
}

.dm-lead{
  margin:18px 0 10px;
  font-weight:900;
  color:#0b2a4a;
}

/* Bullets */
.dm-list{
  margin:6px 0 16px 18px;
  padding:0 0 0 18px;
}

.dm-list li{
  margin:6px 0;
  font-size:15.5px;
  line-height:1.65;
  color:#1f2a37;
  font-weight:600;
}

/* Final line */
.dm-note{
  margin-top:16px;
  padding-left:14px;
  border-left:3px solid #0b63b6;
  font-weight:700;
}

/* Image */
.dm-media{
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(10,40,90,.12);
  background:#eef3f9;
}

.dm-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  aspect-ratio: 4 / 3;
}

/* Responsive */
@media (max-width: 980px){
  .dm-wrap{
    grid-template-columns:1fr;
    gap:18px;
  }
  .dm-media img{
    aspect-ratio: 16 / 10;
  }
}


/* ==============================
   CEDI – CLEAN TEXT SECTION (COMPLETE)
============================== */

.cedi-textblock{
  padding:60px 18px;
  background:#ffffff;
}

.cedi-wrap{
  max-width:1000px;
  margin:0 auto;
}

.cedi-title{
  margin:0 0 16px;
  font-size:clamp(24px, 2.3vw, 34px);
  font-weight:900;
  color:#0b1b2a;
  letter-spacing:-.2px;
  line-height:1.15;
}

.cedi-p{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.85;
  color:#1f2a37;
}

.cedi-lead{
  margin:18px 0 10px;
  font-weight:900;
  color:#0b2a4a;
}

/* ✅ List: one item per line (no side column) */
.cedi-list{
  margin:8px 0 0;
  padding:0;
  list-style:none;
  display:block;
}

.cedi-list li{
  position:relative;
  padding-left:22px;
  margin:0 0 10px;
  font-weight:700;
  color:#1d2a3a;
  line-height:1.7;
}

.cedi-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#0b63b6;
}


/* ==============================
   STP & ETP – CLEAN TEXT SECTION
============================== */

.stp-textblock{
  padding:36px 18px 60px;   /* 👈 top gap controlled */
  background:#ffffff;
}

.stp-wrap{
  max-width:1000px;
  margin:0 auto;
}

.stp-title{
  margin:0 0 16px;
  font-size:clamp(24px, 2.3vw, 34px);
  font-weight:900;
  color:#0b1b2a;
  letter-spacing:-.2px;
  line-height:1.15;
}

.stp-p{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.85;
  color:#1f2a37;
}

.stp-lead{
  margin:18px 0 10px;
  font-weight:900;
  color:#0b2a4a;
}

/* List – single column (professional) */
.stp-list{
  margin:8px 0 0;
  padding:0;
  list-style:none;
}

.stp-list li{
  position:relative;
  padding-left:22px;
  margin-bottom:10px;
  font-weight:700;
  color:#1d2a3a;
  line-height:1.7;
}

.stp-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#0b63b6;
}


/* ==============================
   EXPANSION & UPGRADATION – CLEAN TEXT
============================== */

.exp-textblock{
  padding:36px 18px 60px;   /* 👈 same gap control as STP */
  background:#ffffff;
}

.exp-wrap{
  max-width:1000px;
  margin:0 auto;
}

.exp-title{
  margin:0 0 16px;
  font-size:clamp(24px, 2.3vw, 34px);
  font-weight:900;
  color:#0b1b2a;
  letter-spacing:-.2px;
  line-height:1.15;
}

.exp-p{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.85;
  color:#1f2a37;
}


/* Section spacing */
/* GAP FIX: reduce space before Trust section */
.trust-section{
  padding:36px 18px 70px;   /* 👈 top gap kam kar diya */
  background:#ffffff;
}

/* subtitle under heading */
.trust-sub{
  max-width:900px;
  margin:0 auto 22px;
  text-align:center;     /* heading center already hai */
  font-size:16px;
  line-height:1.75;
  color:#1f2a37;
  font-weight:600;
}

/* ✅ 4 cards in one row (desktop) */
.core-grid-4{
  grid-template-columns:repeat(4, 1fr);
}

/* Responsive for 4-card grid */
@media (max-width: 1100px){
  .core-grid-4{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .core-grid-4{ grid-template-columns:1fr; }
}



/* ==============================
   CTA – ENGINEERING TEAM
============================== */

.cta-team{
  padding:50px 18px 70px;
  background:#ffffff;
}

.cta-wrap{
  max-width:1200px;
  margin:0 auto;
  border-radius:18px;
  border:1px solid #cfe3ff;
  background:linear-gradient(90deg, rgba(11,99,182,.10), rgba(11,99,182,0));
  box-shadow:0 18px 45px rgba(10,40,90,.08);
  padding:26px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.cta-title{
  margin:0 0 8px;
  font-size:clamp(20px, 2.0vw, 30px);
  font-weight:900;
  color:#0b1b2a;
  letter-spacing:-.2px;
}

.cta-text{
  margin:0 0 10px;
  font-size:16px;
  line-height:1.75;
  color:#1f2a37;
  max-width:820px;
}

.cta-strong{
  margin:0;
  font-size:16px;
  line-height:1.7;
  color:#0b2a4a;
  font-weight:800;
}

.cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:46px;
  padding:0 22px;
  border-radius:12px;
  background:#0b63b6;
  color:#ffffff;
  text-decoration:none;
  font-weight:900;
  letter-spacing:.2px;
  box-shadow:0 14px 30px rgba(11,99,182,.25);
  transition:transform .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}

.cta-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(11,99,182,.32);
}

/* Responsive */
@media (max-width: 820px){
  .cta-wrap{
    flex-direction:column;
    align-items:flex-start;
    padding:22px 18px;
  }
  .cta-right{
    width:100%;
  }
  .cta-btn{
    width:100%;
  }
}