.cta-sec{
    display: flex;}


.cta-sec a,.cta-sec button{    display: flex;
    gap: 0;
    align-items: center;
    color: #fff;
    text-decoration: none;
    font-size: var(--small-title);
    gap: 12px;
    border: unset !important;
    padding: 3px 3px 3px 10px;
    border-radius: 6px;
    backdrop-filter: blur(11.399999618530273px);cursor:pointer;
    background:
        repeating-linear-gradient(to right, white 0 4px, transparent 4px 8px),
        repeating-linear-gradient(to bottom, white 0 4px, transparent 4px 8px),
        repeating-linear-gradient(to left, white 0 4px, transparent 4px 8px),
        repeating-linear-gradient(to top, white 0 4px, transparent 4px 8px);
      background-repeat: no-repeat;
      background-position: top left, top right, bottom right, bottom left;
      background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
}


.cta-sec a.black ,.cta-sec button.black{
    color:var(--grey-bg);  border: unset !important;    
    background: #fff;background: transparent;
    
    background:
        repeating-linear-gradient(to right, black 0 4px, transparent 4px 8px),
        repeating-linear-gradient(to bottom, black 0 4px, transparent 4px 8px),
        repeating-linear-gradient(to left, black 0 4px, transparent 4px 8px),
        repeating-linear-gradient(to top, black 0 4px, transparent 4px 8px);
      background-repeat: no-repeat;
      background-position: top left, top right, bottom right, bottom left;
      background-size: 100% 1px, 1px 100%, 100% 1px, 1px 100%;
    
    
    
    
}

.cta-sec.center{justify-content:center;}


.cta-sec a .span,.cta-sec button .span{position: relative;overflow:hidden;}

.cta-sec a,.cta-sec button {
    position: relative;
    display: flex;
    overflow: hidden;    outline: none;
}

.cta-sec a .first-one,.cta-sec button .first-one {
    position: absolute;
    bottom: -50px;
    transition: bottom 0.3s ease-in-out;
}

.cta-sec a .second-one,.cta-sec button .second-one{
    position: relative;
    bottom: 0;
    transition: bottom 0.3s ease-in-out;
}

.cta-sec a:hover .first-one,.cta-sec button:hover .first-one {
    bottom: 0;
}

.cta-sec a:hover .second-one,.cta-sec button:hover .second-one {
    bottom: 50px;
}
.cta-sec a svg path,.cta-sec button svg path{  
    transform-origin: center;transition: 0.3s all ease-in-out;}

.cta-sec a:hover svg path,.cta-sec button:hover svg path{    transform: rotate(45deg);}