/*==============================================================
   GLOBAL STYLE SHEET
   Global Energy Infrastructure
   Version: 1.0
==============================================================*/

/*==============================================================
  GOOGLE FONTS
==============================================================*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/*==============================================================
  CSS VARIABLES
==============================================================*/
:root{

    /* Brand Colors */
    --primary:#D4AF37;
    --primary-light:#E5C96B;
    --primary-dark:#B78D28;

    /* Backgrounds */
    --dark:#030712;
    --dark-2:#081C2D;
    --dark-3:#102437;

    /* Text */
    --white:#ffffff;
    --light:#F5F5F5;
    --gray:#BFC7D5;
    --gray-dark:#6C7685;

    /* Effects */
    --shadow:0 20px 60px rgba(0,0,0,.35);
    --shadow-lg:0 30px 80px rgba(0,0,0,.55);

    --radius:16px;
    --transition:.35s ease;

    --container:1320px;

}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;
    background:var(--dark);
    color:var(--white);

    line-height:1.7;

    overflow-x:hidden;

}

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

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

    font-family:'Montserrat',sans-serif;

    font-weight:700;

    line-height:1.2;

}

h1{

    font-size:clamp(3rem,6vw,5.5rem);

}

h2{

    font-size:clamp(2.2rem,5vw,3.5rem);

}

h3{

    font-size:2rem;

}

h4{

    font-size:1.4rem;

}

p{

    color:var(--gray);

    margin-bottom:1rem;

    font-size:1.05rem;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

img{

    width:100%;

    display:block;

}

/*==============================================================
 LAYOUT
==============================================================*/

.container{

    max-width:var(--container);

}

section{

    position:relative;

    padding:110px 0;

}

.section-tag{

    display:inline-block;

    color:var(--primary);

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:15px;

    text-transform:uppercase;

}

.section-title{

    margin-bottom:50px;

}

.section-title h2{

    margin-bottom:20px;

}

.text-center{

    text-align:center;

}

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

.btn-gold{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-light)
    );

    color:#111;

    font-weight:700;

    padding:16px 34px;

    border-radius:50px;

    transition:var(--transition);

    border:none;

    cursor:pointer;

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

}

.btn-gold:hover{

    transform:translateY(-4px);

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

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border:2px solid rgba(255,255,255,.4);

    color:#fff;

    border-radius:50px;

    transition:var(--transition);

}

.btn-outline:hover{

    background:#fff;

    color:#111;

}

/*==============================================================
 GLASS EFFECT
==============================================================*/

.glass{

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12);

}

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

.card{

    background:var(--dark-2);

    border:none;

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-10px);

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

}

/*==============================================================
 LOADER
==============================================================*/

#loader{

    position:fixed;

    inset:0;

    background:var(--dark);

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    z-index:99999;

}

.loader-logo img{

    width:180px;

    margin-bottom:30px;

}

.loader-circle{

    width:70px;

    height:70px;

    border-radius:50%;

    border:4px solid rgba(255,255,255,.15);

    border-top-color:var(--primary);

    animation:spin 1s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}

/*==============================================================
 SCROLLBAR
==============================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--dark);

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-light);

}

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

::selection{

    background:var(--primary);

    color:#111;

}

/*==============================================================
 SCROLL PROGRESS BAR
==============================================================*/

#progress-bar{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );

    z-index:999999;

}

/*==============================================================
 REVEAL HELPERS
==============================================================*/

.fade-up{

    opacity:0;

    transform:translateY(50px);

}

.fade-left{

    opacity:0;

    transform:translateX(-60px);

}

.fade-right{

    opacity:0;

    transform:translateX(60px);

}

/*==============================================================
 UTILITIES
==============================================================*/

.rounded-xl{

    border-radius:24px;

}

.shadow-lg{

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

}

.text-gold{

    color:var(--primary);

}

.bg-dark{

    background:var(--dark);

}

.bg-dark-2{

    background:var(--dark-2);

}

.bg-dark-3{

    background:var(--dark-3);

}

.py-120{

    padding-top:120px;

    padding-bottom:120px;

}