@media (max-width: 980px) {
          :root {
              --brand: #1a73e8;
              --ink: #434443dc;
              --muted: #5b6b7b;
              --line: #dfe7f3;
              --panel-bg: #f4f9ff;
          }

          .openbtn {
              /* float: right; */
              display: inline-flex;
              cursor: pointer;
              background: rgba(0, 0, 0, 0.5);
              color: #fff;
              padding: .5rem .8rem;
              border: none;
              border-radius: .75rem;
              box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
              transition: transform .15s ease, box-shadow .15s ease, background .2s;
              width: 3em;
              height: 3em;
              justify-content: center;
              align-self: center;
              align-items: center;

          }

          .openbtn:hover {
              transform: translateY(-1px);
              box-shadow: 0 6px 16px rgba(26, 115, 232, .35);
          }

          .openbtn:active {
              transform: translateY(0);
              box-shadow: 0 3px 8px rgba(26, 115, 232, .25);
          }

          /* ========== Overlay ========== */
          .panel-overlay {
              position: fixed;
              inset: 0;
              background: rgba(0, 0, 0, .35);
              opacity: 0;
              visibility: hidden;
              transition: opacity .35s ease, visibility .35s ease;
              z-index: 9998;
          }

          .panel-overlay.open {
              opacity: 1;
              visibility: visible;
          }

          .sidepanel {
              height: 100vh;
              max-width: 420px;
              position: fixed;
              top: 0;
              left: 0;
              z-index: 9999;
              /* background: var(--panel-bg); */
              background: rgba(70, 70, 70);
              border-right: 1px solid var(--line);
              box-shadow: 8px 0 24px rgba(0, 0, 0, .08);
              overflow-y: auto;
              -webkit-overflow-scrolling: touch;
              transform: translateX(-100%);
              transition: transform .35s ease;
              padding-top: 0;
          }

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

          body.no-scroll {
              overflow: hidden;
          }

          /* ========== Header panou (zona cu X) ========== */
          .sidepanel .closebtn {
              position: sticky;
              top: 0;
              right: auto;
              left: auto;
              display: block;
              text-align: right;
              padding: .75rem 1rem;
              font-size: 2rem;
              line-height: 1;
              color: var(--muted);
              /* background: linear-gradient(to bottom, rgba(255, 255, 255, .9), rgba(255, 255, 255, .6)); */
              background: rgba(70, 70, 70);
              backdrop-filter: saturate(120%) blur(2px);
              border-bottom: 1px solid var(--line);
              z-index: 1;
          }

          .sidepanel .closebtn:hover {
              color: var(--brand);
          }

          /* ========== Titluri de sectiune ========== */
          .sidepanel h2 {
              margin: .5rem 0;
              padding: .5rem 1rem;
              font-size: 1.05rem;
              font-weight: 700;
              color: var(--ink);
              border-top: 1px solid var(--line);
              border-bottom: 1px solid var(--line);
          }

          /* ========== Subtitluri / linkuri ========== */
          .titlu_mobil {
              margin: .25rem 0;
              padding: .4rem 1rem;
              text-align: left;
              text-indent: 0;
              font-weight: 600;
              /* color: var(--ink); */
              color: white;
              font-size: 1.7em;
          }

          .titlu_mobil2 {
              /* margin: .25rem 0;
              padding: .4rem 1rem; */
              padding: .6em;
              text-align: left;
              text-indent: 0;
              font-weight: 600;
              /* color: var(--ink); */
              color: white;
              font-size: 1em;
          }

          /* linkurile simple din liste */
          .sidepanel a {
              display: block;
              padding: .5rem 1.25rem;
              font-size: 1em;
              color: var(--brand);
              text-decoration: none;
              transition: background .2s ease, color .2s ease, padding-left .2s;
              border-radius: .5rem;
          }

          .sidepanel a:hover {
              background: rgba(26, 115, 232, .08);
              color: var(--ink);
              padding-left: 1.35rem;
          }

          /* ========== Dropdown (accordion pe click) ========== */
          .dropdown {
              margin: .15rem 0;
          }

          .dropdown .dropbtn {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: .5rem;
              background: none;
              border: none;
              color: var(--ink);
              font-size: .98rem;
              font-weight: 600;
              padding: .55rem 1rem;
              cursor: pointer;
              border-radius: .6rem;
              transition: background .2s ease;
          }

          .dropdown .dropbtn:hover {
              background: rgba(26, 115, 232, .07);
          }

          .dropdown .dropbtn::after {
              content: "\f107";
              font-family: "Font Awesome 5 Free";
              font-weight: 900;
              transition: transform .25s ease;
          }

          .dropdown.open .dropbtn::after {
              transform: rotate(180deg);
          }

          .dropdown2 {
              margin: .15rem 0;
          }

          .dropdown2 .dropbtn2 {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: .5rem;
              background: none;
              border: none;
              color: var(--ink);
              font-size: .98rem;
              font-weight: 600;
              /* padding: .55rem 1rem; */
              padding-right: 1em;
              margin: 0;
              cursor: pointer;
              border-radius: .6rem;
              transition: background .2s ease;
          }

          .dropdown2 .dropbtn2:hover {
              background: rgba(26, 115, 232, .07);
          }

          .dropdown2 .dropbtn2::after {
              content: "\f107";
              font-family: "Font Awesome 5 Free";
              font-weight: 900;
              transition: transform .25s ease;
          }

          .dropdown2.open .dropbtn2::after {
              transform: rotate(180deg);
          }

          /* continutul ascuns/aratat */
          .dropdown-content {
              display: none;
              padding: .25rem 0 .5rem 0;
              border-left: 2px solid var(--brand);
              margin: .15rem 0 .35rem .5rem;
          }

          .dropdown-content2 {
              display: none;
              padding: .25rem 0 .5rem 0;
              border-left: 2px solid var(--brand);
              margin: .15rem 0 .35rem .5rem;
          }

          .dropdown.open .dropdown-content {
              display: block;
          }

          .dropdown2.open .dropdown-content2 {
              display: block;
          }

          /* linkurile simple din liste */
          .dropdown a {
              display: block;
              padding: .5rem 1.25rem;
              font-size: 1.3em;
              /* color: var(--brand); */
              color: white;
              text-decoration: none;
              transition: background .2s ease, color .2s ease, padding-left .2s;
              border-radius: .5rem;
          }

          .dropdown a:hover {
              background: rgba(26, 115, 232, .08);
              color: var(--ink);
              padding-left: 1.35rem;
          }

          .dropdown2 a {
              display: block;
              padding: .5rem 1.25rem;
              font-size: 1em;
              /* color: var(--brand); */
              color: white;
              text-decoration: none;
              transition: background .2s ease, color .2s ease, padding-left .2s;
              border-radius: .5rem;
          }

          .dropdown2 a:hover {
              background: rgba(26, 115, 232, .08);
              color: var(--ink);
              padding-left: 1.35rem;
          }

          /* ascunde listele simple din dropdown in panoul mobil */
          .sidepanel .dropdown>ul {
              display: none;
              margin: .25rem 0 .5rem .75rem;
              border-left: 2px solid var(--brand);
              padding-left: .5rem;
          }

          .sidepanel .dropdown.open>ul {
              display: block;
          }

          /* listari */
          ul {
              margin: 0;
              padding: 0;
          }

          ul li {
              list-style: none;
          }

          .sidepanel .dropdown2>ul {
              display: none;
              margin: .25rem 0 .5rem .75rem;
              border-left: 2px solid var(--brand);
              padding-left: .5rem;
          }

          .sidepanel .dropdown2.open>ul {
              display: block;
          }
      }

      /* ******************************* TELEFON ***************************** */
      /* Extra small devices (phones, less than 640px) */
      @media (max-width: 640px) {

          #menu {
              z-index: 20;
              width: 100%;
              position: fixed;
              top: 100px;
          }

          /**************************************MENIU*********************************************/
          /* ========== Buton deschidere ========== */

          .openbtn {
              margin: 8px;
          }

          /* ========== Sidepanel ========== */
          .sidepanel {
              width: min(80vw, 380px);
          }

          .meniurapid {
              display: none;
          }

          /* .meniu_asista_mobil {
              display: block;
          } */
      }

      /* ******************************* TABLETA ***************************** */
      /* Small devices (tablets, 640px and up) */
      @media (min-width: 641px) and (max-width: 980px) {

          /* --------------------------MENIU--------------------------- */
          .sidepanel {
              width: min(80vw, 420px);
          }

          .logo-icon {
              display: grid;
              grid-template-columns: 10% 90%;
              gap: 8px;
              background-color: rgba(0, 0, 0, 0.5);
          }

          /* ========== Buton deschidere ========== */
          .openbtn {
              margin: 0px 29px;
          }

          /* ========== Sidepanel ========== */
          .sidepanel {
              width: min(90vw, 380px);
          }

          .titlu {
              text-align: center;
              font-size: 1.5rem;
          }

          /* .meniu_asista_mobil {
              display: none;
          } */
      }

      /* ******************************* CALCULATOR *************************** */
      /* Medium and large devices (desktops, 980px and up) */
      @media (min-width: 981px) {

          /* ---------------------------MENIU---------------------------------- */
          /* ========== meniu ========== */
          /* #logo {
              float: left;
              text-align: center;
              height: 65px;
              line-height: 65px;
              display: flex;
              align-items: center;
          } */

          /* #logo p {
              line-height: 1.1rem;
              z-index: 1;
              padding-top: 1em;
              text-align: center;
              padding-right: -3%;
              color: whitesmoke;
              font-size: 1.2rem;
              /* width: 100%; */
          /* }  */

          .logo-icon {
              /* display: grid;
               grid-template-columns: 10% 90%;
               gap: 8px;
               background-color: rgba(0, 0, 0, 0.5); */
          }

          .openbtn {
              display: none;
          }

          /* .meniu_asista_mobil {
              display: none;
          } */

          .sidepanel {
              display: none;
          }


      }