/* -------------------------
       Basic reset & fonts
       ------------------------- */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { 
      height: 100%;
      margin: 0;
        font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; -webkit-font-smoothing: antialiased; 
        -moz-osx-font-smoothing: grayscale; 
      }
    body {
      background: linear-gradient(180deg, #f7f9fc 0%, #eef5fb 100%); /* soft light background */
      color: #1f2937;
      padding: 18px;
    }

    /* -------------------------
       Preserve your navbar style & structure
       ------------------------- */
    .navbarme{
      background: rgba(255, 255, 255, 0.596); /* kept exactly from your code */
      box-shadow: 5px 3px 4px gray;           /* kept exactly from your code */
      border-radius: 100px;
      margin-top: 5px;
      padding-left: 30px;
      padding-right: 18px;
      padding-top: 6px;
      padding-bottom: 6px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
    }
    /* keep your nav markup but style elements inside for a nicer look */
    .navbarme .container-fluid {
       display:flex;
        align-items:center;
         justify-content:space-between;
          gap:12px;
           width:100%;
           }
    .navbarme .navbar-brand
     {
       text-decoration:none; 
      color:#111827;
       font-weight:700; 
       padding:8px 12px; 
       border-radius:12px;
        display:flex;
         align-items:center;
          gap:10px; 
        }
    .navbarme .navbar-brand:hover { 
      background: rgba(0,0,0,0.03);
     }
    .navbarme .navbar-nav { display:flex; 
      gap:6px;
       list-style:none; 
       padding-left:0;
        margin:0; 
        align-items:center; 
      }
    .navbarme .nav-link {
      text-decoration:none;
      color:#374151;
      padding:8px 12px;
      border-radius:10px;
      font-weight:600;
      transition: all 160ms ease;
    }
    .navbarme .nav-link:hover {
      background: rgba(59,130,246,0.08);
      color:#1e3a8a;
      transform: translateY(-2px);
    }
    .navbarme .nav-link.active {
      background: rgba(16,185,129,0.12);
      color: #065f46;
      box-shadow: 0 6px 18px rgba(16,185,129,0.06);
    }
    .navbarme .navbar-toggler{
      display:none; /* keep simple - small-screen toggle handled separately */
      background: transparent;
      border: none;
    }

    /* -------------------------
       Layout
       ------------------------- */
    .wrap {
       max-width:1100px;
        margin:18px auto;
       }
    .hero {
      display:grid;
      grid-template-columns: 1fr 360px;
      gap:22px;
      margin-top:22px;
    }

    /* left panel (form) */
    .panel {
      background: white;
      border-radius: 14px;
      padding:22px;
      box-shadow: 0 10px 30px rgba(2,6,23,0.06);
      border: 1px solid rgba(15,23,42,0.04);
      overflow: hidden;
    }
    .hero-title {
      display:flex;
      gap:14px;
      align-items:center;
      margin-bottom:12px;
    }
  

    .hero-title .logo {
      width:62px;
       height:62px; 
       border-radius:12px;
      display:grid; 
      place-items:center; 
      font-weight:800;
      background: linear-gradient(135deg, #0875e9, #06B6D4);
      color: #fff;
      box-shadow: 0 8px 30px rgba(6,22,37,0.08);
      font-size:22px;
    }
    .hero-title h1
     {
       font-size:20px;
        margin:0;
         color:#0f1724; 
        }
    .hero-title p 
    {
       margin:0;
        font-size:13px;
         color:#475569; 
        }

    /* form fields */
    form.contact-form
     {
       display:grid;
        gap:12px;
         margin-top:12px; 
        }
    .row 
    { 
      display:flex;
       gap:12px; 
      }
    .col 
    {
       flex:1;
       }
    .field {
      position:relative;
    }
    .field input, .field textarea {
      width:100%;
      padding:12px 14px;
      border-radius:10px;
      border:1px solid rgba(15,23,42,0.06);
      background: #fbfdff;
      font-size:14px;
      color:#0f1724;
      outline:none;
      transition: box-shadow .14s ease, transform .12s ease;
    }
    .field input:focus, .field textarea:focus {
      box-shadow: 0 8px 30px rgba(16,185,129,0.08);
      transform: translateY(-3px);
      border-color: rgba(16,185,129,0.28);
    }
    .floating-label {
      position:absolute;
      left:12px; top:10px;
      font-size:12px; color:#64748b;
      pointer-events:none;
      transition: all .12s ease;
      background: transparent;
      padding:0 6px;
    }
    .field input:not(:placeholder-shown) + .floating-label,
    .field textarea:not(:placeholder-shown) + .floating-label,
    .field input:focus + .floating-label,
    .field textarea:focus + .floating-label {
      transform: translateY(-28px) scale(.95);
      color:#06b6d4;
    }
    textarea 
    {
       min-height:120px; 
       resize:vertical;
        padding-top:18px;
       }

    .actions 
    { 
      display:flex;
       gap:10px;
        align-items:center; 
        margin-top:6px;
       }
    .btn {
      padding:10px 14px;
       border-radius:10px;
        border:0;
         cursor:pointer; 
         font-weight:700;
      background: linear-gradient(90deg,#10B981,#06B6D4);
       color:white;
      box-shadow: 0 10px 22px rgba(6,22,37,0.08);
    }
    .btn.ghost 
    { 
      background: transparent;
       border:1px solid rgba(15,23,42,0.06);
        color:#0f1724; 
        font-weight:600;
       }

    .hint 
    { font-size:13px;
       color:#374151; 
       margin-left:auto;
       }

    /* right column (cards) */
    .side 
    { 
      display:flex;
       flex-direction:column;
        gap:12px; 
      }
    .card {
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.96));
      border-radius:12px;
      padding:14px;
      border:1px solid rgba(15,23,42,0.04);
      box-shadow: 0 8px 20px rgba(2,6,23,0.04);
    }
    .map iframe {
  transition: transform 0.4s ease;
}
.map iframe:hover {
  transform: scale(1.02);
}

    .contact-item 
    { 
      display:flex; 
      gap:12px;
       align-items:center; 
      }
    .icon { width:44px; height:44px; border-radius:10px; display:grid; place-items:center; font-weight:800; color:#fff;
      background: linear-gradient(135deg,#10B981,#06B6D4); }
    .muted { color:#475569; font-size:13px; }

    .map {
      border-radius:10px; height:200px; display:grid; place-items:center;
      background: linear-gradient(135deg, rgba(6,182,212,0.06), rgba(16,185,129,0.04));
      border: 1px dashed rgba(15,23,42,0.04);
      color:#0f1724; font-size:13px;
    }

    /* footer */
    footer.text-center {
      margin-top:26px;
      padding:14px;
      border-radius:12px;
      color:white;
      background-color: #3D3C42;
      display:flex;
      gap:8px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    footer a { color:#10B981; text-decoration:none; margin: 0 10px; font-weight:700; }

    /* responsive */
    @media (max-width: 920px) {
      .hero { grid-template-columns: 1fr; }
      .navbarme { padding-left:14px; padding-right:14px; }
      .navbarme .navbar-nav { display:none; } /* preserve format but hide nav links on small screens */
      .navbarme .container-fluid { gap:8px; }
      .map { height:160px; }
    }

    /* small micro interactions */
    .pulse {
      animation: pulse 2.5s infinite;
    }
    @keyframes pulse {
      0% { transform: scale(1) }
      50% { transform: scale(1.02) }
      100% { transform: scale(1) }
    }