/* RESET CSS */

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin-block-end: 0;
  padding: 0;
  font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Global variable */

:root {
  --gap: 2rem;

  /* color-palette */
  --dark-blue-60: hsla(229, 50%, 13%, 1);
  --light-white-10: hsla(0, 0%, 96%, 1);
  --light-gray-20: hsla(228, 7%, 57%, 1);
  --light-blue-10: hsla(191, 64%, 59%, 1);
  --light-blue-10-shadow-50: rgba(84, 193, 217, 0.475);
  --light-blue-10-shadow-25: rgba(84, 193, 217, 0.24);

  /* font-family */
  --ff-primary: "Maven Pro", sans-serif;
  --ff-body: var(--ff-primary);
  --ff-heading: var(--ff-primary);

  /* font-weight */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;

  /* font-size global */
  /* 14px (footer-copy) */
  --fs-300: 0.875rem;
  /* 1rem=16px */
  --fs-400: 1rem;
  /* M-sections-description=20px */
  --fs-500: 1.175rem;
  /* D-sections-description=26px */
  --fs-600: 1.625rem;
  /* hero-description, 
    sections-title=30px */
  --fs-700: 1.875rem;
  /* D-hero-description, 
       D-sections-title, 
       M-hero-title =40px */
  --fs-800: 2.5rem;
  /* D-hero-title=56px */
  --fs-900: 3.5rem;

  /* font-size Mobile */
  --m-fs-hero-title: var(--fs-800); /* hero-title=40px */

  --m-fs-hero-description: var(--fs-700); /* hero-description=30px */
  --m-fs-section-title: var(--fs-700); /*  sections-title=30px */

  --m-fs-section-description: var(--fs-500); /* sections-description=20px */
  --m-fs-nav: var(--fs-400); /* nav=16px */
  --m-fs-btn: var(--fs-400); /* btn=16px */

  /* font-size Desktop */
  --fs-hero-title: var(--fs-800); /* hero-title=56px */

  --fs-hero-description: var(--fs-700); /* hero-description=40px */
  --fs-section-title: var(--fs-800); /*  sections-title=40px */

  --fs-service-card-title: var(--fs-600); /* service-card-title=26px */

  --fs-section-description: var(--fs-600); /* sections-description=26px */

  --fs-nav: var(--fs-300); /* nav=16px */
  --fs-btn: var(--fs-300); /* btn=16px */

  --fs-footer-copy: var(--fs-300); /* footer-copy=14px */
}

@media (min-width: 60em) {
  :root {
    /* font-size Desktop */
    --fs-hero-title: var(--fs-800); /* hero-title=56px */

    --fs-hero-description: var(--fs-700); /* hero-description=40px */
    --fs-section-title: var(--fs-800); /*  sections-title=40px */
    --fs-service-card-title: var(--fs-700); /* service-card-title=26px */

    --fs-section-description: var(--fs-600); /* sections-description=26px */
  }
}

@media (min-width: 50em) and (max-width: 59.99em) {
  :root {
    /* font-size Desktop */
    --fs-hero-title: var(--fs-700); /* hero-title=56px */

    --fs-hero-description: var(--fs-600); /* hero-description=40px */
    --fs-section-title: var(--fs-700); /*  sections-title=40px */
    --fs-service-card-title: var(--fs-600);
    /* service-card-title=26px */

    --fs-section-description: var(--fs-500); /* sections-description=26px */
  }
}

@media (max-width: 40em) {
  :root {
    /* font-size Desktop */
    --fs-hero-title: var(--fs-700); /* hero-title=56px */

    --fs-hero-description: var(--fs-500); /* hero-description=40px */
    --fs-section-title: var(--fs-700); /*  sections-title=40px */
    --fs-service-card-title: var(--fs-500); /* service-card-title=26px */

    --fs-section-description: var(--fs-500); /* sections-description=26px */

    --fs-nav: var(--fs-300); /* nav=16px */
    --fs-btn: var(--fs-300); /* btn=16px */
  }
}
@media (max-width: 20em) {
  :root {
    /* font-size Desktop */
    --fs-hero-title: var(--fs-600); /* hero-title=56px */

    --fs-hero-description: var(--fs-200); /* hero-description=40px */
    --fs-section-title: var(--fs-600); /*  sections-title=40px */
    --fs-service-card-title: var(--fs-500); /* service-card-title=26px */

    --fs-section-description: var(--fs-200); /* sections-description=26px */

    --fs-nav: var(--fs-300); /* nav=16px */
    --fs-btn: var(--fs-300); /* btn=16px */
  }
}

/* Reusebale||General style*/
/* utility class */

.container {
  /* --max-width: 80vw; */
  --max-width: 1140px;
  --padding: 2rem;

  max-width: min(var(--max-width), 100% - (var(--padding) * 2));
  margin-inline: auto;
}

/* text-color-palette */
.text-dark-blue-60 {
  color: var(--dark-blue-60);
}
.text-light-white-30 {
  color: var(--light-white-30);
}
.text-light-blue-10 {
  color: var(--light-blue-10);
}
.text-light-gray-20 {
  color: var(--light-gray-20);
}

/* bg-color-palette */
.bg-dark-blue-60 {
  background-color: var(--dark-blue-60);
}
.bg-light-white-30 {
  background-color: var(--light-white-30);
}
.bg-light-blue-10 {
  background-color: var(--light-blue-10);
}

/* font-weight */
.fw-regular {
  font-weight: var(--fw-regular);
}
.fw-medium {
  font-weight: var(--fw-medium);
}
.fw-semi-bold {
  font-weight: var(--fw-semi-bold);
}
.fw-bold {
  font-weight: var(--fw-bold);
}

/* font-size*/
.fs-hero-title {
  font-size: var(--fs-hero-title);
}
.fs-hero-description {
  font-size: var(--fs-hero-description);
}
.fs-service-card-title {
  font-size: var(--fs-service-card-title);
}
.fs-section-title {
  font-size: var(--fs-section-title);
}
.fs-section-description {
  font-size: var(--fs-section-description);
}
.fs-nav {
  font-size: var(--fs-nav);
}
.fs-btn {
  font-size: var(--fs-btn);
}
.fs-footer-copy {
  font-size: var(--fs-footer-copy);
}

/* __flix */
.flex {
  display: flex;
}
.flex-nav {
  display: flex;
  gap: var(--gap, 2rem);
}

/* __grid */
.grid {
  display: grid;
  gap: var(--gap, 2rem);
}

/* __block */
.d-block {
  display: block;
}

/* Speciale style */

/* __header */
body {
  font-family: var(--ff-body);
  background-color: var(--dark-blue-60);
  color: var(--light-white-10);
}
/* loader */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--dark-blue-60);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  transition: opacity 0.3s, visibility 0.3s;
}

.loader svg {
  width: 15rem;
  height: auto;
}

.loaderHidden {
  opacity: 0;
  visibility: hidden;
}

/* social-bar */
.social-icons {
  position: fixed;
  bottom: 0;
  left: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hide {
  display: none;
}
.social-icons a {
  display: block;
  margin-bottom: 1rem;
}

/* .social-icons a img {
  width: 1.2rem;
  height: auto;
} */

.social-icons a {
  width: 1.2rem;
  height: auto;
}
.social-icons div {
  height: 8.2rem;
  width: auto;
}

.social-icons a svg:hover {
  transform: scale(1.2);
}

@media (max-width: 38em) {
  .social-icons {
    display: none;
  }
}

/* button */
.btn {
  padding: 0.5em 1em;
  border: 3px solid var(--light-blue-10);
  border-radius: 100vmax;
  background-color: var(--dark-blue-60);
  font-size: var(--fs-btn);
  font-weight: var(--fw-medium);
  color: var(--light-white-10);
  cursor: pointer;
  text-decoration: none;
}

.btn:hover,
.btn:focus-visible {
  /* background-color: var(--light-blue-10); */
  /* color: var(--dark-blue-60); */
  box-shadow: 0 0 0.2rem 0.2rem var(--light-blue-10-shadow-50);
}

.btn:active {
  box-shadow: 0 0 0.2rem 0.2rem var(--light-blue-10-shadow-25);
}

#scroll-to-top {
  display: none;
  position: fixed;
  bottom: 0.4rem;
  right: 0.7rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--light-blue-10);
  background-color: var(--dark-blue-60);
  color: var(--light-white-10);
  text-align: center;
  align-content: center;
  line-height: 2.2rem;
  cursor: pointer;
}

#scroll-to-top img {
  width: 1rem;
  height: auto;
  margin: auto auto auto auto;
}

#scroll-to-top:hover {
  background-color: var(--light-blue-10-shadow-25);
}

#scroll-to-top:hover img {
  /* transform: translateY(-5px);
  transition: transform 0.5s ease-in-out; */
  animation: bounce 1s ease-in-out infinite;
}

/* header */
.primary-header {
  display: flex;
  align-content: center;
  justify-content: space-between;
  padding: 1.5rem 0 6.5rem 0;
}

.primary-nav a {
  color: var(--light-white-10);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color 0.5s ease-in-out;
  cursor: pointer;
}

.primary-nav .nav-active {
  color: var(--light-blue-10);
}

.primary-nav a:hover,
.primary-nav li:hover {
  scale: 1.2;
  color: var(--light-blue-10);
}

@media (max-width: 40em) {
  .primary-nav {
    display: none;
  }
}

/* hero-section */

@media (min-width: 50em) {
  .even-columns {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
  }
}

.even-columns {
  display: grid;
  /* grid-template-rows: repeat(2, 1fr); */
}

@media (max-width: 49em) {
  .even-columns > :nth-child(1) {
    order: 2;
  }
  .even-columns > :nth-child(2) {
    order: 1;
  }
  .hero-text {
    text-align: center;
  }
  .even-columns > * {
    min-width: 0px;
  }
}

.hero {
  padding: 0rem 0 6.5rem 0;
  min-height: 100vh;
}

.hero-img {
  display: grid;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.hero-text {
  display: grid;
  align-content: center;
  justify-content: start;
}

.hero-description {
  margin-top: 0px;
  /* font-size: clamp(1rem, var(--), 2rem); */
}

.hero-title-highlights {
  color: var(--light-blue-10);
}

.hero-cta-btn {
  display: flex;
  gap: 1.8rem;
  flex-wrap: wrap;
  align-content: center;
  flex-direction: row;
  align-items: center;
}

.hero-cta {
  display: block;
  border: 3px solid var(--light-blue-10);
  border-radius: 100vmax;
  background-color: var(--light-blue-10);
  width: 1.8rem;
  height: 1.8rem;
  margin: 1rem 0;
}

.hero-cta::before {
  content: "";
  display: block;
  width: 0.5rem;
  height: 0.5rem;
  border-top: 3px solid var(--light-white-10);
  border-right: 3px solid var(--light-white-10);
  transform: rotate(45deg) translate(0.6rem);
}

.hero-cta::after {
  content: "";
  display: block;
  border: 3px solid var(--light-white-10);
  border-radius: 100vmax;
  width: 1.8rem;
  height: 1.8rem;
  transform: translate(1rem, -0.6rem);
  position: absolute;
  z-index: -1;
}

.hero-cta-text {
  margin-top: 0px;
}

/* handle the cta hover state */
.hero-cta:hover::after {
  background-color: var(--light-blue-10);
  border: none;
  /* transition: 0.5s ease-out; */
}
.hero-cta:hover::before {
  transform: translate(1.65rem, 0.5rem) rotate(45deg);
  transition: transform 0.5s ease-in-out;
}
.hero-cta:hover {
  border: 3px solid var(--light-white-10);
  background-color: transparent;
}

@media (max-width: 49em) {
  .hero-text {
    display: grid;
    align-content: center;
    justify-content: center;
  }
  .hero-cta-btn {
    justify-content: center;
  }
}

/* about section */

.about-section {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0 2rem;
  grid-template-areas: "about-animation-bar about-description about-description";
  padding: 0rem 0 6.5rem 0;
}

.about-animation-bar {
  grid-area: about-animation-bar;
  position: relative;
}

.about-description {
  grid-area: about-description;
}
@media (max-width: 49em) {
  .about-section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0 2rem;
    grid-template-areas: "about-description ";
  }
  .about-animation-bar {
    display: none;
  }
  .about-description {
    display: grid;
    gap: 1rem;
    grid-template-rows: 1fr;
  }
  .about-description p {
    text-align: center;
  }
}

/* animation container */

.wrapper .outer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 55%;
  width: 100%;
}

.wrapper .card {
  color: var(--light-white-10);
  background: linear-gradient(
    145deg,
    rgba(62, 84, 180, 0.675) 0.87%,
    rgba(76, 99, 201, 0.714) 30.87%,
    rgba(81, 152, 210, 0.763) 59.26%,
    rgba(81, 152, 210, 0.96) 69.26%,
    rgb(84, 193, 217) 100%
  );
  /* Set a maximum width for the card */
  max-width: 270px;
  /* max-width: 30%;  */
  /* Make the card responsive within its container */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  border-radius: 100px 100px;
  box-shadow: 0px 10px 15px var(--dark-blue-60);
  animation: animate 15s linear infinite;
  animation-play-state: running;
  animation-delay: calc(3s * var(--delay));
  /* opacity: 1; */
}

/* .outer:hover .card {
  animation-play-state: paused;
} */

.wrapper:hover {
  animation-play-state: paused;
  cursor: pointer;
}
.wrapper .card:last-child {
  animation-delay: calc(-3s * var(--delay));
}

@keyframes animate {
  0% {
    opacity: 0;
    transform: translateY(180%) scale(0.5);
  }
  5%,
  20% {
    opacity: 0.5;
    transform: translateY(180%) scale(0.6);
  }
  25%,
  40% {
    opacity: 0.8;
    transform: translateY(100%) scale(0.8);
  }
  45%,
  60% {
    opacity: 1;
    transform: translateY(0%) scale(1);
    pointer-events: auto;
  }
  65%,
  80% {
    opacity: 0.8;
    transform: translateY(-100%) scale(0.8);
  }
  85%,
  95% {
    opacity: 0.5;
    transform: translateY(-180%) scale(0.6);
  }
  100% {
    opacity: 0;
    transform: translateY(-180%) scale(0.5);
  }
}

/* .card .content {
  display: flex;
  justify-content: center;
  align-items: center;
} */
.card .content p {
  margin: 0;
}

/* Media query for smaller screens */
@media (max-width: 768px) {
  .wrapper .card {
    max-width: 30%;
  }
}

/* Media query for smaller screens */
@media (max-width: 702px) {
  .about-animation-bar {
    display: none;
  }
}

/* skills section */

.skills {
  display: grid;
  place-items: center;
  margin: 0 auto;
  /* section divider space */
  padding: 0rem 0 6.5rem 0;
}

.skills div img {
  width: auto;
  height: 60px;
}

.skills div img:hover {
  transform: scale(1.2);
}

.skill-active {
  transform: scale(1.1);
  color: var(--light-blue-10);
  transition: transform 0.5s ease-in-out;
}

.skill-replace {
  transform: scale(1);
  transition: transform 0.5s ease-in-out;
}

#skill-title-1 p {
  margin-top: 0px;
  margin-bottom: 1rem;
}
#skill-title-2 p {
  margin-top: 0px;
}

/* respo */

/* Tablet and Desktop version */
@media (min-width: 600px) {
  .skills {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 0.9rem;
  }

  #skill-display-3 {
    display: none;
  }

  #skill-title-1 {
    display: none;
  }

  #skill-title-1 p {
    margin-top: 0px;
  }
  #skill-title-2 p {
    margin-top: 0px;
  }

  .skill-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 200px;
    display: flex;
    justify-content: space-between;
  }

  .skill-wrapper div {
    width: 100px;
    height: auto;
    position: absolute;
    transition: transform 0.5s ease-in-out;
    display: flex;
    justify-content: center;
  }

  #i1 {
    left: 0px;
    bottom: 0px;
    transform: scale(1);
  }
  #i2 {
    left: 100px;
    bottom: 25px;
    transform: scale(1.2);
  }
  #i3 {
    left: 200px;
    bottom: 50px;
    transform: scale(1.5);
  }
  #i4 {
    left: 300px;
    bottom: 25px;
    transform: scale(1.2);
  }
  #i5 {
    left: 400px;
    bottom: 0px;
    transform: scale(1);
  }

  #i6 {
    left: 0px;
    top: 0px;
    transform: scale(1);
  }
  #i7 {
    left: 100px;
    top: 25px;
    transform: scale(1.2);
  }
  #i8 {
    left: 200px;
    top: 50px;
    transform: scale(1.5);
  }
  #i9 {
    left: 300px;
    top: 25px;
    transform: scale(1.2);
  }
  #i10 {
    left: 400px;
    top: 0px;
    transform: scale(1);
  }
}

/* tablet version */
@media (max-width: 599.9px) and (min-width: 479.9909px) {
  .skills {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 0.9rem;
  }
  #skill-title-2 {
    display: none;
  }
  #skill-title-1 p {
    margin-top: 0px;
  }
  #skill-display-3 {
    display: none;
  }
  .skill-wrapper div {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease-in-out;
    display: flex;
    justify-content: center;
    padding: 0px 5px;
  }
  .skill-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(1, 1fr);
    display: flex;
    justify-content: space-between;
  }
}

/* Mobile version */
@media (max-width: 479.99px) {
  .skills {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(1, 1fr);
    row-gap: 0.9rem;
  }
  #skill-title-2 {
    display: none;
  }
  #skill-title-1 p {
    margin-top: 0px;
  }
  #skill-display-1,
  #skill-display-2 {
    display: none;
  }

  .skill-wrapper div {
    height: auto;
    transition: transform 0.5s ease-in-out;
  }
  .skill-wrapper {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 1rem;
    justify-items: center;
  }
}

/* ___________service-container__________ */
.services-section {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 3rem;
  justify-content: center;
  justify-items: center;
  /* section divider space */
  padding: 0rem 0 18rem 0;
}

.services-container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 325px);
  grid-column-gap: 1.5rem;
  align-items: center;
}

.services-container .service-box {
  max-width: 346.58px;
  max-height: 325px;

  /* 
  min-width: 266.58px;
  min-height: 245px; */
}

.services-title {
  text-align: center;
}
.services-title p {
  margin-top: 0;
}

/* ___________single-service__________ */
.single-service-v0 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr) 0.5fr;
  grid-row-gap: 10px;

  min-width: 15em;
  max-width: 25em;
  color: var(--light-white-10);

  /* border gradient */
  background: linear-gradient(#101630, #101630) padding-box,
    linear-gradient(to bottom, rgb(72, 48, 193), rgb(84, 193, 217)) border-box;
  border: 10px solid transparent;
  border-radius: 15px;

  /* box-shadow; */
  box-shadow: 13px 15px 41px 0px rgba(84, 193, 217, 1);
  -webkit-box-shadow: 13px 15px 41px 0px rgba(84, 193, 217, 1);
  -moz-box-shadow: 13px 15px 41px 0px rgba(84, 193, 217, 1);
}

.single-service {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, 1fr) 0.5fr;
  grid-row-gap: 10px;

  color: var(--light-white-10);

  /* border gradient */
  background: linear-gradient(#101630, #101630) padding-box,
    linear-gradient(to bottom, rgb(72, 48, 193), rgb(84, 193, 217)) border-box;
  border: 10px solid transparent;
  border-radius: 15px;

  /* box-shadow; */
  box-shadow: 13px 15px 41px 0px rgba(84, 193, 217, 1);
  -webkit-box-shadow: 13px 15px 41px 0px rgba(84, 193, 217, 1);
  -moz-box-shadow: 13px 15px 41px 0px rgba(84, 193, 217, 1);
}

/* __________service-title__________ */
.single-service .service-title {
  grid-area: 1 / 1 / 2 / 2;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 0;
  line-height: normal;
  text-align: center;
  width: 100%;
}

.single-service .service-title p {
  word-spacing: 9999rem;
  display: table-caption;
  margin-top: 0;
}

/* ______________________service-icon______________________ */
.single-service .service-icon {
  grid-area: 2 / 1 / 3 / 2;

  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

/* _______service-info_______ */
.single-service .service-info {
  grid-area: 3 / 1 / 4 / 2;
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 15px;
}

.single-service .service-info .ellipse {
  width: 22px;
  height: 22px;
  border-radius: 11px;
  border: 5px solid;
  border-color: #54c1d9;
}

.single-service .service-info span {
  color: #dfdfdf;
  font-size: 0.8rem;
  font-weight: 500;
  margin-right: 5px;
  display: none;
}
.single-service .service-info a {
  text-decoration: none;
  display: flex;
}

.single-service:hover {
  cursor: pointer;
}

.single-service:hover .service-info .ellipse {
  animation: bounce 1s ease-in-out infinite;
}
@media (min-width: 48em) {
  .single-service .service-info:hover span {
    display: block;
  }
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  33% {
    transform: translateY(-10px);
  }
  50% {
    transform: translateY(0);
  }
  66% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY();
  }
}

@media (min-width: 62em) and (max-width: 69.75em) {
  .services-container {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(3, 285px);
    grid-column-gap: 1.5rem;
  }
}

@media (min-width: 50em) and (max-width: 61.999em) {
  :root {
    --fs-service-card-title: var(--fs-600); /* service-card-title=26px */
  }

  .services-container {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(3, 220px);
    grid-column-gap: 1.5rem;
  }

  .services-container {
    grid-template-rows: 230px;
  }

  .single-service {
    height: 220px;
    row-gap: 0px;
  }

  .single-service .service-info {
    padding: 0 15px 15px 0;
  }

  .single-service .service-title p {
    margin-top: 5px;
  }
}

@media (min-width: 38em) and (max-width: 49.999em) {
  :root {
    --fs-service-card-title: var(--fs-400); /* service-card-title=26px */
  }

  .services-container {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(3, 160px);
    grid-column-gap: 1.2rem;
  }

  .services-container {
    grid-template-rows: 200px;
  }

  .single-service {
    height: 190px;
    row-gap: 0px;
  }

  .single-service .service-info {
    padding: 0 15px 15px 0;
  }

  .single-service .service-title p {
    margin-top: 5px;
  }

  .single-service .service-icon img {
    width: 50px;
  }
}

@media (min-width: 30em) and (max-width: 37.999em) {
  :root {
    --fs-service-card-title: var(--fs-300); /* service-card-title=26px */
  }

  .services-container {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(3, 130px);
    grid-column-gap: 1rem;
  }

  .services-container {
    grid-template-rows: 160px;
  }

  .single-service {
    height: 160px;
    row-gap: 0px;
  }

  .single-service .service-info {
    padding: 0 15px 15px 0;
  }

  .single-service .service-title p {
    margin-top: 5px;
  }

  .single-service .service-icon img {
    width: 40px;
  }

  .single-service .service-info .ellipse {
    width: 18px;
    height: 18px;
    border-radius: 11px;
    border: 4px solid;
    border-color: #54c1d9;
  }
}

@media (max-width: 29.999em) {
  :root {
    --fs-service-card-title: var(--fs-500); /* service-card-title=26px */
  }

  .services-container {
    display: grid;
    grid-template-columns: 220px;
    grid-template-rows: repeat(3, 200px);
    grid-row-gap: 1rem;
  }

  .single-service {
    height: 180px;
    max-height: 200px;
    row-gap: 0px;
  }

  .single-service .service-info {
    padding: 0 15px 15px 0;
  }

  .single-service .service-title p {
    margin-top: 5px;
  }

  .single-service .service-icon img {
    width: 50px;
  }

  .single-service .service-info .ellipse {
    width: 18px;
    height: 18px;
    border-radius: 11px;
    border: 4px solid;
    border-color: #54c1d9;
  }
}

/* contact section */

.contact-section {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 0.2fr 2fr 0.6fr;
  /* min-height: 100vh; */
  border-top-right-radius: 3em;
  border-top-left-radius: 3em;
  background: linear-gradient(
    130deg,
    rgba(72, 48, 193, 0.9) 0%,
    rgba(76.11, 97.65, 201.22, 0.65) 30.87%,
    rgba(80.55, 151.27, 210.09, 0.71) 65.26%,
    rgba(84, 193, 217, 0.68) 100%
  );
}

.contact-section .contact-title {
  grid-area: 1 / 2 / 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 1.2rem 0;
}

.contact-section .contact-title p {
  margin-top: 0;
}
.contact-section .contact-form {
  grid-area: 2 / 2 / 3 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-section .contact-form .form {
  background: linear-gradient(
    130deg,
    rgba(84, 193, 217, 0.68) 0%,
    rgba(80.55, 151.27, 210.09, 0.71) 43.5%,
    rgba(76.11, 97.65, 201.22, 0.65) 72.5%,
    rgba(72, 48, 193, 0.81) 100%
  );
  border-radius: 20px;
  box-sizing: border-box;
  /* height: 500px; */
  padding: 20px;
  width: 400px;
}

.contact-section .footer {
  margin: 25px 10vw;
  border-top: 2px solid #8a8d99;
  grid-area: 3 / 1 / 4 / 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.contact-section .footer .copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1.5rem;
  flex-direction: column;
}

.contact-section .footer .copyright p {
  margin-top: 0px;
  color: var(--dark-blue-60);
}

#contact-form-send-status-display {
  display: block;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  background-color: var(--light-blue-10-shadow-50);
}

.msg-send-success {
  color: var(--light-white-10);
  border-left: 8px solid green;
  text-align: center;
}
.msg-send-fail {
  color: var(--light-white-10);
  border-left: 8px solid red;
  text-align: center;
}

.input-container {
  /* 50px */
  height: 3.125em;
  position: relative;
  width: 100%;
}

.input-container-msg {
  height: 10.5rem;
  position: relative;
  width: 100%;
}

.m-t-20 {
  margin-top: 20px;
}

.m-t-10 {
  margin-top: 10px;
}

.input {
  background-color: #101630;
  border-radius: 12px;
  border: 0;
  box-sizing: border-box;
  color: #eee;
  font-size: 18px;
  height: 100%;
  outline: 0;
  padding: 4px 20px 0;
  width: 100%;
}

textarea#msg {
  resize: none;
  scrollbar-width: none;
}

.tag {
  background-color: #101630;
  border-radius: 10px;
  height: 20px;
  left: 20px;
  position: absolute;
  top: -20px;
  transform: translateY(0);
  transition: transform 200ms;
  width: 76px;
  display: none;
}

.tag-small {
  width: 55px;
}

.input:focus ~ .tag,
.input:not(:placeholder-shown) ~ .tag {
  transform: translateY(8px);
  display: block;
}

.placeholder {
  color: #8a8d99;
  left: 20px;
  line-height: 14px;
  pointer-events: none;
  position: absolute;
  transform-origin: 0 50%;
  transition: transform 200ms, color 200ms;
  top: 20px;
}

.input:focus ~ .placeholder,
.input:not(:placeholder-shown) ~ .placeholder {
  transform: translateY(-28px) translateX(10px) scale(0.75);
}

.input:not(:placeholder-shown) ~ .placeholder {
  color: #8a8d99;
}

.input:focus ~ .placeholder {
  color: #ffffff;
}

.contact-section .contact-form .form .submit {
  background-color: #101630;
  border-radius: 12px;
  border: 2px solid #101630;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  font-size: 1.4rem;
  height: 50px;
  /* margin-top: 38px; */
  /* outline: 0; */
  text-align: center;
  /* width: 100%; */
  padding: 2px 30px;
}

.contact-section .contact-form .form .submit:hover {
  /* background-color: rgba(255, 255, 255, 0); */
  box-sizing: border-box;
  color: #8a8d99;
}
.contact-section .contact-form .form .submit:active {
  background-color: rgba(255, 255, 255, 0);
  box-sizing: border-box;
  border: 2px solid #101630;
  color: #8a8d99;
}

@media (max-width: 450px) {
  .contact-section .contact-form .form {
    margin: 0;
    padding: 20px;
    width: 250px;
  }
  .contact-section .contact-form .form .submit {
    width: 100%;
  }
}

.footer-social-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

.footer-social-icons a {
  width: 1.2rem;
  height: auto;
}
.footer-social-icons div {
  height: 8.2rem;
  width: auto;
}

.footer-social-icons a svg:hover {
  transform: scale(1.2);
}
.footer-social-icons a svg path {
  fill: #101630;
}
.footer-social-icons div svg line {
  stroke: #101630;
}

#email-icon-link-footer-id svg path {
  fill: none;
  stroke: #101630;
}

.footer-social-icons a img:hover {
  transform: scale(1.2);
}

/* animation sections */

.fadeup-enter {
  animation: fadeup 2s forwards;
}

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

.fadedown-enter {
  animation: fadedownEnterDone 2s forwards;
}

@keyframes fadedownEnterDone {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ----- */
.animate-section {
  animation: fadeIn 100ms forwards;
}

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

.fadeLeft-enter {
  animation: fadeleft 3s forwards;
}

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

.fadeRight-enter {
  animation: faderight 2s forwards;
}

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