/* ------------- Header style (Desktop) ------------- */
.site-header {
  background: #d9d9d9;
  background:linear-gradient(45deg, #fff 10%, #ccc 40%, #ddd 50%, #ccc 65%, #fff 80%);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10vh;
  z-index: 10;
  transition: all 0.3s ease;

  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* ------------- Logo style ------------- */
.desktop-logo {
    display: flex;
    height: 100%;
    align-items: center;
    max-width: 35%;
}

.desktop-logo img{
    height: 60%;
    width: auto;
    padding-left: 5%;
    transition: filter 0.2s ease;
}

.desktop-logo img:hover{
    filter:brightness(80%);
}

.mobile-logo{
    display: none;
}

/* ------------- Nav button style ------------- */
.main-nav ul {
    display: flex;
    align-items: center;
    gap: 2rem;
    list-style: none;
}

.main-nav a {
  text-decoration: none;
  font-weight: 600;
  font-size: 3vh;
  color: #273270;
  transition: color 0.2s ease;
  padding-bottom: 4vh;
}

.main-nav a:hover {
  color: #f1f1f5;
}

#mobile-nav, 
.hamburger{
    display: none;
}

#about-us-dropdown{
    display: none;
    position: absolute;
    background-color: #f1f1f5;
    height: max-content;
    top: 10vh;
}

#about-us-dropdown a{
    font-size: 2.5vh;
}

#about-us-dropdown a:hover{
    color: #00aebb;
}

#about-us-dropdown li{
    padding: 0.5vh 1vw;
}

#about-us:hover #about-us-dropdown{
    display: block;
}


/* ------------- Right side buttons style ------------- */
.header-buttons{
    display: flex;
    text-align: right;
    max-width: 15%;
    margin-right: 1%;
}

.demo-btn{
    height: 12%;
    width: auto;
    padding: 0.7rem;
    color:#273270;
    background-color: #f1f1f5;
    border-radius: 999px;
}

.demo-btn:hover{
    background-color: #bad0ff;
    color: #000000;
}

.login-btn{
    height: 12%;
    width: auto;
    padding: 0.7rem;
    color:#f1f1f5;
    background-color: #273270;
    border-radius: 999px;
}

.login-btn:hover{
    background-color: #093da5;
    color: #d2e4ff;
}

#lang-toggle{
    margin: 0 1.5vw 0;
    height: 75%;
    align-self: center;
}

.header-buttons a,
.hero-buttons a {
    text-decoration: none;
    font-weight: 600;
    font-size: 1.5rem;
    text-wrap: nowrap;
    transition: background-color 0.3s ease;
    transition: color 0.3s ease;
    text-align: right;
}


/* ------------- Footer style ------------- */

.site-footer{
  background: #000a3f;
  background-size: cover;
  left: 0;
  position: sticky;
  top: 0;
  width: 100%;
  height: 16vh;
  border-top: 2px solid #002266;
  transition: all 0.3s ease;

  display: flex;
  align-items: center;
}

.site-footer .desktop-logo img{
    width: 30vw;
    padding-left: 2%;
    padding-right: 5%;
}

.site-footer .mobile-logo img{
    display: none;
}

.site-footer #social-media{
    width: 35vw;
    float: right;
    right: 0;
    padding-right: 5%;
    align-self: right;
    margin-left: 35%;
}

.site-footer #social-media p{
    color: #f1f1f5;
    font-size: 2vh;
    text-align: center;
    margin-bottom: 0.1vh;
}

.site-footer #social-media #icons{
    display: flex;
    justify-content: center;
}

.site-footer #social-media img{
    display: block;
    margin: 0 0.2vw;
    min-height: 8vh;
    max-width: 3.5vw;
    max-height: 10vh;
}

#copyright{
    font-size: 1.7vh;
    width: 100%;
    text-align: center;
    color: #f1f1f5;
    background: #000a3f;
    margin: 0;
    padding-top: 0.8vh;
    padding-bottom: 0.6vh;
    border-top: 1px solid black;
}


/* ---------------- MOBILE STYLES ---------------- */

@media screen and (max-width: 800px){

/* ------------- Header style (Mobile) ------------- */

.site-header {
  background: #f1f1f5;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10vh;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid #00349b;
  transition: all 0.3s ease;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header .desktop-logo{
    display: none;
}

.mobile-logo{
    display: flex;
    height: 82%;
    margin-left: 1%;
}

.main-nav ul {
    display: none;
}

.header-buttons{
    display: none;
}

.hamburger{
    display: block;
    height: 100%;
    aspect-ratio: 1/1;
}

.hamburger:hover{
    background-color: #e6e6e6;
}

.hamburger img{
    height: 90%;
    object-fit:cover;
    padding: 5%;
}

#mobile-nav{
    display: none;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 8vh;
    right: 0;
    height: max-content;
    width: 100%;
    z-index: 999;
}

#mobile-nav a{
    color: #f1f1f5;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 1rem;
    display: block;
}

#mobile-nav a:hover{
    color:#000000;
    background-color: #ddd;
}

/* ------------- Footer style (Mobile) ------------- */

.site-footer #social-media{
    width: 50vw;
}

.site-footer #social-media img{
    max-width: none;
    max-height: none;
    width: 8vw;
    margin-right: 1vw;
}

.site-footer .desktop-logo{
    display: none;
}

.site-footer .mobile-logo{
    display: flex;
    width: 20vw;
    float: left;
}

}