*{
    box-sizing: border-box;
}

:root {
    --body-color: #000;
    --border: #444;
    --nav: #000;
    --container: #333;
    --offer-container: #1A171A;
    --offer-border: #F4831B;
    --border:#902EBB;
    --nav-border: #444;
    --nav-bg: #63C328;
    --h1-color: #F4831B;
    --h2-color: #63C328;
    --h3-color: #EEEB27;
    --h4-color: #EEEB27;
    --p: #999;
    --a: #63C328;
    --bold-p: #F4831B;
    --active-color: #F4831B;
    --hover-color: #63C328;
    --box-name-color: #902EBB;
    --strong-color: #F4831B;
    --icon-color: #FFF;
    --quote: #99CFCA;
    --img-border: #63C328;
    --accessibility: #000;
    --pwa: #902EBB;
    --apk: #902EEB;
    --btn-border: #63C328;
    --input: #333;--social: #FFFFFF1A;
    --social-hover: #EB6123;
}

.light-mode {
    --body-color: #B9D9EB;
    --border: #222;
    --nav: #AFEEEE;
    --container: #e4e4e4;
    --container-2-bg: #dddddd;
    --offer-container: #ffffff;
    --offer-border: #444;
    --dropdown-bg: #f0f0f0;
    --border-color: #ccc;
    --nav-border: #444;
    --h1-color: #63C328;
    --h2-color: #1d6f0a;
    --h3-color: #bb6e00;
    --h4-color: #b1aa00;
    --p: #000;
    --a: #000;
    --bold-p: #EB6123;
    --active-color: #000;
    --hover-color: #1d6f0a;
    --box-name-color: #7a6589;
    --strong-color: #000;
    --icon-color: #000;
    --quote: #407875;
    --img-border: #1d6f0a;
    --social: #0000001A;
    --social-hover: #EB6123;
}

html,body{height: 100%;margin: 0;padding: 0;font-family: Arial, Helvetica, sans-serif;background: var(--body-color);
color: var(--p-color);font-size: 16px;text-align: left;scroll-behavior: smooth;line-height: 1.6;overflow-x: hidden;}
h1,h2, h3,h4,h5,h6 {text-align: left;}
h1{color: var(--h1-color);}
h2{margin-top: 0;color: var(--h2-color);}
h3{color: var(--h3-color);}
h4{margin-top: 10px; margin-bottom: 0; font-size: 18px;color: var(--h4-color);}
p, .text {margin-top: 10px;;color: var(--p);}
a {text-decoration: underline;color: var(--a);font-weight: bold;}
a:hover{font-weight: bold;}
ul{line-height: 1.6;}
li{margin-bottom: 5px;font-size: 16px;text-align: left;line-height: 1.4;color: var(--p);}
li strong{color: var(--p);}
.bold-text{font-weight: bold;color: var(--bold-p);}
span{color: var(--p);}

.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

.section-title {
  color: var(--h1-color);
}

html, body, 
header, nav, main, aside, footer, 
.accessibility-widget, 
.accessibility-item, 
.mobile-nav-hover, 
.mobile-nav-compact {
    transition: background-color 0.4s ease, color 0.4s ease;
}

.accessibility-item:hover {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.accessibility-high-contrast,
.accessibility-high-contrast body,
.accessibility-high-contrast header,
.accessibility-high-contrast nav,
.accessibility-high-contrast main,
.accessibility-high-contrast aside,
.accessibility-low-contrast .footer-top,
.accessibility-low-contrast .footer-bottom,
.accessibility-high-contrast .accessibility-widget,
.accessibility-high-contrast .accessibility-item,
.accessibility-high-contrast .accessibility-icon,
.accessibility-high-contrast .mobile-nav-hover,
.accessibility-high-contrast .mobile-nav-compact {
    background-color: #000 !important;
    color: #fff !important;
}

.accessibility-high-contrast .accessibility-item:hover {
    background-color: #333 !important; 
    color: #fff !important;
}

.accessibility-low-contrast,
.accessibility-low-contrast body,
.accessibility-low-contrast header,
.accessibility-low-contrast nav,
.accessibility-low-contrast main,
.accessibility-low-contrast aside,
.accessibility-low-contrast .footer-top,
.accessibility-low-contrast .footer-bottom,
.accessibility-low-contrast .accessibility-widget,
.accessibility-low-contrast .accessibility,
.accessibility-low-contrast .accessibility-item,
.accessibility-low-contrast .accessibility-icon,
.accessibility-low-contrast .mobile-nav-hover,
.accessibility-low-contrast .mobile-nav-compact {
    background-color: #f5f5f5 !important;
    color: #222 !important;
}

.accessibility-low-contrast h1,
.accessibility-low-contrast h2,
.accessibility-low-contrast h3,
.accessibility-low-contrast h4,
.accessibility-low-contrast h5,
.accessibility-low-contrast h6,
.accessibility-low-contrast p,
.accessibility-low-contrast a,
.accessibility-low-contrast li,
.accessibility-low-contrast span,
.accessibility-low-contrast div {
    color: #222 !important;
}

.accessibility-low-contrast .soon {
    background-color: #ddd !important;
    color: #222 !important; 
    border: 1px solid #ccc; 
}

.accessibility-low-contrast a {
    color: #0056b3 !important; 
}

.accessibility-low-contrast a:hover {
    color: #003366 !important; 
}

.accessibility-low-contrast .accessibility-item:hover {
    background-color: #ddd !important;
    color: #000 !important;
}

.accessibility-bold-font * {
    font-weight: bold !important;
}

.accessibility-grayscale {
    filter: grayscale(100%) !important;
}

.left-handed-mode .some-ui-element {
    left: auto;
    right: 0;
}  

.content {
    padding-bottom: 80px;
}

.soon {
    height: 15px;
    width: 50px;
    border-radius: 5px;
    padding: 5px;
    margin-left: 5px;
    font-size: 14px;
    font-weight: bold;
    background: #4302A4;
    color: #FFF;
}

.soon span {
    display: inline-block;
    text-decoration: none !important;
}

.new {
    height: 15px;
    width: 50px;
    border-radius: 5px;
    padding: 5px;
    margin-left: 5px;
    font-size: 14px;
    font-weight: bold;
    background: #902EBB;
    color: var(--p-color);
}

.upcoming {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.3;
}

.language-switcher, .fa-magnifying-glass{color: var(--p);}

.coming-soon {
    color: #EEEB27;
    font-weight: bold;
}

.hide {
    display: none;
}

.hero p strong {color: #7ecafa;}

.quote {
    font-size: 18px;
    font-weight: bold;
    color: var(--quote);
}

.captcha-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }
  
.captcha-modal {
    position: relative; 
    background: #111;
    color: #fff;
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    max-width: 320px;
    width: 90%;
    animation: slideDown 0.3s ease;
}
  
  .captcha-modal input,
  .captcha-modal button {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    font-size: 1rem;
    border-radius: 6px;
    border: none;
    outline: none;
  }
  
.captcha-modal button {
    background-color: #39b327;
    color: white;
    cursor: pointer;
}
  
#captcha-close {
    position: absolute;
    display: block; 
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    z-index: 10;
}
  
#captcha-close:hover {
    color: #F4831B;
}
  
.error-msg {
    color: red;
    font-weight: bold;
    margin-top: 10px;
}
  
.hidden {
    display: none !important;
}

button[disabled] {
    background: #444;
    color: #bbb;
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
  }
  
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }  

header {
    height: 60px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--nav);
    padding: 15px;
    z-index: 10;
}

.header-left,
.header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.brand {
    display: flex;
    align-items: center;
}

.brand-img {
    height: 40px;
    width: 40px;
    object-fit: contain;
    border-radius: 50%;
    cursor: pointer;
}

.nav-menu {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
}

.nav-item {
    display: flex;
    flex-direction: row; 
    align-items: center;
    gap: 6px; 
    color: var(--p);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
    padding: 4px 10px;
    border-radius: 6px;
}

.nav-item:hover,
.nav-item.active {
    color: var(--p);
    background: var(--nav-bg); 
}

.nav-item i {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-item span {
    font-weight: bold;
    white-space: nowrap;
}

.dropdown {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.dropdown span {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--container);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    min-width: 160px;
    flex-direction: column;
    z-index: 999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    padding: 5px 0;
}

.dropdown:hover .dropdown-content {
    display: flex;
}

.dropdown-content a {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--p-color);
    font-size: 14px;
    gap: 8px;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.dropdown-content a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--hover-color);
}

.search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: var(--p-color);
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.3s ease;
}

.search-icon:hover {
    background: rgba(255, 255, 255, 0.1);
}

.header-search-form {
    position: fixed;
    top: 0;
    left: 0;
    height: 60px;
    width: 100%;
    background: var(--input);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    gap: 10px;
    z-index: 20;
}

.header-search-form.hide {
    display: none;
}

.header-search-form input {
    flex: 1;
    padding: 10px 12px;
    font-size: 16px;
    border: none;
    border-radius: 6px;
    background: var(--input);
    color: var(--a);
    outline: none;
}

.header-search-form button {
    background: var(--pwa);
    color: #fff;
    border: none;
    padding: 10px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.header-search-form button:hover {
    background: #d96e10;
}

.xmark {
    display: none;
    font-size: 20px;
    color: var(--p-color);
    cursor: pointer;
    margin-left: 8px;
}

.xmark.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

#light-mode-header {
    color: #777;
}

.pwa-installer {
    width: 80px;
    color: var(--p);
    border: 2px solid var(--btn-border);
    border-radius: 10px;
    padding: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-right: 15px;
    text-decoration: none;
    text-align: center;
    display: inline-block;
}

.pwa-installer:hover {
    background-color: var(--pwa); 
    transform: translateY(-1px);
}

.pwa-installer:active {
    transform: scale(0.98);
}

.apk-installer {
    width: 80px;
    background: var(--apk); 
    color: #fff;
    border: 2px solid var(--apk);
    border-radius: 10px;
    padding: 5px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    text-align: center;
    display: inline-block;
}

.apk-installer:hover {
    background: #d96e10; 
    color: #000;
    transform: translateY(-1px);
}

.apk-installer:active {
    transform: scale(0.98);
}

.apk-installer:disabled {
    cursor: not-allowed;
    opacity: 0.7;
}

.devref-banner {
  margin-top: 80px;
  margin-left: 10px;
  margin-right: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 10px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 200px;
}

.devref-text {
  margin-bottom: 0;
  text-align: center;
  color: white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  max-width: 600px;
}

.referral-btn {
  margin-bottom: 20px;
  background: linear-gradient(45deg, #ff6b6b, #ee5a24);
  color: white;
  padding: 15px 30px;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.referral-btn:hover {
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  background: linear-gradient(45deg, #ff5252, #e53e3e);
}

.bonus-info {
    font-size: 16px;
}

/* Dark mode compatibility */
@media (prefers-color-scheme: dark) {
  .devref-banner {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .devref-text {
    color: #e0e6ed;
  }
  
  .referral-btn {
    background: linear-gradient(45deg, #4ecdc4, #44a08d);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
  }
  
  .referral-btn:hover {
    background: linear-gradient(45deg, #26d0ce, #2d8659);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .devref-banner {
    flex-direction: column;
    padding: 40px 20px;
    text-align: center;
  }
  
  .devref-text {
    font-size: 1.8rem;
    margin-bottom: 25px;
  }
  
  .referral-btn {
    position: static;
    transform: none;
    margin-top: 20px;
  }
  
  .referral-btn:hover {
    transform: translateY(-2px);
  }
}

.main-content {
    margin-top: 20px;
}

.accessibility-container {
    margin-top: 20px;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    z-index: 10;
}

.accessibility-container.left {
    left: 0;
    right: unset;
    flex-direction: row;
}

.accessibility-widget {
    position: fixed;
    top: 80px;
    right: 0;
    z-index: 10;
}

.accessibility-widget.left {
    left: 0;
    right: unset;
}

.accessibility-btn {
    height: 50px;
    width: 50px;
    background: #007BFF;
    color: #FFF;
    border: none;
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    outline: none;
    z-index: 11;
    transition: transform 0.3s ease-in-out;
}

.accessibility-btn.left {
    left: 0;
    right: unset;
    border-radius: 0 8px 8px 0;
}

.accessibility {
    width: 200px;
    height: auto;
    position: fixed;
    top: 80px;
    right: 0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--nav);
    border: 2px dotted var(--border);
    border-radius: 10px 0 0 10px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
    font-size: 14px;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
    opacity: 1;
}

.accessibility.open {
    transform: translateX(0); 
}

.accessibility.left {
    left: 0;
    right: auto;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    transform: translateX(-100%);
}

.accessibility.left.open {
    transform: translateX(0);
}

.accessibility.left.open .accessibility-btn {
    transform: translateX(200px); 
}

.accessibility-title {
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
    font-size: 16px;
    color: var(--h2-color);
}

.accessibility-icon {
    margin-left: 10px;
    margin-right: 5px;
}

.accessibility-item {
    margin: 2px 0;
    color: var(--p);
}

.accessibility-item:hover {
    color: var(--hover-color);
}

.accessibility.left .accessibility-item {
    padding-left: 30px;
    padding-right: 10px;
    text-align: left;
}

.no-underline {
    text-decoration: none !important;
}

#backToTop.left {
    left: 0;
    right: unset;
}

.fa-magnifying-glass-plus {
    color: #4FC3F7;
}

.fa-magnifying-glass-minus {
    color: #81D4FA;
}

.fa-underline {
    color: #F48FB1;
}

.light-mode-access, .fa-face-smile {
    color:#FFEB3B;
}

.fa-moon {
    color: #FFEB3B
}

.fa-sun {
    color: #F48037;
}

.fa-compass {
    color: #CE93D8;
}

.fa-half-stroke {
    color: #FF5722;
}

.fa-eye {
    color: #9E9E9E;
}

.fa-hand-fist {
    color: #FFB300;
}

.fa-barcode {
    color: #BDBDBD;
}

.fa-hand {
    color: #00BFA5;
}

.fa-rotate-right {
    color: #90CAF9;
}

.fa-x {
    color: #D02823
}

.fa-wheelchair-move {
    color: #007BFF;
}

.progress-container {
    width: 100%;
    height: 10px;
    background: #902EBB;
    position: absolute;
    top: 60px;
    left: 0;
}

.progress-bar {
    height: 10px;
    background: #63C328;
    width: 0%;
}

.logo {
    max-height: 40px; 
}

.header-text {
    margin: 0;
    font-size: 1.2rem; 
}

#backToTop {
    position: fixed;
    bottom: 130px;
    right: 0;
    width: 40px;
    height: 40px;
    border: none;
    background: #00B53E;
    color: white;
    border-radius: 8px 0 0 8px;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

#backToTop i {
    font-size: 20px;
}

#backToTop.show {
    opacity: 1;
    visibility: visible;
}

#backToTop:hover {
    background: #00B53E;
}

.footer-bottom {
  width: 100%;
  border-top: 1px solid var(--border-color);
  background: var(--footer-color);
  padding: 40px 20px; 
}

.footer-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px; 
}

.links {
    margin-left: 150px;
}

.footer-section {
  flex: 1;
  min-width: 200px;
}

.footer-section .box {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section .box_name {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
  color: var(--box-name-color);
}

.footer-section .box li {
  margin: 6px 0;
  list-style: none;
}

.footer-section .box a {
  font-size: 14px;
  text-decoration: underline;
  color: var(--p);
  transition: all 0.3s ease;
}

.footer-section .box a:hover {
  font-weight: bold;
  color: var(--hover-color);
}

.footer-container {
  width: 100%;
  text-align: center;
  padding: 10px 0 20px;
}

.footer-bottom {
    padding: 5px;
    background-color: var(--body);
    border-top: 2px dotted var(--border);
  }
  
  .footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-inline: 20px;
    flex-wrap: wrap;
  }
  
  .footer-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .footer-nav a {
    font-size: 14px;
    color: var(--p);
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  .footer-nav a:hover {
    color: var(--hover-color);
    text-decoration: underline;
  }
  
  .divider {
    color: var(--p);
    user-select: none;
  }
  
.footer-center {
    text-align: center;
    font-size: 10px;
    color: var(--p);
    flex: 1;
}
  
.footer-extras {
    display: flex;
    align-items: center;
    gap: 16px;
}
  
.copyright, .version {
    font-size: 14px;
}

.version strong {
    color: var(--strong-color);
}
  
.footer-social {
    display: flex;
    gap: 10px;
}
  
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--social);
    color: var(--p);
    border-radius: 50%;
    transition: background 0.3s ease, color 0.3s ease;
    font-size: 14px;
    text-decoration: none;
}
  
.footer-social a:hover {
    background: var(--social-hover);
    color: #000;
}

.footer-dropup {
    position: relative;
    display: inline-block;
}
  
.footer-dropup .dropup-content {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: var(--container);
    padding: 5px;
    border-radius: 12px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
    z-index: 999;
    min-width: 150px;
}
  
.footer-dropup:hover .dropup-content {
    display: block;
}

.dropup-content {
    display: none;
    position: absolute;
    bottom: 40px;
    background-color: var(--container-color, #222);
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.4);
    z-index: 999;
    transition: all 0.3s ease;
    text-align: left;
}
  
.dropup-content a {
    display: block;
    padding: 6px 12px;
    color: var(--a, #fff);
    text-decoration: none;
    font-size: 14px;
}
  
.dropup-content a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.dropup-toggle {
    position: relative;
    margin-right: 5px;
    cursor: pointer;
    color: var(--a, #fff);
    font-weight: 500;
    text-decoration: none;
}
  
  
  /* Mobile: stack everything vertically */
  @media (max-width: 768px) {
    .footer-container {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
  
    .footer-nav,
    .footer-extras {
      justify-content: center;
    }
  
    .footer-center {
      order: 3;
      margin-top: 10px;
    }
  }  

.mobile-nav-compact {
    position: fixed;
    display: flex;
    height: auto;
    width: 100%;
    padding: 5px 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--nav);
    border-top: 2px dotted var(--border);
    justify-content: space-evenly;
    text-align: center;
}

.mobile-nav-compact a {
    flex: 1;
    flex-direction: column;
    display: flex;
    padding: 5px 0;
    text-decoration: none;
    color: var(--p);
    align-items: center;
}

.mobile-nav-compact a:hover {
    font-weight: bold;
    color: var(--hover-color)
}

.mobile-nav-compact-icon {
    height: 24px;
    width: 24px;
    margin-bottom: 2px;
}

.mobile-nav-compact-text, .mobile-nav-hover-text {
    font-size: 12px;
}

.sidebar a.active .sidebar-icon i, .sidebar a.active .sidebar-text {
    font-size: 16px;
    font-weight: bold;
    color: var(--active-color);
}

.mobile-nav-compact a.active .mobile-nav-compact-icon i, .mobile-nav-compact a.active .mobile-nav-compact-text,
.mobile-nav-hover a.active .mobile-nav-hover-icon i, .mobile-nav-hover a.active .mobile-nav-hover-text {
    font-size: 14px;
    font-weight: bold;
    color: var(--active-color);
}



@media (max-width: 768px) {
    .mobile-nav-compact {
        display: none;
    }
    .mobile-nav-hover {
        display: flex;
    }
}

@media (min-width: 769px) {
    .mobile-nav-compact {
        display: none;
    }
}

@media only screen and (max-width: 480px) {
    body {
        padding-left: 0;
    }
}

@media (min-width: 320px) and (max-width: 720px) {
    .page-heading {
        font-size: 24px;
    }
    .subheading {
        font-size: 20px;
    }
    h3 {
        font-size: 18px;
    }
    h4, p, li, li strong, li span, a, .green-checkmark, .red-x, .step-info p {
        font-size: 14px;
    }
    header {
        padding: 0 10px;
    }
    nav {
        flex-grow: 1;
    }
    .header-search-form {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: var(--nav-color);
        padding: 10px;
        z-index: 1000;
}
    .search-input {
        width: 100%;
        font-size: 16px;
    }
    .xmark {
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
    }
    .brand-logo {
        display: none;
    }
    .page {
        width: 100%;
        text-align: center;
    }
    .search-bar, .search-bar input {
        width: 100%;
    }
    .search-icon {
        margin-right: 0;
    }
    header .nav-menu {
        display: none;
    }
    .brand-dp {
        display: flex;
    }
    .main {
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 40px;
    }
    .policy {
        margin-left: 20px;
        margin-right: 20px;
    }
    .bio-hero {
        margin-left: 20px;
        margin-right: 20px;
    }
    .bio-hero-container {
        flex-direction: column; 
        text-align: left; 
    }
    .bio-hero-left, 
    .bio-hero-right {
        margin-left: 0;
        width: 100%;
    }

    .anysti-logo {
        max-width: 200px; 
        margin: 0 auto;
    }
    .nav-logo, .user-image {
        display: none;
    }
    #backToTop {
        bottom: 80px;
    }
    .footer-top, .footer-bottom {
        margin-right: 10px;
        display: block;
    }
    .footer-bottom {
        padding: 20px 0;
        padding-bottom: 80px;
    }
    .footer li {
        margin-left: 10px;
    }
    .mobile-nav-hover, .mobile-nav-compact, .mobile-nav-backdrop {
        display: flex;
    }
}

@media (min-width: 721px) and (max-width: 1024px) {
    .page-heading {
        font-size: 28px;
    }
    .subheading {
        font-size: 24px;
    }
    .mobile-nav-compact, .mobile-nav-hover, .mobile-nav-backdrop {
        display: none !important;
    }
}

@media (min-width: 1025px) and (max-width: 1920px) {
    .page-heading {
        font-size: 40px;
    }
    .subheading {
        font-size: 36px;
    }
    .mobile-nav-compact, .mobile-nav-hover, .mobile-nav-backdrop {
        display: none !important;
    }
    header {
        justify-content: space-between;
    }
    .brand-dp {
        display: none;
    }
    .main {
        padding-bottom: 80px;
    }
    .policy {
        margin-left: 40px;
        margin-right: 40px;
    }
    #backToTop {
        bottom: 100px;
    }
    .mobile-nav {
        display: none;
    }
}