:root{
    /*Page colors*/
    --color-white-background: #F4F3F2;
    --color-primary: #0A7C6E;
    --color-secondary: #ADE5ED;
    --color-tertiary: #F67E34;
    --color-footer-background: #141615;
    --color-accent: #F17325;

    /*Font colors*/
    --color-text-primary-dark: #151515;
    --color-text-secondary-darl: #3E3D3D;
    --color-text-primary-light: #F2F2F2;
    --color-text-secondary-light: #EFEFEF;
    --color-text-tertiary-light: #B5B5B5;
    --color-text-legal: #9F9A9A;

    /*Fonts*/
    --font-title: 'Montserrat';
    --font-text: 'Inter';
    --font-size-title: 4.8rem;
    --font-size-text: 1.6rem;
    --font-size-subtitle: 2rem;    
    --font-size-nav: 1.2rem;
    --font-size-legal: 0.6rem;
    --font-size-email: 0.75rem;

}

@font-face {
    font-family: Inter;
    src: url(../assets/fonts/Inter/Inter-VariableFont_opsz\,wght.ttf);
}



*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter";
    
}

body
{
    background-color: var(--color-white-background);
}

.navbar
{
    background-color: var(--color-primary);
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    height: 40px;
}

#navbarText
{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;

}

#navbarText li{
    list-style: none;
}

#navbarText li a
{
    list-style: none;
    font-size: var(--font-size-nav);
    color: var(--color-text-secondary-light);
    letter-spacing: 10%;
    text-decoration: none;
    transition: transform 0.2s ease;
    display: inline-block; 
}

#navbarText li a:hover
{
    transform: scale(1.1);
    opacity: 0.85;
}

.logo
{
    display: flex;
    justify-content: center;
    color: var(--color-text-secondary-light);
    margin-left: 10px;
   
    
}

.logo img
{   
    display: flex;

    height: 30px;
    width: auto;
}

#languages
{
   margin-left: auto; 
   display: flex;
   align-items: flex-end;
   justify-content: center;
   gap: 10px;
   margin-right: 20px;
   

}

#languages button
{
    border-color: transparent;
    width: 36px;
    height: 24px;
    background: none;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;

}

#languages button:hover
{
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

#languages button:active
{
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#languages button:focus-visible
{
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 2px;
}


#languages img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius:2px ;
    transition: transform 0.2s ease, opacity 0.2s ease;


}

#languages button:hover img {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.1);
  opacity: 0.85;
}

.footer
{
    background-color: var(--color-footer-background);
   padding-left: 10px;
   padding-top: 10px;
   padding-bottom: 10px;
}

.footer h3
{
    display: flex;
    justify-content: center;
    align-self: center;
    font-size: var(--font-size-nav);
    color: var(--color-text-tertiary-light);
    letter-spacing: 30%;
    text-align: center;
    
}

#footer-left
{
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
    
}

.footer h4
{
    font-size: var(--font-size-email);
    color: var(--color-text-tertiary-light);
    letter-spacing: 5%;
    text-align: center;
}

#logos
{
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

.footer i
{
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.footer i:hover
{
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.footer i:active
{
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.footer i:focus-visible
{
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 2px;
}

.social
{    
    transition: brightness 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.social:hover
{
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
    filter: brightness(0.85);
}

.social:active
{
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.social:focus-visible
{
    outline: 2px solid var(--color-primary-dark);
    outline-offset: 2px;
}

#ig
{
    width: 20px;
    height: 20px;
    color: #FCAF45;
}


#yt
{   
    width: 22px;
    height: 22px;
    color: #CD201F;
}

#fb
{
    width: 20px;
    height: 20px;
    color: #1877F5;
}

#legal
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer h6
{
    font-size: var(--font-size-legal);
    color: var(--color-text-legal);
    letter-spacing: 8%;
}

@media (min-width: 768px) {
    .navbar
    {
       
        height: 50;
    }
}