/*==================================================
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;

    height:580px;

    border-radius:28px;

    overflow:hidden;

    box-shadow:0 25px 70px rgba(0,0,0,.45);

    z-index:10;
}

.video-image{

    width:100%;

    height:100%;

    object-fit:cover;

}

.ctem-video:hover .video-image{

    transform:scale(1.08);

}

.video-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(0,0,0,.15),
        rgba(0,0,0,.55));

}

/*==================================================
PLAY BUTTON
==================================================*/

.play-wrapper{

    position:absolute;

    left:50%;

    top:50%;

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

    width:170px;

    height:170px;

}

.play-button{

    position:absolute;

    left:50%;

    top:50%;

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

    width:92px;

    height:92px;

    border-radius:50%;

    background:#050505;

    border:none;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:20;

}

.play-button svg{

    width:34px;

    height:34px;

}

 

/*==================================================
RINGS
==================================================*/

.ring{

    position:absolute;

    border-radius:50%;

    border:3px solid #80ce0a;

}

.ring1{

    inset:0;

    border:5px solid #83e600;

    box-shadow:

        0 0 12px #83e600,

        0 0 30px #83e600,

        0 0 60px rgba(131,230,0,.7);

}

.ring2{

    inset:18px;

    border:2px solid rgba(131,230,0,.35);

}

.ring3{

    inset:34px;

    border:2px solid rgba(131,230,0,.18);

}

/*==================================================
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);

}

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

    min-height:130px;

    padding:16px 24px;

}

.ctem-card-head h3{

    color:#fff;

    font-size:32px;

    font-weight:normal;

    line-height:1.2;

    letter-spacing:-0.5px;

    margin:0;

    max-width:100%;

}

.card-icon{

    width:70px;

    height:70px;

}

.card-icon img{

    width:100%;

}

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

.ctem-card-content{

    overflow:hidden;

    height:0;

    opacity:0;

    padding:0 34px;

}

.ctem-card-content p{

    color:#cfd8dc;

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

    line-height:1.2;

    margin:0;

    padding-bottom:30px;

    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;

}