.ec-layoutRole__main {
  background: #F8F9FC;
}

.service-card-hoverbox {
  background: #FFFFFF;
}

.card-container {
  margin-left: 30px;
  margin-right: 30px;

  .application-card-title {
    font-size: 32px;
    color: #3F444D;
    border-bottom: 1px solid #94A0B8;
  }

  .card-content-container {
    margin-bottom: 6rem;

    .card-items {
      border-bottom: 1px solid #94A0B8;

      .product-option {
        width: 246px;
        height: 366px;
        display: block;
        position: relative;
        margin-bottom: 20px;
        border-radius: 10px;
        box-shadow: 0 0 15px rgba(135, 146, 151, 0.2);
      }

      .card-content {
        width: 246px;
        height: 481px;
        background-color: #FFFFFF;
        border-radius: 10px;
        padding: 20px 0 0 20px;

        .card-header {
          margin-bottom: 16px;

          .card-label {
            font-size: 15px;
            color: #23272F;
            font-weight: 700;
            line-height: 1.5;
            margin-bottom: 4px;
            display: flex;
            align-items: start;
            height: 76px;
            justify-content: start;

            span {
              font-size: 15px;
              font-weight: 700;
              max-width: 85px;
              height: 23px;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

          .card-title {
            font-size: 31px;
            font-weight: 700;
            line-height: 1.5;
          }

          .premium {
            color: #BE923A;
          }

          .advanced {
            color: #37A39A;
          }

          .standard {
            color: #3590D0;
          }

          .economy {
            color: #D57031;
          }

          .startup_economy {
            line-height: 0.9;
            color: #94A0B8;
          }

          .card-subtitle {
            font-size: 16px;
            color: #3F444D;
            font-weight: 500;
            line-height: 1.5;
          }
        }

        .card-price {
          font-size: 35px;
          font-weight: 700;
          color: #1B1F27;
          line-height: 1.3;
          margin-bottom: 14px;

          .currency {
            font-size: 22px;
            font-weight: 400;
            line-height: 1.3;
            color: #1B1F27;
          }

          .period {
            font-size: 22px;
            font-weight: 400;
            line-height: 1.3;
            color: #1B1F27;
          }
        }

        .card-description {
          font-size: 15px;
          color: #23272F;
          line-height: 1.7;
          font-weight: 400;
        }
      }

      .card-content.premium {
        border: 1px solid #D3A955;
      }

      .card-content.advanced {
        border: 1px solid #60BEB6;
      }

      .card-content.standard {
        border: 1px solid #61ACE1;
      }

      .card-content.economy {
        border: 1px solid #EF8949;
      }

      .card-content.startup_economy {
        border: 1px solid #94A0B8;
      }

      .quantity-info {
        .form-quantity {
          background: #FFFFFF;
          width: 100%;
          padding: 0 15px;
          border: 1px solid;
          border-radius: 150px;
          max-width: 250px;
          height: 70px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          button {
            background: none;
            border: none;
          }

          button:disabled {
            opacity: 0.9;
            cursor: not-allowed;
          }


          span {
            color: #000000;
            font-size: 32px;
          }
        }

        .btn-delete-product {
          background: none;
          border: none;
          color: #1791CD;
          font-size: 20px;
        }

        .price-product {
          color: #1B1F27;

          font-size: 29px;
          font-weight: 700;
          line-height: 1.3;
          margin-bottom: 14px;

          .currency {
            font-size: 22px;
            font-weight: 400;
            line-height: 1.3;
          }

          .period {
            font-size: 22px;
            font-weight: 400;
            line-height: 1.3;
          }
        }
      }

    }

    .card-total {
      max-width: 590px;
      max-height: 427px;
      background-color: #FFFFFF;
      border-radius: 20px;
      padding: 43px 28px;
      margin-right: 15px;

      .quantity-card {
        font-size: 24px;
        font-weight: bold;
        border-bottom: 1px solid;
        color: #3F444D;

        p {
          padding-bottom: 10px;
        }
      }

      .total-amount {
        font-size: 24px;
        font-weight: bold;
        color: #000000;
      }

      .total-tax {
        color: #3F444D;
        font-size: 24px;
      }

      .proceed-to-application {
        font-size: 24px;
        width: 100%;
        max-width: 360px;
        height: 70px;
        background: #000000;
        color: #FFFFFF;
        border-radius: 150px;
        border: none;
      }
    }
  }

  @media (min-width: 992px) {
    .col-5th {
      flex: 0 0 20%;
      max-width: 20%;

      .service-link {
        text-align: end;

        .months {
          font-size: 13px;
        }
      }
    }
  }

  @media (max-width: 576px) {
    margin-left: 10px;
    margin-right: 10px;

    .application-card-title {
      font-size: 30px;
    }

    .card-total {
      margin-top: 10px;
      line-height: 1.8;

      .proceed-to-application {
        font-size: 22px !important;
      }
    }
  }

  .no-product {
    font-size: 20px;
    margin-bottom: 8rem;
    color: #3F444D;
  }
}

.modal-dialog-centered {
  min-height: calc(100% - var(--bs-modal-margin) * 10);
  max-width: 868px;
  margin-top: 85px;
  .modal-add-to-card {
    border-radius: 30px;
    height: 427px;
    .modal-header {
      border-bottom: 1px solid #000000;
      .modal-title {
        font-weight: bold;
        font-size: 24px;
        color: #3F444D;
      }
      .button-close{
        background: none;
        border: none;
      }
    }
    .modal-body {
      p {
        font-weight: bold;
        font-size: 28px;
        color: #000000;
      }
    }
    .modal-footer{
      border-top: none;

      button {
        border-radius: 150px;
        width: 328px;
        height: 70px;
      }

      .btn-secondary{
        color: #000000;
        background: none;
        border: 1px solid;
        font-size: 24px;
      }

      .btn-primary {
        background: #000000;
        color: #FFFFFF;
        font-size: 24px;
      }
    }
  }
}

/* Disable hover effects for cart items */
.service-card-hoverbox.no-hover {
  pointer-events: none;
}

.service-card-hoverbox.no-hover:hover .service-title-back {
  color: #333333 !important;
}

.service-card-hoverbox.no-hover:hover .service-icon-wrap {
  opacity: 1 !important;
}

.service-card-hoverbox.no-hover:hover .service-link-front {
  color: #424242 !important;
  text-decoration: none !important;
}

.service-card-hoverbox.no-hover:hover .service-card-back {
  opacity: 0 !important;
}

.service-card-hoverbox.no-hover .service-title-front {
  opacity: 1 !important;
  display: block !important;
}

@media screen and (max-width: 432px) {
  .modal-body p {
    font-size: 22px !important;
    margin-top: 0px !important;
  }
}