/* Fix for overlapping Laptop.png and Submission_open_From.png images */
/* Enhanced laptop image sizing and centering + mobile steps positioning */

/* How to Enter Section - Fix Laptop Image Positioning */
.how-to-enter {
  position: relative;
  overflow: hidden; /* Prevent overflow into next section */
}

.how-to-content {
  position: relative;
  min-height: auto; /* Reset any fixed heights */
}

/* Desktop Laptop Image - Height to match Steps 1-3 */
.how-to-image {
  position: relative !important;
  padding: 1rem !important;
  max-height: 720px; /* Accommodate steps height */
  overflow: hidden;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  width: 100%;
}

.how-to-image img {
  height: 800px !important; /* Height to match Step 1 to Step 3 total height */
  width: auto !important;
  max-width: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto !important;
}

/* Submission Banner Section - Ensure proper spacing */
.submission-banner {
  position: relative;
  clear: both;
 
  z-index: 10;
}

.submission-banner .container {
  
  text-align: center;
}

.submission-banner img {
  max-width: 100% !important;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Tablet Adjustments */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .how-to-image {
    padding: 1.5rem !important;
    max-height: 550px;
  }
  
  .how-to-image img {
    height: 510px !important; /* Proportionally scaled for tablets */
    width: auto !important;
  }
}

/* Mobile Responsive fixes */
@media screen and (max-width: 768px) {
  /* Mobile - Laptop Image: Keep current mobile size - NO CHANGES */

  .how-to-image {
    padding: 0rem !important;
   
    text-align: center;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .how-to-image img {
    
    height: auto !important; /* Allow auto height on mobile */
    width: auto !important;
    margin: 0 auto !important;
  }

  /* Mobile - Steps Positioning: Move to Left */
  .how-to-enter {
    padding-left: 1rem !important; /* Reduce left padding */
  }

  .steps {
    padding-left: 1rem !important; /* Move steps to left */
    padding-top: 1rem !important;
  }

  .step {
    padding-left: 0 !important; /* Remove individual step left padding */
    padding-bottom: 2rem !important;
    margin-left: 0;
  }

  .step-content {
    padding-left: 1rem !important; /* Reduce step content left padding */
  }

  .step-icon {
    margin-left: 0;
  }

  /* Adjust how-to-content grid for mobile */
  .how-to-content {
    grid-template-columns: 1fr !important;
    gap: 1rem;
    padding: 0 !important;
  }
   
  .how-to-text {
    order: 2; /* Text comes after image on mobile */
  }

  .how-to-image {
    order: 1; /* Image comes first on mobile */
  }
  
  .submission-banner {
    margin-top: 2rem;
  }
  
  .submission-banner .container {
    
  }
}

@media screen and (max-width: 480px) {
  /* Extra small mobile adjustments - keep current sizes - NO CHANGES */
  .header__branding {	
	  padding-bottom: 0px!important;
    }

  .how-to-image img {
    max-height: 500px !important; /* Keep current small mobile size */
    height: 500px !important; /* Allow auto height on small mobile */
	padding:0px!important;
	width:100% !important;
	margin-left:-15px!important;
  }
  .how-to-text h2 {
   text-align:center;
}
  .container {
	   padding:0px!important;
  }
  .steps{
	  padding:0px!important;
  }
  .step{
	  padding:0px!important;
  }
.step-icon {
   display: none;
  }
  /* Extra mobile steps positioning */
   .step-content h3{
	   font-weight: 600!important;
	   text-align:center!important;
   }

  .step-content {
    padding-left: 0.0rem !important;
  }
  .hero-div-image {    
	 width:90%!important;
    }
.nav-utility-section {
    all: unset; /* removes all inherited and non-inherited styles */
}
.header__navigation {
     all: unset; /* removes all inherited and non-inherited styles */
}
.hero-content {
 
    padding: 1.0rem 0.5rem!important;
     
}
.nav-utility-bottom{
 
    justify-content:center!important;
     
}
.about-section {
    padding: 1rem 0!important;
   
}
.about-image {
    padding-top: 45px!important;
    border-radius: 0px;
    display:inline!important; 
    align-items: center;
    justify-content: center;
    font-style: italic;
	height: 300px !important;
}
.about-text p {
    text-align:center!important;
    margin-bottom: 1.5rem!important;
    padding-right: 0px!important;
}
.challenge-section {
    padding: 0rem 0!important; 
    background-color: white;
    text-align: center;
}

.challenge-section h2 {
	margin-bottom: 0rem!important;
	padding-top: 2rem!important;
}
.about-text h2 {    
    margin-bottom: 0.5rem!important;
    text-align: center!important;	
}
.learn-more-btn { 
    margin-left: 60px;
}
.why-participate {
 padding-top:2rem!important;
  padding-left:0.5rem!important;
  padding-right:0px!important;
   padding-bottom:0px!important;
   text-align:center!important;
}
.container-why-participate {
    margin: 0 auto!important; 
    padding-top: 0px !important; 
    padding-right: 0px!important; 
    padding-bottom: 0px;
    padding-left: 0px!important; 
}
.benefits {

    padding-left: 0rem!important;
}

    .social__title div {
      font-size: 25px;
      line-height: 49px;
	  padding-left:50px
    }
	 .nav-menu {
  
        position: relative!important;
        top: 5%!important;;
        
        padding: 0rem!important;
        gap: 0rem!important;
		 box-shadow: 0 0px 0px rgba(0,0,0,0.1)!important;
 
   
      }
}

/* Desktop Grid Layout Enhancement */
@media screen and (min-width: 1025px) {
  .how-to-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: center; /* Changed back to center for proper alignment */
  }
  
  .how-to-image {
  
    max-height: 850px; /* Accommodate full steps height */
    min-height: 850px; /* Ensure minimum height to show full image */
    align-self: center; /* Center the image container */
    display: flex !important;
    align-items: center !important; /* Center image vertically in container */
    justify-content: center !important;
    overflow: visible; /* Allow full image to show */
  }
  
  .how-to-image img {
    height: 800px !important; /* Match Step 1 to Step 3 total height */
    width: auto !important;
     margin-left: 115px !important;
  }

  /* Ensure desktop steps stay in their original position */
  .steps {   
    padding-top: 3rem; /* Original desktop padding */
  }

  .step {
    padding-left: 40px; /* Original desktop padding */
	  padding-bottom:70px!important;
    
  }

  .step-content {
    padding-left: 4rem; /* Original desktop padding */

  }
}

/* Additional layout fixes */
.how-to-enter .container {
  position: relative;
  z-index: 1;
}

/* Ensure proper section stacking */
.challenge-section,
.how-to-enter,
.submission-banner,
.why-participate {
  position: relative;       
  z-index: auto;
}

/* Extra centering support for all screen sizes */
.how-to-image {
  box-sizing: border-box;
}

 

/* Override any conflicting styles from main.css */
@media screen and (max-width: 768px) {
  .how-to-enter {
   
  }
}

/* Large screen specific overrides - FIXED FOR LARGE MONITORS */
@media screen and (min-width: 1200px) {
  .how-to-image {
    max-height: 850px !important; /* Increased to accommodate full image */
    min-height: 800px !important; /* Ensure full height on large screens */
   
    overflow: visible !important; /* Ensure full image is visible */
  }
  
  .how-to-image img {
    height: 800px !important; /* Maintain steps height match */
    width: auto !important;
	margin-left: 115px !important;
  }
}

/* Extra large screens (1400px+) */
@media screen and (min-width: 1400px) {
  .how-to-image {
    max-height: 800px !important; /* Even more space for very large monitors */
    min-height: 800px !important;
    
  }
}