/* prettier-ignore */
/*-----------------------------------------------
|   Navigation 
------------------------------------------------*/
/*-----------------------------------------------
|   Navbar Brand 
------------------------------------------------*/
/*# sourceMappingURL=user.css.map */
/* ===============================
   CELERIX Button
================================== */

.btn-celerix{
    display:inline-flex;
    align-items:center;
    gap:12px;

    padding:16px 38px;

    background:#32327f;
    color:#ffffff !important;

    border:2px solid #32327f;
    border-radius:50px;

    font-family:'Rubik-SemiBold';
    font-size:15px;
    letter-spacing:.08em;
    text-transform:uppercase;

    text-decoration:none;

    transition:all .35s ease;
}

.btn-celerix span{
    transition:.35s;
}

.btn-celerix:hover{
    background:#4545a5;
    border-color:#4545a5;
    color:#fff !important;
    text-decoration:none;
    transform:translateY(-3px);
    box-shadow:0 18px 40px rgba(50,50,127,.30);
}

.btn-celerix:hover span{
    transform:translateX(6px);
}

/* ===============================
   HERO VIDEO
================================= */

#myVideo{
    display:block;
    width:100%;
    height:calc(100vh - 76px); /* Navbar 高度 */

    object-fit:cover;
    object-position:center center;

    background:#000;
}

@media (max-width:991px){

    #myVideo{

        height:55vh;

        object-fit:cover;
        object-position:center center;

    }

}
/* ==========================================
   Technology Expertise
========================================== */

.bg-holder{
    z-index:0;
}

section.position-relative > .container{
    position:relative;
    z-index:2;
}

@media (max-width:991px){
    .bg-holder{
        background-position:center center !important;
    }
    .border-lg-start{
        border-left:none !important;
        padding-left:0 !important;
    }
    .Rubik-Regular h1{
        font-size:24px !important;
    }
    .Rubik-Regular h3{
        font-size:20px !important;
    }

}
/* =========================================
   OUR CULTURE
========================================= */

.culture-section{
    position:relative;
    min-height:760px;
    background:url("../img/Celerix Website Banners-05.jpg") no-repeat center center;
    background-size:cover;
    overflow:hidden;
}

.culture-overlay{
    width:100%;
    height:760px;
    display:flex;
    align-items:center;
}

.culture-content{
    width:470px;
    margin-left:45px;
}

.culture-title{
    font-family:'Montserrat-Thinc';
    font-size:22px;
    letter-spacing:8px;
    color:#74748a;
    margin-bottom:38px;
}

.culture-heading{
    font-family:'Rubik-SemiBold';
    font-size:30px;
    line-height:1.25;
    color:#32327f;
    margin-bottom:38px;
}

.culture-desc{
    font-size:22px;
    line-height:2;
    color:#32327f;
    margin-bottom:60px;
}

.culture-believe{
    margin-left:80px;
}

.belief-list{
    border-left:5px solid #9ED532;
    padding-left:28px;
    margin-top:28px;
}

.belief-list h4{
    font-family:'Rubik-SemiBold';
    font-size:22px;
    color:#32327f;
    margin-bottom:16px;
}

/* =============================
   MOBILE
============================= */

@media(max-width:991px){
.culture-section{
    min-height:auto;
    background-position:72% center;
}

.culture-overlay{
    height:auto;
    padding:80px 0;
    background:rgba(255,255,255,.90);
}

.culture-content{
    width:auto;
    margin:0 20px;
}

.culture-heading{
    font-size:24px;
}

.culture-title{
    letter-spacing:5px;
    font-size:18px;
}

.culture-desc{
    font-size:17px;
    line-height:1.8;
}

.culture-believe{
    margin-left:0;
}

.belief-list h4{
    font-size:20px;
}
}

/* ===========================================
   CAREER
=========================================== */

.career-section{
    min-height:720px;
    display:flex;
    align-items:center;
}

.career-content{
    padding:80px 0;
	color:#32327f;
    max-width:560px;
}

.career-title{
    font-family:'Rubik-SemiBold';
    color:#32327f;
    font-size:42px;
    margin-bottom:25px;
}

.career-subtitle{
    font-family:'Rubik-SemiBold';
    color:#32327f;
    font-size:30px;
    line-height:1.2;
    margin-bottom:25px;
}

.career-content .lead{
    color:#32327f;
    line-height:1.8;
}

/* phone */

@media (max-width:991px){
    .career-section{
        min-height:auto;
    }

    .career-content{
        padding:60px 25px;
        max-width:100%;
    }
    .career-title{
        font-size:26px!important;
    }

    .career-subtitle{
        font-size:22px;
    }

    .career-content .lead{
        font-size:18px;
        line-height:1.7;
    }
    .career-content .btn{
        width:100%;
        padding:18px;
    }
}

/* ===========================
   WHY US
=========================== */
.why-us-img{
    width:100%;
    height:720px;
    object-fit:cover;
    margin-right:-180px;
    position:relative;
    z-index:2;
}

.why-us-box{
    background:#fff;
    padding:90px 70px;
    margin-left:-120px;
    position:relative;
    z-index:2;
}

.why-us-box h1{
    color:#32327f;
    font-size:42px;
    font-family:'Rubik-SemiBold';
    margin-bottom:30px;
}

.why-us-box h3{
    color:#32327f;
    font-family:'Rubik-SemiBold';
    margin-bottom:32px;
}

.why-line{
    border-left:4px solid #A9D63A;
    padding-left:22px;
    line-height:2;
    font-size:24px;
    color:#32327f;
}

.why-us-box p{
    margin-top:50px;
    font-size:22px;
    color:#32327f;
}

/* ---------------- Mobile ---------------- */

@media(max-width:991px){
.why-us-img{
    height:420px;
    margin-right:0;
}

.why-us-box{
    margin-left:0;
    padding:40px 30px;
}

.why-us-box h1{
    font-size:24px;
}

.why-us-box h3{
    font-size:22px;
}

.why-line{
    font-size:20px;
}

.why-us-box p{
    font-size:15px;
}
}

/* ===========================
   MOBILE FONT SIZE
=========================== */
@media (max-width:991px){

    h1{
        font-size:24px !important;
    }

    h2{
        font-size:22px !important;
    }

    h3{
        font-size:20px !important;
    }

    .lead{
        font-size:17px !important;
    }

    p,li{
        font-size:17px !important;
    }

}