body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: url('../images/pioneering_carbon_capture_and_storage_in_asia/background 4.png') no-repeat center center fixed;
    background-size: cover;
    font-family: Arial, sans-serif;
    color: white;
}

.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.logo_arrwo {
  position: fixed;
  bottom: 0;
  right: 55px;
  padding: 10px; 
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.nav-buttons {
    display: flex;
    gap: 15px;
}

.back-button img,
.menu-button img {
    width: 32px;
    height: 32px;
}

.logo {
    padding: 0;
}

.logo img {
    width: 80px;
}

.content {
    z-index: 99;
    flex: 1;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    width: 90%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
}

.card-content {
    width: 100%;
    margin-bottom: 30px;
}

.footer-shape {
    position: relative;
    width: 100%;
    margin-top: -100px;
    z-index: 0;
}

.footer-shape img {
    width: 100%;
    display: block;
}

@media (max-width: 768px) {
    .card {
        padding: 20px;
    }
}

.text1 {
    position: absolute;
    top: 50%;
    left: 8%;
    transform: translateY(-50%);
}

 .text1 img {
    width: 600px;
    height: auto;
  }

  .arrow {
    margin-bottom: 100px;
  }

.content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 2rem;
}

.text1, .arrow {
    margin-bottom: 1rem;
}

.arrow {
    margin-top: 6rem; 
    margin-left: 6rem; 
}

.arrow img {
    width: 60px;
    height: auto;
}

@media (max-width: 1024px) {
    .arrow {
        width: 12vw;  
        margin-left: 4rem; 
    }
}

@media (max-width: 768px) {
    .arrow {
        width: 15vw;
        margin-left: 3rem;  
    }
}

.card3 {
    position: absolute;            
    top: 50%;                      
    left: 50%;                    
    transform: translate(-50%, -50%); 
    display: flex;
    justify-content: center;      
    align-items: center;           
    height: 200px;                 
    width: 76%;                  
}

.card-image {
    width: 100%;                
    max-width: 1100px;           
    height: auto;                  
    margin-top: 0;                
}

@media (max-width: 1024px) {
  .card3 {
    position: absolute;            
    top: 53%;                      
    left: 50%;                    
    transform: translate(-50%, -50%); 
    display: flex;
    justify-content: center;      
    align-items: center;           
    height: 200px;                 
    width: 76%;                  

  }

  .card-image {
  width: 100%;                
    max-width: 1100px;           
    height: auto;                  
    margin-top: 0;    }
}

@media (max-width: 768px) {
  .card3 {
    right: 15px;
    bottom: 15px;
  }

  .card-image {
    width: 60px;
  }
}



.logo_arrwo {
  position: fixed;
  bottom: 0;
  right: 55px;
  padding: 10px; 
}