/* 6) HERO SECTION */
#hero {
  background: var(--black);
  padding: 5rem 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 900px;
  display: flex;               /* make the section a flex container */
  flex-direction: column;      /* stack its single child (.container) */
  justify-content: center;     /* vertically center the container */
}
#hero .hero-title {
  font-size: 3rem;
  line-height: 1.2;
  max-width: 42rem;
  margin: 0 auto 2rem;
}
#hero .hero-ctas {
  display: inline-flex;
  gap: 1rem;
  margin-bottom: 3rem;
    align-self: center; 
}

/* Hero marquee */
/* Hero: fixed image size and container height */
.hero-carousel {
  height: 400px;            /* matches your 300px height */
  overflow: hidden;
  margin-top: 2rem;

    display: flex;
  align-items: center;
}
.hero-carousel .carousel-track {
  display: flex;
  will-change: transform;
}
.hero-carousel .carousel-item {
  flex: 0 0 auto;
  margin: 0 1rem;
  filter: grayscale(100%);
  transform: scale(0.9);
  transition: transform var(--transition), filter var(--transition);
}
.hero-carousel .carousel-item.active {
  filter: none;
  transform: scale(1.1);
}

.hero-carousel .carousel-item img {
  width: 500px;             /* exact width */
  height: 300px;            /* exact height */
  object-fit: cover;
  display: block;
}

/* ---------- Hero Responsive ---------- */

/* Tablet & small desktops */
@media (max-width: 1024px) {
  #hero {
    padding: 4rem 1rem;
  }
  #hero .hero-title {
    font-size: 2.5rem;
    max-width: 90%;
  }
  #hero .hero-ctas {
    margin-bottom: 2.5rem;
  }
  .hero-carousel {
    height: 300px;
  }
  .hero-carousel .carousel-item img {
    width: 400px;
    height: 240px;
  }
}

/* Tablets & landscape phones */
@media (max-width: 768px) {
  #hero {
    padding: 3rem 1rem;
  }
  #hero .hero-title {
    font-size: 2.4rem;
    max-width: 95%;
  }
  /* Stack CTAs vertically */
  #hero .hero-ctas {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
    width: 80%;         /* full container width */
    align-self: center;  /* center container in the flex-column #hero */
  }
  #hero .hero-ctas .btn {
    width: 100%;         /* full width of its parent */
    max-width: none;
    padding: 0.5rem 1.5rem;
    justify-content: center;
  }
  .hero-carousel {
    height: 250px;
  }
  .hero-carousel .carousel-item {
    margin: 0 0.75rem;
  }
  .hero-carousel .carousel-item img {
    width: 300px;
    height: 180px;
  }
}

/* Small phones */
@media (max-width: 480px) {
  #hero {
    padding: 2rem 0.5rem;
    min-height: 700px;
  }
  #hero .hero-title {
    font-size: 2rem;
    line-height: 1.3;
    max-width: 100%;
  }
  /* Full-width CTAs on mobile */
  #hero .hero-ctas {
    /* already 100% width and column; no side margins */
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }
  #hero .hero-ctas .btn {
    width: 100%;
    max-width: none;
    padding: 0.4rem 1rem;
    justify-content: center;
  }
  .hero-carousel {
    height: 200px;
  }
  .hero-carousel .carousel-item {
    margin: 0 0.5rem;
  }
  .hero-carousel .carousel-item img {
    width: 90vw;    /* almost full screen */
    height: 160px;
  }
}




























/* 7) RECENT PROJECTS */

/* ---------- Recent Projects Section Background + Overlay ---------- */
#recent-projects {
  position: relative;
  padding: 5rem 1rem;          /* keep your existing padding */
  background: url('/images/Apartment-Interior-1.jpg') center/cover no-repeat;
  min-height: 800px;  
  display: flex;               /* make the section a flex container */
  flex-direction: column;      /* stack its single child (.container) */
  justify-content: center;     /* vertically center the container */
}

#recent-projects::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);   /* 40% black overlay */
  z-index: 0;
}

/* Ensure inner content sits above the overlay */
#recent-projects .container {
  position: relative;
  z-index: 1;
  margin: 0 130px;   /* inset 130px on each side */

}
#recent-projects h2 {
  color: var(--white);
  font-size: 2rem;
  font-weight: bold;
}
#recent-projects .btn-outline {
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
}
#recent-projects .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

#recent-projects .carousel-wrapper {
  margin-top: 7rem;     /* optional—fine-tune extra spacing */
}

/* Title */
#recent-projects .section-header h2 {
  font-size: 2rem;
  color: var(--white);
  margin: 0;
}

/* “All projects” button/link */
#recent-projects .section-header .btn-outline {
  margin: 0;
  padding: 0.8rem 2rem;
  font-size: 0.9rem;
}
#recent-projects .section-header .btn-outline:hover {
  background: var(--white);
  color: var(--black);
}

/* ----------------------------
   Recent Projects Carousel CSS
   ---------------------------- */

/* 7) RECENT PROJECTS CAROUSEL */

/* 1) Wrapper: flex-center window + arrows */
.carousel-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;  /* only needed if you have absolute children elsewhere */
  margin-top: 2rem;
}

/* 2) Window: fixed to 3 cards + 2 gaps */
.carousel-window {
  flex: 0 0 auto;
  overflow: hidden;
  max-width: calc(3 * 18rem + 2 * 1.5rem);
}

/* 3) Track: horizontal flex row, JS still handles centering */
#recent-projects .carousel-track {
  display: flex !important;
  align-items: center;
  gap: 1.5rem;
  transition: transform 0.5s ease;
  will-change: transform;
}

/* 4) Nav buttons: now relative flex items, not absolute */
.carousel-nav {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;

  /* make sure the button itself won’t grow or shrink */
  flex: 0 0 auto;
}

.carousel-nav img {
  display: block;

  /* fixed pixel size */
  width: 40px;
  height: 40px;

  /* prevent the image from flexing */
  flex-shrink: 0;
}

/* 5) Cards: base styling with glass effect */
.carousel-card {
  flex: 0 0 auto;
  width: 18rem;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-radius: 0.5rem;
  overflow: hidden;
  transform: scale(0.8);
  transition: transform var(--transition);
  padding-bottom: 20px;
}
.carousel-card.active {
  transform: scale(1);
}

/* 6) Card content */
.carousel-card img {
  width: 100%;
  height: 10rem;
  object-fit: cover;
}
.carousel-card h3 {
  color: var(--white);
  font-size: 1.125rem;
  margin: 1rem;
}
.carousel-card p {
  color: #a2a2a2;
  font-size: 0.875rem;
  margin: 0 1rem 1rem;
}
.carousel-card a {
  color: white;
  font-size: 1rem;
  font-weight: 100;
  margin: 0 1rem 1rem;
}
/* ----------------------------
   Recent Projects Section
   ---------------------------- */

/* Base styles already defined above... */

/* ===== Responsive Overrides ===== */

/* Tablet & Small Desktops (≤1024px) */
@media (max-width: 1024px) {
  /* Container inset */
  #recent-projects .container {
    margin: 0 60px;     /* reduce from 130px */
  }

  /* Window & nav spacing */
  .carousel-window {
    max-width: calc(3 * 16rem + 2 * 1rem);  /* 3×16rem + 2×1rem gaps */
  }
  .carousel-nav {
    display: none;
  }

  /* Card size */
  .carousel-card {
    width: 16rem;
  }
  .carousel-card img {
    height: 8rem;
  }
}

/* Tablets & Landscape Phones (≤768px) */
@media (max-width: 768px) {
  /* Container inset */
  #recent-projects .container {
    margin: 0 30px;
  }

  /* Stack arrows under window */
  .carousel-wrapper {
    flex-direction: column;
    gap: 1rem;
  }
  .carousel-nav {
    order: 2;
    margin: 0.5rem 0;
  }

  /* Window fills full width */
  .carousel-window {
    max-width: 100%;
  }

  /* Card size */
  .carousel-card {
    width: 14rem;
  }
  .carousel-card img {
    height: 6rem;
  }

  /* Nav buttons */
  .carousel-nav {
    display: none;
  }
}

/* Small Phones (≤480px) */
@media (max-width: 480px) {

   body,
  html {
    overflow-x: hidden;
  }

  /* if you only want to lock the Recent section, you can alternatively: */
  #recent-projects {
    overflow-x: hidden;
  }
  /* Container inset */
  #recent-projects .container {
    margin: 0 15px;
  }
  

    #recent-projects .section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* or center if you’d rather center them */
    gap: 1.5rem;             /* space between title & button */
  }

  /* Full-width window */
  .carousel-window {
    max-width: 100%;
    position: relative; /* establish positioning context */
  }

  /* Card size nearly full width */
  .carousel-card {
    width: 80vw;
    margin: 0 0.5rem;
    position: relative; /* so we can absolutely position inside */
  }
  .carousel-card img {
    height: auto;
  }

  /* Bring nav buttons back on small */
  .carousel-nav {
    display: block;
    position: absolute;
    top: 40%;
    transform: translateY(-40%);
    background: rgba(0,0,0,0.5);
    border: none;
    padding: 0.3rem;
    border-radius: 50%;
    z-index: 10;
    flex: 0 0 auto;
  }
  /* fixed icon sizes */
  .carousel-nav img {
    width: 32px;
    height: 32px;
  }

  /* Position them inside the visible card */
  .carousel-nav.left {
    left: calc(10vw - 12px);   /* align just inside the left edge of the 80vw card */
  }
  .carousel-nav.right {
    right: calc(10vw - 12px);  /* align just inside the right edge */
  }
}


































/* ===== Latest Project — Centered Two-Column ===== */
#latest-project {
  background: #1C1C1C;
  color: white;
  padding: 5rem 1rem;
  display: flex;
  justify-content: center;    /* center the inner container */
  align-items: center;        /* vertically center if taller than content */
  min-height: 800px;
}

/* Constrain & center the container */
#latest-project .container {
  display: flex;
  align-items: center;
  gap: 2rem;

  /* always keep 130px gutters, but cap overall width */
  width: 100%;
  max-width: 1200px;         /* prevents the two columns from drifting too far apart */
  padding: 0 130px;          /* 130px side padding */
  margin: 0 auto;            /* horizontal centering */
}

/* Text column: narrow, capped width with vertical gaps */
#latest-project .container > div:first-child {
  flex: 0 1 40rem;           /* don’t grow past 40rem */
  display: flex;
  flex-direction: column;
  gap: 3rem;                 /* space between heading, subhead, p & button */
}

/* Headings & paragraph sizing */
#latest-project .container > div:first-child h2,
#latest-project .container > div:first-child h3,
#latest-project .container > div:first-child p {
  max-width: 30rem;          /* cap each for readability */
  margin: 0;                 /* gap handles vertical spacing */
}
#latest-project .container > div:first-child h2 {
  font-size: 2.5rem;
  font-weight: 700;
}
#latest-project .container > div:first-child h3 {
  font-size: 2rem;
  font-weight: 200;
}
#latest-project .container > div:first-child p {
  font-weight: 100;
}

/* Button aligned neatly under the paragraph */
#latest-project .container > div:first-child .btn {
  align-self: flex-start;
  max-width: 12rem;
  padding: 0.75rem 1.5rem;
}

/* Image column: fills remaining space but never overflows */
#latest-project .container > div:last-child {
  flex: 1 1 0;               /* grow to fill */
}
#latest-project .container > div:last-child img {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: contain;
  border-radius: 0.5rem;
  
  /* prevent it from shrinking too far */
  min-width: 250px;
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  #latest-project {
    padding: 4rem 1rem;
    min-height: auto;
  }
  #latest-project .container {
    flex-direction: column;
    max-width: 100%;
    gap: 5rem;
    padding: 0 2rem;        /* adjust padding on tablet */
  }
  #latest-project .container > div:first-child,
  #latest-project .container > div:last-child {
    flex: 0 0 100%;
    max-width: 100%;
  }
}



























/* 9) SERVICES */
/* Services Section */
#services {
  background: #000;
  color: #fff;
  padding: 5rem 1rem;
  display: flex;
  justify-content: center;    /* center the inner container */
  align-items: center;        /* vertically center if taller than content */
    min-height: 800px;
}

#services h2{
  font-size: 2.5rem;
  margin-bottom: 50px;
}

/* Center & cap the container */
#services .container {
  /* 130px gutters each side, but never wider than 1200px total */
  width: 100%;
  max-width: min(calc(100% - 260px), 1200px);
  margin: 0 auto;
  padding: 0 1rem;
}

/* Two-column layout, vertically centered */
.services-wrapper {
  display: flex;
  align-items: center;
  gap: 6rem;              /* tighten gap a bit */
}

/* Tabs column */
.service-tabs {
  flex: 0 0 30rem;        /* slightly narrower */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Tab buttons */
.service-tab {
  padding: 1.25rem 2rem;
  border: 2px solid #444;
  border-radius: 0.5rem;
  background: transparent;
  color: #ccc;
  font-size: 1.125rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.service-tab:hover {
  background: rgba(255,255,255,0.05);
}
.service-tab.active {
  background: #fff;
  color: #000;
  border-color: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Content column */
.service-content {
  flex: 1 1 0;
  /* cap how wide this column can grow as well */
  max-width: 60%;        
}

/* Panels */
.service-panel {
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 3rem;
  max-width: 36rem;
  margin: 0 auto;
}
.service-panel.hidden {
  display: none;
}
.service-panel h3 {
  font-size: 2.25rem;
  font-weight: 100;
  margin: 0;
}
.service-panel p {
  color: #ccc;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}
.service-panel .btn-outline {
  padding: 0.75rem 2rem;
  font-size: 1rem;
  width: 200px;
  text-align: center;
}

/* Responsive: stack on tablets & phones */
@media (max-width: 1200px) {
  .service-tabs {
  flex-basis: auto; /* instead of 30rem */
  margin-bottom: 40px;
}
  .services-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .service-tabs {
    width: 100%;
  }
  .service-content {
    width: 100%;
    max-width: none;
  }
}
/* Mid-size Phones & Small Tablets (≤728px) */
@media (max-width: 728px) {
  /* Services Section: reduce padding & let height auto-size */
  #services {
    padding: 3rem 1rem;
    min-height: auto;
  }

  /* Container fills the viewport */
  #services .container {
    max-width: 80%;
    margin: 0 auto;
    padding: 0 1rem;
  }

  /* Stack tabs/content */
  .services-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }

  /* Tabs take full width */
  .service-tabs {
    flex-basis: auto;
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .service-tab {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1.125rem;
  }

  /* Content column full width */
  .service-content {
    width: 100%;
    max-width: none;
  }

  /* Panel max-width lifted */
  .service-panel {
    max-width: 100%;
    margin: 0 auto;
  }
  .service-panel h3 {
    font-size: 2rem;
  }
  .service-panel p {
    font-size: 1.05rem;
    line-height: 1.6;
  }
  .service-panel .btn-outline {
    width: auto;
    padding: 0.75rem 1.5rem;
  }
}
/* Small Phones (≤480px): make Services full-width and readable */
@media (max-width: 480px) {
  /* shrink vertical padding */
  #services {
    padding: 2rem 1rem;
    min-height: auto;       /* let it size to its content */
  }

  /* allow the container to fill the viewport */
  #services .container {
    padding: 0;
    max-width: 90%;
    margin: 0;
  }

  /* stack tabs and content, full width */
  .services-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: stretch;
  }

  .service-tabs,
  .service-content {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  /* make each tab fill the width */
  .service-tab {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
  }

  /* panel text a bit bigger/taller for readability */
  .service-panel {
    max-width: 100%;
    gap: 2rem;
  }
  .service-panel h3 {
    font-size: 1.75rem;
  }
  .service-panel p {
    font-size: 1rem;
    line-height: 1.5;
  }
  .service-panel .btn-outline {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
  }
}