@charset "UTF-8";
/*

@Author: Themezinho
@URL: http://www.themezinho.net

This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.


// Table of contents //

	01.	GOOGLE FONTS
	02.	BODY
	03.	CUSTOM CLASSES
	04. FORM ELEMENTS
	05.	SECTIONS
	06.	HTML TAGS
	07.	LINKS
	08.	MODAL
	09.	PAGINATION
	10. PRELOADER
	11.	TRANSITION OVERLAY
	12.	SANDWICH BUTTON
	13.	SCROLL DOWN
	14.	NAVIGATION MENU
	15.	HEADER
	16.	SOCIAL MEDIA
	17.	NAVBAR
	18.	SLIDER
	19.	PAGE HEADER
	20.	VIDEO BG
	21.	WORKS
	22.	FEATURES CONTENT
	23.	LISTING CONTENT
	24.	FULL MEDIA CONTENT
	25.	INTRODUCTION
	26. OUR TEAM
	27.	NEWS
	28.	SAY HELLO
	29.	LOGOS
	30.	FOOTER
	31.	RESPONSIVE TABLET FIXES
	32. REPSONSIVE MOBILE FIXES



*/
/* GOOGLE FONTS */
@font-face 
{
     src:url(../fonts/MoneaAlegante.otf);   
     font-family:MoneaAlegante;     
}
@font-face 
{
     src:url(../fonts/Quicksand.ttf);   
     font-family:Quicksand;     
}
@font-face 
{
     src:url(../fonts/RomanticAmitha.ttf);   
     font-family:RomanticAmitha;     
}
@font-face 
{
     src:url(../fonts/SoraCarnel-Regular.ttf);   
     font-family:SoraCarnel-Regular;     
}

@import url('https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap');
@import url(https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap);
@import url("https://fonts.googleapis.com/css?family=Playfair+Display|Poppins:300,400,600,800&display=swap&subset=latin-ext");


.services-menu{
max-width:1000px;
margin:auto;
padding:60px 20px;
font-family:'Urbanist',sans-serif;
}

.menu-title{
font-size:34px;
text-align:center;
color:#c6a47c;
margin-bottom:20px;
}

.top-services{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:8px;
margin-bottom:50px;
}

.service-group{
margin-bottom:60px;
padding:30px;
background:#f9f9f9;
border-radius:12px;
}

.group-header{
display:block;
margin-bottom:20px;
}

.group-header img{
width:100%;
height:400px;
object-fit:cover;
border-radius:10px;
margin-bottom:15px;
}

.group-header h2{
font-size:26px;
letter-spacing:2px;
color:#c6a47c;
padding: 20px;
text-align:center;
}
.service-desc{
    font-size:15px;
    color:#555;
    margin:8px 0 20px 0;
}

.service-desc ul{
    padding-left:18px;
}

.service-desc li{
    margin-bottom:4px;
}



.group-header h2{
font-size:26px;
letter-spacing:2px;
color:#c6a47c;
}

.service-row{
display:flex;
justify-content:space-between;
padding:8px 0;
border-bottom:1px dotted #ddd;
font-size:14pt;
font-weight:bold;
color:#3f3f3f;
}

.service-row span:last-child{
color:#c6a47c;
font-weight:600;
}

.note{
margin-top:10px;
font-style:italic;
color:#777;
}




header.slider {
    position: relative;
    overflow: hidden;
}

/* Làm nền dịu lại cho chữ nổi bật */
.swiper-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.30); /* tone nude overlay */
    z-index: 1;
}
.bg-flower-left1,
.bg-flower-right1 {
    position: absolute;
    bottom: -20px;
    width: 360px;
    height: 520px;
    background-image: url("../images/flower.png");
    background-size: contain;
    background-repeat: no-repeat;
   opacity: 0.75;
    filter: blur(0.3px);
    pointer-events: none;
    z-index: 1;
    transition: all 0.5s ease;
}


.bg-flower-right1::after {
    opacity: 0.4; /* nếu bạn có glow */
}
.slider_txt {
    z-index: 3;
}

.mix-blend-mode: screen;

.petal-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}

/* Cánh hoa */
.petal {
    position: absolute;
    width: 18px;
    height: 26px;
    background: #496d43;
    border-radius: 50% 50% 50% 0;
    opacity: 0.5;
    filter: blur(0.3px);
}

/* Vị trí + animation khác nhau */
.p1 { left: 10%; top: -10%; animation: fall1 10s linear infinite; }
.p2 { left: 30%; top: -15%; animation: fall2 12s linear infinite; }
.p3 { left: 55%; top: -20%; animation: fall3 14s linear infinite; }
.p4 { left: 75%; top: -10%; animation: fall2 11s linear infinite; }
.p5 { left: 90%; top: -25%; animation: fall1 13s linear infinite; }
.petal::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    top: 4px;
    left: 6px;
    opacity: 0.6;
}
/* Animation rơi */
@keyframes fall1 {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    20% { opacity: 0.6; }
    100% {
        transform: translateY(110vh) rotate(180deg);
        opacity: 0;
    }
}

@keyframes fall2 {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    20% { opacity: 0.6; }
    100% {
        transform: translateY(110vh) translateX(40px) rotate(220deg);
        opacity: 0;
    }
}

@keyframes fall3 {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    20% { opacity: 0.6; }
    100% {
        transform: translateY(110vh) translateX(-40px) rotate(200deg);
        opacity: 0;
    }
}



/* 🌿 BÊN TRÁI – nghiêng tự nhiên */
.bg-flower-left1 {
    
    background-position: bottom left;
    transform: rotate(-12deg);
}

/* 🌿 BÊN PHẢI – lật + nghiêng ngược lại */
.bg-flower-right1 {
    right: -120px;
    background-position: bottom right;
    transform: scaleX(-1) rotate(-12deg);
}

.bg-flower-left1 {
    opacity: 0.3;
}

.bg-flower-right1 {
    opacity: 0.85;
}
header.slider::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 400px;
    height: 400px;
    /*background: radial-gradient(circle at bottom right, rgba(212,175,55,0.6), transparent 70%);*/
    z-index: 2;
    pointer-events: none;
}

.slider_txt {
    position: relative;
    z-index: 3;
}

.slider_txt h1 {
    font-size: 60px;
    font-weight: 500;
    letter-spacing: 1px;
}

.slider_txt h2 {
    font-size: 22px;
    letter-spacing: 3px;
}

@keyframes floatSoft {
    0% { transform: translateY(0px) rotate(-12deg); }
    50% { transform: translateY(-15px) rotate(-10deg); }
    100% { transform: translateY(0px) rotate(-12deg); }
}

.bg-flower-left1 {
    animation: floatSoft 6s ease-in-out infinite;
}

@keyframes floatSoftRight {
    0% { transform: scaleX(-1) translateY(0px) rotate(-12deg); }
    50% { transform: scaleX(-1) translateY(-15px) rotate(-14deg); }
    100% { transform: scaleX(-1) translateY(0px) rotate(-12deg); }
}

.bg-flower-right1 {
    animation: floatSoftRight 6s ease-in-out infinite;
}

@media(max-width: 768px){
    .bg-flower-left1,
    .bg-flower-right1{
        width: 180px;
        height: 300px;
        opacity: 0.5;
    }
}


/* BODY */
* {
  outline: none !important;
}
.counterimg
{
    margin-top:20px;    
}
.property-plans a:hover
{
        text-decoration:none;
        color:#26282b;
}

#btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000000001;
    background: #072c0d;
    border: 1px solid #fff;
    color: #fff;
    cursor: pointer;
}
.center-submit
{
    text-align:center;
    margin:0px auto;    
}
.btncontact
{
    height: 54px;
    border: none;
    background-color: #072c0d;
    color: #fff;
    padding: 0 30px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;    
}
body {
  margin: 0;
  padding: 0;
 font-family: Quicksand;
 font-style: normal;
  color: #26282b;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  background: url(../images/bg-body.webp) 0px 0px no-repeat fixed;
  background-size: cover;
  line-height: 1.7;
}
.video_home
{
    width: 49%;
    float: left;   
    margin-left: 0.5%; 
}


@-webkit-keyframes shapeAnimaiton {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(-20px, 0);
            transform: translate(-20px, 0);
  }
  50% {
    -webkit-transform: translate(-20px, -20px);
            transform: translate(-20px, -20px);
  }
  75% {
    -webkit-transform: translate(0, -20px);
            transform: translate(0, -20px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@-moz-keyframes shapeAnimaiton {
  0% {
    -moz-transform: translate(0, 0);
         transform: translate(0, 0);
  }
  25% {
    -moz-transform: translate(-20px, 0);
         transform: translate(-20px, 0);
  }
  50% {
    -moz-transform: translate(-20px, -20px);
         transform: translate(-20px, -20px);
  }
  75% {
    -moz-transform: translate(0, -20px);
         transform: translate(0, -20px);
  }
  100% {
    -moz-transform: translate(0, 0);
         transform: translate(0, 0);
  }
}

@-o-keyframes shapeAnimaiton {
  0% {
    -o-transform: translate(0, 0);
       transform: translate(0, 0);
  }
  25% {
    -o-transform: translate(-20px, 0);
       transform: translate(-20px, 0);
  }
  50% {
    -o-transform: translate(-20px, -20px);
       transform: translate(-20px, -20px);
  }
  75% {
    -o-transform: translate(0, -20px);
       transform: translate(0, -20px);
  }
  100% {
    -o-transform: translate(0, 0);
       transform: translate(0, 0);
  }
}

@keyframes shapeAnimaiton {
  0% {
    -webkit-transform: translate(0, 0);
       -moz-transform: translate(0, 0);
         -o-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(-20px, 0);
       -moz-transform: translate(-20px, 0);
         -o-transform: translate(-20px, 0);
            transform: translate(-20px, 0);
  }
  50% {
    -webkit-transform: translate(-20px, -20px);
       -moz-transform: translate(-20px, -20px);
         -o-transform: translate(-20px, -20px);
            transform: translate(-20px, -20px);
  }
  75% {
    -webkit-transform: translate(0, -20px);
       -moz-transform: translate(0, -20px);
         -o-transform: translate(0, -20px);
            transform: translate(0, -20px);
  }
  100% {
    -webkit-transform: translate(0, 0);
       -moz-transform: translate(0, 0);
         -o-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@-webkit-keyframes shapeAnimaiton2 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(20px, 0);
            transform: translate(20px, 0);
  }
  50% {
    -webkit-transform: translate(20px, 20px);
            transform: translate(20px, 20px);
  }
  75% {
    -webkit-transform: translate(0, 20px);
            transform: translate(0, 20px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@-webkit-keyframes shapeAnimaiton2 {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(20px, 0);
            transform: translate(20px, 0);
  }
  50% {
    -webkit-transform: translate(20px, 20px);
            transform: translate(20px, 20px);
  }
  75% {
    -webkit-transform: translate(0, 20px);
            transform: translate(0, 20px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

@-moz-keyframes shapeAnimaiton2 {
  0% {
    -moz-transform: translate(0, 0);
         transform: translate(0, 0);
  }
  25% {
    -moz-transform: translate(20px, 0);
         transform: translate(20px, 0);
  }
  50% {
    -moz-transform: translate(20px, 20px);
         transform: translate(20px, 20px);
  }
  75% {
    -moz-transform: translate(0, 20px);
         transform: translate(0, 20px);
  }
  100% {
    -moz-transform: translate(0, 0);
         transform: translate(0, 0);
  }
}

@-o-keyframes shapeAnimaiton2 {
  0% {
    -o-transform: translate(0, 0);
       transform: translate(0, 0);
  }
  25% {
    -o-transform: translate(20px, 0);
       transform: translate(20px, 0);
  }
  50% {
    -o-transform: translate(20px, 20px);
       transform: translate(20px, 20px);
  }
  75% {
    -o-transform: translate(0, 20px);
       transform: translate(0, 20px);
  }
  100% {
    -o-transform: translate(0, 0);
       transform: translate(0, 0);
  }
}

@keyframes shapeAnimaiton2 {
  0% {
    -webkit-transform: translate(0, 0);
       -moz-transform: translate(0, 0);
         -o-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  25% {
    -webkit-transform: translate(20px, 0);
       -moz-transform: translate(20px, 0);
         -o-transform: translate(20px, 0);
            transform: translate(20px, 0);
  }
  50% {
    -webkit-transform: translate(20px, 20px);
       -moz-transform: translate(20px, 20px);
         -o-transform: translate(20px, 20px);
            transform: translate(20px, 20px);
  }
  75% {
    -webkit-transform: translate(0, 20px);
       -moz-transform: translate(0, 20px);
         -o-transform: translate(0, 20px);
            transform: translate(0, 20px);
  }
  100% {
    -webkit-transform: translate(0, 0);
       -moz-transform: translate(0, 0);
         -o-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}

/*Contact form*/
#subbar
{
  display: none;
}
#book-menu, .subbar-menu
{
    border-radius: 2px;
    border: 1px solid #fff ;
    box-shadow: 0 0 20px rgb(235 207 167 / 40%);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -ms-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    padding: 10px !important;
    margin-top: 16px;
    background: #072c0d;   
    color: #fff;
}
.subbar-menu{
    position: relative;
    overflow: hidden;
    background: url(../images/bg-btn.webp) center center no-repeat;
    background-size: cover;
    border-radius: 30px;
    cursor: pointer;
}
.subbar-menu::before{
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.8),
        transparent
    );
    transform: skewX(-25deg);

    animation: shine 3s infinite;
}
@keyframes shine{
    0%{
        left: -150%;
    }

    100%{
        left: 150%;
    }
}
.group-party
{
    padding-top:20px;
    padding-bottom:20px;    
}
.img_hostparty img
{
    margin-top:6px;
    border-radius:30px;
}
.contact_r
{
    background:#fff;
    padding:30px;
    box-shadow: 0px 1px 15px 0px rgb(62 65 159 / 10%);  
}
#form
{
    
    margin:0px auto;
    margin-top: 20px;
    margin-bottom:30px;
}
.txtbox
{
    border: 1px solid #ccc;
    height: 30px;
    width: 90%;
}
.textarea
{
    min-height: 100px;
}
.formrowtop
{
    font-weight: bold;
}
.formrow
{
    margin-bottom: 10px;
}
.buttonrow
{
    text-align: center;
}

#formnotify, #formnotifyS
{
	width: 90%;
	max-width: 400px;
	min-height: 160px;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 10px;
	-moz-border-radius: 10px;
	position: fixed;
	top: 20%;
	left: 50%;
	margin-left: -200px;
	padding: 10px;
	text-align: center;
	box-shadow: 2px 2px 5px #666;
	z-index: 99999;
	display: none;
}
#formnotifycontent, #formnotifycontentS
{
	font-size: 12pt;
	color: #666;
	margin-top: 30px;
}
#formnotifyok, #formnotifyokS
{
	margin: 0px auto;
	margin-top: 20px;
	width: 100px;
	height: 35px;
	line-height: 35px;
	color: #fff;
	background: #df811e;
	cursor: pointer;
}
#formsign
{
    margin-top:30px;    
}
#formnotifyok:hover
{
	background: #be3024;
}
#formpwait, #formpwaitS
{
	float: left;
	margin-left: 20px;
	display: none;
}
#formwait
{
    display: none;
}
/*Contact form*/
.servicesgroup
{
    overflow:hidden;
    margin-bottom:30px;
    padding-bottom:30px;
    border: 1px solid #fff;
    padding: 15px;
    padding-top:30px;
    background: #fff;
}
.bg-info
{
    padding-top:40px!important;  
    padding-bottom:10px!important;  
   background: rgba(0,0,0,0.7)!important; 
    
}
.bg-one
{
    padding-top:40px!important;  
    padding-bottom:10px!important;    
    background: url(../images/bg-serhome.webp) 0px 0px no-repeat;
    background-size: cover;
    margin-top: 30px;
}
.row_name_box{
  width: 55%;
  float: left;  
}
.price
{
  font-size:12pt;
  width: 45%;
  float: right;   
  text-align: right;
  color:#496d43;
}
.note-sub
{
    color:#333;
    font-style:italic;
    font-size:12pt;    
}
.margin-edit
{
    margin-top:-10px;    
}
.border-none
{
    border:none!important;    
}
.row_note_box
{
  width: 100%;
  overflow: hidden;
}
.servicesimg-pedi{
  width: 28%;
  float: left;
}
.row_note, .row_note_mani
{
    width: 65%;
    float: right;
    margin-right:3%;
    font-size:11pt;
    font-style:italic;
    text-transform:none; 
    color: #333;  
    padding-top:7px;
    padding-bottom:7px;  
}
.row_note_mani{
    width: 100%;  
    margin-right: 0;
}
.video
{
    width: 50%;
    float: left;  
}
.servicesimg-2{
    width: 50%;
    float: left;  
}
.image-container {
  display: flex;       /* Kích hoạt flexbox để các khối con bằng chiều cao nhau */
  gap: 15px;           /* Khoảng cách giữa 2 ảnh */
  align-items: stretch;/* Ép các khối con phải có chiều cao bằng nhau */
}

.image-box {
  flex: 1;             /* Chia đều tỉ lệ chiều rộng cho 2 bên (hoặc tùy chỉnh % cố định) */
  height: 350px;       /* Đặt chiều cao mong muốn cho cả 2 ảnh ở đây */
}

.image-box img, .image-box iframe {
  width: 100%;
  height: 350px;
  object-fit: cover;   /* Giữ nguyên tỉ lệ ảnh, tự động cắt gọn vừa khung mà không bị móp */
}
.sub-title
{
    text-align:center;
    color: #072c0d;
    font-size: 15pt;
    text-transform:uppercase;
     font-family: 'Abril Fatface', cursive; 
    font-weight:bold;
    padding-top:20px; 
    padding-bottom:10px;  
}
.servicestitlenote {
    color: #1aa2d5;
    text-align: left;   
    font-size: 13pt;    
}
.price-wrap
{
    color: #000 ;
    overflow: hidden;
}
.price-wrap div
{
    float: right;
    text-align: right;
    width: 60px;
}

.price
{
    float: right;
    color: #496d43;
    overflow: hidden;
    font-size: 13pt;
    padding-right: 5px; 
}
.price2
{
    margin-left:30px!important;    
}

.group-price
{
    float: right;
    overflow:hidden;
    
}
.full-price
{
    float:left;
    width:60px;
    color: #d9a731;
    font-weight: 600;
    font-size:12pt;   
}
.fill-price
{
    float:right;
    width:50px;
    text-align:right;
    color: #404040;
    font-weight: 600;
    font-size:12pt;   
    display:none;
}

.bg-services
{
        background: url(../images/banner1.webp) 0px 0px repeat fixed;
        background-size:cover;
        min-height:500px;
}
.bg-page
{
        background: url(../images/banner2.webp) 0px 0px repeat fixed;
        background-size:cover;
        min-height:700px;
}
.servicesimg
{    
    text-align: center;
}
.servicesimg-pedi img{    
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: var(--transition-base);
}
.servicesimg-pedi2 img{    
    width: 50%;
    float: left;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: var(--transition-base);
}
.servicesimg img
{
  
  /* border: 1px solid #fff8e4;*/
   padding:10px;
    margin-bottom:30px;
}
.servicesimg-2 img
{
   padding: 0px;
}
.servicestitle
{
    font-size: 34pt;
    text-align: center;
    font-family: MoneaAlegante;  
    margin-bottom:40px;
    padding-top:25px;  
    padding-bottom:25px;    
    color:#fff;   
    line-height: 1;
    background: url(../images/bg-footer.webp) center center no-repeat;
    background-size:cover;
}
.servicestitle div
{
    font-size: 40pt;
    color: #c8a653;
}
.services-icon-page i{
  color: #072c0d;
}
.servicestitle2
{
    font-size: 30pt;
    text-align: center;
    font-family: MoneaAlegante;  
    padding-top:25px;  
    padding-bottom:25px;    
    color:#072c0d;   
}
.grouprow
{
    overflow:hidden;    
    margin-bottom:30px;
}
.grouprow span
{
     font-size:16px;  
     color:#496d43;
     font-weight:bold; 
}
.rowtitle
{
    font-size:20pt;
    text-align:center;
    margin-bottom:10px;
    margin-top:30px;
}
.row_svpage
{
    border-bottom:1px dashed #6a6a6a;
    overflow:hidden;
    color: #072c0d; 
    text-transform:uppercase;
    text-align:left;
    font-size:12pt;    
    padding:10px 0px 10px 0px;
}
.row_name
{
    font-weight: bold;
}
.selected
{
    color:#abe3a2!important;    
    font-weight: 900!important; 
    border-top: 1px solid #abe3a2!important; 
}
/*slogan*/
.slogan{
    width: 43%;
    float: right;
    overflow: hidden;
  
    padding: 2%;
    border: 10px solid #496d43;
    background: url(../images/bg-body.webp) center center no-repeat;
    background-size: cover;
}
.slogan-title{
    font-size: 25pt;
   color: #072c0d;
    font-family: RomanticAmitha;
    text-shadow: 1px 1px 2px #fffefb, 0 0 1em #ffffff, 0 0 0.2em #fffdf6;
}
.slogan-txt{
    font-size: 15pt;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom:20px;
}
.slogan a
{
    height: 60px;
    line-height: 56px;
    float: left;
    color: #072c0d;
    
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 10px;
    position: relative;
    border-image: linear-gradient(#072c0d, #072c0d, #072c0d) 3;
    border-width: 2px;
    border-style: solid;
    padding: 0 40px;
    box-shadow: 0 0 20px rgb(235 207 167 / 40%);
    -webkit-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -ms-transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    transition: 0.25s ease-in-out;    
}
.slogan a:hover{
    color: #072c0d;
}
/*slogan*/
.counter {
    margin-top: 20px;
    text-align: left;
    width: 100%;
    float: right;
    max-width: 280px;
}
#divCounter{width: 100%; background: #fff; border-radius: 5px; -moz-border-radius: 5px; margin: 0px auto; padding: 15px; color: #000;}
.groupfbye 
{
    background: url(../images/bg-btn.webp) center center no-repeat;
    background-size: cover;
    height: 145px;
    width: 55px;
    top: 38%;
    left: 0;
    position: fixed;
    z-index: 99999999;
    padding: 10px;
    /*border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-top-right-radius: 10px;
    -moz-border-bottom-right-radius: 10px;*/
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 0 20px rgba(241, 241, 241, 0.4);
    border: 1px solid #496d43;
    border-radius:0 10px 10px 0;
    display: none;
}

.signup-fixed{
    position:fixed;
    width: 130px;
    right:10px;
    transform:translateY(-50%);
    z-index:99;
    display:flex;
    align-items:center;
    text-align:center;
    gap:10px;
    padding: 8px 10px;
    font-family:"Poppins", sans-serif;
    font-weight:600;
    letter-spacing:1px;
    color:#fff;
    text-decoration:none;
    border-radius:40px;
    /*background:linear-gradient(
        120deg,
        #072c0d,
        #5A3E2B,
        #072c0d,
        #5A3E2B,
        #072c0d
    );*/
    background: url(../images/bg-btn.webp) center center no-repeat;
    background-size: cover;
    box-shadow:0 6px 18px rgba(0,0,0,0.45);
    overflow:hidden;
    cursor:pointer;   
    border:1px solid #496d43;
}
.signup-fixed span, .signup-fixed i
{
    color:#fff !important;
}
/*#subbar
{
    top: 35%;
}*/
#book_online
{
    top: 45%;
    font-size: 10pt;
}
/* icon */
.signup-icon{
    width:35px;
    height:30px;
}

/* shine animation */
.signup-fixed::before{
    content:"";
    position:absolute;
    top:0;
    left:-80%;
    width:50%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.8),
        transparent
    );
    transform:skewX(-25deg);
    animation:shine 3s infinite;
}

@keyframes shine{
    0%{left:-80%;}
    100%{left:130%;}
}

/* hover */
.signup-fixed:hover{
    transform:translateY(-50%) scale(1.07);
    box-shadow:0 10px 30px rgba(0,0,0,0.6);
    text-decoration: none;
}

.groupfbye a i 
{
    padding: 8px;
    font-size: 14pt;
    color: #fff;
}
.line 
{
    border-bottom: 1px solid rgba(255,255,255,0.4);
    height: 4px;
    width: 33px;
    text-align: center;
    margin-bottom: 4px;
    margin-top: 4px;
}

.groupmenu_m
{
    display: none;    
}
#groupnoti
{
     width:100%;
    height:100%;
    position:absolute;
    top:0px;
    z-index:999999999999;
    display:block;
}
#noti
{
    width:100%;
    overflow: hidden;
    max-width:500px;
    margin:0px auto;
    padding:10px;   
    margin-top:130px;
    background: #fff;
    overflow: hidden;
    text-align: center;
}
#noti img
{
    width: 100%;
    border: 1px solid #ccc;
}
#closenoti
{
    width: 100%;
    cursor:pointer;
    margin-bottom:5px;
    color: #404040;
    font-weight: bold;
    text-align:right;
}
/* Promotions*/
.box-ser a
{
    color:#daa859!important;
    cursor:pointer;
       
}
.grouppro
{
    margin-bottom:30px;
}
.proimg img    
    {
        
        border-radius:5px;
    }
/* Promotions*/
#notification
{
    width:100%;
    background-color: #072c0d;
    position: fixed;
    top: 0;
    z-index:9999999;    
    text-align:center;
    color:#fff;
    font-weight: bold;
    line-height: 1.5em;
    font-size: 15pt;
    display:none;
    padding: 5px;
    font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
    border-bottom: 1px solid #fff;
}
.notificationtop a
{
    color:#072c0d;
    text-decoration:none;    
    background:#fff;
    padding:4px 5px 4px 5px;
    font-size:11pt;
    border-radius:5px;
    -moz-border-radius:5px;
    margin-left:10px;
    cursor:pointer;
}
/* Notification */
.copyright
{
    text-align:center;    
    color: #fff;
}
.footer-bar a
{
    color:#000;         
}
.footer-bar a:hover
{
    color:#072c0d; 
    text-decoration:none;        
}
.upper-side h4 a
{
    color:#fff;    
}
.upper-side-home h4 a
{
    color: #fff;    
}
.upper-side h4 a:hover
{
    text-decoration:none;   
}
.side-content h6 a
{
    color:#fff; 
    font-size:15px;    
}
.side-content h6 a:hover
{
    text-decoration:none;   
}
.bg-text
{
     -webkit-background-clip: text;
	background-clip: text;
	/*background-image: url('../images/bg-ser.webp');*/
	color: transparent;  
    font-size:40px;   
}
.bg-text-sv{
	color: #fff;  
    font-size:40px;   
}
.bg-text2
{
     -webkit-background-clip: text;
	background-clip: text;
	background-image: url('../images/bg-ser.webp');
	color: transparent;    
}
.bg-text, .bg-text2 {
  animation: bg-animation 30s cubic-bezier(0.3,0,0.7,1) infinite;
}
@keyframes bg-animation {
  0% {background-position: 0% 0%;}
  50% {background-position: 100% 100%;}
  100% {background-position: 0% 0%;}
}
.video-bg img
{
    width:100%;    
}
.line-home1 img{
}
.group-ser p
{
     color:#000; 
     line-height: 1.7;
     padding-top: 15px;    
}
.group-ser h4 a:hover
{
    text-decoration:none;   
}
.mobile-edit
{
    display:none;    
}

/* HTML ELEMENT */
img {
  max-width: 100%;
}

/* CUSTOM CLASSES */
.overflow {
  overflow: hidden;
}

/* LINKS */
a {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  color: #26282b;
}

a:hover {
  text-decoration: underline;
  color: #442b00;
}

/* CUSTOM CONTAINER */
.container {
  max-width: 1280px;
}
.container-about {
  width: 90%;
  max-width: 1280px;
  margin: 0px auto;
}
/* FORM ELEMENTS */
input[type=text] {
  width: 100%;
  height: 50px;
  border: 1px solid #ccc;
  padding: 0 20px;
}

textarea {
  width: 100%;
  height: 160px;
  border: 1px solid #b3b3b3;
  padding: 15px 20px;
}

button[type=submit] {
  height: 54px;
  border: none;
  background: #072c0d;
  color: #fff;
  padding: 0 30px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}

/* ODOMETER */
.odometer {
  line-height: 1;
}

.odometer.odometer-auto-theme, .odometer.odometer-theme-car {
  padding: 0;
}

.odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-car .odometer-digit {
  padding: 0;
}

.odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-car .odometer-digit .odometer-digit-inner {
  left: 0;
}

/* ACCORDION */
.accordion {
  width: 100%;
  float: left;
  background: #fff;
  padding: 0;
}
.accordion .card {
  background: none;
  border-radius: 0;
  margin-top: -1px;
  border: 1px solid #eaebee;
}
.accordion .card .card-header {
  background: none;
  padding: 0;
  border-bottom: none;
}
.accordion .card .card-header a {
  width: 100%;
  float: left;
  font-weight: 500;
  padding: 20px 25px;
  color: #26282b;
  font-weight: 600;
}
.accordion .card .card-header a:before {
  content: "+";
  float: left;
  text-align: center;
  margin-right: 8px;
  color: #26282b;
  font-weight: 600;
}
.accordion .card .card-header a:hover {
  color: #072c0d;
  text-decoration: none;
}
.accordion .card .card-body {
  width: 100%;
  border-top: 1px solid #eee;
  line-height: 26px;
}
.accordion .card [aria-expanded=true] {
  color: #072c0d !important;
}
.accordion .card [aria-expanded=true]:before {
  content: "-" !important;
  color: #072c0d !important;
}

/* PAGINATION */
.pagination {
  display: flex;
}
.pagination .page-item {
  display: inline-block;
  margin-right: 6px;
}
.pagination .page-item.active .page-link {
  background: #072c0d;
  color: #fff;
  border-color: transparent;
  position: relative;
  z-index: 2;
}
.pagination .page-item.active .page-link:hover {
  background: #072c0d;
  border-color: transparent;
  color: #fff;
}
.pagination .page-item .page-link {
  display: inline-block;
  border-radius: 0 !important;
  padding: 15px 20px;
  color: #26282b;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid #dee2e6;
  line-height: 1;
}
.pagination .page-item .page-link:hover {
  background: none;
  border-color: #dee2e6;
  color: #072c0d;
}

/* GALLERY SLIDER*/
.gallery-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  text-align: center;
  margin: 30px 0;
  background: #26282b;
}
.gallery-container .swiper-wrapper {
  width: 100%;
  float: left;
  position: relative;
}
.gallery-container .swiper-slide {
  width: 80%;
  margin: 0;
  opacity: 0.6;
}
.gallery-container .swiper-slide.swiper-slide-active {
  width: 80%;
  opacity: 1;
}
.gallery-container .swiper-slide img {
  width: 100%;
}
.gallery-container .gallery-pagination {
  bottom: 20px;
  position: absolute;
  z-index: 2;
}
.gallery-container .gallery-pagination .swiper-pagination-bullet {
  background: #fff;
  opacity: 0.5;
}
.gallery-container .gallery-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #072c0d;
  opacity: 1;
}

/* VIDEO BG */
.video-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  /*background: #26282b;
  background: -moz-linear-gradient(161deg, #26282b 0%, #26282b 49%, #072c0d 100%);
  background: -webkit-linear-gradient(161deg, #26282b 0%, #26282b 49%, #072c0d 100%);
  background: linear-gradient(161deg, #26282b 0%, #26282b 49%, #072c0d 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#26282b",endColorstr="#072c0d",GradientType=1);*/
}
.video-bg video {
  min-width: 100%;
  min-height: 100%;
  float: left;
  opacity: 0.15;
}

/* NAV PILLS */
.nav-pills {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.nav-pills .nav-item {
  display: inline-block;
  margin-right: 30px;
}
.nav-pills .nav-item:last-child {
  margin-right: 0;
}
.nav-pills .nav-item .nav-link {
  background: none;
  color: #26282b;
  border-bottom: 2px solid transparent;
  padding: 4px 0;
  border-radius: 0;
  font-weight: 600;
  font-size: 14px;
}
.nav-pills .nav-item .nav-link.active {
  border-bottom: 2px solid #26282b;
}

/* BREADCRUMB */
.breadcrumb {
  width: 100%;
  padding: 0;
  border-radius: 0;
  background: none;
}
.breadcrumb .breadcrumb-item {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
}
.breadcrumb .breadcrumb-item:first-child:before {
  display: none;
}
.breadcrumb .breadcrumb-item:before {
  content: "»";
  color: #fff;
  font-weight: 400;
  padding: 0 20px;
}
.breadcrumb .breadcrumb-item.active {
  color: #fff;
}
.breadcrumb .breadcrumb-item a {
  color: #fff;
}

/* HAMBURGER */
.hamburger {
  position: relative;
  cursor: pointer;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  transition-duration: 500ms;
  -webkit-transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.hamburger span {
  display: block;
  height: 2px;
  width: 30px;
  background: #fff;
  opacity: 1;
  position: absolute;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.hamburger-home span {
  background: #fff;
}
.hamburger span:nth-child(1) {
  top: 0;
}
.hamburger span:nth-child(2) {
  top: 9px;
}
.hamburger span:nth-child(3) {
  width: 10px;
  top: 19px;
}
.hamburger span:nth-child(4) {
  width: 6px;
  top: 19px;
  left: 15px;
}
.hamburger.open {
  margin: 0;
}
.hamburger.open span:nth-child(1) {
  top: 9px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;
  left: 20px;
}
.hamburger.open span:nth-child(3) {
  width: 30px;
  top: 9px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.hamburger.open span:nth-child(4) {
  opacity: 0;
  left: 20px;
}
.hamburger:hover span:nth-child(4) {
  width: 20px;
  left: 10px;
}

/* PRELAODER */
.preloader {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 12;
  background: url(../images/bg-load2.webp) center center no-repeat!important;
  background-size:cover!important;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-duration: 700ms;
  -webkit-transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 0.95s;
  overflow: hidden;
  z-index: 999;
}
.preloader * {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-duration: 700ms;
  -webkit-transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.preloader .layer {
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
   background: url(../images/bg-load.webp) center center no-repeat!important;
  background-size:cover!important;
  transition-delay: 0.3s;
}
.preloader .inner {
  display: inline-block;
  text-align: center;
  position: relative;
  z-index: 2;
}
.preloader .inner figure {
  display: block;
  margin-bottom: 10px;
  transition-delay: 0.1s;
}
.preloader .inner figure img {
  height: 120px;
  
}
.preloader .inner p {
  font-weight: 600;
  color: #fff;
  font-size: 13px;
  display: block;
}

/* TRANSITION OVERLAY */
.transition-overlay {
  width: 100%;
  height: 100vh;
  position: fixed;
  left: -100%;
  top: 0;
  z-index: 12;
  background: url(../images/bg-load.webp) 0px 0px no-repeat!important;
  background-size:cover!important;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-duration: 700ms;
  -webkit-transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  overflow: hidden;
}
.transition-overlay .layer {
  width: 100%;
  height: 100vh;
  position: absolute;
  right: -100%;
  top: 0;
   background: url(../images/bg-load.webp) 0px 0px no-repeat!important;
  background-size:cover!important;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-duration: 700ms;
  -webkit-transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 0.6s;
}
.transition-overlay.active {
  left: 0;
}
.transition-overlay.active .layer {
  right: 0;
}

/* PAGE LOADED */
.page-loaded .preloader {
  right: -100%;
}

.page-loaded .preloader .inner figure {
  opacity: 0;
  transform: scale(1.5);
}

.page-loaded .preloader .inner p {
  transform: translateY(20px);
  opacity: 0;
}

.page-loaded .preloader .layer {
  left: -100%;
}

.page-loaded .navbar .container .upper-side {
  transform: translateY(0);
}

.page-loaded .navbar .container .menu {
  opacity: 1;
  /*background: radial-gradient(circle at center, rgba(1, 2, 1, 0.7) 40%, #000000 60%, rgba(0, 0, 0, 0) 100%);*/
}

.page-loaded .slider .slider-container {
  transform: scale(1);
  opacity: 1;
}

/* SIDE NAVIGATION */
.side-navigation {
  width: 400px;
  max-width: 100%;
  height: 100vh;
  min-height: 400px;
  position: fixed;
  right: -100%;
  top: 0;
  background: url(../images/bg-footer.webp) 58% 0px repeat;
  background-size: cover;
  z-index: 99;
  box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 14px;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-duration: 700ms;
  -webkit-transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
.side-navigation .menu {
  display: none;
  margin-bottom: 20px;
}
.side-navigation .menu ul {
  width: 100%;
  margin: 0;
  padding: 0;
}
.side-navigation .menu ul li {
  width: 100%;
  display: block;
  margin: 0;
  padding: 3px 0;
  list-style: none;
  position: relative;
}
.side-navigation .menu ul li ul {
  width: 100%;
  display: none;
  padding-left: 20px;
  margin-bottom: 10px;
}
.side-navigation .menu ul li ul li {
  display: block;
}
.side-navigation .menu ul li ul li a {
  font-size: 2vw;
}
.side-navigation .menu ul li a {
  display: inline-block;
  color: #fff;
  font-size: 3vw;
  font-weight: 600;
}
.side-navigation .menu ul li a:hover {
  color: #072c0d;
  text-decoration: none;
}
.side-navigation .side-content {
  width: 100%;
  display: block;
}
.side-navigation figure {
  display: block;
  margin-bottom: 30px;
}
.side-navigation figure img {
  height: 120px;
}
.side-navigation address {
  display: block;
  margin-bottom: 20px;
}
.side-navigation h6 {
  font-weight: 600;
  font-size: 20px;
}
.side-navigation p {
  display: block;
  margin-bottom: 30px;
}
.side-navigation p a {
  color: #fff;
}
.side-navigation .gallery {
  margin-bottom: 20px;
  padding: 0;
  margin-left: -5px;
  margin-right: -5px;
}
.side-navigation .gallery li {
  width: 33.33333%;
  float: left;
  margin: 0;
  padding: 0 5px;
  list-style: none;
}
.side-navigation .gallery li img {
  width: 100%;
}
.side-navigation .social-media {
  width: 100%;
  float: left;
  margin: 0;
  margin-bottom: 20px;
  padding: 0;
}
.side-navigation .social-media li {
  float: left;
  margin-left: 5px;
  padding: 0;
  list-style: none;
}
.side-navigation .social-media li a {
  width: 40px;
  height: 40px;
  float: left;
  text-align: center;
  line-height: 42px;
  font-size: 13px;
  color: #fff;
  background: #072c0d;
}
.side-navigation .social-media li a:hover {
  color: #fff;
  background: #072c0d;
}
.side-navigation.active {
  right: 0;
}
.close-menu{
  text-align: right;
  font-size: 20pt;
  cursor: pointer;
}
/* NAVBAR */
.navbar {
  width: 100%;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
}
.navbar .container {
  flex-direction: column;
}
.navbar .container .upper-side {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /*padding: 10px 0;*/
  align-items: center;
  transform: translateY(-80px);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-duration: 700ms;
  -webkit-transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 1.2s;
}
.logo{
  width: 60%;
  float: left;
  overflow: hidden;
  position: relative;
  height: 100%;
}
.logo a{
  width: 30%;
  float: left;
}
.logo h1{
  width: 70%;
  float: right;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 24pt;
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translateY(-50%);
  white-space: nowrap;
  animation: floatText 3s ease-in-out infinite;
  background: linear-gradient(45deg, #d4af37, #fff6c1, #b8860b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  text-align: center;
}
.desktop span
{
  background: linear-gradient(45deg, #fff, #fff, #fff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  font-size: 14pt;
}
@keyframes floatText{
  0%,100%{
    transform: translateY(-50%);
  }
  50%{
    transform: translateY(calc(-50% - 10px));
  }
}
.typing:after{
  content:"|";
  animation:blink 1s infinite;
}
@keyframes blink{
  50%{opacity:0;}
}
.desktop
{
  display: block;
}
.mobile{
  display: none;
}
.navbar .container .upper-side .logo {
  margin-left: 0;
}
.navbar .container .upper-side .logo img {
  width: 130px;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.4));
  padding-top:5px;
  padding-bottom:5px;
}
.navbar .container .upper-side .phone-email {
  margin-right: 0;
  margin-left: auto;
  margin-top: 5px;
  text-align: right;
  color: #fff;
}
.navbar .container .upper-side .phone-email img {
  float: right;
  height: 34px;
  margin-left: 15px;
}
.navbar .container .upper-side .phone-email h4 {
  margin-bottom: -5px;
  margin-top: 3px;
  font-size: 17px;
  font-weight: 600;
  display: -webkit-box;
  line-height: 1;
}
.navbar .container .upper-side .phone-email small {
  line-height: 1;
}
.navbar .container .upper-side .phone-email small a {
  opacity: 0.5;
  color: #fff;
}
.navbar .container .upper-side .phone-email small a:hover {
  text-decoration: none;
  color: #072c0d;
  opacity: 1;
}
.navbar .container .upper-side .language {
  margin-right: 40px;
  margin-left: 60px;
  padding: 10px 0;
  padding-right: 30px;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}
.navbar .container .upper-side .language a {
  display: inline-block;
  margin: 0 5px;
  color: #fff;
  font-weight: 600;
}
.navbar .container .upper-side .language a:hover {
  color: #072c0d;
  text-decoration: none;
}
.navbar .container .upper-side .hamburger {
  width: 30px;
  height: 21px;
  margin-right: 0;
}
.navbar .container .menu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-duration: 700ms;
  -webkit-transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-delay: 1.4s;
  opacity: 0;
}
.navbar .container .menu ul {
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: 0;
  margin-top: -1px;
  
}
.navbar .container .menu ul li {
  margin: 0;
  margin-left: 40px;
  padding: 0;
  list-style: none;
  position: relative;
}
.navbar .container .menu ul li:hover ul {
  top: 100%;
  opacity: 1;
  visibility: visible;
}
.navbar .container .menu ul li ul {
  min-width: 220px;
  position: absolute;
  left: -35px;
  top: 120%;
  background: #26282b;
  margin: 0;
  padding: 25px 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.navbar .container .menu ul li ul:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #26282b transparent;
  position: absolute;
  left: 35px;
  top: -10px;
}
.navbar .container .menu ul li ul li {
  margin: 0;
  padding: 0 35px;
  white-space: nowrap;
}
.navbar .container .menu ul li ul li a {
  padding: 8px 0;
}
.navbar .container .menu ul li ul li a:hover {
  border-color: transparent;
}
.navbar .container .menu ul li a {
  color: #fff;
  display: inline-block;
  font-weight: 600;
  padding: 25px 0;
  font-size:14pt;
}
.navbar .container .menu-home ul li a {
  color: #fff;
  font-size:14pt;
}
.navbar .container .menu ul li a:hover {
  text-decoration: none;
  color: #abe3a2;
  border-top: 1px solid #abe3a2;
}
.contact-box-top{
  width: 15%;
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 0;
    margin: 0;
}
.contact-box-top ul li{
    width: 29.33%;
    margin: 2%;
    float: left;
    background: url(../images/bg-btn.webp) center center no-repeat;
    background-size: cover;
    text-align: center;
    list-style-type: none;
    padding: 10px 16px;
    border-radius: 8px;
}
.contact-box-top ul li:hover{
    background-image: linear-gradient(to bottom right, #c19346, #d5b069, #eed996, #b78842, #c99f55);
}
.contact-box-top ul li a{
    color: #fff;
}
/* SLIDER */
.slider {
  width: 100%;
  height: 100vh;
  min-height: 600px;
  display: flex;
  flex-wrap: wrap;
  background: #26282b;
  overflow: hidden;
}
.slider .slider-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-duration: 700ms;
  -webkit-transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transform: scale(1.3);
  transition-delay: 1.25s;
  opacity: 0;
  
}
.slider .slider-container .swiper-slide {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  background-size: cover;
  background-position:center center;
  
}
.slider .slider-container .swiper-slide:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0,0,0,0.25);
  /*background: #26282b;
  background: -moz-linear-gradient(161deg, #26282b 0%, #26282b 49%, #000 100%);
  background: -webkit-linear-gradient(161deg, #26282b 0%, #26282b 49%, #000 100%);
  background: linear-gradient(161deg, #26282b 0%, #26282b 49%, #000 100%);*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#26282b",endColorstr="#072c0d",GradientType=1);
  opacity: 0.45;
}
.slider .slider-container .swiper-slide .container {
  position: relative;
  z-index: 9;
  padding-left: 100px;
}
.slider .slider-container .swiper-slide .container h1 {
  font-size: 2vw;
  font-family:SoraCarnel-Regular;
  text-transform:uppercase;
  margin-bottom: 20px;
  color: #fff;
}
.slider .slider-container .swiper-slide .container h1 span {
  display: inline-block;
  position: relative;
  
}
.slider .slider-container .swiper-slide .container h1 span:before {
  content: "";
  width: 247px;
  height: 70px;
  position: absolute;
  left: 0;
  top: 40px;
  background: url(../images/title-mark.png) center no-repeat;
  background-size: contain;
  z-index: -1;
}
.slider .slider-container .swiper-slide .container h2 {
    font-weight: 400;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 50px;
}
.slider .slider-container .swiper-slide .container a {
  height: 60px;
  line-height: 56px;
  float: left;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 10px;
  position: relative;
  padding: 0 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  
  border: 2px solid;
    border-image-slice: 2;
    border-width: 2px;
    border-image-source: linear-gradient(#ffffff, #fff, #ffffff);
}
.slider .slider-container .swiper-slide .container a i {
  margin-left: 10px;
}
.slider .slider-container .swiper-slide .container a:hover {
  text-decoration: none;
  background: #072c0d;
  border-color: #072c0d;
}
.slider .slider-container .swiper-slide .container figure {
  float: left;
  margin-left: 40px;
  margin-bottom: 0;
}
.slider .slider-container .swiper-slide .container figure img {
  height: 60px;
}
.slider .slider-container .inner-elements {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.slider .slider-container .inner-elements .container {
  position: relative;
  height: 100vh;
}
.slider .slider-container .inner-elements .container .social-media {
  width: 20px;
  position: absolute;
  left: 15px;
  top: calc(50% + 60px);
  transform: translateY(-50%);
  z-index: 4;
  text-align: center;
}
.slider .slider-container .inner-elements .container .social-media h6 {
  width: 120px;
  color: #fff;
  transform: rotate(90deg);
  transform-origin: left;
  margin-left: 9px;
  font-weight: 600;
  margin-bottom: 120px;
  font-size: 14px;
}
.slider .slider-container .inner-elements .container .social-media ul {
  margin: 0;
  padding: 0;
}
.slider .slider-container .inner-elements .container .social-media ul:before {
  content: "";
  width: 1px;
  height: 42px;
  background: #fff;
  display: inline-block;
  margin-bottom: 15px;
  margin-top: 10px;
}
.slider .slider-container .inner-elements .container .social-media ul li {
  margin: 0;
  padding: 3px 0;
  list-style: none;
}
.slider .slider-container .inner-elements .container .social-media ul li a {
  color: #fff;
  font-size: 12px;
}
.slider .slider-container .inner-elements .container .social-media ul li a:hover {
  color: #072c0d;
}
.slider .slider-container .inner-elements .container .pagination {
  width: auto;
  position: absolute;
  left: auto;
  right: 15px;
  bottom: 20px;
  z-index: 4;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 50px;
}
.slider .slider-container .inner-elements .container .pagination .swiper-pagination-current {
  font-size: 40px;
  font-weight: 800;
  margin-right: 5px;
}
.slider .slider-container .inner-elements .container .pagination .swiper-pagination-total {
  font-size: 20px;
  margin-left: 5px;
}
.slider .slider-container .inner-elements .container .button-prev {
  width: 40px;
  position: absolute;
  right: 10px;
  top: calc(50% + 60px);
  z-index: 4;
  transform: rotate(90deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  transform-origin: bottom;
  margin-top: -60px;
  font-weight: 600;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.slider .slider-container .inner-elements .container .button-prev:hover {
  color: #072c0d;
}
.slider .slider-container .inner-elements .container .button-prev:after {
  content: "";
  width: 42px;
  height: 1px;
  background: #fff;
  position: absolute;
  right: calc(-100% - 20px);
  top: 5px;
}
.slider .slider-container .inner-elements .container .button-next {
  width: 40px;
  position: absolute;
  right: 10px;
  top: calc(50% + 60px);
  z-index: 4;
  transform: rotate(90deg);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
  transform-origin: bottom;
  margin-top: 60px;
  font-weight: 600;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.slider .slider-container .inner-elements .container .button-next:hover {
  color: #496d43;
}

/* PAGE HEADER */
.page-header {
  width: 100%;
  height: 500px;
  display: flex;
  flex-wrap: wrap;
  padding-top: 200px;
  background: url(../images/bg-page.webp) center 60% no-repeat;
  background-size: cover;
  position: relative;
  margin-bottom: 30px;
}
.page-header:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  /*background: linear-gradient(161deg, #e0cfc3 0%, #072c0d 49%, #072c0d 100%);*/
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333",endColorstr="#000 ",GradientType=1);
  opacity: 0.65;
}
.page-header .container {
  position: relative;
  z-index: 2;
}
.page-header .container h1 {
  font-size: 2.5vw;
  font-family: SoraCarnel-Regular;
  text-transform:uppercase;
  margin-bottom: 30px;
  margin-top:80px;
  color:#fff;
}
.page-header .container p {
  display: block;
  color: #fff;
  font-size: 20px;
  margin: 0;
}
.page-header .container .breadcrumb {
    background: url(../images/bg-serhome.webp) center 10% no-repeat;
    background-size: cover;
    padding: 10px;
    position: absolute;
    left: 15px;
    bottom: -30px;
    background: rg;
    width: 70%;
    padding: 40px 30px;
    padding-right: 60px;
    margin: 0;
    display: none;
}

/* INTRO */
.about-section
{
    padding:80px 0;
}
.intro {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.intro figure {
    position: relative;
    display: inline-block;
    margin-bottom: 0;
    margin-top: 20px;
    background: none;
    position: relative;
}
.intro figure .pattern-bg {
  width: 112%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0%;
  /*background: url(../images/side-pattern-bg.webp);
  background-size: contain;*/
}
.intro figure .holder {
  position: relative;
  width: 100%;
  float: left;
  display: block !important;
  /*transform: translate(85px, -65px);*/
}
.intro figure .holder img {
    box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.2);
    width: 525px;
    border: 3px solid #496d43;
    border-top-left-radius: 220px;
    border-top-right-radius: 220px;
}
.intro .content-box {
  display: block;
  padding: 10%;
}
.intro .content-box-2 {
  padding: 0;
}
.intro .content-box b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  opacity: 0.2;
}
.intro .content-box h4, .intro .content-box-2 h4 {
  display: block;
    font-size: 31pt;
    font-family: SoraCarnel-Regular;
    margin-bottom: 0px;
    line-height: 1.5;
    margin-top: 30px;
    margin-bottom: 20px;
    color: #496d43;
    letter-spacing: 2px;
}
.intro .content-box-2 h4 {
    font-size: 20pt;
    letter-spacing: 0px;
    font-family: Quicksand;
}
.intro .content-box h4 span {
  color: #072c0d;
  text-transform:uppercase;
  font-family:SoraCarnel-Regular;
}
.intro .content-box h3 {
  font-weight: 600;
  margin-bottom: 30px;
}
.intro .content-box p {
  display: block; 
  margin-bottom: 30px;
}
.price-table {
  margin: 20px auto;
  border-collapse: collapse;
  text-align: left;
  color: #000;
}
.price-table img{
  width: 50px;
}
.price-table table {
  width: 100%;
  border-collapse: separate; /* tách ô */
  border-spacing: 8px; /* khoảng cách giữa các ô */
}

.price-table th, .price-table td {
  padding: 12px 10px;
  border: 1px solid #ddd;
  text-align: left;
}

.price-table thead th {
  background-color: #d5c2af;
  font-weight: bold;
}

.price-table tbody tr:nth-child(odd) {
  background-color: #496d43;
  color: #fff;
}

.price-table tbody tr:nth-child(even) {
  background-color: #072c0d;
  color: #fff;
}

.price-table td:nth-child(2),
.price-table td:nth-child(3),
.price-table th:nth-child(2),
.price-table th:nth-child(3) {
  text-align: left;
}
/*about new*/
/*services-home-new*/
.landing-container-services{
    width: 100%;
    background-color: #152718;
    padding: 100px 0px;
}
.landing-container {
            width: 100%;
            max-width: 1200px;
            margin: 0px auto;
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .section {
            background-color: #fff;
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 15px 35px rgba(0,0,0,0.06);
        }

        a {
            text-decoration: none;
            color: inherit;
            font-size: 14px;
            transition: opacity 0.2s;
        }
        a:hover {
            opacity: 0.7;
        }

        /* ==========================================
           2. SECTION 1: HERO BANNER
           ========================================== */
        .section-hero {
            background-color: #1b2e1e; 
            background-image: linear-gradient(rgba(62, 73, 64, 0.2), rgba(20, 29, 21, 0.2)), url('../images/bg-eyelash.webp');
            background-size: cover;
            background-position: center;
            color: #fff;
            padding: 40px;
            height: 600px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .text-white
        {
          color: #fff!important;
        }
        .hero-content {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            position: relative;
            height: 100%;
            padding-bottom: 20px;
        }

        .hero-text {
            z-index: 2;
        }

        .brand-logo {
            font-family: 'Playfair Display', serif;
            font-size: 85px;
            font-weight: 500;
            line-height: 1;
        }

        .brand-sub {
            font-size: 18px;
            margin-top: 15px;
            text-transform: uppercase;
            letter-spacing: 3px;
            font-weight: 400;
            line-height: 1.4;
        }

        .eco-badge {
            border: 1px solid rgba(255,255,255,0.6);
            padding: 6px 16px;
            border-radius: 20px;
            display: inline-block;
            margin-top: 35px;
            font-size: 11px;
            letter-spacing: 2px;
            font-weight: 600;
        }
        .eco-badge:hover {
            background: #fff;
        }
        /* VÒNG TRÒN TRUNG TÂM CHỨA ẢNH BIẾN HÌNH */
        .hero-center-image {
            position: absolute;
            left: 50%;
            top: 45%;
            transform: translate(-50%, -50%);
            z-index: 1;
        }

        .product-circle-mock {
            width: 360px;
            height: 460px;
            border: 1px solid rgba(255, 255, 255, 0.25);
            border-top-left-radius: 200px;
            border-top-right-radius: 200px;
            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 75%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden; /* Giữ ảnh biến hình nằm trọn vẹn trong vòng tròn */
        }

        /* Cấu trúc hiệu ứng biến hình cho các hình ảnh (Morphing) */
        .morph-img {
            position: absolute;
            width: 82%;
            height: 82%;
            
            object-fit: cover;
            border-top-left-radius: 200px;
            border-top-right-radius: 200px;
            opacity: 0;
            transform: scale(0.85) rotate(-8deg);
            filter: brightness(0.9) contrast(1.05) drop-shadow(0 15px 30px rgba(0,0,0,0.4));
            transition: opacity 1.2s ease-in-out, transform 1.4s cubic-bezier(0.25, 1, 0.5, 1);
        }
        /* Khi ảnh được kích hoạt hiển thị */
        .morph-img.active {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        /* Thêm lớp phủ gương mờ huyền ảo ở tâm vòng tròn */
        .product-circle-mock::after {
            content: '';
            position: absolute;
            width: 60px;
            height: 160px;
            background-color: rgba(255,255,255,0.12);
            border: 1px solid rgba(255,255,255,0.25);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-radius: 30px;
            z-index: 3;
            pointer-events: none;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            display: none;
        }

        .hero-right-card {
            background-color: rgba(255, 255, 255, 0.07);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            padding: 30px;
            border-radius: 20px;
            max-width: 350px;
            border: 1px solid rgba(255,255,255,0.12);
            z-index: 2;
        }

        .hero-right-card p {
            font-size: 14px;
            line-height: 1.6;
            font-weight: 300;
        }

        /* ==========================================
       3. SECTION 2: BENEFITS
       ========================================== */
    .section-benefits {
        background-color: #fff;
        /*display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        min-height: 580px;*/
    }

    .benefits-left {
        padding: 60px 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .benefits-left h2, .header-left h2 {
        font-size: 30px;
        font-family: SoraCarnel-Regular;
        line-height: 1.35;
        margin-bottom: 40px;
        color: #1b2e1e;
    }

    /* Khung bọc lớn chia trang làm 2 phần: Chữ bên trái - Hình bên phải */
.benefits-container {
    display: flex;
    align-items: flex-start; /* Giúp hình và chữ xuất phát bằng hàng nhau ở đỉnh */
    gap: 40px;               /* Khoảng cách an toàn, vừa vặn giữa khối chữ và khối hình */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Khối nội dung chữ bên trái chiếm nhiều diện tích hơn */
.benefits-left-content {
    flex: 1; 
}

.benefits-subtitle {
    font-size: 16px;
    margin-bottom: 25px;
    color: #333;
}

/* Danh sách chữ chia thành 2 cột đều nhau */
.benefits-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* Chia đôi cột chữ */
    gap: 20px 30px;                /* Khoảng cách: 20px trên dưới, 30px trái phải */
}

.benefits-list li {
    display: flex;
    align-items: center;
    gap: 15px;
}

.icon-plus {
    background-color: #f0edf0;
    color: #1b2e1e;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-plus img {
    width: 20px;
    height: auto;
}

.benefits-list p {
    font-size: 14px;
    line-height: 1.6;
    color: #000;
    margin: 0;
}

/* KHỐI HÌNH ẢNH BÊN PHẢI */
.benefits-right-image {
    flex: 0 0 350px; /* Giữ nguyên chiều rộng cũ của bạn */
    
    /* ĐẨY HÌNH XUỐNG NGANG HÀNG DUAL FORM */
    margin-top: 220px; /* Số 110px này bạn có thể tăng/giảm một chút (ví dụ 105px hoặc 115px) cho đến khi thẳng hàng vừa mắt */
}

.benefits-right-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

/* GIAO DIỆN RESPONSIVE TRÊN ĐIỆN THOẠI & TABLET */
@media (max-width: 1024px) {
    /* Chuyển thành 1 hàng dọc: Chữ chạy trước, ảnh xếp xuống dưới cùng */
    .benefits-container {
        flex-direction: column;
        gap: 30px;
    }
    .benefits-left {
        padding: 60px 20px;
    }
    /* Thu hẹp danh sách chữ thành 1 cột trên màn hình nhỏ để dễ đọc */
    .benefits-list {
        grid-template-columns: 1fr;
    }
    
    .benefits-right-image {
        width: 100%;
        max-width: 400px;
        margin: 0 auto; /* Căn giữa tấm ảnh khi ở giao diện mobile */
    }
}

    .benefits-right {
        position: relative;
        background-color: #152718; 
    }

    .grid-background {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: 
            linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
        background-size: 35px 35px;
    }

    .model-image-container {
        position: absolute;
        bottom: 0;
        right: 40px;
        width: 82%;
        height: 92%;
    }

    .model-photo-mock {
        width: 100%;
        height: 100%;
        border-radius: 240px 240px 0 0;
        position: relative;
        overflow: hidden; /* Giữ ảnh không tràn khỏi khung bo góc khi zoom */
        background-color: #152718;
    }

    /* Định dạng các layer ảnh manicure để làm hiệu ứng biến hình */
    .manicure-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transform: scale(1.12); /* Tạo hiệu ứng hơi phóng to nhẹ trước khi xuất hiện */
        transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1), 
                    transform 2s cubic-bezier(0.1, 0.8, 0.2, 1);
        z-index: 1;
    }

    /* Ảnh đang kích hoạt hiển thị */
    .manicure-img.active {
        opacity: 1;
        transform: scale(1);
        z-index: 2;
    }

    .vertical-text {
        position: absolute;
        left: -45px;
        bottom: 120px;
        transform: rotate(-90deg);
        transform-origin: left bottom;
        color: #fff;
        font-size: 10px;
        letter-spacing: 2px;
        white-space: nowrap;
        opacity: 0.6;
        z-index: 10; /* Đảm bảo chữ luôn nổi lên trên ảnh */
    }

    .vegan-tag, .vegan-tag-pedicure {
        /*position: absolute;
        bottom: 120px;
        left: -20px;
        background-color: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(8px);
        color: #fff;
        padding: 8px 20px;
        border-radius: 20px;
        font-size: 12px;
        border: 1px solid rgba(255,255,255,0.25);
        z-index: 10; */
        left: -20px;
        color: #000000;
        padding: 8px 20px;
        border-radius: 20px;
        font-size: 12px;
        z-index: 10;
    }
    
    .vegan-tag-pedicure{
        left: 34px;
        z-index: 2;
        font-size: 14px;
        line-height: 1.6;
        color: #000;
        margin: 0;
    }
        /* ==========================================
           4. SECTION 3: PRODUCTS LINEUP (MỚI - CẢ PC VÀ MOBILE ĐỀU CHẠY)
           ========================================== */
        .section-products {
            background-color: #fff;
            padding: 60px 40px;
            position: relative;
        }

        .products-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .sub-nav {
            display: flex;
            gap: 25px;
        }
        
        .sub-nav a {
            font-weight: 600;
            color: #555;
        }

        .brand-signature {
            font-family: 'Playfair Display', serif;
            font-style: italic;
            font-size: 32px;
            color: #1b2e1e;
        }

        /* Nút điều hướng mũi tên (Chỉ hiển thị rõ nét trên Desktop) */
        .slider-controls {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
        }

        .btn-nav {
            background-color: #fff;
            color: #1b2e1e;
            border: 1px solid #1b2e1e;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            transition: all 0.3s ease;
            user-select: none;
        }

        .btn-nav:hover {
            background-color: #1b2e1e;
            color: #fff;
        }

        /* Thùng bao bọc ẩn phần thừa của Slider */
        .slider-wrapper {
            width: 100%;
            overflow: hidden;
            position: relative;
        }

        /* Khung Grid chứa sản phẩm linh hoạt làm Slider Track */
        .products-grid {
            display: flex;
            gap: 25px;
            transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            will-change: transform;
        }

        /* Thẻ sản phẩm được cố định width để tính toán bước dịch chuyển */
        .product-card {
            flex: 0 0 calc(24% - 8px); /* Mặc định trên PC hiển thị 3 cái, che cái thứ 4 để slide mượt */
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }
        .arch-container img{
            border-radius: 200px;
            width: 100%;
            height: 100%;
            aspect-ratio: 2 / 3;
            object-fit: cover;
            transition: var(--transition-base);
        }
        .texture-circle {
            width: 100px;
            height: 100px;
            background-color: #e3dec9; 
            border-radius: 50%;
            margin-bottom: -50px; 
            z-index: 2;
            opacity: 0.85;
        }
        
        .product-card:nth-child(2) .texture-circle { background-color: #ebd9cc; }
        .product-card:nth-child(3) .texture-circle { background-color: #cfd6c3; }
        .product-card:nth-child(4) .texture-circle { background-color: #decbc3; }

        .arch-container {
            width: 100%;
            border: 1.5px solid #1b2e1e;
            border-radius: 200px; 
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            padding: 20px;
            background-color: #fff;
            transition: all 0.4s ease;
            z-index: 1;
        }

        .product-card:hover .arch-container {
            background-color: #1b2e1e;
        }
        .product-card:hover .product-label {
            background-color: #fff;
            color: #1b2e1e;
        }

        .product-item-mock {
            width: 70px;
            height: 150px;
            background-color: #f0f0f0; 
            margin-bottom: 25px;
            border-radius: 6px;
            position: relative;
            display: none;
        }
        
        .product-item-mock::before {
            content: '';
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 15px;
            background-color: #ccc;
            border-radius: 4px 4px 0 0;
        }

        .product-label {
            width: 100%;
            background-color: #1b2e1e;
            color: #fff;
            text-align: center;
            padding: 14px 0;
            border-radius: 25px;
            font-size: 13px;
            font-weight: 600;
            transition: all 0.4s ease;
        }

        /* Chấm định vị */
        .slider-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 30px;
        }

        .dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #ccc;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .dot.active {
            background-color: #1b2e1e;
            width: 22px;
            border-radius: 10px;
        }

        /* ========================================================
           5. RESPONSIVE HOÀN HẢO CHO MOBILE
           ======================================================== */
        @media (max-width: 992px) {
            .section-benefits { grid-template-columns: 1fr; }
            .benefits-right { height: 600px; }
            .brand-logo { font-size: 65px; }
            
            /* 1. Cấu hình lại khung chứa Grid để cho phép rớt hàng tạo thành 2 tầng */
            #productGrid {
                flex-wrap: wrap; /* Ép các card nếu thừa chiều rộng phải tự xuống hàng */
                justify-content: space-between; /* Căn đều khoảng cách giữa các card */
            }

            /* 2. Giữ nguyên tỷ lệ hiển thị 2 sản phẩm trên một hàng */
            .product-card {
                flex: -2 0 85%; /* Hiện 1 cái chính và hé lộ góc cái sau */
                flex: 0 0 calc(50% - 8px);
                max-width: 290px;
            }
        }

        @media (max-width: 768px) {
            /*.hero-content { flex-direction: column; align-items: center; justify-content: center; gap: 30px; }*/
            .hero-right-card { max-width: 100%; text-align: center; }

            .products-header { flex-direction: column; gap: 20px; }
            .header-right { align-items: flex-start; gap: 15px; }
            
            /* Tối ưu kích thước card trên Smartphone nhỏ */
            .product-card {
                flex: -2 0 85%; /* Hiện 1 cái chính và hé lộ góc cái sau */
                flex: 0 0 calc(50% - 8px);
                max-width: 290px;
            }
            .slider-controls {
                align-self: center; /* Đưa nút bấm ra giữa trên mobile */
            }
        }
        /* Reset nhẹ để tránh lỗi font và khoảng cách */
    .pedicure-tabs-container {
        width: 100%;
        background-color: #fff;
        padding-bottom: 30px;
        box-sizing: border-box;
    }

    .pedicure-tabs-list {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        gap: 40px; /* Khoảng cách giữa các text */
    }

    .pedicure-tab-item {
        font-size: 14px;
        color: #000000;
        cursor: pointer;
        white-space: nowrap; /* Không cho chữ tự động xuống dòng */
        transition: color 0.3s ease;
        position: relative;
        padding: 10px 0;
        display: flex;          /* Kích hoạt Flexbox để xếp hàng ngang */
        align-items: center;    /* CĂN GIỮA HOÀN HẢO THEO CHIỀU DỌC cho cả icon và chữ */
        gap: 5px;              /* Khoảng cách nằm ngang giữa icon và chữ (bạn tự chỉnh theo ý muốn) */
        /* Khoảng cách đệm bên trong nếu cần */
        padding: 10px 0;
    }

    /* Hiệu ứng hover cho đẹp mắt */
    .pedicure-tab-item:hover {
        color: #152718; /* Đổi màu xanh lá đậm giống style tiệm của bạn */
    }

    /* Tạo một đường gạch chân mờ nhỏ tinh tế khi active (tùy chọn) */
    .pedicure-tab-item.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        /*background-color: #152718;*/
    }

    /* ==========================================
       CẤU HÌNH ĐẸP MẮT TRÊN MOBILE (Dưới 768px)
       ========================================== */
    @media (max-width: 1024px) {
        .pedicure-tabs-container {
            /* Bỏ hoàn toàn cơ chế cuộn ngang (overflow-x: auto) */
            overflow: hidden; 
            padding: 15px 0px; /* Điều chỉnh lại padding cho vừa vặn màn hình nhỏ */
        }

        /* Ẩn thuộc tính ẩn scrollbar cũ vì không còn cần thiết */
        .pedicure-tabs-container::-webkit-scrollbar {
            display: none;
        }

        .pedicure-tabs-list {
            display: flex; /* Đảm bảo vẫn dùng flexbox */
            flex-wrap: wrap; /* Gốc rễ vấn đề: Lệnh này ép các tab tự động nhảy xuống hàng khi hết chỗ */
            gap: 0px 16px; /* Khoảng cách giữa các hàng và các cột (Hàng cách hàng 12px, Cột cách cột 16px) */
            padding-right: 0; /* Bỏ padding thừa bên phải */
        }

        .pedicure-tab-item {
            font-size: 14px; /* Giữ nguyên size chữ nhỏ gọn của bạn */
            white-space: nowrap; /* Giữ chữ trên một tab không bị ngắt dòng vô duyên */
            /* Bạn có thể thêm padding nhỏ cho các nút tab nếu muốn chúng giống dạng thẻ (tags) */
            padding: 6px 0px; 
        }
    }
    @media (max-width: 768px) {
        .pedicure-tabs-container {
            /* Bỏ hoàn toàn cơ chế cuộn ngang (overflow-x: auto) */
            overflow: hidden; 
            padding: 15px 0px; /* Điều chỉnh lại padding cho vừa vặn màn hình nhỏ */
        }

        /* Ẩn thuộc tính ẩn scrollbar cũ vì không còn cần thiết */
        .pedicure-tabs-container::-webkit-scrollbar {
            display: none;
        }

        .pedicure-tabs-list {
            display: flex; /* Đảm bảo vẫn dùng flexbox */
            flex-wrap: wrap; /* Gốc rễ vấn đề: Lệnh này ép các tab tự động nhảy xuống hàng khi hết chỗ */
            gap: 0px 16px; /* Khoảng cách giữa các hàng và các cột (Hàng cách hàng 12px, Cột cách cột 16px) */
            padding-right: 0; /* Bỏ padding thừa bên phải */
        }

        .pedicure-tab-item {
            font-size: 14px; /* Giữ nguyên size chữ nhỏ gọn của bạn */
            white-space: nowrap; /* Giữ chữ trên một tab không bị ngắt dòng vô duyên */
            /* Bạn có thể thêm padding nhỏ cho các nút tab nếu muốn chúng giống dạng thẻ (tags) */
            padding: 6px 0px; 
        }
    }
        /*services-home-new*/
/*gallery-home*/
.gallery-container-home{
    width: 100%;
    margin: 0 auto;
    padding: 100px 0px;
    overflow: hidden;
}
h2.gallery-title {
    color: #1b3322; /* Màu xanh đậm sang trọng giống ảnh */
    font-family: 'Georgia', serif;
    font-size: 2rem;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

/* --- Khung chứa Gallery --- */
.gallery-container {
    position: relative;
    max-width: 1200px;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.gallery-track {
    display: flex;
    gap: 15px;
    transition: transform 0.5s ease-in-out;
}

/* --- Cấu trúc từng Item ảnh --- */
.gallery-item {
    min-width: calc(20% - 12px); /* Mặc định hiển thị 5 ảnh trên 1 hàng */
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    border-radius: 15px; /* Bo góc mượt mà giống mẫu */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    position: relative;
}

.gallery-item img {
    width: 100%;
    height: 400px; /* Chiều cao cố định tạo sự đồng đều */
    object-fit: cover; /* Giữ nguyên tỉ lệ ảnh không bị méo */
    display: block;
    transition: transform 0.3s ease;
}

/* Hiệu ứng zoom nhẹ khi di chuột vào */
.gallery-item:hover img {
    transform: scale(1.05);
}

/* --- Responsive (Tự động co giãn theo màn hình) --- */
@media (max-width: 1024px) {
    .gallery-item { min-width: calc(33.333% - 10px); } /* Màn hình máy tính bảng hiện 3 ảnh */
}
@media (max-width: 600px) {
    .gallery-item { min-width: calc(100% - 0px); } /* Màn hình điện thoại hiện 2 ảnh */
}

/* --- Giao diện Phóng to ảnh (Lightbox Pop-up) --- */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
}

.lightbox-content {
    max-width: 85%;
    max-height: 85%;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(255,255,255,0.2);
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.lightbox .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.lightbox .close-btn:hover {
    color: #bbb;
}
/*gallery-home*/
/* --- CSS RESET & VARIABLES --- */
:root {
    --primary-dark: #1E3A27;    /* Xanh lá đậm quý phái */
    --primary-medium: #3B6B4C;  /* Xanh lá vừa (tự nhiên) */
    --primary-light: #7DA683;   /* Xanh lá nhạt nhẹ nhàng */
    --bg-sage: #EAF0EC;          /* Mền xanh sage cực nhạt cho background */
    --bg-cream: #FAF8F5;         /* Màu kem organic */
    --text-dark: #2C3E35;        /* Chữ màu xanh đen để không bị thô như màu đen */
    --text-light: #FFFFFF;
    --gold-accent: #C5A880;      /* Điểm xuyết màu vàng gold sang trọng */
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Plus Jakarta Sans', sans-serif;
}
/* --- GLOBAL COMPONENTS --- */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-family: SoraCarnel-Regular;
    font-size: 2.5rem;
    color: var(--primary-dark);
    text-align: center;
    margin-bottom: 1rem;
}

.section-subtitle {
    text-align: center;
    color: var(--primary-medium);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-bottom: 3rem;
    font-weight: 600;
}
/* --- HERO SECTION --- */
.hero {
    background: linear-gradient(rgba(30, 58, 39, 0.75), rgba(30, 58, 39, 0.85)), 
                url('../images/bg-slogan.webp') no-repeat center center/cover;
    padding: 150px 0;
    color: var(--text-light);
    text-align: center;
}

.hero-tagline {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 1.5rem;
    color: var(--primary-light);
    font-weight: 600;
}

.hero h1 {
    font-size: 2rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400;
}

.hero p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 2.5rem auto;
    opacity: 0.9;
    font-weight: 300;
}

.hero .btn {
    background-color: var(--gold-accent);
    border-color: var(--gold-accent);
    color: var(--primary-dark);
    font-weight: 600;
}

.hero .btn:hover {
    background-color: transparent;
    color: var(--text-light);
    border-color: var(--text-light);
}

/* --- ABOUT & USP SECTION --- */
.about {
    padding: 100px 0;
    background-color: var(--bg-cream);
}

.about-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-content h3 {
    font-family: var(--font-serif);
    font-size: 2rem;
    color: var(--primary-dark);
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.about-content p {
    margin-bottom: 1.5rem;
    color: #4A5A50;
    font-size: 1.05rem;
}

.about-image {
    position: relative;
}

.about-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(30,58,39,0.1);
}

/* --- INNOVATION / SPECIALTIES --- */
.innovation {
    background-color: var(--bg-sage);
    padding: 100px 0;
    border-radius: 50px 50px 0 0;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 2rem;
}

.card {
    background-color: var(--text-light);
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    transition: transform 0.3s ease;
    border: 1px solid rgba(125, 166, 131, 0.2);
}

.card:hover {
    transform: translateY(-5px);
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    display: inline-block;
}

.card h4 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--primary-dark);
    margin-bottom: 1rem;
}

.card p {
    font-size: 0.95rem;
    color: #556B5C;
}

/* --- BUSINESS MODEL SECTION --- */
.business-model {
    padding: 100px 0;
}

.model-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem auto;
    font-size: 1.1rem;
    color: #4A5A50;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.model-list-item {
    display: flex;
    gap: 20px;
    background: #ffffff;
    padding: 15px;
    border-radius: 15px;
    border-left: 4px solid var(--primary-medium);
    box-shadow: 0 5px 15px rgba(0,0,0,0.01);
}

.item-number {
    font-size: 1.5rem;
    color: #496d43;
    font-weight: bold;
    line-height: 1;
}
.item-number img{
    width: 30px;
}
.item-text p {
    font-size: 0.98rem;
    color: var(--text-dark);
    margin: 0px;
}

/* --- RESPONSIVE DESIGN --- */
@media (max-width: 968px) {
    .about-wrapper, .grid-3, .grid-2, .footer-grid {
        grid-template-columns: 1fr;
    }
    .hero h1 {
        font-size: 1.5rem;
        line-height: 1.5;
    }
    nav {
        display: none; /* Ẩn menu trên mobile để tinh gọn */
    }
}
/*about new */
.btn-home {
    background: url(../images/bg-btn.webp) center center no-repeat;
    background-size: cover;
    border: 2px solid #496d43;
    width: 159px;
    border-radius: 50px;
}
.btn-home2{
    width: 149px;
}
.intro .content-box a {
  display: inline-block;
  color: #fff;
  font-weight: 600;
  padding: 10px;
  border-radius: 50px;
}
.intro .content-box a img {
  height: 20px;
  margin-right: 15px;
}
.intro .content-box a:hover {
  opacity: 0.8;
  text-decoration: none;
}

/* LOGOS */
.logos {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 100px 0;
}
.logos * {
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.logos .col-lg-2 {
  border-right: 1px dashed #eee;
}
.logos .col-lg-2:last-child {
  border-right: none;
}
.logos figure {
  width: 100%;
  margin: 0;
  position: relative;
}
.logos figure:hover img {
  opacity: 0;
  transform: scale(1.2);
}
.logos figure:hover h6 {
  opacity: 1;
  transform: scale(1);
}
.logos figure img {
  width: 100%;
}
.logos figure h6 {
  width: 100%;
  height: 20px;
  line-height: 20px;
  margin: 0;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  text-align: center;
  opacity: 0;
  font-weight: 800;
  font-size: 13px;
  transform: scale(1.1);
}


/* BENEFITS */
.benefits {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
 
  background: url(../images/bg-serhome.webp) 0px 0px no-repeat;
 background-size:cover;
  text-align: center;
  padding-top:70px;
  padding-bottom:70px;
}
.benefits .col 
{
    background: url(../images/bg-body.webp) 0px 0px no-repeat;
    background-size:cover;
    margin: 0.4%;
    padding-top: 20px;
    padding-bottom: 20px;
    padding: 10px;
    border-top-left-radius: 360px;
    border-top-right-radius: 360px;
    border: 2px solid #fff;
}
.benefits .col:nth-child(odd) {
  /*margin-top: 50px;*/
}
.benefits .col:hover figure:after {
  opacity: 1;
}
.benefits .col:last-child {
  border-right: none;
}
.benefits b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  opacity: 0.2;
}
.benefits h4 {
  display: block;
  font-size: 32pt; 
  margin-bottom: -15px;
  color: #fff;
  font-family: SoraCarnel-Regular;
  text-shadow: 1px 1px 5px #000;
  text-transform:uppercase;
}
.benefits h4 span {
  color: #fff;
}
.services-text h4 a{
  font-size: 17pt;
  line-height: 0.8!important;
  padding-bottom: 10px;
  margin-top:35px;
  color: #496d43!important;
  text-transform:none;
  font-weight:normal;
  text-shadow: none;
}
.recent-gallery h4, .party-txt h4 {
  color: #072c0d;
  font-family:SoraCarnel-Regular;
  text-transform:uppercase;
}
.benefits h3 {
  font-weight: 600;
  margin-bottom: 50px;
  color:#fff;
  margin-top:20px;
  font-size:20px;
}
.benefits figure {
  display: block;
  margin-bottom: 20px;
  position: relative;
}
.benefits figure:after {
  content: "";
  width: 70px;
  height: 70px;
  position: absolute;
  left: 50%;
  top: 0;
  background: #072c0d;
  border-radius: 50%;
  opacity: 0;
  z-index: 0;
  margin-left: -35px;
}
.benefits figure img {
  /*height: 70px;*/
  position: relative;
  z-index: 2;
  border-top-left-radius: 360px;
  border-top-right-radius: 360px;
  z-index: 99;
  width: 100%;
  max-width: 260px;
  padding-top: 18px;
}
.benefits figure .line-home1 img
{
    position: absolute;
    left: 24px;
    top: 8%;
    z-index: 9;
}
.benefits h6 {
  font-weight: 600;
  font-size: 14px;
}
.benefits .odometer {
  font-size: 50px;
  line-height: 1;
  font-weight: 800;
}
.benefits .extra {
  font-size: 18px;
  font-weight: 600;
  display: inline-block;
  transform: translateY(10px);
}

/* RECENT GALLERY */
.recent-gallery {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  /*background: url(../images/body-page.webp) center bottom no-repeat;
  background-size: cover;
  background: #fff;*/
}
.recent-gallery b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  opacity: 0.2;
}
.recent-gallery h4 {
  display: block;
  font-size: 30pt; 
  margin-bottom: 15px;
}
.recent-gallery h4 span {
  color: #072c0d;
}
.recent-gallery h3 {
  font-weight: 400;
  padding-right: 40%;
  margin-bottom: 30px;
}
.recent-gallery .link {
  display: inline-block;
  color: #26282b;
  font-weight: 600;
  font-size: 14px;
  position: relative;
  padding-bottom: 10px;
}
.recent-gallery .link i {
  margin-left: 10px;
}
.recent-gallery .link:hover {
  text-decoration: none;
}
.recent-gallery .link:hover:before {
  width: 100%;
}
.recent-gallery .link:before {
  content: "";
  width: 60px;
  height: 2px;
  background: #26282b;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.recent-gallery figure {
  display: block !important;
  margin: 0;
  position: relative;
  border: 3px solid transparent;
  
}
.recent-gallery .col-md-4:nth-child(1) {
  margin-top: 100px;
}
.recent-gallery .col-md-4:nth-child(2) {
  margin-top: 0;
}
.recent-gallery .col-md-4:nth-child(3) {
  margin-top: 80px;
}

/* PROPERTY CALCULATOR */
.property-calculator {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 150px;
  margin-top: 120px;
  position: relative;
}
.property-calculator figure {
  display: inline-block;
  margin-bottom: 0;
  margin-top: 20px;    
  /*background: url(../images/bg-vien.webp) center center no-repeat;
  background-size: cover;*/
  position: relative;
}
.property-calculator figure:before {
  content: "";
  width: 50vw;
  height: 100%;
  /*background: url(../images/bg-party.webp) -175% center no-repeat;
  background-size: cover;*/
  position: absolute;
  left: -50vw;
  top: 0;
  display: none;
}
.property-calculator figure .pattern-bg {
  width: 120%;
  height: 100%;
  position: absolute;
  left: 5%;
  top: -5%;
  /*background: url(../images/side-pattern-bg.webp);
  background-size: contain;*/
}
.property-calculator figure .holder {
  position: relative;
  width: 100%;
  float: left;
  display: block !important;
  /*transform: translate(85px, -35px);*/
}
.property-calculator figure .holder img {
  box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.2);
  width: 525px;
  border-radius: 360px;
    border: 3px solid #496d43;
    box-shadow: 1px 1px 10px #fff;
}
.property-calculator .content-box {
  display: block;
  padding: 10%;
  border: 2px solid #fff;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 30px;
  /*background: url(../images/bg-footer.webp) 80% 95% repeat;
  background-size: cover;*/
 
}
.property-calculator .content-box b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  opacity: 0.2;
}
.property-calculator .content-box h4 {
  display: block;
    font-size: 30pt;
    margin-bottom: 15px;
    font-family:SoraCarnel-Regular;
   text-transform:uppercase;
}
.property-calculator .content-box h4 span {
  color: #072c0d;
}
.property-calculator .content-box h3 {
  font-weight: 600;
  margin-bottom: 30px;
}
.property-calculator .content-box ul {
  display: block;
  margin-bottom: 60px;
  padding: 0;
}
.property-calculator .content-box ul li {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.property-calculator .content-box ul li:nth-child(1) {
  margin-right: 30px;
}
.property-calculator .content-box ul li img {
  height: 35px;
}
.property-calculator .content-box p {
  display: block;
  margin-bottom: 30px;
}
.property-calculator .content-box a {
  display: inline-block;
  color: #fff;
  font-weight: 600;
  padding: 10px;
  border-radius: 50px;
}
.property-calculator .content-box a img {
  height: 14px;
  margin-right: 10px;
}
.property-plans .content-box a img {
  height: 14px;
  margin-right: 10px;
}

.property-calculator .content-box a:hover {
  opacity: 0.8;
}
.property-plans .content-box a:hover {
  color: #072c0d;
  text-decoration: none;
}

/* PROPERTY PLANS */
.property-plans {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-bottom:40px;
}
.property-plans b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  opacity: 0.2;
}
.property-plans h4 {
  display: block;
  font-size: 44px; 
  margin-bottom: 15px;
}
.property-plans h4 span {
  color: #072c0d;
}
.property-plans h3 {
  font-weight: 600;
  margin-bottom: 30px;
}
.property-plans p {
  display: block;
  padding-right: 40%;
  margin-bottom: 30px;
}
.property-plans table {
  display: table;
  margin-bottom: 30px;
  font-size: 15px;
}
.property-plans table tr td {
  padding: 5px 0;
}
.property-plans table tr td:first-child {
  color: #072c0d;
  width: 120px;
  font-weight: 600;
}
.property-plans .tab-nav {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.property-plans .tab-nav li {
  display: inline-block;
  margin: 0;
  margin-right: 10px;
  padding: 0;
  list-style: none;
}
.property-plans .tab-nav li a {
  color: #26282b;
  font-weight: 600;
}

/* GET CONSULTATION */
.get-consultation {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 150px;
  margin-bottom: 100px;
  background-size: auto 120%;
  background-position: right;
  background-repeat: no-repeat;
  background-color: #e5e4df;
}
.get-consultation .content-box {
  width: 500px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 80px 50px;
  margin-bottom: -100px;
  color: #fff;
  background: #072c0d;
  position: relative;
  overflow: hidden;
}
.get-consultation .content-box:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 200px 100vh 0;
  border-color: transparent #072c0d transparent transparent;
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0.15;
}
.get-consultation b {
  width: 100%;
  display: block;
  font-size: 30px;
  font-weight: 800;
  opacity: 0.2;
}
.get-consultation h4 {
  display: block;
  font-size: 30px;
  font-family: "Playfair Display", serif;
  margin-bottom: 15px;
}
.get-consultation h4 span {
  color: #072c0d;
}
.get-consultation h3 {
  font-weight: 600;
  margin-bottom: 30px;
}
.get-consultation p {
  display: block;
  padding-right: 20%;
  margin-bottom: 40px;
}
.get-consultation a {
  height: 60px;
  line-height: 60px;
  float: left;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 10px;
  position: relative;
  background: #26282b;
  padding: 0 40px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.get-consultation a i {
  margin-left: 10px;
}
.get-consultation a:hover {
  text-decoration: none;
  background: #fff;
  color: #072c0d;
}

/* RECENT POSTS */
.recent-posts {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
}
.recent-posts b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  opacity: 0.2;
}
.recent-posts h4 {
  display: block;
  font-size: 30px;
  font-family: "Playfair Display", serif;
  margin-bottom: 15px;
}
.recent-posts h4 span {
  color: #072c0d;
}
.recent-posts small {
  display: block;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 40px;
  opacity: 0.5;
}
.recent-posts small:after {
  content: "";
  width: 50px;
  height: 1px;
  background: #26282b;
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 4px;
  opacity: 0.5;
}
.recent-posts .post-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.recent-posts .post-box figure {
  display: block;
  margin-bottom: 20px;
}
.recent-posts .post-box h6 {
  display: block;
  font-size: 20px;
  font-weight: 600;
}
.recent-posts .post-box h6 a {
  display: inline-block;
}
.recent-posts .post-box h6 a:hover {
  color: #072c0d;
  text-decoration: none;
}
.recent-posts .post-box p {
  display: block;
  margin: 0;
}
.recent-posts .post-box span {
  width: 100%;
  display: block;
  font-size: 13px;
  opacity: 0.5;
  margin-bottom: 10px;
}

/* PROPERTY CUSTOMIZATION */
.property-customization {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  background: url(../images/bg-slogan.webp) center 80% no-repeat fixed;
  background-size: cover;
  color: #fff;
  position: relative;
}
.property-customization b {
  width: 100%;
  display: block;
  font-size: 30px;
  font-weight: 800;
  opacity: 0.2;
}
.property-customization h4 {
  display: block;
  font-size: 30px; 
  margin-bottom: 15px;
}
.property-customization h4 span {
  color: #ffd671;
}
.property-customization h3 {
  font-weight: 600;
  margin-bottom: 30px;
}
.property-customization figure {
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 15px 10px;
  margin: 15px 0;
}
.property-customization figure img {
  height: 40px;
  float: left;
  margin-right: 15px;
}
.property-customization figure figcaption {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

/* APARTMENTS */
.apartment {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
}
.apartment h2 {
  font-size: 4vw;
  font-family: "Playfair Display", serif;
  margin-bottom: 20px;
}
.apartment h2 span {
  color: #072c0d;
}
.apartment h6 {
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 20px;
}
.apartment h5 {
  margin-bottom: 70px;
  font-weight: 600;
  opacity: 0.5;
}
.apartment h4 {
  margin-bottom: 20px;
  font-weight: 600;
}
.apartment p {
  line-height: 1.7;
  margin-bottom: 20px;
}
.apartment p strong {
  font-weight: 600;
}
.apartment ul {
  width: 100%;
  display: block;
  margin-bottom: 30px;
  padding-left: 20px;
}
.apartment ul li {
  margin: 0;
  padding: 4px 0;
}
.apartment blockquote {
  display: inline-block;
  padding: 30px;
  background: #072c0d;
  margin-bottom: 40px;
}
.apartment blockquote p {
  margin: 0;
}
.apartment blockquote strong {
  font-size: 20px;
}
.apartment figure {
  width: 100%;
  display: block;
  margin-bottom: 70px;
  margin-top: 50px;
}
.apartment .gallery-slider {
  width: 80%;
  margin-top: 50px;
  margin-bottom: 70px;
}
.apartment .gallery-slider .gallery-container {
  margin: 0;
}
.apartment .property-plan {
  display: inline-block;
}
.apartment .property-infos {
  display: inline-block;
  background: #072c0d;
  color: #fff;
  padding: 50px;
  margin-bottom: 50px;
  float: left;
  margin-right: 100px;
}
.apartment .property-infos .odometer {
  font-size: 60px;
  font-weight: 800;
  position: relative;
  display: inline-flex;
}
.apartment .property-infos .odometer:after {
  content: attr(data-text);
  font-size: 30px;
  font-weight: 600;
  margin-top: 10px;
  margin-left: 5px;
  opacity: 0.5;
}
.apartment .property-infos p:last-child {
  margin-bottom: 0;
}

/* ABOUT CONTENT */
.about-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
}
.about-content h2 {
  font-size: 4vw;
  font-family: "Playfair Display", serif;
  margin-bottom: 20px;
}
.about-content h2 span {
  color: #072c0d;
}
.about-content h6 {
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 20px;
}
.about-content h5 {
  margin-bottom: 40px;
  font-weight: 600;
  opacity: 0.5;
}
.about-content h4 {
  margin-bottom: 20px;
  font-weight: 600;
}
.about-content p {
  line-height: 1.7;
  margin-bottom: 20px;
}
.about-content p strong {
  font-weight: 600;
}
.about-content ul {
  width: 100%;
  display: block;
  margin-bottom: 30px;
  padding-left: 20px;
}
.about-content ul li {
  margin: 0;
  padding: 4px 0;
}
.about-content blockquote {
  display: inline-block;
  padding: 30px;
  background: #072c0d;
  margin-bottom: 40px;
}
.about-content blockquote p {
  margin: 0;
}
.about-content blockquote strong {
  font-size: 20px;
}
.about-content .video-content {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 60px;
  margin-top: 30px;
}
.about-content .video-content video {
  width: 100%;
  height: 100%;
  float: left;
}
.about-content .gallery-container {
  margin-bottom: 50px;
}

/* CERTIFICATES */
.certificates {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
}
.certificates b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  opacity: 0.2;
}
.certificates h4 {
  display: block;
  font-size: 30px;
  font-family: "Playfair Display", serif;
  margin-bottom: 15px;
}
.certificates h4 span {
  color: #072c0d;
}
.certificates small {
  display: block;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 40px;
  opacity: 0.5;
}
.certificates small:after {
  content: "";
  width: 50px;
  height: 1px;
  background: #26282b;
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 4px;
  opacity: 0.5;
}
.certificates figure {
  display: block;
  margin: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.certificates figure img {
  width: 100%;
}

/* FACILITIES */
.facilities {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 135px 0;
}
.facilities b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  opacity: 0.2;
}
.facilities h4 {
  display: block;
  font-size: 30px;
  font-family: "Playfair Display", serif;
  margin-bottom: 15px;
}
.facilities h4 span {
  color: #072c0d;
}
.facilities small {
  display: block;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 40px;
  opacity: 0.5;
}
.facilities small:after {
  content: "";
  width: 50px;
  height: 1px;
  background: #26282b;
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 4px;
  opacity: 0.5;
}
.facilities figure {
  width: 100%;
  float: left;
  margin: 15px 0;
  padding: 50px 30px;
  box-shadow: 0 0 20px rgba(235, 207, 167, 0.4);
}
.facilities figure img {
  height: 70px;
  float: left;
}
.facilities figure figcaption {
  width: calc(100% - 90px);
  float: right;
}
.facilities figure figcaption h5 {
  font-weight: 600;
  font-size: 16px;
}
.facilities figure figcaption p {
  font-size: 14px;
  opacity: 0.5;
  margin: 0;
}

/* FAQ */
.faq {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
}
.faq .sidebox {
  width: calc(100% - 70px);
  float: left;
  margin-left: 70px;
  padding: 40px 30px;
  text-align: center;
  background: #072c0d;
  color: #fff;
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0;
}
.faq .sidebox i {
  font-size: 100px;
  margin-bottom: 20px;
  display: inline-block;
}
.faq .sidebox h3 {
  display: block;
  font-family: "Playfair Display", serif;
  margin-bottom: 20px;
}
.faq .sidebox p {
  color: #fff;
}

/* SALES OFFICES */
.sales-offices {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 135px 0;
}
.sales-offices .office-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 30px;
  margin: 15px 0;
  border: 1px solid #eee;
}
.sales-offices .office-box h5 {
  font-family: "Playfair Display", serif;
  margin-bottom: 20px;
  font-size: 26px;
}
.sales-offices .office-box address {
  margin-bottom: 25px;
}
.sales-offices .office-box a {
  height: 44px;
  line-height: 44px;
  display: inline-block;
  padding: 0 20px;
  background: #26282b;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.sales-offices .office-box a i {
  margin-right: 7px;
}
.sales-offices .office-box a:hover {
  text-decoration: none;
}

/* INTRO VIDEO */
.intro-video {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  text-align: center;
}
.intro-video b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  opacity: 0.2;
}
.intro-video h4 {
  display: block;
  font-size: 30px;
  font-family: "Playfair Display", serif;
  margin-bottom: 15px;
}
.intro-video h4 span {
  color: #072c0d;
}
.intro-video h3 {
  font-weight: 600;
  margin-bottom: 50px;
}
.intro-video .video-container {
  width: 100%;
  float: left;
  margin: 0;
  padding: 5px;
  background: #072c0d;
}
.intro-video .video-container video {
  width: 100%;
  float: left;
}

/* PRESS RELEASES */
.press-relases {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 135px 0;
}
.press-relases figure {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 15px 0;
  border: 1px solid #eee;
}
.press-relases figure a {
  width: 40%;
}
.press-relases figure a img {
  width: 100%;
}
.press-relases figure figcaption {
  width: 60%;
  padding-left: 20px;
}
.press-relases figure figcaption h5 {
  display: block;
  font-size: 22px;
  font-family: "Playfair Display", serif;
  margin-bottom: 15px;
}
.press-relases figure figcaption p {
  font-size: 14px;
}
.press-relases figure figcaption small {
  display: block;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 0;
  opacity: 0.5;
}

/* PHOTO GALLERY */
.photo-gallery {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
}
.pt-0{
  padding-top: 0px!important;
}
.pb-0{
  padding-bottom: 0px!important;
}
.background-page{
  background: url(../images/bg-body.webp) center center no-repeat fixed;
  background-size:cover;
}
.photo-gallery .gallery-filter {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
  padding: 0;
}
.photo-gallery .gallery-filter li {
  display: inline-block;
  margin-right: 25px;
  padding: 0;
  list-style: none;
}
.photo-gallery .gallery-filter li a {
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.photo-gallery .gallery-filter li a.current {
  border-bottom: 2px solid #072c0d;
}
.photo-gallery .gallery-filter li a:hover {
  color: #072c0d;
  text-decoration: none;
}
.photo-gallery .gallery {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  margin-left: -4px;
  margin-right: -4px;
  padding: 0;
}
.photo-gallery .gallery li {
  width: 25%;
  margin: 0;
  padding: 4px;
  list-style: none;
}
.photo-gallery .gallery li img {
  width: 100%;
  float: left;
  width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: var(--transition-base);
}
.gallery-home-2 img{
  width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    transition: var(--transition-base);
}
/* SALES TEAM */
.sales-team {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
}
.sales-team figure {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border: 1px solid #eee;
  margin: 15px 0;
}
.sales-team figure img {
  width: 50%;
  display: inline-block;
}
.sales-team figure figcaption {
  display: inline-block;
}
.sales-team figure figcaption h4 {
  display: block;
  font-size: 30px;
  font-family: "Playfair Display", serif;
  margin-bottom: 15px;
}
.sales-team figure figcaption h4 span {
  color: #072c0d;
}
.sales-team figure figcaption small {
  display: block;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 40px;
  opacity: 0.5;
}
.sales-team figure figcaption small:after {
  content: "";
  width: 50px;
  height: 1px;
  background: #26282b;
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 4px;
  opacity: 0.5;
}
.sales-team figure figcaption ul {
  display: block;
  margin: 0;
  padding: 0;
}
.sales-team figure figcaption ul li {
  display: inline-block;
  margin: 0;
  margin-right: 15px;
  padding: 0;
  list-style: none;
}
.sales-team figure figcaption ul li a {
  font-size: 14px;
  font-weight: 600;
}
.sales-team figure figcaption ul li a i {
  margin-right: 6px;
  font-size: 12px;
  font-weight: 400;
}
.sales-team figure figcaption ul li a:hover {
  text-decoration: none;
  color: #072c0d;
}

/* ERROR 404*/
.error404 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
  text-align: center;
}
.error404 figure {
  display: block;
  margin-bottom: 60px;
  padding: 0 10%;
}
.error404 figure img {
  width: 100%;
}
.error404 h2 {
  font-size: 50px;
  font-weight: 800;
  color: #072c0d;
}
.error404 p {
  display: block;
  margin-bottom: 40px;
}
.error404 a {
  height: 60px;
  line-height: 56px;
  display: inline-block;
  color: #072c0d;
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 10px;
  position: relative;
  border: 2px solid #072c0d;
  padding: 0 40px;
  box-shadow: 0 0 20px rgba(235, 207, 167, 0.4);
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.error404 a:hover {
  text-decoration: none;
  color: #fff;
  background: #072c0d;
  border-color: #072c0d;
}

/* BLOG */
.blog {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
}
.blog .post {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 100px;
}
.blog .post .post-image {
  width: 100%;
  float: left;
  margin-bottom: 0;
}
.blog .post .post-image img {
  width: 100%;
}
.blog .post .post-content {
  width: calc(100% - 60px);
  float: left;
  background: #fff;
  margin: 0 30px;
  margin-top: -100px;
  padding: 30px;
}
.blog .post .post-content.single {
  width: 100%;
  margin: 0;
  margin-top: 50px;
  padding: 0;
}
.blog .post .post-content .post-title {
  font-weight: 800;
  margin-bottom: 20px;
}
.blog .post .post-content .post-title a {
  color: #26282b;
}
.blog .post .post-content .post-title a:hover {
  color: #072c0d;
  text-decoration: none;
}
.blog .post .post-content .post-tags {
  width: 100%;
  float: left;
}
.blog .post .post-content .post-tags i {
  font-size: 19px;
  float: left;
  margin-right: 10px;
  color: #072c0d;
  margin-top: 4px;
}
.blog .post .post-content .post-tags ul {
  display: block;
  margin: 0;
  padding: 0;
}
.blog .post .post-content .post-tags ul li {
  float: left;
  margin-right: 10px;
  padding: 0;
  list-style: none;
}
.blog .post .post-content .post-tags ul li a {
  color: #26282b;
  text-decoration: underline;
}
.blog .post .post-content ul {
  width: 100%;
  display: block;
  margin-bottom: 30px;
  padding-left: 20px;
}
.blog .post .post-content ul li {
  margin: 0;
  padding: 4px 0;
}
.blog .post .post-content blockquote {
  display: inline-block;
  padding: 30px;
  background: #072c0d;
  margin-bottom: 40px;
}
.blog .post .post-content blockquote p {
  margin: 0;
}
.blog .post .post-content blockquote strong {
  font-size: 20px;
}
.blog .post .post-content .post-intro {
  width: 100%;
  float: left;
  margin-bottom: 30px;
  font-size: 19px;
  line-height: 1.6;
}
.blog .post .post-content .post-author {
  width: 100%;
  float: left;
  line-height: 60px;
  margin-bottom: 20px;
}
.blog .post .post-content .post-author img {
  width: 60px;
  float: left;
  border-radius: 50%;
  margin-right: 10px;
}
.blog .post .post-content .post-author span {
  float: left;
  opacity: 0.5;
  margin-right: 5px;
}
.blog .post .post-content .post-author a {
  color: #26282b;
}
.blog .sidebar {
  width: calc(100% - 50px);
  display: flex;
  flex-wrap: wrap;
  margin-left: 50px;
  border-left: 1px solid #eee;
  padding-left: 50px;
}
.blog .sidebar .widget {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
}
.blog .sidebar .widget:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.blog .sidebar .widget .title {
  width: 100%;
  display: block;
  font-family: "Playfair Display", serif;
  margin-bottom: 20px;
}
.blog .sidebar .widget .categories {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}
.blog .sidebar .widget .categories li {
  width: 100%;
  display: block;
  margin: 0;
  padding: 2px 0;
  list-style: none;
}
.blog .sidebar .widget .categories li:before {
  content: "»";
  margin-right: 9px;
  color: #072c0d;
}
.blog .sidebar .widget .categories li span {
  float: right;
  color: #072c0d;
}
.blog .sidebar .widget .categories li a {
  color: #26282b;
}
.blog .sidebar .widget .categories li a:hover {
  color: #072c0d;
}
.blog .sidebar .widget form {
  width: 100%;
  display: block;
}
.blog .sidebar .widget form input[type=text] {
  width: calc(100% - 50px);
  float: left;
  border: 1px solid #000;
  border-right: none;
}
.blog .sidebar .widget form button[type=submit] {
  width: 50px;
  padding: 0;
}
.blog .sidebar .widget .tags {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
}
.blog .sidebar .widget .tags li {
  float: left;
  margin-right: 8px;
  margin-bottom: 6px;
  padding: 0;
  list-style: none;
}
.blog .sidebar .widget .tags li a {
  height: 30px;
  line-height: 30px;
  float: left;
  border: 1px solid #072c0d;
  padding: 0 10px;
  font-size: 13px;
  color: #072c0d;
  font-weight: 600;
}
.blog .sidebar .widget .tags li a:hover {
  background: #072c0d;
  color: #fff;
  border-color: #072c0d;
  text-decoration: none;
}
.blog .sidebar .widget .side-gallery {
  margin-left: -3px;
  margin-right: -3px;
  padding: 0;
}
.blog .sidebar .widget .side-gallery li {
  width: 33.33333%;
  float: left;
  margin: 0;
  padding: 3px;
  list-style: none;
}
.blog .sidebar .widget .side-gallery li a {
  width: 100%;
  float: left;
  background: #26282b;
}
.blog .sidebar .widget .side-gallery li a:hover img {
  opacity: 1;
}
.blog .sidebar .widget .side-gallery li a img {
  opacity: 0.5;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.nav-bottom
{
    display: none;    
}
/* CONTACT */
.contact {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 150px 0;
}
.contact b {
  display: block;
  font-size: 30px;
  font-weight: 800;
  opacity: 0.2;
}
.contact h4 {
  display: block;
  font-size: 40px;
  font-family: Quicksand;
  font-style:italic;
  margin-bottom: 15px;
  color: #072c0d ;
}
.contact h4 span {
  color: #072c0d;
}
.contact small {
  display: block;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 50px;
  opacity: 0.5;
}
.contact small:after {
  content: "";
  width: 50px;
  height: 1px;
  background: #26282b;
  display: inline-block;
  margin-left: 5px;
  margin-bottom: 4px;
  opacity: 0.5;
}
.contact address {
  display: block;
  margin-bottom: 50px;
}
.contact address strong {
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
}
.contact address p {
  display: block;
  margin: 0;
}
.contact .map {
  /*display: inline-block;*/
  margin-bottom: 0;
  margin-top: 30px;
  position: relative;
}
.contact .map:before {
  /*content: "";
  width: 50vw;
  height: 100%;
  background: url(../images/bg-contact.webp) center center no-repeat;
  background-size: cover;
  position: absolute;
  left: -29vw;
  top: 0;*/
}
.contact .map .pattern-bg {
  /*width: 120%;
  height: 100%;
  position: absolute;
  left: 5%;
  top: -5%;
  background: url(../images/side-pattern-bg.webp);
  background-size: contain;*/
}
.contact .map .holder {
  position: relative;
  width: 100%;
  float: left;
  display: block !important;
  /*transform: translate(85px, -35px);*/
}
.contact .map .holder iframe {
  /*box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.2);*/
  border: none;
}
.contact .contact-form {
  width: 100%;
  display: block;
  padding: 50px 25px;
  background: #fff;
  box-shadow: 0 10px 30px #ccc;
  border-radius:20px;
   
}
.contact .contact-form h5 {
  margin-bottom: 40px;
}
.contact .contact-form #contact {
  display: block;
}
.contact .contact-form #contact .form-group {
  display: block;
  position: relative;
  margin-bottom: 35px;
  background: #fff;
}
.contact .contact-form #contact .form-group span {
  width: 100%;
  line-height: 54px;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 20px;
  z-index: 0;
  -webkit-transition: 0.25s ease-in-out;
  -moz-transition: 0.25s ease-in-out;
  -ms-transition: 0.25s ease-in-out;
  -o-transition: 0.25s ease-in-out;
  transition: 0.25s ease-in-out;
}
.contact .contact-form #contact .form-group span.label-up {
  font-size: 13px;
  line-height: 16px;
  top: -20px;
  font-weight: 600;
}
.contact .contact-form #contact .form-group input[type=text] {
  background: none;
  position: relative;
  z-index: 2;
}
.contact .contact-form #contact .form-group input:focus + span {
  font-size: 13px;
  line-height: 16px;
  top: -20px;
  font-weight: 600;
}
.contact .contact-form #contact .form-group textarea {
  background: none;
  position: relative;
  z-index: 2;
}
.contact .contact-form #contact .form-group textarea:focus + span {
  font-size: 13px;
  line-height: 16px;
  top: -20px;
  font-weight: 600;
}
.contact .contact-form #contact .form-group label.error {
  color: red;
  margin-top: 5px;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 13px;
   display: none!important;
}
.contact .contact-form #success, .contact .contact-form #error {
  display: none;
  float: left;
}
.contact .contact-form #error {
  background: red;
  color: #fff;
}
.contact .contact-form #success {
  background: green;
  color: #fff;
}
.contact .contact-form .alert {
  border: none;
  border-radius: 0;
  padding: 20px 30px;
}

/* FOOTER BAR */
.footer-bar {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: -80px;
}
.footer-bar .inner {
  background: url(../images/bg-serhome.webp) 50% 50% no-repeat;
  background-size:cover;
  padding: 15px 30px;
  color: #fff;
}
.bg-bottom
{
    background: rgba(255,255,255,1);
    padding: 30px 0px;
    border: 1px solid #ccc;
}
.footer-bar .inner figure {
  margin-bottom: 20px;
  float: left;
  margin-right: 30px;
}
.footer-bar .inner figure img {
  height: 70px;
  margin-bottom: 20px;
}
.footer-bar .inner h3 {  
  font-size: 22px;
  margin-bottom: 15px;
  font-weight: bold;
  color: #072c0d;
}
.footer-bar .inner p {
  font-size: 16px;
  margin: 0;
  color: #333;
}
.footer-bar .inner strong {
  font-weight: 600;
  text-decoration: underline;
}

/* FOOTER */
.footer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-top: 180px;
  padding-bottom: 30px;
  background: url(../images/bg-footer.webp) 0px center no-repeat;
  background-size: cover;
  border-top: 3px solid;
  border-image: linear-gradient(120deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c) 1;
}
.footer p {
  color: #fff;
}
.logo-footer {
  width: 100%;
  max-width: 300px;
  margin: 0px auto;
  overflow: hidden;
}
.logo-footer img {
  width: 300px;
  margin-bottom: 15px;
  border: none;
}
.footer .select-box {
  display: inline-block;
  position: relative;
  height: 50px;
  line-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding-right: 15px;
  padding-left: 25px;
  margin-top: 20px;
}
.footer .select-box:hover {
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.footer .select-box span {
  margin-right: 40px;
}
.footer .select-box .dropdown-toggle {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
.footer .select-box .dropdown-toggle:hover {
  text-decoration: none;
}
.footer .select-box .dropdown-toggle img {
  width: 20px;
  margin-right: 5px;
}
.footer .select-box .dropdown-menu {
  width: 100%;
  background: #fff;
  border-radius: 0;
  border: none;
  margin-left: -25px;
  margin-top: 13px;
}
.footer .select-box .dropdown-menu li {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer .select-box .dropdown-menu li a {
  display: block;
  padding: 7px 25px;
  font-size: 14px;
  line-height: 1;
}
.footer .select-box .dropdown-menu li a:hover {
  background: none;
  color: #072c0d;
}
.footer .select-box .dropdown-menu li a img {
  width: 20px;
  margin-right: 5px;
}
.footer .footer-menu {
  display: block;
  margin: 0;
}
.footer .footer-menu li {
  width: 100%;
  float: left;
  margin: 0;
  padding: 4px 0;
  list-style: none;
}
.footer .footer-menu li a {
  float: left;
  color: #fff;
}
.footer .footer-menu li a:hover {
  color: #fff ;
}
.footer .contact-box {
  color: #fff;
  text-align: center;
}
.footer .contact-box h5 {
  margin-bottom: 10px;
  font-size: 19px;  
}
.footer .contact-box h3 {
  font-weight: 600;
  margin: 0;
}
.footer .contact-box p {
  margin-bottom: 10px;
}
.footer .contact-box p a {
  color: #fff;
  opacity: 0.5;
}
.footer .contact-box ul {
    width: 141px;
    overflow: hidden;
    margin: 0px auto;
    margin-top: 20px;
    padding: 0;
}
.footer .contact-box ul li {
  float: left;
  margin-left: 5px;
  padding: 0;
  list-style: none;
}
.footer .contact-box ul li a {
  width: 40px;
  height: 40px;
  float: left;
  text-align: center;
  line-height: 42px;
  font-size: 13px;
  color: #072c0d;
  background: #fff;
}
.footer .contact-box ul li a:hover {
  opacity:0.6;
}
.footer .col-12 {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding-top: 30px;
  margin-top: 80px;
  color: #fff;
  font-size: 13px;
  text-align:center;
  overflow: hidden;
}

.footer .col-12 .creation a {
  color: #fff;
}

/* RESPONSIVE MEDIUM  FIXES */
@media only screen and (max-width: 1199px), only screen and (max-device-width: 1199px) {
  .intro figure .holder {
    /*transform: translate(65px, -65px);*/
  }

  .intro figure .holder img {
    width: 450px;
  }

  .property-calculator figure .holder {
    /*transform: translate(65px, -65px);*/
  }

  .property-calculator figure .holder img {
    width: 450px;
  }

  .footer-bar .inner p {
    font-size: 15px;
  }

  .footer-bar .inner p br {
    display: none;
  }
}
/* RESPONSIVE TABLET FIXES */
@media only screen and (max-width: 991px), only screen and (max-device-width: 991px) {
  .side-navigation .side-content {
    display: none;
  }

  .side-navigation .menu {
    display: block;
  }

  .navbar .container .menu {
    display: none;
  }

  .page-header .container h1 {
    font-size: 8vw;
  }

  .intro figure {
    width: 100%;
    margin-bottom: 80px;
  }

  .intro figure .pattern-bg {
    width: 100%;
    left: 0;
  }

  .intro figure .holder {
    /*transform: translate(0, -45px);*/
    padding: 0 10px;
  }

  .intro figure .holder img {
    width: 100%;
  }

  .intro .content-box {
    padding: 5px;
    border: none;
    background: none;
  }

  .logos figure img {
    padding: 0 10%;
  }

  .about-content {
    padding: 80px 0;
  }

  .sales-offices {
    padding: 80px 0;
  }

  .press-relases {
    padding: 80px 0;
  }

  .photo-gallery {
    padding: 80px 0;
  }

  .photo-gallery .gallery li {
    width: 33.33333%;
  }

  .intro-video {
    padding: 80px 0;
  }

  .faq .sidebox {
    width: 100%;
    margin-left: 0;
    margin-top: 50px;
  }

  .apartment {
    padding: 80px 0;
  }

  .apartment .property-infos {
    width: 100%;
    margin-right: 0;
  }

  .apartment .property-plan {
    margin: 50px 0;
  }

  .apartment .gallery-slider {
    width: 100%;
  }

  .facilities {
    padding: 80px 0;
  }

  .blog .sidebar {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }

  .sales-team {
    padding: 80px 0;
  }

  .sales-team figure figcaption {
    width: 50%;
  }

  .sales-team figure figcaption h4 {
    font-size: 21px;
  }

  .sales-team figure figcaption small {
    margin-bottom: 20px;
  }

  .error404 {
    padding: 80px 0;
  }

  .recent-gallery {
    padding: 80px 0;
  }

  .recent-gallery h3 {
    padding-right: 0;
  }

  .recent-gallery .col-md-4 {
    margin-top: 0 !important;
  }

  .recent-gallery figure {
    margin-top: 80px;
  }

  .benefits {
    /*padding: 80px 0;*/
  }

  .property-calculator {
    padding-bottom: 80px;
    margin-top: 0;
  }

  .property-calculator .col-lg-6:nth-child(1) {
    order: 2;
  }

  .property-calculator .col-lg-6:nth-child(2) {
    order: 1;
  }

  .property-calculator figure {
    width: 100%;
  }

  .property-calculator figure:before {
    display: none;
  }

  .property-calculator figure .pattern-bg {
    width: 100%;
    left: 0;
  }

  .property-calculator figure .holder {
    /*transform: translate(0, -45px);*/
    padding: 0 10px;
  }

  .property-calculator figure .holder img {
    width: 100%;
  }

  .property-calculator .content-box {
    padding: 20px;
    border: none;
    margin-bottom: 150px;
  }

  .property-plans {
    padding-bottom: 80px;
  }

  .property-plans .nav-pills {
    margin-top: 40px;
  }

  .recent-posts {
    padding: 80px 0;
  }

  .recent-posts .post-box {
    margin: 25px 0;
  }

  .property-customization {
    padding: 80px 0;
  }

  .video-bg video {
    float: right;
  }

  .certificates {
    padding: 80px 0;
  }

  .contact {
    padding: 80px 0;
  }

  .contact address p a {
    display: block;
  }

  .contact .contact-form {
    padding-left: 0;
    margin-top: 50px;
  }

  .blog {
    padding: 80px 0;
  }

  .footer-bar .inner {
    padding: 30px;
  }

  .footer-bar .inner .col-lg-4 {
    margin: 20px 0;
  }

  .footer-bar .inner figure {
    width: 70px;
    margin-right: 0;
    min-height:113px;
  }

  .footer-bar .inner figure img {
    height: 50px;
  }

  .footer {
    padding-top: 150px;
  }

  .footer .select-box {
    margin-bottom: 80px;
  }

  .footer .footer-menu {
    padding: 0;
  }

  .footer .contact-box {
      float: none;
      text-align: center;
      margin-top: 30px;
  }
}
@media only screen and (max-width: 1500px)
{
    
    
    .slogan-title {
        font-size: 30pt;
        line-height:60px;
    }
    .slogan-txt {
        font-size: 14pt;
        letter-spacing:2px;
    }
    .logo h1 {
        font-size: 18pt;
        left: 24%;
    }
    .desktop span {
        font-size: 12pt;
    }
    .navbar .container .upper-side .language {
        margin-left: 5px;
    }
}
@media only screen and (max-width: 1200px)
{
    .navbar .container .menu-home ul li a, .navbar .container .menu ul li a {
        font-size: 12pt;
    }
    .navbar .container .menu ul li {
        margin-left: 30px;
    }
}
@media only screen and (max-width: 1100px)
{
    .logo h1 {
        font-size: 19pt;
        left: 25%;
    }
    
}
@media only screen and (max-width: 1024px)
{
    .products-grid {
        gap: 20px;
    }
    .landing-container-services {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .landing-container {
        width: 96%;
        max-width: 1200px;
        margin: 0px auto;
    }
    .navbar .container .upper-side .logo img {
        width: 75px;
    }
    .navbar .container .menu ul li {
      margin-left: 25px;
    }
    .footer {
        background: url(../images/bg-footer.webp) 9% 22% repeat;
    }
    .footer .contact-box h5 {
 
      text-align:center;
    }
    .intro .content-box h4 {
        font-size: 30pt;
    }
    .benefits h4 {
        margin-bottom: 0px;
        line-height: 0.8;
    }
    .intro .content-box h4 span {
        font-size: 30pt;
    }
    .slogan {
        width: 80%;
    }
    .slogan-title {
    font-size: 30pt;
   
    }
  
    .groupfbye
    {
        top: 21%;    
    }
    /*.page-header .container h1
    {
        display:none;   
    }*/
    .contact-page{
        width: 100%;
        overflow: hidden;
    }
    .contact-box-top ul li {
        padding: 5px 16px 5px 10px;
    }
    .navbar .container .upper-side .hamburger {
        margin-left: 50px;
    }
    .navbar .container .upper-side .language{
        display: none;
    }
    .price-table table,
    .price-table tbody {
      display: block;
      width: 100%;
    }

    .price-table tr {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
    }

    .price-table td {
      width: 50%; /* 2 cột */
      box-sizing: border-box;

      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;

      text-align: left !important;
      padding: 15px 15px;
    }

    .price-table td img {
      object-fit: contain;
      flex-shrink: 0;
    }
}
@media only screen and (max-width: 1000px)
{
    .logo h1 {
        font-size: 16pt;
        left: 25%;
    }
    .navbar .container .upper-side .phone-email {
        display: none;
    }
    .contact-box-top ul li a {
        font-size: 9pt;
    }
    .logo {
        width: 70%;
    }
}
/* RESPONSIVE MOBILE FIXES */
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
  .side-navigation {
    width: 80vw;
  }
  
  
  .property-customization {

 

}


  .page-header .container h1 {
    font-size: 5vw;
  }

  .page-header .container .breadcrumb {
    width: calc(100% - 30px);
  }

  .navbar .container .upper-side .phone-email {
    display: none;
  }

  .navbar .container .upper-side .language {
    display: none;
  }

  .navbar .container .upper-side .hamburger {
    margin-left: auto;
  }

  .slider .slider-container .inner-elements .container .social-media {
    display: none;
  }

  .slider .slider-container .swiper-slide .container {
    padding-left: 15px;
    padding-right: 40px;
  }

  .slider .slider-container .swiper-slide .container figure {
    width: 100%;
    margin-left: 0;
    margin-top: 30px;
  }

  .benefits .col {
    /*width: 50%;*/
    flex-basis: auto;
    border-right: none;
  }

  .benefits .col:nth-child(odd) {
    margin-top: 0;
  }

  .apartment h2 {
    font-size: 9vw;
  }

  .apartment figure {
    margin: 15px 0;
  }

  .apartment h4 {
    margin-top: 30px;
  }

  .about-content h2 {
    font-size: 10vw;
  }

  .blog .post .post-image {
    margin-bottom: 30px;
  }

  .blog .post .post-content {
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .contact .map .holder iframe {
    width: 100%;
    height: 450px;
  }

  .side-navigation .menu ul li a {
    font-size: 5vw;
  }

  .side-navigation .menu ul li ul li a {
    font-size: 4vw;
  }

  .certificates figure {
    margin: 15px 0;
  }

  .footer .col-12 .creation {
    float: left;
    margin-top: 5px;
  }
  
}

@media only screen and (max-width: 990px)
{ 
    .contact-box-top {
        width: 18%;
    }
}
/*# sourceMappingURL=style.css.map */
@media only screen and (max-width: 768px)
{   
    .model-image-container {
        width: 82%;
        height: 92%;
    }
    .grid-background-mb{
        display: none;
    }
    .products-grid {
        gap: 12px;
    }
    .arch-container{
        width: 83%;
    }
    .contact-box-top ul li {
        background-image: linear-gradient(to bottom right, #a77113, #d5b069, #dfbe77, #a77113, #dfbe77);
    }
    .footer {
        padding-bottom: 120px;
    }
    .navbar .container .upper-side .phone-email {
        display: block;
    }
    .logo {
        width: 87%;
    }
    .logo h1 {
      font-size: 16pt;
    }
    .navbar .container .upper-side .phone-email {
      margin-left: 200px;
    }
    .contact-box-top {
        width: 30%;
    }
    .nav-bottom
    {
        position: fixed;
        bottom: 5px;
        left: 0;
        width: 100%;
        z-index: 999;
        display: block;
    }
    #btn-back-to-top {
        bottom: 120px;
    }
    .nav-bottom ul
    {
        overflow: hidden;
        width: 60%;
        max-width: 600px;
        margin: 0px auto;
        padding: 10px 5px;
        display: flex;
        background: #496d43;
        border-radius: 50px;
    }
    .nav-bottom ul li
    {
        text-align: center;
        list-style-type:none;
        width: 30%;
    }
    .nav-bottom ul li:hover
    {
        background-image: #e6d9bd;
    }
    .nav-bottom ul li a
    {
        color: #fff;
        font-size:11pt;
    }
    .nav-bottom ul li a span
    {
        display: block;
    }
    #direction_m a
    {
        color:#fff;
        cursor: pointer;
    }
    .icon-button i
    {
        background: #fff;
        width: 40px;
        height: 40px;
        border-radius: 50px;    
        color: #072c0d;
        padding-top: 12px;
    }
    
    
    .selected {
        color: #abe3a2!important;
        font-weight: 600!important;
        border-top: none!important;
    }
    .intro .content-box {
        margin-bottom: 50px;
    }
    .intro .content-box-2 {
        margin-bottom: 0px;
    }
    .benefits {
      padding: 80px 0 80px 0px;
    }
    .property-plans p {
 
     padding-right: 0px;}
     
    .slider_txt
    {
        display:none;
    }
    .footer {
        background: url(../images/bg-footer.webp) 39% 50% repeat;
    }
    .property-calculator .content-box h4 {
        margin-top: 50px;
    }
    .slogan {
        width: 80%;
    }
    .slogan-title {
        font-size: 30pt;
    }
    .slogan-txt {
        font-size: 12pt;
        letter-spacing: 2px;
    }
     .groupmenu_m
	{
		width:100%;
		overflow:hidden;    
		display:block; 
		
	}
	.contact .contact-form {
       
        padding-left: 3%;
    }
	.groupmenu_m ul
	{
		margin:0px;
		padding:0px;
	}
	.groupmenu_m ul li
	{
		width:32.8%;
		margin:0.2%;
		float:left;
		padding-top:3px;       
		text-align:center;    
		list-style-type:none;		
		border: 1px solid #072c0d;
		box-shadow: 0 0 20px rgb(235 207 167 / 20%);
        -webkit-transition: 0.25s ease-in-out;
        -moz-transition: 0.25s ease-in-out;
        -ms-transition: 0.25s ease-in-out;
        -o-transition: 0.25s ease-in-out;
		padding-top: 3px;
        padding-bottom: 5px;   
        background: rgba(0,0,0,0.2);    
	}
	.groupmenu_m ul.second li
	{
	    width:24.5%;
	    margin-top: 5px;
	}
	.groupmenu_m ul li a
	{
		color: #fff;
		text-decoration:none;		
		font-size:10pt;
	}
	.groupmenu_m ul li:hover
	{
		opacity:0.8;
	}
	.groupmenu_m ul li a span
	{
		display:block;
	}
	#direction_m, #subbar_m
	{
		cursor:pointer;	
		color:#fff;
	}
	
    #noti
    {
        width:95%;
        text-align:center;
        margin:0px auto; 
        margin-top:100px;   
    }
    .desktop-edit
    {
        display:none;    
    }
     .mobile-edit
    {
        display:block!important;    
    }
    .page-header .container h1
    {
        margin-top: 0px; 
    }
    #instafeed-container
    {
        text-align:center;    
    }
    .page-header {
      height: 300px;
    }
 
}
@media only screen and (max-width: 610px)
{
    .image-container{
        width: 100%;
        display: grid;
    }
    .servicesimg-2, .video {
        width: 100%;
    }
    .servicesimg-pedi {
        width: 100%;
        float: none;
    }
    .row_note {
        width: 100%;
        float: none;
        margin-right: 0;
        overflow: hidden;
    }
    .preloader .inner figure {
      margin-top: -380px;
    }
    .servicesimg-pedi img {
        width: 100%;
        float: none;
    }
    .gallery-item img {
        width: 100%;
        height: 100%;
    }
    .product-card {
      /*flex: 0 0 calc(100% - 47px);
      max-width: 290px;*/
      flex: auto;
        width: 100%;
        max-width: none;
    }
    .arch-container {
        width: 100%;
        /*margin-left: 50px;*/
    }
    .servicesgroup {
        padding: 0px;
    }
    .navbar .container .upper-side .phone-email {
        display: none;
    }
    ul.benefits-list{
        padding-left: 0px;
    }
    .benefits-list li {
        gap: 8px;
        align-items: flex-start;
    }
    .model-image-container {
        width: 82%;
        height: 92%;
        top: 10%;
    }
    .benefits-right {
        height: 420px;
    }
    .products-grid {
        gap: 20px;
    }
    .vegan-tag-pedicure {
        left: 50px;
      }
    .hero-content { flex-direction: column; align-items: center; justify-content: center; gap: 30px; }
    .section-hero {
        height: 750px;
    }
    .hero-text {
        margin-top: 0px;
    }
    .brand-sub {
        display: none;
    }
    .eco-badge {
        margin-top: 5px;
    }
    .hero-content {
        gap: 400px;
    }
    .price-table td {
        padding: 8px 10px;
    }
    .recent-gallery figure {
        margin-top: 0px;
    }
    .s {
        width: 100%;
    }
    .nav-bottom ul {
        width: 90%;
    }
    #btn-back-to-top {
        bottom: 110px;
    }
    .logo h1 {
        font-size: 12pt;
        left: 28%;
    }
    
    .contact-box-top{
        width: 70%;
        display: none;
    }
    .navbar .container .upper-side .hamburger {
        margin-left: 0px;
    }
    .desktop
    {
      display: none;
    }
    .mobile{
      display: block;
    }
    .logo h1 span{
        font-size: 17pt;
    }
    .logo h1 span.slogan-logo{
        font-size: 8pt;
        background: linear-gradient(45deg, #fff, #fff, #fff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        text-transform: capitalize;
    }
    .signup-fixed{
        right:30px;
        transform:translateY(-50%) rotate(-90deg);
        transform-origin:right center;
    }
    #subbar
    {
       top: 25%; 
       width: 150px;
    }
    #book_online
    {
        top: 50%;
        width: 175px;
    }
    .side-navigation {
      background: url(../images/bg-footer.webp) 8% 0px repeat;
      background-size: cover;
    }
    .counter {
        max-width: 280px;
        margin: 0px auto;
        margin-top: 20px;
        float: none;
    }
    .video_home
    {
        width: 100%;
        float: none;   
        margin-left: 0; 
    }
    .servicesgroup{
        background: #fff;
    }
    .property-customization {
      background: url(../images/bg-slogan.webp) center 80% no-repeat;
      background-size: 150%;
    }
    .img-mb{
        display: none;
    }
 
    .footer .contact-box ul {
        float: none;
        overflow: hidden;
        width: 100%;
        max-width: 135px;
        margin: 0px auto;
    }
   .slider {
       
        height: 60vh!important;
        min-height:639px;
    }
    
    .navbar .container .upper-side .logo img {
      width: 90px;
    }
    .property-plans p 
    {
     
     padding-right: 0px;
     }
     .servicestitle
     {
        font-size:28pt;
            
     }
     .property-calculator .content-box h4
     {
        margin-top:30px;    
     }
     .row_svpage
     {
        font-size:12pt;
        width: 100%;   
        overflow: hidden;
     }
     .row_name_box{
        width: 55%;
        float: left;  
     }
     .price
     {
        font-size:12pt;
        width: 45%;
        float: right;   
        text-align: right;
     }
     .p-5
     {
        padding:0px!important;    
     }
     .footer .contact-box
     {
        float:none;
        text-align:center;    
     }
     .footer .footer-menu li a
     {
        float:none;    
     }
     .contact-box ul
     {
        
     }
     .footer
     {
        text-align:center;    
     }
     .footer ul li
     {
        text-align:center;    
     }
     .slider .slider-container .swiper-slide .container h1
     {
        margin-top:170px;    
     }
     .group-ser
     {
        /*margin-top:40px;  */  
     }
     .property-plans h4 {
   
        margin-top: 40px;
     }
     .intro .content-box h4 span, .intro .content-box h4{
        font-size: 27pt;
    }
    .intro .content-box-2 h4  {
        font-size: 16pt;
        margin-top: 0px;
    }
    .intro figure {
        margin-bottom: 0px;
    }
     
    .groupfbye
    {
        display: none;
    }    
    #formnotify, #formnotifyS
 
    {
        left:54%;  
     }
     #notification
     {
        font-size:13pt;    
     }
     .counterimg {
       
        margin-right: 29px;
    }
    .benefits .col {
        margin: 6%;
    }
    .slogan {
        width: 79%;
        float: none;
        margin: 0px auto;
        overflow: hidden;
        padding: 2%;
        margin-top: 67px;
        margin-bottom: -64px;
    }
    .vegan-tag, .vegan-tag-pedicure {
        color: #000000;
        font-weight: 600;
    }
    .page-header .container h1{
        display: block;
    }
}
@media only screen and (max-width: 450px)
{
  .preloader .inner figure {
    margin-top: -330px;
  }

  .benefits h4, .property-calculator .content-box h4, .recent-gallery h4 {
      font-size: 25pt;
  }
  .price-table {
      font-size: 11pt;
  }
  .benefits-left {
      padding: 0px;
  }
  .benefits-left h2, .header-left h2 {
      font-size: 25px;
      margin-bottom: 10px;
  }
  .model-image-container {
      width: 92%;
      height: 92%;
      top: 10%;
      right: 10px;
  }
  .section-products {
      padding: 60px 20px;
  }
  .landing-container-services {
      padding: 50px 30px;
  }
  .hero-right-card {
      padding: 10px;
  }
  .product-circle-mock {
    width: 300px;
    height: 360px;
  }
  .morph-img{
    width: 91%;
    height: 95%;
  }
}
@media only screen and (max-width: 400px)
{
    .navbar .container .upper-side
    {
        padding:10px 0px;
    }
    .group-first
    {
        margin-top:0px;
    }
    .slider
    {
        /*height:40vh;
        min-height:300px;*/
    }
     .contact-box ul
     {
          
     }
     .slider .slider-container .swiper-slide .container h1
     {
        margin-top: 259px;
     }
      
    .footer-bar .inner p
    {
       
       font-size:14px;
    }
    contact-page
    {
        width: 100%;
        max-width: 320px;
        margin: 0px auto;    
    }
    .price-table td img {
        width: 40px;
    }
    
}
@media only screen and (max-width: 380px)
{
    .intro .content-box h4 span, .intro .content-box h4 {
        font-size: 17pt;
    }
    .intro .content-box h4 span, .intro .content-box h4 img{
        width: 50px;
    }
    .slogan-title {
        font-size: 20pt;
    }
      .counterimg {
        margin-right: 8px;
    }
    .logo h1 {
        left: 28%;
    }
    .logo h1 span.slogan-logo {
        font-size: 7pt;
    }
    .product-card {
        flex: 0 0 calc(100% - 40px);
        flex: auto;
    }
}
@media only screen and (max-width: 360px)
{
    .product-circle-mock {
        width: 260px;
        height: 320px;
    }
}
@media only screen and (max-width: 350px)
{
    .intro .content-box h4 span, .intro .content-box h4 {
        font-size: 16pt;
    }
    .logo h1 span.slogan-logo {
        font-size: 6pt;
    }
    .price-table td {
        padding: 8px 0px;
    }
    .landing-container {
        width: 100%;
        max-width: 1200px;
        margin: 0px auto;
    }
    .preloader .inner figure {
      margin-top: -380px;
    }
}