svg {
   width: auto;
   height: auto;
   max-width: 100%;
}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body {
   font-family: "Inter", sans-serif;
}

.iconSize svg {
   width: 36px !important;
   height: 36px !important;
}
:root {
   --bg: #ffffff;
   --text: #111;
   --overlay-bg: rgb(255, 255, 255);
   --dropdown-bg: #ffffff;
   --dropdown-shadow: rgba(0, 0, 0, 0.1);
   --logo-fill: url(#paint0_light);
}
.dark {
   --bg: #000;
   --text: #ffffff;
   --overlay-bg: rgba(0, 0, 0, 0.5);
   --dropdown-bg: #1a1a1a;
   --dropdown-shadow: rgba(255, 255, 255, 0.1);
   --logo-fill: url(#paint0_dark);
}

body {
   background: var(--bg);
   color: var(--text);
}
header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 40px;
   position: relative;
   z-index: 100;
   background: var(--bg);
}

.logo {
   display: flex;
   align-items: center;
   gap: 8px;
}
.logo svg path {
   fill: var(--logo-fill);
}
.logo span {
   font-size: 24px;
   font-weight: 600;
   color: var(--text);
   text-transform: lowercase;
}
.default-transition {
   transition: all 0.3s ease;
}
.text-trustBlue {
   fill: #0022ff;
}

nav {
   display: flex;
   gap: 36px;
}
.nav-item > a {
   text-decoration: none;
   color: var(--text);
   font-weight: 500;
   font-size: 14px;
   padding: 6px 4px;
   transition: color 0.3s;
   cursor: pointer;
}
.nav-item > a:hover {
   color: #0022ff;
}
.hidden {
   display: none !important;
}

.dropdown {
   position: fixed;
   top: 80px;
   left: 0;
   width: 100vw;
   height: 50vh;
   background: var(--overlay-bg);
   visibility: hidden;
   opacity: 0;
   transition: opacity 0.3s ease, visibility 0.3s ease;
   z-index: 90;
}
.nav-item:hover .dropdown {
   visibility: visible;
   opacity: 1;
}

.dropdown-top {
   position: relative;
   width: 100%;
   height: 350px;
   margin: 0px auto 0;
   background: var(--dropdown-bg);
   box-shadow: 0 8px 20px -8px var(--dropdown-shadow);
   border-bottom-left-radius: 16px;
   border-bottom-right-radius: 16px;
   display: flex;
   justify-content: space-between;
   padding: 40px 120px;
   display: flex;
   z-index: 91;
}
.dropdown-image {
   display: flex;
   align-items: start;
   justify-content: start;
}
.dropdown-image > img {
   width: 170px;
}
.dropdown-links {
   display: grid;
   grid-template-columns: repeat(3, minmax(200px, 1fr));
   width: 70%;
   gap: 24px 40px;
}

.dropdown-item {
   display: flex;
   align-items: center;
   gap: 12px;
}
.dropdown-item img {
   width: 32px;
   height: 32px;
   flex-shrink: 0;
}
.dropdown-item a {
   text-decoration: none;
   display: block;
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 4px;
   color: black;
}
.dropdown-item span {
   font-size: 14px;
   color: #888;
}

.right-controls {
   display: flex;
   align-items: center;
   gap: 24px;
}
#theme-toggle {
   background: none;
   border: none;
   cursor: pointer;
   padding: 6px;
}
#theme-toggle svg {
   width: 20px;
   height: 20px;
}
.icon-sun {
   display: none;
}
.dark .icon-sun {
   display: inline;
}
.dark .icon-moon {
   display: none;
}
.lang-btn,
.download-btn {
   border-radius: 24px;
   font-weight: 500;
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: 16px;
   transition: background-color 0.3s, opacity 0.3s;
}
.lang-btn {
   width: 140px;
   height: 36px;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 1px solid #0022ff;
   color: #0022ff;
   background: var(--bg);
}
.lang-btn:hover {
   background: #f0f4ff;
}
.download-btn {
   position: relative;
   background-color: #0022ff;
   background-image: linear-gradient(to right, #48ff91, #48ff91);
   background-repeat: no-repeat;
   background-size: 0% 100%;
   transition: background-size 0.4s ease;
   color: #ffffff;
   border: none;
   width: 114px;
   height: 36px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.download-btn:hover {
   background-size: 100% 100%;
   border: 0.05px solid black;
   color: black;
}

.div {
   display: flex;
   align-items: center;
   gap: 36px;
}
.globe-icon {
   width: 13px;
   height: 13px;
   color: #0022ff;
}
.lang-btn:hover .globe-icon {
   color: white;
}
.lang-btn:hover {
   color: white;
   background-color: #0022ff;
}

.mobile-header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 56px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 20px 4%;
   z-index: 1001;
}
.mobile-header.open {
   background: #f7f8fa;
   transition: transform 0.3s ease;
}
.mobile-header svg {
   height: 40px;
}

.btn-reset {
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
}

.mobile-nav {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   background: #f7f8fa;
   transform: translateY(-100%);
   transition: transform 0.3s ease 0.3s;
   pointer-events: none;
   z-index: 1000;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
}

.mobile-nav .nav-content {
   opacity: 0;
   transition: opacity 0.3s ease 0.3s;
}

.mobile-nav.open {
   transform: translateY(0);
   transition: transform 0.3s ease 0s;
   pointer-events: auto;
   overflow: scroll;
}

.mobile-nav.open .nav-content {
   opacity: 1;
   transition: opacity 0.3s ease 0.3s;
}

.mobile-nav__header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px;
   background: #fff;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.mobile-nav__list {
   margin-top: 120px;
   padding: 8px 0;
   width: 94%;
   display: flex;
   flex-direction: column;
   gap: 12px;
}
.mobile-nav__item {
   list-style: none;
   transition: transform 0.3s ease;
}
.mobile-nav__item ul {
   list-style: none;
}
.mobile-nav__item ul li {
   list-style: none;
}
.listIcon {
   display: flex;
   align-items: center;
   gap: 20px;
}
.h2Text {
   font-size: 14px;
   font-weight: 400;
   color: #666;
   margin: 4px 0 0;
}
.mobile-nav__link,
.mobile-nav__button {
   border-radius: 12px;
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 17px 20px;
   background: #ffffff;
   font-weight: 700;
   border: none;
   text-align: left;
   font-size: 18px;
   cursor: pointer;
}
.mobile-nav__button.open {
   border-radius: 12px 12px 0 0;
   transition: transform 0.3s ease;
}

.mobile-nav__link + .mobile-nav__link,
.mobile-nav__button + .mobile-nav__button {
   margin-top: 4px;
}

.mobile-nav__chevron {
   width: 16px;
   height: 16px;
   transition: transform 0.2s ease;
}
.mobile-nav__chevron.rotate {
   transform: rotate(180deg);
   transition: transform 0.3s ease;
}

.mobile-nav__sublist {
   /* всегда flex, но скрыто за счёт высоты и прозрачности */
   display: flex;
   flex-direction: column;
   gap: 15px;

   /* изначально «схлопнуто» */
   max-height: 0;
   opacity: 0;
   overflow: hidden;

   /* отступы «снимаем», но сохраняем боковые 5px */
   padding: 0 5px;

   /* фон есть и радиус снизу только при открытии */
   background-color: #fff;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;

   /* переходы для высоты, прозрачности, отступов и gap */
   transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease,
      gap 0.3s ease;
}

.mobile-nav__sublist.open {
   /* достаточно большой max-height, чтобы вместить весь список */
   max-height: 500px;
   opacity: 1;

   /* как у вас в открытом состоянии */
   padding: 16px;
   gap: 12px;
   border-bottom-left-radius: 12px;
   border-bottom-right-radius: 12px;
}

.mobile-nav__sublink {
   font-size: 14px;
   color: #333;
   font-weight: 600;
   text-decoration: none;
}
.mobile-nav__sublink + .mobile-nav__sublink {
   margin-top: 2px;
}
.mobile-nav__sublink:hover {
   background: #ececf2;
}

.mobile-nav__footer {
   width: 94%;
   padding-bottom: 32px;
}
.smallBtn {
   display: flex;
   gap: 20px;
   align-items: center;
   justify-content: end;
   margin: 10px;
}

.mobile-nav__footer .btn {
   width: 100%;
   padding: 12px;
   margin-top: 8px;
   font-size: 16px;
   border: none;
   cursor: pointer;
}
.mobile-nav__btn-secondary {
   background: #ececf2;
   margin-bottom: 8px;
   max-width: 140px;
}
.mobile-nav__btn-three {
   background: #ececf2;
   margin-bottom: 8px;
   max-width: 114px;
}
.mobile-nav__btn-primary {
   background-image: linear-gradient(to right, #48ff91, #48ff91);
   background-repeat: no-repeat;
   background-size: 0% 100%;
   transition: background-size 0.4s ease;
   background: #1635ff;
   color: #ffffff;
   font-size: 15px;
   border-radius: 100px;
}

.mobile-nav__btn-primary:hover {
   background-size: 100% 100%;
   border: 0.05px solid black;
   color: black;
}
.mobile-header {
   display: none;
}

@media (max-width: 1000px) {
   .desktop {
      display: none;
   }
   .mobile-header {
      display: flex;
   }
}
@media (max-width: 991px) {
   .blockedLogoFooter {
      display: none;
   }
}