/*Page title*/
@media (min-width: 1400px) {

    h2:not(.the_subtitle),
    .big_title,
    .the_title {
        font-size: 3em;
    }
}

@media (min-width: 1400px) {
    .wrap.list .prev_wrap .preview .col_content .content .title {
        font-size: 4em;
    }
}

@media (min-width: 1200px) {

    h2:not(.the_subtitle),
    .big_title,
    .the_title {
        font-size: 3.5em;
    }
}

/*-------------------------------------------------------------------------------*/
/*HOVER MENU*/
#highlight_menu ul.menu > li > a {
    color: var(--hover);
    font-weight: 500;
}

/*-------------------------------------------------------------------------------*/
/**Buttons hover color */
#main_book a:hover,
#location_preview .description_box .bnt a:hover,
#itinerary_container #itinerary .field.submit #itinerarySubmit:hover {
    color: white;
}

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

/*Title color*/
.wrap.list .prev_wrap .preview .col_content .content .title {
    font-size: 2.5em;

}

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

/*Padding bottom main content*/
.slideshow_container + .anchor_menu + .booking_form_section.inline + .main.social_connect,
.slideshow_container + .booking_form_section.inline + .main.social_connect {
    padding-bottom: 53px;
}

h2:not(.the_subtitle),
.big_title,
.the_title {
    padding-top: 30px;
}

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

/*Main content text color*/
.main.aside_content.social_connect .big_title,
.main.aside_content.social_connect .the_content p {
    color: white;
}

.main.aside_content.social_connect .big_title:before,
.main.aside_content.social_connect .big_title:after {
    color: white;
}

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

/*Menu sidebar color*/
#menu_sidebar_wrap .menu_sidebar {
    background: #f2f1ed;
}

#primary_menu ul.menu > li .menu_label > a,
#primary_menu ul.menu ul.sub-menu > li a {
    color: var(--secondary) !important;
}

#menu_sidebar_wrap .side_logo {
    background-color: #f2f1ed;
}

.fa,
.fas {
    color: var(--titles);
}

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


/*Hover MAIN MENU*/
#primary_menu ul.menu > li:hover .menu_label > a,
#primary_menu ul.menu ul.sub-menu > li:hover a {
    color: var(--hover) !important;
}

/*-------------------------------------------------------------------------------*/
/*TITLE COLOR OF SUBMENUS*/

#highlight_menu ul.menu ul.sub-menu > li > a {
    color: white !important;
}

/*HOVER*/
#highlight_menu ul.menu ul.sub-menu > li:hover > a {
    color: var(--frame-bg-l-15) !important;
}

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

/*Pictures paralax*/
/* 1. The Container (The Window) */
.wrap.list .prev_wrap .preview .col_thumb .thumb {
    width: 100%;
    /* Or your specific width */
    @media (min-width: 1025px) {
        height: 400px;
    }
    /* Or your specific height */
    overflow: hidden;
    position: relative;
    background-color: #ccc;
    /* Your fallback */
}

/* 2. The Image (The Landscape) */
.wrap.list .prev_wrap .preview .col_thumb .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    /* Premium Transition Settings */
    transition: transform 1.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    backface-visibility: hidden;
    will-change: transform;

    /* Scale it up slightly so we have 'overflow' to move into */
    transform: scale(1.1) translateY(0);
}

/* 3. The Animation (Triggered on Hover) */
.wrap.list .prev_wrap .preview .col_thumb .thumb:hover img {
    /* Moves the image up while maintaining the scale */
    /* This creates the 'parallax' depth feel */
    transform: scale(1.1) translateY(-5%);
}

/*-------------------------------------------------------------------------------*/
/*TEXT PARALAX*/

@keyframes revealText {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.main.aside_content.social_connect .big_title,
.main.aside_content.social_connect .the_content p {
    /* Only animates as the element enters the view during scroll */
    animation: revealText linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
}

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

/*PARALAX FOR ALL TEXTS*/

@keyframes revealText {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wrap.list .prev_wrap.first .preview .col_content {
    /* Only animates as the element enters the view during scroll */
    animation: revealText linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
}


/*-------------------------------------------------------------------------------*/
/*Effect Slideshow*/

.main.aside_content.social_connect:after {
    content: '';
    background: rgba(255, 255, 255, 14%);

    display: block;
    top: 0;
    left: 0;

    width: 100%;
    z-index: 1;

    position: absolute;
    height: 100%;
}

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

/*REMOVE GRAY RECTANGLE*/
@media (min-width: 768px) {
    .wrap.list .prev_wrap.first .preview .col_content:before {
        display: none;
    }
}

@media (max-width: 767px) {
    .container.container_large:after {
        display: none;
    }
}

@media (max-width: 767px) {
    .wrap.list .prev_wrap .preview .col_content:before {
        display: none;
    }
}

/*Footer*/
#footer {
    position: relative;
    overflow: hidden;
    color: #000000;
    /* Adjust text color for readability */
}

#footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* The Background Image */
    background-image: url('./img/sand-footer-img.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Adjust Opacity here (0.1 is very light, 1.0 is full) */
    opacity: 0.3;

    /* Ensures the background stays behind the text */
    z-index: 0;
}

/* Ensures the footer content stays on top of the background */
#footer > * {
    position: relative;
    z-index: 1;
}

#footer {
    background: hsl(200.17deg 62.95% 91.92%);
}

/*-------------------------------------------------------------------------------*/
/*The "Soft Wave" Top Edge*/

#footer {
    background: rgba(255, 252, 245, 0.7);
    /* A warm, sandy white */
    backdrop-filter: blur(15px);
    /* This creates the expensive 'glass' look */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    padding: 60px 20px;
    color: #004b50;
    /* Deep teal for readability */
}

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

/*DELETE THE GRAY RECTANGLE*/
.container.container_large:after,
.wrap.list .prev_wrap.last .preview .col_content:before,
.wrap.list .prev_wrap .preview .col_content:before {
    display: none;
}

/*-------------------------------------------------------------------------------*/
/*ICONS COLOR CHANGE TO WHITE */

.section_icons .wrap .icons .item {
    color: white;
}

/*-------------------------------------------------------------------------------*/
/*POST PREVIEW*/
.post_preview_section.carousel .item_wrap .preview .col_content .content,
.post_preview_section.carousel .item_wrap .preview .col_content .content .title,
.post_preview_section.carousel .item_wrap .preview .col_content .content .btns_wrap {
    color: white;
}

/*MORE INFO COLOR*/
.post_preview_section.carousel .item_wrap .preview .col_content .content .read_more *,
.post_preview_section.carousel .item_wrap .preview .col_content .content .read_more:before {
    color: white;
}

/*HOVER TEXT COLOR*/
.post_preview_section.carousel .item_wrap .preview .col_content .content .title:hover {
    color: white;

}

.post_preview_section.carousel h2,
.post_preview_section.carousel h3 {
    color: white;
}

/*-------------------------------------------------------------------------------*/
/*ANCHOR MENU TEXT COLOR*/
.anchor_menu .anchors_wrap .wrap .label span {
    color: white
}

.anchor_menu .anchors_wrap .wrap .label span:hover {
    color: var(--titles)
}

/*-------------------------------------------------------------------------------*/
/*SERVICES PAGE MARGINS FIX*/
.page-template-template-services .main .content_wrap {
    padding-bottom: 0px;
}

.page-template-template-services #break_scroll + .section {
    padding-top: 0px;
}

/*PADDING SERVICES POST PREVIEW*/
.page-template-template-services .section + .section {
    padding-top: 0px;
}


/*SERVICE POST PREVIEW TEXT COLOR / WHITE */

.list_2 .prev_wrap .preview .col_content .content .description,
.list_2 .prev_wrap .read_more *,
.list_2 .prev_wrap .read_more:before,
.list_2 .prev_wrap .preview .col_content .content .title {
    color: var(--titles) !important;
}

.list_2 .prev_wrap .preview .col_content .content .title:hover,
.list_2 .prev_wrap .read_more *:hover {
    color: var(--titles) !important;
}

.main.aside_content.social_connect {
    background-color: var(--bg);
}

.main.aside_content.social_connect:before,
.main.aside_content.social_connect:after {
    display: none;
}

#footer .address,
#footer .copy,
.main.aside_content.social_connect .big_title {
    color: var(--main);
}

.main.aside_content.social_connect .the_content p {
    color: black;
}

.main.aside_content.social_connect .the_subtitle, .main.aside_content.social_connect .big_title, .main.aside_content.social_connect .the_content, .main.aside_content.social_connect .info {
    color: initial;
}