.learn-btn{  background: transparent;
    color: #fff;
    font-size: var(--btn-text);
    padding: 4px 30px 4px 60px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #fff;
    border-radius: 140px;margin-top:1.5rem;position:relative;
    min-height: 40px;
}

.learn-btn::before{content: "";
    background: #fff;
    position: absolute;
    width: 40px;
    height: 40px;
    display: flex;
    border-radius: 140px;
    left: 4px;
    transition: 0.3s all ease-in-out;
    top: 4px;
        background: linear-gradient(85.5deg, #243D81 -12.86%, #0C2057 22.4%, #5B75B8 56.28%, #1E2F5A 88.48%);
}


.learn-btn:hover::before{width: calc(100% - 8px);
    height: calc(100% - 8px);z-index:10;}

/*.learn-btn:hover .arrow{transform:translateX(8px);}*/

.learn-btn span{
    position: relative;
    z-index: 100;
    transition: 0.3s all ease-in-out;font-weight:600;
}

.learn-btn{ transition: 0.3s all ease-in-out;}
.learn-btn:hover span{color:#fff;}
.learn-btn:hover{padding-left:30px;padding-right:60px;}



    
    .learn-btn svg{transition:0.3s all ease-in-out;  position: relative;
    z-index: 1;    position: absolute;z-index:100;
    right: calc(100% - 44px);} 
    
    
    .learn-btn:hover .arrow{fill:#fff !important;}
    .learn-btn:hover svg circle{opacity:0;}
    
    .learn-btn:hover svg{right:4px;}
    @media screen and (max-width:781px){
    .learn-btn{
       
        display: inline-flex;
        align-items: center;
        gap: 15px;
        width: fit-content;
    }
}