/* 

0 - 600px: Phone
600 - 900px: Tablet portrait
900 - 1200: Tablet landscape
1200 - 1800: our normal styles apply
1800px + : Big desktop

*/
/*
  $breakpoint argument choices:
  - phone (600/16 = 37.5em)
  - tab-port
  - tab-land
  - big-desktop
  
  1em = 16px
  */
@keyframes slide {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }

.animatable {
  /* initially hide animatable objects */
  visibility: hidden;
  /* initially pause animatable objects their animations */
  animation-play-state: paused; }

/* show objects being animated */
.animated {
  visibility: visible;
  animation-fill-mode: both;
  animation-duration: 1s;
  animation-play-state: running; }

/* CSS Animations (extracted from http://glifo.uiparade.com/) */
@keyframes fadeIn {
  0%,
  60% {
    opacity: 0; }
  100% {
    opacity: 1; } }

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

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

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3); }
  50% {
    transform: scale(1.05); }
  70% {
    transform: scale(0.9); }
  100% {
    opacity: 1;
    transform: scale(1); } }

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    transform: translateX(-2000px); }
  60% {
    transform: translateX(20px); }
  80% {
    transform: translateX(-5px); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes bounceInRight {
  0% {
    opacity: 0;
    transform: translateX(2000px); }
  60% {
    transform: translateX(-20px); }
  80% {
    transform: translateX(5px); }
  100% {
    opacity: 1;
    transform: translateX(0); } }

@keyframes moveUp {
  0% {
    transform: translateY(40px); }
  100% {
    transform: translateY(0); } }

@keyframes fadeBgColor {
  0%,
  70% {
    background: none; }
  100% {
    background: #464646; } }

.animated.animationDelay {
  animation-delay: 0.4s; }

.animated.animationDelaySm {
  animation-delay: 0.2s; }

.animated.animationDelayMed {
  animation-delay: 1.2s; }

.animated.animationDelayLong {
  animation-delay: 1.6s; }

.animated.fadeBgColor {
  animation-name: fadeBgColor; }

.animated.bounceIn {
  animation-name: bounceIn; }

.animated.bounceInRight {
  animation-name: bounceInRight; }

.animated.bounceInLeft {
  animation-name: bounceInLeft; }

.animated.fadeIn {
  animation-name: fadeIn; }

.animated.fadeInDown {
  animation-name: fadeInDown; }

.animated.fadeInUp {
  animation-name: fadeInUp; }

.animated.moveUp {
  animation-name: moveUp; }

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

html {
  font-size: 62.5%;
  scroll-behavior: smooth; }
  @media (min-width: 93.75em) {
    html {
      font-size: 75%; } }

body {
  font-family: "Poppins", sans-serif;
  font-weight: 400; }

.background {
  background-image: url(../../img/background/background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  padding: 15rem 4.8rem 8rem; }
  @media (max-width: 75em) {
    .background {
      padding: 15rem 4.8rem 8rem; } }
  @media (max-width: 62.5em) {
    .background {
      padding: 13rem 3.2rem 6.2rem 3.2rem; } }
  @media (max-width: 48.125em) {
    .background {
      padding: 13rem 3.2rem 5.8rem 3.2rem; } }
  @media (max-width: 37.5em) {
    .background {
      padding: 10.5rem 2.4rem 4.4rem; } }

p {
  font-size: 1.6rem;
  line-height: 1.5; }

.title-primary {
  font-size: 6.4rem;
  font-weight: 600; }
  @media (max-width: 62.5em) {
    .title-primary {
      font-size: 5.6rem;
      text-align: center; } }
  @media (max-width: 37.5em) {
    .title-primary {
      font-size: 4rem;
      text-align: center; } }

.title-secondary {
  font-size: 4rem; }
  @media (max-width: 62.5em) {
    .title-secondary {
      font-size: 3.2rem; } }
  @media (max-width: 37.5em) {
    .title-secondary {
      font-size: 2.8rem; } }

.title-tertiary {
  font-size: 2.4rem; }
  @media (max-width: 62.5em) {
    .title-tertiary {
      font-size: 2.4rem; } }
  @media (max-width: 37.5em) {
    .title-tertiary {
      font-size: 2rem; } }

.title-fourth {
  font-size: 2rem;
  font-weight: 600; }
  @media (max-width: 37.5em) {
    .title-fourth {
      font-size: 1.8rem; } }

.title-fifth {
  font-size: 1.8rem;
  font-weight: 600; }

.subtitle {
  font-size: 1.4rem;
  font-weight: 200; }
  @media (max-width: 37.5em) {
    .subtitle {
      font-size: 1.2rem; } }

.title--white {
  color: #fff; }

.title--navy {
  color: #052e75; }

.label__text {
  font-size: 1.2rem;
  opacity: 60%; }

.input__text {
  font-size: 1.4rem; }

.text--justify {
  text-align: justify;
  text-justify: inter-word; }

.text {
  color: #000;
  font-size: 1.6rem;
  text-align: center; }
  .text--exc {
    text-align: start;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden; }
  @media (max-width: 37.5em) {
    .text {
      font-size: 1.4rem; } }

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

.margin-sides--m {
  margin: 0 8.8rem; }
  @media (max-width: 75em) {
    .margin-sides--m {
      margin: 0 2rem; } }
  @media (max-width: 62.5em) {
    .margin-sides--m {
      margin: 0 3.2rem; } }

.margin-sides--lg {
  margin: 0 16rem; }
  @media (max-width: 75em) {
    .margin-sides--lg {
      margin: 0 8rem; } }
  @media (max-width: 62.5em) {
    .margin-sides--lg {
      margin: 0 auto;
      max-width: 65rem; } }

.margin-bottom--xxl {
  margin-bottom: 6.4rem; }
  @media (max-width: 37.5em) {
    .margin-bottom--xxl {
      margin-bottom: 4.8rem; } }

.margin-bottom--xl {
  margin-bottom: 4.8rem; }
  @media (max-width: 48.125em) {
    .margin-bottom--xl {
      margin-bottom: 4rem; } }
  @media (max-width: 37.5em) {
    .margin-bottom--xl {
      margin-bottom: 2.4rem; } }

.margin-bottom--xl-xxl {
  margin-bottom: 5.6rem; }
  @media (max-width: 37.5em) {
    .margin-bottom--xl-xxl {
      margin-bottom: 3.2rem; } }

.margin-bottom--lg {
  margin-bottom: 4rem; }
  @media (max-width: 48.125em) {
    .margin-bottom--lg {
      margin-bottom: 3.2rem; } }
  @media (max-width: 37.5em) {
    .margin-bottom--lg {
      margin-bottom: 2.4rem; } }

.margin-bottom--md-lg {
  margin-bottom: 2.8rem; }
  @media (max-width: 48.125em) {
    .margin-bottom--md-lg {
      margin-bottom: 2.2rem; } }
  @media (max-width: 37.5em) {
    .margin-bottom--md-lg {
      margin-bottom: 2rem; } }

.margin-bottom--sm {
  margin-bottom: 2.4rem; }

.hr {
  color: rgba(255, 255, 255, 0.15);
  height: 1px;
  width: 100%;
  margin-bottom: 4.8rem; }
  @media (min-width: 93.75em) {
    .hr {
      margin-bottom: 5.6rem; } }
  @media (max-width: 62.5em) {
    .hr {
      width: 100%;
      margin-right: 0;
      margin-left: 0; } }
  @media (max-width: 37.5em) {
    .hr {
      margin-bottom: 3.2rem; } }

.cta__btn {
  padding: 1.2rem 2.4rem;
  font-size: 1.6rem;
  font-family: "Outfit", sans-serif;
  border: none;
  background-color: #267dfd;
  border-radius: 25px;
  color: #fff;
  text-decoration: none;
  cursor: pointer; }
  .cta__btn:hover {
    background-color: rgba(38, 125, 253, 0.85); }
  .cta__btn--nav-sm {
    font-size: 1.6rem;
    color: #fff;
    text-decoration: none; }

.btn__outline {
  padding: 1.2rem 2.4rem;
  font-size: 1.6rem;
  font-family: "Outfit", sans-serif;
  border: 1px solid #fff;
  background-color: transparent;
  text-decoration: none;
  color: #fff;
  border-radius: 25px; }
  .btn__outline:hover {
    opacity: 80%; }

.btn__outline--black {
  padding: 1.2rem 2.4rem;
  font-size: 1.6rem;
  font-family: "Outfit", sans-serif;
  border: 1px solid #000;
  background-color: transparent;
  text-decoration: none;
  color: #000;
  border-radius: 25px; }
  .btn__outline--black:hover {
    background-color: #000;
    color: #fff; }
  @media (max-width: 37.5em) {
    .btn__outline--black {
      font-size: 1.4rem;
      text-wrap: nowrap;
      width: 9.8rem; } }

/* The container */
.checkbox-container {
  display: block;
  position: relative;
  padding-left: 2.4rem;
  font-family: "Outfit", sans-serif;
  cursor: pointer;
  font-size: 1.4rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.checkbox-container span {
  text-decoration: underline;
  color: #267dfd; }

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0; }

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.6rem;
  width: 1.6rem;
  background-color: #fff;
  border: 1px solid #000;
  border-radius: 25px; }

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
  background-color: #ccc; }

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: #267dfd;
  border: 1px solid #267dfd; }

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  top: 0;
  left: 0; }

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block; }

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 4px;
  top: -1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

.collapsible {
  background-color: transparent;
  color: #fff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: 1px solid #fff;
  text-align: left;
  outline: none;
  font-size: 1.6rem; }

.collapsible:after {
  content: "\002B";
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px; }

.active:after {
  content: "\2212"; }

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #fff; }
  .content__text {
    color: #052e75;
    padding-top: 16px;
    padding-bottom: 16px; }

.contact {
  padding: 12.8rem 4.8rem;
  background-color: #fafdff; }
  @media (max-width: 62.5em) {
    .contact {
      padding: 11.2rem 4.8rem; } }
  @media (max-width: 62.5em) {
    .contact {
      padding: 9.6rem 3.2rem; } }
  @media (max-width: 48.125em) {
    .contact {
      padding: 0rem 3.2rem 7.3rem; } }
  @media (max-width: 37.5em) {
    .contact {
      padding: 6.4rem 1.6rem; } }
  .contact__wrapper {
    padding: 4rem;
    background-color: #fff;
    border-radius: 25px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25); }
    @media (max-width: 48.125em) {
      .contact__wrapper {
        padding: 3.2rem; } }
  .contact__details {
    display: flex;
    flex-direction: column;
    gap: 3.2rem; }
    .contact__details--section {
      display: flex;
      flex-direction: column;
      gap: 2.4rem; }
      @media (max-width: 37.5em) {
        .contact__details--section {
          gap: 1.6rem; } }
    .contact__details--text {
      font-size: 1.6rem; }
      @media (max-width: 37.5em) {
        .contact__details--text {
          font-size: 1.4rem; } }
  .contact__info {
    display: flex;
    gap: 8px;
    align-items: center; }
    .contact__info--section {
      display: flex;
      flex-direction: column;
      gap: 3.2rem; }
      @media (max-width: 37.5em) {
        .contact__info--section {
          gap: 2.4rem; } }
    .contact__info--text {
      text-decoration: underline;
      font-size: 1.6rem;
      color: #000;
      cursor: pointer; }
      .contact__info--text:hover {
        opacity: 80%; }
  .contact__map {
    height: auto; }

.location {
  border-radius: 25px;
  width: 100%;
  height: 100%; }
  @media (max-width: 48.125em) {
    .location {
      height: 49rem; } }
  @media (max-width: 37.5em) {
    .location {
      height: 46rem; } }

.doctors {
  padding: 0 4.8rem;
  background-color: #fafdff; }
  @media (max-width: 62.5em) {
    .doctors {
      padding: 0 3.2rem; } }
  @media (max-width: 37.5em) {
    .doctors {
      padding: 0 1.6rem; } }
  .doctors__cards {
    display: flex;
    flex-direction: column;
    gap: 3.2rem; }
  .doctors__wrapper {
    background-color: #fff;
    border-radius: 25px;
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 13rem;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
    padding: 4rem; }
    @media (max-width: 75em) {
      .doctors__wrapper {
        margin: 0 7rem; } }
    @media (max-width: 62.5em) {
      .doctors__wrapper {
        margin: 0; } }
    @media (max-width: 48.125em) {
      .doctors__wrapper {
        padding: 2.4rem; } }
    @media (max-width: 37.5em) {
      .doctors__wrapper {
        padding: 2.4rem 2.4rem 2.8rem 2.4rem; } }
  .doctors__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem; }
    @media (max-width: 48.125em) {
      .doctors__container {
        gap: 2.4rem; } }
    @media (max-width: 37.5em) {
      .doctors__container {
        grid-template-columns: 1fr;
        gap: 2.4rem; } }
  .doctors__img {
    width: 100%;
    border-radius: 25px; }

@media (max-width: 37.5em) {
  .img__container {
    display: grid;
    justify-items: center; } }

.img__container--hidden {
  display: none; }
  @media (max-width: 37.5em) {
    .img__container--hidden {
      display: grid;
      justify-items: center;
      margin-bottom: 2.4rem; } }

@media (max-width: 37.5em) {
  .img__container--visible {
    display: none; } }

.content__container {
  align-self: center; }
  @media (max-width: 37.5em) {
    .content__container {
      justify-self: center; } }

.content__info {
  display: flex;
  flex-direction: column;
  gap: 1.6rem; }
  @media (max-width: 48.125em) {
    .content__info {
      gap: 1.2rem; } }
  @media (max-width: 37.5em) {
    .content__info {
      align-items: center;
      gap: 1.2rem; } }

.content__details {
  display: flex;
  flex-direction: column;
  gap: 1.6rem; }
  @media (max-width: 48.125em) {
    .content__details {
      gap: 8px; } }
  @media (max-width: 37.5em) {
    .content__details {
      align-items: center;
      gap: 4px; } }

.content__details--title {
  font-size: 3.2rem; }
  @media (max-width: 62.5em) {
    .content__details--title {
      font-size: 2.8rem; } }
  @media (max-width: 48.125em) {
    .content__details--title {
      font-size: 2.4rem; } }
  @media (max-width: 37.5em) {
    .content__details--title {
      font-size: 2.4rem; } }

@media (max-width: 37.5em) {
  .content__detailed--text {
    text-align: center; } }

.doctors__position {
  color: #267dfd;
  font-weight: 500;
  font-size: 2rem; }
  @media (max-width: 62.5em) {
    .doctors__position {
      font-size: 1.8rem; } }
  @media (max-width: 48.125em) {
    .doctors__position {
      font-size: 1.6rem; } }

.content__detailed--text {
  font-size: 1.6rem; }
  @media (max-width: 48.125em) {
    .content__detailed--text {
      font-size: 1.4rem; } }

.clients {
  overflow: hidden;
  white-space: nowrap; }
  .clients__slide {
    display: inline-block;
    animation: 15s slide infinite linear; }
  .clients__slide img {
    margin-right: 2.4rem;
    height: 3rem; }
    @media (max-width: 62.5em) {
      .clients__slide img {
        height: 2.4rem; } }
    @media (max-width: 37.5em) {
      .clients__slide img {
        height: 2rem; } }

.flex__left {
  align-self: flex-start; }

.flex--col {
  display: flex;
  flex-direction: column;
  gap: 2.4rem; }
  @media (max-width: 37.5em) {
    .flex--col {
      flex-direction: row;
      justify-content: space-between; } }

.flex--col--all {
  display: flex;
  flex-direction: column;
  justify-content: center; }

.flex--row {
  display: flex; }

.justify--center {
  justify-content: center; }

.justify--between {
  justify-content: space-between; }

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

.gap--lg {
  gap: 3.2rem; }

.gap--m {
  gap: 2.4rem; }

.gap--sm-md {
  gap: 1.6rem; }

.gap--sm {
  gap: 1.6rem; }

.gap--vsm {
  gap: 8px; }

.gap--vvsm {
  gap: 4px; }

.founder {
  padding: 4.8rem 14rem;
  background-image: linear-gradient(to bottom right, #267dfd 25%, #052e75); }
  @media (max-width: 75em) {
    .founder {
      padding: 4.8rem 10rem; } }
  @media (max-width: 62.5em) {
    .founder {
      padding: 4rem 3.2rem; } }
  @media (max-width: 37.5em) {
    .founder {
      padding: 3.2rem 1.6rem; } }
  .founder__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem; }
    @media (max-width: 62.5em) {
      .founder__grid {
        gap: 3.2rem; } }
    @media (max-width: 48.125em) {
      .founder__grid {
        grid-template-columns: 1fr;
        gap: 3.2rem; } }
  .founder__right {
    justify-self: center;
    align-self: center; }
    @media (max-width: 48.125em) {
      .founder__right {
        display: none; } }
  .founder__img {
    width: 37rem;
    height: 37rem;
    border-radius: 25px; }
    @media (max-width: 48.125em) {
      .founder__img {
        width: 30rem;
        height: 30rem; } }
  .founder__content {
    display: flex;
    flex-direction: column;
    gap: 3.2rem; }
    @media (max-width: 37.5em) {
      .founder__content {
        gap: 2.4rem; } }
  .founder__card {
    padding: 1.6rem;
    background-color: #fafdff;
    border-radius: 25px;
    width: 250px; }
    @media (max-width: 62.5em) {
      .founder__card {
        width: 90%; } }
    @media (max-width: 37.5em) {
      .founder__card {
        width: 70%;
        justify-self: center; } }
    .founder__card--content {
      display: flex;
      flex-direction: column;
      gap: 8px; }
    .founder__card--info {
      display: flex;
      flex-direction: column;
      gap: 1.2rem; }
      @media (max-width: 48.125em) {
        .founder__card--info {
          align-items: center; } }
    .founder__card--name {
      font-weight: 600; }
    .founder__card--title {
      font-size: 1.8rem;
      font-weight: 300;
      color: #fff; }
    .founder__card--socials {
      display: flex;
      gap: 1.6rem; }
      @media (max-width: 48.125em) {
        .founder__card--socials {
          justify-content: center; } }
  .founder__social--icon {
    width: 3.2rem;
    height: 3.2rem;
    fill: #fff; }

.founder__img--hidden {
  display: none; }
  @media (max-width: 48.125em) {
    .founder__img--hidden {
      display: block; } }

.gallery {
  padding: 12.8rem 4.8rem 0;
  background-color: #fafdff; }
  @media (max-width: 75em) {
    .gallery {
      padding: 11.2rem 4.8rem 0; } }
  @media (max-width: 62.5em) {
    .gallery {
      padding: 9.6rem 3.2rem 0; } }
  @media (max-width: 48.125em) {
    .gallery {
      padding: 7.3rem 3.2rem; } }
  @media (max-width: 37.5em) {
    .gallery {
      padding: 6.4rem 1.6rem 0; } }
  .gallery__container {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(7, 5vw); }
    @media (max-width: 48.125em) {
      .gallery__container {
        gap: 8px; } }
    @media (max-width: 37.5em) {
      .gallery__container {
        gap: 4px; } }
  .gallery__item--1 {
    grid-row: 1 / span 2;
    grid-column: 1 / span 2; }
  .gallery__item--2 {
    grid-row: 1 / span 3;
    grid-column: 3 / span 3; }
  .gallery__item--3 {
    grid-row: 1 / span 2;
    grid-column: 6 / 7; }
  .gallery__item--4 {
    grid-row: 1 / span 2;
    grid-column: 7 / span 2; }
  .gallery__item--5 {
    grid-row: 3 / span 3;
    grid-column: 1 / span 2; }
  .gallery__item--6 {
    grid-row: 4 / span 2;
    grid-column: 3 / span 2; }
  .gallery__item--7 {
    grid-row: 4 / 5;
    grid-column: 5 / 6; }
  .gallery__item--8 {
    grid-row: 3 / span 2;
    grid-column: 6 / span 2; }
  .gallery__item--9 {
    grid-row: 3 / span 3;
    grid-column: 8 / 9; }
  .gallery__item--10 {
    grid-row: 6 / span 2;
    grid-column: 1 / 2; }
  .gallery__item--11 {
    grid-row: 6 / span 2;
    grid-column: 2 / span 2; }
  .gallery__item--12 {
    grid-row: 6 / span 2;
    grid-column: 4 / 5; }
  .gallery__item--13 {
    grid-row: 5 / span 3;
    grid-column: 5 / span 3; }
  .gallery__item--14 {
    grid-row: 6 / span 2;
    grid-column: 8 / 9; }
  .gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; }

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.4rem;
  row-gap: 3.2rem; }
  @media (max-width: 48.125em) {
    .grid {
      grid-template-columns: 1fr;
      gap: 2.4rem; } }
  .grid__flex--col {
    display: flex;
    flex-direction: column;
    gap: 2.4rem; }
    @media (max-width: 37.5em) {
      .grid__flex--col {
        gap: 1.6rem; } }

.grid--gap--unified {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem; }
  @media (max-width: 37.5em) {
    .grid--gap--unified {
      grid-template-columns: 1fr;
      gap: 1.6rem; } }

.grid--3--col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.6rem; }
  @media (max-width: 37.5em) {
    .grid--3--col {
      grid-template-columns: 1fr 1fr;
      row-gap: 4.8rem; } }

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5.6rem;
  justify-items: center; }
  @media (max-width: 62.5em) {
    .hero__grid {
      grid-template-columns: 1fr;
      gap: 4rem; } }
  @media (max-width: 37.5em) {
    .hero__grid {
      grid-template-columns: 1fr;
      gap: 2.4rem; } }

.hero__left {
  width: 100%;
  display: grid;
  justify-items: center; }

.hero__right {
  width: 100%;
  display: grid;
  justify-items: center; }
  @media (max-width: 62.5em) {
    .hero__right {
      justify-items: center; } }

.hero__parag {
  font-size: 1.8rem;
  font-weight: 400;
  width: 90%;
  justify-self: center; }
  @media (max-width: 62.5em) {
    .hero__parag {
      text-align: center;
      margin-bottom: 0; } }
  @media (max-width: 37.5em) {
    .hero__parag {
      font-size: 1.6rem;
      text-align: center;
      margin-bottom: 0; } }

.hero__btns {
  display: flex;
  justify-content: center;
  gap: 1.6rem; }
  @media (max-width: 62.5em) {
    .hero__btns {
      flex-direction: column;
      align-items: center;
      display: none; } }

.hero__btns--hidden {
  display: none; }
  @media (max-width: 62.5em) {
    .hero__btns--hidden {
      display: flex;
      flex-direction: row;
      justify-content: center; } }
  @media (max-width: 37.5em) {
    .hero__btns--hidden {
      display: grid;
      justify-content: center; } }

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

.h1 {
  justify-self: center;
  line-height: 1.4; }

.h1--service {
  width: 80%; }
  @media (max-width: 37.5em) {
    .h1--service {
      width: 90%; } }

.p--service {
  width: 80%; }
  @media (max-width: 37.5em) {
    .p--service {
      width: 85%; } }

.service--btns {
  display: flex;
  justify-content: start;
  gap: 1.6rem; }

.h1--about {
  width: 80%; }
  @media (max-width: 37.5em) {
    .h1--about {
      width: 90%; } }

.p--about {
  width: 80%; }
  @media (min-width: 93.75em) {
    .p--about {
      width: 68%; } }
  @media (max-width: 37.5em) {
    .p--about {
      width: 85%; } }

.how {
  padding: 4.8rem 14rem;
  background-image: linear-gradient(to bottom right, #267dfd 25%, #052e75); }
  @media (max-width: 75em) {
    .how {
      padding: 4.8rem 10rem; } }
  @media (max-width: 62.5em) {
    .how {
      padding: 4rem 3.2rem; } }
  @media (max-width: 37.5em) {
    .how {
      padding: 3.2rem 1.6rem; } }
  .how__title {
    margin-bottom: 4.8rem; }
    @media (max-width: 37.5em) {
      .how__title {
        margin-bottom: 3.2rem; } }
  .how__grid {
    display: grid;
    grid-template-columns: 1fr 10px 1fr;
    column-gap: 4rem;
    row-gap: 3.2rem;
    padding: 0 14rem; }
    @media (min-width: 93.75em) {
      .how__grid {
        padding: 0 10rem; } }
    @media (max-width: 75em) {
      .how__grid {
        padding: 0 6rem; } }
    @media (max-width: 62.5em) {
      .how__grid {
        padding: 0; } }
    @media (max-width: 37.5em) {
      .how__grid {
        grid-template-columns: 1fr;
        gap: 2.4rem; } }
  .how__item--content {
    display: flex;
    flex-direction: column;
    gap: 1.6rem; }
    @media (max-width: 37.5em) {
      .how__item--content {
        gap: 1.2rem; } }
  .how__item--top {
    display: flex;
    flex-direction: column;
    gap: 2.4rem; }
    @media (max-width: 37.5em) {
      .how__item--top {
        gap: 1.6rem; } }
  .how__number {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    color: #267dfd;
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    text-align: center;
    background-color: #fafdff; }
    @media (max-width: 37.5em) {
      .how__number {
        font-size: 1.8rem;
        width: 4rem;
        height: 4rem; } }
  .how__item--1 {
    grid-column: 3 / 4; }
    @media (max-width: 37.5em) {
      .how__item--1 {
        grid-column: 2 / 3;
        grid-row: 1 / 2; } }
  @media (max-width: 37.5em) {
    .how__item--2 {
      grid-column: 2 / 3;
      grid-row: 2 / 3; } }
  .how__item--3 {
    grid-column: 3 / 4;
    grid-row: 3 / 4; }
    @media (max-width: 37.5em) {
      .how__item--3 {
        grid-column: 2 / 3;
        grid-row: 3 / 4; } }
  .how__item--4 {
    grid-column: 1 / 2;
    grid-row: 4 / 5; }
    @media (max-width: 37.5em) {
      .how__item--4 {
        grid-column: 2 / 3;
        grid-row: 4 / 5; } }
  .how__item--5 {
    grid-column: 3 / 4;
    grid-row: 5 / 6; }
    @media (max-width: 37.5em) {
      .how__item--5 {
        grid-column: 2 / 3;
        grid-row: 5 / 6; } }
  .how__item--6 {
    grid-column: 1 / 2;
    grid-row: 6 / 7; }
    @media (max-width: 37.5em) {
      .how__item--6 {
        grid-column: 2 / 3;
        grid-row: 6 / 7; } }
  .how__item--7 {
    grid-column: 3 / 4;
    grid-row: 7 / 8; }
    @media (max-width: 37.5em) {
      .how__item--7 {
        grid-column: 2 / 3;
        grid-row: 7 / 8; } }
  .how__line {
    width: 1px;
    grid-row: 1 / 8;
    justify-self: center; }
    @media (max-width: 37.5em) {
      .how__line {
        grid-column: 1 / 2;
        grid-row: 1 / 8; } }

.chevron-icon {
  height: 1.6rem;
  display: flex;
  align-self: center; }
  @media (max-width: 37.5em) {
    .chevron-icon {
      height: 1.4rem; } }

.card-icon {
  height: 3.2rem;
  fill: #267dfd; }
  @media (max-width: 37.5em) {
    .card-icon {
      height: 2.8rem; } }

.close-icon {
  fill: #fff;
  width: 2.2rem;
  height: 2.2rem;
  position: fixed;
  top: 2.2rem;
  right: 3.7rem;
  cursor: pointer; }
  @media (max-width: 37.5em) {
    .close-icon {
      top: 1.9rem;
      right: 2.1rem; } }

.menu-bars {
  width: 2.2rem;
  height: 2.2rem;
  fill: #002f54; }

.quote-icon {
  width: 4.6rem;
  fill: #052e75; }

.select-chevron {
  width: 1.6rem;
  fill: #000; }

.social-icon {
  fill: #fff;
  width: 3.2rem;
  height: 3.2rem; }

.tooth-icon {
  width: 4.8rem;
  height: 4.8rem;
  fill: #267dfd; }

.contact-icon {
  width: 2.4rem;
  height: 2.4rem;
  fill: #052e75; }

.contact__social--icon {
  fill: #052e75;
  width: 3.2rem;
  height: 3.2rem; }

.mission {
  padding: 12.8rem 22rem;
  display: flex;
  flex-direction: column;
  gap: 4.8rem; }
  @media (min-width: 93.75em) {
    .mission {
      padding: 12.8rem 26rem; } }
  @media (max-width: 75em) {
    .mission {
      padding: 12.8rem 18rem;
      gap: 4rem; } }
  @media (max-width: 62.5em) {
    .mission {
      padding: 9.6rem 12rem;
      gap: 4rem; } }
  @media (max-width: 37.5em) {
    .mission {
      padding: 6.4rem 1.6rem;
      gap: 3.2rem; } }

.gallery__img {
  cursor: pointer;
  transition: 0.3s; }

.gallery__img:hover {
  opacity: 0.7; }

/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 230px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */ }
  @media (max-width: 37.5em) {
    .modal {
      padding-top: 200px; } }

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  max-height: 480px; }

/* Caption of Modal Image */
/* Add Animation */
.modal-content,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s; }

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0); }
  to {
    -webkit-transform: scale(1); } }

@keyframes zoom {
  from {
    transform: scale(0); }
  to {
    transform: scale(1); } }

/* The Close Button */
.close {
  position: absolute;
  top: 100px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s; }
  @media (max-width: 37.5em) {
    .close {
      right: 20px;
      top: 75px; } }

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer; }

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 600px) {
  .modal-content {
    width: 90%;
    max-height: 400px; } }

.logo {
  width: 120px; }
  .logo__container {
    display: flex;
    align-items: center;
    justify-content: center; }

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  position: fixed;
  width: 100%;
  background-color: #fafdff;
  z-index: 99999;
  padding: 1.6rem 4.8rem; }
  .nav__list {
    list-style: none;
    font-size: 1.6rem;
    display: flex;
    align-items: center;
    gap: 2.4rem; }
  .nav__link {
    text-decoration: none;
    color: #002f54;
    transition: all 1s; }
    .nav__link:after {
      display: block;
      content: "";
      border-bottom: solid 2px #002f54;
      transform: scaleX(0);
      transition: transform 250ms ease-in-out; }
    .nav__link:hover:after {
      transform: scaleX(1); }
    .nav__link.fromRight:after {
      transform-origin: 100% 50%; }
    .nav__link.fromLeft:after {
      transform-origin: 0% 50%; }
  @media (max-width: 62.5em) {
    .nav {
      display: none; } }

.nav-sticky {
  background-color: #fafdff;
  transition: all 0.4s; }

.hamburger-menu {
  fill: white; }

.nav-sm {
  color: #fff;
  display: none;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  background-color: #fafdff;
  z-index: 99999;
  padding: 1.6rem 3.2rem; }
  @media (max-width: 62.5em) {
    .nav-sm {
      display: flex;
      justify-content: space-between;
      align-items: center; } }
  @media (max-width: 37.5em) {
    .nav-sm {
      padding: 1.2rem 1.6rem; } }
  .nav-sm__link {
    text-decoration: none;
    color: #fff;
    padding: 8px;
    font-size: 2.4rem;
    display: block;
    /* Display block instead of inline */
    transition: 0.3s;
    /* Transition effects on hover (color) */ }
    .nav-sm__link:after {
      display: block;
      content: "";
      border-bottom: solid 2px #fff;
      transform: scaleX(0);
      transition: transform 250ms ease-in-out; }
    .nav-sm__link:hover:after {
      transform: scaleX(1); }
    .nav-sm__link.fromRight:after {
      transform-origin: 100% 50%; }
    .nav-sm__link.fromLeft:after {
      transform-origin: 0% 50%; }
  .nav-sm__list {
    background-color: #f8f9fa;
    padding: 3.2rem 1.2rem;
    height: 100%;
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    background-color: black;
    /* Black fallback color */
    background-color: rgba(0, 0, 0, 0.9);
    /* Black w/opacity */
    overflow-x: hidden;
    /* Disable horizontal scroll */
    transition: 0.5s;
    /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ }
    @media (max-width: 62.5em) {
      .nav-sm__list {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3.2rem; } }

.nav-sm ul {
  /* Make the markers disappear */
  list-style: none;
  font-size: 1.6rem; }

input[type="checkbox"]:not(:checked) + ul {
  display: none; }

.nav-sm input[type="checkbox"],
.nav-sm label {
  display: none; }

.nav-sm label {
  text-align: right;
  display: block;
  padding: 0.5em;
  line-height: 1.6em;
  align-self: center; }

@media (max-width: 1000px) {
  /* Because we are in mobile mode, we want to display it as a vertical list */
  /* We have two lists: the first one are the always visibile items
       in the menu bar. The second one is the one that will be hidden */
  .nav-sm ul:last-child {
    width: 100%;
    flex-basis: 100%; }
  .nav-sm ul li {
    margin-bottom: 0;
    width: 100%;
    text-align: right;
    padding: 0.5rem 0; } }

.our-company {
  padding: 0 24rem 12.8rem; }
  @media (min-width: 93.75em) {
    .our-company {
      padding: 0 21rem 12.8rem; } }
  @media (max-width: 75em) {
    .our-company {
      padding: 0 14rem 12.8rem; } }
  @media (max-width: 62.5em) {
    .our-company {
      padding: 0 13rem 9.6rem; } }
  @media (max-width: 37.5em) {
    .our-company {
      padding: 0 1.6rem 6.4rem; } }
  .our-company__title {
    margin-bottom: 6.4rem; }
    @media (max-width: 62.5em) {
      .our-company__title {
        margin-bottom: 4.8rem; } }
    @media (max-width: 37.5em) {
      .our-company__title {
        margin-bottom: 3.2rem; } }
  @media (max-width: 62.5em) {
    .our-company__wrapper {
      display: grid;
      grid-template-columns: 1fr;
      gap: 4rem; } }
  @media (max-width: 37.5em) {
    .our-company__wrapper {
      gap: 2.4rem; } }
  .our-company__container {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    margin-bottom: 4.8rem; }
    @media (max-width: 62.5em) {
      .our-company__container {
        justify-self: center;
        margin-bottom: 0;
        width: 100%; } }
    .our-company__container:last-child {
      margin-bottom: 0; }
  .our-company__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3.2rem; }
    @media (max-width: 62.5em) {
      .our-company__info {
        flex-direction: column;
        gap: 2.4rem; } }
    @media (max-width: 37.5em) {
      .our-company__info {
        gap: 1.6rem; } }
  .our-company__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.6rem;
    width: 36rem; }
    @media (max-width: 62.5em) {
      .our-company__left {
        width: 100%; } }
    @media (max-width: 37.5em) {
      .our-company__left {
        gap: 1.2rem; } }
  .our-company__right {
    width: 46rem; }
    @media (max-width: 37.5em) {
      .our-company__right p {
        font-size: 1.4rem; } }
    @media (max-width: 62.5em) {
      .our-company__right {
        width: 100%; } }
  .our-company__line {
    height: 1px;
    width: 100%;
    color: #000;
    opacity: 80%; }

.services {
  padding: 12.8rem 4.8rem;
  background-color: #fafdff; }
  @media (max-width: 75em) {
    .services {
      padding: 11.2rem 4.8rem; } }
  @media (max-width: 62.5em) {
    .services {
      padding: 9.6rem 3.2rem; } }
  @media (max-width: 48.125em) {
    .services {
      padding: 7.3rem 3.2rem; } }
  @media (max-width: 37.5em) {
    .services {
      padding: 6.4rem 1.6rem; } }

.card__content {
  padding: 3.2rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center; }
  .card__content--exc {
    padding: 3.2rem; }
  .card__content--fixheight {
    height: 308px; }
    @media (min-width: 93.75em) {
      .card__content--fixheight {
        height: 370px; } }
    @media (max-width: 75em) {
      .card__content--fixheight {
        height: 278px; } }
    @media (max-width: 62.5em) {
      .card__content--fixheight {
        height: 302px; } }
    @media (max-width: 48.125em) {
      .card__content--fixheight {
        padding: 2.4rem 1.6rem;
        height: 340px; } }
    @media (max-width: 43.75em) {
      .card__content--fixheight {
        padding: 2.4rem 1.6rem;
        height: 375px; } }
    @media (max-width: 39.9375em) {
      .card__content--fixheight {
        padding: 2.4rem;
        height: 250px; } }
    @media (max-width: 37.5em) {
      .card__content--fixheight {
        padding: 2.4rem 1.6rem;
        height: 270px; } }
    @media (max-width: 25em) {
      .card__content--fixheight {
        padding: 2.4rem 1.6rem;
        height: 290px; } }

.card__list .card__item {
  list-style: none; }

.card__link {
  user-select: none;
  display: block;
  background-color: #fafdff;
  border-radius: 25px;
  text-decoration: none;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
  transition: 0.2s ease; }
  .card__link--exc {
    background-color: none;
    border-radius: none;
    box-shadow: none; }
  .card__link:hover {
    border-color: #267dfd; }
  .card__link:active {
    cursor: grabbing; }

.card__list .card__link:hover .card__btn {
  color: #fff;
  background-color: #267dfd; }

.swiper-pagination-bullet {
  height: 13px;
  width: 13px;
  opacity: 0.5;
  background-color: #267dfd; }

.swiper-pagination-bullet-active {
  opacity: 1; }

.swiper-slide-button {
  color: #267dfd;
  margin-top: -35px; }
  @media (max-width: 37.5em) {
    .swiper-slide-button {
      display: none; } }

.text {
  color: #000;
  font-size: 1.6rem; }

.swiper-pagination-bullet {
  height: 13px;
  width: 13px;
  opacity: 0.5;
  background-color: #267dfd; }

.swiper-pagination-bullet-active {
  opacity: 1; }

.swiper-slide-button {
  color: #267dfd;
  margin-top: -35px; }
  @media (max-width: 37.5em) {
    .swiper-slide-button {
      display: none; } }

.portfolio {
  padding: 12.8rem 14rem; }
  @media (max-width: 75em) {
    .portfolio {
      padding: 12.8rem 10rem; } }
  @media (max-width: 62.5em) {
    .portfolio {
      padding: 9.6rem 3.2rem; } }
  @media (max-width: 62.5em) {
    .portfolio {
      padding: 6.4rem 1.6rem; } }
  .portfolio__intro {
    display: flex;
    flex-direction: column;
    gap: 2.4rem; }
    @media (max-width: 37.5em) {
      .portfolio__intro {
        gap: 2rem; } }
    .portfolio__intro--text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4.8rem; }
      @media (max-width: 62.5em) {
        .portfolio__intro--text {
          margin-bottom: 3.4rem; } }
      @media (max-width: 37.5em) {
        .portfolio__intro--text {
          margin-bottom: 2.8rem; } }
      .portfolio__intro--text p {
        font-size: 1.6rem; }
        @media (max-width: 37.5em) {
          .portfolio__intro--text p {
            font-size: 1.4rem; } }
  .portfolio__card--wrapper {
    margin-bottom: 3.5rem;
    padding: 4px 2px 2.4rem;
    overflow: hidden; }
    @media (max-width: 37.5em) {
      .portfolio__card--wrapper {
        margin: 0 0px 25px; } }
  .portfolio__card--img {
    width: 100%;
    object-fit: cover;
    border-radius: 25px; }
  .portfolio__text {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: center; }
    @media (max-width: 62.5em) {
      .portfolio__text {
        font-size: 2.2rem; } }
  .portfolio__card--title {
    font-size: 2.4rem;
    color: #052e75;
    font-weight: 600;
    text-align: center; }
    @media (max-width: 37.5em) {
      .portfolio__card--title {
        font-size: 2.2rem; } }

.card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 2.4rem;
  row-gap: 4rem; }
  @media (max-width: 75em) {
    .card__grid {
      grid-template-columns: 1fr 1fr;
      column-gap: 2.4rem;
      row-gap: 3.2rem; } }
  @media (max-width: 62.5em) {
    .card__grid {
      grid-template-columns: 1fr 1fr;
      column-gap: 2.4rem;
      row-gap: 3.2rem; } }
  @media (max-width: 48.125em) {
    .card__grid {
      grid-template-columns: 1fr 1fr;
      column-gap: 1.6rem;
      row-gap: 2.4rem; } }
  @media (max-width: 37.5em) {
    .card__grid {
      grid-template-columns: 1fr;
      gap: 2.4rem; } }

.portfolio__wrapper {
  margin-bottom: 0;
  padding-bottom: 4px; }

@media (max-width: 37.5em) {
  .title--portfolio {
    font-size: 2rem; } }

@media (max-width: 37.5em) {
  .text--portfolio {
    font-size: 1.4rem; } }

.services__card--wrapper {
  margin-bottom: 3.5rem;
  padding: 4px 2px 2.4rem;
  overflow: hidden; }

#main-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4rem; }

.select-body {
  position: relative;
  margin: 4px 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center; }

.select-body select {
  height: 100%;
  width: 100%;
  padding: 1.6rem 1.2rem;
  font-size: 1.6rem;
  border-radius: 25px;
  border: 1px solid #000;
  appearance: none;
  color: #000;
  font-family: "Outfit", sans-serif; }

.select-container label {
  font-family: "Outfit", sans-serif;
  font-size: 1.6rem; }

.select-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; }

#select-category-container select {
  background-color: #fff; }

#select-music-container select {
  background-color: #fff; }

#select-games-container select {
  background-color: #fff; }

#select-hearabout-container select {
  background-color: #fff; }

.testimonials {
  background-image: url(../../img/background/background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 4.8rem 24.4rem; }
  @media (min-width: 93.75em) {
    .testimonials {
      padding: 4.8rem 21rem; } }
  @media (max-width: 75em) {
    .testimonials {
      padding: 4.8rem 12rem; } }
  @media (max-width: 62.5em) {
    .testimonials {
      padding: 4rem 3.2rem; } }
  @media (max-width: 37.5em) {
    .testimonials {
      padding: 3.2rem 1.6rem; } }
  .testimonials p {
    font-size: 1.6rem; }
  .testimonials__card--wrapper {
    margin-bottom: 3.5rem;
    padding: 4px 2px 2.4rem;
    overflow: hidden; }
    @media (max-width: 37.5em) {
      .testimonials__card--wrapper {
        margin: 0 0px 25px; } }
  .testimonials__card--img {
    width: 8rem;
    height: 8rem;
    object-fit: cover;
    border-radius: 50%; }

.why-us {
  background-image: linear-gradient(to bottom right, #267dfd 25%, #052e75);
  color: #fff;
  padding: 4.8rem 14rem;
  font-size: 1.6rem; }
  .why-us__text {
    font-size: 1.4rem; }
  @media (max-width: 75em) {
    .why-us {
      padding: 4.8rem 10rem; } }
  @media (max-width: 62.5em) {
    .why-us {
      padding: 4rem 3.2rem; } }
  @media (max-width: 37.5em) {
    .why-us {
      padding: 3.2rem 1.6rem; } }
  .why-us__text {
    width: 80%;
    font-size: 1.6rem; }
    @media (max-width: 37.5em) {
      .why-us__text {
        font-size: 1.4rem; } }

.work {
  padding: 12.8rem 4.8rem; }
  @media (max-width: 75em) {
    .work {
      padding: 11.2rem 4.8rem; } }
  @media (max-width: 62.5em) {
    .work {
      padding: 9.6rem 3.2rem; } }
  @media (max-width: 48.125em) {
    .work {
      padding: 7.3rem 3.2rem; } }
  @media (max-width: 37.5em) {
    .work {
      padding: 6.4rem 1.6rem; } }

.footer {
  padding: 4.8rem 4.8rem 6.4rem;
  background-image: url(../../img/background/background.jpg);
  background-repeat: no-repeat;
  background-size: cover; }
  @media (max-width: 62.5em) {
    .footer {
      padding: 4rem 3.2rem; } }
  @media (max-width: 62.5em) {
    .footer {
      padding: 3.2rem 1.6rem; } }
  .footer__wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    justify-content: center;
    align-items: center; }
    @media (max-width: 37.5em) {
      .footer__wrapper {
        gap: 1.2rem; } }
  .footer__container {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    justify-content: center;
    align-items: center; }
    @media (max-width: 37.5em) {
      .footer__container {
        gap: 1.6rem; } }
  .footer__logo {
    width: 32rem;
    height: 22rem;
    fill: #fff; }
    @media (max-width: 37.5em) {
      .footer__logo {
        width: 22rem;
        height: 17rem; } }
  .footer__socials {
    display: flex;
    gap: 1.6rem; }

.copyright {
  font-size: 1.4rem;
  color: #fff;
  font-weight: 200; }
  @media (max-width: 37.5em) {
    .copyright {
      gap: 1.2rem; } }