/*==============================================================
PROJECTS HERO
==============================================================*/

.projects-hero{

    position:relative;

    min-height:85vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:

    url("../../images/projects/projects-banner.jpg")

    center center/cover no-repeat;

}

.projects-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(5,20,35,.88),

        rgba(5,20,35,.78)

    );

}

.projects-hero .container{

    position:relative;

    z-index:2;

}

.hero-tag{

    display:inline-block;

    padding:12px 30px;

    border-radius:40px;

    background:rgba(212,175,55,.12);

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:30px;

}

.projects-hero h1{

    color:#fff;

    font-size:clamp(3rem,6vw,5.5rem);

    margin-bottom:30px;

    line-height:1.15;

}

.projects-hero p{

    color:#d7d7d7;

    font-size:1.15rem;

    max-width:900px;

    margin:0 auto 45px;

    line-height:1.9;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.hero-buttons .btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 40px;

    border:2px solid var(--primary);

    border-radius:50px;

    color:#fff;

    text-decoration:none;

    transition:.35s;

}

.hero-buttons .btn-outline:hover{

    background:var(--primary);

    color:#111;

}

@media(max-width:768px){

.projects-hero{

    min-height:70vh;

}

.projects-hero h1{

    font-size:2.6rem;

}

.projects-hero p{

    font-size:1rem;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons a{

    width:100%;

}

}
/*==============================================================
FEATURED PROJECTS
==============================================================*/

.featured-projects{

    position:relative;

    background:var(--dark);

    overflow:hidden;

}

.featured-projects::before{

    content:"";

    position:absolute;

    right:-220px;

    top:-220px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.08),

        transparent 70%

    );

    filter:blur(70px);

}

.featured-projects .section-title{

    margin-bottom:60px;

}

.featured-projects h6{

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:18px;

}

.featured-projects h2{

    color:#fff;

    margin-bottom:20px;

}

.featured-projects .section-title p{

    color:#cfcfcf;

    max-width:760px;

    margin:auto;

    line-height:1.9;

}

/*==============================================================
CATEGORY CARD
==============================================================*/

.project-category{

    display:block;

    background:#0d2336;

    border-radius:24px;

    overflow:hidden;

    text-decoration:none;

    transition:.4s;

    border:1px solid rgba(255,255,255,.05);

    height:100%;

}

.project-category:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(0,0,0,.35);

    border-color:rgba(212,175,55,.35);

}

.project-image{

    height:260px;

    overflow:hidden;

}

.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.project-category:hover .project-image img{

    transform:scale(1.08);

}

.project-content{

    padding:35px;

}

.project-content span{

    color:var(--primary);

    font-size:.9rem;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:700;

}

.project-content h3{

    color:#fff;

    margin:18px 0;

    line-height:1.4;

}

.project-content p{

    color:#cfcfcf;

    line-height:1.9;

    margin-bottom:28px;

}

.project-link{

    display:flex;

    justify-content:space-between;

    align-items:center;

    color:var(--primary);

    font-weight:700;

}

.project-link i{

    transition:.35s;

}

.project-category:hover .project-link i{

    transform:translateX(8px);

}
/*==============================================================
OIL & GAS PROJECTS
==============================================================*/

.oil-gas-projects{

    background:#081c2d;

    position:relative;

    overflow:hidden;

}

.oil-gas-projects::before{

    content:"";

    position:absolute;

    left:-250px;

    top:-250px;

    width:550px;

    height:550px;

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.08),

        transparent 70%

    );

    filter:blur(80px);

}

.energy-card{

    background:#0d2336;

    border-radius:24px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.05);

    transition:.4s;

    height:100%;

}

.energy-card:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.35);

    box-shadow:0 30px 70px rgba(0,0,0,.35);

}

.energy-image{

    height:260px;

    overflow:hidden;

}

.energy-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.energy-card:hover .energy-image img{

    transform:scale(1.08);

}

.energy-content{

    padding:35px;

}

.energy-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:rgba(212,175,55,.12);

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:25px;

    transition:.35s;

}

.energy-card:hover .energy-icon{

    background:var(--primary);

    color:#111;

}

.energy-content h3{

    color:#fff;

    margin-bottom:18px;

}

.energy-content p{

    color:#cfcfcf;

    line-height:1.9;

    margin-bottom:30px;

}

.energy-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:700;

    text-decoration:none;

}

.energy-content a i{

    transition:.35s;

}

.energy-content a:hover i{

    transform:translateX(8px);

}
/*==============================================================
NATURAL GAS PROJECTS
==============================================================*/

.natural-gas-projects{

    position:relative;

    background:var(--dark);

    overflow:hidden;

}

.natural-gas-projects::before{

    content:"";

    position:absolute;

    right:-240px;

    bottom:-240px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.08),

        transparent 70%

    );

    filter:blur(80px);

}

.natural-gas-projects .section-title{

    margin-bottom:60px;

}

.natural-gas-projects h6{

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:18px;

}

.natural-gas-projects h2{

    color:#fff;

    margin-bottom:20px;

}

.natural-gas-projects .section-title p{

    color:#cfcfcf;

    max-width:760px;

    margin:auto;

    line-height:1.9;

}
/*==============================================================
RENEWABLE ENERGY PROJECTS
==============================================================*/

.renewable-projects{

    position:relative;

    background:#081c2d;

    overflow:hidden;

}

.renewable-projects::before{

    content:"";

    position:absolute;

    left:-240px;

    bottom:-240px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.08),

        transparent 70%

    );

    filter:blur(80px);

}

.renewable-projects .section-title{

    margin-bottom:60px;

}

.renewable-projects h6{

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:18px;

}

.renewable-projects h2{

    color:#fff;

    margin-bottom:20px;

}

.renewable-projects .section-title p{

    color:#cfcfcf;

    max-width:760px;

    margin:auto;

    line-height:1.9;

}
/*==============================================================
PROJECT LIFECYCLE
==============================================================*/

.project-lifecycle{

    position:relative;

    background:var(--dark);

    overflow:hidden;

}

.project-lifecycle::before{

    content:"";

    position:absolute;

    right:-240px;

    top:-240px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.08),

        transparent 70%

    );

    filter:blur(80px);

}

.project-lifecycle .section-title{

    margin-bottom:80px;

}

.project-lifecycle h6{

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:18px;

}

.project-lifecycle h2{

    color:#fff;

    margin-bottom:20px;

}

.project-lifecycle .section-title p{

    color:#cfcfcf;

    max-width:760px;

    margin:auto;

    line-height:1.9;

}

/*==============================================================
TIMELINE
==============================================================*/

.lifecycle-wrapper{

    position:relative;

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:30px;

}

.lifecycle-line{

    position:absolute;

    top:42px;

    left:8%;

    right:8%;

    height:3px;

    background:rgba(212,175,55,.25);

}

.lifecycle-step{

    position:relative;

    text-align:center;

    z-index:2;

}

.step-circle{

    width:85px;

    height:85px;

    margin:0 auto 30px;

    border-radius:50%;

    background:#0d2336;

    border:3px solid var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.step-circle span{

    color:var(--primary);

    font-size:24px;

    font-weight:700;

}

.lifecycle-step:hover .step-circle{

    background:var(--primary);

    transform:translateY(-8px);

}

.lifecycle-step:hover .step-circle span{

    color:#111;

}

.lifecycle-step h4{

    color:#fff;

    margin-bottom:15px;

}

.lifecycle-step p{

    color:#cfcfcf;

    line-height:1.8;

}

/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:1200px){

.lifecycle-wrapper{

    grid-template-columns:repeat(3,1fr);

}

.lifecycle-line{

    display:none;

}

}

@media(max-width:768px){

.lifecycle-wrapper{

    grid-template-columns:1fr;

}

}
/*==============================================================
GLOBAL OPERATIONS
==============================================================*/

.global-operations{

    position:relative;

    background:#081c2d;

    overflow:hidden;

}

.global-operations::before{

    content:"";

    position:absolute;

    left:-220px;

    bottom:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.08),

        transparent 70%

    );

    filter:blur(80px);

}

/*==============================================================
IMAGE
==============================================================*/

.operations-image{

    position:relative;

}

.operations-image img{

    width:100%;

    height:700px;

    object-fit:cover;

    border-radius:24px;

    box-shadow:0 30px 80px rgba(0,0,0,.35);

}

.operations-badge{

    position:absolute;

    left:-20px;

    bottom:40px;

    background:#0d2336;

    border-left:5px solid var(--primary);

    padding:25px 30px;

    border-radius:20px;

    box-shadow:0 20px 60px rgba(0,0,0,.35);

}

.operations-badge h3{

    color:#fff;

    margin-bottom:8px;

}

.operations-badge span{

    color:#d5d5d5;

}

/*==============================================================
TEXT
==============================================================*/

.global-operations h6{

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:18px;

}

.global-operations h2{

    color:#fff;

    margin-bottom:25px;

}

.global-operations p{

    color:#cfcfcf;

    line-height:1.9;

}

/*==============================================================
GRID
==============================================================*/

.operations-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    margin-top:40px;

}

.operation-box{

    background:#0d2336;

    padding:30px;

    border-radius:20px;

    border:1px solid rgba(255,255,255,.05);

    transition:.35s;

}

.operation-box:hover{

    transform:translateY(-8px);

    border-color:rgba(212,175,55,.35);

}

.operation-box i{

    width:65px;

    height:65px;

    border-radius:50%;

    background:rgba(212,175,55,.12);

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:26px;

    margin-bottom:20px;

    transition:.35s;

}

.operation-box:hover i{

    background:var(--primary);

    color:#111;

}

.operation-box h4{

    color:#fff;

    margin-bottom:15px;

}

.operation-box p{

    margin:0;

}

/*==============================================================
RESPONSIVE
==============================================================*/

@media(max-width:991px){

.operations-image{

    margin-bottom:50px;

}

.operations-image img{

    height:500px;

}

.operations-badge{

    left:20px;

}

}

@media(max-width:768px){

.operations-grid{

    grid-template-columns:1fr;

}

.operations-image img{

    height:400px;

}

.operations-badge{

    position:relative;

    left:0;

    bottom:0;

    margin-top:20px;

}

}
/*==============================================================
HSE SECTION
==============================================================*/

.hse-section{

    position:relative;

    background:var(--dark);

    overflow:hidden;

}

.hse-section::before{

    content:"";

    position:absolute;

    right:-220px;

    top:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.08),

        transparent 70%

    );

    filter:blur(80px);

}

.hse-section .section-title{

    margin-bottom:65px;

}

.hse-section h6{

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:18px;

}

.hse-section h2{

    color:#fff;

    margin-bottom:20px;

}

.hse-section .section-title p{

    color:#cfcfcf;

    max-width:760px;

    margin:auto;

    line-height:1.9;

}

/*==============================================================
CARD
==============================================================*/

.hse-card{

    background:#0d2336;

    padding:45px 30px;

    border-radius:24px;

    text-align:center;

    height:100%;

    border:1px solid rgba(255,255,255,.05);

    transition:.35s;

}

.hse-card:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.35);

    box-shadow:0 30px 70px rgba(0,0,0,.35);

}

.hse-icon{

    width:90px;

    height:90px;

    margin:0 auto 30px;

    border-radius:50%;

    background:rgba(212,175,55,.12);

    display:flex;

    align-items:center;

    justify-content:center;

    transition:.35s;

}

.hse-icon i{

    color:var(--primary);

    font-size:34px;

}

.hse-card:hover .hse-icon{

    background:var(--primary);

    transform:rotate(10deg);

}

.hse-card:hover .hse-icon i{

    color:#111;

}

.hse-card h3{

    color:#fff;

    margin-bottom:18px;

}

.hse-card p{

    color:#cfcfcf;

    line-height:1.8;

    margin:0;

}
/*==============================================================
PROJECT FAQ
==============================================================*/

.projects-faq{

    background:#081c2d;

}

.project-accordion .accordion-item{

    background:#0d2336;

    border:1px solid rgba(255,255,255,.05);

    border-radius:18px;

    margin-bottom:20px;

    overflow:hidden;

}

.project-accordion .accordion-button{

    background:#0d2336;

    color:#fff;

    padding:24px 30px;

    font-weight:600;

    box-shadow:none;

}

.project-accordion .accordion-button:not(.collapsed){

    background:#122c43;

    color:var(--primary);

}

.project-accordion .accordion-button::after{

    filter:invert(1);

}

.project-accordion .accordion-body{

    background:#122c43;

    color:#d5d5d5;

    line-height:1.9;

    padding:25px 30px;

}
/*==============================================================
PROJECT CTA
==============================================================*/

.projects-cta{

    position:relative;

    padding:140px 0;

    background:url("../../images/services/cta-bg.jpg")
    center center/cover no-repeat;

    overflow:hidden;

}

.projects-cta .cta-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(7,24,39,.92),

        rgba(7,24,39,.82)

    );

}

.projects-cta .container{

    position:relative;

    z-index:2;

}

.projects-cta .cta-tag{

    display:inline-block;

    padding:12px 28px;

    border-radius:40px;

    background:rgba(212,175,55,.12);

    color:var(--primary);

    font-weight:700;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:25px;

}

.projects-cta h2{

    color:#fff;

    font-size:clamp(2.5rem,4vw,4.5rem);

    margin-bottom:25px;

}

.projects-cta p{

    color:#d5d5d5;

    max-width:850px;

    margin:0 auto 45px;

    line-height:1.9;

    font-size:18px;

}