.home { max-width: 1200px; margin: 0 auto; padding: 2rem; } .hero { display: flex; flex-direction: column; /* Align items to the start of the flex container */ /* Align text to the left */ margin-bottom: 4rem; } .hero h1 { font-size: 2.5rem; color: #ffffff; text-align: left; margin-bottom: 1rem; margin-top: 14rem; } .hero h2 { font-size: 1.2rem; color: #9f9f9f; text-align: right; margin-top: 7rem; /* Remove top margin to keep it close to the h1 */ } .industry-title { margin-left: 3rem; } .aboutHome h1 { font-size: 2.5rem; color: #ffffff; margin-bottom: 1rem; } .aboutHome p { font-size: 1.2rem; color: #9f9f9f; margin-bottom: 2rem; } .services { display: flex; justify-content: space-between; gap: 2rem; } .serviceTitle { color: #f0f8ff; margin: 2rem; text-align: center; } .service { flex: 1; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .service h2 { font-size: 1.5rem; color: #ffffff; margin-bottom: 1rem; } .service p { color: #ffffff; } .projects-container { display: flex; justify-content: space-between; /* Adjust spacing between the two sections */ align-items: center; /* Center vertically */ padding: 20px; /* Add padding for spacing */ } .projects { flex: 1; /* This section will take available space */ margin-right: 20px; margin-left: 4rem; /* Add space between the two sections */ } .projects h1 { color: #f0f8ff; font-size: 4rem; } .projects p { color: #1996D3; } .projectsDesc { flex: 1; /* This section will take available space */ margin-left: 20px; color: #f0f8ff;/* Add space between the two sections */ } h2 .highlight { color: rgba(0, 246, 255, 1); /* Warna khusus untuk kata Verra */ } .partner h1 { color: #ffffff; } .partner p { color: #9f9f9f; } .backed { color: #ffffff; } .certified h2 { color: #ffffff; text-align: center; margin-bottom: 80px; } .certified p { color: #f0f8ff; text-align: center; padding: 20px; max-width: 50%; margin: 0 auto; } .certiImage { display: flex; justify-content: center; /* Centers the image horizontally */ align-items: center; /* Centers the image vertically */ margin: 20px 0; /* Optional: Add margin for spacing */ margin-bottom: 80px; } .certiImage img { max-width: 100%; /* Ensures the image scales responsively */ height: auto; /* Maintains the aspect ratio */ } @media (max-width: 768px) { .services { flex-direction: column; align-items: center; } } .aboutHome { display: flex; align-items: center; /* Aligns items vertically in the center */ justify-content: space-between; /* Adds space between text and image */ margin: 20px 0; /* Adjust margin as needed */ margin-bottom: 6rem; gap: 50px; } .aboutContent { flex: 1; /* Allow the content to take up remaining space */ margin-right: 20px; /* Add space between content and image */ } .aboutImage img { max-width: 100%; /* Ensure the image is responsive */ height: auto; /* Maintain aspect ratio */ } .articles-section { padding: 50px 20px; color: #f0f8ff; } .articles-grid { display: flex; justify-content: center; gap: 20px; } .article-item { width: 30%; font-size: 2 rem; padding: 20px; border-radius: 10px; color: #f0f8ff; } .article-item img { width: 100%; border-radius: 10px; margin-bottom: 15px; } .footer-section { padding: 50px 20px; text-align: center; } .footer-links { display: flex; justify-content: space-around; margin-top: 30px; } .link-column { width: 20%; } .link-column p { font-weight: bold; margin-bottom: 10px; } .link-column ul { list-style: none; padding: 0; } .link-column ul li { margin-bottom: 8px; color: #a9a9a9; cursor: pointer; } .link-column ul li:hover { color: white; } .divider { border-top: 2px solid #073165; margin: 30px 0; margin-bottom: 7rem; } .divider1 { border-top: 2px solid #073165; margin: 30px 0; margin-bottom: 4rem; } .divider2 { border-top: 1.5px solid #00F6FF; margin: 30px auto; margin-bottom: 4rem; width: 94%; } .gradient-circle { width: 900px; height: 900px; background: radial-gradient(circle, rgba(0, 61, 109, 0.5), rgba(0, 61, 109, 0.1)); border-radius: 50%; filter: blur(100px); position: absolute; top: -300px; left: 50%; transform: translateX(-50%); z-index: -1; } .logo1 { text-align: center; /* Atur konten di dalam div menjadi center */ margin-top: 6rem; margin-bottom: 3rem; } .logo1 img { display: inline-block; /* Untuk memastikan gambar mengikuti alignment */ max-width: 100%; /* Supaya responsif */ height: auto; /* Pertahankan aspect ratio */ }