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

.project-hero{

    position:relative;

    min-height:75vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:

    url("../../images/projects/conventional/hero.jpg")

    center center/cover no-repeat;

}

.project-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(6,22,36,.90),

        rgba(6,22,36,.82)

    );

}

.project-hero .container{

    position:relative;

    z-index:2;

}

.project-hero .hero-tag{

    display:inline-block;

    padding:12px 28px;

    border-radius:40px;

    background:rgba(212,175,55,.12);

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:30px;

}

.project-hero h1{

    color:#fff;

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

    margin-bottom:25px;

}

.project-hero p{

    color:#d7d7d7;

    font-size:1.15rem;

    line-height:1.9;

    max-width:850px;

    margin:0 auto 40px;

}

.project-breadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

.project-breadcrumb a{

    color:var(--primary);

    text-decoration:none;

}

.project-breadcrumb span{

    color:#fff;

}

@media(max-width:768px){

.project-hero{

    min-height:65vh;

}

.project-hero h1{

    font-size:2.5rem;

}

.project-hero p{

    font-size:1rem;

}

}
/*==============================================================
PROJECT OVERVIEW
==============================================================*/

.project-overview{

    background:var(--dark);

    position:relative;

    overflow:hidden;

}

.project-overview::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(80px);

}

.overview-image{

    overflow:hidden;

    border-radius:24px;

    box-shadow:0 30px 80px rgba(0,0,0,.35);

}

.overview-image img{

    width:100%;

    height:650px;

    object-fit:cover;

    transition:.5s;

}

.overview-image:hover img{

    transform:scale(1.05);

}

.project-overview h6{

    color:var(--primary);

    text-transform:uppercase;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:20px;

}

.project-overview h2{

    color:#fff;

    margin-bottom:25px;

}

.project-overview p{

    color:#cfcfcf;

    line-height:1.9;

    margin-bottom:20px;

}

/*==============================================================
INFO GRID
==============================================================*/

.project-info{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

    margin-top:35px;

}

.info-item{

    background:#0d2336;

    padding:25px;

    border-radius:18px;

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

}

.info-item span{

    display:block;

    color:#a8b6c3;

    font-size:14px;

    margin-bottom:8px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.info-item strong{

    color:#fff;

    font-size:18px;

}

@media(max-width:991px){

.overview-image img{

    height:450px;

}

}

@media(max-width:768px){

.project-info{

    grid-template-columns:1fr;

}

}
/*==============================================================
WHY CONVENTIONAL OIL
==============================================================*/

.conventional-benefits{

    background:#081c2d;

    position:relative;

    overflow:hidden;

}

.conventional-benefits::before{

    content:"";

    position:absolute;

    left:-250px;

    top:-250px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(
        rgba(212,175,55,.08),
        transparent 70%
    );

    filter:blur(80px);

}

.benefits-image{

    overflow:hidden;

    border-radius:24px;

    box-shadow:0 30px 80px rgba(0,0,0,.35);

}

.benefits-image img{

    width:100%;

    height:650px;

    object-fit:cover;

    transition:.5s;

}

.benefits-image:hover img{

    transform:scale(1.05);

}

.benefit-card{

    background:#0d2336;

    padding:35px;

    border-radius:22px;

    height:100%;

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

    transition:.35s;

}

.benefit-card:hover{

    transform:translateY(-8px);

    border-color:rgba(212,175,55,.35);

    box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.benefit-card i{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(212,175,55,.12);

    color:var(--primary);

    font-size:28px;

    margin-bottom:25px;

    transition:.35s;

}

.benefit-card:hover i{

    background:var(--primary);

    color:#111;

}

.benefit-card h4{

    color:#fff;

    margin-bottom:18px;

}

.benefit-card p{

    color:#cfcfcf;

    line-height:1.8;

    margin:0;

}

@media(max-width:991px){

    .benefits-image img{

        height:450px;

    }

}
/*==============================================================
PROJECT CAPABILITIES
==============================================================*/

.project-capabilities{

    background:var(--dark);

    position:relative;

    overflow:hidden;

}

.project-capabilities::before{

    content:"";

    position:absolute;

    right:-240px;

    bottom:-240px;

    width:550px;

    height:550px;

    border-radius:50%;

    background:radial-gradient(
        rgba(212,175,55,.08),
        transparent 70%
    );

    filter:blur(90px);

}

.capability-card{

    background:#0d2336;

    padding:40px 35px;

    border-radius:22px;

    height:100%;

    text-align:center;

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

    transition:.35s;

}

.capability-card:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.35);

    box-shadow:0 30px 70px rgba(0,0,0,.35);

}

.capability-card i{

    width:85px;

    height:85px;

    margin:0 auto 25px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(212,175,55,.12);

    color:var(--primary);

    font-size:34px;

    transition:.35s;

}

.capability-card:hover i{

    background:var(--primary);

    color:#111;

    transform:rotate(10deg);

}

.capability-card h4{

    color:#fff;

    margin-bottom:18px;

}

.capability-card p{

    color:#cfcfcf;

    line-height:1.8;

    margin:0;

}
/*==============================================================
PROJECT PROCESS
==============================================================*/

.project-process{

    background:#081c2d;

    position:relative;

    overflow:hidden;

}

.project-process::before{

    content:"";

    position:absolute;

    left:-220px;

    top:-220px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.08),

        transparent 70%

    );

    filter:blur(90px);

}

.process-wrapper{

    position:relative;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:35px;

    margin-top:70px;

}

.process-line{

    position:absolute;

    top:42px;

    left:12%;

    right:12%;

    height:3px;

    background:rgba(212,175,55,.25);

}

.process-step{

    position:relative;

    text-align:center;

    z-index:2;

}

.process-number{

    width:85px;

    height:85px;

    margin:0 auto 30px;

    border-radius:50%;

    border:3px solid var(--primary);

    background:#0d2336;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

    font-weight:700;

    transition:.35s;

}

.process-step:hover .process-number{

    background:var(--primary);

    color:#111;

    transform:translateY(-8px);

}

.process-step h4{

    color:#fff;

    margin-bottom:18px;

}

.process-step p{

    color:#cfcfcf;

    line-height:1.8;

}

@media(max-width:992px){

.process-wrapper{

    grid-template-columns:repeat(2,1fr);

}

.process-line{

    display:none;

}

}

@media(max-width:768px){

.process-wrapper{

    grid-template-columns:1fr;

}

}
/*==============================================================
PROJECT STATISTICS
==============================================================*/

.project-stats{

    position:relative;

    background:var(--dark);

    overflow:hidden;

}

.project-stats::before{

    content:"";

    position:absolute;

    right:-250px;

    bottom:-250px;

    width:550px;

    height:550px;

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.08),

        transparent 70%

    );

    filter:blur(90px);

}

.stat-card{

    background:#0d2336;

    border-radius:24px;

    padding:45px 30px;

    text-align:center;

    height:100%;

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

    transition:.35s;

}

.stat-card:hover{

    transform:translateY(-10px);

    border-color:rgba(212,175,55,.35);

    box-shadow:0 30px 70px rgba(0,0,0,.35);

}

.stat-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;

}

.stat-icon i{

    color:var(--primary);

    font-size:34px;

}

.stat-card:hover .stat-icon{

    background:var(--primary);

}

.stat-card:hover .stat-icon i{

    color:#111;

}

.stat-card h3{

    color:#fff;

    font-size:48px;

    margin-bottom:10px;

    font-weight:700;

}

.stat-card span{

    display:block;

    color:var(--primary);

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:18px;

    text-transform:uppercase;

}

.stat-card p{

    color:#cfcfcf;

    line-height:1.8;

    margin:0;

}
/*==============================================================
PROJECT GALLERY
==============================================================*/

.project-gallery{

    position:relative;

    background:#081c2d;

    overflow:hidden;

}

.project-gallery::before{

    content:"";

    position:absolute;

    left:-220px;

    bottom:-220px;

    width:550px;

    height:550px;

    border-radius:50%;

    background:radial-gradient(

        rgba(212,175,55,.08),

        transparent 70%

    );

    filter:blur(90px);

}

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    grid-auto-rows:260px;

    gap:25px;

}

.gallery-item{

    overflow:hidden;

    border-radius:24px;

    position:relative;

    cursor:pointer;

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

}

.gallery-item.large{

    grid-row:span 2;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.gallery-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        transparent,

        rgba(0,0,0,.45)

    );

    opacity:0;

    transition:.4s;

    z-index:2;

}

.gallery-item::after{

    content:"+";

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%) scale(.5);

    width:70px;

    height:70px;

    border-radius:50%;

    background:rgba(212,175,55,.95);

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:38px;

    font-weight:700;

    opacity:0;

    transition:.35s;

    z-index:3;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

.gallery-item:hover::before{

    opacity:1;

}

.gallery-item:hover::after{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

}

@media(max-width:992px){

.gallery-grid{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.gallery-grid{

    grid-template-columns:1fr;

    grid-auto-rows:280px;

}

.gallery-item.large{

    grid-row:span 1;

}

}
/*==============================================================
PROJECT FAQ
==============================================================*/

.project-faq{

    background:var(--dark);

}

.project-faq .accordion-item{

    background:#0d2336;

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

    margin-bottom:20px;

    border-radius:18px;

    overflow:hidden;

}

.project-faq .accordion-button{

    background:#0d2336;

    color:#fff;

    padding:24px 30px;

    font-weight:600;

    box-shadow:none;

}

.project-faq .accordion-button:not(.collapsed){

    background:#132b40;

    color:var(--primary);

}

.project-faq .accordion-button::after{

    filter:invert(1);

}

.project-faq .accordion-body{

    background:#132b40;

    color:#d6d6d6;

    line-height:1.9;

    padding:25px 30px;

}
/*==============================================================
PROJECT CTA
==============================================================*/

.project-detail-cta{

    position:relative;

    padding:140px 0;

    background:url("../../images/services/cta-bg.jpg")
    center center/cover no-repeat;

    overflow:hidden;

}

.project-detail-cta .cta-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(5,20,35,.93),

        rgba(5,20,35,.85)

    );

}

.project-detail-cta .container{

    position:relative;

    z-index:2;

}

.project-detail-cta .cta-tag{

    display:inline-block;

    padding:12px 30px;

    border-radius:50px;

    background:rgba(212,175,55,.12);

    color:var(--primary);

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:700;

    margin-bottom:25px;

}

.project-detail-cta h2{

    color:#fff;

    font-size:clamp(2.5rem,4vw,4.5rem);

    margin-bottom:25px;

}

.project-detail-cta p{

    color:#d8d8d8;

    max-width:820px;

    margin:0 auto;

    line-height:1.9;

    font-size:18px;

}
/*==============================================================
OFFSHORE HERO
==============================================================*/

.offshore-hero{

    background:

    url("../../images/projects/offshore/hero.jpg")

    center center/cover no-repeat;

}
/*==============================================================
OFFSHORE CTA
==============================================================*/

.offshore-cta{

    background:
    url("../../images/services/cta-bg.jpg")
    center center/cover no-repeat;

}
/*==============================================================
PIPELINE HERO
==============================================================*/

.pipeline-hero{

    background:

    url("../../images/projects/pipeline/hero.jpg")

    center center/cover no-repeat;

}
/*==============================================================
PIPELINE CTA
==============================================================*/

.pipeline-cta{

    background:
    url("../../images/services/cta-bg.jpg")
    center center/cover no-repeat;

}
/*==============================================================
LNG HERO
==============================================================*/

.lng-hero{

    background:

    url("../../images/projects/lng/hero.jpg")

    center center/cover no-repeat;

}
/*==============================================================
LNG CTA
==============================================================*/

.lng-cta{

    background:
    url("../../images/services/cta-bg.jpg")
    center center/cover no-repeat;

}
/*==============================================================
SHALE GAS HERO
==============================================================*/

.shale-hero{

    background:
    url("../../images/projects/shale/hero.jpg")
    center center/cover no-repeat;

}
/*==============================================================
SHALE CTA
==============================================================*/

.shale-cta{

    background:
    url("../../images/services/cta-bg.jpg")
    center center/cover no-repeat;

}
/*==============================================================
HYDROGEN HERO
==============================================================*/

.hydrogen-hero{

    background:
    url("../../images/projects/hydrogen/hero.jpg")
    center center/cover no-repeat;

}
/*==============================================================
HYDROGEN CTA
==============================================================*/

.hydrogen-cta{

    background:
    url("../../images/services/cta-bg.jpg")
    center center/cover no-repeat;

}
/*==============================================================
SOLAR HERO
==============================================================*/

.solar-hero{

    background:
    url("../../images/projects/solar/hero.jpg")
    center center/cover no-repeat;

}
/*==============================================================
SOLAR CTA
==============================================================*/

.solar-cta{

    background:
    url("../../images/services/cta-bg.jpg")
    center center/cover no-repeat;

}