.web-fancy{
    position: relative;
    transition: all 0.4s ease;
    padding: 10px 30px;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    border: none;
    z-index: 0;
}
.web-fancy::before{
    position: absolute;
    content: '';
    transition: all 0.4s ease;
}
.web-fancy:hover{
    /* background: #e0ddda !important; */
    color: #fff;
}


.web-btn83{background: #ffab40;}
.web-btn83:hover{background:#f7f2e3;}
.web-btn83::before{
    left: 0;
    bottom: 0;
    height: 0;
    width: 100%;
    background: #161616;
    z-index: -1;
}
.web-btn83:hover::before{
    height: 100%;
    transition: all 0.4s ease;
}

.web-btn84{background: #ffab40;}
.web-btn84:hover{background:#f7f2e3;}
.web-btn84::before{
    left: 0;
    top: 0;
    height: 0;
    width: 100%;
    background: #000000;
    z-index: -1;
}
.web-btn84:hover::before{
    height: 100%;
    transition: all 0.4s ease;
}

.web-btn85{background: #ffab40;}
.web-btn85:hover{background:#f7f2e3;}
.web-btn85::before{
    left: 0;
    bottom: 0;
    height: 100%;
    width: 0;
    background: #000000;
    z-index: -1;
}
.web-btn85:hover::before{
    width:100%;
    transition: all 0.4s ease;
}

.web-btn86{background: #ffab40;}
.web-btn86:hover{background:#f7f2e3;}
.web-btn86::before{
    right: 0;
    bottom: 0;
    height: 100%;
    width: 0;
    background: #000000;
    z-index: -1;
}
.web-btn86:hover::before{
    width:100%;
    transition: all 0.4s ease;
}


.web-btn87{background: #ffab40;}
.web-btn87:hover{background:#f7f2e3;}
.web-btn87::before{
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #000000;
    z-index: -1;
    margin: auto;
    transform: scale(0);
}
.web-btn87:hover::before{
    width:100%;
    transition: all 0.4s ease;
    transform: scale(1);
}

.web-btn88{background: #ffab40;}
.web-btn88:hover{background:#f7f2e3;}
.web-btn88::before{
    right: 0;
    bottom: 0;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #000000;
    z-index: -1;
    margin: auto;
    transform: scale(0);
    border-radius: 100px;
}
.web-btn88:hover::before{
    width:100%;
    transition: all 0.4s ease;
    transform: scale(1);
    border-radius: 0;
}

.web-btn89{background: #ffab40;}
.web-btn89:hover{
    background:#f7f2e3;
    padding: 20px 20px 0 40px;
    transition: all 0.4s ease;
}
.web-btn89::before{
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background: #ffab40;
    z-index: -1;
    margin: auto;
    /* transform: scale(0.2); */
    border-radius: 0px;
}
.web-btn89:hover::before{
    left: 10px;
    top: 10px;
    width:100%;
    height: 100%;
    transition: all 0.4s ease;
    background: #000000;
    /* transform: scale(1); */
    border-radius: 0;
}

.web-btn90{background: #ffab40;}
.web-btn90:hover{
    background:#f7f2e3;
    position: relative;
    padding: 20px 40px 0 20px;
    transition: all 0.4s ease;
 }
.web-btn90::before{
    right: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background: #ffab40;
    z-index: -1;
    margin: auto;
    /* transform: scale(0.2); */
    border-radius: 0px;
    transition: all 0.4s ease;
}
.web-btn90:hover::before{
    right: 10px;
    top: 10px;
    width:100%;
    height: 100%;
    transition: all 0.4s ease;
    background: #000000;
    /* transform: scale(1); */
    border-radius: 0;
}

.web-btn91{background: #ffab40;}
.web-btn91:hover{
    background:#f7f2e3;
    position: relative;
    padding: 0px 20px 20px 40px;
    transition: all 0.4s ease;
 }
.web-btn91::before{
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background: #ffab40;
    z-index: -1;
    margin: auto;
    /* transform: scale(0.2); */
    border-radius: 0px;
    transition: all 0.4s ease;
}
.web-btn91:hover::before{
    left: 10px;
    top: -10px;
    width:100%;
    height: 100%;
    transition: all 0.4s ease;
    background: #000000;
    /* transform: scale(1); */
    border-radius: 0;
}


.web-btn92{background: #ffab40;}
.web-btn92:hover{
    background:#f7f2e3;
    position: relative;
    padding: 0px 40px 20px 20px;
    transition: all 0.4s ease;
 }
.web-btn92::before{
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background: #ffab40;
    z-index: -1;
    margin: auto;
    /* transform: scale(0.2); */
    border-radius: 0px;
    transition: all 0.4s ease;
}
.web-btn92:hover::before{
    left: -10px;
    top: -10px;
    width:100%;
    height: 100%;
    transition: all 0.4s ease;
    background: #000000;
    /* transform: scale(1); */
    border-radius: 0;
}


.web-btn93{
    background: #ffab40;
    z-index: 0;
    color: #fff;
}
.web-btn93:hover{
    background:#f7f2e3;
    position: relative;
    padding: 10px 30px;
    transition: all 0.4s ease;
    color: #fff;
 }
.web-btn93::before{
    left: 0px;
    top: 0px;
    right: 0;
    bottom: 0;
    height: 50%;
    width: 70%;
    background: #000000;
    z-index: -1;
    margin: auto;
    border-radius: 0px;
    transition: all 0.4s ease;
}
.web-btn93:hover::before{
    width:100%;
    height: 100%;
    transition: all 0.4s ease;
    background: #000000;
    border-radius: 0;
}



.web-btn94{
    background: #ffab40;
    z-index: 0;
    color: #fff;
}
.web-btn94:hover{
    background:#f7f2e3;
    position: relative;
    padding: 10px 30px;
    transition: all 0.4s ease;
    color: #fff;
 }
.web-btn94::before{
    left: 0px;
    top: 0px;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    background: #000000;
    z-index: -1;
    margin: auto;
    border-radius: 0px;
    transition: all 0.4s ease;
}
.web-btn94:hover::before{
    width:70%;
    height: 50%;
    transition: all 0.4s ease;
    background: #000000;
    border-radius: 0;
}


.web-btn95{background: #ffab40; border: 2px solid transparent; transition: all 0.4s ease;}  
.web-btn95:hover{
    background:transparent;
    position: relative;
    transition: all 0.4s ease;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    padding: 5px 30px 13px;
 }
.web-btn95::before{
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background: #e0ddda00;
    z-index: -1;
    margin: auto;
    /* transform: scale(0.2); */
    border-radius: 0px;
    transition: all 0.4s ease;
    border:2px solid #ffab40;
}
.web-btn95:hover::before{
    left: -5px;
    top: -5px;
    width:100%;
    height: 100%;
    transition: all 0.4s ease;
    border:2px solid #000000;
    background: transparent;
    border-radius: 0;
}


.web-btn96{background: #ffab40; border: 2px solid transparent; transition: all 0.4s ease;}
.web-btn96:hover{
    background:transparent;
    position: relative;
    transition: all 0.4s ease;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
    padding: 13px 30px 5px;
 }
.web-btn96::before{
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background: #e0ddda00;
    z-index: -1;
    margin: auto;
    /* transform: scale(0.2); */
    border-radius: 0px;
    transition: all 0.4s ease;
    border:2px solid #ffab40;
}
.web-btn96:hover::before{
    left: 5px;
    top: 5px;
    width:100%;
    height: 100%;
    transition: all 0.4s ease;
    border:2px solid #000000;
    background: transparent;
    border-radius: 0;
}

.web-btn97{background: #ffab40; border: 2px solid transparent; transition: all 0.4s ease;}
.web-btn97:hover{
    background:transparent;
    position: relative;
    transition: all 0.4s ease;
    border-bottom: 2px solid #000;
    border-left: 2px solid #000;
    padding: 5px 30px 13px;
 }
.web-btn97::before{
    right: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background: #e0ddda00;
    z-index: -1;
    margin: auto;
    /* transform: scale(0.2); */
    border-radius: 0px;
    transition: all 0.4s ease;
    border:2px solid #ffab40;
}
.web-btn97:hover::before{
    right: -5px;
    top: -5px;
    width:100%;
    height: 100%;
    transition: all 0.4s ease;
    border:2px solid #000000;
    background: transparent;
    border-radius: 0;
}


.web-btn98{background: #ffab40;border: 2px solid transparent; transition: all 0.4s ease;}
.web-btn98:hover{
    background:transparent;
    position: relative;
    transition: all 0.4s ease;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
    padding: 13px 30px 5px;
 }
.web-btn98::before{
    right: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background: #e0ddda00;
    z-index: -1;
    margin: auto;
    /* transform: scale(0.2); */
    border-radius: 0px;
    transition: all 0.4s ease;
    border:2px solid #ffab40;
}
.web-btn98:hover::before{
    right: 5px;
    top: 5px;
    width:100%;
    height: 100%;
    transition: all 0.4s ease;
    border:2px solid #000000;
    background: transparent;
    border-radius: 0;
}

.web-btn99{background: #ffab40;}
.web-btn99:hover{
    background:#f7f2e3;
    position: relative;
    transition: all 0.4s ease;
    

 }
.web-btn99::before{
    right: 0px;
    top: 0px;
    left: 0;
    bottom: 0;
    height: 0;
    width: 100%;
    z-index: -1;
    margin: auto;
    background: #000000;
    transition: all 0.4s ease;
}
.web-btn99:hover::before{
    height: 100%;
    transition: all 0.4s ease;
    background: #000000;
}


.web-btn100{background: #ffab40;}
.web-btn100:hover{
    background:#f7f2e3;
    position: relative;
    transition: all 0.4s ease;

 }
.web-btn100::before{
    right: 0px;
    top: 0px;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 0;
    z-index: -1;
    margin: auto;
    background: #000000;
    transition: all 0.4s ease;
}
.web-btn100:hover::before{
    width: 100%;
    transition: all 0.4s ease;
    background: #000000;
}

.web-btn101{background: #ffab40;}
.web-btn101:hover{
    background:#f7f2e3;
    position: relative;
    transition: all 0.4s ease;

 }
 .web-btn101::first-letter{
    color: #fff;
 }
.web-btn101::before{
    top: 0px;
    left: 0;
    height: 100%;
    width: 32%;
    z-index: -1;
    margin: auto;
    background: #000000;
    transition: all 0.4s ease;
    background-blend-mode: difference;
    
}
.web-btn101:hover::before{
    width: 100%;
    transition: all 0.4s ease;
    background: #000000;
}


.web-btn102{
    background: #ffab40;
    /* border: 1px solid#000; */
}
.web-btn102:hover{
    background:#f7f2e3;
    position: relative;
    transition: all 0.4s ease;
    letter-spacing: 10px;
 }
 .web-btn102::first-letter{
    color: #fff;
 }
.web-btn102::before{
    top: 0px;
    left: 0;
    height: 100%;
    width: 32%;
    z-index: -1;
    margin: auto;
    background: #000000;
    transition: all 0.4s ease;
    background-blend-mode: difference;
}
.web-btn102:hover::before{
    width: 100%;
    transition: all 0.4s ease;
    background: #000000;
}


.web-btn103{
    background: #ffab40;
}
.web-btn103:hover{
    background:#f7f2e3;
    position: relative;
    transition: all 0.4s ease;
 }
.web-btn103::before{
    bottom: 0px;
    left: 0;
    height: 0;
    width: 100%;
    z-index: -1;
    background: #000000;
    transition: all 0.4s ease;
    clip-path: ellipse(51% 0% at 50% 100%);
}
.web-btn103:hover::before{
    height: 100%;
    transition: all 0.4s ease;
    background: #000000;
    clip-path: ellipse(100% 97% at 47% 81%);
}

.web-btn104{
    background: #ffab40;
}
.web-btn104:hover{
    background:#f7f2e3;
    position: relative;
    transition: all 0.4s ease;
 }
.web-btn104::before{
    top: 0;
    left: 0;
    height: 0;
    width: 100%;
    z-index: -1;
    background: #000000;
    transition: all 0.4s ease;
    clip-path: ellipse(100% 16% at 51% 0%);
}
.web-btn104:hover::before{
    height: 100%;
    transition: all 0.4s ease;
    background: #000000;
    clip-path: ellipse(100% 100% at 49% 22%);
}

.web-btn104{
    background: #ffab40;
}
.web-btn104:hover{
    background:#f7f2e3;
    position: relative;
    transition: all 0.4s ease;
 }
.web-btn104::before{
    top: 0;
    left: 0;
    height: 0;
    width: 100%;
    z-index: -1;
    background: #000000;
    transition: all 0.4s ease;
    clip-path: ellipse(100% 16% at 51% 0%);
}
.web-btn104:hover::before{
    height: 100%;
    transition: all 0.4s ease;
    background: #000000;
    clip-path: ellipse(100% 100% at 49% 22%);
}

.web-btn105{
    background: #ffab40;
    color: #fff;
}
.web-btn105:hover{
    background:#ffab40;
    position: relative;
    transition: all 0.4s ease;
 }
.web-btn105::before{
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    background: #000000;
    transition: all 0.4s ease;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
.web-btn105:hover::before{
    height: 100%;
    transition: all 0.4s ease;
    background: #000000;
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
}

.web-btn106{
    background: #ffab40;
    color: #fff;
}
.web-btn106:hover{
    background:#ffab40;
    position: relative;
    transition: all 0.4s ease;
 }
.web-btn106::before{
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    background: #000000;
    transition: all 0.4s ease;
    clip-path: polygon(100% 0, 100% 0%, 100% 100%, 0% 100%);
}
.web-btn106:hover::before{
    height: 100%;
    transition: all 0.4s ease;
    background: #000000;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}







.web-btn107{
    background: #ffab40;
    color: #fff;
    overflow: hidden;
}
.web-btn107:hover{
    background:#ffab40;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn107::before,
 .web-btn107::after{
    position: absolute;
    content: 'About Us';
    width: 100%;
    height: 50%;
    overflow: hidden;
    transition: all 0.4s ease; 
 }
.web-btn107::after{
    background: #ec953e;
    right:-100% ;
    bottom: 0;
    line-height: 0;
}
.web-btn107::before{
    padding-top: 10px;
    background: #18130f;
    left: -100%;
    top: 0;
}
.web-btn107:hover::before{
    left: 0;
}
.web-btn107:hover::after{
    right:0;
    transition: all 0.4s ease;
}

.web-btn108{
    background: #ffab40;
    color: #fff;
    overflow: hidden;
}
.web-btn108:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn108::before,
 .web-btn108::after{
    position: absolute;
    content: 'About Us';
    width: 100%;
    height: 50%;
    overflow: hidden;
    transition: all 0.4s ease; 
 }
.web-btn108::after{
    background: #ec953e;
    right:0 ;
    bottom: 0;
    line-height: 0;
}
.web-btn108::before{
    padding-top: 10px;
    background: #18130f;
    left: 0;
    top: 0;
}
.web-btn108:hover::before{
    left: -100%;
}
.web-btn108:hover::after{
    right:-100%;
    transition: all 0.4s ease;
}


.web-btn109{
    background: #ffab40;
    color: #fff;
    overflow: hidden;
}
.web-btn109:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn109::before,
 .web-btn109::after{
    position: absolute;
    content: 'About Us';
    width: 100%;
    height: 50%;
    overflow: hidden;
    transition: all 0.4s ease; 
 }
.web-btn109::after{
    background: #ec953e;
    right:0 ;
    bottom: -100%;
    line-height: 0;
}
.web-btn109::before{
    padding-top: 10px;
    background: #18130f;
    left: 0;
    top: -100%;
}
.web-btn109:hover::before{
    top: 0;
}
.web-btn109:hover::after{
    bottom:0;
    transition: all 0.4s ease;
}


.web-btn110{
    background: #ffab40;
    color: #fff;
    overflow: hidden;
}
.web-btn110:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn110::before,
 .web-btn110::after{
    position: absolute;
    content: 'About Us';
    width: 100%;
    height: 50%;
    overflow: hidden;
    transition: all 0.4s ease; 
 }
.web-btn110::after{
    background: #ec953e;
    right:0 ;
    bottom:0;
    line-height: 0;
}
.web-btn110::before{
    padding-top: 10px;
    background: #18130f;
    left: 0;
    top:0;
}
.web-btn110:hover::before{
    top: -100%;
}
.web-btn110:hover::after{
    bottom:-100%;
    transition: all 0.4s ease;
}

.web-btn111{
    background: #ffab40;
    color: #fff;
    overflow: hidden;
}
.web-btn111:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn111::before,
 .web-btn111::after{
    position: absolute;
    content: 'About Us';
    width: 100%;
    height: 50%;
    overflow: hidden;
    transition: all 0.4s ease; 
 }
.web-btn111::after{
    background: #ec753e;
    right:0 ;
    bottom:-100%;
    line-height: 0;
}
.web-btn111::before{
    padding-top: 10px;
    background: #18130f;
    left: 0;
    top:100%;
}
.web-btn111:hover::before{
    top: 0%;
}
.web-btn111:hover::after{
    bottom:0%;
    transition: all 0.9s ease;
}


.web-btn112{
    background: #ffab40;
    color: #fff;
    overflow: hidden;
}
.web-btn112:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn112::before,
 .web-btn112::after{
    position: absolute;
    content: 'About Us';
    width: 100%;
    height: 50%;
    overflow: hidden;
    transition: all 0.4s ease; 
 }
.web-btn112::after{
    background: #ec753e;
    right:0 ;
    bottom:100%;
    line-height: 0;
    transition: all 0.4s ease;
}
.web-btn112::before{
    padding-top: 10px;
    background: #18130f;
    left: 0;
    top:-100%;
    transition: all 0.6s ease;
}
.web-btn112:hover::before{
    top: 0%;
    transition: all 0.6s ease;
}
.web-btn112:hover::after{
    bottom:0%;
    transition: all 0.4s ease;
    
}


.web-btn113{
    background: #ffab40;
    color: #fff;
    overflow: hidden;
}
.web-btn113:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn113::before,
 .web-btn113::after{
    position: absolute;
    content: 'About Us';
    width: 100%;
    height: 50%;
    overflow: hidden;
    transition: all 0.4s ease; 
 }
.web-btn113::after{
    background: #ec753e;
    left:-100%;
    bottom:0;
    line-height: 0;
    transition: all 0.4s ease;
}
.web-btn113::before{
    padding-top: 10px;
    background: #18130f;
    left: -100%;
    top:0;
    transition: all 0.6s ease;
}
.web-btn113:hover::before{
    left: 0;
    transition: all 0.6s ease;
}
.web-btn113:hover::after{
    left:0;
    transition: all 0.4s ease;
}


.web-btn114{
    background: #ffab40;
    color: #fff;
    overflow: hidden;
}
.web-btn114:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn114::before,
 .web-btn114::after{
    position: absolute;
    content: 'About Us';
    width: 100%;
    height: 50%;
    overflow: hidden;
    transition: all 0.4s ease; 
 }
.web-btn114::after{
    background: #ec753e;
    right:-100%;
    bottom:0;
    line-height: 0;
    transition: all 0.4s ease;

}
.web-btn114::before{
    padding-top: 10px;
    background: #18130f;
    right: -100%;
    top:0;
    transition: all 0.6s ease;
}
.web-btn114:hover::before{
    right: 0;
    transition: all 0.6s ease;
}
.web-btn114:hover::after{
    right:0;
    transition: all 0.4s ease;
}


.web-btn115{
    background: #ffab40;
    color: #fff;
    overflow: hidden;
}
.web-btn115:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn115::before,
 .web-btn115::after{
    position: absolute;
    content: 't Us';
    white-space:nowrap;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all 0.4s ease; 
 }
 
.web-btn115::after{
    background: #ec753e;
    right:-100%;
    bottom:0;
    padding: 10px 40px 0 0 ;
}
.web-btn115::before{
    content: 'Abou';
    padding: 10px 0 0 22px;
    background: #18130f;
    left: -100%;
    top:0;
}
.web-btn115:hover::before{
    left: 0;
    transition: all 0.6s ease;
}
.web-btn115:hover::after{
    right:0;
    transition: all 0.6s ease;
}



.web-btn116{
    background: #ffab40;
    color: #fff;
    overflow: hidden;
}
.web-btn116:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn116::before,
 .web-btn116::after{
    position: absolute;
    content: 't Us';
    white-space:nowrap;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all 0.4s ease; 
 }

.web-btn116::after{
    background: #ec753e;
    right:0;
    bottom:0;
    padding: 10px 40px 0 0 ;
}
.web-btn116::before{
    content: 'Abou';
    padding: 10px 0 0 22px;
    background: #18130f;
    left: 0;
    top:0;
}
.web-btn116:hover::before{
    left: -100%;
    transition: all 0.6s ease;
}
.web-btn116:hover::after{
    right:-100%;
    transition: all 0.6s ease;
}



.web-btn117{
    background: #ffab40;
    color: #fff;
    overflow: hidden;
}
.web-btn117:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn117::before,
 .web-btn117::after{
    position: absolute;
    content: 't Us';
    white-space:nowrap;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all 0.4s ease; 
 }

.web-btn117::after{
    background: #ec753e;
    right:0;
    bottom:-100%;
    padding: 10px 40px 0 0 ;
}
.web-btn117::before{
    content: 'Abou';
    padding: 10px 0 0 22px;
    background: #18130f;
    left: 0;
    top:-100%;
}
.web-btn117:hover::before{
    top:0;
    transition: all 0.6s ease;
}
.web-btn117:hover::after{
    bottom:0;
    transition: all 0.6s ease;
}

.web-btn118{
    background: #ffab40;
    color: #fff;
    overflow: hidden;
}
.web-btn118:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn118::before,
 .web-btn118::after{
    position: absolute;
    content: 't Us';
    white-space:nowrap;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all 0.4s ease; 
 }

.web-btn118::after{
    background: #ec753e;
    right:0;
    bottom:0;
    padding: 10px 40px 0 0 ;
}
.web-btn118::before{
    content: 'Abou';
    padding: 10px 0 0 22px;
    background: #18130f;
    left: 0;
    top:0;
}
.web-btn118:hover::before{
    top:-100%;
    transition: all 0.6s ease;
}
.web-btn118:hover::after{
    bottom:-100%;
    transition: all 0.6s ease;
}



.web-btn119{
    background: #ffab40;
    color: #fff;
    overflow: hidden;
}
.web-btn119:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn119::before,
 .web-btn119::after{
    position: absolute;
    content: 't Us';
    white-space:nowrap;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all 0.4s ease; 
 }

.web-btn119::after{
    background: #ec753e;
    right:0;
    bottom:0;
    padding: 10px 40px 0 0 ;
    transition: all 0.6s ease;
}
.web-btn119::before{
    content: 'Abou';
    padding: 10px 0 0 22px;
    background: #18130f;
    left: 0;
    bottom:0;
    transition: all 0.4s ease;
}
.web-btn119:hover::before{
    bottom:-100%;
    transition: all 0.4s ease;
}
.web-btn119:hover::after{
    bottom:-100%;
    transition: all 0.6s ease;
}



.web-btn120{
    background: #ffab40;
    color: #fff;
    overflow: hidden;
}
.web-btn120:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn120::before,
 .web-btn120::after{
    position: absolute;
    content: 't Us';
    white-space:nowrap;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all 0.4s ease; 
 }

.web-btn120::after{
    background: #ec753e;
    right:0;
    top:0;
    padding: 10px 40px 0 0 ;
    transition: all 0.6s ease;
}
.web-btn120::before{
    content: 'Abou';
    padding: 10px 0 0 22px;
    background: #18130f;
    left: 0;
    top:0;
    transition: all 0.4s ease;
}
.web-btn120:hover::before{
    top:-100%;
    transition: all 0.4s ease;
}
.web-btn120:hover::after{
    top:-100%;
    transition: all 0.6s ease;
}




.web-btn121{
    background: #ffab40;
    color: #fff;
    overflow: hidden;
}
.web-btn121:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn121::before,
 .web-btn121::after{
    position: absolute;
    content: 't Us';
    white-space:nowrap;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all 0.4s ease; 
 }

.web-btn121::after{
    background: #ec753e;
    right:100%;
    top:0;
    padding: 10px 40px 0 0 ;
    transition: all 0.6s ease;
}
.web-btn121::before{
    content: 'Abou';
    padding: 10px 0 0 22px;
    background: #18130f;
    left: -100%;
    top:0;
    transition: all 0.4s ease;
}
.web-btn121:hover::before{
    left:0;
    transition: all 0.4s ease;
}
.web-btn121:hover::after{
    right:0;
    transition: all 0.6s ease;
}




.web-btn122{
    background: #ffab40;
    color: #fff;
    overflow: hidden;
}
.web-btn122:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn122::before,
 .web-btn122::after{
    position: absolute;
    content: 't Us';
    white-space:nowrap;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: all 0.4s ease; 
 }

.web-btn122::after{
    background: #ec753e;
    right:-100%;
    top:0;
    padding: 10px 40px 0 0 ;
    transition: all 0.4s ease;
}
.web-btn122::before{
    content: 'Abou';
    padding: 10px 0 0 22px;
    background: #18130f;
    left: 100%;
    top:0;
    transition: all 0.6s ease;
}
.web-btn122:hover::before{
    left:0;
    transition: all 0.6s ease;
}
.web-btn122:hover::after{
    right:0;
    transition: all 0.4s ease;
}







.web-btn123{
    background: #ffab40;
    color: #fff;
    border: 1px solid #fff;
}
.web-btn123:hover{
    background:#1f1e1c !important;
    position: relative;
    transition: all 0.4s ease;
    border: 1px solid #ffab40;
 }
 .web-btn123::before,
 .web-btn123::after{
    position: absolute;
    content: '';
    white-space:nowrap;
    width:15px;
    height:15px;
    overflow: hidden;
    transition: all 0.4s ease; 
 }

.web-btn123::after{
    background: #ffab40;
    border: 1px solid #fff;
    right: 20px;
    bottom:-6px;
    transition: all 0.6s ease;
}
.web-btn123::before{
    background: #ffab40;
    border: 1px solid #fff;
    left:20px;
    top:-6px;
    transition: all 0.6s ease;
}
.web-btn123:hover::before{
    left:80%;
    background: #000000;
    border: 1px solid #ffab40;
    transition: all 0.6s ease;
}
.web-btn123:hover::after{
    right:80%;
    background: #000000;
    border: 1px solid #ffab40;
    transition: all 0.6s ease;
}


.web-btn124{
    background: #ffab40;
    color: #fff;
    border: 1px solid #fff;
}
.web-btn124:hover{
    background:#1f1e1c !important;
    position: relative;
    transition: all 0.4s ease;
    border: 1px solid #ffab40;
 }
 .web-btn124::before,
 .web-btn124::after{
    position: absolute;
    content: '';
    white-space:nowrap;
    width:15px;
    height:15px;
    overflow: hidden;
    transition: all 0.4s ease; 
 }

.web-btn124::after{
    background: #ffab40;
    border: 1px solid #fff;
    right: -6px;
    bottom:6px;
    transition: all 0.6s ease;
}
.web-btn124::before{
    background: #ffab40;
    border: 1px solid #fff;
    left:-6px;
    top:6px;
    transition: all 0.6s ease;
}
.web-btn124:hover::before{
    top:60%;
    background: #000000;
    border: 1px solid #ffab40;
    transition: all 0.6s ease;
}
.web-btn124:hover::after{
    bottom:60%;
    background: #000000;
    border: 1px solid #ffab40;
    transition: all 0.6s ease;
}



.web-btn125{
    background: #ffab40;
    color: #fff;
    border: 1px solid #fff;
}
.web-btn125:hover{
    background:#1f1e1c !important;
    position: relative;
    transition: all 0.4s ease;
    border: 1px solid #ffab40;
 }
 .web-btn125::before,
 .web-btn125::after{
    position: absolute;
    content: '';
    white-space:nowrap;
    width:15px;
    height:15px;
    overflow: hidden;
    transition: all 0.4s ease; 
 }

.web-btn125::after{
    background: #ffab40;
    border: 1px solid #fff;
    right: -6px;
    bottom:6px;
    transition: all 0.6s ease;
}
.web-btn125::before{
    background: #ffab40;
    border: 1px solid #fff;
    left:-6px;
    top:6px;
    transition: all 0.6s ease;
}
.web-btn125:hover::before{
    height:80%;
    background: #000000;
    border: 1px solid #ffab40;
    transition: all 0.6s ease;
}
.web-btn125:hover::after{
    height:80%;
    background: #000000;
    border: 1px solid #ffab40;
    transition: all 0.6s ease;
}



.web-btn126{
    background: #ffab40;
    color: #fff;
    border: 1px solid #fff;
}
.web-btn126:hover{
    background:#1f1e1c !important;
    position: relative;
    transition: all 0.4s ease;
    border: 1px solid #ffab40;
 }
 .web-btn126::before,
 .web-btn126::after{
    position: absolute;
    content: '';
    white-space:nowrap;
    width:15px;
    height:15px;
    overflow: hidden;
    transition: all 0.4s ease; 
 }

.web-btn126::after{
    background: #ffab40;
    border: 1px solid #fff;
    right: 20px;
    bottom:-6px;
    transition: all 0.6s ease;
}
.web-btn126::before{
    background: #ffab40;
    border: 1px solid #fff;
    left:20px;
    top:-6px;
    transition: all 0.6s ease;
}
.web-btn126:hover::before{
    width:70%;
    background: #000000;
    border: 1px solid #ffab40;
    transition: all 0.6s ease;
}
.web-btn126:hover::after{
    width:70%;
    background: #000000;
    border: 1px solid #ffab40;
    transition: all 0.6s ease;
}



.web-btn127{
    background: #ffab40;
    color: #fff;
}
.web-btn127:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn127::before{
    position: absolute;
    content: 'Read More...';
    white-space:nowrap;
    text-wrap: nowrap;
    width:10%;
    height:100%;
    left: 0;
    top: 0;
    overflow: hidden;
    transition: all 0.6s ease; 
    text-align: center;
    padding: 10px;
    box-shadow: 2px 0 0 0 #ffffff ;
 }
.web-btn127:hover::before{
    width:100%;
    background: #ffab40;
    transition: all 0.6s ease;
    box-shadow: 2px 0 0 0 #ffffff ;

}




.web-btn128{
    background: #ffab40;
    color: #fff;
}
.web-btn128:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn128::before{
    position: absolute;
    content: 'Read More...';
    white-space:nowrap;
    text-wrap: nowrap;
    width:100%;
    height:10%;
    left: 0;
    top: 0;
    overflow: hidden;
    transition: all 0.4s ease; 
    text-align: center;
    box-shadow: 0px 2px 0 0 #ffffff ;
    padding-top: 10px;
 }
.web-btn128:hover::before{
    height:100%;
    background: #ffab40;
    transition: all 0.4s ease;
    box-shadow: 0px 2px 0 0 #ffffff ;
   


}



.web-btn129{
    background: #ffab40;
    color: #fff;
    z-index: 0;
}
.web-btn129:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn129::before{
    position: absolute;
    content: 'Read More...';
    white-space:nowrap;
    text-wrap: nowrap;
    width:100%;
    height:10%;
    right: 0;
    bottom: 0%;
    overflow: hidden;
    transition: all 0.4s ease; 
    text-align: center;
    box-shadow: 0px -2px 0 0 #ffffff ;
    padding-top: 10px;
    background: #ffab40 !important ;
 }

.web-btn129:hover::before{
    height:100%;
    background: #ffab40 ;
    transition: all 0.4s ease;
    box-shadow: 0px -2px 0 0 #ffffff ;
}



.web-btn130{
    background: #ffab40;
    color: #fff;
    z-index: 0;
}
.web-btn130:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn130::before{
    position: absolute;
    content: 'Read More...';
    white-space:nowrap;
    text-wrap: nowrap;
    width:10%;
    height:100%;
    right: 0;
    top: 0;
    overflow: hidden;
    transition: all 0.4s ease; 
    text-align: center;
    box-shadow: -2px 0px 0 0 #ffffff ;
    padding: 10px;
    background: #ffab40 !important ;
 }

.web-btn130:hover::before{
    width:100%;
    background: #ffab40 ;
    transition: all 0.4s ease;
}




.web-btn131{
    background: #ffab40;
    color: #fff;
    z-index: 0;
}
.web-btn131:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn131::before{
    position: absolute;
    content: 'Read More...';
    white-space:nowrap;
    text-wrap: nowrap;
    width:0%;
    height:5%;
    right: 0;
    top: 0;
    overflow: hidden;
    transition: all 0.4s ease; 
    text-align: center;
    padding: 10px;
    background: #ffab40 !important ;
    transform: rotate(50deg);
    opacity: 0;
 }

.web-btn131:hover::before{
    width:100%;
    height: 100%;
    background: #ffab40 ;
    transition: all 0.4s ease;
    transform: rotate(0deg);
    opacity: 1;
}


.web-btn132{
    background: #ffab40;
    color: #fff;
    z-index: 0;
}
.web-btn132:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn132::before{
    position: absolute;
    content: 'Read More...';
    white-space:nowrap;
    text-wrap: nowrap;
    width:0%;
    height:5%;
    left: 0;
    top: 0;
    overflow: hidden;
    transition: all 0.4s ease; 
    text-align: center;
    padding: 10px;
    background: #ffab40 !important ;
    transform: rotate(50deg);
    opacity: 0;
 }

.web-btn132:hover::before{
    width:100%;
    height: 100%;
    background: #ffab40 ;
    transition: all 0.4s ease;
    transform: rotate(0deg);
    opacity: 1;
}



.web-btn133{
    background: #ffab40;
    color: #fff;
    z-index: 0;
}
.web-btn133:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn133::before{
    position: absolute;
    content: 'Read More...';
    white-space:nowrap;
    text-wrap: nowrap;
    width:0%;
    height:5%;
    left: 0;
    bottom: 0;
    overflow: hidden;
    transition: all 0.4s ease; 
    text-align: center;
    padding: 10px;
    background: #ffab40 !important ;
    transform: rotate(50deg);
    opacity: 0;
 }

.web-btn133:hover::before{
    width:100%;
    height: 100%;
    background: #ffab40 ;
    transition: all 0.4s ease;
    transform: rotate(0deg);
    opacity: 1;
}



.web-btn134{
    background: #ffab40;
    color: #fff;
    z-index: 0;
}
.web-btn134:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn134::before{
    position: absolute;
    content: 'Read More...';
    white-space:nowrap;
    text-wrap: nowrap;
    width:0%;
    height:5%;
    left: 0;
    top: 0;
    overflow: hidden;
    transition: all 0.4s ease; 
    text-align: center;
    padding: 10px;
    background: #ffab40 !important ;
    transform: rotate(-50deg);
    opacity: 0;
 }

.web-btn134:hover::before{
    width:100%;
    height: 100%;
    background: #ffab40 ;
    transition: all 0.4s ease;
    transform: rotate(0deg);
    opacity: 1;
}


.web-btn135{
    background: #ffab40;
    color: #fff;
    z-index: 0;
    overflow: hidden;
}
.web-btn135:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn135::before{
    position: absolute;
    content: 'Read More...';
    white-space:nowrap;
    text-wrap: nowrap;
    width:100%;
    height:100%;
    left: 0;
    top: 0;
    overflow: hidden;
    transition: all 0.4s ease; 
    text-align: center;
    padding: 10px;
    background: #ffab40 !important ;
    opacity: 0;
    letter-spacing: 10px;
  }

.web-btn135:hover::before{
    width:100%;
    height: 100%;
    /* top: -10px; */
    background: #ffab40 ;
    transition: all 0.4s ease;
    opacity: 1;
    letter-spacing: normal;
  }


.web-btn136{
    background: #ffab40;
    color: #fff;
    z-index: 0;
    overflow: hidden;
}
.web-btn136:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn136 span {
    position: relative;
    height: 100%;
    position: relative;
    display: contents;
}
.web-btn136 span:nth-child(1)::before,
.web-btn136 span:nth-child(2)::before,
.web-btn136 span:nth-child(3)::before,
.web-btn136 span:nth-child(4)::before,
.web-btn136 span:nth-child(5)::before,
.web-btn136 span:nth-child(6)::before,
.web-btn136 span:nth-child(7)::before,
.web-btn136 span:nth-child(8)::before,
.web-btn136 span:nth-child(9)::before,
.web-btn136 span:nth-child(10)::before,
.web-btn136 span:nth-child(11)::before{
    position: absolute;
    content: '';
    width: 0 !important;
    height: 100%;
    background: #000000;
    top: 0;
    overflow: hidden;
    /* border-right:1px solid #fff; */
    transition: all 0.4s ease;
    box-shadow: 1px 0 5px 1px;
    padding-top: 10px;
    opacity: 0;
}
.web-btn136 span:nth-child(1)::before{
    content: '';
    left: 0px;
}
.web-btn136 span:nth-child(2)::before{
    content: 'A';
    left: 8px;
}
.web-btn136 span:nth-child(3)::before{
    content: 'b';
    left: 25px;
}
.web-btn136 span:nth-child(4)::before{
    content: 'o';
    left: 42px;
}
.web-btn136 span:nth-child(6)::before{
    content: 'u';
    left: 59px;
}
.web-btn136 span:nth-child(7)::before{
    content: 't ';
    left: 76px;
}
.web-btn136 span:nth-child(8)::before{
    content: ' ';
    left: 93px;
    width: 4%;
}
.web-btn136 span:nth-child(9)::before{
    content: 'U';
    left: 93px;
}
.web-btn136 span:nth-child(10)::before{
    content: 's';
    left: 110px;
    width: 11%;

}
.web-btn136 span:nth-child(11)::before{
    content: '';
    left: 126px;
}
.web-btn136:hover span:nth-child(1)::before,
.web-btn136:hover span:nth-child(2)::before,
.web-btn136:hover span:nth-child(3)::before,
.web-btn136:hover span:nth-child(4)::before,
.web-btn136:hover span:nth-child(5)::before,
.web-btn136:hover span:nth-child(6)::before,
.web-btn136:hover span:nth-child(7)::before,
.web-btn136:hover span:nth-child(8)::before,
.web-btn136:hover span:nth-child(9)::before,
.web-btn136:hover span:nth-child(10)::before,
.web-btn136:hover span:nth-child(11)::before{
    width: 12.8% !important;
    transition: 0.4s ease;
    box-shadow: 0px 0 0px 0px;
    opacity: 1;
}





.web-btn137{
    background: #ffab40;
    color: #fff;
    z-index: 0;
    overflow: hidden;
}
.web-btn137:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn137 span {
    position: relative;
    height: 100%;
    position: relative;
    display: contents;
}
.web-btn137 span:nth-child(1)::before,
.web-btn137 span:nth-child(2)::before,
.web-btn137 span:nth-child(3)::before,
.web-btn137 span:nth-child(4)::before,
.web-btn137 span:nth-child(5)::before,
.web-btn137 span:nth-child(6)::before,
.web-btn137 span:nth-child(7)::before{
    position: absolute;
    content: '';
    width: 12.9% !important;
    height: 100%;
    background: #000000;
    top:100%;
    overflow: hidden;
    padding-top: 10px;
    opacity: 0;
}
.web-btn137 span:nth-child(1)::before{
    content: 'A';
    left: 8px;
    transition: 0.3s ease;
    box-shadow: -20px 0 0 0 #000;

}
.web-btn137 span:nth-child(2)::before{
    content: 'b';
    left: 25px;
    transition: 0.4s ease;
}
.web-btn137 span:nth-child(3)::before{
    content: 'o';
    left: 42px;
    transition: 0.5s ease;
}
.web-btn137 span:nth-child(4)::before{
    content: 'u';
    left: 59px;
    transition: 0.6s ease;
}
.web-btn137 span:nth-child(5)::before{
    content: 't ';
    left: 76px;
    transition: 0.7s ease;
}
.web-btn137 span:nth-child(6)::before{
    content: 'U';
    left: 93px;
    transition: 0.8s ease;
}
.web-btn137 span:nth-child(7)::before{
    content: 's';
    left: 110px;
    width: 11%;
    transition: 0.9s ease;
    box-shadow: 10px 0 0 #000;
}
.web-btn137:hover span:nth-child(1)::before{transition: all 0.2s ease; width:12.8%; opacity:1; top: 0; box-shadow: -10px 0 0 #000;}
.web-btn137:hover span:nth-child(2)::before{transition: all 0.3s ease; width:12.8%; opacity:1; top: 0; box-shadow: 0 0 0 0;}
.web-btn137:hover span:nth-child(3)::before{transition: all 0.4s ease; width:12.8%; opacity:1; top: 0; box-shadow: 0 0 0 0;}
.web-btn137:hover span:nth-child(4)::before{transition: all 0.6s ease; width:12.8%; opacity:1; top: 0; box-shadow: 0 0 0 0;}
.web-btn137:hover span:nth-child(5)::before{transition: all 0.7s ease; width:12.8%; opacity:1; top: 0; box-shadow: 0 0 0 0;}
.web-btn137:hover span:nth-child(6)::before{transition: all 0.8s ease; width:12.8%; opacity:1; top: 0; box-shadow: 0 0 0 0;}
.web-btn137:hover span:nth-child(7)::before{transition: all 0.9s ease; width:12.8%; opacity:1; top: 0; box-shadow: 10px 0 0 #000;}


.web-btn140{
    background: #ffab40;
    color: #fff;
    z-index: 0;
    overflow: hidden;
}
.web-btn140:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn140 span {
    position: relative;
    height: 100%;
    position: relative;
    display: contents;
}
.web-btn140 span:nth-child(1)::before,
.web-btn140 span:nth-child(2)::before,
.web-btn140 span:nth-child(3)::before,
.web-btn140 span:nth-child(4)::before,
.web-btn140 span:nth-child(5)::before,
.web-btn140 span:nth-child(6)::before,
.web-btn140 span:nth-child(7)::before{
    position: absolute;
    content: '';
    width: 12.9% !important;
    height: 100%;
    background: #000000;
    bottom:100%;
    overflow: hidden;
    padding-top: 10px;
    opacity: 0;
}
.web-btn140 span:nth-child(1)::before{
    content: 'A';
    left: 8px;
    transition: 0.3s ease;
    box-shadow: -20px 0 0 0 #000;

}
.web-btn140 span:nth-child(2)::before{
    content: 'b';
    left: 25px;
    transition: 0.4s ease;
}
.web-btn140 span:nth-child(3)::before{
    content: 'o';
    left: 42px;
    transition: 0.5s ease;
}
.web-btn140 span:nth-child(4)::before{
    content: 'u';
    left: 59px;
    transition: 0.6s ease;
}
.web-btn140 span:nth-child(5)::before{
    content: 't ';
    left: 76px;
    transition: 0.7s ease;
}
.web-btn140 span:nth-child(6)::before{
    content: 'U';
    left: 93px;
    transition: 0.8s ease;
}
.web-btn140 span:nth-child(7)::before{
    content: 's';
    left: 110px;
    width: 11%;
    transition: 0.9s ease;
    box-shadow: 10px 0 0 #000;
}
.web-btn140:hover span:nth-child(1)::before{transition: all 0.2s ease; width:12.8%; opacity:1; bottom: 0; box-shadow: -10px 0 0 #000;}
.web-btn140:hover span:nth-child(2)::before{transition: all 0.3s ease; width:12.8%; opacity:1; bottom: 0; box-shadow: 0 0 0 0;}
.web-btn140:hover span:nth-child(3)::before{transition: all 0.4s ease; width:12.8%; opacity:1; bottom: 0; box-shadow: 0 0 0 0;}
.web-btn140:hover span:nth-child(4)::before{transition: all 0.6s ease; width:12.8%; opacity:1; bottom: 0; box-shadow: 0 0 0 0;}
.web-btn140:hover span:nth-child(5)::before{transition: all 0.7s ease; width:12.8%; opacity:1; bottom: 0; box-shadow: 0 0 0 0;}
.web-btn140:hover span:nth-child(6)::before{transition: all 0.8s ease; width:12.8%; opacity:1; bottom: 0; box-shadow: 0 0 0 0;}
.web-btn140:hover span:nth-child(7)::before{transition: all 0.9s ease; width:12.8%; opacity:1; bottom: 0; box-shadow: 10px 0 0 #000;}


.web-btn138{
    background: #ffab40;
    color: #fff;
    z-index: 0;
    overflow: hidden;
}
.web-btn138:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn138 span {
    position: relative;
    height: 100%;
    position: relative;
    display: contents;
}
.web-btn138 span:nth-child(1)::before,
.web-btn138 span:nth-child(2)::before,
.web-btn138 span:nth-child(3)::before,
.web-btn138 span:nth-child(4)::before,
.web-btn138 span:nth-child(5)::before,
.web-btn138 span:nth-child(6)::before,
.web-btn138 span:nth-child(7)::before{
    position: absolute;
    content: '';
    width: 12.9% !important;
    height: 100%;
    background: #000000;
    top:0;
    overflow: hidden;
    padding-top: 10px;
    opacity: 0;
}
.web-btn138 span:nth-child(1)::before{
    content: 'A';
    left: 8px;
    transition: 0.3s ease;
    box-shadow: -20px 0 0 0 #000;

}
.web-btn138 span:nth-child(2)::before{
    content: 'b';
    left: 25px;
    transition: 0.4s ease;
}
.web-btn138 span:nth-child(3)::before{
    content: 'o';
    left: 42px;
    transition: 0.5s ease;
}
.web-btn138 span:nth-child(4)::before{
    content: 'u';
    left: 59px;
    transition: 0.6s ease;
}
.web-btn138 span:nth-child(5)::before{
    content: 't ';
    left: 76px;
    transition: 0.7s ease;
}
.web-btn138 span:nth-child(6)::before{
    content: 'U';
    left: 93px;
    transition: 0.8s ease;
}
.web-btn138 span:nth-child(7)::before{
    content: 's';
    left: 110px;
    width: 11%;
    transition: 0.9s ease;
    box-shadow: 10px 0 0 #000;
}
.web-btn138:hover span:nth-child(1)::before{transition: all 0.2s ease; width:12.8%; opacity:1; top: 0; box-shadow: -10px 0 0 #000;}
.web-btn138:hover span:nth-child(2)::before{transition: all 0.3s ease; width:12.8%; opacity:1; top: 0; box-shadow: 0 0 0 0;}
.web-btn138:hover span:nth-child(3)::before{transition: all 0.4s ease; width:12.8%; opacity:1; top: 0; box-shadow: 0 0 0 0;}
.web-btn138:hover span:nth-child(4)::before{transition: all 0.6s ease; width:12.8%; opacity:1; top: 0; box-shadow: 0 0 0 0;}
.web-btn138:hover span:nth-child(5)::before{transition: all 0.7s ease; width:12.8%; opacity:1; top: 0; box-shadow: 0 0 0 0;}
.web-btn138:hover span:nth-child(6)::before{transition: all 0.8s ease; width:12.8%; opacity:1; top: 0; box-shadow: 0 0 0 0;}
.web-btn138:hover span:nth-child(7)::before{transition: all 0.9s ease; width:12.8%; opacity:1; top: 0; box-shadow: 10px 0 0 #000;}




.web-btn139{
    background: #ffab40;
    color: #fff;
    z-index: 0;
    overflow: hidden;
}
.web-btn139:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn139 span {
    position: relative;
    height: 100%;
    position: relative;
    display: contents;
}
.web-btn139 span:nth-child(1)::before,
.web-btn139 span:nth-child(2)::before,
.web-btn139 span:nth-child(3)::before,
.web-btn139 span:nth-child(4)::before,
.web-btn139 span:nth-child(5)::before,
.web-btn139 span:nth-child(6)::before,
.web-btn139 span:nth-child(7)::before{
    position: absolute;
    content: '';
    width: 12.9% !important;
    height: 100%;
    background: #000000;
    top:0;
    left: 100%;
    overflow: hidden;
    padding-top: 10px;
    opacity: 0;
}
.web-btn139 span:nth-child(1)::before{
    content: 'A';
    /* left: 8px; */
    transition: 0.3s ease;
    box-shadow: -20px 0 0 0 #000;

}
.web-btn139 span:nth-child(2)::before{
    content: 'b';
    /* left: 25px; */
    transition: 0.4s ease;
}
.web-btn139 span:nth-child(3)::before{
    content: 'o';
    /* left: 42px; */
    transition: 0.5s ease;
}
.web-btn139 span:nth-child(4)::before{
    content: 'u';
    /* left: 59px; */
    transition: 0.6s ease;
}
.web-btn139 span:nth-child(5)::before{
    content: 't ';
    /* left: 76px; */
    transition: 0.7s ease;
}
.web-btn139 span:nth-child(6)::before{
    content: 'U';
    /* left: 93px; */
    transition: 0.8s ease;
}
.web-btn139 span:nth-child(7)::before{
    content: 's';
    /* left: 110px; */
    width: 11%;
    transition: 0.9s ease;
    box-shadow: 10px 0 0 #000;
}
.web-btn139:hover span:nth-child(1)::before{transition: all 0.3s ease; width:12.8%; opacity:1; left: 8px; box-shadow: -10px 0 0 #000;}
.web-btn139:hover span:nth-child(2)::before{transition: all 0.4s ease; width:12.8%; opacity:1; left: 25px; box-shadow: 0 0 0 0;}
.web-btn139:hover span:nth-child(3)::before{transition: all 0.5s ease; width:12.8%; opacity:1; left: 42px; box-shadow: 0 0 0 0;}
.web-btn139:hover span:nth-child(4)::before{transition: all 0.6s ease; width:12.8%; opacity:1; left: 59px; box-shadow: 0 0 0 0;}
.web-btn139:hover span:nth-child(5)::before{transition: all 0.7s ease; width:12.8%; opacity:1; left: 76px; box-shadow: 0 0 0 0;}
.web-btn139:hover span:nth-child(6)::before{transition: all 0.8s ease; width:12.8%; opacity:1; left: 93px; box-shadow: 0 0 0 0;}
.web-btn139:hover span:nth-child(7)::before{transition: all 0.9s ease; width:12.8%; opacity:1; left: 110px; box-shadow: 10px 0 0 #000;}



.web-btn141{
    background: #ffab40;
    color: #fff;
    z-index: 0;
    overflow: hidden;
}
.web-btn141:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn141 span {
    position: relative;
    height: 100%;
    position: relative;
    display: contents;
}
.web-btn141 span:nth-child(1)::before,
.web-btn141 span:nth-child(2)::before,
.web-btn141 span:nth-child(3)::before,
.web-btn141 span:nth-child(4)::before,
.web-btn141 span:nth-child(5)::before,
.web-btn141 span:nth-child(6)::before,
.web-btn141 span:nth-child(7)::before{
    position: absolute;
    content: '';
    width: 12.9% !important;
    height: 100%;
    background: #000000;
    top:0;
    right: 100%;
    overflow: hidden;
    padding-top: 10px;
    opacity: 0;
}
.web-btn141 span:nth-child(1)::before{
    content: 'A';
    /* left: 8px; */
    transition: 0.3s ease;
    box-shadow: -20px 0 0 0 #000;

}
.web-btn141 span:nth-child(2)::before{
    content: 'b';
    /* left: 25px; */
    transition: 0.4s ease;
}
.web-btn141 span:nth-child(3)::before{
    content: 'o';
    /* left: 42px; */
    transition: 0.5s ease;
}
.web-btn141 span:nth-child(4)::before{
    content: 'u';
    /* left: 59px; */
    transition: 0.6s ease;
}
.web-btn141 span:nth-child(5)::before{
    content: 't ';
    /* left: 76px; */
    transition: 0.7s ease;
}
.web-btn141 span:nth-child(6)::before{
    content: 'U';
    /* left: 93px; */
    transition: 0.8s ease;
}
.web-btn141 span:nth-child(7)::before{
    content: 's';
    /* left: 110px; */
    width: 11%;
    transition: 0.9s ease;
    box-shadow: 10px 0 0 #000;
}
.web-btn141:hover span:nth-child(1)::before{transition: all 0.3s ease; width:12.8%; opacity:1; right: 110px; box-shadow: -10px 0 0 #000;}
.web-btn141:hover span:nth-child(2)::before{transition: all 0.4s ease; width:12.8%; opacity:1; right: 93px; box-shadow: 0 0 0 0;}
.web-btn141:hover span:nth-child(3)::before{transition: all 0.5s ease; width:12.8%; opacity:1; right: 76px; box-shadow: 0 0 0 0;}
.web-btn141:hover span:nth-child(4)::before{transition: all 0.6s ease; width:12.8%; opacity:1; right: 59px; box-shadow: 0 0 0 0;}
.web-btn141:hover span:nth-child(5)::before{transition: all 0.7s ease; width:12.8%; opacity:1; right: 42px; box-shadow: 0 0 0 0;}
.web-btn141:hover span:nth-child(6)::before{transition: all 0.8s ease; width:12.8%; opacity:1; right: 25px; box-shadow: 0 0 0 0;}
.web-btn141:hover span:nth-child(7)::before{transition: all 0.9s ease; width:12.8%; opacity:1; right: 8px; box-shadow: 10px 0 0 #000;}




.web-btn142{
    background: #ffab40;
    color: #fff;
    z-index: 0;
    overflow: hidden;
}
.web-btn142:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn142 span {
    position: relative;
    height: 100%;
    position: relative;
    display: contents;
}
.web-btn142 span:nth-child(1)::before,
.web-btn142 span:nth-child(2)::before,
.web-btn142 span:nth-child(3)::before,
.web-btn142 span:nth-child(4)::before,
.web-btn142 span:nth-child(5)::before,
.web-btn142 span:nth-child(6)::before,
.web-btn142 span:nth-child(7)::before{
    position: absolute;
    content: '';
    width: 12.9% !important;
    height: 100%;
    background: #000000;
    top:0;
    left: 0;
    overflow: hidden;
    padding-top: 10px;
    transform: scale(0) ;
}
.web-btn142 span:nth-child(1)::before{
    content: 'A';
    left: 8px;
    transition: 0.3s ease;
    box-shadow: -10px 0 0 #000;

}
.web-btn142 span:nth-child(2)::before{
    content: 'b';
    left: 25px;
    transition: 0.4s ease;
}
.web-btn142 span:nth-child(3)::before{
    content: 'o';
    left: 42px;
    transition: 0.5s ease;
}
.web-btn142 span:nth-child(4)::before{
    content: 'u';
    left: 59px;
    transition: 0.6s ease;
}
.web-btn142 span:nth-child(5)::before{
    content: 't ';
    left: 76px;
    transition: 0.7s ease;
}
.web-btn142 span:nth-child(6)::before{
    content: 'U';
    left: 93px;
    transition: 0.8s ease;
}
.web-btn142 span:nth-child(7)::before{
    content: 's';
    left: 110px;
    width: 11%;
    transition: 0.9s ease;
    box-shadow: 10px 0 0 #000;
}
.web-btn142:hover span:nth-child(1)::before{transition: all 0.3s ease; width:12.8%; transform: scale(1);  box-shadow: -10px 0 0 #000;}
.web-btn142:hover span:nth-child(2)::before{transition: all 0.4s ease; width:12.8%; transform: scale(1);  box-shadow: 0 0 0 0;}
.web-btn142:hover span:nth-child(3)::before{transition: all 0.5s ease; width:12.8%; transform: scale(1);  box-shadow: 0 0 0 0;}
.web-btn142:hover span:nth-child(4)::before{transition: all 0.6s ease; width:12.8%; transform: scale(1);  box-shadow: 0 0 0 0;}
.web-btn142:hover span:nth-child(5)::before{transition: all 0.7s ease; width:12.8%; transform: scale(1);  box-shadow: 0 0 0 0;}
.web-btn142:hover span:nth-child(6)::before{transition: all 0.8s ease; width:12.8%; transform: scale(1);  box-shadow: 0 0 0 0;}
.web-btn142:hover span:nth-child(7)::before{transition: all 0.9s ease; width:12.8%; transform: scale(1);  box-shadow: 10px 0 0 #000;}




.web-btn143{
    background: #ffab40;
    color: #fff;
    z-index: 0;
    overflow: hidden;
}
.web-btn143:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn143 span {
    position: relative;
    height: 100%;
    position: relative;
    display: contents;
}
.web-btn143 span:nth-child(1)::before,
.web-btn143 span:nth-child(2)::before,
.web-btn143 span:nth-child(3)::before,
.web-btn143 span:nth-child(4)::before,
.web-btn143 span:nth-child(5)::before,
.web-btn143 span:nth-child(6)::before,
.web-btn143 span:nth-child(7)::before{
    position: absolute;
    content: '';
    width: 12.9% !important;
    height: 100%;
    background: #000000;
    top:0;
    left: 0;
    overflow: hidden;
    padding-top: 10px;
    transform: scale(0) rotateZ(360deg);
    opacity: 0;
}
.web-btn143 span:nth-child(1)::before{
    content: 'A';
    left: 8px;
    transition: 0.3s ease;
    /* box-shadow: -20px 0 0 0 #000; */
    box-shadow: -10px 0 0 #000;

}
.web-btn143 span:nth-child(2)::before{
    content: 'b';
    left: 25px;
    transition: 0.4s ease;
}
.web-btn143 span:nth-child(3)::before{
    content: 'o';
    left: 42px;
    transition: 0.5s ease;
}
.web-btn143 span:nth-child(4)::before{
    content: 'u';
    left: 59px;
    transition: 0.6s ease;
}
.web-btn143 span:nth-child(5)::before{
    content: 't ';
    left: 76px;
    transition: 0.7s ease;
}
.web-btn143 span:nth-child(6)::before{
    content: 'U';
    left: 93px;
    transition: 0.8s ease;
}
.web-btn143 span:nth-child(7)::before{
    content: 's';
    left: 110px;
    width: 11%;
    transition: 0.9s ease;
    box-shadow: 10px 0 0 #000;
}
.web-btn143:hover span:nth-child(1)::before{transition: all 0.3s ease; width:12.8%; opacity: 1; transform: scale(1);  box-shadow: -10px 0 0 #000;}
.web-btn143:hover span:nth-child(2)::before{transition: all 0.4s ease; width:12.8%; opacity: 1; transform: scale(1);  box-shadow: 0 0 0 0;}
.web-btn143:hover span:nth-child(3)::before{transition: all 0.5s ease; width:12.8%; opacity: 1; transform: scale(1);  box-shadow: 0 0 0 0;}
.web-btn143:hover span:nth-child(4)::before{transition: all 0.6s ease; width:12.8%; opacity: 1; transform: scale(1);  box-shadow: 0 0 0 0;}
.web-btn143:hover span:nth-child(5)::before{transition: all 0.7s ease; width:12.8%; opacity: 1; transform: scale(1);  box-shadow: 0 0 0 0;}
.web-btn143:hover span:nth-child(6)::before{transition: all 0.8s ease; width:12.8%; opacity: 1; transform: scale(1);  box-shadow: 0 0 0 0;}
.web-btn143:hover span:nth-child(7)::before{transition: all 0.9s ease; width:12.8%; opacity: 1; transform: scale(1);  box-shadow: 10px 0 0 #000;}


.web-btn144{
    background: #ffab40;
    color: #fff;
    z-index: 0;
    overflow: hidden;
}
.web-btn144:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn144 span {
    position: relative;
    height: 100%;
    position: relative;
    display: contents;
}
.web-btn144 span:nth-child(1)::before,
.web-btn144 span:nth-child(2)::before,
.web-btn144 span:nth-child(3)::before,
.web-btn144 span:nth-child(4)::before,
.web-btn144 span:nth-child(5)::before,
.web-btn144 span:nth-child(6)::before,
.web-btn144 span:nth-child(7)::before{
    position: absolute;
    content: '';
    width: 12.9% !important;
    height: 100%;
    background: #000000;
    top:0;
    left: 0;
    overflow: hidden;
    padding-top: 10px;
    transform: scale(5) ;
    opacity: 0;
}
.web-btn144 span:nth-child(1)::before{
    content: 'A';
    left: 8px;
    transition: 0.3s ease;
    box-shadow: -10px 0 0 #000;

}
.web-btn144 span:nth-child(2)::before{
    content: 'b';
    left: 25px;
    transition: 0.4s ease;
}
.web-btn144 span:nth-child(3)::before{
    content: 'o';
    left: 42px;
    transition: 0.5s ease;
}
.web-btn144 span:nth-child(4)::before{
    content: 'u';
    left: 59px;
    transition: 0.6s ease;
}
.web-btn144 span:nth-child(5)::before{
    content: 't ';
    left: 76px;
    transition: 0.7s ease;
}
.web-btn144 span:nth-child(6)::before{
    content: 'U';
    left: 93px;
    transition: 0.8s ease;
}
.web-btn144 span:nth-child(7)::before{
    content: 's';
    left: 110px;
    width: 11%;
    transition: 0.9s ease;
    box-shadow: 10px 0 0 #000;
}
.web-btn144:hover span:nth-child(1)::before{transition: all 0.3s ease; width:12.8%; opacity: 1; transform: scale(1);  box-shadow: -10px 0 0 #000;}
.web-btn144:hover span:nth-child(2)::before{transition: all 0.4s ease; width:12.8%; opacity: 1; transform: scale(1);  box-shadow: 0 0 0 0;}
.web-btn144:hover span:nth-child(3)::before{transition: all 0.5s ease; width:12.8%; opacity: 1; transform: scale(1);  box-shadow: 0 0 0 0;}
.web-btn144:hover span:nth-child(4)::before{transition: all 0.6s ease; width:12.8%; opacity: 1; transform: scale(1);  box-shadow: 0 0 0 0;}
.web-btn144:hover span:nth-child(5)::before{transition: all 0.7s ease; width:12.8%; opacity: 1; transform: scale(1);  box-shadow: 0 0 0 0;}
.web-btn144:hover span:nth-child(6)::before{transition: all 0.8s ease; width:12.8%; opacity: 1; transform: scale(1);  box-shadow: 0 0 0 0;}
.web-btn144:hover span:nth-child(7)::before{transition: all 0.9s ease; width:12.8%; opacity: 1; transform: scale(1);  box-shadow: 10px 0 0 #000;}



.web-btn145{
    background: #ffab40;
    color: #fff;
    z-index: 0;
    overflow: hidden;
}
.web-btn145:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn145 span {
    position: relative;
    height: 100%;
    position: relative;
    display: contents;
}
.web-btn145 span:nth-child(1)::before,
.web-btn145 span:nth-child(2)::before,
.web-btn145 span:nth-child(3)::before,
.web-btn145 span:nth-child(4)::before,
.web-btn145 span:nth-child(5)::before,
.web-btn145 span:nth-child(6)::before,
.web-btn145 span:nth-child(7)::before{
    position: absolute;
    content: '';
    width: 12.9% !important;
    height: 100%;
    background: #00000000;
    top:0;
    left: 0;
    overflow: hidden;
    /* padding-top: 10px; */
    transform: scale(1) ;
    opacity: 0.5;
}
.web-btn145 span:nth-child(1)::before{
    content: 'A';
    left: 20px;
    transition: 0.3s ease;
    /* box-shadow: -10px 0 0 #000; */

}
.web-btn145 span:nth-child(2)::before{
    content: 'b';
    left: 40px;
    top: 25px;
    transition: 0.4s ease;
}
.web-btn145 span:nth-child(3)::before{
    content: 'o';
    left: 15px;
    top: 30px;
    transition: 0.5s ease;
}
.web-btn145 span:nth-child(4)::before{
    content: 'u';
    left: 59px;
    transition: 0.6s ease;
}
.web-btn145 span:nth-child(5)::before{
    content: 't ';
    left: 76px;
    top: 30px;
    transition: 0.7s ease;
}
.web-btn145 span:nth-child(6)::before{
    content: 'U';
    left: 93px;
    top: -10px;
    transition: 0.8s ease;
}
.web-btn145 span:nth-child(7)::before{
    content: 's';
    left: 110px;
    width: 11%;
    top: 5px;
    transition: 0.9s ease;
    /* box-shadow: 10px 0 0 #000; */
}

.web-btn145:hover span:nth-child(1)::before{transition: all 0.3s ease; width:12.8%; opacity:1; background: #000; padding-top: 10px; top: 0; left: 8px; box-shadow: -10px 0 0 #000;}
.web-btn145:hover span:nth-child(2)::before{transition: all 0.4s ease; width:12.8%; opacity:1; background: #000; padding-top: 10px; top: 0; left: 25px; box-shadow: 0 0 0 0;}
.web-btn145:hover span:nth-child(3)::before{transition: all 0.5s ease; width:12.8%; opacity:1; background: #000; padding-top: 10px; top: 0; left: 42px; box-shadow: 0 0 0 0;}
.web-btn145:hover span:nth-child(4)::before{transition: all 0.6s ease; width:12.8%; opacity:1; background: #000; padding-top: 10px; top: 0; left: 59px; box-shadow: 0 0 0 0;}
.web-btn145:hover span:nth-child(5)::before{transition: all 0.7s ease; width:12.8%; opacity:1; background: #000; padding-top: 10px; top: 0; left: 76px; box-shadow: 0 0 0 0;}
.web-btn145:hover span:nth-child(6)::before{transition: all 0.8s ease; width:12.8%; opacity:1; background: #000; padding-top: 10px; top: 0; left: 93px; box-shadow: 0 0 0 0;}
.web-btn145:hover span:nth-child(7)::before{transition: all 0.9s ease; width:12.8%; opacity:1; background: #000; padding-top: 10px; top: 0; left: 110px; box-shadow: 10px 0 0 #000;}



.web-btn146{
    background: #ffab40;
    color: #fff;
    z-index: 0;
    overflow: hidden;
}
.web-btn146:hover{
    background:#ffab40 !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn146 span {
    position: relative;
    height: 100%;
    position: relative;
    display: contents;
}
.web-btn146 span:nth-child(1)::before,
.web-btn146 span:nth-child(2)::before,
.web-btn146 span:nth-child(3)::before,
.web-btn146 span:nth-child(4)::before,
.web-btn146 span:nth-child(5)::before,
.web-btn146 span:nth-child(6)::before,
.web-btn146 span:nth-child(7)::before{
    position: absolute;
    content: '';
    width: 12.9% !important;
    height: 100%;
    background: #00000000;
    top:0;
    left: 0;
    overflow: hidden;
    /* padding-top: 10px; */
    transform: scale(1) ;
    opacity: 0.5;
}
.web-btn146 span:nth-child(1)::before{
    content: 'A';
    left: 20px;
    transition: 0.3s ease;
    /* box-shadow: -10px 0 0 #000; */

}
.web-btn146 span:nth-child(2)::before{
    content: 'b';
    left: 40px;
    top: 25px;
    transition: 0.4s ease;
}
.web-btn146 span:nth-child(3)::before{
    content: 'o';
    left: 15px;
    top: 30px;
    transition: 0.5s ease;
}
.web-btn146 span:nth-child(4)::before{
    content: 'u';
    left: 59px;
    transition: 0.6s ease;
}
.web-btn146 span:nth-child(5)::before{
    content: 't ';
    left: 76px;
    top: 30px;
    transition: 0.7s ease;
}
.web-btn146 span:nth-child(6)::before{
    content: 'U';
    left: 93px;
    top: -10px;
    transition: 0.8s ease;
}
.web-btn146 span:nth-child(7)::before{
    content: 's';
    left: 110px;
    width: 11%;
    top: 5px;
    transition: 0.9s ease;
    /* box-shadow: 10px 0 0 #000; */
}

.web-btn146:hover span:nth-child(1)::before{transition: all 0.3s ease; width:12.8%; opacity:1; background: #000; padding-top: 10px; top: 0; left: 8px; box-shadow: -10px 0 0 #000;}
.web-btn146:hover span:nth-child(2)::before{transition: all 0.4s ease; width:12.8%; opacity:1; background: #000; padding-top: 10px; top: 0; left: 25px; box-shadow: 0 0 0 0;}
.web-btn146:hover span:nth-child(3)::before{transition: all 0.5s ease; width:12.8%; opacity:1; background: #000; padding-top: 10px; top: 0; left: 42px; box-shadow: 0 0 0 0;}
.web-btn146:hover span:nth-child(4)::before{transition: all 0.6s ease; width:12.8%; opacity:1; background: #000; padding-top: 10px; top: 0; left: 59px; box-shadow: 0 0 0 0;}
.web-btn146:hover span:nth-child(5)::before{transition: all 0.7s ease; width:12.8%; opacity:1; background: #000; padding-top: 10px; top: 0; left: 76px; box-shadow: 0 0 0 0;}
.web-btn146:hover span:nth-child(6)::before{transition: all 0.8s ease; width:12.8%; opacity:1; background: #000; padding-top: 10px; top: 0; left: 93px; box-shadow: 0 0 0 0;}
.web-btn146:hover span:nth-child(7)::before{transition: all 0.9s ease; width:12.8%; opacity:1; background: #000; padding-top: 10px; top: 0; left: 110px; box-shadow: 10px 0 0 #000;}


.web-btn147{
    background: #ffab40;
    color: #fff;
    z-index: 0;
    overflow: hidden;
}
.web-btn147:hover{
    background:#1f1e1c !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn147::before,
 .web-btn147::after{
    position: absolute;
    content: '';
    width:25% ;
    height:70%;
    border-radius: 100px;
    border: 2px solid #292925;
    box-shadow: 0 0 0 3px #161614;
    overflow: hidden;
    transition: all 0.4s ease; 
    z-index: -1;
 }

.web-btn147::after{
    background: #161614;
    right: 10px;
    bottom:-100%;
    transition: all 0.6s ease;
}
.web-btn147::before{
    background: #161614;
    left:10px;
    top:-100%;
    transition: all 0.6s ease;
}
.web-btn147:hover::before{
    top:-5px;
    transition: all 0.6s ease;
}
.web-btn147:hover::after{
    bottom:-5px;
    transition: all 0.6s ease;
}



.web-btn148{
    background: #ffab40;
    color: #fff;
    z-index: 0;
    /* overflow: hidden; */
    position: relative;
}
.web-btn148:hover{
    background:#1f1e1c !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn148:hover::before{
    animation:  border 2s ease-in-out infinite ;
    opacity: 1;

 }

 .web-btn148::before{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -6%;
    bottom: -10%;
    background: #ffab40;
    border: 1px solid rgb(255, 255, 255);
    z-index: -1;


 }
 @keyframes border{
    0%,100%{
        top: 78%;
        left: 93%;
        bottom: 0%;
        background: #ffffff;
        transform: rotate(0deg);

    }
    25%{
        top:-18%;
        bottom: 78%;
        right:0%;
        left: 93%;
        background: #ffffff;
        transform: rotate(30deg);
    }
    50%{
        left:-6%;
        right:93%;
        bottom: 100%;
        top: -18%;
        background: #ffffff;
        transform: rotate(50deg);

    }
    75%{
        left: -6%;
        top: 78%;
        right: 93%;
        bottom: -0%;
        background: #ffffff;
        transform: rotate(-60deg);

    }

 }


 
.web-btn149{
    background: #ffab40;
    color: #fff;
    z-index: 0;
    /* overflow: hidden; */
    position: relative;
}
.web-btn149:hover{
    background:#1f1e1c !important;
    position: relative;
    transition: all 0.4s ease;
 }
 .web-btn149:hover::before{
    animation:  border2   2s ease-in infinite  ;

    opacity: 1;

 }

 .web-btn149::before{
    content: '';
    position: absolute;
    background: #ffab40;
    z-index: -1;
    height: 28%;
    width: 10%;
    border-radius: 100px;
    opacity: 0;
 }
 @keyframes border2{
    0%,100%{
        left: 40%;
        bottom: 20px;
        height: 28%;
        background: #e01313;
        transition: all 0.4s ease;
    }
    
    25%{
        left: 100%;
        transform: scale(2);
        transition: all 0.4s ease;
        
    }
    50%{
        transform: scale(2);
        z-index: 1;
        box-shadow: 0px 0 10px 0 #ff0000;
        transition: all 0.4s ease;

    }
    
    75%{
        left: 0%;
        transition: all 0.4s ease;

    }
   

 }

 
 .web-btn150{
    background: #ffab40;
    color: #ffffff00;
    transition: 0.4s ease;
    z-index: 1;
    overflow: hidden;
}
.web-btn150:hover{
    color: #00000000;
}
.web-btn150::after,
.web-btn150::before{
    position: absolute;
    content: 'Discover';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ec953e;
    color: #fff;
    padding: 10px;
    z-index: -2;
    transition: 0.6s ease;
}
.web-btn150::after{
    content: 'Home';
    top: 100%;
    background: #18130f;
}
.web-btn150:hover::before{
    top:-100%;
}
.web-btn150:hover::after{
    top: 0;
    
}





 
.web-btn151{
    background: #ffab40;
    color: #ffffff;
    transition: 0.4s ease;
    z-index: 1;
    /* overflow: hidden; */
}
.web-btn151:hover{
    background: #000 !important;
}
.web-btn151::before{
    position: absolute;
    content: '';
    right: -5px;
    bottom: -9px;
    width: 2px;
    height: 0;
    background: #ec953e;
    color: #fff;
    z-index: -2;
    transition: 0.6s ease;
}
.web-btn151::after{
    position: absolute;
    content: '';
    width: 0;
    height: 2px;
    bottom:-5px;
    left: 10px;
    z-index: -1;
    background: #ec953e;
    transition: 0.6s ease;

}
.web-btn151:hover::before{
    right: -5px;
    bottom: -9px;
    width: 2px;
    height: 100%;
    background: #000000;
}
.web-btn151:hover::after{
    width: 100%;
    height: 2px;
    bottom:-5px;
    left: 10px;
    background: #000000;
    
}


 
.web-btn152{
    background: #ffab40;
    color: #ffffff;
    transition: 0.4s ease;
    z-index: 1;
    overflow: hidden;
}
.web-btn152:hover{
    background: #000 !important;
}
.web-btn152::before{
    position: absolute;
    content: '';
    right: 5px;
    bottom: -5px;
    width: 5px;
    height:10px;
    z-index: -2;
    transition: 0.6s ease;
    box-shadow: 2px 0 0 0 #fff, -2px 0 0 0 #fff;
}
.web-btn152::after{
    position: absolute;
    content: '';
    width: 5px;
    height:10px;
    top:-5px;
    left: 5px;
    z-index: -1;
    transition: 0.6s ease;
    box-shadow: 2px 0 0 0 #fff, -2px 0 0 0 #fff;

}


 
.web-btn153{
    background: #ffab40;
    color: #ffffff;
    transition: 0.4s ease;
    z-index: 1;
    overflow: hidden;
}
.web-btn153:hover{
    background: #000 !important;
    transition: 0.4s ease;  
}
.web-btn153::before{
    position: absolute;
    content: '';
    right: 10px;
    bottom: 0px;
    width: 5px;
    height:10px;
    z-index: -2;
    transition: 0.6s ease;
    box-shadow: 2px 0 0 0 #fff, -2px 0 0 0 #fff;
}
.web-btn153::after{
    position: absolute;
    content: '';
    width: 5px;
    height:5px;
    top:10px;
    left: 0px;
    z-index: -1;
    transition: 0.6s ease;
    box-shadow: 0 2px 0 0 #fff, 0 -2px 0 0 #fff;

}
.web-btn153:hover::before{
    height: 100%;
}
.web-btn153:hover::after{
    width: 100%;
}


 
.web-btn154{
    background: #ffab40;
    color: #ffffff;
    transition: 0.4s ease;
    z-index: 1;
    overflow: hidden;
}
.web-btn154:hover{
    background: #000 !important;
    transition: 0.4s ease;  
}
.web-btn154::before{
    position: absolute;
    content: '';
    right: 10px;
    bottom: 0px;
    width: 85%;
    height:0px;
    z-index: -2;
    transition: 0.6s ease;
    box-shadow: 2px 0 0 0 #fff, -2px 0 0 0 #fff;
}
.web-btn154::after{
    position: absolute;
    content: '';
    width: 0;
    height:60%;
    top:9px;
    left: 0px;
    z-index: -1;
    transition: 0.6s ease;
    box-shadow: 0 2px 0 0 #fff, 0 -2px 0 0 #fff;

}
.web-btn154:hover::before{
    height: 100%;
}
.web-btn154:hover::after{
    width: 100%;
    
}


.web-btn155{
    background: #ffab40;
    color: #ffffff;
    transition: 0.4s ease;
    z-index: 1;
    position: relative;
    /* overflow: hidden; */
}
.web-btn155:hover{
    background: #000 !important;
    transition: 0.4s ease;  
}
.web-btn155::before{
    position: absolute;
    content: '';
    right:0;
    top: 0;
    width:100%;
    height:100%;
    z-index: -2;
    transition: 0.6s ease;
    background: #7ce7b5;
    clip-path: polygon(100% 0, 60% 0, 40% 100%, 100% 100%);
}
.web-btn155::after{
    position: absolute;
    content: '';
    width: 100%;
    height:100%;
    top:0px;
    left: 0px;
    z-index: -1;
    transition: 0.6s ease;
    background: #ec953e;
    clip-path: polygon(0 0, 60% 0, 40% 100%, 0% 100%);
}
.web-btn155:hover::before{
    top:10px;
    right: -0.5px;
}
.web-btn155:hover::after{
    top:-10px;
    
}



.web-btn156{
    background: #00000000;
    color: #ffffff;
    transition: 0.4s ease;
    z-index: 1;
    position: relative;
    /* overflow: hidden; */
}
.web-btn156:hover{
    background: #ffffff !important;
    transition: 0.4s ease;  
}
.web-btn156::before{
    position: absolute;
    content: '';
    right:0;
    top: 10px;
    width:100%;
    height:100%;
    z-index: -2;
    transition: 0.6s ease;
    background: #000000;
    clip-path: polygon(100% 0, 60% 0, 40% 100%, 100% 100%);
}
.web-btn156::after{
    position: absolute;
    content: '';
    width: 100%;
    height:100%;
    top:-10px;
    left: 0px;
    z-index: -1;
    transition: 0.6s ease;
    background: #ec953e;
    clip-path: polygon(0 0, 60% 0, 40% 100%, 0% 100%);
}
.web-btn156:hover::before{
    top:0px;
    right: -0.5px;
}
.web-btn156:hover::after{
    top:0;
    
}



.web-btn157{
    background: #000000;
    color: #ffffff;
    transition: 0.4s ease;
    z-index: 1;
    position: relative;
    /* overflow: hidden; */
}
.web-btn157:hover{
    background: #ffffff !important;
    transition: 0.4s ease;  
}
.web-btn157::before{
    position: absolute;
    content: '';
    right:0;
    top: 0px;
    width:100%;
    height:100%;
    z-index: -2;
    transition: 0.6s ease;
    background: #d89821;
}
.web-btn157::after{
    position: absolute;
    content: '';
    width: 100%;
    height:100%;
    top:0px;
    left: 0px;
    z-index: -1;
    transition: 0.6s ease;
    background: #ec953e;
}
.web-btn157:hover::before{
    top:0px;
   
}
.web-btn157:hover::after{
    top:0;
    
}