/* ==============================================================
                   Contact Us
=============================================================== */
:root{
      --ht-contact-dark: #0f1216;
      --ht-contact-dark-2:#151a20;
      --ht-contact-text:#e9eef5;
      --ht-contact-muted: rgba(233,238,245,.72);
      --ht-contact-border: rgba(255,255,255,.14);
      --ht-contact-card: rgba(255,255,255,.06);
      --ht-contact-accent:#7c5cff;
    }

   

    /* Hero */
    .contact-hero{
      position:relative;
      min-height: 240px;
      display:grid;
      place-items:center;
      color: var(--ht-contact-text);
      overflow:hidden;
      background:
        radial-gradient(900px 500px at 10% 10%, rgba(124,92,255,.30), transparent 60%),
        radial-gradient(900px 500px at 90% 20%, rgba(34,211,238,.20), transparent 60%),
        linear-gradient(180deg, rgba(15,18,22,.85), rgba(15,18,22,.92)),
        url("https://placehold.co/1600x600?text=HomeTriks+Contact+Hero") center/cover no-repeat;
    }
    .contact-hero::after{
      content:"";
      position:absolute; inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
      pointer-events:none;
    }
    .contact-hero .content{ position:relative; z-index:1; text-align:center; padding: 2.5rem 1rem; }
    .contact-hero h1{ font-weight: 800; letter-spacing:.2px; }
    .breadcrumb-lite{
      font-size:.9rem;
      color: rgba(233,238,245,.78);
    }
    .breadcrumb-lite a{ color: rgba(233,238,245,.9); text-decoration:none; }
    .breadcrumb-lite a:hover{ text-decoration:underline; }

    /* Contact form area */
    .section-kicker{
      font-size:.78rem;
      letter-spacing: .14em;
      text-transform:uppercase;
      color: rgba(17,24,39,.55);
    }
    .soft-card{
      border: 1px solid rgba(17,24,39,.10);
      border-radius: 1.25rem;
      overflow:hidden;
      background:#fff;
      box-shadow: 0 10px 30px rgba(17,24,39,.06);
    }
    .img-cover{
      width:100%;
      height:100%;
      object-fit:cover;
      min-height: 260px;
    }
    .form-control, .form-select{
      border-radius: .9rem;
      border-color: rgba(17,24,39,.12);
      padding: .85rem .95rem;
    }
    .form-control:focus, .form-select:focus{
      border-color: rgba(124,92,255,.45);
      box-shadow: 0 0 0 .2rem rgba(124,92,255,.12);
    }
    .btn-ht{
      border-radius: .9rem;
      padding: .85rem 1.1rem;
      font-weight: 700;
      background: var(--ht-contact-dark);
      border-color: var(--ht-contact-dark);
    }
    .btn-ht:hover{ background: #0b0f14; border-color:#0b0f14; }

    /* Get in touch */
    .touch-wrap{
      background: linear-gradient(180deg, #fff, #f7f7fb);
      border-top: 1px solid rgba(17,24,39,.06);
    }
    .touch-card{
      border-radius: 1.25rem;
      background: #fff;
      border: 1px solid rgba(17,24,39,.08);
      box-shadow: 0 10px 30px rgba(17,24,39,.05);
      padding: 1.25rem;
      height:100%;
    }
    .icon-badge{
      width: 46px; height:46px;
      border-radius: 14px;
      display:grid; place-items:center;
      background: rgba(124,92,255,.10);
      color: rgba(124,92,255,1);
    }
    .social-btn{
      width: 44px; height:44px;
      border-radius: 14px;
      display:grid; place-items:center;
      border: 1px solid rgba(17,24,39,.10);
      color: rgba(17,24,39,.85);
      text-decoration:none;
      background:#fff;
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    }
    .social-btn:hover{
      transform: translateY(-2px);
      border-color: rgba(124,92,255,.35);
      box-shadow: 0 10px 20px rgba(17,24,39,.08);
      color: rgba(124,92,255,1);
    }