@font-face {
    font-family: 'Tobias';
    src: url('../fonts/TobiasTRIAL-Regular.woff2') format('woff2'),
        url('../fonts/TobiasTRIAL-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tobias';
    src: url('../fonts/Tobias-TRIAL-Light.woff2') format('woff2'),
        url('../fonts/Tobias-TRIAL-Light.woff') format('woff');
    font-weight: thin;
    font-style: normal;
    font-display: swap;
}



@font-face {
    font-family: 'Cordier Script';
    src: url('../fonts/CordierScriptUnlicensedTrial-Regular.woff2') format('woff2'),
        url('../fonts/CordierScriptUnlicensedTrial-Regular.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cordier Linked';
    src: url('../fonts/CordierLinkedUnlicensedTrial-Regular.woff2') format('woff2'),
        url('../fonts/CordierLinkedUnlicensedTrial-Regular.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'OT Miniature';
    src: url('../fonts/OTMiniature-Bold.woff2') format('woff2'),
        url('../fonts/OTMiniature-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OT Miniature';
    src: url('../fonts/OTMiniature-Extralight.woff2') format('woff2'),
        url('../fonts/OTMiniature-Extralight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OT Miniature';
    src: url('../fonts/OTMiniature-Regular.woff2') format('woff2'),
        url('../fonts/OTMiniature-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}




@font-face {
    font-family: 'Galano Classic Alt';
    src: url('../fonts/GalanoClassicDEMOAlt-Bold.woff2') format('woff2'),
        url('../fonts/GalanoClassicDEMOAlt-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Galano Classic';
    src: url('../fonts/GalanoClassicDEMO-Bold.woff2') format('woff2'),
        url('../fonts/GalanoClassicDEMO-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Galano Classic';
    src: url('../fonts/GalanoClassicDEMO-Regular.woff2') format('woff2'),
        url('../fonts/GalanoClassicDEMO-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}







.dm {
  font-family: "DM Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.tob{font-family: 'Tobias';}
.ot{font-family: 'OT Miniature';}
.gal{ font-family: 'Galano Classic';}
.cord{font-family: 'Cordier Linked';}

p{
    text-wrap-style: pretty;
}

#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: -1;
}

body {
    position: relative;
    background: #fff;
}


html{scroll-behavior:smooth;}

.container{padding-left:20px; padding-right:20px; width:100%; margin:0 auto;}

.slip, .form_slip{overflow:hidden;}
.fixed_header{box-shadow: 0 5px 5px rgba(0,0,0,0.1);  transition:0.2s ease;}



.trigger{width:40px; display: flex; flex-direction: column; gap:12px;}
.trigger span{display: block; height: 1px; background: #FFFFFF; transition:all ease 0.2s;}

/* Cross animation */
.slip .trigger span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}



.slip .trigger span:nth-child(2){
  transform:translateY(-7px) rotate(-45deg);
}







.close_icon{width:40px; display: flex; flex-direction: column; gap:12px;}
.close_icon span{display: block; height: 1px; background: #FFFFFF; transition:all ease 0.2s;}

/* Cross animation */
.close_icon span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.close_icon span:nth-child(2){
  transform:translateY(-7px) rotate(-45deg);
}


.close_icon:hover span:nth-child(1),
.slip .trigger:hover span:nth-child(1){
  transform:translateY(7px) rotate(35deg);
}
.close_icon:hover span:nth-child(2),
.slip .trigger:hover span:nth-child(2)
{
  transform:translateY(-7px) rotate(-35deg);
}





.language_switch a{width:45px; height: 34px; display: flex; align-items: center; justify-content: center; color: #ffffff; border-radius: 20px; text-align: center;}
.language_switch a.active{background-color: #040707;}

.common_btn{padding-left: 35px; background: url(../images/svg/btn-left.svg) left center no-repeat; color:#ffffff; text-transform: uppercase; transition: all ease 0.2s;}
.common_btn span{display: flex; height:40px; background: url(../images/svg/btn-right.svg) right center no-repeat; background-size: auto 40px; display: flex; align-items: center; padding-right: 35px; transition: all ease 0.2s; }


.common_btn:hover{background: url(../images/svg/btn-left-hover.svg) left center no-repeat;}
.common_btn:hover span{background: url(../images/svg/btn-right-hover.svg) right center no-repeat; background-size: auto 40px; color:#000000;}



.right_bottom_footer a,
.footer_contact
{transition: all ease 0.2s;}

.right_bottom_footer a:hover{text-decoration: underline;}c
.footer_contact:hover{color:#B4955E;}


.menu_overlay{position: fixed; left:0; top:0; right:0; bottom: 0; background: rgba(30,30,30,0.5); z-index: -5; opacity: 0; visibility:hidden; transition: all ease 0.2s;}
.menus_panel{position: fixed; right:0; top:67px; bottom:0; width:100%; max-width:975px; background-color: #000000; z-index: 2; transition: all ease 0.2s; transform: translateX(100%); display:flex; align-items:center;}


.form_panel{position: fixed; right:0; top:0 !important; bottom:0; width:100%; max-width:975px; background-color: #000000; z-index: 5; transition: all ease 0.2s; transform: translateX(100%); display:flex; flex-direction: column;}

.menu_panel_content, .menu_panel_header, .form_panel_content, .form_panel_header{padding-left: 20px; padding-right:20px;}

.menus_panel:after,
.form_panel:after
{content:''; position: absolute; left:0; bottom:0; right:0; height:50px; background:url(../images/svg/footer_lines.svg); border-top:1px solid #616165; opacity: 0.5;}

.slip .menu_overlay{z-index: 1; visibility:visible; opacity:1;}
.slip .menus_panel{transform: translateX(0);}



.form_slip  .menu_overlay{z-index: 2; visibility:visible; opacity:1;}
.form_slip .form_panel{transform: translateX(0);}



.navigation{width:100%;}
.navigation ul li a{color: #F5F1EA; display:block; border-bottom:1px solid #343435; padding:10px 0; font-family: 'OT Miniature'; text-transform: uppercase; font-weight:100; font-size: 28px; transition: all ease 0.2s;}

.navigation ul li a:hover{letter-spacing: 2%;}


body{padding-top:66px;}



 /* ---- Pagination: horizontal line segments ---- */
  .swiper-pagination{
    position:absolute !important;
    left:20px !important; right:20px !important;
   width:auto !important;
   transform:none !important;
    display:flex;
    gap:12px;
    top:20px !important;
    bottom:auto !important;
    max-width:850px;
  }
 
  .swiper-pagination-bullet{
    flex:1;
    height:3px;
    border-radius:0;
    background: rgba(255,255,255,0.5);
    margin:0 !important;
    opacity:1 !important;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    transition: background 0.2s ease;
  }
 
  .swiper-pagination-bullet .fill{
    position:absolute;
    left:0; top:0;
    height:100%;
    width:0%;
    background: #ffffff;
    border-radius:0;
  }
 
  /* completed segments (fully filled, no live animation) get an instant snap */
  .swiper-pagination-bullet.is-done .fill{
    width:100%;
  }



  .img_area:before{content:''; position: absolute; left:80%; bottom:0; right:0; height:100%; background:url(../images/svg/footer_lines.svg); opacity: 0.1; z-index:0;}

  .text_area:before{content:''; position: absolute; left:0; bottom:0; right:93%; height:100%; background:url(../images/svg/footer_lines.svg); opacity: 0.1; z-index:0;}

  .left_section:before{content:''; position: absolute; left:0; bottom:0; right:93%; height:100%; background:url(../images/svg/footer_lines.svg); opacity: 0.2; z-index:0;}

  .residence_banner:after{content:''; position: absolute; left:0; bottom:0; right:0; height:50px; background:url(../images/svg/footer_lines.svg); border-top:1px solid #ffffff; opacity: 0.1;}

  .emerald_banner:after{content:''; position: absolute; left:0; bottom:0; right:0; height:50px; background:url(../images/svg/footer_lines.svg); border-top:1px solid #ffffff; opacity: 0.1;}

  .community_banner:after{content:''; position: absolute; left:0; bottom:0; right:0; height:50px; background:url(../images/svg/footer_lines.svg); border-top:1px solid #ffffff; opacity: 0.1;}

  .berger_banner:after{content:''; position: absolute; left:0; bottom:0; right:0; height:50px; background:url(../images/svg/footer_lines.svg); border-top:1px solid #ffffff; opacity: 0.1;}

  .blue_text_area:before{content:''; position: absolute; left:0; bottom:0; right:93%; height:100%; background:url(../images/svg/footer_lines.svg); opacity: 0.1; z-index:0;}

  .blue_img_area:before{content:''; position: absolute; left:93%; bottom:0; right:0; height:100%; background:url(../images/svg/footer_lines.svg); opacity: 0.1; z-index:0;}

  .emerald_text_section:before{content:''; position: absolute; left:0; bottom:0; right:93%; height:100%; background:url(../images/svg/footer_lines.svg); opacity: 0.1; z-index:0;}

  .emerald_text_section:after{content:''; position: absolute; left:93%; bottom:0; right:0; height:100%; background:url(../images/svg/footer_lines.svg); opacity: 0.1; z-index:0;}

  .emerald_img_section:after{content:''; position: absolute; left:0; bottom:0; right:0; height:100%; background:url(../images/svg/footer_lines.svg); opacity: 0.1; z-index:-1;}

  .term_banner:after{content:''; position: absolute; left:0; bottom:0; right:0; height:50px; background:url(../images/svg/footer_lines.svg); border-top:1px solid #ffffff; opacity: 0.1;}

  .line_divider:after{content:''; position: absolute; left:0; bottom:0; right:0; height:100%; background:url(../images/svg/footer_lines.svg); opacity: 0.1; z-index:0;}

  .community_2_banner:after{content:''; position: absolute; left:0; bottom:0; right:0; height:80px; background:url(../images/svg/footer_lines.svg); border-top:1px solid #ffffff; opacity: 0.1;}

  .text_banner:after{content:''; position: absolute; left:0; bottom:0; right:0; height:50px; background:url(../images/svg/footer_lines.svg); border-top:1px solid #ffffff; opacity: 0.2;}


  .features_grid .hero_text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: calc(50% - 10px);
}

.features_grid .hero_text .icon img {
    width: 34px;
    min-width: 34px;
}

.features_grid .hero_text p {
    color: #423A27;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 6%;
    text-transform: uppercase;
    text-align: center;
    font-family: 'Galano Classic';
}


.heart_grid .hero_text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: calc(50% - 10px);
}

.heart_grid .hero_text .icon img {
    width: 34px;
    min-width: 34px;
}

.heart_grid .hero_text p {
    color: #423A27;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 6%;
    text-transform: uppercase;
    text-align: center;
    font-family: 'Galano Classic';
}

.img_grid .grid_container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: calc(50% - 10px);
}

.img_grid .grid_container img {
    width: 100%;
}

.img_grid .grid_container h3 {
    color: #423A27;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 300;
    text-transform: uppercase;
}

.img_grid .grid_container p {
    color: #151A22;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.96px;
    font-weight: 300;
    text-transform: uppercase;
}


.grid_container {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* .image_wrap {
    overflow: hidden;
}

.image_wrap img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.grid_container:hover .image_wrap img {
    transform: scale(1.08);
}

.image_zoom {
    overflow: hidden;
}

.image_zoom img {
    width: 100%;
    transition: transform 0.7s ease;
}

.image_zoom:hover img {
    transform: scale(1.05);
} */


.berger_page header,
.berger_page .menus_panel,
.berger_page .form_panel
{background-color: #151A22 !important;}


.community_page header,
.community_page .menus_panel,
.community_page .form_panel
{background-color: #251819 !important;}



.community2_page header,
.community2_page .menus_panel,
.community2_page .form_panel
{background-color: #2D2617 !important;}


.residency_page header,
.residency_page .menus_panel,
.residency_page .form_panel
{background-color: #151A22 !important;}


.emerald_page header,
.emerald_page .menus_panel,
.emerald_page .form_panel
{background-color: #141910 !important;}




/* =========================================
   CONTACT FORM
========================================= */

.contact-form {
    width: 100%;
    max-width: 100%;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================
   FORM GRID
   Mobile First
========================================= */

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 18px;
    row-gap: 20px;
}


/* =========================================
   FIELD
========================================= */

.form-field {
    position: relative;
    width: 100%;
}


/* =========================================
   INPUT
========================================= */

.form-field input {
    display: block;

    width: 100%;
    height: 80px;

    padding: 22px 0 5px;

    background: transparent;

    border: none;
    border-bottom: 1px solid #303030;

    outline: none;

    color: #ffffff;

    font-family: "Galano Classic", sans-serif;
    font-size: 16px;
    font-weight: 400;

    box-sizing: border-box;

    transition: border-color 0.3s ease;
}


/* =========================================
   LABEL
========================================= */

.form-field label {
    position: absolute;

    left: 0;
    top: 50%;

    color: #7D7A79;

    font-family: "Galano Classic", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    letter-spacing: 0.96px;

    text-transform: uppercase;

    pointer-events: none;

    transform: translateY(-50%);

    transition:
        top 0.3s ease,
        transform 0.3s ease,
        font-size 0.3s ease,
        letter-spacing 0.3s ease,
        color 0.3s ease;
}


/* =========================================
   FLOATING LABEL
========================================= */

.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label {
    top: 7px;
    transform: translateY(0);
    color: #B8A477;
    font-size: 10px;
    letter-spacing: 0.6px;
}


/* =========================================
   ANIMATED UNDERLINE
========================================= */

.form-field::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background: #B8A477;

    transition: width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.form-field:focus-within::after,
.form-field input:not(:placeholder-shown):after
{
    width: 100%;
}





/* =========================================
   FULL WIDTH FIELDS
========================================= */

.full-field {
    margin-top: 20px;
}


/* =========================================
   BOTTOM SECTION
========================================= */

.form-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 45px;
}


/* =========================================
   DESCRIPTION
========================================= */

.form-bottom p {
    margin: 0;

    color: #BEB7B5;
font-family: "Tobias TRIAL";
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: normal;
}


.checkbox-wrap {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.checkbox-wrap input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 3px 0 0;

    accent-color: #B8A477;
    

    cursor: pointer;
}

.checkbox-wrap label {
    margin: 0;

    color: #BEB7B5;
    font-family: 'Tobias', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;

    cursor: pointer;
}



@media all and (min-width:640px)
{

    

}

@media all and (min-width:768px)
{



    .navigation ul li a{font-size:34px;}
    .menu_panel_content, .menu_panel_header, .form_panel_content, .form_panel_header{padding-left: 30px; padding-right: 30px;}

   .features_grid .hero_text {
        width: calc(33.33% - 16px);
    }

    .features_grid .hero_text p {
        font-size: 14px;
    }

    .heart_grid .hero_text {
        width: calc(33.33% - 16px);
    }

    .heart_grid .hero_text p {
        font-size: 14px;
    }

    .img_area:before{left:50%;}



   .form-field label{
    font-size: 16px;
   }

    

    .form-bottom {
        margin-top: 45px;
    }

    .form-bottom p {
        font-size: 18px;
    }

    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        column-gap: 18px;
        
    }

    
}

@media all and (min-width:1024px)
{ 
  body{padding-top:106px;}
  

  .menu_panel_content, .menu_panel_header, .form_panel_content, .form_panel_header{padding-left: 40px; padding-right: 40px;}
    .menus_panel:after{height:76px;}


    .navigation ul li a{font-size:40px;}

      .swiper-pagination{
    
    left:50% !important; right:auto !important;
   
   transform:translate(-50%,0) !important;
   width:100% !important;
    top:40px !important;
  }

  .features_grid .hero_text {
        gap: 30px;
        width: calc(25% - 20px);
    }

    .features_grid .hero_text .icon img {
    width: 44px;
    min-width: 44px;
}

.heart_grid .hero_text {
        gap: 30px;
        width: calc(25% - 20px);
    }

    .heart_grid .hero_text .icon img {
    width: 44px;
    min-width: 44px;
}

 .img_grid .grid_container {
        width: calc(33.33% - 27px);
    }

    .img_grid .grid_container h3 {
        font-size: 30px;
    }

    .img_grid .grid_container p {
        font-size: 14px;
    }

    .checkbox-wrap label {
        font-size: 16px;
    }


}

@media all and (min-width:1280px)
{
   body{padding-top:120px;}
  

.menu_panel_content, .menu_panel_header, .form_panel_content, .form_panel_header{padding-left: 50px; padding-right: 50px;}

   .features_grid .hero_text {
        width: calc(20% - 40px);
    }

    .features_grid .hero_text p {
        font-size: 16px;
    }

    .heart_grid .hero_text p {
        font-size: 16px;
    }

    .heart_grid .hero_text {
        gap: 30px;
        width: calc(25% - 20px);
    }


}

@media all and (min-width:1536px)
{
    .container{max-width:1750px;}
    
    .navigation ul li a{font-size:50px;}

     .img_grid .grid_container {
        width: calc(33.33% - 40px);
    }

    .img_grid .grid_container h3 {
        font-size: 36px;
    }

    .img_grid .grid_container p {
        font-size: 16px;
    }
   
}



@media all and (min-width:1950px)
{
    .container{max-width:2100px;}
}