.animate{position:relative;overflow:hidden}.animate:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background-color:hsla(0,0%,100%,.3);transform:skewX(-45deg);transition:all .5s ease}.animate:hover:before{left:100%}.wrap{margin:auto;position:relative}.modal{background-color:#fff;padding:2em 3em;text-align:center;border-radius:.5em;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:11}.modal-content{display:flex;flex-direction:column}.modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:999}.btn{cursor:pointer;font-size:16px;padding:12px 24px;color:#fff;border-radius:8px}@media (max-width:768px){.btn{font-size:14px;padding:10px 20px}}.btn.default{background-color:var(--primary-color);border:none;color:#fff;font-weight:700;transition:all .3s ease}.btn.default:hover{background-color:#45a049;transform:translateY(-3px);box-shadow:0 8px 15px rgba(0,0,0,.1)}.btn.default:active{transform:translateY(2px);box-shadow:0 4px 10px rgba(0,0,0,.1)}.btn.outline{background-color:transparent;border:2px solid var(--primary-color);color:var(--primary-color);transition:all .3s ease}.btn.outline:hover{background-color:var(--primary-color);color:#fff}.btn.ghost{background-color:transparent;color:var(--primary-color);border:none;font-weight:700}.btn.ghost:hover{background-color:rgba(76,175,80,.1)}.btn.primary{background-color:var(--primary-color)}