/* =========================================
   ANGEL PARLAND REAL ESTATE
   KELLER WILLIAMS REALTY GOLDEN ISLES
========================================= */

/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500&family=Montserrat:wght@300;400;500;600;700&family=Parisienne&display=swap');


/* =========================================
   RESET
========================================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: #ffffff;
  color: #111111;
  overflow-x: hidden;
}

img {
  width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}


/* =========================================
   COLORS
========================================= */

:root {
  --black: #050505;
  --soft-black: #111111;
  --white: #ffffff;
  --cream: #f5f2ed;
  --gray: #e8e8e8;
  --text-gray: #777777;
  --kw-red: #b40101;
}


/* =========================================
   HEADER
========================================= */

.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 75px;
  background: rgba(0, 0, 0, 0.94);
  z-index: 9999;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.nav-container {
  max-width: 1400px;
  height: 100%;
  margin: auto;
  padding: 0 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 15px;
  color: white;
}

.kw-brand {
  color: var(--kw-red);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -3px;
}

.brand-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  letter-spacing: 2px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 25px;
}

.main-nav a {
  color: white;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: .3s ease;
}

.main-nav a:hover {
  color: var(--kw-red);
}

.menu-toggle {
  display: none;
  width: 35px;
  background: transparent;
  border: none;
}

.menu-toggle span {
  display: block;
  height: 2px;
  background: white;
  margin: 7px 0;
}


/* =========================================
   HERO
========================================= */

.hero {
  min-height: 100vh;
  padding-top: 75px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: black;
}

.hero-photo {
  position: relative;
  min-height: calc(100vh - 75px);
  overflow: hidden;
  background:
    linear-gradient(
      to right,
      rgba(0,0,0,0) 65%,
      rgba(0,0,0,.9) 100%
    ),
    #d9d9d9;
}

.hero-photo-placeholder {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 75px);
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, #f0f0f0, #c7c7c7);
}

.hero-photo-placeholder span {
  color: #777;
  font-family: 'Cormorant Garamond', serif;
  font-size: 25px;
  letter-spacing: 3px;
}

.hero-content {
  min-height: calc(100vh - 75px);
  background:
    radial-gradient(
      circle at center,
      #1b1b1b 0%,
      #090909 45%,
      #000000 100%
    );
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 60px;
}

.hero-house-icon {
  font-size: 35px;
  color: var(--kw-red);
  margin-bottom: 12px;
}

.hero-company {
  font-size: 13px;
  letter-spacing: 6px;
  margin-bottom: 20px;
}

.hero h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: .8;
}

.angel-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(65px, 8vw, 125px);
  font-weight: 500;
  letter-spacing: 9px;
}

.parland-name {
  font-family: 'Parisienne', cursive;
  color: white;
  font-size: clamp(50px, 6vw, 90px);
  font-weight: 400;
  margin-top: -5px;
}

.realtor-title {
  margin-top: 30px;
  font-size: 11px;
  letter-spacing: 6px;
  color: #bbb;
}

.hero-line {
  width: 60px;
  height: 1px;
  background: var(--kw-red);
  margin: 25px 0;
}

.hero-tagline {
  max-width: 520px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px;
  font-style: italic;
  line-height: 1.6;
  color: #ddd;
}

.hero-buttons {
  display: flex;
  gap: 15px;
  margin-top: 35px;
}

.hero-small {
  margin-top: 30px;
  font-size: 9px;
  letter-spacing: 5px;
  color: #888;
}


/* =========================================
   BUTTONS
========================================= */

.btn {
  min-width: 175px;
  padding: 15px 22px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  transition: .3s ease;
}

.btn-light {
  background: white;
  color: black;
  border-color: white;
}

.btn-light:hover {
  background: var(--kw-red);
  color: white;
  border-color: var(--kw-red);
}

.btn-outline {
  background: transparent;
  color: white;
  border-color: white;
}

.btn-outline:hover {
  background: white;
  color: black;
}

.btn-red {
  background: var(--kw-red);
  color: white;
}

.btn-red:hover {
  background: white;
  color: black;
}

.btn-outline-light {
  color: white;
  border-color: #777;
}

.btn-outline-light:hover {
  border-color: white;
  background: white;
  color: black;
}

.btn-dark {
  background: black;
  color: white;
}

.btn-dark:hover {
  background: var(--kw-red);
}

.btn-dark-outline {
  background: transparent;
  color: black;
  border-color: black;
}

.btn-dark-outline:hover {
  background: black;
  color: white;
}


/* =========================================
   QUOTE BANNER
========================================= */

.quote-section {
  min-height: 580px;
  position: relative;
  background:
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
    linear-gradient(135deg, #b8b8b8, #777);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 70px 25px;
}

.quote-overlay {
  width: min(600px, 90%);
  background: rgba(0,0,0,.88);
  color: white;
  padding: 65px 60px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.quote-mark {
  display: block;
  font-family: Georgia, serif;
  font-size: 80px;
  height: 55px;
  color: var(--kw-red);
}

.quote-overlay blockquote {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.25;
  font-style: italic;
}

.quote-name {
  margin-top: 25px;
  font-size: 10px;
  letter-spacing: 3px;
  color: #bbb;
}


/* =========================================
   GENERAL HEADINGS
========================================= */

.section-heading {
  text-align: center;
  margin-bottom: 55px;
}

.section-heading h2,
.large-title h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(55px, 7vw, 100px);
  font-weight: 400;
  letter-spacing: 4px;
}

.section-heading h2 span,
.large-title h2 span {
  font-family: 'Parisienne', cursive;
  font-weight: 400;
  letter-spacing: 0;
}

.eyebrow {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 4px;
  color: var(--kw-red);
  margin-bottom: 15px;
}

.eyebrow.light {
  color: #ddd;
}


/* =========================================
   ABOUT
========================================= */

.about-section {
  background: black;
  color: white;
  padding: 110px 8%;
}

.about-container {
  max-width: 1150px;
  margin: auto;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 80px;
  align-items: center;
}

.about-photo {
  position: relative;
}

.about-photo::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  width: 80%;
  height: 80%;
  border: 1px solid var(--kw-red);
  z-index: 0;
}

.about-photo-placeholder {
  position: relative;
  z-index: 1;
  min-height: 550px;
  background: linear-gradient(135deg, #eee, #aaa);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-photo-placeholder span {
  color: #555;
  font-family: 'Cormorant Garamond', serif;
  font-size: 25px;
}

.about-content h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px;
  font-weight: 400;
  margin-bottom: 25px;
}

.about-content p {
  color: #bbb;
  font-size: 13px;
  line-height: 2;
  margin-bottom: 18px;
}

.about-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 35px;
}


/* =========================================
   CATEGORIES
========================================= */

.categories-section {
  padding: 120px 6%;
  background: white;
}

.script-heading {
  text-align: center;
  font-family: 'Parisienne', cursive;
  font-size: clamp(65px, 8vw, 110px);
  margin-bottom: 60px;
}

.category-grid {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
}

.category-card {
  display: block;
}

.category-image {
  height: 480px;
  overflow: hidden;
  background: #ddd;
}

.image-placeholder,
.photo-placeholder {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      135deg,
      #eeeeee,
      #a5a5a5
    );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 3px;
}

.category-title {
  background: black;
  color: white;
  padding: 22px;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  letter-spacing: 3px;
  transition: .3s ease;
}

.category-card:hover .category-title {
  background: var(--kw-red);
}


/* =========================================
   EXPERTISE
========================================= */

.expertise-section {
  min-height: 700px;
  position: relative;
  background:
    linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)),
    linear-gradient(135deg, #777, #bbb);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 70px 25px;
}

.expertise-overlay {
  width: min(650px, 92%);
  padding: 70px 55px;
  background: rgba(0,0,0,.86);
  color: white;
  text-align: center;
}

.expertise-overlay h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(42px, 5vw, 70px);
  font-weight: 400;
  line-height: 1;
}

.expertise-location {
  margin-top: 25px;
  font-family: 'Parisienne', cursive;
  font-size: 40px;
}

.expertise-areas {
  margin: 25px 0 35px;
  color: #bbb;
  font-size: 11px;
  line-height: 2;
  letter-spacing: 2px;
}

.consultation-button {
  display: inline-block;
  background: white;
  color: black;
  padding: 17px 25px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  transition: .3s ease;
}

.consultation-button:hover {
  background: var(--kw-red);
  color: white;
}


/* =========================================
   BUY / SELL GENERAL
========================================= */

.buy-section,
.sell-section {
  padding: 120px 7%;
}

.buy-section {
  background: white;
}

.sell-section {
  background: black;
  color: white;
}

.large-title {
  max-width: 1200px;
  margin: 0 auto 80px;
  text-align: center;
}

.light-title {
  color: white;
}

.buy-sell-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}

.buy-sell-text h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 48px;
  font-weight: 400;
  margin-bottom: 25px;
}

.buy-sell-text p {
  font-size: 13px;
  line-height: 2;
  margin-bottom: 18px;
  color: #555;
}

.sell-text p {
  color: #bbb;
}

.section-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 35px;
}


/* =========================================
   POLAROID IMAGES
========================================= */

.polaroid-area {
  height: 600px;
  position: relative;
}

.polaroid {
  position: absolute;
  width: 270px;
  height: 350px;
  background: white;
  padding: 12px 12px 45px;
  box-shadow: 0 15px 35px rgba(0,0,0,.25);
}

.polaroid-one {
  top: 20px;
  left: 20px;
  transform: rotate(-8deg);
}

.polaroid-two {
  top: 190px;
  right: 20px;
  transform: rotate(8deg);
}

.polaroid-three {
  bottom: 0;
  left: 90px;
  transform: rotate(-3deg);
}

.polaroid .photo-placeholder {
  color: #444;
}


/* =========================================
   REVIEWS
========================================= */

.reviews-section {
  min-height: 800px;
  background:
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
    linear-gradient(135deg, #777, #b5b5b5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 25px;
}

.reviews-overlay {
  width: min(850px, 95%);
  background: rgba(0,0,0,.88);
  color: white;
  padding: 70px 60px;
  text-align: center;
}

.reviews-overlay > h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(45px, 6vw, 75px);
  font-weight: 400;
  margin-bottom: 50px;
}

.review-card {
  display: none;
  max-width: 600px;
  margin: auto;
}

.review-card.active {
  display: block;
}

.review-avatar {
  width: 70px;
  height: 70px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 1px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
}

.stars {
  color: var(--kw-red);
  letter-spacing: 5px;
  margin-bottom: 15px;
}

.review-card h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  margin-bottom: 15px;
}

.review-card p {
  color: #ccc;
  line-height: 2;
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  font-style: italic;
}

.review-controls {
  margin-top: 35px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.review-controls button {
  width: 45px;
  height: 45px;
  border: 1px solid #777;
  background: transparent;
  color: white;
  transition: .3s ease;
}

.review-controls button:hover {
  background: white;
  color: black;
}


/* =========================================
   INSTAGRAM
========================================= */

.instagram-section {
  background: black;
  color: white;
  padding: 100px 5%;
  text-align: center;
}

.instagram-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 45px;
}

.instagram-icon {
  font-size: 35px;
}

.instagram-title h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(35px, 5vw, 60px);
  font-weight: 400;
  letter-spacing: 2px;
}

.instagram-grid {
  max-width: 1400px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.instagram-photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.instagram-photo:nth-child(even) .photo-placeholder {
  background: linear-gradient(135deg, #555, #aaa);
}

.instagram-button {
  margin-top: 45px;
}


/* =========================================
   CONTACT
========================================= */

.contact-section {
  padding: 120px 7%;
  background: var(--cream);
}

.contact-heading {
  max-width: 750px;
  margin: 0 auto 70px;
  text-align: center;
}

.contact-heading h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(50px, 7vw, 85px);
  font-weight: 400;
  line-height: .95;
}

.contact-heading h2 span {
  display: block;
  font-family: 'Parisienne', cursive;
  margin-top: 5px;
}

.contact-heading > p:last-child {
  margin-top: 30px;
  color: #666;
  line-height: 1.8;
}

.contact-container {
  max-width: 1150px;
  margin: auto;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 70px;
}

.contact-information {
  background: black;
  color: white;
  padding: 55px 45px;
}

.contact-information h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 42px;
  font-weight: 400;
}

.contact-role {
  color: var(--kw-red);
  font-size: 10px;
  letter-spacing: 4px;
  margin: 8px 0 40px;
}

.contact-item {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  align-items: flex-start;
}

.contact-icon {
  color: var(--kw-red);
  font-size: 20px;
}

.contact-item strong {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.contact-item a,
.contact-item address {
  color: #bbb;
  font-size: 12px;
  line-height: 1.8;
  font-style: normal;
}

.contact-form-wrapper {
  background: white;
  padding: 50px;
  box-shadow: 0 10px 40px rgba(0,0,0,.08);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group {
  margin-bottom: 22px;
}

.form-group label {
  display: block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 9px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  border: 1px solid #ccc;
  background: white;
  padding: 15px;
  outline: none;
  transition: .3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: black;
}

.form-group textarea {
  resize: vertical;
}

.contact-submit {
  width: 100%;
  padding: 17px;
  border: none;
  background: black;
  color: white;
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: 600;
  transition: .3s ease;
}

.contact-submit:hover {
  background: var(--kw-red);
}

.form-message {
  margin-top: 15px;
  text-align: center;
  font-size: 12px;
}


/* =========================================
   BROKERAGE
========================================= */

.brokerage-section {
  background: white;
  text-align: center;
  padding: 80px 25px;
}

.kw-footer-logo {
  color: var(--kw-red);
  font-size: 70px;
  font-weight: 700;
  letter-spacing: -7px;
  margin-bottom: 15px;
}

.brokerage-section h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px;
  font-weight: 500;
}

.brokerage-section p {
  margin-top: 15px;
  color: #666;
  font-size: 12px;
  line-height: 1.8;
}

.brokerage-section .legal {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* =========================================
   FOOTER
========================================= */

.main-footer {
  background: black;
  color: white;
  padding: 60px 6% 35px;
  text-align: center;
}

.footer-name {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
}

.footer-name strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 400;
}

.footer-name span {
  color: var(--kw-red);
  font-size: 9px;
  letter-spacing: 4px;
  margin-top: 5px;
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
  margin-bottom: 25px;
}

.footer-links a {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.footer-links a:hover {
  color: var(--kw-red);
}

.footer-contact {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 25px;
  color: #aaa;
  font-size: 11px;
}

.copyright {
  margin-top: 40px;
  padding-top: 25px;
  border-top: 1px solid #222;
  color: #666;
  font-size: 9px;
}


/* =========================================
   SCROLL OFFSET
========================================= */

#about,
#services,
#buying,
#selling,
#reviews,
#instagram,
#contact {
  scroll-margin-top: 75px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

  .main-nav {
    display: none;
  }

  .menu-toggle {
    display: block;
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-photo {
    min-height: 70vh;
  }

  .hero-photo-placeholder {
    min-height: 70vh;
  }

  .hero-content {
    min-height: 75vh;
  }

  .about-container,
  .buy-sell-container,
  .contact-container {
    grid-template-columns: 1fr;
  }

  .category-grid {
    gap: 15px;
  }

  .category-image {
    height: 380px;
  }

  .polaroid-area {
    max-width: 600px;
    width: 100%;
    margin: auto;
  }

  .instagram-grid {
    grid-template-columns: repeat(3, 1fr);
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

  .main-header {
    height: 65px;
  }

  .nav-container {
    padding: 0 18px;
  }

  .kw-brand {
    font-size: 27px;
  }

  .brand-name {
    font-size: 17px;
  }

  .hero {
    padding-top: 65px;
  }

  .hero-photo {
    min-height: 58vh;
  }

  .hero-photo-placeholder {
    min-height: 58vh;
  }

  .hero-content {
    min-height: 70vh;
    padding: 60px 22px;
  }

  .angel-name {
    font-size: 58px;
    letter-spacing: 5px;
  }

  .parland-name {
    font-size: 52px;
  }

  .hero-company {
    font-size: 10px;
    letter-spacing: 4px;
  }

  .hero-buttons {
    width: 100%;
    flex-direction: column;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  .quote-section {
    min-height: 520px;
  }

  .quote-overlay {
    padding: 50px 25px;
  }

  .about-section,
  .categories-section,
  .buy-section,
  .sell-section,
  .contact-section {
    padding: 80px 20px;
  }

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

  .section-heading h2,
  .large-title h2 {
    font-size: 55px;
  }

  .about-container {
    gap: 50px;
  }

  .about-photo-placeholder {
    min-height: 470px;
  }

  .about-content h3,
  .buy-sell-text h3 {
    font-size: 38px;
  }

  .category-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .category-image {
    height: 470px;
  }

  .script-heading {
    font-size: 65px;
  }

  .expertise-section {
    min-height: 600px;
  }

  .expertise-overlay {
    padding: 55px 25px;
  }

  .expertise-location {
    font-size: 34px;
  }

  .buy-sell-container {
    gap: 45px;
  }

  .large-title {
    margin-bottom: 50px;
  }

  .section-buttons {
    flex-direction: column;
  }

  .section-buttons .btn {
    width: 100%;
  }

  .polaroid-area {
    height: 500px;
  }

  .polaroid {
    width: 210px;
    height: 280px;
  }

  .polaroid-one {
    left: 5px;
  }

  .polaroid-two {
    right: 5px;
    top: 145px;
  }

  .polaroid-three {
    left: 55px;
  }

  .reviews-overlay {
    padding: 55px 22px;
  }

  .instagram-title {
    flex-direction: column;
  }

  .instagram-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .instagram-photo:last-child {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
  }

  .contact-container {
    gap: 30px;
  }

  .contact-information {
    padding: 45px 25px;
  }

  .contact-form-wrapper {
    padding: 35px 20px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 400px) {

  .angel-name {
    font-size: 48px;
  }

  .parland-name {
    font-size: 45px;
  }

  .category-image {
    height: 400px;
  }

  .polaroid {
    width: 180px;
    height: 245px;
  }

  .polaroid-three {
    left: 35px;
  }
/* =========================================
   KW GOLDEN ISLES BOTTOM SECTION
========================================= */

.kw-golden-isles-section {
  background: #1c3150;
  color: #ffffff;
  text-align: center;
  padding: 80px 25px 65px;
}

.brokered-by {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 8px;
  margin-bottom: 20px;
  color: #ffffff;
}

.kw-golden-brand {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
  max-width: 900px;
  margin: 0 auto;
}

.kw-golden-logo {
  color: #c8202f;
  font-size: 105px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -10px;
}

.kw-golden-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.kw-golden-text strong {
  font-family: Arial, sans-serif;
  font-size: clamp(45px, 7vw, 85px);
  line-height: .9;
  font-weight: 700;
  letter-spacing: -3px;
}

.kw-golden-text span {
  margin-top: 12px;
  font-size: clamp(17px, 2.5vw, 30px);
  letter-spacing: 1px;
}

.kw-golden-tagline {
  max-width: 850px;
  margin: 65px auto 45px;
  font-size: clamp(22px, 3.5vw, 38px);
  line-height: 1.6;
  letter-spacing: 2px;
}

.kw-golden-details {
  padding-top: 35px;
  border-top: 1px solid rgba(255,255,255,.25);
  font-size: 12px;
  line-height: 1.9;
}

.kw-golden-details p {
  margin-bottom: 12px;
}

.kw-legal {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: .75;
}


/* MOBILE */

@media (max-width: 700px) {

  .kw-golden-isles-section {
    padding: 60px 18px 50px;
  }

  .brokered-by {
    font-size: 12px;
    letter-spacing: 6px;
  }

  .kw-golden-brand {
    gap: 12px;
  }

  .kw-golden-logo {
    font-size: 65px;
    letter-spacing: -7px;
  }

  .kw-golden-text strong {
    font-size: 34px;
    letter-spacing: -2px;
  }

  .kw-golden-text span {
    font-size: 13px;
    margin-top: 7px;
  }

  .kw-golden-tagline {
    margin: 45px auto 35px;
    font-size: 22px;
    line-height: 1.5;
  }
}
}
/* =========================================
   MOBILE LUXURY LAYOUT
   ANGEL PARLAND
========================================= */

@media (max-width: 700px) {

  body {
    overflow-x: hidden;
  }

  /* HEADER */

  .main-header {
    height: 62px;
  }

  .nav-container {
    height: 62px;
    padding: 0 18px;
  }

  .brand-name {
    font-size: 16px;
  }

  .kw-brand {
    font-size: 19px;
  }


  /* =====================================
     HERO - PHOTO LEFT / INFO RIGHT
  ===================================== */

  .hero {
    min-height: auto;
    height: auto;

    display: grid;

    grid-template-columns:
      44% 56%;

    padding-top: 62px;

    background: #050505;
  }


  .hero-photo {
    width: 100%;
    height: 330px;
    min-height: 0;

    overflow: hidden;
  }


  .hero-photo img,
  .angel-hero-image {
    width: 100%;
    height: 100%;

    min-height: 0;

    object-fit: cover;
    object-position: center top;

    display: block;
  }


  .hero-content {
    min-height: 330px;

    padding:
      30px 14px
      20px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
  }


  .hero-house-icon {
    font-size: 18px;
    margin-bottom: 5px;
  }


  .hero-company {
    font-size: 8px;
    letter-spacing: 3px;
    margin-bottom: 7px;
  }


  .hero-content h1 {
    margin: 0;
    line-height: .8;
  }


  .angel-name {
    display: block;

    font-size: 35px;

    letter-spacing: 1px;
  }


  .parland-name {
    display: block;

    font-size: 34px;

    margin-top: 4px;
  }


  .realtor-title {
    margin-top: 13px;

    font-size: 8px;

    letter-spacing: 4px;
  }


  .hero-line {
    width: 38px;

    margin:
      12px auto;

    height: 1px;
  }


  .hero-tagline {
    max-width: 180px;

    font-size: 10px;

    line-height: 1.6;

    margin:
      0 auto 15px;
  }


  .hero-buttons {
    display: flex;

    gap: 5px;

    justify-content: center;

    width: 100%;
  }


  .hero-buttons .btn {
    padding: 8px 7px;

    font-size: 6px;

    letter-spacing: 1px;
  }


  .hero-small {
    font-size: 6px;

    letter-spacing: 2px;

    margin-top: 13px;
  }



  /* =====================================
     QUOTE
  ===================================== */

  .quote-section {
    min-height: 170px;
  }


  .quote-overlay {
    min-height: 170px;

    padding:
      25px 35px;
  }


  .quote-mark {
    font-size: 45px;
  }


  .quote-section blockquote {
    max-width: 430px;

    font-size: 17px;

    line-height: 1.35;
  }


  .quote-name {
    font-size: 10px;

    margin-top: 10px;
  }



  /* =====================================
     ABOUT
  ===================================== */

  .about-section {
    padding:
      45px 20px 55px;
  }


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


  .section-heading h2 {
    font-size: 38px;
  }


  .section-heading h2 span {
    font-size: 43px;
  }


  .about-container {
    display: grid;

    grid-template-columns:
      53% 47%;

    gap: 14px;

    align-items: center;
  }


  .about-content {
    order: 1;

    text-align: center;
  }


  .about-photo {
    order: 2;

    height: 310px;

    min-height: 0;
  }


  .about-photo img,
  .angel-about-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
      center top;
  }


  .about-content .eyebrow {
    display: none;
  }


  .about-content h3 {
    font-size: 20px;

    margin-bottom: 12px;
  }


  .about-content p {
    font-size: 9px;

    line-height: 1.65;

    margin-bottom: 10px;
  }


  .about-buttons {
    justify-content: center;

    gap: 5px;

    margin-top: 15px;
  }


  .about-buttons .btn {
    padding: 8px 7px;

    font-size: 6px;

    letter-spacing: .5px;
  }



  /* =====================================
     CATEGORY SECTION
  ===================================== */

  .categories-section {
    padding:
      45px 14px;
  }


  .script-heading {
    font-size: 43px;

    margin-bottom: 25px;
  }


  .category-grid {
    grid-template-columns:
      repeat(3, 1fr);

    gap: 8px;
  }


  .category-image {
    height: 150px;
  }


  .category-title {
    padding:
      11px 4px;

    font-size: 8px;

    letter-spacing: 1px;
  }



  /* =====================================
     EXPERTISE
  ===================================== */

  .expertise-section,
  .expertise-overlay {
    min-height: 280px;
  }


  .expertise-overlay {
    padding:
      40px 20px;
  }


  .expertise-section h2 {
    font-size: 32px;
  }


  .expertise-location {
    font-size: 17px;
  }


  .expertise-areas {
    font-size: 9px;
  }


  .consultation-button {
    padding:
      11px 15px;

    font-size: 8px;
  }



  /* =====================================
     BUY + SELL
  ===================================== */

  .buy-section,
  .sell-section {
    padding:
      50px 18px;
  }


  .large-title h2 {
    font-size: 36px;
  }


  .large-title h2 span {
    font-size: 42px;
  }


  .buy-sell-container,
  .buy-sell-container.reverse {
    display: grid;

    grid-template-columns:
      52% 48%;

    gap: 12px;

    align-items: center;
  }


  .buy-sell-text {
    text-align: center;
  }


  .buy-sell-text h3 {
    font-size: 20px;
  }


  .buy-sell-text p {
    font-size: 9px;

    line-height: 1.6;
  }


  .buy-sell-text .eyebrow {
    font-size: 7px;
  }


  .polaroid-area {
    min-height: 290px;
  }


  .polaroid {
    width: 120px;
    height: 155px;
  }


  .section-buttons {
    justify-content: center;

    gap: 5px;
  }


  .section-buttons .btn {
    padding: 8px 6px;

    font-size: 6px;
  }



  /* =====================================
     REVIEWS
  ===================================== */

  .reviews-section,
  .reviews-overlay {
    min-height: 390px;
  }


  .reviews-overlay {
    padding:
      50px 25px;
  }


  .reviews-section h2 {
    font-size: 34px;
  }


  .review-card {
    padding:
      25px 20px;
  }


  .review-card p {
    font-size: 11px;
  }



  /* =====================================
     INSTAGRAM
  ===================================== */

  .instagram-section {
    padding:
      45px 12px;
  }


  .instagram-title h2 {
    font-size: 26px;
  }


  .instagram-grid {
    grid-template-columns:
      repeat(5, 1fr);

    gap: 5px;
  }


  .instagram-photo {
    height: 105px;
  }



  /* =====================================
     CONTACT
  ===================================== */

  .contact-section {
    padding:
      50px 18px;
  }


  .contact-heading h2 {
    font-size: 36px;
  }


  .contact-container {
    grid-template-columns: 1fr;

    gap: 20px;
  }

}
/* =========================================
   MOBILE ABOUT — CLEAN ALIGNMENT
========================================= */

@media (max-width: 700px) {

  .about-section {
    padding: 45px 18px 55px !important;
    overflow: hidden;
  }

  .section-heading {
    margin-bottom: 28px !important;
  }

  .about-container {
    display: grid !important;
    grid-template-columns: 50% 50% !important;
    gap: 0 !important;
    align-items: center !important;
  }

  .about-content {
    width: 100% !important;
    padding: 0 14px 0 0 !important;
    text-align: center !important;
    position: relative;
    z-index: 2;
  }

  .about-content h3 {
    font-size: 18px !important;
    line-height: 1.2;
    margin-bottom: 14px !important;
  }

  .about-content p {
    font-size: 8px !important;
    line-height: 1.55 !important;
    margin: 0 0 10px !important;
  }

  .about-photo {
    width: 100% !important;
    height: 310px !important;
    min-height: 310px !important;
    overflow: hidden !important;
    position: relative;
    z-index: 1;
  }

  .about-photo img,
  .angel-about-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
  }

  .about-buttons {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 6px !important;
    margin-top: 15px !important;
  }

  .about-buttons .btn {
    width: 100% !important;
    padding: 9px 4px !important;
    font-size: 6px !important;
  }

}
@media (max-width: 700px) {

  .about-photo::before,
  .about-photo::after {
    display: none !important;
    content: none !important;
  }

  .about-photo {
    border: none !important;
    outline: none !important;
  }

  .angel-about-image {
    border: none !important;
    outline: none !important;
  }

}
.category-image {
  overflow: hidden;
}

.category-photo {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .4s ease;
}

.category-card:hover .category-photo {
  transform: scale(1.04);
}
/* =========================================
   AR WEBSITE LOGO
========================================= */

.header-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

@media (max-width: 700px) {

  .header-logo {
    width: 48px;
    height: 48px;
  }

  .brand-name {
    font-size: 17px;
  }

}
/* =====================================================
   BUYING PAGE
===================================================== */

/* Hidden until the Buying category is clicked */
.website-page {
  display: none;
}

.website-page.page-active {
  display: block;
}


/* BUYING PAGE MAIN */
#buying-page {
  min-height: 100vh;
  background: #ffffff;
  color: #111111;
}


/* TOP BAR */
.inner-page-header {
  height: 90px;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 6%;
}

.inner-page-logo {
  width: 70px;
  height: 70px;
  object-fit: contain;
  border-radius: 50%;
}

.back-home-btn {
  background: transparent;
  border: 1px solid #c6a15b;
  color: #ffffff;
  padding: 11px 20px;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: 0.3s ease;
}

.back-home-btn:hover {
  background: #c6a15b;
  color: #050505;
}


/* HERO */
.buying-page-hero {
  min-height: 570px;
  position: relative;
  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.75) 45%,
      rgba(0, 0, 0, 0.30) 100%
    ),
    linear-gradient(
      135deg,
      #171717,
      #555555
    );

  overflow: hidden;
}

.buying-page-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.buying-page-hero-content {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 1200px;
  margin: auto;
  color: white;
}

.buying-small-title {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  color: #d4b16a;
  margin-bottom: 18px;
}

.buying-page-hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(60px, 8vw, 105px);
  line-height: 0.82;
  font-weight: 500;
  margin: 0 0 28px;
}

.buying-page-hero h1 span {
  display: block;
  font-family: "Parisienne", cursive;
  color: #d4b16a;
  font-size: 0.78em;
  font-weight: 400;
  margin-top: 18px;
}

.buying-page-hero-content > p:not(.buying-small-title) {
  max-width: 480px;
  font-size: 15px;
  line-height: 1.8;
  color: #e5e5e5;
  margin-bottom: 30px;
}

.buying-hero-btn {
  display: inline-block;
  padding: 15px 25px;
  background: #ffffff;
  color: #050505;
  border: 1px solid #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  transition: 0.3s ease;
}

.buying-hero-btn:hover {
  background: #c6a15b;
  border-color: #c6a15b;
}


/* INTRO */
.buying-intro {
  max-width: 800px;
  margin: auto;
  padding: 90px 25px;
  text-align: center;
}

.buying-script {
  font-family: "Parisienne", cursive;
  font-size: 38px;
  color: #b08a46;
  margin: 0 0 5px;
}

.buying-intro h2,
.buying-process h2,
.buying-final-cta h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 45px;
  font-weight: 500;
  letter-spacing: 2px;
  margin: 0 0 20px;
}

.buying-gold-line {
  width: 55px;
  height: 2px;
  background: #b08a46;
  margin: 0 auto 30px;
}

.buying-intro > p:not(.buying-script) {
  max-width: 680px;
  margin: 0 auto 18px;
  font-size: 14px;
  line-height: 1.9;
  color: #666666;
}


/* BUYING PROCESS */
.buying-process {
  background: #050505;
  color: white;
  text-align: center;
  padding: 90px 6%;
}

.buying-process .buying-script {
  color: #d4b16a;
}

.buying-steps {
  max-width: 1200px;
  margin: 50px auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}

.buying-step {
  border: 1px solid #333333;
  padding: 35px 18px;
  min-height: 260px;
  transition: 0.3s ease;
}

.buying-step:hover {
  border-color: #c6a15b;
  transform: translateY(-5px);
}

.buying-step span {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 50px;
  color: #c6a15b;
  margin-bottom: 20px;
}

.buying-step h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.buying-step p {
  color: #aaaaaa;
  font-size: 11px;
  line-height: 1.8;
}


/* FINAL CTA */
.buying-final-cta {
  padding: 100px 25px;
  text-align: center;
  background: #f5f2ed;
}

.buying-final-cta > p:not(.buying-script) {
  color: #666666;
  margin-bottom: 30px;
}

.buying-contact-btn,
.buying-email-btn {
  display: inline-block;
  min-width: 180px;
  padding: 15px 22px;
  margin: 5px;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 600;
}

.buying-contact-btn {
  background: #050505;
  color: white;
  border: 1px solid #050505;
}

.buying-email-btn {
  background: transparent;
  color: #050505;
  border: 1px solid #050505;
}


/* =====================================================
   BUYING PAGE - MOBILE
===================================================== */

@media (max-width: 700px) {

  .inner-page-header {
    height: 70px;
    padding: 7px 15px;
  }

  .inner-page-logo {
    width: 55px;
    height: 55px;
  }

  .back-home-btn {
    padding: 9px 13px;
    font-size: 8px;
  }


  .buying-page-hero {
    min-height: 470px;
    padding: 45px 22px;

    background:
  linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.72) 50%,
    rgba(0, 0, 0, 0.35) 100%
  ),
  url("PASTE-BUYING-HOUSE-IMAGE-URL-HERE");

background-size: cover;
background-position: center;
background-repeat: no-repeat;
  }

  .buying-page-hero-content {
    width: 100%;
  }

  .buying-small-title {
    font-size: 8px;
    letter-spacing: 2.5px;
  }

  .buying-page-hero h1 {
    font-size: 54px;
  }

  .buying-page-hero-content > p:not(.buying-small-title) {
    font-size: 11px;
    max-width: 280px;
  }

  .buying-hero-btn {
    font-size: 8px;
    padding: 12px 16px;
  }


  .buying-intro {
    padding: 60px 25px;
  }

  .buying-script {
    font-size: 30px;
  }

  .buying-intro h2,
  .buying-process h2,
  .buying-final-cta h2 {
    font-size: 31px;
  }

  .buying-intro > p:not(.buying-script) {
    font-size: 11px;
    line-height: 1.8;
  }


  .buying-process {
    padding: 60px 20px;
  }

  .buying-steps {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 35px;
  }

  .buying-step {
    min-height: auto;
    padding: 25px 20px;
  }

  .buying-step span {
    font-size: 38px;
    margin-bottom: 10px;
  }

  .buying-step p {
    font-size: 10px;
  }


  .buying-final-cta {
    padding: 65px 20px;
  }

  .buying-contact-btn,
  .buying-email-btn {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 8px auto;
  }

}
/* =====================================================
   VIEW HOMES POPUP
===================================================== */

.homes-popup {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  z-index: 99999;
  overflow-y: auto;
}

.homes-popup.popup-active {
  display: block;
}

.homes-popup-inner {
  min-height: 100vh;
  background: #ffffff;
}


/* TOP BLACK HEADER */

.homes-popup-header {
  background: #050505;
  color: #ffffff;
  min-height: 105px;
  padding: 20px 6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.homes-small-title {
  color: #c6a15b;
  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  margin: 0 0 6px;
}

.homes-popup-header h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 34px;
  font-weight: 500;
  margin: 0;
}

.homes-close {
  width: 45px;
  height: 45px;
  border: 1px solid #c6a15b;
  background: transparent;
  color: #ffffff;
  font-size: 20px;
  cursor: pointer;
}


/* INTRO */

.homes-popup-intro {
  padding: 65px 20px 35px;
  text-align: center;
}

.homes-popup-intro .buying-script {
  margin-bottom: 0;
}

.homes-popup-intro h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 36px;
  letter-spacing: 2px;
  margin: 4px 0 12px;
}

.homes-popup-intro > p:not(.buying-script) {
  color: #777777;
  font-size: 13px;
  line-height: 1.7;
}


/* HOMES GRID */

.homes-grid {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto 70px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}


/* PROPERTY CARD */

.home-card {
  background: #ffffff;
  border: 1px solid #dedede;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.home-card-image {
  height: 250px;
  background: #eeeeee;
  position: relative;
  overflow: hidden;
}

.home-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.home-status {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #050505;
  color: #ffffff;
  padding: 8px 13px;
  font-family: "Montserrat", sans-serif;
  font-size: 8px;
  letter-spacing: 2px;
}

.home-card-info {
  padding: 25px;
}

.home-price {
  color: #b08a46;
  font-family: "Cormorant Garamond", serif;
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 5px;
}

.home-card-info h3 {
  font-family: "Cormorant Garamond", serif;
  font-size: 23px;
  margin: 0 0 3px;
}

.home-location {
  color: #888888;
  font-size: 11px;
  margin: 0 0 20px;
}

.home-features {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  padding: 15px 0;
  margin-bottom: 20px;
}

.home-features span {
  font-family: "Montserrat", sans-serif;
  font-size: 8px;
  letter-spacing: 1px;
  color: #555555;
}

.home-view-button {
  display: block;
  width: 100%;
  padding: 13px 8px;
  background: #050505;
  color: #ffffff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  transition: 0.3s ease;
}

.home-view-button:hover {
  background: #b08a46;
}


/* BOTTOM CONTACT */

.homes-popup-bottom {
  background: #050505;
  color: #ffffff;
  padding: 60px 20px;
  text-align: center;
}

.homes-popup-bottom p {
  font-family: "Cormorant Garamond", serif;
  font-size: 28px;
  margin: 0 0 20px;
}

.homes-contact-button {
  display: inline-block;
  border: 1px solid #c6a15b;
  color: #ffffff;
  padding: 14px 25px;
  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
}


/* =====================================================
   VIEW HOMES - MOBILE
===================================================== */

@media (max-width: 700px) {

  .homes-popup-header {
    min-height: 80px;
    padding: 12px 18px;
  }

  .homes-small-title {
    font-size: 6px;
    letter-spacing: 1.5px;
  }

  .homes-popup-header h2 {
    font-size: 25px;
  }

  .homes-close {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }


  .homes-popup-intro {
    padding: 45px 20px 28px;
  }

  .homes-popup-intro h3 {
    font-size: 28px;
  }

  .homes-popup-intro > p:not(.buying-script) {
    font-size: 10px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }


  .homes-grid {
    width: calc(100% - 30px);
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 45px;
  }

  .home-card-image {
    height: 230px;
  }

  .home-card-info {
    padding: 20px;
  }

  .home-price {
    font-size: 27px;
  }

  .home-card-info h3 {
    font-size: 21px;
  }

  .home-features span {
    font-size: 7px;
  }

  .homes-popup-bottom {
    padding: 45px 20px;
  }

  .homes-popup-bottom p {
    font-size: 23px;
  }

}
/* =========================================
   BUYING PROCESS - MOBILE COMPACT
========================================= */

@media (max-width: 700px) {

  .buying-steps {
    gap: 8px;
  }

  .buying-step {
    min-height: 0 !important;
    padding: 18px 18px !important;
  }

  .buying-step span {
    font-size: 32px !important;
    margin-bottom: 5px !important;
  }

  .buying-step h3 {
    font-size: 10px !important;
    margin: 4px 0 7px !important;
  }

  .buying-step p {
    font-size: 9px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
  }

}
/* =====================================================
   SELLING PAGE
===================================================== */

#selling-page {
  min-height: 100vh;
  background: #ffffff;
  color: #111111;
}


/* SELLING HERO */

.selling-page-hero {
  min-height: 570px;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.94) 0%,
      rgba(0, 0, 0, 0.75) 50%,
      rgba(0, 0, 0, 0.35) 100%
    ),
    linear-gradient(
      135deg,
      #111111,
      #555555
    );

  background-size: cover;
  background-position: center;
}

.selling-page-hero-content {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 1200px;
  margin: auto;
  color: #ffffff;
}

.selling-small-title {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  color: #d4b16a;
  margin-bottom: 18px;
}

.selling-page-hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(60px, 8vw, 105px);
  line-height: 0.85;
  font-weight: 500;
  margin: 0 0 28px;
}

.selling-page-hero h1 span {
  display: block;
  font-family: "Parisienne", cursive;
  color: #d4b16a;
  font-size: 0.85em;
  font-weight: 400;
  margin-top: 15px;
}

.selling-page-hero-content > p:not(.selling-small-title) {
  max-width: 500px;
  font-size: 15px;
  line-height: 1.8;
  color: #e5e5e5;
  margin-bottom: 30px;
}

.selling-hero-btn {
  display: inline-block;
  padding: 15px 25px;
  background: #ffffff;
  color: #050505;
  border: 1px solid #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  transition: 0.3s ease;
}

.selling-hero-btn:hover {
  background: #c6a15b;
  border-color: #c6a15b;
}


/* SELLING INTRO */

.selling-intro {
  max-width: 800px;
  margin: auto;
  padding: 90px 25px;
  text-align: center;
}

.selling-script {
  font-family: "Parisienne", cursive;
  font-size: 38px;
  color: #b08a46;
  margin: 0 0 5px;
}

.selling-intro h2,
.selling-process h2,
.selling-final-cta h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 45px;
  font-weight: 500;
  letter-spacing: 2px;
  margin: 0 0 20px;
}

.selling-gold-line {
  width: 55px;
  height: 2px;
  background: #b08a46;
  margin: 0 auto 30px;
}

.selling-intro > p:not(.selling-script) {
  max-width: 680px;
  margin: 0 auto 18px;
  font-size: 14px;
  line-height: 1.9;
  color: #666666;
}


/* SELLING PROCESS */

.selling-process {
  background: #050505;
  color: #ffffff;
  text-align: center;
  padding: 90px 6%;
}

.selling-process .selling-script {
  color: #d4b16a;
}

.selling-steps {
  max-width: 1200px;
  margin: 50px auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}

.selling-step {
  border: 1px solid #333333;
  padding: 35px 18px;
  min-height: 260px;
  transition: 0.3s ease;
}

.selling-step:hover {
  border-color: #c6a15b;
  transform: translateY(-5px);
}

.selling-step span {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 50px;
  color: #c6a15b;
  margin-bottom: 20px;
}

.selling-step h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.selling-step p {
  color: #aaaaaa;
  font-size: 11px;
  line-height: 1.8;
}


/* FINAL SELLING CTA */

.selling-final-cta {
  padding: 100px 25px;
  text-align: center;
  background: #f5f2ed;
}

.selling-final-cta > p:not(.selling-script) {
  color: #666666;
  margin-bottom: 30px;
}

.selling-contact-btn,
.selling-email-btn {
  display: inline-block;
  min-width: 200px;
  padding: 15px 22px;
  margin: 5px;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 600;
}

.selling-contact-btn {
  background: #050505;
  color: #ffffff;
  border: 1px solid #050505;
}

.selling-email-btn {
  background: transparent;
  color: #050505;
  border: 1px solid #050505;
}


/* =====================================================
   SELLING PAGE - MOBILE
===================================================== */

@media (max-width: 700px) {

  .selling-page-hero {
    min-height: 470px;
    padding: 45px 22px;
  }

  .selling-page-hero-content {
    width: 100%;
  }

  .selling-small-title {
    font-size: 8px;
    letter-spacing: 2.5px;
  }

  .selling-page-hero h1 {
    font-size: 54px;
  }

  .selling-page-hero-content > p:not(.selling-small-title) {
    font-size: 11px;
    max-width: 290px;
  }

  .selling-hero-btn {
    font-size: 8px;
    padding: 12px 16px;
  }


  .selling-intro {
    padding: 60px 25px;
  }

  .selling-script {
    font-size: 30px;
  }

  .selling-intro h2,
  .selling-process h2,
  .selling-final-cta h2 {
    font-size: 31px;
  }

  .selling-intro > p:not(.selling-script) {
    font-size: 11px;
    line-height: 1.8;
  }


  .selling-process {
    padding: 60px 20px;
  }

  .selling-steps {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 35px;
  }

  .selling-step {
    min-height: 0;
    padding: 18px;
  }

  .selling-step span {
    font-size: 32px;
    margin-bottom: 5px;
  }

  .selling-step h3 {
    font-size: 10px;
    margin: 4px 0 7px;
  }

  .selling-step p {
    font-size: 9px;
    line-height: 1.5;
    margin: 0;
  }


  .selling-final-cta {
    padding: 65px 20px;
  }

  .selling-contact-btn,
  .selling-email-btn {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 8px auto;
  }

}
/* =====================================================
   GET IN TOUCH PAGE
===================================================== */

#contact-page {
  min-height: 100vh;
  background: #ffffff;
  color: #111111;
}


/* CONTACT PAGE HERO */

.contact-page-hero {
  min-height: 520px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.95) 0%,
      rgba(0, 0, 0, 0.80) 55%,
      rgba(0, 0, 0, 0.55) 100%
    ),
    linear-gradient(
      135deg,
      #080808,
      #4a4a4a
    );
}

.contact-page-hero-content {
  width: 90%;
  max-width: 1200px;
  margin: auto;
  position: relative;
  z-index: 2;
  color: #ffffff;
}

.contact-page-small {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  letter-spacing: 4px;
  color: #d4b16a;
  margin-bottom: 18px;
}

.contact-page-hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(65px, 8vw, 105px);
  font-weight: 500;
  line-height: 0.85;
  margin: 0 0 30px;
}

.contact-page-hero h1 span {
  display: block;
  font-family: "Parisienne", cursive;
  font-weight: 400;
  color: #d4b16a;
  font-size: 0.85em;
  margin-top: 15px;
}

.contact-page-hero-content > p:not(.contact-page-small) {
  max-width: 500px;
  font-size: 14px;
  line-height: 1.8;
  color: #dddddd;
  margin-bottom: 30px;
}

.contact-page-call {
  display: inline-block;
  background: #ffffff;
  color: #050505;
  padding: 15px 28px;
  border: 1px solid #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  transition: 0.3s ease;
}

.contact-page-call:hover {
  background: #c6a15b;
  border-color: #c6a15b;
}


/* INTRO */

.contact-page-intro {
  max-width: 750px;
  margin: auto;
  padding: 80px 25px 55px;
  text-align: center;
}

.contact-page-script {
  font-family: "Parisienne", cursive;
  font-size: 38px;
  color: #b08a46;
  margin: 0 0 5px;
}

.contact-page-intro h2,
.contact-page-direct h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: 2px;
  margin: 0 0 20px;
}

.contact-page-gold-line {
  width: 55px;
  height: 2px;
  background: #b08a46;
  margin: 0 auto 25px;
}

.contact-page-intro > p:not(.contact-page-script) {
  color: #666666;
  font-size: 13px;
  line-height: 1.8;
  max-width: 600px;
  margin: auto;
}


/* CONTACT CHOICES */

.contact-page-options {
  max-width: 1150px;
  margin: 0 auto;
  padding: 10px 30px 90px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

.contact-option {
  appearance: none;
  width: 100%;
  min-height: 260px;
  padding: 35px 22px;
  background: #050505;
  color: #ffffff;
  border: 1px solid #222222;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: 0.3s ease;
}

.contact-option:hover {
  border-color: #c6a15b;
  transform: translateY(-5px);
}

.contact-option span {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 46px;
  color: #c6a15b;
  margin-bottom: 18px;
}

.contact-option h3 {
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  margin: 0 0 15px;
  color: #ffffff;
}

.contact-option p {
  font-size: 10px;
  line-height: 1.7;
  color: #aaaaaa;
  margin: 0;
}


/* DIRECT CONTACT */

.contact-page-direct {
  background: #f5f2ed;
  text-align: center;
  padding: 90px 25px;
}

.contact-page-details {
  max-width: 900px;
  margin: 45px auto 35px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.contact-page-details > div {
  padding: 20px;
  border-right: 1px solid #d5d0c8;
}

.contact-page-details > div:last-child {
  border-right: none;
}

.contact-page-details span {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  color: #9a7b43;
  margin-bottom: 10px;
}

.contact-page-details a {
  color: #111111;
  font-family: "Cormorant Garamond", serif;
  font-size: 20px;
  text-decoration: none;
}

.contact-page-brokerage {
  font-size: 11px;
  line-height: 1.8;
  color: #777777;
}


/* =====================================================
   GET IN TOUCH PAGE - MOBILE
===================================================== */

@media (max-width: 700px) {

  .contact-page-hero {
    min-height: 450px;
    padding: 45px 22px;
  }

  .contact-page-hero-content {
    width: 100%;
  }

  .contact-page-small {
    font-size: 8px;
    letter-spacing: 2.5px;
  }

  .contact-page-hero h1 {
    font-size: 55px;
  }

  .contact-page-hero-content > p:not(.contact-page-small) {
    max-width: 300px;
    font-size: 11px;
  }

  .contact-page-call {
    padding: 12px 18px;
    font-size: 8px;
  }


  .contact-page-intro {
    padding: 55px 22px 35px;
  }

  .contact-page-script {
    font-size: 29px;
  }

  .contact-page-intro h2,
  .contact-page-direct h2 {
    font-size: 30px;
  }

  .contact-page-intro > p:not(.contact-page-script) {
    font-size: 10px;
  }


  .contact-page-options {
    grid-template-columns: 1fr;
    padding: 5px 20px 60px;
    gap: 8px;
  }

  .contact-option {
    min-height: 0;
    padding: 20px 18px;
  }

  .contact-option span {
    font-size: 31px;
    margin-bottom: 5px;
  }

  .contact-option h3 {
    font-size: 10px;
    margin: 5px 0 7px;
  }

  .contact-option p {
    font-size: 9px;
    line-height: 1.5;
  }


  .contact-page-direct {
    padding: 60px 20px;
  }

  .contact-page-details {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }

  .contact-page-details > div {
    border-right: none;
    border-bottom: 1px solid #d5d0c8;
    padding: 18px 5px;
  }

  .contact-page-details > div:last-child {
    border-bottom: none;
  }

  .contact-page-details a {
    font-size: 18px;
  }

}
/* =====================================================
   ANGEL ADMIN LOGIN
===================================================== */

.admin-login-popup {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.88);

  display: none;
  align-items: center;
  justify-content: center;

  padding: 20px;
  overflow-y: auto;
}

.admin-login-popup.admin-login-active {
  display: flex;
}


.admin-login-box {
  width: 100%;
  max-width: 430px;
  background: #ffffff;

  position: relative;
  text-align: center;

  padding: 45px 40px 42px;

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.45);
}


.admin-login-close {
  position: absolute;
  top: 12px;
  right: 16px;

  border: none;
  background: transparent;

  color: #111111;
  font-size: 28px;
  line-height: 1;

  cursor: pointer;
}


.admin-login-logo {
  width: 85px;
  height: 85px;

  object-fit: contain;
  border-radius: 50%;

  margin: 0 auto 20px;
}


.admin-login-small {
  font-family: "Montserrat", sans-serif;

  font-size: 8px;
  font-weight: 600;

  letter-spacing: 2.5px;

  color: #9a7b43;

  margin-bottom: 10px;
}


.admin-login-box h2 {
  font-family: "Cormorant Garamond", serif;

  font-size: 42px;
  font-weight: 500;

  line-height: 1;

  color: #111111;

  margin: 0 0 15px;
}


.admin-login-box h2 span {
  font-family: "Parisienne", cursive;

  color: #b08a46;
  font-weight: 400;
}


.admin-login-description {
  font-size: 11px;
  line-height: 1.6;

  color: #777777;

  margin-bottom: 30px;
}


/* FORM */

#adminLoginForm {
  text-align: left;
}


#adminLoginForm label {
  display: block;

  font-family: "Montserrat", sans-serif;

  font-size: 8px;
  font-weight: 600;

  letter-spacing: 2px;

  color: #333333;

  margin: 0 0 7px;
}


#adminLoginForm input {
  width: 100%;
  height: 48px;

  border: 1px solid #d8d8d8;
  background: #fafafa;

  padding: 0 13px;

  font-family: "Montserrat", sans-serif;
  font-size: 12px;

  color: #111111;

  outline: none;

  margin-bottom: 18px;

  transition: 0.25s ease;
}


#adminLoginForm input:focus {
  border-color: #b08a46;
  background: #ffffff;

  box-shadow:
    0 0 0 2px rgba(176, 138, 70, 0.08);
}


.admin-login-button {
  width: 100%;

  border: 1px solid #050505;
  background: #050505;

  color: #ffffff;

  padding: 15px 20px;

  font-family: "Montserrat", sans-serif;

  font-size: 9px;
  font-weight: 600;

  letter-spacing: 2.5px;

  cursor: pointer;

  transition: 0.3s ease;
}


.admin-login-button:hover {
  background: #b08a46;
  border-color: #b08a46;
}


.admin-login-message {
  min-height: 18px;

  text-align: center;

  font-family: "Montserrat", sans-serif;
  font-size: 10px;

  margin: 15px 0 0;
}


/* =====================================================
   ADMIN LOGIN MOBILE
===================================================== */

@media (max-width: 700px) {

  .admin-login-popup {
    padding: 15px;
  }

  .admin-login-box {
    max-width: 360px;
    padding: 38px 25px 32px;
  }

  .admin-login-logo {
    width: 70px;
    height: 70px;
  }

  .admin-login-box h2 {
    font-size: 36px;
  }

  #adminLoginForm input {
    height: 45px;
  }

}
/* =====================================================
   MOBILE HAMBURGER MENU FIX
===================================================== */

.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  position: relative;
  z-index: 10002;
}

.menu-toggle span {
  display: block;
  width: 25px;
  height: 2px;
  background: #ffffff;
  margin: 5px 0;
  transition: 0.3s ease;
}


/* MOBILE */

@media (max-width: 1000px) {

  .menu-toggle {
    display: block !important;
  }

  .main-nav {
    display: none !important;
  }

  .main-nav.mobile-open {
    display: flex !important;

    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    width: 100%;

    flex-direction: column;
    align-items: center;

    background: #050505;

    padding: 22px 20px 28px;

    z-index: 10001;

    box-shadow:
      0 12px 25px rgba(0, 0, 0, 0.25);
  }

  .main-nav.mobile-open a {
    display: block;
    width: 100%;

    padding: 13px 10px;

    text-align: center;

    color: #ffffff;

    font-family: "Montserrat", sans-serif;

    font-size: 10px;
    letter-spacing: 2px;

    border-bottom:
      1px solid rgba(255, 255, 255, 0.08);
  }

  .main-nav.mobile-open a:last-child {
    border-bottom: none;
  }


  /* Animate hamburger into X */

  .menu-toggle.active span:nth-child(1) {
    transform:
      translateY(7px)
      rotate(45deg);
  }

  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.active span:nth-child(3) {
    transform:
      translateY(-7px)
      rotate(-45deg);
  }

}
/* ADMIN LOGIN LINK IN FOOTER */

.footer-admin-button {
  display: block;
  margin: 15px auto 0;

  border: none;
  background: transparent;

  color: #777777;

  font-family: "Montserrat", sans-serif;
  font-size: 7px;
  letter-spacing: 2px;

  cursor: pointer;
  transition: 0.3s ease;
}

.footer-admin-button:hover {
  color: #c6a15b;
}
/* =====================================================
   ANGEL ADMIN DASHBOARD
===================================================== */

.admin-dashboard {
  display: none;
  min-height: 100vh;
  background: #f5f2ed;
  color: #111;
}

.admin-dashboard.admin-dashboard-active {
  display: block;
}


/* HEADER */

.admin-dashboard-header {
  min-height: 95px;
  background: #050505;
  padding: 12px 5%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid #b08a46;
}

.admin-dashboard-brand {
  display: flex;
  align-items: center;
  gap: 15px;
}

.admin-dashboard-brand img {
  width: 65px;
  height: 65px;
  object-fit: contain;
  border-radius: 50%;
}

.admin-dashboard-brand p {
  margin: 0 0 4px;

  font-family: "Montserrat", sans-serif;
  font-size: 7px;
  letter-spacing: 2px;

  color: #c6a15b;
}

.admin-dashboard-brand h2 {
  margin: 0;

  font-family: "Cormorant Garamond", serif;
  font-size: 25px;
  font-weight: 500;

  color: #fff;
}

.admin-logout-button {
  border: 1px solid #c6a15b;
  background: transparent;
  color: #fff;

  padding: 11px 18px;

  font-family: "Montserrat", sans-serif;
  font-size: 8px;
  letter-spacing: 2px;

  cursor: pointer;
  transition: 0.3s ease;
}

.admin-logout-button:hover {
  background: #c6a15b;
  color: #050505;
}


/* INTRO */

.admin-dashboard-intro {
  background: #fff;
  text-align: center;
  padding: 55px 20px 40px;
}

.admin-script {
  margin: 0 0 4px;

  font-family: "Parisienne", cursive;
  font-size: 31px;

  color: #b08a46;
}

.admin-dashboard-intro h1 {
  margin: 0 0 12px;

  font-family: "Cormorant Garamond", serif;
  font-size: 46px;
  font-weight: 500;
  letter-spacing: 2px;
}

.admin-dashboard-intro > p:not(.admin-script) {
  margin: 0;
  font-size: 11px;
  color: #777;
}


/* TABS */

.admin-dashboard-tabs {
  display: flex;
  justify-content: center;

  background: #fff;
  padding: 0 20px 35px;

  gap: 8px;
}

.admin-tab {
  min-width: 170px;

  border: 1px solid #111;
  background: #fff;
  color: #111;

  padding: 13px 20px;

  font-family: "Montserrat", sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 2px;

  cursor: pointer;
  transition: 0.3s ease;
}

.admin-tab.active,
.admin-tab:hover {
  background: #050505;
  color: #fff;
}


/* PANELS */

.admin-panel {
  display: none;

  width: 92%;
  max-width: 1050px;

  margin: 45px auto 80px;
}

.admin-panel.active {
  display: block;
}

.admin-panel-heading {
  text-align: center;
  margin-bottom: 30px;
}

.admin-panel-heading h2 {
  margin: 0;

  font-family: "Cormorant Garamond", serif;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 2px;
}


/* FORM SECTIONS */

.admin-form-section {
  background: #fff;

  padding: 35px;

  margin-bottom: 20px;

  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

.admin-form-section > h3 {
  margin: 0 0 25px;

  padding-bottom: 12px;

  border-bottom: 1px solid #eee;

  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
}


/* PHOTO UPLOAD */

.admin-upload-box {
  min-height: 180px;

  border: 1px dashed #b08a46;
  background: #faf9f7;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;

  cursor: pointer;

  padding: 25px;

  transition: 0.3s ease;
}

.admin-upload-box:hover {
  background: #f5f0e7;
}

.admin-upload-icon {
  font-family: "Cormorant Garamond", serif;
  font-size: 48px;
  line-height: 1;

  color: #b08a46;

  margin-bottom: 10px;
}

.admin-upload-box strong {
  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  letter-spacing: 2px;

  color: #111;
}

.admin-upload-box small {
  margin-top: 7px;

  font-size: 9px;
  color: #888;
}


/* IMAGE PREVIEW */

.admin-image-preview {
  display: none;

  width: 100%;
  max-width: 450px;

  margin: 20px auto 0;
}

.admin-image-preview.preview-active {
  display: block;
}

.admin-image-preview img {
  width: 100%;
  max-height: 300px;

  display: block;

  object-fit: cover;
}


/* FORM GRID */

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);

  gap: 20px;
}

.admin-field {
  display: flex;
  flex-direction: column;
}

.admin-field-full {
  grid-column: 1 / -1;
}

.admin-field label {
  margin-bottom: 7px;

  font-family: "Montserrat", sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1.5px;

  color: #444;
}

.admin-field input,
.admin-field select,
.admin-field textarea {
  width: 100%;

  border: 1px solid #ddd;
  background: #fafafa;

  padding: 13px;

  font-family: "Montserrat", sans-serif;
  font-size: 11px;

  color: #111;

  outline: none;

  transition: 0.25s ease;
}

.admin-field input,
.admin-field select {
  min-height: 46px;
}

.admin-field textarea {
  resize: vertical;
  min-height: 130px;
}

.admin-field input:focus,
.admin-field select:focus,
.admin-field textarea:focus {
  border-color: #b08a46;
  background: #fff;
}


/* CHECKBOX */

.admin-checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;

  gap: 10px;

  cursor: pointer;
}

.admin-checkbox input {
  width: 18px !important;
  min-height: 18px !important;
  height: 18px;

  margin: 0;
}

.admin-checkbox span {
  font-family: "Montserrat", sans-serif;
  font-size: 10px;
  letter-spacing: 0;
}


/* PUBLISH BUTTON */

.admin-save-listing {
  width: 100%;

  border: 1px solid #050505;
  background: #050505;

  color: #fff;

  padding: 17px 25px;

  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.5px;

  cursor: pointer;

  transition: 0.3s ease;
}

.admin-save-listing:hover {
  background: #b08a46;
  border-color: #b08a46;
}

.admin-save-listing:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.admin-listing-message {
  min-height: 20px;

  text-align: center;

  font-family: "Montserrat", sans-serif;
  font-size: 10px;

  margin: 15px 0 0;
}


/* =====================================================
   ADMIN EXISTING LISTINGS
===================================================== */

.admin-listings-grid {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 18px;
}

.admin-empty-listings {
  grid-column: 1 / -1;

  background: #fff;

  padding: 45px 20px;

  text-align: center;

  font-size: 11px;
  color: #777;
}


/* ADMIN LISTING CARD - FOR LATER */

.admin-listing-card {
  background: #fff;

  overflow: hidden;

  box-shadow:
    0 5px 20px rgba(0, 0, 0, 0.06);
}

.admin-listing-card img {
  width: 100%;
  height: 190px;

  object-fit: cover;
}

.admin-listing-card-content {
  padding: 20px;
}

.admin-listing-card-content h3 {
  margin: 0 0 6px;

  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
}

.admin-listing-card-price {
  margin: 0 0 10px;

  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 600;

  color: #b08a46;
}

.admin-listing-card-address {
  margin: 0;

  font-size: 10px;
  line-height: 1.6;

  color: #777;
}


/* =====================================================
   ADMIN DASHBOARD MOBILE
===================================================== */

@media (max-width: 700px) {

  .admin-dashboard-header {
    min-height: 75px;
    padding: 10px 15px;
  }

  .admin-dashboard-brand {
    gap: 9px;
  }

  .admin-dashboard-brand img {
    width: 48px;
    height: 48px;
  }

  .admin-dashboard-brand p {
    font-size: 5px;
    letter-spacing: 1px;
  }

  .admin-dashboard-brand h2 {
    font-size: 17px;
  }

  .admin-logout-button {
    padding: 9px 10px;
    font-size: 6px;
  }


  .admin-dashboard-intro {
    padding: 40px 18px 28px;
  }

  .admin-script {
    font-size: 27px;
  }

  .admin-dashboard-intro h1 {
    font-size: 32px;
  }


  .admin-dashboard-tabs {
    padding: 0 15px 25px;
  }

  .admin-tab {
    min-width: 0;
    width: 50%;

    padding: 11px 7px;

    font-size: 6px;
  }


  .admin-panel {
    width: calc(100% - 24px);

    margin: 28px auto 55px;
  }

  .admin-panel-heading h2 {
    font-size: 28px;
  }


  .admin-form-section {
    padding: 22px 16px;
  }

  .admin-upload-box {
    min-height: 145px;
  }


  .admin-form-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .admin-field-full {
    grid-column: auto;
  }


  .admin-listings-grid {
    grid-template-columns: 1fr;
  }

}
/* =========================================
   RICHARDS CURSIVE HERO NAME
========================================= */

.richards-name {
  display: block !important;
  font-family: "Allura", "Brush Script MT", cursive !important;
  font-size: 68px !important;
  font-weight: 400 !important;
  line-height: 0.9 !important;
  letter-spacing: 1px !important;
  text-transform: none !important;
  font-style: normal !important;
}
/* =========================================
   KW BROKERAGE INFO - FOOTER STYLE
========================================= */

.kw-golden-isles-section {
  background: #050505 !important;
  color: #ffffff !important;
  text-align: center !important;
  padding: 45px 20px 30px !important;
  margin: 0 !important;
}

.kw-golden-isles-section .brokered-by {
  color: #aaaaaa !important;
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

.kw-golden-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

.kw-golden-logo {
  font-size: 30px !important;
  font-weight: 700 !important;
}

.kw-golden-text strong,
.kw-golden-text span {
  color: #ffffff !important;
}

.kw-golden-tagline {
  color: #cccccc !important;
  margin: 20px auto !important;
  line-height: 1.6 !important;
}

.kw-golden-details {
  color: #aaaaaa !important;
  font-size: 12px !important;
  line-height: 1.7 !important;
}

.kw-golden-details p {
  margin: 8px 0 !important;
}

.kw-legal {
  color: #777777 !important;
  font-size: 10px !important;
}

.main-footer {
  margin-top: 0 !important;
  border-top: 1px solid rgba(255,255,255,.1) !important;
}
/* =========================================
   ADMIN EDIT + DELETE BUTTONS
========================================= */

.admin-listing-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.admin-edit-listing,
.admin-delete-listing,
.admin-cancel-edit {
  border: none;
  padding: 12px 18px;
  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  cursor: pointer;
}

.admin-edit-listing {
  background: #c6a15b;
  color: #050505;
}

.admin-delete-listing {
  background: #050505;
  color: #ffffff;
}

.admin-cancel-edit {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: transparent;
  color: #555555;
  border: 1px solid #cccccc;
}
/* =========================================
   BUYING POLAROID PHOTOS
========================================= */

.polaroid-photo-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.polaroid-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.polaroid-photo-box.has-photo .polaroid-photo {
  display: block;
}

.polaroid-photo-box.has-photo .polaroid-placeholder-text {
  display: none;
}
/* =========================================
   WEBSITE PHOTO AREAS
   GET IN TOUCH + INSTAGRAM
========================================= */

.website-photo-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.website-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.website-photo-box.has-photo .website-photo {
  display: block;
}

.website-photo-box.has-photo .website-photo-placeholder {
  display: none;
}


/* =========================================
   CATEGORY — GET IN TOUCH PHOTO
========================================= */

.contact-card .category-image {
  overflow: hidden;
}

.contact-card .website-photo-box {
  width: 100%;
  height: 100%;
}

.contact-card .website-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =========================================
   INSTAGRAM PHOTOS
========================================= */

.instagram-photo {
  overflow: hidden;
}

.instagram-photo .website-photo-box {
  width: 100%;
  height: 100%;
}

.instagram-photo .website-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =========================================
   ADMIN WEBSITE PHOTO PREVIEWS
========================================= */

#adminPhotosPanel .admin-image-preview {
  margin-top: 15px;
  overflow: hidden;
  border-radius: 4px;
}

#adminPhotosPanel .admin-image-preview img {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  display: block;
}
/* =========================================
   FIX GET IN TOUCH + FACEBOOK PHOTOS
========================================= */

.website-photo-box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.website-managed-photo {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  display: none;
}

.website-photo-box.has-photo .website-managed-photo {
  display: block;
}

.website-photo-box.has-photo .website-placeholder-text {
  display: none;
}
/* =========================================
   FACEBOOK SINGLE PHOTO — FIX
========================================= */

.facebook-single-grid {
  display: block !important;
  width: 100% !important;
  max-width: 1100px;
  margin: 35px auto !important;
  padding: 0 20px;
}

.facebook-single-photo {
  display: block !important;
  position: relative;
  width: 100% !important;
  height: 500px !important;
  overflow: hidden;
}

.facebook-single-photo .website-photo-box {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 500px !important;
  overflow: hidden;
}

.facebook-single-photo .website-managed-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.facebook-single-photo
.website-photo-box.has-photo
.website-managed-photo {
  display: block !important;
}

.facebook-single-photo
.website-photo-box.has-photo
.website-placeholder-text {
  display: none !important;
}


/* PHONE */

@media (max-width: 768px) {

  .facebook-single-grid {
    margin: 25px auto !important;
    padding: 0 20px;
  }

  .facebook-single-photo {
    height: 260px !important;
  }

  .facebook-single-photo .website-photo-box {
    height: 260px !important;
    min-height: 260px !important;
  }

}