/* ===== Section ===== */
.gsection{
  background:#05103A;
  padding: clamp(48px, 6vw, 70px) 0;
  color:#fff;
}
.gcontainer{
  width:min(1200px, 92%);
  margin-inline:auto;
}
.gtitle{
  text-align:center;
  color:#ffb367;
  font-weight:800;
  font-size:clamp(24px, 3.2vw, 40px);
  margin:0 0 28px;
}

/* ===== Slider Layout ===== */
.gslider{
  position:relative;
}
.gviewport{
  overflow:hidden;
}
.gtrack{
  display:flex;
  gap: clamp(16px, 2vw, 28px);
  will-change: transform;
  transition: transform .5s cubic-bezier(.22,.7,.24,1);
}

/* ===== Slide Card ===== */
.gslide{ flex: 0 0 auto; }
.gcard{
  background:#0b174e;
  border-radius:18px;
  box-shadow:0 18px 30px rgba(0,0,0,.28);
  overflow:hidden;
}
.gimg-wrap{
  aspect-ratio:1/1; /* مربّع مثل المثال */
  overflow:hidden;
}
.gimg-wrap img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .5s ease;
}
.gcard:hover .gimg-wrap img{ transform: scale(1.05); }

.gcaption{
  text-align:center;
  margin:12px 10px 16px;
  font-weight:700;
  font-size:clamp(16px, 2vw, 22px);
  color:#ffb367;
}

/* ===== Nav Buttons (أسفل يمين) ===== */
.gbtn {
  position: absolute;
  bottom: -60px;
  inset-inline-end: 10px;     /* يدعم RTL تلقائياً */
  top: auto;
  translate: 0 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ffb367;
  background: #ffb367;
  color: #05103A;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform .2s, background .2s;
  z-index: 5;
}

.gprev { margin-inline-end: 60px; } /* زر السابق يبعد عن التالي */
.gnext { margin-inline-end: 0; }

.gbtn:hover {
  background: #ffa94d;
  transform: scale(1.08);
}

/* أيقونات الأسهم */
.gi::before {
  content: "";
  display: inline-block;
  border: solid #05103A;
  border-width: 0 3px 3px 0;
  padding: 6px;
}
.gi-prev::before { transform: rotate(135deg); }
.gi-next::before { transform: rotate(-45deg); }

/* ===== Dots ===== */
.gdots{
  display:flex; gap:12px;
  justify-content:center;
  margin-top: 36px;  /* مسافة أكبر حتى لا تتداخل مع الأزرار */
}
.gdots button{
  width:14px; height:14px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:transparent; cursor:pointer;
}
.gdots button.active{ background:#ffb367; border-color:#ffb367; }

/* ===== Responsive ===== */
.gslide{ min-width: 260px; }

@media (max-width: 640px){
  .gbtn { bottom: -56px; }
  .gprev { margin-inline-end: 60px; }
}