html {
        scroll-padding-top: 80px;
    }

    .animate-on-scroll {
        opacity: 0;
        transform: translateY(50px);
        transition: all 0.8s ease;
    }

    .animate-on-scroll.animate-in {
        opacity: 1;
        transform: translateY(0);
    }

    .image-zoom {
        transition: transform 0.6s ease;
    }

    .image-zoom:hover {
        transform: scale(1.05);
    }

    .clickable-image:hover {
        transform: scale(1.05);
        cursor: pointer;
    }

    #imageModal {
        backdrop-filter: blur(5px);
        animation: fadeIn 0.3s ease-out;
    }

    #imageModal.hidden {
        animation: fadeOut 0.3s ease-out;
    }

    #modalImage {
        animation: scaleIn 0.3s ease-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes fadeOut {
        from { opacity: 1; }
        to { opacity: 0; }
    }

    @keyframes scaleIn {
        from { transform: scale(0.8); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }

    .slideshow-container {
        position: relative;
        overflow: hidden;
    }

    .slideshow-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        transition: opacity 1s ease-in-out;
    }

    .slideshow-image.active {
        opacity: 1;
    }

    .slideshow-image.inactive {
        opacity: 0;
    }

    .floating-animation {
        animation: float 6s ease-in-out infinite;
    }

    @keyframes float {

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

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

    .slide-in-left {
        transform: translateX(-100px);
    }

    .slide-in-right {
        transform: translateX(100px);
    }

    #carousel-prev:hover,
    #carousel-next:hover {
        background: rgba(0, 0, 0, 0.7) !important;
        transform: translateY(-50%) scale(1.1);
    }

    .carousel-button-active {
        background-color: #2563eb !important;
        color: white !important;
    }

    button[data-slide]:hover {
        background-color: #2563eb !important;
        color: white !important;
    }

    /* Feature block colors */
    .feature-blue {
        background: linear-gradient(135deg, #dbeafe, #bfdbfe);
        border-color: #93c5fd;
    }

    .feature-blue:hover {
        border-color: #3b82f6;
    }

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

    .feature-blue .title {
        color: #1e40af;
    }

    .feature-blue .desc {
        color: #2563eb;
    }

    .feature-green {
        background: linear-gradient(135deg, #d1fae5, #a7f3d0);
        border-color: #6ee7b7;
    }

    .feature-green:hover {
        border-color: #10b981;
    }

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

    .feature-green .title {
        color: #065f46;
    }

    .feature-green .desc {
        color: #059669;
    }

    .feature-purple {
        background: linear-gradient(135deg, #faf5ff, #e9d5ff);
        border-color: #c4b5fd;
    }

    .feature-purple:hover {
        border-color: #8b5cf6;
    }

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

    .feature-purple .title {
        color: #581c87;
    }

    .feature-purple .desc {
        color: #7c3aed;
    }

    .feature-cyan {
        background: linear-gradient(135deg, #cffafe, #a5f3fc);
        border-color: #67e8f9;
    }

    .feature-cyan:hover {
        border-color: #06b6d4;
    }

    .feature-cyan .icon {
        background-color: #06b6d4;
    }

    .feature-cyan .title {
        color: #164e63;
    }

    .feature-cyan .desc {
        color: #0891b2;
    }

    .feature-teal {
        background: linear-gradient(135deg, #d1fae5, #a7f3d0);
        border-color: #5eead4;
    }

    .feature-teal:hover {
        border-color: #14b8a6;
    }

    .feature-teal .icon {
        background-color: #14b8a6;
    }

    .feature-teal .title {
        color: #134e4a;
    }

    .feature-teal .desc {
        color: #0f766e;
    }

    .feature-amber {
        background: linear-gradient(135deg, #fefbeb, #fef3c7);
        border-color: #fcd34d;
    }

    .feature-amber:hover {
        border-color: #f59e0b;
    }

    .feature-amber .icon {
        background-color: #f59e0b;
    }

    .feature-amber .title {
        color: #92400e;
    }

    .feature-amber .desc {
        color: #d97706;
    }

    .feature-rose {
        background: linear-gradient(135deg, #fff1f2, #fecdd3);
        border-color: #fda4af;
    }

    .feature-rose:hover {
        border-color: #f43f5e;
    }

    .feature-rose .icon {
        background-color: #f43f5e;
    }

    .feature-rose .title {
        color: #881337;
    }

    .feature-rose .desc {
        color: #e11d48;
    }

    .feature-slate {
        background: linear-gradient(135deg, #f8fafc, #e2e8f0);
        border-color: #cbd5e1;
    }

    .feature-slate:hover {
        border-color: #64748b;
    }

    .feature-slate .icon {
        background-color: #64748b;
    }

    .feature-slate .title {
        color: #334155;
    }

    .feature-slate .desc {
        color: #475569;
    }

    .feature-indigo {
        background: linear-gradient(135deg, #eef2ff, #e0e7ff);
        border-color: #a5b4fc;
    }

    .feature-indigo:hover {
        border-color: #6366f1;
    }

    .feature-indigo .icon {
        background-color: #6366f1;
    }

    .feature-indigo .title {
        color: #3730a3;
    }

    .feature-indigo .desc {
        color: #4f46e5;
    }

    .feature-lime {
        background: linear-gradient(135deg, #f7fee7, #ecfccb);
        border-color: #bef264;
    }

    .feature-lime:hover {
        border-color: #84cc16;
    }

    .feature-lime .icon {
        background-color: #84cc16;
    }

    .feature-lime .title {
        color: #365314;
    }

    .feature-lime .desc {
        color: #65a30d;
    }

    .feature-orange {
        background: linear-gradient(135deg, #fff7ed, #fed7aa);
        border-color: #fdba74;
    }

    .feature-orange:hover {
        border-color: #f97316;
    }

    .feature-orange .icon {
        background-color: #f97316;
    }

    .feature-orange .title {
        color: #9a3412;
    }

    .feature-orange .desc {
        color: #ea580c;
    }

    .feature-red {
        background: linear-gradient(135deg, #fef2f2, #fecaca);
        border-color: #fca5a5;
    }

    .feature-red:hover {
        border-color: #ef4444;
    }

    .feature-red .icon {
        background-color: #ef4444;
    }

    .feature-red .title {
        color: #991b1b;
    }

    .feature-red .desc {
        color: #dc2626;
    }

    .feature-pink {
        background: linear-gradient(135deg, #fdf2f8, #fce7f3);
        border-color: #f9a8d4;
    }

    .feature-pink:hover {
        border-color: #ec4899;
    }

    .feature-pink .icon {
        background-color: #ec4899;
    }

    .feature-pink .title {
        color: #9d174d;
    }

    .feature-pink .desc {
        color: #db2777;
    }

    .feature-violet {
        background: linear-gradient(135deg, #f5f3ff, #ede9fe);
        border-color: #c4b5fd;
    }

    .feature-violet:hover {
        border-color: #8b5cf6;
    }

    .feature-violet .icon {
        background-color: #8b5cf6;
    }

    .feature-violet .title {
        color: #5b21b6;
    }

    .feature-violet .desc {
        color: #7c3aed;
    }

    .feature-sky {
        background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
        border-color: #7dd3fc;
    }

    .feature-sky:hover {
        border-color: #0ea5e9;
    }

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

    .feature-sky .title {
        color: #0c4a6e;
    }

    .feature-sky .desc {
        color: #0284c7;
    }

    /* Detailed section styles */
    .section-green {
        background: linear-gradient(135deg, #f0fdf4, #dcfce7, #bbf7d0) !important;
    }

    .section-green .decorative-circle-1 {
        background-color: #86efac;
        opacity: 0.5;
        animation: pulse 2s infinite;
    }

    .section-green .decorative-circle-2 {
        background-color: #4ade80;
        opacity: 0.4;
        animation: bounce 2s infinite;
    }

    .section-green .decorative-circle-3 {
        background-color: #22c55e;
        opacity: 0.6;
    }

    .section-purple {
        background: linear-gradient(135deg, #faf5ff, #f3e8ff, #e9d5ff) !important;
    }

    .section-purple .decorative-circle-1 {
        background-color: #c4b5fd;
        opacity: 0.4;
        animation: pulse 2s infinite;
    }

    .section-purple .decorative-circle-2 {
        background-color: #a78bfa;
        opacity: 0.5;
        animation: bounce 2s infinite;
    }

    .section-purple .decorative-circle-3 {
        background-color: #8b5cf6;
        opacity: 0.3;
    }

    .section-orange {
        background: linear-gradient(135deg, #fff7ed, #fed7aa, #fdba74) !important;
    }

    .section-orange .decorative-circle-1 {
        background-color: #fdba74;
        opacity: 0.5;
        animation: pulse 2s infinite;
    }

    .section-orange .decorative-circle-2 {
        background-color: #fb923c;
        opacity: 0.4;
        animation: bounce 2s infinite;
    }

    .section-orange .decorative-circle-3 {
        background-color: #f97316;
        opacity: 0.3;
    }

    .section-pink {
        background: linear-gradient(135deg, #fdf2f8, #fce7f3, #fbcfe8) !important;
    }

    .section-pink .decorative-circle-1 {
        background-color: #f9a8d4;
        opacity: 0.5;
        animation: pulse 2s infinite;
    }

    .section-pink .decorative-circle-2 {
        background-color: #f472b6;
        opacity: 0.4;
        animation: bounce 2s infinite;
    }

    .section-pink .decorative-circle-3 {
        background-color: #ec4899;
        opacity: 0.6;
    }

    .section-teal {
        background: linear-gradient(135deg, #f0fdfa, #ccfbf1, #99f6e4) !important;
    }

    .section-teal .decorative-circle-1 {
        background-color: #5eead4;
        opacity: 0.4;
        animation: pulse 2s infinite;
    }

    .section-teal .decorative-circle-2 {
        background-color: #2dd4bf;
        opacity: 0.5;
        animation: bounce 2s infinite;
    }

    .section-teal .decorative-circle-3 {
        background-color: #14b8a6;
        opacity: 0.3;
    }

    .section-blue {
        background: linear-gradient(135deg, #dbeafe, #bfdbfe, #93c5fd) !important;
    }

    .section-blue .decorative-circle-1 {
        background-color: #93c5fd;
        opacity: 0.5;
        animation: pulse 2s infinite;
    }

    .section-blue .decorative-circle-2 {
        background-color: #60a5fa;
        opacity: 0.4;
        animation: bounce 2s infinite;
    }

    .section-blue .decorative-circle-3 {
        background-color: #3b82f6;
        opacity: 0.6;
    }

    .section-indigo {
        background: linear-gradient(135deg, #eef2ff, #e0e7ff, #c7d2fe) !important;
    }

    .section-indigo .decorative-circle-1 {
        background-color: #c7d2fe;
        opacity: 0.4;
        animation: pulse 2s infinite;
    }

    .section-indigo .decorative-circle-2 {
        background-color: #a5b4fc;
        opacity: 0.5;
        animation: bounce 2s infinite;
    }

    .section-indigo .decorative-circle-3 {
        background-color: #818cf8;
        opacity: 0.3;
    }

    .section-amber {
        background: linear-gradient(135deg, #fffbeb, #fef3c7, #fde68a) !important;
    }

    .section-amber .decorative-circle-1 {
        background-color: #fde68a;
        opacity: 0.5;
        animation: pulse 2s infinite;
    }

    .section-amber .decorative-circle-2 {
        background-color: #fcd34d;
        opacity: 0.4;
        animation: bounce 2s infinite;
    }

    .section-amber .decorative-circle-3 {
        background-color: #f59e0b;
        opacity: 0.6;
    }

    .detail-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 16px;
        padding: 20px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }

    .detail-card:hover {
        transform: translateY(-5px) scale(1.03);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    /* Pricing card styles */
    .pricing-card-free {
        background: linear-gradient(135deg, #10b981, #059669) !important;
        color: white !important;
        border: 4px solid #34d399 !important;
        box-shadow: 0 10px 25px rgba(16, 185, 129, 0.3) !important;
        transition: all 0.3s ease;
    }

    .pricing-card-free:hover {
        transform: scale(1.05) !important;
        box-shadow: 0 20px 40px rgba(16, 185, 129, 0.4) !important;
    }

    .pricing-card-yearly {
        background: linear-gradient(135deg, #3b82f6, #4338ca) !important;
        color: white !important;
        border: 2px solid #60a5fa !important;
        box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3) !important;
        transition: all 0.3s ease;
    }

    .pricing-card-yearly:hover {
        transform: scale(1.05) !important;
        box-shadow: 0 20px 40px rgba(59, 130, 246, 0.4) !important;
    }

    .pricing-card-monthly {
        background: linear-gradient(135deg, #8b5cf6, #ec4899) !important;
        color: white !important;
        border: 2px solid #a78bfa !important;
        box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3) !important;
        transition: all 0.3s ease;
    }

    .pricing-card-monthly:hover {
        transform: scale(1.05) !important;
        box-shadow: 0 20px 40px rgba(139, 92, 246, 0.4) !important;
    }

    .pricing-badge-hot {
        background-color: #fbbf24 !important;
        color: #92400e !important;
        animation: bounce 2s infinite;
        position: absolute;
        top: -12px;
        right: 8px;
        padding: 4px 8px;
        border-radius: 50px;
        font-size: 9px;
        font-weight: bold;
        z-index: 10;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    @media (min-width: 640px) {
        .pricing-badge-hot {
            padding: 6px 12px;
            font-size: 11px;
        }
    }

    .pricing-badge-popular {
        background-color: #fb923c !important;
        color: #9a3412 !important;
        animation: pulse 2s infinite;
        position: absolute;
        top: -12px;
        right: 8px;
        padding: 4px 8px;
        border-radius: 50px;
        font-size: 9px;
        font-weight: bold;
        z-index: 10;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    @media (min-width: 640px) {
        .pricing-badge-popular {
            padding: 6px 12px;
            font-size: 11px;
        }
    }

    .pricing-badge-flexible {
        background-color: #22d3ee !important;
        color: #164e63 !important;
        position: absolute;
        top: -12px;
        right: 8px;
        padding: 4px 8px;
        border-radius: 50px;
        font-size: 9px;
        font-weight: bold;
        z-index: 10;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    @media (min-width: 640px) {
        .pricing-badge-flexible {
            padding: 6px 12px;
            font-size: 11px;
        }
    }

    .feature-block {
        padding: 16px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        border-width: 1px;
        border-radius: 8px;
        transition: all 0.7s ease;
        cursor: pointer;
    }

    .feature-block:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .feature-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: white;
        font-size: 20px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }