/* ============================================
   Paradise Breeze - Custom Styles (Bootstrap Enhanced)
   ============================================ */

/* Variables */
:root {
    --teal: #3A9E9E;
    --gold: #B8A06A;
    --dark: #222222;
    --gray: #6B6B6B;
}

/* Base Styles */
body {
    font-family: 'Playfair Display', sans-serif;
    font-weight: 300;
    color: var(--dark);
    line-height: 1.7;
}
/* HOME HERO SECTION */
.home-hero {
  height: 800px;                     /* REQUIRED HEIGHT */
  width: 100%;
  position: relative;
  background-image: url("images/first.png"); 
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
 

/* Optional dark overlay for readability */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  
}

/* Content */
.home-hero-content {
  position: relative;               /* overlay ke upar lane ke liye */
  color: #ffffff;
   display: flex;
  align-items: flex-end;
  
}

/* Main heading */
.home-hero-content h1 {
  font-family: "Playfair Display", serif;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  font-size: 48px;
  

  align-items: flex-end;
}
}

/* Sub heading */
.home-hero-content h2 {
  font-family: "Nunito", sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 400;
}
/* GOLD OUTLINE BUTTON – Figma Style */
.btn-outline-gold {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  padding: 14px 36px;
  border: 1px solid #d2b48c;           /* gold border */
  background: transparent;

  font-family: "Nunito", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;

  color: #6d5f55;
  transition: all 0.25s ease;
}

/* Arrow inside button */
.btn-outline-gold .arrow {
  font-size: 1rem;
  line-height: 1;
}

/* Hover state */
.btn-outline-gold:hover {
  background-color: #d2b48c;
  color: #ffffff;
}
/* SECTION SPACING */
.residences-section {
  padding-top: 110px;
  padding-bottom: 110px;
  background-color: #f5f3ef; /* light beige like figma */
}

/* SLIDER WRAPPER */
.res-slider {
  position: relative;
  overflow: hidden;
  background: #000;
}

/* SLIDER TRACK */
.res-slider-track {
  display: flex;
  width: 400%;                 /* 4 slides (change if more/less) */
  transform: translateX(0);
  transition: transform 0.5s ease;
}

.res-slider-track img {
  flex: 0 0 100%;
  width: 100%;
  height: 430px;
  object-fit: cover;
}

/* DOTS (top-left) */
.res-slider-dots {
  position: absolute;
  top: 14px;
  left: 18px;
  display: flex;
  gap: 6px;
}

.res-slider-dots .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid #ffffff;
  background: transparent;
  opacity: 0.7;
  cursor: pointer;
}

.res-slider-dots .dot.active {
  background: #ffffff;
  opacity: 1;
}

/* ARROWS (bottom-left) */
.res-slider-arrows {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: flex;
  gap: 8px;
}

.res-arrow {
  width: 42px;
  height: 42px;
  border: none;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.res-arrow span {
  color: #c4a676;               /* gold-ish */
  font-size: 1.1rem;
}

/* RIGHT WHITE CARD */
.res-card {
  background: #ffffff;
  padding: 42px 46px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
}

.res-card-title {
  font-family: "Playfair Display", serif;
  font-size: 1.2rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1aa5b7;
  margin-bottom: 1.4rem;
}

.res-card p {
  font-family: "Nunito", sans-serif;
  font-size: 0.95rem;
  line-height: 1.9;
  color: #6d5f55;
  margin-bottom: 1rem;
}

@media (max-width: 991.98px) {
  .res-slider-track img {
    height: 320px;
  }

  .res-card {
    margin-top: 2rem;
  }
}

/* Hero Background */
.hero-bg {
    background: 
        linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 100%),
        linear-gradient(135deg, 
            #5a7a5a 0%, 
            #4a6a4a 20%, 
            #3a5a3a 40%, 
            #2a4a2a 60%, 
            #1a3a2a 80%, 
            #0a2a1a 100%
        );
}

.hero-bg::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 70%;
    height: 80%;
    background: linear-gradient(45deg, rgba(80,100,70,0.6) 0%, transparent 100%);
    border-radius: 0 0 100% 0;
    transform: rotate(-15deg);
}

.hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 60%;
    background: radial-gradient(ellipse at top right, rgba(255,255,255,0.08) 0%, transparent 60%);
}
/* INTRO LUXURY SECTION */
.intro-luxury-section {
  padding-top: 140px;     /* ✅ REQUIRED */
  padding-bottom: 80px;  /* ✅ REQUIRED */
  background-color: #ffffff;
}

/* Small top line */
.intro-eyebrow {
  font-family: "Nunito", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #8a6f63;
}

/* Main heading */
.intro-main-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: #2aa6b3;
  text-transform: uppercase;
}

/* Paragraphs */
.intro-paragraphs p {
  font-family: "Nunito", sans-serif;
  font-size: 0.95rem;
  line-height: 1.9;
  color: #6d5f55;
  margin-bottom: 1.2rem;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

/* Form Focus States */
.form-control:focus,
.form-select:focus {
    box-shadow: none;
    border-color: var(--teal) !important;
}

.form-check-input:checked {
    background-color: var(--teal);
    border-color: var(--teal);
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Selection Color */
::selection {
    background: var(--teal);
    color: #fff;
}

/* Button Hover States */
.btn-outline-dark:hover {
    background-color: var(--dark);
    border-color: var(--dark);
}

.btn-outline-light:hover {
    background-color: #fff;
    color: var(--dark);
}

/* Link Hover States */
a:hover {
    color: var(--teal);
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .hero-section .position-relative {
        padding-left: 2rem !important;
        padding-bottom: 4rem !important;
    }
}

@media (max-width: 767px) {
    .hero-section .position-relative {
        padding: 0 1.5rem 3rem !important;
    }
}
/* Global font */
body {
  margin: 0;
  font-family: "Playfair Display", serif;
}

/* HERO SECTION */
.residences-hero {
  height: 800px; /* tumhari requirement */
  width: 100%;
  position: relative;
  color: #ffffff;
  background-image: url("images/bg.png"); /* apni image ka path */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  
}

/* Center content */
.hero-inner {
  position: relative;
  z-index: 1;
}

/* Title styling */
.residences-title {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Button style */
/* Figma style button */
.btn-contact {
  display: inline-flex;
  align-items: center;
  gap: 18px; /* text aur arrow ka gap */
  background-color: #1aa5b7; /* teal color */
  color: #ffffff;
  padding: 14px 32px;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  text-decoration: none;
  border-radius: 0; /* sharp corners */
  transition: background 0.3s ease;
}

.btn-contact:hover {
  background-color: #158a99;
  color: #ffffff;
}

.btn-contact .arrow {
  font-size: 1.3rem; 
  line-height: 1;
  margin-top: 2px; /* thoda align fix */
}
/* SECTION 2 */
.luxury-section {
  background-color: #ffffff;
  padding-top: 110px;    /* TOP padding */
  padding-bottom: 110px; 
}

/* Heading */
.luxury-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 130%;
  color: #2aa6b3; /* teal tone from Figma */
  text-transform: uppercase;
  letter-spacing: 0.0;
  max-width: 520px;
}

/* Paragraph */
.luxury-text {
  font-family: "Nunito";
  font-size: 18px;
  font-weight: 400;
  line-height: 1.8;
  color: #69443C;
  max-width: 520px;
}

/* Image wrapper */
.luxury-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* SECTION 3 - Full Image */
.full-image-section {
  width: 100%;
  height: 800px;                     /* required height */
  background-image: url("images/Hero\ \(1\).png"); /* image path */
  background-size: cover;            /* image cover */
  background-position: center;       /* center crop */
  background-repeat: no-repeat;
}
/* SECTION 4 */
.features-section {
  background-color: #ffffff;
  padding-top: 110px;     /* top spacing */
  padding-bottom: 160px; /* bottom spacing */
}

/* Titles */
.features-title {
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  letter-spacing: 0em;
  text-transform: uppercase;
 
  color: #2aa6b3; /* teal */
}

/* List */
.features-list {
  list-style: none;
  padding-left: 0;
  
}

.features-list li {
 font-family: "Nunito", sans-serif; 
  list-style-type: disc;  /* normal bullet */
  font-size: 0.95rem;
  line-height: 1.4;       /* line height kam – Figma jaisa tight */
  color: #69443C;
  margin-bottom: 6px;
   margin-right: 90px !important;
}

/* Custom bullet */
.features-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #69443C; /* brownish bullet */
  font-size: 1.1rem;
  line-height: 1;
   margin-left: 20px !important;
}

/* Download button */
.features-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 32px;
  border: 1px solid #e2c3a6;
  color: #8a5e4b;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.features-download-btn:hover {
  background-color: #e2c3a6;
  color: #ffffff;
}
.features-section ul {
  margin-left: 20px;
}
.full-image {
  width: 100%;
  height: 800px;                     /* required height */
  background-image: url("images/Hero\ \(1\).png"); /* image path */
  background-size: cover;            /* image cover */
  background-position: center;       /* center crop */
  background-repeat: no-repeat;
}
/* SECTION 5 – Newsletter / Form */
.newsletter-section {
  background-color: #ffffff;
  padding-top: 110px;
  padding-bottom: 160px;
}

/* Heading */
.newsletter-title {
  font-family: "Playfair Display", serif;
  font-size: 24px;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #2aa6b3;
  max-width: 900px;
  margin: 0 auto 2.5rem auto;
}

/* Form basics */
.newsletter-form label {
  display: block;
  font-family: "Nunito", sans-serif;
  font-size: 0.85rem;
  color: #8a5e4b;
  margin-bottom: 0px;
}

.newsletter-form label span {
  color: #c48c5a;
}

/* Underline inputs & selects */
.form-underline {
  border: none;
  border-bottom: 1px solid #9ad3d8;
  border-radius: 0;
  padding: 1px 0 6px;
  background-color: transparent;
  box-shadow: none;
}

.form-underline:focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: #2aa6b3;
}

/* Bootstrap select reset */
.newsletter-form .form-select.form-underline {
  background-color: transparent;
  background-image: none;
  padding-right: 24px;
}

/* Custom dropdown arrow */
.select-group {
  position: relative;
}

.select-arrow {
  position: absolute;
  right: 0;
  bottom: 8px;
  font-size: 0.75rem;
  color: #8a5e4b;
  pointer-events: none;
}

/* Broker row */
.broker-row {
  margin-top: 24px;
  font-family: "Nunito", sans-serif;
  font-size: 0.85rem;
  color: #6d5f55;
}

.broker-label {
  margin-right: 12px;
}

.newsletter-form .form-check-input {
  width: 14px;
  height: 14px;
  border-radius: 0;
  border-color: #c48c5a;
  margin-top: 0;
}

/* Submit button – outline style (like fact sheet) */
.newsletter-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 38px;
  border: 1px solid #e2c3a6;
  background-color: #ffffff;
  color: #8a5e4b;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  font-family: "Nunito", sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.newsletter-submit-btn span {
  font-size: 0.95rem;
}

.newsletter-submit-btn:hover {
  background-color: #e2c3a6;
  color: #ffffff;
}

/* Responsive tweaks */
@media (max-width: 767.98px) {
  .newsletter-title {
    font-size: 0.95rem;
    letter-spacing: 0.1em;
  }
}
/* OUR STORY HERO */
.our-story-hero {
  height: 800px;                       
  width: 100%;
  position: relative;
  color: #ffffff;
  background-image: url("images/bg\ \(1\).png"); 
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Title styling */
.our-story-title {
  font-family: "Playfair Display", serif;
  font-size:48px;
  letter-spacing: 0.4px;
  font-weight: 400;
  text-transform: uppercase;

}
/* OUR STORY – STORY BEHIND OUR NAME */
.story-name-section {
  background-color: #ffffff;
  padding-top: 110px;
  padding-bottom: 110px;
}

/* Title */
.story-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.1rem, 3vw, 2.7rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #2aa6b3;
  max-width: 520px;
}

/* Paragraph text */
.story-text {
  font-family: "Nunito", sans-serif;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #69443C;
  max-width: 500px;
  padding-right: 60px;
}

/* Image */
.story-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
.story1-image {
  width: 100%;
  height: 800px;                     /* required height */
  background-image: url("images/story.png"); /* image path */
  background-size: cover;            /* image cover */
  background-position: center;       /* center crop */
  background-repeat: no-repeat;
}
/* PARADISE THE BAHAMIAN WAY SECTION */
.bahamian-way-section {
  background-color: #ffffff;
  padding-top: 110px;
  padding-bottom: 110px;
}

/* Title */
.bahamian-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.2rem, 3vw, 2.8rem);
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #2aa6b3;
  max-width: 520px;
}

/* Text */
.bahamian-text {
  font-family: "Nunito", sans-serif;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #69443C;
  max-width: 520px;
  padding-right: 69px;
}

/* Image control */
.bahamian-image img {
  width: 100%;
  height: 580px;          /* REQUIRED HEIGHT */
  object-fit: cover;
}
.story2-image {
  width: 100%;
  height: 800px;                     /* required height */
  background-image: url("images/story2.png"); /* image path */
  background-size: cover;            /* image cover */
  background-position: center;       /* center crop */
  background-repeat: no-repeat;
}
/* GALLERY HERO */
.gallery-hero {
  height: 800px;                        /* hero height */
  width: 100%;
  position: relative;
  color: #ffffff;
  background-image: url("images/gallry.png");  /* apni image ka path */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Title */
.gallery-title {
  font-family: "Playfair Display", serif;
  font-size: 48px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* GALLERY PAGE TITLE */
.gallery-page-title {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  color: #2aa6b3;
  letter-spacing: 0.08em;
}

/* TABS */
.gallery-tabs .nav-link {
  font-family: "Nunito", sans-serif;
  font-size: 0.9rem;
  color: #69443C;
  background: transparent;
  border: none;
  padding: 0 14px;
  position: relative;
}

.gallery-tabs .nav-link.active {
  color: #c59c75;   /* gold underline */
  font-weight: 600;
}

.gallery-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background: #c59c75;
  margin: 0 auto;
}

/* IMAGE STYLING */
.gallery-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 0;
}
/* GALLERY TABS SECTION SPACING */
.gallery-tabs-section {
  padding-top: 110px;
  padding-bottom: 110px;
  background-color: #ffffff; /* optional - clean white background */
}