body {  
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 30px;
}

.middle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #ffffff; /* light card */
border: 1px solid #e5e7eb; /* subtle border */
border-radius: 16px;
padding: 40px 28px 56px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
max-width: 560px;
width: 92%;
}


form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
 gap: 14px;
}


.password-div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
  width: 100%;
  max-width: 360px;
  margin-bottom: 16px;
}
.container-code {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#eye-visible-password {
  color: #4b5563; /* gray-600 */
  cursor: pointer;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
}
/* Make room for the eye icon */
.password-div input[type="password"] {
  padding-right: 40px;
}
.mfa-factor-select {
width: 80% !important;
height: 80% !important;
}
.mfa-factor-select option {
  color: #000;
}
.button-code {
margin-top: 20px;
}
.resend-code {
background-image: linear-gradient(to right, #1884b7, #7ba9b9) !important;
}
.no-account {
color: #374151;
}
input.invalid {
border-image: linear-gradient(to right, red, darkred) 1;
}
.action-status {
  display: none; /* toggled by JS */
  background: #ecfdf5; /* emerald-50 */
  color: #065f46; /* emerald-800 */
  border: 1px solid #a7f3d0; /* emerald-200 */
  border-left: 4px solid #10b981; /* accent */
  padding: 10px 14px 10px 38px;
  margin: 8px 0 12px 0;
  border-radius: 10px;
  font-weight: 600;
  position: relative;
}
.action-status::before {
  content: '\2714';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #10b981;
  font-weight: 700;
}

.error {
  display: none; /* toggled by JS */
  background: #fef2f2; /* red-50 */
  color: #991b1b; /* red-800 */
  border: 1px solid #fecaca; /* red-200 */
  border-left: 4px solid #ef4444; /* accent */
  padding: 10px 14px 10px 38px;
  margin: 8px 0 12px 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  position: relative;
}
.error::before {
  content: '\26A0'; /* warning sign */
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #ef4444; /* red-500 */
  font-weight: 700;
}



/* Footer */
.footer {
display: flex;    
justify-content: center;
flex-direction: column;
align-items: center;
align-self: center;
gap:30px;
border-radius: 16px;
max-width: 1000px;
width: 90%;
background: #ffffff;
border: 1px solid #e5e7eb;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
padding: 30px;  
line-height: 1;
}
.footer-2 {
display: flex;    
justify-content: center;
flex-direction: column;
align-items: center;
align-self: center;
gap:30px;

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

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: #2d3748;
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: inline-flex; /* shrink-wrap the content to avoid large gaps on iOS */
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
  margin: 10px auto 0 auto; /* center the inline-flex block */
  white-space: nowrap; /* keep checkbox and label together */
}
.rememberMeCheckbox {
  margin: 0; /* let flexbox center the row */
  text-align: center;
  width: 20px;
  height: 20px;
  -webkit-appearance: checkbox; /* ensure native checkbox styling on iOS */
  appearance: checkbox;
  accent-color: #2563eb; /* modern accent color for supported browsers */
}
.rememberMeContainer label {
  color: #374151;
  cursor: pointer;
  user-select: none;
  line-height: 20px; /* align vertically with the checkbox */
  flex: 0 0 auto; /* prevent stretching on some mobile browsers */
}

@media (max-width: 399px) {
  .rememberMeContainer { gap: 6px; }
  .rememberMeContainer label { font-size: 14px; }
}

.forgot-password {
  display: block;
  text-align: center;
  margin-top: 12px;
}



/* MEDIAS */

/* 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;
}
select, input {
  font-size: 0.8rem !important;
  width: 100% !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 {
  margin: 0 0 8px 0;
  font-weight: 700;
}

/* Ensure inputs look consistent within this page without overriding globals */
.form input.form-input-style,
.container-code input.form-input-style {
  width: 100%;
  max-width: 360px;
}

#signIn-button {
  min-width: 180px;
}
.forgot-password {
  text-align: center !important;
}
.middle {
  padding: 40px 20px 80px !important; 
}
h2 {
font-size: 30px !important;
}

}
/* 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;
}
select, input {
  font-size: 0.8rem !important;
  width: 80% !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;
}
select, input {
  font-size: 0.8rem !important;
  width: 80% !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;
}
select, input {
  font-size: 1rem !important;
  width: 80% !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;
}
select, input {
  font-size: 1rem !important;
  width: 100% !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;
}
select, input {
  font-size: 1rem !important;
  width: 80% !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;
}
select, input {
  font-size: 1rem !important;
  width: 100% !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;
}
select, input {
  font-size: 1rem !important;
  width: 80% !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;
}
select, input {
  font-size: 1rem !important;
  width: 100% !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;
}
select, input {
  font-size: 1rem !important;
  width: 80% !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;
}
select, input {
  font-size: 1rem !important;
  width: 80% !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;
}
select, input {
  font-size: 1rem !important;
  width: 80% !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;
}
select, input {
  font-size: 1rem !important;
  width: 80% !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;
}
select, input {
  font-size: 1.5rem !important;
  width: 80% !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;
}
select, input {
  font-size: 1.5rem !important;
  width: 80% !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;
}
select, input {
  font-size: 1.5rem !important;
  width: 80% !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;
}
select, input {
  font-size: 1.5rem !important;
  width: 80% !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;
}
select, input {
  font-size: 1.5rem !important;
  width: 80% !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;
}
select, input {
  font-size: 1.5rem !important;
  width: 80% !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;
}
select, input {
  font-size: 1.5rem !important;
  width: 80% !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;
}
select, input {
  font-size: 1.5rem !important;
  width: 80% !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;
}
select, input {
  font-size: 1.5rem !important;
  width: 80% !important;
}
.password-div {
  width: 80% !important;
}
.password-div input {
  width: 100% !important;
}




}