/*==================================================
PenX Hero
==================================================*/

.penx-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:80%;

}

.hero-logo{

    width:240px;

    max-width:100%;

    margin-bottom:25px;

}

.hero-title{

    margin:0;

    line-height:1.05;

    font-weight:normal;

    letter-spacing:-1px;
    
    font-size: 54px;

}

.hero-title span{

    display:block;

    color:#822c28;

    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);

    }

}

/*==================================================
penx Intro
==================================================*/

.penx-intro{

    background:#000;

    padding:30px 0;

}

/* Left Icon */

.penx-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:95%;

    background:#822c28;

}

/* Logo */

.intro-logo{

    width:250px;

    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 capblity */

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

.key-capabilities{

    padding:90px 0 100px;

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

    background-size:cover;

    position:relative;

}

.key-capabilities::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(5,7,8,.15);

}

/*--------------------------------*/

.key-capabilities .container{

    position:relative;

    z-index:2;

}

/*--------------------------------*/

.section-heading h2{

    font-size:52px;

    font-weight:normal;

    color:#fff;

    margin:0;

}

.section-heading span{

    color:#822c28;

}

/*--------------------------------*/

 
/*==================================================
Premium Capability Card
==================================================*/

.capability-card{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:100px;

    padding:18px 25px;

    border-radius:18px;

    overflow:hidden;

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

    backdrop-filter:blur(12px);

    transition:.45s ease;

    isolation:isolate;

    background:
        radial-gradient(circle at right center,
        rgba(130,44,40,.28) 0%,
        rgba(130,44,40,0) 35%
        ),
        linear-gradient(
            90deg,
            #202122 0%,
            #40302d 55%,
            #822c28 100%)

}

/* Reverse */

.col-lg-6:nth-child(even) .capability-card{

   background:
        radial-gradient(circle at right center,
        rgba(130,44,40,.28) 0%,
        rgba(130,44,40,0) 35%
        ),
        linear-gradient(
            90deg,
            #202122 0%,
            #40302d 55%,
            #822c28 100%)

}

/* Glass Overlay */

.capability-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.08),

            transparent 40%

        );

    pointer-events:none;

}

/* Shine */

.capability-card::before{

    content:"";

    position:absolute;

    left:-130%;

    top:0;

    width:55%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );

    transition:1s;

}

.capability-card:hover::before{

    left:150%;

}

/* Hover */

.capability-card:hover{

    transform:translateY(-6px);

    border-color:rgba(130,44,40,.45);

    box-shadow:

        0 18px 40px rgba(0,0,0,.35),

        0 0 35px rgba(130,44,40,.20);

}

/*=========================
Content
==========================*/

.card-content{

    z-index:2;

}

.card-content h3{

    margin:0;

    color:#fff;

    font-size:2rem;

    font-weight:400;

}

.card-content span{

    display:block;

    margin-top:6px;

    font-size:1.2rem;

    color:#aa7959;

}

/*=========================
Icon
==========================*/

.card-icon{

    position:relative;

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    z-index:2;

}

/* Glow */

.card-icon::before{

    content:"";

    position:absolute;

    width:180px;

    border-radius:50%;

    background:

        radial-gradient(

            rgba(130,44,40,.25),

            transparent 70%

        );

    filter:blur(10px);

}

/* Icon */

.card-icon img{

    position:relative;

    width:100%;

    transition:.35s;

}

.capability-card:hover .card-icon img{

    transform:scale(1.08);

}

/* video */

/*==================================================
PenX Demo Section
==================================================*/

.penx-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
-----------------------------------*/

.penx-iframe{

    display:block;

    width:100%;

    aspect-ratio:16/9;

    border:0;

    background:#000;

}

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

@media (max-width:991px){

    .penx-demo{

        padding:50px 0;

    }

}

@media (max-width:767px){

    .penx-demo{

        padding:35px 0;

    }

}