/* Default (Desktop) Styling */
.youtube-banner-layout {
width: 38%;
border-radius: 5px;
height: 250px;
}

.youtube-promo-section {
text-align: center;
background-color: #fff;
padding: 20px;
border: 2px solid #ff5757;
border-radius: 10px;
max-width: 80%;
margin: auto;
}

.carousel-container {
display: flex;
justify-content: space-around;
gap: 20px;
margin-left: -100px;
margin-right: 100px;
height: 260px;
margin-top: 50px;
}

.youtube-header-section {
margin-bottom: 20px;
margin-top: -40px;
background-color: #fff;
display: block;
width: 210px;
margin-left: 40%;
}

#subscribe-btn {
background-color: #e1002d;

width: 150px;

}

/* Responsive Styling for Tablet and Mobile (Override Desktop Styles) */
@media (max-width: 768px) {
/* Disable the desktop layout by resetting styles */
.youtube-promo-section {
max-width: 100%;
border: none;
margin: auto;
padding: 10px;
}

.youtube-header-section {
width: auto;
margin: 0 auto;
text-align: center;
}

.carousel-container {
flex-direction: column;
margin-left: 0;
margin-right: 0;
gap: 10px;
height: auto;
}

.youtube-banner-layout {
width: 100%;
height: auto;
}

#subscribe-btn {
width: 87%;
margin: 10px auto;
}
}

@media (max-width: 480px) {
/* Further simplify the layout on small screens */
.youtube-header-section, #subscribe-btn {
margin-left: 0;
text-align: center;
}

.youtube-banner-layout {
width: 100%;
height: auto;
}
}