.error-page-wrap {
position:relative;
min-height:560px;
padding:70px 20px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:radial-gradient(circle at 15% 20%,#0025b814,transparent 28%),radial-gradient(circle at 85% 80%,#007eff14,transparent 28%),linear-gradient(135deg,#fff 0%,#f5f8ff 100%)
}

.error-page-wrap::before,.error-page-wrap::after {
content:"";
position:absolute;
border-radius:50%;
pointer-events:none
}

.error-page-wrap::before {
width:230px;
height:230px;
top:-100px;
left:-80px;
border:35px solid #0025b80d;
animation:floatCircle 6s ease-in-out infinite
}

.error-page-wrap::after {
width:260px;
height:260px;
right:-120px;
bottom:-130px;
border:40px solid #007eff0d;
animation:floatCircle 7s ease-in-out infinite reverse
}

.error-content {
position:relative;
z-index:2;
width:100%;
max-width:850px;
padding:55px 35px;
text-align:center;
background:#fffffff0;
border:1px solid #0025b814;
border-radius:28px;
box-shadow:0 25px 70px #0025b81f;
animation:cardShow .7s ease forwards
}

.error-number {
margin:0;
font-size:clamp(90px,16vw,180px);
line-height:.85;
font-weight:900;
letter-spacing:-8px;
color:#0025b8;
text-shadow:8px 8px 0 #0025b80f;
animation:numberFloat 3s ease-in-out infinite
}

.error-number span {
display:inline-block;
color:#0b72e7
}

.error-icon {
width:76px;
height:76px;
margin:25px auto 20px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:30px;
background:linear-gradient(135deg,#0025b8,#087df0);
box-shadow:0 15px 30px #0025b838;
animation:iconPop .8s ease .2s both
}

.error-content h1 {
margin:0 0 15px;
font-size:clamp(28px,5vw,42px);
font-weight:800;
color:#18233f
}

.error-content h1 span {
color:#0025b8
}

.error-content p {
max-width:620px;
margin:0 auto 28px;
color:#65708a;
font-size:17px;
line-height:1.8
}

.error-actions {
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:14px
}

.error-btn {
min-width:175px;
padding:13px 24px;
border-radius:50px;
font-size:15px;
font-weight:700;
text-decoration:none!important;
transition:all .3s ease;
display:inline-flex;
justify-content:center;
align-items:center;
gap:9px
}

.error-btn-primary {
color:#fff!important;
background:linear-gradient(135deg,#0025b8,#087df0);
box-shadow:0 10px 25px #0025b833
}

.error-btn-primary:hover {
color:#fff!important;
transform:translateY(-3px);
box-shadow:0 15px 30px #0025b847
}

.error-btn-outline {
color:#0025b8!important;
background:#fff;
border:1px solid #0025b82e
}

.error-btn-outline:hover {
color:#fff!important;
background:#0025b8;
border-color:#0025b8;
transform:translateY(-3px)
}

.error-dot {
position:absolute;
width:9px;
height:9px;
border-radius:50%;
background:#0b72e7;
opacity:.18;
animation:dotFloat 4s ease-in-out infinite
}

.error-dot.one {
top:20%;
left:12%
}

.error-dot.two {
top:30%;
right:15%;
width:14px;
height:14px;
animation-delay:.8s
}

.error-dot.three {
bottom:18%;
left:18%;
width:13px;
height:13px;
animation-delay:1.3s
}

.error-dot.four {
bottom:25%;
right:12%;
animation-delay:1.8s
}

@keyframes cardShow {
from {
opacity:0;
transform:translateY(30px) scale(0.97)
}

to {
opacity:1;
transform:translateY(0) scale(1)
}
}

@keyframes iconPop {
0% {
opacity:0;
transform:scale(0.4)
}

70% {
transform:scale(1.12)
}

100% {
opacity:1;
transform:scale(1)
}
}

@keyframes numberFloat {
0%,100% {
transform:translateY(0)
}

50% {
transform:translateY(-8px)
}
}

@keyframes floatCircle {
0%,100% {
transform:translate(0,0)
}

50% {
transform:translate(15px,15px)
}
}

@keyframes dotFloat {
0%,100% {
transform:translateY(0)
}

50% {
transform:translateY(-18px)
}
}

@media (max-width: 767px) {
.error-page-wrap {
min-height:500px;
padding:40px 15px
}

.error-content {
padding:40px 20px;
border-radius:22px
}

.error-number {
font-size:105px;
letter-spacing:-5px
}

.error-icon {
width:65px;
height:65px;
font-size:25px;
margin-top:20px
}

.error-content p {
font-size:15px;
line-height:1.7
}

.error-actions {
flex-direction:column
}

.error-btn {
width:100%;
max-width:260px
}
}

.thankyou-section {
position:relative;
overflow:hidden;
padding:80px 20px 90px;
background:radial-gradient(circle at 15% 20%,#0d6efd1f,transparent 30%),radial-gradient(circle at 85% 80%,#0025b81a,transparent 30%),linear-gradient(135deg,#f8fbff 0%,#fff 50%,#f3f7ff 100%)
}

.thankyou-section::before,.thankyou-section::after {
content:"";
position:absolute;
border-radius:50%;
pointer-events:none
}

.thankyou-section::before {
width:280px;
height:280px;
top:-150px;
left:-120px;
border:35px solid #0d6efd0f
}

.thankyou-section::after {
width:360px;
height:360px;
right:-180px;
bottom:-200px;
border:45px solid #0025b80d
}

.thankyou-card {
position:relative;
z-index:2;
max-width:820px;
margin:auto;
padding:55px 40px 48px;
text-align:center;
background:#fffffff5;
border:1px solid #0d6efd1f;
border-radius:28px;
box-shadow:0 20px 60px #0025b81a 0 5px 20px #0000000a;
animation:thankyouCardIn .8s ease-out both
}

.thankyou-icon-wrap {
width:105px;
height:105px;
margin:0 auto 25px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#0d6efd,#0025b8);
box-shadow:0 15px 35px #0d6efd47 0 0 0 12px #0d6efd0f;
animation:iconPop .9s cubic-bezier(0.17,0.67,0.35,1.35) .2s both
}

.thankyou-icon-wrap i {
color:#fff;
font-size:48px;
animation:checkBounce 1.2s ease-in-out .8s both
}

.thankyou-label {
display:inline-flex;
align-items:center;
gap:7px;
padding:7px 17px;
margin-bottom:16px;
border-radius:50px;
background:#eef5ff;
color:#0d6efd;
font-size:13px;
font-weight:700;
letter-spacing:.7px;
text-transform:uppercase
}

.thankyou-title {
margin:0 0 12px;
color:#102a56;
font-size:clamp(34px,5vw,52px);
font-weight:800;
line-height:1.15;
letter-spacing:-1px
}

.thankyou-title span {
color:#0d6efd
}

.thankyou-message {
max-width:650px;
margin:0 auto 12px;
color:#344563;
font-size:19px;
font-weight:500;
line-height:1.7
}

.thankyou-submessage {
max-width:600px;
margin:0 auto 30px;
color:#718096;
font-size:15px;
line-height:1.7
}

.thankyou-confirmation {
display:flex;
align-items:center;
justify-content:center;
gap:12px;
max-width:520px;
margin:0 auto 35px;
padding:14px 20px;
border-radius:14px;
background:linear-gradient(90deg,#0d6efd0f,#0025b808);
border:1px solid #0d6efd1a;
color:#24446e;
font-size:14px;
font-weight:600
}

.thankyou-confirmation i {
color:#0d6efd;
font-size:20px
}

.thankyou-buttons {
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
gap:14px
}

.thankyou-btn {
min-width:190px;
display:inline-flex;
justify-content:center;
align-items:center;
gap:9px;
padding:14px 25px;
border-radius:50px;
font-size:15px;
font-weight:700;
text-decoration:none!important;
transition:all .3s ease
}

.thankyou-btn-primary {
color:#fff!important;
background:linear-gradient(135deg,#0d6efd,#0025b8);
box-shadow:0 10px 22px #0d6efd40
}

.thankyou-btn-primary:hover {
color:#fff!important;
transform:translateY(-3px);
box-shadow:0 15px 30px #0d6efd59
}

.thankyou-btn-secondary {
color:#0d6efd!important;
background:#fff;
border:1.5px solid #0d6efd
}

.thankyou-btn-secondary:hover {
color:#fff!important;
background:#0d6efd;
transform:translateY(-3px)
}

.thankyou-dot {
position:absolute;
z-index:1;
width:8px;
height:8px;
border-radius:50%;
background:#0d6efd;
opacity:.18;
animation:floatingDot 4s ease-in-out infinite
}

.thankyou-dot-1 {
top:20%;
left:12%
}

.thankyou-dot-2 {
top:32%;
right:13%;
width:12px;
height:12px;
animation-delay:1s
}

.thankyou-dot-3 {
bottom:20%;
left:18%;
width:6px;
height:6px;
animation-delay:1.8s
}

.thankyou-dot-4 {
bottom:25%;
right:20%;
width:9px;
height:9px;
animation-delay:2.5s
}

@keyframes thankyouCardIn {
from {
opacity:0;
transform:translateY(35px) scale(0.97)
}

to {
opacity:1;
transform:translateY(0) scale(1)
}
}

@keyframes iconPop {
from {
opacity:0;
transform:scale(0.3)
}

to {
opacity:1;
transform:scale(1)
}
}

@keyframes checkBounce {
0% {
transform:scale(0.4);
opacity:0
}

60% {
transform:scale(1.15);
opacity:1
}

100% {
transform:scale(1);
opacity:1
}
}

@keyframes floatingDot {
0%,100% {
transform:translateY(0)
}

50% {
transform:translateY(-18px)
}
}

@media (max-width: 767px) {
.thankyou-section {
padding:50px 15px 60px
}

.thankyou-card {
padding:40px 20px 35px;
border-radius:22px
}

.thankyou-icon-wrap {
width:85px;
height:85px;
margin-bottom:22px
}

.thankyou-icon-wrap i {
font-size:38px
}

.thankyou-title {
font-size:34px
}

.thankyou-message {
font-size:16px;
line-height:1.6
}

.thankyou-submessage {
font-size:14px
}

.thankyou-confirmation {
font-size:13px;
padding:13px 15px
}

.thankyou-buttons {
flex-direction:column;
width:100%
}

.thankyou-btn {
width:100%;
max-width:280px
}

.thankyou-dot {
display:none
}
}

.server-error-wrap {
position:relative;
min-height:560px;
padding:70px 20px;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:radial-gradient(circle at 10% 15%,#dc35450f,transparent 28%),radial-gradient(circle at 90% 85%,#0025b812,transparent 30%),linear-gradient(135deg,#fff 0%,#f6f8ff 100%)
}

.server-error-wrap::before,.server-error-wrap::after {
content:"";
position:absolute;
border-radius:50%;
pointer-events:none
}

.server-error-wrap::before {
width:240px;
height:240px;
top:-100px;
right:-80px;
border:35px solid #dc35450b;
animation:serverCircle 7s ease-in-out infinite
}

.server-error-wrap::after {
width:260px;
height:260px;
left:-120px;
bottom:-130px;
border:40px solid #0025b80b;
animation:serverCircle 6s ease-in-out infinite reverse
}

.server-error-card {
position:relative;
z-index:2;
width:100%;
max-width:850px;
padding:55px 35px;
text-align:center;
background:#fffffff2;
border:1px solid #0025b814;
border-radius:28px;
box-shadow:0 25px 70px #0025b81f;
animation:serverCard .7s ease forwards
}

.server-error-icon {
width:100px;
height:100px;
margin:0 auto 25px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:43px;
color:#fff;
background:linear-gradient(135deg,#0025b8,#087df0);
box-shadow:0 18px 35px #0025b833;
animation:serverIcon .9s ease both
}

.server-error-code {
display:inline-block;
margin-bottom:15px;
padding:7px 17px;
border-radius:50px;
color:#0025b8;
background:#0025b812;
font-size:13px;
font-weight:800;
letter-spacing:1px;
text-transform:uppercase
}

.server-error-card h1 {
margin:0 0 15px;
color:#18233f;
font-size:clamp(28px,5vw,43px);
font-weight:800
}

.server-error-card h1 span {
color:#0025b8
}

.server-error-card p {
max-width:620px;
margin:0 auto 28px;
color:#65708a;
font-size:17px;
line-height:1.8
}

.server-message {
max-width:600px;
margin:0 auto 28px;
padding:16px 20px;
border-radius:14px;
background:#f7f9fd;
border:1px solid #e8edf7;
color:#56627a;
font-size:14px
}

.server-message i {
margin-right:7px;
color:#0025b8
}

.server-error-actions {
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:14px
}

.server-btn {
min-width:175px;
padding:13px 24px;
border-radius:50px;
text-decoration:none!important;
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
font-size:15px;
font-weight:700;
transition:all .3s ease
}

.server-btn-primary {
color:#fff!important;
background:linear-gradient(135deg,#0025b8,#087df0);
box-shadow:0 10px 25px #0025b833
}

.server-btn-primary:hover {
color:#fff!important;
transform:translateY(-3px);
box-shadow:0 15px 30px #0025b847
}

.server-btn-outline {
color:#0025b8!important;
background:#fff;
border:1px solid #0025b82e
}

.server-btn-outline:hover {
color:#fff!important;
background:#0025b8;
border-color:#0025b8;
transform:translateY(-3px)
}

.server-status {
margin-top:25px;
font-size:12px;
color:#8993a8
}

.server-status span {
display:inline-block;
width:7px;
height:7px;
margin-right:6px;
border-radius:50%;
background:#f0ad4e;
animation:statusPulse 1.5s infinite
}

.server-dot {
position:absolute;
z-index:1;
width:9px;
height:9px;
border-radius:50%;
background:#0b72e7;
opacity:.15;
animation:serverDot 4s ease-in-out infinite
}

.server-dot.one {
top:18%;
left:12%
}

.server-dot.two {
top:28%;
right:12%;
width:13px;
height:13px;
animation-delay:.7s
}

.server-dot.three {
bottom:20%;
left:17%;
width:12px;
height:12px;
animation-delay:1.2s
}

.server-dot.four {
bottom:15%;
right:18%;
animation-delay:1.7s
}

@keyframes serverCard {
from {
opacity:0;
transform:translateY(30px) scale(0.97)
}

to {
opacity:1;
transform:translateY(0) scale(1)
}
}

@keyframes serverIcon {
0% {
opacity:0;
transform:scale(0.5) rotate(-15deg)
}

70% {
transform:scale(1.08) rotate(4deg)
}

100% {
opacity:1;
transform:scale(1) rotate(0)
}
}

@keyframes statusPulse {
0%,100% {
opacity:.35;
transform:scale(0.8)
}

50% {
opacity:1;
transform:scale(1.2)
}
}

@keyframes serverCircle {
0%,100% {
transform:translate(0,0)
}

50% {
transform:translate(15px,-15px)
}
}

@keyframes serverDot {
0%,100% {
transform:translateY(0)
}

50% {
transform:translateY(-18px)
}
}

@media (max-width: 767px) {
.server-error-wrap {
min-height:500px;
padding:40px 15px
}

.server-error-card {
padding:40px 20px;
border-radius:22px
}

.server-error-icon {
width:78px;
height:78px;
font-size:32px
}

.server-error-card p {
font-size:15px;
line-height:1.7
}

.server-error-actions {
flex-direction:column;
align-items:center
}

.server-btn {
width:100%;
max-width:260px
}
}