@media(max-width:992px){

.section-title{

font-size:28px;

}

}

@media(max-width:768px){

.section-title{

font-size:24px;

}

}/* ============================================================
   SAI'DU'A PROFESSIONAL FRONTEND POLISH
   Responsive visual layer for desktop, tablet and Android.
   Content and existing JavaScript behaviour are preserved.
============================================================ */
:root{
  --sui-green:#198754;
  --sui-green-dark:#0f5132;
  --sui-gold:#d9a400;
  --sui-bg:#f7faf8;
  --sui-border:#e0ebe5;
  --sui-shadow:0 14px 40px rgba(24,62,44,.08);
}
html{scroll-behavior:smooth}
body{background:linear-gradient(180deg,#f7faf8 0%,#eef5f1 100%);color:#22352b}
.navbar{backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);box-shadow:0 4px 24px rgba(20,55,39,.07);padding:10px 0;z-index:1030}
.navbar-brand{letter-spacing:.2px}
.nav-link{border-radius:10px;padding:.55rem .7rem!important}
.nav-link:hover{background:rgba(25,135,84,.07)}
.card,.list-group,.accordion,.contact-card,.info-card,.project-card{border:1px solid var(--sui-border);border-radius:17px;box-shadow:var(--sui-shadow)}
.card{overflow:hidden}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(24,62,44,.11)}
.btn{border-radius:11px;font-weight:700;min-height:42px}
.form-control,.form-select{border-color:#d7e4dd;border-radius:11px;min-height:46px}
.form-control:focus,.form-select:focus{border-color:#198754;box-shadow:0 0 0 .22rem rgba(25,135,84,.11)}
.section-title{letter-spacing:-.35px}
.section-subtitle{max-width:760px;margin-left:auto;margin-right:auto;line-height:1.7}
img,video,svg{max-width:100%;height:auto}
.hero-overlay .container{max-width:1220px}
.hero-overlay h1{line-height:1.05}
.hero-overlay p{line-height:1.65}
.footer,.site-footer{border-top:1px solid rgba(224,235,229,.9)}

@media(min-width:1200px){
  .container{max-width:1180px}
  .hero-overlay h1{font-size:clamp(42px,4.2vw,68px)}
  .hero-overlay p{font-size:18px;max-width:760px}
}

@media(max-width:991.98px){
  .navbar .container{padding-left:15px;padding-right:15px}
  .navbar-collapse{padding:8px 0 10px}
  .navbar-nav .nav-link{margin-left:0;margin-top:3px}
}

@media(max-width:768px){
  html,body{width:100%;overflow-x:hidden}
  .container,.container-fluid{width:100%;max-width:100%;padding-left:13px;padding-right:13px}
  .section-title{font-size:27px!important;line-height:1.18;margin-bottom:12px}
  .section-subtitle{font-size:14px;margin-bottom:25px;line-height:1.65}
  .navbar{padding:8px 0}
  .navbar-brand{font-size:19px}
  .navbar-brand img{width:42px!important;height:42px!important}
  .hero-image{height:74svh!important;min-height:500px;object-position:center}
  .hero-overlay{padding:20px 8px;text-align:center}
  .hero-overlay h1{font-size:clamp(28px,8.2vw,38px);margin-bottom:12px}
  .hero-overlay p{font-size:15px;max-width:100%;margin-left:auto;margin-right:auto}
  .hero-overlay .btn{width:auto;min-height:45px;padding:10px 18px;margin:4px}
  .carousel-control-prev-icon,.carousel-control-next-icon{width:40px;height:40px}
  .carousel-indicators button{width:9px;height:9px;margin:0 4px}
  .counter{font-size:36px}
  .list-group-item{padding:14px;font-size:15px}
  .row{--bs-gutter-x:.8rem;--bs-gutter-y:.8rem}
  .card-body{padding:16px}
  .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{white-space:nowrap}
  .btn{min-height:44px}
  .modal-dialog{margin:.65rem}
}

@media(max-width:420px){
  .container,.container-fluid{padding-left:9px;padding-right:9px}
  .hero-image{min-height:460px;height:70svh!important}
  .hero-overlay h1{font-size:27px}
  .hero-overlay p{font-size:14px}
  .hero-overlay .btn{width:100%;margin:4px 0}
  .section-title{font-size:24px!important}
  .counter{font-size:32px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}