:root {
    --greenbase: #57d98b;
    --shadowOver: rgba(248, 79, 37);
    --display: 'initial';
    --redcolor: rgb(253, 187, 5);
    --redc: #fdbb05;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}



@font-face {
    font-family: "Barb";
    src: url("./fonts/BerkshireSwash-Regular.ttf");
    font-weight: 500;
}


@font-face {
    font-family: "Metro";
    src: url("./fonts/CodecPro-Regular.ttf");
    font-weight: 500;
}




* {
    box-sizing: border-box;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;

}

html {
    scroll-behavior: smooth;
}



body {
    min-height: 150vh;
    background-color: rgb(0, 0, 0) !important;
    font-family: 'Univia'

}


section {
    position: relative;
    z-index: 400;
}


video {
    will-change: transform, opacity;
    transform: translateZ(0);
}


main {}


#logo {
    position: fixed;
    top: 1.5%;
    right: 1.5%;
    padding-right: 50px;
    z-index: 50000;
    transform: scale(0.08)translateX(-20px);
    transform-origin: top right;
}


#lang {
    position: absolute;
    z-index: 20000;
    color: white;
    font-size: 24px;
    font-weight: 700;
    right: 1.7%;
    margin-top: 0.65rem;
    cursor: pointer;
}

#lang a {
    text-decoration: none;
    color: unset;
}

#lang span {
    color: var(--redcolor)
}




#videoFrame {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    opacity: 100%;
    animation-name: opa;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-delay: 0s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

#videoFrame video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}


#hero {
    overflow: hidden;
}


.heroContainer {
    position: relative;
    z-index: 200;
    min-height: 100vh;
    align-content: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
}


.heroContainer h1 {
    color: var(--redcolor);
    position: relative;
    z-index: 200;
    font-weight: 700;
    font-family: 'Barb';
    font-size: 3rem;
    line-height: 3rem;
}

.heroContainer h2 {
    color: white;
    position: relative;
    z-index: 200;
    font-weight: 600;
    line-height: 1.8rem;
    font-family: 'Metro';
}

.heroContainer h3 {
    color: rgb(202, 202, 202);
    position: relative;
    z-index: 200;
    font-weight: 600;
    line-height: 1.7rem;
    font-size: 1.8rem;
    font-family: 'Metro';
}


#heroTexts {
    position: relative;
    transition: ease;
    -webkit-transition: ease;
    will-change: transform, opacity;
    transform-origin: center;
    padding-left: 192px;
    transform: scale(1);
    /* kezdő méret */
}

#heroLogo {
    position: absolute;
    width: 40%;
    opacity: 20%;
    transform: translate(-64px, -56px);
    z-index: 20;
}


#ctaButton {
    margin-top: 32px;
    border: none !important;
    box-shadow: none !important;
    background-color: var(--redcolor);
    color: rgb(32, 32, 32);
    font-size: 20px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: 4px;
    font-family: 'Metro';
    position: relative;
    z-index: 50;
    font-weight: 800;
}



#about {
    min-height: 106vh;
    padding-top: 16vh;
    background-image: url("./assets/aiai.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
}

.aboutCols {
    padding: 1rem;
    border-radius: 16px;
}


.aboutRow {
    padding-top: 5rem;
    display: flex;
    justify-content: space-between;
}

.aboutTitles {
    font-family: 'Metro';
    font-weight: 900;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: rgb(0, 0, 0);
}

.aboutDescription {
    font-size: 1rem;
    font-family: 'Metro';
    font-weight: 600;
    color: rgb(0, 0, 0);

    /* padding: 0.5rem;
    background-color: rgba(10,10,10,0.1); */
}


#about h2 {
    color: rgb(255, 255, 255);
    font-family: "Barb";
    font-size: 64px;
    text-align: center;
}




#services {
    min-height: 100vh;
    background-image: url("./assets/sg.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    border-top: 1rem solid black;
    position: relative;
    z-index: 400;
}


#services h2 {
    color: rgb(255, 255, 255);
    font-family: "Barb";
    font-size: 64px;
    text-align: center;
}

.servicesRow img {
    width: 100%;
    border-radius: 4px;
}

.servicesRow {
    display: flex;
    justify-content: space-evenly;
    padding-top: 5rem;
    ;
}

#servicesMenuWrapper {
    padding-top: 12vh;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 1) 100%);
    width: 100%;
    min-height: 100vh;
}

.servicesCardsLink {
    margin-top: auto;
}

.servicesCardsLink button {
    border: none;
    outline: none;
    box-shadow: none;
    background-color: var(--redcolor);
    color: black;
    font-weight: 600;
    font-size: 20px;
    padding: 0.5rem 2rem;
    margin-bottom: 0.5rem;
    width: 100%;
    border-radius: 4px;
}

.servicesCardsTooltip {
    color: white;
    font-size: 15px;
    font-family: 'Metro';
    padding-top: 0.5rem;
    padding-bottom: 1rem;
}

#servicesTip {
    font-size: 1.5rem;
    font-style: oblique;
    font-family: 'Metro';
    font-weight: 600;
    color: rgb(255, 255, 255);
    text-align: center;
    width: 50%;
    padding-top: 2rem;
    margin-left: 25%;
    margin-bottom: 1rem;
}



.servicesCards {
    padding: 0.5rem;
    box-shadow: 2px 2px 64px 4px var(--redcolor);
    border-radius: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem;
}

.servicesCards:hover {
    transform: scale(1.05);
}


.servicesCardsTitle {
    color: white;
    font-size: 22px;
    text-align: center;
    font-weight: 700;
    padding-bottom: 0.5rem;
}




#thai {
    min-height: 108.5vh;
    padding-top: 15vh;
    background-color: #edb675;
    background-image: url("./assets/thth.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 10vh;
    /* background: radial-gradient(circle, #d79648 0%, #b77342 100%); */
}


#thai h2 {
    color: rgb(0, 0, 0);
    font-family: "Barb";
    font-size: 64px;
    /* text-align: center; */
    margin-bottom: 48px;
}

.servicesDescription {
    font-size: 16px;
    font-family: 'Metro';
    margin-bottom: 1.5rem;
}

.servicesTitles {
    font-size: 22px;
    font-weight: 600;
    font-family: 'Metro';
    margin-bottom: 1rem;
}


.servicesBorderLeft {
    border-left: 10px solid rgb(24, 24, 24);
    padding-left: 0.5rem;
}


.servicesTime,
.servicesPrice,
.servicesTimeIcon {
    text-align: center;
    font-size: 16px;
    font-family: 'Metro';
    font-weight: 700;
    margin-bottom: 0.25rem;
}


.servicesPrices {
    padding: 0.25rem;
    border: solid 2px black;
    border-radius: 4px;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}


.servicesButton {
    border: none !important;
    box-shadow: none !important;
    background-color: black;
    color: white;
    font-size: 20px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border-radius: 4px;
    font-family: 'Metro';
    position: relative;
    z-index: 50;
    font-weight: 700;
}


#oil {
    min-height: 100vh;
    padding-top: 10vh;
    padding-bottom: 5rem;
    background-color: #f4f6f5;
    background-image: url("./assets/oilg.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
}

.oilRow {
    padding-top: 2rem;
}

.pricesWrapper {
    transform: translateX(-2rem);
}

#oil h2 {
    color: rgb(0, 0, 0);
    font-family: "Barb";
    font-size: 64px;
    /* text-align: center; */
    margin-bottom: 48px;
    text-align: right;
    padding-right: 6rem;
}

#oilReserv {
    margin-top: 2rem;
}


#focused {
    min-height: 108.5vh;
    padding-top: 15vh;
    background-color: white;
    background-image: url("./assets/focused.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    padding-bottom: 10vh;
    /* background: radial-gradient(circle, #d79648 0%, #b77342 100%); */
}


#focused h2 {
    color: rgb(0, 0, 0);
    font-family: "Barb";
    font-size: 64px;
    /* text-align: center; */
    margin-bottom: 48px;
}




#spa {
    min-height: 100vh;
    padding-top: 10vh;
    padding-bottom: 5rem;
    background-color: rgb(0, 0, 0);
    background-image: url("./assets/spa.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
}


#spa h2 {
    color: rgb(0, 0, 0);
    font-family: "Barb";
    font-size: 64px;
    /* text-align: center; */
    margin-bottom: 48px;
    text-align: right;
    padding-right: 18rem;
}


.spaIntro {
    padding-top: 2rem;
}

.spaButton {
    background-color: var(--redcolor);
    color: black;
}



#alg {
    min-height: 100vh;
    padding-top: 10vh;
    padding-bottom: 5rem;
    background-color: rgb(0, 0, 0);
    background-image: url("./assets/algab.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
}


#alg h2 {
    color: var(--redcolor);
    font-family: "Barb";
    font-size: 64px;
    /* text-align: center; */
    margin-bottom: 48px;
}




#gallery {
    min-height: 100vh;
    padding-top: 15vh;
    padding-bottom: 5rem;
    background-color: rgb(0, 0, 0);
    background-image: url("./assets/gg.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    transition: ease;
}

#gallerySection {}


#gallery h2 {
    font-family: "Barb";
    font-size: 64px;
    text-align: center;
    margin-bottom: 48px;
    color: rgb(255, 255, 255);
}


#reservation {
    background-color: black;
    background-image: url("./assets/btbt.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transition: ease;
    position: relative;
    z-index: 500;
}

#prices {
    min-height: 100vh;
    padding-top: 15vh;
}


#prices h2 {
    font-family: "Barb";
    font-size: 64px;
    text-align: center;
    margin-bottom: 96px;
    color: rgb(0, 0, 0);
}


.pricesElement {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: solid 1px black;
    font-family: 'Metro';
    font-weight: 600;
    font-size: 20px;
}





#booking {
    position: relative;
    padding-top: 14vh;
    padding-bottom: 10vh;
}

#booking h2 {
    font-family: "Barb";
    font-size: 64px;
    text-align: center;
    margin-bottom: 64px;
    color: rgb(0, 0, 0);
}

iframe {
    position: relative;
    z-index: 100;
}

.bookingInfo {
    text-align: left;
    font-family: 'Metro';
    font-size: 20px;
    margin-bottom: 2rem;
    font-weight: 700;
    width: 100%;
    backdrop-filter: brightness(110%);
    padding: 0.5rem;
    border-radius: 6px;
}

.bookingInfo span {
    font-size: 40px;
}




#contact {
    padding-top: 20vh;
    padding-bottom: 10vh;
    min-height: 100vh;
    overflow: hidden;
    transition: ease;
    scroll-margin-top: 0px;
    position: relative;
    z-index: 300;

}

#contact h2 {
    font-family: "Barb";
    font-size: 64px;
    text-align: center;
    color: var(--redcolor);
    margin-bottom: 128px;
}


.contactElements {
    color: var(--redcolor);
    font-size: 20px;
    font-family: 'Metro';
    text-align: center;
    align-content: center;
}

.contactWrapper {
    display: flex;
    margin-bottom: 2rem;
}

.contactLine {
    width: 50%;
    align-content: center;
    border-radius: 6px;
}

.contactLine a {
    color: unset;
    text-decoration: none;
}

.contactLine a:hover {
    color: unset;
    text-decoration: none;
}



#gMap {
    box-shadow: 1px 1px 64px 4px rgb(1, 67, 250);
    border-radius: 8px;
   
}


footer {
    padding-top: 2rem;
    color: white;
    position: relative;
    z-index: 300;
}

footer a {
    text-decoration: none;
    color: unset;
}


#gdprMain {
    padding-top: 25vh;
    padding-bottom: 20vh;
}



/*-------------media------------------------*/


@media screen and (max-width: 1280px) {

    #oil,
    #spa {
        background-position-y: 128px;
    }
}

@media screen and (max-width: 991px) {
    .aboutTitles {
        text-shadow: none;
        color: var(--redcolor);
        font-size: 20px;

    }

    #heroTexts {
        padding-left: 0px !important;
    }


    #heroLogo {
        position: absolute;
        width: 66%;
        opacity: 20%;
        transform: translate(0px, -56px);
        z-index: 20;
    }

    .aboutRow {
        padding-top: 7rem;
    }

    #about {
        min-height: unset;
    }


    .mobileReverse {
        flex-direction: column-reverse;
    }

    .aboutDescription {
        color: white;
    }

    #about h2 {
        color: black
    }

    #servicesTip {
        width: 100%;
        margin: 0;
        font-size: 1.25rem;
        margin-bottom: 2rem;
    }

    #thai h2 {
        padding-top: 3rem;
        margin-bottom: 12rem;
    }

    #spa h2 {
        padding-top: 3rem;
        margin-bottom: 7rem;
        text-align: center;
        padding-right: 0;

    }

    #alg h2 {
        padding-top: 8rem;
        margin-bottom: 10rem;
        text-align: center;
        padding-right: 0;

    }


    #focused h2 {
        padding-top: 8rem;
        margin-bottom: 12rem;
    }

    #oil h2 {
        margin-bottom: 15rem;
    }

    .algaRow {
        padding-top: 1rem;
        justify-content: center !important;
    }



    .focusedRow {
        justify-content: center !important;
    }

    #oilReserv {
        margin-top: 0;
    }

    #oil,
    #spa {
        padding-bottom: 5rem;
        background-position-y: 0px;
    }

    .oilRow {
        justify-content: center !important;
    }

    .servicesPrices {
        margin-bottom: 2rem;
    }

    .pricesWrapper {
        transform: translateX(0rem);
    }

    #reservation {
        background-color: black;
        background-image: url("./assets/res22.jpg");
        background-size: 100%;
        background-repeat: repeat;
        background-attachment: fixed;
        transition: ease;
    }

    #gallery {
        min-height: unset;
    }

    .pricesValue {
        color: white;
    }
    #booking {
        width: 95%;
    }

    #contact h2 {
        font-size: 2.25rem;
    }

}


@media screen and (max-width: 576px) {
    .aboutDescription {
        font-size: 16px;
    }

    .aboutTitles {
        text-shadow: none;
        color: white;
        font-size: 20px;
        color: var(--redcolor);
    }

    #servicesTip {
        width: 100%;
        margin-left: 0px;
        text-align: left;
        padding-left: 1rem;
    }

    .servicesRow {
        padding: 0.5rem;
    }

    #about {
        padding-top: 8vh;
        background-size: 180%;
        background-position-x: -47vw;
    }

    #about h2 {
        font-size: 56px;
    }


    .aboutCols {
        margin-bottom: 32px;
        padding-bottom: 32px;
        border-bottom: solid 1px rgb(63, 63, 63);
        border-radius: 0px;
        /* border-image: linear-gradient(to right, rgba(0,0,0,0) 10%, var(--redcolor) 20.1%, var(--redcolor) 89.9%, rgba(0,0,0,0) 90%) 1; */
    }

    #about {
        padding-bottom: 128px;
    }

    #services {
        padding-top: 8vh;
    }

    #services h2 {
        font-size: 44px;
        margin-bottom: 192px;
    }

    .servicesCards {
        margin-bottom: 128px;
        box-shadow: 2px 2px 32px 4px var(--redcolor);
    }

    #servicesMenuWrapper {
        padding-top: 0vh;
        background: none;
    }

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

    #thai h2 {
        font-size: 2.25rem;
        padding-top: 2.5rem;
        margin-bottom: 1rem;
    }

    #thai {
        padding-top: 400px;
        background-size: 180%;
        background-position-x: -80vw;
    }

    #oil {
        padding-top: 400px;
        background-size: 180%;
    }

    .oilRow {
        padding-top: 0rem;
    }

    #oil h2 {
        margin-top: 2rem;
        margin-bottom: 1rem;
        font-size: 2.25rem;
        width: 100%;
        text-align: left;
        padding-right: 0;
    }

    #focused {
        padding-top: 400px;
        background-size: 180%;
        background-position-x: -80vw;
    }

    #focused h2 {
        margin-top: 0rem;
        margin-bottom: 1rem;
        font-size: 2.25rem
    }


    #spa {
        padding-top: 400px;
        background-size: 180%;
    }

    #spa h2 {
        padding-top: 0rem;
        margin-top: 0rem;
        margin-bottom: 1rem;
        font-size: 2.25rem;
        padding-right: 0;
        text-align: left;
    }

    #alg {
        padding-top: 400px;
        background-size: 180%;
        background-position-x: -80vw;
    }

    #alg h2 {
        padding-top: 0rem;
        margin-top: 1.5rem;
        margin-bottom: 1rem;
        font-size: 2.25rem;
        padding-right: 0;
        text-align: left;

    }

    .spaIntro {
        padding-top: 0;
    }

    .servicesPrices {
        margin-bottom: 3rem;
    }


    .servicesTime,
    .servicesPrice,
    .servicesTimeIcon {
        text-align: center;
        font-size: 14px;
        font-family: 'Metro';
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .pricesValue {
        color: white;
        min-width: 28%;
        align-content: center;
    }

    .contactLine {
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .contactWrapper {
        flex-direction: column;
        margin-bottom: 0rem;
    }

    #gMap {
        width: 115%;
        transform: translateX(-3%);
    }
}



@keyframes opa {
    0% {
        opacity: 66%;
    }

    50% {
        opacity: 33%;
    }

    100% {
        opacity: 66%;
    }
}

@keyframes opatwo {
    0% {
        opacity: 100%;
    }

    50% {
        opacity: 95%;
    }

    100% {
        opacity: 100%;
    }
}