/*==========================================================
  Memories by Mailoria
  Premium Magazine Theme
  style.css
  Part 1
===========================================================*/

/*-------------------------
GOOGLE FONT
--------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/*-------------------------
RESET
--------------------------*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#f5f6f8;
    color:#222;
    line-height:1.7;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

img{
    max-width:100%;
    display:block;
}

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

ul{
    list-style:none;
}

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

button{
    cursor:pointer;
}

/*-------------------------
ROOT VARIABLES
--------------------------*/

:root{

--primary:#C0392B;
--secondary:#1B263B;

--gold:#F4C542;

--white:#ffffff;

--dark:#1a1a1a;

--gray:#666;

--light:#f8f9fb;

--border:#ececec;

--shadow:
0 10px 30px rgba(0,0,0,.08);

--transition:.35s ease;

--radius:14px;

}

/*-------------------------
CONTAINER
--------------------------*/

.container{

width:92%;

max-width:1320px;

margin:auto;

}

/*-------------------------
TYPOGRAPHY
--------------------------*/

h1{

font-size:54px;

font-weight:800;

line-height:1.2;

margin-bottom:18px;

}

h2{

font-size:42px;

font-weight:700;

margin-bottom:18px;

}

h3{

font-size:28px;

margin-bottom:16px;

}

h4{

font-size:22px;

margin-bottom:12px;

}

p{

font-size:17px;

color:#555;

margin-bottom:18px;

}

/*-------------------------
SECTION
--------------------------*/

section{

padding:80px 0;

}

.section-title{

font-size:42px;

font-weight:800;

margin-bottom:45px;

position:relative;

}

.section-title:after{

content:"";

width:90px;

height:4px;

background:var(--primary);

display:block;

margin-top:14px;

}

/*-------------------------
UTILITY
--------------------------*/

.flex{

display:flex;

}

.align-center{

align-items:center;

}

.justify-between{

justify-content:space-between;

}

.grid{

display:grid;

gap:30px;

}

.text-center{

text-align:center;

}

.mt-30{

margin-top:30px;

}

.mt-50{

margin-top:50px;

}

.mb-50{

margin-bottom:50px;

}

/*-------------------------
BUTTONS
--------------------------*/

.btn{

display:inline-block;

padding:15px 34px;

border-radius:40px;

font-weight:700;

transition:.35s;

}

.btn-primary{

background:var(--primary);

color:#fff;

}

.btn-primary:hover{

background:#9d2a1e;

transform:translateY(-3px);

}

.btn-outline{

border:2px solid var(--primary);

color:var(--primary);

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

}

/*-------------------------
TOP HEADER
--------------------------*/

.top-header{

background:#14213d;

color:#fff;

padding:10px 0;

font-size:14px;

}

.top-header .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.top-header a{

margin-left:18px;

transition:.3s;

}

.top-header a:hover{

color:var(--gold);

}

/*-------------------------
MAIN HEADER
--------------------------*/

header{

background:#fff;

position:sticky;

top:0;

z-index:9999;

box-shadow:0 4px 18px rgba(0,0,0,.06);

}

.header-wrapper{

display:flex;

justify-content:space-between;

align-items:center;

padding:22px 0;

}

.logo{

font-size:34px;

font-weight:900;

color:var(--primary);

letter-spacing:-1px;

}

.logo span{

color:#1b263b;

}

/*-------------------------
NAVIGATION
--------------------------*/

nav ul{

display:flex;

gap:34px;

}

nav ul li{

position:relative;

}

nav ul li a{

font-weight:700;

transition:.3s;

}

nav ul li a:hover{

color:var(--primary);

}

/*-------------------------
SEARCH
--------------------------*/

.search-btn{

width:46px;

height:46px;

border-radius:50%;

background:#f1f1f1;

display:flex;

justify-content:center;

align-items:center;

font-size:18px;

transition:.3s;

}

.search-btn:hover{

background:var(--primary);

color:#fff;

}

/*-------------------------
HERO
--------------------------*/

.hero{

padding:100px 0;

background:

linear-gradient(

135deg,

#ffffff,

#f3f5f8

);

}

.hero-wrapper{

display:grid;

grid-template-columns:1fr 520px;

align-items:center;

gap:60px;

}

.hero-tag{

display:inline-block;

background:var(--primary);

color:#fff;

padding:8px 20px;

border-radius:30px;

font-size:13px;

font-weight:700;

letter-spacing:1px;

margin-bottom:20px;

text-transform:uppercase;

}

.hero p{

font-size:20px;

max-width:650px;

}

.hero-buttons{

margin-top:35px;

display:flex;

gap:20px;

}

/*-------------------------
FEATURE IMAGE
--------------------------*/

.hero-image{

border-radius:20px;

overflow:hidden;

box-shadow:var(--shadow);

}

.hero-image img{

height:600px;

width:100%;

object-fit:cover;

transition:.5s;

}

.hero-image:hover img{

transform:scale(1.05);

}

/*-------------------------
FEATURE CARD
--------------------------*/

.card{

background:#fff;

border-radius:16px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.4s;

}

.card:hover{

transform:translateY(-8px);

}

.card img{

height:260px;

width:100%;

object-fit:cover;

}

.card-content{

padding:25px;

}

.card-category{

display:inline-block;

background:var(--gold);

padding:6px 14px;

font-size:13px;

font-weight:700;

border-radius:30px;

margin-bottom:14px;

}

.card h3{

font-size:24px;

line-height:1.4;

margin-bottom:14px;

}

.card p{

font-size:16px;

}

.read-more{

display:inline-block;

margin-top:18px;

font-weight:700;

color:var(--primary);

}

.read-more:hover{

text-decoration:underline;

}

/*=========================
END OF PART 1
NEXT:
Hero Slider
Breaking News
Featured Grid
Sidebar
Trending
Newsletter
Footer
=========================*/
/*=========================================================
STYLE.CSS PART 2
Featured Section
Sidebar
Latest Posts
Categories
Newsletter
Gallery
Footer
==========================================================*/

/*====================================
BREAKING NEWS
=====================================*/

.breaking-news{
    background:#c0392b;
    color:#fff;
    padding:12px 0;
}

.breaking-wrapper{
    display:flex;
    align-items:center;
}

.breaking-title{
    background:#1b263b;
    padding:12px 25px;
    font-weight:700;
    border-radius:5px;
    margin-right:20px;
    white-space:nowrap;
}

.breaking-scroll{
    width:100%;
    overflow:hidden;
}

/*====================================
FEATURED SECTION
=====================================*/

.featured-section{
    padding:80px 0;
    background:#fff;
}

.featured-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
}

.featured-left{
    display:grid;
    gap:35px;
}

.sidebar{
    position:sticky;
    top:100px;
    height:fit-content;
}

.widget{
    background:#fff;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    padding:30px;
    margin-bottom:30px;
}

.widget-title{
    font-size:24px;
    margin-bottom:20px;
    color:#1b263b;
}

.trending-list{
    display:flex;
    flex-direction:column;
}

.trending-list li{
    padding:14px 0;
    border-bottom:1px solid #eee;
}

.trending-list li:last-child{
    border:none;
}

.trending-list a{
    color:#333;
    font-weight:600;
    transition:.3s;
}

.trending-list a:hover{
    color:#c0392b;
    padding-left:8px;
}

/*====================================
NEWSLETTER WIDGET
=====================================*/

.newsletter-widget{
    background:#1b263b;
    color:#fff;
    border-radius:15px;
    padding:35px;
    margin-bottom:30px;
}

.newsletter-widget h3{
    font-size:28px;
    margin-bottom:15px;
}

.newsletter-widget p{
    color:#ddd;
}

.newsletter-widget input{
    width:100%;
    padding:15px;
    margin:20px 0;
    border:none;
    border-radius:50px;
}

.newsletter-widget button{
    width:100%;
}

.advertisement img{
    border-radius:15px;
    box-shadow:0 10px 20px rgba(0,0,0,.08);
}

/*====================================
LATEST POSTS
=====================================*/

.latest-posts{
    padding:80px 0;
    background:#f7f8fa;
}

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

/*====================================
CATEGORY GRID
=====================================*/

.categories-section{
    padding:90px 0;
    background:#fff;
}

.categories-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.category-box{
    background:#f8f8f8;
    border-radius:18px;
    padding:40px;
    text-align:center;
    transition:.35s;
    border:1px solid #ececec;
}

.category-box:hover{
    transform:translateY(-8px);
    background:#fff;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.category-box i{
    font-size:42px;
    color:#c0392b;
    margin-bottom:20px;
}

.category-box h3{
    margin-bottom:10px;
}

.category-box span{
    color:#777;
}

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

.popular-posts{
    padding:90px 0;
    background:#f5f6f8;
}

/*====================================
NEWSLETTER
=====================================*/

.newsletter-section{
    padding:90px 0;
}

.newsletter-box{
    background:#1b263b;
    border-radius:20px;
    padding:70px;
    text-align:center;
    color:#fff;
}

.newsletter-box h2{
    color:#fff;
    margin-bottom:20px;
}

.newsletter-box p{
    color:#d6d6d6;
    margin-bottom:35px;
}

.newsletter-form{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

.newsletter-form input{
    width:450px;
    padding:18px 25px;
    border:none;
    border-radius:50px;
    font-size:16px;
}

/*====================================
PHOTO GALLERY
=====================================*/

.gallery-section{
    padding:90px 0;
    background:#fff;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}

.gallery-grid img{
    border-radius:15px;
    height:260px;
    width:100%;
    object-fit:cover;
    transition:.4s;
}

.gallery-grid img:hover{
    transform:scale(1.05);
}

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

footer{
    background:#101820;
    color:#fff;
    padding:90px 0 30px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:40px;
}

.footer-grid h2,
.footer-grid h3{
    margin-bottom:20px;
}

.footer-grid p{
    color:#bfbfbf;
}

.footer-grid ul li{
    margin-bottom:14px;
}

.footer-grid a{
    color:#d8d8d8;
    transition:.3s;
}

.footer-grid a:hover{
    color:#f4c542;
    padding-left:5px;
}

.social-icons{
    display:flex;
    gap:15px;
}

.social-icons a{
    width:45px;
    height:45px;
    border-radius:50%;
    background:#243447;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.3s;
}

.social-icons a:hover{
    background:#c0392b;
}

.copyright{
    margin-top:60px;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.1);
    padding-top:30px;
    color:#bfbfbf;
}

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

#backToTop{
    position:fixed;
    right:30px;
    bottom:30px;
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:#c0392b;
    color:#fff;
    cursor:pointer;
    font-size:20px;
    display:none;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    transition:.35s;
    z-index:999;
}

#backToTop:hover{
    transform:translateY(-6px);
    background:#96281b;
}

/*====================================
HOVER EFFECTS
=====================================*/

.card img{
    transition:.5s;
}

.card:hover img{
    transform:scale(1.08);
}

.card{
    overflow:hidden;
}

/*====================================
SCROLLBAR
=====================================*/

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-thumb{
    background:#c0392b;
    border-radius:50px;
}

::-webkit-scrollbar-track{
    background:#f3f3f3;
}

/*=========================================================
ARTICLE PAGE CSS
American Memories by Mailoria
Append Below Existing CSS
=========================================================*/

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

.article-hero{

padding:70px 0;

background:#fff;

}

.hero-category{

display:inline-block;

background:#c0392b;

color:#fff;

padding:8px 20px;

border-radius:30px;

font-size:13px;

font-weight:700;

margin-bottom:20px;

}

.article-hero h1{

font-size:52px;

line-height:1.25;

margin-bottom:25px;

max-width:900px;

}

.article-meta{

display:flex;

flex-wrap:wrap;

gap:25px;

margin-bottom:35px;

font-size:15px;

color:#666;

}

.article-meta span{

display:flex;

align-items:center;

gap:8px;

}

.article-meta i{

color:#c0392b;

}

.article-hero img{

width:100%;

height:550px;

object-fit:cover;

border-radius:18px;

box-shadow:0 15px 40px rgba(0,0,0,.10);

}

/*==========================
ARTICLE LAYOUT
===========================*/

.article-content{

padding:80px 0;

background:#f5f6f8;

}

.article-layout{

display:grid;

grid-template-columns:90px 1fr 330px;

gap:40px;

align-items:start;

}

.article-main{

background:#fff;

padding:45px;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.article-main h2{

font-size:36px;

margin:35px 0 20px;

}

.article-main h3{

margin-top:25px;

}

.article-main p{

font-size:18px;

line-height:1.9;

color:#444;

margin-bottom:20px;

}

.article-main img{

width:100%;

margin:30px 0;

border-radius:16px;

}

/*==========================
TABLE OF CONTENTS
===========================*/

.table-of-contents{

background:#fafafa;

border-left:5px solid #c0392b;

padding:30px;

border-radius:12px;

margin-bottom:40px;

}

.table-of-contents h2{

font-size:28px;

margin-bottom:18px;

}

.table-of-contents ol{

padding-left:20px;

}

.table-of-contents li{

margin:12px 0;

}

.table-of-contents a{

color:#1b263b;

font-weight:600;

}

.table-of-contents a:hover{

color:#c0392b;

}

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

.share-sidebar{

position:sticky;

top:120px;

display:flex;

flex-direction:column;

align-items:center;

gap:18px;

}

.share-sidebar h4{

font-size:16px;

}

.share-sidebar a{

width:48px;

height:48px;

background:#fff;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

box-shadow:0 5px 15px rgba(0,0,0,.08);

transition:.3s;

}

.share-sidebar a:hover{

background:#c0392b;

color:#fff;

transform:translateY(-4px);

}

/*==========================
QUOTE BOX
===========================*/

.quote-box{

background:#fff5f2;

border-left:6px solid #c0392b;

padding:30px;

font-size:24px;

font-weight:700;

font-style:italic;

margin:35px 0;

border-radius:12px;

color:#1b263b;

}

/*==========================
MEMORY BOX
===========================*/

.memory-box{

background:#fff8e7;

border:2px dashed #f4c542;

padding:35px;

border-radius:16px;

margin:40px 0;

}

.memory-box h3{

margin-bottom:15px;

}

/*==========================
AUTHOR
===========================*/

.author-section{

margin-top:70px;

}

.author-box{

display:flex;

gap:30px;

align-items:center;

background:#fff;

padding:35px;

border-radius:18px;

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

}

.author-image img{

width:120px;

height:120px;

border-radius:50%;

object-fit:cover;

}

.author-content h3{

margin-bottom:15px;

}

.author-social{

display:flex;

gap:15px;

margin-top:20px;

}

.author-social a{

width:42px;

height:42px;

background:#f3f3f3;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

transition:.3s;

}

.author-social a:hover{

background:#c0392b;

color:#fff;

}

/*==========================
ARTICLE NAVIGATION
===========================*/

.article-navigation{

margin:60px 0;

}

.article-nav-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

}

.prev-post,

.next-post{

background:#fff;

padding:30px;

border-radius:16px;

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

}

.prev-post span,

.next-post span{

display:block;

font-size:14px;

color:#888;

margin-bottom:10px;

}

.prev-post h3,

.next-post h3{

font-size:22px;

}

/*==========================
COMMENTS
===========================*/

.comments-section{

margin-top:70px;

}

.comment-form{

display:flex;

flex-direction:column;

gap:20px;

}

.comment-form input,

.comment-form textarea{

padding:18px;

border:1px solid #ddd;

border-radius:12px;

font-size:16px;

}

.comment-form textarea{

resize:vertical;

min-height:180px;

}

/*==========================
RELATED POSTS
===========================*/

.related-posts{

margin:70px 0;

}

.related-posts .posts-grid{

display:grid;

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

gap:30px;

}

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

@media(max-width:1200px){

.article-layout{

grid-template-columns:1fr;

}

.share-sidebar{

display:none;

}

.sidebar{

position:relative;

top:0;

}

}

@media(max-width:768px){

.article-hero h1{

font-size:36px;

}

.article-main{

padding:25px;

}

.article-main h2{

font-size:28px;

}

.article-meta{

flex-direction:column;

gap:12px;

}

.author-box{

flex-direction:column;

text-align:center;

}

.article-nav-grid{

grid-template-columns:1fr;

}

.related-posts .posts-grid{

grid-template-columns:1fr;

}

}