@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&family=Poppins&display=swap";:root{--bg-color: #3c5077;--button-bg-color: #fff;--content-color: #333;--button-bg-color-2: #3ce43c;--btn-bg-hover-color: #38f038eb;--error-bg-color: #ffcccc;--error-title-color: #ff4d4d;--error-btn-bg-color: #ff4d4d;--error-btn-hover-color: #ff1a1a;--warning-bg-color: #fff3cd;--warning-title-color: #d39e00;--warning-btn-bg-color: #d39e00;--warning-btn-hover-color: #c88d00}*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins,sans-serif}.container{width:100%;height:100vh;background:var(--bg-color);display:flex;align-items:center;justify-content:center}.btn{padding:10px 60px;background:var(--button-bg-color);width:fit-content;border:0;outline:none;cursor:pointer;color:var(--content-color);font-size:22px;font-weight:500;border-radius:30px}.popup__overlay{position:fixed;top:0;left:0;background-color:#0003;height:100%;width:100%;visibility:hidden}.popup__overlay.visible{visibility:visible}.popup{width:400px;background:var(--button-bg-color);position:absolute;top:0;left:50%;transform:translate(-50%,-50%) scale(.1);border-radius:6px;box-shadow:0 4px 12px #0003;padding:0 30px 30px;text-align:center;color:var(--content-color);visibility:hidden;transition:transform .4s,top .4s}.popup--show{visibility:visible;top:50%;transform:translate(-50%,-50%) scale(1)}.popup__icon{width:100px;margin:-60px auto -20px}.popup__title{font-size:38px;font-weight:600;margin:20px 0 10px}.popup__close-btn{width:100%;margin-top:40px;padding:10px 30px;border:none;background-color:var(--button-bg-color-2);color:var(--button-bg-color);font-size:18px;border-radius:4px;cursor:pointer;box-shadow:0 2px 5px #0003;transition:background-color .3s ease}.popup__close-btn:hover{background-color:var(--btn-bg-hover-color)}.popup--error{background:var(--error-bg-color)}.popup--error .popup__title{color:var(--error-title-color)}.popup--error .popup__close-btn{background-color:var(--error-btn-bg-color)}.popup--error .popup__close-btn:hover{background-color:var(--error-btn-hover-color)}.popup--warning{background:var(--warning-bg-color);border:1px solid #ffeeba;box-shadow:0 2px 10px #0000001a}.popup--warning .popup__title{color:var(--warning-title-color)}.popup--warning .popup__close-btn{background-color:var(--warning-btn-bg-color);color:#fff}.popup--warning .popup__close-btn:hover{background-color:var(--warning-btn-hover-color)}@media (max-width: 768px){.container{padding:20px}.popup{width:100%;max-width:320px;padding:0 20px 20px;font-size:18px}.popup__title{font-size:28px}.popup__close-btn{margin-top:30px;font-size:16px}}@media (max-width: 480px){.popup{max-width:280px}.popup__title{font-size:24px}.popup__close-btn{margin-top:20px;font-size:14px}}