/*

TemplateMo 591 villa agency

https://templatemo.com/tm-591-villa-agency

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
/* Font family changed to Times New Roman */

/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Times New Roman', Times, serif;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  color: #1e1e1e;
  margin-top: 0px;
  margin-bottom: 0px;
  font-weight: 700;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 28px;
  color: #4a4a4a;
}

img {
  width: 100%;
  overflow: hidden;
}


/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  font-family: 'Times New Roman', Times, serif;
}

::selection {
  background: #0071f8;
  color: #fff;
}

::-moz-selection {
  background: #0071f8;
  color: #fff;
}

.section {
  margin-top: 120px;
}

.section-heading {
  margin-bottom: 70px;
}

.section-heading h2 {
  font-size: 40px;
  font-weight: 700;
  text-transform: capitalize;
  margin-top: 20px;
  line-height: 56px;
}

.section-heading h2 em {
  font-style: normal;
  color: #0071f8;
}

.section-heading h6 {
  color: #ee626b;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
}

.icon-button a {
  display: inline-block;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  height: 50px;
  line-height: 50px;
  padding: 0px 30px 0px 0px;
  border-radius: 25px;
  transition: all .3s;
}

.icon-button a i {
  background-color: #00143f;
  height: 50px;
  width: 50px;
  text-align: center;
  border-radius: 50%;
  line-height: 50px;
  display: inline-block;
  margin-right: 15px;
  margin-left: -1px;
}

.icon-button a:hover {
  color: #00143f;
}

.icon-button a:hover i {
  color: #fff;
}

.main-button a {
  display: inline-block;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  padding: 0px 30px;
  border-radius: 25px;
  transition: all .3s;
}

.main-button a:hover {
  background-color: #00143f;
  color: #fff;
}

/* 
---------------------------------------------
Pre-loader Style
--------------------------------------------- 
*/

.js-preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.99);
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  z-index: 9999;
  -webkit-transition: opacity 0.25s ease;
  transition: opacity 0.25s ease;
}

.js-preloader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@-webkit-keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@keyframes dot {
  50% {
      -webkit-transform: translateX(96px);
      transform: translateX(96px);
  }
}

@-webkit-keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

@keyframes dots {
  50% {
      -webkit-transform: translateX(-31px);
      transform: translateX(-31px);
  }
}

.preloader-inner {
  position: relative;
  width: 142px;
  height: 40px;
  background: transparent;
}

.preloader-inner .dot {
  position: absolute;
  width: 16px;
  height: 16px;
  top: 12px;
  left: 15px;
  background: #00143f;
  border-radius: 50%;
  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-animation: dot 2.8s infinite;
  animation: dot 2.8s infinite;
}

.preloader-inner .dots {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  margin-top: 12px;
  margin-left: 31px;
  -webkit-animation: dots 2.8s infinite;
  animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
  margin-left: 16px;
  background: #00143f;
  border-radius: 50%;
}



/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.sub-header {
  background: transparent !important;
  padding: 10px 0px;
  border-bottom: 1px solid #eee;
}

.sub-header ul li {
  display: inline-block;
}

.sub-header ul.social-links {
  text-align: right;
}

.sub-header ul.social-links li {
  margin-left: 8px;
}

.sub-header ul.social-links li a {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #cdcdcd;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  color: #fff;
  font-size: 14px;
  transition: all .3s;
}

.sub-header ul.social-links li a:hover {
  background-color: #00143f;
}

.sub-header ul.info li {
  font-size: 14px;
  color: #7a7a7a;
  border-right: 1px solid #eee;
  margin-right: 25px;
  padding-right: 25px;
}

.sub-header ul.info li:last-child {
  margin-right: 0px;
  padding-right: 0px;
  border-right: none;
}

.sub-header ul.info li i {
  font-size: 20px;
  color: #00143f;
  margin-right: 8px;
}

.background-header {
  /* position: fixed; */
  top: 0;
  left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.12);   /* transparan */
  backdrop-filter: blur(6px);
  box-shadow: none;
  transition: 
    background 0.35s cubic-bezier(.23,1.03,.45,1),
    box-shadow 0.4s cubic-bezier(.23,1.03,.45,1),
    opacity 0.5s cubic-bezier(.23,1.03,.45,1),
    transform 0.5s cubic-bezier(.23,1.03,.45,1);
}
.background-header.solid {
  background: #fff;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15);
  /* backdrop-filter: none; */
}


.background-header:not(.solid) .main-nav .nav li a {
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.background-header.solid .main-nav .nav li a {
  color: #fff;
  text-shadow: none;
}


.header-area {
  position: relative;
  background: transparent !important;
  height: 100px;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
  overflow: visible;
}

.header-area .main-nav {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 100px;
  padding: 0;
}

.header-area .main-nav .logo {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  display: inline-block;
  display: flex;
  align-items: center;
  height: 100px;
}

.header-area .main-nav .logo img {
  max-height: 80px;
  width: auto;
  display: block;
  vertical-align: middle;
  margin: 0;
  padding: 10px 0;
}

.header-area .main-nav .logo h1 {
  line-height: 100px;
  font-size: 28px;
  text-transform: uppercase;
  color: #1e1e1e;
  font-weight: 700;
  letter-spacing: 2px;
}

.background-header .main-nav .logo h1 {
  line-height: 80px;
}

.background-header .main-nav .logo {
  height: 80px;
}

.background-header .main-nav .logo img {
  max-height: 65px;
  padding: 8px 0;
}

.header-area .main-nav ul.nav {
  flex-basis: 100%;
  margin-top: 30px;
  justify-content: right;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li {
  padding-left: 10px;
  padding-right: 10px;
  /* height: 100px; */
  line-height: 48px;
}

.header-area .main-nav .nav li a {
  display: block;
  padding: 12px 20px;
  font-weight: 600;
  font-size: 15px;
  text-transform: capitalize;
  color: #1e1e1e;
  -webkit-transition: all 0.4s ease 0s;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  border-radius: 25px;
  letter-spacing: .25px;
  background: rgba(237, 205, 148, 0.1);
  border: 1px solid rgba(237, 205, 148, 0.2);
  text-align: center;
  margin: 0 2px;
}


.header-area .main-nav .nav li a:hover {
  color: #1e1e1e;
  background: linear-gradient(135deg, #edcd94 0%, #f0d4a0 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(237, 205, 148, 0.3);
}

.background-header .main-nav .nav li a.active {
  color: #1e1e1e;
  background: linear-gradient(135deg, #edcd94 0%, #f0d4a0 100%);
  font-weight: 700;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  position: absolute;
  top: 23px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 22px;
}

.background-header .main-nav ul.nav {
  margin-top: 20px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.visible{
  display:inline !important;
}

@media (min-width: 768px) {
  .header-area .main-nav .nav li {
    padding-left: 12px;
    padding-right: 12px;
    height: 44px !important;
    line-height: 44px !important;
  }
  .header-area .main-nav .nav li a {
    height: 44px !important;
    line-height: 44px !important;
    font-size: 15px;
    display: flex;
    align-items: center;
    padding: 0 8px;
  }
  .dropdown-menu-desktop {
    display: none;
    /* position: absolute; */
    top: 100%;     /* langsung di bawah parent */
    left: 0;
    min-width: 148px;
    background: rgba(24, 28, 44, 0.96);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(20,20,30,0.12);
    z-index: 1001;
    padding: 4px 0;
    margin: 0;
    list-style: none;
    border: 1px solid #23263c;
    backdrop-filter: blur(2px);
    transition: all 0.13s cubic-bezier(.23,1.03,.45,1);
  }
  .nav li.open > .dropdown-menu-desktop {
    display: block;
    animation: fadeDown 0.12s;
  }
}



@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 5px;
    padding-right: 5px;
  }

}

@media (max-width: 767px) {
  .background-header .main-nav {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
  }
  .background-header .main-nav .nav,
  .header-area .main-nav .nav {
    background: #ffffff !important;
    padding: 0;
    width: 100%;
    border: none;
    box-shadow: none;
  }
  .background-header .main-nav .nav li a,
  .header-area .main-nav .nav li a {
    line-height: 50px;
    height: 50px;
    font-weight: 500;
    color: #1e1e1e;
    background: transparent !important;
    text-align: center;
    padding: 0;
    transition: all 0.3s ease;
    width: 100%;
    border: none;
    border-radius: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .background-header .main-nav .nav li,
  .header-area .main-nav .nav li {
    border-top: 1px solid #e0e0e0;
    background-color: #ffffff;
    color: #1e1e1e  !important;
    height: 50px;
    margin: 0;
    width: 100%;
    border-radius: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
    margin: 0;
    padding: 0;
  }
  .header-area .main-nav .logo {
    position: absolute;
    left: 30px;
    top: 0px;
  }
  .background-header .main-nav .logo {
    top: 0px;
  }
  .background-header .main-nav .border-button {
    top: 0px !important;
  }
  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #1e1e1e!important;
    background: #edcd94 !important;
    opacity: 1;
    text-align: center;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  
  .header-area .main-nav .nav li a:hover {
    background: #edcd94 !important;
    color: #1e1e1e;
    text-align: center;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  
  .header-area .main-nav .nav li a.active {
    background: #edcd94 !important;
    color: #1e1e1e;
    font-weight: 600;
    text-align: center;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  
  /* Memastikan menu Hubungi Kami terlihat jelas di mobile */
  .header-area .main-nav .nav li:last-child a {
    background: transparent !important;
    color: #1e1e1e !important;
    font-weight: 500 !important;
    text-align: center;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  
  .header-area .main-nav .nav li:last-child a:hover {
    background: #edcd94 !important;
    color: #1e1e1e !important;
    font-weight: 600 !important;
  }
  
  /* Memastikan menu terakhir terlihat jelas di mobile */
  .header-area .main-nav .nav li:last-child {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .header-area .main-nav .nav li:last-child a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area .nav li:last-child a {
    background-color: transparent !important;
    font-weight: 500 !important;
    text-transform: capitalize !important;
    color: #1e1e1e !important;
  }
  .header-area {
    padding: 0px 15px;
    height: 80px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }
  
  .header-area .main-nav .nav.active {
    display: flex !important;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }

  .header-area.header-sticky .nav {
    margin-top: 80px !important;
  }
  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #ffffff;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  /* dropdown design */ 
  .nav .submenu-injected {
    background: #edcd94 !important;
    color: #1e1e1e !important;
    padding-left: 0 !important; /* lebih dalam dari menu utama */
    border-bottom: 1px solid #e0e0e0;
  }
  .nav .submenu-injected a {
    color: #1e1e1e !important;
    font-size: 15px !important;
  }
  .nav .submenu-injected::before {
    content: "";
    display: inline-block;
    width: 7px; height: 7px;
    background: #1e1e1e;
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: middle;
    margin-left: 0;
  }

  /* Style menu utama dan injected harus sama */
  .main-nav .nav li,
  .main-nav .nav .submenu-injected {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    background: #ffffff !important;
    color: #1e1e1e !important;
    border-top: 1px solid #e0e0e0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .main-nav .nav li a,
  .main-nav .nav .submenu-injected a {
    width: 100%;
    display: block;
    padding: 0;
    line-height: 50px;
    height: 50px;
    color: #1e1e1e !important;
    font-size: 16px;
    background: transparent !important;
    border: none;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    margin: 0;
  }
  .main-nav .nav .submenu-injected a {
    padding-left: 20px !important;  /* Submenu lebih masuk dari menu utama */
    color: #1e1e1e !important;
    font-size: 15px !important;
  }
  
  /* Ensure full width for active and hover states */
  .main-nav .nav li a.active,
  .main-nav .nav li a:hover {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }
  
  /* Additional fix for mobile navigation spacing */
  @media (max-width: 767px) {
    .header-area .main-nav .nav li a.active,
    .header-area .main-nav .nav li a:hover,
    .background-header .main-nav .nav li a.active,
    .background-header .main-nav .nav li a:hover {
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      border-radius: 0 !important;
      box-sizing: border-box !important;
      left: 0 !important;
      right: 0 !important;
    }
    
    .header-area .main-nav .nav li,
    .background-header .main-nav .nav li {
      padding: 0 !important;
      margin: 0 !important;
      width: 100% !important;
    }
  }
  .main-nav .nav .submenu-injected a::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    background: #1e1e1e;
    border-radius: 50%;
    margin-right: 12px;
    margin-left: 0;
    vertical-align: middle;
  }  
  
}

/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/
.main-banner {
  min-height: 600px; /* Increased height to prevent cropping */
  overflow: hidden; /* Prevent any overflow issues */
  position: relative; /* For proper positioning */
}
@media (max-width: 767px) {
  .main-banner {
    min-height: 280px; /* Larger height for better banner visibility */
  }
  
  .main-banner .item {
    background-position: center center !important; /* Center the image to show more */
    background-size: cover !important;
    padding: 35px 0 45px 0 !important;
    min-height: 305px !important;
    margin-top: 10px !important;
  }
  
  .main-banner .item-1 {
    background-position: center center !important; /* Show more of the first banner */
  }
  
  .main-banner .item-2 {
    background-position: center center !important; /* Show more of the second banner */
  }
  
  .main-banner .item-3 {
    background-position: center center !important; /* Show more of the third banner */
  }
}

/* Tablet devices (768px to 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .main-banner {
    min-height: 400px; /* Optimal height for tablets */
  }
  
  .main-banner .item {
    background-position: center center !important;
    padding: 100px 5% 120px 5% !important; /* Reduced horizontal padding for tablets */
    min-height: 400px !important;
  }
}

/* Mobile specific optimizations for more compact banner */
@media (max-width: 767px) {
  .main-banner .owl-carousel {
    height: auto !important; /* Allow natural height */
  }
  
  .main-banner .owl-carousel .owl-stage-outer {
    height: auto !important;
  }
  
  .main-banner .owl-carousel .owl-stage {
    height: auto !important;
  }
  
  .main-banner .owl-carousel .owl-item {
    height: auto !important;
  }
  
  /* Additional optimizations for full banner visibility */
  .main-banner .item {
    background-size: cover !important;
    background-position: center center !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Ensure layout below follows banner without gaps */
  .main-banner + * {
    margin-top: 0 !important;
  }
  
  /* Remove any extra spacing after banner */
  .main-banner {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Ensure featured section follows banner closely */
  .featured.section {
    margin-top: 0 !important;
    padding-top: 20px !important;
  }
  
  /* Force promo-form-container to follow banner directly */
  .promo-form-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }
  
  /* Ensure no gap between banner and promo form */
  .main-banner + .promo-form-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Fix all mainBanner related gaps */
  #mainBanner {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  #mainBanner .owl-carousel {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  #mainBanner .owl-carousel .owl-stage-outer {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  #mainBanner .owl-carousel .owl-stage {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  #mainBanner .owl-carousel .owl-item {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
}

/* Extra small devices (phones, 480px and down) */
@media (max-width: 480px) {
  .main-banner {
    min-height: 240px; /* Larger height for very small devices */
  }
  
  .main-banner .item {
    background-position: center center !important; /* Center to show more image */
    
  }
  
  .main-banner .item-1 {
    background-position: center center !important; /* Show more of the first banner */
  }
  
  .main-banner .item-2 {
    background-position: center center !important; /* Show more of the second banner */
  }
  
  .main-banner .item-3 {
    background-position: center center !important; /* Show more of the third banner */
  }
}


.main-title, .sub-title {
  opacity: 0;
  transform: translateY(30px);
  display: inline-block;
}

.main-title {
  font-size: 2.5rem;
  font-weight: 700;
  animation: titleFadeIn 1.1s cubic-bezier(.23,1.03,.45,1) forwards;
}

.sub-title {
  font-size: 1.2rem;
  font-weight: 400;
  color: #eee;
  letter-spacing: 0.5px;
  animation: titleFadeIn 1.1s cubic-bezier(.23,1.03,.45,1) 1.2s forwards;
}

/* Animation Keyframes */
@keyframes titleFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.main-banner .item {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 180px 20% 200px 20%; /* Reduced padding to prevent cropping */
  margin-top: 0px;
  min-height: 600px; /* Ensure minimum height */
}

.main-banner .item-1 {
  /* background-image: url(../images/banner-01.jpg); */
  background-image: url(../images/banner-01.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.main-banner .item-2 {
  background-image: url(../images/banner-02.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.main-banner .item-3 {
  background-image: url(../images/banner-03.jpg);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* .main-banner {
  background: rgba(200,100,100,0.3); 
} */
.main-banner .item span.category {
  background: transparent !important;
  color: #1e1e1e;
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
  padding: 6px 15px;
  display: inline-block;
  margin-bottom: 30px;
}

.main-banner .item span.category em {
  font-style: normal;
  color: #00143f;
}

.main-banner .item h2 {
  font-size: 62px;
  font-weight: 700;
  /* text-transform: uppercase; */
  color: #fff;
  line-height: 72px;
  width: 50%;
  margin-bottom: 0px;
}

.main-banner .owl-dots {
  position: absolute;
  bottom: 60px;
  left: 20%;
}

.main-banner .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  background: transparent !important;
  border-radius: 50%;
  margin-right: 10px;
  transition: all .5s;
}

.main-banner .owl-dots .active {
  background-color: #00143f;
}

.main-banner .owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50px);
}

.main-banner .owl-nav .owl-prev i,
.main-banner .owl-nav .owl-next i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  display: inline-block;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  opacity: 1;
  transition: all .3s;
}

.main-banner .owl-nav .owl-prev i {
  position: absolute;
  left: 45px;
}

.main-banner .owl-nav .owl-next i {
  position: absolute;
  right: 45px;
}

.main-banner .owl-nav .owl-prev i:hover,
.main-banner .owl-nav .owl-next i:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.5);
}
ini design drop downnya



/* 
---------------------------------------------
Featured Style
--------------------------------------------- 
*/

.featured .left-image {
  position: relative;
}

.featured .left-image img {
  padding-left: 55px;
}

.featured .left-image a {
  display: inline-block;
  width: 110px;
  height: 110px;
  line-height: 110px;
  background-color: #00143f;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: -55px;
}

.featured .section-heading {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 60px;
}

.featured .section-heading h2 {
  width: 70%;
}

.featured .accordion {
  margin-left: 10px;
  margin-right: 10px;
  --bs-accordion-border-radius: 10px;
  --bs-accordion-inner-border-radius: 10px;
  --bs-accordion-bg: #fafafa;
  --bs-accordion-border-color: none;
  border: none !important;
}

.featured .accordion-header {
  border-bottom: 1px solid #eaeaea;
}

.featured .accordion-button {
  box-shadow: none;
  font-size: 17px;
  font-weight: 500;
  color: #1e1e1e;
}

.featured .accordion-button:not(.collapsed) {
  color: #00143f;
  background-color: #fafafa;
  outline: none;
}

.featured .accordion-button::after {
  display: none;
}

.featured #headingThree {
  border-bottom: none;
}

.featured .accordion-item:last-of-type .accordion-collapse {
  border-top: 1px solid #eaeaea;
}

.featured .info-table {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
}

.featured .info-table ul li {
  display: block;
  margin-bottom: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid #eee;
}

.featured .info-table ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.featured .info-table ul li img {
  float: left;
  margin-right: 25px;
}

.featured .info-table ul li h4 {
  font-size: 22px;
  font-weight: 600;
}

.featured .info-table ul li h4 span {
  font-size: 15px;
  color: #aaa;
  font-weight: 400;
}

/* 
---------------------------------------------
Video Style
--------------------------------------------- 
*/

.video {
  background-image: url(../images/video-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 100px 0px 250px 0px;
  position: relative;
}

.video-content {
  margin-top: -240px;
}

.video .section-heading h2 {
  color: #fff;
}

.video-content .video-frame {
  position: relative;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.video-content .video-frame img {
  border-radius: 10px;
}

.video-content .video-frame a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-26px, -26px);
  width: 52px;
  height: 52px;
  background: transparent !important;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 52px;
  color: #00143f;
  outline: 15px solid rgba(254, 85, 37, 0.5);
  font-size: 18px;
}

/* 
---------------------------------------------
Fun Facts Style
--------------------------------------------- 
*/

.fun-facts {
  text-align: center;
  margin-top: 125px;
}

.fun-facts .counter {
  background-color: #ffeee9;
  position: relative;
  border-radius: 10px;
  width: 270px;
  padding: 20px 0px;
  display: inline-block;
}

.fun-facts .counter h2,
.fun-facts .counter p {
  display: inline-flex;
  vertical-align: middle;
}

.fun-facts .counter p {
  text-align: left;
  font-size: 16px;
  color: #1e1e1e;
  font-weight: 600;
  line-height: 28px;
}

.fun-facts .counter h2 {
  margin-right: 25px;
  font-size: 40px;
  color: #00143f;
}

.fun-facts .counter:after {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #00143f;
  border-radius: 50%;
  content: '';
  right: -25px;
  top: -25px;
}


/* 
---------------------------------------------
Best Deal Style
--------------------------------------------- 
*/

.best-deal {
  background-color: #fafafa;
  padding: 100px 0px;
}

.best-deal .tab-content img {
  padding: 0px 45px;
}

.best-deal .tabs-content .nav-link {
  font-size: 16px;
  font-weight: 500;
  background-color: #1e1e1e !important;
  border-radius: 5px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  padding: 0px 25px;
  color: #fff;
}

.best-deal .tabs-content .nav-tabs .nav-link.active {
  background-color: #00143f !important;
  color: #fff;
}

.best-deal .tabs-content ul.nav-tabs {
  border-bottom: none !important;
  margin-bottom: 80px;
  align-items: end;
  justify-content: end;
  margin-top: -130px;
}

.best-deal .tabs-content ul.nav-tabs li {
  padding-right: 0px;
  border-right: none;
  margin-left: 20px;
}

.best-deal .info-table {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
}

.best-deal .info-table ul li {
  display: block;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eee;
  text-align: left;
  font-size: 15px;
  color: #aaa;
  font-weight: 400;
}

.best-deal .info-table ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.best-deal .info-table ul li span {
  font-size: 20px;
  color: #1e1e1e;
  font-weight: 700;
  float: right;
  display: inline-block;
}

.best-deal .tabs-content {
  padding: 0px;
  background-color: transparent;
}

.best-deal .tabs-content h4 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 30px;
}

.best-deal .icon-button {
  margin-top: 30px;
}


/* 
---------------------------------------------
Properties Style
--------------------------------------------- 
*/

.properties .item {
  background-color: #fafafa;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 30px;
}

.properties .item img {
  border-radius: 10px;
}

.properties .item span.category {
  background-color: #fbd9cf;
  font-weight: 500;
  border-radius: 5px;
  font-size: 14px;
  color: #1e1e1e;
  padding: 5px 12px;
  display: inline-block;
  margin-top: 25px;
}

.properties .item h4 {
  font-size: 19px;
  margin: 25px 0px;
}

.properties .item h4 a {
  color: #1e1e1e;
}

.properties .item ul li {
  display: inline-block;
  font-size: 15px;
  color: #4a4a4a;
  margin-right: 20px;
}

.properties .item ul li span {
  font-weight: 600;
  color: #1e1e1e;
}

.properties .item ul {
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.properties .item h6 {
  font-size: 20px;
  color: #00143f;
  margin-top: 6px;
  display: inline-block;
  float: right;
  margin-top: 30px;
}

.properties .item .main-button {
  text-align: center;
}


/* 
---------------------------------------------
Contact Style
--------------------------------------------- 
*/

.contact {
  background-image: url(../images/contact-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding: 100px 0px 250px 0px;
  position: relative;
}

.contact .section-heading h2 {
  color: #fff;
}

.contact-content {
  margin-top: -240px;
  position: relative;
  z-index: 1;
}

.contact-content #map {
  border-radius: 10px;
  margin-bottom: 60px;
}

.contact-content .item {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 80px;
  width: 100%;
}

.contact-content .phone {
  margin-right: 15px;
}

.contact-content .phone h6 {
  font-size: 16px;
  word-break: break-word;
  hyphens: auto;
  white-space: normal;
  line-height: 1.2;
}

.contact-content .email {
  margin-left: 15px;
}

.contact-content .email h6 {
  font-size: 18px;
  word-break: break-word;
  hyphens: auto;
  white-space: normal;
  line-height: 1.2;
}

.contact-content .item img {
  float: none;
  margin-right: 0;
  margin-bottom: 15px;
  vertical-align: middle;
  flex-shrink: 0;
  width: 52px;
  height: auto;
}

.contact-content .item h6 {
  font-size: 20px;
  font-weight: 600;
  vertical-align: middle;
  word-wrap: break-word;
  word-break: break-all;
  line-height: 1.3;
  margin: 0;
  text-align: center;
}

.contact-content .item h6 span {
  font-size: 15px;
  color: #aaaaaa;
  font-weight: 400;
  display: block;
  margin-top: 5px;
}

.contact-content #contact-form {
  margin-left: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background: transparent !important;
}

.contact-content #contact-form label {
  font-size: 15px;
  color: #3a3a3a;
  margin-bottom: 15px;
}

.contact-content #contact-form input {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 30px;
  font-size: 14px;
  padding: 0px 15px;
}

.contact-content #contact-form textarea {
  width: 100%;
  height: 150px;
  max-height: 180px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 40px;
  font-size: 14px;
  padding: 15px 15px;
}

.contact-content #contact-form button {
  background-color: #1e1e1e;
  height: 44px;
  border-radius: 22px;
  padding: 0px 20px;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 500;
  transition: all .5s;
}

.contact-content #contact-form button:hover {
  background-color: #00143f;
}


/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer.footer-no-gap {
  margin-top: 0px;
}

footer {
  margin-top: 150px;
  background-color: #1e1e1e;
  min-height: 100px;
}

footer p {
  text-align: center;
  line-height: 100px;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
}

footer p a {
  color: #fff;
  transition: all .3s;
  position: relative;
  z-index: 3;
}

footer p a:hover {
  opacity: 0.75;
}

/* Footer Styles */
.footer-pro {
  background: #1a324c;
  color: #fff;
  padding: 60px 0 30px;
  margin-top: 0;
}

.footer-logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.footer-logo-img {
  width: 100px;
  height: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.footer-brand-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.footer-brand-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0;
  font-family: 'Times New Roman', Times, serif;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.footer-brand-subtitle {
  font-size: 0.85rem;
  color: #edcd94;
  margin-bottom: 0;
  font-family: Arial, sans-serif;
  font-weight: 500;
  line-height: 1.3;
}

.footer-brand-company {
  font-size: 0.75rem;
  color: #ccc;
  margin-bottom: 0;
  font-family: Arial, sans-serif;
  font-weight: 400;
  line-height: 1.2;
}

.footer-description {
  padding-right: 20px;
}

.footer-desc-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #fff;
  margin-bottom: 0;
  font-family: 'Times New Roman', Times, serif;
}

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

.footer-contact-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #edcd94;
  margin-bottom: 20px;
  font-family: 'Times New Roman', Times, serif;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  gap: 12px;
}

.footer-contact-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  filter: brightness(0) invert(1);
}

.footer-contact-text {
  font-size: 0.9rem;
  color: #fff;
  line-height: 1.4;
  font-family: 'Times New Roman', Times, serif;
}

.footer-copyright {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 30px;
}

.footer-copyright p {
  font-size: 0.85rem;
  color: #ccc;
  margin-bottom: 0;
  font-family: 'Times New Roman', Times, serif;
}

/* Responsive Footer */
@media (max-width: 768px) {
  .footer-pro {
    padding: 40px 0 20px;
  }
  
  .footer-logo-img {
    width: 80px;
  }
  
  .footer-brand-title {
    font-size: 1.1rem;
  }
  
  .footer-brand-subtitle {
    font-size: 0.8rem;
  }
  
  .footer-brand-company {
    font-size: 0.7rem;
  }
  
  .footer-description {
    padding-right: 0;
    margin-top: 20px;
  }
  
  .footer-contact {
    padding-left: 0;
    margin-top: 20px;
  }
  
  .footer-contact-item {
    margin-bottom: 12px;
  }
  
  .footer-contact-text {
    font-size: 0.85rem;
  }
  
  .footer-contact-icon {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 600px) {
  .footer-logo-img {
    width: 70px;
  }
  
  .footer-brand-title {
    font-size: 1rem;
  }
  
  .footer-brand-subtitle {
    font-size: 0.75rem;
  }
  
  .footer-brand-company {
    font-size: 0.65rem;
  }
  
  .footer-contact-icon {
    width: 12px;
    height: 12px;
  }
}


/* 
---------------------------------------------
Page Header Style
--------------------------------------------- 
*/

.page-heading {
  background-image: url(../images/Banner_Page.webp);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 110px 0px;
  text-align: center;
}

.page-heading span {
  background: transparent !important;
  color: #1e1e1e;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 10px 25px;
  display: inline-block;
  margin-bottom: 30px;
}

.page-heading span a {
  color: #1e1e1e;
}

.page-heading h3 {
  font-size: 48px;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
}


/* 
---------------------------------------------
Properties Style
--------------------------------------------- 
*/

.properties ul.properties-filter {
  list-style: none;
  text-align: center;
  margin-bottom: 70px;
}

.properties ul.properties-filter li {
  display: inline-block;
  margin: 5px 8px;
}

.properties ul.properties-filter li a {
  display: inline-block;
  text-align: center;
  font-size: 15px;
  text-transform: capitalize;
  font-weight: 500;
  color: #fff;
  background-color: #1e1e1e;
  padding: 12px 25px;
  border-radius: 5px;
  transition: all .3s;
}

.properties ul.properties-filter li a.is_active {
  background-color: #00143f;
  color: #fff;
}

.properties ul.properties-filter li a.is_active:hover {
  color: #fff;
}

.properties ul.properties-filter li a:hover {
  color: #00143f;
}

.properties ul.pagination {
  margin-top: 50px;
  text-align: center;
  width: 100%;
  display: inline-block;
}

.properties ul.pagination li {
  display: inline-block;
  margin: 0px 5px;
}

.properties ul.pagination li a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #1e1e1e;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  border-radius: 50%;
  transition: all .3s;
}

.properties ul.pagination li a:hover,
.properties ul.pagination li a.is_active {
  background-color: #00143f;
  color: #fff;
}


/* 
---------------------------------------------
Single Page Style
--------------------------------------------- 
*/

.single-property .main-image img {
  float: none;
}

.single-property .main-content h4 {
  font-size: 25px;
  margin-top: 25px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.single-property .main-content span.category {
  background-color: #fbd9cf;
  font-weight: 500;
  border-radius: 5px;
  font-size: 14px;
  color: #1e1e1e;
  padding: 5px 12px;
  display: inline-block;
  margin-top: 40px;
}

.single-property .accordion {
  margin-top: 60px;
  margin-left: 0px;
  margin-right: 0px;
  --bs-accordion-border-radius: 10px;
  --bs-accordion-inner-border-radius: 10px;
  --bs-accordion-bg: #fafafa;
  --bs-accordion-border-color: none;
  border: none !important;
}

.single-property .accordion-header {
  border-bottom: 1px solid #eaeaea;
}

.single-property .accordion-button {
  box-shadow: none;
  font-size: 17px;
  font-weight: 500;
  color: #1e1e1e;
}

.single-property .accordion-button:not(.collapsed) {
  color: #00143f;
  background-color: #fafafa;
  outline: none;
}

.single-property .accordion-button::after {
  display: none;
}

.single-property #headingThree {
  border-bottom: none;
}

.single-property .accordion-item:last-of-type .accordion-collapse {
  border-top: 1px solid #eaeaea;
}

.single-property .info-table {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  margin-left: 60px;
}

.single-property .info-table ul li {
  display: block;
  margin-bottom: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid #eee;
}

.single-property .info-table ul li:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.single-property .info-table ul li img {
  float: left;
  margin-right: 25px;
}

.single-property .info-table ul li h4 {
  font-size: 22px;
  font-weight: 600;
}

.single-property .info-table ul li h4 span {
  font-size: 15px;
  color: #aaa;
  font-weight: 400;
}


/* 
---------------------------------------------
Contact Page Style
--------------------------------------------- 
*/

.contact-page #map {
  margin-top: 100px;
}

.contact-page .section-heading {
  margin-bottom: 40px;
  margin-right: 280px;
}

.contact-page p {
  margin-bottom: 50px;
}

.contact-page .item {
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background: transparent !important;
  display: inline-block;
  min-width: 360px;
}

.contact-page .phone {
  margin-bottom: 30px;
}

.contact-page .item img {
  float: left;
  margin-right: 25px;
  vertical-align: middle;
}

.contact-page .item h6 {
  font-size: 20px;
  font-weight: 600;
  vertical-align: middle;
}

.contact-page .item h6 span {
  font-size: 15px;
  color: #aaaaaa;
  font-weight: 400;
}

.contact-page #contact-form {
  margin-left: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
  padding: 35px 30px;
  background: transparent !important;
}

.contact-page #contact-form label {
  font-size: 15px;
  color: #3a3a3a;
  margin-bottom: 15px;
}

.contact-page #contact-form input {
  width: 100%;
  height: 44px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 30px;
  font-size: 14px;
  padding: 0px 15px;
}

.contact-page #contact-form textarea {
  width: 100%;
  height: 150px;
  max-height: 180px;
  border-radius: 22px;
  background-color: #f6f6f6;
  border: none;
  margin-bottom: 40px;
  font-size: 14px;
  padding: 15px 15px;
}

.contact-page #contact-form button {
  background-color: #1e1e1e;
  height: 44px;
  border-radius: 22px;
  padding: 0px 20px;
  color: #fff;
  border: none;
  font-size: 15px;
  font-weight: 500;
  transition: all .5s;
}

.contact-page #contact-form button:hover {
  background-color: #00143f;
}


/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    height: 80px;
  }
  .header-area .main-nav .logo img {
    max-height: 60px;
    padding: 8px 0;
  }
  .header-area .main-nav .logo h1 {
    line-height: 80px !important;
  }
  .best-deal .tabs-content .nav-link {
    font-size: 14px;
    padding: 0px 15px;
    height: 44px;
    line-height: 44px;
  }
  .best-deal .tabs-content ul.nav-tabs li {
    margin: 0px 5px;
  }
  .properties ul.properties-filter li a {
    font-size: 14px;
    padding: 10px 15px;
  }
  .properties ul.properties-filter li {
    margin: 5px;
  }
  .header-area .main-nav .nav li:last-child {
    display: block;
  }
}

@media (max-width: 992px) {
  .sub-header {
    display: none;
  }
  .header-area .main-nav .logo {
    height: 90px;
  }
  .header-area .main-nav .logo img {
    max-height: 70px;
    padding: 9px 0;
  }
  .header-area .main-nav .logo h1 {
    line-height: 100px;
  }
  .background-header .main-nav .logo h1 {
    line-height: 80px;
  }
  .header-area .main-nav .nav li a {
    padding-left: 3px;
    padding-right: 3px;
    margin-left: 30px;
  }
  .header-area .main-nav .nav li:last-child a {
    padding-right: 15px;
    display: block !important;
    visibility: visible !important;
  }
  .main-banner .item h2 {
    width: 100%;
  }
  .featured .section-heading {
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 100px;
  }
  .featured .accordion {
    margin-left: 0px;
    margin-right: 0px;
  }
  .featured .info-table {
    margin-top: 45px;
  }
  .fun-facts .counter {
    margin-bottom: 45px;
  }
  .best-deal .section-heading {
    text-align: center;
  }
  .best-deal .tabs-content ul.nav-tabs {
    margin-top: 0px;
    justify-content: center;
  }
  .best-deal .info-table {
    margin-bottom: 45px;
  }
  .best-deal .tab-content img {
    padding: 0px;
  }
  .best-deal .tabs-content h4 {
    margin-top: 45px;
  }
  .properties .item h6 {
    text-align: center;
    margin-bottom: 15px;
  }
  .properties .item .main-button {
    text-align: center;
  }
  .properties .item ul li {
    margin-right: 10px;
    font-size: 13px;
  }
  .contact-content .phone {
    margin-right: 0px;
    margin-bottom: 20px;
  }
  .contact-content .email {
    margin-left: 0px;
    margin-bottom: 45px;
  }
  
  .contact-content .item h6 {
    font-size: 16px;
  }
  
  .contact-content .phone h6 {
    font-size: 12px;
  }
  
  .contact-content .email h6 {
    font-size: 14px;
  }
  .contact-content #contact-form {
    margin-left: 0px;
  }
  .single-property .info-table {
    margin-left: 0px;
    margin-top: 45px;
  }
  .contact-page .section-heading {
    margin-right: 0px !important;
  }
  .contact-page #contact-form {
    margin-left: 0px;
    margin-top: 60px;
  }
  .best-deal .info-table ul li span {
    float: right !important;
    width: auto !important;
  }
}

@media (max-width: 1200px) {
  .header-area .main-nav .logo {
    height: 95px;
  }
  .header-area .main-nav .logo img {
    max-height: 110px;
    padding: 10px 0;
  }
  .best-deal .info-table ul li span {
    float: none;
    width: 100%;
  }
  .contact-page .section-heading {
    margin-right: 100px;
  }
}

/* Desktop large screens */
@media (min-width: 1201px) {
  .header-area .main-nav .logo {
    height: 100px;
  }
  .header-area .main-nav .logo img {
    max-height: 110px;
    padding: 10px 0;
  }
}

.header-area {
  background: transparent !important;
}

.background-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  box-shadow: none;
  transition:
    background 0.35s cubic-bezier(.23,1.03,.45,1),
    box-shadow 0.4s cubic-bezier(.23,1.03,.45,1),
    opacity 0.5s cubic-bezier(.23,1.03,.45,1),
    transform 0.5s cubic-bezier(.23,1.03,.45,1);
}

/* solid saat scroll lewat banner */
.background-header.solid {
  background: #fff;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15);
  /* backdrop-filter: none; */
}

.owl-stage{
  background: transparent !important;
}

/* Ensure banner carousel displays properly */
.main-banner .owl-carousel {
  height: 100%;
}

.main-banner .owl-carousel .owl-stage-outer {
  height: 100%;
}

.main-banner .owl-carousel .owl-stage {
  height: 100%;
}

.main-banner .owl-carousel .owl-item {
  height: 100%;
}

.fadein-heading {
  opacity: 0;
  transform: translateY(25px);
  animation: fadeInHeading 3.9s cubic-bezier(.23,1.03,.45,1) 0.5s forwards;
}

@keyframes fadeInHeading {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Special positioning for banner 3 to show left side */
@media (max-width: 767px) {
  .main-banner .item-3 {
    background-position: left center !important; /* Show left side of the third banner */
  }
}

@media (max-width: 480px) {
  .main-banner .item-3 {
    background-position: left center !important; /* Show left side of the third banner */
  }
}

/* Global fix for promo-form-container gap */
@media (max-width: 768px) {
  /* Fix the specific gap between banner and promo form */
  .main-banner {
    margin-bottom: 0 !important;
  }
  
  .main-banner .owl-carousel {
    margin-bottom: 0 !important;
  }
  
  .main-banner .owl-carousel .owl-stage-outer {
    margin-bottom: 0 !important;
  }
  
  .main-banner .owl-carousel .owl-stage {
    margin-bottom: 0 !important;
  }
  
  .main-banner .owl-carousel .owl-item {
    margin-bottom: 0 !important;
  }
  
  /* Ensure mainBanner has no gaps */
  #mainBanner {
    margin-bottom: 0 !important;
  }
  
  /* Fix promo-form-container to stick to banner */
  .promo-form-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }
  
  /* Remove white background from owl-stage that might create gap */
  .main-banner .owl-stage {
    background: transparent !important;
  }
  
  /* Additional specific fix for the gap */
  .main-banner + .promo-form-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* wa icon */