@font-face {
    font-family: Montserrat-Regular;
    src: url(../assets/fonts/montserrat/Montserrat-Regular.ttf)
}

@font-face {
    font-family: Montserrat-Bold;
    src: url(../assets/fonts/montserrat/Montserrat-Bold.ttf)
}

@font-face {
    font-family: Montserrat-Black;
    src: url(../assets/fonts/montserrat/Montserrat-Black.ttf)
}

@font-face {
    font-family: Montserrat-SemiBold;
    src: url(../assets/fonts/montserrat/Montserrat-SemiBold.ttf)
}

@font-face {
    font-family: Montserrat-Medium;
    src: url(../assets/fonts/montserrat/Montserrat-Medium.ttf)
}


html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-position: center;
    position: relative;
}

h1{
    font-size: 42px;
    font-family: Montserrat-Black;
}

p{
    font-size: 22px;
    font-family: Montserrat-Regular;
}

.about-us-card{
    margin-top: 6%;
    margin-left: 15%;
    width: 70%;
    padding: 16px;
    border-radius: 12px;
    background: #fff;
    margin-bottom: 2%;
}
.footer{
    width: 80%;
    /* height: 12%; */
    background: rgb(47, 43, 109);
    border-radius: 12px 12px 0px 0px;
    margin: 0;
    margin-left: 12%;
    padding: 0;
}

.container_img{
    width: 100%;
    height: 70%;
    margin: 0;
    text-align: center;
}

.container_img img{
    width: 10%;
    height: 80%;
    display: inline-block;
    margin: 10px 5%;
    border-radius: 10px;
}

.sm_icons{
    position: fixed;
    z-index: 1;
    top: 20%;
    left: -8%;
    width:8%;
    height: 60%;
    border-radius: 0px 8px 12px 0px;
    animation: slide-in-left 300ms;
    animation-delay: 1s;
    animation-fill-mode: forwards;;
}

@keyframes slide-in-left{
    from{
        left:-8%;
    }
    to{left:0%;}
}

#sm_icon{
    text-decoration: none;
    display: block;
    text-align: center;
    font-size: 0rem;
    margin-top: 30%;
    animation: scale-up 300ms;
    animation-delay: 1300ms;
    animation-fill-mode: forwards;
    opacity: 0.9;
}

#sm_icon:hover{opacity: 1;}


#sm_icon:first-child{
    color: #3C5A99;
}
#sm_icon:nth-child(2){
    color: #d6249f;
}
#sm_icon:nth-child(3){
    color: #4875B4;
}
#sm_icon:nth-child(4){
    color: #1dcaff;
}
#sm_icon:nth-child(5){
    color: #FF3333;
}


@keyframes scale-up{
    from{font-size: 0rem;}
    to{font-size: 3rem;}
}

/* Media Queries */

@media screen and (max-width: 1115px){
    .container_img img{
        width: 20%;
    }
}

@media screen and (max-width: 800px){
    .about-us-card{
        margin-top: 13%;
    }
}

@media screen and (max-width: 475px){
    .sm_icons{
        width: 13%;
        left: -13%;
    }
    #sm_icon{
        font-size: 0rem;
    }
    @keyframes scale-up{
        from{font-size: 0rem;}
        to{font-size: 2.5rem;}
    }
    .about-us-card{
        margin-top: 20%;
    }
    @keyframes slide-in-left{
        from{left:-13%;}
        to{left:0%;}
    }
    .about-us-card p{font-size: 16px;}
}