html{ 
overflow-x: hidden;
} 

body{ 
overflow-x: hidden;
font-family: "Raleway", serif;
text-transform: lowercase;
} 


h1, h2, h3, h4, h5, h6{
font-family: "Raleway", serif;
}

a {
text-decoration: none !important;
}

.img-responsive {
display: block;
max-width: 100%;
height: auto;
}

.heading{
font-size: 70px;
font-weight: 300;
color: #000000;
line-height: 1;
margin-bottom: 0px;
text-transform: lowercase;
}

.center-heading{
text-align: center;
}

/*----------- button -------------*/

.butn-default {
display: inline-block;
text-align: center;
background: #000;
transition: 0.3s ease-out;
z-index: 1;
padding: 10px 30px 10px;
border-radius: 50px;
font-size: 13px;
color: #fff;
border: 1px solid transparent;
position: relative;
text-transform: lowercase;
line-height: 1;
font-weight: 400;
}

.butn-default:after {
position: absolute;
content: "";
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: #A87B4F;
border-radius: 50px;
z-index: -1;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}

.butn-default:hover:after {
-webkit-transform: scale(1);
transform: scale(1);
}

.butn-default:hover {
border-color: #A87B4F;
color: #fff;
border-radius: 50px;
}


/*--------------- header ---------------*/

.header-area{
padding: 15px 0px;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 9;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}

.logo a{
display: inline-block;
}

.logo a img {
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width: 130px;
}

.stick{
box-shadow: 0 1px 15px rgba(0, 0, 0, 0.2);
background: #fff;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
padding: 10px 0px;
}

.stick .logo a img {
width: 120px;
}

.main-menu{
display: flex;
justify-content: end;
align-items: center;
}

.main-menu ul {
margin: 0;
}

.main-menu ul li {
margin-right: 25px;
display: inline-block;
}

.main-menu ul li a {
color: #fff;
font-weight: 300;
font-size: 15px;
padding: 0;
transition: all 0.2s ease-In;
}

.main-menu ul li a:hover {
color: #fff;
}

.dropdown .nav-link .fa-angle-down {
margin-left: 3px;
font-size: 13px;
}

.dropdown-submenu {
position:relative;
}

.dropdown-submenu>.dropdown-menu {
top:0;
left:100%;
margin-top:-6px;
}

.dropdown-menu {
display: block;
opacity: 0;
visibility: hidden;
transform: translateY(40px);
transition: all .4s ease-out;
padding: 10px 12px;
width: 220px;
}

.dropdown:hover .dropdown-menu{
opacity: 1;
visibility: visible;
transform: translateY(3px);
}

.dropdown-menu a {
color: rgb(0 0 0 / 70%) !important;
margin-bottom: 8px;
display: block;
font-size: 14px !important;
}

.dropdown-menu a:hover {
color: #000 !important;
background-color: transparent;
transform: translateX(5px);
}

.dropdown-menu a:last-child {
margin-bottom: 0px;
}


.header-butn{
text-align: right;
}

.header-butn a{
background: #000;
transition: 0.3s ease-out;
padding: 12px 15px 12px;
border-radius: 50px;
font-size: 12px;
color: #fff;
display: inline-block;
line-height: 1;
}

.header-butn a:hover {
transform: scale(1.03);
color: #fff;
box-shadow: 0 1px 7px 2px rgba(40, 44, 63, .08);
}


/*-----------*/

.banner-area{
background: #A87B4F;
padding: 100px 0px 80px;
position: relative;
}

.banner-area .row{
position: relative;
justify-content: space-between;
}

.banner-content{
position: absolute;
left: 0;
right: 0;
top: 50px;
margin: 0 auto;
width: 450px;
z-index: 2;
}

.banner-content h1{
font-size: 90px;
color: #ffffff;
line-height: 1;
margin-bottom: 0px;
text-transform: lowercase;
}

.banner-content p{
text-transform: lowercase;
font-size: 12px;
letter-spacing: 1px;
margin: 30px 0px 0px;
color: #fff;
width: 50%;
}

.banner-content span{
border: 1px solid rgb(255 255 255 / 30%);
width: 300px;
height: 300px;
display: block;
border-radius: 50%;
position: absolute;
bottom: -110px;
left: -30px;
}


.banner-imagebox{
padding-bottom: 30px;
position: relative;
display: flex;
justify-content: end;
margin-top: 40px;
}

.imagebox-1{
width: 85%;
}

.imagebox-2{
position: absolute;
bottom: 45px;
left: 0;
width: 42%;
z-index: 0;
visibility: hidden;
}

.imagebox-3{
position: absolute;
bottom: 0;
left: 150px;
width: 35%;
z-index: 1;
visibility: hidden;
}

.banner-imagebox-right{
position: relative;
}

.imagebox-4{
width: 64%;
}

.imagebox-5{
position: absolute;
bottom: 70px;
right: 0;
width: 54%;
visibility: hidden;
z-index: 1;
}

.imagebox-6{
width: 50%;
margin-left: 25%;
visibility: hidden;
z-index: 0;
}



.stamp-move{
animation: loaderRotate 25s linear infinite;
position: absolute;
bottom: -130px;
right: 15px;
width: 100px;
}

@keyframes loaderRotate {
0%{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(1turn);
-moz-transform: rotate(1turn);
-o-transform: rotate(1turn);
transform: rotate(1turn);
}
}

/*-----------*/

.about-area{
margin-top: 50px;
}

.about-area .heading { 
margin-bottom: 10px;
}

.about-area span{
text-transform: lowercase;
font-size: 14px;
letter-spacing: 1px;
display: block;
margin-bottom: 40px;
}

.about-area p{
font-family: "Raleway", serif;
color: #383838;
font-size: 18px;
font-weight: 200;
line-height: 1.4;
margin-bottom: 30px;
}

.about-area p:last-child{
margin-bottom: 0px;
}

/*-----------*/

.unique-area{
background: url(../img/unique-bg.webp) no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
padding: 200px 0px;
text-align: center;
}

.unique-area img{
width: 15px;
}

.unique-area p{
color: #fff;
text-transform: lowercase;
font-size: 14px;
letter-spacing: 1px;
margin: 3px 0px 10px;
}

.unique-area h4{
font-size: 38px;
color: #ffffff;
line-height: 1.3;
margin-bottom: 0px;
text-transform: lowercase;
}

/*-----------*/

.contact-area{
background: url(../img/contact-bg.webp) no-repeat;
background-size: cover;
background-position: center;
padding: 60px 0px;
}

.contact-area .row{
position: relative;
}

.contact-area .row:before{
content: '';
position: absolute;
border: 1px solid #fff;
left: 50%;
top: 50%;
width: 98%;
height: 102%;
margin: 0 auto;
transform: translate(-50%, -50%);
}

.contact-text{
padding: 50px;
-webkit-backdrop-filter: saturate(75%) blur(20px);
backdrop-filter: saturate(70%) blur(20px);
display: flex;
justify-content: space-between;
flex-direction: column;
height: 100%;
}

.contact-text p{
color: #fff;
text-transform: lowercase;
font-size: 14px;
letter-spacing: 1px;
margin: 3px 0px 10px;
}

.contact-text h4{
font-size: 37px;
color: #ffffff;
line-height: 1.3;
margin-bottom: 0px;
font-style: italic;
}

.contact-text h4 span{
display: block;
font-style: normal;
text-transform: lowercase;
}

.no-right{
padding-right: 0px;
}

.no-left{
padding-left: 0px;
}

.popright-gap {
padding-right: 6px;
}

.popleft-gap {
padding-left: 6px;
}

.contact-form{
background: #fff;
padding: 50px 30px;
}

.contact-form .form-field {
margin-bottom: 12px;
}

.contact-form .form-field .form-control {
box-shadow: none;
height: 45px;
border: 1px solid rgb(0, 0, 0, .1);
font-size: 13px;
color: rgb(0, 0, 0, .7);
text-transform: lowercase;
}

.contact-form .form-field .form-control::-ms-input-placeholder {
color: rgb(0, 0, 0, .4);
}

.contact-form .form-field .form-control::placeholder {
color: rgb(0, 0, 0, .4);
}

.contact-form .form-field textarea{
height: 110px !important;
}

.contact-form button{
width: 100%;
}

/*-----------*/

.project-area{
margin: 60px 0px 70px;
}

.project-tabs ul{
justify-content: center;
padding: 18px 0px;
margin: 30px 0px 40px;
border-top: 1.4px solid #D9D9D9;
border-bottom: 1.4px solid #D9D9D9;
}

.project-tabs ul li{
margin: 0px 12px;
}

.project-tabs ul li a{
background: #C3C3C3;
transition: 0.3s ease-out;
padding: 10px 30px 10px;
border-radius: 50px;
font-size: 13px;
color: #fff;
text-transform: lowercase;
letter-spacing: 1px;
display: block;
}

.project-tabs ul li a:hover{
transform: scale(1.03);
}

.project-tabs ul li .active{
background: #000;
}


.project-box{
position: relative;
margin-bottom: 30px;
}

.project-box .img-responsive{
border-radius: 6px 6px 0px 0px;
}

.project-box-detail{
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
padding: 12px;
display: flex;
align-items: end;
justify-content: space-between;
}

.project-box-detail div{
width: 85%;
}

.project-box-detail div span{
color: #fff;
text-transform: lowercase;
font-size: 13px;
letter-spacing: 1px;
display: block;
}

.project-box-detail div h4{
font-size: 34px;
font-weight: 300;
color: #ffffff;
line-height: 1.1;
margin: 15px 0px 8px;
text-transform: lowercase;
}

.project-box-detail ul{
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
}

.project-box-detail ul li{
color: #fff;
text-transform: lowercase;
font-size: 11px;
letter-spacing: 1px;
margin-right: 7px;
}

.project-box-detail small{
background: #363532;
border: 1px solid rgb(255 255 255 / 30%);
border-radius: 50%;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease-In;
}

.project-box-detail small img{
width: 15px;
transition: all 0.2s ease-In;
}

.project-box:hover .project-box-detail small {
transform: rotate(-45deg);
background: #fff;
border-color: #fff;
}

.project-box:hover .project-box-detail small img{
filter: brightness(0) saturate(100%);
}

.commer-item{
display: none;
}

.resident-item{
display: none;
}

/*-----------*/

.design-area{
margin: 60px 0px;
}

.design-head{
text-align: center;
margin-bottom: 30px;
}

.design-head span{
color: #A87B4F;
text-transform: lowercase;
font-size: 13px;
letter-spacing: 1px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 30px;
line-height: 1;
}

.design-head span img{
width: 100px;
margin-top: -4px;
margin-right: 8px;
}

.design-head span img:last-child{
transform: rotate(180deg);
margin-left: 8px;
margin-right: 0px;
}

.design-box{
position: relative;
margin-bottom: 30px;
}

.design-box div{
overflow: hidden;
}

.design-box div img {
transition: transform 0.4s ease-in-out 0s;
}

.design-box:hover div img {
transform: scale(1.03);
}

.design-box p {
background: #000;
color: #fff;
text-transform: lowercase;
font-size: 14px;
letter-spacing: 1px;
text-align: center;
line-height: 1;
padding: 20px 5px 15px;
margin: 0;
position: absolute;
bottom: 0px;
left: 0;
right: 0;
width: 100%;
transition: 0.4s ease;
}

.design-box:hover p{
background: #A87B4F;
}

.design-item{
display: none;
}

/*-----------*/

.nextproject-area{
margin: 80px 0px 40px;
}

.nextproject-area h4{
color: #A87B4F;
font-size: 130px;
line-height: 1;
margin-bottom: 0px;
text-transform: lowercase;
}

.nextproject-area h4 span{
text-transform: lowercase;
color: #000;
font-style: italic;
font-size: 110px;
}

/*-----------*/

.quote-area{
margin: 60px 0px;
}

.quote-content{
display: flex;
align-items: center;
overflow: hidden;
}

.quote-content p{
color: #000;
text-transform: lowercase;
font-size: 56px;
font-weight: 200;
margin: 0;
line-height: 1;
margin-top: 20px;
}

.quote-content img{
width: 120px;
margin: 0px 20px;
}
























/*-----------*/

.footer-contact p{
color: rgb(0, 0, 0, .7);
font-size: 14px;
text-align: right;
position: relative;
margin: 0;
padding-bottom: 15px;
}

.footer-contact p:before{
position: absolute;
content: '';
background: #A87B4F;
width: 80px;
height: 1px;
bottom: 0;
right: 0;
}

.footer-contact a{
background: #000;
border-radius: 50px;
transition: 0.3s ease-out;
padding: 14px 20px 11px;
font-size: 12px;
color: #fff;
display: inline-flex;
align-items: center;
line-height: 1;
margin-top: 12px;
margin-right: 5px;
}

.footer-contact a img{
width: 15px;
margin-right: 5px;
margin-top: -3px;
}

.footer-contact a:hover {
transform: scale(1.03);
color: #fff;
}


.footer-copyright{
border-top: 1px solid #A87B4F;
padding: 20px 0px;
margin-top: 40px;
}

.footer-copyright p{
font-size: 13px;
color: rgb(0, 0, 0, .4);
margin: 0;
line-height: 1;
}

.footer-copyright p span{
color: #000;
}

.footer-social{
padding-left: 0;
list-style: none;
margin: 0px;
display: flex;
justify-content: end;
align-items: center;
}

.footer-social li{
margin-left: 5px;
}

.footer-social li a{
transition: all 0.2s ease-In;
color: #C3C3C3;
width: 32px;
height: 32px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
border-radius: 5px;
border: 1px solid rgb(0 0 0 / 12%);
}

.footer-social li a:hover {
color: #fff;
background: #000;
border-color: #000;
}



/*---------------- enquire now btn --------------*/

.enquire-button{
position: fixed;
z-index: 1;
bottom: 50px;
right: 30px;
}

.enquire-button a{ 
display: inline-block;
animation-name: bounce-3;
animation-timing-function: ease;
animation-duration: 3s;
animation-iteration-count: infinite;
}

.enquire-button a span{ 
background: #000;
color: #fff;
border-radius: 100%;
width: 80px;
height: 80px;
padding: 15px 8px 8px;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
font-size: 16px;
position: relative;
line-height: 1.2;
box-shadow: 0 3px 11px 5px rgba(40,44,63,.09);
transition: all 0.4s ease;
font-family: "Raleway", serif;
}

.enquire-button a:hover span{ 
background: #A87B4F;
color: #fff;
}

@-webkit-keyframes bounce-3{
0%{transform:translateY(0)}
50%{transform:translateY(-5px)}
100%{transform:translateY(0)}
}

/*---------- thankyou ---------*/

.thankyou-page{
height: 100vh;
position: relative;
}

.thankyou-content{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
text-align: center;
}

.thankyou-content h1{
color: #A87B4F;
font-size: 110px;
line-height: 1;
margin-bottom: 5px;
text-transform: lowercase;
text-shadow: 1px 2px 2px rgb(0, 0, 0, .2);
}

.thankyou-content p{
color: rgb(0 0 0 / 70%);
font-size: 14px;
margin: 0;
}

.thankyou-content label{
color: #000;
font-size: 20px;
display: block;
margin-top: 20px;
font-family: "Raleway", serif;
}

.thankyou-content div:nth-child(2) p{
margin-top: 10px;
}

.thankyou-content div:nth-child(2) p a{
color: #000;
transition: 0.3s ease-out;
}

.thankyou-content div:nth-child(2) p a:hover{
color: #A87B4F;
}

.thankyou-content div .butn-default{
margin-bottom: 5px;
}


/*---------- request popup ---------*/

.enquiry-popup{
padding-right: 0 !important;
}

.enquiry-popup .pop-close{
border: 0;
background: none;
position: absolute;
top: 10px;
right: 10px;
outline: none;
color: #000;
transition: all 0.2s ease-In;
line-height: 1;
}

.enquiry-popup .pop-close:hover{
color: #000;
}

.book-noright{
padding-right: 0;
}

.book-noleft{
padding-left: 0px;
}

.popright-gap {
padding-right: 5px;
}

.popleft-gap {
padding-left: 5px;
}

.enquiry-popup .modal-content {
background: #fff url(../img/popup-vector.webp) no-repeat;
background-position: right top;
border: 0px;
border-radius: 10px;
}

.enquiry-popup .modal-body{
padding: 30px 25px;
overflow: hidden;
}

.enquiry-popup .modal-body .heading {
font-size: 34px;
margin-bottom: 20px;
}

.booking-image{
height: 100%;
}

.booking-image .img-responsive{
border-radius: 10px 0px 0px 10px;
height: 100%;
width: 100%;
object-fit: cover;
}

.enquiry-popup .contact-form {
background: transparent;
padding: 0px;
}

.enquiry-popup .contact-form .form-field textarea {
height: 80px !important;
}