/****************************************************** General */
body {
  background: rgb(0, 25, 125);
  background: -moz-linear-gradient(
    135deg,
    rgba(0, 25, 125, 1) 0%,
    rgba(0, 147, 208, 1) 100%
  );
  background: -webkit-linear-gradient(
    135deg,
    rgba(0, 25, 125, 1) 0%,
    rgba(0, 147, 208, 1) 100%
  );
  background: linear-gradient(
    135deg,
    rgba(0, 25, 125, 1) 0%,
    rgba(0, 147, 208, 1) 100%
  );
  color: #ffffff;
}
a {
  color: #ffffff;
  text-decoration: none;
}
p {
  margin: 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(330px, 1fr);
}
#burger {
  cursor: pointer;
}
p.highlight {
  font-size: clamp(1.75rem, 1.1338rem + 2.6291vw, 3.5rem);
  font-weight: 300;
  line-height: 130%;
}
main {
  position: relative;
  background: url("../imgs/home-map.png") top left no-repeat;
  background-size: clamp(24.375rem, 8.5453rem + 77.931vw, 102.0625rem) auto;
}
@media screen and (max-width: 1200px) {
  .grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media screen and (max-width: 992px) {
  main {
    background: none;
  }
}
/****************************************************** Header */
header > .container a:first-of-type {
  z-index: 3;
}
header a {
  z-index: 555;
}
/****************************************************** Section 1 */
.section-1 {
  height: 100vh;
}
.section-1 a:hover {
  text-decoration: none;
}
.section-1 .grid-1 > div {
  border-right: 1px solid #ffffff;
}
.section-1 .grid-2 > div {
  border-right: 1px solid #ffffff;
  position: relative;
}
.section-1 .grid-2 > div:before {
  content: "";
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
  /* TRANSITION */
  transition: opacity 0.25s ease-in-out;
  -webkit-transition: opacity 0.25s ease-in-out;
  -moz-transition: opacity 0.25s ease-in-out;
  -o-transition: opacity 0.25s ease-in-out;
}
.section-1 .grid-2 > div:hover:before {
  opacity: 1;
}
.section-1 .grid-2 > div#top-left:has(a:hover) {
  background: var(--top-left-bg-image-url);
  background-color: #00063180;
}
.section-1 .grid-2 > div#top-right:has(a:hover) {
  background: var(--top-right-bg-image-url);
  background-color: #00063180;
}
.section-1 .grid-2 > div#bottom-left:has(a:hover) {
  background: var(--bottom-left-bg-image-url);
  background-color: #00063180;
}
.section-1 .grid-2 > div#bottom-right:has(a:hover) {
  background: var(--bottom-right-bg-image-url);
  background-color: #00063180;
}
:where(
    .section-1 .grid-2 > div:nth-child(1),
    .section-1 .grid-2 > div:nth-child(2)
  ) {
  border-bottom: 1px solid #ffffff;
}
.section-1 .grid-2 > div a {
  color: #ffffff;
  align-items: end;
}
.section-1 .grid-2 > div a:hover {
  color: #ffffff;
  align-items: start;
  flex-direction: column;
  justify-content: space-between;
}
.section-1 .position-absolute .d-flex {
  gap: 0.625rem;
}
.section-1 p.highlight {
  font-size: clamp(2rem, 1.4718rem + 2.2535vw, 3.5rem);
  line-height: 120%;
}
.section-1 .grid-2 p.highlight {
  font-size: clamp(1.25rem, 0.9859rem + 1.1268vw, 2rem);
}
.section-1 .grid-2 div.hidden {
  display: flex;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 150%;
  flex-direction: column;
  gap: 1.125rem;
  opacity: 0;
  will-change: height, opacity, width;
  height: 0;
  width: 0;
}
.section-1 .grid-2 div.hidden :is(p.hidden, span) {
  display: none;
}
.section-1 .grid-2 > div a:hover div.hidden {
  transition: height 0.01s ease-in-out, opacity 0.4s ease-in-out 0.05s;
  height: auto;
  opacity: 1;
  width: 100%;
}
.section-1 .grid-2 > div a:hover div.hidden :is(p.hidden, span) {
  display: flex;
}
.bimagehover:hover {
  color: #ffffff;
  align-items: start;
  flex-direction: column;
  justify-content: space-between;
}
.section-1 .grid-2 div.hidden > span {
  gap: 1rem;
  border: 1px solid #ffffff;
  border-radius: 37.5px;
  max-width: fit-content;
}
.section-1 p.highlight-soft {
  font-size: 2rem;
  line-height: 120%;
  max-width: 490px;
}
.section-1 > div.position-absolute {
  top: 12vw;
}
@media screen and (max-width: 1590px) {
  .section-1 .grid-2 {
    grid-template-columns: repeat(2, 25vw);
  }
}
@media screen and (max-width: 1200px) {
  .section-1 {
    height: auto;
  }
  .section-1 .grid-1 > div {
    border: none;
  }
  .section-1 .grid-1 {
    grid-template-rows: 100vh 1fr;
    width: 100%;
  }
  .section-1 .grid-2 {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 250px);
  }
  #top-left,
  #top-right {
    border-top: 1px solid white;
  }
}
@media screen and (max-width: 992px) {
  .section-1 {
    height: auto;
    background: url("../imgs/home-map.png") top left no-repeat;
    background-size: cover;
  }
  .section-1 .grid-2 a.d-flex:hover p.hidden {
    max-width: 40ch;
    font-size: 0.8em;
  }
  .section-1 .grid-2 div.hidden > span {
    font-size: 0.8em;
  }
  .section-1 .grid-1 > div {
    border-right: none;
  }
  .section-1 .grid-2 #bottom-right,
  .section-1 .grid-2 #top-right {
    border-right: none;
  }
}
@media screen and (max-width: 768px) {
  .section-1 p.highlight-soft {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.25rem;
  }
}
@media screen and (min-width: 1201px) and (max-width: 1485px) {
  .section-1 > div.level0 {
    max-width: 37vw;
  }
  .section-1 > div.level0 p.highlight {
    font-size: 2.5rem;
  }
}
@media screen and (min-width: 1440px) {
  .section-1 .grid-2 #bottom-left {
  }
}
/****************************************************** Section 2 */
.section-2 .title {
  padding-block: clamp(3rem, 2.6479rem + 1.5023vw, 4rem);
}
.section-2 p.highlight :is(a:link, a:visited){
  color: white;
}
.section-2 p.highlight :is(a:hover, a:active){
  color: #ffc107;
}
.section-2 .swiper-section-2 {
  min-height: 350px;
  display: flex;
  align-items: center;
}
.section-2 .swiper-section-2 .swiper-wrapper {
  min-height: 150px;
  display: flex;
  align-items: center;
  position: relative;
}
.section-2 .swiper-section-2.mobile {
  gap: 50px;
  width: 100%;
  position: relative;
  padding-right: 1rem;
}
.section-2 .swiper-section-2 .swiper-wrapper .swiper-slide {
  width: fit-content !important;
  min-height: 110px;
  padding-bottom: 1.5rem;
}
.section-2 .swiper-section-2.mobile a {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.section-2 .swiper-section-2.mobile .swiper-wrapper {
  width: auto;
  padding-right: 2rem;
}
.section-2 .swiper-section-2.mobile .swiper-wrapper .swiper-slide .text-white {
  max-width: 95%;
}
.section-2 .swiper-section-2 .swiper-wrapper .swiper-slide a:hover {
  background-color: var(--sapphire-opacity-50);
}
.section-2
  .swiper-section-2.desktop
  .swiper-wrapper
  .swiper-slide:not(:last-child)::after {
  display: block;
  content: "";
  position: absolute;
  right: 0;
  width: 1px;
  height: 40%;
  background-color: var(--white);
  top: 30%;
}
.section-2 .swiper-section-2.desktop .swiper-scrollbar {
  left: 15.5%;
  bottom: 30%;
  height: 1.5px;
  width: 80%;
  overflow-x: hidden;
}
.section-2 .swiper-section-2.mobile .swiper-scrollbar {
  width: 80%;
}
.section-2 .swiper-section-2 .swiper-scrollbar .swiper-scrollbar-drag {
  background: var(--white);
  left: -1%;
}
.section-2 .border-light {
  border-color: rgba(255, 255, 255, 0.5) !important;
}
.section-2 a:hover {
  text-decoration: none;
}
/****************************************************** Section 3 */
.section-3 p.highlight {
  font-size: clamp(1.875rem, 1.831rem + 0.1878vw, 2rem);
  font-weight: 400;
  line-height: 120%;
}
.section-3 a {
  font-size: clamp(1rem, 0.956rem + 0.1878vw, 1.125rem);
  z-index: 2;
}
.section-3 a:hover {
  text-decoration: none;
}
.section-3 .swiper-section-3 .swiper-wrapper {
  min-height: 600px;
  max-height: 60vh;
}
.section-3 .swiper-section-3 .swiper-wrapper .swiper-slide {
  width: 329px !important;
  height: auto;
}

.section-3 .swiper-section-3 .swiper-wrapper .swiper-slide {
  position: relative;
}
.section-3 .swiper-section-3 .swiper-wrapper .swiper-slide .box-bg {
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 0;
  /* TRANSITION */
  transition: opacity 0.4s ease-in-out;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
}
.section-3 .swiper-section-3 .swiper-wrapper .swiper-slide > div:not(.box-bg) {
  z-index: 1;
}
.section-3 .swiper-section-3 .swiper-wrapper .swiper-slide:hover .box-bg {
  opacity: 1;
}

/****************************************************** Section 4 */
.section-4 .flex-1 {
  gap: 2rem;
}
.section-4 .flex-3 {
  gap: 1.5rem;
}
.section-4 p.highlight {
  font-size: clamp(1.5rem, 1.3239rem + 0.7512vw, 2rem);
  font-weight: 500;
  line-height: 120%;
  max-width: 250px;
}
/****************************************************** Footer */
footer {
  /* color: #0f2a95; */
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}
footer a {
  color: inherit;
  text-decoration: none;
}
footer p.highlight {
  font-size: clamp(1.75rem, 1.3099rem + 1.8779vw, 3rem);
  font-weight: 300;
  line-height: 130%;
}
footer .flex-1 {
  gap: clamp(24px, 35px + 0.75vh, 40px);
  font-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
  font-weight: 400;
  line-height: 125%;
}
footer .flex-2 {
  gap: clamp(20px, 21px + 0.75vh, 24px);
}
footer .flex-3 {
  gap: clamp(7px, 8px + 0.75vh, 10px);
}
footer .flex-4 {
  gap: 7px;
}
footer .flex-5 {
  gap: clamp(18px, 25px + 0.75vh, 30px);
}
/****************************************************** Animation Elements */
.pin {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: 100px;
}
.pin a {
  display: block;
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.4s ease-in-out;
}
.pin a > div {
  gap: 5px;
}
.pin a > div p {
  font-weight: 600;
}
.pin:hover a {
  opacity: 1;
  text-decoration: none;
}
.pin-1 {
  top: 35vw;
  left: 5.5vw;
}
.pin-2 {
  top: 28vw;
  left: 18.5vw;
}
.pin-3 {
  top: 38.5vw;
  left: 31vw;
}
@media screen and (max-width: 1440px) {
  .pin {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: 100px;
  }
  .pin {
    grid-template-rows: 1.5fr 1fr;
    grid-template-columns: 100px;
  }
}

@media screen and (max-width: 992px) {
  .section-1 {
    background-size: cover;
  }
  .pin-1 {
    top: 55vh;
    left: 7vw;
  }
  .pin-2 {
    top: 38.5vh;
    left: clamp(16.583438rem, 12.4388rem + 0.7232vw, 12.71rem);
  }
  .pin-3 {
    top: 60.5vh;
    left: clamp(26.161875rem, 21.9812rem + 0.9036vw, 22.32rem);
  }
}
@media screen and (max-width: 767px) {
  .section-1 {
    background-size: cover;
  }
  .pin {
    font-size: 1rem;
  }
}
@media screen and (max-width: 660px) {
  .section-1 {
    background-size: 200%;
  }
  .pin {
    font-size: 0.8rem;
  }
  .pin-1 {
    top: clamp(16.759375rem, -0.5406rem + 86.5vw, 35.140625rem);
    left: 13vw;
  }
  .pin-2 {
    top: clamp(12.975rem, -1.2721rem + 71.2353vw, 28.1125rem);
    left: 44vw;
  }
  .pin-3 {
    top: clamp(18.38125rem, -0.4452rem + 94.1324vw, 38.384375rem);
    left: clamp(12.6rem, -3.4941rem + 80.4706vw, 29.7rem);
  }
}
@media screen and (max-width: 425px) {
  .pin {
    grid-template-rows: 1fr 1fr;
  }
}