/*
Theme Name: Astro Naresh
Theme URI: https://astronaresh.com
Author: PreetAI
Author URI: https://webexperthub.com
Description: Premium Astrology WordPress Theme
Version: 1.0.0
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.1
Text Domain: astronaresh
*/

:root{

    --primary:#C89B3C;
    --secondary:#6B2138;
    --accent:#F59E0B;

    --dark:#1F2937;
    --light:#F8FAFC;

    --white:#ffffff;
    --black:#111827;

    --text:#4B5563;

    --radius:18px;

    --transition:.35s ease;

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

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
font-size:16px;
font-weight:400;
line-height:1.7;
background:var(--light);
color:var(--text);
overflow-x:hidden;

}

img{

max-width:100%;
height:auto;
display:block;

}

a{

text-decoration:none;
transition:var(--transition);

}

ul{

list-style:none;

}

h1,h2,h3,h4,h5,h6{

font-family:'Poppins', sans-serif;
color:var(--black);
font-weight:700;
line-height:1.2;

}

.container {
    width: min(1320px, 98%);
    margin: auto;
    max-width: 1200px!important;
}

section {
    padding: 50px 0 50px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 17px;
    border-radius: 10px;
    background: #8b0000;
    color: #fff;
    transition: .35s;
    font-size: 13px;
}

.btn:hover {
    transform: translateY(-4px);
    background: var(--secondary);
    color: #fff;
}

.text-center{

text-align:center;

}

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

.site-header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:9999;

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

backdrop-filter:blur(15px);

box-shadow:0 5px 20px rgba(0,0,0,.05);

}

.header-wrapper{

display:flex;

justify-content:space-between;

align-items:center;

height:90px;

}

.custom-logo{

max-height:60px;
width:auto;

}

.main-menu {
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.main-menu li{

list-style:none;

}

.main-menu a {
    font-weight: 600;
    color: var(--black);
    text-transform: uppercase;
}

.main-menu a:hover{

color:var(--primary);

}

.header-actions{

display:flex;

align-items:center;

gap:20px;

}

.mobile-toggle{

display:none;

background:none;

border:none;

font-size:32px;

cursor:pointer;

}

@media(max-width:991px){

.main-navigation{

display:none;

}

.mobile-toggle{

display:block;

}

}

/*====================================
Hero
====================================*/
.hero-section {
    position: relative;
    max-height: 375px;
    display: flex;
    overflow: hidden;
    padding: 50px 0 50px;
    background: url(assets/images/hero/hero-desktop.webp) center center no-repeat;
    background-size: cover;
    margin: 85px auto 0;
    align-items: center;
}
.hero-content {
    max-width: 840px;
    padding: 0;
    display: flex;
    gap: 0;
}
.hero-lft {
    text-align: left;
    width: 369px;
}
.hero-lft img {
    width: 100%;
    max-width: 404px;
}
.hero-rgt {
    text-align: center;
}
.hero-tag {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin-bottom: 5px;
}

.hero-content h2 {
    font-size: 60px;
    font-weight: 500;
    line-height: 1;
    font-family: 'Anton', sans-serif;
    color: #8b0000;
    margin-bottom: 20px;
    letter-spacing: 6px;
    text-transform: uppercase;
}



.hero-services {
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: #222;
    margin-bottom: 6px;
}

.hero-services span{

padding:0 10px;

color:#8b0000;

}

.hero-buttons {
    display: flex;
    gap: 20px;
    margin-top: 35px;
    flex-wrap: nowrap;
    justify-content: center;
}

.btn-primary, .btn-outline {
    display: inline-flex;
    gap: 10px;
    padding: 0px 17px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: .3s;
    align-items: center;
}
.hero-buttons .btn-outline {
    background: #fefde5;
    border: 2px solid #c89b3c;
    color: #a20d1f;
    line-height: 40px;
    padding: 4px 10px 0;
}
i.bi.bi-youtube {
    color: #ff0808;
    font-size: 31px;
}
.btn-primary {
    background: #a20d1f;
    color: #fff;
    border: 2px solid #ffffff;
}

.btn-primary:hover{

background:#820a19;

}

.btn-outline{

background:#fff;

color:#222;

border:2px solid #d5a24a;

}

a.btn-outline:hover i.bi.bi-youtube {
    color: #fff;
}

.hero-buttons .btn-outline:hover {
    background: #ff0808;
    color: #fff;
}

@media(max-width:991px){

.hero-section{

min-height:780px;

background:url("assets/images/hero/hero-mobile.webp") top center no-repeat;

background-size:cover;

}

.hero-content{

max-width:100%;

padding-top:420px;

text-align:center;

}

.hero-tag{

font-size:20px;

}

.hero-content h1{

font-size:48px;

}

.hero-services{

font-size:18px;

line-height:1.8;

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,
.btn-outline{

width:100%;

}

}



/*======================================
Stats Section
======================================*/

.stats-section{

    background:#fff;

    border-top:1px solid #ececec;

    border-bottom:1px solid #ececec;

    padding:25px 0;

}

.stats-grid{

    display:grid;

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

    gap:25px;

    align-items:center;

}

.stat-item{

    display:flex;

    align-items:center;

    gap:18px;

}

.stat-icon{

    width:72px;

    height:72px;

    min-width:72px;

    border:2px solid #d9a441;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#8b0000;

    font-size:32px;

    background:#fff;

    transition:.3s;

}

.stat-item:hover .stat-icon{

    background:#8b0000;

    color:#fff;

    transform:translateY(-4px);

}

.stat-content h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #8b0000;
}

.stat-content h4 {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    color: #222;
}

/* Tablet */

@media(max-width:991px){

.stats-grid{

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

}

}

/* Mobile */

@media(max-width:767px){

.stats-grid{

grid-template-columns:1fr;

gap:20px;

}

.stat-item{

justify-content:center;

text-align:left;

}

.stat-icon{

width:60px;

height:60px;

min-width:60px;

font-size:26px;

}

.stat-content h3{

font-size:32px;

}

.stat-content h4{

font-size:17px;

}

}


/*=====================================
Services
=====================================*/

.services-section {
    background: linear-gradient(180deg, #f5f5e6c2 0%, #ffffff00 100%);
}

.section-heading {
    max-width: 720px;
    margin: 0 auto 40px;
}

.section-subtitle{

display:inline-block;

padding:8px 20px;

border-radius:50px;

background:#fff4d8;

color:var(--primary);

font-weight:600;

margin-bottom:18px;

}

.youtube-section .section-subtitle {
    display: inline-block;
    padding: 0 20px;
    display: flex;
    border-radius: 50px;
    background: #fff4d8;
    color: #8b0000;
    font-weight: 600;
    margin: 0 auto 18px;
    align-items: center;
    width: auto;
    max-width: 250px;
    justify-content: center;
    gap: 10px;
}
.section-heading h2 {
    font-size: 35px;
    margin-bottom: 0;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}
.section-heading h2 span {
    color: #8b0000;
}
.services-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.service-card {
    background: #fff;
    border-radius: 15px;
    font-size: 12px;
    padding: 20px 30px;
    box-shadow: 0 0px 18px rgba(0, 0, 0, .08);
    transition: .35s;
    position: relative;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    border: 1px solid #c89b3c;
    overflow: hidden;
}
.service-card:hover{

transform:translateY(-12px);

}

.service-card::before{

content:"";

position:absolute;

bottom:0;

left:0;

width:100%;

height:4px;

background:var(--primary);

transform:scaleX(0);

transition:.35s;

}

.service-card:hover::before{

transform:scaleX(1);

}

.service-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 5px;
    font-size: 60px;
    color: #8b0000;
}

.service-card h3 {
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 500;
}

.service-card p{

margin-bottom:25px;

}

.service-link {
    align-items: center;
    display: block;
    text-align: center;
    color: #ffffff;
    background: #c89b3c;
    margin: 20px 5% 0;
    border-radius: 7px;
    padding: 2px 0;
}

.service-link:hover{

gap:14px;

}

@media(max-width:1200px){

.services-grid{

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

}

}

@media(max-width:767px){

.services-grid{

grid-template-columns:1fr;

}

.section-heading h2{

font-size:36px;

}

}

/*==================================
About
==================================*/

.about-section{

background:#fffdf8;

}

.about-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    align-items: center;
    gap: 80px;
}

.about-image{

position:relative;

}

.about-image img{

width:100%;

border-radius:30px;

box-shadow:var(--shadow);

}

.experience-box{

position:absolute;

bottom:30px;

left:-20px;

background:#fff;

padding:25px 30px;

border-radius:20px;

box-shadow:var(--shadow);

text-align:center;

}

.experience-box h3{

font-size:42px;

color:var(--primary);

margin-bottom:5px;

}

.about-content h1 {
    font-size: 32px;
    margin: 20px 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    color: #8b0000;
}
.about-content h1 span {
    display: block;
    font-size: 25px;
    color: #212529;
    font-weight: 400;
    margin: 5px 0 0;
}
.about-content p{

margin-bottom:20px;

}

.about-features{

display:grid;

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

gap:18px;

margin:35px 0;

}

.feature-item{

display:flex;

align-items:center;

gap:12px;

}

.feature-item i{

color:var(--primary);

font-size:20px;

}

.about-bottom{

display:flex;

align-items:center;

justify-content:space-between;

margin-top:40px;

gap:30px;

}
.about-bottom a.btn {
    background: none;
    color: #8b0000;
    border-radius: 4px;
    border: 1px solid #333;
}
.signature{

display:flex;

flex-direction:column;

}

.signature strong{

font-size:20px;

color:var(--black);

}

.signature span{

color:var(--text);

}

@media(max-width:991px){

.about-wrapper{

grid-template-columns:1fr;

}

.about-content{

text-align:center;

}

.about-features{

grid-template-columns:1fr;

}

.about-bottom{

flex-direction:column;

}

.experience-box{

right:20px;

}

}

@media(max-width:767px){

.about-content h2{

font-size:36px;

}

}
/*=====================================
Research
=====================================*/

.research-section{

background:#f8fafc;

}

.research-grid{

display:grid;

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

gap:30px;

}

.research-card{

background:#fff;

padding:35px;

border-radius:24px;

transition:.35s;

box-shadow:var(--shadow);

height:100%;

position:relative;

overflow:hidden;

}

.research-card::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:5px;

background:var(--primary);

transform:scaleX(0);

transition:.35s;

transform-origin:left;

}

.research-card:hover::after{

transform:scaleX(1);

}

.research-card:hover{

transform:translateY(-10px);

}

.research-icon{

width:75px;

height:75px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

background:#fff4d8;

margin-bottom:25px;

font-size:34px;

color:var(--primary);

}

.research-card h3{

margin-bottom:15px;

font-size:24px;

}

.research-card p{

margin-bottom:25px;

}

.research-link{

display:inline-flex;

align-items:center;

gap:8px;

font-weight:600;

color:var(--primary);

}

.research-link:hover{

gap:14px;

}

@media(max-width:1200px){

.research-grid{

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

}

}

@media(max-width:767px){

.research-grid{

grid-template-columns:1fr;

}

}

/*=====================================
YouTube
=====================================*/

.youtube-section{

background:#fff;

}

.youtube-wrapper{

display:grid;

grid-template-columns:1.3fr .7fr;

gap:40px;

align-items:start;

}

.featured-video{

position:relative;

}

.featured-video img{

width:100%;

border-radius:24px;

box-shadow:var(--shadow);

}

.featured-video h3{

margin-top:20px;

font-size:30px;

}

.play-btn{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

width:90px;

height:90px;

border-radius:50%;

background:#ff0000;

display:flex;

align-items:center;

justify-content:center;

font-size:40px;

color:#fff;

}

.video-list{

display:flex;

flex-direction:column;

gap:20px;

}

.video-item{

display:flex;

gap:20px;

background:#fff;

padding:15px;

border-radius:20px;

box-shadow:var(--shadow);

align-items:center;

}

.video-item img{

width:160px;

border-radius:15px;

}

.video-item h4{

font-size:20px;

margin-bottom:8px;

color:var(--black);

}

.video-item span{

color:var(--primary);

font-weight:600;

}

.youtube-cta{

text-align:center;

margin-top:60px;

}

@media(max-width:991px){

.youtube-wrapper{

grid-template-columns:1fr;

}

}

@media(max-width:767px){

.video-item{

flex-direction:column;

align-items:flex-start;

}

.video-item img{

width:100%;

}

.featured-video h3{

font-size:24px;

}

}

/*=====================================
Horoscope
=====================================*/

.horoscope-section{

background:#fffdf8;

}

.horoscope-grid{

display:grid;

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

gap:30px;

}

.zodiac-card{

background:#fff;

border-radius:28px;

padding:40px 20px;

text-align:center;

box-shadow:var(--shadow);

transition:.35s;

position:relative;

overflow:hidden;

}

.zodiac-card::before{

content:"";

position:absolute;

inset:0;

border-top:5px solid var(--primary);

transform:scaleX(0);

transition:.35s;

}

.zodiac-card:hover::before{

transform:scaleX(1);

}

.zodiac-card:hover{

transform:translateY(-10px);

}

.zodiac-icon{

width:90px;

height:90px;

margin:auto;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:44px;

background:#fff4d8;

color:var(--primary);

margin-bottom:25px;

}

.zodiac-card h3{

font-size:24px;

margin-bottom:20px;

}

.zodiac-btn{

display:inline-flex;

padding:12px 22px;

border-radius:50px;

background:var(--primary);

color:#fff;

font-weight:600;

}

.zodiac-btn:hover{

background:var(--secondary);

color:#fff;

}

@media(max-width:1200px){

.horoscope-grid{

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

}

}

@media(max-width:991px){

.horoscope-grid{

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

}

}

@media(max-width:767px){

.horoscope-grid{

grid-template-columns:1fr;

}

}

/*=====================================
Consultation
=====================================*/

.consultation-section{

background:linear-gradient(180deg,#fff,#fdf8ef);

}

.consultation-box{

background:#fff;

border-radius:30px;

padding:70px;

display:grid;

grid-template-columns:2fr 1fr;

gap:60px;

align-items:center;

box-shadow:var(--shadow);

}

.consultation-content h2{

font-size:48px;

margin:20px 0;

}

.consultation-content p{

margin-bottom:35px;

}

.consultation-features{

display:grid;

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

gap:18px;

}

.consultation-features div{

display:flex;

align-items:center;

gap:10px;

font-weight:500;

}

.consultation-features i{

color:var(--primary);

}

.consultation-card{

background:#fffdf8;

padding:40px;

border-radius:25px;

border:1px solid #f2e7c6;

}

.consultation-card h3{

font-size:30px;

margin-bottom:15px;

}

.consultation-buttons{

display:flex;

flex-direction:column;

gap:18px;

margin-top:30px;

}

.consult-btn{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

padding:16px;

border-radius:50px;

background:#fff;

border:1px solid #e5e7eb;

font-weight:600;

color:var(--black);

transition:.35s;

}

.consult-btn:hover{

background:var(--primary);

color:#fff;

border-color:var(--primary);

}

@media(max-width:991px){

.consultation-box{

grid-template-columns:1fr;

padding:45px;

}

.consultation-content{

text-align:center;

}

.consultation-features{

grid-template-columns:1fr;

}

}

@media(max-width:767px){

.consultation-content h2{

font-size:36px;

}

.consultation-box{

padding:30px;

}

}

/*=====================================
Testimonials
=====================================*/

.testimonials-section{

background:#fffdf8;

}

.testimonial-card{

background:#fff;

padding:35px;

border-radius:24px;

box-shadow:var(--shadow);

height:100%;

}

.testimonial-top{

display:flex;

align-items:center;

gap:18px;

margin-bottom:25px;

}

.testimonial-top img{

width:70px;

height:70px;

border-radius:50%;

object-fit:cover;

}

.testimonial-top h4{

margin-bottom:5px;

}

.rating{

color:#f59e0b;

font-size:22px;

margin-bottom:20px;

}

.testimonial-card p{

margin:0;

}

/*=====================================
Blog
=====================================*/

.blog-section{

background:#fff;

}

.blog-grid{

display:grid;

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

gap:35px;

}

.blog-card{

background:#fff;

border-radius:24px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.35s;

}

.blog-card:hover{

transform:translateY(-10px);

}

.blog-image img{

width:100%;

height:260px;

object-fit:cover;

}

.blog-content{

padding:30px;

}

.blog-meta{

display:flex;

gap:15px;

margin-bottom:18px;

font-size:14px;

color:#777;

}

.blog-content h3{

font-size:26px;

margin-bottom:18px;

}

.blog-content h3 a{

color:var(--black);

}

.blog-content h3 a:hover{

color:var(--primary);

}

.blog-content p{

margin-bottom:25px;

}

@media(max-width:991px){

.blog-grid{

grid-template-columns:1fr;

}

}

/*=====================================
Newsletter
=====================================*/

.newsletter-section{

background:#fff;

}

.newsletter-box{

background:linear-gradient(135deg,#fef7e6,#fffdf8);

padding:70px;

border-radius:30px;

display:grid;

grid-template-columns:1fr auto;

gap:60px;

align-items:center;

box-shadow:var(--shadow);

}

.newsletter-content h2{

font-size:44px;

margin:20px 0;

}

.newsletter-form form{

display:flex;

gap:15px;

}

.newsletter-form input{

width:350px;

height:60px;

padding:0 20px;

border:1px solid #ddd;

border-radius:50px;

outline:none;

}

.newsletter-form button{

height:60px;

padding:0 35px;

}

@media(max-width:991px){

.newsletter-box{

grid-template-columns:1fr;

text-align:center;

}

.newsletter-form form{

justify-content:center;

}

}

@media(max-width:767px){

.newsletter-box{

padding:35px;

}

.newsletter-content h2{

font-size:34px;

}

.newsletter-form form{

flex-direction:column;

}

.newsletter-form input{

width:100%;

}

}

/*=====================================
Footer
=====================================*/

.site-footer{

background:#111827;

color:#fff;

padding-top:90px;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1.2fr;

gap:50px;

padding-bottom:60px;

}

.footer-widget p{

color:#cbd5e1;

margin-top:20px;

}

.footer-widget h4 {
    margin-bottom: 25px;
    font-size: 20px;
    color: #ddd;
    font-weight: 500;
}

.footer-menu{

margin:0;

padding:0;

list-style:none;

}

.footer-menu li{

margin-bottom:15px;

}

.footer-menu a{

color:#cbd5e1;

transition:.3s;

}

.footer-menu a:hover{

color:var(--primary);

padding-left:6px;

}

.footer-contact{

list-style:none;

padding:0;

margin:0;

}

.footer-contact li{

display:flex;

gap:12px;

margin-bottom:18px;

color:#cbd5e1;

}

.footer-contact i{

color:var(--primary);

}

.footer-social{

display:flex;

gap:15px;

margin-top:25px;

}

.footer-social a{

width:45px;

height:45px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#1f2937;

color:#fff;

transition:.3s;

}
.footer-social i.bi.bi-youtube {
    color: unset;
    font-size: unset;
}
.footer-social a:hover{

background:var(--primary);

}

.footer-bottom{

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

padding:25px 0;

text-align:center;

color:#94a3b8;

}

#scrollTop {
    position: fixed;
    right: 25px;
    bottom: 25px;
    width: 50px;
    align-items: center;
    justify-content: center;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: none;
    cursor: pointer;
    z-index: 999;
}

@media(max-width:991px){

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:767px){

.footer-grid{

grid-template-columns:1fr;

}

}

/*=====================================
404 Page
=====================================*/

.error-page{

padding:140px 0;

background:#fffdf8;

min-height:70vh;

display:flex;

align-items:center;

}

.error-content{

max-width:700px;

margin:auto;

text-align:center;

}

.error-code{

display:block;

font-size:120px;

font-weight:700;

line-height:1;

color:var(--primary);

margin-bottom:20px;

}

.error-content h1{

font-size:48px;

margin-bottom:20px;

}

.error-content p{

max-width:600px;

margin:0 auto 40px;

}

.error-search{

margin-bottom:40px;

}

.error-search input[type="search"]{

width:100%;

max-width:500px;

height:60px;

padding:0 20px;

border:1px solid #ddd;

border-radius:50px;

outline:none;

}

.error-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.btn-outline{

background:transparent;

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

color:var(--primary);

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

}

@media(max-width:767px){

.error-code{

font-size:80px;

}

.error-content h1{

font-size:34px;

}

}

/*=====================================
Search Form
=====================================*/

.search-form{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.search-form input{

width:420px;

max-width:100%;

height:60px;

padding:0 20px;

border:1px solid #ddd;

border-radius:50px;

outline:none;

}

.search-form button{

height:60px;

padding:0 30px;

}

/*=====================================
Search Results
=====================================*/

.search-results-section{

padding:80px 0;

background:#fff;

}

.no-results{

max-width:700px;

margin:auto;

text-align:center;

padding:60px 20px;

}

.no-results h2{

font-size:40px;

margin-bottom:20px;

}

.pagination{

margin-top:60px;

display:flex;

justify-content:center;

}

.pagination .nav-links{

display:flex;

gap:12px;

flex-wrap:wrap;

}

.pagination a,
.pagination span{

display:flex;

align-items:center;

justify-content:center;

min-width:48px;

height:48px;

padding:0 18px;

border-radius:10px;

background:#f3f4f6;

color:#111;

font-weight:600;

}

.pagination .current{

background:var(--primary);

color:#fff;

}
/*=====================================
Single Post
=====================================*/

.single-post{

padding:80px 0;

background:#fff;

}

.single-thumbnail{

margin-bottom:40px;

border-radius:25px;

overflow:hidden;

}

.single-thumbnail img{

width:100%;

height:auto;

display:block;

}

.single-content{

max-width:900px;

margin:auto;

}

.single-meta{

display:flex;

flex-wrap:wrap;

gap:25px;

margin-bottom:20px;

color:#666;

font-size:15px;

}

.single-meta span{

display:flex;

align-items:center;

gap:8px;

}

.single-meta i{

color:var(--primary);

}

.single-content h1{

font-size:48px;

margin-bottom:30px;

}

.single-content p{

margin-bottom:20px;

line-height:1.9;

}

.single-content img{

max-width:100%;

height:auto;

border-radius:15px;

}

.post-tags{

margin-top:40px;

padding-top:25px;

border-top:1px solid #eee;

}

.post-navigation{

display:flex;

justify-content:space-between;

gap:20px;

margin-top:60px;

padding-top:40px;

border-top:1px solid #eee;

}

.post-navigation a{

font-weight:600;

color:var(--primary);

}

@media(max-width:767px){

.single-content h1{

font-size:34px;

}

.post-navigation{

flex-direction:column;

}

}
/*=====================================
Page
=====================================*/

.page-content{

padding:80px 0;

background:#fff;

}

.page-thumbnail{

margin-bottom:40px;

border-radius:24px;

overflow:hidden;

}

.page-thumbnail img{

width:100%;

height:auto;

display:block;

}

.entry-content{

max-width:900px;

margin:auto;

}

.entry-content h2,
.entry-content h3,
.entry-content h4{

margin:35px 0 20px;

}

.entry-content p{

margin-bottom:20px;

line-height:1.9;

}

.entry-content img{

max-width:100%;

height:auto;

border-radius:15px;

margin:25px 0;

}

.entry-content ul,
.entry-content ol{

margin:20px 0 20px 25px;

}

.entry-content li{

margin-bottom:10px;

}

.page-links{

margin-top:30px;

font-weight:600;

}

/*=====================================
Comments
=====================================*/

.comments-area{

max-width:900px;

margin:80px auto 0;

padding-top:50px;

border-top:1px solid #eee;

}

.comments-title{

margin-bottom:35px;

font-size:32px;

}

.comment-list{

list-style:none;

margin:0;

padding:0;

}

.comment-list li{

margin-bottom:35px;

padding-bottom:35px;

border-bottom:1px solid #eee;

}

.comment-body{

display:flex;

gap:20px;

}

.comment-author img{

border-radius:50%;

}

.comment-meta{

font-size:14px;

margin-bottom:10px;

}

.comment-content{

margin-top:15px;

}

.comment-reply-link{

display:inline-block;

margin-top:15px;

color:var(--primary);

font-weight:600;

}

.comment-respond{

margin-top:60px;

}

.comment-form{

display:grid;

gap:20px;

}

.comment-form input,
.comment-form textarea{

width:100%;

padding:15px 20px;

border:1px solid #ddd;

border-radius:10px;

outline:none;

font-size:16px;

}

.comment-form textarea{

min-height:180px;

resize:vertical;

}

.comment-form .submit{

border:none;

cursor:pointer;

}

/*=====================================
Sidebar
=====================================*/

.site-sidebar{

padding:30px;

background:#fff;

border:1px solid #eee;

border-radius:20px;

}

.widget{

margin-bottom:35px;

}

.widget:last-child{

margin-bottom:0;

}

.widget-title{

font-size:22px;

margin-bottom:20px;

padding-bottom:12px;

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

}

.widget ul{

margin:0;

padding:0;

list-style:none;

}

.widget ul li{

padding:10px 0;

border-bottom:1px solid #f1f1f1;

}

.widget ul li:last-child{

border-bottom:none;

}

.widget a{

color:#222;

transition:.3s;

}

.widget a:hover{

color:var(--primary);

}

.widget_search form{

display:flex;

flex-direction:column;

gap:15px;

}

.widget_search input{

width:100%;

height:50px;

padding:0 15px;

border:1px solid #ddd;

border-radius:10px;

}

.widget_search button{

height:50px;

}