/*! ------------------------------------------------
 * Project Name: Name: Blayden - Personal Portfolio & Resume HTML Template
 * Project Description: Show yourself brightly with Blayden - clean and creative portfolio and resume template!
 * Tags: mix_design, resume, portfolio, personal page, cv, template, one page, responsive, html5, css3, creative, clean 
 * Version: 1.0.0
 * Build Date: June 2024
 * Last Update: June 2024
 * This product is available exclusively on Themeforest
 * Author: mix_design
 * Author URI: https://themeforest.net/user/mix_design */
/*! File name: main.css
 * ------------------------------------------------
 * ------------------------------------------------
 * Table of Contents
 * ------------------------------------------------
 *  01. Fonts
 *  02. Variables
 *  03. Template Backgrounds
 *  04. Basic Styles
 *  05. Animations - Transitions
 *  06. Animations - Backgrounds
 *  07. Elements - Typography
 *  08. Elements - Controls
 *  09. Elements - Forms
 *  11. Sections Main
 *  12. Sections Inner
 *  13. Blocks Common
 *  14. Blocks Header
 *  15. Blocks Menu
 *  16. Blocks Footer
 *  17. Blocks Popup Dialogs
 *  18. Features Marquee
 *  19. Features About
 *  20. Features Gallery
 *  21. Features Achievements
 *  22. Features Stacking Cards
 *  23. Features Services
 *  24. Features Resume
 *  25. Features Tools
 *  26. Features Testimonials
 *  27. Features Slider
 *  28. Features Accordion
 *  29. Features Socials
 *  30. Features Contact Data
 * ------------------------------------------------
 * Table of Contents End
 * ------------------------------------------------ */
/* ------------------------------------------------*/
/* Fonts Start */
/* ------------------------------------------------*/
/* Urbanist font - Loaded locally for better performance and privacy */

/* Urbanist Normal */
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/Urbanist/Urbanist-300-normal.ttf') format('truetype');
}

@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Urbanist/Urbanist-400-normal.ttf') format('truetype');
}

@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Urbanist/Urbanist-500-normal.ttf') format('truetype');
}

@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Urbanist/Urbanist-600-normal.ttf') format('truetype');
}

@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Urbanist/Urbanist-700-normal.ttf') format('truetype');
}

/* Urbanist Italic */
@font-face {
  font-family: 'Urbanist';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/Urbanist/Urbanist-300-italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Urbanist';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Urbanist/Urbanist-400-italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Urbanist';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Urbanist/Urbanist-500-italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Urbanist';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Urbanist/Urbanist-600-italic.ttf') format('truetype');
}

@font-face {
  font-family: 'Urbanist';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Urbanist/Urbanist-700-italic.ttf') format('truetype');
}

/* ------------------------------------------------*/
/* Fonts End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Variables Start */
/* ------------------------------------------------*/
:root {
  --_size: 1.6rem;
  /* Font stack with fallbacks for immediate text visibility */
  --_font-default: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --_font-accent: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --_radius: 2rem;
  --_radius-s: 1rem;
  --_animspeed-fast: 0.1s;
  --_animspeed-medium: 0.3s;
  --_animspeed-slow: 0.6s;
  --_animbezier: cubic-bezier(0.23, 0.65, 0.74, 1.09);
  /* light color scheme */
  --base--light: #BABEC8;
  --base-rgb--light: 186, 190, 200;
  --base-shade--light: #989ba3;
  --base-tint--light: #d8dde7;
  --stroke-controls--light: #2C2E34;
  --stroke-elements--light: #8F93A1;
  --font-weight-base--light: 400;
  --font-weight-medium--light: 600;
  --t-bright--light: #151617;
  --t-medium--light: #44474a;
  --t-muted--light: #797D83;
  --t-opp-bright--light: #F2F5FC;
  --t-opp-medium--light: #AEB5C5;
  --t-opp-muted--light: #3E4045;
  --neutral-bright--light: #000000;
  /* dark color scheme */
  --base--dark: #141414;
  --base-rgb--dark: 20, 20, 20;
  --base-shade--dark: #000000;
  --base-tint--dark: #242424;
  --stroke-controls--dark: #F2F5FC;
  --stroke-elements--dark: #535762;
  --font-weight-base--dark: 300;
  --font-weight-medium--dark: 500;
  --t-bright--dark: #F2F5FC;
  --t-medium--dark: #AEB5C5;
  --t-muted--dark: #505258;
  --t-opp-bright--dark: #151617;
  --t-opp-medium--dark: #313437;
  --t-opp-muted--dark: #797D83;
  --neutral-bright--dark: #ffffff;
  /* permanent colors */
  --per-base: #141414;
  --t-per-bright-light: #F2F5FC;
  --t-per-medium-light: #AEB5C5;
  --t-per-muted-light: #3E4045;
  --t-per-bright-dark: #151617;
  --t-per-medium-dark: #313437;
  --t-per-muted-dark: #797D83;
  --per-stroke-controls: #F2F5FC;
  --per-stroke-elements: #8F93A1;
  /* neutral colors */
  --neutral-white: #ffffff;
  --neutral-black: #000000;
  --neutral-gray: #878787;
  --neutral-gray-dark: #404040;
  --dropdown-menu-offset: 110%;
  /* Default: right below the button */
  --mobile-menu-scale: 0.9;
  /* Mobile menu scale - adjust this value to scale the menu (0.8 = 80%, 1.2 = 120%, etc.) */

}

/* defaults */
@media (prefers-color-scheme: light) {
  :root {
    --base: var(--base--light);
    --base-rgb: var(--base-rgb--light);
    --base-shade: var(--base-shade--light);
    --base-tint: var(--base-tint--light);
    --stroke-controls: var(--stroke-controls--light);
    --stroke-elements: var(--stroke-elements--light);
    --font-weight-base: var(--font-weight-base--light);
    --font-weight-medium: var(--font-weight-medium--light);
    --t-bright: var(--t-bright--light);
    --t-medium: var(--t-medium--light);
    --t-muted: var(--t-muted--light);
    --t-opp-bright: var(--t-opp-bright--light);
    --t-opp-medium: var(--t-opp-medium--light);
    --t-opp-muted: var(--t-opp-muted--light);
    --neutral-bright: var(--neutral-bright--light);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --base: var(--base--dark);
    --base-rgb: var(--base-rgb--dark);
    --base-shade: var(--base-shade--dark);
    --base-tint: var(--base-tint--dark);
    --stroke-controls: var(--stroke-controls--dark);
    --stroke-elements: var(--stroke-elements--dark);
    --font-weight-base: var(--font-weight-base--dark);
    --font-weight-medium: var(--font-weight-medium--dark);
    --t-bright: var(--t-bright--dark);
    --t-medium: var(--t-medium--dark);
    --t-muted: var(--t-muted--dark);
    --t-opp-bright: var(--t-opp-bright--dark);
    --t-opp-medium: var(--t-opp-medium--dark);
    --t-opp-muted: var(--t-opp-muted--dark);
    --neutral-bright: var(--neutral-bright--dark);
  }
}

[color-scheme=light] {
  --base: var(--base--light);
  --base-rgb: var(--base-rgb--light);
  --base-shade: var(--base-shade--light);
  --base-tint: var(--base-tint--light);
  --stroke-controls: var(--stroke-controls--light);
  --stroke-elements: var(--stroke-elements--light);
  --font-weight-base: var(--font-weight-base--light);
  --font-weight-medium: var(--font-weight-medium--light);
  --t-bright: var(--t-bright--light);
  --t-medium: var(--t-medium--light);
  --t-muted: var(--t-muted--light);
  --t-opp-bright: var(--t-opp-bright--light);
  --t-opp-medium: var(--t-opp-medium--light);
  --t-opp-muted: var(--t-opp-muted--light);
  --neutral-bright: var(--neutral-bright--light);
}

[color-scheme=dark] {
  --base: var(--base--dark);
  --base-rgb: var(--base-rgb--dark);
  --base-shade: var(--base-shade--dark);
  --base-tint: var(--base-tint--dark);
  --stroke-controls: var(--stroke-controls--dark);
  --stroke-elements: var(--stroke-elements--dark);
  --font-weight-base: var(--font-weight-base--dark);
  --font-weight-medium: var(--font-weight-medium--dark);
  --t-bright: var(--t-bright--dark);
  --t-medium: var(--t-medium--dark);
  --t-muted: var(--t-muted--dark);
  --t-opp-bright: var(--t-opp-bright--dark);
  --t-opp-medium: var(--t-opp-medium--dark);
  --t-opp-muted: var(--t-opp-muted--dark);
  --neutral-bright: var(--neutral-bright--dark);
}

/* ------------------------------------------------*/
/* Variables End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Template Backgrounds Start */
/* ------------------------------------------------*/
.main-image-1 {
  background-image: url("https://dummyimage.com/1400x1000/414141/636363");
}

.main-image-2 {
  background-image: url("https://dummyimage.com/1920x1080/414141/636363");
}

.about-image-1 {
  background-image: url("https://dummyimage.com/1400x1000/4d4d4d/636363");
}

.marquee-image-single-1 {
  background-image: url("https://dummyimage.com/1000x1300/4d4d4d/636363");
}

.marquee-image-single-2 {
  background-image: url("https://dummyimage.com/1000x1300/4d4d4d/636363");
}

.marquee-image-single-3 {
  background-image: url("https://dummyimage.com/1000x1300/4d4d4d/636363");
}

.marquee-image-single-4 {
  background-image: url("https://dummyimage.com/1000x1300/4d4d4d/636363");
}

.marquee-image-single-5 {
  background-image: url("https://dummyimage.com/1000x1300/4d4d4d/636363");
}

.marquee-image-single-6 {
  background-image: url("https://dummyimage.com/1000x1300/4d4d4d/636363");
}

.portfolio-item-1 {
  background-image: url("https://dummyimage.com/1920x1080/686868/737373");
}

.portfolio-item-2 {
  background-image: url("https://dummyimage.com/1920x1080/414141/636363");
}

.portfolio-item-3 {
  background-image: url("https://dummyimage.com/1920x1080/686868/737373");
}

.portfolio-item-4 {
  background-image: url("https://dummyimage.com/1920x1080/414141/636363");
}

.portfolio-item-5 {
  background-image: url("https://dummyimage.com/1600x1200/686868/737373");
}

.portfolio-item-6 {
  background-image: url("https://dummyimage.com/1600x1200/414141/636363");
}

.portfolio-item-7 {
  background-image: url("https://dummyimage.com/1600x1200/686868/737373");
}

.portfolio-item-8 {
  background-image: url("https://dummyimage.com/1600x1200/414141/636363");
}

.project-image-bg-1 {
  background-image: url("https://dummyimage.com/1920x1280/4d4d4d/636363");
}

.project-image-bg-2 {
  background-image: url("https://dummyimage.com/1920x1080/4d4d4d/636363");
}

.project-image-bg-3 {
  background-image: url("https://dummyimage.com/1920x1080/4d4d4d/636363");
}

/* ------------------------------------------------*/
/* Template Backgrounds End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Basic Styles Start */
/* ------------------------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

button:active,
button:focus {
  outline: none !important;
}

button::-moz-focus-inner {
  border: 0 !important;
}

input::-moz-focus-inner {
  border: 0 !important;
}

a:focus,
button:focus,
input:focus,
textarea:focus {
  -webkit-tap-highlight-color: transparent;
}

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: transparent;
}

::-moz-selection {
  background-color: var(--base-tint);
  color: var(--t-medium);
  text-shadow: none;
}

::selection {
  background-color: var(--base-tint);
  color: var(--t-medium);
  text-shadow: none;
}

::-webkit-scrollbar {
  display: none;
  width: 6px;
  background: var(--base-shade);
}

@media only screen and (min-width: 768px) {
  ::-webkit-scrollbar {
    display: block;
  }
}

::-webkit-scrollbar-track {
  background-color: var(--base-shade);
}

::-webkit-scrollbar-thumb {
  background-color: var(--base-tint);
  border-radius: var(--_radius-s);
}

/* Firefox scrollbar styling */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--base-tint) transparent;
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  font-size: 62.5%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  width: 100%;
  min-width: 360px;
  overflow-x: unset !important;
  font: normal 400 var(--_size)/1.4 var(--_font-default);
  text-rendering: optimizeLegibility;
  background-color: var(--base);
  color: var(--t-medium);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

section {
  position: relative;
  min-width: 360px;
}

a {
  text-decoration: none;
  outline: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transition: all var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: all var(--_animspeed-medium) var(--_animbezier);
  transition: all var(--_animspeed-medium) var(--_animbezier);
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.overflow-hidden {
  overflow: hidden !important;
}

.components {
  position: relative;
}

.components__item {
  position: relative;
  padding: 8rem 10%;
  border-bottom: 1px solid var(--stroke-elements);
}

.components__caption {
  display: block;
  font: normal 400 1.3rem/1 var(--_font-default);
  color: var(--t-medium);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  margin-bottom: 2rem;
}

.spacer {
  height: 300px;
}

/* ------------------------------------------------*/
/* Basic Styles End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Animations - Transitions Start */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Animations - Transitions End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Animations - Backgrounds Start */
/* ------------------------------------------------*/
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.video {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-position: center center;
  -moz-background-size: contain;
  background-size: contain;
  -o-object-fit: cover;
  object-fit: cover;
}

/* ------------------------------------------------*/
/* Animations - Backgrounds End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Elements - Typography Start */
/* ------------------------------------------------*/
h1 {
  font: normal 300 5.6rem var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  h1 {
    font-size: 9rem;
  }
}

@media only screen and (min-width: 1200px) {
  h1 {
    font-size: 11rem;
  }
}

@media only screen and (min-width: 1400px) {
  h1 {
    font-size: 12.6rem;
  }
}

@media only screen and (min-width: 1600px) {
  h1 {
    font-size: 16rem;
  }
}

@media only screen and (min-width: 992px) {
  .headline-80-desktop .headline__title {
    max-width: 67rem;
  }
}

@media only screen and (min-width: 1200px) {
  .headline-80-desktop .headline__title {
    max-width: none;
  }
}

.headline__subtitle.space-top {
  margin-top: 4.6rem;
}

.headline__subtitle.space-bottom {
  margin-bottom: 3.8rem;
}

@media only screen and (min-width: 768px) {
  .headline__subtitle.space-top {
    margin-top: 5.7rem;
  }

  .headline__subtitle.space-bottom {
    margin-bottom: 4.2rem;
  }
}

@media only screen and (min-width: 992px) {
  .headline__subtitle.space-top {
    margin-top: 6.4rem;
  }

  .headline__subtitle.space-bottom {
    margin-bottom: 4.9rem;
  }
}

@media only screen and (min-width: 1200px) {
  .headline__subtitle.space-top {
    margin-top: 5.8rem;
  }

  .headline__subtitle.space-bottom {
    margin-bottom: 4rem;
  }
}

@media only screen and (min-width: 1400px) {
  .headline__subtitle.space-top {
    margin-top: 6.3rem;
  }

  .headline__subtitle.space-bottom {
    margin-bottom: 5.7rem;
  }
}

@media only screen and (min-width: 1600px) {
  .headline__subtitle.space-top {
    margin-top: 6.8rem;
  }

  .headline__subtitle.space-bottom {
    margin-bottom: 4.1rem;
  }
}

h2 {
  font: normal 300 4.6rem var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  h2 {
    font-size: 8rem;
  }
}

@media only screen and (min-width: 1200px) {
  h2 {
    font-size: 9rem;
  }
}

@media only screen and (min-width: 1400px) {
  h2 {
    font-size: 10rem;
  }
}

@media only screen and (min-width: 1600px) {
  h2 {
    font-size: 14rem;
  }
}

.h2__text {
  margin-top: 4.5rem;
}

@media only screen and (min-width: 768px) {
  .h2__text {
    margin-top: 5.7rem;
    max-width: 67rem;
  }
}

@media only screen and (min-width: 992px) {
  .h2__text {
    margin-top: 6.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .h2__text {
    margin-top: 5.9rem;
    max-width: 78rem;
  }

  .h2__text.text-half {
    max-width: 54%;
  }

  .h2__text.text-twothirds {
    max-width: 67%;
  }
}

@media only screen and (min-width: 1400px) {
  .h2__text {
    margin-top: 6.6rem;
  }

  .h2__text.text-half {
    max-width: 50%;
  }
}

@media only screen and (min-width: 1600px) {
  .h2__text {
    margin-top: 6.9rem;
  }

  .h2__text.text-half {
    max-width: 45%;
  }
}

h3 {
  font: normal 400 3.4rem var(--_font-accent);
  color: var(--t-bright);
}

h3.dark {
  color: var(--t-per-bright-dark);
  font-weight: 400;
}

h3.light {
  color: var(--t-per-bright-light);
  font-weight: 300;
}

@media only screen and (min-width: 768px) {
  h3 {
    font-size: 4.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  h3 {
    font-size: 5rem;
  }
}

@media only screen and (min-width: 1400px) {
  h3 {
    font-size: 5.6rem;
  }
}

@media only screen and (min-width: 1600px) {
  h3 {
    font-size: 6.4rem;
  }
}

h4 {
  font: normal 400 2.6rem var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 1400px) {
  h4 {
    font-size: 3rem;
  }
}

@media only screen and (min-width: 1600px) {
  h4 {
    font-size: 3.6rem;
  }
}

h5 {
  font: normal 500 2.2rem var(--_font-accent);
  color: var(--t-bright);
}

h6 {
  font: normal var(--font-weight-base) 1.8rem/1.6 var(--_font-default);
  color: var(--t-bright);
}

@media only screen and (min-width: 1200px) {
  h6 {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1400px) {
  h6 {
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  h6 {
    font-size: 2.6rem;
  }
}

.section-name {
  position: relative;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  justify-content: flex-start;
  font: normal var(--font-weight-base) 1.8rem/1.4 var(--_font-default);
  color: var(--t-bright);
}

.section-name .section-name-caption,
.section-name i {
  position: relative;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.section-name i {
  font-size: 2.3rem;
  overflow: hidden;
}

.section-name.icon-left .section-name-caption {
  margin-left: 1rem;
}

.section-name.icon-right .section-name-caption {
  margin-right: 1rem;
}

@media only screen and (min-width: 1200px) {
  .section-name {
    font-size: 2rem;
  }

  .section-name i {
    font-size: 2.5rem;
  }
}

@media only screen and (min-width: 1400px) {
  .section-name {
    font-size: 2.2rem;
  }

  .section-name i {
    font-size: 2.7rem;
  }
}

@media only screen and (min-width: 1600px) {
  .section-name {
    font-size: 2.6rem;
  }

  .section-name i {
    font-size: 3.2rem;
  }
}

.tagline-chapter {
  font: normal var(--font-weight-medium) 1.8rem var(--_font-default);
  color: var(--t-bright);
}

.tagline-chapter.small {
  font-size: 1.6rem;
}

.tagline-chapter::before {
  content: "[";
  display: inline;
  padding-right: 0.24em;
}

.tagline-chapter::after {
  content: "]";
  display: inline;
  padding-left: 0.24em;
}

@media only screen and (min-width: 1200px) {
  .tagline-chapter {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1400px) {
  .tagline-chapter {
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .tagline-chapter {
    font-size: 2.6rem;
  }

  .tagline-chapter.small {
    font-size: 1.8rem;
  }
}

.tagline-tool {
  font: normal 500 1.8rem var(--_font-default);
  color: var(--t-bright);
}

@media only screen and (min-width: 1200px) {
  .tagline-tool {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1400px) {
  .tagline-tool {
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .tagline-tool {
    font-size: 2.6rem;
  }
}

p {
  font: normal var(--font-weight-base) 1.8rem var(--_font-default);
  color: var(--t-bright);
}

p.type-basic-160lh {
  line-height: 1.6;
}

p.type-basic-140lh {
  line-height: 1.4;
}

p.small {
  font-size: 1.6rem;
}

p.dark {
  color: var(--t-per-bright-dark);
  font-weight: 400;
}

p.light {
  color: var(--t-per-bright-light);
  font-weight: 300;
}

@media only screen and (min-width: 1200px) {
  p {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1400px) {
  p {
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  p {
    font-size: 2.6rem;
  }

  p.small {
    font-size: 1.8rem;
  }
}

a {
  font: normal var(--font-weight-base) 1.8rem var(--_font-default);
  color: var(--t-bright);
  text-decoration: none;
}

a.link-small {
  font-size: 1.6rem;
}

a.link-small-underline {
  font-size: 1.6rem;
  text-decoration: underline;
}

a.link-small-160lh {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 1.6rem;
  line-height: 1.6;
}

.no-touch a:hover.link-small {
  color: var(--t-medium);
}

.no-touch a:hover.link-small-underline {
  color: var(--t-medium);
}

.no-touch a:hover.link-small-160lh {
  color: var(--t-medium);
}

@media only screen and (min-width: 1200px) {
  a {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1400px) {
  a {
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  a {
    font-size: 2.6rem;
  }

  a.link-small {
    font-size: 1.8rem;
  }

  a.link-small-underline {
    font-size: 1.8rem;
    text-decoration: underline;
  }

  a.link-small-160lh {
    font-size: 1.8rem;
    line-height: 1.6;
  }
}

blockquote {
  font: normal 300 3.2rem/1.4 var(--_font-default);
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  blockquote {
    font-size: 4.4rem;
    max-width: 76rem;
  }
}

@media only screen and (min-width: 1200px) {
  blockquote {
    font-size: 5rem;
    max-width: none;
  }
}

@media only screen and (min-width: 1400px) {
  blockquote {
    font-size: 5.6rem;
  }
}

@media only screen and (min-width: 1600px) {
  blockquote {
    font-size: 6.8rem;
  }
}

.logo-text {
  font: normal 600 1.8rem var(--_font-default);
  color: var(--t-bright);
  transition: text-shadow 0.3s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

@media only screen and (min-width: 768px) {
  .logo-text {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1400px) {
  .logo-text {
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .logo-text {
    font-size: 2.6rem;
  }
}

.menu-link {
  font: normal 500 1.6rem var(--_font-default);
}

@media only screen and (min-width: 1600px) {
  .menu-link {
    font-size: 1.8rem;
  }
}

.text-link {
  color: inherit;
  text-decoration: none;
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright)));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright));
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 400ms, color 300ms;
  -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
  transition: background-size 400ms, color 300ms;
  transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
}

.text-link.text-link-medium {
  background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-muted)), to(var(--t-muted)));
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-muted), var(--t-muted));
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-muted), var(--t-muted));
  -moz-background-size: 100% 1px, 0 1px;
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  -webkit-transition: background-size 400ms, color 300ms;
  -moz-transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
  transition: background-size 400ms, color 300ms;
  transition: background-size 400ms, color 300ms, -moz-background-size 400ms;
}

.no-touch .text-link:hover {
  -moz-background-size: 0 1px, 100% 1px;
  background-size: 0 1px, 100% 1px;
}

/* Enable underline effect on mobile/touch devices */
@media (hover: none) and (pointer: coarse) {
  .text-link:active {
    -moz-background-size: 0 1px, 100% 1px;
    background-size: 0 1px, 100% 1px;
  }
}

/* ------------------------------------------------*/
/* Elements - Typography End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Elements - Controls Start */
/* ------------------------------------------------*/
.btn {
  position: relative;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: none;
  outline: 0;
  padding: 0;
  font: inherit;
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.btn-line {
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font: normal var(--font-weight-medium) 1.8rem/1.4 var(--_font-default);
  color: var(--t-bright);
}

.btn-line .btn-caption,
.btn-line i {
  position: relative;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.btn-line i {
  font-size: 2.3rem;
  overflow: hidden;
}

.btn-line.icon-left .btn-caption {
  margin-left: 1rem;
}

.btn-line.icon-right .btn-caption {
  margin-right: 1rem;
}

/* Explore Yacht Configurator button: arrow slides right on hover */
.js-switch-to-popup.btn-line i {
  transition: transform 0.25s ease;
}

.js-switch-to-popup.btn-line:hover i {
  transform: translateX(0.25em);
}

.btn-line:hover {
  color: var(--t-medium);
}

@media only screen and (min-width: 1200px) {
  .btn-line {
    font-size: 2rem;
  }

  .btn-line i {
    font-size: 2.5rem;
  }
}

@media only screen and (min-width: 1400px) {
  .btn-line {
    font-size: 2.2rem;
  }

  .btn-line i {
    font-size: 2.7rem;
  }
}

@media only screen and (min-width: 1600px) {
  .btn-line {
    font-size: 2.6rem;
  }

  .btn-line i {
    font-size: 3.2rem;
  }
}

.btn-line-small {
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  font: normal var(--font-weight-medium) 1.4rem/1.4 var(--_font-default);
  color: var(--t-bright);
}

.btn-line-small .btn-caption,
.btn-line-small i {
  position: relative;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.btn-line-small i {
  font-size: 1.6rem;
  overflow: hidden;
}

.btn-line-small.icon-left .btn-caption {
  margin-left: 1rem;
}

.btn-line-small.icon-right .btn-caption {
  margin-right: 1rem;
}

.btn-line-small:hover {
  color: var(--t-medium);
}

@media only screen and (min-width: 768px) {
  .btn-line-small {
    font-size: 1.6rem;
  }

  .btn-line-small i {
    font-size: 1.9rem;
  }
}

@media only screen and (min-width: 1600px) {
  .btn-line-small {
    font-size: 1.8rem;
  }

  .btn-line-small i {
    font-size: 2.2rem;
    padding-bottom: 0.2rem;
  }
}

.btn-default {
  width: 100%;
  height: 10rem;
  padding: 0 7.6rem;
  -moz-border-radius: 5rem;
  border-radius: 5rem;
  border: 1px solid var(--stroke-controls);
  background-color: transparent;
  font: normal var(--font-weight-medium) 1.8rem/10rem var(--_font-default);
  color: var(--t-bright);
}

/* Button hover animations - work on all screen sizes */
.hover-default {
  position: relative;
  overflow: hidden;
  transition: color 0.4s ease-in-out;
}

.hover-default em {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: var(--t-bright);
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.hover-default:hover {
  color: var(--t-opp-bright);
  transition: color 0.4s ease-in-out;
}

.hover-default:hover em {
  width: 350%;
  height: 350%;
}

@media only screen and (min-width: 576px) {
  .btn-default {
    width: auto;
  }
}

@media only screen and (min-width: 1200px) {
  .btn-default {
    font-size: 2rem;
  }

  .btn-default .btn-caption {
    display: block;
    position: relative;
  }
}

@media only screen and (min-width: 1400px) {
  .btn-default {
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .btn-default {
    height: 11rem;
    line-height: 11rem;
    -moz-border-radius: 6rem;
    border-radius: 6rem;
    font-size: 2.6rem;
  }
}



.btn-circle-text {
  width: 10rem;
  height: 10rem;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid var(--neutral-bright);
  background-color: var(--neutral-bright);
  font: normal var(--font-weight-medium) 1.2rem var(--_font-default);
  color: var(--t-opp-bright);
}

@media only screen and (min-width: 1200px) {
  .btn-circle-text {
    width: 11rem;
    height: 11rem;
    font-size: 1.4rem;
    border: 1px solid var(--stroke-controls);
    background-color: transparent;
    color: var(--t-bright);
  }

  .btn-circle-text .btn-caption {
    display: block;
    position: relative;
  }
}

@media only screen and (min-width: 1400px) {
  .btn-circle-text {
    width: 14rem;
    height: 14rem;
    font-size: 1.6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .btn-circle-text {
    width: 16rem;
    height: 16rem;
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .hover-circle {
    position: relative;
    overflow: hidden;
    -webkit-transition: color 0.3s 0s, background-color 0s 0s, -webkit-transform 0.3s ease-in-out;
    transition: color 0.3s 0s, background-color 0s 0s, -webkit-transform 0.3s ease-in-out;
    -moz-transition: color 0.3s 0s, background-color 0s 0s, transform 0.3s ease-in-out, -moz-transform 0.3s ease-in-out;
    transition: color 0.3s 0s, background-color 0s 0s, transform 0.3s ease-in-out;
    transition: color 0.3s 0s, background-color 0s 0s, transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out, -moz-transform 0.3s ease-in-out;
  }

  .hover-circle em {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: var(--t-bright);
    -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
    -moz-transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }

  .no-touch .hover-circle:hover {
    color: var(--t-opp-bright);
    background-color: var(--t-bright);
    -webkit-transition: color 0.3s 0s, background-color 0.3s 0.2s, -webkit-box-shadow 0.5s, -webkit-transform 0.3s ease-in-out;
    transition: color 0.3s 0s, background-color 0.3s 0.2s, -webkit-box-shadow 0.5s, -webkit-transform 0.3s ease-in-out;
    -moz-transition: color 0.3s 0s, background-color 0.3s 0.2s, box-shadow 0.5s, transform 0.3s ease-in-out, -moz-box-shadow 0.5s, -moz-transform 0.3s ease-in-out;
    transition: color 0.3s 0s, background-color 0.3s 0.2s, box-shadow 0.5s, transform 0.3s ease-in-out;
    transition: color 0.3s 0s, background-color 0.3s 0.2s, box-shadow 0.5s, transform 0.3s ease-in-out, -webkit-box-shadow 0.5s, -moz-box-shadow 0.5s, -webkit-transform 0.3s ease-in-out, -moz-transform 0.3s ease-in-out;
  }

  .no-touch .hover-circle:hover em {
    width: 225%;
    height: 225%;
  }

  .no-touch .hover-circle:hover i {
    color: var(--t-opp-bright);
    -webkit-transition: color 0.3s 0s;
    -moz-transition: color 0.3s 0s;
    transition: color 0.3s 0s;
  }
}

.btn-circle-icon {
  width: 10rem;
  height: 10rem;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid var(--neutral-bright);
  background-color: var(--neutral-bright);
  font-size: 2.4rem;
  color: var(--t-opp-bright);
}

@media only screen and (min-width: 768px) {
  .btn-circle-icon {
    width: 15.4rem;
    height: 15.4rem;
    font-size: 3.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .btn-circle-icon {
    width: 17.4rem;
    height: 17.4rem;
    border: 1px solid var(--stroke-controls);
    background-color: transparent;
    color: var(--t-bright);
    font-size: 3.8rem;
  }

  .btn-circle-icon i {
    display: block;
    position: relative;
    overflow: hidden;
  }
}

@media only screen and (min-width: 1400px) {
  .btn-circle-icon {
    width: 19rem;
    height: 19rem;
    font-size: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .btn-circle-icon {
    width: 26.6rem;
    height: 26.6rem;
    font-size: 5rem;
  }
}

.btn-line-circle-icon {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font: normal var(--font-weight-medium) 1.8rem var(--_font-default);
  color: var(--t-bright);
}

.btn-line-circle-icon .btn-caption {
  position: relative;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-right: 2rem;
}

.btn-line-circle-icon .circle {
  position: relative;
  width: 10rem;
  height: 10rem;
  -moz-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid var(--neutral-bright);
  background-color: var(--neutral-bright);
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.btn-line-circle-icon .circle em {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background: var(--t-bright);
  -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
  -moz-transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.btn-line-circle-icon .circle i {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-size: 2.3rem;
  color: var(--t-opp-bright);
  z-index: 2;
  overflow: hidden;
  -webkit-transition: color 0.3s 0s;
  -moz-transition: color 0.3s 0s;
  transition: color 0.3s 0s;
}

.btn-line-circle-icon:hover {
  color: var(--t-medium);
}

.btn-line-circle-icon.permanent-dark {
  color: var(--t-per-bright-dark);
}

.btn-line-circle-icon.permanent-dark .circle {
  border: 1px solid var(--t-per-bright-dark);
  background-color: var(--t-per-bright-dark);
}

.btn-line-circle-icon.permanent-dark em {
  background: var(--t-per-bright-dark);
}

.btn-line-circle-icon.permanent-dark i {
  color: var(--t-per-bright-light);
}

@media only screen and (min-width: 1200px) {
  .btn-line-circle-icon {
    font-size: 2rem;
  }

  .btn-line-circle-icon .circle {
    border: 1px solid var(--stroke-controls);
    background-color: transparent;
  }

  .btn-line-circle-icon .circle i {
    font-size: 2.5rem;
    color: var(--t-bright);
  }
}

@media only screen and (min-width: 1400px) {
  .btn-line-circle-icon {
    font-size: 2.2rem;
  }

  .btn-line-circle-icon .circle i {
    font-size: 2.7rem;
  }
}

@media only screen and (min-width: 1600px) {
  .btn-line-circle-icon {
    font-size: 2.6rem;
  }

  .btn-line-circle-icon .circle i {
    font-size: 3.2rem;
  }
}

.btn-to-top {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  width: 4rem;
  height: 4rem;
  -moz-border-radius: var(--_radius-s);
  border-radius: var(--_radius-s);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--t-bright);
  font-size: 1.8rem;
  z-index: 9;
  overflow: hidden;
}

[color-scheme="light"] .btn-to-top {
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

[color-scheme="dark"] .btn-to-top {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-to-top i {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

/* Ensure to-top button matches mobile menu button size */
@media only screen and (max-width: 1199px) {
  .btn-to-top {
    width: 4.0rem;
    height: 4.0rem;
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 768px) {
  .btn-to-top {
    position: fixed;
    right: 5rem;
    bottom: 3rem;

  }
}

@media only screen and (min-width: 1200px) {
  .btn-to-top {
    font-size: 1.9rem;
  }

  .no-touch .btn-to-top:hover {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}

@media only screen and (min-width: 1400px) {
  .btn-to-top {
    width: 5rem;
    height: 5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .btn-to-top {
    font-size: 2.2rem;
  }
}

.slide-right:hover i::before {
  -webkit-animation: 0.4s ease-in-out 0s 1 both slideRight;
  -moz-animation: 0.4s ease-in-out 0s 1 both slideRight;
  animation: 0.4s ease-in-out 0s 1 both slideRight;
}

.slide-right-up:hover i::before {
  -webkit-animation: 0.4s ease-in-out 0s 1 both slideRightUp;
  -moz-animation: 0.4s ease-in-out 0s 1 both slideRightUp;
  animation: 0.4s ease-in-out 0s 1 both slideRightUp;
}

.slide-right-down:hover i::before {
  -webkit-animation: 0.4s ease-in-out 0s 1 both slideRightDown;
  -moz-animation: 0.4s ease-in-out 0s 1 both slideRightDown;
  animation: 0.4s ease-in-out 0s 1 both slideRightDown;
}

.slide-left:hover i::before {
  -webkit-animation: 0.4s ease-in-out 0s 1 both slideLeft;
  -moz-animation: 0.4s ease-in-out 0s 1 both slideLeft;
  animation: 0.4s ease-in-out 0s 1 both slideLeft;
}

.slide-left-up:hover i::before {
  -webkit-animation: 0.4s ease-in-out 0s 1 both slideLeftUp;
  -moz-animation: 0.4s ease-in-out 0s 1 both slideLeftUp;
  animation: 0.4s ease-in-out 0s 1 both slideLeftUp;
}

.slide-left-down:hover i::before {
  -webkit-animation: 0.4s ease-in-out 0s 1 both slideLeftDown;
  -moz-animation: 0.4s ease-in-out 0s 1 both slideLeftDown;
  animation: 0.4s ease-in-out 0s 1 both slideLeftDown;
}

.slide-down:hover i::before {
  -webkit-animation: 0.4s ease-in-out 0s 1 both slideDown;
  -moz-animation: 0.4s ease-in-out 0s 1 both slideDown;
  animation: 0.4s ease-in-out 0s 1 both slideDown;
}

.slide-up:hover i::before {
  -webkit-animation: 0.4s ease-in-out 0s 1 both slideUp;
  -moz-animation: 0.4s ease-in-out 0s 1 both slideUp;
  animation: 0.4s ease-in-out 0s 1 both slideUp;
}

@-webkit-keyframes slideRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-moz-keyframes slideRight {
  0% {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -moz-transform: translateX(100%);
    transform: translateX(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideRight {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    transform: translateX(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes slideRightUp {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -webkit-transform: translateX(100%) translateY(-100%);
    transform: translateX(100%) translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(-100%) translateY(100%);
    transform: translateX(-100%) translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-moz-keyframes slideRightUp {
  0% {
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -moz-transform: translateX(100%) translateY(-100%);
    transform: translateX(100%) translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -moz-transform: translateX(-100%) translateY(100%);
    transform: translateX(-100%) translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes slideRightUp {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -webkit-transform: translateX(100%) translateY(-100%);
    -moz-transform: translateX(100%) translateY(-100%);
    transform: translateX(100%) translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(-100%) translateY(100%);
    -moz-transform: translateX(-100%) translateY(100%);
    transform: translateX(-100%) translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes slideRightDown {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -webkit-transform: translateX(100%) translateY(100%);
    transform: translateX(100%) translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-moz-keyframes slideRightDown {
  0% {
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -moz-transform: translateX(100%) translateY(100%);
    transform: translateX(100%) translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -moz-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes slideRightDown {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -webkit-transform: translateX(100%) translateY(100%);
    -moz-transform: translateX(100%) translateY(100%);
    transform: translateX(100%) translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(-100%) translateY(-100%);
    -moz-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-moz-keyframes slideLeft {
  0% {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -moz-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideLeft {
  0% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    transform: translateX(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    transform: translateX(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes slideLeftUp {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -webkit-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(100%) translateY(100%);
    transform: translateX(100%) translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-moz-keyframes slideLeftUp {
  0% {
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -moz-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -moz-transform: translateX(100%) translateY(100%);
    transform: translateX(100%) translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes slideLeftUp {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -webkit-transform: translateX(-100%) translateY(-100%);
    -moz-transform: translateX(-100%) translateY(-100%);
    transform: translateX(-100%) translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(100%) translateY(100%);
    -moz-transform: translateX(100%) translateY(100%);
    transform: translateX(100%) translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes slideLeftDown {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -webkit-transform: translateX(-100%) translateY(100%);
    transform: translateX(-100%) translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(100%) translateY(-100%);
    transform: translateX(100%) translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-moz-keyframes slideLeftDown {
  0% {
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -moz-transform: translateX(-100%) translateY(100%);
    transform: translateX(-100%) translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -moz-transform: translateX(100%) translateY(-100%);
    transform: translateX(100%) translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@keyframes slideLeftDown {
  0% {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }

  50% {
    -webkit-transform: translateX(-100%) translateY(100%);
    -moz-transform: translateX(-100%) translateY(100%);
    transform: translateX(-100%) translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateX(100%) translateY(-100%);
    -moz-transform: translateX(100%) translateY(-100%);
    transform: translateX(100%) translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0) translateY(0);
    -moz-transform: translateX(0) translateY(0);
    transform: translateX(0) translateY(0);
  }
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-moz-keyframes slideDown {
  0% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -moz-transform: translateY(100%);
    transform: translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideDown {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
}

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@-moz-keyframes slideUp {
  0% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -moz-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideUp {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    transform: translateY(-100%);
  }

  51% {
    opacity: 0;
  }

  52% {
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
  }

  53% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
}

/* ------------------------------------------------*/
/* Elements - Controls End */
/* ------------------------------------------------*/



/* ------------------------------------------------*/
/* Elements - Forms Start */
/* ------------------------------------------------*/
.form-container {
  position: relative;
}

.form {
  opacity: 1;
  -webkit-transition: opacity var(--_animspeed-slow) ease-in-out;
  -moz-transition: opacity var(--_animspeed-slow) ease-in-out;
  transition: opacity var(--_animspeed-slow) ease-in-out;
}

.form.is-hidden {
  opacity: 0;
}

.form__item {
  padding: 0 1rem;
  margin-bottom: 3rem;
}

.form__item:last-of-type {
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .form__item {
    padding: 0 1.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .form__item {
    padding: 0 2.5rem;
    margin-bottom: 5rem;
  }
}

form {
  position: relative;
  width: 100%;
}

form input,
form textarea {
  position: relative;
  display: block;
  width: 100%;
  border: none;
  outline: none;
  margin: 0;
  padding: 1.6rem 0.4rem 1.6rem 0.4rem;
  background-color: transparent;
  border-bottom: 1px solid var(--stroke-elements);
  font: normal 400 1.8rem var(--_font-default);
  color: var(--t-bright);
}

form input:focus,
form textarea:focus {
  border-bottom: 1px solid var(--stroke-controls);
}

form textarea {
  height: 16rem;
  resize: none;
}

form ::-webkit-input-placeholder {
  color: var(--t-muted);
}

form :-moz-placeholder {
  color: var(--t-muted);
}

form ::-moz-placeholder {
  color: var(--t-muted);
}

form :-ms-input-placeholder {
  color: var(--t-muted);
}

form input:focus:required:invalid,
form textarea:focus:required:invalid {
  color: var(--t-bright);
}

form input:required:valid,
form textarea:required:valid {
  color: var(--t-bright);
}

.form__error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 1.4rem;
  margin-top: 0.5rem;
  min-height: 1.8rem;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  font-family: var(--_font-default);
  line-height: 1.4;
}

.form__error.show {
  opacity: 1;
}

.form__error-icon {
  display: inline-block;
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--t-bright);
}

.form__error-text {
  display: inline-block;
  color: var(--t-bright);
  flex: 1;
  white-space: nowrap;
}

.form__word-count {
  display: block;
  font-size: 1.3rem;
  margin-top: 0.4rem;
  color: #8F93A1;
  font-family: var(--_font-default);
  transition: color 0.2s ease;
}

.form__word-count.at-limit {
  color: #b8860b;
}

.form__word-count.over-limit {
  color: var(--t-bright, #c0392b);
  font-weight: 500;
}

.form__item--country-code .form__error {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.form__item--country-code .form__error-text {
  white-space: nowrap;
}

@media only screen and (min-width: 768px) {
  .form__error {
    font-size: 1.6rem;
  }

  .form__error-icon {
    font-size: 1.8rem;
  }
}

.form__item--country-code {
  flex: 0 0 auto;
  max-width: 96px;
  padding-right: 0.5rem;
}

.form__item--country-code+.form__item {
  padding-left: 0.5rem;
}

.form__item--phone {
  flex: 1;
}

@media only screen and (min-width: 768px) {
  .form__item--country-code {
    max-width: 112px;
    padding-right: 0.75rem;
  }

  .form__item--country-code+.form__item {
    padding-left: 0.75rem;
  }
}

@media only screen and (min-width: 768px) {

  form input,
  form textarea {
    font-size: 2rem;
  }

  form textarea {
    height: 20rem;
  }
}

@media only screen and (min-width: 1400px) {

  form input,
  form textarea {
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 1600px) {

  form input,
  form textarea {
    font-size: 2.6rem;
  }
}

.form__reply {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity var(--_animspeed-slow) ease-in-out;
  -moz-transition: opacity var(--_animspeed-slow) ease-in-out;
  transition: opacity var(--_animspeed-slow) ease-in-out;
}

.form__reply.centered {
  position: absolute;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  max-width: 300px;
}

.form__reply.is-visible {
  opacity: 1;
}

.reply__icon {
  display: block;
  font-size: 6rem;
  color: var(--t-bright);
  margin-bottom: 1rem;
}

.reply__title {
  font: normal var(--font-weight-base) 2.6rem var(--_font-accent);
  color: var(--t-bright);
  margin-bottom: 1rem;
}

.reply__text {
  display: block;
  font: normal var(--font-weight-base) 1.8rem var(--_font-default);
  color: var(--t-bright);
}

/* ------------------------------------------------*/
/* Elements - Forms End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Sections Main Start */
/* ------------------------------------------------*/
.main {
  position: relative;
  padding-top: 6rem;
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .main {
    padding-top: 7rem;
  }
}

@media only screen and (min-width: 1200px) {
  .main {
    padding-top: 0;
  }
}

.main__intro {
  position: relative;
  height: auto;
  margin-bottom: 3.4rem;
}

.main__intro.intro-95-desktop {
  margin-bottom: 11.5rem;
}

.main__intro.intro-fullheight-centered {
  margin-bottom: 12rem;
}

@media only screen and (min-width: 768px) {
  .main__intro {
    margin-bottom: 4.4rem;
  }

  .main__intro.intro-95-desktop {
    margin-bottom: 14.5rem;
  }

  .main__intro.intro-fullheight-centered {
    margin-bottom: 14.3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .main__intro {
    height: 100vh;
    margin-bottom: 0;
  }

  .main__intro.intro-95-desktop {
    height: 95vh;
    margin-bottom: 0;
    padding-top: 7rem;
  }

  .main__intro.intro-fullheight-centered {
    margin-bottom: 0;
    padding-top: 7rem;
  }
}

@media only screen and (min-width: 1400px) {

  .main__intro.intro-95-desktop,
  .main__intro.intro-fullheight-centered {
    padding-top: 8rem;
  }
}

.intro__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.intro__background.intro-bg-01 img,
.intro__background.intro-bg-02 img {
  display: block;
  width: 100%;
  height: auto;
}

.intro-bg__shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(78%, rgba(var(--base-rgb), 0)), color-stop(97%, rgba(var(--base-rgb), 1)));
  background: -moz-linear-gradient(top, rgba(var(--base-rgb), 0) 78%, rgba(var(--base-rgb), 1) 97%);
  background: linear-gradient(to bottom, rgba(var(--base-rgb), 0) 78%, rgba(var(--base-rgb), 1) 97%);
}

.intro-bg-01__01,
.intro-bg-01__02,
.intro-bg-02__01,
.intro-bg-02__02,
.intro-bg-03__01,
.intro-bg-03__02 {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  background-size: cover;
}

.intro-bg-01__01 {
  top: -160px;
  right: -100px;
  width: 320px;
  height: 320px;
}

@media only screen and (min-width: 768px) {
  .intro-bg-01__01 {
    top: -320px;
    right: -20px;
    width: 500px;
    height: 500px;
  }
}

@media only screen and (min-width: 992px) {
  .intro-bg-01__01 {
    top: -280px;
  }
}

@media only screen and (min-width: 1200px) {
  .intro-bg-01__01 {
    top: -160px;
    right: -80px;
    width: 660px;
    height: 660px;
  }
}

@media only screen and (min-width: 1400px) {
  .intro-bg-01__01 {
    top: -200px;
    right: 0;
    width: 770px;
    height: 770px;
  }
}

@media only screen and (min-width: 1600px) {
  .intro-bg-01__01 {
    top: -300px;
    right: 0;
    width: 860px;
    height: 860px;
  }
}

.intro-bg-01__02 {
  bottom: -80px;
  left: auto;
  right: 0;
  width: 150px;
  height: 150px;
}

@media only screen and (min-width: 768px) {
  .intro-bg-01__02 {
    bottom: -120px;
    left: auto;
    right: 0;
    width: 240px;
    height: 240px;
  }
}

@media only screen and (min-width: 1200px) {
  .intro-bg-01__02 {
    bottom: -40px;
    left: -96px;
    width: 300px;
    height: 300px;
  }
}

@media only screen and (min-width: 1400px) {
  .intro-bg-01__02 {
    bottom: -10px;
    left: -86px;
    width: 360px;
    height: 360px;
  }
}

@media only screen and (min-width: 1600px) {
  .intro-bg-01__02 {
    bottom: -60px;
    left: -175px;
    width: 500px;
    height: 500px;
  }
}

.intro-bg-02__01 {
  top: auto;
  bottom: -60px;
  right: 0;
  width: 160px;
  height: auto;
}

@media only screen and (min-width: 768px) {
  .intro-bg-02__01 {
    top: auto;
    bottom: -100px;
    right: 0;
    width: 260px;
    height: auto;
  }
}

@media only screen and (min-width: 992px) {
  .intro-bg-02__01 {
    top: auto;
    bottom: -80px;
    right: 0;
    width: 340px;
    height: auto;
  }
}

@media only screen and (min-width: 1200px) {
  .intro-bg-02__01 {
    top: auto;
    bottom: 80px;
    right: 0;
    width: 330px;
    height: auto;
  }
}

@media only screen and (min-width: 1400px) {
  .intro-bg-02__01 {
    top: auto;
    bottom: 100px;
    right: 0;
    width: 350px;
    height: auto;
  }
}

@media only screen and (min-width: 1600px) {
  .intro-bg-02__01 {
    top: auto;
    bottom: 60px;
    right: 0;
    width: 530px;
    height: auto;
  }
}

.intro-bg-02__02 {
  bottom: -160px;
  top: auto;
  left: -30px;
  width: 100px;
  height: auto;
}

@media only screen and (min-width: 768px) {
  .intro-bg-02__02 {
    bottom: -200px;
    top: auto;
    left: -42px;
    width: 140px;
    height: auto;
  }
}

@media only screen and (min-width: 992px) {
  .intro-bg-02__02 {
    bottom: -200px;
    top: auto;
    left: -30px;
    width: 140px;
    height: auto;
  }
}

@media only screen and (min-width: 1200px) {
  .intro-bg-02__02 {
    bottom: auto;
    top: 150px;
    left: -68px;
    width: 200px;
    height: auto;
  }
}

@media only screen and (min-width: 1400px) {
  .intro-bg-02__02 {
    bottom: auto;
    top: 210px;
    left: -82px;
    width: 240px;
    height: auto;
  }
}

@media only screen and (min-width: 1600px) {
  .intro-bg-02__02 {
    top: 150px;
    bottom: auto;
    left: -120px;
    width: 350px;
    height: auto;
  }
}

.intro-bg-03__01 {
  height: 440px;
  width: auto;
  bottom: -300px;
  right: -40px;
}

.intro-bg-03__01 img {
  display: block;
  height: 100%;
  width: auto;
}

@media only screen and (min-width: 768px) {
  .intro-bg-03__01 {
    height: 910px;
    width: auto;
    bottom: -150px;
    right: -80px;
  }
}

@media only screen and (min-width: 992px) {
  .intro-bg-03__01 {
    height: 910px;
    width: auto;
    bottom: -150px;
    right: -60px;
  }
}

@media only screen and (min-width: 1200px) {
  .intro-bg-03__01 {
    height: 110vh;
    width: auto;
    top: -10vh;
    right: -60px;
  }
}

@media only screen and (min-width: 1400px) {
  .intro-bg-03__01 {
    height: 110vh;
    width: auto;
    top: -10vh;
    right: -60px;
  }
}

@media only screen and (min-width: 1600px) {
  .intro-bg-03__01 {
    height: 126vh;
    width: auto;
    top: -16vh;
    right: -80px;
  }
}

.intro-bg-03__02 {
  height: 180px;
  width: auto;
  bottom: -220px;
  left: 40px;
}

.intro-bg-03__02 img {
  display: block;
  height: 100%;
  width: auto;
}

@media only screen and (min-width: 768px) {
  .intro-bg-03__02 {
    height: 350px;
    width: auto;
    bottom: -340px;
    left: 80px;
  }
}

@media only screen and (min-width: 992px) {
  .intro-bg-03__02 {
    height: 400px;
    width: auto;
    bottom: -340px;
    left: 150px;
  }
}

@media only screen and (min-width: 1200px) {
  .intro-bg-03__02 {
    height: 420px;
    width: auto;
    bottom: -210px;
    left: auto;
    right: 220px;
  }
}

@media only screen and (min-width: 1400px) {
  .intro-bg-03__02 {
    height: 450px;
    width: auto;
    bottom: -245px;
    right: 220px;
  }
}

@media only screen and (min-width: 1600px) {
  .intro-bg-03__02 {
    height: 540px;
    width: auto;
    bottom: -265px;
    right: 320px;
  }
}

.headline {
  position: relative;
  padding: 0 2rem;
  margin-top: 11.2rem;
}

.headline.headline-95-desktop,
.headline.headline-centered {
  margin-top: 9.5rem;
}

@media only screen and (min-width: 768px) {
  .headline {
    padding: 0 5rem;
    margin-top: 14.2rem;
  }

  .headline.headline-95-desktop,
  .headline.headline-centered {
    margin-top: 10.9rem;
  }
}

@media only screen and (min-width: 1200px) {
  .headline {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-top: 0;
  }

  .headline.headline-95-desktop {
    position: absolute;
    bottom: 0;
    left: 0;
    padding-bottom: 9rem;
  }

  .headline.headline-centered {
    bottom: auto;
    left: auto;
    top: 50%;
    bottom: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100%;
    margin-top: 0;
  }
}

@media only screen and (min-width: 1400px) {
  .headline.headline-95-desktop {
    padding-bottom: 9.9rem;
  }
}

@media only screen and (min-width: 1600px) {
  .headline.headline-95-desktop {
    padding-bottom: 11.3rem;
  }
}

@media only screen and (min-width: 768px) {
  .headline__title.fullwidth {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
  }
}

.title__line {
  position: relative;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.title__line em {
  font: normal var(--font-weight-base) 1.8rem/1.4 var(--_font-default);
  color: var(--t-bright);
}

.title__line em,
.title__line .btn {
  display: none;
}

@media only screen and (min-width: 768px) {
  .title__line span {
    white-space: nowrap;
  }

  .title__line .btn {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin-left: 3rem;
    margin-top: 0.5rem;
  }
}

@media only screen and (min-width: 992px) {
  .title__line {
    padding: 0 3rem;
  }

  .title__line .btn {
    margin-left: 4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .title__line em {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    max-width: 260px;
    margin-right: 5rem;
    padding-top: 3.7rem;
    font-size: 1.8rem;
  }

  .title__line .btn {
    margin-left: 5rem;
  }
}

@media only screen and (min-width: 1400px) {
  .title__line em {
    max-width: 300px;
    padding-top: 4.3rem;
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .title__line {
    padding: 0 5rem;
  }

  .title__line em {
    max-width: 370px;
    padding-top: 6rem;
    font-size: 2.4rem;
  }
}

.headline__datamobile {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  text-align: left;
  margin-top: 4.5rem;
}

.headline__datamobile p {
  font: normal var(--font-weight-base) 1.8rem/1.4 var(--_font-default);
  color: var(--t-bright);
  margin-bottom: 6rem;
}

@media only screen and (min-width: 768px) {
  .headline__datamobile {
    margin-top: 5.4rem;
    padding: 0 3rem;
    text-align: center;
  }

  .headline__datamobile p {
    max-width: 370px;
    margin: 0 auto;
    font-size: 2rem;
  }

  .headline__datamobile .btn {
    display: none;
  }
}

@media only screen and (min-width: 992px) {
  .headline__datamobile {
    margin-top: 6.1rem;
  }
}

@media only screen and (min-width: 1200px) {
  .headline__datamobile {
    display: none;
  }
}

.headline__btn {
  margin-top: 9.7rem;
}

@media only screen and (min-width: 768px) {
  .headline__btn {
    margin-top: 11.9rem;
  }
}

@media only screen and (min-width: 1200px) {
  .headline__btn {
    margin-top: 5.9rem;
    margin-bottom: 4.4rem;
  }
}

@media only screen and (min-width: 1400px) {
  .headline__btn {
    margin-top: 11rem;
  }
}

@media only screen and (min-width: 1600px) {
  .headline__btn {
    margin-top: 10.1rem;
  }
}

.intro__btn {
  position: relative;
  padding: 0 2rem;
}

@media only screen and (min-width: 768px) {
  .intro__btn {
    padding: 0 5rem;
  }
}

.intro__btn-absolute {
  display: none;
}

@media only screen and (min-width: 1200px) {
  .intro__btn-absolute {
    display: block;
    position: absolute;
    right: 5rem;
    bottom: 4.4rem;
  }
}

.main__media {
  position: relative;
}

.main__media.media-grid-bottom {
  padding-bottom: 2.5rem;
}

.main__media.media-stack-bottom {
  padding-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .main__media.media-grid-bottom {
    padding-bottom: 3.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .main__media.media-grid-bottom {
    padding-bottom: 3.7rem;
  }
}

@media only screen and (min-width: 1400px) {
  .main__media.media-grid-bottom {
    padding-bottom: 4.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .main__media.media-grid-bottom {
    padding-bottom: 5.5rem;
  }
}

/* ------------------------------------------------*/
/* Sections Main End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Sections Inner Start */
/* ------------------------------------------------*/
.inner {
  position: relative;
}

.inner.inner-grid-bottom {
  padding: 11rem 0 2.5rem 0;
}

.inner.inner-stack {
  padding: 2.2rem 0 0.5rem 0;
}

.inner.inner-stack-bottom {
  padding: 11rem 0 0.5rem 0;
}

.inner.inner-type-bottom {
  padding: 11rem 0 2.2rem 0;
}

.inner.no-padding-top {
  padding-top: 0 !important;
}

.inner.no-padding-bottom {
  padding-bottom: 0 !important;
}

.inner.pre-no-padding-top {
  padding: 11rem 0 4.7rem 0;
}

@media only screen and (min-width: 768px) {
  .inner.inner-grid-bottom {
    padding: 16rem 0 3.5rem 0;
  }

  .inner.inner-stack {
    padding: 5.3rem 0 0.5rem 0;
  }

  .inner.inner-stack-bottom {
    padding: 16rem 0 0.5rem 0;
  }

  .inner.inner-type-bottom {
    padding: 16rem 0 2.9rem 0;
  }

  .inner.pre-no-padding-top {
    padding: 16rem 0 8.8rem 0;
  }
}

@media only screen and (min-width: 1200px) {
  .inner.inner-grid-bottom {
    padding: 16rem 0 3.7rem 0;
  }

  .inner.inner-stack {
    padding: 8.3rem 0 0.7rem 0;
  }

  .inner.inner-stack-bottom {
    padding: 16rem 0 0.7rem 0;
  }

  .inner.inner-type-bottom {
    padding: 16rem 0 3.1rem 0;
  }

  .inner.pre-no-padding-top {
    padding: 16rem 0 12rem 0;
  }
}

@media only screen and (min-width: 1400px) {
  .inner.inner-grid-bottom {
    padding: 18rem 0 4.5rem 0;
  }

  .inner.inner-stack {
    padding: 9.5rem 0 1.5rem 0;
  }

  .inner.inner-stack-bottom {
    padding: 18rem 0 1.5rem 0;
  }

  .inner.inner-type-bottom {
    padding: 18rem 0 3.9rem 0;
  }

  .inner.pre-no-padding-top {
    padding: 18rem 0 14rem 0;
  }
}

@media only screen and (min-width: 1600px) {
  .inner.inner-grid-bottom {
    padding: 21rem 0 5.5rem 0;
  }

  .inner.inner-stack {
    padding: 13.5rem 0 0.5rem 0;
  }

  .inner.inner-stack-bottom {
    padding: 21rem 0 0.5rem 0;
  }

  .inner.inner-type-bottom {
    padding: 21rem 0 4.8rem 0;
  }

  .inner.pre-no-padding-top {
    padding: 21rem 0 19rem 0;
  }
}

.inner__wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.inner__name {
  margin-bottom: 0.4rem;
}

@media only screen and (min-width: 768px) {
  .inner__name {
    margin-bottom: 1.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .inner__name {
    margin-bottom: 0;
    margin-top: 1.6rem;
  }
}

@media only screen and (min-width: 1400px) {
  .inner__name {
    margin-top: 1.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .inner__name {
    margin-top: 2.6rem;
  }
}

.inner__content {
  position: relative;
  width: 100%;
}

.bottom__background {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.bottom__background.bottom-bg-01 img,
.bottom__background.bottom-bg-02 img,
.bottom__background.bottom-bg-03 img {
  display: block;
  width: 100%;
  height: auto;
}

.bottom-bg__shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(78%, rgba(var(--base-rgb), 0)), color-stop(97%, rgba(var(--base-rgb), 1)));
  background: -moz-linear-gradient(top, rgba(var(--base-rgb), 0) 78%, rgba(var(--base-rgb), 1) 97%);
  background: linear-gradient(to bottom, rgba(var(--base-rgb), 0) 78%, rgba(var(--base-rgb), 1) 97%);
}

.bottom-bg-01__01,
.bottom-bg-01__02,
.bottom-bg-02__01,
.bottom-bg-02__02,
.bottom-bg-03__01,
.bottom-bg-03__02 {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  background-size: cover;
}

.bottom-bg-01__01 {
  bottom: 100px;
  right: -50px;
  width: 200px;
  height: auto;
}

@media only screen and (min-width: 768px) {
  .bottom-bg-01__01 {
    bottom: 130px;
    right: -50px;
    width: 200px;
    height: auto;
  }
}

@media only screen and (min-width: 992px) {
  .bottom-bg-01__01 {
    bottom: 120px;
    right: -75px;
    width: 260px;
    height: auto;
  }
}

@media only screen and (min-width: 1200px) {
  .bottom-bg-01__01 {
    bottom: 65px;
    right: -105px;
    width: 360px;
    height: auto;
  }
}

@media only screen and (min-width: 1400px) {
  .bottom-bg-01__01 {
    bottom: 70px;
    right: -120px;
    width: 400px;
    height: auto;
  }
}

@media only screen and (min-width: 1600px) {
  .bottom-bg-01__01 {
    bottom: 80px;
    right: -150px;
    width: 510px;
    height: auto;
  }
}

.bottom-bg-01__02 {
  bottom: 140px;
  left: -30px;
  width: 100px;
  height: auto;
}

@media only screen and (min-width: 768px) {
  .bottom-bg-01__02 {
    bottom: 200px;
    left: -50px;
    width: 150px;
    height: auto;
  }
}

@media only screen and (min-width: 992px) {
  .bottom-bg-01__02 {
    bottom: 200px;
    left: -60px;
    width: 170px;
    height: auto;
  }
}

@media only screen and (min-width: 1200px) {
  .bottom-bg-01__02 {
    bottom: 200px;
    left: -65px;
    width: 240px;
    height: auto;
  }
}

@media only screen and (min-width: 1400px) {
  .bottom-bg-01__02 {
    bottom: 200px;
    left: -80px;
    width: 280px;
    height: auto;
  }
}

@media only screen and (min-width: 1600px) {
  .bottom-bg-01__02 {
    bottom: 260px;
    left: -100px;
    width: 350px;
    height: auto;
  }
}

.bottom-bg-02__01 {
  bottom: -30px;
  right: -30px;
  width: 200px;
  height: auto;
}

@media only screen and (min-width: 768px) {
  .bottom-bg-02__01 {
    bottom: -40px;
    right: -60px;
  }
}

@media only screen and (min-width: 992px) {
  .bottom-bg-02__01 {
    bottom: -50px;
    right: -70px;
    width: 230px;
  }
}

@media only screen and (min-width: 1200px) {
  .bottom-bg-02__01 {
    width: 300px;
  }
}

@media only screen and (min-width: 1400px) {
  .bottom-bg-02__01 {
    bottom: -60px;
    right: -80px;
    width: 340px;
  }
}

@media only screen and (min-width: 1600px) {
  .bottom-bg-02__01 {
    width: 360px;
  }
}

.bottom-bg-02__02 {
  display: none;
}

@media only screen and (min-width: 768px) {
  .bottom-bg-02__02 {
    display: block;
    top: 50px;
    left: -35px;
    width: 140px;
    height: auto;
  }
}

@media only screen and (min-width: 992px) {
  .bottom-bg-02__02 {
    top: 50px;
    left: -35px;
    width: 140px;
  }
}

@media only screen and (min-width: 1200px) {
  .bottom-bg-02__02 {
    top: 50px;
    left: -60px;
    width: 240px;
  }
}

@media only screen and (min-width: 1400px) {
  .bottom-bg-02__02 {
    top: 60px;
    left: -70px;
    width: 280px;
  }
}

@media only screen and (min-width: 1600px) {
  .bottom-bg-02__02 {
    top: 60px;
    left: -75px;
    width: 300px;
  }
}

.bottom-bg-03__01 {
  bottom: 100px;
  right: -30px;
  width: 180px;
  height: auto;
}

@media only screen and (min-width: 768px) {
  .bottom-bg-03__01 {
    bottom: 180px;
    right: -30px;
    width: 180px;
  }
}

@media only screen and (min-width: 992px) {
  .bottom-bg-03__01 {
    bottom: 150px;
    right: -30px;
    width: 180px;
  }
}

@media only screen and (min-width: 1200px) {
  .bottom-bg-03__01 {
    bottom: 170px;
    right: -70px;
    width: 280px;
  }
}

@media only screen and (min-width: 1400px) {
  .bottom-bg-03__01 {
    bottom: 170px;
    right: -80px;
    width: 320px;
  }
}

@media only screen and (min-width: 1600px) {
  .bottom-bg-03__01 {
    bottom: 200px;
    right: -80px;
    width: 360px;
  }
}

.bottom-bg-03__02 {
  display: none;
}

@media only screen and (min-width: 768px) {
  .bottom-bg-03__02 {
    display: block;
    top: auto;
    bottom: -30px;
    left: -100px;
    width: 240px;
  }
}

@media only screen and (min-width: 992px) {
  .bottom-bg-03__02 {
    top: auto;
    bottom: -30px;
    left: -100px;
    width: 240px;
  }
}

@media only screen and (min-width: 1200px) {
  .bottom-bg-03__02 {
    top: auto;
    bottom: -50px;
    left: -150px;
    width: 360px;
  }
}

@media only screen and (min-width: 1400px) {
  .bottom-bg-03__02 {
    top: auto;
    bottom: -60px;
    left: -170px;
    width: 400px;
  }
}

@media only screen and (min-width: 1600px) {
  .bottom-bg-03__02 {
    top: auto;
    bottom: -70px;
    left: -180px;
    width: 440px;
  }
}

/* ------------------------------------------------*/
/* Sections Inner End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Blocks Common Start */
/* ------------------------------------------------*/
.page-content {
  position: relative;
  width: 100%;
  min-width: 360px;
  height: auto;
  z-index: 3;
}

.fullheight-desktop {
  position: relative;
  height: auto;
}

@media only screen and (min-width: 1200px) {
  .fullheight-desktop {
    height: 100%;
  }
}

.grid-item {
  padding: 0 1rem;
  margin-top: 2rem;
}

@media only screen and (min-width: 768px) {
  .grid-item {
    padding: 0 1.5rem;
    margin-top: 3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .grid-item {
    padding: 0 2.5rem;
    margin-top: 5rem;
  }
}

.grid-item-s {
  padding: 0 1rem;
  margin-top: 2rem;
}

.content__block {
  position: relative;
  padding: 0 2rem;
}

.content__block.no-padding {
  padding: 0;
}

.content__block.name-block {
  padding: 0 2rem;
}

.content__block.grid-block {
  padding: 0 1rem;
}

@media only screen and (min-width: 768px) {
  .content__block {
    padding: 0 5rem;
  }

  .content__block.name-block {
    padding: 0 5rem;
  }

  .content__block.grid-block {
    padding: 0 3.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .content__block.name-block {
    padding: 0 0 0 5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .content__block.grid-block {
    padding: 0 2.5rem;
  }
}

.content__block.section-title {
  margin-bottom: 4rem;
}

.content__block.section-grid-title {
  margin-bottom: 3.6rem;
}

.content__block.section-grid-text-title {
  margin-bottom: 4rem;
}

.content__block.section-stack-title {
  margin-bottom: 0;
}

.content__block.section-tagline-title {
  margin-bottom: 4.8rem;
}

.content__block.section-form-title {
  margin-bottom: 3.5rem;
}

.content__block.large-text-block {
  margin: 10.3rem 0 10.8rem 0;
}

.content__block.large-text-block.pre-stack {
  margin-bottom: 2.8rem;
}

.content__block.pre-grid-items {
  margin-bottom: 4.8rem;
}

.content__block.pre-text-items {
  margin-bottom: 6rem;
}

.content__block.pre-offcanvas-text-block {
  margin-bottom: 12.7rem;
}

.content__block.pre-offcanvas-grid-block {
  margin-bottom: 14rem;
}

.content__block.pre-stack-block {
  position: relative;
  z-index: 1000;
  margin-bottom: -2.4rem;
}

.content__block.pre-stack-text-block {
  position: relative;
  z-index: 1000;
  margin-bottom: -2rem;
}

@media only screen and (min-width: 768px) {
  .content__block.section-text-title {
    margin-bottom: 2.7rem;
  }

  .content__block.section-grid-title {
    margin-bottom: 3.8rem;
  }

  .content__block.section-grid-text-title {
    margin-bottom: 4.9rem;
  }

  .content__block.section-stack-title {
    margin-bottom: 0;
  }

  .content__block.section-tagline-title {
    margin-bottom: 6rem;
  }

  .content__block.section-form-title {
    margin-bottom: 5.4rem;
  }

  .content__block.large-text-block {
    margin: 12.6rem 0 13.4rem 0;
  }

  .content__block.large-text-block.pre-stack {
    margin-bottom: 3.4rem;
  }

  .content__block.pre-grid-items {
    margin-bottom: 5.8rem;
  }

  .content__block.pre-text-items {
    margin-bottom: 8rem;
  }

  .content__block.pre-offcanvas-text-block {
    margin-bottom: 17.8rem;
  }

  .content__block.pre-offcanvas-grid-block {
    margin-bottom: 20rem;
  }

  .content__block.pre-stack-block {
    margin-bottom: -3.2rem;
  }

  .content__block.pre-stack-text-block {
    margin-bottom: -2.1rem;
  }
}

@media only screen and (min-width: 992px) {
  .content__block.section-text-title {
    margin-bottom: 3.4rem;
  }

  .content__block.section-grid-title {
    margin-bottom: 4.5rem;
  }

  .content__block.section-grid-text-title {
    margin-bottom: 5.6rem;
  }

  .content__block.section-stack-title {
    margin-bottom: 0;
  }

  .content__block.section-tagline-title {
    margin-bottom: 6.7rem;
  }

  .content__block.section-form-title {
    margin-bottom: 6.1rem;
  }

  .content__block.large-text-block.pre-stack {
    margin-bottom: 3.4rem;
  }

  .content__block.pre-grid-items {
    margin-bottom: 6.5rem;
  }

  .content__block.pre-text-items {
    margin-bottom: 8.7rem;
  }

  .content__block.pre-stack-block {
    margin-bottom: -2.5rem;
  }

  .content__block.pre-stack-text-block {
    margin-bottom: -1.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .content__block.section-text-title {
    margin-bottom: 3.9rem;
  }

  .content__block.section-grid-title {
    margin-bottom: 4.2rem;
  }

  .content__block.section-grid-text-title {
    margin-bottom: 5.6rem;
  }

  .content__block.section-stack-title {
    margin-bottom: 0;
  }

  .content__block.section-tagline-title {
    margin-bottom: 6.3rem;
  }

  .content__block.section-form-title {
    margin-bottom: 6.1rem;
  }

  .content__block.large-text-block {
    margin: 14.3rem 0 15.2rem 0;
  }

  .content__block.large-text-block.pre-stack {
    margin-bottom: 5.2rem;
  }

  .content__block.pre-grid-items {
    margin-bottom: 7.5rem;
  }

  .content__block.pre-text-items {
    margin-bottom: 8.6rem;
  }

  .content__block.pre-offcanvas-text-block {
    margin-bottom: 19.5rem;
  }

  .content__block.pre-offcanvas-grid-block {
    margin-bottom: 22rem;
  }

  .content__block.pre-stack-block {
    margin-bottom: -2.8rem;
  }

  .content__block.pre-stack-text-block {
    margin-bottom: -1.4rem;
  }
}

@media only screen and (min-width: 1400px) {
  .content__block.section-text-title {
    margin-bottom: 3.6rem;
  }

  .content__block.section-grid-title {
    margin-bottom: 5rem;
  }

  .content__block.section-grid-text-title {
    margin-bottom: 6.5rem;
  }

  .content__block.section-stack-title {
    margin-bottom: 0;
  }

  .content__block.section-tagline-title {
    margin-bottom: 7rem;
  }

  .content__block.section-form-title {
    margin-bottom: 6.8rem;
  }

  .content__block.large-text-block {
    margin: 17rem 0 17.9rem 0;
  }

  .content__block.large-text-block.pre-stack {
    margin-bottom: 7rem;
  }

  .content__block.pre-grid-items {
    margin-bottom: 7.5rem;
  }

  .content__block.pre-text-items {
    margin-bottom: 9.5rem;
  }

  .content__block.pre-offcanvas-text-block {
    margin-bottom: 22.2rem;
  }

  .content__block.pre-offcanvas-grid-block {
    margin-bottom: 25rem;
  }

  .content__block.pre-stack-block {
    margin-bottom: -3rem;
  }

  .content__block.pre-stack-text-block {
    margin-bottom: -1.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .content__block.section-text-title {
    margin-bottom: 1.9rem;
  }

  .content__block.section-grid-title {
    margin-bottom: 3.5rem;
  }

  .content__block.section-grid-text-title {
    margin-bottom: 5.8rem;
  }

  .content__block.section-stack-title {
    margin-bottom: 0;
  }

  .content__block.section-tagline-title {
    margin-bottom: 7.3rem;
  }

  .content__block.section-form-title {
    margin-bottom: 7.9rem;
  }

  .content__block.large-text-block {
    margin: 16.3rem 0 17.6rem 0;
  }

  .content__block.large-text-block.pre-stack {
    margin-bottom: 6.6rem;
  }

  .content__block.pre-grid-items {
    margin-bottom: 7rem;
  }

  .content__block.pre-text-items {
    margin-bottom: 10.8rem;
  }

  .content__block.pre-offcanvas-text-block {
    margin-bottom: 26.2rem;
  }

  .content__block.pre-offcanvas-grid-block {
    margin-bottom: 30rem;
  }

  .content__block.pre-stack-block {
    margin-bottom: -2.5rem;
  }

  .content__block.pre-stack-text-block {
    margin-bottom: -0.2rem;
  }
}

.block__subtitle.grid-block-subtitle {
  padding: 0 1rem;
}

@media only screen and (min-width: 768px) {
  .block__subtitle.grid-block-subtitle {
    padding: 0 1.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .block__subtitle.grid-block-subtitle {
    padding: 0 2.5rem;
  }
}

.block__subtitle {
  margin-bottom: 6.3rem;
}

.block__subtitle.grid-block-subtitle {
  margin-bottom: 4.3rem;
}

@media only screen and (min-width: 768px) {
  .block__subtitle {
    margin-bottom: 8.3rem;
  }

  .block__subtitle.grid-block-subtitle {
    margin-bottom: 5.3rem;
  }
}

@media only screen and (min-width: 992px) {
  .block__subtitle {
    margin-bottom: 9rem;
  }

  .block__subtitle.grid-block-subtitle {
    margin-bottom: 6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .block__subtitle {
    margin-bottom: 9rem;
  }

  .block__subtitle.grid-block-subtitle {
    margin-bottom: 6rem;
  }
}

@media only screen and (min-width: 1400px) {
  .block__subtitle {
    margin-bottom: 9.9rem;
  }

  .block__subtitle.grid-block-subtitle {
    margin-bottom: 6.9rem;
  }
}

@media only screen and (min-width: 1600px) {
  .block__subtitle {
    margin-bottom: 11.3rem;
  }

  .block__subtitle.grid-block-subtitle {
    margin-bottom: 6.3rem;
  }
}

.fullheight-l {
  height: auto;
}

@media only screen and (min-width: 992px) {
  .fullheight-l {
    height: 100%;
  }
}

.divider {
  position: relative;
  width: 100%;
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
  overflow: hidden;
}

.divider-image,
.divider-video {
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  background-size: cover;
  height: 440px;
}

@media only screen and (min-width: 768px) {

  .divider-image,
  .divider-video {
    height: 500px;
  }
}

@media only screen and (min-width: 1400px) {

  .divider-image,
  .divider-video {
    height: 600px;
  }
}

@media only screen and (min-width: 1600px) {

  .divider-image,
  .divider-video {
    height: 700px;
  }
}

.divider-image-xl,
.divider-video-xl {
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  background-size: cover;
  height: 440px;
}

@media only screen and (min-width: 768px) {

  .divider-image-xl,
  .divider-video-xl {
    height: 500px;
  }
}

@media only screen and (min-width: 1200px) {

  .divider-image-xl,
  .divider-video-xl {
    height: 600px;
  }
}

@media only screen and (min-width: 1400px) {

  .divider-image-xl,
  .divider-video-xl {
    height: 700px;
  }
}

@media only screen and (min-width: 1600px) {

  .divider-image-xl,
  .divider-video-xl {
    height: 800px;
  }
}

.section-title__name {
  margin-bottom: 0.4rem;
}

@media only screen and (min-width: 768px) {
  .section-title__name {
    margin-bottom: 1.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .section-title__name {
    margin-bottom: 0;
    margin-top: 1.6rem;
  }
}

@media only screen and (min-width: 1400px) {
  .section-title__name {
    margin-top: 1.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .section-title__name {
    margin-top: 2.6rem;
  }
}

/* ------------------------------------------------*/
/* Blocks Common End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Blocks Header Start */
/* ------------------------------------------------*/
.header {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  width: auto;
  z-index: 11;
  -moz-border-radius: var(--_radius-s);
  border-radius: var(--_radius-s);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

[color-scheme="light"] .header {
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

[color-scheme="dark"] .header {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Increase mobile menu background height */
@media only screen and (max-width: 1199px) {
  .header {
    padding: 0.2rem 0.2rem;
    /* Uniform scaling for mobile menu */
    transform: scale(var(--mobile-menu-scale));
    transform-origin: bottom left;
  }
}

@media only screen and (min-width: 768px) {
  .header {
    bottom: 3rem;
    left: 5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .header {
    position: fixed;
    top: 3rem;
    bottom: auto;
    left: 4.9rem;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 9;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 1rem;
    width: auto;
    gap: 2rem;
  }

  [color-scheme="light"] .header {
    border: 1px solid rgba(255, 255, 255, 0.4);
  }

  [color-scheme="dark"] .header {
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}

@media only screen and (min-width: 1400px) {
  .header {
    position: fixed;
    top: 3rem;
    bottom: auto;
    left: 4.9rem;
    padding: 0 1.5rem;
  }
}

.header__navigation {
  position: relative;
}

@media only screen and (min-width: 1200px) {
  .header__navigation {
    height: 4rem;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}

@media only screen and (min-width: 1400px) {
  .header__navigation {
    height: 5rem;
  }
}

.logo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  top: 2rem;
  left: 2rem;
  overflow: hidden;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -moz-border-radius: var(--_radius-s);
  border-radius: var(--_radius-s);

  z-index: 100;
}

/* Frosted glass background for mobile logo - only applies below 1200px */
@media only screen and (max-width: 1199px) {
  [color-scheme="light"] .logo {
    background-color: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.4);
  }

  [color-scheme="dark"] .logo {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}

@media only screen and (min-width: 768px) {
  .logo {
    top: 3rem;
    left: 5rem;
  }
}

/* Hide separate logo on large screens */
@media only screen and (min-width: 1200px) {
  .logo:not(.logo--header) {
    display: none;
  }
}

/* Logo inside header - only visible on large screens */
.logo--header {
  display: none;
  position: relative;
  top: auto;
  left: auto;
  overflow: visible;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  -moz-border-radius: 0;
  border-radius: 0;
  z-index: auto;
}

@media only screen and (min-width: 1200px) {
  .logo--header {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }

  .logo-text {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .logo__link svg,
  .logo__link img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  }
}

.logo__link {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  transition: all 0.3s ease;
}

.logo__link:hover .logo-text {
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.logo__link:hover svg,
.logo__link:hover img,
.logo__link:active svg,
.logo__link:active img {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  transform: rotate(180deg);
}

.logo__link svg,
.logo__link img {
  width: auto;
  height: 4rem;
  transition: filter 0.3s ease, transform 0.4s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.logo__link span {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding-left: 1.4rem;
  padding-right: 1rem;
}

@media only screen and (min-width: 1400px) {

  .logo__link svg,
  .logo__link img {
    height: 5rem;
  }

  .logo__link span {
    padding-left: 1.6rem;
  }
}

/* Logo theme switching */
/* Logo Light.svg for dark mode, Logo Dark.svg for light mode */
.logo__image--light {
  display: none;
}

.logo__image--dark {
  display: block;
}

[color-scheme="light"] .logo__image--light,
[color-scheme="dark"] .logo__image--dark {
  display: none;
}

[color-scheme="light"] .logo__image--dark,
[color-scheme="dark"] .logo__image--light {
  display: block;
}

/* Default to dark logo (Logo Dark.svg) if prefers-color-scheme is light */
@media (prefers-color-scheme: light) {
  .logo__image--dark {
    display: block;
  }

  .logo__image--light {
    display: none;
  }
}

/* Default to light logo (Logo Light.svg) if prefers-color-scheme is dark */
@media (prefers-color-scheme: dark) {
  .logo__image--light {
    display: block;
  }

  .logo__image--dark {
    display: none;
  }
}

.color {
  position: fixed;
  top: 2rem;
  right: 2rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -moz-border-radius: var(--_radius-s);
  border-radius: var(--_radius-s);
  overflow: hidden;
  z-index: 100;
}

[color-scheme="light"] .color {
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

[color-scheme="dark"] .color {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

@media only screen and (min-width: 768px) {
  .color {
    top: 3rem;
    right: 5rem;
  }
}

@media only screen and (min-width: 1400px) {
  .color {
    width: 5rem;
    height: 5rem;
  }
}

.color-switcher {
  position: relative;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: none;
  outline: 0;
  padding: 0;
  font: inherit;
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 1.8rem;
  height: 1.8rem;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: var(--t-bright);
  font-size: 1.8rem;
  -webkit-transition: transform 0.3s ease;
  -moz-transition: transform 0.3s ease;
  transition: transform 0.3s ease;
}

.theme-icon {
  position: absolute;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  -webkit-transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
  -moz-transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

/* Show sun icon in dark mode (to switch to light) */
[color-scheme="dark"] .theme-icon--light {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

[color-scheme="dark"] .theme-icon--dark {
  opacity: 0;
  transform: scale(0.8) rotate(0deg);
}

/* Show moon icon in light mode (to switch to dark) */
[color-scheme="light"] .theme-icon--dark {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

[color-scheme="light"] .theme-icon--light {
  opacity: 0;
  transform: scale(0.8) rotate(0deg);
}

/* Hover animations for theme switcher */
.no-touch .color-switcher:hover {
  transform: scale(1.1);
}

.no-touch .color-switcher:hover .theme-icon--light {
  transform: scale(1.15) rotate(180deg);
}

.no-touch .color-switcher:hover .theme-icon--dark {
  transform: scale(1.15) rotate(-15deg);
}

/* Active/pressed state */
.color-switcher:active {
  transform: scale(0.95);
}

.color-switcher:active .theme-icon--light {
  transform: scale(1.05) rotate(90deg);
}

.color-switcher:active .theme-icon--dark {
  transform: scale(1.05) rotate(-5deg);
}

@media only screen and (min-width: 768px) {
  .color-switcher {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 1400px) {
  .color-switcher {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 2.6rem;
  }
}

/* Mobile size for theme switcher */
@media only screen and (max-width: 1199px) {
  .color-switcher {
    width: 4rem;
    height: 4rem;
    font-size: 1.8rem;
  }
}

.header-offset {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 8rem;
  background-color: var(--base);
  z-index: 3;
}

@media only screen and (min-width: 768px) {
  .header-offset {
    height: 8.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .header-offset {
    height: 0;
  }
}

/* ------------------------------------------------*/
/* Blocks Header End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Blocks Menu Start */
/* ------------------------------------------------*/
.menu__list {
  position: relative;
}

@media only screen and (min-width: 1200px) {
  .menu__list {
    height: 4rem;
  }
}

@media only screen and (min-width: 1400px) {
  .menu__list {
    height: 5rem;
  }
}

.menu__item {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.menu__link {
  width: 4rem;
  height: 4rem;
  -moz-border-radius: var(--_radius-s);
  border-radius: var(--_radius-s);
  color: var(--t-bright);
  white-space: nowrap;
  font-size: 1.8rem;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.menu__link.active {
  color: var(--t-opp-bright);
  background-color: var(--neutral-bright);
}

@media only screen and (min-width: 1200px) {
  .menu__link {
    width: auto;
    height: 4rem;
    padding: 0 2rem;
    font: normal var(--font-weight-medium) 1.6rem/4rem var(--_font-default);
    color: var(--t-medium);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .menu__link i {
    display: none;
  }

  .menu__link:hover {
    color: var(--t-bright);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }

  .menu__link:hover .menu__caption {
    color: var(--t-bright);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }

  .menu__link.active {
    color: var(--t-bright);
    background-color: transparent;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }

  .menu__link.active .menu__caption {
    color: var(--t-bright);
    -moz-background-size: 0 1px, 100% 1px;
    background-size: 0 1px, 100% 1px;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  }
}

@media only screen and (min-width: 1400px) {
  .menu__link {
    height: 5rem;
    line-height: 5rem;
    padding: 0 2.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .menu__link {
    font-size: 1.8rem;
  }
}

.menu__caption {
  display: none;
}

@media only screen and (min-width: 1200px) {
  .menu__caption {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    text-decoration: none;
    background: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0))), -webkit-gradient(linear, left top, right top, from(var(--t-bright)), to(var(--t-bright)));
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), -moz-linear-gradient(left, var(--t-bright), var(--t-bright));
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, var(--t-bright), var(--t-bright));
    -moz-background-size: 100% 1px, 0 1px;
    background-size: 100% 1px, 0 1px;
    background-position: 100% 90%, 0 90%;
    background-repeat: no-repeat;
    -webkit-transition: background-size 300ms, color 300ms;
    -moz-transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
    transition: background-size 300ms, color 300ms;
    transition: background-size 300ms, color 300ms, -moz-background-size 300ms;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
}

/* ------------------------------------------------*/
/* Blocks Menu End */

/* ------------------------------------------------*/

/* Mobile-portrait: force menu link highlight */
@media only screen and (orientation: portrait) {

  /* make active links stand out exactly like mobile-desktop did originally */
  .menu__link.active {
    color: var(--t-opp-bright) !important;
    background-color: var(--neutral-bright) !important;
  }
}

/* Mobile: prevent tap selection line / focus outline on menu tap & anchor scroll */
@media (hover: none) and (pointer: coarse) {

  .menu__link,
  .menu__item,
  nav.menu {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  /* Remove focus outline on sections when scrolled to via anchor links */
  section:focus,
  section[id]:focus,
  [id]:target {
    outline: none;
  }
}

/* ------------------------------------------------*/
/* Blocks Footer Start */
/* ------------------------------------------------*/
.footer {
  position: relative;
  padding: 10.4rem 0 0 0;
  z-index: 3;
}

.footer.footer-marquee {
  padding: 1.5rem 0 0 0;
}

@media only screen and (min-width: 768px) {
  .footer {
    padding: 14.6rem 0 0 0;
  }

  .footer.footer-marquee {
    padding: 2rem 0 0 0;
  }
}

@media only screen and (min-width: 1200px) {
  .footer {
    padding: 16.1rem 0 9.8rem 0;
  }

  .footer.footer-marquee {
    padding: 2rem 0 1rem 0;
  }
}

@media only screen and (min-width: 1400px) {
  .footer {
    padding: 18.1rem 0 9.7rem 0;
  }

  .footer.footer-marquee {
    padding: 2rem 0 1rem 0;
  }
}

@media only screen and (min-width: 1600px) {
  .footer {
    padding: 21.2rem 0 11rem 0;
  }

  .footer.footer-marquee {
    padding: 2.5rem 0 1rem 0;
  }
}

.footer__link {
  position: relative;
  margin-bottom: 6.8rem;
}

@media only screen and (min-width: 992px) {
  .footer__link {
    margin-bottom: 7.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .footer__link {
    margin-bottom: 8.2rem;
  }
}

@media only screen and (min-width: 1400px) {
  .footer__link {
    margin-bottom: 8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .footer__link {
    margin-bottom: 8.5rem;
  }
}

.footer__text {
  font: normal 300 4.6rem var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .footer__text {
    font-size: 8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .footer__text {
    font-size: 9rem;
  }
}

@media only screen and (min-width: 1400px) {
  .footer__text {
    font-size: 10rem;
  }
}

@media only screen and (min-width: 1600px) {
  .footer__text {
    font-size: 14rem;
  }
}

.footer__btn {
  margin-top: 2.8rem;
}

@media only screen and (min-width: 768px) {
  .footer__btn {
    margin-top: 0;
  }
}

.footer__divider {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: var(--stroke-elements);
}

.footer-logo {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.footer-logo svg {
  width: 4rem;
  height: auto;
}

.footer-logo span {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding-left: 1.4rem;
}

@media only screen and (min-width: 1400px) {
  .footer-logo svg {
    width: 5rem;
  }

  .footer-logo span {
    padding-left: 1.6rem;
  }
}

/* ------------------------------------------------*/
/* Blocks Footer End */
/* ------------------------------------------------*/

/* Home Screen Text Transitions - Enhanced for Smoothness */
.home-heading,
.home-subheading,
.home-scroll-link {
  will-change: color, text-shadow;
  transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    text-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global smooth transitions */
/* Optimized transition targets for theme switching */
:root {
  --transition-theme: color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base elements that need transitions */
body,
.header,
.header-menu-links a,
.header-menu-social a,
.section-title,
.section-header .lead,
.about-header .lead,
.about-header .about-header-bio,
.about-header .about-header-bio a,
.about-header .about-header-bio p,
.about-header .about-header-bio h1,
.about-header .about-header-bio h2,
.about-header .about-header-bio h3,
.about-header .about-header-bio h4,
.about-header .about-header-bio h5,
.about-header .about-header-bio h6,
.about-header .about-header-bio li,
.about-header .about-header-bio blockquote,
.about-header .about-header-bio pre,
.about-header .about-header-bio code,
.about-header .about-header-bio .highlight,
.about-header .about-header-bio .highlight pre,
.about-header .about-header-bio .highlight code,
.about-header .about-header-bio .highlight pre code {
  transition: var(--transition-theme);
  will-change: color, background-color, border-color;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Home Background Video Styling */
#home .home-background-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: bottom center !important;
  transform: scale(1.0, 1.0) translateZ(0) !important;
  transform-origin: bottom center !important;
  /* Performance optimizations */
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: scale(1.0, 1.0) translateZ(0) !important;
  /* Ensure poster/thumbnail displays while video loads */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Responsive adjustments for different screen sizes */
@media only screen and (max-width: 768px) {

  /* Mobile devices - Enhanced performance optimizations */
  #home .home-background-video {
    transform: scale(1.0, 1.0) !important;
    /* Show poster immediately, video will fade in when loaded */
    opacity: 1 !important;
    transition: opacity 0.5s ease-in-out;
  }

  /* Ensure poster is always visible on mobile */
  #home .home-background-video[poster] {
    /* Poster should be visible immediately */
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Fade in video smoothly when it starts playing (optional enhancement) */
  #home .home-background-video.playing {
    opacity: 1 !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {

  /* Tablet devices */
  #home .home-background-video {
    transform: scale(1.0, 1.0) !important;
  }
}

@media only screen and (min-width: 1024px) {

  /* Desktop screens */
  #home .home-background-video {
    transform: scale(1.0, 1.0) !important;
  }
}

/* Tap-to-play overlay when autoplay is blocked (e.g. low power mode) */
.home-video-play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10;
}

/* Keep home intro (headline, scroll link) above tap-to-play overlay so text is visible in low power mode */
#home .main__intro {
  position: relative;
  z-index: 15;
}

.home-video-play-overlay.visible {
  opacity: 1;
  visibility: visible;
  /* Taps pass through to the video underneath so play() is allowed by the browser */
  pointer-events: none;
}

.home-video-play-overlay__label {
  padding: 0.5em 1em;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.95rem;
  border-radius: 4px;
  user-select: none;
  pointer-events: none;
}

/* When tap-to-play overlay is visible: video receives taps */
#home .home-background-video.home-background-video--tap-to-play {
  pointer-events: auto !important;
  z-index: 5 !important;
}


/* How to tweak the video settings:
   1. Width and Height Scaling:
      - Use transform: scale(width, height) to control both dimensions
      - Current values: scale(1.05, 1.05)
      - Adjust width scaling (first number):
        - Increase (e.g., 1.1) to expand more on sides
        - Decrease (e.g., 1.02) to expand less on sides
      - Adjust height scaling (second number):
        - Increase (e.g., 1.1) to expand more vertically
        - Decrease (e.g., 1.02) to expand less vertically
      - Example combinations:
        scale(1.05, 1.05) - expand equally in both directions
        scale(1.1, 1.05) - expand more on sides
        scale(1.05, 1.1) - expand more vertically
        scale(1.05, 1.0) - expand only horizontally
        Tablet: 1.07
        Desktop: 1.05

   2. Positioning:
      - Adjust object-position to change where the video is anchored
      - Current: bottom center
      - Other options: bottom left, bottom right, center

   3. Aspect Ratio:
      - The padding-top: 56.25% maintains 16:9 aspect ratio
      - Change this value if you need a different aspect ratio
        - 56.25% = 16:9
        - 75% = 4:3
        - Adjust based on your video's aspect ratio

   4. Responsiveness:
      - Modify the media query breakpoints (768px, 1024px) to match your design needs
      - Add more breakpoints if needed for specific device sizes
*/

/* ------------------------------------------------*/
/* Blocks Popup Dialogs Start */
/* ------------------------------------------------*/
.popup {
  position: relative;
  background-color: var(--base);
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
  padding: 0;
  width: -moz-calc(100% - 4rem);
  width: calc(100% - 4rem);
  margin: 2rem auto;
  overflow: hidden;
  -webkit-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  -moz-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  -ms-scroll-chaining: none;
  overscroll-behavior: contain;
}

@media only screen and (min-width: 768px) {
  .popup {
    margin: 3rem auto;
    width: -moz-calc(100% - 10rem);
    width: calc(100% - 10rem);
  }
}

@media only screen and (min-width: 1600px) {
  .popup {
    max-width: 1620px;
  }
}

/* Popup Scroll Indicator */
.popup-scroll-indicator {
  position: fixed !important;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.popup-scroll-indicator__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  pointer-events: none;
}

.popup-scroll-indicator__buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  pointer-events: none;
}

/* Scroll indicator buttons - frosted glass (same as site .btn-to-top / home glass) */
.popup-scroll-copy-link,
.popup-scroll-to-top,
.popup-scroll-close {
  pointer-events: auto !important;
  position: static !important;
  width: 3.25rem !important;
  height: 3.25rem !important;
  min-width: 3.25rem !important;
  min-height: 3.25rem !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0;
  padding: 0;
  border: 2.0px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(0.5px);
  color: #ffffff !important;
  cursor: pointer;
  -moz-border-radius: var(--_radius-s);
  border-radius: var(--_radius-s);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.popup-scroll-copy-link i,
.popup-scroll-to-top i,
.popup-scroll-close i {
  font-size: 1.5rem;
  line-height: 1;
}

@media (hover: hover) {

  .popup-scroll-copy-link:hover,
  .popup-scroll-to-top:hover {
    background-color: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 1.0);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
    transform: scale(1.08);
  }

  .popup-scroll-close:hover {
    background-color: rgba(220, 53, 69, 0.3);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff !important;
    border-color: rgba(220, 53, 69, 0.7);
    box-shadow: 0 2px 14px rgba(220, 53, 69, 0.2);
    transform: scale(1.08);
  }
}

/* Active/click/tap: same as hover so tap feels the same */
.popup-scroll-copy-link:active,
.popup-scroll-to-top:active {
  background-color: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 1.0);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
  transform: scale(1.08);
}

.popup-scroll-close:active {
  background-color: rgba(220, 53, 69, 0.3);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff !important;
  border-color: rgba(220, 53, 69, 0.7);
  box-shadow: 0 2px 14px rgba(220, 53, 69, 0.2);
  transform: scale(1.08);
}

/* Ensure indicator is visible within popup and above everything */
.mfp-wrap .popup-scroll-indicator,
.mfp-container .popup-scroll-indicator,
.mfp-content .popup-scroll-indicator {
  position: fixed !important;
  z-index: 10000 !important;
}

.popup-scroll-indicator.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(24px);
  pointer-events: none;
}

/* When popup is closed (e.g. via direct link then close), force all scroll indicator bars off */
body.popup-scroll-bars-hidden .popup-scroll-indicator,
.popup-scroll-indicator.popup-scroll-indicator--closed {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

.popup-scroll-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.8),
    0 0 16px rgba(0, 0, 0, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.9),
    0 4px 8px rgba(0, 0, 0, 0.7);
}

.popup-scroll-arrow {
  font-size: 1.75rem;
  color: #ffffff !important;
  animation: popupScrollBounce 1.5s ease-in-out infinite;
  display: block;
  line-height: 1;
  margin-top: -1.5rem;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Stronger glow on mobile so it’s visible on small screens */
@media only screen and (max-width: 767px) {
  .popup-scroll-arrow {
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.6),
      0 0 14px rgba(255, 255, 255, 0.3),
      0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

@keyframes popupScrollBounce {

  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateY(8px);
    opacity: 0.7;
  }
}

@media only screen and (min-width: 768px) {
  .popup-scroll-indicator {
    bottom: 2rem;
  }

  .popup-scroll-copy-link,
  .popup-scroll-to-top,
  .popup-scroll-close {
    width: 3.5rem !important;
    height: 3.5rem !important;
    min-width: 3.5rem !important;
    min-height: 3.5rem !important;
  }

  .popup-scroll-copy-link i,
  .popup-scroll-to-top i,
  .popup-scroll-close i {
    font-size: 1.6rem;
  }

  .popup-scroll-text {
    font-size: 1rem;
  }

  .popup-scroll-arrow {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .popup-scroll-indicator {
    bottom: 2.5rem;
  }

  .popup-scroll-copy-link,
  .popup-scroll-to-top,
  .popup-scroll-close {
    width: 3.75rem !important;
    height: 3.75rem !important;
    min-width: 3.75rem !important;
    min-height: 3.75rem !important;
  }

  .popup-scroll-copy-link i,
  .popup-scroll-to-top i,
  .popup-scroll-close i {
    font-size: 1.75rem;
  }

  .popup-scroll-text {
    font-size: 1.1rem;
  }

  .popup-scroll-arrow {
    font-size: 2.25rem;
  }
}

@media only screen and (min-width: 1900px) {
  .popup-scroll-indicator {
    transform: translateX(calc(-50% - 0.5rem));
  }

  .popup-scroll-indicator.hidden {
    transform: translateX(calc(-50% - 0.5rem)) translateY(24px);
  }
}

@media only screen and (min-width: 1400px) {
  .popup-scroll-text {
    font-size: 1.2rem;
  }

  .popup-scroll-arrow {
    font-size: 2.5rem;
  }
}

/* Ensure white color and shadows in both light and dark modes */
[data-theme="light"] .popup-scroll-text,
[data-theme="dark"] .popup-scroll-text,
.light-theme .popup-scroll-text,
.dark-theme .popup-scroll-text {
  color: #ffffff !important;
}

[data-theme="light"] .popup-scroll-arrow,
[data-theme="dark"] .popup-scroll-arrow,
.light-theme .popup-scroll-arrow,
.dark-theme .popup-scroll-arrow {
  color: #ffffff !important;
}

[data-theme="light"] .popup-scroll-copy-link,
[data-theme="dark"] .popup-scroll-copy-link,
.light-theme .popup-scroll-copy-link,
.dark-theme .popup-scroll-copy-link,
[data-theme="light"] .popup-scroll-to-top,
[data-theme="dark"] .popup-scroll-to-top,
.light-theme .popup-scroll-to-top,
.dark-theme .popup-scroll-to-top,
[data-theme="light"] .popup-scroll-close,
[data-theme="dark"] .popup-scroll-close,
.light-theme .popup-scroll-close,
.dark-theme .popup-scroll-close {
  color: #ffffff !important;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.2);
  background-color: rgba(0, 0, 0, 0.06);
}

.project__block {
  padding: 0 2rem;
}

.project__block.no-padding {
  padding: 0;
}

.project__block.grid-block {
  padding: 0 1rem;
}

@media only screen and (min-width: 768px) {
  .project__block {
    padding: 0 5rem;
  }

  .project__block.grid-block {
    padding: 0 3.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .project__block.grid-block {
    padding: 0 2.5rem;
  }
}

.project__block {
  margin-top: 6rem;
  margin-bottom: 5.9rem;
}

.project__block.pre-grid-items {
  margin-bottom: 3.9rem;
}

.project__block.grid-items {
  margin-top: 3.8rem;
}

.project__block.normal-size {
  margin-top: 6rem;
  margin-bottom: 6.8rem;
}

.project__block.small-size {
  margin: 2rem 0;
}

.project__block.no-margin {
  margin: 0;
}

.project__block.no-margin-bottom {
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .project__block {
    margin-top: 8rem;
    margin-bottom: 7.9rem;
  }

  .project__block.pre-grid-items {
    margin-bottom: 4.9rem;
  }

  .project__block.grid-items {
    margin-top: 5rem;
  }

  .project__block.normal-size {
    margin-top: 8rem;
    margin-bottom: 8.8rem;
  }

  .project__block.small-size {
    margin: 5rem 0;
  }

  .project__block.no-margin-bottom {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 992px) {
  .project__block {
    margin-top: 8.7rem;
    margin-bottom: 8.6rem;
  }

  .project__block.pre-grid-items {
    margin-bottom: 5.6rem;
  }

  .project__block.grid-items {
    margin-top: 5.7rem;
  }

  .project__block.normal-size {
    margin-top: 8.7rem;
    margin-bottom: 9.5rem;
  }

  .project__block.no-margin-bottom {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1200px) {
  .project__block {
    margin-top: 8.2rem;
    margin-bottom: 8.6rem;
  }

  .project__block.pre-grid-items {
    margin-bottom: 5.6rem;
  }

  .project__block.grid-items {
    margin-top: 5.2rem;
  }

  .project__block.normal-size {
    margin-top: 9.5rem;
    margin-bottom: 9.5rem;
  }

  .project__block.no-margin-bottom {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1400px) {
  .project__block {
    margin-top: 9.1rem;
    margin-bottom: 9.4rem;
  }

  .project__block.pre-grid-items {
    margin-bottom: 6.5rem;
  }

  .project__block.grid-items {
    margin-top: 6.1rem;
  }

  .project__block.normal-size {
    margin-top: 10.5rem;
    margin-bottom: 10.5rem;
  }

  .project__block.no-margin-bottom {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .project__block {
    margin-top: 10.4rem;
    margin-bottom: 10.7rem;
  }

  .project__block.pre-grid-items {
    margin-bottom: 5.7rem;
  }

  .project__block.grid-items {
    margin-top: 5.4rem;
  }

  .project__block.normal-size {
    margin-top: 12rem;
    margin-bottom: 12rem;
  }

  .project__block.no-margin-bottom {
    margin-bottom: 0;
  }
}

.project-image-bg {
  position: relative;
  width: 100%;
  background-repeat: no-repeat;
  background-position: top center;
  -moz-background-size: cover;
  background-size: cover;
  overflow: hidden;
}

/* Fixed height for project popup cover images */
[id^="portfolio-popup-"] .project-image-bg {
  height: clamp(200px, 30vh, 350px);
}

/* Mobile-specific fixes */
@media only screen and (max-width: 767px) {
  [id^="portfolio-popup-"] .project-image-bg {
    height: clamp(180px, 25vh, 300px);
    width: 100%;
    max-width: 100%;
  }
}


@media only screen and (min-width: 768px) {
  .project-image-bg {
    height: auto;
  }

  [id^="portfolio-popup-"] .project-image-bg {
    height: clamp(300px, 45vh, 320px);
  }
}

/* Tablet landscape - increase height for better visibility */
@media only screen and (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  [id^="portfolio-popup-"] .project-image-bg {
    height: clamp(350px, 50vh, 450px) !important;
  }
}

@media only screen and (min-width: 1200px) {
  [id^="portfolio-popup-"] .project-image-bg {
    height: clamp(650px, 55vh, 700px);
  }
}

@media (orientation: landscape) {
  .project-image-bg__landscape {
    display: block;
  }

  .project-image-bg__portrait {
    display: none;
  }
}

@media (orientation: portrait) {

  /* hide the unused portrait class */
  .project-image-bg__portrait {
    display: none !important;
  }

  /* keep showing the landscape image on phones in portrait */
  .project-image-bg__landscape {
    display: block !important;
  }
}

/* ───────────────────────────────────────────────
   Popup Title on Mobile Portrait: reduce size
   ─────────────────────────────────────────────── */
@media only screen and (max-width: 767px) and (orientation: portrait) {

  /* Fixed height for cover image on mobile portrait */
  [id^="portfolio-popup-"] .project__block.project-image-bg {
    height: clamp(180px, 25vh, 300px) !important;
    width: 100% !important;
    max-width: 100% !important;
    /* fixed height regardless of image resolution */
  }

  [id^="portfolio-popup-"] .project-image-bg__landscape {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    /* fill the container */
    object-fit: cover !important;
    /* ensure image covers the container properly */
    object-position: center !important;
  }

  [id^="portfolio-popup-"] .project__title h3 {
    font-size: 1.8rem !important;
    /* reduced from 2.4rem for better mobile portrait fit */
    line-height: 1.3 !important;
    padding: 0.4rem 0.8rem !important;
    /* reduce padding to match smaller font size */
  }

  /* ───────────────────────────────────────────────
     Close-button size fix for mobile portrait
     ─────────────────────────────────────────────── */
  [id^="portfolio-popup-"] .mfp-close {
    width: 3.75rem !important;
    height: 3.75rem !important;
    top: 1.5rem !important;
    right: 1.5rem !important;
    -moz-border-radius: var(--_radius-s) !important;
    border-radius: var(--_radius-s) !important;
  }

  [id^="portfolio-popup-"] .mfp-close::before {
    font-size: 1.7rem !important;
    font-weight: 600 !important;
  }
}

/* ensure the landscape <img> actually fills its container on small screens */
.project-image-bg__landscape {
  display: block;
  /* override any hiding */
  width: 100%;
  max-width: 100%;
  /* span full width of its parent */
  height: 100%;
  /* fill the container height */
  object-fit: cover;
  /* cover the area while maintaining aspect ratio */
  object-position: center;
  /* center the image */
}

/* Mobile-specific image fixes */
@media only screen and (max-width: 767px) {
  [id^="portfolio-popup-"] .project-image-bg__landscape {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* Mobile landscape orientation fixes */
@media only screen and (max-width: 767px) and (orientation: landscape) {
  [id^="portfolio-popup-"] .project-image-bg {
    height: clamp(250px, 40vh, 400px) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  [id^="portfolio-popup-"] .project-image-bg__landscape {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Close-button size fix for mobile landscape - same as portrait */
  [id^="portfolio-popup-"] .mfp-close {
    width: 3.75rem !important;
    height: 3.75rem !important;
    top: 1.5rem !important;
    right: 1.5rem !important;
    -moz-border-radius: var(--_radius-s) !important;
    border-radius: var(--_radius-s) !important;
  }

  [id^="portfolio-popup-"] .mfp-close::before {
    font-size: 1.7rem !important;
    font-weight: 600 !important;
  }
}

/* Responsive section height */
.main__intro {
  min-height: 100vh;
  height: 100dvh;
  margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
  .main__intro {
    height: -webkit-fill-available;
    min-height: 100vh;
  }

  .fullheight-desktop {
    min-height: 100vh;
    height: -webkit-fill-available;
    margin-bottom: 0;
  }
}

.project__title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2.4rem 2rem;
}

/* ───────────────────────────────────────────────
   Popup Header: force white title + dark overlay
   ─────────────────────────────────────────────── */
[id^="portfolio-popup-"] .project__block.project-image-bg {
  /* ensure we can layer the overlay */
  position: relative;
}

/* ───────────────────────────────────────────────
   Portfolio Popup Title: readability enhancements
   ─────────────────────────────────────────────── */
[id^="portfolio-popup-"] .project__title h3 {
  color: #ffffff !important;
  /* white text */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  /* subtle dark glow */
  background: rgba(0, 0, 0, 0.4);
  /* semi-opaque backdrop */
  display: inline-block;
  /* shrink-wrap the bg */
  padding: 0.5rem 1rem;
  /* some breathing room */
  border-radius: 1.0rem;
  /* soften the corners */
  position: relative;
  /* above any image */
  z-index: 1;
  /* ensure it sits on top */
}




[id^="portfolio-popup-"] .project__title h3 {
  /* keep the text above the overlay and always white */
  position: relative;
  z-index: 1;
  color: #ffffff !important;
}


@media only screen and (min-width: 768px) {
  .project__title {
    padding: 2.6rem 5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .project__title {
    padding: 4rem 5rem 4.6rem 5rem;
  }
}

.project__subtitle {
  margin-bottom: 2.8rem;
}

.project__subtitle.image-top-subtitle {
  margin-bottom: 3rem;
}

@media only screen and (min-width: 768px) {
  .project__subtitle {
    margin-bottom: 3.4rem;
  }

  .project__subtitle.image-top-subtitle {
    margin-bottom: 4.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .project__subtitle {
    margin-bottom: 3.4rem;
    padding-top: 0.4rem;
  }

  .project__subtitle.image-top-subtitle {
    margin-bottom: 4.5rem;
    padding-top: 0;
  }
}

/* Used Tools Grid Responsive Styles */
.project-tools-grid {
  max-width: 50%;
}

@media only screen and (max-width: 767px) {
  .project-tools-grid {
    max-width: 100%;
    grid-template-columns: repeat(2, 1fr) !important;
    font-size: 1em !important;
    gap: 0.75em !important;
  }

  .project-tools-grid span img {
    width: 20px !important;
    height: 20px !important;
  }
}

@media only screen and (max-width: 480px) {
  .project-tools-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5em !important;
  }
}

/* Mobile landscape: Reduce font size for tool names in popups */
@media only screen and (max-width: 767px) and (orientation: landscape) {
  [id^="portfolio-popup-"] .project-tools-grid {
    font-size: 0.95em !important;
    gap: 0.5em !important;
  }

  [id^="portfolio-popup-"] .project-tools-grid span {
    font-size: 0.95em !important;
  }

  [id^="portfolio-popup-"] .project-tools-grid span img {
    width: 18px !important;
    height: 18px !important;
  }
}

.project__illustration,
.project__illustration-xl {
  position: relative;
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
  overflow: hidden;
}

/* ───────────────────────────────────────────────
   Gallery Video Container: hover-show controls + paused overlay
   ─────────────────────────────────────────────── */
.project__video-container {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  margin-top: 3rem;
  border-radius: var(--_radius);
}

@media only screen and (min-width: 768px) {
  .project__video-container {
    margin-top: 4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .project__video-container {
    margin-top: 5rem;
  }
}

/* video fills its frame */
.project__video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--_radius);
  background: transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Show video when thumbnail overlay is hidden */
.project__video-container .project__video-thumbnail-overlay.hidden~.project__video,
.project__video-container:not(:has(.project__video-thumbnail-overlay)) .project__video {
  opacity: 1;
}

/* Remove rounded corners when video is in fullscreen mode */
.project__video:-webkit-full-screen {
  border-radius: 0;
}

.project__video:-moz-full-screen {
  border-radius: 0;
}

.project__video:-ms-fullscreen {
  border-radius: 0;
}

.project__video:fullscreen {
  border-radius: 0;
}

/* Thumbnail overlay and play button */
.project__video-thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: auto;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--_radius);
}

.project__video-thumbnail-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.project__video-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--_radius);
  transition: transform 0.5s ease, opacity 0.3s ease;
  transform: scale(1);
  /* Performance optimizations */
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Loading state for lazy thumbnails */
.project__video-thumbnail[loading="lazy"] {
  background-color: var(--base-shade);
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }

  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.project__video-thumbnail-overlay:hover .project__video-thumbnail,
.project__video-thumbnail-overlay:active .project__video-thumbnail {
  transform: scale(1.1);
}

.project__video-play-button {
  position: relative;
  z-index: 3;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
  pointer-events: auto;
  opacity: 0.95;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.project__video-play-button:hover {
  transform: scale(1.15);
  opacity: 1;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.project__video-play-button:active {
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.3);
}

.project__video-play-button svg {
  display: block;
  width: 100px;
  height: 100px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
  transition: filter 0.3s ease;
}

.project__video-play-button:hover svg {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

@media only screen and (min-width: 768px) {
  .project__video-play-button svg {
    width: 120px;
    height: 120px;
  }
}

@media only screen and (min-width: 1200px) {
  .project__video-play-button svg {
    width: 140px;
    height: 140px;
  }
}

/* overlay layer + text container */
.project__video-container::before,
.project__video-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 1;
}

/* dark overlay at 0 opacity by default */
.project__video-container::before {
  background: rgba(0, 0, 0, 0);
}

/* text placeholder (only becomes "Click/tap to resume" in JS) */
.project__video-container::after {
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  text-align: center;
}

/* on hover: show controls (no dark overlay) */
.project__video-container:hover::before,
.project__video-container:active::before {
  background: rgba(0, 0, 0, 0);
}

/* Remove darkening effects in popups on hover */
[id^="portfolio-popup-"] .project__video-container:hover::before,
[id^="portfolio-popup-"] .project__video-container:active::before {
  background: rgba(0, 0, 0, 0) !important;
}

/* show native controls when hovering */
.project__video-container:hover .project__video[controls],
.project__video-container:active .project__video[controls] {
  /* nothing here—controls are toggled in JS */
}

/* when paused: overlay text + dark background */
.project__video-container.paused::before {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* Remove darkening when paused in popups */
[id^="portfolio-popup-"] .project__video-container.paused::before {
  background: rgba(0, 0, 0, 0) !important;
}

.project__video-container.paused::after {
  content: "Click/tap to resume";
  opacity: 1 !important;
}

/* ───────────────────────────────────────────────
   Gallery Video Container: hover-show controls + paused overlay
   ─────────────────────────────────────────────── */


.project__data {
  position: relative;
}

@media only screen and (min-width: 1600px) {
  .pdata__item {
    padding-top: 0.4rem;
  }
}

.project__gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 1.0rem;
  padding: 0;
}

.project__gallery-item {
  position: relative;
  width: 100%;
  overflow: hidden;
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
  margin: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* Prevent layout shifts during hover transitions */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* Create isolation context and prevent layout shifts */
  isolation: isolate;
  contain: layout style paint;
}

.project__gallery-item a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* Prevent layout shifts */
  position: relative;
  overflow: hidden;
  border-radius: inherit;
  /* Maintain aspect ratio to prevent jumps */
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
  /* Prevent glitches during transform */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: center center;
  will-change: transform;
  /* Ensure image fills container without causing layout shifts */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.project__gallery-item:hover img,
.project__gallery-item:active img {
  transform: scale(1.05) translateZ(0);
  -webkit-transform: scale(1.05) translateZ(0);
  opacity: 1;
}

/* Remove darkening/lightening effects in popups */
[id^="portfolio-popup-"] .project__gallery-item:hover img,
[id^="portfolio-popup-"] .project__gallery-item:active img {
  opacity: 1 !important;
}

/* Video containers inside gallery items */
.project__gallery-item .project__video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  aspect-ratio: 16 / 9;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  border-radius: inherit;
  /* Prevent layout shifts and glitches */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: opacity;
}

.project__gallery-item:hover .project__video-container,
.project__gallery-item:active .project__video-container,
.project__gallery-item:focus-visible .project__video-container {
  opacity: 1;
  pointer-events: auto;
}

/* Make video containers with thumbnail overlays visible by default (for Progress section videos) */
/* Override the hover-only behavior for videos with thumbnail overlays */
.project__gallery-item .project__video-container:has(.project__video-thumbnail-overlay) {
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  top: auto !important;
  left: auto !important;
  margin-top: 0 !important;
}

/* Ensure overlay is visible by default */
.project__gallery-item .project__video-container:has(.project__video-thumbnail-overlay) .project__video-thumbnail-overlay {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Ensure gallery items with video containers have proper dimensions */
.project__gallery-item:has(.project__video-container:has(.project__video-thumbnail-overlay)) {
  aspect-ratio: 16 / 9;
  min-height: 200px;
}

/* Fallback for browsers that don't support :has() - target by structure */
/* Make video containers visible when they directly contain a thumbnail overlay (Progress section videos) */
.project__gallery-item>.project__video-container>.project__video-thumbnail-overlay:not(.hidden) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Ensure hidden class can override the visibility rules */
.project__gallery-item>.project__video-container>.project__video-thumbnail-overlay.hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Make the container itself visible when it has a thumbnail overlay child (not image stack videos) */
/* This overrides the hover-only behavior */
.project__gallery-item>.project__video-container:has(> .project__video-thumbnail-overlay:first-child) {
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  margin-top: 0 !important;
}

/* Additional fallback - if container has thumbnail overlay as direct child, make it always visible */
.project__gallery-item>.project__video-container>.project__video-thumbnail-overlay:first-child {
  /* This ensures the container is visible */
}

/* Prevent hover behavior from affecting video containers with thumbnail overlays */
.project__gallery-item:hover>.project__video-container:has(.project__video-thumbnail-overlay),
.project__gallery-item:focus-visible>.project__video-container:has(.project__video-thumbnail-overlay) {
  /* Keep opacity 1 even on hover - don't change it */
  opacity: 1 !important;
}

.project__gallery-item .project__video {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: inherit;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* Prevent glitches during transitions */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* For video containers with thumbnail overlays, make video behave like standalone videos */
/* Video starts hidden (opacity 0) and becomes visible when overlay is hidden */
.project__gallery-item .project__video-container:has(.project__video-thumbnail-overlay) .project__video {
  opacity: 0;
  transition: opacity 0.3s ease;
  width: 100%;
  height: auto;
}

/* Show video when thumbnail overlay is hidden */
.project__gallery-item .project__video-container:has(.project__video-thumbnail-overlay) .project__video-thumbnail-overlay.hidden~.project__video,
.project__gallery-item .project__video-container:has(.project__video-thumbnail-overlay.hidden) .project__video {
  opacity: 1 !important;
}

/* Fallback for browsers without :has() support - show video when overlay is hidden */
.project__gallery-item .project__video-container>.project__video-thumbnail-overlay.hidden~.project__video {
  opacity: 1 !important;
  display: block !important;
}

/* Hide controls by default, but show them when video has controls attribute and overlay is hidden */
.project__gallery-item .project__video:not([controls])::-webkit-media-controls,
.project__gallery-item .project__video:not([controls])::-webkit-media-controls-enclosure,
.project__gallery-item .project__video:not([controls])::-webkit-media-controls-panel,
.project__gallery-item .project__video:not([controls])::-webkit-media-controls-play-button,
.project__gallery-item .project__video:not([controls])::-webkit-media-controls-start-playback-button {
  display: none !important;
}

/* Show controls when video has controls attribute and is not an image stack video */
.project__gallery-item .project__video-container:has(.project__video-thumbnail-overlay.hidden) .project__video[controls]:not([data-image-stack-video])::-webkit-media-controls,
.project__gallery-item .project__video-container:has(.project__video-thumbnail-overlay.hidden) .project__video[controls]:not([data-image-stack-video])::-webkit-media-controls-enclosure,
.project__gallery-item .project__video-container:has(.project__video-thumbnail-overlay.hidden) .project__video[controls]:not([data-image-stack-video])::-webkit-media-controls-panel {
  display: flex !important;
}

/* Additional rules to hide controls on mobile for image stack video */
.project__gallery-item .project__video[data-image-stack-video] {
  -webkit-media-controls: none !important;
  -webkit-media-controls-enclosure: none !important;
  /* Prevent browser video preview popups on hover */
  pointer-events: none !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.project__gallery-item .project__video[data-image-stack-video]::-webkit-media-controls {
  display: none !important;
}

.project__gallery-item .project__video[data-image-stack-video]::-webkit-media-controls-enclosure {
  display: none !important;
}

.project__gallery-item .project__video[data-image-stack-video]::-webkit-media-controls-panel {
  display: none !important;
}

.project__gallery-item .project__video[data-image-stack-video]::-webkit-media-controls-play-button {
  display: none !important;
}

.project__gallery-item .project__video[data-image-stack-video]::-webkit-media-controls-start-playback-button {
  display: none !important;
}

/* Ensure no controls attribute styling on image stack video */
.project__gallery-item .project__video[data-image-stack-video][controls] {
  pointer-events: none !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.project__gallery-item .project__video[data-image-stack-video][controls]::-webkit-media-controls {
  display: none !important;
}

.project__gallery-item .project__video-thumbnail {
  aspect-ratio: 16 / 9;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

/* Hide image stack items 2-10 from grid view but keep them for PhotoSwipe */
.project__gallery-item.image-stack-hidden {
  display: none;
}

/* Image Stack Label - Frosted Glass Effect */
.image-stack-label {
  position: absolute;
  bottom: 0.8rem;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  -webkit-transform: translateX(-50%) translateZ(0);
  z-index: 20;
  padding: 0.6rem 1.2rem;
  border-radius: 1rem;
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  pointer-events: auto;
  cursor: pointer;
  /* Prevent layout shifts */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Center text within label */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* Ensure label stays within bounds */
  max-width: calc(100% - 1.6rem);
  box-sizing: border-box;
  /* Ensure label is always on top and clickable */
  touch-action: manipulation;
}

.image-stack-label__text {
  color: #ffffff;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  white-space: nowrap;
  pointer-events: auto;
  /* Ensure text scales properly on small devices */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Ensure proper text alignment */
  display: inline-block;
  line-height: 1.2;
  vertical-align: middle;
}

/* Always use dark background regardless of theme */
.image-stack-label {
  background-color: rgba(0, 0, 0, 0.25) !important;
}

/* Ensure background stays dark in all themes */
[color-scheme="light"] .image-stack-label {
  background-color: rgba(0, 0, 0, 0.25) !important;
}

[color-scheme="dark"] .image-stack-label {
  background-color: rgba(0, 0, 0, 0.25) !important;
}

@media (prefers-color-scheme: light) {
  .image-stack-label {
    background-color: rgba(0, 0, 0, 0.25) !important;
  }
}

@media (prefers-color-scheme: dark) {
  .image-stack-label {
    background-color: rgba(0, 0, 0, 0.25) !important;
  }
}

/* Text always white regardless of theme */

/* Image Stack Icon - Center of Thumbnail */
.image-stack-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform: translate3d(-50%, -50%, 0);
  z-index: 15;
  pointer-events: auto;
  cursor: pointer;
  /* Prevent layout shifts */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Firefox optimization: isolate transform context */
  contain: layout style paint;
  will-change: transform, opacity;
  opacity: 0.85;
  /* Firefox optimization: shorter, simpler transition */
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}

.image-stack-icon i {
  font-size: 4rem;
  color: #ffffff;
  display: inline-block;
  /* Firefox optimization: use transform3d for better GPU acceleration */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Prevent filter repaints during animation */
  isolation: isolate;
  /* No shadows - clean icon appearance */
  text-shadow: none;
  filter: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.3s ease;
}

/* Hover animations for stack icon - smooth float up with glow */
.no-touch .project__gallery-item:hover .image-stack-icon {
  transform: translate3d(-50%, calc(-50% - 8px), 0);
  -webkit-transform: translate3d(-50%, calc(-50% - 8px), 0);
  opacity: 1;
}

.no-touch .project__gallery-item:hover .image-stack-icon i {
  transform: scale3d(1.1, 1.1, 1);
  -webkit-transform: scale3d(1.1, 1.1, 1);
  /* No shadows - clean icon appearance */
  text-shadow: none;
  filter: none;
  color: #ffffff;
}

/* Firefox-specific: no shadows */
@-moz-document url-prefix() {
  .no-touch .project__gallery-item:hover .image-stack-icon i {
    text-shadow: none;
    filter: none;
  }
}

/* Fallback for touch devices - use focus instead */
.project__gallery-item:focus-visible .image-stack-icon {
  transform: translate3d(-50%, calc(-50% - 6px), 0);
  -webkit-transform: translate3d(-50%, calc(-50% - 6px), 0);
  opacity: 1;
}

.project__gallery-item:focus-visible .image-stack-icon i {
  transform: scale3d(1.08, 1.08, 1);
  -webkit-transform: scale3d(1.08, 1.08, 1);
  /* No shadows - clean icon appearance */
  text-shadow: none;
  filter: none;
}

/* Active state for touch devices */
.project__gallery-item:active .image-stack-icon {
  transform: translate3d(-50%, calc(-50% - 4px), 0);
  -webkit-transform: translate3d(-50%, calc(-50% - 4px), 0);
}

.project__gallery-item:active .image-stack-icon i {
  transform: scale3d(1.05, 1.05, 1);
  -webkit-transform: scale3d(1.05, 1.05, 1);
}

@media only screen and (min-width: 768px) {
  .image-stack-icon i {
    font-size: 5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .image-stack-icon i {
    font-size: 6rem;
  }
}

@media only screen and (min-width: 1400px) {
  .image-stack-icon i {
    font-size: 7rem;
  }
}

@media only screen and (min-width: 1600px) {
  .image-stack-icon i {
    font-size: 8rem;
  }
}

@media only screen and (min-width: 768px) {
  .image-stack-label {
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    padding: 0.6rem 1.2rem;
    border-radius: 0.8rem;
  }

  .image-stack-label__text {
    font-size: 1.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .image-stack-label {
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    padding: 0.7rem 1.4rem;
    border-radius: 0.9rem;
  }

  .image-stack-label__text {
    font-size: 1.4rem;
  }
}

@media only screen and (min-width: 1400px) {
  .image-stack-label__text {
    font-size: 1.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .image-stack-label {
    bottom: 1.8rem;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    padding: 0.8rem 1.6rem;
    border-radius: 1rem;
  }

  .image-stack-label__text {
    font-size: 1.6rem;
  }
}

/* Responsive scaling for 3-column gallery grid (smaller items) */
@media only screen and (min-width: 768px) and (max-width: 1199px) {

  /* When gallery has 3 columns, scale down labels */
  #portfolio-popup-4 .project__gallery-grid .image-stack-label {
    bottom: 0.7rem;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    padding: 0.45rem 0.9rem;
    border-radius: 0.7rem;
    min-height: auto;
    max-width: calc(100% - 1.4rem);
  }

  #portfolio-popup-4 .project__gallery-grid .image-stack-label__text {
    font-size: 0.95rem;
    line-height: 1.2;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {

  /* When gallery has 3 columns, scale down labels */
  #portfolio-popup-4 .project__gallery-grid .image-stack-label {
    bottom: 0.9rem;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    padding: 0.5rem 1rem;
    border-radius: 0.7rem;
    min-height: auto;
    max-width: calc(100% - 1.8rem);
  }

  #portfolio-popup-4 .project__gallery-grid .image-stack-label__text {
    font-size: 1.2rem;
    line-height: 1.2;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {

  /* When gallery has 3 columns, scale down labels */
  #portfolio-popup-4 .project__gallery-grid .image-stack-label {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    padding: 0.55rem 1.1rem;
    border-radius: 0.8rem;
    min-height: auto;
    max-width: calc(100% - 2rem);
  }

  #portfolio-popup-4 .project__gallery-grid .image-stack-label__text {
    font-size: 1.3rem;
    line-height: 1.2;
  }
}

/* Mobile portrait: 1 column - ensure labels are appropriately sized */
@media only screen and (max-width: 767px) and (orientation: portrait) {
  .project__gallery-grid {
    grid-template-columns: 1fr;
  }

  .image-stack-label {
    bottom: 0.8rem;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    padding: 0.5rem 1rem;
    border-radius: 0.8rem;
    min-height: auto;
    max-width: calc(100% - 1.6rem);
  }

  .image-stack-label__text {
    font-size: 1rem;
    line-height: 1.2;
  }
}

/* Mobile landscape: 2 columns - scale labels for smaller items */
@media only screen and (max-width: 767px) and (orientation: landscape) {
  .image-stack-label {
    bottom: 0.6rem;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    min-height: auto;
    max-width: calc(100% - 1.2rem);
  }

  .image-stack-label__text {
    font-size: 1.2rem;
    line-height: 1.2;
  }
}

/* Gallery Title Styles - Gallery view (not opened) */
.project__gallery-title {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  padding: 0.6rem 1.2rem;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--t-bright);
  font-size: 1.7rem;
  font-weight: 300;
  border-radius: 1.5rem;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Light mode: light background with black text */
[color-scheme=light] .project__gallery-title {
  background: rgba(255, 255, 255, 0.7);
  color: #151617;
}

/* Dark mode: dark background with white text (default, but explicit) */
[color-scheme=dark] .project__gallery-title {
  background: rgba(0, 0, 0, 0.7);
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .project__gallery-title {
    font-size: 1.7rem;
    padding: 0.7rem 1.4rem;
    bottom: 1.2rem;
    left: 1.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .project__gallery-title {
    font-size: 1.7rem;
    padding: 0.8rem 1.6rem;
    bottom: 1.5rem;
    left: 1.5rem;
  }
}

@media only screen and (min-width: 1400px) {
  .project__gallery-title {
    font-size: 1.7rem;
    padding: 0.9rem 1.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .project__gallery-title {
    font-size: 1.7rem;
    padding: 1rem 2rem;
    bottom: 2rem;
    left: 2rem;
  }
}

/* Mobile landscape: 2 columns */
@media only screen and (max-width: 767px) and (orientation: landscape) {
  .project__gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Impyrium Board Game popup: 3 columns on desktop */
@media only screen and (min-width: 768px) {
  #portfolio-popup-4 .project__gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Interior Configurator popup: 3 columns on desktop for Gallery and Progress sections */
@media only screen and (min-width: 768px) {

  #portfolio-popup-1 .project__gallery-grid,
  #portfolio-popup-2 .project__gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Maritime (popup-2) Gallery: videos 2 per row, images stay 3 per row */
  #portfolio-popup-2 .project__gallery-grid.project__gallery-grid--videos {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Responsive scaling for 2-column gallery grid in portfolio-popup-1 (Server Deployment section) */
@media only screen and (min-width: 768px) and (max-width: 1199px) {

  /* When gallery has 2 columns, scale labels appropriately */
  #portfolio-popup-1 .architecture-diagrams-gallery .image-stack-label {
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    padding: 0.55rem 1.1rem;
    border-radius: 0.8rem;
    min-height: auto;
    max-width: calc(100% - 1.6rem);
  }

  #portfolio-popup-1 .architecture-diagrams-gallery .image-stack-label__text {
    font-size: 1.1rem;
    line-height: 1.2;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {

  /* When gallery has 2 columns, scale labels appropriately */
  #portfolio-popup-1 .architecture-diagrams-gallery .image-stack-label {
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    padding: 0.6rem 1.2rem;
    border-radius: 0.85rem;
    min-height: auto;
    max-width: calc(100% - 1.8rem);
  }

  #portfolio-popup-1 .architecture-diagrams-gallery .image-stack-label__text {
    font-size: 1.25rem;
    line-height: 1.2;
  }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {

  /* When gallery has 2 columns, scale labels appropriately */
  #portfolio-popup-1 .architecture-diagrams-gallery .image-stack-label {
    bottom: 1.4rem;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    padding: 0.65rem 1.3rem;
    border-radius: 0.9rem;
    min-height: auto;
    max-width: calc(100% - 2rem);
  }

  #portfolio-popup-1 .architecture-diagrams-gallery .image-stack-label__text {
    font-size: 1.35rem;
    line-height: 1.2;
  }
}

@media only screen and (min-width: 1600px) {

  /* When gallery has 2 columns, scale labels appropriately */
  #portfolio-popup-1 .architecture-diagrams-gallery .image-stack-label {
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    padding: 0.7rem 1.4rem;
    border-radius: 0.95rem;
    min-height: auto;
    max-width: calc(100% - 2.2rem);
  }

  #portfolio-popup-1 .architecture-diagrams-gallery .image-stack-label__text {
    font-size: 1.5rem;
    line-height: 1.2;
  }
}

/* Mobile portrait: 1 column for architecture diagrams (Interior & Maritime) */
@media only screen and (max-width: 767px) and (orientation: portrait) {

  #portfolio-popup-1 .architecture-diagrams-gallery,
  #portfolio-popup-2 .architecture-diagrams-gallery {
    grid-template-columns: 1fr !important;
  }

  #portfolio-popup-1 .architecture-diagrams-gallery .image-stack-label,
  #portfolio-popup-2 .architecture-diagrams-gallery .image-stack-label {
    bottom: 0.8rem;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    padding: 0.5rem 1rem;
    border-radius: 0.8rem;
    min-height: auto;
    max-width: calc(100% - 1.6rem);
  }

  #portfolio-popup-1 .architecture-diagrams-gallery .image-stack-label__text,
  #portfolio-popup-2 .architecture-diagrams-gallery .image-stack-label__text {
    font-size: 1rem;
    line-height: 1.2;
  }
}

/* Mobile landscape: 2 columns - scale labels for smaller items (Interior & Maritime) */
@media only screen and (max-width: 767px) and (orientation: landscape) {

  #portfolio-popup-1 .architecture-diagrams-gallery .image-stack-label,
  #portfolio-popup-2 .architecture-diagrams-gallery .image-stack-label {
    bottom: 0.6rem;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    -webkit-transform: translateX(-50%) translateZ(0);
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    min-height: auto;
    max-width: calc(100% - 1.2rem);
  }

  #portfolio-popup-1 .architecture-diagrams-gallery .image-stack-label__text,
  #portfolio-popup-2 .architecture-diagrams-gallery .image-stack-label__text {
    font-size: 1.1rem;
    line-height: 1.2;
  }
}

.project__feedback {
  position: relative;
  margin-bottom: 5.9rem;
}

@media only screen and (min-width: 768px) {
  .project__feedback {
    margin-bottom: 8rem;
  }
}

@media only screen and (min-width: 992px) {
  .project__feedback {
    margin-bottom: 8.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .project__feedback {
    margin-bottom: 8.6rem;
  }
}

@media only screen and (min-width: 1400px) {
  .project__feedback {
    margin-bottom: 9.5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .project__feedback {
    margin-bottom: 10.7rem;
  }
}

.fauthor__avatar {
  width: 60px;
  min-width: 60px;
  height: 60px;
  margin-right: 2rem;
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .fauthor__avatar {
    width: 120px;
    min-width: 120px;
    height: 120px;
    margin-right: 3rem;
  }
}

.fauthor__name {
  color: var(--t-bright);
}

.fauthor__position {
  margin-top: 0.6rem;
}

@media only screen and (min-width: 1600px) {
  .fauthor__position {
    margin-top: 0.8rem;
  }
}

.fauthor__rating {
  margin-top: 1.3rem;
}

.fauthor__rating i {
  display: block;
  margin-right: 1rem;
  font-size: 1.6rem;
  color: var(--t-bright);
}

.fauthor__rating i:last-of-type {
  margin-right: 0;
}

@media only screen and (min-width: 1400px) {
  .fauthor__rating i {
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .fauthor__rating {
    margin-bottom: 0.4rem;
  }

  .fauthor__rating i {
    font-size: 2rem;
  }
}

.feedback__descr {
  margin-top: 2.8rem;
}

@media only screen and (min-width: 768px) {
  .feedback__descr {
    margin-top: 3.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .feedback__descr {
    margin-top: 3.6rem;
  }
}

@media only screen and (min-width: 1400px) {
  .feedback__descr {
    margin-top: 3.4rem;
  }
}

.project__divider {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: var(--stroke-elements);
}

.mfp-wrap {
  position: fixed !important;
  scrollbar-width: thin;
  scrollbar-color: var(--base-tint) transparent;
}

/* Webkit scrollbar styling for mfp-wrap */
.mfp-wrap::-webkit-scrollbar {
  width: 6px;
}

.mfp-wrap::-webkit-scrollbar-track {
  background-color: var(--base-shade);
}

.mfp-wrap::-webkit-scrollbar-thumb {
  background-color: var(--base-tint);
  border-radius: var(--_radius-s);
}

.mfp-fade {
  overflow: hidden;
}

.mfp-fade .mfp-container {
  position: fixed;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--base-tint) transparent;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.mfp-bg {
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.mfp-container {
  padding: 0;
}

/* Webkit scrollbar styling for popup containers */
.mfp-fade .mfp-container::-webkit-scrollbar {
  width: 6px;
}

.mfp-fade .mfp-container::-webkit-scrollbar-track {
  background-color: var(--base-shade);
}

.mfp-fade .mfp-container::-webkit-scrollbar-thumb {
  background-color: var(--base-tint);
  border-radius: var(--_radius-s);
}

.mfp-close-btn-in .mfp-close {
  width: 4rem;
  height: 4rem;
  -moz-border-radius: var(--_radius-s);
  border-radius: var(--_radius-s);
  border: 2px solid rgba(255, 255, 255, 0.7);
  right: 3rem;
  top: 3rem;
  opacity: 1;
  padding: 0;
  font: inherit;
  color: #ffffff;
  font-size: 1.8rem;
  line-height: 1;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.mfp-close-btn-in .mfp-close::before {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: "Phosphor";
  content: "\eddb";
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

.mfp-close-btn-in .mfp-close.permanent-dark {
  border: 2px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0.06);
  color: #ffffff;
}

.mfp-close-btn-in .mfp-close.permanent-light {
  border: 2px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0.06);
  color: #ffffff;
}

/* Hover effects - only on devices that support hover */
@media (hover: hover) {

  .mfp-close-btn-in .mfp-close:hover.permanent-dark,
  .mfp-close-btn-in .mfp-close:hover.permanent-light {
    background-color: rgba(220, 53, 69, 0.35);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    border-color: rgba(220, 53, 69, 0.7);
    box-shadow: 0 2px 14px rgba(220, 53, 69, 0.2);
    transform: scale(1.08);
  }
}

/* Active/click/tap: same as hover */
.mfp-close-btn-in .mfp-close:active.permanent-dark,
.mfp-close-btn-in .mfp-close:active.permanent-light {
  background-color: rgba(220, 53, 69, 0.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  border-color: rgba(220, 53, 69, 0.7);
  box-shadow: 0 2px 14px rgba(220, 53, 69, 0.2);
  transform: scale(1.08);
}

@media only screen and (min-width: 1400px) {
  .mfp-close-btn-in .mfp-close {
    width: 5rem;
    height: 5rem;
  }
}

/* Popup Share Button - same glass as bottom center buttons */
.popup-share-btn {
  position: absolute !important;
  width: 4rem;
  height: 4rem;
  -moz-border-radius: var(--_radius-s);
  border-radius: var(--_radius-s);
  border: 2px solid rgba(255, 255, 255, 0.7);
  right: 8rem;
  top: 3rem;
  opacity: 1;
  padding: 0;
  font: inherit;
  color: #ffffff;
  font-size: 1.8rem;
  line-height: 1;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background-color: rgba(0, 0, 0, 0.06);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  z-index: 1046;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.popup-share-btn i {
  font-size: 1.8rem;
  line-height: 1;
}

.popup-share-btn.permanent-dark,
.popup-share-btn.permanent-light {
  border: 2px solid rgba(255, 255, 255, 0.7);
  background-color: rgba(0, 0, 0, 0.06);
  color: #ffffff;
}

/* Hover effects - only on devices that support hover */
@media (hover: hover) {

  .popup-share-btn:hover.permanent-dark,
  .popup-share-btn:hover.permanent-light {
    background-color: rgba(255, 255, 255, 0.12);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
    transform: scale(1.08);
  }
}

/* Active/click/tap: same as hover */
.popup-share-btn:active.permanent-dark,
.popup-share-btn:active.permanent-light {
  background-color: rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
  transform: scale(1.08);
}

@media only screen and (min-width: 1400px) {
  .popup-share-btn {
    width: 5rem;
    height: 5rem;
    right: 9rem;
    top: 3rem;
  }

  .popup-share-btn i {
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .popup-share-btn {
    right: 8rem;
    top: 3rem;
  }
}

@media only screen and (max-width: 1199px) {
  [id^="portfolio-popup-"] .popup-share-btn {
    position: absolute !important;
    width: 3.75rem !important;
    height: 3.75rem !important;
    right: 5.75rem !important;
    top: 1.5rem !important;
    left: auto !important;
    bottom: auto !important;
    -moz-border-radius: var(--_radius-s) !important;
    border-radius: var(--_radius-s) !important;
  }

  [id^="portfolio-popup-"] .popup-share-btn i {
    font-size: 1.7rem !important;
    font-weight: 600 !important;
  }
}

/* Ensure landscape mode overrides general mobile styles */
@media only screen and (max-width: 1199px) and (orientation: landscape) {
  [id^="portfolio-popup-"] .popup-share-btn {
    position: absolute !important;
    width: 3.75rem !important;
    height: 3.75rem !important;
    right: 5.75rem !important;
    top: 1.5rem !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    -moz-border-radius: var(--_radius-s) !important;
    border-radius: var(--_radius-s) !important;
  }

  [id^="portfolio-popup-"] .popup-share-btn i {
    font-size: 1.7rem !important;
    font-weight: 600 !important;
  }
}

/* Mobile Portrait: Share button size fix */
@media only screen and (max-width: 767px) and (orientation: portrait) {
  [id^="portfolio-popup-"] .popup-share-btn {
    position: absolute !important;
    width: 3.75rem !important;
    height: 3.75rem !important;
    right: 5.75rem !important;
    top: 1.5rem !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    -moz-border-radius: var(--_radius-s) !important;
    border-radius: var(--_radius-s) !important;
  }

  [id^="portfolio-popup-"] .popup-share-btn i {
    font-size: 1.7rem !important;
    font-weight: 600 !important;
  }
}

/* Mobile Landscape: Share button size fix - ensure it's horizontally aligned with close button */
@media only screen and (max-width: 767px) and (orientation: landscape) {
  [id^="portfolio-popup-"] .popup-share-btn {
    position: absolute !important;
    width: 3.75rem !important;
    height: 3.75rem !important;
    right: 5.75rem !important;
    top: 1.5rem !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -moz-border-radius: var(--_radius-s) !important;
    border-radius: var(--_radius-s) !important;
  }

  [id^="portfolio-popup-"] .popup-share-btn i {
    font-size: 1.7rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    display: block !important;
  }
}

/* Very Small Devices (iPhone SE) Landscape: Share button size fix */
@media only screen and (max-width: 479px) and (orientation: landscape) {
  [id^="portfolio-popup-"] .popup-share-btn {
    position: absolute !important;
    width: 3.75rem !important;
    height: 3.75rem !important;
    right: 5.75rem !important;
    top: 1.5rem !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    -moz-border-radius: var(--_radius-s) !important;
    border-radius: var(--_radius-s) !important;
  }

  [id^="portfolio-popup-"] .popup-share-btn i {
    font-size: 1.7rem !important;
    font-weight: 600 !important;
  }
}

/* Very Small Devices (iPhone SE) Portrait: Share button size fix */
@media only screen and (max-width: 479px) and (orientation: portrait) {
  [id^="portfolio-popup-"] .popup-share-btn {
    width: 3.75rem !important;
    height: 3.75rem !important;
    right: 5.75rem !important;
    top: 1.5rem !important;
    -moz-border-radius: var(--_radius-s) !important;
    border-radius: var(--_radius-s) !important;
  }

  [id^="portfolio-popup-"] .popup-share-btn i {
    font-size: 1.7rem !important;
    font-weight: 600 !important;
  }
}

/* Tablet Landscape: Share button positioning */
@media only screen and (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  [id^="portfolio-popup-"] .popup-share-btn {
    width: 4rem !important;
    height: 4rem !important;
    right: 8rem !important;
    top: 3rem !important;
    -moz-border-radius: 0.75rem !important;
    border-radius: 0.75rem !important;
  }

  [id^="portfolio-popup-"] .popup-share-btn i {
    font-size: 1.8rem !important;
  }
}

/* Tablet Portrait: Share button positioning */
@media only screen and (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  [id^="portfolio-popup-"] .popup-share-btn {
    width: 4rem !important;
    height: 4rem !important;
    right: 8rem !important;
    top: 3rem !important;
    -moz-border-radius: 0.75rem !important;
    border-radius: 0.75rem !important;
  }

  [id^="portfolio-popup-"] .popup-share-btn i {
    font-size: 1.8rem !important;
  }
}

/* Share button notification toast - frosted glass, above scroll indicator */
.popup-share-toast {
  position: fixed;
  bottom: 10rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  padding: 1.2rem 2.4rem;
  border-radius: var(--_radius-s);
  font-size: 1.6rem;
  font-weight: 500;
  z-index: 10001;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  max-width: calc(100% - 4rem);
  text-align: center;
  white-space: nowrap;
}

[color-scheme="light"] .popup-share-toast,
[data-theme="light"] .popup-share-toast,
.light-theme .popup-share-toast {
  background-color: rgba(255, 255, 255, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.45);
  color: rgba(0, 0, 0, 0.85);
}

[color-scheme="dark"] .popup-share-toast,
[data-theme="dark"] .popup-share-toast,
.dark-theme .popup-share-toast {
  background-color: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.95);
}

.popup-share-toast.show {
  opacity: 1;
}

/* Mobile portrait: above scroll indicator */
@media only screen and (max-width: 767px) and (orientation: portrait) {
  .popup-share-toast {
    bottom: 8rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    padding: 0.8rem 1.4rem;
    font-size: 1.3rem;
    max-width: calc(100% - 2rem);
    white-space: nowrap;
  }
}

/* Mobile landscape: above scroll indicator */
@media only screen and (max-width: 767px) and (orientation: landscape) {
  .popup-share-toast {
    bottom: 7rem;
    padding: 0.8rem 1.4rem;
    font-size: 1.3rem;
    max-width: calc(100% - 2rem);
  }
}

@media only screen and (min-width: 768px) {
  .popup-share-toast {
    bottom: 10.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .popup-share-toast {
    bottom: 11rem;
  }
}

/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 1;
}

/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  -webkit-transform: translateY(3rem);
  -moz-transform: translateY(3rem);
  -ms-transform: translateY(3rem);
  transform: translateY(3rem);
  -webkit-transition: all 0.3s var(--_animbezier);
  -moz-transition: all 0.3s var(--_animbezier);
  transition: all 0.3s var(--_animbezier);
}

/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
  -webkit-transform: translateY(3rem);
  -moz-transform: translateY(3rem);
  -ms-transform: translateY(3rem);
  transform: translateY(3rem);
}

/* ------------------------------------------------*/
/* Blocks Popup Dialogs End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features Marquee Start */
/* ------------------------------------------------*/
.items {
  max-width: 100%;
  overflow: hidden;
}

.items--gsap {
  color: #fff;
}

.items--gsap .items__container {
  translate: -moz-calc(-100% + 100vw) !important;
  translate: calc(-100% + 100vw) !important;
}

.items__caption {
  max-width: 50vw;
  padding: 0 1.5rem;
}

.items__container {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
}

.items .item {
  margin-right: 2rem;
}

@media only screen and (min-width: 768px) {
  .items .item {
    margin-right: 3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .items .item {
    margin-right: 5rem;
  }
}

.item {
  position: relative;
  width: 45vw;
  height: auto;
  background-color: var(--base);
  -moz-border-radius: 20px;
  border-radius: 20px;
  overflow: hidden;
  color: var(--t-bright);
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  -webkit-animation: animateZ 1s infinite;
  -moz-animation: animateZ 1s infinite;
  animation: animateZ 1s infinite;
}

.item.item-regular {
  width: auto;
  -moz-border-radius: 0;
  border-radius: 0;
  gap: 0;
  background-color: transparent;
  color: var(--t-bright);
  -webkit-animation: animateZ 1s infinite;
  -moz-animation: animateZ 1s infinite;
  animation: animateZ 1s infinite;
}

.item.icon {
  border: 1px solid var(--stroke-elements);
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.item.icon svg,
.item.icon img {
  display: block;
  height: 70px;
  width: auto;
}

.item.image {
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size: cover;
  background-size: cover;
}

.item.image img {
  display: block;
  width: 100%;
  height: auto;
}

@media only screen and (min-width: 768px) {

  .item.icon svg,
  .item.icon img {
    height: 120px;
  }
}

@media only screen and (min-width: 992px) {
  .item {
    width: 30vw;
  }
}

@media only screen and (min-width: 1200px) {
  .item {
    width: 25vw;
  }
}

@media only screen and (min-width: 1600px) {
  .item {
    width: 20vw;
  }

  .item.icon svg,
  .item.icon img {
    height: 140px;
  }
}

.item__text {
  margin-right: 2rem;
}

.item__text.text-with-gliph {
  margin-right: 0;
}

.item__text.text-with-gliph::after {
  content: "/";
  display: inline;
  padding-left: 2rem;
}

@media only screen and (min-width: 768px) {
  .item__text {
    margin-right: 3rem;
  }

  .item__text.text-with-gliph::after {
    padding-left: 3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .item__text {
    margin-right: 5rem;
  }

  .item__text.text-with-gliph::after {
    padding-left: 5rem;
  }
}

.item__image {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
}

@media only screen and (min-width: 768px) {
  .item__image {
    width: 7rem;
    height: 7rem;
  }
}

@media only screen and (min-width: 1400px) {
  .item__image {
    width: 8rem;
    height: 8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .item__image {
    width: 11rem;
    height: 11rem;
  }
}

.item__image img,
.item__image video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.item__text {
  font: normal 300 4.6rem var(--_font-accent);
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .item__text {
    font-size: 8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .item__text {
    font-size: 9rem;
  }
}

@media only screen and (min-width: 1400px) {
  .item__text {
    font-size: 10rem;
  }
}

@media only screen and (min-width: 1600px) {
  .item__text {
    font-size: 14rem;
  }
}

@-webkit-keyframes toLeft {
  to {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@-moz-keyframes toLeft {
  to {
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@keyframes toLeft {
  to {
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@-webkit-keyframes toRight {
  to {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@-moz-keyframes toRight {
  to {
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes toRight {
  to {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}

@-webkit-keyframes animateZ {
  to {
    -webkit-transform: translateZ(1px);
    transform: translateZ(1px);
  }
}

@-moz-keyframes animateZ {
  to {
    -moz-transform: translateZ(1px);
    transform: translateZ(1px);
  }
}

@keyframes animateZ {
  to {
    -webkit-transform: translateZ(1px);
    -moz-transform: translateZ(1px);
    transform: translateZ(1px);
  }
}

/* ------------------------------------------------*/
/* Features Marquee End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features About Start */
/* ------------------------------------------------*/
.about-descr,
.about-info {
  padding-top: 2.8rem;
}

.about-descr.pre-grid,
.about-info.pre-grid {
  padding-top: 3.7rem;
}

.about-descr.pre-title,
.about-info.pre-title {
  padding-top: 2.5rem;
}

@media only screen and (min-width: 768px) {

  .about-descr,
  .about-info {
    padding-top: 0;
  }

  .about-descr.pre-title,
  .about-info.pre-title {
    padding-top: 0rem;
  }

  .about-descr.pre-grid,
  .about-info.pre-grid {
    padding-top: 4.7rem;
  }
}

@media only screen and (min-width: 768px) {

  .about-descr.pre-grid,
  .about-info.pre-grid {
    padding-top: 5.4rem;
  }
}

@media only screen and (min-width: 1200px) {

  .about-descr.pre-grid,
  .about-info.pre-grid {
    padding-top: 5.2rem;
  }
}

@media only screen and (min-width: 1600px) {

  .about-descr.pre-grid,
  .about-info.pre-grid {
    padding-top: 5.4rem;
  }
}

.about-descr__text {
  margin-bottom: 2.1rem;
}

.about-descr__text:last-of-type {
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .about-descr__text {
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .about-descr__text {
    margin-bottom: 2.8rem;
  }
}

@media only screen and (min-width: 1400px) {
  .about-descr__text {
    margin-bottom: 2.6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .about-descr__text {
    margin-bottom: 3.2rem;
  }
}

.about-descr__btnholder {
  margin-top: 3.2rem;
}

@media only screen and (min-width: 768px) {
  .about-descr__btnholder {
    margin-top: 4.1rem;
  }
}

@media only screen and (min-width: 1400px) {
  .about-descr__btnholder {
    margin-top: 4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .about-descr__btnholder {
    margin-top: 4.7rem;
  }
}

.about-info__item {
  margin-bottom: 2rem;
}

.about-info__item:last-of-type {
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .about-info__item {
    margin-bottom: 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .about-info__item {
    margin-bottom: 2.8rem;
  }
}

@media only screen and (min-width: 1400px) {
  .about-info__item {
    margin-bottom: 2.6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .about-info__item {
    margin-bottom: 3.2rem;
  }
}

/* ------------------------------------------------*/
/* Features About End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features Gallery Start */
/* ------------------------------------------------*/
.inner__gallery {
  position: relative;
}

.gallery__btn {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
  padding: 0 1rem;
  margin-top: 2rem;
}

@media only screen and (min-width: 768px) {
  .gallery__btn {
    position: absolute;
    right: 0;
    bottom: 0;
    width: auto;
    padding: 0 1.5rem;
    margin-top: 0;
  }
}

@media only screen and (min-width: 1600px) {
  .gallery__btn {
    padding: 0 2.5rem;
  }
}

.gallery__item {
  position: relative;
  cursor: pointer;
}

.gallery__link {
  display: block;
  position: relative;
  overflow: hidden;
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
}

.gallery__link .picture {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 112%;
  height: 112%;
  background-repeat: no-repeat;
  background-position: center center;
  -moz-background-size: cover;
  background-size: cover;
  -webkit-transition: background-position 0.5s;
  -moz-transition: background-position 0.5s;
  transition: background-position 0.5s;
  -webkit-transition: opacity 0.5s ease-in-out, width 0.3s var(--_animbezier), height 0.3s var(--_animbezier), -webkit-transform 0.7s ease-in-out;
  transition: opacity 0.5s ease-in-out, width 0.3s var(--_animbezier), height 0.3s var(--_animbezier), -webkit-transform 0.7s ease-in-out;
  -moz-transition: transform 0.7s ease-in-out, opacity 0.5s ease-in-out, width 0.3s var(--_animbezier), height 0.3s var(--_animbezier), -moz-transform 0.7s ease-in-out;
  transition: transform 0.7s ease-in-out, opacity 0.5s ease-in-out, width 0.3s var(--_animbezier), height 0.3s var(--_animbezier);
  transition: transform 0.7s ease-in-out, opacity 0.5s ease-in-out, width 0.3s var(--_animbezier), height 0.3s var(--_animbezier), -webkit-transform 0.7s ease-in-out, -moz-transform 0.7s ease-in-out;
}

@media only screen and (min-width: 1200px) {
  .gallery__link {
    -webkit-transform: scale3d(1, 1, 1);
    -moz-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transition: -webkit-transform 0.3s var(--_animbezier);
    transition: -webkit-transform 0.3s var(--_animbezier);
    -moz-transition: transform 0.3s var(--_animbezier), -moz-transform 0.3s var(--_animbezier);
    transition: transform 0.3s var(--_animbezier);
    transition: transform 0.3s var(--_animbezier), -webkit-transform 0.3s var(--_animbezier), -moz-transform 0.3s var(--_animbezier);
  }

  .gallery__link:hover .picture,
  .gallery__link:active .picture {
    width: 100%;
    height: 100%;
  }
}

.gallery__image {
  opacity: 0;
}

.gallery__descr {
  position: absolute;
  bottom: 0;
  left: 0.75rem;
  width: -moz-calc(100% - 1.5rem);
  width: calc(100% - 1.5rem);
  padding: 1.875rem;
}

.gallery__descr h5,
.gallery__descr p {
  display: none;
}

@media only screen and (min-width: 1200px) {
  .gallery__descr {
    position: absolute;
    bottom: 0;
    left: 1.25rem;
    width: -moz-calc(100% - 2.5rem);
    width: calc(100% - 2.5rem);
  }
}

/* Modern Image Viewer */
.image-viewer {
  --viewer-dvh: 1vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--viewer-dvh, 1vh) * 100);
  min-height: calc(var(--viewer-dvh, 1vh) * 100);
  z-index: 10000;
  display: none;
  opacity: 0;
  overflow: hidden;
  touch-action: none;
  -webkit-overflow-scrolling: none;
}

.image-viewer[aria-hidden="false"] {
  display: flex;
}

.image-viewer.opening {
  animation: viewerFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.image-viewer.closing {
  animation: viewerFadeOut 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes viewerFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes viewerFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.image-viewer__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-viewer.opening .image-viewer__overlay {
  opacity: 1;
}

.image-viewer.closing .image-viewer__overlay {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-viewer__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(10px) brightness(0.9);
  -webkit-filter: blur(10px) brightness(0.9);
  transform: scale(1.1);
  opacity: 1;
  transition: opacity 0.6s ease, background-image 0.6s ease;
  z-index: 0;
  pointer-events: none;
  will-change: background-image, opacity;
}

.image-viewer__container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  overflow: visible;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s;
}

.image-viewer.opening .image-viewer__container {
  opacity: 1;
  transform: scale(1);
}

.image-viewer.closing .image-viewer__container {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Image Viewer Main Content */
.image-viewer__main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(var(--viewer-dvh, 1vh) * 100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: visible;
  cursor: default;
  z-index: 1;
  touch-action: pan-x pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.image-viewer__main.dragging {
  cursor: grabbing;
}

.image-viewer__slide {
  position: relative;
  width: 100vw;
  height: calc(var(--viewer-dvh, 1vh) * 100);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  z-index: 1;
  touch-action: pan-x pan-y;
  -webkit-touch-callout: none;
}

.image-viewer__image {
  max-width: 100vw;
  max-height: calc(var(--viewer-dvh, 1vh) * 100);
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.7);
  transform-origin: center center;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s,
    visibility 0s 0.7s;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: pan-x pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.image-viewer__image.zoomed {
  max-width: none;
  max-height: none;
}

.image-viewer__image.loaded {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s,
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s,
    visibility 0s;
}

.image-viewer.closing .image-viewer__image {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s 0.4s;
}

.image-viewer__image.zoomed {
  cursor: grab;
  will-change: transform;
  /* Spring-like transition for smooth zoom in/out with bounce effect */
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.image-viewer__image.zoomed.dragging {
  cursor: grabbing;
  transition: none;
}

/* Ensure SVG images render crisply when zoomed */
/* SVG images now use width/height changes instead of transform scale to prevent rasterization */
.image-viewer__image.is-svg {
  /* Use smooth rendering for SVG to maintain vector quality */
  image-rendering: auto;
  /* Ensure SVG renders at full quality */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.image-viewer__image.is-svg.zoomed {
  /* Use smooth rendering for SVG to maintain vector quality */
  image-rendering: auto;
  /* Prevent subpixel rendering issues that can cause blur */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Ensure the SVG maintains its vector nature (no transform scale, using width/height instead) */
  transform-origin: center center;
  /* Disable smooth zoom transitions for SVG images - instant zoom only */
  transition: none !important;
}

.image-viewer__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.image-viewer__loader.active {
  display: block;
}

.image-viewer__spinner {
  width: 4rem;
  height: 4rem;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Image Viewer Controls - same frosted glass as popup top/bottom buttons */
.image-viewer__zoom {
  position: absolute;
  top: 2rem;
  right: 7rem;
  width: 4.4rem;
  height: 4.4rem;
  background-color: rgba(0, 0, 0, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--_radius-s);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  transition: all 0.2s ease;
  outline: none;
  opacity: 0;
  transform: scale(0.6) translateY(-20px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
    background-color 0.2s ease,
    scale 0.2s ease;
}

.image-viewer.opening .image-viewer__zoom {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.image-viewer.closing .image-viewer__zoom {
  opacity: 0;
  transform: scale(0.6) translateY(-20px);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-viewer__zoom:hover {
  background-color: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
  transform: scale(1.05);
}

.image-viewer__zoom:active {
  background-color: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
  transform: scale(1.05);
}

.image-viewer__zoom-in,
.image-viewer__zoom-out {
  position: absolute;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.image-viewer__zoom-out {
  opacity: 0;
  transform: scale(0);
}

.image-viewer.zoomed .image-viewer__zoom-in {
  opacity: 0;
  transform: scale(0);
}

.image-viewer.zoomed .image-viewer__zoom-out {
  opacity: 1;
  transform: scale(1);
}

.image-viewer__zoom-slider-container {
  position: absolute;
  top: 2.5rem;
  right: calc(7rem + 4.4rem + 0.8rem);
  width: 20rem;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: rgba(0, 0, 0, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--_radius-s);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  z-index: 10002;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.image-viewer__zoom-slider-container.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: all;
}

.image-viewer__zoom-slider {
  flex: 1 1 auto;
  width: 100%;
  height: 0.25rem;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.2rem;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  margin: 0;
  /* Increase touch area without affecting visual size */
  padding: 1rem 0;
  margin: -1rem 0;
  background-clip: content-box;
}

.image-viewer__zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.6rem;
  height: 1.6rem;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
  /* Adjust for negative margin on track */
  margin-top: -0.675rem;
}

.image-viewer__zoom-slider::-webkit-slider-runnable-track {
  height: 0.25rem;
  border-radius: 0.2rem;
  background: rgba(255, 255, 255, 0.2);
}

.image-viewer__zoom-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.image-viewer__zoom-slider::-moz-range-thumb {
  width: 1.6rem;
  height: 1.6rem;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}

.image-viewer__zoom-slider::-moz-range-track {
  height: 0.25rem;
  border-radius: 0.2rem;
  background: rgba(255, 255, 255, 0.2);
  border: none;
}

.image-viewer__zoom-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
}

.image-viewer__zoom-value {
  min-width: 4.8rem;
  text-align: right;
  color: #fff;
  font-size: 1.2rem;
  margin-top: 0;
  font-weight: 500;
}

@media only screen and (max-width: 767px) {
  .image-viewer__zoom-slider-container {
    top: 1.5rem;
    right: calc(5rem + 3.6rem + 0.6rem);
    width: min(16rem, calc(100vw - 10.5rem));
    padding: 0.6rem 0.8rem;
    gap: 0.8rem;
  }

  .image-viewer__zoom-value {
    font-size: 1.05rem;
  }
}

/* Enhanced touch responsiveness for touch devices */
@media (hover: none) and (pointer: coarse) {
  .image-viewer__zoom-slider {
    padding: 1.5rem 0;
    margin: -1.5rem 0;
    touch-action: pan-y;
  }

  .image-viewer__zoom-slider::-webkit-slider-thumb {
    width: 2.2rem;
    height: 2.2rem;
    margin-top: -0.975rem;
    /* Center on 0.25rem track */
  }

  .image-viewer__zoom-slider::-moz-range-thumb {
    width: 2.2rem;
    height: 2.2rem;
  }
}

.image-viewer__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 4.4rem;
  height: 4.4rem;
  background-color: rgba(0, 0, 0, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--_radius-s);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  transition: all 0.2s ease;
  outline: none;
  opacity: 0;
  transform: scale(0.6) translateY(-20px);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s,
    background-color 0.2s ease,
    scale 0.2s ease;
}

.image-viewer.opening .image-viewer__close {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.image-viewer.closing .image-viewer__close {
  opacity: 0;
  transform: scale(0.6) translateY(-20px);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-viewer__close:hover {
  background-color: rgba(220, 53, 69, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: rgba(220, 53, 69, 0.7);
  box-shadow: 0 2px 14px rgba(220, 53, 69, 0.2);
  transform: scale(1.05);
}

.image-viewer__close:active {
  background-color: rgba(220, 53, 69, 0.4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: rgba(220, 53, 69, 0.7);
  box-shadow: 0 2px 14px rgba(220, 53, 69, 0.2);
  transform: scale(1.05);
}

.image-viewer__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(0.8);
  width: 4.4rem;
  height: 4.4rem;
  background-color: rgba(0, 0, 0, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--_radius-s);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
  outline: none;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-50%) scale(0.6);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.25s,
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s,
    background-color 0.2s ease,
    scale 0.2s ease;
}

.image-viewer.opening .image-viewer__nav {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.image-viewer.closing .image-viewer__nav {
  opacity: 0;
  transform: translateY(-50%) scale(0.6);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-viewer__nav--prev {
  left: 2rem;
}

.image-viewer__nav--next {
  right: 2rem;
}

.image-viewer__nav:hover {
  background-color: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
}

.image-viewer.opening .image-viewer__nav:hover,
.image-viewer:not(.closing):not(.opening) .image-viewer__nav:hover {
  transform: translateY(-50%) scale(1.05);
}

.image-viewer__nav:active {
  background-color: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
  transform: translateY(-50%) scale(1.05);
}

.image-viewer__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Arrow slide animation on click/tap (same as site scroll-up button) */
.image-viewer__nav--prev i::before,
.image-viewer__nav--next i::before {
  display: inline-block;
  transition: none;
}

/* Arrow animation only on tap/click (class added by JS), not on hover or :active */
.image-viewer__nav--prev.image-viewer__nav--arrow-animate i::before {
  -webkit-animation: 0.4s ease-in-out 0s 1 both slideLeft;
  -moz-animation: 0.4s ease-in-out 0s 1 both slideLeft;
  animation: 0.4s ease-in-out 0s 1 both slideLeft;
}

.image-viewer__nav--next.image-viewer__nav--arrow-animate i::before {
  -webkit-animation: 0.4s ease-in-out 0s 1 both slideRight;
  -moz-animation: 0.4s ease-in-out 0s 1 both slideRight;
  animation: 0.4s ease-in-out 0s 1 both slideRight;
}

.image-viewer__counter {
  position: absolute;
  top: 2rem;
  left: 2rem;
  padding: 0 1.4rem;
  border-radius: var(--_radius-s);
  background-color: rgba(0, 0, 0, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  font: normal 400 1.8rem/4.4rem var(--_font-default);
  font-variant-numeric: lining-nums;
  color: #ffffff;
  z-index: 10002;
  opacity: 0;
  transform: translateY(-30px) scale(0.8);
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.25s,
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
}

.image-viewer.opening .image-viewer__counter {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.image-viewer.closing .image-viewer__counter {
  opacity: 0;
  transform: translateY(-30px) scale(0.8);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media only screen and (max-width: 767px) {

  .image-viewer__zoom,
  .image-viewer__close,
  .image-viewer__nav,
  .image-viewer__counter {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .image-viewer__zoom {
    top: 1rem;
    right: 5rem;
    width: 3.6rem;
    height: 3.6rem;
    font-size: 1.6rem;
  }

  .image-viewer__close {
    top: 1rem;
    right: 1rem;
    width: 3.6rem;
    height: 3.6rem;
    font-size: 1.6rem;
  }

  .image-viewer__nav {
    width: 3.6rem;
    height: 3.6rem;
    font-size: 1.6rem;
  }

  .image-viewer__nav--prev {
    left: 1rem;
  }

  .image-viewer__nav--next {
    right: 1rem;
  }

  .image-viewer__counter {
    top: 1rem;
    left: 1rem;
    font-size: 1.6rem;
    line-height: 3.6rem;
    padding: 0 1rem;
  }
}

/* Image Viewer Thumbnails - same frosted glass as popup buttons, stronger in viewer */
.image-viewer__thumbnails {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(50px) scale(0.9);
  width: min(90vw, 720px);
  padding: 1rem 1.8rem;
  border-radius: 1.4rem;
  background-color: rgba(0, 0, 0, 0.14);
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: visible;
  opacity: 0;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
  contain: layout style paint;
  will-change: scroll-position;
  z-index: 10002;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s,
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.image-viewer.opening .image-viewer__thumbnails {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.image-viewer.closing .image-viewer__thumbnails {
  opacity: 0;
  transform: translateX(-50%) translateY(50px) scale(0.9);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.image-viewer__thumbnails::before,
.image-viewer__thumbnails::after {
  content: "";
  position: sticky;
  top: 0;
  width: 3rem;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.image-viewer__thumbnails::before {
  left: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

.image-viewer__thumbnails::after {
  right: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

.image-viewer__thumbnails:hover {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.15);
}

.image-viewer__thumbnails-list {
  display: flex;
  gap: 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  min-height: 5.4rem;
}

.image-viewer__thumbnail-item {
  --thumb-size: 74px;
  position: relative;
  flex: 0 0 auto;
  width: var(--thumb-size);
  height: calc(var(--thumb-size) * 0.68);
  cursor: pointer;
  border-radius: 0.9rem;
  overflow: hidden;
  opacity: 0.8;
  transform: scale(0.94);
  transform-origin: center;
  transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.45);
  z-index: 0;
}

.image-viewer__thumbnail-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 3px solid transparent;
  box-shadow: 0 0 0 rgba(132, 196, 255, 0);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  pointer-events: none;
}

.image-viewer__thumbnail-item:hover,
.image-viewer__thumbnail-item:focus-visible {
  opacity: 1;
  transform: scale(0.99);
}

.image-viewer__thumbnail-item:focus-visible {
  outline: none;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.35);
}

.image-viewer__thumbnail-item.active {
  opacity: 1;
  transform: scale(1.08);
  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.65),
    0 0 18px rgba(255, 255, 255, 0.7),
    0 0 36px rgba(255, 255, 255, 0.45);
  z-index: 2;
}

.image-viewer__thumbnail-item.active:not(.is-entering) {
  animation: viewerThumbPop 360ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.image-viewer__thumbnail-item.active::after {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 18px rgba(255, 255, 255, 0.85), 0 0 36px rgba(255, 255, 255, 0.5);
}

.image-viewer__thumbnail-item.is-entering {
  animation: viewerThumbIn 420ms cubic-bezier(0.25, 0.8, 0.45, 1) both;
  animation-delay: var(--thumb-delay, 0ms);
}

.image-viewer__thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  filter: saturate(0.85) brightness(0.92);
  transition: filter 0.4s ease, transform 0.4s ease;
}

.image-viewer__thumbnail-item:hover .image-viewer__thumbnail-img,
.image-viewer__thumbnail-item:focus-visible .image-viewer__thumbnail-img {
  filter: saturate(1.15) brightness(1.05);
}

.image-viewer__thumbnail-item.active .image-viewer__thumbnail-img {
  filter: saturate(1.25) brightness(1.08);
}

.image-viewer__thumbnails::-webkit-scrollbar {
  height: 4px;
}

.image-viewer__thumbnails::-webkit-scrollbar-track {
  background-color: transparent;
  border-radius: 2px;
}

.image-viewer__thumbnails::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 2px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color 0.2s ease;
}

.image-viewer__thumbnails::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.32);
}

@keyframes viewerThumbIn {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.85);
  }

  65% {
    opacity: 1;
    transform: translateY(-10px) scale(1.07);
  }

  100% {
    opacity: 1;
    transform: translateY(-6px) scale(1.03);
  }
}

@keyframes viewerThumbPop {
  0% {
    transform: scale(0.9);
  }

  60% {
    transform: scale(1.11);
  }

  100% {
    transform: scale(1.08);
  }
}

@media only screen and (max-width: 767px) {
  .image-viewer__main {
    padding: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .image-viewer__slide {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: calc(var(--viewer-dvh, 1vh) * 100);
    box-sizing: border-box;
    position: relative;
  }

  .image-viewer__image {
    max-width: 100vw;
    max-height: calc(var(--viewer-dvh, 1vh) * 100);
    width: auto;
    height: auto;
    margin: 0 auto;
    display: block;
    object-fit: contain;
    object-position: center;
    position: relative;
    transform-origin: center center;
  }

  .image-viewer__image:not(.zoomed) {
    transform: translate(0, 0) scale(1);
    margin: 0 auto;
  }

  .image-viewer__thumbnails {
    position: fixed;
    bottom: 1rem;
    width: min(92vw, 360px);
    left: 50%;
    transform: translateX(-50%);
    padding: 0.65rem 0.9rem;
    border-radius: 1.05rem;
    min-height: auto;
  }

  .image-viewer__thumbnails-list {
    gap: .7rem;
    min-height: 5.0rem;
  }

  .image-viewer__thumbnail-item {
    --thumb-size: 56px;
  }
}

/* Mobile Portrait - Ensure proper centering */
@media only screen and (max-width: 767px) and (orientation: portrait) {
  .image-viewer__main {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  .image-viewer__slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  .image-viewer__image {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    transform-origin: center center !important;
    position: relative !important;
  }

  .image-viewer__image:not(.zoomed):not(.sliding) {
    transform: translate(0, 0) scale(1) !important;
    margin: 0 auto !important;
  }
}

/* Mobile Landscape - Show sidebars like desktop */
@media only screen and (max-width: 767px) and (orientation: landscape) {
  .image-viewer {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  .image-viewer__main {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(var(--viewer-dvh, 1vh) * 100);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .image-viewer__slide {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Only apply strict centering when NOT zoomed - allow JS to control when zoomed */
  .image-viewer__image:not(.zoomed) {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    margin: 0 !important;
    display: block !important;
    transform-origin: center center !important;
    position: relative !important;
  }

  .image-viewer__image:not(.zoomed):not(.sliding) {
    transform: translate(0, 0) scale(1) !important;
    margin: 0 !important;
  }

  /* When zoomed, allow JavaScript to control dimensions and transforms */
  .image-viewer__image.zoomed {
    transform-origin: center center !important;
  }
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
  .image-viewer__overlay {
    background: rgba(0, 0, 0, 0.95);
  }

  .image-viewer__close,
  .image-viewer__nav,
  .image-viewer__counter,
  .image-viewer__thumbnails {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
}

/* ------------------------------------------------*/
/* Features Gallery End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features Achievements Start */
/* ------------------------------------------------*/
.numblock {
  padding: 1rem 1.25rem;
  margin-right: 1rem;
  border: 1px solid var(--stroke-elements);
  background-color: var(--base);
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
}

.numblock:last-of-type {
  margin-right: 0;
}

.numblock__number {
  display: block;
  font: normal 700 2.25rem/1 var(--_font-accent);
  font-variant-numeric: lining-nums;
  color: var(--t-bright);
}

.numblock__descr {
  font: normal 700 -moz-calc(var(--_size) * 0.938)/1.2 var(--_font-default);
  font: normal 700 calc(var(--_size) * 0.938)/1.2 var(--_font-default);
  color: var(--t-muted);
  margin-top: 0.375rem;
}

@media only screen and (min-width: 768px) {
  .numblock__descr {
    margin-top: 0;
    margin-left: 0.375rem;
  }
}

.achievements__item {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .achievements__item {
    width: 33.33333334%;
  }
}

.achievements__card {
  height: 100%;
  padding: 3rem;
  background-color: var(--base);
  border: 1px solid var(--stroke-elements);
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
  text-align: center;
}

@media only screen and (min-width: 1600px) {
  .achievements__card {
    padding: 5rem 3rem;
  }
}

.achievements__number {
  font: normal 300 4.6rem/0.8 var(--_font-accent);
  font-variant-numeric: lining-nums;
  color: var(--t-bright);
}

@media only screen and (min-width: 768px) {
  .achievements__number {
    font-size: 8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .achievements__number {
    font-size: 9rem;
  }
}

@media only screen and (min-width: 1400px) {
  .achievements__number {
    font-size: 10rem;
  }
}

@media only screen and (min-width: 1600px) {
  .achievements__number {
    font-size: 12rem;
  }
}

.achievements__descr {
  font: normal 400 1.8rem var(--_font-default);
  color: var(--t-bright);
  margin-top: 1.5rem;
}

@media only screen and (min-width: 768px) {
  .achievements__descr {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1400px) {
  .achievements__descr {
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .achievements__descr {
    font-size: 2.6rem;
  }
}

/* ------------------------------------------------*/
/* Features Achievements End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features Stacking Cards Start */
/* ------------------------------------------------*/
.stack-wrapper {
  position: relative;
  width: 100%;
}

.stack-offset {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 8rem;
  background-color: var(--base);
}

.stack-offset.solid-block {
  height: 8rem;
}

@media only screen and (min-width: 768px) {
  .stack-offset {
    height: 10rem;
  }

  .stack-offset.solid-block {
    height: 10rem;
  }
}

@media only screen and (min-width: 992px) {
  .stack-offset {
    height: 10rem;
  }

  .stack-offset.solid-block {
    height: 10rem;
  }
}

@media only screen and (min-width: 1200px) {
  .stack-offset.solid-block {
    height: 10rem;
  }
}

@media only screen and (min-width: 1400px) {
  .stack-offset {
    height: 11rem;
  }

  .stack-offset.solid-block {
    height: 11rem;
  }
}

@media only screen and (min-width: 1600px) {
  .stack-offset.solid-block {
    height: 11rem;
  }
}

.services-stack {
  width: 100%;
  position: relative;
  height: 65vh;
  min-height: 615px;
}

@media only screen and (min-width: 768px) {
  .services-stack {
    height: 500px;
    min-height: 0;
  }
}

@media only screen and (min-width: 1400px) {
  .services-stack {
    height: 600px;
  }
}

@media only screen and (min-width: 1600px) {
  .services-stack {
    height: 700px;
  }
}

.portfolio-stack {
  width: 100%;
  position: relative;
  height: 460px;
}

@media only screen and (min-width: 768px) {
  .portfolio-stack {
    height: 530px;
  }
}

@media only screen and (min-width: 1400px) {
  .portfolio-stack {
    height: 630px;
  }
}

@media only screen and (min-width: 1600px) {
  .portfolio-stack {
    height: 750px;
  }
}

.stack-item {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  padding-bottom: 2rem;
}

@media only screen and (min-width: 768px) {
  .stack-item {
    padding-bottom: 3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .stack-item {
    padding-bottom: 5rem;
  }
}

.services-stack__inner {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: var(--base);
  border: 1px solid var(--stroke-elements);
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
}

.services-stack__title {
  padding: 2.6rem 3rem 0 3rem;
  margin-bottom: 2.3rem;
}

@media only screen and (min-width: 768px) {
  .services-stack__title {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 60%;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1400px) {
  .services-stack__title {
    padding: 4rem 5rem 4.6rem 5rem;
  }
}

.services-stack__descr {
  padding: 0 3rem;
  margin-bottom: 2.3rem;
}

.services-stack__descr i {
  display: inline-block;
  font-size: 5.4rem;
  color: var(--t-bright);
  margin-bottom: 2.3rem;
  margin-left: -0.2rem;
}

@media only screen and (min-width: 768px) {
  .services-stack__descr {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 50%;
    margin-bottom: 0;
    padding: 2.6rem 3rem;
  }
}

@media only screen and (min-width: 1400px) {
  .services-stack__descr {
    padding: 4rem 5rem 4.6rem 5rem;
  }
}

.services-stack__image {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 3rem;
  position: relative;
  overflow: hidden;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.services-stack__image .service-img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.services-stack__image .service-img-m {
  display: none;
}

@media only screen and (min-width: 768px) {
  .services-stack__image {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding-left: 0;
  }

  .services-stack__image .service-img {
    position: absolute;
    right: -10%;
    bottom: 0;
    height: 100%;
    width: auto;
  }

  .services-stack__image .service-img-s {
    display: none;
  }

  .services-stack__image .service-img-m {
    display: block;
  }
}

@media only screen and (min-width: 992px) {
  .services-stack__image .service-img {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

.portfolio-stack__inner {
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: var(--base);
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
  overflow: hidden;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center center;
  -moz-background-size: cover;
  background-size: cover;
}

.portfolio-stack__descr {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 2.4rem 3rem;
}

@media only screen and (min-width: 768px) {
  .portfolio-stack__descr {
    display: block;
    width: 60%;
    padding: 2.6rem 3rem;
  }
}

@media only screen and (min-width: 1200px) {
  .portfolio-stack__descr {
    width: 40%;
    padding: 4rem 5rem 4.6rem 5rem;
  }
}

@media only screen and (min-width: 1600px) {
  .portfolio-stack__descr {
    width: 33.3334%;
  }
}

.portfolio-stack__title {
  color: var(--t-per-bright-light);
}

.portfolio-stack__title.dark {
  color: var(--t-per-bright-dark);
  font-weight: 400;
}

.portfolio-stack__title.light {
  color: var(--neutral-white);
  font-weight: 300;
}

.portfolio-stack__text {
  margin-top: 3rem;
  font-weight: 300;
  color: var(--t-per-bright-light);
}

.portfolio-stack__text.dark {
  font-weight: 400;
  color: var(--t-per-bright-dark);
}

@media only screen and (min-width: 1400px) {
  .portfolio-stack__text {
    margin-top: 4rem;
  }
}

/* ------------------------------------------------*/
/* Features Stacking Cards End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features Services Start */
/* ------------------------------------------------*/
.services {
  position: relative;
}

.services__item {
  position: relative;
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .services__item {
    height: 500px;
  }
}

@media only screen and (min-width: 1400px) {
  .services__item {
    height: 600px;
  }
}

@media only screen and (min-width: 1600px) {
  .services__item {
    height: 700px;
  }
}

.services__card {
  position: relative;
  height: 100%;
  background-color: var(--base);
  border: 1px solid var(--stroke-elements);
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
  overflow: hidden;
}

.services__title {
  padding: 2.6rem 3rem 0 3rem;
  margin-bottom: 2.3rem;
}

@media only screen and (min-width: 768px) {
  .services__title {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 60%;
    z-index: 2;
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 1400px) {
  .services__title {
    padding: 4rem 5rem 4.6rem 5rem;
  }
}

.services__descr {
  padding: 0 3rem;
  margin-bottom: 2.3rem;
}

.services__descr i {
  display: inline-block;
  font-size: 5.4rem;
  color: var(--t-bright);
  margin-bottom: 2.3rem;
  margin-left: -0.2rem;
}

@media only screen and (min-width: 768px) {
  .services__descr {
    position: absolute;
    bottom: 0;
    left: 0;
    max-width: 50%;
    z-index: 2;
    margin-bottom: 0;
    padding: 2.6rem 3rem;
  }
}

@media only screen and (min-width: 1400px) {
  .services__descr {
    padding: 4rem 5rem 4.6rem 5rem;
  }
}

@media only screen and (min-width: 768px) {
  .services__text {
    margin-bottom: 0;
  }
}

.services__image {
  padding-left: 3rem;
  position: relative;
  overflow: hidden;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.services__image .service-img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.services__image .service-img-m {
  display: none;
}

@media only screen and (min-width: 768px) {
  .services__image {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    padding-left: 0;
  }

  .services__image .service-img {
    position: absolute;
    right: -10%;
    bottom: 0;
    height: 100%;
    width: auto;
  }

  .services__image .service-img-s {
    display: none;
  }

  .services__image .service-img-m {
    display: block;
  }
}

@media only screen and (min-width: 992px) {
  .services__image .service-img {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

.cards {
  position: relative;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  padding: 20px 0;
}

.cards__item {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.cards__card {
  height: 100%;
  background-color: var(--base);
  border: 1px solid var(--stroke-elements);
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
  overflow: hidden;
}

.cards__descr {
  padding: 2.6rem 3rem;
}

@media only screen and (min-width: 1400px) {
  .cards__descr {
    padding: 4rem 5rem 4.6rem 5rem;
  }
}

.cards__text {
  margin-top: 3rem;
}

@media only screen and (min-width: 1400px) {
  .cards__text {
    margin-top: 4rem;
  }
}

.cards__image {
  position: relative;
  overflow: hidden;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  -moz-border-radius-topleft: var(--_radius);
  border-top-left-radius: var(--_radius);
  -moz-border-radius-topright: var(--_radius);
  border-top-right-radius: var(--_radius);
}

.cards__image img {
  -o-object-fit: cover;
  object-fit: cover;
  max-width: 100%;
  max-height: 100%;
}

.cards__image-v2 {
  padding-left: 3rem;
}

@media only screen and (min-width: 1400px) {
  .cards__image-v2 {
    padding-left: 5rem;
  }
}

/* Services Grid Responsive Breakpoints */
@media only screen and (min-width: 768px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .cards__item {
    aspect-ratio: 3/4;
    height: auto;
  }
}

@media only screen and (max-width: 767px) {
  .cards {
    grid-template-columns: 1fr;
  }

  .cards__item {
    aspect-ratio: 3/4;
    height: auto;
  }
}

/* Services Grid - Matching Portfolio Grid Structure */
.services-container {
  transition: margin-bottom 0.5s ease;
}

.services-grid {
  display: grid;
  gap: 20px;
  padding: 20px 0;
}

/* Desktop - 2 columns */
@media only screen and (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
  }

  .services-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--_radius);
    min-height: 320px;
    height: auto;
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

/* Mobile - 1 column */
@media only screen and (max-width: 767px) {
  .services-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
  }

  .services-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--_radius);
    min-height: 280px;
    height: auto;
    box-sizing: border-box;
  }
}

/* Services Card Styling */
.services-card {
  height: 100%;
  background-color: var(--base);
  border: 1px solid var(--stroke-elements);
  border-radius: var(--_radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 2.6rem 3rem;
}

@media only screen and (min-width: 1400px) {
  .services-card {
    padding: 4rem 5rem 4.6rem 5rem;
  }
}

.services-title {
  margin-bottom: 2.3rem;
  font-size: 2.23rem;
}

@media only screen and (min-width: 768px) {
  .services-title {
    font-size: 2.5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .services-title {
    font-size: 3.0rem;
  }
}

@media only screen and (min-width: 1400px) {
  .services-title {
    font-size: 3.3rem;
  }
}

@media only screen and (min-width: 1600px) {
  .services-title {
    font-size: 3.65rem;
  }
}

.services-text {
  margin-top: 3rem;
}

@media only screen and (min-width: 1400px) {
  .services-text {
    margin-top: 4rem;
  }
}

/* ------------------------------------------------*/
/* Features Services End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features Resume Start */
/* ------------------------------------------------*/
.resume-lines,
.resume-lines-number {
  position: relative;
}

.resume-lines__item,
.resume-lines-number__item {
  padding: 4.3rem 0 4.1rem 0;
}

@media only screen and (min-width: 1600px) {

  .resume-lines__item,
  .resume-lines-number__item {
    padding: 5rem 0 4.8rem 0;
  }
}

.resume-divider {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: var(--stroke-elements);
}

.resume-lines__date {
  margin-bottom: 1.9rem;
}

@media only screen and (min-width: 768px) {
  .resume-lines__date {
    margin-bottom: 0;
  }
}

.resume-lines-number__date {
  margin-top: 2.6rem;
}

@media only screen and (min-width: 768px) {
  .resume-lines-number__date {
    margin-top: 0;
  }
}

.resume-lines__title,
.resume-lines__source {
  padding-right: 1rem;
  font-size: 2.5rem;

  @media only screen and (min-width: 768px) {
    font-size: 2.0rem;
  }

  @media only screen and (min-width: 1200px) {
    font-size: 2.5rem;
  }

  @media only screen and (min-width: 1400px) {
    font-size: 3.0rem;
  }
}

@media only screen and (min-width: 1600px) {

  .resume-lines__title,
  .resume-lines__source {
    padding-right: 5rem;
  }
}

@media only screen and (min-width: 768px) {

  .resume-lines-number__title,
  .resume-lines-number__source {
    padding-right: 3rem;
  }
}

@media only screen and (min-width: 1600px) {

  .resume-lines-number__title,
  .resume-lines-number__source {
    padding-right: 5rem;
  }
}

.resume-lines__title {
  margin-bottom: 0.6rem;
}

.resume-lines__source,
.resume-lines-number__source {
  display: inline-block;
}

.resume-lines__descr {
  margin-top: 2.3rem;
}

@media only screen and (min-width: 768px) {
  .resume-lines__descr {
    margin-top: 0;
  }
}

.resume-lines-number__descr {
  margin-bottom: 2.4rem;
}

/* ------------------------------------------------*/
/* Features Resume End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features Tools Start */
/* ------------------------------------------------*/
.tools-cards__item {
  width: 50%;
}

@media only screen and (min-width: 768px) {
  .tools-cards__item {
    width: 33.33333334%;
  }
}

@media only screen and (min-width: 992px) {
  .tools-cards__item {
    width: 25%;
  }
}

.tools-cards__card {
  position: relative;
  width: 100%;
  padding: 3rem;
  background-color: var(--base);
  border: 1px solid var(--stroke-elements);
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
  text-align: center;
}

@media only screen and (min-width: 1600px) {
  .tools-cards__card {
    padding: 5rem 3rem;
  }
}

.tools-cards__icon {
  width: auto;
  height: 6rem;
  margin: 0 auto;
}

@media only screen and (min-width: 1400px) {
  .tools-cards__icon {
    height: 7rem;
  }
}

@media only screen and (min-width: 1600px) {
  .tools-cards__icon {
    height: 9rem;
  }
}

.tools-cards__caption {
  line-height: 1;
  margin-top: 1.5rem;
}

.tools-card {
  padding: 3rem;
  background-color: var(--base);
  border: 1px solid var(--stroke-elements);
  -moz-border-radius: var(--_radius-xl);
  border-radius: var(--_radius-xl);
  overflow: hidden;
}

.tools-card__icon {
  width: auto;
  height: 60px;
  margin: 0 auto;
}

@media only screen and (min-width: 768px) {
  .tools-card__icon {
    height: 90px;
  }
}

.tools-card__caption {
  line-height: 1;
  margin-top: 1.5rem;
}

/* ------------------------------------------------*/
/* Features Tools End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features Testimonials Start */
/* ------------------------------------------------*/
.testimonials-card {
  padding: 3rem;
  background-color: var(--base);
  border: 1px solid var(--stroke-elements);
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
}

@media only screen and (min-width: 992px) {
  .testimonials-card {
    height: 500px;
  }
}

@media only screen and (min-width: 1400px) {
  .testimonials-card {
    padding: 5rem;
    height: 600px;
  }
}

@media only screen and (min-width: 1600px) {
  .testimonials-card {
    height: 700px;
  }
}

.testimonials-card__tdata {
  position: relative;
  padding-right: 0;
}

@media only screen and (min-width: 992px) {
  .testimonials-card__tdata {
    height: 100%;
    padding-right: 1.5rem;
  }
}

@media only screen and (min-width: 1400px) {
  .testimonials-card__tdata {
    padding-right: 2.5rem;
  }
}

.testimonials-card__timage {
  position: relative;
  padding-left: 0;
}

@media only screen and (min-width: 992px) {
  .testimonials-card__timage {
    height: 100%;
    padding-left: 1.5rem;
  }
}

@media only screen and (min-width: 1400px) {
  .testimonials-card__timage {
    padding-left: 2.5rem;
  }
}

.timage__inner {
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
  overflow: hidden;
}

.timage__inner img {
  min-width: 100%;
  min-height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.testimonials-card__descr {
  max-width: 1050px;
  margin-top: 2.8rem;
}

@media only screen and (min-width: 768px) {
  .testimonials-card__descr {
    margin-top: 3.8rem;
  }
}

@media only screen and (min-width: 1200px) {
  .testimonials-card__descr {
    margin-top: 3.6rem;
  }
}

@media only screen and (min-width: 1400px) {
  .testimonials-card__descr {
    margin-top: 3.4rem;
  }
}

.testimonials-card__btnholder {
  margin-top: 2.2rem;
  margin-bottom: 3.3rem;
}

@media only screen and (min-width: 768px) {
  .testimonials-card__btnholder {
    margin-top: 3.2rem;
    margin-bottom: 4.2rem;
  }
}

@media only screen and (min-width: 992px) {
  .testimonials-card__btnholder {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
  }
}

.tauthor__avatar {
  width: 60px;
  min-width: 60px;
  height: 60px;
  margin-right: 2rem;
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
  overflow: hidden;
}

@media only screen and (min-width: 768px) {
  .tauthor__avatar {
    width: 120px;
    min-width: 120px;
    height: 120px;
    margin-right: 3rem;
  }
}

.tauthor__name {
  color: var(--t-bright);
}

.tauthor__position {
  margin-top: 0.6rem;
}

@media only screen and (min-width: 1600px) {
  .tauthor__position {
    margin-top: 0.8rem;
  }
}

.tauthor__rating {
  margin-top: 1.3rem;
}

.tauthor__rating i {
  display: block;
  margin-right: 1rem;
  font-size: 1.6rem;
  color: var(--t-bright);
}

.tauthor__rating i:last-of-type {
  margin-right: 0;
}

@media only screen and (min-width: 1400px) {
  .tauthor__rating i {
    font-size: 1.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .tauthor__rating {
    margin-bottom: 0.4rem;
  }

  .tauthor__rating i {
    font-size: 2rem;
  }
}

/* ------------------------------------------------*/
/* Features Testimonials End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features Slider Start */
/* ------------------------------------------------*/
.testimonials-slider {
  position: relative;
  overflow: hidden;
}

.swiper-testimonials {
  padding-bottom: 4.8rem;
}

@media only screen and (min-width: 1200px) {
  .swiper-testimonials {
    padding-bottom: 5rem;
  }
}

@media only screen and (min-width: 1400px) {
  .swiper-testimonials {
    padding-bottom: 7.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .swiper-testimonials {
    padding-bottom: 7.6rem;
  }
}

.mxd-swiper-pagination-fraction {
  width: auto;
  top: auto;
  bottom: 0;
  left: auto;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  padding-top: 3rem;
  font: normal 400 1.8rem/1 var(--_font-default);
  color: var(--t-bright);
}

@media only screen and (min-width: 1200px) {
  .mxd-swiper-pagination-fraction {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1400px) {
  .mxd-swiper-pagination-fraction {
    padding-top: 5rem;
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 1600px) {
  .mxd-swiper-pagination-fraction {
    font-size: 2.6rem;
  }
}

.mxd-slider-btn {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: auto;
  width: auto;
  height: auto;
  margin: 0;
}

.mxd-slider-btn::after {
  display: none;
}

.mxd-slider-btn .btn .btn-caption {
  display: none;
}

@media only screen and (min-width: 768px) {
  .mxd-slider-btn .btn .btn-caption {
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    line-height: 1;
  }
}

.mxd-slider-btn-square-prev {
  padding-left: 3rem;
  left: 0;
}

@media only screen and (min-width: 1400px) {
  .mxd-slider-btn-square-prev {
    padding-left: 5rem;
  }
}

.mxd-slider-btn-square-next {
  padding-right: 3rem;
  right: 0;
}

@media only screen and (min-width: 1400px) {
  .mxd-slider-btn-square-next {
    padding-right: 5rem;
  }
}

/* ------------------------------------------------*/
/* Features Slider End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features Socials Start */
/* ------------------------------------------------*/
/* Socials Cards */
.socials-cards {
  position: relative;
}

.socials-cards__item {
  width: 50%;
}

@media only screen and (min-width: 768px) {
  .socials-cards__item {
    width: 33.33333334%;
  }
}

@media only screen and (min-width: 992px) {
  .socials-cards__item {
    width: 20%;
  }
}

.socials-cards__link {
  position: relative;
  width: 100%;
  height: auto;
  padding: 2.6rem 0;
  background-color: var(--base);
  border: 1px solid var(--stroke-elements);
  -moz-border-radius: var(--_radius);
  border-radius: var(--_radius);
  overflow: hidden;
}

.socials-cards__link em {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: var(--t-bright);
  -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
  -moz-transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.socials-cards__link i {
  position: relative;
  display: block;
  font-size: 7rem;
  line-height: 1;
  color: var(--t-bright);
  -webkit-transform: scale3d(1, 1, 1);
  -moz-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  -webkit-transition: color 0.3s 0s, -webkit-transform 0.3s 0.1s ease-in-out;
  transition: color 0.3s 0s, -webkit-transform 0.3s 0.1s ease-in-out;
  -moz-transition: color 0.3s 0s, transform 0.3s 0.1s ease-in-out, -moz-transform 0.3s 0.1s ease-in-out;
  transition: color 0.3s 0s, transform 0.3s 0.1s ease-in-out;
  transition: color 0.3s 0s, transform 0.3s 0.1s ease-in-out, -webkit-transform 0.3s 0.1s ease-in-out, -moz-transform 0.3s 0.1s ease-in-out;
  will-change: transform;
}

.no-touch .socials-cards__link:hover {
  color: var(--t-opp-bright);
  background-color: var(--t-bright);
  -webkit-transition: color 0.3s 0s, background-color 0.3s 0.24s, -webkit-box-shadow 0.5s, -webkit-transform 0.3s ease-in-out;
  transition: color 0.3s 0s, background-color 0.3s 0.24s, -webkit-box-shadow 0.5s, -webkit-transform 0.3s ease-in-out;
  -moz-transition: color 0.3s 0s, background-color 0.3s 0.24s, box-shadow 0.5s, transform 0.3s ease-in-out, -moz-box-shadow 0.5s, -moz-transform 0.3s ease-in-out;
  transition: color 0.3s 0s, background-color 0.3s 0.24s, box-shadow 0.5s, transform 0.3s ease-in-out;
  transition: color 0.3s 0s, background-color 0.3s 0.24s, box-shadow 0.5s, transform 0.3s ease-in-out, -webkit-box-shadow 0.5s, -moz-box-shadow 0.5s, -webkit-transform 0.3s ease-in-out, -moz-transform 0.3s ease-in-out;
}

.no-touch .socials-cards__link:hover i {
  color: var(--t-opp-bright);
  -webkit-transform: scale3d(0.96, 0.96, 1);
  -moz-transform: scale3d(0.96, 0.96, 1);
  transform: scale3d(0.96, 0.96, 1);
}

.no-touch .socials-cards__link:hover em {
  width: 225%;
  height: 40.95rem;
}

@media only screen and (min-width: 1400px) {
  .socials-cards__link i {
    font-size: 8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .socials-cards__link {
    padding: 4rem 0;
  }

  .socials-cards__link i {
    font-size: 10rem;
  }
}

/* Socials Lines */
.socials-lines {
  position: relative;
}

.socials-lines__item {
  position: relative;
  display: block;
}

.socials-lines__divider {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: var(--stroke-elements);
}

.socials-lines__link {
  position: relative;
  padding: 3rem 0.4rem;
  color: var(--t-bright);
  overflow: hidden;
}

.socials-lines__link::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  height: 0;
  background: var(--t-bright);
  -webkit-transition: height var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: height var(--_animspeed-medium) var(--_animbezier);
  transition: height var(--_animspeed-medium) var(--_animbezier);
}

.socials-lines__link h4,
.socials-lines__link i {
  color: var(--t-bright);
  -webkit-transition: all var(--_animspeed-medium) var(--_animbezier);
  -moz-transition: all var(--_animspeed-medium) var(--_animbezier);
  transition: all var(--_animspeed-medium) var(--_animbezier);
}

@media only screen and (min-width: 768px) {
  .socials-lines__link {
    padding: 5rem 0.4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .no-touch .socials-lines__link:hover::before {
    height: 100%;
  }

  .no-touch .socials-lines__link:hover h4 {
    -webkit-transform: translate(5rem, 0px) !important;
    -moz-transform: translate(5rem, 0px) !important;
    -ms-transform: translate(5rem, 0px) !important;
    transform: translate(5rem, 0px) !important;
  }

  .no-touch .socials-lines__link:hover i {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .no-touch .socials-lines__link:hover h4,
  .no-touch .socials-lines__link:hover i {
    color: var(--t-opp-bright);
  }
}

.socials-lines__icon {
  font-size: 3rem;
}

@media only screen and (min-width: 1400px) {
  .socials-lines__icon {
    font-size: 3.6rem;
  }
}

@media only screen and (min-width: 1600px) {
  .socials-lines__icon {
    font-size: 4rem;
  }
}

/* ------------------------------------------------*/
/* Features Socials End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* Features Contact Data Start */
/* ------------------------------------------------*/
.contact-data {
  text-align: center;
}

.contact-data .row {
  justify-content: center;
}

.contact-data__item {
  margin-bottom: 3.2rem;
}

.contact-data__item:last-of-type {
  margin-bottom: 0;
}

@media only screen and (min-width: 768px) {
  .contact-data__item {
    margin-bottom: 4.3rem;
  }

  .contact-data__item:nth-of-type(3),
  .contact-data__item:last-of-type {
    margin-bottom: 0;
  }
}

@media only screen and (min-width: 992px) {
  .contact-data__item {
    margin-bottom: 0;
  }
}

/* Contact data links (Navigate, Location, Phone, Email): underline on hover/active (same as popup client links) */
.contact-data .link-small-160lh {
  text-decoration: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, currentColor, currentColor);
  background-size: 100% 1px, 0 1px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 400ms, color 300ms;
}

.no-touch .contact-data .link-small-160lh:hover {
  background-size: 0 1px, 100% 1px;
}

@media (hover: none) and (pointer: coarse) {
  .contact-data .link-small-160lh:active {
    background-size: 0 1px, 100% 1px;
  }
}

.contact-data__title {
  margin-bottom: 2.5rem;
}

@media only screen and (min-width: 768px) {
  .contact-data__title {
    margin-bottom: 3.5rem;
  }
}

@media only screen and (min-width: 1400px) {
  .contact-data__title {
    margin-bottom: 3.4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .contact-data__title {
    margin-bottom: 4.2rem;
  }
}

/* 2 columns in mobile landscape (e.g. iPhone SE landscape) */
@media only screen and (orientation: landscape) and (max-width: 896px) {
  .contact-data .row .contact-data__item {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .contact-data__item:nth-of-type(3),
  .contact-data__item:last-of-type {
    margin-bottom: 0;
  }
}

/* ------------------------------------------------*/
/* Features Contact Data End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Global Footer Start */
/* ------------------------------------------------*/
.site-footer {
  text-align: center;
  padding: 0.8rem 1.6rem 1.6rem;
  font-size: 1.2rem;
  color: inherit;
}

.site-footer__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
}

.site-footer__logo .logo__image {
  width: 5rem;
  height: auto;
}

.site-footer__text {
  margin: 0;
  color: var(--t-muted);
  font-size: 1.8rem;
}

/* ------------------------------------------------*/
/* Global Footer End */
/* ------------------------------------------------*/
/* —————————————————————————————————————————
   SERVICES & RESUME: always show in portrait
   ————————————————————————————————————————— */
@media only screen and (orientation: portrait) {

  /* if anything got hidden or moved off-screen */
  #services,
  #resume {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ───────────────────────────────────────────────
   Reduce gap between "Gallery" subtitle and images
   ─────────────────────────────────────────────── */
.project__block.pre-grid-items {
  margin-bottom: 0.01rem !important;
  /* tighten up below the Gallery title */
}

/* ───────────────────────────────────────────────
   Portfolio Popup Data: two columns on mobile
   ─────────────────────────────────────────────── */
[id^="portfolio-popup-"] .project__data .grid-item.pdata__item {
  flex: 0 0 50% !important;
  max-width: 50% !important;
}


/* ───────────────────────────────────────────────
   Popup: gap between gallery images and divider
   ─────────────────────────────────────────────── */
[id^="portfolio-popup-"] .project__block.grid-block.no-margin {

  margin-bottom: 5rem !important;
  /* adjust as needed */
}

/* ───────────────────────────────────────────────
   Gallery Video: make it fill the frame
   ─────────────────────────────────────────────── */
.project__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* crop/scale to cover the box */
  display: block;
}

/* ───────────────────────────────────────────────
   Desktop: enlarge the "arrow-down-right" icon
   ─────────────────────────────────────────────── */
@media only screen and (min-width: 992px) {

  /* target the phosphor-icon class */
  .ph.ph-arrow-down-right {
    font-size: 7rem !important;
    /* tweak this size as you like */
    line-height: 1;
    /* ensure it stays vertically centered */
  }
}

/* ------------------------------------------------*/
/* Portfolio Masonry Grid Start */
/* ------------------------------------------------*/

/* Filter Buttons */
.portfolio-filter {
  /* Configurable alignment parameter */
  --filter-alignment-offset: -20px;
  /* Adjust this value to move buttons left/right */

  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 5rem;
  margin-bottom: 4rem;
  padding: 0 2rem;
  /* Apply the configurable offset */
  margin-left: var(--filter-alignment-offset);
}

@media only screen and (min-width: 768px) {
  .portfolio-filter {
    --filter-alignment-offset: -30px;
    /* Desktop offset */
    padding: 0 5rem;
    margin-top: 6rem;
    margin-bottom: 5rem;
  }
}

@media only screen and (min-width: 1200px) {
  .portfolio-filter {
    --filter-alignment-offset: -45px;
    /* Large desktop offset */
    margin-top: 4rem;
  }
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--_radius-s);
  background-color: rgba(var(--base-rgb), 0.8);
  color: var(--t-medium);
  font-size: 1.1rem;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all var(--_animspeed-medium) var(--_animbezier);
  outline: none;
  min-width: 100px;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

.filter-btn .filter-icon {
  display: flex;
  align-items: center;
  font-size: 1.2em;
  transition: color 0.25s, filter 0.25s;
}

.filter-btn.active,
.filter-btn[aria-pressed="true"] {
  background: var(--accent, #b6b6f6);
  color: #fff;
  border-color: var(--accent, #b6b6f6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

.filter-btn:focus-visible,
.filter-btn:hover:not(.active):not([aria-pressed="true"]) {
  background: rgba(var(--base-rgb), 0.92);
  color: var(--accent, #6c63ff);
  border-color: var(--accent, #b6b6f6);
  transform: translateY(-2px) scale(1.045);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
}

.filter-btn:active {
  transform: scale(0.97);
  filter: brightness(0.98);
}

@media (max-width: 900px) {
  .portfolio-filter-list {
    gap: 0.7rem;
  }

  .portfolio-filter-btn {
    padding: 0.6rem 1rem;
    font-size: 1rem;
    min-width: 80px;
    min-height: 36px;
  }
}

@media (max-width: 600px) {
  .portfolio-filter-bar {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .portfolio-filter-list {
    gap: 0.4rem;
  }

  .portfolio-filter-btn {
    padding: 0.4rem 0.7rem;
    font-size: 0.95rem;
    min-width: 60px;
    min-height: 32px;
  }

  .portfolio-filter-btn .filter-label {
    display: none;
  }
}

/* Masonry Grid Container */
/* Portfolio Container */
.portfolio-container {
  transition: margin-bottom 0.5s ease;
}

/* Portfolio Masonry Grid - CSS-only responsive design */
.portfolio-grid {
  display: grid;
  gap: 20px;
  padding: 20px 0;
}

/* Desktop - 2 columns */
@media only screen and (min-width: 768px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--_radius);
    border-top-left-radius: var(--_radius);
    border-top-right-radius: var(--_radius);
    border-bottom-left-radius: var(--_radius);
    border-bottom-right-radius: var(--_radius);
    aspect-ratio: 3/4;
    /* 3:4 aspect ratio for portrait tiles */
    height: auto;
    backface-visibility: hidden;
    transform: translateZ(0);
  }

  .portfolio-item--wide {
    grid-column: span 2;
    aspect-ratio: 16/9;
    /* 16:9 aspect ratio for wide tiles */
    height: auto;
    border-radius: var(--_radius);
    backface-visibility: hidden;
    transform: translateZ(0);
  }
}

/* Mobile - 1 column */
@media only screen and (max-width: 767px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }

  .portfolio-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--_radius);
    border-top-left-radius: var(--_radius);
    border-top-right-radius: var(--_radius);
    border-bottom-left-radius: var(--_radius);
    border-bottom-right-radius: var(--_radius);
    aspect-ratio: 3/4;
    /* 3:4 aspect ratio for portrait tiles */
    height: auto;
    box-sizing: border-box;
  }

  .portfolio-item--wide {
    grid-column: 1;
    aspect-ratio: 16/9;
    /* 16:9 aspect ratio for wide tiles */
    height: auto;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: var(--_radius);
    border-top-left-radius: var(--_radius);
    border-top-right-radius: var(--_radius);
    border-bottom-left-radius: var(--_radius);
    border-bottom-right-radius: var(--_radius);
  }
}

/* Add specific styles for mobile landscape mode */
@media only screen and (max-width: 767px) and (orientation: landscape) {
  .portfolio-item--wide {
    aspect-ratio: 2/1;
    height: 100%;
    border-radius: var(--_radius);
    overflow: hidden;
    box-sizing: border-box;
  }

  .portfolio-item--wide .portfolio-item__inner {
    height: 100%;
    border-radius: var(--_radius);
    overflow: hidden;
  }

  .portfolio-item--wide .portfolio-item__inner img {
    height: 100%;
    object-fit: cover;
    border-radius: var(--_radius);
  }
}

.portfolio-item__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
  border-radius: inherit;
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.portfolio-item__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--_animspeed-medium) var(--_animbezier);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.portfolio-item__inner:hover img {
  transform: scale(1.05);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio-item__category {
  position: absolute;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.8rem 1.6rem;
  background-color: rgba(var(--base-rgb), 0.8);
  color: var(--t-medium);
  font-size: 1.2rem;
  font-weight: 500;
  border-radius: var(--_radius-s);
  z-index: 2;
  transition: all var(--_animspeed-medium) var(--_animbezier);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.portfolio-item__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: transparent;
  color: white;
  opacity: 1;
  transition: opacity var(--_animspeed-medium) var(--_animbezier);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.portfolio-item__title {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  padding: 1.2rem 1.6rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  transition: all var(--_animspeed-medium) var(--_animbezier);
  transform: scale(1);
  overflow: hidden;
  will-change: transform;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.portfolio-item:hover .portfolio-item__title {
  transform: scale(1.05);
  color: rgba(255, 255, 255, 1);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 3px 8px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  will-change: transform;
}

/* Responsive Grid Layout - 2 columns on desktop */
@media only screen and (min-width: 768px) {
  .portfolio-grid {
    column-count: 2;
    column-gap: 20px;
  }

  .portfolio-item__category {
    font-size: 1.3rem;
  }

  .portfolio-item__title {
    font-size: 2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .portfolio-grid {
    column-count: 2;
    /* Keep 2 columns on desktop */
    column-gap: 20px;
  }

  .portfolio-item__category {
    font-size: 1.4rem;
  }

  .portfolio-item__title {
    font-size: 2.2rem;
  }
}

@media only screen and (min-width: 1400px) {
  .portfolio-grid {
    column-count: 2;
    column-gap: 20px;
  }

  .portfolio-item__title {
    font-size: 2.4rem;
  }
}

@media only screen and (min-width: 1600px) {
  .portfolio-grid {
    column-count: 2;
    column-gap: 20px;
  }

  .portfolio-item__category {
    font-size: 1.5rem;
  }

  .portfolio-item__title {
    font-size: 2.6rem;
  }
}

/* Filter functionality */
.portfolio-item.hidden {
  display: none;
}

.portfolio-item.filtering {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
}


/* ------------------------------------------------*/
/* Portfolio Masonry Grid End */
/* ------------------------------------------------*/
/* ------------------------------------------------*/
/* --- Portfolio Filter Bar (New) --- */
.portfolio-filter-bar {
  margin-top: 4.5rem;
  /* Match About Me section gap */
  margin-bottom: 4.5rem;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.portfolio-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.portfolio-filter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 1em 2.2em;
  border: none;
  border-radius: 2.5em;
  background: var(--neutral-bright, #f5f5f5);
  color: var(--t-opp-bright, #222);
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  outline: none;
  overflow: hidden;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
  min-width: 140px;
  min-height: 48px;
  z-index: 1;
}

.portfolio-filter-btn em {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, var(--accent, #b6b6f6) 0%, transparent 70%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transition: opacity 0.3s, transform 0.3s;
  z-index: 0;
}

.portfolio-filter-btn:focus-visible em,
.portfolio-filter-btn:hover em {
  opacity: 0.18;
  transform: translate(-50%, -50%) scale(1);
}

.portfolio-filter-btn:active em {
  opacity: 0.28;
  transform: translate(-50%, -50%) scale(1.1);
}

.portfolio-filter-btn .filter-icon {
  font-size: 1.3em;
  display: flex;
  align-items: center;
  z-index: 1;
}

.portfolio-filter-btn .filter-label {
  z-index: 1;
}

.portfolio-filter-btn.active,
.portfolio-filter-btn[aria-pressed="true"] {
  background: var(--accent, #b6b6f6);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

.portfolio-filter-btn.active .filter-icon,
.portfolio-filter-btn[aria-pressed="true"] .filter-icon {
  color: #fff;
}

.portfolio-filter-btn:focus-visible,
.portfolio-filter-btn:hover:not(.active):not([aria-pressed="true"]) {
  background: var(--neutral-bright, #eaeaff);
  color: var(--accent, #6c63ff);
  box-shadow: 0 6px 24px rgba(108, 99, 255, 0.10);
  transform: translateY(-2px) scale(1.04);
}

.portfolio-filter-btn:active {
  background: var(--accent, #b6b6f6);
  color: #fff;
  box-shadow: 0 2px 8px rgba(108, 99, 255, 0.10);
  transform: scale(0.98);
}

@media (max-width: 900px) {
  .portfolio-filter-bar {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .portfolio-filter-list {
    gap: 0.7rem;
  }

  .portfolio-filter-btn {
    padding: 0.5em 1em;
    font-size: 0.98rem;
    min-width: 70px;
    min-height: 32px;
  }
}

@media (max-width: 600px) {
  .portfolio-filter-bar {
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
  }

  .portfolio-filter-list {
    gap: 0.3rem;
  }

  .portfolio-filter-btn {
    padding: 0.4em 0.7em;
    font-size: 0.93rem;
    min-width: 54px;
    min-height: 28px;
  }

  .portfolio-filter-btn .filter-label {
    display: none;
  }
}

/* Fix: Portfolio tile animation - do not hide too early */
.portfolio-item.filtering {
  pointer-events: none;
  opacity: 0.15;
  transform: scale(0.92);
  transition: opacity 0.38s cubic-bezier(.4, 1.4, .6, 1), transform 0.38s cubic-bezier(.4, 1.4, .6, 1);
  z-index: 0;
}

/* Add spacing below the Portfolio title */
.reveal-type.animate-in-up {
  margin-bottom: 2.2rem;
  display: inline-block;
}

.portfolio-filter-btn {
  /* Inherit all styles from .btn.btn-default.hover-default */
  @extend .btn;
  @extend .btn-default;
  @extend .hover-default;
  /* Remove custom overrides */
  gap: unset;
  padding: unset;
  border: unset;
  border-radius: unset;
  background: unset;
  color: unset;
  font-size: unset;
  font-weight: unset;
  box-shadow: unset;
  min-width: unset;
  min-height: unset;
  z-index: unset;
  /* Keep only spacing if needed */
  margin-right: 1rem;
  margin-bottom: 1rem;
}

.portfolio-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em 2.2em;
  border: 1.5px solid rgba(0, 0, 0, 0.10);
  border-radius: 2em;
  background: rgba(var(--base-rgb), 0.7);
  color: var(--t-opp-bright, #222);
  font-size: 1.18rem;
  font-weight: 600;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  cursor: pointer;
  outline: none;
  min-width: 120px;
  min-height: 44px;
  margin-right: 1rem;
  margin-bottom: 1rem;
  transition: all 0.18s cubic-bezier(.4, 1.4, .6, 1);
  user-select: none;
}

.portfolio-filter-btn.active,
.portfolio-filter-btn[aria-pressed="true"] {
  background: var(--accent, #b6b6f6);
  color: #fff;
  border-color: var(--accent, #b6b6f6);
  box-shadow: 0 4px 16px rgba(108, 99, 255, 0.13), 0 2px 8px rgba(0, 0, 0, 0.10);
  filter: brightness(1.08);
}

.portfolio-filter-btn:focus-visible,
.portfolio-filter-btn:hover:not(.active):not([aria-pressed="true"]) {
  background: rgba(var(--base-rgb), 0.92);
  color: var(--accent, #6c63ff);
  border-color: var(--accent, #b6b6f6);
  box-shadow: 0 8px 24px rgba(108, 99, 255, 0.13), 0 2px 8px rgba(0, 0, 0, 0.10);
  transform: translateY(-2px) scale(1.045);
}

.portfolio-filter-btn:active {
  transform: scale(0.97);
  filter: brightness(0.98);
}

/* --- Portfolio Filter Button (Redesigned from scratch) --- */
.portfolio-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85em 2.3em;
  border: none;
  border-radius: 2em;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  outline: none;
  min-width: 120px;
  min-height: 46px;
  margin-right: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1.5px 6px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(10px);
  transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.13s;
  user-select: none;
}

/* Light mode: glassy white default, black active/hover */
[color-scheme=light] .portfolio-filter-btn {
  background: rgba(255, 255, 255, 0.75);
  color: #181818;
}

[color-scheme=light] .portfolio-filter-btn.active,
[color-scheme=light] .portfolio-filter-btn[aria-pressed="true"],
[color-scheme=light] .portfolio-filter-btn:focus-visible,
[color-scheme=light] .portfolio-filter-btn:hover:not(.active):not([aria-pressed="true"]) {
  background: #181818;
  color: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
  transform: translateY(-2px) scale(1.045);
}

/* Dark mode: glassy black default, white active/hover */
[color-scheme=dark] .portfolio-filter-btn {
  background: rgba(24, 24, 24, 0.75);
  color: #fff;
}

[color-scheme=dark] .portfolio-filter-btn.active,
[color-scheme=dark] .portfolio-filter-btn[aria-pressed="true"],
[color-scheme=dark] .portfolio-filter-btn:focus-visible,
[color-scheme=dark] .portfolio-filter-btn:hover:not(.active):not([aria-pressed="true"]) {
  background: #fff;
  color: #181818;
  box-shadow: 0 6px 24px rgba(255, 255, 255, 0.10);
  transform: translateY(-2px) scale(1.045);
}

.portfolio-filter-btn:active {
  transform: scale(0.97);
  filter: brightness(0.98);
}

/* === Portfolio Filter Button: Black & White Outline Only === */

/* Default: outline only, no fill */
[color-scheme="light"] .portfolio-filter-btn {
  background: transparent !important;
  color: #181818 !important;
  border: 2px solid #181818 !important;
  box-shadow: none !important;
}

[color-scheme="dark"] .portfolio-filter-btn {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}

/* Hover, Focus, Active: fill, invert text */
[color-scheme="light"] .portfolio-filter-btn:hover,
[color-scheme="light"] .portfolio-filter-btn:focus-visible,
[color-scheme="light"] .portfolio-filter-btn:active,
[color-scheme="light"] .portfolio-filter-btn.active,
[color-scheme="light"] .portfolio-filter-btn[aria-pressed="true"] {
  background: #181818 !important;
  color: #fff !important;
  border: 2px solid #181818 !important;
  box-shadow: none !important;
}

[color-scheme="dark"] .portfolio-filter-btn:hover,
[color-scheme="dark"] .portfolio-filter-btn:focus-visible,
[color-scheme="dark"] .portfolio-filter-btn:active,
[color-scheme="dark"] .portfolio-filter-btn.active,
[color-scheme="dark"] .portfolio-filter-btn[aria-pressed="true"] {
  background: #fff !important;
  color: #181818 !important;
  border: 2px solid #fff !important;
  box-shadow: none !important;
}

/* Remove any accent color on icons/labels inside filter buttons */
.portfolio-filter-btn .filter-label,
.portfolio-filter-btn .filter-icon,
.portfolio-filter-btn em {
  color: inherit !important;
}

/* Portfolio Filter Dropdown for Mobile Portrait */
@media only screen and (max-width: 767px) and (orientation: portrait) {
  .portfolio-filter-bar {
    display: none !important;
  }

  .portfolio-filter-dropdown-mobile {
    display: block;
    position: relative;
    margin-bottom: 1.5rem;
  }

  .portfolio-filter-dropdown-toggle {
    min-height: 44px;
    height: 44px;
    width: 100%;
    padding: 0.8rem 1.2rem;
    font-size: 1.08rem;
    border: 2.5px solid var(--t-medium);
    background: transparent;
    color: var(--t-medium);
    border-radius: 2.5rem;
    outline: none;
    cursor: pointer;
    text-align: center;
    font-family: var(--_font-default);
    font-weight: 1000;
    letter-spacing: 0.01em;
    transition: border 0.2s, background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .portfolio-filter-list-mobile .portfolio-filter-btn {
    min-height: 44px;
    height: 44px;
    border-width: 1.5px;
  }

  .portfolio-filter-dropdown-menu {
    position: absolute;
    top: var(--dropdown-menu-offset);
    left: 0;
    right: 0;
    background: rgba(var(--base-rgb), 0.5);
    border: 2.5px solid var(--t-medium);
    border-top: auto;
    border-bottom-left-radius: 2.5rem;
    border-bottom-right-radius: 2.5rem;
    border-top-left-radius: 2.5rem;
    border-top-right-radius: 2.5rem;
    z-index: 10;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: 1rem 0.5rem;
    backdrop-filter: blur(4px);
    pointer-events: auto;
  }

  .portfolio-filter-dropdown-mobile {
    position: relative;
    width: 100%;
    /* Reserve space for menu to prevent layout shift */
    margin-bottom: 1.5rem;
  }

  .portfolio-filter-dropdown-menu[hidden] {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    height: 0;
    padding: 0;
    pointer-events: none;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
  }
}

@media only screen and (min-width: 768px),
(orientation: landscape) {
  .portfolio-filter-dropdown-mobile {
    display: none !important;
  }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  .portfolio-filter-dropdown-menu {
    padding: 1rem 0.5rem;
  }

  .portfolio-filter-list-mobile {
    gap: 0.6rem;
  }

  .portfolio-filter-list-mobile .portfolio-filter-btn {
    padding: 0.8rem 1.2rem;
    margin: 0.5rem 0;
    font-size: 1.08rem;
  }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  .portfolio-filter-list-mobile .portfolio-filter-btn {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
  }
}

/* === Portfolio Filter Dropdown Mobile: Pure Black/White for Toggle/Menu === */
@media only screen and (max-width: 767px) and (orientation: portrait) {
  [color-scheme="light"] .portfolio-filter-dropdown-toggle {
    color: #000 !important;
    border-color: #000 !important;
  }

  [color-scheme="dark"] .portfolio-filter-dropdown-toggle {
    color: #fff !important;
    border-color: #fff !important;
  }

  [color-scheme="light"] .portfolio-filter-dropdown-menu {
    color: #000 !important;
    border-color: #000 !important;
  }

  [color-scheme="dark"] .portfolio-filter-dropdown-menu {
    color: #fff !important;
    border-color: #fff !important;
  }

  /* Ensure menu items inside also inherit the correct color */
  [color-scheme="light"] .portfolio-filter-dropdown-menu * {
    color: #000 !important;
  }

  [color-scheme="dark"] .portfolio-filter-dropdown-menu * {
    color: #fff !important;
  }
}

/* === Dropdown Toggle Hover Effect & Dropdown Menu Animation === */
@media only screen and (max-width: 767px) and (orientation: portrait) {

  [color-scheme="light"] .portfolio-filter-dropdown-toggle:hover,
  [color-scheme="light"] .portfolio-filter-dropdown-toggle:focus-visible {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    transform: translateY(-2px) scale(1.045);
    transition: background 0.2s, color 0.2s, border 0.2s, box-shadow 0.2s, transform 0.2s;
  }

  [color-scheme="dark"] .portfolio-filter-dropdown-toggle:hover,
  [color-scheme="dark"] .portfolio-filter-dropdown-toggle:focus-visible {
    background: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.10);
    transform: translateY(-2px) scale(1.045);
    transition: background 0.2s, color 0.2s, border 0.2s, box-shadow 0.2s, transform 0.2s;
  }

  .portfolio-filter-dropdown-menu {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1), transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
    pointer-events: auto;
  }

  .portfolio-filter-dropdown-menu[hidden] {
    opacity: 0 !important;
    transform: translateY(-16px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  }
}

/* --- Portfolio Section Spacing Fixes (Overrides) --- */
.content__block.pre-stack-block {
  margin-bottom: 3.6rem !important;
}

@media only screen and (min-width: 768px) {
  .content__block.pre-stack-block {
    margin-bottom: 3.8rem !important;
  }
}

@media only screen and (min-width: 992px) {
  .content__block.pre-stack-block {
    margin-bottom: 4.5rem !important;
  }
}

@media only screen and (min-width: 1200px) {
  .content__block.pre-stack-block {
    margin-bottom: 4.2rem !important;
  }
}

@media only screen and (min-width: 1400px) {
  .content__block.pre-stack-block {
    margin-bottom: 5rem !important;
  }
}

/* --- Portfolio Filter Bar Responsive Margin Fix --- */
section#portfolio .portfolio-filter-bar {
  margin-bottom: 0rem;
}

@media (max-width: 900px) {
  section#portfolio .portfolio-filter-bar {
    margin-bottom: 0rem;
  }
}

@media (max-width: 600px) {
  .portfolio-filter-dropdown-mobile {
    margin-bottom: 0rem;
  }
}

/* ------------------------------------------------*/
/* Portfolio Tile Video Overlay Fix (Titles/Tags Always Visible) */
/* ------------------------------------------------*/
.portfolio-item {
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.portfolio-item__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0;
  pointer-events: none !important;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  /* Performance optimizations for faster loading */
  will-change: opacity;
  transform: translateZ(0);
  /* Force GPU acceleration */
  backface-visibility: hidden;
  border-radius: inherit;
  filter: none;
  /* Ensure no filters are applied to the video */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* Performance optimizations for mobile */
  will-change: opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  /* Prevent browser video preview popups on hover */
  -webkit-playsinline: true;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

/* Lazy loading state for videos */
.portfolio-item__video[data-lazy-load="true"]:not([data-loaded]) {
  visibility: hidden;
}

.portfolio-item__video[data-lazy-load="true"][data-loaded="true"] {
  visibility: visible;
}

.portfolio-item.home {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
}

.home .home-background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  /* Ensure poster/thumbnail displays while video loads */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ------------------------------------------------*/
/* Mobile Landscape Portfolio Grid Layout */
/* ------------------------------------------------*/
@media only screen and (max-width: 767px) and (orientation: landscape) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    column-count: 2 !important;
    column-gap: 20px !important;
  }

  .portfolio-item {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3/4 !important;
  }

  /* Allow wide tiles to be wide in landscape mode, but only for "all" filter */
  .portfolio-item--wide {
    grid-column: span 2 !important;
    aspect-ratio: 16/9 !important;
  }

  /* For non-"all" filters, wide tiles should be vertical */
  body:not([data-filter="all"]) .portfolio-item--wide {
    grid-column: auto !important;
    aspect-ratio: 3/4 !important;
  }
}

/* ------------------------------------------------*/
/* Mobile Portrait Portfolio Grid Layout */
/* ------------------------------------------------*/
@media only screen and (max-width: 767px) and (orientation: portrait) {
  .portfolio-grid {
    grid-template-columns: 1fr !important;
    column-count: 1 !important;
    column-gap: 20px !important;
  }

  .portfolio-item {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3/4 !important;
  }

  .portfolio-item--wide {
    grid-column: auto !important;
    aspect-ratio: 3/4 !important;
  }
}

.portfolio-item__inner:hover .portfolio-item__video,
.portfolio-item__inner:focus-visible .portfolio-item__video {
  opacity: 1;
  pointer-events: auto;
}

.portfolio-item__category,
.portfolio-item__overlay {
  position: absolute;
  z-index: 2;
}

.portfolio-item__video {
  filter: none !important;
  -webkit-filter: none !important;
  -moz-filter: none !important;
  -ms-filter: none !important;
  -o-filter: none !important;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity 0.35s ease;
  transform: scale(1);
  transform-origin: center center;
  /* Prevent browser video preview popups on hover */
  pointer-events: none !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.portfolio-item__inner:hover .portfolio-item__video {
  opacity: 1;
}

/* Video zoom - controlled via data-video-zoom attribute */
/* Usage: Add data-video-zoom="2" (for 2% zoom in) or data-video-zoom="0.1" (for 0.1% zoom in) to the portfolio-item div */
/* Supports any decimal value: 0 = no zoom, 0.1 = 0.1% zoom in, 2 = 2% zoom in, -2 = 2% zoom out, etc. */
/* All values are treated as percentage zoom: positive = zoom in, negative = zoom out */
/* The value is converted to scale via JavaScript (e.g., 2 becomes 1.02, 0.1 becomes 1.001, -2 becomes 0.98) */
/* Zoom is applied by default (not animated) - the video stays at the specified zoom level */
.portfolio-item[data-video-zoom]:not([data-video-zoom="0"]) .portfolio-item__video {
  transform: scale(var(--video-zoom-scale, 1));
}

.portfolio-item__category {
  /* already positioned, just ensure z-index */
  z-index: 3;
}

.portfolio-item__overlay {
  /* already positioned, just ensure z-index */
  z-index: 4;
}

.portfolio-item__inner img {
  position: relative;
  z-index: 0;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform var(--_animspeed-medium) var(--_animbezier);
}

/* On hover: keep thumbnail visible at full opacity when video hasn't loaded yet (like home page poster) */
.portfolio-item__inner:hover img,
.portfolio-item__inner:focus-visible img {
  opacity: 1;
}

/* When video has loaded, dim thumbnail so video shows through */
.portfolio-item__inner:hover:has(.portfolio-item__video[data-loaded="true"]) img,
.portfolio-item__inner:focus-visible:has(.portfolio-item__video[data-loaded="true"]) img {
  opacity: 0.25;
}

/* ------------------------------------------------*/
/* End Portfolio Tile Video Overlay Fix */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Home Section Text Styles */
/* ------------------------------------------------*/
.headline {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  /* Default positioning - can be adjusted per breakpoint */
  left: -25%;
  top: 45%;
  transform: translateY(-50%);
}

/* Keyframes for continuous text animations */
@keyframes gradientFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-4px);
  }

  60% {
    transform: translateY(-2px);
  }
}

/* Base styles for home section text */
.home-heading,
.home-subheading,
.home-scroll-link {
  position: relative;
  display: inline-block;
  padding: 0.5rem 1.5rem;
  border-radius: var(--glass-border-radius);
  backdrop-filter: blur(6.0px);
  -webkit-backdrop-filter: blur(6.0px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
  margin: 0.25rem 0;
  line-height: 1.2;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Frosted glass background using pseudo-element */
.home-heading::before,
.home-subheading::before,
.home-scroll-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: var(--glass-border-radius);
  z-index: -1;
  transition: all 0.3s ease;
}

[color-scheme="light"] .home-heading::before,
[color-scheme="light"] .home-subheading::before,
[color-scheme="light"] .home-scroll-link::before {
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

[color-scheme="dark"] .home-heading::before,
[color-scheme="dark"] .home-subheading::before,
[color-scheme="dark"] .home-scroll-link::before {
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Adjust specific elements */
.home-heading {
  padding: 1rem 1.5rem;
  margin-bottom: 0.5rem;
}

.home-subheading {
  margin: 0.5rem 0;
}

.home-scroll-link {
  text-decoration: none;
  transition: all 0.3s ease;
  color: inherit;
  /* Ensure text and arrow inherit the same color */
}

[color-scheme="light"] .home-scroll-link:hover::before {
  background-color: rgba(255, 255, 255, 0.4);
}

[color-scheme="dark"] .home-scroll-link:hover::before {
  background-color: rgba(0, 0, 0, 0.4);
}

/* Base font sizes (will be scaled based on viewport) */
:root {
  --home-heading-size: 2.5rem;
  --home-subheading-size: 10.5rem;
  --home-link-size: 2.5rem;
  --home-scroll-link-margin-top: -0.6em;
  --home-scroll-link-weight: 550;
  --home-scroll-arrow-weight: 550;
  --glass-border-radius: 1.5rem;
  /* Centralized border-radius for glass effect */
}

.home-heading {
  font-size: var(--home-heading-size);
  font-weight: 550;
  line-height: 1.2;
  margin-bottom: 0.5em;
  color: transparent;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.473) 0%,
      #fff 30%,
      rgba(0, 0, 0, 0.3) 50%,
      #fff 70%,
      rgba(0, 0, 0, 0.5) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradientFlow 5s ease-in-out infinite;
  position: relative;
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.home-subheading {
  font-size: var(--home-subheading-size);
  font-weight: 250;
  line-height: 1.4;
  margin-bottom: 0.5em;
  color: transparent;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.473) 0%,
      #fff 30%,
      rgba(0, 0, 0, 0.3) 50%,
      #fff 70%,
      rgba(0, 0, 0, 0.5) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradientFlow 5s ease-in-out infinite;
  /* animation-delay: 0.5s; */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.home-scroll-link {
  display: inline-flex;
  align-items: center;
  font-size: var(--home-link-size);
  font-weight: var(--home-scroll-link-weight);
  color: transparent;
  text-decoration: none;
  margin-top: var(--home-scroll-link-margin-top, -0.6em);
  position: relative;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.473) 0%,
      #fff 30%,
      rgba(0, 0, 0, 0.3) 50%,
      #fff 70%,
      rgba(0, 0, 0, 0.5) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  animation: gradientFlow 5s ease-in-out infinite;
  /* animation-delay: 1s; */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.home-scroll-link:hover {
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.scroll-arrow {
  display: inline-block;
  margin-left: 0.5em;
  font-size: 1.2em;
  font-weight: var(--home-scroll-arrow-weight);
  color: #fff;
  /* Solid color for better visibility */
  opacity: 1;
  position: relative;
  z-index: 1;
  animation:
    gentlePulse 2s ease-in-out infinite,
    bounce 2s ease-in-out infinite;
  animation-delay: 0.5s, 0s;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  transform-origin: center bottom;
}

.home-scroll-link:hover .scroll-arrow {
  animation: gentlePulse 1.5s ease-in-out infinite, bounce 1.5s ease-in-out infinite;
  animation-delay: 0.5s, 0s;
}

/* ==========================================
   Responsive Adjustments - Positioning and Font Sizes
   ========================================== */

/* Phones: Portrait – iPhone SE, old Androids, Mini devices */
@media (max-width: 479px) {
  .headline {
    left: 0rem;
    top: clamp(5rem, 9rem, 15rem);
    text-align: left;
  }

  :root {
    --home-heading-size: clamp(0.8rem, 1.0rem, 1.3rem);
    --home-subheading-size: clamp(2.0rem, 2.1rem, 2.8rem);
    --home-link-size: clamp(0.8rem, 1.0rem, 1.3rem);
    --home-scroll-link-margin-top: clamp(-1.0rem, -0.0rem, 1.0rem);
    --glass-border-radius: 1.0rem
  }
}

/* Phones: Landscape & large phones portrait – iPhone X–15, Galaxy S22–S24 Ultra */
@media (min-width: 480px) and (max-width: 767px) {
  .headline {
    left: 0rem;
    top: clamp(5rem, 9.5rem, 15rem);
    text-align: left;
  }

  :root {
    --home-heading-size: clamp(1rem, 1.1rem, 1.4rem);
    --home-subheading-size: clamp(2rem, 2.5rem, 3.2rem);
    --home-link-size: clamp(1rem, 1.1rem, 1.4rem);
    --home-scroll-link-margin-top: clamp(-1.0rem, -0.2rem, 1.0rem);
    --glass-border-radius: 1.0rem
  }
}

/* Tablets: Portrait – iPad Mini, Galaxy Tab, foldables */
@media (min-width: 768px) and (max-width: 991px) {
  .headline {
    left: 0rem;
    top: clamp(5rem, 12.0rem, 15rem);
    text-align: left;
  }

  :root {
    --home-heading-size: clamp(1rem, 1.5rem, 2.0rem);
    --home-subheading-size: clamp(3rem, 4.2rem, 5.8rem);
    --home-link-size: clamp(1rem, 1.5rem, 2.0rem);
    --home-scroll-link-margin-top: clamp(-2.0rem, -0.95rem, 20rem);
    --glass-border-radius: 1.0rem
  }
}



/* Tablets: Landscape / Small Laptops – iPad Pro landscape, 13" laptops */
@media (min-width: 992px) and (max-width: 1279px) {
  .headline {
    left: 0rem;
    top: clamp(5rem, 13.5rem, 15rem);
    text-align: left;
  }

  :root {
    --home-heading-size: clamp(1rem, 1.8rem, 2.3rem);
    --home-subheading-size: clamp(3rem, 5.2rem, 6.5rem);
    --home-link-size: clamp(1rem, 1.8rem, 2.3rem);
    --home-scroll-link-margin-top: clamp(-2.0rem, -1.25rem, 2rem);
    --glass-border-radius: 1.0rem
  }
}


/* Laptops & MacBooks – MacBook Air, Pro 13/14/16, desktops */
@media (min-width: 1280px) and (max-width: 1919px) {
  .headline {
    left: clamp(-16, -16.5vw, -17vw);
    top: clamp(44vh, 45vh, 46vh);
    text-align: left;
  }

  :root {
    --home-heading-size: clamp(1rem, 2.1rem, 2.8rem);
    --home-subheading-size: clamp(3rem, 6.0rem, 6.8rem);
    --home-link-size: clamp(1rem, 2.1rem, 2.8rem);
    --home-scroll-link-margin-top: clamp(-2.0rem, -1.6rem, 2rem);
    --glass-border-radius: 1.0rem
  }
}

/* Ultra-wide / 2K / 4K Monitors – high-end desktops */
@media (min-width: 1920px) {
  .headline {
    left: clamp(-16, -16.5vw, -17vw);
    top: clamp(44vh, 45vh, 46vh);
    text-align: left;
  }

  :root {
    --home-heading-size: clamp(1rem, 2.2rem, 2.8rem);
    --home-subheading-size: clamp(6rem, 6.5rem, 7.0rem);
    --home-link-size: clamp(1rem, 2.2rem, 2.8rem);
    --home-scroll-link-margin-top: clamp(-2.0rem, -1.65rem, 2rem);
    --glass-border-radius: 1.0rem
  }
}





/* Dark/Light mode support */
[color-scheme="dark"] .home-heading,
[color-scheme="dark"] .home-subheading,
[color-scheme="dark"] .home-scroll-link {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

[color-scheme="light"] .home-heading,
[color-scheme="light"] .home-subheading,
[color-scheme="light"] .home-scroll-link {
  color: #000000;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}

/* ------------------------------------------------*/
/* About Me Section Styles Start */
/* ------------------------------------------------*/
.about-section-container {
  margin-top: 7rem;
}

/* About Grid Layout */
.about-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(100px, auto);
  grid-gap: 20px;
  width: 100%;

}

/* Tile Base Styles */
.about-tile {
  background-color: var(--base);
  border: 1px solid var(--stroke-elements);
  border-radius: var(--_radius);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Photo Tile - Large */
.about-photo-tile {
  grid-column: 1 / 7;
  grid-row: 1 / 4;
  height: 100%;
  border: none;
  background-color: transparent;
}

.about-photo-container {
  width: 100%;
  height: 100%;
  min-height: 700px;
  aspect-ratio: 3/4;
}

.about-photo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Info Tile */
.about-info-tile {
  grid-column: 7 / 13;
  grid-row: 2 / 3;
  padding: 2.6rem 3rem;
}

.about-info-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  height: 100%;
  text-align: left;
  margin-top: 0;
}

.about-info__item {
  margin-bottom: 0.5rem;
}

.about-info__item h6 {
  margin-bottom: 0;
  font-weight: var(--font-weight-medium--light);
}

.about-info__item a {
  display: flex;
  align-items: center;
  gap: 1.0rem;
}

.about-info__item i {
  font-size: 2rem;
  color: var(--t-medium);
}

/* Text Tile with Title */
.about-text-tile {
  grid-column: 7 / 13;
  grid-row: 1 / 2;
  padding: 2.6rem 3rem;
}

.about-text-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  margin-top: 0;
}

.about-name-header {
  margin-bottom: 1.5rem;
}

.about-name-header h4 {
  font-size: 2.8rem;
  font-weight: var(--font-weight-medium--light);
  color: var(--t-bright);
  margin-bottom: 0;
  margin-top: 0;
}



.about-descr__text {
  margin-bottom: 0;
  font-size: 2.5rem;
  line-height: 1.6;
  color: var(--t-bright);
  margin-top: 0;
}

/* Button Tile */
.about-cv-tile {
  grid-column: 7 / 13;
  grid-row: 3 / 4;
  padding: 2.6rem 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

.about-descr__btnholder {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  justify-content: center;
  margin-top: 0;
}

/* Responsive Styles */

/* Mobile - Extra Small */
@media (max-width: 479px) {

  .about-section-container {
    margin-top: 4.5rem;
    margin-bottom: 0rem;
  }

  .about-grid {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 20px;
  }

  .about-photo-tile {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    /* height: 400px; */
  }

  .about-photo-container {
    min-height: 0px;
    /* height: 450px; */
  }

  .about-text-tile {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .about-info-tile {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  .about-cv-tile {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }

  .about-name-header h4 {
    font-size: 2.2rem;
  }

  .about-descr__text {
    font-size: 1.8rem;
    line-height: 1.5;
  }

  .about-info__item i {
    font-size: 1.8rem;
  }

  .about-info-content a {
    font-size: 1.8rem;
  }

  /* .btn {
    font-size: 1.7rem;
  } */

  .about-info-tile,
  .about-text-tile,
  .about-cv-tile {
    padding: 15px;
  }
}

/* Mobile - Small */
@media (min-width: 480px) and (max-width: 767px) {

  .about-section-container {
    margin-top: 5rem;
    margin-bottom: -12.0rem;
  }

  .about-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
  }

  .about-photo-tile {
    grid-column: 1 / 7;
    grid-row: 1 / 4;
    height: 400px;
  }

  .about-photo-container {
    min-height: 0px;
    height: 400px;
  }

  .about-text-tile {
    grid-column: 7 / 13;
    grid-row: 1 / 2;
    height: 400px;
  }

  .about-info-tile {
    grid-column: 7 / 13;
    grid-row: 2 / 3;
  }

  .about-cv-tile {
    grid-column: 1 / 7;
    grid-row: 2 / 3;

  }

  .about-name-header h4 {
    font-size: 2.5rem;
  }

  .about-descr__text {
    font-size: 1.8rem;
    line-height: 1.5;
  }

  .about-info__item i {
    font-size: 1.8rem;
  }

  .about-info-content a {
    font-size: 1.8rem;
  }

  /* .btn {
    font-size: 1.36rem;
  } */

  .about-info-tile,
  .about-text-tile,
  .about-cv-tile {
    padding: 15px;
  }
}

/* Tablet - Medium */
@media (min-width: 768px) and (max-width: 991px) {
  .about-section-container {
    margin-top: 5.5rem;
    margin-bottom: -13.5rem;
  }

  .about-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
  }

  .about-photo-tile {
    grid-column: 1 / 7;
    grid-row: 1 / 4;
    height: 500px;
  }

  .about-photo-container {
    min-height: 0px;
    height: 500px;
  }

  .about-text-tile {
    grid-column: 7 / 13;
    grid-row: 1 / 2;
    height: 500px;
  }

  .about-info-tile {
    grid-column: 7 / 13;
    grid-row: 2 / 3;
  }

  .about-cv-tile {
    grid-column: 1 / 7;
    grid-row: 2 / 3;

  }

  .about-name-header h4 {
    font-size: 2.5rem;
  }

  .about-descr__text {
    font-size: 1.8rem;
    line-height: 1.5;
  }

  .about-info__item i {
    font-size: 1.8rem;
  }

  .about-info-content a {
    font-size: 1.8rem;
  }

  /* .btn {
    font-size: 1.7rem;
  } */

  .about-info-tile,
  .about-text-tile,
  .about-cv-tile {
    padding: 15px;
  }
}

/* Desktop - Small */
@media (min-width: 992px) and (max-width: 1279px) {
  .about-section-container {
    margin-top: 7.0rem;
    margin-bottom: -1.5rem;
  }

  .about-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
  }

  .about-photo-tile {
    grid-column: 1 / 7;
    grid-row: 1 / 4;
    /* height: 400px; */
  }

  .about-photo-container {
    min-height: 0px;
    /* height: 400px; */
  }

  .about-text-tile {
    grid-column: 7 / 13;
    grid-row: 1 / 2;
    /* height: 400px; */
  }

  .about-info-tile {
    grid-column: 7 / 13;
    grid-row: 2 / 3;
  }

  .about-cv-tile {
    grid-column: 7 / 13;
    grid-row: 3 / 4;

  }

  .about-name-header h4 {
    font-size: 2.5rem;
  }

  .about-descr__text {
    font-size: 1.8rem;
    line-height: 1.5;
  }

  .about-info__item i {
    font-size: 1.8rem;
  }

  .about-info-content a {
    font-size: 1.8rem;
  }

  /* .btn {
    font-size: 1.7rem;
  } */

  .about-info-tile,
  .about-text-tile,
  .about-cv-tile {
    padding: 15px;
  }
}

/* Desktop - Medium */
@media (min-width: 1280px) and (max-width: 1366px) {
  .about-section-container {
    margin-top: 6.5rem;
    margin-bottom: -13.0rem;
  }

  .about-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
  }

  .about-photo-tile {
    grid-column: 1 / 7;
    grid-row: 1 / 4;
    height: 600px;
  }

  .about-photo-container {
    min-height: 0px;
    height: 600px;
  }

  .about-text-tile {
    grid-column: 7 / 13;
    grid-row: 1 / 2;
    height: 600px;
  }

  .about-info-tile {
    grid-column: 7 / 13;
    grid-row: 2 / 3;
  }

  .about-cv-tile {
    grid-column: 1 / 7;
    grid-row: 2 / 3;

  }

  .about-name-header h4 {
    font-size: 2.7rem;
  }

  .about-descr__text {
    font-size: 2.0rem;
    line-height: 1.5;
  }

  .about-info__item i {
    font-size: 2.0rem;
  }

  .about-info-content a {
    font-size: 2.0rem;
  }

  /* .btn {
    font-size: 1.7rem;
  } */

  .about-info-tile,
  .about-text-tile,
  .about-cv-tile {
    padding: 20px;
  }
}

/* Desktop - Large */
@media (min-width: 1920px) {
  .about-section-container {
    margin-top: 8.5rem;
    margin-bottom: -2.5rem;
  }

  .about-grid {
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
  }

  .about-photo-tile {
    grid-column: 1 / 7;
    grid-row: 1 / 4;
    /* height: 400px; */
  }

  .about-photo-container {
    min-height: 0px;
    /* height: 400px; */
  }

  .about-text-tile {
    grid-column: 7 / 13;
    grid-row: 1 / 2;
    /* height: 400px; */
  }

  .about-info-tile {
    grid-column: 7 / 13;
    grid-row: 2 / 3;
  }

  .about-cv-tile {
    grid-column: 7 / 13;
    grid-row: 3 / 4;

  }

  .about-name-header h4 {
    font-size: 3.0rem;
  }

  .about-descr__text {
    font-size: 2.5rem;
    line-height: 1.5;
  }

  .about-info__item i {
    font-size: 2.5rem;
  }

  .about-info-content a {
    font-size: 2.5rem;
  }

  /* .btn {
    font-size: 1.7rem;
  } */

  .about-info-tile,
  .about-text-tile,
  .about-cv-tile {
    padding: 20px;
  }
}

/* Dark Mode Styles */
[color-scheme=dark] .about-tile {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

[color-scheme=dark] .about-photo-placeholder {
  background-image: linear-gradient(45deg, var(--base-shade), var(--base-tint));
}

/* ------------------------------------------------*/
/* About Me Section Styles End */
/* ------------------------------------------------*/

/* ------------------------------------------------*/
/* Services Section Icon Styles Start */
/* ------------------------------------------------*/
/* .service-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
}

.service-icon img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.service-icon img:hover {
  transform: scale(1.1);
} */

/* Make sure the cards have relative positioning for absolute positioning of icons */
.cards__card {
  position: relative;
}

@media only screen and (max-width: 767px) and (orientation: landscape) {

  /* Force two columns for services grid on small screens in landscape */
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
  }
}

/* ------------------------------------------------*/
/* Services Section Icon Styles End */
/* ------------------------------------------------*/