header{
    /* Header styling */ 

    grid-column: 1/-1;
    display: grid;
    grid-template-columns: subgrid;
}

header nav{
    grid-column: 2/-2;

}
   
   /* #region Mobile Styling */
   
       .mobile-menu {
           display: flex;
           
           justify-content: space-between;
           margin: 5%;
           padding-bottom: 5%;
           border-bottom: solid 1px black;
       }

       .mobile-logo{
          
            display: flex;
            place-content:center;
            
            a{
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
            }

            picture{
                width: 100%;
            }

            img{
                width: 100%;
            }

       }
       
       
       
       /* mobile-menu-window */
       section#mobile-menu-window {
        
           display: none;
           flex-direction: column;
           position: fixed;
           inset: 0 auto 0 0;
           background-color: #f4f4f4;
           width: 100%;
           z-index: 4;
   
           .menu-exit{
               position: absolute;
               left: 0;
               padding: 1.5em 0em 0em 1.5em;
           }
       }
   
       
       #mobile-menu-window ul {
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
           margin-block: 20%;
           outline: solid rgb(32, 159, 209);
           font-size: 2em;
       }
       
       #mobile-menu-window ul li {
           margin: 0em 0em .25em 0em;
           font-weight: 600;
           font-family: 'Inter', sans serif;
       }
       
       #mobile-menu-window ul li a:hover {
           color: var(--accent-color);
           transition: .25s;
       }
   
       #mobile-menu-window.showMenu {
           display: flex;
           animation: blur-in .15s ease-in;
       }
   
   
   /* #endregion Mobile Nav Styling */

   /*  #region Desktop styling */

.desktop-menu {
    font-family: 'Inter', sans-serif;
}

.top-bar {
    background-color: black; 
    color: white;
    position: relative;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    padding: 1.25em 0;
}

.mobile-logo,.desktop-logo{
    
    width: min(220px,100%);
}

.desktop-menu a svg {
    width:fit-content ;
}


.first-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5% 0;
}

.first-col,
.second-col,
.third-col {
    flex: 0 0 33.33%; /* Set flex-basis to 33.33% */
    align-items: center;
}


.first-col {
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}

.second-col {
    display: flex;
    justify-content: center;
}

.third-col .newsletter {
    display: flex;
    justify-content: center;
    align-items: center;
}

.third-col .theme {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
}

.third-col span {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-weight: 700;
    margin-left: 8px;
}

 .dropdown {
    position: relative;
    display: inline-block;
  }
  
  .dropbtn {
    cursor: pointer;
  }

  .dropbtn:hover, .dropbtn:focus {
    color: #E84340;
  }
  
  .dropdown-content {
    position: absolute;
    font-size: 2em;
    background-color: #ffffff;
    min-width: 120px;
    border: solid 1px rgb(0, 0, 0);
    box-shadow: 0 0.5em 1em 0 rgba(0,0,0,0.2);
    border-radius: 3px;
    z-index: 1;
  }
  
  .dropdown-content button {
    font-weight: 900;
    width: 100%;
    color: rgb(22, 22, 22);
    padding: 12px 1em;
    text-align: center;
    background: none;
    border: none;
    cursor: pointer;
  }
  
  .dropdown-content button:hover {
    background-color: #dbdbdb;
  }

  .dropdown-content button:active {
    background-color: #dbdbdb;
    color: var(--accent-color);
  }

.thirdcol a:hover{
    color: var(--accent-color);
}

.newsletter {
    display: flex;
    align-items: center;
}

.second-row {
    font-size: .8em;
    /* margin-bottom: 5%; */
    border-top: solid 1px black;
    border-bottom: solid 1px black;
    white-space: nowrap;
}

.desktop-pages {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1em;
}

.desktop-pages svg {
    fill: black;
}

.desktop-pages a:hover {
    transition: .15s;
    color: var(--accent-color, red);
}

.desktop-pages a:hover path {
    transition: .15s;
    fill: var(--accent-color, red);
}


   /*  #endregion  */

   /* media queries */

@media(max-width:520px) {

    .desktop-menu{
        display: none;
    }
}

@media (min-width: 520px) {

	header{
		.mobile-menu {
			display: none;
		}

	}
}

@media (min-width: 520px) and (max-width: 645px) {

    .top-bar {
      flex: 1;
    }

    .first-col {
       flex: 1;
    }

    .second-col{
        flex: 3;
    }

    .third-col{
        flex: .75;
    }

    .third-col .newsletter{
        display: none;
    }

    .desktop-pages {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: calc(1em - .5em);
    }

    .desktop-pages li:nth-child(5),
  .desktop-pages li:nth-child(6) {
    display: none;
  }
  }

@media (min-width: 60.0625em){

    
}

[data-theme="dark"] {

    
	body {
	  color: var(--text-dm-color);
	  background: var(--background-dm-color);
	}

    .menu-open svg path,
    .search-icon svg path {
        stroke: var(--text-dm-color);
    }


     /* mobile-menu-window */
    section#mobile-menu-window {
        background-color: var(--background-dm-color);

        li a {
            color: var(--text-dm-color)
        }
    }

    #mobile-menu-window .menu-exit svg path {
        stroke: var(--text-dm-color);
    }

    .newsletter svg{
        fill: var(--text-dm-color);
    }

    .theme svg path {
       fill: var(--text-dm-color);
    }

    
    /* .desktop-menu a svg {
        fill: white;
    } */

    :is(.desktop-logo,.mobile-logo,.desktop-pages) svg  {

        fill: #fff;
        transition: 1s ease-in-out ;
        &:hover{
            fill: rgb(187, 61, 61);
        }
    }

    .second-row  {
        border-top: solid 1px white;
        border-bottom: solid 1px white;
    }

    .desktop-pages a{
        color: var(--text-dm-color);
    }

    .dropdown-content{
        background-color: #242424;
        border: solid 2px rgb(86, 86, 86);
    }
    .dropdown-content button{
        color: var(--text-dm-color);
    }

    .dropdown-content button:hover{
        background-color: #464646;
    }

    .dropdown-content button:active{
        background-color: #464646;
        color: var(--accent-color);
    }

}