:root {
    --margin-smallest: 5px;
    --margin-smaller: 10px;
    --margin-small: 20px;
    --margin-medium: 50px;
    --margin-big: 100px;
    --margin-bigger: 150px;
    --margin-biggest: 250px;
}
@property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
@keyframes spin{
    from{
        --angle : 0deg
    }
    to{
        --angle: 360deg
    }
}
@keyframes shiver {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(15deg); }
    40% { transform: rotate(-15deg); }
    60% { transform: rotate(15deg); }
    80% { transform: rotate(-15deg); }
  }
.bg-color-surface {
    background-image: url("/public/images/bg_image.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.bg-color-on-surface { background-color: #f6dc4b ;}
.bg-color-primary { background-color: #f6db4b;}
.bg-color-secondary{background-color: #f2d73f ;}
.bg-color-footer {
    background-image: url("/public/images/footer_bg.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.font-smaller {font-size: 0.875rem;}
.font-small {font-size: 1rem;}
.font-medium {font-size: 1.25rem;}
.font-big {font-size: 1.5rem;}
.font-bigger {font-size: 2rem;}
.font-biggest {font-size: 3rem;}
.seperator-rotate {rotate: 10deg;}
.tilt svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
}
.tilt .shape-fill {
    fill: black;
}
.box-shadow-custom{ box-shadow: 3px 3px 1px black; }
.box-shadow-button{ box-shadow: 1.5px 1.5px 1px black; border: 1px solid rgba(255, 255, 255, 0.3); }
.box-shadow-button:hover{
    box-shadow: 2px 2px 1.5px black;
    background-color: #F4D11A;
    transition: background-color 0.2s ease, box-shadow 0.1s ease;
}
.box-shadow-button-disabled{ box-shadow: 1.5px 1.5px 1px black; border: 1px solid rgba(255, 255, 255, 0.3); }
.box-shadow-button-no-color{ box-shadow: 1.5px 1.5px 1px black; border: 1px solid rgba(255, 255, 255, 0.3); }
.box-shadow-button-no-color:hover{
    box-shadow: 2px 2px 1.5px black;
    transition: background-color 0.2s ease, box-shadow 0.1s ease;
}
.neon-box{
    border-radius: 50px;
}
.neon-box::after, .neon-box::before {
   content: "";
   position: absolute;
   height: 100%;
   width: 100%;
   top: 50%;
   left: 50%;
   translate: -50% -50%;
   z-index: -1;
   padding: 3px;
   border-radius: 50px;
   background-image: conic-gradient(from var(--angle), transparent 60%,#ff0091, #da67ff);
   animation: 2s spin linear infinite ;
}
.neon-box::before{
    filter: blur(1.5rem);
    opacity: 0.5;
}
.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-weight: bold;
    margin-bottom: 5px;
}
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}
.calendar-days div {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
.calendar-days div:hover {
    background: #f6db4b;
    font-weight: bold;
}
.selected {
    background: #f6db4b;
}
.shiver {
    animation: shiver 1s ease;
  }
.p-smallest { padding: var(--margin-smallest); }
.p-smaller { padding: var(--margin-smaller); }
.p-small { padding: var(--margin-small); }
.p-big { padding: var(--margin-big); }
.p-t-smaller { padding-top: var(--margin-smaller); }
.p-t-small { padding-top: var(--margin-small); }
.p-b-smaller { padding-bottom: var(--margin-smaller); }
.p-b-small { padding-bottom: var(--margin-small); }
.p-b-medium { padding-bottom: var(--margin-medium); }
.p-b-big { padding-bottom: var(--margin-big); }
.p-b-bigger { padding-bottom: var(--margin-bigger); }
.p-l-smaller { padding-left: var(--margin-smaller); }
.p-r-smaller { padding-right: var(--margin-smaller); }
.p-r-small { padding-right: var(--margin-small); }
.m-medium { margin: var(--margin-medium); }
.m-t-smallest { margin-top: var(--margin-smallest); }
.m-t-smaller { margin-top: var(--margin-smaller); }
.m-t-small { margin-top: var(--margin-small); }
.m-t-medium { margin-top: var(--margin-medium); }
.m-t-big { margin-top: var(--margin-big); }
.m-t-bigger { margin-top: var(--margin-bigger); }
.m-b-smallest { margin-bottom: var(--margin-smallest); }
.m-b-small { margin-bottom: var(--margin-small); }
.m-b-medium { margin-bottom: var(--margin-medium); }
.m-b-big { margin-bottom: var(--margin-big); }
.m-l-smallest { margin-left: var(--margin-smallest); }
.m-l-small { margin-left: var(--margin-small); }
.m-l-medium { margin-left: var(--margin-medium); }
.m-l-big { margin-left: var(--margin-big); }
.m-r-small { margin-right: var(--margin-small); }
.m-r-medium { margin-right: var(--margin-medium); }
.m-r-big { margin-right: var(--margin-big); }
.resize-none{ resize: none; }
.tip{
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s linear;
}
.on-hover-tip:hover .tip{
    visibility: visible;
    opacity: 1;
}
.glass{
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.glass-light {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.glass-medium {
    background: rgba(255, 255, 255, 0.3); 
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
.glass-dark {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.on-hover-scale-105:hover { transform: scale(1.05); }
.scale-transition{ transition: transform 0.3s ease; }
.color-black{ color: black; }
.color-white{ color: white; }
.color-dark-gray{ color: rgb(71, 71, 71); }
.color-red{ color: #cc3300; }
.color-green{ color: #339900; }
.bg-color-transition{ transition: background-color 0.3s ease; }
.bg-color-gray-1{ background-color: #f8f9fa; }
.bg-color-gray-2{ background-color: #e9ecef; }
.bg-color-transparent{ background-color: transparent; }
.bg-color-black{ background-color: black; }
.bg-color-white{ background-color: white; }
.bg-color-white-5{ background-color: rgba(255, 255, 255, 0.5); }
.on-hover-bg-color-white:hover{ background-color: white; }
.placeholder-color-black::placeholder{
    color: black;
}
.image-container{
    display: flex;
    justify-content: center;
    align-items: center;
}
.object-fit-cover{width: 100%; height: 100%; object-fit: cover;}
.object-fit-contain{width: 100%; height: 100%; object-fit: contain;}
.horizontal-seperator-1{height: 1px; width: 100%; overflow: hidden; background-color: black;}
.max-width-80{max-width: 80%;}
.max-width-25{max-width: 25%;}
.max-height-70{max-height: 70%;}
.max-height-none{max-height: none;}
.width-40 { width: 40%; }
.width-45 { width: 45%; }
.width-60 { width: 60%; }
.width-70 { width: 70%; }
.width-80 { width: 80%; }
.width-90 { width: 90%; }
.width-100 { width: 100%; }
.height-40 { height: 40%; }
.height-50 { height: 50%; }
.height-55 { height: 55%; }
.height-70 { height: 70%; }
.height-90 { height: 90%; }
.height-100 { height: 100%; }
.width-4px{ width: 4px;}
.width-15px{ width: 15px;}
.width-20px{ width: 20px;}
.width-40px{ width: 40px;}
.width-50px{ width: 50px;}
.width-60px{ width: 60px;}
.width-70px{ width: 70px;}
.width-80px{ width: 80px;}
.width-100px{ width: 100px;}
.width-150px{ width: 150px;}
.width-250px{ width: 250px;}
.width-300px{ width: 300px;}
.width-350px{ width: 350px;}
.width-400px{ width: 400px;}
.width-450px{ width: 450px;}
.width-600px{ width: 600px;}
.height-15px{ height: 15px;}
.height-20px{ height: 20px;}
.height-50px{ height: 50px;}
.height-60px{ height: 60px;}
.height-70px{ height: 70px;}
.height-80px{ height: 80px;}
.height-120px{ height: 120px;}
.height-200px{ height: 200px;}
.height-250px{ height: 250px;}
.height-300px{ height: 300px;}
.height-350px{ height: 350px;}
.break-word{ overflow-wrap: break-word;}
.overflow-hidden{ overflow: hidden;}
.block{display: block;}
.flex{ display: flex; }
.flex-center{ display: flex; justify-content: center; align-items: center; }
.flex-column{ flex-direction: column; }
.justify-end{ justify-content: flex-end;}
.justify-space-between{ justify-content: space-between;}
.justify-space-around{ justify-content: space-around;}
.align-center{ align-items: center;}
.align-start{ align-items: flex-start;}
.flex-1{flex: 1;}
.flex-3{flex: 3;}
.text-align-left{ text-align: left; }
.text-align-center{ text-align: center; }
.absolute{ position: absolute;}
.relative{ position: relative;}
.fixed{ position: fixed;}
.cursor-pointer{ cursor: pointer;}
.border-1{ border: 1px solid; }
.border-1-t-b{ border-top: 1px solid; border-bottom: 1px solid; }
.border-color-transparent{ border-color: transparent; }
.border-color-black{ border-color: black; }
.border-color-gray-6{ border-color: #6c757d; }
.border-color-gray-8{ border-color: #343a40; }
.on-hover-border-color-black:hover{ border-color: black; }
.border-none {border: none;}
.border-radius-5{ border-radius: 5px; }
.border-radius-10{ border-radius: 10px; }
.border-radius-20{ border-radius: 20px; }
.border-radius-100{ border-radius: 100px; }
.border-radius-150{ border-radius: 150px; }
.font-montserrat { font-family: "Montserrat", sans-serif; font-style: normal; font-weight: normal;}
.font-playfair-display{ font-family: "Playfair Display", serif; font-style: normal; font-weight: normal; }
.font-normal{ font-weight: normal; }
.font-normal{ font-style: normal;}
.font-bold{ font-weight: bold; }
.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }
.opacity-100 { opacity: 1; }
.on-hover-opacity-100:hover { opacity: 1;  transition: opacity 0.5s ease;}
.on-focus-opacity-100:focus-within { opacity: 1;  transition: opacity 0.5s ease;}
.top-0 { top: 0; }
.top-10 { top: 10%; }
.top-100 { top: 100%; }
.bottom-0 { bottom: 0; }
.bottom-10 { bottom: 10%; }
.left-0 { left: 0; }
.left-5 { left: 5%; }
.z-index-5 { z-index: 5;}
.z-index-9 { z-index: 9;}
.z-index-max { z-index: 10;}
.none{ display: none; }
.wrap-300 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 50px; justify-items: center; row-gap: 50px;}
.wrap-450 { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 50px; justify-items: center; row-gap: 50px;}
.m-auto{ margin: auto; }
.m-x-auto { margin-left: auto; margin-right: auto; }
.menu-button {z-index: 10000;right: 20px;top: 30px;cursor: pointer;transition: all 0.5s ease-out;}
.menu-button .button-line {width: 40px;height: 4px;margin: 0 0 8px 0;background: white ;transition: all 0.5s ease-out;}
.menu-button.close {transform: rotate(180deg);}
.menu-button.close .button-line:nth-child(1) {transform: rotate(45deg) translate(10px, 10px);}
.menu-button.close .button-line:nth-child(2) {opacity: 0;}
.menu-button.close .button-line:nth-child(3) {transform: rotate(-45deg) translate(7px, -6px);}
*{ margin: 0; padding: 0; text-decoration: none;}
body{ overflow-x: hidden;}
img{ max-width: 100%; max-height: 100%;}
video{ max-width: 100%; max-height: 100%;}
ul{ text-decoration: none; list-style-type: none; }
ul.list-style-circle{list-style-type: circle;}
ul.list-style-disc {list-style-type: disc;}
ul.list-style-decimal {list-style-type: decimal;}
ul.list-style-square {list-style-type: square;}
ul.list-style-none {list-style-type: none;}
a{ text-decoration: none; font-family: inherit; font-size: inherit; color: inherit; font-weight: inherit; }
input{ text-decoration: none; font-family: inherit; font-size: inherit; color: inherit; font-weight: inherit; border: none; text-align: inherit; }
input:focus {
    outline: none;
}
textarea{ text-decoration: none; font-family: inherit; font-size: inherit; color: inherit; font-weight: inherit; border: none; text-align: inherit; }
textarea:focus {
    outline: none;
}
button{ text-decoration: none; font-family: inherit; font-size: inherit; color: inherit; font-weight: inherit; border: none ; text-align: inherit;}
@media screen and (max-width: 768px) {
.font-smaller {font-size: 0.875rem;}
.font-small {font-size: 1rem;}
.font-medium {font-size: 1.25rem;}
.font-big {font-size: 1.5rem;}
.font-bigger {font-size: 2rem;}
.font-biggest {font-size: 2.5rem;}
.tilt svg {
        height: 80px;
    }
.mobile-m-t-medium { margin-top: var(--margin-medium); }
.mobile-m-t-big { margin-top: var(--margin-big); }
.mobile-m-b-medium { margin-bottom: var(--margin-medium); }
.mobile-p-b-small { padding-bottom: var(--margin-small); }
.mobile-text-align-center{ text-align: center; }
.hide-in-mobile{ display: none; }
.mobile-flex-column{ flex-direction: column; }
.mobile-width-100{width: 100%;}
.mobile-width-90{width: 90%;}
.mobile-width-80{width: 80%;}
.mobile-max-width-100{max-width: 100%;}
.mobile-max-width-80{max-width: 80%;}
.mobile-height-auto{height: auto;}
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
.font-smaller {font-size: 1rem;}
.font-small {font-size: 1.25rem;}
.font-medium {font-size: 1.5rem;}
.font-big {font-size: 2rem;}
.font-bigger {font-size: 2.5rem;}
.font-biggest {font-size: 3rem;}
.tablet-font-big {font-size: 2rem;}
.tablet-m-t-big { margin-top: var(--margin-big); }
.tablet-m-b-medium { margin-bottom: var(--margin-medium); }
.hide-in-tablet{display: none;}
.tablet-flex-column{ flex-direction: column; }
.tablet-width-100{width: 100%;}
.tablet-width-90{width: 90%;}
.tablet-width-80{width: 80%;}
.tablet-width-70{width: 70%;}
.tablet-width-60{width: 60%;}
.tablet-max-width-100{max-width: 100%;}
.tablet-height-auto{height: auto;}
.tablet-height-350px{ height: 350px;}
.tablet-height-600px{ height: 600px;}
}
@media screen and (min-width: 1025px) {
.hide-in-desktop{ display: none; }
}