Access_New/parts/country.php

<!--Country Section-->
<section class="bg-very-light-gray overflow-hidden">
  <div class="container">
    <div class="row align-items-center justify-content-center mb-6 text-center text-lg-start">
      <div class="col-xl-5 col-lg-5 md-mb-20px" data-anime="{ &quot;translateX&quot;: [50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
        <h4 class="text-dark-gray fw-700 mb-0 ls-minus-1px custom-title2">Explore Your Global Study Destinations</h4>
      </div>
      <div class="col-xl-5 col-lg-5 last-paragraph-no-margin md-mb-30px" data-anime="{ &quot;translateX&quot;: [-50, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
        <p class="xl-w-100 md-w-80 sm-w-100 md-mx-auto"></p>
      </div>
      <div class="col-xl-2 col-lg-2 d-flex justify-content-center justify-content-lg-end" data-anime="{ &quot;el&quot;: &quot;childs&quot;, &quot;translateX&quot;: [30, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 800, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
        <div class="slider-one-slide-prev-1 icon-small text-dark-gray swiper-button-prev slider-navigation-style-04 bg-white text-dark-gray box-shadow-large"><i class="fa-solid fa-arrow-left"></i></div>
        <div class="slider-one-slide-next-1 icon-small text-dark-gray swiper-button-next slider-navigation-style-04 bg-white text-dark-gray box-shadow-large"><i class="fa-solid fa-arrow-right"></i></div>
      </div>
    </div>
    <div class="row align-items-center">
      <div class="col-12 position-relative">
        <div class="outside-box-right-40 xs-outside-box-right-0" data-anime="{ &quot;translateX&quot;: [100, 0], &quot;opacity&quot;: [0,1], &quot;duration&quot;: 1200, &quot;delay&quot;: 0, &quot;staggervalue&quot;: 150, &quot;easing&quot;: &quot;easeOutQuad&quot; }">
          <div class="swiper magic-cursor" data-slider-options="{ &quot;slidesPerView&quot;: 1, &quot;spaceBetween&quot;: 28, &quot;loop&quot;: true, &quot;autoplay&quot;: { &quot;delay&quot;: 2000, &quot;disableOnInteraction&quot;: false }, &quot;pagination&quot;: { &quot;el&quot;: &quot;.slider-four-slide-pagination-1&quot;, &quot;clickable&quot;: true }, &quot;navigation&quot;: { &quot;nextEl&quot;: &quot;.slider-one-slide-next-1&quot;, &quot;prevEl&quot;: &quot;.slider-one-slide-prev-1&quot; }, &quot;keyboard&quot;: { &quot;enabled&quot;: true, &quot;onlyInViewport&quot;: true }, &quot;breakpoints&quot;: { &quot;1200&quot;: { &quot;slidesPerView&quot;: 5 }, &quot;992&quot;: { &quot;slidesPerView&quot;: 4 }, &quot;768&quot;: { &quot;slidesPerView&quot;: 3 }, &quot;576&quot;: { &quot;slidesPerView&quot;: 2 } }, &quot;effect&quot;: &quot;slide&quot; }">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="interactive-banner-style-08">
                  <figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px"> <a href="australia.php"> <img src="images/access-image/study-australia.jpg" alt /> </a>
                    <figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-14 lg-p-12"> <a href="australia.php"> </a>
                      <div class="mt-auto d-flex w-100 align-items-center">
                        <div class="col last-paragraph-no-margin"> <a href="australia.php" class="text-white fs-24 lh-28 w-65 xl-w-75 d-block">Australia</a> </div>
                        <a href="australia.php" class="circle-box bg-yellow w-50px h-50px rounded-circle ms-auto position-relative rounded-box"> <i class="bi bi-arrow-right-short absolute-middle-center icon-very-medium lh-0px text-dark-gray"></i> </a> </div>
                      <div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="interactive-banner-style-08">
                  <figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px"> <a href="newzealand.php"> <img src="images/access-image/study-newzealand.jpg" alt /> </a>
                    <figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-14 lg-p-10"> <a href="newzealand.php"> </a>
                      <div class="mt-auto d-flex w-100 align-items-center">
                        <div class="col last-paragraph-no-margin"> <a href="newzealand.php" class="text-white fs-24 lh-28 w-65 xl-w-75 d-block">New Zealand</a> </div>
                        <a href="newzealand.php" class="circle-box bg-yellow w-50px h-50px rounded-circle ms-auto position-relative rounded-box"> <i class="bi bi-arrow-right-short absolute-middle-center icon-very-medium lh-0px text-dark-gray"></i> </a> </div>
                      <div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="interactive-banner-style-08">
                  <figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px"> <a href="canada.php"> <img src="images/access-image/study-canada.jpg" alt /> </a>
                    <figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-14 lg-p-10"> <a href="canada.php"> </a>
                      <div class="mt-auto d-flex w-100 align-items-center">
                        <div class="col last-paragraph-no-margin"> <a href="canada.php" class="text-white fs-24 lh-28 w-65 xl-w-75 d-block">Canada</a> </div>
                        <a href="canada.php" class="circle-box bg-yellow w-50px h-50px rounded-circle ms-auto position-relative rounded-box"> <i class="bi bi-arrow-right-short absolute-middle-center icon-very-medium lh-0px text-dark-gray"></i> </a> </div>
                      <div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="interactive-banner-style-08">
                  <figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px"> <a href="usa.php"> <img src="images/access-image/study-usa.jpg" alt /> </a>
                    <figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-14 lg-p-10"> <a href="usa.php"> </a>
                      <div class="mt-auto d-flex w-100 align-items-center">
                        <div class="col last-paragraph-no-margin"> <a href="usa.php" class="text-white fs-24 lh-28 w-65 xl-w-75 d-block">USA</a> </div>
                        <a href="usa.php" class="circle-box bg-yellow w-50px h-50px rounded-circle ms-auto position-relative rounded-box"> <i class="bi bi-arrow-right-short absolute-middle-center icon-very-medium lh-0px text-dark-gray"></i> </a> </div>
                      <div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="interactive-banner-style-08">
                  <figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px"> <a href="uk.php"> <img src="images/access-image/study-uk.jpg" alt /> </a>
                    <figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-14 lg-p-10"> <a href="uk.php"> </a>
                      <div class="mt-auto d-flex w-100 align-items-center">
                        <div class="col last-paragraph-no-margin"> <a href="uk.php" class="text-white fs-24 lh-28 w-65 xl-w-75 d-block">UK</a> </div>
                        <a href="uk.php" class="circle-box bg-yellow w-50px h-50px rounded-circle ms-auto position-relative rounded-box"> <i class="bi bi-arrow-right-short absolute-middle-center icon-very-medium lh-0px text-dark-gray"></i> </a> </div>
                      <div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
                    </figcaption>
                  </figure>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="interactive-banner-style-08">
                  <figure class="m-0 hover-box overflow-hidden position-relative border-radius-6px"> <a href="canada.php"> <img src="images/access-image/study-canada.jpg" alt /> </a>
                    <figcaption class="d-flex flex-column align-items-start justify-content-center position-absolute left-0px top-0px w-100 h-100 z-index-1 p-14 lg-p-10"> <a href="canada.php"> </a>
                      <div class="mt-auto d-flex w-100 align-items-center">
                        <div class="col last-paragraph-no-margin"> <a href="canada.php" class="text-white fs-24 lh-28 w-65 xl-w-75 d-block">Canada</a> </div>
                        <a href="canada.php" class="circle-box bg-yellow w-50px h-50px rounded-circle ms-auto position-relative rounded-box"> <i class="bi bi-arrow-right-short absolute-middle-center icon-very-medium lh-0px text-dark-gray"></i> </a> </div>
                      <div class="position-absolute left-0px top-0px w-100 h-100 bg-gradient-gray-light-dark-transparent z-index-minus-1 opacity-9"></div>
                    </figcaption>
                  </figure>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!--Country Section End-->