:root { 
            --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; 
        } 
 
        /* Hero Section */ 
        .solutions-hero { 
            
            padding: 6rem 5%; 
            background: linear-gradient(135deg, var(--light-sand) 0%, #E8F5E9 100%); 
            position: relative; 
            overflow: hidden; 
        } 
 
        .solutions-hero::before { 
            content: ''; 
            position: absolute; 
            width: 150%; 
            height: 150%; 
            background: radial-gradient(circle at 30% 50%, var(--valencia-orange) 0%, transparent 25%), 
                        radial-gradient(circle at 70% 80%, var(--mediterranean-blue) 0%, transparent 25%); 
            opacity: 0.05; 
            animation: rotate 20s linear infinite; 
        } 
 
        @keyframes rotate { 
            from { transform: rotate(0deg); } 
            to { transform: rotate(360deg); } 
        } 
 
        .hero-sol-content { 
            max-width: 1200px; 
            margin: 0 auto; 
            text-align: center; 
            position: relative; 
            z-index: 1; 
        } 
 
        .hero-sol-content h1 { 
            font-size: 3.5rem; 
            font-weight: 800; 
            margin-bottom: 1.5rem; 
            background: linear-gradient(135deg, var(--olive-green), var(--mediterranean-blue)); 
            -webkit-background-clip: text; 
            -webkit-text-fill-color: transparent; 
        } 
 
        .hero-sol-content p { 
            font-size: 1.3rem; 
            color: var(--digital-grey); 
            max-width: 800px; 
            margin: 0 auto; 
            opacity: 0.9; 
        } 
 
        /* Crop Solutions */ 
        .crop-solutions { 
            padding: 5rem 5%; 
            background: white; 
        } 
 
        .solutions-container { 
            justify-items: center;
            max-width: 1200px; 
            margin: 0 auto; 
        } 
 
        .section-header { 
            text-align: center; 
            margin-bottom: 4rem; 
        } 
 
        .section-header h2 { 
            font-size: 2.5rem; 
            color: var(--mediterranean-blue); 
            margin-bottom: 1rem; 
        } 
 
        .crops-grid { 
            display: grid; 
            grid-template-columns: repeat(2, 1fr); 
            gap: 3rem; 
        } 

        .crop-card { 
            width: 350px;
            justify-items: center;
            background: linear-gradient(135deg, #ffffff, #f8f9fa); 
            border-radius: 30px; 
            padding: 3rem; 
            position: relative; 
            overflow: hidden; 
            transition: all 0.3s ease; 
            cursor: pointer; 
            border: 1px solid rgba(0,0,0,0.05); 
        } 
 
        .crop-card::before { 
            content: ''; 
            position: absolute; 
            top: -50%; 
            right: -50%; 
            width: 100%; 
            height: 100%; 
            background: radial-gradient(circle, var(--valencia-orange), transparent); 
            opacity: 0; 
            transition: opacity 0.3s ease; 
        } 



        .crop-card:hover::before { 
            opacity: 0.05; 
        } 
 
        .crop-card:hover { 
            transform: translateY(-10px); 
            box-shadow: 0 30px 60px rgba(0,0,0,0.15); 
        } 
 
        .crop-header { 
            display: flex; 
            align-items: center; 
            gap: 1.5rem; 
            margin-bottom: 2rem; 
        } 
 
        .crop-icon { 
            width: 80px; 
            height: 80px; 
            background: linear-gradient(135deg, var(--valencia-orange), var(--mediterranean-blue)); 
            border-radius: 20px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            font-size: 2.5rem; 
        } 
 
        .crop-info h3 { 
            font-size: 1.5rem; 
            color: var(--digital-grey); 
            margin-bottom: 0.3rem; 
        } 
 
        .crop-region { 
            color: var(--mediterranean-blue); 
            font-weight: 500; 
        } 
 
        .crop-stats { 
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            gap: 1rem; 
            margin-bottom: 2rem; 
        } 
 
        .stat-item { 
            text-align: center; 
            padding: 1rem; 
            background: var(--light-sand); 
            border-radius: 15px; 
        } 
 
        .stat-value { 
            font-size: 1.5rem; 
            font-weight: 700; 
            color: var(--mediterranean-blue); 
        } 
 
        .stat-label { 
            font-size: 0.85rem; 
            color: var(--digital-grey); 
            opacity: 0.8; 
        } 
 
        .crop-description { 
            color: var(--digital-grey); 
            line-height: 1.6; 
            margin-bottom: 1.5rem; 
        } 
 
        .crop-features { 
            list-style: none; 
        } 
 
        .crop-features li { 
            display: flex; 
            align-items: center; 
            gap: 0.5rem; 
            margin-bottom: 0.5rem; 
            color: var(--digital-grey); 
        } 
 
        .feature-check { 
            color: var(--success-green); 
            font-weight: bold; 
        } 
 
        /* Pricing Tiers */ 
        .pricing-section { 
            padding: 5rem 5%; 
            background: var(--light-sand); 
        } 
 
        .pricing-grid { 
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            gap: 2rem; 
            margin-top: 3rem; 
        } 
 
        .pricing-card { 
            background: white; 
            border-radius: 20px; 
            padding: 2.5rem; 
            text-align: center; 
            position: relative; 
            transition: all 0.3s ease; 
        } 
 
        .pricing-card.featured { 
            transform: scale(1.05); 
            box-shadow: 0 20px 40px rgba(14, 75, 127, 0.2); 
        } 
 
        .pricing-card.featured::before { 
            content: 'MOST POPULAR'; 
            position: absolute; 
            top: -15px; 
            left: 50%; 
            transform: translateX(-50%); 
            background: var(--valencia-orange); 
            color: white; 
            padding: 0.5rem 1.5rem; 
            border-radius: 20px; 
            font-size: 0.8rem; 
            font-weight: 600; 
        } 
 
        .pricing-card:hover { 
            transform: translateY(-5px); 
            box-shadow: 0 15px 30px rgba(0,0,0,0.15); 
        } 
 
        .pricing-tier { 
            font-size: 1.5rem; 
            font-weight: 700; 
            color: var(--mediterranean-blue); 
            margin-bottom: 0.5rem; 
        } 
 
        .pricing-price { 
            font-size: 2.5rem; 
            font-weight: 800; 
            color: var(--digital-grey); 
            margin-bottom: 0.5rem; 
        } 
 
        .pricing-price span { 
            font-size: 1rem; 
            opacity: 0.7; 
        } 
 
        .pricing-description { 
            color: var(--digital-grey); 
            opacity: 0.8; 
            margin-bottom: 2rem; 
    } 
 
        .pricing-features { 
            list-style: none; 
            margin-bottom: 2rem; 
        } 
 
        .pricing-features li { 
            padding: 0.75rem 0; 
            border-bottom: 1px solid rgba(0,0,0,0.05); 
            color: var(--digital-grey); 
        } 
 
        .pricing-btn { 
            width: 100%; 
            padding: 1rem; 
            background: linear-gradient(135deg, var(--valencia-orange), var(--mediterranean-blue)); 
            color: white; 
            border: none; 
            border-radius: 30px; 
            font-weight: 600; 
            cursor: pointer; 
            transition: all 0.3s ease; 
        } 
 
        .pricing-btn:hover { 
            transform: translateY(-2px); 
            box-shadow: 0 10px 20px rgba(255, 107, 53, 0.3); 
        } 
 
        /* ROI Calculator */ 
        .calculator-section { 
            padding: 5rem 5%; 
            background: linear-gradient(135deg, var(--mediterranean-blue), var(--olive-green)); 
            color: white; 
        } 
 
        .calculator-container { 
            max-width: 800px; 
            margin: 0 auto; 
            text-align: center; 
        } 
 
        .calculator-container h2 { 
            font-size: 2.5rem; 
            margin-bottom: 2rem; 
        } 
 
        .calculator-form { 
			margin-top: 30px;
            background: rgba(255,255,255,0.1); 
            backdrop-filter: blur(10px); 
            border-radius: 20px; 
            padding: 2rem; 
        } 
 
        .calc-input-group { 
            display: grid; 
            grid-template-columns: repeat(2, 1fr); 
            gap: 1.5rem; 
            margin-bottom: 2rem; 
        } 
 
        .calc-field { 
            text-align: left; 
        } 
 
        .calc-label { 
            display: block; 
            margin-bottom: 0.5rem; 
            font-size: 0.95rem; 
        } 
 
        .calc-input { 
            width: 100%; 
            padding: 0.75rem; 
            border: 2px solid rgba(255,255,255,0.3); 
            border-radius: 10px; 
            background: rgba(255,255,255,0.1); 
            color: white; 
            font-size: 1rem; 
        } 
 
        .calc-input::placeholder { 
            color: rgba(255,255,255,0.5); 
        } 
 
        .calc-result { 
            background: rgba(255,255,255,0.2); 
            border-radius: 15px; 
            padding: 2rem; 
            margin-top: 2rem; 
        } 
 
        .result-value { 
            font-size: 3rem; 
            font-weight: 800; 
            margin-bottom: 0.5rem; 
        } 
 
        .result-label { 
            font-size: 1.1rem; 
            opacity: 0.9; 
        } 
 
        /* Footer */ 
        footer { 
            background: var(--digital-grey); 
            color: white; 
            padding: 4rem 5% 2rem; 
        } 
 @media(max-width:800px){
        .crops-grid { 
            display: flex;
            flex-direction: column;
        } 
      .calc-input-group { 
            display: grid; 
            grid-template-columns: repeat(1, 1fr); 
            gap: 1.5rem; 
            margin-bottom: 2rem; 
        } 
 
}