/*=========================================
        SERI ORGANOGRAM
=========================================*/

.seri-org-chart{

    background:#f5f7fb;

}

.seri-org-main{

    max-width:1500px;

    margin:auto;

}

.seri-org-top{

    display:flex;

    justify-content:center;

}

.seri-org-box{

    width:260px;

    min-height:85px;

    padding:18px;

    background:#fff;

    border-radius:14px;

    border:2px solid #d8e2ec;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    text-align:center;

    transition:.35s;

    position:relative;

}

.seri-org-box:hover{

    transform:translateY(-6px);

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

}

.seri-org-box strong{

    display:block;

    font-size:17px;

    color:#183153;

    margin-bottom:4px;

}

.seri-org-box h5{

    margin:0;

    font-size:20px;

    font-weight:700;

}

.seri-org-box span{

    display:block;

    margin-top:6px;

    color:#555;

    font-size:14px;

    line-height:1.5;

}

/*=================================
    TOP BOXES
==================================*/

.seri-org-box-main{

    background:linear-gradient(135deg,#b84e00,#e27b18);

    color:#fff;

    border:none;

}

.seri-org-box-main h5,

.seri-org-box-main span{

    color:#fff;

}

.seri-org-box-second{

    background:#fff5d8;

    border-color:#f2cf65;

}

/*=================================
        CONNECTOR
==================================*/

.seri-org-line-v{

    width:3px;

    height:40px;

    background:var(--primary);

    margin:auto;

}

.seri-org-main-line{

    width:82%;

    height:3px;

    background:var(--primary);

    margin:0 auto;

    position:relative;

    margin-bottom:35px;

}

.seri-org-branch{

    position:absolute;

    top:0;

    width:3px;

    height:35px;

    background:#d17b00;

}

.seri-org-branch:nth-child(1){

    left:12.5%;

}

.seri-org-branch:nth-child(2){

    left:37.5%;

}

.seri-org-branch:nth-child(3){

    left:62.5%;

}

.seri-org-branch:nth-child(4){

    left:87.5%;

}

/*=================================
        ZONES
==================================*/

.seri-org-row{

    display:grid;

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

    gap:28px;

    align-items:flex-start;

}

.seri-org-zone{

    display:flex;

    flex-direction:column;

    align-items:center;
    gap:10px

}

.seri-org-zone-box{

    width:250px;
z-index: 1;
    min-height:90px;

    background:#ffffff;

    border-radius:14px;

    border-left:5px solid #b84e00;

    box-shadow:0 8px 22px rgba(0,0,0,.08);

    padding:16px;

    text-align:center;

    font-size:15px;

    font-weight:600;

    color:#243b53;

    transition:.3s;

}

/* .seri-org-zone-box:hover{

    transform:translateY(-5px);

    box-shadow:0 12px 28px rgba(0,0,0,.14);

} */

.seri-org-zone-line{

    width:3px;

    height:22px;

    background:#d17b00;

}
/*=========================================
        OFFICER LIST
=========================================*/

.seri-org-officer-list{

    width:250px;

    margin-top:8px;

    position:relative;

}

/*=========================================
        OFFICER ROW
=========================================*/

.seri-org-officer{

    display:flex;

    align-items:center;

    margin-bottom:14px;

    position:relative;

}

/* Vertical Connector */

.seri-org-officer::before{

        content: "";
    position: absolute;
    left: 14px;
    top: -45px;
    width: 2px;
    height: 78px !important;
    background: var(--primary);

}

/* First item */

.seri-org-officer:first-child::before{

    top: -30px;
    height: 63px;

}

/* Last item */

.seri-org-officer:last-child::before{

    height:16px;

}

/*=========================================
        L CONNECTOR
=========================================*/

.seri-org-officer-line{

width: 22px;
    left: 14px !important;
    height: 2px;
    background: #c66d00;
    flex-shrink: 0;
    position: relative;

}

/*=========================================
        OFFICER BOX
=========================================*/

.seri-org-officer-box{

    flex:1;
z-index: 1;
    background:#ffffff;

    border:1px solid #e6e6e6;

    border-radius:10px;

    padding:11px 14px;

    font-size:14px;

    line-height:1.45;

    color:#444;

    font-weight:500;

    box-shadow:0 5px 14px rgba(0,0,0,.06);

    transition:.3s;

}

/*=========================================
        HOVER
=========================================*/

.seri-org-officer-box:hover{

    background:#fff8ef;

    border-color:#d67d00;

    color:#b55d00;

    transform:translateX(5px);

    box-shadow:0 10px 22px rgba(0,0,0,.12);

}

/*=========================================
        ZONE HOVER
=========================================*/

.seri-org-zone:hover .seri-org-zone-box{

    border-left-color:#ff9800;

}

/*=========================================
        ICON (Optional)
=========================================*/

.seri-org-officer-box::before{

    content:"";

    display:inline-block;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#d67d00;

    margin-right:10px;

    vertical-align:middle;

}

/*=========================================
        ANIMATION
=========================================*/

.seri-org-zone{

    animation:seriFadeUp .6s ease both;

}

.seri-org-zone:nth-child(2){

    animation-delay:.1s;

}

.seri-org-zone:nth-child(3){

    animation-delay:.2s;

}

.seri-org-zone:nth-child(4){

    animation-delay:.3s;

}

@keyframes seriFadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

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

@media (max-width:1199px){

.seri-org-main-line{

    width:88%;

}

.seri-org-row{

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

    gap:35px;

    justify-items:center;

}

.seri-org-zone{

    width:100%;

    align-items:center;

}

.seri-org-zone-box,

.seri-org-officer-list{

    width:300px;

}

.seri-org-branch{

    display:none;

}

.seri-org-main-line{

    display:none;

}

.seri-org-line-v{

    height:25px;

}

}


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

@media (max-width:767px){

.seri-org-chart{

    padding:40px 0;

}

.seri-org-row{

    display:flex;

    flex-direction:column;

    gap:28px;

    align-items:center;

}

.seri-org-zone{

    width:100%;

}

.seri-org-box-main,

.seri-org-box-second,

.seri-org-zone-box,

.seri-org-officer-list{

    width:95%;

    max-width:360px;

}

.seri-org-box{

    min-height:75px;

    padding:14px;

}

.seri-org-box h5{

    font-size:18px;

}

.seri-org-box span{

    font-size:13px;

}

.seri-org-zone-box{

    min-height:75px;

    font-size:14px;

}

.seri-org-line-v{

    height:18px;

}

.seri-org-zone-line{

    height:15px;

}

.seri-org-main-line{

    display:none;

}

.seri-org-branch{

    display:none;

}

.seri-org-officer{

    margin-bottom:10px;

}

.seri-org-officer::before{

    display:none;

}

.seri-org-officer-line{

    display:none;

}

.seri-org-officer-box{

    font-size:13px;

    padding:10px 14px;

}

}


/*=========================================
        LARGE DESKTOP
=========================================*/

@media (min-width:1400px){

.seri-org-main{

    max-width:1650px;

}

.seri-org-row{

    gap:45px;

}

.seri-org-zone-box,

.seri-org-officer-list{

    width:280px;

}

.seri-org-box{

    width:290px;

}

.seri-org-box-main{

    width:320px;

}

.seri-org-box-second{

    width:300px;

}

}


/*=========================================
        SMOOTH EFFECTS
=========================================*/

.seri-org-box,

.seri-org-zone-box,

.seri-org-officer-box{

    transition:all .35s ease;

}

.seri-org-box:hover,

/* .seri-org-zone-box:hover{

    transform:translateY(-6px);

} */

.seri-org-officer-box:hover{

    transform:translateX(6px);

}


/*=========================================
        SHADOW ENHANCEMENT
=========================================*/

.seri-org-box,

.seri-org-zone-box{

    box-shadow:0 8px 22px rgba(0,0,0,.08);

}
.seri-org-officer:first-child::before
.seri-org-officer-box{

    box-shadow:0 4px 12px rgba(0,0,0,.05);

}