body { font-family: 'Lato', sans-serif; margin: 0; padding: 0; background-color: #F8FAF8; color: #1B3624; } h1, h2, h3, h4 { font-family: 'Merriweather', serif; color: #0D2614; margin-top: 0; } img { width: 100%; height: auto; object-fit: cover; } .vy-top-bar { position: sticky; top: 0; background: #FFFFFF; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 15px rgba(0,0,0,0.03); z-index: 100; } .vy-brand-mark { font-family: 'Merriweather', serif; font-weight: 700; font-size: 1.5rem; color: #2E593E; text-decoration: none; letter-spacing: -0.5px; } .vy-nav-links a { margin-left: 25px; text-decoration: none; color: #4A6B56; font-weight: 700; font-size: 0.95rem; transition: color 0.3s; } .vy-nav-links a:hover { color: #1B3624; } .vy-hero-stage { padding: 100px 30px 60px; text-align: center; background: linear-gradient(180deg, #E4EFE6 0%, #F8FAF8 100%); display: flex; flex-direction: column; align-items: center; } .vy-hero-stage h1 { font-size: 3.5rem; margin-bottom: 25px; max-width: 900px; line-height: 1.2; } .vy-hero-stage p { font-size: 1.25rem; max-width: 650px; margin-bottom: 40px; line-height: 1.7; color: #3A5A46; } .vy-cta-button { background: #2E593E; color: #FFF; padding: 16px 38px; text-decoration: none; border-radius: 3px; font-weight: 700; border: none; cursor: pointer; font-size: 1.1rem; transition: background 0.3s, transform 0.2s; display: inline-block; } .vy-cta-button:hover { background: #1B3624; transform: translateY(-2px); } .vy-hero-visual { margin-top: 60px; max-width: 1000px; width: 100%; border-radius: 6px; overflow: hidden; box-shadow: 0 20px 40px rgba(46,89,62,0.15); } .vy-hero-visual img { max-height: 600px; } .vy-hero-disclaimer { display: block; margin-top: 20px; font-size: 0.85rem; color: #6B8072; font-style: italic; } .vy-about-plate { padding: 110px 30px; background: #FFFFFF; } .vy-about-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 70px; align-items: center; } .vy-about-inner p { font-size: 1.1rem; line-height: 1.8; margin-bottom: 20px; color: #4A6B56; } .vy-about-inner img { border-radius: 6px; box-shadow: -15px 15px 0px #E4EFE6; } .vy-stat-badge { background: #F0F6F1; padding: 25px; border-left: 5px solid #2E593E; margin-top: 35px; font-size: 1.1rem; color: #1B3624; } .vy-agri-hub { padding: 90px 30px 120px; max-width: 1000px; margin: 0 auto; } .vy-agri-hub h2 { text-align: center; font-size: 2.5rem; margin-bottom: 50px; } .vy-tab-menu { display: flex; justify-content: center; gap: 15px; margin-bottom: 50px; flex-wrap: wrap; } .vy-tab-btn { background: #FFFFFF; border: 2px solid #E4EFE6; padding: 14px 30px; font-family: 'Lato', sans-serif; font-weight: 700; color: #4A6B56; cursor: pointer; border-radius: 30px; transition: all 0.3s; font-size: 1rem; } .vy-tab-btn:hover { border-color: #2E593E; } .vy-tab-active { background: #2E593E; color: #FFF; border-color: #2E593E; } .vy-tab-content { display: none; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; background: #FFFFFF; padding: 40px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.04); } .vy-content-active { display: grid; } .vy-tab-content h3 { font-size: 1.8rem; margin-bottom: 20px; } .vy-tab-content p { font-size: 1.1rem; line-height: 1.7; color: #4A6B56; } .vy-tab-content img { border-radius: 4px; max-height: 400px; } .vy-voice-cards { padding: 100px 30px; background: #1B3624; color: #FFFFFF; text-align: center; } .vy-voice-cards h2 { color: #FFFFFF; font-size: 2.5rem; margin-bottom: 20px; } .vy-voice-grid { display: flex; justify-content: center; gap: 40px; max-width: 1000px; margin: 50px auto 0; flex-wrap: wrap; } .vy-voice-single { background: #274A33; padding: 40px; border-radius: 6px; width: 340px; text-align: left; box-shadow: 0 10px 20px rgba(0,0,0,0.2); } .vy-voice-single img { width: 70px; height: 70px; border-radius: 50%; margin-bottom: 20px; border: 3px solid #4A6B56; } .vy-voice-single p { font-size: 1.05rem; line-height: 1.6; font-style: italic; margin-bottom: 20px; color: #D6E8D9; } .vy-voice-single small { color: #8BA895; } .vy-contact-base { padding: 120px 30px; max-width: 650px; margin: 0 auto; text-align: center; } .vy-contact-base h2 { font-size: 2.5rem; margin-bottom: 15px; } .vy-contact-base p { margin-bottom: 40px; color: #4A6B56; font-size: 1.1rem; } .vy-form-input { width: 100%; padding: 16px; margin-bottom: 20px; border: 1px solid #C4D4C8; border-radius: 3px; font-family: 'Lato', sans-serif; font-size: 1rem; background: #FFFFFF; transition: border-color 0.3s; } .vy-form-input:focus { outline: none; border-color: #2E593E; } textarea.vy-form-input { min-height: 140px; resize: vertical; } .vy-footer-block { background: #0D2614; color: #8BA895; padding: 80px 40px 40px; text-align: center; font-size: 0.95rem; } .vy-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; max-width: 1100px; margin: 0 auto 60px; text-align: left; } .vy-footer-block strong { color: #FFFFFF; font-family: 'Merriweather', serif; font-size: 1.1rem; display: block; margin-bottom: 15px; } .vy-footer-block a { color: #8BA895; text-decoration: none; transition: color 0.2s; line-height: 2; display: inline-block; } .vy-footer-block a:hover { color: #FFFFFF; } .vy-footer-block p { border-top: 1px solid #1B3624; padding-top: 30px; margin: 0; } @media (max-width: 900px) { .vy-about-inner { grid-template-columns: 1fr; gap: 40px; } .vy-about-inner img { box-shadow: none; } .vy-tab-content { grid-template-columns: 1fr; } .vy-hero-stage h1 { font-size: 2.5rem; } .vy-nav-links { display: none; } }