/*

 Theme Name:     Starter Theme

 Theme URI:      https://www.wildwildweb.gr/

 Description:    Made by wildwildweb

 Author:         Wildwildweb

 Author URI:     https://www.wildwildweb.gr/

 Version:        1.0.0

*/



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



#RESET



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



:root {

    --White: #FFF;

    --Black: #0A0A0A;

    --Grey: #333333;

    --BG: #F8F8F8;

    --Accent: #C9B347;

    --Blue: #48575D;

    --Light-Gray: #F8F8F8;

    --Medium-Gray: #9C9C9C;

    --Gold: #C9B347;

    --spacing-small: clamp(20px, 2vw, 32px);

    --spacing-medium: clamp(20px, 3vw, 72px);

    --spacing-large: clamp(20px, 6.65vw, 90px);

    --spacing-xl: clamp(20px, 8vw, 140px);

    --spacing-xxl: clamp(20px, 10vw, 216px);

    --body-text-small: clamp(16px, 1.66vw, 18px);

    --body-text: clamp(16px, 1.66vw, 20px);

    --body-text-large: clamp(18px, 2.5vw, 24px);

}



* {

    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */

    -moz-box-sizing: border-box; /* Firefox, other Gecko */

    box-sizing: border-box; /* Opera/IE 8+ */

}



/* Georgia Regular */

@font-face {

    font-family: 'Georgia';

    src: url('./assets/fonts/georgia.ttf') format('truetype');

    font-weight: 400;

    font-style: normal;

    font-display: swap;

}

/* Georgia Bold */

@font-face {

    font-family: 'Georgia';

    src: url('./assets/fonts/georgiab.ttf') format('truetype');

    font-weight: 700;

    font-style: normal;

    font-display: swap;

}

/* Georgia Italic */

@font-face {

    font-family: 'Georgia';

    src: url('./assets/fonts/georgiai.ttf') format('truetype');

    font-weight: 400;

    font-style: italic;

    font-display: swap;

}

/* Georgia Bold Italic */

@font-face {

    font-family: 'Georgia';

    src: url('./assets/fonts/georgiaz.ttf') format('truetype');

    font-weight: 700;

    font-style: italic;

    font-display: swap;

}



/* Helvetica Regular */

@font-face {

    font-family: 'Helvetica';

    src: url('./assets/fonts/Helvetica.ttf') format('truetype');

    font-weight: 400;

    font-style: normal;

    font-display: swap;

}

/* Helvetica Bold */

@font-face {

    font-family: 'Helvetica';

    src: url('./assets/fonts/Helvetica-Bold.ttf') format('truetype');

    font-weight: 700;

    font-style: normal;

    font-display: swap;

}



/* Manrope Variable */

@font-face {

    font-family: 'Manrope';

    src: url('./assets/fonts/Manrope-VariableFont_wght.ttf') format('truetype');

    font-weight: 100 900;

    font-style: normal;

    font-display: swap;

}



body {

    background: var(--BG);

    color: var(--White);

    font-family: 'NotoSans', sans-serif;

    font-size: var(--body-text-small);

    margin: 0;

}



h1, h2, h3, h4, h5, h6 {

    color: var(--White);

    font-family: 'Georgia', sans-serif;

    margin: 0;

}



div, span, p, label, input, a {

    font-family: 'Georgia', sans-serif;

}



html {

    scroll-behavior: smooth;

}



img, video {

    max-width: 100%;

    height: auto;

}



.animation {

    -webkit-transition: all ease-in-out 0.5s;

    -moz-transition: all ease-in-out 0.5s;

    -o-transition: all ease-in-out 0.5s;

    transition: all ease-in-out 0.5s;

}



a {

    color: inherit;

}



a,

a:hover,

a:focus {

    text-decoration: none !important;

}



button:not(:disabled) {

    cursor: pointer;

}



.nooverflow {

    overflow: auto;

    /* overflow: hidden !important;

    touch-action: none;

    -ms-touch-action: none; */

}



.relative{

    position: relative;

}



.center {

    text-align: center;

}



.justify-center {

    display: flex;

    justify-content: center;

}



.align-center {

    display: flex;

    align-items: center;

}



.nopad {

    padding: 0 !important;

}



.menu {

    margin: 0;

    padding: 0;

}



.menu ul {

    margin: 0;

    padding: 0;

    list-style: none;

}



.visually-hidden {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}



.h1 {

    font-size: clamp(42px, 5.66vw, 71px) !important;

}



.h2 {

    font-size: clamp(32px, 5.22vw, 48px) !important;

}



.h3 {

    font-size: clamp(24px, 4.88vw, 36px) !important;

}



.h4 {

    font-size: clamp(20px, 4vw, 32px) !important;

}



.body-text-small {

    font-size: var(--body-text-small) !important;

}



.body-text {

    font-size: var(--body-text) !important;

}



.body-text-large {

    font-size: var(--body-text-large) !important;

}



.body-desktop-link {

    font-size: var(--body-text-small) !important;

    font-weight: 600;

    line-height: 130%;

}



.mi-small {

    margin-inline: var(--spacing-small);

}



.mi-medium {

    margin-inline: var(--spacing-medium);

}



.mi-large {

    margin-inline: var(--spacing-large);

}



.mi-xl {

    margin-inline: var(--spacing-xl);

}



.mb-small {

    margin-block: var(--spacing-small);

}



.mb-medium {

    margin-block: var(--spacing-medium);

}



.mb-large {

    margin-block: var(--spacing-large);

}



.mb-xl {

    margin-block: var(--spacing-xl);

}



.pi-small {

    padding-inline: var(--spacing-small);

}



.pi-medium {

    padding-inline: var(--spacing-medium);

}



.pi-large {

    padding-inline: var(--spacing-large);

}



.pi-xl {

    padding-inline: var(--spacing-xl);

}



.pi-xxl {

    padding-inline: var(--spacing-xxl);

}



.pb-small {

    padding-block: var(--spacing-small);

}



.pb-medium {

    padding-block: var(--spacing-medium);

}



.pb-large {

    padding-block: var(--spacing-large);

}



.pb-xl {

    padding-block: var(--spacing-xl);

}



.pb-xxl {

    padding-block: var(--spacing-xxl);

}



.bg {

    background-color: var(--BG);

}



.more-btn {

    border-radius: 32px;

    background: var(--Grey);

    display: flex;

    padding: 20px 32px;

    align-items: center;

    gap: 8px;

    color: var(--White);

}



button.more-btn {

    border: none;

    cursor: pointer;

    font-size: var(--body-text-small);

}



.c-white {

    color: var(--White);

}



.c-black {

    color: var(--Black);

}



.c-gold {

    color: var(--Gold);

}



.border-bottom-accent {

    border-bottom: 5px solid var(--Accent);

}



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



#BREADCRUMBS



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



#crumbs {

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 8px;

    padding-block: 24px;

}



#crumbs a {

    color: var(--Black);

    font-size: 16px;

    font-weight: 400;

    line-height: 130%;

}



#crumbs span.current {

    color: var(--Black);

    font-size: 16px;

    font-weight: 400;

    line-height: 130%;

    opacity: 50%;

}





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



#HEADER



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



.header-wrapper {

    position: relative;

    height: 181px;

    z-index: 10;

}



.header-bg {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: -1;

    display: flex;

}



.header-bg svg {

    width: 100%;

}



.header-wrapper .navbar .col-1 {

    margin-top: 60px;

}



.col-1 {

    flex: 1 0 33%;

}



.header-wrapper .navbar .col-2 {

    flex: 1 0 33%;

    text-align: center;

}



.navbar .col-3 {

    display: flex;

    align-items: center;

    gap: 30px;

    flex: 1 0 33%;

    justify-content: flex-end;

}



.contact-text {

    font-family: 'Georgia';

    font-size: clamp(20px, 4vw, 28px);

}



.navbar {

    display: flex;

    justify-content: space-between;

}



.header-logo {

    padding-block: 25px;

}

img.logo {
    max-width: 200px;
}


.navbar-toggle {

    background: none;

    border: none;

}



.navbar-toggle svg  {

    width: 25px;

    height: 25px;

}



.navbar-toggle svg path {

    fill: var(--White);

}



.burger path {

    transition: transform 0.5s ease, opacity 0.5s ease;

    transform-origin: center;

}



/* .nooverflow .burger path:nth-child(1) {

    opacity: 0;

}



.nooverflow .burger path:nth-child(2) {

    transform: rotate(45deg) translate(5px, 5px);

}



.nooverflow .burger path:nth-child(3) {

    opacity: 0;

} */



.header-wrapper .menu {

    display: none;

}



#menu-container {

    display: none;

    position: fixed;

    top: 0;

    left: 0;

    bottom: 0;

    background: var(--White);

    height: 100vh;

    width: 400px;

}



.nooverflow .header-wrapper .menu {

    display: block;

}



.nooverflow #menu-container {

    display: flex;

    align-items: center;

    justify-content: center;

}



.navbar-nav {

    display: flex;

    align-items: center;

    gap: 32px;

    justify-content: center;

    flex-direction: column;

    margin-top: 5em;

}



.navbar-nav li a {

    color: var(--Black);

    font-size: 32px;

    font-weight: bold;

}





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



#PAGES



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



.book-btn {

    background: var(--Accent);

    border-radius: 50px;

    padding: 14px 30px;

    color: var(--Blue);

    font-family: 'Georgia';

    font-size: var(--body-text-large);;

    font-weight: 400;

}



.footer .book-btn {

    display: flex;

}



.video-intro-section {

    position: relative;

    height: calc(100vh - 210px);

}



.video-intro-section video {

    height: calc(100vh - 170px);

    object-fit: cover;

    position: absolute;

    top: -40px;

}



.after-intro-section {

    background: var(--Blue);

    padding: 52px var(--spacing-large);

    gap: 12px;

}



.after-intro-text {

    font-size: clamp(18px, 3vw, 21.5px);

}



.mid-section {

    position: relative;

    overflow: hidden;

    background: linear-gradient(93deg, rgba(0, 0, 0, 0.60) 2.14%, rgba(0, 0, 0, 0.00) 97.8%);

}



.bg-img-mid {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: -1;

}



.bg-img-mid figure {

    width: 100%;

    max-height: 100%;

    height: 100%;

}



.bg-img-mid figure img {

    width: 100%;

    max-height: 100%;

    height: 100%;

    object-fit: cover;

}



.mid-cols {

    z-index: 1;

}



.mid-section-text {

    line-height: 120%;

    width: 80%;

}



.mid-cols .col-2 {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 30px;

}



.notes-img {

    align-self: flex-start;

    margin-top: 66px;

}



.gallery-cols {

    gap: 8px;

}



.gallery-col {

    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 40.14%, rgba(0, 0, 0, 0.90) 100%);

    display: flex;

    align-items: flex-end;

    height: 647px;

    padding: 26px;

    position: relative;

}



.gallery-cols img {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    aspect-ratio: 475 / 647;

    object-fit: cover;

    height: 100%;

    width: 100%;

    z-index: -1;

}



.gallery-texts-wrapper {

    gap: 18px;

}



h3.wp-block-heading.gallery-title {

    color: var(--White);

    font-family: 'Manrope';

    font-weight: 700;

    letter-spacing: 0.937px;

}



.gallery-text {

    color: var(--Light-Gray);

    font-family: 'Manrope';

    font-weight: 400;

    letter-spacing: 0.535px;

}



.vip-section {

    background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%);

    position: relative;

    overflow: hidden;

}



.vip-texts-wrapper {

    gap: 40px;

    width: 100%;

}



.vip-title {

    font-family: 'Georgia';

    font-weight: 400;

}



.vip-subtitle {

    font-family: 'Georgia';

    font-weight: 400;

    line-height: 113.998%;

}



.vip-btn a {

    background: var(--Gold);

    border-radius: 0;

    color: var(--Black);

    font-family: 'Manrope';

    font-size: 14px;

    font-weight: 700;

    line-height: normal;

    letter-spacing: 1.14px;

    text-transform: uppercase;

    padding: 18px 38px;

    display: flex;

}



.vip-image img {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    object-fit: cover;

    height: 615px;

    width: 100%;

    z-index: -1;

}



.booking-section {

    position: relative;

}



.booking-bg-image {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: -1;

    background: var(--Blue);

}



.booking-bg-image figure {

    width: 100%;

}



.booking-bg-image figure img {

    width: 100%;

    mix-blend-mode: lighten;

    object-fit: cover;

}



.booking-cols {

    gap: clamp(20px, 6vw, 120px);

}



.booking-section-text {

    color: var(--White);

    font-family: 'Georgia';

    font-size: var(--body-text-large);

    font-weight: 400;

    line-height: 47px;

    padding-left: clamp(20px, 2.33vw, 40px);

    padding-right: clamp(20px, 3vw, 80px);

    margin-block: 40px;

}



.booking-section-text span {

    font-size: clamp(24px, 4.88vw, 40px);

}



.booking-section-text span:last-child {

    font-size: clamp(24px, 4.88vw, 34px);

}



.note-flex {

    background: var(--White);

    padding: 80px 48px;

    text-align: left;

}



.note-title {

    color: var(--Blue);

    font-family: 'Helvetica';

    font-size: clamp(24px, 4vw, 28px);

    font-weight: 700;

    line-height: normal;

}



.note-flex ul {

    margin-top: 24px;

    padding-left: 15px;

}



.note-flex ul li {

    color: var(--Blue);

    font-family: 'Helvetica';

    font-size: var(--body-text);

    font-style: normal;

    font-weight: 400;

}



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



#BOOKING



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



.wpbc_cal_container {

    width: 100% !important;

    max-width: none !important;

}



.datepick-inline .datepick-header {

    justify-content: center !important;

    margin-bottom: 10px !important;

}



.datepick-inline .datepick-header span {

    font-family: 'Manrope' !important;

    font-size: var(--body-text) !important;

    font-weight: 600 !important;

}


.wpbc_wizard_step1 .wpdev-form-control-wrap {
    width: 30px !important;
    min-width: Min(3.5em, 100%) !important;
}

.wpbc_wizard_step2 .wpdev-form-control-wrap {
    min-width: Min(3.5em, 100%) !important;
    width: 200px;
}

.wpbc_container_booking_form .wpbc__row {
    align-items: center !important;
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 14px;
}

.wpbc_container_booking_form .wpbc__field:not(.wpbc__cal) {
    justify-content: space-between !important;
    align-items: center;
}

a.wpbc_button_light.wpbc_wizard_step_button.wpbc_wizard_step_2 {
    margin-bottom: 0;
}

.datepick-inline .datepick-days-cell:not(.datepick-unselectable) .wpbc-cell-box:hover {
    background-color: var(--Blue) !important;
}

.datepick-inline div.datepick-one-month .datepick td.datepick-current-day .wpbc-cell-box {
    background-color: var(--Blue) !important;
}


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



#FOOTER



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



.footer {

    background: var(--Blue);

}



.footer .navbar {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.copyright-flex {

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top: 1px solid rgba(156, 156, 156, 0.1);

}



.copyright {

    display: flex;

    align-items: center;

    gap: 34px;

}



.copyright-text, .www-flex {

    font-family: 'Manrope';

    font-size: 14.6px;

    font-weight: 500;

    line-height: 14.6px;

    letter-spacing: 1.043px;

}



.www-flex {

    display: flex;

    align-items: center;

    gap: 16px;

}



.socials-flex {

    display: flex;

    gap: 12px;

}



.social-item svg {

    width: 40px;

    height: 40px;

}





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



#CONTACT FORM



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

body:not(.home) .header-wrapper {
    background: var(--Blue);
    height: auto;
}

.contact-section {
    position: relative;
    overflow: hidden;
}

.contact-section .booking-bg-image figure img {
    width: 100%;
    mix-blend-mode: lighten;
    max-height: 1000px;
}

.contact-cols {
    width: 100%;
}

.wpcf7 {
    margin-top: 24px;
}

.wpcf7 p {
    display: flex;
    justify-content: flex-start;
    margin-top: 0;
    width: 100%;
}

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

.wpcf7 label {
    text-align: left;
    width: 100%;
}

.wpcf7-form-control-wrap {
    position: relative;
    display: flex;
    margin-top: 10px;
    width: 100%;
}

.wpcf7-text, .wpcf7-textarea {
    width: 100%;
    padding: 12px;
}

.wpcf7-submit {
    padding: 12px 24px;
    background: var(--White);
    border: none;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.wp-block-column iframe {
    width: 100%;
    min-height: 700px;
}

.contact-info a {
    text-decoration: underline !important;
}

.wpcf7-form-control-wrap textarea::placeholder {
    font-family: 'Georgia';
}

#booking iframe {
    background-color: #FCFCFC !important;
    border: none !important;
}

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



#MEDIA QUERIES



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



/*

// Mobile First

*/



/*

// Extra small devices (portrait phones, less than 576px)

// No media query for `xs` since this is the default in Bootstrap

*/



/* Small devices (landscape phones, 576px and up) */

@media (min-width: 576px) {



}



/* Medium devices (tablets, 768px and up) */

@media (min-width: 768px) {



}



/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {



}



/* X-Large devices (large desktops, 1200px and up) */



@media (min-width: 1200px) {

    

}



/* XX-Large devices (larger desktops, 1400px and up) */

@media (min-width: 1400px) {



}



/*

// Desktop First

*/



/* X-Large devices (large desktops, less than 1400px) */

@media (max-width: 1400px) {



}



/* Large devices (desktops, less than 1200px) */

@media (max-width: 1200px) {



}



/* Medium devices (tablets, less than 992px) */

@media (max-width: 992px) {



    .wp-block-columns.gallery-cols {

        flex-wrap: wrap !important;

    }



    .wp-block-column.gallery-col {

        flex: 1 0 calc(50% - 8px) !important;

    }



    .booking-cols {

        gap: 0;

    }



    .booking-cols .wp-block-column {

        flex-basis: 50% !important;

    }



    .book-btn {

        padding: 14px;

    }

    .contact-cols {
        flex-direction: column;
    }



}



/* Small devices (landscape phones, 576px and up) */

@media (max-width: 768px) {



    .header-wrapper {

        height: auto;

        background: var(--Blue);

    }



    .header-wrapper .navbar {

        align-items: center;

    }



    .header-bg {

        display: none;  

    }



    .header-wrapper .navbar .col-1 {

        margin-top: 0;

    }



    .header-logo {

        padding-block: 12px;

    }



    .video-intro-section {

        position: relative;

        height: auto;

    }



    .video-intro-section video {

        height: auto;

        min-height: 250px;

        object-fit: cover;

        position: static;

        top: 0;

    }



    .mid-section-text {

        width: 100%;

    }



    .gallery-col {

        height: 550px;

    }



    .vip-image img {

        height: 100%;

    }



    .navbar-nav li a {

        font-size: 24px;

    }



    .note-flex {

        margin-bottom: 40px;

    }



    .copyright-flex {

        flex-direction: column;

    }



    .header-wrapper .contact-text {

        display: none;

    }

    .wp-block-column iframe {
        min-height: 450px;
        max-height: 500px;
    }

    img.logo {
        max-width: 100%;
    }


}



/* X-Small devices (portrait phones, less than 576px) */

@media (max-width: 576px) {



    .header-wrapper .whatsapp-btn {

        display: none;

    }



    .footer {

        padding-top: 40px;

    }



    .footer .navbar {

        flex-direction: column;

        align-items: center;

        gap: 12px;

    }



    .copyright {

        gap: 4px;

        flex-direction: column;

    }



    #menu-container {

        width: 320px;

    }

}

.home  .block_hints.datepick {
    display: none;
}