body{
        margin: 0;
        box-sizing: border-box;
        background-color: #EEEFEF;
    }


    #main{
        min-height: 99vh;
        border: none;
        background-color: #FEFEFF;
        width: 75%;
        margin: auto;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }

/*==== Top Bar Design start ====*/

    .topbar{
        height: 41px;
        border: none;
        border-top: 5px solid #548A2F;
        background-color: #F3F3F2;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-left: 27px;
        padding-right: 27px;
        align-items: center;
    }

   

    .topbar > div:nth-child(1){
        display: flex;
    }

     /* Trending Div */

    .topbar > div:nth-child(1) > div:nth-child(1){
        font-family: "Open Sans", Arial, sans-serif;
        line-height: 21px;
        font-size: 14px;
        color: #558b2f;
        margin-right: 20px;

    }

    /* Quote Div */

    .topbar > div:nth-child(1) > div:nth-child(2){
        font-family: "Open Sans", Arial, sans-serif;
        line-height: 18.2px;
        color: #656565;
        font-size: 14px;
        border: 1px solid transparent;
        height: 20px;
        overflow: hidden;
        padding-left: 10px;
    }

    .topbar > div:nth-child(1) > div:nth-child(2):hover{
        text-decoration: underline;
        color: #464646;
    }

    /* Input Div */

    #search{
        height: 24px;
        width: 180px;
        background-color: #E9E9E9;
        border: none;
        padding-left: 8px;
        color: #A19C99;
        position: relative;
    }

    #search:focus{
        outline: none;
    }
    .fa{
        color: #A19C99;
        font-size: 13px;
        position: absolute;
        top: 19px;
        right: 15%;
    }


/* ===Top Bar Design End ===*/



/* === Banner Start === */
    .banner{
        height: 143px;
        border: none;
        background-color: #FEFEFF;
        padding-left: 25px;
        padding-right: 25px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .banner> a> img{
        height: 100%;
        /* border: 1px solid red; */
    }
    .banner > a:nth-child(2) > img {
        border: none;
        width: 100%;
    }

/* === Banner End === */



/* === Navbar start === */
    .navbar{
        height: 45px;
        background-color: #FEFEFF;
        padding-left: 25px;
        padding-right: 25px;        
        margin-bottom: 40px;
    }

    .navbar> div{
        height: 100%;
        width: 100%;
        background-color: #F3F3F2;
        display: flex;
        
    }

    .navbar> div>div{
     
        width: 8.2%;
        display: flex;
        height: 43px;
        justify-content: center;
        align-items: center;
        font-family: "Open Sans", Arial, sans-serif;
        line-height: 43px;
        font-size: 14px;
        color: #19232d;
    }

    .navbar> div>div:hover{
        border-bottom: 2px solid #548A2F;
        height: 43px;
        background-color: white;
    }

    .navbar> div>div:nth-child(1){
        border-bottom: 2px solid #548A2F;
        height: 43px;
        background-color: white;
    }

/* === Navbar End === */


/* ===Main Contyent Box start === */

    
    #Container{

        background-color: #FEFEFF;
        border: 1px solid transparent;
        padding-left: 25px;
        padding-right: 25px;
    }

    /* Main Container */
    .main-blog-container{
        min-height: 100vh;
        border: 1px solid transparent;
        padding-bottom: 40px;
        display: flex;
        flex-direction: row;
    }

    /* Left Box Start*/
    .left-box{
        width: 67.5%;
        border-right: 2px solid #D9D8D8;
    }

    /* Static news part start */
    .static-news{
        height: 355px;
        border: 1px solid transparent;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-right: 25px;
    }

    /* Main Box */
    .static-news>div{
        height: 320px;
        border: 1px transparent;
        width: 45.5%;
        background-color: #F3F3F2;
        box-sizing: border-box;
        padding: 14px;
        cursor: pointer;
    }

    /* Image */
    .static-news>div>img{
        width: 99%;
    }


    .static-news>div>div:nth-child(2){
        display: flex;
        flex-direction: column;
        padding-left: 10PX;
    }

    /* Date */
    .static-news>div>div:nth-child(2)>div:nth-child(1){
        font-family: "Open Sans", Arial, sans-serif;
        font-size: 11PX;
        line-height: 25PX;
        color: #a6a6a6;
        border: 1px solid transparent;
        height: 15px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    /* Title */

    .static-news>div>div:nth-child(2)>div:nth-child(2){
        font-family: "Roboto Slab", Georgia, serif;
        font-size: 14px;
        line-height: 18.2px;
        color: #19232d;
        padding-right: 15px;
    }

    /* Description */
    .static-news>div>div:nth-child(3){
        font-family: "Open Sans", Arial, sans-serif;
        font-size: 13px;
        line-height: 22.282px;
        color: #949697;
        margin-top: 13px;
    }

    /* Static news part End */


    /* Dynamic part start */

    .dynamic-news{
        border: 1px solid transparent;
        min-height: 70px;
        display: grid;
        grid-template-columns: 45.5% 45.5%;
        justify-content: space-between;
        padding-right: 25px;
        row-gap: 28px;
    }

    /* News Box */
    .dynamic-news>div{
        height: 292px;
        border: 1px solid transparent;
    }

    .dynamic-news>div>div:nth-child(1){
        height: 160px;
    }

    /* Image  */
    .dynamic-news>div>div:nth-child(1)>img{
        height: 160px;
        width: 100%;
        margin-bottom: 0px;
    }

    /* Date Div */
    .dynamic-news>div>div:nth-child(2){
        border: 1px solid transparent;
        margin-top: 0px;
        height: 25px;
        padding-left: 10px;
        font-family: "Open Sans", Arial, sans-serif;
        font-size: 11px;
        line-height: 25px;
        color: #a6a6a6;
        background-color: #f2f2f2;
    }


    /* Title div */
    .dynamic-news>div>div:nth-child(3){
        height: 36px;
        margin-top: 5px;
        font-family: "Roboto Slab", Georgia, serif;
        color: #19232d;
        font-size: 14px;
        line-height: 18.2px;
        padding-left: 14px;
        padding-right: 14px;
        overflow: hidden;
        border-left: 3px solid #548A2F;
    }

    .dynamic-news>div>div:nth-child(3):hover{
        text-decoration: underline;
    }

    /* Content Div */

    .dynamic-news>div>div:nth-child(4){
        height: 44px;
        margin-top: 17px;
        font-family: "Open Sans", Arial, sans-serif;
        font-size: 13px;
        line-height: 22.282px;
        color: #949697;
        padding-right: 15px;
        overflow: hidden;
        border: 1px solid transparent;
    }



    /* Dynamic part End */

    /* Left Box End*/



    /* Right Box Start*/
    .right-box{
        
        width: 32.5%;
        padding-left: 25px;
    }

    /* Head Box start */
    .head-box{
        height: 34px;
        background-color: #f2f2f2;
        display: flex;
        flex-direction: row;
        margin-bottom: 35px;
    }

    .head-box >div{
        height: 32px;
        display: flex;
        align-items: center;
        font-family: "Open Sans", Arial, sans-serif;
        font-size: 13px;
        line-height: 19.5px;
        color: #19232d;
        width: 26%;
        justify-content: center;
    }

    .head-box >div:nth-child(1){
        border-bottom: 2px solid #548A2F;
    }

    .head-box >div:hover:{
        border-bottom: 2px solid #548A2F;
    }

    /* Head Box End */

    /* Random Blog start */

    .random-blog{
        display: flex;
        flex-direction: column;
        min-height: 100px;
        border: 1px solid transparent;
    }

    .random-blog>div{
        height: 203px;
        border: 1px solid transparent;
        margin-bottom: 27px;
        position: relative;
    }
    .random-blog>div> img{
        height: 203px;
        width: 100%;
        filter: brightness(60%);
        
    }

    .random-blog>div>div:nth-child(2){
        font-family: "Open Sans", Arial, sans-serif;
        font-size: 11px;
        line-height: 25px;
        z-index: 5;
        position: absolute;
        top: 110px;
        left: 13px;
        color: #ffffff;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 3px 0px;

    }

    .random-blog>div>div:nth-child(3){
        font-family: "Roboto Slab", Georgia, serif;
        font-size: 14px;
        line-height: 18.2px;
        position: absolute;
        z-index: 5;
        top: 150px;
        color: white;
        left: 13px;
        padding-right: 35px;
        border: 1px solid transparent;
        box-shadow: rgba(0, 0, 0, 0.12) 0px 0px 3px 0px;
    }







     /* Random Blog End */


    /* Right Box End*/

/* ===Main Contyent Box End === */



/* === Footer design Start ===  */

    .footer{
        height: 55px;
        background-color: #d8d6d6;
        padding-top: 14px;
        padding-left: 25px;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;


    }

    .footer > div{
        font-family: "Open Sans", Arial, sans-serif;
        font-size: 13px;
        line-height: 19.5px;
        color: #2c3a49;

    }


/* === Footer design End ===  */