body {
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
    background-color: #000000;
    color: #000000;
}

/*1 header line part-----------------------------------------------------------------------------complete */
.header_line {
    background-color: #000000;
}

.header_line h1{
    color: #7c7b7b;
    font-size: 25px;
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header nav img {
    height: 40px;
}

header nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

header nav.header_line ul {
    list-style: none;
    margin: 0;
    padding: 0 3px; 
    display: flex;
    align-items: center; 
}

header nav.header_line ul li {
    margin-left: 20px;
}

header nav.header_line ul li a {
    color: #7c7b7b; 
    text-decoration: none;
    font-size: 18px;
}

header nav.header_line ul li a:hover {
    color: #FF6600; 
}
/*1 header line part-----------------------------------------------------------------------------complete */

/*2 background color part-----------------------------------------------------------------------------complete */
.hero {
    text-align: center;
    padding: 100px 20px;
    background-image: url('/static/images/main_background.png');
    background-size: cover;
    background-position: center;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.hero {
  position: relative;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 80px 20px;

  /* Keep your background image setup here if you use it */
  background-size: cover;
  background-position: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}

.hero-inner {
  position: relative;
  max-width: 980px;
  padding: 28px 28px;
}

.hero h1 {
  margin: 0 0 14px;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.hero-subtitle {
  margin: 0 auto 14px;
  max-width: 900px;
  font-size: clamp(1.05rem, 2vw, 1.4rem);
  line-height: 1.6;
  opacity: 0.95;
}

.hero-tagline {
  margin: 0 auto 26px;
  max-width: 760px;
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0.85;
}

.hero-actions {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#get-start {
  border: 0;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.hero-link {
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.95);
  font-size: 0.95rem;
  background: rgba(0, 0, 0, 0.25);
}

.hero-link:hover {
  background: rgba(0, 0, 0, 0.38);
  border-color: rgba(255, 255, 255, 0.7);
}


/*2 background color part-----------------------------------------------------------------------------complete */


/*3 w3 selection of tab part-----------------------------------------------------------------------------complete */

.tab-content {
    display: none; /* Hide all tab contents by default */
  }
  
  .tab-content.active {
    display: block; /* Show the active tab content */
  }
  
  .w3-bar-item.w3-button.active {
    background-color: rgb(167, 167, 167); /* Background color for the active tab button */
    color: black; /* Text color for the active tab button */
  }
  
/*3 w3 selection of tab part-----------------------------------------------------------------------------complete */


/*5 tab selection overall part-------------------------------------------------------------------------------------------------------------------complete */

/*intron site prediction part-----------------------------------------------------------------------------complete */
/*upload file part*/
#file-status-1 button {
    display: inline-block;
    margin-left: 5px; /* Adjust margin as needed */
    background: none;
    border: none; /* Remove border */
    cursor: pointer;
    color: white; /* Set the color of the "x" */
    font-size: 16px; /* Adjust size if needed */
    outline: none; /* Remove outline */
    padding: 5px 5px;
}

#file-status-1 span {
    display: inline-block;
    margin-left: 10px;
}

#example1first button {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: white; /* White background */
    color: black; /* Black text color */
    border: 1px solid #ccc; /* Add a border to match the input field */
    border-radius: 15px;
    text-align: center;
}

#example2first button {
    display: inline-block;
    margin-left: 10px;
    padding: 6px 12px;
    cursor: pointer;
    background-color: white; /* White background */
    color: black; /* Black text color */
    border: 1px solid #ccc; /* Add a border to match the input field */
    border-radius: 15px;
    text-align: center;
}



.file-upload {
    margin-left: 33%;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.upload-text {
    margin-right: 10px; /* Adjust spacing between text and button */
}

.upload-button {
    display: inline-block;
    padding: 5px 12px;
    cursor: pointer;
    background-color: white; /* White background */
    color: black; /* Black text color */
    border: 1px solid #ccc; /* Add a border to match the input field */
    border-radius: 15px;
    text-align: center;
}

.upload-button:hover {
    background-color: #505050;
    color: white; /* Change text color on hover */
}
/*upload file part*/



/*option sub part*/
.options {
    flex: 0 0 150px; 
    display: flex;
    flex-direction: column;
    gap: 15px; 
}

.tab-content {
    display: block; 
    text-align: center;
    background-color: #000;
    color: #fff; 
    padding: 20px;
}

.tab-content select,
.tab-content input,
.tab-content textarea,
.tab-content button {
    color: #fff; /* White text for inputs, textareas, and buttons */
    background-color: #000; /* Black background for inputs, textareas, and buttons */
    border: 1px solid #ccc; /* Consistent border for all elements */
    border-radius: 6px; /* Rounded corners for all elements */
    box-shadow: none; /* Remove shadow effect */
    padding: 5px; /* Adjust padding as needed */
    font-size: 14px; /* Adjust font size as needed */
    outline: none; /* Remove outline on focus */
}

.tab-content input[type="file"],
.tab-content select,
.tab-content input[type="number"] {
    height: 30px; /* Set a consistent height for file input, select, and number input */
    padding: 5px; /* Adjust padding as needed */
    font-size: 14px; /* Adjust font size as needed */
    border: 1px solid #ccc; /* Ensure the border matches other elements */
    border-radius: 6px; /* Rounded corners to match other elements */
    background-color: #000; /* Consistent background color */
    color: #fff; /* Consistent text color */
}
/*option sub part*/
label[name="MSelection"] {
  white-space: nowrap;
}
.container {
    margin-left: 14%;
    margin-right: auto;
    display: flex;
    align-items: flex-start; /* Align items at the start vertically */
    justify-content: center; /* Center the container horizontally */
    gap: 10px; /* Add space between elements */
    width: 60%; /* Ensure the container takes the full width */
}

.container_intron_prediction {
    flex: 1; /* Allow the text area container to take available space */
    flex-direction: column;
    align-items: stretch; 
    display: flex;
    justify-content: center; /* Center horizontally */
}

textarea[name="intron_prediction"] {
    width: 85%; /* Take 60% of the container width */
    height: 320px; /* Adjust height */
    margin-top: 1%;
    margin-left: 10%;
    border-radius: 15px; /* Add this line for rounded edges */
    border: 1px solid #fff; /* Optional: to clearly see the border */
    padding: 10px; /* Optional: to add some padding inside the textarea */
}

.tab-content #submit {
    width: 100%; /* Adjust the width as needed */
    height:50px;
    padding: 10px 20px; /* Adjust padding to increase the space around the text */
    padding: 10px;
    margin-left: 0%;
    margin-top: 20px; /* Add margin to create space between the button and the input area */
    border-radius: 10px; /* Match the border radius with other elements */
    background-color: #000; /* Match the background color */
    color: #fff; /* Match the text color */
    border: 1px solid #ccc; /* Match the border */
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.tab-content #clear_input {
    width: 15%; /* Adjust the width as needed */
    height:50px;
    padding: 10px 20px; /* Adjust padding to increase the space around the text */
    margin-left: 0%;
    margin-top: 20px; /* Add margin to create space between the button and the input area */
    border-radius: 10px; /* Match the border radius with other elements */
    background-color: #000; /* Match the background color */
    color: #fff; /* Match the text color */
    border: 1px solid #ccc; /* Match the border */
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}


.button-group {
  display: flex;
  gap: 10px;           /* 按钮之间的间距 */
  width: 85%;          /* 与 textarea 一致 */
  margin-left: 10%;    /* 与 textarea 对齐 */
}


.tab-content #clear_input:hover {
    background-color: #505050;
    color: white; /* Change text color on hover */
}

.tab-content #submit:hover {
    background-color: #505050;
    color: white; /* Change text color on hover */
}
/*intron site prediction part-----------------------------------------------------------------------------complete */

/*SNP analysis part-----------------------------------------------------------------------------complete */
.snp-section-container h2{
    margin-right: 2%;
}

/*file upload part*/
.snp-section-container{
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 1%;
    display: flex;
    align-items: center; /* Align items at the start vertically */
    justify-content: center; /* Center the container horizontally */
    gap: 20%; /* Add space between elements */
    width: 100%; /* Ensure the container takes the full width */
    background-color: #000;
    color: #fff; 
}


#file-status-2 button,
#file-status-3 button {
    display: inline-block;
    margin-left: 5px; /* Adjust margin as needed */
    background: none;
    border: none; /* Remove border */
    cursor: pointer;
    color: white; /* Set the color of the "x" */
    font-size: 16px; /* Adjust size if needed */
    outline: none; /* Remove outline */
    padding: 5px 5px;
}

#file-status-2 span,
#file-status-3 span {
    display: inline-block;
    margin-left: 10px;
}



.file-upload-snp {
    display: flex;
    align-items: center; /* Align items at the center vertically */
    justify-content: center; /* Center the container horizontally */
    width: 100%; /* Ensure the container takes the full width */
    background-color: #000;
    color: #fff;
}

.upload-text-snp {
    margin: 10px;
    line-height: 1.5;
}

.upload-button-snp {
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background-color: white; /* White background */
    color: black; /* Black text color */
    border-radius: 15px;
    text-align: center;
    line-height: 1.5; /* Ensure consistent line height */
}

.upload-button-snp:hover {
    background-color: #505050;
}

/*file upload part*/

/*text area part*/
.SNP-text-area{
    margin-left: 10%;
    margin-right: 1%;
    margin-top: 1%;
    display: flex;
    align-items: center; /* Align items at the start vertically */
    justify-content: center; /* Center the container horizontally */
    gap: 5%; /* Add space between elements */
    width: 80%; /* Ensure the container takes the full width */
    background-color: #000;
    color: #fff; 
}

textarea[name="sequenceSNP1"] {
    width: 90%; /* Take 60% of the container width */
    height: 400px; /* Adjust height */
    border-radius: 15px; /* Add this line for rounded edges */
    border: 1px solid #fff; /* Optional: to clearly see the border */
    color: #fff; /* White text for inputs, textareas, and buttons */
    background-color: #000; /* Black background for inputs, textareas, and buttons */
    box-shadow: none; /* Remove shadow effect */
    padding: 5px; /* Adjust padding as needed */
    font-size: 14px; /* Adjust font size as needed */
}

textarea[name="sequenceSNP2"] {
    width: 90%; /* Take 60% of the container width */
    height: 400px; /* Adjust height */
    border-radius: 15px; /* Add this line for rounded edges */
    border: 1px solid #fff; /* Optional: to clearly see the border */
    color: #fff; /* White text for inputs, textareas, and buttons */
    background-color: #000; /* Black background for inputs, textareas, and buttons */
    box-shadow: none; /* Remove shadow effect */
    padding: 5px; /* Adjust padding as needed */
    font-size: 14px; /* Adjust font size as needed */
}

#example1second button {
    display: inline-block;
    margin-left: 5px;
    padding: 6px 12px;
    cursor: pointer;
    background-color: white; /* White background */
    color: black; /* Black text color */
    border: 1px solid #ccc; /* Add a border to match the input field */
    border-radius: 15px;
    text-align: center;
}

#example2second button {
    display: inline-block;
    margin-left: 15px;
    padding: 6px 12px;
    cursor: pointer;
    background-color: white; /* White background */
    color: black; /* Black text color */
    border: 1px solid #ccc; /* Add a border to match the input field */
    border-radius: 15px;
    text-align: center;
}

/*text area part*/


/*model selection*/
.options-snp {
    display: flex;
    flex-direction: column;
    width: 10%;
    gap: 15px; 
    margin-top: 2%;
    margin-left: 10%;
  }


.SNPcontainer {
  display: flex;
  gap: 15px; /* Add space between elements */
  background-color: #000;
  color: #fff;
}

.submit-container {
  display: flex;
  flex-wrap: nowrap;     /* 不换行 */
  align-items: center;
  gap: 10%;             /* 按钮之间的间距 */
  width: 100%;            /* 如果要与上方 textarea 对齐 */
  height: 180px;
  margin-left: 10%;
  margin-top: 12px;
}


#clear_input_snp {
    width: 10%; /* Adjust the width as needed */
    height: 40%;
    padding: 10px 20px; /* Adjust padding to increase the space around the text */
    margin-left: 0%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-top: -21%; /* Add margin to create space between the button and the input area */
    border-radius: 10px; /* Match the border radius with other elements */
    background-color: #000; /* Match the background color */
    color: #fff; /* Match the text color */
    border: 1px solid #ccc; /* Match the border */
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}


#SNP_analysis {
    width: 40%; /* Adjust the width as needed */
    height: 40%;
    padding: 10px 20px; /* Adjust padding to increase the space around the text */
    margin-left: 20%;
    margin-right: 0%;
    margin-bottom: 0%;
    margin-top: -21%; /* Add margin to create space between the button and the input area */
    border-radius: 10px; /* Match the border radius with other elements */
    background-color: #000; /* Match the background color */
    color: #fff; /* Match the text color */
    border: 1px solid #ccc; /* Match the border */
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

#SNP_analysis:hover {
    background-color: #505050;
    color: white; /* Change text color on hover */
}
#clear_input_snp:hover {
    background-color: #505050;
    color: white; /* Change text color on hover */
}

.SNPcontainer select,
.SNPcontainer input,
.SNPcontainer textarea,
.SNPcontainer button {
    color: #fff; 
    background-color: #000; 
    border: 1px solid #ccc; 
    border-radius: 6px; 
    box-shadow: none; 
    padding: 5px; 
    font-size: 14px;
    outline: none; 
}

.SNPcontainer input[type="file"],
.SNPcontainer select,
.SNPcontainer input[type="number"] {
    height: 30px; 
    padding: 5px; 
    font-size: 14px; 
    border: 1px solid #ccc; 
    border-radius: 6px; 
    background-color: #000; 
    color: #fff; 
}




/*model selection*/


/*User guide-------------------------------------------------------------------------------------------------------------------complete */

#user_guide {
  text-align: left;
  margin-left: 0%; /* optional: gives a nice indent */
}
#user_guide ul {
  margin-left: 0%; /* make bullet lists look tidy */
}
/*User guide-------------------------------------------------------------------------------------------------------------------complete */


/*5 tab selection overall part-------------------------------------------------------------------------------------------------------------------complete */




.why-choose {
    text-align: center;
    padding: 50px 20px;
    background-color: #000;
}

.why-choose h2 {
    color: #fff;
    font-size: 36px;
    margin-bottom: 30px;
}

.why-choose h3 {
    color: #fff;
}

.why-choose p {
    color: #fff;
}


.features {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.feature {
    flex: 1;
    max-width: 300px;
    margin: 20px;
    text-align: center;
}

.feature img {
    height: 80px;
    margin-bottom: 20px;
}

.feature h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.prediction {
    text-align: center;
    padding: 50px 20px;
    background-color: #fff;
}

.prediction h2 {
    font-size: 36px;
    margin-bottom: 30px;
}


.prediction button {
    background-color: #ff6600;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    margin-top: 20px;
}

.prediction button:hover {
    background-color: #ff4500;
}

footer {
    background-color: #000;
    color: #fff;
    padding: 20px;
    text-align: center;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-content img {
    height: 50px;
}

.citation {
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 16px 20px;
  border-left: 3px solid #2ecc71;
  background: rgba(255, 255, 255, 0.03);
}

.citation-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #2ecc71;
  margin-bottom: 8px;
}

.citation-text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #dddddd;
  margin: 0;
}


.footer-links {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.footer-links div {
    margin: 20px;
}

.footer-links h3 {
    font-size: 18px;
    margin-bottom: 10px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-links ul li a {
    color: #fff;
    text-decoration: none;
}

footer p {
    margin-top: 20px;
    font-size: 14px;
}

/* Existing Styles */