/* ==========================================
        M.S. DHONI WEBSITE
        MAIN STYLE SHEET
        Author : Shanmathy K
========================================== */


/* ================= ROOT COLORS ================= */

:root{

    /* Dhoni Legacy Theme */

    --midnight:#0B132B;

    --navy:#1C2541;

    --steel-blue:#3A506B;

    --champagne:#D4AF37;

    --soft-gold:#F4E4BC;

    --cream:#FAF7F0;

    --white:#FFFFFF;

    --dark-text:#1F2937;

    --gray:#64748B;

    /* Heading Accent */

    --burgundy:#8B1E2D;

    --burnt-orange:#B45309;

    --heading:#7A1F2B;

}

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


*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;

}



body{

    font-family:Poppins, sans-serif;

    background:#F3EBDD;

    color:var(--dark-text);

    line-height:1.6;

}



.container{

    width:85%;

    margin:auto;

}



img{

    max-width:100%;

    display:block;

}



/* ================= NAVBAR ================= */


header{

    position:absolute;

    top:0;

    width:100%;

    z-index:1000;

}



.navbar{

    width:90%;

    margin:25px auto;

    padding:18px 35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:rgba(11,19,43,0.90);

    backdrop-filter:blur(15px);

    border-radius:50px;

    box-shadow:

    0 10px 30px rgba(0,0,0,0.25);

}



.logo a{

    color:white;

    text-decoration:none;

    font-family:Georgia,serif;

    font-size:32px;

    font-weight:bold;

    letter-spacing:3px;

}



.logo span{

    color:var(--champagne);

}



.nav-links{

    display:flex;

    list-style:none;

    gap:25px;

}



.nav-links a{

    color:white;

    text-decoration:none;

    font-size:15px;

    font-weight:bold;

    transition:.3s;

}



.nav-links a:hover,
.nav-links .active{

    color:var(--champagne);

}

/* ==========================================
        HERO SECTION
        M.S. DHONI LEGACY WEBSITE
========================================== */


.hero{

    height:100vh;

    min-height:750px;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

}





.hero-image{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center top;

    z-index:1;

}





.overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background:

    linear-gradient(

        180deg,

        rgba(11,19,43,0.65),

        rgba(11,19,43,0.92)

    );

}







/* HERO CONTENT */


.hero-content{

    position:relative;

    z-index:3;

    width:90%;

    max-width:1000px;

    margin:auto;

    text-align:center;

    color:white;

    padding-top:40px;

}






/* SMALL TITLE */


.hero-content h3{

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

    font-size:18px;

    font-weight:600;

    letter-spacing:7px;

    text-transform:uppercase;

    color:#D4AF37;

    margin-bottom:5px;

}






/* MAIN TITLE */


.hero-content h1{

    font-family:"Playfair Display",serif;

    font-size:95px;

    font-weight:800;

    line-height:1;

    letter-spacing:6px;

    color:#FFFFFF;

    margin-bottom:20px;

}







/* TAGLINE */


.hero-content h2{

    font-family:"Playfair Display",serif;

    font-size:30px;

    font-weight:500;

    color:#F4E4BC;

    margin-bottom:35px;

}







/* QUOTE */


.hero-content blockquote{

    width:fit-content;

    max-width:700px;

    margin:0 auto 30px;

    padding:20px 45px;

    font-family:Georgia,serif;

    font-size:22px;

    font-style:italic;

    line-height:1.7;

    color:#FAF7F0;


    border-left:3px solid #D4AF37;

    border-right:3px solid #D4AF37;


}







/* DESCRIPTION */


.hero-content p{

    max-width:750px;

    margin:0 auto 35px;

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

    font-size:17px;

    line-height:1.8;

    color:#D9E2F2;

}





.hero-content p strong{

    color:#D4AF37;

    font-weight:600;

}







/* BUTTON */


.hero-content .btn{

    display:inline-block;

    padding:15px 45px;

    border-radius:50px;


    background:#D4AF37;

    color:#0B132B;


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

    font-size:16px;

    font-weight:700;

    text-decoration:none;


    letter-spacing:1px;


    box-shadow:

    0 10px 25px rgba(212,175,55,.35);


    transition:.4s;

}





.hero-content .btn:hover{


    background:#F4E4BC;

    transform:translateY(-5px);


}






/* BOTTOM FADE */


.hero::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:120px;

    z-index:4;


    background:

    linear-gradient(

        transparent,

        #FAF8F3

    );

}






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


@media(max-width:768px){


.hero{

    min-height:650px;

}



.hero-content h3{

    font-size:13px;

    letter-spacing:4px;

}



.hero-content h1{

    font-size:50px;

}



.hero-content h2{

    font-size:22px;

}



.hero-content blockquote{

    font-size:18px;

    padding:15px 25px;

}



.hero-content p{

    font-size:15px;

}


}

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

.welcome{

    background:#F3EBDD;

    padding:100px 0;

}




.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}




.section-subtitle{

    text-align:center;

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

    font-size:14px;

    font-weight:600;

    letter-spacing:5px;

    text-transform:uppercase;

    color:#8B1E2D;

    margin-bottom:18px;

}




.section-title{

    text-align:center;

    max-width:900px;

    margin:0 auto;

}




.section-title h2{

    font-family:"Playfair Display",serif;

    font-size:56px;

    font-weight:700;

    color:var(--midnight);

    line-height:1.2;

    margin-bottom:15px;

}




.section-title h2 span{

    color:var(--champagne);

}




.underline{

    width:100px;

    height:4px;

    margin:22px auto 35px;

    border-radius:50px;

    background:

    linear-gradient(

    90deg,

    transparent,

    var(--champagne),

    transparent

    );

}




.section-title p{

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

    font-size:18px;

    line-height:2;

    color:#475569;

    max-width:780px;

    margin:auto;

    text-align:center;

}




.section-title strong{

    color:#8B1E2D;

    font-weight:600;

}

/* ================= ESSENTIAL DETAILS ================= */

.essential-details{

    background:#FFFFFF;

    padding:100px 0;

}



.details-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}



.detail-card{

    background:#FFFFFF;

    border-radius:18px;

    padding:30px;

    text-align:center;

    border:1px solid #E5E7EB;

    transition:.4s;

    box-shadow:0 10px 30px rgba(15,23,42,.05);

}



.detail-card:hover{

    transform:translateY(-8px);

    border-color:var(--champagne);

    box-shadow:0 20px 40px rgba(15,23,42,.12);

}



.detail-card h3{

    font-family:"Playfair Display",serif;

    font-size:22px;

    color:#8B1E2D;

    margin-bottom:15px;

}



.detail-card p{

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

    font-size:17px;

    color:#475569;

    line-height:1.8;

}

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

.quote-section{

    background:

    linear-gradient(

    135deg,

    #F7F3EB,

    #FDFBF7

    );

    padding:120px 0;

    text-align:center;

}

.quote-section blockquote{

    max-width:900px;

    margin:50px auto 25px;

    font-family:"Playfair Display",serif;

    font-size:42px;

    line-height:1.8;

    font-style:italic;

    color:var(--midnight);

    text-align:center;

}

.quote-mark{

    color:var(--champagne);

    font-size:52px;

    font-weight:bold;

}


.quote-author{

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

    font-size:18px;

    font-weight:600;

    letter-spacing:2px;

    color:#8B1E2D;

    margin-top:15px;

}

/* ================= PAGE BANNER ================= */


.page-banner{

    height:60vh;

    position:relative;

    background:

    linear-gradient(

    135deg,
    #A8C3A0,

    #B8C8BE,

    #9CA3AF
    );

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}


/* GOLD STRIPE */

.page-banner::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:7px;

    background:

    linear-gradient(

    90deg,

    transparent,

    var(--champagne),

    transparent

    );

}




.page-banner::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:7px;

    background:

    linear-gradient(

    90deg,

    transparent,

    var(--champagne),

    transparent

    );

}



.banner-overlay{

    position:absolute;

    inset:0;

    background:

    rgba(0,0,0,.25);

}



.page-title{

    position:relative;

    text-align:center;

    color:#7F1D1D;

}



.page-title h1{

    font-family:Georgia,serif;

    font-size:70px;

    color:#7F1D1D;

    letter-spacing:2px;

}



.page-title p{

    font-size:20px;

    color:var(--cream);

}


/* ================= FOOTER ================= */


footer{

    background:

    linear-gradient(

    135deg,

    var(--deep-dark),

    var(--midnight)

    );

    color:white;

    text-align:center;

    padding:40px 0;

}




footer h3{

    color:var(--champagne);

    font-family:Georgia,serif;

    font-size:32px;

    letter-spacing:1px;

}




footer hr{

    width:80%;

    margin:20px auto;

    border:1px solid #64748B;

}




footer p{

    background:

    linear-gradient(

    90deg,

    #B91C1C,

    #0284C7

    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    font-size:16px;

    letter-spacing:0.5px;

}

/* =================================================
        BIOGRAPHY PAGE
================================================= */


.biography{

    background:white;

}



.bio-layout{

    display:grid;

    grid-template-columns:1fr 1.5fr;

    gap:50px;

    align-items:center;

}



.bio-image img{

    width:100%;

    border-radius:15px;

    box-shadow:

    0 15px 35px rgba(0,0,0,.2);

}

.bio-image img{

    width:100%;

    border-radius:15px;

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

    transition:
    transform .45s ease,
    box-shadow .45s ease,
    border-radius .45s ease;

}



.bio-image img:hover{

    transform:scale(1.04);

    border-radius:20px;

    box-shadow:
    0 25px 50px rgba(0,0,0,.28);

}

.bio-content h2{

    text-align:center;

    color:var(--heading);

    margin-bottom:10px;

    font-family:"Playfair Display",serif;

}

.bio-content p{

    color:var(--gray);

    margin-bottom:20px;

    font-size:17px;

}





/* ================= PERSONAL DETAILS TABLE ================= */


.details-section{

    background:var(--soft-blue);
    
    padding:80px 0 80px;

}



.bio-table{

    width:80%;

    margin:30px auto;

    border-collapse:collapse;

    background:white;

    border-radius:15px;

    overflow:hidden;

    box-shadow:

    0 10px 25px rgba(0,0,0,.1);

}



.bio-table th{

    background:var(--midnight);

    color:white;

    padding:18px;

    text-align:left;

}



.bio-table td{

    padding:18px;

    border-bottom:1px solid #ddd;

    color:var(--gray);

}



.bio-table tr:hover{

    background:var(--cream);

}





/* ================= EARLY LIFE ================= */


.early-life{

    background:white;
    padding:80px 0 80px;

}



.life-card{

    background:

    linear-gradient(

    145deg,

    white,

    var(--cream)

    );

    padding:35px;

    border-radius:25px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.1);

}



.life-card p{

    margin-bottom:20px;

    color:var(--gray);

}

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

.career-intro{

    background:#F3EBDD;

    padding:80px 0;

}



/* =================================================
        CAREER TIMELINE
================================================= */

.career-highlights{

    background:var(--soft-blue);

    padding:80px 0;

}



.timeline{

    position:relative;

    max-width:900px;

    margin:auto;

}



.timeline::before{

    content:"";

    position:absolute;

    width:5px;

    background:var(--champagne);

    top:0;

    bottom:0;

    left:50%;

    transform:translateX(-50%);

}



.timeline-item{

    width:50%;

    padding:20px 40px;

    position:relative;

}



.timeline-item:nth-child(odd){

    left:0;

    text-align:right;

}



.timeline-item:nth-child(even){

    left:50%;

}



/* ===============================
        YEAR BADGE
================================= */

.year{

    display:inline-block;

    background:var(--midnight);

    color:white;

    padding:10px 22px;

    border-radius:30px;

    font-weight:bold;

    transition:all .4s ease;

}



.timeline-item:hover .year{

    background:var(--champagne);

    color:var(--midnight);

    transform:scale(1.08);

}



/* ===============================
        TIMELINE CARD
================================= */

.timeline-content{

    margin-top:15px;

    background:white;

    padding:25px;

    border-radius:20px;

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

    position:relative;

    overflow:hidden;

    border:2px solid transparent;

    transition:
    transform .4s ease,
    box-shadow .4s ease,
    border-color .4s ease;

}



/* Gold Bar Animation */

.timeline-content::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:100%;

    background:var(--champagne);

    transition:.4s ease;

}



.timeline-content:hover::before{

    width:6px;

}



/* Card Hover */

.timeline-content:hover{

    transform:
    translateY(-10px)
    scale(1.02);

    border-color:var(--champagne);

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

}



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

.timeline-content h3{

    color:var(--navy);

    transition:.4s;

}



.timeline-content:hover h3{

    color:var(--maroon);

}



.timeline-content p{

    color:var(--gray);

    line-height:1.8;

}



/* ===============================
        IMAGE
================================= */

.career-image{

    text-align:center;

    margin-top:60px;

}

.career-image img{

    display:block;

    width:50%;

    margin:0 auto;

    border-radius:20px;

    transition:
    transform .5s ease,
    box-shadow .5s ease;

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

}


.career-image img:hover{

    transform:
    scale(1.04);

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

}




/* =================================================
        ACHIEVEMENTS PAGE
================================================= */



.achievement-grid{

    display:grid;

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

    gap:30px;

}

.achievements-section{
    padding:60px 0;
}



.achievement-card{

    background:white;

    border-radius:25px;

    overflow:hidden;

    box-shadow:

    0 10px 30px rgba(0,0,0,.12);

    transition:.4s;

}



.achievement-card:hover{

    transform:translateY(-10px);

}



.achievement-card img{

    width:100%;

    height:250px;

    object-fit:cover;

}


.achievement-card h3{
    
    color:var(--midnight);
    
    padding:20px 20px 10px;

}




.achievement-card p{

    padding:0 20px 25px;

    color:var(--gray);

}

.records-section{
    padding:0 0 80px;
}

.record-list{

    display:grid;

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

    gap:25px;

}



.record-box{

    background:white;

    padding:30px;

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

    border-radius:15px;

    box-shadow:

    0 10px 25px rgba(0,0,0,.1);

}



.record-box h3{

    color:var(--navy);

    padding-bottom:5px;

}



.record-box p{

    color:var(--gray);

}





.awards-section{

    background:var(--soft-blue);

    padding:0 0 80px;

}



.award-list{

    width:70%;

    margin:auto;

    background:white;

    padding:35px;

    border-radius:20px;

    list-style:none;

}



.award-list li{

    padding:15px;

    font-size:18px;

    border-bottom:1px solid #ddd;

}

/* =====================================
        AWARD LIST HOVER EFFECT
===================================== */

.award-list li{

    transition:all .35s ease;

    cursor:pointer;

}



.award-list li:hover{

    background:#FFF8E6;

    color:var(--maroon);

    padding-left:28px;

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

}





/* =================================================
        CSK PAGE
================================================= */


.csk-intro{

    background:white;

}



.csk-layout{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}

.csk-image{

    display:flex;

    justify-content:flex-start;

    align-items:center;

}



.csk-image img{

    width:80%;

    max-width:700px;

    height:auto;

    display:block;

    margin:0 auto;

    border-radius:25px;

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

    transition:
    transform .45s ease,
    box-shadow .45s ease;

}



.csk-image img:hover{

    transform:scale(1.05);

    box-shadow:
    0 25px 50px rgba(0,0,0,.28);

}



.csk-content h2{

    text-align:left;

}



.csk-content p{

    color:var(--gray);

    margin-bottom:20px;

}

.csk-journey{

    background:var(--soft-blue);

    padding:80px 0 80px;

}



.journey-grid{

    display:grid;

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

    gap:25px;

}



.journey-card{

    background:white;

    padding:30px;

    text-align:center;

    border-radius:20px;

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

    box-shadow:

    0 10px 25px rgba(0,0,0,.1);

}



.journey-card h3{

    color:var(--midnight);

    font-size:30px;

}

.csk-acheivements{

    background:white;

    padding:80px 0 120px;

}


.achievement-box{

    background:white;

    padding:30px;

    margin:20px 0;

    border-radius:20px;

    box-shadow:

    0 10px 25px rgba(0,0,0,.1);

}



.achievement-box h3{

    color:var(--navy);

}

/* =====================================
        CSK ACHIEVEMENT HOVER
===================================== */

.achievement-box{

    transition:all .4s ease;

    cursor:pointer;

}



.achievement-box:hover{

    transform:translateY(-10px);

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

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

}



.achievement-box h3{

    transition:.4s ease;

}



.achievement-box:hover h3{

    color:var(--burgundy);

}


.thala-section{

    background:

    linear-gradient(

    135deg,

    var(--midnight),
    
    var(--navy)

    );

    color:white;

    text-align:center;

    padding:40px 0 40px

}

.thala-section h2{

    color:var(--champagne)

}



.thala-section p{

    font-size:20px;

}

/* =================================================
        GALLERY PAGE
================================================= */


.gallery-section{

    background:white;

    padding:80px 0 80px;

}



.gallery-grid{

    display:grid;

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

    gap:30px;

}



.gallery-card{

    background:white;

    border-radius:25px;

    overflow:hidden;

    box-shadow:

    0 10px 30px rgba(0,0,0,.12);

    transition:.4s;

}



.gallery-card:hover{

    transform:translateY(-12px);

}



.gallery-card img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.5s;

}



.gallery-card:hover img{

    transform:scale(1.08);

}



.gallery-content{

    padding:25px;

}



.gallery-content h3{

    color:var(--midnight);

    margin-bottom:10px;

    font-family:Georgia,serif;

}



.gallery-content p{

    color:var(--gray);

}





.featured-moment{

    background:

    linear-gradient(

    135deg,

    var(--midnight),

    var(--navy)

    );

    color:white;

    text-align:center;

}



.featured-moment h2{

    color:var(--champagne);

}



.featured-moment p{

    font-size:20px;

    max-width:900px;

    margin:auto;

}









/* =================================================
        FACTS PAGE
================================================= */


.facts-section{

    background:var(--soft-blue);
    padding:80px 0 80px;

}



.facts-grid{

    display:grid;

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

    gap:30px;

}



.fact-card{

    background:white;

    padding:35px;

    border-radius:25px;

    box-shadow:

    0 10px 25px rgba(0,0,0,.1);

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

    transition:.4s;

}



.fact-card:hover{

    transform:translateY(-10px);

}



.fact-card h3{

    color:var(--midnight);

    margin-bottom:15px;

    font-family:Georgia,serif;

}



.fact-card p{

    color:var(--gray);

}







.personality-section{

    background:white;

    padding:80px 0 80px;

}



.personality-box{

    background:

    linear-gradient(

    145deg,

    var(--cream),

    white

    );

    padding:40px;

    border-radius:25px;

    text-align:center;

    box-shadow:

    0 10px 25px rgba(0,0,0,.1);

}



.personality-box p{

    font-size:20px;

    color:var(--gray);

}









/* =================================================
        REFERENCES PAGE
================================================= */


.references-section{

    background:var(--soft-blue);

    padding:80px 0 80px;

}



.reference-card{

    background:white;

    padding:35px;

    margin:25px auto;

    width:80%;

    border-radius:25px;

    box-shadow:

    0 10px 25px rgba(0,0,0,.1);

}



.reference-card h3{

    color:var(--midnight);

    font-family:Georgia,serif;

    margin-bottom:15px;

}



.reference-card p{

    color:var(--gray);

}



.reference-card ul{

    margin-top:20px;

    padding-left:25px;

}



.reference-card li{

    margin:10px 0;

    color:var(--dark-text);

}







.acknowledgement{

    background:white;

    text-align:center;

    padding:80px 0 80px;

}



.acknowledgement p{

    max-width:900px;

    margin:20px auto;

    color:var(--gray);

    font-size:18px;

}








/* =================================================
        GLOBAL CARD EFFECTS
================================================= */


.card,
.achievement-card,
.fact-card,
.gallery-card,
.record-box,
.journey-card,
.reference-card{

    transition:all .4s ease;

}



.card:hover,
.achievement-card:hover,
.fact-card:hover,
.gallery-card:hover,
.record-box:hover,
.journey-card:hover,
.reference-card:hover{

    box-shadow:

    0 18px 40px rgba(0,0,0,.18);

}







/* =================================================
        BUTTON EFFECTS
================================================= */


a{

    transition:.3s;

}



.btn:active{

    transform:scale(.95);

}







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


::selection{

    background:var(--champagne);

    color:var(--midnight);
}