@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');  body {     font-family: 'Roboto', sans-serif;     background-color: #121212;     color: #e0e0e0;     font-size: 18px;     line-height: 1.6; }  .navbar {     background-color: #1e1e1e;     padding: 0.5rem 0;     box-shadow: 0 4px 6px rgba(0, 0, 0, .1); }  .navbar-brand {     font-size: 2.2rem;     font-weight: 700;     letter-spacing: 1px; }  .navbar-brand sup {     font-size: 0.4em;     position: relative;     top: -1.4em }  .nav-link {     font-size: 1.2rem;     font-weight: 500;     text-transform: uppercase;     padding: 0.7rem 0.7rem !important;     margin: 0 0.3rem;     transition: all 0.3s ease; }  .nav-link:hover, .nav-link:focus {     color: #4da3ff !important;     background-color: rgba(77, 163, 255, 0.1);     border-radius: 5px; }  .navbar-nav .nav-link.active {     color: #4da3ff !important;     font-weight: 600; }  .btn-navbar {     font-size: 1.1rem;     font-weight: 500;     padding: 0.7rem 1.8rem;     margin-left: 0.7rem;     border-radius: 30px;     transition: all 0.3s ease; }  .btn-outline-light:hover {     background-color: #4da3ff;     color: #121212; }  section {     padding: 100px 0; }  h1, h2, h3, h4, h5, h6 {     font-weight: 700;     margin-bottom: 1.5rem; }  h1 {     font-size: 3.5rem; }  h2 {     font-size: 2.8rem; }  h3 {     font-size: 1.7rem; }  p {     font-size: 1.1rem;     margin-bottom: 1.5rem; }  .feature-icon {     font-size: 4rem;     margin-bottom: 1.5rem;     color: #4da3ff; }  .price-card {     background-color: #1e1e1e;     border: 1px solid #333;     border-radius: 15px;     padding: 1rem;     transition: all 0.3s ease; }  .price-card:hover {     transform: translateY(-10px);     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); }  #voices .container {     max-width: 1400px;     margin: 0 auto; }  .voice-selection {     display: flex;     flex-wrap: wrap;     justify-content: center;     gap: 30px;     padding: 20px; }  .avatar-container {     position: relative;     width: 140px;     height: 140px; }  .avatar {     width: 100%;     height: 100%;     border-radius: 50%;     background-color: #4da3ff;     overflow: hidden;     box-shadow: 0 5px 15px rgba(77, 163, 255, 0.3); }  .avatar img {     width: 100%;     height: 100%;     object-fit: cover; }  .play-button {     position: absolute;     top: -10px;     right: -10px;     width: 50px;     height: 50px;     border-radius: 50%;     background-color: #4da3ff;     border: none;     cursor: pointer;     display: flex;     justify-content: center;     align-items: center;     z-index: 1;     transition: all 0.3s ease; }  .play-button:hover {     background-color: #3a7ac5;     transform: scale(1.1); }  .play-icon {     width: 0;     height: 0;     border-left: 15px solid #ffffff;     border-top: 10px solid transparent;     border-bottom: 10px solid transparent; }  .accordion-button {     font-size: 1.2rem;     padding: 1.5rem; }  .accordion-body {     font-size: 1.1rem;     padding: 1.5rem; }  footer {     padding: 50px 0;     font-size: 1.1rem; }  footer h5 {     font-size: 1.4rem;     margin-bottom: 1.5rem; }  footer ul li {     margin-bottom: 0.8rem; }  footer a {     color: #4da3ff;     text-decoration: none;     transition: all 0.3s ease; }  footer a:hover {     color: #3a7ac5;     text-decoration: underline; }  #faq {     background-color: #121212;     color: #e0e0e0; }  #faq .accordion-item {     background-color: #1e1e1e;     border: 1px solid #333; }  #faq .accordion-button {     background-color: #2c2c2c;     color: #e0e0e0; }  #faq .accordion-button:not(.collapsed) {     background-color: #4da3ff;     color: #fff; }  #faq .accordion-button:focus {     box-shadow: 0 0 0 0.25rem rgba(77, 163, 255, 0.25); }  #faq .accordion-body {     background-color: #1e1e1e;     color: #e0e0e0; }  #faq .accordion-button::after {     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e0e0e0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }  #faq .accordion-button:not(.collapsed)::after {     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }  .card-price {     font-size: 3em;     color: #7ee97e }  .card-credit {     font-size: 1.2em;     color: #ee8a18; }  .list-unstyled :last-child {     color: rgb(231, 145, 210); }  .list-unstyled {     text-align: center; }  .golink {     color: #d19b07 !important;     cursor: pointer; }  .starPrice {     font-size: 0.8em; }  .btn-success {     background-color: #06C755;     border-color: #06C755; }  .btn-success:hover {     background-color: #05a847;     border-color: #05a847; }  .modal-title {     color: #1e1e1e; }  .badge {     display: inline-block;     padding: .25em .4em;     font-size: 75%;     font-weight: 700;     line-height: 1;     text-align: center;     white-space: nowrap;     vertical-align: baseline;     border-radius: .25rem;     transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out }  @media (prefers-reduced-motion:reduce) {     .badge {         transition: none     } }  a.badge:focus, a.badge:hover {     text-decoration: none }  .badge:empty {     display: none }  .btn .badge {     position: relative;     top: -1px }  .badge-pill {     padding-right: .6em;     padding-left: .6em;     border-radius: 10rem }  .badge-primary {     color: #fff;     background-color: #007bff }  a.badge-primary:focus, a.badge-primary:hover {     color: #fff;     background-color: #0062cc }  a.badge-primary.focus, a.badge-primary:focus {     outline: 0;     box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .5) }  .badge-secondary {     color: #fff;     background-color: #6c757d }  a.badge-secondary:focus, a.badge-secondary:hover {     color: #fff;     background-color: #545b62 }  a.badge-secondary.focus, a.badge-secondary:focus {     outline: 0;     box-shadow: 0 0 0 .2rem rgba(108, 117, 125, .5) }  .badge-success {     color: #fff;     background-color: #28a745 }  a.badge-success:focus, a.badge-success:hover {     color: #fff;     background-color: #1e7e34 }  a.badge-success.focus, a.badge-success:focus {     outline: 0;     box-shadow: 0 0 0 .2rem rgba(40, 167, 69, .5) }  .badge-info {     color: #fff;     background-color: #17a2b8 }  a.badge-info:focus, a.badge-info:hover {     color: #fff;     background-color: #117a8b }  a.badge-info.focus, a.badge-info:focus {     outline: 0;     box-shadow: 0 0 0 .2rem rgba(23, 162, 184, .5) }  .badge-warning {     color: #212529;     background-color: #ffc107 }  a.badge-warning:focus, a.badge-warning:hover {     color: #212529;     background-color: #d39e00 }  a.badge-warning.focus, a.badge-warning:focus {     outline: 0;     box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .5) }  .badge-danger {     color: #fff;     background-color: #dc3545 }  a.badge-danger:focus, a.badge-danger:hover {     color: #fff;     background-color: #bd2130 }  a.badge-danger.focus, a.badge-danger:focus {     outline: 0;     box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .5) }  .badge-light {     color: #212529;     background-color: #f8f9fa }  a.badge-light:focus, a.badge-light:hover {     color: #212529;     background-color: #dae0e5 }  a.badge-light.focus, a.badge-light:focus {     outline: 0;     box-shadow: 0 0 0 .2rem rgba(248, 249, 250, .5) }  .badge-dark {     color: #fff;     background-color: #343a40 }  a.badge-dark:focus, a.badge-dark:hover {     color: #fff;     background-color: #1d2124 }  a.badge-dark.focus, a.badge-dark:focus {     outline: 0;     box-shadow: 0 0 0 .2rem rgba(52, 58, 64, .5) }  .terms-privacy-content {     text-align: left !important; }  /* .terms-privacy-content {    background-color: #000000;    margin: 5% auto;    padding: 20px;    border: 1px solid #888;    width: 80%;    max-width: 800px;    max-height: 80%;    overflow-y: auto;    border-radius: 5px;} */ .close-btn {     color: #ffffff;     float: right;     font-size: 28px;     font-weight: bold;     cursor: pointer; }  .close-btn:hover, .close-btn:focus {     color: #ffffff;     text-decoration: none;     cursor: pointer; }  .terms-privacy-content h1 {     color: #c0dbec;     border-bottom: 2px solid #c0dbec;     padding-bottom: 10px;     font-size: 2em; }  .terms-privacy-content h3 {     color: #5fa6d6;     margin-top: 30px;     font-size: 1.4em; }  .terms-privacy-content p, ul {     color: #ffffff;     line-height: 1.6;     margin-bottom: 15px; }  .terms-privacy-content ul {     padding-left: 20px; }  .terms-privacy-content .date {     font-style: italic;     color: #7f8c8d; }  .language-switcher {     position: relative;     width: 100%;     -webkit-backdrop-filter: blur(15px);     backdrop-filter: blur(15px); }  .button-container {     display: flex;     justify-content: space-between;     align-items: stretch;     gap: 10px; }  .language-button {     flex-grow: 1;     background-color: #4CAF50;     color: white;     padding: 0;     font-size: 16px;     border: none;     cursor: pointer;     border-radius: 5px;     overflow: hidden;     display: flex;     align-items: center;     min-width: 0;     position: relative; }  .language-button-content {     display: flex;     align-items: center;     justify-content: flex-start;     padding: 10px 15px;     width: 100%;     height: 100%;     min-width: 0; }  .language-name {     flex-grow: 1;     text-align: left;     margin-left: 0px;     white-space: nowrap;     overflow: hidden;     text-overflow: ellipsis;     min-width: 0; }  .language-menu {     display: none;     position: absolute;     background: rgba(255, 255, 255, 1);     width: 100%;     box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);     z-index: 1;     border-radius: 5px;     overflow: hidden;     bottom: 100%;     left: 0;     margin-bottom: 5px;     -webkit-backdrop-filter: blur(15px);     backdrop-filter: blur(15px); }  .language-menu a {     color: black;     padding: 8px 16px;     text-decoration: none;     display: flex;     align-items: center; }  .language-menu a:hover {     background-color: #ddd; }  .language-menu a.active {     background-color: #4CAF50;     color: white; }  .flag {     width: 24px;     height: 16px;     margin-right: 10px;     background-size: cover;     display: inline-block;     flex-shrink: 0; }  #signin-with-google {     text-align: center;     margin: 0 auto; }  /* Price Modal */ .modal-content {     background-color: #1e1e1e;     backdrop-filter: blur(10px);     -webkit-backdrop-filter: blur(10px);     border: none;     border-radius: 15px;     color: #ffffff; }  .card {     background: linear-gradient(145deg, #2c3e50, #1a1c20);     border: none;     border-radius: 15px;     transition: all 0.3s ease;     overflow: hidden; }  .card:hover {     transform: translateY(-5px) scale(1.02); }  .card-header {     color: #e0e0e0;     font-weight: bold;     text-align: center;     padding: 0.5rem;     font-size: 1.2rem;     border-bottom: none; }  .commercial {     background: linear-gradient(135deg, #4a69bd 0%, #6a89cc 100%); }  .non-commercial {     background: linear-gradient(135deg, #b33939 0%, #ff5252 100%); }  .card-body {     padding: 0.5rem;     text-align: center; }  .card-title {     font-size: 1.5rem;     font-weight: bold;     margin-bottom: 0.5rem;     color: #e0e0e0; }  .card-text {     color: #b0b0b0;     font-size: 0.9rem;     margin-bottom: 0.3rem; }  .commercial-use {     color: #4cd137;     font-weight: bold; }  .non-commercial-use {     color: #ff5252;     font-weight: bold; }  .btn-commercial, .btn-selected {     border: none;     border-radius: 25px;     padding: 0.5rem 1rem;     font-weight: bold;     text-transform: uppercase;     letter-spacing: 1px;     transition: all 0.3s ease;     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);     font-size: 0.8rem; }  .btn-choose {     background: linear-gradient(135deg, #f28e35 0%, #d02f2f 100%);     color: #fff;     border-radius: 25px; }  .btn-choose:hover {     background: linear-gradient(135deg, #f28e35 0%, #d02f2f 100%);     transform: translateY(-2px);     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);     color: #fff; }  .btn-selected {     background: linear-gradient(135deg, #4b4b4b 0%, #3a3a3a 100%);     color: #b0b0b0;     cursor: default; }  .btn-selected:hover {     background: linear-gradient(135deg, #4b4b4b 0%, #3a3a3a 100%);     transform: none;     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); }  @keyframes float {     0% {         transform: translateY(0px);     }      50% {         transform: translateY(-5px);     }      100% {         transform: translateY(0px);     } }  #voice-preview-container {     font-family: 'Sarabun', sans-serif;     line-height: 1.6;     color: #333;     max-width: 100%;     margin: 0 auto;     padding: 20px; }  #voice-preview-language-select {     max-width: 200px;     margin-bottom: 20px; }  #voice-preview-list {     list-style-type: none;     padding: 0; }  #voice-preview-list .card {     height: 100%; }  #voice-preview-list .card-body {     display: flex;     align-items: center;     justify-content: space-between;     padding: 10px;     text-align: left; }  .voice-preview-play-button {     background: none;     border: none;     cursor: pointer;     font-size: 1.5rem;     color: #007bff;     padding: 0; }  .voice-preview-play-button:hover {     color: #0056b3; }  .voice-name {     flex-grow: 1;     text-align: center;     margin: 0 10px; }  .voice-gender-avatar {     width: 40px;     height: 40px;     object-fit: cover;     border-radius: 50%; }  input[type="email"], input[type="text"] {     box-sizing: border-box;     width: 100%;     padding: 10px;     margin-bottom: 10px;     background-color: #2c2c2c;     border: 1px solid #3a3a3a;     color: #e0e0e0;     border-radius: 4px; }  input[type="email"]:focus, input[type="text"]:focus {     background-color: #3a3a3a;     border-color: #4a4a4a;     color: #ffffff;     outline: none; }  .message {     padding: 10px;     margin-bottom: 10px;     border-radius: 4px; }  .message.info {     background-color: #1a2a3a;     color: #64b5f6; }  .message.error {     background-color: #3a1a1a;     color: #ef5350; }  .message.warning {     background-color: #3a2a1a;     color: #ffa726; }  .message.success {     background-color: #1a3a1a;     color: #66bb6a; }  #cooldownTimer {     font-weight: bold;     color: #ef5350; }  .hidden {     display: none; }  #lineLoginBtn {     width: 100%;     padding: 10px;     margin-bottom: 10px;     background-color: #66bb6a;     color: #ffffff;     border: none;     border-radius: 4px;     cursor: pointer; }  #lineLoginBtn:hover {     background-color: #66bb6a; }  #submit-check, #submit-verifyCode, #create-accout-btn {     width: 100%;     padding: 10px;     margin-bottom: 10px;     background-color: #3a989b;     color: #ffffff;     border: none;     border-radius: 4px;     cursor: pointer; }  #submit-check:hover, #submit-verifyCode:hover, #create-accout-btn:hover {     background-color: #266567; }  #emailSignInBtn, #backToOptions, #backToEmail {     width: 100%;     padding: 10px;     margin-bottom: 10px;     background-color: #2c2c2c;     color: #ffffff;     border: none;     border-radius: 4px;     cursor: pointer; }  #emailSignInBtn:hover, #backToOptions:hover, #backToEmail:hover {     background-color: #4a4a4a; }  .modal-header {     border: none !important; }  .close-btn-modal {     color: #fff !important;     border: none;     background: none;     outline: none;     font-size: 22px;     position: absolute;     right: 10px;     top: 10px;     z-index: 99; }  .modal-body {     padding: 20px !important }  button[type="submit"]:disabled {     cursor: not-allowed !important;     opacity: 0.2;     pointer-events: none; }