/* =========================
   ROLAND Premium RTL (Cairo)
   Brand Colors: #bf9c73 (Gold) | #27353e (Dark)
   Clean + No duplicates
========================= */

/* ===== Root Tokens ===== */
:root{
  --ink:#0f172a;
  --muted:#64748b;

  --brand:#bf9c73;      /* gold */
  --brand2:#d9be9e;     /* light gold for gradients */
  --navy:#27353e;       /* dark */

  --bg:#f6f7fb;
  --card:#ffffff;
  --border: rgba(39, 53, 62, .12);

  --shadow-sm: 0 10px 24px rgba(191, 156, 115, 0.22);
  --shadow:    0 18px 44px rgba(191, 156, 115, 0.26);

  --r-xl: 24px;
  --r-lg: 18px;
  --r-md: 14px;
}

html{ scroll-behavior:smooth; }

body.roland-body{
  font-family: "Cairo","Noto Kufi Arabic",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(900px 700px at 12% 0%, rgba(191,156,115,.18), transparent 55%),
    radial-gradient(800px 600px at 92% 10%, rgba(39,53,62,.10), transparent 55%),
    var(--bg);
  color: var(--ink);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Better Arabic typography */
h1,h2,h3,h4,h5,h6{
  letter-spacing: 0;
  line-height: 1.25;
  font-weight: 900;
  color: var(--ink);
}
p{ color: var(--muted); font-weight: 600; }
.lead{ font-weight: 700; }

/* =========================
   Navbar
========================= */
.roland-nav{
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
.roland-nav .navbar-brand{
  color: var(--ink);
  font-weight: 1000;
  letter-spacing: .2px;
  display:flex;
  align-items:center;
  gap:10px;
}
.navbar-brand{ padding-top: 6px; padding-bottom: 6px; }

.roland-nav .navbar-toggler{
  border: 1px solid rgba(15,23,42,.16);
  border-radius: 12px;
}
.roland-nav .navbar-toggler-icon{
  filter: grayscale(1) contrast(1);
  opacity: .85;
}
.roland-nav .nav-link{
  color: rgba(15,23,42,.72);
  font-weight: 800;
  border-radius: 999px;
  padding: .5rem .95rem;
  transition: all .18s ease;
}
.roland-nav .nav-link:hover{
  background: rgba(39,53,62,.05);
  color: rgba(39,53,62,.95);
}
.roland-nav .nav-link.active{
  background: rgba(191,156,115,.16);
  border: 1px solid rgba(191,156,115,.26);
  color: rgba(39,53,62,.95);
}

/* Brand dot */
.brand-dot{
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff4e8, var(--brand));
  box-shadow: 0 10px 18px rgba(191,156,115,.28);
}

/* Logo */
.logo-brand{
  height: auto;
  width: 200px;
  object-fit: contain;
  transition: all .2s ease;
}
@media (max-width: 576px){
  .logo-brand{ width: 160px; }
}

/* =========================
   Buttons
========================= */
.btn-brand{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border: 0;
  color: var(--navy);
  font-weight: 900;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(191,156,115,.26);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn-brand:hover{
  filter: brightness(.98);
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(191,156,115,.30);
  color: var(--navy);
}
.btn-outline-light, .btn-outline-dark{
  border-radius: 14px;
  font-weight: 900;
}

/* Utility */
.py-8{ padding-top: 8rem !important; padding-bottom: 8rem !important; }

/* =========================
   Slider spacing under fixed navbar
========================= */
.roland-carousel{ margin-top: 78px; position: relative; }

/* =========================
   Hero Slider (Luxury)
========================= */
.roland-carousel .carousel-item{ position: relative; }

.hero-slide{
  min-height: clamp(520px, 72vh, 760px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
}

/* Dark luxury overlay + vignette */
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 50% 30%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(39,53,62,.82) 0%, rgba(39,53,62,.68) 45%, rgba(18,24,28,.90) 100%);
}

/* subtle golden glow behind content */
.hero-glow{
  position:absolute; inset:0;
  background: radial-gradient(600px 300px at 50% 55%, rgba(191,156,115,.18), transparent 60%);
  pointer-events:none;
  mix-blend-mode: screen;
  opacity: .75;
}

.hero-content{
  position: relative;
  z-index: 2;
  padding: 60px 12px;
}

.hero-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
}

.hero-title{
  color:#fff;
  font-weight: 1000;
  line-height: 1.1;
  margin: 16px 0 12px;
  font-size: clamp(32px, 4.2vw, 54px);
  text-shadow: 0 12px 28px rgba(0,0,0,.25);
}

.hero-subtitle{
  color: rgba(255,255,255,.88);
  font-size: clamp(16px, 1.4vw, 20px);
  margin: 0 auto 22px;
  max-width: 820px;
}

.hero-stats{
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hero-stats .stat{
  min-width: 150px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}
.stat-num{ color:#fff; font-weight: 1000; font-size: 18px; }
.stat-txt{ color: rgba(255,255,255,.75); font-size: 13px; margin-top: 2px; }

/* Indicators premium */
.roland-carousel .carousel-indicators [data-bs-target]{
  width: 22px;
  height: 6px;
  border-radius: 99px;
  opacity: .45;
  border: 0;
  background-color: rgba(255,255,255,.70);
}
.roland-carousel .carousel-indicators .active{
  opacity: 1;
  width: 34px;
  background-color: var(--brand);
  box-shadow: 0 8px 18px rgba(191,156,115,.28);
}

/* Controls premium circles */
.roland-carousel .carousel-control-prev,
.roland-carousel .carousel-control-next{
  width: 56px;
}
.roland-carousel .carousel-control-prev-icon,
.roland-carousel .carousel-control-next-icon{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background-color: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  background-size: 55% 55%;
}

/* Mobile tweaks */
@media (max-width: 576px){
  .hero-content{ padding: 48px 10px; }
  .hero-stats .stat{ min-width: 140px; }
}

/* =========================
   Section headings
========================= */
.section-head{ margin-bottom: 18px; }
.section-title{
  font-weight: 1000;
  font-size: 30px;
  margin-bottom: 10px;
  color: var(--ink);
}
.section-desc{
  color: var(--muted);
  max-width: 980px;
  margin-inline: auto;
  font-weight: 700;
}

/* =========================
   Cards
========================= */
.card-custom{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card-custom:hover{
  transform: translateY(-3px);
  border-color: rgba(191,156,115,.30);
  box-shadow: var(--shadow);
}
.icon-badge{
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(191,156,115,.16);
  border: 1px solid rgba(191,156,115,.30);
  margin: 0 auto;
  color: rgba(39,53,62,.92);
  font-size: 24px;
}

/* =========================
   Counters (Simple)
========================= */
.counter-box{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px 16px;
  text-align:center;
  box-shadow: var(--shadow-sm);
}
.counter{
  font-size: 44px;
  font-weight: 1000;
  color: var(--navy);
  line-height: 1;
}
.counter-box p{
  margin: 10px 0 0;
  color: var(--muted);
  font-weight: 900;
}

/* =========================
   Achievements Premium Section
========================= */
.achievements-section{
  position: relative;
  background:
    radial-gradient(900px 600px at 10% 0%, rgba(191,156,115,.16), transparent 55%),
    radial-gradient(900px 600px at 92% 10%, rgba(39,53,62,.10), transparent 55%),
    rgba(255,255,255,.55);
  border-top: 1px solid rgba(39,53,62,.08);
  border-bottom: 1px solid rgba(39,53,62,.08);
}

.ach-card{
  height: 100%;
  padding: 18px 18px 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(39,53,62,.10);
  box-shadow: 0 16px 34px rgba(15,23,42,.08);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}

/* subtle top highlight */
.ach-card::before{
  content:"";
  position:absolute;
  top:-60px;
  inset-inline-start:-80px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at 30% 30%, rgba(191,156,115,.20), transparent 60%);
  transform: rotate(12deg);
  pointer-events:none;
}

.ach-card:hover{
  transform: translateY(-3px);
  border-color: rgba(191,156,115,.30);
  box-shadow: 0 18px 44px rgba(15,23,42,.12);
}

.ach-icon{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(191,156,115,.16);
  border: 1px solid rgba(191,156,115,.30);
  color: rgba(39,53,62,.92);
  font-size: 22px;
  flex: 0 0 auto;
}

.ach-content{ min-width: 0; }

.ach-number{
  display:flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
  margin-bottom: 6px;
}

.ach-number .counter{
  font-size: 40px;
  font-weight: 1000;
  color: var(--navy);
  letter-spacing: .2px;
}

.ach-suffix{
  font-size: 18px;
  font-weight: 1000;
  color: rgba(39,53,62,.60);
}

.ach-title{
  font-weight: 1000;
  color: var(--ink);
  font-size: 15px;
  margin-bottom: 4px;
}

.ach-sub{
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
  opacity: .92;
}

/* Mobile tweaks */
@media (max-width: 576px){
  .ach-card{ padding: 16px; border-radius: 18px; }
  .ach-icon{ width: 48px; height: 48px; border-radius: 16px; }
  .ach-number .counter{ font-size: 34px; }
}

/* =========================
   Gallery (Multi + Modal)
========================= */
.gallery-multi .carousel-inner{ padding-bottom: 8px; }

.gallery-item{
  display: block;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
  cursor: zoom-in;
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery-item:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(0,0,0,.12);
}
.gallery-item img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  transition: transform .35s ease;
}
.gallery-item:hover img{ transform: scale(1.04); }

@media (max-width: 992px){ .gallery-item img{ height: 220px; } }
@media (max-width: 576px){ .gallery-item img{ height: 240px; } }

#galleryModalImage{
  max-height: 85vh;
  object-fit: contain;
}

#galleryModal .btn-dark{
  background: rgba(0,0,0,.55);
  border: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
#galleryModal .btn-dark:hover{ background: rgba(0,0,0,.85); }
#galleryModalCaption{
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent);
}

/* =========================
   Contact Page helpers (if used)
========================= */
.crumb{
  display:inline-flex; gap:10px; align-items:center;
  padding:10px 14px; border-radius:999px;
  background:#fff; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  font-size:14px;
}
.card-soft{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:20px;
  box-shadow:0 18px 45px rgba(0,0,0,.08);
}
.icon-pill{
  width:48px; height:48px;
  border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(191,156,115,.16);
  color: var(--navy);
  border:1px solid rgba(191,156,115,.26);
  flex:0 0 auto;
}
.form-control, .form-select{
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  padding: 12px 14px;
}
.form-control:focus, .form-select:focus{
  border-color: rgba(191,156,115,.85);
  box-shadow: 0 0 0 .2rem rgba(191,156,115,.22);
}
.btn-outline-dark{ border-radius:14px; padding: 12px 16px; }
.map-frame{
  width:100%;
  height: 320px;
  border:0;
  border-radius: 18px;
  overflow:hidden;
  background:#f3f4f6;
}
.hint{ font-size: 13px; color: #6b7280; }
.mini-links a{
  text-decoration:none;
  color: var(--navy);
  font-weight:900;
}
.mini-links a:hover{ text-decoration: underline; }

/* =========================
   Footer (ROLAND)
========================= */
.roland-footer{
  background: var(--navy);
  color: #e5e7eb;
  padding: 60px 0 25px;
  font-family: "Cairo", sans-serif;
}
.footer-logo{ height: auto; width: 200px; }
.footer-desc{
  color: #ffffff;
  font-size: 14px;
  line-height: 1.9;
  max-width: 340px;
}
.footer-title{
  font-weight: 1000;
  font-size: 15px;
  margin-bottom: 15px;
  color: #ffffff;
}

.footer-links,
.footer-contact{
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li,
.footer-contact li{
  margin-bottom: 10px;
  font-size: 14px;
}

.footer-links a,
.footer-contact a{
  color: #ffffff;
  text-decoration: none;
  transition: color .2s ease;
}
.footer-links a:hover,
.footer-contact a:hover{
  color: var(--brand);
}

.footer-social{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-social a{
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 17px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.footer-social a:hover{
  background: var(--brand);
  color: var(--navy);
  transform: translateY(-3px);
}

.footer-divider{
  border-color: rgba(255,255,255,.15);
  margin: 35px 0 15px;
}

.footer-bottom{
  text-align: center;
  font-size: 13px;
  color: #ffffff;
}
.footer-bottom p,
.footer-bottom a{
  text-align: center;
  font-size: 13px;
  color: #ffffff;
  direction: ltr;
}
.footer-bottom a:hover{ color: #fff; }

.footer-contact li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #ffffff;
}
.footer-contact i{
  color: var(--brand);
  font-size: 15px;
  min-width: 18px;
}
.footer-contact a{
  color: #ffffff;
  text-decoration: none;
  direction:ltr;
}
.footer-contact a:hover{ color: var(--brand); }
/* =========================
   Desktop Navbar Alignment
========================= */

/* وسط الصفحة */
.navbar .nav-center{
  gap: 28px;                 /* مسافة بين كل عنصر */
}

/* شكل اللينكات */
.navbar .nav-link{
  font-weight: 800;
  padding: 8px 6px;
  position: relative;
}

/* Navbar links – clean premium (no underline) */
.navbar .nav-link::after{
  display: none !important;
}



/* زر CTA ثابت على اليسار */
.navbar .btn-brand{
  white-space: nowrap;
  margin-inline-start: 12px;
}

/* موبايل: رجّع كل حاجة طبيعية */
@media (max-width: 991px){
  .navbar .nav-center{
    gap: 10px;
  }

  .navbar .btn-brand{
    margin-top: 12px;
    width: 100%;
    text-align: center;
  }
}
/* Phone & Email links fix inside RTL */
.contact-ltr,
.contact-ltr a{
  direction: ltr;
  unicode-bidi: plaintext;
  display: inline-block;
  text-align: left;
}


/* =========================
   Fixes (Desktop/Mobile) - No visual change
========================= */

/* Logo sizing on small screens to avoid overflow */
@media (max-width: 576px){
  .logo-brand{ width: 150px; }
}

/* Ensure phone/email render correctly in RTL layouts */
a[href^="tel:"], a[href^="mailto:"]{
  direction: ltr;
  unicode-bidi: plaintext;
}

.footer-contact a[href^="tel:"],
.footer-contact a[href^="mailto:"],
.card-soft a[href^="tel:"],
.card-soft a[href^="mailto:"]{
  display: inline-block;
  direction: ltr;
  unicode-bidi: plaintext;
  letter-spacing: .2px;
  font-weight: 800;
}
/* ======================
   Page Hero (Global)
====================== */
.page-hero-bg{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(39,53,62,.85),
      rgba(39,53,62,.75)
    ),
    url("../img/hero/page-hero.webp") center / cover no-repeat;
}

/* Overlay subtle luxury effect */
.page-hero-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      600px 300px at 50% 20%,
      rgba(191,156,115,.25),
      transparent 60%
    );
  pointer-events:none;
}

.page-hero-bg .container{
  position: relative;
  z-index: 2;
	top: 30px;
}

/* Text styling */
.page-hero-bg h1{
  color:#ffffff;
  font-weight: 900;
}

.page-hero-bg p{
  color: #ffffff !important;
  font-weight: 600;
  max-width: 720px;
  margin: 0 auto;
}

/* Breadcrumb inside hero */
.page-hero-bg .crumb{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
}

/* Mobile tweaks */
@media (max-width: 576px){
  .page-hero-bg{
    background-position: center top;
  }
}
/* Force white text inside page hero */



/* =========================
   Page Hero Backgrounds (All Pages)
   - Uses same .page-hero class across pages
========================= */
.page-hero{
  position: relative;
  color: #f1eee8; /* off-white */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 50% 10%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(39,53,62,.82) 0%, rgba(39,53,62,.62) 45%, rgba(15,23,42,.88) 100%);
  pointer-events:none;
}
.page-hero > .container,
.page-hero .container{
  position: relative;
  z-index: 1;
}
.page-hero .crumb{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  color: #f1eee8;
}
.page-hero .crumb a{ color: inherit; }
.page-hero .text-muted{ color: rgba(241,238,232,.78) !important; }
.page-hero__desc{ color: rgba(241,238,232,.82); font-weight: 600; }

/* Per-page hero images */
.page-hero--contact{ background-image: url("../img/hero/hero_slide_2.webp"); }
.page-hero--services{ background-image: url("../img/hero/hero_slide_1.webp"); }
.page-hero--logistics{ background-image: url("../img/hero/hero_slide_3.webp"); }

/* LTR for phone/email everywhere (RTL safe) */
a[href^="tel:"],
a[href^="mailto:"]{
  direction: ltr;
  unicode-bidi: plaintext;
  display: inline-block;
}

/* Remove nav underline effect if exists */
.roland-nav .nav-link::after,
.navbar .nav-link::after{
  display:none !important;
}