/*==================================================
GLOBAL AMBIENT LIGHT
==================================================*/

 

.section-light{

    position:absolute;

    /* left:-320px; */

    top:50%;

    transform:translateY(-50%);

    width:850px;

    height:850px;

    border-radius:50%;

    pointer-events:none;

    z-index:1;

    background:

        radial-gradient(
            circle,
            rgba(5,35,45,.98) 0%,
            rgba(5,35,45,.90) 18%,
            rgba(5,35,45,.72) 38%,
            rgba(5,35,45,.38) 58%,
            transparent 82%
        ),

        radial-gradient(
            circle,
            rgba(0,192,131,.08) 0%,
            rgba(0,192,131,.04) 40%,
            transparent 70%
        );

    filter:blur(60px);

}


/*==================================================
COMMON MODAL
==================================================*/

.modal-securx .modal-content{

    background:
        rgba(7,12,16,.92);

    border:

        1px solid
        rgba(0,192,131,.25);

    border-radius:28px;

    backdrop-filter:blur(30px);

    overflow:hidden;
}

.modal-securx .modal-body{

    padding:50px;
}

.modal-securx .btn-close{

    position:absolute;

    top:25px;

    right:25px;

    z-index:20;
}

/*==================================================
TITLE
==================================================*/

.popup-title{

    margin-bottom:35px;
}

.popup-title span{

    color:#00c083;

    font-size:13px;

    letter-spacing:3px;
}

.popup-title h2{

    color:#fff;

    font-size:34px;

    margin-top:12px;
}

/*==================================================
FORM
==================================================*/

  .demo-modal .modal-content{

    border:none;

    border-radius:32px;

    overflow:hidden;

    box-shadow:

        0 40px 120px
        rgba(0,0,0,.25);
}

.demo-top{

    text-align:center;

    margin-bottom:35px;
}

.demo-badge{

    display:inline-flex;

    padding:8px 18px;

    border-radius:30px;

    background:

        rgba(0,192,131,.08);

    color:#00c083;

    font-size:12px;

    letter-spacing:2px;

    font-weight:600;
}

.demo-top h2{

    font-size:34px;

    font-weight:700;

    margin-top:20px;

    margin-bottom:10px;
}

.demo-top p{

    color:#7a7a7a;

    max-width:500px;

    margin:auto;
}

.floating-field{

    position:relative;

    margin-bottom:20px;
}

.floating-field label{

    position:absolute;

    left:20px;

    top:18px;

    color:#7f7f7f;

    transition:.3s;

    pointer-events:none;

    background:#fff;

    padding:0 8px;
}

.floating-field .form-control,
.floating-field .form-select{

    height:58px;

    border-radius:16px;

    border:1px solid #dcdcdc;

    padding:20px;
}

.floating-field textarea{

    height:120px !important;
}

.floating-field
.form-control:focus,
.floating-field
.form-select:focus{

    border-color:#00c083;

    box-shadow:

        0 0 0 5px
        rgba(0,192,131,.08);
}

.floating-field
.form-control:focus+label,

.floating-field
.form-control:not(:placeholder-shown)+label,

.floating-field
.form-select:focus+label{

    top:-10px;

    font-size:12px;

    color:#00c083;
}
/*==================================================
BUTTON
==================================================*/

.btn-submit{

    width:100%;

    height:58px;

    border:none;

    border-radius:16px;

    font-size:18px;

    font-weight:600;

    background:

        linear-gradient(
            90deg,
            #00c083,
            #80ce0a
        );

    transition:.4s;
}

.btn-submit:hover{

    transform:
        translateY(-3px);

    box-shadow:

        0 15px 35px
        rgba(0,192,131,.25);
}
/*==================================================
PDF
==================================================*/

.pdf-footer{

    padding:25px;

    text-align:center;

    background:#050708;
}

.btn-download{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:230px;

    height:55px;

    border-radius:16px;

    background:
        linear-gradient(
            90deg,
            #00c083,
            #80ce0a
        );

    color:#fff;

    text-decoration:none;
}



/*==================================================
COMMON MESH
==================================================*/

.mesh{

    position:absolute;

    z-index:1;

    pointer-events:none;

    opacity:1;

    will-change:transform;

    
   
}

.mesh img{

    width:100%;

    display:block;

    animation:
        meshFloat 12s
        ease-in-out
        infinite;
}

/*==================================================
POSITIONS
==================================================*/

.mesh-left{

    left:-100px;
}

.mesh-right{

    right:-100px;
}

.mesh-top{

    top:120px;
}

.mesh-middle{

    top:60%;
}

.mesh-bottom{

    top:150%;
}

.mesh-down{

    top:200%;
}

/*==================================================
SIZES
==================================================*/

.mesh-sm{

    width:450px;
}

.mesh-md{

    width:650px;
}

.mesh-lg{

    width:850px;
}

.mesh-xl{

    width:1100px;
}

/*==================================================
COLORS
==================================================*/

.mesh-green{

    filter:
        hue-rotate(0deg)
        brightness(1)
        saturate(1.3);
}

.mesh-cyan{

    filter:
        hue-rotate(45deg)
        brightness(1)
        saturate(1.4);
}

.mesh-blue{

    filter:
        hue-rotate(90deg)
        brightness(.95)
        saturate(1.4);
}

.mesh-lime{

    filter:
        hue-rotate(-30deg)
        brightness(1.1)
        saturate(1.5);
}

.mesh-orange{

    filter:
        hue-rotate(170deg)
        brightness(1)
        saturate(1.3);
}

.mesh-dark{

    filter:
        brightness(.55)
        saturate(.8);
}

/*==================================================
OPACITY
==================================================*/

.mesh-light{

    opacity:.05;
}

.mesh-normal{

    opacity:.10;
}

.mesh-strong{

    opacity:.18;
}

/*==================================================
FLOATING
==================================================*/

@keyframes meshFloat{

    0%{

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

    50%{

        transform:
            translateY(-35px)
            rotate(6deg);
    }

    100%{

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

/* .ctem-hero{

    position:relative;

    min-height:900px;
} */