.agri-intro-section{ padding:120px 0; background:#fff; overflow:hidden; } .agri-wrapper{ display:flex; align-items:center; gap:70px; } .agri-image{ flex:1; position:relative; } .agri-image img{ width:100%; border-radius:25px; box-shadow:0 25px 60px rgba(0,0,0,.15); transition:.5s; } .agri-image:hover img{ transform:scale(1.03); } .agri-content{ flex:1; } .section-tag{ display:inline-block; background:#e9f8ec; color:#28a745; padding:10px 22px; border-radius:40px; font-size:13px; font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-bottom:20px; } .agri-content h2{ font-size:48px; line-height:1.2; margin-bottom:25px; font-weight:700; color:#111; } .agri-content p{ font-size:17px; line-height:1.9; color:#666; margin-bottom:35px; } .feature-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:35px; } .feature-box{ background:#fff; padding:18px; border-radius:15px; box-shadow:0 10px 30px rgba(0,0,0,.08); transition:.4s; font-weight:600; } .feature-box i{ color:#28a745; margin-right:10px; } .feature-box:hover{ transform:translateY(-8px); } .agri-btn{ display:inline-block; background:#28a745; color:#fff; padding:15px 40px; border-radius:50px; text-decoration:none; font-weight:600; transition:.4s; } .agri-btn:hover{ background:#1d8636; color:#fff; transform:translateY(-3px); } /* Floating Cards */ .floating-card{ position:absolute; background:#fff; padding:12px 20px; border-radius:50px; box-shadow:0 10px 25px rgba(0,0,0,.12); font-weight:600; } .card-1{ top:20px; right:-20px; animation:floatY 4s infinite ease-in-out; } .card-2{ bottom:30px; left:-20px; animation:floatY 5s infinite ease-in-out; } /* Scroll Animation */ .fade-left{ opacity:0; transform:translateX(-80px); animation:fadeLeft 1.2s ease forwards; } .fade-right{ opacity:0; transform:translateX(80px); animation:fadeRight 1.2s ease forwards; animation-delay:.3s; } /* Keyframes */ @keyframes fadeLeft{ to{ opacity:1; transform:translateX(0); } } @keyframes fadeRight{ to{ opacity:1; transform:translateX(0); } } @keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-15px); } } @media(max-width:991px){ .agri-wrapper{ flex-direction:column; } .agri-content h2{ font-size:34px; } .feature-grid{ grid-template-columns:1fr; } }