:root { --agc-navy:#08275f; --agc-blue:#247fe3; --agc-orange:#ff7628; --agc-ink:#10213e; --primary:var(--agc-blue); --secondary:var(--agc-orange); --dark:var(--agc-navy); }
body { color:var(--agc-ink); overflow-x:hidden; }
.topbar { background:linear-gradient(90deg,var(--agc-navy),#124a9d); }
.navbar { background:rgba(255,255,255,.98); box-shadow:0 8px 28px rgba(8,39,95,.09); }
.brand-logo { width:clamp(190px,22vw,300px); height:78px; object-fit:contain; object-position:left center; }
.navbar .nav-link { color:var(--agc-ink)!important; font-weight:700; }
.navbar .nav-link:hover,.navbar .nav-link.active { color:var(--agc-blue)!important; }
.dropdown-item:hover,.dropdown-item:focus { color:var(--agc-navy); background:#eef6ff; }
.btn-primary,.bg-primary { background-color:var(--agc-blue)!important; border-color:var(--agc-blue)!important; }
.text-primary { color:var(--agc-blue)!important; }
.footer-main { background:linear-gradient(135deg,var(--agc-navy),#124a9d); }

/* Reusable "card" component: homepage services grid + Careers job listings */
.service-card {
    background:#fff; border:1px solid #e4effd; border-radius:20px; padding:30px;
    height:100%; transition:all .3s ease; box-shadow:0 12px 35px rgba(8,39,95,.08); cursor:pointer;
}
.service-card:hover { transform:translateY(-6px); border-color:var(--agc-orange); box-shadow:0 18px 45px rgba(8,39,95,.16); }
.service-icon { display:grid; place-items:center; width:64px; height:64px; border-radius:18px; font-size:28px; color:var(--agc-blue); background:#eef6ff; margin-bottom:15px; }
.service-title { font-size:18px; font-weight:600; margin-bottom:10px; font-family:'Avenir', serif; }
.service-link { color:var(--agc-orange); font-weight:700; margin-top:18px; display:inline-flex; gap:8px; align-items:center; }
.service-desc { font-size:14px; color:#555; line-height:1.6; }
.section-title { position:relative; }
.section-title::before { background:var(--agc-orange)!important; }
[dir="rtl"] .section-title:not(.text-center)::before { left:auto; right:0; }
[dir="rtl"] .section-title:not(.text-center)::after {
    left:auto;
    right:0;
    animation-name:agc-section-title-run-rtl;
    -webkit-animation-name:agc-section-title-run-rtl;
}
@keyframes agc-section-title-run-rtl {
    0%,100% { right:0; }
    50% { right:145px; }
}
[dir="rtl"] .section-title.section-title-sm:not(.text-center)::after {
    animation-name:agc-section-title-run-sm-rtl;
    -webkit-animation-name:agc-section-title-run-sm-rtl;
}
@keyframes agc-section-title-run-sm-rtl {
    0%,100% { right:0; }
    50% { right:85px; }
}
.bg-header {
    position:relative;
    min-height:clamp(230px,32vw,390px);
    margin-bottom:clamp(35px,6vw,90px)!important;
    padding:clamp(35px,6vw,80px) 0!important;
    background-size:cover!important;
    background-position:center!important;
    background-attachment:scroll!important;
    overflow:hidden;
}
.bg-header::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,39,95,.88),rgba(36,127,227,.55)); }
.bg-header>.row { position:relative; z-index:1; margin:0; }
.bg-header .pt-lg-5,.bg-header .mt-lg-5 { margin-top:0!important; padding-top:0!important; }
.bg-header h1 { font-size:clamp(2rem,5vw,4rem); overflow-wrap:anywhere; }
/* ==========================================================================
   RTL typography (Dari / Pashto)
   Vazirmatn is a free, modern Arabic-script Google Font loaded from Google
   Fonts (see the <link> added to Layout/Front_Layout.blade.php) and used as
   a stand-in for the licensed Bahij Metra font. It only applies to
   [dir="rtl"] content, so the English (Nunito/Rubik) typography is
   untouched either way.
   >>> Once Bahij Metra's licensed font files are available: add an
   @font-face rule for "Bahij Metra" and put its name first in the
   font-family list below — nothing else needs to change. <<<
   ========================================================================== */
[dir="rtl"] body,
[dir="rtl"] .navbar .nav-link,
[dir="rtl"] .dropdown-item,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] span, [dir="rtl"] li, [dir="rtl"] label,
[dir="rtl"] .btn, [dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select {
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important;
}
[dir="rtl"] body { text-align:right; }
[dir="rtl"] .navbar-nav { margin-left:0!important; margin-right:auto; }
[dir="rtl"] .me-2,[dir="rtl"] .me-3 { margin-right:0!important; margin-left:.75rem!important; }
[dir="rtl"] .ps-4 { padding-left:0!important; padding-right:1.5rem!important; }
[dir="rtl"] .dropdown-menu { text-align:right; }
[dir="rtl"] .d-flex > i.me-2, [dir="rtl"] .d-flex > i.me-3 { margin-left:.5rem; }
[dir="rtl"] .bi-arrow-right { display:inline-block; transform:scaleX(-1); } /* flip the glyph to point left */
[dir="rtl"] .back-to-top { right:auto; left:45px; }
[dir="rtl"] .start-0 { left:auto!important; right:0!important; }
[dir="rtl"] .rounded-end { border-radius:.375rem 0 0 .375rem!important; }

/* ==========================================================================
   Fixed navbar on scroll
   main.js toggles ".sticky-top" + a "nav-fixed" class on <body> once the
   page scrolls past 45px. Bootstrap's own .sticky-top utility only stays
   stuck within its parent container (here, the same box as the hero
   slider) and then scrolls away — this is the "menu hides on scroll" bug.
   Forcing position:fixed here keeps it pinned to the viewport instead,
   and the body padding below stops it covering the page content.
   ========================================================================== */
.navbar.sticky-top {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    width: 100%;
    z-index: 1030;
    animation: agc-nav-slide-down .25s ease-out;
}
@keyframes agc-nav-slide-down { from { transform:translateY(-100%); } to { transform:translateY(0); } }
body.nav-fixed { padding-top: 92px; }
@media(max-width:991.98px){ body.nav-fixed { padding-top: 76px; } }

@media(max-width:1199.98px){.navbar{padding-left:1rem!important;padding-right:1rem!important}.navbar .nav-link{padding:.65rem!important}}
@media(max-width:991.98px){.brand-logo{height:64px;width:220px}.navbar-collapse{max-height:calc(100vh - 80px);overflow-y:auto;padding:.75rem 0}#selectlan{margin:.75rem 0 0!important;width:100%!important}}
@media(max-width:575.98px){.brand-logo{width:165px;height:50px}section{padding:45px 0!important;min-height:0!important}}