@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap"); *, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
.admin-bar header.header {
margin-top: 33px;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #ffffff;
color: #1e293b;
line-height: 1.6;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
}
img {
max-width: 100%;
height: auto;
} ::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
background: #94a3b8;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #64748b;
} .container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
}
@media (min-width: 640px) {
.container {
padding: 0 1.5rem;
}
}
@media (min-width: 1024px) {
.container {
padding: 0 2rem;
}
} .header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
border-bottom: 1px solid #f1f5f9;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 80px;
}
.logo {
display: flex;
align-items: center;
gap: 0.5rem;
transition: transform 0.3s ease;
}
.logo:hover {
transform: scale(1.02);
}
.logo-text {
display: flex;
flex-direction: column;
}
.logo-text span:first-child {
font-size: 1.25rem;
font-weight: 700;
color: #0e7490;
line-height: 1.2;
}
.logo-text span:last-child {
font-size: 1.125rem;
font-weight: 600;
color: #1b86df;
line-height: 1.2;
}
.nav-desktop {
display: none;
align-items: center;
gap: 2rem;
}
@media (min-width: 768px) {
.nav-desktop {
display: flex;
}
}
.nav-link {
font-size: 0.875rem;
font-weight: 500;
color: #475569;
padding: 0.5rem 0;
position: relative;
transition: color 0.3s ease;
}
.nav-link:hover,
.nav-link.active {
color: #0e7490;
}
.nav-link.active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: #1b86df;
border-radius: 9999px;
}
.header-cta {
display: none;
}
@media (min-width: 768px) {
.header-cta {
display: flex;
}
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(to right, #1b86df, #0d9488);
color: white;
padding: 0.625rem 1.25rem;
border-radius: 9999px;
font-weight: 500;
font-size: 0.875rem;
transition: all 0.3s ease;
box-shadow: 0 10px 25px -5px rgba(8, 145, 178, 0.25);
border: none;
cursor: pointer;
}
.btn-primary:hover {
background: linear-gradient(to right, #0e7490, #0f766e);
box-shadow: 0 10px 25px -5px rgba(8, 145, 178, 0.4);
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
background: white;
border: 2px solid #1b86df;
color: #0e7490;
padding: 1rem 2rem;
border-radius: 9999px;
font-weight: 600;
font-size: 1.125rem;
transition: all 0.3s ease;
cursor: pointer;
}
.btn-secondary:hover {
background: #ecfeff;
}
.btn-large {
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
box-shadow: 0 20px 40px -10px rgba(8, 145, 178, 0.3);
}
.btn-large:hover {
transform: translateY(-2px);
box-shadow: 0 20px 40px -10px rgba(8, 145, 178, 0.5);
}
.btn-dark {
background: #1e293b;
color: white;
}
.btn-dark:hover {
background: #0f172a;
}
.btn-white {
background: white;
color: #0e7490;
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);
}
.btn-white:hover {
background: #ecfeff;
}
.btn-outline-white {
background: transparent;
border: 2px solid white;
color: white;
}
.btn-outline-white:hover {
background: rgba(255, 255, 255, 0.1);
} .mobile-menu-btn {
display: flex;
padding: 0.5rem;
color: #475569;
background: none;
border: none;
cursor: pointer;
transition: color 0.3s ease;
}
.mobile-menu-btn:hover {
color: #0e7490;
}
@media (min-width: 768px) {
.mobile-menu-btn {
display: none;
}
} .mobile-menu {
display: none;
padding: 1rem 0;
border-top: 1px solid #f1f5f9;
}
.mobile-menu.active {
display: block;
}
@media (min-width: 768px) {
.mobile-menu {
display: none !important;
}
}
.mobile-nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.mobile-nav-link {
display: block;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
color: #475569;
transition: all 0.3s ease;
}
.mobile-nav-link:hover,
.mobile-nav-link.active {
background: #ecfeff;
color: #0e7490;
}
.mobile-cta {
margin-top: 0.5rem;
padding: 0 1rem;
} .hero {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
padding-top: 80px;
overflow: hidden;
}
.hero-background {
position: absolute;
inset: 0;
background-image: url(https://www.skyward-recovery.co.uk/wp-content/uploads/2026/01/kateryna-hliznitsova-2Pg1FDw5OIA-unsplash_small-scaled.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(255,255,255,0.95), rgba(255,255,255,0.85), rgba(255,255,255,0.4));
}
.hero-overlay-bottom {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent, transparent, rgba(255,255,255,0.8));
}
.hero-decorations {
position: absolute;
inset: 0;
pointer-events: none;
}
.hero-circle {
position: absolute;
border-radius: 50%;
}
.hero-circle-1 {
top: 8rem;
right: 5rem;
width: 18rem;
height: 18rem;
background: #cffafe;
filter: blur(48px);
opacity: 0.3;
animation: pulse 4s ease-in-out infinite;
}
.hero-circle-2 {
bottom: 5rem;
left: 2.5rem;
width: 24rem;
height: 24rem;
background: #ccfbf1;
filter: blur(48px);
opacity: 0.2;
}
@keyframes pulse {
0%, 100% {
opacity: 0.3;
}
50% {
opacity: 0.5;
}
}
.hero-content {
position: relative;
z-index: 10;
max-width: 48rem;
padding: 5rem 0;
}
.badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: white;
border: 1px solid #a5f3fc;
padding: 0.5rem 1rem;
border-radius: 9999px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 2rem;
}
.badge-dot {
width: 0.5rem;
height: 0.5rem;
background: #06b6d4;
border-radius: 50%;
animation: pulse 2s ease-in-out infinite;
}
.badge-text {
font-size: 0.875rem;
font-weight: 500;
color: #0e7490;
}
.hero-title {
font-size: 3rem;
font-weight: 700;
color: #1e293b;
line-height: 1.1;
margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
.hero-title {
font-size: 3.75rem;
}
}
@media (min-width: 1024px) {
.hero-title {
font-size: 4.5rem;
}
}
.hero-title .highlight {
background: linear-gradient(to right, #1b86df, #14b8a6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-description {
font-size: 1.25rem;
color: #475569;
margin-bottom: 1rem;
line-height: 1.7;
}
.hero-description strong {
color: #1e293b;
}
.hero-subdescription {
font-size: 1.125rem;
color: #64748b;
margin-bottom: 2.5rem;
line-height: 1.7;
}
.hero-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
}
@media (min-width: 640px) {
.hero-buttons {
flex-direction: row;
}
}
.btn-arrow {
transition: transform 0.3s ease;
}
.btn-primary:hover .btn-arrow {
transform: translateX(4px);
} .services {
padding: 6rem 0;
background: linear-gradient(to bottom, #ffffff, #f8fafc);
}
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #ecfeff;
border: 1px solid #a5f3fc;
padding: 0.5rem 1rem;
border-radius: 9999px;
margin-bottom: 1.5rem;
}
.section-badge-text {
font-size: 0.875rem;
font-weight: 500;
color: #0e7490;
}
.section-title {
font-size: 2.25rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 1rem;
}
@media (min-width: 640px) {
.section-title {
font-size: 3rem;
}
}
.section-title .highlight {
background: linear-gradient(to right, #1b86df, #14b8a6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-description {
font-size: 1.125rem;
color: #475569;
max-width: 42rem;
margin: 0 auto;
}
.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
@media (min-width: 768px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.services-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.service-card {
background: white;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 10px 40px -10px rgba(100, 116, 139, 0.2);
transition: all 0.5s ease;
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px -15px rgba(8, 145, 178, 0.15);
}
.service-card-image {
position: relative;
height: 14rem;
overflow: hidden;
}
.service-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.service-card:hover .service-card-image img {
transform: scale(1.1);
}
.service-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(15, 23, 42, 0.6), transparent, transparent);
}
.service-card-title-overlay {
position: absolute;
bottom: 1rem;
left: 1rem;
right: 1rem;
}
.service-card-title-overlay h3 {
font-size: 1.25rem;
font-weight: 700;
color: white;
}
.service-card-content {
padding: 1.5rem;
}
.service-card-content p {
color: #475569;
line-height: 1.7;
margin-bottom: 1rem;
}
.service-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #1b86df;
font-weight: 600;
transition: color 0.3s ease;
}
.service-link:hover {
color: #0e7490;
}
.service-link svg {
transition: transform 0.3s ease;
}
.service-link:hover svg {
transform: translateX(4px);
}
.services-cta {
text-align: center;
margin-top: 3rem;
} .about {
padding: 6rem 0;
background: white;
}
.about-grid {
display: grid;
grid-template-columns: 1fr;
gap: 4rem;
align-items: center;
}
@media (min-width: 1024px) {
.about-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.about-image-wrapper {
position: relative;
}
.about-image {
position: relative;
border-radius: 1.5rem;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(100, 116, 139, 0.25);
}
.about-image img {
width: 100%;
height: 500px;
object-fit: cover;
}
.about-image-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(8, 145, 178, 0.2), transparent);
}
.about-decoration-1 {
position: absolute;
bottom: -1.5rem;
right: -1.5rem;
width: 8rem;
height: 8rem;
background: linear-gradient(to bottom right, #22d3ee, #2dd4bf);
border-radius: 1rem;
z-index: -1;
}
.about-decoration-2 {
position: absolute;
top: -1.5rem;
left: -1.5rem;
width: 6rem;
height: 6rem;
background: #cffafe;
border-radius: 1rem;
z-index: -1;
}
.about-content .section-badge {
margin-bottom: 1.5rem;
}
.about-title {
font-size: 2.25rem;
font-weight: 700;
color: #1e293b;
line-height: 1.2;
margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
.about-title {
font-size: 3rem;
}
}
.about-title .highlight {
background: linear-gradient(to right, #1b86df, #14b8a6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.about-description {
font-size: 1.125rem;
color: #475569;
margin-bottom: 1rem;
}
.about-description strong {
color: #1e293b;
}
.about-subdescription {
color: #64748b;
margin-bottom: 2rem;
}
.features-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.feature-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: linear-gradient(to right, #ecfeff, white);
border-radius: 0.75rem;
border: 1px solid #cffafe;
transition: box-shadow 0.3s ease;
}
.feature-item:hover {
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.feature-icon {
width: 2.5rem;
height: 2.5rem;
background: linear-gradient(to bottom right, #06b6d4, #14b8a6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.feature-icon svg {
width: 1.25rem;
height: 1.25rem;
color: white;
}
.feature-text {
color: #334155;
font-weight: 500;
} .values {
padding: 6rem 0;
background: linear-gradient(to bottom right, #1e293b, #0f172a, #164e63);
position: relative;
overflow: hidden;
}
.values-decorations {
position: absolute;
inset: 0;
pointer-events: none;
}
.values-circle-1 {
position: absolute;
top: 5rem;
left: 5rem;
width: 16rem;
height: 16rem;
background: rgba(6, 182, 212, 0.1);
border-radius: 50%;
filter: blur(48px);
}
.values-circle-2 {
position: absolute;
bottom: 5rem;
right: 5rem;
width: 24rem;
height: 24rem;
background: rgba(20, 184, 166, 0.1);
border-radius: 50%;
filter: blur(48px);
}
.values-content {
position: relative;
z-index: 10;
}
.values .section-badge {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
.values .section-badge-text {
color: #67e8f9;
}
.values .section-title {
color: white;
}
.values .section-description {
color: #cbd5e1;
}
.values-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-top: 4rem;
}
@media (min-width: 768px) {
.values-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.value-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1rem;
padding: 2rem;
transition: all 0.3s ease;
}
.value-card:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-4px);
}
.value-icon {
width: 4rem;
height: 4rem;
background: linear-gradient(to bottom right, #22d3ee, #2dd4bf);
border-radius: 1rem;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
transition: transform 0.3s ease;
}
.value-card:hover .value-icon {
transform: scale(1.1);
}
.value-icon svg {
width: 2rem;
height: 2rem;
color: white;
}
.value-card h3 {
font-size: 1.25rem;
font-weight: 700;
color: white;
margin-bottom: 0.75rem;
}
.value-card p {
color: #94a3b8;
} .cta {
padding: 6rem 0;
background: linear-gradient(to bottom, #f8fafc, white);
}
.cta-card {
position: relative;
background: linear-gradient(to bottom right, #1b86df, #0d9488);
border-radius: 1.5rem;
padding: 3rem;
overflow: hidden;
}
@media (min-width: 768px) {
.cta-card {
padding: 4rem;
}
}
.cta-decorations {
position: absolute;
inset: 0;
pointer-events: none;
}
.cta-circle-1 {
position: absolute;
top: 0;
right: 0;
width: 16rem;
height: 16rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
filter: blur(48px);
}
.cta-circle-2 {
position: absolute;
bottom: 0;
left: 0;
width: 12rem;
height: 12rem;
background: rgba(34, 211, 238, 0.2);
border-radius: 50%;
filter: blur(32px);
}
.cta-content {
position: relative;
z-index: 10;
text-align: center;
}
.cta-title {
font-size: 1.875rem;
font-weight: 700;
color: white;
margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
.cta-title {
font-size: 2.25rem;
}
}
@media (min-width: 768px) {
.cta-title {
font-size: 3rem;
}
}
.cta-description {
font-size: 1.125rem;
color: #cffafe;
max-width: 42rem;
margin: 0 auto 2.5rem;
}
.cta-buttons {
display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center;
}
@media (min-width: 640px) {
.cta-buttons {
flex-direction: row;
}
} .footer {
background: #0f172a;
color: white;
}
.footer-main {
padding: 4rem 0;
}
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
@media (min-width: 768px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.footer-grid {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
.footer-brand {
grid-column: 1;
}
.footer-logo {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.footer-logo-text span:first-child {
font-size: 1.125rem;
font-weight: 700;
color: #22d3ee;
line-height: 1.2;
}
.footer-logo-text span:last-child {
font-size: 1rem;
font-weight: 600;
color: #67e8f9;
line-height: 1.2;
}
.footer-description {
color: #94a3b8;
line-height: 1.7;
}
.footer-title {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer-link {
color: #94a3b8;
transition: color 0.3s ease;
}
.footer-link:hover {
color: #22d3ee;
}
.footer-service {
color: #94a3b8;
}
.footer-contact-item {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.footer-contact-icon {
width: 2.5rem;
height: 2.5rem;
background: rgba(6, 182, 212, 0.1);
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.footer-contact-icon svg {
width: 1.25rem;
height: 1.25rem;
color: #22d3ee;
}
.footer-contact-text {
color: #94a3b8;
transition: color 0.3s ease;
}
a.footer-contact-text:hover {
color: #22d3ee;
}
.footer-bottom {
border-top: 1px solid #1e293b;
padding: 1.5rem 0;
}
.footer-copyright {
text-align: center;
color: #64748b;
font-size: 0.875rem;
} .page-hero {
padding: 8rem 0 4rem;
background: linear-gradient(to bottom right, #f8fafc, #ffffff, #ecfeff);
}
.page-hero-content {
text-align: center;
max-width: 48rem;
margin: 0 auto;
}
.page-title {
font-size: 2.25rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
.page-title {
font-size: 3rem;
}
}
@media (min-width: 1024px) {
.page-title {
font-size: 3.75rem;
}
}
.services-page-grid {
padding: 5rem 0;
}
.service-card-extended {
border: 1px solid #f1f5f9;
}
.service-card-extended .service-card-image {
height: 16rem;
}
.service-step-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(4px);
padding: 0.25rem 0.75rem;
border-radius: 9999px;
margin-bottom: 0.5rem;
}
.service-step-badge span {
font-size: 0.75rem;
font-weight: 500;
color: white;
}
.service-card-extended .service-card-title-overlay h3 {
font-size: 1.5rem;
}
.services-page-cta {
padding: 5rem 0;
background: linear-gradient(to bottom right, #1e293b, #0f172a, #164e63);
}
.services-page-cta .cta-content {
max-width: 56rem;
margin: 0 auto;
} .contact-content {
padding: 5rem 0;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr;
gap: 4rem;
}
@media (min-width: 1024px) {
.contact-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.contact-info h2 {
font-size: 1.875rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 2rem;
}
.contact-info-description {
color: #475569;
margin-bottom: 2.5rem;
line-height: 1.7;
}
.contact-cards {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.contact-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem;
background: linear-gradient(to right, #ecfeff, white);
border-radius: 1rem;
border: 1px solid #cffafe;
transition: box-shadow 0.3s ease;
}
.contact-card:hover {
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}
.contact-card-icon {
width: 3.5rem;
height: 3.5rem;
background: linear-gradient(to bottom right, #06b6d4, #14b8a6);
border-radius: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.contact-card:hover .contact-card-icon {
transform: scale(1.1);
}
.contact-card-icon svg {
width: 1.5rem;
height: 1.5rem;
color: white;
}
.contact-card-label {
font-size: 0.875rem;
color: #64748b;
margin-bottom: 0.25rem;
}
.contact-card-value {
font-size: 1.25rem;
font-weight: 600;
color: #1e293b;
}
.contact-form-wrapper {
background: white;
border-radius: 1.5rem;
box-shadow: 0 25px 50px -12px rgba(100, 116, 139, 0.15);
padding: 2rem;
border: 1px solid #f1f5f9;
}
@media (min-width: 768px) {
.contact-form-wrapper {
padding: 2.5rem;
}
}
.contact-form-title {
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 1.5rem;
}
.contact-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-label {
font-size: 0.875rem;
font-weight: 500;
color: #334155;
}
.form-input,
.form-textarea {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
font-family: inherit;
font-size: 1rem;
transition: all 0.3s ease;
outline: none;
}
.form-input:focus,
.form-textarea:focus {
border-color: #06b6d4;
box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: #94a3b8;
}
.form-textarea {
resize: none;
min-height: 120px;
}
.form-submit {
width: 100%;
padding: 1rem 2rem;
border-radius: 0.75rem;
}
.success-message {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 0;
text-align: center;
}
.success-message.active {
display: flex;
}
.success-icon {
width: 5rem;
height: 5rem;
background: linear-gradient(to bottom right, #06b6d4, #14b8a6);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.success-icon svg {
width: 2.5rem;
height: 2.5rem;
color: white;
}
.success-title {
font-size: 1.25rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 0.5rem;
}
.success-text {
color: #475569;
} .text-center {
text-align: center;
}
.hidden {
display: none;
}