.hero-mission{

display:flex;
align-items:center;
justify-content:space-between;
gap:50px;

padding:35px 45px;

/*background:linear-gradient(135deg,#0b1522,#172638);*/

border-radius:24px;

/*border:1px solid rgba(242,199,92,.20);*/

box-shadow:0 20px 45px rgba(0,0,0,.30);

}

/* LEFT IMAGE */

.hero-image {
    flex: 0 0 420px;   /* Increased from 300px */
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image img {
    width: 400px;      /* Increased from 280px */
    max-width: 100%;
    height: auto;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(0,0,0,.35);
    transition: all .35s ease;
}

.hero-image img:hover{

transform:scale(1.04);

}

/* RIGHT CONTENT */

.hero-content{

flex:1;
display:flex;
flex-direction:column;
justify-content:center;
align-items:flex-start;
max-width:760px;


}

.hero-badge{

display:inline-block;

background:#f2c75c;
color:#111;

padding:8px 18px;

border-radius:40px;

font-size:1;

font-weight:500;00;

letter-spacing:1px;

margin-bottom:20px;

}

.hero-content h2{

font-size:56px;

font-weight:800;

line-height:1.1;

margin-bottom:18px;

}

.hero-subtitle{

font-size:24px;

color:#d7d7d7;

margin-bottom:20px;

line-height:1.0;

}

/* DAILY TASK */

.hero-task{

background:#25354d;

border-left:6px solid #f2c75c;

padding:26px;

border-radius:16px;

margin:28px 0;

box-shadow:0 8px 25px rgba(0,0,0,.20);

}

.hero-task small{

font-size:14px;

letter-spacing:1px;

color:#f2c75c;

display:block;

margin-bottom:12px;

}

.task-text{

font-size:28px;

font-weight:700;

line-height:1.5;

color:#fff;

}


.hero-task span{

font-size:24px;

font-weight:700;

color:#fff;

line-height:1.5;

}

/* BUTTON */

.hero-btn{

display:inline-flex;

align-items:center;

gap:10px;

background:#25D366;

color:#fff;

padding:16px 34px;

border-radius:50px;

font-size:17px;

font-weight:700;

text-decoration:none;

transition:.3s;

}

.hero-btn:hover{

transform:translateY(-3px);

background:#1ca74d;

}
.task-text{

display:flex;
align-items:center;
gap:12px;

font-size:24px;
font-weight:700;
line-height:1.5;

color:#fff;

}

.hero-btn{

padding:18px 40px;

font-size:20px;

border-radius:60px;

box-shadow:0 10px 25px rgba(37,211,102,.35);

}
.hero-next{

margin-top:18px;

padding:18px;

background:#1b2738;

border-radius:14px;

border:1px dashed #f2c75c;

text-align:center;

}

.hero-next small{

display:block;

color:#f2c75c;

margin-bottom:8px;

font-weight:700;

}

#countdown{

font-size:24px;

font-weight:800;

color:#fff;

letter-spacing:2px;

}
@media (max-width:768px){
.hero-mission{
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .hero-image{
        flex: 0 0 auto;
        width: 100%;
    }

    .hero-image img{
        width: 90%;          /* Large image on mobile */
        max-width: 380px;    /* Prevents it from becoming too large */
        height: auto;
        margin: 0 auto;
        display: block;
    }

.hero-content{

width:100%;
max-width:100%;

align-items:center;
text-align:center;

}

.hero-content h2{

font-size:32px;
line-height:1.2;

}

.hero-subtitle{

font-size:17px;

margin:15px 0 20px;

}

.hero-task{

width:100%;

padding:18px;

}

.hero-task span{

display:block;

font-size:20px;

line-height:1.5;

margin-top:8px;

}

.hero-next{

width:100%;

padding:16px;

margin-top:15px;

}

#countdown{

font-size:24px;

}

.hero-btn{

width:100%;

padding:16px;

font-size:17px;

text-align:center;

}

}