/* ---------- Helpers ---------- */
    .section-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .btn {
      display: inline-block;
      padding: 12px 30px;
      border: 2px solid #fff;
      color: #fff;
      text-decoration: none;
      font-size: 1rem;
      margin: 10px 5px 0 0;
      transition: all 0.25s ease;
      border-radius: 6px;
      text-align: center;
    }
    .btn:hover { background: #fff; color: #000; }

    h1, h2, h3 { line-height: 1.15; }

    /* ---------- HERO SECTION ---------- */
    .hero {
      width: 100%;
      height: calc(100vh - 90px);
      background-color: #0a0b0a;
      background-repeat: no-repeat;
      background-position: 0px 0px !important;
      background-size: cover;
      background-position: center;
      overflow: hidden;
      margin-top: 90px;
      text-align: center;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.6);
    }
    .hero-content {
      position: relative;
      z-index: 2;
      width: 90%;
      margin: 0 auto;
    }
    .hero h1 {
      font-size: 2.6rem;
      color: #fff;

      margin-bottom: 18px;
    }
    .hero p {
      font-size: 1.05rem;
      margin-bottom: 20px !important;
      font-weight: 400;
      color: #fff;
    }

    /* ---------- ABOUT SECTION ---------- */
    .about-section {
      background: #111;
      padding: 80px 20px;
    }
    .about-section h1 { font-size: 2.4rem; margin-bottom: 18px; }
    .about-section p {
      font-size: 1.05rem;
      margin-bottom: 12px;
      max-width: 1000px;
    }

    /* ---------- FEATURED LISTINGS ---------- */
    .listings-section {
      background: #222;
      padding: 80px 20px;
      text-align: center;
    }
    .listings-section h2 { font-size: 2rem; margin-bottom: 28px; }
    /* grid layout for listings */
    .listings {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      align-items: start;
    }
    .listing-card {
      background: #333;
      border-radius: 12px;
      padding: 18px;
      text-align: left;
      box-shadow: 0 6px 18px rgba(0,0,0,0.45);
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .listing-card h3 { margin-bottom: 8px; font-size: 1.25rem; }
    .listing-card p { margin: 6px 0; font-size: 0.98rem; color: #e6e6e6; }
    .listing-card .btn { margin-top: 12px; display: inline-block; }

    /* ---------- PROJECT SECTION ---------- */
    .project-section {
      background: #000;
      padding: 60px 20px;
      color: #fff;
    }
    .project-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      margin-bottom: 26px;
      flex-wrap: wrap;
    }
    .project-header h2 { font-size: 1.9rem; font-family: Georgia, serif; color: #fff; }
    .contact-btn {
      background: #fff; color:#000; padding: 12px 24px; border-radius: 999px; text-decoration: none; font-weight: 700;
    }

    /* grid for project cards */
    .project-gallery {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }
    .project-card {
      background: #111;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 6px 18px rgba(0,0,0,0.6);
      transition: transform .25s ease;
    }
    .project-card img {
      display: block;
      width: 100%;
      height: 220px;
      object-fit: cover;
    }
    .project-card:hover { transform: translateY(-6px); }

    /* ---------- CONTACT SECTION ---------- */
    .contact-section {
      background: #c8943c;
      color: #fff;
      padding: 60px 20px;
      font-family: Arial, sans-serif;
    }
    .contact-header { margin-bottom: 18px; }
    .contact-header h2 { font-size: 2rem;color: #fff; }

    /* contact layout */
    .contact-info {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-bottom: 24px;
    }
    .contact-box h3 { font-size: 1.1rem; margin-bottom: 8px;color: #fff; }
    .contact-box p { font-size: 0.98rem; color: #fff; margin-bottom: 6px; }
    .contact-box p a{ font-size: 0.98rem; color: #fff; margin-bottom: 6px; }


    /* form */
    form {
      background: #fff; color:#000;
      padding: 20px; border-radius: 12px;
      max-width: 700px; margin: 0 auto 18px;
    }
    form input, form select, form textarea {
      width: 100%; padding: 10px; margin: 8px 0; border: 1px solid #ccc; border-radius: 8px; font-size: 1rem;
    }
    form button {
      background: #a63608; color: #fff; border: none; padding: 12px 20px; border-radius: 8px; cursor: pointer;
    }
    form button:hover { background: #872a06; }

    .map { margin-top: 18px; }
    .social-section { border-top: 1px solid rgba(255,255,255,0.25); padding-top: 16px; margin-top: 16px; }
    .social-icons { display:flex; gap:14px; margin-top:10px; }
    .social-icons a { color: #fff; font-size: 1.25rem; text-decoration:none; }
    .social-icons a img {
      width: 25px;
      filter: invert();
     }


    /* ---------- RESPONSIVE BREAKPOINTS ---------- */
    /* large tablets / small desktop */
    @media (max-width: 1024px) {
      .hero { min-height: 60vh; padding: 40px 20px; }
      .hero h1 { font-size: 2.2rem !important; }
      .listings { grid-template-columns: repeat(2, 1fr); }
      .project-gallery { grid-template-columns: repeat(2, 1fr); }
      .contact-info { grid-template-columns: 1fr 1fr; }
    }

    /* tablets / portrait */
    @media (max-width: 768px) {
      .hero {
          margin-top: 75px;
      }
      .hero-content button{
        margin-bottom: 10px;
      }
      .hero { min-height: 55vh; padding: 40px 16px; }
      .hero h1 { font-size: 1.2rem !important; }
      .hero p { font-size: 0.98rem !important; }

      .about-section { padding: 60px 16px; }
      .about-section h1 { font-size: 1.8rem; }

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

      .project-card img { height: 200px; }
      .contact-info { grid-template-columns: 1fr; }
      .section-inner { padding: 0 ; }
      .hero-content{
        width: 100%;
        margin-top: auto;
      }
    }

    /* mobile */
    @media (max-width: 480px) {
      .hero { min-height: 48vh; padding: 36px 14px; }
      .hero p { font-size: 0.95rem !important; }

      .btn { width: 100%; box-sizing: border-box; padding: 10px; margin: 8px 0; }
      .listing-card { padding: 14px; }
      .project-card img { height: 160px; }

      form { width: 100%; padding: 14px; border-radius: 10px; }
      .contact-header h2 { font-size: 1.3rem; text-align: center; }
      .social-icons { justify-content: center; }
    }

    /* small tweaks for very small screens */
    @media (max-width: 360px) {
      .hero p { font-size: 0.9rem !important; }
      .project-card img { height: 140px; }
    }