/* ==========================================================
   TREASURES ROCK
   MAIN WEBSITE STYLESHEET
========================================================== */


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

:root {

    --gold: #c99732;
    --gold-light: #e2bd63;
    --gold-dark: #8e681b;

    --black: #0a0d0f;
    --dark: #111619;
    --dark-2: #171d20;

    --gray: #667078;
    --light: #f5f6f4;
    --white: #ffffff;

    --border: #e3e5e5;

    --font-heading: "Montserrat", sans-serif;
    --font-body: "DM Sans", sans-serif;

}


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

html {
    scroll-behavior: smooth;
}

body {

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

    color: #30383d;

    background: var(--white);

    line-height: 1.7;

    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {

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

    font-weight: 700;

    line-height: 1.2;

    color: var(--dark);
}

a {

    text-decoration: none;

    transition: all 0.3s ease;
}

img {

    max-width: 100%;

    height: auto;
}


/* ==========================================================
   TOP BAR
========================================================== */

.topbar {

    background: #080a0b;

    color: #aeb6ba;

    font-size: 13px;

    padding: 8px 0;
}

.topbar a {

    color: #aeb6ba;
}

.topbar a:hover {

    color: var(--gold-light);
}


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

.main-navbar {

    background: rgba(10, 13, 15, 0.98);

    padding: 15px 0;

    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.navbar-brand {

    color: white !important;

    gap: 10px;
}

.brand-mark {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--gold);

    color: white;

    border-radius: 50%;

    font-size: 20px;

    box-shadow: 0 5px 20px rgba(201,151,50,0.2);
}

.brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1;
}

.brand-text strong {

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

    font-size: 17px;

    letter-spacing: 1.5px;
}

.brand-text span {

    color: var(--gold-light);

    font-size: 11px;

    letter-spacing: 4px;

    margin-top: 5px;
}

.navbar-nav .nav-link {

    color: rgba(255,255,255,0.75);

    font-weight: 500;

    padding: 10px 15px !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {

    color: var(--gold-light);
}


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

.btn {

    border-radius: 3px;

    padding: 12px 24px;

    font-weight: 700;

    letter-spacing: 0.2px;
}

.btn-gold {

    background: var(--gold);

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

    color: white;
}

.btn-gold:hover {

    background: var(--gold-light);

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

    color: var(--dark);

    transform: translateY(-2px);
}

.btn-dark {

    background: var(--dark);

    border-color: var(--dark);

    color: white;
}

.btn-dark:hover {

    background: var(--gold);

    border-color: var(--gold);

    color: white;
}


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

.hero-image {

    height: 760px;

    object-fit: cover;
}

.hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0.82) 0%,
            rgba(0,0,0,0.57) 45%,
            rgba(0,0,0,0.2) 100%
        );
}

.hero-caption {

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    display: flex;

    align-items: center;

    text-align: left;

    padding: 0;

}

.hero-caption .container {

    padding-top: 70px;
}

.hero-eyebrow {

    display: inline-block;

    color: var(--gold-light);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 20px;
}

.hero-caption h1,
.hero-caption h2 {

    color: white;

    font-size: clamp(42px, 5vw, 76px);

    max-width: 850px;

    margin-bottom: 25px;

    letter-spacing: -2px;
}

.hero-caption h1 span,
.hero-caption h2 span {

    color: var(--gold-light);
}

.hero-caption p {

    color: rgba(255,255,255,0.85);

    font-size: 18px;

    max-width: 700px;

    margin-bottom: 30px;
}

.hero-buttons {

    display: flex;

    gap: 12px;

    flex-wrap: wrap;
}

.carousel-indicators {

    z-index: 10;
}

.carousel-indicators button {

    width: 35px;

    height: 3px;
}


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

.section-padding {

    padding: 110px 0;
}

.section-heading {

    max-width: 750px;

    margin: auto;
}

.section-label {

    color: var(--gold-dark);

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

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 3px;

    display: block;

    margin-bottom: 15px;
}

.gold-label {

    color: var(--gold-light);
}

.section-title {

    font-size: clamp(32px, 4vw, 52px);

    margin-bottom: 25px;

    letter-spacing: -1px;
}

.section-title span {

    display: block;

    color: var(--gold);
}


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

.image-card {

    position: relative;

    padding: 15px;
}

.image-card img {

    width: 100%;

    height: 560px;

    object-fit: cover;
}

.image-card::before {

    content: "";

    position: absolute;

    width: 150px;

    height: 150px;

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

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

    top: 0;

    left: 0;
}

.image-card-badge {

    position: absolute;

    right: 0;

    bottom: 30px;

    background: var(--gold);

    color: white;

    padding: 22px 28px;

    display: flex;

    flex-direction: column;
}

.image-card-badge strong {

    font-size: 22px;

    letter-spacing: 2px;
}

.image-card-badge span {

    font-size: 11px;

    letter-spacing: 2px;
}


/* ==========================================================
   STATS
========================================================== */

.stats-section {

    background: var(--gold);

    padding: 55px 0;
}

.stat-box {

    color: white;
}

.stat-icon {

    font-size: 28px;

    margin-bottom: 10px;

    opacity: 0.9;
}

.counter {

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

    font-size: 48px;

    font-weight: 800;

    line-height: 1;
}

.stat-box p {

    margin: 10px 0 0;

    font-size: 14px;

    text-transform: uppercase;

    letter-spacing: 1px;

    opacity: 0.9;
}


/* ==========================================================
   SERVICES
========================================================== */

.service-card {

    background: white;

    padding: 40px;

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

    height: 100%;

    transition: all 0.35s ease;

    position: relative;
}

.service-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 50px rgba(0,0,0,0.08);

    border-color: rgba(201,151,50,0.5);
}

.service-icon {

    width: 62px;

    height: 62px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(201,151,50,0.1);

    color: var(--gold-dark);

    font-size: 28px;

    margin-bottom: 25px;
}

.service-card h3 {

    font-size: 23px;

    margin-bottom: 15px;
}

.service-card p {

    color: var(--gray);

    margin-bottom: 20px;
}

.service-card a {

    color: var(--gold-dark);

    font-weight: 700;
}


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

.dark-section {

    background:

        linear-gradient(
            rgba(10,13,15,0.95),
            rgba(10,13,15,0.95)
        ),

        url("https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&w=1800&q=80");

    background-size: cover;

    background-position: center;

    background-attachment: fixed;
}

.dark-section .section-title {

    color: white;
}

.check-list {

    margin-top: 30px;
}

.check-list div {

    color: rgba(255,255,255,0.8);

    margin-bottom: 15px;

    font-weight: 500;
}

.check-list i {

    color: var(--gold-light);

    margin-right: 10px;
}

.feature-image img {

    width: 100%;

    height: 520px;

    object-fit: cover;

    border: 1px solid rgba(255,255,255,0.1);
}


/* ==========================================================
   MINERALS
========================================================== */

.mineral-card {

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

    padding: 35px;

    height: 100%;

    transition: all 0.3s ease;
}

.mineral-card:hover {

    background: var(--dark);

    color: white;

    transform: translateY(-5px);
}

.mineral-card:hover h3 {

    color: white;
}

.mineral-card i {

    font-size: 36px;

    color: var(--gold);

    display: block;

    margin-bottom: 25px;
}

.mineral-card h3 {

    font-size: 21px;
}

.mineral-card p {

    color: var(--gray);

    margin-bottom: 0;
}

.mineral-card:hover p {

    color: rgba(255,255,255,0.65);
}


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

.cta-section {

    background:

        linear-gradient(
            rgba(10,13,15,0.93),
            rgba(10,13,15,0.93)
        ),

        url("https://images.unsplash.com/photo-1548013146-72479768bada?auto=format&fit=crop&w=1800&q=80");

    background-size: cover;

    background-position: center;

    padding: 110px 0;

    color: white;
}

.cta-section h2 {

    color: white;

    font-size: clamp(32px, 4vw, 54px);

    max-width: 850px;

    margin: 0 auto 20px;
}

.cta-section p {

    max-width: 650px;

    margin: 0 auto 30px;

    color: rgba(255,255,255,0.7);
}


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

.site-footer {

    background: #07090a;

    color: #9aa3a8;

    padding: 85px 0 25px;
}

.footer-brand {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: white;
}

.footer-brand strong {

    display: block;

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

    letter-spacing: 1px;
}

.footer-brand span {

    display: block;

    color: var(--gold-light);

    font-size: 10px;

    letter-spacing: 3px;
}

.site-footer h4 {

    color: white;

    font-size: 16px;

    margin-bottom: 25px;
}

.site-footer p {

    font-size: 14px;

    line-height: 1.8;
}

.footer-links {

    list-style: none;

    padding: 0;

    margin: 0;
}

.footer-links li {

    margin-bottom: 11px;
}

.footer-links a {

    color: #8d969b;

    font-size: 14px;
}

.footer-links a:hover {

    color: var(--gold-light);

    padding-left: 4px;
}

.social-links {

    display: flex;

    gap: 9px;

    margin-top: 25px;
}

.social-links a {

    width: 40px;

    height: 40px;

    border: 1px solid rgba(255,255,255,0.1);

    color: #9aa3a8;

    display: flex;

    align-items: center;

    justify-content: center;
}

.social-links a:hover {

    background: var(--gold);

    border-color: var(--gold);

    color: white;
}

.portfolio-links a {

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #9aa3a8;

    padding: 12px 0;

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

    font-size: 14px;
}

.portfolio-links a:hover {

    color: var(--gold-light);
}

.portfolio-links i {

    font-size: 13px;
}

.footer-line {

    border-color: rgba(255,255,255,0.08);

    margin: 55px 0 25px;
}

.footer-bottom {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    flex-wrap: wrap;
}

.footer-bottom p {

    margin: 0;

    font-size: 12px;
}


/* ==========================================================
   BACK TO TOP
========================================================== */

.back-to-top {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 45px;

    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--gold);

    color: white;

    opacity: 0;

    visibility: hidden;

    z-index: 1000;
}

.back-to-top.show {

    opacity: 1;

    visibility: visible;
}

.back-to-top:hover {

    background: var(--gold-light);

    color: var(--dark);
}


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

@media (max-width: 991px) {

    .hero-image {

        height: 650px;
    }

    .hero-caption h1,
    .hero-caption h2 {

        font-size: 48px;
    }

    .section-padding {

        padding: 80px 0;
    }

    .image-card img {

        height: 450px;
    }

}


@media (max-width: 767px) {

    .topbar {

        display: none;
    }

    .hero-image {

        height: 700px;
    }

    .hero-caption {

        text-align: center;
    }

    .hero-caption h1,
    .hero-caption h2 {

        font-size: 40px;

        letter-spacing: -1px;
    }

    .hero-caption p {

        font-size: 16px;
    }

    .hero-buttons {

        justify-content: center;
    }

    .hero-buttons .btn {

        width: 100%;
    }

    .section-padding {

        padding: 70px 0;
    }

    .image-card {

        margin-top: 20px;
    }

    .image-card img {

        height: 380px;
    }

    .footer-bottom {

        flex-direction: column;
    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

:focus-visible {

    outline: 3px solid var(--gold-light);

    outline-offset: 3px;
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition: none !important;

        animation: none !important;
    }

}