body {
    padding-top: 0;
    padding-bottom: 20px;
    background-color: #eee;
  }
  h1{font-size: 24px;}
  
  i.fa-trash-o{
    color:#f99;
    font-size: 16px;
  }
  i.fa-trash-o:hover {
    color:red;
  }
  
  .vertical_center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .form-signin, .form-signup {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
  }
  .form-signin h2, .form-signup h2 {
    font-size: 22px;
  }
  .form-signin .form-signin-heading,
  .form-signin .checkbox,
  .form-signup .form-signup-heading,
  .form-signup .checkbox {
    margin-bottom: 10px;
  }
  .form-signin .checkbox {
    font-weight: normal;
  }
  form .form-control {
    position: relative;
    height: auto;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  form select.form-control {
    height: 44px;
    margin-bottom: 10px;
  }
  
  form.form-control:focus,
  form .form-control:focus {
    z-index: 2;
  }
  .form-signin input[type="email"], .form-signin input[type="text"],
  .form-signup input[type="email"], .form-signin input[type="text"] {
    margin-bottom: -1px;
  }
  form input:last-of-type, form textarea:last-of-type {
    margin-bottom: 10px;
  }
  
  .modal-body {
      position: relative;
      overflow-y: auto;
      padding: 15px;
  }
  
  .project-preview.modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
  }
  .project-preview.modal-dialog .modal-content {
    height: auto;
    border-radius: 0;
  }
  .MR10 {
    margin-right: 10px !important;
  }
  /* Pricing Style Start */

  .single-price-plan{
    padding: 30px;
    background-color: #08829c;
    color: #fff;
    border-radius: 25px;
    min-height: 440px;
    position: relative;
  }
  .single-price-plan .plan-heading{

  }
  .single-price-plan .plan-heading span{
    font-weight: 300;
  }
  .single-price-plan .plan-heading .plan-period-price h1{
    font-weight: 700;
    font-size: 37px;
  }
  .single-price-plan .plan-heading .plan-period-price h1 span{
    font-size: 14px;
    font-weight: 400;
  }
  .plan-features ul.feature-list{
    padding-left: 0;
    font-weight: 300;
  }
  .plan-features ul.feature-list li{
    list-style: none;
    display: flex;
    gap: 10px;
  }
  .single-price-plan .plan-selection-btn {
    border-radius: 30px;
    position: absolute;
    bottom: 15px;
  }
  .single-price-plan .plan-selection-btn span{
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: #13072e;
    color: #fff;
  }
  
  
  .section-heading h3 {
      margin-bottom: 1rem;
      font-size: 3.125rem;
      letter-spacing: -1px;
  }
  
  .section-heading p {
      margin-bottom: 0;
      font-size: 1.25rem;
  }
  
  .section-heading .line {
      width: 120px;
      height: 5px;
      margin: 30px auto 0;
      border-radius: 6px;
      background: #2d2ed4;
      background: -webkit-gradient(linear, left top, right top, from(#e24997), to(#2d2ed4));
      background: linear-gradient(to right, #e24997, #2d2ed4);
  }
  /* Pricing Style End */
  /* ==========================================================================
     Credit Card Payment Section
     ========================================================================== */
     .credit-card{
      background-color: #f4f4f4;
       /* height: 100vh; */
       width: 100%;
       
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
     }
     .card-holder {
       margin: 2em 0;
     }
     .card-box {
       font-weight: 800;
       padding: 1em 1em;
       border-radius: 0.25em;
       box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     }
     .btn-primary2{
      background-image: -webkit-linear-gradient(315deg, #f54d70 0%, #fd8965 100%);
     background-image: -moz- oldlinear-gradient(315deg, #f54d70 0%, #fd8965 100%);
     background-image: -o-linear-gradient(315deg, #f54d70 0%, #fd8965 100%);
     background-image: linear-gradient(135deg, #f54d70 0%, #fd8965 100%);
     -webkit-filter: hue-rotate(0deg);
     filter: hue-rotate(0deg);
     border: none !important;
     }
     
     .credit-card form{
       background-color: #ffffff;
       padding: 0;
       max-width: 600px;
       margin: auto;
     }
     
     .credit-card .title{
       font-family: 'Abhaya Libre', serif;
       font-size: 1em;
       color: #2C3E50;
       border-bottom: 1px solid rgba(0,0,0,0.1);
       margin-bottom: 0.8em;
       font-weight: 600;
       padding-bottom: 8px;
     }
     .credit-card .card-details{
       padding: 25px 25px 15px;
     }
     
     .inner-addon {
       position: relative;
     }
     
     .inner-addon .fas, .inner-addon .far {
       position: absolute;
       padding: 10px;
       pointer-events: none;
       color: #bcbdbd !important;
     }
     .right-addon .fas, .right-addon .far { right: 0px; top: 40px;}
     .right-addon input { padding-right: 30px; }
     
     .credit-card .card-details label{
       font-family: 'Abhaya Libre', serif;
       font-size: 14px;
       font-weight: 400;
       margin-bottom: 15px;
       color: #79818a;
       text-transform: uppercase;
     }
     
     .credit-card .card-details input[type="text"], .credit-card .card-details input[type="number"] {
       font-family: "Poppins", sans-serif;
       font-size: 16px;
       font-weight: 500;
       padding: 10px 10px 10px 5px;
       /* -webkit-appearance: none; */
       display: block;
       background: #fafafa;
       color: #636363;
       border: none;
       border-radius: 0;
       border-bottom: 1px solid #757575;	
     }
     .credit-card .card-details input[type="text"]:focus, .credit-card .card-details input[type="number"]:focus { outline: none; }
     
     .credit-card .card-details button{
       margin-top: 0.6em;
       padding:12px 0;
       font-weight: 600;
     }
     
     .credit-card .date-separator{
        margin-left: 10px;
         margin-right: 10px;
         margin-top: 5px;
     }
     /* Remove Arrow icon on input type="number" Start */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  /* Firefox */
  input[type=number] {
    -moz-appearance: textfield;
  }
  /* Remove Arrow icon on input type="number" End */
     
     @media (max-width: 768px) {
       .credit-card{
         height: 250vh;
         width: 100%;
       }
       .credit-card .title {
         font-size: 1.2em; 
       }
     
       .credit-card .row .col-lg-6 {
         margin-bottom: 40px; 
         }
         .credit-card .card-details {
           padding: 40px 40px 30px; 
         }
     
         .credit-card .card-details button {
           margin-top: 2em; 
         } 
     }