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