/* CSS Custom Properties */
:root {
  --brand-yellow: #f1e102;
  --brand-yellow-hover: #fbed2cc4;
  --brand-yellow-border: #cbbd00;
  --text-dark: #000;
  --text-light: #7f7f7f;
  --bg-light: #f7f7f7;
  --bg-white: #fff;
  --border-light: #eee;
  --border-gray: #dbdbdb;
  --backdrop-blur: #ffffffed;
}

/* Font Faces */
@font-face {font-family: 'JostMedium'; src: url('../fonts/Jost-Medium.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'PoppinsLight'; src: url('../fonts/Poppins-Light.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'PoppinsMedium'; src: url('../fonts/Poppins-Medium.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'PoppinsRegular'; src: url('../fonts/Poppins-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal;}
@font-face {font-family: 'PoppinsSemiBold'; src: url('../fonts/Poppins-SemiBold.ttf') format('truetype'); font-weight: normal; font-style: normal;}

/* Base Styles */
* {margin: 0; padding: 0; box-sizing: border-box;}
body {background-color: var(--bg-white); color: var(--text-dark); font-family: 'PoppinsRegular';}
.container {max-width: 1200px; margin: 0 auto; padding: 0 20px;}
a {color: var(--text-dark); text-decoration: none;}
a:hover {color: #a39100; text-decoration: underline;}
p {font-family: 'PoppinsLight';}
h2 {border-bottom: 4px solid var(--brand-yellow); padding-bottom: 10px; font-family: JostMedium; padding-top: 20px;}
section {margin-top: 40px;}

/* Button Styles */
.btn-primary {background-color: var(--brand-yellow); border-radius: 0; color: var(--text-dark); border: var(--brand-yellow);}
.btn-primary:hover {background-color: var(--brand-yellow-hover); border: 1px solid var(--brand-yellow-border); color: var(--text-dark); text-decoration: none;}

/* Responsive Display Classes */
.desktop {display: block;}
.mobile {display: none;}

/* Header Styles */
header .heading.mobile {display: none;}
header .container.heading.desktop {background-color: var(--bg-white); height: 100px;}
header h1 {margin: 0; padding: 0;}
header .logo img {width: 15dvw; height: 4dvw; border-right: 0.2dvw solid var(--text-light); margin-right: 10px; padding-right: 20px;}
header .logo span {font-size: 2dvw; top: 0.5dvw; position: relative;}
header .container {display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; height: 100%;}
header .container ul {list-style: none; margin: 0; padding: 0; font-family: 'PoppinsLight'; font-size: 14px; font-weight: bold;}
header .container li {display: inline-block; margin: 0 2px;}

.branding a {border:none;text-decoration: none;color:var(--text-dark)}
.branding a:hover {border:none;text-decoration: none;color:var(--text-dark)}

.form-control {border-radius: 0;}

/* Hero */
.hero {background: url(../img/hdr-desktop.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; min-height: 44dvw;}
.hero-mobile {
}

/* Navigation Styles */
nav ul.desktop a {padding: 10px;}
nav ul.desktop a.phone {background-color: var(--brand-yellow); border: 1px solid var(--brand-yellow-border); border-radius: 0;}
nav ul.desktop a.phone:hover {text-decoration: none; color: var(--text-dark); background-color: #f6e826;}
nav ul.mobile {width: 100%; position: absolute; height: 100dvh; background-color: var(--backdrop-blur); left: 0; top: 44px; padding-top: 20%; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: none;}
nav ul.mobile li {display: block;}
nav ul.mobile li a {padding: 10px 0; line-height: 3rem; font-size: 1.4rem; width: 100%; display: block; text-align: center; border-bottom: 1px solid var(--border-gray); margin: 10px 0;}

/* Section Styles */
#aboutus, #testimonials {background: url(../img/floorplan-bg.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;min-height:200px;}
#aboutus .container {display:flex;justify-content:space-between;align-items: center;}
#aboutus .text {max-width:500px;flex: 2;}
#aboutus img {margin-left: 2dvw;flex:1;width: 50%;}

/* Projects Section */
#projects {min-height: 200px; margin-top: 40px;}
#projects .container {display: block;}
#projects .text {width: 100%; flex: 1; text-align: left; margin-bottom: 30px;}
#projects .text h2 {border-bottom: 4px solid var(--brand-yellow); padding-bottom: 10px; font-family: JostMedium; font-size: 2rem; margin-bottom: 15px;}
#projects .text p {font-family: 'PoppinsLight'; font-size: 1rem;}
#projects .gallery-images {columns: 4;column-gap: 10px;}
#projects .gallery-images .box {width:100%;margin-bottom:10px}
#projects .gallery-images .box img {max-width:100%;border-radius: 0px;width: 300px;}

/* Accordion Styles */
.accordion {margin: 0 auto;}
.accordion-item {background: var(--bg-white); margin-bottom: 10px; border: 1px solid var(--border-light); overflow: hidden; transition: all 0.3s ease;}
.accordion-item:hover {border-color: var(--brand-yellow);}
.accordion-header {padding: 20px; background: #e8e8e8; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; transition: background-color 0.3s ease; color: var(--text-dark); border-bottom: 1px solid #858585;}
.accordion-header:hover {background-color: #f1e10238;}
.accordion-title {font-size: 1.2rem; font-family: 'JostMedium'; color: var(--text-dark);}
.accordion-icon {width: 20px; height: 20px; position: relative; transition: transform 0.3s ease;}
.accordion-icon::before, .accordion-icon::after {content: ''; position: absolute; background-color: var(--brand-yellow); transition: all 0.3s ease;}
.accordion-icon::before {width: 16px; height: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.accordion-icon::after {width: 2px; height: 16px; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.accordion-item.active .accordion-icon {transform: rotate(45deg);}
.accordion-content {max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease; background: white; color: var(--text-dark);}
.accordion-item.active .accordion-content {max-height: 800px; padding: 20px;}
.accordion-content p {font-family: 'PoppinsLight'; margin-bottom: 15px; line-height: 1.5;}

/* Thumbnail Grid */
/* .thumbnail-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 15px;}
.thumbnail-grid a {display: block; overflow: hidden; border: 2px solid var(--border-light); transition: border-color 0.3s ease;}
.thumbnail-grid a:hover {border-color: var(--brand-yellow); text-decoration: none;}
.thumbnail-grid img {width: 100%; height: 150px; object-fit: cover; display: block;} */
.gallery-image {width:100%}

/* Testimonials */
#testimonials h3 {text-align: center; border-bottom: 1px solid #e3dfa2;}
#testimonials .card {border: none; margin: 0 20px; font-size: 16px; background-color: var(--bg-light); padding: 20px; border: 1px solid var(--border-light);}
#customize-controls {display: none;}

/* Contact Section */
#contactus .container.contact {display: flex; justify-content: space-evenly; margin-top: 20px; background: url(../img/floorplan-bg.jpg) center/cover no-repeat; font-family: 'PoppinsLight';}
#contactus .contact-links {display: flex;flex-direction: column;gap: 10px;justify-content: center;font-size: 18px;background-color: #f1e102;padding: 40px;align-items: center;border-radius: 0;font-family: 'JostMedium';}
#contactus .contact-links .phone {font-size: 34px;}
.form-control {border:1px solid #000}
 input#email {margin-bottom:16px}
  

/* Miscellaneous */
.background {position: absolute; top: 0; left: 0; height: 100vh; width: 100%; background-color: white; z-index: 5;}
.swiper-pagination-bullet-active {background: var(--brand-yellow);}


.hero-mobile video {width: 100%; height: 40dvh; object-fit: cover; object-position: center; display: block;}


/* Media Queries */
@media (max-width: 996px) {
  .container, .container-md, .container-sm {min-width: 800px;}
}

@media (max-width: 800px) {
  .container, .container-md, .container-sm {min-width: 768px;}
  .accordion-header {padding: 15px;}
  .accordion-title {font-size: 1.1rem;}
  #contactus .contact-links {padding: 20px; font-size: 16px;}
  nav ul.desktop li a {padding: 5px; position: relative; top: 3px;}
}

@media (max-width: 768px) {
  /* Responsive Display */
  .desktop {display: none;}
  .mobile {display: block;}
  
  /* Layout */
  .container, .container-md, .container-sm {width: 100%; min-width: auto;}
  h1, h2 {padding-top: 60px;}
  
  /* Header Mobile */
  header .container.heading.desktop {display: none;}
  header .heading.mobile {display: flex; box-shadow: 0 0 5px 2px #000000a6; height: 40px; align-items: center; position: fixed; background-color: white; width: 100%; top: 0; z-index: 3; justify-content: center;}
  header .hero {display: none;}
  header .hero-mobile {position: static;}
  header .hero-mobile img {width: 100%; object-fit: cover; object-position: center; height: 40dvh;}
  header .heading-sub {right: 0; top: 40px; background-color: #F0E103; padding: 5px; box-shadow: 0 0 5px 2px #000000a6; font-family: 'JostMedium'; letter-spacing: 0.9px; position: fixed; z-index: 2; display: block;}
  header .logo img {height: 25px; width: 120px; padding-right: 2px; margin-right: 2px;}
  header .logo span {font-size: 14px;}

  #aboutus h2 {position: relative;padding: 0;}
  
  /* Menu Icon */
  .menu-icon-container {width: 35px;height: 44px;display: flex;align-items: center;cursor: pointer;margin-right: 0;position: absolute;left: 15px;top: -4px;padding: 0px;background-color: white;border: none;}
  .menu-icon {position: relative; width: 100%;}
  .menu-icon .line-1, .menu-icon .line-2, .menu-icon .line-3 {position: absolute; height: 3px; width: 100%; background-color: black;}
  .menu-icon .line-1 {top: -6px;}
  .menu-icon .line-2 {top: 10px;}
  .menu-icon .line-3 {top: 2px;}
  .menu-icon-container.close .line-1 {top: 1px; transform: rotate(45deg);}
  .menu-icon-container.close .line-2 {top: 1px; transform: rotate(-45deg);}
  .menu-icon-container.close .line-3 {top: 0; opacity: 0;}
  .menu-icon-container span {transition: 0.6s;}
  
  /* Navigation Mobile */
  nav ul.mobile.active {display: block; width: 100%; height: auto; padding-bottom: 100px; box-shadow: 0px 6px 5px 0px #00000052; border-bottom: 1px solid var(--text-dark); position: fixed; z-index: 1; top: 0; margin: 0; padding-left: 0;}
  
  /* Sections Mobile */
  #aboutus-mobile {display: block; text-align: left; padding: 20px; font-size: 30px; line-height: 1.2; font-family: unset; margin-top: 0;}
  #aboutus-mobile p {font-size: 16px;}
  #aboutus-mobile p a.btn {background-color: #F0E103; font-weight: bold; border-radius: 0;}
  #aboutus .container {flex-direction: column; min-width: 70%;}
  #aboutus img {display: none;}
  #contactus .container.contact {flex-direction: column; min-width: 70%;}
  #contactus .container {width: 100%;}
  #contactus.container {margin: 0; margin-top: 20px;}
  #aboutus {margin-top: 20px;}
  
  /* Projects Mobile */
  #projects .container {flex-direction: column; min-width: 70%;}
  .accordion-header {padding: 15px;}
  .accordion-title {font-size: 1rem;}
  .accordion-item.active .accordion-content {padding: 15px;}
  .thumbnail-grid {grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px;}
  .thumbnail-grid img {height: 100px;}

  #projects .gallery-images {columns: 3;column-gap: 10px;}

 .form-control {border:1px solid #000}
 input#email {margin-bottom:16px}

 .desktop {display: none}


  
}

@media (max-width: 560px) {
  header .container.heading.mobile {box-shadow: 0px 0 6px 1px #000000a6; position: relative; z-index: 2;}
  .accordion-header {padding: 12px;}
  .thumbnail-grid {grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));}
  .thumbnail-grid img {height: 80px;}
}