/* Regular */
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('https://www.weaddo.com/wp-content/themes/zermatt-child/roi-calculator/fonts/gtwalsheimpro-regular-webfont.woff2') format('woff2'),
         url('https://www.weaddo.com/wp-content/themes/zermatt-child/roi-calculator/fonts/gtwalsheimpro-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('https://www.weaddo.com/wp-content/themes/zermatt-child/roi-calculator/fonts/gtwalsheimpro-medium-webfont.woff2') format('woff2'),
         url('https://www.weaddo.com/wp-content/themes/zermatt-child/roi-calculator/fonts/gtwalsheimpro-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Bold */
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('https://www.weaddo.com/wp-content/themes/zermatt-child/roi-calculator/fonts/gtwalsheimpro-bold-webfont.woff2') format('woff2'),
         url('https://www.weaddo.com/wp-content/themes/zermatt-child/roi-calculator/fonts/gtwalsheimpro-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Ultra Bold */
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('https://www.weaddo.com/wp-content/themes/zermatt-child/roi-calculator/fonts/gtwalsheimpro-ultrabold-webfont.woff2') format('woff2'),
         url('https://www.weaddo.com/wp-content/themes/zermatt-child/roi-calculator/fonts/gtwalsheimpro-ultrabold-webfont.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Black */
@font-face {
    font-family: 'GT Walsheim Pro';
    src: url('https://www.weaddo.com/wp-content/themes/zermatt-child/roi-calculator/fonts/gtwalsheimpro-black-webfont.woff2') format('woff2'),
         url('https://www.weaddo.com/wp-content/themes/zermatt-child/roi-calculator/fonts/gtwalsheimpro-black-webfont.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* Apply globally */
body {
    font-family: 'GT Walsheim Pro', sans-serif;
    font-weight: 400;
}

/* Headings */
h1, h2, h3, h4 {
    font-weight: 700;
}


/*
      p, span, h6, h5{    font-family: 'gt_walsheim_proregular' !important;
}
*/

    
     

      strong {
      	font-weight: 700;
      	/* Bold */
      }

      .navbar {
           transition: all 0.3s ease-in-out;
        width: 100%;
        z-index: 1030;
      	padding: 15px 30px;
      }

      .navbar-brand img {
      	height: 40px;
      }

      .nav-link {
      	font-weight: 500;
      	margin: 0 10px;
      	font-size: 16px;
      	color: #282828;
          cursor: pointer;
      }

            /* The class added by JavaScript on scroll */
      .navbar-scrolled {
        position: fixed;
        top: 0;
        left: 0;
        animation: slideDown 0.3s ease-out forwards;
      }
      /* Smooth dropdown animation */
      @keyframes slideDown {
        from {
          transform: translateY(-100%);
        }
        to {
          transform: translateY(0);
        }
      }



      .header-bg {
      	background-color: rgba(255, 255, 255, .7);
      	-webkit-backdrop-filter: blur(8px);
      	backdrop-filter: blur(8px);
      	border-radius: 50px;
      	padding: 10px;
      }


      .blank-btn {
      	width: auto;
      	padding: 10px 40px;
      	color: #262156;
      	border: 1px solid #262156;
      	border-radius: 50px;
      	display: inline-block;
      	text-decoration: none;
          font-size: 16px;
          transition: 200ms;
      }
            .blank-btn:hover {
      	background: #262156;
                color: white;
      }


      .hero-banner {
      	text-align: center;
      	padding: 50px 0px 100px 0px;
      }


      .hero-banner p {
      	font-size: 16px;
      	color: #2E228A;
      	text-transform: uppercase;
      	font-weight: 600;
      }

      .hero-banner h1 {
      	font-weight: 900;
      	color: #2E228A;
      	font-size: 65px;
      	width: 80%;
      	margin: auto;
          line-height: 70px;
      }

      .hero-banner h1 span {
      	background: linear-gradient(270deg, #262156, #2DB78F, #262156);
      	background-size: 200% 200%;
      	-webkit-background-clip: text;
      	-webkit-text-fill-color: transparent;
      	display: block;
      	animation: gradientWave 10s ease infinite;
      }

      @keyframes gradientWave {
      	0% {
      		background-position: 0% 50%;
      	}
      	50% {
      		background-position: 100% 50%;
      	}
      	100% {
      		background-position: 0% 50%;
      	}
      }

      .hero-banner h2 {
      	font-size: 16px;
      	width: 60%;
      	margin: auto;
      	font-weight: 400;
      	margin-top: 20px;
      	color: #282828;
      }

            .fill-btn{
                padding: 10px 40px;
                border-radius: 50px;
                color: white;
                background: #262156;
                border: 1px solid #262156;
                font-size: 16px;
                display: inline-block;
                position: relative;
                overflow: hidden;
      	      text-decoration: none;
            }

            .banner-btn{
                margin-top: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 20px;
            }


            .banner-btn {
          margin-top: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 20px;
      }
      .banner-btn .txt-2 {
          position: absolute;
          top: 40px;
          left: 50%;
          width: 100%;
          transform: translate(-50%, 0px);
          transition: 200ms;
      }

            .txt-1 {
                position: relative;
                transition: 200ms;
            }

            .txt-2 {
                transition: 200ms;
            }

            a.fill-btn:hover .txt-1 {
               top:-50px;
      }

            a.fill-btn:hover .txt-2 {
          top:10px;
      }




            .value-card {
          padding: 20px;
          border: 1px solid #D9D9D9;
                border-radius: 20px 0px 0px 20px;
                min-height: 345px;
      }
            .value-card h3 {
          font-size: 22px;
          color: #282828;
                font-weight: 600;
      }
            .value-card p {
          font-size: 14px;
          color: #717171;
      }
            .value-card ul {
          padding: 0px;
                margin: 0px;
      }

            .value-card ul li{
         list-style-type: none;
                display: flex;
                margin: 15px 0px;
                gap:10px;
                align-items: center;
      }

            .value-card-mid{
                background-image: linear-gradient(139deg, #262156, #2DB78F);
            }
            .value-card-mid h3{
                text-align: center;
                color: white !important;
                margin-bottom: 25px;
            }

            .value-card-mid li {
          padding: 15px;
          border-radius: 10px;
          border: 1px solid #ffffff30;
                 color: white;
      }
            .value-card-mid  {
         border-radius: 20px;
                padding: 30px 20px;
      }

            .custom-row {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          align-items: center;
      }

            .value-card-right{
                border-radius: 0px 20px 20px 0px !important;
            }

            .value-card-right li span {
          padding: 5px 15px;
          background-image: linear-gradient(45deg, #262959, #2db28d);
          color: white;
          border-radius: 50px;
                font-size: 14px;
      }

            .ptb-100{
                padding: 100px 0px;
            }

            .section-header p{
                font-size: 16px;
                color: #2E228A;
                font-weight: 500;
            }

            h2.main-heading {
          font-size: 36px;
          color: #2E228A;
                margin-bottom: 15px;
          font-weight: 700;
      }

            .section-header h6 {
          width: 70%;
          margin-bottom: 20px;
          font-weight: 400;
      }

            .section-header {
          margin-bottom: 30px;
      }


            .benchmark-card h3 {
          font-size: 20px;
                font-weight: bold;
      }

            .benchmark-section .row{
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap:20px;
            }
            .benchmark-card p {
          font-size: 14px;
          margin: 15px 0px;
      }
        
        .benchmark-slider .owl-stage .owl-item{
            border-radius: 20px;
            overflow: hidden;
        }

           .benchmark-slider .owl-stage .owl-item:nth-child(1) {
          background: #FFEDD4;
      }


           .benchmark-slider .owl-stage .owl-item:nth-child(2) {
          background: #F0DEFF;
      }


           .benchmark-slider .owl-stage .owl-item:nth-child(3) {
          background: #E1FFF6;
      }


           .benchmark-slider .owl-stage .owl-item:nth-child(4) {
          background: #F3F7FF;
      }
           .benchmark-slider .owl-stage .owl-item:nth-child(5) {
          background: #FFEDD4;
      }


           .benchmark-slider .owl-stage .owl-item:nth-child(6) {
          background: #F0DEFF;
      }


           .benchmark-slider .owl-stage .owl-item:nth-child(7) {
          background: #E1FFF6;
      }


           .benchmark-slider .owl-stage .owl-item:nth-child(8) {
          background: #F3F7FF;
      }
            .benchmark-cost ul {
          margin-bottom: 20px;
      }


            .benchmark-card{
                 padding: 20px;

          border-radius: 10px;
            }


            .benchmark-card a {
          font-size: 12px;
          width: 100%;
          text-align: center;
      }
            .benchmark-cost ul li {
          display: flex;
      }
            .benchmark-cost ul{
                padding: 0px;
                margin: 0px;
            }
            .benchmark-cost ul li {
          display: flex;
          background: white;
          margin-bottom: 10px;
          border-radius: 10px;
          padding: 5px 10px;
          font-size: 13px;
          justify-content: space-between;
      }

            .benchmark-cost ul li span {
          color: #2e228a;
          font-weight: 600;
                text-align: right;
      }
            .benchmark-cost {
          margin-bottom: 20px;
      }




               /* Top clickable text */
              .toggle-text {
                  color: #6c757d;
                  font-size: 0.85rem;
                  cursor: pointer;
                  transition: color 0.2s ease-in-out;
                  user-select: none;
              }

              .toggle-text:hover {
                  color: #343a40;
              }

              /* Section Headings & Text */
              .section-title {
                  color: #2E228A; /* Deep Purple */
                  font-weight: 700;
                  letter-spacing: -0.5px;
              }

              .section-desc {
                  color: #4a4a4a;
                  font-size: 0.95rem;
                  font-weight: 600;
                  line-height: 1.6;
              }

              /* Light Blue Cards */
              .info-card {
                  background-color: #f4f6fc; /* Very light blue/purple bg */
                  border: none;
                  border-radius: 12px;
                  box-shadow: none;
              }

              .info-card h5 {
                  color: #3E3294; /* Purple tone */
                  font-weight: 700;
                  margin-bottom: 15px;
                  font-size: 1.1rem;
              }

              .info-card p {
                  color: #4a4a4a;
                  font-size: 0.85rem;
                  line-height: 1.6;
                  margin-bottom: 0;
                  font-weight: 600;
              }

              /* Bottom Gradient Card */
              .gradient-card-behind {
                  background: linear-gradient(90deg, #2a2559 0%, #2AB587 100%);
                  border: none;
                  border-radius: 12px;
                  color: white;
              }

              .gradient-card-behind h5 {
                  font-weight: 700;
                  margin-bottom: 10px;
                  font-size: 1.1rem;
              }

              .gradient-card-behind p {
                  font-size: 0.85rem;
                  margin-bottom: 0;
                  font-weight: 500;
                  color: rgba(255, 255, 255, 0.9);
              }
            .gradient-card-behind {
          margin-top: 30px;
      }



                /* Typography */
              .subtitle {
                  color: #2E228A;
                  font-weight: 700;
                  font-size: 0.85rem;
                  letter-spacing: 0.5px;
              }

              .main-title {
                  color: #2E228A;
                  font-weight: 800;
                  letter-spacing: -0.5px;
                  font-size: 2.5rem;
                  max-width: 800px;
              }

              /* Main Card */
              .wrapper-card {
                  border-radius: 16px;
                  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
                  border: none;
              }

              /* Table header styling */
              .role-header {
                  background-color: #f8f9ff;
                  font-weight: 700;
                  color: #1c1c1c;
                  padding: 15px;
                  font-size: 14px;
              }

              /* Role tabs styling */
              .role-item {
                  padding: 15px;
                  border-bottom: 1px solid #f1f1f1;
                  font-size: 0.85rem;
                  color: #4a4a4a;
                  cursor: pointer;
                  transition: all 0.2s ease-in-out;
                  font-weight: 500;
              }

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

              .role-item:hover {
                  background-color: #f8f9ff;
                  color: #2E228A;
              }

              /* Active Tab state */
              .role-item.active {
                  background-color: #f0f2fb;
                  color: #2E228A;
                  font-weight: 700;
                  border-left: 3px solid #5548c7;
              }

              /* Bottom Gradient Card */
              .gradient-panel {
                  background: linear-gradient(90deg, #2a2559 0%, #29ab83 100%);
                  border-radius: 16px;
                  padding: 24px;
                  border: none;
              }

              .theme-card, .metric-card {
                  background-color: white;
                  border-radius: 12px;
                  padding: 20px;
                  height: 100%;
                  border: none;
              }

              .card-heading {
                  color: #3f3590;
                  font-weight: 700;
                  font-size: 0.8rem;
                  letter-spacing: 0.5px;
                  margin-bottom: 12px;
              }

              .card-list {
                  list-style-type: none;
                  padding-left: 0;
                  margin: 0;
                  font-size: 0.85rem;
                  color: #333;
                  font-weight: 500;
              }

              .card-list li {
                  position: relative;
                  padding-left: 15px;
                  margin-bottom: 8px;
              }

              .card-list li::before {
                  content: "•";
                  position: absolute;
                  left: 0;
                  color: #2E228A;
                  font-weight: bold;
              }

              .search-bar {
                  background-color: #f8f9ff;
                  border: none;
                  font-size: 0.85rem;
              }

              .search-bar:focus {
                  box-shadow: none !important;
                  border: none;
                  background-color: #f1f3f9;
              }

            .sub-sub-title {
                color: #2E228A;
            }

            span.input-group-text.search-bar.bg-light i {
          font-size: 20px;
      }

            .value-search{
                background: #F3F7FF;
                padding: 0px 20px;
                display: flex;
                gap:0px;
                align-items: center;
                   border-radius: 20px;
            }
            .value-search input {
          padding: 15px 10px;
          width: 100%;
          height: auto;
          border: 0px;
                outline: none;

          background: transparent;
      }



       /* --- Stepper System Styling --- */
              .stepper-container { position: relative; padding-left: 40px; }
              .stepper-container::before {
                  content: ''; position: absolute; top: 25px; bottom: 40px; left: 17px;
                  width: 2px; background-color: #e4e6ef; z-index: 0;
              }

              .step-wrapper { position: relative; margin-bottom: 20px; }
              .step-wrapper .step-dot {
                  position: absolute; left: -29px; top: 24px; width: 14px; height: 14px;
                  border-radius: 50%; background-color: #d3d6e5; z-index: 10; transition: all 0.3s;
                  cursor: pointer; /* Allows clicking */
              }

              .step-wrapper .step-dot:hover { background-color: #beb4db; }

               .step-wrapper.active .step-dot { background-color: #2F2483; }
               .step-wrapper.active .step-dot::before {
                  content: ''; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px;
                  background-color: rgba(47, 36, 131, 0.15); border-radius: 50%; z-index: -1;
              }

              .step-card {
                  border: none; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
                  padding: 20px 24px; background: white; transition: all 0.2s ease-in-out;
              }

              .step-title { color: #2F2483; font-weight: 500; font-size: 1.15rem; margin-bottom: 0; }
              .form-label { font-size: 0.8rem; font-weight: 500; color: #262156; margin-bottom: 6px; }
            }

              .custom-input { background-color: #f5f5f5; border: none; border-radius: 20px; padding: 12px 15px; font-size: 0.9rem; color: #333; }
              .custom-input:focus { background-color: #eeeeee; box-shadow: none; }

              .custom-button { background-color: #261e61; color: white; border: none; border-radius: 8px; padding: 12px; font-weight: 600; width: 100%; margin-top: 15px; }
              .custom-button:hover { background-color: #1a1444; color: white; }

              .option-box {
                  margin-bottom: 10px;
                  background-color: white;
                  border: 1px solid #e1e3ec; border-radius: 20px; padding: 14px; cursor: pointer;
                  text-align: center; font-size: 0.9rem; font-weight: 500; color: #666; transition: all 0.2s;
              }
              .option-box.active { border-color: #2F2483; color: #2F2483; font-weight: 600; background-color: #fcfbfe; }
              .fake-radio {
                  display: inline-block; width: 14px; height: 14px; border-radius: 50%; top: -2px;
                  border: 2px solid #ccc; margin-right: 8px; vertical-align: middle; background: white; position: relative;
              }
              .option-box.active .fake-radio { border-color: #2F2483; }
              .option-box.active .fake-radio::after {
                  content: ''; position: absolute; top: 2px; left: 2px; right: 2px; bottom: 2px;
                  background-color: #2F2483; border-radius: 50%;
              }

              /* --- Right Side Component --- */
              .estimate-ready-card { background-color: #F7EEFF; border: none; border-radius: 16px; }
              .diagnostic-card { border: none; border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); background: white; }

              .pill-badge {
                  border: 1px solid #bbaddf; color: #483d8b; border-radius: 20px; padding: 6px 14px;
                  font-size: 14px; font-weight: 600; background: transparent; display: inline-block;
                  cursor: pointer; transition: all 0.2s;
              }
              .pill-badge:hover { background-color: #fcf9ff; }
              .pill-badge.active { background-color: #298d75; color: white; border-color: #298d75; cursor: default; }
              .pill-badge.no-hover { cursor: default; background: transparent; border-color: transparent;}

              .gradient-top { background: linear-gradient(90deg, #2a2559 0%, #2AB587 100%); color: white; border-radius: 12px; padding: 20px; transition: all 0.3s; }
              .gradient-bottom { background: linear-gradient(90deg, #1b1640 0%, #20A68A 100%); color: white; border-radius: 12px; padding: 20px; }
              .priority-card { border: 1px solid #eee; border-radius: 10px; padding: 12px; height: 100%; transition: all 0.3s; }
              .text-green { color: #21b88e !important; font-weight: 700;}

              .fade-in { animation: fadeIn 0.6s ease-in-out; }
              @keyframes fadeIn { from {opacity: 0; transform: translateY(20px);} to {opacity: 1; transform: translateY(0);} }


            .step-wrapper.active h5 {
          font-weight: bold;
                color: #262156 ;
      }

            .step-body input {
          padding: 12px 10px;
          border: 0px solid #ccc;
          border-radius: 20px;
          width: 100%;
                background: #F5F5F5;
          outline: none;
      }

            .ROI-bg{
                background-color: #F3F7FF;
                border: 1px solid #262156 !important;
            }

            .bg-section{
                background: #F3F7FF;
            }




             /* Custom "Where the Gap" Section Styles */
              .wg-section-wrapper {
                  font-family: 'Inter', sans-serif;
                  background-color: #ffffff;
              }

              .wg-main-headline {
                  color: #2F2483;
                  font-weight: 800;
                  font-size: 2.2rem;
                  letter-spacing: -0.5px;
              }

              .wg-sub-headline {
                  color: #4a4a4a;
                  font-weight: 600;
                  font-size: 1.05rem;
              }

              /* Base Card Styling */
              .wg-gap-card {
                  border-radius: 16px;
                  padding: 30px;
                  height: 100%;
                  border: none;
                  display: flex;
                  flex-direction: column;
                  transition: transform 0.2s ease;
              }

              .wg-gap-card:hover {
                  transform: translateY(-2px);
              }

              /* Card Content Layout */
              .wg-card-label {
                  font-weight: 600;
                  font-size: 0.85rem;
                  margin-bottom: 8px;
              }

              .wg-card-title {
                  color: #2F2483;
                  font-weight: 800;
                  font-size: 1.15rem;
                  margin-bottom: 12px;
              }

              .wg-card-desc {
                  color: #555;
                  font-size: 0.85rem;
                  line-height: 1.6;
                  margin-bottom: 16px;
                  font-weight: 500;
              }

              .wg-why-matters {
                  font-size: 0.85rem;
                  color: #333;
                  font-weight: 600;
                  line-height: 1.5;
                  margin-bottom: auto; /* Pushes everything below it down to bottom align the bottom halves */
              }

              .wg-divider {
                  border: 0;
                  border-top: 1px solid rgba(0, 0, 0, 0.1);
                  margin: 22px 0;
              }

              /* Pill Badge & Bottom Content */
              .wg-pill-badge {
                  border: 1px solid #2F2483;
                  color: #2F2483;
                  background: transparent;
                  border-radius: 50px;
                  padding: 4px 16px;
                  font-size: 0.75rem;
                  font-weight: 700;
                  display: inline-block;
                  margin-bottom: 16px;
              }

              .wg-recommended-text {
                  font-size: 0.8rem;
                  color: #555;
                  margin-bottom: 6px;
                  font-weight: 500;
              }

              .wg-expected-text {
                  font-size: 0.85rem;
                  color: #222;
                  font-weight: 700;
                  margin-bottom: 0;
              }

              /* --- Distinct Card Color Themes --- */

              /* 1. Purple Theme */
              .wg-theme-purple { background-color: #f7f3ff; }
              .wg-theme-purple .wg-card-label { color: #6b52a3; }

              /* 2. Orange Theme */
              .wg-theme-orange { background-color: #fef6ec; }
              .wg-theme-orange .wg-card-label { color: #b88bc1; /* Adjust to match the screenshot text hue if needed */ color: #b28a5c; }

              /* 3. Green Theme */
              .wg-theme-green { background-color: #ebfcf3; }
              .wg-theme-green .wg-card-label { color: #3d8f66; }

              /* 4. Blue Theme */
              .wg-theme-blue { background-color: #f2f6ff; }
              .wg-theme-blue .wg-card-label { color: #3a5c9a; }






               .section-title {
                  color: #312e81; /* Dark purple */
                  font-weight: 700;
                  margin-bottom: 2rem;
                  font-size: 2.25rem;
              }

              .feature-card {
                  background: white;
                  display: flex;
                  gap:10px;
                  border-radius: 1rem;
                  padding: 1.5rem;
                  height: 100%;
                  border: none;
                  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
                  transition: transform 0.2s ease-in-out;
              }

              .feature-card:hover {
                  transform: translateY(-5px);
                  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
              }

              .feature-title {
                  color: #312e81;
                  font-weight: 700;
                  font-size: 1.1rem;
                  margin-bottom: 1rem;
              }

              .feature-desc {
                  font-size: 0.9rem;
                  color: #4b5563;
                  margin-bottom: 0px;
                  line-height: 1.5;
              }

              .feature-capability {
                  font-size: 0.85rem;
                  color: #1f2937;
                  font-weight: 500;
                  margin-top: auto;
              }

              .gaps-container {
                  background: white;
                  border-radius: 1rem;
                  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
                  overflow: hidden;
                  margin-top: 3rem;
              }

              .gaps-header {
                  background: linear-gradient(90deg, #252a4a 0%, #369c84 100%);
                  padding: 2rem;
                  color: white;
              }

              .gaps-header h2 {
                  font-size: 1.5rem;
                  font-weight: 600;
                  margin-bottom: 0.5rem;
              }

              .gaps-header p {
                  font-size: 0.85rem;
                  margin-bottom: 0;
                  opacity: 0.9;
              }

              .gap-row {
                  padding: 1.5rem 2rem;
                  border-bottom: 1px solid #f3f4f6;
                  display: flex;
                  align-items: center;
                  transition: background-color 0.2s ease;
              }

              .gap-row:hover {
                  background-color: #fdfcff;
              }

              .gap-row:last-child {
                  border-bottom: none;
              }

              .icon-circle {
                  width: 48px;
                  height: 48px;
                  background-color: #f3f4f6;
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  color: #6b7280;
                  font-size: 1.25rem;
                  margin-right: 1.25rem;
                  flex-shrink: 0;
              }

              .gap-info {
                  flex: 0 0 25%;
                  padding-right: 1rem;
              }

              .gap-title {
                  font-weight: 600;
                  font-size: 0.9rem;
                  color: #111827;
                  margin-bottom: 0.25rem;
              }

              .gap-subtitle {
                  font-size: 0.8rem;
                  color: #6b7280;
                  margin: 0;
              }

              .gap-desc {
                  flex: 1;
                  font-size: 0.85rem;
                  color: #4b5563;
                  padding-right: 2rem;
                  margin: 0;
                  line-height: 1.5;
              }

              .gap-status {
                  flex: 0 0 auto;
                  text-align: right;
                  display: flex;
                  flex-direction: column;
                  align-items: flex-end;
              }

              .badge-critical {
                  border: 1px solid #f43f5e;
                  color: #e11d48;
                  background: white;
                  font-weight: 600;
                  padding: 0.35rem 1rem;
                  font-size: 0.75rem;
                  border-radius: 50rem;
              }

              .badge-drag {
                  border: 1px solid #f59e0b;
                  color: #d97706;
                  background: white;
                  font-weight: 600;
                  padding: 0.35rem 1rem;
                  font-size: 0.75rem;
                  border-radius: 50rem;
              }

              .status-bars {
                  display: flex;
                  gap: 4px;
                  margin-top: 8px;
                  justify-content: flex-end;
                  width: 100%;
              }

              .bar {
                  width: 14px;
                  height: 6px;
                  border-radius: 4px;
                  background-color: #e5e7eb; /* default gray */
              }

              .bar-red { background-color: #f43f5e; }
              .bar-orange { background-color: #f59e0b; }

            .wg-theme-cyan{
                background: #E1FFF6;
            }
            .missing-card {
          padding: 20px;
          border-radius: 20px;
          min-height: 220px;
      }

            .missing-card h3 {
          font-size: 20px;
          margin-top: 20px;
          color: #2e228a;
          font-weight: bold;
                min-height: 55px;
      }
            .missing-card img {
          height: 30px;
          object-fit: contain;
      }

            .missing-card p {
          font-size: 15px;
      }

            .ROI-bg-2{
                background: #F7EEFF;
            }

            .feature-card i {
          font-size: 40px;
          margin-bottom: 20px;
      }


            .bg-gradients{
                background-image: linear-gradient(90deg, #252a4a 0%, #369c84 100%);
            }

            .center-header h2{
                font-size: 45px;
                text-align: center;
                color: white;
                font-weight: bold;
            }
            .center-header p{
                font-size: 16px;
                text-align: center;
                color: white;
            }

            .center-header{
                margin-bottom: 50px;
            }

            .weaddo-value-card {
          text-align: center;
          padding: 20px 50px;
          background: white;
          border-radius: 15px;
      }

            .weaddo-value-card h3{
      font-size: 20px;
                color: #262156;
                font-weight: bold;
      }

            .weaddo-value-card p{
      font-size: 16px;
                color: #262156;
      }

             .leadership-section {
                  padding: 80px 0;
                  background-color: #fff;
              }

              .section-title {
                  color: #2b1f77; /* Deep purple/blue */
                  font-weight: 800;
                  font-size: 2.25rem;
                  margin-bottom: 0.75rem;
              }

              .section-subtitle {
                  color: #212529;
                  font-size: 1rem;
                  font-weight: 500;
                  margin-bottom: 3.5rem;
              }

              /* Timeline structure */
              .timeline-wrapper {
                  position: relative;
                  padding-left: 45px; /* Spacing for the timeline column */
              }

              .timeline-line {
                  position: absolute;
                  left: 19px; /* Timeline centered to align with the dots */
                  top: 25px;
                  bottom: 25px;
                  width: 2px;
                  background-color: #e9ecef;
                  z-index: 1;
              }

              .nav-pills {
                  gap: 0.75rem; /* Spacing between cards */
              }

              .nav-pills .nav-link {
                  background-color: #fff;
                  color: #333;
                  font-weight: 600;
                  font-size: 1.05rem;
                  border-radius: 12px;
                  padding: 1.25rem 1.8rem;
                  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
                  position: relative;
                  z-index: 2;
                  border: 1px solid #f8f9fa;
                  text-align: left;
                  display: flex;
                  align-items: center;
                  transition: all 0.3s ease;
                  width: 100%;
              }

              .nav-pills .nav-link:hover {
                  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
                  background-color: #fafbfc;

              }

              /* Active Nav Link Styling */
              .nav-pills .nav-link.active {
                  background: linear-gradient(90deg, #2b335c 0%, #30A68A 100%);
                  color: #fff;
                  box-shadow: 0 6px 20px rgba(43, 51, 92, 0.2);
                  border: none;
                  /* Disable hover effects on active item */
                  transform: none;
              }

              /* The Dot */
              .timeline-dot {
                  position: absolute;
                  /* Center dot matches timeline-line */
                  left: -43px;
                  width: 14px;
                  height: 14px;
                  border-radius: 50%;
                  background-color: #d1d5db;
                  z-index: 3;
                  box-shadow: 0 0 0 6px #fff; /* White cutout area */
                  transition: all 0.3s ease;
              }

              /* Active Dot Styling */
              .nav-link.active .timeline-dot {
                  background-color: #2b1f77;
                  /* Creates the light purple outer halo */
                  box-shadow: 0 0 0 5px #e0def8;
                  width: 12px;
                  height: 12px;
                  left: -43px; /* slight adjust due to width change */
              }

              /* Tab content card styling */
              .tab-content-card {
                  background-color: #f7f9ff; /* Soft blueish white */
                  border-radius: 16px;
                  padding: 3rem;
                  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
                  min-height: 100%;
              }

              .tab-content-title {
                  color: #2b1f77;
                  font-weight: 700;
                  font-size: 1.5rem;
                  margin-bottom: 2rem;
              }

              .priority-list {
                  list-style: none;
                  padding-left: 0;
                  margin: 0;
              }

              .priority-list li {
                  position: relative;
                  padding-left: 1.5rem;
                  margin-bottom: 1.25rem;
                  color: #4a4a4a;
                  font-size: 1rem;
                  font-weight: 500;
                  line-height: 1.4;
              }

              .priority-list li::before {
                  content: "";
                  position: absolute;
                  left: 0;
                  top: 7px;
                  width: 5px;
                  height: 5px;
                  border-radius: 50%;
                  background-color: #4a4a4a;
              }




             .leaks-section {
                  padding: 5rem 1rem;
                  background-color: #ffffff;
                  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                  text-align: center;
              }

              .heading-light {
                  font-size: 2.5rem;
                  color: #3f3f46; /* Neutral dark grey */
                  font-weight: 400;
                  margin-bottom: 0.5rem;
                  letter-spacing: -0.02em;
              }

              .heading-bold {
                  font-size: 3.75rem;
                  font-weight: 800;
                  margin-bottom: 1.5rem;
                  margin-top: 10px;
                  letter-spacing: -0.02em;
              }

              .text-dark-blue {
                  color: #2b2b5c; /* Dark indigo/blue */
              }

              .text-gradient-teal {
                  background: linear-gradient(90deg, #2a616d 0%, #308f86 50%, #3bbb97 100%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                  background-clip: text;
              }

              .subheading-text {
                  font-size: 1rem;
                  color: #4b5563;
                  max-width: 800px;
                  margin: 0 auto 2.5rem auto;
                  line-height: 1.6;
                  font-weight: 600;
              }

              /* Button Styling */
              .btn-custom {
                  border-radius: 50px;
                  padding: 12px 20px;
                  font-weight: 600;
                  font-size: 0.95rem;
                  transition: all 0.3s ease;
              }

              .btn-primary-custom {
                  background-color: #2b2b5c;
                  color: #ffffff;
                  border: 2px solid #2b2b5c;
                  box-shadow: 0 4px 6px -1px rgba(43, 43, 92, 0.1), 0 2px 4px -1px rgba(43, 43, 92, 0.06);
              }

              .btn-primary-custom:hover {
                  background-color: #1e1e45;
                  border-color: #1e1e45;
                  color: #ffffff;
                  transform: translateY(-1px);
              }

              .btn-outline-custom {
                  background-color: #ffffff;
                  color: #2b2b5c;
                  border: 1px solid #d1d5db; /* Light grey border */
                  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
              }

              .btn-outline-custom:hover {
                  background-color: #f3f4f6;
                  color: #2b2b5c;
                  border-color: #9ca3af;
              }

             /* Custom Styles */
              .footer-section {
                  padding: 80px 0 20px;
                  background-color: #ffffff;
                  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                  border-top: 1px solid #e5e7eb;
              }

              .footer-heading {
                  color: #2b2b5c;
                  font-weight: 800;
                  font-size: 2.25rem;
                  line-height: 1.2;
                  margin-bottom: 2.5rem;
                  max-width: 400px;
              }

              .social-icons-wrapper {
                  display: flex;
                  gap: 12px;
                  margin-bottom: 50px;
              }

              .social-link {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 40px;
                  height: 40px;
                  border: 1px solid #6b7280;
                  border-radius: 50%;
                  color: #4b5563;
                  text-decoration: none;
                  transition: all 0.3s ease;
              }

              .social-link:hover {
                  background-color: #2b2b5c;
                  color: #ffffff;
                  border-color: #2b2b5c;
              }

              .privacy-btn {
                  display: inline-flex;
                  align-items: center;
                  gap: 5px;
                  background-color: #1a163a;
                  color: #ffffff;
                  padding: 10px 15px;
                  border-radius: 30px;
                  text-decoration: none;
                  font-size: 15px;
                  font-weight: 500;
                  transition: all 0.3s ease;
                  margin-top: auto;
              }

              .privacy-btn:hover {
                  color: #ffffff;
                  opacity: 0.9;
              }

              .privacy-btn i {
                  font-size: 0.8rem;
                  color: #9ca3af;
                  transform: rotate(-45deg); /* Creates the up-right arrow effect */
                  display: inline-block;
              }

              /* Right Side Form Elements */
              .chat-prompt {
                  background-color: #1a163a;
                  color: #fff;
                  padding: 24px 28px;
                  border-radius: 12px;
                  font-size: 17px;
                  line-height: 25px;
                  margin-bottom: 2rem;
              }

              .stepper-container {
                  max-width: auto;
                  position: relative;
              }

              .step-group {
                  display: none;
                  animation: fadeIn 0.4s ease-out;
                  position: relative;
              }

              .step-group.active {
                  display: block;
              }

              @keyframes fadeIn {
                  from { opacity: 0; transform: translateX(10px); }
                  to { opacity: 1; transform: translateX(0); }
              }

              .form-input-round {
                      font-weight: 300;
    height: auto !important;
    padding: 15px;
    background: #fff;
    border: 1px solid #717171;
    border-radius: 18px;
    resize: none;
    color: #000;
    padding-right: 60px;
    width: 100%;
              }

              .form-input-round::placeholder {
                  color: #9ca3af;
              }

              .form-input-round:focus {
                  border-color: #2b2b5c;
                  box-shadow: 0 0 0 3px rgba(43, 43, 92, 0.1);
              }

              .btn-next-step {
                  position: absolute !important;
                  right: 14px;
                  top: 50%;
                  transform: translateY(-50%);
                  background: none;
                  border: none;
                  color: #1a163a;
                  font-size: 1rem;
                  cursor: pointer;
                  width: 32px;
                  height: 32px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  transition: color 0.3s;
              }

              .btn-next-step:hover {
                  color: #4b5563;
              }

              .stepper-nav {
                  display: flex;
                  gap: 10px;
                  margin-top: 15px;
                  padding-left: 10px;
              }

               .stepper-nav .step-dot {
                  width: 12px;
                  height: 12px;
                  border: 1px solid #6b7280;
                  border-radius: 50%;
                  background-color: transparent;
                  transition: all 0.3s;
                  flex-shrink: 0;
              }

               .stepper-nav .step-dot.active {
                  background-color: #1a163a;
                  border-color: #1a163a;
              }

               .stepper-nav .step-dot.completed {
                  border-color: #d1d5db;
                  background-color: #f3f4f6;
              }

              .copyright-text {
                  color: #6b7280;
                  font-size: 0.8rem;
                  font-weight: 500;
                  margin-top: 5rem;
                  margin-bottom: 0;
                  text-align: center;
              }

            h5.fw-bold.mb-3 {
          color: #000;
      }
            div#baseline-summary {
          border-radius: 10px;
      }
            div#baseline-summary .fw-bold {
          color: #00ffa3c7;
      }

              /* Responsive adjustments */
              @media (max-width: 768px) {
                  .heading-light {
                      font-size: 20px;
                  }
                  .heading-bold {
                      font-size: 2.75rem;
                  }
                  .subheading-text {
                      font-size: 0.95rem;
                  }
                  .btn-custom {
                      width: 100%;
                      margin-bottom: 1rem;
                  }
                  /* Remove bottom margin for the last button on mobile */
                  .d-flex .btn-custom:last-child {
                      margin-bottom: 0;
                  }
              }

              @media (max-width: 991px) {
                  .timeline-wrapper {
                      padding-left: 35px;
                  }
                  .timeline-dot {
                      left: -28px;
                  }
                  .nav-link.active .timeline-dot {
                      left: -27px;
                  }
                  .timeline-line {
                      left: 14px;
                  }
                  .tab-content-card {
                      padding: 2rem;
                  }
              }

              @media (max-width: 991.98px) {
                  .gap-row {
                      flex-direction: column;
                      align-items: flex-start;
                      gap: 1rem;
                  }
                  .gap-info {
                      flex: auto;
                      display: flex;
                      align-items: center;
                      width: 100%;
                  }
                  .gap-desc {
                      padding-right: 0;
                  }
                  .gap-status {
                      align-self: flex-start;
                      padding-left: 4.25rem; /* Align with text */
                  }
                  .status-bars {
                      justify-content: flex-start;
                  }
              }

            .pb-100{
                padding-bottom: 100px;
            }

            footer.footer-section .stepper-container {
          padding-left: 0px !important;
      }


              /* Sections */
              .section-title {
                  color: #1d224d;
                  font-weight: 700;
                  font-size: 1.05rem;

                  padding-bottom: 10px;
                  margin-bottom: 16px;
                  margin-top: 8px;
              }

              /* Badges */
              .badge-grey {
                  background-color: #f6f8fb;
                  color: #64748b;
                  font-weight: 500;
                  font-size: 0.75rem;
                  padding: 6px 12px;
                  border-radius: 4px;
                  border: 1px solid #e2e8f0;
              }
              .badge-teal-light {
                  background-color: #effbf9;
                  color: #0b8c7e;
                  font-weight: 500;
                  font-size: 0.75rem;
                  padding: 6px 12px;
                  border-radius: 4px;
                  border: 1px solid #d4f2ef;
              }


              .badge-recommended {
                  background-color: #effbf9;
                  color: #0b8c7e;
                  font-size: 0.6rem;
                  font-weight: 700;
                  padding: 4px 8px;
                  border-radius: 4px;
                  text-transform: uppercase;
                  letter-spacing: 0.5px;
              }
              .badge-optional {
                  color: #0b8c7e;
                  font-size: 0.65rem;
                  font-weight: 600;
                  padding: 3px 8px;
                  background-color: #effbf9;
                  border-radius: 4px;
                  text-transform: capitalize;
              }

       span.form-text-custom {
          font-size: 12px;
          line-height: 18px !important;
          display: block;
          color: #555;
           margin-top: 5px;
      }
            .btn-outline-teal {
          color: #0b8c7e;
          border: 1px solid #0b8c7e;
          background-color: transparent;
          font-weight: 600;
          border-radius: 8px;
          padding: 12px;
          width: 100%;
          transition: all 0.2s;
          font-size: 0.95rem;
      }



              .form-wrapper {
                  max-width: 800px;
                  margin: 40px auto;
                  padding: 24px;
              }

              /* Top header hint */
              .status-header {
                  background-color: #f8fafc;
                  border: 1px solid #e2e8f0;
                  border-radius: 12px;
                  padding: 16px 20px;
                  margin-bottom: 32px;
              }
              .status-title {
                  color: #1d224d;
                  font-weight: 700;
                  margin-bottom: 2px;
              }

              .readiness-title {
                  color: #1b1a3a;
                  font-weight: 700;
                  font-size: 0.95rem;
                  text-transform: uppercase;
                  letter-spacing: 0.5px;
                  margin-bottom: 4px;
                  margin-top: 40px;
              }
              .readiness-subtitle {
                  color: #64748b;
                  font-size: 0.9rem;
                  margin-bottom: 16px;
              }

              .readiness-card {
                  border: 1px solid #e2e8f0;
                  border-radius: 12px;
                  padding: 24px;
                  background-color: #ffffff;
                  margin-bottom: 16px;
              }

              .card-label {
                  color: #64748b;
                  font-size: 0.65rem;
                  font-weight: 700;
                  text-transform: uppercase;
                  letter-spacing: 1px;
                  margin-bottom: 10px;
              }
              .card-question {
                  color: #1d224d;
                  font-size: 1.05rem;
                  font-weight: 600;
                  margin-bottom: 8px;
                  line-height: 1.4;
              }
              .card-help-text {
                  color: #828ca1;
                  font-size: 0.85rem;
                  line-height: 1.5;
                  margin-bottom: 0;
              }

              /* Radio Buttons */
              .btn-radio-custom {
                  border: 1px solid #e2e8f0;
                  color: #475569;
                  background-color: #ffffff;
                  border-radius: 8px;
                  padding: 10px;
                  font-weight: 600;
                  font-size: 0.9rem;
                  transition: all 0.2s;
                  flex: 1;
                  text-align: center;
                  cursor: pointer;
                  user-select: none;
              }
              .btn-radio-custom:hover {
                  background-color: #f8fafc;
                  border-color: #cbd5e1;
              }
              .btn-check:checked + .btn-radio-custom {
                  background-color: #1b1a3a;
                  color: #ffffff;
                  border-color: #1b1a3a;
              }

            .readiness-card input{
                display: none;
            }

              /* Bottom actions */
              .bottom-actions {
                  border-top: 1px solid #e2e8f0;
                  padding-top: 24px;
                  margin-top: 48px;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
              }
              .btn-back {
                  border: 1px solid #cbd5e1;
                  color: #475569;
                  font-weight: 600;
                  border-radius: 8px;
                  padding: 10px 24px;
                  background-color: #ffffff;
                  text-decoration: none;
                  display: inline-block;
              }
              .btn-back:hover {
                  background-color: #f8fafc;
                  color: #1d224d;
              }
              .btn-reset {
                  color: #64748b;
                  font-size: 0.9rem;
                  font-weight: 500;
                  text-decoration: none;
                  background: none;
                  border: none;
                  cursor: pointer;
              }
              .btn-reset:hover {
                  color: #1d224d;
                  text-decoration: none;
              }
              .btn-calculate {
                  background-color: #cda26f;
                  color: #ffffff;
                  font-weight: 600;
                  border-radius: 8px;
                  padding: 10px 24px;
                  border: none;
                  cursor: pointer;
              }
              .btn-calculate:hover {
                  background-color: #c1935c;
                  color: #ffffff;
              }

              .footer-note {
                  text-align: center;
                  font-size: 0.8rem;
                  color: #828ca1;
                  margin-top: 24px;
                  margin-bottom: 40px;
              }

              .text-teal {
                  color: #0b8c7e !important;
              }

              @media (max-width: 576px) {
                  .bottom-actions {
                      flex-direction: column;
                      gap: 16px;
                  }
                  .bottom-actions > * {
                      width: 100%;
                      text-align: center;
                  }
              }



             /* -------- New Css ------------*/


            .banner-bg-1 {
          position: fixed;
          right: 0;
          top: 0;
          z-index: -1;
      }


            .banner-bg-2 {
          position: fixed;
          left: 0;
          top: 20%;
          z-index: -1;
      }

            .banner-bg-3 {
          position: fixed;
          top: 70%;
          right: 3%;
          z-index: -1;
      }

            div#benchmark{
                position: relative;
                z-index: 1;
            }
            .banner-bg-2 img {
          width: 70%;
          object-fit: contain;
      }
            .banner-bg-1 img {
          width: 80%;
          object-fit: contain;
                float: right;
      }
            .banner-bg-3 img {
          width: 70%;
          object-fit: contain;
          float: right;
      }

            .value-card.value-card-left {
          background: #ffffff10;
          backdrop-filter: blur(60px);
      }
            .value-card.value-card-right {
          background: #ffffff10;
          backdrop-filter: blur(60px);
      }

            .card.wrapper-card {
          padding: 30px;
      }




             .modal-container {
                  max-width: 900px;
                  border-radius: 1.25rem;
                  position: relative;
              }

              .btn-close-custom {
                  position: absolute;
                  top: 24px;
                  right: 24px;
                  background-color: #f1f5f9;
                  border-radius: 50%;
                  width: 32px;
                  height: 32px;
                  padding: 0;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  opacity: 1;
                  box-sizing: border-box;
                  background-size: 10px; /* Shrink the SVG 'X' size slightly */
                  border: none;
                  transition: background-color 0.2s;
              }

              .btn-close-custom:hover {
                  background-color: #e2e8f0;
              }

              .modal-title {
                  color: #0f172a;
                  font-weight: 600;
                  font-size: 1.7rem;
                  letter-spacing: -0.015em;
                  margin-top: 0px;
              }

              .modal-subtitle {
                  color: #64748b;
                  font-size: 1rem;
                  line-height: 1.5;
                  max-width: 95%;
              }

              /* Left side dark card */
              .impact-card {
                  background-color: #101c25;
                  border-radius: 0.85rem;
                  padding: 1.75rem 1.5rem;
              }

              .text-impact-label {
                  color: #708194;
                  font-size: 0.75rem;
                  font-weight: 700;
                  letter-spacing: 0.06em;
              }

              .text-impact-value {
                  color: #d1b066;
                  font-size: 2.25rem;
                  font-weight: 700;
                  line-height: 1.2;
              }

              .text-impact-sub {
                  color: #cbd5e1;
                  font-size: 0.95rem;
                  font-weight: 500;
              }

              .divider-dark {
                  border-bottom: 1px solid #1c2b39;
                  margin-top: 1.25rem;
                  margin-bottom: 1.25rem;
              }

              .text-metric-label {
                  color: #8493a5;
                  font-size: 0.8rem;
                  font-weight: 500;
                  margin-bottom: 0.25rem;
              }

              .text-metric-value {
                  color: #ffffff;
                  font-size: 1.15rem;
                  font-weight: 700;
              }

              .text-lever-label {
                  color: #f1f5f9;
                  font-size: 0.95rem;
                  font-weight: 600;
              }

              .text-lever-value {
                  color: #2ecf9d; /* Mint green */
                  font-weight: 700;
                  font-size: 0.95rem;
              }

              /* Details Card */
              .details-card {
                  background-color: #f8fafc;
                  border: 1px solid #e2e8f0;
                  border-radius: 0.85rem;
                  padding: 1.25rem;
              }

              .detail-row {
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 0.65rem;
              }

              .detail-row:last-child {
                  margin-bottom: 0;
              }

              .detail-label {
                  color: #8da4be;
                  font-weight: 500;
                  font-size: 0.9rem;
              }

              .detail-value {
                  color: #1e293b;
                  font-weight: 600;
                  font-size: 0.9rem;
              }

              /* Form elements */
              .form-label {
                  color: #262156;
                  font-weight: 600;
                  font-size: 0.85rem;
                  margin-bottom: 0.4rem;
              }

              .form-control, .form-select {
                  border: 1px solid #cbd5e1;
                  border-radius: 0.4rem;
                  padding: 0.6rem 0.75rem;
                  font-size: 0.95rem;
                  color: #0f172a;
                  box-shadow: none;
              }

              .form-control::placeholder {
                  color: #94a3b8;
              }

              .form-control:focus, .form-select:focus {
                  border-color: #94a3b8;
                  box-shadow: 0 0 0 0.15rem rgba(148, 163, 184, 0.2);
              }

              textarea.form-control {
                  resize: vertical;
              }

              .btn-submit {
                  background-color: #c49d52;
                  color: #111827;
                  font-weight: 700;
                  font-size: 1rem;
                  padding: 0.8rem;
                  border-radius: 0.45rem;
                  border: none;
                  transition: all 0.2s;
              }

              .btn-submit:hover {
                  background-color: #b18c45;
                  color: #111827;
              }

              .footer-text {
                  color: #7d8c9e;
                  font-size: 0.75rem;
                  line-height: 1.4;
                  max-width: 90%;
                  margin: 0 auto;
              }

              @media (max-width: 991.98px) {
                  .modal-container {
                      margin: 2rem 1rem;
                  }
              }

            button.btn-close {
          position: absolute;
          right: 15px;
                z-index: 9;
          top: 15px;
                color: white;
      }



              .roi-review {

                  width: 100%;
                  background-color: #ffffff;
                  border-radius: 0.5rem;
                  display: flex;
                  flex-direction: column;
                  overflow: hidden;
                  /* Gives it a max height and allows scroll to behave like a modal/sidebar */
                  max-height: 90vh;
              }

              .roi-header {
                  padding: 1.5rem 1.75rem;
                  position: relative;
                  border-bottom: 1px solid #f1f5f9;
              }

              .roi-title {
                  font-size: 1.15rem;
                  font-weight: 700;
                  color: #1e293b;
                  margin-bottom: 0.25rem;
                  letter-spacing: -0.01em;
              }

              .roi-subtitle {
                  font-size: 0.75rem;
                  color: #64748b;
                  margin-bottom: 0;
                  padding-right: 2rem;
                  line-height: 1.4;
              }

              .btn-close-custom {
                  position: absolute;
                  top: 1.5rem;
                  right: 1.5rem;
                  background-color: #f1f5f9;
                  border-radius: 50%;
                  width: 26px;
                  height: 26px;
                  padding: 0;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  opacity: 1;
                  box-sizing: border-box;
                  background-size: 8px;
                  border: none;
                  transition: background-color 0.2s;
              }

              .btn-close-custom:hover {
                  background-color: #e2e8f0;
              }

              .roi-body {
                  padding: 1.25rem 1.75rem;
                  overflow-y: auto;
                  flex-grow: 1;
              }

              /* Custom scrollbar for better UX */
              .roi-body::-webkit-scrollbar {
                  width: 6px;
              }
              .roi-body::-webkit-scrollbar-track {
                  background: #f8fafc;
              }
              .roi-body::-webkit-scrollbar-thumb {
                  background: #cbd5e1;
                  border-radius: 4px;
              }
              .roi-body::-webkit-scrollbar-thumb:hover {
                  background: #94a3b8;
              }

              .section-title {
                  font-size: 0.65rem;
                  font-weight: 800;
                  text-transform: uppercase;
                  letter-spacing: 0.05em;
                  color: #475569;
                  margin-bottom: 0.6rem;
                  margin-top: 1.5rem;
              }

              .section-title:first-child {
                  margin-top: 0;
              }

              .data-card {
                  background-color: #ffffff;
                  border: 1px solid #e2e8f0;
                  border-radius: 0.4rem;
                  overflow: hidden;
              }

              .data-row {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  padding: 0.75rem 0.85rem;
                  border-bottom: 1px solid #e2e8f0;
              }

              .data-row:last-child {
                  border-bottom: none;
              }

              .data-label {
                  font-size: 0.75rem;
                  color: #64748b;
                  font-weight: 500;
              }

              .data-value-group {
                  display: flex;
                  align-items: center;
                  gap: 0.65rem;
              }

              .data-value {
                  font-size: 0.8rem;
                  font-weight: 700;
                  color: #1e293b;
              }

              .badge-benchmark {
                  background-color: #f8fafc;
                  border: 1px solid #cbd5e1;
                  color: #64748b;
                  font-size: 0.55rem;
                  font-weight: 600;
                  padding: 0.15rem 0.35rem;
                  border-radius: 0.2rem;
                  letter-spacing: 0.02em;
              }

              .section-divider {
                  height: 2px;
                  background-color: #e2e8f0;
                  margin-top: 0.4rem;
                  margin-bottom: 1rem;
                  border-radius: 2px;
              }

              .roi-footer {
                  padding: 1.25rem 1.75rem;
                  border-top: 1px solid #e2e8f0;
                  background-color: #f8fafc;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
              }


              /* Responsive adjustments */
              @media (max-width: 576px) {
                  .roi-review {
                      margin: 0;
                      max-height: none;
                      border-radius: 0;
                  }

                  .roi-header, .roi-body, .roi-footer {
                      padding-left: 1.25rem;
                      padding-right: 1.25rem;
                  }
                  .data-row {
                      flex-direction: column;
                      align-items: flex-start;
                      gap: 0.4rem;
                  }
                  .data-value-group {
                      width: 100%;
                      justify-content: space-between;
                  }
              }

            span.toggle-text.fw-medium {
          font-size: 16px;
          color: #262156;
      }


            h5.page-header {
          font-weight: bold;
          color: #262156;
      }

            .detail-sub-txt{
                color: #262156;
                font-size: 12px;
                line-height: 18px;
                margin-top: 10px;
            }

            .benchmark-card-header {
          min-height: 120px;
      }


            #dynamic-hide{
                display: none;
            }

            /* -------- New Css ------------*/


            @media only screen and (max-width:1300px){
                .hero-banner h1 {
          font-weight: 900;
          color: #2E228A;
          font-size: 50px;
          width: 80%;
          margin: auto;
          line-height: 60px;
      }

                .value-card-right li span {
          padding: 5px 10px;
          background-image: linear-gradient(45deg, #262959, #2db28d);
          color: white;
          border-radius: 50px;
                    font-size: 14px;
      }
                .hero-banner h2 {
          font-size: 16px;

          line-height: 25px;
      }
                .value-card ul li{
                    font-size: 14px;
                }

                .fill-btn {
          padding: 10px 20px;
                }
                .benchmark-cost ul li span {
          color: #2e228a;
          font-weight: 600;
          text-align: right;
      }
                .option-box {
          font-size: 12px !important;
                }
                .missing-card p {
          font-size: 13px;
      }
                .weaddo-value-card p {
          font-size: 13px;
          color: #262156;
      }
                .hero-banner {
          text-align: center;
          padding: 50px 0px;
      }
                .value-card-right li span{
                    font-size: 14px;
                }
            }


            @media only screen and (max-width:800px){
                .hero-banner h1 {
          font-weight: 900;
          color: #2E228A;
          font-size: 30px;
          width: 100%;
          margin: auto;
          line-height: 40px;
      }
                .banner-btn{
                    display: block;
                }

                .banner-btn a{
                    display: block;
                    width: 100%;
                    margin-bottom: 10px;
                }
                .hero-banner h2{
                    width: 100%;
                }

                .custom-row {
          display: block;
      }
                .value-card{
                    margin-bottom: 20px;
                    min-height: auto;
                }
                .benchmark-section .row {
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          gap: 20px;
      }
                h2.main-heading {
          font-size: 25px;
          color: #2E228A;
          font-weight: bold;
      }
                .section-header h6 {
          width: 100%;
          margin-bottom: 20px;
          font-weight: 400;
      }
                .ptb-100 {
          padding: 30px 0px;
      }
                .main-title{
                    font-size: 30px;
                }
                .card.wrapper-card {
          padding: 30px 15px;
      }
                    .gap-status {
              align-self: flex-start;
              padding-left: 0;
          }
                .missing-card {
          min-height: auto;
          margin-bottom: 00px;
      }
                .missing-card h3 {
          font-size: 20px;
          margin-top: 20px;
          color: #2e228a;
          font-weight: bold;
          min-height: 30px;
      }
                .center-header h2 {
          font-size: 30px;
                }
                .weaddo-value-card{
                    margin-bottom: 20px;
                }
                .leadership-section {
          padding: 30px 0;
                }
                .leaks-section {
          padding: 20px;
      }
                    .btn-custom {
              width: 100%;
              margin-bottom: 0px;
          }
                .footer-section {
          padding: 30px 0 20px;
                }
                .sub-sub-title {
          color: #2E228A;
          margin-bottom: 10px;
      }

                .navbar {
          transition: all 0.3s ease-in-out;
          width: 100%;
          z-index: 1030;
          padding: 15px 10px;
      }

                .mob-padding{
                    padding-left: 15px;
                    padding-right: 15px;
                }
                .wg-divider {
          border: 0;
          border-top: 1px solid rgba(0, 0, 0, 0.1);
          margin: 7px 0;
      }

                .banner-bg-1{
                    z-index: -1;
                }

                .banner-bg-2{
                    z-index: -1;
                }

                .banner-bg-3{
                    z-index: -1;
                }

                .banner-bg-1 img {
          width: 60%;
          object-fit: contain;
          float: right;
      }
                .banner-bg-2 img {
          width: 30%;
          object-fit: contain;
      }

                .social-icons-wrapper {
          display: flex;
          gap: 12px;
          margin-bottom: 3rem;
      }
                    .timeline-dot {
              left: -38px;
          }
                    .nav-link.active .timeline-dot {
              left: -35px;
          }
                .nav-pills .nav-link {
                    width: 90%;
                }
                .btn-radio-custom {
          border: 1px solid #e2e8f0;
          color: #475569;
          background-color: #ffffff;
          border-radius: 8px;
          padding: 10px 2px;
          font-weight: 600;
          font-size: 10px;
          transition: all 0.2s;
          flex: 1;
          text-align: center;
          cursor: pointer;
          user-select: none;
      }
                      nav.navbar.navbar-expand-lg.navbar-scrolled .header-bg {
          border-radius: 10px !important;
      }
                .hero-banner {
          text-align: center;
          padding: 30px 0px;
      }
                .step-card {

          padding: 20px 10px;

            }
                .readiness-card {
          border: 1px solid #e2e8f0;
          border-radius: 12px;
          padding: 10px;
            }
                .gap-2 {
          gap: 3px !important;
      }
                .me-2 {
          margin-right: 0px !important;
      }
            }
        
        .feature-icon i.fa-check-circle:before {
    content: "\f058";
    background: linear-gradient(90deg, #2a2559 0%, #29ab83 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
        
          .navbar-toggler{
                outline: none !important;
            }

            .navbar-toggler:focus{
                outline: none !important;
                box-shadow: none;
            }
        
        
        
        
        .benchmark-card {
 
  border-radius: 20px;
  padding: 30px;
  height: 100%;
  border: 1px solid #e5e5e5;
}

/* Optional Owl Dots Styling */
.benchmark-slider .owl-dots {
  margin-top: 25px;
  text-align: center;
}

.benchmark-slider .owl-dot span {
  width: 10px;
  height: 10px;
  background: #d0d0d0 !important;
  display: block;
  border-radius: 50%;
  margin: 5px;
}

.benchmark-slider .owl-dot.active span {
  background: #1d3557 !important;
}
        .owl-carousel .owl-item img{
            width: auto;
        }
        
/*
       .missing-slider  .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot {
    width: 10px;
    height: 10px;
    border: 0px;
    background: #ccc;
    border: 1px solid #fff;
    border-radius: 50px;
}      
       .missing-slider  .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot.active {
  background: #1d3557 !important;
}
*/
        
        
        
/* Optional Owl Dots Styling */
.missing-slider .owl-dots {
  margin-top: 25px;
  text-align: center;
}

.missing-slider .owl-dot span {
  width: 10px;
  height: 10px;
  background: #d0d0d0 !important;
  display: block;
  border-radius: 50%;
  margin: 5px;
}

.missing-slider .owl-dot.active span {
  background: #1d3557 !important;
}



            @media only screen and (max-width:600px){
                .hero-banner h1 {
          font-weight: 900;
          color: #2E228A;
          font-size: 30px;
          width: 100%;
          margin: auto;
          line-height: 35px;
      }
                .banner-btn{
                    display: block;
                }

                .banner-btn a{
                    display: block;
                    width: 100%;
                    margin-bottom: 10px;
                }
                .hero-banner h2{
                    width: 100%;
                }

                .custom-row {
          display: block;
      }
                .value-card{
                    margin-bottom: 20px;
                    min-height: auto;
                }
                .benchmark-section .row {
          display: grid;
          grid-template-columns: repeat(1, 1fr);
          gap: 20px;
      }
                h2.main-heading {
          font-size: 22px;
          color: #2E228A;
          font-weight: bold;
      }
                .section-header h6 {
          width: 100%;
          margin-bottom: 20px;
          font-weight: 400;
      }
                .ptb-100 {
          padding: 30px 0px;
      }
                .main-title{
                    font-size: 30px;
                }
                .card.wrapper-card {
          padding: 30px 15px;
      }
                    .gap-status {
              align-self: flex-start;
              padding-left: 0;
          }
                .missing-card {
          min-height: auto;
          margin-bottom: 00px;
      }
                .missing-card h3 {
          font-size: 20px;
          margin-top: 20px;
          color: #2e228a;
          font-weight: bold;
          min-height: 30px;
      }
                .center-header h2 {
          font-size: 30px;
                }
                .weaddo-value-card{
                    margin-bottom: 20px;
                }
                .leadership-section {
          padding: 30px 0;
                }
                .leaks-section {
          padding: 00px;
      }
                    .btn-custom {
              width: 100%;
              margin-bottom: 0px;
          }
                .footer-section {
          padding: 30px 0 20px;
                }
                .sub-sub-title {
          color: #2E228A;
          margin-bottom: 10px;
      }

                .navbar {
          transition: all 0.3s ease-in-out;
          width: 100%;
          z-index: 1030;
          padding: 15px 10px;
      }

                .mob-padding{
                    padding-left: 15px;
                    padding-right: 15px;
                }
                .wg-divider {
          border: 0;
          border-top: 1px solid rgba(0, 0, 0, 0.1);
          margin: 7px 0;
      }

                .banner-bg-1{
                    z-index: -1;
                }

                .banner-bg-2{
                    z-index: -1;
                }

                .banner-bg-3{
                    z-index: -1;
                }

                .banner-bg-1 img {
          width: 60%;
          object-fit: contain;
          float: right;
      }
                .banner-bg-2 img {
          width: 30%;
          object-fit: contain;
      }

                .social-icons-wrapper {
          display: flex;
          gap: 12px;
          margin-bottom: 3rem;
      }
                    .timeline-dot {
              left: -38px;
          }
                    .nav-link.active .timeline-dot {
              left: -35px;
          }
                .nav-pills .nav-link {
                    width: 90%;
                }
                .btn-radio-custom {
          border: 1px solid #e2e8f0;
          color: #475569;
          background-color: #ffffff;
          border-radius: 8px;
          padding: 10px 2px;
          font-weight: 600;
          font-size: 10px;
          transition: all 0.2s;
          flex: 1;
          text-align: center;
          cursor: pointer;
          user-select: none;
      }
                      nav.navbar.navbar-expand-lg.navbar-scrolled .header-bg {
          border-radius: 10px !important;
      }
                .hero-banner {
          text-align: center;
          padding: 30px 0px;
      }
                .step-card {

          padding: 20px 10px;

            }
                .readiness-card {
          border: 1px solid #e2e8f0;
          border-radius: 12px;
          padding: 10px;
            }
                .gap-2 {
          gap: 3px !important;
      }
                .me-2 {
          margin-right: 0px !important;
      }
                
              .value-card-mid li {
    padding: 10px;
                }
                
                .pb-100 {
    padding-bottom: 50px;
}
                
                /* CARD STYLING */
.missing-card {
  border-radius: 20px;
  padding: 20px;
  height: 100%;
}

/* Equal height cards */
.missing-slider .item {
  height: 100%;
}

                .owl-carousel .owl-item img{
                    width: auto;
                }
                .row.g-4.mb-5 {
    margin-bottom: 0px !important;
}
                .section-subtitle {
    color: #212529;
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 10px;
}
                .value-card-mid h3{
                    text-align: left !important;
                }
                .missing-slider .missing-card {
    display: flex;
    gap: 10px;
                    min-height: 160px;
}
                .missing-card h3{
                    margin-top: 0px;
                }
                .missing-card img{
                    width: 55px !important;
                }
                .benchmark-card {
    border-radius: 20px;
    padding: 15px;
                }
                
                .text-center.mb-4 {
    text-align: left !important;
}
                .value-card{
                    border-radius: 20px;
                }
                .value-card-right{
                     border-radius: 20px;
                }
                
                    .missing-card p {
        font-size: 13px;
                        margin-bottom: 0px;
    }
                
            }
        
        button.wpcf7-form-control.wpcf7-submit.oval-btn.qodef-button.qodef-size--normal.qodef-type--filled.qodef-m {
    margin-top: 15px;
    float: left;
}


.qodef-theme-button, button[type=submit], input[type=submit] {
    min-width: 110px;
    max-width: fit-content;
    height: 65px;
    border: 1px solid transparent !important;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    transition: all ease-in-out .4s;
    display: inline-flex !important;
    background: transparent !important;
    position: relative;
    overflow: visible;
    padding: 12px 14px !important;
}
        
        .qodef-theme-button:before, button[type=submit]:before, input[type=submit]:before {
    content: '';
   
    background-color: #80FFD7;
    border-radius: 40px;
    width: 0%;
    max-width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    position: absolute;
    left: 0;
    width: 60px;
    height: 60px;
    display: block;
    transition: all ease-in-out .4s;
}
        .qodef-theme-button::before{
            z-index: 0;
        }
        
        .qodef-theme-button span{
            z-index: 1;
        }
        
        .qodef-theme-button:hover:before, button[type=submit]:hover:before, input[type=submit]:hover:before {
    width: 100%;
}
        #wpcf7-f11469-o3 input, #wpcf7-f11469-o3 textarea, #wpcf7-f11469-o3 select {
    padding: 22px 20px 22px 0 !important;
}
        
        #myModal input{
    border: 0px;
    padding: 10px 0px 22px 0px !important;
    border-radius: 0px;
                border-bottom: 1px solid #acacac;
                transition: color .2s ease-out, background-color .2s ease-out, border-color .2s ease-out;
            position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 0 0 0;
    padding: 22px 20px;
    font-family: inherit;
    font-size: 16px;
    line-height: 24px;
    font-weight: inherit;
    color: #7e7e7e;
    background-color: transparent;
    border-radius: 0;
    outline: 0;
    cursor: pointer;
    -webkit-appearance: none;
            color: black;
            outline: none;
}
        
        #myModal input::placeholder{
            color: #7e7e7e;
            font-size: 14px;
            box-shadow: none;
        }
   
        #myModal input::focus{
            outline: none;
            border: 0px;
        }
        
        #myModal .modal-body{
            padding: 0px !important;
        }
        
        .wpcf7-form-control-wrap input:focus {
    border-color: #94a3b8;
    box-shadow: none !important;
}

        .input-group .country-dropdown {
    max-width: 100px; /* Adjust the width based on your preference */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group input[name="Phone"] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

 .wpcf7-form-control-wrap select {
     font-size: 15px;
    padding: 17px 0px !important;
    border-bottom: 1px solid #cbd5e1 !important;
    
}
        .wpcf7-form-control-wrap select:focus {
                border-color: #94a3b8;
    box-shadow: none !important;
        }
          
        .form-control, .form-select{
            border: 1px !important;
             border-bottom: 1px solid #cbd5e1 !important;
        }
        
        
        
        /* 1. Country Code Dropdown Custom Styling */
.country-code-select {
    background-color: #f8f9fa !important; /* Soft grey background */
    border: 1px solid #ced4da !important;  /* Match Bootstrap inputs */
    border-radius: 4px !important;
    font-size: 14px !important;
    color: #495057 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    cursor: pointer;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.country-code-select:focus {
    border-color: #86b7fe !important;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}
/* 2. Z-Index Stack Fixes (Backup overlay safety) */
#secondCustomModal {
    z-index: 1080 !important;
}
#thankyouModal {
    z-index: 1090 !important;
}
        
        
        /* Custom styling for the country code select dropdown */
.country-code-select {
    display: block;
    width: 100%;
    height: 100%; /* Spans the full height of the wrapper */
    padding: 0.375rem 1.8rem 0.375rem 0.75rem !important; /* Extra padding-right to clear the custom arrow */
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #333333 !important;
    
    /* Clean white background and border styling */
    background-color: #ffffff !important;
    border: 1px solid #ced4da !important;
    border-radius: 6px !important;
    
    /* Custom premium arrow (replacing the default browser arrow) */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.65rem center !important;
    background-size: 10px 10px !important;
    
    transition: all 0.2s ease-in-out !important;
}

/* Hover effect */
.country-code-select:hover {
    background-color: #f8f9fa !important;
    border-color: #adb5bd !important;
}

/* Focus state with premium outline glow */
.country-code-select:focus {
    border-color: #0d6efd !important;
    outline: 0 !important;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15) !important;
}
        
        
        
        .padding0{
            padding: 0px !important;
        }
        
        .lead-form-header{
            margin: 0px;
            background: linear-gradient(90deg, #2a2559 0%, #29ab83 100%);
            padding: 15px;
        }
        .wpcf7.no-js {
    padding: 20px;
}
        .padding0 .modal-title{
            color: white;
        }
        .padding0 .modal-subtitle{
            color: white;
        }
        
        .modal-content{
            border-radius: 10px;
            overflow: hidden;
        }
        
        .btn-close{
            filter: invert(1);
        }
        #thankyouModal .feature-icon i {
    font-size: 50px;
    margin-bottom: 15px;
}
        
        .text-primary {
    color: #262156 !important;
}
      
        .accordion-body a {
    text-decoration: none;
}
        
        html {
    scroll-padding-top: 100px;
    scroll-behavior: smooth;
}
        
        .sticky-top{
            top: 100px;
        }
        

        .default-blur{
             filter: blur(5px);
        }
        
        .modal{
            backdrop-filter: blur(6px);
        }
        
        
        button.btn-next-step.text-success::before{
            display: none ;
        }
        
button.btn-next-step.text-success {
    min-width: auto;
    min-height: auto;
    background: #80FFD7 !important;
    height: 34px;
    width: 34px;
}
        
        a.privacy-btn img {
    width: 15px !important;
    padding-left: 3px !important;
    filter: brightness(0) invert(1) !important;
            margin-top: 4px;
}
        .copyright-text{
            color: black;
            font-size: 16px;
        }
        .copyright-text b{
            font-size: 16px;
    color: #989898 !important;
        }
        .copyright-text a{
            text-decoration: none;
        }

.navbar-brand img{
 width:auto;
}