.footer{background-color: var(--ink)}
.footer-container {
    height: 600px;
    background: url("https://www.agileidea.it/img/footer_back.svg") no-repeat;
    background-size: cover;
    padding: 80px 200px 100px;
}

.footer-content {
    display: flex;
    width: 100%;
}
.footer-content li{
    color:white;
}

.left-footer {
    width: 50%;
}

.top-left-footer {
    display: flex;
    justify-content: space-between;
    margin-bottom: 150px;
}

.tll-footer {
    width: 40%
}

.tlr-footer {width: 60%;color:white;}
.tlr-footer ul{list-style:none;margin-bottom:20px;}
.tlr-footer ul li{margin-bottom:10px;}
.list-header{font-weight:700;}
.footer-menu, .footer-legal {
    list-style: none;
    margin: 0;
    padding: 0
}

.footer-menu a, .footer-legal a {
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    font-size: 1rem;
}
.footer-menu li{margin-bottom:10px;}

.footer-menu a:hover, .footer-legal a:hover, .right-footer a:hover {
    text-decoration: underline
}
    /* prefisso con barra "/" come nel mockup */
.footer-menu.slash li a::before, .footer-legal.slash li a::before {
    content: "/ ";
    margin-right: .25rem;
    opacity: .95
}

.footer-copy {
    color: white;
    font-size:1rem;
    line-height:1.3rem;
    margin-bottom:10px;
}

.right-footer {
    width: 50%;
    color: white;
    display: flex;
    justify-content: end;
}

.right-footer-content h4 {
    font-weight: 500;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.right-footer a, .right-footer p {
    color: #fff;
    text-decoration: none;
    font-weight: 300;
    font-size: 1rem;
    margin-bottom:5px;
}

.sede-legale, .sede-operativa {
    margin-bottom: 20px;
}

.footer-social {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
    align-items:center;
    font-size:1.125rem;
}

.footer-social a {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    text-decoration: none
}

.footer-social svg {
    width: 18px;
    height: 18px;
    fill: #fff
}
.bottom-left-footer{transform:translateY(-115px);width:max-content;}
.footer-logo{position:relative;height:60px;}
.footer-logo img {
    position: absolute;
    left: -13px;
    height: 100%;
    object-fit: cover;
}
.footer-legal li{margin-bottom:7px;}
@media (max-width: 1700px) {
    .footer-container{height:520px;background-size:cover;}
    .top-left-footer {margin-bottom: 120px;}
    .right-footer-content {width: 35%;}
    .right-footer-content h4 {margin-bottom: 10px;}
    .sede-legale, .sede-operativa {margin-bottom: 15px;}
}
@media (max-width: 1100px) {
    .footer-container {
        height: 550px;
        background: url(https://www.agileidea.it/img/footer_back.svg) no-repeat;
        background-size: cover;
        padding: 80px 40px 2px;
    }
}
@media (max-width: 870px) {
    .footer-container {height: 690px;}
    .right-footer-content {width: 70%;}
    .tll-footer {width: 95%;}
    .footer-container {height: 530px;}
}
@media (max-width: 576px) {
    .footer-container {padding: 25px;height: max-content;padding: 70px 25px;}
    .footer-content{display:block;margin-bottom:30px;}
    .top-left-footer{display:flex;margin-bottom:0px;}
    .left-footer{width:100%;margin-bottom:10px;}
    .right-footer{display:block;width:100%;}
    .tll-footer{width:80%; margin-bottom :15px;}
    .footer-menu li a{font-size:1.125rem;line-height:1.5rem}
    .footer-menu li {margin-bottom: 5px;}
    .right-footer-content{width:100%;}
    .right-footer-content h4{font-size:2rem;}
    .sede-legale p{font-size:1.125rem;line-height:1.5rem;}
    .sede-operativa p{font-size:1.125rem;line-height:1.5rem;}
    .recapitiFooter p{font-size:1.125rem;line-height:1.5rem;}
    .recapitiFooter a{font-size:1.125rem;line-height:1.5rem;}
    .tlr-footer ul li {font-size:1.125rem;line-height:1.5rem;}
    .tlr-footer ul{list-style:none;margin-bottom:20px;}
    .tlr-footer ul li{margin-bottom:5px;}
    .bottom-left-footer{transform:translateY(0px);width:max-content;}
    .footer-copy{font-size:1.125rem;line-height:1.5rem;}
    .footer-legal a {font-size: 1.20rem; line-height:1.5rem;}
}