/* width */
::-webkit-scrollbar {
  width: 4px;
}

/* width */
::-webkit-scrollbar {
  height: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #000;
  border-radius: 100vw;
  margin-block: 4px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #fff;
  /* border: 4px solid #9e9e9e; */
  border-radius: 100vw;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(161, 161, 161);
}

blockquote {
  text-indent: -0.45rem;
}
@supports (hanging-punctuation: first) {
  blockquote {
    text-indent: 0;
    hanging-punctuation: first;
  }
}

blockquote::before {
  content: open-quote;
}
blockquote::after {
  content: close-quote;
}
blockquote {
  quotes: "“" "”";
}

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

html,
body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  text-rendering: optimizeSpeed;
  font-family: "Roboto", sans-serif;
  background-color: #000;
  color: #fff;
  /* -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  transform: scale(0.9); */
}

ul {
  list-style: none;
  padding: 0;
}

a {
  text-decoration: none;
  color: rgb(255, 255, 255, 0.7);
}

a:hover {
  color: #fff;
}

img {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

p {
  line-height: 1.6;
  margin-bottom: 0 !important;
}

.main-wrapper {
  margin: 6rem 0 10rem 0;
}

.wrapper {
  margin-block: 7rem;
}

.container {
  max-width: 85% !important;
  --bs-gutter-x: unset;
}

.rows {
  position: relative;
  gap: 80px;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.unset {
  justify-content: unset !important;
}

/* Navbar section */

.navbar > .container {
  align-items: flex-end !important;
}

.logo-link {
  width: 30%;
}

.logo {
  width: 70%;
}

.navbar {
  --bs-navbar-brand-margin-end: unset;
}

.navbar-nav {
  gap: 1.5rem;
}

.navbar-link {
  color: #fff;
  opacity: 0.7;
}

.ham-menu {
  color: #fff;
  font-size: 1.5rem;
}

.active {
  color: #fff;
  opacity: 1;
  font-weight: bold;
}

.navbar-link:hover {
  opacity: 1;
  font-weight: bold;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
  outline: none;
  border: none;
  box-shadow: unset;
}

.navbar-toggler {
  padding: 0;
  border: none;
}

.bold {
  font-weight: 700;
}

/* Re-usable components */

.spacing {
  margin-left: 1em;
}

.percentage {
  max-width: 35%;
}

.divider {
  width: 100%;
  font-size: 14px;
  margin-block: 2rem;
  color: rgb(255, 255, 255, 0.4);
  text-align: end;
  position: relative;
}

.divider::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  top: 50%;
  background-color: rgb(255, 255, 255, 0.3);
  position: absolute;
  z-index: -2;
}

.divider span {
  background-color: #000;
  padding-left: 1.5rem;
}

.section-heading {
  font-family: "Antonio", sans-serif;
  letter-spacing: -1px;
  line-height: 1.1;
  font-size: 3.5rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.heading-1 {
  margin-top: 1rem;
}

.heading-3 {
  margin-top: 2rem;
}

.section-text {
  font-weight: 100;
  opacity: 0.8;
  max-width: 240px;
  line-height: 1.6;
}

.section-text--main {
  font-weight: 100;
  opacity: 0.7;
  max-width: 500px;
  line-height: 1.6;
  text-align: justify;
}

.subtitle {
  font-family: "Antonio", sans-serif;
  color: #fff;
  margin: 1.5rem 0 1rem 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.sub-subtitle {
  font-family: "Antonio", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

.text-title {
  font-family: "Antonio", sans-serif;
  font-size: 2rem;
  opacity: 1;
  max-width: 400px;
}

.no-max {
  max-width: unset;
}

.rtl {
  direction: rtl;
}

.block-auto {
  margin-block: auto;
}

/* About */

.about-portrait {
  max-width: 30%;
  object-fit: contain;
  height: auto;
}

.about-text {
  font-size: 1.125rem;
  gap: 0.8125rem;
  max-width: 650px;
  margin-top: 1rem;
  opacity: 0.7;
  text-align: justify;
}

.about-title {
  font-family: "Antonio", sans-serif;
  font-size: 3rem;
  text-transform: uppercase;
  margin: 4rem 0 2rem 0;
}

.width {
  width: 100%;
}

.border-b {
  border-bottom: 1px solid rgb(255, 255, 255);
  padding-bottom: 4px;
}

.main {
  background-color: #fff;
  color: #000;
}

.media-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 22%;
  gap: 1rem;

  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.img-resp {
  display: none;
}

/* Main section */

.frame {
  position: relative;
  right: 10%;
}

.section-title-large {
  font-family: "Antonio", sans-serif;
  font-size: 3.5rem;
  letter-spacing: -1px;
  text-transform: uppercase;
  line-height: 1;
  margin: 4rem 0 2rem 0;
  max-width: 500px;
}

.section-quote {
  font-weight: 100;
  opacity: 1;
  font-weight: bold;
  max-width: 500px;
  font-style: italic;
  line-height: 1.6;
}

.quoter {
  font-family: "Playfair Display", serif;
  opacity: 0.7;
  font-size: 14px;
  max-width: 500px;
}

.light-color {
  opacity: 0.3;
}

/* Proffesional Competencies */

.dynamic-grid {
  display: grid;
  grid-template-columns: repeat(4, 70px);
  grid-auto-rows: 70px;
  gap: 1em;
  grid-template-areas:
    "three four one one"
    "two two one one";
  margin-top: 6rem;
  max-height: 350px;
  animation: resize 10000ms ease infinite both;
}

@keyframes resize {
  0% {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }

  25% {
    grid-template-columns: 1fr 2fr 3fr;
    grid-template-rows: 1fr 2fr 3fr;
  }

  50% {
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-rows: 1fr 5fr 1fr;
  }

  75% {
    grid-template-columns: 3fr 2fr 1fr;
    grid-template-rows: 3fr 2fr 1fr;
  }

  100% {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
}

.d-one {
  grid-area: one;
}

.d-two {
  grid-area: two;
}

.d-three {
  grid-area: three;
}

.d-four {
  grid-area: four;
}

.alignment {
  max-width: 700px;
  margin-left: auto;
}

.accordion-item {
  background-color: rgb(26, 26, 26);
  color: #fff;
}

.accordion-button {
  background-color: #000;
  color: #fff;
  border-bottom: 1px solid rgb(255, 255, 255);
  outline: none;
  font-family: "Antonio", sans-serif;
  font-size: 1.875rem;
  letter-spacing: -1px;
  text-transform: uppercase;
  padding: 1rem 0 1rem 0 !important;
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-button:active,
.accordion-button:focus {
  outline: none;
  box-shadow: none;
  background-color: rgb(26, 26, 26);
  color: #fff;
  border: none;
  border-bottom: 1px solid rgb(255, 255, 255, 0.5);
}

.accordion-button:not(.collapsed) {
  color: #fff;
  background-color: rgb(26, 26, 26);
  border-bottom: 1px solid rgb(255, 255, 255, 0.5);
}

.list__title {
  font-family: "Antonio", sans-serif;
  font-size: 1.5rem;
  letter-spacing: -1px;
  text-transform: uppercase;
  text-align: center;
  padding: 1em;
}

.list__item {
  opacity: 0.6;
}

/* Key Projects */

.grid__wrapper {
  display: grid;
  gap: 1.5em;
  grid-template-areas:
    "one"
    "two"
    "three"
    "four"
    "five"
    "six"
    "seven"
    "eight"
    "nine"
    "ten";
  grid-template-columns: repeat(4, 120px);
  grid-auto-rows: 120px;
  width: unset;
}

.all-grid {
  display: grid;
  gap: 1.5em;
  grid-template-columns: repeat(4, 120px);
  grid-auto-rows: 120px;
  grid-template-areas:
    "a"
    "b"
    "c"
    "d"
    "e"
    "f"
    "g"
    "h"
    "i"
    "j";
}

.all-grid-two {
  display: grid;
  gap: 1.5em;
  grid-template-columns: repeat(4, 120px);
  grid-auto-rows: 120px;
  grid-template-areas:
    "k"
    "l"
    "m"
    "n"
    "o"
    "p"
    "q"
    "r"
    "s"
    "t";
}

.box {
  position: relative;
}

.image__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
}

.image__overlay--blur {
  backdrop-filter: blur(5px);
}

.image__overlay > * {
  transform: translateY(20px);
  transition: transform 0.25s;
}

.image__overlay:hover {
  opacity: 1;
}

.image__overlay:hover > * {
  transform: translateY(0);
}

.image__title {
  font-family: "Antonio", sans-serif;
  letter-spacing: -1px;
  font-size: 1.25rem;
  text-transform: uppercase;
  text-align: center;
}

.image__description {
  margin-top: 0.25em;
  text-align: center;
}

.grid-resp {
  display: none !important;
}

.a {
  grid-area: one;
}

.b {
  grid-area: two;
}

.c {
  grid-area: three;
}

.d {
  grid-area: four;
}

.e {
  grid-area: five;
}

.f {
  grid-area: six;
}

.g {
  grid-area: seven;
}

.h {
  grid-area: eight;
}

.i {
  grid-area: nine;
}

.j {
  grid-area: ten;
}

.one {
  grid-area: a;
}

.two {
  grid-area: b;
}

.three {
  grid-area: c;
}

.four {
  grid-area: d;
}

.five {
  grid-area: e;
}

.six {
  grid-area: f;
}

.seven {
  grid-area: g;
}

.eight {
  grid-area: h;
}

.nine {
  grid-area: i;
}

.ten {
  grid-area: j;
}

.eleven {
  grid-area: k;
}

.twelve {
  grid-area: l;
}

.thirteen {
  grid-area: m;
}

.fourteen {
  grid-area: n;
}

.fifteen {
  grid-area: o;
}

.sixteen {
  grid-area: p;
}

.seventeen {
  grid-area: q;
}

.eighteen {
  grid-area: r;
}

.nineteen {
  grid-area: s;
}

.twenty {
  grid-area: t;
}

.twenty-one {
  grid-area: u;
}

.min-width {
  position: relative;
  display: flex;
  justify-content: space-between;
  min-width: max-content;
}

.overflow {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.arrow {
  padding-inline: 10px;
  font-size: 3rem;
}

.carousel-control-next {
  /* color: rgb(239, 13, 51); */
  color: #fff;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
  padding-inline: 1rem;
  width: max-content;
  height: max-content;
  margin-top: auto;
  opacity: 1;
}

.carousel-control-next:hover {
  transform: translateX(0.5rem);
  color: rgb(239, 13, 51);
  opacity: 1;
}

/* .carousel-control-next:active {
  color: rgb(239, 13, 51);
}

.carousel-control-next:focus {
  color: rgb(239, 13, 51);
} */

.carousel-control-prev {
  color: #fff;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
  padding-inline: 1rem;
  width: max-content;
  height: max-content;
  margin-top: auto;
  opacity: 1;
  /* display: none; */
}

.nothing {
  display: none !important;
}

.carousel-control-prev:hover {
  transform: translateX(-0.5rem);
  color: rgb(239, 13, 51);
  opacity: 1;
}

/* .carousel-control-prev:active {
  color: rgb(239, 13, 51);
}

.carousel-control-prev:focus {
  color: rgb(239, 13, 51);
} */

.project-link {
  font-size: 14px;
  display: flex;
  justify-content: center;
  color: rgb(239, 13, 51);
  font-family: "Antonio", sans-serif;
  text-transform: capitalize;
}

/* Locations */

.map {
  width: 100%;
}

.raspberry {
  font-family: "Antonio", sans-serif;
  color: rgb(239, 13, 51);
  font-size: 3.5rem;
  letter-spacing: -1px;
  text-transform: uppercase;
  text-align: center;
  margin-block: 3rem;
}

.countries {
  display: flex;
  flex-direction: column;
}

.country-list {
  font-family: "Antonio", sans-serif;
  opacity: 0.8;
  font-size: 2.5rem;
  letter-spacing: -1px;
  align-items: self-start;
}

.specific {
  width: 110px;
}

.cities {
  font-family: "Playfair Display", serif;
  font-size: 16px;
  opacity: 0.5;
}

/* Contact */
form {
  max-width: 600px !important;
}

.contact-text {
  opacity: 0.3;
}

.form-control {
  border: none;
  border-bottom: 1px solid rgb(66, 66, 66);
  border-radius: 0;
  line-height: 3;
  outline: none;
  background-color: #000;
  color: rgb(255, 255, 255, 0.6) !important;
}

.form-control:active,
.form-control:focus {
  outline: none;
  box-shadow: none;
  border-bottom: 1px solid rgb(255, 255, 255);
  background-color: #000;
}

.form-control::placeholder {
  font-family: "Antonio", sans-serif;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 1px;
  font-size: 1rem;
}

.form-control:active::placeholder,
.form-control:focus::placeholder {
  opacity: 0.5;
}

::-webkit-resizer {
  display: none;
}

.btn-light {
  text-transform: uppercase;
  font-size: 0.875rem;
  font-weight: bold;
  letter-spacing: 1.5px;
  background-color: #fff;
  color: #000;
  padding: 0.9375em 1.875em;
  border-radius: 100vw;
}

.btn-light:hover {
  opacity: 0.8;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  border-bottom: 1px solid rgb(46, 46, 46);
  -webkit-text-fill-color: rgb(180, 180, 180);
  transition: background-color 5000s ease-in-out 0s;
}

.none-resp {
  display: none;
}

/* Footer */

.footer {
  padding: 2rem 0 5rem 0;
}

.gap {
  gap: 1rem;
}

.footer__text,
.footer__links {
  font-weight: 100;
  color: #fff;
  opacity: 0.7;
  max-width: 250px;
  font-size: 0.875rem;
}

.footer__text:hover,
.footer__links:hover {
  color: #fff;
  opacity: 1;
}

.footer__text--location:hover {
  color: #fff;
  opacity: 0.5;
}

.footer-heading {
  font-family: "Antonio", sans-serif;
  color: #fff;
  font-weight: bold;
  max-width: 250px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.initials-link {
  width: 180px;
}

.footer-logo {
  width: 100%;
  margin-bottom: 2.5rem;
}

.capitalize {
  text-transform: uppercase;
  font-size: 2rem;
}

.socials-list {
  display: flex;
  gap: 1rem;
}

.socials-link {
  font-size: 1.5rem;
}

.fit {
  max-width: min-content;
}

.equal {
  width: 100%;
}

.size {
  font-size: 1rem;
  opacity: 0.6;
}

.portrait {
  width: 40%;
  margin-top: 0.5rem;
  filter: grayscale(0);
}

.signature {
  color: #fff;
  font-size: 0.6rem;
  font-weight: 300;
}

.tc {
  font-weight: bold;
}

/* Media Queries */

@media (min-width: 1650px) {
  .container {
    max-width: 70% !important;
  }

  .alignment {
    max-width: 670px !important;
  }
  .dynamic-grid {
    grid-template-columns: repeat(4, 70px);
    grid-auto-rows: 70px;
    gap: 0.5em;
  }
  .div-alignment {
    min-width: 670px;
    margin-bottom: 2rem;
  }

  .transparency {
    font-size: 2.2rem;
    max-width: 500px;
    margin: 1rem 0 2.5rem 0;
  }

  .section-quote--transparency {
    font-size: 1rem;
  }

  .section-text--main--transparency {
    font-size: 1rem;
  }

  .all-grid {
    grid-template-columns: repeat(4, 130px) !important;
    grid-auto-rows: 130px !important;
  }

  .all-grid-two {
    grid-template-columns: repeat(4, 130px) !important;
    grid-auto-rows: 130px !important;
  }

  .grid-resp {
    display: none !important;
  }
}

@media (min-width: 1199px) {
  .grid__wrapper {
    grid-template-areas:
      "one one two two"
      "one one three four"
      "five six seven seven"
      "eight eight seven seven";
    margin-top: 0.75rem;
  }
  .all-grid {
    grid-template-columns: repeat(4, 120px) !important;
    grid-auto-rows: 120px !important;
    grid-template-areas:
      "a a b b"
      "a a c d"
      "e f g g"
      "h h g g";
    margin-top: 0.75rem;
  }
  .all-grid-two {
    grid-template-columns: repeat(4, 120px) !important;
    grid-auto-rows: 120px !important;
    margin-inline: auto;
    grid-template-areas:
      "k k l l"
      "k k m n"
      "o p p q"
      "r s t u";
    margin-top: 0.75rem;
  }

  .grid-resp {
    display: none !important;
  }

  .i,
  .j,
  .nine,
  .ten {
    display: none;
  }

  .extra {
    height: 107% !important;
  }

  .alignment {
    max-width: 550px;
  }

  .subtitle {
    font-size: 2.5rem;
    max-width: 500px;
  }

  .div-alignment {
    max-width: 550px;
    margin-left: auto;
    margin-bottom: 2rem;
  }

  .transparency {
    font-size: 2.2rem;
    max-width: 500px;
    margin: 1rem 0 2.5rem 0;
  }

  .section-quote--transparency {
    font-size: 1rem;
  }

  .section-text--main--transparency {
    font-size: 1rem;
  }

  .unset {
    justify-content: unset !important;
  }
}

@media screen and (max-width: 1199px) and (min-width: 992px) {
  .grid__wrapper {
    grid-template-columns: repeat(4, 120px);
    grid-auto-rows: 120px;
    margin-inline: auto;
    grid-template-areas:
      "one one two two"
      "one one three four"
      "five six seven seven"
      "eight eight seven seven";
  }

  .all-grid {
    grid-template-columns: repeat(4, 120px);
    grid-auto-rows: 120px;
    margin-inline: auto;
    grid-template-areas:
      "a a b b"
      "a a c d"
      "e f g g"
      "h h g g";
  }
  .all-grid-two {
    grid-template-columns: repeat(4, 120px);
    grid-auto-rows: 120px;
    margin-inline: auto;
    grid-template-areas:
      "k k l l"
      "k k m n"
      "o p p q"
      "r s t u";
  }

  .grid-resp {
    display: none !important;
  }

  .i,
  .j,
  .nine,
  .ten {
    display: none;
  }

  .container {
    max-width: 85% !important;
  }

  .section-title-large {
    font-size: 2.5rem;
  }

  .section-quote {
    font-size: 0.875rem;
  }

  .quoter {
    font-size: 0.75rem;
  }

  .section-heading {
    font-size: 2.5rem;
  }

  .alignment {
    max-width: 450px;
    margin-left: auto;
  }

  .accordion-button {
    font-size: 1.75rem;
  }

  .raspberry {
    font-size: 2.5rem;
  }

  .country-list {
    font-size: 2rem;
  }

  .form-control::placeholder {
    font-size: 1rem;
  }

  .btn-light {
    font-size: 0.75rem;
  }

  .footer-heading {
    font-size: 1.375rem;
  }

  .logo {
    width: 80%;
  }

  .footer-logo {
    width: 80%;
  }

  .div-alignment {
    max-width: 450px;
    margin-left: auto;
    margin-bottom: 1.5rem;
  }

  .transparency {
    font-size: 2.2rem;
    max-width: 500px;
    margin: 1rem 0 2.5rem 0;
  }

  .section-quote--transparency {
    font-size: 1rem;
  }

  .section-text--main--transparency {
    font-size: 1rem;
  }

  .percentage {
    max-width: 40%;
  }

  .leave {
    display: none !important;
  }

  .about-portrait {
    max-width: 40%;
  }

  .about-text {
    max-width: 550px;
  }

  form {
    max-width: 500px !important;
  }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
  .container {
    max-width: 85% !important;
  }

  .logo {
    width: 100%;
  }

  .navbar-nav {
    margin-top: 2rem;
  }

  .b {
    max-height: 324px;
  }

  .rows {
    gap: 2rem;
  }

  .frame {
    position: unset;
    right: unset;
  }

  .section-title-large {
    font-size: 2rem;
    max-width: 500px;
    min-width: 300px;
    margin-block: 3rem;
  }

  .section-heading {
    font-size: 2rem;
  }

  .section-text {
    font-size: 0.875rem;
  }

  .accordion-button {
    font-size: 1.375rem;
  }

  .list__title {
    font-size: 1.25rem;
  }

  .list__item {
    font-size: 0.875rem;
  }

  .alignment {
    max-width: 345px;
  }

  .div-alignment {
    max-width: 345px;
    margin-left: auto;
    margin-bottom: 1rem;
  }

  .transparency {
    font-size: 2.2rem;
    max-width: 500px;
    margin: 1rem 0 1.5rem 0;
  }

  .section-quote--transparency {
    font-size: 1rem;
  }

  .section-text--main--transparency {
    font-size: 1rem;
  }

  .dynamic-grid {
    grid-template-columns: repeat(4, 50px);
    grid-auto-rows: 50px;
  }

  .grid__wrapper {
    grid-template-columns: repeat(4, 100px);
    grid-auto-rows: 100px;
    margin-inline: auto;
    grid-template-areas:
      "one one two two"
      "one one three four"
      "five six seven seven"
      "eight eight seven seven";
  }

  .all-grid {
    grid-template-columns: repeat(4, 100px) !important;
    grid-auto-rows: 100px !important;
    margin-inline: auto;
    grid-template-areas:
      "a a b b"
      "a a c d"
      "e f g g"
      "h h g g";
  }
  .all-grid-two {
    grid-template-columns: repeat(4, 100px) !important;
    grid-auto-rows: 100px !important;
    margin-inline: auto;
    grid-template-areas:
      "k k l l"
      "k k m n"
      "o p p q"
      "r s t u";
  }

  .grid-resp {
    display: none !important;
  }

  .i,
  .j,
  .nine,
  .ten {
    display: none;
  }

  .map-div {
    width: 60%;
  }

  .raspberry {
    font-size: 2rem;
  }

  .country-list {
    font-size: 1.5rem;
  }

  .cities {
    font-size: 0.875rem;
  }

  .form-div {
    width: 400px;
  }

  .form-control::placeholder {
    font-size: 0.875rem;
  }

  .btn-light {
    font-size: 0.75rem;
  }

  .footer__text,
  .footer__links {
    font-size: 0.875rem;
  }

  .footer-logo {
    width: 80%;
  }

  .percentage {
    max-width: 40%;
  }

  .leave {
    display: none !important;
  }

  .flex-resp {
    flex-direction: column;
  }

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

  .about-text {
    margin-inline: auto;
  }

  .about-portrait {
    max-width: 40%;
    margin-inline: auto;
    margin-bottom: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .container {
    max-width: 85% !important;
  }

  .navbar-brand {
    width: 50%;
  }

  .navbar-nav {
    margin-top: 2rem;
  }

  .rows {
    flex-direction: column;
    gap: 2rem;
  }

  .frame {
    position: unset;
    right: unset;
    max-width: 70%;
    margin-inline: auto;
  }

  .section-title-large {
    font-size: 2.5rem;
    margin-block: 3rem;
    margin-inline: auto;
    text-align: center;
  }

  .div-alignment {
    margin-bottom: 1rem;
  }

  .section-quote {
    max-width: 500px;
    margin-inline: auto;
    text-align: center;
  }

  .section-quote--transparency,
  .section-text--main--transparency {
    font-size: 1rem;
    margin-inline: unset !important;
    text-align: left !important;
  }

  .quoter {
    max-width: 450px;
  }

  .section-heading {
    font-size: 2rem;
  }

  .section-text {
    font-size: 0.875rem;
  }

  .accordion-button {
    font-size: 1.375rem;
  }

  .list__title {
    font-size: 1.25rem;
  }

  .list__item {
    font-size: 0.875rem;
  }

  .none {
    display: none !important;
  }

  .grid-resp {
    display: grid !important;
  }

  .grid__wrapper {
    grid-template-columns: repeat(3, 130px);
    grid-auto-rows: 130px;
    margin-inline: auto;
    grid-template-areas:
      "one one three"
      "one one four"
      "five two two"
      "six seven seven"
      "nine seven seven"
      "eight eight ten";
  }

  .all-grid {
    grid-template-columns: repeat(3, 130px);
    grid-auto-rows: 130px;
    margin-inline: auto;
    margin-block: 1.5rem;
    grid-template-areas:
      "g g i"
      "g g j"
      "e b b"
      "f a a"
      "c a a"
      "h h d";
  }
  .all-grid-two {
    grid-template-columns: repeat(3, 130px);
    grid-auto-rows: 130px;
    margin-inline: auto;
    grid-template-areas:
      "k k l"
      "k k m"
      "n n o"
      "p q q";
  }

  .raspberry {
    font-size: 2rem;
  }

  .country-list {
    font-size: 1.5rem;
  }

  .cities {
    font-size: 0.875rem;
  }

  .form-control::placeholder {
    font-size: 0.875rem;
  }

  .btn-light {
    font-size: 0.75rem;
    margin-bottom: 3rem;
  }

  .footer-heading {
    font-size: 1.5rem;
    margin-block: 2rem;
  }

  .resp {
    flex-direction: column;
  }

  .footer-logo {
    margin-bottom: unset;
  }

  .portrait {
    width: 35%;
  }

  .marg {
    margin-bottom: 0;
  }

  .logo-link {
    width: 60%;
  }

  .section-text--main {
    margin-inline: auto;
    text-align: center;
  }

  .none-resp {
    display: flex;
  }

  .transparency {
    max-width: 400px;
    font-size: 1.8rem;
  }

  .wrapper {
    margin-block: 5rem;
  }

  .extra {
    height: 107% !important;
  }

  .flex-resp {
    flex-direction: column;
  }

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

  .about-portrait {
    margin-inline: auto;
    margin-bottom: 1rem;
  }

  .about-text {
    margin-inline: auto;
  }

  .signature-resp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 767px) and (min-width: 540px) {
  .footer-logo {
    width: 60%;
  }

  .about-title {
    font-size: 2rem;
  }

  .about-portrait {
    max-width: 40%;
  }

  .about-text {
    font-size: 1rem;
  }
}

@media screen and (max-width: 540px) {
  .frame {
    max-width: 90%;
  }

  .container {
    max-width: 85% !important;
  }

  .grid__wrapper,
  .all-grid,
  .all-grid-two {
    grid-template-columns: repeat(3, 96px);
    grid-auto-rows: 96px;
    margin-inline: auto;
  }

  .image__title {
    font-size: 1rem;
  }

  .section-title-large {
    font-size: 2rem;
  }

  .wrapper,
  .main-wrapper {
    margin: 3rem 0 6rem 0;
  }

  .about-title {
    font-size: 2rem;
  }

  .about-portrait {
    max-width: 50%;
    min-width: 50%;
  }

  .about-text {
    font-size: 0.875rem;
    max-width: 400px;
  }
}

@media screen and (max-width: 450px) {
  .grid__wrapper {
    grid-template-columns: repeat(2, 120px);
    grid-auto-rows: 120px;
    margin-inline: auto;
    grid-template-areas:
      "one one"
      "one one"
      "three four"
      "two two"
      "five six"
      "seven seven"
      "seven seven"
      "nine ten"
      "eight eight";
  }

  .all-grid {
    grid-template-columns: repeat(2, 120px);
    grid-auto-rows: 120px;
    margin-inline: auto;
    grid-template-areas:
      "g g"
      "g g"
      "i f"
      "h h"
      "e j"
      "a a"
      "a a"
      "c d"
      "b b";
  }

  .all-grid-two {
    grid-template-columns: repeat(2, 120px);
    grid-auto-rows: 120px;
    margin-inline: auto;
    grid-template-areas:
      "k k"
      "k k"
      "l m"
      "n n"
      "o p"
      "q q";
  }

  .accordion-button {
    font-size: 1.3125rem;
  }

  .list__title {
    font-size: 1.125rem;
  }

  .logo-link {
    width: 70%;
  }

  .navbar-toggler {
    max-width: 50%;
  }

  .transparency {
    font-size: 1.6rem;
  }

  .section-quote--transparency,
  .section-text--main--transparency {
    font-size: 0.875rem;
  }

  .btn-light {
    font-size: 0.6875rem;
  }

  .about-title {
    font-size: 2rem;
    margin-bottom: unset;
  }

  .about-portrait {
    max-width: 60%;
    margin-bottom: unset;
  }

  .about-text {
    font-size: 0.8125rem;
    max-width: 300px;
    gap: 1rem;
    text-align: justify;
    margin-inline: auto;
  }

  .mt-5 {
    margin-top: 1rem !important;
  }
}