/* Media query for devices with a maximum width of 768 pixels (typical for tablets) */
@media only screen and (max-width:979px) {
    .hero-banner, .durian{
        width: 100%;
    }

    .banner-wrapper{
        padding-left:15px;
        padding-right: 15px;
    }

    .durian{
        text-align: center;
    }
    .durian > img{
        position: static;
        max-width: 500px;
        margin-bottom: -15%;
    }
}

/* Media query for devices with a maximum width of 480 pixels (typical for smartphones) */
@media only screen and (max-width: 480px) {
    h1 {
        font-size: 36px;
    }

    h2.title{
        font-size: 18px;
    }

    .bg-grey h2, .faq h2{
        font-size: 24px;
        line-height: 32px;
    }

    .hero-banner p,
    .col-2 .content p{
        font-size:15px;
        line-height: 24px;
    }

    .col-2 .content{
        padding: 30px;
    }

    .section:not(.col-2){
        padding-left: 15px;
        padding-right: 15px;
    }
    .col-3 > div,
    .col-2 > div{
        width: 100%;
    }
}