*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family: "Segoe UI", sans-serif;
  background:#f4f2fd;
  color:#0a2540;
}

/* ---------- HERO ---------- */
.hero{
  padding:70px 8%;
  
}

.hero-wrap{
  display:flex;
  align-items:center;
  gap:40px;
}

.hero-text{
  flex:1;
}

.hero-text h1{
  font-size:42px;
  line-height:1.39;
}

.hero-text h1 span{
  color:#1aa3c8;
}

.hero-text p{
  margin-top:18px;
  font-size:16px;
  max-width:520px;
  color:black;
}

.hero-buttons{
  margin-top:28px;
  display:flex;
  gap:14px;
}

.hero-buttons a{
  padding:12px 22px;
  border-radius:6px;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
}

.btn-primary{
  background:#1aa3c8;
  color:#fff;
}

.btn-outline{
  background:#fff;
  border:1px solid #cfd8e3;
  color:#0a2540;
}

.hero-img{
  flex:1;
  text-align:right;
}

.hero-img img{
  width:100%;
  max-width:520px;
}

/* ---------- SERVICES ---------- */
.services{
  padding:70px 8%;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center; /* ?? centers grid block */
}


.services h2{
  font-size:30px;
  margin-bottom:45px;
}

.service-grid{
  display: grid;
  grid-template-columns: repeat(3, 320px); /* fixed card width */
  gap: 25px;
  justify-content: center; /* ?? THIS CENTERS THE 3 BOXES */
}


.service-card{
  background:#fcfafd;
  border-radius:14px;
  padding:28px;
  box-shadow:0 12px 30px rgba(0,0,0,0.05);
  min-height:360px;

  display:flex;
  flex-direction:column;
  text-align:left;
}


.service-card img{
  height:90px;
  width:150px;
  margin-bottom:18px;
}

.service-card h4{
  font-size:16px;
  margin-bottom:12px;
}

.service-card p{
  font-size:14px;
  color:#6b7c8f;
  margin-bottom:10px;

  padding-left:22px;      /* ?? same start point */
  text-indent:-22px;      /* aligns i, ii, iii */
  line-height:1.5;
}


.service-card a{
  text-decoration:none;
  color:#1aa3c8;
  font-size:14px;
  font-weight:500;
  
  margin-top:auto;
  align-self:flex-start; /* change to center if needed */


}

.service-points{
  padding-left:20px;
}

.service-points li{
  font-size:14px;
  color:#6b7c8f;
  margin-bottom:10px;
  line-height:1.5;
}


/* ---------- WHY CHOOSE US ---------- */
.why{
  padding:30px 8%;
}

.why-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}

.why-text{
  flex:1;
  margin-left:80px;
}

.why-text h2{
  font-size:28px;
  margin-bottom:20px;
}

.why-text ul{
  list-style:none;
}

.why-text li{
  font-size:15px;
  margin-bottom:25px;
  padding-left:18px;
  position:relative;
  color:black;
}

.why-text li::before{
  content:"✔";
  position:absolute;
  left:0;
  color:#1aa3c8;
}

.why-img{
  flex:1;
  text-align:center;
}

.why-img img{
  width:100%;
  max-width:520px;
  border-radius:14px;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:992px){
  .hero-wrap,
  .why-wrap{
    flex-direction:column;
    text-align:center;
  }

  .hero-img,
  .why-img{
    text-align:center;
  }

  .hero-buttons{
    justify-content:center;
  }

  .hero-text p{
    margin-left:auto;
    margin-right:auto;
  }

  .service-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width: 768px) {

  /* STACK CONTENT */
  .why-wrap {
    flex-direction: column;
    gap: 25px;
  }

  /* RESET LEFT OFFSET */
  .why-text {
    margin-left: 0;
    width: 100%;
    text-align: left;
  }

  .why-text h2 {
    text-align: left;
  }

  /* LIST ALIGNMENT FIX */
  .why-text ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 0;
    position: relative;
    line-height: 1.6;
    font-size: 16px;
  }

  .why-text ul li::before {
    position: static;
    flex-shrink: 0;
    font-size: 14px;
    margin-top: 4px;
  }

  /* IMAGE CENTER */
  .why-img {
    width: 100%;
    text-align: center;
  }

  .why-img img {
    max-width: 90%;
    margin: 0 auto;
  }

}

@media(max-width:576px){
  .hero-text h1{
    font-size:30px;
  }

  .service-grid{
    grid-template-columns:1fr;
  }
}
/* ===== MOBILE VIEW ===== */
@media (max-width: 576px) {

  /* Body padding adjustments */
  body {
    overflow-x: hidden; /* prevent horizontal scroll */
  }

  /* HERO SECTION */
  .hero {
    padding: 40px 16px;
  }

  .hero-wrap {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .hero-text h1 {
    font-size: 26px;
    line-height: 1.3;
  }

  .hero-text p {
    font-size: 16px;
    line-height: 1.5;
    max-width: 100%;
    margin: 15px auto;
  }

  .hero-buttons {
    flex-direction: column;
    gap: 12px;
    justify-content: center;
  }

  .hero-buttons a {
    width: 100%;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
  }

  .hero-img img {
    max-width: 100%;
    height: auto;
  }

  /* SERVICES SECTION */
  .services {
    padding: 40px 16px;
  }

  .services h2 {
    font-size: 24px;
    margin-bottom: 30px;
  }

  .service-grid {
    grid-template-columns: 1fr; /* single column */
    gap: 20px;
  }

  .service-card {
    padding: 20px 16px;
    min-height: auto; /* let content decide height */
  }

  .service-card img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-bottom: 12px;
  }

  .service-card h4 {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .service-card p {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .service-card a {
    font-size: 14px;
    margin-top: auto; /* stays at bottom */
    align-self: flex-start;
  }

  /* WHY CHOOSE US SECTION */
  .why {
    padding: 30px 16px;
  }

  .why-wrap {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .why-text {
    margin-left: 0;
  }

  .why-text h2 {
    font-size: 22px;
    margin-bottom: 15px;
  }

  .why-text li {
    font-size: 14px;
    margin-bottom: 15px;
  }

  .why-img img {
    max-width: 100%;
    height: auto;
  }
}