@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');

:root{
  --font-body:"Saira", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:'JetBrains Mono',monospace;
  --xs:clamp(.7rem,.66rem + .2vw,.8rem);
  --sm:clamp(.82rem,.78rem + .2vw,.92rem);
  --md:clamp(.92rem,.88rem + .2vw,1rem);
  --2xl:clamp(1.75rem,1.1rem + 2vw,2.8rem);
  --r-sm:.4rem;--r-md:.6rem;--r-lg:.9rem;--r-xl:1.15rem;--r-full:9999px;
  --ease:200ms cubic-bezier(.16,1,.3,1);
  --side-w:230px;--max-w:1200px;
  --font-i: clamp(13.5px, 1vw + 11px, 16px);
  --font-h2: clamp(1.2rem, 2vw + 0.8rem, 1.55rem);

    --dark-bg: #020617;
    --dark-black: #030303;
    --dark-blue: #0b0f1e;
    --main-bg: #090f20;
    --card-bg: #212536;
    --text-color: #d2d4e0;
    --purple-glow: #3e3a5a;
    --green-glow: #00ff73;
    --border-color: #3b3f54;
    --dark-green: #009900;
    --color-green: #00ff00;
    /* --light-text: #E1E9C9; */
    --light-green: #00ff73;
    --color-navy: #1347b7;
    --accent-blue: #007bff;
    --accent-cyan: #00D9FF;
    --accent-magenta: #FF0080;
    --tag-orange: #e34f26;
    --bg-secondary: #16161D;
    --terminal-bg: #0c0c0c;
    --terminal-border: #333;
    --terminal-text: #00ff00;
    --terminal-prompt: #00ccff;
    --terminal-comment: #888;
    --terminal-output: #fff;
    --terminal-header: #2d2d2d;
    --legend-border: #444;
    --transition-speed: 0.3s;

    --color-orange: #f97316;
    --color-blue: #1673bd;
    --color-red: #dc2626;
    --color-green: #00ff00;
    --color-purple: #5f0eea;
    --color-pink: #B9375D;
    --color-navy: #1347b7;
    --accent-cyan: #00D9FF;
    --accent-magenta: #FF0080;
}

[data-theme="dark"]{
  --bg:#0b0d10;--s:#131619;--s2:#181c21;--s3:#1d2229;
  --bd:#232b35;--bd2:#2c3540;
  --t:#dde4ee;--tm:#7e8ea4;--tf:#4d6686;
  --green:#22d3a0;--gd:rgba(34,211,160,.07);--gb:rgba(34,211,160,.18);
  --blue:#60a5fa;--bld:rgba(96,165,250,.07);--blb:rgba(96,165,250,.18);
  --purple:#a78bfa;--pd:rgba(167,139,250,.07);--pb:rgba(167,139,250,.18);
  --amber:#fbbf24;--ad:rgba(251,191,36,.07);--ab:rgba(251,191,36,.18);
  --red:#f87171;--rd:rgba(248,113,113,.07);--rb:rgba(248,113,113,.18);
  --cyan:#22d3ee;--cd:rgba(34,211,238,.07);--cb:rgba(34,211,238,.18);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;}
body{font-family:var(--font-body);font-size:var(--md);color:var(--t);background:var(--bg);line-height:1.6;min-height:100dvh}

section {
    padding:0 1rem;
}

.oss{max-width:var(--max-w);margin-inline:auto;padding-block:clamp(2rem,5vw,4rem);}

/* ---- HEADER ---- */
.oss__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:2rem;}
.oss__chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:var(--xs);font-weight:500;
  color:var(--green);letter-spacing:.1em;text-transform:uppercase;
  background:var(--gd);border:1px solid var(--gb);
  padding:3px 11px;border-radius:var(--r-full);margin-bottom:10px;
}
.oss__chip svg{width:11px;height:11px;}
.oss__title{font-size:var(--2xl);font-weight:700;line-height:1.08;letter-spacing:-.025em;}
.oss__title em{color:var(--green);font-style:normal;}
.oss__sub{margin-top:8px;font-size:var(--sm);color:var(--tm);max-width:50ch;}

/* ---- LAYOUT ---- */
.oss__layout{display:flex;gap:1.5rem;align-items:flex-start;}

/* ===========================
   SIDEBAR
=========================== */
.oss__sidebar{
  width:var(--side-w);flex-shrink:0;
  background:var(--s);border:1px solid var(--bd);
  border-radius:var(--r-xl);padding:1.1rem;
  position:sticky;top:1.5rem;
  display:flex;flex-direction:column;gap:.5rem;
  overflow: visible;
}
.sb__section{
  font-family:var(--font-mono);font-size:var(--xs);font-weight:600;
  color:var(--tf);text-transform:uppercase;letter-spacing:.1em;
  padding-bottom:.6rem;border-bottom:1px solid var(--bd);margin-bottom:.2rem;
}

/* ---- CUSTOM DROPDOWN ---- */
.sb__dropdown{position:relative; z-index: 200;}

.sb__trigger{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:9px 12px;
  background:var(--s2);border:1px solid var(--bd2);border-radius:var(--r-lg);
  color:var(--t);cursor:pointer;
  font-family:var(--font-body);font-size:var(--sm);font-weight:500;
  transition:border-color var(--ease),background var(--ease);
  user-select:none;
}
.sb__trigger:hover{background:var(--s3);}
.sb__trigger.open{
  border-color:var(--cat-color,var(--green));
  box-shadow:0 0 0 3px var(--cat-glow,rgba(34,211,160,.1));
}
.sb__trigger-icon{font-size:.95rem;flex-shrink:0;}
.sb__trigger-label{flex:1;text-align:left;line-height:1.2;}
.sb__trigger-sub{font-size:.63rem;color:var(--tm);font-family:var(--font-mono);}
.sb__trigger-chevron{
  width:16px;height:16px;flex-shrink:0;color:var(--tf);
  transition:transform var(--ease);
}
.sb__trigger.open .sb__trigger-chevron{transform:rotate(180deg);}
.sb__trigger-bar{
  width:3px;height:60%;border-radius:var(--r-full);
  background:var(--cat-color,transparent);flex-shrink:0;
}

/* ---- DROPDOWN MENU ---- */
.sb__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;

    /* CHANGE from 100 to 9999 */
    z-index: 9999;

    background: var(--s2);
    border: 1px solid var(--bd2);
    border-radius: var(--r-lg);
    padding: .4rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity var(--ease), transform var(--ease);

    /* ADD THIS — prevent clipping by parent containers */
    isolation: isolate;
}

.sb__menu.open{opacity:1;transform:translateY(0);pointer-events:all;}

.sb__menu-item{
  display:flex;align-items:center;gap:9px;
  width:100%;padding:8px 10px;border-radius:var(--r-md);
  background:transparent;border:none;
  color:var(--tm);cursor:pointer;
  font-family:var(--font-body);font-size:var(--sm);font-weight:500;
  text-align:left;transition:all var(--ease);position:relative;
}
.sb__menu-item:hover{background:var(--s3);color:var(--t);}
.sb__menu-item.selected{color:var(--item-color,var(--green));background:var(--item-dim,var(--gd));}
.sb__menu-item.selected::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:55%;border-radius:0 var(--r-full) var(--r-full) 0;
  background:var(--item-color,var(--green));
}
.sb__item-emoji{font-size:.95rem;flex-shrink:0;}
.sb__item-body{flex:1;min-width:0;}
.sb__item-label{line-height:1.1;}
.sb__item-desc{font-size:.6rem;color:var(--tf);font-family:var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb__item-count{
  font-family:var(--font-mono);font-size:.6rem;font-weight:700;
  min-width:20px;height:18px;padding:0 5px;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);color:var(--tf);
}
.sb__menu-item.selected .sb__item-count{background:var(--item-dim,var(--gd));color:var(--item-color,var(--green));}
.sb__menu-div{height:1px;background:var(--bd);margin:.3rem 0;}

/* ---- SIDEBAR STATS ---- */
.sb__divider{height:1px;background:var(--bd);margin:.4rem 0;}
.sb__stat{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-mono);font-size:var(--xs);color:var(--tf);padding:2px 0;
}
.sb__stat strong{color:var(--tm);}

/* ---- CONTENT ---- */
.oss__content{flex:1;min-width:0;}

/* ---- BANNER ---- */
.cat-banner{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:var(--r-lg);
  border:1px solid var(--catb,var(--gb));background:var(--catd,var(--gd));
  margin-bottom:1.2rem;font-size:var(--sm);font-weight:600;
  color:var(--cat,var(--green));transition:all var(--ease);
}
.cat-banner__right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.cat-banner span{color:var(--tm);font-weight:400;font-size:var(--xs);font-family:var(--font-mono);}

/* ---- GRID ---- */
.oss__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;}
@media(max-width:900px){.oss__grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.oss__grid{grid-template-columns:1fr;}}

/* ---- CARD ---- */
.oss-card{
  background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);border:1px solid var(--bd);border-radius:var(--r-xl);
  padding:1.1rem;display:flex;flex-direction:column;gap:.8rem;
  text-decoration:none;color:inherit;position:relative;overflow:hidden;min-height:220px;
  transition:border-color var(--ease),box-shadow var(--ease),background var(--ease),transform var(--ease);
}
.oss-card::before{
  content:'';position:absolute;inset:0 0 auto 0;height:2px;opacity:0;
  transition:opacity var(--ease);border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:linear-gradient(90deg,transparent,var(--cat,var(--green)) 45%,var(--blue) 85%,transparent);
}
.oss-card:hover{transform:translateY(-3px);background:var(--s2);}
.oss-card:hover::before{opacity:1;}
.oss-card.hidden{display:none;}

.oss-card[data-cat="security"]{--cat:var(--green); --catd:var(--gd); --catb:var(--gb);}
.oss-card[data-cat="ai"]      {--cat:var(--purple);--catd:var(--pd); --catb:var(--pb);}
.oss-card[data-cat="dev"]     {--cat:var(--blue);  --catd:var(--bld);--catb:var(--blb);}
.oss-card[data-cat="network"] {--cat:var(--cyan);  --catd:var(--cd); --catb:var(--cb);}
.oss-card[data-cat="systems"] {--cat:var(--amber); --catd:var(--ad); --catb:var(--ab);}
.oss-card[data-cat="web"]     {--cat:var(--red);   --catd:var(--rd); --catb:var(--rb);}
.oss-card:hover{border-color:var(--catb);box-shadow:0 6px 28px rgba(0,0,0,.45);}

.card__top{display:flex;align-items:flex-start;justify-content:space-between}
.card__icon{width:38px;height:38px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;background:var(--catd,var(--gd));}
.card__badges{display:flex;align-items:center;gap:5px;justify-content:space-between}
.card__cat-pill{font-family:var(--font-mono);font-size:.58rem;font-weight:700;padding:2px 7px;border-radius:var(--r-full);text-transform:uppercase;letter-spacing:.06em;color:var(--cat,var(--green));background:var(--catd,var(--gd));border:1px solid var(--catb,var(--gb));}
.card__new{font-family:var(--font-mono);font-size:.58rem;font-weight:600;padding:2px 7px;border-radius:var(--r-full);color:var(--amber);background:var(--ad);border:1px solid var(--ab);}
.card__arrow{width:26px;height:26px;border-radius:var(--r-full);border:1px solid var(--bd2);display:flex;align-items:center;justify-content:center;color:var(--tf);flex-shrink:0;transition:color var(--ease),border-color var(--ease),background var(--ease);}
.oss-card:hover .card__arrow{color:var(--cat,var(--green));border-color:var(--catb,var(--gb));background:var(--catd,var(--gd));}
.card__arrow svg{width:11px;height:11px;}
.card__owner{font-family:var(--font-mono);font-size:.80rem;color:var(--tf);margin-bottom:2px;}
.card__name{font-size:var(--md);font-weight:700;color:var(--t);line-height:1.2;word-break:break-word;transition:color var(--ease);}
.oss-card:hover .card__name{color:var(--cat,var(--green));}
.card__desc{font-size:var(--xs);color:var(--tm);line-height:1.7;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.card__topics{display:flex;flex-wrap:wrap;gap:4px;}
.card__topic{font-family:var(--font-mono);font-size:.58rem;font-weight:500;padding:2px 7px;border-radius:var(--r-full);color:var(--cat,var(--green));background:var(--catd,var(--gd));border:1px solid var(--catb,var(--gb));white-space:nowrap;}
.card__footer{display:flex;align-items:center;justify-content:space-between;gap:6px;border-top:1px solid var(--bd);padding-top:9px;margin-top:auto;flex-wrap:wrap;}
.card__lang{display:flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:var(--xs);color:var(--tm);}
.lang-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.card__updated{font-family:var(--font-mono);font-size:.6rem;color:var(--tf);white-space:nowrap;}

/* EMPTY */
.oss-empty{grid-column:1/-1;text-align:center;padding:3rem 1rem;color:var(--tm);}
.oss-empty svg{width:38px;height:38px;margin:0 auto .75rem;display:block;color:var(--tf);}
.oss-empty p{font-size:var(--sm);}

/* CTA */
.oss__footer{text-align:center;margin-top:2rem;}
.oss__cta{display:inline-flex;align-items:center;gap:8px;font-size:var(--sm);font-weight:600;color:var(--green);background:var(--gd);border:1px solid var(--gb);padding:9px 26px;border-radius:var(--r-full);text-decoration:none;transition:background var(--ease),box-shadow var(--ease);}
.oss__cta:hover{background:rgba(34,211,160,.13);box-shadow:0 0 0 4px rgba(34,211,160,.07);}
.oss__cta svg{width:13px;height:13px;}

/* RESPONSIVE */
@media(max-width:768px){
  .oss__layout{flex-direction:column;}
  .oss__sidebar{width:100%;position:static;padding:.9rem;}
  .sb__menu {
        position: static;
        opacity: 1;
        transform: none;
        pointer-events: all;
        box-shadow: none;
        border: none;
        padding: 0;
        background: transparent;
        z-index: auto;
    }

    .sb__menu.open {
        display: flex;
        flex-wrap: wrap;
        gap: .4rem;
    }

    .sb__menu:not(.open) {
        display: none;
    }
  .sb__menu-item{padding:5px 11px;border-radius:var(--r-full);flex:0 0 auto;border:1px solid var(--bd);}
  .sb__menu-item.selected{border-color:var(--item-color,var(--green));}
  .sb__item-desc,.sb__menu-div{display:none;}
  .oss__grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:500px){.oss__grid{grid-template-columns:1fr;}}

.fade{opacity:1;}
@supports(animation-timeline:scroll()){
  .fade{opacity:0;animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 75%;}
  @keyframes rv{to{opacity:1;}}
}

.container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 1rem;
}

.navbar {
    background-color: var(--main-bg);
    padding: 5px 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1000;
}

.navbar::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg,
            purple 0%, purple 16.67%,
            orange 16.67%, orange 33.33%,
            green 33.33%, green 50%,
            navy 50%, navy 66.67%,
            hotpink 66.67%, hotpink 83.33%,
            red 83.33%, red 100%);
    background-size: 120px 2px;
    animation: navbarSlidingBorder 2s linear infinite;
}

@keyframes navbarSlidingBorder {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 120px 0;
    }
}


@keyframes moveBorder {
    0% {
        left: -100%;
        transform: scaleX(0.5);
    }

    50% {
        transform: scaleX(1);
    }

    100% {
        left: 100%;
        transform: scaleX(0.5);
    }
}

.navbar .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.navbar .logo {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--light-text);
    width: 100%;
    justify-content: space-between;
}

.logo-text {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.logo-text a {
  text-decoration: none;
  margin-top: 5px;
}

.typewriter {
    font-family: "Saira", sans-serif;
    white-space: pre;
    position: relative;
    font-optical-sizing: auto;
    font-weight: 500;
    color: #f0f0f0;
}

.typewriter::after {
    content: "_";
    /* cursor */
    margin-left: 2px;
    animation: blink 1s steps(1) infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .typewriter::after {
        animation: none;
    }
}

.navbar nav ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
     background: var(--dark-blue);
}

.navbar nav ul li:hover a.home {
    color: var(--color-yellow);
    background-color: #2c2b25;
}

.navbar nav ul li:hover a.projects {
    color: var(--color-purple);
    background-color: #2e2723;
}

.navbar nav ul li:hover a.programming {
    color: var(--color-orange);
    background-color: #282323;
}

.navbar nav ul li:hover a.hacking {
    color: var(--color-green);
    background-color: #273323;
}

.navbar nav ul li:hover a.networking {
    color: var(--color-blue);
    background-color: #212528;
}

.navbar nav ul li:hover a.ai {
    color: var(--color-pink);
    background-color: #2b2326;
}

.navbar nav ul li:hover a.game {
    color: var(--color-red);
    background-color: #332923;
}

.navbar nav ul li a {
    color: var(--light-text);
    padding: 10px 45px;
    width: 97%;
    display: inline-block;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
    margin: 5px 0;
}

.navbar .search-bar {
    display: flex;
    align-items: center;
    background-color: var(--dark-bg);
    border-radius: 5px;
    padding: 8px 12px;
    width: calc(100% - 40px);
    margin: 15px auto 0 auto;
    border: 1px solid #444;
}

.navbar .search-bar:focus-within {
    border-color: var(--button-primary-hover);
}

.navbar .search-bar i {
    color: #aaa;
    margin-right: 10px;
}

.navbar .search-bar input {
    background-color: var(--dark-bg);
    border: none;
    outline: none;
    color: var(--light-text);
    font-size: 1rem;
    width: 100%;
}

.navbar .search-bar input::placeholder {
    color: #aaa;
}

.navbar button i {
    color: #8B5CF6;
}

.menu-toggle {
  display: block;
  font-size: 1.3rem;
  cursor: pointer;
  background: var(--dark-blue);
  border: 2px solid #8B5CF6;
  padding: 2px 4px;
}

.nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--dark-blue);
    overflow: hidden;
    max-height: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    transition: max-height 0.3s ease-out;
    /* padding-top: 10px; */
}

.nav-links.active {
    max-height: 450px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  position: relative;
  width: 100%;
  background: var(--dark-bg);
  min-height: 100px;
  padding: 20px 50px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-blue) 50%, transparent 50%);
  background-size: 20px 2px;
  animation: slidingBorder 1s linear infinite;
}

@keyframes slidingBorder {
  0% { background-position: 0 0; }
  100% { background-position: 20px 0; }
}

.menu {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 10px;
}

.menu-item {
  list-style: none;
}

.menu-link {
  color: #fff;
  margin: 0 10px;
  display: inline-block;
  transition: 0.5s;
  text-decoration: none;
  opacity: 0.75;
}

.menu-link:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.footer p {
    color: #ffffff;
    margin: 15px 0 10px 0;
    font-size: var(--font-p);
    font-weight: 500;
    text-align: center;
}

.footer .contacts {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer .contact {
    text-decoration: none;
    color: var(--border-dark);
    display: inline; /* important for transform reliability */
    transition: transform 0.3s ease;
}

.footer .contact:hover {
    transform: translateY(-2px);
    color: var(--text-secondary);
}

.footer .contact.github:hover {
    color: #313647;
}

.footer .contact.instagram:hover {
    color: #E83C91;
}

.footer .contact.linkedin:hover {
    color: #008BFF;
}

.footer .contact.facebook:hover {
    color: #1877F2;
}

.footer .contact.gmail:hover {
    color: #f44336d8;
}

.footer i {
    margin-top: 20px;
    font-size: var(--font-h2);
}



@media (min-width: 480px) {
    .container {
        max-width: 480px;
        padding: 0 1.25rem;
    }

  .navbar .logo {
    font-size: 1.1rem;
  }

  #scrollUpBtn {
    width: 42px;
    height: 42px;
    bottom: 67px;
    right: 22px;
  }

  .arrow-overlay {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   BREAKPOINT 2: 768px (TABLET - Most Important)
   ========================================================================== */

@media (min-width: 768px) {
    .container {
        max-width: 768px;
        padding: 0 1.5rem;
    }

  .logo img {
    width: 27px;
    height: 27px;
  }


  #scrollUpBtn {
    width: 45px;
    height: 45px;
    bottom: 65px;
    right: 24px;
  }

  .arrow-overlay {
    font-size: 1.4rem;
  }
}

/* ==========================================================================
   BREAKPOINT 3: 1024px (DESKTOP - Most Important)
   ========================================================================== */

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
        padding: 0 2rem;
    }

  .logo img {
      width: 29px;
      height: 29px;
  }

  .menu-toggle {
      display: none;
  }

  .navbar {
      position: relative;
      color: white;
      text-align: center;
      border-radius: 5px;
      overflow: hidden;
  }

  .navbar .container {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
  }

  .navbar .logo {
      font-size: 1.3rem;
      width: auto;
      justify-content: flex-start;
  }

  .navbar .nav-links {
      position: static;
      max-height: none;
      flex-direction: row;
      margin-bottom: 0;
      padding-top: 0;
      width: auto;
  }

  .navbar .nav-links ul {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-left: 0;
      width: auto;
  }

  .navbar .nav-links ul li a {
      padding: 10px 15px;
      width: auto;
      white-space: nowrap;
  }

  #scrollUpBtn {
    width: 50px;
    height: 50px;
    bottom: 65px;
    right: 28px;
  }

  .footer .contacts {
    flex-direction: row;
    gap: 20px;
  }

  .arrow-overlay {
    font-size: 1.5rem;
  }

  .menu {
    flex-direction: row;
  }
}

/* ==========================================================================
   BREAKPOINT 4: 1280px (Large Desktop)
   ========================================================================== */

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }

  .logo img {
    width: 32px;
    height: 32px;
  }

  #scrollUpBtn {
    width: 53px;
    height: 53px;
    bottom: 75px;
    right: 32px;
  }
}

@media (min-width: 1440px) {
    .container {
        max-width: 1440px;
    }

    .logo img {
        width: 32px;
        height: 32px;
    }

    #scrollUpBtn {
        width: 53px;
        height: 53px;
        bottom: 75px;
        right: 32px;
    }
}