@charset "utf-8";
/* CSS Document */


  

  .contact-wrapper {
    max-width: 1200px;
  }

  /* ---------- Left card: Support Hours ---------- */
  .support-card {
    background: #e7e7ea;
    border-radius: 16px;
    padding: 2.5rem 2rem;
  }

  .eyebrow {
    color: #dd3e23;
    font-weight: 700;
    letter-spacing: 1.5px;
    font-size: 0.8rem;
    text-transform: uppercase;
  }

  .support-title {
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 1.75rem;
  }

  .hours-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #c5c5c5;
    font-weight: 600;
  }

  .hours-row:last-of-type {
    border-bottom: none;
  }

  .hours-value {
    color: #dd3e23;
    font-weight: 700;
  }

  .social-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
  }

  .social-icons a {
    width: 44px;
    height: 44px;
    border: 1.5px solid #cfcfd4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    text-decoration: none;
    transition: all 0.2s ease;
    background: #fff;
  }

  .social-icons a:hover {
    background: #dd3e23;
    border-color: #dd3e23;
    color: #fff;
  }

  /* ---------- Right card: Send message form ---------- */
  .message-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    border: 1px solid #e7e7ea;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06);
    height: 100%;
  }

  .message-title {
    font-weight: 800;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    margin-bottom: 0.75rem;
  }

 
  .form-label {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
  }

  .input-icon-group {
    position: relative;
  }

  .input-icon-group .bi,
  .input-icon-group .icon-slot {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a8a92;
    z-index: 2;
    font-size: 1.05rem;
  }

  .input-icon-group textarea ~ .bi,
  textarea + .bi {
    top: 22px;
    transform: none;
  }

  .form-control,
  .form-select {
    border-radius: 10px;
    border: 1px solid #dcdce1;
    padding: 0.75rem 1rem 0.75rem 2.6rem;
    font-size: 0.95rem;
  }

  .form-control:focus,
  .form-select:focus {
    border-color: #dd3e23;
    box-shadow: 0 0 0 0.2rem rgba(239, 108, 34, 0.15);
  }

  textarea.form-control {
    padding-top: 0.9rem;
    resize: vertical;
  }

  .msg-textarea-icon {
    top: 1.1rem !important;
    transform: none !important;
  }

  .send-btn {
    background: #dd3e23;
    border: none;
    border-radius: 10px;
    padding: 0.85rem 1.5rem;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.2s ease;
  }

  .send-btn:hover {
    background: #d95c19;
    color: #fff;
  }

  .reply-note {
    text-align: center;
    font-size: 0.85rem;
    color: #6c6c72;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
  }

  .reply-note .bi-shield-check {
    color: #dd3e23;
  }

  @media (max-width: 767.98px) {
    .support-card,
    .message-card {
      padding: 1.75rem 1.25rem;
    }
  }

 
  .contact-card{
    background:#fff;
    border:1px solid #e9e9ef;
    border-radius:1rem;
    padding:1.25rem 1.5rem;
    display:flex;
    align-items:center;
    gap:1rem;
    text-decoration:none;
    color:inherit;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    height:100%;
  }

  .contact-card:hover{
    box-shadow: 0 8px 24px rgba(20,20,30,.08);
    border-color: #ee7830;
    transform: translateY(-2px);
    color:inherit;
  }

  .contact-card:focus-visible{
    outline: 3px solid #ee7830;
    outline-offset: 2px;
  }

  .icon-circle{
    flex: 0 0 56px;
    width:56px;
    height:56px;
    border-radius:50%;
    background: #fdeee3;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.4rem;
    color: #ee7830;
  }

  .contact-body{
    flex:1 1 auto;
    min-width:0;
  }

  .contact-title{
    font-weight:700;
    font-size:1.05rem;
    color: #1c1c28;
    margin-bottom:.15rem;
  }

  .contact-sub{
    font-size:.92rem;
    color: #6b7280;
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .chevron{
    flex:0 0 auto;
    color:#9ca3af;
    font-size:1.1rem;
  }

  @media (max-width:575.98px){
    .contact-card{ padding:1rem 1.1rem; gap:.85rem;}
    .icon-circle{ flex-basis:46px; width:46px; height:46px; font-size:1.15rem;}
    .contact-title{ font-size:.98rem;}
    .contact-sub{ font-size:.85rem;}
  }