@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600&display=swap');
/*
====================================================
GLOBAL RESET
====================================================
*/

* {
    box-sizing: border-box;
}

/*
====================================================
GLOBAL PAGE
====================================================
/*

body {

    background:
    radial-gradient(
        circle at top,
        rgba(180,150,90,.04),
        transparent 60%
    ),
    url('https://www.transparenttextures.com/patterns/paper-fibers.png');

    background-color: #f8f5ef;

    color: #2c2c2c;

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

    overflow-x: hidden;

}

*/
/*
====================================================
PREMIUM WRAPPER
====================================================
*/

.premium-wrapper {

    position: relative;

    z-index: 2;

    max-width: 1240px;

    margin: 0 auto;

    padding: 34px 22px 70px;

}

.premium-wrapper::before {

    content: "";

    position: absolute;

    inset: 0;

    z-index: -1;

    background:
    url('https://upload.wikimedia.org/wikipedia/commons/9/9b/North_Indian_astrology_chart.svg')
    center top / 420px no-repeat;

    opacity: .018;

    pointer-events: none;
}
.premium-wrapper p,
.premium-wrapper li,
.premium-wrapper span,
.premium-subtitle {

    font-family: 'Lora', serif !important;
    line-height: 1.8;
    letter-spacing: 0.2px;

}

/*
====================================================
SECTIONS
====================================================
*/

.premium-section {

    margin-bottom: 24px;

    position: relative;

}

/*
====================================================
DIVIDER
====================================================
*/

.premium-divider {

    width: 70px;

    height: 1px;

    background: rgba(156,122,53,0.22);

    margin: 34px auto;

}

/*
====================================================
PREMIUM SYMBOL DIVIDER
====================================================
*/

.premium-symbol-divider {

    text-align: center;

    margin: 42px 0;

    font-size: 18px;

    letter-spacing: 10px;

    color: rgba(156,122,53,.72);

    font-weight: 300;

}

.section-symbol {

    text-align: center;

    font-size: 26px;

    color: rgba(156,122,53,.78);

    margin-bottom: 12px;

}

/*
====================================================
MAIN TITLES
====================================================
*/

.premium-title {

    font-size: 30px;

    line-height: 1.28;

    font-weight: 600;

    color: #111827;

    margin-bottom: 12px;

    letter-spacing: -.3px;

    font-family: Georgia, serif;

}

/*
====================================================
SUBTITLE
====================================================
*/

.premium-subtitle {

    font-size: 15px;

    line-height: 1.85;

    color: #6b7280;

    margin-bottom: 22px;

    max-width: 760px;

}

/*
====================================================
PREMIUM CARD
====================================================
*/

.premium-card {

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

    border: 1px solid rgba(180,150,90,.10);

    border-radius: 18px;

    padding: 20px 22px;

    margin-bottom: 18px;

    box-shadow: 0 2px 10px rgba(0,0,0,.03);

    backdrop-filter: blur(4px);

}

/*
====================================================
BLOCK TITLES
====================================================
*/

.premium-card-title {

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 2px;

    color: #9c7a35;

    margin-bottom: 10px;

    font-weight: 700;

}

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

.premium-card-content {

    width: 100%;

    font-size: 17px;

    line-height: 1.95;

    color: #2c2c2c;

    font-weight: 400;

}

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

.premium-card-content p {

    margin-bottom: 20px;

}

/*
====================================================
OVERVIEW GRID
====================================================
*/

.premium-grid {

    display: grid;

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

    gap: 14px;

    margin: 18px 0;

}

.premium-grid .premium-card {

    margin-bottom: 0;

    height: 100%;

}

@media(max-width:768px){

    .premium-grid{

grid-template-columns:1fr;

    }

}

/*
====================================================
MINI CARDS
====================================================
*/

.premium-mini-card {

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

    border: 1px solid rgba(180,150,90,.10);

    border-radius: 16px;

    padding: 14px 16px;

    box-shadow: 0 2px 8px rgba(0,0,0,.025);

}

/*
====================================================
MINI CARD TITLES
====================================================
*/

.premium-mini-title {

    font-size: 10px;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #8b7355;

    margin-bottom: 7px;

    font-weight: 700;

}

/*
====================================================
MINI CARD VALUE
====================================================
*/

.premium-mini-value {

    font-size: 20px;

    line-height: 1.35;

    color: #065f46;

    font-family: Georgia, serif;

    font-weight: 600;

}

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

.identity-intro {

    margin-bottom: 30px;

}

.identity-intro-text {

    max-width: 760px;

    font-size: 16px;

    line-height: 1.85;

    color: #4b5563;

    font-weight: 400;

}

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

.ascendant-intro {

    margin-bottom: 38px;

}

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

.kozmos-bridge-content {

    font-size: 17px;

    line-height: 1.75;

    color: #6f6247;

    font-style: italic;

    font-weight: 400;

    max-width: 760px;

    margin: 18px auto;

    text-align: center;

}

/*
====================================================
VIDEO LAYOUT
====================================================
*/

.premium-video-layout {

    display: grid;

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

    gap: 20px;

    align-items: start;

    margin: 26px 0;

}

@media(max-width:768px){

    .premium-video-layout{

        grid-template-columns:1fr;

    }

}

/*
====================================================
VIDEO BOX
====================================================
*/

.premium-video-box {

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

    border: 1px solid rgba(180,150,90,.10);

    border-radius: 16px;

    padding: 14px;

    box-shadow: 0 2px 8px rgba(0,0,0,.025);

    position: sticky;

    top: 24px;

}

.premium-video-box iframe {

    width: 100%;

    aspect-ratio: 16/9;

    border: 0;

    border-radius: 10px;

}

/*
====================================================
VIDEO HUB
====================================================
*/

.premium-video-hub {

    margin-top: 30px;

}
.premium-video-heading {

    text-align:center;

    max-width:420px;

    margin:0 auto 34px auto;

    padding:14px 26px;

    background:linear-gradient(
        135deg,
        rgba(240,253,244,0.88),
        rgba(255,255,255,0.82)
    );

    border:1px solid rgba(16,185,129,0.16);

    border-radius:18px;

    box-shadow:
        0 8px 24px rgba(16,185,129,0.06);

    font-family:'Cormorant Garamond', serif;

    font-size:30px;

    font-weight:600;

    letter-spacing:.5px;

    color:#065f46;

}
.premium-video-slider {

    display: flex;

    gap: 24px;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    padding-bottom: 12px;

    margin-top: 30px;

}

.premium-video-slider::-webkit-scrollbar {

    height: 8px;

}

.premium-video-slider::-webkit-scrollbar-thumb {

    background: rgba(180,150,90,.22);

    border-radius: 20px;

}

.premium-video-card {

    min-width: 340px;

    max-width: 340px;

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

    border: 1px solid rgba(180,150,90,.14);

    border-radius: 22px;

    padding: 18px;

    flex-shrink: 0;

    box-shadow: 0 4px 14px rgba(0,0,0,.04);

    scroll-snap-align: start;

}

.premium-video-card iframe {

    width: 100%;

    aspect-ratio: 16/9;

    border: 0;

    border-radius: 14px;

    margin-bottom: 16px;

}

.premium-video-title {

    font-size: 24px;

    line-height: 1.4;

    font-family: 'Cormorant Garamond', serif;

    font-weight: 600;

    letter-spacing: 0.4px;

    color: #065f46;

    margin: 0;

}

/*
====================================================
SOFT SECTION VARIANTS
====================================================
*/

.premium-card.soft-gold {

    background:
    linear-gradient(
        135deg,
        rgba(255,251,235,.70),
        rgba(255,247,220,.50)
    );

}

.premium-card.soft-green {

    background:
    linear-gradient(
        135deg,
        rgba(240,253,244,.72),
        rgba(236,253,245,.52)
    );

}

/*
====================================================
SATURN INSIGHT BLOCKS
====================================================
*/

.premium-insight-block {

    padding: 22px 0;

    border-bottom: 1px solid rgba(180,150,90,.14);

}

.premium-insight-block:last-child {

    border-bottom: none;

    padding-bottom: 0;

}

.premium-insight-label {

    font-size: 11px;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: #9c7a35;

    margin-bottom: 12px;

    font-weight: 700;

}

.premium-insight-text {

    font-size: 18px;

    line-height: 1.95;

    color: #2c2c2c;

}

.premium-insight-text strong {

    color: #065f46;

    font-weight: 600;

}

/*
====================================================
SATURN FUSION GRID IMPROVEMENT
====================================================
*/

.premium-fusion .premium-grid {

    gap: 16px;

    margin: 16px 0;

}

.premium-fusion .premium-insight-block {

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.82),
        rgba(248,245,239,.92)
    );

    border: 1px solid rgba(156,122,53,.18);

    border-left: 4px solid rgba(6,95,70,.55);

    border-radius: 16px;

    padding: 20px 22px;

    margin: 0;

    box-shadow: 0 2px 8px rgba(0,0,0,.025);

    transition: all .25s ease;

}

.premium-fusion .premium-insight-block:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 18px rgba(0,0,0,.05);

}

.premium-fusion .premium-insight-label {

    text-align: left;

    margin-bottom: 14px;

    color: #9c7a35;

}

.premium-fusion .premium-insight-text {

    text-align: left;

    font-size: 16px;

    line-height: 1.9;

    color: #374151;

}

.premium-fusion .premium-card-content {

    display: flex;

    flex-direction: column;

    gap: 18px;

}

/*
====================================================
FIRST + LAST BLOCK CENTER
====================================================
*/

.premium-fusion .premium-card-content > .premium-insight-block:first-child .premium-insight-label,
.premium-fusion .premium-card-content > .premium-insight-block:first-child .premium-insight-text,

.premium-fusion .premium-card-content > .premium-insight-block:last-child .premium-insight-label,
.premium-fusion .premium-card-content > .premium-insight-block:last-child .premium-insight-text {

    text-align: center;

}

/*
====================================================
ERROR
====================================================
*/

.premium-error {

    padding: 18px;

    border-radius: 14px;

    border: 1px solid rgba(0,0,0,0.08);

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

    color: #2c2c2c;

}

/*
====================================================
OLD RESET
====================================================
*/

.kozmos-premium-card,
.kozmos-bridge-box,
.premium-box {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

    padding: 0 !important;

}

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

.kozmos-card-content {

    font-size: 17px;

    line-height: 1.9;

    color: #2c2c2c;

}

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

@media (max-width: 768px) {

    .premium-wrapper {

        padding: 20px 16px 60px;

    }

    .premium-title {

        font-size: 25px;

    }

    .premium-card {

        padding: 18px;

    }

    .premium-card-content {

        font-size: 16px;

        line-height: 1.85;

    }

    .premium-mini-value {

        font-size: 18px;

    }

    .kozmos-bridge-content {

        font-size: 17px;

    }

    .premium-video-card {

        min-width: 88vw;

        max-width: 88vw;

    }

}