* {
      font-family: 'Prompt', sans-serif !important;
    }

    .img-feature-detail {
      display: grid;
    }

    .vbox-container img {
      max-width: 100%;
      height: auto;
      margin-bottom: 0px;
      margin-top: auto;
    }

    .vbox-container {
      overflow-y: hidden;
    }

    .venobox-content {
      width: 100%;
      height: 100%;
      padding-top: 10px;
      padding-bottom: 10px;
      position: relative;
      margin: 0;
    }

    .features_slider {
      cursor: pointer;
    }

    .icon-pop-out {
      /* background-color: whitesmoke; */
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
    }

     .store-image {
      max-width: 190px;
      margin-top: 30px;
    }

    #hero .hero-detail {
      padding-top: 10px;
      margin-bottom: 20px;
      max-width: 590px !important;
    }

    #hero .hero-short-text {
      color: #fff;
      margin-bottom: 0px;
      max-width: 540px !important;
    }

    .scetion-header {
      font-size: 28px !important;
      font-weight: 700;
    }

    .features_slider img {
      padding-right: 10px;
    }

    .features-detail-content {
      padding: 20px 20px 10px 30px !important;
    }

    .tabs-style-bar ul {
      background-color: #fff;
      border: 0 !important;
    }

    .tabs-style-bar li a {
      max-width: 140px;
      margin-top: 10px !important;
      font-size: 24px;
      line-height: 49px;
      margin-left: 0px !important;
      margin-right: 10px !important;
      height: 53px;
    }

    .content-wrap section {
      padding: 5px 10px 0px 0px !important;
    }

    .content-wrap section p {
      font-size: 17px;
      font-weight: normal;
      color: #444444;
      text-align: left;
      line-height: normal;
    }

    .content-wrap section li {
      font-size: 17px;
      text-align: left;
    }

    @media(min-width: 769px) {
      .content-wrap section {
        max-height: 320px !important;
        overflow-y: auto !important;
      }
    }

    @media (max-width: 991px) {
      #hero .icon-pop-out {
        max-width: 60% !important;
        height: auto;
        width: 7% !important
      }
    }

    @media (max-width: 1200px) {
      #hero .icon-pop-out {
        max-width: 80%;
        height: auto;
        width: 14%
      }
    }

    .features .features_slider>h3 {
      color: #010483;
      transition: ease-in-out 0.3s;
      font-size: 14px;
      line-height: 16px;
    }

    /* set time */
    .hero-img .move-up {
      transition: all 500ms ease;
      -webkit-transition: all 500ms ease;
      -moz-transition: all 500ms ease;
      -o-transition: all 500ms ease;
    }

    .hero-img .move-up-right {
      transition: all 600ms ease;
      -webkit-transition: all 600ms ease;
      -moz-transition: all 600ms ease;
      -o-transition: all 600ms ease;
    }

    .hero-img .move-right {
      transition: all 700ms ease;
      -webkit-transition: all 700ms ease;
      -moz-transition: all 700ms ease;
      -o-transition: all 700ms ease;
    }

    .hero-img .move-down-right {
      transition: all 800ms ease;
      -webkit-transition: all 800ms ease;
      -moz-transition: all 800ms ease;
      -o-transition: all 800ms ease;
    }

    .hero-img .move-down {
      transition: all 900ms ease;
      -webkit-transition: all 900ms ease;
      -moz-transition: all 900ms ease;
      -o-transition: all 900ms ease;
    }

    .hero-img .move-down-left {
      transition: all 1000ms ease;
      -webkit-transition: all 1000ms ease;
      -moz-transition: all 1000ms ease;
      -o-transition: all 1000ms ease;
    }

    .hero-img .move-left {
      transition: all 1100ms ease;
      -webkit-transition: all 1100ms ease;
      -moz-transition: all 1100ms ease;
      -o-transition: all 1100ms ease;
    }

    .hero-img .move-up-left {
      transition: all 1200ms ease;
      -webkit-transition: all 1200ms ease;
      -moz-transition: all 1200ms ease;
      -o-transition: all 1200ms ease;
    }

    /*end set time */


    /* set move line */
    .hero-img:hover .move-up {
      transform: translate(-50%, -560%);
      -webkit-transform: translate(-50%, -560%);
      -o-transform: translate(-50%, -560%);
      -moz-transform: translate(-50%, -560%);
    }

    .hero-img:hover .move-up-right {
      transform: translate(355%, -445%);
      -webkit-transform: translate(355%, -445%);
      -o-transform: translate(355%, -445%);
      -moz-transform: translate(355%, -445%);
    }

    .hero-img:hover .move-right {
      transform: translate(355%, -50%);
      -webkit-transform: translate(355%, -50%);
      -o-transform: translate(355%, -50%);
      -moz-transform: translate(355%, -50%);
    }

    .hero-img:hover .move-down-right {
      transform: translate(355%, 340%);
      -webkit-transform: translate(355%, 340%);
      -o-transform: translate(355%, 340%);
      -moz-transform: translate(355%, 340%);
    }

    .hero-img:hover .move-down {
      transform: translate(-50%, 460%);
      -webkit-transform: translate(-50%, 460%);
      -o-transform: translate(-50%, 460%);
      -moz-transform: translate(-50%, 460%);
    }


    .hero-img:hover .move-down-left {
      transform: translate(-455%, 340%);
      -webkit-transform: translate(-455%, 340%);
      -o-transform: translate(-455%, 340%);
      -moz-transform: translate(-455%, 340%);
    }

    .hero-img:hover .move-left {
      transform: translate(-455%, -50%);
      -webkit-transform:  translate(-455%, -50%);
      -o-transform: translat(-455%, -50%);
      -moz-transform: translate(-455%, -50%);
    }

    .hero-img:hover .move-up-left {
      transform: translate(-455%, -445%);
      -webkit-transform: translate(-455%, -445%);
      -o-transform: translate(-455%, -445%);
      -moz-transform: translate(-455%, -445%);
    }

    /* set move line */

    @media (min-width: 1201px) {
      .hero-img:hover .move-up {
        transform: translate(-50%, -525%);
        -webkit-transform: translate(-50%, -525%);
        -o-transform: translate(-50%, -525%);
        -moz-transform: translate(-50%, -525%);
      }

      .hero-img:hover .move-up-right {
        transform: translate(325%, -405%);
        -webkit-transform: translate(325%, -405%);
        -o-transform: translate(325%, -405%);
        -moz-transform: translate(325%, -405%);
      }

      .hero-img:hover .move-right {
        transform: translate(325%, -50%);
        -webkit-transform: translate(325%, -50%);
        -o-transform: translate(325%), -50%;
        -moz-transform: translate(325%, -50%);
      }

      .hero-img:hover .move-down-right {
        transform: translate(325%, 300%);
        -webkit-transform: translate(325%, 300%);
        -o-transform: translate(325%, 300%);
        -moz-transform: translate(325%, 300%);
      }

      .hero-img:hover .move-down {
        transform: translate(-50%, 420%);
        -webkit-transform: translate(-50%, 420%);
        -o-transform: translate(-50%, 420%);
        -moz-transform: translate(-50%, 420%);
      }

      .hero-img:hover .move-down-left {
        transform: translate(-425%, 300%);
        -webkit-transform: translate(-425%, 300%);
        -o-transform: translate(-425%, 300%);
        -moz-transform: translate(-425%, 300%);
      }

      .hero-img:hover .move-left {
        transform: translate(-425%, -50%);
        -webkit-transform: translate(-425%, -50%);
        -o-transform: translate(-425%, -50%);
        -moz-transform: translate(-425%, -50%);
      }

      .hero-img:hover .move-up-left {
        transform: translate(-425%, -4205%);
        -webkit-transform: translate(-425%, -405%);
        -o-transform: translate(-425%, -405%);
        -moz-transform: translate(-425%, -405%);
      }
    }


        
          /* Segmented Pills (HTML-only style) Quick Jump */
          .dept-seg {
            background: #fff;
            border: 1px solid var(--sc-border);
            border-radius: 18px;
            padding: 10px;
            box-shadow: 0 10px 26px rgba(2,6,23,.06);
          }
          .dept-seg-inner {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
          }
          .dept-pill {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            border-radius: 999px;
            border: 1px solid rgba(15,23,42,.10);
            background: rgba(15,23,42,.04);
            color: rgba(15,23,42,.84);
            font-weight: 800;
            text-decoration: none !important;
            transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
            white-space: nowrap;
          }
          .dept-pill:hover {
            transform: translateY(-1px);
            background: rgba(69,190,230,.10);
            border-color: rgba(69,190,230,.30);
            box-shadow: 0 10px 20px rgba(69,190,230,.18);
            color: rgba(15,23,42,.92);
          }
          .dept-pill.active {
            background: linear-gradient(135deg, var(--sc-primary), var(--sc-secondary));
            border-color: rgba(255,255,255,.0);
            color: #fff;
            box-shadow: 0 12px 26px rgba(69,190,230,.28);
          }
          .dept-pill .ic {
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
          }
          .dept-pill .ic svg { width: 20px; height: 20px; stroke: currentColor; }
          .dept-pill.active .ic { background: rgba(255,255,255,.18); }
          @media (max-width: 576px){
            .dept-pill { padding: 9px 12px; font-weight: 800; }
          }








/* ===== Department cards (new global) ===== */
:root{
  --sc-primary: #017DAD;
  --sc-secondary: #45BEE6;
  --sc-dark: #0f172a;
  --sc-border: rgba(15,23,42,.12);
}

.dept-head .dept-title{
  font-size: 1.55rem;
  font-weight: 800;
  margin: 0 0 6px 0;
  color: var(--sc-dark);
}
.dept-head .dept-sub{
  margin: 0;
  color: rgba(15,23,42,.65);
  font-size: 1rem;
}

.dept-card-margin {
  margin-bottom: 20px;
}
/* card */
.dept-card{
  height: 100%;
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: 0 10px 26px rgba(2,6,23,.06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
}
.dept-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(700px 260px at 20% 0%,
    rgba(69,190,230,.14), transparent 60%);
  pointer-events:none;
}
.dept-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(2,6,23,.10);
  border-color: rgba(69,190,230,.35);
}

/* header row */
.dept-card-head{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  margin-bottom: 12px;
}

.dept-ic{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: #fff;
  background: linear-gradient(135deg, var(--sc-primary), var(--sc-secondary));
  box-shadow: 0 10px 24px rgba(69,190,230,.25);
  flex: 0 0 auto;
}
.dept-ic svg{
  width: 22px;
  height: 22px;
  stroke: currentColor;
}

.dept-card-titlewrap{
  flex:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
}
.dept-card-title{
  margin: 2px 0 0 0;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--sc-dark);
  line-height: 1.25;
}

.dept-chip{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(15,23,42,.72);
  background: rgba(15,23,42,.05);
  border: 1px solid rgba(15,23,42,.08);
}

.dept-list{
  padding-left: 18px;
  margin: 0;
}
.dept-list li{
  margin: 8px 0;
  color: rgba(15,23,42,.78);
  line-height: 1.55;
  font-size: 0.98rem;
}

@media (max-width: 576px){
  .dept-card{ padding: 16px; border-radius: 16px; }
  .dept-card-title{ font-size: 1.05rem; }
  .dept-list li{ font-size: .96rem; }
}



  :root{
    /* Brand */
    --sc-primary:#017DAD;     /* main */
    --sc-secondary:#45BEE6;   /* accent */

    /* Neutrals */
    --sc-dark:#0b1220;
    --sc-muted:#64748b;
    --sc-bg:#f6fbfd;
    --sc-card:#ffffff;

    /* Borders / shadows */
    --sc-border:rgba(1,125,173,.12);
    --sc-border-strong:rgba(1,125,173,.22);

    /* Effects */
    --sc-focus:rgba(69,190,230,.28);
  }

  html{scroll-behavior:smooth;}
  body{
    font-family:'Prompt',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    line-height:1.75;
    color:var(--sc-dark);
    background:var(--sc-bg);
  }
  p{color:var(--sc-muted); font-size:1.05rem;}
  h1,h2,h3,h4{letter-spacing:-.02em;}
  .section-title p.scetion-header{font-size:1.05rem;}

  /* Header */
  #header.header-transparent{
    background:rgba(11,18,32,.35);
    backdrop-filter:saturate(1.2) blur(10px);
  }
  #header.header-scrolled{
    background:rgba(11,18,32,.92) !important;
  }
  .nav-menu a{font-weight:600;}
  .nav-menu a:hover,
  .nav-menu .active > a{
    color:var(--sc-secondary);
  }

  /* Hero */
  #hero.main-section{
    position:relative;
    background:
      radial-gradient(1200px 650px at 18% 10%, rgba(69,190,230,.35), transparent 55%),
      radial-gradient(900px 650px at 82% 28%, rgba(1,125,173,.28), transparent 60%),
      linear-gradient(180deg, #06101a 0%, #0b1220 55%, #0d1a24 100%);
    color:#fff;
  }
  #hero .hero-detail{font-size:1.15rem; opacity:.92;}
  #hero .hero-short-text{font-size:1.05rem; opacity:.9;}
  #hero h1{font-size:3.0rem;}
  #hero h1 span{color:#fff;}

  /* Links */
  a{color:var(--sc-primary);}
  a:hover{color:var(--sc-secondary);}

  /* CTA Buttons */
  #hero .btn-cta{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.85rem 1.1rem;
    border-radius:14px;
    font-weight:700;
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 14px 30px rgba(0,0,0,.25);
    transition:transform .15s ease, opacity .15s ease, filter .15s ease;
  }
  #hero .btn-cta:hover{transform:translateY(-1px); opacity:.98; filter:saturate(1.05);}
  #hero .btn-primary-cta{
    background:linear-gradient(135deg, var(--sc-primary), var(--sc-secondary));
    color:#fff;
  }
  #hero .btn-ghost-cta{
    background:rgba(255,255,255,.10);
    color:#fff;
  }

  .store-image{
    filter:drop-shadow(0 10px 18px rgba(0,0,0,.25));
    border-radius:10px;
  }

  /* Cards */
  .icon-box,
  .pricing .box,
  .faq .faq-list li,
  .gallery .gallery-item a,
  .contact .php-email-form{
    border-radius:18px !important;
  }

  .icon-box{
    border:1px solid var(--sc-border);
    box-shadow:0 10px 30px rgba(11,18,32,.06);
    background:var(--sc-card);
  }

  /* Pricing cards */
  .pricing .box{
    border:1px solid var(--sc-border);
    box-shadow:0 10px 30px rgba(11,18,32,.07);
    background:var(--sc-card);
  }
  .pricing .box.featured{
    border-color:var(--sc-border-strong);
    box-shadow:0 16px 44px rgba(1,125,173,.18);
  }
  .pricing .btn-buy{
    border-radius:14px;
    background:linear-gradient(135deg, var(--sc-primary), var(--sc-secondary));
    border:none;
    color:#fff;
    font-weight:800;
  }
  .pricing .btn-buy:hover{filter:saturate(1.05) brightness(1.02);}

  /* Better spacing */
  .main-section{padding-top:40px; padding-bottom:40px;}

  /* Contact section */
  #contact{background:var(--sc-bg);}
  #contact .contact-card{
    background:var(--sc-card);
    border:1px solid var(--sc-border);
    border-radius:20px;
    box-shadow:0 12px 32px rgba(11,18,32,.06);
    padding:22px;
  }
  #contact .form-control{
    border-radius:14px;
    padding:.8rem .95rem;
    border:1px solid rgba(11,18,32,.12);
  }
  #contact .form-control:focus{
    box-shadow:0 0 0 .2rem var(--sc-focus);
    border-color:rgba(69,190,230,.75);
  }
  #contact .btn-send{
    border-radius:14px;
    padding:.85rem 1.1rem;
    font-weight:800;
    background:linear-gradient(135deg, var(--sc-primary), var(--sc-secondary));
    border:none;
  }
  #contact .btn-send:hover{filter:saturate(1.05) brightness(1.02);}

  /* FAQ accents */
  .faq .faq-list a{
    --color:var(--sc-dark);
  }
  .faq .faq-list a:hover{
    color:var(--sc-primary);
  }
  .faq .faq-list .icon-help{
    color:var(--sc-primary);
  }

  /* Mobile sticky CTA */
  .sticky-cta{
    position:fixed; left:12px; right:12px; bottom:12px; z-index:9999;
    display:none; gap:10px;
  }
  .sticky-cta a{
    flex:1; text-align:center;
    padding:.85rem .9rem;
    border-radius:16px;
    font-weight:900;
    box-shadow:0 14px 28px rgba(0,0,0,.18);
  }
  .sticky-cta .call{
    background:linear-gradient(135deg, var(--sc-primary), var(--sc-secondary));
    color:#fff;
  }
  .sticky-cta .quote{
    background:rgba(255,255,255,.94);
    color:var(--sc-dark);
    border:1px solid var(--sc-border);
  }

  @media (max-width: 768px){
    #hero h1{font-size:2.35rem;}
    .sticky-cta{display:flex;}
    body{padding-bottom:74px;}
  }

  


:root{
  --sc-primary:#017DAD;
  --sc-secondary:#45BEE6;
}

/* HERO background (force) */
#hero{
  background:
    radial-gradient(1200px 650px at 18% 10%, rgba(69,190,230,.35), transparent 55%),
    radial-gradient(900px 650px at 82% 28%, rgba(1,125,173,.28), transparent 60%),
    linear-gradient(180deg, #06101a 0%, #0b1220 55%, #0d1a24 100%) !important;
  color:#fff !important;
}

/* Header active link color */
.nav-menu a:hover,
.nav-menu .active > a{
  color: var(--sc-secondary) !important;
}

/* ปุ่มเดิมของ template ที่ยังเป็นสีเขียว/ฟ้า */
#hero .btn-get-started,
#hero a.btn-get-started{
  background: linear-gradient(135deg, var(--sc-primary), var(--sc-secondary)) !important;
  color:#fff !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 800 !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.25) !important;
}
#hero .btn-get-started:hover{
  filter: saturate(1.05) brightness(1.02) !important;
}

/* ถ้าปุ่มอื่นใน hero ยังเป็นสีเขียวจาก class เดิม */
#hero .btn-primary,
#hero .btn-success,
#hero .btn-info{
  background: linear-gradient(135deg, var(--sc-primary), var(--sc-secondary)) !important;
  border-color: transparent !important;
  color:#fff !important;
}

/* ปุ่มแบบโปร่ง (ถ้ามี) */
#hero .btn-outline-primary,
#hero .btn-outline-success,
#hero .btn-outline-info{
  border-color: rgba(255,255,255,.22) !important;
  color:#fff !important;
  background: rgba(255,255,255,.10) !important;
}

/* Sticky CTA ให้เข้าธีม */
.sticky-cta .call{
  background: linear-gradient(135deg, var(--sc-primary), var(--sc-secondary)) !important;
  color:#fff !important;
}





/* ทำให้แถบ quick jump ลอยทับเนื้อหาได้ */
#dept-jump-wrap.is-sticky{
  position: fixed;
  left: 0;
  right: 0;
  top: 76px;           /* <<< เพิ่มบรรทัดนี้ (ปรับตามความสูง header) */
  z-index: 1030;
}

/* ให้เนื้อในยังอยู่กึ่งกลางตาม container เดิม */
#dept-jump-wrap.is-sticky .dept-seg{
  max-width: 1140px; /* ปรับตาม breakpoint/bootstrap ของคุณ */
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

/* spacer กัน content กระโดดตอน wrap ถูก fixed */
#dept-jump-spacer{
  height: 0;
}

/* Mobile: ลดขนาด Quick Jump */
@media (max-width: 576px){
  .dept-seg{ padding: 8px; border-radius: 16px; }

  .dept-seg-inner{
    gap: 8px;
    flex-wrap: nowrap;          /* ถ้าอยากให้เป็นแถวเดียว */
    overflow-x: auto;           /* เลื่อนซ้าย-ขวา */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* Firefox */
  }
  .dept-seg-inner::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

  .dept-pill{
    font-size: 14px;            /* <<< ลดฟอนต์ */
    padding: 8px 10px;          /* <<< ลดระยะ */
    gap: 8px;
  }
  .dept-pill .ic{
    width: 18px;
    height: 18px;
    border-radius: 8px;
  }
  .dept-pill .ic svg{
    width: 16px;
    height: 16px;
  }
}


/* Contact full-width + premium look */
.contact.contact-wide{
  background:
    radial-gradient(900px 380px at 12% 10%, rgba(69,190,230,.18), transparent 60%),
    radial-gradient(900px 380px at 88% 30%, rgba(1,125,173,.16), transparent 60%),
    linear-gradient(180deg, rgba(246,251,253,1) 0%, rgba(255,255,255,1) 100%);
}

.contact-card.contact-card-wide{
  width: 100%;
  border-radius: 22px;
  border: 1px solid var(--sc-border);
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 50px rgba(2,6,23,.08);
  padding: 22px;
}

.contact-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.contact-title{
  margin: 0 0 6px 0;
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--sc-dark);
}
.contact-sub{
  margin: 0;
  color: var(--sc-muted);
  font-size: 1rem;
  max-width: 64ch;
}

.contact-badges{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content:flex-end;
}
.contact-badge{
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  color: rgba(15,23,42,.78);
  background: rgba(15,23,42,.05);
  border: 1px solid rgba(15,23,42,.10);
}

.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.contact-item{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
  text-decoration:none !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  color: inherit;
}
.contact-item:hover{
  transform: translateY(-1px);
  background: rgba(69,190,230,.10);
  border-color: rgba(69,190,230,.28);
  box-shadow: 0 12px 26px rgba(69,190,230,.16);
}

.contact-ic{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background: linear-gradient(135deg, var(--sc-primary), var(--sc-secondary));
  box-shadow: 0 10px 24px rgba(69,190,230,.22);
  flex: 0 0 auto;
}
.contact-ic svg{ width: 22px; height: 22px; stroke: currentColor; }

.contact-label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(15,23,42,.60);
  margin-bottom: 2px;
}
.contact-value{
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--sc-dark);
}

.contact-note{
  grid-column: 1 / -1;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  padding: 14px 14px;
}
.contact-note-title{
  font-weight: 900;
  color: var(--sc-dark);
  margin-bottom: 4px;
}
.contact-note-sub{
  color: var(--sc-muted);
  font-size: .98rem;
}

/* Mobile */
@media (max-width: 768px){
  .contact-grid{ grid-template-columns: 1fr; }
  .contact-card-head{ flex-direction: column; }
  .contact-badges{ justify-content:flex-start; }
}