footer {
    background-color: #E1D169;
    display: flex;
    flex-direction: column;

    .foot-cont {
        width: 95%;

        margin: 0 auto;
        padding: 0;

        display: grid;
        justify-content: space-evenly;
        align-items: start;
    }
}

.loca-img {
    height: 100%;
    position: relative;

    & img {
        position: absolute;
        top: 20px;
        left: 0;
        height: 80%;
        width: 95%;
        border-radius: 20px;
    }
}

/* CONTACT INFO */
.contact-info {
    list-style-type: none;
    padding: 20px;

    .head {
        font-weight: 600;
        font-size: clamp(.8rem, 3vw, 1rem);
    }

    & :not(:first-child){
        text-decoration: none;
        font-weight: 500;
        font-size: 15px;
        color: #000;
        transition: 0.3s;
    }
}

/* SOCIALS */
.socials {
    padding: 20px;
    list-style-type: none;

    .head {
        font-weight: 600;
        font-size: clamp(.8rem, 3vw, 1rem);
    }

    .aa {
        font-size: 25px;
    }

    .aa:hover {
       cursor: pointer;
   }
}

/* PAYMENT INFO */
.payment {
    list-style-type: none;
    padding: 20px;

    .head {
        font-weight: 600;
        font-size: clamp(.8rem, 3vw, 1rem);
    }

    & img {
        margin-bottom: 20px;
    }
}

.copyright{
    font-size: 15px;
    font-weight: 450;
    text-align: center;
    margin:0;
    
    & p {
        margin: 0;
        padding: 15px 0;
        color: #FFFFFF8C;
        font-size: 14px;
    }

    & p a{
        color: #e1d169;
        text-decoration: none;
    }
}

@media(min-width: 768px) {
    footer {
        .foot-cont {
            height: fit-content;
            grid-template-columns: 20% 10% 35% 35%;
            grid-template-rows: auto auto;
        }

        .loca-img {
            grid-column: 1/3;
            grid-row: 1/3;
        }

        .contact-info {
            grid-column: 3/4;
            grid-row: 1/3;

            height: 100%;
        }

        .socials {
            grid-column: 4/5;
            grid-row: 1/2;

            height: 100%;
        }

        .payment {
            grid-column: 4/5;
            grid-row: 2/3;

            height: 100%;
        }
    }
}

@media(min-width: 1024px) {
    footer {
        .foot-cont {
            width: 90%;
            grid-template-columns: 20% 20% 35% 25%;
        }
    }
}

@media(min-width: 1440px) {
    footer {
        position: relative;
        padding: 40px 0 40px 0;
        
        .foot-cont {
            width: 80%;
            grid-template-columns: 20% 15% 45% 20%;
        }

        .copyright {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: -50px;
        }
    }
}