/* Style HamroVilla */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Pacifico&display=swap');

:root{
    --heading: "Pacifico", cursive;
    --paragraph: "DM Sans", sans-serif;
    --body_bg: #F8F9F5;
    --primary_color: hsla(158, 83%, 14%, 100%);
    --primary_color_light: hsla(158, 83%, 50%, 100%);
    --primary_color_lighter: hsla(158, 83%, 70%, 100%);
    --primary_color_lightest: hsla(158, 83%, 98%, 100%);
    --black: #333333;    --white: #ffffff;}

*{ font-size: 16px; font-weight: 400; line-height: 1.4; font-family: var(--paragraph); }
h1,h2,h3,h4,h6{ font-family: var(--heading); }
h3{ font-size: 80px; }
h5{ font-size: 24px; }
h6{ font-size: 20px; }
body{ background-color: var(--body_bg); position: relative; overflow-x: hidden; }
section{ padding: 100px 0px; position: relative; }
a.bttn{ text-transform: capitalize; color: inherit; position: relative; display: inline-flex; gap: 0px; flex-direction: row; align-items: center; text-decoration: none; position: relative; }
main{ position: relative; }

.image_wrapper{width: 100%; display: inline-block; position: relative; overflow: hidden; vertical-align: top; border-radius: 10px;}
.image_wrapper:before{content: ""; display: block; padding-top: 100%;}
.image_wrapper img{width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}

header{ width: 100%; position: absolute; z-index: 9; }
header nav .nav-item a.nav-link{ font-family: var(--heading); font-size: 40px; color: var(--primary_color); filter: drop-shadow( 0px 0px 12px rgba(0, 0, 0, 22%)); }
.banner{ padding: 0; }
.banner .image_wrapper:before{ padding-top: 40%; }
.banner .image_wrapper:after{ position: absolute; content:''; background-image: url(../images/hills.png); background-position: top center; background-repeat: no-repeat; background-size: cover; bottom: 0px; left: 0; right: 0; z-index: 1; height: 16%; }

.large_logo svg{ width: 100%; }

.about{ background-size: cover; background-repeat: no-repeat; background-position: top center; }
.about_content svg{ height: 20px; }
.about_content svg.heart{ height: 40px; margin-bottom: 10px; }
.about_content svg.arrow{ margin-left: 8px; }
.about_content h3{ margin-top: 40px; margin-bottom: 24px; position: relative; }
.about_content h3:before{ position: absolute; content:''; right: 0; bottom: 0; background-image: url(../images/brush.svg); background-position: top center; background-repeat: no-repeat; background-size: cover; height: 45%; width: 38%; z-index: 1; }
.about_content a.bttn{ margin-top: 30px; }
.about_content a.bttn:before{ position: absolute; content: ''; height: 0.5px; width: 90%; left: 50%; transform: translateX(-50%); background-color: var(--black); bottom: -12px; }
.about_image .image_wrapper:before{ padding-top: 50%; }

.story{ background-color: var(--primary_color_lightest); padding: 80px 0px; position: relative; }
.story h3{ color: var(--primary_color); }
.story > .container{ padding-left: 40px; }
.story > .container:before{ position: absolute; content:''; top: 0; bottom: 0; left: 0; width: 1px; background-color: var(--primary_color); }

.experience .words_slider{ width: 100%; overflow: hidden; white-space: nowrap; background: transparent; padding: 28px 0; border-top: 0.5px solid var(--black); border-bottom: 0.5px solid var(--black); margin-top: 40px; }
.experience .words_track{ display: inline-flex; gap: 80px; animation: scrollWords 15s linear infinite; }
.experience .words_track span{ font-size: 28px; font-weight: 600; color: var(--black); font-weight: 200; text-transform: uppercase; position: relative; }
.experience .words_track span svg{ height: 20px; }
@keyframes scrollWords { from { transform: translateX(0); } to { transform: translateX(-50%); } }


.feature-story{ position: relative; height: 600vh; margin-top: 60px; overflow: hidden; padding-bottom: 200px; z-index: 2; }
.facilities-section{ position: relative; z-index: 2; background: #fff; }
.luxury-section{ position: sticky; top: 0; height: 100vh; z-index: 1; display: flex; align-items: center;}
.luxury-nav{ display: flex; flex-direction: column; gap: 28px; position: sticky; top: 100px;}
.luxury-tab-btn{ background: transparent; border: 0; padding: 0; text-align: left; font-size: 24px; color: #888; cursor: pointer; transition: all .3s ease; font-family: var(--heading);}
.luxury-tab-btn:hover{ color: #0f5a43;}
.luxury-tab-btn.active{ color: #0f5a43;}
.luxury-content-area{ position: relative; min-height: 650px; height: 650px; overflow: hidden;}
.luxury-pane{ position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(20px) scale(1.02); transition: opacity .5s ease,  transform .5s ease,     visibility .5s ease;}
.luxury-pane.active{ opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); z-index: 2;}
.luxury-image{ width: 100%; height: 650px; object-fit: cover; display: block; border-radius: 12px;}
.luxury-overlay{ position: absolute; left: 0; right: 0; bottom: 0; padding: 40px; color: #fff; background: linear-gradient( to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 40%, rgba(0,0,0,0) 100% );}
.luxury-overlay h2{ font-size: 36px; font-weight: 700; margin-bottom: 20px; color: #fff; font-family: var(--paragraph);}
.luxury-overlay p{ font-size: 16px; line-height: 1.7; margin-bottom: 20px; max-width: 700px;}
.feature-pills{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px;}
.feature-pills span{ display: inline-flex; align-items: center; padding: 8px 18px; background: #fff; color: #0f5a43; border-radius: 50px; font-size: 14px; font-weight: 500;}
.luxury-overlay .btn{ padding: 12px 28px; border-radius: 50px; font-weight: 600;}
.feature-story, .luxury-section, .luxury-content-area{ isolation: isolate; }

@media(max-width:991px){
 .feature-story{ height: auto; }
 .luxury-section{ position: relative; height: auto; display: block; }
 .luxury-nav{ position: relative; top: auto; margin-bottom: 30px; }
 .luxury-tab-btn{ font-size: 18px; }
 .luxury-content-area{ min-height: auto; height: auto; }
 .luxury-pane{ position: relative; display: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
 .luxury-pane.active{ display: block; }
 .luxury-image{ height: 450px; }
 .luxury-overlay{ padding: 25px; }
 .luxury-overlay h2{ font-size: 26px; }
}
@media(max-width:767px){
 .luxury-image{ height: 350px; }
 .luxury-overlay{ padding: 20px; }
 .luxury-overlay h2{ font-size: 22px; }
 .feature-pills span{ font-size: 12px; padding: 6px 14px; }
}

.facilities h3{ margin-bottom: 40px; text-transform: capitalize; }
.facilities .facility_box{ margin: 20px; }
.facilities .facility_box .icon_box, .facilities .facility_box .icon_box img{ max-height: 80px; width: auto; height: 100%; }
.facilities .facility_box h6{ margin: 18px 0px; color: var(--primary_color); }
.facilities{ background-size: contain; background-repeat: repeat; background-position: center; background-image: url('../images/background.png'); }
.facilities:before, .facilities:after{ position: absolute; content:''; left: 0; right: 0; width: 100%; height: 10%; background: var(--white); }
.facilities:before{ top: 0; background: linear-gradient(0deg,rgba(248, 249, 245, 0) 0%, rgba(248, 249, 245, 1) 70%); }
.facilities:after{ bottom: 0; background: linear-gradient(180deg,rgba(248, 249, 245, 0) 0%, rgba(248, 249, 245, 1) 70%); }

.gallery h3{ margin-bottom: 60px; }
.coverflow-carousel{ padding: 80px 0; position: relative; }
.coverflow-carousel .owl-stage-outer{ overflow: visible; }
.coverflow-carousel .owl-stage{ display: flex; align-items: center; }
.coverflow-carousel .owl-item{ transition: all .6s ease; }
.coverflow-carousel .item{ transition: all .6s ease; transform-style: preserve-3d; }
.coverflow-carousel .image_wrapper{ width: 100%; overflow: hidden; border-radius: 16px; }
.coverflow-carousel .item img{ width: 100%; height: auto; display: block; transform: scale(1.5); }
.coverflow-carousel .owl-item.center{ z-index: 999; }
.coverflow-carousel .owl-item.center .item{ transform: perspective(1200px) rotateY(0deg) scale(1); opacity: 1; }
.coverflow-carousel .owl-item:not(.center) .item{ transform: perspective(1200px) scale(.75); opacity: .55; }
.coverflow-carousel .owl-item.left-side .item{ transform: perspective(1200px) rotateY(28deg) scale(.75); opacity: .75; }
.coverflow-carousel .owl-item.right-side .item{ transform: perspective(1200px) rotateY(-28deg) scale(.75); opacity: .75; }
.coverflow-carousel .owl-dots{ margin-top: 100px; text-align: center; }
.coverflow-carousel .owl-dot span{ width: 12px; height: 12px; margin: 5px; display: block; border-radius: 50%; background: #ccc; transition: all .3s ease; }
.coverflow-carousel .owl-dot.active span{ background: #333; }
@media(max-width:991px){
    .coverflow-carousel .owl-item.left-side .item, .coverflow-carousel .owl-item.right-side .item{ transform: scale(.85); }
    }
@media(max-width:767px){
    .coverflow-carousel{ padding: 40px 0; }
    .coverflow-carousel .owl-stage-outer{ overflow: hidden; }
    .coverflow-carousel .owl-item.left-side .item, .coverflow-carousel .owl-item.right-side .item{ transform: none; opacity: .5; }
    .coverflow-carousel .owl-item.center .item{ transform: scale(1); }
    }

footer{ position: relative; }
.gallery, .experience{ padding-bottom: 0; }
.social_query:before{ position: absolute; content:''; background-image: url(../images/hill2.png); background-position: center top; background-repeat: no-repeat; background-size: cover; /*top: -130px;*/ bottom: 0px; width: 100%; height: 130px; }
.social_query{ position: relative; background-color: transparent; /*background-color: #042F1F;*/ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; color: var(--white); }
.social_query *{ color: var(--black) !important; }
.social_query a{ color: #0D8C5E!important; text-decoration: none; font-size: 24px !important; margin: 12px 0px !important; font-weight: 700; }
.social_query p{ margin-bottom: 0; text-align: center; }
.social_query p i{ color: #0D8C5E!important; font-size: 24px !important; font-weight: 700; }
.social_link{ display: flex; flex-direction: row; gap: 20px; margin-top: 0px; margin-bottom: 100px; }
.copy{ background-color: #0D8C5E; padding: 20px; }
.copy p{ color: var(--white); font-size: 14px; text-align: center; margin-bottom: 0; }