/* ------------------  Footer Section ------------------ */

/* ----  Footer ---- */
footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #2D2B2B;
    color: white;
    width: 100%;
}

#footer_lower {
    background-color: #2D2B2B;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 15px;
    width: 100%;
}
.footer_group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 210px;
    font-family: 'Poppins', sans-serif;
}

/* Logo & Title */
#f_group_logo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px 20px 30px 20px;
}
#f_logo {
    height: 60px;
    margin-right: 10px;
}
#f_title h1 {
    font-size: 32px;
    color: white;
    font-family: 'Roboto Condensed', sans-serif;
    margin: 0;
}
#f_title h3 {
    font-size: 12px;
    font-family: 'Merriweather', serif;
    font-weight: 400;
    margin: 0 0 5px 0;
    font-style: italic;
}

/* Nav */
#f_group_nav a {
    font-family: 'Poppins', sans-serif;
}
#f_group_nav a:hover {
    text-decoration: underline;  
}

.icon {
    color: white;
    font-size: 24px;
    margin: 3px -5px 0 0;
}

#icon_text {
    color: white;
    font-family: 'Poppins', sans-serif;
}
#icon_text:hover {
    text-decoration: underline;  
}

#f_group_nav li {
    display: inline-block;
    color: white;
    font-family: 'Poppins', sans-serif;
    margin: 0;
}
#f_group_nav li:hover {
    text-decoration: underline;  
}


/* ----  Sub Footer ---- */
#subfooter {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    background-color: #1E1C1C;
    width: 100%;
    gap: 60px;
}
#subfooter p {
    color: lightgrey;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin: 0;
    text-align: center;
}

#subfooter a {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    text-decoration: underline;
}

#subfooter a:link {
	color: lightgrey;
}
#subfooter a:visited {
	color: lightgrey;
}


/* ------------------ Media Queries ------------------ */

/* Small devices (phones) */
@media (max-width: 900px) {
    /* footer section */
    #footer_lower {
        flex-direction: column;
        gap: 10px;
    }
    .footer_group {gap: 15px;}
    #f_group_nav a {font-size: 14px;}
    #icon_text {font-size: 14px;}
    #subfooter {
        flex-direction: column;
        height: 100px;
        gap: 5px;
    }
}

/* Medium devices (tablets, laptops) */
@media (min-width: 900px) { 
    /* footer section */
    #footer_lower {
        flex-direction: row;
        gap: 8vw;
    }
    .footer_group {gap: 17px;}
    #f_group_nav a {font-size: 15px;}
    #icon_text {font-size: 15px;}
    #subfooter {
        flex-direction: row;
        height: 60px;
        gap: 60px;
    }
}
 
/* Large devices (desktops) */
@media (min-width: 1400px) { 
    /* footer section */
    #footer_lower {
        flex-direction: row;
        gap: 8vw;
    }
    .footer_group {gap: 20px;}
    #f_group_nav a {font-size: 16px;}
    #icon_text {font-size: 16px;}
    #subfooter {
        flex-direction: row;
        height: 60px;
        gap: 60px;
    }
}