nav {
     position: fixed;
     left: 0;
     width: 100%;
     transition: border-color .26s var(--cubic), transform .5s var(--cubic);
     top: 0;
     z-index: 100;
     border-bottom: 1px solid transparent;

     .content {
          display: grid;
          position: relative;
          z-index: 100;
          transition-delay: .4s;
          grid-template-columns: repeat(3, 1fr);
          align-items: center !important;

          .logo {
               height: 15px;
               justify-self: start;

               img {
                    width: auto;
                    height: 100%;
               }
          }

          .logo:hover {
               opacity: .8;
          }

          ul {
               align-self: center;
               height: 100%;
          }

          .nav-link {
               margin-top: 1px;
               color: var(--t3);
               font-size: 12.5px;
               font-variation-settings: 'wght' 550;
          }

          .nav-link:hover {
               color: var(--t8);
          }

          .toggle {
               height: 100%;
               
               .nav-link {
                    padding: 7px;
                    margin: -7px;
                    margin-top: -5px;
                    border-radius: 3px;
               }
          }

          .toggle:hover {
               .nav-link {
                    background-color: #F2F2F2;
               }
          }

          .pulse {
               color: var(--t3);
               margin: var(--g12) 0;
               font-size: 12.5px;
               justify-self: end;
               padding: 8px 12px;
               
               span {
                    margin-top: 2px;
               }
          }

          .pulse:hover {
               color: var(--t6);
               background-color: #EDEDED;
          }

          .menu-button {
               display: none;
          }
     }

     .dropdown {
          position: absolute;
          z-index: 99;
          border-bottom: 1px solid hsl(0, 0%, 0%, .06);
          background-color: white;
          width: 100%;
          display: grid;
          grid-template-columns: repeat(4, calc(25% - calc(48px / 4)));
          padding: var(--g40);
          transform: translateY(-50%);
          transition-duration: .45s;
          bottom: 1px;

          .head {
               font-size: 13px;
               font-variation-settings: 'wght' 630;
               grid-column: 1  / 2;
               color: var(--t9);
               grid-row: 1 / 2;
          }

          .arrow-button {
               grid-column: 1  / 2;
               justify-self: start;
               align-self: end;
          }

          .blog-card {
               grid-row: 1 / 3;
               color: var(--t7);
               width: 100%;
               
               p {
                    overflow: hidden;
				text-overflow: ellipsis;
				transition: inherit;
				white-space: nowrap;
                    font-size: 12.5px;
                    font-variation-settings: 'wght' 630;
               }
          }
     }

}

.backdrop {
     backdrop-filter: blur(5px);
     background-color: hsl(0, 0%, 0%, .2);
     position: fixed;
     z-index: 99;
     opacity: 0;
     pointer-events: none;
}

body:has(.dropdown:hover),
body:has(.toggle:hover) {
     .backdrop {
          opacity: 1;
     }

     .content {
          background-color: white;
          transition-duration: 0ms !important;
          transition-delay: .0s;
     }

     .dropdown {
          transform: translateY(100%) !important;
     }

     .toggle {
          .nav-link {
               color: var(--t9);
               background-color: #F2F2F2;
          }
     }
}

@media (max-width: 1380px) {
     nav {
          .content {
               .logo {
                    height: 14px;
               }

               .nav-link {
                    font-size: 12px;
               }

               .toggle {
                    .nav-link {
                         padding: 6px;
                         margin: -6px;
                         margin-top: -4px;
                    }
               }

               .pulse {
                    font-size: 12px;
               }
          }

          .dropdown {
               .head {
                    font-size: 12.5px;
               }

               .blog-card {
                    grid-row: 1 / 3;
                    color: var(--t7);
                    width: 100%;
                    
                    p {
                         font-size: 12px;
                    }
               }
          }
     }
}

@media (max-width: 1052px) {
     nav {
          .pulse,
          ul,
          .dropdown {
               display: none !important;
          }

          .logo {
               height: 15px;
          }

          .content {
               padding: var(--g12);
               grid-template-columns: 1fr 1fr;

               .menu-button {
                    display: grid;
                    justify-self: end;
                    padding: 4px;
                    margin: -2px;
                    scale: 1.07;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 3px;

                    div {
                         height: 3px;
                         background-color: var(--t9);
                         aspect-ratio: 1; 
                         border-radius: 50px;
                    }
               }
          }
     }
} 

@media (max-width: 768px) {
     nav {
          .logo {
               height: 14px;
          }

          .content {
               .menu-button {
                    padding: 2px;
                    margin: -2px;
                    scale: 1;
               }
          }
     }
} 

@media (max-width: 540px) {
     nav {
          background-color: white;
          border-color: hsl(0, 0%, 0%, .06);
          .logo {
               height: 13px;
               margin: 2px;
          }

          .content {
               .menu-button {
                    padding: 2px;
                    margin: 0;
                    scale: 0.91;
               }
          }
     }
}