:root{
  --visible: auto;   /* عدد البطاقات الظاهرة */
  --gap: 30px;    /* المسافة بين البطاقات */
}

body{
  font-family: 'Cairo', sans-serif !important;
}

.container{
  width: 80%;
  padding-top: 0px;
  margin: 0 auto;   /* يجعل الـ container في الوسط */
}

.slider-wrapper {
  width: 100%;
  min-height: 340px;
  overflow: visible;
  padding-top: 10px;
}

/* نافذة السلايدر */
.slider-window{
  width:80%;
  overflow:hidden;
  margin:5px auto;
  padding:0;
  touch-action: pan-y; /* يسمح بالسحب الأفقي بدون تعليق الصفحة */
}

.slider-track{
  display:flex;
  gap:var(--gap);
  transition:transform .55s ease;
  will-change:transform;
  transform:translateX(0);
  flex-wrap: nowrap;
}

.bg-wrapper {
    background-image: url('/ar/Training-Units/Boys-Colleges/JazanTC/SiteAssets/JS-CSS-styles/CollegeGate/SectionPattern.png');
    background-size: contain;  /* أو cover حسب رغبتك */
    background-repeat: no-repeat;
    background-position: left;
    height: auto !important;
    min-height: auto !important;
}

.slider img {
    height: 100%;
    object-fit: cover;    /* أهم سطر */
}

/* ===============================
   البطاقة
   =============================== */
/* الحسبة الدقيقة لعرض البطاقة */
.card {
  flex: 0 0 calc((100% - (var(--gap) * (var(--visible) - 1))) / var(--visible));
  min-width: 150px;
  min-height: 220px;
  box-sizing: border-box;
  background: #fff;
  padding: 22px 14px 0px;
  border-radius: 14px;
  text-align: center !important;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: transform .25s;
  margin-top: 6px;
}

.card:hover {
  transform:translatey(-6px);
  background-color: #20bbb4;
  color:#20bbb4;
  text-decoration: none;
}
.icon-wrapper{
  width:100px;
  height:100px;
  margin:0 auto;
  border-radius:50%;
  background: linear-gradient(to bottom, #e8f6f7 0%, #ffffff 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background .01s ease; /* مهم لنعومة الحركة */
}

/* عند hover على البطاقة – غيّر لون الدائرة والأيقونة */
.card:hover .icon-wrapper {
  background: #20bbb4; /* درجة أغمق من لون البطاقة */
}

/* === تمت إضافة هذا === */
.icon-wrapper img {
  width:68px;
  height:68px;
  object-fit:contain;
  transition: filter .01s ease;
}

.card:hover .icon-wrapper img {
  filter: brightness(0) invert(1); /* يجعلها بيضاء */
}

.card .icon{
  width:68px;
  height:68px;
  object-fit:contain;
}

.card .title{
  margin-top:16px;
  font-size:17px;
  font-weight:700;
  text-align: center;
  color:#20bbb4;
  text-decoration: none;
  background-color: transparent;
}

.card:hover .title {
  color: #fff;
  text-decoration: none;
}

.slider-dots{
  text-align:center;
  margin-top: -30px;
  margin-bottom: 40px;
}
.slider-dots span{
  display:inline-block;
  width: clamp(12px, 1.5vw, 16px);
  height: clamp(6px, 2vh, 15px);
  border-radius:50%;
  border: 1px solid #20bbb4;
  border-color: #20bbb4;
  margin:6px;
  cursor:pointer;
  transition:width .2s;
}

.slider-dots span.active{
  width:40px;
  border-radius:20px;
  background:#20bbb4;
}

.gates-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
  margin-top: 40px;
  padding:0 0px;
  
}

.box-header h3 {
    font-weight: 700 !important;
}

.gates-title{
  font-size: 24px;
  font-weight: 700 !important;
  color:#1c1c1c;
  align-items:center;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-left: 8px;
}

.gates-line{
  flex:1; height:2px;
  background:#20bbb4;
  margin:0 16px;
  opacity:1;
}

.gates-btn{
  display: flex;
  background: transparent;
  color:#20bbb4;
  align-items: center;   /* يوسّط النص عمودياً */
  justify-content: center; /* يوسّط النص أفقياً */
  padding: 6px 14px;
  height: 34px;          /* ارتفاع ثابت وجميل */
  width: 105px;
  border-radius: 20px;
  cursor:pointer;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700 !important;
}

.gates-btn:hover,
.gates-btn:focus,
.gates-btn:active {
  background: #20bbb4 !important;
  color: #fff !important;
  text-decoration: none !important;
}
/* ===============================
   التحكم بعدد البطاقات حسب حجم الشاشة
   =============================== */

@media (max-width: 600px) {
  :root { --visible: 1; }
}

@media (min-width: 601px) and (max-width: 850px) {
  :root { --visible: 2; }
}

@media (min-width: 851px) and (max-width: 1400px) {
  :root { --visible: 3; }
}

@media (min-width: 1401px) {
  :root { --visible: 4; }
}