html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Slideshow Header */
.homeheader {
    height: 70vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 1s ease-in-out;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    position: relative;
}

/* Navbar */
.navbar-trans {
    font-family: 'Titillium Web', sans-serif;
    background: transparent;
}

/* Logo */
.logo {
    font-family: 'Khand', sans-serif;
}

/* General Container */
.container {
    font-family: 'Titillium Web', sans-serif;
}

/* Map Background */
.map {
    background-image: url(/Template/img/map-bg.png);
    background-size: cover;
    min-height: 350px;
}

/* Card Links */
.card a {
    text-decoration: none;
    color: #475563;
}

/* Contact */
.contact {
    white-space: nowrap;
    overflow: hidden;
}

/* Separators */
.titleseparator {
    border: 1px solid #f2a602;
    width: 5vw;
    margin: 0 auto;
}

.subtitleseparator {
    border: 1px solid #f2a602;
    width: 5vw;
}

/* Icons */
.icons {
    width: 64px;
    height: 64px;
    color: white;
    background-color: #33353a;
    transition: background 0.3s ease-in-out;
}

.icons:hover {
    background-color: #f2a602;
}

/* Footer */
.footer {
    background-color: #303235;
    min-height: 300px;
}

/* Contact Header */
.contactheader {
    background-color: #303235;
    min-height: 25px;
}

/* Small Header */
.smallheader {
    background-image: url(/Template/img/headerbgsm.png);
    background-size: cover;
    height: 130px;
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

/* Dots for Slide Navigation */
.dots-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

/* ===== Prevent any horizontal scroll sitewide ===== */
html, body {
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Keep Bootstrap .container centered with its default max-widths.
   Only clamp overflow; do NOT change max-width here. */
.container {
  overflow-x: clip;   /* modern browsers; use hidden if clip unsupported */
}

/* container-fluid can safely be full-width */
.container-fluid,
.smallheader,
.contactheader,
header,
nav.navbar,
.topbar {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Reset header/footer row gutters only (not global) */
.smallheader .row,
.contactheader .row,
header .row,
footer .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Images/cards never overflow */
img,
.card img {
  max-width: 100%;
  height: auto;
}

/* Clamp any carousels/sliders that might push width */
.carousel,
.swiper,
.slick-slider,
.listing-grid {
  overflow: hidden;
}

/* Let the top contact strip wrap on very small screens */
@media (max-width: 480px) {
  .contact { white-space: normal; }
  .contactheader .contact-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* Footer polish */
.footer { background:#303235; color:#cfd6de; padding:32px 0; border-top:1px solid rgba(255,255,255,.08); }
.footer h5 { margin:0 0 12px; font-weight:600; }
.footer a { color:#cfd6de; text-decoration:none; }
.footer a:hover { color:#ffcc00; text-decoration:underline; }
.footer .list-unstyled li { margin:6px 0; }

/* Map responsive */
.footer .gmap { width:100%; max-width:100%; }
.footer .gmap iframe { width:100%; height:240px; border:0; border-radius:6px; }

/* Newsletter layout */
.footer .newsletter .form-control { max-width:360px; display:inline-block; vertical-align:middle; margin-right:8px; }
.footer .newsletter .btn { vertical-align:middle; }

@media (max-width:576px){
  .footer { padding:24px 0; }
  .footer .newsletter .form-control { display:block; max-width:100%; margin:0 0 8px; }
  .footer .gmap iframe { height:180px; }
}


.dot {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: rgba(255, 255, 255, 1);
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
}