/* =========================================================
   YUNASSIE CONTACT INFORMATION V5
   UEESHOP SAFE
========================================================= */


#yunassie-contact-info-v5 {


  /* =====================================================
     【Email颜色修改位置】
  ====================================================== */

  --blue:#526f89;
  --blue-dark:#3e5c75;
  --blue-soft:#f2f6f8;


  /* =====================================================
     【WhatsApp 01颜色修改位置】
  ====================================================== */

  --green:#5f8877;
  --green-dark:#496e5e;
  --green-soft:#f1f6f3;


  /* =====================================================
     【WhatsApp 02颜色修改位置】
  ====================================================== */

  --violet:#766f92;
  --violet-dark:#5e577c;
  --violet-soft:#f5f3f8;

  /* Live Chat */
  --chat:#4969e8;
  --chat-dark:#3453cf;
  --chat-soft:#f1f4ff;


  --dark:#202428;
  --text:#6b7074;
  --line:#e8ebed;


  width:100%;

  padding:84px 24px 82px;

  overflow:hidden;

  box-sizing:border-box;


  /* =====================================================
     【模块背景颜色修改位置】

     当前：纯白
  ====================================================== */

  background:#ffffff;

}


#yunassie-contact-info-v5 *,
#yunassie-contact-info-v5 *::before,
#yunassie-contact-info-v5 *::after {

  box-sizing:border-box;

}


/* =========================================================
   CONTAINER
========================================================= */


#yunassie-contact-info-v5
.yci5-container {

  width:100%;

  max-width:1400px;

  margin:0 auto;

}


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


#yunassie-contact-info-v5
.yci5-heading {

  max-width:760px;

  margin:0 auto 54px;

  text-align:center;

}


/* =========================================================
   EYEBROW
========================================================= */


#yunassie-contact-info-v5
.yci5-eyebrow {

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:10px;

  margin-bottom:14px;

  color:var(--blue-dark);

  font-size:10px;

  line-height:1;

  font-weight:700;

  letter-spacing:2.6px;

}


#yunassie-contact-info-v5
.yci5-eyebrow-line {

  position:relative;

  width:38px;

  height:1px;

  overflow:hidden;

  background:#e2e5e7;

}


#yunassie-contact-info-v5
.yci5-eyebrow-line::after {

  content:"";

  position:absolute;

  top:0;

  left:-100%;

  width:100%;

  height:100%;

  background:linear-gradient(
    90deg,
    var(--blue),
    var(--green),
    var(--violet)
  );

  animation:yci5Line 3s ease-in-out infinite;

}


@keyframes yci5Line {

  0% {
    left:-100%;
  }

  55%,
  100% {
    left:100%;
  }

}


#yunassie-contact-info-v5
.yci5-live-dot {

  position:relative;

  width:6px;

  height:6px;

  border-radius:50%;

  background:var(--green);

}


#yunassie-contact-info-v5
.yci5-live-dot::after {

  content:"";

  position:absolute;

  inset:-5px;

  border-radius:50%;

  border:1px solid rgba(95,136,119,.28);

  animation:yci5Ring 2.2s ease-out infinite;

}


@keyframes yci5Ring {

  0% {

    transform:scale(.55);
    opacity:1;

  }

  100% {

    transform:scale(1.7);
    opacity:0;

  }

}


/* =========================================================
   TITLE
========================================================= */


#yunassie-contact-info-v5
.yci5-heading h2 {

  margin:0;

  color:var(--dark);

  font-size:clamp(38px,4vw,52px);

  line-height:1.08;

  font-weight:500;

  letter-spacing:-1.25px;

}


#yunassie-contact-info-v5
.yci5-heading h2 span {

  color:transparent;

  background:linear-gradient(
    100deg,
    var(--blue-dark),
    var(--blue),
    var(--green),
    var(--violet),
    var(--blue-dark)
  );

  background-size:260% 100%;

  -webkit-background-clip:text;
  background-clip:text;

  animation:yci5Title 9s linear infinite;

}


@keyframes yci5Title {

  from {
    background-position:0% center;
  }

  to {
    background-position:260% center;
  }

}


/* =========================================================
   INTRO
========================================================= */


#yunassie-contact-info-v5
.yci5-heading p {

  max-width:650px;

  margin:18px auto 0;

  color:var(--text);

  font-size:15px;

  line-height:1.75;

}


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


#yunassie-contact-info-v5
.yci5-grid {

  display:grid;

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

  gap:22px;

}


/* =========================================================
   CARD COLOR THEMES
========================================================= */


#yunassie-contact-info-v5
.yci5-email {

  --theme:var(--blue);
  --theme-dark:var(--blue-dark);
  --theme-soft:var(--blue-soft);
  --theme-rgb:82,111,137;

}


#yunassie-contact-info-v5
.yci5-whatsapp {

  --theme:var(--green);
  --theme-dark:var(--green-dark);
  --theme-soft:var(--green-soft);
  --theme-rgb:95,136,119;

}


#yunassie-contact-info-v5
.yci5-whatsapp-alt {

  --theme:var(--violet);
  --theme-dark:var(--violet-dark);
  --theme-soft:var(--violet-soft);
  --theme-rgb:118,111,146;

}


#yunassie-contact-info-v5
.yci5-livechat {
  --theme:var(--chat);
  --theme-dark:var(--chat-dark);
  --theme-soft:var(--chat-soft);
  --theme-rgb:73,105,232;
  width:100%;
  font:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}

#yunassie-contact-info-v5
.yci5-livechat-note {
  min-height:36px;
  margin:-12px 0 18px;
  color:var(--text);
  font-size:12px;
  line-height:1.55;
}


/* =========================================================
   INQUIRY CTA
========================================================= */

#yunassie-contact-info-v5 .yci5-inquiry-cta {
  margin-top:30px;
  padding:26px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  background:#f7f9f8;
  border:1px solid #e7ece9;
  border-radius:4px;
}

#yunassie-contact-info-v5 .yci5-inquiry-copy { flex:1; min-width:0; }

#yunassie-contact-info-v5 .yci5-inquiry-eyebrow {
  display:block; margin-bottom:8px; color:#688578;
  font-size:9px; line-height:1; font-weight:700; letter-spacing:2px;
}

#yunassie-contact-info-v5 .yci5-inquiry-title {
  margin-bottom:6px; color:#202428; font-size:20px; line-height:1.35; font-weight:600;
}

#yunassie-contact-info-v5 .yci5-inquiry-desc {
  color:#6b7074; font-size:13px; line-height:1.65;
}

#yunassie-contact-info-v5 .yci5-inquiry-btn {
  flex-shrink:0; min-width:205px; min-height:52px; padding:0 25px;
  display:inline-flex; align-items:center; justify-content:center; gap:13px;
  background:#4f6c60; border:1px solid #4f6c60; border-radius:3px;
  color:#fff !important; text-decoration:none !important;
  font-size:10px; line-height:1; font-weight:700; letter-spacing:1.5px;
  box-shadow:0 9px 24px rgba(79,108,96,.14);
  transition:transform .3s ease,background .3s ease,box-shadow .3s ease;
}

#yunassie-contact-info-v5 .yci5-inquiry-btn span {
  font-size:17px; line-height:1; transition:transform .3s ease;
}

#yunassie-contact-info-v5 .yci5-inquiry-btn:hover {
  background:#688578; transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(79,108,96,.20);
}

#yunassie-contact-info-v5 .yci5-inquiry-btn:hover span { transform:translateX(5px); }


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


#yunassie-contact-info-v5
.yci5-card {

  position:relative;

  min-height:285px;

  padding:38px 28px 34px;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  text-align:center;

  background:#ffffff;

  border:1px solid var(--line);

  border-radius:4px;

  color:inherit;

  text-decoration:none !important;

  overflow:hidden;

  box-shadow:0 7px 28px rgba(29,37,42,.035);

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

}


#yunassie-contact-info-v5
.yci5-card:hover {

  transform:translateY(-8px);

  border-color:rgba(var(--theme-rgb),.35);

  box-shadow:0 22px 50px rgba(29,37,42,.09);

}


/* =========================================================
   TOP COLOR LINE
========================================================= */


#yunassie-contact-info-v5
.yci5-top-line {

  position:absolute;

  top:0;

  left:50%;

  width:46px;

  height:2px;

  transform:translateX(-50%);

  background:var(--theme);

  transition:width .45s ease;

}


#yunassie-contact-info-v5
.yci5-card:hover
.yci5-top-line {

  width:100%;

}


/* =========================================================
   NUMBER
========================================================= */


#yunassie-contact-info-v5
.yci5-number {

  position:absolute;

  top:20px;

  right:22px;

  color:rgba(var(--theme-rgb),.55);

  font-size:9px;

  font-weight:700;

  letter-spacing:1px;

}


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


#yunassie-contact-info-v5
.yci5-icon {

  position:relative;

  width:66px;

  height:66px;

  display:flex;

  align-items:center;

  justify-content:center;

  margin-bottom:25px;

  border-radius:50%;

  background:var(--theme-soft);

  border:1px solid rgba(var(--theme-rgb),.18);

  transition:
    transform .4s ease,
    background .35s ease,
    box-shadow .35s ease;

}


#yunassie-contact-info-v5
.yci5-icon::after {

  content:"";

  position:absolute;

  width:7px;

  height:7px;

  right:1px;

  bottom:6px;

  border-radius:50%;

  background:var(--theme);

  border:2px solid #ffffff;

}


#yunassie-contact-info-v5
.yci5-icon svg {

  width:25px;

  height:25px;

  fill:none;

  stroke:var(--theme-dark);

  stroke-width:1.6;

  stroke-linecap:round;

  stroke-linejoin:round;

  transition:
    stroke .35s ease,
    transform .35s ease;

}


#yunassie-contact-info-v5
.yci5-card:hover
.yci5-icon {

  transform:translateY(-4px) scale(1.07);

  background:var(--theme);

  box-shadow:0 12px 27px rgba(var(--theme-rgb),.22);

}


#yunassie-contact-info-v5
.yci5-card:hover
.yci5-icon svg {

  stroke:#ffffff;

  transform:scale(1.06);

}


/* =========================================================
   LABEL
========================================================= */


#yunassie-contact-info-v5
.yci5-label {

  margin-bottom:15px;

  color:var(--theme);

  font-size:9px;

  line-height:1;

  font-weight:800;

  letter-spacing:2.2px;

}


/* =========================================================
   CONTACT VALUE
========================================================= */


#yunassie-contact-info-v5
.yci5-value {

  margin-bottom:22px;

  color:#2e3336;

  font-size:16px;

  line-height:1.5;

  font-weight:600;

  word-break:break-word;

}


/* =========================================================
   ACTION
========================================================= */


#yunassie-contact-info-v5
.yci5-action {

  display:inline-flex;

  align-items:center;

  gap:9px;

  color:var(--theme-dark);

  font-size:9px;

  line-height:1;

  font-weight:700;

  letter-spacing:1.5px;

}


#yunassie-contact-info-v5
.yci5-action-text {

  position:relative;

  padding-bottom:5px;

}


#yunassie-contact-info-v5
.yci5-action-text::after {

  content:"";

  position:absolute;

  left:0;

  bottom:0;

  width:0;

  height:1px;

  background:var(--theme);

  transition:width .35s ease;

}


#yunassie-contact-info-v5
.yci5-card:hover
.yci5-action-text::after {

  width:100%;

}


#yunassie-contact-info-v5
.yci5-arrow {

  display:inline-block;

  color:var(--theme);

  font-size:17px;

  line-height:1;

  transition:transform .35s ease;

}


#yunassie-contact-info-v5
.yci5-card:hover
.yci5-arrow {

  transform:translateX(6px);

}


/* =========================================================
   BOTTOM
========================================================= */


#yunassie-contact-info-v5
.yci5-bottom {

  display:flex;

  align-items:center;

  justify-content:center;

  gap:14px;

  margin-top:42px;

}


#yunassie-contact-info-v5
.yci5-bottom-text {

  display:flex;

  align-items:center;

  gap:8px;

  color:#858b8e;

  font-size:8px;

  font-weight:700;

  letter-spacing:1.8px;

}


#yunassie-contact-info-v5
.yci5-bottom-dot {

  width:6px;

  height:6px;

  border-radius:50%;

  background:var(--green);

  animation:yci5Pulse 2.4s infinite;

}


@keyframes yci5Pulse {

  0% {

    box-shadow:0 0 0 0 rgba(95,136,119,.30);

  }

  70% {

    box-shadow:0 0 0 7px rgba(95,136,119,0);

  }

  100% {

    box-shadow:0 0 0 0 rgba(95,136,119,0);

  }

}


#yunassie-contact-info-v5
.yci5-bottom-line {

  position:relative;

  width:48px;

  height:1px;

  overflow:hidden;

  background:#e4e7e8;

}


#yunassie-contact-info-v5
.yci5-bottom-line::after {

  content:"";

  position:absolute;

  top:0;

  left:-100%;

  width:100%;

  height:100%;

  background:linear-gradient(
    90deg,
    var(--blue),
    var(--green),
    var(--violet)
  );

  animation:yci5Bottom 3.8s linear infinite;

}


@keyframes yci5Bottom {

  from {
    left:-100%;
  }

  to {
    left:100%;
  }

}


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


@media (max-width:900px) {


  #yunassie-contact-info-v5 {

    padding:68px 20px 72px;

  }


  #yunassie-contact-info-v5
  .yci5-grid {

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

    max-width:900px;

    margin:0 auto;

  }


  #yunassie-contact-info-v5
  .yci5-card {

    min-height:235px;

  }

}


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


@media (max-width:600px) {


  #yunassie-contact-info-v5 {

    padding:56px 16px 60px;

  }


  #yunassie-contact-info-v5
  .yci5-heading {

    margin-bottom:38px;

  }


  #yunassie-contact-info-v5
  .yci5-heading h2 {

    font-size:34px;

  }


  #yunassie-contact-info-v5
  .yci5-heading p {

    font-size:14px;

    line-height:1.7;

  }


  #yunassie-contact-info-v5
  .yci5-grid {

    grid-template-columns:1fr;
    gap:15px;

  }

  #yunassie-contact-info-v5 .yci5-inquiry-cta {
    padding:24px 20px;
    flex-direction:column;
    align-items:flex-start;
  }

  #yunassie-contact-info-v5 .yci5-inquiry-btn {
    width:100%;
    min-width:0;
  }


  #yunassie-contact-info-v5
  .yci5-card {

    min-height:220px;

    padding:30px 20px 27px;

  }


  #yunassie-contact-info-v5
  .yci5-icon {

    width:58px;

    height:58px;

    margin-bottom:21px;

  }


  #yunassie-contact-info-v5
  .yci5-value {

    font-size:14px;

  }


  #yunassie-contact-info-v5
  .yci5-bottom {

    gap:9px;

    margin-top:32px;

  }


  #yunassie-contact-info-v5
  .yci5-bottom-line {

    width:22px;

  }


  #yunassie-contact-info-v5
  .yci5-bottom-text {

    font-size:7px;

    letter-spacing:1.2px;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */


@media (prefers-reduced-motion:reduce) {


  #yunassie-contact-info-v5 *,
  #yunassie-contact-info-v5 *::before,
  #yunassie-contact-info-v5 *::after {

    animation:none !important;

    transition-duration:.2s !important;

  }

}