* { 
            margin: 0; 
            padding: 0; 
            box-sizing: border-box; 
        } 
        :root { 
            /* Brand DNA Color Palette */ 
            --mediterranean-blue: #0E4B7F; 
            --valencia-orange: #FF6B35; 
            --olive-green: #6B8E23; 
            --soil-brown: #8B4513; 
            --sky-blue: #87CEEB; 
            --digital-grey: #4A4A4A; 
            --light-sand: #FFF8E1; 
            --water-blue: #4A90E2; 
            --success-green: #52C41A; 
        } 
 
        body { 
            font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif; 
            color: var(--digital-grey); 
            overflow-x: hidden; 
            background: #FAFAFA; 
        } 

        /* Preloader */ 
        .preloader { 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: white; 
            z-index: 10000; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            transition: opacity 0.5s; 
        } 
        .preloader.hidden { 
            opacity: 0; 
            pointer-events: none; 
        } 
 
        .water-drop { 
            width: 50px; 
            height: 50px; 
            background: linear-gradient(135deg, var(--mediterranean-blue), var(--sky-blue)); 
            border-radius: 0 50% 50% 50%; 
            transform: rotate(45deg); 
            animation: dropAnimation 1.5s infinite; 
        } 
 
        @keyframes dropAnimation { 
            0% { transform: rotate(45deg) scale(1); } 
            50% { transform: rotate(45deg) scale(1.1); } 
            100% { transform: rotate(45deg) scale(1); } 
        } 
           /* Hero Section with Advanced Design */ 
        .hero { 
            
            min-height: 100vh; 
            position: relative; 
            overflow: hidden; 
            background: linear-gradient(135deg, #F0F9FF 0%, #FFF8E1 50%, #E8F5E9 100%); 
        } 
 
        .hero-bg-pattern { 
            position: absolute; 
            width: 100%; 
            height: 100%; 
            opacity: 0.05; 
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grid' width='50' height='50' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='25' cy='25' r='2' fill='%230E4B7F'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grid)'/%3E%3C/svg%3E"); 
        } 

        .floating-shapes { 
            position: absolute; 
            width: 100%; 
            height: 100%; 
            pointer-events: none; 
        } 
 
        .shape { 
            position: absolute; 
            border-radius: 50%; 
            filter: blur(40px); 
            animation: floatShape 20s infinite ease-in-out; 
        } 
 
        .shape-1 { 
            width: 300px; 
            height: 300px; 
            background: rgba(14, 75, 127, 0.1); 
            top: 10%; 
            left: 10%; 
            animation-delay: 0s; 
        } 
 
        .shape-2 { 
            width: 200px; 
            height: 200px; 
            background: rgba(255, 107, 53, 0.1); 
            top: 60%; 
            right: 10%; 
            animation-delay: 5s; 
        } 
 
        .shape-3 { 
            width: 250px; 
            height: 250px; 
            background: rgba(107, 142, 35, 0.1); 
            bottom: 10%; 
            left: 30%; 
            animation-delay: 10s; 
        } 
 
        @keyframes floatShape { 
            0%, 100% { transform: translate(0, 0) scale(1); } 
            33% { transform: translate(30px, -30px) scale(1.05); } 
            66% { transform: translate(-20px, 20px) scale(0.95); } 
        } 
 
        .hero-content { 
            position: relative; 
            z-index: 2; 
            max-width: 1400px; 
            margin: 0 auto; 
            padding: 5rem 5%; 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 4rem; 
            align-items: center; 
            min-height: calc(100vh - 70px); 
        } 
 
        .hero-text h1 { 
            font-size: clamp(2.5rem, 5vw, 4rem); 
            line-height: 1.1; 
            font-weight: 800; 
            margin-bottom: 1.5rem; 
            letter-spacing: -0.02em; 
        } 
 
        .hero-text h1 .gradient-text { 
            background: linear-gradient(135deg, var(--olive-green), var(--mediterranean-blue), var(--valencia-orange)); 
            background-size: 200% 200%; 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
            animation: gradientShift 4s ease infinite; 
        } 
 
        @keyframes gradientShift { 
            0%, 100% { background-position: 0% 50%; } 
            50% { background-position: 100% 50%; } 
        } 
 
        .hero-text p { 
            font-size: 1.25rem; 
            line-height: 1.7; 
            color: var(--digital-grey); 
            margin-bottom: 2rem; 
            opacity: 0.9; 
        } 
 
        .hero-stats { 
            display: flex; 
			gap: 2rem; 
            margin-bottom: 2rem; 
        } 
 
        .stat-item { 
            animation: slideUp 0.6s ease forwards; 
            opacity: 0; 
        } 
 
        .stat-item:nth-child(1) { animation-delay: 0.2s; } 
        .stat-item:nth-child(2) { animation-delay: 0.4s; } 
        .stat-item:nth-child(3) { animation-delay: 0.6s; } 
 
        @keyframes slideUp { 
            to { 
                opacity: 1; 
                transform: translateY(0); 
            } 
            from { 
                opacity: 0; 
                transform: translateY(20px); 
            } 
        } 
 
        .stat-value { 
            font-size: 2rem; 
            font-weight: 700; 
            color: var(--mediterranean-blue); 
        } 
 
        .stat-label { 
            font-size: 0.9rem; 
            color: var(--digital-grey); 
            opacity: 0.7; 
        } 
 
        .cta-group { 
            display: flex; 
            gap: 1rem; 
            flex-wrap: wrap; 
        } 
 
        .btn { 
            padding: 1rem 2rem; 
            border-radius: 50px; 
            font-weight: 600; 
            font-size: 1rem; 
            cursor: pointer; 
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
            text-decoration: none; 
            display: inline-flex; 
            align-items: center; 
            gap: 0.5rem; 
            border: none; 
            position: relative; 
            overflow: hidden; 
        } 
 
        .btn-primary { 
            background: linear-gradient(135deg, var(--valencia-orange), var(--mediterranean-blue)); 
            color: white; 
            box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3); 
        } 
 
        .btn-primary::before { 
            content: ''; 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            width: 0; 
            height: 0; 
            border-radius: 50%; 
            background: rgba(255, 255, 255, 0.3); 
            transform: translate(-50%, -50%); 
            transition: width 0.6s, height 0.6s; 
        } 
 
        .btn-primary:hover::before { 
            width: 300px; 
            height: 300px; 
        } 
 
        .btn-primary:hover { 
            transform: translateY(-3px); 
            box-shadow: 0 15px 40px rgba(255, 107, 53, 0.4); 
        } 
 
        .btn-secondary { 
            background: white; 
            color: var(--mediterranean-blue); 
            border: 2px solid var(--mediterranean-blue); 
            position: relative; 
            overflow: hidden; 
        } 
 
        .btn-secondary::before { 
            content: ''; 
            position: absolute; 
            top: 0; 
            left: -100%; 
            width: 100%; 
            height: 100%; 
            background: var(--mediterranean-blue); 
            transition: left 0.3s ease; 
            z-index: -1; 
        } 
 
        .btn-secondary:hover::before { 
            left: 0; 
        } 
 
        .btn-secondary:hover { 
            color: white; 
            transform: translateY(-3px); 
        } */
 
        /* Advanced Product Visualization */ 
        .product-showcase { 
            position: relative; 
            perspective: 1000px; 
        } 
 
        .dashboard-3d { 
            width: 100%; 
            background: white; 
            border-radius: 20px; 
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15); 
            padding: 1.5rem; 
            transform: rotateY(-5deg) rotateX(5deg); 
            transition: transform 0.3s ease; 
            animation: float3D 6s ease-in-out infinite; 
        } 
 
        @keyframes float3D { 
            0%, 100% { transform: rotateY(-5deg) rotateX(5deg) translateY(0); } 
            50% { transform: rotateY(-5deg) rotateX(5deg) translateY(-20px); } 
        } 
 
        .dashboard-3d:hover { 
            transform: rotateY(0) rotateX(0) scale(1.02); 
        } 
 
        .dashboard-header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 1.5rem; 
            padding-bottom: 1rem; 
            border-bottom: 1px solid #f0f0f0; 
        } 
 
        .window-controls { 
            display: flex; 
            gap: 0.5rem; 
        } 
 
        .dot { 
            width: 12px; 
            height: 12px; 
            border-radius: 50%; 
            cursor: pointer; 
            transition: transform 0.2s; 
        } 
 
        .dot:hover { transform: scale(1.2); } 
        .dot-red { background: #FF5F57; } 
        .dot-yellow { background: #FFBD2E; } 
        .dot-green { background: #28CA42; } 

        .dashboard-title { 
            font-size: 0.9rem; 
            color: var(--digital-grey); 
            font-weight: 600; 
        } 
 
        /* Interactive Map Visualization */ 
        .field-visualization { 
            display: grid; 
            grid-template-columns: 2fr 1fr; 
            gap: 1.5rem; 
            margin-bottom: 1.5rem; 
        } 
 
        .field-map-container { 
            width: 100%;
            background: linear-gradient(135deg, #E8F5E9, #C8E6C9); 
            border-radius: 15px; 
            height: 100%; 
            position: relative; 
            overflow: hidden; 
        } 
 
        .field-grid { 
            
            display: grid; 
            grid-template-columns: repeat(5, 1fr); 
            grid-template-rows: repeat(3, 1fr); 
            height: 100%; 
            padding: 1rem; 
            gap: 0.5rem; 
        } 
 
        .field-cell { 
            background: rgba(255, 255, 255, 0.3); 
            border-radius: 10px; 
            position: relative; 
            cursor: pointer; 
            transition: all 0.3s ease; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 0.8rem; 
            color: var(--digital-grey); 
        } 
 
        .field-cell::before { 
            content: attr(data-moisture) '%'; 
            position: absolute; 
            top: 5px; 
            right: 5px; 
            font-size: 0.7rem; 
            font-weight: 600; 
        } 
 
        .field-cell.optimal { background: rgba(76, 175, 80, 0.4); } 
        .field-cell.warning { background: rgba(255, 193, 7, 0.4); } 
        .field-cell.critical { background: rgba(244, 67, 54, 0.4); } 
 
        .field-cell:hover { 
            transform: scale(1.05); 
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); 
            z-index: 10; 
        } 
 
        /* Live Metrics */ 
        .metrics-panel { 
            display: flex; 
            flex-direction: column; 
            gap: 1rem; 
        } 
 
        .metric-card { 
            background: linear-gradient(135deg, #f5f5f5, #ffffff); 
            border-radius: 15px; 
            padding: 1.2rem; 
            position: relative; 
            overflow: hidden; 
            cursor: pointer; 
            transition: all 0.3s ease; 
        } 
 
        .metric-card::before { 
            content: ''; 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 4px; 
            height: 100%; 
            background: linear-gradient(180deg, var(--valencia-orange), var(--mediterranean-blue)); 
        } 
 
        .metric-card:hover { 
            transform: translateX(5px); 
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); 
        } 
 
        .metric-label { 
            font-size: 0.85rem; 
            color: var(--digital-grey); 
            opacity: 0.7; 
            margin-bottom: 0.5rem; 
        } 
 
        .metric-value { 
            font-size: 1.8rem; 
            font-weight: 700; 
            color: var(--mediterranean-blue); 
            display: flex; 
            align-items: baseline; 
            gap: 0.3rem; 
        } 
 
        .metric-unit { 
            font-size: 1rem; 
            opacity: 0.7; 
        } 
 
        .metric-change { 
            font-size: 0.85rem; 
            margin-top: 0.5rem; 
            display: flex; 
            align-items: center; 
            gap: 0.3rem; 
        } 
 
        .metric-change.positive { 
            color: var(--success-green); 
        } 
 
        .metric-change.negative { 
            color: #f5222d; 
        } 
 
        /* Real-time Chart */ 
        .chart-container { 
            background: white; 
            border-radius: 15px; 
            padding: 1.5rem; 
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); 
        } 
 
        .chart-header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            margin-bottom: 1rem; 
        } 
 
        .chart-title { 
            font-size: 1rem; 
            font-weight: 600; 
            color: var(--digital-grey); 
        } 
 
        .chart-legend { 
            display: flex; 
            gap: 1rem; 
        } 
 
        .legend-item { 
            display: flex; 
            align-items: center; 
            gap: 0.3rem; 
            font-size: 0.85rem; 
        } 
        .legend-dot { 
            width: 10px; 
            height: 10px; 
            border-radius: 50%; 
        } 
 
        .chart-canvas { 
            height: 150px; 
            position: relative; 
            background: linear-gradient(180deg, rgba(14, 75, 127, 0.05) 0%, rgba(255, 255, 255, 0) 100%); 
            border-radius: 10px; 
            overflow: hidden; 
        } 
 
        .chart-line { 
            position: absolute; 
            bottom: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
        } 
        .chart-line svg { 
            width: 100%; 
            height: 100%; 
        } 
         .chart-line path { 
            fill: none; 
            stroke: var(--mediterranean-blue); 
            stroke-width: 2; 
            stroke-linecap: round; 
            animation: drawLine 2s ease forwards; 
        } 
 
        @keyframes drawLine { 
            from { 
                stroke-dasharray: 1000; 
                stroke-dashoffset: 1000; 
            } 
            to { 
                stroke-dashoffset: 0; 
            } 
        } 
 
        /* Features Section with Unique Layout */ 
        .features-section { 
            padding: 6rem 5%; 
            background: white; 
            position: relative; 
        } 
 
        .features-container { 
            max-width: 1400px; 
            margin: 0 auto; 
        } 
 
        .section-header { 
            text-align: center; 
            margin-bottom: 4rem; 
        } 
 
        .section-title { 
            font-size: 3rem; 
            font-weight: 800; 
            margin-bottom: 1rem; 
            background: linear-gradient(135deg, var(--olive-green), var(--mediterranean-blue)); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
        } 

        .section-subtitle { 
            font-size: 1.2rem; 
            color: var(--digital-grey); 
            opacity: 0.8; 
        } 
 
        .features-grid { 
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            gap: 2rem; 
            margin-bottom: 4rem; 
        } 
 
        .feature-card { 
            background: linear-gradient(135deg, #ffffff, #f8f9fa); 
            border-radius: 20px; 
            padding: 2rem; 
            position: relative; 
            cursor: pointer; 
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
            border: 1px solid rgba(0, 0, 0, 0.05); 
            overflow: hidden; 
        } 
 
        .feature-card::before { 
            content: ''; 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: linear-gradient(135deg, var(--valencia-orange), var(--mediterranean-blue)); 
            opacity: 0; 
            transition: opacity 0.3s ease; 
            z-index: 0; 
        } 
 
        .feature-card:hover::before { 
            opacity: 0.05; 
        } 
 
        .feature-card:hover { 
            transform: translateY(-10px) scale(1.02); 
            box-shadow: 0 20px 40px rgba(14, 75, 127, 0.15); 
        } 
 
        .feature-content { 
            position: relative; 
            z-index: 1; 
        } 
 
        .feature-icon { 
            width: 70px; 
            height: 70px; 
            margin-bottom: 1.5rem; 
            background: linear-gradient(135deg, var(--valencia-orange), var(--mediterranean-blue)); 
            border-radius: 20px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 2rem; 
            color: white; 
            position: relative; 
        } 

        .feature-icon::after { 
            content: ''; 
            position: absolute; 
            width: 100%; 
            height: 100%; 
            background: inherit; 
            border-radius: inherit; 
            opacity: 0.3; 
            z-index: -1; 
            animation: pulse 2s infinite; 
        } 
 
        @keyframes pulse { 
            0%, 100% { transform: scale(1); } 
            50% { transform: scale(1.1); } 
        } 
 
        .feature-title { 
            font-size: 1.3rem; 
            font-weight: 700; 
            margin-bottom: 0.5rem; 
            color: var(--digital-grey); 
        } 
 
        .feature-description { 
            color: var(--digital-grey); 
            opacity: 0.8; 
            line-height: 1.6; 
        } 
 
        /* Interactive Stats Counter */ 
        .stats-section { 
            padding: 6rem 5%; 
            background: linear-gradient(135deg, var(--mediterranean-blue), var(--olive-green)); 
            position: relative; 
            overflow: hidden; 
        } 
 
        .stats-bg-decoration { 
            position: absolute; 
            width: 100%; 
            height: 100%; 
            opacity: 0.1; 
            background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='wave' x='0' y='0' width='400' height='400' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0,100 Q100,50 200,100 T400,100' stroke='white' stroke-width='2' fill='none'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23wave)'/%3E%3C/svg%3E"); 
        } 
 
        .stats-container { 
            max-width: 1200px; 
            margin: 0 auto; 
            position: relative; 
            z-index: 1; 
        } 
 
        .stats-grid { 
            display: grid; 
            grid-template-columns: repeat(4, 1fr); 
            gap: 3rem; 
        } 
 
        .stat-card { 
            text-align: center; 
            color: white; 
            cursor: pointer; 
            transition: transform 0.3s ease; 
        } 

    .stat-card:hover { 
        transform: translateY(-5px); 
        } 

    .stat-number { 
        font-size: 3.5rem; 
        font-weight: 800; 
        margin-bottom: 0.5rem; 
        margin-right: auto;
        position: relative; 
        display: inline-block; 
    } 
    .stat-number::after { 
        content: attr(data-suffix); 
        font-size: 0rem; 
        position: absolute; 
        top: 0; 
        right: -1.5rem; 
    } 
    .stat-description { 
        font-size: 1.1rem; 
        opacity: 0.9; 
    } 
    /* Contact Form with Modern Design */ 
    .contact-section { 
        padding: 6rem 5%; 
        background: var(--light-sand); 
    } 
    .contact-container { 
        max-width: 1200px; 
        margin: 0 auto; 
    } 
    .contact-grid { 
        display: grid; 
        grid-template-columns: 1fr 1fr; 
        gap: 4rem; 
        align-items: center; 
    } 
    .contact-info-1 { 
        padding: 2rem; 
    } 
    .contact-info-1 h2 { 
        font-size: 2.5rem; 
        margin-bottom: 1rem; 
        color: var(--mediterranean-blue); 
    } 
    .contact-info-1 p { 
        font-size: 1.1rem; 
        line-height: 1.7; 
        color: var(--digital-grey); 
        margin-bottom: 2rem; 
    } 
    .contact-benefits { 
        list-style: none; 
    } 
    .contact-benefits li { 
            display: flex; 
            align-items: center; 
            gap: 1rem; 
            margin-bottom: 1rem; 
            font-size: 1.05rem; 
            color: var(--digital-grey); 
        } 
         .check-icon { 
            width: 25px; 
            height: 25px; 
            background: linear-gradient(135deg, var(--valencia-orange), var(--mediterranean-blue)); 
            border-radius: 50%; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            color: white; 
            font-size: 0.8rem; 
            flex-shrink: 0; 
        } 
         .contact-form-container { 
            background: white; 
            border-radius: 30px; 
            padding: 3rem; 
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1); 
            position: relative; 
            overflow: hidden; 
        } 
 
        .contact-form-container::before { 
            content: ''; 
            position: absolute; 
            top: -50%; 
            right: -50%; 
            width: 100%; 
            height: 100%; 
            background: radial-gradient(circle, var(--valencia-orange) 0%, transparent 70%); 
            opacity: 0.05; 
        } 
 
        .form-group { 
            margin-bottom: 1.5rem; 
            position: relative; 
        } 
 
        .form-group label { 
            display: block; 
            margin-bottom: 0.5rem; 
            color: var(--digital-grey); 
            font-weight: 500; 
            font-size: 0.95rem; 
        } 
        .form-input { 
            width: 100%; 
            padding: 1rem 1.2rem; 
            border: 2px solid #e0e0e0; 
            border-radius: 15px; 
            font-size: 1rem; 
            transition: all 0.3s ease; 
            background: white; 
        } 
 
        .form-input:focus { 
            outline: none; 
            border-color: var(--mediterranean-blue); 
            box-shadow: 0 0 0 4px rgba(14, 75, 127, 0.1); 
        } 
 
        .form-select { 
            appearance: none; 
            background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%234A4A4A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); 
            background-repeat: no-repeat; 
            background-position: right 1rem center; 
            padding-right: 2.5rem; 
        } 
 
        .form-textarea { 
            resize: vertical; 
            min-height: 120px; 
        } 
 
        .form-submit { 
            width: 100%; 
            padding: 1.2rem; 
            background: linear-gradient(135deg, var(--valencia-orange), var(--mediterranean-blue)); 
            color: white; 
            border: none; 
            border-radius: 15px; 
            font-size: 1.1rem; 
            font-weight: 600; 
            cursor: pointer; 
            transition: all 0.3s ease; 
            position: relative; 
            overflow: hidden; 
        } 
 
        .form-submit::before { 
            content: ''; 
            position: absolute; 
            top: 50%; 
            left: 50%; 
            width: 0; 
            height: 0; 
            background: rgba(255, 255, 255, 0.3); 
            border-radius: 50%; 
            transform: translate(-50%, -50%); 
            transition: width 0.6s, height 0.6s; 
        } 
 
        .form-submit:hover::before { 
            width: 500px; 
            height: 500px; 
        } 
 
        .form-submit:hover { 
            transform: translateY(-2px); 
            box-shadow: 0 10px 30px rgba(14, 75, 127, 0.3); 
        } 
 
        /* Footer */ 
        footer { 
            background: var(--digital-grey); 
            color: white; 
            padding: 4rem 5% 2rem; 
        } 
 
        .footer-content { 
            max-width: 1400px; 
            margin: 0 auto; 
        } 
 
        .footer-grid { 
            display: grid; 
            grid-template-columns: 2fr 1fr 1fr 1fr; 
            gap: 3rem; 
            margin-bottom: 3rem; 
        } 
        .footer-brand h3 { 
            font-size: 1.8rem; 
            margin-bottom: 1rem; 
        } 
 
        .footer-brand p { 
            opacity: 0.8; 
            line-height: 1.6; 
        } 
        .footer-links h4 { 
            margin-bottom: 1rem; 
            font-size: 1.1rem; 
        } 
 
        .footer-links ul { 
            list-style: none; 
        } 
        .footer-links li { 
            margin-bottom: 0.5rem; 
        } 
        .footer-links a { 
            color: white; 
            text-decoration: none; 
            opacity: 0.8; 
            transition: opacity 0.3s ease; 
        } 
        .footer-links a:hover { 
            opacity: 1; 
        } 
        .footer-bottom { 
            padding-top: 2rem; 
            border-top: 1px solid rgba(255, 255, 255, 0.1); 
            text-align: center; 
            opacity: 0.7; 
        } 
 
        /* Responsive Design */ 
        @media (max-width: 1024px) { 
            .hero-content { 
				
                grid-template-columns: 1fr; 
                
            } 
			.cta-group {
				justify-content:center;
			}
			.hero-stats {
				justify-content:center;
			}
            .features-grid { 
                grid-template-columns: repeat(2, 1fr); 
            } 
            .stats-grid { 
                grid-template-columns: repeat(2, 1fr); 
            } 
            .contact-grid { 
                grid-template-columns: 1fr; 
            } 
        } 
        @media (max-width: 768px) { 
            .nav-links { 
                display: none; 
            } 
            .hero-text h1 { 
                font-size: 2.5rem; 
            } 
            .features-grid { 
                grid-template-columns: 1fr; 
            } 
            .footer-grid { 
                grid-template-columns: 1fr; 
                text-align: center; 
            } 
        } 
@media (max-width: 500px){
    .product-showcase{
        display: none;
    }
    .stat-number{
        font-size: 8.5vw; 
        font-weight: 800; 
        margin-bottom: 0.5rem; 
        margin-right: auto;
        position: relative; 
        display: inline-block; 
    }
}