/*
Theme Name: thecollectors
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.4
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

body{
    font-family: "UTM Avo",sans-serif;
}
.font-sans-serif{
    font-family: "UTM Avo",sans-serif !important;
}
.font-serif{
    font-family: "Noto Serif Display SemiCondensed",serif;
}
.nav-uppercase>li>a{
    font-weight: 500;
    font-size: 1em;
}
.block{
    display: block;
}
.html.header-button-1 .button.primary, .contact-form .wpcf7-form-control.wpcf7-submit, .button.primary.cta-button{
    color: #b49569;
    border-radius: 99px;
    background: #FFFFFF;
    padding: 5px 16px;
    line-height: initial;
    font-size: 15px;
    position: relative;
    width: max-content;
    margin: auto;
    z-index: 0;
}
.h-auto{
    height: auto!important;
}
.html.header-button-1 .button.primary:after, .button.primary.cta-button:after {
    content: "";
    display: block;
    width: 100%;
    height: calc(100% + 10px);
    position: absolute;
    background:#fff;
    transform: translate(-50%,-50%) scale(1);
    left: 50%;
    top: 50%;
    animation: zoomInOut 1s linear infinite;
    z-index: -1;
    border-radius: 99px;
}
.html.header-button-1 .button.primary:before, .button.primary.cta-button:before {
    content: "";
    display: block;
    width: 100%;
    height: calc(100% + 10px);
    position: absolute;
    background:#fff;
    transform: translate(-50%,-50%) scale(1);
    left: 50%;
    top: 50%;
    animation: zoomInOut 1.2s linear infinite .4s;
    z-index: -1;
    border-radius: 99px;
}
.html.header-button-1 .button.primary > span, .button.primary.cta-button > span{
    display: flex;
    gap: 8px;
    align-items: center;
}
.html.header-button-1 .button.primary span:before, .button.primary.cta-button span:before {
    content:'';
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%23b49569"><path d="M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm80 240v-80h400v80H280Zm0 160v-80h280v80H280Z"/></svg>')
}
@keyframes zoomInOut {
    from {
       transform: translate(-50%,-50%) scale(1);
        opacity: .5;
    }
    to {
        transform: translate(-50%,-50%) scale(1.3);
        opacity: 0;
    }
}
.html.custom .phone-button{
    display: flex;
    gap: 4px;
    font-size: 16px;
    border: 1px solid;
    justify-content: center;
    align-items: center;
    border-radius: 99px;
    padding: 5px 16px;
    color: #ffffff;
}
.html.custom .phone-button svg{
    width: 24px;
    height: 24px;
}
.contact-form .wpcf7-form-control{
    color: #b49569;
    background: transparent;
    border-color: rgb(255 255 255 / 0%);
    text-transform: uppercase;
    padding: 13px 12px;
    line-height: initial;
    height: auto;
    max-height: unset;
    box-shadow: none;
    border-bottom: 1px solid #c7aa816b;
    border-radius: 0;
    font-size: 1em;
}
.contact-form .wpcf7-form-control::placeholder{
    color: #b49569;
}
.contact-form .wpcf7-form-control:focus{
    background: transparent;
    color: #b49569;
    box-shadow: none;
    border-bottom: 1px solid #c7aa81;
}
.contact-form .wpcf7-form-control.wpcf7-submit{
    padding: 12px 24px;
    margin: auto;
    display: block;
    color: #fff;
    background: #b49569;
}
.contact-form select.wpcf7-form-control{
    background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 98% center;
    cursor: pointer;
}
.hero-banner .banner-bg.fill{
    z-index: 0;
}
.hero-banner .banner-bg.fill:before{
    position: absolute;
    content: "";
    width: 100%;
    height: 90%;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(0deg, black -19%, transparent);
}

.banner .slogan > h2 span{
    text-transform: uppercase;
    background: linear-gradient(45deg, #ffe4bf, #ffe6c0, #ac8449);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(1px 1px 0 #000);
}
.bg-black-20{
    background: rgb(0 0 0 / 31%);
    padding: 20px;
    border-radius: 24px;
    backdrop-filter: blur(5px);
}
.banner .open-video{
    border-color: #d9993f!important;
    filter: drop-shadow(2px 2px 0 #000);
}
.banner .open-video:hover{
    background: transparent!important;
}
.banner .open-video .icon-play{
    background: linear-gradient(45deg, #d9993f, #ffd89d, #a46e20);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(1px 1px 0 #000);
}
.rounded{
    border-radius: 15px;
    overflow: hidden;
}
.rounded .box-text{
    border-radius: 16px 16px 0 0;
}
.text-gradient{
    background: linear-gradient(45deg, #d9993f, #ffd89d, #a46e20);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(2px 2px 0 #000);
}
.icon-box-left .icon-box-img img, .icon-box-img svg{
    padding-top: 0;
    margin-top: -3px;
}
.amenities-item > .text{
    position: absolute;
    bottom: 0;
    background: #f7f5f5;
    display: flex;
    padding: 10px 20px;
    border-radius: 16px 16px 0 0;
    width: 85%;
    font-size: 15px;
    height: 65px;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.amenities-item > .text > p{
    margin-bottom: 0;
}
.mfp-container, .mfp-wrap{
    backdrop-filter: blur(4px);
}
.align-equal .img.has-hover,.align-equal .img.has-hover .image-cover{
    height: 100%;
}
.scrolldown-button{
    color: #fff !important;
}
.scrolldown-button:after{
    content:"";
   color: #fff !important;
    background-repeat: no-repeat;
    background-position: bottom center;
    padding-bottom: 24px;
    animation: bounceIndown 1.5s ease infinite;
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move-down-icon lucide-move-down"><path d="M8 18L12 22L16 18"/><path d="M12 2V22"/></svg>');
    width: 24px;
    position: absolute;
    bottom: -45px;
    left: calc(50% - 12px);
}
.kv-top{
    position: absolute;
    bottom:-40%;
    left: 1%;
}
.kv-center{
    position: absolute;
    left:50%;
    transform: translateX(-50%);
    top:-50%;
}
.kv-end{
    position: absolute;
    right:-30%;
    transform: translateY(-50%);
    top:50%;
}
.overflow-hidden{
    overflow: hidden;
}
.cta-button-outline{
    border: 1px solid #b49569;
    color:#b49569;
    background: #fff;
}
.button.primary.cta-button-dark{
    background-color: #cba164;
}
.wpcf7-form-control.wpcf7-submit{
    position: relative;
    height: auto;
    letter-spacing:initial;
    padding-block: unset;
    padding-inline: unset;
}
.button.primary.cta-button-dark:after,.wpcf7-form-control.wpcf7-submit:after {
    content: "";
    display: block;
    width: 100%;
    height: 120%;
    position: absolute;
    background:#cba164;
    transform: translate(-50%,-50%) scale(1);
    left: 50%;
    top: 50%;
    animation: zoomInOut 1s linear infinite;
    z-index: -1;
    border-radius: 99px;
}
.button.primary.cta-button-dark:before,.wpcf7-form-control.wpcf7-submit:before {
    content: "";
    display: block;
    width: 100%;
    height: 120%;
    position: absolute;
    background:#cba164;
    transform: translate(-50%,-50%) scale(1);
    left: 50%;
    top: 50%;
    animation: zoomInOut 1.2s linear infinite .4s;
    z-index: -1;
    border-radius: 99px;
}
.timeline{
    position: relative;
}
.timeline:before{
    content:'';
    position: absolute;
    height: 100%;
    width: 1px;
    background-color: #efefef;
    left: 50%;
    top:0;
}
.dot-left:after, .dot-right:after{
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #cba164;
    border-radius: 50%;
    content:'';
    top: 20%;
    right: -6px;
}
.dot-left:after{
    left: -4px;
}
.relative{
    position: relative;
}
.off-canvas-left.dark .mfp-content, .off-canvas-right.dark .mfp-content {
    background-color: #cba164 !important;
}
.mobile-sidebar .mfp-close{
	    mix-blend-mode: color-dodge;
}
@keyframes bounceIndown {
   from{
       transform: translateY(-30px);
   }
    to{
        transform: translateY(0px);
    }
}
@media (max-width: 500px) {
    .html.header-button-1 .button.primary, .contact-form .wpcf7-form-control.wpcf7-submit{
        font-size: 13px;
    }

    #masthead .medium-logo-left .flex-right {
        flex: unset;
    }
    .timeline:before,.dot-left:after, .dot-right:after{
        display: none;
    }
    #masthead #logo {
        width: 160px;
    }
}
@media (max-width: 360px) {
    .html.header-button-1 .button.primary, .contact-form .wpcf7-form-control.wpcf7-submit{
        font-size: 11px;
    }
    #masthead #logo {
        width: 120px;
    }
}