/* html {
    overflow-x: hidden;
} */

#header-content {
    text-align: center;
    justify-content: center;
    align-items: center;
}

#header-content * :not(i) {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Resizing the association logo */
#header-content img {
    width: max(115px, 12%);
}


/* Modifying the association name */
/* Modifying the association email */
#header-content  > h1 {
    font-size: max(15px, 1.2vw);
    font-family: Arial, Helvetica, sans-serif, Geneva, Tahoma, sans-serif;
}

#nav {
    margin: 1.5% 0px;
}

#nav a {
    text-decoration: none;
    display: block;
}

#nav > a {
    color: rgb(91, 91, 91);
    
    font-family: 'Times New Roman', Times, serif;
}

/* Modyfying the navigation bar */
#nav > ul {
    width: 100%;

}

#nav > ul > li, #nav > ul > li > a {
    color: darkgreen;

    font-size: max(10px, 0.9vw);
    font-weight: 600;
}

#nav > ul li{
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Modyfying the burger menu bar */
.burger-menu {
    position: sticky;
    top: 0px;
    z-index: 2;
    
    display: none;
    flex-direction: column;

    justify-content: space-evenly;
    align-items: center;

    width: clamp(0.5rem, 2.5rem, 2.5rem);
    height: clamp(0rem, 2.22rem, 2.5rem);
    
    background-color: white;

    border-radius: 10px;
}

.burger-menu .bar, .burger-menu::after, .burger-menu::before {
    content: '';
    display: block;

    width: 1.5rem;
    height: 0.2rem;

    background-color: black;

    transition: 0.3s;
}

.burger-menu[active]::before {
    border-radius: 10px;

    transform: rotate(-40deg) translate(-5px, 7px);
}

.burger-menu[active]::after {
    border-radius: 10px;
    
    transform: rotate(-140deg) translate(5px, 7px);
}

.burger-menu[active] .bar {
    opacity: 0;
}


/* --------------------------------------------------- Dropdown Css ----------------------------------------------------------- */
* {
    padding: 0;
    margin: 0;
}

/* Base setup for the navigation bar */
#nav > ul {
    background-color: white;
    list-style: none;
}

#nav > ul li {
    display: inline-block;
    position: relative;

    padding-left: 1%;
    padding-right: 1%;
}

/* Dropdown setup */
.dropdown li {
    display: block !important;
    
    width: 150%;
    left: 50%;
    transform: translateX(-50%);

    justify-content: center;
    align-items: center;
    
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    
}

.dropdown {
    width: 100%;
    position: absolute;
    z-index: 0;
    visibility: collapse;

    border-color: rgba(91, 91, 91, 0.522);
    border-style: solid;
    border-width: 0;

    border-top-width: 2px; 

    background-color: rgba(255, 255, 255, 0.938);

    top: -100%;
    opacity: 0;
    transition: visibility 0.5s, top 0.5s, opacity 0.3s;
}

.dropdown[active] {
    visibility: visible;
    top: 125%;
    opacity: 1;
    transition: top 0.5s, opacity 0.3s;
}

.dropdown ~ i{
    transform: rotate(-360deg);
    transition: all 1s;
}   

.dropdown[active] ~ i{
    transform: rotate(-180deg);
    transition: all 1s;
}   

.dropdown a {
    font-size: max(12px, 0.8vw);
    color: rgb(2, 81, 81);
}

/* Goes below 750 width */

@media screen and (max-width: 1085px) { 
    .dropdown[active] {
        position: static;
    }

    .dropdown li {
        width: 100%;
        padding: 0%;
    }

    #nav > ul {
        white-space: nowrap;
    }
}

/* under certain width, burger button appear */
@media screen and (max-width: 1085px) {
    /* Make burger menu visible */
    .burger-menu {
        display: flex;
    }

    #nav {
        padding-left: 10px;
    }

    #nav > ul > li > a , #nav ul li{
        font-size: clamp(14px, 2.2vw, 18px);
    }

    /* .dropdown li a {
        font-size: clamp(11px, 2vw, 14px);
    } */

    .burger-menu ~ ul {
        display: none !important;

        flex-direction: column;
        
    }
    
    .burger-menu[active] ~ ul {
        /* width: 18% !important; */
        
        display: flex !important;
        flex-direction: column;
        
        text-align: start;
        align-items: start;

        left: 0%;
        transform: translateX(0%);

    }

    .burger-menu[active] ~ ul  li {
        display: block;
    }
    
    
    .burger-menu[active] ~ ul > li {
        display: block;
        /* border: 1px solid red; */
        width: auto;
        display: block;
    }
}

/* ---------------------------------------------------------------------------------------------------------------------------- */

#foot {
    padding: 0px 5%;
    margin-top: 5%;
    margin-bottom:  2%;

    font-size: clamp(0.3em, 1vw, 0.7em);
    /* font-size: 0.3em; */
    /* font-size: 5%; */
}

#foot > p {
    font-weight: bold;
    font-size:15px;
    color: rgb(82, 82, 82);
}

#foot > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;

    color: rgb(113, 113, 113);
}

/* #foot > div > p {
} */

#foot > div > ul {
    display: flex;
    /* width: clamp(1rem, 15rem, 50rem); */
    width: fit-content;
    justify-content: end;
    align-items: center;
    gap: 15%;
}

#foot > div > ul > li {
    display: inline-block;
}

#foot a {
    font-weight: bold;
    text-decoration: none;
    font-size: 15px;
    color: rgb(82, 82, 82);
}

/* @media screen and (max-width: 800px) {
    #logo {
        width: 20%;
    }
} */