/* Section footer */
footer {
    position: relative;
    height: 40vh;
    color: var(--main-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--fifth-color);
    margin: auto;
}

.logo-footer {
    width: 12vw;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: auto;  
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    column-gap: 100px;
}

footer ul {
    display: flex;
    flex-direction: column;
    list-style: none;
}

footer ul li {
        margin-bottom: 20px;
}

footer ul a {
    font-family: var(--main-font);
    color: var(--main-color);
}

footer ul a:hover {
    color: var(--fourth-color);
}

.contact p {
    font-family: var(--main-font);
    font-size: var(--text-size);
    margin-bottom: 20px;
}

.contact p a {
    color: var(--main-color);
}

.contact p a:hover {
    color: var(--fourth-color);
}

footer h3 {
    font-family: var(--secondary-font);
    font-size: var(--subtitle-size);
    color: var(--fourth-color);
    margin-bottom: 20px;
}

.socials a img {
    transition: transform 0.3s ease-in-out;
}

.socials a:hover img {
    transform: scale(1.1);
}

.credit {
    margin-top: 30px;
}

.credit p {
    font-family: var(--main-font);
    font-size: var(--text-size);
}

/* Media queries footer */
@media screen and (max-width: 1980px) {
    footer {
        height: 50vh;
    }
    .footer-content {
        column-gap: 150px;
        max-width: 90%;
    }

    footer ul a {
        font-size: var(--text-size-desktop);
    }
        
    .contact p {
        font-size: var(--text-size-desktop);
    }

    footer h3 {
        font-size: var(--subtitle-size-desktop);
    }

    .credit p {
        font-size: var(--text-size-desktop);
    }
}

@media screen and (max-width: 1600px) {
    .footer-content {
        column-gap: 100px;
    }

    footer ul a {
        font-size: var(--text-size);
    }
        
    .contact p {
        font-size: var(--text-size);
    }

    footer h3 {
        font-size: var(--subtitle-size);
    }

    .credit p {
        font-size: var(--text-size);
    }
}

@media screen and (max-width: 1500px) {
    footer {
        height: 60vh;    
    }
    
    .footer-content {
        column-gap: 50px;
    }

    footer ul a {
        font-size: var(--text-size-laptop);
    }
        
    .contact p {
        font-size: var(--text-size-laptop);
    }

    footer h3 {
        font-size: var(--subtitle-size-laptop);
    }
    
    .credit {
        margin-top: 10px;
    }
    .credit p {
        font-size: var(--text-size-laptop);

    }
}

@media screen and (max-width: 1300px) {
    footer ul li {
    margin-bottom: 15px;
    }
    
    footer ul a {
        font-size: var(--text-size-laptop-small);
    }

    .footer-content {
        column-gap: 100px;
    }

    footer ul a {
        font-size: var(--text-size-laptop-small);
    }
        
    .contact p {
        font-size: var(--text-size-laptop-small);
        margin-bottom: 15px;
    }

    footer h3 {
        font-size: var(--subtitle-size-laptop-small);
        margin-bottom: 15px;
    }

    .credit {
        margin-top: 5px;
    }
    .credit p {
        font-size: var(--text-size-laptop-small);
    }
}

@media screen and (max-width: 1100px) {
    .footer-content {
        column-gap: 40px;
    }

    footer ul a {
        font-size: var(--text-size-tablet);
    }
        
    .contact p {
        font-size: var(--text-size-tablet);
    }

    footer h3 {
        font-size: var(--subtitle-size-tablet);
    }

    .credit p {
        font-size: var(--text-size-tablet);
    }
}

@media screen and (max-width: 960px) {
    footer {
        height: 35vh;
    }
    .footer-content {
        column-gap: 20px;
        max-width: 90%;
    }
}

@media screen and (max-width: 576px) {
    footer {
        height: 80vh;
    }

    .footer-content {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(6, auto);
        row-gap: 20px;
    }
}