/* ROOT */

:root {
    --primary: #ef3f68;
    --primary-dark: #dc3159;

    --dark: #172033;
    --text: #263044;
    --muted: #697386;

    --white: #ffffff;
    --light: #fafafa;
    --border: #e8e9ed;

    --pink-light: #fff0f4;
    --shadow: 0 12px 35px rgba(23, 32, 51, .08);

    --radius: 20px;

    --container: 1280px;
}

/* RESET */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;
    color: var(--text);
    background: #fff;
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
    color: inherit;
}

button,
input,
textarea {
    font-family: inherit;
}

button {
    cursor: pointer;
}

.container {
    width: min(var(--container), 92%);
    margin: auto;
}

/* =========================================================
   HEADER
========================================================= */

.header {
    position: sticky;
    top: 0;
    z-index: 9999;

    height: 82px;

    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(14px);

    border-bottom: 1px solid var(--border);
}

.navbar {
    height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* LOGO */

.logo {
    font-family: "Playfair Display", serif;

    font-size: 38px;
    font-style: italic;
    font-weight: 800;

    color: var(--dark);

    position: relative;
}

.logo span {
    color: var(--primary);
    font-size: 45px;
    line-height: 0;

    margin-left: 3px;
}

/* NAVIGATION */

.nav-links {
    display: flex;
    align-items: center;
    gap: 35px;
}

.nav-links a {
    position: relative;

    font-size: 15px;
    font-weight: 600;

    color: #20283a;

    padding: 31px 0;

    transition: .3s;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary);
}

.nav-links a.active::after {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background: var(--primary);
}

/* HEADER ACTIONS */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 23px;
}

.icon-btn {
    border: 0;
    background: none;

    font-size: 23px;

    color: var(--dark);

    transition: .3s;
}

.icon-btn:hover {
    color: var(--primary);
    transform: translateY(-2px);
}

.subscribe-btn {
    border: 0;

    background: var(--primary);
    color: white;

    padding: 14px 25px;

    border-radius: 13px;

    font-size: 14px;
    font-weight: 700;

    transition: .3s;

    box-shadow: 0 8px 20px rgba(239, 63, 104, .18);
}

.subscribe-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

/* MOBILE MENU */

.menu-btn {
    display: none;

    border: 0;
    background: none;

    font-size: 28px;
    color: var(--dark);
}

/* =========================================================
   SEARCH OVERLAY
========================================================= */

.search-overlay {
    position: fixed;
    inset: 0;

    background: rgba(12, 17, 28, .75);

    z-index: 10000;

    display: none;
    align-items: flex-start;
    justify-content: center;

    padding-top: 130px;
}

.search-overlay.show {
    display: flex;
}

.search-box {
    width: min(650px, 90%);

    background: white;

    border-radius: 20px;

    padding: 30px;

    box-shadow: 0 25px 80px rgba(0, 0, 0, .25);

    animation: searchIn .3s ease;
}

.search-top {
    display: flex;
    align-items: center;
    gap: 15px;
}

.search-top input {
    flex: 1;

    border: 1px solid var(--border);

    padding: 16px 18px;

    border-radius: 12px;

    outline: none;

    font-size: 16px;
}

.search-top input:focus {
    border-color: var(--primary);
}

.close-search {
    width: 48px;
    height: 48px;

    border: 0;

    background: var(--pink-light);

    color: var(--primary);

    border-radius: 12px;

    font-size: 22px;
}

.search-results {
    margin-top: 20px;
}

.search-results p {
    color: var(--muted);
}

/* =========================================================
   HERO
========================================================= */

.hero {
    padding: 72px 0 60px;

    border-bottom: 1px solid #f0f0f2;
}

.hero-grid {
    display: grid;

    grid-template-columns: .88fr 1.12fr;

    gap: 60px;

    align-items: center;
}

/* HERO TEXT */

.hero-content {
    padding-left: 5px;
}

.hero-label {
    display: inline-flex;
    align-items: center;

    padding: 10px 17px;

    background: var(--pink-light);

    color: var(--primary);

    border-radius: 9px;

    font-size: 13px;
    font-weight: 700;

    margin-bottom: 24px;
}

.hero-title {
    font-family: "Playfair Display", serif;

    color: var(--dark);

    font-size: 62px;

    line-height: 1.08;

    letter-spacing: -2px;

    margin-bottom: 25px;
}

.hero-title .highlight {
    color: var(--primary);
    font-style: italic;
}

.hero-description {
    max-width: 590px;

    font-size: 17px;

    color: #68758a;

    line-height: 1.8;

    margin-bottom: 30px;
}

/* HERO BUTTONS */

.hero-buttons {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 38px;
}

.primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    padding: 17px 25px;

    background: var(--primary);
    color: white;

    border-radius: 13px;

    font-weight: 700;

    transition: .3s;
}

.primary-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);

    box-shadow: 0 12px 25px rgba(239, 63, 104, .2);
}

.secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 16px 23px;

    border: 1px solid var(--border);

    border-radius: 13px;

    font-weight: 700;

    transition: .3s;
}

.secondary-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* READERS */

.reader-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.avatars {
    display: flex;
}

.avatar {
    width: 38px;
    height: 38px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid white;

    margin-left: -8px;

    box-shadow: 0 3px 10px rgba(0, 0, 0, .1);
}

.avatar:first-child {
    margin-left: 0;
}

.reader-text strong {
    display: block;
    color: var(--dark);
    font-size: 14px;
}

.reader-text span {
    color: var(--muted);
    font-size: 13px;
}

/* =========================================================
   FEATURED IMAGE
========================================================= */

.featured {
    height: 520px;

    border-radius: 24px;

    overflow: hidden;

    position: relative;

    background: #ddd;

    box-shadow: var(--shadow);

    isolation: isolate;
}

/*
   IMPORTANT IMAGE FIX
*/

.featured>img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;

    filter: none !important;

    opacity: 1 !important;

    transform: scale(1);

    transition: transform .7s ease;
}

.featured:hover>img {
    transform: scale(1.025);
}

/* IMAGE OVERLAY */

.featured::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0) 25%,
            rgba(0, 0, 0, .12) 48%,
            rgba(0, 0, 0, .78) 100%);

    pointer-events: none;
}

/* FEATURED CONTENT */

.featured-content {
    position: absolute;

    z-index: 2;

    left: 35px;
    right: 35px;
    bottom: 32px;

    color: white;
}

.tag {
    display: inline-block;

    background: var(--primary);

    color: white;

    padding: 7px 13px;

    border-radius: 7px;

    font-size: 12px;
    font-weight: 700;

    margin-bottom: 12px;
}

.featured-title {
    max-width: 600px;

    font-family: "Playfair Display", serif;

    font-size: 34px;

    line-height: 1.18;

    margin-bottom: 20px;
}

.meta {
    display: flex;
    align-items: center;

    gap: 10px;

    font-size: 13px;

    color: #fff;
}

.meta .author {
    width: 35px;
    height: 35px;

    object-fit: cover;

    border-radius: 50%;

    border: 2px solid white;
}

/* =========================================================
   SECTION COMMON
========================================================= */

.section {
    padding: 72px 0;
}

.section-header {
    display: flex;

    align-items: end;
    justify-content: space-between;

    margin-bottom: 28px;
}

.section-title {
    font-family: "Playfair Display", serif;

    font-size: 32px;

    color: var(--dark);
}

.section-subtitle {
    margin-top: 7px;

    color: var(--muted);
}

.view-all {
    display: flex;
    align-items: center;
    gap: 8px;

    color: var(--primary);

    font-size: 14px;
    font-weight: 700;
}

.view-all:hover {
    gap: 13px;
}

/* =========================================================
   POPULAR POSTS
========================================================= */

.posts-layout {
    display: grid;

    grid-template-columns: 1fr 315px;

    gap: 30px;

    align-items: start;
}

.posts-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}

.blog-card {
    background: white;

    border: 1px solid var(--border);

    border-radius: 16px;

    overflow: hidden;

    transition: .35s;

    box-shadow: 0 3px 10px rgba(20, 25, 40, .02);
}

.blog-card:hover {
    transform: translateY(-7px);

    box-shadow: var(--shadow);
}

.blog-image {
    height: 205px;

    position: relative;

    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: .6s;
}

.blog-card:hover .blog-image img {
    transform: scale(1.06);
}

.blog-category {
    position: absolute;

    left: 13px;
    bottom: 13px;

    background: white;

    color: var(--primary);

    padding: 6px 10px;

    border-radius: 7px;

    font-size: 10px;
    font-weight: 800;
}

.blog-body {
    padding: 18px;
}

.blog-title {
    font-family: "Playfair Display", serif;

    font-size: 19px;

    line-height: 1.3;

    color: var(--dark);

    margin-bottom: 8px;
}

.blog-excerpt {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.6;

    margin-bottom: 15px;
}

.blog-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    border-top: 1px solid #f0f0f2;

    padding-top: 14px;
}

.blog-date {
    color: #8991a0;

    font-size: 11px;
}

.read-btn {
    border: 0;
    background: none;

    color: var(--primary);

    font-size: 12px;
    font-weight: 700;
}

/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    display: flex;
    flex-direction: column;

    gap: 18px;
}

.sidebar-card {
    padding: 26px;

    border-radius: 17px;

    background: #fff8fa;

    border: 1px solid #f8e9ee;
}

.sidebar-title {
    font-family: "Playfair Display", serif;

    color: var(--dark);

    font-size: 20px;

    margin-bottom: 20px;
}

/* ABOUT */

.about-mini {
    display: flex;
    align-items: center;

    gap: 15px;
}

.about-mini img {
    width: 82px;
    height: 82px;

    border-radius: 50%;

    object-fit: cover;

    border: 5px solid white;

    box-shadow: 0 5px 18px rgba(0, 0, 0, .1);
}

.about-mini p {
    font-size: 13px;

    line-height: 1.65;

    color: #535d70;
}

.learn-more {
    display: inline-flex;

    margin-top: 15px;

    color: var(--primary);

    font-size: 13px;
    font-weight: 700;
}

/* NEWSLETTER */

.newsletter-card {
    background: #fff;

    border-color: var(--border);
}

.newsletter-card p {
    font-size: 13px;

    color: var(--muted);

    margin-bottom: 15px;
}

.newsletter-form {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.newsletter-form input {
    width: 100%;

    border: 1px solid var(--border);

    outline: none;

    padding: 13px 14px;

    border-radius: 9px;

    font-size: 13px;
}

.newsletter-form input:focus {
    border-color: var(--primary);
}

.newsletter-form button {
    border: 0;

    padding: 13px;

    border-radius: 9px;

    background: var(--primary);

    color: white;

    font-weight: 700;

    transition: .3s;
}

.newsletter-form button:hover {
    background: var(--primary-dark);
}

/* =========================================================
   CATEGORIES
========================================================= */

.categories {
    padding-top: 5px;
}

.category-grid {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 15px;
}

.category-item {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 17px;

    border: 1px solid var(--border);

    border-radius: 14px;

    transition: .3s;

    background: white;
}

.category-item:hover {
    transform: translateY(-5px);

    border-color: #f2b6c5;

    box-shadow: var(--shadow);
}

.category-icon {
    width: 44px;
    height: 44px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color: var(--primary);

    background: var(--pink-light);

    font-size: 20px;
}

.category-item:nth-child(2) .category-icon {
    background: #edf4ff;
    color: #5485dc;
}

.category-item:nth-child(3) .category-icon {
    background: #ebfaf5;
    color: #40a986;
}

.category-item:nth-child(4) .category-icon {
    background: #f9edff;
    color: #9a58c7;
}

.category-item:nth-child(5) .category-icon {
    background: #fff5e7;
    color: #df983a;
}

.category-name {
    font-size: 14px;
    font-weight: 700;

    color: var(--dark);
}

.category-count {
    display: block;

    color: #8a92a0;

    font-size: 11px;
}

/* =========================================================
   LATEST ARTICLES
========================================================= */

.latest {
    background: #fafafa;

    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.filter-buttons {
    display: flex;

    gap: 9px;

    margin-bottom: 28px;

    flex-wrap: wrap;
}

.filter-btn {
    border: 1px solid var(--border);

    background: white;

    color: #697386;

    padding: 10px 18px;

    border-radius: 50px;

    font-size: 13px;
    font-weight: 600;

    transition: .3s;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--primary);

    border-color: var(--primary);

    color: white;
}

.latest-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}

.latest-card {
    background: white;

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid var(--border);

    transition: .35s;
}

.latest-card:hover {
    transform: translateY(-6px);

    box-shadow: var(--shadow);
}

.latest-img {
    height: 235px;

    overflow: hidden;
}

.latest-img img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .6s;
}

.latest-card:hover img {
    transform: scale(1.06);
}

.latest-body {
    padding: 22px;
}

.latest-category {
    color: var(--primary);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .5px;
}

.latest-title {
    font-family: "Playfair Display", serif;

    font-size: 22px;

    line-height: 1.3;

    color: var(--dark);

    margin: 8px 0;
}

.latest-text {
    color: var(--muted);

    font-size: 13px;

    line-height: 1.7;

    margin-bottom: 18px;
}

.latest-meta {
    color: #8a92a0;

    font-size: 11px;
}

/* =========================================================
   FEATURED TOPICS
========================================================= */

.topic-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}

.topic {
    min-height: 230px;

    border-radius: 18px;

    overflow: hidden;

    position: relative;

    color: white;
}

.topic img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: .6s;
}

.topic:hover img {
    transform: scale(1.07);
}

.topic::after {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to top,
            rgba(0, 0, 0, .8),
            rgba(0, 0, 0, .05));
}

.topic-content {
    position: absolute;

    z-index: 2;

    left: 20px;
    right: 20px;
    bottom: 18px;
}

.topic-content span {
    color: #ffb4c7;

    font-size: 11px;
    font-weight: 800;
}

.topic-content h3 {
    font-family: "Playfair Display", serif;

    font-size: 21px;

    line-height: 1.25;

    margin-top: 4px;
}

/* =========================================================
   ABOUT SECTION
========================================================= */

.about-section {
    background: #fff8fa;
}

.about-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

    align-items: center;
}

.about-image {
    height: 510px;

    border-radius: 24px;

    overflow: hidden;

    position: relative;
}

.about-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.about-content .section-title {
    font-size: 45px;

    margin-bottom: 18px;
}

.about-content p {
    color: var(--muted);

    font-size: 15px;

    line-height: 1.8;

    margin-bottom: 17px;
}

.about-list {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    margin: 25px 0;
}

.about-list div {
    display: flex;
    align-items: center;

    gap: 9px;

    font-size: 14px;
    font-weight: 600;
}

.about-list i {
    color: var(--primary);
}

/* =========================================================
   STATS
========================================================= */

.stats {
    padding: 45px 0;

    background: var(--dark);
}

.stats-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    text-align: center;
}

.stat h3 {
    color: white;

    font-family: "Playfair Display", serif;

    font-size: 38px;
}

.stat p {
    color: #9da6b8;

    font-size: 13px;
}

/* =========================================================
   TESTIMONIAL
========================================================= */

.testimonial-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 22px;
}

.testimonial {
    border: 1px solid var(--border);

    padding: 27px;

    border-radius: 18px;

    transition: .3s;
}

.testimonial:hover {
    transform: translateY(-5px);

    box-shadow: var(--shadow);
}

.stars {
    color: #f4a934;

    margin-bottom: 15px;

    letter-spacing: 2px;
}

.testimonial p {
    color: #5f6879;

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 22px;
}

.testimonial-author {
    display: flex;
    align-items: center;

    gap: 12px;
}

.testimonial-author img {
    width: 45px;
    height: 45px;

    object-fit: cover;

    border-radius: 50%;
}

.testimonial-author strong {
    display: block;

    color: var(--dark);

    font-size: 14px;
}

.testimonial-author span {
    color: #8991a0;

    font-size: 11px;
}

/* =========================================================
   CONTACT
========================================================= */

.contact-section {
    background: #fafafa;
}

.contact-grid {
    display: grid;

    grid-template-columns: .75fr 1.25fr;

    gap: 40px;
}

.contact-info {
    background: var(--dark);

    border-radius: 20px;

    padding: 38px;

    color: white;
}

.contact-info h2 {
    font-family: "Playfair Display", serif;

    font-size: 34px;

    margin-bottom: 15px;
}

.contact-info>p {
    color: #aeb6c5;

    font-size: 14px;

    line-height: 1.8;

    margin-bottom: 30px;
}

.contact-item {
    display: flex;

    gap: 15px;

    margin-bottom: 22px;
}

.contact-item i {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(255, 255, 255, .08);

    color: #ff7897;

    font-size: 19px;
}

.contact-item strong {
    display: block;

    font-size: 13px;
}

.contact-item span {
    color: #aeb6c5;

    font-size: 12px;
}

.contact-form {
    background: white;

    border: 1px solid var(--border);

    border-radius: 20px;

    padding: 35px;
}

.form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 18px;
}

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    font-size: 13px;

    font-weight: 700;

    margin-bottom: 7px;
}

.form-group input,
.form-group textarea {
    width: 100%;

    border: 1px solid var(--border);

    border-radius: 10px;

    outline: none;

    padding: 13px 14px;

    font-size: 13px;

    transition: .3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary);

    box-shadow: 0 0 0 3px rgba(239, 63, 104, .08);
}

.form-group textarea {
    min-height: 145px;

    resize: vertical;
}

/* =========================================================
   FOOTER
========================================================= */

.footer {
    background: #111722;

    color: white;

    padding: 60px 0 25px;
}

.footer-grid {
    display: grid;

    grid-template-columns: 1.5fr 1fr 1fr 1fr;

    gap: 45px;

    padding-bottom: 40px;

    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.footer-logo {
    color: white;

    font-family: "Playfair Display", serif;

    font-style: italic;

    font-size: 34px;
}

.footer-logo span {
    color: var(--primary);
}

.footer-about {
    color: #929bad;

    font-size: 13px;

    line-height: 1.8;

    max-width: 330px;

    margin-top: 15px;
}

.socials {
    display: flex;

    gap: 10px;

    margin-top: 20px;
}

.socials a {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 9px;

    background: rgba(255, 255, 255, .06);

    color: #b9c0ce;

    transition: .3s;
}

.socials a:hover {
    background: var(--primary);

    color: white;

    transform: translateY(-3px);
}

.footer h4 {
    font-size: 15px;

    margin-bottom: 18px;
}

.footer-links {
    display: flex;

    flex-direction: column;

    gap: 10px;
}

.footer-links a {
    color: #929bad;

    font-size: 13px;

    transition: .3s;
}

.footer-links a:hover {
    color: white;

    padding-left: 4px;
}

.footer-bottom {
    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-top: 22px;

    color: #737c8d;

    font-size: 12px;
}

/* =========================================================
   BACK TO TOP
========================================================= */

.back-top {
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 46px;
    height: 46px;

    border: 0;

    border-radius: 50%;

    background: var(--primary);

    color: white;

    font-size: 20px;

    z-index: 9000;

    opacity: 0;

    visibility: hidden;

    transform: translateY(15px);

    transition: .3s;

    box-shadow: 0 8px 25px rgba(239, 63, 104, .25);
}

.back-top.show {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

/* =========================================================
   MODAL
========================================================= */

.modal {
    position: fixed;

    inset: 0;

    background: rgba(10, 15, 25, .7);

    z-index: 11000;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;
}

.modal.show {
    display: flex;
}

.modal-box {
    width: min(700px, 100%);

    max-height: 85vh;

    overflow-y: auto;

    background: white;

    border-radius: 20px;

    padding: 35px;

    position: relative;

    animation: modalIn .3s ease;
}

.modal-close {
    position: absolute;

    right: 18px;
    top: 18px;

    width: 40px;
    height: 40px;

    border: 0;

    border-radius: 50%;

    background: var(--pink-light);

    color: var(--primary);

    font-size: 19px;
}

.modal-box h2 {
    font-family: "Playfair Display", serif;

    color: var(--dark);

    font-size: 32px;

    padding-right: 40px;

    margin-bottom: 15px;
}

.modal-box p {
    color: var(--muted);

    line-height: 1.9;

    font-size: 15px;
}

/* =========================================================
   TOAST
========================================================= */

.toast {
    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 12000;

    background: var(--dark);

    color: white;

    padding: 15px 20px;

    border-radius: 10px;

    font-size: 13px;

    opacity: 0;

    visibility: hidden;

    transform: translateY(20px);

    transition: .3s;
}

.toast.show {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes searchIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(25px) scale(.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1150px) {

    .nav-links {
        gap: 22px;
    }

    .hero-grid {
        gap: 35px;
    }

    .hero-title {
        font-size: 52px;
    }

    .posts-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: grid;

        grid-template-columns: 1fr 1fr;
    }

    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .topic-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:900px) {

    .nav-links {
        position: absolute;

        top: 82px;
        left: 0;
        right: 0;

        background: white;

        border-bottom: 1px solid var(--border);

        display: none;

        flex-direction: column;

        align-items: flex-start;

        gap: 0;

        padding: 10px 5%;

        box-shadow: 0 15px 30px rgba(0, 0, 0, .06);
    }

    .nav-links.show {
        display: flex;
    }

    .nav-links a {
        width: 100%;

        padding: 14px 0;
    }

    .nav-links a.active::after {
        display: none;
    }

    .menu-btn {
        display: block;
    }

    .hero {
        padding-top: 50px;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-content {
        text-align: center;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons,
    .reader-row {
        justify-content: center;
    }

    .featured {
        height: 480px;
    }

    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .latest-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .about-image {
        height: 430px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .testimonial-grid {
        grid-template-columns: 1fr 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:650px) {

    .header,
    .navbar {
        height: 70px;
    }

    .nav-links {
        top: 70px;
    }

    .logo {
        font-size: 31px;
    }

    .logo span {
        font-size: 38px;
    }

    .nav-actions {
        gap: 13px;
    }

    .nav-actions .subscribe-btn {
        display: none;
    }

    .hero {
        padding: 40px 0;
    }

    .hero-title {
        font-size: 42px;

        letter-spacing: -1px;
    }

    .hero-description {
        font-size: 15px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons a {
        width: 100%;
    }

    .featured {
        height: 410px;

        border-radius: 18px;
    }

    .featured-title {
        font-size: 27px;
    }

    .featured-content {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }

    .meta {
        flex-wrap: wrap;
    }

    .posts-grid,
    .latest-grid,
    .testimonial-grid {
        grid-template-columns: 1fr;
    }

    .sidebar {
        grid-template-columns: 1fr;
    }

    .category-grid {
        grid-template-columns: 1fr 1fr;
    }

    .topic-grid {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 55px 0;
    }

    .section-title {
        font-size: 28px;
    }

    .section-header {
        align-items: flex-start;
        gap: 15px;
        flex-direction: column;
    }

    .about-content .section-title {
        font-size: 36px;
    }

    .about-list {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .stat h3 {
        font-size: 30px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-form,
    .contact-info {
        padding: 25px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}

@media(max-width:420px) {

    .hero-title {
        font-size: 36px;
    }

    .category-grid {
        grid-template-columns: 1fr;
    }

    .featured {
        height: 370px;
    }

    .featured-title {
        font-size: 24px;
    }

    .featured-content {
        left: 18px;
        right: 18px;
    }
}