@import '../../styles/variables.scss';


.top {
    .pages {
        ul {
            li {
                margin: 25px 0px;
                padding: 0;
            }
        }
        .social-bar {
            height: 60px;
            .social-icon {
                cursor: pointer;
                opacity: 50%;
                background: $secondary-color;
                align-items: center;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                position: relative;
                width: 40px;
                height: 40px;
                svg {
                    fill: black;
                    transition: fill 0.3s;
                }
                &:hover {
                    background-color: $orange;
                    opacity: 1;
                    svg > path {
                        fill: white;
                    }
                }
            }
        }
    }
}

.store-btn:hover{
 box-shadow: "0px 12px 48px 0px rgba(0, 44, 109, 0.10)",
                     
}




.link{
   text-decoration: none;
   color: #000;
}




@media only screen and (max-width: 1400px){


    .list-item{
        margin: 0 20px !important;
    }
}



@media only screen and (max-width: 1200px){
    footer{
        width: 992px !important;
    }
}

@media only screen and (max-width: 1100px){
    footer {
        width: unset !important;
    }
}

@media only screen and (max-width: 1100px){

.our-app{
    margin-left: 10px !important;
}
}


@media only screen and (max-width: 1050px){
    .pages{
        display: flex;
        flex-direction: column !important;
        justify-content: center;
        align-items: center;
    }
}
@media only screen and (max-width: 500px){

    footer{
        padding: 0px 20px;
    }
}

@media only screen and (max-width: 450px){
    .all-lists{
        flex-wrap: wrap;
    }

    .all-lists ul {
        width: 50%;
    }
    .social-bar{
        justify-content: center;
    }

    .our-app .h4{
       margin: 0 auto;
    }
    .store-box{
        justify-content: center;
    }

    .logo-box{
       display: flex;
       justify-content: center;
       align-items: center;
    }

    .top .pages ul li {
        text-align: center;
    }
    .list-item {
        margin: 0 0px !important;
    }
}