:root{
  --bg:#eef4ff;
  --surface:#ffffff;
  --text:#10224d;
  --muted:#5f6f92;
  --blue:#1155ff;
  --blue-2:#0d2d72;
  --green:#1f8b45;
  --orange:#f28c1b;
  --shadow:0 20px 55px rgba(16,34,77,.10);
  --radius:26px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(17,85,255,.09), transparent 26%),
    radial-gradient(circle at top right, rgba(35,139,61,.10), transparent 22%),
    linear-gradient(180deg, #f8fbff 0%, var(--bg) 100%);
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,textarea{font:inherit}
.container{max-width:1360px;margin:0 auto;padding:0 28px}
.topbar{
  position:sticky;top:0;z-index:30;
  backdrop-filter: blur(18px);
  background: rgba(255,255,255,.86);
  border-bottom:1px solid rgba(16,34,77,.08);
}
.topbar .inner{
  max-width:1360px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:16px 28px;
}
.brand{display:flex;align-items:center;gap:14px; min-width:260px;}
.brand img{height:80px;width:auto; object-fit:contain;}
.nav{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.nav a{
  color:#152654;font-weight:650;letter-spacing:.01em;
  position:relative;padding:8px 0;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:linear-gradient(90deg, var(--blue), #6aa7ff);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.nav a.active{color:var(--blue)}
.cta{
  background:linear-gradient(135deg, var(--blue), #0b43cc);
  color:#fff;padding:13px 20px;border-radius:14px;font-weight:700;
  box-shadow:0 12px 26px rgba(17,85,255,.26);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(17,85,255,.33)}
.menu-toggle{display:none;border:0;background:transparent;font-size:24px;color:var(--text)}

.hero-banner{
    position:relative;

    max-width:1360px;

    margin:24px auto;

    border-radius:34px;

    overflow:hidden;

    height:calc(100vh - 150px);

    min-height:620px;

    max-height:760px;

    box-shadow:0 25px 70px rgba(16,34,77,.18);
}

.hero-banner img{
    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center;

    position:absolute;
    inset:0;
}

.hero-overlay{
    position:absolute;
    inset:0;

    background:
      linear-gradient(
        90deg,
        rgba(7,16,40,.82) 0%,
        rgba(7,16,40,.55) 35%,
        rgba(7,16,40,.10) 65%,
        rgba(7,16,40,.02) 100%
      );
}

.hero-content{
    position:relative;
    z-index:2;

    max-width:620px;

    padding:80px 60px;
}

.hero-tag{
    display:inline-block;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(10px);

    font-size:14px;
    font-weight:800;

    letter-spacing:.14em;

    color:#ffffff;

    margin-bottom:24px;

    border:1px solid rgba(255,255,255,.18);
}

.hero-content h1{
    font-size:58px;

    line-height:1.05;

    margin-bottom:24px;
}

.hero-text{
    font-size:20px;

    line-height:1.8;

    color:rgba(255,255,255,.88);

    max-width:620px;
}

.hero-buttons{
    display:flex;
    gap:16px;

    margin-top:34px;

    flex-wrap:wrap;
}

.hero-buttons .btn.primary{
    background:#1155ff;

    color:#fff;
}

.hero-buttons .btn.ghost{
    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.25);

    color:#fff;

    backdrop-filter:blur(10px);
}

@media(max-width:1000px){

    .hero-banner{
        min-height:680px;
    }

    .hero-content{
        padding:80px 40px;
    }

    .hero-content h1{
        font-size:52px;
    }

}

@media(max-width:700px){

    .hero-banner{
        min-height:620px;
        border-radius:24px;
    }

    .hero-content{
        padding:60px 24px;
    }

    .hero-content h1{
        font-size:40px;
    }

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

}


.hero{
  max-width:1360px;margin:0 auto;padding:28px 28px 12px;
  display:grid;grid-template-columns:1.05fr 1.15fr;gap:30px;align-items:center;
}
.hero-copy{
  padding:34px 0 14px;
}
.eyebrow{
  font-size:16px;
  font-weight:800;
  letter-spacing:.14em;

  color:#1b46a1 !important;

  text-transform:uppercase;
  margin:0 0 14px;
}
.hero h1,.page-hero h1{
  margin:0 0 18px;
  font-size:clamp(42px, 5vw, 76px);
  line-height:.98;
  letter-spacing:-.03em;
}
.hero p,.page-hero p,.lead{
  font-size:22px;line-height:1.68;color:var(--muted);max-width:640px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.btn{
  padding:14px 22px;border-radius:14px;font-weight:750;
  display:inline-flex;align-items:center;gap:10px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{
  color:#fff;background:linear-gradient(135deg, var(--blue), #0d46d2);
  box-shadow:0 16px 32px rgba(17,85,255,.25);
}
.btn.ghost{
  color:var(--blue);background:#fff;border:1px solid rgba(17,85,255,.22);
  box-shadow:0 8px 24px rgba(16,34,77,.05);
}
.hero-visual{
  position:relative;
}
.hero-frame{
  border-radius:34px;overflow:hidden;background:#fff;
  box-shadow:var(--shadow);
  border:1px solid rgba(16,34,77,.05);
}
.hero-frame img{width:100%;height:100%;object-fit:cover}


.section{max-width:1360px;margin:0 auto;padding:28px 28px 10px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}
.section-head h2,.panel h2{
  margin:0;font-size:clamp(28px, 3vw, 42px);line-height:1.06;letter-spacing:-.03em;
}
.section-head p{margin:6px 0 0;color:var(--muted);max-width:760px;line-height:1.6}
.link{
  color:var(--blue);font-weight:760;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
}

.service-strip{
  background:#fff;border:1px solid rgba(16,34,77,.05);
  border-radius:28px;padding:12px;box-shadow:var(--shadow);
}
.service-strip img{width:100%;border-radius:20px}

.cards{
  display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
}
.card{
  background:#ffffff;

  border:1px solid rgba(16,34,77,.06);

  box-shadow:
    0 10px 30px rgba(16,34,77,.06);

  transition:all .3s ease;
}

.card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(16,34,77,.15)}
.card .thumb{height:270px;overflow:hidden}
.card .thumb img{width:100%;height:100%;object-fit:contain;padding:20px;}
.card .body{padding:20px 18px 20px}
.card h3{margin:0 0 8px;font-size:22px;line-height:1.14}
.card p{margin:0;color:var(--muted);line-height:1.62;font-size:15px}
.card .tag{
  display:inline-flex;align-items:center;gap:8px;
  margin-bottom:12px;font-size:12px;font-weight:800;
  color:#fff;background:var(--blue);padding:8px 11px;border-radius:999px;
}
.tag.green{background:var(--green)}
.tag.orange{background:var(--orange)}
.tag.indigo{background:#2748b7}

.stats{
  margin-top:16px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  padding:0;
}
.stat{
  background:linear-gradient(135deg, #0f2c6f, #0d4bd1);
  color:#fff;border-radius:24px;padding:22px 24px;box-shadow:0 18px 42px rgba(10,33,104,.18);
  border:1px solid rgba(255,255,255,.1);
}
.stat strong{display:block;font-size:34px;line-height:1}
.stat span{display:block;margin-top:8px;opacity:.88}

.split{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;
}
.panel{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(16,34,77,.08);
  border-radius:28px;box-shadow:var(--shadow);
  overflow:hidden;
}
.panel .content{padding:28px}
.panel .content p{color:var(--muted);line-height:1.72}
.panel .image{height:100%}
.panel .image img{width:100%;height:100%;object-fit:cover}
.feature-list{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px
}
.feature{
    background: linear-gradient(135deg, #eef5ff, #dfeeff);
    border: 1px solid rgba(17,85,255,.08);
    border-radius: 18px;
    padding: 18px;
    transition: all .3s ease;
}
.feature strong{display:block;margin-bottom:6px}
.feature span{font-size:14px;color:var(--muted);line-height:1.55}

.projects{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px
}
.project{
  background:#fff;border:1px solid rgba(16,34,77,.08);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)
}
.project .phead{padding:20px 20px 12px}
.project .phead h3{margin:0;font-size:21px}
.project .phead p{margin:6px 0 0;color:var(--muted)}
.project .pbody{padding:0 20px 22px;color:var(--muted);line-height:1.62}
.project .img{
  height:240px;position:relative;overflow:hidden;background:linear-gradient(180deg, #eff5ff, #d7e7ff);
}
.project .img img{width:100%;height:100%;object-fit:cover}
.project .img .overlay{
  position:absolute;inset:auto 16px 16px 16px;background:rgba(255,255,255,.76);
  border:1px solid rgba(255,255,255,.6);backdrop-filter: blur(8px);
  border-radius:16px;padding:12px 14px;font-size:14px;color:#14306f;font-weight:650;
}

.page-hero{
  max-width:1360px;margin:0 auto;padding:28px 28px 12px;
  display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;
}
.page-hero .stack{
  background:#fff;border:1px solid rgba(16,34,77,.08);border-radius:30px;box-shadow:var(--shadow);overflow:hidden;
}
.page-hero .stack img{width:100%;height:100%;object-fit:cover}
.page-block{
  max-width:1360px;margin:0 auto;padding:28px 28px 48px;
}

.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.form, .contact-card{
  background:#fff;border-radius:28px;box-shadow:var(--shadow);border:1px solid rgba(16,34,77,.08);
  padding:26px;
}
.form label{display:block;font-size:14px;font-weight:700;margin:16px 0 8px}
.form input,.form textarea{
  width:100%;padding:14px 15px;border-radius:14px;border:1px solid rgba(16,34,77,.14);
  background:#fbfcff;outline:none;color:var(--text)
}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form textarea:focus{border-color:rgba(17,85,255,.5);box-shadow:0 0 0 4px rgba(17,85,255,.10)}
.map{
  height:300px;border-radius:22px;overflow:hidden;background:
    radial-gradient(circle at 65% 42%, rgba(17,85,255,.2), transparent 35%),
    linear-gradient(135deg, #f3f8ff, #dfeaff);
  border:1px solid rgba(16,34,77,.06);position:relative;margin-top:16px
}
.map::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(17,85,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,85,255,.06) 1px, transparent 1px);
  background-size:44px 44px;
}
.map .pin{
  position:absolute;left:62%;top:38%;
  transform:translate(-50%,-100%);
  width:28px;height:28px;border-radius:50% 50% 50% 0;background:var(--blue);
  transform-origin:center;
  box-shadow:0 10px 20px rgba(17,85,255,.25);
}
.map .pin::after{
  content:"";position:absolute;inset:7px;background:#fff;border-radius:50%;
}
.footer{
  max-width:1360px;margin:0 auto;padding:0 28px 34px;color:var(--muted)
}

.reveal{opacity:0;transform:translateY(14px);transition:all .6s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width: 1220px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .projects{grid-template-columns:repeat(2,1fr)}
  .split,.page-hero,.hero,.contact-grid{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .nav{display:none}
  .nav.open{display:flex;flex-direction:column;align-items:flex-start;padding:0 0 12px}
  .menu-toggle{display:block}
  .topbar .inner{flex-wrap:wrap}
  .cards{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .projects{grid-template-columns:1fr}
  .feature-list{grid-template-columns:1fr}
  .section,.page-hero,.page-block,.hero{padding-left:18px;padding-right:18px}
  .hero h1,.page-hero h1{font-size:clamp(38px, 10vw, 56px)}
}

.vision-mission-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    margin-top:30px;
}

.vm-card{
    background:linear-gradient(135deg,#eef5ff,#dfeeff);
    border-radius:28px;
    padding:40px;
    border:1px solid rgba(17,85,255,.08);
    box-shadow:0 18px 45px rgba(0,0,0,.06);
    transition:all .3s ease;
}

.vm-card:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 50px rgba(17,85,255,.12);
}

.vm-icon{
    width:70px;
    height:70px;
    border-radius:18px;
    background:#1155ff;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    margin-bottom:25px;
}

.vm-card h3{
    font-size:34px;
    margin-bottom:20px;
    color:#10224d;
}

.vm-card p{
    font-size:18px;
    line-height:1.9;
    color:#5d6f92;
}

.mission-list{
    padding-left:20px;
    margin:0;
}

.mission-list li{
    margin-bottom:18px;
    color:#5d6f92;
    line-height:1.9;
    font-size:18px;
}

@media(max-width:900px){

    .vision-mission-grid{
        grid-template-columns:1fr;
    }

    .vm-card{
        padding:30px;
    }

    .vm-card h3{
        font-size:28px;
    }

}

.achievement-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:30px;
    max-width: 1400px;
}

.achievement-card{
    background:linear-gradient(135deg,#eef5ff,#dfeeff);
    border-radius:24px;
    padding:28px;
    border:1px solid rgba(17,85,255,.08);
    box-shadow:0 12px 30px rgba(0,0,0,.05);
    transition:all .3s ease;
    
    min-height: 260px;
}

.achievement-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 45px rgba(17,85,255,.12);
}

.achievement-top{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:25px;
}

.achievement-icon{
    width:44px;
    height:44px;
    min-width:44px;
    border-radius:18px;
    background:#1155ff;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
}

.achievement-card h3{
    font-size:34px;
    margin:0;
    color:#10224d;
    line-height:1.2;
}

.achievement-card p{
    font-size:17px;
    line-height:1.8;
    color:#5d6f92;
}

@media(max-width:1200px){

    .achievement-grid{
        grid-template-columns:repeat(2,1fr);
    }

}

@media(max-width:700px){

    .achievement-grid{
        grid-template-columns:1fr;
    }

    .achievement-card{
        padding:28px;
    }

}

/* Main page refinement */
.cards .card .thumb{
  height: 260px;
  background: linear-gradient(180deg, #f7fbff, #eef5ff);
}
.cards .card .body{
  padding: 18px 18px 22px;
}
.cards .card h3{
  font-size: 20px;
  margin-bottom: 10px;
}
.cards .card p{
  font-size: 15px;
  color: #5b6c90;
}


.cards{
  grid-template-columns:repeat(5,1fr)!important;
  align-items:stretch;
}

.card{
    background:#ffffff;

    border-radius:28px;

    overflow:hidden;

    border:1px solid rgba(16,34,77,.06);

    box-shadow:
      0 10px 30px rgba(16,34,77,.06);

    transition:all .3s ease;
}

.card:hover{
    transform:translateY(-8px);

    box-shadow:
      0 24px 60px rgba(16,34,77,.14);
}
.card .thumb{
    height:180px;

    padding:0;

    margin:0;

    display:flex;
    align-items:flex-end;
    justify-content:center;

    overflow:hidden;

    background:
      linear-gradient(
        180deg,
        #eef5ff 0%,
        #dfeeff 100%
      );
}

.card .thumb img{
    width:120%;

    height:120%;

    object-fit:contain;

    transform:scale(1.15);

    display:block;
      margin-bottom:-10px;
}
.card .body{
    padding:12px 22px 24px; margin-top:-10px;
}

.card h3{
    font-size:22px;

    line-height:1.2;

    margin-bottom:12px;

    color:#10224d;
}

.card p{
    font-size:15px;

    line-height:1.8;

    color:#5d6f92;
}

.card .body{
  padding:24px!important;
}

@media(max-width:1400px){
  .cards{
    grid-template-columns:repeat(2,1fr)!important;
  }
}

@media(max-width:900px){
  .cards{
    grid-template-columns:1fr!important;
  }
}

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


.strengths-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-top:30px;
    max-width: 1400px;
}

.strength-card{
    background:linear-gradient(135deg,#eef5ff,#dfeeff);
    border-radius:24px;
    padding:28px;
    border:1px solid rgba(17,85,255,.08);
    box-shadow:0 12px 30px rgba(0,0,0,.05);
    transition:all .3s ease;
    min-height:260px;
}

.strength-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 48px rgba(17,85,255,.12);
}

.strength-top{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:20px;
}

.strength-icon{
    width:44px;
    height:44px;
    min-width:44px;
    border-radius:20px;
    background:#1155ff;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
}

.strength-card h3{
    margin:0;
    font-size:28px;
    line-height:1.2;
    color:#10224d;
}

.strength-card p{
    margin:0;
    color:#5d6f92;
    font-size:17px;
    line-height:1.9;
}

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

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

    .strength-card{
        padding:28px;
    }
}


.leadership-section{
    margin-top:20px;
}

.leadership-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
    margin-top:35px;
}

.leader-card{
  display:flex;
    align-items:center;
    gap:30px;

    background:linear-gradient(135deg,#eef5ff,#dfeeff);
    border-radius:28px;
    padding:30px;

    border:1px solid rgba(17,85,255,.08);
    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:all .3s ease;
}

.leader-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 45px rgba(17,85,255,.12);
}

.leader-image{
    width:240px;
    min-width:240px;
    height:240px;

    border-radius:24px;
    overflow:hidden;

    background:#dbe9ff;
}

.leader-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.leader-content{
     flex:1;
}

.leader-content h3{
    margin:0;
    font-size:34px;
    color:#10224d;
}

.leader-role{
    display:block;
    margin-top:10px;
    margin-bottom:18px;
    color:#1155ff;
    font-weight:700;
    font-size:14px;
}

.leader-content p{
    color:#5d6f92;
    line-height:1.9;
    font-size:17px;
}

@media(max-width:1000px){

    .leadership-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:900px){

    .leader-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .leader-image{
        width:100%;
        height:320px;
    }

}

@media(max-width:700px){

    .leader-content{
        padding:24px;
    }

    .leader-content h3{
        font-size:26px;
    }

    .leader-image{
        height:260px;
    }

}

.about-company p{
  font-size:17px;
  line-height:1.85;
  color:#5d6f92;
}

.about-company .lead{
  font-size:17px;
  line-height:1.85;
}


.service-intro,
.why-choose-box,
.cta-strip{
    background: linear-gradient(135deg,#eef5ff,#dfeeff);
    border-radius: 28px;
    padding: 40px;
    border: 1px solid rgba(17,85,255,.08);
    box-shadow: 0 15px 40px rgba(0,0,0,.06);
}

.service-block{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 28px;
    align-items:center;
    background: linear-gradient(135deg,#eef5ff,#dfeeff);
    border-radius: 28px;
    padding: 30px;
    border: 1px solid rgba(17,85,255,.08);
    box-shadow: 0 15px 40px rgba(0,0,0,.06);
}

.service-block.reverse{
    grid-template-columns: .9fr 1.1fr;
}

.service-content h2,
.service-intro h2,
.why-choose-box h2,
.cta-strip h2{
    font-size: 36px;
    margin: 12px 0 18px;
    color:#10224d;
}

.service-content p,
.service-intro p,
.why-choose-box p,
.cta-strip p{
    color:#5d6f92;
    line-height:1.9;
    font-size:17px;
}

.service-content ul{
    margin:18px 0 0;
    padding-left:20px;
    color:#10224d;
    line-height:1.9;
    font-size:16px;
}

.service-note{
    margin-top:18px;
    background:#fff;
    border-radius:16px;
    padding:16px 18px;
    color:#5d6f92;
}

.service-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    background:#fff;
    border-radius:22px;
    padding:18px;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:18px;
    margin-top:28px;
}

.cta-strip{
    text-align:center;
}

@media(max-width:1100px){
    .service-block,
    .service-block.reverse{
        grid-template-columns:1fr;
    }

    .why-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

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

    .service-intro,
    .why-choose-box,
    .cta-strip,
    .service-block{
        padding:26px;
    }
}

.detail-service-card{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:40px;

    background:linear-gradient(135deg,#eef5ff,#dfeeff);

    border-radius:30px;
    padding:35px;

    margin-bottom:30px;

    border:1px solid rgba(17,85,255,.08);

    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.green-card{
    background:linear-gradient(135deg,#eef8ef,#e3f5e6);
}

.detail-image{
    display:flex;
    align-items:center;
    justify-content:center;
}

.detail-image img{
    width:100%;
    border-radius:20px;
}

.detail-top{
    display:flex;
    gap:18px;
    align-items:flex-start;
    margin-bottom:18px;
}

.detail-icon{
    width:60px;
    height:60px;

    min-width:60px;

    border-radius:14px;
    background:#1155ff;

    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#fff;
}

.detail-icon.green{
    background:#2aa24a;
}

.detail-content h2{
    font-size:34px;
    margin:0;
    color:#10224d;
    line-height:1.2;
}

.detail-subtitle{
    display:block;
    margin-top:8px;

    color:#2a52b6;
    font-size:18px;
    font-weight:700;
}

.detail-content p{
    color:#5d6f92;
    font-size:18px;
    line-height:1.9;
}

.detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-top:25px;
}

.detail-grid h4{
    font-size:20px;
    margin-bottom:14px;
    color:#10224d;
}

.detail-grid ul{
    padding-left:20px;
    margin:0;
}

.detail-grid li{
    margin-bottom:12px;
    color:#5d6f92;
    line-height:1.7;
}

@media(max-width:1100px){

    .detail-service-card{
        grid-template-columns:1fr;
    }

}

@media(max-width:700px){

    .detail-grid{
        grid-template-columns:1fr;
    }

    .detail-content h2{
        font-size:32px;
    }

}

.contact-info-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:30px;
}

.contact-info-card{
    background:linear-gradient(135deg,#305486,#32557e);

    border-radius:24px;
    padding:28px;

    color:#fff;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    transition:all .3s ease;
    
    min-height:260px;

    max-width:520px;

    margin:auto;
}

.contact-info-card:hover{
    transform:translateY(-5px);
    box-shadow:0 20px 50px rgba(230,81,0,.25);
}

.contact-top{
    display:flex;
    align-items:center;
    gap:18px;

    margin-bottom:24px;
}

.contact-icon{
    width:45px;
    height:45px;

    border-radius:20px;

    background:rgba(255,255,255,.15);

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:34px;
}

.contact-info-card h3{
    margin:0;

    font-size:34px;
    line-height:1.2;
}

.contact-info-card p{
    margin:0;

    font-size:14px;
    line-height:2;

    color:rgba(255,255,255,.95);
}

@media(max-width:1100px){

    .contact-info-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:700px){

    .contact-info-card{
        padding:28px;
    }

    .contact-info-card h3{
        font-size:28px;
    }

    .contact-info-card p{
        font-size:18px;
        line-height:1.8;
        color:rgba(255,255,255,.95);
    }

}

.footer{
    margin-top:50px;

    padding:20px 0;

    text-align:center;

    color:#5d6f92;

    font-size:15px;

    border-top:1px solid rgba(16,34,77,.08);
}
.google-map{
    height:500px;

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    border:1px solid rgba(17,85,255,.08);

    margin-top:25px;
}

.google-map iframe{
    width:100%;
    height:100%;
    display:block;
}

.cards{margin-top:20px}
.card{min-height:auto!important}
.card .thumb{height:240px!important}
.card .body{padding:20px!important}
.card p{margin-bottom:0!important}


/* =========================
   FINAL TYPOGRAPHY FIXES
   ========================= */

body{
  font-size:16px;
}

/* Hero */
.hero h1,
.page-hero h1{
  font-size:clamp(38px,4vw,62px);
}

.hero h2,
.page-hero h2{
  font-size:clamp(30px,3vw,46px);
}

.hero h3,
.page-hero h3{
  font-size:clamp(12px,1.2vw,24px);
  line-height:1.2;
}

/* Paragraph sizing */
.hero p,
.page-hero p,
.lead,
.about-company p,
.service-content p,
.service-intro p,
.detail-content p,
.panel .content p,
.project .pbody,
.card p{
  font-size:16px;
  line-height:1.8;
}

/* About page */
.about-company .company-lead{
  font-size:16px;
  line-height:1.85;
}

/* Section headings */
.section-head h2,
.panel h2,
.service-content h2,
.service-intro h2,
.why-choose-box h2,
.cta-strip h2,
.detail-content h2{
  font-size:clamp(26px,2.5vw,36px);
}

/* Cards */
.card h3{
  font-size:20px!important;
}

.card p{
  font-size:15px!important;
}

/* Detail pages */
.detail-content p{
  font-size:16px;
}

/* Stats */
.stat strong{
  font-size:30px;
}

.stat span{
  font-size:15px;
}

/* Leadership */
.leader-content h3{
  font-size:28px;
}

.leader-content p{
  font-size:16px;
}

/* Achievement / strength cards */
.achievement-card h3,
.strength-card h3{
  font-size:24px;
}

.achievement-card p,
.strength-card p{
  font-size:15px;
}

/* Contact cards */
.contact-info-card h3{
  font-size:28px;
}

.contact-info-card p{
  font-size:16px;
  line-height:1.8;
}