* {
  margin: 0;
  padding: 0;
 
}
body
{
    background-image: url('img/background2.jpg');
    background-repeat : no-repeat;
    background-size:cover;
    background-attachment:fixed;
    
}


/* Hero Section */
.hero {
  width: 100%;
  height: 100%; /* Full viewport height */
  position: relative;
  padding: 80px 0; /* Adjusted padding */
  display: flex;
  align-items: flex-start; /* Align items to the top */
  justify-content: center;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  overflow: hidden; /* Prevents content overflow */
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}


.hero .container {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Align content at the top */
  height: 100%; /* Ensure the container takes the full height */
  padding: 0 20px; /* Add some padding for mobile devices */
  text-align: center; /* Center the text */
}

.hero h2 {
  color: #f8f9fa; /* Light color for contrast */
  font-size: 42px;
  margin-bottom: 20px;
  text-align: center;
  line-height: 1.2; /* Better line height for readability */
}

.hero h2 span {
  color: #ff0000; /* Accent color */
}

.hero p {
  color: #d4d4d4; /* Slightly lighter color for contrast */
  font-size: 24px;
  margin-top: 10px;
  line-height: 1.5; /* Better line height for readability */
  
}

/* Combined Box */
.combined-box {
  padding: 40px;
  transition: ease-in-out 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 4;
  margin: 20px 0px 0px -60px; /* Center the box horizontally */
  width: 100%; /* Full width of the parent column */
  max-width: 1000px; /* Maximum width to maintain layout */
  height: 250px; /* Adjust height as needed */
  margin-right: 100px;
  margin-left:-40px;
  border-radius: 15px;
}

.new-combined {
  padding: 40px;
  transition: ease-in-out 0.3s;
  background-color: white; /* White background with low opacity */
  border-radius: 10px; /* Optional: Adds rounded corners to the box */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: ;
  width: auto; /* Adjust width to fit the content */
  max-width: 100px; /* Ensure it doesn't overflow */
  height: 100px; /* Adjust height to fit the content */
  margin-right: 0; /* Center the box horizontally */
  margin-left: 0;
}

.centered-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px; /* Space between the buttons and logo */
}

.centered-logo {
  width: 150px; /* Adjust logo size as needed */
  height: auto;
  margin: 0 20px;
}

        
        
         
         
.custom-button {
  background: #20425B; /* Slightly lighter gradient for better contrast */
  
  color: white; /* Bright red for better visibility */
  padding: 10px 20px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 50px;
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  text-align: center;
  width: 250px; /* Fixed width for both buttons */
  /*box-shadow: 5px 5px 10px #000000, -5px -5px 10px #1a1a1a; */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.custom-button:hover {
  transform: scale(1.05); /* Slight zoom effect on hover */
  cursor: pointer;
  background-position: right center; /* change the direction of the change here */
  color: white;
}

@media (max-width: 768px) {
  .centered-logo {
    width: 80px; /* Adjust logo size for smaller screens */
  }
  
   .new-combined {
    width:50px;
    height:50px;
  }

  .custom-button {
    font-size: 14px;
    padding: 8px 16px;
    width: 180px; /* Adjust width for smaller screens */
  }
}

@media (max-width: 480px) {
    .hero
    {
        padding:18px 0;
    }
  .centered-container {
    flex-direction: column;
	width:120px;
  }
  
   .new-combined{
    width:50px;
    height:50px;
  }

  .centered-logo {
    margin: 20px 0;
  }

  .custom-button {
    margin: 10px 0;
    width: 200px; /* Adjust width for very small screens */
  }
} 

@media (max-width: 320px) {
    .hero
    {
        padding:24px 0;
    }
    .hero h2
    {
        font-size:19px;
        
    }
    .hero p 
    {
        font-size:20px;
    }
    .combined-box
    {
       padding:25px;
       margin-left:-28px;
     
    }
}