/*==================================================
        GOVT EXAM PREP
        SSC SYLLABUS STYLE.CSS
        PART 1
==================================================*/



/*==============================
        GOOGLE FONT
==============================*/

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



/*==============================
        ROOT VARIABLES
==============================*/

:root{

    --primary:#800000;

    --primary-dark:#5d0000;

    --gold:#D4AF37;

    --gold-light:#f8e7b3;

    --white:#ffffff;

    --bg:#f7f8fc;

    --text:#444;

    --light:#777;

    --border:#e9e9e9;

    --shadow:0 12px 35px rgba(0,0,0,.08);

    --radius:22px;

    --transition:.35s ease;

}



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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    font-family:'Poppins',sans-serif;

    background:var(--bg);

    color:var(--text);

    line-height:1.8;

}



/*==============================
        CONTAINER
==============================*/

.container{

    width:min(1200px,92%);

    margin:auto;

}



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

a{

    text-decoration:none;

    color:inherit;

}



img{

    max-width:100%;

    display:block;

}



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

section{

    padding:90px 0;

}



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

.hero{

    background:

    linear-gradient(

    135deg,

    rgba(128,0,0,.95),

    rgba(93,0,0,.95)

    );

    color:#fff;

    padding:120px 0;

    position:relative;

    overflow:hidden;

}



/* Decorative Circles */

.hero::before{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    background:rgba(212,175,55,.08);

    border-radius:50%;

    top:-120px;

    right:-120px;

}



.hero::after{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

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

    border-radius:50%;

    bottom:-80px;

    left:-80px;

}



.hero-content{

    position:relative;

    z-index:2;

}



.hero-badge{

    display:inline-block;

    background:var(--gold);

    color:var(--primary);

    padding:10px 24px;

    border-radius:40px;

    font-size:.9rem;

    font-weight:700;

    margin-bottom:25px;

}



.hero h1{

    font-size:4rem;

    font-weight:800;

    line-height:1.2;

    margin-bottom:18px;

}



.hero p{

    max-width:760px;

    color:rgba(255,255,255,.92);

    font-size:1.08rem;

}



/*==============================
        PAGE TITLE
==============================*/

.page-title{

    text-align:center;

    margin-bottom:60px;

}



.page-title span{

    display:inline-block;

    padding:8px 20px;

    background:#f6e8bb;

    color:var(--primary);

    border-radius:40px;

    font-weight:700;

    font-size:.85rem;

    text-transform:uppercase;

    letter-spacing:1px;

}



.page-title h2{

    margin-top:20px;

    font-size:2.8rem;

    color:var(--primary);

    font-weight:800;

}



.page-title p{

    max-width:720px;

    margin:18px auto 0;

    color:var(--light);

}



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

.divider{

    width:90px;

    height:5px;

    background:var(--gold);

    border-radius:50px;

    margin:25px auto;

}



/*==============================
        BUTTONS
==============================*/

.primary-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    background:var(--primary);

    color:#fff;

    padding:15px 34px;

    border-radius:50px;

    transition:var(--transition);

    font-weight:600;

}



.primary-btn:hover{

    background:var(--gold);

    color:var(--primary);

}



.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:18px 34px;

    border-radius:50px;

    border:2px solid rgba(255,255,255,.35);

    background:transparent;

    color:#ffffff;

    transition:.35s;

    font-weight:600;

}

.secondary-btn:hover{

    background:#ffffff;

    color:var(--primary);

    border-color:#ffffff;

}

/*==============================
        COMMON CARD
==============================*/

.card{

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:35px;

}



/*==============================
        TEXT
==============================*/

.text-center{

    text-align:center;

}



.text-primary{

    color:var(--primary);

}



.text-gold{

    color:var(--gold);

}

/*==================================================
        PART 2
        SUBJECT CARDS & SECTION DESIGN
==================================================*/



/*==============================
        SYLLABUS SECTION
==============================*/

.syllabus-section{

    padding:90px 0;

    background:#f7f8fc;

}



.syllabus-section:nth-child(even){

    background:#ffffff;

}



/*==============================
        SUBJECT GRID
==============================*/

.subject-grid{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}



/*==============================
        SUBJECT CARD
==============================*/

.subject-card{

    background:#fff;

    border-radius:22px;

    padding:30px;

    display:flex;

    align-items:center;

    gap:20px;

    position:relative;

    cursor:pointer;

    overflow:hidden;

    transition:.35s;

    border:1px solid #ececec;

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

}



/* Decorative Circle */

.subject-card::before{

    content:"";

    position:absolute;

    width:130px;

    height:130px;

    border-radius:50%;

    background:rgba(212,175,55,.08);

    right:-45px;

    top:-45px;

}



/* Left Border */

.subject-card::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:6px;

    height:100%;

    background:var(--primary);

}



/* Hover */

.subject-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(128,0,0,.15);

}



.subject-card:hover::after{

    background:var(--gold);

}



/*==============================
        SUBJECT ICON
==============================*/

.subject-icon{

    width:70px;

    height:70px;

    min-width:70px;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.7rem;

    color:#fff;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-dark)

    );

    transition:.35s;

}



.subject-card:hover .subject-icon{

    background:linear-gradient(

        135deg,

        var(--gold),

        #f8dc72

    );

    color:var(--primary);

    transform:rotate(-8deg);

}



/*==============================
        SUBJECT TEXT
==============================*/

.subject-card h3{

    color:var(--primary);

    font-size:1.3rem;

    margin-bottom:8px;

}



.subject-card p{

    color:#666;

    font-size:.95rem;

}



/*==============================
        RIGHT ARROW
==============================*/

.arrow{

    margin-left:auto;

    color:var(--primary);

    transition:.3s;

}



.subject-card:hover .arrow{

    transform:translateX(8px);

    color:var(--gold);

}



/*==============================
        ACTIVE CARD
==============================*/

.subject-card.active{

    border-color:var(--gold);

    box-shadow:0 18px 35px rgba(212,175,55,.25);

}



.subject-card.active .subject-icon{

    background:linear-gradient(

        135deg,

        var(--gold),

        #f5d96d

    );

    color:var(--primary);

}



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

.summary-grid{

    display:grid;

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

    gap:30px;

    margin-top:50px;

}



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

.summary-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

    text-align:center;

    transition:.35s;

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

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

}



.summary-card:hover{

    transform:translateY(-8px);

    border-top-color:var(--gold);

}



.summary-icon{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:20px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    color:#fff;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-dark)

    );

}



.summary-card:hover .summary-icon{

    background:linear-gradient(

        135deg,

        var(--gold),

        #f6db74

    );

    color:var(--primary);

}



.summary-card h3{

    color:var(--primary);

    margin-bottom:15px;

}



.summary-card p{

    color:#666;

}



/*==============================
        INFO CARD
==============================*/

.info-card{

    background:#fff;

    border-left:6px solid var(--gold);

    border-radius:22px;

    padding:30px;

    margin-top:40px;

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

}



.info-card h3{

    color:var(--primary);

    margin-bottom:15px;

}



.info-card p{

    color:#555;

}



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

@media(max-width:992px){

.subject-grid{

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

}

}



@media(max-width:768px){

.subject-grid,

.summary-grid{

grid-template-columns:1fr;

}



.subject-card{

padding:25px;

}



.subject-icon{

width:60px;

height:60px;

min-width:60px;

font-size:1.4rem;

}



.subject-card h3{

font-size:1.1rem;

}



.arrow{

display:none;

}

}

/*==================================================
        PART 3
        ACCORDION & TOPIC CARDS
==================================================*/



/*==============================
        ACCORDION
==============================*/

.accordion{

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    margin-bottom:25px;

    border:1px solid #ececec;

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

    transition:.35s;

}



.accordion:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(128,0,0,.12);

}



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

.accordion summary{

    list-style:none;

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 30px;

    font-size:1.2rem;

    font-weight:700;

    color:var(--primary);

    transition:.35s;

    user-select:none;

}



.accordion summary::-webkit-details-marker{

    display:none;

}



/*==============================
        ICON
==============================*/

.accordion summary span{

    display:flex;

    align-items:center;

    gap:15px;

}



/*==============================
        PLUS ICON
==============================*/

.accordion summary::after{

    content:"+";

    width:42px;

    height:42px;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.5rem;

    transition:.3s;

}



/*==============================
        OPEN
==============================*/

.accordion[open] summary{

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-dark)

    );

    color:#fff;

}



.accordion[open] summary::after{

    content:"−";

    background:var(--gold);

    color:var(--primary);

}



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

.accordion-content{

    padding:35px;

    animation:fadeAccordion .35s ease;

}



@keyframes fadeAccordion{

from{

opacity:0;

transform:translateY(15px);

}

to{

opacity:1;

transform:translateY(0);

}

}



/*==============================
        DESCRIPTION
==============================*/

.accordion-content p{

    color:#666;

    line-height:1.9;

    margin-bottom:25px;

}



/*==============================
        TOPIC GRID
==============================*/

.topic-grid{

    display:grid;

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

    gap:18px;

}



/*==============================
        TOPIC CARD
==============================*/

.topic-card{

    background:#fff;

    border:1px solid #ececec;

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

    border-radius:16px;

    padding:18px 20px;

    position:relative;

    transition:.35s;

    color:#444;

    font-weight:500;

    overflow:hidden;

}



/* Decorative Circle */

.topic-card::before{

    content:"";

    position:absolute;

    width:70px;

    height:70px;

    right:-30px;

    top:-30px;

    border-radius:50%;

    background:rgba(212,175,55,.08);

}



/* Tick */

.topic-card::after{

    content:"✓";

    position:absolute;

    right:15px;

    bottom:12px;

    color:var(--gold);

    font-size:1rem;

}



/* Hover */

.topic-card:hover{

    transform:translateY(-6px);

    border-left-color:var(--gold);

    box-shadow:0 12px 28px rgba(128,0,0,.10);

    color:var(--primary);

}



/*==============================
        CHAPTER CARD
==============================*/

.chapter-card{

    background:#fff;

    padding:35px;

    border-radius:22px;

    margin-bottom:30px;

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

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

}



.chapter-card h3{

    color:var(--primary);

    margin-bottom:18px;

    font-size:1.4rem;

}



.chapter-card ul{

    list-style:none;

}



.chapter-card li{

    padding:14px 0 14px 36px;

    border-bottom:1px solid #eee;

    position:relative;

}



.chapter-card li:last-child{

    border-bottom:none;

}



.chapter-card li::before{

    content:"✔";

    position:absolute;

    left:0;

    top:14px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:var(--primary);

    color:var(--gold);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:.7rem;

}



/*==============================
        OFFICIAL NOTE
==============================*/

.official-note{

    background:#fff;

    border-left:6px solid var(--gold);

    border-radius:22px;

    padding:30px;

    display:flex;

    gap:20px;

    margin-top:40px;

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

}



.note-icon{

    width:60px;

    height:60px;

    min-width:60px;

    border-radius:50%;

    background:var(--primary);

    color:var(--gold);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.5rem;

}



.official-note h3{

    color:var(--primary);

    margin-bottom:10px;

}



.official-note p{

    color:#555;

}



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

@media(max-width:768px){

.accordion summary{

padding:20px;

font-size:1rem;

}



.accordion-content{

padding:22px;

}



.topic-grid{

grid-template-columns:1fr;

}



.chapter-card{

padding:25px;

}



.official-note{

flex-direction:column;

align-items:center;

text-align:center;

}

}

/*==================================================
        PART 4
        TABLE • STRATEGY • DOWNLOAD
==================================================*/



/*==============================
        EXAM TABLE
==============================*/

.exam-table{

    margin-top:40px;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

}



.exam-table table{

    width:100%;

    border-collapse:collapse;

}



.exam-table thead{

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-dark)

    );

}



.exam-table th{

    color:#fff;

    padding:20px;

    text-align:left;

    font-size:1rem;

    font-weight:600;

}



.exam-table td{

    padding:18px 20px;

    border-bottom:1px solid #ececec;

    color:#555;

}



.exam-table tbody tr:nth-child(even){

    background:#fff9ed;

}



.exam-table tbody tr:hover{

    background:#fff2d1;

}



/*==============================
        HIGHLIGHT BOX
==============================*/

.highlight-box{

    margin-top:40px;

    background:#fffdf7;

    border-left:6px solid var(--gold);

    border-radius:20px;

    padding:30px;

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

}



.highlight-box h3{

    color:var(--primary);

    margin-bottom:20px;

}



.highlight-box ul{

    list-style:none;

}



.highlight-box li{

    padding:10px 0 10px 34px;

    position:relative;

    color:#555;

}



.highlight-box li::before{

    content:"✓";

    position:absolute;

    left:0;

    top:10px;

    width:22px;

    height:22px;

    border-radius:50%;

    background:var(--primary);

    color:var(--gold);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:.75rem;

}



/*==============================
        STRATEGY GRID
==============================*/

.strategy-grid{

    display:grid;

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

    gap:28px;

    margin-top:40px;

}



/*==============================
        STRATEGY CARD
==============================*/

.strategy-card{

    background:#fff;

    border-radius:22px;

    padding:35px;

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

    transition:.35s;

    position:relative;

    overflow:hidden;

}



.strategy-card:hover{

    transform:translateY(-8px);

}



.strategy-card::before{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

    background:rgba(212,175,55,.08);

    right:-40px;

    top:-40px;

}



.strategy-number{

    width:65px;

    height:65px;

    border-radius:50%;

    background:linear-gradient(

        135deg,

        var(--primary),

        var(--primary-dark)

    );

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.3rem;

    font-weight:700;

    margin-bottom:22px;

}



.strategy-card h3{

    color:var(--primary);

    margin-bottom:14px;

}



.strategy-card p{

    color:#666;

}



/*==============================
        DOWNLOAD CARD
==============================*/

.download-card{

    background:#fff;

    max-width:720px;

    margin:60px auto 0;

    border-radius:25px;

    padding:55px;

    text-align:center;

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}



.pdf-icon{

    font-size:4rem;

    color:#d32f2f;

    margin-bottom:25px;

}



.download-card h3{

    color:var(--primary);

    margin-bottom:15px;

}



.download-card p{

    color:#666;

    margin-bottom:30px;

}



.download-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:16px 38px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:.35s;

}



.download-btn:hover{

    background:var(--gold);

    color:var(--primary);

}



/*==============================
        INFO CARD
==============================*/

.info-card{

    background:#fff;

    border-left:6px solid var(--gold);

    border-radius:20px;

    padding:30px;

    margin-top:35px;

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

}



.info-card h3{

    color:var(--primary);

    margin-bottom:15px;

}



.info-card p{

    color:#555;

}



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

@media(max-width:768px){

.exam-table{

overflow-x:auto;

}



.strategy-grid{

grid-template-columns:1fr;

}



.download-card{

padding:35px 25px;

}



.download-btn{

width:100%;

justify-content:center;

}

}

/*==================================================
        PART 5
        CTA • DARK MODE • UTILITIES
==================================================*/



/*==============================
        CTA SECTION
==============================*/

.cta-section{

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

}



.cta-card{

    width:min(1100px,92%);

    margin:auto;

    text-align:center;

}



.cta-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:40px;

    background:var(--gold);

    color:var(--primary);

    font-weight:700;

    margin-bottom:22px;

}



.cta-card h2{

    font-size:3rem;

    margin-bottom:20px;

}



.cta-card p{

    max-width:720px;

    margin:auto;

    color:rgba(255,255,255,.92);

}



.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

    margin-top:45px;

}



/*==============================
        DISCLAIMER
==============================*/

.disclaimer-section{

    background:#f7f8fc;

}



.disclaimer-card{

    background:#fff;

    border-left:6px solid var(--gold);

    border-radius:22px;

    padding:35px;

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

}



.disclaimer-card h3{

    color:var(--primary);

    margin-bottom:15px;

}



.disclaimer-card p{

    color:#666;

    line-height:1.9;

}



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

::-webkit-scrollbar{

    width:12px;

}



::-webkit-scrollbar-track{

    background:#ececec;

}



::-webkit-scrollbar-thumb{

    background:linear-gradient(
        var(--primary),
        var(--primary-dark)
    );

    border-radius:50px;

}



::-webkit-scrollbar-thumb:hover{

    background:var(--gold);

}



/*==============================
        SELECTION
==============================*/

::selection{

    background:var(--gold);

    color:var(--primary);

}



/*==============================
        FADE ANIMATION
==============================*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}



.fade-up{

    animation:fadeUp .7s ease forwards;

}



/*==============================
        DARK MODE
==============================*/

body.dark{

    background:#121212;

    color:#f2f2f2;

}



body.dark section{

    background:#121212;

}



body.dark .subject-card,

body.dark .accordion,

body.dark .chapter-card,

body.dark .summary-card,

body.dark .strategy-card,

body.dark .download-card,

body.dark .official-note,

body.dark .highlight-box,

body.dark .exam-table,

body.dark .info-card,

body.dark .disclaimer-card{

    background:#1d1d1d;

    color:#fff;

    border-color:#333;

}



body.dark h1,

body.dark h2,

body.dark h3,

body.dark h4{

    color:#fff;

}



body.dark p,

body.dark li,

body.dark td{

    color:#d8d8d8;

}



body.dark .topic-card{

    background:#222;

    border-color:#333;

}



body.dark .topic-card:hover{

    background:#2b2b2b;

}



body.dark .exam-table tbody tr:nth-child(even){

    background:#252525;

}



body.dark .exam-table tbody tr:hover{

    background:#303030;

}



/*==============================
        UTILITIES
==============================*/

.shadow{

    box-shadow:0 15px 35px rgba(0,0,0,.12);

}



.rounded{

    border-radius:22px;

}



.text-center{

    text-align:center;

}



.text-primary{

    color:var(--primary);

}



.text-gold{

    color:var(--gold);

}



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

@media(max-width:992px){

.hero h1{

font-size:3rem;

}

}



@media(max-width:768px){

section{

padding:70px 0;

}



.hero{

padding:90px 0;

}



.hero h1{

font-size:2.3rem;

}



.page-title h2{

font-size:2rem;

}



.cta-card h2{

font-size:2.2rem;

}



.cta-buttons{

flex-direction:column;

align-items:center;

}



.primary-btn,

.secondary-btn,

.download-btn{

width:100%;

justify-content:center;

}

}



@media(max-width:480px){

.hero h1{

font-size:2rem;

}



.hero p{

font-size:.95rem;

}



.page-title h2{

font-size:1.7rem;

}



.download-card{

padding:30px 20px;

}



.strategy-card,

.summary-card,

.chapter-card{

padding:25px;

}

}

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

.syllabus-hero{

    background:linear-gradient(
        135deg,
        #800000,
        #5d0000
    );

    color:#fff;

    padding:110px 0;

    position:relative;

    overflow:hidden;

}

.syllabus-hero::before{

    content:"";

    position:absolute;

    width:350px;
    height:350px;

    background:rgba(212,175,55,.08);

    border-radius:50%;

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

}

.syllabus-hero .container{

    position:relative;

    z-index:2;

}

.hero-content{

    max-width:900px;

}

.breadcrumb{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    align-items:center;

    margin-bottom:25px;

    color:rgba(255,255,255,.85);

}

.breadcrumb a{

    color:#fff;

}

.hero-tag{

    display:inline-block;

    background:#D4AF37;

    color:#800000;

    padding:10px 22px;

    border-radius:50px;

    font-weight:700;

    margin-bottom:20px;

}

.back-btn{

    display:inline-flex;

    gap:10px;

    align-items:center;

    color:#fff;

    margin-bottom:25px;

    text-decoration:none;

}

.back-btn:hover{

    color:#D4AF37;

}

.syllabus-hero h1{

    font-size:4rem;

    font-weight:800;

    margin-bottom:20px;

}

.syllabus-hero h1 span{

    color:#D4AF37;

}

.syllabus-hero p{

    max-width:800px;

    color:rgba(255,255,255,.92);

    font-size:1.08rem;

}

/*=================================
        SECTION HEADING
=================================*/

.section-heading{

    max-width:1000px;

    margin:0 auto 60px;

    padding:40px 45px;

    background:#ffffff;

    border-radius:22px;

    border-left:8px solid #800000;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    position:relative;

    overflow:hidden;

}

/* Golden Decorative Circle */

.section-heading::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(212,175,55,.10);

    top:-70px;

    right:-70px;

}

.section-heading .section-badge{

    display:inline-block;

    background:#D4AF37;

    color:#800000;

    padding:8px 20px;

    border-radius:50px;

    font-size:.85rem;

    font-weight:700;

    margin-bottom:18px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.section-heading h2{

    font-size:3rem;

    color:#800000;

    margin-bottom:18px;

    font-weight:800;

    line-height:1.2;

}

.section-heading p{

    max-width:750px;

    color:#555;

    font-size:1.08rem;

    line-height:1.8;

}

@media(max-width:768px){

.section-heading{

padding:30px 25px;

margin-bottom:40px;

}

.section-heading h2{

font-size:2.2rem;

}

}



/*==================================================
            END OF STYLE.CSS
==================================================*/