/*==================================================
            MAFIA VALUES SECTION
==================================================*/

.mafia-values{

    padding:120px 0;

    background:#f51d00;

    overflow:hidden;

}

.mafia-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}



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

.mafia-left{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}



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

.mafia-title{

    position:relative;

    margin:0;
    margin-left: 70px;

    font-size:105px;

    line-height:.95;

    font-weight:900;

    cursor:pointer;

    user-select:none;

    color:transparent;

    -webkit-text-stroke:3px #f5dd08;

    transition:.35s ease;

}




/* Default Active */

.mafia-title.active{

    color:#ffffff;

    -webkit-text-stroke:0;

}



/* Hover */

.mafia-title:hover{

    color:#ffffff;

    -webkit-text-stroke:0;

    transform:translateX(12px);

}



/*==================================================
            RIGHT SIDE
==================================================*/

.mafia-right{

    display:flex;

    justify-content:center;

}



/*==================================================
            SPEECH BOX
==================================================*/

.speech-box{

    position:relative;

    width:420px;

    min-height:420px;

    background:#ffffff;

   border-radius:0 30px 30px 30px;

    padding:55px;

    box-shadow:

        0 30px 70px rgba(0,0,0,.15);

}



/*==================================================
            POINTER
==================================================*/

.speech-pointer{

    position:absolute;

    left:-18px;

    top:45px;

    width:34px;

    height:34px;

    background:#fff;

    transform:rotate(45deg);

    transition:all .45s ease;

    z-index:5;

}



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

.speech-content{

    display:none;

}

.speech-content.active{

    display:block;

}



/*==================================================
            HEADING
==================================================*/

.speech-content h3{

    font-size:34px;

    font-weight:800;

    color:#111;

    margin-bottom:22px;

}



/*==================================================
            TEXT
==================================================*/

.speech-content p{

    font-size:23px;

    line-height:1.8;

    color:#222;

}



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

@media(max-width:1200px){

.mafia-title{

    font-size:82px;

}

.speech-box{

    width:100%;

}

}



@media(max-width:992px){

.mafia-wrapper{

    grid-template-columns:1fr;

    gap:70px;

}

.mafia-left{

    align-items:center;

}

.mafia-right{

    width:100%;

}

}



@media(max-width:768px){

.mafia-values{

    padding:80px 0;

}

.mafia-title{

    font-size:58px;

    -webkit-text-stroke:2px #e53935;

}

.speech-box{

    padding:35px;

    min-height:auto;

}

.speech-content h3{

    font-size:26px;

}

.speech-content p{

    font-size:17px;

    line-height:1.7;

}

}

/*==================================================
            CURRENT OPENINGS
==================================================*/

.career-opening{

    padding:120px 0;

    background:#fff;

}

.opening-heading{

    text-align:center;

    margin-bottom:55px;

}

.opening-heading h2{

    font-size:64px;

    font-weight:800;

    color:#111;

    letter-spacing:-2px;

}



/*==================================================
                LOCATION TABS
==================================================*/

.opening-tabs{

    display:flex;

    justify-content:center;

    gap:55px;

    margin-bottom:70px;

}

.tab-btn{

    position:relative;

    background:none;

    border:none;

    cursor:pointer;

    font-size:20px;

    font-weight:700;

    color:#111;

    transition:.35s;

}

.tab-btn::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:0;

    height:3px;

    background:#E53935;

    transition:.35s;

}

.tab-btn.active{

    color:#E53935;

}

.tab-btn.active::after{

    width:100%;

}

.tab-btn:hover{

    color:#E53935;

}

.tab-btn:hover::after{

    width:100%;

}



/*==================================================
                JOB LIST
==================================================*/

.job-list{

    width:100%;

}



/*==================================================
                JOB CARD
==================================================*/

.job-card{

    display:flex;
    margin-left: 70px;

    justify-content:space-between;

    align-items:center;

    padding:41px 0;

    border-bottom:1px solid #d9d9d9;

    transition:.35s;

}

.job-card:hover{

    padding-left:18px;

}



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

.job-left h3{

    font-size:22px;

    font-weight:800;

    color:#111;

    margin-bottom:12px;

    transition:.35s;

}

.job-card:hover .job-left h3{

    color:#f51d00;

}

.job-left p{

    font-size:20px;

    color:#555;

}

.job-left span{

    margin:0 10px;

}



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

.job-btn{

    display:flex;

    align-items:center;

    gap:16px;

    padding:18px 34px;

    background:#f51d00;

    border-radius:60px;

    text-decoration:none;

    color:#fcf4f4;

    font-size:18px;

    font-weight:700;

    transition:.35s;

    margin-right: 70px;

}

.job-btn i{

    width:28px;

    height:28px;

    border:2px solid #111;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:15px;

    transition:.35s;

}

.job-btn:hover{

    background:#111;

    color:#fff;

}

.job-btn:hover i{

    border-color:#fff;

    transform:translateX(5px);

}



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

@media(max-width:1200px){

.job-left h3{

    font-size:32px;

}

.job-btn{

    font-size:20px;

}

}



@media(max-width:992px){

.job-card{

    flex-direction:column;

    align-items:flex-start;

    gap:30px;

}

.job-right{

    width:100%;

}

.job-btn{

    width:100%;

    justify-content:center;

}

}



@media(max-width:768px){

.career-opening{

    padding:80px 0;

}

.opening-heading h2{

    font-size:42px;

}

.opening-tabs{

    gap:25px;

    flex-wrap:wrap;

}

.tab-btn{

    font-size:18px;

}

.job-left h3{

    font-size:26px;

}

.job-left p{

    font-size:16px;

}

.job-btn{

    font-size:18px;

    padding:16px 26px;

}

}

/*==================================================
            JOB APPLICATION MODAL
==================================================*/

.job-modal{

    position:fixed;

    inset:0;

    width:100%;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    visibility:hidden;

    opacity:0;

    transition:.35s ease;

}



/*==================================================
                ACTIVE
==================================================*/

.job-modal.active{

    visibility:visible;

    opacity:1;

}



/*==================================================
                OVERLAY
==================================================*/

.job-modal-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(8px);

}



/*==================================================
                POPUP
==================================================*/

.job-modal-box{

    position:relative;

    width:900px;

    max-width:92%;

    max-height:92vh;

    overflow-y:auto;

    background:#ffffff;

    border-radius:18px;

    padding:40px;

    z-index:2;

    box-shadow:

        0 30px 80px rgba(0,0,0,.35);

    transform:

        scale(.85)

        translateY(40px);

    opacity:0;

    transition:

        transform .45s cubic-bezier(.22,1,.36,1),

        opacity .45s ease;

}



/* Popup Open */

.job-modal.active .job-modal-box{

    transform:

        scale(1)

        translateY(0);

    opacity:1;

}



/*==================================================
            SCROLLBAR
==================================================*/

.job-modal-box::-webkit-scrollbar{

    width:8px;

}

.job-modal-box::-webkit-scrollbar-thumb{

    background:#d5d5d5;

    border-radius:20px;

}

.job-modal-box::-webkit-scrollbar-track{

    background:#f3f3f3;

}



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

.job-modal-close{

    position:absolute;

    top:20px;

    right:20px;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#f5f5f5;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

    color:#111;

    transition:.35s ease;

}

.job-modal-close:hover{

    background:#111;

    color:#fff;

    transform:rotate(90deg);

}



/*==================================================
                HEADER
==================================================*/

.job-modal-header{

    padding-right:70px;

    margin-bottom:35px;

    border-bottom:1px solid #ececec;

    padding-bottom:25px;

}

.job-modal-header h2{

    font-size:36px;

    font-weight:800;

    color:#111;

    margin-bottom:12px;

    line-height:1.2;

}

.job-modal-header p{

    font-size:18px;

    color:#666;

}

.job-modal-header span{

    margin:0 10px;

}



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

@media(max-width:768px){

.job-modal{

    align-items:flex-start;

    padding:20px;

}

.job-modal-box{

    width:100%;

    max-height:95vh;

    padding:25px;

}

.job-modal-header{

    padding-right:45px;

}

.job-modal-header h2{

    font-size:26px;

}

.job-modal-header p{

    font-size:15px;

}

.job-modal-close{

    width:40px;

    height:40px;

    font-size:18px;

}

}

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

.job-form h3{

    font-size:28px;

    font-weight:800;

    color:#111;

    margin-bottom:30px;

}



/*==================================================
            FILE UPLOAD
==================================================*/

.resume-upload{

    margin-bottom:40px;

}

.resume-upload label:first-child{

    display:block;

    font-size:15px;

    font-weight:700;

    color:#111;

    margin-bottom:12px;

}

.resume-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 24px;

    border-radius:50px;

    background:#f56e00;

    color:#111;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:.35s ease;

}

.resume-btn:hover{

    background:#111;

    color:#fff;

}

.resume-upload span{

    display:block;

    margin-top:12px;

    font-size:13px;

    color:#777;

}



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

.form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px 35px;

}



/*==================================================
            FULL WIDTH
==================================================*/

.full-width{

    grid-column:1/-1;

}



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

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    font-size:14px;

    font-weight:700;

    color:#111;

    margin-bottom:10px;

}



/*==================================================
            INPUT
==================================================*/

.form-group input,

.form-group select{

    width:100%;

    height:56px;

    border:none;

    border-bottom:2px solid #d9d9d9;

    background:transparent;

    font-size:16px;

    color:#111;

    outline:none;

    transition:.35s ease;

}

.form-group input::placeholder{

    color:#999;

}

.form-group input:focus,

.form-group select:focus{

    border-color:#f56e00;

}



/*==================================================
            SELECT
==================================================*/

.form-group select{

    cursor:pointer;

}



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

.apply-btn{

    margin-top:45px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:200px;

    height:58px;

    border:none;

    border-radius:50px;

    background:#f56e00;

    color:#111;

    font-size:16px;

    font-weight:800;

    letter-spacing:.5px;

    cursor:pointer;

    transition:.35s ease;

}

.apply-btn:hover{

    background:#111;

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(0,0,0,.18);

}



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

@media(max-width:768px){

.form-grid{

    grid-template-columns:1fr;

    gap:22px;

}

.full-width{

    grid-column:auto;

}

.apply-btn{

    width:100%;

}

.resume-btn{

    width:100%;

}

}

/*==================================================
                CUSTOM SCROLLBAR
==================================================*/

.job-modal-box{

    scrollbar-width:thin;

    scrollbar-color:#f56e00 #f4f4f4;

}

.job-modal-box::-webkit-scrollbar{

    width:8px;

}

.job-modal-box::-webkit-scrollbar-track{

    background:#f4f4f4;

    border-radius:20px;

}

.job-modal-box::-webkit-scrollbar-thumb{

    background:#f56e00;

    border-radius:20px;

}

.job-modal-box::-webkit-scrollbar-thumb:hover{

    background:#f56e00;

}



/*==================================================
            INPUT FOCUS EFFECT
==================================================*/

.form-group{

    position:relative;

}

.form-group::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:#f56e00;

    transition:.35s ease;

}

.form-group:focus-within::after{

    width:100%;

}

.form-group:focus-within label{

    color:#f56e00;

}

.form-group input,

.form-group select{

    transition:

        border-color .35s ease,

        box-shadow .35s ease,

        background .35s ease;

}

.form-group input:focus,

.form-group select:focus{

    border-bottom-color:#f56e00;

    box-shadow:0 8px 18px rgba(245,196,0,.08);

}



/*==================================================
            PLACEHOLDER
==================================================*/

.form-group input::placeholder{

    color:#b4b4b4;

    transition:.3s;

}

.form-group input:focus::placeholder{

    opacity:.4;

}



/*==================================================
            VALIDATION
==================================================*/

.form-group.error input,

.form-group.error select{

    border-bottom-color:#E53935;

}

.form-group.error label{

    color:#E53935;

}

.form-group.success input,

.form-group.success select{

    border-bottom-color:#1BA94C;

}

.form-group.success label{

    color:#1BA94C;

}



/* Error Message */

.error-text{

    margin-top:8px;

    font-size:13px;

    color:#E53935;

}



/*==================================================
            FILE SUCCESS
==================================================*/

.resume-success{

    margin-top:12px;

    color:#1BA94C;

    font-size:14px;

    font-weight:600;

}



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

.apply-btn:disabled{

    background:#d9d9d9;

    color:#777;

    cursor:not-allowed;

    box-shadow:none;

    transform:none;

}



/*==================================================
            AUTOFILL FIX
==================================================*/

input:-webkit-autofill{

    -webkit-box-shadow:0 0 0 1000px #fff inset;

    -webkit-text-fill-color:#111;

}



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

@media(max-width:992px){

.job-modal-box{

    width:94%;

    padding:30px;

}

}



@media(max-width:768px){

.job-modal{

    padding:15px;

}

.job-modal-box{

    width:100%;

    max-height:95vh;

    border-radius:16px;

    padding:22px;

}

.job-form h3{

    font-size:22px;

}

.resume-upload{

    margin-bottom:28px;

}

.resume-btn{

    width:100%;

    height:52px;

}

.form-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.form-group input,

.form-group select{

    height:52px;

    font-size:15px;

}

.apply-btn{

    width:100%;

    height:54px;

    font-size:15px;

}

}



@media(max-width:480px){

.job-modal-header h2{

    font-size:22px;

}

.job-modal-header p{

    font-size:14px;

}

.form-group label{

    font-size:13px;

}

}