/* #region .site-footer */
#toTop {
  display: flex;
  align-items: center;
  height: 1.1rem;
}
#toTop:hover {
  color: #808080;
}

div.arrow {
  width: 0.5rem;
  height: 0.5rem;
  box-sizing: border-box;
  margin: 0.2rem 0 0 0.6rem;
  transform: rotate(-45deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

div.arrow::before {
  content: "";
  width: 100%;
  height: 100%;
  border-width: 0.1rem 0.1rem 0 0;
  border-style: solid;
  border-color: #000;
  transition: 0.2s ease;
  display: block;
  transform-origin: 100% 0;
}

div.arrow::after {
  content: "";
  float: left;
  position: relative;
  top: -100%;
  width: 100%;
  height: 100%;
  border-width: 0 0.1rem 0 0;
  border-style: solid;
  border-color: #000;
  transform-origin: 100% 0;
  transition: 0.2s ease;
}

#toTop:hover div.arrow::after {
  transform: rotate(45deg);
  border-color: #808080;

  height: 190%;
  margin: -0.04rem 0 0 0;
}

#toTop:hover div.arrow::before {
  border-color: #808080;
  margin: -0.3rem 0 0 0;
}
.site-footer a:hover,
.site-footer li:hover,
.site-footer p:hover {
  cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="10"%3E%3Ccircle cx="5" cy="5" r="5" stroke-width="1" stroke="black" fill="black" /%3E%3C/svg%3E')
      5 5,
    pointer;
}
.site-footer {
  cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="10"%3E%3Ccircle cx="5" cy="5" r="5" fill="black" /%3E%3C/svg%3E')
      5 5,
    auto;
  background-color: #fff;
  padding: 2rem 2rem 0.3rem 2rem;
  width: 100%;
  text-align: center;
  position: relative;
  margin: 0;
  box-sizing: border-box;
  z-index: 1;
}
.footer-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  align-content: center;
}

.site-footer ul {
  list-style-type: none;
  padding: 0 0 2rem 0;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-direction: column;
  align-items: flex-start;
  flex-basis: 100%;
  flex: 1;
  width: 30rem;
}
.footer-content .f-menu {
  padding-bottom: 1rem;
}
.footer-content .f-menu a {
  color: #757575;
  transition: color 0.6 ease;
}
.footer-content a {
  color: #000;
  transition: color 0.6 ease;
}

.footer-content a:hover {
  color: #757575;
}
.footer-content .f-menu a:hover {
  color: #000;
}

.cpright {
  padding: 2rem 0 1.5rem 0;

  display: flex;
  flex-direction: row;
  align-items: center;
  flex-basis: 100%;
  border-top: 1px solid #d7d7d7;
  /* border-bottom: 1px solid #797979; */

  justify-content: space-between;
}

.c-social {
  margin-right: 0.625rem;
  border-radius: 50%;
  background-color: #1c1c1c;
  width: 1.875rem;
  height: 1.875rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* border: 1px solid #1C1C1C; */
  transition: background-color 0.6s cubic-bezier(0.075, 0.82, 0.165, 1),
    border-color 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.logo-text {
  font-size: 0.9rem;
  color: #000;
  flex-shrink: 0;
}

.c-social .icon {
  width: 1rem;
  height: 1rem;
  fill: #fff;
  transition: fill 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.c-social:hover {
  background-color: #fff;
}

.c-social:hover .icon {
  fill: #000;
}

.cpright .logo-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.cpright .logo {
  height: 3rem;
  width: 3rem;
  z-index: 1;
  transition: transform 0.6s ease;
}
.cpright .logo:hover {
  transform: scale(1.05);
}

.sub-con {
  width: 58.1rem;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4rem;
  height: 19.125rem;
  justify-content: space-between;
  padding-left: 4rem;
}

.sub-con p {
  text-align: start;
  font-size: 2rem;
}

.email-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #000;
  padding: 0.6rem 0;
  width: 20rem;
}

.email-container input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 1.3rem;

  color: #333;
}

.email-container input::placeholder {
  color: #aaa;
}

.email-container button {
  background: none;
  border: none;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
}

.email-container button svg {
  width: 2rem;
  height: 2rem;
  fill: #333;
}

.email-container button:hover svg {
  fill: #000;
}
#responseMessage {
  margin-top: 10px;
  font-size: 14px;
}
.c-left {
  text-align: start;
  margin-top: auto;
}

/* #endregion */

/* #region nav */

nav {
  padding: 1rem 2rem 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  transition: all 1.5s ease-in-out;
  height: 3rem;
  z-index: 9;
  position: relative;
}
.services nav,
.aboutus nav,
.baaf nav {
  height: 2rem;
}
nav .right a {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
nav .right a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #fff;
  transition: width 0.6s ease;
}

nav .right a:hover::before {
  width: 100%;
}

nav .right a:hover {
  color: #e7e7e7;
  transform: scale(1);
  -webkit-transform: scale(1);
}
.nav-trigger:hover,
svg.moon:hover,
svg.sun:hover {
  color: #e7e7e7;
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
}

nav.scroll-active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  padding: 0 2rem;
  box-sizing: border-box;
  background-color: rgba(42, 42, 42, 0.15);
  backdrop-filter: saturate(100%) blur(10px);

  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(0);
  z-index: 59;
  transition: all 1.5s ease-in-out;
}
.services nav.scroll-active,
.aboutus nav.scroll-active,
.baaf nav.scroll-active {
  height: 2rem;
}
nav .right {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.nav-trigger {
  width: 1.9rem;
  height: 100%;
  z-index: 20;
  cursor: pointer;
  transition: top 0.2s ease-in, opacity 0.6s ease, transform 0.6s ease;
}

.nav-trigger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;

  transition: all 0.2s ease-in;
}
.nav-trigger span:nth-child(2) {
  margin: 0.3rem 0 0.3rem 0;
}

.nav-trigger.on span:first-child {
  transform: translateY(6px) rotate(45deg);
  background: #000;
}

.nav-trigger.on span:nth-child(2) {
  transform: translateX(50px);
  background: #000;
  opacity: 0;
}

.nav-trigger.on span:last-child {
  transform: translateY(-8px) rotate(-45deg);
  background: #000;
}
.nav-menu {
  cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="10"%3E%3Ccircle cx="5" cy="5" r="5" fill="black" /%3E%3C/svg%3E')
      5 5,
    auto;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 0;
  background: white;
  overflow: hidden;
  z-index: 11;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

.n-top {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-bottom: 1px solid #fff;
  box-shadow: 0px 2px 15px 0px #0000006f;
  background-color: #fff;
}

.nav-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 1rem;
  display: flex;
  flex-direction: column;
}

.n-left {
  padding: 1rem 0 0 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 2.5rem;
  width: 16rem;
}

.n-left p {
  font-size: 2rem;
}
.n-cp-left {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.n-right {
  padding: 1rem 16rem 0 0;
  display: flex;
  justify-content: flex-start;

  flex-direction: column;
  align-items: flex-start;
  gap: 4rem;
  flex: 1;
  flex-wrap: wrap;
  align-content: flex-end;
}
.n-r-bot {
  padding-bottom: 4rem;
}

.nav-menu .n-close {
  margin: 0 0 3rem 0;
}
.nav-menu .n-close a {
  color: #757575;
  font-size: 1rem;
}

.nav-menu .n-cpright {
  margin: 0;
  padding: 0 2rem 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-menu .n-cpright p {
  font-size: 10rem;
  margin-top: -3.5rem;
  z-index: -10;
}

.n-cpright .logo-container {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  justify-content: flex-end;
  padding-right: 5rem;
}
.n-cpright .logo-container .logo {
  width: 6rem;
  height: 6rem;
}

.nav-menu ul li a {
  text-decoration: none;
  font-size: 1.2rem;
  color: black;
  transition: color 0.3s ease;
}

.nav-menu ul li a:hover {
  color: gray;
}
.nav-menu.active {
  max-height: 80vh;
  visibility: visible;
  opacity: 1;
  box-shadow: 0px 2px 20px 0px #0000006f;
}
nav .right img {
  width: 1.7rem;
  height: 1.3rem;
}

nav a {
  font-size: 1.2rem;
  color: white;
  text-decoration: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
nav a:hover {
  color: #e7e7e7;
  transform: scale(0.98);
  -webkit-transform: scale(0.98);
}
/* #endregion */

/* #region Dark mode */

/* Toggle button */
.dark-mode-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  border-radius: 1rem;
  justify-content: center;
  transition: transform 0.6s ease;
}

.dark-mode-toggle:active {
  transform: scale(0.6);
}

/* Rotation animations */
@keyframes rotate360 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate360-reverse {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

svg.moon.rotate {
  animation: rotate360 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

svg.sun.rotate {
  animation: rotate360-reverse 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

/* General icon styles */
svg.moon,
svg.sun {
  transition: opacity 0.6s ease, transform 0.6s ease;
  position: absolute;
}

svg.moon {
  opacity: 1;
  transform: rotate(0deg);
}

svg.sun {
  opacity: 1;
  transform: rotate(0deg);
}

/* Light / dark icon visibility */
body.light-mode .moon {
  opacity: 0;
}

body.light-mode .sun {
  opacity: 1;
}

.dark-mode-toggle svg {
  width: 1.5rem;
  height: 1.5rem;
  display: none;
}

.dark-mode-toggle .sun {
  display: block;
}

body.dark-mode .dark-mode-toggle .sun {
  display: none;
}

body.dark-mode .dark-mode-toggle .moon {
  display: block;
}

/* Background images for .bg */
body.light-mode .bg {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url("/assets/gfx/colosotask.webp") no-repeat center center;
  background-size: cover;
  background-position: center;
}

body.dark-mode .bg {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url("/assets/gfx/yubolovbubble.webp") no-repeat center center;
  background-size: cover;
  background-position: center;
}

/* BG animation (if used) */
@keyframes slideIn {
  from {
    transform: scale(1.05);
    opacity: 0.5;
  }
  to {
    transform: scale(1);
    opacity: var(--bg-opacity, 1);
  }
}

/* Base light mode body + cursor */
body.light-mode {
  background-color: #eaeaea;
  transition: opacity 0.5s ease-in-out;
  cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="10"%3E%3Ccircle cx="5" cy="5" r="5" fill="black" /%3E%3C/svg%3E')
      5 5,
    auto;
}

/* Same cursor for selects in light mode */
body.light-mode select {
  cursor: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="10"%3E%3Ccircle cx="5" cy="5" r="5" fill="black" /%3E%3C/svg%3E')
      5 5,
    auto;
}

/* ---------- TEXT COLOR: light mode ---------- */

/* From home/services/help/work */
body.light-mode .neg1 li,
body.light-mode .column1 a,
body.light-mode .neg1 h3,
body.light-mode .help-title,
body.light-mode .work-title,
body.light-mode .parallax-container,
body.light-mode .help-p-container .overlay p,
/* From contact page block */
body.light-mode .title h1,
body.light-mode .t-b-desc p,
body.light-mode .t-desc p,
body.light-mode .about-us2 p,
body.light-mode .form-section h2,
body.light-mode label,
body.light-mode .contact-info h3,
body.light-mode .profile p,
body.light-mode input,
body.light-mode select,
body.light-mode textarea,
/* From about/FAQ block */
body.light-mode .c-column-header h3,
body.light-mode .ha-b-desc p,
body.light-mode .ha-desc p,
body.light-mode .ha-text p,
body.light-mode .c-content,
body.light-mode .c-row h5,
body.light-mode .y-get span,
body.light-mode .collapsible {
  color: #000;
}

body.light-mode .contact-info a:hover {
  color: #000;
}

/* Slider dot active state (contact) */
body.light-mode .slider-dot.active {
  background-color: #fff;
  border: 1px solid #000;
  transform: scale(1.5);
}

/* Labels on slider */
body.light-mode .slider-label {
  color: #2c2c2c;
}

body.light-mode .slider-step:hover .slider-label {
  color: #000;
}

/* ---------- BORDERS: light mode ---------- */

/* From home/work/help */
body.light-mode .neg,
body.light-mode .box,
body.light-mode .neg1,
body.light-mode .help-p-container,
body.light-mode .work-p-container,
/* From FAQ/about blocks */
body.light-mode .ha-text,
body.light-mode .collapsible:last-of-type,
body.light-mode .collapsible,
/* From contact block */
body.light-mode .title,
body.light-mode .t-row,
body.light-mode .contact-info h3,
body.light-mode .form-group input,
body.light-mode .form-group select,
body.light-mode textarea {
  border-bottom: 1px solid #00000069;
}

/* Top borders */
body.light-mode .c-cr,
body.light-mode .contact {
  border-top: 1px solid #00000069;
}

/* FAQ chips / tags */
body.light-mode .y-get span {
  border: 1px #0006 solid;
}

/* Service image tile background (about/services page) */
body.light-mode .s-img {
  background-color: #eaeaea;
}

/* Contact form hover/focus states */
body.light-mode .form-group input:hover,
body.light-mode .form-group textarea:hover,
body.light-mode .form-group select:hover {
  border-bottom: 1px solid #000000;
}

body.light-mode .form-group input:focus,
body.light-mode .form-group textarea:focus,
body.light-mode select:focus {
  border-bottom: 1px solid #000000;
}

/* ---------- NAV: light mode ---------- */

body.light-mode nav {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: saturate(100%) blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(0);
}

/* ---------- HELP / WORK CARDS: light mode (home) ---------- */

body.light-mode .work-i {
  background-color: #eaeaea;
}

/* You had two .help-i blocks; merged into one */
body.light-mode .help-i {
  flex: 0 0 auto;
  width: 20rem;
  height: 10rem;
  background: radial-gradient(ellipse, #ffffff77, #afafaf6e);
  border-radius: 10px;
  background-position: bottom;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

body.light-mode .help-i::before {
  border-color: #ffffff72 transparent transparent #ffffff14;
}

/* ---------- About/FAQ graphics ---------- */

body.light-mode .ha-light {
  display: none;
}

body.light-mode .ha-dark {
  display: block;
}

/* #endregion Dark mode */

/* #region preload */
body.light-mode .preload {
  background-color: #eaeaea;
}
body.light-mode .preload path {
  stroke: #000;
}

.preload {
  width: 100%;
  height: 100%;
  background: #1c1c1c;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  overflow: hidden;
  user-select: none;
}
.preload svg {
  width: 16rem;
  height: 16rem;
}

.preload path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: var(--length);
  stroke-dashoffset: var(--length);
  animation: none;
  transition: fill 1s ease;
}

.preload .path-1 {
  animation: animate-path 3s linear infinite;
}

.preload .path-2 {
  animation: animate-path 3s linear infinite;
}
@keyframes fill-path-bl {
  to {
    fill: #000;
  }
}

@keyframes animate-path {
  from {
    stroke-dashoffset: var(--length);
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fill-path {
  to {
    fill: #fff;
  }
}

@keyframes animate-path {
  from {
    stroke-dashoffset: var(--length);
  }
  to {
    stroke-dashoffset: 0;
  }
}

@media (min-width: 1920px) {
}
@media (min-width: 1280px) and (max-width: 1380px) {
  .preload .path-1 {
    animation: animate-path 2.5s linear infinite;
  }
  .preload .path-2 {
    animation: animate-path 2.5s linear infinite;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .preload .path-1 {
    animation: animate-path 2.5s linear infinite;
  }

  .preload .path-2 {
    animation: animate-path 2.5s linear infinite;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .preload .path-1 {
    animation: animate-path 2.5s linear infinite;
  }

  .preload .path-2 {
    animation: animate-path 2.5s linear infinite;
  }
}

@media (max-width: 480px) {
  .preload .path-1 {
    animation: animate-path 2.5s linear infinite;
  }

  .preload .path-2 {
    animation: animate-path 2.5s linear infinite;
  }
}
/* #endregion preload */

/* #region translation */
.language-selector {
  position: fixed;
  bottom: 50px;
  /* left: 20px; */
  display: inline-flex;
  align-items: center;
  justify-content: start; /* Align children to the start for consistent positioning */
  border: 1px solid #9c9c9c;
  border-radius: 30px;
  background-color: rgba(42, 42, 42, 0.15);
  backdrop-filter: saturate(100%) blur(10px);

  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(0); /* Ensures hardware acceleration */
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  user-select: none;
  transition: width 0.6s ease, background-color 0.6s ease;
  width: 2.5rem; /* Default compact width */
  height: 2.5rem;
  z-index: 5;
  padding: 0 0.5rem 0 0.469rem; /* Prevent children from moving abruptly */
  margin-left: 2rem;
}
/* When scrolled, change color */
.language-selector.scrolled {
  background-color: rgba(0, 0, 0, 0.633);
}
.language-selector.scrolled:hover {
  background-color: rgba(0, 0, 0, 0.633);
}

.language-selector:hover,
.language-selector.active {
  width: 7rem; /* Expanded width on hover or active */
  background-color: rgba(255, 255, 255, 0.15);
}

.language-selector .l-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s ease; /* Smooth transform of SVG */
}

.language-selector .l-circle svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: #fff;
  fill: none;
}

#selectedLanguage {
  display: inline-block; /* Ensure it's an inline-block to take up space and animate smoothly */
  opacity: 0; /* Start invisible */
  padding-left: 0.5rem;
  white-space: nowrap;
  transition: opacity 0.6s ease, transform 0.6s ease; /* Animate opacity and transform */
  transform: translateX(-10px); /* Start with a slight shift */
}

.language-selector:hover #selectedLanguage,
.language-selector.active #selectedLanguage {
  opacity: 1; /* Fade in */
  transform: translateX(0); /* Move into place */
}

.language-dropdown {
  position: absolute;
  bottom: 100%; /* Expand upwards */
  left: 0;
  width: 100%;
  background-color: rgba(42, 42, 42, 0.55);

  border: 1px solid #9c9c9c;
  border-radius: 5px;
  margin-bottom: 1rem;
  list-style: none;
  padding: 0;
  z-index: 1000;
  overflow: hidden;

  /* Initially hidden */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.language-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.language-dropdown li {
  padding: 0.7rem;
  cursor: pointer;
  color: #fff;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.language-dropdown li:hover {
  background-color: rgba(255, 255, 255, 0.85);
  color: #000;
}

.language-dropdown li.selected {
  background-color: rgba(255, 255, 255, 0.55);
}
.language-dropdown li.selected:hover {
  background-color: rgba(255, 255, 255, 0.85);
}
/* Change dropdown background when scrolled */
.language-selector.scrolled .language-dropdown {
  background-color: rgb(31, 31, 31) !important;
}

/* Light mode variants */
body.light-mode .language-selector {
  background-color: rgba(255, 255, 255, 0.8);
  color: #000;
  border-color: #c0c0c0;
}

body.light-mode .language-selector .l-circle svg {
  stroke: #000;
}

/* When scrolled in light mode: make it darker for contrast */
body.light-mode .language-selector.scrolled {
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
}

body.light-mode .language-selector.scrolled .l-circle svg {
  stroke: #fff;
}

/* When scrolled, change color */
.language-selector.scrolled {
  background-color: rgba(0, 0, 0, 0.633);
}
.language-selector.scrolled:hover {
  background-color: rgba(0, 0, 0, 0.633);
}

.language-selector:hover,
.language-selector.active {
  width: 7rem; /* Expanded width on hover or active */
  background-color: rgba(255, 255, 255, 0.15);
}

.language-selector .l-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s ease; /* Smooth transform of SVG */
}

.language-selector .l-circle svg {
  width: 1.5rem;
  height: 1.5rem;
  stroke: #fff;
  fill: none;
}

#selectedLanguage {
  display: inline-block; /* Ensure it's an inline-block to take up space and animate smoothly */
  opacity: 0; /* Start invisible */
  padding-left: 0.5rem;
  white-space: nowrap;
  transition: opacity 0.6s ease, transform 0.6s ease; /* Animate opacity and transform */
  transform: translateX(-10px); /* Start with a slight shift */
}

.language-selector:hover #selectedLanguage,
.language-selector.active #selectedLanguage {
  opacity: 1; /* Fade in */
  transform: translateX(0); /* Move into place */
}

.language-dropdown {
  position: absolute;
  bottom: 100%; /* Expand upwards */
  left: 0;
  width: 100%;
  background-color: rgba(42, 42, 42, 0.55);

  border: 1px solid #9c9c9c;
  border-radius: 5px;
  margin-bottom: 1rem;
  list-style: none;
  padding: 0;
  z-index: 1000;
  overflow: hidden;

  /* Initially hidden */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.language-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.language-dropdown li {
  padding: 0.7rem;
  cursor: pointer;
  color: #fff;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}

.language-dropdown li:hover {
  background-color: rgba(255, 255, 255, 0.85);
  color: #000;
}

.language-dropdown li.selected {
  background-color: rgba(255, 255, 255, 0.55);
}
.language-dropdown li.selected:hover {
  background-color: rgba(255, 255, 255, 0.85);
}
/* Change dropdown background when scrolled */
.language-selector.scrolled .language-dropdown {
  background-color: rgb(31, 31, 31) !important;
}

/* Light mode variants */
body.light-mode .language-selector {
  background-color: rgba(255, 255, 255, 0.8);
  color: #000;
  border-color: #c0c0c0;
}

body.light-mode .language-selector .l-circle svg {
  stroke: #000;
}

/* When scrolled in light mode: make it darker for contrast */
body.light-mode .language-selector.scrolled {
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
}

body.light-mode .language-selector.scrolled .l-circle svg {
  stroke: #fff;
}
/* #endregion translation */

/* #region screensize index */
@media (min-width: 1920px) {
  .preload svg {
    width: 20rem;
    height: 20rem;
  }
}
@media (min-width: 1381px) and (max-width: 1780px) {
  .help-p-bot .help-i:nth-child(6) {
    transform: translateY(-30px);
  }
  .help-p-bot .help-i:nth-child(7) {
    transform: translate(492px, 0);
  }
  .help-p-bot {
    height: max-content;
  }
}
@media (min-width: 1280px) and (max-width: 1380px) {
  .hover-mask {
    display: none;
  }
  .help-p-bot {
    height: max-content;
  }
  .help-i {
    width: 20rem;
    height: 15rem;
  }
  body.light-mode .help-i {
    width: 20rem;
    height: 15rem;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .help-i:hover .i-phone {
    transform: scale(1.3) translateY(-15px) !important;
  }
  .hover-mask {
    display: none;
  }
  .preload svg {
    width: 20rem;
    height: 20rem;
  }
  .b-button {
    margin: 0;
  }
  .column {
    flex-basis: 100%;
  }
  .column:nth-child(2) {
    flex-basis: 100%;
  }
  .row1 {
    flex-direction: column;
  }
  .help-p-container {
    height: max-content;
  }
  .scroll-indicator {
    bottom: 4.5rem;
  }
  .work-p-container {
    min-height: 50vh;
  }
  .help-p-bot {
    gap: 3rem;
    height: max-content;
  }
  .help-i {
    width: 35rem;
    height: 30rem;
  }
  body.light-mode .help-i {
    width: 35rem;
    height: 30rem;
  }

  .help-p-bot .help-i:nth-child(2) img {
    width: 90%;
    bottom: 50px;
    top: 50px;
  }

  .help-p-bot .help-i:nth-child(7) img {
    width: 100%;
    bottom: 85px;
  }

  .help-p-bot .help-i:first-child {
    transform: translateY(0);
  }
  .help-p-bot .help-i:nth-child(2) {
    transform: translateY(0);
  }
  .help-p-bot .help-i:nth-child(3) {
    transform: translateY(0);
  }

  .help-p-bot .help-i:nth-child(4) {
    transform: translateY(0);
  }
  .help-p-bot .help-i:nth-child(5) {
    transform: translateY(0);
  }
  .help-p-bot .help-i:nth-child(6) {
    transform: translateY(0);
  }
  .help-p-bot .help-i:nth-child(7) {
    transform: translateY(0);
  }

  .sub-con {
    flex: 1;
    padding: 0;
  }
  .email-container {
    width: 100%;
  }
  .c-left {
    margin: 0;
    text-align: start;
  }
  .site-footer ul {
    align-items: center;
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .help-i:hover .i-phone {
    transform: scale(1.3) translateY(-15px) !important;
  }
  .language-selector {
    padding: 0 0.4rem 0 0.468rem;
  }
  .column {
    margin: 0 1rem 0 1rem;
  }
  .hover-mask {
    display: none;
  }
  .preload svg {
    width: 20rem;
    height: 20rem;
  }
  html {
    font-size: 8px;
  }

  .nav-trigger.on span:last-child {
    transform: translateY(-2px) rotate(-45deg);
  }
  nav .right a:nth-child(1),
  nav .right a:nth-child(2),
  nav .right a:nth-child(3),
  nav .right a:nth-child(4) {
    display: none;
  }
  .neg {
    margin: 0;
  }
  .column,
  .column1 {
    flex: 1 1 100%;
  }
  .b-button {
    margin: 0;
  }
  .neg1 {
    margin: 0;
    padding: 0 1rem 0 1rem;
  }
  .help-p-container {
    height: max-content;
  }
  .scroll-indicator {
    bottom: 2.5rem;
  }
  .help-p-bot {
    gap: 3rem;
    height: max-content;
  }
  .help-i {
    width: 35rem;
    height: 30rem;
  }
  body.light-mode .help-i {
    width: 35rem;
    height: 30rem;
  }

  .help-p-bot .help-i:nth-child(2) img {
    width: 100%;
    bottom: 50px;
    top: 50px;
  }
  .help-p-bot .help-i:first-child {
    transform: translateY(0);
  }
  .help-p-bot .help-i:nth-child(2) {
    transform: translateY(0);
  }
  .help-p-bot .help-i:nth-child(3) {
    transform: translateY(0);
  }

  .help-p-bot .help-i:nth-child(4) {
    transform: translateY(0);
  }
  .help-p-bot .help-i:nth-child(5) {
    transform: translateY(0);
  }
  .help-p-bot .help-i:nth-child(6) {
    transform: translateY(0);
  }
  .help-p-bot .help-i:nth-child(7) {
    transform: translateY(0);
  }
  .work-p-container {
    height: max-content;
    min-height: max-content;
  }
  .work-p-bot {
    margin: 0;
    gap: 2rem;
  }
  .work-i {
    flex: 1 0 100%;
    height: 20rem;
  }
  .sub-con {
    width: 100%;
    max-width: 100%;
    flex: 1;
    padding: 0;
  }
  .email-container {
    width: 100%;
  }
  .c-left {
    margin: 0;
    text-align: end;
  }
  .site-footer ul {
    align-items: flex-end;
  }
}

@media (max-width: 480px) {
  .help-i:hover .i-phone {
    transform: scale(1.3) translateY(-15px) !important;
  }
  .language-selector {
    padding: 0 0.4rem 0 0.468rem;
    bottom: 1rem;
  }
  .column {
    margin: 0 1rem 0 1rem;
  }
  .hover-mask {
    display: none;
  }
  .preload svg {
    width: 20rem;
    height: 20rem;
  }
  nav.scroll-active {
    padding: 0 1rem;
  }
  .n-cpright .logo-container {
    padding: 0;
  }
  .n-cpright .logo-container .logo {
    width: 3rem;
    height: 3rem;
  }
  .nav-menu .n-cpright p {
    font-size: 5rem;
    margin-top: -1.5rem;
  }
  .n-r-bot {
    padding-bottom: 1rem;
  }
  .n-right {
    padding: 4rem 3rem 0 0;
  }
  .cpright .logo-container {
    position: static;
    transform: translateX(0);
  }
  .cpright {
    padding: 1rem 0 0.5rem 0;
    gap: 0.5rem;
    flex-direction: column;
  }

  nav {
    padding: 1rem 0.3rem 1rem 0.3rem;
    width: 100%;
  }
  nav .right a:nth-child(1),
  nav .right a:nth-child(2),
  nav .right a:nth-child(3),
  nav .right a:nth-child(4) {
    display: none;
  }
  .neg {
    margin: 0;
  }
  .column a {
    font-size: 3rem;
  }
  .column,
  .column1 {
    flex: 1 1 100%;
  }
  .b-button {
    margin: 0;
  }
  .neg1 li {
    font-size: 1.5rem;
  }
  .neg1 {
    margin: 0;
    padding: 0 1rem 0 1rem;
  }
  .help-p-container {
    height: max-content;
  }
  .scroll-indicator {
    bottom: 2.5rem;
  }
  .help-p-bot {
    gap: 3rem;
    height: max-content;
  }
  .help-i {
    width: 20rem;
    height: 15rem;
  }
  body.light-mode .help-i {
    width: 20rem;
    height: 15rem;
  }

  .help-i:hover .edit-book {
    transform: scale(1.3) translateY(-15px) !important;
    z-index: 10;
  }
  .brand-parallax.hovered {
    transform: scale(1.3) translateY(10px) !important;
    z-index: 10;
  }
  .help-i:hover .p-cup {
    transform: scale(1.3) translateY(35px) !important;
    z-index: 10;
  }
  .i-phone {
    bottom: 20px;
  }
  .help-p-bot .help-i:nth-child(2) img {
    width: 100%;
    bottom: 50px;
    top: 50px;
  }
  .help-p-bot .help-i:nth-child(7) img {
    bottom: 65px;
  }
  .help-p-bot .help-i:first-child {
    transform: translateY(0);
  }
  .help-p-bot .help-i:nth-child(2) {
    transform: translateY(0);
  }
  .help-p-bot .help-i:nth-child(3) {
    transform: translateY(0);
  }

  .help-p-bot .help-i:nth-child(4) {
    transform: translateY(0);
  }
  .help-p-bot .help-i:nth-child(5) {
    transform: translateY(0);
  }
  .help-p-bot .help-i:nth-child(6) {
    transform: translateY(0);
  }
  .help-p-bot .help-i:nth-child(7) {
    transform: translateY(0);
  }
  .help-p-container .overlay p {
    font-size: 0.7rem;
  }
  .work-p-container {
    height: max-content;
    min-height: max-content;
  }
  .work-p-bot {
    width: 100%;
    margin: 0;
    justify-content: flex-start;
  }

  .work-i {
    flex: 0 0 auto;
    width: 80%;
    min-width: 20rem;
    height: 15rem;
    margin: 0;
  }
  .parallax-text {
    font-size: 5rem;
  }
  .site-footer {
    padding: 2rem 1rem 0.3rem 1rem;
  }

  .sub-con {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding-left: 0 !important;
    gap: 2rem !important;
  }

  .email-container {
    width: 100% !important;
    max-width: 100% !important;
  }
  .site-footer ul {
    align-items: center;
  }

  .c-left {
    margin: 0;
    text-align: center;
    margin-bottom: 1.36rem;
  }
}
/* #endregion screensize index */