.banner {
    width: 600px;
    height: 250px;
    background: linear-gradient(to right, #5aa0dc 75%, #f4a300 25%);
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

/* Blue circle */
.banner::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    background: #5aa0dc;
    border-radius: 50%;
    right: 120px;
    top: -100px;
}

/* White curve border */
.banner::after {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    border: 20px solid #f7f2e8;
    right: 100px;
    top: -120px;
}

.content {
    position: relative;
    z-index: 2;
    padding: 0 40px;
    width: 70%;
    margin-top: 10px;
    
}

/* Paragraph dynamic text */
.title-text {
    /* Responsive font size: scales with viewport but stays within readable bounds */
     font-size: clamp(13px, 1.05rem + 0.6vw, 20px);
    font-weight: 800;
    color: black;
    line-height: 1.2;
    margin: 0;
    word-break: break-word;
    /* Make titles multi-line but limit to 4 lines visually */
     display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
} 

/* .title-text {
  font-size: clamp(16px, 2vw, 22px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 800;
    color: black;
    line-height: 1.2;
    margin: 0;
    word-break: break-word;
} */

/* Buttons */
.buttons {
    margin-top: 4rem;
    display: flex;
    flex-direction: row;
    width: 100%;
}

button {
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    margin-right: 5px;
}

.watch {
    background: #ff2d2d;
    color: white;
    font-size: 8px;
}

/* .subscribe {
    background: #e62117;
    color: white;
    font-size: 8px;
}

.youtube-icon {
    margin-right: 7px;
} */