body {
  position: relative;
  overflow-x: hidden;
  font-family: "Cairo", serif;
}

html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background-color: #000000;
}

::-webkit-scrollbar-thumb {
  background-color: #e44e1f;
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* ----------------- */
.container {
  padding: 15px;
  margin: 0 auto;
  position: relative;
}

@media (min-width: 1280px) {
  .container {
    padding: 0.5rem 5rem;
  }
}

/* ******************** */
/* Shape in hero section */
.custom-shape-divider-bottom-1728248260 {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.custom-shape-divider-bottom-1728248260 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 129px;
}

.custom-shape-divider-bottom-1728248260 .shape-fill {
  fill: #f9fafb;
}

/* ******************** */

.wavy-circle {
  background-image: url(../images/4.jpeg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  --s: 370px;
  /* adjust to control the size */

  width: var(--s);
  aspect-ratio: 1;
  --g: /calc(var(--s)*0.433) calc(var(--s)*0.433) radial-gradient(50% 50%, #000 99%, #0000 101%) no-repeat;
  mask: calc(50% + var(--s)*0.138) calc(50% + var(--s)*0.208) var(--g), calc(50% + var(--s)*-0.25) calc(50% + var(--s)*0.016) var(--g), calc(50% + var(--s)*0.111) calc(50% + var(--s)*-0.224) var(--g), radial-gradient(calc(var(--s)*0.331), #000 99%, #0000 101%) subtract, calc(50% + var(--s)*-0.222) calc(50% + var(--s)*0.448) var(--g), calc(50% + var(--s)*-0.277) calc(50% + var(--s)*-0.416) var(--g), calc(50% + var(--s)*0.499) calc(50% + var(--s)*-0.031) var(--g);
}

/* ******************** */
/* SWIPER SLIDE */

.swiper-pagination-bullet-active {
  background: #2d2e81 !important;
}