html, body {
    width: 100%;
    height: 100%;
}
a{
    text-decoration:none;
}
a:hover{
    color:white
}
hr {
    border: 0;
    height: 2px;
    opacity: 0.6;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
@font-face {
    font-family: 'iransansweb';
    src: url('../fonts/iransansweb.ttf') format('truetype');
}
.ptn-link{
    font-size:1.2em
}
.box {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    font-family: 'iransansweb';
    font-size: 2em;
    color: white;
    position: relative;
    background-color: aqua;
    transition: bottom 0.5s;
    bottom: 0px;
}
    .box:hover {
        bottom: 20px;
        border: 3px solid white;
        -webkit-box-shadow: 0px 0px 10px 1px rgba(255,255,255,1);
        -moz-box-shadow: 0px 0px 10px 1px rgba(255,255,255,1);
        box-shadow: 0px 0px 10px 1px rgba(255,255,255,1);
    }
        .box:hover .bi {
            -webkit-animation: flip 0.5s;
            animation: flip 0.5s; /* referring directly to the animation's @keyframe declaration */
        }

        .home-logo {
            width: 250px;
        }
.services .box:nth-child(5) {
    background-color: #36aab8;
}
.services .box:nth-child(4) {
    background-color: #aac030;
}
.services .box:nth-child(3) {
    background-color: #bb5c2d;
}
.services .box:nth-child(2) {
    background-color: #be8b32;
}
.services .box:nth-child(1) {
    background-color: #c6bd32;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .home-logo {
        width: 200px;
    }
    .box {
        width: 120px;
        height: 120px;
        font-size: 1.5em;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
   
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
   
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

}