/*==================================================
CTEM SECTION
==================================================*/

.ctem-section{

    position:relative;

    padding:100px 0;

    overflow:hidden;

    background:#050708;

}

.ctem-section::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            rgba(255,255,255,.015),

            transparent 40%,

            transparent 60%,

            rgba(255,255,255,.015)

        );

    pointer-events:none;

    z-index:2;

}

/*==================================================
RIGHT AMBIENT LIGHT
==================================================*/

/*==================================================
CTEM AMBIENT LIGHT
==================================================*/

.ctem-light{
    right:-300px;
}

/*==================================================
LEFT MESH
==================================================*/

.ctem-mesh{

    position:absolute;

    left:-80px;

    top:50%;

    transform:translateY(-50%);

    width:30%;

    opacity:1;

    z-index:1;

    pointer-events:none;

}

.ctem-mesh img{

    width:100%;

    display:block;

    filter:drop-shadow(0 0 40px rgba(0,192,131,.18));

}

/*==================================================
CONTAINER
==================================================*/

.ctem-section .container{

    position:relative;

    z-index:5;

}

/*==================================================
HEADING
==================================================*/

.section-subtitle{

    display:block;

    color:#ffffff;

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

    font-weight:normal;

    margin-bottom:18px;

}

.section-heading h2{

    color:#fff;

    font-size:62px;

    font-weight:normal;

    margin:0;

}

.section-heading h2 span{

    color:#64d741;

    font-weight:normal;

}

/*==================================================
VIDEO
==================================================*/
 

.ctem-video{

    position:relative;

    width:100%;

    height:500px;

    overflow:hidden;

    border-radius:30px;
}



.video-bg{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:inherit;
}

.video-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.15),
            rgba(0,0,0,.45)
        );

    z-index:2;
}

.play-wrapper{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:3;
}


/*==================================================
RIGHT SIDE
==================================================*/

.ctem-cards{

    display:flex;

    flex-direction:column;

    gap:14px;

}

/*==================================================
CARD
==================================================*/

.ctem-card{

    background:linear-gradient(
        90deg,
        rgba(0,192,131,.08),
        rgba(20,40,46,.92));

    border-radius:22px;

    overflow:hidden;

    cursor:pointer;

    transition:.35s;

    /* border:1px solid rgba(255,255,255,.04); */
    padding-top: 20px;
    padding-bottom: 20px;
}

.ctem-card.active{

    background:

    linear-gradient(

        90deg,

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

        rgba(10,54,63,.96)

    );

}

/*==================================================
HEADER
==================================================*/

.ctem-card-head{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:70px;

    padding:0px 24px;

}

.ctem-card-head h3{

    color:#04a8a3;

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

    font-weight:normal;

    line-height:1.2;

    margin:0;

    max-width:100%;

}

.ctem-card.active .ctem-card-head h3{ 
    color:#fff;
}

.card-icon{

    width:70px;

    height:70px;

}

.card-icon img{

    width:100%;

}

.card-icon-2 img{

    width:80%;

}

/*==================================================
CONTENT
==================================================*/

.ctem-card-content{

    overflow:hidden;

    height:0;

    opacity:0;

    padding:0 24px;

}

.ctem-card-content p{

    font-family:var(--font-secondary);

    color:#ffffff;

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

    line-height:1.45;

    margin:0;

    padding-bottom:20px;

    max-width:70%;

}

/*==================================================
HOVER
==================================================*/

.ctem-card:hover{

    transform:translateY(-4px);

}

.ctem-card:hover .card-icon{

    transform:rotate(-8deg);

    transition:.35s;

}

/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:1199px){

.section-heading h2{

    font-size:54px;

}

.play-wrapper{

    width:150px;
    height:150px;

}

}

@media(max-width:991px){

.ctem-section{

    padding:90px 0;

}

.ctem-video{

    height:320px;

    margin-bottom:45px;

}

.ctem-card-content p{

    max-width:100%;

}

.section-heading h2{

    font-size:42px;

}

.section-subtitle{

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

}

.ctem-card-head h3{

    font-size:24px;

}

}

@media(max-width:576px){

.ctem-video{

    height:220px;

}

.section-heading h2{

    font-size:34px;

}

.section-subtitle{

    font-size:17px;

}

.play-wrapper{

    width:120px;

    height:120px;

}

.ctem-card-head{

    padding:22px;

}

.ctem-card-content{

    padding:0 22px;

}

}

.play-text{

    position:absolute;

    bottom:32px;

    left:50%;

    transform:translateX(-50%);

    color:#83e600;

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

    font-weight:500;

}