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

:root{
    --primary:#5d3fd3;
    --primary-dark:#4328a8;
    --secondary:#f3b63a;
    --dark:#17152b;
    --text:#35334a;
    --muted:#777589;
    --bg:#f7f7fb;
    --white:#fff;
    --border:#e8e7ef;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Tahoma, Arial, sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.9;
}

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

.container{
    width:min(1180px, calc(100% - 32px));
    margin:auto;
}


/* HEADER */

.site-header{
    background:#fff;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:1000;
}

.header-inner{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.logo{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--dark);
    font-size:22px;
    font-weight:800;
    white-space:nowrap;
}

.logo-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    background:var(--primary);
    color:#fff;
    border-radius:13px;
    font-size:25px;
}

.main-nav{
    display:flex;
    align-items:center;
    gap:5px;
}

.main-nav a{
    padding:8px 11px;
    font-size:17px;
    font-weight:700;
    border-radius:8px;
}

.main-nav a:hover,
.main-nav a.active{
    background:#f0edff;
    color:var(--primary);
}

.menu-toggle{
    display:none;
    border:0;
    background:#f2f0fb;
    width:42px;
    height:42px;
    border-radius:8px;
    cursor:pointer;
    font-size:23px;
}


/* HERO */

.hero{
    padding:70px 0 65px;
    text-align:center;
    color:#fff;
    background:
        radial-gradient(circle at 20% 20%,rgba(255,255,255,.09),transparent 25%),
        linear-gradient(135deg,#1a1732,#4b32b0);
}

.hero-label{
    display:inline-block;
    padding:6px 15px;
    border:1px solid rgba(255,255,255,.2);
    background:rgba(255,255,255,.08);
    border-radius:50px;
    font-size:13px;
    margin-bottom:15px;
}

.hero h1{
    max-width:800px;
    margin:0 auto 15px;
    font-size:clamp(30px,5vw,48px);
    line-height:1.4;
}

.hero p{
    max-width:700px;
    margin:auto;
    color:#dedbef;
    font-size:17px;
}

.today-date{
    margin-top:20px;
    color:#ffd36e;
    font-weight:bold;
}


/* ADS */

.ad-area{
    min-height:100px;
    margin:30px 0;
    background:#fff;
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.ad-area > span{
    position:absolute;
    top:4px;
    right:8px;
    font-size:10px;
    color:#999;
}


/* TITLES */

.section-heading{
    text-align:center;
    margin-bottom:35px;
}

.section-heading > span,
.small-title{
    color:var(--primary);
    font-weight:bold;
    font-size:13px;
}

.section-heading h2{
    color:var(--dark);
    font-size:30px;
    margin:4px 0;
}

.section-heading p{
    color:var(--muted);
}


/* ZODIAC */

.zodiac-section{
    padding:40px 0 70px;
}

.zodiac-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.zodiac-card{
    background:#fff;
    border:1px solid var(--border);
    padding:25px 15px;
    border-radius:15px;
    text-align:center;
    transition:.25s ease;
}

.zodiac-card:hover{
    transform:translateY(-5px);
    border-color:#c9c0f7;
    box-shadow:0 12px 30px rgba(30,25,80,.08);
}

.zodiac-icon{
    width:58px;
    height:58px;
    margin:0 auto 12px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#f1eeff;
    color:var(--primary);
    font-size:30px;
}

.zodiac-card h3{
    color:var(--dark);
    font-size:19px;
}

.zodiac-card p{
    color:var(--muted);
    font-size:16px;
}

.zodiac-card span{
    display:block;
    margin-top:10px;
    color:var(--primary);
    font-size:13px;
    font-weight:bold;
}


/* MAIN CONTENT */

.content-section{
    background:#fff;
    padding:70px 0;
}

.content-layout{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(260px,1fr);
    gap:35px;
}

.main-article h2{
    color:var(--dark);
    font-size:27px;
    margin:8px 0 15px;
}

.main-article p{
    margin-bottom:18px;
    font-size:16px;
}

.info-box{
    margin-top:25px;
    padding:20px;
    background:#fff9e9;
    border-right:4px solid var(--secondary);
    border-radius:8px;
}

.side-card{
    border:1px solid var(--border);
    border-radius:14px;
    overflow:hidden;
}

.side-card h2{
    padding:17px 20px;
    background:var(--dark);
    color:#fff;
    font-size:18px;
}

.side-card a{
    display:flex;
    gap:10px;
    align-items:center;
    padding:13px 18px;
    border-bottom:1px solid var(--border);
    font-size:17px;
    font-weight:bold;
}

.side-card a:hover{
    color:var(--primary);
    background:#faf9ff;
}

.sidebar-ad{
    min-height:250px;
}


/* DISCOVER */

.discover-section{
    padding:70px 0;
}

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

.discover-card{
    padding:30px;
    border-radius:16px;
    background:#fff;
    border:1px solid var(--border);
}

.discover-card > div{
    font-size:35px;
}

.discover-card h3{
    margin:10px 0;
    font-size:21px;
    color:var(--dark);
}

.discover-card p{
    color:var(--muted);
    font-size:17px;
}

.discover-card span{
    display:inline-block;
    margin-top:15px;
    color:var(--primary);
    font-weight:bold;
    font-size:13px;
}


/* ARTICLES */

.latest-section{
    background:#fff;
    padding:70px 0;
}

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

.article-card{
    display:flex;
    gap:16px;
    border:1px solid var(--border);
    padding:20px;
    border-radius:14px;
}

.article-symbol{
    min-width:55px;
    height:55px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#f1eeff;
    color:var(--primary);
    font-size:28px;
}

.category{
    color:var(--primary);
    font-size:15px;
    font-weight:bold;
}

.article-card h3{
    font-size:17px;
    line-height:1.6;
    color:var(--dark);
}

.article-card h3 a:hover{
    color:var(--primary);
}

.article-card p{
    color:var(--muted);
    font-size:13px;
    margin-top:5px;
}


/* NEWSLETTER / CTA */

.newsletter{
    padding:55px 0;
    background:var(--primary);
    color:#fff;
}

.newsletter-inner{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
}

.newsletter h2{
    font-size:28px;
}

.newsletter p{
    color:#ded9ff;
}

.btn{
    background:#fff;
    color:var(--primary);
    padding:12px 24px;
    border-radius:9px;
    font-weight:bold;
    white-space:nowrap;
}


/* FOOTER */

.site-footer{
    background:#17152b;
    color:#c7c5d4;
    padding-top:55px;
}

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

.footer-logo{
    color:#fff;
    font-size:22px;
    font-weight:bold;
}

.footer-about p{
    max-width:420px;
    margin-top:12px;
    font-size:17px;
}

.site-footer h3{
    color:#fff;
    font-size:16px;
    margin-bottom:12px;
}

.site-footer div > a:not(.footer-logo){
    display:block;
    font-size:13px;
    margin:7px 0;
}

.site-footer div > a:hover{
    color:#fff;
}

.copyright{
    border-top:1px solid rgba(255,255,255,.1);
    padding:18px 0;
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:16px;
}


/* TABLET */

@media(max-width:900px){

    .menu-toggle{
        display:block;
    }

    .main-nav{
        display:none;
        position:absolute;
        top:72px;
        right:0;
        left:0;
        background:#fff;
        padding:15px 16px;
        border-bottom:1px solid var(--border);
        box-shadow:0 10px 20px rgba(0,0,0,.07);
    }

    .main-nav.open{
        display:block;
    }

    .main-nav a{
        display:block;
        margin:3px 0;
    }

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

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

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

}


/* MOBILE */

@media(max-width:650px){

    .container{
        width:min(100% - 24px,1180px);
    }

    .hero{
        padding:50px 0;
    }

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

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

    .zodiac-grid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .zodiac-card{
        padding:20px 8px;
    }

    .zodiac-card h3{
        font-size:16px;
    }

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

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

    .newsletter-inner{
        display:block;
        text-align:center;
    }

    .newsletter .btn{
        display:inline-block;
        margin-top:20px;
    }

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

    .footer-about{
        grid-column:1/-1;
    }

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

    .copyright p{
        margin:4px;
    }

}




/* =====================================================
   HOROSCOPE TODAY PAGE
   /horoscope-today/
===================================================== */


/* BREADCRUMB */

.breadcrumb-bar{
    background:#fff;
    border-bottom:1px solid var(--border);
}

.breadcrumb{
    min-height:44px;

    display:flex;
    align-items:center;
    gap:8px;

    color:var(--muted);
    font-size:16px;
}

.breadcrumb a{
    color:var(--primary);
}

.breadcrumb a:hover{
    text-decoration:underline;
}


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

.today-hero{
    position:relative;
    overflow:hidden;

    color:#fff;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(110,78,220,.45),
            transparent 27%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(243,182,58,.08),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #17152b,
            #282051
        );
}

.today-hero:before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:-350px;
    right:-150px;

    border:1px solid rgba(255,255,255,.06);
    border-radius:50%;
}

.today-hero-inner{
    min-height:450px;

    display:grid;
    grid-template-columns:1.35fr .65fr;
    align-items:center;

    gap:60px;
}

.today-hero-content{
    position:relative;
    z-index:3;
}

.today-hero-content h1{
    max-width:700px;

    margin:8px 0 8px;

    font-size:clamp(33px,5vw,50px);
    line-height:1.4;
}

.today-hero-content p{
    max-width:650px;

    margin-top:15px;

    color:#d9d6e8;

    font-size:16px;
    line-height:2;
}

.today-page .current-date{
    color:var(--secondary);
    font-size:17px;
    font-weight:bold;
}

.today-hero-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;

    margin-top:25px;
    padding:11px 22px;

    background:#fff;
    color:var(--primary);

    border-radius:9px;

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

    transition:.25s;
}

.today-hero-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 25px rgba(0,0,0,.2);
}


/* =========================
   COSMIC CIRCLE
========================= */

.today-hero-symbol{
    display:flex;
    justify-content:center;
    align-items:center;
}

.cosmic-circle{
    width:280px;
    height:280px;

    position:relative;

    border:1px solid rgba(255,255,255,.15);
    border-radius:50%;
}

.cosmic-ring{
    position:absolute;

    border-radius:50%;
}

.ring-one{
    inset:35px;

    border:1px dashed rgba(255,255,255,.15);
}

.ring-two{
    inset:70px;

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

.cosmic-center{
    position:absolute;

    inset:91px;

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

    background:#342b6c;

    border-radius:50%;

    box-shadow:
        0 0 40px rgba(112,82,231,.35);
}

.cosmic-center span{
    color:var(--secondary);

    font-size:40px;
    line-height:1;
}

.cosmic-center small{
    margin-top:6px;

    color:#e3e0ee;

    font-size:9px;
}

.cosmic-sign{
    position:absolute;

    width:35px;
    height:35px;

    display:grid;
    place-items:center;

    background:#2b2658;

    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;

    color:#f2c762;

    font-size:18px;
}

.s1{top:-17px;left:122px;}
.s2{top:9px;right:31px;}
.s3{top:64px;right:-10px;}
.s4{top:122px;right:-17px;}
.s5{bottom:63px;right:-10px;}
.s6{bottom:9px;right:31px;}

.s7{bottom:-17px;left:122px;}
.s8{bottom:9px;left:31px;}
.s9{bottom:63px;left:-10px;}
.s10{top:122px;left:-17px;}
.s11{top:64px;left:-10px;}
.s12{top:9px;left:31px;}


/* =========================
   INTRO
========================= */

.today-intro{
    padding:20px 0 40px;
}

.today-intro-box{
    max-width:950px;

    margin:auto;
    padding:30px;

    display:flex;
    align-items:flex-start;
    gap:24px;

    background:#fff;

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

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

.today-intro-icon{
    flex:0 0 65px;

    width:65px;
    height:65px;

    display:grid;
    place-items:center;

    background:#f1eeff;
    color:var(--primary);

    border-radius:50%;

    font-size:31px;
}

.today-intro-box h2{
    margin:3px 0 8px;

    color:var(--dark);

    font-size:25px;
}

.today-intro-box p{
    margin-top:8px;

    color:#5e5b6c;

    font-size:17px;
}


/* =========================
   ZODIAC TODAY
========================= */

.today-zodiac-section{
    padding:45px 0 70px;
}

.today-zodiac-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:16px;
}

.today-zodiac-card{
    padding:21px;

    background:#fff;

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

    transition:
        transform .25s,
        box-shadow .25s,
        border-color .25s;
}

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

    border-color:#c9c0f7;

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

.today-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.today-zodiac-icon{
    width:52px;
    height:52px;

    display:grid;
    place-items:center;

    border-radius:14px;

    font-size:28px;
}

.fire-sign{
    background:#fff0ec;
    color:#d9624c;
}

.earth-sign{
    background:#edf7ee;
    color:#4d9160;
}

.air-sign{
    background:#edf5fc;
    color:#4b82b5;
}

.water-sign{
    background:#f0effc;
    color:#6654ba;
}

.zodiac-element{
    padding:2px 9px;

    background:#f6f6f9;
    color:#777589;

    border-radius:20px;

    font-size:10px;
}

.today-zodiac-card h3{
    margin-top:13px;

    color:var(--dark);

    font-size:18px;
}

.zodiac-date{
    color:var(--muted);

    font-size:15px;
}

.today-preview{
    min-height:88px;

    margin:13px 0;
    padding:11px 0;

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

    color:#5e5c6b;

    font-size:16px;
    line-height:1.9;
}

.today-read{
    color:var(--primary);

    font-size:16px;
    font-weight:bold;
}


/* =========================
   FEATURES
========================= */

.today-features{
    padding:70px 0;

    background:#fff;
}

.today-feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:17px;
}

.today-feature-card{
    padding:26px 20px;

    text-align:center;

    border:1px solid var(--border);
    border-radius:15px;
}

.feature-icon{
    width:56px;
    height:56px;

    margin:0 auto 13px;

    display:grid;
    place-items:center;

    border-radius:50%;

    font-size:26px;
}

.love-feature{
    color:#c95371;
    background:#fff0f3;
}

.work-feature{
    color:#4c75b7;
    background:#eff4ff;
}

.money-feature{
    color:#699345;
    background:#f1f8eb;
}

.advice-feature{
    color:#b77d23;
    background:#fff6df;
}

.today-feature-card h3{
    color:var(--dark);

    font-size:18px;
}

.today-feature-card p{
    margin-top:7px;

    color:var(--muted);

    font-size:13px;
}


/* =========================
   TODAY ARTICLE
========================= */

.today-content-section{
    background:var(--bg);
}

.today-main-article{
    padding:35px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:15px;
}

.today-main-article h2:not(:first-of-type){
    margin-top:30px;
}

.today-related-links{
    margin-top:30px;

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

    gap:10px;
}

.today-related-links a{
    min-height:75px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:12px;

    background:#faf9fe;

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

    transition:.2s;
}

.today-related-links a:hover{
    background:#f4f1ff;
    border-color:#cfc7f5;
}

.related-icon{
    width:37px;
    height:37px;

    flex:0 0 37px;

    display:grid;
    place-items:center;

    background:#eeeafe;
    color:var(--primary);

    border-radius:8px;
}

.today-related-links div{
    flex:1;
}

.today-related-links small{
    display:block;

    color:var(--muted);

    font-size:9px;
}

.today-related-links strong{
    color:var(--dark);

    font-size:15px;
}

.today-related-links b{
    color:var(--primary);
}


/* =========================
   FAQ
========================= */

.today-faq-section{
    padding:70px 0;

    background:#fff;
}

.today-faq-container{
    max-width:850px;
}

.today-faq-list{
    border-top:1px solid var(--border);
}

.faq-item{
    border-bottom:1px solid var(--border);
}

.faq-question{
    width:100%;

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

    padding:18px 5px;

    border:0;
    background:none;

    color:var(--dark);

    text-align:right;

    font-family:inherit;
    font-size:15px;
    font-weight:bold;

    cursor:pointer;
}

.faq-plus{
    width:28px;
    height:28px;

    flex:0 0 28px;

    display:grid;
    place-items:center;

    background:#f1eeff;
    color:var(--primary);

    border-radius:50%;

    font-size:18px;

    transition:.25s;
}

.faq-answer{
    max-height:0;

    overflow:hidden;

    transition:max-height .3s ease;
}

.faq-answer p{
    padding:0 5px 18px;

    color:var(--muted);

    font-size:17px;
}

.faq-item.active .faq-answer{
    max-height:300px;
}

.faq-item.active .faq-plus{
    transform:rotate(45deg);
}


/* =========================
   TOMORROW CTA
========================= */

.today-next{
    padding:50px 0;

    background:#201b45;
    color:#fff;
}

.today-next-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:23px;
}

.today-next-icon{
    width:68px;
    height:68px;

    display:grid;
    place-items:center;

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

    border-radius:50%;

    color:var(--secondary);

    font-size:35px;
}

.today-next-text > span{
    color:#e2bd61;

    font-size:15px;
}

.today-next-text h2{
    font-size:25px;
}

.today-next-text p{
    color:#cbc7db;

    font-size:13px;
}

.today-next-btn{
    padding:11px 18px;

    background:#fff;
    color:var(--primary);

    border-radius:8px;

    font-size:16px;
    font-weight:bold;
}


/* =========================
   TABLET
========================= */

@media(max-width:900px){

    .today-hero-inner{
        grid-template-columns:1fr .55fr;

        gap:20px;
    }

    .cosmic-circle{
        transform:scale(.78);
    }

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

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

}


/* =========================
   MOBILE
========================= */

@media(max-width:650px){

    .today-hero-inner{
        min-height:auto;

        display:block;

        padding:50px 0;

        text-align:center;
    }

    .today-hero-content h1{
        font-size:31px;
    }

    .today-hero-content p{
        font-size:17px;
    }

    .today-hero-symbol{
        display:none;
    }

    .today-intro-box{
        display:block;

        padding:22px;
    }

    .today-intro-icon{
        margin-bottom:15px;
    }

    .today-zodiac-grid{
        grid-template-columns:repeat(2,1fr);

        gap:10px;
    }

    .today-zodiac-card{
        padding:15px;
    }

    .today-zodiac-icon{
        width:45px;
        height:45px;

        font-size:24px;
    }

    .today-zodiac-card h3{
        font-size:15px;
    }

    .today-preview{
        min-height:110px;

        font-size:15px;
    }

    .today-feature-grid{
        grid-template-columns:1fr 1fr;

        gap:10px;
    }

    .today-feature-card{
        padding:20px 12px;
    }

    .today-main-article{
        padding:22px 18px;
    }

    .today-related-links{
        grid-template-columns:1fr;
    }

    .today-next-inner{
        grid-template-columns:1fr;

        text-align:center;
    }

    .today-next-icon{
        margin:auto;
    }

    .today-next-btn{
        justify-self:center;
    }

}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:390px){

    .today-zodiac-grid{
        grid-template-columns:1fr;
    }

    .today-preview{
        min-height:auto;
    }

    .today-feature-grid{
        grid-template-columns:1fr;
    }

}





/* =====================================================
   DAILY SIGN PAGE
   /horoscope-today/aries/
===================================================== */


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

.sign-hero{
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 90% 20%,
            rgba(214,85,64,.15),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #17152b,
            #272047
        );

    color:#fff;
}

.sign-hero-inner{
    min-height:365px;

    display:grid;
    grid-template-columns:220px 1fr;
    align-items:center;

    gap:45px;
}

.sign-hero-symbol{
    text-align:center;
}

.big-zodiac-symbol{
    width:145px;
    height:145px;

    margin:auto;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.11),
            rgba(255,255,255,.03)
        );

    border:1px solid rgba(255,255,255,.15);

    color:#f3b63a;

    font-size:82px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.15);
}

.sign-element-badge{
    display:inline-block;

    margin-top:12px;
    padding:4px 12px;

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

    border:1px solid rgba(255,255,255,.1);
    border-radius:30px;

    color:#ddd9eb;

    font-size:10px;
}

.sign-hero-content h1{
    margin:8px 0;

    font-size:clamp(31px,5vw,47px);
    line-height:1.45;
}

.sign-current-date{
    display:flex;
    gap:6px;
    align-items:center;

    margin:8px 0 13px;

    color:#c9c5db;

    font-size:13px;
}

.sign-current-date strong{
    color:#f1c765;
}

.sign-hero-content > p{
    max-width:720px;

    color:#d5d2e3;

    font-size:15px;
    line-height:2;
}

.sign-hero-meta{
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-top:20px;
}

.sign-hero-meta span{
    padding:5px 11px;

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

    border:1px solid rgba(255,255,255,.09);
    border-radius:7px;

    color:#e3e0ec;

    font-size:15px;
}


/* =========================
   SUMMARY
========================= */

.sign-summary-section{
    padding:25px 0 55px;
}

.sign-summary-box{
    max-width:1000px;

    margin:auto;
    padding:32px;

    background:#fff;

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

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

.summary-heading{
    display:flex;
    align-items:center;

    gap:14px;

    margin-bottom:17px;
}

.summary-icon{
    width:55px;
    height:55px;

    flex:0 0 55px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:#fff5df;
    color:#c48a28;

    font-size:27px;
}

.summary-heading h2{
    color:var(--dark);

    font-size:25px;
}

.sign-summary-box > p{
    margin-bottom:12px;

    color:#555363;

    font-size:17px;
}

.summary-lead{
    font-size:15px !important;
}

.daily-score-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:10px;

    margin-top:25px;
}

.daily-score{
    display:flex;
    align-items:center;

    gap:9px;

    padding:12px;

    background:#faf9fd;

    border:1px solid var(--border);
    border-radius:10px;
}

.daily-score > span{
    font-size:21px;
}

.daily-score small{
    display:block;

    color:var(--muted);

    font-size:9px;
}

.daily-score strong{
    display:block;

    color:var(--dark);

    font-size:15px;
}


/* =========================
   CONTENT LAYOUT
========================= */

.sign-content-section{
    padding:15px 0 70px;
}

.sign-content-layout{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(260px,.72fr);

    gap:30px;
}

.sign-main-content{
    min-width:0;
}


/* =========================
   PREDICTION
========================= */

.prediction-section{
    margin-bottom:18px;
    padding:31px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:15px;
}

.prediction-heading{
    display:flex;
    align-items:center;

    gap:13px;

    margin-bottom:18px;
}

.prediction-icon{
    width:52px;
    height:52px;

    flex:0 0 52px;

    display:grid;
    place-items:center;

    border-radius:13px;

    font-size:25px;
}

.prediction-heading span{
    color:var(--muted);

    font-size:10px;
}

.prediction-heading h2{
    color:var(--dark);

    font-size:23px;
    line-height:1.5;
}

.prediction-love{
    background:#fff0f3;
    color:#ca5470;
}

.prediction-work{
    background:#eff4ff;
    color:#4d76b8;
}

.prediction-money{
    background:#eff7e9;
    color:#6d9548;
}

.prediction-health{
    background:#eaf7f1;
    color:#46866c;
}

.prediction-advice{
    background:#fff5df;
    color:#bb8128;
}

.prediction-about{
    background:#f1eeff;
    color:var(--primary);
}

.prediction-section > p{
    margin-bottom:14px;

    color:#525060;

    font-size:15px;
    line-height:2;
}

.prediction-note{
    margin-top:20px;
    padding:15px 17px;

    background:#fff8e8;

    border-right:4px solid #e5ae3d;
    border-radius:7px;

    color:#625a48;

    font-size:16px;
}

.daily-advice{
    margin:10px 0 20px;
    padding:20px 22px;

    background:#faf8ef;

    border:0;
    border-right:4px solid #e2ae42;

    color:#3f3c46;

    font-size:17px;
    font-weight:bold;
    line-height:2;
}

.sign-content-ad{
    min-height:130px;

    margin:20px 0;
}


/* =========================
   LUCK
========================= */

.aries-luck-section{
    margin-bottom:18px;
    padding:30px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:15px;
}

.section-mini-heading{
    margin-bottom:20px;
}

.section-mini-heading > span{
    color:var(--primary);

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

.section-mini-heading h2{
    color:var(--dark);

    font-size:23px;
}

.luck-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:10px;
}

.luck-card{
    padding:18px 10px;

    background:#faf9fd;

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

    text-align:center;
}

.luck-icon{
    display:block;

    margin-bottom:5px;

    font-size:22px;
}

.luck-card small{
    display:block;

    color:var(--muted);

    font-size:9px;
}

.luck-card strong{
    display:block;

    margin-top:2px;

    color:var(--dark);

    font-size:17px;
}

.luck-disclaimer{
    margin-top:12px;

    color:var(--muted);

    font-size:10px;
}


/* =========================
   SIGN INFO
========================= */

.sign-info-table{
    display:grid;
    grid-template-columns:repeat(2,1fr);

    margin:20px 0;

    border-top:1px solid var(--border);
    border-right:1px solid var(--border);
}

.sign-info-table div{
    padding:12px 14px;

    display:flex;
    justify-content:space-between;

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

.sign-info-table span{
    color:var(--muted);

    font-size:15px;
}

.sign-info-table strong{
    color:var(--dark);

    font-size:16px;
}

.text-link{
    color:var(--primary);

    font-size:16px;
    font-weight:bold;
}


/* =========================
   PERIOD LINKS
========================= */

.sign-period-section{
    padding:30px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:15px;
}

.sign-period-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:10px;
}

.sign-period-grid a{
    display:flex;
    align-items:center;

    gap:10px;

    padding:13px;

    background:#faf9fd;

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

    transition:.2s;
}

.sign-period-grid a:hover{
    background:#f3f0ff;
    border-color:#cec6f5;
}

.sign-period-grid a > span{
    width:37px;
    height:37px;

    flex:0 0 37px;

    display:grid;
    place-items:center;

    background:#eeeafe;

    border-radius:8px;
}

.sign-period-grid div{
    flex:1;
}

.sign-period-grid small{
    display:block;

    color:var(--muted);

    font-size:9px;
}

.sign-period-grid strong{
    color:var(--dark);

    font-size:16px;
}

.sign-period-grid b{
    color:var(--primary);
}


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

.sign-side-card{
    margin-bottom:22px;

    overflow:hidden;

    background:#fff;

    border:1px solid var(--border);
    border-radius:13px;
}

.sign-side-card > h2{
    padding:15px 17px;

    background:var(--dark);

    color:#fff;

    font-size:15px;
}

.sign-anchor-nav a{
    display:flex;
    align-items:center;

    gap:9px;

    padding:11px 15px;

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

    font-size:16px;
    font-weight:bold;
}

.sign-anchor-nav a:last-child{
    border-bottom:0;
}

.sign-anchor-nav a span{
    width:25px;

    color:var(--primary);

    text-align:center;

    font-size:16px;
}

.sign-anchor-nav a:hover{
    color:var(--primary);
    background:#faf9fe;
}

.other-signs-list{
    display:grid;
    grid-template-columns:1fr 1fr;
}

.other-signs-list a{
    display:flex;
    align-items:center;

    gap:6px;

    padding:9px 11px;

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

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

.other-signs-list a:nth-child(odd){
    border-left:1px solid var(--border);
}

.other-signs-list a span{
    color:var(--primary);

    font-size:16px;
}

.other-signs-list a:hover{
    background:#faf9fe;
    color:var(--primary);
}


/* =========================
   BOTTOM SIGNS
========================= */

.other-zodiac-bottom{
    padding:65px 0;

    background:#f7f7fa;
}

.mini-zodiac-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);

    gap:9px;
}

.mini-zodiac-grid a{
    padding:13px 8px;

    display:flex;
    flex-direction:column;
    align-items:center;

    background:#fff;

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

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

    transition:.2s;
}

.mini-zodiac-grid a span{
    margin-bottom:3px;

    color:var(--primary);

    font-size:23px;
}

.mini-zodiac-grid a:hover{
    transform:translateY(-3px);

    border-color:#c9c0f7;

    box-shadow:0 8px 20px rgba(30,25,80,.06);
}


/* =========================
   TABLET
========================= */

@media(max-width:900px){

    .sign-hero-inner{
        grid-template-columns:170px 1fr;

        gap:25px;
    }

    .big-zodiac-symbol{
        width:125px;
        height:125px;

        font-size:68px;
    }

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

    .mini-zodiac-grid{
        grid-template-columns:repeat(4,1fr);
    }

}


/* =========================
   MOBILE
========================= */

@media(max-width:650px){

    .sign-hero-inner{
        display:block;

        padding:42px 0;

        text-align:center;
    }

    .sign-hero-symbol{
        margin-bottom:22px;
    }

    .big-zodiac-symbol{
        width:100px;
        height:100px;

        font-size:57px;
    }

    .sign-hero-content h1{
        font-size:29px;
    }

    .sign-current-date{
        justify-content:center;
    }

    .sign-hero-meta{
        justify-content:center;
    }

    .sign-summary-box{
        padding:22px 18px;
    }

    .daily-score-grid{
        grid-template-columns:1fr 1fr;
    }

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

    .prediction-section,
    .aries-luck-section,
    .sign-period-section{
        padding:22px 18px;
    }

    .prediction-heading h2{
        font-size:20px;
    }

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

    .sign-period-grid{
        grid-template-columns:1fr;
    }

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

}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:390px){

    .daily-score-grid{
        grid-template-columns:1fr;
    }

    .sign-info-table{
        grid-template-columns:1fr;
    }

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

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

}





/* =====================================================
   TOMORROW HOROSCOPE HUB
   /horoscope-tomorrow/
===================================================== */


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

.tomorrow-hero{
    position:relative;
    overflow:hidden;

    color:#fff;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(76,94,186,.35),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(108,75,210,.25),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #12152d,
            #24204c
        );
}

.tomorrow-hero:before{
    content:"";

    position:absolute;

    width:450px;
    height:450px;

    top:-300px;
    right:-120px;

    border:1px solid rgba(255,255,255,.06);
    border-radius:50%;
}

.tomorrow-hero-inner{
    min-height:450px;

    display:grid;
    grid-template-columns:1.3fr .7fr;
    align-items:center;

    gap:55px;

    position:relative;
    z-index:2;
}

.tomorrow-hero-content h1{
    margin:8px 0;

    max-width:750px;

    font-size:clamp(33px,5vw,50px);
    line-height:1.4;
}

.tomorrow-date-row{
    display:flex;
    align-items:center;
    gap:6px;

    margin:8px 0 13px;

    color:#d2cfdf;

    font-size:13px;
}

.tomorrow-date-row strong{
    color:#f0c76a;
}

.tomorrow-hero-content > p{
    max-width:670px;

    color:#d5d2e5;

    font-size:16px;
    line-height:2;
}

.tomorrow-hero-actions{
    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-top:24px;
}

.tomorrow-main-btn,
.tomorrow-secondary-btn{
    display:inline-flex;
    align-items:center;

    gap:10px;

    padding:10px 20px;

    border-radius:8px;

    font-size:16px;
    font-weight:bold;

    transition:.2s;
}

.tomorrow-main-btn{
    background:#fff;
    color:var(--primary);
}

.tomorrow-secondary-btn{
    background:rgba(255,255,255,.07);
    color:#fff;

    border:1px solid rgba(255,255,255,.15);
}

.tomorrow-main-btn:hover,
.tomorrow-secondary-btn:hover{
    transform:translateY(-2px);
}


/* =========================
   MOON
========================= */

.tomorrow-moon-scene{
    width:280px;
    height:280px;

    position:relative;

    margin:auto;
}

.tomorrow-orbit{
    position:absolute;

    border-radius:50%;
}

.orbit-large{
    inset:0;

    border:1px solid rgba(255,255,255,.12);
}

.orbit-small{
    inset:40px;

    border:1px dashed rgba(255,255,255,.12);
}

.moon-main{
    position:absolute;

    width:120px;
    height:120px;

    top:80px;
    left:80px;

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

    background:
        radial-gradient(
            circle at 35% 30%,
            #fff7d7,
            #e9c968
        );

    border-radius:50%;

    color:#554a35;

    box-shadow:
        0 0 55px rgba(242,207,110,.22);
}

.moon-main > span{
    font-size:55px;
    line-height:1;
}

.moon-main small{
    margin-top:4px;

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

.moon-star{
    position:absolute;

    color:#f2d27e;
}

.ms1{
    top:15px;
    right:55px;
}

.ms2{
    top:55px;
    left:25px;
}

.ms3{
    right:18px;
    bottom:55px;
}

.ms4{
    left:65px;
    bottom:15px;

    font-size:25px;
}

.ms5{
    top:115px;
    right:-8px;
}

.ms6{
    top:20px;
    left:105px;

    font-size:25px;
}

.tomorrow-mini-sign{
    position:absolute;

    width:35px;
    height:35px;

    display:grid;
    place-items:center;

    background:#292553;

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;

    color:#d8c2ff;

    font-size:17px;
}

.tm1{
    top:15px;
    left:30px;
}

.tm2{
    bottom:12px;
    right:55px;
}

.tm3{
    bottom:45px;
    left:0;
}


/* =========================
   INTRO
========================= */

.tomorrow-intro{
    padding:20px 0 40px;
}

.tomorrow-intro-box{
    max-width:950px;

    margin:auto;
    padding:30px;

    display:flex;
    gap:24px;

    background:#fff;

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

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

.tomorrow-intro-icon{
    width:65px;
    height:65px;

    flex:0 0 65px;

    display:grid;
    place-items:center;

    background:#eeeefe;
    color:#5e57bd;

    border-radius:50%;

    font-size:32px;
}

.tomorrow-intro-content h2{
    margin:3px 0 8px;

    color:var(--dark);

    font-size:25px;
}

.tomorrow-intro-content p{
    margin-top:7px;

    color:#5d5b6c;

    font-size:17px;
}

.tomorrow-date-badge{
    display:inline-flex;
    align-items:center;

    gap:5px;

    margin-top:12px;
    padding:5px 12px;

    background:#f2f0ff;

    border-radius:20px;

    color:#656277;

    font-size:10px;
}

.tomorrow-date-badge strong{
    color:var(--primary);
}


/* =========================
   ZODIACS
========================= */

.tomorrow-zodiac-section{
    padding:45px 0 70px;
}

.tomorrow-zodiac-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:16px;
}

.tomorrow-zodiac-card{
    padding:21px;

    background:#fff;

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

    transition:
        transform .25s,
        box-shadow .25s,
        border-color .25s;
}

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

    border-color:#c9c1f4;

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

.tomorrow-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.tomorrow-zodiac-icon{
    width:52px;
    height:52px;

    display:grid;
    place-items:center;

    border-radius:14px;

    font-size:28px;
}

.tomorrow-zodiac-card h3{
    margin-top:13px;

    color:var(--dark);

    font-size:18px;
}

.tomorrow-preview{
    min-height:88px;

    margin:13px 0;
    padding:11px 0;

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

    color:#5e5c6c;

    font-size:16px;
    line-height:1.9;
}

.tomorrow-read{
    color:var(--primary);

    font-size:16px;
    font-weight:bold;
}


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

.tomorrow-categories{
    padding:70px 0;

    background:#fff;
}

.tomorrow-category-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:17px;
}

.tomorrow-category-card{
    padding:26px 20px;

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

    text-align:center;
}

.tomorrow-category-icon{
    width:56px;
    height:56px;

    margin:0 auto 13px;

    display:grid;
    place-items:center;

    border-radius:50%;

    font-size:26px;
}

.tomorrow-love{
    background:#fff0f3;
    color:#ca5470;
}

.tomorrow-work{
    background:#eff4ff;
    color:#4c75b7;
}

.tomorrow-money{
    background:#f1f8eb;
    color:#699345;
}

.tomorrow-advice{
    background:#f1efff;
    color:#6556bb;
}

.tomorrow-category-card h3{
    color:var(--dark);

    font-size:18px;
}

.tomorrow-category-card p{
    margin-top:7px;

    color:var(--muted);

    font-size:13px;
}


/* =========================
   CONTENT
========================= */

.tomorrow-content-section{
    background:var(--bg);
}

.tomorrow-main-article{
    padding:35px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:15px;
}

.tomorrow-main-article h2:not(:first-of-type){
    margin-top:30px;
}

.tomorrow-related-links{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;

    margin-top:30px;
}

.tomorrow-related-links a{
    min-height:75px;

    display:flex;
    align-items:center;

    gap:10px;

    padding:12px;

    background:#faf9fe;


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

    transition:.2s;
}

.tomorrow-related-links a:hover{
    background:#f3f1ff;
    border-color:#cbc4f2;
}

.tomorrow-related-icon{
    width:37px;
    height:37px;

    flex:0 0 37px;

    display:grid;
    place-items:center;

    background:#eeebfe;

    border-radius:8px;
}

.tomorrow-related-links div{
    flex:1;
}

.tomorrow-related-links small{
    display:block;

    color:var(--muted);

    font-size:9px;
}

.tomorrow-related-links strong{
    color:var(--dark);

    font-size:15px;
}

.tomorrow-related-links b{
    color:var(--primary);
}


/* =========================
   BACK TO TODAY
========================= */

.tomorrow-back-today{
    padding:50px 0;

    background:#201b45;

    color:#fff;
}

.tomorrow-back-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:23px;
}

.tomorrow-back-icon{
    width:68px;
    height:68px;

    display:grid;
    place-items:center;

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

    border-radius:50%;

    color:#efc35f;

    font-size:35px;
}

.tomorrow-back-inner > div:nth-child(2) > span{
    color:#dfbb62;

    font-size:15px;
}

.tomorrow-back-inner h2{
    font-size:25px;
}

.tomorrow-back-inner p{
    color:#cbc8d9;

    font-size:13px;
}

.tomorrow-back-inner > a{
    padding:10px 18px;

    background:#fff;
    color:var(--primary);

    border-radius:8px;

    font-size:16px;
    font-weight:bold;
}


/* =========================
   TABLET
========================= */

@media(max-width:900px){

    .tomorrow-hero-inner{
        grid-template-columns:1fr .55fr;

        gap:25px;
    }

    .tomorrow-moon-scene{
        transform:scale(.8);
    }

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

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

}


/* =========================
   MOBILE
========================= */

@media(max-width:650px){

    .tomorrow-hero-inner{
        min-height:auto;

        display:block;

        padding:48px 0;

        text-align:center;
    }

    .tomorrow-hero-content h1{
        font-size:30px;
    }

    .tomorrow-date-row{
        justify-content:center;
    }

    .tomorrow-hero-content > p{
        font-size:17px;
    }

    .tomorrow-hero-actions{
        justify-content:center;
    }

    .tomorrow-moon-scene{
        display:none;
    }

    .tomorrow-intro-box{
        display:block;

        padding:22px;
    }

    .tomorrow-intro-icon{
        margin-bottom:15px;
    }

    .tomorrow-zodiac-grid{
        grid-template-columns:repeat(2,1fr);

        gap:10px;
    }

    .tomorrow-zodiac-card{
        padding:15px;
    }

    .tomorrow-zodiac-icon{
        width:45px;
        height:45px;

        font-size:24px;
    }

    .tomorrow-zodiac-card h3{
        font-size:15px;
    }

    .tomorrow-preview{
        min-height:110px;

        font-size:15px;
    }

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

        gap:10px;
    }

    .tomorrow-category-card{
        padding:20px 12px;
    }

    .tomorrow-main-article{
        padding:22px 18px;
    }

    .tomorrow-related-links{
        grid-template-columns:1fr;
    }

    .tomorrow-back-inner{
        grid-template-columns:1fr;

        text-align:center;
    }

    .tomorrow-back-icon{
        margin:auto;
    }

    .tomorrow-back-inner > a{
        justify-self:center;
    }

}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:390px){

    .tomorrow-zodiac-grid{
        grid-template-columns:1fr;
    }

    .tomorrow-preview{
        min-height:auto;
    }

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

}




/* =====================================================
   ARIES TOMORROW
   /horoscope-tomorrow/aries/
===================================================== */


/* HERO */

.tomorrow-aries-hero{
    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(103,91,207,.30),
            transparent 27%
        ),
        radial-gradient(
            circle at 10% 85%,
            rgba(233,195,100,.08),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #14162e,
            #28224f
        );
}

.tomorrow-aries-symbol{
    color:#ead071;

    box-shadow:
        0 0 45px rgba(119,99,211,.16),
        0 20px 50px rgba(0,0,0,.15);
}


/* TODAY / TOMORROW SWITCH */

.tomorrow-sign-switch{
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-top:20px;
}

.tomorrow-sign-switch a{
    padding:7px 13px;

    border:1px solid rgba(255,255,255,.13);
    border-radius:7px;

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

    color:#dcd8e9;

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

    transition:.2s;
}

.tomorrow-sign-switch a:hover{
    background:rgba(255,255,255,.1);
}

.tomorrow-sign-switch a.active{
    background:#fff;
    color:#5c4fa5;
}


/* SUMMARY */

.tomorrow-summary-box{
    border-top:3px solid #7264c5;
}

.tomorrow-summary-icon{
    background:#efedff;
    color:#6559b6;
}


/* SOCIAL */

.tomorrow-social-icon{
    background:#eef1ff;
    color:#5a68ac;
}


/* ADVICE */

.tomorrow-advice-icon{
    background:#f0edff;
    color:#6657b8;
}

.tomorrow-daily-advice{
    background:#f7f5ff;

    border-right-color:#7061c2;
}


/* QUICK DETAILS */

.tomorrow-luck-section{
    border-top:3px solid #ece9fb;
}


/* =========================
   TODAY / TOMORROW COMPARISON
========================= */

.today-tomorrow-compare{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:20px;
}

.today-tomorrow-compare a{
    display:flex;
    align-items:center;

    gap:10px;

    padding:14px;

    background:#faf9fd;

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

    transition:.2s;
}

.today-tomorrow-compare a:hover{
    border-color:#cbc4ef;

    background:#f7f5ff;
}

.today-tomorrow-compare a.current-period{
    background:#f1efff;

    border-color:#d4cdf6;
}

.compare-symbol{
    width:40px;
    height:40px;

    flex:0 0 40px;

    display:grid;
    place-items:center;

    background:#eeebfe;

    border-radius:50%;

    color:#6558b6;

    font-size:20px;
}

.today-tomorrow-compare div{
    flex:1;
}

.today-tomorrow-compare small{
    display:block;

    color:var(--muted);

    font-size:9px;
}

.today-tomorrow-compare strong{
    color:var(--dark);

    font-size:16px;
}

.today-tomorrow-compare b{
    color:var(--primary);
}


/* =========================
   SIDEBAR TODAY LINK
========================= */

.tomorrow-side-card > h2{
    background:
        linear-gradient(
            135deg,
            #27214f,
            #514594
        );
}

.today-side-link{
    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:22px;
    padding:15px;

    background:#fff9e9;

    border:1px solid #eee2bf;
    border-radius:11px;
}

.today-side-link > span{
    width:40px;
    height:40px;

    flex:0 0 40px;

    display:grid;
    place-items:center;

    background:#fff1c7;

    border-radius:50%;

    color:#b57e1d;

    font-size:20px;
}

.today-side-link small{
    display:block;

    color:#8a8067;

    font-size:9px;
}

.today-side-link a{
    color:#584d96;

    font-size:15px;
    font-weight:bold;
}


/* =========================
   ABOUT ARIES
========================= */

.tomorrow-aries-about{
    padding:60px 0;

    background:#fff;
}

.tomorrow-aries-about-inner{
    max-width:900px;

    margin:auto;
    padding:30px;

    display:grid;
    grid-template-columns:100px 1fr;

    align-items:center;

    gap:25px;

    background:#faf9fd;

    border:1px solid var(--border);
    border-radius:15px;
}

.tomorrow-about-symbol{
    width:90px;
    height:90px;

    display:grid;
    place-items:center;

    background:#eeeafe;
    color:#6254af;

    border-radius:50%;

    font-size:50px;
}

.tomorrow-aries-about-inner h2{
    margin:3px 0 8px;

    color:var(--dark);

    font-size:24px;
}

.tomorrow-aries-about-inner p{
    color:#5c5969;

    font-size:13px;
}

.tomorrow-about-meta{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin:15px 0;
}

.tomorrow-about-meta span{
    padding:5px 10px;

    background:#fff;

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

    color:#676475;

    font-size:10px;
}

.tomorrow-about-meta strong{
    color:var(--dark);
}


/* OTHER SIGNS */

.tomorrow-other-signs{
    background:#f6f5fa;
}


/* =========================
   MOBILE
========================= */

@media(max-width:650px){

    .tomorrow-sign-switch{
        justify-content:center;
    }

    .today-tomorrow-compare{
        grid-template-columns:1fr;
    }

    .tomorrow-aries-about-inner{
        display:block;

        padding:22px 18px;
    }

    .tomorrow-about-symbol{
        width:70px;
        height:70px;

        margin:0 auto 17px;

        font-size:39px;
    }

    .tomorrow-aries-about-inner > div:last-child{
        text-align:center;
    }

    .tomorrow-about-meta{
        justify-content:center;
    }

}



/* =====================================================
   WEEKLY HOROSCOPE HUB
   /weekly-horoscope/
===================================================== */


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

.weekly-hero{
    position:relative;
    overflow:hidden;

    color:#fff;

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(116,79,207,.32),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 80%,
            rgba(226,178,72,.10),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #17142c,
            #302354
        );
}

.weekly-hero-inner{
    min-height:450px;

    display:grid;
    grid-template-columns:1.3fr .7fr;
    align-items:center;

    gap:50px;
}

.weekly-hero-content h1{
    max-width:750px;

    margin:8px 0;

    font-size:clamp(33px,5vw,50px);
    line-height:1.4;
}

.weekly-hero-content > p{
    max-width:680px;

    margin-top:15px;

    color:#d8d4e6;

    font-size:16px;
    line-height:2;
}


/* WEEK PERIOD */

.weekly-period{
    display:inline-flex;
    align-items:center;

    gap:10px;

    margin:8px 0 5px;
    padding:7px 12px;

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

    border:1px solid rgba(255,255,255,.1);
    border-radius:9px;
}

.weekly-calendar-icon{
    font-size:20px;
}

.weekly-period small{
    display:block;

    color:#aaa6bd;

    font-size:8px;
}

.weekly-period strong{
    display:block;

    color:#f0c96b;

    font-size:15px;
}

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

    gap:10px;

    margin-top:22px;
    padding:10px 21px;

    background:#fff;
    color:var(--primary);

    border-radius:8px;

    font-size:16px;
    font-weight:bold;

    transition:.2s;
}

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


/* =========================
   WEEK VISUAL
========================= */

.weekly-visual{
    display:flex;
    align-items:center;
    justify-content:center;
}

.weekly-orbit{
    width:275px;
    height:275px;

    position:relative;

    border:1px solid rgba(255,255,255,.13);
    border-radius:50%;
}

.weekly-orbit:before{
    content:"";

    position:absolute;

    inset:35px;

    border:1px dashed rgba(255,255,255,.11);
    border-radius:50%;
}

.weekly-center{
    position:absolute;

    width:130px;
    height:130px;

    top:72px;
    left:72px;

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

    background:
        linear-gradient(
            145deg,
            #403472,
            #2a2552
        );

    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;

    box-shadow:
        0 0 50px rgba(102,78,190,.25);
}

.weekly-center > span{
    color:#e8c35e;

    font-size:31px;
}

.weekly-center strong{
    margin-top:2px;

    font-size:16px;
}

.weekly-center small{
    margin-top:3px;

    color:#aaa5bb;

    font-size:8px;
}

.week-sign{
    position:absolute;

    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    background:#29234e;

    border:1px solid rgba(255,255,255,.11);
    border-radius:50%;

    color:#e2c369;

    font-size:19px;
}

.ws1{
    top:-19px;
    left:118px;
}

.ws2{
    top:45px;
    right:-7px;
}

.ws3{
    bottom:45px;
    right:-7px;
}

.ws4{
    bottom:-19px;
    left:118px;
}

.ws5{
    bottom:45px;
    left:-7px;
}

.ws6{
    top:45px;
    left:-7px;
}


/* =========================
   INTRO
========================= */

.weekly-intro{
    padding:20px 0 40px;
}

.weekly-intro-box{
    max-width:950px;

    margin:auto;
    padding:30px;

    display:flex;

    gap:24px;

    background:#fff;

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

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

.weekly-intro-icon{
    width:65px;
    height:65px;

    flex:0 0 65px;

    display:grid;
    place-items:center;

    background:#f0edff;
    color:#6252b5;

    border-radius:50%;

    font-size:29px;
}

.weekly-intro-box h2{
    margin:3px 0 8px;

    color:var(--dark);

    font-size:25px;
}

.weekly-intro-box p{
    margin-top:7px;

    color:#5c5969;

    font-size:17px;
}

.weekly-intro-period{
    display:inline-flex;
    align-items:center;

    gap:5px;

    margin-top:12px;
    padding:5px 12px;

    background:#f2f0ff;

    border-radius:20px;

    color:#777286;

    font-size:10px;
}

.weekly-intro-period strong{
    color:var(--primary);
}


/* =========================
   ZODIAC GRID
========================= */

.weekly-zodiac-section{
    padding:45px 0 70px;
}

.weekly-zodiac-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:16px;
}

.weekly-zodiac-card{
    padding:20px;

    background:#fff;

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

    transition:
        transform .25s,
        box-shadow .25s,
        border-color .25s;
}

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

    border-color:#c9c1ef;

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

.weekly-card-head{
    display:flex;
    align-items:center;

    gap:10px;
}

.weekly-zodiac-icon{
    width:51px;
    height:51px;

    flex:0 0 51px;

    display:grid;
    place-items:center;

    border-radius:13px;

    font-size:27px;
}

.weekly-card-meta span{
    display:block;

    color:var(--dark);

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

.weekly-card-meta small{
    display:block;

    margin-top:2px;

    color:var(--muted);

    font-size:9px;
}

.weekly-zodiac-card h3{
    margin:14px 0 7px;

    color:var(--dark);

    font-size:17px;
}

.weekly-zodiac-card > p{
    min-height:88px;

    color:#605d6c;

    font-size:16px;
    line-height:1.9;
}

.weekly-card-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-top:13px;
    padding-top:11px;

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

    color:var(--primary);

    font-size:15px;
    font-weight:bold;
}


/* =========================
   WEEKLY AREAS
========================= */

.weekly-areas{
    padding:70px 0;

    background:#fff;
}

.weekly-area-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:17px;
}

.weekly-area-card{
    padding:26px 20px;

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

    text-align:center;
}

.weekly-area-icon{
    width:56px;
    height:56px;

    margin:0 auto 13px;

    display:grid;
    place-items:center;

    border-radius:50%;

    font-size:26px;
}

.weekly-love{
    background:#fff0f3;
    color:#c95371;
}

.weekly-work{
    background:#eff4ff;
    color:#4d75b5;
}

.weekly-money{
    background:#f1f8eb;
    color:#699345;
}

.weekly-wellbeing{
    background:#eaf7f1;
    color:#47856c;
}

.weekly-area-card h3{
    color:var(--dark);

    font-size:18px;
}

.weekly-area-card p{
    margin-top:7px;

    color:var(--muted);

    font-size:13px;
}


/* =========================
   WEEK TIMELINE
========================= */

.weekly-timeline-section{
    padding:70px 0;

    background:#f7f6fa;
}

.weekly-timeline{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;

    align-items:center;

    gap:15px;

    max-width:1000px;

    margin:auto;
}

.weekly-timeline-item{
    min-height:170px;

    padding:22px;

    display:flex;
    align-items:flex-start;

    gap:13px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:14px;
}

.timeline-number{
    width:39px;
    height:39px;

    flex:0 0 39px;

    display:grid;
    place-items:center;

    background:#eeeafe;
    color:#6557b6;

    border-radius:50%;

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

.weekly-timeline-item small{
    color:var(--primary);

    font-size:9px;
}

.weekly-timeline-item h3{
    margin:2px 0 6px;

    color:var(--dark);

    font-size:17px;
}

.weekly-timeline-item p{
    color:var(--muted);

    font-size:15px;
}

.weekly-timeline-arrow{
    color:#a29dad;

    font-size:22px;
}


/* =========================
   CONTENT
========================= */

.weekly-content-section{
    background:var(--bg);
}

.weekly-main-article{
    padding:35px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:15px;
}

.weekly-main-article h2:not(:first-of-type){
    margin-top:30px;
}

.weekly-period-links{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;

    margin-top:30px;
}

.weekly-period-links a{
    min-height:75px;

    display:flex;
    align-items:center;

    gap:10px;

    padding:12px;

    background:#faf9fe;

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

    transition:.2s;
}

.weekly-period-links a:hover{
    background:#f3f0ff;
    border-color:#cbc4ef;
}

.weekly-period-links a > span{
    width:37px;
    height:37px;

    flex:0 0 37px;

    display:grid;
    place-items:center;

    background:#eeebfe;

    border-radius:8px;
}

.weekly-period-links div{
    flex:1;
}

.weekly-period-links small{
    display:block;

    color:var(--muted);

    font-size:9px;
}

.weekly-period-links strong{
    color:var(--dark);

    font-size:15px;
}

.weekly-period-links b{
    color:var(--primary);
}


/* =========================
   MONTHLY CTA
========================= */

.weekly-next-section{
    padding:50px 0;

    background:#201b45;

    color:#fff;
}

.weekly-next-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:23px;
}

.weekly-next-icon{
    width:68px;
    height:68px;

    display:grid;
    place-items:center;

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

    border-radius:50%;

    color:#e8c464;

    font-size:35px;
}

.weekly-next-inner > div:nth-child(2) > span{
    color:#dfba61;

    font-size:15px;
}

.weekly-next-inner h2{
    font-size:25px;
}

.weekly-next-inner p{
    color:#cbc8d9;

    font-size:13px;
}

.weekly-next-inner > a{
    padding:10px 18px;

    background:#fff;
    color:var(--primary);

    border-radius:8px;

    font-size:16px;
    font-weight:bold;
}


/* =========================
   TABLET
========================= */

@media(max-width:900px){

    .weekly-hero-inner{
        grid-template-columns:1fr .55fr;

        gap:25px;
    }

    .weekly-orbit{
        transform:scale(.8);
    }

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

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

    .weekly-timeline{
        grid-template-columns:1fr;
    }

    .weekly-timeline-arrow{
        display:none;
    }

    .weekly-timeline-item{
        min-height:auto;
    }

}


/* =========================
   MOBILE
========================= */

@media(max-width:650px){

    .weekly-hero-inner{
        min-height:auto;

        display:block;

        padding:48px 0;

        text-align:center;
    }

    .weekly-hero-content h1{
        font-size:30px;
    }

    .weekly-hero-content > p{
        font-size:17px;
    }

    .weekly-period{
        text-align:right;
    }

    .weekly-visual{
        display:none;
    }

    .weekly-intro-box{
        display:block;

        padding:22px;
    }

    .weekly-intro-icon{
        margin-bottom:15px;
    }

    .weekly-zodiac-grid{
        grid-template-columns:repeat(2,1fr);

        gap:10px;
    }

    .weekly-zodiac-card{
        padding:15px;
    }

    .weekly-zodiac-card h3{
        font-size:15px;
    }

    .weekly-zodiac-card > p{
        min-height:110px;

        font-size:15px;
    }

    .weekly-card-footer span{
        font-size:10px;
    }

    .weekly-area-grid{
        grid-template-columns:1fr 1fr;

        gap:10px;
    }

    .weekly-area-card{
        padding:20px 12px;
    }

    .weekly-main-article{
        padding:22px 18px;
    }

    .weekly-period-links{
        grid-template-columns:1fr;
    }

    .weekly-next-inner{
        grid-template-columns:1fr;

        text-align:center;
    }

    .weekly-next-icon{
        margin:auto;
    }

    .weekly-next-inner > a{
        justify-self:center;
    }

}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:390px){

    .weekly-zodiac-grid{
        grid-template-columns:1fr;
    }

    .weekly-zodiac-card > p{
        min-height:auto;
    }

    .weekly-area-grid{
        grid-template-columns:1fr;
    }

}





/* =====================================================
   WEEKLY ARIES
   /weekly-horoscope/aries/
===================================================== */


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

.weekly-aries-hero{
    background:
        radial-gradient(
            circle at 88% 20%,
            rgba(112,78,203,.30),
            transparent 28%
        ),
        radial-gradient(
            circle at 8% 90%,
            rgba(234,189,76,.10),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #17142e,
            #312454
        );
}

.weekly-aries-symbol{
    color:#eac867;

    box-shadow:
        0 0 50px rgba(116,87,200,.17),
        0 20px 50px rgba(0,0,0,.15);
}


/* WEEK DATE */

.weekly-sign-date{
    display:inline-flex;
    align-items:center;

    gap:9px;

    margin:7px 0 12px;
    padding:7px 12px;

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

    border:1px solid rgba(255,255,255,.10);
    border-radius:8px;
}

.weekly-sign-calendar{
    font-size:19px;
}

.weekly-sign-date small{
    display:block;

    color:#aaa6ba;

    font-size:8px;
}

.weekly-sign-date strong{
    display:block;

    color:#e8c665;

    font-size:15px;
}


/* PERIOD NAV */

.weekly-sign-period-nav{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-top:19px;
}

.weekly-sign-period-nav a{
    padding:7px 12px;

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

    border:1px solid rgba(255,255,255,.12);
    border-radius:7px;

    color:#dcd8e8;

    font-size:10px;
    font-weight:bold;

    transition:.2s;
}

.weekly-sign-period-nav a:hover{
    background:rgba(255,255,255,.1);
}

.weekly-sign-period-nav a.active{
    background:#fff;
    color:#5c4c9e;
}


/* =========================
   SUMMARY
========================= */

.weekly-summary-box{
    border-top:3px solid #6d5bbb;
}

.weekly-summary-icon{
    background:#efecff;
    color:#6553b2;
}


/* =========================
   WEEK PHASES
========================= */

.aries-week-phases{
    padding:65px 0;

    background:#fff;
}

.aries-week-phase-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:16px;
}

.aries-week-phase-card{
    position:relative;

    padding:25px;

    background:#faf9fd;

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

    transition:.25s;
}

.aries-week-phase-card:hover{
    transform:translateY(-4px);

    border-color:#cfc7ef;

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

.aries-week-phase-card.featured{
    background:
        linear-gradient(
            145deg,
            #f4f1ff,
            #faf9fd
        );

    border-color:#cec6f2;
}

.phase-top{
    display:flex;
    align-items:center;

    gap:11px;

    margin-bottom:15px;
}

.phase-number{
    width:43px;
    height:43px;

    flex:0 0 43px;

    display:grid;
    place-items:center;

    background:#eae6fb;
    color:#6655b0;

    border-radius:50%;

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

.phase-top small{
    color:var(--primary);

    font-size:9px;
}

.phase-top h3{
    margin-top:1px;

    color:var(--dark);

    font-size:18px;
}

.aries-week-phase-card > p{
    margin-top:8px;

    color:#5f5c6b;

    font-size:16px;
    line-height:1.95;
}


/* =========================
   WEEKLY CONTENT
========================= */

.weekly-sign-content{
    background:var(--bg);
}

.weekly-sign-page .prediction-section h3{
    margin:23px 0 7px;

    color:var(--dark);

    font-size:17px;
}


/* WORK TIP */

.weekly-tip-box{
    display:flex;
    align-items:flex-start;

    gap:12px;

    margin-top:20px;
    padding:15px;

    background:#f1f5ff;

    border:1px solid #dfe7f6;
    border-radius:10px;
}

.weekly-tip-box > span{
    width:39px;
    height:39px;

    flex:0 0 39px;

    display:grid;
    place-items:center;

    background:#fff;

    border-radius:50%;
}

.weekly-tip-box strong{
    display:block;

    color:#405a88;

    font-size:15px;
}

.weekly-tip-box p{
    margin-top:3px;

    color:#5e6676;

    font-size:15px;
}


/* SOCIAL */

.weekly-social-icon{
    background:#eef1ff;
    color:#596bb0;
}


/* ADVICE */

.weekly-advice-icon{
    background:#f0edff;
    color:#6755b5;
}

.weekly-daily-advice{
    background:#f7f5ff;

    border-right-color:#6b59ba;
}


/* =========================
   QUICK DETAILS
========================= */

.weekly-aries-details{
    margin-top:25px;
    padding:25px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:14px;
}

.weekly-details-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:10px;

    margin-top:17px;
}

.weekly-detail-card{
    min-height:110px;

    padding:15px 10px;

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

    background:#faf9fd;

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

    text-align:center;
}

.weekly-detail-card > span{
    margin-bottom:5px;

    font-size:23px;
}

.weekly-detail-card small{
    display:block;

    color:var(--muted);

    font-size:9px;
}

.weekly-detail-card strong{
    display:block;

    margin-top:3px;

    color:var(--dark);

    font-size:16px;
}


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

.weekly-aries-side > h2{
    background:
        linear-gradient(
            135deg,
            #29214f,
            #58469a
        );
}

.weekly-current-period-card{
    display:flex;
    align-items:center;

    gap:11px;

    margin-bottom:22px;
    padding:15px;

    background:#f1efff;

    border:1px solid #dcd6f5;
    border-radius:11px;
}

.weekly-current-period-card > span{
    width:40px;
    height:40px;

    flex:0 0 40px;

    display:grid;
    place-items:center;

    background:#fff;

    border-radius:50%;

    font-size:19px;
}

.weekly-current-period-card small{
    display:block;

    color:#777184;

    font-size:9px;
}

.weekly-current-period-card strong{
    display:block;

    margin-top:2px;

    color:#5e50a6;

    font-size:10px;
}


/* =========================
   ABOUT ARIES
========================= */

.weekly-aries-about{
    padding:60px 0;

    background:#fff;
}

.weekly-aries-about-inner{
    max-width:900px;

    margin:auto;
    padding:30px;

    display:grid;
    grid-template-columns:100px 1fr;
    align-items:center;

    gap:25px;

    background:#faf9fd;

    border:1px solid var(--border);
    border-radius:15px;
}

.weekly-about-symbol{
    width:90px;
    height:90px;

    display:grid;
    place-items:center;

    background:#eeeafe;
    color:#6252ad;

    border-radius:50%;

    font-size:50px;
}

.weekly-aries-about-inner h2{
    margin:3px 0 8px;

    color:var(--dark);

    font-size:24px;
}

.weekly-aries-about-inner p{
    color:#5c5969;

    font-size:13px;
}

.weekly-about-meta{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin:15px 0;
}

.weekly-about-meta span{
    padding:5px 10px;

    background:#fff;

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

    color:#676475;

    font-size:10px;
}

.weekly-about-meta strong{
    color:var(--dark);
}


/* =========================
   OTHER SIGNS
========================= */

.weekly-other-signs{
    background:#f6f5fa;
}


/* =========================
   NEXT MONTH CTA
========================= */

.weekly-aries-next{
    padding:50px 0;

    background:
        linear-gradient(
            135deg,
            #201a44,
            #31245a
        );

    color:#fff;
}

.weekly-aries-next-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:23px;
}

.weekly-aries-next-inner > div:nth-child(2) > span{
    color:#dfba61;

    font-size:15px;
}

.weekly-aries-next-inner h2{
    font-size:25px;
}

.weekly-aries-next-inner p{
    color:#cbc8d9;

    font-size:13px;
}

.weekly-aries-next-inner > a{
    padding:10px 18px;

    background:#fff;
    color:var(--primary);

    border-radius:8px;

    font-size:16px;
    font-weight:bold;

    transition:.2s;
}

.weekly-aries-next-inner > a:hover{
    transform:translateY(-2px);
}


/* =========================
   TABLET
========================= */

@media(max-width:900px){

    .aries-week-phase-grid{
        grid-template-columns:1fr;
    }

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

}


/* =========================
   MOBILE
========================= */

@media(max-width:650px){

    .weekly-sign-date{
        text-align:right;
    }

    .weekly-sign-period-nav{
        justify-content:center;
    }

    .aries-week-phases{
        padding:45px 0;
    }

    .aries-week-phase-card{
        padding:20px 18px;
    }

    .weekly-aries-details{
        padding:20px 15px;
    }

    .weekly-aries-about-inner{
        display:block;

        padding:22px 18px;

        text-align:center;
    }

    .weekly-about-symbol{
        width:70px;
        height:70px;

        margin:0 auto 17px;

        font-size:39px;
    }

    .weekly-about-meta{
        justify-content:center;
    }

    .weekly-aries-next-inner{
        grid-template-columns:1fr;

        text-align:center;
    }

    .weekly-aries-next-inner .weekly-next-icon{
        margin:auto;
    }

    .weekly-aries-next-inner > a{
        justify-self:center;
    }

}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:390px){

    .weekly-details-grid{
        grid-template-columns:1fr 1fr;
    }

}



/* =====================================================
   MONTHLY HOROSCOPE HUB
   /monthly-horoscope/
===================================================== */


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

.monthly-hero{
    position:relative;
    overflow:hidden;

    color:#fff;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(111,82,196,.30),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(218,177,79,.11),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #16132d,
            #332554
        );
}

.monthly-hero-inner{
    min-height:450px;

    display:grid;
    grid-template-columns:1.3fr .7fr;
    align-items:center;

    gap:50px;
}

.monthly-hero-content h1{
    max-width:760px;

    margin:8px 0;

    font-size:clamp(34px,5vw,51px);
    line-height:1.4;
}

.monthly-hero-content > p{
    max-width:680px;

    margin-top:15px;

    color:#d8d4e5;

    font-size:16px;
    line-height:2;
}


/* CURRENT MONTH */

.monthly-current-date{
    display:inline-flex;
    align-items:center;

    gap:10px;

    margin:7px 0 4px;
    padding:7px 13px;

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

    border:1px solid rgba(255,255,255,.11);
    border-radius:9px;
}

.monthly-current-date > span{
    font-size:20px;
}

.monthly-current-date small{
    display:block;

    color:#aaa6b9;

    font-size:8px;
}

.monthly-current-date strong{
    display:block;

    color:#edca70;

    font-size:16px;
}


/* BUTTON */

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

    gap:10px;

    margin-top:22px;
    padding:10px 21px;

    background:#fff;
    color:var(--primary);

    border-radius:8px;

    font-size:16px;
    font-weight:bold;

    transition:.2s;
}

.monthly-hero-button:hover{
    transform:translateY(-2px);
}


/* =========================
   MOON VISUAL
========================= */

.monthly-visual{
    display:flex;
    align-items:center;
    justify-content:center;
}

.monthly-moon{
    width:285px;
    height:285px;

    position:relative;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,255,255,.09);
    border-radius:50%;
}

.monthly-moon:before{
    content:"";

    position:absolute;

    inset:25px;

    border:1px dashed rgba(255,255,255,.11);
    border-radius:50%;
}

.monthly-moon-circle{
    width:155px;
    height:155px;

    position:relative;
    z-index:2;

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

    background:
        linear-gradient(
            145deg,
            #4d3c7c,
            #2a244d
        );

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;

    box-shadow:
        0 0 60px rgba(118,89,202,.3);
}

.monthly-moon-circle > span{
    color:#ebc967;

    font-size:44px;
}

.monthly-moon-circle strong{
    margin-top:3px;

    font-size:13px;
}

.monthly-moon-circle small{
    color:#aaa5ba;

    font-size:8px;
}


/* STARS */

.monthly-star{
    position:absolute;

    color:#e9ca70;
}

.ms1{
    top:15px;
    right:52px;
}

.ms2{
    top:75px;
    left:15px;

    font-size:20px;
}

.ms3{
    right:5px;
    bottom:75px;

    font-size:16px;
}

.ms4{
    bottom:12px;
    left:80px;
}

.ms5{
    top:38px;
    left:90px;

    font-size:9px;
}


/* =========================
   INTRO
========================= */

.monthly-intro{
    padding:20px 0 45px;
}

.monthly-intro-box{
    max-width:950px;

    margin:auto;
    padding:30px;

    display:flex;
    gap:24px;

    background:#fff;

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

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

.monthly-intro-symbol{
    width:68px;
    height:68px;

    flex:0 0 68px;

    display:grid;
    place-items:center;

    background:#f0edff;
    color:#6352b1;

    border-radius:50%;

    font-size:34px;
}

.monthly-intro-box h2{
    margin:3px 0 8px;

    color:var(--dark);

    font-size:25px;
}

.monthly-intro-box p{
    margin-top:7px;

    color:#5e5b69;

    font-size:17px;
}

.monthly-intro-date{
    display:inline-flex;
    align-items:center;

    gap:5px;

    margin-top:12px;
    padding:5px 12px;

    background:#f1efff;

    border-radius:20px;

    color:#777182;

    font-size:10px;
}

.monthly-intro-date strong{
    color:var(--primary);
}


/* =========================
   ZODIAC GRID
========================= */

.monthly-zodiac-section{
    padding:45px 0 70px;
}

.monthly-zodiac-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:16px;
}

.monthly-zodiac-card{
    position:relative;

    padding:21px;

    background:#fff;

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

    transition:
        transform .25s,
        box-shadow .25s,
        border-color .25s;
}

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

    border-color:#c9c1ec;

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

.monthly-zodiac-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.monthly-zodiac-icon{
    width:53px;
    height:53px;

    display:grid;
    place-items:center;

    border-radius:14px;

    font-size:28px;
}

.monthly-element{
    padding:4px 9px;

    background:#f7f6fa;

    border-radius:20px;

    color:#706c79;

    font-size:9px;
}

.monthly-zodiac-card h3{
    margin:14px 0 2px;

    color:var(--dark);

    font-size:17px;
}

.monthly-zodiac-card > small{
    color:var(--muted);

    font-size:9px;
}

.monthly-zodiac-card > p{
    min-height:90px;

    margin-top:9px;

    color:#605d6b;

    font-size:16px;
    line-height:1.9;
}

.monthly-read-more{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-top:13px;
    padding-top:11px;

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

    color:var(--primary);

    font-size:15px;
    font-weight:bold;
}


/* =========================
   MONTH PHASES
========================= */

.monthly-phases-section{
    padding:70px 0;

    background:#fff;
}

.monthly-phase-grid{
    max-width:1000px;

    margin:auto;

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

    gap:16px;
}

.monthly-phase-card{
    padding:25px;

    display:flex;
    align-items:flex-start;

    gap:13px;

    background:#faf9fd;

    border:1px solid var(--border);
    border-radius:14px;
}

.monthly-phase-card.featured{
    background:#f4f1ff;

    border-color:#d2caf2;
}

.monthly-phase-number{
    width:43px;
    height:43px;

    flex:0 0 43px;

    display:grid;
    place-items:center;

    background:#eae6fb;
    color:#6554af;

    border-radius:50%;

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

.monthly-phase-card small{
    color:var(--primary);

    font-size:9px;
}

.monthly-phase-card h3{
    margin:2px 0 7px;

    color:var(--dark);

    font-size:18px;
}

.monthly-phase-card p{
    color:var(--muted);

    font-size:16px;
}


/* =========================
   AREAS
========================= */

.monthly-areas-section{
    padding:70px 0;

    background:#f7f6fa;
}

.monthly-area-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:16px;
}

.monthly-area-card{
    padding:26px 19px;

    background:#fff;

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

    text-align:center;
}

.monthly-area-icon{
    width:57px;
    height:57px;

    margin:0 auto 13px;

    display:grid;
    place-items:center;

    border-radius:50%;

    font-size:26px;
}

.monthly-love-icon{
    background:#fff0f3;
    color:#c45472;
}

.monthly-work-icon{
    background:#eef3ff;
    color:#5275b0;
}

.monthly-money-icon{
    background:#f0f7e9;
    color:#6c9449;
}

.monthly-health-icon{
    background:#eaf7f1;
    color:#49876e;
}

.monthly-area-card h3{
    color:var(--dark);

    font-size:18px;
}

.monthly-area-card p{
    margin-top:7px;

    color:var(--muted);

    font-size:16px;
}


/* =========================
   CONTENT
========================= */

.monthly-content-section{
    background:var(--bg);
}

.monthly-main-article{
    padding:35px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:15px;
}

.monthly-main-article h2:not(:first-of-type){
    margin-top:30px;
}

.monthly-navigation-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;

    margin-top:30px;
}

.monthly-navigation-cards a{
    display:flex;
    align-items:center;

    gap:10px;

    padding:13px;

    background:#faf9fd;

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

    transition:.2s;
}

.monthly-navigation-cards a:hover{
    background:#f2efff;

    border-color:#cdc5ef;
}

.monthly-navigation-cards a > span{
    width:39px;
    height:39px;

    flex:0 0 39px;

    display:grid;
    place-items:center;

    background:#eeebfd;

    border-radius:9px;
}

.monthly-navigation-cards div{
    flex:1;
}

.monthly-navigation-cards small{
    display:block;

    color:var(--muted);

    font-size:9px;
}

.monthly-navigation-cards strong{
    color:var(--dark);

    font-size:15px;
}

.monthly-navigation-cards b{
    color:var(--primary);
}


/* SIDE MONTH */

.monthly-side-month{
    display:flex;
    align-items:center;

    gap:11px;

    margin-bottom:22px;
    padding:15px;

    background:#f1efff;

    border:1px solid #ddd7f4;
    border-radius:11px;
}

.monthly-side-month > span{
    width:40px;
    height:40px;

    flex:0 0 40px;

    display:grid;
    place-items:center;

    background:#fff;

    border-radius:50%;

    color:#6654af;

    font-size:22px;
}

.monthly-side-month small{
    display:block;

    color:#777183;

    font-size:9px;
}

.monthly-side-month strong{
    display:block;

    color:#5e4fa3;

    font-size:15px;
}


/* =========================
   NEXT CTA
========================= */

.monthly-next-section{
    padding:50px 0;

    background:
        linear-gradient(
            135deg,
            #211b45,
            #33265c
        );

    color:#fff;
}

.monthly-next-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:23px;
}

.monthly-next-symbol{
    width:68px;
    height:68px;

    display:grid;
    place-items:center;

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

    border-radius:50%;

    color:#e9c666;

    font-size:32px;
}

.monthly-next-inner > div:nth-child(2) > span{
    color:#dfba61;

    font-size:15px;
}

.monthly-next-inner h2{
    font-size:25px;
}

.monthly-next-inner p{
    color:#cbc8d9;

    font-size:13px;
}

.monthly-next-inner > a{
    padding:10px 18px;

    background:#fff;
    color:var(--primary);

    border-radius:8px;

    font-size:16px;
    font-weight:bold;

    transition:.2s;
}

.monthly-next-inner > a:hover{
    transform:translateY(-2px);
}


/* =========================
   TABLET
========================= */

@media(max-width:900px){

    .monthly-hero-inner{
        grid-template-columns:1fr .55fr;

        gap:25px;
    }

    .monthly-moon{
        transform:scale(.8);
    }

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

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

    .monthly-phase-grid{
        grid-template-columns:1fr;
    }

}


/* =========================
   MOBILE
========================= */

@media(max-width:650px){

    .monthly-hero-inner{
        min-height:auto;

        display:block;

        padding:48px 0;

        text-align:center;
    }

    .monthly-hero-content h1{
        font-size:30px;
    }

    .monthly-hero-content > p{
        font-size:17px;
    }

    .monthly-current-date{
        text-align:right;
    }

    .monthly-visual{
        display:none;
    }

    .monthly-intro-box{
        display:block;

        padding:22px;
    }

    .monthly-intro-symbol{
        margin-bottom:15px;
    }

    .monthly-zodiac-grid{
        grid-template-columns:repeat(2,1fr);

        gap:10px;
    }

    .monthly-zodiac-card{
        padding:15px;
    }

    .monthly-zodiac-card h3{
        font-size:15px;
    }

    .monthly-zodiac-card > p{
        min-height:115px;

        font-size:15px;
    }

    .monthly-area-grid{
        grid-template-columns:1fr 1fr;

        gap:10px;
    }

    .monthly-main-article{
        padding:22px 18px;
    }

    .monthly-navigation-cards{
        grid-template-columns:1fr;
    }

    .monthly-next-inner{
        grid-template-columns:1fr;

        text-align:center;
    }

    .monthly-next-symbol{
        margin:auto;
    }

    .monthly-next-inner > a{
        justify-self:center;
    }

}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:390px){

    .monthly-zodiac-grid{
        grid-template-columns:1fr;
    }

    .monthly-zodiac-card > p{
        min-height:auto;
    }

    .monthly-area-grid{
        grid-template-columns:1fr;
    }

}



/* =====================================================
   MONTHLY ARIES
   /monthly-horoscope/aries/
===================================================== */


/* HERO */

.monthly-aries-hero{
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(114,83,201,.32),
            transparent 28%
        ),
        radial-gradient(
            circle at 8% 85%,
            rgba(228,186,76,.11),
            transparent 26%
        ),
        linear-gradient(
            135deg,
            #17132f,
            #38275d
        );
}

.monthly-aries-symbol{
    color:#ebca6e;

    box-shadow:
        0 0 55px rgba(111,82,198,.20),
        0 20px 50px rgba(0,0,0,.15);
}


/* CURRENT MONTH */

.monthly-sign-date{
    display:inline-flex;
    align-items:center;

    gap:9px;

    margin:7px 0 12px;
    padding:7px 12px;

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

    border:1px solid rgba(255,255,255,.11);
    border-radius:8px;
}

.monthly-sign-date > span{
    font-size:19px;
}

.monthly-sign-date small{
    display:block;

    color:#aaa6b9;

    font-size:8px;
}

.monthly-sign-date strong{
    display:block;

    color:#ebc969;

    font-size:15px;
}


/* PERIOD NAV */

.monthly-sign-period-nav{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-top:19px;
}

.monthly-sign-period-nav a{
    padding:7px 12px;

    background:rgba(255,255,255,.05);
    color:#dcd8e8;

    border:1px solid rgba(255,255,255,.12);
    border-radius:7px;

    font-size:10px;
    font-weight:bold;

    transition:.2s;
}

.monthly-sign-period-nav a:hover{
    background:rgba(255,255,255,.10);
}

.monthly-sign-period-nav a.active{
    background:#fff;
    color:#5f4da4;
}


/* SUMMARY */

.monthly-summary-box{
    border-top:3px solid #6956b6;
}

.monthly-summary-icon{
    background:#efecff;
    color:#6350ad;
}


/* =====================================================
   MONTH TIMELINE
===================================================== */

.aries-month-timeline{
    padding:70px 0;

    background:#fff;
}

.month-timeline{
    position:relative;

    max-width:900px;

    margin:10px auto 0;
}

.month-timeline:before{
    content:"";

    position:absolute;

    top:30px;
    bottom:30px;
    right:28px;

    width:2px;

    background:#e2def1;
}

.month-timeline-item{
    position:relative;

    display:grid;
    grid-template-columns:58px 1fr;

    gap:20px;

    margin-bottom:18px;
}

.month-timeline-marker{
    width:58px;
    height:58px;

    position:relative;
    z-index:2;

    display:grid;
    place-items:center;

    background:#eeeafd;
    color:#6250ac;

    border:6px solid #fff;
    border-radius:50%;

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

.month-timeline-content{
    padding:23px 25px;

    background:#faf9fd;

    border:1px solid var(--border);
    border-radius:14px;
}

.month-timeline-item.featured
.month-timeline-content{
    background:
        linear-gradient(
            135deg,
            #f5f2ff,
            #faf9fd
        );

    border-color:#d3cbf2;
}

.month-phase-label{
    color:var(--primary);

    font-size:9px;
    font-weight:bold;
}

.month-timeline-content h3{
    margin:2px 0 9px;

    color:var(--dark);

    font-size:20px;
}

.month-timeline-content p{
    margin-top:7px;

    color:#5e5b69;

    font-size:16px;
    line-height:1.95;
}


/* =====================================================
   MONTHLY CONTENT
===================================================== */

.monthly-sign-content{
    background:var(--bg);
}


/* MONTHLY TIP */

.monthly-tip-box{
    display:flex;
    align-items:flex-start;

    gap:12px;

    margin-top:20px;
    padding:16px;

    background:#f1f4ff;

    border:1px solid #dfe5f5;
    border-radius:10px;
}

.monthly-tip-box > span{
    width:40px;
    height:40px;

    flex:0 0 40px;

    display:grid;
    place-items:center;

    background:#fff;

    border-radius:50%;
}

.monthly-tip-box strong{
    display:block;

    color:#435d8b;

    font-size:15px;
}

.monthly-tip-box p{
    margin-top:3px;

    color:#626979;

    font-size:15px;
}


/* EXTRA ICONS */

.monthly-career-icon{
    background:#edf2ff;
    color:#5570a8;
}

.monthly-family-icon{
    background:#fff4e8;
    color:#a8763d;
}

.monthly-goals-icon{
    background:#f0edff;
    color:#6753b3;
}

.monthly-advice-icon{
    background:#eeeaff;
    color:#6652b2;
}


/* =====================================================
   GOALS
===================================================== */

.monthly-goals-list{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:18px;
}

.monthly-goals-list > div{
    display:flex;
    align-items:flex-start;

    gap:10px;

    padding:14px;

    background:#faf9fd;

    border:1px solid var(--border);
    border-radius:9px;
}

.monthly-goals-list span{
    width:30px;
    height:30px;

    flex:0 0 30px;

    display:grid;
    place-items:center;

    background:#ece8fc;
    color:#6653b0;

    border-radius:50%;

    font-size:8px;
    font-weight:bold;
}

.monthly-goals-list p{
    margin:0;

    font-size:15px;
}


/* =====================================================
   ADVICE
===================================================== */

.monthly-advice{
    background:#f6f4ff;

    border-right-color:#6855b5;
}


/* =====================================================
   QUICK GUIDE
===================================================== */

.monthly-aries-guide{
    margin-top:25px;
    padding:25px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:14px;
}

.monthly-guide-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;

    margin-top:17px;
}

.monthly-guide-card{
    min-height:105px;

    padding:14px 10px;

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

    background:#faf9fd;

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

    text-align:center;
}

.monthly-guide-card > span{
    margin-bottom:5px;

    font-size:22px;
}

.monthly-guide-card small{
    display:block;

    color:var(--muted);

    font-size:9px;
}

.monthly-guide-card strong{
    margin-top:3px;

    color:var(--dark);

    font-size:16px;
}


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

.monthly-aries-side > h2{
    background:
        linear-gradient(
            135deg,
            #29214f,
            #5b489d
        );
}

.monthly-current-period-card{
    display:flex;
    align-items:center;

    gap:11px;

    margin-bottom:22px;
    padding:15px;

    background:#f1efff;

    border:1px solid #dcd6f4;
    border-radius:11px;
}

.monthly-current-period-card > span{
    width:40px;
    height:40px;

    flex:0 0 40px;

    display:grid;
    place-items:center;

    background:#fff;

    border-radius:50%;

    font-size:19px;
}

.monthly-current-period-card small{
    display:block;

    color:#777183;

    font-size:9px;
}

.monthly-current-period-card strong{
    display:block;

    margin-top:2px;

    color:#5d4da3;

    font-size:10px;
}


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

.monthly-aries-about{
    padding:60px 0;

    background:#fff;
}


/* =====================================================
   OTHER SIGNS
===================================================== */

.monthly-other-signs{
    background:#f6f5fa;
}


/* =====================================================
   2027 CTA
===================================================== */

.monthly-aries-next{
    padding:50px 0;

    background:
        linear-gradient(
            135deg,
            #201943,
            #35275e
        );

    color:#fff;
}

.monthly-aries-next-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:23px;
}

.monthly-next-icon{
    width:67px;
    height:67px;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.07);
    color:#eac768;

    border-radius:50%;

    font-size:30px;
}

.monthly-aries-next-inner > div:nth-child(2) > span{
    color:#dfba61;

    font-size:15px;
}

.monthly-aries-next-inner h2{
    font-size:25px;
}

.monthly-aries-next-inner p{
    color:#cbc8d9;

    font-size:13px;
}

.monthly-aries-next-inner > a{
    padding:10px 18px;

    background:#fff;
    color:var(--primary);

    border-radius:8px;

    font-size:16px;
    font-weight:bold;

    transition:.2s;
}

.monthly-aries-next-inner > a:hover{
    transform:translateY(-2px);
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:900px){

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

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

    .monthly-sign-period-nav{
        justify-content:center;
    }

    .aries-month-timeline{
        padding:45px 0;
    }

    .month-timeline:before{
        right:21px;
    }

    .month-timeline-item{
        grid-template-columns:44px 1fr;

        gap:10px;
    }

    .month-timeline-marker{
        width:44px;
        height:44px;

        border-width:4px;
    }

    .month-timeline-content{
        padding:18px 16px;
    }

    .month-timeline-content h3{
        font-size:17px;
    }

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

    .monthly-aries-guide{
        padding:20px 15px;
    }

    .monthly-aries-next-inner{
        grid-template-columns:1fr;

        text-align:center;
    }

    .monthly-next-icon{
        margin:auto;
    }

    .monthly-aries-next-inner > a{
        justify-self:center;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:390px){

    .monthly-guide-grid{
        grid-template-columns:1fr 1fr;
    }

}



/* =====================================================
   HOROSCOPE 2027 HUB
   /horoscope-2027/
===================================================== */


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

.year-hero{
    position:relative;
    overflow:hidden;

    color:#fff;

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(118,86,208,.34),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 85%,
            rgba(224,181,71,.13),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #14112a,
            #332352
        );
}

.year-hero-inner{
    min-height:500px;

    display:grid;
    grid-template-columns:1.25fr .75fr;
    align-items:center;

    gap:45px;
}

.year-label{
    display:inline-block;

    margin-bottom:7px;

    color:#e9c66a;

    font-size:15px;
    font-weight:bold;
}

.year-hero-content h1{
    max-width:760px;

    font-size:clamp(36px,5vw,55px);
    line-height:1.35;
}

.year-hero-lead{
    max-width:700px;

    margin-top:16px;

    color:#d4d0df;

    font-size:16px;
    line-height:2;
}


/* HERO FEATURES */

.year-hero-features{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-top:19px;
}

.year-hero-features span{
    padding:6px 12px;

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

    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;

    color:#ddd9e8;

    font-size:10px;
}


/* HERO BUTTON */

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

    gap:10px;

    margin-top:23px;
    padding:11px 21px;

    background:#fff;
    color:#5c499e;

    border-radius:8px;

    font-size:16px;
    font-weight:bold;

    transition:.2s;
}

.year-hero-button:hover{
    transform:translateY(-2px);
}


/* =========================
   YEAR VISUAL
========================= */

.year-visual{
    width:310px;
    height:310px;

    position:relative;

    margin:auto;

    display:grid;
    place-items:center;
}

.year-orbit{
    position:absolute;

    border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
}

.year-orbit-one{
    width:300px;
    height:300px;
}

.year-orbit-two{
    width:225px;
    height:225px;

    border-style:dashed;
}

.year-circle{
    width:155px;
    height:155px;

    position:relative;
    z-index:2;

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

    background:
        linear-gradient(
            145deg,
            #554181,
            #292047
        );

    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;

    box-shadow:
        0 0 70px rgba(121,88,210,.3);
}

.year-circle small{
    color:#b8b2c5;

    font-size:9px;
}

.year-circle strong{
    color:#fff;

    font-size:42px;
    line-height:1.2;
}

.year-circle span{
    color:#eac769;

    font-size:17px;
}


/* ZODIAC AROUND ORBIT */

.year-zodiac{
    width:38px;
    height:38px;

    position:absolute;
    z-index:3;

    display:grid;
    place-items:center;

    background:#2c244a;

    border:1px solid rgba(255,255,255,.11);
    border-radius:50%;

    color:#e7c568;

    font-size:20px;
}

.yz1{
    top:-4px;
    left:136px;
}

.yz2{
    right:-4px;
    top:136px;
}

.yz3{
    bottom:-4px;
    left:136px;
}

.yz4{
    left:-4px;
    top:136px;
}


/* STARS */

.year-star{
    position:absolute;

    color:#e7c76f;
}

.ys1{
    top:45px;
    right:52px;
}

.ys2{
    bottom:50px;
    right:65px;

    font-size:18px;
}

.ys3{
    top:70px;
    left:45px;

    font-size:15px;
}


/* =========================
   INTRO
========================= */

.year-intro{
    padding:25px 0 50px;
}

.year-intro-box{
    max-width:960px;

    margin:auto;
    padding:30px;

    display:flex;
    align-items:flex-start;

    gap:23px;

    background:#fff;

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

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

.year-intro-icon{
    width:72px;
    height:72px;

    flex:0 0 72px;

    display:grid;
    place-items:center;

    background:#efecff;
    color:#6451ae;

    border-radius:50%;

    font-size:17px;
    font-weight:bold;
}

.year-intro-box h2{
    margin:3px 0 8px;

    color:var(--dark);

    font-size:25px;
}

.year-intro-box p{
    margin-top:7px;

    color:#5d5969;

    font-size:13px;
    line-height:1.95;
}


/* =========================
   ZODIAC GRID
========================= */

.year-zodiac-section{
    padding:45px 0 75px;
}

.year-zodiac-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:16px;
}

.year-zodiac-card{
    position:relative;
    overflow:hidden;

    padding:22px;

    background:#fff;

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

    transition:.25s;
}

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

    border-color:#c9c0ec;

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

.year-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.year-sign-icon{
    width:54px;
    height:54px;

    display:grid;
    place-items:center;

    border-radius:14px;

    font-size:29px;
}

.year-element{
    padding:4px 9px;

    background:#f7f6fa;

    border-radius:20px;

    color:#706b79;

    font-size:9px;
}

.year-card-number{
    position:absolute;

    top:70px;
    left:16px;

    color:#eeecf5;

    font-size:38px;
    font-weight:bold;
}

.year-zodiac-card h3{
    position:relative;
    z-index:2;

    margin:15px 0 2px;

    color:var(--dark);

    font-size:18px;
}

.year-zodiac-card > small{
    color:var(--muted);

    font-size:9px;
}

.year-zodiac-card > p{
    min-height:92px;

    margin-top:10px;

    color:#605c6a;

    font-size:16px;
    line-height:1.9;
}

.year-card-link{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-top:13px;
    padding-top:11px;

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

    color:var(--primary);

    font-size:15px;
    font-weight:bold;
}


/* =========================
   AREAS
========================= */

.year-areas{
    padding:70px 0;

    background:#fff;
}

.year-area-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:16px;
}

.year-area-card{
    padding:27px 20px;

    background:#faf9fd;

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

    text-align:center;
}

.year-area-icon{
    width:60px;
    height:60px;

    margin:0 auto 14px;

    display:grid;
    place-items:center;

    border-radius:50%;

    font-size:27px;
}

.year-love{
    background:#fff0f3;
    color:#c35573;
}

.year-work{
    background:#eef3ff;
    color:#5574ad;
}

.year-money{
    background:#f0f7e9;
    color:#6c9449;
}

.year-health{
    background:#eaf7f1;
    color:#49866e;
}

.year-area-card h3{
    color:var(--dark);

    font-size:18px;
}

.year-area-card p{
    margin-top:7px;

    color:var(--muted);

    font-size:16px;
    line-height:1.85;
}


/* =========================
   YEAR QUARTERS
========================= */

.year-quarters{
    padding:70px 0;

    background:#f7f6fa;
}

.year-quarter-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:15px;
}

.year-quarter-card{
    padding:23px;

    background:#fff;

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

    transition:.2s;
}

.year-quarter-card:hover{
    transform:translateY(-3px);

    border-color:#d0c8ef;
}

.quarter-number{
    width:43px;
    height:43px;

    margin-bottom:13px;

    display:grid;
    place-items:center;

    background:#ece8fc;
    color:#6552ae;

    border-radius:50%;

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

.year-quarter-card small{
    color:var(--primary);

    font-size:9px;
}

.year-quarter-card h3{
    margin:3px 0 8px;

    color:var(--dark);

    font-size:18px;
}

.year-quarter-card p{
    color:var(--muted);

    font-size:16px;
    line-height:1.85;
}


/* =========================
   EDITORIAL
========================= */

.year-content-section{
    background:var(--bg);
}

.year-main-article{
    padding:35px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:15px;
}

.year-main-article h2:not(:first-of-type){
    margin-top:31px;
}

.year-inline-link{
    display:inline-block;

    margin:13px 0 5px;

    color:var(--primary);

    font-size:16px;
    font-weight:bold;
}


/* NAVIGATION CARDS */

.year-navigation-cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;

    margin-top:28px;
}

.year-navigation-cards a{
    display:flex;
    align-items:center;

    gap:10px;

    padding:13px;

    background:#faf9fd;

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

    transition:.2s;
}

.year-navigation-cards a:hover{
    background:#f2efff;

    border-color:#cec5ef;
}

.year-navigation-cards a > span{
    width:39px;
    height:39px;

    flex:0 0 39px;

    display:grid;
    place-items:center;

    background:#eeeafd;

    border-radius:9px;
}

.year-navigation-cards div{
    flex:1;
}

.year-navigation-cards small{
    display:block;

    color:var(--muted);

    font-size:9px;
}

.year-navigation-cards strong{
    color:var(--dark);

    font-size:15px;
}

.year-navigation-cards b{
    color:var(--primary);
}


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

.year-sidebar-highlight{
    display:flex;
    align-items:center;

    gap:11px;

    margin-bottom:22px;
    padding:15px;

    background:#f1efff;

    border:1px solid #ddd6f4;
    border-radius:11px;
}

.year-sidebar-highlight > span{
    width:42px;
    height:42px;

    flex:0 0 42px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#6653af;

    border-radius:50%;

    font-size:21px;
}

.year-sidebar-highlight small{
    display:block;

    color:#777183;

    font-size:9px;
}

.year-sidebar-highlight strong{
    display:block;

    margin-top:2px;

    color:#5d4ca3;

    font-size:16px;
}


/* =========================
   FINAL CTA
========================= */

.year-final-cta{
    padding:55px 0;

    background:
        linear-gradient(
            135deg,
            #201943,
            #37275f
        );

    color:#fff;
}

.year-final-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:25px;
}

.year-final-number{
    width:82px;
    height:82px;

    display:grid;
    place-items:center;

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

    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;

    color:#eac86c;

    font-size:20px;
    font-weight:bold;
}

.year-final-inner > div:nth-child(2) > span{
    color:#dfba61;

    font-size:15px;
}

.year-final-inner h2{
    font-size:26px;
}

.year-final-inner p{
    margin-top:3px;

    color:#cbc8d9;

    font-size:13px;
}

.year-final-inner > a{
    padding:10px 18px;

    background:#fff;
    color:var(--primary);

    border-radius:8px;

    font-size:16px;
    font-weight:bold;

    transition:.2s;
}

.year-final-inner > a:hover{
    transform:translateY(-2px);
}


/* =========================
   TABLET
========================= */

@media(max-width:900px){

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

    .year-visual{
        transform:scale(.8);
    }

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

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

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

}


/* =========================
   MOBILE
========================= */

@media(max-width:650px){

    .year-hero-inner{
        min-height:auto;

        display:block;

        padding:50px 0;

        text-align:center;
    }

    .year-hero-content h1{
        font-size:30px;
    }

    .year-hero-lead{
        font-size:17px;
    }

    .year-hero-features{
        justify-content:center;
    }

    .year-visual{
        display:none;
    }

    .year-intro-box{
        display:block;

        padding:22px 19px;
    }

    .year-intro-icon{
        margin-bottom:15px;
    }

    .year-zodiac-grid{
        grid-template-columns:repeat(2,1fr);

        gap:10px;
    }

    .year-zodiac-card{
        padding:16px;
    }

    .year-zodiac-card h3{
        font-size:15px;
    }

    .year-zodiac-card > p{
        min-height:125px;

        font-size:15px;
    }

    .year-area-grid{
        grid-template-columns:1fr 1fr;

        gap:10px;
    }

    .year-quarter-grid{
        grid-template-columns:1fr;
    }

    .year-main-article{
        padding:22px 18px;
    }

    .year-navigation-cards{
        grid-template-columns:1fr;
    }

    .year-final-inner{
        grid-template-columns:1fr;

        text-align:center;
    }

    .year-final-number{
        margin:auto;
    }

    .year-final-inner > a{
        justify-self:center;
    }

}


/* =========================
   SMALL MOBILE
========================= */

@media(max-width:390px){

    .year-zodiac-grid{
        grid-template-columns:1fr;
    }

    .year-zodiac-card > p{
        min-height:auto;
    }

    .year-area-grid{
        grid-template-columns:1fr;
    }

}


/* =====================================================
   ARIES 2027
   /horoscope-2027/aries/
===================================================== */


/* HERO */

.yearly-aries-hero{
    background:
        radial-gradient(
            circle at 87% 18%,
            rgba(128,90,214,.32),
            transparent 28%
        ),
        radial-gradient(
            circle at 8% 88%,
            rgba(229,187,75,.12),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #15122c,
            #3b285f
        );
}

.yearly-aries-symbol{
    color:#ebca6d;

    box-shadow:
        0 0 55px rgba(113,79,202,.22),
        0 20px 50px rgba(0,0,0,.16);
}


/* YEAR BADGE */

.yearly-date-badge{
    display:inline-flex;
    align-items:center;

    gap:9px;

    margin:7px 0 12px;
    padding:7px 13px;

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

    border:1px solid rgba(255,255,255,.11);
    border-radius:8px;
}

.yearly-date-badge > span{
    color:#ebc969;

    font-size:19px;
}

.yearly-date-badge small{
    display:block;

    color:#aaa6b9;

    font-size:8px;
}

.yearly-date-badge strong{
    display:block;

    color:#ebc969;

    font-size:15px;
}


/* PERIOD NAV */

.yearly-sign-period-nav{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-top:19px;
}

.yearly-sign-period-nav a{
    padding:7px 12px;

    background:rgba(255,255,255,.05);
    color:#dcd8e8;

    border:1px solid rgba(255,255,255,.12);
    border-radius:7px;

    font-size:10px;
    font-weight:bold;

    transition:.2s;
}

.yearly-sign-period-nav a:hover{
    background:rgba(255,255,255,.1);
}

.yearly-sign-period-nav a.active{
    background:#fff;
    color:#5e4ba3;
}


/* SUMMARY */

.yearly-summary-section{
    padding-bottom:55px;
}

.yearly-summary-box{
    border-top:3px solid #6753b4;
}

.yearly-summary-icon{
    background:#efecff;
    color:#6250aa;

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


/* =====================================================
   YEAR ROADMAP
===================================================== */

.aries-year-roadmap{
    padding:70px 0;

    background:#fff;
}

.year-roadmap-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:14px;
}

.year-roadmap-card{
    position:relative;

    padding:23px;

    background:#faf9fd;

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

    transition:.25s;
}

.year-roadmap-card:hover{
    transform:translateY(-4px);

    border-color:#cec5ee;
}

.year-roadmap-card.featured{
    background:
        linear-gradient(
            145deg,
            #f2efff,
            #faf9fd
        );

    border-color:#d1c8f0;
}

.roadmap-top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:15px;
}

.roadmap-number{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    background:#ece8fc;
    color:#6451ad;

    border-radius:50%;

    font-size:9px;
    font-weight:bold;
}

.roadmap-top small{
    color:var(--primary);

    font-size:9px;
    font-weight:bold;
}

.year-roadmap-card h3{
    margin-bottom:8px;

    color:var(--dark);

    font-size:18px;
}

.year-roadmap-card p{
    margin-top:7px;

    color:#605c69;

    font-size:15px;
    line-height:1.9;
}


/* =====================================================
   YEAR CONTENT
===================================================== */

.yearly-sign-content{
    background:var(--bg);
}


/* SECTION TIPS */

.yearly-section-tip{
    display:flex;
    align-items:flex-start;

    gap:12px;

    margin-top:20px;
    padding:16px;

    background:#fff2f5;

    border:1px solid #f2dfe4;
    border-radius:10px;
}

.yearly-section-tip > span{
    width:40px;
    height:40px;

    flex:0 0 40px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#bd5d76;

    border-radius:50%;

    font-size:19px;
}

.yearly-section-tip strong{
    display:block;

    color:#9c4f64;

    font-size:15px;
}

.yearly-section-tip p{
    margin-top:3px;

    color:#6b6064;

    font-size:15px;
}

.yearly-section-tip.work-tip{
    background:#eff3ff;

    border-color:#dce4f5;
}

.yearly-section-tip.work-tip > span{
    color:#5874ab;
}

.yearly-section-tip.work-tip strong{
    color:#4e6591;
}


/* EXTRA ICONS */

.yearly-career-icon{
    background:#eef2ff;
    color:#5871a5;
}

.yearly-family-icon{
    background:#fff4e8;
    color:#a8773e;
}

.yearly-growth-icon{
    background:#efecff;
    color:#6552af;
}

.yearly-advice-icon{
    background:#efecff;
    color:#6652b0;
}


/* =====================================================
   GROWTH LIST
===================================================== */

.yearly-growth-list{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:19px;
}

.yearly-growth-list > div{
    display:flex;
    align-items:flex-start;

    gap:10px;

    padding:14px;

    background:#faf9fd;

    border:1px solid var(--border);
    border-radius:9px;
}

.yearly-growth-list span{
    width:30px;
    height:30px;

    flex:0 0 30px;

    display:grid;
    place-items:center;

    background:#ece8fc;
    color:#6451ae;

    border-radius:50%;

    font-size:8px;
    font-weight:bold;
}

.yearly-growth-list p{
    margin:0;

    font-size:15px;
}


/* =====================================================
   MONTH BY MONTH
===================================================== */

.aries-2027-months{
    margin-top:27px;
    padding:27px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:15px;
}

.aries-month-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:20px;
}

.aries-month-card{
    display:flex;
    align-items:flex-start;

    gap:12px;

    padding:15px;

    background:#faf9fd;

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

    transition:.2s;
}

.aries-month-card:hover{
    background:#f6f3ff;

    border-color:#d5cdf0;
}

.month-number{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:grid;
    place-items:center;

    background:#ece8fc;
    color:#6653b0;

    border-radius:50%;

    font-size:9px;
    font-weight:bold;
}

.aries-month-card small{
    color:var(--primary);

    font-size:8px;
    font-weight:bold;
}

.aries-month-card h3{
    margin:1px 0 3px;

    color:var(--dark);

    font-size:13px;
}

.aries-month-card p{
    margin:0;

    color:#65616e;

    font-size:10px;
    line-height:1.75;
}


/* =====================================================
   YEAR ADVICE
===================================================== */

.yearly-advice{
    background:#f5f2ff;

    border-right-color:#6854b5;
}


/* =====================================================
   YEAR QUICK GUIDE
===================================================== */

.aries-year-guide{
    margin-top:27px;
    padding:27px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:15px;
}

.year-guide-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;

    margin-top:18px;
}

.year-guide-card{
    min-height:105px;

    padding:14px 10px;

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

    background:#faf9fd;

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

    text-align:center;
}

.year-guide-card > span{
    margin-bottom:5px;

    font-size:22px;
}

.year-guide-card small{
    display:block;

    color:var(--muted);

    font-size:9px;
}

.year-guide-card strong{
    margin-top:3px;

    color:var(--dark);

    font-size:16px;
}



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

.yearly-aries-side > h2{
    background:
        linear-gradient(
            135deg,
            #29204e,
            #5c499e
        );
}

.yearly-current-card{
    display:flex;
    align-items:center;

    gap:11px;

    margin-bottom:22px;
    padding:15px;

    background:#f1efff;

    border:1px solid #dcd6f4;
    border-radius:11px;
}

.yearly-current-card > span{
    width:48px;
    height:48px;

    flex:0 0 48px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#6451ac;

    border-radius:50%;

    font-size:15px;
    font-weight:bold;
}

.yearly-current-card small{
    display:block;

    color:#777183;

    font-size:9px;
}

.yearly-current-card strong{
    display:block;

    margin-top:2px;

    color:#5d4da3;

    font-size:15px;
}


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

.yearly-aries-about{
    padding:60px 0;

    background:#fff;
}


/* =====================================================
   OTHER SIGNS
===================================================== */

.yearly-other-signs{
    background:#f6f5fa;
}


/* =====================================================
   FINAL CTA
===================================================== */

.yearly-aries-final{
    padding:52px 0;

    background:
        linear-gradient(
            135deg,
            #201943,
            #37275f
        );

    color:#fff;
}

.yearly-aries-final-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:23px;
}

.yearly-final-symbol{
    width:70px;
    height:70px;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.07);
    color:#eac86b;

    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;

    font-size:34px;
}

.yearly-aries-final-inner > div:nth-child(2) > span{
    color:#dfba61;

    font-size:10px;
}

.yearly-aries-final-inner h2{
    font-size:25px;
}

.yearly-aries-final-inner p{
    color:#cbc8d9;

    font-size:16px;
}

.yearly-aries-final-inner > a{
    padding:10px 18px;

    background:#fff;
    color:var(--primary);

    border-radius:8px;

    font-size:16px;
    font-weight:bold;

    transition:.2s;
}

.yearly-aries-final-inner > a:hover{
    transform:translateY(-2px);
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:900px){

    .year-roadmap-grid{
        grid-template-columns:1fr 1fr;
    }

    .year-guide-grid{
        grid-template-columns:1fr 1fr;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

    .yearly-sign-period-nav{
        justify-content:center;
    }

    .aries-year-roadmap{
        padding:45px 0;
    }

    .year-roadmap-grid{
        grid-template-columns:1fr;
    }

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

    .aries-2027-months{
        padding:21px 15px;
    }

    .aries-month-grid{
        grid-template-columns:1fr;
    }

    .aries-year-guide{
        padding:21px 15px;
    }

    .yearly-aries-final-inner{
        grid-template-columns:1fr;

        text-align:center;
    }

    .yearly-final-symbol{
        margin:auto;
    }

    .yearly-aries-final-inner > a{
        justify-self:center;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:390px){

    .year-guide-grid{
        grid-template-columns:1fr 1fr;
    }

}




/* =====================================================
   ZODIAC COMPATIBILITY HUB
   /compatibility/
===================================================== */


/* HERO */

.compatibility-hero{
    position:relative;
    overflow:hidden;

    color:#fff;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(137,91,202,.33),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(205,101,134,.16),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #17122e,
            #39234f
        );
}

.compatibility-hero-inner{
    min-height:485px;

    display:grid;
    grid-template-columns:1.2fr .8fr;
    align-items:center;

    gap:45px;
}

.compatibility-label{
    display:inline-block;

    margin-bottom:8px;

    color:#e6b3c8;

    font-size:15px;
    font-weight:bold;
}

.compatibility-hero h1{
    max-width:700px;

    font-size:clamp(37px,5vw,55px);
    line-height:1.35;
}

.compatibility-hero-content > p{
    max-width:680px;

    margin-top:15px;

    color:#d4cfdd;

    font-size:15px;
    line-height:2;
}


/* TAGS */

.compatibility-hero-tags{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-top:18px;
}

.compatibility-hero-tags span{
    padding:6px 12px;

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

    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;

    color:#ddd7e3;

    font-size:10px;
}


/* BUTTON */

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

    gap:10px;

    margin-top:23px;
    padding:11px 21px;

    background:#fff;
    color:#704c8d;

    border-radius:8px;

    font-size:16px;
    font-weight:bold;

    transition:.2s;
}

.compatibility-hero-button:hover{
    transform:translateY(-2px);
}


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

.compatibility-visual{
    width:310px;
    height:310px;

    position:relative;

    margin:auto;

    display:grid;
    place-items:center;
}

.compatibility-orbit{
    position:absolute;

    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;
}

.compatibility-orbit.orbit-one{
    width:300px;
    height:300px;
}

.compatibility-orbit.orbit-two{
    width:220px;
    height:220px;

    border-style:dashed;
}

.compatibility-heart{
    width:150px;
    height:150px;

    position:relative;
    z-index:2;

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

    background:
        linear-gradient(
            145deg,
            #69416f,
            #342347
        );

    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;

    box-shadow:
        0 0 70px rgba(164,80,125,.25);
}

.compatibility-heart > span{
    color:#efafc9;

    font-size:34px;
    line-height:1;
}

.compatibility-heart strong{
    margin-top:5px;

    font-size:17px;
}

.compatibility-heart small{
    color:#bcb3c2;

    font-size:8px;
}


/* SIGNS */

.compatibility-sign{
    width:40px;
    height:40px;

    position:absolute;
    z-index:3;

    display:grid;
    place-items:center;

    background:#352747;

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;

    color:#e5b0c8;

    font-size:21px;
}

.cs1{
    top:-5px;
    left:135px;
}

.cs2{
    right:-5px;
    top:135px;
}

.cs3{
    bottom:-5px;
    left:135px;
}

.cs4{
    left:-5px;
    top:135px;
}

.compat-star{
    position:absolute;

    color:#e8c16d;
}

.star-one{
    top:55px;
    right:55px;
}

.star-two{
    bottom:55px;
    left:55px;

    font-size:18px;
}


/* =====================================================
   INTRO
===================================================== */

.compatibility-intro{
    padding:25px 0 55px;
}

.compatibility-intro-box{
    max-width:950px;

    margin:auto;
    padding:29px;

    display:flex;
    align-items:flex-start;

    gap:22px;

    background:#fff;

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

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

.compatibility-intro-icon{
    width:66px;
    height:66px;

    flex:0 0 66px;

    display:grid;
    place-items:center;

    background:#fff0f5;
    color:#bd607f;

    border-radius:50%;

    font-size:29px;
}

.compatibility-intro-box h2{
    margin:3px 0 7px;

    color:var(--dark);

    font-size:24px;
}

.compatibility-intro-box p{
    margin-top:6px;

    color:#5e5967;

    font-size:16px;
    line-height:1.9;
}


/* =====================================================
   ZODIAC CARDS
===================================================== */

.compatibility-zodiac-section{
    padding:45px 0 75px;
}

.compatibility-zodiac-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:13px;
}

.compatibility-zodiac-card{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:14px;

    padding:18px;

    background:#fff;

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

    transition:.23s;
}

.compatibility-zodiac-card:hover{
    transform:translateY(-3px);

    border-color:#d0c4e7;

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

.compatibility-zodiac-icon{
    width:55px;
    height:55px;

    display:grid;
    place-items:center;

    border-radius:13px;

    font-size:29px;
}

.compatibility-zodiac-card h3{
    color:var(--dark);

    font-size:15px;
}

.compatibility-zodiac-card small{
    color:var(--muted);

    font-size:8px;
}

.compatibility-zodiac-card p{
    margin-top:4px;

    color:#686371;

    font-size:10px;
    line-height:1.6;
}

.compat-arrow{
    color:var(--primary);

    font-size:16px;
}


/* =====================================================
   ELEMENTS
===================================================== */

.compatibility-elements{
    padding:70px 0;

    background:#fff;
}

.compatibility-element-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:15px;
}

.compat-element-card{
    padding:25px 20px;

    border:1px solid var(--border);
    border-radius:14px;
}

.compat-element-symbol{
    width:56px;
    height:56px;

    margin-bottom:15px;

    display:grid;
    place-items:center;

    background:#fff;

    border-radius:50%;

    font-size:25px;
}

.compat-element-card > span{
    font-size:9px;
    font-weight:bold;
}

.compat-element-card h3{
    margin:4px 0 8px;

    color:var(--dark);

    font-size:16px;
}

.compat-element-card p{
    color:#625e69;

    font-size:15px;
    line-height:1.85;
}

.fire-element-card{
    background:#fff6ef;
}

.fire-element-card > span{
    color:#b56b3f;
}

.earth-element-card{
    background:#f3f7ed;
}

.earth-element-card > span{
    color:#70854d;
}

.air-element-card{
    background:#f0f5fb;
}

.air-element-card > span{
    color:#597b9b;
}

.water-element-card{
    background:#f0f5ff;
}

.water-element-card > span{
    color:#5876a8;
}


/* =====================================================
   FACTORS
===================================================== */

.compatibility-factors{
    padding:70px 0;

    background:#f7f6fa;
}

.compatibility-factor-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:14px;
}

.compatibility-factor-grid article{
    padding:23px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:13px;
}

.factor-icon{
    width:45px;
    height:45px;

    margin-bottom:11px;

    display:grid;
    place-items:center;

    background:#f1edff;
    color:#6c56af;

    border-radius:50%;

    font-size:20px;
}

.compatibility-factor-grid h3{

    color:var(--dark);

    font-size:16px;
}

.compatibility-factor-grid p{
    margin-top:6px;

    color:var(--muted);

    font-size:15px;
    line-height:1.8;
}


/* =====================================================
   CONTENT
===================================================== */

.compatibility-content-section{
    background:var(--bg);
}

.compatibility-main-article{
    padding:35px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:15px;
}

.compatibility-main-article h2:not(:first-of-type){
    margin-top:31px;
}

.compatibility-text-link{
    display:inline-block;

    margin-top:12px;

    color:var(--primary);

    font-size:16px;
    font-weight:bold;
}

.compatibility-info-box{
    margin:25px 0;
}


/* RELATED LINKS */

.compatibility-related-links{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:9px;

    margin-top:27px;
}

.compatibility-related-links a{
    display:flex;
    align-items:center;

    gap:9px;

    padding:12px;

    background:#faf9fd;

    border:1px solid var(--border);
    border-radius:9px;
}

.compatibility-related-links a > span{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:grid;
    place-items:center;

    background:#eeeafd;

    border-radius:8px;
}

.compatibility-related-links div{
    flex:1;
}

.compatibility-related-links small{
    display:block;

    color:var(--muted);

    font-size:8px;
}

.compatibility-related-links strong{
    color:var(--dark);

    font-size:10px;
}

.compatibility-related-links b{
    color:var(--primary);
}


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

.compatibility-side-highlight{
    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:22px;
    padding:15px;

    background:#fff0f5;

    border:1px solid #eed9e2;
    border-radius:11px;
}

.compatibility-side-highlight > div{
    width:47px;
    height:47px;

    flex:0 0 47px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#bd5d7d;

    border-radius:50%;

    font-size:24px;
}

.compatibility-side-highlight small,
.compatibility-side-highlight strong,
.compatibility-side-highlight b{
    display:block;
}

.compatibility-side-highlight small{
    color:#8d7881;

    font-size:8px;
}

.compatibility-side-highlight strong{
    color:#a75270;

    font-size:16px;
}

.compatibility-side-highlight b{
    margin-top:1px;

    color:#7c7277;

    font-size:9px;
    font-weight:normal;
}


/* =====================================================
   FINAL CTA
===================================================== */

.compatibility-final{
    padding:55px 0;

    background:
        linear-gradient(
            135deg,
            #251936,
            #492a52
        );

    color:#fff;
}

.compatibility-final-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:23px;
}

.compatibility-final-symbol{
    width:76px;
    height:76px;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.07);
    color:#efb1c9;

    border:1px solid rgba(255,255,255,.09);
    border-radius:50%;

    font-size:34px;
}

.compatibility-final-inner > div:nth-child(2) > span{
    color:#e5adc4;

    font-size:10px;
}

.compatibility-final-inner h2{
    font-size:25px;
}

.compatibility-final-inner p{
    color:#cec6d1;

    font-size:16px;
}

.compatibility-final-inner > a{
    padding:10px 18px;

    background:#fff;
    color:#744e8c;

    border-radius:8px;

    font-size:16px;
    font-weight:bold;

    transition:.2s;
}

.compatibility-final-inner > a:hover{
    transform:translateY(-2px);
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:900px){

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

    .compatibility-visual{
        transform:scale(.8);
    }

    .compatibility-zodiac-grid{
        grid-template-columns:1fr 1fr;
    }

    .compatibility-element-grid{
        grid-template-columns:1fr 1fr;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

    .compatibility-hero-inner{
        min-height:auto;

        display:block;

        padding:50px 0;

        text-align:center;
    }

    .compatibility-hero h1{
        font-size:30px;
    }

    .compatibility-hero-content > p{
        font-size:17px;
    }

    .compatibility-hero-tags{
        justify-content:center;
    }

    .compatibility-visual{
        display:none;
    }

    .compatibility-intro-box{
        display:block;

        padding:22px 18px;
    }

    .compatibility-intro-icon{
        margin-bottom:14px;
    }

    .compatibility-zodiac-grid{
        grid-template-columns:1fr;
    }

    .compatibility-element-grid{
        grid-template-columns:1fr;
    }

    .compatibility-factor-grid{
        grid-template-columns:1fr;
    }

    .compatibility-main-article{
        padding:22px 18px;
    }

    .compatibility-related-links{
        grid-template-columns:1fr;
    }

    .compatibility-final-inner{
        grid-template-columns:1fr;

        text-align:center;
    }

    .compatibility-final-symbol{
        margin:auto;
    }

    .compatibility-final-inner > a{
        justify-self:center;
    }

}




/* =====================================================
   ARIES COMPATIBILITY HUB
   /compatibility/aries/
===================================================== */


/* HERO */

.compat-sign-hero{
    position:relative;
    overflow:hidden;

    color:#fff;
}

.aries-compat-hero{
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(218,107,68,.24),
            transparent 29%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(126,85,191,.22),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #18132e,
            #422735
        );
}

.compat-sign-hero-inner{
    min-height:440px;

    display:grid;
    grid-template-columns:auto 1fr .65fr;
    align-items:center;

    gap:35px;
}


/* SIGN SYMBOL */

.compat-sign-symbol-wrap{
    text-align:center;
}

.compat-sign-symbol{
    width:125px;
    height:125px;

    display:grid;
    place-items:center;

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

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;

    color:#f0bd72;

    font-size:66px;

    box-shadow:
        0 0 60px rgba(226,119,65,.12);
}

.compat-sign-symbol-wrap > span{
    display:inline-block;

    margin-top:10px;
    padding:5px 10px;

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

    border-radius:20px;

    color:#e7d9cf;

    font-size:9px;
}


/* CONTENT */

.compat-sign-label{
    color:#e5b4bd;

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

.compat-sign-hero-content h1{
    max-width:650px;

    margin-top:6px;

    font-size:39px;
    line-height:1.4;
}

.compat-sign-hero-content > p{
    max-width:650px;

    margin-top:12px;

    color:#d0cbd4;

    font-size:13px;
    line-height:1.95;
}

.compat-sign-meta{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-top:17px;
}

.compat-sign-meta span{
    padding:6px 10px;

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

    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;

    color:#ded8df;

    font-size:9px;
}

.compat-sign-button{
    display:inline-block;

    margin-top:20px;
    padding:9px 16px;

    background:#fff;
    color:#864d5d;

    border-radius:7px;

    font-size:15px;
    font-weight:bold;
}


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

.compat-hero-pair{
    display:flex;
    align-items:center;
    justify-content:center;

    direction:ltr;
}

.pair-circle{
    width:88px;
    height:88px;

    display:grid;
    place-items:center;

    border-radius:50%;

    font-size:43px;
}

.pair-aries{
    background:#fff2e8;
    color:#bc6a42;

    transform:translateX(-5px);
}

.pair-question{
    background:#f1eaff;
    color:#7058aa;

    transform:translateX(5px);
}

.pair-heart{
    width:49px;
    height:49px;

    position:relative;
    z-index:3;

    display:grid;
    place-items:center;

    margin:0 -9px;

    background:#fff;
    color:#c25c7b;

    border-radius:50%;

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

    font-size:25px;
}


/* =====================================================
   INTRO
===================================================== */

.aries-compat-intro{
    padding:30px 0 60px;
}

.aries-compat-intro-box{
    max-width:970px;

    margin:auto;
    padding:29px;

    display:flex;
    align-items:flex-start;

    gap:20px;

    background:#fff;

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

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

.aries-compat-intro-symbol{
    width:70px;
    height:70px;

    flex:0 0 70px;

    display:grid;
    place-items:center;

    background:#fff1e8;
    color:#b9653e;

    border-radius:50%;

    font-size:37px;
}

.aries-compat-intro-box h2{
    margin:3px 0 7px;

    color:var(--dark);

    font-size:23px;
}

.aries-compat-intro-box p{
    margin-top:6px;

    color:#5f5b66;

    font-size:16px;
    line-height:1.9;
}


/* =====================================================
   COMPATIBILITY GRID
===================================================== */

.aries-compat-list{
    padding:45px 0 75px;

    background:#f8f7fb;
}

.aries-compat-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:13px;
}

.aries-compat-card{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:15px;

    padding:19px;

    background:#fff;

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

    transition:.23s;
}

.aries-compat-card:hover{
    transform:translateY(-3px);

    border-color:#d7c8e2;

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

.compat-pair-icons{
    display:flex;
    align-items:center;

    direction:ltr;
}

.compat-pair-icons span{
    width:44px;
    height:44px;

    display:grid;
    place-items:center;

    border-radius:50%;

    font-size:23px;
}

.compat-pair-icons i{
    width:26px;
    height:26px;

    position:relative;
    z-index:2;

    display:grid;
    place-items:center;

    margin:0 -6px;

    background:#fff;
    color:#bf6680;

    border:1px solid #eee1e6;
    border-radius:50%;

    font-size:13px;
    font-style:normal;
}

.fire-sign{
    background:#fff0e6;
    color:#b9653d;
}

.earth-sign{
    background:#f0f4e9;
    color:#6e814f;
}

.air-sign{
    background:#edf4fa;
    color:#557a9c;
}

.water-sign{
    background:#eef3ff;
    color:#5975a4;
}

.compat-card-content small{
    color:var(--primary);

    font-size:8px;
    font-weight:bold;
}

.compat-card-content h3{
    margin:2px 0 4px;

    color:var(--dark);

    font-size:15px;
}

.compat-card-content p{
    color:#65616b;

    font-size:10px;
    line-height:1.7;
}

.compat-tags{
    display:flex;
    flex-wrap:wrap;

    gap:5px;

    margin-top:7px;
}

.compat-tags span{
    padding:3px 7px;

    background:#f5f2fa;
    color:#766a80;

    border-radius:12px;

    font-size:7px;
}

.aries-compat-card > b{
    color:var(--primary);

    font-size:17px;
}


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

.aries-compat-content-section{
    background:var(--bg);
}

.aries-compat-article{
    padding:35px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:15px;
}

.aries-compat-article > h2{
    margin-top:32px;

    color:var(--dark);
}

.aries-compat-article > .small-title + h2{
    margin-top:4px;
}

.aries-compat-article > p{
    margin-top:9px;

    color:#5e5a64;

    line-height:2;
}


/* FEATURE */

.compat-feature-box{
    display:flex;
    align-items:flex-start;

    gap:13px;

    margin:23px 0;
    padding:17px;

    background:#fff1f5;

    border:1px solid #eedde3;
    border-radius:11px;
}

.compat-feature-box > div:first-child{
    width:43px;
    height:43px;

    flex:0 0 43px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#bf5f7b;

    border-radius:50%;

    font-size:21px;
}

.compat-feature-box strong{
    color:#a64e69;
}

.compat-feature-box p{
    margin-top:3px;

    color:#695d61;

    font-size:15px;
}


/* =====================================================
   ELEMENT COMBINATIONS
===================================================== */

.compat-element-combination{
    display:flex;
    align-items:flex-start;

    gap:17px;

    margin:15px 0 25px;
    padding:19px;

    border-radius:12px;
}

.combination-icons{
    min-width:90px;

    font-size:24px;
    letter-spacing:3px;
    direction:ltr;
}

.compat-element-combination h3{
    margin-bottom:5px;

    font-size:17px;
}

.compat-element-combination p{
    margin-top:5px;

    font-size:15px;
    line-height:1.85;
}

.fire-combination{
    background:#fff5ed;
    border:1px solid #f1dfd0;
}

.fire-combination .combination-icons{
    color:#b96842;
}

.earth-combination{
    background:#f4f7ef;
    border:1px solid #e0e8d5;
}

.earth-combination .combination-icons{
    color:#71824f;
}

.air-combination{
    background:#f0f5fa;
    border:1px solid #dce7f0;
}

.air-combination .combination-icons{
    color:#557a9a;
}

.water-combination{
    background:#f0f4ff;
    border:1px solid #dce4f3;
}

.water-combination .combination-icons{
    color:#5875a4;
}


/* WARNING */

.compatibility-warning{
    display:flex;
    align-items:flex-start;

    gap:14px;

    margin:30px 0;
    padding:20px;

    background:#fffaf0;

    border:1px solid #eee3c8;
    border-radius:12px;
}

.warning-icon{
    width:42px;
    height:42px;

    flex:0 0 42px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#a67b32;

    border-radius:50%;

    font-weight:bold;
}

.compatibility-warning strong{
    color:#826526;
}

.compatibility-warning p{
    margin-top:5px;

    color:#6a6353;

    font-size:15px;
    line-height:1.85;
}


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

.aries-compat-side-card > h2{
    color:#a75b3b;
}

.aries-side-info{
    display:grid;

    gap:7px;

    margin:13px 0;
}

.aries-side-info > div{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:8px 10px;

    background:#faf9fc;

    border-radius:7px;
}

.aries-side-info span{
    color:var(--muted);

    font-size:9px;
}

.aries-side-info strong{
    color:var(--dark);

    font-size:9px;
}

.aries-side-main-link{
    display:block;

    margin-top:10px;
    padding:9px;

    background:#fff1e8;
    color:#aa5b37;

    border-radius:7px;

    text-align:center;

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

.compatibility-side-nav a{
    display:block;

    padding:8px 0;

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

    font-size:10px;
}

.compatibility-side-nav a:last-child{
    border-bottom:0;
}


/* =====================================================
   OTHER SIGNS
===================================================== */

.aries-other-compatibility{
    padding:65px 0;

    background:#fff;
}


/* =====================================================
   FINAL CTA
===================================================== */

.aries-compat-final{
    padding:53px 0;

    background:
        linear-gradient(
            135deg,
            #20162e,
            #4b2939
        );

    color:#fff;
}

.aries-compat-final-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:22px;
}

.aries-compat-final-symbol{
    width:72px;
    height:72px;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.07);
    color:#efbd75;

    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;

    font-size:38px;
}

.aries-compat-final-inner > div:nth-child(2) > span{
    color:#e6aebd;

    font-size:9px;
}

.aries-compat-final-inner h2{
    font-size:24px;
}

.aries-compat-final-inner p{
    color:#d0c7cd;

    font-size:15px;
}

.aries-compat-final-inner > a{
    padding:10px 17px;

    background:#fff;
    color:#844c5c;

    border-radius:8px;

    font-size:15px;
    font-weight:bold;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:900px){

    .compat-sign-hero-inner{
        grid-template-columns:auto 1fr;
    }

    .compat-hero-pair{
        display:none;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

    .compat-sign-hero-inner{
        display:block;

        min-height:auto;

        padding:45px 0;

        text-align:center;
    }

    .compat-sign-symbol{
        width:100px;
        height:100px;

        margin:auto;

        font-size:53px;
    }

    .compat-sign-hero-content{
        margin-top:20px;
    }

    .compat-sign-hero-content h1{
        font-size:29px;
    }

    .compat-sign-meta{
        justify-content:center;
    }

    .aries-compat-intro-box{
        display:block;

        padding:21px 17px;
    }

    .aries-compat-intro-symbol{
        margin-bottom:13px;
    }

    .aries-compat-grid{
        grid-template-columns:1fr;
    }

    .aries-compat-article{
        padding:22px 17px;
    }

    .compat-element-combination{
        display:block;
    }

    .combination-icons{
        margin-bottom:10px;
    }

    .aries-compat-final-inner{
        grid-template-columns:1fr;

        text-align:center;
    }

    .aries-compat-final-symbol{
        margin:auto;
    }

    .aries-compat-final-inner > a{
        justify-self:center;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:390px){

    .aries-compat-card{
        grid-template-columns:auto 1fr;

        padding:15px;
    }

    .aries-compat-card > b{
        display:none;
    }

    .compat-pair-icons span{
        width:37px;
        height:37px;

        font-size:19px;
    }

    .compat-pair-icons i{
        width:22px;
        height:22px;

        font-size:15px;
    }

}




/* =====================================================
   ZODIAC PAIR COMPATIBILITY
   /compatibility/{sign}-{sign}/
===================================================== */


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

.pair-compat-hero{
    position:relative;
    overflow:hidden;

    color:#fff;
}

.aries-taurus-hero{
    background:
        radial-gradient(
            circle at 12% 25%,
            rgba(221,113,67,.25),
            transparent 28%
        ),
        radial-gradient(
            circle at 87% 78%,
            rgba(113,138,76,.19),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #18132c,
            #3d2b32
        );
}

.pair-compat-hero-inner{
    min-height:460px;

    display:grid;
    grid-template-columns:auto 1fr 280px;
    align-items:center;

    gap:38px;
}


/* PAIR SYMBOLS */

.pair-main-symbols{
    min-width:210px;

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

    direction:ltr;
}

.pair-big-sign{
    width:100px;
    height:100px;

    display:grid;
    place-items:center;

    border-radius:50%;

    font-size:50px;
}

.pair-big-aries{
    background:#fff0e5;
    color:#b96840;
}

.pair-big-taurus{
    background:#eef4e7;
    color:#70834f;
}

.pair-big-heart{
    width:48px;
    height:48px;

    position:relative;
    z-index:3;

    display:grid;
    place-items:center;

    margin:0 -11px;

    background:#fff;
    color:#bd5e7b;

    border-radius:50%;

    box-shadow:
        0 7px 24px rgba(0,0,0,.2);

    font-size:24px;
}


/* HERO CONTENT */

.pair-hero-label{
    color:#e9b2c2;

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

.pair-hero-content h1{
    margin-top:5px;

    font-size:38px;
    line-height:1.4;
}

.pair-hero-content > p{
    max-width:670px;

    margin-top:12px;

    color:#d3cdd2;

    font-size:13px;
    line-height:1.95;
}

.pair-hero-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;

    gap:7px;

    margin-top:16px;
}

.pair-hero-meta span{
    padding:5px 10px;

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

    border:1px solid rgba(255,255,255,.09);
    border-radius:20px;

    color:#e3dce0;

    font-size:9px;
}

.pair-hero-meta b{
    color:#e6a9bb;

    font-size:15px;
}

.pair-hero-button{
    display:inline-block;

    margin-top:20px;
    padding:10px 17px;

    background:#fff;
    color:#814d5c;

    border-radius:8px;

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

    transition:.2s;
}

.pair-hero-button:hover{
    transform:translateY(-2px);
}


/* HERO SUMMARY */

.pair-hero-summary{
    padding:22px;

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

    border:1px solid rgba(255,255,255,.1);
    border-radius:15px;

    backdrop-filter:blur(5px);
}

.pair-hero-summary > span{
    color:#dba7b6;

    font-size:9px;
}

.pair-hero-summary > strong{
    display:block;

    margin:4px 0 7px;

    font-size:17px;
}

.pair-hero-summary > p{
    color:#d2cbd0;

    font-size:10px;
    line-height:1.8;
}

.pair-summary-tags{
    display:flex;
    flex-wrap:wrap;

    gap:5px;

    margin-top:12px;
}

.pair-summary-tags span{
    padding:4px 8px;

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

    border-radius:15px;

    color:#ddd4d9;

    font-size:8px;
}


/* =====================================================
   QUICK CARDS
===================================================== */

.pair-quick-intro{
    padding:32px 0 60px;
}

.pair-quick-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:11px;
}

.pair-quick-card{
    display:flex;
    align-items:flex-start;

    gap:11px;

    padding:17px;

    background:#fff;

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

    box-shadow:0 5px 18px rgba(31,23,45,.03);
}

.pair-quick-icon{
    width:40px;
    height:40px;

    flex:0 0 40px;

    display:grid;
    place-items:center;

    background:#f5eff8;
    color:#9a5576;

    border-radius:50%;

    font-size:18px;
}

.pair-quick-card small{
    display:block;

    color:var(--muted);

    font-size:8px;
}

.pair-quick-card strong{
    display:block;

    margin:1px 0 4px;

    color:var(--dark);

    font-size:15px;
}

.pair-quick-card p{
    color:#6a6570;

    font-size:9px;
    line-height:1.65;
}


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

.pair-content-section{
    background:var(--bg);
}

.pair-main-article{
    padding:35px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:15px;
}

.pair-main-article > h2{
    margin-top:5px;

    color:var(--dark);
}

.pair-main-article > p{
    margin-top:9px;

    color:#5f5b65;

    line-height:2;
}


/* HIGHLIGHT */

.pair-highlight{
    display:flex;
    align-items:center;

    gap:17px;

    margin:25px 0;
    padding:19px;

    background:
        linear-gradient(
            135deg,
            #fff5ef,
            #f7f7ef
        );

    border:1px solid #ece2d8;
    border-radius:12px;
}

.pair-highlight-icons{
    min-width:100px;

    color:#956248;

    font-size:24px;

    direction:ltr;
}

.pair-highlight strong{
    color:#6e4b3c;
}

.pair-highlight p{
    margin-top:4px;

    color:#6c625e;

    font-size:15px;
    line-height:1.8;
}


/* =====================================================
   DETAIL SECTIONS
===================================================== */

.pair-detail-section{
    margin-top:38px;
    padding-top:31px;

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

.pair-section-heading{
    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:13px;
}

.pair-section-heading > span{
    width:47px;
    height:47px;

    flex:0 0 47px;

    display:grid;
    place-items:center;

    background:#f4eff8;
    color:#865a9d;

    border-radius:50%;

    font-size:19px;
}

.pair-section-heading small{
    display:block;

    color:var(--primary);

    font-size:8px;
    font-weight:bold;
}

.pair-section-heading h2{
    margin:1px 0 0;

    color:var(--dark);

    font-size:21px;
}

.pair-detail-section > p{
    margin-top:9px;

    color:#5f5b65;

    line-height:2;
}


/* =====================================================
   TWO COLUMNS
===================================================== */

.pair-two-columns{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:12px;

    margin-top:19px;
}

.pair-two-columns > div{
    padding:18px;

    background:#faf9fc;

    border:1px solid var(--border);
    border-radius:10px;
}

.pair-two-columns h3{
    margin-bottom:8px;

    color:var(--dark);

    font-size:13px;
}

.pair-two-columns ul{
    margin:0;
    padding:0 17px 0 0;
}

.pair-two-columns li{
    margin:6px 0;

    color:#625e68;

    font-size:10px;
    line-height:1.6;
}


/* =====================================================
   TIP
===================================================== */

.pair-tip-box{
    display:flex;
    align-items:flex-start;

    gap:11px;

    margin-top:18px;
    padding:16px;

    background:#f3f8ef;

    border:1px solid #dce8d4;
    border-radius:10px;
}

.pair-tip-box > span{
    width:35px;
    height:35px;

    flex:0 0 35px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#6c874c;

    border-radius:50%;

    font-weight:bold;
}

.pair-tip-box strong{
    color:#617a45;

    font-size:15px;
}

.pair-tip-box p{
    margin-top:3px;

    color:#616a5a;

    font-size:10px;
    line-height:1.75;
}


/* =====================================================
   NOTE
===================================================== */

.pair-note{
    margin-top:17px;
    padding:13px 15px;

    background:#fffaf0;

    border:1px solid #eee4ca;
    border-radius:8px;

    color:#6b6250;

    font-size:10px;
}

.pair-note strong{
    color:#8b6d32;
}


/* =====================================================
   CHALLENGES
===================================================== */

.pair-challenges-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:11px;

    margin-top:18px;
}

.pair-challenges-grid > div{
    position:relative;

    padding:18px;

    background:#faf9fc;

    border:1px solid var(--border);
    border-radius:10px;
}

.pair-challenges-grid span{
    display:block;

    margin-bottom:5px;

    color:#b9adbf;

    font-size:9px;
    font-weight:bold;
}

.pair-challenges-grid h3{
    color:var(--dark);

    font-size:13px;
}

.pair-challenges-grid p{
    margin-top:5px;

    color:#66616c;

    font-size:10px;
    line-height:1.7;
}


/* =====================================================
   STRENGTHS
===================================================== */

.pair-strength-list{
    display:grid;

    gap:8px;

    margin-top:17px;
}

.pair-strength-list > div{
    display:flex;
    align-items:flex-start;

    gap:10px;

    padding:12px;

    background:#f7faf4;

    border:1px solid #e1e9da;
    border-radius:8px;
}

.pair-strength-list span{
    width:25px;
    height:25px;

    flex:0 0 25px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#70894e;

    border-radius:50%;

    font-size:10px;
}

.pair-strength-list p{
    color:#62695d;

    font-size:10px;
    line-height:1.7;
}


/* =====================================================
   GENDER SECTION
===================================================== */

.pair-gender-section > h2{
    margin-top:29px;

    color:var(--dark);

    font-size:19px;
}

.pair-gender-section > p{
    margin-top:8px;
}


/* =====================================================
   PRACTICAL TIPS
===================================================== */

.pair-practical-tips{
    display:grid;

    gap:8px;

    margin-top:18px;
}

.pair-practical-tips > div{
    display:flex;
    align-items:center;

    gap:12px;

    padding:12px 14px;

    background:#faf9fc;

    border:1px solid var(--border);
    border-radius:8px;
}

.pair-practical-tips span{
    width:31px;
    height:31px;

    flex:0 0 31px;

    display:grid;
    place-items:center;

    background:#eee9f5;
    color:#715a8d;

    border-radius:50%;

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

.pair-practical-tips p{
    color:#615d67;

    font-size:10px;
    line-height:1.65;
}


/* =====================================================
   DISCLAIMER
===================================================== */

.pair-disclaimer{
    display:flex;
    align-items:flex-start;

    gap:13px;

    margin-top:35px;
    padding:18px;

    background:#f5f5f7;

    border:1px solid #e5e4e8;
    border-radius:10px;
}

.pair-disclaimer-icon{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#706a76;

    border-radius:50%;

    font-family:serif;
    font-weight:bold;
}

.pair-disclaimer strong{
    color:#4f4b54;

    font-size:15px;
}

.pair-disclaimer p{
    margin-top:4px;

    color:#6c6870;

    font-size:9px;
    line-height:1.75;
}


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

.pair-related-section{
    margin-top:37px;
    padding-top:30px;

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

.pair-related-section > h2{
    margin-bottom:14px;

    color:var(--dark);

    font-size:19px;
}

.pair-related-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:8px;
}

.pair-related-grid a{
    display:flex;
    align-items:center;

    gap:10px;

    padding:12px;

    background:#faf9fc;

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

    transition:.2s;
}

.pair-related-grid a:hover{
    transform:translateY(-2px);

    background:#fff;
}

.pair-related-grid a > span{
    width:39px;
    height:39px;

    flex:0 0 39px;

    display:grid;
    place-items:center;

    background:#f0ecf6;

    border-radius:50%;

    font-size:20px;
}

.pair-related-grid div{
    flex:1;
}

.pair-related-grid small{
    display:block;

    color:var(--muted);

    font-size:7px;
}

.pair-related-grid strong{
    color:var(--dark);

    font-size:10px;
}

.pair-related-grid b{
    color:var(--primary);
}


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

.pair-side-sign{
    display:flex;
    align-items:center;

    gap:10px;

    padding:10px;

    background:#faf9fc;

    border-radius:9px;
}

.pair-side-icon{
    width:45px;
    height:45px;

    flex:0 0 45px;

    display:grid;
    place-items:center;

    border-radius:50%;

    font-size:24px;
}

.pair-side-sign small{
    display:block;

    color:var(--muted);

    font-size:7px;
}

.pair-side-sign strong{
    display:block;

    color:var(--dark);

    font-size:15px;
}

.pair-side-sign p{
    color:#827d86;

    font-size:7px;
}

.pair-side-divider{
    width:28px;
    height:28px;

    display:grid;
    place-items:center;

    margin:-3px auto;

    position:relative;
    z-index:2;

    background:#fff;
    color:#bd637d;

    border:1px solid var(--border);
    border-radius:50%;

    font-size:13px;
}

.pair-page-nav a{
    display:block;

    padding:8px 0;

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

    color:#5f5965;

    font-size:10px;
}

.pair-page-nav a:last-child{
    border-bottom:0;
}


/* =====================================================
   NEXT
===================================================== */

.pair-next-section{
    padding:53px 0;

    background:
        linear-gradient(
            135deg,
            #20172f,
            #3e2a43
        );

    color:#fff;
}

.pair-next-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:20px;
}

.pair-next-icons{
    min-width:105px;

    color:#e5bd77;

    font-size:28px;

    direction:ltr;
}

.pair-next-icons span{
    color:#df9db2;

    font-size:18px;
}

.pair-next-inner > div:nth-child(2) > span{
    color:#dba8b8;

    font-size:9px;
}

.pair-next-inner h2{
    margin-top:2px;

    font-size:23px;
}

.pair-next-inner p{
    margin-top:3px;

    color:#ccc5cf;

    font-size:15px;
}

.pair-next-inner > a{
    padding:10px 16px;

    background:#fff;
    color:#704c7e;

    border-radius:8px;

    font-size:15px;
    font-weight:bold;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1000px){

    .pair-compat-hero-inner{
        grid-template-columns:auto 1fr;
    }

    .pair-hero-summary{
        display:none;
    }

    .pair-quick-grid{
        grid-template-columns:1fr 1fr;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

    .pair-compat-hero-inner{
        display:block;

        min-height:auto;

        padding:45px 0;

        text-align:center;
    }

    .pair-main-symbols{
        margin:auto auto 22px;
    }

    .pair-big-sign{
        width:82px;
        height:82px;

        font-size:40px;
    }

    .pair-big-heart{
        width:42px;
        height:42px;

        font-size:20px;
    }

    .pair-hero-content h1{
        font-size:29px;
    }

    .pair-hero-meta{
        justify-content:center;
    }

    .pair-quick-grid{
        grid-template-columns:1fr;
    }

    .pair-main-article{
        padding:22px 17px;
    }

    .pair-two-columns{
        grid-template-columns:1fr;
    }

    .pair-challenges-grid{
        grid-template-columns:1fr;
    }

    .pair-related-grid{
        grid-template-columns:1fr;
    }

    .pair-highlight{
        display:block;
    }

    .pair-highlight-icons{
        margin-bottom:9px;
    }

    .pair-next-inner{
        grid-template-columns:1fr;

        text-align:center;
    }

    .pair-next-icons{
        margin:auto;
    }

    .pair-next-inner > a{
        justify-self:center;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:390px){

    .pair-main-symbols{
        min-width:0;
    }

    .pair-big-sign{
        width:70px;
        height:70px;

        font-size:34px;
    }

    .pair-big-heart{
        width:37px;
        height:37px;

        margin:0 -8px;

        font-size:18px;
    }

    .pair-section-heading > span{
        width:40px;
        height:40px;

        flex-basis:40px;
    }

    .pair-section-heading h2{
        font-size:18px;
    }

}


/* =====================================================
   ZODIAC SIGNS HUB
   /zodiac-signs/
===================================================== */


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

.zodiac-guide-hero{
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(116,87,194,.32),
            transparent 30%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(224,183,78,.13),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #15132c,
            #31264f
        );

    color:#fff;
}

.zodiac-guide-hero-inner{
    min-height:500px;

    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:center;

    gap:50px;
}

.zodiac-guide-label{
    display:inline-block;

    margin-bottom:7px;

    color:#e3c06c;

    font-size:15px;
    font-weight:bold;
}

.zodiac-guide-content h1{
    max-width:730px;

    font-size:clamp(36px,5vw,54px);
    line-height:1.35;
}

.zodiac-guide-content > p{
    max-width:700px;

    margin-top:15px;

    color:#d3cfde;

    font-size:17px;
    line-height:2;
}


/* FEATURES */

.zodiac-guide-features{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-top:18px;
}

.zodiac-guide-features span{
    padding:6px 11px;

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

    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;

    color:#ddd8e7;

    font-size:9px;
}


/* BUTTON */

.zodiac-guide-button{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-top:22px;
    padding:10px 18px;

    background:#fff;
    color:#6651a4;

    border-radius:8px;

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

    transition:.2s;
}

.zodiac-guide-button:hover{
    transform:translateY(-2px);
}


/* =====================================================
   ZODIAC WHEEL
===================================================== */

.zodiac-wheel{
    width:330px;
    height:330px;

    position:relative;

    margin:auto;

    display:grid;
    place-items:center;
}

.zodiac-wheel-ring{
    position:absolute;

    border-radius:50%;
}

.zodiac-wheel-ring.ring-one{
    width:320px;
    height:320px;

    border:1px solid rgba(255,255,255,.12);
}

.zodiac-wheel-ring.ring-two{
    width:220px;
    height:220px;

    border:1px dashed rgba(255,255,255,.1);
}

.zodiac-wheel-center{
    width:125px;
    height:125px;

    position:relative;
    z-index:2;

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

    background:
        linear-gradient(
            145deg,
            #59458d,
            #2b2547
        );

    border:1px solid rgba(255,255,255,.13);
    border-radius:50%;

    box-shadow:
        0 0 70px rgba(104,76,180,.28);
}

.zodiac-wheel-center > span{
    color:#e6c56d;

    font-size:28px;
}

.zodiac-wheel-center strong{
    font-size:17px;
}

.zodiac-wheel-center small{
    color:#bcb6cb;

    font-size:8px;
}


/* 12 SYMBOLS */

.wheel-sign{
    width:36px;
    height:36px;

    position:absolute;
    z-index:3;

    display:grid;
    place-items:center;

    background:#302947;

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;

    color:#e3c16d;

    font-size:18px;
}

.ws1{
    top:-2px;
    left:147px;
}

.ws2{
    top:18px;
    right:67px;
}

.ws3{
    top:70px;
    right:15px;
}

.ws4{
    top:147px;
    right:-3px;
}

.ws5{
    bottom:67px;
    right:15px;
}

.ws6{
    bottom:17px;
    right:67px;
}

.ws7{
    bottom:-2px;
    left:147px;
}

.ws8{
    bottom:17px;
    left:67px;
}

.ws9{
    bottom:67px;
    left:15px;
}

.ws10{
    top:147px;
    left:-3px;
}

.ws11{
    top:70px;
    left:15px;
}

.ws12{
    top:18px;
    left:67px;
}


/* =====================================================
   INTRO
===================================================== */

.zodiac-guide-intro{
    padding:28px 0 60px;
}

.zodiac-guide-intro-box{
    max-width:970px;

    margin:auto;
    padding:29px;

    display:flex;
    align-items:flex-start;

    gap:21px;

    background:#fff;

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

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

.zodiac-guide-intro-icon{
    width:68px;
    height:68px;

    flex:0 0 68px;

    display:grid;
    place-items:center;

    background:#f0ecff;
    color:#6651ad;

    border-radius:50%;

    font-size:34px;
}

.zodiac-guide-intro-box h2{
    margin:3px 0 7px;

    color:var(--dark);

    font-size:24px;
}

.zodiac-guide-intro-box p{
    margin-top:6px;

    color:#5f5a67;

    font-size:16px;
    line-height:1.9;
}


/* =====================================================
   DIRECTORY
===================================================== */

.zodiac-directory{
    padding:45px 0 75px;

    background:#f7f6fa;
}

.zodiac-directory-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:13px;
}

.zodiac-directory-card{
    position:relative;

    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:15px;

    padding:20px;

    background:#fff;

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

    transition:.23s;
}

.zodiac-directory-card:hover{
    transform:translateY(-3px);

    border-color:#cec5e8;

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

.zodiac-card-number{
    position:absolute;

    top:10px;
    left:12px;

    color:#d9d4df;

    font-size:8px;
    font-weight:bold;
}

.zodiac-directory-icon{
    width:64px;
    height:64px;

    display:grid;
    place-items:center;

    border-radius:15px;

    font-size:33px;
}

.zodiac-card-top{
    display:flex;
    flex-wrap:wrap;
    align-items:center;

    gap:8px;
}

.zodiac-card-top > span{
    color:var(--primary);

    font-size:8px;
    font-weight:bold;
}

.zodiac-card-top small{
    color:var(--muted);

    font-size:8px;
}

.zodiac-directory-content h3{
    margin:2px 0 4px;

    color:var(--dark);

    font-size:18px;
}

.zodiac-directory-content > p{
    color:#625e69;

    font-size:10px;
    line-height:1.7;
}

.zodiac-keywords{
    display:flex;
    flex-wrap:wrap;

    gap:4px;

    margin-top:7px;
}

.zodiac-keywords span{
    padding:3px 7px;

    background:#f5f3f8;
    color:#77717c;

    border-radius:12px;

    font-size:7px;
}

.zodiac-directory-card > b{
    color:var(--primary);

    font-size:18px;
}


/* =====================================================
   DATES TABLE
===================================================== */

.zodiac-dates-section{
    padding:70px 0;

    background:#fff;
}

.zodiac-dates-table-wrap{
    overflow-x:auto;

    margin-top:25px;

    border:1px solid var(--border);
    border-radius:13px;
}

.zodiac-dates-table{
    width:100%;

    border-collapse:collapse;

    background:#fff;
}

.zodiac-dates-table th{
    padding:13px 15px;

    background:#29233f;
    color:#fff;

    text-align:right;

    font-size:10px;
}

.zodiac-dates-table td{
    padding:12px 15px;

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

    color:#625e68;

    font-size:10px;
}

.zodiac-dates-table tbody tr:last-child td{
    border-bottom:0;
}

.zodiac-dates-table tbody tr:hover{
    background:#faf9fc;
}

.zodiac-dates-table td:nth-child(2){
    font-size:20px;
}

.zodiac-dates-table a{
    color:var(--primary);

    font-weight:bold;
}

.zodiac-date-note{
    margin-top:11px;

    color:#85808a;

    font-size:9px;
    line-height:1.7;
}


/* =====================================================
   ELEMENT CARDS
===================================================== */

.zodiac-elements-section{
    padding:70px 0;

    background:#f7f6fa;
}

.zodiac-elements-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:14px;
}

.zodiac-element-box{
    padding:22px;

    border-radius:14px;
}

.zodiac-element-head{
    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:13px;
}

.zodiac-element-head > span{
    width:46px;
    height:46px;

    display:grid;
    place-items:center;

    background:#fff;

    border-radius:50%;

    font-size:21px;
}

.zodiac-element-head small{
    color:#827c87;

    font-size:7px;
}

.zodiac-element-head h3{
    color:var(--dark);

    font-size:15px;
}

.element-signs{
    display:grid;

    gap:5px;

    margin-bottom:13px;
}

.element-signs a{
    padding:6px 8px;

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

    border-radius:6px;

    color:#514d55;

    font-size:9px;
    font-weight:bold;
}

.zodiac-element-box > p{
    color:#625e66;

    font-size:10px;
    line-height:1.75;
}

.element-fire-box{
    background:#fff2e9;
    border:1px solid #f0ddd0;
}

.element-earth-box{
    background:#f2f6ec;
    border:1px solid #dde6d3;
}

.element-air-box{
    background:#eef5fa;
    border:1px solid #dae6ef;
}

.element-water-box{
    background:#eef3ff;
    border:1px solid #dae2f3;
}


/* =====================================================
   MAIN ARTICLE
===================================================== */

.zodiac-info-section{
    background:var(--bg);
}

.zodiac-main-article{
    padding:35px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:15px;
}

.zodiac-main-article > h2{
    margin-top:32px;

    color:var(--dark);
}

.zodiac-main-article > .small-title + h2{
    margin-top:4px;
}

.zodiac-main-article > p{
    margin-top:9px;

    color:#5e5a64;

    line-height:2;
}


/* ORDER */

.zodiac-order-box{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;

    gap:7px;

    margin:22px 0;
    padding:17px;

    background:#f7f5fc;

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

    direction:ltr;
}

.zodiac-order-box span{
    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#6652a9;

    border-radius:50%;

    font-size:18px;
}

.zodiac-order-box i{
    color:#b6afc0;

    font-size:9px;
    font-style:normal;
}


/* SCIENCE NOTE */

.zodiac-science-note{
    display:flex;
    align-items:flex-start;

    gap:12px;

    margin:25px 0;
    padding:17px;

    background:#f5f5f7;

    border:1px solid #e5e4e8;
    border-radius:10px;
}

.zodiac-science-note > div{
    width:37px;
    height:37px;

    flex:0 0 37px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#68616e;

    border-radius:50%;

    font-family:serif;
    font-weight:bold;
}

.zodiac-science-note p{
    margin:0;

    color:#67626c;

    font-size:10px;
    line-height:1.8;
}


/* RELATED */

.zodiac-related-navigation{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:8px;

    margin-top:30px;
}

.zodiac-related-navigation a{
    display:flex;
    align-items:center;

    gap:9px;

    padding:12px;

    background:#faf9fc;

    border:1px solid var(--border);
    border-radius:9px;
}

.zodiac-related-navigation a > span{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:grid;
    place-items:center;

    background:#efebfa;

    border-radius:50%;

    font-size:18px;
}

.zodiac-related-navigation div{
    flex:1;
}

.zodiac-related-navigation small{
    display:block;

    color:var(--muted);

    font-size:7px;
}

.zodiac-related-navigation strong{
    color:var(--dark);

    font-size:10px;
}

.zodiac-related-navigation b{
    color:var(--primary);
}


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

.zodiac-guide-side a{
    display:flex;
    align-items:center;

    gap:8px;
}

.zodiac-guide-side a > span{
    width:24px;

    text-align:center;
}

.zodiac-side-highlight{
    display:flex;
    align-items:center;

    gap:11px;

    margin-bottom:22px;
    padding:15px;

    background:#f0edff;

    border:1px solid #ddd7f4;
    border-radius:11px;
}

.zodiac-side-highlight > span{
    width:49px;
    height:49px;

    flex:0 0 49px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#6551ab;

    border-radius:50%;

    font-size:17px;
    font-weight:bold;
}

.zodiac-side-highlight small,
.zodiac-side-highlight strong,
.zodiac-side-highlight p{
    display:block;
}

.zodiac-side-highlight small{
    color:#837c91;

    font-size:7px;
}

.zodiac-side-highlight strong{
    color:#5e4ca1;

    font-size:15px;
}

.zodiac-side-highlight p{
    color:#77717e;

    font-size:8px;
}


/* =====================================================
   ELEMENT DETAILS
===================================================== */

.zodiac-element-details{
    padding:65px 0;

    background:#fff;
}

.zodiac-element-detail{
    display:grid;
    grid-template-columns:auto 1fr;

    gap:18px;

    margin-bottom:13px;
    padding:23px;

    border-radius:13px;

    scroll-margin-top:90px;
}

.element-detail-icon{
    width:60px;
    height:60px;

    display:grid;
    place-items:center;

    background:#fff;

    border-radius:50%;

    font-size:26px;
}

.zodiac-element-detail h2{
    margin:2px 0 6px;

    color:var(--dark);

    font-size:20px;
}

.zodiac-element-detail p{
    color:#605c66;

    font-size:15px;
    line-height:1.85;
}

.element-detail-links{
    display:flex;
    flex-wrap:wrap;

    gap:6px;

    margin-top:10px;
}

.element-detail-links a{
    padding:6px 10px;

    background:#fff;

    border-radius:6px;

    color:#57515d;

    font-size:9px;
    font-weight:bold;
}

.fire-detail{
    background:#fff3eb;
    border:1px solid #f0dfd3;
}

.earth-detail{
    background:#f3f7ee;
    border:1px solid #dfe7d7;
}

.air-detail{
    background:#eff6fa;
    border:1px solid #dce8ef;
}

.water-detail{
    background:#f0f4ff;
    border:1px solid #dce4f3;
}


/* =====================================================
   FINAL
===================================================== */

.zodiac-guide-final{
    padding:54px 0;

    background:
        linear-gradient(
            135deg,
            #1d1838,
            #3c305f
        );

    color:#fff;
}

.zodiac-guide-final-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:22px;
}

.zodiac-guide-final-icon{
    width:74px;
    height:74px;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.07);
    color:#e7c46d;

    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;

    font-size:37px;
}

.zodiac-guide-final-inner > div:nth-child(2) > span{
    color:#dec06f;

    font-size:9px;
}

.zodiac-guide-final-inner h2{
    font-size:25px;
}

.zodiac-guide-final-inner p{
    color:#cdc8d6;

    font-size:15px;
}

.zodiac-guide-final-inner > a{
    padding:10px 17px;

    background:#fff;
    color:#6450a3;

    border-radius:8px;

    font-size:15px;
    font-weight:bold;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:900px){

    .zodiac-guide-hero-inner{
        grid-template-columns:1fr .6fr;
    }

    .zodiac-wheel{
        transform:scale(.78);
    }

    .zodiac-elements-grid{
        grid-template-columns:1fr 1fr;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

    .zodiac-guide-hero-inner{
        min-height:auto;

        display:block;

        padding:50px 0;

        text-align:center;
    }

    .zodiac-guide-content h1{
        font-size:30px;
    }

    .zodiac-guide-content > p{
        font-size:13px;
    }

    .zodiac-guide-features{
        justify-content:center;
    }

    .zodiac-wheel{
        display:none;
    }

    .zodiac-guide-intro-box{
        display:block;

        padding:22px 18px;
    }

    .zodiac-guide-intro-icon{
        margin-bottom:13px;
    }

    .zodiac-directory-grid{
        grid-template-columns:1fr;
    }

    .zodiac-elements-grid{
        grid-template-columns:1fr;
    }

    .zodiac-main-article{
        padding:22px 18px;
    }

    .zodiac-related-navigation{
        grid-template-columns:1fr;
    }

    .zodiac-element-detail{
        grid-template-columns:1fr;
    }

    .zodiac-guide-final-inner{
        grid-template-columns:1fr;

        text-align:center;
    }

    .zodiac-guide-final-icon{
        margin:auto;
    }

    .zodiac-guide-final-inner > a{
        justify-self:center;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:390px){

    .zodiac-directory-card{
        grid-template-columns:auto 1fr;

        padding:17px 14px;
    }

    .zodiac-directory-card > b{
        display:none;
    }

    .zodiac-directory-icon{
        width:52px;
        height:52px;

        font-size:27px;
    }

    .zodiac-card-top{
        display:block;
    }

    .zodiac-card-top small{
        display:block;

        margin-top:2px;
    }

}


/* =====================================================
   INDIVIDUAL ZODIAC TRAITS
   /zodiac-signs/{sign}/
===================================================== */


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

.traits-sign-hero{
    position:relative;
    overflow:hidden;

    color:#fff;
}

.aries-traits-hero{
    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(226,117,62,.30),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 80%,
            rgba(132,79,164,.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #1b152c,
            #442632
        );
}

.traits-sign-hero-inner{
    min-height:470px;

    display:grid;
    grid-template-columns:180px 1fr 245px;
    align-items:center;

    gap:38px;
}


/* SYMBOL */

.traits-sign-symbol{
    text-align:center;
}

.traits-symbol-ring{
    width:150px;
    height:150px;

    display:grid;
    place-items:center;

    margin:auto;

    position:relative;

    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;
}

.traits-symbol-ring:before{
    content:"";

    position:absolute;

    inset:12px;

    border:1px dashed rgba(255,255,255,.1);
    border-radius:50%;
}

.traits-symbol-ring span{
    width:105px;
    height:105px;

    position:relative;
    z-index:2;

    display:grid;
    place-items:center;

    background:
        linear-gradient(
            145deg,
            #d97845,
            #a94c37
        );

    border-radius:50%;

    box-shadow:
        0 15px 45px rgba(0,0,0,.2);

    font-size:55px;
}

.traits-sign-symbol small{
    display:block;

    margin-top:11px;

    color:#cfc7d0;

    font-size:9px;
}


/* CONTENT */

.traits-hero-label{
    display:inline-block;

    margin-bottom:5px;

    color:#efbd7c;

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

.traits-hero-content h1{
    max-width:760px;

    font-size:38px;
    line-height:1.4;
}

.traits-hero-content > p{
    max-width:700px;

    margin-top:12px;

    color:#d5cfd4;

    font-size:13px;
    line-height:1.95;
}

.traits-hero-tags{
    display:flex;
    flex-wrap:wrap;

    gap:6px;

    margin-top:15px;
}

.traits-hero-tags span{
    padding:5px 10px;

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

    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;

    color:#ddd6dc;

    font-size:8px;
}

.traits-hero-actions{
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-top:20px;
}

.traits-primary-button,
.traits-secondary-button{
    display:inline-block;

    padding:9px 15px;

    border-radius:8px;

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

.traits-primary-button{
    background:#fff;
    color:#9a503f;
}

.traits-secondary-button{
    background:rgba(255,255,255,.07);
    color:#fff;

    border:1px solid rgba(255,255,255,.14);
}


/* PROFILE */

.traits-quick-profile{
    padding:21px;

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

    border:1px solid rgba(255,255,255,.1);
    border-radius:14px;

    backdrop-filter:blur(5px);
}

.traits-profile-label{
    display:block;

    margin-bottom:9px;

    color:#e8b97c;

    font-size:9px;
    font-weight:bold;
}

.traits-profile-row{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:10px;

    padding:8px 0;

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

.traits-profile-row:last-child{
    border-bottom:0;
}

.traits-profile-row span{
    color:#c9c2c9;

    font-size:8px;
}

.traits-profile-row strong{
    color:#fff;

    font-size:9px;
}


/* =====================================================
   FACTS
===================================================== */

.traits-facts-section{
    padding:30px 0 60px;
}

.traits-facts-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:11px;
}

.traits-fact-card{
    padding:18px;

    background:#fff;

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

    box-shadow:0 5px 18px rgba(30,25,40,.03);
}

.traits-fact-icon{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    margin-bottom:10px;

    background:#fff1e8;
    color:#ad5d3e;

    border-radius:50%;

    font-size:20px;
}

.traits-fact-card small{
    display:block;

    color:var(--muted);

    font-size:7px;
}

.traits-fact-card strong{
    display:block;

    margin:2px 0 4px;

    color:var(--dark);

    font-size:15px;
}

.traits-fact-card p{
    color:#6c6770;

    font-size:9px;
    line-height:1.65;
}


/* =====================================================
   MAIN
===================================================== */

.traits-content-section{
    background:var(--bg);
}

.traits-main-article{
    padding:35px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:15px;
}

.traits-main-article > h2{
    margin-top:5px;

    color:var(--dark);
}

.traits-main-article > p{
    margin-top:9px;

    color:#5f5a64;

    line-height:2;
}


/* =====================================================
   HIGHLIGHT
===================================================== */

.traits-highlight-box{
    display:flex;
    align-items:center;

    gap:16px;

    margin:25px 0;
    padding:19px;

    background:
        linear-gradient(
            135deg,
            #fff3eb,
            #faf6f3
        );

    border:1px solid #f0dfd4;
    border-radius:12px;
}

.traits-highlight-symbol{
    width:58px;
    height:58px;

    flex:0 0 58px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#b55e40;

    border-radius:50%;

    font-size:29px;
}

.traits-highlight-box small{
    display:block;

    color:#a16c55;

    font-size:7px;
}

.traits-highlight-box strong{
    display:block;

    margin:2px 0;

    color:#754b3c;

    font-size:16px;
}

.traits-highlight-box p{
    color:#71635e;

    font-size:9px;
    line-height:1.7;
}


/* =====================================================
   ARTICLE SECTIONS
===================================================== */

.traits-article-section{
    margin-top:39px;
    padding-top:31px;

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

    scroll-margin-top:90px;
}

.traits-section-title{
    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:13px;
}

.traits-section-title > span{
    width:47px;
    height:47px;

    flex:0 0 47px;

    display:grid;
    place-items:center;

    background:#f5eff8;
    color:#825c96;

    border-radius:50%;

    font-size:18px;
    font-weight:bold;
}

.traits-section-title small{
    display:block;

    color:var(--primary);

    font-size:8px;
    font-weight:bold;
}

.traits-section-title h2{
    margin:1px 0 0;

    color:var(--dark);

    font-size:21px;
}

.traits-article-section > p{
    margin-top:9px;

    color:#5f5a64;

    line-height:2;
}


/* =====================================================
   FEATURE GRID
===================================================== */

.traits-feature-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:18px;
}

.traits-feature-card{
    padding:17px;

    background:#faf9fc;

    border:1px solid var(--border);
    border-radius:10px;
}

.traits-feature-card > span{
    color:#bbb2c0;

    font-size:8px;
    font-weight:bold;
}

.traits-feature-card h3{
    margin:3px 0 5px;

    color:var(--dark);

    font-size:13px;
}

.traits-feature-card p{
    color:#66616a;

    font-size:10px;
    line-height:1.75;
}


/* =====================================================
   CHALLENGES
===================================================== */

.traits-challenges-list{
    display:grid;

    gap:8px;

    margin-top:18px;
}

.traits-challenges-list > div{
    display:flex;
    align-items:flex-start;

    gap:12px;

    padding:14px;

    background:#fcfaf9;

    border:1px solid #eee4df;
    border-radius:9px;
}

.traits-challenges-list > div > span{
    width:32px;
    height:32px;

    flex:0 0 32px;

    display:grid;
    place-items:center;

    background:#fff0e9;
    color:#ad6549;

    border-radius:50%;

    font-size:8px;
    font-weight:bold;
}

.traits-challenges-list h3{
    color:var(--dark);

    font-size:15px;
}

.traits-challenges-list p{
    margin-top:3px;

    color:#6b6463;

    font-size:9px;
    line-height:1.7;
}


/* =====================================================
   LOVE
===================================================== */

.traits-love-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:11px;

    margin-top:19px;
}

.traits-love-grid > div{
    padding:18px;

    background:#fff8fa;

    border:1px solid #f0dfe5;
    border-radius:10px;
}

.traits-love-grid > div > span{
    display:block;

    margin-bottom:5px;

    color:#bc6680;

    font-size:20px;
}

.traits-love-grid h3{
    color:var(--dark);

    font-size:16px;
}

.traits-love-grid ul{
    margin:8px 0 0;
    padding-right:17px;
}

.traits-love-grid li{
    margin:5px 0;

    color:#6b6166;

    font-size:9px;
}


/* INLINE LINK */

.traits-inline-link{
    display:flex;
    align-items:center;

    gap:11px;

    margin-top:18px;
    padding:13px;

    background:#f7f4fb;

    border:1px solid var(--border);
    border-radius:9px;
}

.traits-inline-link > span{
    width:40px;
    height:40px;

    flex:0 0 40px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#ad5f79;

    border-radius:50%;
}

.traits-inline-link > div{
    flex:1;
}

.traits-inline-link small{
    display:block;

    color:var(--muted);

    font-size:7px;
}

.traits-inline-link strong{
    color:var(--dark);

    font-size:10px;
}

.traits-inline-link > a{
    color:var(--primary);

    font-size:9px;
    font-weight:bold;
}


/* =====================================================
   MAN / WOMAN
===================================================== */

.traits-person-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:11px;

    margin-top:18px;
}

.traits-person-card{
    padding:19px;

    background:#faf9fc;

    border:1px solid var(--border);
    border-radius:11px;
}

.traits-person-head{
    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:10px;
}

.traits-person-head > span{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    background:#f1ebf7;
    color:#75578a;

    border-radius:50%;

    font-size:18px;
}

.traits-person-head small{
    display:block;

    color:var(--muted);

    font-size:7px;
}

.traits-person-head h3{
    color:var(--dark);

    font-size:16px;
}

.traits-person-card > p{
    margin-top:7px;

    color:#65606a;

    font-size:10px;
    line-height:1.8;
}

.traits-person-card ul{
    margin:10px 0 0;
    padding-right:17px;
}

.traits-person-card li{
    margin:5px 0;

    color:#625d67;

    font-size:9px;
}

.traits-gender-note{
    margin-top:11px;
    padding:13px;

    background:#f5f5f7;

    border:1px solid #e5e4e8;
    border-radius:8px;

    color:#69646d;

    font-size:9px;
    line-height:1.75;
}


/* =====================================================
   MINI POINTS
===================================================== */

.traits-mini-points{
    display:grid;

    gap:7px;

    margin-top:17px;
}

.traits-mini-points > div{
    display:flex;
    align-items:center;

    gap:9px;

    padding:11px 13px;

    background:#faf9fc;

    border:1px solid var(--border);
    border-radius:8px;
}

.traits-mini-points span{
    width:27px;
    height:27px;

    flex:0 0 27px;

    display:grid;
    place-items:center;

    background:#eef5e9;
    color:#708650;

    border-radius:50%;

    font-size:9px;
}

.traits-mini-points p{
    color:#625e66;

    font-size:9px;
}


/* =====================================================
   WORK
===================================================== */

.traits-work-box{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:9px;

    margin-top:18px;
}

.traits-work-box > div{
    padding:15px;

    background:#f8f7fb;

    border:1px solid var(--border);
    border-radius:9px;
}

.traits-work-box span{
    display:block;

    color:var(--primary);

    font-size:7px;
}

.traits-work-box strong{
    display:block;

    margin:2px 0 4px;

    color:var(--dark);

    font-size:15px;
}

.traits-work-box p{
    color:#67626b;

    font-size:9px;
    line-height:1.7;
}


/* =====================================================
   FINANCE
===================================================== */

.traits-financial-note{
    margin-top:17px;
    padding:16px;

    background:#fffaf0;

    border:1px solid #eee4c9;
    border-radius:9px;
}

.traits-financial-note strong{
    color:#886c34;

    font-size:10px;
}

.traits-financial-note p{
    margin-top:4px;

    color:#696250;

    font-size:9px;
    line-height:1.75;
}


/* =====================================================
   ELEMENT
===================================================== */

.traits-element-box{
    margin-top:18px;
    padding:18px;

    background:#fff3eb;

    border:1px solid #f0ded2;
    border-radius:11px;
}

.traits-element-main{
    display:flex;
    align-items:center;

    gap:10px;
}

.traits-element-main > span{
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    background:#fff;

    border-radius:50%;

    font-size:22px;
}

.traits-element-main small{
    display:block;

    color:#9a765f;

    font-size:7px;
}

.traits-element-main strong{
    color:#6f5142;

    font-size:15px;
}

.traits-element-signs{
    display:flex;
    flex-wrap:wrap;

    gap:6px;

    margin-top:13px;
}

.traits-element-signs a{
    padding:6px 10px;

    background:#fff;

    border-radius:6px;

    color:#72594c;

    font-size:9px;
    font-weight:bold;
}

.traits-element-signs a.current{
    background:#a75b3e;
    color:#fff;
}


/* =====================================================
   COMPATIBILITY
===================================================== */

.traits-compatibility-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:8px;

    margin-top:18px;
}

.traits-compatibility-grid a{
    padding:13px;

    text-align:center;

    background:#faf9fc;

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

    transition:.2s;
}

.traits-compatibility-grid a:hover{
    transform:translateY(-2px);

    background:#fff;
}

.traits-compatibility-grid span{
    display:block;

    margin-bottom:4px;

    color:#775f93;

    font-size:23px;
}

.traits-compatibility-grid strong{
    display:block;

    color:var(--dark);

    font-size:9px;
}

.traits-compatibility-grid small{
    color:var(--muted);

    font-size:7px;
}

.traits-all-compatibility{
    display:block;

    margin-top:9px;
    padding:10px;

    background:#f1edf8;
    color:var(--primary);

    border-radius:7px;

    text-align:center;

    font-size:9px;
    font-weight:bold;
}


/* =====================================================
   PREDICTIONS
===================================================== */

.traits-prediction-links{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:8px;

    margin-top:17px;
}

.traits-prediction-links a{
    display:flex;
    align-items:center;

    gap:10px;

    padding:13px;

    background:#faf9fc;

    border:1px solid var(--border);
    border-radius:9px;
}

.traits-prediction-links a > span{
    width:41px;
    height:41px;

    flex:0 0 41px;

    display:grid;
    place-items:center;

    background:#efebf7;
    color:#725c8d;

    border-radius:50%;

    font-size:17px;
    font-weight:bold;
}

.traits-prediction-links div{
    flex:1;
}

.traits-prediction-links small{
    display:block;

    color:var(--muted);

    font-size:7px;
}

.traits-prediction-links strong{
    display:block;

    color:var(--dark);

    font-size:10px;
}

.traits-prediction-links p{
    color:#77717b;

    font-size:8px;
}

.traits-prediction-links b{
    color:var(--primary);
}


/* =====================================================
   DISCLAIMER
===================================================== */

.traits-disclaimer{
    display:flex;
    align-items:flex-start;

    gap:12px;

    margin-top:36px;
    padding:17px;

    background:#f5f5f7;

    border:1px solid #e4e3e7;
    border-radius:10px;
}

.traits-disclaimer-icon{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#6e6872;

    border-radius:50%;

    font-family:serif;
    font-weight:bold;
}

.traits-disclaimer strong{
    color:#4e4a52;

    font-size:10px;
}

.traits-disclaimer p{
    margin-top:4px;

    color:#69656d;

    font-size:9px;
    line-height:1.75;
}


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

.traits-side-profile{
    text-align:center;
}

.traits-side-symbol{
    width:70px;
    height:70px;

    display:grid;
    place-items:center;

    margin:0 auto 8px;

    border-radius:50%;

    font-size:36px;
}

.traits-side-profile > h2{
    margin-bottom:1px;
}

.traits-side-profile > p{
    color:var(--muted);

    font-size:8px;
}

.traits-side-data{
    margin-top:13px;
}

.traits-side-data > div{
    display:flex;
    justify-content:space-between;

    gap:8px;

    padding:7px 0;

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

.traits-side-data span{
    color:var(--muted);

    font-size:8px;
}

.traits-side-data strong{
    color:var(--dark);

    font-size:8px;
}

.traits-page-nav a{
    display:block;

    padding:8px 0;

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

    color:#5e5963;

    font-size:9px;
}

.traits-page-nav a:last-child{
    border-bottom:0;
}


/* =====================================================
   OTHER SIGNS
===================================================== */

.traits-other-signs{
    padding:65px 0;

    background:#fff;
}


/* =====================================================
   NEXT SIGN
===================================================== */

.traits-next-sign{
    padding:52px 0;

    background:
        linear-gradient(
            135deg,
            #1d1832,
            #3d304e
        );

    color:#fff;
}

.traits-next-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:20px;
}

.traits-next-symbol{
    width:72px;
    height:72px;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.07);
    color:#b9ca91;

    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;

    font-size:37px;
}

.traits-next-inner > div:nth-child(2) > span{
    color:#c8b2d4;

    font-size:8px;
}

.traits-next-inner h2{
    font-size:22px;
}

.traits-next-inner p{
    margin-top:3px;

    color:#cec8d1;

    font-size:10px;
}

.traits-next-inner > a{
    padding:10px 16px;

    background:#fff;
    color:#655274;

    border-radius:8px;

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


/* =====================================================
   TABLET
===================================================== */

@media(max-width:1000px){

    .traits-sign-hero-inner{
        grid-template-columns:150px 1fr;
    }

    .traits-quick-profile{
        display:none;
    }

    .traits-facts-grid{
        grid-template-columns:1fr 1fr;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

    .traits-sign-hero-inner{
        display:block;

        min-height:auto;

        padding:45px 0;

        text-align:center;
    }

    .traits-sign-symbol{
        margin-bottom:20px;
    }

    .traits-symbol-ring{
        width:125px;
        height:125px;
    }

    .traits-symbol-ring span{
        width:88px;
        height:88px;

        font-size:45px;
    }

    .traits-hero-content h1{
        font-size:29px;
    }

    .traits-hero-tags,
    .traits-hero-actions{
        justify-content:center;
    }

    .traits-facts-grid{
        grid-template-columns:1fr;
    }

    .traits-main-article{
        padding:22px 17px;
    }

    .traits-feature-grid,
    .traits-love-grid,
    .traits-person-grid,
    .traits-work-box,
    .traits-compatibility-grid,
    .traits-prediction-links{
        grid-template-columns:1fr;
    }

    .traits-highlight-box{
        display:block;
    }

    .traits-highlight-symbol{
        margin-bottom:10px;
    }

    .traits-inline-link{
        flex-wrap:wrap;
    }

    .traits-inline-link > a{
        width:100%;

        padding-top:7px;

        text-align:center;
    }

    .traits-next-inner{
        grid-template-columns:1fr;

        text-align:center;
    }

    .traits-next-symbol{
        margin:auto;
    }

    .traits-next-inner > a{
        justify-self:center;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:390px){

    .traits-section-title > span{
        width:40px;
        height:40px;

        flex-basis:40px;
    }

    .traits-section-title h2{
        font-size:18px;
    }

    .traits-hero-content h1{
        font-size:26px;
    }

}



/* =====================================================
   ARTICLES HUB
   /articles/
===================================================== */


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

.articles-hero{
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(115,84,190,.32),
            transparent 31%
        ),
        radial-gradient(
            circle at 12% 90%,
            rgba(218,175,74,.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #17152d,
            #30264c
        );

    color:#fff;
}

.articles-hero-inner{
    min-height:475px;

    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:center;

    gap:45px;
}

.articles-hero-label{
    display:inline-block;

    margin-bottom:7px;

    color:#e3c06d;

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

.articles-hero-content h1{
    max-width:680px;

    font-size:clamp(36px,5vw,52px);
    line-height:1.35;
}

.articles-hero-content > p{
    max-width:680px;

    margin-top:14px;

    color:#d1ccd9;

    font-size:13px;
    line-height:2;
}

.articles-hero-topics{
    display:flex;
    flex-wrap:wrap;

    gap:6px;

    margin-top:17px;
}

.articles-hero-topics span{
    padding:5px 10px;

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

    border:1px solid rgba(255,255,255,.1);
    border-radius:20px;

    color:#ded9e4;

    font-size:8px;
}

.articles-hero-button{
    display:inline-block;

    margin-top:20px;
    padding:10px 17px;

    background:#fff;
    color:#6551a5;

    border-radius:8px;

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


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

.articles-hero-visual{
    width:320px;
    height:320px;

    position:relative;

    display:grid;
    place-items:center;

    margin:auto;
}

.article-orbit{
    position:absolute;

    border-radius:50%;
}

.article-orbit-one{
    width:300px;
    height:300px;

    border:1px solid rgba(255,255,255,.11);
}

.article-orbit-two{
    width:215px;
    height:215px;

    border:1px dashed rgba(255,255,255,.1);
}

.article-book{
    width:125px;
    height:145px;

    position:relative;
    z-index:2;

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

    background:
        linear-gradient(
            145deg,
            #5c4a8d,
            #302743
        );

    border:1px solid rgba(255,255,255,.12);
    border-radius:8px 17px 17px 8px;

    box-shadow:
        0 18px 60px rgba(0,0,0,.25);
}

.article-book:before{
    content:"";

    position:absolute;

    right:11px;
    top:0;
    bottom:0;

    width:1px;

    background:rgba(255,255,255,.1);
}

.article-book > span{
    color:#e5c16a;

    font-size:30px;
}

.article-book strong{
    margin-top:5px;

    font-size:15px;
}

.article-book small{
    color:#bbb5c7;

    font-size:8px;
}

.article-symbol{
    width:40px;
    height:40px;

    position:absolute;

    display:grid;
    place-items:center;

    background:#312a48;

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;

    color:#e4c16c;

    font-size:19px;
}

.as1{
    top:16px;
    left:140px;
}

.as2{
    top:135px;
    right:-2px;
}

.as3{
    bottom:14px;
    left:140px;
}

.as4{
    top:135px;
    left:-2px;
}

.article-star{
    position:absolute;

    color:#d8c17f;

    font-size:9px;
}

.ast1{
    top:56px;
    left:52px;
}

.ast2{
    right:48px;
    bottom:65px;
}

.ast3{
    top:75px;
    right:55px;
}


/* =====================================================
   INTRO
===================================================== */

.articles-intro{
    padding:28px 0 60px;
}

.articles-intro-box{
    max-width:970px;

    display:flex;
    align-items:flex-start;

    gap:20px;

    margin:auto;
    padding:28px;

    background:#fff;

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

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

.articles-intro-icon{
    width:65px;
    height:65px;

    flex:0 0 65px;

    display:grid;
    place-items:center;

    background:#f0ecfb;
    color:#6a56a4;

    border-radius:50%;

    font-size:25px;
}

.articles-intro-box h2{
    margin:3px 0 7px;

    color:var(--dark);

    font-size:23px;
}

.articles-intro-box p{
    margin-top:6px;

    color:#625d68;

    font-size:15px;
    line-height:1.9;
}


/* =====================================================
   FEATURED ARTICLE
===================================================== */

.featured-article-section{
    padding:60px 0;

    background:#f7f6fa;
}

.featured-article-card{
    display:grid;
    grid-template-columns:340px 1fr;

    overflow:hidden;

    margin-top:25px;

    background:#fff;

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

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

.featured-article-visual{
    min-height:315px;

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

    position:relative;

    background:
        radial-gradient(
            circle at center,
            rgba(150,112,213,.23),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #26203e,
            #47365f
        );

    color:#fff;
}

.featured-big-symbol{
    font-size:82px;

    color:#e3bd69;
}

.featured-symbol-row{
    display:flex;

    gap:10px;

    margin-top:6px;

    color:#c9c0d4;

    font-size:17px;
}

.featured-article-visual small{
    margin-top:10px;

    color:#a9a0b6;

    font-size:8px;
}

.featured-article-content{
    padding:35px;
}

.article-meta,
.article-card-meta{
    display:flex;
    flex-wrap:wrap;

    gap:8px;
}

.article-meta span{
    padding:4px 8px;

    background:#f1edf8;
    color:#6c57a0;

    border-radius:15px;

    font-size:7px;
}

.featured-article-content h2{
    margin:10px 0;

    font-size:25px;
    line-height:1.55;
}

.featured-article-content h2 a{
    color:var(--dark);
}

.featured-article-content > p{
    color:#625e67;

    font-size:15px;
    line-height:1.9;
}

.featured-article-points{
    display:flex;
    flex-wrap:wrap;

    gap:6px;

    margin-top:15px;
}

.featured-article-points span{
    padding:5px 9px;

    background:#f7f6fa;
    color:#69636f;

    border-radius:6px;

    font-size:8px;
}

.featured-read-more{
    display:inline-block;

    margin-top:19px;

    color:var(--primary);

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


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

.article-categories{
    padding:65px 0;

    background:#fff;
}

.article-category-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:11px;
}

.article-category-card{
    display:flex;
    align-items:center;

    gap:11px;

    padding:17px;

    background:#faf9fc;

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

    transition:.2s;
}

.article-category-card:hover{
    transform:translateY(-3px);

    background:#fff;

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

.article-category-icon{
    width:48px;
    height:48px;

    flex:0 0 48px;

    display:grid;
    place-items:center;

    background:#f0ecf8;
    color:#6f5890;

    border-radius:50%;

    font-size:22px;
}

.article-category-card > div{
    flex:1;
}

.article-category-card small{
    color:var(--muted);

    font-size:7px;
}

.article-category-card h3{
    color:var(--dark);

    font-size:15px;
}

.article-category-card p{
    margin-top:2px;

    color:#77717b;

    font-size:8px;
    line-height:1.5;
}

.article-category-card b{
    color:var(--primary);
}


/* =====================================================
   ARTICLES LIST
===================================================== */

.latest-articles-section{
    padding:70px 0;

    background:var(--bg);
}

.articles-main-column{
    min-width:0;
}

.articles-heading{
    text-align:right;
}

.articles-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:13px;
}

.article-card{
    overflow:hidden;

    background:#fff;

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

    transition:.2s;
}

.article-card:hover{
    transform:translateY(-3px);

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

.article-card-visual{
    height:145px;

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

    position:relative;
}

.article-card-visual > span{
    font-size:45px;
}

.article-card-visual > small{
    margin-top:4px;

    font-size:8px;
    font-weight:bold;
}


/* VISUAL VARIANTS */

.zodiac-article-visual{
    background:#fff1e9;
    color:#a95d40;
}

.elements-article-visual{
    background:#f5f0e9;
    color:#8e6847;
}

.rising-article-visual{
    background:#efecfa;
    color:#6956a0;
}

.mercury-article-visual{
    background:#eef5f7;
    color:#547987;
}

.compatibility-article-visual{
    background:#fff0f5;
    color:#a65e79;
}

.moon-article-visual{
    background:#f0f1fa;
    color:#5f6293;
}

.modality-article-visual{
    background:#f1f6ee;
    color:#647c57;
}

.science-article-visual{
    background:#f1f3f5;
    color:#59636c;
}


/* BODY */

.article-card-body{
    padding:17px;
}

.article-card-meta{
    justify-content:space-between;

    margin-bottom:7px;
}

.article-card-meta span,
.article-card-meta time{
    color:#8a8490;

    font-size:7px;
}

.article-card-body h2{
    font-size:17px;
    line-height:1.65;
}

.article-card-body h2 a{
    color:var(--dark);
}

.article-card-body > p{
    margin-top:7px;

    color:#67626c;

    font-size:9px;
    line-height:1.75;
}

.article-read-link{
    display:inline-block;

    margin-top:11px;

    color:var(--primary);

    font-size:8px;
    font-weight:bold;
}


/* =====================================================
   PAGINATION
===================================================== */

.articles-pagination{
    display:flex;
    align-items:center;

    gap:5px;

    margin-top:24px;
}

.articles-pagination a,
.articles-pagination span{
    min-width:35px;
    height:35px;

    display:grid;
    place-items:center;

    padding:0 10px;

    background:#fff;

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

    color:#625d68;

    font-size:9px;
}

.articles-pagination .current{
    background:var(--primary);
    color:#fff;

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

.articles-pagination .pagination-next{
    width:auto;
}


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

.articles-side-feature{
    margin-bottom:22px;
    padding:18px;

    background:
        linear-gradient(
            145deg,
            #2c2543,
            #46365d
        );

    border-radius:11px;

    color:#fff;
}

.articles-side-feature > span{
    color:#d7b96d;

    font-size:7px;
}

.articles-side-feature strong{
    display:block;

    margin:2px 0 5px;

    font-size:13px;
}

.articles-side-feature p{
    color:#d0cad5;

    font-size:9px;
    line-height:1.7;
}

.articles-side-feature a{
    display:inline-block;

    margin-top:10px;

    color:#e7c675;

    font-size:9px;
    font-weight:bold;
}


/* =====================================================
   LEARNING PATH
===================================================== */

.articles-learning-section{
    padding:70px 0;

    background:#fff;
}

.learning-path{
    max-width:900px;

    margin:28px auto 0;

    position:relative;
}

.learning-path:before{
    content:"";

    position:absolute;

    right:25px;
    top:30px;
    bottom:30px;

    width:1px;

    background:#ddd8e5;
}

.learning-step{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:15px;

    position:relative;

    margin-bottom:9px;
    padding:15px;

    background:#faf9fc;

    border:1px solid var(--border);
    border-radius:10px;
}

.learning-number{
    width:52px;
    height:52px;

    position:relative;
    z-index:2;

    display:grid;
    place-items:center;

    background:#fff;
    color:#67539d;

    border:1px solid #ded8ec;
    border-radius:50%;

    font-size:9px;
    font-weight:bold;
}

.learning-step small{
    color:var(--primary);

    font-size:7px;
}

.learning-step h3{
    color:var(--dark);

    font-size:16px;
}

.learning-step p{
    color:#77717b;

    font-size:8px;
}

.learning-step b{
    color:var(--primary);
}


/* =====================================================
   POPULAR TOPICS
===================================================== */

.popular-article-topics{
    padding:65px 0;

    background:#f7f6fa;
}

.popular-topics-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;
}

.popular-topics-grid a{
    padding:18px;

    background:#fff;

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

    text-align:center;
}

.popular-topics-grid span{
    display:block;

    margin-bottom:5px;

    color:#725b93;

    font-size:26px;
}

.popular-topics-grid strong{
    display:block;

    color:var(--dark);

    font-size:15px;
}

.popular-topics-grid small{
    color:var(--muted);

    font-size:8px;
}


/* =====================================================
   EDITORIAL
===================================================== */

.articles-editorial-section{
    padding:65px 0;

    background:#fff;
}

.articles-editorial-box{
    max-width:950px;

    display:flex;
    align-items:flex-start;

    gap:17px;

    margin:auto;
    padding:25px;

    background:#f5f5f7;

    border:1px solid #e5e4e8;
    border-radius:13px;
}

.articles-editorial-icon{
    width:52px;
    height:52px;

    flex:0 0 52px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#68616f;

    border-radius:50%;

    font-family:serif;
    font-weight:bold;
}

.articles-editorial-box h2{
    margin:2px 0 6px;

    color:var(--dark);

    font-size:20px;
}

.articles-editorial-box p{
    margin-top:6px;

    color:#66616a;

    font-size:10px;
    line-height:1.85;
}


/* =====================================================
   FINAL CTA
===================================================== */

.articles-final-cta{
    padding:54px 0;

    background:
        linear-gradient(
            135deg,
            #1d1935,
            #3b3056
        );

    color:#fff;
}

.articles-final-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:20px;
}

.articles-final-symbol{
    width:70px;
    height:70px;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.07);
    color:#e5c16b;

    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;

    font-size:31px;
}

.articles-final-inner > div:nth-child(2) > span{
    color:#dfbd6e;

    font-size:8px;
}

.articles-final-inner h2{
    font-size:23px;
}

.articles-final-inner p{
    color:#cec9d5;

    font-size:10px;
}

.articles-final-inner > a{
    padding:10px 16px;

    background:#fff;
    color:#66529b;

    border-radius:8px;

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


/* =====================================================
   TABLET
===================================================== */

@media(max-width:950px){

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

    .articles-hero-visual{
        transform:scale(.8);
    }

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

    .featured-article-card{
        grid-template-columns:280px 1fr;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

    .articles-hero-inner{
        display:block;

        min-height:auto;

        padding:52px 0;

        text-align:center;
    }

    .articles-hero-content h1{
        font-size:31px;
    }

    .articles-hero-content > p{
        font-size:16px;
    }

    .articles-hero-topics{
        justify-content:center;
    }

    .articles-hero-visual{
        display:none;
    }


    .articles-intro-box{
        display:block;

        padding:21px 17px;
    }

    .articles-intro-icon{
        margin-bottom:11px;
    }


    .featured-article-card{
        grid-template-columns:1fr;
    }

    .featured-article-visual{
        min-height:210px;
    }

    .featured-big-symbol{
        font-size:62px;
    }

    .featured-article-content{
        padding:22px 18px;
    }

    .featured-article-content h2{
        font-size:20px;
    }


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


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


    .popular-topics-grid{
        grid-template-columns:1fr 1fr;
    }


    .articles-editorial-box{
        display:block;
    }

    .articles-editorial-icon{
        margin-bottom:10px;
    }


    .articles-final-inner{
        grid-template-columns:1fr;

        text-align:center;
    }

    .articles-final-symbol{
        margin:auto;
    }

    .articles-final-inner > a{
        justify-self:center;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:390px){

    .articles-hero-content h1{
        font-size:27px;
    }

    .popular-topics-grid{
        grid-template-columns:1fr;
    }

    .learning-step{
        grid-template-columns:auto 1fr;
    }

    .learning-step > b{
        display:none;
    }

    .featured-article-content{
        padding:18px 15px;
    }

}








/* =====================================================
   SINGLE ARTICLE
   /articles/{slug}/
===================================================== */


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

.single-article-hero{
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(121,91,187,.27),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #18162d,
            #352b4d
        );

    color:#fff;
}

.single-article-hero-inner{
    min-height:445px;

    display:grid;
    grid-template-columns:1fr 340px;
    align-items:center;

    gap:45px;
}

.single-article-category{
    display:inline-block;

    margin-bottom:8px;
    padding:5px 10px;

    background:rgba(226,192,108,.1);
    color:#e2bf6e;

    border:1px solid rgba(226,192,108,.15);
    border-radius:20px;

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

.single-article-hero-content h1{
    max-width:800px;

    font-size:39px;
    line-height:1.45;
}

.single-article-lead{
    max-width:750px;

    margin-top:13px;

    color:#d1ccd8;

    font-size:15px;
    line-height:2;
}

.single-article-meta{
    display:flex;
    flex-wrap:wrap;

    gap:14px;

    margin-top:17px;

    color:#aaa3b3;

    font-size:12px;
}


/* =====================================================
   ZODIAC WHEEL
===================================================== */

.single-article-hero-visual{
    display:grid;
    place-items:center;
}

.article-zodiac-wheel{
    width:290px;
    height:290px;

    position:relative;

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
}

.article-zodiac-wheel:before{
    content:"";

    position:absolute;

    inset:38px;

    border:1px dashed rgba(255,255,255,.1);
    border-radius:50%;
}

.article-wheel-center{
    width:105px;
    height:105px;

    position:absolute;
    top:50%;
    left:50%;

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

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

    background:#312942;

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;

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

.article-wheel-center span{
    color:#e5c16c;

    font-size:31px;
    font-weight:bold;
}

.article-wheel-center small{
    color:#b8b1c0;

    font-size:12px;
}

.aw-sign{
    width:34px;
    height:34px;

    position:absolute;

    display:grid;
    place-items:center;

    background:#29233b;
    color:#d8c176;

    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;

    font-size:15px;
}


/* CLOCK POSITIONS */

.aws1{
    top:-17px;
    left:128px;
}

.aws2{
    top:20px;
    right:32px;
}

.aws3{
    top:70px;
    right:-9px;
}

.aws4{
    top:128px;
    right:-17px;
}

.aws5{
    bottom:35px;
    right:24px;
}

.aws6{
    bottom:-10px;
    right:76px;
}

.aws7{
    bottom:-17px;
    left:128px;
}

.aws8{
    bottom:-10px;
    left:76px;
}

.aws9{
    bottom:35px;
    left:24px;
}

.aws10{
    top:128px;
    left:-17px;
}

.aws11{
    top:70px;
    left:-9px;
}

.aws12{
    top:20px;
    left:32px;
}


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

.single-article-content{
    padding:65px 0;

    background:var(--bg);
}

.single-article-body{
    padding:36px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:15px;
}

.single-article-body p{
    color:#5f5a64;

    line-height:2;
}

.article-opening{
    font-size:16px;
}


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

.article-toc{
    margin:27px 0;
    padding:19px;

    background:#f7f5fb;

    border:1px solid #e6e1ef;
    border-radius:11px;
}

.article-toc-head{
    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:13px;
}

.article-toc-head > span{
    width:39px;
    height:39px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#6d58a0;

    border-radius:50%;
}

.article-toc-head small{
    display:block;

    color:var(--muted);

    font-size:11px;
}

.article-toc-head strong{
    color:var(--dark);

    font-size:14px;
}

.article-toc-links{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:6px;
}

.article-toc-links a{
    padding:8px 10px;

    background:#fff;
    color:#655f6c;

    border:1px solid #ebe7f0;
    border-radius:6px;

    font-size:12px;
}


/* =====================================================
   CONTENT SECTION
===================================================== */

.article-content-section{
    margin-top:39px;
    padding-top:33px;

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

    scroll-margin-top:90px;
}

.article-section-label{
    display:inline-block;

    margin-bottom:3px;

    color:var(--primary);

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

.article-content-section h2{
    margin-bottom:10px;

    color:var(--dark);

    font-size:23px;
    line-height:1.5;
}

.article-content-section h3{
    margin-top:19px;

    color:var(--dark);

    font-size:15px;
}

.article-content-section > p{
    margin-top:9px;
}


/* =====================================================
   KEY BOX
===================================================== */

.article-key-box{
    display:flex;
    align-items:center;

    gap:14px;

    margin:20px 0;
    padding:17px;

    background:#f4f0fa;

    border:1px solid #e4dded;
    border-radius:10px;
}

.article-key-icon{
    width:55px;
    height:55px;

    flex:0 0 55px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#6e58a1;

    border-radius:50%;

    font-size:18px;
    font-weight:bold;
}

.article-key-box strong{
    color:var(--dark);

    font-size:14px;
}

.article-key-box p{
    margin-top:3px;

    font-size:13px;
    line-height:1.7;
}


/* =====================================================
   ZODIAC LIST
===================================================== */

.article-zodiac-list{
    display:grid;

    gap:7px;

    margin-top:18px;
}

.article-zodiac-item{
    display:grid;
    grid-template-columns:32px 48px 1fr auto;
    align-items:center;

    gap:10px;

    padding:10px 13px;

    background:#faf9fc;

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

    transition:.2s;
}

.article-zodiac-item:hover{
    background:#fff;

    transform:translateX(-3px);
}

.article-zodiac-number{
    color:#aaa4af;

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

.article-zodiac-symbol{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border-radius:50%;

    font-size:20px;
}

.fire-zodiac{
    background:#fff0e8;
    color:#b76040;
}

.earth-zodiac{
    background:#f0f4e9;
    color:#687d4f;
}

.air-zodiac{
    background:#edf5f7;
    color:#547d88;
}

.water-zodiac{
    background:#eef0fa;
    color:#59669a;
}

.article-zodiac-item h3{
    margin:0;

    font-size:14px;
}

.article-zodiac-item p{
    color:#89838d;

    font-size:12px;
}

.article-zodiac-item > small{
    color:var(--muted);

    font-size:12px;
}


/* =====================================================
   INLINE CTA
===================================================== */

.article-inline-cta{
    display:flex;
    align-items:center;

    gap:11px;

    margin-top:18px;
    padding:14px;

    background:#f4f0fa;

    border-radius:9px;
}

.article-inline-cta > span{
    width:42px;
    height:42px;

    flex:0 0 42px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#735c9b;

    border-radius:50%;

    font-size:20px;
}

.article-inline-cta > div{
    flex:1;
}

.article-inline-cta small{
    display:block;

    color:var(--muted);

    font-size:11px;
}

.article-inline-cta strong{
    color:var(--dark);

    font-size:14px;
}

.article-inline-cta > a{
    color:var(--primary);

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


/* =====================================================
   TABLE
===================================================== */

.article-table-wrap{
    overflow-x:auto;

    margin-top:18px;

    border:1px solid var(--border);
    border-radius:10px;
}

.zodiac-dates-table{
    width:100%;

    border-collapse:collapse;

    min-width:620px;
}

.zodiac-dates-table th{
    padding:11px;

    background:#29243c;
    color:#fff;

    text-align:right;

    font-size:12px;
}

.zodiac-dates-table td{
    padding:10px 11px;

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

    color:#625e66;

    font-size:13px;
}

.zodiac-dates-table tbody tr:nth-child(even){
    background:#faf9fc;
}

.zodiac-dates-table tbody tr:last-child td{
    border-bottom:0;
}

.zodiac-dates-table a{
    color:var(--primary);

    font-weight:bold;
}


/* =====================================================
   NOTE
===================================================== */

.article-note{
    margin-top:13px;
    padding:14px;

    background:#fffaf0;

    border:1px solid #ede2c6;
    border-radius:8px;
}

.article-note strong{
    color:#846b36;

    font-size:13px;
}

.article-note p{
    margin-top:4px;

    color:#6e6654;

    font-size:13px;
    line-height:1.75;
}


/* =====================================================
   FIND ZODIAC
===================================================== */

.find-zodiac-example{
    display:flex;
    align-items:center;

    gap:13px;

    margin:18px 0;
    padding:17px;

    background:#f6f4fa;

    border:1px solid var(--border);
    border-radius:10px;
}

.find-example-icon{
    width:54px;
    height:54px;

    flex:0 0 54px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#725c99;

    border-radius:50%;

    font-size:20px;
    font-weight:bold;
}

.find-zodiac-example small{
    color:var(--primary);

    font-size:11px;
}

.find-zodiac-example h3{
    margin:0;

    font-size:15px;
}

.find-zodiac-example p{
    margin-top:3px;

    font-size:13px;
}


/* =====================================================
   ELEMENTS
===================================================== */

.article-elements-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:18px;
}

.article-element-card{
    padding:18px;

    border-radius:10px;
}

.article-element-icon{
    display:block;

    margin-bottom:6px;

    font-size:25px;
}

.article-element-card h3{
    margin:0;

    font-size:16px;
}

.article-element-card strong{
    display:block;

    margin:3px 0 5px;

    font-size:13px;
}

.article-element-card p{
    font-size:13px;
    line-height:1.75;
}

.article-fire{
    background:#fff3ec;
    border:1px solid #f1ded3;
}

.article-earth{
    background:#f3f6ee;
    border:1px solid #e0e7d6;
}

.article-air{
    background:#eff6f7;
    border:1px solid #dae7e9;
}

.article-water{
    background:#f0f2fa;
    border:1px solid #dde1f0;
}


.fire{
    background:#fff3ec;
    border:1px solid #f1ded3;
}

.earth{
    background:#f3f6ee;
    border:1px solid #e0e7d6;
}

.air{
    background:#eff6f7;
    border:1px solid #dae7e9;
}

.water{
    background:#f0f2fa;
    border:1px solid #dde1f0;
}


/* =====================================================
   MORE LINK
===================================================== */

.article-more-link{
    display:flex;
    align-items:center;

    gap:10px;

    margin-top:11px;
    padding:12px;

    background:#faf9fc;

    border:1px solid var(--border);
    border-radius:8px;
}

.article-more-link > span{
    font-size:21px;
}

.article-more-link > div{
    flex:1;
}

.article-more-link strong{
    color:var(--dark);

    font-size:13px;
}

.article-more-link p{
    font-size:12px;
}

.article-more-link > a{
    color:var(--primary);

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


/* =====================================================
   MODALITIES
===================================================== */

.article-modalities{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:9px;

    margin-top:18px;
}

.article-modalities > div{
    padding:16px;

    background:#faf9fc;

    border:1px solid var(--border);
    border-radius:9px;
}

.article-modalities > div > span{
    color:#aaa3b0;

    font-size:11px;
}

.article-modalities h3{
    margin:3px 0;

    font-size:14px;
}

.article-modalities strong{
    color:#766784;

    font-size:12px;
}

.article-modalities p{
    margin-top:5px;

    font-size:12px;
    line-height:1.7;
}

.article-text-link{
    display:inline-block;

    margin-top:13px;

    color:var(--primary);

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


/* =====================================================
   SYMBOL REFERENCE
===================================================== */

.zodiac-symbol-reference{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:7px;

    margin-top:18px;
}

.zodiac-symbol-reference > div{
    padding:12px;

    background:#faf9fc;

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

    text-align:center;
}

.zodiac-symbol-reference span{
    display:block;

    color:#70598f;

    font-size:24px;
}

.zodiac-symbol-reference strong{
    color:var(--dark);

    font-size:13px;
}


/* =====================================================
   SUN MOON
===================================================== */

.sun-moon-link-box{
    display:flex;
    align-items:center;

    gap:13px;

    margin-top:18px;
    padding:15px;

    background:#f2f2fa;

    border:1px solid #e0e0ed;
    border-radius:9px;
}

.sun-moon-icons{
    display:flex;

    gap:3px;
}

.sun-moon-icons span{
    width:35px;
    height:35px;

    display:grid;
    place-items:center;

    background:#fff;

    border-radius:50%;

    font-size:16px;
}

.sun-moon-link-box > div:nth-child(2){
    flex:1;
}

.sun-moon-link-box small{
    display:block;

    color:var(--muted);

    font-size:11px;
}

.sun-moon-link-box strong{
    color:var(--dark);

    font-size:14px;
}

.sun-moon-link-box p{
    font-size:12px;
}

.sun-moon-link-box > a{
    color:var(--primary);

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


/* =====================================================
   FEATURE LINK
===================================================== */

.article-feature-link{
    display:flex;
    align-items:center;

    gap:10px;

    margin-top:17px;
    padding:14px;

    background:#f7f5fa;

    border:1px solid var(--border);
    border-radius:9px;
}

.article-feature-link-icon{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#70599a;

    border-radius:50%;

    font-size:19px;
}

.article-feature-link > div{
    flex:1;
}

.article-feature-link small{
    display:block;

    color:var(--muted);

    font-size:11px;
}

.article-feature-link strong{
    color:var(--dark);

    font-size:14px;
}

.article-feature-link b{
    color:var(--primary);
}


/* =====================================================
   COMPARISON
===================================================== */

.astronomy-comparison{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:18px;
}

.astronomy-comparison > div{
    padding:18px;

    background:#f8f8fa;

    border:1px solid var(--border);
    border-radius:10px;
}

.comparison-icon{
    display:block;

    margin-bottom:5px;

    font-size:25px;
}

.astronomy-comparison h3{
    margin:0;

    font-size:15px;
}

.astronomy-comparison p{
    margin-top:5px;

    font-size:13px;
    line-height:1.75;
}


/* =====================================================
   FORMULA
===================================================== */

.article-formula{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:18px;

    margin:22px 0;
    padding:20px;

    background:#29243c;

    border-radius:10px;

    color:#fff;
}

.article-formula > div{
    text-align:center;
}

.article-formula strong{
    display:block;

    color:#e5c16b;

    font-size:22px;
}

.article-formula small{
    color:#bcb5c5;

    font-size:11px;
}

.article-formula > span{
    color:#8f879a;

    font-size:17px;
}


/* =====================================================
   PREDICTION LINKS
===================================================== */

.article-prediction-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);

    gap:7px;

    margin-top:18px;
}

.article-prediction-grid a{
    padding:12px 8px;

    background:#faf9fc;

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

    text-align:center;
}

.article-prediction-grid span{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    margin:0 auto 6px;

    background:#f0ecf7;
    color:#705a91;

    border-radius:50%;

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

.article-prediction-grid strong{
    display:block;

    color:var(--dark);

    font-size:13px;
}

.article-prediction-grid small{
    color:var(--muted);

    font-size:11px;
}


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

.article-author-box{
    display:flex;
    align-items:center;

    gap:14px;

    margin-top:38px;
    padding:18px;

    background:#f7f5fa;

    border:1px solid var(--border);
    border-radius:10px;
}

.article-author-symbol{
    width:55px;
    height:55px;

    flex:0 0 55px;

    display:grid;
    place-items:center;

    background:#2e2840;
    color:#e1bd69;

    border-radius:50%;

    font-size:24px;
}

.article-author-box span{
    display:block;

    color:var(--muted);

    font-size:11px;
}

.article-author-box strong{
    color:var(--dark);

    font-size:14px;
}

.article-author-box p{
    margin-top:3px;

    font-size:12px;
    line-height:1.7;
}

.article-author-box a{
    display:inline-block;

    margin-top:4px;

    color:var(--primary);

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


/* =====================================================
   DISCLAIMER
===================================================== */

.article-disclaimer-box{
    margin-top:12px;
    padding:15px;

    background:#fffaf0;

    border:1px solid #eee3c7;
    border-radius:9px;
}

.article-disclaimer-box strong{
    color:#816a37;

    font-size:13px;
}

.article-disclaimer-box p{
    margin-top:3px;

    color:#6d6655;

    font-size:12px;
    line-height:1.75;
}


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

.article-side-toc a{
    display:block;

    padding:8px 0;

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

    color:#625d67;

    font-size:13px;
}

.article-side-toc a:last-child{
    border-bottom:0;
}

.article-side-cta{
    padding:18px;

    background:
        linear-gradient(
            145deg,
            #2b2540,
            #45355a
        );

    border-radius:11px;

    text-align:center;

    color:#fff;
}

.article-side-cta > span{
    display:block;

    color:#e4bf6c;

    font-size:35px;
}

.article-side-cta strong{
    display:block;

    margin-top:3px;

    font-size:15px;
}

.article-side-cta p{
    margin-top:5px;

    color:#cec8d4;

    font-size:12px;
    line-height:1.7;
}

.article-side-cta a{
    display:inline-block;

    margin-top:10px;

    color:#e4c16f;

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


/* =====================================================
   RELATED ARTICLES
===================================================== */

.related-articles-section{
    padding:65px 0;

    background:#fff;
}

.related-article-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;
}

.related-article-card{
    padding:19px;

    background:#faf9fc;

    border:1px solid var(--border);
    border-radius:10px;
}

.related-article-icon{
    width:45px;
    height:45px;

    display:grid;
    place-items:center;

    margin-bottom:8px;

    background:#efebf7;
    color:#70588f;

    border-radius:50%;

    font-size:20px;
}

.related-article-card small{
    display:block;

    color:var(--primary);

    font-size:11px;
}

.related-article-card strong{
    display:block;

    margin:3px 0 9px;

    color:var(--dark);

    font-size:14px;
    line-height:1.6;
}

.related-article-card b{
    color:var(--primary);

    font-size:12px;
}


/* =====================================================
   NEXT ARTICLE
===================================================== */

.article-next-section{
    padding:50px 0;

    background:
        linear-gradient(
            135deg,
            #1d1933,
            #3a304e
        );

    color:#fff;
}

.article-next-inner{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:18px;
}

.article-next-icon{
    width:68px;
    height:68px;

    display:grid;
    place-items:center;

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

    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;

    font-size:29px;
}

.article-next-inner > div:nth-child(2) > span{
    color:#ddbc6c;

    font-size:12px;
}

.article-next-inner h2{
    font-size:21px;
}

.article-next-inner p{
    color:#cdc8d1;

    font-size:13px;
}

.article-next-inner > a{
    padding:9px 15px;

    background:#fff;
    color:#645174;

    border-radius:7px;

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


/* =====================================================
   TABLET
===================================================== */

@media(max-width:950px){

    .single-article-hero-inner{
        grid-template-columns:1fr 250px;
    }

    .article-zodiac-wheel{
        transform:scale(.78);
    }

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

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

    .single-article-hero-inner{
        display:block;

        min-height:auto;

        padding:48px 0;
    }

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

    .single-article-hero-content h1{
        font-size:29px;
    }

    .single-article-meta{
        justify-content:center;
    }

    .single-article-hero-visual{
        display:none;
    }


    .single-article-body{
        padding:22px 16px;
    }

    .article-toc-links{
        grid-template-columns:1fr;
    }

    .article-elements-grid,
    .astronomy-comparison{
        grid-template-columns:1fr;
    }

    .article-modalities{
        grid-template-columns:1fr;
    }

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

    .article-prediction-grid{
        grid-template-columns:1fr 1fr;
    }

    .article-zodiac-item{
        grid-template-columns:25px 43px 1fr;
    }

    .article-zodiac-item > small{
        display:none;
    }

    .article-inline-cta,
    .article-more-link,
    .sun-moon-link-box{
        flex-wrap:wrap;
    }

    .article-inline-cta > a,
    .article-more-link > a,
    .sun-moon-link-box > a{
        width:100%;

        padding-top:6px;

        text-align:center;
    }

    .related-article-grid{
        grid-template-columns:1fr;
    }

    .article-next-inner{
        grid-template-columns:1fr;

        text-align:center;
    }

    .article-next-icon{
        margin:auto;
    }

    .article-next-inner > a{
        justify-self:center;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:390px){

    .single-article-hero-content h1{
        font-size:26px;
    }

    .article-content-section h2{
        font-size:20px;
    }

    .zodiac-symbol-reference{
        grid-template-columns:1fr 1fr;
    }

    .article-prediction-grid{
        grid-template-columns:1fr;
    }

    .article-formula{
        gap:9px;
    }

    .article-formula strong{
        font-size:17px;
    }

}


/* =====================================================
   ABOUT PAGE
   /about/
===================================================== */


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

.about-hero{
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(124,91,190,.32),
            transparent 31%
        ),
        radial-gradient(
            circle at 15% 85%,
            rgba(224,185,90,.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #18152e,
            #33294b
        );

    color:#fff;
}

.about-hero-inner{
    min-height:460px;

    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:center;

    gap:45px;
}

.about-hero-label{
    display:inline-block;

    margin-bottom:7px;

    color:#e3c16f;

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

.about-hero-content h1{
    font-size:46px;
    line-height:1.3;
}

.about-hero-content > p{
    max-width:690px;

    margin-top:12px;

    color:#d1ccd9;

    font-size:16px;
    line-height:2;
}

.about-hero-content strong{
    color:#fff;
}

.about-hero-links{
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-top:20px;
}

.about-hero-links a{
    padding:9px 15px;

    border-radius:7px;

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

.about-hero-links a:first-child{
    background:#fff;
    color:#67539b;
}

.about-hero-links a:last-child{
    background:rgba(255,255,255,.06);
    color:#fff;

    border:1px solid rgba(255,255,255,.14);
}


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

.about-hero-visual{
    width:310px;
    height:310px;

    position:relative;

    display:grid;
    place-items:center;

    margin:auto;
}

.about-orbit{
    position:absolute;

    border-radius:50%;
}

.about-orbit-one{
    width:290px;
    height:290px;

    border:1px solid rgba(255,255,255,.11);
}

.about-orbit-two{
    width:205px;
    height:205px;

    border:1px dashed rgba(255,255,255,.12);
}

.about-logo-circle{
    width:120px;
    height:120px;

    position:relative;
    z-index:2;

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

    background:
        linear-gradient(
            145deg,
            #4c3d72,
            #29233d
        );

    border:1px solid rgba(255,255,255,.13);
    border-radius:50%;

    box-shadow:0 20px 55px rgba(0,0,0,.27);
}

.about-logo-circle > span{
    color:#e6c16b;

    font-size:31px;
}

.about-logo-circle strong{
    margin-top:2px;

    font-size:14px;
}

.about-logo-circle small{
    color:#bdb6c6;

    font-size:11px;
}

.about-zodiac{
    width:40px;
    height:40px;

    position:absolute;

    display:grid;
    place-items:center;

    background:#2e2842;
    color:#dfbf70;

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;

    font-size:18px;
}

.az1{
    top:-3px;
    left:135px;
}

.az2{
    top:135px;
    right:-3px;
}

.az3{
    bottom:-3px;
    left:135px;
}

.az4{
    top:135px;
    left:-3px;
}

.about-star{
    position:absolute;

    color:#dfc279;

    font-size:12px;
}

.abs1{
    top:55px;
    left:55px;
}

.abs2{
    right:55px;
    bottom:55px;
}

.abs3{
    top:58px;
    right:56px;
}


/* =====================================================
   INTRO
===================================================== */

.about-introduction{
    padding:65px 0;

    background:#fff;
}

.about-intro-card{
    max-width:980px;

    display:flex;
    align-items:flex-start;

    gap:20px;

    margin:auto;
    padding:30px;

    background:#faf9fc;

    border:1px solid var(--border);
    border-radius:14px;
}

.about-intro-symbol{
    width:70px;
    height:70px;

    flex:0 0 70px;

    display:grid;
    place-items:center;

    background:#2e2842;
    color:#e2bf6b;

    border-radius:50%;

    font-size:30px;
}

.about-small-title{
    color:var(--primary);

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

.about-intro-card h2{
    margin:3px 0 8px;

    color:var(--dark);

    font-size:23px;
}

.about-intro-card p{
    margin-top:7px;

    color:#625d67;

    font-size:14px;
    line-height:1.9;
}


/* =====================================================
   MISSION
===================================================== */

.about-mission-section{
    padding:65px 0;

    background:#f7f6fa;
}

.about-mission-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:11px;
}

.about-mission-card{
    padding:21px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:11px;
}

.about-mission-icon{
    width:43px;
    height:43px;

    display:grid;
    place-items:center;

    margin-bottom:10px;

    background:#f0ecf8;
    color:#705a9a;

    border-radius:50%;

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

.about-mission-card h3{
    color:var(--dark);

    font-size:16px;
}

.about-mission-card p{
    margin-top:6px;

    color:#6e6872;

    font-size:13px;
    line-height:1.8;
}


/* =====================================================
   CONTENT TYPES
===================================================== */

.about-content-section{
    padding:70px 0;

    background:#fff;
}

.about-content-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:11px;
}

.about-content-card{
    display:flex;

    gap:14px;

    padding:20px;

    background:#faf9fc;

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

    transition:.2s;
}

.about-content-card:hover{
    transform:translateY(-3px);

    background:#fff;

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

.about-content-icon{
    width:51px;
    height:51px;

    flex:0 0 51px;

    display:grid;
    place-items:center;

    background:#efebf7;
    color:#705990;

    border-radius:50%;

    font-size:20px;
    font-weight:bold;
}

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

    font-size:11px;
}

.about-content-card h3{
    margin-top:1px;

    color:var(--dark);

    font-size:16px;
}

.about-content-card p{
    margin-top:4px;

    color:#6d6871;

    font-size:13px;
    line-height:1.75;
}

.about-content-card div > span{
    display:inline-block;

    margin-top:8px;

    color:var(--primary);

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

.about-content-wide{
    grid-column:1 / -1;
}


/* =====================================================
   EDITORIAL
===================================================== */

.about-editorial-section{
    padding:70px 0;

    background:
        linear-gradient(
            135deg,
            #201b36,
            #372d4c
        );

    color:#fff;
}

.about-editorial-container{
    display:grid;
    grid-template-columns:.75fr 1.25fr;

    gap:55px;
}

.about-editorial-heading > span{
    color:#e1be6d;

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

.about-editorial-heading h2{
    margin:4px 0 8px;

    font-size:28px;
}

.about-editorial-heading p{
    color:#c8c2ce;

    font-size:14px;
    line-height:1.8;
}

.about-editorial-list{
    display:grid;

    gap:8px;
}

.about-editorial-item{
    display:grid;
    grid-template-columns:40px 1fr;

    gap:11px;

    padding:13px;

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

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

.about-editorial-item > span{
    width:35px;
    height:35px;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.07);
    color:#e0bd6c;

    border-radius:50%;

    font-size:11px;
}

.about-editorial-item h3{
    font-size:15px;
}

.about-editorial-item p{
    margin-top:3px;

    color:#c9c3cf;

    font-size:12px;
    line-height:1.7;
}


/* =====================================================
   DIFFERENCE
===================================================== */

.about-difference-section{
    padding:70px 0;

    background:#fff;
}

.about-difference-grid{
    max-width:900px;

    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;

    gap:17px;

    margin:27px auto 0;
}

.about-difference-card{
    padding:25px;

    border-radius:13px;
}

.astronomy-card{
    background:#eef5f7;

    border:1px solid #dce9ec;
}

.astrology-card{
    background:#f4f0fa;

    border:1px solid #e5dff0;
}

.about-difference-icon{
    font-size:31px;
}

.about-difference-card > span{
    display:block;

    margin-top:7px;

    color:var(--muted);

    font-size:11px;
}

.about-difference-card h3{
    color:var(--dark);

    font-size:17px;
}

.about-difference-card p{
    margin-top:7px;

    color:#625e67;

    font-size:13px;
    line-height:1.85;
}

.about-difference-vs{
    width:45px;
    height:45px;

    display:grid;
    place-items:center;

    background:#29243b;
    color:#e1bf6d;

    border-radius:50%;

    font-size:18px;
}

.about-learn-more{
    max-width:900px;

    display:flex;
    align-items:center;

    gap:11px;

    margin:12px auto 0;
    padding:13px;

    background:#faf9fc;

    border:1px solid var(--border);
    border-radius:8px;
}

.about-learn-more > span{
    width:39px;
    height:39px;

    display:grid;
    place-items:center;

    background:#efebf7;
    color:#715a95;

    border-radius:50%;
}

.about-learn-more > div{
    flex:1;
}

.about-learn-more small{
    display:block;

    color:var(--muted);

    font-size:11px;
}

.about-learn-more strong{
    color:var(--dark);

    font-size:13px;
}

.about-learn-more > a{
    color:var(--primary);

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


/* =====================================================
   VALUES
===================================================== */

.about-values-section{
    padding:65px 0;

    background:#f7f6fa;
}

.about-values-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:10px;
}

.about-value-card{
    padding:20px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:10px;
}

.about-value-card > span{
    color:#9a8eaa;

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

.about-value-card h3{
    margin-top:7px;

    color:var(--dark);

    font-size:16px;
}

.about-value-card p{
    margin-top:5px;

    color:#6e6872;

    font-size:12px;
    line-height:1.75;
}


/* =====================================================
   DISCLAIMER
===================================================== */

.about-disclaimer-section{
    padding:60px 0;

    background:#fff;
}

.about-disclaimer-box{
    max-width:980px;

    display:flex;
    align-items:flex-start;

    gap:18px;

    margin:auto;
    padding:25px;

    background:#fffaf0;

    border:1px solid #eee2c5;
    border-radius:12px;
}

.about-disclaimer-icon{
    width:52px;
    height:52px;

    flex:0 0 52px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#856d39;

    border-radius:50%;

    font-family:serif;
    font-size:19px;
    font-weight:bold;
}

.about-disclaimer-box > div:last-child > span{
    color:#8b733e;

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

.about-disclaimer-box h2{
    margin:2px 0 7px;

    color:#453d2d;

    font-size:19px;
}

.about-disclaimer-box p{
    margin-top:6px;

    color:#6c6452;

    font-size:13px;
    line-height:1.85;
}


/* =====================================================
   HOW TO USE
===================================================== */

.about-use-section{
    padding:70px 0;

    background:#f7f6fa;
}

.about-use-steps{
    max-width:920px;

    display:grid;

    gap:7px;

    margin:auto;
}

.about-use-step{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:13px;

    padding:14px;

    background:#fff;

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

    transition:.2s;
}

.about-use-step:hover{
    transform:translateX(-3px);

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

.about-use-number{
    width:48px;
    height:48px;

    display:grid;
    place-items:center;

    background:#f0ecf7;
    color:#6f5897;

    border-radius:50%;

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

.about-use-step small{
    color:var(--muted);

    font-size:11px;
}

.about-use-step h3{
    color:var(--dark);

    font-size:15px;
}

.about-use-step p{
    color:#79727e;

    font-size:12px;
}

.about-use-step b{
    color:var(--primary);
}


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

.about-contact-section{
    padding:60px 0;

    background:#fff;
}

.about-contact-box{
    max-width:960px;

    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:17px;

    margin:auto;
    padding:25px;

    background:
        linear-gradient(
            135deg,
            #211c36,
            #3b3052
        );

    border-radius:13px;

    color:#fff;
}

.about-contact-icon{
    width:60px;
    height:60px;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.07);
    color:#e2bf6d;

    border-radius:50%;

    font-size:22px;
}

.about-contact-box > div:nth-child(2) > span{
    color:#dfbd6c;

    font-size:11px;
}

.about-contact-box h2{
    font-size:19px;
}

.about-contact-box p{
    max-width:600px;

    margin-top:4px;

    color:#cdc7d3;

    font-size:13px;
    line-height:1.75;
}

.about-contact-box > a{
    padding:9px 15px;

    background:#fff;
    color:#66529b;

    border-radius:7px;

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


/* =====================================================
   EXPLORE
===================================================== */

.about-explore-section{
    padding:65px 0;

    background:#f7f6fa;
}

.about-explore-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:10px;
}

.about-explore-grid a{
    padding:19px;

    background:#fff;

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

    text-align:center;

    transition:.2s;
}

.about-explore-grid a:hover{
    transform:translateY(-3px);

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

.about-explore-grid span{
    display:block;

    margin-bottom:6px;

    color:#705990;

    font-size:27px;
}

.about-explore-grid strong{
    display:block;

    color:var(--dark);

    font-size:14px;
}

.about-explore-grid small{
    color:var(--muted);

    font-size:11px;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:950px){

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

    .about-hero-visual{
        transform:scale(.82);
    }

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

    .about-editorial-container{
        grid-template-columns:1fr;
        gap:30px;
    }

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

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:650px){

    .about-hero-inner{
        display:block;

        min-height:auto;

        padding:52px 0;

        text-align:center;
    }

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

    .about-hero-content > p{
        font-size:15px;
    }

    .about-hero-links{
        justify-content:center;
    }

    .about-hero-visual{
        display:none;
    }


    .about-intro-card{
        display:block;

        padding:22px 17px;
    }

    .about-intro-symbol{
        width:58px;
        height:58px;

        margin-bottom:12px;

        font-size:25px;
    }


    .about-mission-grid,
    .about-content-grid,
    .about-values-grid,
    .about-explore-grid{
        grid-template-columns:1fr;
    }

    .about-content-wide{
        grid-column:auto;
    }


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

    .about-difference-vs{
        margin:auto;
    }


    .about-learn-more{
        flex-wrap:wrap;
    }

    .about-learn-more > a{
        width:100%;

        padding-top:6px;

        text-align:center;
    }


    .about-disclaimer-box{
        display:block;
    }

    .about-disclaimer-icon{
        margin-bottom:10px;
    }


    .about-contact-box{
        grid-template-columns:1fr;

        text-align:center;
    }

    .about-contact-icon{
        margin:auto;
    }

    .about-contact-box > a{
        justify-self:center;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:390px){

    .about-hero-content h1{
        font-size:30px;
    }

    .about-content-card{
        display:block;
    }

    .about-content-icon{
        margin-bottom:10px;
    }

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

    .about-use-step > b{
        display:none;
    }

}


/* =====================================================
   CONTACT PAGE
   /contact/
===================================================== */


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

.contact-hero{
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(120,90,190,.30),
            transparent 31%
        ),
        radial-gradient(
            circle at 12% 90%,
            rgba(226,190,105,.11),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #18152e,
            #342a4b
        );

    color:#fff;
}

.contact-hero-inner{
    min-height:430px;

    display:grid;
    grid-template-columns:1.15fr .85fr;
    align-items:center;

    gap:50px;
}

.contact-hero-label{
    display:inline-block;

    margin-bottom:6px;

    color:#e3c16f;

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

.contact-hero-content h1{
    font-size:43px;
    line-height:1.3;
}

.contact-hero-content > p{
    max-width:700px;

    margin-top:11px;

    color:#d0cad7;

    font-size:13px;
    line-height:2;
}

.contact-hero-content strong{
    color:#fff;
}


/* EMAIL */

.contact-main-email{
    max-width:380px;

    display:flex;
    align-items:center;

    gap:11px;

    margin-top:19px;
    padding:11px 13px;

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

    border:1px solid rgba(255,255,255,.11);
    border-radius:9px;
}

.contact-main-email > span{
    width:42px;
    height:42px;

    flex:0 0 42px;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.08);
    color:#e4c16f;

    border-radius:50%;
}

.contact-main-email small{
    display:block;

    color:#aaa4b1;

    font-size:12px;
}

.contact-main-email strong{
    font-size:13px;
}


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

.contact-hero-visual{
    width:290px;
    height:290px;

    position:relative;

    display:grid;
    place-items:center;

    margin:auto;
}

.contact-orbit{
    position:absolute;

    border-radius:50%;
}

.contact-orbit-one{
    width:275px;
    height:275px;

    border:1px solid rgba(255,255,255,.11);
}

.contact-orbit-two{
    width:190px;
    height:190px;

    border:1px dashed rgba(255,255,255,.12);
}

.contact-center-icon{
    width:105px;
    height:105px;

    position:relative;
    z-index:2;

    display:grid;
    place-items:center;

    background:
        linear-gradient(
            145deg,
            #4d3e70,
            #29233d
        );

    color:#e5c16b;

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;

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

    font-size:33px;
}

.contact-hero-symbol{
    width:38px;
    height:38px;

    position:absolute;

    display:grid;
    place-items:center;

    background:#2d2741;
    color:#dfbf70;

    border:1px solid rgba(255,255,255,.1);
    border-radius:50%;

    font-size:17px;
}

.chs1{
    top:-2px;
    left:126px;
}

.chs2{
    top:126px;
    right:-2px;
}

.chs3{
    bottom:-2px;
    left:126px;
}

.chs4{
    top:126px;
    left:-2px;
}

.contact-star{
    position:absolute;

    color:#dfc279;

    font-size:12px;
}

.cstar1{
    top:53px;
    left:55px;
}

.cstar2{
    right:55px;
    bottom:53px;
}

.cstar3{
    right:55px;
    top:53px;
}


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

.contact-quick-section{
    padding:40px 0;

    background:#fff;
}

.contact-quick-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;
}

.contact-quick-card{
    display:flex;
    align-items:center;

    gap:12px;

    padding:17px;

    background:#faf9fc;

    border:1px solid var(--border);
    border-radius:10px;
}

.contact-quick-icon{
    width:46px;
    height:46px;

    flex:0 0 46px;

    display:grid;
    place-items:center;

    background:#efebf7;
    color:#705990;

    border-radius:50%;

    font-size:17px;
}

.contact-quick-card small{
    display:block;

    color:var(--muted);

    font-size:12px;
}

.contact-quick-card h2{
    color:var(--dark);

    font-size:13px;
}

.contact-quick-card a{
    color:var(--primary);

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

.contact-quick-card p{
    margin-top:2px;

    color:#756f79;

    font-size:12px;
    line-height:1.65;
}


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

.contact-main-section{
    padding:65px 0;

    background:#f7f6fa;
}

.contact-main-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 310px;

    gap:24px;
    align-items:start;
}

.contact-form-wrapper{
    padding:28px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:13px;
}

.contact-section-heading > span{
    color:var(--primary);

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

.contact-section-heading h2{
    margin-top:2px;

    color:var(--dark);

    font-size:24px;
}

.contact-section-heading p{
    max-width:670px;

    margin-top:5px;

    color:#706a74;

    font-size:13px;
    line-height:1.8;
}


/* =====================================================
   FORM
===================================================== */

.contact-form{
    margin-top:22px;
}

.contact-form-row{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:11px;
}

.contact-field{
    margin-bottom:13px;
}

.contact-field label{
    display:block;

    margin-bottom:5px;

    color:#4c4750;

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

.contact-field label > span:not(.optional-field){
    color:#ad5353;
}

.optional-field{
    margin-right:4px;

    color:#99929d;

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

.contact-field input,
.contact-field select,
.contact-field textarea{
    width:100%;

    padding:11px 12px;

    background:#faf9fc;
    color:#514c55;

    border:1px solid #dfdbe4;
    border-radius:7px;

    outline:none;

    font-family:inherit;
    font-size:13px;

    transition:.2s;
}

.contact-field input,
.contact-field select{
    min-height:43px;
}

.contact-field textarea{
    min-height:170px;

    resize:vertical;

    line-height:1.8;
}

.contact-field input:focus,
.contact-field select:focus,
.contact-field textarea:focus{
    background:#fff;

    border-color:#9d8abb;

    box-shadow:0 0 0 3px rgba(112,89,144,.07);
}

.contact-field input::placeholder,
.contact-field textarea::placeholder{
    color:#aaa4ad;
}

.contact-field-help{
    display:block;

    margin-top:4px;

    color:#99939d;

    font-size:12px;
}

.contact-honeypot{
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    overflow:hidden !important;

    clip:rect(1px,1px,1px,1px) !important;
}

.contact-privacy-note{
    display:flex;
    align-items:flex-start;

    gap:8px;

    margin-top:4px;
    padding:10px 11px;

    background:#f7f6fa;

    border-radius:7px;
}

.contact-privacy-note > span{
    font-size:15px;
}

.contact-privacy-note p{
    color:#79727d;

    font-size:12px;
    line-height:1.7;
}

.contact-privacy-note a{
    color:var(--primary);

    font-weight:bold;
}

.contact-submit-button{
    width:100%;

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

    gap:9px;

    margin-top:13px;
    padding:12px 18px;

    background:
        linear-gradient(
            135deg,
            #65518c,
            #8064a5
        );

    color:#fff;

    border:0;
    border-radius:7px;

    cursor:pointer;

    font-family:inherit;
    font-size:13px;
    font-weight:bold;

    transition:.2s;
}

.contact-submit-button:hover{
    transform:translateY(-1px);

    box-shadow:0 8px 20px rgba(78,60,110,.18);
}

.contact-submit-button b{
    font-size:15px;
}

.contact-direct-email{
    margin-top:18px;

    text-align:center;
}

.contact-direct-email > span{
    display:block;

    position:relative;

    color:#aaa4ad;

    font-size:12px;
}

.contact-direct-email p{
    margin-top:7px;

    color:#77717b;

    font-size:12px;
}

.contact-direct-email a{
    display:inline-block;

    margin-top:3px;

    color:var(--primary);

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


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

.contact-side{
    display:grid;

    gap:12px;
}

.contact-side-card{
    padding:19px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:10px;
}

.contact-side-icon{
    width:47px;
    height:47px;

    display:grid;
    place-items:center;

    margin-bottom:9px;

    background:#2e2842;
    color:#e3bf6d;

    border-radius:50%;

    font-size:20px;
}

.contact-side-card h2{
    color:var(--dark);

    font-size:15px;
}

.contact-side-card p{
    margin-top:6px;

    color:#746e78;

    font-size:12px;
    line-height:1.75;
}

.contact-side-card > a{
    display:inline-block;

    margin-top:8px;

    color:var(--primary);

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

.contact-response-card > span{
    display:block;

    margin-bottom:6px;

    font-size:22px;
}


/* =====================================================
   PUBLISHERS
===================================================== */

.contact-publishers-section{
    padding:70px 0;

    background:#fff;
}

.publisher-grid{
    max-width:1000px;

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

    gap:13px;

    margin:auto;
}

.publisher-card{
    position:relative;

    padding:23px;

    background:#faf9fc;

    border:1px solid var(--border);
    border-radius:12px;
}

.publisher-card-head{
    display:flex;
    align-items:center;

    gap:11px;

    padding-bottom:14px;

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

.publisher-avatar{
    width:55px;
    height:55px;

    flex:0 0 55px;

    display:grid;
    place-items:center;

    background:
        linear-gradient(
            145deg,
            #342d4c,
            #5a4779
        );

    color:#e3c06d;

    border-radius:50%;

    font-size:19px;
    font-weight:bold;
}

.publisher-card-head span{
    display:block;

    color:var(--muted);

    font-size:12px;
}

.publisher-card-head h3{
    color:var(--dark);

    font-size:15px;
}

.publisher-details{
    display:grid;

    gap:11px;

    margin-top:16px;
}

.publisher-detail{
    display:flex;
    align-items:flex-start;

    gap:9px;
}

.publisher-detail-icon{
    width:34px;
    height:34px;

    flex:0 0 34px;

    display:grid;
    place-items:center;

    background:#efebf7;
    color:#705990;

    border-radius:50%;

    font-size:14px;
}

.publisher-detail small{
    display:block;

    color:#9b959f;

    font-size:12px;
}

.publisher-detail p,
.publisher-detail a{
    color:#5f5964;

    font-size:13px;
    line-height:1.7;
}

.publisher-detail a:hover{
    color:var(--primary);
}

.publisher-country{
    margin-top:17px;
    padding-top:11px;

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

.publisher-country span{
    display:inline-block;

    padding:4px 9px;

    background:#efebf7;
    color:#705990;

    border-radius:20px;

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


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

.contact-reasons-section{
    padding:70px 0;

    background:#f7f6fa;
}

.contact-reasons-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;
}

.contact-reason-card{
    padding:19px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:10px;
}

.contact-reason-card > span{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    margin-bottom:9px;

    background:#f0ecf7;
    color:#705990;

    border-radius:50%;

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

.contact-reason-card h3{
    color:var(--dark);

    font-size:13px;
}

.contact-reason-card p{
    margin-top:5px;

    color:#736d77;

    font-size:12px;
    line-height:1.75;
}


/* =====================================================
   PRIVACY
===================================================== */

.contact-privacy-section{
    padding:60px 0;

    background:#fff;
}

.contact-privacy-box{
    max-width:980px;

    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:15px;

    margin:auto;
    padding:22px;

    background:#f3f5fa;

    border:1px solid #e0e3eb;
    border-radius:11px;
}

.contact-privacy-icon{
    width:53px;
    height:53px;

    display:grid;
    place-items:center;

    background:#fff;

    border-radius:50%;

    font-size:20px;
}

.contact-privacy-box > div:nth-child(2) > span{
    color:var(--primary);

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

.contact-privacy-box h2{
    color:var(--dark);

    font-size:15px;
}

.contact-privacy-box p{
    max-width:680px;

    margin-top:4px;

    color:#6e6872;

    font-size:12px;
    line-height:1.75;
}

.contact-privacy-box > a{
    color:var(--primary);

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


/* =====================================================
   IMPORTANT
===================================================== */

.contact-important-section{
    padding:0 0 65px;

    background:#fff;
}

.contact-important-box{
    max-width:980px;

    display:flex;
    align-items:flex-start;

    gap:15px;

    margin:auto;
    padding:21px;

    background:#fffaf0;

    border:1px solid #eee2c6;
    border-radius:11px;
}

.contact-important-icon{
    width:46px;
    height:46px;

    flex:0 0 46px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#876e39;

    border-radius:50%;

    font-family:serif;
    font-size:18px;
    font-weight:bold;
}

.contact-important-box h2{
    color:#453e2e;

    font-size:14px;
}

.contact-important-box p{
    margin-top:5px;

    color:#6c6453;

    font-size:12px;
    line-height:1.8;
}


/* =====================================================
   EXPLORE
===================================================== */

.contact-explore-section{
    padding:65px 0;

    background:#f7f6fa;
}

.contact-explore-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:10px;
}

.contact-explore-grid a{
    padding:18px;

    background:#fff;

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

    text-align:center;

    transition:.2s;
}

.contact-explore-grid a:hover{
    transform:translateY(-3px);

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

.contact-explore-grid span{
    display:block;

    margin-bottom:5px;

    color:#705990;

    font-size:25px;
}

.contact-explore-grid strong{
    display:block;

    color:var(--dark);

    font-size:13px;
}

.contact-explore-grid small{
    color:var(--muted);

    font-size:12px;
}


/* =====================================================
   TABLET
===================================================== */

@media(max-width:950px){

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

    .contact-hero-visual{
        transform:scale(.82);
    }

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

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

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

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:700px){

    .contact-hero-inner{
        display:block;

        min-height:auto;

        padding:50px 0;

        text-align:center;
    }

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

    .contact-main-email{
        margin:19px auto 0;

        text-align:right;
    }

    .contact-hero-visual{
        display:none;
    }


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


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

    .contact-form-wrapper{
        padding:21px 16px;
    }

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


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


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


    .contact-privacy-box{
        grid-template-columns:1fr;

        text-align:center;
    }

    .contact-privacy-icon{
        margin:auto;
    }

    .contact-privacy-box > a{
        justify-self:center;
    }


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

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:390px){

    .contact-hero-content h1{
        font-size:30px;
    }

    .contact-main-email{
        align-items:flex-start;
    }

    .contact-main-email strong{
        font-size:12px;
    }

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

    .contact-important-box{
        display:block;
    }

    .contact-important-icon{
        margin-bottom:10px;
    }

}






/* =====================================================
   PRIVACY POLICY
   /privacy-policy/
===================================================== */


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

.privacy-hero{
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(119,90,185,.29),
            transparent 31%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(221,188,104,.11),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #18152e,
            #342b4b
        );

    color:#fff;
}

.privacy-hero-inner{
    min-height:420px;

    display:grid;
    grid-template-columns:1.2fr .8fr;
    align-items:center;

    gap:45px;
}

.privacy-hero-label{
    display:inline-block;

    margin-bottom:6px;

    color:#e2c06e;

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

.privacy-hero-content h1{
    font-size:42px;
    line-height:1.3;
}

.privacy-hero-content > p{
    max-width:720px;

    margin-top:11px;

    color:#d0cad7;

    font-size:13px;
    line-height:2;
}

.privacy-hero-content strong{
    color:#fff;
}

.privacy-update{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-top:18px;
    padding:7px 11px;

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

    border:1px solid rgba(255,255,255,.1);
    border-radius:6px;
}

.privacy-update span{
    color:#aaa4b2;

    font-size:12px;
}

.privacy-update strong{
    color:#fff;

    font-size:12px;
}


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

.privacy-hero-visual{
    width:280px;
    height:280px;

    position:relative;

    display:grid;
    place-items:center;

    margin:auto;
}

.privacy-orbit{
    position:absolute;

    border-radius:50%;
}

.privacy-orbit-one{
    width:265px;
    height:265px;

    border:1px solid rgba(255,255,255,.11);
}

.privacy-orbit-two{
    width:185px;
    height:185px;

    border:1px dashed rgba(255,255,255,.12);
}

.privacy-lock{
    width:115px;
    height:115px;

    position:relative;
    z-index:2;

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

    background:
        linear-gradient(
            145deg,
            #4a3c6d,
            #29233d
        );

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;

    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.privacy-lock > span{
    font-size:27px;
}

.privacy-lock small{
    margin-top:3px;

    color:#bdb6c7;

    font-size:11px;
}

.privacy-lock strong{
    font-size:13px;
}

.privacy-symbol{
    width:38px;
    height:38px;

    position:absolute;

    display:grid;
    place-items:center;

    background:#2e2842;
    color:#dfbf70;

    border:1px solid rgba(255,255,255,.11);
    border-radius:50%;

    font-size:17px;
}

.ps1{
    top:2px;
    left:120px;
}

.ps2{
    right:1px;
    top:120px;
}

.ps3{
    bottom:1px;
    left:120px;
}


/* =====================================================
   SUMMARY
===================================================== */

.privacy-summary-section{
    padding:45px 0;

    background:#fff;
}

.privacy-summary-box{
    max-width:980px;

    display:flex;
    align-items:flex-start;

    gap:16px;

    margin:auto;
    padding:23px;

    background:#f5f3f9;

    border:1px solid #e5e0ed;
    border-radius:11px;
}

.privacy-summary-icon{
    width:50px;
    height:50px;

    flex:0 0 50px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#705990;

    border-radius:50%;

    font-family:serif;
    font-size:19px;
    font-weight:bold;
}

.privacy-summary-box > div:last-child > span{
    color:var(--primary);

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

.privacy-summary-box h2{
    color:var(--dark);

    font-size:17px;
}

.privacy-summary-box p{
    margin-top:5px;

    color:#6e6872;

    font-size:13px;
    line-height:1.8;
}


/* =====================================================
   MAIN LAYOUT
===================================================== */

.privacy-content-section{
    padding:65px 0;

    background:#f7f6fa;
}

.privacy-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;

    gap:25px;
    align-items:start;
}

.privacy-article{
    display:grid;

    gap:11px;
}


/* =====================================================
   CONTENT BLOCK
===================================================== */

.privacy-block{
    display:grid;
    grid-template-columns:48px 1fr;

    gap:14px;

    padding:24px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:11px;
}

.privacy-number{
    width:43px;
    height:43px;

    display:grid;
    place-items:center;

    background:#f0ecf7;
    color:#705990;

    border-radius:50%;

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

.privacy-block h2{
    color:var(--dark);

    font-size:18px;
    line-height:1.4;
}

.privacy-block h3{
    margin-top:16px;

    color:#514a58;

    font-size:13px;
}

.privacy-block p{
    margin-top:7px;

    color:#6e6872;

    font-size:13px;
    line-height:1.9;
}

.privacy-block a{
    color:var(--primary);

    font-weight:bold;
}

.privacy-list{
    margin:9px 0 4px;

    padding-right:19px;
}

.privacy-list li{
    margin:5px 0;

    color:#6b6570;

    font-size:13px;
    line-height:1.75;
}

.privacy-list li::marker{
    color:#8067a3;
}


/* =====================================================
   CHECK LIST
===================================================== */

.privacy-check-list{
    display:grid;

    gap:7px;

    margin-top:12px;

    list-style:none;
}

.privacy-check-list li{
    display:flex;
    align-items:flex-start;

    gap:8px;

    padding:9px 10px;

    background:#faf9fc;

    border:1px solid #eeebf1;
    border-radius:6px;

    color:#67616b;

    font-size:12px;
    line-height:1.65;
}

.privacy-check-list li span{
    width:20px;
    height:20px;

    flex:0 0 20px;

    display:grid;
    place-items:center;

    background:#ece7f4;
    color:#715b96;

    border-radius:50%;

    font-size:12px;
}


/* =====================================================
   COOKIE TYPES
===================================================== */

.privacy-cookie-types{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:8px;

    margin:14px 0;
}

.privacy-cookie-types > div{
    padding:13px;

    background:#faf9fc;

    border:1px solid #ebe7ef;
    border-radius:7px;
}

.privacy-cookie-types strong{
    color:#504957;

    font-size:13px;
}

.privacy-cookie-types p{
    margin-top:3px;

    font-size:12px;
    line-height:1.6;
}


/* =====================================================
   HIGHLIGHT
===================================================== */

.privacy-highlight{
    display:flex;
    align-items:flex-start;

    gap:9px;

    margin:13px 0;
    padding:12px;

    background:#fff9eb;

    border:1px solid #eee2c5;
    border-radius:7px;
}

.privacy-highlight > span{
    flex:0 0 auto;

    padding:4px 7px;

    background:#fff;
    color:#806a3a;

    border-radius:4px;

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

.privacy-highlight p{
    margin:0;

    color:#6e654f;
}


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

.privacy-contact-email{
    display:flex;
    align-items:center;

    gap:9px;

    margin:14px 0;
    padding:12px;

    background:#f7f5fa;

    border:1px solid #e9e5ed;
    border-radius:7px;
}

.privacy-contact-email > span{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#715b96;

    border-radius:50%;
}

.privacy-contact-email small{
    display:block;

    color:#96909a;

    font-size:12px;
}

.privacy-contact-email a{
    font-size:13px;
}


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

.privacy-sidebar{
    display:grid;

    gap:12px;

    position:sticky;
    top:15px;
}

.privacy-side-card{
    padding:18px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:10px;
}

.privacy-side-card h2{
    color:var(--dark);

    font-size:14px;
}

.privacy-toc nav{
    display:grid;

    margin-top:10px;
}

.privacy-toc nav a{
    display:flex;
    align-items:center;

    gap:8px;

    padding:7px 0;

    color:#69636e;

    border-bottom:1px solid #efedf1;

    font-size:12px;
}

.privacy-toc nav a:last-child{
    border-bottom:0;
}

.privacy-toc nav a:hover{
    color:var(--primary);
}

.privacy-toc nav span{
    width:24px;
    height:24px;

    flex:0 0 24px;

    display:grid;
    place-items:center;

    background:#f1edf6;
    color:#725c96;

    border-radius:50%;

    font-size:11px;
}

.privacy-side-icon{
    display:block;

    margin-bottom:7px;

    font-size:24px;
}

.privacy-side-card p{
    margin-top:5px;

    color:#746e78;

    font-size:12px;
    line-height:1.75;
}

.privacy-side-card > a{
    display:inline-block;

    margin-top:8px;

    color:var(--primary);

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


/* =====================================================
   IMPORTANT LINKS
===================================================== */

.privacy-links-section{
    padding:65px 0;

    background:#fff;
}

.privacy-links-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:9px;
}

.privacy-links-grid > a{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:11px;

    padding:15px;

    background:#faf9fc;

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

    transition:.2s;
}

.privacy-links-grid > a:hover{
    transform:translateY(-2px);

    background:#fff;

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

.privacy-links-grid > a > span{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    background:#efebf7;
    color:#705990;

    border-radius:50%;

    font-size:17px;
}

.privacy-links-grid strong{
    display:block;

    color:var(--dark);

    font-size:13px;
}

.privacy-links-grid small{
    color:#89838d;

    font-size:12px;
}

.privacy-links-grid b{
    color:var(--primary);
}


/* =====================================================
   FINAL
===================================================== */

.privacy-final-section{
    padding:0 0 70px;

    background:#fff;
}

.privacy-final-box{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:16px;

    padding:25px;

    background:
        linear-gradient(
            135deg,
            #201b35,
            #3b3052
        );

    color:#fff;

    border-radius:13px;
}

.privacy-final-icon{
    width:59px;
    height:59px;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.07);
    color:#e3c06d;

    border-radius:50%;

    font-size:25px;
}

.privacy-final-box > div:nth-child(2) > span{
    color:#e1be6c;

    font-size:12px;
}

.privacy-final-box h2{
    font-size:17px;
}

.privacy-final-box p{
    max-width:650px;

    margin-top:4px;

    color:#ccc6d2;

    font-size:12px;
    line-height:1.7;
}

.privacy-final-box > a{
    padding:9px 13px;

    background:#fff;
    color:#67529a;

    border-radius:7px;

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


/* =====================================================
   TABLET
===================================================== */

@media(max-width:950px){

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

    .privacy-hero-visual{
        transform:scale(.82);
    }

    .privacy-layout{
        grid-template-columns:minmax(0,1fr) 250px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:700px){

    .privacy-hero-inner{
        display:block;

        min-height:auto;

        padding:50px 0;

        text-align:center;
    }

    .privacy-hero-content h1{
        font-size:32px;
    }

    .privacy-hero-visual{
        display:none;
    }


    .privacy-summary-box{
        display:block;
    }

    .privacy-summary-icon{
        margin-bottom:10px;
    }


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

    .privacy-sidebar{
        position:static;
    }


    .privacy-block{
        grid-template-columns:1fr;

        padding:19px 16px;
    }


    .privacy-cookie-types{
        grid-template-columns:1fr;
    }


    .privacy-links-grid{
        grid-template-columns:1fr;
    }


    .privacy-final-box{
        grid-template-columns:1fr;

        text-align:center;
    }

    .privacy-final-icon{
        margin:auto;
    }

    .privacy-final-box > a{
        justify-self:center;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:390px){

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

    .privacy-highlight{
        display:block;
    }

    .privacy-highlight > span{
        display:inline-block;

        margin-bottom:6px;
    }

    .privacy-links-grid > a{
        grid-template-columns:auto 1fr;
    }

    .privacy-links-grid > a > b{
        display:none;
    }

}




/* =====================================================
   COOKIE POLICY
   /cookies/
===================================================== */


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

.cookies-hero{
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(119,90,185,.30),
            transparent 31%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(222,187,101,.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #18152e,
            #342a4b
        );

    color:#fff;
}

.cookies-hero-inner{
    min-height:420px;

    display:grid;
    grid-template-columns:1.2fr .8fr;
    align-items:center;

    gap:45px;
}

.cookies-hero-label{
    display:inline-block;

    margin-bottom:6px;

    color:#e2c06e;

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

.cookies-hero-content h1{
    font-size:42px;
    line-height:1.3;
}

.cookies-hero-content > p{
    max-width:720px;

    margin-top:8px;

    color:#d0cad7;

    font-size:13px;
    line-height:2;
}

.cookies-hero-content strong{
    color:#fff;
}

.cookies-update{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-top:17px;
    padding:7px 11px;

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

    border:1px solid rgba(255,255,255,.1);
    border-radius:6px;
}

.cookies-update span{
    color:#aaa4b2;

    font-size:12px;
}

.cookies-update strong{
    color:#fff;

    font-size:12px;
}


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

.cookies-hero-visual{
    width:280px;
    height:280px;

    position:relative;

    display:grid;
    place-items:center;

    margin:auto;
}

.cookies-orbit{
    position:absolute;

    border-radius:50%;
}

.cookies-orbit-one{
    width:265px;
    height:265px;

    border:1px solid rgba(255,255,255,.11);
}

.cookies-orbit-two{
    width:185px;
    height:185px;

    border:1px dashed rgba(255,255,255,.12);
}

.cookies-main-symbol{
    width:115px;
    height:115px;

    position:relative;
    z-index:2;

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

    background:
        linear-gradient(
            145deg,
            #4a3c6d,
            #29233d
        );

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;

    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.cookies-main-symbol > span{
    font-size:30px;
}

.cookies-main-symbol strong{
    margin-top:2px;

    font-size:13px;
}

.cookies-main-symbol small{
    color:#bdb6c7;

    font-size:11px;
}

.cookies-floating-symbol{
    width:38px;
    height:38px;

    position:absolute;

    display:grid;
    place-items:center;

    background:#2e2842;
    color:#dfbf70;

    border:1px solid rgba(255,255,255,.11);
    border-radius:50%;

    font-size:17px;
}

.cfs1{
    top:2px;
    left:120px;
}

.cfs2{
    right:1px;
    top:120px;
}

.cfs3{
    bottom:1px;
    left:120px;
}

.cookies-star{
    position:absolute;

    color:#e1c06e;

    font-size:12px;
}

.cs1{
    left:45px;
    top:55px;
}

.cs2{
    right:45px;
    bottom:55px;
}


/* =====================================================
   SUMMARY
===================================================== */

.cookies-summary-section{
    padding:45px 0;

    background:#fff;
}

.cookies-summary-box{
    max-width:980px;

    display:flex;
    align-items:flex-start;

    gap:16px;

    margin:auto;
    padding:23px;

    background:#f5f3f9;

    border:1px solid #e5e0ed;
    border-radius:11px;
}

.cookies-summary-icon{
    width:50px;
    height:50px;

    flex:0 0 50px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#705990;

    border-radius:50%;

    font-family:serif;
    font-size:19px;
    font-weight:bold;
}

.cookies-summary-box > div:last-child > span{
    color:var(--primary);

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

.cookies-summary-box h2{
    color:var(--dark);

    font-size:17px;
}

.cookies-summary-box p{
    margin-top:5px;

    color:#6e6872;

    font-size:13px;
    line-height:1.8;
}


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

.cookies-content-section{
    padding:65px 0;

    background:#f7f6fa;
}

.cookies-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;

    gap:25px;
    align-items:start;
}

.cookies-article{
    display:grid;

    gap:11px;
}


/* =====================================================
   CONTENT BLOCKS
===================================================== */

.cookies-block{
    display:grid;
    grid-template-columns:48px 1fr;

    gap:14px;

    padding:24px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:11px;
}

.cookies-number{
    width:43px;
    height:43px;

    display:grid;
    place-items:center;

    background:#f0ecf7;
    color:#705990;

    border-radius:50%;

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

.cookies-block h2{
    color:var(--dark);

    font-size:18px;
    line-height:1.4;
}

.cookies-block h3{
    margin-top:14px;

    color:#514a58;

    font-size:13px;
}

.cookies-block p{
    margin-top:7px;

    color:#6e6872;

    font-size:13px;
    line-height:1.9;
}

.cookies-block a{
    color:var(--primary);

    font-weight:bold;
}


/* =====================================================
   CHECK LIST
===================================================== */

.cookies-check-list{
    display:grid;

    gap:7px;

    margin-top:13px;

    list-style:none;
}

.cookies-check-list li{
    display:flex;
    align-items:flex-start;

    gap:9px;

    padding:10px;

    background:#faf9fc;

    border:1px solid #eeebf1;
    border-radius:7px;
}

.cookies-check-list li > span{
    width:22px;
    height:22px;

    flex:0 0 22px;

    display:grid;
    place-items:center;

    background:#ece7f4;
    color:#715b96;

    border-radius:50%;

    font-size:12px;
}

.cookies-check-list strong{
    display:block;

    color:#514a57;

    font-size:13px;
}

.cookies-check-list p{
    margin-top:2px;

    font-size:12px;
    line-height:1.6;
}


/* =====================================================
   COOKIE TYPES
===================================================== */

.cookies-types-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:8px;

    margin-top:15px;
}

.cookie-type-card{
    padding:15px;

    background:#faf9fc;

    border:1px solid #e9e5ed;
    border-radius:8px;
}

.cookie-type-head{
    display:flex;
    align-items:center;

    gap:8px;
}

.cookie-type-head > span{
    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    background:#eee9f5;
    color:#705990;

    border-radius:50%;

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

.cookie-type-head small{
    display:block;

    color:#9b949f;

    font-size:11px;
}

.cookie-type-head h3{
    margin:0;

    font-size:13px;
}

.cookie-type-card p{
    font-size:12px;
    line-height:1.7;
}

.cookie-status{
    display:inline-block;

    margin-top:8px;
    padding:4px 7px;

    background:#e9f3ed;
    color:#52745e;

    border-radius:20px;

    font-size:11px;
}

.cookie-status.optional{
    background:#f1edf6;
    color:#705990;
}


/* =====================================================
   COMPARISON
===================================================== */

.cookies-comparison{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:8px;

    margin-top:12px;
}

.cookies-comparison > div{
    padding:15px;

    background:#faf9fc;

    border:1px solid #ebe7ef;
    border-radius:8px;
}

.cookies-comparison-icon{
    width:39px;
    height:39px;

    display:grid;
    place-items:center;

    background:#efebf7;
    color:#705990;

    border-radius:50%;

    font-size:15px;
}

.cookies-comparison h3{
    margin-top:8px;
}


/* =====================================================
   ADS NOTE
===================================================== */

.cookies-ad-note{
    display:flex;
    align-items:flex-start;

    gap:10px;

    margin-top:14px;
    padding:12px;

    background:#fff9eb;

    border:1px solid #eee2c5;
    border-radius:7px;
}

.cookies-ad-note > span{
    flex:0 0 auto;

    padding:4px 7px;

    background:#fff;
    color:#806a3a;

    border-radius:4px;

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

.cookies-ad-note strong{
    display:block;

    color:#594d34;

    font-size:12px;
}

.cookies-ad-note p{
    margin-top:2px;

    color:#6e654f;

    font-size:12px;
}


/* =====================================================
   CONSENT
===================================================== */

.cookies-consent-example{
    display:flex;
    align-items:flex-start;

    gap:10px;

    margin-top:13px;
    padding:13px;

    background:#f4f1f8;

    border:1px solid #e5dfec;
    border-radius:8px;
}

.cookies-consent-icon{
    width:39px;
    height:39px;

    flex:0 0 39px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#705990;

    border-radius:50%;

    font-size:15px;
}

.cookies-consent-example strong{
    color:#514a58;

    font-size:13px;
}

.cookies-consent-example p{
    margin-top:2px;

    font-size:12px;
}


/* =====================================================
   LIST
===================================================== */

.cookies-list{
    margin:10px 0 0;

    padding-right:20px;
}

.cookies-list li{
    margin:5px 0;

    color:#6b6570;

    font-size:13px;
    line-height:1.7;
}

.cookies-list li::marker{
    color:#8067a3;
}

.cookies-warning{
    display:flex;
    align-items:flex-start;

    gap:8px;

    margin-top:13px;
    padding:11px;

    background:#fff9eb;

    border:1px solid #eee2c5;
    border-radius:7px;
}

.cookies-warning > span{
    width:25px;
    height:25px;

    flex:0 0 25px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#8b7139;

    border-radius:50%;

    font-weight:bold;
}

.cookies-warning p{
    margin:0;

    color:#6e654f;

    font-size:12px;
}


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

.cookies-contact-email{
    display:flex;
    align-items:center;

    gap:9px;

    margin:14px 0;
    padding:12px;

    background:#f7f5fa;

    border:1px solid #e9e5ed;
    border-radius:7px;
}

.cookies-contact-email > span{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#715b96;

    border-radius:50%;
}

.cookies-contact-email small{
    display:block;

    color:#96909a;

    font-size:12px;
}

.cookies-contact-email a{
    font-size:13px;
}


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

.cookies-sidebar{
    display:grid;

    gap:12px;

    position:sticky;
    top:15px;
}

.cookies-side-card{
    padding:18px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:10px;
}

.cookies-side-card h2{
    color:var(--dark);

    font-size:14px;
}

.cookies-toc nav{
    display:grid;

    margin-top:10px;
}

.cookies-toc nav a{
    display:flex;
    align-items:center;

    gap:8px;

    padding:7px 0;

    color:#69636e;

    border-bottom:1px solid #efedf1;

    font-size:12px;
}

.cookies-toc nav a:last-child{
    border-bottom:0;
}

.cookies-toc nav a:hover{
    color:var(--primary);
}

.cookies-toc nav span{
    width:24px;
    height:24px;

    flex:0 0 24px;

    display:grid;
    place-items:center;

    background:#f1edf6;
    color:#725c96;

    border-radius:50%;

    font-size:11px;
}

.cookies-side-icon{
    display:block;

    margin-bottom:7px;

    font-size:23px;
}

.cookies-side-card p{
    margin-top:5px;

    color:#746e78;

    font-size:12px;
    line-height:1.75;
}

.cookies-side-card > a{
    display:inline-block;

    margin-top:8px;

    color:var(--primary);

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


/* =====================================================
   CONTROL
===================================================== */

.cookies-control-section{
    padding:70px 0;

    background:#fff;
}

.cookies-control-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:10px;
}

.cookies-control-card{
    position:relative;

    padding:20px;

    background:#faf9fc;

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

    text-align:center;
}

.cookies-control-card > span{
    position:absolute;

    top:10px;
    right:11px;

    color:#b0a9b4;

    font-size:12px;
}

.cookies-control-icon{
    width:50px;
    height:50px;

    display:grid;
    place-items:center;

    margin:0 auto 9px;

    background:#efebf7;
    color:#705990;

    border-radius:50%;

    font-size:19px;
}

.cookies-control-card h3{
    color:var(--dark);

    font-size:13px;
}

.cookies-control-card p{
    margin-top:5px;

    color:#736d77;

    font-size:12px;
    line-height:1.75;
}


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

.cookies-related-section{
    padding:65px 0;

    background:#f7f6fa;
}

.cookies-related-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:9px;
}

.cookies-related-grid > a{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:11px;

    padding:15px;

    background:#fff;

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

    transition:.2s;
}

.cookies-related-grid > a:hover{
    transform:translateY(-2px);

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

.cookies-related-grid > a > span{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    background:#efebf7;
    color:#705990;

    border-radius:50%;

    font-size:17px;
}

.cookies-related-grid strong{
    display:block;

    color:var(--dark);

    font-size:13px;
}

.cookies-related-grid small{
    color:#89838d;

    font-size:12px;
}

.cookies-related-grid b{
    color:var(--primary);
}


/* =====================================================
   FINAL
===================================================== */

.cookies-final-section{
    padding:65px 0;

    background:#fff;
}

.cookies-final-box{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:16px;

    padding:25px;

    background:
        linear-gradient(
            135deg,
            #201b35,
            #3b3052
        );

    color:#fff;

    border-radius:13px;
}

.cookies-final-icon{
    width:59px;
    height:59px;

    display:grid;
    place-items:center;

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

    border-radius:50%;

    font-size:25px;
}

.cookies-final-box > div:nth-child(2) > span{
    color:#e1be6c;

    font-size:12px;
}


.cookies-final-box h2{
    font-size:17px;
}

.cookies-final-box p{
    max-width:650px;

    margin-top:4px;

    color:#ccc6d2;

    font-size:12px;
    line-height:1.7;
}

.cookies-final-box > a{
    padding:9px 13px;

    background:#fff;
    color:#67529a;

    border-radius:7px;

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


/* =====================================================
   TABLET
===================================================== */

@media(max-width:950px){

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

    .cookies-hero-visual{
        transform:scale(.82);
    }

    .cookies-layout{
        grid-template-columns:minmax(0,1fr) 250px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:700px){

    .cookies-hero-inner{
        display:block;

        min-height:auto;

        padding:50px 0;

        text-align:center;
    }

    .cookies-hero-content h1{
        font-size:32px;
    }

    .cookies-hero-visual{
        display:none;
    }


    .cookies-summary-box{
        display:block;
    }

    .cookies-summary-icon{
        margin-bottom:10px;
    }


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

    .cookies-sidebar{
        position:static;
    }


    .cookies-block{
        grid-template-columns:1fr;

        padding:19px 16px;
    }


    .cookies-types-grid,
    .cookies-comparison{
        grid-template-columns:1fr;
    }


    .cookies-control-grid{
        grid-template-columns:1fr;
    }


    .cookies-related-grid{
        grid-template-columns:1fr;
    }


    .cookies-final-box{
        grid-template-columns:1fr;

        text-align:center;
    }

    .cookies-final-icon{
        margin:auto;
    }

    .cookies-final-box > a{
        justify-self:center;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:390px){

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

    .cookies-ad-note,
    .cookies-consent-example{
        display:block;
    }

    .cookies-ad-note > span{
        display:inline-block;

        margin-bottom:7px;
    }

    .cookies-consent-icon{
        margin-bottom:8px;
    }

    .cookies-related-grid > a{
        grid-template-columns:auto 1fr;
    }

    .cookies-related-grid > a > b{
        display:none;
    }

}


/* =====================================================
   TERMS OF USE
   /terms/
===================================================== */


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

.terms-hero{
    position:relative;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(119,90,185,.30),
            transparent 31%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(222,187,101,.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #18152e,
            #342a4b
        );

    color:#fff;
}

.terms-hero-inner{
    min-height:420px;

    display:grid;
    grid-template-columns:1.2fr .8fr;
    align-items:center;

    gap:45px;
}

.terms-hero-label{
    display:inline-block;

    margin-bottom:6px;

    color:#e2c06e;

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

.terms-hero-content h1{
    font-size:42px;
    line-height:1.3;
}

.terms-hero-content > p{
    max-width:720px;

    margin-top:8px;

    color:#d0cad7;

    font-size:13px;
    line-height:2;
}

.terms-hero-content strong{
    color:#fff;
}

.terms-update{
    display:inline-flex;
    align-items:center;

    gap:8px;

    margin-top:17px;
    padding:7px 11px;

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

    border:1px solid rgba(255,255,255,.1);
    border-radius:6px;
}

.terms-update span{
    color:#aaa4b2;

    font-size:12px;
}

.terms-update strong{
    color:#fff;

    font-size:12px;
}


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

.terms-hero-visual{
    width:280px;
    height:280px;

    position:relative;

    display:grid;
    place-items:center;

    margin:auto;
}

.terms-orbit{
    position:absolute;

    border-radius:50%;
}

.terms-orbit-one{
    width:265px;
    height:265px;

    border:1px solid rgba(255,255,255,.11);
}

.terms-orbit-two{
    width:185px;
    height:185px;

    border:1px dashed rgba(255,255,255,.12);
}

.terms-main-symbol{
    width:115px;
    height:115px;

    position:relative;
    z-index:2;

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

    background:
        linear-gradient(
            145deg,
            #4a3c6d,
            #29233d
        );

    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;

    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.terms-main-symbol > span{
    color:#e2bf6d;

    font-family:serif;
    font-size:35px;
}

.terms-main-symbol strong{
    font-size:13px;
}

.terms-main-symbol small{
    color:#bdb6c7;

    font-size:11px;
}

.terms-floating-symbol{
    width:38px;
    height:38px;

    position:absolute;

    display:grid;
    place-items:center;

    background:#2e2842;
    color:#dfbf70;

    border:1px solid rgba(255,255,255,.11);
    border-radius:50%;

    font-size:17px;
}

.tfs1{
    top:2px;
    left:120px;
}

.tfs2{
    right:1px;
    top:120px;
}

.tfs3{
    bottom:1px;
    left:120px;
}

.terms-star{
    position:absolute;

    color:#e1c06e;

    font-size:12px;
}

.ts1{
    left:45px;
    top:55px;
}

.ts2{
    right:45px;
    bottom:55px;
}


/* =====================================================
   SUMMARY
===================================================== */

.terms-summary-section{
    padding:45px 0;

    background:#fff;
}

.terms-summary-box{
    max-width:980px;

    display:flex;
    align-items:flex-start;

    gap:16px;

    margin:auto;
    padding:23px;

    background:#f5f3f9;

    border:1px solid #e5e0ed;
    border-radius:11px;
}

.terms-summary-icon{
    width:50px;
    height:50px;

    flex:0 0 50px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#705990;

    border-radius:50%;

    font-family:serif;
    font-size:19px;
    font-weight:bold;
}

.terms-summary-box > div:last-child > span{
    color:var(--primary);

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

.terms-summary-box h2{
    color:var(--dark);

    font-size:17px;
}

.terms-summary-box p{
    margin-top:5px;

    color:#6e6872;

    font-size:13px;
    line-height:1.8;
}


/* =====================================================
   MAIN LAYOUT
===================================================== */

.terms-content-section{
    padding:65px 0;

    background:#f7f6fa;
}

.terms-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;

    gap:25px;
    align-items:start;
}

.terms-article{
    display:grid;

    gap:11px;
}


/* =====================================================
   CONTENT BLOCK
===================================================== */

.terms-block{
    display:grid;
    grid-template-columns:48px 1fr;

    gap:14px;

    padding:24px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:11px;
}

.terms-number{
    width:43px;
    height:43px;

    display:grid;
    place-items:center;

    background:#f0ecf7;
    color:#705990;

    border-radius:50%;

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

.terms-block h2{
    color:var(--dark);

    font-size:18px;
    line-height:1.4;
}

.terms-block h3{
    margin-top:14px;

    color:#514a58;

    font-size:13px;
}

.terms-block p{
    margin-top:7px;

    color:#6e6872;

    font-size:13px;
    line-height:1.9;
}

.terms-block a{
    color:var(--primary);

    font-weight:bold;
}

.terms-list{
    margin:10px 0 5px;

    padding-right:20px;
}

.terms-list li{
    margin:5px 0;

    color:#6b6570;

    font-size:13px;
    line-height:1.75;
}

.terms-list li::marker{
    color:#8067a3;
}


/* =====================================================
   WARNING
===================================================== */

.terms-warning-box{
    display:flex;
    align-items:flex-start;

    gap:10px;

    margin:14px 0;
    padding:13px;

    background:#fff9eb;

    border:1px solid #eee1c1;
    border-radius:8px;
}

.terms-warning-box > span{
    width:32px;
    height:32px;

    flex:0 0 32px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#8c7034;

    border-radius:50%;

    font-weight:bold;
}

.terms-warning-box strong{
    display:block;

    color:#574a31;

    font-size:13px;
}

.terms-warning-box p{
    margin-top:3px;

    color:#6f654e;

    font-size:12px;
}


/* =====================================================
   PROFESSIONAL ADVICE
===================================================== */

.terms-advice-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:8px;

    margin:14px 0;
}

.terms-advice-grid > div{
    padding:13px;

    background:#faf9fc;

    border:1px solid #ebe7ef;
    border-radius:8px;
}

.terms-advice-grid > div > span{
    width:37px;
    height:37px;

    display:grid;
    place-items:center;

    margin-bottom:7px;

    background:#efebf7;
    color:#705990;

    border-radius:50%;

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

.terms-advice-grid strong{
    display:block;

    color:#514a57;

    font-size:13px;
}

.terms-advice-grid p{
    margin-top:3px;

    font-size:12px;
    line-height:1.6;
}


/* =====================================================
   INTELLECTUAL PROPERTY
===================================================== */

.terms-permission-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:8px;

    margin-top:14px;
}

.terms-permission-card{
    display:flex;
    align-items:flex-start;

    gap:9px;

    padding:12px;

    border-radius:7px;
}

.terms-permission-card.allowed{
    background:#f2f8f4;

    border:1px solid #dcecdf;
}

.terms-permission-card.denied{
    background:#fff5f5;

    border:1px solid #eedddd;
}

.terms-permission-card > span{
    width:27px;
    height:27px;

    flex:0 0 27px;

    display:grid;
    place-items:center;

    background:#fff;

    border-radius:50%;

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

.terms-permission-card.allowed > span{
    color:#5d8067;
}

.terms-permission-card.denied > span{
    color:#9b6262;
}

.terms-permission-card strong{
    color:#514a57;

    font-size:12px;
}

.terms-permission-card p{
    margin-top:2px;

    font-size:12px;
    line-height:1.6;
}


/* =====================================================
   DENIED LIST
===================================================== */

.terms-denied-list{
    display:grid;

    gap:7px;

    margin-top:12px;

    list-style:none;
}

.terms-denied-list li{
    display:flex;
    align-items:flex-start;

    gap:8px;

    padding:9px 10px;

    background:#faf9fc;

    border:1px solid #eeeaf1;
    border-radius:6px;

    color:#69626d;

    font-size:12px;
    line-height:1.65;
}

.terms-denied-list li span{
    width:21px;
    height:21px;

    flex:0 0 21px;

    display:grid;
    place-items:center;

    background:#f5eaea;
    color:#986363;

    border-radius:50%;

    font-size:13px;
}


/* =====================================================
   AD NOTE
===================================================== */

.terms-advertising-note{
    display:flex;
    align-items:flex-start;

    gap:9px;

    margin:13px 0;
    padding:12px;

    background:#fff9eb;

    border:1px solid #eee2c5;
    border-radius:7px;
}

.terms-advertising-note > span{
    flex:0 0 auto;

    padding:4px 7px;

    background:#fff;
    color:#806a3a;

    border-radius:4px;

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

.terms-advertising-note p{
    margin:0;

    color:#6e654f;

    font-size:12px;
}


/* =====================================================
   POLICY LINKS
===================================================== */

.terms-policy-links{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:8px;

    margin-top:13px;
}

.terms-policy-links a{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:8px;

    padding:11px;

    background:#faf9fc;

    border:1px solid #ebe7ef;
    border-radius:7px;
}

.terms-policy-links a > span{
    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    background:#fff;

    border-radius:50%;

    font-size:14px;
}

.terms-policy-links strong{
    display:block;

    color:#514a57;

    font-size:12px;
}

.terms-policy-links small{
    display:block;

    color:#8f8993;

    font-size:11px;
}

.terms-policy-links b{
    color:var(--primary);
}


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

.terms-contact-email{
    display:flex;
    align-items:center;

    gap:9px;

    margin:14px 0;
    padding:12px;

    background:#f7f5fa;

    border:1px solid #e9e5ed;
    border-radius:7px;
}

.terms-contact-email > span{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:grid;
    place-items:center;

    background:#fff;
    color:#715b96;

    border-radius:50%;
}

.terms-contact-email small{
    display:block;

    color:#96909a;

    font-size:12px;
}

.terms-contact-email a{
    font-size:13px;
}


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

.terms-sidebar{
    display:grid;

    gap:12px;

    position:sticky;
    top:15px;
}

.terms-side-card{
    padding:18px;

    background:#fff;

    border:1px solid var(--border);
    border-radius:10px;
}

.terms-side-card h2{

    color:var(--dark);

    font-size:14px;
}

.terms-toc nav{
    display:grid;

    margin-top:10px;
}

.terms-toc nav a{
    display:flex;
    align-items:center;

    gap:8px;

    padding:7px 0;

    color:#69636e;

    border-bottom:1px solid #efedf1;

    font-size:12px;
}

.terms-toc nav a:last-child{
    border-bottom:0;
}

.terms-toc nav a:hover{
    color:var(--primary);
}

.terms-toc nav span{
    width:24px;
    height:24px;

    flex:0 0 24px;

    display:grid;
    place-items:center;

    background:#f1edf6;
    color:#725c96;

    border-radius:50%;

    font-size:11px;
}

.terms-side-icon{
    display:block;

    margin-bottom:7px;

    font-size:23px;
}

.terms-side-card p{
    margin-top:5px;

    color:#746e78;

    font-size:12px;
    line-height:1.75;
}

.terms-side-card > a{
    display:inline-block;

    margin-top:8px;

    color:var(--primary);

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


/* =====================================================
   PRINCIPLES
===================================================== */

.terms-principles-section{
    padding:70px 0;

    background:#fff;
}

.terms-principles-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:10px;
}

.terms-principle-card{
    position:relative;

    padding:19px;

    background:#faf9fc;

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

    text-align:center;
}

.terms-principle-card > span{
    position:absolute;

    top:10px;
    right:11px;

    color:#aaa4af;

    font-size:12px;
}

.terms-principle-icon{
    width:49px;
    height:49px;

    display:grid;
    place-items:center;

    margin:0 auto 8px;

    background:#efebf7;
    color:#705990;

    border-radius:50%;

    font-size:18px;
    font-weight:bold;
}

.terms-principle-card h3{
    color:var(--dark);

    font-size:13px;
}

.terms-principle-card p{
    margin-top:5px;

    color:#736d77;

    font-size:12px;
    line-height:1.7;
}


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

.terms-related-section{
    padding:65px 0;

    background:#f7f6fa;
}

.terms-related-grid{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:9px;
}

.terms-related-grid > a{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:11px;

    padding:15px;

    background:#fff;

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

    transition:.2s;
}

.terms-related-grid > a:hover{
    transform:translateY(-2px);

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

.terms-related-grid > a > span{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    background:#efebf7;
    color:#705990;

    border-radius:50%;

    font-size:17px;
}

.terms-related-grid strong{
    display:block;

    color:var(--dark);

    font-size:13px;
}

.terms-related-grid small{
    color:#89838d;

    font-size:12px;
}

.terms-related-grid b{
    color:var(--primary);
}


/* =====================================================
   FINAL
===================================================== */

.terms-final-section{
    padding:65px 0;

    background:#fff;
}

.terms-final-box{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;

    gap:16px;

    padding:25px;

    background:
        linear-gradient(
            135deg,
            #201b35,
            #3b3052
        );

    color:#fff;

    border-radius:13px;
}

.terms-final-icon{
    width:59px;
    height:59px;

    display:grid;
    place-items:center;

    background:rgba(255,255,255,.07);
    color:#e3c06d;

    border-radius:50%;

    font-family:serif;
    font-size:29px;
}

.terms-final-box > div:nth-child(2) > span{
    color:#e1be6c;

    font-size:12px;
}

.terms-final-box h2{
    font-size:17px;
}

.terms-final-box p{
    max-width:650px;

    margin-top:4px;

    color:#ccc6d2;

    font-size:12px;
    line-height:1.7;
}

.terms-final-box > a{
    padding:9px 13px;

    background:#fff;
    color:#67529a;

    border-radius:7px;

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


/* =====================================================
   TABLET
===================================================== */

@media(max-width:950px){

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

    .terms-hero-visual{
        transform:scale(.82);
    }

    .terms-layout{
        grid-template-columns:minmax(0,1fr) 250px;
    }

    .terms-principles-grid{
        grid-template-columns:1fr 1fr;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width:700px){

    .terms-hero-inner{
        display:block;

        min-height:auto;

        padding:50px 0;

        text-align:center;
    }

    .terms-hero-content h1{
        font-size:32px;
    }

    .terms-hero-visual{
        display:none;
    }


    .terms-summary-box{
        display:block;
    }

    .terms-summary-icon{
        margin-bottom:10px;
    }


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

    .terms-sidebar{
        position:static;
    }


    .terms-block{
        grid-template-columns:1fr;

        padding:19px 16px;
    }


    .terms-advice-grid,
    .terms-permission-grid,
    .terms-policy-links{
        grid-template-columns:1fr;
    }


    .terms-principles-grid{
        grid-template-columns:1fr;
    }


    .terms-related-grid{
        grid-template-columns:1fr;
    }


    .terms-final-box{
        grid-template-columns:1fr;

        text-align:center;
    }

    .terms-final-icon{
        margin:auto;
    }

    .terms-final-box > a{
        justify-self:center;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media(max-width:390px){

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

    .terms-warning-box,
    .terms-advertising-note{
        display:block;
    }

    .terms-warning-box > span{
        margin-bottom:8px;
    }

    .terms-advertising-note > span{
        display:inline-block;

        margin-bottom:7px;
    }

    .terms-related-grid > a{
        grid-template-columns:auto 1fr;
    }

    .terms-related-grid > a > b{
        display:none;
    }

}


.contact-hp{
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    overflow:hidden !important;

    clip:rect(0,0,0,0) !important;
    clip-path:inset(50%) !important;

    white-space:nowrap !important;

    left:-9999px !important;
}



/* =====================================================
   DYNAMIC ARTICLES
===================================================== */

.article-card-visual{
    position:relative;
    overflow:hidden;
}

.article-card-visual img{
    width:100%;
    height:210px;

    display:block;

    object-fit:cover;
}

.featured-article-visual{
    position:relative;
    overflow:hidden;
}

.featured-article-visual img{
    width:100%;
    height:100%;

    min-height:280px;

    display:block;

    object-fit:cover;
}

.articles-count{
    display:inline-block;

    margin-right:7px;
    padding:3px 8px;

    background:#f0ecf7;
    color:#705990;

    border-radius:20px;

    font-size:8px;
}

.article-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-top:12px;
}

.article-card-footer > span{
    color:#96909b;

    font-size:7px;
}

.pagination-dots{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:0 4px;

    color:#928c97;
}

.articles-empty{
    grid-column:1 / -1;

    padding:50px 20px;

    background:#fff;

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

    text-align:center;
}

.articles-empty > span{
    display:block;

    margin-bottom:8px;

    color:#705990;

    font-size:30px;
}

.articles-empty h3{
    color:var(--dark);

    font-size:16px;
}

.articles-empty p{
    margin-top:5px;

    color:#77717b;

    font-size:9px;
}


@media(max-width:650px){

    .article-card-visual img{
        height:190px;
    }

    .featured-article-visual img{
        min-height:220px;
    }

    .article-card-footer{
        align-items:flex-start;
        flex-direction:column;
    }

}



.single-article-body img{display:block;max-width:100%;height:auto;margin:25px auto;border-radius:12px}
.single-article-body figure{margin:28px 0;text-align:center}
.single-article-body figcaption{margin-top:7px;color:#777589;font-size:12px}



/* =========================================================
   ARTICLE HOROSCOPE LINKS
   بطاقات روابط داخل المقالات
========================================================= */

.article-horoscope-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 26px 0 30px;
}


/* CARD */
.article-horoscope-links > a {
    display: flex;
    align-items: center;
    gap: 15px;

    min-width: 0;
    padding: 17px 18px;

    background: #fff;
    border: 1px solid #e7e4ee;
    border-radius: 14px;

    color: #292331;
    text-decoration: none;

    box-shadow: 0 4px 16px rgba(39, 29, 55, 0.05);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}


/* HOVER */
.article-horoscope-links > a:hover {
    transform: translateY(-3px);

    border-color: #c9b8df;

    background: #fdfbff;

    box-shadow:
        0 10px 28px rgba(39, 29, 55, 0.10);
}


/* ICON */
.article-horoscope-links > a > span {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 52px;

    width: 52px;
    height: 52px;

    border-radius: 13px;

    background: linear-gradient(
        135deg,
        #f5f0fa,
        #eee6f7
    );

    border: 1px solid #e5daef;

    font-size: 25px;
    line-height: 1;
}


/* TEXT AREA */
.article-horoscope-links > a > div {
    display: flex;
    flex-direction: column;
    gap: 4px;

    min-width: 0;
    flex: 1;
}


/* TITLE */
.article-horoscope-links > a strong {
    display: block;

    margin: 0;

    color: #292331;

    font-size: 17px;
    font-weight: 800;
    line-height: 1.5;
}


/* DESCRIPTION */
.article-horoscope-links > a small {
    display: block;

    color: #77717e;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;
}


/* ARROW */
.article-horoscope-links > a > b {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 32px;

    width: 32px;
    height: 32px;

    border-radius: 50%;

    background: #f3eef8;

    color: #75548f;

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

    transition:
        transform .2s ease,
        background-color .2s ease;
}


/* ARROW HOVER */
.article-horoscope-links > a:hover > b {
    transform: translateX(-3px);
    background: #e8ddf2;
}


/* ACCESSIBILITY */
.article-horoscope-links > a:focus-visible {
    outline: 3px solid rgba(117, 84, 143, 0.25);
    outline-offset: 3px;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .article-horoscope-links {
        grid-template-columns: 1fr;
        gap: 11px;
        margin: 22px 0 26px;
    }

    .article-horoscope-links > a {
        padding: 14px;
        gap: 12px;
        border-radius: 12px;
    }

    .article-horoscope-links > a > span {
        flex-basis: 46px;

        width: 46px;
        height: 46px;

        font-size: 22px;
        border-radius: 11px;
    }

    .article-horoscope-links > a strong {
        font-size: 16px;
    }

    .article-horoscope-links > a small {
        font-size: 12.5px;
    }

    .article-horoscope-links > a > b {
        flex-basis: 29px;

        width: 29px;
        height: 29px;

        font-size: 15px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .article-horoscope-links > a {
        padding: 12px;
        gap: 10px;
    }

    .article-horoscope-links > a > span {
        flex-basis: 42px;

        width: 42px;
        height: 42px;

        font-size: 20px;
    }

    .article-horoscope-links > a > b {
        display: none;
    }

}