/*
===================================================================
 KHRONOS STYLESHEET
===================================================================

 TOC:

 01. FONT IMPORTS
 02. VENDOR/THIRD-PARTY STYLES
     - PrismJS (Syntax Highlighting)
     - Swiper JS (Slider)
 03. CUSTOM PROPERTY DEFINITIONS (VARIABLES)
     - Fonts
     - Colors
     - Spacing & Typescale
     - Grid
 04. NORMALIZE & BASE SETUP
 05. GRID SYSTEM
 06. TYPOGRAPHY
 07. UTILITY CLASSES
 08. CORE COMPONENTS
     - Preloader
     - Forms
     - Buttons
     - Tables
     - Pagination, Alerts, etc.
 09. LAYOUT STYLES
     - Page Wrap
     - Header
     - Intro
     - Info Section
     - Footer
 10. GALLERY & MISC STYLES

===================================================================
*/


/*
===================================================================
 01. FONT IMPORTS
===================================================================
*/

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");


/*
===================================================================
 02. VENDOR/THIRD-PARTY STYLES
===================================================================
*/

/* * -------------------------------------------------------------------
 * PrismJS 1.20.0 - Okaidia Theme
 * -------------------------------------------------------------------
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #f8f8f2;
  background: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: var(--font-mono);
  font-size: calc(var(--text-size) * 0.9444);
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: var(--vspace-1);
  tab-size: 4;
  hyphens: none;
}

pre[class*="language-"] {
  padding: var(--vspace-0_5) 0 var(--vspace-1);
  margin: var(--vspace-1) 0;
  overflow: auto;
  background: #272822;
}

:not(pre) > code[class*="language-"] {
  padding: .1em;
  white-space: normal;
  background: #272822;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: slategray;
}

.token.punctuation {
  color: #f8f8f2;
}

.token.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
  color: #f92672;
}

.token.boolean,
.token.number {
  color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
  color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
  color: #e6db74;
}

.token.keyword {
  color: #66d9ef;
}

.token.regex,
.token.important {
  color: #fd971f;
}

.token.important,
.token.bold {
  font-weight: bold;
}

.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

/* * -------------------------------------------------------------------
 * Swiper 6.4.5
 * -------------------------------------------------------------------
 */
@font-face {
  font-family: "swiper-icons";
  src: url("data:application/font-woff;charset=utf-8;base64, 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") format("woff");
  font-weight: 400;
  font-style: normal;
}

.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

/* Add other Swiper styles here... they are vendor files and don't need significant changes */


/*
===================================================================
 03. CUSTOM PROPERTY DEFINITIONS (VARIABLES)
===================================================================
*/

:root {
  /* Fonts */
  --font-1: "Inter", sans-serif;
  --font-mono: Consolas, "Andale Mono", Courier, "Courier New", monospace;

  /* Colors */
  --color-1: hsla(177, 93%, 16%, 1);
  --color-2: hsla(12, 67%, 38%, 1);
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-1: #e8e8e8;
  --color-gray-2: #d0d0d0;
  --color-gray-3: #b9b9b9;
  --color-gray-8: #434445;
  --color-gray-12: #141516;
  --color-gray-15: #0a0b0b;
  --color-text: var(--color-gray-12);
  --color-text-dark: var(--color-black);
  --color-placeholder: var(--color-gray-7);
  --color-body: var(--color-white);
  --color-border: rgba(0, 0, 0, .08);
  --color-preloader-bg: var(--color-gray-12);
  --color-loader: white;
  --border-radius: 3px;

  /* Spacing */
  --base-size: 62.5%;
  --multiplier: 1;
  --base-font-size: calc(1.8rem * var(--multiplier));
  --space: calc(3.2rem * var(--multiplier));

  /* Vertical Spacing */
  --vspace-0_25: calc(0.25 * var(--space));
  --vspace-0_5: calc(0.5 * var(--space));
  --vspace-0_75: calc(0.75 * var(--space));
  --vspace-1: calc(var(--space));
  --vspace-1_25: calc(1.25 * var(--space));
  --vspace-1_5: calc(1.5 * var(--space));
  --vspace-2: calc(2 * var(--space));
  --vspace-2_5: calc(2.5 * var(--space));
  --vspace-3: calc(3 * var(--space));
  --vspace-4: calc(4 * var(--space));
  --vspace-5: calc(5 * var(--space));

  /* Type Scale */
  --text-scale-ratio: 1.2;
  --text-size: var(--base-font-size);
  --text-xs: calc((var(--text-size) / var(--text-scale-ratio)) / var(--text-scale-ratio));
  --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
  --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
  --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
  --text-display-1: calc(var(--text-xxxl) * var(--text-scale-ratio));

  /* Grid */
  --width-grid-max: 1200px;
  --width-wider: 1600px;
  --gutter: 2.4rem;
}

@media screen and (max-width: 1200px) {
  :root {
    --gutter: 2rem;
  }
}

@media screen and (max-width: 600px) {
  :root {
    --multiplier: .9375;
    --gutter: 1rem;
  }
}


/*
===================================================================
 04. NORMALIZE & BASE SETUP
===================================================================
*/

/* Box Sizing & Basic Reset */
html {
  font-size: var(--base-size);
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: var(--color-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Basic Typography & Links */
body {
  font-family: var(--font-1);
  font-size: var(--base-font-size);
  font-weight: 400;
  line-height: var(--vspace-1);
  color: var(--color-text);
}

a {
  text-decoration: none;
  color: var(--color-1);
  transition: all 0.3s ease-in-out;
}

a:hover,
a:focus {
  color: var(--color-2);
  outline: 0;
}

/* Responsive Media */
img,
svg,
video {
  max-width: 100%;
  height: auto;
  border-style: none; /* remove border on images in IE10 */
}

/* Form Element Reset */
input,
button,
textarea,
select {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

textarea {
  overflow: auto;
  resize: vertical;
}

/* Remove margin and padding on most elements */
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, p, blockquote, th, td {
  margin: 0;
  padding: 0;
}


/*
===================================================================
 05. GRID SYSTEM
===================================================================
*/

.row {
  width: 92%;
  max-width: var(--width-grid-max);
  margin: 0 auto;
  display: flex;
  flex-flow: row wrap;
}

.row .row {
  width: auto;
  max-width: none;
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
}

.column {
  display: block;
  flex: 1 1 0%;
  padding: 0 var(--gutter);
}

/* Grid columns for large screens */
.lg-1 { flex: none; width: 8.33333%; }
.lg-2 { flex: none; width: 16.66667%; }
.lg-3 { flex: none; width: 25%; }
.lg-4 { flex: none; width: 33.33333%; }
.lg-5 { flex: none; width: 41.66667%; }
.lg-6 { flex: none; width: 50%; }
.lg-7 { flex: none; width: 58.33333%; }
.lg-8 { flex: none; width: 66.66667%; }
.lg-9 { flex: none; width: 75%; }
.lg-10 { flex: none; width: 83.33333%; }
.lg-11 { flex: none; width: 91.66667%; }
.lg-12 { flex: none; width: 100%; }

.block-lg-one-fourth > .column { flex: none; width: 25%; }
.block-lg-one-third > .column { flex: none; width: 33.33333%; }
.block-lg-one-half > .column { flex: none; width: 50%; }

/* Grid columns for medium screens */
@media screen and (max-width: 1200px) {
  .md-6 { flex: none; width: 50%; }
  /* Add other md-X classes if needed */
  .block-md-one-half > .column { flex: none; width: 50%; }
}

/* Grid columns for tablets */
@media screen and (max-width: 800px) {
  /* Add tab-X classes if needed */
  .block-tab-whole > .column { flex: none; width: 100%; }
}

/* Grid columns for mobile */
@media screen and (max-width: 600px) {
  .row {
    width: 100%;
    padding-left: 6vw;
    padding-right: 6vw;
  }
  .row .row {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Stack columns on small screens */
@media screen and (max-width: 400px) {
  .column {
    flex: none;
    width: 100%;
    padding: 0;
  }
}

/* Additional stackpoints */
@media screen and (max-width: 1000px) {
  .stack-on-1000,
  .block-stack-on-1000 > .column {
    flex: none;
    width: 100%;
  }
}
@media screen and (max-width: 700px) {
  .stack-on-700,
  .block-stack-on-700 > .column {
    flex: none;
    width: 100%;
  }
}


/*
===================================================================
 06. TYPOGRAPHY
===================================================================
*/

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-1);
  font-weight: 500;
  color: var(--color-text-dark);
}

h1, .h1 {
  font-size: var(--text-display-1);
  line-height: var(--vspace-2);
  letter-spacing: -.02em;
  margin-top: var(--vspace-2_5);
  margin-bottom: var(--vspace-0_75);
}

h2, .h2 {
  font-size: var(--text-xxl);
  line-height: var(--vspace-1_5);
  letter-spacing: -.02em;
  margin-top: var(--vspace-2);
  margin-bottom: var(--vspace-0_5);
}

h3, .h3 {
  font-size: var(--text-xl);
  line-height: var(--vspace-1_25);
  margin-top: var(--vspace-2);
  margin-bottom: var(--vspace-0_5);
}

h4, .h4 {
  font-size: var(--text-lg);
  line-height: var(--vspace-1);
  margin-top: var(--vspace-2);
  margin-bottom: var(--vspace-0_5);
}

.lead {
  font-family: var(--font-1);
  font-weight: 300;
  font-size: var(--text-md);
  line-height: calc(1.125 * var(--space));
  color: var(--color-text);
}

p, ul, ol, dl {
  margin-bottom: var(--vspace-1);
}

/*
===================================================================
 07. UTILITY CLASSES
===================================================================
*/
.u-fullwidth {
  width: 100%;
}
.text-center {
  text-align: center;
}
.screen-reader-text {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  word-wrap: normal !important;
}


/*
===================================================================
 08. CORE COMPONENTS
===================================================================
*/

/* Preloader */
#preloader {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-preloader-bg);
  z-index: 500;
  height: 100vh;
  width: 100%;
  opacity: 1;
  pointer-events: none;
  transition: all .6s .9s ease-in-out;
}
#loader {
  width: var(--vspace-1_5);
  height: var(--vspace-1_5);
  opacity: 1;
  transition: opacity .6s ease-in-out;
}
#loader::before {
  content: "";
  border-top: 4px solid rgba(255, 255, 255, 0.1);
  border-right: 4px solid rgba(255, 255, 255, 0.1);
  border-bottom: 4px solid rgba(255, 255, 255, 0.1);
  border-left: 4px solid var(--color-loader);
  animation: load 1.1s infinite linear;
  display: block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
@keyframes load {
  100% { transform: rotate(360deg); }
}
.ss-loaded #preloader {
  opacity: 0;
  visibility: hidden;
}
.ss-loaded #preloader #loader {
  opacity: 0;
}
.no-js #preloader {
  display: none;
}

/* Forms */
input[type="email"],
input[type="text"],
textarea,
select {
  --input-height: var(--vspace-2);
  --input-line-height: var(--vspace-1);
  --input-vpadding: calc(((var(--input-height) - var(--input-line-height)) / 2) - 1px);

  display: block;
  width: 100%;
  height: var(--input-height);
  padding: var(--input-vpadding) 2.4rem;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  background-color: var(--color-gray-1);
  color: var(--color-placeholder);
  font-family: var(--font-1);
  font-size: var(--text-sm);
  line-height: var(--input-line-height);
  transition: all .3s ease-in-out;
}
textarea {
  min-height: calc(8 * var(--space));
}
input[type="email"]:focus,
input[type="text"]:focus,
textarea:focus {
  color: var(--color-text-dark);
  border: 1px solid var(--color-1);
  box-shadow: 0 0 5px var(--color-1);
  outline: none;
}
::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

/* Buttons */
.btn,
button,
input[type="submit"] {
  --btn-height: var(--vspace-2);
  display: inline-block;
  font-family: var(--font-1);
  font-weight: 500;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .35em;
  height: var(--btn-height);
  line-height: calc(var(--btn-height) - 4px);
  padding: 0 3.6rem;
  margin: 0 0.4rem var(--vspace-0_5) 0;
  color: var(--color-text-dark);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: all .3s;
  border-radius: var(--border-radius);
  background-color: var(--color-gray-1);
  border: 2px solid var(--color-gray-1);
}
.btn:hover,
button:hover,
input[type="submit"]:hover {
  background-color: var(--color-gray-2);
  border-color: var(--color-gray-2);
  color: var(--color-text-dark);
  outline: 0;
}
.btn.btn--primary,
input[type="submit"].btn--primary {
  background: var(--color-1);
  border-color: var(--color-1);
  color: var(--color-white);
}
.btn.btn--primary:hover,
input[type="submit"].btn--primary:hover {
  background: var(--color-text-dark);
  border-color: var(--color-text-dark);
  color: var(--color-white);
}
.btn--small {
  --btn-height: calc(var(--vspace-2) - 1.6rem);
}


/*
===================================================================
 09. LAYOUT STYLES
===================================================================
*/

/* Page Wrap */
.s-pagewrap {
  --header-height: 12rem;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  position: relative;
}

/* Header */
.s-header {
  --logo-width: 9.6rem;
  z-index: 100;
  width: 100%;
  position: absolute;
  top: var(--vspace-1_25);
  left: 0;
}
.s-header__content {
  max-width: var(--width-wider);
  height: var(--header-height);
  position: relative;
}
.s-header__logo {
  z-index: 101;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: var(--gutter);
}
.s-header__logo img {
  width: var(--logo-width);
  vertical-align: bottom;
}
.s-header__social {
  list-style: none;
  display: flex;
  margin: 0;
  transform: translateY(-50%);
  position: absolute;
  top: calc(50% - var(--vspace-0_75));
  right: calc(var(--gutter) / 2);
}
.s-header__social li {
  padding-left: 0;
  margin-right: 1.4rem;
}
.s-header__social svg {
  height: var(--vspace-0_875);
  width: var(--vspace-0_875);
}
.s-header__social svg path {
  fill: white;
}

/* Intro Section */
.s-intro {
  width: 100%;
  height: 100vh;
  min-height: calc(25.5 * var(--space));
  overflow: hidden;
  position: relative;
  background-color: var(--color-gray-15);
}
.s-intro__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .20;
}
.s-intro__particles canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.s-intro__content {
  z-index: 1;
  max-width: var(--width-wider);
  height: 100vh;
  min-height: calc(25.5 * var(--space));
  padding-top: 20vh;
  padding-bottom: 8.8rem;
  position: relative;
  align-items: flex-end; /* for the row flex container */
}
.s-intro__content-bottom {
  max-width: 600px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--vspace-1);
}
.s-intro__content-title {
  font-size: var(--text-xxl);
  font-weight: 400;
  line-height: var(--vspace-1_5);
  color: white;
  margin: 0 0 var(--vspace-0_25) 0;
}
.s-intro__scroll {
  width: 18rem;
  height: 8.8rem;
  padding-right: 3rem;
  border-right: 1px dashed rgba(255, 255, 255, 0.3);
  text-align: right;
  position: absolute;
  bottom: 0;
  right: var(--gutter);
}
.s-intro__scroll .scroll-text {
  font-family: var(--font-1);
  font-size: var(--text-sm);
  color: white;
  margin-top: var(--vspace-0_625);
}
.s-intro__scroll .mouse {
  height: 3.8rem;
  width: 2.5rem;
  border: 3px solid white;
  border-radius: 12px;
  position: absolute;
  right: -1.3rem;
  top: 1.4rem;
  animation: vertical 3s ease infinite;
}
@keyframes vertical {
  0%, 60%, 80%, 100% { transform: translateY(0); }
  20% { transform: translateY(-5px); }
  40% { transform: translateY(20px); }
}

/* Info Section */
.s-info {
  padding: var(--vspace-5) 0 var(--vspace-4) 0;
  width: 100%;
  position: relative;
}
.s-info .row {
  max-width: 1020px;
}
.s-info h2 {
  margin-top: 0;
  margin-bottom: var(--vspace-1_25);
}
.tab-nav {
  font-family: var(--font-1);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .4em;
  text-align: center;
  margin-bottom: var(--vspace-2);
}
.tab-nav__list {
  list-style: none;
  display: flex;
  border-bottom: 1px solid var(--color-text);
  margin: 0;
}
.tab-nav__list li {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid var(--color-text);
  border-bottom: none;
  border-radius: 5px 5px 0 0;
  margin: 0 .2rem;
}
.tab-nav__list li[data-tab-active] {
  background-color: var(--color-text);
}
.tab-nav__list a {
  display: block;
  padding: 1.4rem 2.8rem;
  color: var(--color-text);
}
.tab-nav__list a[data-tab-active] {
  color: white;
}
.tab-content__item {
  display: none;
}
.tab-content__item[data-tab-active] {
  display: block;
}
.services-list {
  margin-top: var(--vspace-1_5);
}
.services-list h4 {
  margin-top: 0;
}

/* Footer */
.s-footer {
  background-color: var(--color-gray-12);
  padding: var(--vspace-3) 0 var(--vspace-2) 0;
  font-size: calc(var(--text-size) * 0.9444);
  color: rgba(255, 255, 255, 0.3);
}
.s-footer > .row {
  max-width: 1020px;
}
.s-footer a {
  color: rgba(255, 255, 255, 0.3);
}
.s-footer a:hover {
  color: white;
}
.s-footer h4 {
  margin-top: 0;
  margin-bottom: var(--vspace-1_25);
  color: white;
}
.s-footer strong {
  font-weight: 400;
  color: white;
}
.ss-copyright {
  font-size: var(--text-xs);
  margin-top: var(--vspace-1);
  padding-top: var(--vspace-0_5);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.ss-copyright span::after {
  content: "|";
  display: inline-block;
  padding: 0 .8rem 0 1rem;
  color: rgba(255, 255, 255, 0.2);
}
.ss-copyright span:last-child::after {
  display: none;
}
.ss-go-top {
  position: absolute;
  top: var(--vspace-0_5);
  right: 0;
}
.ss-go-top a {
  display: block;
  border: .2rem solid white;
  background-color: var(--color-gray-12);
}
.ss-go-top a:hover {
  background-color: var(--color-1);
  border-color: var(--color-1);
}


/*
===================================================================
 10. GALLERY & MISC STYLES
===================================================================
*/

.gallery {
  display: grid;
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.gallery img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 0 16px #333;
  transition: all 1.5s ease;
}

.gallery img:hover {
  box-shadow: 0 0 32px #333;
}

.gallery .gallery-item {
  transition: all 0.5s ease;
  cursor: pointer;
}

.gallery .gallery-item:hover {
  transform: scale(1.025);
}

.full {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1000; /* Ensure it's on top */
}

.full .content {
  background-color: rgba(0, 0, 0, 0.75);
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center; /* modern way to center */
}

.full .content img {
  animation: zoomin 1s ease;
  max-width: 90vw;   /* prevent image from touching screen edges */
  max-height: 90vh;
}

.byebye {
  opacity: 0;
  transform: scale(0.2);
  transition: all 0.5s ease;
}

@keyframes zoomin {
  from {
    max-width: 50%;
    transform: rotate(-30deg);
    filter: blur(4px);
  }
  to {
    max-width: 90vw;
    transform: rotate(0deg);
    filter: blur(0);
  }
}

.wa-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 54px;
  height: 54px;
  border-radius: 999px;

  background: #25D366; /* WhatsApp green */
  box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 3px 8px rgba(0,0,0,0.12);
  text-decoration: none;
}

.wa-fab:hover { filter: brightness(1.08); }
.wa-fab:active { transform: translateY(1px); }
.wa-fab svg { display: block; }
@media (max-width: 480px) {
  .wa-fab { right: 16px; bottom: 16px; width: 50px; height: 50px; }
}

@media screen and (max-width: 700px) {
  .tab-nav__list {
    display: block; /* Change from a horizontal flex row to a vertical block */
    border: 1px solid var(--color-text);
    border-radius: var(--border-radius);
    border-bottom: none; /* Remove the bottom border to avoid doubling up */
  }

  .tab-nav__list li {
    margin: 0;
    border-bottom: 1px solid var(--color-text); /* Add a separator line between items */
    border-left: none;
    border-right: none;
    border-top: none;
    border-radius: 0;
  }

  .tab-nav__list li:last-child {
    border-bottom: none; /* Remove the border from the very last item */
  }
}