/* General styles */
    body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        margin: 0;
        background-color: #f2f2f2;
        color: #333;
        line-height: 1.6;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Header Styles */
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 2rem;
        background-color: #000;
        color: white;
        position: relative;
        z-index: 1000;
    }

    .logo img {
        max-height: 120px;
        width: auto;
        height: auto;
        display: block;
        object-fit: contain;
    }

    /* Navigation */
    .nav ul {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .nav li {
        margin-left: 1.5rem;
    }

    .nav a {
        color: white;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s;
        position: relative;
        padding: 5px 0;
        letter-spacing: 0.5px;
    }

    .nav a:hover {
        color: #0ff;
    }

    .nav a.active {
        color: #0ff;
        font-weight: 600;
    }

    .nav a.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: #0ff;
        animation: fadeIn 0.3s ease-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: scaleX(0); }
        to { opacity: 1; transform: scaleX(1); }
    }

    /* Mobile Menu Styles */
    .menu-toggle {
        display: none;
        background: none;
        border: none;
        color: white;
        font-size: 1.5rem;
        cursor: pointer;
        z-index: 1001;
        padding: 0.5rem;
    }

    /* Show toggle button on mobile */
    @media (max-width: 768px) {
        .menu-toggle {
            display: block;
        }
        
        .nav {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background: #000;
            padding: 2rem 0;
            transform: translateY(-100%);
            opacity: 0;
            transition: all 0.3s ease;
            visibility: hidden;
            z-index: 999;
        }

        .nav.active {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
        }

        .nav ul {
            flex-direction: column;
            align-items: center;
        }
        
        .nav li {
            margin: 0.75rem 0;
        }
        
        .nav a {
            padding: 0.5rem 1rem;
        }
        
        .nav a.active::after {
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
        }
    }

    /* Hero Section */
    .hero {
        text-align: center;
        padding: 80px 20px 40px;
        background-color: #000;
        color: white;
        margin-bottom: 50px;
    }

    .hero h1 {
        font-size: 2.5rem;
        margin-bottom: 10px;
        letter-spacing: 3px;
        text-transform: uppercase;
        font-weight: 700;
    }

    .hero h2 {
        font-size: 4rem;
        margin: 10px 0;
        font-weight: 800;
        color: #0ff;
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
        letter-spacing: -1px;
    }

    .hero .tagline {
        font-size: 1.5rem;
        margin-bottom: 0;
        color: white;
        font-style: italic;
        font-weight: 300;
        letter-spacing: 0.5px;
    }

    /* About Me Section */
    .about-me {
        max-width: 800px;
        margin: 0 auto 60px;
        padding: 0 20px;
        text-align: center;
    }

    .about-me h3 {
        font-size: 2rem;
        margin-bottom: 20px;
        color: #ffffff;
        font-weight: 700;
        letter-spacing: -0.5px;
    }

    /* Feature Cards Section */
    .features {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 40px;
        padding: 60px 5%;
        margin: 0 auto;
        max-width: 1400px;
    }

    .feature-card {
        width: 320px;
        height: 220px;
        perspective: 1000px;
        position: relative;
        margin: 10px;
    }

    .feature-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transition: transform 0.6s ease;
        transform-style: preserve-3d;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

    .feature-card:hover .feature-card-inner {
        transform: rotateY(180deg);
    }

    .feature-card-front,
    .feature-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: 15px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px;
        box-sizing: border-box;
    }

    .feature-card-front {
        background: linear-gradient(135deg, #000000 0%, #333333 100%);
        color: white;
    }

    .feature-card-front i {
        font-size: 3rem;
        margin-bottom: 20px;
        color: #0ff;
    }

    .feature-card-front h3 {
        font-size: 1.6rem;
        margin: 0;
        text-align: center;
        font-weight: 600;
    }

    .feature-card-back {
        background-color: #ffffff;
        color: #333;
        transform: rotateY(180deg);
        text-align: center;
        border: 2px solid #0ff;
    }

    .feature-card-back h3 {
        color: #000;
        margin: 0 0 15px 0;
        font-size: 1.5rem;
        font-weight: 600;
    }

    .feature-card-back p {
        margin: 0 0 20px 0;
        line-height: 1.6;
        font-size: 1rem;
        font-weight: 400;
    }

    .feature-badge {
        background: #0ff;
        color: #000;
        padding: 6px 20px;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 700;
    }

    /* Footer */
    .footer {
        background-color: #000;
        color: white;
        text-align: center;
        padding: 30px 0;
        margin-top: 80px;
        font-weight: 300;
    }

    .footer-social {
        margin-top: 15px;
    }

    .footer-social a {
        color: white;
        margin: 0 10px;
        font-size: 1.2rem;
        transition: color 0.3s;
    }

    .footer-social a:hover {
        color: #0ff;
    }

    /* Info Section */
    .info-section {
        text-align: center;
        padding: 80px 20px;
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
        position: relative;
        overflow: hidden;
    }

    .info-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, #00fff7, transparent);
        animation: scanLine 3s linear infinite;
    }

    @keyframes scanLine {
        0% { top: 0; opacity: 0; }
        50% { opacity: 1; }
        100% { top: 100%; opacity: 0; }
    }

    .info-section h3 {
        font-size: 3rem;
        margin-bottom: 60px;
        color: #fff;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 2px;
        position: relative;
        display: inline-block;
    }

    .info-section h3::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 3px;
        background: linear-gradient(90deg, transparent, #00fff7, transparent);
        animation: pulseLine 2s ease-in-out infinite;
    }

    @keyframes pulseLine {
        0%, 100% { width: 100px; opacity: 0.7; }
        50% { width: 150px; opacity: 1; }
    }

    .info-boxes {
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 40px;
        overflow-x: auto;
        padding: 40px 20px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .info-boxes::-webkit-scrollbar {
        display: none;
    }

    .info-box {
        flex: 0 0 380px;
        height: 480px;
        color: #fff;
        padding: 50px 35px;
        border-radius: 30px;
        text-align: center;
        transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        box-shadow: 
            0 25px 50px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
        border: 2px solid transparent;
        background-size: 200% 200%;
        animation: gradientShift 8s ease infinite;
        backdrop-filter: blur(20px);
    }

    /* Enhanced gradient animations */
    @keyframes gradientShift {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* Bronze Package */
    .info-box:nth-child(1) {
        background: linear-gradient(135deg, #abf5ff 0%, #0ff, #0ff 70%, #0ff);
        border-color: rgba(205, 127, 50, 0.6);
    }

    /* Silver Package */
    .info-box:nth-child(2) {
        background: linear-gradient(135deg, #C0C0C0 0%, #E8E8E8 30%, #C0C0C0 70%, #D8D8D8 100%);
        border-color: rgba(192, 192, 192, 0.6);
    }

    /* Gold Package */
    .info-box:nth-child(3) {
        background: linear-gradient(135deg, #FFD700 0%, #FFF8DC 30%, #FFD700 70%, #FFEC8B 100%);
        border-color: rgba(255, 215, 0, 0.6);
    }

    /* Hover effects */
    .info-box:hover {
        transform: translateY(-20px) scale(1.05);
        box-shadow: 
            0 40px 80px rgba(0, 0, 0, 0.6),
            0 0 80px rgba(0, 255, 255, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.8);
    }

    /* Animated shine effect */
    .info-box::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
        );
        transition: left 1s;
        z-index: 1;
    }

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

    /* Floating particles */
    .info-box::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-image: 
            radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 2px, transparent 0),
            radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 2px, transparent 0),
            radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.1) 2px, transparent 0);
        background-size: 200px 200px;
        animation: floatParticles 20s linear infinite;
        opacity: 0;
        transition: opacity 0.3s;
    }

    .info-box:hover::after {
        opacity: 1;
    }

    @keyframes floatParticles {
        0% { background-position: 0 0, 100px 100px, 200px 200px; }
        100% { background-position: 200px 200px, 300px 300px, 400px 400px; }
    }

    /* Package tier label */
    .package-tier {
        position: absolute;
        top: 25px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(50, 50, 50, 0.8));
        padding: 12px 30px;
        border-radius: 25px;
        font-size: 1.1em;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        animation: tierFloat 4s ease-in-out infinite;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
        z-index: 2;
    }

    @keyframes tierFloat {
        0%, 100% { 
            transform: translateX(-50%) translateY(0) rotate(0deg); 
        }
        33% { 
            transform: translateX(-50%) translateY(-5px) rotate(0.5deg); 
        }
        66% { 
            transform: translateX(-50%) translateY(-3px) rotate(-0.5deg); 
        }
    }

    /* Star rating styling */
    .star-rating {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin: 30px 0;
        position: relative;
        z-index: 2;
    }

    .star {
        font-size: 2.5rem;
        color: rgba(255, 255, 255, 0.95);
        text-shadow: 
            0 2px 10px rgba(0, 0, 0, 0.4),
            0 0 20px currentColor;
        animation: starPulse 2.5s ease-in-out infinite;
        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
    }

    .star:nth-child(1) { animation-delay: 0s; }
    .star:nth-child(2) { animation-delay: 0.3s; }
    .star:nth-child(3) { animation-delay: 0.6s; }

    @keyframes starPulse {
        0%, 100% { 
            transform: scale(1) rotate(0deg); 
            opacity: 0.9; 
        }
        25% { 
            transform: scale(1.15) rotate(5deg); 
            opacity: 1; 
        }
        50% { 
            transform: scale(1.1) rotate(-3deg); 
            opacity: 0.95; 
        }
        75% { 
            transform: scale(1.2) rotate(2deg); 
            opacity: 1; 
        }
    }

    /* Price display */
    .package-price {
        font-size: 3.5em;
        font-weight: 900;
        margin: 20px 0;
        text-shadow: 
            0 4px 15px rgba(0, 0, 0, 0.6),
            0 0 30px rgba(255, 255, 255, 0.3);
        animation: priceGlow 3s ease-in-out infinite;
        position: relative;
        z-index: 2;
    }

    @keyframes priceGlow {
        0%, 100% { 
            transform: scale(1);
            text-shadow: 
                0 4px 15px rgba(0, 0, 0, 0.6),
                0 0 30px rgba(255, 255, 255, 0.3);
        }
        50% { 
            transform: scale(1.05);
            text-shadow: 
                0 4px 20px rgba(0, 0, 0, 0.8),
                0 0 40px rgba(255, 255, 255, 0.5),
                0 0 60px rgba(255, 255, 255, 0.3);
        }
    }

    /* Enhanced text styling */
    .info-box-text {
        position: relative;
        left: -20px;
        color: #2c3e50; /* Sophisticated dark blue-gray */
        margin: 0;
        font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Modern font stack */
        font-size: 1.5em;
        font-weight: 600; /* Semi-bold for cleaner look */
        line-height: 1.3;
        letter-spacing: -0.01em; /* Slightly tighter letter spacing */
        text-transform: uppercase;
        opacity: 0;
        transform: translateY(20px); /* Start slightly lower for reveal */
        animation: textReveal 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
        z-index: 2;
        
        /* Remove text-stroke for cleaner appearance */
        -webkit-text-stroke: 0;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    }

    /* Optional: Enhanced animation for smoother reveal */
    @keyframes textReveal {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes textReveal {
        from {
            opacity: 0;
            transform: translateY(40px) scale(0.9);
            filter: blur(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
            filter: blur(0);
        }
    }

    .info-box:hover .info-box-text {
        animation: textShimmer 2s ease-in-out infinite;
    }

    @keyframes textShimmer {
        0%, 100% {
            background-position: -200% center;
        }
        50% {
            background-position: 200% center;
        }
    }

    /* Feature list */
    .package-features {
        list-style: none;
        padding: 0;
        margin: 30px 0;
        text-align: left;
        font-size: 1em;
        opacity: 0;
        animation: featuresSlideIn 0.8s ease 0.5s forwards;
        position: relative;
        z-index: 2;
    }

    .package-features li {
        margin: 15px 0;
        padding-left: 30px;
        position: relative;
        transition: all 0.3s ease;
        transform: translateX(-20px);
        animation: featureItemSlide 0.6s ease forwards;
    }

    .package-features li:nth-child(1) { animation-delay: 0.7s; }
    .package-features li:nth-child(2) { animation-delay: 0.8s; }
    .package-features li:nth-child(3) { animation-delay: 0.9s; }
    .package-features li:nth-child(4) { animation-delay: 1.0s; }

    @keyframes featureItemSlide {
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .package-features li::before {
        content: '✦';
        position: absolute;
        left: 0;
        color: #00fff7;
        font-weight: bold;
        font-size: 1.2em;
        text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
        animation: checkSpin 2s ease-in-out infinite;
    }

    @keyframes checkSpin {
        0%, 100% { transform: scale(1) rotate(0deg); }
        50% { transform: scale(1.2) rotate(180deg); }
    }

    .package-features li:hover {
        transform: translateX(10px);
        color: #00fff7;
    }

    /* CTA Button */
    .package-cta {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
        color: #000;
        border: none;
        padding: 16px 40px;
        border-radius: 30px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        margin-top: 25px;
        backdrop-filter: blur(20px);
        border: 2px solid transparent;
        opacity: 0;
        animation: buttonPopIn 0.8s ease 1s forwards;
        position: relative;
        z-index: 2;
        box-shadow: 
            0 10px 30px rgba(0, 0, 0, 0.3),
            0 0 20px rgba(0, 255, 255, 0.2);
        overflow: hidden;
    }

    .package-cta::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.4), transparent);
        transition: left 0.6s;
    }

    .package-cta:hover::before {
        left: 100%;
    }

    @keyframes buttonPopIn {
        from {
            opacity: 0;
            transform: translateY(30px) scale(0.8);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .package-cta:hover {
        background: linear-gradient(135deg, #fff, #e6f7ff);
        transform: translateY(-5px) scale(1.05);
        box-shadow: 
            0 15px 40px rgba(0, 0, 0, 0.4),
            0 0 30px rgba(0, 255, 255, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
        border-color: #00fff7;
        color: #0066cc;
    }

    /* Contact Section Styling */
    .contact-section {
        background: linear-gradient(135deg, #0f0f0f, #1c1c1c);
        color: #ffffff;
        padding: 60px 20px;
        text-align: center;
    }

    .contact-section h1 {
        font-size: 3rem;
        color: #00fff7;
        margin-bottom: 40px;
        text-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
        font-weight: 800;
        letter-spacing: -1px;
    }

    .contact-form {
        max-width: 700px;
        margin: 0 auto;
        background: rgba(255, 255, 255, 0.05);
        padding: 40px;
        border-radius: 20px;
        backdrop-filter: blur(12px);
        box-shadow: 0 0 25px rgba(0, 255, 255, 0.08);
        border: 1px solid rgba(0, 255, 255, 0.15);
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .contact-form select {
        color: #000;
    }

    .contact-form select option:disabled {
        color: #888;
    }

    .contact-form select option {
        color: #000;
        background-color: #fff;
    }

    .form-group {
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }

    .form-group label {
        margin-bottom: 8px;
        color: #00fff7;
        font-weight: 500;
        font-size: 1rem;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(0, 255, 255, 0.2);
        border-radius: 12px;
        padding: 12px 16px;
        color: #fff;
        font-size: 1rem;
        outline: none;
        transition: border 0.3s, box-shadow 0.3s;
        font-family: 'Inter', sans-serif;
    }

    .form-group input::placeholder,
    .form-group textarea::placeholder {
        color: #bbb;
        font-weight: 300;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        border-color: #00fff7;
        box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
    }

    .checkbox-group {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .checkbox-group input[type="checkbox"] {
        transform: scale(1.2);
        accent-color: #00fff7;
    }

    .cta-button {
        background-color: #00fff7;
        color: #000;
        font-weight: 600;
        padding: 14px 28px;
        border: none;
        border-radius: 12px;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.2s;
        font-size: 1.1rem;
        align-self: center;
        margin-top: 10px;
    }

    .cta-button:hover {
        background-color: #00e6d2;
        transform: scale(1.05);
    }

    /* Main Content Styling */
    .about-section {
        background: linear-gradient(135deg, #0f0f0f, #1c1c1c);
        color: #ffffff;
        padding: 60px 20px;
        text-align: center;
    }

    .about-header h1 {
        font-size: 3rem;
        color: #00fff7;
        margin-bottom: 10px;
        text-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
        font-weight: 800;
        letter-spacing: -1px;
    }

    .about-header .tagline {
        font-size: 1.2rem;
        color: #cccccc;
        margin-bottom: 40px;
        font-weight: 300;
    }

    .about-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 40px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .about-content {
        color: black;
        flex: 1 1 400px;
        background: rgba(0, 0, 0, 0.05);
        padding: 30px;
        border-radius: 20px;
        backdrop-filter: blur(10px);
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        border: 3px solid rgba(0, 0, 0, 0.2);
        border-radius: 50px;
        transition: transform 0.3s ease;
        text-align: left;
        font-family: 'Inter', sans-serif;
    }

    .about-content:hover {
        transform: translateY(-10px);
    }

    .about-content h2 {
        color: #00fff7;
        margin-bottom: 15px;
        font-weight: 700;
    }

    .about-content p {
        color: #ffffff;
        line-height: 1.6;
        font-weight: 400;
    }

    /* Social Cards */
    .social-display {
        flex: 1 1 400px;
        text-align: center;
    }

    .social-cards {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
    }

    .social-card {
        display: flex;
        align-items: center;
        gap: 20px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 16px;
        padding: 20px;
        backdrop-filter: blur(12px);
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
        border: 1px solid rgba(0, 255, 255, 0.15);
        position: relative;
        transition: transform 0.3s ease;
    }

    .social-card:hover {
        transform: translateY(-6px);
    }

    .social-icon i {
        font-size: 2rem;
        color: #00fff7;
    }

    .social-info h3 {
        margin: 0;
        font-size: 1.1rem;
        color: #ffffff;
        font-weight: 600;
    }

    .social-info p {
        margin: 5px 0;
        font-size: 0.95rem;
        color: #cccccc;
        font-weight: 300;
    }

    .social-link {
        display: inline-block;
        margin-top: 5px;
        color: #00fff7;
        text-decoration: none;
        font-weight: 600;
        transition: color 0.3s;
    }

    .social-link i {
        margin-left: 5px;
    }

    .social-link:hover {
        color: #ffffff;
    }

    /* Portfolio Preview */
    .portfolio-preview {
        padding: 60px 20px;
        background: #000;
        text-align: center;
    }

    .portfolio-preview h3 {
        font-size: 2rem;
        margin-bottom: 30px;
        color: #fff;
        font-weight: 700;
    }

    .image-grid {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }

    .image-grid img {
        width: 300px;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
        transition: transform 0.3s;
    }

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

    /* Why Choose Us */
    .why-choose-us {
        background: #0ff;
        color: #000;
        padding: 50px 20px;
        text-align: center;
    }

    .why-choose-us h3 {
        font-size: 2rem;
        margin-bottom: 25px;
        font-weight: 700;
    }

    .why-choose-us ul {
        list-style: none;
        padding: 0;
        display: flex;
        justify-content: center;
        gap: 30px;
        flex-wrap: wrap;
    }

    .why-choose-us li {
        font-weight: 600;
        font-size: 1.1rem;
    }

    .why-choose-us i {
        color: #000;
        margin-right: 10px;
    }

    /* CTA Section */
    .cta {
        background: linear-gradient(to right, #000, #111);
        color: white;
        text-align: center;
        padding: 70px 20px;
    }

    .cta h2 {
        font-size: 2.5rem;
        margin-bottom: 20px;
        color: #0ff;
        font-weight: 800;
        letter-spacing: -1px;
    }

    .cta p {
        font-size: 1.2rem;
        margin-bottom: 30px;
        font-weight: 300;
    }

    .cta-btn {
        display: inline-block;
        background-color: #0ff;
        color: #000;
        padding: 12px 30px;
        font-weight: 600;
        border-radius: 30px;
        text-decoration: none;
        transition: background 0.3s;
        letter-spacing: 0.5px;
    }

    .cta-btn:hover {
        background-color: #00cccc;
    }

    /* Responsive Design */


    @media (max-width: 900px) {
        .features {
            gap: 30px;
        }
        .feature-card {
            width: 280px;
            height: 200px;
        }
    }

    @media (max-width: 768px) {
        .header {
            padding: 1rem;
        }
        
        .logo {
            display: flex;
            height: 1px;
        }

        .nav {
            display: none;
        }
        
        .nav.active {
            display: block;
            position: absolute;            
            top: -20px;
            left: -20px;
            width: 100%;
            background: #000;
            padding: 1rem;
        }
        
        .nav ul {
            flex-direction: column;
        }
        
        .nav li {
            margin: 10px 0;
        }
        
        .menu-toggle {
            display: block;
        }
        
        .hero h1 {
            font-size: 2rem;
        }
        
        .hero h2 {
            font-size: 3rem;
        }
        
        .features {
            gap: 30px;
            padding: 40px 5%;
        }
        
        .feature-card {
            width: 100%;
            max-width: 350px;
            margin: 0 auto 30px;
        }

        .contact-form {
            padding: 30px 20px;
        }

        .about-grid {
            flex-direction: column;
            gap: 40px;
        }

        .social-cards {
            flex-direction: column;
        }

        /* Info boxes responsive */
        .info-boxes {
            flex-direction: row;
            flex-wrap: nowrap;
            overflow-x: auto;
            gap: 25px;
            padding: 30px 20px;
            justify-content: flex-start;
            scroll-snap-type: x mandatory;
        }
        
        .info-box {
            min-width: 300px;
            height: 420px;
            flex: 0 0 300px;
            scroll-snap-align: start;
            padding: 35px 20px;
        }
        
        .package-tier {
            font-size: 0.9em;
            padding: 10px 20px;
        }
        
        .package-price {
            font-size: 2.5em;
        }
        
        .info-box-text {
            font-size: 1.3em;
        }
        
        .star {
            font-size: 2rem;
        }
    }

    @media (max-width: 480px) {
        .hero h1 {
            font-size: 1.8rem;
        }
        
        .hero h2 {
            font-size: 2.5rem;
        }
        
        .hero .tagline {
            font-size: 1.2rem;
        }
        
        .about-me h3 {
            font-size: 1.8rem;
        }
        
        .feature-card {
            height: 180px;
        }
        
        .feature-card-front,
        .feature-card-back {
            padding: 20px;
        }

        .info-section h3 {
            font-size: 2.2rem;
        }
        
        .info-box {
            min-width: 280px;
            height: 400px;
            padding: 30px 20px;
        }
        
        .package-price {
            font-size: 2.2em;
        }
        
        .package-cta {
            padding: 14px 30px;
            font-size: 0.9em;
        }
    }

    /* Section entrance animation */
    @keyframes sectionEntrance {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .info-section {
        animation: sectionEntrance 1s ease-out;
    }

    .test {
        position: relative;
        top: -70px;
    }

    .feature-badge1
    {
        background: #0ff;
        color: #000;
        padding: 4px 20px;
        border-radius: 20px;
        font-size: 0.5rem;
        font-weight: 700;
    }