html {
    height: 100%; /* Ensure html fills the entire viewport height */
    /* You might also add overflow-y: auto; here, though body usually handles it */
}
body {  
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: rgb(50, 50, 50);
align-items: center;
}
.middle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

background-color: #2b2a2a; /* Black*/      
border-radius: 20px;    
padding: 40px 60px 80px;
margin-bottom: 30px; /* Adjust the value as needed */
/* hovering effect with border shadow */
box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
}
select {
font-weight:500;
font-style: normal;
font-family: "Raleway", sans-serif !important;
font-optical-sizing: auto;
text-align: center;

border: 0;
border-bottom: 2px solid black;
outline: 0;
font-size: 1.3rem;

padding: 7px 0;
background: transparent;
transition: border-color 0.2s;
border-width: 3px;
border-image: linear-gradient(to right, #11998e, #38ef7d);
border-image-slice: 1;
color: rgb(210, 210, 210) !important;

max-width: 70%;

}
option {
  color: black !important; /* Ensure options are visible */
  font-weight: 600 !important; /* Make options bold */
}
input {
font-weight:500;
font-style: normal;
font-family: "Raleway", sans-serif !important;
font-optical-sizing: auto;
text-align: center;
font-size: 1.2rem !important;
}
label {
  /* Silver */
  background: linear-gradient(to right, #8d8783, #4e4b48); 
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-top: 20px;
  margin-bottom: 10px;
}

textarea {
  width: 70%;
  max-width: 80%;
  height: 100px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-family: inherit;
  font-size: 1rem;
  resize: vertical; /* Allows vertical resizing only */
  color: #000;
}
summary {
/* Silver */
background: linear-gradient(to right, #8d8783, #4e4b48); 
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: silver;
}
details {
  max-width: 60%;
}

#phone-number {
  width: 50% !important; /* Ensure phone number input is wide enough */
  max-width: 55%; /* Limit the maximum width */
}
.location-details {
  cursor: pointer; /* Indicate that this is clickable */
}


/* Navbar */
.navbar-round {

display: flex;
flex-direction: row;
align-self: center;
align-items: center;
justify-content: center;

width: 100%;
height: 200px;
/* background-color: #111; */
background-color: rgb(48, 48, 48);
border-bottom-left-radius: 100%;
border-bottom-right-radius: 100%;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
position: relative;
top: -110px;
/* left: 80px; */
box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
padding-bottom: 10px;

transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
.dt-icon {
position: relative;
top: 55px;
left:100px;    
font-size: 50px;  

font-weight: 300;
font-style: normal;
font-family: "Raleway", sans-serif;
font-optical-sizing: auto;

 /* Green */
 background: linear-gradient(to right, #11998e, #38ef7d); 
 background-clip: text;
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;

}
.icon {
  /* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbarItems {
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
left:200px;
margin-top: 100px;
}
.navbarItems a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 17px;
color: #818181;
display: block;

font-weight:800;
font-style: normal;
font-family: "Raleway", sans-serif;
font-optical-sizing: auto;
}
/* When you mouse over the navigation links, change their color */
.navbarItems a:hover {
color: #f1f1f1;
}
.navbarItems .icon {
display: none;
}
/* Waves */
.waves {
position: absolute;
z-index:-999;
animation: wave-reveal 2s ease forwards; 
}
@keyframes wave-reveal {
0% {
transform: scale(0); /* Start small */
opacity: 0; /* Start invisible */
}
100% {
transform: scale(1); /* Scale to normal size */
opacity: 1; /* Fade in to full opacity */
}
}
/* Footer */
.footer {
display: flex;    
justify-content: center;
flex-direction: column;
align-items: center;
align-self: center;
gap:30px;
border-radius: 20px;

margin-top: auto;

/* position: relative;

top:100px; */

width:1000px;
/* height: 250px; */
background-color:rgb(45, 45, 45);
padding: 30px;
padding-bottom: 30px;
line-height: 1;

margin-bottom: 20px;

}
.footer-2 {
display: flex;    
justify-content: center;
flex-direction: column;
align-items: center;
align-self: center;
gap:30px;

border-radius: 20px;
margin-bottom: 20px;

position: relative;

/* top: 180px; */

width:1000px;
height: 250px;
background-color:rgb(54, 54, 54);
padding: 30px;  
line-height: 1;
}
.footer-group {
display: flex;    
justify-content: center;
flex-direction: row;
align-items: center;
gap:100px;
position: relative;
bottom: 30px;
}
.footer p {
font-weight:200;
font-style: normal;
font-family: "Raleway", sans-serif;
font-optical-sizing: auto;
text-align: center;
font-size:17px;
color: white;
margin-bottom:-10px;
}
.footer-member {
display: flex;    
justify-content: center;
flex-direction: column;
align-items: center;

}
.footer h2  {
position: relative;
left:20px;
}
#footer-terms {
line-height: 1.7;
}
.rememberMeContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.rememberMeCheckbox {
margin: 0 auto;
text-align: center;
}


.form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.form-1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.form-note {
font-size: 0.85rem;
color: #cfe2ff;
background: rgba(36, 46, 58, 0.7);
border-left: 3px solid #38ef7d;
padding: 10px 18px;
margin: 20px auto 8px;
text-align: center;
border-radius: 14px;
max-width: 520px;
line-height: 1.45;
letter-spacing: 0.15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.password-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
.container-code {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

}
#eye-visible-password {
color: white;  
cursor: pointer;
}
.no-account {
color:white;
}

.notification-opt-in {
  width: 70%;
  max-width: 80%;
  margin-top: 15px;
  text-align: left;
  color: #d6d6d6;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  background: none !important;
  background-clip: initial !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #d6d6d6 !important;
  color: #d6d6d6 !important;
  font-size: 0.95rem;
  line-height: 1.4;
}

.checkbox-label input[type="checkbox"] {
  margin-top: 3px;
}

.sms-fine-print {
  margin: 0;
  font-size: 0.75rem;
  color: #a7a7a7;
  line-height: 1.4;
}
input.invalid {
border-image: linear-gradient(to right, red, darkred) 1;
}
.action-status {
display: none; 
color: rgb(103, 223, 103) !important;
}
.error {
display:none; 
color: rgb(233, 109, 109) !important; text-align: center;
}


.signin-title {
margin-top:30px;
}
.password-wrapper {
display: flex;
align-items: center;
/* Remove width: 100% from here */
}
.form-input-style {
flex-grow: 1;
width: 0; /* This will allow the input to grow but not initially take full width */
}
.material-symbols-outlined {
color: white;
cursor: pointer;
margin-left: 5px;
flex-shrink: 0;
}


.h2-code {
color: white;
margin-top: 10px;
}
.input-code {
display: block;
position: relative;
left: 40px;
top: 40px;
margin: 5px 5px;
margin-bottom: 10px;
height: 30px; 
font-family: inherit;
width: 70%;
border: 0;
border-bottom: 2px solid black;
outline: 0;
font-size: 1.3rem;
color: white;
padding: 7px 0;
background: transparent;
transition: border-color 0.2s;
border-width: 3px;
border-image: linear-gradient(to right, #11998e, #38ef7d);
border-image-slice: 1;
}
.button-code {
position: relative;
top:60px;
left: 150px;
}
.no-account {
color:white;    
}


/* The message box is shown when the user clicks on the password field */
#message {
display:none;
background: #2e2d2d;
color: #000;  
padding: 20px;  
width: 400px;  
border-radius: 20px; 
}
#message p {
padding: 10px 35px;
font-size: 18px;
}
/* Add a green text color and a checkmark when the requirements are right */
.valid {
color: rgb(46, 192, 46) !important;
}
.valid:before {
position: relative;
left: -35px;
content: "\2714";
}
/* Add a red text color and an "x" icon when the requirements are wrong */
.invalid:not(.form-input-style) {
color: rgb(238, 76, 76) !important;
}
.invalid:before {
position: relative;
left: -35px;
content: "\00d7";
}
.phone-number-div {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

}
.countryCode {
width: 20%;
font-size: medium;
position: relative;
top:1px;
}

.chip, .selected-chip {
  display: inline-block !important;
  background: #23272f !important;
  color: #d7d7d7 !important;
  border-radius: 16px !important;
  padding: 4px 8px !important;
  margin: 2px 4px !important;
  font-size: 13px !important;
  position: relative !important;
}
.chip-x, .remove-chip-btn {
  background: none !important;
  border: none !important;
  color: #f7f6f6 !important;
  margin-left: 6px !important;
  cursor: pointer !important;
  font-size: 14px !important;
  padding: 10px !important;
}
.chip-x:hover {
  color: #ff0000 !important; /* Change color on hover */
}
.chips-container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-bottom: 6px !important;
}


.chips-options {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  background: #23272f;
  border: 1px solid #353a45;
  border-radius: 8px;
  padding: 12px 10px 10px 10px;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 210px;
  max-width: 100vw;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}
.chips-options.show {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.chips-option-btn {
  background: #353a45 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 4px 10px !important;
  cursor: pointer !important;
  margin: 2px !important;
}
.chips-option-btn:hover {
  background: #4b5363 !important;
}


.chips-input-wrapper {
  position: relative;
  width: 100%;
  max-width: 400px; /* or whatever fits your layout */
}
.chips-input-wrapper input.form-input-style {
  width: 100%;
  box-sizing: border-box;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .chips-input-wrapper {
    max-width: 98vw;
  }
  .chips-options {
    min-width: 140px;
    max-width: 98vw;
    font-size: 13px;
  }
  .chip {
    font-size: 12px !important;
    padding: 3px 8px !important;
    max-width: 80vw;
  }
  .chips-option-btn {
    font-size: 12px !important;
    padding: 3px 8px !important;
  }
}

@media (max-width: 400px) {
  .chips-options {
    min-width: 90px;
    max-width: 99vw;
    font-size: 11px;
    left: 0;
    right: 0;
  }
  .chip {
    font-size: 11px !important;
    padding: 2px 6px !important;
    max-width: 70vw;
  }
  .chips-option-btn {
    font-size: 11px !important;
    padding: 2px 6px !important;
  }
}

#location {
width: 100%;
max-width: 500px;
}

.countryCode {
  max-width: 30%;
}



/* MS Word Formatting Skills Section */
.ms-word-skills-section {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #f0f0f0; /* Light gray for text on a dark background */
    max-width: 800px;
    margin: 30px auto;
    padding: 25px;
    border: 1px solid #4a4a4a; /* Slightly lighter border for contrast */
    border-radius: 8px;
    background-color: #3a3a3a; /* Darker than body background but still dark */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* More visible shadow on dark */
}

.ms-word-skills-heading {
    color: #ffffff; /* White for main heading */
    margin-bottom: 20px;
    text-align: center;
}

.ms-word-skills-fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

/* Visually hidden but accessible legend for fieldset */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.ms-word-skills-explanation {
    margin-bottom: 20px;
    font-size: 0.95em;
    color: #e0e0e0; /* Lighter gray for explanation */
}

.ms-word-skill-option {
    margin-bottom: 15px;
    display: flex; /* Aligns checkbox/radio with label */
    flex-direction: row; /* Aligns items in a row */   
    align-items: center; /* Try centering them first, then adjust if needed */
}

.ms-word-skill-option input[type="radio"] {
    margin-right: 10px; /* Space between radio button and label */
    flex-shrink: 0; /* Prevents radio button from shrinking */
    /* Removed margin-top: 4px; */
    /* Add this to attempt to fine-tune vertical alignment */
    /* You might need to adjust the value (e.g., 2px, 3px, 5px) based on your browser/OS */
    position: relative;
    top: 2px; /* Small nudge up, common for radio/checkbox alignment */
}

.ms-word-skill-label {
    font-weight: bold;
    color: #ffffff; /* White for labels */
    margin-right: 5px; /* Space between bold label and description */
    /* To ensure the label also aligns well with the description,
       and doesn't push the radio button down */
    line-height: 1.2; /* Can help, or make it match the input's effective line-height */
}

.ms-word-skill-description {
    font-size: 0.9em;
    color: #c1bfbf; /* Slightly lighter gray for descriptions */
    /* To ensure consistency, set line-height here as well */
    line-height: 1.2;
    position: relative;
    top: 12px;
}

.ms-word-skills-section label {
  /* Orange */
background: linear-gradient(to right, #11998e, #38ef7d) !important; 
background-clip: text !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;

}

/* --- Responsive Adjustments for Smaller Screens --- */
@media (max-width: 1300px) { /* Adjust this breakpoint as needed for your layout */
    .ms-word-skills-section {
        width: 90%; /* Allows the section to shrink on narrower screens */
        padding: 20px; /* Slightly less padding to save space */
        margin: 20px auto; /* Adjust margin if needed */
        box-sizing: border-box; /* Crucial for responsive padding/width */
    }

    /* Adjust the radio button option layout for smaller screens */
    .ms-word-skill-option {
        flex-direction: row; /* Stack the radio button, label, and description vertically */
        align-items: flex-start; /* Align stacked items to the left */
    }

    .ms-word-skill-option input[type="radio"] {
        margin-right: 0; /* Remove horizontal margin when stacked */
        margin-bottom: 5px; /* Add some vertical spacing below the radio button */
        top: 0; /* Reset previous `top` adjustments for this stacked layout */
        width: 20px !important; /* Ensure radio button is large enough to be easily clickable */
    }

    .ms-word-skill-label {
        margin-right: 0; /* Remove horizontal margin when stacked */
        margin-bottom: 5px; /* Add some vertical spacing below the label */
        line-height: 1.4; /* May need more line-height for stacked text */
        position: relative;
        bottom: 25px;
    }

    .ms-word-skill-description {
        top: 0; /* Remove the `top: 12px;` offset for smaller screens */
        /* You might want to adjust line-height here if text feels too dense */
        line-height: 1.4; /* Example adjustment */
        margin-left: 5px; /* Add some left margin for better spacing */
    }
}

/* Optional: Even smaller screen adjustments if needed (e.g., for phones) */
@media (max-width: 480px) {
    .ms-word-skills-section {
        padding: 15px; /* Even less padding */
    }
    .ms-word-skills-heading {
        font-size: 1.2em; /* Shrink heading on very small screens */
    }
    .ms-word-skills-explanation,
    .ms-word-skill-description {
        font-size: 0.85em; /* Shrink text slightly */
    }
}




/* Rate Preferences Section */
.rate-preferences-section {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #f0f0f0; /* Light text on dark background */
    max-width: 800px;
    width: calc(100% - 40px); /* Responsive width with padding accounted for */
    margin: 30px auto;
    padding: 25px;
    box-sizing: border-box; /* Include padding and border in element's total width */
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    background-color: #3a3a3a;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.rate-preferences-heading {
    color: #ffffff;
    margin-bottom: 20px;
    text-align: center;
}

.rate-preferences-explanation {
    margin-bottom: 30px;
    font-size: 0.95em;
    color: #e0e0e0;
}

/* --- New: Grid Container for Rate Options --- */
.rate-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 20px; /* Space between grid items (columns and rows) */
}

.rate-option-block {
    /* Removed previous margin-bottom and border-bottom as grid gap will handle spacing */
    padding: 15px; /* Add internal padding for each block */
    background-color: #444; /* Slightly lighter dark background for individual blocks */
    border-radius: 5px;
    border: 1px solid #555; /* A subtle border for each block */
}

.rate-checkbox-line {
    display: flex;
    align-items: center;
    /* margin-bottom: 0; - This can remain if it's there globally, but no specific need here */
}

.rate-checkbox-line input[type="checkbox"] {
    margin-right: 10px;
    flex-shrink: 0;
    position: relative;
    top: 2px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.rate-label {
    font-weight: bold;
    font-size: 1.1em;
    color: #ffffff;
    background: linear-gradient(to right, #11998e, #38ef7d);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1300px) {
    .rate-preferences-section {
        padding: 20px;
        width: calc(100% - 30px);
    }

    .rate-preferences-heading {
        font-size: 1.5em;
    }

    .rate-preferences-explanation {
        font-size: 0.9em;
    }

    .rate-label {
        font-size: 1em;
    }

    /* --- New: Single column on smaller screens --- */
    .rate-options-grid {
        grid-template-columns: 1fr; /* Stack items into a single column */
        gap: 15px; /* Slightly less gap when stacked */
    }

    .rate-option-block {
        padding: 10px; /* Less padding on small screens */
    }
}

@media (max-width: 480px) {
    .rate-preferences-section {
        padding: 15px;
        width: calc(100% - 20px);
    }
    .rate-preferences-heading {
        font-size: 1.3em;
    }
    .rate-checkbox-line input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }
    .rate-label {
        font-size: 0.95em;
    }
}



/* Photo upload */
/* Upload Profile Picture Section */
.form-section {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #f0f0f0; /* Light text on dark background */
    max-width: 800px;
    width: calc(100% - 40px); /* Responsive width with padding accounted for */
    margin: 30px auto;
    padding: 25px;
    box-sizing: border-box; /* Include padding and border in element's total width */
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    background-color: #3a3a3a;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.section-title {
    color: #ffffff;
    margin-bottom: 15px;
    text-align: center;
}

.section-description {
    font-size: 0.95em;
    color: #e0e0e0;
    margin-bottom: 25px;
    text-align: center;
}

.file-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.upload-button {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(to right, #11998e, #38ef7d); /* Green gradient */
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    transition: filter 0.3s ease; /* Use filter for hover effect on gradient */    
}

.form-section label {
  -webkit-text-fill-color: unset !important; /* Ensure text color is not overridden */
}

.upload-button:hover {
    filter: brightness(1.1);
}

.file-name-display {
    font-size: 0.85em;
    color: #aaa;
}

/* Progress Bar Styling */
.upload-progress-container {
    width: 90%;
    max-width: 400px;
    background-color: #555;
    border-radius: 5px;
    overflow: hidden;
    height: 20px;
    position: relative;
}

.upload-progress-bar {
    height: 100%;
    width: 0%;
    background-color: #38ef7d; /* Green fill */
    transition: width 0.3s ease;
}

.upload-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.75em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Image Preview Styling */
.image-preview-container {
    position: relative;
    width: 150px;
    height: 150px;
    border: 1px dashed #777;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2b2a2a; /* Same as body background */
}

.image-preview-container img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain; /* Ensures the whole image is visible */
}

.delete-image-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(255, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1; /* Adjust for vertical centering of X */
    padding: 0;
    transition: background-color 0.2s ease;
}

.delete-image-button:hover {
    background-color: red;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .section-description {
        font-size: 0.9em;
    }
    .upload-button {
        padding: 8px 15px;
        font-size: 0.9em;
    }
    .file-name-display {
        font-size: 0.8em;
    }
    .upload-progress-container {
        width: 100%;
    }
    .image-preview-container {
        width: 120px;
        height: 120px;
    }
    .delete-image-button {
        width: 22px;
        height: 22px;
        font-size: 0.8em;
    }
}



/* Error Popup */
#error-popup {
display: none; /* Hidden by default */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Faded background */
justify-content: center;
align-items: center;
z-index: 1000; /* Ensure it's on top */
border-radius: 10px; 
}

#popup-content {
background-color: #35374B;
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#reload-button {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}

#error-popup-title {
color: rgb(214, 214, 214);
font-size: 20px;
margin-bottom: 20px;
font-weight: 600;
}

#error-popup-message {
color: rgb(214, 214, 214);
font-size: 16px;
margin-bottom: 20px;
}


/* Specific styles for National ID preview (PDF) */
.national-id-pdf-preview {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #333; /* Dark background for PDF preview area */
    color: #f0f0f0;
    font-size: 0.8em;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer; /* *** NEW: Indicate clickability *** */
}
.national-id-pdf-preview .pdf-icon {
    font-size: 3em;
    margin-bottom: 5px;
    line-height: 1;
}
.national-id-preview-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
/* Styles for the National ID Explanation Details */
.id-explanation-details {
    margin-top: 20px;
    margin-bottom: 25px; /* Space between explanation and upload fields */
    background-color: #333; /* Slightly lighter background than section */
    border: 1px solid #4a4a4a;
    border-radius: 5px;
    padding: 10px 15px; /* Padding inside the details block */
}

.id-explanation-summary {
    font-weight: bold;
    color: #a0a0a0; /* A slightly lighter, noticeable color for summary */
    cursor: pointer;
    padding: 5px 0; /* Padding around summary text */
    outline: none; /* Remove outline on focus for some browsers */
}

.id-explanation-summary:hover {
    color: #f0f0f0; /* Lighter on hover */
}

/* Styles for the National ID Explanation Details */
.id-explanation-details {
    max-width: 700px; /* NEW: Limit width to allow centering */
    margin: 20px auto 25px auto; /* NEW: Use auto for left/right margins to center */
    background-color: #333;
    border: 1px solid #4a4a4a;
    border-radius: 5px;
    padding: 10px 15px;
    box-sizing: border-box; /* Ensures padding is included in max-width */
}

.id-explanation-summary {
    font-weight: bold;
    color: #a0a0a0;
    cursor: pointer;
    padding: 5px 0;
    outline: none;
}

.id-explanation-summary:hover {
    color: #f0f0f0;
}

/* Style the content inside the details */
.id-explanation-content {
    padding-top: 10px;
    border-top: 1px solid #555;
    margin-top: 10px;
    font-size: 0.9em;
    color: #e0e0e0;
}

.id-explanation-content p {
    margin-bottom: 10px;
}

.id-explanation-content ul {
    list-style: disc;
    margin-left: 20px;
    padding-left: 0;
    margin-bottom: 10px;
}

.id-explanation-content li {
    margin-bottom: 5px;
}

.id-explanation-content strong {
    color: #ffffff;
}

/* Responsive adjustments for details */
@media (max-width: 600px) {
    .id-explanation-details {
        padding: 8px 12px;
        max-width: calc(100% - 24px); /* Adjust max-width for small screens with its own padding */
    }
    .id-explanation-summary {
        font-size: 0.95em;
    }
    .id-explanation-content {
        font-size: 0.85em;
    }
}



/* Styles for the dynamic list of supporting documents */
.supporting-doc-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between individual file items */
}

.file-item-container {
    display: flex;
    align-items: center;
    background-color: #444; /* Slightly lighter dark background for each file item */
    border: 1px solid #555;
    border-radius: 5px;
    padding: 10px;
    gap: 10px; /* Space between info and preview sections */
    flex-wrap: wrap; /* Allow content to wrap on smaller screens */
    color: #f0f0f0;
}

.file-item-info {
    flex-grow: 1; /* Allows info section to take available space */
    min-width: 150px; /* Ensures it doesn't get too squished */
}

.file-item-name {
    display: block;
    font-size: 0.9em;
    font-weight: bold;
    color: #ffffff;
    word-break: break-all; /* Breaks long filenames */
}

.file-item-progress-wrapper {
    width: 100%;
    height: 12px;
    background-color: #666;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 5px;
    position: relative;
}

.file-item-progress-bar {
    height: 100%;
    width: 0%;
    background-color: #38ef7d; /* Green fill */
    transition: width 0.3s ease;
}

.file-item-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 0.7em;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.file-item-preview {
    flex-shrink: 0; /* Prevents preview area from shrinking */
    width: 80px; /* Fixed width for preview area */
    height: 80px; /* Fixed height for preview area */
    border: 1px dashed #777;
    border-radius: 5px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2b2a2a;
    position: relative;
}

.file-item-img-preview {
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}

.file-item-pdf-preview {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #333;
    color: #f0f0f0;
    font-size: 0.7em;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
    cursor: pointer;
}

.file-item-pdf-preview .pdf-icon {
    font-size: 2em; /* Smaller icon for list item */
    margin-bottom: 3px;
    line-height: 1;
}

.file-item-delete-button {
    position: absolute;
    top: 2px;
    right: 2px;
    background-color: rgba(255, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.7em;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    padding: 0;
    transition: background-color 0.2s ease;
}

.file-item-delete-button:hover {
    background-color: red;
}

/* Responsive adjustments for supporting docs section */
@media (max-width: 600px) {
    .file-item-container {
        flex-direction: column; /* Stack info and preview on small screens */
        align-items: flex-start;
        padding: 8px;
    }
    .file-item-info {
        width: 100%; /* Take full width when stacked */
        margin-bottom: 10px;
    }
    .file-item-preview {
        width: 100px;
        height: 100px;
        align-self: center; /* Center preview when stacked */
    }
    .file-item-delete-button {
        width: 18px;
        height: 18px;
        font-size: 0.65em;
    }
}





/* Styles for the Terms and Expectations Section */
.terms-section {
    /* Reuses .form-section styles from previous parts (max-width, width, margin, padding, etc.) */
    margin-top: 30px; /* Add some space above this new section */
}

/* NEW: General instruction style */
.general-terms-instruction {
    font-size: 1em;
    color: #a0a0a0; /* Slightly lighter to stand out */
    text-align: center;
    margin-bottom: 30px; /* Space between instruction and first details block */
    padding: 0 10px; /* Some horizontal padding */
}


.terms-details {
    max-width: 700px; /* Limit width to allow centering */
    margin: 0 auto 15px auto; /* Centered, with bottom margin between details blocks */
    background-color: #333; /* Slightly lighter background than main section */
    border: 1px solid #4a4a4a;
    border-radius: 5px;
    overflow: hidden; /* Ensures content doesn't spill out on open/close */
    box-sizing: border-box; /* Include padding/border in width */
}

.terms-summary {
    display: flex;
    align-items: center;
    padding: 15px;
    cursor: pointer;
    outline: none; /* Remove default focus outline */
    background-color: #3a3a3a;
    color: #f0f0f0;
    font-weight: bold;
    font-size: 1.05em;
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent; /* Remove highlight on mobile */
}

.terms-summary:hover {
    background-color: #444;
}

/* Style the default disclosure triangle */
.terms-summary::marker,
.terms-summary::-webkit-details-marker {
    color: #38ef7d; /* Green color for the arrow */
    font-size: 1.2em; /* Make the arrow slightly larger */
}

.terms-summary-text {
    flex-grow: 1; /* Allows text to take up remaining space */
    /* Apply gradient to the label text */
    background: linear-gradient(to right, #005AA7, #FFFDE4);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback */
    /* No margin-right here as checkbox is moved */

    font-weight:600;
    font-style: normal;
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    text-align: center;
}



.terms-content {
    padding: 15px 25px;
    border-top: 1px solid #555;
    background-color: #2b2a2a; /* Darker background for content */
    color: #e0e0e0;
    font-size: 0.9em;
}

.terms-content p {
    margin-bottom: 10px;
}

.terms-content ol,
.terms-content ul {
    margin-left: 20px;
    padding-left: 0;
    margin-bottom: 10px;
}

.terms-content li {
    margin-bottom: 8px;
}

.terms-content li strong {
    color: #ffffff;
}

/* Style for nested lists if any */
.terms-content ul ul,
.terms-content ol ul,
.terms-content ul ol,
.terms-content ol ol {
    margin-left: 15px;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* NEW: Style for blockquote (used in Dispute Resolution) */
.terms-content blockquote {
    margin: 15px 0;
    padding: 10px 20px;
    border-left: 4px solid #38ef7d; /* Green left border */
    background-color: #333; /* Slightly lighter background */
    font-style: italic;
    color: #f0f0f0;
}
.terms-content blockquote p {
    margin-bottom: 0; /* Remove extra margin for paragraph inside blockquote */
}


/* Styles for the agreement checkbox inside the content */
.agreement-checkbox-wrapper {
    display: flex;
    align-items: flex-start; /* Align checkbox with first line of text */
    margin-top: 20px; /* Space above the checkbox */
    padding-top: 15px; /* Visual separation from content */
    border-top: 1px dashed #555; /* Separator line */
}

.agreement-checkbox-wrapper input[type="checkbox"] {
    margin-right: 10px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    position: relative;
    top: 4px; /* Adjust for vertical alignment with text */
    cursor: pointer;
}

.agreement-checkbox-wrapper label {
    flex-grow: 1;
    color: #f0f0f0;
    font-size: 0.9em;
    cursor: pointer;
    line-height: 1.4; /* Ensure good line height for text */
}

/* Responsive adjustments for terms section */
@media (max-width: 600px) {
    .general-terms-instruction {
        font-size: 0.9em;
        margin-bottom: 20px;
    }
    .terms-details {
        margin-bottom: 10px;
        /* max-width: calc(100% - 24px); */
    }
    .terms-summary {
        padding: 12px 15px;
        font-size: 1em;
    }
    .terms-summary::marker,
    .terms-summary::-webkit-details-marker {
        font-size: 1.1em;
    }
    .terms-content {
        padding: 10px 15px;
        font-size: 0.85em;
    }
    .terms-content ol,
    .terms-content ul {
        margin-left: 15px;
    }
    .agreement-checkbox-wrapper {
        margin-top: 15px;
        padding-top: 10px;
    }
    .agreement-checkbox-wrapper input[type="checkbox"] {
        width: 16px;
        height: 16px;
        top: 2px;
    }
    .agreement-checkbox-wrapper label {
        font-size: 0.85em;
    }
}

@media (max-width: 480px) {
    .terms-summary {
        font-size: 0.95em;
    }
    .terms-content {
        font-size: 0.8em;
    }
}
/* NEW: Style for h3 tags within terms content (for "Payment Processing and Tax Forms", etc.) */
.terms-content h3 {
    color: #ffffff; /* White for headings within content */
    font-size: 1.1em;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Add responsive adjustments for new h3 if necessary */
@media (max-width: 600px) {
    .terms-content h3 {
        font-size: 1em;
        margin-top: 15px;
    }
}


/* Styles for the main Privacy Policy and T&C agreement checkbox */
.main-agreement-checkbox-wrapper {
    display: flex;
    align-items: flex-start; /* Aligns checkbox with the start of the text */
    margin-top: 30px; /* Space above this agreement */
    margin-bottom: 20px; /* Space below this agreement, before submit button perhaps */
    padding: 15px; /* Add some padding around the box */
    border: 1px solid #4a4a4a; /* Subtle border */
    border-radius: 5px;
    background-color: #333; /* Background similar to other details sections */
    max-width: 700px; /* Match width of other terms sections */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    box-sizing: border-box; /* Include padding/border in width */
}

.main-agreement-checkbox-wrapper input[type="checkbox"] {
    margin-right: 10px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    position: relative;
    top: 2px; /* Adjust for vertical alignment with text */
    cursor: pointer;
}

.main-agreement-checkbox-wrapper label {
    flex-grow: 1;
    color: #f0f0f0; /* Light text color */
    font-size: 0.9em;
    cursor: pointer;
    line-height: 1.4;
}

.main-agreement-checkbox-wrapper label a {
    color: #38ef7d; /* Green color for links */
    text-decoration: none; /* No underline */
    font-weight: bold;
}

.main-agreement-checkbox-wrapper label a:hover {
    text-decoration: underline; /* Underline on hover */
}

.agree-privacy-terms {
  background: unset !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  margin-top: unset !important;
  margin-bottom: unset !important;
}

/* Responsive adjustments for this specific checkbox */
@media (max-width: 600px) {
    .main-agreement-checkbox-wrapper {
        padding: 10px;
        margin-top: 20px;
        margin-bottom: 15px;
        max-width: calc(100% - 20px); /* Adjust width for small screens */
    }
    .main-agreement-checkbox-wrapper input[type="checkbox"] {
        width: 16px;
        height: 16px;
        top: 2px;
    }
    .main-agreement-checkbox-wrapper label {
        font-size: 0.85em;
    }
}








.reusables {
/* BUTTON COLORS */
background-image: linear-gradient(to right, #6a11cb, #2575fc) !important;
background-image: linear-gradient(to right, #4b79a1, #283e51) !important;
background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
/* Soft green */
background-image: linear-gradient(to right, #0d665c, #2b9e6b) !important;
/* Soft pink */
background-image: linear-gradient(to right, #ff758c, #ff7eb3) !important;
/* Soft red */
background-image: linear-gradient(to right, #8b0000, #b22222) !important;
/* Soft silver */
background-image: linear-gradient(to right, #8d8783, #4e4b48) !important;
/* Purple linear background */
border-radius: 20px;
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

/* TEXT COLORS */
/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Gold */
background: linear-gradient(to right, #BF953F, #FCF6BA);  
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Silver */
background: linear-gradient(to right, #8d8783, #4e4b48); 
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Green */
background: linear-gradient(to right, #11998e, #38ef7d); 
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Orange */
background: linear-gradient(to right, #994711, #ef8a38); 
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Vibrant sunrise */
background: linear-gradient(45deg, #FFC371, #FF5F6D);  
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Red */
background: linear-gradient(to right, #ff758c, #ff7eb3);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* Violet, purple and blue linear-gradient. */
background: linear-gradient(to right, #8f00ff, #6a11cb, #2575fc);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;




/* BACKGROUND COLORS */
background-color: #35374B;
margin: 15% auto; 
padding: 20px;
padding-bottom: 50px;
border: none;
width: 300px; 
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
/* Body color */
background-color: #34393c;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

font-weight:600;
font-style: normal;
font-family: "Raleway", sans-serif;
font-optical-sizing: auto;
text-align: center;



}


/* MEDIAS */

@media screen and (max-width: 1300px) {
.navbarItems a {
display: none;
}
.navbarItems a.icon {
float: right;
display: block;
position: relative;
left: 50px;
font-size:30px;
top:3px;  
color:rgb(205, 205, 205);      
}

.dt-icon {        
font-size: 35px;
position: relative;
left:40px;
}  


}

@media screen and (max-width: 1300px) {

.navbar-round.responsive {
height: 400px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.navbar-round.responsive .dt-icon {
left:10px;      
top:80px;
}

.navbar-round.responsive .navbarItems {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;     
left:0px;        

}

.navbar-round.responsive .navbarItems a.icon {
display: block;
}

.navbar-round.responsive .navbarItems a {
display: block;
right:0px;
}

}



/* 299px */
@media only screen and (max-width: 299px) and (min-width: 250px) and (max-device-height:350px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
select, input {
  font-size: 0.8rem !important;
  width: 80% !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}



}

/* Jiophone 2 */
@media only screen and (max-width: 299px) and (min-width: 240px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 95% !important;
max-width: 95% !important;
gap: 10px;
height: unset !important;

}
.footer p {
font-size: 15px !important;
}
.footer a {
font-size: 15px !important;
}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 100% !important;
}
.password-div input {
  width: 100% !important;
}
.icon {
  left: 15px !important;
  font-size: 20px !important;
}
.dt-icon {
  font-size: 30px !important;
  left: 30px;
}
.signin-title {
  font-size: 30px !important;
}
.forgot-password {
  text-align: center !important;
}
.middle {
  padding: 40px 20px 80px !important; 
  width: 100% !important;
}
h2 {
font-size: 30px !important;
}
body {
  width: 100% !important;
}
html {
  width: 100% !important;
}
label {
  width: 90% !important;
}
input:not([type="checkbox"]) {
  width: 80% !important;
}
.signin-title {
  font-size: 1.5rem !important;
  width: 90% !important;
}
.ms-word-skills-section, .rate-preferences-section, .form-section, .main-agreement-checkbox-wrapper {
  width: 80% !important;
}
.form {
  width: 100% !important;
}
form {
  width: 100% !important;
}
.ms-word-skill-option {
  flex-direction: column;
}


}
/* 299px */
@media only screen and (max-width: 299px) and (min-width: 250px) and (min-device-height:400px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}


}

/* OPTIMIZED for Galaxy S9+  */
@media only screen and (max-width: 329px) and (min-width: 300px) and (min-device-height:600px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}


}

/* OPTIMIZED for Samsung Galaxy Z Fold 5 */
@media only screen and (width: 344px) and (height:882px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}




}

/* OPTIMIZED for iPhone: (SE, 12 Pro, X), Samsung: (Galaxy S8+, S20 Ultra,), Blackberry (Z30,)   */
@media only screen and (max-width: 399px) and (min-width: 330px) and (min-device-height:600px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 95% !important;
max-width: 95% !important;
gap: 10px;
height: unset !important;

}
.footer p {
font-size: 15px !important;
}
.footer a {
font-size: 15px !important;
}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 100% !important;
}
.password-div input {
  width: 100% !important;
}
.icon {
  left: 15px !important;
  font-size: 20px !important;
}
.dt-icon {
  font-size: 30px !important;
  left: 30px;
}
.signin-title {
  font-size: 30px !important;
}
.forgot-password {
  text-align: center !important;
}
.middle {
  padding: 40px 20px 80px !important; 
}
h2 {
font-size: 30px !important;
}


}

/* 399px and below (small screens, shorter height) */
@media only screen and (max-width: 399px) and (min-width: 300px) and (max-device-height:599px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}



}

/* Nokia Lumia 520 and iPhone 4*/
@media only screen and (max-width: 330px) and (min-width: 319px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 95% !important;
max-width: 95% !important;
gap: 10px;
height: unset !important;

}
.footer p {
font-size: 15px !important;
}
.footer a {
font-size: 15px !important;
}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 100% !important;
}
.password-div input {
  width: 100% !important;
}
.icon {
  left: 15px !important;
  font-size: 20px !important;
}
.dt-icon {
  font-size: 30px !important;
  left: 30px;
}
.signin-title {
  font-size: 30px !important;
}
.forgot-password {
  text-align: center !important;
}
.middle {
  padding: 40px 20px 80px !important; 
}
h2 {
font-size: 30px !important;
}

}


/* 449px and below (slightly larger screens, shorter height)* iPhone 6/7/8 Plus */
@media only screen and (max-width: 449px) and (min-width: 400px) and (max-device-height:669px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}



}

/* * {
outline: 1px solid red;
} */

/* OPTIMIZED for iPhone: (14 Pro Max, XR), Samsung: (Pixel 7, Galaxy A51/71 ) */ 
@media only screen and (max-width: 449px) and (min-width: 400px) and (min-device-height:670px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 95% !important;
max-width: 95% !important;
gap: 10px;
height: unset !important;

}
.footer p {
font-size: 15px !important;
}
.footer a {
font-size: 15px !important;
}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -135px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 100% !important;
}
.password-div input {
  width: 100% !important;
}
.icon {
  left: 15px !important;
  font-size: 27px !important;
}
.dt-icon {
  font-size: 30px !important;
  left: 30px;
}
.signin-title {
  font-size: 30px !important;
}
.forgot-password {
  text-align: center !important;
}
.middle {
  padding: 40px 20px 80px !important; 
}
h2 {
font-size: 30px !important;
}




}


/* OPTIMIZED for Microsoft Duo */
@media only screen and (max-width: 598px) and (min-width: 481px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}



}

/* Nokia N9 */
@media only screen and (max-width: 490px) and (min-width: 460px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}



}

/* 698px */
@media only screen and (max-width: 698px) and (min-width: 599px) and (min-height:500px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}


}

/* 698px 400px */
@media only screen and (max-width: 698px) and (min-width: 599px) and (max-height: 400px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}



}


/* OPTIMIZED for Ipad Air, Asus Zenbook Fold */
@media only screen and (max-width: 899px) and (min-width: 800px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}
}

/* OPTIMIZED for iPad Pro, Microsoft Surface Pro 7 */
@media only screen and (max-width: 1024px) and (min-width: 900px) and (min-height: 700px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}



}

/* OPTIMIZED for Nest Hub */
@media only screen and (max-width: 1024px) and (min-width: 900px) and (max-height: 600px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}




}

/* Targeting BlackBerry PlayBook in portrait orientation */
@media screen and (min-width: 600px) and (max-width: 600px) and (min-height: 1024px) and (max-height: 1024px) and (orientation: portrait) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}



}

/* Galaxy Tab S4 - Landscape*/
@media only screen and (max-width: 1200px) and (min-width: 1000px) and (max-height: 800px) and (orientation: landscape) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}



}

/* Nexus 7, Blackberry Playbook, Kindle Fire HDX */
@media only screen and (max-width: 800px) and (min-width: 600px) and (max-height: 1280px) and (orientation: portrait) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}



}

/* OPTIMIZED for Ipad Mini  */
@media only screen and (max-width: 799px) and (min-width: 699px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}



}

/* iPad Pro */
@media only screen and (max-width: 1200px) and (min-width: 1000px) and (min-height: 800px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}



}

/* Nest Hub Max */
@media only screen and (max-width: 1300px) and (min-width: 1200px) and (max-height: 800px) {
.footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 80% !important;
max-width: 80% !important;
gap: 10px;
height: unset !important;

}
.footer-group {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
align-self: center;
width: 90% !important;
max-width: 90% !important;
gap: 30px;
}
.footer h2 {
font-size: 25px !important;
left: unset !important;

/* Forest Whisper */
background: linear-gradient(to right, #005AA7, #FFFDE4);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.navbar-round {
width: 95% !important;
max-width: 95% !important;
top: -140px;
}
.waves {
width: 100% !important;
top: 50px !important;
}
.navbarItems {
  left: unset !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}




}




/* media max-width: 1300px and min-width: 599px */
@media only screen and (max-width: 1300px) and (min-width: 450px) { 
  .dt-icon {
    position: relative;
    top: 65px;
  }
  .navbarItems {
    position: relative;
    top: 10px;
  }
  input:not([type="checkbox"]) {
    width: 70% !important;
    font-size: 1.2rem;
  }
  .countryCode {
    width: 20% !important;
    max-width: 20% !important;
    position: relative;
    bottom: 10px !important;
    font-size: 1.1rem !important;
  }
  #phone-number {
    width: 80% !important;
    max-width: 60% !important;   
  }
  .chips-input-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  select {
    width: 50% !important;
    font-size: 1.2rem;
  }
  .agreement-checkbox-wrapper {
    display: flex;
  }
  .agreement-checkbox-wrapper > :first-child {
    flex: 1 1 0;
    /* Remove margin, use gap instead */
  }
  .agreement-checkbox-wrapper > :nth-child(2) {
    flex: 3 1 0;
    /* Remove margin, use gap instead */
  }
  .agreement-checkbox-wrapper {
    gap: 2px; /* Reduce gap to bring children closer */
  }
  .agreement-checkbox-wrapper input {
   top: unset !important;    
  }
  .agreement-checkbox-wrapper label {   
    margin-top: unset !important;
    margin-bottom: unset !important;
  }
  .password-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .main-agreement-checkbox-wrapper input {
    width: 20px !important;
    height: 20px !important;
    position: relative;
    top: unset !important;
  }
  .main-agreement-checkbox-wrapper label {
    margin: 0;
    padding: 0;  
    margin-left: 10px !important;
  }
  .middle {
    width: 90% !important;
  }
}

/* media max-width: 600px */
@media only screen and (max-width: 600px) {
  input:not([type="checkbox"]) {    
    font-size: 0.9rem !important;
    width: 80% !important;
  }
  select {
    font-size: 0.8rem !important;
  }
  .chips-input-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .countryCode {
    font-size: 0.8rem !important;
  }
  p {
    font-size: 0.8rem !important;
  }
  h3 {
    font-size: 1.2rem !important;
  }
  h2 {
    font-size: 1.5rem !important;
  }
  span {
    font-size: 0.8rem !important;
  }
  summary {
    font-size: 0.8rem !important;
  }
  .password-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .dt-icon {
    font-size: 2.2rem !important;
    top: 65px !important;
  }
  .navbarItems {
    position: relative;
    top: 10px;
  }
}