/* =========================
   BASE
========================= */

.qc-contact,
.qc-contact *{
  box-sizing:border-box;
  font-family:"Montserrat-Light","Montserrat",Arial,sans-serif;
}

.qc-contact{
  width:100%;
  padding:58px 0 64px;
  background:#f6f6f8;
  color:#151515;
}

.qc-contact__in{
  width:calc(100% - 36px);
  max-width:1440px;
  margin:0 auto;
}


/* =========================
   HEADER
========================= */

.qc-contact__head{
  max-width:900px;
  margin:0 0 40px;
  text-align:left;
}

.qc-contact__eyebrow{
  display:block;
  margin-bottom:10px;

  font-size:12px;
  line-height:1.2;
  font-weight:700;

  letter-spacing:1.5px;

  color:#0868e8;
}

.qc-contact__head h2{
  margin:0 0 16px;

  font-size:40px;
  line-height:1.2;
  font-weight:300;

  color:#111;
}

.qc-contact__head p{
  max-width:760px;
  margin:0;

  font-size:15px;
  line-height:1.7;
  font-weight:300;

  color:#666a72;
}


/* =========================
   MAIN LAYOUT
========================= */

.qc-contact__main{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(520px,.9fr);

  gap:46px;

  align-items:center;
}


/* =========================
   CONTACT INFO
========================= */

.qc-contact__info{
  display:grid;
  gap:12px;
}

.qc-contact__row{
  min-height:74px;

  padding:14px 16px;

  display:grid;
  grid-template-columns:46px minmax(0,1fr);

  gap:16px;

  align-items:center;

  background:#fff;

  border:1px solid #e5e6e9;
  border-radius:10px;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.qc-contact__row:hover{
  border-color:rgba(8,104,232,.25);

  box-shadow:
    0 7px 22px
    rgba(0,0,0,.035);
}


/* =========================
   ICON
========================= */

.qc-contact__icon{
  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#edf5ff;
}

.qc-contact__icon svg{
  width:21px;
  height:21px;

  fill:#0868e8;
}


/* =========================
   CONTACT TEXT
========================= */

.qc-contact__text{
  min-width:0;
}

.qc-contact__text strong{
  display:block;

  margin-bottom:5px;

  font-size:15px;
  line-height:1.35;
  font-weight:700;

  color:#171719;
}

.qc-contact__text p{
  margin:0;

  font-size:15px;
  line-height:1.6;
  font-weight:300;

  color:#565a61;
}

.qc-contact__text a{
  font-size:15px;
  line-height:1.5;
  font-weight:300;

  color:#0868e8;

  text-decoration:none;
}

.qc-contact__text a:hover{
  text-decoration:underline;
}


/* =========================
   WHATSAPP PHONES
========================= */

.qc-contact__phones{
  display:flex;
  flex-wrap:wrap;
  align-items:center;

  gap:9px;
}

.qc-contact__phones span{
  color:#999;
}


/* =========================
   QR GRID
========================= */

.qc-contact__qr-grid{
  display:grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:14px;
}


/* =========================
   QR CARD
========================= */

.qc-contact__qr-card{
  padding:18px 14px 16px;

  text-align:center;

  background:#fff;

  border:1px solid #dfe4eb;
  border-radius:12px;

  box-shadow:
    0 7px 22px
    rgba(0,0,0,.035);

  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.qc-contact__qr-card:hover{
  transform:translateY(-2px);

  border-color:
    rgba(8,104,232,.25);

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.055);
}


/* =========================
   QR IMAGE
========================= */

.qc-contact__qr-image{
  width:100%;

  aspect-ratio:1/1;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  margin-bottom:12px;

  background:#fff;
}

.qc-contact__qr-image img{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;
}


/* =========================
   QR TEXT
========================= */

.qc-contact__qr-card strong{
  display:block;

  margin-bottom:4px;

  font-size:16px;
  line-height:1.35;
  font-weight:700;

  color:#0759c8;
}

.qc-contact__qr-card span{
  display:block;

  font-size:13px;
  line-height:1.4;
  font-weight:300;

  color:#777b83;
}


/* =========================
   TABLET
========================= */

@media(max-width:1050px){

  .qc-contact__main{
    grid-template-columns:1fr;
    gap:30px;
  }

}


/* =========================
   MOBILE
========================= */

@media(max-width:600px){

  .qc-contact{
    padding:38px 0 42px;
  }

  .qc-contact__in{
    width:calc(100% - 28px);
  }


  /* HEADER */

  .qc-contact__head{
    margin-bottom:28px;
  }

  .qc-contact__eyebrow{
    font-size:10px;
    letter-spacing:1.3px;
  }

  .qc-contact__head h2{
    font-size:30px;
  }

  .qc-contact__head p{
    font-size:14px;
    line-height:1.6;
  }


  /* CONTACT */

  .qc-contact__info{
    gap:9px;
  }

  .qc-contact__row{
    min-height:0;

    padding:13px 12px;

    grid-template-columns:
      38px
      minmax(0,1fr);

    gap:11px;

    border-radius:9px;
  }

  .qc-contact__icon{
    width:36px;
    height:36px;
  }

  .qc-contact__icon svg{
    width:18px;
    height:18px;
  }

  .qc-contact__text strong{
    font-size:14px;
  }

  .qc-contact__text p,
  .qc-contact__text a{
    font-size:14px;
  }


  /* QR */

  .qc-contact__qr-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));

    gap:10px;
  }

  .qc-contact__qr-card{
    padding:12px 10px 13px;

    border-radius:10px;
  }

  .qc-contact__qr-card:last-child{
    grid-column:1 / -1;

    width:100%;
    max-width:50%;

    justify-self:center;
  }

  .qc-contact__qr-card strong{
    font-size:14px;
  }

  .qc-contact__qr-card span{
    font-size:12px;
  }

}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:380px){

  .qc-contact__qr-grid{
    grid-template-columns:1fr;
  }

  .qc-contact__qr-card:last-child{
    grid-column:auto;
    max-width:none;
  }

}