/*==================================================
COMMON VIDEO HEADER
==================================================*/

.securex-video-header{

    position:relative;

    background:#050708;

    overflow:hidden;

}

.securex-video-banner{

    position:relative;

    min-height:520px;

    overflow:hidden;

}

.header-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.mobile-video{

    display:none;

}

.securex-video-overlay{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.65) 0%,
        rgba(0,0,0,.30) 45%,
        rgba(0,0,0,.10) 100%
    );

}

.securex-video-content{

    max-width:760px;

}

.securex-video-content span{

    margin: 0;
    color: #64d741;
    font-size: var(--fs-5xl);
    font-weight: normal;
    line-height: 1.05;
 
}

.securex-video-content h1{

     color: #ffffff;
    font-size: var(--fs-5xl);
    font-weight: normal;
    line-height: 1.05;

}

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

.securex-mobile-content{

    display:none;

    background:#000000;

    padding:25px 0px 25px;

    text-align:left;

}

.securex-mobile-content span{

    display:block;

    color:var(--primary);

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

    margin-bottom:10px;
    line-height:1.4;
}

.securex-mobile-content h1{

    color:#fff;

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

    line-height:1.4;

    font-weight:normal;
    margin:0;

}

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

@media (max-width:991px){

    .desktop-video{

        display:none;

    }

    .mobile-video{

        display:block;

        position:relative;

        width:100%;

        height:auto;

        object-fit:contain;

    }

    .securex-video-banner{

        min-height:auto;

        height:auto !important;

    }

    .securex-video-overlay{

        display:none;

    }

    .securex-mobile-content{

        display:block;

    }

}
 

.securex-video-content{

    max-width:760px;

}

.securex-video-content p{

    max-width:820px;

    margin:35px 0;

    color:#fff;

    font-size:24px;

    line-height:1.7;

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

    font-weight:300;

    opacity:.95;

}

.securex-mobile-content p{

    margin:25px auto 35px;

    color:#fff;

    font-size:18px;

    line-height:1.7;

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

    font-weight:300;

    max-width:800px;

}

.securex-mobile-content .btn-demo{

    margin:auto;

}

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

    top:18px;

    color:#7f7f7f;

    transition:.3s;

    pointer-events:none;

    background:#fff;

    padding:0 8px;

    border-radius: 18px;
}

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

.demo-modal .modal-dialog{

    max-width:760px;

}

.demo-modal .modal-body{

    padding:50px;

}

.demo-close{

    position:absolute;

    right:24px;

    top:24px;

    z-index:20;

    opacity:.6;

}

.demo-close:hover{

    opacity:1;

}

.floating-field{

    position:relative;

}

.floating-field i{

    position:absolute;

    left:20px;

    top:20px;

    color:#9a9a9a;

    font-size:16px;

    z-index:2;

}

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

    padding-left:52px;

    height:60px;

    border-radius:18px;

    border:1px solid #e3e3e3;

    background:#fafafa;

}

.floating-field textarea{

    height:140px !important;

    padding-top:18px;

}

.demo-note{

    margin-top:22px;

    text-align:center;

    font-size:14px;

    color:#888;

}

.demo-note i{

    color:#00c083;

    margin-right:8px;

}

.btn-submit{

    height:60px;

    border-radius:18px;

    font-size:18px;

    letter-spacing:.4px;

}


/*==================================================
REQUEST DEMO RESPONSIVE
==================================================*/

@media (max-width:991px){

    .demo-modal .modal-dialog{

        max-width:95%;
        margin:1rem auto;

    }

    .demo-modal .modal-body{

        padding:40px 30px;

    }

    .demo-top{

        margin-bottom:28px;

    }

    .demo-top h2{

        font-size:30px;
        line-height:1.2;

    }

    .demo-top p{

        max-width:100%;
        font-size:16px;
        line-height:1.7;

    }

}


/*==================================================
TABLET
==================================================*/

@media (max-width:767px){

    .demo-modal .modal-dialog{

        max-width:100%;
        margin:.75rem;

    }

    .demo-modal .modal-content{

        border-radius:24px;

    }

    .demo-modal .modal-body{

        padding:30px 22px;

    }

    .demo-modal .floating-field {
        margin-bottom: 0px;
    }

    .demo-close{

        right:18px;
        top:18px;

        transform:scale(.9);

    }

    .demo-top{

        margin-bottom:24px;

    }

    .demo-top h2{

        font-size:26px;

        margin-top:10px;

        margin-bottom:12px;

    }

    .demo-top p{

        font-size:15px;

        line-height:1.6;

    }

    .floating-field{

        margin-bottom:16px;

    }

    .floating-field i{

        left:16px;
        top:18px;

        font-size:15px;

    }

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

        height:54px;

        padding-left:46px;

        border-radius:14px;

        font-size:15px;

    }

    .floating-field textarea{

        height:120px !important;

        padding-top:16px;

    }

    .floating-field label{

        left:32px;

        top:16px;

        font-size:15px;

    }

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

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

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

        top:-9px;

        font-size:12px;

    }

    .btn-submit{

        height:54px;

        font-size:16px;

        border-radius:14px;

    }

    .demo-note{

        font-size:13px;

        line-height:1.6;

        margin-top:18px;

    }

}

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

.mesh {
    display: block;
}
@media (max-width:991px){

    .mesh{
        display:none;
    }

}



/* datasheep popup */

/*==================================================
DATASHEET MODAL
==================================================*/

.datasheet-modal{

    background:#07161d;

    border:none;

    border-radius:30px;

    overflow:hidden;

    box-shadow:
        0 40px 120px rgba(0,0,0,.55);

}

.datasheet-modal .modal-body{

    position:relative;

    overflow:hidden;

}

.datasheet-modal .btn-close{

    position:absolute;

    right:25px;

    top:25px;

    z-index:50;

    filter:invert(1);

}

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

.datasheet-left{

    height:100%;

    padding:70px 55px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    background:
        linear-gradient(
            180deg,
            #05232d,
            #0b1117
        );

    position:relative;

}

.datasheet-left::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        radial-gradient(

            circle at top left,

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

            transparent 55%

        );

}

.datasheet-left>*{

    position:relative;

    z-index:2;

}

.datasheet-left h2{

    color:#fff;

    font-size:3rem;

    line-height:1.1;

    font-weight:300;

    margin-bottom:30px;

}

.datasheet-left h2 span{

    display:block;

    color:#80ce0a;

}

.datasheet-left p{

    color:rgba(255,255,255,.75);

    line-height:1.8;

    margin-bottom:35px;

}

.datasheet-left ul{

    margin:0;

    padding:0;

    list-style:none;

}

.datasheet-left li{

    color:#fff;

    margin-bottom:18px;

    padding-left:30px;

    position:relative;

}

.datasheet-left li::before{

    content:"";

    width:9px;

    height:9px;

    border-radius:50%;

    background:#00C083;

    position:absolute;

    left:0;

    top:8px;

}

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

.datasheet-form{

    padding:60px;

    background:#08151c;

}

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

.datasheet-form .form-control{

    height:58px;

    border-radius:14px;

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

    background:rgba(255,255,255,.03);

    color:#fff;

    padding:0 20px;

    transition:.35s;

}

.datasheet-form textarea.form-control{

    min-height:130px;

    padding-top:18px;

}

.datasheet-form .form-control::placeholder{

    color:rgba(255,255,255,.35);

}

.datasheet-form .form-control:focus{

    background:rgba(255,255,255,.05);

    border-color:#00C083;

    box-shadow:

        0 0 25px rgba(0,192,131,.15);

    color:#fff;

}

/*==================================================
PRIVACY
==================================================*/

.privacy-note{

    font-size:.85rem;

    color:rgba(255,255,255,.45);

    line-height:1.7;

    margin:5px 0 30px;

}

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

.datasheet-submit{

    width:100%;

    height:58px;

    border:none;

    border-radius:100px;

    font-weight:600;

    color:#fff;

    background:

        linear-gradient(

            90deg,

            #00C083,

            #80ce0a

        );

    transition:.35s;

}

.datasheet-submit:hover{

    transform:translateY(-3px);

    box-shadow:

        0 12px 35px rgba(0,192,131,.28);

}

/*==================================================
MODAL BACKDROP
==================================================*/

.modal-backdrop.show{

    opacity:.82;

    backdrop-filter:blur(6px);

}

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

@media(max-width:991px){

    .datasheet-left{

        padding:45px 35px;

        text-align:center;

    }

    .datasheet-left ul{

        display:inline-block;

        text-align:left;

    }

    .datasheet-form{

        padding:40px 35px;

    }

}

@media(max-width:767px){

    .datasheet-left{

        padding:35px 25px;

    }

    .datasheet-left h2{

        font-size:2.2rem;

    }

    .datasheet-form{

        padding:30px 20px;

    }

    .datasheet-submit{

        width:100%;

    }

}



/*==================================================
WEBSITE SIDE GRADIENT
==================================================*/
 .website-side-gradient{

    position:fixed;

    top:0;
    bottom:0;

    width:35%;

    z-index:9999;

    pointer-events:none;   /* Allows clicks to pass through */

    user-select:none;

    background-image:url('/public/images/website-side-gradiant.svg');
    background-repeat:repeat-y;
    background-size:100% auto;
    background-position:top center;

}

.website-side-gradient-left{

    left:0;

}

.website-side-gradient-right{

    right:0;

    transform:scaleX(-1);

}