.btn {
    cursor: unset !important;
    line-height: 1.5;
    color: $color-black;
    padding: 12px 36px;
    letter-spacing: 0.05rem;
    box-shadow: none !important;
    background-color: transparent !important;
    &-primary {
        border-radius: 0;
        border-color: $color-white !important;
        border: 1px solid;
        background-color: transparent;
        color: $color-white;
        letter-spacing: 4px;
        font-size: 12px;
        padding: 15px 40px;
//         &:hover {
//             background-color: transparent;
//         }
    }

    &-top{
        cursor: unset !important;
        line-height: 1.5;
        color: $color-black;
        padding: 10px 12px;
        letter-spacing: 0.05rem;
        box-shadow: none !important;
        background-color: transparent !important;
        &:hover{
            background-color: $color-white !important;
            color: $color-text;
        }
    }




    &-primary_b {
        border-radius: 0;
        border-color: $color-white !important;
        border: 1px solid;
        background-color: transparent;
        color: $color-white;
        letter-spacing: 4px;
        font-size: 12px;
        padding: 15px 40px;
      
position: relative;

        &::before{
            position: absolute;
            content: "";
            width: 0px;
            height: 0px;
            left: 0;
            bottom: 0;
            border: 3px solid transparant;
            box-sizing: border-box;
            &:hover{
                width: calc(240px / 2);
                height: 46px;
                border: 3px solid #111;
                border-right: none;
                border-bottom: none;
                transition: height 0.3s linear, 
                            width 0.3s linear 0.3s;
              }
          }
         
          &::after{
            position: absolute;
            content: "";
            width: 0px;
            height: 0px;
            top: 0;
            right: 0;
            border: 3px solid transparant;
            box-sizing: border-box;
            &:hover{
                width: calc(600px / 2);
              
                border: 3px solid #111;
                border-left: none;
                border-top: none;
                transition: height 0.3s linear, 
                            width 0.3s linear 0.3s;
              }
          }
        






    }



    &-primary_c {
        border-radius: 0;
        border-color: $color-black !important;
        border: 1px solid;
        background-color: transparent;
        color: $color-black;
        letter-spacing: 4px;
        font-size: 13px;
        font-weight: 600;
        padding: 15px 40px;
        &:hover {
            background-color: transparent;
        }
    }
//     &-pulse {
//         width: 70px;
//         height: 70px;
//         border-radius: 100px;
//         background: rgb(145, 31, 31);
//         box-shadow: 0 0 0 rgba(133, 18, 18, 0.541);
//         animation: pulse 2000ms infinite;
//         position: relative;
//         &:after{
//             content: " ";
// position: absolute;
// left: 56%;
// top: 21px;
// transform: translateX(-50%) rotate(-180deg);
// width: 0;
// height: 0;
// border-top: 15px solid transparent;
// border-right: 20px solid #252222;
// border-bottom: 15px solid transparent;
//         }
//       }
    &-recent {
        border-radius: 0;
        border-color: $color-brand2 !important;
        border: 1px solid;
        background-color: $color-brand2 !important;
        color: $color-white;
        letter-spacing: 4px;
        font-size: 12px;
        padding: 15px 40px;
        position: relative;
        .arrow {
            border: solid white;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 3px;
        }
        .right {
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            margin-left: 22px;
            position: absolute;
            top: 22px;
            left: 110px;
        }
        &::after {
            content: "";
            position: absolute;
            height: 1px;
            width: 10px;
            background-color:transparent !important;
            top: 24px;
            left: 106px;
            display: block;
        }
        &:hover {
            .right {
                transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
                margin-left: 22px;
                position: absolute;
                    position: absolute;
                    top: 22px;
                    left: 141px;
                    -webkit-transition: 0.5s;
                    transition: 0.5s;
            }
                padding-right: 65px;
            color: $color-white !important;
            &::after {
                content: "";
                position: absolute;
                height: 1px;
                width: 20px;
                background-color: $color-white !important;
                top: 25px;
                left: 146px;
                display: block;
                -webkit-transition: 0.5s;
                transition: 0.5s;
                -ms-transform: scaleX(1.5); /* IE 9 */
  transform: scaleX(1.5);
            }
        }
    }
    &-card {
        border-radius:25px !important;
        border-color: $color-white !important;
        border: 1px solid;
        background-color: transparent;
        color: $color-white;
        letter-spacing: 4px;
        font-size: 13px;
        font-weight: 600;
        padding: 15px 40px;
        &:hover {
            background-color: $color-brand !important;
            border-color:  $color-brand !important;
            color: $color-black;
        }
    }
    &-load {
        border-radius: 0;
        border-color: $color-white !important;
        border: none !important;
        background-color: transparent;
        color: $color-brand2;
        font-size: 50px;
        font-weight: 700;
      margin:auto;
        &:hover {
        color:$color-white;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        }
    }
    &-recent-blog {
        border-radius: 0;
        border-color: $color-brand2 !important;
        border: 1px solid;
        background-color: $color-brand2 !important;
        color: $color-white;
        letter-spacing: 4px;
        font-size: 12px;
        padding: 15px 40px;
        position: relative;
        .arrow {
            border: solid white;
            border-width: 0 2px 2px 0;
            display: inline-block;
            padding: 3px;
        }
        .right {
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
            margin-left: 55px;
            position: absolute;
            top: 22px;
            left: 112px;
        }
        &::after {
            content: "";
            position: absolute;
            height: 1px;
            width: 10px;
            background-color:transparent !important;
            top: 24px;
            left: 106px;
            display: block;
        }
        &:hover {
            .right {
                    transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
margin-left: 40px;
position: absolute;
position: absolute;
top: 22px;
left: 150px;
transition: 0.5s;
            }
                padding-right: 65px;
            color: $color-white !important;
            &::after {
                content: "";
                position: absolute;
                height: 1px;
                width: 20px;
                background-color: #fff !important;
                top: 25px;
                left: 172px;
                display: block;
                transition: 0.5s;
                transform: scaleX(1.5);
            }
        }
    }
}
