/* Articles Header */
.article_header{ height: 180px; background: #fff; display: flex; align-items: center; border:solid #F8F8F8; border-width: 1px 0;}
.article_header > div{position: relative; display: flex; align-items: center;}
.article_header .article_search_title{display: flex; align-items: center; gap: 30px; }
.article_search_title::before{content: ""; height: 101px; width: 101px; flex-shrink: 0; background: url(../images/blog.svg) center no-repeat; animation: rotate-animation 20s linear infinite;}
.article_search_title > div{display: flex; flex-direction: column; gap:20px;}
.article_search_title span{font-size: 15px; color: #363736;}
.article_search_title h1{font-size: 42px; color: #363736; margin-bottom: 0;}

.category_search_wrap{ min-height:113px; padding: 22px 0; border-bottom: 1px solid #F8F8F8; background: #fff; margin-bottom: 30px;}
.category_search_wrap > div{display: flex; justify-content: space-between; align-items: center; height: 100%;}

.category_wrap{display: flex; flex-wrap: wrap; align-items: center; gap: 14px;}
.category_wrap a{padding: 7px 14px; background: #E9F8FF; color: #83A2B1; font-size: 15px; border-radius: 8px; text-transform: uppercase;
    transition: ease-in-out all .3s;}
.category_wrap a:hover{color: #fff; background: #83A2B1;}

/*Article Search Form*/
.search_form_container{width: 376px;  flex-shrink: 0;}
.article-search-form{display: flex; align-items: center; width: 100%; height: 70px; border:0; overflow: hidden; border: 1px solid #D6EFFB; border-radius: 8px; position: relative;}
.article-search-form > div{display: flex; gap:5px; height: 100%; align-items: center; width: calc(100% - 70px); padding: 0 20px;}
.article-search-form label{font-size: 14px; color: #363736; font-weight: 400; margin:0; display: flex; align-items: center; cursor: pointer; width: 50%;}
.article-search-form input[type=text]{background: none; border:0; outline:0; color: #566972; font-size: 15px; padding: 0; width: 50%; font-weight: 300;}
.article-search-form input[type=text]::placeholder{color: inherit; font-size: inherit; font-family: inherit; font-weight: inherit;}
.article-search-form input[type=submit]{width: 70px; flex-shrink: 0; height: 100%; background: url(../images/search.svg) no-repeat center #D6EFFB; 
    cursor: pointer; border:0; outline:0; padding: 0; position: relative;}

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

/*Search Pager*/
.search-pager{ margin: 20px 0 60px; height: 70px; display: flex;  align-items: center;}
.search-pager > div{width: 100%; display: flex; height: 100%; flex-direction: row; justify-content: center; align-items: center; 
    position: relative; margin: 0; background: #FFFFFF; border-radius: 4px; overflow: hidden;}
.search-pager > div > a{height: 100%; width: 30px; color: #566972; font-size: 18px; position: relative; display: flex; align-items: center; 
    justify-content: center; font-weight: 300; text-decoration: underline;}
.search-pager > div > a.pager-prev{position: absolute; left: 0; top: 0; width: 70px; background: #D6EFFB;}
.search-pager > div > a.pager-prev::before{content: ""; height: 24px; width: 24px; background: url(../images/arrow-left.svg) center no-repeat;}
.search-pager > div > a.pager-prev::after{content:""; height:70px; width: 10px; background: #F8F8F8; position: absolute; right: -10px; top: 0;}
.search-pager > div > a.pager-next{position: absolute; right: 0; top: 0; width: 70px; background: #D6EFFB;}
.search-pager > div > a.pager-next::before{content: ""; height: 24px; width: 24px; background: url(../images/arrow-right.svg) center no-repeat;}
.search-pager > div > a.pager-next::after{content:""; height:70px; width: 10px; background: #F8F8F8; position: absolute; left: -10px; top: 0;}
.search-pager > div > a.active{color: #363736; text-decoration: none;}

/* Article Block */
.article {width: 33.33333333%; }
.article > div{display: flex; position: relative; flex-direction: column; margin:0 10px 20px 10px;}
.article .art-image { height: 260px; width: 100%; display: flex; align-items: flex-start; position: relative;}
.article .art-image > a{height: 100%; width: 100%; background-position: center; background-color: #ededed; background-size: cover; background-repeat: no-repeat; border-radius: 8px;}
.article .art-category{display: flex; gap:10px; height: 34px; overflow: hidden;}
.article .art-category a{font-size: 12px; padding: 8px 14px; color: #83A2B1; background: #E9F8FF; border-radius: 8px; transition: ease-in-out all .3s;}
.article .art-category a:hover{ background:#83A2B1; color: #fff;}
.article .art-info {padding:10px 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; position: relative;}
.article .art-text{display: flex; flex-direction: column; gap: 10px;}
.article .art-title  {line-height: 32px; display: flex; align-items: flex-start; width: 100%; height: 55px; overflow: hidden;}
.article .art-title a {color: #363736; font-size: 20px; line-height: 30px; font-weight: 400; text-decoration: none; transition: ease-in-out all .3s;}
.article .art-footer{display: flex; align-items: center;  gap:20px;}
.article .art-footer a{font-size: 16px; color: #566972; text-transform: uppercase; line-height: 25px; display: flex; align-items: center; gap: 20px;}
.article .art-footer a::after{content: ""; height: 15px; width: 15px; background: url(../images/link_arrow_dark.svg) center no-repeat;}
.article .art-date{font-size: 16px; color: #566972; padding-left: 25px; position: relative;}
.article .art-date::before{content: ""; height: 6px; width: 6px; background: #D6EFFB; border-radius: 100%; position: absolute; left: 0; top: calc(50% - 3px);}
.article > div:hover .art-title a{color:#1059df;}

/* Article Details */
.article_image{text-align: center; min-height: 30px; position: relative; margin-bottom: 20px; border-radius: 8px; overflow: hidden;}
.article_image.noImage .article_info{padding: 0; position: static;}
.article_image.noImage .article_info::before{content: none;}
.article_image.noImage .article_date{color: #363736;}
.article_image.noImage .article_date::after{background: #363736;}
.article_image.noImage .article_title{color: #363736;}
.article_image .article_info{position: absolute; left:20px; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap:20px; padding:20px; align-items: flex-start;}
.article_image .article_info::before{content: ""; position: absolute; inset: 0;  background: rgba(0, 0, 0, .2); z-index: 1; border-radius: 8px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);}
.article_image .article_date{color: #fff; font-size: 15px; position: relative; z-index: 10; display: flex; flex-direction: column; gap:10px; align-items: flex-start;}
.article_image .article_date::after{content: ""; height: 3px; width:90px; background:#FFFFFF;}
.article_image .article_title{font-size: 42px; font-weight: 400; color: #fff; margin-bottom:0; padding: 0; position: relative; z-index: 10;}
.article-description{margin-bottom: 20px;}
.article-description p{font-size: 15px; color: #363736; line-height:26px;}

.article_details > div > .article_left{flex: 1; margin: 0 20px 0 15px;}
.article_details > div > .article_right{width: 376px; margin:0 15px 0 0;}

/*Article Sidebar*/
.article_sidebar{ margin-bottom:30px;  padding: 20px; background: #fff;}
.article_sidebar > header{ margin: 0 0 20px 0; display: flex; align-items: center; gap:20px; }
.article_sidebar > header::before{content: ""; height: 39px; width:39px; background:url(../images/related.svg) center no-repeat; }
.article_sidebar .as_articles{display: flex; flex-direction: column; gap:30px;}
.article_sidebar .as_article{color: #363736; font-size: 16px; display: flex; gap:12px; text-decoration: underline; transition: ease-in-out all .3s; line-height: 26px; 
    display: flex; align-items: center;}
.article_sidebar .as_article::before{content: ""; height: 8px; width: 8px; flex-shrink: 0; border-radius: 100%; background: #D6EFFB;}
.article_sidebar .as_article::after{content: ""; height: 15px; width: 15px; flex-shrink: 0; background: url(../images/link_arrow_dark.svg) center no-repeat; margin-left: 20px;}
.article_sidebar .as_article:hover{color: #1059df;}

/*Article Footer*/
.article_footer_container{width: 100%; margin: 60px 0;}
.article_footer{background: #fff;}
.article_footer > div{position: relative; padding: 80px 0;}
.article_footer header{margin: 0 0 30px 0; display: flex; align-items: center; justify-content: space-between;}
.article_footer footer{display: flex; align-items: center; justify-content: center; margin-top:30px; }
.article_footer h2{margin: 0;}
.article_footer .read_all_arts{color: #566972; text-transform: uppercase; font-size: 16px; padding: 0 40px; line-height: 68px; border: 1px solid #566972; 
    border-radius: 8px; transition: ease-in-out all .3s;}
.article_footer .read_all_arts:hover{background: #ABBFC9; color: #fff;}
.article_footer .recent_articles_list_container{display: flex; flex-direction: column; gap:40px;}
.article_footer .recent_articles_list{ display: flex; align-items: flex-start; position: relative; flex-wrap: wrap; width: 100%;}
.article_footer .recent_pagination {display: flex; align-items: center; justify-content: center; gap:8px;}
.article_footer .recent_pagination .recent_bullet{height: 15px; width: 15px; border: 1px solid #D6EFFB; position: relative; border-radius: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer;} 
.article_footer .recent_pagination .recent_bullet::after{content: ""; height: 9px; width: 9px; opacity: 1; background:#D6EFFB; border-radius:100%; 
    opacity: 0; transition: ease-in-out all .3s;}
.article_footer .recent_pagination .recent_bullet.active::after{ opacity: 1; }
.recent_articles_list .article > div{margin: 0;}


/* Article List Module*/
.article-list-module { position: relative; padding: 80px 0; background:#fff; }
.article-list-module > div{position: relative; display: flex; flex-direction: column; align-items: center; gap:30px;}
.article-list-module > div > div{width: 100%;}
.article-list-module .al_header{display: flex; flex-direction: column; gap:30px; margin-bottom: 30px;}
.al_header .al_subheading{padding-bottom: 18px; border-bottom: 1px solid #EAEDEE; color: #363736; text-transform: uppercase; line-height: 26px; font-size: 15px;}
.al_heading_container{display: flex; justify-content: space-between; align-items: center;}
.al_heading_container .al_heading{margin: 0;}
.article-list-module .al_button{padding: 21px 40px; border:1px solid #566972; color: #566972; text-transform: uppercase; border-radius: 8px; font-size: 16px; 
    transition: ease-in-out all .3s; background: #fff;}
.al_heading_container .al_button:hover{background: #ABBFC9; color: #fff;}

/*Article List View*/
.article-list-module.list .article-slider .swiper-wrapper{flex-wrap: wrap; display: flex; margin: 0;}
.article-list-module.list .article{width: 33.333333%;}
.article-list-module.list .article > div{margin: 0 10px 20px 10px;}

/*Article Carousel View*/
.article-list-module.carousel .article > div{margin: 0;}

/*Article Carousel Pagination*/
.art_pagination {display: flex; align-items: center; justify-content: center; gap:8px; margin-top: 20px;}
.art_pagination .art_bullet{height: 15px; width: 15px; border: 1px solid #D6EFFB; position: relative; border-radius: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer;} 
.art_pagination .art_bullet::after{content: ""; height: 9px; width: 9px; opacity: 1; background:#D6EFFB; border-radius:100%; 
    opacity: 0; transition: ease-in-out all .3s;}
.art_pagination .art_bullet.active::after{ opacity: 1; }


/************Responsive states**************/

/* Desktop */
@media (min-width:992px) and (max-width:1199px) {

    /*Search Page*/
    .article_search_title h1{font-size: 38px;}
    .category_wrap a{font-size: 14px;}

    /*Article block*/
    .article .art-footer a, .article .art-date{font-size: 14px;}
    .article .art-image {height: 220px;}
    .article .art-title a{font-size: 18px;}

    /*Details Page*/
    .article_details > div > .article_left{margin: 0 15px;}
}

/*Mobile & Tablet*/
@media (max-width:991px){

    /*Search Page*/
    .category_search_wrap > div{flex-direction: column; gap:30px;}
    .category_wrap{width: 100%;}
    .search_form_container{width: 100%;}
    .article-search-form > div{gap:20px;}
    .article-search-form label{width: initial;}
    .article-search-form input[type=text]{width: initial; flex: 1}

    /*Details Page*/
    .article_details > div > .article_right, .article_details > div > .article_left{width: 100%;}
    .article_sidebar{margin: 30px 0;}
    .article_footer_container{margin: 20px 0 40px;}
    
}

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

    /*Article Block*/
    .article{width: 50%;}
    .article > div{margin: 0 20px 20px 20px;}
    .article .art-image{height: 226px;}

    /*Article List Module*/
    .article-list-module{padding: 80px 0 40px 0;}

}

/*Mobile*/
@media (max-width:767px) {

    /*Search Page*/
    .article_header{height: initial; padding:40px 0;}
    .article_header .article_search_title{flex-direction: column; width: 100%; gap:20px;}
    .article_search_title::before{height: 44px; width: 44px; background-size: contain;}
    .article_search_title > div{align-items: center;}
    .article_search_title span{font-size: 14px;}
    .article_search_title h1{font-size: 38px;}
    .category_wrap{gap:8px;}
    .category_wrap a{font-size: 13px; padding: 8px;}
    .article-search-form{height: 60px;}
    .article-search-form > div{padding: 0 10px; gap: 5px;     width: calc(100% - 60px);}
    .article-search-form label{font-size: 12px; width: 100px;}
    .article-search-form input[type=text]{font-size: 12px; width: calc(100% - 100px); flex: initial;}
    .article-search-form input[type=submit]{width: 60px;}
  
    .articles .col-12{padding: 0 10px;}
    .article-search-results{flex-direction: column; align-items: center; justify-content: flex-start;}

    /*Articles Pager*/
    .search-pager{height: 50px;}
    .search-pager > div > a {width: 20px;font-size: 15px;}
    .search-pager > div > a.pager-prev, .search-pager > div > a.pager-next{width: 50px;}

    /*Article Block*/
    .article{width: 290px;}
    .article .art-image{height: 194px;}
    .article .art-category{height: initial;}
    .article .art-title{height: initial;}
    .article .art-title a{font-size: 18px;}
    .article .art-footer a, .article .art-date{font-size: 13px;}
    .article .art-footer a{gap:6px;}

    /*Article Details*/
    .article_details > div > .article_left{flex: initial; width: 100%;}
    .article_details > div > .article_right{width: 100%;}
    .article_image{border-radius: 8px 8px 0 0; margin: 0;}
    .article_info{position: static; background: #566972; padding: 20px; border-radius: 0 0 8px 8px; background: #566972; display: flex; gap:10px; flex-direction: column; margin-bottom: 30px;}
    .article_title{font-size: 22px; color: #fff; line-height:30px; margin: 0; }
    .article_date{font-size: 13px; color: #fff; display: flex; gap:10px; flex-direction: column;}
    .article_date::after{content:""; height: 3px; width: 90px; background: #fff;}

    .article-description p{font-size: 13px;}

    /*Sidebar*/
    .article_sidebar h5{font-size: 24px;}
    .article_sidebar .as_article{font-size: 13px;}

    /*Recent Articles*/
    .article_footer .recent_articles_list{width: 300px;}
    .article_footer > div{padding: 60px 0;}
    .article_footer header{justify-content: center;}
    .article_footer h2{font-size: 38px;}
    .article_footer .recent_articles_list_container {gap:20px;}
    .article_footer .read_all_arts{line-height:45px; font-size:13px; }


    /*Article List*/
    .article-list-module{padding:60px 0;}
    .article-list-module > div{gap:20px;}
    .article-list-module .al_header{margin: 0;}
    .al_header .al_subheading{text-align: center; font-size: 14px;}
    .al_heading_container{justify-content: center;}
    .article-list-module > div > div.article-slider{width: 290px;}
    .art_pagination{margin: 0;}
    .article-list-module .al_button{padding: 13px 30px; font-size:13px; margin-top: 10px;}
}