/* ==========================================================
   PROP-KEYS — WHY NOIDA
   Bootstrap 5 + Custom CSS
   ========================================================== */

:root{
  --navy:#08285e;
  --navy-2:#123b73;
  --blue:#086ff1;
  --blue-soft:#eaf4ff;
  --blue-border:#cfe5ff;
  --gold:#c98a20;
  --white:#ffffff;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  width:100%;
}

body{
  overflow-x:hidden;
  background:#fff;
  color:var(--navy);
  font-family:Arial, Helvetica, sans-serif;
}

img{
  display:block;
  max-width:100%;
}

.noida-section{
  width:100%;
  background:#fff;
}

/* ==========================================================
   DESKTOP HERO
   Reference ratio is approximately 1495 x 450.
   The content and image remain separate so every text/icon
   remains editable HTML.
   ========================================================== */

.noida-hero{
  width:100%;
  min-height:450px;
  display:grid;
  grid-template-columns:minmax(0, 51.3%) minmax(0, 48.7%);
  overflow:hidden;
  background:#fff;
}

.noida-content{
  position:relative;
  z-index:2;
  padding:34px 30px 25px 70px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  background:
    linear-gradient(90deg,#fff 0%,#fff 76%,rgba(255,255,255,.96) 90%,rgba(255,255,255,.08) 100%);
}

.section-eyebrow{
  display:flex;
  align-items:center;
  gap:13px;
  color:var(--gold);
  font-size:15px;
  line-height:1;
  letter-spacing:2px;
  font-weight:800;
}

.eyebrow-line{
  display:block;
  width:43px;
  height:2px;
  background:#e1b04d;
  flex:0 0 auto;
}

.noida-content h1{
  margin:22px 0 10px;
  color:#08285e;
  font-family:Georgia,"Times New Roman",serif;
  font-size:39px;
  line-height:1.04;
  letter-spacing:-.8px;
  font-weight:700;
}

.noida-content h1 span{
  color:#096fe9;
}

.intro{
  max-width:700px;
  margin:0;
  color:#244d83;
  font-size:18px;
  line-height:1.34;
  font-weight:500;
}

.feature-grid{
  width:100%;
  max-width:735px;
  margin-top:23px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 2px minmax(0,1fr);
  column-gap:27px;
  align-items:center;
}

.feature-divider{
  width:2px;
  height:151px;
  background:#b7d5fa;
  border-radius:3px;
}

.feature-column{
  display:grid;
  gap:16px;
}

.feature-item{
  min-width:0;
  display:flex;
  align-items:center;
  gap:16px;
}

.feature-icon{
  flex:0 0 72px;
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:3px solid #d7eaff;
  border-radius:50%;
  background:linear-gradient(145deg,#f8fbff,#eaf4ff);
  color:#0870ef;
  font-size:31px;
  box-shadow:0 1px 4px rgba(0,84,180,.05);
}

.feature-text{
  min-width:0;
}

.feature-text h2{
  margin:0 0 3px;
  color:#073571;
  font-size:19px;
  line-height:1.14;
  font-weight:800;
}

.feature-text p{
  margin:0;
  color:#315e95;
  font-size:15px;
  line-height:1.2;
}

/* ==========================================================
   RIGHT IMAGE
   ========================================================== */

.noida-visual{
  position:relative;
  min-width:0;
  min-height:450px;
  overflow:hidden;
  background:#dceeff;
}

.noida-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}

.visual-gradient{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.18) 15%,
      rgba(4,31,64,.03) 58%,
      rgba(0,22,49,.34) 100%);
  pointer-events:none;
}

.visual-message{
  position:absolute;
  z-index:3;
  right:32px;
  bottom:26px;
  width:155px;
  color:#fff;
  text-align:center;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-weight:600;
  line-height:.92;
  text-shadow:0 2px 5px rgba(0,0,0,.5);
  transform:rotate(-2deg);
}

.visual-message span{
  display:block;
  font-size:38px;
}

.visual-message strong{
  display:block;
  margin-top:3px;
  font-size:37px;
  font-weight:600;
}

.message-swoosh{
  position:relative;
  display:block;
  width:130px;
  height:17px;
  margin:0 auto;
  border-bottom:6px solid #e7aa32;
  border-radius:50%;
  transform:rotate(-8deg);
}

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

@media (min-width:1600px){
  .noida-content{
    padding-left:82px;
    padding-top:39px;
  }

  .noida-content h1{
    font-size:43px;
  }

  .intro{
    font-size:20px;
  }

  .feature-grid{
    max-width:800px;
  }

  .feature-icon{
    width:76px;
    height:76px;
    flex-basis:76px;
  }

  .feature-text h2{
    font-size:20px;
  }
}

/* ==========================================================
   LAPTOP
   ========================================================== */

@media (max-width:1199.98px){
  .noida-content{
    padding-left:45px;
    padding-right:22px;
  }

  .noida-content h1{
    font-size:34px;
  }

  .intro{
    font-size:16px;
  }

  .feature-grid{
    column-gap:17px;
  }

  .feature-item{
    gap:11px;
  }

  .feature-icon{
    width:62px;
    height:62px;
    flex-basis:62px;
    font-size:26px;
  }

  .feature-text h2{
    font-size:16px;
  }

  .feature-text p{
    font-size:13px;
  }

  .visual-message{
    right:20px;
    width:135px;
  }

  .visual-message span{
    font-size:31px;
  }

  .visual-message strong{
    font-size:30px;
  }
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:991.98px){
  .noida-hero{
    grid-template-columns:1fr;
    min-height:0;
  }

  .noida-content{
    padding:32px 35px 30px;
    background:#fff;
  }

  .noida-content h1{
    font-size:38px;
  }

  .intro{
    max-width:850px;
    font-size:17px;
  }

  .feature-grid{
    max-width:850px;
  }

  .noida-visual{
    height:390px;
    min-height:390px;
  }

  .visual-message{
    right:32px;
    bottom:25px;
    width:170px;
  }
}

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

@media (max-width:767.98px){

  .noida-content{
    padding:25px 17px 24px;
  }

  .section-eyebrow{
    justify-content:center;
    gap:8px;
    font-size:10px;
    letter-spacing:1.35px;
  }

  .eyebrow-line{
    width:34px;
    height:1.5px;
  }

  .noida-content h1{
    margin:14px 0 10px;
    font-size:30px;
    line-height:1.03;
    letter-spacing:-.35px;
  }

  .intro{
    font-size:14px;
    line-height:1.43;
  }

  .feature-grid{
    margin-top:20px;
    grid-template-columns:1fr 1fr;
    gap:15px 10px;
  }

  .feature-divider{
    display:none;
  }

  .feature-column{
    gap:14px;
  }

  .feature-item{
    align-items:flex-start;
    gap:9px;
  }

  .feature-icon{
    flex:0 0 47px;
    width:47px;
    height:47px;
    border-width:2px;
    font-size:20px;
  }

  .feature-text h2{
    margin-top:2px;
    font-size:12px;
    line-height:1.14;
  }

  .feature-text p{
    font-size:9.5px;
    line-height:1.22;
  }

  .noida-visual{
    height:360px;
    min-height:360px;
  }

  .noida-visual img{
    object-position:center center;
  }

  .visual-gradient{
    background:
      linear-gradient(180deg,
        rgba(2,25,52,.02) 25%,
        rgba(2,25,52,.16) 60%,
        rgba(0,22,49,.62) 100%);
  }

  .visual-message{
    right:13px;
    bottom:18px;
    width:150px;
  }

  .visual-message span{
    font-size:28px;
  }

  .visual-message strong{
    font-size:27px;
  }

  .message-swoosh{
    width:112px;
    border-bottom-width:5px;
  }
}

/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media (max-width:390px){

  .noida-content{
    padding-left:13px;
    padding-right:13px;
  }

  .noida-content h1{
    font-size:27px;
  }

  .intro{
    font-size:13px;
  }

  .feature-grid{
    gap:12px 7px;
  }

  .feature-icon{
    flex-basis:42px;
    width:42px;
    height:42px;
    font-size:18px;
  }

  .feature-text h2{
    font-size:11px;
  }

  .feature-text p{
    font-size:8.7px;
  }

  .noida-visual{
    height:330px;
    min-height:330px;
  }

  .visual-message{
    right:8px;
    bottom:15px;
    width:135px;
  }

  .visual-message span{
    font-size:25px;
  }

  .visual-message strong{
    font-size:24px;
  }
}