@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;500;600;700&family=Hind:wght@400;500;600;700&family=Mukta:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

*{
    box-sizing:border-box;
}

html,
body,
button,
input,
textarea,
select,
a,
p,
span,
div,
h1,
h2,
h3,
h4,
h5,
h6,
label,
td,
th,
li{
    font-family:
    'Noto Sans Devanagari',
    'Hind',
    'Mukta',
    'Poppins',
    Arial,
    sans-serif !important;
}

body{
    margin:0;

    background:#fff7ed;
    color:#2b1607;

    transition:0.3s ease;
}


body.dark{
    background:#100b07;
    color:#fff7ed;
}

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

.header{
    padding:16px 7%;

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

    background:#fff;

    border-bottom:1px solid #f3d6a2;

    position:sticky;
    top:0;
    z-index:20;
}

body.dark .header{
    background:#1c120b;
    border-color:#3a2817;
}

.logo{
    font-size:25px;
    font-weight:900;
    color:#9a3412;
}

body.dark .logo{
    color:#fbbf24;
}

.nav{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
}

.nav a{
    font-weight:700;

    padding:9px 14px;

    border-radius:18px;

    transition:0.25s ease;
}

.nav a:hover{
    background:#fff1dc;
}

body.dark .nav a:hover{
    background:#2a1a1a;
}

.nav a.active{
    color:#fff;
    background:linear-gradient(135deg,#f59e0b,#9a3412);
}

.theme-btn{
    border:0;

    border-radius:20px;

    padding:9px 14px;

    background:linear-gradient(135deg,#f59e0b,#9a3412);

    color:#fff;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s ease;
}

.theme-btn:hover{
    transform:translateY(-1px);
}

.lang-btn,
.lang a{
    display:inline-block;

    margin:5px;

    padding:10px 16px;

    border-radius:22px;

    background:#fff;

    color:#9a3412;

    font-weight:bold;

    border:1px solid #f3d6a2;

    transition:0.25s ease;
}

.lang-btn:hover,
.lang a:hover{
    background:#fff1dc;
}

body.dark .lang-btn,
body.dark .lang a{
    background:#1c120b;
    color:#f59e0b;
    border:1px solid #3a2817;
}

.hero{
    padding:70px 7%;

    background:linear-gradient(135deg,#fff7ed,#fde68a);

    display:grid;
    grid-template-columns:1.2fr .8fr;

    gap:30px;

    align-items:center;
}

body.dark .hero{
    background:linear-gradient(135deg,#100b07,#422006);
}

.badge{
    display:inline-block;

    background:#fff;

    padding:9px 15px;

    border-radius:25px;

    color:#9a3412;

    font-weight:bold;

    margin-bottom:15px;
}

body.dark .badge{
    background:#1c120b;
    color:#fbbf24;
}

.hero h1{
    font-size:48px;
    margin:0 0 15px;
    line-height:1.15;
}

.hero p,
.card p,
.section-sub{
    color:#7c5b3a;
}

body.dark .hero p,
body.dark .card p,
body.dark .section-sub{
    color:#d6b98c;
}

.hero-card,
.card,
.widget{
    background:#fff;

    border:1px solid #f3d6a2;

    border-radius:24px;

    padding:24px;

    box-shadow:0 12px 30px rgba(120,60,10,.12);
}

.hero-card{
    border-radius:30px;
    padding:30px;
    text-align:center;

    box-shadow:0 18px 45px rgba(120,60,10,.16);
}

body.dark .hero-card,
body.dark .card,
body.dark .widget{
    background:#1c120b;
    border-color:#3a2817;
}

.hero-icon,
.icon{
    font-size:42px;
}

.hero-icon{
    font-size:80px;
}

.btn{
    display:inline-block;

    margin:8px 5px 0 0;

    padding:12px 18px;

    border-radius:24px;

    background:linear-gradient(135deg,#f59e0b,#9a3412);

    color:#fff !important;

    font-weight:bold;

    transition:0.25s ease;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn-light{
    background:#fff;
    color:#9a3412 !important;
    border:1px solid #f3d6a2;
}

body.dark .btn-light{
    background:#1c120b;
    color:#fbbf24 !important;
    border-color:#3a2817;
}

.section{
    padding:45px 7%;
}

.section-title{
    text-align:center;
    font-size:34px;
    margin:0 0 10px;
}

.section-sub{
    text-align:center;
    margin-bottom:28px;
}

.grid,
.widgets,
.blog-list{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(230px,1fr));

    gap:20px;
}

.card{
    transition:0.25s ease;
}

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

.card h3,
.card h2{
    margin:12px 0 8px;
}

.card p,
.widget p{
    line-height:1.6;
}

.widget{
    border-radius:26px;
    padding:25px;
}

.widget h3{
    font-size:24px;
    margin-top:0;
}

.ad-box{
    text-align:center;

    background:#fff;

    border:2px dashed #f59e0b;

    border-radius:24px;

    padding:30px;

    color:#9a3412;

    font-weight:bold;
}

body.dark .ad-box{
    background:#1c120b;
    color:#f8d89c;
}

.lang{
    text-align:center;
    margin-top:18px;
}

.footer{
    text-align:center;

    padding:28px;

    border-top:1px solid #f3d6a2;

    color:#7c5b3a;
}

body.dark .footer{
    border-color:#3a2817;
    color:#d6b98c;
}

/* Blog reusable */

.blog-card h2 a{
    color:#9a3412;
}

body.dark .blog-card h2 a{
    color:#fbbf24;
}

.empty-box{
    background:#fff;

    border:1px dashed #f59e0b;

    border-radius:24px;

    padding:30px;

    text-align:center;

    color:#9a3412;

    font-weight:bold;
}

body.dark .empty-box{
    background:#1c120b;
    color:#f8d89c;
}

/* Responsive */

@media(max-width:850px){

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

    .hero h1{
        font-size:34px;
    }

    .header{
        display:block;
        text-align:center;
    }

    .nav{
        margin-top:12px;
        justify-content:center;
    }

}

@media(max-width:600px){

    .logo{
        font-size:24px;
    }

    .nav{
        gap:8px;
    }

    .nav a,
    .lang-btn,
    .theme-btn{
        font-size:14px;
        padding:9px 12px;
    }

    .hero{
        padding:50px 6%;
    }

    .hero h1{
        font-size:28px;
    }

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

}

.compact-footer{
    max-width:1100px;
    margin:auto;
    text-align:center;
}

.footer-brand h3{
    margin:0 0 8px;
    font-size:26px;
}

.footer-brand p{
    margin:6px 0;
}

.footer-tagline{
    font-weight:bold;
}

.footer-main-links,
.footer-legal{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.footer-main-links a,
.footer-legal a{
    font-weight:600;
    color:inherit;
}

.footer-main-links a:hover,
.footer-legal a:hover{
    color:#9a3412;
}

body.dark .footer-main-links a:hover,
body.dark .footer-legal a:hover{
    color:#fbbf24;
}

.footer-copy{
    margin-top:18px;
    font-size:14px;
}

/* Horoscope Zodiac Icons */

.zodiac-icon{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:18px;
}

.zodiac-icon img{
    width:150px;
    height:150px;
    object-fit:contain;
    transition:.35s ease;
    filter:drop-shadow(0 0 15px rgba(255,180,0,.45));
}

.card:hover .zodiac-icon img{
    transform:scale(1.08);
    filter:drop-shadow(0 0 25px rgba(255,180,0,.8));
}