/* =========================================================
   ALMAHWR ALASLAI — Industrial Precision
   Automotive spare parts distribution
   Oswald (headings) + Roboto (body) · Indigo / Steel / Amber
   ========================================================= */

:root{
  --primary-color:#2A2E8F;   /* logo indigo */
  --primary-light:#4048C4;
  --secondary-color:#1B1E5C; /* deep navy */
  --secondary-light:#33377e;
  --accent-color:#F5A623;    /* amber CTA */
  --accent-dark:#D98A0F;
  --ink:#181a30;
  --muted:#5c6079;
  --line:#e4e6f2;
  --soft:#f4f5fb;            /* steel tint */
  --white:#ffffff;
  --head:'Oswald',sans-serif;
  --body:'Roboto',Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{overflow-x:hidden;max-width:100%}
body{
  font-family:var(--body);
  color:var(--ink);
  line-height:1.7;
  font-size:16px;
  background:var(--white);
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--head);
  font-weight:600;
  letter-spacing:.5px;
  color:var(--secondary-color);
  line-height:1.2;
}
p{color:var(--muted)}
a{text-decoration:none;transition:.25s}
img{max-width:100%}
.section-padding{padding:92px 0}
.bg-light-soft{background:var(--soft)}

/* ---------- Section headings ---------- */
.section-tag{
  display:inline-block;
  font-family:var(--head);
  text-transform:uppercase;
  letter-spacing:2.5px;
  font-size:.82rem;
  font-weight:600;
  color:var(--accent-dark);
  padding-bottom:6px;
  margin-bottom:14px;
  position:relative;
}
.section-tag::after{
  content:"";position:absolute;left:0;bottom:0;
  width:40px;height:3px;background:var(--accent-color);
}
.text-center .section-tag::after{left:50%;transform:translateX(-50%)}
.section-title{
  font-size:2.35rem;
  text-transform:uppercase;
  margin-bottom:18px;
}

/* ---------- Buttons ---------- */
.btn{
  font-family:var(--head);
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:500;
  border-radius:4px;
  padding:12px 28px;
  transition:.25s;
}
.btn-brand{
  background:var(--accent-color);
  color:#20130a;
  border:2px solid var(--accent-color);
}
.btn-brand:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff}
.btn-brand-outline{
  background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75);
}
.btn-brand-outline:hover{background:#fff;color:var(--primary-color)}
.btn-brand-secondary{
  background:var(--primary-color);color:#fff;border:2px solid var(--primary-color);
}
.btn-brand-secondary:hover{background:var(--secondary-color);border-color:var(--secondary-color);color:#fff}

/* ---------- Top bar ---------- */
.top-bar{
  background:var(--secondary-color);
  color:#c9cbe8;
  font-size:.85rem;
  padding:9px 0;
}
.top-bar a{color:#c9cbe8}
.top-bar a:hover{color:var(--accent-color)}
.top-bar i{color:var(--accent-color);margin-right:7px}

/* ---------- Navbar ---------- */
.main-navbar{
  background:#fff;
  padding:12px 0;
  box-shadow:0 2px 18px rgba(27,30,92,.08);
  border-top:3px solid var(--accent-color);
}
.main-navbar.scrolled{padding:7px 0}
.navbar-brand img{height:56px;width:auto}
.main-navbar .nav-link{
  font-family:var(--head);
  text-transform:uppercase;
  letter-spacing:.7px;
  font-weight:500;
  font-size:.95rem;
  color:var(--secondary-color);
  padding:8px 16px !important;
  position:relative;
}
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active{color:var(--primary-color)}
.main-navbar .nav-link.active::after{
  content:"";position:absolute;left:16px;right:16px;bottom:2px;height:2px;background:var(--accent-color);
}
.navbar-toggler{border:none;padding:4px 8px}
.navbar-toggler:focus{box-shadow:none}

/* dropdown */
.nav-products-row{display:flex;align-items:center}
.dropdown-menu{
  border:none;border-top:3px solid var(--accent-color);
  border-radius:0 0 6px 6px;
  box-shadow:0 12px 30px rgba(27,30,92,.16);
  padding:8px 0;margin-top:10px;
}
.dropdown-item{
  font-family:var(--head);text-transform:uppercase;letter-spacing:.5px;
  font-size:.9rem;font-weight:500;color:var(--secondary-color);padding:10px 22px;
}
.dropdown-item:hover{background:var(--soft);color:var(--primary-color)}
.mobile-cat-toggle{
  display:none;background:none;border:none;color:var(--secondary-color);font-size:1rem;padding:8px 10px;
}
.mobile-cat-toggle.open{transform:rotate(180deg)}

/* ---------- Hero slider ---------- */
.hero-slider .carousel-item{height:88vh;min-height:560px}
.hero-slide{
  height:88vh;min-height:560px;
  background-size:cover;background-position:center;
  display:flex;align-items:center;position:relative;
}
.hero-slide::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(20,22,60,.90) 0%,rgba(27,30,92,.72) 55%,rgba(27,30,92,.45) 100%);
}
.hero-slide .container{position:relative;z-index:2;max-width:1140px}
.hero-tag{
  display:inline-block;font-family:var(--head);text-transform:uppercase;
  letter-spacing:3px;font-size:.9rem;font-weight:600;color:var(--accent-color);
  border-left:4px solid var(--accent-color);padding-left:14px;margin-bottom:20px;
}
.hero-slide h1{
  color:#fff;font-size:3.6rem;text-transform:uppercase;max-width:820px;margin-bottom:20px;
}
.hero-slide p{color:#dfe0f2;font-size:1.18rem;max-width:640px;margin-bottom:30px}
.carousel-indicators [data-bs-target]{
  width:36px;height:5px;border-radius:0;background:rgba(255,255,255,.55);border:none;
}
.carousel-indicators .active{background:var(--accent-color)}
.carousel-control-prev,.carousel-control-next{width:6%;opacity:.65}
.carousel-control-prev:hover,.carousel-control-next:hover{opacity:1}

/* ---------- About ---------- */
.about-img-wrap{position:relative;border-radius:6px;overflow:hidden}
.about-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px}
.badge-float{
  position:absolute;left:22px;bottom:22px;
  background:var(--accent-color);color:#20130a;
  padding:18px 24px;border-radius:6px;font-family:var(--head);
  text-transform:uppercase;letter-spacing:.5px;font-weight:600;line-height:1.2;
  box-shadow:0 14px 30px rgba(27,30,92,.28);max-width:210px;
}
.badge-float .num{display:block;font-size:2.1rem;color:var(--secondary-color)}
.check-list{list-style:none;padding:0;margin:0}
.check-list li{position:relative;padding-left:34px;margin-bottom:14px;color:var(--ink);font-weight:500}
.check-list li::before{
  content:"\F26E";font-family:"bootstrap-icons";position:absolute;left:0;top:1px;
  color:var(--accent-dark);font-size:1.15rem;
}

/* ---------- Feature cards (Why choose us) ---------- */
.feature-card{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:6px;padding:34px 28px;height:100%;transition:.28s;
}
.feature-card:hover{
  border-left-color:var(--accent-color);
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(27,30,92,.14);
}
.feature-card .icon-wrap{
  width:60px;height:60px;border-radius:6px;background:var(--primary-color);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:.28s;
}
.feature-card .icon-wrap i{font-size:1.6rem;color:var(--accent-color)}
.feature-card:hover .icon-wrap{background:var(--secondary-color)}
.feature-card h5{font-size:1.2rem;text-transform:uppercase;margin-bottom:12px}
.feature-card p{margin:0;font-size:.96rem}

/* ---------- Page hero ---------- */
.page-hero{
  background-size:cover;background-position:center;position:relative;
  padding:130px 0 96px;text-align:center;
}
.page-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,60,.78),rgba(27,30,92,.86))}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{color:#fff;font-size:3rem;text-transform:uppercase;margin-bottom:12px}
.breadcrumb-custom{font-family:var(--head);text-transform:uppercase;letter-spacing:1.5px;font-size:.85rem;color:#dfe0f2}
.breadcrumb-custom a{color:var(--accent-color)}
.breadcrumb-custom a:hover{color:#fff}

/* ---------- Mission / Vision ---------- */
.mv-card{
  background:var(--secondary-color);color:#fff;border-radius:6px;padding:44px 38px;height:100%;
  position:relative;overflow:hidden;border-bottom:4px solid var(--accent-color);
}
.mv-card i{font-size:2.6rem;color:var(--accent-color);margin-bottom:16px;display:block}
.mv-card h4{color:#fff;text-transform:uppercase;font-size:1.5rem;margin-bottom:14px}
.mv-card p{color:#cdcfeb;margin:0}

/* ---------- Core values (unused but defined) ---------- */
.value-pill{background:#fff;border:1px solid var(--line);border-radius:6px;padding:28px 22px;text-align:center;height:100%;transition:.28s}
.value-pill:hover{border-color:var(--accent-color);transform:translateY(-5px);box-shadow:0 16px 34px rgba(27,30,92,.12)}
.value-pill i{font-size:2rem;color:var(--primary-color);margin-bottom:12px;display:block}
.value-pill h6{font-family:var(--head);text-transform:uppercase;letter-spacing:.5px;font-size:1.05rem}
.value-pill p{font-size:.9rem;margin:0}

/* ---------- Product / category cards ---------- */
.category-card-link{display:block;height:100%}
.product-card{
  background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;height:100%;transition:.28s;
}
.product-card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(27,30,92,.16)}
.product-img{height:230px;overflow:hidden;position:relative}
.product-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.product-card:hover .product-img img{transform:scale(1.07)}
.product-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(27,30,92,.35))}
.product-body{padding:22px 24px;border-top:3px solid var(--accent-color);text-align:center}
.product-body h5{margin:0;text-transform:uppercase;font-size:1.18rem;color:var(--secondary-color)}

/* ---------- Item cards ---------- */
.item-card{
  background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;height:100%;transition:.28s;
}
.item-card:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(27,30,92,.14);border-color:var(--primary-light)}
.item-img{height:210px;overflow:hidden}
.item-img img{width:100%;height:100%;object-fit:cover;transition:.5s}
.item-card:hover .item-img img{transform:scale(1.06)}
.item-body{padding:18px 20px;text-align:center}
.item-body h5{margin:0;font-size:1.05rem;text-transform:uppercase;letter-spacing:.5px;color:var(--secondary-color)}

/* ---------- CTA ---------- */
.cta-section{
  background-size:cover;background-position:center;position:relative;text-align:center;color:#fff;
}
.cta-section::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,22,60,.93),rgba(27,30,92,.80))}
.cta-section .container{position:relative;z-index:2}
.cta-section h2{color:#fff;text-transform:uppercase;font-size:2.3rem;margin-bottom:14px}
.cta-section p{color:#dfe0f2;font-size:1.12rem;max-width:640px;margin:0 auto}

/* ---------- Contact ---------- */
.contact-info-card{
  background:var(--secondary-color);color:#fff;border-radius:6px;padding:38px 32px;height:100%;
  border-top:4px solid var(--accent-color);
}
.contact-info-card h4{color:#fff;text-transform:uppercase;margin-bottom:26px}
.contact-info-item{display:flex;gap:16px;margin-bottom:24px;align-items:flex-start}
.ci-icon{
  flex:0 0 46px;width:46px;height:46px;border-radius:6px;background:var(--primary-color);
  display:flex;align-items:center;justify-content:center;
}
.ci-icon i{color:var(--accent-color);font-size:1.2rem}
.ci-text small{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:1px;font-size:.75rem;color:var(--accent-color)}
.ci-text span,.ci-text a{color:#dfe0f2;font-size:1rem;word-break:break-word}
.ci-text a:hover{color:#fff}
.contact-form-wrap{background:#fff;border:1px solid var(--line);border-radius:6px;padding:38px 34px;height:100%}
.contact-form-wrap h4{text-transform:uppercase}
.contact-form-wrap .form-label{color:var(--secondary-color);font-size:.9rem}
.contact-form-wrap .form-control{
  border:1px solid var(--line);border-radius:4px;padding:12px 14px;margin-bottom:4px;
  background:var(--soft);
}
.contact-form-wrap .form-control:focus{border-color:var(--primary-light);box-shadow:0 0 0 .18rem rgba(64,72,196,.14);background:#fff}
.contact-form-wrap .row>[class*=col-]{padding:0 10px 14px}

/* ---------- Footer ---------- */
.site-footer{background:var(--secondary-color);color:#c3c5e0}
.footer-top{padding:70px 0 46px}
.footer-brand-text{
  display:flex;align-items:center;gap:12px;font-family:var(--head);text-transform:uppercase;
  font-size:1.35rem;font-weight:600;color:transparent;margin-bottom:18px;letter-spacing:.5px;
}
.footer-brand-text img{height:60px;width:auto;background:transparent;border-radius:6px;padding:5px}
.footer-top p{color:#a9abcf;font-size:.95rem}
.site-footer h5{color:#fff;text-transform:uppercase;font-size:1.05rem;letter-spacing:1px;margin-bottom:20px;position:relative;padding-bottom:10px}
.site-footer h5::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;background:var(--accent-color)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer ul li{margin-bottom:12px;font-size:.95rem}
.site-footer ul li a{color:#c3c5e0}
.site-footer ul li a:hover{color:var(--accent-color)}
.site-footer i{color:var(--accent-color)}
.footer-bottom{background:rgba(0,0,0,.22);padding:20px 0;font-size:.88rem;color:#a9abcf}

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed;right:24px;bottom:24px;width:46px;height:46px;border-radius:6px;
  background:var(--primary-color);color:#fff;display:flex;align-items:center;justify-content:center;
  z-index:999;opacity:0;visibility:hidden;transition:.3s;font-size:1.2rem;
}
.back-to-top.show{opacity:1;visibility:visible}
.back-to-top:hover{background:var(--accent-color);color:#20130a}

/* ---------- Responsive ---------- */
@media (max-width:991px){
  .top-bar{display:none}
  .main-navbar .navbar-collapse{flex-basis:100%;background:#fff;margin-top:12px;padding:10px 4px;border-top:1px solid var(--line)}
  .main-navbar .nav-link.active::after{display:none}
  .nav-products-row{justify-content:space-between}
  .mobile-cat-toggle{display:inline-block}
  .dropdown-menu{box-shadow:none;border-top:none;margin-top:0;padding-left:14px}
  .hero-slide h1{font-size:2.5rem}
  .section-title{font-size:1.9rem}
  .section-padding{padding:64px 0}
  .btn{padding:11px 22px}
}
@media (max-width:575px){
  .hero-slide h1{font-size:2rem}
  .hero-slide p{font-size:1.02rem}
  .page-hero h1{font-size:2.2rem}
}