/*----------------------------------------------------

Template Name:    Evne
Template URL:     https://th3s.com/ev/evne-html/
Version:          1.0
Author:           Th3s
Author URL:       https://themeforest.net/user/th3s
Website:          http://th3s.com/
E-mail:           hi.e@th3s.com

This file contains the styling for the actual template, this
is the file you need to edit to change the look of the
template.

---------------------------------------------------- */
/*###############################
Blog List Page
###############################*/
/* 1.3. General Imports */
/* ============= Placeholder ============= */
/* 1.3. General Imports */
.display-1,
.display-2,
.display-3,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.button-xs {
  font-family: var(--font-family);
  font-weight: 400;
}

.display-1,
.display-2 {
  line-height: 116%;
}

.display-3 {
  line-height: 125%;
}

.display-1 {
  font-size: var(--display-1);
}

.display-2 {
  font-size: var(--display-2);
}

.display-3 {
  font-size: var(--display-3);
}

.h1 {
  font-size: var(--h1);
  line-height: 1.25;
}
@media only screen and (min-width: 1281px) {
  .h1 {
    line-height: 116%;
  }
}

.h2,
.h3,
.h4,
.h5,
.h6 {
  line-height: 129%;
}

.h2 {
  font-size: var(--h2);
}

.h3 {
  font-size: var(--h3);
}

.h4 {
  font-size: var(--h4);
}

.h5 {
  font-size: var(--h5);
}

.h6 {
  font-size: var(--h6);
}

.body-xxl {
  font-size: var(--body-xxl);
  line-height: 140%;
}

.body-xl {
  font-size: var(--body-xl);
  line-height: 166%;
}

.body-l {
  font-size: var(--body-l);
  line-height: 200%;
}
@media only screen and (min-width: 769px) {
  .body-l {
    line-height: 167%;
  }
}

.body-m {
  line-height: 165%;
  font-size: var(--body-m);
}

.body-s {
  font-size: var(--body-s);
  line-height: 165%;
}

.body-xs {
  font-size: var(--body-xs);
  line-height: 24px;
}

.button-l {
  font-size: var(--button-l);
  line-height: 112%;
}

.button-m {
  font-size: var(--button-m);
  line-height: 30px;
}

.button-s {
  font-size: var(--button-s);
  line-height: 28px;
}

.button-xs {
  font-size: var(--button-xs);
  line-height: 24px;
}

.blockquote-1 {
  font-size: var(--blockquote-1);
  line-height: 178%;
}

/** 
 * ------------------------------------------------------------------
 * [Table of contents]
 * 1. Blog - List
 *     1.1. .blog-list (Styling for blog list container)
 *         1.1.1. .article (Styling for individual article)
 *             1.1.1.1. .article-link (Styling for article links)
 *             1.1.1.2. .article-data (Styling for article data)
 *                 1.1.1.2.1. .post-name (Styling for post names)
 * ------------------------------------------------------------------
 **/
/* ============= Blog - List ============= */
.blog-list .article .article-link {
  border-radius: 40px;
}
.blog-list .article .article-data .post-name:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* ============= Next - Section ============= */
.next-section .data {
  padding: 120px 0px;
  border-width: 1px 0 1px 0;
  border-style: solid;
  border-color: var(--color-2);
}

/* ============= Marquee - Footer ============= */
.footer-marquee .marquee-content a,
.footer-marquee .marquee-content span {
  font-family: var(--font-family);
  position: relative;
  font-size: var(--display-2);
  font-weight: 300;
  line-height: 1;
  background: linear-gradient(to right, var(--color-light), transparent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media only screen and (min-width: 769px) {
  .footer-marquee .marquee-content::after {
    content: "";
    background-color: var(--color-black-2);
    width: 100%;
    height: 39%;
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: 1px solid rgba(233, 236, 242, 0.1);
    z-index: 100;
  }
}

/** 
 * ------------------------------------------------------------------
 * [Table of contents]
 * 1. Footer
 *     1.1. .main-footer (Main container for the footer section)
 *         1.1.1. .footer-logo (Logo section in the footer)
 *             1.1.1.1. img (Styling for the logo image)
 *         1.1.2. .marquee (Marquee element inside the footer)
 *         1.1.3. .copyright (Container for the copyright information)
 *             1.1.3.1. .contain-text (Wrapper for the text content)
 *             1.1.3.2. .to-top (Scroll-to-top button container)
 *                 1.1.3.2.1. p (Paragraph inside the scroll-to-top button)
 *                     1.1.3.2.1.1. a (Anchor tag inside the paragraph)
 *                         1.1.3.2.1.1.1. &::before (Styling for the pseudo-element)
 *                 1.1.3.2.2. .scroll-to-top (Scroll-to-top button itself)
 *                     1.1.3.2.2.1. span (Span inside the button for arrow)
 *                         1.1.3.2.2.1.1. &::before (Left side of the arrow)
 *                         1.1.3.2.2.1.2. &::after (Right side of the arrow)
 * ------------------------------------------------------------------
 **/
.main-footer .footer-logo:hover img {
  transform: scale(0.95);
}
.main-footer .footer-logo img {
  transition: transform 0.35s linear;
}
.main-footer .marquee {
  left: 50px;
}
.main-footer .copyright .contain-text p:first-of-type a::before {
  color: var(--color-primary);
}
.main-footer .copyright .to-top p a::before {
  color: var(--color-light) !important;
}
.main-footer .copyright .to-top .scroll-to-top {
  margin-top: 10px;
  background-color: transparent;
  width: 66px;
  height: 90px;
  border-radius: 38px;
  border: 1px solid var(--color-5);
  position: relative;
  transition: background 0.15s linear, border 0.1s linear;
}
@media only screen and (min-width: 769px) {
  .main-footer .copyright .to-top .scroll-to-top {
    margin-top: 0px;
  }
}
@media only screen and (min-width: 1367px) {
  .main-footer .copyright .to-top .scroll-to-top {
    width: 76px;
    height: 100px;
  }
}
.main-footer .copyright .to-top .scroll-to-top span {
  width: 20px;
  display: block;
  position: absolute;
  transform: translate(-50%, -50%);
  top: calc(50% - 1px);
  left: 50%;
}
.main-footer .copyright .to-top .scroll-to-top span::before, .main-footer .copyright .to-top .scroll-to-top span::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 3px;
  background-color: var(--color-light);
  top: 50%;
  transition: background 0.6s ease;
}
.main-footer .copyright .to-top .scroll-to-top span::before {
  border-radius: 5px 0px 0px 5px;
  transform: rotate(-45deg);
  left: -3px;
}
.main-footer .copyright .to-top .scroll-to-top span::after {
  border-radius: 0px 5px 5px 0px;
  transform: rotate(45deg);
  left: 6px;
}
.main-footer .copyright .to-top .scroll-to-top:hover {
  background-color: var(--color-5);
  border: 0px solid transparent;
}
.main-footer .copyright .to-top .scroll-to-top:hover span::before, .main-footer .copyright .to-top .scroll-to-top:hover span::after {
  background-color: var(--color-black);
  border-color: transparent;
}