.mainFooter{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
background-color: var(--black);
color: var(--white);




}

.mainFooter .firstDiv{
    margin-top: 3em;
 width: 68rem;
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: .5em;


  border-bottom: .2em solid var(--blue);
  color: var(--white);

  font-size: var(--footerMago);



}



.mainFooter .firstDiv div a{
    color: var(--white);
}

.mainFooter .firstDiv div:nth-child(2) {
   width: 10rem;
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size: var(--foterLinks);


}


.mainFooter .secondDiv{
    width: 68rem;
    display: flex;
    justify-content: space-between;
    padding: 1em;

    font-size: var(--footerText);

/* border: 2px solid gold;    */

}


.mainFooter .secondDivFirst{
    max-width: 35rem;
}


.mainFooter .secondDiv div{
    padding: .5em;
}

.mainFooter .secondDivFirst div:nth-child(1){
   font-size: var(--foterLinks);
   color: var(--grey);
}

.mainFooter .secondDivSecond{

    width: 12rem;
    font-size: var(--footerText);



}


.mainFooter .secondDivSecond div:hover {
    color: var(--grey);
}
 
.mainFooter .secondDivSecond div:nth-child(1){
    font-size: var(--footerHeadline);
   color: var(--grey);
   border-bottom: .2em solid var(--grey);
}


.mainFooter .threedDiv{

   width: 68rem;
   padding: 1em;
   margin-bottom: 3em;

   font-size: var(--footerText);
/* border: 2px solid greenyellow; */

}

.mainFooter .threedDiv div{
    padding: .5em;
}











@media (max-width:68rem){
.mainFooter .firstDiv {
        margin-top: 3em;
        width: 50rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: .5em;


        border-bottom: .2em solid var(--blue);
        color: var(--white);

        font-size: var(--footerMago);


    }



    .mainFooter .firstDiv div a {
        color: var(--white);
    }

    .mainFooter .firstDiv div:nth-child(2) {
        width: 10rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        font-size: var(--foterLinks);


    }


    .mainFooter .secondDiv {
        width: 50rem;
        display: flex;
        justify-content: space-between;
        padding: 1em;
    }


    .mainFooter .secondDivFirst {
        max-width: 30rem;
    }


    .mainFooter .secondDiv div {
        padding: .5em;
    }

    .mainFooter .secondDivFirst div:nth-child(1) {
        font-size: var(--foterLinks);
        color: var(--grey);
    }

    .mainFooter .secondDivSecond {

        width: 12rem;
        font-size: var(--footerText);



    }


    .mainFooter .secondDivSecond div:hover {
        color: var(--grey);
    }

    .mainFooter .secondDivSecond div:nth-child(1) {
        font-size: var(--footerHeadline);
        color: var(--grey);
        border-bottom: .2em solid var(--grey);
    }


    .mainFooter .threedDiv {

        width: 50rem;
        padding: 1em;
        margin-bottom: 3em;

        font-size: var(--footerText);

    }
}



















@media (max-width:50rem) {
    .mainFooter .firstDiv {
        margin-top: 3em;
        width: 40rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: .5em;


        border-bottom: .2em solid var(--blue);
        color: var(--white);

        font-size: var(--footerMago);


    }



    .mainFooter .firstDiv div a {
        color: var(--white);
    }

    .mainFooter .firstDiv div:nth-child(2) {
        width: 10rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        font-size: var(--foterLinks);


    }


    .mainFooter .secondDiv {
        width: 40rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 1em;
    }


    .mainFooter .secondDivFirst {
        max-width: 30rem;
    }


    .mainFooter .secondDiv div {
        padding: .5em;
    }

    .mainFooter .secondDivFirst div:nth-child(1) {
        font-size: var(--foterLinks);
        color: var(--grey);
    }

    .mainFooter .secondDivSecond {

        width: 12rem;
        font-size: var(--footerText);



    }


    .mainFooter .secondDivSecond div:hover {
        color: var(--grey);
    }

    .mainFooter .secondDivSecond div:nth-child(1) {
        font-size: var(--footerHeadline);
        color: var(--grey);
        border-bottom: .2em solid var(--grey);
    }


    .mainFooter .threedDiv {

        width: 40rem;
        padding: 1em;
        margin-bottom: 3em;

        font-size: var(--footerText);

    }
}










@media (max-width:40rem) {
    .mainFooter .firstDiv {
        margin-top: 3em;
        width:95%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: .5em;


        border-bottom: .2em solid var(--blue);
        color: var(--white);

        font-size: var(--footerMago);


    }



    .mainFooter .firstDiv div a {
        color: var(--white);
    }

    .mainFooter .firstDiv div:nth-child(2) {
        width: 10rem;
        display: flex;
        align-items: center;
        justify-content: space-between;

        font-size: var(--foterLinks);


    }


    .mainFooter .secondDiv {
        width: 95%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: .5em;
    }


    .mainFooter .secondDivFirst {
       width: 100%;

    }


    .mainFooter .secondDiv div {
        padding: .5em;
    }

    .mainFooter .secondDivFirst div:nth-child(1) {
        font-size: var(--foterLinks);
        color: var(--grey);
    }

    .mainFooter .secondDivSecond {

        width: 100%;
        font-size: var(--footerText);



    }


    .mainFooter .secondDivSecond div:hover {
        color: var(--grey);
    }

    .mainFooter .secondDivSecond div:nth-child(1) {
        font-size: var(--footerHeadline);
        color: var(--grey);
        border-bottom: .2em solid var(--grey);
    }


    .mainFooter .threedDiv {

        width: 95%;
        padding:.5em;
        margin-bottom: 3em;

        font-size: var(--footerText);

    }
}