<div class="swiper mySwiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <div class="parent-section">
        <div class="first-section">
          <div class="child1">
            <h2>King Abdulaziz Camel Festival Closing Ceremony 2022</h2>
            <p>
              The desert sparkled with excitement as the camel festival came to
              a grand close.
            </p>
            <a
              href="https://highlights.geexar.cloud/portfolio/king-abdulaziz-camel-festival-closing-ceremony-2022/"
              >More</a
            >
          </div>
          <div class="child2">
  <a href="https://highlights.geexar.cloud/portfolio/king-abdulaziz-camel-festival-closing-ceremony-2022/">
            <img
              src="https://highlights.geexar.cloud/wp-content/uploads/2025/01/2412421.jpg"
              alt="Event1 (1)"
            />
  </a>
          </div>
        </div>
        <div class="first-section">
          <div class="child1">
            <h2>Arab-Islamic-American Summit 2017</h2>
            <p>
              In Riyadh, leaders from across the world came together to build
              bridges of cooperation
            </p>
            <a
              href="https://highlights.geexar.cloud/portfolio/arab-islamic-american-summit-2017/"
              >More</a
            >
          </div>
          <div class="child2">
  <a href="https://highlights.geexar.cloud/portfolio/arab-islamic-american-summit-2017/">
            <img
              src="https://highlights.geexar.cloud/wp-content/uploads/2025/01/1024126742_0_0_3500_2537_1440x900_80_0_1_408017d428861e1b87feba8fe5831e30.jpg.webp"
              alt="Event1 (1)"
            />
  </a>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="parent-section">
        <div class="first-section">
          <div class="child1">
            <h2>Neymar’s Introduction Ceremony</h2>
            <p>
              Excitement filled the air as Neymar was introduced to fans in
              Riyadh.
            </p>
            <a
              href="https://highlights.geexar.cloud/portfolio/neymars-introduction-ceremony/"
              >More</a
            >
          </div>
          <div class="child2">
  <a href="https://highlights.geexar.cloud/portfolio/neymars-introduction-ceremony/">
            <img
              src="https://highlights.geexar.cloud/wp-content/uploads/2025/01/368888719_870957187733488_3334806153660067120_n.jpg"
              alt="Event1 (1)"
            />
  </a>
          </div>
        </div>
        <div class="first-section">
          <div class="child1">
            <h2>Al-Nassr Championship Celebration 2019</h2>
            <p>
              On a magical evening at King Fahd Stadium, Al-Nassr claimed their
              glorious victory.
            </p>
            <a
              href="https://highlights.geexar.cloud/portfolio/al-nassr-championship-celebration-2019/"
              >More</a
            >
          </div>
          <div class="child2">
  <a href="https://highlights.geexar.cloud/portfolio/al-nassr-championship-celebration-2019/">
            <img
              src="https://highlights.geexar.cloud/wp-content/uploads/2025/01/firas-381-1-scaled.jpg"
              alt="Event1 (1)"
            />
  </a>
          </div>
        </div>
      </div>
    </div>
    <div class="swiper-slide">
      <div class="parent-section">
        <div class="first-section">
          <div class="child1">
            <h2>Islamic Affairs Ministers Conference 2024</h2>
            <p>
              In the holy city of Makkah, ministers from across the Islamic
              world came together.
            </p>
            <a href="https://highlights.geexar.cloud/portfolio/islamic-affairs-ministers-conference-2024/"
              >More</a
            >
          </div>
          <div class="child2">
  <a href="https://highlights.geexar.cloud/portfolio/islamic-affairs-ministers-conference-2024/">
            <img
              src="https://highlights.geexar.cloud/wp-content/uploads/2025/01/IMG_4929-scaled.jpg"
              alt="Event1 (1)"
            />
  </a>
          </div>
        </div>
        <div class="first-section">
          <div class="child1">
            <h2>King Abdulaziz Camel Festival Closing Ceremony 2022</h2>
            <p>
              The desert sparkled with excitement as the camel festival came to
              a grand close.
            </p>
            <a href="https://highlights.geexar.cloud/portfolio/king-abdulaziz-camel-festival-closing-ceremony-2022/"
              >More</a
            >
          </div>
          <div class="child2">
  <a href="https://highlights.geexar.cloud/portfolio/king-abdulaziz-camel-festival-closing-ceremony-2022/">
            <img
              src="https://highlights.geexar.cloud/wp-content/uploads/2025/01/2412421.jpg"
              alt="Event1 (1)"
            />
  </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-pagination"></div>
</div>

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.8s ease;
      }

      .swiper-slide-active {
        transform: scale(1.7) !important;
        z-index: 2;
      }

      .swiper-slide-prev,
      .swiper-slide-next {
        opacity: 0.7;
        z-index: 1;
      }

      .slide-prev-translate {
        transform: scale(1) translateX(-100px) !important;
      }
      .slide-next-translate {
        transform: scale(1) translateX(+100px) !important;
      }
      .slide-prev-translate-active {
        transform: scale(1.1) translateX(0) !important;
      }
      .slide-next-translate-active {
        transform: scale(1.1) translateX(0) !important;
      }

      /* Animation class for the scaling down effect */
      .scale-down {
        transform: scale(1.1) !important;
        opacity: 0.7;
      }

      .swiper-button-next,
      .swiper-button-prev {
        color: #000;
        transition: opacity 0.3s;
      }

      .swiper-button-next:hover,
      .swiper-button-prev:hover {
        opacity: 0.7;
      }

      .swiper-slide-active-finished {
            transform: scale(1.7) translateX(0) !important;
      }
      .child1,
      .child2 {
        text-align: left;
        background-color: #000;
        padding-bottom:20px
      }
.child1{
  width:55%;
}
.child2{
  width:45%
}
      .swiper {
        background-color: #000;
        color: #fff;
        padding: 140px 0px;
      }
      .swiper-slide-active {
     
      }
img{
  max-width:100%;
}
      .child2 {
        margin-right: 30px;
      }
      .swiper-slide-next .first-section:first-child .child1,
      .swiper-slide-prev .first-section:first-child .child1,
      .swiper-slide-next .first-section:last-child .child1,
      .swiper-slide-prev .first-section:last-child .child1 {
      
      }
      .swiper-slide {
        background-color: #000;
      }
  
      .parent-section .first-section {
        display: flex;
        flex-direction: row;
      }
      .parent-section .first-section:last-child {
        flex-direction: row-reverse;
      }
.swiper-button-next, .swiper-button-prev{
  color:#fff
}
.parent-section .first-section .child1 h2{
  font-size:18px;
  font-weight:300;
  font-family:'Hepta Slab';
}
.parent-section .first-section .child1 p{
  font-size:8px;
  font-weight:400;
  font-family:'Poppins';
  color: #DEDEDE;
}
.parent-section .first-section .child1 a{
  font-size:10px;
  font-weight:500;
  font-family:'Hepta Slab';
  color: #EC2224;
}


@media(min-width:768px) and (max-width:991px){
  	.parent-section .first-section:last-child .child2{
		margin-right:0px
	}
	.parent-section .first-section:first-child .child2{
		margin-left:0px
	}
  .child2{
    margin-right:10px
  }
	.swiper-slide-active-finished {
            transform: scale(1.4) translateX(0) !important;
      }
      .swiper-slide-active {
        transform: scale(1.4) !important;
      }
        .swiper {
        padding: 80px 0px;
      }
}
@media (max-width: 767px) {
	.parent-section .first-section:last-child .child2{
		margin-right:0px
	}
	.parent-section .first-section:first-child .child2{
		margin-left:0px
	}
  .child2{
    margin-right:10px
  }
	.swiper-slide-active-finished {
            transform: scale(1.4) translateX(0) !important;
      }
      .swiper-slide-active {
        transform: scale(1) !important;
      }
        .swiper {
        padding: 80px 0px;
      }
  .parent-section .first-section{
    display:block;
    padding-right:15px;
    padding-left:15px
  }
  .child1{
  width:100%;
}
.child2{
  width:100%
}
  .swiper{
    padding:50px 0px
  }
}
@media (max-width: 767px) {
  /* إخفاء الأسهم في الموبايل */
  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }

  /* عرض النقاط في الموبايل */
  .swiper-pagination {
    display: block !important;
    position: relative;
    margin-top: 20px; /* تباعد مناسب */
  }
    .swiper-pagination {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 8px; /* تباعد بين النقاط */
    position: relative;
    margin-top: 20px; /* تحريك النقاط لأسفل */
  }

  .swiper-pagination-bullet {
    width: 10px; /* حجم النقطة */
    height: 10px;
    background-color: white !important; /* لون النقطة */
    opacity: 0.5; /* اجعل النقاط غير النشطة شفافة قليلاً */
    transition: opacity 0.3s ease-in-out;
  }

  /* النقطة النشطة */
  .swiper-pagination-bullet-active {
    opacity: 1; /* النقطة النشطة تكون واضحة */
    background-color: white !important;
  }
}