/*

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
---------------------------------------------
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900");
@font-face {
  font-family: 'Radwave';
  src: url('/assets/webfonts/RadwaveFont-Demo.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/*
---------------------------------------------
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: 'Poppins', sans-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: #ffffff;
}

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

/*
---------------------------------------------
Global Styles
---------------------------------------------
*/
html,
body {
  font-family: 'Poppins', sans-serif;
}

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

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

.section {
  margin-top: 120px;
  background-color: #000000;
}

.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: #ffffff;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 700;
}

.icon-button a {
  display: inline-block;
  background-color: #000000;
  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: #ffffff;
  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: #4a4a4a;
}

.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: #4a4a4a;
  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: #f0c040;
  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: #f0c040;
  border-radius: 50%;
}



/*
---------------------------------------------
Header Style
---------------------------------------------
*/
/* Header general style */
.header-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: transparent;
  padding: 25px 60px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hidden state */
.header-area.hidden {
  transform: translateY(-100%);
  opacity: 0;
}

/* Layout for nav */
.main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Logo */
.main-nav .logo img {
  height: 40px;
  object-fit: contain;
  filter: brightness(1.1);
}

/* Nav links */
.main-nav .nav {
  display: flex;
  align-items: center;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav .nav li a {
  font-family: 'Radwave', sans-serif;
  color: #fff;
  font-weight: normal;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: .6px;
  transition: color 0.3s ease;
}

.main-nav .nav li a:hover,
.main-nav .nav li a.active {
  color: #ffa500; /* orange highlight */
}

/* Mobile trigger (hidden on desktop) */
.menu-trigger {
  display: none; /* hidden by default on desktop */
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  position: fixed;        /* fixed to viewport */
  top: 20px;              /* distance from top */
  right: 20px;            /* distance from right */
  z-index: 1001;
}

/* On scroll, optional: make navbar solid if you scroll */
.header-area.scrolled {
  background: transparent;
  backdrop-filter: blur(1px);
}

/* Responsive */
@media (max-width: 992px) {
  .main-nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .main-nav .nav {
    display: none;
    flex-direction: column;
    align-items: flex-end; /* Align menu to the right */
    background: rgba(0, 0, 0, 0.9);
    padding: 20px;
    border-radius: 10px;
    position: absolute;
    top: 60px;
    right: 0;
    width: 220px;
  }

  .menu-trigger {
    display: block;
    margin-top: 10px;
  }
}

/*
---------------------------------------------
Nav Dropdown submenu Style
---------------------------------------------
*/
.nav li.submenu ul {
  display: none;
}

.nav li.submenu ul.open {
  display: block;
}
/* Dropdown submenu */
.nav li.submenu ul {
  display: none;
  position: absolute;
  top: 100%; /* right below parent */
  background: #000;
  min-width: 200px;
  border-radius: 6px;
  overflow: hidden;
  padding: 0;
  list-style: none;
  z-index: 999;
}

.nav li.submenu ul li a {
  padding: 5px 10px;
  color: #fff;
  font-size: 0.85rem;
}

/*
---------------------------------------------
Banner Style
---------------------------------------------
*/
.main-banner {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}

.banner-content {
  display: flex;
  flex: 1;
}

/* Left image side */
.banner-left {
  position: relative;
  flex: 49.9%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
}

/* Black mask to blend left & right sections */
.banner-left .image-overlay {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
          linear-gradient(to top, #000 0%, transparent 30%),
          linear-gradient(to bottom, #000 0%, transparent 30%),
          linear-gradient(to left, #000 0%, transparent 30%),
          linear-gradient(to right, #000 0%, transparent 30%);
}

/* Right text side */
.banner-right {
  flex: 50.1%;
  background-color: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 60px 40px;
  box-sizing: border-box;
  text-align: left;
  position: relative;
  z-index: 2;
}

.banner-right .header-text {
  max-width: 800px;
}

.banner-right .header-text h2 {
  font-family: 'Radwave', sans-serif;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 3.5rem;
  margin-bottom: 30px;
  color: #ffa500;
}

.banner-right .header-text p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

/* ======================
   Mobile & Tablet
====================== */
@media (max-width: 992px) {
  .banner-content {
    flex-direction: column;
  }

  .banner-left,
  .banner-right {
    width: 100%;
    height: 100vh;
  }

  /* Stack text on top of image */
  .banner-right {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.6); /* dark transparent overlay */
    padding: 50px 30px;
    justify-content: flex-end; /* text closer to bottom */
  }

  .banner-right .header-text {
    color: #fff;
    text-align: left;
    width: 100%;
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
    font-size: clamp(18px, 4vw, 28px); /* Auto scales with screen width */
    margin: 0 auto;
  }

  .banner-left .image-overlay {
    display: none; /* no need for fade on mobile */
  }
}


/*
---------------------------------------------
project-presentation
---------------------------------------------
*/
.project-presentation {
  background-color: #000;
  color: #fff;
  padding: 80px 20px;
  font-family: 'Radwave', sans-serif;
}

.content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.column {
  flex: 1;
  text-align: left;
}

.column.right {
  text-align: right;
}

.divider {
  width: 2px;
  height: 200px;
  background: linear-gradient(to bottom, #000000, #ffa500);
}

.project-presentation h1 {
  color: #ffa500;
  font-size: 2rem;
  text-transform: uppercase;
  font-weight: normal;
  margin-bottom: 15px;
}

.project-presentation p {
  color: #ffffff;
  font-size: 1rem;
  margin-bottom: 25px;
  line-height: 1.6;
}

.button-contact {
  display: inline-block; /* ensures the <a> behaves like a button */
  background-color: transparent;
  color: #ffa500;
  border: 2px solid #ffa500;
  padding: 10px 25px;
  text-transform: uppercase;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 10px;
}

.button-contact:hover {
  background-color: #ffa500;
  color: #000;
}

/* Responsive */
@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .column,
  .column.right {
    text-align: center;
  }

  .divider {
    width: 60%;
    height: 2px;
    background: linear-gradient(to right, #ffa500, #000000);
  }
}


/*
---------------------------------------------
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 rgb(0, 0, 0);
  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-color: #fff;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  line-height: 52px;
  color: #4a4a4a;
  outline: 15px solid rgb(74, 74, 74);
  font-size: 18px;
}

/*
---------------------------------------------
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 rgb(0, 0, 0);
  padding: 35px 30px;
  background-color: #fff;
}

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

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

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

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

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

.contact-content #contact-form {
  margin-left: 30px;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgb(0, 0, 0);
  padding: 35px 30px;
  background-color: #fff;
}

.contact-content #contact-form label {
  font-size: 15px;
  color: #4a4a4a;
  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: #4a4a4a;
}

/*
---------------------------------------------
buttons
---------------------------------------------
*/

.add-button {
  background: #000000;
  backface-visibility: hidden;
  border-radius: .375rem;
  border-style: solid;
  border-width: .125rem;
  box-sizing: border-box;
  color: #ffa500;
  cursor: pointer;
  display: inline-block;
  font-family: Circular,Helvetica,sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  padding: .875rem 1.125rem;
  position: relative;
  text-align: left;
  text-decoration: none;
  transform: translateZ(0) scale(1);
  transition: transform .2s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button:not(:disabled):hover {
  transform: scale(1.05);
}

.button:not(:disabled):hover:active {
  transform: scale(1.05) translateY(.125rem);
}

.button:focus {
  outline: 0 solid transparent;
}

.button:focus:before {
  content: "";
  left: calc(-1*.375rem);
  pointer-events: none;
  position: absolute;
  top: calc(-1*.375rem);
  transition: border-radius;
  user-select: none;
}

.button:focus:not(:focus-visible) {
  outline: 0 solid transparent;
}

.button:focus:not(:focus-visible):before {
  border-width: 0;
}

.button:not(:disabled):active {
  transform: translateY(.125rem);
}

.log-button {
  background: #000000;
  backface-visibility: hidden;
  border-radius: .375rem;
  border-style: solid;
  border-width: .125rem;
  border-color: #ffa500;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: inline-block;
  font-family: Circular,Helvetica,sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  padding: .875rem 1.125rem;
  position: inherit;
  text-align: left;
  text-decoration: none;
  transform: translateZ(0) scale(1);
  transition: transform .2s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

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

/* Footer main styles */
footer.footer-no-gap {
  margin-top: 20px;
  background-color: #000;
  color: #fff;
  padding: 30px 0 20px 0;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

/* Left logo */
.footer-left img {
  max-height: 50px;
}

/* Center contact info */
.footer-center {
  text-align: center;
}

.footer-center a {
  margin: 1px 0;
  font-size: 10px;
}

/* Right social icons */
.footer-right a {
  color: #fff;
  margin-left: 23px;
  font-size: 18px;
  transition: 0.3s;
}

.footer-right a:hover {
  opacity: 0.7;
}

/* Bottom copyright */
.footer-bottom {
  text-align: center;
  margin-top: 20px;
}

.footer-bottom p {
  font-size: 14px;
}

.footer-bottom p a {
  color: #fff;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .footer-right {
    margin-top: 10px;
  }
}


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

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

.page-heading span {
  background-color: #fff;
  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;
}

/*
---------------------------------------------
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 rgb(0, 0, 0);
  padding: 35px 30px;
  background-color: rgb(0, 0, 0);
  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-color: #fff;
}

.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: #394c34;
}


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

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .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: none;
  }
}

@media (max-width: 992px) {
  .sub-header {
    display: none;
  }
  .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;
  }
  .header-area .main-nav .nav li:last-child a {
    padding-right: 15px;
  }
  .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 #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) {
  .best-deal .info-table ul li span {
    float: none;
    width: 100%;
  }
  .contact-page .section-heading {
    margin-right: 100px;
  }
}

/*
---------------------------------------------
Tables Style
---------------------------------------------
*/

.table-responsive {
  overflow-x: auto;
}

.project-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #000; /* dark background */
  color: #fff; /* text color */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.project-table thead {
  background-color: #1a1a1a; /* slightly lighter for header */
}

.project-table thead th {
  color: #fcb53b; /* orange accent for headers */
  font-weight: 600;
  text-align: center;
  padding: 12px;
}

.project-table tbody td {
  padding: 12px;
  vertical-align: middle;
  text-align: center;
  border-bottom: 1px solid #333;
  color: #fff;
}

.project-table tbody tr:hover {
  background-color: #1a1a1a; /* subtle hover effect */
  cursor: pointer;
}

.project-table tbody img {
  border-radius: 6px;
  border: 2px solid #fcb53b; /* orange border around images */
}

.project-table a {
  color: #fcb53b;
  text-decoration: none;
  font-weight: 500;
}

.project-table a:hover {
  color: #fcb53b;
  text-decoration: underline;
}

/* Buttons inside table (optional) */
.project-table a.modify,
.project-table a.delete {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  background: #1a1a1a;
  transition: all 0.3s ease;
}

.project-table a.modify:hover {
  background: #ffe435;
  color: #000;
}

.project-table a.delete:hover {
  background: #970a0a;
  color: #fff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .project-table thead {
    display: none;
  }

  .project-table tbody td {
    display: block;
    text-align: right;
    padding-left: 50%;
    position: relative;
  }

  .project-table tbody td::before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    width: calc(50% - 30px);
    padding-right: 10px;
    font-weight: 600;
    text-align: left;
    color: #fcb53b;
  }
}