body {
    overflow-x      : hidden;
    background-color: #f0ede9;
}

.tdslogo {
    margin-top: 20px;
    display   : inline-block;
}

.dk-image {
    display: block;
}

.mb-image {
    display: none;
}

.topcollage {
    background         : url('https://www.thedailystar.net/sites/default/files/uploads/2024/10/03/wave.png') no-repeat;
    background-size    : cover;
    width              : 100%;
    height             : auto;
    width              : 100%;
    height             : 100vh;
    /* position        : relative;
    display            : inline-block;
    pointer-events     : none; */
    /* ensures the vignette doesn't block clicks */
    /* background      : (circle, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.9) 100%);     */
    /* background-image: url('/img/topcollage.png'); */
}

.toppic {
    background-size  : cover !important;
    width            : 100%;
    height           : auto;
    background-repeat: no-repeat !important;
}

.filter {
    filter: saturate(0);
}

.sectiontext {
    border         : 1px solid #000;
    padding        : 20px;
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
}

.authbtn {
    justify-content: space-between;
    align-items    : center;
}

.blackbox {
    background-color: #19191D;
    color           : white;
    padding-top     : 30px;
    padding-bottom  : 30px;
    margin-bottom   : 20px;
}

.beigebox {
    background-color: #ebe4db;
    padding-top     : 30px;
    padding-bottom  : 30px;
}

.blackbgbox {
    background-image: url('img/blackbg.png');
    color           : white;
    padding-top     : 30px;
    padding-bottom  : 30px;
    margin-bottom   : 20px;
}

.fullarticle {
    border-radius   : 5%;
    background-color: #bc0d0f;
    font-family     : 'Roboto Mono', monospace;
    text-transform  : uppercase;
    color           : white;
    font-size       : 12px;
}

.boxfullarticle {
    border-radius   : 5%;
    background-color: #bc0d0f;
    font-family     : 'Roboto Mono', monospace;
    text-transform  : uppercase;
    color           : white;
    font-size       : 12px;
    top             : -22px;
    position        : relative;
    transform       : translate(10%, 155%);
}

.sectiontext h3 {
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    font-size  : 1.875rem;
    line-height: 2.25rem;
}

/* .sectionimg {
    height: 290px !important;
    width : 100%;
} */

.author {
    color        : #BC0D0F;
    font-family  : 'Roboto', sans-serif;
    font-size    : 20px;
    margin-bottom: 0;
    font-weight  : 700;
}

.description {
    font-family: 'Inter', sans-serif;
    font-size  : 1rem;
    line-height: 1.5rem;
}

.whiteborders {
    border-color: #9B9B9B;
}

.image-container {
    position     : relative;
    display      : inline-block;
    margin-bottom: 20px;
}

.text-box {
    background-color: rgba(0, 0, 0, 0.4);
    padding         : 20px;
    color           : white;
    text-align      : center;
    border-radius   : 8px;
}

.text-box p {
    /* width: 50%; */
    margin: 0 auto 40px auto;
}

.text-box2 {
    background-color: rgba(0, 0, 0, 0.4);
    padding         : 20px;
    color           : white;
    text-align      : center;
    border-radius   : 8px;
}

.text-box2 p {
    width : 92%;
    margin: 0 auto 30px auto;
}

.text-overlay {
    /* position: absolute; */
    top      : 70%;
    left     : 50%;
    transform: translate(0%, 80%);
    margin   : 0 auto;
    width    : 55%;
}

.text-overlay2 {
    /* position: absolute; */
    top      : 70%;
    left     : 50%;
    transform: translate(0%, 35%);
    margin   : 0 auto;
    width    : 55%;
}


.toptext-overlay {
    /* position: absolute; */
    top      : 70%;
    left     : 50%;
    bottom   : 0;
    transform: translate(0%, 100%);
}

.toptext-box {
    padding   : 20px;
    color     : white;
    text-align: center;
}

.toptext-box p {
    width    : 42%;
    margin   : 0 auto;
    font-size: 20px;
}

.toptext-box h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size  : 42px;
}

.bgimage {
    background     : url('img/pic4.png') no-repeat;
    background-size: cover;
    width          : 100%;
    height         : 70vh;
    margin-bottom  : 20px;
}

.bgimage2 {
    background     : url('img/pic15.png') no-repeat;
    background-size: cover;
    width          : 100%;
    height         : 70vh;
    margin-bottom  : 20px;
}

@media only screen and (max-width: 767px) {
    body {
        padding: 10px;
    }

    .dk-image {
        display: none;
    }

    .mb-image {
        display: block;
    }

    .sectiontext {
        margin-bottom: 20px;
        padding-left : 5%;
        padding-right: 5%;
    }


    /* .topcollage {
        background     : url('https://images.thedailystar.net/sites/default/files/uploads/2024/10/04/mobile.png') no-repeat;
        width          : 100%;
        height         : 100vh;
        background-size: cover;
    } */


    .sectionimg {
        height: auto !important;
        width : 100%;
    }

    .img-fluid {
        margin-bottom: 20px;
    }

    .text-box h2 {
        font-size: 24px;
    }

    .text-box2 h2 {
        font-size: 24px;
    }

    .toptext-box h2 {
        font-size: 24px;
    }

    .text-box p {
        font-size: 16px;
        width    : 100%;
    }

    .toptext-box p {
        font-size: 16px;
        width    : 100%;
    }

    .text-overlay {
        transform: translate(0%, 50%);
        width    : 100%;
    }

    .text-overlay2 {
        transform: translate(0%, 10%);
        width    : 100%;
    }

    .text-box2 {
        padding: 7px;
    }

    .toptext-overlay {
        transform: translate(0%, 90%);
    }

    .author {
        font-size: 14px;
    }

}