*{
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
}

body{
  background-color: #F0F0F0;
  overflow-x: hidden;
}



:root{
    --bold : bold;
    --sbold : sbold;
    --direction : rtl;
    --scolor : #0D395D;
    --sbgcolor : #F0F0F0;
    --sbgscolor : #1C77C3;
}


/* Start Scroll Colors */
/* width */
::-webkit-scrollbar {
  width: 10px;

}

/* Track */
::-webkit-scrollbar-track {
  background: linear-gradient(--sbgcolor , --sbgscolor );
		border-radius:20px !important ;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #2072AF;
		border-radius:20px !important ;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
/* Start Scroll Colors */


.Navbar{
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 200;
}

.Navbar_Data{
    width: 80%;
    margin: 30px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.Navbar_Data .Links ul{
    list-style: none;
     direction: var(--direction);
}

.Navbar_Data .Links ul li{
    display: inline-block;
    margin-left: 20px;
   
}

.Navbar_Data .Links ul li a{
    font-family: var(--bold);
    color: #fff;
}

.Hero_section{
    height: 100vh;
    background-image: url('../images/hero-section.png');
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.Hero_section .Hero_Data{
    width:80%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: end;
    flex-direction: column;
    
}

.Navbar .Navbar_Data .lang{
    color: #fff;
    font-family: var(--bold);
}

.Hero_section .Hero_Data h1{
    font-family: var(--bold);
    font-size: 36px;
    color: #fff;
    width: 482px;
    text-align: right;
}

.Hero_section .Hero_Data a{
    display: flex;
    gap: 10px;
    align-items: center;
    background-color: var(--sbgcolor);
    color: var(--sbgscolor);
    width: 200px;
    justify-content: center;
    padding: 10px;
    font-family: var(--bold);
    border-radius:5px;
    text-align: right;
    margin-top: 30px;
}

.championships{
    margin-top: 50px;
}
.championships_data{
    width: 80%;
    margin: 0 auto;
}

.championships{
    position: relative;
}
.championships .championships_data .championshipsSwiper .championships-slide{
    height: 460px;
     background: linear-gradient(var(--scolor) , var(--sbgscolor));
}
.championships .championships_data .championshipsSwiper .championships-slide .championships-slide_data{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    width:90%;
    margin:0 auto;
    gap:20px;
    
}

.championships .championships_data .championshipsSwiper .championships-slide .championships-slide_data h3{
    font-size: 24px;
    color: #fff;
    font-family: var(--bold);
}
.championships .championships_data .championshipsSwiper .championships-slide .championships-slide_data .sub_title{
    font-size: 20px;
    font-family: var(--bold);
    color: #fff;
}

.championships .championships_data .championshipsSwiper .championships-slide .championships-slide_data .desc{
    font-family: var(--sbold);
    color: #fff;
    font-size: 16px;
    text-align: right;
    width: 900px;
}

.championships .championships_data .championshipsSwiper .championships-slide .championships-slide_data .championships_info {
    display: flex;
    gap:20px;
    flex-direction: row-reverse;
}
.championships .championships_data .championshipsSwiper .championships-slide .championships-slide_data .championships_info a{
    display: flex;
    background: var(--sbgcolor);
    align-items: center;
    justify-content: end;
    width:260px;
    padding: 10px;
    border-radius: 10px;
    gap: 10px;
    color: var(--scolor);
    font-family: var(--bold);
}
.championships .championships_data .championshipsSwiper .championships-slide .championships-slide_data .action{
    width: 170px;
    color: var(--scolor);
    text-align: center;
    font-family: var(--bold);
    background: var(--sbgcolor);
    padding: 10px;
    border-radius: 10px;
}

.championships  .chees_img{
    position: absolute;
    bottom: -60px;
    z-index: 2;
    left: 0;
}


 /* ===== TOURNAMENTS SECTION ===== */
    .tournaments-section {
      width: 80%;
      margin: 50px auto;
    }
 
    /* ===== SECTION HEADER ===== */
    .tournaments-section__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      flex-direction: row-reverse;
    }
 
    .tournaments-section__title {
      font-size: 22px;
      font-family: 800;
      color: #1a202c;
      font-family: var(--bold);
    }
 
    .tournaments-section__view-all-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--sbgscolor);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 10px 18px;
      font-family: var(--bold);
      font-size: 14px;
      font-family: 700;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s;
    }
 
    .tournaments-section__view-all-btn:hover {
      background: #1740a8;
    }
 
    .tournaments-section__view-all-btn svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
 
    /* ===== SWIPER WRAPPER ===== */
    .tournaments-section__swiper-wrapper {
      position: relative;
    }
 
    .tournaments-section__swiper {
      overflow: hidden;
      border-radius: 12px;
    }
 
    /* ===== CARD ===== */
    .tournaments-section__card {
      background: #fff;
      border-radius: 12px;
      padding: 20px 24px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 6px rgba(0,0,0,0.06);
      user-select: none;
      direction: var(--direction);
    }
 
    /* Date row */
    .tournaments-section__card-date {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-family: 600;
      color: #374151;
      margin-bottom: 14px;
      font-family: var(--bold);
    }
 
    .tournaments-section__card-date svg {
      color: #6b7280;
      flex-shrink: 0;
    }
 
    /* Title */
    .tournaments-section__card-title {
      font-size: 17px;
      font-family: 800;
      color: #111827;
      margin-bottom: 6px;
      font-family: var(--bold);
    }
 
    /* Description */
    .tournaments-section__card-desc {
      font-size: 13px;
      color: #6b7280;
      line-height: 1.7;
      margin-bottom: 18px;
      font-family: var(--sbold);
    }
 
    /* Stats row */
    .tournaments-section__card-stats {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }
 
    .tournaments-section__stat-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 7px 14px;
      font-size: 13px;
      font-family: 700;
      color: #374151;
      background: #f9fafb;
      font-family: var(--bold);
    }
 
    .tournaments-section__stat-badge img {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }
 
    /* Stat icon placeholders */
    .tournaments-section__stat-icon {
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
 
    /* Chess icon (SVG inline) */
    .tournaments-section__chess-icon {
      display: inline-grid;
      grid-template-columns: repeat(4,5px);
      grid-template-rows: repeat(4,5px);
      gap: 1px;
    }
 
    .tournaments-section__chess-icon span {
      display: block;
      width: 5px;
      height: 5px;
      border-radius: 1px;
    }
 
    /* Trophy icon */
    .tournaments-section__trophy-icon {
      color: #f59e0b;
    }
 
    /* Winners row */
    .tournaments-section__winners {
      display: flex;
      gap: 8px;
      /* flex-wrap: wrap; */
    }
 
    .tournaments-section__winner-badge {
      flex: 1 1 calc(33.333% - 8px);
      min-width: 130px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 12px;
      font-family: 600;
      color: #374151;
      background: #f9fafb;
      text-align: center;
      font-family: var(--bold);
    }
 
    .tournaments-section__winner-badge span {
      color: #6b7280;
      font-family: 500;
      margin-left: 4px;
    }
 
    /* ===== NAV BUTTONS ===== */
    .tournaments-section__nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      display: flex;
      flex-direction: column;
      gap: 6px;
      right: -48px;
    }
 
    .tournaments-section__nav-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1.5px solid #d1d5db;
      background: #1C77C329;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
      color: #374151;
    }
 
    .tournaments-section__nav-btn:hover {
      border-color: #1a56db;
      color: #1a56db;
    }
 
    .tournaments-section__nav-btn.swiper-button-disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
 
    /* ===== PAGINATION DOTS ===== */
    .tournaments-section__pagination {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-top: 16px;
    }
 
    .tournaments-section__pagination .swiper-pagination-bullet {
      width: 8px;
      height: 8px;
      background: #cbd5e1;
      border-radius: 50%;
      opacity: 1;
      transition: background 0.2s, width 0.2s;
    }
 
    .tournaments-section__pagination .swiper-pagination-bullet-active {
      background: #1a56db;
      width: 22px;
      border-radius: 4px;
    }
 
    /* ===== RESPONSIVE ===== */
    @media (max-width: 600px) {
      .tournaments-section__nav {
        display: none;
      }
 
      .tournaments-section__winner-badge {
        flex: 1 1 100%;
      }
    }


    /* ===== INTRO SECTION ===== */
    .intro-section {
      width: 80%;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
    }
 
    .intro-section__card {
      display: flex;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 24px rgba(0,0,0,0.12);
      min-height: 300px;
    }
 
    /* ===== LEFT: IMAGE ===== */
    .intro-section__image-col {
      flex: 1 1 55%;
      position: relative;
      min-height: 280px;
    }
 
    .intro-section__image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
 
    /* ===== RIGHT: CONTENT (blue panel) ===== */
    .intro-section__content-col {
      flex: 1 1 45%;
      background: linear-gradient( var(--scolor) , var(--sbgscolor));
      padding: 40px 36px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 18px;
      align-items: end;
    }
 
    .intro-section__title {
      font-size: 24px;
      font-family: 800;
      color: #ffffff;
      line-height: 1.4;
      font-family: var(--bold);
    }
 
    .intro-section__desc {
      font-size: 14px;
      font-family: 400;
      color: rgba(255,255,255,0.88);
      line-height: 1.9;
      text-align: right;
      font-family: var(--sbold);
    }
 
    /* ===== BUTTON ===== */
    .intro-section__btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      /* align-self: flex-start; */
      background: var(--sbgcolor);
      color: var(--sbgscolor);
      border: none;
      border-radius: 8px;
      padding: 11px 22px;
      font-family: var(--bold);
      font-size: 14px;
      font-family: 700;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s, color 0.2s;
      margin-top: 8px;
    }
 
    .intro-section__btn:hover {
      background: #e8f0fe;
    }
 
    .intro-section__btn img {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }
 
    /* ===== RESPONSIVE ===== */
    @media (max-width: 700px) {
      .intro-section__card {
        flex-direction: column;
      }
 
      .intro-section__image-col {
        min-height: 220px;
        flex: none;
      }
 
      .intro-section__content-col {
        padding: 28px 20px;
      }
    }



       /* ===== MEDIA SECTION ===== */
    .media-section {
      width: 80%;
      margin: 30px auto;
    }
 
    /* ===== HEADER ROW ===== */
    .media-section__header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 8px;
      gap: 16px;
    }
 
    .media-section__header-text {
      text-align: right;
    }
 
    .media-section__title {
      font-size: 22px;
      font-family: 800;
      color: #1a202c;
      margin-bottom: 6px;
      font-family: var(--bold);
    }
 
    .media-section__subtitle {
      font-size: 13px;
      color: #6b7280;
      line-height: 1.7;
      font-family: var(--sbold);
    }
 
    .media-section__btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--sbgscolor);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 10px 18px;
      font-family:var(--bold);
      font-size: 14px;
      font-family: 700;
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
      flex-shrink: 0;
      transition: background 0.2s;
    }
 
    .media-section__btn:hover {
      background: #1740a8;
    }
 
    .media-section__btn img {
      width: 18px;
      height: 18px;
      object-fit: contain;
    }
 
    /* ===== GRID ===== */
    .media-section__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-top: 24px;
      position: relative;
      overflow: hidden;
    }
 
    /* ===== CARD ===== */
    .media-section__card {
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 6px rgba(0,0,0,0.06);
      transition: box-shadow 0.2s, transform 0.2s;
      cursor: pointer;
    }
 
    .media-section__card:hover {
      box-shadow: 0 6px 20px rgba(0,0,0,0.1);
      transform: translateY(-2px);
    }
 
    .media-section__card-img-wrap {
      width: 100%;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      background: #e2e8f0;
    }
 
    .media-section__card-img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.3s;
    }
 
    .media-section__card:hover .media-section__card-img-wrap img {
      transform: scale(1.04);
    }
 
    .media-section__card-body {
      padding: 14px 16px;
      text-align: right;
    }
 
    .media-section__card-title {
      font-size: 14px;
      font-family: 700;
      color: var(--sbgscolor);
      margin-bottom: 6px;
      line-height: 1.5;
      font-family: var(--bold);
    }
 
    /* card with no title shows empty space same height */
    .media-section__card-title:empty {
      min-height: 21px;
    }
 
    .media-section__card-meta {
      font-size: 12px;
      color: #9ca3af;
      font-family: 500;
      font-family: var(--sbold);
    }
 
    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
      .media-section__grid {
        grid-template-columns: 1fr;
      }
 
      .media-section__header {
        flex-direction: column-reverse;
        align-items: flex-end;
      }
    }
 
    @media (max-width: 500px) {
      .media-section__grid {
        grid-template-columns: 1fr;
      }
    }


    
    /* ── TOP DECORATION STRIP ── */
    .site-footer__deco {
      /* background: #e8ecf2; */
      position: relative;
      height: 130px;
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding: 0 60px;
    }
 
    .site-footer__deco img {
      height: 120px;
      object-fit: contain;
      display: block;
    }
 
    /* ── MAIN FOOTER BODY ── */
    .site-footer__body {
      background-image:url('../images/footer_bg.png');
      background-size: cover;
      padding: 40px 60px 24px;
    }
 
    /* ── FOOTER GRID ── */
    .site-footer__grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr auto;
      gap: 24px 32px;
      align-items: start;
      margin-bottom: 32px;
      direction: var(--direction);
      width: 80%;
      margin: 35px auto;
    }
 
    /* ── CONTACT COL ── */
    .site-footer__col-title {
      /* no title in contact col in this design, items start directly */
    }
 
    .site-footer__contact-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
 
    .site-footer__contact-item {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      font-size: 13px;
      font-family: 500;
      direction: rtl;
      font-family: var(--bold);
    }
 
    .site-footer__contact-item img {
      width: 18px;
      height: 18px;
      object-fit: contain;
      flex-shrink: 0;
      filter: brightness(10);
    }
 
    /* ── NAV COLS ── */
    .site-footer__nav-col {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
 
    .site-footer__nav-heading {
      font-size: 15px;
      font-family: 800;
      color: #fff;
      margin-bottom: 2px;
      font-family: var(--bold);
    }

    .site-footer__nav-col li{
        list-style: none;
    }
 
    .site-footer__nav-col a {
      font-size: 16px;
      font-weight:bold;
      color: rgba(255,255,255,0.85);
      text-decoration: none;
      transition: color 0.2s;
      font-family: var(--sbold);
    }
 
    .site-footer__nav-link:hover {
      color: #fff;
    }
 
    /* ── LOGO COL ── */
    .site-footer__logo-col {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
    }
 
    .site-footer__logo-col img {
      width: 100px;
      height: 100px;
      object-fit: contain;
    }
 
    /* ── DIVIDER ── */
    .site-footer__divider {
      border: none;
      border-top: 1px solid rgba(255,255,255,0.2);
      margin-bottom: 20px;
      width: 80%;
      margin: 20px auto;
    }
 
    /* ── BOTTOM BAR ── */
    .site-footer__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
       width: 80%;
      margin: 20px auto;
    }
 
    .site-footer__copyright {
      font-size: 16px;
      color: rgba(255,255,255,0.8);
      font-family: 500;
      font-family: var(--sbold);
    }
 
    /* Social icons */
    .site-footer__socials {
      display: flex;
      align-items: center;
      gap: 16px;
    }
 
    .site-footer__social-link img {
      width: 22px;
      height: 22px;
      object-fit: contain;
      filter: brightness(10);
      display: block;
      transition: opacity 0.2s;
    }
 
    .site-footer__social-link:hover img {
      opacity: 0.75;
    }
 
    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
      .site-footer__body {
        padding: 32px 20px 20px;
      }
 
      .site-footer__grid {
        grid-template-columns: 1fr 1fr;
      }
 
      .site-footer__logo-col {
        grid-column: span 2;
        justify-content: center;
      }
 
      .site-footer__deco {
        padding: 0 20px;
        height: 90px;
      }
 
      .site-footer__deco img {
        height: 80px;
      }
    }
 
    @media (max-width: 480px) {
      .site-footer__grid {
        grid-template-columns: 1fr;
      }
 
      .site-footer__logo-col {
        grid-column: span 1;
      }
    }


/* ################################################################# */
/* ####################### Start page Botolat ######################## */
/* ################################################################# */


    .single_Page_navbar{
        position: unset;
        background: linear-gradient(var(--scolor) , var(--sbgscolor));
    }
    .single_Page_navbar .Navbar_Data{
        margin: 0 auto;
    }


    /* ===== UPCOMING SECTION ===== */
    .upcoming-section {
      width: 70%;
      margin: 50px auto;
      border: 1px solid #C2C2C2CC;
      padding:20px;
    }
 
    /* ── SECTION TITLE ── */
    .upcoming-section__title {
      font-size: 24px;
      font-family: var(--bold);
      color: var(--scolor);
      text-align: right;
      margin-bottom: 24px;
    }
 
    /* ===== CARD ===== */
    .upcoming-section__card {
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      padding: 20px 20px 20px 20px;
      margin-bottom: 16px;
      background: #fff;
      position: relative;
    }
 
    /* highlighted card (blue bg) */
    .upcoming-section__card--highlight {
      background: var(--sbgscolor);
      border-color: var(--sbgscolor);
    }
 
    /* card with image */
    .upcoming-section__card--with-img {
      padding: 0;
      overflow: hidden;
    }
 
    /* ── BADGE (top-left) ── */
    .upcoming-section__badge {
      position: absolute;
      top: 16px;
      left: 16px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: #e74c3c;
      color: #fff;
      font-size: 16px;
      font-family: var(--bold);
      border-radius: 6px;
      padding: 5px 10px;
      z-index: 2;
    }
 
    .upcoming-section__badge img {
      width: 14px;
      height: 14px;
      object-fit: contain;
      filter: brightness(10);
    }
 
    /* ── DATE ── */
    .upcoming-section__date {
      font-size: 12px;
      font-family: var(--sbold);
      color: #888;
      margin-bottom: 8px;
      text-align: right;
    }
 
    .upcoming-section__card--highlight .upcoming-section__date {
      color: rgba(255,255,255,0.75);
    }
 
    /* ── CARD TITLE ── */
    .upcoming-section__card-title {
      font-size: 17px;
      font-family: var(--bold);
      color: var(--scolor);
      margin-bottom: 10px;
      text-align: right;
      line-height: 1.5;
    }
 
    .upcoming-section__card--highlight .upcoming-section__card-title {
      color: #fff;
    }
 
    /* ── CARD DESC ── */
    .upcoming-section__card-desc {
      font-size: 16px;
      color: #666;
      line-height: 1.8;
      margin-bottom: 14px;
      text-align: right;
      font-family: var(--sbold);
    }
 
    .upcoming-section__card--highlight .upcoming-section__card-desc {
      color: rgba(255,255,255,0.85);
    }
 
    /* ── STATS ROW ── */
    .upcoming-section__stats {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 14px;
      justify-content: flex-end;
    }
 
    .upcoming-section__stat {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 12px;
      font-size: 16px;
      font-family: var(--sbold);
      color: var(--scolor);

    }
 
    .upcoming-section__card--highlight .upcoming-section__stat {
      color: #fff;
    }
 
    .upcoming-section__stat img {
      width: 16px;
      height: 16px;
      object-fit: contain;
    }
 
    /* location stat */
    .upcoming-section__location {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 16px;
      font-family: var(--sbold);
      color: var(--scolor);
      justify-content: flex-end;
      width: 100%;
      text-align: right;
    }
 
    .upcoming-section__card--highlight .upcoming-section__location {
      color: rgba(255,255,255,0.9);
    }

    .upcoming-section__card--highlight  .upcoming-section__stat img,
     .upcoming-section__card--highlight  .upcoming-section__location img{
        filter: brightness(0) saturate(100%) invert(100%) sepia(19%) saturate(1945%) hue-rotate(243deg) brightness(114%) contrast(99%);
    }
 
    .upcoming-section__location img {
      width: 15px;
      height: 15px;
      object-fit: contain;
      
    }
 
    /* ── META ROW (location + stats together) ── */
    .upcoming-section__meta {
      display: flex;
      flex-direction: row-reverse;
      justify-content: end;
      gap: 8px;
      margin-bottom: 14px;
    }
 
    .upcoming-section__meta-row {
      display: flex;
      align-items: center;
      /* justify-content: flex-end; */
      gap: 16px;
      flex-wrap: wrap;
    }
 
    /* ── DETAILS BUTTON ── */
    .upcoming-section__btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--sbgscolor);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
      font-size: 16px;
      font-family: var(--bold);
      cursor: pointer;
      text-decoration: none;
      float: right;
      transition: background 0.2s;
    }
 
    .upcoming-section__card--highlight .upcoming-section__btn {
      background: #fff;
      color: var(--sbgscolor);
    }
 
    .upcoming-section__btn:hover {
      opacity: 0.88;
    }
 
    .upcoming-section__btn img {
      width: 16px;
      height: 16px;
      object-fit: contain;
    }
 
    .upcoming-section__card--highlight .upcoming-section__btn img {
      filter: none;
    }
 
    .upcoming-section__btn img.btn-icon-white {
      filter: brightness(10);
    }
 
    /* clearfix */
    .upcoming-section__card-body::after {
      content: '';
      display: table;
      clear: both;
    }
 
    /* ── CARD WITH IMAGE ── */
    .upcoming-section__card-img {
      width: 100%;
      height: 330px;
      object-fit: fill;
      display: block;
    }
 
    .upcoming-section__card-body {
      padding: 16px 20px 20px;
    }
 
    /* ===== RESPONSIVE ===== */
    @media (max-width: 480px) {
      .upcoming-section__meta-row {
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
    flex-wrap: wrap;
      }
      .upcoming-section__meta{
        display: unset;
      }


 
      .upcoming-section__stats {
        justify-content: flex-end;
        gap:0;
      }
      .upcoming-section__stat {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    font-size: 16px;
    font-family: var(--sbold);
    color: var(--scolor);
}

      .upcoming-section{
        width:90%;
      }
    }

/* ################################################################# */
/* ####################### End page Botolat ######################## */
/* ################################################################# */


/* ################################################################# */
/* ####################### Start page Single Botolat ################# */
/* ################################################################# */


/* ===== PAGE WRAPPER ===== */
    .tournament-page {
      width: 70%;
      margin: 50px auto;
    }
 
    /* ── PAGE TITLE ── */
    .tournament-page__title {
      font-size: 22px;
      font-family: var(--bold);
      color: var(--scolor);
      margin-bottom: 14px;
      line-height: 1.5;
      direction: var(--direction);
    }
 
    /* ── PAGE DESC ── */
    .tournament-page__desc {
      font-size: 16px;
      color: #555;
      line-height: 2;
      margin-bottom: 28px;
      direction: var(--direction);
      font-family: var(--sbold);
    }
 
    /* ===== DETAILS CARD ===== */
    .tournament-page__card {
      border: 1px solid #dde3ea;
      border-radius: 14px;
      overflow: hidden;
      background: linear-gradient(var(--scolor) , var(--sbgscolor));
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
 
    .tournament-page__card-inner {
      display: flex;
      gap: 0;
    }
 
    /* ── POSTER SIDE ── */
    .tournament-page__poster {
      flex: 0 0 220px;
      background: var(--sbgcolor);
      display: flex;
      align-items: stretch;
    }

    .tournament-page__card-bg{
        padding: 40px;
        width: 400px;
    }
 
    .tournament-page__poster img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
 
    /* ── CONTENT SIDE ── */
    .tournament-page__content {
      flex: 1;
      padding: 24px 24px 20px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: end;
    }
 
    /* ── DETAILS HEADING ── */
    .tournament-page__details-heading {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-family: var(--bold);
      color: #fff;
    }
 
    .tournament-page__details-heading img {
      width: 20px;
      height: 20px;
      object-fit: contain;
    }
 
    /* ── DETAILS LIST ── */
    .tournament-page__details-list {
      list-style: disc;
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      direction: rtl;
    }
 
    .tournament-page__details-list li {
      font-size: 13px;
      color: #444;
      line-height: 1.7;
        font-family: var(--bold);
      color:#fff;
    }
 
    /* ── PDF BUTTON ── */
    .tournament-page__pdf-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #fff;
      color: var(--sbgscolor);
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
     direction: var(--direction);
      font-size: 13px;
      font-family: var(--bold);
      cursor: pointer;
      text-decoration: none;
      transition: opacity 0.2s;
      width: 250px;
      justify-content: center;
    }
 
    .tournament-page__pdf-btn:hover {
      opacity: 0.88;
    }
 
    .tournament-page__pdf-btn img {
      width: 16px;
      height: 16px;
      object-fit: contain;
      filter: brightness(10);
    }
 
    /* ── CHECKBOX ROW ── */
    .tournament-page__checkbox-row {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      font-family: var(--sbold);
      color: #fff;
      direction: var(--direction);
    }
 
    .tournament-page__checkbox-row input[type="checkbox"] {
      width: 17px;
      height: 17px;
      accent-color: var(--sbgscolor);
      cursor: pointer;
      flex-shrink: 0;
    }
 
    /* ── JOIN BUTTON ── */
    .tournament-page__join-btn {
        color: var(--sbgscolor);
      font-family: var(--bold);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background:#fff;
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
      font-size: 14px;
      cursor: pointer;
      text-decoration: none;
      width: 250px;
      transition: opacity 0.2s;
    }
 
    .tournament-page__join-btn:hover {
      opacity: 0.88;
    }
 
    /* ===== RESPONSIVE ===== */
    @media (max-width: 580px) {
      .tournament-page__card-inner {
        flex-direction: column;
      }
 
      .tournament-page__poster {
        flex: none;
        height: 220px;
      }
 
      .tournament-page__content {
        padding: 18px 16px;
      }
    }

/* ################################################################# */
/* ####################### End page Single Botolat ################# */
/* ################################################################# */


/* ################################################################# */
/* ####################### Start page New Botolat ################# */
/* ################################################################# */


 /* ===== ACHIEVEMENTS SECTION ===== */
    .achievements-section {
      width: 70%;
      margin: 50px auto;
    }
 
    /* ── SECTION TITLE ── */
    .achievements-section__title {
      font-size: 26px;
      font-family: var(--bold);
      color: var(--sbgscolor);
      text-align: center;
      margin-bottom: 32px;
    }
 
    /* ===== CARD ===== */
    .achievements-section__card {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 16px;
      padding: 20px 24px 24px;
      margin-bottom: 20px;
    }
 
    /* highlight card (blue bg) */
    .achievements-section__card--highlight {
      background: var(--sbgscolor);
      border-color: var(--sbgscolor);
    }
 
    /* ── DATE ROW ── */
    .achievements-section__date-row {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 14px;
    }
 
    .achievements-section__date-badge {
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
      gap: 7px;
      background: #1C77C329;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 16px;
      font-family: var(--sbold);
      color: var(--scolor);
    }
 
    .achievements-section__card--highlight .achievements-section__date-badge {
      background: #F0F0F0;
      color:#000;
    }
 
    .achievements-section__date-badge img {
      width: 16px;
      height: 16px;
      object-fit: contain;
    }
 
    /* ── CARD TITLE ── */
    .achievements-section__card-title {
      font-size: 19px;
      font-family: var(--bold);
      color: var(--scolor);
      text-align: right;
      margin-bottom: 10px;
      line-height: 1.5;
    }
 
    .achievements-section__card--highlight .achievements-section__card-title {
      color: #fff;
    }
 
    /* ── CARD DESC ── */
    .achievements-section__card-desc {
      font-size: 16px;
      color: #666;
      line-height: 1.9;
      text-align: right;
      margin-bottom: 16px;
      font-family: var(--sbold);
    }
 
    .achievements-section__card--highlight .achievements-section__card-desc {
      color: rgba(255,255,255,0.85);
    }
 
    /* ── META ROW ── */
    .achievements-section__meta {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 20px;
    }
 
    .achievements-section__meta-item {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-direction: row-reverse;
      background: var(--sbgcolor);
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 16px;
      font-family: var(--sbold);
      color: var(--scolor);
    }
 
    .achievements-section__card--highlight .achievements-section__meta-item {
      background:#fff;
      color: #000;
    }
 
    .achievements-section__meta-item img {
      width: 16px;
      height: 16px;
      object-fit: contain;
    }
 
    /* ── IMAGES GRID ── */
    .achievements-section__imgs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
 
    .achievements-section__img-wrap {
      border-radius: 10px;
      overflow: hidden;
      aspect-ratio: 4/3;
      background: #dde3ea;
    }
 
    .achievements-section__img-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.3s;
    }
 
    .achievements-section__img-wrap:hover img {
      transform: scale(1.05);
    }
 
    /* ===== RESPONSIVE ===== */
    @media (max-width: 560px) {
      .achievements-section__imgs {
        grid-template-columns: repeat(2, 1fr);
      }
 
      .achievements-section__card {
        padding: 16px;
      }
      .achievements-section{
        width: 90%;
      }
    }


/* ################################################################# */
/* ####################### End page New Botolat ################# */
/* ################################################################# */

/* ########################################################################################## */
/* ################################# Introductory Start  ################################# */
/* ########################################################################################## */
.Introductory{
    width: 100%;
}
.Introductory .Introductory_Data{
    width: 85%;
    height: 283px;
    margin: 30px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.Introductory_Data .Introductory_Info{
    width: 738px;
    height: 177px;
}
.Introductory_Data .Introductory_Info h2{
    width: 447px;
    height: 67px;
    font-family: var(--bold);
    font-size: 36px;
    color: #00247D;
    margin-bottom: 20px;
}
.Introductory_Data .Introductory_Info p{
    width: 673px;
    height: 90px;
    font-family: var(--sbold);
    font-size: 16px;
    color: #000;
    text-align: justify;
    padding-right: 35px;
}
.Board_Of_Directors{
    width: 100%;
    height: 1000px;
    background: linear-gradient(to right , #0D395D  ,  #1C77C3 );
    align-content: center;
}
.Board_Of_Directors .Board_Of_Directors_Data{
    width:100%;
    height: 870px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.Board_Of_Directors_Data .Board_Of_Directors_Info{
    width: 28%;
    height: 870px;
    align-content: center;
}
.Board_Of_Directors_Info h2{
    width: 347px;
    height: 134px;
    font-family: var(--bold);
    font-size: 36px;
    color: #ffff;
}
.Board_Of_Directors_Data .Board_Of_Directors_All_Members{
    width: 57%;
    height: 870px;
    gap: 30px;
    display: grid;
    grid-template-columns: repeat(2 , 1fr);
    grid-template-rows: repeat(2 , 1fr);
}
.Board_Of_Directors_All_Members div{
    width: 414px;
    height: 419px;
}
.Board_Of_Directors_All_Members div img{
    width: 414px;
    height: 325px;
}
.Board_Of_Directors_All_Members h4{
    font-family: var(--sbold);
    font-size: 16px;
    color: #ffff;
    margin: 6px 0;
}
.Board_Of_Directors_All_Members h3{
    font-family: var(--bold);
    font-size: 24px;
    color: #ffff;
    margin-bottom: 10px;
}
.Our_Vision{
    width: 100%;
    height: 900px;
}
.Our_Vision .Our_Vision_Data{
    width: 90%;
    height: 718.140380859375px;
    margin: 80px auto;
}
.Our_Vision_Data .Our_Vision_Info{
    width: 100%;
    height: 226.14039611816406px;
    margin-bottom: 60px;
}
.Our_Vision_Data .Our_Vision_Info img{
    width: 57.421875px;
    height: 57.1403923034668px;
}
.Our_Vision_Data .Our_Vision_Info h2{
    width: 195px;
    height: 67px;
    font-family: var(--bold);
    font-size: 36px;
    color: #000000;
    margin-bottom: 20px;
}
.Our_Vision_Data .Our_Vision_Info p{
    width:694px ;
    height: 90px;
    font-family: var(--sbold);
    font-size: 16px;
    color: #000000;
}
.Our_Vision_Data .Our_Vision_Image{
    width: 100%;
    text-align: center;
    margin-bottom: 60px;
}
.Our_Vision_Data .Our_Vision_Image img{
    width: 984px;
    height: 169px;
}
.Our_Vision_Data .Our_Vision_Message{
    width: 50%;
    float: left;
}
.Our_Vision_Data .Our_Vision_Message img{
    width: 60px;
    height: 60px;
}
.Our_Vision_Data .Our_Vision_Message h2{
    width: 195px;
    height: 67px;
    font-family: var(--bold);
    font-size: 36px;
    color: #000000;
    margin-bottom: 20px;
}
.Our_Vision_Data .Our_Vision_Message p {
    width:694px ;
    height: 90px;
    font-family: var(--sbold);
    font-size: 16px;
    color: #000000;
}

/* ########## */
.Historical_View{
    width: 100%;
    height: 500px;
    background: linear-gradient( to top left , #0D395D   ,  #1C77C3  , #0D395D  );
    align-content: center;
}
.Historical_View .Historical_View_Data{
    background: none;
    width: 90%;
    height: 432px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.Historical_View_Data .Historical_View_Info{
    width: 731px;
    height: 317px;
}
.Historical_View_Info h2{
    width:731px ;
    height: 67px;
    font-family: var(--bold);
    font-size: 36px;
    color: #ffff;
    margin-bottom: 20px;
}
.Historical_View_Info p{
    width: 731px;
    height:120px ;
    font-family: var(--sbold);
    font-size: 16px;
    color: #ffff;
}

.club_Games{
    width: 100%;
    height: 550px;
    align-content: center;
}
.club_Games .club_Games_Data{
    width: 90%;
    height: 447px;
    margin: 0 auto;
    text-align: center;
}
.club_Games_Data h2{
    width: 100%;
    height:45px ;
    font-family: var(--bold);
    font-size: 24px;
    color: #1E1E1E;
    margin-bottom: 20px;
    margin-top: 50px;
}
.club_Games_Data p{
    width: 70%;
    height: 52px;
    margin: 0 auto;
    font-family: var(--bold);
    font-size: 14px;
    color: #444444;
    margin-bottom: 50px;
}
.club_Games_Data .All_Games{
    width: 100%;
    height: 310px;
    display: grid;
    grid-template-columns: repeat(4 , 1fr);
}
.club_Games_Data .All_Games div{
    width: 305px;
    height: 310px;
    background-color:  #7933019f;
    border-top-left-radius: 10px;
    border-top-right-radius:10px ;
    border-bottom-right-radius:10px ;
    border-bottom-left-radius:10px ;
}
.club_Games_Data .All_Games div img{
    width: 305px;
    height: 229px;
}
.club_Games_Data .All_Games div a , button{
    width: 305px;
    height:81px ;
    background-color: #1C77C3;
    border: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius:10px ;
    font-family: var(--bold);
    font-size: 20px;
    color: #fff;
    cursor: pointer;
}
.club_Games_Data .All_Games div a :hover{
    background-color: #F0F0F0;
    color: #0d5895;
}

/* ######################################################################################################################################## */
/* ######################################################################################################################################## */
/* ############################################################  Mobile version  ########################################################## */
/* ######################################################################################################################################## */
/* ######################################################################################################################################## */
@media(max-width:768px) {
    .upcoming-section{
        border: none !important;
    }
.site-footer__nav-col{
    text-align: center;
}
.Introductory{
    width: 100%;
}

.Introductory .Introductory_Data {
    width: 90%;
    height: auto;
    margin: 30px auto;
    
}
.Introductory_Data .Introductory_Info {
    width: 75%;
    height: auto;
}
.Introductory_Data .Introductory_Info h2 {
    width: 195px;
    height: 90px;
    font-size: 24px;
}
.Introductory_Data .Introductory_Info p{
    width: 351px;
    height: 76px;
    font-size: 10px;
    padding-right: 0;
}
.Introductory_Data .Introductory_Image {
    width: 25%;
    height: auto;
    position: relative;
}
.Introductory_Data .Introductory_Image img{
    width: 67px;
    height: 104px;
    position: absolute;
    bottom: 0px;
    right: 15px;
}
.Board_Of_Directors {
    width: 100%;
    height: auto;
    display: block;
    background: linear-gradient(to bottom , #0D395D  ,  #1C77C3 );
}
.Board_Of_Directors .Board_Of_Directors_Data {
    width: 90%;
    height: auto;
    margin: 0 auto;
    display: block;
}
.Board_Of_Directors_Data .Board_Of_Directors_Info {
    width:100%;
    height: auto;
}
.Board_Of_Directors_Info h2 {
    width: auto;
    height: auto;
    font-size: 24px;
    margin: 50px 0 100px 0;
}
.Board_Of_Directors_Data .Board_Of_Directors_All_Members {
    width: auto;
    height: auto;
    gap: 0;
    display: block;
}
.Board_Of_Directors_All_Members div {
   width: auto;
   height: auto;
   margin-bottom: 50px;
}
.Board_Of_Directors_All_Members div img{
    width: 100%;
}
.Our_Vision {
    width: 100%;
    height: auto;
}
.Our_Vision .Our_Vision_Data {
    width: 85%;
    margin: 50px auto;
    height: auto;
}
.Our_Vision_Data .Our_Vision_Info{
    margin-bottom: 0px;
}
.Our_Vision_Data .Our_Vision_Info img{
    width:40px;
    height: 40px;
}
.Our_Vision_Data .Our_Vision_Info h2 {
    width: 195px;
    height: auto;
    font-size: 24px;
    margin-bottom: 10px;
}
.Our_Vision_Data .Our_Vision_Info p {
    width: auto;
    height: auto;
    font-family: var(--sbold);
    font-size: 12px;
}
.Our_Vision_Data .Our_Vision_Image img {
    width: 100%;
    height: auto;
}
.Our_Vision_Data .Our_Vision_Image{
    margin-bottom: 50px;
}
.Our_Vision_Data .Our_Vision_Message img {
    width: 40px;
    height: 40px;
}
.Our_Vision_Data .Our_Vision_Message h2 {
    width: 195px;
    height: 67px;
    font-size: 24px;
    margin-bottom: 0px;
}
.Our_Vision_Data .Our_Vision_Message p {
    width: auto;
    height: auto;
    font-size: 12px;
}
.Historical_View {
    width: 100%;
    height: auto;
    background: linear-gradient( to top  , #0D395D   ,  #1C77C3  , #0D395D  );
}
.Historical_View .Historical_View_Data {
    width: 85%;
    height:auto;
    margin: 80px auto;
    display: block;
}
.Historical_View_Data .Historical_View_Info {
    width: 100%;
    margin: 0 auto;
    height: 465px;
}
.Historical_View_Info h2 {
    width: auto;
    height: auto;
    font-family: var(--bold);
    font-size: 24px;
    color: #ffff;
    margin: 35px auto;
}
.Historical_View_Info p {
    width: auto;
    height: 130px;
    font-size: 14px;
    margin-bottom: 20px;
}
.Historical_View_Image {
    width: auto;
    height: auto;
}
.Historical_View_Image img{
    width: 100%;
    height: auto;
}
.club_Games {
    width: 100%;
    height: auto;
}
.club_Games .club_Games_Data {
    width: 90%;
    height: auto;
}
.club_Games_Data h2 {
    width: auto;
    height: auto;
    font-size: 16px;
    margin-bottom: 10px;
}
.club_Games_Data p {
    width: auto;
    height: auto;
    font-size: 12px;
    margin-bottom: 40px;
}
.club_Games_Data .All_Games {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2 , 1fr);
}
.club_Games_Data .All_Games div{
    width: auto;
    height: auto;
}
.club_Games_Data .All_Games div img {
    width: 100%;
    height: auto;
}
.club_Games_Data .All_Games div a{
    width: 100%;
}
.club_Games_Data .All_Games div button{
    width: 100%;
    font-size: 20px;
}

.Our_Vision_Data .Our_Vision_Message {
    width: 100%;
    float: left;
    margin-bottom: 30px;
}

}
/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */
/* ######################################################################## Introductory End   ######################################################################### */
/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */


/* ################################################################# */
/* ####################### Start Font Face ######################## */
/* ################################################################# */

@font-face {
    font-family: bold;
    src: url('../fonts/Cairo-Bold.ttf');
}

@font-face {
    font-family: sbold;
    src: url('../fonts/Cairo-SemiBold.ttf');
}


/* ################################################################# */
/* ####################### End  Font Face ######################## */
/* ################################################################# */

.Navbar_Mobile{
    display: none;
}
.Navbar{
    display: block;
}

.single_Page_navbar_Mobile{
  background: none;
}
/* ################################################################# */
/* ####################### Start  Mobile Version ################### */
/* ################################################################# */

@media(max-width:768px){
    .Hero_section{
        background-image: url('../images/hero_mobile.webp');
    }

    .single_Page_navbar_Mobile{
       background: linear-gradient(var(--scolor) , var(--sbgscolor));
    }

    .Navbar{
        display: none;
    }

    .Navbar_Mobile{
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        display: block;
        z-index: 20;
    }
    .Navbar_Mobile .Navbar_Mobile_Data{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 80%;
        margin: 20px auto;
        flex-direction: row-reverse;
        position: relative;
    }

    .Hero_section .Hero_Data {
    align-items: center;
}

    .Hero_section .Hero_Data h1 {
    font-size: 23px;
    width: 100%;
    text-align: center;
    margin-top: -215px;
}

.Hero_section .Hero_Data a{
    width: 100%;
}


.championships .championships_data .championshipsSwiper .championships-slide .championships-slide_data {
    justify-content: center;
    align-items: center;
}

.championships .championships_data .championshipsSwiper .championships-slide .championships-slide_data h3 {
    font-size: 16px;
    text-align: right;
}

.championships .championships_data .championshipsSwiper .championships-slide .championships-slide_data .sub_title {
    text-align: right;
    display: block;
    width: 100%;
    font-size: 15px;
}


.championships .championships_data .championshipsSwiper .championships-slide .championships-slide_data .desc {
    text-align: right;
    width: 100%;
}

.championships .championships_data .championshipsSwiper .championships-slide{
    height: 580px;
}
.championships .championships_data .championshipsSwiper .championships-slide .championships-slide_data .desc{
    font-size: 13px;
}
.championships .championships_data .championshipsSwiper .championships-slide .championships-slide_data .championships_info{
    flex-direction: column;
}
.championships .championships_data .championshipsSwiper .championships-slide .championships-slide_data .action{
    width: 260px;
}
.championships .championships_data .championshipsSwiper .championships-slide .championships-slide_data .championships_info a{
    justify-content: center;
}
.championships .chees_img{
    width: 100px;
}
.championships_data{
    width:90%;
}

.tournaments-section{
    width: 90%;
}



.tournaments-section__header{
    margin-top: 80px;
    flex-direction: column;
    gap: 15px;
}

.tournaments-section__view-all-btn {
    width: 45%;
    justify-content: center;
    font-size: 11px;
}

.tournaments-section__winners{
    flex-direction: column;
}

.tournaments-section__card-stats {
    flex-wrap: unset;
    flex-direction: column;
}
.tournaments-section__stat-badge{
    justify-content: center;
}

.tournaments-section__nav{
    display: block;
}

.tournaments-section__nav {
    transform: translate(-50%, 0);
    top: 0;
    display: flex !important;
    gap:30px;
    flex-direction: row;
    left: 50%;
    right: unset;
}

.tournaments-section__card {
    margin-top: 50px;
}

.intro-section{
    width: 90%;
    margin-top: -50px;
}
.tournaments-section__title{
    font-size: 14px;
}
.intro-section__image-col{
    height: 220px;
}
.intro-section__image-col img{
    object-fit: fill;
}

.media-section__header-text {
    text-align: center;
}
.media-section__header{
    align-items: center;
}

.media-section{
    width: 90%;
}

.site-footer__grid {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.site-footer__nav-heading{
    text-align: center;
}

.site-footer__nav-link{
    text-align: center;
}

.site-footer__bottom{
    justify-content: center;
}

.site-footer__copyright{
    font-size: 10px;
}

.tournament-page{
    width: 95%;
}
.tournament-page__card-bg{
    width: 300px;
}
.tournament-page__card{
    flex-direction: column;
}

.upcoming-section__btn{
  margin-top: 20px;
}

.upcoming-section__card-body {
    padding: 55px 20px 20px;
}

.upcoming-section {
        margin-top: 180px;
    }
    
    .lang__selected{
        color:#000 !important;
    }


}


/* ################################################################# */
/* ####################### End  Mobile Version ################### */
/* ################################################################# */



/* ################################################################# */
/* ####################### Start  Code Khaled  ################### */
/* ################################################################# */
.Main{
  direction: rtl;
}
.Introductory{
    width: 100%;
}
.Introductory .Introductory_Data{
    width: 85%;
    height: 283px;
    margin: 30px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.Introductory_Data .Introductory_Info{
    width: 738px;
    height: 177px;
}
.Introductory_Data .Introductory_Info h2{
    width: 447px;
    height: 67px;
    font-family: var(--bold);
    font-size: 36px;
    color: #00247D;
    margin-bottom: 20px;
}
.Introductory_Data .Introductory_Info p{
    width: 673px;
    height: 90px;
    font-family: var(--sbold);
    font-size: 16px;
    color: #000;
    text-align: justify;
    padding-right: 35px;
}
.Board_Of_Directors{
    width: 100%;
    height: 1000px;
    background: linear-gradient(to right , #0D395D  ,  #1C77C3 );
    align-content: center;
}
.Board_Of_Directors .Board_Of_Directors_Data{
    width:100%;
    height: 870px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.Board_Of_Directors_Data .Board_Of_Directors_Info{
    width: 28%;
    height: 870px;
    align-content: center;
}
.Board_Of_Directors_Info h2{
    width: 347px;
    height: 134px;
    font-family: var(--bold);
    font-size: 36px;
    color: #ffff;
}
.Board_Of_Directors_Data .Board_Of_Directors_All_Members{
    width: 57%;
    height: 870px;
    gap: 30px;
    display: grid;
    grid-template-columns: repeat(2 , 1fr);
    grid-template-rows: repeat(2 , 1fr);
    position: relative;
    overflow: hidden;
}
.Board_Of_Directors_All_Members div{
    width: 414px;
    height: 419px;
}
.Board_Of_Directors_All_Members div img{
    width: 414px;
    height: 325px;
}
.Board_Of_Directors_All_Members h4{
    font-family: var(--sbold);
    font-size: 16px;
    color: #ffff;
    margin: 6px 0;
}
.Board_Of_Directors_All_Members h3{
    font-family: var(--bold);
    font-size: 24px;
    color: #ffff;
    margin-bottom: 10px;
}
.Our_Vision{
    width: 100%;
    height: 950px;
    position: relative;
    overflow: hidden;
}
.Our_Vision .Our_Vision_Data{
    width: 90%;
    height: 100%;
    margin: 80px auto;
    position: relative;
    overflow: hidden;

}
.Our_Vision_Data .Our_Vision_Info{
    width: 100%;
    height: 300px;
    align-content: center;
    position: relative;
    overflow: hidden;
}
.Our_Vision_Data .Our_Vision_Info img{
    width: 57.421875px;
    height: 57.1403923034668px;
}
.Our_Vision_Data .Our_Vision_Info h2{
    width: 195px;
    height: 67px;
    font-family: var(--bold);
    font-size: 36px;
    color: #000000;
    margin-bottom: 20px;
}
.Our_Vision_Data .Our_Vision_Info p{
    width:694px ;
    height: 90px;
    font-family: var(--sbold);
    font-size: 16px;
    color: #000000;
}
.Our_Vision_Data .Our_Vision_Image{
    width: 100%;
    text-align: center;
    margin-bottom: 60px;
}
.Our_Vision_Data .Our_Vision_Image img{
    width: 984px;
    height: 169px;
}
.Our_Vision_Data .Our_Vision_Message{
    width: 50%;
    height: 245px;
    float: left;
    align-content: center;
}
.Our_Vision_Data .Our_Vision_Message img{
    width: 60px;
    height: 60px;
}
.Our_Vision_Data .Our_Vision_Message h2{
    width: 195px;
    height: 67px;
    font-family: var(--bold);
    font-size: 36px;
    color: #000000;
    margin-bottom: 20px;
}
.Our_Vision_Data .Our_Vision_Message p {
    width:680px ;
    height: 90px;
    font-family: var(--sbold);
    font-size: 16px;
    color: #000000;
}

/* ########## */
.Historical_View{
    width: 100%;
    height: 500px;
    background: linear-gradient( to top left , #0D395D   ,  #1C77C3  , #0D395D  );
    align-content: center;
}
.Historical_View .Historical_View_Data{
    background: none;
    width: 90%;
    height: 432px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.Historical_View_Data .Historical_View_Info{
    width: 731px;
    height: 317px;
}
.Historical_View_Info h2{
    width:731px ;
    height: 67px;
    font-family: var(--bold);
    font-size: 36px;
    color: #ffff;
    margin-bottom: 20px;
}
.Historical_View_Info p{
    width: 731px;
    height:120px ;
    font-family: var(--sbold);
    font-size: 16px;
    color: #ffff;
}

.club_Games{
    width: 100%;
    height: 550px;
    align-content: center;
}
.club_Games .club_Games_Data{
    width: 90%;
    height: 447px;
    margin: 0 auto;
    text-align: center;
}
.club_Games_Data h2{
    width: 100%;
    height:45px ;
    font-family: var(--bold);
    font-size: 24px;
    color: #1E1E1E;
    margin-bottom: 20px;
    margin-top: 50px;
}
.club_Games_Data p{
    width: 70%;
    height: 52px;
    margin: 0 auto;
    font-family: var(--bold);
    font-size: 14px;
    color: #444444;
    margin-bottom: 50px;
}
.club_Games_Data .All_Games{
    width: 100%;
    height: 310px;
    display: grid;
    grid-template-columns: repeat(4 , 1fr);
    position: relative;
    overflow: hidden;
}
.club_Games_Data .All_Games div{
    width: 305px;
    height: 310px;
    background-color:  #7933019f;
    border-top-left-radius: 10px;
    border-top-right-radius:10px ;
    border-bottom-right-radius:10px ;
    border-bottom-left-radius:10px ;
}
.club_Games_Data .All_Games div img{
    width: 305px;
    height: 229px;
}
.club_Games_Data .All_Games div a , button{
    width: 305px;
    height:81px ;
    background-color: #1C77C3;
    border: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius:10px ;
    font-family: var(--bold);
    font-size: 20px;
    color: #fff;
}
.club_Games_Data .All_Games div a :hover{
    background-color: #F0F0F0;
    color: #0d5895;
}

/* ######################################################################################################################################## */
/* ######################################################################################################################################## */
/* ############################################################  Mobile version  ########################################################## */
/* ######################################################################################################################################## */
/* ######################################################################################################################################## */
@media(max-width:768px) {
.Introductory{
    width: 100%;
    height: auto;
}

.Introductory .Introductory_Data {
    width: 90%;
    height: 225px;
    margin: 30px auto;
    
}
.Introductory_Data .Introductory_Info {
    width: 75%;
    height: auto;
}
.Introductory_Data .Introductory_Info h2 {
    width: 195px;
    height: 90px;
    font-size: 24px;
}
.Introductory_Data .Introductory_Info p{
    width: 351px;
    height: 76px;
    font-size: 10px;
    padding-right: 0;
}
.Introductory_Data .Introductory_Image {
    width: 25%;
    height: auto;
    position: relative;
}
.Introductory_Data .Introductory_Image img{
    width: 67px;
    height: 104px;
    position: absolute;
    bottom: 0px;
    right: 15px;
}
.Board_Of_Directors {
    width: 100%;
    height: auto;
    display: block;
    background: linear-gradient(to bottom , #0D395D  ,  #1C77C3 );
}
.Board_Of_Directors .Board_Of_Directors_Data {
    width: 90%;
    height: auto;
    margin: 0 auto;
    display: block;
}
.Board_Of_Directors_Data .Board_Of_Directors_Info {
    width:100%;
    height: auto;
}
.Board_Of_Directors_Info h2 {
    width: auto;
    height: auto;
    font-size: 24px;
    margin: 50px 0 100px 0;
}
.Board_Of_Directors_Data .Board_Of_Directors_All_Members {
    width: auto;
    height: auto;
    gap: 0;
    display: block;
}
.Board_Of_Directors_All_Members div {
   width: auto;
   height: auto;
   margin-bottom: 50px;
}
.Board_Of_Directors_All_Members div img{
    width: 100%;
}
.Our_Vision {
    width: 100%;
    height: auto;
}
.Our_Vision .Our_Vision_Data {
    width: 85%;
    margin: 50px auto;
    height: auto;
}
.Our_Vision_Data .Our_Vision_Info{
    margin-bottom: 0px;
}
.Our_Vision_Data .Our_Vision_Info img{
    width:40px;
    height: 40px;
}
.Our_Vision_Data .Our_Vision_Info h2 {
    width: 195px;
    height: auto;
    font-size: 24px;
    margin-bottom: 10px;
}
.Our_Vision_Data .Our_Vision_Info p {
    width: auto;
    height: auto;
    font-family: var(--sbold);
    font-size: 12px;
}
.Our_Vision_Data .Our_Vision_Image img {
    width: 100%;
    height: auto;
}
.Our_Vision_Data .Our_Vision_Message{
    width: 100%;
    height: auto;
 }
.Our_Vision_Data .Our_Vision_Image{
    margin-bottom: 50px;
}
.Our_Vision_Data .Our_Vision_Message img {
    width: 40px;
    height: 40px;
}
.Our_Vision_Data .Our_Vision_Message h2 {
    width: 195px;
    height: 67px;
    font-size: 24px;
    margin-bottom: 0px;
}
.Our_Vision_Data .Our_Vision_Message p {
    width: auto;
    height: auto;
    font-size: 12px;
}
.Historical_View {
    width: 100%;
    height: auto;
    background: linear-gradient( to top  , #0D395D   ,  #1C77C3  , #0D395D  );
}
.Historical_View .Historical_View_Data {
    width: 85%;
    height:auto;
    margin: 80px auto;
    display: block;
}
.Historical_View_Data .Historical_View_Info {
    width: 100%;
    margin: 0 auto;
    height: 465px;
}
.Historical_View_Info h2 {
    width: auto;
    height: auto;
    font-family: var(--bold);
    font-size: 24px;
    color: #ffff;
    margin: 35px auto;
}
.Historical_View_Info p {
    width: auto;
    height: 130px;
    font-size: 14px;
    margin-bottom: 20px;
}
.Historical_View_Image {
    width: auto;
    height: auto;
}

.Historical_View_Image img{
    width: 100%;
    height: auto;
}
.club_Games {
    width: 100%;
    height: auto;
}
.club_Games .club_Games_Data {
    width: 90%;
    height: auto;
}
.club_Games_Data h2 {
    width: auto;
    height: auto;
    font-size: 16px;
    margin-bottom: 10px;
}
.club_Games_Data p {
    width: auto;
    height: auto;
    font-size: 12px;
    margin-bottom: 40px;
}
.club_Games_Data .All_Games {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2 , 1fr);
}
.club_Games_Data .All_Games div{
    width: auto;
    height: auto;
}
.club_Games_Data .All_Games div img {
    width: 100%;
    height: 140px;
}
.club_Games_Data .All_Games div a{
    width: 100%;
}
.club_Games_Data .All_Games div button{
    width: 100%;
    font-size: 20px;
}
}
/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */
/* ######################################################################## Introductory End   ######################################################################### */
/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */



/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */
/* ######################################################################## Training_Center Start   #################################################################### */
/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */

.Training_Center{
    width: 100%;
    position: relative;
    overflow: hidden;
}
.Training_Center .Training_Center_Data{
    width: 90%;
    height: 620px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.Trainers {
  padding: 60px 0;
  background: #f5f5f5;
  direction: rtl;
  font-family: 'Tajawal', sans-serif;
}
 
.Trainers_Data {
  max-width: 1200px;
  margin: 0 auto;
}
 
.Trainers_Data h2 {
  font-size: 2rem;
  font-weight: 800;
  color: #0a3d62;
  text-align: right;
  margin-bottom: 36px;
}
 
/* ── Card ── */
.trainer-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  text-align: center;
  padding-bottom: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.lang {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    
}
 
.lang__selected {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-family: 'Tajawal', sans-serif;
    font-weight: 500;
    direction: rtl;
    font-family: var(--bold);
}
 
.lang__flag {
    width: 26px;
    height: 18px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}
 
.lang__arrow {
    margin-right: 2px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}
 
.lang.open .lang__arrow {
    transform: rotate(180deg);
}
 

 
.trainer-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 4.5;
  overflow: hidden;
  background: #e0e0e0;
}
 
.trainer-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.4s ease;
  pointer-events: none;
}
 
.trainer-card:hover .trainer-img-wrap img {
  transform: scale(1.04);
}
 
.trainer-role {
  font-size: 0.82rem;
  color: #888;
  margin: 14px;
  font-weight: 500;
  font-family: var(--sbold);
  text-align: right;
}
 
.trainer-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a2e;
  margin-top: 5px;
  padding: 0 12px;
  text-align: right;
  font-family: var(--bold);
}


.Training_Center_Data .Training_Center_Image{
    width: 100%;
    height: 390px;
    text-align: center;
}
.Training_Center_Data .Training_Center_Image img{
    width: 90%;
    height: 390px;
}
.Training_Center_Data .Training_Center_Info{
    width: 90%;
    height: 208px;
    margin: 50px auto;
}
.Training_Center_Data .Training_Center_Info h2{
    width: 846px;
    height:45px ;
    margin: 0 auto;
    font-family: var(--bold);
    font-size: 32px;
    color: #0D395D;
    text-align: center;
    margin-bottom: 40px;
}
.Training_Center_Data .Training_Center_Info p{
    width: 846px;
    height: 72px;
    margin: 0 auto;
    font-family: var(--bold);
    font-size: 20px;
    color: #565656;
    text-align: center;
    margin-bottom: 15px;
}
.Training_Center_Data .Training_Center_Info .Info_Prag{
    width: 846px;
    height: 60px;
    margin: 0 auto;
    font-family: var(--bold);
    font-size: 16px;
    color: #757574;
    text-align: center;
}
.Center_Objectives{
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.Center_Objectives .Center_Objectives_Info{
    background: linear-gradient( to top  , #0D395D   ,  #1C77C3  , #0D395D  );
    padding: 120px 80px;
    position: relative;
    overflow: hidden;
}
.Center_Objectives .Center_Objectives_Info h2{
    font-family: var(--bold);
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 30px;
}
.Center_Objectives .Center_Objectives_Info p{
    font-family: var(--bold);
    font-size: 16px;
    color: #ffffff;
}
.Trainers{
    width: 100%;
}
.Trainers .Trainers_Data{
    width: 90%;
}
/* ###################### */

/* ################# */
.Training_Courses{
    width: 100%;
    margin: 50px auto;
}
.Training_Courses .Training_Courses_Data{
    width: 90%;
    height: 578px;
    margin: 0 auto;
}
.Training_Courses_Data h2 {
    width: 100%;
    font-family: var(--bold);
    font-size: 36px;
    color: #0D395D;
    margin-bottom: 30px;
}
.Training_Courses_Data a{
    width: 631px;
    height: 123px;
    display: flex;
    gap: 20px;
    background-color: #1C77C31A;
    color: #000000;
    margin-bottom: 30px;
    align-items: center;
    padding-right: 20px;
    border: none;
}
.Training_Courses_Data .Trainers_Contact{
    background-color: #1C77C31A;
    width: 631px;
    height: 193px;
    display: flex;
    gap: 30px;
    align-items: center;
    padding-right: 20px;
}
.Tra_Con{
    width: 100%;
}
.Cont_Trainers img{
    width: 25px;
    height: 25px;
}
.Cont_Trainers {
    align-content: center;
    margin-top: 5px;
}
.Tra_Con .Cont_Trainers{
    display: flex;
    gap: 15px;
}
.Tra_Con .Cont_Trainers{
    width: 100%;
}
.Training_Courses_Data .Tra_Con{
    padding-right: 20px;
}
.Training_Courses_Data .Training_All_Courses{
    display: grid;
    grid-template-columns: repeat(2 , 1fr);
    grid-template-rows: repeat(2 , 1fr);

}
.Training_Courses_Data .Training_All_Courses h3{
    font-family: var(--bold);
    font-size: 24px;
    color: #000000;
}
.Training_Courses_Data .Training_All_Courses p{
    font-family: var(--sbold);
    font-size: 16px;
    color: #000000;
}


 .FAQ_Section {
    padding: 60px 40px;
    direction: rtl;
    font-family: 'Tajawal', sans-serif;
  }
 
  .FAQ_Container {
    max-width: 900px;
    margin: 0 auto;
  }
 
  .FAQ_Title {
    text-align: right;
    font-size: 2rem;
    font-weight: 800;
    color: #0a3d62;
    margin-bottom: 36px;
  }
 
  .FAQ_List {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
 
  /* ── Item ── */
  .faq-item {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    transition: border-color 0.2s;
  }
 
  /* ── Header ── */
  .faq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 22px;
    cursor: pointer;
    user-select: none;
    background: #ffffff;
    transition: background 0.25s;
    gap: 16px;
  }
 
  .faq-question {
    font-size: 1rem;
    font-weight: 600;
    color: #1a1a2e;
    flex: 1;
    text-align: right;
    transition: color 0.25s;
    font-family: var(--bold);
  }
 
  .faq-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #64748b;
    transition: transform 0.35s, background 0.25s, border-color 0.25s, color 0.25s;
  }
 
  /* ── Body ── */
  .faq-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.38s ease;
  }
 
  .faq-body-inner {
    padding: 0 22px 20px;
    font-size: 0.92rem;
    color: #ffffff;
    line-height: 1.8;
    font-family: var(--sbold);
  }
 
  /* ── ACTIVE STATE (blue gradient) ── */
  .faq-item.faq-active {
    border-color: transparent;
  }
 
  .faq-item.faq-active .faq-header {
    background: linear-gradient(135deg, #1a5fa8 0%, #0a3d62 100%);
  }
 
  .faq-item.faq-active .faq-question {
    color: #ffffff;
  }
 
  .faq-item.faq-active .faq-arrow {
    border-color: rgba(255,255,255,0.5);
    color: #ffffff;
    transform: rotate(180deg);
  }
 
  .faq-item.faq-active .faq-body {
    max-height: 200px;
    background: linear-gradient(135deg, #1a5fa8 0%, #0a3d62 100%);
  }
 
  .faq-item.faq-active .faq-body-inner {
    color: rgba(255,255,255,0.9);
    border-top: 1px solid rgba(255,255,255,0.15);
  }
 
  /* ── Responsive ── */
  @media (max-width: 600px) {
    .FAQ_Section { padding: 40px 16px; }
    .FAQ_Title { font-size: 1.5rem; }
    .faq-question { font-size: 0.93rem; }
    
    .Trainers {
  padding: 60px 0;
}
 
  }

/* ######################################################################################################################################## */
/* ######################################################################################################################################## */
/* ############################################################  Mobile version  ########################################################## */
/* ######################################################################################################################################## */
/* ######################################################################################################################################## */
@media(max-width:768px) {
.Training_Center {
    width: 100%;
    height: auto;
}
.Training_Center .Training_Center_Data {
    width: 90%;
    height: auto;
    margin: 0 auto;
}
.Training_Center_Data .Training_Center_Image {
    width: auto;
    height: auto;
    text-align: center;
}
.Training_Center_Data .Training_Center_Image img {
    width: 100%;
    height: auto;
}
.Training_Center_Data .Training_Center_Info {
    width: auto;
    height: auto;
    margin: 25px auto;
}
.Training_Center_Data .Training_Center_Info h2 {
    width: auto;
    height: auto;
    font-size: 22px;
    margin-bottom: 20px;
}
.Training_Center_Data .Training_Center_Info p {
    width: auto;
    height: auto;
    font-size: 14px;
    margin-bottom: 7px;
}
.Training_Center_Data .Training_Center_Info .Info_Prag {
    width: auto;
    height: auto;
    font-size: 12px;
}
.Center_Objectives {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
}
.Center_Objectives .Center_Objectives_Info {
    padding: 30px 20px;
}
.Center_Objectives .Center_Objectives_Info h2 {
    font-size: 22px;
    margin-bottom: 15px;
}
.Center_Objectives .Center_Objectives_Info p {
    font-size: 14px;
}
.Center_Objectives_Image {
        height: 356px;
}
.Center_Objectives div img{
    width: 100%;
    height: auto;
}
.Training_Courses {
    margin: 30px auto;
}
.Training_Courses .Training_Courses_Data {
    width: 90%;
    height: auto;
}
.Training_Courses_Data h2 {
    width: auto;
    font-size: 24px;
    margin-bottom: 20px;
}
.Training_Courses_Data .Training_All_Courses {
   display: block;
}
.Training_Courses_Data a {
    width: auto;
    height: auto;
    gap: 12px;
    margin-bottom: 15px;
    padding-right: 18px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 5px;
}
.Training_All_Courses img{
    width: 30px;
    height: 30px;
}
.Training_Courses_Data .Training_All_Courses h3 {
    font-size: 16px;
}
.Training_Courses_Data .Training_All_Courses p {
    font-size: 11px;
}
.Training_Courses_Data .Trainers_Contact {
    width: auto;
    height: auto;
    display: flex;
    gap: 15px;
}
.Tra_Con .Cont_Trainers {
    /* display: block; */
    display: inline-block;
    height: 40px;
}
.Cont_Trainers h5{
    height: 40px;
    align-content: center;
    padding-right: 10px;
    font-size: 14px;
    font-family: var(--bold);
}
.Training_All_Courses img {
    width: 25px;
    height: 24px;
}
}
/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */
/* ######################################################################## Training_Center End   ##################################################################### */
/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */

/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */
/* ######################################################################## Domino_game Start   ######################################################################## */
/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */
.Domino_Game{
    width: 100%;
    height: 350px;
}
.Domino_Game .Domino_Game_Data{
    width: 90%;
    height:263px ;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.Domino_Game_Data .Domino_Game_Info{
    height: 100%;
    align-content: center;
}
.Domino_Game_Data .Domino_Game_Info h2{
    font-family: var(--bold);
    font-size: 24px;
    color: #1E1E1E;
    margin-bottom: 15px;
}
.Domino_Game_Data .Domino_Game_Info p{
    width: 819px;
    font-family: var(--bold);
    font-size: 16px;
    color: #565656;
}
.Domino_Game_Data .Domino_Game_Image{
    height: 100%;
    position: relative;
    overflow: hidden;
}
.Domino_Game_Data .Domino_Game_Image img{
    width:263px ;
    height:263px ;
}
.Game_System{
    width: 100%;
    height: 300px;
}
.Game_System .Game_System_Data{
    width: 95%;
    height: 200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
}
.Game_System_Data .How_To_Play{
    width:630px ;
    height: 170px;
    background-color: #FFFFFF ;
    padding: 30px;
    border: none;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.Game_System_Data .How_To_Play h2{
    font-family: var(--bold);
    font-size: 24px;
    color: #1E1E1E;
    margin-bottom: 15px;
}
.Game_System_Data .How_To_Play ul{
    padding-right: 20px;
}
.Game_System_Data .How_To_Play ul li{
    font-family: var(--bold);
    font-size: 16px;
    color: #565656;
}
.Game_System_Data .Number_Of_Players{
    width:630px ;
    height: 170px;
    background: linear-gradient( to right   ,  #1C77C3  , #0D395D  );
    padding: 30px;
    border: none;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.Game_System_Data .Number_Of_Players h2{
    font-family: var(--bold);
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 15px;
}
.Game_System_Data .Number_Of_Players ul{
    padding-right: 20px;

}
.Game_System_Data .Number_Of_Players ul li{
    font-family: var(--bold);
    font-size: 16px;
    color: #ffffff;
}
.Organizing_Tournaments{
    width: 100%;
    height: 600px;
}
.Organizing_Tournaments .Organizing_Tournaments_Data{
    width: 73%;
    height: 448px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.Organizing_Tournaments_Data h2{
    width: 100%;
    text-align: center;
    font-family: var(--bold);
    font-size: 24px;
    color: #0D395D;
    margin-bottom: 15px;
}
.Organizing_Tournaments_Data .Organizing_Tournaments_Image{
    width: 100%;
    height: 320px;
    text-align: center;
}
.Organizing_Tournaments_Data .Organizing_Tournaments_Image img{
    width: 818px;
    height: 301px;
}
/* ############# remove ########## */
.Upcoming_Tournaments{
    width: 100%;
    height: 620px;
}
.Upcoming_Tournaments .Upcoming_Tournaments_Data{
    width: 90%;
    height: 580px;
    margin: 0 auto;
}
.Upcoming_Tournaments_Data h2{
    width: 100%;
    font-family: var(--bold);
    font-size: 24px;
    color: #1E1E1E;
    margin-bottom: 30px;
}
.Upcoming_Tournaments_Data .Kuwait_Championship{
    width: 90%;
    margin: 0 auto;
    height: 383px;
    background: linear-gradient( to left   ,  #1C77C3  , #0D395D  );
    border: #1C77C3 solid .5px ;
    padding: 50px;
}
.Kuwait_Championship .Kuwait_Championship_Date{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
.Kuwait_Championship_Date .Start_Registration{
    width: 200px;
    height: 30px;
    background: none;
}
.Kuwait_Championship_Date .Start_Registration h4{
    font-family: var(--sbold);
    font-size: 16px;
    color: #F0F0F0;
}
.Kuwait_Championship_Date .Registration_Ends{
    width: 245px;
    height: 50px;
    background-color: #E01E26;
    border-radius: 10px;
    align-content: center;
    padding-right: 20px;
}
.Kuwait_Championship_Date .Registration_Ends h4{
    font-family: var(--bold);
    font-size: 16px;
    color: #F0F0F0;
}
.Upcoming_Tournaments_Data .Kuwait_Championship h2{
    font-family: var(--bold);
    font-size: 24px;
    color: #F0F0F0;
}
.Upcoming_Tournaments_Data .Kuwait_Championship p{
    font-family: var(--sbold);
    font-size: 16px;
    color: #F0F0F0;
    margin-bottom: 30px;
}
.Kuwait_Championship .Place_And_Number{
    width: 392px;
    height: 32px;
    display: flex;
    gap: 36px;
    margin-bottom: 30px;
}
.Kuwait_Championship .Place_And_Number .Place{
    display: flex;
    gap: 10px;
    align-items: center;
}
.Kuwait_Championship .Place_And_Number .Place h5{
    font-family: var(--bold);
    font-size: 16px;
    color: #F0F0F0;
}
.Kuwait_Championship .Place_And_Number .Number{
    display: flex;
    gap: 10px;
    align-items: center;
}
.Kuwait_Championship .Place_And_Number .Number h5{
    font-family: var(--bold);
    font-size: 16px;
    color: #F0F0F0;
}
.Upcoming_Tournaments_Data a {
    width:224px;
    height: 50px;
    background-color: #F0F0F0;
    color: #1C77C3;
    font-family: var(--bold);
    font-size: 16px;
    display: inline-block;
    text-align: center;
    align-content: center;
    border: none;
    border-radius: 10px;
}
.Upcoming_Tournaments_Data a :hover{
    background-color: #098c14;
    color: #ffff ;
}
/* ######### remove ############# */
.Previous_Tournaments{
    width: 100%;
    height: 300px;
}
.Previous_Tournaments_Data {
    width: 90%;
    height: 300px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.Previous_Tournaments_Data h2{
    width: 100%;
    text-align: center;
    font-family: var(--bold);
    font-size: 24px;
    color: #1E1E1E;
    margin-bottom: 30px;

}
.Previous_Tournaments_Data .Previous_Tournaments_All_Games{
    display: grid;
    grid-template-columns: repeat(4 , 1fr);
}
/* ######################################################################################################################################## */
/* ######################################################################################################################################## */
/* ############################################################  Mobile version  ########################################################## */
/* ######################################################################################################################################## */
/* ######################################################################################################################################## */
@media(max-width:768px) {
.Domino_Game .Domino_Game_Data {
    width: 90%;
    height: auto;
    margin: 0 auto;
    display: block;
    justify-content: space-between;
}
.Domino_Game_Data .Domino_Game_Info h2 {
    font-size: 22px;
}
.Domino_Game_Data .Domino_Game_Info p {
    width: 100%;
    font-family: var(--bold);
    font-size: 14px;
    margin-bottom: 20px;
}
.Domino_Game_Data .Domino_Game_Image {
    height: auto;
    width: 100%;
    border-radius: 10px;
    border-radius: 10px;
}
.Domino_Game_Data .Domino_Game_Image img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}
.Domino_Game {
    width: 100%;
    height: auto;
    margin-bottom: 30px;
}
.Game_System {
    width: 100%;
    height:auto;
    margin-bottom: 30px;
}
.Game_System .Game_System_Data {
    width: 90%;
    height: auto;
    margin: 0 auto;
    display: block;
}
.Game_System_Data .How_To_Play {
    width: auto;
    height: auto;
    background-color: #FFFFFF;
    padding: 0;
    margin-bottom: 15px;
    padding: 14px;
}
.Game_System_Data .How_To_Play h2 {
    font-size: 22px;
}
.Game_System_Data .How_To_Play ul li {
    font-size: 14px;
}
.Game_System_Data .Number_Of_Players {
    width: auto;
    height: auto;
    background: linear-gradient(to right, #1C77C3, #0D395D);
    padding: 20px;
    border: none;
    border-radius: 10px;
}
.Game_System_Data .Number_Of_Players h2 {
    font-size: 18px;
    margin-bottom: 5px;
}
.Game_System_Data .Number_Of_Players ul li {
    font-size: 12px;
}
.Organizing_Tournaments {
    width: 100%;
    height: auto;
}
.Organizing_Tournaments .Organizing_Tournaments_Data {
    margin: 0 auto;
    width: 90%;
    height: auto;
}
.Organizing_Tournaments_Data h2 {
    width: auto;
    height: auto;
    font-size: 18px;
    margin-bottom: 7px;
}
.Organizing_Tournaments_Data .Organizing_Tournaments_Image {
    width: auto;
    height: auto;
    text-align: center;
}
.Organizing_Tournaments_Data .Organizing_Tournaments_Image img {
    width: 100%;
    height: auto;
}
.Upcoming_Tournaments {
    width: 100%;
    height: auto;
}
.Upcoming_Tournaments .Upcoming_Tournaments_Data {
    width: 90%;
    height: auto;
    margin: 0 auto;
}
.Upcoming_Tournaments_Data h2 {
    width: auto;
    font-size: 22px;
    margin-bottom: 20px;
    text-align: center;
}
.Upcoming_Tournaments_Data .Kuwait_Championship {
    width: auto;
    margin: 0 auto;
    height: auto;
    padding: 25px;
    border-radius: 5px;
}
.Kuwait_Championship .Kuwait_Championship_Date {
    width: auto;
    margin-bottom: 20px;
}
.Kuwait_Championship_Date .Start_Registration {
    width: 130px;
    height: 40px;
    background: none;
    align-content: center;
}
.Kuwait_Championship_Date .Start_Registration h4 {
    font-size: 12px;
}
.Kuwait_Championship_Date .Registration_Ends {
    width: 190px;
    height: 40px;
    text-align: center;
    align-content: center;
    padding: 0;
}
.Kuwait_Championship_Date .Registration_Ends h4 {
    font-size: 12px;
}
.Upcoming_Tournaments_Data .Kuwait_Championship h2 {
    font-size: 22px;
}
.Upcoming_Tournaments_Data .Kuwait_Championship p {
    font-size: 16px;
    margin-bottom: 20px;
    text-align: center;
}
.Kuwait_Championship .Place_And_Number {
    width: auto;
    height: auto;
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 20px;
}
.Kuwait_Championship .Place_And_Number .Place img{
    width: 25px;
    height: 25px;
}
.Kuwait_Championship .Place_And_Number .Place h5 {
    font-size: 12px;
}
.Kuwait_Championship .Place_And_Number .Number img{
    width: 25px;
    height: 25px;
}
.Kuwait_Championship .Place_And_Number .Number h5 {
    font-size: 12px;
}
.Kuwait_Championship .Place_And_Number .Number {
    gap: 3px;
}
.Kuwait_Championship .Place_And_Number .Place {
    gap: 3px;
}
.Upcoming_Tournaments_Data a {
    width: 170px;
    height: 45px;
    color: #10558f;
    font-size: 13px;
    border-radius: 7px;
}
.Previous_Tournaments {
    width: 100%;
    height: auto;
    margin-top: 20px;
}
.Previous_Tournaments_Data {
    width: 90%;
    height: auto;
}
.Previous_Tournaments_Data h2 {
    font-size: 22px;
    margin-bottom: 20px;
}
.Previous_Tournaments_Data .Previous_Tournaments_All_Games {
    width: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap:10px;
}
.Previous_Tournaments_Data .Previous_Tournaments_All_Games img{
    width: 100%;
    height: auto;
}

}
/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */
/* ######################################################################## Domino_game End   ######################################################################## */
/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */

/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */
/* ###################################################################### Media Coverage Start   ###################################################################### */
/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */
.Media_Coverage{
    width: 100%;
    height: 900px;
}
.Media_Coverage .Media_Coverage_Data{
    width: 90%;
    margin: 0 auto;
}
.Media_Coverage_Data .Media_Coverage_Info{
    width: 85%;
    height: 173px;
    margin: 0 auto;
    text-align: center;
}
.Media_Coverage_Data .Media_Coverage_Info h2{
    font-family: var(--bold);
    font-size: 32px;
    color: #0D395D;
}
.Media_Coverage_Data .Media_Coverage_Info h3{
    font-family: var(--bold);
    font-size: 22px;
    color: #1E1E1E;
}
.Media_Coverage_Data .Media_Coverage_Info p{
    font-family: var(--bold);
    font-size: 14px;
    color: #444444;
}

/* ######################################################################################################################################## */
/* ######################################################################################################################################## */
/* ############################################################  Mobile version  ########################################################## */
/* ######################################################################################################################################## */
/* ######################################################################################################################################## */
@media(max-width:768px) {
}


/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */
/* ###################################################################### Media Coverage End   ###################################################################### */
/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */

/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */
/* ###################################################################### Contact Start   ###################################################################### */
/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */
.Contact{
    width: 100%;
    /* height: 1340px; */
}
.Contact .Contact_Data{
    width: 75%;
    /* height: 1340px; */
    margin: 0 auto;
}
.Contact_Data .Contact_Info{
    width: 100%;
    height: 117px;
    text-align: center;
    margin-bottom: 30px;
}
.Contact_Info h2{
    font-family: var(--bold);
    font-size: 32px;
    color: #0D395D;
}
.Contact_Info h3{
    font-family: var(--bold);
    font-size: 22px;
    color: #1E1E1E;
}
.Contact_Data .Contact_Hours{
    width: 100%;
    height: 345px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}
.Contact_Hours .Contact_Information{
    width: 65%;
    height: 217px;
    background: linear-gradient( to left   ,  #1C77C3  , #0D395D  );
    padding: 50px;
    border: none;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}
.Contact_Hours .working_Hours{
    width: 35%;
    height: 217px;
    border:#C2C2C2CC solid .5px ;
    border-radius: 5px;
    padding: 50px;
    align-content: center;
    position: relative;
    overflow: hidden;

}
.Contact_Information h2{
    font-family: var(--bold);
    font-size: 24px;
    color: #F0F0F0;
    margin-bottom:20px ;
}
.Contact_Information div{
    width: 100%;
    height: 30px;
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}
.Contact_Information div img{
    width: 25px;
    height: 30px;
}
.Contact_Information div h5{
    font-family: var(--bold);
    font-size: 16px;
    color: #F0F0F0;
}
.Contact_Hours .working_Hours h2{
    font-family: var(--bold);
    font-size: 24px;
    color: #0D395D;
}
.Contact_Hours .working_Hours p{
    font-family: var(--bold);
    font-size: 16px;
    color: #565656;
}
.Contact_Data .Contact_Form{
    width: 100%;
    /* height: 548px; */
    text-align: center;
    background-color: #fff;
    padding-bottom: 130px;
    margin-top: 30px;
    
}
.Contact_Data .Contact_Form h2{
    font-family: var(--bold);
    font-size: 36px;
    color: #0D395D;
    margin-bottom:20px ;
}
 .Contact_Form form input{
    width: 98%;
    height: 48px;
    border: #8a8a8a98 solid 1px;
    border-radius: 5px;
    padding: 10px 10px;
    margin-bottom: 30px;
    font-size: 20px;
    direction:rtl;
}
.Contact_Form form input::placeholder{
    font-family: var(--sbold);
    font-size: 16px;
    color: #0D395D;
}
 .Contact_Form .Contact_Form_In{
    display: flex;
    gap: 20px;
}
 .Contact_Form .Contact_Form_Of{
    height: 120px;
 }
 .Contact_Form button {
    width: 269px;
    height: 80px;
    background-color: #0D395D;
    border-radius: 10px;
    display: inline-block;
    align-content: center;
    text-align: center;
    color: #F0F0F0;
    font-family: var(--bold);
    font-size: 24px;
    border: #44444452 solid 2px;
 }
 
 .Contact_Form button:hover{
    background-color: #0d395d38;
    color: #0D395D;
    cursor: pointer;
 }
.Contact_Data .Social_Networking {
    width:100% ;
    height: 175px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 50px auto;
    background: linear-gradient( to left   ,  #1C77C3  , #0D395D  );
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}
.Contact_Data .Social_Networking  h3{
    font-family: var(--bold);
    font-size: 24px;
    color: #f4f4f4;
    margin-bottom:20px ;
}
.Contact_Data .Social_Networking div{
    display: flex;
    gap: 20px;
}
.Contact_Data .Social_Networking div img{
    width: 40px;
    height: 40px;
}

/* ######################################################################################################################################## */
/* ######################################################################################################################################## */
/* ############################################################  Mobile version  ########################################################## */
/* ######################################################################################################################################## */
/* ######################################################################################################################################## */
@media(max-width:768px) {
.Contact .Contact_Data {
    width: 90%;
    height: auto;
}
.Contact_Info h2 {
    font-family: var(--bold);
    font-size: 20px;
}
.Contact_Info h3 {
    font-size: 16px;
}
.Contact_Data .Contact_Hours {
    width: 100%;
    height: auto;
    display: block;
}
.Contact_Hours .Contact_Information {
    width: auto;
    height: auto;
    padding: 20px;
    margin-bottom: 20px;
}
.Contact_Hours .working_Hours {
    width: auto;
    height: 165px;
    padding: 20px;
}
.Contact_Information h2 {
    font-size: 16px;
    margin-bottom: 8px;
}
.Contact_Information div img {
    width: 25px;
    height: 30px;
}
.Contact_Information div h5 {
    font-size: 14px;
}
.Contact_Data .Contact_Info {
    height: auto;
    margin-bottom: 25px;
}
.Contact_Hours .working_Hours h2 {
    font-size: 16px;
}
.Contact_Hours .working_Hours p {
    font-size: 14px;
}
.Contact_Data .Contact_Form h2 {
    font-size: 34px;
}
.Contact_Data .Contact_Form {
    width: 100%;
    height: auto;
}
.Contact_Data .Contact_Form {
    width: auto;
    height: auto;
    padding: 10px;
}
.Contact_Form .Contact_Form_In {
    display: block;
    gap: 20px;
}
.Contact_Form form input {
    width: 90%;
    height: 45px;
    margin-bottom: 15px;
    font-size: 10px;
}
.Contact_Form .Contact_Form_Of {
    height: 65px;
    margin-bottom: 30px;
}
.Contact_Form button {
    width: 269px;
    height: 60px;
    font-size: 20px;
    border-radius: 5px;
}
.Contact_Data .Social_Networking {
    width: 100%;
    height: auto;
    display: block;
    margin: 30px auto;
    padding: 30px 0 30px 0;
}
.Contact_Data .Social_Networking div {
    display: flex;
    /* justify-content: center; */
    text-align: center;
    gap: 15px;
    padding: 10px;
    justify-content: center;
}
.Contact_Data .Social_Networking h3 {
    font-size: 16px;;
    margin-bottom: 0;
}
.Contact_Data .Social_Networking div img {
    width: 30px;
    height: 30px;
}

.Tra_Con .Cont_Trainers {
    display: flex !important;
    gap: 15px;
    align-items: center;
}



}

/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### */
/* ###################################################################### Contact End   ###################################################################### */
/* ##################################################################################################################################################################### */
/* ##################################################################################################################################################################### *

/* ################################################################# */
/* ####################### End  Code Khaled  ################### */
/* ################################################################# */

body > div.Main > section.Training_Courses > div > div > a:nth-child(5){
    height: 193px;
}



nav {
  width: 300px;
  min-height: 450px;
  background: white;
  color: rgba(0, 0, 0, 0.87);
  -webkit-clip-path: circle(24px at 30px 24px);
  clip-path: circle(24px at 32px 24px);
  -webkit-transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
  transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
  position: absolute;
    top: 50%;
    transform: translate(0, -10%);
    left: 0;
    border-radius: 15px;
}

nav:hover {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-transition-duration: 0.75s;
  transition-duration: 0.75s;
  -webkit-clip-path: circle(390px at 225px 24px);
  clip-path: circle(452px at 150px 24px);
}

nav a {
  display: block;
  line-height: 50px;
  padding: 0 20px;
  color: inherit;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-align: right;
}

nav a:hover { background: #1b77c3;color:#fff; }

nav a:active { background: #1b77c3;color:#fff; }

.navicon {
  padding: 23px 20px 8px 20px;
  cursor: pointer;
  -webkit-transform-origin: 32px 24px;
  -ms-transform-origin: 32px 24px;
  transform-origin: 32px 24px;
  width: 100%;
}

nav li {
    direction: rtl;
    list-style: none;
    font-family: 'bold';
}

.navicon div {
  position: relative;
  width: 20px;
  height: 2px;
  background: rgba(0, 0, 0, 0.87);
  margin-bottom: 20px;
}

.navicon div:before,
.navicon div:after {
  display: block;
  content: "";
  width: 20px;
  height: 2px;
  background: rgba(0, 0, 0, 0.87);
  position: absolute;
}

.navicon div:before { top: -7px; }

.navicon div:after { top: 7px; }