.tt5-banner{

    position:relative;

    width:100%;

    max-width:1280px;

    height:400px;

    margin:70px auto;

    overflow:hidden;

    border-radius:24px;

    display:flex;

    align-items:center;

}

.tt5-banner-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

    transform:scale(1.03);

}

.tt5-banner-badge{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    margin-bottom:24px;

    border-radius:999px;

    background:rgba(255,255,255,.18);

    backdrop-filter:blur(10px);

    color:#fff;

    font-size:14px;

    font-weight:600;

    letter-spacing:.5px;

    text-transform:uppercase;

}

.tt5-banner-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

            90deg,

            rgba(0,0,0,.78) 0%,

            rgba(0,0,0,.65) 28%,

            rgba(0,0,0,.30) 55%,

            rgba(0,0,0,0) 100%

    );

}

.tt5-banner-content{

    position:relative;

    z-index:2;

    width:100%;

    padding:70px;

}

.tt5-banner-info{

    width:48%;

    min-width:420px;

}

.tt5-banner-title{

    margin:0;

    color:#fff;

    font-size:28px;

    line-height:1.08;

    font-weight:800;

    max-width:560px;

    display:-webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

.tt5-banner-meta{

    margin-top:28px;

    display:flex;

    gap:32px;

    flex-wrap:wrap;

}

.tt5-banner-meta span{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:16px;

    font-weight:500;

}

.tt5-banner-meta svg{

    flex-shrink:0;

}

.tt5-banner-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:30px;

    padding:12px 26px;

    min-width:145px;

    border-radius:999px;

    background:#76A8FF;

    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:700;

    transition:.25s;

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

}

.tt5-banner-button:hover{

    background:#5C92F5;

    transform:translateY(-2px);

}

@media (max-width:1024px){

    .tt5-banner{

        height:400px;

    }

    .tt5-banner-content{

        padding:0 45px;

    }

    .tt5-banner-title{

        font-size:42px;

    }

}

@media (max-width:767px){

    .tt5-banner{

        height:420px;

        border-radius:14px;

    }


    .tt5-banner-content{

        padding:35px 22px;

        height:100%;

        display:flex;

        align-items:center;

    }


    .tt5-banner-info{

        width:100%;

        min-width:0;

    }


    .tt5-banner-badge{

        padding:7px 14px;

        font-size:12px;

        margin-bottom:18px;

    }


    .tt5-banner-title{

        font-size:28px;

        line-height:1.1;

        max-width:100%;

        -webkit-line-clamp:3;

    }


    .tt5-banner-meta{

        margin-top:18px;

        gap:10px;

    }


    .tt5-banner-meta span{

        font-size:14px;

    }


    .tt5-banner-button{

        margin-top:20px;

        padding:11px 24px;

        width:100%;

        max-width:200px;

        font-size:14px;

    }

}