:root{
      --navy:#0A192F;
      --orange:#F25F29;
      --grayblue:#7D8CA3;
      --sand:#F5F3EE;
      --white:#FFFFFF;
      --text:#0A192F;
      --ring:rgba(10,25,47,.16);
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--sand);color:var(--text);font:16px/1.6 'Source Sans 3',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial}
    img{max-width:100%;display:block}
    a{text-decoration:none;color:var(--orange);font-weight:600}
    a:hover{opacity:.9}
    .container{max-width:1000px;margin:0 auto;padding:24px}
    
    html {
  scroll-behavior: smooth;
}

    body {

/* Default cards - no rotate */
   .card {    
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    }

    /*Only for cards that rotate*/
      .rotate-card:hover{
        transform: rotateY(10deg) scale(1.02);
        box-shadow: 0 8px 20px rgba(0,0,0,0.5);
      }

      /* Title */
    .hero-top h1 {
      color: var(--white);
      margin: 0 0 4px;
      font-size: 1.4rem;
      line-height: 1.2;
    }
      .hero-top p {
        margin: 0;
        color: var(--sand);
      }

/* Button Row */
.quick-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px,1fr));
  gap: 10px;
}
@media (max-width: 720px) {
  .quick-links { grid-template-columns: repeat(2, 1fr); }
}
/* Refined TOP HERO */
.hero-top {
  background: var(--navy);
  color: var(--white);
  padding: 30px 0;          /* taller spacing now that it’s main content */
  text-align: center;       /* center everything */
}
.hero-top h1 {
  font-size: 2rem;          /* bigger headline */
  margin: 0 0 10px;
}
.hero-top p {
  font-size: 1.2rem;        /* larger subtitle */
  margin: 0;
  color: var(--sand);
}

  /* CARDS & LAYOUT */
    .card{background:var(--white);border:1px solid var(--ring);border-radius:14px;padding:22px;margin:16px 0;box-shadow:0 8px 24px rgba(10,25,47,.08)}
    .section{padding:0;margin:24px 0}
    .hero{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
    @media (max-width:860px){.hero{grid-template-columns:1fr}}
    h1,h2{margin:0 0 10px;color:var(--navy)}
    h1{font-family:Poppins,system-ui,sans-serif;font-size:2.1rem;line-height:1.1}
    h2{font-family:Poppins,system-ui,sans-serif;font-size:1.4rem}
    .lead{color:#1b2a46}
    .muted{color:var(--grayblue)}
    .badges{display:flex;gap:10px;flex-wrap:wrap;margin:.25rem 0 1rem}
    .badge{border:1px solid var(--ring);color:var(--grayblue);padding:4px 10px;border-radius:999px;font-size:.85rem;background:#fff}

    /* BUTTONS */
    .actions{display:flex;gap:12px;flex-wrap:wrap}
    .btn{display:inline-block;padding:10px 14px;border-radius:10px;border:1px solid var(--navy);font-weight:700}
    .btn-primary{background:var(--orange);border-color:var(--orange);color:var(--navy)}
    .btn-ghost{background:transparent;color:var(--navy)}

    /* CONTACT FORM */
    .form{display:grid;gap:10px;margin-top:8px}
    .form label{font-weight:600;color:#1b2a46}
    .form input,.form textarea{
      width:100%;padding:10px 12px;border:1px solid var(--ring);border-radius:10px;background:#fff;color:var(--text);
      font:inherit
    }
    .form textarea{min-height:140px;resize:vertical}
    .form button{cursor:pointer}

    /* FOOTER STRIP */
    .strip{background:var(--navy);color:var(--white);padding:16px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
    @media (max-width:640px){.strip{flex-direction:column;align-items:flex-start}}
    .footer{margin:36px 0 12px;color:var(--grayblue);font-size:.9rem;text-align:center}
    small.muted{display:block;margin-top:6px}

    /* ABOUT ME */
      .about-section {
        max-width: 1200px;
        margin: rem auto;
        margin-top: 1em;
        margin-bottom: 1em;
        padding: .75rem;
        background: none;
        border-radius: 12px;
        box-shadow: none;
        text-align: left;
        font-size: 1.25rem;
        line-height: 1.75;
      }
      .about-section t1 {
        color: var(--orange);
        font-weight: bold;
        font-size: 1.02em;
      }
      .about-section t2 {
        color: var(--navy);
        font-weight: bold;
        font-size: 1.02em;
      }
      .about-section h2 {
        font-size: 2rem;
        color: #0a1f44;
        margin-bottom: 10px;
        text-align: center;
        font-weight: bold;
      }
      
      /* Matrix Grid Cards */
      .project-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 24px;
        margin-top: 20px;
        text-align: center;
      }
      .card{
        background: var(--white);
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 12 px rgba(0,0,0,00.1);
        transition: transform 0.2s ease;
      }
      .card h3 {
        font-size: 1.25rem;
        font-weight: 800;
        margin-bottom: 2px;
      }
      card.hover {
        transform: translateY(-5px);
      }
      /* DELIVERY SECTION */
      .future-section {
        font-size: 1.15rem;

      }
      .future-section h2 {
        text-align: center;
        font-size: 1.5rem;
      }
}