/* ==========================================================
   NOIDA INVESTMENT + TRUSTED DEVELOPERS
   Bootstrap 5 + Custom CSS
========================================================== */

:root{
  --blue:#0752a5;
  --dark-blue:#07366e;
  --text:#143d6d;
  --muted:#5e7899;
  --light-blue:#eaf4ff;
  --border:#dbeafb;
  --gold:#e4a42a;
  --button:#ffc34c;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

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

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

.noida-container{
  width:100%;
  max-width:1410px;
  margin:0 auto;
  padding:30px 45px 8px;
}

/* ==========================================================
   TOP SECTION
========================================================== */

.investment-row{
  --bs-gutter-x:45px;
}

.investment-intro{
  padding-left:15px;
  padding-right:20px;
}

.section-kicker{
  display:flex;
  align-items:center;
  gap:12px;
  color:#b87700;
  font-size:14px;
  font-weight:800;
  letter-spacing:2px;
  line-height:1;
  margin-bottom:14px;
  white-space:nowrap;
}

.section-kicker span{
  display:block;
  width:28px;
  height:2px;
  background:#e9b34a;
}

.investment-intro h1{
  margin:0 0 11px;
  color:#0b468f;
  font-family:Georgia, "Times New Roman", serif;
  font-size:37px;
  line-height:.96;
  font-weight:700;
}

.investment-intro h1 span{
  color:#0b468f;
}

.investment-intro p{
  max-width:455px;
  margin:0 0 20px;
  color:#557496;
  font-size:16px;
  line-height:1.43;
}

.expert-btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  min-width:280px;
  padding:14px 25px;
  border-radius:7px;
  background:var(--button);
  color:#06437f;
  text-decoration:none;
  font-size:16px;
  font-weight:800;
  box-shadow:0 2px 5px rgba(190,130,20,.15);
  transition:.2s ease;
}

.expert-btn i{
  font-size:20px;
}

.expert-btn:hover{
  color:#06386d;
  background:#ffbd32;
  transform:translateY(-1px);
}

/* ==========================================================
   BENEFITS
========================================================== */

.benefits-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:38px;
  row-gap:36px;
  padding-top:1px;
}

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

.benefit-icon{
  flex:0 0 76px;
  width:76px;
  height:76px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f1f8ff;
  border:2px solid #d8eaff;
  color:#0964ce;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.6);
}

.benefit-icon i{
  font-size:29px;
  line-height:1;
}

.benefit-item h3{
  margin:0 0 5px;
  color:#123866;
  font-size:16px;
  line-height:1.12;
  font-weight:800;
}

.benefit-item p{
  margin:0;
  color:#6280a1;
  font-size:13px;
  line-height:1.35;
}

/* ==========================================================
   DEVELOPERS
========================================================== */

.developers-section{
  margin-top:2px;
}

.developer-heading{
  text-align:center;
}

.section-kicker.centered{
  justify-content:center;
  margin-bottom:10px;
  font-size:13px;
}

.developer-heading h2{
  margin:0;
  color:#123867;
  font-family:Georgia, "Times New Roman", serif;
  font-size:31px;
  line-height:1;
  font-weight:700;
}

.developer-heading p{
  margin:8px 0 18px;
  color:#6680a0;
  font-size:14px;
  line-height:1.3;
}

/* ==========================================================
   SLIDER
========================================================== */

.developer-slider-wrap{
  position:relative;
  width:100%;
  padding:0 17px;
}

.developer-viewport{
  width:100%;
  overflow:hidden;
}

.developer-track{
  display:flex;
  gap:24px;
  transform:translateX(0);
  transition:transform .4s ease;
  will-change:transform;
}

.developer-card{
  flex:0 0 calc((100% - 120px) / 6);
  height:100px;
  border:2px solid #e2eefc;
  border-radius:7px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  cursor:pointer;
  transition:.2s ease;
}

.developer-card:hover{
  border-color:#b7d5fa;
  box-shadow:0 5px 16px rgba(26,90,160,.10);
  transform:translateY(-2px);
}

.developer-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}

.slider-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:40px;
  height:40px;
  border-radius:50%;
  border:2px solid #d6e9ff;
  background:#fff;
  color:#1965bd;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  box-shadow:0 2px 5px rgba(18,81,145,.06);
  transition:.2s ease;
}

.slider-arrow:hover{
  border-color:#9ec8f5;
  color:#0752a5;
  box-shadow:0 4px 10px rgba(18,81,145,.12);
}

.slider-prev{
  left:0;
}

.slider-next{
  right:0;
}

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

@media (max-width:1199.98px){

  .noida-container{
    padding:28px 28px 10px;
  }

  .investment-row{
    --bs-gutter-x:28px;
  }

  .investment-intro h1{
    font-size:34px;
  }

  .investment-intro p{
    font-size:15px;
  }

  .benefits-grid{
    column-gap:22px;
    row-gap:25px;
  }

  .benefit-icon{
    flex-basis:65px;
    width:65px;
    height:65px;
  }

  .benefit-icon i{
    font-size:24px;
  }

  .benefit-item{
    gap:11px;
  }

  .benefit-item h3{
    font-size:14px;
  }

  .benefit-item p{
    font-size:11px;
  }

  .developer-card{
    flex-basis:calc((100% - 72px) / 4);
  }
}

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

@media (max-width:991.98px){

  .noida-container{
    padding:28px 18px 18px;
  }

  .investment-row{
    --bs-gutter-y:24px;
  }

  .investment-intro{
    padding-left:8px;
    padding-right:8px;
  }

  .section-kicker{
    font-size:11px;
    letter-spacing:1.5px;
    gap:8px;
  }

  .section-kicker span{
    width:20px;
  }

  .investment-intro h1{
    font-size:35px;
    line-height:1;
  }

  .investment-intro p{
    max-width:650px;
    font-size:15px;
    line-height:1.45;
  }

  .expert-btn{
    min-width:240px;
    padding:12px 18px;
    font-size:14px;
  }

  .benefits-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:25px 25px;
    padding:0 8px;
  }

  .benefit-icon{
    flex-basis:60px;
    width:60px;
    height:60px;
  }

  .benefit-icon i{
    font-size:23px;
  }

  .benefit-item h3{
    font-size:14px;
  }

  .benefit-item p{
    font-size:11px;
  }

  .developers-section{
    margin-top:12px;
  }

  .developer-heading h2{
    font-size:27px;
  }

  .developer-heading p{
    font-size:12px;
  }

  .developer-track{
    gap:15px;
  }

  .developer-card{
    flex-basis:calc((100% - 15px) / 2);
    height:100px;
  }
}

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

@media (max-width:575.98px){

  .noida-container{
    padding:24px 12px 15px;
  }

  .desktop-break{
    display:none;
  }

  .section-kicker{
    margin-bottom:10px;
    font-size:10px;
  }

  .investment-intro h1{
    font-size:30px;
    line-height:1.02;
  }

  .investment-intro p{
    font-size:14px;
    line-height:1.45;
    margin-bottom:16px;
  }

  .expert-btn{
    width:100%;
    max-width:280px;
    min-width:0;
    justify-content:space-between;
  }

  .benefits-grid{
    grid-template-columns:1fr 1fr;
    gap:20px 12px;
    padding:0 3px;
  }

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

  .benefit-icon{
    flex:0 0 51px;
    width:51px;
    height:51px;
  }

  .benefit-icon i{
    font-size:19px;
  }

  .benefit-item h3{
    font-size:12px;
    line-height:1.15;
    margin-bottom:4px;
  }

  .benefit-item p{
    font-size:10px;
    line-height:1.3;
  }

  .developer-heading{
    padding:0 5px;
  }

  .section-kicker.centered{
    font-size:9px;
    gap:7px;
  }

  .developer-heading h2{
    font-size:24px;
  }

  .developer-heading p{
    font-size:11px;
    margin-bottom:13px;
  }

  .developer-slider-wrap{
    padding:0 10px;
  }

  .developer-card{
    flex-basis:100%;
    height:100px;
  }

  .slider-arrow{
    width:32px;
    height:32px;
    font-size:14px;
  }

  .slider-prev{
    left:-2px;
  }

  .slider-next{
    right:-2px;
  }
}