*, *::before, *::after{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
}

:root{
    --theme-yellow: #ff9900;
    --theme-gray: #333333;
    --theme-whilte: #ffffff;
    --theme-darkgray: #222222;
    --theme-darkbrown: #200101;
}

.main-container{
    width: 100%;
    min-height: 100vh;
    background: var(--theme-gray);
}

.top-banner{
    width: 100%;
    height: 50vh;
    background-image: url("../img/hm.slides/slide002.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.abt-txt p{
    color: var(--theme-whilte);
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    line-height: 2.2rem;
}

.abt-img{
    width: 600px;
    height: 550px;
    background-image: url("../img/hm.slides/slide002.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.player-img{
    width: 300px;
    height: 300px;
    background-image: url("../img/materials/photo.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}

.tm-details{
    width: 300px;
    padding: 6px 20px;
    display: flex;
    flex-direction: column;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    background: var(--theme-yellow);
}

.tm-details h3{
    font-size: 1.8rem;
}

.tm-details h6{
    font-size: 1.2rem;
}

@media screen and (max-width: 1150px){
    .abt-img{
        width: 1150px;
        height: 550px;
        background-image: url("../img/hm.slides/slide002.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
}

@media screen and (max-width: 576px){
    .abt-txt p{
        font-size: 1rem;
        line-height: 1.5rem;
    }
}