@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
@import url('affiliate-marketing.css');

:root {
    --primary: #213d7e;
    --primary-dark: #182e66;
    --primary-light: #2c4da0;
    --secondary: #f8fafc;
    --accent: #ff7f00;
    --accent-light: #ffaa52;
    --accent-dark: #d66400;
    --cta: #ff7f00;
    --cta-hover: #d66400;
    --text-main: #1a1a1a;
    --text-light: #64748b;
    --white: #ffffff;
    --border-light: #e2e8f0;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 30px 60px rgba(0, 0, 0, 0.2);
    --gradient-primary: linear-gradient(135deg, #213d7e 0%, #2c4da0 100%);
    --gradient-accent: linear-gradient(135deg, #ff7f00 0%, #ffaa52 100%);
    --gradient-cta: linear-gradient(135deg, #ff7f00 0%, #d66400 100%);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    background-color: var(--white);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: clip;
    font-weight: 400;
}

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--primary);
    line-height: 1.2;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

ul {
    list-style: none;
}

html {
    scroll-behavior: smooth;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.text-center {
    text-align: center;
}

.text-primary {
    color: var(--primary);
}

.text-accent {
    color: var(--accent);
}

.mb-1 {
    margin-bottom: 8px;
}

.mb-2 {
    margin-bottom: 16px;
}

.mb-3 {
    margin-bottom: 24px;
}

.mb-4 {
    margin-bottom: 32px;
}

.mb-5 {
    margin-bottom: 48px;
}

/* Premium Buttons */
.btn {
    display: inline-block;
    padding: 13px 32px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    font-size: 16px;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    transition: width 0.3s ease;
    z-index: -1;
}

.btn:hover::before {
    width: 100%;
}

.btn-primary {
    background: var(--gradient-cta);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

.btn-secondary {
    background: var(--gradient-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.3);
}

.btn-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.4);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* Modern Header */
header {
    background: rgba(255, 255, 255, 0.85);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 16px 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

header.scrolled {
    padding: 12px 0;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.08);
}

.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;

}

.logo img {
    max-height: 40px;
    width: auto;
}


.logo i {
    font-size: 24px;
    background: var(--gradient-accent);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo:hover {
    transform: translateY(-1px);
}

.nav-links {
    display: flex;
    gap: 40px;
    align-items: center;
}

.nav-links a.nav-link {
    font-weight: 600;
    color: var(--text-main);
    font-size: 15.2px;
    position: relative;
    padding: 8px 0;
    letter-spacing: -0.2px;
    transition: color 0.3s ease;
}

.nav-links a.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-accent);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.nav-links a.nav-link:hover::after,
.nav-links a.nav-link.active::after {
    width: 100%;
}

.nav-links a.nav-link:hover,
.nav-links a.nav-link.active {
    color: var(--primary);
}

/* Get Quote Button Design */
.btn-get-quote {
    background: var(--gradient-cta);
    border-radius: 50px;
    padding: 12px 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: white !important;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.25);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: none;
}

.btn-get-quote::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #FF8C00 0%, #FF5F00 100%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-get-quote:hover::before {
    opacity: 1;
}

.btn-get-quote:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 0, 0.4);
}

.btn-get-quote i {
    transition: transform 0.3s ease;
    font-size: 0.9em;
}

.btn-get-quote:hover i {
    transform: translateX(3px) rotate(-10deg);
}

.mobile-toggle {
    display: none;
    font-size: 24px;
    color: var(--primary);
    cursor: pointer;
}

/* Hero Section */
.hero {
    padding: 96px 0 64px;
    background: linear-gradient(135deg, #e6f0ff 0%, #f3e6ff 50%, #fff0e6 100%);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 20s ease-in-out infinite;
}

.hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(15, 23, 42, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 15s ease-in-out infinite reverse;
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(30px, -30px) rotate(5deg);
    }

    66% {
        transform: translate(-20px, 20px) rotate(-5deg);
    }
}

.hero-content {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: 64px;
    color: var(--primary);
    margin-bottom: 24px;
    line-height: 1.1;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -2px;
}

.hero h4 {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.hero p {
    font-size: 19.2px;
    color: var(--text-light);
    margin-bottom: 40px;
    max-width: 600px;
    line-height: 1.8;
}

.hero-image {
    position: relative;
}

.hero-image img {
    width: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    animation: floatImage 6s ease-in-out infinite;
}

.hero-image img:hover {
    transform: scale(1.02);
}

@keyframes floatImage {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* Cards */
.card {
    background: var(--white);
    padding: 40px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border-light);
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-accent);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.card:hover::before {
    transform: scaleX(1);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
    border-color: var(--accent);
}

.card-icon {
    font-size: 48px;
    margin-bottom: 24px;
    background: var(--gradient-accent);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease;
}

.card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
}

.card-title {
    font-size: 21px;
    margin-bottom: 16px;
    color: var(--primary);
    font-weight: 700;
}

.card-text {
    color: var(--text-light);
    font-size: 15.2px;
    flex-grow: 1;
    line-height: 1.7;
}

/* Sections */
.section-padding {
    padding: 50px 0;
}

.bg-light {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.bg-primary {
    background: var(--gradient-primary);
    color: white;
    position: relative;
    overflow: hidden;
}

.bg-primary::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.section-title h2 {
    font-size: 36px;
    margin-bottom: 16px;
    font-weight: 800;
    position: relative;
    display: block;
    letter-spacing: -1px;
}

.section-title h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: var(--gradient-accent);
    border-radius: 2px;
}

.section-title p {
    color: var(--text-light);
    max-width: 700px;
    margin: 24px auto 0;
    font-size: 16px;
}

/* Footer */
footer {
    background: var(--gradient-primary);
    color: white;
    padding: 64px 0 0;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
    position: relative;
    z-index: 1;
}

.footer-about p {
    color: rgba(255, 255, 255, 0.8);
    margin-top: 16px;
    font-size: 15.2px;
    line-height: 1.7;
}

.footer-links h4 {
    color: white;
    margin-bottom: 24px;
    font-size: 18px;
    font-weight: 700;
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    transition: all 0.3s ease;
}

.footer-links a:hover {
    color: var(--accent-light);
    padding-left: 8px;
}

.copyright {
    padding: 24px 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    position: relative;
    z-index: 1;
}

/* Forms */
.form-group {
    margin-bottom: 24px;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-main);
}

.form-control {
    width: 100%;
    padding: 13px 19.2px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 16px;
    transition: all 0.3s ease;
    background: var(--white);
}

.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
    transform: translateY(-2px);
}

/* Responsive */
@media(max-width: 768px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 32px;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .section-title h2 {
        font-size: 32px;
    }
}

/* WhatsApp Button */
a[href*="wa.me"] {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: pulse 2s infinite;
}

a[href*="wa.me"]:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.5) !important;
}

@keyframes pulse {

    0%,
    100% {
        box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
    }

    50% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.6);
    }
}

/* General & Typography */
body {
    font-family: 'Outfit', sans-serif;
}

/* Top Header */
.top-header {
    background: linear-gradient(to right, #0f172a, #1e293b);
    color: #e2e8f0;
    padding: 5px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.top-header .container {

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-info {
    display: flex;
    gap: 32px;
    align-items: center;
}

.contact-link {
    color: #cbd5e1;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 9px;
    transition: all 0.3s ease;
    padding: 6px 12px;
    border-radius: 50px;
    font-weight: 500;
}

.contact-link i {
    color: var(--accent);
    font-size: 0.9em;
}

/* Social Icons */
.top-social-wrapper {
    display: flex;
    align-items: center;
}

.social-icons {
    display: flex;
    gap: 12.8px;
}

.top-social {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 13px;
    color: white;
    /* Icons always white against colored bg */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.top-social:hover {
    transform: translateY(-3px) scale(1.1);
}

/* Brand Colors - Standard State */
.top-social-fb {
    background: #1877F2;
    box-shadow: 0 2px 8px rgba(24, 119, 242, 0.3);
}

.top-social-fb:hover {
    box-shadow: 0 5px 15px rgba(24, 119, 242, 0.5);
}

.top-social-tw {
    background: #000000;
    /* X brand color */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.top-social-tw:hover {
    background: #1DA1F2;
    /* Optional: Blue on hover or stick to black */
    box-shadow: 0 5px 15px rgba(29, 161, 242, 0.5);
}

.top-social-in {
    background: #0077b5;
    box-shadow: 0 2px 8px rgba(0, 119, 181, 0.3);
}

.top-social-in:hover {
    box-shadow: 0 5px 15px rgba(0, 119, 181, 0.5);
}

.top-social-insta {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 2px 8px rgba(220, 39, 67, 0.3);
}

.top-social-insta:hover {
    box-shadow: 0 5px 15px rgba(220, 39, 67, 0.5);
}


.top-header a:hover {
    color: white !important;
}

/* Main Header */
#main-header {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

#main-header.scrolled {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 24px rgba(33, 61, 126, 0.12) !important;
}

.nav-wrapper {}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
}

.logo-icon {
    width: 50px;
    height: 50px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.logo-icon i {
    color: white;
    font-size: 24px;
}

.logo-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mobile-toggle {
    display: none;
    cursor: pointer;
    font-size: 24px;
    color: #1e293b;
    z-index: 1001;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-link {
    color: #475569;
    text-decoration: none;
    font-weight: 500;
    font-size: 15.2px;
    transition: all 0.3s;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-accent);
    transition: width 0.3s;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link:hover,
.nav-link.active {
    color: var(--accent) !important;
}

.dropdown {
    position: relative;
}

.dropdown-toggle {
    color: #475569;
    text-decoration: none;
    font-weight: 500;
    font-size: 15.2px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 8px 0;
}

.dropdown-toggle i {
    font-size: 11.2px;
    transition: transform 0.3s;
}

.dropdown-content {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    /* Slightly more opaque */
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    width: 650px;
    /* Fixed wider width */
    min-width: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border-radius: 24px;
    padding: 20px;
    top: calc(100% + 20px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    /* Start slightly down */
    z-index: 1001;
    border: 1px solid rgba(255, 255, 255, 0.6);
    display: grid;
    /* Always grid */
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Prevent clicks when hidden */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Transparent bridge */
.dropdown-content::before {
    content: '';
    position: absolute;
    top: -25px;
    left: 0;
    width: 100%;
    height: 25px;
    background: transparent;
}

/* Arrow Tip */
.dropdown-content::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 16px;
    height: 16px;
    background: white;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    border-left: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.02);
}

/* Desktop Hover Effects - Only apply on large screens */
@media (min-width: 901px) {
    .dropdown:hover .dropdown-content {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
        /* Smooth slide up */
        top: calc(100% + 20px);
    }

    .dropdown:hover .dropdown-toggle i {
        transform: rotate(180deg);
    }
}

.dropdown-item {
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    /* Align to top for better description wrapping */
    gap: 16px;
    padding: 16px;
    /* More padding */
    border-radius: 16px;
    /* Smooth corners */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.dropdown-item:hover {
    background: #f8fafc;
    border-color: #f1f5f9;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.dropdown-item:hover .dropdown-title {
    color: var(--primary);
}

.dropdown-item:hover .dropdown-icon {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.dropdown-item>div:last-child {
    flex: 1;
}

.dropdown-item-content {
    flex: 1;
    /* Keep for backward compatibility if class added */
}

/* Nav Link Enhancement */
.nav-links a.nav-link::after {
    height: 3px;
    bottom: -2px;
    background: var(--gradient-accent);
    border-radius: 20px;
}

.dropdown-title {
    font-weight: 700;
    color: #1e293b;
    font-size: 15.2px;
    margin-bottom: 3px;
    letter-spacing: -0.2px;
    transition: color 0.2s ease;
}

.dropdown-desc {
    font-size: 12.8px;
    color: #64748b;
    line-height: 1.4;
}

.dropdown-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 20px;
    background: #f1f5f9;
    /* Default fallback */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* Softer shadow */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Service Icon Colors */
.icon-blue {
    background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
}

.icon-blue i {
    color: #3b82f6;
}

.icon-yellow {
    background: linear-gradient(135deg, #fef3c7 0%, #fef9e7 100%);
}

.icon-yellow i {
    color: #f59e0b;
}

.icon-green {
    background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
}

.icon-green i {
    color: #10b981;
}

.icon-purple {
    background: linear-gradient(135deg, #ddd6fe 0%, #ede9fe 100%);
}

.icon-purple i {
    color: var(--primary);
}

.icon-pink {
    background: linear-gradient(135deg, #fbcfe8 0%, #fce7f3 100%);
}

.icon-pink i {
    color: var(--accent);
}

.icon-orange {
    background: linear-gradient(135deg, #fed7aa 0%, #fef3e2 100%);
}

.icon-orange i {
    color: #f97316;
}

.icon-sky {
    background: linear-gradient(135deg, #bfdbfe 0%, #dbeafe 100%);
}

.icon-sky i {
    color: #0ea5e9;
}

/* Custom Scrollbar for Dropdown */
.dropdown-content::-webkit-scrollbar {
    width: 6px;
}

.dropdown-content::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.dropdown-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.dropdown-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

.btn-primary {
    background: var(--gradient-cta);
    color: white;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    font-size: 15.2px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4) !important;
}

#mobile-overlay {
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    transition: opacity 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* Footer Section */
footer {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #e2e8f0;
    position: relative;
    overflow: hidden;
}

.footer-deco-1 {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(33, 61, 126, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.footer-deco-2 {
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 127, 0, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.footer-container {

    position: relative;
    z-index: 1;
}

.footer-content {
    padding: 64px 0 32px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.1);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 48px;
}

.footer-about {
    max-width: 350px;
}

.footer-logo {
    color: white;
    font-size: 28.8px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    text-decoration: none;
}

.footer-logo-icon {
    width: 45px;
    height: 45px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo-icon i {
    color: white;
    font-size: 20.8px;
}

.footer-desc {
    color: #cbd5e1;
    line-height: 1.8;
    font-size: 15.2px;
    margin-bottom: 24px;
}

.trust-badges {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.trust-badge {
    background: rgba(33, 61, 126, 0.15);
    padding: 8px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.trust-badge-blue {
    background: rgba(59, 130, 246, 0.15);
}

.trust-badge span {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 600;
}

.social-links-header {
    color: white;
    font-size: 16px;
    margin-bottom: 16px;
    font-weight: 600;
}

.social-icons-footer {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    text-decoration: none;
}

.social-link {
    transform: translateY(-3px);
    color: white !important;
}

.social-facebook {
    background: #1877F2;
    color: white;
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
}

.social-twitter {
    background: #000000;
    color: white;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.social-linkedin {
    background: #0A66C2;
    color: white;
    box-shadow: 0 4px 12px rgba(10, 102, 194, 0.3);
}

.social-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
    box-shadow: 0 4px 12px rgba(220, 39, 67, 0.3);
    color: white;
}

.social-youtube {
    background: #ff0000;
    color: white;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.footer-links h4 {
    color: white;
    font-size: 17px;
    margin-bottom: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-link {
    color: #cbd5e1;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    font-size: 15.2px;
}

.footer-link i {
    font-size: 11.2px;
    color: var(--accent);
}

.footer-link.blue-icon i {
    color: #3b82f6;
}

.footer-links a:hover {
    color: white !important;
    padding-left: 8px;
}

.contact-list {
    margin-bottom: 32px;
}

.contact-item {
    margin-bottom: 16px;
    display: flex;
    align-items: start;
    gap: 12px;
}

.contact-icon {
    width: 35px;
    height: 35px;
    background: rgba(255, 127, 0, 0.15);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon i {
    color: var(--accent);
    font-size: 13px;
}

.contact-text {
    color: #e2e8f0;
    text-decoration: none;
    font-size: 15.2px;
    display: block;
}

.contact-sub-text {
    color: #94a3b8;
    font-size: 12.8px;
}

.contact-address {
    color: #cbd5e1;
    font-size: 15.2px;
    line-height: 1.6;
}

.footer-newsletter {
    background: rgba(33, 61, 126, 0.1);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid rgba(33, 61, 126, 0.2);
}

.newsletter-title {
    color: white;
    font-size: 15.2px;
    margin-bottom: 12px;
    font-weight: 600;
}

.newsletter-desc {
    color: #cbd5e1;
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.6;
}

.newsletter-form {
    display: flex;
    gap: 8px;
}

.newsletter-input {
    flex: 1;
    padding: 12px;
    border-radius: 8px;
    border: 1px solid rgba(226, 232, 240, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: white;
    font-size: 13px;
}

.newsletter-btn {
    background: var(--gradient-cta);
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s;
}

.copyright {
    padding: 32px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.copyright p {
    color: #94a3b8;
    font-size: 13px;
    margin: 0;
}

.copyright strong {
    color: #e2e8f0;
}

.made-with {
    color: #94a3b8;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.whats-app-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transition: 0.3s;
}

/* Media Queries */
@media (max-width: 900px) {
    .top-header {
        display: none;
    }

    body {
        overflow-x: clip;
    }

    .container {
        padding: 0 16px;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .footer-about {
        max-width: 100% !important;
    }

    .copyright {
        flex-direction: column;
        text-align: center;
    }

    /* Hero Feature Cards - Mobile */
    .hero-grid-sub {
        gap: 32px;
        margin-top: 32px;
    }

    .hero-feature-icon {
        font-size: 32px;
    }

    .hero-feature-title {
        font-size: 13px;
    }
}

@media (min-width: 901px) and (max-width: 1024px) {
    .nav-links {
        gap: 20px !important;
    }

    .top-header>div>div:first-child {
        gap: 16px !important;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    #main-header {
        padding: 12px 0;
    }

    .logo {
        font-size: 20px !important;
    }

    .logo-icon {
        width: 40px !important;
        height: 40px !important;
    }

    .logo-icon i {
        font-size: 19.2px !important;
    }
}

/* =========================================
   Refactored Home Page Styles
   ========================================= */

/* Hero Section */
.hero-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f8fafc 100%);
}

.hero-slider-container {
    position: relative;
    height: 600px;
}

.hero-slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    z-index: 2;
}

.hero-slide-container {
    height: 100%;
    display: flex;
    align-items: center;
}

.hero-content-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 64px;
    align-items: center;
    width: 100%;
}

.hero-tag-container {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 50px;
    margin-bottom: 24px;
}

.hero-tag-blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(96, 165, 250, 0.1) 100%);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.hero-tag-orange {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.hero-tag-dark {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.1) 0%, rgba(30, 41, 59, 0.1) 100%);
    border: 1px solid rgba(15, 23, 42, 0.2);
}

.hero-tag-text {
    margin: 0;
    font-size: 13px;
}

.hero-tag-highlight {
    font-weight: 700;
}

.hero-tag-highlight-1 {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-tag-highlight-2 {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-tag-highlight-3 {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-accent {
    color: var(--accent);
}

.text-cta {
    color: var(--cta);
}

.text-primary {
    color: var(--primary);
}

.text-white {
    color: white;
}

.hero-title {
    font-size: 56px;
    color: var(--primary);
    margin-bottom: 24px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -2px;
}

.hero-title-gradient-1 {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-title-gradient-2 {
    background: linear-gradient(135deg, var(--primary) 0%, var(--cta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-title-gradient-3 {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    font-size: 18px;
    color: var(--text-light);
    margin-bottom: 40px;
    max-width: 600px;
    line-height: 1.5;
}

.hero-btn-container {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hero-stats-container {
    margin-top: 48px;
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
}

.hero-stat-number {
    margin-bottom: 0;
    font-size: 40px;
    font-weight: 900;
    color: var(--primary);
}

.hero-stat-label {
    color: var(--text-light);
    font-weight: 600;
}

.hero-grid-sub {
    margin-top: 48px;
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
}

.hero-feature-card {
    text-align: center;
    flex: 1;
    min-width: 150px;
}

.hero-feature-card::before {
    display: none;
}

.hero-feature-card:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
}

.hero-feature-card-blue:hover,
.hero-feature-card-orange:hover,
.hero-feature-card-purple:hover {
    border-color: transparent;
    box-shadow: none;
}

.hero-feature-icon-wrapper {
    width: auto;
    height: auto;
    margin: 0 auto 12px;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    display: block;
}

.hero-feature-card:hover .hero-feature-icon-wrapper {
    transform: none;
}

.hero-icon-blue,
.hero-icon-orange,
.hero-icon-purple {
    background: none !important;
    box-shadow: none !important;
}

.hero-feature-card:hover .hero-icon-blue,
.hero-feature-card:hover .hero-icon-orange,
.hero-feature-card:hover .hero-icon-purple {
    box-shadow: none !important;
}

.hero-feature-icon {
    font-size: 40px;
    transition: all 0.3s ease;
    display: block;
    margin-bottom: 12px;
}

.hero-icon-blue .hero-feature-icon {
    color: #3b82f6;
}

.hero-icon-orange .hero-feature-icon {
    color: #f59e0b;
}

.hero-icon-purple .hero-feature-icon {
    color: #8b5cf6;
}

.hero-feature-title {
    font-size: 15.2px;
    font-weight: 600;
    color: var(--primary);
    margin: 0;
    position: relative;
    z-index: 1;
}

.hero-feature-desc {
    display: none;
}

.hero-feature-text {
    margin: 0;
    font-weight: 600;
    color: var(--primary);
    font-size: 13px;
}

.hero-trust-container {
    margin-top: 48px;
    padding: 32px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--accent);
}

.hero-trust-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.hero-trust-icon {
    font-size: 32px;
    color: var(--accent);
}

.hero-trust-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--primary);
}

.hero-trust-subtitle {
    margin: 0;
    color: var(--text-light);
    font-size: 13px;
}

.hero-trust-badges {
    display: flex;
    gap: 32px;
    margin-top: 24px;
}

.hero-trust-badge {
    flex: 1;
}

.hero-trust-badge p {
    margin: 0;
    font-size: 13px;
    color: var(--text-light);
}

.hero-image-wrapper {
    position: relative;
}

.hero-blob {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
}

.hero-blob-1 {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
}

.hero-blob-2 {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
}

.hero-blob-3 {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 70%);
}

.hero-image {
    width: 100%;
    height: 400px;
    /* Fixed height for consistency */
    object-fit: cover;
    /* Maintain aspect ratio */
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
}

.slider-dots-container {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slider-dot.active {
    width: 32px;
    background: var(--accent);
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
}

.slider-arrow-prev {
    left: 20px;
}

.slider-arrow-next {
    right: 20px;
}

.slider-arrow:hover {
    background: var(--accent);
}

.slider-arrow:hover i {
    color: white !important;
}

.slider-arrow i {
    color: var(--primary);
    font-size: 19.2px;
    transition: color 0.3s ease;
}

/* Services Section */
.services-section {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Section Titles */
.section-title {
    text-align: center;
    position: relative;
    width: 100%;
}

.section-title-margin {
    margin-bottom: 64px;
}

.section-pill-container {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.section-pill-purple {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.section-pill-text-purple {
    color: #8b5cf6;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-heading {
    font-size: 44px;
    font-weight: 800;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #1e293b 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-subheading {
    font-size: 17px;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 32px;
    margin-top: 48px;
}

.service-card {
    background: white;
    padding: 40px 32px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    border: 1px solid var(--border-light);
    position: relative;
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-8px);
}

.service-card-blue:hover {
    box-shadow: 0 12px 28px rgba(33, 61, 126, 0.15);
    border-color: var(--accent);
}

.service-card-orange:hover {
    box-shadow: 0 12px 28px rgba(255, 127, 0, 0.15);
    border-color: var(--cta);
}

.service-card-dark:hover {
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.15);
    border-color: var(--primary);
}

.service-card-bg-circle {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.bg-circle-blue {
    background: linear-gradient(135deg, rgba(33, 61, 126, 0.1) 0%, rgba(33, 61, 126, 0.05) 100%);
}

.bg-circle-orange {
    background: linear-gradient(135deg, rgba(255, 127, 0, 0.1) 0%, rgba(255, 127, 0, 0.05) 100%);
}

.bg-circle-dark {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.05) 100%);
}

.service-icon-container {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.service-icon-blue {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
}

.service-icon-orange {
    background: linear-gradient(135deg, var(--cta) 0%, var(--cta-hover) 100%);
}

.service-icon-dark {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

.service-card-title {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--primary);
}

.service-card-desc {
    color: var(--text-light);
    font-size: 15.2px;
    line-height: 1.7;
    margin-bottom: 24px;
}

.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15.2px;
    transition: all 0.3s ease;
}

.service-card-link:hover {
    gap: 12px;
}

/* Why Choose Us Section */
.why-choose-us-section {
    background: linear-gradient(135deg, #f0f6ff 0%, #f8fafc 60%, #fff4ee 100%);
    position: relative;
    overflow: hidden;
}

.why-choose-us-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0, 61, 165, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

.why-choose-deco-tr {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.07) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}

.why-choose-deco-bl {
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(0, 61, 165, 0.07) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
}

.section-pill-blue {
    background: linear-gradient(135deg, rgba(33, 61, 126, 0.1) 0%, rgba(44, 77, 160, 0.1) 100%);
    border: 1px solid rgba(33, 61, 126, 0.2);
}

.section-pill-text-blue {
    color: var(--primary);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-heading-blue {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 32px;
    margin-top: 48px;
}

.feature-item {
    text-align: center;
    padding: 32px;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.feature-item:hover {
    background: transparent;
}

.feature-item-cyan:hover {
    background: linear-gradient(135deg, rgba(33, 61, 126, 0.05) 0%, rgba(44, 77, 160, 0.05) 100%);
}

.feature-item-orange:hover {
    background: linear-gradient(135deg, rgba(255, 127, 0, 0.05) 0%, rgba(255, 170, 82, 0.05) 100%);
}

.feature-item-blue:hover {
    background: linear-gradient(135deg, rgba(11, 36, 71, 0.05) 0%, rgba(25, 55, 109, 0.05) 100%);
}

.feature-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon-cyan {
    background: linear-gradient(135deg, rgba(33, 61, 126, 0.1) 0%, rgba(44, 77, 160, 0.1) 100%);
}

.feature-icon-orange {
    background: linear-gradient(135deg, rgba(255, 127, 0, 0.1) 0%, rgba(255, 170, 82, 0.1) 100%);
}

.feature-icon-blue {
    background: linear-gradient(135deg, rgba(11, 36, 71, 0.1) 0%, rgba(25, 55, 109, 0.1) 100%);
}

.feature-title {
    font-weight: 700;
    margin-bottom: 8px;
}

.feature-text {
    font-size: 15.2px;
    color: var(--text-light);
    line-height: 1.6;
}

/* Dropdown Icon Colors */
.icon-blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.icon-yellow {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.icon-green {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.icon-purple {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.icon-pink {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

.icon-orange {
    background: rgba(255, 127, 0, 0.1);
    color: #ff7f00;
}

.icon-sky {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
}

/* Process Section */
.process-section {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    position: relative;
    overflow: hidden;
}

.process-deco-1 {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.process-deco-2 {
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.process-container {

    position: relative;
    z-index: 1;
}

.section-pill-lavender {
    background: linear-gradient(135deg, rgba(33, 61, 126, 0.2) 0%, rgba(255, 127, 0, 0.2) 100%);
    border: 1px solid rgba(33, 61, 126, 0.3);
}

.section-pill-text-lavender {
    color: var(--accent);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-heading-white {
    font-size: 44px;
    font-weight: 800;
    color: white;
    margin-bottom: 16px;
}

.section-subheading-slate {
    font-size: 17px;
    color: #cbd5e1;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 24px;
    margin-top: 48px;
}

.process-card {
    background: white;
    padding: 30px 24px 24px;
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border-top: 4px solid transparent;
}

.process-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.28);
}

.proc-orange { border-top-color: #FF6B00; }
.proc-blue   { border-top-color: #003DA5; }
.proc-purple { border-top-color: #8B3A9C; }

.proc-step-num {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
}

.proc-orange .proc-step-num { background: rgba(255, 107, 0, 0.1);   color: #FF6B00; }
.proc-blue   .proc-step-num { background: rgba(0, 61, 165, 0.1);    color: #003DA5; }
.proc-purple .proc-step-num { background: rgba(139, 58, 156, 0.1);  color: #8B3A9C; }

.proc-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.proc-icon i { color: white; font-size: 22px; }

.process-card:hover .proc-icon { transform: scale(1.1); }

.proc-icon-orange { background: linear-gradient(135deg, #FF6B00, #e55f00); box-shadow: 0 5px 16px rgba(255, 107, 0, 0.4); }
.proc-icon-blue   { background: linear-gradient(135deg, #003DA5, #0052d9); box-shadow: 0 5px 16px rgba(0, 61, 165, 0.4); }
.proc-icon-purple { background: linear-gradient(135deg, #8B3A9C, #a855c7); box-shadow: 0 5px 16px rgba(139, 58, 156, 0.4); }

.process-card:hover .proc-icon-orange { box-shadow: 0 10px 26px rgba(255, 107, 0, 0.55); }
.process-card:hover .proc-icon-blue   { box-shadow: 0 10px 26px rgba(0, 61, 165, 0.55); }
.process-card:hover .proc-icon-purple { box-shadow: 0 10px 26px rgba(139, 58, 156, 0.55); }

.process-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--primary);
}

.process-desc {
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.process-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.process-tag {
    font-size: 12px;
    padding: 4px 9px;
    border-radius: 4px;
    font-weight: 500;
}

/* Technology Section */
.technologies-section {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.section-pill-orange {
    background: linear-gradient(135deg, rgba(255, 127, 0, 0.1) 0%, rgba(255, 170, 82, 0.1) 100%);
    border: 1px solid rgba(255, 127, 0, 0.2);
}

.section-pill-text-orange {
    color: var(--accent);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-heading-orange {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tech-card-php:hover {
    box-shadow: 0 12px 24px rgba(119, 123, 180, 0.15);
    border-color: #777BB4;
}

.tech-card-laravel:hover {
    box-shadow: 0 12px 24px rgba(255, 45, 32, 0.15);
    border-color: #FF2D20;
}

.tech-card-react:hover {
    box-shadow: 0 12px 24px rgba(97, 218, 251, 0.15);
    border-color: #61DAFB;
}

.tech-card-vue:hover {
    box-shadow: 0 12px 24px rgba(66, 184, 131, 0.15);
    border-color: #42B883;
}

.tech-card-wp:hover {
    box-shadow: 0 12px 24px rgba(33, 117, 155, 0.15);
    border-color: #21759B;
}

.tech-card-android:hover {
    box-shadow: 0 12px 24px rgba(61, 220, 132, 0.15);
    border-color: #3DDC84;
}

.tech-card-ios:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    border-color: #000000;
}

.tech-card-aws:hover {
    box-shadow: 0 12px 24px rgba(255, 153, 0, 0.15);
    border-color: #FF9900;
}

.tech-card-node:hover {
    box-shadow: 0 12px 24px rgba(104, 160, 99, 0.15);
    border-color: #68A063;
}

.tech-card-mysql:hover {
    box-shadow: 0 12px 24px rgba(0, 117, 143, 0.15);
    border-color: #00758F;
}

.tech-card-docker:hover {
    box-shadow: 0 12px 24px rgba(33, 150, 243, 0.15);
    border-color: #2196F3;
}

.tech-card-git:hover {
    box-shadow: 0 12px 24px rgba(240, 80, 50, 0.15);
    border-color: #F05032;
}

.tech-info-box {
    margin-top: 52px;
    padding: 36px 40px;
    background: linear-gradient(135deg, #003DA5 0%, #061e5b 60%, #0a1240 100%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 61, 165, 0.35);
}

.tech-info-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

.tech-info-box-deco-l {
    position: absolute;
    left: -60px;
    top: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.tech-info-box-deco-r {
    position: absolute;
    right: -60px;
    bottom: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(139, 58, 156, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.tech-info-content {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 240px;
}

.tech-info-icon-wrap {
    width: 52px;
    height: 52px;
    background: rgba(255, 107, 0, 0.15);
    border: 1.5px solid rgba(255, 107, 0, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tech-info-icon-wrap i {
    font-size: 22px;
    color: #FFaa52;
}

.tech-info-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tech-info-title {
    color: white;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.tech-info-text {
    color: rgba(255, 255, 255, 0.62);
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

.tech-info-btn {
    background: linear-gradient(135deg, #FF6B00, #e55f00);
    color: white;
    padding: 12px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 14.5px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 4px 18px rgba(255, 107, 0, 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
    flex-shrink: 0;
}

.tech-info-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.45s ease;
}

.tech-info-btn:hover::before { left: 100%; }

.tech-info-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(255, 107, 0, 0.6);
    color: white;
}

.btn-margin-top {
    margin-top: 16px;
}

/* CTA Footer Section */
.cta-footer-section {
    text-align: center;
}

.cta-footer-title {
    color: white;
    margin-bottom: 16px;
}

.cta-footer-desc {
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto 32px;
}


.cta-btn-footer {
    font-size: 19.2px;
}

/* Icon Helpers */
.service-card-icon {
    font-size: 32px;
    color: white;
}

.tech-card-icon {
    font-size: 56px;
    margin-bottom: 16px;
    display: block;
}

.process-step-icon {
    font-size: 28px;
}

/* Additional Tech Cards */
.tech-card-vue:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(66, 184, 131, 0.2);
    border-color: #42B883;
}

.tech-card-wordpress:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(33, 117, 155, 0.2);
    border-color: #21759B;
}

.tech-card-android:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(61, 220, 132, 0.2);
    border-color: #3DDC84;
}

.tech-card-ios:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    border-color: #000000;
}

.tech-card-docker:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(33, 150, 243, 0.2);
    border-color: #2196F3;
}

.tech-card-git:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(240, 80, 50, 0.2);
    border-color: #F05032;
}

/* Text Colors for new Techs */
.text-vue {
    color: #42B883;
}

.text-wordpress {
    color: #21759B;
}

.text-android {
    color: #3DDC84;
}

.text-ios {
    color: #000000;
}

.text-docker {
    color: #2196F3;
}

.text-git {
    color: #F05032;
}

/* Main Tech Text Colors */
.text-php {
    color: #777BB4;
}

.text-laravel {
    color: #FF2D20;
}

.text-node {
    color: #68A063;
}

.text-react {
    color: #61DAFB;
}

.text-mysql {
    color: #00758F;
}

.text-aws {
    color: #FF9900;
}

/* Technologies Grid & Cards */
.technologies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: 16px;
    margin-top: 48px;
    /* max-width: 1000px; */
    margin-left: auto;
    margin-right: auto;
}

.tech-card {
    background: white;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    min-width: 0;
    transition: all 0.3s ease;
    border: 1px solid var(--border-light);
    cursor: pointer;
    position: relative;
}

.tech-card:hover {
    transform: translateY(-8px);
}

.tech-card-name {
    font-size: 15.2px;
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
}

.tech-card-desc {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 0;
}

/* CTA Footer Complete Styles */
.cta-footer-section {
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    color: white;
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
}

.cta-footer-title {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 24px;
    color: white;
}

.cta-footer-desc {
    font-size: 19.2px;
    opacity: 0.9;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: white;
}

.cta-btn-footer {
    padding: 12px 36px;
    border-radius: 50px;
    font-weight: 700;
    color: var(--primary) !important;
    background: white;
    font-size: 17px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.cta-btn-footer:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    background: #f8fafc;
}

/* New Hero Section Styles - User Friendly & Mobile Responsive */

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 25px;
    font-size: 13px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: fadeInUp 0.8s ease-out;
}

.hero-badge i {
    color: var(--accent-color);
    font-size: 16px;
}

.hero-stats-inline {
    display: flex;
    gap: 30px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.stat-inline {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.stat-inline strong {
    font-size: 32px;
    font-weight: 800;
    color: var(--accent-color);
    line-height: 1;
}

.stat-inline span {
    font-size: 14px;
    opacity: 0.9;
}

.hero-trust {
    display: flex;
    gap: 25px;
    margin-top: 25px;
    flex-wrap: wrap;
}

.hero-trust p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15.2px;
    opacity: 0.9;
}

.hero-trust i {
    color: var(--accent-color);
    font-size: 17px;
}

/* Phone Mockup */
.hero-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.phone-mockup {
    position: relative;
    animation: float 6s ease-in-out infinite;
}

.phone-frame {
    width: 280px;
    height: 560px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border-radius: 40px;
    padding: 15px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    position: relative;
}

.phone-frame::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 30px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.app-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    width: 100%;
}

.app-icon {
    aspect-ratio: 1;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28.8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    animation: iconPulse 3s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.app-icon:hover {
    transform: scale(1.1) rotate(5deg);
}

.app-icon:nth-child(1) {
    animation-delay: 0s;
}

.app-icon:nth-child(2) {
    animation-delay: 0.2s;
}

.app-icon:nth-child(3) {
    animation-delay: 0.4s;
}

.app-icon:nth-child(4) {
    animation-delay: 0.6s;
}

.app-icon:nth-child(5) {
    animation-delay: 0.8s;
}

.app-icon:nth-child(6) {
    animation-delay: 1s;
}

@keyframes iconPulse {

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

    50% {
        transform: scale(1.05);
    }
}

/* Platform Badges */
.platform-badges {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.platform-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    padding: 12px 24px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.platform-badge:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
}

.platform-badge i {
    font-size: 24px;
    color: var(--accent-color);
}

.platform-badge span {
    font-weight: 600;
    font-size: 15.2px;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .hero-slider-container {
        height: auto;
        min-height: 850px;
        /* Ensure enough height for stacked content */
    }

    .hero-slide {
        height: 100%;
    }

    .hero-slide-container {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    .hero-content-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    .hero-image-wrapper {
        order: -1;
        width: 100%;
        max-width: 500px;
        margin: 0 auto;
        padding-bottom: 32px;
    }

    .hero-image {
        height: 300px;
        /* Smaller height for mobile */
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-btn-container {
        justify-content: center;
    }

    .hero-stats-container {
        justify-content: center;
        margin-top: 32px;
        gap: 32px;
    }

    .slider-dots-container {
        bottom: 10px;
    }

    .phone-frame {
        width: 240px;
        height: 480px;
    }

    .app-icons {
        gap: 12px;
    }
}

@media (max-width: 767px) {
    .hero-title {
        font-size: 40px !important;
    }

    .hero-description {
        font-size: 16px !important;
    }

    .hero-slider-container {
        min-height: 900px;
    }

    .hero-stats-container {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 24px;
        justify-content: center;
    }

    .hero-stat-number {
        font-size: 32px;
    }

    .slider-arrow {
        width: 40px;
        height: 40px;
    }

    .slider-arrow-prev {
        left: 10px;
    }

    .slider-arrow-next {
        right: 10px;
    }

    .hero-cta {
        flex-direction: column;
        gap: 12px;
    }

    .hero-cta .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-trust {
        flex-direction: column;
        gap: 12px;
    }

    .phone-frame {
        width: 220px;
        height: 440px;
    }

    .platform-badges {
        gap: 10px;
    }

    /* Standard mobile section padding */
    .section-padding {
        padding: 30px 0;
    }

    .section-heading {
        font-size: 32px;
    }

    .section-title-margin {
        margin-bottom: 40px;
    }

    /* Grid Adjustments for Mobile */
    .services-grid,
    .features-grid,
    .process-grid,
    .technologies-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 32px;
    }

    .technologies-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 2 cols for technolgies usually looks better */
    }

    .tech-info-box {
        margin-top: 32px;
        padding: 24px;
    }
}

@media (max-width: 575px) {
    .hero-title {
        font-size: 32px !important;
    }

    .hero-slider-container {
        min-height: 800px;
        /* Adjust based on content density */
    }

    .hero-image-wrapper {
        width: 100%;
        margin-top: 16px;
    }

    .phone-frame {
        width: 200px;
        height: 400px;
    }

    .app-icon {
        font-size: 17px;
    }

    /* Mobile specific text sizes */
    .section-heading {
        font-size: 28px;
    }

    .section-subheading {
        font-size: 16px;
    }

    .cta-footer-title {
        font-size: 28px;
    }

    .cta-footer-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* Ensure consistent container padding */
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ============================================================
   REFACTORED UTILITY CLASSES — extracted from blade inline styles
   ============================================================ */

/* ── WhatsApp Floating Button ── */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #25D366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transition: 0.3s;
    text-decoration: none;
}

/* ── Top Header Bar ── */
.top-header-bar {
    background: linear-gradient(135deg, #003DA5 0%, #002d7a 100%);
    color: #e2e8f0;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 107, 0, 0.3);
}

.top-header-inner {

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.top-header-contact {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    align-items: center;
}

.top-header-link {
    color: #cbd5e1;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    transition: all 0.3s;
}

.top-header-link:hover {
    color: white;
}

.top-header-icon {
    color: #FF6B00;
}

.top-header-location {
    color: #cbd5e1;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-header-socials-wrap {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

.top-header-socials {
    display: flex;
    gap: 12px;
}

.top-social-link {
    color: #cbd5e1;
    font-size: 13px;
    transition: all 0.3s;
}

.top-social-link:hover {
    color: #FF6B00 !important;
    transform: translateY(-2px);
}

/* ── Main Header ── */
.main-header {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.header-container {}

.header-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.header-logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.logo-fallback {
    display: none;
    align-items: center;
    gap: 8px;
}

.logo-icon-box {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #003DA5 0%, #8B3A9C 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon-box i {
    color: white;
    font-size: 20.8px;
}

.logo-text-brand {
    font-size: 24px;
    font-weight: 800;
    color: #003DA5;
    font-family: 'Poppins', sans-serif;
}

.logo-text-brand span {
    color: #FF6B00;
}

.mobile-menu-btn {
    display: none;
    cursor: pointer;
    font-size: 24px;
    color: #1e293b;
    z-index: 1001;
}

/* ── Nav item ── */
.nav-item {
    position: relative;
}

.nav-drop-toggle {
    color: #475569;
    text-decoration: none;
    font-weight: 500;
    font-size: 15.2px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.nav-drop-toggle .fa-chevron-down {
    font-size: 11.2px;
    transition: transform 0.3s;
}

/* ── Dropdown Panels ── */
.dropdown-panel {
    display: none;
    position: absolute;
    background: white;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    border-radius: 16px;
    padding: 20px;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.dropdown-panel-services {
    width: 520px;
}

.dropdown-panel-products {
    width: 420px;
}

.dropdown-panel-header {
    padding: 0 8px 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.dropdown-panel-label {
    font-size: 11.2px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dropdown-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.dropdown-panel-footer {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
    text-align: center;
}

.dropdown-cta-link {
    font-size: 12.8px;
    color: #FF6B00;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* dd-icon color variants */
.dd-icon-blue {
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
}

.dd-icon-blue i {
    color: #3b82f6;
}

.dd-icon-amber {
    background: linear-gradient(135deg, #fef3c7, #fef9e7);
}

.dd-icon-amber i {
    color: #f59e0b;
}

.dd-icon-green {
    background: linear-gradient(135deg, #d1fae5, #ecfdf5);
}

.dd-icon-green i {
    color: #10b981;
}

.dd-icon-violet {
    background: linear-gradient(135deg, #ede9fe, #f5f3ff);
}

.dd-icon-violet i {
    color: #7c3aed;
}

.dd-icon-indigo {
    background: linear-gradient(135deg, #ddd6fe, #ede9fe);
}

.dd-icon-indigo i {
    color: #8b5cf6;
}

.dd-icon-orange {
    background: linear-gradient(135deg, #fed7aa, #fef3e2);
}

.dd-icon-orange i {
    color: #f97316;
}

.dd-icon-sky {
    background: linear-gradient(135deg, #bfdbfe, #dbeafe);
}

.dd-icon-sky i {
    color: #0ea5e9;
}

.dd-icon-emerald {
    background: linear-gradient(135deg, #dcfce7, #f0fdf4);
}

.dd-icon-emerald i {
    color: #16a34a;
}

.dd-icon-yellow {
    background: linear-gradient(135deg, #fef08a, #fef9c3);
}

.dd-icon-yellow i {
    color: #eab308;
}

.dd-icon-pink {
    background: linear-gradient(135deg, #fbcfe8, #fce7f3);
}

.dd-icon-pink i {
    color: #ec4899;
}

.dd-icon-red-orange {
    background: linear-gradient(135deg, #fed7aa, #fff7ed);
}

.dd-icon-red-orange i {
    color: #ea580c;
}

.dd-icon-blue-dark {
    background: linear-gradient(135deg, #bfdbfe, #dbeafe);
}

.dd-icon-blue-dark i {
    color: #1d4ed8;
}

.dd-icon-teal {
    background: linear-gradient(135deg, #a7f3d0, #d1fae5);
}

.dd-icon-teal i {
    color: #059669;
}

/* ── Header CTA button ── */
.header-cta-btn {
    background: linear-gradient(135deg, #FF6B00 0%, #e55f00 100%);
    color: white;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.35);
    font-size: 15.2px;
    white-space: nowrap;
}

.header-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 0, 0.5);
}

/* ── Mobile Overlay ── */
.mobile-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    transition: opacity 0.3s ease;
}

/* ══════════════════════════════════════════
   Footer — Unique Redesign
   ══════════════════════════════════════════ */

/* ── Base shell ── */
.site-footer {
    background: linear-gradient(160deg, #04133a 0%, #061e5b 55%, #0c0925 100%);
    color: #cbd5e1;
    position: relative;
    overflow: hidden;
}

/* ── Decorative blobs ── */
.footer-blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
    opacity: 0.35;
}

.footer-blob-1 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, #FF6B00 0%, transparent 70%);
    top: -120px;
    right: -100px;
}

.footer-blob-2 {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, #7c3aed 0%, transparent 70%);
    bottom: 60px;
    left: -80px;
}

.footer-blob-3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #0ea5e9 0%, transparent 70%);
    bottom: -60px;
    right: 30%;
}

/* ── Top newsletter strip ── */
.footer-top-strip {
    background: linear-gradient(90deg, rgba(255, 107, 0, 0.18) 0%, rgba(255, 107, 0, 0.06) 100%);
    border-bottom: 1px solid rgba(255, 107, 0, 0.25);
    padding: 18px 0;
    position: relative;
    z-index: 2;
}

.footer-strip-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 107, 0, 0.2);
    border: 1px solid rgba(255, 107, 0, 0.4);
    border-radius: 30px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #FF9B50;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.footer-strip-heading {
    color: #f1f5f9;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}

.footer-nl-form {
    display: flex;
    gap: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 107, 0, 0.35);
    background: rgba(255, 255, 255, 0.05);
}

.footer-nl-input {
    flex: 1;
    padding: 11.2px 16px;
    background: transparent;
    border: none;
    outline: none;
    color: #f1f5f9;
    font-size: 13px;
}

.footer-nl-input::placeholder {
    color: #64748b;
}

.footer-nl-btn {
    background: linear-gradient(135deg, #FF6B00, #e55f00);
    color: white;
    border: none;
    padding: 0 19.2px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s;
}

.footer-nl-btn:hover {
    background: linear-gradient(135deg, #e55f00, #c04f00);
}

/* ── Main body container ── */
.footer-body-container {
    position: relative;
    z-index: 2;
}

/* ── Brand column ── */
.footer-brand-col {
    padding-right: 24px;
}

.footer-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    text-decoration: none;
}

.footer-logo-img {
    height: 44px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.footer-logo-fallback {
    display: none;
    align-items: center;
    gap: 8px;
}

.footer-logo-text {
    font-size: 25px;
    font-weight: 800;
    color: white;
    font-family: 'Poppins', sans-serif;
}

.footer-logo-text span {
    color: #FF6B00;
}

.footer-desc {
    color: #94a3b8;
    line-height: 1.85;
    font-size: 13px;
    margin-bottom: 24px;
}

/* Trust chips */
.footer-trust-row {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.footer-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 12.48px;
    font-weight: 600;
}

.footer-trust-orange {
    background: rgba(255, 107, 0, 0.12);
    border: 1px solid rgba(255, 107, 0, 0.3);
    color: #FF9B50;
}

.footer-trust-purple {
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.3);
    color: #a78bfa;
}

/* Social icons */
.footer-follow-label {
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.footer-socials {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.fsoc {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15.2px;
    color: white;
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s;
    position: relative;
    overflow: hidden;
}

.fsoc::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.25s;
    border-radius: inherit;
}

.fsoc:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.fsoc:hover::before {
    opacity: 1;
}

.fsoc-fb {
    background: rgba(24, 119, 242, 0.2);
}

.fsoc-fb::before {
    background: #1877F2;
}

.fsoc-fb:hover {
    color: white;
}

.fsoc-li {
    background: rgba(10, 102, 194, 0.2);
}

.fsoc-li::before {
    background: #0A66C2;
}

.fsoc-li:hover {
    color: white;
}

.fsoc-ig {
    background: rgba(225, 48, 108, 0.2);
}

.fsoc-ig::before {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.fsoc-ig:hover {
    color: white;
}

.fsoc-yt {
    background: rgba(255, 0, 0, 0.18);
}

.fsoc-yt::before {
    background: #FF0000;
}

.fsoc-yt:hover {
    color: white;
}

.fsoc i {
    position: relative;
    z-index: 1;
}

/* ── Links columns ── */
.footer-links-col {
    padding-top: 4px;
}

.footer-col-title {
    color: white;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 9px;
    letter-spacing: 0.01em;
}

.footer-col-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.8px;
    flex-shrink: 0;
}

.footer-col-icon-orange {
    background: rgba(255, 107, 0, 0.18);
    color: #FF6B00;
}

.footer-col-icon-purple {
    background: rgba(124, 58, 237, 0.18);
    color: #a78bfa;
}

.footer-col-icon-teal {
    background: rgba(20, 184, 166, 0.18);
    color: #2dd4bf;
}

.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-list li {
    margin-bottom: 9px;
}

.footer-nav-list a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 14.08px;
    display: flex;
    align-items: center;
    gap: 7.2px;
    transition: color 0.2s, padding-left 0.2s;
}

.footer-nav-list a i {
    font-size: 10px;
    color: #FF6B00;
    transition: transform 0.2s;
}

.footer-nav-list a:hover {
    color: #f1f5f9;
    padding-left: 4px;
}

.footer-nav-list a:hover i {
    transform: translateX(2px);
}

.footer-nav-purple a i {
    color: #a78bfa;
}

/* ── Contact column ── */
.footer-contact-col {
    padding-top: 4px;
}

.footer-contact-items {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 17px;
}

.footer-ci-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 107, 0, 0.12);
    border: 1px solid rgba(255, 107, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FF6B00;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 2px;
    transition: background 0.25s;
}

.footer-contact-item:hover .footer-ci-icon {
    background: rgba(255, 107, 0, 0.25);
}

.footer-ci-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-ci-main {
    color: #e2e8f0;
    font-size: 14.08px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-ci-main:hover {
    color: #FF9B50;
}

.footer-ci-sub {
    color: #94a3b8;
    font-size: 12.8px;
    text-decoration: none;
}

.footer-ci-note {
    color: #64748b;
    font-size: 12.16px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

/* CTA button */
.footer-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #FF6B00, #e55f00);
    color: white !important;
    text-decoration: none;
    padding: 9px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    transition: transform 0.25s, box-shadow 0.25s;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3);
}

.footer-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 107, 0, 0.45);
    color: white !important;
}

/* ── Decorative divider ── */
.footer-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}

.footer-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

.footer-divider-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 107, 0, 0.5);
}

.footer-divider-brand {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 107, 0, 0.12);
    border: 1px solid rgba(255, 107, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.2px;
    font-weight: 800;
    color: #FF9B50;
    letter-spacing: 0.05em;
}

/* ── Bottom bar ── */
.footer-bottom-bar {
    border-top: none;
}

.footer-copy {
    color: #94a3b8;
    font-size: 13px;
}

.footer-copy strong {
    color: #e2e8f0;
}

.footer-made {
    color: #94a3b8;
    font-size: 13.12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.footer-heart {
    color: #ef4444;
    animation: footer-heartbeat 1.4s ease-in-out infinite;
}

@keyframes footer-heartbeat {

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

    50% {
        transform: scale(1.3);
    }
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .footer-brand-col {
        padding-right: 0;
    }

    .footer-body-container .row.gy-5 {
        row-gap: 32px !important;
    }

    .footer-top-strip .col-md-5 {
        margin-top: 12px;
    }

    .footer-bottom-bar {
        text-align: center;
    }

    .footer-bottom-bar [class*="col-md"] {
        text-align: center !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .footer-brand-col {
        padding-right: 0;
    }
}

/* ── Home Hero Section ── */
.home-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #04133a 0%, #061e5b 50%, #0a1240 100%);
    padding: 80px 0 0;
    color: white;
}

.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

.home-hero::after {
    content: '';
    position: absolute;
    top: 40%;
    left: 30%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(0, 100, 220, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    animation: hero-blob-drift 12s ease-in-out infinite 2s;
}

.home-hero-deco-tr {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.18) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
    animation: hero-blob-drift 8s ease-in-out infinite;
}

.home-hero-deco-bl {
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(139, 58, 156, 0.2) 0%, transparent 65%);
    border-radius: 50%;
    pointer-events: none;
    animation: hero-blob-drift 10s ease-in-out infinite reverse;
}

@keyframes hero-blob-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(20px, -15px) scale(1.05); }
    66%       { transform: translate(-10px, 10px) scale(0.97); }
}

.home-hero-container {
    position: relative;
    z-index: 1;
}

.home-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: center;
}

.home-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    margin-bottom: 28px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
}

.home-hero-badge-dot {
    width: 8px;
    height: 8px;
    background: #FF6B00;
    border-radius: 50%;
    display: inline-block;
    animation: blink 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(255, 107, 0, 0.8);
}

.home-hero-badge-text {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.home-hero-h1 {
    font-size: 52px;
    font-weight: 900;
    color: white;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -1.5px;
    font-family: 'Poppins', sans-serif;
}

.home-hero-h1 span {
    color: #FF6B00;
    position: relative;
    display: inline-block;
}

.home-hero-h1 span::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #FF6B00, #FFaa52);
    border-radius: 2px;
}

.home-hero-p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 32px;
    max-width: 560px;
    line-height: 1.8;
}

.home-hero-p strong {
    color: #FFaa52;
    font-weight: 700;
}

.hero-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.btn-hero-primary {
    background: linear-gradient(135deg, #FF6B00 0%, #e55f00 100%);
    color: white;
    padding: 14px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 6px 24px rgba(255, 107, 0, 0.5);
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-hero-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.5s ease;
}

.btn-hero-primary:hover::before {
    left: 100%;
}

.btn-hero-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(255, 107, 0, 0.65);
    color: white;
}

.btn-hero-outline {
    background: rgba(255, 255, 255, 0.07);
    color: white;
    padding: 14px 32px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    font-size: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.btn-hero-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.55);
    color: white;
    transform: translateY(-3px);
}

.hero-trust-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.hero-trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-trust-item i {
    color: #FF6B00;
    font-size: 15px;
    filter: drop-shadow(0 0 4px rgba(255, 107, 0, 0.5));
}

.hero-trust-item span {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

.home-hero-right {
    position: relative;
}

.home-hero-right-deco {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.home-hero-img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 1;
}

.hero-stat-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.97);
    padding: 14px 22px;
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
    z-index: 2;
    backdrop-filter: blur(12px);
    animation: hero-card-float 4s ease-in-out infinite;
}

.hero-stat-card-1 {
    bottom: -20px;
    left: -20px;
    border-left: 4px solid #FF6B00;
    animation-delay: 0s;
}

.hero-stat-card-2 {
    top: 20px;
    right: -20px;
    border-left: 4px solid #8B3A9C;
    animation-delay: 2s;
}

@keyframes hero-card-float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-8px); }
}

.hero-stat-num {
    font-size: 28.8px;
    font-weight: 900;
    color: #003DA5;
    line-height: 1;
}

.hero-stat-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    margin-top: 3px;
}

/* ── WhatsApp CTA Bar ── */
.wa-cta-bar {
    background: rgba(0, 0, 0, 0.25);
    margin-top: 64px;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
}

.wa-cta-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    text-align: center;
}

.wa-cta-text {
    color: rgba(255, 255, 255, 0.88);
    font-size: 15.2px;
    font-weight: 500;
}

.btn-wa {
    background: #25D366;
    color: white;
    padding: 9px 26px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: all 0.3s;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
}

.btn-wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(37, 211, 102, 0.55);
    color: white;
}

.btn-call-outline {
    color: white;
    padding: 9px 26px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    transition: all 0.3s;
    background: transparent;
}

.btn-call-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.6);
    color: white;
    transform: translateY(-2px);
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* ── Section Badge / Pill ── */
.section-badge {
    display: inline-block;
    padding: 5px 20px;
    border-radius: 50px;
    margin-bottom: 16px;
}

.section-badge-purple {
    background: rgba(139, 58, 156, 0.08);
    border: 1px solid rgba(139, 58, 156, 0.2);
}

.section-badge-purple span {
    color: #8B3A9C;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-badge-orange {
    background: rgba(255, 107, 0, 0.08);
    border: 1px solid rgba(255, 107, 0, 0.2);
}

.section-badge-orange span {
    color: #FF6B00;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-badge-blue span {
    color: #003DA5;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section-title-h2 {
    font-size: 44px;
    font-weight: 800;
    color: #003DA5;
    margin-bottom: 16px;
    position: relative;
}

.section-title-h2 .accent {
    color: #FF6B00;
}

.section-title-h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, #FF6B00, #FFaa52);
    border-radius: 2px;
    margin: 12px auto 0;
}

.section-title-p {
    font-size: 17px;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}

/* ── Service Cards Grid (Home) ── */
.home-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 28px;
    margin-top: 48px;
}

.svc-card {
    padding: 36px 28px;
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid #e2e8f0;
    position: relative;
    overflow: hidden;
    background: white;
}

.svc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    transition: background 0.35s ease;
    border-radius: 18px 18px 0 0;
}

.svc-card:hover {
    transform: translateY(-8px);
}

.svc-card-purple:hover::before  { background: linear-gradient(90deg, #8B3A9C, #a855c7); }
.svc-card-orange:hover::before  { background: linear-gradient(90deg, #FF6B00, #FFaa52); }
.svc-card-dark-blue:hover::before { background: linear-gradient(90deg, #003DA5, #0052d9); }

.svc-card-blue {
    background: linear-gradient(135deg, #003DA5 0%, #061e5b 100%);
    box-shadow: 0 10px 32px rgba(0, 61, 165, 0.28);
    border: none;
}

.svc-card-blue::before {
    background: linear-gradient(90deg, #FF6B00, #FFaa52);
}

.svc-card-blue:hover {
    box-shadow: 0 20px 48px rgba(0, 61, 165, 0.4);
}

.svc-card-purple:hover {
    box-shadow: 0 14px 32px rgba(139, 58, 156, 0.18);
    border-color: rgba(139, 58, 156, 0.35);
}

.svc-card-orange:hover {
    box-shadow: 0 14px 32px rgba(255, 107, 0, 0.18);
    border-color: rgba(255, 107, 0, 0.35);
}

.svc-card-dark-blue:hover {
    box-shadow: 0 14px 32px rgba(0, 61, 165, 0.18);
    border-color: rgba(0, 61, 165, 0.35);
}

.svc-card-deco {
    position: absolute;
    top: -30px;
    right: -30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    transition: transform 0.4s ease;
}

.svc-card:hover .svc-card-deco {
    transform: scale(1.3);
}

.svc-card-blue .svc-card-deco {
    background: radial-gradient(circle, rgba(255, 107, 0, 0.2) 0%, transparent 70%);
    width: 130px;
    height: 130px;
}

.svc-card-purple .svc-card-deco {
    background: radial-gradient(circle, rgba(139, 58, 156, 0.1) 0%, transparent 70%);
}

.svc-card-orange .svc-card-deco {
    background: radial-gradient(circle, rgba(255, 107, 0, 0.1) 0%, transparent 70%);
}

.svc-card-dark-blue .svc-card-deco {
    background: radial-gradient(circle, rgba(0, 61, 165, 0.1) 0%, transparent 70%);
}

.svc-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: linear-gradient(135deg, #FF6B00, #e55f00);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 10px rgba(255, 107, 0, 0.35);
}

.svc-card-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    animation: blink 1.5s ease-in-out infinite;
}

.svc-icon-wrap {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.svc-card:hover .svc-icon-wrap {
    transform: scale(1.08);
}

.svc-icon-white {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.svc-card-blue:hover .svc-icon-white {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.svc-icon-purple {
    background: linear-gradient(135deg, #8B3A9C 0%, #a855c7 100%);
    box-shadow: 0 4px 14px rgba(139, 58, 156, 0.3);
}

.svc-icon-orange {
    background: linear-gradient(135deg, #FF6B00 0%, #e55f00 100%);
    box-shadow: 0 4px 14px rgba(255, 107, 0, 0.3);
}

.svc-icon-blue {
    background: linear-gradient(135deg, #003DA5 0%, #0052d9 100%);
    box-shadow: 0 4px 14px rgba(0, 61, 165, 0.3);
}

.svc-icon-wrap i {
    font-size: 26px;
    color: white;
}

.svc-card-h3-white {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: white;
    line-height: 1.3;
}

.svc-card-h3-blue {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #1e293b;
    line-height: 1.3;
}

.svc-card-p-white {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14.5px;
    line-height: 1.75;
    margin-bottom: 24px;
}

.svc-card-p-gray {
    color: #64748b;
    font-size: 14.5px;
    line-height: 1.75;
    margin-bottom: 24px;
}

.svc-card-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: 14.5px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.svc-card-link i {
    transition: transform 0.3s ease;
}

.svc-card-link:hover {
    gap: 11px;
}

.svc-card-link:hover i {
    transform: translateX(3px);
}

.svc-card-link-orange { color: #FF6B00; }
.svc-card-link-purple { color: #8B3A9C; }
.svc-card-link-blue   { color: #003DA5; }

/* ── Products Section ── */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 28px;
}

.product-card {
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    background: white;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.product-card:hover {
    transform: translateY(-8px);
}

.product-card-blue:hover {
    border-color: rgba(0, 61, 165, 0.3);
    box-shadow: 0 22px 50px rgba(0, 61, 165, 0.18);
}

.product-card-purple:hover {
    border-color: rgba(139, 58, 156, 0.3);
    box-shadow: 0 22px 50px rgba(139, 58, 156, 0.18);
}

.product-card-orange:hover {
    border-color: rgba(255, 107, 0, 0.3);
    box-shadow: 0 22px 50px rgba(255, 107, 0, 0.18);
}

.product-card-dark-blue:hover {
    border-color: rgba(0, 61, 165, 0.3);
    box-shadow: 0 22px 50px rgba(0, 61, 165, 0.18);
}

.product-card-header {
    padding: 28px 28px 24px;
    position: relative;
    overflow: hidden;
}

.product-card-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

.product-card-header::after {
    content: '';
    position: absolute;
    left: -20px;
    top: -20px;
    width: 90px;
    height: 90px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.product-card-header-deco {
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 130px;
    height: 130px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: transform 0.4s ease;
}

.product-card:hover .product-card-header-deco {
    transform: scale(1.25);
}

.product-header-blue   { background: linear-gradient(135deg, #003DA5 0%, #061e5b 100%); }
.product-header-purple { background: linear-gradient(135deg, #8B3A9C 0%, #5a1a6e 100%); }
.product-header-orange { background: linear-gradient(135deg, #FF6B00 0%, #c04a00 100%); }
.product-header-navy   { background: linear-gradient(135deg, #1e3a5f 0%, #003DA5 100%); }

.product-header-icon-wrap {
    width: 54px;
    height: 54px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.product-card:hover .product-header-icon-wrap {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.product-header-icon {
    font-size: 24px;
    color: white;
    display: block;
}

.product-header-h3 {
    color: white;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    position: relative;
    z-index: 1;
    line-height: 1.3;
}

.product-header-p {
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    margin: 6px 0 0;
    position: relative;
    z-index: 1;
}

.product-card-body {
    padding: 22px 24px 26px;
    background: #fafbfc;
}

.product-features {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}

.product-features li {
    padding: 9px 0;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #475569;
    font-weight: 500;
}

.product-features li:last-child {
    border-bottom: none;
}

.pf-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    flex-shrink: 0;
    color: white;
}

.pf-check-blue   { background: linear-gradient(135deg, #003DA5, #0052d9); }
.pf-check-purple { background: linear-gradient(135deg, #8B3A9C, #a855c7); }
.pf-check-orange { background: linear-gradient(135deg, #FF6B00, #e55f00); }

.btn-product-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: white;
    padding: 13px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    font-size: 14.5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-product-demo::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.45s ease;
}

.btn-product-demo:hover::before { left: 100%; }

.btn-product-demo i {
    transition: transform 0.3s ease;
}

.btn-product-demo:hover {
    transform: translateY(-2px);
    color: white;
}

.btn-product-demo:hover i { transform: translateX(4px); }

.product-card-blue     .btn-product-demo { background: linear-gradient(135deg, #FF6B00, #e55f00);   box-shadow: 0 4px 16px rgba(255,107,0,0.3); }
.product-card-blue     .btn-product-demo:hover { box-shadow: 0 8px 24px rgba(255,107,0,0.5); }
.product-card-purple   .btn-product-demo { background: linear-gradient(135deg, #8B3A9C, #6d2b7a);   box-shadow: 0 4px 16px rgba(139,58,156,0.3); }
.product-card-purple   .btn-product-demo:hover { box-shadow: 0 8px 24px rgba(139,58,156,0.5); }
.product-card-orange   .btn-product-demo { background: linear-gradient(135deg, #FF6B00, #c04a00);   box-shadow: 0 4px 16px rgba(255,107,0,0.3); }
.product-card-orange   .btn-product-demo:hover { box-shadow: 0 8px 24px rgba(255,107,0,0.5); }
.product-card-dark-blue .btn-product-demo { background: linear-gradient(135deg, #003DA5, #061e5b); box-shadow: 0 4px 16px rgba(0,61,165,0.3); }
.product-card-dark-blue .btn-product-demo:hover { box-shadow: 0 8px 24px rgba(0,61,165,0.5); }

/* ── Contact Page ── */
.contact-hero {
    background: linear-gradient(135deg, #003DA5 0%, #8B3A9C 100%);
    color: white;
    padding: 80px 0 112px;
    text-align: center;
}

.contact-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 107, 0, 0.2);
    color: #FF6B00;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12.8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 107, 0, 0.3);
}

.contact-hero-badge i {
    font-size: 6px;
}

.contact-hero-h1 {
    font-size: 36px;
    font-weight: 900;
    color: white;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.contact-hero-p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16.8px;
    max-width: 500px;
    margin: 0 auto;
}

.contact-main-section {
    margin-top: -56px;
    padding-bottom: 80px;
}

.contact-main-container {
    max-width: 1100px;
}

.contact-grid {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
}

.contact-form-side {
    padding: 44px;
}

.contact-form-h3 {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 6px;
}

.contact-form-p {
    color: #64748b;
    font-size: 13px;
    margin-bottom: 32px;
}

.form-group {
    margin-bottom: 20px;
}

.form-label {
    font-weight: 600;
    font-size: 14.08px;
    color: #374151;
    display: block;
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15.2px;
    outline: none;
    transition: border 0.2s;
}

.form-input:focus {
    border-color: #003DA5;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.form-select {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15.2px;
    outline: none;
    background: white;
    transition: border 0.2s;
}

.form-select:focus {
    border-color: #003DA5;
}

.form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15.2px;
    outline: none;
    resize: vertical;
    transition: border 0.2s;
}

.form-textarea:focus {
    border-color: #003DA5;
}

.form-submit-btn {
    width: 100%;
    background: linear-gradient(135deg, #FF6B00, #e55f00);
    color: white;
    padding: 13px;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.35);
}

.form-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 107, 0, 0.5);
}

.contact-info-side {
    background: linear-gradient(160deg, #003DA5 0%, #8B3A9C 100%);
    padding: 44px;
    color: white;
}

.contact-info-h3 {
    font-size: 20.8px;
    font-weight: 800;
    color: white;
    margin-bottom: 6px;
}

.contact-info-p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14.08px;
    margin-bottom: 32px;
}

.contact-info-items {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.contact-info-icon {
    width: 42px;
    height: 42px;
    background: rgba(255, 107, 0, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255, 107, 0, 0.3);
}

.contact-info-icon i {
    color: #FF6B00;
}

.contact-info-label {
    font-weight: 700;
    color: white;
    font-size: 13px;
    margin-bottom: 4.8px;
}

.contact-info-val {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    line-height: 1.6;
}

/* ── Service page hero (generic) ── */
.service-hero {
    background: linear-gradient(135deg, #003DA5 0%, #002d7a 55%, #1a1a4e 100%);
    padding: 80px 0 64px;
    position: relative;
    overflow: hidden;
}

.service-hero-deco-tr {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.service-hero-deco-bl {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.service-hero-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

.service-hero-container {
    position: relative;
    z-index: 1;
}

.service-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 64px;
    align-items: center;
}

.service-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 107, 0, 0.15);
    backdrop-filter: blur(10px);
    padding: 9px 20px;
    border-radius: 50px;
    margin-bottom: 28px;
    border: 1px solid rgba(255, 107, 0, 0.35);
}

.service-hero-badge-dot {
    width: 8px;
    height: 8px;
    background: #FF6B00;
    border-radius: 50%;
    display: inline-block;
    animation: blink 1.5s ease-in-out infinite;
}

.service-hero-badge-text {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.9);
}

.service-hero-h1 {
    font-size: 49px;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 24px;
    color: white;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -1px;
}

.service-hero-h1 span {
    color: #FF6B00;
}

.service-hero-p {
    font-size: 17.92px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.8;
    margin-bottom: 32px;
    max-width: 590px;
}

.service-hero-p strong {
    color: white;
}

.service-feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 40px;
}

.service-feat-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.service-feat-item i {
    color: #FF6B00;
    font-size: 13px;
    flex-shrink: 0;
}

.service-hero-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.btn-service-cta {
    background: linear-gradient(135deg, #FF6B00 0%, #e55f00 100%);
    color: white;
    padding: 15.2px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    box-shadow: 0 4px 20px rgba(255, 107, 0, 0.4);
    transition: all 0.3s;
}

.btn-service-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(255, 107, 0, 0.6);
}

.btn-whatsapp-cta {
    background: #25D366;
    color: white;
    padding: 15.2px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    transition: all 0.3s;
}

.btn-whatsapp-cta:hover {
    transform: translateY(-2px);
}

.service-hero-stats {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.service-hero-stat-num {
    font-size: 28.8px;
    font-weight: 900;
    color: #FF6B00;
    line-height: 1;
}

.service-hero-stat-label {
    font-size: 13.12px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}

.service-hero-card {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 32px;
    position: relative;
    z-index: 1;
}

/* ── About Page ── */
.about-hero-stat-card-glass {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.about-hero-stat-num-orange {
    color: #FF6B00;
}

.about-hero-stat-label-light {
    color: rgba(255, 255, 255, 0.75);
}

.about-btn-start {
    background: #FF6B00;
    color: white;
    padding: 13px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.about-btn-wa {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    padding: 13px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.about-trust-section {
    background: #f8fafc;
    padding: 50px 0;
    border-bottom: 1px solid #e2e8f0;
}

.about-trust-inner {
    max-width: 1200px;
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.about-trust-item {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #334155;
    font-weight: 600;
    font-size: 13px;
}

.about-trust-item i {
    color: #003DA5;
}

.about-trust-divider {
    width: 1px;
    height: 20px;
    background: #e2e8f0;
}

/* ── App.blade.php global responsive rules ── */
@media (min-width: 769px) and (max-width: 1024px) {

    .yt-grid,
    .reels-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .about-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 40px !important;
    }

    .stats-row {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .hero-content {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
        text-align: center !important;
    }

    .hero-image {
        order: -1;
    }

    .hero-btns {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    .about-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 13px !important;
        margin-top: 32px !important;
    }

    .yt-grid {
        grid-template-columns: 1fr !important;
    }

    .reels-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .reel-card {
        max-height: 280px !important;
    }

    .yt-header-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }

    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .process-grid {
        grid-template-columns: 1fr !important;
    }

    .tech-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 12px !important;
    }

    .technologies-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .seo-links {
        font-size: 12.8px !important;
        line-height: 1.8 !important;
    }

    footer form {
        flex-direction: column !important;
    }

    footer form input,
    footer form button {
        width: 100% !important;
    }

    .home-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    .home-hero-h1 {
        font-size: 35.2px !important;
        letter-spacing: -0.5px !important;
        color: white !important;
    }

    .contact-grid {
        grid-template-columns: 1fr !important;
    }

    .service-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
}

@media (max-width: 480px) {
    .reels-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .reel-card {
        max-height: 220px !important;
    }

    .stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .tech-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .about-trust-section {
        padding: 30px 0;
    }

    .bg-white-section {
        padding: 30px 0;
    }

    .bg-light-section {
        padding: 30px 0;
    }

    .bg-seo-section {
        padding: 30px 0;
    }

    .bg-cta-section {
        padding: 30px 0;
    }

    .bg-ig-section {
        padding: 30px 0;
    }
}

/* === Shared Inline Style Replacements === */

/* Containers */
.container-xl {}

.container-lg {
    max-width: 1300px;
}

.container-md {
    max-width: 1200px;
}

.container-sm {
    max-width: 1100px;
}

.container-xl-rel {
    position: relative;
    z-index: 1;
}

/* Spacing */
.mb-64px {
    margin-bottom: 64px;
}

.mb-48px {
    margin-bottom: 48px;
}

.p-32px {
    padding: 32px;
}

.mt-16px {
    margin-top: 16px;
}

.mr-8px {
    margin-right: 8px;
}

.mr-64px {
    margin-right: 6px;
}

.pb-48px {
    padding-bottom: 48px;
}

.pb-560px {
    padding-bottom: 56px;
}

/* Backgrounds */
.bg-white {
    background: white;
}

.bg-white-section {
    background: white;
    padding: 50px 0;
}

.bg-light-section {
    padding: 50px 0;
}

.bg-seo-section {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 50px 0;
}

.bg-gradient-light {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.bg-gradient-blue-dark {
    background: linear-gradient(135deg, #04133a 0%, #061e5b 55%, #0a1240 100%);
    position: relative;
    overflow: hidden;
}

.bg-gradient-blue-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

.section-badge-orange-dark {
    background: rgba(255, 107, 0, 0.15);
    border: 1px solid rgba(255, 107, 0, 0.35);
}

.section-badge-orange-dark span {
    color: #FFaa52;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.text-white-h2 { color: white !important; }
.text-white-h2::after { background: linear-gradient(90deg, #FF6B00, #FFaa52) !important; }
.text-light-p  { color: rgba(255, 255, 255, 0.62) !important; }

.section-badge-ig {
    background: rgba(236, 72, 153, 0.1);
    border: 1px solid rgba(236, 72, 153, 0.3);
}
.section-badge-ig span {
    background: linear-gradient(135deg, #f97316, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.bg-cta-section {
    background: linear-gradient(135deg, #003DA5 0%, #8B3A9C 100%);
    padding: 50px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.bg-ig-section {
    background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    padding: 50px 0;
    position: relative;
    overflow: hidden;
}

.bg-gray-light {
    background: #f8f9fa;
}

/* Decorative Blobs */
.deco-blob-orange-tr {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.12) 0%, transparent 70%);
    border-radius: 50%;
}

.deco-blob-purple-bl {
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(139, 58, 156, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.deco-blob-cta-tr {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.deco-blob-cta-bl {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

.ig-blob-tl {
    position: absolute;
    top: -80px;
    left: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.ig-blob-br {
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 70%);
    pointer-events: none;
}

/* Section Badges */
.section-badge-blue {
    display: inline-block;
    padding: 5px 20px;
    background: rgba(0, 61, 165, 0.08);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 61, 165, 0.15);
}

.section-badge-orange-light {
    display: inline-block;
    padding:5px 20px;
    background: rgba(255, 107, 0, 0.15);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 107, 0, 0.3);
}

.section-badge-purple-light {
    display: inline-block;
    padding: 5px 20px;
    background: rgba(139, 58, 156, 0.08);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(139, 58, 156, 0.2);
}

/* Badge Text */
.badge-text-blue {
    color: #003DA5;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.badge-text-orange {
    color: #FF6B00;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.badge-text-purple {
    color: #8B3A9C;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Section Headings */
.section-h2-blue {
    font-size: 44px;
    font-weight: 800;
    color: #003DA5;
    margin-bottom: 16px;
}

.section-h2-white {
    font-size: 44px;
    font-weight: 800;
    color: white !important;
    margin-bottom: 16px;
}

.section-subtext-gray {
    font-size: 17px;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}

.section-subtext-light {
    font-size: 17px;
    color: #cbd5e1 !important;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.8;
}

.section-header-center {
    text-align: center;
    margin-bottom: 48px;
}

/* Service Card Icons */
.svc-icon-fa {
    font-size: 28.8px;
    color: white;
}

/* Why Choose Us — grid & cards */
.why-choose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 24px;
    margin-top: 48px;
}

.why-card {
    padding: 36px 28px 28px;
    border-radius: 20px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid #e2e8f0;
    background: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.why-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    border-radius: 20px 20px 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.why-card-blue::before   { background: linear-gradient(90deg, #003DA5, #0052d9); }
.why-card-orange::before { background: linear-gradient(90deg, #FF6B00, #FFaa52); }
.why-card-purple::before { background: linear-gradient(90deg, #8B3A9C, #a855c7); }

.why-card:hover { transform: translateY(-8px); }
.why-card:hover::before { opacity: 1; }

.why-card-blue:hover   { border-color: rgba(0, 61, 165, 0.25);   box-shadow: 0 20px 48px rgba(0, 61, 165, 0.12); }
.why-card-orange:hover { border-color: rgba(255, 107, 0, 0.25);  box-shadow: 0 20px 48px rgba(255, 107, 0, 0.12); }
.why-card-purple:hover { border-color: rgba(139, 58, 156, 0.25); box-shadow: 0 20px 48px rgba(139, 58, 156, 0.12); }

.why-card-icon-wrap {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

.why-card-icon-wrap i {
    font-size: 28px;
    color: white !important;
    line-height: 1;
}

.why-card:hover .why-card-icon-wrap { transform: scale(1.1); }

.why-icon-blue   { background: linear-gradient(135deg, #003DA5, #0052d9); box-shadow: 0 6px 20px rgba(0, 61, 165, 0.35); }
.why-icon-orange { background: linear-gradient(135deg, #FF6B00, #e55f00); box-shadow: 0 6px 20px rgba(255, 107, 0, 0.35); }
.why-icon-purple { background: linear-gradient(135deg, #8B3A9C, #a855c7); box-shadow: 0 6px 20px rgba(139, 58, 156, 0.35); }

.why-card:hover .why-icon-blue   { box-shadow: 0 10px 28px rgba(0, 61, 165, 0.55); }
.why-card:hover .why-icon-orange { box-shadow: 0 10px 28px rgba(255, 107, 0, 0.55); }
.why-card:hover .why-icon-purple { box-shadow: 0 10px 28px rgba(139, 58, 156, 0.55); }

.why-card-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
}

.why-card-text {
    font-size: 14.5px;
    color: #64748b;
    line-height: 1.7;
    flex: 1;
}

.why-card-footer {
    margin-top: 20px;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.why-card-footer-blue   { background: rgba(0, 61, 165, 0.08);   color: #003DA5; }
.why-card-footer-orange { background: rgba(255, 107, 0, 0.08);  color: #FF6B00; }
.why-card-footer-purple { background: rgba(139, 58, 156, 0.08); color: #8B3A9C; }

/* Case Studies */
.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 28px;
}

.case-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.07);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1.5px solid #e2e8f0;
}

.case-card:hover           { transform: translateY(-8px); }
.case-card-blue:hover      { box-shadow: 0 20px 48px rgba(0, 61, 165, 0.15);   border-color: rgba(0, 61, 165, 0.3); }
.case-card-purple:hover    { box-shadow: 0 20px 48px rgba(139, 58, 156, 0.15); border-color: rgba(139, 58, 156, 0.3); }
.case-card-orange:hover    { box-shadow: 0 20px 48px rgba(255, 107, 0, 0.15);  border-color: rgba(255, 107, 0, 0.3); }

.case-card-header {
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.case-card-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 18px 18px;
    pointer-events: none;
}

.case-card-header-deco {
    position: absolute;
    right: -30px;
    bottom: -30px;
    width: 110px;
    height: 110px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
    transition: transform 0.4s ease;
}

.case-card:hover .case-card-header-deco { transform: scale(1.3); }

.case-card-header-blue   { background: linear-gradient(135deg, #003DA5 0%, #061e5b 100%); }
.case-card-header-purple { background: linear-gradient(135deg, #8B3A9C 0%, #5a1a6e 100%); }
.case-card-header-orange { background: linear-gradient(135deg, #FF6B00 0%, #c04a00 100%); }

.case-header-top { position: relative; z-index: 1; }

.case-industry-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 5px;
}

.case-card-title-white {
    color: white;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.3;
}

.case-icon-wrap {
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.case-card:hover .case-icon-wrap { transform: scale(1.1); }

.case-icon-wrap i {
    color: white;
    font-size: 20px;
}

.case-card-body {
    padding: 22px 24px 26px;
}

.case-stat {
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.case-stat-blue   { background: rgba(0, 61, 165, 0.07);   border-left: 3px solid #003DA5; }
.case-stat-purple { background: rgba(139, 58, 156, 0.07); border-left: 3px solid #8B3A9C; }
.case-stat-orange { background: rgba(255, 107, 0, 0.07);  border-left: 3px solid #FF6B00; }

.case-stat-num {
    font-weight: 900;
    font-size: 26px;
    line-height: 1;
    flex-shrink: 0;
    font-family: 'Poppins', sans-serif;
}

.case-stat-blue   .case-stat-num { color: #003DA5; }
.case-stat-purple .case-stat-num { color: #8B3A9C; }
.case-stat-orange .case-stat-num { color: #FF6B00; }

.case-stat-desc {
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.case-body-text {
    color: #475569;
    font-size: 14.5px;
    line-height: 1.75;
    margin-bottom: 20px;
}

/* Technology Tags */
.tag-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.tag-blue {
    background: rgba(0, 61, 165, 0.08);
    color: #003DA5;
    padding: 4.8px 12px;
    border-radius: 20px;
    font-size: 12.8px;
    font-weight: 600;
}

.tag-purple {
    background: rgba(139, 58, 156, 0.08);
    color: #8B3A9C;
    padding: 4.8px 12px;
    border-radius: 20px;
    font-size: 12.8px;
    font-weight: 600;
}

.tag-orange {
    background: rgba(255, 107, 0, 0.08);
    color: #FF6B00;
    padding: 4.8px 12px;
    border-radius: 20px;
    font-size: 12.8px;
    font-weight: 600;
}

/* Process Cards */
.process-card-h4 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #1e293b;
    line-height: 1.3;
    font-family: 'Poppins', sans-serif;
}

.process-card-p {
    color: #64748b;
    font-size: 13.5px;
    line-height: 1.65;
    margin-bottom: 16px;
}

.step-tag-blue {
    font-size: 12px;
    background: rgba(0, 61, 165, 0.08);
    color: #003DA5;
    padding: 4px 9px;
    border-radius: 4px;
    font-weight: 500;
}

.step-tag-purple {
    font-size: 12px;
    background: rgba(139, 58, 156, 0.08);
    color: #8B3A9C;
    padding: 4px 9px;
    border-radius: 4px;
    font-weight: 500;
}

.step-tag-orange {
    font-size: 12px;
    background: rgba(255, 107, 0, 0.1);
    color: #FF6B00;
    padding: 4px 9px;
    border-radius: 4px;
    font-weight: 500;
}

/* Utility Text */
.text-orange {
    color: #FF6B00;
}

.text-purple {
    color: #8B3A9C;
}

.text-green {
    color: #10b981;
}

.text-primary-blue {
    color: #003DA5;
}

.text-muted-sm {
    color: #64748b;
    font-size: 15.2px;
}

.text-muted-xs {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
}

.fa-icon-lg {
    font-size: 17px;
}

.fa-icon-xl {
    font-size: 19.2px;
}

.fa-dot {
    font-size: 6px;
}

.bottom-zero {
    bottom: 0;
}

.pos-relative {
    position: relative;
}

.pos-rel-z1 {
    position: relative;
    z-index: 1;
}

.h-auto {
    height: auto;
}

.display-none {
    display: none;
}

.flex-gap-16px {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* YouTube Section */
.yt-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 25px;
}

.yt-header-inner>div {
    min-width: 0;
    max-width: 100%;
}

.yt-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fef2f2;
    color: #ef4444;
    padding: 5px 13px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 13px;
    border: 1px solid #fecaca;
}

.yt-section-h2 {
    font-size: 33px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
    overflow-wrap: break-word;
    word-break: break-word;
}

.btn-youtube {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #ef4444;
    color: white;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
}

/* YouTube Card */
.yt-card-link {
    text-decoration: none;
    background: white;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    display: block;
    transition: all 0.3s;
}

.yt-thumb {
    position: relative;
    overflow: hidden;
    height: 190px;
    background: #0f172a;
}

.yt-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}

.yt-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.yt-play-btn {
    width: 54px;
    height: 54px;
    background: #FF0000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.5);
}

.yt-play-icon {
    color: white;
    font-size: 17px;
    margin-left: 4px;
}

.yt-card-footer {
    padding: 13px 16px 16px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.yt-yt-icon {
    color: #FF0000;
    font-size: 19.2px;
    flex-shrink: 0;
}

.yt-watch-text {
    font-size: 12.48px;
    color: #475569;
    font-weight: 500;
    line-height: 1.4;
}

/* Instagram Section */
.ig-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50px;
    padding: 7.2px 20px;
    margin-bottom: 17px;
    backdrop-filter: blur(6px);
}

.ig-icon-gradient {
    background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 16px;
}

.ig-badge-text {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13.12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ig-section-h2 {
    font-size: 38px;
    font-weight: 900;
    color: white;
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
}

.ig-title-gradient {
    background: linear-gradient(135deg, #f97316, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ig-subtitle {
    color: rgba(255, 255, 255, 0.55);
    font-size: 16px;
    max-width: 500px;
    margin: 0 auto;
}

/* Reel Card Backgrounds */
.reel-bg-blue-purple {
    background: linear-gradient(135deg, #003DA5, #8B3A9C);
}

.reel-bg-violet-pink {
    background: linear-gradient(135deg, #7c3aed, #ec4899);
}

.reel-bg-orange-amber {
    background: linear-gradient(135deg, #FF6B00, #f59e0b);
}

.reel-bg-green-blue {
    background: linear-gradient(135deg, #059669, #0ea5e9);
}

.reel-bg-dark {
    background: linear-gradient(135deg, #1e293b, #0f172a);
}

/* Reel Card Content */
.reel-bg-icon-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.15;
}

.reel-bg-icon {
    font-size: 128px;
}

.reel-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reel-profile-row {
    display: flex;
    align-items: center;
    gap: 9px;
}

.reel-avatar {
    width: 34px;
    height: 34px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.reel-ig-icon {
    color: #e1306c;
    font-size: 17px;
}

.reel-username {
    color: white;
    font-weight: 700;
    font-size: 13px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.reel-ellipsis {
    color: white;
    font-size: 16px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.reel-center {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reel-play-icon {
    color: white;
    font-size: 24px;
    margin-left: 4px;
}

.reel-bottom-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.reel-content-grow {
    flex-grow: 1;
}

.reel-title {
    color: white;
    font-weight: 800;
    font-size: 17px;
    line-height: 1.3;
    margin-bottom: 6px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.8);
}

.reel-desc {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    margin-bottom: 0;
}

.reel-actions {
    display: flex;
    flex-direction: column;
    gap: 17px;
    align-items: center;
    padding-bottom: 3.2px;
}

.reel-action-icon {
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.reel-count {
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.reel-count-plain {
    font-size: 12px;
    font-weight: 700;
}

.reel-share-icon {
    font-size: 22px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.btn-ig-follow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #f09433, #dc2743, #bc1888);
    padding: 13px 32px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15.2px;
    color: white;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(220, 39, 67, 0.4);
}

/* Testimonials / Reviews */
.container-testimonials {
    max-width: 1200px;
    padding: 0 24px;
}

.google-badge-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 19.2px;
    background: white;
    border-radius: 50px;
    margin-bottom: 24px;
    border: 1px solid #e8eaed;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.google-badge-text {
    color: #5f6368;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.reviews-h2 {
    font-size: 44px;
    font-weight: 800;
    color: #202124;
    margin-bottom: 16px;
}

.reviews-subtext {
    font-size: 16.8px;
    color: #5f6368;
    max-width: 560px;
    margin: 0 auto 40px;
    line-height: 1.8;
}

/* Google Review Avatars */
.avatar-blue-green {
    background: linear-gradient(135deg, #4285F4, #34A853);
}

.avatar-red-yellow {
    background: linear-gradient(135deg, #EA4335, #FBBC04);
}

.avatar-green-blue {
    background: linear-gradient(135deg, #34A853, #4285F4);
}

.avatar-blue-red {
    background: linear-gradient(135deg, #4285F4, #EA4335);
}

.avatar-green-yellow {
    background: linear-gradient(135deg, #34A853, #FBBC04);
}

.avatar-yellow-red {
    background: linear-gradient(135deg, #FBBC04, #EA4335);
}

/* Rating Bars */
.bar-97 {
    width: 97%;
}

.bar-2 {
    width: 2%;
}

.bar-1 {
    width: 1%;
}

.bar-0 {
    width: 0%;
}

/* About Section */
.about-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}

.about-img-wrap {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

.about-team-img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}

.about-img-fallback {
    display: flex;
    height: 480px;
    background: linear-gradient(135deg, #003DA5 0%, #8B3A9C 100%);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
}

.about-fallback-icon {
    font-size: 80px;
    color: rgba(255, 255, 255, 0.3);
}

.about-fallback-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 17px;
    font-weight: 600;
}

.about-review-badge {
    position: absolute;
    top: 24px;
    right: -20px;
    background: white;
    border-radius: 14px;
    padding: 13px 19.2px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 190px;
}

.about-badge-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, #003DA5, #8B3A9C);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon-white-md {
    color: white;
    font-size: 17px;
}

.stars-row {
    display: flex;
    align-items: center;
    gap: 3.2px;
    margin-bottom: 1px;
}

.star-icon-sm {
    color: #f59e0b;
    font-size: 12px;
}

.about-badge-score {
    font-weight: 700;
    color: #1e293b;
    font-size: 13px;
    margin-left: 3.2px;
}

.about-exp-badge {
    position: absolute;
    bottom: 28px;
    left: -20px;
    background: linear-gradient(135deg, #FF6B00, #e55f00);
    border-radius: 14px;
    padding: 13px 20.8px;
    box-shadow: 0 8px 30px rgba(255, 107, 0, 0.35);
    color: white;
    text-align: center;
}

.about-exp-number {
    font-size: 28.8px;
    font-weight: 900;
    line-height: 1;
}

.about-exp-label {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.9;
}

.about-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff7ed;
    color: #FF6B00;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12.8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 20px;
    border: 1px solid #fed7aa;
}

.about-h2 {
    font-size: 35.2px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 16px;
    line-height: 1.25;
    font-family: 'Poppins', sans-serif;
}

.about-body-p {
    color: #475569;
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 28px;
}

.feature-points-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 32px;
}

.feature-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.feature-dot-blue {
    width: 22px;
    height: 22px;
    background: #003DA5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-dot-orange {
    width: 22px;
    height: 22px;
    background: #FF6B00;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-dot-green {
    width: 22px;
    height: 22px;
    background: #10b981;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-dot-purple {
    width: 22px;
    height: 22px;
    background: #8B3A9C;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-check-icon {
    color: white;
    font-size: 9px;
}

.feature-label {
    color: #1e293b;
    font-size: 14.72px;
}

.feature-desc {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    margin-left: 29px;
}

.btn-primary-blue {
    background: linear-gradient(135deg, #003DA5, #002d7a);
    color: white;
    padding: 13px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 15.2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0, 61, 165, 0.3);
}

.btn-outline-blue {
    background: transparent;
    color: #003DA5;
    padding: 13px 32px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    font-size: 15.2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 2px solid #003DA5;
    transition: all 0.3s;
}

/* Stats Row */
.stats-row-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 64px;
}

.stat-card-inner {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    transition: all 0.3s;
}

.stat-number {
    font-size: 38px;
    font-weight: 900;
    color: #1e293b;
    line-height: 1;
    margin-bottom: 6px;
}

.stat-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 600;
}

/* FAQ Section */
.faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff7ed;
    color: #FF6B00;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12.8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 16px;
    border: 1px solid #fed7aa;
}

.faq-h2 {
    font-size: 38px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
}

.faq-subtext {
    color: #64748b;
    font-size: 16px;
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.7;
}

/* CTA Section */
.cta-h2 {
    color: white;
    font-size: 44px;
    font-weight: 900;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.cta-subtext {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.8;
}

.cta-btn-row {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.btn-cta-primary {
    background: #FF6B00;
    color: white;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    font-size: 16.8px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(255, 107, 0, 0.4);
}

.btn-whatsapp {
    background: #25D366;
    color: white;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    font-size: 16.8px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: all 0.3s;
}

.btn-cta-outline {
    background: transparent;
    color: white;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    font-size: 16.8px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
}

.cta-footer-text {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

/* SEO Section */
.bg-seo-section {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 50px 0;
}

.seo-group-last {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* === Service Pages Extended Styles === */
.display-flex-gap-rem-align-items-center {
    display: flex;
    gap: 64px;
    align-items: center;
    flex-wrap: wrap;
}

.flex-1-280 {
    flex: 1;
    min-width: 280px;
}

.fa-dot-2 {
    font-size: 6px;
}

.font-size-clamp-rem-vw-rem-font-weight {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 900;
    color: white;
    line-height: 1.2;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
}

.color-rgba------font-size--rem-line-heig {
    color: rgba(255, 255, 255, 0.82);
    font-size: 16.8px;
    line-height: 1.75;
    margin-bottom: 32px;
}

.background-ffb-color-white-padding--rem {
    background: #FF6B00;
    color: white;
    padding: 13px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.background-rgba------color-white-padding {
    background: rgba(255, 255, 255, 0.12);
    color: white;
    padding: 13px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.flex--min-width-px-display-grid-grid-tem {
    flex: 1;
    min-width: 260px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.background-rgba------border-px-solid-rgb {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.color-white-75 {
    color: rgba(255, 255, 255, 0.75);
}

.background-ffafc-padding-rem--border-bot {
    background: #f8fafc;
    padding: 32px 0;
    border-bottom: 1px solid #e2e8f0;
}

.display-flex-gap-rem-justify-content-cen {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.display-flex-align-items-center-gap--rem {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #334155;
    font-weight: 600;
    font-size: 13px;
}

.width-px-height-px-background-eef {
    width: 1px;
    height: 20px;
    background: #e2e8f0;
}

.py-80px {
    padding: 80px 0;
}

.background-effff-color-da-border-color-b {
    background: #eff6ff;
    color: #003DA5;
    border-color: #bfdbfe;
}

.font-size-clamp--rem-vw--rem-font-weight {
    font-size: clamp(25px, 3vw, 35.2px);
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 20px;
    line-height: 1.3;
}

.color--line-height---margin-bottom-rem {
    color: #475569;
    line-height: 1.8;
    margin-bottom: 16px;
}

.color--line-height---margin-bottom--rem {
    color: #475569;
    line-height: 1.8;
    margin-bottom: 28px;
}

.display-grid-grid-template-columns-fr-fr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.display-flex-align-items-center-gap--rem-2 {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
}

.background-linear-gradient-deg-da--bac {
    background: linear-gradient(135deg, #003DA5 0%, #8B3A9C 100%);
    border-radius: 20px;
    padding: 40px;
    color: white;
}

.font-size-rem-margin-bottom-rem {
    font-size: 32px;
    margin-bottom: 16px;
}

.font-size--rem-font-weight--margin-botto {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
}

.display-flex-flex-direction-column-gap-r {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.display-flex-align-items-flex-start-gap {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
}

.color-ffb-margin-top-px {
    color: #FF6B00;
    margin-top: 2px;
}

.font-weight--font-size--rem {
    font-weight: 700;
    font-size: 15.2px;
}

.font-size--rem-color-rgba------margin-to {
    font-size: 13.12px;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 3.2px;
}

.padding-rem--background-ffafc {
    padding: 80px 0;
    background: #f8fafc;
}

.background-fffed-color-ffb-border-color {
    background: #fff7ed;
    color: #FF6B00;
    border-color: #fed7aa;
}

.font-size-clamp--rem-vw--rem-font-weight-2 {
    font-size: clamp(25px, 3vw, 35.2px);
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 12px;
}

.color-b-max-width-px-margin--auto {
    color: #64748b;
    max-width: 520px;
    margin: 0 auto;
}

.display-grid-grid-template-columns-repea {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 24px;
}

.background-linear-gradient-deg-dbeafe-ef {
    background: linear-gradient(135deg, #dbeafe, #eff6ff);
}

.color-blue {
    color: #3b82f6;
}

.font-weight--color-eb-margin-bottom--rem {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.color-b-font-size--rem-line-height {
    color: #64748b;
    font-size: 14.08px;
    line-height: 1.65;
}

.background-linear-gradient-deg-dfae-ecfd {
    background: linear-gradient(135deg, #d1fae5, #ecfdf5);
}

.background-linear-gradient-deg-edefe-fff {
    background: linear-gradient(135deg, #ede9fe, #f5f3ff);
}

.color-violet {
    color: #7c3aed;
}

.background-linear-gradient-deg-fefc-fefe {
    background: linear-gradient(135deg, #fef3c7, #fef9e7);
}

.color-amber {
    color: #f59e0b;
}

.color-b-max-width-px-margin--auto-2 {
    color: #64748b;
    max-width: 500px;
    margin: 0 auto;
}

.display-grid-grid-template-columns-fr-fr-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.font-weight--color-eb-margin-bottom--rem-2 {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 6px;
}

.color-b-font-size--rem-line-height-2 {
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
}

.padding-rem--background-ffafc-2 {
    padding: 64px 0;
    background: #f8fafc;
}

.max-width-px-text-align-center {
    max-width: 1100px;
    text-align: center;
}

.font-size-clamp--rem-vw-rem-font-weight {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 12px;
}

.color-b-margin-bottom--rem {
    color: #64748b;
    margin-bottom: 40px;
}

.display-flex-flex-wrap-wrap-gap--rem-jus {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.h-18px {
    height: 18px;
}

.display-flex-align-items-center-justify {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}

.background-feff-color-dc-border-color-fe {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.font-size-clamp--rem-vw-rem-font-weight-2 {
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    color: #1e293b;
    margin-top: 8px;
}

.color-b-margin-top--rem {
    color: #64748b;
    margin-top: 4px;
}

.display-inline-flex-align-items-center-g {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #FF0000;
    color: white;
    padding: 11.2px 24px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}

.border-radius-px-overflow-hidden-backgro {
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16/9;
    position: relative;
}

.display-block-width--height--position-re {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
}

.width--height--object-fit-cover-display {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.position-absolute-inset--background-rgba {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.width-px-height-px-background-ff-border {
    width: 60px;
    height: 60px;
    background: #FF0000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.6);
}

.color-white-font-size--rem-margin-left-p {
    color: white;
    font-size: 20.8px;
    margin-left: 5px;
}

.text-align-center-margin-top--rem {
    text-align: center;
    margin-top: 20px;
}

.background-linear-gradient-deg-ffff-ffff {
    background: linear-gradient(135deg, #f5f0ff, #fff0f8);
    color: #c026d3;
    border-color: #e879f9;
}

.display-inline-flex-align-items-center-g-2 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
    color: white;
    padding: 11.2px 24px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}

.background-linear-gradient-deg-reel--ree {
    background: linear-gradient(160deg, {
            {
            $reel[0]
        }
    }

    , {
        {
        $reel[1]
    }
});
display:flex;
align-items:center;
justify-content:center;
border-radius:14px;
}

.text-align-center-color-white-padding--r {
    text-align: center;
    color: white;
    padding: 24px;
}

.font-size--rem-color-reel--margin-bottom {
    font-size: 40px;

    color: {
            {
            $reel[2]
        }
    }

    ;
    margin-bottom:16px;
    display:block;
}

.font-weight--font-size--rem-margin-botto {
    font-weight: 700;
    font-size: 15.2px;
    margin-bottom: 6px;
}

.font-size--rem-color-rgba------margin-bo {
    font-size: 12.48px;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 20px;
}

.display-inline-flex-align-items-center-g-3 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    font-size: 12.48px;
}

.text-align-center-margin-bottom-rem {
    text-align: center;
    margin-bottom: 48px;
}

.background-ffdf-color-aa-border-color-bb {
    background: #f0fdf4;
    color: #16a34a;
    border-color: #bbf7d0;
}

.color-muted {
    color: #64748b;
}

.h-auto-2 {
    height: auto;
}

.background-white-border-radius-px-paddin {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    border: 1px solid #f1f5f9;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.display-flex-gap--rem-margin-bottom-rem {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.color-feb-font-size--rem {
    color: #f59e0b;
    font-size: 13px;
}

.color--font-size--rem-line-height---flex {
    color: #475569;
    font-size: 14.88px;
    line-height: 1.75;
    flex: 1;
    margin-bottom: 20px;
}

.display-flex-align-items-center-gap--rem-3 {
    display: flex;
    align-items: center;
    gap: 13px;
}

.width-px-height-px-border-radius--backgr {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #003DA5, #8B3A9C);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 17px;
    flex-shrink: 0;
}

.font-weight--color-eb-font-size--rem {
    font-weight: 700;
    color: #1e293b;
    font-size: 14.72px;
}

.color-ab-font-size--rem {
    color: #94a3b8;
    font-size: 12.8px;
}

.text-align-center-margin-top--rem-2 {
    text-align: center;
    margin-top: 24px;
}

.mw-780 {
    max-width: 780px;
}

.background-linear-gradient-deg-da--bac-2 {
    background: linear-gradient(135deg, #003DA5 0%, #8B3A9C 100%);
    padding: 80px 32px;
    text-align: center;
}

.mw-700 {
    max-width: 700px;
}

.font-size-clamp--rem-vw--rem-font-weight-3 {
    font-size: clamp(27.2px, 3vw, 38px);
    font-weight: 900;
    color: white;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.color-rgba------margin-bottom--rem-font {
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 36px;
    font-size: 16.8px;
    line-height: 1.75;
}

.display-flex-gap-rem-justify-content-cen-2 {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.background-ffb-color-white-padding-rem {
    background: #FF6B00;
    color: white;
    padding: 16px 36px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.background-rgba------border-px-solid-rgb-2 {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 16px 36px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
}

.background-linear-gradient-deg-da--bac-3 {
    background: linear-gradient(135deg, #003DA5 0%, #8B3A9C 100%);
    color: white;
    padding: 80px 0 112px;
    text-align: center;
}

.display-inline-flex-align-items-center-g-4 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 107, 0, 0.2);
    color: #FF6B00;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 12.8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 107, 0, 0.3);
}

.font-size--rem-font-weight--color-white {
    font-size: 36px;
    font-weight: 900;
    color: white;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.color-rgba------font-size--rem-max-width {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16.8px;
    max-width: 500px;
    margin: 0 auto;
}

.margin-top--rem-padding-bottom-rem {
    margin-top: -56px;
    padding-bottom: 80px;
}

.background-white-border-radius-px-box-sh {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
}

.p-4400px {
    padding: 44px;
}

.font-size--rem-font-weight--color-eb-mar {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 6px;
}

.color-b-font-size--rem-margin-bottom-rem {
    color: #64748b;
    font-size: 13px;
    margin-bottom: 32px;
}

.mb-2000px {
    margin-bottom: 20px;
}

.font-weight--font-size--rem-color--displ {
    font-weight: 600;
    font-size: 14.08px;
    color: #374151;
    display: block;
    margin-bottom: 6px;
}

.width--padding--rem-rem-border--px-solid {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15.2px;
    outline: none;
    transition: border 0.2s;
}

.display-grid-grid-template-columns-fr-fr-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.width--padding--rem-rem-border--px-solid-2 {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15.2px;
    outline: none;
    background: white;
    transition: border 0.2s;
}

.mb-240px {
    margin-bottom: 24px;
}

.width--padding--rem-rem-border--px-solid-3 {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15.2px;
    outline: none;
    resize: vertical;
    transition: border 0.2s;
}

.width--background-linear-gradient-deg-ff {
    width: 100%;
    background: linear-gradient(135deg, #FF6B00, #e55f00);
    color: white;
    padding: 13px;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.35);
}

.background-linear-gradient-deg-da--bac-4 {
    background: linear-gradient(160deg, #003DA5 0%, #8B3A9C 100%);
    padding: 44px;
    color: white;
}

.font-size--rem-font-weight--color-white-2 {
    font-size: 20.8px;
    font-weight: 800;
    color: white;
    margin-bottom: 6px;
}

.color-rgba------font-size--rem-margin-bo {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14.08px;
    margin-bottom: 32px;
}

.display-flex-flex-direction-column-gap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

.display-flex-align-items-flex-start-gap-2 {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.width-px-height-px-background-rgba {
    width: 42px;
    height: 42px;
    background: rgba(255, 107, 0, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255, 107, 0, 0.3);
}

.font-weight--color-white-font-size--rem {
    font-weight: 700;
    color: white;
    font-size: 13px;
    margin-bottom: 4.8px;
}

.color-rgba------font-size--rem-line-heig-2 {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    line-height: 1.6;
}

.color-rgba------font-size--rem-display-b {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14.08px;
    display: block;
    text-decoration: none;
}

.color-rgba------font-size--rem-display-b-2 {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    display: block;
    text-decoration: none;
    margin-top: 2px;
}

.color-rgba------font-size--rem-text-deco {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    text-decoration: none;
}

.width-px-height-px-background-rgba-2 {
    width: 42px;
    height: 42px;
    background: rgba(37, 211, 102, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(37, 211, 102, 0.3);
}

.color-d-font-size--rem {
    color: #25D366;
    font-size: 17px;
}

.color-d-font-size--rem-text-decoration-n {
    color: #25D366;
    font-size: 14.08px;
    text-decoration: none;
    font-weight: 600;
}

.background-rgba------border-radius-px-pa {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.font-weight--color-white-font-size--rem-2 {
    font-weight: 700;
    color: white;
    font-size: 14.08px;
    margin-bottom: 12px;
}

.color-ffb-margin-right--rem {
    color: #FF6B00;
    margin-right: 6px;
}

.color-rgba------font-size--rem-line-heig-3 {
    color: rgba(255, 255, 255, 0.7);
    font-size: 13.12px;
    line-height: 1.8;
}

.color-ffb-font-weight {
    color: #FF6B00;
    font-weight: 600;
}

.display-none-position-fixed-inset--backg {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.background-white-border-radius-px-paddin-2 {
    background: white;
    border-radius: 20px;
    padding: 40px;
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
    animation: modalIn 0.3s ease;
}

.width-px-height-px-background-linear-gra {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #d1fae5, #ecfdf5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.color-b-font-size--rem {
    color: #10b981;
    font-size: 28.8px;
}

.font-size--rem-font-weight--color-eb-mar-2 {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 8px;
}

.color-b-font-size--rem-margin-bottom--re {
    color: #64748b;
    font-size: 15.2px;
    margin-bottom: 28px;
    line-height: 1.7;
}

.color-dark-slate {
    color: #1e293b;
}

.display-flex-align-items-center-justify-2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11.2px;
    background: #25D366;
    color: white;
    padding: 13px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    margin-bottom: 13px;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35);
}

.text-208px {
    font-size: 20.8px;
}

.background-none-border-none-color-b-font {
    background: none;
    border: none;
    color: #64748b;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
}

.background-linear-gradient-deg-a--d--adb {
    background: linear-gradient(135deg, #0a1628 0%, #0d2137 55%, #0a3d2b 100%);
    padding: 80px 0 64px;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.position-absolute-bottom-px-left-px-widt {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.position-absolute-top--left--right--bott {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

.display-grid-grid-template-columns--fr {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 64px;
    align-items: center;
}

.color-white {
    color: white;
}

.display-inline-flex-align-items-center-g-5 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(34, 197, 94, 0.12);
    backdrop-filter: blur(10px);
    padding: 9px 20px;
    border-radius: 50px;
    margin-bottom: 28px;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.width-px-height-px-background-ce-border {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
    animation: blink 1.5s ease-in-out infinite;
}

.font-size--rem-font-weight--letter-spaci {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.9);
}

.font-size--rem-font-weight--line-height {
    font-size: 49px;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 24px;
    color: white;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -1px;
}

.color-green-500 {
    color: #22c55e;
}

.font-size--rem-color-rgba------line-heig {
    font-size: 17.92px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.8;
    margin-bottom: 32px;
    max-width: 590px;
}

.display-grid-grid-template-columns-fr-fr-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 40px;
}

.display-flex-align-items-center-gap--rem-4 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

.color-ce-font-size--rem-flex-shrink {
    color: #22c55e;
    font-size: 13px;
    flex-shrink: 0;
}

.display-flex-gap-rem-flex-wrap-wrap-marg {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.background-linear-gradient-deg-ce--aa--c {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    padding: 15.2px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
    transition: all 0.3s;
}

.background-d-color-white-padding--rem-re {
    background: #25D366;
    color: white;
    padding: 15.2px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    transition: all 0.3s;
}

.display-flex-gap-rem-flex-wrap-wrap-padd {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.font-size--rem-font-weight--color-ce-lin {
    font-size: 28.8px;
    font-weight: 900;
    color: #22c55e;
    line-height: 1;
}

.font-size--rem-color-rgba------font-weig {
    font-size: 13.12px;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
}

.background-rgba------backdrop-filter-blu {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 20px;
    padding: 32px;
    position: relative;
    z-index: 1;
}

.width--height-px-object-fit-cover-border {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 24px;
}

.display-grid-grid-template-columns-fr-fr-5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.background-rgba------border-radius-px-pa-2 {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(34, 197, 94, 0.15);
}

.font-size--rem-color-ce-margin-bottom--r {
    font-size: 20.8px;
    color: #22c55e;
    margin-bottom: 6px;
    display: block;
}

.font-size--rem-font-weight--color-white-3 {
    font-size: 17px;
    font-weight: 800;
    color: white;
    line-height: 1;
}

.font-size--rem-color-rgba {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55);
}

.display-flex-flex-direction-column-gap-2 {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.background-rgba------border-px-solid-rgb-3 {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14.08px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.position-absolute-top-px-right-px-width-2 {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.2), transparent 70%);
    border-radius: 50%;
}

.background-white-border-bottom-px-solid {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 20px 0;
}

.display-flex-align-items-center-justify-3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    text-align: center;
}

.color-b-font-size--rem-font-weight--text {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.display-flex-align-items-center-gap--rem-5 {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 14.08px;
    font-weight: 600;
    white-space: nowrap;
}

.color-badge--font-size-rem {
    color: {
            {
            $badge[1]
        }
    }

    ;
    font-size: 16px;
}

.background-linear-gradient-deg-ffafc--ff {
    background: linear-gradient(135deg, #f8fafc 0%, #f0fdf4 100%);
    padding: 80px 0;
}

.display-grid-grid-template-columns-fr-fr-6 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.display-inline-block-padding--rem--rem-b {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(22, 163, 74, 0.08);
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(22, 163, 74, 0.2);
}

.color-aa-font-weight--font-size--rem-tex {
    color: #16a34a;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.font-size--rem-font-weight--color-adb-li {
    font-size: 38px;
    font-weight: 800;
    color: #0a3d2b;
    line-height: 1.2;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
}

.color--font-size-rem-line-height---margi {
    color: #475569;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.color-dark-green {
    color: #0a3d2b;
}

.color--font-size-rem-line-height---margi-2 {
    color: #475569;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 32px;
}

.display-flex-flex-direction-column-gap-r-2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.display-flex-gap-rem-align-items-flex-st {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: white;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.color-row--font-size--rem-flex-shrink--m {
    color: {
            {
            $row[2]
        }
    }

    ;
    font-size: 20.8px;
    flex-shrink: 0;
    margin-top: 2px;
}

.font-weight--color-eb-margin-bottom--rem-3 {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
    font-size: 15.2px;
}

.color-b-font-size--rem-line-height-3 {
    color: #64748b;
    font-size: 14.08px;
    line-height: 1.6;
}

.width--height-px-object-fit-cover-border-2 {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 24px;
}

.display-grid-grid-template-columns-repea-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    text-align: center;
}

.background-white-padding--rem-rem-border {
    background: white;
    padding: 20px 16px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.font-size--rem-font-weight--color-adb {
    font-size: 20.8px;
    font-weight: 900;
    color: #0a3d2b;
}

.font-size--rem-color-b-font-weight--marg {
    font-size: 12.48px;
    color: #64748b;
    font-weight: 500;
    margin-top: 4px;
}

.text-align-center-margin-bottom--rem {
    text-align: center;
    margin-bottom: 56px;
}

.display-inline-block-padding--rem--rem-b-2 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(34, 197, 94, 0.08);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(34, 197, 94, 0.25);
}

.font-size--rem-font-weight--color-eb-mar-3 {
    font-size: 40px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.color-b-font-size--rem-max-width-px-marg {
    color: #64748b;
    font-size: 16.8px;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.7;
}

.display-grid-grid-template-columns-repea-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.background-bg-border-radius-px-padding-r {
    background: {
            {
            $bg
        }
    }

    ;
    border-radius: 16px;
    padding: 32px;

    border: 1px solid {
            {
            $bg
        }
    }

    ;
    transition: all 0.3s;
}

.width-px-height-px-background-color-bord {
    width: 56px;
    height: 56px;

    background: {
            {
            $color
        }
    }

    ;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.color-white-font-size--rem {
    color: white;
    font-size: 24px;
}

.font-size--rem-font-weight--color-eb-mar-4 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
}

.color-b-font-size--rem-line-height---mar {
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.list-style-none-padding--margin--display {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7.2px;
}

.display-flex-align-items-center-gap--rem-6 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
}

.color-color-font-size--rem-flex-shrink {
    color: {
            {
            $color
        }
    }

    ;
    font-size: 12px;
    flex-shrink: 0;
}

.background-linear-gradient-deg-a--adb--p {
    background: linear-gradient(135deg, #0a1628 0%, #0a3d2b 100%);
    padding: 80px 0;
}

.display-inline-block-padding--rem--rem-b-3 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.color-ce-font-weight--font-size--rem-tex {
    color: #22c55e;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.font-size--rem-font-weight--color-white-4 {
    font-size: 38px;
    font-weight: 800;
    color: white;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.color-rgba------font-size--rem-max-width-2 {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16.8px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.display-grid-grid-template-columns-repea-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.background-rgba------border-px-solid-rgb-4 {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 24px;
    transition: all 0.3s;
}

.width-px-height-px-background-rgba-3 {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.color-color-font-size--rem {
    color: {
            {
            $color
        }
    }

    ;
    font-size: 20.8px;
}

.font-size--rem-font-weight--color-white-5 {
    font-size: 15.2px;
    font-weight: 700;
    color: white;
    margin-bottom: 8px;
}

.color-rgba------font-size--rem-line-heig-4 {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13.28px;
    line-height: 1.6;
    margin: 0;
}

.display-inline-block-padding--rem--rem-b-4 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(10, 61, 43, 0.08);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(10, 61, 43, 0.15);
}

.color-adb-font-weight--font-size--rem-te {
    color: #0a3d2b;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.font-size--rem-font-weight--color-eb-mar-5 {
    font-size: 36.8px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.color-b-font-size-rem-max-width-px-margi {
    color: #64748b;
    font-size: 16px;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

.display-grid-grid-template-columns-repea-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
    align-items: end;
}

.background-white-border-radius-px-overfl {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    border: 1px solid #e2e8f0;
}

.width--height-px-object-fit-cover {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

.p-16px {
    padding: 16px;
}

.font-weight--color-eb-font-size--rem-mar {
    font-weight: 700;
    color: #1e293b;
    font-size: 13px;
    margin-bottom: 5px;
}

.color-ab-font-size--rem-line-height {
    color: #94a3b8;
    font-size: 12.48px;
    line-height: 1.5;
}

.background-white-padding--rem {
    background: white;
    padding: 72px 0;
}

.font-size--rem-font-weight--color-eb-fon {
    font-size: 35.2px;
    font-weight: 800;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 12px;
}

.color-b-font-size-rem-max-width-px-margi-2 {
    color: #64748b;
    font-size: 16px;
    max-width: 500px;
    margin: 0 auto;
}

.background-ffafc-border-radius-px-paddin {
    background: #f8fafc;
    border-radius: 14px;
    padding: 28px;
    border: 1px solid #e2e8f0;
}

.display-flex-align-items-center-gap--rem-7 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.width-px-height-px-background-color-bord-2 {
    width: 42px;
    height: 42px;

    background: {
            {
            $color
        }
    }

    ;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-white-font-size--rem-2 {
    color: white;
    font-size: 18px;
}

.font-weight--color-eb-font-size--rem-2 {
    font-weight: 700;
    color: #1e293b;
    font-size: 15.2px;
}

.list-style-none-padding--margin--display-2 {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.display-flex-align-items-center-gap--rem-8 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14.08px;
    color: #475569;
}

.color-color-font-size--rem-flex-shrink-2 {
    color: {
            {
            $color
        }
    }

    ;
    font-size: 6px;
    flex-shrink: 0;
}

.display-inline-block-padding--rem--rem-b-5 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(34, 197, 94, 0.08);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.font-size--rem-font-weight--color-eb-mar-6 {
    font-size: 38px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.display-grid-grid-template-columns-repea-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.background-white-border-radius-px-paddin-3 {
    background: white;
    border-radius: 14px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.width-px-height-px-background-linear-gra-2 {
    width: 52px;
    height: 52px;

    background: linear-gradient(135deg, {
            {
            $color
        }
    }

    , {
        {
        $color
    }
}

cc);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.color-white-font-size--rem-3 {
    color: white;
    font-size: 19.2px;
}

.font-size--rem-font-weight--color-color {
    font-size: 11.2px;
    font-weight: 800;

    color: {
            {
            $color
        }
    }

    ;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.font-size--rem-font-weight--color-eb-mar-7 {
    font-size: 14.72px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 9px;
}

.color-b-font-size--rem-line-height---mar-2 {
    color: #64748b;
    font-size: 12.8px;
    line-height: 1.6;
    margin: 0;
}

.display-inline-block-padding--rem--rem-b-6 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(10, 61, 43, 0.08);
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(10, 61, 43, 0.15);
}

.font-size--rem-font-weight--color-eb-mar-8 {
    font-size: 36.8px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
}

.color-b-font-size-rem-line-height---marg {
    color: #64748b;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 32px;
}

.display-flex-flex-direction-column-gap-3 {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.display-flex-gap-rem-align-items-flex-st-2 {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.width-px-height-px-background-color--bor {
    width: 46px;
    height: 46px;

    background: {
            {
            $color
        }
    }

    18;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.color-color-font-size--rem-2 {
    color: {
            {
            $color
        }
    }

    ;
    font-size: 17px;
}

.width--height-px-object-fit-cover-border-3 {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 24px;
}

.display-grid-grid-template-columns-repea-7 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.background-ffafc-border-radius-px-paddin-2 {
    background: #f8fafc;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.font-size--rem-font-weight--color-adb-2 {
    font-size: 24px;
    font-weight: 900;
    color: #0a3d2b;
}

.font-size--rem-color-b-margin-top--rem-f {
    font-size: 12.8px;
    color: #64748b;
    margin-top: 4px;
    font-weight: 500;
}

.color-rgba------font-size-rem-max-width {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    max-width: 540px;
    margin: 0 auto;
}

.display-grid-grid-template-columns-repea-8 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    align-items: start;
}

.background-rgba----popular-----border-po {
    background: rgba(255, 255, 255, {
            {
            $popular ? '0.1' : '0.05'
        }
    });

border: {
        {
        $popular ? '2px solid ' .$color : '1px solid rgba(255,255,255,0.1)'
    }
}

;
border-radius: 20px;
padding: 36px;
position: relative;
transition: all 0.3s;
}

.position-absolute-top-px-left--transform {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);

    background: {
            {
            $color
        }
    }

    ;
    color: #0a1628;
    font-size: 12.48px;
    font-weight: 800;
    padding: 5px 20px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.font-size--rem-font-weight--color-white-6 {
    font-size: 20.8px;
    font-weight: 800;
    color: white;
    margin-bottom: 6px;
    font-family: 'Poppins', sans-serif;
}

.color-rgba------font-size--rem-margin-bo-2 {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14.08px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.list-style-none-padding--margin---rem-di {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.display-flex-align-items-center-gap--rem-9 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.08px;
    color: rgba(255, 255, 255, 0.8);
}

.color-color-font-size--rem-flex-shrink-3 {
    color: {
            {
            $color
        }
    }

    ;
    font-size: 13px;
    flex-shrink: 0;
}

.display-block-text-align-center-backgrou {
    display: block;
    text-align: center;

    background: {
            {
            $btnBg2
        }
    }

    ;

    color: {
            {
            $btnColor2
        }
    }

    ;
    padding: 13px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 15.2px;
    transition: all 0.3s;

    border: 1px solid {
            {
            $btnBorder2
        }
    }

    ;
}

.color-b-font-size-rem {
    color: #64748b;
    font-size: 16px;
}

.background-white-border-radius-px-paddin-4 {
    background: white;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.display-flex-gap--rem-margin-bottom-rem-2 {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
}

.color-ce-font-size--rem {
    color: #22c55e;
    font-size: 15.2px;
}

.color--font-size--rem-line-height---marg {
    color: #475569;
    font-size: 14.72px;
    line-height: 1.75;
    margin-bottom: 24px;
    font-style: italic;
}

.display-flex-align-items-center-gap--rem-10 {
    display: flex;
    align-items: center;
    gap: 13px;
}

.width-px-height-px-object-fit-cover-bord {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}

.font-weight--color-eb-font-size--rem-3 {
    font-weight: 700;
    color: #1e293b;
    font-size: 13px;
}

.color-ab-font-size--rem-2 {
    color: #94a3b8;
    font-size: 12.8px;
}

.mw-860 {
    max-width: 860px;
}

.border-px-solid-eef-border-radius-px-ove {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.width--text-align-left-background-ffafc {
    width: 100%;
    text-align: left;
    background: #f8fafc;
    padding: 20px 24px;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 15.2px;
    font-weight: 600;
    color: #1e293b;
    font-family: 'Outfit', sans-serif;
}

.color-ce-font-size--rem-flex-shrink--tra {
    color: #22c55e;
    font-size: 12.8px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.display-none-padding---rem--rem-backgrou {
    display: none;
    padding: 0 24px 20px;
    background: white;
}

.color-b-font-size--rem-line-height---mar-3 {
    color: #64748b;
    font-size: 13px;
    line-height: 1.75;
    margin: 0;
}

.background-linear-gradient-deg-a--adb--d {
    background: linear-gradient(135deg, #0a1628 0%, #0a3d2b 55%, #0d2137 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width-3 {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.12) 0%, transparent 70%);
    border-radius: 50%;
}

.position-absolute-bottom-px-left-px-widt-2 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.max-width-px-text-align-center-position {
    max-width: 800px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.width-px-height-px-background-linear-gra-3 {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 28px rgba(34, 197, 94, 0.4);
}

.font-size-rem-color-white {
    font-size: 32px;
    color: white;
}

.font-size--rem-font-weight--color-white-7 {
    font-size: 41px;
    font-weight: 900;
    color: white;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
}

.color-rgba------font-size--rem-line-heig-5 {
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.background-linear-gradient-deg-ce-aa-col {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16.8px;
    box-shadow: 0 4px 24px rgba(34, 197, 94, 0.4);
    transition: all 0.3s;
}

.background-d-color-white-padding-rem--re {
    background: #25D366;
    color: white;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16.8px;
    transition: all 0.3s;
}

.color-rgba------font-size--rem-margin-to {
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    margin-top: 28px;
}

.background-linear-gradient-deg-f--eac--a {
    background: linear-gradient(135deg, #0f0720 0%, #1e0a3c 50%, #0a1a3e 100%);
    padding: 80px 0 64px;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width-4 {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.position-absolute-bottom-px-left-px-widt-3 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.position-absolute-top--left--right--bott-2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.display-inline-flex-align-items-center-g-6 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(124, 58, 237, 0.18);
    backdrop-filter: blur(10px);
    padding: 9px 20px;
    border-radius: 50px;
    margin-bottom: 28px;
    border: 1px solid rgba(124, 58, 237, 0.4);
}

.width-px-height-px-background-caed-borde {
    width: 8px;
    height: 8px;
    background: #7c3aed;
    border-radius: 50%;
    display: inline-block;
    animation: blink 1.5s ease-in-out infinite;
}

.color-violet-light {
    color: #a78bfa;
}

.color-abfa-font-size--rem-flex-shrink {
    color: #a78bfa;
    font-size: 13px;
    flex-shrink: 0;
}

.background-linear-gradient-deg-caed--dd {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    color: white;
    padding: 15.2px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.45);
    transition: all 0.3s;
}

.font-size--rem-font-weight--color-abfa-l {
    font-size: 28.8px;
    font-weight: 900;
    color: #a78bfa;
    line-height: 1;
}

.background-rgba------backdrop-filter-blu-2 {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 20px;
    padding: 32px;
    position: relative;
    z-index: 1;
}

.width--height-px-object-fit-cover-border-4 {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 24px;
}

.background-rgba------border-radius-px-pa-3 {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(124, 58, 237, 0.2);
}

.font-size--rem-color-abfa-margin-bottom {
    font-size: 20.8px;
    color: #a78bfa;
    margin-bottom: 6px;
    display: block;
}

.background-rgba------border-px-solid-rgb-5 {
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.25);
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14.08px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.position-absolute-top-px-right-px-width-5 {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.25), transparent 70%);
    border-radius: 50%;
}

.background-linear-gradient-deg-ffafc--ff-2 {
    background: linear-gradient(135deg, #f8fafc 0%, #f3f0ff 100%);
    padding: 80px 0;
}

.display-inline-block-padding--rem--rem-b-7 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(124, 58, 237, 0.2);
}

.color-caed-font-weight--font-size--rem-t {
    color: #7c3aed;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.font-size--rem-font-weight--color-eac-li {
    font-size: 38px;
    font-weight: 800;
    color: #1e0a3c;
    line-height: 1.2;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
}

.width--height-px-object-fit-cover-border-5 {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 24px;
}

.font-size--rem-font-weight--color-caed {
    font-size: 20.8px;
    font-weight: 900;
    color: #7c3aed;
}

.display-inline-block-padding--rem--rem-b-8 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(124, 58, 237, 0.2);
}

.background-bg-border-radius-px-padding-r-2 {
    background: {
            {
            $bg
        }
    }

    ;
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s;
}

.background-linear-gradient-deg-f--eac--a-2 {
    background: linear-gradient(135deg, #0f0720 0%, #1e0a3c 55%, #0a1a3e 100%);
    padding: 80px 0;
}

.display-inline-block-padding--rem--rem-b-9 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(167, 139, 250, 0.15);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(167, 139, 250, 0.3);
}

.color-abfa-font-weight--font-size--rem-t {
    color: #a78bfa;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.display-grid-grid-template-columns-repea-9 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.background-white-border-radius-px-overfl-2 {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    border: 1px solid #e2e8f0;
    transition: all 0.3s;
}

.width--height-px-object-fit-cover-2 {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.p-2000px {
    padding: 20px;
}

.display-flex-align-items-center-gap--rem-11 {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 9px;
}

.width-px-height-px-background-color-bord-3 {
    width: 8px;
    height: 8px;

    background: {
            {
            $color
        }
    }

    ;
    border-radius: 50%;
}

.color-b-font-size--rem-line-height---mar-4 {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.color-b-font-size-rem-max-width-px-margi-3 {
    color: #64748b;
    font-size: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.display-grid-grid-template-columns-repea-10 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
}

.background-white-border-radius-px-paddin-5 {
    background: white;
    border-radius: 14px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.width-px-height-px-background-linear-gra-4 {
    width: 46px;
    height: 46px;

    background: linear-gradient(135deg, {
            {
            $color
        }
    }

    , {
        {
        $color
    }
}

cc);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.font-size--rem-font-weight--color-color-2 {
    font-size: 10px;
    font-weight: 800;

    color: {
            {
            $color
        }
    }

    ;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.font-size--rem-font-weight--color-eb-mar-9 {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.color-b-font-size--rem-line-height---mar-5 {
    color: #64748b;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

.width--height-px-object-fit-cover-border-6 {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 24px;
}

.font-size--rem-font-weight--color-caed-2 {
    font-size: 24px;
    font-weight: 900;
    color: #7c3aed;
}

.color-rgba------font-size-rem-max-width-2 {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

.background-rgba----featured-----border-f {
    background: rgba(255, 255, 255, {
            {
            $featured ? '0.1' : '0.05'
        }
    });

border: {
        {
        $featured ? '2px solid ' .$color : '1px solid rgba(255,255,255,0.1)'
    }
}

;
border-radius: 20px;
padding: 36px;
position: relative;
transition: all 0.3s;
}

.position-absolute-top-px-left--transform-2 {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);

    background: {
            {
            $color
        }
    }

    ;
    color: #0f0720;
    font-size: 12.48px;
    font-weight: 800;
    padding: 5px 20px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.width-px-height-px-background-color--bor-2 {
    width: 52px;
    height: 52px;

    background: {
            {
            $color
        }
    }

    22;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

    border: 1px solid {
            {
            $color
        }
    }

    44;
}

.color-color-font-size--rem-3 {
    color: {
            {
            $color
        }
    }

    ;
    font-size: 22px;
}

.font-size--rem-font-weight--color-white-8 {
    font-size: 20px;
    font-weight: 800;
    color: white;
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
}

.color-rgba------font-size--rem-line-heig-6 {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    line-height: 1.65;
    margin-bottom: 24px;
}

.display-block-text-align-center-backgrou-2 {
    display: block;
    text-align: center;

    background: {
            {
            $color
        }
    }

    ;
    color: #0f0720;
    padding: 13px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 15.2px;
    transition: all 0.3s;

    box-shadow: 0 4px 16px {
            {
            $color
        }
    }

    44;
}

.text-align-center-margin-top--rem-paddin {
    text-align: center;
    margin-top: 40px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.color-rgba------font-size--rem-margin--l {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin: 0;
    line-height: 1.7;
}

.color-abfa-margin-right--rem {
    color: #a78bfa;
    margin-right: 8px;
}

.color-abfa-font-size--rem {
    color: #a78bfa;
    font-size: 15.2px;
}

.color-caed-font-size--rem-flex-shrink--t {
    color: #7c3aed;
    font-size: 12.8px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.background-linear-gradient-deg-f--eac--a-3 {
    background: linear-gradient(135deg, #0f0720 0%, #1e0a3c 55%, #0a1a3e 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width-6 {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.position-absolute-bottom-px-left-px-widt-4 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.width-px-height-px-background-linear-gra-5 {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 28px rgba(124, 58, 237, 0.45);
}

.color-rgba------font-size--rem-line-heig-7 {
    color: rgba(255, 255, 255, 0.7);
    font-size: 17px;
    line-height: 1.75;
    margin-bottom: 16px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.color-rgba------font-size--rem-margin-bo-3 {
    color: rgba(255, 255, 255, 0.45);
    font-size: 13px;
    margin-bottom: 40px;
}

.background-linear-gradient-deg-caed-dd-c {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: white;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16.8px;
    box-shadow: 0 4px 24px rgba(124, 58, 237, 0.45);
    transition: all 0.3s;
}

.color-rgba------font-size--rem-margin-to-2 {
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
    margin-top: 28px;
}

.background-linear-gradient-deg-fc--b--e {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 55%, #24243e 100%);
    padding: 80px 0 64px;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width-7 {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(167, 92, 255, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.position-absolute-bottom-px-left-px-widt-5 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 179, 0, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.position-absolute-top--left--right--bott-3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

.display-inline-flex-align-items-center-g-7 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(167, 92, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 9px 20px;
    border-radius: 50px;
    margin-bottom: 28px;
    border: 1px solid rgba(167, 92, 255, 0.35);
}

.width-px-height-px-background-ffb-border {
    width: 8px;
    height: 8px;
    background: #FFB300;
    border-radius: 50%;
    display: inline-block;
    animation: blink 1.5s ease-in-out infinite;
}

.color-amber-bright {
    color: #FFB300;
}

.color-ffb-font-size--rem-flex-shrink {
    color: #FFB300;
    font-size: 12.8px;
    flex-shrink: 0;
}

.background-linear-gradient-deg-ffb--ea {
    background: linear-gradient(135deg, #FFB300 0%, #e6a000 100%);
    color: #0f0c29;
    padding: 15.2px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    box-shadow: 0 4px 20px rgba(255, 179, 0, 0.45);
    transition: all 0.3s;
}

.font-size--rem-font-weight--color-ffb-li {
    font-size: 28.8px;
    font-weight: 900;
    color: #FFB300;
    line-height: 1;
}

.background-rgba------backdrop-filter-blu-3 {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(167, 92, 255, 0.25);
    border-radius: 20px;
    padding: 32px;
    position: relative;
    z-index: 1;
}

.width--height-px-object-fit-cover-border-7 {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 24px;
}

.background-rgba------border-radius-px-pa-4 {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(167, 92, 255, 0.2);
}

.font-size--rem-color-ffb-margin-bottom {
    font-size: 20.8px;
    color: #FFB300;
    margin-bottom: 6px;
    display: block;
}

.background-rgba------border-px-solid-rgb-6 {
    background: rgba(255, 179, 0, 0.08);
    border: 1px solid rgba(255, 179, 0, 0.2);
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14.08px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.position-absolute-top-px-right-px-width-8 {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(167, 92, 255, 0.25), transparent 70%);
    border-radius: 50%;
}

.background-linear-gradient-deg-fafafe--f {
    background: linear-gradient(135deg, #fafafe 0%, #f3f0ff 100%);
    padding: 80px 0;
}

.display-inline-block-padding--rem--rem-b-10 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(48, 43, 99, 0.08);
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(48, 43, 99, 0.15);
}

.color-b-font-weight--font-size--rem-text {
    color: #302b63;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.font-size--rem-font-weight--color-b-line {
    font-size: 38px;
    font-weight: 800;
    color: #302b63;
    line-height: 1.2;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
}

.color-indigo-dark {
    color: #302b63;
}

.width--height-px-object-fit-cover-border-8 {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 24px;
}

.font-size--rem-font-weight--color-b {
    font-size: 20.8px;
    font-weight: 900;
    color: #302b63;
}

.display-inline-block-padding--rem--rem-b-11 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(255, 179, 0, 0.1);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 179, 0, 0.3);
}

.color-bd-font-weight--font-size--rem-tex {
    color: #b37d00;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.background-bg-border-radius-px-padding-r-3 {
    background: {
            {
            $bg
        }
    }

    ;
    border-radius: 16px;
    padding: 32px;

    border: 1px solid {
            {
            $bg
        }
    }

    ;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.background-linear-gradient-deg-fc--b--pa {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 100%);
    padding: 80px 0;
}

.display-inline-block-padding--rem--rem-b-12 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(255, 179, 0, 0.15);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 179, 0, 0.3);
}

.color-ffb-font-weight--font-size--rem-te {
    color: #FFB300;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.color-rgba------font-size--rem-max-width-3 {
    color: rgba(255, 255, 255, 0.65);
    font-size: 16.8px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.display-inline-block-padding--rem--rem-b-13 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(48, 43, 99, 0.08);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(48, 43, 99, 0.15);
}

.height-px-background-fc-position-relativ {
    height: 480px;
    background: #0f0c29;
    position: relative;
    overflow: hidden;
}

.width--height--object-fit-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.display-inline-block-padding--rem--rem-b-14 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(255, 179, 0, 0.1);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 179, 0, 0.25);
}

.display-grid-grid-template-columns-repea-11 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    position: relative;
}

.position-absolute-top-px-left--right--he {
    position: absolute;
    top: 35px;
    left: 8%;
    right: 8%;
    height: 2px;
    background: linear-gradient(90deg, #FFB300, #a75cff);
    z-index: 0;
    display: none;
}

.background-white-border-radius-px-paddin-6 {
    background: white;
    border-radius: 14px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    text-align: center;
    position: relative;
    z-index: 1;
}

.width--height-px-object-fit-cover-border-9 {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 24px;
}

.font-size--rem-font-weight--color-b-2 {
    font-size: 24px;
    font-weight: 900;
    color: #302b63;
}

.position-absolute-top-px-left--transform-3 {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);

    background: {
            {
            $color
        }
    }

    ;
    color: #0f0c29;
    font-size: 12.48px;
    font-weight: 800;
    padding: 5px 20px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.display-block-text-align-center-backgrou-3 {
    display: block;
    text-align: center;

    background: {
            {
            $btnBg
        }
    }

    ;

    color: {
            {
            $btnColor
        }
    }

    ;
    padding: 13px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 15.2px;
    transition: all 0.3s;

    border: 1px solid {
            {
            $btnBorder
        }
    }

    ;
}

.color-ffb-font-size--rem {
    color: #FFB300;
    font-size: 15.2px;
}

.width-px-height-px-border-radius--object {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.color-b-font-size--rem-flex-shrink--tran {
    color: #302b63;
    font-size: 12.8px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.background-linear-gradient-deg-fc--b--e-2 {
    background: linear-gradient(135deg, #0f0c29 0%, #302b63 55%, #24243e 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width-9 {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 179, 0, 0.12) 0%, transparent 70%);
    border-radius: 50%;
}

.position-absolute-bottom-px-left-px-widt-6 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(167, 92, 255, 0.12) 0%, transparent 70%);
    border-radius: 50%;
}

.width-px-height-px-background-linear-gra-6 {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #FFB300, #e6a000);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 28px rgba(255, 179, 0, 0.45);
}

.background-linear-gradient-deg-ffb-ea-co {
    background: linear-gradient(135deg, #FFB300, #e6a000);
    color: #0f0c29;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16.8px;
    box-shadow: 0 4px 24px rgba(255, 179, 0, 0.45);
    transition: all 0.3s;
}

.background-linear-gradient-deg-f--cd--af {
    background: linear-gradient(135deg, #0f1115 0%, #1c0d00 55%, #0a0f1a 100%);
    padding: 80px 0 64px;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width-10 {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.position-absolute-bottom-px-left-px-widt-7 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.display-inline-flex-align-items-center-g-8 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 107, 0, 0.15);
    backdrop-filter: blur(10px);
    padding: 9px 20px;
    border-radius: 50px;
    margin-bottom: 28px;
    border: 1px solid rgba(255, 107, 0, 0.35);
}

.width-px-height-px-background-ffb-border-2 {
    width: 8px;
    height: 8px;
    background: #FF6B00;
    border-radius: 50%;
    display: inline-block;
    animation: blink 1.5s ease-in-out infinite;
}

.font-size-rem-font-weight--line-height {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 24px;
    color: white;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -1px;
}

.color-ffb-font-size--rem-flex-shrink-2 {
    color: #FF6B00;
    font-size: 13px;
    flex-shrink: 0;
}

.background-linear-gradient-deg-ffb--ef {
    background: linear-gradient(135deg, #FF6B00 0%, #e55f00 100%);
    color: white;
    padding: 15.2px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    box-shadow: 0 4px 20px rgba(255, 107, 0, 0.45);
    transition: all 0.3s;
}

.background-rgba------color-white-padding-2 {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    padding: 15.2px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
}

.font-size--rem-font-weight--color-ffb-li-2 {
    font-size: 28.8px;
    font-weight: 900;
    color: #FF6B00;
    line-height: 1;
}

.background-rgba------backdrop-filter-blu-4 {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 107, 0, 0.2);
    border-radius: 20px;
    padding: 32px;
    position: relative;
    z-index: 1;
}

.width--height-px-object-fit-cover-border-10 {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 24px;
}

.display-grid-grid-template-columns-fr-fr-7 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
    margin-bottom: 20px;
}

.background-rgba------border-radius-px-pa-5 {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 13px;
    text-align: center;
    border: 1px solid rgba(255, 107, 0, 0.15);
}

.font-size--rem-color-ffb-margin-bottom-2 {
    font-size: 19.2px;
    color: #FF6B00;
    margin-bottom: 5px;
    display: block;
}

.font-size--rem-font-weight--color-white-9 {
    font-size: 16.8px;
    font-weight: 800;
    color: white;
    line-height: 1;
}

.font-size--rem-color-rgba-2 {
    font-size: 11.52px;
    color: rgba(255, 255, 255, 0.55);
}

.display-flex-flex-direction-column-gap-4 {
    display: flex;
    flex-direction: column;
    gap: 8.8px;
}

.background-rgba------border-px-solid-rgb-7 {
    background: rgba(255, 107, 0, 0.08);
    border: 1px solid rgba(255, 107, 0, 0.2);
    border-radius: 8px;
    padding: 8.8px 16px;
    font-size: 13.92px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.position-absolute-top-px-right-px-width-11 {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.2), transparent 70%);
    border-radius: 50%;
}

.background-linear-gradient-deg-fafafa--f {
    background: linear-gradient(135deg, #fafafa 0%, #fff7f0 100%);
    padding: 80px 0;
}

.display-inline-block-padding--rem--rem-b-15 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(255, 107, 0, 0.08);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 107, 0, 0.2);
}

.color-ef-font-weight--font-size--rem-tex {
    color: #e55f00;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.color-b-font-size--rem-max-width-px-marg-2 {
    color: #64748b;
    font-size: 16.8px;
    max-width: 580px;
    margin: 0 auto;
}

.display-grid-grid-template-columns-fr-fr-8 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.font-size--rem-font-weight--color-ef-mar {
    font-size: 20.8px;
    font-weight: 700;
    color: #ef4444;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.display-flex-gap-rem-align-items-flex-st-3 {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #fff5f5;
    padding: 16px 20px;
    border-radius: 10px;
    border-left: 4px solid #ef4444;
}

.color-ef-font-size--rem-flex-shrink--mar {
    color: #ef4444;
    font-size: 17px;
    flex-shrink: 0;
    margin-top: 2px;
}

.color--font-size--rem-line-height {
    color: #475569;
    font-size: 13px;
    line-height: 1.6;
}

.font-size--rem-font-weight--color-ce-mar {
    font-size: 20.8px;
    font-weight: 700;
    color: #22c55e;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.display-flex-gap-rem-align-items-flex-st-4 {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #f0fdf4;
    padding: 16px 20px;
    border-radius: 10px;
    border-left: 4px solid #22c55e;
}

.color-ce-font-size--rem-flex-shrink--mar {
    color: #22c55e;
    font-size: 17px;
    flex-shrink: 0;
    margin-top: 2px;
}

.color-b-font-size--rem-max-width-px-marg-3 {
    color: #64748b;
    font-size: 16.8px;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

.display-grid-grid-template-columns-repea-12 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.background-bg-border-radius-px-padding {
    background: {
            {
            $bg
        }
    }

    ;
    border-radius: 16px;
    padding: 28px;

    border: 1px solid {
            {
            $bg
        }
    }

    ;
    transition: all 0.3s;
}

.width-px-height-px-background-color-bord-4 {
    width: 52px;
    height: 52px;

    background: {
            {
            $color
        }
    }

    ;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.font-size--rem-font-weight--color-eb-mar-10 {
    font-size: 16.8px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}

.color-b-font-size--rem-line-height---mar-6 {
    color: #64748b;
    font-size: 14.08px;
    line-height: 1.7;
    margin: 0;
}

.background-linear-gradient-deg-f--cd--pa {
    background: linear-gradient(135deg, #0f1115 0%, #1c0d00 100%);
    padding: 80px 0;
}

.display-inline-block-padding--rem--rem-b-16 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(255, 107, 0, 0.15);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 107, 0, 0.3);
}

.color-ffb-font-weight--font-size--rem-te-2 {
    color: #FF6B00;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.font-size--rem-font-weight--color-white-10 {
    font-size: 36.8px;
    font-weight: 800;
    color: white;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
}

.color-rgba------font-size-rem-max-width-3 {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16px;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.7;
}

.background-rgba------border-radius-px-ov {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 107, 0, 0.15);
    transition: all 0.3s;
}

.width--height-px-object-fit-cover-3 {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.font-weight--color-white-font-size--rem-3 {
    font-weight: 700;
    color: white;
    font-size: 14.72px;
    margin-bottom: 6px;
}

.color-rgba------font-size--rem-line-heig-8 {
    color: rgba(255, 255, 255, 0.45);
    font-size: 12.8px;
    line-height: 1.5;
}

.text-align-center-margin-top--rem-3 {
    text-align: center;
    margin-top: 40px;
}

.background-linear-gradient-deg-ffb-ef-co {
    background: linear-gradient(135deg, #FF6B00, #e55f00);
    color: white;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    box-shadow: 0 4px 20px rgba(255, 107, 0, 0.4);
    transition: all 0.3s;
}

.background-white-border-radius-px-paddin-7 {
    background: white;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.width-px-height-px-background-color--bor-3 {
    width: 56px;
    height: 56px;

    background: {
            {
            $color
        }
    }

    15;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

    border: 1px solid {
            {
            $color
        }
    }

    30;
}

.color-color-font-size--rem-4 {
    color: {
            {
            $color
        }
    }

    ;
    font-size: 24px;
}

.font-size--rem-font-weight--color-eb-mar-11 {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}

.color-b-font-size--rem-line-height---mar-7 {
    color: #64748b;
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
}

.color-b-font-size-rem-max-width-px-margi-4 {
    color: #64748b;
    font-size: 16px;
    max-width: 540px;
    margin: 0 auto;
}

.display-grid-grid-template-columns-repea-13 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.border-radius-px-padding-rem-border-px-s {
    border-radius: 16px;
    padding: 32px;
    border: 2px solid #f1f5f9;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.display-flex-align-items-center-gap-rem {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.width-px-height-px-background-color-bord-5 {
    width: 48px;
    height: 48px;

    background: {
            {
            $color
        }
    }

    ;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.color-white-font-size--rem-4 {
    color: white;
    font-size: 20.8px;
}

.font-size--rem-font-weight--color-eb-fon-2 {
    font-size: 16.8px;
    font-weight: 700;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
    margin: 0;
}

.color-b-font-size-rem-max-width-px-margi-5 {
    color: #64748b;
    font-size: 16px;
    max-width: 480px;
    margin: 0 auto;
}

.display-grid-grid-template-columns-repea-14 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    position: relative;
}

.position-absolute-top-px-left---right {
    position: absolute;
    top: 38px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, #FF6B00, #f59e0b, #22c55e, #0ea5e9);
    z-index: 0;
    display: none;
}

.background-white-border-radius-px-paddin-8 {
    background: white;
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    position: relative;
    z-index: 1;
}

.width-px-height-px-background-color-bord-6 {
    width: 56px;
    height: 56px;

    background: {
            {
            $color
        }
    }

    ;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;

    box-shadow: 0 4px 16px {
            {
            $color
        }
    }

    44;
}

.font-size--rem-font-weight--color-color-3 {
    font-size: 11.2px;
    font-weight: 800;

    color: {
            {
            $color
        }
    }

    ;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.font-size-rem-font-weight--color-eb-marg {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
    font-family: 'Poppins', sans-serif;
}

.background-linear-gradient-deg-f--cd--af-2 {
    background: linear-gradient(135deg, #0f1115 0%, #1c0d00 55%, #0a0f1a 100%);
    padding: 80px 0;
}

.position-absolute-top-px-left--transform-4 {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);

    background: {
            {
            $color
        }
    }

    ;
    color: #0f1115;
    font-size: 12.48px;
    font-weight: 800;
    padding: 5px 20px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.display-flex-align-items-center-gap--rem-12 {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
}

.width-px-height-px-background-color--bor-4 {
    width: 48px;
    height: 48px;

    background: {
            {
            $color
        }
    }

    22;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid {
            {
            $color
        }
    }

    44;
}

.font-size--rem-font-weight--color-white-11 {
    font-size: 20px;
    font-weight: 800;
    color: white;
    margin: 0;
    font-family: 'Poppins', sans-serif;
}

.color-rgba------font-size--rem-margin {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13.12px;
    margin: 0;
}

.background-rgba------border-radius-px-pa-6 {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 24px;
    text-align: center;

    border: 1px solid {
            {
            $color
        }
    }

    33;
}

.font-size-rem-font-weight--color-color-m {
    font-size: 16px;
    font-weight: 700;

    color: {
            {
            $color
        }
    }

    ;
    margin-bottom: 3.2px;
}

.font-size--rem-color-rgba-3 {
    font-size: 12.48px;
    color: rgba(255, 255, 255, 0.4);
}

.list-style-none-padding--margin----rem-d {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.display-block-text-align-center-backgrou-4 {
    display: block;
    text-align: center;

    background: {
            {
            $gymBtnBg
        }
    }

    ;

    color: {
            {
            $gymBtnColor
        }
    }

    ;
    padding: 13px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 15.2px;
    transition: all 0.3s;

    border: 1px solid {
            {
            $gymBtnBorder
        }
    }

    ;
}

.text-align-center-color-rgba------font-s {
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
    margin-top: 32px;
}

.display-inline-block-padding--rem--rem-b-17 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(255, 107, 0, 0.08);
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 107, 0, 0.2);
}

.width-px-height-px-background-color--bor-5 {
    width: 44px;
    height: 44px;

    background: {
            {
            $color
        }
    }

    15;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    border: 1px solid {
            {
            $color
        }
    }

    25;
}

.color-color-font-size-rem {
    color: {
            {
            $color
        }
    }

    ;
    font-size: 16px;
}

.font-weight--color-eb-margin-bottom--rem-4 {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 3.2px;
    font-size: 15.2px;
}

.color-b-font-size--rem-line-height-4 {
    color: #64748b;
    font-size: 13.92px;
    line-height: 1.65;
}

.background-white-border-radius-px-paddin-9 {
    background: white;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.font-size--rem-font-weight--color-ffb {
    font-size: 24px;
    font-weight: 900;
    color: #FF6B00;
}

.background-fafafa-border-radius-px-paddi {
    background: #fafafa;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e2e8f0;
}

.color-ffb-font-size--rem-2 {
    color: #FF6B00;
    font-size: 15.2px;
}

.border-px-solid-eef-border-radius-px-ove-2 {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    background: white;
}

.width--text-align-left-background-white {
    width: 100%;
    text-align: left;
    background: white;
    padding: 20px 24px;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 15.2px;
    font-weight: 600;
    color: #1e293b;
    font-family: 'Outfit', sans-serif;
}

.color-ffb-font-size--rem-flex-shrink--tr {
    color: #FF6B00;
    font-size: 12.8px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.display-none-padding---rem--rem-backgrou-2 {
    display: none;
    padding: 0 24px 20px;
    background: white;
    border-top: 1px solid #f1f5f9;
}

.color-b-font-size--rem-line-height---mar-8 {
    color: #64748b;
    font-size: 13px;
    line-height: 1.75;
    margin: 0;
    padding-top: 16px;
}

.background-linear-gradient-deg-f--cd--af-3 {
    background: linear-gradient(135deg, #0f1115 0%, #1c0d00 55%, #0a0f1a 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width-12 {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.12) 0%, transparent 70%);
    border-radius: 50%;
}

.position-absolute-bottom-px-left-px-widt-8 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.max-width-px-position-relative-z-index {
    max-width: 1200px;
    position: relative;
    z-index: 1;
}

.display-inline-flex-align-items-center-g-9 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 107, 0, 0.15);
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 24px;
    border: 1px solid rgba(255, 107, 0, 0.3);
}

.color-ffb-font-size--rem-3 {
    color: #FF6B00;
    font-size: 13px;
}

.font-size--rem-font-weight--color-rgba {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

.font-size--rem-font-weight--color-white-12 {
    font-size: 40px;
    font-weight: 900;
    color: white;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.2;
}

.color-rgba------font-size-rem-line-heigh {
    color: rgba(255, 255, 255, 0.65);
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 32px;
}

.display-flex-align-items-center-gap--rem-13 {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 15.2px;
    color: rgba(255, 255, 255, 0.8);
}

.width-px-height-px-background-color--bor-6 {
    width: 36px;
    height: 36px;

    background: {
            {
            $color
        }
    }

    22;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.color-color-font-size--rem-5 {
    color: {
            {
            $color
        }
    }

    ;
    font-size: 15.2px;
}

.background-rgba------backdrop-filter-blu-5 {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 40px;
}

.color-white-font-size--rem-font-weight {
    color: white;
    font-size: 20.8px;
    font-weight: 700;
    margin-bottom: 8px;
    font-family: 'Poppins', sans-serif;
}

.color-rgba------font-size--rem-margin-bo-4 {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14.08px;
    margin-bottom: 32px;
}

.width--padding--rem--rem-border-radius-p {
    width: 100%;
    padding: 13px 17px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.07);
    color: white;
    font-size: 14.72px;
    font-family: 'Outfit', sans-serif;
    box-sizing: border-box;
}

.width--padding--rem--rem-border-radius-p-2 {
    width: 100%;
    padding: 13px 17px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(30, 13, 0, 0.85);
    color: rgba(255, 255, 255, 0.75);
    font-size: 14.72px;
    font-family: 'Outfit', sans-serif;
    box-sizing: border-box;
    cursor: pointer;
}

.width--padding-rem-background-linear-gra {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #FF6B00, #e55f00);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: all 0.3s;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 4px 20px rgba(255, 107, 0, 0.4);
}

.text-align-center-color-rgba------font-s-2 {
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12.8px;
    margin-top: 16px;
}

.mr-48px {
    margin-right: 4.8px;
}

.background-white-padding-rem {
    background: white;
    padding: 64px 0;
}

.text-align-center-margin-bottom--rem-2 {
    text-align: center;
    margin-bottom: 40px;
}

.font-size--rem-font-weight--color-eb-fon-3 {
    font-size: 30px;
    font-weight: 800;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 12px;
}

.color-b-font-size--rem-max-width-px-marg-4 {
    color: #64748b;
    font-size: 15.2px;
    max-width: 560px;
    margin: 0 auto;
}

.display-grid-grid-template-columns-repea-15 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}

.background-ffafc-border-px-solid-eef-bor {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px;
    text-align: center;
    text-decoration: none;
    color: #475569;
    font-size: 13.12px;
    font-weight: 600;
    transition: all 0.3s;
}

.font-size--rem-margin-right--rem-color-f {
    font-size: 12px;
    margin-right: 4.8px;
    color: #FF6B00;
}

.background-linear-gradient-deg-ffff--faf {
    background: linear-gradient(135deg, #fff7f0 0%, #fafafa 100%);
    border-radius: 16px;
    padding: 32px 40px;
    border: 1px solid rgba(255, 107, 0, 0.15);
}

.background-white-border-px-solid-eef-bor {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 13.12px;
    color: #64748b;
    font-weight: 500;
}

.background-linear-gradient-deg-dba----a {
    background: linear-gradient(135deg, #0d1b2a 0%, #112240 55%, #0a1628 100%);
    padding: 80px 0 64px;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width-13 {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(29, 78, 216, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.position-absolute-bottom-px-left-px-widt-9 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.display-inline-flex-align-items-center-g-10 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(29, 78, 216, 0.18);
    backdrop-filter: blur(10px);
    padding: 9px 20px;
    border-radius: 50px;
    margin-bottom: 28px;
    border: 1px solid rgba(29, 78, 216, 0.4);
}

.width-px-height-px-background-feb-border {
    width: 8px;
    height: 8px;
    background: #f59e0b;
    border-radius: 50%;
    display: inline-block;
    animation: erpblink 1.5s ease-in-out infinite;
}

.color-feb-font-size--rem-flex-shrink {
    color: #f59e0b;
    font-size: 13px;
    flex-shrink: 0;
}

.background-linear-gradient-deg-ded--eaf {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    color: white;
    padding: 15.2px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    box-shadow: 0 4px 20px rgba(29, 78, 216, 0.45);
    transition: all 0.3s;
}

.font-size--rem-font-weight--color-feb-li {
    font-size: 28.8px;
    font-weight: 900;
    color: #f59e0b;
    line-height: 1;
}

.background-rgba------backdrop-filter-blu-6 {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(29, 78, 216, 0.25);
    border-radius: 20px;
    padding: 32px;
    position: relative;
    z-index: 1;
}

.background-rgba------border-radius-px-pa-7 {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 13px;
    text-align: center;
    border: 1px solid rgba(29, 78, 216, 0.2);
}

.font-size--rem-color-feb-margin-bottom {
    font-size: 19.2px;
    color: #f59e0b;
    margin-bottom: 5px;
    display: block;
}

.background-rgba------border-px-solid-rgb-8 {
    background: rgba(29, 78, 216, 0.12);
    border: 1px solid rgba(29, 78, 216, 0.25);
    border-radius: 8px;
    padding: 8.8px 16px;
    font-size: 13.92px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.position-absolute-top-px-right-px-width-14 {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.2), transparent 70%);
    border-radius: 50%;
}

.background-linear-gradient-deg-fafafa--e {
    background: linear-gradient(135deg, #fafafa 0%, #eff6ff 100%);
    padding: 80px 0;
}

.display-inline-block-padding--rem--rem-b-18 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(29, 78, 216, 0.08);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(29, 78, 216, 0.2);
}

.color-ded-font-weight--font-size--rem-te {
    color: #1d4ed8;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.display-grid-grid-template-columns-repea-16 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.background-ffafc-border-radius-px-paddin-3 {
    background: #f8fafc;
    border-radius: 16px;
    padding: 28px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s;
}

.width-px-height-px-background-color--bor-7 {
    width: 50px;
    height: 50px;

    background: {
            {
            $color
        }
    }

    15;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

    border: 1px solid {
            {
            $color
        }
    }

    25;
}

.color-color-font-size--rem-6 {
    color: {
            {
            $color
        }
    }

    ;
    font-size: 20px;
}

.font-size-rem-font-weight--color-eb-marg-2 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 9px;
}

.color-b-font-size--rem-line-height---mar-9 {
    color: #64748b;
    font-size: 13.92px;
    line-height: 1.7;
    margin: 0;
}

.background-linear-gradient-deg-dba----pa {
    background: linear-gradient(135deg, #0d1b2a 0%, #112240 100%);
    padding: 80px 0;
}

.display-inline-block-padding--rem--rem-b-19 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(245, 158, 11, 0.15);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.color-feb-font-weight--font-size--rem-te {
    color: #f59e0b;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.background-rgba------border-radius-px-ov-2 {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(29, 78, 216, 0.2);
    transition: all 0.3s;
}

.background-linear-gradient-deg-feb-d-col {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #0d1b2a;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
    transition: all 0.3s;
}

.color-b-font-size--rem-max-width-px-marg-5 {
    color: #64748b;
    font-size: 16.8px;
    max-width: 560px;
    margin: 0 auto;
}

.background-linear-gradient-deg-ffafc--ef {
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s;
}

.width-px-height-px-background-color--bor-8 {
    width: 52px;
    height: 52px;

    background: {
            {
            $color
        }
    }

    15;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;

    border: 1px solid {
            {
            $color
        }
    }

    25;
}

.font-size--rem-font-weight--color-eb-mar-12 {
    font-size: 16.8px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 9px;
}

.background-linear-gradient-deg-ffafc--ef-2 {
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
    padding: 80px 0;
}

.background-white-border-radius-px-paddin-10 {
    background: white;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s;
}

.mw-900 {
    max-width: 900px;
}

.color-b-font-size--rem-max-width-px-marg-6 {
    color: #64748b;
    font-size: 16.8px;
    max-width: 540px;
    margin: 0 auto;
}

.position-absolute-left-px-top--bottom--w {
    position: absolute;
    left: 31px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #1d4ed8 0%, #f59e0b 50%, #22c55e 100%);
}

.display-flex-flex-direction-column-gap-5 {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-left: 0;
}

.display-flex-gap-rem-align-items-flex-st-5 {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    position: relative;
}

.width-px-height-px-background-color-bord-7 {
    width: 64px;
    height: 64px;

    background: {
            {
            $color
        }
    }

    ;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;

    box-shadow: 0 4px 16px {
            {
            $color
        }
    }

    44;
}

.background-ffafc-border-radius-px-paddin-4 {
    background: #f8fafc;
    border-radius: 14px;
    padding: 28px;
    flex: 1;
    border: 1px solid #e2e8f0;
    margin-top: 8px;
}

.font-size--rem-font-weight--color-color-4 {
    font-size: 12px;
    font-weight: 700;

    color: {
            {
            $color
        }
    }

    ;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.font-size--rem-font-weight--color-eb-mar-13 {
    font-size: 17px;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 9px;
}

.color-rgba------font-size--rem-max-width-4 {
    color: rgba(255, 255, 255, 0.6);
    font-size: 16.8px;
    max-width: 540px;
    margin: 0 auto;
}

.position-absolute-top-px-left--transform-5 {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);

    background: {
            {
            $color
        }
    }

    ;
    color: #0d1b2a;
    font-size: 12.48px;
    font-weight: 800;
    padding: 5px 20px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.display-block-text-align-center-backgrou-5 {
    display: block;
    text-align: center;

    background: {
            {
            $erpBtnBg
        }
    }

    ;

    color: {
            {
            $erpBtnColor
        }
    }

    ;
    padding: 13px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 15.2px;
    transition: all 0.3s;

    border: 1px solid {
            {
            $erpBtnBorder
        }
    }

    ;
}

.display-inline-block-padding--rem--rem-b-20 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(29, 78, 216, 0.08);
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(29, 78, 216, 0.2);
}

.font-size--rem-font-weight--color-ded {
    font-size: 24px;
    font-weight: 900;
    color: #1d4ed8;
}

.background-ffafc-border-radius-px-paddin-5 {
    background: #f8fafc;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e2e8f0;
}

.color-feb-font-size--rem-2 {
    color: #f59e0b;
    font-size: 15.2px;
}

.font-size--rem-font-weight--color-eb-fon-4 {
    font-size: 35.2px;
    font-weight: 800;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
}

.display-flex-flex-direction-column-gap-6 {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.background-white-border-radius-px-border {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.width--text-align-left-padding--rem--rem {
    width: 100%;
    text-align: left;
    padding: 20px 24px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-weight: 700;
    color: #1e293b;
    font-size: 15.2px;
    font-family: 'Outfit', sans-serif;
}

.color-ded-font-size--rem-flex-shrink--tr {
    color: #1d4ed8;
    font-size: 12.8px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.background-linear-gradient-deg-dba----a-2 {
    background: linear-gradient(135deg, #0d1b2a 0%, #112240 55%, #0a1628 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width-15 {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(29, 78, 216, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.position-absolute-bottom-px-left-px-widt-10 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.display-inline-flex-align-items-center-g-11 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(245, 158, 11, 0.15);
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 24px;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.color-feb-font-size--rem-3 {
    color: #f59e0b;
    font-size: 13px;
}

.width--padding--rem--rem-border-radius-p-3 {
    width: 100%;
    padding: 13px 17px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(13, 27, 42, 0.9);
    color: rgba(255, 255, 255, 0.75);
    font-size: 14.72px;
    font-family: 'Outfit', sans-serif;
    box-sizing: border-box;
    cursor: pointer;
}

.width--padding-rem-background-linear-gra-2 {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #1d4ed8, #1e40af);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: all 0.3s;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 4px 20px rgba(29, 78, 216, 0.4);
}

.background-fff-padding--rem {
    background: #f1f5f9;
    padding: 56px 0;
}

.text-align-center-margin-bottom-rem-2 {
    text-align: center;
    margin-bottom: 32px;
}

.font-size--rem-font-weight--color-eb-fon-5 {
    font-size: 22px;
    font-weight: 800;
    color: #1e293b;
    font-family: 'Poppins', sans-serif;
}

.color-b-font-size--rem-margin-top--rem {
    color: #64748b;
    font-size: 13px;
    margin-top: 6px;
}

.display-flex-flex-wrap-wrap-gap--rem-jus-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 40px;
}

.display-inline-block-background-white-co {
    display: inline-block;
    background: white;
    color: #475569;
    padding: 7.2px 16px;
    border-radius: 50px;
    font-size: 13.28px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #e2e8f0;
    transition: all 0.2s;
    white-space: nowrap;
}

.display-flex-flex-wrap-wrap-gap--rem-jus-3 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.display-inline-block-background-rgba {
    display: inline-block;
    background: rgba(29, 78, 216, 0.07);
    color: #1d4ed8;
    padding: 5px 13px;
    border-radius: 6px;
    font-size: 12.8px;
    font-weight: 600;
    border: 1px solid rgba(29, 78, 216, 0.15);
}

.background-linear-gradient-deg-da--da--b {
    background: linear-gradient(135deg, #003DA5 0%, #002d7a 60%, #8B3A9C 100%);
    padding: 80px 0 64px;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width-16 {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.position-absolute-bottom-px-left-px-widt-11 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.display-inline-flex-align-items-center-g-12 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 9px 20px;
    border-radius: 50px;
    margin-bottom: 28px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.font-size--rem-font-weight--line-height-2 {
    font-size: 51.2px;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 24px;
    color: white;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -1px;
}

.font-size--rem-color-rgba------line-heig-2 {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.8;
    margin-bottom: 32px;
    max-width: 580px;
}

.background-ffb-color-white-padding--rem-2 {
    background: #FF6B00;
    color: white;
    padding: 15.2px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    box-shadow: 0 4px 20px rgba(255, 107, 0, 0.4);
    transition: all 0.3s;
}

.display-flex-gap-rem-flex-wrap-wrap-padd-2 {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.font-size--rem-color-rgba------font-weig-2 {
    font-size: 13.12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.background-rgba------backdrop-filter-blu-7 {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    padding: 32px;
    position: relative;
    z-index: 1;
}

.text-align-center-margin-bottom--rem-3 {
    text-align: center;
    margin-bottom: 24px;
}

.width-px-height-px-background-linear-gra-7 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #FF6B00, #e55f00);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 8px 24px rgba(255, 107, 0, 0.4);
}

.font-size--rem-color-white {
    font-size: 40px;
    color: white;
}

.color-white-font-size--rem-font-weight-2 {
    color: white;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.color-rgba------font-size--rem-margin--r {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    margin: 6px 0 0;
}

.background-rgba------border-radius-px-pa-8 {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.font-size--rem-color-ffb-margin-bottom-3 {
    font-size: 20.8px;
    color: #FF6B00;
    margin-bottom: 6px;
    display: block;
}

.font-size--rem-color-rgba-4 {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.background-rgba------border-px-solid-rgb-9 {
    background: rgba(255, 107, 0, 0.1);
    border: 1px solid rgba(255, 107, 0, 0.2);
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14.08px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.background-linear-gradient-deg-ffafc--ff-3 {
    background: linear-gradient(135deg, #f8fafc 0%, #f0f6ff 100%);
    padding: 80px 0;
}

.display-inline-block-padding--rem--rem-b-21 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(0, 61, 165, 0.08);
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(0, 61, 165, 0.15);
}

.color-da-font-weight--font-size--rem-tex {
    color: #003DA5;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.font-size--rem-font-weight--color-da-lin {
    font-size: 38px;
    font-weight: 800;
    color: #003DA5;
    line-height: 1.2;
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
}

.background-white-border-radius-px-paddin-11 {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 61, 165, 0.1);
    border: 1px solid rgba(0, 61, 165, 0.08);
}

.font-size--rem-font-weight--color-da-mar {
    font-size: 19.2px;
    font-weight: 700;
    color: #003DA5;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f1f5f9;
}

.color-ffb-margin-right--rem-2 {
    color: #FF6B00;
    margin-right: 8px;
}

.display-flex-align-items-flex-start-gap-3 {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 13px 0;
    border-bottom: 1px solid #f8fafc;
}

.width-px-height-px-background-rgba-4 {
    width: 38px;
    height: 38px;
    background: rgba(0, 61, 165, 0.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.color-comp--font-size-rem {
    color: {
            {
            $comp[1]
        }
    }

    ;
    font-size: 16px;
}

.font-weight--color-eb-font-size--rem-mar-2 {
    font-weight: 700;
    color: #1e293b;
    font-size: 14.72px;
    margin-bottom: 3.2px;
}

.color-b-font-size--rem-line-height-5 {
    color: #64748b;
    font-size: 13.12px;
    line-height: 1.5;
}

.display-inline-block-padding--rem--rem-b-22 {
    display: inline-block;
    padding: 8px 24px;
    background: rgba(255, 107, 0, 0.08);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 107, 0, 0.2);
}

.font-size--rem-font-weight--color-da-mar-2 {
    font-size: 40px;
    font-weight: 800;
    color: #003DA5;
    margin-bottom: 16px;
}

.color-b-font-size--rem-max-width-px-marg-7 {
    color: #64748b;
    font-size: 16.8px;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.8;
}

.display-grid-grid-template-columns-repea-17 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 28px;
}

.border-px-solid-eef-border-radius-px-pad {
    border: 2px solid #e2e8f0;
    border-radius: 18px;
    padding: 32px;
    transition: all 0.35s ease;
    position: relative;
    background: white;
}

.position-absolute-top-rem-right-rem-back {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #FF6B00;
    color: white;
    font-size: 11.2px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 20px;
}

.width-px-height-px-background-linear-gra-8 {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #003DA5, #0052d9);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.font-size--rem-font-weight--color-da-mar-3 {
    font-size: 18px;
    font-weight: 700;
    color: #003DA5;
    margin-bottom: 8px;
}

.color-b-font-size--rem-line-height---mar-10 {
    color: #64748b;
    font-size: 14.08px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.list-style-none-padding--display-flex-fl {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.display-flex-gap--rem-font-size--rem-col {
    display: flex;
    gap: 8px;
    font-size: 13px;
    color: #475569;
    align-items: center;
}

.color-da-font-size--rem-flex-shrink {
    color: #003DA5;
    font-size: 12px;
    flex-shrink: 0;
}

.border-px-solid-eef-border-radius-px-pad-2 {
    border: 2px solid #e2e8f0;
    border-radius: 18px;
    padding: 32px;
    transition: all 0.35s ease;
    background: white;
}

.width-px-height-px-background-linear-gra-9 {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #8B3A9C, #a855c7);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.color-bac-font-size--rem-flex-shrink {
    color: #8B3A9C;
    font-size: 12px;
    flex-shrink: 0;
}

.width-px-height-px-background-linear-gra-10 {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #FF6B00, #e55f00);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.color-ffb-font-size--rem-flex-shrink-3 {
    color: #FF6B00;
    font-size: 12px;
    flex-shrink: 0;
}

.width-px-height-px-background-linear-gra-11 {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #003DA5, #8B3A9C);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.width-px-height-px-background-linear-gra-12 {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #8B3A9C, #FF6B00);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.border-px-solid-eef-border-radius-px-pad-3 {
    border: 2px solid #e2e8f0;
    border-radius: 18px;
    padding: 32px;
    transition: all 0.35s ease;
    background: white;
    position: relative;
}

.position-absolute-top-rem-right-rem-back-2 {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #8B3A9C;
    color: white;
    font-size: 11.2px;
    font-weight: 700;
    padding: 4px 9px;
    border-radius: 20px;
}

.width-px-height-px-background-linear-gra-13 {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #FF6B00, #003DA5);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.text-align-center-margin-top-rem-padding {
    text-align: center;
    margin-top: 48px;
    padding: 24px;
    background: rgba(0, 61, 165, 0.04);
    border-radius: 12px;
    border: 1px solid rgba(0, 61, 165, 0.1);
}

.color--font-size--rem-margin {
    color: #475569;
    font-size: 15.2px;
    margin: 0;
}

.color-da-margin-right--rem {
    color: #003DA5;
    margin-right: 8px;
}

.color-ffb-font-weight--text-decoration-n {
    color: #FF6B00;
    font-weight: 700;
    text-decoration: none;
    margin-left: 8px;
}

.color-bac-font-weight--font-size--rem-te {
    color: #8B3A9C;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.display-grid-grid-template-columns-repea-18 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 24px;
}

.background-white-padding--rem-border-rad {
    background: white;
    padding: 28px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.width-px-height-px-background-feat---bor {
    width: 52px;
    height: 52px;

    background: {
            {
            $feat[1]
        }
    }

    15;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.color-feat--font-size--rem {
    color: {
            {
            $feat[1]
        }
    }

    ;
    font-size: 21px;
}

.font-size-rem-font-weight--color-da-marg {
    font-size: 16px;
    font-weight: 700;
    color: #003DA5;
    margin-bottom: 8px;
}

.display-grid-grid-template-columns-fr-fr-9 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: stretch;
}

.background-linear-gradient-deg-da--da--b-2 {
    background: linear-gradient(135deg, #003DA5 0%, #002d7a 100%);
    border-radius: 20px;
    padding: 40px;
    color: white;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width-17 {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 150px;
    height: 150px;
    background: rgba(255, 107, 0, 0.1);
    border-radius: 50%;
}

.width-px-height-px-background-rgba-5 {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.font-size--rem-font-weight--color-white-13 {
    font-size: 24px;
    font-weight: 800;
    color: white;
    margin-bottom: 12px;
}

.color-rgba------font-size--rem-line-heig-9 {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14.72px;
    line-height: 1.7;
    margin-bottom: 28px;
}

.display-flex-flex-direction-column-gap-7 {
    display: flex;
    flex-direction: column;
    gap: 11.2px;
}

.display-flex-align-items-center-gap--rem-14 {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.08px;
    color: rgba(255, 255, 255, 0.82);
}

.color-ffb-font-size--rem-flex-shrink-4 {
    color: #FF6B00;
    font-size: 12.8px;
    flex-shrink: 0;
}

.background-linear-gradient-deg-bac--dba {
    background: linear-gradient(135deg, #8B3A9C 0%, #6d2b7a 100%);
    border-radius: 20px;
    padding: 40px;
    color: white;
    position: relative;
    overflow: hidden;
}

.margin-top--rem-background-ffafc-border {
    margin-top: 40px;
    background: #f8fafc;
    border-radius: 16px;
    padding: 24px 32px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    justify-content: center;
}

.color-b-font-size--rem-font-weight--text-2 {
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.display-flex-align-items-center-gap--rem-15 {
    display: flex;
    align-items: center;
    gap: 6px;
}

.color-tech--font-size--rem {
    color: {
            {
            $tech[1]
        }
    }

    ;
    font-size: 20.8px;
}

.font-size--rem-font-weight--color {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

.color-b-font-size--rem-max-width-px-marg-8 {
    color: #64748b;
    font-size: 16.8px;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.8;
}

.display-grid-grid-template-columns-repea-19 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 20px;
}

.background-white-padding--rem-border-rad-2 {
    background: white;
    padding: 24px;
    border-radius: 14px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.width-px-height-px-background-ind---bord {
    width: 52px;
    height: 52px;

    background: {
            {
            $ind[1]
        }
    }

    12;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 13px;
}

.color-ind--font-size--rem {
    color: {
            {
            $ind[1]
        }
    }

    ;
    font-size: 22px;
}

.font-weight--color-eb-font-size--rem-mar-3 {
    font-weight: 700;
    color: #1e293b;
    font-size: 13px;
    margin-bottom: 4px;
}

.display-flex-gap--rem-align-items-flex-s {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.width-px-height-px-background-reason---b {
    width: 40px;
    height: 40px;

    background: {
            {
            $reason[1]
        }
    }

    15;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 800;
    font-size: 12.8px;

    color: {
            {
            $reason[1]
        }
    }

    ;
}

.font-weight--color-eb-font-size--rem-mar-4 {
    font-weight: 700;
    color: #1e293b;
    font-size: 15.2px;
    margin-bottom: 4px;
}

.color-b-font-size--rem-line-height-6 {
    color: #64748b;
    font-size: 13.92px;
    line-height: 1.6;
}

.display-grid-grid-template-columns-fr-fr-10 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.background-ffafc-border-radius-px-paddin-6 {
    background: #f8fafc;
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.font-size-rem-font-weight--color-stat--l {
    font-size: 32px;
    font-weight: 900;

    color: {
            {
            $stat[2]
        }
    }

    ;
    line-height: 1;
    margin-bottom: 6px;
}

.font-size--rem-color-b-font-weight--line {
    font-size: 13.12px;
    color: #64748b;
    font-weight: 500;
    line-height: 1.4;
}

.background-linear-gradient-deg-da--da--p {
    background: linear-gradient(135deg, #003DA5 0%, #002d7a 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width-18 {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.12), transparent 70%);
    border-radius: 50%;
}

.position-absolute-bottom-px-left-px-widt-12 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(139, 58, 156, 0.15), transparent 70%);
    border-radius: 50%;
}

.font-size--rem-font-weight--color-white-14 {
    font-size: 40px;
    font-weight: 800;
    color: white;
    margin-bottom: 16px;
}

.color-rgba------font-size--rem-max-width-5 {
    color: rgba(255, 255, 255, 0.75);
    font-size: 16.8px;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.8;
}

.display-grid-grid-template-columns-repea-20 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 24px;
    margin-bottom: 48px;
}

.background-rgba------border-px-solid-rgb-10 {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s ease;
    text-align: center;
}

.width-px-height-px-background-screen---b {
    width: 70px;
    height: 70px;

    background: {
            {
            $screen[1]
        }
    }

    25;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;

    border: 1px solid {
            {
            $screen[1]
        }
    }

    40;
}

.font-size--rem-color-screen {
    font-size: 28px;

    color: {
            {
            $screen[1]
        }
    }

    ;
}

.color-white-font-size-rem-font-weight--m {
    color: white;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 9px;
}

.color-rgba------font-size--rem-line-heig-10 {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.text-center-inline {
    text-align: center;
}

.background-ffb-color-white-padding--rem-3 {
    background: #FF6B00;
    color: white;
    padding: 17px 40px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    font-size: 16.8px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 4px 20px rgba(255, 107, 0, 0.4);
    transition: all 0.3s;
}

.color-rgba------font-size--rem-margin-to-3 {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    margin-top: 12px;
}

.background-linear-gradient-deg-ffff--ffa {
    background: linear-gradient(135deg, #f0f6ff 0%, #f8fafc 100%);
    padding: 80px 0;
}

.display-grid-grid-template-columns-repea-21 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 32px;
    max-width: 1100px;
    margin: 0 auto;
}

.background-white-border-radius-px-paddin-12 {
    background: white;
    border-radius: 20px;
    padding: 40px 32px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.font-size--rem-font-weight--color-da-tex {
    font-size: 12.8px;
    font-weight: 700;
    color: #003DA5;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.font-size--rem-font-weight--color-b-marg {
    font-size: 12.8px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.list-style-none-padding--display-flex-fl-2 {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 32px;
}

.display-flex-gap--rem-font-size--rem-col-2 {
    display: flex;
    gap: 9px;
    font-size: 13.92px;
    color: #475569;
    align-items: center;
}

.display-block-text-align-center-border-p {
    display: block;
    text-align: center;
    border: 2px solid #003DA5;
    color: #003DA5;
    padding: 12.8px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 15.2px;
    transition: all 0.3s;
}

.background-linear-gradient-deg-da--da--b-3 {
    background: linear-gradient(135deg, #003DA5 0%, #002d7a 100%);
    border-radius: 20px;
    padding: 40px 32px;
    border: 2px solid transparent;
    position: relative;
    transform: scale(1.03);
    box-shadow: 0 16px 40px rgba(0, 61, 165, 0.25);
}

.position-absolute-top-px-left--transform-6 {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #FF6B00;
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 4.8px 16px;
    border-radius: 20px;
    white-space: nowrap;
}

.font-size--rem-font-weight--color-rgba-2 {
    font-size: 12.8px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.font-size--rem-font-weight--color-rgba-3 {
    font-size: 12.8px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
    text-transform: uppercase;
}

.display-flex-gap--rem-font-size--rem-col-3 {
    display: flex;
    gap: 9px;
    font-size: 13.92px;
    color: rgba(255, 255, 255, 0.82);
    align-items: center;
}

.display-block-text-align-center-backgrou-6 {
    display: block;
    text-align: center;
    background: #FF6B00;
    color: white;
    padding: 13px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 15.2px;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(255, 107, 0, 0.4);
}

.font-size--rem-font-weight--color-bac-te {
    font-size: 12.8px;
    font-weight: 700;
    color: #8B3A9C;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.display-block-text-align-center-border-p-2 {
    display: block;
    text-align: center;
    border: 2px solid #8B3A9C;
    color: #8B3A9C;
    padding: 12.8px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 15.2px;
    transition: all 0.3s;
}

.background-linear-gradient-deg-da--bac-5 {
    background: linear-gradient(135deg, #003DA5 0%, #8B3A9C 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width-19 {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.12), transparent 70%);
    border-radius: 50%;
}

.background-rgba------border-px-solid-rgb-11 {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 28px;
    transition: all 0.3s ease;
}

.width-px-height-px-background-rgba-6 {
    width: 36px;
    height: 36px;
    background: rgba(255, 107, 0, 0.2);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12.8px;
    font-weight: 800;
    color: #FF6B00;
    flex-shrink: 0;
}

.width-px-height-px-background-rgba-7 {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-white-font-size-rem-font-weight--m-2 {
    color: white;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.color-rgba------font-size--rem-line-heig-11 {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13.92px;
    line-height: 1.7;
    margin: 0;
}

.text-align-center-margin-top-rem {
    text-align: center;
    margin-top: 48px;
}

.display-inline-flex-align-items-center-g-13 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 107, 0, 0.15);
    border: 1px solid rgba(255, 107, 0, 0.3);
    padding: 13px 32px;
    border-radius: 50px;
}

.color-white-font-weight--font-size--rem {
    color: white;
    font-weight: 600;
    font-size: 15.2px;
}

.background-white-border-radius-px-overfl-3 {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    transition: all 0.35s ease;
}

.background-linear-gradient-deg-cs---cs {
    background: linear-gradient(135deg, {
            {
            $cs[2]
        }
    }

    0%, {
        {
        $cs[2]
    }
}

cc 100%);
padding: 24px 32px;
display: flex;
justify-content: space-between;
align-items: center;
}

.font-size--rem-color-rgba------font-weig-3 {
    font-size: 11.52px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3.2px;
}

.width-px-height-px-background-rgba-8 {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-2800px {
    padding: 28px;
}

.color--font-size--rem-line-height---marg-2 {
    color: #475569;
    font-size: 14.08px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.display-grid-grid-template-columns-repea-22 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.text-align-center-background-ffafc-borde {
    text-align: center;
    background: #f8fafc;
    border-radius: 10px;
    padding: 12.8px 8px;
}

.font-size--rem-font-weight--color-stat {
    font-size: 17px;
    font-weight: 900;

    color: {
            {
            $stat[2]
        }
    }

    ;
    line-height: 1;
}

.font-size--rem-color-ab-line-height---ma {
    font-size: 11.2px;
    color: #94a3b8;
    line-height: 1.3;
    margin-top: 3.2px;
}

.display-flex-flex-wrap-wrap-gap--rem {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.background-rgba------color-da-padding--r {
    background: rgba(0, 61, 165, 0.06);
    color: #003DA5;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12.48px;
    font-weight: 600;
}

.color-b-font-size-rem-max-width-px-margi-6 {
    color: #64748b;
    font-size: 16px;
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.8;
}

.border-px-solid-eef-border-radius-px-ove-3 {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.width--text-align-left-padding--rem--rem-2 {
    width: 100%;
    text-align: left;
    padding: 20px 24px;
    background: white;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    transition: background 0.2s;
}

.font-weight--color-eb-font-size--rem-tex {
    font-weight: 700;
    color: #1e293b;
    font-size: 15.52px;
    text-align: left;
    line-height: 1.5;
}

.color-da-font-size--rem-flex-shrink--tra {
    color: #003DA5;
    font-size: 13px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.color-b-font-size--rem-line-height---mar-11 {
    color: #64748b;
    font-size: 13px;
    line-height: 1.8;
    margin: 0;
}

.position-absolute-top-px-right-px-width-20 {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.15), transparent 70%);
    border-radius: 50%;
}

.position-absolute-bottom-px-left-px-widt-13 {
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 70%);
    border-radius: 50%;
}

.position-relative-z-index--max-width-px {
    position: relative;
    z-index: 1;
    max-width: 900px;
}

.display-inline-flex-align-items-center-g-14 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 107, 0, 0.15);
    border: 1px solid rgba(255, 107, 0, 0.3);
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 24px;
}

.color-rgba------font-size--rem-font-weig {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
}

.font-size--rem-font-weight--color-white-15 {
    font-size: 44px;
    font-weight: 900;
    color: white;
    margin-bottom: 16px;
    font-family: 'Poppins', sans-serif;
    line-height: 1.15;
}

.color-rgba------font-size--rem-max-width-6 {
    color: rgba(255, 255, 255, 0.8);
    font-size: 17px;
    max-width: 620px;
    margin: 0 auto 40px;
    line-height: 1.8;
}

.background-ffb-color-white-padding--rem-4 {
    background: #FF6B00;
    color: white;
    padding: 17px 40px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    font-size: 16.8px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 4px 20px rgba(255, 107, 0, 0.45);
    transition: all 0.3s;
}

.background-d-color-white-padding--rem--r {
    background: #25D366;
    color: white;
    padding: 17px 40px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    font-size: 16.8px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: all 0.3s;
}

.background-transparent-color-white-paddi {
    background: transparent;
    color: white;
    padding: 17px 40px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    font-size: 16.8px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    transition: all 0.3s;
}

.display-flex-gap-rem-justify-content-cen-3 {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
}

.color-ffb-margin-right--rem-3 {
    color: #FF6B00;
    margin-right: 5px;
}

.background-linear-gradient-deg-da--da--a {
    background: linear-gradient(135deg, #003DA5 0%, #002d7a 55%, #1a1a4e 100%);
    padding: 80px 0 64px;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width-21 {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.position-absolute-bottom-px-left-px-widt-14 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.background-linear-gradient-deg-ffb--ef-2 {
    background: linear-gradient(135deg, #FF6B00 0%, #e55f00 100%);
    color: white;
    padding: 15.2px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    box-shadow: 0 4px 20px rgba(255, 107, 0, 0.4);
    transition: all 0.3s;
}

.background-rgba------border-px-solid-rgb-12 {
    background: rgba(255, 107, 0, 0.08);
    border: 1px solid rgba(255, 107, 0, 0.2);
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 14.08px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.font-size--rem-font-weight--color-da {
    font-size: 20.8px;
    font-weight: 900;
    color: #003DA5;
}

.background-linear-gradient-deg-da--da--a-2 {
    background: linear-gradient(135deg, #003DA5 0%, #002d7a 55%, #1a1a4e 100%);
    padding: 80px 0;
}

.display-inline-block-padding--rem--rem-b-23 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(0, 61, 165, 0.08);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(0, 61, 165, 0.15);
}

.font-size--rem-font-weight--color-da-2 {
    font-size: 24px;
    font-weight: 900;
    color: #003DA5;
}

.position-absolute-top-px-left--transform-7 {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);

    background: {
            {
            $color
        }
    }

    ;
    color: #002d7a;
    font-size: 12.48px;
    font-weight: 800;
    padding: 5px 20px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.display-block-text-align-center-backgrou-7 {
    display: block;
    text-align: center;

    background: {
            {
            $wBtnBg
        }
    }

    ;

    color: {
            {
            $wBtnColor
        }
    }

    ;
    padding: 13px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 15.2px;
    transition: all 0.3s;

    border: 1px solid {
            {
            $wBtnBorder
        }
    }

    ;
}

.color-da-font-size--rem-flex-shrink--tra-2 {
    color: #003DA5;
    font-size: 12.8px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.background-linear-gradient-deg-da--da--a-3 {
    background: linear-gradient(135deg, #003DA5 0%, #002d7a 55%, #1a1a4e 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.position-absolute-bottom-px-left-px-widt-15 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(139, 58, 156, 0.12) 0%, transparent 70%);
    border-radius: 50%;
}

.width-px-height-px-background-linear-gra-14 {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #FF6B00, #e55f00);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: 0 8px 28px rgba(255, 107, 0, 0.45);
}

.background-linear-gradient-deg-ffb-ef-co-2 {
    background: linear-gradient(135deg, #FF6B00, #e55f00);
    color: white;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16.8px;
    box-shadow: 0 4px 24px rgba(255, 107, 0, 0.4);
    transition: all 0.3s;
}

.min-height-vh-background-linear-gradient {
    min-height: 100vh;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 96px 0 64px;
}

.position-absolute-inset--opacity {
    position: absolute;
    inset: 0;
    opacity: 0.1;
}

.position-absolute-top--left--width-px-he {
    position: absolute;
    top: 20%;
    left: 10%;
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    border-radius: 50%;
    filter: blur(80px);
    animation: float 8s ease-in-out infinite;
}

.position-absolute-bottom--right--width-p {
    position: absolute;
    bottom: 20%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #ec4899, #f43f5e);
    border-radius: 50%;
    filter: blur(80px);
    animation: float 10s ease-in-out infinite reverse;
}

.display-inline-block-background-rgba-2 {
    display: inline-block;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 50px;
    padding: 8px 24px;
    margin-bottom: 24px;
}

.color-cf-font-weight--font-size--rem {
    color: #818cf8;
    font-weight: 600;
    font-size: 13px;
}

.font-size--rem-font-weight--color-white-16 {
    font-size: 56px;
    font-weight: 800;
    color: white;
    line-height: 1.2;
    margin-bottom: 24px;
}

.background-linear-gradient-deg-afa--abfa {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.font-size--rem-color-cbde-line-height {
    font-size: 20px;
    color: #cbd5e1;
    line-height: 1.8;
    margin-bottom: 40px;
}

.display-flex-gap-rem-margin-bottom-rem {
    display: flex;
    gap: 16px;
    margin-bottom: 48px;
}

.background-linear-gradient-deg-f--bcf--c {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
    transition: all 0.3s;
}

.background-rgba------backdrop-filter-blu-8 {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
}

.font-size-rem-font-weight--color-afa-mar {
    font-size: 32px;
    font-weight: 800;
    color: #60a5fa;
    margin-bottom: 8px;
}

.color-ab-font-size--rem-3 {
    color: #94a3b8;
    font-size: 13px;
}

.font-size-rem-font-weight--color-abfa-ma {
    font-size: 32px;
    font-weight: 800;
    color: #a78bfa;
    margin-bottom: 8px;
}

.font-size-rem-font-weight--color-fb-marg {
    font-size: 32px;
    font-weight: 800;
    color: #f472b6;
    margin-bottom: 8px;
}

.background-rgba------backdrop-filter-blu-9 {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 48px;
}

.color-white-font-size--rem-margin-bottom {
    color: white;
    font-size: 24px;
    margin-bottom: 32px;
    font-weight: 700;
}

.display-flex-flex-direction-column-gap-8 {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.display-flex-align-items-center-gap-rem-2 {
    display: flex;
    align-items: center;
    gap: 16px;
}

.width-px-height-px-background-linear-gra-15 {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-white-font-weight {
    color: white;
    font-weight: 600;
}

.width-px-height-px-background-linear-gra-16 {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ec4899, #f43f5e);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.width-px-height-px-background-linear-gra-17 {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.padding-rem--background-white {
    padding: 80px 0;
    background: white;
}

.display-block-text-align-center-backgrou-8 {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.font-size--rem-margin-bottom-rem-color-e {
    font-size: 36px;
    margin-bottom: 16px;
    color: #1e293b;
    font-weight: 800;
}

.font-size--rem-color-b-max-width-px-marg {
    font-size: 18px;
    color: #64748b;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

.display-grid-grid-template-columns-repea-23 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    gap: 32px;
}

.background-linear-gradient-deg-ffafc--ff-4 {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 20px;
    padding: 40px;
    border: 2px solid #e2e8f0;
    transition: all 0.3s;
}

.width-px-height-px-background-linear-gra-18 {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.font-size--rem-color-eb-margin-bottom-re {
    font-size: 24px;
    color: #1e293b;
    margin-bottom: 16px;
    font-weight: 700;
}

.color-b-line-height---margin-bottom--rem {
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 24px;
}

.list-style-none-padding--color {
    list-style: none;
    padding: 0;
    color: #475569;
}

.padding--rem--display-flex-align-items-c {
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-indigo {
    color: #6366f1;
}

.background-linear-gradient-deg-feff--fee {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 20px;
    padding: 40px;
    border: 2px solid #fecaca;
    transition: all 0.3s;
}

.width-px-height-px-background-linear-gra-19 {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.color-pink {
    color: #ec4899;
}

.background-linear-gradient-deg-ffdf--dcf {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 20px;
    padding: 40px;
    border: 2px solid #bbf7d0;
    transition: all 0.3s;
}

.width-px-height-px-background-linear-gra-20 {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.background-linear-gradient-deg-fffbeb--f {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-radius: 20px;
    padding: 40px;
    border: 2px solid #fde68a;
    transition: all 0.3s;
}

.width-px-height-px-background-linear-gra-21 {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.background-linear-gradient-deg-effff--db {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 20px;
    padding: 40px;
    border: 2px solid #bfdbfe;
    transition: all 0.3s;
}

.width-px-height-px-background-linear-gra-22 {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.color-sky {
    color: #0ea5e9;
}

.background-linear-gradient-deg-fafff--fe {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-radius: 20px;
    padding: 40px;
    border: 2px solid #e9d5ff;
    transition: all 0.3s;
}

.width-px-height-px-background-linear-gra-23 {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.color-violet-2 {
    color: #8b5cf6;
}

.padding-rem--background-linear-gradient {
    padding: 80px 0;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    position: relative;
    overflow: hidden;
}

.display-block-text-align-center-backgrou-9 {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.font-size--rem-margin-bottom-rem-color-w {
    font-size: 36px;
    margin-bottom: 16px;
    color: white;
    font-weight: 800;
}

.font-size--rem-color-ab-max-width-px-mar {
    font-size: 18px;
    color: #94a3b8;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

.display-grid-grid-template-columns-repea-24 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 32px;
}

.background-rgba------backdrop-filter-blu-10 {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 32px;
    transition: all 0.3s;
}

.font-size--rem-margin-bottom-rem {
    font-size: 40px;
    margin-bottom: 16px;
}

.color-white-font-size--rem-margin-bottom-2 {
    color: white;
    font-size: 20.8px;
    margin-bottom: 16px;
    font-weight: 700;
}

.color-ab-line-height---margin-bottom-rem {
    color: #94a3b8;
    line-height: 1.8;
    margin-bottom: 16px;
}

.position-relative-padding-rem-background {
    position: relative;
    padding: 32px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 20px;
    border-left: 4px solid #6366f1;
}

.width-px-height-px-background-linear-gra-24 {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 800;
    color: white;
}

.font-size--rem-color-eb-margin-bottom-re-2 {
    font-size: 22px;
    color: #1e293b;
    margin-bottom: 16px;
    font-weight: 700;
}

.color-b-line-height---margin-bottom-rem {
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 16px;
}

.color-f-font-weight--font-size--rem {
    color: #6366f1;
    font-weight: 600;
    font-size: 13px;
}

.position-relative-padding-rem-background-2 {
    position: relative;
    padding: 32px;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 20px;
    border-left: 4px solid #ec4899;
}

.width-px-height-px-background-linear-gra-25 {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 800;
    color: white;
}

.color-ec-font-weight--font-size--rem {
    color: #ec4899;
    font-weight: 600;
    font-size: 13px;
}

.position-relative-padding-rem-background-3 {
    position: relative;
    padding: 32px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 20px;
    border-left: 4px solid #10b981;
}

.width-px-height-px-background-linear-gra-26 {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 800;
    color: white;
}

.color-b-font-weight--font-size--rem {
    color: #10b981;
    font-weight: 600;
    font-size: 13px;
}

.position-relative-padding-rem-background-4 {
    position: relative;
    padding: 32px;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-radius: 20px;
    border-left: 4px solid #f59e0b;
}

.width-px-height-px-background-linear-gra-27 {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 800;
    color: white;
}

.color-feb-font-weight--font-size--rem {
    color: #f59e0b;
    font-weight: 600;
    font-size: 13px;
}

.position-relative-padding-rem-background-5 {
    position: relative;
    padding: 32px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 20px;
    border-left: 4px solid #0ea5e9;
}

.width-px-height-px-background-linear-gra-28 {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 800;
    color: white;
}

.color-eae-font-weight--font-size--rem {
    color: #0ea5e9;
    font-weight: 600;
    font-size: 13px;
}

.position-relative-padding-rem-background-6 {
    position: relative;
    padding: 32px;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
    border-radius: 20px;
    border-left: 4px solid #8b5cf6;
}

.width-px-height-px-background-linear-gra-29 {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 24px;
    font-weight: 800;
    color: white;
}

.color-bcf-font-weight--font-size--rem {
    color: #8b5cf6;
    font-weight: 600;
    font-size: 13px;
}

.padding-rem--background-linear-gradient-2 {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.display-block-text-align-center-backgrou-10 {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.background-white-padding-rem-border-radi {
    background: white;
    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s;
}

.font-size--rem-color-eb-margin-bottom-re-3 {
    font-size: 20.8px;
    color: #1e293b;
    margin-bottom: 16px;
    font-weight: 700;
}

.color-b-line-height {
    color: #64748b;
    line-height: 1.8;
}

.display-block-text-align-center-backgrou-11 {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.display-grid-grid-template-columns-repea-25 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    gap: 40px;
}

.background-linear-gradient-deg-ffafc--ff-5 {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

.height-px-background-linear-gradient-deg {
    height: 200px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

.font-size--rem-color-eb-margin-bottom--r {
    font-size: 24px;
    color: #1e293b;
    margin-bottom: 8px;
    font-weight: 700;
}

.color-f-font-weight--margin-bottom-rem {
    color: #6366f1;
    font-weight: 600;
    margin-bottom: 16px;
}

.display-flex-gap-rem-margin-bottom--rem {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.background-rgba------color-f-padding--re {
    background: rgba(99, 102, 241, 0.1);
    color: #6366f1;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.border-top-px-solid-eef-padding-top-rem {
    border-top: 1px solid #e2e8f0;
    padding-top: 16px;
}

.background-linear-gradient-deg-feff--fee-2 {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

.height-px-background-linear-gradient-deg-2 {
    height: 200px;
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

.color-ec-font-weight--margin-bottom-rem {
    color: #ec4899;
    font-weight: 600;
    margin-bottom: 16px;
}

.background-rgba------color-ec-padding--r {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.border-top-px-solid-fecaca-padding-top-r {
    border-top: 1px solid #fecaca;
    padding-top: 16px;
}

.background-linear-gradient-deg-ffdf--dcf-2 {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
}

.height-px-background-linear-gradient-deg-3 {
    height: 200px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

.color-b-font-weight--margin-bottom-rem {
    color: #10b981;
    font-weight: 600;
    margin-bottom: 16px;
}

.background-rgba------color-b-padding--re {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.border-top-px-solid-bbfd-padding-top-rem {
    border-top: 1px solid #bbf7d0;
    padding-top: 16px;
}

.background-linear-gradient-deg-b----colo {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
    transition: all 0.3s;
}

.padding-rem--background-linear-gradient-3 {
    padding: 80px 0;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.display-block-text-align-center-backgrou-12 {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.display-grid-grid-template-columns-repea-26 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 24px;
}

.background-rgba------backdrop-filter-blu-11 {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    transition: all 0.3s;
}

.font-size-rem-margin-bottom-rem-2 {
    font-size: 48px;
    margin-bottom: 16px;
}

.color-white-font-size--rem-margin-bottom-3 {
    color: white;
    font-size: 19.2px;
    margin-bottom: 8px;
    font-weight: 700;
}

.display-block-text-align-center-backgrou-13 {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.background-linear-gradient-deg-ffafc--ff-6 {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 40px;
    border-radius: 20px;
    border-left: 4px solid #6366f1;
    position: relative;
}

.color-f-font-size-rem-line-height--margi {
    color: #6366f1;
    font-size: 48px;
    line-height: 1;
    margin-bottom: 16px;
}

.color--line-height---margin-bottom--rem-2 {
    color: #475569;
    line-height: 1.8;
    margin-bottom: 24px;
    font-size: 16.8px;
}

.width-px-height-px-background-linear-gra-30 {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 19.2px;
}

.font-weight--color-eb {
    font-weight: 700;
    color: #1e293b;
}

.color-b-font-size--rem-2 {
    color: #64748b;
    font-size: 13px;
}

.margin-top-rem-color-feb {
    margin-top: 16px;
    color: #f59e0b;
}

.background-linear-gradient-deg-feff--fee-3 {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    padding: 40px;
    border-radius: 20px;
    border-left: 4px solid #ec4899;
    position: relative;
}

.color-ec-font-size-rem-line-height--marg {
    color: #ec4899;
    font-size: 48px;
    line-height: 1;
    margin-bottom: 16px;
}

.width-px-height-px-background-linear-gra-31 {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ec4899, #f43f5e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 19.2px;
}

.background-linear-gradient-deg-ffdf--dcf-3 {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    padding: 40px;
    border-radius: 20px;
    border-left: 4px solid #10b981;
    position: relative;
}

.color-b-font-size-rem-line-height--margi {
    color: #10b981;
    font-size: 48px;
    line-height: 1;
    margin-bottom: 16px;
}

.width-px-height-px-background-linear-gra-32 {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 19.2px;
}

.margin-top-rem-text-align-center {
    margin-top: 64px;
    text-align: center;
}

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

.font-size--rem-font-weight--color-f-marg {
    font-size: 40px;
    font-weight: 800;
    color: #6366f1;
    margin-bottom: 8px;
}

.font-size--rem-font-weight--color-b-marg-2 {
    font-size: 40px;
    font-weight: 800;
    color: #10b981;
    margin-bottom: 8px;
}

.font-size--rem-font-weight--color-ec-mar {
    font-size: 40px;
    font-weight: 800;
    color: #ec4899;
    margin-bottom: 8px;
}

.mw-1000 {
    max-width: 1000px;
}

.mb-560px {
    margin-bottom: 56px;
}

.display-block-text-align-center-backgrou-14 {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.font-size--rem-margin-bottom-rem-color-e-2 {
    font-size: 40px;
    margin-bottom: 16px;
    color: #1e293b;
}

.font-size--rem-color-b-max-width-px-marg-2 {
    font-size: 17px;
    color: #64748b;
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.8;
}

.background-white-border-radius-px-border-2 {
    background: white;
    border-radius: 16px;
    border: 2px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s;
}

.width--text-align-left-background-transp {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 24px 32px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
}

.font-size--rem-color-eb-margin--font-wei {
    font-size: 19.2px;
    color: #1e293b;
    margin: 0;
    font-weight: 700;
}

.font-size--rem-color-f-transition-transf {
    font-size: 19.2px;
    color: #6366f1;
    transition: transform 0.3s;
}

.max-height--overflow-hidden-transition-m {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.p-0-2-15-32px {
    padding: 0 32px 24px 32px;
}

.color-b-line-height---margin {
    color: #64748b;
    line-height: 1.8;
    margin: 0;
}

.font-size--rem-color-ec-transition-trans {
    font-size: 19.2px;
    color: #ec4899;
    transition: transform 0.3s;
}

.font-size--rem-color-b-transition-transf {
    font-size: 19.2px;
    color: #10b981;
    transition: transform 0.3s;
}

.font-size--rem-color-feb-transition-tran {
    font-size: 19.2px;
    color: #f59e0b;
    transition: transform 0.3s;
}

.font-size--rem-color-eae-transition-tran {
    font-size: 19.2px;
    color: #0ea5e9;
    transition: transform 0.3s;
}

.font-size--rem-color-bcf-transition-tran {
    font-size: 19.2px;
    color: #8b5cf6;
    transition: transform 0.3s;
}

.max-width-px-text-align-center-position-2 {
    max-width: 900px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.font-size-rem-color-white-margin-bottom {
    font-size: 48px;
    color: white;
    margin-bottom: 24px;
    font-weight: 800;
}

.font-size--rem-color-ab-margin-bottom-re {
    font-size: 20px;
    color: #94a3b8;
    margin-bottom: 48px;
    line-height: 1.8;
}

.display-flex-gap--rem-justify-content-ce {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.background-linear-gradient-deg-f--bcf--c-2 {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    padding: 20px 48px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
    transition: all 0.3s;
}

.background-rgba------backdrop-filter-blu-12 {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    padding: 20px 48px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 17px;
    text-decoration: none;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
}

.display-flex-gap-rem-justify-content-cen-4 {
    display: flex;
    gap: 48px;
    justify-content: center;
    color: #94a3b8;
}

.color-b-margin-right--rem {
    color: #10b981;
    margin-right: 8px;
}

.background-linear-gradient-deg-ce--d--d {
    background: linear-gradient(135deg, #061c2e 0%, #0d3349 55%, #071d30 100%);
    padding: 80px 0 64px;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width-22 {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.position-absolute-bottom-px-left-px-widt-16 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.display-inline-flex-align-items-center-g-15 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(16, 185, 129, 0.15);
    backdrop-filter: blur(10px);
    padding: 9px 20px;
    border-radius: 50px;
    margin-bottom: 28px;
    border: 1px solid rgba(16, 185, 129, 0.35);
}

.width-px-height-px-background-b-border-r {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    display: inline-block;
    animation: serpblink 1.5s ease-in-out infinite;
}

.color-b-font-size--rem-flex-shrink {
    color: #10b981;
    font-size: 13px;
    flex-shrink: 0;
}

.background-linear-gradient-deg-b----colo-2 {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 15.2px 32px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.45);
    transition: all 0.3s;
}

.font-size--rem-font-weight--color-b-line-2 {
    font-size: 28.8px;
    font-weight: 900;
    color: #10b981;
    line-height: 1;
}

.background-rgba------backdrop-filter-blu-13 {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 20px;
    padding: 32px;
    position: relative;
    z-index: 1;
}

.width--border-radius-px-overflow-hidden {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 24px;
}

.width--height-px-object-fit-cover-displa {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

.background-rgba------border-radius-px-pa-9 {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 13px;
    text-align: center;
    border: 1px solid rgba(16, 185, 129, 0.18);
}

.font-size--rem-color-b-margin-bottom--re {
    font-size: 19.2px;
    color: #10b981;
    margin-bottom: 5px;
    display: block;
}

.background-rgba------border-px-solid-rgb-13 {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.22);
    border-radius: 8px;
    padding: 8.8px 16px;
    font-size: 13.92px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
}

.position-absolute-top-px-right-px-width-23 {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.2), transparent 70%);
    border-radius: 50%;
}

.background-linear-gradient-deg-fafafa--e-2 {
    background: linear-gradient(135deg, #fafafa 0%, #ecfdf5 100%);
    padding: 80px 0;
}

.display-inline-block-padding--rem--rem-b-24 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.color--font-weight--font-size--rem-text {
    color: #059669;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.font-size--rem-font-weight--color-b-marg-3 {
    font-size: 20.8px;
    font-weight: 700;
    color: #10b981;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.display-flex-gap-rem-align-items-flex-st-6 {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #f0fdf4;
    padding: 16px 20px;
    border-radius: 10px;
    border-left: 4px solid #10b981;
}

.color-b-font-size--rem-flex-shrink--marg {
    color: #10b981;
    font-size: 17px;
    flex-shrink: 0;
    margin-top: 2px;
}

.background-linear-gradient-deg-ce--d--pa {
    background: linear-gradient(135deg, #061c2e 0%, #0d3349 100%);
    padding: 80px 0;
}

.display-inline-block-padding--rem--rem-b-25 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(251, 191, 36, 0.15);
    border-radius: 50px;
    margin-bottom: 16px;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.color-fbbf-font-weight--font-size--rem-t {
    color: #fbbf24;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.background-rgba------border-radius-px-ov-3 {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(16, 185, 129, 0.18);
    transition: all 0.3s;
}

.h-220-clip {
    height: 220px;
    overflow: hidden;
}

.width--height--object-fit-cover-display-2 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}

.background-linear-gradient-deg-b--color {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
    transition: all 0.3s;
}

.background-linear-gradient-deg-ffafc--ec {
    background: linear-gradient(135deg, #f8fafc 0%, #ecfdf5 100%);
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s;
}

.background-linear-gradient-deg-ffafc--ec-2 {
    background: linear-gradient(135deg, #f8fafc 0%, #ecfdf5 100%);
    padding: 80px 0;
}

.position-absolute-left-px-top--bottom--w-2 {
    position: absolute;
    left: 31px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #10b981 0%, #f59e0b 50%, #8b5cf6 100%);
}

.display-flex-flex-direction-column-gap-9 {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.position-absolute-top-px-left--transform-8 {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);

    background: {
            {
            $color
        }
    }

    ;
    color: #061c2e;
    font-size: 12.48px;
    font-weight: 800;
    padding: 5px 20px;
    border-radius: 20px;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.display-block-text-align-center-backgrou-15 {
    display: block;
    text-align: center;

    background: {
            {
            $serpBtnBg
        }
    }

    ;

    color: {
            {
            $serpBtnColor
        }
    }

    ;
    padding: 13px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 15.2px;
    transition: all 0.3s;

    border: 1px solid {
            {
            $serpBtnBorder
        }
    }

    ;
}

.display-inline-block-padding--rem--rem-b-26 {
    display: inline-block;
    padding: 7.2px 20px;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.width--height-px-border-radius-px-overfl {
    width: 100%;
    height: 260px;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 24px;
}

.width--height--object-fit-cover-display-3 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.font-size--rem-font-weight--color-b-3 {
    font-size: 24px;
    font-weight: 900;
    color: #10b981;
}

.width-px-height-px-border-radius--object-2 {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #e2e8f0;
}

.color-b-font-size--rem-flex-shrink--tran-2 {
    color: #10b981;
    font-size: 12.8px;
    flex-shrink: 0;
    transition: transform 0.3s;
}

.background-linear-gradient-deg-ce--d--d-2 {
    background: linear-gradient(135deg, #061c2e 0%, #0d3349 55%, #071d30 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.position-absolute-top-px-right-px-width-24 {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.12) 0%, transparent 70%);
    border-radius: 50%;
}

.position-absolute-bottom-px-left-px-widt-17 {
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.08) 0%, transparent 70%);
    border-radius: 50%;
}

.display-inline-flex-align-items-center-g-16 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(16, 185, 129, 0.15);
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 24px;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.color-b-font-size--rem-3 {
    color: #10b981;
    font-size: 13px;
}

.width--padding--rem--rem-border-radius-p-4 {
    width: 100%;
    padding: 13px 17px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(6, 28, 46, 0.9);
    color: rgba(255, 255, 255, 0.75);
    font-size: 14.72px;
    font-family: 'Outfit', sans-serif;
    box-sizing: border-box;
    cursor: pointer;
}

.width--padding-rem-background-linear-gra-3 {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: all 0.3s;
    font-family: 'Outfit', sans-serif;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
}

.display-inline-block-background-rgba-3 {
    display: inline-block;
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
    padding: 5px 13px;
    border-radius: 6px;
    font-size: 12.8px;
    font-weight: 600;
    border: 1px solid rgba(16, 185, 129, 0.18);
}

.background-ffafc-padding-rem--border-bot-2 {
    background: #f8fafc;
    padding: 16px 0;
    border-bottom: 1px solid #e2e8f0;
}

.display-flex-align-items-center-gap--rem-16 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-light);
}

.color-var-primary-text-decoration-none {
    color: var(--primary);
    text-decoration: none;
}

.text-112px {
    font-size: 11.2px;
}

.color-var-text-main-font-weight {
    color: var(--text-main);
    font-weight: 600;
}

.background-linear-gradient-deg-fa--eb {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    padding: 48px 0 40px;
    position: relative;
    overflow: hidden;
}

.position-absolute-top--left--right--bott-4 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    overflow: hidden;
}

.position-absolute-top--left--width-px-he-2 {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 20s ease-in-out infinite;
}

.position-absolute-bottom--right--width-p-2 {
    position: absolute;
    bottom: 15%;
    right: 8%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    animation: float 25s ease-in-out infinite reverse;
}

.position-absolute-top--left--width-px-he-3 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 15s ease-in-out infinite;
}

.position-absolute-top--left--right--bott-5 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 0;
    opacity: 0.3;
}

.max-width-px-position-relative-z-index-2 {
    position: relative;
    z-index: 1;
    padding: 0 24px;
}

.display-inline-flex-align-items-center-g-17 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 50px;
    margin-bottom: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.width-px-height-px-background-b-border-r-2 {
    width: 10px;
    height: 10px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.font-size--rem-font-weight--letter-spaci-2 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.font-size--rem-font-weight--line-height-3 {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.font-size--rem-line-height---color-cbde {
    font-size: 20px;
    line-height: 1.7;
    color: #cbd5e1;
    margin-bottom: 24px;
    font-weight: 400;
}

.color-indigo-light {
    color: #e0e7ff;
}

.display-grid-grid-template-columns-fr-fr-11 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 28px;
}

.display-flex-align-items-center-gap--rem-17 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.width-px-height-px-background-linear-gra-33 {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.font-size--rem-color-white-2 {
    font-size: 12px;
    color: white;
}

.color-eef-font-size--rem {
    color: #e2e8f0;
    font-size: 15.2px;
}

.width-px-height-px-background-linear-gra-34 {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.width-px-height-px-background-linear-gra-35 {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.width-px-height-px-background-linear-gra-36 {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.display-flex-gap-rem-flex-wrap-wrap-marg-2 {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}

.background-linear-gradient-deg-b----colo-3 {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 20px 40px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
    font-size: 16.8px;
    min-height: 56px;
}

.background-rgba------backdrop-filter-blu-14 {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    padding: 20px 40px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s;
    border: 2px solid rgba(255, 255, 255, 0.2);
    font-size: 16.8px;
    min-height: 56px;
}

.display-flex-gap-rem-flex-wrap-wrap-padd-3 {
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.display-flex-align-items-center-gap--rem-18 {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e2e8f0;
    text-decoration: none;
    transition: all 0.3s;
    min-height: 48px;
}

.width-px-height-px-background-rgba-9 {
    width: 40px;
    height: 40px;
    background: rgba(16, 185, 129, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.font-size--rem-color-ab-margin-bottom--r {
    font-size: 12px;
    color: #94a3b8;
    margin-bottom: 4px;
}

.font-weight--font-size--rem-2 {
    font-weight: 600;
    font-size: 15.2px;
}

.width-px-height-px-background-rgba-10 {
    width: 40px;
    height: 40px;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.background-rgba------backdrop-filter-blu-15 {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 48px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.width-px-height-px-background-linear-gra-37 {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 32px;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
}

.font-size-rem-color-white-2 {
    font-size: 48px;
    color: white;
}

.display-grid-grid-template-columns-fr-fr-12 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.background-rgba------border-radius-px-pa-10 {
    background: rgba(16, 185, 129, 0.1);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    text-align: center;
}

.color-cbde-font-size--rem-font-weight {
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
}

.background-rgba------border-radius-px-pa-11 {
    background: rgba(59, 130, 246, 0.1);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    text-align: center;
}

.font-size--rem-font-weight--color-bf-mar {
    font-size: 40px;
    font-weight: 800;
    color: #3b82f6;
    margin-bottom: 8px;
}

.background-rgba------border-radius-px-pa-12 {
    background: rgba(236, 72, 153, 0.1);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(236, 72, 153, 0.2);
    text-align: center;
}

.background-rgba------border-radius-px-pa-13 {
    background: rgba(245, 158, 11, 0.1);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(245, 158, 11, 0.2);
    text-align: center;
}

.font-size--rem-font-weight--color-feb-ma {
    font-size: 40px;
    font-weight: 800;
    color: #f59e0b;
    margin-bottom: 8px;
}

.margin-top-rem-padding-top-rem-border-to {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.display-flex-align-items-center-justify-4 {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 24px;
}

.font-size-rem-color-b-margin-bottom--rem {
    font-size: 32px;
    color: #10b981;
    margin-bottom: 8px;
}

.color-cbde-font-size--rem-font-weight-2 {
    color: #cbd5e1;
    font-size: 12.8px;
    font-weight: 600;
}

.font-size-rem-color-ec-margin-bottom--re {
    font-size: 32px;
    color: #ec4899;
    margin-bottom: 8px;
}

.font-size-rem-color-bf-margin-bottom--re {
    font-size: 32px;
    color: #3b82f6;
    margin-bottom: 8px;
}

.font-size-rem-color-feb-margin-bottom--r {
    font-size: 32px;
    color: #f59e0b;
    margin-bottom: 8px;
}

.position-absolute-top-px-right-px-width-25 {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
    animation: float 6s ease-in-out infinite;
}

.background-linear-gradient-deg-ffffff--f {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    padding: 64px 0;
    position: relative;
    overflow: hidden;
}

.position-absolute-top--right--width-px-h {
    position: absolute;
    top: 15%;
    right: 8%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.position-absolute-bottom--left--width-px {
    position: absolute;
    bottom: 20%;
    left: 5%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.display-block-text-align-center-backgrou-16 {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.font-size--rem-color-b-max-width-px-marg-3 {
    font-size: 17px;
    color: #64748b;
    max-width: 750px;
    margin: 0 auto;
    line-height: 1.8;
}

.display-grid-grid-template-columns-repea-27 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 32px;
    margin-top: 48px;
}

.background-white-border-radius-px-paddin-13 {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 4px solid #10b981;
}

.width-px-height-px-background-linear-gra-38 {
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    position: relative;
}

.font-size--rem-color-b {
    font-size: 35.2px;
    color: #10b981;
}

.position-absolute-top-px-right-px-width-26 {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}

.font-size--rem-color-white-3 {
    font-size: 11.2px;
    color: white;
}

.font-size--rem-margin-bottom-rem-color-e-3 {
    font-size: 24px;
    margin-bottom: 16px;
    color: #1e293b;
    font-weight: 700;
}

.color-b-line-height---margin-bottom--rem-2 {
    color: #64748b;
    line-height: 1.8;
    margin-bottom: 24px;
    font-size: 15.2px;
}

.display-flex-align-items-center-gap--rem-19 {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #475569;
    font-size: 13px;
}

.color-b-flex-shrink {
    color: #10b981;
    flex-shrink: 0;
}

.background-white-border-radius-px-paddin-14 {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 4px solid #3b82f6;
}

.width-px-height-px-background-linear-gra-39 {
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.font-size--rem-color-bf {
    font-size: 35.2px;
    color: #3b82f6;
}

.color-bf-flex-shrink {
    color: #3b82f6;
    flex-shrink: 0;
}

.background-white-border-radius-px-paddin-15 {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 4px solid #ec4899;
}

.width-px-height-px-background-linear-gra-40 {
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.font-size--rem-color-ec {
    font-size: 35.2px;
    color: #ec4899;
}

.color-ec-flex-shrink {
    color: #ec4899;
    flex-shrink: 0;
}

.background-white-border-radius-px-paddin-16 {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 4px solid #f59e0b;
}

.width-px-height-px-background-linear-gra-41 {
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.font-size--rem-color-feb {
    font-size: 35.2px;
    color: #f59e0b;
}

.color-feb-flex-shrink {
    color: #f59e0b;
    flex-shrink: 0;
}

.background-white-border-radius-px-paddin-17 {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 4px solid #8b5cf6;
}

.width-px-height-px-background-linear-gra-42 {
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.font-size--rem-color-bcf {
    font-size: 35.2px;
    color: #8b5cf6;
}

.color-bcf-flex-shrink {
    color: #8b5cf6;
    flex-shrink: 0;
}

.background-white-border-radius-px-paddin-18 {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 4px solid #06b6d4;
}

.width-px-height-px-background-linear-gra-43 {
    width: 75px;
    height: 75px;
    background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.font-size--rem-color-bd {
    font-size: 35.2px;
    color: #06b6d4;
}

.color-bd-flex-shrink {
    color: #06b6d4;
    flex-shrink: 0;
}

.mt-64px {
    margin-top: 64px;
}

.text-align-center-background-linear-grad {
    text-align: center;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 20px;
    padding: 40px 32px;
    margin-bottom: 32px;
    border-left: 5px solid #10b981;
}

.display-flex-align-items-center-justify-5 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.display-flex-align-items-center-gap--rem-20 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.color-b-font-size--rem-4 {
    color: #10b981;
    font-size: 24px;
}

.font-weight--color-eb-font-size--rem-4 {
    font-weight: 700;
    color: #1e293b;
    font-size: 17px;
}

.width-px-height-px-background-cbde {
    width: 2px;
    height: 30px;
    background: #cbd5e1;
}

.color-ec-font-size--rem {
    color: #ec4899;
    font-size: 24px;
}

.color-bf-font-size--rem {
    color: #3b82f6;
    font-size: 24px;
}

.font-size--rem-color--margin--line-heigh {
    font-size: 18px;
    color: #475569;
    margin: 0;
    line-height: 1.8;
}

.color-dark-slate-2 {
    color: #1e293b;
}

.background-linear-gradient-deg-b----colo-4 {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
    font-size: 16.8px;
}

.background-white-color-eb-padding-rem--r {
    background: white;
    color: #1e293b;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s;
    border: 2px solid #e2e8f0;
    font-size: 16.8px;
}

.padding-rem--background-linear-gradient-4 {
    padding: 64px 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
}

.position-absolute-top--left--width-px-he-4 {
    position: absolute;
    top: 5%;
    left: 3%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.06) 0%, transparent 70%);
    border-radius: 50%;
}

.position-absolute-bottom--right--width-p-3 {
    position: absolute;
    bottom: 10%;
    right: 5%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.06) 0%, transparent 70%);
    border-radius: 50%;
}

.font-size--rem-color-eb-margin-bottom-re-4 {
    font-size: 24px;
    color: #1e293b;
    margin-bottom: 32px;
    font-weight: 700;
    text-align: center;
}

.border-bottom-px-solid-b-padding-bottom {
    border-bottom: 3px solid #10b981;
    padding-bottom: 8px;
}

.display-grid-grid-template-columns-repea-28 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 32px;
}

.background-white-border-radius-px-paddin-19 {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid #10b981;
}

.width-px-height-px-background-linear-gra-44 {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.font-size-rem-color-b {
    font-size: 32px;
    color: #10b981;
}

.font-size--rem-margin-bottom-rem-color-e-4 {
    font-size: 22px;
    margin-bottom: 16px;
    color: #1e293b;
    font-weight: 700;
}

.display-flex-align-items-start-gap--rem {
    display: flex;
    align-items: start;
    gap: 9px;
    color: #475569;
    font-size: 13px;
}

.color-b-margin-top--rem-flex-shrink {
    color: #10b981;
    margin-top: 3.2px;
    flex-shrink: 0;
}

.background-white-border-radius-px-paddin-20 {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid #3b82f6;
}

.width-px-height-px-background-linear-gra-45 {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.font-size-rem-color-bf {
    font-size: 32px;
    color: #3b82f6;
}

.color-bf-margin-top--rem-flex-shrink {
    color: #3b82f6;
    margin-top: 3.2px;
    flex-shrink: 0;
}

.background-white-border-radius-px-paddin-21 {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid #ec4899;
}

.width-px-height-px-background-linear-gra-46 {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.font-size-rem-color-ec {
    font-size: 32px;
    color: #ec4899;
}

.color-ec-margin-top--rem-flex-shrink {
    color: #ec4899;
    margin-top: 3.2px;
    flex-shrink: 0;
}

.background-white-border-radius-px-paddin-22 {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid #f59e0b;
}

.width-px-height-px-background-linear-gra-47 {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.font-size-rem-color-feb {
    font-size: 32px;
    color: #f59e0b;
}

.color-feb-margin-top--rem-flex-shrink {
    color: #f59e0b;
    margin-top: 3.2px;
    flex-shrink: 0;
}

.background-white-border-radius-px-paddin-23 {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid #8b5cf6;
}

.width-px-height-px-background-linear-gra-48 {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.font-size-rem-color-bcf {
    font-size: 32px;
    color: #8b5cf6;
}

.color-bcf-margin-top--rem-flex-shrink {
    color: #8b5cf6;
    margin-top: 3.2px;
    flex-shrink: 0;
}

.background-white-border-radius-px-paddin-24 {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid #06b6d4;
}

.width-px-height-px-background-linear-gra-49 {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.font-size-rem-color-bd {
    font-size: 32px;
    color: #06b6d4;
}

.color-bd-margin-top--rem-flex-shrink {
    color: #06b6d4;
    margin-top: 3.2px;
    flex-shrink: 0;
}

.margin-top-rem-text-align-center-backgro {
    margin-top: 64px;
    text-align: center;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 24px;
    padding: 48px 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.color-white-font-size-rem-margin-bottom {
    color: white;
    font-size: 32px;
    margin-bottom: 16px;
    font-weight: 700;
}

.color-rgba------font-size--rem-margin-bo-5 {
    color: rgba(255, 255, 255, 0.85);
    font-size: 17px;
    margin-bottom: 32px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.background-linear-gradient-deg-b----colo-5 {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.background-white-color-eb-padding-rem--r-2 {
    background: white;
    color: #1e293b;
    padding: 16px 40px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
}

.padding-rem--background-linear-gradient-5 {
    padding: 64px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
    overflow: hidden;
}

.position-absolute-top--right--width-px-h-2 {
    position: absolute;
    top: 10%;
    right: 5%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 0;
}

.display-block-text-align-center-backgrou-17 {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.font-size--rem-color-b-max-width-px-marg-4 {
    font-size: 17px;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto;
}

.display-grid-grid-template-columns-repea-29 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 32px;
    margin-top: 48px;
}

.background-white-border-radius-px-paddin-25 {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s;
}

.color-b-line-height---font-size--rem {
    color: #64748b;
    line-height: 1.8;
    font-size: 15.2px;
}

.display-grid-grid-template-columns-repea-30 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 32px;
    margin-top: 48px;
}

.background-white-border-radius-px-paddin-26 {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.3s;
}

.width-px-height-px-background-linear-gra-50 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.font-size--rem-margin-bottom--rem-color {
    font-size: 20.8px;
    margin-bottom: 12px;
    color: #1e293b;
    font-weight: 700;
}

.color-b-font-size--rem-line-height-7 {
    color: #64748b;
    font-size: 13px;
    line-height: 1.6;
}

.width-px-height-px-background-linear-gra-51 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.width-px-height-px-background-linear-gra-52 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.width-px-height-px-background-linear-gra-53 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.width-px-height-px-background-linear-gra-54 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.width-px-height-px-background-linear-gra-55 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.padding-rem--background-linear-gradient-6 {
    padding: 64px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
}

.position-relative-max-width-px-margin--a {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.display-grid-grid-template-columns-fr-px {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 32px;
    margin-bottom: 48px;
    align-items: center;
}

.text-right {
    text-align: right;
}

.font-size--rem-color-eb-margin-bottom--r-2 {
    font-size: 24px;
    color: #1e293b;
    margin-bottom: 12px;
    font-weight: 700;
}

.color-b-line-height-2 {
    color: #64748b;
    line-height: 1.7;
}

.width-px-height-px-background-linear-gra-56 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
    position: relative;
    z-index: 2;
}

.width-px-height-px-background-linear-gra-57 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
    position: relative;
    z-index: 2;
}

.width-px-height-px-background-linear-gra-58 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.3);
    position: relative;
    z-index: 2;
}

.width-px-height-px-background-linear-gra-59 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
    position: relative;
    z-index: 2;
}

.width-px-height-px-background-linear-gra-60 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
    position: relative;
    z-index: 2;
}

.display-grid-grid-template-columns-fr-px-2 {
    display: grid;
    grid-template-columns: 1fr 80px 1fr;
    gap: 32px;
    align-items: center;
}

.width-px-height-px-background-linear-gra-61 {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.3);
    position: relative;
    z-index: 2;
}

.position-absolute-left--top-px-bottom-px {
    position: absolute;
    left: 50%;
    top: 40px;
    bottom: 40px;
    width: 2px;
    background: linear-gradient(180deg, #10b981 0%, #06b6d4 100%);
    transform: translateX(-50%);
    z-index: 0;
}

.padding-rem--background-linear-gradient-7 {
    padding: 64px 0;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.display-block-text-align-center-backgrou-18 {
    display: block;
    text-align: center;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.display-grid-grid-template-columns-repea-31 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 32px;
    margin-top: 48px;
}

.background-white-border-radius-px-paddin-27 {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    border-left: 4px solid #10b981;
}

.font-size--rem-color-b-margin-bottom-rem {
    font-size: 40px;
    color: #10b981;
    margin-bottom: 16px;
}

.background-white-border-radius-px-paddin-28 {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    border-left: 4px solid #3b82f6;
}

.font-size--rem-color-bf-margin-bottom-re {
    font-size: 40px;
    color: #3b82f6;
    margin-bottom: 16px;
}

.background-white-border-radius-px-paddin-29 {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    border-left: 4px solid #ec4899;
}

.font-size--rem-color-ec-margin-bottom-re {
    font-size: 40px;
    color: #ec4899;
    margin-bottom: 16px;
}

.background-white-border-radius-px-paddin-30 {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    border-left: 4px solid #f59e0b;
}

.font-size--rem-color-feb-margin-bottom-r {
    font-size: 40px;
    color: #f59e0b;
    margin-bottom: 16px;
}

.background-white-border-radius-px-paddin-31 {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    border-left: 4px solid #8b5cf6;
}

.font-size--rem-color-bcf-margin-bottom-r {
    font-size: 40px;
    color: #8b5cf6;
    margin-bottom: 16px;
}

.background-white-border-radius-px-paddin-32 {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s;
    border-left: 4px solid #06b6d4;
}

.font-size--rem-color-bd-margin-bottom-re {
    font-size: 40px;
    color: #06b6d4;
    margin-bottom: 16px;
}

.padding-rem--background-linear-gradient-8 {
    padding: 64px 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    position: relative;
    overflow: hidden;
}

.position-absolute-top--left--width-px-he-5 {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.position-absolute-bottom--right--width-p-4 {
    position: absolute;
    bottom: 10%;
    right: 5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.display-block-text-align-center-color-b {
    display: block;
    text-align: center;
    color: #10b981;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.font-size--rem-margin-bottom-rem-color-w-2 {
    font-size: 40px;
    margin-bottom: 16px;
    color: white;
}

.font-size--rem-color-cbde-max-width-px-m {
    font-size: 17px;
    color: #cbd5e1;
    max-width: 700px;
    margin: 0 auto;
}

.display-grid-grid-template-columns-repea-32 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
    gap: 32px;
    margin-top: 48px;
}

.background-rgba------backdrop-filter-blu-16 {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.display-flex-gap--rem-margin-bottom--rem {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

.color-feb-font-size--rem-4 {
    color: #f59e0b;
    font-size: 19.2px;
}

.color-eef-line-height---margin-bottom--r {
    color: #e2e8f0;
    line-height: 1.8;
    margin-bottom: 24px;
    font-size: 16px;
}

.width-px-height-px-background-linear-gra-62 {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-white-font-weight--font-size--rem-2 {
    color: white;
    font-weight: 700;
    font-size: 19.2px;
}

.color-white-font-weight--margin-bottom {
    color: white;
    font-weight: 700;
    margin-bottom: 4px;
}

.width-px-height-px-background-linear-gra-63 {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.width-px-height-px-background-linear-gra-64 {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.padding-rem--background-linear-gradient-9 {
    padding: 64px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.font-size--rem-color-b-2 {
    font-size: 17px;
    color: #64748b;
}

.mt-48px {
    margin-top: 48px;
}

.background-white-border-radius-px-paddin-33 {
    background: white;
    border-radius: 12px;
    padding: 24px 32px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

.font-size--rem-font-weight--color-eb-cur {
    font-size: 19.2px;
    font-weight: 700;
    color: #1e293b;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.color-b-transition-transform--s {
    color: #10b981;
    transition: transform 0.3s;
}

.color-b-line-height---margin-top-rem-pad {
    color: #64748b;
    line-height: 1.8;
    margin-top: 16px;
    padding-left: 0;
}

.padding-rem--background-linear-gradient-10 {
    padding: 80px 0;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    position: relative;
    overflow: hidden;
}

.position-absolute-top--left--width-px-he-6 {
    position: absolute;
    top: 20%;
    left: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 15s ease-in-out infinite;
}

.position-absolute-bottom--right--width-p-5 {
    position: absolute;
    bottom: 20%;
    right: 10%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: pulse 20s ease-in-out infinite reverse;
}

.max-width-px-position-relative-z-index-3 {
    max-width: 1200px;
    position: relative;
    z-index: 1;
    text-align: center;
}

.display-inline-flex-align-items-center-g-18 {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(16, 185, 129, 0.1);
    backdrop-filter: blur(10px);
    padding: 12px 24px;
    border-radius: 50px;
    margin-bottom: 32px;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.font-size--rem-font-weight--letter-spaci-3 {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #10b981;
}

.font-size-rem-font-weight--line-height-2 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.font-size--rem-line-height---color-cbde-2 {
    font-size: 20.8px;
    line-height: 1.8;
    color: #cbd5e1;
    margin-bottom: 48px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.background-linear-gradient-deg-b----colo-6 {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 24px 48px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
    font-size: 17px;
}

.background-rgba------backdrop-filter-blu-17 {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
    padding: 24px 48px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s;
    border: 2px solid rgba(255, 255, 255, 0.2);
    font-size: 17px;
}

.display-flex-align-items-center-justify-6 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.color-cbde-font-size--rem {
    color: #cbd5e1;
    font-size: 13px;
}

/* ===== Global Mobile Responsiveness Fixes ===== */
@media (max-width: 768px) {

    /* Prevent any flex/grid item from overflowing its parent */
    .yt-header-inner>*,
    .yt-header-inner>div {
        min-width: 0;
        max-width: 100%;
    }

    /* Heading font size reductions */
    .yt-section-h2 {
        font-size: 24px !important;
    }

    .reviews-h2 {
        font-size: 28.8px !important;
    }

    .about-h2 {
        font-size: 25px !important;
    }

    .faq-h2 {
        font-size: 27.2px !important;
    }

    .cta-h2 {
        font-size: 28.8px !important;
    }

    .section-title-h2 {
        font-size: 28.8px !important;
    }

    .section-h2-blue,
    .section-h2-dark {
        font-size: 28.8px !important;
    }

    /* Ensure all heading text wraps */
    h1,
    h2,
    h3,
    h4 {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Swiper container clips overflow */
    .swiper,
    .swiper-container {
        overflow: hidden !important;
    }

    /* Btn youtube wraps on small screens */
    .btn-youtube {
        white-space: normal !important;
        text-align: center;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    /* Grid items: prevent content min-width from overflowing */
    .home-services-grid>*,
    .technologies-grid>*,
    .products-grid>*,
    .why-choose-grid>*,
    .case-studies-grid>*,
    .testimonials-grid>* {
        min-width: 0;
    }
}

/* ══════════════════════════════════════════
   Shared Service Page Styles
   Used by: /web-development, /mobile-apps
   Spacing & typography match home page
   ══════════════════════════════════════════ */

/* ── Section rhythm  (matches home page 50px) ── */
.wd-section { padding: 50px 0; }
.wd-section.bg-white-section,
.wd-section.bg-light-section { padding: 50px 0; }

.wd-section-dark { background: linear-gradient(160deg,#04133a 0%,#061e5b 55%,#0c0925 100%); }
.wd-text-orange  { color: #FF6B00; }
.wd-img-rounded  { width:100%; border-radius:16px; object-fit:cover; box-shadow:0 8px 32px rgba(0,0,0,0.1); }

/* ── Section badges ── */
.wd-section-tag { display:inline-block; padding:8px 24px; border-radius:50px; margin-bottom:16px; font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:1px; }
.wd-tag-blue         { background:rgba(0,61,165,0.08);   border:1px solid rgba(0,61,165,0.15);   color:#003DA5; }
.wd-tag-orange       { background:rgba(255,107,0,0.08);  border:1px solid rgba(255,107,0,0.2);   color:#FF6B00; }
.wd-tag-orange-dark  { background:rgba(255,107,0,0.2);   border:1px solid rgba(255,107,0,0.35);  color:#FF9B50; }

/* ── Section headings (44px matches home) ── */
.wd-section-title { font-size:44px; font-weight:800; color:#003DA5; margin-bottom:16px; line-height:1.2; }
.wd-section-title.text-white { color:white !important; }

/* ── Section subtitles (17px matches home) ── */
.wd-section-sub  { font-size:17px; color:#64748b; max-width:700px; margin:0 auto; line-height:1.8; }
.wd-section-desc { font-size:16px; color:#475569; line-height:1.85; margin-bottom:24px; }
.wd-icon-orange  { color:#FF6B00; }

/* ══════════════════════ HERO ══════════════════════ */
.wd-hero { background:linear-gradient(160deg,#04133a 0%,#061e5b 60%,#0c0925 100%); position:relative; overflow:hidden; color:white; }
.wd-hero-blob { position:absolute; border-radius:50%; pointer-events:none; filter:blur(80px); opacity:0.35; }
.wd-hero-blob-1 { width:500px; height:500px; background:radial-gradient(circle,#FF6B00,transparent 70%); top:-150px; right:-100px; }
.wd-hero-blob-2 { width:350px; height:350px; background:radial-gradient(circle,#7c3aed,transparent 70%); bottom:-80px; left:-80px; }

.wd-badge { background:rgba(255,107,0,0.18); border:1px solid rgba(255,107,0,0.4); color:#FF9B50; padding:6px 16px; border-radius:30px; font-size:13.12px; font-weight:600; }
.wd-hero-title { color:white; font-size:36px; font-weight:900; line-height:1.2; margin:16px 0; }
.wd-hero-sub   { color:rgba(255,255,255,0.8); font-size:16.8px; line-height:1.85; margin-bottom:24px; }
.wd-check-item { color:rgba(255,255,255,0.88); font-size:14.72px; }

/* Buttons */
.wd-btn-primary { display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,#FF6B00,#e55f00); color:white !important; padding:12px 28.8px; border-radius:30px; font-weight:700; font-size:15.2px; text-decoration:none; box-shadow:0 4px 20px rgba(255,107,0,0.4); transition:all 0.25s; }
.wd-btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(255,107,0,0.6); }
.wd-btn-ghost { display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.08); border:1.5px solid rgba(255,255,255,0.3); color:white !important; padding:12px 28.8px; border-radius:30px; font-weight:600; font-size:15.2px; text-decoration:none; transition:all 0.25s; }
.wd-btn-ghost:hover { background:rgba(255,255,255,0.18); transform:translateY(-2px); }
.wd-btn-lg { padding:13px 35.2px; font-size:16px; }

/* Hero stats */
.wd-stat-item .wd-stat-num   { font-size:30px; font-weight:900; color:#FF6B00; }
.wd-stat-item .wd-stat-label { font-size:12.8px; color:rgba(255,255,255,0.65); margin-top:2px; }

/* Hero right card */
.wd-hero-card { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.13); border-radius:20px; padding:24px; }
.wd-hero-img  { width:100%; border-radius:12px; object-fit:cover; max-height:300px; }
.wd-stat-card { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:16px; text-align:center; }
.wd-sc-val    { font-size:18px; font-weight:800; color:white; }
.wd-sc-lbl    { font-size:12px; color:rgba(255,255,255,0.65); margin-top:2px; }

/* ══════════════════════ TRUST BAR ══════════════════════ */
.wd-trust-bar   { background:white; border-bottom:1px solid #e2e8f0; padding:16px 0; }
.wd-trust-label { color:#64748b; font-size:13px; font-weight:600; white-space:nowrap; }
.wd-trust-item  { display:flex; align-items:center; gap:8px; font-size:14.08px; font-weight:600; color:#1e293b; }

/* ══════════════════════ COMPARE ROWS ══════════════════════ */
.wd-compare-row   { display:flex; gap:14px; align-items:flex-start; margin-bottom:17px; }
.wd-compare-title { font-weight:700; color:#1e293b; margin-bottom:3px; font-size:15.52px; }
.wd-compare-desc  { color:#64748b; font-size:14.08px; line-height:1.6; }

/* ══════════════════════ MINI STATS ══════════════════════ */
.wd-mini-stat { background:white; border:1px solid #e2e8f0; border-radius:12px; padding:17px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.wd-ms-val    { font-size:24px; font-weight:900; color:#003DA5; }
.wd-ms-lbl    { font-size:12.48px; color:#64748b; margin-top:3px; }

/* ══════════════════════ TYPE CARDS ══════════════════════ */
.wd-type-card  { background:white; border:1px solid #e2e8f0; border-radius:16px; padding:28px; height:100%; transition:all 0.25s; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.wd-type-card:hover { box-shadow:0 14px 44px rgba(0,0,0,0.1); transform:translateY(-5px); }
.wd-type-icon  { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:17px; }
.wd-type-title { font-size:17px; font-weight:700; color:#1e293b; margin-bottom:8px; }
.wd-type-desc  { font-size:13px; color:#64748b; line-height:1.75; margin-bottom:16px; }
.wd-type-list  { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px; }
.wd-type-list li { font-size:13px; color:#475569; display:flex; align-items:center; gap:9px; }
.wd-type-list li i { font-size:11.52px; flex-shrink:0; }

/* ══════════════════════ FEATURE CARDS (dark) ══════════════════════ */
.wd-feat-card  { border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:24px; background:rgba(255,255,255,0.05); height:100%; transition:all 0.25s; }
.wd-feat-card:hover { background:rgba(255,255,255,0.1); transform:translateY(-4px); }
.wd-feat-icon  { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19.2px; margin-bottom:16px; }
.wd-feat-title { font-size:16px; font-weight:700; color:white; margin-bottom:8px; }
.wd-feat-desc  { font-size:14.08px; color:rgba(255,255,255,0.72); line-height:1.75; margin:0; }

/* ══════════════════════ PORTFOLIO ══════════════════════ */
.wd-portfolio-card { background:white; border-radius:16px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,0.07); transition:all 0.25s; height:100%; }
.wd-portfolio-card:hover { box-shadow:0 14px 40px rgba(0,0,0,0.13); transform:translateY(-5px); }
.wd-portfolio-img-wrap { position:relative; overflow:hidden; }
.wd-portfolio-img  { width:100%; height:210px; object-fit:cover; display:block; transition:transform 0.35s; }
.wd-portfolio-card:hover .wd-portfolio-img { transform:scale(1.06); }
.wd-portfolio-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.4); opacity:0; display:flex; align-items:center; justify-content:center; transition:opacity 0.25s; }
.wd-portfolio-card:hover .wd-portfolio-overlay { opacity:1; }
.wd-portfolio-body  { padding:20px; }
.wd-portfolio-dot   { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.wd-portfolio-title { font-size:15.52px; font-weight:700; color:#1e293b; }
.wd-portfolio-desc  { font-size:13px; color:#64748b; margin:0; line-height:1.65; }

/* ══════════════════════ TECH STACK ══════════════════════ */
.wd-tech-card { background:#f8fafc; border:1px solid #e2e8f0; border-radius:14px; padding:25px; height:100%; }
.wd-tech-icon { width:46px; height:46px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.wd-tech-cat  { font-size:16.8px; font-weight:700; color:#1e293b; }
.wd-tech-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.wd-tech-list li { font-size:13px; color:#475569; display:flex; align-items:center; gap:10px; line-height:1.5; }

/* ══════════════════════ PROCESS STEPS ══════════════════════ */
.wd-process-card  { background:white; border:1px solid #e2e8f0; border-radius:16px; padding:28px; height:100%; transition:all 0.25s; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.wd-process-card:hover { box-shadow:0 12px 36px rgba(0,0,0,0.09); transform:translateY(-5px); }
.wd-process-icon  { width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:21px; color:white; margin-bottom:16px; }
.wd-process-step  { font-size:11.84px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; margin-bottom:6px; }
.wd-process-title { font-size:16.8px; font-weight:700; color:#1e293b; margin-bottom:8px; }
.wd-process-desc  { font-size:14.08px; color:#64748b; line-height:1.75; margin:0; }

/* ══════════════════════ WHY CHOOSE US ══════════════════════ */
.wd-why-row   { display:flex; gap:16px; align-items:flex-start; margin-bottom:20px; }
.wd-why-icon  { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:16.8px; flex-shrink:0; }
.wd-why-title { font-weight:700; color:#1e293b; font-size:15.52px; margin-bottom:4px; }
.wd-why-desc  { font-size:14.08px; color:#64748b; line-height:1.7; }

/* ══════════════════════ PRICING (dark) ══════════════════════ */
.wd-price-card    { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:20px; padding:32px 28px; position:relative; height:100%; transition:transform 0.25s; display:flex; flex-direction:column; }
.wd-price-card:hover { transform:translateY(-6px); }
.wd-price-popular { background:rgba(255,255,255,0.11); border-color:rgba(255,107,0,0.55); box-shadow:0 0 0 2px rgba(255,107,0,0.25); }
.wd-price-badge   { position:absolute; top:-14px; left:50%; transform:translateX(-50%); padding:5px 20px; border-radius:30px; font-size:11.68px; font-weight:800; color:white; letter-spacing:0.07em; white-space:nowrap; }
.wd-price-header  { margin-bottom:24px; }
.wd-price-name    { font-size:20.8px; font-weight:800; color:white; margin-bottom:8px; }
.wd-price-amount  { font-size:35.2px; font-weight:900; margin-bottom:8px; }
.wd-price-tagline { font-size:14.08px; color:rgba(255,255,255,0.7); margin:0; line-height:1.5; }
.wd-price-list    { list-style:none; padding:0; margin:0 0 24px; display:flex; flex-direction:column; gap:11px; flex:1; }
.wd-price-list li { font-size:13px; color:rgba(255,255,255,0.88); display:flex; align-items:center; gap:10px; }
.wd-price-list li i { font-size:14.08px; flex-shrink:0; }
.wd-price-btn     { display:block; text-align:center; padding:12.8px; border-radius:30px; border:1.5px solid rgba(255,255,255,0.25); color:white; text-decoration:none; font-weight:700; font-size:14.72px; transition:all 0.25s; }
.wd-price-btn:hover { opacity:0.85; transform:translateY(-1px); color:white; }

/* ══════════════════════ TESTIMONIALS ══════════════════════ */
.wd-testi-card    { background:white; border:1px solid #e2e8f0; border-radius:16px; padding:28px; height:100%; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.wd-testi-review  { font-size:14.72px; color:#475569; line-height:1.85; font-style:italic; }
.wd-testi-avatar  { width:50px; height:50px; border-radius:50%; background:linear-gradient(135deg,#003DA5,#FF6B00); color:white; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wd-testi-name    { font-weight:700; color:#1e293b; font-size:14.72px; }
.wd-testi-company { font-size:12.8px; color:#64748b; }

/* ══════════════════════ FAQ ══════════════════════ */
.wd-faq-accordion { display:flex; flex-direction:column; gap:12px; }
.wd-faq-item      { border:1px solid #e2e8f0 !important; border-radius:12px !important; overflow:hidden; }
.wd-faq-btn       { background:#f8fafc !important; color:#1e293b !important; font-weight:600 !important; font-size:15.52px !important; padding:17px 20px !important; line-height:1.5 !important; }
.wd-faq-btn:not(.collapsed) { background:white !important; color:#003DA5 !important; box-shadow:none !important; }
.wd-faq-body      { color:#475569; font-size:14.72px; line-height:1.85; background:white; padding:16px 20px !important; }

/* ══════════════════════ FINAL CTA ══════════════════════ */
.wd-cta { background:linear-gradient(160deg,#04133a 0%,#061e5b 55%,#0c0925 100%); padding:80px 0; position:relative; overflow:hidden; color:white; }
.wd-cta-blob-1,.wd-cta-blob-2 { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.3; pointer-events:none; }
.wd-cta-blob-1 { width:400px; height:400px; background:radial-gradient(circle,#FF6B00,transparent 70%); top:-100px; right:-80px; }
.wd-cta-blob-2 { width:300px; height:300px; background:radial-gradient(circle,#7c3aed,transparent 70%); bottom:-80px; left:-60px; }
.wd-cta-icon  { width:72px; height:72px; border-radius:20px; background:rgba(255,107,0,0.18); border:1px solid rgba(255,107,0,0.4); display:inline-flex; align-items:center; justify-content:center; font-size:28.8px; color:#FF9B50; }
.wd-cta-title { font-size:38px; font-weight:900; line-height:1.25; margin-bottom:16px; }
.wd-cta-sub   { color:rgba(255,255,255,0.75); font-size:16.8px; max-width:580px; margin:0 auto 32px; line-height:1.85; }
.wd-cta-note  { color:rgba(255,255,255,0.5); font-size:14.08px; display:flex; align-items:center; justify-content:center; gap:6px; }

/* ══════════════════════ RESPONSIVE ══════════════════════ */
@media (max-width: 991px) {
    .wd-section-title { font-size:35.2px; }
    .wd-hero-title    { font-size:35.2px; }
    .wd-cta-title     { font-size:30px; }
}
@media (max-width: 767px) {
    .wd-section       { padding:40px 0; }
    .wd-cta           { padding:56px 0; }
    .wd-section-title { font-size:28px; }
    .wd-hero-title    { font-size:29px; }
    .wd-cta-title     { font-size:25px; }
    .wd-section-sub   { font-size:16px; }
    .wd-hero-sub      { font-size:15.2px; }
}

/* ══════════════════════════════════════════
   Mobile Apps Page — /mobile-apps
   ══════════════════════════════════════════ */
.ma-phone-mockup-row { display:flex; align-items:flex-end; justify-content:center; gap:12px; }
.ma-phone-frame { border-radius:20px; border:2px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ma-phone-lg { width:90px; height:155px; }
.ma-phone-sm { width:75px; height:130px; }
.ma-phone-screen { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:rgba(255,255,255,0.75); font-size:16px; }
.ma-phone-screen span { font-size:10.88px; font-weight:600; letter-spacing:0.04em; opacity:0.7; }

.ma-cat-chip { display:flex; align-items:center; gap:10px; background:white; border:1px solid #e2e8f0; border-left-width:3px; border-radius:10px; padding:11.2px 16px; font-size:13px; font-weight:600; color:#1e293b; transition:all 0.2s; }
.ma-cat-chip:hover { box-shadow:0 4px 14px rgba(0,0,0,0.08); transform:translateY(-2px); }
.ma-cat-chip i { font-size:16px; flex-shrink:0; }

.ma-metric-card { background:white; border:1px solid #e2e8f0; border-radius:12px; padding:20px 16px; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,0.04); transition:all 0.22s; }
.ma-metric-card:hover { box-shadow:0 8px 24px rgba(0,0,0,0.09); transform:translateY(-3px); }
.ma-metric-val { font-size:25px; font-weight:900; line-height:1.1; margin-bottom:4px; }
.ma-metric-lbl { font-size:12.48px; color:#64748b; font-weight:500; }

@media (max-width: 767px) {
    .ma-phone-mockup-row { gap:8px; }
    .ma-phone-lg { width:72px; height:124px; }
    .ma-phone-sm { width:60px; height:104px; }
    .ma-cat-chip { font-size:12.8px; padding:9px 12.8px; }
    .ma-metric-val { font-size:20.8px; }
}