:root {
    --font: calibri;
    --size-pri: 1px;
    --size-sec: 100px; 
    --main-clr: #0ebac5;
    --white: #fff;
}




.mains {
    display: grid;
    grid-template-columns: repeat(1 1fr);
    place-items: center;
   text-decoration: none;
   height: 10vh;
}

body {
    background-color:transparent ;
}

.btns {
   
    background: none;
    display: flex;
    justify-content:center;
    align-items:center;
    min-width:220.52px;
    min-height: 56px;
    font-family: calibri;
    font-size: 1.2em;
    border-radius: 20px;
    cursor: pointer;
    font-weight: 400;
    position: relative;
    border: 1px solid var(--main-clr);
    color: var(--main-clr);
    background-color : transparent;
    overflow: hidden;
   
}

i {
    font-size: 1em;
    padding: 0 10px;
    transition: all 0.5s linear;
}



     .containers {
        font-size: 5em;
        background: none;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width:220.52px;
    min-height: 56px;
    font-family: calibri;
    font-size: 1.2em;
    border-radius: 100px;
    cursor: pointer;
    font-weight: 400;
    position: relative;
    border: 2px solid var(--main-clr);
    color: var(--main-clr);
    background-color : transparent;
    overflow: hidden;
   cursor: pointer;
   position: relative;
      }

  .link {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 1;
         text-decoration: none;
      }

    .btns:hover i {
        transform: translateX(10px);
        color:#05465c;
    }

    .btns::before, .btns::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0;
    background-color: var(--main-clr);
    z-index: -1;
    transition: all 400ms ease-in;
    }

    .btns:hover {
        color: #59ad0b;
    }

    .btns::before {
        opacity: 0.3;
    }

    .btns::after {
        transition-delay: 0.3s;
    }

    .btns:hover::before, .btns:hover::after {
        top: 0;
    }