/* HERO SECTION */
.hero-section {
    position: relative;
    width: 100%;
    height: 850px;
    overflow: hidden;
}

/* HERO IMAGE */
.hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../images/banner1.png');
    /* MAIN FIX */
    background-size: contain; /* makes full image visible */
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #f8f6f2; /* fills empty space nicely */
}

    /* Optional overlay */
    .hero-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 50%, rgba(0,0,0,0.08) 100% );
    }



/* HERO SECTION */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
}

/* SLIDER */
.hero-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

    .hero-slide.active {
        opacity: 1;
    }

/* OVERLAY */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.15) 100% );
}

/* CONTENT */
.hero-content {
    position: relative;
    z-index: 5;
    max-width: 700px;
    padding-top: 180px;
    padding-left: 80px;
    color: #fff;
}

.hero-eyebrow {
    color: #d4a437;
    letter-spacing: 5px;
    font-size: 14px;
    margin-bottom: 25px;
}

.hero-h1 {
    font-size: 72px;
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 25px;
}

    .hero-h1 em {
        color: #d4a437;
        font-style: normal;
    }

.hero-sub {
    font-size: 20px;
    line-height: 1.8;
    margin-bottom: 35px;
    color: #f1f1f1;
}

/* BUTTONS */
.hero-btns {
    display: flex;
    gap: 20px;
    margin-bottom: 45px;
}

.btn-gold {
    background: #c89b2b;
    color: #fff;
    padding: 16px 32px;
    text-decoration: none;
    font-weight: 600;
}

.btn-outline-light {
    border: 2px solid #fff;
    color: #fff;
    padding: 16px 32px;
    text-decoration: none;
    font-weight: 600;
}

/* STATS */
.hero-stats {
    display: flex;
    gap: 50px;
}

.hero-stat .num {
    font-size: 42px;
    font-weight: 700;
    color: #d4a437;
}

.hero-stat .lbl {
    margin-top: 5px;
    font-size: 15px;
    letter-spacing: 1px;
}

/* MOBILE */
@media(max-width:768px) {

    .hero {
        height: 850px;
    }

    .hero-content {
        padding: 140px 25px 40px;
    }

    .hero-h1 {
        font-size: 42px;
    }

    .hero-sub {
        font-size: 16px;
    }

    .hero-btns {
        flex-direction: column;
    }

    .hero-stats {
        gap: 20px;
        flex-wrap: wrap;
    }
}


/* ARROWS */
.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    transition: 0.3s ease;
}

    .hero-arrow:hover {
        background: #c89b2b;
        transform: translateY(-50%) scale(1.1);
    }

.hero-prev {
    left: 30px;
}

.hero-next {
    right: 30px;
}

/* MOBILE */
@media(max-width:768px) {

    .hero-arrow {
        width: 45px;
        height: 45px;
        font-size: 24px;
    }

    .hero-prev {
        left: 10px;
    }

    .hero-next {
        right: 10px;
    }
}


/* WHY SECTION */
.why {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: linear-gradient( rgba(248,245,238,0.92), rgba(248,245,238,0.94) ), url('../images/mining.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

    /* OPTIONAL PATTERN */
    .why::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top left, rgba(201,155,43,0.08), transparent 30%);
        pointer-events: none;
    }

    /* TITLE */
    .why .section-title {
        font-size: 4rem;
        line-height: 1.1;
        margin-top: 15px;
    }

        .why .section-title em {
            color: #c89b2b;
            font-style: italic;
            font-weight: 400;
        }

/* GRID */
.why-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
    margin-top: 70px;
}

/* CARD */
.why-card {
    position: relative;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(12px);
    padding: 55px 45px;
    border: 1px solid rgba(200,155,43,0.15);
    transition: 0.4s ease;
    overflow: hidden;
}

    /* GOLD TOP LINE */
    .why-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 4px;
        background: #c89b2b;
        transition: 0.4s ease;
    }

    .why-card:hover::before {
        width: 100%;
    }

    /* HOVER */
    .why-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 20px 50px rgba(0,0,0,0.08);
        background: #fff;
    }

/* NUMBER */
.why-num {
    font-size: 5rem;
    font-weight: 200;
    color: rgba(200,155,43,0.25);
    line-height: 1;
    margin-bottom: 20px;
    font-family: 'Cormorant Garamond', serif;
}

/* TITLE */
.why-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 18px;
}

/* TEXT */
.why-text {
    font-size: 1.02rem;
    line-height: 1.9;
    color: #6b7280;
}

/* MOBILE */
@media(max-width:992px) {

    .why-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:768px) {

    .why {
        padding: 90px 0;
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

    .why .section-title {
        font-size: 2.6rem;
    }

    .why-card {
        padding: 40px 30px;
    }
}

.why-card {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(200,155,43,0.12);
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.section-title {
    font-size: 4.5rem;
    font-weight: 300;
    letter-spacing: -1px;
}

    .section-title em {
        color: #c89b2b;
        font-style: italic;
    }


.why {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background-image: linear-gradient( rgba(248,245,238,0.55), rgba(248,245,238,0.60) ), url('../images/mining.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* EXPORT SECTION - LIGHT PREMIUM VERSION */
.export {
    position: relative;
    padding: 140px 0;
    overflow: hidden;
    background: linear-gradient( 135deg, #f8f5ef 0%, #f3efe7 100% );
    color: #111827;
}

/* BACKGROUND DOT PATTERN */
.export-bg-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient( rgba(200,155,43,0.18) 1px, transparent 1px );
    background-size: 28px 28px;
    opacity: 0.55;
}

/* TOP */
.export-top {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 950px;
    margin: auto auto 80px;
}

.export .section-eyebrow {
    color: #c89b2b;
}

.export .section-title {
    color: #111827;
    font-size: 4.5rem;
    line-height: 1.1;
}

    .export .section-title em {
        color: #c89b2b;
        font-style: italic;
        font-weight: 400;
    }

.export .section-sub {
    color: #6b7280;
    margin-top: 30px;
    font-size: 1.15rem;
    line-height: 2;
}

/* WORLD MAP */
.export-world {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

    .export-world img {
        width: 100%;
        opacity: 2;
        filter: grayscale(100%);
    }

/* POINTS */
.exp-point {
    position: absolute;
    transform: translate(-50%, -50%);
}

    .exp-point span {
        width: 14px;
        height: 14px;
        background: #c89b2b;
        border-radius: 50%;
        display: block;
        box-shadow: 0 0 0 rgba(200,155,43,0.45);
        animation: pulse 2s infinite;
    }

    .exp-point label {
        display: block;
        margin-top: 12px;
        color: #111827;
        font-size: 14px;
        letter-spacing: 1px;
        font-weight: 500;
    }

/* LOCATIONS */
.middle-east {
    top: 45%;
    left: 58%;
}

.europe {
    top: 30%;
    left: 51%;
}

.asia {
    top: 40%;
    left: 72%;
}

.africa {
    top: 55%;
    left: 50%;
}

.usa {
    top: 38%;
    left: 23%;
}

.sa {
    top: 68%;
    left: 32%;
}

/* ANIMATION */
@keyframes pulse {

    0% {
        box-shadow: 0 0 0 0 rgba(200,155,43,0.55);
    }

    70% {
        box-shadow: 0 0 0 18px rgba(200,155,43,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(200,155,43,0);
    }
}

/* STATS */
.export-bottom {
    margin-top: 70px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
}

.export-stat {
    background: rgba(255,255,255,0.75);
    border: 1px solid rgba(200,155,43,0.12);
    padding: 40px 20px;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

    .export-stat:hover {
        transform: translateY(-10px);
        border-color: rgba(200,155,43,0.35);
        background: #fff;
    }

    .export-stat h3 {
        font-size: 3rem;
        color: #c89b2b;
        margin-bottom: 10px;
    }

    .export-stat p {
        color: #6b7280;
        letter-spacing: 1px;
    }

/* BUTTON */
.btn-gold {
    background: #c89b2b;
    color: #fff;
    padding: 16px 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    transition: 0.4s ease;
}

    .btn-gold:hover {
        background: #111827;
        transform: translateY(-3px);
    }

/* MOBILE */
@media(max-width:992px) {

    .export-bottom {
        grid-template-columns: 1fr 1fr;
    }

    .export .section-title {
        font-size: 3rem;
    }
}

@media(max-width:768px) {

    .export {
        padding: 100px 0;
    }

    .export-bottom {
        grid-template-columns: 1fr;
    }

    .export .section-title {
        font-size: 2.3rem;
    }

    .exp-point label {
        font-size: 11px;
    }
}


/* QUALITY SECTION */
.quality{
    position:relative;
    padding:130px 0;
    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            #f8f5ef 0%,
            #f2eee7 100%
        );

    color:#111827;
}

/* SUBTLE BACKGROUND PATTERN */
.quality::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        radial-gradient(
            rgba(200,155,43,0.12) 1px,
            transparent 1px
        );

    background-size:28px 28px;

    opacity:0.4;

    pointer-events:none;
}

/* SECTION TOP */
.quality .section-eyebrow{
    justify-content:center;
    color:#c89b2b;
}

.quality .section-title{
    text-align:center;
    font-size:4.5rem;
    line-height:1.1;

    color:#111827;

    margin-top:15px;
}

.quality .section-title em{
    color:#c89b2b;
    font-style:italic;
    font-weight:400;
}

/* SUBTEXT */
.quality p{
    font-size:15px !important;
    color:#6b7280 !important;

    max-width:700px !important;

    margin:25px auto 0 !important;

    line-height:2 !important;
}

/* GRID */
.qual-grid{
    position:relative;
    z-index:2;

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

    margin-top:80px;
}

/* CARD */
.qual-card{
    position:relative;

    background:rgba(255,255,255,0.78);

    border:1px solid rgba(200,155,43,0.12);

    padding:45px 40px;

    backdrop-filter:blur(8px);

    transition:0.45s ease;

    overflow:hidden;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.04);
}

/* GOLD TOP LINE */
.qual-card::before{
    content:"";
    position:absolute;

    top:0;
    left:0;

    width:0;
    height:4px;

    background:#c89b2b;

    transition:0.45s ease;
}

.qual-card:hover::before{
    width:100%;
}

/* HOVER */
.qual-card:hover{
    transform:translateY(-12px);

    background:#fff;

    border-color:rgba(200,155,43,0.35);

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

/* TITLE */
.qual-title{
    font-size:1.45rem;
    font-weight:700;

    color:#111827;

    margin-bottom:20px;

    line-height:1.4;
}

/* TEXT */
.qual-text{
    color:#6b7280;

    line-height:2;

    font-size:15px;
}

/* OPTIONAL ICON STYLE */
.qual-card::after{
    content:"✦";

    position:absolute;

    top:22px;
    right:28px;

    color:rgba(200,155,43,0.22);

    font-size:28px;

    font-weight:300;
}

/* MOBILE */
@media(max-width:992px){

    .qual-grid{
        grid-template-columns:1fr 1fr;
    }

    .quality .section-title{
        font-size:3rem;
    }
}

@media(max-width:768px){

    .quality{
        padding:90px 0;
    }

    .qual-grid{
        grid-template-columns:1fr;
    }

    .quality .section-title{
        font-size:2.4rem;
    }

    .qual-card{
        padding:35px 28px;
    }
}


/* GALLERY SECTION */
.gallery {
    padding: 130px 0;
    background: #f8f5ef;
}

/* HEADER */
.gallery-head {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 70px;
}

.gallery .section-eyebrow {
    justify-content: center;
}

.gallery .section-title {
    font-size: 5rem;
    line-height: 1.1;
    color: #111827;
}

    .gallery .section-title em {
        color: #c89b2b;
        font-style: italic;
        font-weight: 400;
    }

.gallery-sub {
    margin-top: 25px;
    color: #6b7280;
    font-size: 1.1rem;
    line-height: 2;
}

/* MAIN IMAGE */
.gallery-main {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,0.08);
}

    .gallery-main img {
        width: 100%;
        height: 720px;
        object-fit: cover;
        display: block;
    }

/* OVERLAY */
.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( to top, rgba(7,17,32,0.78) 0%, rgba(7,17,32,0.15) 45%, rgba(7,17,32,0.05) 100% );
}

/* CONTENT */
.gallery-content {
    position: absolute;
    left: 70px;
    bottom: 70px;
    max-width: 650px;
    color: #fff;
}

.gallery-badge {
    display: inline-block;
    padding: 12px 22px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
    margin-bottom: 25px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 12px;
}

.gallery-content h3 {
    font-size: 4rem;
    line-height: 1.15;
    margin-bottom: 25px;
}

.gallery-content p {
    font-size: 1.08rem;
    line-height: 2;
    color: rgba(255,255,255,0.78);
    margin-bottom: 35px;
}

/* BUTTON */
.btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 34px;
    background: #c89b2b;
    color: #fff;
    text-decoration: none;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    transition: 0.4s ease;
}

    .btn-gold:hover {
        background: #111827;
        transform: translateY(-4px);
    }

/* MOBILE */
@media(max-width:992px) {

    .gallery .section-title {
        font-size: 3.2rem;
    }

    .gallery-main img {
        height: 600px;
    }

    .gallery-content h3 {
        font-size: 2.8rem;
    }
}

@media(max-width:768px) {

    .gallery {
        padding: 90px 0;
    }

    .gallery-main img {
        height: 520px;
    }

    .gallery-content {
        left: 30px;
        right: 30px;
        bottom: 35px;
    }

        .gallery-content h3 {
            font-size: 2rem;
        }

    .gallery .section-title {
        font-size: 2.4rem;
    }
}