/* table of contents

1. Fonts
2. Global Settings
3. Components
4. Nav Menu
5. Homepage
  5.1 Hero
  5.2 Strategy
  5.3 Services
  5.4 Testimonials
  5.5 Contact
6. Footer
7. Thank You Page
8. Legal
9. Blog
  9.1 Blog Home
10. Contact page

*/

/*========
  1. Fonts
  ========*/

@font-face {
  font-family: "LexendDeca-Light";
  src: url(fonts/LexendDeca-Light.woff2);
}

@font-face {
  font-family: "LexendDeca-Regular";
  src: url(fonts/LexendDeca-Regular.woff2);
}

@font-face {
  font-family: "LexendDeca-SemiBold";
  src: url(fonts/LexendDeca-SemiBold.woff2);
}

@font-face {
  font-family: "Roboto-Regular";
  src: url(fonts/Roboto-Regular.woff2);
}

/*==================
  2. Global Settings
  ==================*/

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

:root {
  --ff-body: "Roboto-Regular";
  --ff-heading-light: "LexendDeca-Light";
  --ff-heading-secondary: "LexendDeca-Regular";
  --ff-heading-primary: "LexendDeca-SemiBold";

  --fs-body: 16px;
  --fs-display: 56px;
  --fs-h1: 50px;
  --fs-h2: 40px;
  --fs-h3: 20px;
  --fs-h4: 18px;

  --clr-bg: #faf8ed;
  --clr-body: #666;
  --clr-primary: #2d3134;
  --clr-accent: #f66f4d;
  --clr-accent-light: #fcd3c9;
  --clr-secondary: #3d42df;
  --clr-light-grey: #f8f8f8;
}

.display-font {
  font-family: var(--ff-heading-primary);
  font-size: var(--fs-display);
  color: var(--clr-primary);
}

h1 {
  font-family: var(--ff-heading-primary);
  font-size: var(--fs-h1);
  color: var(--clr-primary);
}

h2 {
  font-family: var(--ff-heading-primary);
  font-size: var(--fs-h2);
  color: var(--clr-primary);
  line-height: 1.2;
}

h3 {
  font-family: var(--ff-heading-secondary);
  font-size: var(--fs-h3);
  color: var(--clr-primary);
}

h4 {
  font-family: var(--ff-heading-secondary);
  font-size: var(--fs-h4);
  color: var(--clr-primary);
}

p {
  font-family: var(--ff-body);
  font-size: var(--ff-body);
  color: var(--clr-body);
  line-height: 1.5;
}

html {
  scroll-behavior: smooth;
}

.my-bg-light {
  background-color: var(--clr-bg);
}

.my-bg-dark {
  background-color: var(--clr-accent-light);
}

.clr-accent {
  color: var(--clr-accent);
}

body,
html {
  overflow-x: hidden;
}

body {
  overscroll-behavior-y: none;
}

section {
  padding: 4rem 0;
}

@media (min-width: 992px) {
  section {
    padding: 6rem 0;
  }
}

.section-heading-center {
  text-align: center;
}

.fitted-90 {
  width: 90%;
  max-width: 1240px;
  margin: 0 auto;
}

.fitted-80 {
  width: 80%;
  max-width: 1024px;
  margin: 0 auto;
}

.text-align-center-container {
  text-align: center;
}

@media (max-width: 1199px) and (min-width: 992px) {
  :root {
    --fs-display: 46px;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  :root {
    --fs-display: 54px;
    --fs-h1: 44px;
  }
}

@media (max-width: 1023px) {
  :root {
    --fs-h2: 36px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-display: 36px;
    --fs-h1: 40px;
    --fs-h2: 32px;
    --fs-h3: 18px;
    --fs-h4: 16px;
  }
}

/*=============
  3. Components
  =============*/

.button {
  border-radius: 100px;
  padding: 10px 22px;
  font-family: var(--ff-heading-secondary);
  cursor: pointer;
  font-size: var(--fs-body);
  line-height: 1.5;
}

.button-fill {
  background-color: var(--clr-secondary);
  border: 2px solid var(--clr-secondary);
  color: #fff;
}

.button-outline {
  background-color: #fff;
  color: var(--clr-secondary);
  border: 2px solid var(--clr-secondary);
  transition: background-color 0.3s, color 0.3s;
}

.button-outline:hover {
  background-color: var(--clr-secondary);
  color: #fff;
}

.button-outline-accent {
  background-color: #fff;
  color: var(--clr-accent);
  border: 2px solid var(--clr-accent);
  transition: background-color 0.3s, color 0.3s;
}

.button-outline-accent:hover {
  background-color: var(--clr-accent);
  color: #fff;
}

.title-divider {
  border: none;
  border-bottom: 4px solid var(--clr-accent);
  width: 22%;
  margin: 1rem 0;
  opacity: 1;
}

.title-divider-centered {
  margin: 1.5rem auto 4rem;
}

@media (max-width: 767px) {
  .title-divider-centered {
    margin: 1.5rem auto 3rem;
  }
}

@media (min-width: 768px) {
  .title-divider {
    width: 15%;
  }
}

@media (min-width: 1024px) {
  .title-divider {
    width: 10%;
  }
}

.small-divider {
  border: none;
  border-bottom: 3px solid var(--clr-accent);
  width: 30%;
  margin: 10px 0;
  opacity: 1;
  background: none;
}

.section-subtitle {
  margin-bottom: 10px;
}

/*===========
  3. Nav Menu
  ===========*/

.fitted-90-nav,
.fitted-90-footer {
  width: 90%;
  max-width: 1440px;
  margin: 0 auto;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 0;
  position: relative;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--ff-heading-primary);
  font-size: 24px;
  color: var(--clr-primary);
  line-height: 1.3;
}

.logo:hover {
  color: var(--clr-primary);
}

.logo-img {
  width: 75px;
  margin-right: 1rem;
}

@media (min-width: 768px) {
  .logo-img {
    width: 90px;
  }
}

.nav-links {
  background-color: #fff;
  box-shadow: 0px 5px 15px 2px #f66f4d2b;
  padding: 1rem;
  display: flex;
  align-items: center;
  border-radius: 100px;
}

@media (min-width: 1121px) {
  .nav-link-with-border {
    border-right: 1px solid #bbb;
  }
}

.nav-links li {
  list-style: none;
}

.nav-links a {
  font-family: var(--ff-heading-secondary);
  font-size: var(--fs-body);
  color: #000;
  text-decoration: none;
  padding: 0 1.5rem;
}

.nav-item-subtitle {
  display: inline-block;
  font-size: 13px;
  font-family: var(--ff-heading-light);
  color: var(--clr-body);
  padding: 0 1.5rem;
}

a.nav-cta {
  background-color: var(--clr-secondary);
  color: #fff;
  border-radius: 100px;
  padding: 12px 20px;
}

.burger {
  display: none;
  cursor: pointer;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: var(--clr-primary);
  margin: 5px;
  transition: all 0.3s ease;
}

@media (max-width: 1120px) {
  .fitted-90-nav {
    width: 100%;
    padding: 2rem 5%;
  }

  .nav-links {
    display: block;
    border-radius: 1rem 0 0 1rem;
    width: 60%;
    position: absolute;
    right: 0;
    top: 100%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
    z-index: 10;
    border-width: 3px 0 3px 3px;
    border-color: #f66f4d73;
    border-style: solid;
  }

  .nav-links li {
    opacity: 0;
    width: 100%;
    padding: 1rem 0;
  }

  .nav-links a {
    margin-left: 0;
    width: 100%;
    display: inline-block;
  }

  .nav-item-subtitle {
    padding: 5px 0;
  }

  .nav-links .nav-cta {
    margin-left: 20px;
    display: inline;
  }

  .burger {
    display: block;
  }
}

@media (max-width: 767px) {
  .nav-links {
    width: 95%;
  }
}

.nav-active {
  transform: translateX(0%);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line-1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line-2 {
  opacity: 0;
}

.toggle .line-3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* ===========
   5. Homepage
   =========== */

/* ========
   5.1 Hero
   ======== */

.hero {
  padding: 3rem 0 8rem;
}

.hero-row {
  align-items: center;
}

.hero-img {
  width: 80%;
}

.hero-subtitle {
  font-size: 20px;
  font-family: var(--ff-heading-secondary);
  color: var(--clr-primary);
}

@media (max-width: 1023px) {
  .hero-subtitle {
    font-size: 18px;
  }
}

.hero-display-font {
  line-height: 1.2;
  margin-top: 20px;
}

.hero-button {
  margin-top: 2rem;
}

svg#freepik_stories-order-food:not(.animated) .animable {
  opacity: 0;
}
svg#freepik_stories-order-food.animated #freepik--Device--inject-36 {
  animation: 4s Infinite linear floating;
  animation-delay: 0s;
}
@keyframes floating {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.animator-hidden {
  display: none;
}

@media (max-width: 991px) {
  .hero-img {
    width: 100%;
    margin-bottom: 3rem;
  }
  .hero-display-font {
    margin-top: 10px;
  }
}

@media (max-width: 767px) {
  .hero-subtitle {
    font-size: 18px;
  }
  .hero {
    padding: 1rem 0 4rem;
  }
}

.to-top-arrow {
  width: 50px;
  background: white;
  padding: 10px;
  position: fixed;
  border-radius: 10px;
  bottom: 5%;
  right: 4%;
  z-index: 10;
  box-shadow: 0px 5px 15px 2px #2d31343d;
}

@media (max-width: 991px) {
  .to-top-arrow {
    width: 40px;
    bottom: 3%;
    right: 5%;
  }
}

/* ============
   5.2 Strategy
   ============ */

.strategy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px;
}

@media (max-width: 991px) {
  .web-design-card,
  .seo-card {
    margin-bottom: 2.5rem;
  }
}

.strategy-icon {
  width: 65px;
  margin-bottom: 1rem;
}

.strategy-title {
  font-family: var(--ff-heading-primary);
  margin-bottom: 10px;
  line-height: 1.3;
}

.strategy-description {
  line-height: 1.5;
  font-size: 17px;
}

.strategy-arrow-text-container {
  display: flex;
  margin-top: 3rem;
}

.strategy-arrow-container {
  display: inline-block;
  background-color: #fff;
  height: 80px;
  padding: 0 5px;
  border: 3px solid #f66f4d73;
  border-radius: 100px;
  margin-right: 1.5rem;
}

.strategy-arrow-container a {
  -webkit-tap-highlight-color: transparent;
}

.strategy-arrow {
  width: 40px;
  margin-top: 20px;
}

.strategy-cta-col {
  margin-top: 3rem;
}

.strategy-cta-arrow {
  margin: 1rem;
  width: 60px;
}

@media (max-width: 511px) {
  .strategy-cta-arrow {
    transform: rotate(45deg);
  }
}

/* ================
   5.4 Testimonials
   ================ */

.testimonials {
  clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%, 0 90%);
}

.testimonial-container {
  padding: 0 20% 3%;
}

.testimonial-text {
  text-align: center;
  font-size: 24px;
  line-height: 1.7;
  font-family: var(--ff-heading-secondary);
  color: var(--clr-primary);
}

.flex-container {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
}

.client-testimonial-author {
  display: flex;
  align-items: center;
}

.client-testimonial-img {
  border-radius: 100%;
  width: 90px;
  margin-right: 2rem;
  vertical-align: middle;
}

.author-description h4 {
  margin-bottom: 0.2rem;
}

.author-description p {
  line-height: 1.2;
  margin-bottom: 0;
}

@media (max-width: 1023px) {
  .client-col-2 {
    margin-top: 3rem;
  }
}

@media (max-width: 991px) {
  .testimonial-text {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .testimonial-text {
    font-size: 18px;
  }
  .client-testimonial-author {
    flex-direction: column;
    text-align: center;
  }
  .client-testimonial-img {
    margin: 0 0 1rem;
  }
}

.testimonial-button {
  display: block;
  margin: 0 auto;
  margin-top: 2.5rem;
}

/* ===========
   5.5 Pricing
   =========== */

/* Switcher styles */

.switcher-row {
  padding: 0 10px;
}

.switcher-col {
  text-align: center;
  margin-bottom: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switcher-option {
  font-size: 20px;
  font-family: var(--ff-heading-secondary);
}

.switcher-option-1 {
  margin-right: 3rem;
}

.switcher-option-2 {
  margin-left: 3rem;
}

span.switcher-option-sub {
  font-family: var(--ff-body);
  font-size: 16px;
  color: var(--clr-body);
}

.switcher-btn {
  position: relative;
  display: inline-block;
}

.switcher-btn input {
  position: relative;
  width: 60px;
  height: 30px;
  border-radius: 25px;
  outline: none;
  cursor: pointer;
  appearance: none;
  display: flex;
  align-items: center;
  padding: 0 2rem;
  background-color: #c6c6c6;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  transition: background-color 0.4s;
}

.switcher-btn input:checked {
  background-color: var(--clr-accent);
}

.switcher-btn label {
  height: 30px;
  width: 30px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  transform: scale(1.2) translateX(-27px);
  border-radius: 100%;
  cursor: pointer;
  transition: transform 0.3s;
}

.switcher-btn input:checked + label {
  left: auto;
  transform: scale(1.2) translateX(5px);
}

@media (max-width: 767px) {
  .switcher-btn input {
    height: 25px;
    width: 50px;
  }
  .switcher-btn label {
    height: 25px;
    width: 25px;
  }
  .switcher-option {
    font-size: 18px;
  }
  .switcher-option-1 {
    margin-right: 1rem;
  }

  .switcher-option-2 {
    margin-left: 1rem;
  }

  span.switcher-option-sub {
    font-size: 14px;
  }
}

/* comfort card styles */

.comfort-card {
  text-align: center;
}

.comfort-card {
  margin-bottom: 3rem;
}

.pricing {
  padding-bottom: 2rem;
}

@media (min-width: 768px) {
  .comfort-card-row-2 {
    margin-bottom: 0;
  }
  .pricing {
    padding-bottom: 4rem;
  }
}

.comfort-card img {
  width: 60px;
  margin-bottom: 10px;
}

.comfort-card h4 {
  font-size: var(--fs-body);
  line-height: 1.3;
}

/* Pricing card styles */

.pricing-info {
  padding: 5rem 0 3rem;
  font-size: 18px;
}

.pricing-card {
  background-color: var(--clr-bg);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 5px 15px 2px #2d31343d;
  text-align: center;
  position: relative;
  /* border: 4px solid rgba(246, 111, 77, 0.45); */
}

@media (max-width: 991px) {
  .pricing-card {
    margin-bottom: 3rem;
  }
}

.pricing-badge {
  width: 150px;
  position: absolute;
  top: 23px;
  right: -34px;
  transform: rotate(45deg);
  pointer-events: none;
}

.focus-card-br {
  display: none;
}

@media (max-width: 1290px) and (min-width: 992px) {
  .focus-card-br {
    display: block;
  }
}

.plan-name {
  font-size: 24px;
}

.pricing-card-focus .plan-name {
  font-family: var(--ff-heading-primary);
  color: var(--clr-secondary);
}

.plan-price {
  font-family: var(--ff-heading-primary);
  font-size: var(--fs-h2);
  color: var(--clr-primary);
  margin-bottom: 0;
}

.plan-price-custom {
  line-height: 1.1;
}

.plan-monthly {
  font-family: var(--ff-heading-secondary);
  font-size: 18px;
}

.request-monthly {
  font-size: 15px;
  margin-top: 8px;
}

.pricing-card-divider {
  margin: 1.5rem;
}

.plan-feature {
  margin-bottom: 12px;
}

.plan-feature a,
p.plan-feature {
  color: var(--clr-primary);
  text-decoration: none;
}

.collapse-arrow {
  width: 12px;
  margin-left: 5px;
}

.marketing-feature {
  display: none;
}

.price-starting {
  font-family: var(--ff-heading-secondary);
  font-size: 20px;
}

.feature-explained-list {
  list-style: none;
  padding-left: 0;
}

.feature-explained-list li:before {
  content: "~ ";
}

.plan-feature:before {
  content: "✓ ";
}

.marketing-feature .plan-feature:before {
  content: "+ ";
}

.feature-explained-list li {
  color: var(--clr-body);
  font-size: 16px;
  margin-bottom: 8px;
}

.plan-button {
  margin: 1rem 0 0.5rem;
}

/* ===========
   5.6 Contact
   =========== */

.hidden {
  display: none;
}

@media (min-width: 992px) {
  .contact {
    padding: 6rem 0;
  }
}

.contact h3 {
  margin: 2rem auto 0;
  line-height: 1.3;
}

.contact-form {
  margin: 3rem auto 0;
}

@media (min-width: 768px) {
  .contact-form,
  .contact h3 {
    width: 75%;
  }
}

@media (min-width: 1024px) {
  .contact-form,
  .contact h3 {
    width: 50%;
  }
}

.contact-form input#name,
.contact-form input#email,
.contact-form input#gastro-name,
.contact-form select,
.contact-form textarea {
  font-family: var(--ff-body);
  width: 100%;
  margin-top: 10px;
}

.contact-form-button {
  display: block;
  margin-left: auto;
  margin-top: 1rem;
}

.contact-form label {
  display: none;
}

.form-control:focus {
  color: var(--clr-primary);
  border-color: var(--clr-accent);
  outline: 0;
  box-shadow: 0 0 0 0.25rem #f66f4d73;
}

/*=========
  6. Footer
  =========*/

footer {
  background-color: var(--clr-primary);
}

@media (min-width: 992px) {
  .footer-logo-box {
    width: 85%;
  }
}

.footer-logo-box {
  background-color: var(--clr-bg);
  border: 3px solid var(--clr-accent);
  border-radius: 10px;
  padding: 20px 30px;
}

.footer-logo-box p {
  font-family: var(--ff-heading-light);
  font-size: var(--fs-h4);
  padding: 12px 0;
}

footer .logo {
  margin-bottom: 1rem;
}

.footer-contact-icons-row {
  margin-top: 1rem;
  list-style: none;
  display: flex;
  padding-left: 0;
  align-items: center;
}

.footer-contact-icon {
  width: 22px;
  margin-right: 15px;
}

@media (min-width: 992px) {
  .footer-nav-col {
    margin-top: 20px;
  }
}

.footer-nav-col .title-divider {
  width: 50px;
  border-bottom-width: 3px;
}

.footer-nav-col ul {
  padding-left: 0;
}

.footer-nav-title {
  color: #fff;
}

.footer-nav-item {
  list-style: none;
  margin-top: 1rem;
}

.footer-nav-item a {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  color: #fff;
  text-decoration: none;
  line-height: 1.3;
}

@media (max-width: 991px) {
  .footer-nav-col {
    padding: 2rem 0 0 30px;
  }
}

/*=================
  7. Thank You Page
  =================*/

.thank-you {
  padding: 0 0 6rem;
}

.thank-you-img {
  width: 50%;
}

@media (max-width: 1199px) and (min-width: 768px) {
  .thank-you-img {
    width: 75%;
  }
}

@media (max-width: 767px) {
  .thank-you-img {
    width: 100%;
  }
}

svg#freepik_stories-mail-sent:not(.animated) .animable {
  opacity: 0;
}

svg#freepik_stories-mail-sent.animated
  #freepik--Character--inject-1--inject-25 {
  animation: 6s Infinite linear floating;
  animation-delay: 0s;
}

@keyframes floating {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.thank-you-col h3 {
  margin: 2rem 0 6rem;
  line-height: 1.4;
}

.thank-you-col p {
  font-size: 18px;
}

.thank-you ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0;
}

.thank-you-social-icons {
  width: 30px;
  margin: 10px;
}

.button-back-home {
  margin-top: 3rem;
}

/*========
  8. Legal
  ========*/

.legal h2 {
  margin-top: 2rem;
}

/*=======
  9. Blog
  =======*/

/*=============
  9.1 Blog Home
  =============*/

.blog-home {
  padding-top: 3rem;
}

.blog-home hr {
  margin-bottom: 2rem;
}

.blog-home .subtitle {
  font-size: 18px;
  margin-bottom: 4rem;
}

.blog-home a {
  text-decoration: none;
}

.blog-card {
  background-color: #fff;
  border-radius: 10px;
  position: relative;
  box-shadow: 0px 5px 15px 2px #2d31343d;
  transition: transform 0.3s;
}

.blog-card:hover {
  transform: scale(1.02);
}

.blog-card-image {
  background-image: url("../media/blog/3-vorteile-von-webseiten-fuer-restaurants.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 250px;
  border-radius: 10px 10px 0 0;
}

.blog-card-body {
  background-color: var(--clr-light-grey);
  padding: 1.5rem;
  border-radius: 0 0 10px 10px;
}

.blog-card-meta {
  font-size: 14px;
  font-family: var(--ff-body);
  color: var(--clr-body);
  margin-top: 3rem;
}

.h2-blog-card-title {
  font-family: var(--ff-heading-primary);
  font-size: 22px;
  color: var(--clr-primary);
}

/*=============
  9.2 Blog Post
  =============*/

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 8px;
  width: 0%;
  background-color: var(--clr-accent);
  border-radius: 0 4px 4px 0;
  z-index: 100;
  transition: width 0.2s ease-out;
}

.fitted-blog-post {
  width: 80%;
  max-width: 650px;
  margin: 0 auto;
}

.blog-post-title-section {
  padding: 3rem 0;
}

.blog-post-title-section .row {
  align-items: center;
}

.blog-post-title {
  line-height: 1.15;
  margin-bottom: 1rem;
}

.blog-post-head-img {
  width: 100%;
  border-radius: 10px;
}

.blog-post-body-section {
  padding: 2rem 0 5rem;
}

.blog-post-body-section .col-12 h2 {
  font-size: 32px;
  margin: 2rem 0;
}

.blog-post-body-section .col-12 p {
  color: var(--clr-primary);
  font-size: 18px;
  line-height: 170%;
}

.blog-post-inline-image {
  margin: 1rem 0 2rem;
  border-radius: 10px;
  width: 100%;
}

.blog-post-cta-row {
  margin-top: 1.5rem;
}

.blog-post-cta-button {
  margin: 10px 0 4rem;
}

.blog-post-social-share-icon {
  width: 40px;
  background: var(--clr-primary);
  padding: 10px;
  border-radius: 5px;
}

@media (max-width: 767px) {
  .blog-post-title-section .fitted-80 {
    width: 95%;
  }
  .blog-post-body-section .col-12 h2 {
    font-size: 28px;
  }
  .blog-post-title-section .img-col {
    padding-top: 1rem;
  }
  .fitted-blog-post {
    width: 95%;
  }
}

.key-take-aways-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 2rem 1rem;
  margin: 2rem 0;
}

.key-take-aways-card h3 {
  font-size: 24px;
  font-family: var(--ff-heading-primary);
}

#key-take-aways-content {
  margin-bottom: 0;
  color: var(--clr-body);
}

/*================
  10. Contact Page
  ================*/

.contact-page h2 {
  margin-bottom: 1rem;
}

/*============
  11. 404 Page
  ============*/

.na-404 {
  padding: 0 0 3rem;
}

.na-404 h2 {
  margin-bottom: 2rem;
}

svg#freepik_stories-404-error:not(.animated) .animable {
  opacity: 0;
}
svg#freepik_stories-404-error.animated #freepik--Clouds--inject-14 {
  animation: 14s Infinite linear shake;
  animation-delay: 0s;
}
@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}