@media screen and (min-device-width: 350px) and (max-device-width: 600px)

{

    .home-section{width:100%; display: flex;justify-content: center;align-items: center; position:relative; }

    .wrapper{width:100%;display:flex;flex-direction:row;justify-content: center;position:relative;}

    

    #wrapper-1{height:30vh;align-items: center;}

    #home-banner-img {object-fit:cover;width:100%;height:inherit;}

    

    #section-2{height: auto;padding: 0em 0em 0em 0em;display: flex; flex-direction:row;}

    #wrapper-2{}

    #wrapper-2>#box-1{

        background: white;

        width: 55%;

        display: flex;

        justify-content: center;

        align-items: center;

        height: 8em;

        border-radius: 10px;

        border: 1px solid black;

        margin-top:-4em;

    }

    #wrapper-2 a{

        width: 100%; height: inherit;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    #wrapper-2>#box-1 a img{    width: 100%;

        border-radius: 10px;

        object-fit: contain;

        height: inherit;}

    #section-3{height: auto;padding: 0em 0em 0em 0em;display: flex; flex-direction:row;}

    #wrapper-3{padding: 5em 0em;}

    

    .article-box{

        background: white;

        width: 80%;

        display: flex;

        justify-content: center;

        align-items: center;

        height: fit-content;

        border-radius: 10px; flex-direction: column; row-gap: 3em;

        margin: 0em 0em;

    }

    

    .article-box .content-box{

        background: white;

        width: 100%;

        display: flex; flex-wrap: wrap;

        justify-content: center;

        align-items: center;

        height: fit-content;

        border-radius: 10px;

        border: 0px solid black;

        row-gap: 2em;

    }

    

    .article-box .box{

        width: 100%;

        border: 1px solid;

        border-radius: 10px;

        display: flex;

        align-items: center;

        flex-direction: column; 

        padding: 10px;

    }

    

    .box h3{

        font-size: 19px;

        font-weight: 500;

        margin: 10px 0px;

        height: fit-content;

    }

    

    .content-box .article-banner

    {

        width: 100%;

        height: 10em;

        background: yellow;

        border-radius: 10px;

        border: 1px solid black;

        

    }

    .content-box .box img

    {

        width: 100%;

        border-radius: 10px;

        object-fit: cover;

        height: inherit;

    }

    .article-read-more{margin:0px 0px 20px 0px;}

    .article-read-more:hover{background:white; color:black;}

    .article-read-more{color:white; background:black;}

    .article-box button{}



}

@media screen and (min-device-width: 601px) and (max-device-width: 900px)

{

    .home-section{width:100%; display: flex;justify-content: center;align-items: center; position:relative; }

    .wrapper{width:100%;display:flex;flex-direction:row;justify-content: center;position:relative;}

    

    #wrapper-1{height:50vh;align-items: center;}

    #home-banner-img {object-fit:cover;width:100%;height:inherit;}

    

    #section-2{height: auto;padding: 0em 0em 0em 0em;display: flex; flex-direction:row;}

    #wrapper-2{}

    #wrapper-2>#box-1{

        background: white;

        width: 35%;

        display: flex;

        justify-content: center;

        align-items: center;

        height: 10em;

        border-radius: 10px;

        border: 1px solid black;

        margin-top:-5em;

    }

    #wrapper-2 a{

        width: 100%; height: inherit;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    #wrapper-2>#box-1 a img{    width: 100%;

        border-radius: 10px;

        object-fit: contain;

        height: inherit;}

    #section-3{height: auto;padding: 0em 0em 0em 0em;display: flex; flex-direction:row;}

    #wrapper-3{padding: 5em 0em;}

    

    .article-box{

        background: white;

        width: 90%;

        display: flex;

        justify-content: center;

        align-items: center;

        height: fit-content;

        border-radius: 10px; flex-direction: column; row-gap: 3em;

        margin: 0em 0em;

    }

    

    .article-box .content-box{

        background: white;

        width: 100%;

        display: flex; flex-wrap: wrap;

        justify-content: center;

        align-items: center;

        height: fit-content;

        border-radius: 10px;

        border: 0px solid black;

        column-gap: 2em; row-gap: 2em;

    }

    

    .article-box .box{

        width: 45%;

        border: 1px solid;

        border-radius: 10px;

        display: flex;

        align-items: center;

        flex-direction: column; 

        padding: 10px;

    }

    

    .box h3{

        font-size: 15px;

        font-weight: 500;

        margin: 10px 0px;

        height: 4.5em;

    }

    

    .content-box .article-banner

    {

        width: 100%;

        height: 10em;

        background: yellow;

        border-radius: 10px;

        border: 1px solid black;

        

    }

    .content-box .box img

    {

        width: 100%;

        border-radius: 10px;

        object-fit: cover;

        height: inherit;

    }

    .article-read-more{margin:0px 0px 20px 0px;}

    .article-read-more:hover{background:white; color:black;}

    .article-read-more{color:white; background:black;}

    .article-box button{}



}

@media screen and (min-device-width: 901px) and (max-device-width: 1399px)

{

    .home-section{width:100%; display: flex;justify-content: center;align-items: center; position:relative; }

    .wrapper{width:100%;display:flex;flex-direction:row;justify-content: center;position:relative;}

    

    #wrapper-1{height:50vh;align-items: center;}

    #home-banner-img {object-fit:cover;width:100%;height:inherit;}

    

    #section-2{height: auto;padding: 0em 0em 0em 0em;display: flex; flex-direction:row;}

    #wrapper-2{}

    #wrapper-2>#box-1{

        background: white;

        width: 35%;

        display: flex;

        justify-content: center;

        align-items: center;

        height: 20em;

        border-radius: 10px;

        border: 1px solid black;

        margin-top:-10em;

    }

    #wrapper-2 a{

        width: 100%; height: inherit;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    #wrapper-2>#box-1 a img{    width: 100%;

        border-radius: 10px;

        object-fit: contain;

        height: inherit;}

    #section-3{height: auto;padding: 0em 0em 0em 0em;display: flex; flex-direction:row;}

    #wrapper-3{padding: 5em 0em;}

    

    .article-box{

        background: white;

        width: 90%;

        display: flex;

        justify-content: center;

        align-items: center;

        height: fit-content;

        border-radius: 10px; flex-direction: column; row-gap: 3em;

        margin: 0em 0em;

    }

    

    .article-box .content-box{

        background: white;

        width: 100%;

        display: flex;  flex-wrap: wrap;

        justify-content: center;

        align-items: center;

        height: fit-content;

        border-radius: 10px;

        border: 0px solid black;

        column-gap: 2em; row-gap: 2em;

    }

    

    .article-box .box{

        width: 40%;

        border: 1px solid;

        border-radius: 10px;

        display: flex;

        align-items: center;

        flex-direction: column; 

        padding: 10px;

    }

    

    .box h3{

        font-size: 19px;

        font-weight: 500;

        margin: 10px 0px;

        height: 4.5em;

    }

    

    .content-box .article-banner

    {

        width: 100%;

        height: 14em;

        background: yellow;

        border-radius: 10px;

        border: 1px solid black;

        

    }

    .content-box .box img

    {

        width: 100%;

        border-radius: 10px;

        object-fit: cover;

        height: inherit;

    }

    .article-read-more{margin:0px 0px 20px 0px;}

    .article-read-more:hover{background:white; color:black;}

    .article-read-more{color:white; background:black;}

    .article-box button{}

}

@media screen and (min-device-width: 1400px) and (max-device-width: 2000px)

{

    .home-section{width:100%; display: flex;justify-content: center;align-items: center; position:relative; }

    .wrapper{width:100%;display:flex;flex-direction:row;justify-content: center;position:relative;}

    

    #wrapper-1{height:50vh;align-items: center;}

    #home-banner-img {object-fit:cover;width:100%;height:inherit;}

    

    #section-2{height: auto;padding: 0em 0em 0em 0em;display: flex; flex-direction:row;}

    #wrapper-2{}

    #wrapper-2>#box-1{

        background: white;

        width: 35%;

        display: flex;

        justify-content: center;

        align-items: center;

        height: 20em;

        border-radius: 10px;

        border: 1px solid black;

        margin-top:-10em;

    }

    #wrapper-2 a{

        width: 100%; height: inherit;

        display: flex;

        justify-content: center;

        align-items: center;

    }

    #wrapper-2>#box-1 a img{    width: 100%;

        border-radius: 10px;

        object-fit: contain;

        height: inherit;}

    #section-3{height: auto;padding: 0em 0em 0em 0em;display: flex; flex-direction:row;}

    #wrapper-3{padding: 5em 0em;}

    

    .article-box{

        background: white;

        width: 70%;

        display: flex;

        justify-content: center;

        align-items: center;

        height: 25em;

        border-radius: 10px; flex-direction: column; row-gap: 3em;

        margin: 7em 0em;

    }

    

    .article-box .content-box{

        background: white;

        width: 100%;

        display: flex;

        justify-content: center;

        align-items: center;

        height: fit-content;

        border-radius: 10px;

        border: 0px solid black;

        column-gap: 2em;

    }

    

    .article-box .box{

        width: 30%;

        border: 1px solid;

        border-radius: 10px;

        display: flex;

        align-items: center;

        flex-direction: column; 

        padding: 10px;

    }

    

    .box h3{

        font-size: 19px;

        font-weight: 500;

        margin: 10px 0px;

        height: 4.5em;

    }

    

    .content-box .article-banner

    {

        width: 100%;

        height: 14em;

        background: yellow;

        border-radius: 10px;

        border: 1px solid black;

        

    }

    .content-box .box img

    {

        width: 100%;

        border-radius: 10px;

        object-fit: cover;

        height: inherit;

    }

    .article-read-more{margin:0px 0px 20px 0px;}

    .article-read-more:hover{background:white; color:black;}

    .article-read-more{color:white; background:black;}

    .article-box button{}

}