/*==================================================
CTEM HERO
==================================================*/

.ctem-hero{

    position:relative;

    background:#050708;

    overflow:hidden;

    padding:1px 0 1px;

}

.ctem-hero .container{

    position:relative;

    z-index:5;

}

.ctem-hero .row{

    min-height:560px;

}

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

.ctem-content{

    max-width:100%;

}

.ctem-logo{

    width:220px;

    margin-bottom:35px;

}

.ctem-title{

    margin:0;

    color:#ffffff;

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

    font-weight:normal;

    line-height:1.05;

}

.ctem-subtitle{

    margin-top:10px;

    color:#64d741;

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

    font-weight:normal;

    line-height:1.05;

}

/*=========================================
Wheel Stage
=========================================*/

.ctem-wheel{

    position:relative;

    width:400px;

    height:400px;

    margin:auto;

    max-width:100%;

    aspect-ratio:1;

}

/*=========================================
Flow Ring
=========================================*/

.ctem-wheel-ring{

    position:absolute;

    top:50%;

    left:50%;

    width:94%;

    height:94%;

    object-fit:contain;

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

    z-index:1;

    pointer-events:none;

}

/*=========================================
Segments
=========================================*/

.ctem-seg{

    position:absolute;

    width:57%;

    height:32.75%;

    padding:0;

    border:none;

    background:transparent;

    cursor:pointer;

    transform-origin:50% 160.4%;

    z-index:10;

}

.ctem-seg img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:contain;

    transition:.25s;

}

.ctem-seg .hover{

    opacity:0;

}

.ctem-seg:hover{

    z-index:20;

    filter:drop-shadow(0 0 20px rgba(0,192,131,.45));

}

.ctem-seg:hover .base{

    opacity:0;

}

.ctem-seg:hover .hover{

    opacity:1;

}

/*=========================================
Segment Positions
=========================================*/

.ctem-discovery{

    left:21.5%;

    top:-10.5%;

    transform:rotate(0deg);

}

.ctem-assessment{

    left:29.2%;

    top:-5.5%;

    transform:rotate(72deg);

}

.ctem-prioritization{

    left:26%;

    top:4%;

    transform:rotate(144deg);

}

.ctem-validation{

    left:16.5%;

    top:4%;

    transform:rotate(-144deg);

}

.ctem-remediation{

    left:13.5%;

    top:-4.5%;

    transform:rotate(-72deg);

}

/*=========================================
Center Hex
=========================================*/

.ctem-center{

    position:absolute;

    left:50%;

    top:50%;

    width:58%;

    height:64%;

    padding:0;

    border:none;

    background:none;

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

    z-index:30;

}

.ctem-center-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:contain;

}

.ctem-center-logo{

    position:absolute;

    left:50%;

    top:50%;

    width:48%;

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

}

/*=========================================
Hover
=========================================*/

.ctem-center:hover .ctem-center-logo{

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

}

/*==================================================
CTEM SAFE ANIMATIONS
==================================================*/

/* Wheel */

.ctem-wheel{

    animation:ctemWheelFade .8s ease;

}

/* Center Logo */

.ctem-center-logo{

    animation:ctemCenterPulse 4s ease-in-out infinite;

}

/* Hover */

.ctem-seg{

    transition:filter .35s ease;

}

/*==================================================*/

@keyframes ctemWheelFade{

    from{

        opacity:0;

        transform:scale(.92);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/*==================================================*/

@keyframes ctemRingRotate{

    from{

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

    }

    to{

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

    }

}

/*==================================================*/

@keyframes ctemCenterPulse{

    0%,100%{

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

    }

    50%{

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

    }

}



/*==================================================
CTEM About
==================================================*/

.ctem-about{

    position:relative;

    overflow:hidden;

    padding:120px 0;

    background:
        linear-gradient(
            180deg,
            #020c10 0%,
            #00322c 100%
        );

}

/*========================*/

.ctem-about-mesh-left{

    position:absolute;

    left:-140px;

    top:-40px;

    width:520px;

    opacity:.45;

    pointer-events:none;

}

.ctem-about-mesh-right{

    position:absolute;

    right:-120px;

    top:-20px;

    width:500px;

    opacity:.45;

    pointer-events:none;

}

/*========================*/

.ctem-about-content{

    position:relative;

    z-index:5;

}

.ctem-about-title{

    margin:0 0 45px;

    color:#ffffff;

    font-size:58px;

    line-height:1.2;

    font-weight:normal;

    letter-spacing:-2px;

}

.ctem-about-title span{

    color:#80ce0a;

}

/*========================*/

.ctem-about-content p{

    margin:0 0 28px;

    color:#02bc87;

    font-size:26px;

    line-height:1.45;

    font-weight:normal;

}

.ctem-about-content p:last-child{

    margin-bottom:0;

}

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

@media(max-width:1200px){

    .ctem-about-title{

        font-size:62px;

    }

    .ctem-about-content p{

        font-size:22px;

    }

}

@media(max-width:991px){

    .ctem-about{

        padding:90px 0;

    }

    .ctem-about-title{

        font-size:48px;

    }

    .ctem-about-content p{

        font-size:19px;

    }

}

@media(max-width:767px){

    .ctem-about{

        padding:70px 0;

    }

    .ctem-about-title{

        font-size:34px;

        line-height:1.15;

    }

    .ctem-about-content p{

        font-size:17px;

    }

    .ctem-about-mesh-left,

    .ctem-about-mesh-right{

        width:260px;

        opacity:.2;

    }

}

/*==================================================
CTEM About Animations
==================================================*/

/* Floating Mesh */

.ctem-about-mesh-left{

    animation:ctemMeshLeft 14s ease-in-out infinite;

}

.ctem-about-mesh-right{

    animation:ctemMeshRight 16s ease-in-out infinite;

}

/* Smooth Background */

.ctem-about{

    background-size:130% 130%;

    animation:ctemBgMove 18s ease-in-out infinite;

}

/*==================================================*/

@keyframes ctemMeshLeft{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(18px) rotate(-3deg);

    }

}

@keyframes ctemMeshRight{

    0%,100%{

        transform:translateY(0) rotate(0deg);

    }

    50%{

        transform:translateY(-18px) rotate(3deg);

    }

}

@keyframes ctemBgMove{

    0%,100%{

        background-position:center top;

    }

    50%{

        background-position:center bottom;

    }

}



/*==================================================
CTEM Threat Exposure Management
==================================================*/

.ctem-threat-section{

    position:relative;

    padding:110px 0;

    background:#050708;

    overflow:hidden;

}

.ctem-threat-heading{

    text-align:center;

    margin-bottom:0px;

}

.ctem-threat-heading h2{

    margin:0;

    color:#ffffff;

    font-family:'Poppins',sans-serif;

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

    font-weight:normal;

    line-height:1.1;

}

.ctem-threat-heading span{

    color:#80ce0a;

}

.ctem-threat-diagram{

    position:relative;

    max-width:1350px;

    margin:auto;

}

.ctem-threat-svg{

    display:block;

    width:100%;

    height:auto;

    transition:transform .45s ease;

    filter:

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

}

.ctem-threat-diagram:hover .ctem-threat-svg{

    transform:translateY(-6px);

}

/*========================*/

@media(max-width:1200px){

    .ctem-threat-heading h2{

        font-size:54px;

    }

}

@media(max-width:991px){

    .ctem-threat-section{

        padding:90px 0;

    }

    .ctem-threat-heading{

        margin-bottom:50px;

    }

    .ctem-threat-heading h2{

        font-size:42px;

    }

}

@media(max-width:767px){

    .ctem-threat-section{

        padding:70px 0;

    }

    .ctem-threat-heading h2{

        font-size:32px;

    }

}



/*==================================================
CTEM MANAGEMENT
==================================================*/

.ctem-management{

    position:relative;

    padding:120px 0;

    background:#080e17;

    overflow:hidden;

    box-shadow:

        inset 0 220px 180px -120px rgba(0,185,165,.32),

        inset 0 120px 80px -60px rgba(0,255,220,.10),

        inset 0 -220px 180px -120px rgba(0,185,165,.32),

        inset 0 -120px 80px -60px rgba(0,255,220,.10);

}

.ctem-management .container{

    position:relative;

    z-index:5;

}

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

.ctem-management-heading{

    margin-bottom:80px;

}

.ctem-management-heading h2{

    margin:0;

    font-family:'Poppins',sans-serif;

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

    font-weight:normal;

    color:#ffffff;

    line-height:1.1;

}

.ctem-management-heading span{

    color:#80ce0a;

}

/*=====================================
LEFT SIDE
=====================================*/

.ctem-management-left{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:620px;

}

/* Mesh */

.ctem-management-mesh{

    position:absolute;

    width:640px;

    max-width:120%;

    animation:ctemMeshFloat 10s ease-in-out infinite;

    opacity:.9;

}

/* Hex */

.ctem-management-center{

    position:relative;

    width:430px;

    z-index:5;

    filter:drop-shadow(0 25px 60px rgba(0,0,0,.45));

    animation:ctemScalePulse 5s ease-in-out infinite;

}

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

.ctem-management-accordion{

    display:flex;

    flex-direction:column;

    gap:14px;

}

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

.ctem-management-item{

    border-radius:16px;

    overflow:hidden;

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

    background:

        linear-gradient(

            90deg,

            rgba(5,62,58,.95) 0%,

            rgba(10,92,82,.95) 50%,

            rgba(13,145,111,.95) 100%

        );

    backdrop-filter:blur(14px);

    transition:.35s;

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.04);

}

.ctem-management-item:hover{

    transform:translateY(-5px);

    border-color:#80ce0a;

    box-shadow:

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

        0 0 35px rgba(128,206,10,.12);

}

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

.ctem-management-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 28px;

    cursor:pointer;

}

.ctem-management-info{

    display:flex;

    align-items:center;

    gap:22px;

}

.ctem-management-info img{

    width:52px;

    transition:.35s;

}

.ctem-management-item:hover .ctem-management-info img{

    transform:scale(1.08);

}

.ctem-management-info h3{

    margin:0;

    font-family:'Poppins',sans-serif;

    font-size:26px;

    font-weight:normal;

    color:#00b58b;

    transition:.3s;

}

.ctem-management-item.active h3{

    color:#ffffff;

}

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

.ctem-management-toggle{

    width:58px;

    height:58px;

    border-radius:50%;

    border:1px solid #80ce0a;

    background:transparent;

    position:relative;

    flex-shrink:0;

    transition:.35s;

}

.ctem-management-toggle span{

    position:absolute;

    left:50%;

    top:50%;

    background:#80ce0a;

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

    transition:.3s;

}

.ctem-management-toggle span:first-child{

    width:22px;

    height:2px;

}

.ctem-management-toggle span:last-child{

    width:2px;

    height:22px;

}

.ctem-management-item.active .ctem-management-toggle{

    background:#80ce0a;

}

.ctem-management-item.active .ctem-management-toggle span{

    background:#063531;

}

.ctem-management-item.active .ctem-management-toggle span:last-child{

    opacity:0;

}

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

.ctem-management-body{

    max-height:0;

    overflow:hidden;

    transition:max-height .45s ease;

}

.ctem-management-item.active .ctem-management-body{

    max-height:260px;

}

.ctem-management-body p{

    margin:0;

    padding:0 28px 28px 102px;

    color:#ffffff;

    font-family:'Poppins',sans-serif;

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

    font-weight:normal;

    line-height:1.55;

    max-width:760px;

}

/*=====================================
Glow
=====================================*/

.ctem-management-item::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            110deg,

            transparent 30%,

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

            transparent 70%

        );

    transform:translateX(-140%);

    transition:1s;

}

.ctem-management-item:hover::before{

    transform:translateX(140%);

}

/*=====================================
Animations
=====================================*/

@keyframes ctemMeshFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

@keyframes ctemScalePulse{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

}

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

@media(max-width:1199px){

    .ctem-management-heading h2{

        font-size:54px;

    }

    .ctem-management-center{

        width:360px;

    }

}

@media(max-width:991px){

    .ctem-management{

        padding:90px 0;

    }

    .ctem-management-left{

        min-height:420px;

        margin-bottom:50px;

    }

    .ctem-management-heading{

        margin-bottom:50px;

    }

    .ctem-management-heading h2{

        font-size:42px;

    }

}

@media(max-width:767px){

    .ctem-management{

        padding:70px 0;

    }

    .ctem-management-heading h2{

        font-size:34px;

    }

    .ctem-management-info{

        gap:15px;

    }

    .ctem-management-info img{

        width:38px;

    }

    .ctem-management-info h3{

        font-size:22px;

    }

    .ctem-management-body p{

        padding:0 20px 20px 72px;

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

    }

    .ctem-management-toggle{

        width:46px;

        height:46px;

    }

}