@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display=swap');
*,*:before,*:after{
    box-sizing:border-box;
    font-family: "poppins" sans-serif;
}
body{
    font-family:"poppins";
    margin:0;
    display: flex;
    flex-direction: column; /* Arrange children vertically */
    min-height: 100vh;
    font-size: 14px;
}
main{
    
    align-items: center;
    justify-content: center;
    color: white;
    line-height: 3.8;
    font-size: 80px;
    text-transform: uppercase;
    font-weight: bold;
}
footer {
 
    padding: 0px;
    margin-top: 116px;
    margin-left: 190px;
}
footer > *{
    flex: 1 100%;
}
.footer-left {
    margin-bottom: -4em;
    padding-left: 231px;
}
.footer-left img{
    width: 26%;
}
h2{
    font-weight: 600;
    font-size: 17px;
}
.footer ul{
    list-style: none;
    padding-left: 0;
}
.footer li{
    line-height: 2em;
}
.footer a{
    text-decoration: none;
}

.box a{
    color: black;
}
.copy-right p{
    text-align: center;
    padding-top: 0px;
   padding-right: 30%;
    color: white;

 
}
.footer-left p {
    padding-right: 30%;
    color: white;

}

.socials a{
    height: 45px;
    width: 45px;
    border-radius: 10px;
    font-size: 22px;
    line-height: 45px;
    color: white;
}
.socials a i{
    padding: 10px 12px;
    font-size: 20px;

}
.socials a:hover {
    color: #fff;
    background-color: #333;
    transition: all ease 0.3s;
}



@media (min-width: 768px) and (max-width: 1024px){


    .footer {
    padding: 0px;
    margin-top: 116px;
    margin-left: -205px;
    }
    .footer-left p {
        font-size: small;
        padding-right: 56%;
        color: white;
    }
    .socials a {
        height: 45px;
        width: 45px;
        border-radius: 10px;
        font-size: 22px;
        line-height: 45px;
        color: white;
        margin-right: 7px;
    }
    .footer-left p {
        font-size: small;
        padding-right: 38%;
        color: white;
    }
    .copy-right p {
        font-size: small;
        padding-right: 53%;
        color: white;
    }
    .footer-left img {
        width: 59%;
    }
    .socials {
        margin-left: -14px;
    }
    .copy-right {
        margin-left: -20px;
    }
  
    
}

@media (min-width: 820px) and (orientation: portrait) {


    .footer {
    padding: 0px;
    margin-top: 116px;
    margin-left: -205px;
    }
    .footer-left p {
        font-size: small;
        padding-right: 56%;
        color: white;
    }
    .socials a {
        height: 45px;
        width: 45px;
        border-radius: 10px;
        font-size: 22px;
        line-height: 45px;
        color: white;
        margin-right: 7px;
    }
    .footer-left p {
        font-size: small;
        padding-right: 38%;
        color: white;
    }
    .copy-right p {
        font-size: small;
        padding-right: 56%;
        color: white;
    }
    .footer-left img {
        width: 59%;
    }
    .socials {
        margin-left: -14px;
    }
    .copy-right {
        margin-left: -20px;
    }
  
    
}

@media (max-width: 1180px) and (orientation: landscape){
    .footer {
        padding: 0px;
        margin-top: -115px;
        margin-left: -205px;
    }
    .copy-right {
        margin-left: -19px;
    }
    .socials {
        margin-left: -12px;
    }
}
@media (max-width: 1180px) and  (min-width: 820px) and (orientation: landscape){
    .footer {
        padding: 0px;
        margin-top: 44px;
        margin-left: -205px;
    }
    .copy-right {
        margin-left: -98px;
    }
    .footer-left p {
        padding-right: 57%;
        color: white;
    }
    

}

@media (max-width: 1024px) and (orientation: landscape){
    .footer {
        padding: 0px;
        margin-top: px;
        margin-left: -205px;
    }
    .copy-right p {
        font-size: small;
        padding-right: 65%;
        color: white;
    }
    .copy-right {
        margin-left: -20px;
    }

}

@media (min-width: 390px) and (max-width: 480px){
    .footer-left > *{
        flex: 1 0px;
    }
    .footer-left img {
        width: 71%;
    }
    .socials {
        margin-left: -16px;
        padding-top: 0px;
    }
    br{
        display: none;
    }
    .copy-right p {
        text-align: center;
        padding-bottom: 20px;
        margin-left: -46px;
        font-size: smaller;
    }
    footer {
        padding: 0px;    
        margin-top: 85px;
        margin-left: -209px;
        margin-bottom: 158px;
    }
    .footer-left {
        margin-bottom: -13em;
        padding-left: 225px;
    }
    .footer-left p {
        padding-right: 16%;
    }
    
    
}
@media (min-width: 300px) and (max-width: 389px){
    footer {
        padding: 0px;
        margin-left: -209px;
        margin-bottom: 133px;
        margin-top: 0;
    }
    .footer-left {
        margin-bottom: -13em;
        margin-top: -104px;
        padding-left: 225px;
    }
    .footer-left img {
        width: 45%;
    }
    .socials {
        font-size: x-small;
        margin-left: -9px;
        padding-top: 0px;
        padding-bottom: -49px;
    }
    .footer-left p {
        padding-right: 30%;
        font-size: x-small;
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {

    footer {
        padding: 0px;
        margin-top: -27px;
        margin-left: 316px;
    }
    

}