/* =====================================================
   BGTI — Build Grade Trade Infra
   Main Stylesheet
   ===================================================== */

/* ---------- Design Tokens ---------- */
:root{
  --bgti-blue-dark:   #06355f;   /* deep navy - headings, footer */
  --bgti-blue:        #0b5faf;   /* primary brand blue - from logo */
  --bgti-blue-light:  #e8f2fb;   /* tint for section backgrounds */
  --bgti-amber:       #f2a71b;   /* accent - CTAs, highlights */
  --bgti-amber-dark:  #d88f0a;
  --bgti-ink:         #1c2b36;   /* body copy */
  --bgti-slate:       #5c6f7c;   /* secondary text */
  --bgti-fog:         #f5f8fb;   /* light section bg */
  --bgti-line:        #e3e9ee;   /* hairline borders */
  --bgti-white:       #ffffff;

  --font-head: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius: 6px;
  --shadow-sm: 0 2px 10px rgba(6,53,95,.06);
  --shadow-md: 0 10px 30px rgba(6,53,95,.10);
  --transition: all .25s ease;
}

/* ---------- Base ---------- */
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  color: var(--bgti-ink);
  font-size: 16px;
  line-height: 1.7;
  background: var(--bgti-white);
}
h1,h2,h3,h4,h5,h6{
  font-family: var(--font-head);
  color: var(--bgti-blue-dark);
  font-weight: 600;
  line-height: 1.25;
}
p{color: var(--bgti-slate); margin-bottom: 1rem;}
a{color: var(--bgti-blue); text-decoration:none; transition: var(--transition);}
a:hover{color: var(--bgti-amber-dark);}
img{max-width:100%; height:auto; display:block;}
.container{max-width:1200px;}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-head);
  font-size:.78rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color: var(--bgti-amber-dark);
  margin-bottom:.75rem;
}
.eyebrow::before{
  content:""; width:26px; height:2px; background: var(--bgti-amber);
  display:inline-block;
}
.section-title{font-size:2rem; margin-bottom:1rem;}
.section-lead{color:var(--bgti-slate); max-width:680px;}
.section-pad{padding:5rem 0;}
@media (max-width:767.98px){
  .section-pad{padding:3rem 0;}
  .section-title{font-size:1.6rem;}
}

/* ---------- Buttons ---------- */
.btn{
  font-family: var(--font-head);
  font-weight:600;
  font-size:.92rem;
  border-radius: var(--radius);
  padding:.7rem 1.6rem;
  letter-spacing:.01em;
  transition: var(--transition);
  border:2px solid transparent;
}
.btn-primary{
  background: var(--bgti-amber);
  border-color: var(--bgti-amber);
  color: var(--bgti-blue-dark);
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--bgti-amber-dark);
  border-color: var(--bgti-amber-dark);
  color: var(--bgti-blue-dark);
}
.btn-outline-light{
  border-color: rgba(255,255,255,.65);
  color:#fff;
}
.btn-outline-light:hover{
  background:#fff;
  color: var(--bgti-blue-dark);
  border-color:#fff;
}
.btn-outline-blue{
  border-color: var(--bgti-blue);
  color: var(--bgti-blue);
  background:transparent;
}
.btn-outline-blue:hover{
  background: var(--bgti-blue);
  color:#fff;
}
.btn-sm-pill{border-radius:50px; padding:.55rem 1.3rem; font-size:.85rem;}

/* ---------- Top Utility Bar ---------- */
.topbar{
  background: var(--bgti-blue-dark);
  color: rgba(255,255,255,.85);
  font-size:.82rem;
  padding:.5rem 0;
}
.topbar a{color: rgba(255,255,255,.85);}
.topbar a:hover{color: var(--bgti-amber);}
.topbar .divider{opacity:.3; margin:0 .6rem;}
.topbar .social-links a{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background: rgba(255,255,255,.08);
  margin-left:.4rem; color:#fff;
}
.topbar .social-links a:hover{background: var(--bgti-amber); color: var(--bgti-blue-dark);}

/* ---------- Navbar ---------- */
.navbar-bgti{
  background:#fff;
  padding:.7rem 0;
  box-shadow: var(--shadow-sm);
}
.navbar-bgti.is-sticky{
  position: sticky; top:0; z-index:1030;
}
.navbar-brand img{height:46px; width:auto;}
.navbar-bgti .nav-link{
  font-family: var(--font-head);
  font-weight:500;
  font-size:.92rem;
  color: var(--bgti-blue-dark);
  padding:.6rem .9rem !important;
  position:relative;
}
.navbar-bgti .nav-link.active,
.navbar-bgti .nav-link:hover{
  color: var(--bgti-blue);
}
.navbar-bgti .nav-link.active::after{
  content:"";
  position:absolute; left:.9rem; right:.9rem; bottom:.15rem;
  height:2px; background: var(--bgti-amber);
}
.navbar-bgti .btn{white-space:nowrap;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:
        linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
        url("../assets/images/bgti-slider-2.jpg"),
        linear-gradient(120deg, var(--bgti-blue-dark) 15%, var(--bgti-blue) 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  color:#fff;
  padding:7rem 0 6rem;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px);
  pointer-events:none;
}
.hero h1{
  color:#fff;
  font-size:2.9rem;
  font-weight:700;
  margin-bottom:1.1rem;
}
.hero p.lead{color: rgba(255,255,255,.85); font-size:1.08rem; max-width:560px;}
.hero .badge-cert{
  display:inline-flex; align-items:center; gap:.5rem;
  background: rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;
  padding:.4rem .9rem;
  border-radius:50px;
  font-size:.8rem;
  margin-bottom:1.3rem;
}
@media (max-width:767.98px){
  .hero{padding:4rem 0 3.5rem;}
  .hero h1{font-size:2rem;}
}

/* Page title banner (inner pages) */
.page-banner{
    position: relative;
    background:
        linear-gradient(rgba(5, 44, 86, 0.75), rgba(11, 95, 175, 0.75)),
        url("../assets/images/banner-image.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    padding: 3.2rem 0;
    text-align: center;
    overflow: hidden;
}
.page-banner::after{
  content:"";
  position:absolute; inset:0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 26px);
  pointer-events:none;
}
.page-banner .container{position:relative; z-index:1;}
.page-banner h1{color:#fff; margin-bottom:.5rem; font-size:2.2rem;}
.page-banner .breadcrumb{
  justify-content:center; margin-bottom:0; font-size:.9rem;
}
.page-banner .breadcrumb a{color: rgba(255,255,255,.75);}
.page-banner .breadcrumb-item.active{color: var(--bgti-amber);}
.page-banner .breadcrumb-item + .breadcrumb-item::before{color: rgba(255,255,255,.5);}

/* ---------- Feature List ---------- */
.check-list{list-style:none; padding:0; margin:0;}
.check-list li{
  display:flex; align-items:flex-start; gap:.6rem;
  margin-bottom:.65rem; color: var(--bgti-ink); font-size:.96rem;
}
.check-list li i{color: var(--bgti-amber-dark); margin-top:.2rem;}

/* ---------- Cards ---------- */
.icon-box{
  background:#F5F8FB;
  border:1px solid var(--bgti-line);
  border-radius: var(--radius);
  padding:2rem 1.6rem;
  height:100%;
  transition: var(--transition);
}
.icon-box:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.icon-box .icon-circle{
  width:56px; height:56px; border-radius:50%;
  background: var(--bgti-blue-light);
  color: var(--bgti-blue);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  margin-bottom:1.2rem;
}


.icon-box:hover .icon-circle{background: var(--bgti-amber); color: var(--bgti-blue-dark);}
.icon-box h4{font-size:1.1rem; margin-bottom:.6rem;}
.icon-box p{margin-bottom:.8rem; font-size:.93rem;}
.icon-box .box-link{font-family:var(--font-head); font-weight:600; font-size:.85rem;}

/* Service card with overlay style */
.service-card{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  height:auto !important;
  color:#fff;
  box-shadow: var(--shadow-sm);
}
.service-card img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.service-card:hover img{transform:scale(1.06);}
.service-card .overlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(6,53,95,.92) 10%, rgba(6,53,95,.15) 60%, rgba(6,53,95,.05));
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:1.6rem;
}
.service-card h4{color:#fff; margin-bottom:.5rem;}
.service-card p{color: rgba(255,255,255,.82); font-size:.9rem; margin-bottom:.7rem;}
.service-card .box-link{color: var(--bgti-amber); font-family:var(--font-head); font-weight:600; font-size:.85rem;}

/* Product card */
.product-card{
  background:#fff;
  border:1px solid var(--bgti-line);
  border-radius: var(--radius);
  overflow:hidden;
  height:100%;
  transition: var(--transition);
}
.product-card:hover{box-shadow: var(--shadow-md); transform: translateY(-4px);}
.product-card .product-img{height:auto !important; overflow:hidden;}
.product-card .product-img img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.product-card:hover .product-img img{transform:scale(1.08);}
.product-card .product-body{padding:1.3rem 1.4rem;}
.product-card h5{font-size:1.02rem; margin-bottom:.5rem;}
.product-card p{font-size:.88rem; margin-bottom:0;}

/* ---------- Stats / Counters ---------- */
.stats-strip{
  background: var(--bgti-blue-dark);
  color:#fff;
  padding:3.2rem 0;
  position:relative;
}
.stat-item{text-align:center; padding:0 .5rem;}
.stat-item .num{
  font-family: var(--font-head);
  font-size:2.6rem; font-weight:700; color: var(--bgti-amber);
  line-height:1;
}
.stat-item .label{font-size:.86rem; color: rgba(255,255,255,.78); margin-top:.5rem;}

/* ---------- CTA Band ---------- */
.cta-band{
  background: linear-gradient(120deg, var(--bgti-blue-dark), var(--bgti-blue));
  color:#fff;
  border-radius: var(--radius);
  padding:2.6rem;
}
.cta-band h3{color:#fff; margin-bottom:.4rem;}
.cta-band p{color: rgba(255,255,255,.82); margin-bottom:0;}

/* ---------- About / Split Sections ---------- */
.media-frame{
  position:relative; border-radius: var(--radius); overflow:hidden;
}
.experience-badge{
  position:absolute; bottom:-1px; right:-1px;
  background: var(--bgti-amber);
  color: var(--bgti-blue-dark);
  padding:1.1rem 1.4rem;
  text-align:center;
  border-top-left-radius: var(--radius);
}
.experience-badge .num{font-family:var(--font-head); font-weight:700; font-size:1.9rem; line-height:1;}
.experience-badge .label{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em;}

/* ---------- Team / JV ---------- */
.value-card{
  border:1px solid var(--bgti-line);
  border-radius: var(--radius);
  padding:1.8rem;
  height:100%;
  background: var(--bgti-fog);
}
.value-card .num{
  font-family:var(--font-head); font-weight:700; font-size:1.4rem;
  color: var(--bgti-blue-light); -webkit-text-stroke: 1px var(--bgti-blue);
  margin-bottom:.5rem; display:block;
}

/* ---------- Contact ---------- */
.contact-card{
  background:#F5F8FB; border:1px solid var(--bgti-line); border-radius: var(--radius);
  padding:1.8rem; height:100%;
}
.contact-card .icon-circle{width:48px; height:48px; font-size:1.2rem; margin-bottom:1rem;}
.contact-card h5{font-size:1rem;}
.contact-card p{font-size:.9rem; margin-bottom:.3rem;}
.form-control, .form-select{
  border-radius: var(--radius);
  border:1px solid var(--bgti-line);
  padding:.7rem .9rem;
  font-size:.94rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--bgti-blue);
  box-shadow: 0 0 0 .2rem rgba(11,95,175,.12);
}
.map-frame{border-radius: var(--radius); overflow:hidden; border:1px solid var(--bgti-line); line-height:0;}

/* ---------- Footer ---------- */
.site-footer{
  background: #082846;
  color: rgba(255,255,255,.72);
  font-size:.92rem;
}
.site-footer .footer-top{padding:4rem 0 2.5rem;}
.site-footer h6{
  color:#fff; font-family: var(--font-head); font-size:.92rem;
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:1.3rem;
}
.site-footer .footer-logo img{height:42px; margin-bottom:1rem;}
.site-footer a{color: rgba(255,255,255,.72);}
.site-footer a:hover{color: var(--bgti-amber);}
.site-footer ul{list-style:none; padding:0; margin:0;}
.site-footer ul li{margin-bottom:.65rem;}
.site-footer ul li i{width:16px; color: var(--bgti-amber); margin-right:.4rem;}
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background: rgba(255,255,255,.08); margin-right:.5rem;
}
.footer-social a:hover{background: var(--bgti-amber); color: var(--bgti-blue-dark);}
.newsletter-form .form-control{border-radius: var(--radius) 0 0 var(--radius); border:none;}
.newsletter-form .btn{border-radius: 0 var(--radius) var(--radius) 0;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:1.2rem 0;
  font-size:.82rem;
}
.footer-bottom a{color: rgba(255,255,255,.6);}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed; right:1.4rem; bottom:1.4rem;
  width:44px; height:44px; border-radius:50%;
  background: var(--bgti-amber); color: var(--bgti-blue-dark);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md);
  opacity:0; visibility:hidden; transform: translateY(10px);
  transition: var(--transition);
  z-index:1040; border:none;
}
.back-to-top.show{opacity:1; visibility:visible; transform:none;}
.back-to-top:hover{background: var(--bgti-amber-dark);}

/* ---------- Breadcrumb small utility ---------- */
.bg-tint{background: var(--bgti-blue-light);}
.bg-fog{background: var(--bgti-fog);}

/* ---------- Misc ---------- */
::selection{background: var(--bgti-amber); color: var(--bgti-blue-dark);}
.divider-line{width:60px; height:3px; background: var(--bgti-amber); border-radius:2px;}