:root{
    --textcolor:#088ec8!important;

}
.fontcolor{
    font-family: roboto;
    color: var(--textcolor);
}
.bg{
    background-color: var(--textcolor);
}

*{
    font-family: roboto!important;
}
beforenav{
    font-family: roboto;
    color: white!important;
    padding: 10px!important;
    display: block;
    background-color: var(--textcolor)!important;
}

beforenav a{
    font-family: roboto;
    color: white!important;
    text-decoration: none;
}

.logo{
    width: 100px!important;
}

nav a{
    font-weight: 500;
    padding:10px!important;
    color: black!important;
}

nav a:hover{

    color: var(--textcolor)!important;
   
}


.m-dark{
    height: 80vh;
    /* opacity: 0.7; */
    filter: brightness(50%);
}
.mk-blue{
    background-color: var(--textcolor);
    color:white;
    padding: 20px;

}
.gradient-border {
    border: 4px solid;
    border-image: linear-gradient(to right, rgb(255, 255, 255), rgb(165, 165, 165));
    border-image-slice: 1;
    animation: gradient-animation 1s linear infinite!important;
  }
  .bg-img{
    background-image: linear-gradient(to right, rgb(255, 255, 255), rgb(246, 253, 255));
  }
  @keyframes gradient-animation {
    from {
      border-image-position: 0% 0%;
    }
    to {
      border-image-position: 100% 100%;
    }
  }


  .vs{
    width:1200px;
    height:600px;
  }

@media (max-width: 1200.98px){
    .vs{
        width:100%;
        heigth:200px;
    }
}