.left {
color: white;
align-content: center !important;
text-shadow: 2px 2px black;
background-image: url("Images/P2.jpg");
background-size: cover;
height: 50vh; /* Reduce height on mobile */
background-repeat: no-repeat;
background-position: center;
text-wrap: wrap;
}

.right {
 text-align: center;
 text-wrap: wrap;
 background-color: white;
 height: auto; /* Allow height to adjust */
 padding: 20px; /* Add padding for mobile */
}

/* Media query for larger screens */
@media (min-width: 768px) {
    .left, .right {
        height: 95vh;
        min-width: 50%;
        max-width: 50%;
    }
}

.right p {
 max-width: 80%;
 margin: 0 auto;
 text-wrap: wrap;
 background-color: #e6e5eb; 
 border-radius: 8px;
 padding: 15px 20px;
}
.navbar {
 width: 100%;
 background-color: black;
 padding: 0px;
 height: 5vh;
 /* Remove float: right; - this breaks Bootstrap's navbar */
}

.navbar-nav{
   li:hover {
 background: linear-gradient(#ff0038, black);
 }
 li{
    padding: 0px 10px;
 }
}

/* Add responsive navbar styling */
@media (max-width: 767px) {
    .navbar-nav {
        flex-direction: column;
        width: 100%;
    }
    
    .navbar-nav li {
        width: 100%;
        text-align: center;
    }
}

footer{
 background-color: black;
 color: white;
 text-align: center;
 padding: 10px;
 position: static;
 margin: 0;
 bottom: 0;
 width: 100%;
}
button {
 background-color: #ff0038;
 color: white;
 padding: 10px 25px;
 font-size: 100%;
 border-radius: 50px;
 min-width: 2%;
 cursor: pointer;
 gap: 3%;
 margin-bottom: 5%;
}
button:hover {
 background-color: #e6e5eb;
 color: black;
 transition:all 0.2s ease-in-out;
}
.d-grid {
margin-top: 5vh;
padding: 2vh 2vw;
}
h2 {
 font-size: clamp(1.5rem, 4vw, 3rem);
 padding: 4vh 2vw;
}