/* Define root and light theme variables */

:root,
[data-bs-theme="light"] {
  --bs-purple-rgb: 106, 47, 142; /* Purple color RGB values */
  --bs-pink-rgb: 215, 110, 110; /* Pink color RGB values */
  --bs-blue-rgb: 43, 78, 133; /* Blue color RGB values */
}

/* Background color classes */
.bg-purple {
  background-color: var(--bs-purple); /* Use purple color variable */
}

.bg-pink {
  background-color: var(--bs-pink); /* Use pink color variable */
}

.bg-blue {
  background-color: var(--bs-blue); /* Use blue color variable */
}

/* Slick carousel styles */
.slick-track {
  display: flex !important; /* Force flex display */
}

.slick-slide {
  height: inherit !important; /* Inherit height from parent */
}

/* HTML and body styles */
html {
  scroll-padding-top: 100px; /* Add padding for scrolling */
  padding-top: 100px; /* Add padding for scrolling */
}

body {
  font-family: "Tajawal", sans-serif !important; /* Set font family */
  font-weight: 500 !important; /* Set font weight */
  background: #fdfffe; /* Set background color */
}
body.en * {
  direction: ltr;
}
/* Header styles */
header {
  border-color: rgba(
    var(--bs-primary-rgb),
    0.22
  ); /* Set border color with alpha */
  box-shadow: 0px 2px 18px 1px #00000017; /* Add box shadow */
  height: 100px; /* Set height */
}

/* Navbar brand styles */
.navbar-brand {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none; /* Disable user selection */
  overflow: hidden; /* Hide overflow */
}

.navbar-brand img {
  height: 4rem; /* Set image height */
  width: auto; /* Set image width */
}

.navbar-brand span {
  right: -0.75rem; /* Set right position */
  top: 2rem; /* Set top position */
  font-weight: 500; /* Set font weight */
}

/* Offcanvas styles */
header .offcanvas {
  bottom: auto; /* Reset bottom position */
}

header .offcanvas-header {
  height: 100px; /* Set height */
}

/* Main section styles */
main > section:not(:last-child) {
  border-color: rgba(
    var(--bs-primary-rgb),
    0.22
  ); /* Set border color with alpha */
}

/* Home Section */
#home {
  background-image: url(../img/watan-logo-faded.svg);
  background-repeat: no-repeat;
  background-position: -20rem -10rem;
  background-size: auto 40rem;
}

#home .screenshots {
  height: 25rem;
  width: 20rem;
}

#home .screenshots > img {
  transition: transform 0.5s ease-in-out;
}

#home .screenshots > img:first-child {
  transform: translate(calc(50% - 3.5rem), -50%) rotate(10deg) !important;
  z-index: 1;
  height: 70%;
}

#home .screenshots:active > img:first-child,
#home .screenshots:hover > img:first-child {
  transform: translate(calc(50% - 0.75rem), -50%) rotate(5deg) !important;
}

#home .screenshots > img:nth-child(2) {
  transform: translate(50%, -50%) !important;
  z-index: 3;
  height: 100%;
}

#home .screenshots > img:last-child {
  transform: translate(calc(50% + 3.5rem), -50%) rotate(-10deg) !important;
  z-index: 2;
  height: 80%;
}

#home .screenshots:active > img:last-child,
#home .screenshots:hover > img:last-child {
  transform: translate(calc(50% + 0.75rem), -50%) rotate(-5deg) !important;
}

.stay-connected {
  width: 213px;
  position: relative;
  justify-content: center;
  gap: 2.2rem;
  transition: 0.5s all ease-in-out;
}
.circle-animation {
  position: absolute;
  right: -3px;
  width: 53px;
  height: 53px;
  border-radius: 50%;
  background-color: #fcc047;
  z-index: 1;
  transition: 0.5s all ease-in-out;
}
.circle-text {
  position: relative;
  left: -46px;
  z-index: 2;
  transition: 0.5s all ease-in-out;
}
.circle-animation:after {
  content: "";
  opacity: 1;
  position: absolute;
  top: 50%;
  right: 35px;
  transform: translateY(-50%);
  width: 42.84px;
  height: 17px;
  background-image: url(/assets/img/arrow.svg);
  background-repeat: no-repeat;
  background-size: cover;
  transition: 0.5s all ease-in-out;
  animation: 5.5s 0s infinite alternate cubic-bezier(1, 0, 0, 1) arrow-move;
}

@keyframes arrow-move {
  50% {
    right: 25px;
  }
  100% {
    right: 35px;
  }
}

@media (hover: hover) {
  .stay-connected:hover .circle-animation {
    width: 100%;
    border-radius: 15px;
  }
  .stay-connected:hover .circle-text {
    left: 0;
  }
  .stay-connected:hover .circle-animation::after {
    opacity: 0;
    animation: none;
    margin-right: 30px;
  }
}

.icon-circle-arrow-right-long {
  background-image: url(../img/icon-circle-arrow-right-long.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding-right: 75px;
  height: 75px;
  width: 75px;
  display: inline-block;
}
.icon-circle-arrow-left-long {
  background-image: url(../img/icon-circle-arrow-leftlong.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  padding-right: 75px;
  height: 75px;
  width: 75px;
  display: inline-block;
}

.icon-google-play,
.icon-apple {
  padding-left: 36px;
  height: 36px;
  width: 36px;
  display: inline-block;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.btn:active .icon-google-play,
.btn:hover .icon-google-play,
.btn:active .icon-apple,
.btn:hover .icon-apple {
  background-color: var(--bs-white) !important;
}

.icon-google-play {
  -webkit-mask-image: url(../img/icon-google-play.svg);
  mask-image: url(../img/icon-google-play.svg);
}

.icon-apple {
  -webkit-mask-image: url(../img/icon-apple.svg);
  mask-image: url(../img/icon-apple.svg);
}

/* About Section */
#about {
  background-image: url(../img/watan-logo-faded.svg);
  background-repeat: no-repeat;
  background-position: calc(100% + 15rem);
  background-size: auto 33.33rem;
  min-height: calc(33.33rem + calc(3rem * 2));
}

#about .bg-primary {
  /* background-image: url(../img/watan-logo-light.svg); */
  background-color: #24896f !important;
  background-repeat: no-repeat;
  background-position: -26rem -32rem;
  background-size: auto 40rem;
  position: relative;
  min-height: 15rem;
  overflow: hidden;
}

#about .animation-container > div {
  width: 451px !important;
  height: 424px !important;
}
.animation-container {
  display: flex;
  justify-content: center;
}
#about .bg-primary h4.animated-first-word {
  position: absolute;
  top: 6rem;
  right: 3rem;
  animation: 7s infinite about-animation-first-word alternate;
}
#about .bg-primary h4.animated-second-word {
  position: absolute;
  top: 26rem;
  right: 1rem;
  animation: 7s infinite about-animation-second-word alternate;
}
#about .animated-map {
  width: 45rem;
  position: absolute;
  top: -28.6rem;
  left: -24rem;
  z-index: 2;
  animation: 7s infinite about-animation-map alternate;
}
.screenshot-two {
  width: 6px;
  left: 6rem;
  top: 3rem;
  z-index: 1;
  animation: 7s infinite about-animation-screenshot-two alternate;
}
.screenshot-one {
  width: 40px;
  top: 27rem;
  right: 9rem;
  transform: rotate(10deg);
  animation: 7s infinite about-animation-screenshot-one alternate;
}
.screenshot-three {
  width: 50px;
  transform: rotate(-5deg);
  left: -4rem;
  top: 10rem;
  animation: 7s infinite about-animation-screenshot-three alternate;
}

#about h3 + * [class*="col-"] {
  min-height: 12.5rem;
  z-index: 2;
}

@keyframes about-animation-first-word {
  0%,
  50% {
    top: 6rem;
    right: 3rem;
    font-size: 2rem;
  }

  75%,
  100% {
    right: -10rem;
    top: 15rem;
    font-size: 2.5rem;
  }
}
@keyframes about-animation-second-word {
  0%,
  50% {
    top: 26rem;
    right: 1rem;
  }

  75%,
  100% {
    top: 17rem;
    right: 4rem;
    font-size: 2rem;
  }
}

@keyframes about-animation-map {
  0%,
  50% {
    width: 45rem;
    top: -28.6rem;
    left: -24rem;
  }

  75%,
  100% {
    width: 10rem;
    top: 8rem;
    left: 16rem;
  }
}
@keyframes about-animation-screenshot-two {
  0%,
  50% {
    width: 6px;
    left: 6rem;
    top: 3rem;
  }

  75%,
  100% {
    width: 90px;
    left: 6rem;
    top: 9rem;
  }
}
@keyframes about-animation-screenshot-one {
  0%,
  50% {
    width: 40px;
    top: 27rem;
    right: 9rem;
  }

  75%,
  100% {
    width: 55px;
    top: 13rem;
    right: 14rem;
    transform: rotate(6deg);
  }
}
@keyframes about-animation-screenshot-three {
  0%,
  50% {
    width: 50px;
    transform: rotate(-5deg);
    left: -4rem;
    top: 10rem;
  }

  75%,
  100% {
    width: 55px;
    top: 13rem;
    left: 4.3rem;
    transform: rotate(-11deg);
  }
}

/* Services Section */
#services i, #services h4{
  z-index: 1;
}
#services {
  background-image: url(../img/watan-logo-faded.svg);
  background-repeat: no-repeat;
  background-position: -15rem;
  background-size: auto 33.33rem;
  min-height: calc(33.33rem + calc(3rem * 2));
}

#services .position-relative a.active,
#services .position-relative button.active {
  transition: padding 0.3s ease, transform 0.3s ease;
}

#services [class*="col-"] > div.h-100 {
  min-height: 6.15rem;
}

#services [class*="bg-"] > .position-absolute {
  height: 6.15rem !important;
  background-color: rgba(var(--bs-dark-rgb), 0.22);
}

#services .bg-primary:active > .position-absolute,
#services .bg-primary:hover > .position-absolute,
#services .bg-primary.active > .position-absolute,
.clicked.bg-primary > .position-absolute {
  background-color: rgba(var(--bs-primary-rgb), 0.22) !important;
}

#services .bg-purple:active > .position-absolute,
#services .bg-purple:hover > .position-absolute,
#services .bg-purple.active > .position-absolute,
.clicked.bg-purple > .position-absolute {
  background-color: rgba(var(--bs-purple-rgb), 0.22) !important;
}

#services .bg-danger:active > .position-absolute,
#services .bg-danger:hover > .position-absolute,
#services .bg-danger.active > .position-absolute,
.clicked.bg-danger > .position-absolute {
  background-color: rgba(var(--bs-danger-rgb), 0.22) !important;
}

#services .bg-pink:active > .position-absolute,
#services .bg-pink:hover > .position-absolute,
#services .bg-pink.active > .position-absolute,
.clicked.bg-pink > .position-absolute {
  background-color: rgba(var(--bs-pink-rgb), 0.22) !important;
}

#services .bg-info:active > .position-absolute,
#services .bg-info:hover > .position-absolute,
#services .bg-info.active > .position-absolute,
.clicked.bg-info > .position-absolute {
  background-color: rgba(var(--bs-info-rgb), 0.22) !important;
}

#services .bg-blue:active > .position-absolute,
#services .bg-blue:hover > .position-absolute,
#services .bg-blue.active > .position-absolute,
.clicked.bg-blue > .position-absolute {
  background-color: rgba(var(--bs-blue-rgb), 0.22) !important;
}

#services [class*="bg-"] > .position-absolute ~ * {
  z-index: 1;
}

#services [class*="bg-"]:active,
#services [class*="bg-"]:hover,
#services [class*="bg-"].active {
  background-color: var(--bs-white) !important;
}

.clicked {
  background-color: #fff !important;
}

#services .bg-primary:active .text-white,
#services .bg-primary:hover .text-white,
#services .bg-primary.active .text-white {
  color: var(--bs-primary) !important;
}

#services .bg-purple:active .text-white,
#services .bg-purple:hover .text-white,
#services .bg-purple.active .text-white {
  color: var(--bs-purple) !important;
}

#services .bg-danger:active .text-white,
#services .bg-danger:hover .text-white,
#services .bg-danger.active .text-white {
  color: var(--bs-danger) !important;
}

#services .bg-pink:active .text-white,
#services .bg-pink:hover .text-white,
#services .bg-pink.active .text-white {
  color: var(--bs-pink) !important;
}

#services .bg-info:active .text-white,
#services .bg-info:hover .text-white,
#services .bg-info.active .text-white {
  color: var(--bs-info) !important;
}

#services .bg-blue:active .text-white,
#services .bg-blue:hover .text-white,
#services .bg-blue.active .text-white {
  color: var(--bs-blue) !important;
}

#services .bg-primary:active .bg-white,
#services .bg-primary:hover .bg-white,
#services .bg-primary.active .bg-white {
  background-color: var(--bs-primary) !important;
}

#services .bg-purple:active .bg-white,
#services .bg-purple:hover .bg-white,
#services .bg-purple.active .bg-white {
  background-color: var(--bs-purple) !important;
}

#services .bg-danger:active .bg-white,
#services .bg-danger:hover .bg-white,
#services .bg-danger.active .bg-white {
  background-color: var(--bs-danger) !important;
}

#services .bg-pink:active .bg-white,
#services .bg-pink:hover .bg-white,
#services .bg-pink.active .bg-white {
  background-color: var(--bs-pink) !important;
}

#services .bg-info:active .bg-white,
#services .bg-info:hover .bg-white,
#services .bg-info.active .bg-white {
  background-color: var(--bs-info) !important;
}

#services .bg-blue:active .bg-white,
#services .bg-blue:hover .bg-white,
#services .bg-blue.active .bg-white {
  background-color: var(--bs-blue) !important;
}
.service-header {
  opacity: 1;
  transition: 0.1s opacity ease-in;
}
.service-header.hide-header {
  opacity: 0;
}

.service-description {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  font-weight: bold;
  opacity: 0;
  transition: 0.1s opacity ease-in;
}
.service-description.show-description {
  opacity: 1;
}

/* Icons */
.icon-server,
.icon-magnifying-glass,
.icon-palette,
.icon-grid,
.icon-square-info,
.icon-app-store {
  padding-left: 36px;
  height: 36px;
  width: 36px;
  display: inline-block;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.icon-server {
  -webkit-mask-image: url(../img/icon-server-light.svg);
  mask-image: url(../img/icon-server-light.svg);
}

.icon-magnifying-glass {
  -webkit-mask-image: url(../img/icon-magnifying-glass-light.svg);
  mask-image: url(../img/icon-magnifying-glass-light.svg);
}

.icon-palette {
  -webkit-mask-image: url(../img/icon-palette-light.svg);
  mask-image: url(../img/icon-palette-light.svg);
}

.icon-grid {
  -webkit-mask-image: url(../img/icon-grid-light.svg);
  mask-image: url(../img/icon-grid-light.svg);
}

.icon-square-info {
  -webkit-mask-image: url(../img/icon-square-info-light.svg);
  mask-image: url(../img/icon-square-info-light.svg);
}

.icon-app-store {
  -webkit-mask-image: url(../img/icon-app-store-light.svg);
  mask-image: url(../img/icon-app-store-light.svg);
}

.white-green{
  color: #18876B !important;
  background-color: #259075 !important;
}

/* FAQ Section */
#faq {
  background-image: url(../img/watan-logo-faded.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 33.33rem;
  min-height: calc(33.33rem + calc(3rem * 2));
  position: relative;
  overflow: hidden;
  transition: 0.3s all ease-in-out;
}

@media (min-width: 992px) {
  #faq > .container {
    padding-bottom: calc(3rem * 2) !important;
  }
}

#faq .card.position-absolute > .card-body {
  /* transition: padding 0.3s ease, transform 0.3s ease; */
}
#faq .row > div {
  align-self: flex-start !important;
}

#faq .card {
  min-height: 189px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
}

#faq .card.opened {
  background-color: #005841;
}
#faq .card.opened * {
  color: #fff !important;
}

#faq .answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s;
  -webkit-transition: 0.3s;
}
.answer > div {
  overflow: hidden !important;
}
.answer-two {
  font-size: 1.1rem !important;
}

#faq .card.opened .answer.answer-two,
#faq .card.opened .answer.answer-one,
#faq .card.opened .answer.answer-three {
  grid-template-rows: 1fr !important;
}

#faq > div:nth-child(1)::before {
  content: "";
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url(../img/icon-question.svg);
  mask-image: url(../img/icon-question.svg);
  background-color: rgba(var(--bs-primary-rgb), 0.3);
  display: inline-block;
  height: 10rem;
  width: 10rem;
  position: absolute;
  top: 50%;
  left: calc(-10rem / 2);
  transform: translateY(-50%) scaleX(-1) rotate(-25deg);
}

#faq > div:nth-child(2)::before {
  content: "";
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url(../img/icon-question.svg);
  mask-image: url(../img/icon-question.svg);
  background-color: rgba(var(--bs-primary-rgb), 0.3);
  display: inline-block;
  height: 12.5rem;
  width: 12.5rem;
  position: absolute;
  bottom: 3rem;
  right: calc(-12.5rem / 1.75);
  transform: rotate(-25deg);
}

#faq h3::before {
  content: "";
  background-image: url(../img/icon-question.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  display: inline-block;
  height: 4rem;
  width: 4rem;
  transform: rotate(-25deg);
  margin-right: calc(-4rem - 1.5rem);
  margin-left: 1.5rem;
}
#faq h3.en-faq::before {
  position: absolute;
  right: 0;
}

#faq h3 + * [class*="col-"] {
  min-height: 12.5rem;
  z-index: 2;
}

#faq .screenshots {
  height: 15rem;
  width: 10rem;
  top: calc(100% - 15rem + 3rem);
  z-index: 1;
}

#faq .screenshots > img {
  transition: 0.3s all ease-in-out;
}

#faq .screenshots > img:first-child {
  transform: translate(calc(50% - 2.5rem), -50%) !important;
  z-index: 2;
  height: 100%;
}

#faq .screenshots:active > img:first-child,
#faq .screenshots:hover > img:first-child {
  transform: translate(calc(50% - 2.5rem), -50%) rotate(10deg) !important;
}

#faq .screenshots > img:last-child {
  transform: translate(calc(50% + 2.5rem), -50%) rotate(-10deg) !important;
  z-index: 1;
  height: 80%;
}

#faq .screenshots:active > img:last-child,
#faq .screenshots:hover > img:last-child {
  transform: translate(calc(50% + 2.5rem), -50%) rotate(-5deg) !important;
}

#faq [class*="col-"] {
  z-index: 2;
}

#faq .card > button {
  height: 36px;
  width: 36px;
}

.icon-arrow-down,
.icon-arrow-up {
  margin-top: 8px;
  height: 12px;
  width: 12px;
  display: inline-block;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.icon-arrow-down,
.icon-arrow-up {
  -webkit-mask-image: url(../img/icon-arrow-right-light.svg);
  mask-image: url(../img/icon-arrow-right-light.svg);
}

.icon-arrow-down {
  transform: rotate(90deg);
}

.icon-arrow-up {
  transform: rotate(270deg);
}

/* Testimonials Section */
.slider {
  overflow: hidden;
}

.slick-list {
  padding-top: 18px !important;
}

#testimonials .slider:last-child {
  direction: ltr;
}

#testimonials .slider:last-child .card {
  direction: rtl;
}

#testimonials .card::after {
  content: "";
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url(../img/icon-quote-right.svg);
  mask-image: url(../img/icon-quote-right.svg);
  background-color: var(--bs-warning);
  display: inline-block;
  height: 3rem;
  width: 3rem;
  position: absolute;
  top: 0;
  right: 1.5rem;
  transform: translate(-50%, -50%);
}

/* #testimonials.testimonials-en .card{
  direction: ltr !important;
} */

#testimonials .card .rounded-circle {
  min-width: 54px;
  min-height: 54px;
  max-width: 54px;
  max-height: 54px;
}

.icon-star {
  padding-left: 18px;
  height: 18px;
  width: 18px;
  display: inline-block;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background-color: var(--bs-orange);
}

.icon-star {
  -webkit-mask-image: url(../img/icon-star.svg);
  mask-image: url(../img/icon-star.svg);
}

#testimonials .card svg {
  height: 18px;
  width: 18px;
}

#testimonials .slider * {
  font-size: 100% !important;
}

@media (max-width: 992px) {
  p.hero-description-en {
    text-align: center;
  }
  #about .about-container {
    flex-direction: column !important;
  }

  #testimonials .card .rounded-circle {
    min-width: 45px;
    min-height: 45px;
    max-width: 45px;
    max-height: 45px;
  }
  .card-name {
    flex-direction: column !important;
    gap: 0.35rem !important;
  }
  .card-name h3 {
    font-weight: 600;
  }
}

/* Contact Section */
#contact .border {
  background-image: url(../img/watan-logo-faded.svg);
  background-repeat: no-repeat;
  background-position: -15rem;
  background-size: auto 20rem;
  min-height: calc(20rem + calc(3rem * 2));
  border-color: #238d72 !important ;
}

@media (min-width: 992px) {
  #contact .card {
    width: 600px !important;
  }
}

#contact form input {
  border: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
}
#contact form a {
  background-color: #238d72 !important;
  border: none;
}

.icon-paper-plane {
  padding-left: 18px;
  height: 18px;
  width: 18px;
  display: inline-block;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

.icon-paper-plane {
  -webkit-mask-image: url(../img/icon-paper-plane-light.svg);
  mask-image: url(../img/icon-paper-plane-light.svg);
  transform: rotate(180deg);
}

/* Footer Section */
footer {
  margin: calc(1.5rem * 0.5);
  background-color: #238d72 !important;
}

footer .navbar-brand img {
  height: 6rem;
  width: auto;
}

footer .navbar-brand span {
  right: -1rem;
  top: 2rem;
  font-weight: 500;
}

footer .btn svg {
  height: 18px;
  width: 18px;
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(251deg)
    brightness(103%) contrast(101%);
}

footer .btn:active svg,
footer .btn:hover svg {
  filter: invert(23%) sepia(10%) saturate(6351%) hue-rotate(128deg)
    brightness(100%) contrast(102%);
}

/* Responsive */

@media screen and (max-width: 500px) {
  #about .animation-container > div {
    width: 370px !important;
    height: unset !important;
  }
  #about .row {
    justify-content: center;
  }
  #about .row > div {
    width: 370px !important;
    padding-left: 0;
    padding-right: 0;
  }
  #about .bg-primary h4.animated-first-word {
    position: absolute;
    top: 6rem;
    right: 3rem;
    animation: 7s infinite about-animation-first-word-small alternate;
  }
  #about .bg-primary h4.animated-second-word {
    position: absolute;
    top: 26rem;
    right: 1rem;
    animation: 7s infinite about-animation-second-word-small alternate;
  }
  #about .animated-map {
    width: 45rem;
    position: absolute;
    top: -28.6rem;
    left: -24rem;
    z-index: 2;
    animation: 7s infinite about-animation-map-small alternate;
  }
  .screenshot-two {
    width: 6px;
    left: 6rem;
    top: 3rem;
    z-index: 1;
    animation: 7s infinite about-animation-screenshot-two-small alternate;
  }
  .screenshot-one {
    width: 40px;
    top: 27rem;
    right: 9rem;
    transform: rotate(10deg);
    animation: 7s infinite about-animation-screenshot-one-small alternate;
  }
  .screenshot-three {
    width: 50px;
    transform: rotate(-5deg);
    left: -4rem;
    top: 10rem;
    animation: 7s infinite about-animation-screenshot-three-small alternate;
  }

  @keyframes about-animation-first-word-small {
    0%,
    50% {
      top: 6rem;
      right: 3rem;
      font-size: 2rem;
    }

    75%,
    100% {
      right: -10rem;
      top: 15rem;
      font-size: 2.5rem;
    }
  }
  @keyframes about-animation-second-word-small {
    0%,
    50% {
      top: 26rem;
      right: 1rem;
    }

    75%,
    100% {
      top: 11rem;
      right: 4rem;
      font-size: 1.8rem;
    }
  }

  @keyframes about-animation-map-small {
    0%,
    50% {
      width: 45rem;
      top: -28.6rem;
      left: -24rem;
    }

    75%,
    100% {
      width: 8rem;
      top: 4rem;
      left: 13rem;
    }
  }
  @keyframes about-animation-screenshot-two-small {
    0%,
    50% {
      width: 6px;
      left: 6rem;
      top: 3rem;
    }

    75%,
    100% {
      width: 57px;
      left: 4rem;
      top: 5rem;
    }
  }
  @keyframes about-animation-screenshot-one-small {
    0%,
    50% {
      width: 40px;
      top: 27rem;
      right: 9rem;
    }

    75%,
    100% {
      width: 46px;
      top: 6.4rem;
      right: 13.4rem;
      transform: rotate(6deg);
    }
  }
  @keyframes about-animation-screenshot-three-small {
    0%,
    50% {
      width: 50px;
      transform: rotate(-5deg);
      left: -4rem;
      top: 10rem;
    }

    75%,
    100% {
      width: 46px;
      top: 6.3rem;
      left: 2.3rem;
      transform: rotate(-11deg);
    }
  }
}

@media screen and (max-width: 450px) {
  .card-name {
    flex-direction: column !important;
    gap: 0.35rem !important;
  }
  .card-name h3 {
    font-weight: 600;
  }
}
@media screen and (max-width: 360px) {
  .card-flex {
    display: grid !important;
  }
  img.nav-logo {
    height: 3rem !important;
  }
}

@media screen and (max-width: 400px) {
  #about .animation-container > div {
    width: 300px !important;
    height: unset !important;
  }
  #about .row {
    justify-content: center;
  }
  #about .row > div {
    width: 300px !important;
    padding-left: 0;
    padding-right: 0;
  }
  #about .bg-primary h4.animated-first-word {
    position: absolute;
    top: 6rem;
    right: 3rem;
    animation: 7s infinite about-animation-first-word-x-small alternate;
  }
  #about .bg-primary h4.animated-second-word {
    position: absolute;
    top: 26rem;
    right: 1rem;
    animation: 7s infinite about-animation-second-word-x-small alternate;
  }
  #about .animated-map {
    width: 45rem;
    position: absolute;
    top: -28.6rem;
    left: -24rem;
    z-index: 2;
    animation: 7s infinite about-animation-map-x-small alternate;
  }
  .screenshot-two {
    width: 6px;
    left: 6rem;
    top: 3rem;
    z-index: 1;
    animation: 7s infinite about-animation-screenshot-two-x-small alternate;
  }
  .screenshot-one {
    width: 40px;
    top: 27rem;
    right: 9rem;
    transform: rotate(10deg);
    animation: 7s infinite about-animation-screenshot-one-x-small alternate;
  }
  .screenshot-three {
    width: 50px;
    transform: rotate(-5deg);
    left: -4rem;
    top: 10rem;
    animation: 7s infinite about-animation-screenshot-three-x-small alternate;
  }

  @keyframes about-animation-first-word-x-small {
    0%,
    50% {
      top: 6rem;
      right: 3rem;
      font-size: 2rem;
    }

    75%,
    100% {
      right: -10rem;
      top: 15rem;
      font-size: 2.5rem;
    }
  }
  @keyframes about-animation-second-word-x-small {
    0%,
    50% {
      top: 26rem;
      right: 1rem;
    }

    75%,
    100% {
      top: 10.5rem;
      right: 4rem;
      font-size: 1.3rem;
    }
  }

  @keyframes about-animation-map-x-small {
    0%,
    50% {
      width: 45rem;
      top: -28.6rem;
      left: -24rem;
    }

    75%,
    100% {
      width: 6.5rem;
      top: 5rem;
      left: 10rem;
    }
  }
  @keyframes about-animation-screenshot-two-x-small {
    0%,
    50% {
      width: 6px;
      left: 6rem;
      top: 3rem;
    }

    75%,
    100% {
      width: 40px;
      left: 3rem;
      top: 6rem;
    }
  }
  @keyframes about-animation-screenshot-one-x-small {
    0%,
    50% {
      width: 40px;
      top: 27rem;
      right: 9rem;
    }

    75%,
    100% {
      width: 32px;
      top: 6.8rem;
      right: 12rem;
      transform: rotate(6deg);
    }
  }
  @keyframes about-animation-screenshot-three-x-small {
    0%,
    50% {
      width: 50px;
      transform: rotate(-5deg);
      left: -4rem;
      top: 10rem;
    }

    75%,
    100% {
      width: 34px;
      top: 6.8rem;
      left: 1.8rem;
      transform: rotate(-11deg);
    }
  }
}