/*==================================================
ExposureX Hero
==================================================*/

.exposurex-hero{
    background:#050708;
}

/*----------------------------------
Banner
-----------------------------------*/

.hero-banner{

    position:relative;

    height:500px;

    overflow:hidden;

}

/*----------------------------------
Background Image
-----------------------------------*/

.hero-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

}

/*----------------------------------
Overlay
-----------------------------------*/

.hero-overlay{

    position:absolute;

    inset:0;

    z-index:2;

    background: transparent !important;

}

/*----------------------------------
Bootstrap Container
-----------------------------------*/

.hero-overlay .container{

    height:100%;

    display:flex;

    align-items:center;

}

/*----------------------------------
Content
-----------------------------------*/

.hero-content{

    max-width:650px;

}

.hero-logo{

    width:250px;

    max-width:100%;

    margin-bottom:25px;

}

.hero-title{

    margin:0;

    line-height:1.05;

    font-weight:normal;

    letter-spacing:-1px;

}

.hero-title span{

    display:block;

    color:#64d741;

    font-size:var(--fs-5xl);

    font-weight:normal;

    margin-bottom:8px;

}

.hero-title strong{

    display:block;

    color:#fff;

    font-size:var(--fs-5xl);

    font-weight:normal;

}

/*==================================================
Responsive
==================================================*/

@media (max-width:1199px){

    .hero-banner{

        height:430px;

    }

    .hero-logo{

        width:320px;

    }

    .hero-title span,
    .hero-title strong{

        font-size:52px;

    }

}

@media (max-width:991px){

    .hero-banner{

        height:360px;

    }

    .hero-logo{

        width:240px;

    }

    .hero-title span,
    .hero-title strong{

        font-size:38px;

    }

}

@media (max-width:767px){

    .hero-banner{

        height:260px;

    }

    .hero-logo{

        width:170px;

        margin-bottom:15px;

    }

    .hero-title span,
    .hero-title strong{

        font-size:var(--fs-xl);

    }

}

/*==================================================
ExposureX Intro
==================================================*/

.exposurex-intro{

    background:#000;

    padding:70px 0;

}

/* Left Icon */

.exposurex-intro-icon{

    width:250px;

    max-width:100%;

}

/* Right Content */

.intro-content{

    position:relative;

    padding-left:35px;

}

.intro-content::before{

    content:"";

    position:absolute;

    left:0;

    top:0px;

    width:3px;

    height:110px;

    background:#00C083;

}

/* Logo */

.intro-logo{

    width:320px;

    margin-bottom:22px;

}

/* Description */

.intro-content p{

    color:#d7d7d7;

    font-size:var(--fs-lg);

    line-height:1.45;

    font-weight:300;

    margin:0;

    max-width:980px;

}


 
 
 /*==================================================
KEY CAPABILITIES
==================================================*/

.key-capabilities{

    position:relative;

    padding:100px 0;

    overflow:hidden;

    background:
        #050708
        url('/public/images/products/exposurex_key_capabilities_bg_2.jpg')
        center center
        no-repeat;

    background-size:cover;

}

.key-capabilities .container{

    position:relative;

    z-index:5;

}

/*======================================
Heading
======================================*/

.section-heading h2{

    font-size:58px;

    font-weight:normal;

    color:#fff;

    margin:0;

}

.section-heading span{

    color:#80ce0a;

}

/*======================================
Accordion
======================================*/

.capability-accordion{

    max-width:960px;

    margin:0 auto;

}

/*======================================
Item
======================================*/

.capability-item{

    position:relative;

    margin-bottom:16px;

    overflow:hidden;

    border-radius:18px;

    border:1px solid rgba(0,192,131,.35);

    background:

        radial-gradient(circle at right center,

            rgba(0,192,131,.15),

            transparent 55%

        ),

        linear-gradient(

            90deg,

            #06393d 0%,

            #0a4d4f 55%,

            #10916f 100%

        );

    transition:

        transform .35s,

        box-shadow .35s,

        border-color .35s;

}

.capability-item:hover{

    border-color:#80ce0a;

    transform:translateY(-4px);

    box-shadow:

        0 15px 45px rgba(0,192,131,.15);

}

/*======================================
Header
======================================*/

.capability-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 28px;

    cursor:pointer;

}

.left-area{

    display:flex;

    align-items:center;

    gap:28px;

}

.left-area .icon{

    width:72px;

    height:72px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.left-area .icon img{

    width:58px;

    transition:.35s;

}

.capability-item:hover .icon img{

    transform:scale(1.08);

}

.left-area h3{

    margin:0;

    font-size:28px;

      font-weight:normal;

    color:#00b689;

}

/*======================================
Plus Button
======================================*/

.toggle-btn{

    width:64px;

    height:64px;

    border-radius:50%;

    border:1px solid #80ce0a;

    background:transparent;

    position:relative;

    flex-shrink:0;

    transition:.35s;

}

.toggle-btn span{

    position:absolute;

    left:50%;

    top:50%;

    background:#80ce0a;

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

    transition:.3s;

}

.toggle-btn span:first-child{

    width:24px;

    height:2px;

}

.toggle-btn span:last-child{

    width:2px;

    height:24px;

}

.capability-item.active .toggle-btn{

    background:#80ce0a;

}

.capability-item.active .toggle-btn span{

    background:#05232d;

}

.capability-item.active .toggle-btn span:last-child{

    transform:translate(-50%,-50%) rotate(90deg);

    opacity:0;

}


/*======================================
Body
======================================*/

.capability-body{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s cubic-bezier(.4,0,.2,1);

}

.body-inner{

    padding:

        0

        28px

        28px

        128px;

}

.body-inner p{

    margin:0;

    max-width:720px;

    font-size:var(--fs-lg);

    line-height:1.65;

    color:#fff;

    font-weight:300;

}

/*======================================
Active Title
======================================*/

.capability-item.active h3{

    color:#fff;

}

/*======================================
Buttons
======================================*/

.capability-buttons{

    display:flex;

    justify-content:center;

    gap:24px;

    margin-top:55px;

}

/*======================================
Responsive
======================================*/

@media(max-width:991px){

    .section-heading h2{

        font-size:42px;

    }

    .left-area h3{

        font-size:22px;

    }

    .body-inner{

        padding:0 25px 25px 105px;

    }

}

@media(max-width:767px){

    .left-area{

        gap:18px;

    }

    .left-area .icon{

        width:54px;

        height:54px;

    }

    .left-area .icon img{

        width:42px;

    }

    .left-area h3{

        font-size:var(--fs-lg);

    }

    .toggle-btn{

        width:48px;

        height:48px;

    }

    .body-inner{

        padding:0 20px 20px 72px;

    }

    .body-inner p{

        font-size:var(--fs-base);

    }

}

/* video */

/*==================================================
ExposureX Demo Section
==================================================*/

.exposurex-demo{

    position:relative;

    background:#050708;

    padding:100px 0;

    overflow:hidden;

    /* Premium Top & Bottom Shadow */

    box-shadow: inset 0 90px 90px -70px rgb(84 84 84 / 95%), inset 0 -90px 90px -70px rgba(0, 0, 0, .95);

}

/*----------------------------------
Video Container
-----------------------------------*/

.video-container{

    width:min(1600px,100%);

    margin:0 auto;

    display:flex;

    justify-content:center;

    align-items:center;

}

/*----------------------------------
Iframe
-----------------------------------*/

.exposurex-iframe{

    display:block;

    width:100%;

    aspect-ratio:16/9;

    border:0;

    background:#000;

}

/*----------------------------------
Responsive
-----------------------------------*/

@media (max-width:991px){

    .exposurex-demo{

        padding:50px 0;

    }

}

@media (max-width:767px){

    .exposurex-demo{

        padding:35px 0;

    }

}