/* Laptops and Desktops */
@media (min-width: 1025px) {
    /* Styles for laptops and desktops */
    .header{
        padding-top:20px;
        padding-bottom:20px;
        padding-left: 32px;
        padding-right: 32px;
        margin-left: 80px;
        margin-right: 80px;
        font-family: 'Montserrat', sans-serif;
        display: flex;
        justify-content: space-between;
        align-items: center; 
    }
    .logo{
        font-weight: 600;
    }
    .nav{
        display: flex;
        flex-direction: row;
        gap: 30px;
    }
    .nav-p{
        display: none;
    }
    a{
        text-decoration: none;
        color: black;
    }
    
    a:hover{
        border-bottom: 5px solid black ;
        transition: 0.5s ease-in;
        cursor: pointer;
    }
    button{
        border: none;
        background: none;
        cursor: pointer;
    }
    .menu{
        display: none;
    }
}



/* Tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Styles for tablets */
    .header{
        padding-top:20px;
        padding-bottom:20px;
        padding-left: 32px;
        padding-right: 32px;
        margin-left: 30px;
        margin-right: 30px;
        font-family: 'Montserrat', sans-serif;
        display: flex;
        justify-content: space-between;
        align-items: center; 
    }
    .logo{
        font-weight: 600;
    }
    .nav{
        display: flex;
        flex-direction: row;
        gap: 30px;
    }
    .nav-p{
        display: none;
    }
    a{
        text-decoration: none;
        color: black;
    }
    
    a:hover{
        border-bottom: 5px solid black ;
        transition: 0.5s ease-in;
        cursor: pointer;
    }
    button{
        border: none;
        background: none;
        cursor: pointer;
    }
    .menu{
        display: none;
    }
}

/* Phones */
@media (max-width: 767px) {
    /* Your styles for phones */
    .header{
        margin-top: 30px;
        padding-top:10px;
        padding-bottom:10px;
        padding-left: 32px;
        padding-right: 32px;
        margin-left: 16px;
        margin-right: 16px;
        font-family: 'Montserrat', sans-serif;
        display: flex;
        justify-content: space-between;
        align-items: center; 
    }
    .nav{
        display: none;
    }
    .nav-p{
        display: flex;
        flex-direction: row;
        gap: 30px;
    }
    button{
        border: none;
        background: none;
    }



    /* Popup Menu */
      .menu {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.1);
        display: none;
        align-items: center;
        justify-content: flex-end;
        animation: fadein 0.25s ease-out;
      }
      .popup-content {
        width: 300px;
        height: 100vh;
        background: white;
        box-sizing: border-box;
        padding: 30px 25px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        position: relative;
        animation: scalein 0.25s ease-out;
      }
      .close {
        margin-top: 30px;
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
      }
      .nav-menu{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }
      .nav-menu >  span > a{
        text-decoration: none;
        color: black;
        border-bottom: 2px solid black;
      }
      .br{
        display: flex;
        align-items: center;
        justify-content: center;
        justify-content: space-between;
        gap: 30px;
        font-family: 'Montserrat', sans-serif;
      }
      .br.light-2, .br.dark-2 {
        /* Initial button styles */
        border: none;
      }
      .active-button p {
        border-bottom: 2px solid black;
        display: inline;
        padding-bottom: 2px;
      }
      @keyframes fadein {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      @keyframes scalein {
        0% {
          transform: scale(1.05);
        }
        100% {
          transform: scale(1);
        }
      }
}