body.site_body[data-page=articles]{background: #F2F7F9;}
body.site_body[data-page=article]{background: #F2F7F9;}


/* Article Header */
.article_header{display: flex; flex-direction: column;}
.article_header .article_search_title{font-size: 32px; text-transform: capitalize; color: #fff; font-weight: 500; display: flex; align-items: center;}
.article_banner{height: 100px; background: url(../images/article_banner.jpg) no-repeat center; display: flex; align-items: center; margin-bottom: 0;}
.article_control{display: flex; width: 100%; box-sizing: border-box; height: 90px; align-items: center;}
.article_control .category_selection{ width: calc(50% - 5px); height: 50px; margin-right: 5px; position: relative;}
.article_control .category_selection::after{content: ""; height: 12px; width: 12px; border: solid #000F36; border-width: 0 3px 3px 0; transform: rotate(45deg);
    position: absolute; right: 16px; top: 17px; pointer-events: none;}
.article_control select{width: 100%; height: 100%; border: 1px solid #E1E1E1; font-size: 14px; color: #1E2926; -webkit-appearance: none; 
    -moz-appearance: none; appearance: none; padding: 0 10px;}
.article_control .search_form_container{ width: calc(50% - 5px); height: 50px; margin-left: 5px;}
.article_control form{ width: 100%; height: 100%; display: flex; align-items: center; border: 1px solid #E1E1E1; background: #fff;}
.article_control form input[type=text]{flex: 1; height: 100%; border: 0; padding: 0 10px; box-sizing: border-box; font-size: 14px; color: #1E2926;}
.article_control form input[type=submit]{width: 50px; height: 100%; flex-shrink: 0; background: url(../images/search.svg) center no-repeat; border: 0; cursor: pointer;}

body[data-page=article] .article_banner{display: none;}

/*Article Search Page*/
.article-search-results{display: flex; align-items: flex-start; flex-wrap: wrap;}

/* Article Block */
.article {width: 33.3333%; }
.article > div{display: flex; flex-direction: column; position: relative; margin: 0 15px 20px; position: relative;}
.article .article-image { height: 235px; display: flex; align-items: flex-start; width: 100%; position: relative; background: #fff;}
.article .article-image a{height: 100%; width: 100%; background-position: center; background-color: #ededed; 
    background-size: cover; background-repeat: no-repeat;}
.article .article_category{display: flex; justify-content: center; gap: 10px; align-items: flex-start; flex-wrap: wrap; width: 100%; 
    height: 24px; overflow: hidden;}
.article .article_category a{color: #2C54DC; font-size: 16px; text-decoration: underline;}
.article .article-info { padding: 15px 10px 30px 10px; background: #FFFFFF; display: flex; flex-direction: column; gap: 20px;}
.article .article-title  {height: 54px; display: flex; align-items: flex-start; justify-content: center; text-align: center; width: 100%; overflow: hidden; }
.article .article-title a {color: #000F36; font-size: 18px; line-height: 27px; text-decoration: none; font-weight: bold;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.article .article-snippet{color: #1E2926; font-size: 14px; line-height: 26px; height: 76px; overflow: hidden; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.article .article_read_now{display: flex; justify-content: center; width: 100%;}

.article .article_read_now a{font-size: 13px; line-height: 30px; color: #000F36; display: flex; align-items: center; justify-content: center;
    text-transform: capitalize; position: relative; transition: ease-in-out all .3s; text-decoration: none; border-radius: 8px; padding: 0 14px;
    background: #CDE730; gap:20px; font-weight: 500;}
.article .article_read_now a:after{content: ""; height:6px; width:34px; background:url(../images/arrow.svg) center no-repeat; }

/*Articles Pager*/
.articles-pager{ margin: 20px 0; height: 60px; display: flex;  align-items: center;}
.articles-pager > div{width: 100%; display: flex; height: 100%; flex-direction: row; justify-content: center; align-items: center; background: #fff;
    position: relative; margin: 0 15px;}
.articles-pager > div > a{height: 100%; width: 30px; text-decoration: underline; color: #1E2926; font-size: 16px; position: relative; 
    display: flex; align-items: center; justify-content: center; }
.articles-pager > div > a.pager-prev{position: absolute; left: 0; top: 0; width: 60px; background: #000F36;}
.articles-pager > div > a.pager-prev:after{content: ""; height: 15px; width: 15px; position: absolute; left: 25px; top: calc(50% - 7px); border:solid #959595; 
    border-width: 0 0 3px 3px; transform: rotate(45deg); transition: ease-in-out all .3s;}
.articles-pager > div > a.pager-next{position: absolute; right: 0; top: 0; width: 60px; background: #000F36;}
.articles-pager > div > a.pager-next:after{content: ""; height: 15px; width: 15px; position: absolute; right: 25px; top: calc(50% - 7px); border:solid #fff; 
    border-width: 3px 3px 0 0; transform: rotate(45deg); transition: ease-in-out all .3s;}
.articles-pager > div > a.active{color: #2C54DC; text-decoration: none;}

/* Article Details */
.article_details_page .article_search_header{}
.article_details .article_title { font-size: 36px; line-height: 42px; color: #000F36; font-weight: bold; margin-bottom: 20px; padding: 0;}
.article_details .col-lg-8 .article-image { min-height: 30px; text-align: center; margin-bottom: 20px;}
.article_details .col-lg-8 .article-image img { max-width: 100%; }
.article_cat_date{display: flex; align-items: center; gap:30px; margin-bottom: 20px;}
.article_details .article_categories{display: flex; flex-wrap: wrap;}
.article_details .article_categories a{color:#2C54DC; line-height: 18px; font-size: 16px; padding-right: 10px; margin-right: 10px; 
    border-right:1px solid #2C54DC; text-decoration: underline;}
.article_details .article_categories a:last-child{border: 0; padding: 0; margin: 0;}
.article_details .article-date{color:#808080; line-height: 24px; flex-shrink: 0; font-size: 14px;}
.article_details .article-description p{font-size: 14px; color: #1E2926; line-height: 26px;}

.back_to_articles{margin-bottom: 30px; display: flex; align-items: center; justify-content: flex-start;}
.back_to_articles a{display: flex; align-items: center; gap: 10px; color: #000F36; font-size: 13px; padding:0 14px; line-height:30px; background: #CDE730;
    border-radius: 8px; font-weight: 500;}
.back_to_articles a::after{content: ""; height: 6px; width: 34px; background: url(../images/arrow.svg) center no-repeat;}

/*Article Sidebar*/
.article-sidebar{display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px;}
.article-sidebar h3{font-size: 24px; line-height: 32px; font-weight: bold; color: #2C54DC; display: flex; 
    flex-direction: column; gap:10px; margin: 0; padding: 0;}
.article-sidebar h3::after{content: ""; height: 7px; width: 56px; background:#CDE730; }
.article-related{display: flex; flex-direction: column; gap: 20px;}
.article-related .article{width: 100%;}
.article-related .article > div{margin: 0;}

/* Article List */
.article-list-module { position: relative; padding: 30px 0; box-sizing: border-box;}
.article-list-module > div { position: relative; }

.article-slider > div{width: 100%;}
.article-list-module .article > div{margin: 0;}

.art_pagination{display: flex; align-items: center; justify-content: center; gap:12px; width: 100%; margin-top: 20px;}
.art_pagination .art_bullet{border: 1px solid #CDE730; border-radius: 8px; transition: ease-in-out all .3s; height: 6px; width: 32px;
    cursor: pointer;}
.art_pagination .art_bullet.active{background: #CDE730;}

/* Desktop */
@media (min-width:992px) and (max-width:1199px) {
    .article .article-image{height: 250px;}
  
}

/*Tablet*/
@media (min-width:768px) and (max-width:991px) {

    /*Article Block*/
    .article{width: 50%;}
    .article > div {margin: 0 5px 30px 5px;}

    /*Article Details*/
    .article-related{align-items: center; flex-direction: row; flex-wrap: wrap;}
    .article-related .article{width: calc(50% - 10px);}
}

@media (max-width:767px) {

    /*Search Page*/
    .article_banner{background-image: url(../images/article_banner_mobile.jpg);}
    .article_control{flex-direction: column; gap:5px; margin: 10px 0; height: initial;}
    .article_control .category_selection, .article_control .search_form_container{width: 100%; flex-shrink: 0; margin: 0;}

    .article-search-results{justify-content: center;}

     /*Article Block*/
    .article{width: 310px;}
    .article .article-image {height: 210px;}
    .article .article-info {gap:15px;}
    .article .article-title a {font-size: 13px;}
    .article .article_category a{font-size: 14px;}
    .article .article-snippet{font-size: 13px;}

    /*Pager*/
    .articles-pager > div > a{width: 25px;}

    /*Article Details*/
    .article-related{align-items: center;}
    .article-related .article{width: 290px;}

    /*Article List*/
    .article-list-module > div{width: 310px;}
    .article-list-module .article > div{padding: 0;}
    .article-list-module .article-dots{gap: 6px;}


}