#sweatyguy2 {
    width: 100%;
    height: auto;
    position: relative; /* Changed from absolute to establish stacking context */
    z-index: 1; /* Lower z-index */
}

.top-card {
    position: absolute;
    width: 80%;
    height: 30%;
    display: flex;
    justify-content: start;
    align-items: end;
    z-index: 2;
    left: 10%;
    top:18%;
    background-color: transparent;
}
.top-card .card {
    background-color: rgba(0, 0, 0, 0) !important;
    box-shadow: none !important;
    color:white !important;
}

.btn-primary {
    color:black !important;
    background-color: #D9D9D9 !important;
    border-radius: 15px !important;
    width:150px;
    border:none !important;
}

.btn-primary:hover {
    color:black !important;
    background-color: #FF8B8B !important;
    border-color: #FF8B8B !important;
}
#about{
    margin:clamp(10px, 30px, 50px);
    margin-top:15vh;
    margin-bottom:15vh;
}
#text-box .row {
    text-align: center;
}
#box2{
    display:flex;
    justify-content: center;
    align-items: center;
}

#features-bg{
    background-color: #363636 !important;
    padding-top:clamp(1.5rem,3.5rem,4rem);
    padding-bottom:clamp(1.5rem,3.5rem,4rem);
}
.features-container {
    text-align: center;              /* Text color */
    display: flex;                  /* Enable flexbox */
    justify-content: center;        /* Center items horizontally */                     /* Space between items */
    flex-wrap: wrap;                /* Allow wrapping on smaller screens */
    padding: 2rem;           /* Add some vertical padding */
}
.feature{
    margin:100px;
}
.feature h3{
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-top: 2rem;
    color: white;
}
/* Responsive text sizing */
#text-box h2 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
}
#contact-box{
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
#contact-form{
    width:400px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    gap:90px;
}
.input-box{
    margin:clamp(10px, 15px, 50px);
}
.form-control{
    border:none !important;
}




/* phones */
@media (min-width: 344px) and (max-width: 1000px){
    #sweatyguy2{
    aspect-ratio:6/7;
    object-fit: cover;
    object-position: center;
    }
}