/* Articles Header */
.article_header{ height: 200px; background: url(../images/article_banner.jpg) center no-repeat; display: flex; align-items: center;}
.article_header > div{position: relative; display: flex; justify-content: space-between; align-items: center; gap:20px;}
.article_header .article_search_title{display: flex; align-items: center;}
.article_header .article_search_title h2{ margin: 0; font-size:36px; line-height: 42px; text-transform: capitalize; color: #fff; padding: 0;}

/*Article Category*/
.category_wrap{padding: 20px 0; background: var(--mainColour); margin-bottom: 50px;}
.category_wrap > div{display: flex; padding: 0 15px; align-items: center; gap:20px;}
.category_wrap > div > div{width: 50%;}
.category_wrap select{border: 0; color: #fff; background: url(../images/chevron-down-white.svg) no-repeat 98% center; background-color: rgba(255, 255, 255, .06); 
    height: 46px; border-radius: 23px;}
.category_wrap option{color: var(--textColour);}

/*Article Search Form*/
.article-search-form{display: flex; align-items: center; width: 100%; height: 46px; border-radius: 24px; position: relative; 
    background-color: rgba(255, 255, 255, .1); border: 0;}
.article-search-form input[type=text]{width: calc(100% - 50px); padding: 0 15px; box-sizing: border-box; background: none; height: 100%; border:0; outline:0; color: #fff; font-size: 14px;}
.article-search-form input[type=text]::placeholder{color: inherit; font-size: inherit; font-family: inherit;}
.article-search-form input[type=submit]{width: 50px; flex-shrink: 0; height: 100%; background: url(../images/search.svg) no-repeat center; 
    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; height: 80px; 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: #fff;}
.search-pager > div > a{width: 35px; height: 35px; color: var(--headingColour); font-size: 19px; position: relative; display: flex; align-items: center; justify-content: center; text-decoration: underline; }
.search-pager > div > a.pager-prev{position: absolute; left: 0; top: 0; width: 80px; height: 100%; 
    background: var(--secondaryColour);}
.search-pager > div > a.pager-prev::after{content: ""; height: 16px; width: 16px; position: absolute; left: 33px; 
    top: calc(50% - 8px); border:solid var(--headingColour); border-width: 0 0 4px 4px; 
    transform: rotate(45deg); transition: ease-in-out all .3s;}
.search-pager > div > a.pager-next{position: absolute; right: 0; top: 0; width: 80px; height: 100%; 
    background: var(--secondaryColour);}
.search-pager > div > a.pager-next::after{content: ""; height: 16px; width: 16px; position: absolute; right: 33px; 
    top: calc(50% - 8px); border:solid var(--headingColour); border-width: 4px 4px 0 0; transform: rotate(45deg); transition: ease-in-out all .3s;}
.search-pager > div > a.active{font-weight: bold; text-decoration: none;}

/* Article Block */
.article {width: 33.33333333%; }
.article > div{display: flex; position: relative; flex-direction: column; margin:0 10px 60px 10px;}
.article .art-image { height: 345px; 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; transition: ease-in-out all .3s;}
.article .art-info {padding:40px; display: flex; flex-direction: column; justify-content: center; gap: 20px; position: relative; background: #fff;
    transition: ease-in-out all .3s;}
.article .art-title  {display: flex; align-items: flex-start; width: 100%; height: 60px; overflow: hidden;}
.article .art-title a { font-size: 24px; line-height: 30px; color: var(--textColour); font-family: var(--secondaryFont); text-decoration: none; 
    transition: ease-in-out all .3s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.article .art-short-description{height: 75px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.article .art-short-description p{padding: 0;}
.article .art-footer{display: flex; justify-content: space-between; align-items: center;}
.article .art-footer a{color: var(--textColour); text-decoration: underline;}

.article > div:hover .art-info {background: var(--secondaryColour);}

/* Article Details */
.article_image{text-align: center; min-height: 30px; position: relative; margin-bottom: 40px;}
.article_image img{max-width: 100%;}
.article_info{margin-bottom: 40px; display: flex; flex-direction: column; align-items: flex-start; gap:30px;}
.article_category{display: flex; flex-wrap: wrap; gap:10px;}
.article_category a{color: var(--textColour); text-decoration: underline; text-transform: capitalize;}
.article_title{padding: 0;}
.article_date{font-size: 16px; color: #4C4F57; }
.article-description{font-size: 16px;line-height: 26px;color: #404042; width: 100%;}

.article_back{padding-top: 30px; border-top: 1px solid #CECECE; width: 100%;}
.article_back > a, .article_back > a:hover{color: var(--textsColour); line-height: 28px; text-decoration: underline;}

.article_details > div > div{padding: 0 15px}
.article_details > div > .article_left{width: calc(100% - 520px);}
.article_details > div > .article_right{width: 520px; flex-shrink: 0;}

/*Articles Gallery*/
.article_gallery{display: flex; flex-direction: column; gap:20px; width: 100%; margin-bottom: 30px;}
.article_main_gallery {width: 100%;}
.am_items{height: 100%; align-items: center;}
.am_item{display: flex !important; align-items: center; justify-content: center; height: 100%;}
.am_item img{max-width: 100%; max-height: 100%; cursor: pointer;}

.article_main_gallery .am_next{height: 47px; width: 47px; border-radius: 100%; background: rgba(0, 0, 0, .7); position: absolute; right: 0px;
    top:50%; transform: translateY(-50%); z-index: 100;}
.article_main_gallery .am_next::after{content: ""; height: 12px; width: 12px; transform: rotate(45deg); border: solid #fff; 
    border-width: 3px 3px 0 0; position: absolute; left: 15px; top: 18px;}
.article_main_gallery .am_prev{height: 47px; width: 47px; border-radius: 100%; background: rgba(0, 0, 0, .7); position: absolute; left: 0px;
    top:50%; transform: translateY(-50%); z-index: 100;}
.article_main_gallery .am_prev::after{content: ""; height: 12px; width: 12px; transform: rotate(45deg); border: solid #fff; 
    border-width: 0 0 3px 3px; position: absolute; right: 15px; top: 18px;}

.article_thumbnail_gallery_container{width: 100%; padding: 20px; background: #FFFFFF; height: 145px; border-radius: 12px;}
.article_thumbnail_gallery{width: 100%; position: relative; height: 100%;}
.article_thumbnail_gallery .at_items.swiper-wrapper{align-items: center; display: flex;}
.article_thumbnail_gallery .at_item{cursor: pointer; display: flex; align-items: center; justify-content: center;}
.article_thumbnail_gallery .at_item img{max-width: 100%; max-height: 100%;}


/*Article Sidebar*/
.article_sidebar{ margin-bottom:30px; padding: 25px 40px 40px 40px; background: url(../images/form-wave.svg) bottom center no-repeat #fff; 
        background-size: 100%; position: relative;}
.article_sidebar > header{ margin: 0 0 20px 0; display: flex; align-items: flex-start; flex-direction: column; 
    justify-content: center; width: 100%; position: relative;}
.article_sidebar > header >span{font-size: 32px; color: var(--headingColour); font-family: var(--secondaryFont); padding: 0;}
.article_sidebar .as_article{display: flex; align-items: flex-start; gap:10px; margin-bottom: 30PX; padding-bottom: 30px; 
    border-bottom: 1px solid #E2E2E2;}
.as_image{height: 66px; width: 100px; background-size: cover; background-repeat: no-repeat; background-position: center; flex-shrink: 0; cursor: pointer; }
.article_sidebar .as_content{display: flex; flex-direction: column; gap:10px; width: 100%; flex: 1;}
.as_title{font-size: 18px; font-family: var(--secondaryFont); line-height: 26px; color: var(--textColour); text-decoration: none;}
.as_footer{display: flex; align-items: center;}
.as_read, .as_read:hover{text-decoration: underline; color: var(--textColour);}

.all-articles-link{display: flex; align-items: center;}

/*Article Footer*/
.article_footer_container{width: 100%;}
.article_footer{padding: 150px 0; background:url(../images/big_wave.svg) center no-repeat var(--siteBackground); }
.article_footer > div{position: relative; display: flex; flex-direction: column; gap:30px; padding: 0 15px;}
.article_footer header{display: flex; justify-content: space-between; align-items: center; gap: 10px;}
.article_footer header h3{font-size: 32px; color: var(--headingsColour); padding: 0; display: flex; gap:20px; 
    align-items: center;}
.article_footer header span{font-size: 24px; font-weight: 500; color: #fff;}
.article_footer .associated_articles_container{display: flex; position: relative; flex-direction: column; width: 100%; gap:30px;}
.article_footer .associated_articles {width: 100%;}
.article_footer .associated_articles .article > div{margin: 0;}

.associated_pagination{display: flex; align-items: center; justify-content: center; transform: none !important; margin: 0 auto;}
.associated_pagination span{background: #EBEBEB; opacity: 1; height: 20px; width: 20px; transform: none; flex-shrink: 0; border-radius: 50%;}
.associated_pagination span.active{background: var(--footerColour); transform:scale(1) !important;}
.associated_pagination :is(span.active-next-next, span.active-prev-prev){transform:scale(.33) !important;}
.associated_pagination :is(span.active-next, span.active-prev){transform:scale(.5) !important;}
.associated_pagination.swiper-pagination-lock{display: none;}


/* Article List Module*/
.article-list-module { position: relative; padding: 30px 0;}
.article-list-module > div{position: relative; display: flex; flex-direction: column; padding: 0 15px; gap:40px;}
.article-list-module > div > div.article-slider-container{width: 100%; gap:30px; display: flex; flex-direction: column;}

.article-list-module .al_header{width: 100%; display: flex; justify-content: space-between; gap:100px; align-items: center;}
.article-list-module .al_header > div{display: flex; flex-direction: column; gap:20px;}
.article-list-module .al_header > div > p{padding: 0;}
.article-list-module .al_header > a{ flex-shrink:0;}
.article-list-module a.button-primary{flex-shrink: 0; padding: 18px 60px; }
.article-list-module .article-slider {width: 100%;}
.al_header .al_heading{font-size: 32px; color: var(--headingsColour); line-height: 40px; padding: 0;
    display: flex; align-items: center; gap:20px;}

/*Article List View*/
.article-list-module.list{}
.article-list-module.list .article-slider > div{display: flex; flex-wrap: wrap; margin: 0;}
.article-list-module.list .article{width: 33.333333333%;}

/*Article Carousel View*/
.article-list-module.carousel{padding: 100px 0; background: url(../images/big_wave.svg) top center no-repeat;}
.article-list-module.carousel .article > div{margin: 0;}

/*Article Carousel Pagination*/
.art_pagination{display: flex; align-items: center; justify-content: center; transform: none !important; margin: 0 auto;}
.art_pagination span{background: #EBEBEB; opacity: 1; height: 20px; width: 20px; transform: none; flex-shrink: 0; border-radius: 50%;}
.art_pagination span.active{background: var(--footerColour); transform:scale(1) !important;}
.art_pagination :is(span.active-next-next, span.active-prev-prev){transform:scale(.33) !important;}
.art_pagination :is(span.active-next, span.active-prev){transform:scale(.5) !important;}
.art_pagination.swiper-pagination-lock{display: none;}


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

@media (min-width: 1200px) and (max-width:1400px) {

    /*Article Block*/
    .article .art-image{height:290px;}

    .article-list-module .container{padding-left: 0; padding-right: 0;}
}


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

    /*Search Page*/

    /*Article block*/
    .article > div{margin: 0 5px 30px 5px;}
    .article .art-image{height: 240px;}
    .article .art-info{padding: 20px;}

    /*Details Page*/
    .article_details > div > .article_left{width: calc(100% - 350px);}
    .article_details > div > .article_right {width: 350px;}
    .as_image{width: 70px; height: 45px;}
    .article_sidebar{padding: 25px 20px 40px 20px;}
    .article_footer{padding: 200px 0; }

    /*Article List Module*/
    .article-list-module.list .article > div{margin: 0 5px 30px 5px;}
   
}

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

    /*Article Details*/
    .article_details > div > .article_left{flex: initial; width: 100%;}
    .article_details > div > .article_right{width: 100%; padding: 0 10px; display: flex; align-items: center; flex-direction: column; justify-content: center;}
    
    .article_sidebar{width: 100%;}

    .article_footer > div {align-items: center;}

    /*Article List Module*/
    .article-list-module > div{align-items: center;}
    .article-list-module .al_header{justify-content: center; text-align: center;}
    .al_header .al_heading{font-size: 32px; line-height: 36px; text-align: center; justify-content: center;}

}

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

    /*Search Page*/
    .category_wrap > div{gap:14px;}

    /*Article Block*/
    .article{width: 50%;}
    .article > div{margin: 0 7px 40px 7px;}
    .article .art-image{height: 270px;}
    .article .art-info{padding: 40px 20px;}

    /*Article Details*/
    .article_title{font-size: 24px; line-height: 30px;}
    .article_footer{padding: 100px 0; }

    /*Article List Module*/
    .article-list-module.list .article{width: 50%;}
    .article-list-module.list .article > div{margin: 0 7px 20px 7px;}

}

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

    /*Search Page*/
    .article_header{ height: 200px; background-image:url(../images/article_banner_mobile.jpg);}
    .article_header .article_search_title{width: 100%;}
    .article_header .article_search_title h2{font-size: 32px; line-height: 38px; text-align: center; width: 100%;}
    .category_wrap > div{flex-direction: column; gap:10px; padding: 0 10px;}
    .category_wrap > div > div{width: 100%;}
    .article-search-results{align-items: center; flex-direction: column;}

    /*Articles Pager*/
    .search-pager{height: 60px;}
    .search-pager > div > a{width: 25px; font-size: 16px;}
    .search-pager > div > a.pager-next, .search-pager > div > a.pager-prev{width: 60px;}
    .search-pager > div > a.pager-prev::after{height: 16px; width: 16px; top: calc(50% - 8px); left:23px;}
    .search-pager > div > a.pager-next::after{height: 16px; width: 16px; top: calc(50% - 8px); right: 23px;}

    /*Article Block*/
    .article{width: 290px;}
    .article > div{margin:0 0 20px 0; }
    .article .art-image{height: 220px;}
    .article .art-info{padding: 30px 10px;}
    .article .art-title{height: 44px;}
    .article .art-title a{font-size: 20px; line-height: 24px;}

    /*Article Details*/
    .article_title{font-size: 22px; line-height: 32px;}
    .article-description :is(p,li){font-size: 14px; line-height: 24px;}

    /*Sidebar*/
    .article_sidebar > header{align-items: center; text-align: center;}
    .article_sidebar > header >h1{font-size: 22px; line-height: 26px;}
    .article_sidebar .as_article{flex-direction: column; align-items: center; justify-content: center; text-align: center;}
    .as_footer{justify-content: center;}
    .all-articles-link{justify-content: center;}

    /*Related Articles*/
    .article_footer{padding: 100px 0; background-image: url(../images/big_wave_mobile.svg);}
    .article_footer header{align-items: center;}
    .article_footer header h3{font-size: 28px;}
    .article_footer .associated_articles{width: 300px;}
    .associated_pagination{justify-content: center;}

    /*Article List*/
    .article-list-module > div{width: 300px;}
    .article-list-module.carousel{background-image: url(../images/big_wave_mobile.svg);}
    .article-list-module.carousel .article{display: flex; justify-content: center;}
    .article-list-module.carousel .article > div{width: 300px;}
    .al_header .al_heading{font-size: 28px; line-height: 36px;}
    .article-list-module.list .article-slider > div{justify-content: center;}
    .article-list-module.list .article{width: 300px;}
}