body{
  overflow-x: hidden;;
}
*{padding: 0;margin: 0;}
.material-symbols-light--mobile-share-rounded {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230044F5' d='m13.38 12.5l-1.24 1.227q-.16.146-.16.344t.166.364q.16.16.354.16t.354-.16l1.869-1.87q.13-.13.184-.267q.052-.136.052-.298t-.052-.298t-.184-.267l-1.889-1.889q-.14-.14-.334-.14t-.36.146q-.16.14-.15.348t.15.354l1.222 1.246h-2.977q-.671 0-1.144.472t-.472 1.144V15q0 .214.143.357t.357.143t.357-.143t.143-.357v-1.884q0-.27.173-.443t.442-.173zM7.617 22q-.672 0-1.144-.472T6 20.385V3.615q0-.69.463-1.152T7.616 2h8.846q.67 0 1.143.472q.472.472.472 1.144V6.83q.373.04.648.31q.275.269.275.648v1.769q0 .379-.275.648t-.648.31v9.869q0 .67-.472 1.143q-.472.472-1.143.472z' stroke-width='0.1' stroke='%230044F5'/%3E%3C/svg%3E");
}
.fluent--phone-screen-time-24-filled {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230044F5' d='M17.5 12a5.5 5.5 0 1 1 0 11a5.5 5.5 0 0 1 0-11M13.75 2A2.25 2.25 0 0 1 16 4.25v6.924A6.5 6.5 0 0 0 11.02 18H8.75a.75.75 0 0 0-.102 1.493l.102.007h2.5l.062-.003A6.5 6.5 0 0 0 12.81 22H6.25A2.25 2.25 0 0 1 4 19.75V4.25A2.25 2.25 0 0 1 6.25 2zm2.75 12a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h3.002a.5.5 0 0 0 0-1H17v-3.5a.5.5 0 0 0-.5-.5' stroke-width='0.1' stroke='%230044F5'/%3E%3C/svg%3E");
}
.fluent--server-link-16-filled {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%230044F5' d='M11.414 1.586A2 2 0 0 0 10 1H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h.05A3.5 3.5 0 0 1 8.5 9H12V3a2 2 0 0 0-.586-1.414M9.853 4.854A.5.5 0 0 1 9.499 5h-3a.5.5 0 0 1-.5-.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .354.854M8.5 10a2.5 2.5 0 0 0 0 5H9a.5.5 0 0 0 0-1h-.5a1.5 1.5 0 0 1 0-3H9a.5.5 0 0 0 0-1zm3.5 0a.5.5 0 0 0 0 1h.5a1.5 1.5 0 0 1 0 3H12a.5.5 0 0 0 0 1h.5a2.5 2.5 0 0 0 0-5zm-4 2.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1-.5-.5' stroke-width='0.1' stroke='%230044F5'/%3E%3C/svg%3E");
}
.material-symbols-light--offline-share {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230044F5' d='M7.116 21.385q-.691 0-1.153-.463q-.463-.462-.463-1.153V5.54h1v14.23q0 .231.192.423t.423.193h8.616v1zm12.153-17.77v2.127q.31-.001.52.24t.211.55v1.282q0 .309-.21.55q-.211.242-.52.24v7.78q0 .672-.473 1.144q-.472.472-1.143.472H10.5q-.671 0-1.143-.472t-.472-1.144V3.616q0-.672.472-1.144T10.5 2h7.154q.671 0 1.143.472t.472 1.144m-7.827 8.346h.885v-1.75h2.689l-1.008 1.007l.627.627l2.077-2.077l-2.077-2.077l-.627.627l1.008 1.008h-2.881q-.31 0-.501.191q-.192.191-.192.501z' stroke-width='0.1' stroke='%230044F5'/%3E%3C/svg%3E");
}
.mage--contact-book-fill {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230044F5' d='M15.833 2H9.676A5.885 5.885 0 0 0 3.8 7.66H3a.75.75 0 0 0 0 1.5h.79v5.69h-.76a.75.75 0 0 0 0 1.5h.8A5.88 5.88 0 0 0 9.706 22h6.157a5.886 5.886 0 0 0 5.887-5.89V7.89A5.9 5.9 0 0 0 15.833 2m-2.679 3.93a3.097 3.097 0 0 1 3.038 3.708a3.1 3.1 0 0 1-4.23 2.253a3.1 3.1 0 0 1-.995-5.057a3.1 3.1 0 0 1 2.187-.904m3.499 11.57a.75.75 0 0 1-.75-.75c0-1.21-1.51-2.25-2.749-2.25s-2.738 1-2.738 2.25a.75.75 0 0 1-1.5 0c0-2.15 2.24-3.75 4.238-3.75c2 0 4.248 1.6 4.248 3.75a.76.76 0 0 1-.75.75' stroke-width='0.1' stroke='%230044F5'/%3E%3Cpath fill='%230044F5' d='M14.754 9.02a1.6 1.6 0 1 1-3.2.02a1.6 1.6 0 0 1 3.2-.02' stroke-width='0.1' stroke='%230044F5'/%3E%3C/svg%3E");
}
.material-symbols-light--devices-rounded {
  display: inline-block;
  width: 38px;
  height: 38px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230044F5' d='M11.539 19H3.5q-.213 0-.356-.144T3 18.499t.144-.356T3.5 18h8.039q.212 0 .356.144t.144.357t-.144.356t-.356.143m-5.923-2.384q-.691 0-1.153-.463T4 15V6.616q0-.691.463-1.153T5.616 5h12.769q.517 0 .912.28t.55.72h-4.212q-1.527 0-2.562 1.035t-1.035 2.561v6.212q0 .343-.232.575t-.575.233zM16.019 19q-.504 0-.858-.353q-.353-.354-.353-.858V9.98q0-.51.353-.86q.353-.352.858-.352h3.958q.514 0 .864.351q.351.351.351.86v7.808q0 .505-.35.859q-.351.353-.865.353zm1.978-6.5q.29 0 .483-.2q.193-.202.193-.47q0-.29-.193-.483t-.488-.193q-.273 0-.469.193t-.196.488q0 .273.2.469q.201.196.47.196' stroke-width='0.1' stroke='%230044F5'/%3E%3C/svg%3E");
}
.clarity--analytics-solid-alerted {
  display: inline-block;
  width: 38px;
  height: 38px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%230044F5' d='M34 29a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h17.958l-4.333 7.395c-.83 1.206-.031 2.85 1.439 2.956q.104.009.206.006h8.182L22.38 22.06L15.63 12l-6.35 9.28l-2.53-2.24l-1.33 1.49l4.23 3.75l5.96-8.72l6.67 9.94l7.679-10.143H34Z' class='clr-i-solid--alerted clr-i-solid-path-1--alerted' stroke-width='1' stroke='%230044F5'/%3E%3Cpath fill='%230044F5' d='m26.854 1.144l-5.72 9.86a1.28 1.28 0 0 0 1.1 2h11.45a1.28 1.28 0 0 0 1.1-2l-5.72-9.86a1.28 1.28 0 0 0-2.21 0' class='clr-i-solid--alerted clr-i-solid-path-2--alerted clr-i-alert' stroke-width='1' stroke='%230044F5'/%3E%3Cpath fill='none' d='M0 0h36v36H0z'/%3E%3C/svg%3E");
}
.streamline-ultimate--office-employee-bold {
  display: inline-block;
  width: 38px;
  height: 38px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230044F5' d='M22.87 22H19a.23.23 0 0 1-.2-.1a.23.23 0 0 1 0-.21l1.32-5a.88.88 0 0 0-.18-.79a1 1 0 0 0-.78-.36H4.87a1 1 0 0 0-.78.36a.88.88 0 0 0-.18.79l1.32 5a.23.23 0 0 1 0 .21a.23.23 0 0 1-.23.1H1.13a1 1 0 0 0 0 2h21.74a1 1 0 0 0 0-2M12 18a1.24 1.24 0 1 1-1.23 1.24A1.23 1.23 0 0 1 12 18m-5.72-4.43a.5.5 0 0 0 .5.48h10.44a.5.5 0 0 0 .5-.49a5.73 5.73 0 0 0-3.2-5.14a.24.24 0 0 1 0-.42a4.39 4.39 0 1 0-5.09 0a.28.28 0 0 1 .11.23a.26.26 0 0 1-.14.2a5.74 5.74 0 0 0-3.12 5.14M12 9.67a.74.74 0 0 1 .74.74v1.22a.74.74 0 0 1-1.48 0v-1.22a.74.74 0 0 1 .74-.74m-2.35-6a.24.24 0 0 1 .16-.15a.22.22 0 0 1 .21 0a5.56 5.56 0 0 0 3 .9a6 6 0 0 0 1.13-.12a.11.11 0 0 1 .1 0a.14.14 0 0 1 .05.1a2.41 2.41 0 1 1-4.69-.77Z' stroke-width='0.1' stroke='%230044F5'/%3E%3C/svg%3E");
}
.material-symbols-light--integration-instructions {
  display: inline-block;
  width: 38px;
  height: 38px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230044F5' d='m9.6 14.87l.708-.72L8.158 12l2.15-2.15l-.708-.72L6.73 12zm4.8 0L17.27 12L14.4 9.13l-.708.72l2.15 2.15l-2.15 2.15zM5.616 20q-.667 0-1.141-.475T4 18.386V5.615q0-.666.475-1.14T5.615 4h4.7q-.136-.766.367-1.383Q11.184 2 12.01 2t1.328.617T13.685 4h4.7q.666 0 1.14.475T20 5.615v12.77q0 .666-.475 1.14t-1.14.475zm6.922-15.77q.212-.213.212-.538t-.212-.537T12 2.942t-.537.213t-.213.537t.213.538t.537.212t.538-.212' stroke-width='0.1' stroke='%230044F5'/%3E%3C/svg%3E");
}

/* -----------feature-section-------------------- */

.mainheading{
  text-align: center;
  margin-bottom: 50px;
}
.mainheading h2{
  font-family: 'Inter 28pt';
  font-size: 35px;
  color: #000000;
}
.mainheading p {
    color: #434343;
    font-size: 18px;
}

 .features-section {
    background: #EEF2FB;
    padding: 80px 0;
    }

    .feature-title {
      color: #000;
      font-family: Inter;
      font-size: 40px;
      font-style: normal;
      font-weight: 700;
      line-height: 54px;
    }

  .feature-card {
      background: #fff url(https://digitalcardsformedia.com/wp-content/uploads/sites/4/2026/04/boxbg.png) no-repeat top right;
      border-radius: 20px;
      padding: 20px;
      height: 100%;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transition: 0.3s;
      position: relative;
      background-size: contain;
  }

    .feature-card:hover {
      transform: translateY(-5px);
    }


.feature-card h6 {
    margin-top: 20px;
    color: #000;
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    position: relative;
    padding-bottom: 10px;
}
.feature-card h6:before {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 60px;
    height: 4px;
    background: #0044F5;
    content: '';
    border-radius: 10px;
}

.feature-card p {
    margin-top: 20px;
    color: #676767;
    font-family: Inter;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    margin-bottom: 0;
}
  .feature-text{
    color: #434343;
    font-family: Inter;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 27px;
  }

.iconname {
    width: 50px;
    height: 50px;
    background: #E6EDFE;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

/* Responsive */
@media (max-width: 991px) {
  .feature-title {
    font-size: 26px;
  }
}

.blueButton{
  margin-top: 50px;
}

.blueButton a {
    width: 220px;
    height: 60px;
    line-height: 60px;
    margin: 0px auto;
    display: block;
    text-align: center;
    text-decoration: none;
    color: #fff;
    font-size: 20px;
    border-radius: 20px;
    background: linear-gradient(90deg, #0044F5 0%, #00288F 100%);
    box-shadow: 0 5px 4.2px 1px rgba(0, 0, 0, 0.33);
}

.blueButton a:hover{
  box-shadow: none;
  background: #124BDC;
}

    /* --------------------------------- */



/* Quick connection */
.connectionbackground {
    background: url(https://digitalcardsformedia.com/wp-content/uploads/sites/4/2026/04/quickconnectionbackground.jpg);
    width: 100%;
    height: 100%;
    padding: 80px 0px;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
.listBox {
    color: #fff;
    margin-bottom: 40px;
}
.listBox strong {
    font-weight: 100;
    font-size: 20px;
    display: block;
}
.listBox p {
    font-size: 16px;
    line-height: 26px;
}    

/* CTA */
.ctabackground {
    background: url(https://digitalcardsformedia.com/wp-content/uploads/sites/4/2026/04/ctabackground.png);
    width: 100%;
    height: 100%;
    padding: 80px 0px;
    background-position: bottom center;
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
}
section.ctabackground h6 {
    text-align: center;
    color: #000000;
    font-size: 35px;
    font-weight: 700;
    display: inline-block;
    margin: 0px auto;
}

/* Benefits Section */
.leftImgBox {
  position: relative;
  text-align: center;
}

.leftImgBox img {
  width: 500px;
  border-radius: 20px;
  opacity: 1;
  transition: opacity 0.4s ease;
  border: 2px solid #B6B6B6;
  margin: 0px auto;
}

.leftImgBox img.fade {
  opacity: 0;
}

.right {
  flex: 1;
}

  .container2 h1 {
    margin-bottom: 10px;
  }

  .subtitle {
    color: #666;
    margin-bottom: 20px;
  }

  .tab {
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
    cursor: pointer;
    transition: 0.3s;
  }

  .tab h3 {
    margin: 0;
    transition: 0.3s;
    font-size: 24px;
    font-weight: 600;
    position: relative;

  }

   .tab h3::after{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233F3F3F' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center right;
    transition: all 0.5s ease-in-out;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
   }


   .tab.active h3::after{
    transform: translateY(-50%) rotate(180deg);

  }



  .tab-content {
    max-height: 0;
    overflow: hidden;
    color: #666;
    transition: all 0.4s ease;
  }

  .tab.active .tab-content {
    max-height: 100px;
    margin-top: 10px;
  }

  .tab.active h3 {
    color: #000;
  }

  .tab:hover h3 {
    color: #000;
  }

/* Benefits Section END */

/* why */
.whyBox {
    background: url(https://digitalcardsformedia.com/wp-content/uploads/sites/4/2026/04/whydigitalbusinesscard.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    padding: 100px 0px;
    background-attachment: fixed;
}
.innerWhiteBox{
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  color: #434343;
}
.innerWhiteBox h2{}
.innerWhiteBox ul li {
    padding: 5px 0px;
}


/* Responsive */
@media (max-width: 768px) {
  .mainheading h2 {
      font-family: 'Inter 28pt';
      font-size: 28px;
      color: #242168;
  }
  .ctabackground {
      padding: 40px 0px;
  }
  .blueButton {
      margin-top: 30px;
  }
  .connectionbackground {
      background: url(https://digitalcardsformedia.com/wp-content/uploads/sites/4/2026/04/mobilebg.jpg);
      padding: 30px 0px;
  }
  .tab h3 {
    font-size: 20px;
  }

.leftImgBox img {
  width: 100%;
}
.whyBox {
    background: #f5f5f5;
    padding: 40px 0px;
}
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .leftImgBox img{
    width: 100%;
  }
}