src/styles/Home.css

.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 */
}