/*======================================================
DIVINE ALIGNMENT MINISTRIES™
OFFICIAL DESIGN SYSTEM
======================================================*/

:root{

    /*==============================================
    BRAND COLORS
    ==============================================*/

    --royal-blue:#102B6A;
    --midnight-blue:#061738;
    --deep-blue:#0C2257;

    --white:#FFFFFF;
    --soft-white:#F5F7FA;
    --light-gray:#CFCFCF;

    /*==============================================
    OFFICIAL METALLIC GOLD
    ==============================================*/

    --gold-dark:#8C6A0A;
    --gold:#D4AF37;
    --gold-light:#FFE98A;
    --gold-highlight:#FFF7D8;
    --gold-white:#FFFDF5;

    --metallic-gold:linear-gradient(
        180deg,
        var(--gold-white) 0%,
        var(--gold-highlight) 12%,
        var(--gold-light) 24%,
        var(--gold) 48%,
        var(--gold-dark) 78%,
        var(--gold-highlight) 100%
    );

    /*==============================================
    TYPOGRAPHY
    ==============================================*/

    --font-family:Arial, Helvetica, sans-serif;

/*==================================================
SPACING
==================================================*/

--section-spacing:120px;

--content-spacing:70px;

--card-padding:35px;

--button-padding:18px 40px;

--button-radius:999px;

--border-radius:18px;

/*==================================================
SHADOWS
==================================================*/

--shadow-light:0 8px 20px rgba(0,0,0,.18);

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

--shadow-heavy:0 18px 45px rgba(0,0,0,.40);


/*==================================================
BUTTON SHADOWS
==================================================*/

--button-highlight:
inset 0 2px 2px rgba(255,255,255,.90);

--button-highlight-soft:
inset 0 6px 10px rgba(255,255,255,.35);

--button-shadow:
inset 0 -4px 5px rgba(90,55,0,.45);

--button-drop:
0 8px 15px rgba(0,0,0,.30);


/*==================================================
TRANSITIONS
==================================================*/

--transition-fast:.25s;

--transition:.35s;

--transition-slow:.6s;

}


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

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--font-family);

    background:var(--royal-blue);

    color:var(--white);

    overflow-x:hidden;

    line-height:1.7;

}


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

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

button{

    font-family:inherit;

    cursor:pointer;

}

.container{

    width:90%;

    max-width:var(--content-width);

    margin:0 auto;

}
/*======================================================
HEADER
======================================================*/

header{

    background:var(--midnight-blue);

    text-align:center;

    padding:40px 20px 25px;

    border-bottom:2px solid rgba(212,175,55,.30);

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

}

header h1{

    background:var(--metallic-gold);

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

    color:transparent;

    font-size:3.75rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:15px;

    line-height:1.1;

}

header p{

    color:var(--soft-white);

    font-size:1.25rem;

    font-weight:400;

    letter-spacing:1px;

    margin:0;

}

/*======================================================
NAVIGATION
======================================================*/

nav{

    background:var(--midnight-blue);

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:30px;

   padding:15px 30px;

    position:sticky;

    top:0;

    z-index:1000;

    border-bottom:1px solid rgba(212,175,55,.20);

}

nav a{

    color:var(--white);

    font-weight:600;

    position:relative;

    transition:var(--transition);

}

nav a:hover{

    color:var(--gold-light);

}

nav a::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-8px;

    width:0;

    height:3px;

    background:var(--metallic-gold);

    transform:translateX(-50%);

    transition:var(--transition);

    border-radius:20px;

}

nav a:hover::after{

    width:100%;

}

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

.primary-button{

    background:var(--metallic-gold);

    color:var(--midnight-blue);

    border:none;

    padding:16px 36px;

    border-radius:50px;

    font-size:1rem;

    font-weight:700;

    transition:var(--transition);

}

.primary-button:hover{

    transform:translateY(-3px);

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

}

.secondary-button{

    background:transparent;

    color:var(--white);

    border:2px solid var(--gold);

    padding:16px 36px;

    border-radius:50px;

    font-size:1rem;

    transition:var(--transition);

}

.secondary-button:hover{

    background:var(--metallic-gold);

    color:var(--midnight-blue);

}
/*======================================================
MEDIA HERO
======================================================*/

.media-hero{

    text-align:center;

    padding:90px 30px 70px;

}

.hero-content{

    max-width:900px;

    margin:0 auto;

}

.hero-kicker{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:.9rem;

    margin-bottom:18px;

    font-weight:700;

}

.hero-title{

    font-size:4.4rem;

    line-height:1.2;

    margin-bottom:25px;

    background:var(--metallic-gold);

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

}

.hero-subtitle{

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

    font-size:1.25rem;

    line-height:1.9;

    max-width:760px;

    margin:0 auto 45px;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:25px;

    flex-wrap:wrap;

    margin-top:55px;

}



/*======================================================
MEDIA NAVIGATION
======================================================*/

.media-navigation{

    max-width:1400px;

    margin:50px auto 100px;

    padding:0 30px;

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.media-tab{

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

    color:var(--white);

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

    border-radius:50px;

    padding:15px 28px;

    transition:var(--transition);

    font-weight:600;

}

.media-tab:hover{

    background:var(--metallic-gold);

    color:var(--midnight-blue);

    transform:translateY(-3px);

}

.media-tab.active{

    background:var(--metallic-gold);

    color:var(--midnight-blue);

}
/*======================================================
FEATURED CONTENT
======================================================*/

.featured-section{

    max-width:1400px;

   margin:80px auto 100px;

    padding:0 30px;

    display:grid;

    grid-template-columns:360px 1fr;

    gap:70px;

    align-items:center;

}

.featured-image{

    position:relative;

}

.featured-image img{

    width:100%;

    border-radius:25px;

   border:2px solid var(--gold);

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

    transition:var(--transition);

}

.featured-image img:hover{

    transform:scale(1.02);

}

.featured-details{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.featured-label{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:.9rem;

    font-weight:700;

    margin-bottom:18px;

}

.featured-details h2{

    font-size:3rem;

    line-height:1.2;

    margin-bottom:15px;

    background:var(--metallic-gold);

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

}

.featured-details h3{

    color:var(--gold);

    font-size:1.4rem;

    font-weight:500;

    margin-bottom:30px;

}

.featured-details p{

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

    font-size:1.15rem;

    line-height:1.9;

    max-width:700px;

}

.featured-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

    margin-top:40px;

}

@media(max-width:1000px){

    .featured-section{

        grid-template-columns:1fr;

        text-align:center;

    }

    .featured-details{

        align-items:center;

    }

}
/*======================================================
MEDIA CONSOLE
======================================================*/

.media-console{

    max-width:1400px;

    margin:0 auto 100px;

    padding:0 30px;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:40px;

    align-items:start;

}

@media(max-width:1100px){

    .media-console{

        grid-template-columns:1fr;

    }

}
/*======================================================
MEDIA PLAYER
======================================================*/

.player-section{

    margin:0;

    padding:0;

}

.media-player{

    background:#091B42;

    border:1px solid rgba(212,175,55,.30);

    border-radius:25px;

    padding:40px;

    display:grid;

    grid-template-columns:350px 1fr;

    gap:50px;

    align-items:center;

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

}

.media-cover img{

    width:100%;

    border-radius:20px;

    border:2px solid var(--gold);

}

.media-information{

    color:var(--white);

}

.player-label{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:.85rem;

    margin-bottom:15px;

}

.media-information h2{

    font-size:3rem;

    margin-bottom:10px;

}

.media-information h3{

    color:var(--gold);

    font-size:1.3rem;

    font-weight:400;

    margin-bottom:35px;

}

.media-controls{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

    margin:35px 0;

}

.media-controls button{

    background:var(--metallic-gold);

    color:var(--midnight-blue);

    border:none;

    border-radius:50px;

    padding:14px 28px;

    font-size:1rem;

    font-weight:700;

    transition:var(--transition);

}

.media-controls button:hover{

    transform:translateY(-3px);

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

}

.progress-container{

    width:100%;

}

.progress-bar{

    width:100%;

    height:8px;

    background:#20365D;

    border-radius:50px;

    overflow:hidden;

}

.progress-fill{

    width:35%;

    height:100%;

    background:var(--metallic-gold);

}

@media(max-width:1000px){

    .media-player{

        grid-template-columns:1fr;

        text-align:center;

    }

    .media-controls{

        justify-content:center;

    }

}
/*======================================================
PLAYLIST
======================================================*/

.playlist-section{

    margin:0;

    padding:0;

}

.playlist{

    background:#091B42;

    border:1px solid rgba(212,175,55,.30);

    border-radius:25px;

    overflow:hidden;

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

}

.playlist-header{

    padding:30px;

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

}

.playlist-header h2{

    color:var(--white);

    font-size:2rem;

    margin-bottom:8px;

}

.playlist-header p{

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

}

.playlist-item{

    display:grid;

    grid-template-columns:60px 1fr 70px;

    align-items:center;

    gap:20px;

    padding:22px 30px;

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

    transition:var(--transition);

}

.playlist-item:last-child{

    border-bottom:none;

}

.playlist-item:hover{

    background:#12306C;

    cursor:pointer;

}

.playlist-item.active{

    background:#173A82;

}

.track-number{

    color:var(--gold);

    font-weight:700;

    font-size:1.2rem;

}

.track-information h3{

    color:var(--white);

    margin-bottom:5px;

}

.track-information p{

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

}

.track-time{

    color:var(--gold);

    text-align:right;

    font-weight:700;

}

@media(max-width:1000px){

    .playlist-item{

        grid-template-columns:45px 1fr;

    }

    .track-time{

        display:none;

    }

}
/*======================================================
JOIN THE JOURNEY
======================================================*/

.journey{

    background:var(--royal-blue);

    padding:100px 8%;

}

.journey-content{

    max-width:1000px;

    margin:0 auto;

    text-align:center;

}

.journey h2{

    background:var(--metallic-gold);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    color:transparent;

    font-size:3rem;

    font-weight:700;

    margin-bottom:15px;

}

.journey h3{

    color:var(--gold);

    font-size:1.7rem;

    margin-bottom:35px;

}

.journey-text{

    color:var(--soft-white);

    font-size:1.15rem;

    line-height:1.9;

    margin-bottom:50px;

}

.journey-button{

    display:inline-block;

    padding:18px 48px;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    color:var(--midnight-blue);

    background:var(--metallic-gold);

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

    transition:var(--transition);

}

.journey-button:hover{

    transform:translateY(-4px);

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

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

footer{

    margin-top:100px;

    background:linear-gradient(
        180deg,
        var(--midnight-blue),
        #04112A
    );

    border-top:2px solid var(--gold);

    padding:60px 30px 40px;

}

.footer-bottom{

    max-width:1400px;

    margin:0 auto;

    text-align:center;

}

.footer-bottom p{

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

    line-height:2;

}

.footer-bottom strong{

    background:var(--metallic-gold);

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

}

/*======================================================
STATEMENT OF FAITH ACCORDIONS
======================================================*/

details{

    details{

    max-width:1000px;

    margin:0 auto;

    border:none;

    border-radius:18px;

    overflow:hidden;

    background:none;

    box-shadow:none;

}

    border:none;

    border-radius:18px;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        #163A82,
        #102B6A,
        #081B4B
    );

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

    transition:all .35s ease;

}

details:hover{

    transform:translateY(-3px);

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

}
details summary{

    list-style:none;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    padding:30px;

    max-width:500px;

    margin:0 auto;

    text-align:center;

    background:linear-gradient(
        180deg,
        #163A82,
        #102B6A,
        #081B4B
    );

    border-radius:20px;

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

    transition:all .35s ease;

}

details summary::-webkit-details-marker{

    display:none;

}

details summary::after{

    content:"+";

    position:absolute;

    right:35px;

    top:50%;

    transform:translateY(-50%);

    font-size:2rem;

    font-weight:700;

    color:var(--gold);

    transition:.35s;

}

details[open] summary::after{

    content:"−";

}

.belief-content{

    max-width:800px;

    margin:40px auto;

    text-align:center;

    line-height:2;

}

.belief-content h4{

    color:var(--gold-light);

    margin:25px 0 12px;

}

.scripture-box{

    margin-top:30px;

    padding:25px;

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

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

    border-radius:12px;

}

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

.content-section{

    max-width:1400px;

    margin:100px auto;

    padding:0 30px;

}

.section-header{

    margin-bottom:50px;

}

.section-header h2{

    font-size:3rem;

    margin-top:10px;

    margin-bottom:20px;

    background:var(--metallic-gold);

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

}

.card-grid{

    display:grid;

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

    gap:30px;

}

.content-card{

    background:#091B42;

    border:1px solid rgba(212,175,55,.30);

    border-radius:25px;

    padding:35px;

    transition:.35s;

}

.content-card:hover{

    transform:translateY(-6px);

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

}

.content-card h3{

    color:var(--gold);

    font-size:1.6rem;

    margin-bottom:15px;

}

.content-card p{

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

    line-height:1.8;

}

.video-container{

    overflow:hidden;

    border-radius:25px;

    border:2px solid var(--gold);

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

}
/*======================================================
PLAYLIST
======================================================*/

.playlist-item{

    display:flex;

    align-items:center;

    gap:20px;

    padding:18px 20px;

    margin-bottom:15px;

    border-radius:18px;

    cursor:pointer;

    transition:.35s;

    border:1px solid transparent;

}

.playlist-item:hover{

    background:#0D2358;

    border-color:rgba(212,175,55,.35);

}

.playlist-item.active{

    background:#102B6A;

    border-color:var(--gold);

}

.track-number{

    width:45px;

    height:45px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:var(--metallic-gold);

    color:#081B4B;

    font-weight:bold;

    flex-shrink:0;

}

.track-information{

    flex:1;

}

.track-information h3{

    color:white;

    font-size:1rem;

    margin-bottom:5px;

}

.track-information p{

    color:#CFCFCF;

    font-size:.9rem;

}

.track-time{

    color:var(--gold);

    font-size:1.2rem;

}

.progress-bar{

    width:100%;

    height:8px;

    background:#29467F;

    border-radius:20px;

    overflow:hidden;

    margin-top:30px;

}

.progress-fill{

    width:0%;

    height:100%;

    background:var(--metallic-gold);

    transition:.1s;

}
/*======================================================
ROTATING ALBUM COVER
======================================================*/

.media-cover img{

    width:100%;

    display:block;

    border-radius:22px;

    transition:.4s;

}

.media-cover img.playing{

    animation:spinAlbum 20s linear infinite;

}

@keyframes spinAlbum{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}
/*======================================================
VOLUME
======================================================*/

.volume-container{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:25px;

}

#volumeSlider{

    width:220px;

    cursor:pointer;

    accent-color:var(--gold);

}
/*======================================================
TIME DISPLAY
======================================================*/

.time-display{

    display:flex;

    justify-content:space-between;

    color:var(--gold);

    margin-bottom:10px;

    font-size:.9rem;

}
/*======================================================
WELCOME
======================================================*/

.welcome{

    background:var(--royal-blue);

    padding:80px 8%;

    text-align:center;

}

.welcome h2{

    color:var(--white);

    font-size:3rem;

    margin-bottom:30px;

}

.welcome p{

    max-width:1100px;

    margin:0 auto;

    color:var(--soft-white);

    font-size:1.15rem;

    line-height:1.9;

}
/*======================================================
HOME MINISTRY MEDALLIONS
======================================================*/

.ministries{

    padding:100px 8%;

}



.section-heading{

    text-align:center;

    margin-bottom:70px;

}

.section-heading h2{

    background:var(--metallic-gold);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    color:transparent;

    font-size:3.25rem;

    font-weight:700;

    margin-bottom:22px;

    line-height:1.2;

}

.section-heading p{

    color:var(--soft-white);

    font-size:1.2rem;

    max-width:700px;

    margin:0 auto;

    line-height:1.8;

}
/*======================================================
GOLD TEXT
======================================================*/

.gold-title{

    background:var(--metallic-gold);

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

    color:transparent;

}

.ministry-grid{

    display:grid;

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

    gap:55px;

    justify-items:center;

}

.ministry-card{

    width:260px;

    height:260px;

    border-radius:50%;

    background:linear-gradient(
        180deg,
        #163A82 0%,
        #102B6A 55%,
        #081B4B 100%
    );

    border:3px solid var(--gold);

    box-shadow:
        0 15px 35px rgba(0,0,0,.35),
        inset 0 0 25px rgba(255,255,255,.04);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    align-items:center;

    text-align:center;

    padding:22px 20px 24px;

    cursor:pointer;

    transition:var(--transition);

}
.ministry-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 28px 50px rgba(0,0,0,.45),
        0 0 25px rgba(212,175,55,.30);

}

.ministry-card h3{

    color:var(--white);

    font-size:1.15rem;

    font-weight:700;

    line-height:1.35;

    margin:0;

    min-height:64px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

}


.cross{

    display:flex;

    align-items:center;

    justify-content:center;

    flex:1;

}

.cross-icon{

    width:70px;

    height:70px;

    fill:#D4AF37;

    filter:
        drop-shadow(0 0 10px rgba(212,175,55,.45));

}




.ministry-card:hover .cross::after{

    left:140%;

    top:-40%;

    opacity:1;

}

.ministry-action{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:118px;

    height:38px;

    padding:0 22px;

    border-radius:999px;

    text-decoration:none;

    font-size:.92rem;

    font-weight:700;

    letter-spacing:.4px;

    color:var(--midnight-blue);

    background:var(--metallic-gold);

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.75),
        inset 0 -2px 3px rgba(0,0,0,.28),
        0 8px 16px rgba(0,0,0,.30);

    transition:var(--transition);

}

.ministry-card:hover .ministry-action{

    transform:translateY(-3px);

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.8),
        inset 0 -2px 3px rgba(0,0,0,.35),
        0 12px 24px rgba(212,175,55,.40);

}
.cross-icon{

    fill:#D4AF37;

    filter:
        drop-shadow(0 2px 2px rgba(0,0,0,.45))
        drop-shadow(0 0 6px rgba(255,215,100,.30));

    transition:.35s;

}

.ministry-card:hover .cross-icon{

    transform:scale(1.12);

    filter:

        drop-shadow(0 0 14px rgba(255,220,120,.75))
        drop-shadow(0 0 22px rgba(255,200,80,.45));

}
/*======================================================
MINISTRY MODAL
======================================================*/

.ministry-modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(6px);

    justify-content:center;

    align-items:center;

    z-index:9999;

    padding:30px;

}

.modal-body{

    width:min(1100px,95%);

    background:linear-gradient(
        180deg,
        #10396F,
        #0A2D5C
    );

    border:2px solid #D4AF37;

    border-radius:28px;

    overflow:hidden;

    box-shadow:
        0 30px 70px rgba(0,0,0,.55),
        0 0 30px rgba(212,175,55,.20);

    animation:modalFade .45s ease;

    position:relative;

    display:grid;

    grid-template-columns:40% 60%;

}



.modal-left{

    padding:45px 35px;

    text-align:center;

    border-right:1px solid rgba(212,175,55,.25);

}

.modal-right{

    padding:45px;

}

.close-modal{

    position:absolute;

    top:20px;

    right:20px;

    background:none;

    border:none;

    color:#D4AF37;

    font-size:2rem;

    cursor:pointer;

}

.modal-body h2{

    color:white;

    margin-bottom:20px;

}



.modal-body h2::after{

    content:"";

    display:block;

    width:90px;

    height:2px;

    margin:18px auto;

    background:#D4AF37;

}

.modal-cross{

    margin:30px 0;

}

.cross-icon{

    width:70px;

    height:70px;

    fill:#D4AF37;

    filter:drop-shadow(0 0 10px rgba(212,175,55,.40));

}

#modalDescription{

    color:#ECECEC;

    line-height:1.8;

    margin:30px 0;

}

.modal-button{

    display:inline-block;
    
    position:relative;

    overflow:hidden;

    padding:15px 40px;

    border-radius:40px;

    text-decoration:none;

    font-weight:700;

    font-size:1rem;

    color:#082B57;

    border:1px solid #8B6508;

    background:linear-gradient(
        to bottom,
        #FFFFFF 0%,
        #FFFBEA 6%,
        #FFEFAE 15%,
        #F4D35E 32%,
        #D4AF37 48%,
        #B8860B 66%,
        #8C6508 82%,
        #E6C55A 100%
    );

   .modal-button::before{

    content:"";

    position:absolute;

    top:4px;

    left:8%;

    width:84%;

    height:38%;

    border-radius:999px;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.95),
        rgba(255,255,255,.15)
    );

    pointer-events:none;

}

    transition:all .25s ease;

}

.modal-button:hover{

    transform:translateY(-2px);

    filter:brightness(1.08);

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,1),
        inset 0 -4px 5px rgba(70,45,0,.45),
        0 10px 18px rgba(0,0,0,.35);

}

.modal-right h3{

    color:#D4AF37;

    margin-bottom:20px;

    font-size:1.8rem;

}

.modal-right h4{

    color:#D4AF37;

    margin:25px 0 10px;

}

.modal-right p{

    color:#ECECEC;

    line-height:1.8;

}

.modal-platforms{

    display:flex;

    flex-wrap:wrap;

    justify-content:center;

    gap:16px;

    margin-top:30px;

}

.modal-platforms a{

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    width:170px;

    height:48px;

    text-decoration:none;

    border-radius:999px;

    font-weight:700;

    letter-spacing:.4px;

    color:#082B57;

    border:1px solid #8B6508;

    background:linear-gradient(
        to bottom,
        #FFFFFF 0%,
        #FFFFFF 5%,
        #FFFDF7 10%,
        #FFF5D9 18%,
        #FFEFAE 28%,
        #F4D35E 42%,
        #D4AF37 56%,
        #B8860B 72%,
        #8C6508 86%,
        #E6C55A 100%
    );

    box-shadow:
        inset 0 3px 0 rgba(255,255,255,.95),
        inset 0 6px 10px rgba(255,255,255,.35),
        inset 0 -4px 5px rgba(90,55,0,.45),
        0 8px 15px rgba(0,0,0,.30);

    transition:all .25s ease;

}
.modal-platforms a::before{

    content:"";

    position:absolute;

    top:4px;

    left:8%;

    width:84%;

    height:38%;

    border-radius:999px;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.95),
        rgba(255,255,255,0)
    );

    pointer-events:none;

}

.modal-platforms a:hover{

    transform:translateY(-3px);

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.75),
        inset 0 -2px 3px rgba(0,0,0,.30),
        0 14px 26px rgba(212,175,55,.40);

}


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

.hero{

    position:relative;

    width:100%;

    overflow:hidden;

    text-align:center;

    background:var(--midnight-blue);

}

.hero-image{

    display:block;

    width:100%;

    animation:heroZoom 28s ease-in-out infinite alternate;

}

.hero-overlay{

    position:absolute;

    left:50%;

    bottom:55px;

    transform:translateX(-50%);

}

.hero-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-width:240px;

    height:58px;

    padding:0 40px;

    border-radius:999px;

    text-decoration:none;

    font-size:1rem;

    font-weight:700;

    letter-spacing:.5px;

    color:var(--midnight-blue);

    background:var(--metallic-gold);

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.75),
        inset 0 -2px 3px rgba(0,0,0,.30),
        0 10px 22px rgba(0,0,0,.35);

    transition:var(--transition);

    position:relative;

    overflow:hidden;

}

.hero-button::before{

    content:"";

    position:absolute;

    top:4px;

    left:8%;

    width:84%;

    height:38%;

    border-radius:999px;

    background:linear-gradient(
        to bottom,
        rgba(255,255,255,.95),
        rgba(255,255,255,.15)
    );

    pointer-events:none;

}

.hero-button:hover{

    transform:translateY(-4px);

    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.85),
        inset 0 -2px 3px rgba(0,0,0,.35),
        0 18px 32px rgba(212,175,55,.45);

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.02);

    }

}
/*======================================================
WELCOME
======================================================*/

.welcome{

    background:var(--royal-blue);

    color:var(--white);

    text-align:center;

    padding:90px 8%;

}

.welcome h2{

    background:var(--metallic-gold);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    color:transparent;

    font-size:3rem;

    font-weight:700;

    margin-bottom:30px;

}



.welcome p{

    max-width:1100px;

    margin:0 auto;

    font-size:1.15rem;

    line-height:1.9;

    color:var(--soft-white);

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

.footer{

    background:var(--midnight-blue);

    border-top:2px solid var(--gold);

    padding:90px 8% 50px;

}

.footer-container{

    max-width:1400px;

    margin:auto;

}

.footer-brand{

    max-width:900px;

    margin:0 auto 80px;

    text-align:center;

}

.footer-brand h2{

    font-size:3rem;

    margin-bottom:20px;

    background:var(--metallic-gold);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

    color:transparent;

}

.footer-tagline{

    color:var(--white);

    font-size:1.4rem;

    font-weight:600;

    margin-bottom:30px;

}

.footer-description{

    color:var(--soft-white);

    line-height:1.9;

    font-size:1.1rem;

    margin-bottom:45px;

}

.footer-button{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:240px;

    height:54px;

    border-radius:999px;

    text-decoration:none;

    font-weight:700;

    color:var(--midnight-blue);

    background:var(--metallic-gold);

    box-shadow:

        inset 0 2px 2px rgba(255,255,255,.75),

        inset 0 -2px 3px rgba(0,0,0,.30),

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

    transition:var(--transition);

}

.footer-button:hover{

    transform:translateY(-4px);

}

.footer-links{

    display:grid;

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

    gap:80px;

    margin-bottom:80px;

}

.footer-column{

    text-align:center;

}

.footer-column h3{

    color:var(--gold);

    margin-bottom:25px;

    font-size:1.35rem;

}

.footer-column a{

    display:block;

    color:var(--soft-white);

    text-decoration:none;

    margin:14px 0;

    transition:var(--transition);

}

.footer-column a:hover{

    color:var(--gold-light);

}

.footer-bottom{

    text-align:center;

    border-top:1px solid rgba(212,175,55,.30);

    padding-top:40px;

}

.footer-slogan{

    background:var(--metallic-gold);

    -webkit-background-clip:text;

    background-clip:text;

    -webkit-text-fill-color:transparent;

    color:transparent;

    font-size:1.6rem;

    font-weight:700;

    margin-bottom:20px;

}

.footer-bottom p{

    color:var(--soft-white);

    margin:10px 0;

    line-height:1.8;

}

.footer-bottom strong{

    color:var(--gold);

}
/*======================================================
BELIEF GRID
======================================================*/

.belief-grid{

    display:grid;

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

    gap:30px;

    max-width:1200px;

    margin:60px auto;

    align-items:start;

}

@media (max-width:900px){

    .belief-grid{

        grid-template-columns:1fr;

    }

}
/*======================================================
BELIEF GRID
======================================================*/

.belief-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:30px;

    max-width:1200px;

    margin:60px auto;

    align-items:start;

}

@media(max-width:900px){

    .belief-grid{

        grid-template-columns:1fr;

    }

}
/******************************************************
STORY SECTION
******************************************************/

.story-section{

    max-width:1100px;

    margin:0 auto;

    padding:80px 40px;

    text-align:center;

}
.story-section p{

    max-width:950px;

    margin:0 auto 40px;

    text-align:center;

    font-size:1.35rem;

    line-height:2.15;

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

}
.story-section h2{

    background:var(--metallic-gold);

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    color:transparent;

    font-size:3.2rem;

    font-weight:700;

    text-align:center;

    margin:0 auto 20px;

    display:block;

}
.story-section h3{

    background:var(--metallic-gold);

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    color:transparent;

    font-size:2.4rem;

    font-weight:700;

    text-align:center;

    margin:70px auto 25px;

    display:block;

}
.section-divider{

    width:120px;

    height:3px;

    margin:25px auto 40px;

    background:var(--metallic-gold);

    border-radius:50px;

}
/*======================================================
FOUNDERS
======================================================*/

.founders-intro{

    max-width:900px;

    margin:0 auto 70px;

}

.founders-grid{

    display:grid;

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

    gap:60px;

    margin-top:40px;

}

.founder-card{

    background:linear-gradient(
        180deg,
        #163A82,
        #102B6A,
        #081B4B
    );

    border:2px solid rgba(212,175,55,.35);

    border-radius:28px;

    padding:45px;

    text-align:center;

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

}

.founder-card img{

    width:220px;

    height:220px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #D4AF37;

    margin-bottom:30px;

}

.founder-card h3{

    margin-bottom:10px;

}

.founder-title{

    display:block;

    color:#D4AF37;

    font-weight:700;

    margin-bottom:30px;

    letter-spacing:.5px;

}

.founder-card p{

    max-width:100%;

    text-align:center;

}