@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
      :root {

         --primary: #1955b0;
         --secondary: #1a66b8;
         --dark: #345a82;

         --gradient: linear-gradient(135deg,
               #1955b0 0%,
               #1a66b8 50%,
               #345a82 100%);

         --text: #1d2939;
         --light: #667085;
         --border: #dbe7ff;
         --bg: #f8fbff;

      }
      .hero-section {
         position: relative;
         padding: 40px 0;
         overflow: hidden;
      }

      .hero-section::before {
         content: "";
         position: absolute;

         width: 450px;
         height: 450px;

         background: rgba(25, 85, 176, .08);

         border-radius: 50%;

         left: -180px;
         top: -180px;

         filter: blur(30px);
      }

      a {
         text-decoration: none !important;
      }

      .hero-section::after {
         content: "";
         position: absolute;

         width: 500px;
         height: 500px;

         background: rgba(26, 102, 184, .08);

         border-radius: 50%;

         right: -220px;
         bottom: -220px;

         filter: blur(30px);
      }
      .hero-badge {

         display: inline-flex;
         align-items: center;
         gap: 8px;
         background: #fff;
         border: 1px solid var(--border);
         padding: 10px 18px;
         border-radius: 50px;
         color: var(--primary);
         font-size: 14px;
         font-weight: 600;
      }
      .hero-badge i {
         color: var(--primary);
      }
      .hero-title span {

         background: var(--gradient);

         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
      }
      .hero-desc {

         margin-top: 18px;
      }
      .platform-tabs {

         display: flex;

         gap: 15px;

         margin-top: 30px;
      }

      .platform-btn {

         border: none;

         padding: 13px 28px;

         border-radius: 12px;

         background: #fff;

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

         font-size: 15px;

         font-weight: 600;

         transition: .35s;

         cursor: pointer;
      }

      .platform-btn i {
         margin-right: 8px;
      }

      .platform-btn.active {

         background: var(--gradient);

         color: #fff;

         border-radius: 12px;

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

         font-size: 15px;

         font-weight: 600;

         box-shadow:
            0 15px 35px rgba(25, 85, 176, .18);
      }

      .platform-btn:hover {
         transform: translateY(-3px);


         box-shadow:
            0 15px 35px rgba(25, 85, 176, .18);
         padding: 13px 28px;

         border-radius: 12px;

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

         font-size: 15px;

         font-weight: 600;

         transition: .35s;

         cursor: pointer;
      }
      .hero-buttons {

         display: flex;

         gap: 16px;

         margin-top: 30px;
      }

      .download-btn {

         background: var(--gradient);

         color: #fff;

         padding: 15px 30px !important;

         border-radius: 12px;

         font-weight: 700;

         font-size: 15px;

         transition: .3s;
      }

      .download-btn:hover {

         color: #fff;

         transform: translateY(-3px);
      }

      .buy-btn {

         border: 2px solid var(--primary);

         color: var(--primary);

         padding: 15px 30px;

         border-radius: 12px;

         font-weight: 700;

         font-size: 15px;

         transition: .3s;
      }

      .buy-btn:hover {

         background: var(--gradient);

         color: #fff;

         border-color: transparent;
      }
      .hero-rating {

         display: flex;

         align-items: center;

         gap: 12px;

         margin-top: 28px;

         color: var(--light);

         font-size: 15px;
      }

      .stars {

         color: #ffb400;

         letter-spacing: 2px;
      }
      .hero-links {

         display: flex;

         gap: 25px;

         flex-wrap: wrap;

         margin-top: 28px;
      }

      .hero-links a {

         color: var(--light);

         font-size: 15px;

         font-weight: 600;

         transition: .3s;
      }

      .hero-links a:hover {
         color: var(--primary);
      }

      .hero-links i {

         color: var(--primary);

         margin-right: 6px;
      }
      .converter-card {

         position: relative;

         background: #fff;

         border: 1px solid #e7efff;

         border-radius: 22px;

         padding: 30px;

         box-shadow:
            0 25px 60px rgba(25, 85, 176, .10);

         overflow: hidden;
      }
      .card-tag {

         display: inline-block;

         padding: 8px 18px;

         border-radius: 30px;

         background: rgba(25, 85, 176, .08);

         color: var(--primary);

         font-size: 12px;

         font-weight: 700;

         letter-spacing: 1px;

         text-transform: uppercase;

         margin-bottom: 18px;
      }
      .converter-card h3 {

         font-size: 22px;

         font-weight: 700;

         color: var(--text);

         margin-bottom: 28px;
      }
      .mail-group {

         margin-bottom: 28px;
      }

      .mail-group h6 {

         font-size: 14px;

         font-weight: 700;

         color: #4b5563;

         margin-bottom: 14px;
      }
      .pill-group {

         display: flex;

         flex-wrap: wrap;

         gap: 10px;
      }

      .pill-group span {

         padding: 8px 15px;

         background: #f7faff;

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

         border-radius: 10px;

         font-weight: 600;

         color: var(--primary);

         transition: .3s;

         cursor: pointer;
      }

      .pill-group span:hover {

         background: var(--gradient);

         color: #fff;

         border-color: transparent;
      }
        .pipeline {

         position: relative;

         height: 120px;

         display: flex;

         justify-content: center;

         align-items: center;

         margin: 30px 0;
      }
      .pipeline-line {

         width: 100%;

         height: 4px;

         border-radius: 50px;

         background: repeating-linear-gradient(to right,
               #1955b0 0px,
               #1955b0 10px,
               transparent 10px,
               transparent 20px);

         opacity: .30;
      }
      .converter {

         position: absolute;

         left: 50%;
         top: 50%;

         transform: translate(-50%, -50%);

         width: 82px;
         height: 82px;

         border-radius: 22px;

         background: var(--gradient);

         display: flex;

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

         box-shadow:
            0 20px 40px rgba(25, 85, 176, .25);

         z-index: 5;
      }

      .converter i {

         font-size: 38px;

         color: #fff;
      }
      .stats {

         display: grid;

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

         gap: 18px;

         margin-top: 30px;

         padding-top: 25px;

         border-top: 1px solid #edf2ff;
      }

      .stats div {
         text-align: center;
      }

      .stats h4 {

         font-size: 24px;

         font-weight: 800;

         margin-bottom: 6px;

         background: var(--gradient);

         -webkit-background-clip: text;

         -webkit-text-fill-color: transparent;
      }

      .stats p {

         font-size: 13px;

         color: var(--light);
      }
      .pipeline-line {

         animation: dashMove 1s linear infinite;
      }

      @keyframes dashMove {

         from {
            background-position: 0 0;
         }

         to {
            background-position: 20px 0;
         }
      }
      .cube {

         position: absolute;

         width: 10px;
         height: 10px;

         border-radius: 3px;

         background: var(--gradient);

         top: 50%;

         transform: translateY(-50%);

         box-shadow:
            0 0 10px rgba(25, 85, 176, .4);
      }
      .cube1 {
         animation: leftCube 2.5s linear infinite;
      }

      .cube2 {
         animation: leftCube 2.5s linear 1s infinite;
      }

      @keyframes leftCube {

         0% {
            left: 8%;
            opacity: 0;
         }

         15% {
            opacity: 1;
         }

         100% {
            left: 44%;
            opacity: 0;
         }
      }
      .cube3 {
         animation: rightCube 2.5s linear infinite;
      }

      .cube4 {
         animation: rightCube 2.5s linear 1s infinite;
      }

      @keyframes rightCube {

         0% {
            left: 56%;
            opacity: 0;
         }

         15% {
            opacity: 1;
         }

         100% {
            left: 92%;
            opacity: 0;
         }
      }
      .converter {
         overflow: visible;
      }

      .converter::after {

         content: "";

         position: absolute;

         inset: -8px;

         border-radius: 26px;

         border: 2px solid rgba(25, 85, 176, .20);

         animation: pulseGlow 2s ease infinite;
      }

      @keyframes pulseGlow {

         from {

            transform: scale(.95);

            opacity: .6;
         }

         to {

            transform: scale(1.3);

            opacity: 0;
         }
      }
      .download-btn,
      .buy-btn,
      .platform-btn,
      .pill-group span {

         transition: .35s ease;
      }

      .download-btn:hover,
      .buy-btn:hover,
      .platform-btn:hover {

         transform: translateY(-3px);
      }

      .pill-group span:hover {

         transform: translateY(-2px);
      }


      .converter-card {

         transition: .35s ease;
      }

      .converter-card:hover {

         transform: translateY(-6px);

         box-shadow:
            0 35px 70px rgba(25, 85, 176, .15);
      }

      .stats-section {
         background: #f8fbff;
      }

      .stat-box {
         background: #fff;
         border: 1px solid #e8eef8;
         border-radius: 16px;
         padding: 30px 15px;
         transition: 0.3s ease;
         height: 100%;
      }

      .stat-box:hover {
         transform: translateY(-8px);
         box-shadow: 0 15px 35px rgba(25, 85, 176, 0.12);
         border: 1px solid #1955b0;
      }

      .stat-icon {
         width: 65px;
         height: 65px;
         margin: 0 auto 18px;
         border-radius: 50%;
         background: #1955b0;
         color: #fff;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 28px;
      }

      .stat-box h3 {
         font-size: 23px;
         font-weight: 700;
         color: #1955b0;
         margin-bottom: 8px;
      }

      .stat-box p {
         font-size: 15px;
         color: #555;
         margin: 0;
         line-height: 1.5;
      }

      .mail-data-section {
         background: #f7f9fc;
      }

      .mail-data-box {
         max-width: 1100px;
         margin: 0 auto;
         padding: 30px;

         background: #ffffff;

         border: 1px solid #345a82;
         border-radius: 16px;

         box-shadow: 0 8px 25px rgba(13, 35, 68, 0.12);
      }
      .mail-format-tabs {
         display: flex;
         justify-content: center;
         gap: 15px;

         margin-bottom: 25px;
      }

      .mail-format-tab {
         flex: 1;
         max-width: 300px;

         min-height: 70px;

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

         gap: 10px;

         padding: 15px 20px;

         background: #f4f7fa;

         border: 1px solid #345a82;
         border-radius: 10px;

         color: #0d2344;

         font-size: 16px;
         font-weight: 700;

         box-shadow: 0 4px 12px rgba(13, 35, 68, 0.06);
      }

      .mail-format-tab i {
         color: #345a82;
         font-size: 20px;
      }
      .mail-format-tab.active {
         background: #1955b0;
         border-color: #1955b0;
         color: #ffffff;
      }

      .mail-format-tab.active i {
         color: #ffffff;
      }
      .mail-items-scroll {
         width: 100%;

         overflow-x: auto;
         overflow-y: hidden;

         padding-bottom: 10px;

         scrollbar-width: thin;
         scrollbar-color: #345a82 #edf1f5;
      }
      .mail-items-scroll::-webkit-scrollbar {
         height: 7px;
      }

      .mail-items-scroll::-webkit-scrollbar-track {
         background: #edf1f5;
         border-radius: 10px;
      }

      .mail-items-scroll::-webkit-scrollbar-thumb {
         background: #345a82;
         border-radius: 10px;
      }

      .mail-items-scroll::-webkit-scrollbar-thumb:hover {
         background: #0d2344;
      }
      .mail-items-row {
         display: flex;
         flex-wrap: nowrap;

         width: max-content;
         min-width: 100%;
      }
      .mail-item {
         flex: 0 0 130px;

         min-height: 105px;

         padding: 12px 15px;

         display: flex;
         flex-direction: column;

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

         text-align: center;

         border-right: 1px solid #dce4eb;
      }

      .mail-item:last-child {
         border-right: 0;
      }

      .mail-item img {
         width: 40px;
         height: 40px;

         object-fit: contain;

         margin-bottom: 9px;
      }

      .mail-item span {
         color: #0d2344;

         font-size: 14px;
         font-weight: 600;

         line-height: 1.4;

         white-space: nowrap;
      }


      /* Hover */

      .mail-item:hover {
         background: #f5f8fb;
      }

      .mail-item:hover span {
         color: #345a82;
      }
      @media (max-width: 767px) {

         .mail-data-box {
            padding: 20px 15px;
         }

         .mail-format-tabs {
            gap: 8px;
         }

         .mail-format-tab {
            min-height: 60px;
            padding: 10px;
            font-size: 13px;
         }

         .mail-format-tab i {
            font-size: 16px;
         }

         .mail-item {
            flex-basis: 120px;
         }
      }

      .comparison-section {
         background: #f7f9fc;
      }

      .comparison-box {
         max-width: 1150px;
         margin: 0 auto;

         background: #ffffff;

         border: 1px solid #d8e1ea;
         border-radius: 16px;

         overflow: hidden;

         box-shadow: 0 8px 30px rgba(13, 35, 68, 0.10);
      }
      .comparison-header {
         display: grid;
         grid-template-columns: 1fr 1fr;
      }

      .comparison-heading {
         min-height: 50px;

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

         gap: 12px;

         padding: 20px;

         text-align: center;
      }

      .comparison-heading i {
         font-size: 22px;
      }

      .comparison-heading h3 {
         margin: 0;

         font-size: 20px;
         font-weight: 700;
      }

      .format-heading {
         background: #edf2f6;
         color: #0d2344;
      }

      .format-heading i {
         color: #345a82;
      }

      .unified-heading {
         background: #1955b0;
         color: #ffffff;
      }

      .unified-heading i {
         color: #ffffff;
      }

      .comparison-row {
         display: grid;
         grid-template-columns: 1fr 1fr;

         border-top: 1px solid #dce4eb;
      }
      .comparison-column {
         display: flex;
         align-items: flex-start;

         gap: 9px;

         padding: 15px 23px;

         min-height: 104px;
      }

      .format-column {
         background: #ffffff;

         border-right: 1px solid #dce4eb;
      }

      .unified-column {
         background: #f5f9fc;
      }
      .comparison-icon {
         flex: 0 0 42px;

         width: 42px;
         height: 42px;

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

         border-radius: 9px;

         font-size: 18px;
      }

      .format-column .comparison-icon {
         background: #edf2f6;
         color: #345a82;
      }

      .unified-column .comparison-icon {
         background: #1955b0;
         color: #ffffff;
      }
      .comparison-column h4 {
         margin: 0 0 8px;

         color: #0d2344;

         font-size: 17px;
         line-height: 1.4;
         font-weight: 700;
      }

      .comparison-column p {
         margin: 0;

         color: #667085;

         font-size: 14px;
         line-height: 1.7;
      }
      .comparison-row {
         transition: all 0.3s ease;
      }

      .comparison-row:hover .format-column {
         background: #fafcff;
      }

      .comparison-row:hover .unified-column {
         background: #eef5fa;
      }

      .comparison-row:hover .comparison-icon {
         transform: translateY(-2px);
      }

      .comparison-icon {
         transition: transform 0.3s ease;
      }
      @media (max-width: 767px) {

         .comparison-header {
            grid-template-columns: 1fr;
         }

         .comparison-heading {
            min-height: 50px;
         }

         .comparison-row {
            grid-template-columns: 1fr;
         }

         .format-column {
            border-right: 0;
            border-bottom: 1px dashed #dce4eb;
         }

         .comparison-column {
            min-height: auto;
            padding: 22px 18px;
         }

         .comparison-heading h3 {
            font-size: 17px;
         }
      }

      .mail-challenges-section {
         background: #f7fbff;
      }


      .mail-challenges-subtitle {
         margin: 0;
      }
      .mail-challenges-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 22px;
      }
      .mail-challenge-card {
         position: relative;

         display: flex;
         flex-direction: column;

         min-height: 440px;

         padding: 25px 22px;


         border: 1px solid #c9e0ef;
         border-radius: 14px;

         box-shadow: 0 5px 18px rgba(13, 35, 68, 0.07);

         transition: all 0.3s ease;
      }

      .mail-challenge-card:hover {
         transform: translateY(-5px);

         background: #ffffff;

         border-color: #345a82;

         box-shadow: 0 12px 28px rgba(13, 35, 68, 0.14);
      }
      .challenge-icon {
         width: 52px;
         height: 52px;

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

         margin-bottom: 18px;

         background: #ffff;
         color: #1955b0;

         border-radius: 12px;

         font-size: 21px;

         transition: all 0.3s ease;
      }

      .mail-challenge-card:hover .challenge-icon {
         background: #ffff;
      }
      .mail-challenge-card h3 {
         color: #0d2344;

         font-size: 18px;
         line-height: 1.4;

         font-weight: 700;

         margin: 0 0 10px;
      }
      .challenge-format {
         display: inline-block;

         align-self: flex-start;

         margin-bottom: 14px;
         padding: 5px 10px;

         background: #d8edf9;

         border: 1px solid #b9d8e9;
         border-radius: 5px;

         color: #345a82;

         font-size: 12px;
         font-weight: 700;

         line-height: 1.4;
      }

      .mail-challenge-card p {
         margin: 0;
      }

      .mail-challenge-card p a {
         color: #0d6efd;
         font-weight: 700;
         text-decoration: none;
      }

      .mail-challenge-card p a:hover {
         color: #345a82;
         text-decoration: underline;
      }
      @media (max-width: 991px) {

         .mail-challenges-grid {
            grid-template-columns: repeat(2, 1fr);
         }

         .mail-challenge-card {
            min-height: 400px;
         }
      }
      @media (max-width: 575px) {

         .mail-challenges-grid {
            grid-template-columns: 1fr;
         }

         .mail-challenge-card {
            min-height: auto;
         }

         .mail-challenges-title {
            font-size: 25px;
         }
      }

      .uc-block {
         padding: 25px 25px;
         height: 100%;
         position: relative;
         box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
      }

      .uc-block::before,
      .uc-block::after {
         position: absolute;
         content: '';
         height: 60px;
         width: 60px;
         transition: .5s ease;
         z-index: -1;
      }

      .uc-block::before {
         border-top: 2px solid #1955b0;
         border-left: 2px solid #1955b0;
         left: 0;
         top: 0;
      }
      .uc-block::after {
         border-bottom: 2px solid #1955b0;
         border-right: 2px solid #1955b0;
         right: 0;
         bottom: 0;
      }
      .uc-block:hover::before,
      .uc-block:hover::after {
         height: 100%;
         width: 100%;
      }

      .data-preservation-title {
         display: flex;
         align-items: center;
         justify-content: center;

         margin-bottom: 15px;

         color: #0d2344;
         font-size: 18px;
         font-weight: 700;
      }

      .data-preservation-title::before,
      .data-preservation-title::after {
         content: "";
         width: 45px;
         height: 1px;
         background: #345a82;
         margin: 0 10px;
      }

      .data-preservation-title span {
         white-space: nowrap;
      }

      .auth-connect-section {
         background: #f5f9fc;
      }

      .section-label {
         display: inline-block;
         padding: 4px 12px;
         border: 1px solid #345a82;
         border-radius: 20px;
         color: #345a82;
         font-size: 10px;
         font-weight: 700;
         letter-spacing: .5px;
      }

      .auth-heading {
         margin: 8px 0 5px;
         color: #0d2344;
         font-size: 30px;
         font-weight: 700;
      }

      .auth-subheading {
         max-width: 650px;
         margin: 0 auto;
         color: #667789;
         font-size: 14px;
      }
      .auth-card {
         height: 100%;
         min-height: 285px;
         padding: 22px;

         background: #ffffff;

         border: 1px solid #dbe5ed;
         border-radius: 8px;

         box-shadow: 0 4px 15px rgba(13, 35, 68, 0.06);

         transition: all .3s ease;
      }

      .auth-card:hover {
         transform: translateY(-4px);

         border-color: #345a82;

         box-shadow: 0 10px 25px rgba(13, 35, 68, 0.12);
      }
      .auth-icon {
         width: 42px;
         height: 42px;

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

         margin-bottom: 14px;

         background: #eaf3fa;

         border-radius: 7px;

         color: #1955b0;

         font-size: 19px;
      }

      .auth-card h3 {
         margin-bottom: 8px;
      }

      .auth-card p {
         min-height: 70px;

         margin-bottom: 12px;
      }
      .auth-tags {
         display: flex;
         flex-wrap: wrap;
         gap: 6px;

         margin-bottom: 14px;
      }

      .auth-tags span {
         display: inline-block;
         padding: 9px 12px;
         background: #f1f6fa;
         border: 1px solid #dce7ef;
         border-radius: 4px;
         color: #345a82;
         font-size: 13px;
         font-weight: 600;

      }
      .auth-link {
         display: inline-block;

         color: #345a82;

         font-size: 11px;
         font-weight: 600;

         text-decoration: none;
      }

      .auth-link:hover {
         color: #0d2344;
      }

      .auth-link i {
         margin-left: 4px;
      }
      @media (max-width: 767px) {

         .auth-heading {
            font-size: 24px;
         }

         .auth-card {
            min-height: auto;
         }

         .auth-card p {
            min-height: auto;
         }
      }

      .advanced-filters-section {
         background: #f5f9fc;
      }

      .advanced-filters-section h2 {
         color: #0d2344;
         font-size: 30px;
         font-weight: 700;
      }

      .advanced-filters-section .text-center>p {
         color: #667789;
      }
      .filter-flip-card {
         width: 100%;
         height: 270px;
         perspective: 1000px;
      }

      .filter-flip-inner {
         position: relative;
         width: 100%;
         height: 100%;

         transition: transform 0.6s ease;
         transform-style: preserve-3d;
      }

      .filter-flip-card:hover .filter-flip-inner {
         transform: rotateY(180deg);
      }
      .filter-front,
      .filter-back {
         position: absolute;

         width: 100%;
         height: 100%;

         padding: 25px;

         border-radius: 12px;

         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;

         border: 1px solid #d9e5ee;

         box-shadow: 0 5px 18px rgba(13, 35, 68, 0.08);
      }

      .filter-front {
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;

         text-align: center;

         background: #ffffff;
      }

      .filter-front i {
         width: 55px;
         height: 55px;

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

         margin-bottom: 18px;

         background: #e8f2fa;

         border-radius: 10px;

         color: #1955b0;

         font-size: 23px;
      }

      .filter-front h3 {
         margin: 0 0 12px;

         color: #0d2344;

         font-size: 17px;
         font-weight: 700;
         line-height: 1.4;
      }

      .filter-front span {
         color: #7890a5;

         font-size: 11px;
      }
      .filter-back {
         display: flex;
         flex-direction: column;
         justify-content: center;

         background: #1955b0;

         transform: rotateY(180deg);
      }

      .filter-back h3 {
         margin-bottom: 12px;

         color: #ffff;

         font-size: 17px;
         font-weight: 700;
      }

      .filter-back p {
         margin: 0;

         color: #ffff;

         font-size: 13px;
         line-height: 1.7;
      }

      .filter-flip-card:hover .filter-front,
      .filter-flip-card:hover .filter-back {
         border-color: #1955b0;
      }
      @media (max-width: 767px) {

         .advanced-filters-section h2 {
            font-size: 24px;
         }

         .filter-flip-card {
            height: 250px;
         }

         .filter-front,
         .filter-back {
            padding: 20px;
         }
      }

      .permanent-shadow-box {
         background: #ffffff;
         border: 1px solid #345a82;
         border-radius: 10px;
         padding: 25px;

         /* Permanent shadow */
         box-shadow: 0 5px 18px rgba(13, 35, 68, 0.15);

         /* Keeps shadow visible */
         transition: none;
      }

      .mailbox-mapping-section {
         background: #f7fafc;
      }

      .mapping-heading {
         margin-bottom: 8px;
      }

      .mapping-subheading {
         max-width: 750px;
         margin: 0 auto;
      }
      .mailbox-table-wrapper {
         margin-top: 30px;
         background: #ffffff;
         border: 1px solid #345a82;
         border-radius: 10px;
         overflow: hidden;

         box-shadow: 0 6px 20px rgba(13, 35, 68, 0.12);
      }
      .mailbox-mapping-table {
         width: 100%;
         border-collapse: collapse;
         margin: 0;
      }
      .mailbox-mapping-table thead th {
         padding: 15px 20px;

         background: #0d2344;
         color: #ffffff;

         font-size: 15px;
         font-weight: 600;

         text-align: left;
      }
      .mailbox-mapping-table tbody td {
         padding: 14px 20px;

         border-bottom: 1px solid #dce5ec;

         color: #34495e;

         font-size: 14px;
         font-weight: 500;
      }
      .mailbox-mapping-table tbody tr:last-child td {
         border-bottom: none;
      }
      .mailbox-mapping-table tbody td:first-child {
         color: #0d2344;
         font-weight: 600;
      }
      .mapping-arrow {
         display: inline-block;
         margin-right: 8px;

         color: #1955b0;

         font-size: 17px;
         font-weight: 600;
      }
      .mailbox-mapping-table tbody tr:hover {
         background: #eef6fb;
      }
      @media (max-width: 767px) {

         .mailbox-table-wrapper {
            overflow-x: auto;
         }

         .mailbox-mapping-table {
            min-width: 650px;
         }

         .mapping-heading {
            font-size: 23px;
         }
      }

      .mapping-section {
         background: #f5f9fc;
      }

      .mapping-section h2 {
         color: #0d2344;
         font-size: 30px;
         font-weight: 700;
         margin-bottom: 10px;
      }

      .mapping-section>.container>.text-center p {
         max-width: 800px;
         margin: 0 auto;
         color: #667789;
         font-size: 15px;
         line-height: 1.6;
      }
      .mapping-comparison {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 25px;
         margin-top: 35px;
      }
      .mapping-column {
         background: #ffffff;
         border: 1px solid #345a82;
         border-radius: 12px;
         padding: 0 20px 20px;
         box-shadow: 0 6px 20px rgba(13, 35, 68, 0.12);
      }
      .mapping-header {
         margin: 0 -20px 5px;
         padding: 18px 22px;
         background: #1955b0;
         border-radius: 11px 11px 0 0;
         text-align: center;
      }

      .mapping-header h3 {
         margin: 0;
         color: #ffffff;
         font-size: 20px;
         font-weight: 600;
      }
      .mapping-item {
         padding: 18px 5px;
         border-bottom: 1px solid #e2eaf0;
      }

      .mapping-item:last-child {
         border-bottom: none;
      }

      .mapping-item h4 {
         margin: 0 0 7px;
         font-size: 16px;
         font-weight: 700;
      }

      .mapping-item p {
         margin: 0;
         color: #536779;
         font-size: 13px;
         line-height: 1.7;
      }
      .mapping-item:hover {
         background: #f8fbfd;
      }
      @media (max-width: 767px) {

         .mapping-comparison {
            grid-template-columns: 1fr;
         }

         .mapping-section h2 {
            font-size: 24px;
         }

         .mapping-column {
            padding-left: 15px;
            padding-right: 15px;
         }

         .mapping-header {
            margin-left: -15px;
            margin-right: -15px;
         }
      }

      .mail-process-section {
         background: #f5f9fc;
      }

      .mail-process-section h2 {
         margin-bottom: 10px;
      }
      .process-timeline {
         position: relative;
         max-width: 950px;
         margin: 0 auto;
      }
      .process-timeline::before {
         content: "";

         position: absolute;

         top: 30px;
         bottom: 30px;
         left: 35px;

         width: 2px;

         background: #1955b0;
      }
      .process-step {
         position: relative;

         display: flex;
         align-items: center;

         gap: 25px;

         margin-bottom: 25px;
      }

      .process-step:last-child {
         margin-bottom: 0;
      }
      .process-number {
         position: relative;
         z-index: 2;

         flex: 0 0 70px;

         width: 70px;
         height: 70px;

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

         border-radius: 50%;

         background: #1955b0;
         color: #ffffff;

         font-size: 17px;
         font-weight: 700;

         /* Outer spreading color */
         box-shadow:
            0 0 0 8px rgba(25, 85, 176, 0.15),
            0 0 0 14px rgba(25, 85, 176, 0.07);
      }
      .process-card {
         flex: 1;

         background: #ffffff;

         border: 1px solid #d5e2eb;
         border-left: 4px solid #345a82;

         border-radius: 10px;

         padding: 20px 25px;

         box-shadow: 0 5px 16px rgba(13, 35, 68, 0.09);

         transition: all 0.3s ease;
      }
      .process-card:hover {
         border-left-color: #0d2344;

         box-shadow: 0 9px 24px rgba(13, 35, 68, 0.15);

         transform: translateX(5px);
      }
      .process-top {
         display: flex;
         align-items: center;
         gap: 15px;

         margin-bottom: 8px;
      }

      .process-top span {
         padding: 4px 9px;

         background: #e8f2f8;
         color: #345a82;

         border-radius: 4px;

         font-size: 10px;
         font-weight: 700;
         letter-spacing: 0.5px;
      }

      .process-top h3 {
         margin: 0;

         color: #0d2344;

         font-size: 18px;
         font-weight: 700;
      }


      /* Description */

      .process-card p {
         margin: 0;

         color: #536779;

         font-size: 13px;
         line-height: 1.7;
      }
      @media (max-width: 767px) {

         .process-timeline::before {
            left: 25px;
         }

         .process-step {
            gap: 15px;
            align-items: flex-start;
         }

         .process-number {
            flex: 0 0 50px;

            width: 50px;
            height: 50px;

            border-width: 4px;

            font-size: 14px;
         }

         .process-card {
            padding: 17px;
         }

         .process-top {
            display: block;
         }

         .process-top span {
            display: inline-block;
            margin-bottom: 7px;
         }

         .process-top h3 {
            font-size: 16px;
         }

         .process-card p {
            font-size: 12px;
         }
      }

      .nav-tabs {
         border-bottom: none;
         justify-content: center;
         gap: 10px;
      }

      .nav-item {
         margin: 3px 0px 0px 0px;
      }

      .nav-tabs .nav-link {
         border: 1px solid #1955b0;
         background: #f4f7ff;
         color: #1955b0;
         font-weight: 500;
         padding: 10px 22px;
         border-radius: 10px;
         transition: all 0.3s ease;
         position: relative;
      }

      .nav-tabs .nav-link.active {
         background: linear-gradient(135deg, #1955b0, #3a6edc);
         color: #fff;
         box-shadow: 0 6px 15px rgba(25, 85, 176, 0.25);
      }

      .compliance-table-wrapper {
         width: 100%;
         overflow-x: auto;
         border: 1px solid #d8e3ed;
         border-radius: 10px;
         box-shadow: 0 5px 18px rgba(13, 35, 68, 0.08);
      }

      .compliance-table {
         width: 100%;
         min-width: 750px;
         border-collapse: collapse;
         background: #ffffff;
      }

      .compliance-table th {
         background: #1955b0;
         color: #ffffff;
         padding: 15px 18px;
         text-align: left;
         font-size: 15px;
         font-weight: 600;
      }

      .compliance-table td {
         padding: 14px 18px;
         border-bottom: 1px solid #e3ebf2;
         vertical-align: middle;
      }

      .compliance-table tbody tr:nth-child(even) {
         background: #f5f9fc;
      }

      .compliance-table tbody tr:hover {
         background: #eaf3fa;
      }


      .compliance-table tbody tr:last-child td {
         border-bottom: none;
      }

      #clients img {
         width: 98px;
         height: 61px;
         margin: 10px 15px;
         filter: grayscale(1);
      }

      #clients img:hover {
         filter: grayscale(0);
         cursor: pointer;
      }

      .success-story {
         background: #f8fafc;
      }

      .success-story-box {
         background: #fff;
         border: 1px solid #e3e8ee;
         border-radius: 10px;
         padding: 40px;
      }

      .story-label {
         color: #1955b0;
         font-size: 13px;
         font-weight: 700;
         letter-spacing: 1px;
         margin-bottom: 8px;
      }

      .success-story h2 {
         color: #0d2344;
         font-size: 30px;
         font-weight: 700;
         margin-bottom: 0;
      }

      .story-content {
         padding: 20px;
         border-left: 3px solid #1955b0;
         background: #f8fafc;
         height: 100%;
      }

      .story-content h3,
      .business-outcome h3 {
         color: #0d2344;
         font-size: 20px;
         font-weight: 700;
         margin-bottom: 12px;
      }

      .story-content p {
         color: #5f6f7f;
         font-size: 15px;
         line-height: 1.7;
         margin-bottom: 0;
      }

      .business-outcome {
         border-top: 1px solid #e3e8ee;
         padding-top: 25px;
      }

      .outcome-item {
         text-align: center;
         padding: 18px 10px;
         border: 1px solid #e3e8ee;
         border-radius: 8px;
         height: 100%;
      }

      .outcome-item strong {
         display: block;
         color: #1955b0;
         font-size: 28px;
         font-weight: 700;
         margin-bottom: 5px;
      }

      .outcome-item span {
         color: #667585;
         font-size: 13px;
         line-height: 1.4;
      }

      .story-bottom {
         margin-top: 25px;
         padding-top: 20px;
         border-top: 1px solid #e3e8ee;
         text-align: center;
         color: #0d2344;
         font-size: 16px;
         font-weight: 600;
      }

      @media (max-width: 767px) {
         .success-story-box {
            padding: 25px 18px;
         }

         .success-story h2 {
            font-size: 25px;
         }

         .outcome-item strong {
            font-size: 23px;
         }
      }