body
  {
      font-family: "Nunito", sans-serif;
      padding: 0px;
      margin: 0px;
  }
  @media (min-width: 1400px) {
      .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
          max-width: 1140px    !important;
      }
  }
  .page_hero
  {
      background: url(../img/bgtop2.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: top left;
      padding: 24px 0;
  }
  header
  {
      border: 1px solid #EFF6FF;
      padding: 12px 20px;
      border-radius: 103px;
      box-shadow: 0px 7px 20px -12px #5555555c;
      background: #fff;
  }
  .logo
  {
      color: #356BB5;
      font-size: 24px;
      font-weight: 700;
  }
  .head-buttons button
  {
      background: #356bb5;
      border: none;
      padding: 6px 24px;
      color: #fff;
      border-radius: 100px;
  }
  .banner
  {
      text-align: center;
      margin-top: 50px;
  }
  .banner label
  {
      color: #656565;
      font-size: 22px;
  }
  .banner h1
  {
      font-size: 55px;
      font-weight: 800;
      margin: 16px 0 28px 0;
  }
  .banner h1 span
  {
      color: #356bb5; 
  }
  .banner p
  {
      color: #356bb5;
      font-size: 24px;
  }
  .banner-img
  {
      margin-top: -140px;
  }
  .banner-img img
  {
      width: 75%;
      animation: floatUpDown 3s ease-in-out infinite;
  }
  @keyframes floatUpDown {
      0% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-20px); /* move up */
      }
      100% {
        transform: translateY(0px); /* back to original */
      }
    }

  .What_We_Offered
  {
      padding-top: 50px;
  }
  .wwo-mainL
  {
      position: relative;
  }   
  .wwo-mainL label
  {
      color: #656565;
      font-size: 14px;
  }
  .wwo-mainL h2
  {
      font-size: 38px;
      font-weight: 700;
      margin: 4px 0 14px 0;
  }
  .wwo-mainL p
  {
      font-size: 16px;
      color: #656565;
  }
  .wwo-mainL_points
  {
      margin: 12px 0;
  }
  .wwo-mainL_points_img
  {

  }
  .wwo-mainL_points_text
  {
      color: #656565;
      font-weight: 700;
      margin-left: 12px;
      font-size: 16px;
  }
  .wwo-mainR
  {
      background: url(../img/Ellipse.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: 54px -28px;
      padding: 20px;
  }
  .wwo-mainR img
  {
      width: 100%;
  }
  .call-recording-img img
  { 
      width: 100%;
  }
  .call-recording
  {
      background: url(../img/bg2.png);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center top;
      margin-top: 80px;
      margin-bottom: 80px;
  }
  .call-recording-data label {
      color: #656565;
      font-size: 14px;
  }
  .call-recording-data h2 {
      font-size: 38px;
      font-weight: 700;
      margin: 4px 0 14px 0;
  }
  .call-recording-data p {
      font-size: 16px;
      color: #656565;
  }
  .call-recording-points
  {
      width: 96%;
      margin: 0 auto;
      margin-top: -70px;
      z-index: 1;
  }
  .call-recording-points-card
  {
      background: #fff;
      border-radius: 30px;
      text-align: center;
      border: 1px solid #D6D6D6;
      padding: 30px 10px;
  }
  .call-recording-points-card img {

      width: 50px;
      margin-bottom: 18px;
  }
  .call-recording-points-card p {
      margin-bottom: 0px;
      font-size: 14px;
      font-weight: 700;
  }
  .Key_Benefits_head
  {
      text-align: center;
      position: relative;
  }
  .Key_Benefits_head h2 {
      font-size: 38px;
      font-weight: 700;
      margin: 4px 0 14px 0;
  }
  .Key_Benefits_head p {
      font-size: 16px;
      color: #656565;
  }
  .Key_Benefits
  {
      margin-top: 80px;
      position: relative;
      overflow: visible; /* Allow pseudo elements to render fully */
    z-index: 0;
  }
  .Key_Benefits::after
  {
      position: absolute;
    content: "";
    background: url(../img/Vector.png) no-repeat center center;
    width: 300px;
    height: 400px;
    bottom: 0;
    left: -4rem;
    z-index: -1;
    transform: translateY(50%);
  }
  .Key_Benefits_cards
  {
      padding: 46px 14px;
      text-align: center;
      background: #eee;
      border-radius: 40px;
      margin: 30px 0 0 0;
  }
  .Key_Benefits_cards h4
  {
      font-size: 20px;
      font-weight: 700;
      margin: 26px 0 14px 0;
  }
  .Key_Benefits_cards img
  {
      
  }
  .Key_Benefits_cards p
  {
      margin: 0 0 4px 0;
      font-size: 18px;
  }

  .xs-global-crm {
      padding-top: 80px;
      /* background: #fff; */
      position: relative;
      overflow: hidden;
  }

  .crm-title {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 10px;
      color: #000;
  }

  .crm-subtitle {
      font-size: 16px;
      color: #1570EF;
      margin-bottom: 30px;
      font-weight: 500;
  }

  .crm-description {
      font-size: 16px;
      color: #666464;
      margin-bottom: 30px;
      line-height: 1.7;
      font-weight: 600;
  }

  .crm-tags {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 25px;
  }

  .crm-tags .tag {
      background: #D0E2FF;
      padding: 10px 18px;
      border-radius: 999px;
      color: #000;
      font-size: 14px;
      font-weight: 500;
      display: inline-block;
  }

  .crm-footer {
      font-size: 16px;
      color: #666464;
      line-height: 1.6;
      font-weight: 600;
  }

  .crm-image {
      max-width: 100%;
      height: auto;
      border-radius: 20px;
  }

  .sec_set {
      margin-top: -6rem;
  }

  .custom-tag {
      position: relative;
      display: inline-block;
      padding-left: 10px;
      font-size: 15px;
      font-weight: 400;
      color: #000;
      margin-bottom: 20px;
      z-index: 1;
    }
    
    .custom-tag::after {
      content: '';
      position: absolute;
      width: 35px;
      height: 35px;
      background-color: #dbe9ff; /* soft blue */
      border-radius: 50%;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: -60;
    }

    .tab-switcher {
      text-align: center;
      margin-bottom: 30px;
    }

    .tab-switcher .tab-btn {
      background-color: white;
      color: #191A15;
      border: none;
      padding: 10px 20px;
      margin: 0 5px;
      border-radius: 30px;
      font-weight: 600;
      font-size: 14px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.08);
      cursor: pointer;
      transition: 0.3s;
    }

    .tab-switcher .tab-btn.active {
      background-color: #2563eb;
      color: white;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .pricing-cards {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 30px;
    }

    .pricing-card {
      background: white;
      border-radius: 20px;
      padding: 30px;
      width: 330px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.06);
      text-align: center;
      position: relative;
      margin-bottom: 5%;
    }

    .pricing-card h3 {
      margin: 0;
      font-size: 30px;
      font-weight: 700;
      color: #191A15;
    }

    .pricing-card p.subtitle {
      font-size: 18px;
      color: #A6A6A6;
      margin-top: 8px;
    }

    .pricing-card .price {
      font-size: 30px;
      font-weight: 700;
      margin: 20px 0 10px;
    }

    .feature-box {
      background: #F4F4F4;
      border-radius: 20px;
      padding: 5px 0 30px 0px;
      text-align: center;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      margin-top: 2rem;
      height: 368px;
      position: relative;
    }
    
    .user-limit {
      background: #ffffff;
      display: ruby-text;
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 15px;
      font-weight: 500;
      color: #000;
      margin-bottom: 20px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      margin-top: -1rem;
    }
    
    .features {
      list-style: none;
      padding: 0;
      margin: 0 10px 30px 30px;
    }
    
    .features li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 15px;
      color: #000;
      justify-content: flex-start;
    }
    
    .features li::before {
      content: '✔';
      background-color: #356BB5;
      color: #fff;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }
    
    .cta-btn {
      background-color: #fff;
      color: #2563eb;
      border: none;
      padding: 12px 28px;
      border-radius: 50px;
      font-size: 15px;
      font-weight: 600;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
      cursor: pointer;
      transition: 0.3s;
    }
    

    .pricing-card .action-btn {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 25px;
      font-weight: 600;
      font-size: 15px;
      color: #356BB5;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      transition: 0.3s ease;
    }

    .highlight {
      background: #2563eb;
      color: white;
    }

    .highlight .subtitle,
    .highlight .price,
    .highlight .user-limit,
    .highlight .features li {
      color: white;
    }

    .highlight .features li::before {
      color: white;
    }

    .highlight .action-btn {
      background-color: white;
      color: #2563eb;
    }

    .hidden {
      display: none;
    }
    
    .tab-subtitle{
      font-size: 16px;
      color: #A6A6A6;
      margin-bottom: 30px;
      font-weight: 700;
    }

    .xs-global-tab{
      padding: 10px 0;
      background: #fff;
      position: relative;
      overflow: hidden;
    }


    .tab-wrapper {
      display: flex;
      justify-content: center;
      margin-bottom: 40px;
    }
    
    .tab-toggle {
      display: inline-flex;
      background: #ffffff;
      border: 1px solid #e0e0e0;
      border-radius: 999px;
      padding: 4px;
      gap: 4px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Box shadow added */
    }
    
    .tab-option {
      padding: 10px 24px;
      border: none;
      background: transparent;
      color: #000;
      border-radius: 999px;
      font-weight: 500;
      font-size: 18px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .tab-option.active {
      background-color: #2563eb;
      color: #fff;
    }
    
    .pricing-box {
      width: 350px;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      background: #fff;
      text-align: center;
      position: relative;
    }
    
    /* Header Top (Blue area with arc) */
    .pro-card {
      width: 350px;
      background-color: #356BB5;
      color: #fff;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
      text-align: center;
      position: relative;
      margin-bottom: 3rem;
    }
    
    .pro-header {
      padding: 30px 20px 0;
      position: relative;
    }
    
    .pro-title {
      font-size: 30px;
      font-weight: 700;
      margin: 0;
    }
    
    .pro-subtext {
      font-size: 18px;
      margin: 10px 0 20px;
      line-height: 1.5;
    }
    
    .pro-price {
      font-size: 30px;
      font-weight: 700;
      position: relative;
      z-index: 2;
    }
    
    .price-arc {
      position: absolute;
      bottom: -15px;
      top: 71%;
      left: 5%;
      transform: translate(-5%);
      width: 100%;
      height: 110px;
      z-index: -7;
      border-radius: 50%;
      right: -14%;
    }
    
    .pro-body {
      background-color: #74A3E4;
      padding: 30px 30px 50px 30px;
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 24px;
      position: relative;
    }
    
    .user-badge {
      position: absolute;
      top: 15px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #356BB5;
      padding: 6px 16px;
      font-size: 13px;
      font-weight: 500;
      border-radius: 999px;
      color: #fff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      z-index: 3;
    }
    
    .pro-box {
      background: #fff;
      padding: 30px 20px;
      border-radius: 16px;
      color: #000;
      height: 368px;
      position: relative;
    }
    
    .pro-features {
      list-style: none;
      padding: 0;
      margin:30px 0 30px;
      text-align: left;
    }
    
    .pro-features li {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      font-weight: 500;
      margin-bottom: 16px;
    }
    
    .pro-features li::before {
      content: "✔";
      background-color: #356BB5;
      color: #fff;
      font-size: 14px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .cta-btn {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #2563eb;
      color: white;
      font-size: 15px;
      font-weight: 600;
      padding: 10px 20px;
      border: none;
      border-radius: 30px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
      cursor: pointer;
      width: calc(100% - 40px);
      max-width: 150px;
      text-align: center;
    }

    .upgrade-section {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 80px 0 0 0;
      position: relative;
    }
    
    .upgrade-container {
      display: flex;
      justify-content: space-between;
      background: #fff;
      border-radius: 30px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
      padding: 50px 20px 20px 30px;
      max-width: 1100px;
      width: 100%;
      gap: 40px;
      flex-wrap: wrap;
    }
    
    .upgrade-left {
      flex: 1;
      min-width: 300px;
      height: 100%;
      /* min-height: 100vh; */
      padding: 70px 0 70px 0px;
    }
    
    .upgrade-left h2 {
      font-size: 40px;
      font-weight: 700;
      margin-bottom: 15px;
    }
    
    .upgrade-subtext {
      font-size: 20px;
      color: #7B7B7B;
      margin-bottom: 25px;
      max-width: 400px;
      font-weight: 700;
    }
    
    .upgrade-features {
      list-style: none;
      padding: 0;
      margin: 0 0 30px 0;
    }
    
    .upgrade-features li {
      display: flex;
      align-items: center;
      font-size: 15px;
      margin-bottom: 12px;
      font-weight: 500;
    }
    
    .upgrade-features .dot {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #dbe9ff;
      display: inline-block;
      margin-right: 10px;
    }
    
    .upgrade-buttons {
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
    }
    
    .btn {
      padding: 12px 24px;
      border-radius: 30px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      border: none;
    }
    
    .btn.primary {
      background-color: #2563eb;
      color: #fff;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
    }
    
    .btn.secondary {
      background-color: #fff;
      border: 1px solid #ccc;
      color: #000;
    }
    
    .btn.full {
      width: 100%;
      margin-top: 20px;
    }
    
    /* Form Styling */
    .upgrade-right {
      flex: 1;
      min-width: 300px;
    }
    
    .upgrade-form {
      background-color: #f9fafb;
      border-radius: 24px;
      padding: 30px;
    }
    
    .upgrade-form .form-row {
      display: flex;
      gap: 16px;
      margin-bottom: 16px;
    }
    
    .upgrade-form input,
    .upgrade-form textarea {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid #ddd;
      border-radius: 12px;
      font-size: 14px;
      outline: none;
      background-color: #fff;
      transition: border 0.2s;
    }
    
    .upgrade-form textarea {
      resize: none;
      height: 80px;
      margin-top: 10px;
    }
    
    .upgrade-form input:focus,
    .upgrade-form textarea:focus {
      border-color: #2563eb;
    }

    .btn_sets{
      background-color: #356BB5 !important;
      color: #fff;
      box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
      border: 2px solid #1D55A2 !important;
      font-size: 16px;
      font-weight: 500;
      line-height: 10px;
      padding: 15px;
    }

    .form-submit{
      display: flex;
      gap: 16px;
      justify-content: center;
      align-items: center;
    }

    .footer-subtitle{
      font-size: 15px;
      color: #505050;
      margin: 10px;
      font-weight: 700;
    }

    .shape {
      position: absolute;
      z-index: 0;
      pointer-events: none;
    }
    
    .shape-top-right {
      position: absolute;
      top: 9%;
      right: 12%;
      width: 130px;
      z-index: -1;
    }
    
    .shape-bottom-left {
      position: absolute;
      bottom: -5%;
      left: 12%;
      width: 210px;
      z-index: -1;
    }
    

    /* Model Css */

    .modal-body {
      padding: 0;
      overflow: hidden;
      border: 1px solid #eee !important;
      border-radius: 8px;
  }

  .popupfooterbutton {
      border: 1px solid #eee;
      width: 100%;
      background: #fff;
      font-size: 16px;
      font-weight: 500;
      padding: 8px 0;
  }

  .popupfooterbutton:first-child {
      border-left: none;
      border-bottom: none;
      color: rgb(215, 13, 13);
  }

  .popupfooterbutton:last-child {
      border-left: none;
      border-right: none;
      border-bottom: none;
      color: rgb(88, 168, 8);
  }

  .form-body {
      padding: 20px;
  }
  .form-label
  {
      color: #000;
  }
  .form-label,
  .form-control, .form-check-label, .form-select{
      font-size: 14px;
  }

  .my-form-card {
      background: #f7f7f7;
      padding: 10px;
      border-radius: 4px;
      height: 380px;
      overflow-y: auto;
      overflow-x: hidden;
  }
  .form-check
  {
      line-height: 24px;
  }
    @media only screen and (max-width: 600px) {
    .container {
        width: 100%;
    }
    }
    @media only screen and (max-width: 768px)
    {
        .container {
            width: 100%;
        }
        .logo img {
            width: 92px;
        }
        .logo button {
          font-size: 14px;
      }
      .smalllabel {
          font-size: 14px;
          margin: 4px auto;
          width: 80%;
      }
      .banner-text h1
      {
          font-size:22px 
      }
      .banner-img img {
          width: 214px;
      }
      .main-text {
          font-size: 13px;
          margin: 24px auto;
          width: 90%;
      }
    }

    /* Tablets (768px and below) */
  @media (max-width: 991.98px) {
      .call-recording-points {
        width: 90%;
        margin-top: -40px;
      }
      .Key_Benefits::after {
          display: none;
      }
      .custom-tag {
        font-size: 14px;
        margin-bottom: 2rem;
      }
      .shape-top-right {
            display: none;
        }
        .shape-bottom-left {
            display: none;
        }
        .upgrade-left {
          flex: 1;
          min-width: 300px;
          height: 100%;
          min-height: auto;
          padding: 0;
      }
      .banner-img img {
          width: 100%;
          animation: floatUpDown 3s ease-in-out infinite;
      }
      .banner h1 {
          font-size: 40px;
          font-weight: 800;
          margin: 16px 0 28px 0;
      }
      .banner-img {
          margin-top: -115px;
      }
    }
    
    /* Mobile (576px and below) */
    @media (max-width: 575.98px) {
      .call-recording-points {
        width: 100%;
        margin-top: 0;
        padding: 0 15px;
      }
      .Key_Benefits::after {
        display: none;
      }
      .custom-tag {
          font-size: 13px;
          display: block;
          margin-bottom: 2rem;
        }
      .shape-top-right {
          display: none;
      }
      .shape-bottom-left {
          display: none;
      }

      .banner-img {
          padding: 10px 0;
        }
      
      .banner-img img {
          width: 100%; /* or max-width: 100%; */
          margin-top: 5rem;
      }
      .banner h1 {
          font-size: 35px;
          font-weight: 800;
          margin: 16px 0 28px 0;
      }

      .What_We_Offered {
          padding-top: 0;
      }
      .call-recording-data {
          margin: 15px;
      }
      .Key_Benefits {
          margin-top: 30px;
          position: relative;
          overflow: visible;
          z-index: 0;
      }
      .upgrade-section {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 0;
          position: relative;
      }
      .upgrade-form .form-row {
          display: flex;
          gap: 16px;
          margin-bottom: 20px;
          flex-direction: column;
      }
      .container {
          width: 100%;
          overflow: hidden;
      }
      .col-6 {
          flex: 0 0 auto;
          width: 100%;
      }
      .upgrade-container {
          display: flex;
          justify-content: space-between;
          background: #fff;
          border-radius: 30px;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
          padding: 50px;
          max-width: unset;
          width: unset;
          margin: 40px;
          flex-wrap: wrap;
      }
      .wwo-mainL h2 {
          font-size: 30px;
          font-weight: 700;
          margin: 4px 0 14px 0;
      }
      .call-recording-data h2 {
          font-size: 29px;
          font-weight: 700;
          margin: 4px 0 14px 0;
      }
      .upgrade-left {
          flex: 1;
          min-width: 300px;
          height: 100%;
          min-height: auto;
          padding: 0;
      }
    }

    html, body {
      overflow-x: hidden;
    }
    .wwo-mainL h2 span {
        color: #356bb5;
    }
    
    #form-loader {
      display: none;
      position: fixed;
      z-index: 10000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(255,255,255,0.8);
      justify-content: center;
      align-items: center;
    }
    
    #form-loader .spinner {
      border: 6px solid #f3f3f3;
      border-top: 6px solid #3498db;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }