/*
=================================================
ROYAL CROWN INVESTMENTS
GLOBAL DESIGN SYSTEM
=================================================
*/


:root {

    --primary-dark: #0b0b0f;

    --secondary-dark: #151515;

    /*--gold: #d4af37;*/
    --gold: #10b981;

    --gold-light: #f5d76e;

    --white: #ffffff;

    --light-bg: #f8f8f8;

    --text-dark: #222222;

    --shadow:
    0 15px 40px rgba(0,0,0,0.08);

}



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


body {

    font-family:
    "Inter",
    "Segoe UI",
    sans-serif;

    background:
    var(--light-bg);

    color:
    var(--text-dark);

}



a {

    text-decoration:none;

}



img {

    max-width:100%;

}



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


.navbar {

    background:
    var(--primary-dark);

    padding:
    18px 0;

}



.navbar-brand {

    color:
    var(--gold) !important;

    font-size:
    1.5rem;

    font-weight:
    700;

    letter-spacing:
    1px;

}



.nav-link {

    color:
    #ffffff !important;

    margin-left:
    20px;

    transition:
    .3s;

}



.nav-link:hover {

    color:
    var(--gold) !important;

}



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


.btn-gold {

    background:
    var(--gold);

    color:
    var(--primary-dark);

    border-radius:
    30px;

    padding:
    12px 30px;

    font-weight:
    600;

    border:none;

    transition:
    .3s;

}



.btn-gold:hover {

    background:
    var(--gold-light);

    transform:
    translateY(-3px);

}



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


.hero {

    min-height:
    90vh;

    background:

    linear-gradient(
        rgba(0,0,0,.75),
        rgba(0,0,0,.75)
    ),

    url("../images/hero/investment.jpg");


    background-size:
    cover;


    background-position:
    center;


    display:
    flex;


    align-items:
    center;


}



.hero h1 {

    color:
    var(--white);

    font-size:
    3.5rem;

    font-weight:
    700;

}



.hero h1 span {

    color:
    var(--gold);

}



.hero p {

    color:
    #eeeeee;

    font-size:
    1.2rem;

}



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


.section-title {

    text-align:center;

    margin-bottom:
    50px;

}



.section-title h2 {

    font-weight:
    700;

}



.section-title span {

    color:
    var(--gold);

}



/*
==============================
INVESTMENT CARDS
==============================
*/


.investment-card {

    background:
    var(--white);

    border-radius:
    15px;

    padding:
    30px;

    box-shadow:
    var(--shadow);

    transition:
    .3s;

}



.investment-card:hover {

    transform:
    translateY(-10px);

}



.investment-card h4 {

    color:
    var(--primary-dark);

}



.investment-card i {

    font-size:
    40px;

    color:
    var(--gold);

}



/*
==============================
STAT CARDS
==============================
*/


.stat-card {

    background:
    var(--white);

    padding:
    25px;

    border-radius:
    15px;

    box-shadow:
    var(--shadow);

}



.stat-card h3 {

    color:
    var(--gold);

}



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


footer {

    background:
    var(--primary-dark);

    color:
    #ffffff;

    padding:
    50px 0;

}



footer a {

    color:
    #cccccc;

}



footer a:hover {

    color:
    var(--gold);

}



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


@media(max-width:768px){


.hero h1 {

    font-size:
    2.2rem;

}


.nav-link {

    margin-left:
    0;

}


}