:root {
    --troyco-red: #ff0008;
    --troyco-red-hover:#ff3333;
    --troyco-red-active:#cc0006;
  
  }


.hero-img{
    border-radius: 30px;
}


/* these sections have the same 992px min-width: if
going to change, change the respective files:

* License.css */

/* Keeps image Centered with content next to it */

@media (min-width:992px) {

    .hero-container {
        display: flex;
        align-items: center; /* Vertically align columns */
    }
    
    .hero-image-column {
        display: flex;
        justify-content: center; /* Center image horizontally */
        align-items: center; /* Center image vertically */
    }
    
    .hero-image {
        width: 100%; /* Ensure image container takes full width */
    }
    
    .hero-image img {
        max-width: 100%;
        height: auto;
    }


}


.button-container {
    display: flex;
    flex-direction: column; /* Stack on mobile */
    align-items: center; /* Center on mobile */
}

.button-container a {
    margin: 10px; /* Spacing between buttons */
    /* Add your button styling here (e.g., padding, background, etc.) */
}

.button-container{
  margin-top: 40px;
  margin-bottom: 40px;
}


/* Keeps Partner with Us and Exlpore Projects Buttons side by side until mobile */
@media (min-width: 768px) { /* Desktop view */
    .button-container {
        flex-direction: row; /* Side-by-side on desktop */
        justify-content: center; /* Center on desktop */
    }
}


#hero-section{
    padding-bottom: 10px;
}

.hero-img{
    width:660px;
}