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

:root {
  font-size: 16px;
  --color-text: #f3f3f3;
  --color-bg: #0f0e0e;
  --color-link: #f3f3f3;
  --color-link-hover: #b6970f;
  --page-padding: 2rem 3rem;
}

@font-face {
  font-family: "AlegrosPersonalUse-qZL5qr";
  src: url("../fonts/AlegrosPersonalUse-qZL5q.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "capsule3regular";
  src: url("../fonts/capsule3-webfont.woff2") format("woff2"),
    url("../fonts/capsule3-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: clamp(30px, 5.5vw, 7vw);
  font-weight: 500;
  font-family: "AlegrosPersonalUse-qZL5qr", serif;
  position: relative; /* Position the element absolutely */
  /* top: -15px; Position at the top of its container */

  text-transform: uppercase;
}

h2 {
  font-family: "Kalnia", serif;
  text-transform: none;
}

h3 {
  font-family: "Kalnia", serif;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
}

html,
body {
  width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-family: "oculi-display", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page Loader */
.js .loading::before,
.js .loading::after {
  content: "";
  position: fixed;
  z-index: 5000;
}

.js .loading::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
}

.js .loading::after {
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  border-radius: 50%;
  opacity: 0.4;
  background: var(--color-link);
  animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(0.5, 0.5, 1);
  }
}

a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
  cursor: pointer;
}

a:hover {
  color: var(--color-link-hover);
  outline: none;
}

.h1margin {
  margin-bottom: 4vw;
}

.content {
  height: 80vh;
  margin: 15vh auto;
  display: grid;
  place-items: center;
}

.content-footer {
  margin: 15vh auto;
  display: grid;
  place-items: center;
  margin-bottom: -30vh;
}

.content--flex {
  display: flex;
  justify-content: center;
}

.content--more {
  margin-top: 40vh;
}

.content--text {
  place-items: initial;
  align-content: center;
  max-width: 950px;
  padding: 0 10vw;
  margin: 0 0 0 auto;
}

.content > h4 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 4vw;
  font-weight: 500;
  font-family: "AlegrosPersonalUse-qZL5qr", serif;
  z-index: 2;
}

.content > p {
  font-weight: 300;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  line-height: 1.25;
  z-index: 2;
}

.content__title {
  font-size: 2rem;
  font-weight: normal;
}

.poster {
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  --offset-x: 0%;
  --offset-y: 0%;
}

.poster--half {
  height: 28vw;
}

.poster__inner {
  width: calc(100% + var(--offset-x) * 2);
  height: calc(100% + var(--offset-y) * 2);
  background-size: cover;
  background-position: 50% 50%;
}

.poster__inner video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.poster__inner--fixed {
  background-attachment: fixed;
}

.font-7 {
  font-family: "capsule3regular", sans-serif;
  font-weight: 400;
}

.font-1 {
  font-family: "AlegrosPersonalUse-qZL5qr";
  font-weight: 800;
  font-style: normal;
}

.font-9 {
  font-family: gigantic, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

.size-1 {
  font-size: 70vw;
}

.size-2 {
  font-size: 18rem;
}

.size-3 {
  font-size: 30vw;
}

.size-4 {
  font-size: 25vw;
}

svg {
  opacity: 0;
  position: absolute;
  pointer-events: none;
  width: 100%;
  height: 100vh;
  overflow: visible;
}

.h-200 {
  height: 200vh;
}

.w-25 {
  width: 50vw;
}

svg text {
  line-height: 1;
}

.card-wrap {
  margin-top: 5vh;
  display: grid;
  grid-gap: 2rem;
  grid-auto-flow: row;
  grid-template-columns: 250px;
}

.card__image {
  display: block;
  border-radius: 7px;
  background-size: cover;
  background-position: 50% 50%;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

.card__title {
  font-weight: normal;
  font-size: 1rem;
}

.img-margin {
  padding: 5px;
}

.inline2 {
  display: flex;
  justify-content: space-between;
}

.inline {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

button {
  color: bisque;

  padding-top: 1em;
  padding-bottom: 1em;
  width: 48.5%;
  background-color: #0f0e0e;
  font-family: "Kalnia", serif;
  font-size: large;
}

.strip {
  margin-top: 10vh;
  background-color: #46413c;
  width: 100%;
  color: bisque;
  font-family: "Kalnia", serif;
}

.glass-pane {
  backdrop-filter: blur(10px) saturate(100%);
  -webkit-backdrop-filter: blur(10px) saturate(100%);
  background-color: rgba(17, 25, 40, 0.25);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.125);
  padding: 38px;
  filter: drop-shadow(0 30px 10px rgba(0, 0, 0, 0.125));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 60%;
  width: 70%;
}

.parallax {
  /* photo background */
  background-image: url(../img/25.webp);
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Add this line */

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120vh;

  /* Additional styles for parallax effect */
  perspective: 1000px; /* Adjust as needed */
  overflow-x: hidden;
  overflow-y: auto;
}

.parallax2 {
  /* photo background */
  background-image: url(../img/4.webp);
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Add this line */

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120vh;

  /* Additional styles for parallax effect */
  perspective: 1000px; /* Adjust as needed */
  overflow-x: hidden;
  overflow-y: auto;
}

.services-box {
  user-select: none;
  width: 98%;
  border: 1px solid #ffffff22;
  backdrop-filter: blur(10px) saturate(100%);
  -webkit-backdrop-filter: blur(10px) saturate(100%);
  background-color: rgba(17, 25, 40, 0.25);
  border-radius: 12px;

  box-shadow: 0 7px 20px 5px #00000088;
  overflow: hidden;
  transition: 0.5s all;
  margin: 2%;

  ::before {
    position: fixed;
    content: "";
    box-shadow: 0 0 100px 40px #ffffff08;
    top: -10%;
    left: -100%;
    transform: rotate(-45deg);
    height: 60rem;
    transition: 0.7s all;
  }
  &:hover {
    border: 1px solid #ffffff44;
    box-shadow: 0 7px 50px 10px #000000aa;
    transform: scale(1.015);
    filter: brightness(1.3);
    ::before {
      filter: brightness(0.5);
      top: -100%;
      left: 200%;
    }
  }
}

.services-txt {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
  color: #cfcfcf;
  text-align: justify;
  hyphens: none;
}

@media (max-width: 900px) {
  .glass-pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 80%;
    width: 90%;
    margin-top: 10%;
    margin-bottom: 10%;
    padding: 5px;
  }

  .parallax {
    height: auto;
    min-height: 100vh;
  }

  h1 {
    font-size: 12vw;
    position: relative; /* Position the element absolutely */
    top: 0; /* Position at the top of its container */
  }

  h4 {
    font-size: 12vw !important;
  }

  .services-box {
    width: calc(
      100% - 4px
    ); /* Subtract the total margin (2px margin-left + 2px margin-right) */
    margin-left: 2px;
    margin-right: 2px;
  }

  .services-txt {
    margin-left: 3vw;
    margin-right: 3vw;
    text-align: justify;
    hyphens: none;
  }

  .form-control {
    min-width: 100px !important;
    border-radius: 50px;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .form-control-btn {
    min-width: 100px !important;
    border-radius: 50px;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.column {
  float: left;
  width: 25%;
  padding: 15px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* Style for the full-link anchor tag */
.full-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 20; /* Ensure the link is above other content */
}

button:hover {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 24 24' fill='%23FFE4C4'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10.011 10.011 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8z'/%3E%3Cpath d='m7.293 11.293 1.414 1.414L11 10.414V16h2v-5.586l2.293 2.293 1.414-1.414L12 6.586l-4.707 4.707z'/%3E%3C/svg%3E"),
    auto;
}

/* for selected works */
/**************************/
#parallax-portfolio .parallax-one {
  padding-top: 80px;
  padding-bottom: 80px;
  overflow: hidden;
  position: relative;
  width: 100%;
  background-image: url(../img/ptfolio1.webp);
  background-attachment: fixed;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
#parallax-portfolio .parallax-two {
  padding-top: 80px;
  padding-bottom: 80px;
  overflow: hidden;
  position: relative;
  width: 100%;
  background-image: url(../img/ptfolio2.webp);
  background-attachment: fixed;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#parallax-portfolio .parallax-three {
  padding-top: 80px;
  padding-bottom: 80px;
  overflow: hidden;
  position: relative;
  width: 100%;
  background-image: url(../img/ptfolio3.webp);
  background-attachment: fixed;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#parallax-portfolio .parallax-four {
  padding-top: 80px;
  padding-bottom: 80px;
  overflow: hidden;
  position: relative;
  width: 100%;
  background-image: url(../img/ptfolio4.webp);
  background-attachment: fixed;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#parallax-portfolio .parallax-five {
  padding-top: 80px;
  padding-bottom: 80px;
  overflow: hidden;
  position: relative;
  width: 100%;
  background-image: url(../img/ptfolio5.webp);
  background-attachment: fixed;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.number {
  font-family: "Orbitron";
  font-weight: 500;
  font-style: normal;
  position: absolute;
  top: 15px;
  left: 20px;
  font-size: 2em;
}

.alegro {
  font-family: "AlegrosPersonalUse-qZL5qr" !important;
  font-size: 6em;
  text-align: right;
  padding-right: 20px;
  text-transform: uppercase;
  color: white;
  mix-blend-mode: difference; /* Blend mode for contrast */
}

/* about us page parallax */
.abt1::before,
.abt2::before,
.abt3::before,
.abt4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 0.5 opacity black overlay */
  z-index: 1; /* Ensure the overlay is behind the content */
}

.abt1,
.abt2,
.abt3,
.abt4 {
  padding-top: 80px;
  padding-bottom: 80px;
  overflow: hidden;
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-attachment: fixed;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.abt1 {
  background-image: url(../img/abt1.webp);
}

.abt2 {
  background-image: url(../img/abt2.webp);
}

.abt3 {
  background-image: url(../img/abt3.webp);
}

.abt4 {
  background-image: url(../img/abt4.webp);
}

/* Extras */
/**************************/
hr {
  border: 2px solid #46413c;
  width: 100%;
  margin: 0 auto;
}

.portfolio-title {
  top: 70px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 8vw;
  font-weight: 400;
  font-family: "AlegrosPersonalUse-qZL5qr", serif;
  text-align: left;
  text-transform: uppercase;
  margin-bottom: 70px;
}

.evencent {
  padding-left: 5%;
  padding-right: 5%;
}

.brown {
  background-color: #46413c;
  color: silver;
  margin-bottom: 0;
  overflow-y: hidden;
  overflow-x: hidden;
  margin-top: -20px;
}

.center {
  text-align: center;
}

.margin {
  margin-top: -20%;
}

.bottom-brands {
  position: relative;
  margin-bottom: 0;
  text-align: center; /* Center the image horizontally */
}

.bottom-brands img {
  max-width: 100%;
  height: auto;
}

.kvp {
  font-family: "Kalnia", serif;
  font-size: 26px;
  position: absolute;
  margin-top: 20%;
  text-align: center;
}

.encapsule {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 250px;
}

.abt-container {
  width: 200px; /* Adjust width as needed */
  height: 400px; /* Adjust height as needed */
  overflow: hidden;
  border-radius: 200px; /* Half of the height to create a pill shape */
}

.abt-container img {
  width: 100%;
  height: auto;
}

.brownbutton {
  position: fixed;
  top: 14px; /* Adjust top position as needed */
  right: 20px; /* Adjust right position as needed */
  padding: 10px 20px; /* Adjust padding as needed */
  background-color: #46413c; /* Brown color */
  color: #fff; /* White text color */
  border: none;
  border-radius: 50px; /* Adjust border radius as needed */
  cursor: pointer;
  z-index: 200;
  font-family: "Kalnia", serif;
}

.brownbutton:hover {
  background-color: silver; /* Darker brown color on hover */
  color: black;
  font-style: oblique;
}

.form-control {
  min-width: 400px;
  margin: 15px;
  color: bisque;
  background-color: #ffffff00;
  border-radius: 50px;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.form-control-btn {
  min-width: 400px;
  margin: 15px;
  color: bisque;
  background-color: #46413c !important;
  border-radius: 50px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.form-control-desc {
  width: 100%;
  margin: 15px;
  color: bisque;
  background-color: #ffffff00;
  border-radius: 10px;
  padding: 10px;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}

input {
  max-width: fit-content;
}

.form-margin {
  margin-top: 250px;
  margin-left: 20vw;
  max-width: 950px;
}

.tab {
  display: none;
}

#progress-bar {
  width: 100%;
  background-color: #f0f0f0;
  border-style: none;
}

#progress-bar div {
  height: 20px;
  background-color: #46413c;
}

#preferred-hours {
  margin-top: 10px;
}

.checkbox-label {
  display: flex;
  align-items: center;
}

.checkbox-label input[type="checkbox"] {
  margin-right: 5px;
}

#form-tabs {
  height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}