@charset utf-8;
/*
Theme Name: Havenyonder
*/

@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Thin.ttf');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-ExtraLight.ttf');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Light.ttf');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Regular.ttf');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Medium.ttf');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-SemiBold.ttf');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Bold.ttf');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-ExtraBold.ttf');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('./fonts/Outfit-Black.ttf');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

.inner{width: 100%;max-width: 1500px;margin: auto;padding: 0px 100px;}
@media (min-width: 768px) {
    /* Chrome */
    ::-webkit-scrollbar { width: 6px;height: 8px;}
    ::-webkit-scrollbar-track {border-radius: 10px;background-color: transparent;}
    ::-webkit-scrollbar-thumb {background-color: rgba(144, 147, 153, 0.3);transition: background-color 0.3s;border-radius: 10px;}
    ::-webkit-scrollbar-thumb:hover {background-color: rgba(144, 147, 153, 0.3);transition: background-color 0.3s;}
    /* Firefox */
    *{
        /* scrollbar-color:rgba(144, 147, 153, 0.3) rgba(255,255,255,0) ; */
        scrollbar-width: thin;
    }
}
:root{
    /* base colors */
    --v-black:#000000;
    --v-black-dark:#1e1e1e;
    --v-black-light: #002329;
    --v-orange:#E35728;
    --v-orange-dark:#B75D26;
    --v-orange-light:#FF8E5C;
    --v-white: #FFFFFF;
    --v-green: #28e0b2;
    --v-green-darker: #21d0a4;
    --v-grey-dark:#404040;
    --v-grey: #818181;
    --v-white-dark:#F4F9FB;
    --v-blue:#0257E3;

    /* Public font size */
    --fs-90:90px;
    --fs-64:64px;
    --fs-60:60px;
    --fs-52:52px;
    --fs-50:50px;
    --fs-48:48px;
    --fs-44:44px;
    --fs-42:42px;
    --fs-40:40px;
    --fs-32:32px;
    --fs-30:30px;
    --fs-28:28px;
    --fs-26:26px;
    --fs-24:24px;
    --fs-22:22px;
    --fs-20:20px;
    --fs-18:18px;
    --fs-16:16px;
    --fs-14:14px;
    --fs-13:13px;
    --fs-12:12px;

}
@media (max-width:1600px) {
    :root{
        --fs-90:85px;
        --fs-64:58px;
        --fs-60:54px;
        --fs-52:50px;
        --fs-50:48px;
        --fs-48:44px;
        --fs-44:42px;
        --fs-42:40px;
        --fs-40:38px;
        --fs-32:30px;
        --fs-30:28px;
        --fs-28:26px;
        --fs-26:24px;
        --fs-24:22px;
    }
}
@media (max-width:1440px) {
    :root{
        --fs-90:75px;
        --fs-64:54px;
        --fs-60:50px;
        --fs-52:48px;
        --fs-50:46px;
        --fs-48:40px;
        --fs-44:38px;
        --fs-42:38px;
        --fs-40:36px;
        --fs-32:28px;
        --fs-30:26px;
        --fs-28:24px;
        --fs-26:22px;
        --fs-24:20px;
        --fs-22:20px;
    }

	
}
@media (max-width:1400px) {
    .inner{padding: 0 80px;}
}

@media (max-width:1240px) {
    :root{
        --fs-90:70px;
        --fs-64:48px;
        --fs-60:44px;
        --fs-52:42px;
        --fs-50:40px;
        --fs-48:36px;
        --fs-44:34px;
        --fs-42:34px;
        --fs-40:32px;
        --fs-32:26px;
        --fs-30:24px;
        --fs-28:22px;
        --fs-26:20px;
        --fs-24:18px;
        --fs-22:18px;
        --fs-20:18px;
        --fs-18:16px;
        --fs-16:14px;
    }
}

@media (max-width:1024px) {
    .inner{padding: 0 40px;}
}


@media (max-width:980px) {
    :root{
        --fs-90:65px;
        --fs-64:42px;
        --fs-60:40px;
        --fs-52:38px;
        --fs-50:36px;
        --fs-48:32px;
        --fs-44:30px;
        --fs-42:30px;
        --fs-40:28px;
        --fs-32:24px;
        --fs-30:24px;
        --fs-28:20px;
        --fs-26:18px;
        --fs-22:18px;
        --fs-20:18px;
    }
}

@media (max-width:768px) {
    .pc-br{display: none;}
    .inner{padding: 0 40px;}
    :root{
        --fs-90:50px;
        --fs-64:28px;
        --fs-60:28px;
        --fs-52:28px;
        --fs-50:26px;
        --fs-48:26px;
        --fs-44:24px;
        --fs-42:24px;
        --fs-40:24px;
        --fs-32:22px;
        --fs-30:20px;
        --fs-28:20px;
        --fs-26:16px;
        --fs-24:16px;
        --fs-22:16px;
        --fs-20:16px;
        --fs-18:16px;
    }

}

@media (max-width:510px) {
    .inner{padding: 0 20px;}
    :root{
        --fs-90:45px;
        --fs-64:20px;
        --fs-60:28px;
        --fs-52:26px;
        --fs-48:20px;
        /* 后续在定义start */
        --fs-44:20px;
        --fs-42:20px;
        --fs-40:20px;
        --fs-32:18px;
        --fs-30:18px;
        /* 后续在定义end */
        --fs-28:18px;
        --fs-22:16px;
        --fs-20:14px;
        --fs-18:14px;
        --fs-14:14px;
        --fs-13:13px;
        --fs-12:12px;
    }
}


*,
*:before,
*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding: 0;margin: 0;-webkit-tap-highlight-color: #fff;}
html{background:none;-webkit-text-size-adjust:100%;height:100%;overflow-x: hidden;}
body{font-family: 'Outfit', Arial, Helvetica, sans-serif;font-size: var(--fs-16);font-weight: 400; margin: 0px;line-height: 1.1;color: var(--v-white);text-align: left;background:#ffffff;}
hr{box-sizing: content-box;height: 0;overflow: visible}
b,strong{font-weight:800;}
button, input, optgroup, select, textarea {margin: 0; font-family: inherit;font-size: inherit;line-height: inherit;-webkit-appearance: none; -moz-appearance: none; appearance: none;outline: none;}
.flex{display: flex;justify-content: center;align-items: center;}
a{color: inherit;}
a, a:hover {text-decoration: none;}
a.underline, a.underline:hover {text-decoration: underline;}
p{margin: 0 0 20px;font-weight: 400;}
img{max-width: 100%;height: auto;border-style: none;vertical-align: middle;}
li{list-style: none;}
sub,sup {position: relative;font-size: 75%;line-height: 0;vertical-align: baseline;}
sub{bottom: -.25em;}
sup{top: -.5em;}
svg{overflow: hidden;vertical-align: middle;}
table{border-collapse: collapse}
th{text-align: inherit;text-align: -webkit-match-parent;}

label{display: inline-block;}
button{border-radius: 0;}
button:focus:not(:focus-visible){outline: 0;}
button,input,optgroup,select,textarea{margin: 0;font-family: inherit;font-size: inherit;line-height: inherit;}
button,input{overflow: visible;}
button,select{text-transform: none;}
[role=button]{cursor: pointer;}
select{word-wrap: normal;}
[type=button],[type=reset],[type=submit],button{-webkit-appearance: button;}
[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor: pointer;}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding: 0;border-style: none;}
input[type=checkbox],input[type=radio]{box-sizing: border-box;padding: 0;}
textarea{overflow: auto;resize: vertical;}


.green-button{position: relative; z-index: 1; overflow: hidden; font-size: var(--fs-22);color: #0B1526;display: flex;width: max-content;padding: 16px 26px 18px 32px;background: var(--v-green);border-radius: 10px;font-weight: 400;gap: 8px; align-items: center;}
.green-button::before {content: '';display: block;width:210px;height: 150px;background-color: var(--v-green-darker);position: absolute;top: 0%;left: 0%;border-radius: 50%;transition: .4s;z-index: -1;transform: translate(-100%, 100%);}
.green-button span{line-height: 30px;position: relative;transition: .4s;}
.green-button .botton-svg{transition: .4s;display: flex;align-items: center;padding-right: 5px;}
.green-button:hover::before{transform: translate(50%, 50%) scale(4);}
/* .green-button:hover .botton-svg img{transform: rotate(-45deg);} */
.green-button:hover .botton-svg{transform: translateX(10px);}
.green-button:hover span{transform: translateX(5px);}

.whiet-button{border: 2px solid #fff;font-size: var(--fs-20);position: relative;z-index: 1;overflow: hidden;transition: background 0.5s ease-in-out, color 0s linear; color: #fff;display: flex;width: max-content;padding: 13px 36px;border-radius: 10px;font-weight: 400;gap: 8px;align-items: center;}
.whiet-button span{line-height: 30px;position: relative;transition: .4s;}
.whiet-button .botton-svg{display: flex;transition: .4s;}
.whiet-button .botton-svg svg path{transition: .4s;}
.whiet-button .botton-svg svg {width: 30px;transform: rotate(-90deg);transition: .4s;}
.whiet-button::before{content: '';display: block;width: 120px;height: 150px;background-color: #fff;position: absolute;top: 0%;left: 0%;border-radius: 50%;transition: .4s;z-index: -1;transform: translate(-100%, 100%);}
.whiet-button:hover::before{transform: translate(50%, 50%) scale(4);}
.whiet-button:hover{color: rgb(93, 158, 84); 
    background: #fff;
}
/* .whiet-button:hover .botton-svg svg{transform: rotate(-45deg);} */
.whiet-button:hover .botton-svg svg path{fill: rgb(93, 158, 84);}
.whiet-button:hover .botton-svg{transform: translateX(10px);}
.whiet-button:hover span{transform: translateX(5px);}

.green-button-rg{font-size: var(--fs-20);display: flex;position: relative;z-index: 1;overflow: hidden;transition: background 0.5s ease-in-out, color 0s linear;width: max-content;border-radius: 10px;font-weight: 400;align-items: center;    color: rgb(93, 158, 84);border: 2px solid rgb(93, 158, 84);gap: 12px;padding: 13px 32px;}
.green-button-rg span{line-height: 30px;position: relative;transition: .4s;}
.green-button-rg .botton-svg{display: flex;transition: .4s;}
.green-button-rg:hover .botton-svg svg path{transition: .4s;}
.green-button-rg .botton-svg svg path{transition: .4s;}
.green-button-rg .botton-svg svg{width: 30px;transform: rotate(-90deg);transition: .4s;}
.green-button-rg::before{content: '';display: block;width: 120px;height: 150px;background-color: var(--v-green);position: absolute;top: 0%;left: 0%;border-radius: 50%;transition: .4s;z-index: -1;transform: translate(-100%, 100%);}
.green-button-rg:hover::before{transform: translate(50%, 50%) scale(4);}
.green-button-rg:hover{color: #fff; 
    background: var(--v-green);
}
.green-button-rg:hover .botton-svg svg path{fill:#fff;}
/* .green-button-rg:hover .botton-svg svg{transform: rotate(-45deg);} */
.green-button-rg:hover .botton-svg{transform: translateX(10px);}
.green-button-rg:hover span{transform: translateX(5px);}

.content-button{font-size: var(--fs-26);position: relative;z-index: 1;overflow: hidden;transition: background 0.5s ease-in-out, color 0s linear;display: flex;width: max-content;border-radius: 10px;gap: 26px;align-items: center;font-weight: 400;color: var(--v-green);background: #fff;padding: 17px 44px 16px 55px;}
.content-button span{line-height: 30px;position: relative;transition: .4s;}
.content-button .botton-svg{display: flex;transition: .4s;}
.content-button .botton-svg svg {width: 30px;transform: rotate(-90deg);transition: .4s;}
.content-button .botton-svg svg path{fill:var(--v-green);}
.content-button:hover .botton-svg svg path{transition: .4s;}
.content-button::before{content: '';display: block;width: 120px;height: 150px;background-color: #417b72;position: absolute;top: 0%;left: 0%;border-radius: 50%;transition: .4s;z-index: -1;transform: translate(-100%, 100%);}
.content-button:hover::before{transform: translate(50%, 50%) scale(4);}
.content-button:hover{color: #fff; 
    background: var(--v-green);
}
.content-button:hover .botton-svg svg path{fill:#fff;}
/* .content-button:hover .botton-svg svg{transform: rotate(-45deg);} */
.content-button:hover .botton-svg{transform: translateX(10px);}
.content-button:hover span{transform: translateX(5px);}



.white-button{ position: relative; z-index: 1; overflow: hidden; font-size: var(--fs-22); color: #962220; display: flex ; width: max-content; padding: 20px 36px 20px 42px; background: #E9EDF0; border-radius: 30px; font-weight: 400; gap: 18px; align-items: center; line-height: 1; transition: all .5s ease; display: flex; justify-content: center; align-items: center;}
.white-button img{transition: all .5s ease;display: flex;}

.white-button::before{content: '';display: block;width:100%;height:100%;background-color: #d4d4d4;position: absolute;top: 0%;left:-100%;z-index: -1;transition: all .5s ease;}
.white-button span{line-height:1;position: relative;transition: .4s;}

.white-button:hover span{transform: translateX(5px);}
.white-button:hover img{transform: translateX(7px);}
.white-button:hover::before{left: 0;}

@media (max-width:1240px){
    .white-button-button{padding: 16px 30px;}
    .white-button-button .botton-svg img{max-width: 20px;}
}
@media (max-width:1024px){
    .white-button-button{padding: 12px 20px;}
}
.red-button{ position: relative; z-index: 1; overflow: hidden; font-size: var(--fs-22); color: #FFFFFF; display: flex ; width: max-content; padding: 20px 36px 20px 42px; background: #AE1716; border-radius: 30px; font-weight: 400; gap: 18px; align-items: center; line-height: 1; transition: all .5s ease; display: flex; justify-content: center; align-items: center;  }
.red-button img{transition: all .5s ease;display: flex;}

.red-button::before{content: '';display: block;width:100%;height:100%;background-color: #8a1212;position: absolute;top: 0%;left:-100%;z-index: -1;transition: all .5s ease;}
.red-button span{line-height:1;position: relative;transition: .4s;}

.red-button:hover span{transform: translateX(5px);}
.red-button:hover img{transform: translateX(7px);}
.red-button:hover::before{left: 0;}
@media (max-width:1240px){
    .red-button-button{padding: 16px 30px;}
}
@media (max-width:1024px){
    .red-button-button{padding: 12px 20px;}
}


.banner-title{min-height: 538px;display: flex;flex-direction: column;justify-content: center;}


h1{font-size: var(--fs-60);line-height:1;font-weight:500;}
h2{font-size: var(--fs-50);line-height:1;font-weight: 300;color: var(--v-white-dark);}

/* protected Css Start */
.ppw-post-password-container{width: 100%;max-width: 500px;margin: 200px auto;padding: 20px;}
.ppw-ppf-desc{font-size: 22px;color: var(--v-black);margin-bottom: 30px;}
.ppw-ppf-field-container{display: flex;justify-content: space-between;align-items: center;}
.ppw-ppf-input-container label.ppw-pwd-label{width: 100%;color: var(--v-black);}
.ppw-ppf-input-container label.ppw-pwd-label input{width: 70%;margin-left: 10px;border: 1px solid var(--v-black);padding: 4px 10px;}
.ppw-pwd-submit-btn{ width: 120px; height: 36px; background: var(--v-green); border: 0px; border-radius: 10px; color: var(--v-white-dark); -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; }

/* protected Css End*/


@media (max-width:1240px){
     .banner-title{min-height: 470px;}
    
}
@media (max-width:1024px) {
    .banner-title{min-height: 400px;}
    .green-button{padding: 12px 20px;}
}
@media (max-width:768px){
     .banner-title { min-height: 240px;}
     
    .green-button{padding:8px 15px;}
    .green-button .botton-svg img{max-width: 14px;width: 100%;}
}

/* Always remember to compress your live stylesheet and keep an uncompressed backup */