/*--------------------------------------------------------------
# TheProperty shared base
# Loaded only by the pages using the TheProperty layout, so the
# Bootstrap 5 shims below cannot affect the rest of the site.
--------------------------------------------------------------*/

.page-title,
.hero,
.video-slider,
.photo-gallery,
.home-about,
.featured-properties,
.featured-services,
.featured-agents,
.testimonials,
.why-us,
.recent-blog-posts,
.call-to-action,
.properties {
  --background-color: #ffffff;
  --default-color: #323b3b;
  --heading-color: #0d1432;
  --accent-color: #17c788;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;

  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --heading-font: "Raleway", sans-serif;

  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
  padding: 60px 0;
  overflow: clip;
}

.page-title {
  padding: 0;
  position: relative;
}

.hero h1, .hero h2, .hero h3, .hero h4, .hero h5,
.video-slider h2, .video-slider h3, .video-slider h4, .video-slider h5,
.photo-gallery h2, .photo-gallery h3, .photo-gallery h4, .photo-gallery h5,
.home-about h1, .home-about h2, .home-about h3, .home-about h4, .home-about h5,
.featured-properties h2, .featured-properties h3, .featured-properties h4, .featured-properties h5,
.featured-services h2, .featured-services h3, .featured-services h4, .featured-services h5,
.featured-agents h2, .featured-agents h3, .featured-agents h4, .featured-agents h5,
.testimonials h2, .testimonials h3, .testimonials h4, .testimonials h5,
.why-us h2, .why-us h3, .why-us h4, .why-us h5,
.recent-blog-posts h2, .recent-blog-posts h3, .recent-blog-posts h4, .recent-blog-posts h5,
.call-to-action h2, .call-to-action h3, .call-to-action h4, .call-to-action h5,
.properties h2, .properties h3, .properties h4, .properties h5, .properties h6,
.page-title h1 {
  font-family: var(--heading-font);
  font-weight: 700;
}

/* Colour preset used by the testimonials section */
.light-background {
  --background-color: #eaf9f9;
  --surface-color: #ffffff;
}

/*--------------------------------------------------------------
# Page Title & Breadcrumbs
--------------------------------------------------------------*/
.page-title .heading {
  padding: 80px 0;
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:before {
  content: "";
  position: absolute;
  display: block;
  width: 160px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 60%);
  left: 0;
  right: 0;
  bottom: 1px;
  margin: auto;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Bootstrap 5 shims
# The template markup is Bootstrap 5; this site ships Bootstrap 4.
# These reproduce the handful of BS5-only utilities the markup uses.
--------------------------------------------------------------*/

/* Row gutters: g-* sets both axes, gy-* vertical only */
.row.g-2 { margin-left: -0.25rem; margin-right: -0.25rem; margin-top: -0.5rem; }
.row.g-2 > [class*="col"] { padding-left: 0.25rem; padding-right: 0.25rem; margin-top: 0.5rem; }

.row.g-3 { margin-left: -0.5rem; margin-right: -0.5rem; margin-top: -1rem; }
.row.g-3 > [class*="col"] { padding-left: 0.5rem; padding-right: 0.5rem; margin-top: 1rem; }

.row.g-4 { margin-left: -0.75rem; margin-right: -0.75rem; margin-top: -1.5rem; }
.row.g-4 > [class*="col"] { padding-left: 0.75rem; padding-right: 0.75rem; margin-top: 1.5rem; }

.row.gy-4 { margin-top: -1.5rem; }
.row.gy-4 > [class*="col"] { margin-top: 1.5rem; }

.row.gy-5 { margin-top: -3rem; }
.row.gy-5 > [class*="col"] { margin-top: 3rem; }

/* Flex gap */
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }

/* Logical-property margin used by the markup (BS4 equivalent is mr-2) */
.me-2 { margin-right: 0.5rem !important; }

/* Form controls */
.form-label {
  margin-bottom: 0.5rem;
  display: inline-block;
}

.form-select {
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.form-select:focus {
  border-color: var(--accent-color, #17c788);
  outline: 0;
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent-color, #17c788), transparent 75%);
}

.form-select-sm {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.2rem;
}

/* Floating labels (BS5 .form-floating). The template styles the
   controls inside it but relies on Bootstrap 5 for the mechanics. */
.form-floating {
  position: relative;
}

.form-floating > .form-control,
.form-floating > .form-select {
  height: calc(3.5rem + 2px);
  line-height: 1.25;
  padding: 1rem 0.75rem;
}

.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem 0.75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
  margin: 0;
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  opacity: 0.65;
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.form-floating > .form-control:focus,
.form-floating > .form-control:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}

.form-floating > .form-select {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}