/*===============================================
Template Name: Dream House - Architecture & Interior Template
Author:  https://templatemostar.net/user/dreamit-solution
Description: Description
Version: 1.0.0
Text Domain: Dreamhouse
Tags: agency, consulting, digital agency, digital marketing, digital marketing agency, marketing, marketing agency, media agency, portfolio, seo, seo agency, seo agency theme, seo marketing, smm, social media marketing agency.
================================================*/

/*TABLE OF CONTENTS*/
/*=====================
01. Dreamhouse Header Top CSS 
02. Dreanhouse Header Menu CSS
03. Dreamhouse Slider CSS 
04. Dreamhouse About CSS
05. Dreamhouse Counter CSS
06. Dreamhouse Apartment Plan Css
07. Dreamhouse Inside Area Css
08. Dreamhouse Property Plan Css
09. Dreamhouse Our Team Css
10. Dreamhouse Process Area Css
11. Dreamhouse Team Area Css
12. Dreamhouse Faq Area Css
13. Dreamhouse Brand Section Css
14. Dreamhouse Call Do Section Css
15. Dreamhouse Form Box Css
16. Dreamhouse Skill Area Css
17. Dreamhouse Blog Area Css
18. Dreamhouse footer Area Css
19. Dreamhouse Subscribe Area Css
20. Dreamhouse Lines CSS
21. Dreamhouse Prossess Ber Css
22. Dreamhouse Scrollup Section
23. Dreamhouse Bounce Animation Css 
24. Dreamhouse animation CSS start here
25. Dreamhouse Breadcumb Area Css
26. Dreamhouse abouts_areas Css
27. Dreamhouse Feture-Area Css
28. Dreamhouse Pricing Section Css
29. Dreamhouse Web Development Section CSS
30. Dreamhouse Contact  US Css
31. Dreamhouse Blog Sidber Widget CSS
32. Dreamhouse Case Study Details Css
33. Dreamhouse Search Box Css
34. Dreamhouse Loader Css
=======================*/


/*<!--==============================================================-->
 <!-- Dreamhouse reset code & common CSS start here -->
<!--==============================================================-->*/

.dreamhouse-section-sub-title {
    display: flex;
    align-items: center;
}

.dreamhouse-section-sub-title h5 {
    font-size: 18px;
    line-height: 22px;
    color: #c39e75;
    font-weight: 500;
    font-family: "Poppins";
    margin: 0px 18px 0 0;
}

.dreamhouse-section-sub-title.style-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.dreamhouse-section-sub-title.style-2 img:nth-child(2) {
    position: absolute;
    transform: rotateY(180deg);
    left: 34.11%;
    top: 2px;
}

.dreamhouse-section-sub-title.style-2 img:nth-child(3) {
    position: absolute;
    right: 35.7%;
}

.dreamhouse-section-sub-title.style-twoo h5 {
    margin: auto;
}

.about-sub-title.style-two h5 {
    font-size: 18px;
    line-height: 22px;
    color: #c39e75;
    font-weight: 500;
    margin: 0;
}

.dreamhouse-section-sub-title.style-three h5 {
    font-size: 18px;
    line-height: 26px;
    color: #baa360;
    font-weight: 500;
    font-family: "Raleway";
    margin: 0;
}

.dreamhouse-section-title h1 {
    font-size: 40px;
    line-height: 48px;
    color: #252525;
    font-weight: 600;
    margin: 17px 0 0;
    width: 80%;
}

.dreamhouse-section-title.style-two h1 {
    margin: 0;
}

.dreamhouse-section-title.style-three h1 {
    font-size: 42px;
    line-height: 56px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
}

.dreamhouse-inner-section-tilte h1 {
    font-size: 55px;
    line-height: 30px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 400;
    font-family: "Marcellus";
    margin: 0;
    display: inline-block;
}

.dreamhouse-inner-section-sub-tilte li {
    display: inline-block;
    position: relative;
}

.dreamhouse-inner-section-sub-tilte a {
    display: inline-block;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Raleway";
    margin: 37px 22px 55px;
    position: relative;
}

.dreamhouse-inner-section-sub-tilte li:first-child:before {
    position: absolute;
    content: '';
    top: 49px;
    right: -11px;
    width: 12px;
    height: 2px;
    background: #fff;
}

.dreamhouse_nav_manu {
    transition: .5s;
    z-index: 2;
    position: relative;
    padding: 0 70px 0;
    margin-bottom: -95px;
    border-bottom: 1px solid rgba(16,18,16,0.10196078431372549);
}

header.header-manu-section.sticky {
    left: 0;
    margin: auto;
    position: fixed !important;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.1);
    background: #000000!important;
    transition: .5s !important;
    z-index: 99;
    -webkit-animation: 500ms running fadeInDown;
    animation: 500ms running fadeInUp;
    animation-name: slideInDown;
}

header.header-manu-section.sticky:before {
    width: 0;
}

header.header-manu-section.style-two.sticky {
    background: #fff !important;
}

header.header-manu-section.style-three.sticky {
    background: #00000054 !important;
    backdrop-filter: blur(5px);
}

.sticky nav.header-menu ul li {
    padding: 24px 8px 24px 8px;
}

.sticky nav.header-menu ul li:last-child {
    padding: 24px 0px 24px 8px;
}

.sticky nav.header-menu ul li:first-child a{
    color: #fff;
}

.sticky .header-menu-sign-up button {
    font-size: 16px;
    padding: 10px 32px;
    background: #d6975f;
    transition: .5s;
}

.sticky .header-menu-sign-up button:hover {
    color: #fff;
}

.sticky .dreamhouse_menu>ul>li>a {
    color: #fff;
}

header.header-manu-section.sticky.style-three nav.header-menu ul li {
    padding: 24px 8px 24px 8px;
}

.sticky .header-button a {
    background: #ffde5d;
}

.sticky .header-button a i {
    color: #fff;
}

.mobile-menu.mean-container {
    overflow: hidden;
}

/*<!--==============================================================-->
 <!-- Dreamhouse reset code & common CSS start here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Header Top CSS Start Here -->
<!--==============================================================-->*/

header.header-top-section {
    background-color: #ffffff;
}

.header-top-social ul li {
    display: inline-block;
    margin: 15px 14px 15px 0;
}

.header-top-social ul li a {
    font-size: 16px;
    line-height: 24px;
    color: #252525;
    font-family: "Font Awesome 5 Free";
    display: inline-block;
    transition: .5s;
}

.header-top-social ul li a:hover {
    color: #c39e75;
    filter: hue-rotate(360deg);
}

.header-top-info {
    text-align: right;
}

.header-top-info ul li {
    display: inline-block;
    margin: 0 0 0 24px;
    color: #414141;
    font-family: "Poppins";
    font-size: 14px;
}

.header-top-info ul li a {
    font-size: 14px;
    line-height: 24px;
    color: #414141;
    font-weight: 400;
    font-family: "Poppins";
    display: inline-block;
    transition: .5s;
}

.header-top-info ul li a:hover {
    color: #c39e75;
    filter: hue-rotate(360deg);
}

.header-top-info ul li i {
    color: #c39e75;
    padding-right: 6px;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Header Top CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Header Menu CSS End Here -->
<!--==============================================================-->*/

header.header-manu-section {
    background-color: #c39e75;
    position: relative;
    z-index: 100;
}

header.header-manu-section:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 540px;
    height: 100%;
    background-color: #252525;
    z-index: -1;
}

nav.header-menu {
    text-align: right;
}

nav.header-menu ul li {
    display: inline-block;
    padding: 36px 8px 36px 8px;
    position: relative;
    transition: .4s;
}

nav.header-menu ul li:hover .submenu{
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
}

nav.header-menu ul li:last-child {
    padding: 36px 0px 36px 8px;
}

/* Submenu Start Here */

.submenu {
    position: absolute;
    top: 99px;
    left: 0;
    width: 205px;
    background: #fff;
    z-index: 50;
    border-top: 3px solid #c39e75;
    transition: .4s;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
    transform: translateY(20%) scale(.8);
    text-align: left;
}

.sticky .submenu {
    top: 74px;
}

nav .submenu ul li {
    display: block;
    width: 100%;
    background: #fff;
    padding: 8px 20px !important;
    transition: .4s;
    position: relative;
    z-index: 1;
}

nav .submenu ul li:last-child {
    padding: 8px 20px;
}

nav .submenu ul li:before {
    position: absolute;
    content: '';
    width: 0%;
    height: 100%;
    background: #c39e75;
    top: 0;
    right: -15px;
    transform: skewX(-35deg);
    transition: .4s;
    z-index: -1;
}

nav .submenu ul li:after {
    position: absolute;
    content: '';
    width: 0%;
    height: 100%;
    background: #c39e75;
    top: 0;
    left: -15px;
    transform: skewX(-35deg);
    transition: .4s;
    z-index: -1;
}

nav .submenu ul li a {
    color: #0d0e14 !important;
    transition: .4s;
}

nav .submenu ul li:hover a{
    color: #fff !important;
}

nav .submenu ul li:hover:before,
nav .submenu ul li:hover:after {
    background: #c39e75;
    filter: hue-rotate(360deg);
    width: 58%;
}

/* Submenu End Here */

nav.header-menu ul li a {
    font-size: 16px;
    line-height: 24px;
    color: #fff;
    padding: 10px 6px;
    font-weight: 500;
    font-family: "Poppins";
    transition: .5s;
}

nav.header-menu ul li:first-child a {
    color: #252525;
}

nav.header-menu ul li:last-child a {
    padding: 10px 0px 10px 6px; 
}

nav.header-menu ul li a:hover {
    color: #252525;
    filter: hue-rotate(360deg);
}

.header-menu-sign-up {
    text-align: right;
}

.header-menu-sign-up button {
    font-size: 14px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Poppins";
    display: inline-block;
    padding: 38px 32px;
    background: #252525;
    transition: .5s;
    border: none;
}

.header-menu-sign-up button i {
    padding-right: 6px;
}

.header-menu-sign-up button:hover {
    color: #c39e75;
    filter: hue-rotate(360deg);
}

/*<--===================== Sign Up CSS Start Here =====================-->*/

input[type=text], input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
  }
  
  /* Add a background color when the inputs get focus */
  input[type=text]:focus, input[type=password]:focus {
    background-color: #ddd;
    outline: none;
  }

  
  /* Float cancel and signup buttons and add an equal width */
  .cancelbtn, .signupbtn {
    float: left;
    width: 100%;
  }
  
  /* The Modal (background) */


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px);
    overflow: auto;
    background-color: #00000091;
    padding-top: 50px;
    z-index: 999;
}

.modal i {
    transform: rotate(45deg);
    display: inline-block;
}
  
  /* Modal Content/Box */
  .modal-content {
    background-color: transparent;
    margin: 4% auto 10% auto;
    border: 1px solid #e3e3e3;
    width: 480px;
}

.modal .container {
    padding: 50px;
}

.modal .container h1 {
    color: #fff;
    font-size: 29px;
    font-weight: 700;
    margin: 0;
}

.modal .container p {
    margin: 10px 0 0 0;
    color: #fff;
}

.modal .container hr {
    margin: 30px 0;
    background: #fff;
    border: none;
}

.modal .container label {
    color: #d6975f;
    font-size: 16px;
    font-weight: 400;
}

.modal .container input {
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    margin: 6px 0;
    padding: 14px;
}

.modal .container input::placeholder {
    color: #9b9b9b;
}

.modal .container p a {
    display: inline-block;
    color: #1877f2 !important;
    font-weight: 600;
    margin-bottom: 20px;
}

.clearfix {
    display: flex;
    align-items: center;
}

.cancelbtn {
    background-color: #252525;
    padding: 14px 32px;
    display: inline-block;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Poppins";
    position: relative;
    z-index: 1;
    transition: .5s;
    overflow: hidden;
    border: none;
    border-radius: 5px;
    margin-right: 30px;
}

.cancelbtn:hover {
    filter: hue-rotate(360deg);
}

.cancelbtn:before {
    position: absolute;
    content: '';
    top: 0;
    left: -16px;
    width: 0%;
    height: 100%;
    background: #d6975f;
    transform: skewX(-30deg);
    z-index: -1;
    transition: .5s;
}

.cancelbtn::after {
    position: absolute;
    content: '';
    top: 0;
    right: -16px;
    width: 0%;
    height: 100%;
    background: #d6975f;
    transform: skewX(-30deg);
    z-index: -1;
    transition: .5s;
}

.cancelbtn:hover:before ,
.cancelbtn:hover:after {
    width: 60%;
} 

.signupbtn {
    background-color: #d6975f;
    padding: 14px 32px;
    display: inline-block;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Poppins";
    position: relative;
    z-index: 1;
    transition: .5s;
    overflow: hidden;
    border: none;
    border-radius: 5px;
}

.signupbtn:hover {
    filter: hue-rotate(360deg);
}

.signupbtn:before {
    position: absolute;
    content: '';
    top: 0;
    left: -16px;
    width: 0%;
    height: 100%;
    background: #252525;
    transform: skewX(-30deg);
    z-index: -1;
    transition: .5s;
}

.signupbtn::after {
    position: absolute;
    content: '';
    top: 0;
    right: -16px;
    width: 0%;
    height: 100%;
    background: #252525;
    transform: skewX(-30deg);
    z-index: -1;
    transition: .5s;
}

.signupbtn:hover:before ,
.signupbtn:hover:after {
    width: 60%;
} 

   
  /* The Close Button (x) */
  .close {
    position: absolute;
    right: 35px;
    top: 15px;
    font-size: 40px;
    font-weight: bold;
    color: #f1f1f1;
  }
  
  .close:hover,
  .close:focus {
    color: #f44336;
    cursor: pointer;
  }
  
  /* Clear floats */
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
  
  /* Change styles for cancel button and signup button on extra small screens */
  @media screen and (max-width: 300px) {
    .cancelbtn, .signupbtn {
       width: 100%;
    }
  }

/*<--===================== Sign Up CSS End Here =====================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Header Mneu CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Slider CSS Start Here -->
<!--==============================================================-->*/

section.slider-section {
    display: flex;
    align-items: center;
    height: 790px;
    background: url(../images/main-thumb/slider-bg.jpg);
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
}

section.slider-section.style-two {
    display: flex;
    align-items: center;
    height: 790px;
    background: url(../images/main-thumb/slider3-bg.jpg);
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
}

.slider-title h1 {
    font-size: 60px;
    line-height: 72px;
    color: #ffffff;
    font-weight: 700;
    font-family: "Poppins";
    width: 52%;
}

.slider-info {
    margin: 16px 0 52px;
}

.slider-info ul li {
    display: inline-block;
    margin-right: 20px;
}

.slider-info ul li h6 {
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    font-family: 'Poppins';
}

.slider-info i {
    font-size: 16px;
    line-height: 26px;
    color: #c39e75;
    padding-right: 6px;
}

.slider-info img {
    padding-right: 6px;
    display: inline-block !important;
}

.slider-btn a {
    background-color: #c39e75;
    padding: 14px 32px;
    display: inline-block;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Poppins";
    position: relative;
    z-index: 1;
    transition: .5s;
    overflow: hidden;
}

.slider-btn a:hover {
    filter: hue-rotate(360deg);
}

.slider-btn a:before {
    position: absolute;
    content: '';
    top: 0;
    left: -16px;
    width: 0%;
    height: 100%;
    background: #252525;
    transform: skewX(-30deg);
    z-index: -1;
    transition: .5s;
}

.slider-btn a::after {
    position: absolute;
    content: '';
    top: 0;
    right: -16px;
    width: 0%;
    height: 100%;
    background: #252525;
    transform: skewX(-30deg);
    z-index: -1;
    transition: .5s;
}

.slider-btn a:hover:before ,
.slider-btn a:hover:after {
    width: 60%;
} 

/*<!--==============================================================-->
 <!-- Dreamhouse Slider CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse About CSS Start Here -->
<!--==============================================================-->*/

section.about-section {
    padding: 100px 0;
    background: url(../images/main-thumb/about-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
}

.about-thumb {
    position: relative;
    z-index: 1;
}

.about-thumb:before {
    position: absolute;
    content: '';
    background-image: radial-gradient(#d9d8d4 2px,transparent 3px);
    background-size: 10px 10px;
    width: 158px;
    height: 178px;
    opacity: .8;
    top: -60px;
    left: -30px;
    z-index: -1;
    animation-name: Dance;
    animation-timing-function: linear;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    transition: ease-in-out 3s;
    -webkit-transition: ease-in-out 3s;
}

.about-section-title h1 {
	width: 77%;
}

.about-desc p {
	margin: 20px 0 24px;
	width: 85%;
}

.about-info h5 {
    font-size: 16px;
    line-height: 26px;
    color: #414141;
    font-weight: 600;
    position: relative;
    padding-left: 52px;
}

.about-info ul li:last-child h5 {
    margin-top: 7px;
}

.about-info h5:before {
    position: absolute;
    content: '';
    top: 11px;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: #c39e75;
}

.about-btn a {
    background-color: #c39e75;
    padding: 14px 32px;
    display: inline-block;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Poppins";
    position: relative;
    z-index: 1;
    transition: .5s;
    overflow: hidden;
    margin-top: 30px;
}

.about-btn a:hover {
    filter: hue-rotate(360deg);
}

.about-btn a:before {
    position: absolute;
    content: '';
    top: 0;
    left: -16px;
    width: 0%;
    height: 100%;
    background: #252525;
    transform: skewX(-30deg);
    z-index: -1;
    transition: .5s;
}

.about-btn a::after {
    position: absolute;
    content: '';
    top: 0;
    right: -16px;
    width: 0%;
    height: 100%;
    background: #252525;
    transform: skewX(-30deg);
    z-index: -1;
    transition: .5s;
}

.about-btn a:hover:before ,
.about-btn a:hover:after {
    width: 60%;
} 

/*<!--==============================================================-->
 <!-- Dreamhouse About CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Counter CSS End Here -->
<!--==============================================================-->*/

section.counter-section {
    padding: 100px 0;
    background: url(../images/main-thumb/counter-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.counter-box {
    text-align: center;

}

.counter-box-icon {
    width: 82px;
    height: 82px;
    background: #c39e74;
    text-align: center;
    line-height: 82px;
    border-radius: 50px;
    margin: auto;
}

.counter-number h2 {
    font-size: 55px;
    line-height: 60px;
    color: #ffffff;
    font-weight: 600;
    margin: 20px 0 4px;
}

.counter-title h6 {
    opacity: 0.800;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 400;
    margin: 0;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Counter CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Apartment CSS End Here -->
<!--==============================================================-->*/

section.apartment-section {
    padding: 100px 0;
}

.apartment-btn {
    text-align: right;
}

.apartment-btn a {
    background-color: #c39e75;
    padding: 14px 32px;
    display: inline-block;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Poppins";
    position: relative;
    z-index: 1;
    transition: .5s;
    overflow: hidden;
    margin-top: 30px;
}

.apartment-btn a:hover {
    filter: hue-rotate(360deg);
}

.apartment-btn a:before {
    position: absolute;
    content: '';
    top: 0;
    left: -16px;
    width: 0%;
    height: 100%;
    background: #252525;
    transform: skewX(-30deg);
    z-index: -1;
    transition: .5s;
}

.apartment-btn a::after {
    position: absolute;
    content: '';
    top: 0;
    right: -16px;
    width: 0%;
    height: 100%;
    background: #252525;
    transform: skewX(-30deg);
    z-index: -1;
    transition: .5s;
}

.apartment-btn a:hover:before ,
.apartment-btn a:hover:after {
    width: 60%;
} 

.apartment-fecilities {
    text-align: center;
}

.apartment-fecilities button {
    font-size: 16px;
    line-height: 26px;
    color: #c39e75;
    font-weight: 500;
    display: inline-block;
    margin-top: 56px;
    transition: .5s;
    border: none;
    background: transparent;
}

.apartment-fecilities button:hover {
    color: #252525;
    filter: hue-rotate(360deg);
}

.apartment-fecilities button.active {
    color: #252525;
    filter: hue-rotate(360deg);
}

.apartment-plans {
    margin-top: 15px;
    padding-top: 40px;
    border-top: 1px solid rgb(65 65 65 / 14%);
}

.apartment-plan-thumb img {
    width: 100%;
}

.apartment-plan-content {
    padding: 26px 20px 0;
}

.apartment-type h5 {
    font-size: 16px;
    line-height: 26px;
    color: #c39e75;
    font-weight: 400;
    margin: 0;
}

.apartment-size h3 {
	font-size: 26px;
}

.apartment-title h3 {
    font-size: 26px;
    line-height: 42px;
    font-weight: 600;
    color: #c39e75;
    margin: 0 0 18px;
}

.apartment-desc p {
	padding-right: 26px;
}


/*<!--==============================================================-->
 <!-- Dreamhouse Apartment CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Inside CSS End Here -->
<!--==============================================================-->*/

section.inside-area-section {
	background: #f7f7f7;
}

section.inside-area-section .dreamhouse-section-title h1 {
	width: 80%;
}

/*accordion*/
.accordion li {
    list-style: none;
    padding: 10px 0;
    position: relative;
    z-index: 1;
    border-bottom: 1px solid #c2c2c2;
}

.accordion li:before {
    position: absolute;
    content: "";
    z-index: -1;
    right: 20px;
    top: 24px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    background-color: #252525;
}

.accordion li a {
    position: relative;
    width: 100%;
    display: block;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
    color: #252525;
    background-color: transparent;
    padding: 14px 0;
    z-index: 1;
}

.accordion li p {
    display: none;
    font-size: 16px;
    color: #404040;
    margin: 0;
}

.accordion a:before {
    width: 2px;
    height: 10px;
    background: #fff;
    position: absolute;
    right: 32px;
    content: " ";
    top: 22px;
    transform: rotate(0deg);
    transition: all 0.2s ease-in-out;
}

.accordion a:after {
    width: 10px;
    height: 2px;
    background: #fff;
    position: absolute;
    right: 28px;
    content: " ";
    top: 26px;
    transition: all 0.2s ease-in-out;
}

.accordion a.active:after {
    transform: rotate(0deg);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    background: #fff;
}

.accordion a.active:before {
    display: none;
}

.accordion li a span {
    position: relative;
    z-index: 1;
}


/*<!--==============================================================-->
 <!-- Dreamhouse Inside CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Property CSS End Here -->
<!--==============================================================-->*/

section.property-section {
    padding: 100px 0;
}

section.property-section  .dreamhouse-section-title h1 {
    margin: 17px auto 0;
}

.property-plan {
    padding: 54px 0 0 0;
}

.property-plan tr:nth-child(1) {
    height: 70px;
    background-color: #c39e75;
}

.property-plan th {
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
    font-weight: 500;
}

.property-plan th:nth-child(1), 
.property-plan td:nth-child(1) {
    padding-left: 30px;
}

.property-plan th:nth-child(6),
.property-plan td:nth-child(6) {
    padding-right: 30px;
}

.property-plan td {
    font-size: 16px;
    line-height: 26px;
    color: #414141;
    font-weight: 400;
    height: 84px;
    border-bottom: 1px solid rgb(37 37 37 / 14%);
}

.property-plan a {
    color: #252525;
    transition: .5s;
}

.property-plan a:hover {
    color: #c39e75;
    filter: hue-rotate(360deg);
}

/*<!--==============================================================-->
 <!-- Dreamhouse Property CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Property CSS End Here -->
<!--==============================================================-->*/

section.our-team-section {
    padding: 100px 0;
    background: #f7f7f7;
}

section.our-team-section .dreamhouse-section-title h1 {
	margin: 17px auto 0;
}

section.our-team-section  .dreamhouse-section-sub-title.style-2 img:nth-child(2) {
    left: 35.4%;
    top: 2px;
}

section.our-team-section .dreamhouse-section-sub-title.style-2 img:nth-child(3) {
    right: 37%;
}

.team-box {
    padding-top: 50px;
}

.our-team-single-box {
    text-align: center;
}

.team-single-box-thumb {
    overflow: hidden;
}

.team-single-box-thumb img {
    width: 100%;
    transition: .5s;
}

.our-team-single-box:hover  .team-single-box-thumb img{
    transform: scale(1.1);
}

.team-single-box-designation h6 {
    margin: 38px 0 0 0;
    font-size: 16px;
    line-height: 26px;
    color: #c39e75;
    font-weight: 500;
}

.our-team-single-box:hover .team-single-box-title h3{
    color: #c39e75;
    filter: hue-rotate(360deg);
}

.team-single-box-title h3 {
    font-size: 26px;
    line-height: 42px;
    color: #252525;
    font-weight: 600;
    margin: 3px 0 0 0;
    transition: .5s;
}

.team-single-box-social ul li {
    display: inline-block;
    margin: 0 4px;
}

.team-single-box-social ul li a {
    color: #9b9b9b;
    transition: .5s;
}

.team-single-box-social ul li a:hover {
    color: #c39e75;
    filter: hue-rotate(360deg);
}

/*<!--==============================================================-->
 <!-- Dreamhouse Property CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Testimonial CSS End Here -->
<!--==============================================================-->*/

section.testimonial-section {
    padding: 100px 0;
    background: url(../images/main-thumb/testimonial-bg.jpg) center no-repeat;
    background-size: cover;
}

.testimonial-desc p {
    margin-top: 25px;
}

.testimonial-btn a {
    background-color: #c39e75;
    padding: 14px 32px;
    display: inline-block;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Poppins";
    position: relative;
    z-index: 1;
    transition: .5s;
    overflow: hidden;
    margin-top: 30px;
}

.testimonial-btn a:hover {
    filter: hue-rotate(360deg);
}

.testimonial-btn a:before {
    position: absolute;
    content: '';
    top: 0;
    left: -16px;
    width: 0%;
    height: 100%;
    background: #252525;
    transform: skewX(-30deg);
    z-index: -1;
    transition: .5s;
}

.testimonial-btn a::after {
    position: absolute;
    content: '';
    top: 0;
    right: -16px;
    width: 0%;
    height: 100%;
    background: #252525;
    transform: skewX(-30deg);
    z-index: -1;
    transition: .5s;
}

.testimonial-btn a:hover:before ,
.testimonial-btn a:hover:after {
    width: 60%;
} 

.testimonial-slider-box {
    position: relative;
    z-index: 1;
    padding: 0 32px 22px 40px;
}

.testimonial-slider-box:before {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    width: 100%;
    height: 82%;
    filter: drop-shadow(0 0 5px rgba(195,158,117,0.1));
    background-color: #ffffff;
    z-index: -1;
}

.testimonial-slider-box:after {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    width: 50%;
    height: 82%;
    background-color: #ffffff;
    border-top: 2px dashed #c39e75;
    border-left: 2px dashed #c39e75;
    border-bottom: 2px dashed #c39e75;
    z-index: -1;
    transition: .5s;
}

.testimonial-slider-profile {
    text-align: right;
}

.testimonial-section .owl-item img{
    display: unset !important;
}

.testimonial-slider-rate {
    position: absolute;
    top: 80px;
}

.testimonial-slider-rate ul li {
    display: inline-block;
}

.testimonial-slider-rate ul li i {
    font-size: 20px;
    line-height: 26px;
    color: #c39e75;
}

.testimonial-slider-desc p {
    margin: 6px 0 22px;
}

.testimonial-slider-title h5 {
    font-size: 16px;
    line-height: 26px;
    color: #252525;
    font-weight: 600;
}

.testimonial-slider-designation h6 {
    font-size: 14px;
    line-height: 26px;
    color: #414141;
    font-weight: 400;
    margin: 0;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Testimonial CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Blog CSS End Here -->
<!--==============================================================-->*/

section.letest-news-section {
    padding: 100px 0;
    background: #f7f7f7;
}

section.letest-news-section .dreamhouse-section-title h1 {
	margin: 17px auto 0;
}

.letest-news-section  .dreamhouse-section-sub-title.style-2 img:nth-child(2) {
    left: 33.7%;
}

.letest-news-section  .dreamhouse-section-sub-title.style-2 img:nth-child(3) {
    right: 35.3%;
}

.letest-news-box {
    padding-top: 52px;
}

.letest-news-single-box {
    margin-bottom: 30px;
}

.news-single-box-thumb {
    overflow: hidden;
}

.news-single-box-thumb img {
    width: 100%;
    transition: .5s;
}

.letest-news-single-box:hover .news-single-box-thumb img {
    transform: scale(1.1);
}

.news-reason h6 {
    margin: 22px 0 0;
    font-size: 14px;
    line-height: 26px;
    color: #c39e75;
    font-weight: 500;
}

.news-single-box-title a {
    display: inline-block;
    font-size: 26px;
    line-height: 38px;
    color: #252525;
    font-weight: 600;
    margin: 10px 0 27px;
    transition: .5s;
}

.letest-news-single-box:hover .news-single-box-title a {
    color: #c39e75;
    filter: hue-rotate(360deg);
}

.news-single-box-post h6 {
    font-size: 16px;
    line-height: 26px;
    color: #414141;
    font-weight: 400;
    margin: 0 24px 0 0;
    float: left;
    transition: .5s;
}

.letest-news-single-box:hover .news-single-box-post h6 {
    color: #c39e75;
    filter: hue-rotate(360deg);
}

.news-single-box-date h6 {
    font-size: 16px;
    line-height: 26px;
    color: #c39e75;
    margin: 0;
    position: relative;
    display: inline-block;
}

.news-single-box-date h6:before {
    position: absolute;
    content: '';
    top: 9px;
    left: -12px;
    width: 6px;
    height: 6px;
    background: #232323;
    border-radius: 30px;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Blog CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Footer CSS Start Here -->
<!--==============================================================-->*/

footer.footer-section {
    padding: 100px 0 0;
    background: url(../images/main-thumb/footer-bg.jpg) center no-repeat;
    background-size: cover;
}

.footer-desc p {
    margin: 22px 0 28px;
    color: #fff;
}

.footer-social ul li {
    display: inline-block;
    margin: 0 5px;
}

.footer-social ul li a {
    display: inline-block;
    font-size: 16px;
    line-height: 35px;
    color: #c39e75;
    width: 35px;
    height: 35px;
    border: 1px solid #baa360;
    text-align: center;
    position: relative;
    z-index: 1;
}

.footer-social ul li a:hover {
    color: #fff;
}

.footer-social ul li a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #c39e75;
    transform: scale(0);
    z-index: -1;
    transition: .5s;
}

.footer-social ul li a:hover:before {
    transform: scale(1);
    filter: hue-rotate(360deg);
}

.footer-about {
    padding-left: 20px;
}

.footer-about-title h5,
.footer-explore-title h5,
.footer-newsletter-title h5 {
    margin: 14px 0 24px;
    font-size: 18px;
    line-height: 26px;
    color: #c39e75;
    font-weight: 600;
}

.footer-about ul li a,
.footer-explore ul li a {
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 400;
    margin: 4px 0;
    display: inline-block;
    transition: .5s;
}

.footer-about ul li a:hover,
.footer-explore ul li a:hover {
    filter: hue-rotate(360deg);
    color: #c39e75;
}

.footer-newsletter-desc p {
    color: #fff;
    display: inline-block;
}

.footer-newsletter-form {
    position: relative;
    margin-top: 20px;
}

.footer-newsletter-form input {
    width: 100%;
    height: 50px;
    background-color: rgb(247 247 247 / 10%);
    padding: 10px 20px;
    border: none;
}

.footer-newsletter-form input::placeholder {
    opacity: 0.800;
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 400;
}

.footer-newsletter-form button {
    font-size: 16px;
    line-height: 26px;
    color: #c39e75;
    font-weight: 400;
    display: inline-block;
    background: transparent;
    border: none;
    position: absolute;
    top: 14px;
    right: 20px;
}


/* Footer Bootom */

section.footer-bottom {
    margin-top: 100px;
    border-top: 1px solid #c5c5c5;
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    padding: 34px 0;
    color: #fff;
}

.footer-bottom a {
    color: #c39e75;
    display: inline-block;
    transition: .5s;
}

.footer-bottom a:hover {
    filter: hue-rotate(360deg);
}

/*<!--==============================================================-->
 <!-- Dreamhouse Footer CSS End Here -->
<!--==============================================================-->*/




/*<--==============================================================-->
 <--==============================================================-->
                <-- Dreamhouse Homapage Two CSS End Here -->
 <--==============================================================-->
<--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Header CSS Start Here -->
<!--==============================================================-->*/

header.header-manu-section.style-two {
    background: #fff;
}

header.header-manu-section.style-two::before {
    width: 0;
}

header.header-manu-section.style-two .header-menu-logo img {
    margin-left: 56px;
}

header.header-manu-section.style-two nav.header-menu {
    text-align: center;
}

header.header-manu-section.style-two nav.header-menu ul li a {
    color: #252525;
}

header.header-manu-section.style-two nav.header-menu ul li:first-child a {
    color: #c39e74;
}

header.header-manu-section.style-two nav.header-menu ul li a:hover {
    color: #c39e74;
    filter: hue-rotate(360deg);
}

.header-menu-btn {
    margin-right: 54px;
    text-align: right;
}

.header-menu-btn a {
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 500;
    display: inline-block;
    background-color: #c39e75;
    padding: 14px 32px;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.header-menu-btn a:hover {
    filter: hue-rotate(360deg);
}

.header-menu-btn a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0%;
    width: 100%;
    height: 100%;
    background: #252525;
    transform: scale(0);
    z-index: -1;
    transition: .5s;
}

.header-menu-btn a:hover:before {
    transform: scale(1);
}

/*<!--==============================================================-->
 <!-- Dreamhouse Header CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Banner CSS End Here -->
<!--==============================================================-->*/

section.banner-section {
    height: 800px;
    background: url(../images/main-thumb/banner2-content-thumb.jpg) center no-repeat;
    background-size: cover;
}

.banner-sub-title h5 {
    font-size: 14px;
    line-height: 24px;
    color: #c39e75;
    font-weight: 500;
    margin: 0;
    position: relative;
    display: inline-block;
}

.banner-sub-title h5::before {
    position: absolute;
    content: '';
    top: 0;
    right: -8px;
    width: 52%;
    height: 100%;
    border-top: 1px solid #c39e75;
    border-bottom: 1px solid #c39e75;
    border-right: 1px solid #c39e75;
}

.banner-sub-title h5::before {
    position: absolute;
    content: '';
}

.banner-title h1 {
    font-size: 45px;
    line-height: 58px;
    color: #252525;
    font-weight: 700;
    margin: 10px 0 36px;
}

.banner-btn {
    float: left;
}

.banner-btn a {
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    font-weight: 500;
    display: inline-block;
    background-color: #252525;
    padding: 15px 80px 15px 32px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    transition: .5s;
    margin-right: 30px;
}

.banner-btn a::before {
    position: absolute;
    content: '';
    top: 0;
    left: -30px;
    width: 0;
    height: 100%;
    transition: .5s;
    background: #c39e75;
    transform: skewX(30deg);
    z-index: -1;
}

.banner-btn a:hover::before {
    width: 125%;
    filter: hue-rotate(360deg);
}

.banner-btn i {
    background: #c39e75;
    width: 42px;
    height: 42px;
    position: absolute;
    top: 6px;
    right: 6px;
    text-align: center;
    line-height: 42px;
    font-size: 18px;
    transition: .5s;
}

.banner-btn a:hover i {
    background: #252525;
    filter: hue-rotate(360deg);
}

.banner-rate {
    display: inline-block;
}

.banner-rate ul li {
    display: inline-block;
    margin-top: 16px;
}

.banner-rate i {
    font-size: 18px;
    color: #c39e75;
}

section.banner-section .owl-nav {
    display: inline-block;
    position: relative;
    bottom: 100px;
}

section.banner-section .owl-prev, 
section.banner-section .owl-next {
    width: 100px;
    height: 100px;
    background-color: transparent;
    text-align: center;
    line-height: 100px;
    font-size: 22px;
    margin-right: 20px;
    background-color: #d6915391;
    transition: .5s;
    display: inline-block;
    color: #fff;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Banner CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse About CSS Start Here -->
<!--==============================================================-->*/

section.about-section.style-two .about-thumb::before {
    width: 0;
}

section.about-section.style-two .about-thumb:after {
    position: absolute;
    content: '';
    background: #c39e74;
    background-size: 10px 10px;
    width: 325px;
    height: 334px;
    opacity: 1;
    bottom: 30px;
    left: -22px;
    z-index: -1;
    animation-name: Dance;
    animation-timing-function: linear;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    transition: ease-in-out 3s;
    -webkit-transition: ease-in-out 3s;
}

/*<!--==============================================================-->
 <!-- Dreamhouse About CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Service CSS Start Here -->
<!--==============================================================-->*/

section.service-section {
    padding: 100px 0 70px;
    background: #faf7f2;
}

.dreamhouse-section-title li:last-child h1{
    color: #c39d76;
}

.service-desc p {
    margin: 0;
}

.service-box {
    margin-top: 50px;
}

.service-single-box {
    padding: 32px 34px;
    background: #fff;
    margin-bottom: 30px;
}

.service-box-icon {
    width: 80px;
    height: 80px;
    border-radius: 40px;
    background-color: transparent;
    border: 1px solid #c39e75;
    text-align: center;
    line-height: 80px;
    transition: .5s;
}

.service-single-box:hover .service-box-icon {
    background: #c39e75;
    filter: hue-rotate(360deg);
    transform: rotateY(360deg);
}

.service-single-box:hover .service-box-icon img {
    filter: brightness(0) invert(1);
}

.service-box-title h4 {
    font-size: 20px;
    line-height: 26px;
    color: #252525;
    font-weight: 600;
    margin: 36px 0 14px;
    transition: .5s;
}

.service-box-desc p {
    transition: .5s;
} 

.service-single-box:hover .service-box-title h4,
.service-single-box:hover .service-box-desc p {
    color: #c39e75;
    filter: hue-rotate(360deg);
}

.service-box-btn a {
    position: relative;
    color: #c39d76;
    transition: .5s;
    font-size: 16px;
    line-height: 26px;
    font-weight: 500;
    display: inline-block;
}

.service-box-btn a::before {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 86px;
    height: 1px ;
    background: #c39d76;
    transition: .5s;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Service CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Fecilities CSS start Here -->
<!--==============================================================-->*/

section.fecilities-section {
    padding: 100px 0;
}

.fecilities-desc p {
    margin: 0;
}

.fecilities-slider {
    margin-top: 50px;
    text-align: center;
}

.facilitites-thumb {
    position: relative;
}

.facilitites-thumb img {
	width: 100%;
}

.facilitites-thumb-title h5 {
    font-size: 25px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 500;
    margin: 0;
    position: absolute;
    top: 46%;
    left: 40%;
}

section.fecilities-section .owl-nav {
    display: inline-block;
    position: absolute;
    bottom: 0;
    text-align: center;
    margin-left: -100px;
}

section.fecilities-section .owl-prev, 
section.fecilities-section .owl-next {
    width: 100px;
    height: 100px;
    background-color: transparent;
    text-align: center;
    line-height: 100px;
    font-size: 22px;
    background-color: #d6915391;
    transition: .5s;
    display: inline-block;
    color: #fff;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Fecilities CSS End Here -->
<!--==============================================================-->*/

/*<!--==============================================================-->
 <!-- Dreamhouse Text Slider CSS Start Here -->
<!--==============================================================-->*/

section.text-slider-section {
    padding: 30px 0;
    border-top: 1px solid rgb(37 37 37 / 14%);
    border-bottom: 1px solid rgb(37 37 37 / 14%);
}

section.text-slider-section .mark1 {
    font-size: 141px;
    line-height: 174px;
    color: #252525;
    font-weight: 500;
}

section.text-slider-section .mark2 {
    font-size: 141px;
    line-height: 174px;
    font-weight: 500;
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #252525;
}

.scroll-container {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
  }
  
  .scroll-item {
    scroll-snap-align: start;
  }
  

@keyframes scroll {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

.scrolling-text {
  white-space: nowrap;
  overflow: hidden;
  animation: scroll 10s linear infinite;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Text Slider CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Choose CSS Start Here -->
<!--==============================================================-->*/

section.choose-apartment-section {
    padding: 100px 0;
}

.choose-apartment-desc p {
    margin: 0;
}

.choose-slider {
    margin-top: 50px;
}

.choose-apartment-box-thumb img {
    width: 100%;
}

.choose-apartment-box-title h4 {
    margin: 26px 0 8px;
    font-size: 22px;
    line-height: 26px;
    color: #252525;
    font-weight: 500;
}

.choose-apartment-box-size h6 {
    font-size: 16px;
    line-height: 26px;
    color: #414141;
    font-weight: 400;
    margin: 0;
}

section.choose-apartment-section .owl-nav {
    display: inline-flex;
    margin-top: 60px;
}

section.choose-apartment-section .owl-prev,
section.choose-apartment-section .owl-next {
    width: 80px;
    height: 80px;
    background-color: transparent;
    border: 1px solid #c39e75;
    text-align: center;
    line-height: 80px;
    font-size: 34px;
    margin-right: 20px;
    transition: .5s;
}

section.choose-apartment-section .owl-prev:hover, 
section.choose-apartment-section .owl-next:hover {
    background-color: rgba(195,158,117,0.25098039215686274);
    border: 1px solid #252525;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Choose CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Building Aminities CSS Start Here -->
<!--==============================================================-->*/

section.building-aminities-section {
    position: relative;
}

section.building-aminities-section .tab_content {
    background: url(../images/main-thumb/aminites-bg.jpg) center no-repeat;
    background-size: cover;
    padding: 100px 0;
    height: 760px;
}

section.building-aminities-section .tab_content.style-two {
    background: url(../images/main-thumb/aminities-2.jpg) center no-repeat;
    background-size: cover;
    padding: 100px 0;
    height: 760px;
    position: relative;
}

section.building-aminities-section .tab_content.style-two::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5;
}

section.building-aminities-section .tab_content.style-three {
    background: url(../images/main-thumb/aminities-3.jpg) center no-repeat;
    background-size: cover;
    padding: 100px 0;
    height: 760px;
    position: relative;
}

section.building-aminities-section .tab_content.style-three::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5;
}

section.building-aminities-section .tab_content.style-four {
    background: url(../images/main-thumb/aminities-4.jpg) center no-repeat;
    background-size: cover;
    padding: 100px 0;
    height: 760px;
    position: relative;
}

section.building-aminities-section .tab_content.style-four::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5;
}

.dreamhouse-section-title.style-two {
    position: relative;
}

section.building-aminities-section  .dreamhouse-section-title.style-two h1 {
    color: #fff;
}

.tab_content {
    display: none;
    animation: fadeIn fadeOut;
}

.tab_content.active {
    display: block;
}

.building-aminities-tab {
    margin-top: 34px;
    position: absolute;
    top: 12rem;
}

button {
    border: none;
    outline: none ;
}

.building-aminities-tab ul li {
    display: inline-block;
    margin-right: 70px;
}

.building-aminities-tab ul li button {
    font-size: 18px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 400;
    display: inline-block;
    transition: .5s;
    position: relative;
    z-index: 1;
    border: none;
    background: transparent;
}

.building-aminities-tab ul li button:hover,
.building-aminities-tab ul li button.active {
    color: #c39d76;
}

.building-aminities-tab ul li button::before {
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: #c39d76;
	transform: scale(0);
	transition: .5s;
}

.building-aminities-tab ul li button:hover:before,
.building-aminities-tab ul li button.active:before {
    transform: scale(1);
}

/*<!--==============================================================-->
 <!-- Dreamhouse Building Aminities CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Apartment Plan CSS Start Here -->
<!--==============================================================-->*/

section.apartment-plan-section {
    padding: 100px 0;
}

.apartment-plan-tab {
    text-align: right;
}

.apartment-plan-tab ul li {
    display: inline-block;
    margin-left: 16px;
}

.apartment-plan-tab ul li button {
    font-size: 18px;
    line-height: 30px;
    color: #252525;
    font-weight: 500;
    border: none;
    background-color: rgb(195 158 116 / 22%);
    padding: 10px 22px;
}

.apartment-tab-content {
    margin-top: 50px;
}

.tab-content {
    display: none;
    -webkit-animation: move .4s ease-in;
    animation: zoomIn .5s ease-in;
}

.tab-content.active{
    display: block;
}

.apartment-plan-thumb img {
    width: 100%;
}

.apartment-characteristics ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding: 10px 0;
    border-bottom: 1px solid #d1d1d1;
}

.apartment-plan-btn a {
    display: inline-block;
    font-size: 18px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 500;
    width: 100%;
    height: 60px;
    background-color: #c39e75;
    line-height: 60px;
    text-align: center;
    margin-top: 60px;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.apartment-plan-btn a:hover {
    filter: hue-rotate(360deg);
}

.apartment-plan-btn a:before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #252525;
    transition: .5s;
    z-index: -1;
}

.apartment-plan-btn a:after{
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    width: 0;
    height: 100%;
    background: #252525;
    transition: .5s;
    z-index: -1;
}

.apartment-plan-btn a:hover:before,
.apartment-plan-btn a:hover:after {
    width: 50%;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Apartment Plan CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Apartment Nagibrid CSS Start Here -->
<!--==============================================================-->*/

section.apartment-nagibrid-section {
    padding: 100px 0;
    background: #252525;
}

section.apartment-nagibrid-section .dreamhouse-section-title.style-two li:first-child h1 {
    color: #fff;
}

.apartment-nagibrid-desc p {
    margin: 0;
    color: #fff;
}

.apartment-nagibrid-box {
    margin-top: 50px;
}

.apartment-nagibrid-box-thumb img {
    width: 100%;
}

.apartment-nagibrid-title h4 {
    font-size: 22px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 500;
    margin: 30px 0 8px;
}

.apartment-nagibrid-near h6 {
    font-size: 16px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 400;
    margin: 0;
}

section.apartment-nagibrid-section .owl-nav {
    display: inline-flex;
    margin-top: 60px;
}

section.apartment-nagibrid-section .owl-prev,
section.apartment-nagibrid-section .owl-next {
    width: 80px;
    height: 80px;
    background-color: transparent;
    border: 1px solid #c39e75;
    text-align: center;
    line-height: 80px;
    font-size: 34px;
    margin-right: 20px;
    transition: .5s;
    color: #fff;
}

section.apartment-nagibrid-section .owl-prev:hover, 
section.apartment-nagibrid-section .owl-next:hover {
    width: 80px;
    height: 80px;
    background-color: rgba(195,158,117,0.25098039215686274);
    border: 1px solid #252525;
    text-align: center;
    line-height: 80px;
    font-size: 34px;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Apartment Nagibrid CSS End Here -->
<!--==============================================================-->*/


/*<--==============================================================-->
 <--==============================================================-->
            <-- Dreamhouse Homapage Three CSS Start Here -->
 <--==============================================================-->
<--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Header CSS Start Here -->
<!--==============================================================-->*/

header.header-manu-section.style-three {
    background: transparent;
    position: fixed;
    width: 100%;
    z-index: 100;
}

header.header-manu-section.style-three:before {
    width: 0;
}

header.header-manu-section.style-three .header-menu-logo img {
    padding-left: 72px;
}

header.header-manu-section.style-three nav.header-menu {
    text-align: center;
}

header.header-manu-section.style-three nav.header-menu ul li {
    padding: 46px 8px 46px 8px;
}
header.header-manu-section.style-three nav.header-menu ul li:first-child a {
    color: #fff;
}

header.header-manu-section.style-three nav.header-menu ul li a {
    font-weight: 400;
    font-family: "Raleway";
}

header.header-manu-section.style-three nav.header-menu ul li a:hover {
    color: #fff;
}

.header-menu-btn.style-two a {
    background: transparent;
    transition: .5s;
    background: linear-gradient(90deg, #fff 50%, transparent 0) repeat-x, linear-gradient(90deg, #fff 50%, transparent 0) repeat-x, linear-gradient(0deg, #fff 50%, transparent 0) repeat-y, linear-gradient(0deg, #fff 50%, transparent 0) repeat-y;
    background-size: 6px 2px, 6px 2px, 2px 6px, 2px 7px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    -webkit-animation: linearGradientMove 0.3s infinite linear;
    animation: linearGradientMove 0.3s infinite linear;
    z-index: 1;
}

.header-menu-btn.style-two a:before {
    left: 50%;
    width: 0;
    height: 100%;
    transform: scale(1);
    background: #c39e75;
}

.header-menu-btn.style-two a:hover:before {
    width: 100%;
    left: 0;
    filter: hue-rotate(360deg);
}

/*<!--==============================================================-->
 <!-- Dreamhouse Header CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Hero CSS Start Here -->
<!--==============================================================-->*/

section.hero-section {
    display: flex;
    align-items: center;
    text-align: center;
    height: 845px;
    background: url(../images/main-thumb/slider3-bg.jpg) center no-repeat;
    background-size: cover;
}

section.hero-section2 {
    display: flex;
    align-items: center;
    text-align: center;
    height: 845px;
    background: url(../images/main-thumb/slider-bg.jpg) center no-repeat;
    background-size: cover;
}

section.hero-section .hero-shape img, 
section.hero-section2 .hero-shape img {
    display: inline-block !important;
}

.hero-sub-title h4 {
    font-size: 20px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 500;
    font-family: "Raleway";
    margin-top: 24px;
}

.hero-title h1 {
    font-size: 120px;
    letter-spacing: 36px;
    line-height: 100px;
    text-transform: uppercase;
    color: #ffffff;
    font-weight: 400;
    font-family: "Marcellus";
    display: inline-block;
    margin: 26px 0 48px;
}

.hero-btn a {
    background: transparent;
    transition: .5s;
    background: linear-gradient(90deg, #fff 50%, transparent 0) repeat-x, linear-gradient(90deg, #fff 50%, transparent 0) repeat-x, linear-gradient(0deg, #fff 50%, transparent 0) repeat-y, linear-gradient(0deg, #fff 50%, transparent 0) repeat-y;
    background-size: 6px 2px, 6px 2px, 2px 6px, 2px 7px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    -webkit-animation: linearGradientMove 0.3s infinite linear;
    animation: linearGradientMove 0.3s infinite linear;
    z-index: 1;
    display: inline-block;
    position: relative;
    padding: 14px 40px;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
}

.hero-btn a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    transform: scale(1);
    background: #c39e75;
    transition: .5s;
    z-index: -1;
}

.hero-btn a:hover:before {
    width: 100%;
    left: 0;
    filter: hue-rotate(360deg);
}

/*<!--==============================================================-->
 <!-- Dreamhouse Hero CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Feature CSS Start Here -->
<!--==============================================================-->*/

section.feature-section {
    padding: 100px 0;
}

section.feature-section .dreamhouse-section-title.style-three h1 {
	width: 66%;
}

.feature-desc p {
    margin: 15px 0 042px;
}

.feature-btn a {
    background: transparent;
    transition: .5s;
    background: linear-gradient(90deg, #c39e75 50%, transparent 0) repeat-x, linear-gradient(90deg, #c39e75 50%, transparent 0) repeat-x, linear-gradient(0deg, #c39e75 50%, transparent 0) repeat-y, linear-gradient(0deg, #c39e75 50%, transparent 0) repeat-y;
    background-size: 6px 2px, 6px 2px, 2px 6px, 2px 7px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    -webkit-animation: linearGradientMove 0.3s infinite linear;
    animation: linearGradientMove 0.3s infinite linear;
    z-index: 1;
    display: inline-block;
    position: relative;
    padding: 14px 40px;
    font-size: 16px;
    line-height: 24px;
    color: #c39e75;
}

.feature-btn a:hover {
    color: #fff;
}

.feature-btn a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    transform: scale(1);
    background: #252525;
    transition: .5s;
    z-index: -1;
}

.feature-btn a:hover:before {
    width: 100%;
    left: 0;
    filter: hue-rotate(360deg);
}

.feature-thumb img {
    margin-left: 70px;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Feature CSS End Here -->
<!--==============================================================-->*/



/*<!--==============================================================-->
 <!-- Dreamhouse Counter CSS Start Here -->
<!--==============================================================-->*/

section.counter-section.style-two {
    background: url(../images/main-thumb/counter2-bg.jpg) center no-repeat;
    background-size: cover;
}

section.counter-section.style-two .counter-number h2 {
    opacity: 0.502;
    font-size: 105px;
    line-height: 80px;
    color: #baa360;
    font-weight: 400;
    font-family: "Marcellus";
    margin: 0;
}

section.counter-section.style-two .counter-title h6 {
    font-size: 16px;
    letter-spacing: 5px;
    line-height: 39px;
    color: #252525;
    font-weight: 400;
    font-family: "Raleway";
    position: relative;
    display: inline-block;
    opacity: 1;
    margin-top: 30px;
}

section.counter-section.style-two .counter-title h6::before {
    position: absolute;
    content: '';
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #252525;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Counter CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Habutation CSS End Here -->
<!--==============================================================-->*/

section.habitation {
    background: #fff;
}

section.habitation .dreamhouse-section-title.style-three h1 {
    width: 82%;
}

.habitation-thumb img {
	margin-left: -20rem;
}

.habitation-desc p {
	margin: 28px 0 18px;
	width: 92%;
}

.havitation-list {
    display: flex;
    align-items: center;
    gap: 80px;
}

.havitation-list-left ul li,
.havitation-list-right ul li {
    font-size: 16px;
    line-height: 26px;
    color: #baa360;
    font-weight: 500;
    font-family: "Raleway";
    margin: 14px 0;
}

.havitation-list-left i,
.havitation-list-right i {
    padding-right: 6px;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Habitation CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Shedule CSS Start Here -->
<!--==============================================================-->*/

section.shedule-section.style-two {
    padding: 100px 0;
    text-align: center;
    background: url(../images/main-thumb/our-visit-bg.jpg) center no-repeat;
    background-size: cover;
}

section.shedule-section.style-two .dreamhouse-section-title.style-three h1 {
	color: #fff;
	margin: auto;
}

.shedule-desc p {
    margin: 18px auto 38px;
    width: 63%;
    color: #fff;
}

.shedule-btn a {
    background: transparent;
    transition: .5s;
    background: linear-gradient(90deg, #fff 50%, transparent 0) repeat-x, linear-gradient(90deg, #fff 50%, transparent 0) repeat-x, linear-gradient(0deg, #fff 50%, transparent 0) repeat-y, linear-gradient(0deg, #fff 50%, transparent 0) repeat-y;
    background-size: 6px 2px, 6px 2px, 2px 6px, 2px 7px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    -webkit-animation: linearGradientMove 0.3s infinite linear;
    animation: linearGradientMove 0.3s infinite linear;
    z-index: 1;
    display: inline-block;
    position: relative;
    padding: 14px 40px;
    font-size: 16px;
    line-height: 24px;
    color: #fff;
}

.shedule-btn a:hover {
    color: #fff;
}

.shedule-btn a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    transform: scale(1);
    background: #252525;
    transition: .5s;
    z-index: -1;
}

.shedule-btn a:hover:before {
    width: 100%;
    left: 0;
    filter: hue-rotate(360deg);
}

/*<!--==============================================================-->
 <!-- Dreamhouse Shedule CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Shedule CSS End Here -->
<!--==============================================================-->*/

section.service-section.style-two {
    background: url(../images/main-thumb/service-bg.jpg) center no-repeat;
    background-size: cover;
}

section.service-section.style-two .dreamhouse-section-title.style-three h1 {
    color: #fff;
    width: 67%;
}

section.service-section.style-two .service-desc p {
    color: #fff;
    margin-top: 22px;
    width: 81%;
}

section.service-section.style-two .service-single-box {
    background: transparent;
    margin-bottom: 30px;
    margin-right: 30px;
    padding: 0;
}

section.service-section.style-two .service-box-title h4 {
    color: #fff;
    margin: 28px 0 18px;
    font-family: "Marcellus";
}

section.service-section.style-two .service-box-desc p {
    color: rgb(255 255 255 / 50%);
}

/*<!--==============================================================-->
 <!-- Dreamhouse Shedule CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Development CSS Start Here -->
<!--==============================================================-->*/

section.development-section {
    padding: 100px 0 ;
}

section.development-section .dreamhouse-section-sub-title.style-three h5 {
    margin: auto;
}

section.development-section  .dreamhouse-section-title.style-three h1 {
    width: 45%;
    margin: 17px auto 0;
}

.development-box {
    margin-top: 40px;
}

.developement-thumb {
    position: relative;
    transition: .5s;
    margin-bottom: 30px;
    overflow: hidden;
}

.developement-thumb:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    background: #232323;
    width: 100%;
    height: 0%;
    opacity: 0.702;
    transition: .5s;
}

.developement-thumb:after {
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    background: #232323;
    width: 100%;
    height: 0%;
    opacity: 0.702;
    transition: .5s;
}

.developement-thumb:hover:before,
.developement-thumb:hover:after {
    height: 50%;
}

.developement-thumb:hover .development-thumb-content {
    top: 34px;
    opacity: 1;
}

.developement-thumb:hover .development-thumb-btn a {
    right: 30px;
    opacity: 1;
}

.developement-thumb img {
    width: 100%;
}

.development-thumb-content {
    position: absolute;
    top: 80%;
    left: 42px;
    transition: .5s;
    opacity: 0;
}

.development-thumb-content h5 {
    font-size: 22px;
    line-height: 26px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Marcellus";
    margin: 0;
}

.development-thumb-content h6 {
    font-size: 16px;
    line-height: 22px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Raleway";
    margin-top: 8px;
}

.development-thumb-btn a {
    font-size: 18px;
    line-height: 22px;
    color: #ffffff;
    font-weight: 600;
    font-family: "Raleway";
    display: inline-block;
    position: absolute;
    bottom: 30px;
    right: 60%;
    opacity: 0;
    z-index: 1;
}

.development-btn {
    text-align: center;
    margin-top: 22px;
}

.development-btn a {
    background: transparent;
    transition: .5s;
    background: linear-gradient(90deg, #c39e75 50%, transparent 0) repeat-x, linear-gradient(90deg, #c39e75 50%, transparent 0) repeat-x, linear-gradient(0deg, #c39e75 50%, transparent 0) repeat-y, linear-gradient(0deg, #c39e75 50%, transparent 0) repeat-y;
    background-size: 6px 2px, 6px 2px, 2px 6px, 2px 7px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    -webkit-animation: linearGradientMove 0.3s infinite linear;
    animation: linearGradientMove 0.3s infinite linear;
    z-index: 1;
    display: inline-block;
    position: relative;
    padding: 14px 40px;
    font-size: 16px;
    line-height: 24px;
    color: #c39e75;
}

.development-btn a:hover {
    color: #fff;
}

.development-btn a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    transform: scale(1);
    background: #c39e75;
    transition: .5s;
    z-index: -1;
}

.development-btn a:hover:before {
    width: 100%;
    left: 0;
    filter: hue-rotate(360deg);
}

/*<!--==============================================================-->
 <!-- Dreamhouse Development CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Place View CSS End Here -->
<!--==============================================================-->*/

section.place-view-section {
    height: 590px;
    background: url(../images/main-thumb/plan-veiw-bg.jpg) center no-repeat;
    background-size: cover;
}

.place-view-content.style5 {
    height: 175px;
    width: 180px;
    background: #baa360;
    text-align: center;
    position: relative;
    top: 13.5rem;
    left: 17.5rem;
}

.place-view-content2 {
    height: 175px;
    width: 180px;
    background: #baa360;
    text-align: center;
    position: relative;
    top: 13.5rem;
    left: 17.5rem;
	visibility: hidden;
	opacity: 0;
    transform: scale(.5);
}

.place-view-content.style4 {
    height: 175px;
	width: 180px;
	background: #baa360;
	text-align: center;
	position: relative;
	left: 30rem;
	top: 7rem;
}

.place-view-content.style3 {
	height: 175px;
	width: 180px;
	background: #baa360;
	text-align: center;
	position: relative;
	top: 14.5rem;
	left: 60.5rem;
}

.place-view-content.style2 {
	height: 175px;
	width: 180px;
	background: #baa360;
	text-align: center;
	position: relative;
	top: -1.5rem;
	left: 61rem;
}

.place-view-content {
	height: 175px;
	width: 180px;
	background: #baa360;
	text-align: center;
	position: relative;
	top: -1.5rem;
	left: 11rem;
}

.place-view-thumb img {
    padding-top: 10px;
}

.place-view-tilte h5 {
    font-size: 14px;
    line-height: 30px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Marcellus";
    margin-top: 7px;
}

.place-view-tilte h6 {
    font-size: 14px;
    line-height: 22px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Raleway";
    margin: 0;
}

.place-view-btn {
    position: relative;
    z-index: 1;
    cursor: pointer;
    display: inline-block;
}

.place-view-btn:before {
    position: absolute;
    content: '';
    top: -15px;
    left: -15px;
    width: 50px;
    height: 50px;
    background-color: rgb(186 163 96 / 52%);
    border-radius: 50%;
    z-index: -1;
}

.place-view-btn button {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: #baa360;
    border: none;
}

.place-view-btn.one {
    position: relative;
    top: 6rem;
    left: 23rem;
}

.place-view-btn.two {
    position: relative;
    top: 6rem;
    left: 58rem;
}

.place-view-btn.three {
    position: relative;
    top: 15rem;
    left: 56rem;
}

.place-view-btn.four {
    position: relative;
    top: 19rem;
    left: 37rem;
}

.place-view-btn.five {
    position: relative;
    top: 26rem;
    left: 10rem;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Place View CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Best Plan CSS Start Here -->
<!--==============================================================-->*/

section.best-plan-section {
    padding: 100px 0;
}

.best-plan-desc p {
    margin: 24px 0 21px;
    display: inline-block;
}

.best-plan-details li {
    font-size: 16px;
    line-height: 26px;
    color: #252525;
    font-weight: 500;
    font-family: "Raleway";
    margin: 11px 0;
}

.best-plan-details li img {
    margin-right: 6px;
}

.best-plan-btn {
    margin-top: 42px;
}

.best-plan-btn a {
    background: transparent;
    transition: .5s;
    background: linear-gradient(90deg, #c39e75 50%, transparent 0) repeat-x, linear-gradient(90deg, #c39e75 50%, transparent 0) repeat-x, linear-gradient(0deg, #c39e75 50%, transparent 0) repeat-y, linear-gradient(0deg, #c39e75 50%, transparent 0) repeat-y;
    background-size: 6px 2px, 6px 2px, 2px 6px, 2px 7px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    -webkit-animation: linearGradientMove 0.3s infinite linear;
    animation: linearGradientMove 0.3s infinite linear;
    z-index: 1;
    display: inline-block;
    position: relative;
    padding: 14px 40px;
    font-size: 16px;
    line-height: 24px;
    color: #c39e75;
}

.best-plan-btn a:hover {
    color: #fff;
}

.best-plan-btn a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    transform: scale(1);
    background: #c39e75;
    transition: .5s;
    z-index: -1;
}

.best-plan-btn a:hover:before {
    width: 100%;
    left: 0;
    filter: hue-rotate(360deg);
}

.best-plan-thumb img {
    width: 100%;
    margin-left: 30px;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Best Plan CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Latest CSS End Here -->
<!--==============================================================-->*/

section.letest-news-section.style-three .dreamhouse-section-sub-title.style-three h5 {
    margin: auto;
}

section.letest-news-section.style-three .dreamhouse-section-title.style-three h1 {
    font-size: 42px;
    line-height: 56px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
    width: 48%;
    margin: 17px auto 0;
}

.news-single-box-thumb {
    position: relative;
}

.news-thumb-date h6 {
    font-size: 16px;
    line-height: 29px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
    margin: 0;
    padding: 4px 16px;
    background: #fff;
    position: absolute;
    top: 25px;
    right: 25px;
}

.latest-single-box-content {
    padding: 34px 40px 40px;
    background: #fff;
}

.news-box-title a {
    display: inline-block;
    font-size: 22px;
    line-height: 29px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
    transition: .5s;
}

.letest-news-single-box:hover .news-box-title a {
    color: #baa360;
    filter: hue-rotate(360deg);
}

.news-single-box-desc p {
    margin: 20px 0 30px;
}

.news-box-btn a {
    background: transparent;
    transition: .5s;
    background: linear-gradient(90deg, #c39e75 50%, transparent 0) repeat-x, linear-gradient(90deg, #c39e75 50%, transparent 0) repeat-x, linear-gradient(0deg, #c39e75 50%, transparent 0) repeat-y, linear-gradient(0deg, #c39e75 50%, transparent 0) repeat-y;
    background-size: 6px 2px, 6px 2px, 2px 6px, 2px 7px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    -webkit-animation: linearGradientMove 0.3s infinite linear;
    animation: linearGradientMove 0.3s infinite linear;
    z-index: 1;
    display: inline-block;
    position: relative;
    padding: 14px 40px;
    font-size: 16px;
    line-height: 24px;
    color: #c39e75;
}

.letest-news-single-box:hover .news-box-btn a {
    color: #fff;
}

.news-box-btn a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    transform: scale(1);
    background: #c39e75;
    transition: .5s;
    z-index: -1;
}

.letest-news-single-box:hover .news-box-btn a:before {
    width: 100%;
    left: 0;
    filter: hue-rotate(360deg);
}

/*<!--==============================================================-->
 <!-- Dreamhouse Latest News CSS End Here -->
<!--==============================================================-->*/


/*<--==============================================================-->
 <--==============================================================-->
                <-- Dreamhouse Inner Page CSS Start Here -->
 <--==============================================================-->
<--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse About Inner CSS Start Here -->
<!--==============================================================-->*/

section.about-banner-section {
    height: 422px;
    display: flex;
    align-items: center;
    text-align: center;
    background: url(../images/main-thumb/about-banner-bg.jpg) center no-repeat;
    background-size: cover;
}

/*<!--==============================================================-->
 <!-- Dreamhouse About Inner CSS End Here -->
<!--==============================================================-->*/


/*<!--==============================================================-->
 <!-- Dreamhouse Appiontment Inner CSS Start Here -->
<!--==============================================================-->*/

section.appointment-banner-section {
    height: 696px;
    display: flex;
    align-items: center;
    text-align: center;
    background: url(../images/main-thumb/appointment-benner.jpg) center no-repeat;
    background-size: cover;
}

section.appointment-banner-section .dreamhouse-inner-section-sub-tilte a {
    margin: 37px 12px 55px;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Our Team Inner CSS Start Here -->
<!--==============================================================-->*/

section.our-team-section.style-two {
    background: #0d0503;
}

section.our-team-section.style-two .dreamhouse-section-sub-title h5 {
    color: #a69c8c;
    font-weight: 400;
    font-family: "Raleway";
}

section.our-team-section.style-two .dreamhouse-section-title.style-three h1 {
    color: #fff;
}

section.our-team-section.style-two .our-team-single-box {
    text-align: left;
}

.team-single-box-thumb {
    position: relative;
}

.team-box-thumb-social {
    background: #b9a45a;
    display: inline-block;
    width: 40px;
    height: 149px;
    text-align: center;
    padding: 16px 0;
    border-radius: 30px;
    position: absolute;
    top: 80%;
    right: 32px;
    opacity: 0;
    transition: .5s;
}

.our-team-single-box:hover .team-box-thumb-social {
    top: 32px;
    opacity: 1;
}

.team-box-thumb-social ul li a {
    font-size: 16px;
    line-height: 22px;
    color: #ffffff;
    display: inline-block;
    margin: 3px 0;
}

.team-box-thumb-social ul li a:hover {
    color: #252525;
}

section.our-team-section.style-two .team-single-box-title h3 {
    font-size: 22px;
    line-height: 29px;
    color: #ffffff;
    font-weight: 400;
    font-family: "Marcellus";
    margin-top: 30px;
}

section.our-team-section.style-two .team-single-box-designation h6 {
    font-size: 16px;
    line-height: 22px;
    color: #baa360;
    font-weight: 400;
    font-family: "Raleway";
    margin-top: 10px;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Our Team Inner CSS End Here -->
<!--==============================================================-->*/

/*<!--==============================================================-->
 <!-- Dreamhouse Service Inner CSS Start Here -->
<!--==============================================================-->*/

.service-btn {
    margin-top: 52px;
}

.service-btn a {
    background: transparent;
    transition: .5s;
    background: linear-gradient(90deg, #c39e75 50%, transparent 0) repeat-x, linear-gradient(90deg, #c39e75 50%, transparent 0) repeat-x, linear-gradient(0deg, #c39e75 50%, transparent 0) repeat-y, linear-gradient(0deg, #c39e75 50%, transparent 0) repeat-y;
    background-size: 6px 2px, 6px 2px, 2px 6px, 2px 7px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    -webkit-animation: linearGradientMove 0.3s infinite linear;
    animation: linearGradientMove 0.3s infinite linear;
    z-index: 1;
    display: inline-block;
    position: relative;
    padding: 14px 40px;
    font-size: 16px;
    line-height: 24px;
    color: #c39e75;
}

.service-btn a:hover {
    color: #fff;
}

.service-btn a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    transform: scale(1);
    background: #c39e75;
    transition: .5s;
    z-index: -1;
}

.service-btn a:hover:before {
    width: 100%;
    left: 0;
    filter: hue-rotate(360deg);
}

/*<!--==============================================================-->
 <!-- Dreamhouse Service Inner CSS End Here -->
<!--==============================================================-->*/

/*<!--==============================================================-->
 <!-- Dreamhouse Blog Inner CSS Start Here -->
<!--==============================================================-->*/

section.blog-inner-section {
    padding: 100px 0;
}

.blog-project-thumb img {
    width: 100%;
}

.project-published-date h5 {
    font-size: 16px;
    line-height: 29px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
    margin: 40px 0 16px;
}

.project-section-title h1 {
    font-size: 38px;
    line-height: 52px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
    width: 72%;
    margin: 0;
}

.project-desc p {
    color: #615e5d;
    font-family: "Raleway";
    margin: 24px 0 50px;
}

.project-btn a {
    background: transparent;
    transition: .5s;
    background: linear-gradient(90deg, #c39e75 50%, transparent 0) repeat-x, linear-gradient(90deg, #c39e75 50%, transparent 0) repeat-x, linear-gradient(0deg, #c39e75 50%, transparent 0) repeat-y, linear-gradient(0deg, #c39e75 50%, transparent 0) repeat-y;
    background-size: 6px 2px, 6px 2px, 2px 6px, 2px 7px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    -webkit-animation: linearGradientMove 0.3s infinite linear;
    animation: linearGradientMove 0.3s infinite linear;
    z-index: 1;
    display: inline-block;
    position: relative;
    padding: 14px 40px;
    font-size: 16px;
    line-height: 24px;
    color: #c39e75;
}

.project-btn a:hover {
    color: #fff;
}

.project-btn a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    transform: scale(1);
    background: #c39e75;
    transition: .5s;
    z-index: -1;
}

.project-btn a:hover:before {
    width: 100%;
    left: 0;
    filter: hue-rotate(360deg);
}

.project-notice {
    margin: 82px 0;
    padding: 64px 82px;
    background: url(../images/main-thumb/blog-notice-1.jpg) right center no-repeat;
    background-size: cover;
}

.project-notice.style-two {
    background: url(../images/main-thumb/blog-notice.jpg)right center no-repeat;
    background-size: cover;
}

.notice-desc p {
    font-size: 26px;
    line-height: 42px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
    margin: 0;
}

.notice-title h5 {
    font-size: 18px;
    line-height: 42px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
}

.notice-designation h6 {
    font-size: 16px;
    line-height: 22px;
    color: #615e5d;
    font-weight: 400;
    font-family: "Raleway";
    margin-top: 4px;
}

.blog-pagination ul li {
    display: inline-block;
    margin: 0 4px;
}

.blog-pagination ul li button {
    font-size: 22px;
    color: #baa360;
    font-weight: 400;
    font-family: "Raleway";
    width: 50px;
    height: 50px;
    background: transparent;
    border: 1px solid #baa360;
    line-height: 50px;
    position: relative;
    z-index: 1;
    transition: .5s;
}

.blog-pagination {
    margin-top: 80px;
    text-align: center;
}

.blog-pagination ul li button:hover {
    color: #fff;
}

.blog-pagination ul li button:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #baa360;
    transform: scale(0);
    z-index: -1;
    transition: .5s;
}

.blog-pagination ul li button.active {
    background: #baa360;
    color: #fff;
}

.blog-pagination ul li button:hover:before {
    transform: scale(1);
    filter: hue-rotate(1);
}

.blog-about {
    text-align: center;
    padding: 42px 30px;
    background-color: #fcfbf7;
}

.blog-about-title h2 {
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 52px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
}

.blog-about-profile-title h6 {
    font-size: 18px;
    line-height: 52px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
    margin-top: 0;
}

.blog-about-desc p {
    margin-bottom: 34px;
    font-size: 16px;
    line-height: 22px;
    color: #615e5d;
    font-weight: 400;
    font-family: "Raleway";
}

.blog-about-social ul li {
    display: inline-block;
    margin: 6px;
}

.blog-about-social ul li a {
    color: #252525;
    transition: .5s;
    font-size: 16px;
    line-height: 22px;
}

.blog-about-social ul li a:hover {
    color: #baa360;
    filter: hue-rotate(360deg);
}

.blog-search {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 50px 0 60px;
    border-bottom: 1px solid #2525252b;
}

.blog-search-input input {
    width: 100%;
    padding: 0;
    margin: 0;
    display: inline-block;
    border: none;
    background: transparent;
}

.blog-search-input input::placeholder {
    font-size: 16px;
    line-height: 22px;
    color: #615e5d;
    font-weight: 400;
    font-family: "Raleway";
}

.blog-search-btn button {
    font-size: 16px;
    line-height: 22px;
    color: #baa360;
    border: none;
    background: transparent;
}

.blog-search-input input:focus,
.blog-search-btn button:focus {
    background: transparent;
    border: none;
    outline: none !important;
}

.blog-category {
    padding: 40px;
    background: #fcfbf7;
}

.blog-category-title h3 {
    font-size: 26px;
    line-height: 52px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
    margin: 0 0 10px;
}

.blog-category ul li a {
    display: inline-block;
    font-size: 16px;
    line-height: 22px;
    color: #615e5d;
    font-weight: 400;
    font-family: "Raleway";
    margin: 6px 0;
    transition: .5s;
}

.blog-category ul li a:hover {
    color: #b3a36d;
    filter: hue-rotate(360deg);
}

.blog-latest-post {
    padding: 40px 40px 20px;
    background: #fcfbf7;
    margin-top: 38px;
    margin-bottom: 38px;
}

.blog-latest-post-title h3 {
    font-size: 26px;
    line-height: 52px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
    margin: 0 0 10px;
}

.blog-latest-post-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.blog-latest-post-title h4 {
    display: inline-block;
    font-size: 18px;
    line-height: 26px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
}

.blog-latest-post-date h6 {
    font-size: 16px;
    line-height: 22px;
    color: #615e5d;
    font-weight: 400;
    font-family: "Raleway";
    margin-top: 4px;
}

.blog-tag {
    padding: 40px 40px 20px;
    background: #fcfbf7;
}

.blog-tag-title h3 {
    font-size: 26px;
    line-height: 52px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
    margin: 0 0 10px;
}

.blog-tag ul li {
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 20px;
}

.blog-tag ul li a {
    font-size: 16px;
    line-height: 22px;
    color: #baa360;
    font-weight: 400;
    font-family: "Raleway";
    background-color: transparent;
    border: 1px solid #baa360;
    display: inline-block;
    padding: 6px 22px;
    transition: .5s;
    position: relative;
    z-index: 1;
}

.blog-tag ul li a:hover {
    color: #fff;
}

.blog-tag ul li a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #baa360;
    transform: scale(0);
    z-index: -1;
    transition: .5s;
}

.blog-tag ul li a:hover:before {
    transform: scale(1);
    filter: hue-rotate(1);
}

/*<!--==============================================================-->
 <!-- Dreamhouse Blog Inner CSS End Here -->
<!--==============================================================-->*/

/*<!--==============================================================-->
 <!-- Dreamhouse Testimonial Inner CSS Start Here -->
<!--==============================================================-->*/

section.testimonial-inner-section {
    padding: 100px 0;
    text-align: center;
    position: relative;
}

.testimonial-inner-shape {
    transform: rotate(180deg);
    transition: .5s;
    display: inline-block;
}

.testimonial-inner-shape:hover {
    transform: rotate(0);
}

.testimonial-inner-shape i {
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #baa360;
    font-size: 70px;
    transition: .5s;
}

.testimonial-inner-title h1 {
    font-size: 50px;
    line-height: 64px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
    margin-top: 8px;
}

.testimonial-inner-desc p {
    font-size: 28px;
    line-height: 42px;
    color: #615e5d;
    font-weight: 500;
    font-style: italic;
    font-family: "Raleway";
    margin: 27px 0 36px;
}

.testimonial-inner-profile {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    text-align: left;
}

.testimoniall-inner-icon {
    position: relative;
}

.testimoniall-inner-icon:before {
    position: absolute;
    content: '';
    top: -10px;
    left: -10px;
    width: 90px;
    height: 90px;
    border: 1px solid #2525255c;
    border-radius: 50%;
}

.testimoniall-inner-icon.style-two:before {
    top: -5px;
    left: 0px;
    width: 120px;
    height: 120px;
}

.testimonial-profile-title h5 {
    font-size: 22px;
    line-height: 29px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
    margin: 0;
}

.testimonial-inner-designation h6 {
    font-size: 16px;
    line-height: 22px;
    color: #baa360;
    font-weight: 400;
    font-family: "Raleway";
    margin-top: 10px;
}

section.testimonial-inner-section .owl-nav {
    display: inline-block;
}

section.testimonial-inner-section .owl-prev {
    display: inline-block;
    position: absolute;
    top: 40%;
    left: -30px;
}

section.testimonial-inner-section .owl-prev i,
section.testimonial-inner-section .owl-next i {
    font-size: 50px;
    color: #b3a37b;
    position: relative;
}

section.testimonial-inner-section .owl-prev i::after {
    position: absolute;
    content: '';
    top: 17px;
    left: -4px;
    width: 34px;
    height: 34px;
    border-radius: 30px;
    border: 1px solid #b3a37b;
}

section.testimonial-inner-section .owl-next {
    display: inline-block;
    position: absolute;
    top: 40%;
    right: -30px;
}

section.testimonial-inner-section .owl-next i::after {
    position: absolute;
    content: '';
    top: 17px;
    left: 18px;
    width: 34px;
    height: 34px;
    border-radius: 30px;
    border: 1px solid #b3a37b;
}


/*<!--==============================================================-->
 <!-- Dreamhouse Testimonial Inner CSS End Here -->
<!--==============================================================-->*/

/*<!--==============================================================-->
 <!-- Dreamhouse Contact Inner CSS Start Here -->
<!--==============================================================-->*/

section.contact-inner-section {
    padding: 100px 0;
}

.contact-inner-sub-title h5 {
    margin: 0;
    font-size: 18px;
    line-height: 26px;
    color: #baa360;
    font-weight: 500;
    font-family: "Raleway";
}

.contact-inner-title h1 {
    font-size: 42px;
    line-height: 56px;
    color: #252525;
    font-weight: 400;
    font-family: "Marcellus";
    margin-bottom: 36px;
}

.engine-modify-list i {
	color: #c39d76;
	padding: 0 6px 0 0;
}

.form-top, .form-middle {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 20px;
}

.form-name input, .form-mail input, .form-date input, .form-time input {
	background: transparent;
	padding: 10px 20px;
	border: 1px solid #e7e7e7;
	width: 18.3rem;
	margin: 0;
	color: rgb(97 94 93 / 70%);
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
}

.form-name input:focus {
    background: transparent;
}

.form-name input::placeholder,
.form-mail input::placeholder,
.form-bottom textarea::placeholder {
    opacity: 0.702;
    font-size: 16px;
    line-height: 26px;
    color: #615e5d;
    font-weight: 400;
    font-family: "Raleway";
}

.form-bottom textarea {
    height: 200px;
    width: 97%;
    padding: 10px 20px;
    border: 1px solid #e7e7e7;
    resize: none;
}

.form-btn {
    margin-top: 50px;
}

.form-btn button {
    background: transparent;
    transition: .5s;
    background: linear-gradient(90deg, #c39e75 50%, transparent 0) repeat-x, linear-gradient(90deg, #c39e75 50%, transparent 0) repeat-x, linear-gradient(0deg, #c39e75 50%, transparent 0) repeat-y, linear-gradient(0deg, #c39e75 50%, transparent 0) repeat-y;
    background-size: 6px 2px, 6px 2px, 2px 6px, 2px 7px;
    background-position: 0 0, 0 100%, 0 0, 100% 0;
    -webkit-animation: linearGradientMove 0.3s infinite linear;
    animation: linearGradientMove 0.3s infinite linear;
    z-index: 1;
    display: inline-block;
    position: relative;
    padding: 14px 40px;
    font-size: 16px;
    line-height: 24px;
    border: none;
    color: #c39e75;
}

.form-btn button:hover {
    color: #fff;
}

.form-btn button:before {
    position: absolute;
    content: '';
    top: 0;
    left: 50%;
    width: 0;
    height: 100%;
    transform: scale(1);
    background: #c39e75;
    transition: .5s;
    z-index: -1;
}

.form-btn button:hover:before {
    width: 100%;
    left: 0;
    filter: hue-rotate(360deg);
}

.contact-location iframe {
    width: 100%;
    height: 692px;
}

/*<!--==============================================================-->
 <!-- Dreamhouse Contact Inner CSS End Here -->
<!--==============================================================-->*/

/*================================================
 <-- Carvally Blog Details Inner Page CSS Start -->
================================================*/

.blog-details-thumb img {
    width: 100%;
}

.blog-post-date h5 {
    font-size: 18px;
    margin-top: 22px;
}

.blog-post-by h5 {
    font-size: 16px;
}

.blog-post-by a {
    color: #c39d76;
}

.blog-title h2 {
    font-size: 36px;
    margin: 20px 0 20px;
    font-family: 'Marcellus', serif;
}

.blog-details-desc span {
    color: #c39d76;
    font-weight: 500;
}

.style-five .about-banner-btn {
    width: 524px;
}

.notice {
    display: flex;
    gap: 26px;
    align-items: center;
    border-radius: 4px;
    background-color: #f5f5f5;
    padding: 30px;
    margin-bottom: 40px;
}

.notice-content p {
    font-size: 20px;
    line-height: 30px;
    color: #252525;
    font-weight: 400;
    font-style: italic;
    font-family: 'Marcellus', serif;
    margin: 0;
}

.blog-desc.style-two p {
    margin-bottom: 32px;
}

.modify-thumb-left img {
    width: 100%;
    margin-bottom: 40px;
}

.modify-thumb-right img {
    width: 100%;
    margin-bottom: 40px;
}

.shere-option {
    padding: 32px 0;
    margin: 30px 0;
    border-top: 1px solid rgba(13,14,20,0.10196078431372549);
    border-bottom: 1px solid rgba(13,14,20,0.10196078431372549);
    display: flex;
    gap: 20px;
    align-items: center;
}

.shere-title h5 {
    font-size: 18px;
    line-height: 25px;
    color: #252525;
    font-weight: 500;
    margin: 0;
}

.shere-list li {
    display: inline-block;
    margin-right: 6px;
}

.shere-list a {
    width: 36px;
    height: 36px;
    border-radius: 2px;
    background-color: #ffffff;
    border: 1px solid rgba(13,14,20,0.1);
    display: inline-block;
    line-height: 36px;
    text-align: center;
    font-size: 14px;
    background: #fff;
    color: #252525;
    position: relative;
    z-index: 1;
    transition: .4s;
}

.shere-list a:hover{
    color: #fff;
}

.shere-list a:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #c39d76;
    border-radius: 3px;
    transform: scale(0);
    z-index: -1;
    transition: .4s;
}

.shere-list a:hover:before {
    transform: scale(1);
    filter: hue-rotate(360deg);
}

.related-blog-single-box {
    border-radius: 4px;
    filter: drop-shadow(0px 5px 30px rgba(226,226,226,0.5));
    background-color: #ffffff;
}

.blog-box-thumb img {
    width: 100%;
}

.blog-box-thumb {
    position: relative;
    overflow: hidden;
}

.blog-box-thumb:before {
    position: absolute;
    content: '';
    top: 0%;
    left: 0;
    width: 0%;
    height: 100%;
    background: rgb(27 27 30 / 60%);
    transition: .4s;
    border-radius: 4px 0 0 0;
}

.blog-box-thumb:after {
    position: absolute;
    content: '';
    top: 0%;
    right: 0;
    width: 0%;
    height: 100%;
    background: rgb(27 27 30 / 60%);
    transition: .4s;
    border-radius: 0 4px 0 0;
}

.related-blog-single-box:hover .blog-box-thumb:before,
.related-blog-single-box:hover .blog-box-thumb:after{
    width: 50%;
}

 .blog-content {
    padding: 22px 32px;
    position: relative;
    z-index: 1;
}

.blog-content:before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ee1c25;
    border-radius: 0 0 4px 4px;
    transition: .4s;
    transform: scale(0);
    z-index: -1;
}

.related-blog-single-box:hover .blog-content:before{
    transform: scale(1);
    background: #252525;
    filter: hue-rotate(360deg);
}

.blog-box-date h5 {
    font-size: 16px;
    line-height: 50px;
    color: #c39d76;
    font-weight: 400;
    font-family: "Ubuntu";
    margin: 0;
    transition: #fff;
}

.related-blog-single-box:hover .blog-box-date h5{
    color: #fff;
}

.blog-box-title a {
    display: inline-block;
    font-size: 24px;
    line-height: 30px;
    color: #252525;
    font-weight: 500;
    margin: 10px 0 20px;
    transition: .4s;
}

.related-blog-single-box:hover .blog-box-title a {
    color: #fff;
}

.blog-box-footer {
    align-items: center;
    display: flex;
    gap: 16px;
    border-top: 1px solid rgba(39,39,39,0.10196078431372549);
    padding: 20px 0 0;
    transition: .4s;
}

.related-blog-single-box:hover .blog-box-footer{
    border-top: 1px solid #fff;
}

.posted-by a,
.post-comment a {
    font-size: 15px;
    line-height: 30px;
    color: #252525;
    font-weight: 400;
    display: inline-block;
    transition: .4s;
}

.related-blog-single-box:hover .posted-by a,
.related-blog-single-box:hover .post-comment a,
.related-blog-single-box:hover .posted-by a i,
.related-blog-single-box:hover .post-comment a i{
    color: #fff;
}

.posted-by a i ,
.post-comment a i {
    color: #c39d76;
    transition: .4s;
}

.blog-box-btn a {
    color: #252525;
    margin-left: 32px;
    transition: .4s;
}

.related-blog-single-box:hover .blog-box-btn a{
    color: #fff;
}

.blog-comment {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 30px;
    border-bottom: 1px solid rgba(39,39,39,0.10196078431372549);
}

.profile-name {
    gap: 30px;
    display: flex;
    position: relative;
}

.profile-icon i {
    font-size: 70px;
    color: #6461619e;
}

.profile-name h5 {
    font-size: 18px;
    margin: 0;
}

.review-date h5 {
    font-size: 16px;
    color: #575656f2;
    margin-top: 3px;
}

.reply button {
    background: transparent;
    font-size: 14px;
    color: #c39d76;
}

.add-review {
    margin-top: 40px;
}

.blog-comment.style-two {
    margin-left: 94px;
    border: none;
}

.add-comment-title h3 {
    font-size: 30px;
    line-height: 30px;
    color: #252525;
    font-weight: 600;
}

section.blog-inner-section .form-top{
    margin-top: 30px;
}


/*================================================
 <-- Carvally Blog Details Inner Page CSS End -->
================================================*/






/*<!-- ============================================================== -->
 <!-- Dreamhouse animation CSS start here -->
<!-- ============================================================== -->*/

@keyframes Dance {

    0% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }
    50% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    100% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);
    }
}


@keyframes zoomIn {
    from{
      -webkit-transform: scale(.7) translateY(100px);
      transform: scale(.7) translateY(100px);
      opacity: 0;
    }
    to{
      -webkit-transform: scale(1) translateY(0);
      transform: scale(1) translateY(0);
      opacity: 1;
    }
  }

@-webkit-keyframes linearGradientMove {
    100% {
      background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
  }
  
  @keyframes linearGradientMove {
    100% {
      background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
  }

  
@keyframes Ripple {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
    50% {
        transform: scale(3);
        -webkit-transform: scale(3);
    }    
    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

/*<!-- ============================================================== -->
 <!-- Dreamhouse animation CSS End here -->
<!-- ============================================================== -->*/


/*===========================
<-- dreamhouse Loader Css -->
=============================*/


#loader  {
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 8.8s;
    background: #011015;
    z-index: 999;
}

.ring {
    width: 200px;
    height: 200px;
    border: 0px solid #011015;
    border-radius: 50%;
    position: absolute;
}

.ring:nth-child(1) {
    border-bottom-width: 8px;
    border-color: #bbf737;
    animation: rotate 2s linear infinite;
    animation-delay: .56s;
}

.ring:nth-child(2) {
    border-right-width: 8px;
    border-color: #ffee00;
    animation: rotate2 2s linear infinite;
    animation-delay: .56s;
}

.ring:nth-child(3) {
    border-left-width: 8px;
    border-color: #00a2ff;
    animation: rotate3 2s linear infinite;
    animation-delay: .56s;
}

.ring:nth-child(4) {
    border-top-width: 8px;
    border-color: #00ff4c;
    animation: rotate4 2s linear infinite;
    animation-delay: .56s;
}

#loader h4 {
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 4px;
    color: #fff;
    margin: 0;
}

@keyframes rotate {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
        -webkit-transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate2 {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
        -webkit-transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate3 {
    0% {
        transform: rotateX(-150deg) rotateY(-235deg) rotateZ(0deg);
        -webkit-transform: rotateX(-150deg) rotateY(-235deg) rotateZ(0deg);
    }
    
    100% {
        transform: rotateX(-150deg) rotateY(-235deg) rotateZ(360deg);
        -webkit-transform: rotateX(-150deg) rotateY(-235deg) rotateZ(360deg);
    }
}

@keyframes rotate4 {
    0% {
        transform: rotateX(220deg) rotateY(20deg) rotateZ(0deg);
        -webkit-transform: rotateX(220deg) rotateY(20deg) rotateZ(0deg);
    }
    
    100% {
        transform: rotateX(220deg) rotateY(20deg) rotateZ(360deg);
        -webkit-transform: rotateX(220deg) rotateY(20deg) rotateZ(360deg);
    }
}  


/*
<!-- ============================================================== -->
<!--Scrollup Button Section -->
<!-- ============================================================== -->*/

.scroll-area{
    position: relative;
    z-index: 999;
}

.scroll-area .go-top {
    position: fixed;
    cursor: pointer;
    top: 0;
    right: 30px;
    color: #ffffff;
    background-image: -moz-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
    background-image: -webkit-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
    z-index: 9999;
    width: 45px;
    text-align: center;
    height: 45px;
    line-height: 42px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.9s ease-out 0s;
    -webkit-transition: all 0.9s ease-out 0s;
    -moz-transition: all 0.9s ease-out 0s;
    border-radius: 10px; 
}

.scroll-area .go-top i {
    position: absolute;
    top: 50%;
    left: -4px;
    right: 0;
    margin: 0 auto;
    font-size: 15px;
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    transition: all 0.5s ease-out 0s;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;
}

.scroll-area .go-top i:last-child {
    opacity: 0;
    visibility: hidden;
    top: 60%; 
}

.scroll-area .go-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image: linear-gradient(to right, #0d0e14 0%, #0d0e14 100%);
    background-image: -ms-linear-gradient(0deg, #d1651a 0%, #c1282a 100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-out 0s;
    -webkit-transition: all 0.5s ease-out 0s;
    -moz-transition: all 0.5s ease-out 0s;;
    border-radius: 100%;
}

.scroll-area .go-top:focus, .scroll-area .go-top:hover {
    color: #fff; 
}

.scroll-area .go-top:focus::before, .scroll-area .go-top:hover::before {
    opacity: 1;
    visibility: visible; 
}

.scroll-area .go-top:focus i:first-child, .scroll-area .go-top:hover i:first-child {
    opacity: 0;
    top: 0;
    visibility: hidden;
}

.scroll-area .go-top:focus i:last-child, .scroll-area .go-top:hover i:last-child {
    opacity: 1;
    visibility: visible;
    top: 50%; 
}

.scroll-area .go-top.active {
    top: 95%;
    transform: translateY(-98%);
    -webkit-transform: translateY(-98%);
    -moz-transform: translateY(-98%);
    opacity: 1;
    visibility: visible;
    border-radius: 0;
    right: 30px;
    border-radius:100%;
}

.top-wrap {
position: relative; 
}

.top-wrap .go-top-button {
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    top: 3px;
    z-index: 1;
    background: #ed1c24;
}

.top-wrap .go-top-button i {
    font-size: 20px;
    font-weight: 700;
    padding-left: 4px;
    color: #fff;
}

.top-wrap .go-top-button::after {
    z-index: -1;
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 45px;
    height: 45px;
    animation: ripple 1.6s ease-out infinite;
    -webkit-animation: ripple 1.6s ease-out infinite;
    -moz-animation: ripple 1.6s ease-out infinite;
    opacity: 0;
    background-image: -moz-linear-gradient(0deg, #ed1c24 0%, #ed1c24 100%);
    background-image: -webkit-linear-gradient(0deg, #ed1c24 0%, #ed1c24 100%);
    border-radius: 100%;
}

.top-wrap .go-top-button:hover {
    background-color: #0d0e14;
    color: #fff; 
}

.scroll-area.home-two .top-wrap .go-top-button {
    background: #00AFF5;
}
.scroll-area.home-two .top-wrap .go-top-button::after {
    background-image: -moz-linear-gradient(0deg, #00AFF5 0%, #00AFF5 100%);
    background-image: -webkit-linear-gradient(0deg, #00AFF5 0%, #00AFF5 100%);
}

@keyframes ripple {
0%, 35% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 1; }
50% {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
    opacity: 0.8; }
100% {
    opacity: 1;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2); } 
}

/*------back-to-top------------*/

.prgoress_indicator {
    position: fixed;
    right: 50px;
    bottom: 20px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(24, 24, 24, 0.2);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transform: translateY(15px) !important;
    transition: all 200ms linear !important;
}

.prgoress_indicator.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
}

.prgoress_indicator::after {
    position: absolute;
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: #d6975f;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    font-weight: 900;
    z-index: 1;
    transition: all 200ms linear !important;
}

.prgoress_indicator::before {
  position: absolute;
  content: "\f106";
  font-family: "Font Awesome 5 Free";
  text-align: center;
  line-height: 46px;
  font-size: 18px;
  font-weight: 900;
  opacity: 0;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  z-index: 2;
  transition: all 200ms linear !important;
}

.prgoress_indicator:hover ::after {
  color: #2871ff;
}

.prgoress_indicator:hover ::before {
  opacity: 1;
}

.prgoress_indicator svg path {
  fill: none;
}

.prgoress_indicator svg.progress-circle path {
    stroke: #d6975f;
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear !important;
}



/* curser point */

.curser {
    position: fixed;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border: 1px solid #c39d76;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    transition: .1s;
}

.curser2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background:  #c39d76;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    transition: .15s;
    animation: Ripple 1.6s ease-in-out infinite;
    -webkit-animation: Ripple 1.6s ease-in-out infinite;
    -moz-animation: Ripple 1.6s ease-in-out infinite;
}

/* curser point */