body{margin:0;font-family:'Inter',sans-serif;}

/* ===== HERO (FIXED IMAGE ALIGNMENT) ===== */

/*hero slider*/

.carousel-item {
      height: 400px; /* Adjust as needed */
      background-size: cover;
      background-position: center;
      position: relative;
    }

    .carousel-caption-left {
      position: absolute;
      top: 50%;
      left: 13%;
      transform: translateY(-50%);
      text-align: left;
      color: white;
      max-width: 50%;
    }

    .carousel-caption-left h1 {
      font-size: 3rem;
      font-weight: bold;
      text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
    }

    .carousel-caption-left p {
      font-size: 1.1rem;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
    max-width: 400px;
      text-shadow: 1px 1px 6px rgba(0,0,0,0.6);
    }

    @media (max-width: 768px) {
      .carousel-caption-left h1 {
        font-size: 2rem;
      }
      .carousel-caption-left p {
        font-size: 1rem;
      }
      .carousel-caption-left {
        max-width: 80%;
        left: 5%;
      }
    }

/* ===== CONTAINER ===== */
.header-wrap{
  max-width:1220px;
  margin:auto;
  position:relative;
  z-index: 1000;
}

/* LOGO */
.logo{position:absolute;top:28px;left:0;}
.logo img{width:150px;}

/* NAV */
.nav-glass{
  position:absolute;
  right:0;
  top:22px;
  display:flex;
  align-items:center;
  background:#ffffff;
  border-radius:7px;
}

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

.nav-link-custom{
  position:relative;
  text-decoration:none;
  color:#2b2822;
  font-weight:800;
  padding:15px 20px;
  text-transform:uppercase;
  font-size:.7em;
  font-family: "Work Sans", sans-serif;
}

.nav-link-custom::after{
  position:absolute;
  bottom:8px;
  left:0;
  width:0%;
  height:1.5px;
  background:#1a1f2b;
  transition:.35s;
}
.nav-link-custom:hover::after{width:100%;
}
.contact-btn:hover{
  color: #000000 !important;
}
.nav-link-custom:hover{
  color: #999736;
    text-decoration: none;
}
.contact-btn{
  padding:15px 18px;
  background:#999736;
  color:#e8e8e8;
  border-radius:0 7px 7px 0;
}

.menu-toggle{display:none;font-size:24px;cursor:pointer;padding:10px 15px;}
/* ===== SERVICES DROPDOWN (ADD-ON ONLY) ===== */

.dropdown-services{
    border: none;
    border-radius: 0px 0px 8px 8px;
    margin-top: 12px;
    max-width: 150px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.services-grid{
  display: grid;
  grid-template-columns: 1fr;
}

.dropdown-services .dropdown-item{
  font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: #2b2822;
    white-space: normal !important;
  line-height: 1.2;
  font-family: "Work Sans", sans-serif;
}

.menu-list{
  list-style-type: disc;
  color: #999736;
  font-family: "Work Sans", sans-serif;
}

.dropdown-services .dropdown-item:hover{
  background: transparent;
  color:#999736;
}

/* remove bootstrap arrow */
.dropdown-toggle::after{
  display:none;
}

/* show on hover like original site */
.dropdown:hover .dropdown-menu{
  display:block;
}

/* ===== HERO TEXT PERFECT SAFE AREA ===== */
.hero-text{
  position:absolute;
  left:0;
  right:0;
  top:130px;
  padding:0 40px;
  max-width:1100px;
  margin:auto;
  color:#fff;
}

.hero-text h1{
  font-family:"Fraunces", serif;
  font-size:3.4em;
  margin-bottom:22px;
  font-weight: 800;
}

.hero-text p{
  max-width:460px;
  font-size:12.5px;
  line-height:1.8;
  letter-spacing:.8px;
  text-transform:uppercase;
}

/* ===== MOBILE ===== */
@media(max-width:768px){
  .nav-items{display:none;}
  .menu-toggle{display:block;}

  .hero{
    /*height:72vh;*/
    background-position: 80% center;
  }

  .hero-text{
    top:200px;
    padding:0 20px;
  }

  .hero-text h1{font-size:42px;}
}
/* ===== HAMBURGER ===== */
.menu-toggle {
  display: none;
  font-size: 24px;
  cursor: pointer;
  background-color: #999736;
  color: #fff;
}

/* ===== MOBILE OVERLAY ===== */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: #9a9736;
  color: #fff;
  padding: 30px;

  opacity: 0;
  pointer-events: none;
  transform: translateY(-20px);
  transition: all 0.4s ease;

  z-index: 2000;
}

.mobile-menu.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* CLOSE BUTTON */
.close-btn {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 28px;
  cursor: pointer;
}

/* MENU GRID */
.menu-content {
  margin-top: 80px;
}

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

.menu-left a {
  display: block;
  margin-bottom: 20px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

.menu-right a {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  color: #fff;
  text-decoration: none;
}

/* DIVIDER */
.divider {
  height: 1px;
  background: rgba(255,255,255,0.4);
  margin: 20px 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .header-wrap{
    margin: 0px 10px 0px 10px;
  }
  .nav-items {
    display: none; /* hide desktop menu */
  }

  .menu-toggle {
    display: block;
  }
}

/*About us*/
/* ===== ABOUT PREMIUM SECTION ===== */
.about-premium{
  background:#fff;
  padding:50px 0;
}

/* Left column sticky for premium feel */
.about-sticky{
  position:sticky;
  top:120px;
}

.about-tag{
  font-size:12px;
  letter-spacing:3px;
  color:#999736;
  font-weight:600;
}

.about-title{
  margin-top:18px;
  font-size:40px;
  line-height:1.35;
  font-weight:300;
  color:#1a1f2b;
}

/* Right content */
.about-content p{
  font-size:17px;
  line-height:1.95;
  color:#444;
  margin-bottom:28px;
}

.divider-line{
  height:1px;
  background:#e9e9e9;
  margin:26px 0;
}

/* Responsive */
@media(max-width:992px){
  .about-sticky{
    position:relative;
    top:auto;
    margin-bottom:30px;
  }

  .about-title{
    font-size:30px;
  }
}

.bg-darken{
  background-color: #e9e7e7b8;
}
.bg-lighten{
  background-color: #ffffff;
}

/*Why choose Us Section*/
.why-fa {
  background: linear-gradient(to bottom, #f9fafc, #ffffff);
}

.fa-card {
  position: relative;
  background: #ffffff;
  padding: 60px 30px 35px;
  text-align: center;
  transition: 0.4s ease;
  border: 1px solid #eef1f4;
  box-shadow: 0 15px 40px rgb(0 0 0 / 18%);
  height: 100%;
}

.fa-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.12);
}

.fa-icon {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  transition: 0.4s;
}

.fa-card:hover .fa-icon {
  transform: translateX(-50%) rotate(12deg) scale(1.08);
  background: #000;
}

.fa-card h5 {
  margin-top: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}

.fa-card p {
  color: #6c757d;
  font-size: 15.5px;
  line-height: 1.7;
}

/*Footer Design*/
.ms-footer{
  background:#7a7f2b;
  padding:38px 0 34px;
  color:#fff;
  font-family: "Georgia", serif;
}

.ms-row{
  display:flex;
  align-items:center;
}

/* LEFT */
.ms-left{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.ms-logo{
  width:110px;
  margin-bottom:14px;
}

.ms-copy{
  font-size:11px;
  margin:0;
  opacity:0.95;
  font-family: "Work Sans", sans-serif;
  letter-spacing: 1px;
}

/* CENTER */
.ms-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.ms-title{
  font-weight:600;
  margin-bottom:12px;
  font-size:22px;
}

.ms-menu{
  display:flex;
  gap:5px;
  font-size:11px;
  padding-top: 25px;
}

.ms-menu a{
  color:#fff;
  text-decoration:none;
  opacity:0.95;
  font-family: "Work Sans", sans-serif;
}

.ms-menu a:hover{
  text-decoration:underline;
}
.ms-menu a:after {
    content: '|';
    padding: 0;
    margin: 0 5px;
}

/* RIGHT */
.ms-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
}

.ms-btn{
  background:#111;
  color:#fff;
  padding:10px 20px;
  font-size:13px;
  font-weight:600;
  border-radius:4px;
  text-decoration:none;
  margin-bottom:14px;
  display:inline-block;
}

.ms-btn:hover{
  background:#000;
}

.ms-icons{
  display:flex;
  gap:12px;
}

.ms-icons a{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#1e1e1e;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:15px;
}

/* MOBILE */
@media(max-width:991px){
  .ms-row{
    flex-direction:column;
    text-align:center;
    gap:30px;
  }
  .ms-right{
    align-items:center;
  }
}

/*Our Process Section*/
.process-section {
  position: relative;
  min-height: 100vh;
  background: url('../img/architecture/7.webp') center/cover no-repeat;
}

.process-section .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}

.process-card {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.1);
}

.process-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, 0.15);
}

.process-card h5 {
  font-weight: 600;
}

.process-card p {
  font-size: 0.95rem;
  color: #ddd;
}
.badge{
  font-size: 14px;
  color: #000000;
  background-color: #7a7f2b;
}

/*FAQ Section*/

.faq-bg{

      background-color: #b79f58;
      font-family: 'Georgia', serif;
      color: #1e2a38;
}
    .faq-section {
      margin-top: 70px;
    }

    .faq-title {
      font-size: 2.5rem;
      font-weight: 600;
      border-bottom: 3px solid #f5f5f5;
      display: inline-block;
      padding-bottom: 5px;
      margin-bottom: 30px;
    }

    .accordion-item {
      background: transparent;
      border: none;
      border-bottom: 1px solid rgba(255,255,255,0.5);
    }

    .accordion-button {
      background: transparent;
      font-size: 24px;
      padding: 20px 0;
      color: #1e2a38;
      box-shadow: none;
    }

    .accordion-button::after {
      filter: invert(20%);
      display: none !important;
    }

    .accordion-button:not(.collapsed) {
      background: transparent;
      color: #1e2a38;
      box-shadow: none;
    }

    .accordion-body {
      padding: 10px 0 20px 0;
      font-size: 0.9em;
      font-weight: 500;
      color: #f8f8f8;
      line-height: 1.6;
    }

    .faq-dot {
      margin-right: 10px;
      font-size: 1.5rem;
      vertical-align: middle;
      color: #ffffff;
    }

 /* Recent Project Section*/
 /* Scroll carousel */
.card-track{
    display:flex;
    gap:24px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding-bottom:30px;
}
.card-track::-webkit-scrollbar{
    display:none;
}

/* Card */
.service-card{
    min-width:100%;
    scroll-snap-align:start;
    border:none;
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
    transition:.4s;
}
.service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 50px rgba(0,0,0,0.2);
}
.service-card img{
    height:320px;
    object-fit:cover;
}

/* Tablet */
@media(min-width:768px){
    .service-card{ min-width:48%; }
}

/* Desktop */
@media(min-width:992px){
    .service-card{ min-width:31.5%; }
}

/* Buttons */
.scroll-btn{
    width:55px;
    height:55px;
    border:none;
    background:#000;
    color:#fff;
    font-size:22px;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:10;
    transition:.3s;
}
.scroll-btn:hover{ background:#6c757d; }

.btn-prev{ left:-20px; }
.btn-next{ right:-20px; }

/*gallery Section*/

    /* Masonry layout using CSS columns */
    .masonry-gallery {
      column-count: 3;
      column-gap: 1rem;
    }

    @media (max-width: 992px) {
      .masonry-gallery {
        column-count: 2;
      }
    }

    @media (max-width: 576px) {
      .masonry-gallery {
        column-count: 1;
      }
    }

    .masonry-gallery .card {
      display: inline-block;
      margin-bottom: 1rem;
      border: none;
      border-radius: 0;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      transition: transform 0.3s, box-shadow 0.3s;
      cursor: pointer;
    }

    .masonry-gallery .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    }

    .masonry-gallery .card img {
      width: 100%;
      height: auto;
      display: block;
    }

/* Bottom title bar (default state) */
.project-card{
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  cursor: pointer;
  border: none;
}

/* Main image */
.img-default{
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
}

/* Bottom title */
.title-bar{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #1f1f1f;
  color: #fff;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 15px;
  z-index: 2;
  transition: opacity .4s ease;
}

/* Hover layer */
.hover-layer{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
}

.project-card:hover .hover-layer{
  opacity: 1;
}

.project-card:hover .title-bar{
  opacity: 0;
}

/* Hover image */
.img-hover{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Info section */
.info{
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #1f1f1f;
  color: #fff;
  padding: 20px;
}

/* Meta layout */
.meta small{
  font-size: 11px;
  color: #aaa;
}

.meta p{
  margin: 0;
  font-size: 14px;
}
/* Title */
.project-title{
  margin-bottom: 15px;
}

/* Row layout (like your image) */
.info-row{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
}

/* Left label */
.label{
  width: 40%;
  font-size: 12px;
}

/* Right value */
.value{
  width: 60%;
  font-size: 11px;
  text-align: left;
}

/* Divider line */
.divider{
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.3);
  margin: 15px 0;
}
.service-card,
.project-card {
  height: 320px;   /* same as image height */
}
.img-default,
.img-hover {
  display: block;   /* removes bottom whitespace */
}
.img-default,
.img-hover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hover-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.card {
  padding: 0;
  border: none;
  border-radius: 0px;
}
.project-card {
  overflow: hidden;
  border-radius: 0px;
}

/*CTA Section*/
.cta-section {
  background: linear-gradient(135deg, #111827d6, #1f2937b8);
}
ul{
  list-style-type: none;
}
.cta_list{
  padding-bottom: 10px;
}
.cta-section .icon {
  color: #7a7f2b;
}
.btn-arrange{
  background-color:#7a7f2b;
  color: #ffffff;
}
.btn-arrange:hover{
  background-color:#ffffff;
  color: #000000;
}
.cta-section .btn {
  border-radius: 50px;
  font-weight: 600;
}

.cta-section a:hover {
  opacity: 0.9;
}

    .logo-bar {
      background: #111827;
    }

    .logo-bar img {
      opacity: 0.8;
      transition: 0.3s;
    }

    .logo-bar img:hover {
      opacity: 1;
    }

   /* Review Section Design*/
   .review-card {
  overflow: hidden;
  background: #fff;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
  transition: 0.3s;
}

.review-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-card:hover {
  transform: translateY(-5px);
}

/*Bottom Slider Card Design*/
.h-card {
  background: rgb(17 24 39);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.h-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.text-white{
  color: #ffffff;
}
.text-gray{
  color: #bdbdba;
}
.icon-box {
  min-width: 55px;
  height: 55px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  background: linear-gradient(135deg, #a9b12e, #7a7f2b);
  transition: all 0.3s ease;
}

.h-card:hover .icon-box {
  transform: scale(1.1);
}

/*Design And Build*/
.section-padding {
  padding: 80px 0;
}

/* Content */
.service-content h2 {
  font-weight: 700;
}

.icon-list li {
  margin-bottom: 10px;
}
.icon-list i {
  color: #212529;
  margin-right: 10px;
}

/* Image Grid */
.image-grid img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: 0.3s;
}

.image-grid img:hover {
  transform: scale(1.05);
}

/* Expand gallery */
.more-images {
  max-height: 0;
  overflow: hidden;
  transition: 0.6s ease;
}

.more-images.show {
  max-height: 6000px;
  margin-top: 30px;
}

/* Button */
.toggle-btn {
  border-radius: 50px;
  padding: 10px 25px;
}

.toggle-btn.active i {
  transform: rotate(180deg);
}