.expertise-section { position: relative; display: flex; align-items: center; padding: 0 5%; background-color: #fff; height: 400px; /* Adjust height as needed */ } .expertise-background-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } .expertise-background-image img { width: 100%; height: 100%; /* Make image cover the entire section */ object-fit: cover; } .container-appear { display: flex; align-items: center; height: 100vh; z-index: 3; width: 100%; } .left-div { text-align: end; } .left-div, .right-div { flex: 1; overflow: hidden; } .left-text { padding: 0 20px 0 0; animation-fill-mode: forwards; /* Ensure animation maintains its final state */ } .right-text{ padding: 0 0 0 20px; animation-fill-mode: forwards; } .left-text { color: #fff; font-size: 6vw; letter-spacing: 2px; font-weight: 800; } .drives-text { color: #fff; font-size: 7vw; font-weight: 700; letter-spacing: 1px; } .revenue-text { color: #c1f703; font-size: 8vw; font-weight: 800; } .separator { height: 400px; width: 4px; background-color: #838383; position: relative; } .animated-separator { animation: drawLine 1s ease forwards; } .animated-left-text { animation: slideFromLineLeft 1s ease forwards; } .animated-drives-text, .animated-revenue-text { animation: slideFromLine 1s ease forwards; } @keyframes slideFromLine { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes slideFromLineLeft { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes drawLine { 0% { height: 0; top: 0; } 100% { height: 400px; /* Adjusted to end at 200px */ top: 0; } }