* {
  font-display: swap;
}

@font-face {
  font-family: "Cairo";
  src: url("../fonts/Cairo-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Import Cairo Medium */
@font-face {
  font-family: "Cairo";
  src: url("../fonts/Cairo-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Import Cairo Bold */
@font-face {
  font-family: "Cairo";
  src: url("../fonts/Cairo-Bold.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
:root {
  --primary-blue: #043a62;
  --light-gray: rgba(255, 247, 237, 255);
  --main-content-background: #ffffff;
  --dark-text: #333;
  --button-bg: #0a2e5b;
  --button-text: #fff;
  --footer-yellow: #ffd700;
  --footer-text: #000;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Cairo", sans-serif;
  background-color: var(--light-gray);
  min-height: 98vh;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-areas:
    "main"
    "footer";
}

.container {
  grid-area: main;
  flex-grow: 1;
  padding: 20px 0;
  position: relative;
  background-image: url("../assets/banner.png");
  background-position: -7em -7em;
  background-repeat: no-repeat;
}

.header-dots {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
}

.dot {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

.dot:nth-child(1) {
  background-color: var(--primary-blue);
}

.dot:nth-child(2) {
  background-color: rgba(23, 97, 110, 255);
}

.dot:nth-child(3) {
  background-color: rgba(118, 150, 159, 255);
}

.dot:nth-child(4) {
  background-color: rgba(255, 235, 209, 255);
}

.content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 50px 0px;
  width: 100%;
}

.image-section {
  flex: 1;
  min-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.main-diagram {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 50%;
}

.text-section {
  flex: 1.5;
  min-width: 400px;
  padding: 20px;
}

.title-and-icon {
  margin-bottom: 20px;
  text-align: center;
  position: relative;
  width: fit-content;
  margin-inline: auto;
}

.title-and-icon h1 {
  color: var(--primary-blue);
  font-size: 3em;
  margin: 0;
  font-weight: 700;
}

.sparkle-icon {
  width: 75px;
  height: auto;
  position: absolute;
  top: -10px;
  left: -53px;
}

.text-section p {
  font-size: 1.1em;
  line-height: 1.6;
  color: #76969f;
  margin-bottom: 60px;
  text-align: center;
}

.text-section p span {
  font-weight: 700;
}

.action-button {
  background-color: var(--primary-blue);
  border: 7px solid white;
  color: var(--light-gray);
  border-radius: 30px;
  padding: 10px 30px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  display: block;
  margin: auto;
  box-shadow: 0 0 0 3px var(--primary-blue);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 30px;
}

.action-button:hover {
  box-shadow: 0 0 0 4px rgba(4, 58, 99, 0.5);
}

.social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 110px;
  direction: ltr;
}

.social-links p {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  color: var(--primary-blue);
}
.social-links a {
  color: var(--primary-blue);
  text-decoration: none;
}
.social-icon {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
.footer {
  grid-area: footer;
  display: grid;
  grid-template-areas: "footer-strip";
  padding-block: 45px;
  overflow: hidden;
}
.footer-strip {
  grid-area: footer-strip;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  padding: 10px 0;
  background: radial-gradient(
    circle,
    rgba(255, 220, 0, 1) 9%,
    rgba(240, 170, 0, 1) 40%,
    rgba(255, 220, 0, 1) 90%
  );
}
.footer-strip-top {
  rotate: 3deg;
}
.footer-strip-bottom {
  rotate: -3deg;
}
.footer-strip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 10px;
  background-image: repeating-linear-gradient(
    62deg,
    #000 0px,
    #000 20px,
    transparent 20px,
    transparent 28px
  );
  background-size: 35px 20px;
  animation: borderScroll 25s linear infinite;
  z-index: 1;
}

.footer-strip::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 9px;
  background-image: repeating-linear-gradient(
    120deg,
    #000 0px,
    #000 20px,
    transparent 20px,
    transparent 28px
  );
  background-size: 35px 20px;
  animation: borderScroll 25s linear infinite;
  z-index: 1;
}

@keyframes borderScroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.footer-strip p {
  display: inline-block;
  margin: 0;
  padding: 0 40px;
  color: white;
  font-weight: bold;
  font-size: 1.1em;
  animation: scrollText 20s linear infinite;
  position: relative;
  z-index: 2;
}

@keyframes scrollText {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

@media (max-width: 850px) {
  .content {
    flex-direction: column;
    padding: 20px;
  }

  .image-section,
  .text-section {
    min-width: unset;
    text-align: center;
  }

  .image-section {
    padding-top: 0;
    order: 1;
  }
  .text-section {
    order: 2;
  }

  .title-and-icon {
    justify-content: center;
  }

  .action-button {
    margin-left: auto;
    margin-right: auto;
  }

  .social-links {
    align-items: center;
  }
}

@media (max-width: 480px) {
  .title-and-icon h1 {
    font-size: 2em;
  }

  .sparkle-icon {
    width: 50px;
    top: -7px;
    left: -37px;
  }
  .main-diagram {
    max-width: 80%;
  }
  .text-section p {
    font-size: 0.9em;
    margin-bottom: 15px;
  }

  .action-button {
    padding: 10px 20px;
    font-size: 0.9em;
  }

  .footer-strip-top {
    rotate: 7deg;
  }
  .footer-strip-bottom {
    rotate: -7deg;
  }
}

/* === Animations === */

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  0% { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes floatIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes slideFadeInLeft {
  0% { opacity: 0; transform: translateX(-30px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes scaleFadeIn {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

/* === Apply Animations === */

.content {
  animation: fadeInUp 1.2s ease-in-out both;
}

.title-and-icon {
  animation: slideInRight 1.4s ease-in-out both;
}

.title-and-icon img.sparkle-icon {
  animation: floatIcon 3s ease-in-out infinite;
}

.text-section p {
  animation: fadeIn 1.8s ease-in-out both;
  animation-delay: 0.6s;
}

.action-button {
  animation: popIn 2s ease-in-out both;
  animation-delay: 1s;
}

.social-links p:nth-child(1) {
  animation: slideFadeInLeft 2s ease forwards;
  animation-delay: 1.4s;
}

.social-links p:nth-child(2) {
  animation: slideFadeInLeft 2s ease forwards;
  animation-delay: 1.6s;
}

.social-links p:nth-child(3) {
  animation: slideFadeInLeft 2s ease forwards;
  animation-delay: 1.8s;
}

.image-section img.main-diagram {
  animation: scaleFadeIn 2.2s ease-in-out both;
  animation-delay: 1.2s;
}