/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  .modal-services{
    max-width: 600px;
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
  }
  
  /* The Close Button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  /* The Modal (background) */
.modal2 {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 4; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content2 {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close2 {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close2:hover,
.close2:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
  .content-box{
    margin-bottom: 5px;
    padding-left: 5px;
    max-width:90%;
  }
  .pricing-headline {
    font-family: "Oswald", sans-serif;
    font-size: 24px;
    /* text-align: center; */
    width: 100%;
    margin-top: 0px;
    margin-bottom: 5px;
    display: inline-block;
    background-color: rgb(164, 225, 65);
  }

  .pricing-headline-mobile {
    font-family: "Oswald", sans-serif;
    font-size: 24px;
    /* text-align: center; */
    width: 100%;
    margin-top: 70px;
    display: inline-block;
    background-color: rgb(164, 225, 65);
  }
  
  .pricing-sub-headline {
    font-family: "Oswald", sans-serif;
    font-size: 18px;
    /* text-align: center; */
    width: 100%;
    display: inline-block;
    margin: 0px;
  }
  

  .content-modal {
    font-family: "Open Sans", sans-serif;
    font-size: 16px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 0 0 0;
    /* text-align: center; */
  }

  .logo-modal {
    float: left;
    height: 50px;
    padding-right: 20px;
    margin-bottom: 10px;
  }

  .disclaimer-modal{
    font: 8px;
    font-style: italic;
    font-family: "Lato", sans-serif;
    padding-left: 20px;
    padding-right: 20px;
  }
  .modal3 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  /* Modal Content/Box */
.modal-content3 {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close3 {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close3:hover,
.close3:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.faqaccordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 95%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.25rem;
  transition: 0.4s;
}

.active, .faqaccordion:hover {
  background-color: #ccc; 
}

.faqpanel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
  width: 95%
}

.pricing-item {
  display: flex;
  align-items: center; /* Ensures vertical alignment */
  margin-bottom: 5px;
  padding-left: 10px;
}

.description {
 flex-grow: 0; /*Takes up remaining space */
 max-width: 70%;
}

.separator {
  flex-grow: 1;
  flex-shrink: 0; /* Allows shrinking if space is tight */
  /*width: 100px; /* Adjust this value to control the separator length */
  /*max-width: 100px;*/
  border-bottom: 1px dotted #ccc; 
  border-bottom-width: 2px;/* Dotted line as separator */
  margin: 0 10px; /* Spacing between description and price */
}

.price {
  flex-shrink: 0; /* Prevents price from shrinking */
  font-weight: bold;
}

.description-text {
  font-size: 0.9em; /* Slightly smaller than headings */
  color: #555; /* Softer color for better readability */
  margin-bottom: 10px; /* Adds space before the pricing items */
  line-height: 1.4; /* Improves readability for longer descriptions */
}