.elementor-4681 .elementor-element.elementor-element-8feafd0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:110px;--padding-bottom:140px;--padding-left:10px;--padding-right:10px;}.elementor-4681 .elementor-element.elementor-element-8feafd0:not(.elementor-motion-effects-element-type-background), .elementor-4681 .elementor-element.elementor-element-8feafd0 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F2F2F2;background-image:url("https://jusmagthai.org/wp-content/uploads/2025/03/KEYOFFICER-bg.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-4681 .elementor-element.elementor-element-8feafd0{--padding-top:190px;--padding-bottom:10px;--padding-left:10px;--padding-right:10px;}}@media(max-width:767px){.elementor-4681 .elementor-element.elementor-element-8feafd0{--padding-top:150px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for html, class: .elementor-element-6a7ecc4 *//* RESET STYLES & HELPER CLASSES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ol { list-style: none; }

#OrgBrand {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  column-gap: 20px;
  width: max-content;

  h1 {
      font-family: "Bebas Neue", Sans-serif;
      font-size: 48px;
      color: #002348;
      text-transform: uppercase;
  }
  img { width: 76px; height: auto; }
}

.container {
/*   max-width: 800px; */
  position: relative;
  padding: 0 10px;
  margin: 0 auto;
  display: grid;
  align-items: center;
  justify-content: center;
/*   grid-column-gap: 20px; */
  grid-template-columns: auto auto;
  
  justify-content: center;
  align-items: center;
  text-align: center;
}

.rectangle {
    position: relative;
    width: auto!important;
    justify-items: center;
  
    span {
        display: block;
        
        &.position {
            font-family: "Bebas Neue", Sans-serif;
            font-size: 24px;
            line-height: 28px;
            font-weight: 300;
            text-transform: uppercase;
            color: #002348;
            margin-top: 5px;
            white-space: wrap;
        }
        &.name {
            font-size: 14px;
            white-space: wrap;
        }
    }
    a,
    a:link,
    a:visited {
        .name { color: #333; }
    }
}
.level-4 span.position {
    font-size: 16px;
    line-height: 20px;
    white-space: nowrap;
}
.level-4 span.name {
    font-size: 11px; 
    white-space: nowrap;
}

.img {
    overflow: hidden;
    > img {
    width: 100%;
    height: auto;
    }
}



/* LEVEL-1 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-1 {
/*   background: var(--level-1); */
}

/*.level-1::before {*/
/*  content: "";*/
/*  position: absolute;*/
/*  top: 50%;*/
/*  left: 100%;*/
/*  transform: translateY(-50%);*/
/*  width: 20px;*/
/*  height: 2px;*/
/*}*/

/*.level-1 .img {*/
/*  width: 200px; height: auto;*/
/*  border-radius : 100px;*/
/*  border: 6px solid var(--level-1);*/
/*}*/


/* LEVEL-2 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-2-wrapper {
  position: relative;
  display: grid;
  grid-row-gap: 65px;
}

/* .level-2-wrapper::before {
  display: none;
  content: "";
  position: absolute;
  top: -20px;
  left: 10px;
  width: 2px;
  height: calc(100% + 40px);
  background: var(--black);
} */

/* .level-2-wrapper::after {
  display: none;
  content: "";
  position: absolute;
  left: 10px;
  bottom: -20px;
  width: calc(100% - 10px);
  height: 2px;
  background: var(--black);
} */

.level-2-wrapper > li {
  position: relative;
  display: grid;
  align-items: center;
  grid-column-gap: 25px;
  grid-template-columns: auto auto;
}
.level-2-wrapper > li:first-child {
    justify-content: start;
}


/* .level-2-wrapper > li:last-child {
  margin-top: 100px;
  align-items: flex-end;
} */

/*.level-2-wrapper > li:first-child > .level-2 {*/
/*    margin-left: 10px;*/
/*}*/
.level-2-wrapper > li:last-child > .level-2 {
    margin-right: 10px;
}

/* .level-2::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--black);
} */
.level-2-wrapper > li:first-child .level-2:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 90px;
}

.level-2-wrapper > li:last-child >.level-2::after {
  content: "";
  position: absolute;
  top: calc(50% - 48.5px);
  left: calc(100% + 10px);
  transform: translateY(-50%);
  width: 25px;
  height: 3px;
}

.level-2 .img {
  width: 170px; height: 170px;
  border-radius : 88px;
  border-width: 6px;
  border-style: solid;
}


/* LEVEL-3 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-3-wrapper {
    padding-top: 32px;
    padding-bottom: 9px;
}
.level-3-wrapper {
   > li:first-child > .level-3 {
    margin-top: -40px;
    margin-bottom: -40px;
  }
   > li:last-child > .level-3 {
    margin-top: -11px;
    margin-bottom: -11px;
  }
}
.level-3-wrapper {
  position: relative;
  top: 34px;
  padding-left: 30px;
}

.level-3-wrapper::before {
  display: none;
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  width: 3px;
  height: 100%;
}

.level-3-wrapper::after {
  display: none;
  content: "";
  position: absolute;
  left: 10px;
  bottom: 0px;
  width: calc(100% - 10px);
  height: 3px;
}

.level-3-wrapper > li {
  display: grid;
  grid-column-gap: 30px;
  grid-template-columns: auto auto;
}

.level-3-wrapper > li:last-child {
  margin-top: -140px;
}

.level-2-wrapper > li:last-child .level-3-wrapper {
  top: -47px;
}


.level-3-wrapper {
  >li:first-child {
    >.level-3::before,
    >.level-3::after {
      top: calc(50% - 63px);
    }
  }
  >li:last-child {
    >.level-3::before,
    >.level-3::after {
      top: calc(50% - 42px);
    }
  }
}

.level-3 {
  margin: 0 10px;
}
.level-3::before,
.level-3::after{
  content: "";
  position: absolute;
  transform: translateY(-50%);
  width: 30px;
  height: 3px;
}
.level-3::before { right: calc(100% + 10px); }
.level-3::after { left: calc(100% + 10px); }

.level-3-wrapper > li:first-child {
    transform: translateY(-72px);
}
.level-3-wrapper > li:last-child {
    transform: translateY(156px);
}

.level-3 .img {
  width: 146px; height: 146px;
  border-radius : 76px;
  border-width: 5px;
  border-style: solid;
}


/* LEVEL-4 STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.level-4-wrapper {
  position: relative;
  top: -54px;
  display: grid;
  
  grid-column-gap: 15px;
  padding: 15px 20px;
  border-width: 3px;
  border-style: solid;
  border-radius: 29px;
  justify-content: center;
  align-content: center;
}
.level-3-wrapper {
    justify-items: start;
    li {
        .level-4-wrapper {
            /*grid-template-columns: repeat(5, 1fr);*/
        }
        &:first-child .level-4-wrapper {
            grid-template-columns: repeat(5, 1fr);}
        &:last-child .level-4-wrapper {
            grid-template-columns: repeat(4, 1fr);}
    }
}

/* .level-4-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 50%;
  background: var(--black);
} */

/* .level-3-wrapper > li:last-child .level-4-wrapper {
  top: -34px;
} */

.level-3-wrapper > li:last-child .level-4-wrapper::before {
  top: auto;
  bottom: 0;
}

.level-4 {
  padding: 10px;
  border-radius: 20px;
}

/* .level-4::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: var(--black);
} */

.level-4 .img {
  width: 110px; height: 110px;
  border-radius : 58px;
  border-width: 3px;
  border-style: solid;
}


/* COLOR STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.level-2-wrapper > li:first-child .level-2:after {
    background-color: #B9676D;
}
/* .level-3-wrapper::before,
.level-3-wrapper::after {
  background: red;
} */
.level-2-wrapper .level-2 .img {
      background: #B9676D;
      border-color: #B9676D;
}

.level-2-wrapper > li:last-child >.level-2::after {
  background: #59A2B8;
}
.level-3-wrapper {
  background:linear-gradient(to bottom, #59A2B8 50%, #C7B299 50%) left;
  background-repeat: no-repeat;
  background-size: 3px 100%;
}
.level-3-wrapper {
  >li:first-child {
    .level-3 > a > .img,
    >.level-3:before,
    >.level-3:after,
    .level-4 .img {
      background: #59A2B8;
      border-color: #59A2B8;
    }
  }
  >li:last-child {
    .level-3 > .img,
    >.level-3:before,
    >.level-3:after,
    .level-4 .img {
      background: #C7B299;
      border-color: #C7B299;
    }
  }
}

.level-3-wrapper li:first-child {
  .level-4-wrapper { border-color: #59A2B8; }
}
.level-3-wrapper li:last-child {
  .level-4-wrapper { border-color: #C7B299; }
}
.level-4 {
  background-color: white;
}

/* RESPONSIVE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 1100px) {
  #OrgBrand {
    position: relative;
    top: unset;
    margin-top: 20px;
    flex-direction: column;
    > h1 { font-size: 34px; margin: 0; }
    > img { width: 72px; margin-bottom: 20px;}
  }
  .level-2-wrapper {
      padding-left: 0;
      > li > .level-2 {
      margin-left: 0px!important;
      margin-right: 0px!important;
      z-index: 1;
      
      .img { margin: 0 auto; }
    }
  }
  .level-2-wrapper > li:last-child >.level-2::after {
      display: none;
  }
  .container,
  .level-2-wrapper > li,
  .level-4-wrapper {
    grid-template-columns: 1fr!important;
  }
  .level-2-wrapper > li:first-child .level-2:after { height: 60px; }
  .level-2-wrapper > li:last-child .level-3-wrapper { top: unset; }
  .level-2 { margin-top: 0; margin-right: 0; }
  
  .level-3-wrapper {
    padding-top: 0; padding-bottom: 0;
  }
  .level-3-wrapper {
    justify-items: center;
    > li:first-child > .level-3 {
      margin-top: 0; margin-bottom: 0; }
    > li:last-child > .level-3 {
      margin-top: 0; margin-bottom: 0; }
  }
  
  .level-3-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
/*     grid-column-gap: 30px; */
    top: -140px!important;
    
    padding-left: 0;
    
    background: unset;
    background-size: unset;
    
    > li {
      grid-template-columns: min-content;
      justify-content: center;
      padding-top: 140px;
      
      position: relative;
      align-self: start;
      
      &:first-child,
      &:last-child {
        transform: unset;
        margin-top: unset;
        
        &:before {
          position: absolute;
          content: "";
          top: 0;
          height: 3px;
          width: calc(50%);
        }
        &:first-child:before {
          left: 50%;
          background: #59A2B8;
        }
        &:last-child:before {
          right: 50%;
          background: #C7B299;
        }
      }
      &:first-child .level-3 {
        padding-bottom: 30px;
        &:after {
          height: 30px;
          top: unset!important; bottom: 0!important;
        }
      }
      &:last-child .level-3 {
        padding-bottom: 86px;
        &:after {
          height: 86px;
          top: unset!important; bottom: 0!important;
        }
      }
      
      > .level-3{
        
        &:before,
        &:after {
  /*         top: calc(50% - 30px)!important; */
          left: 50%;
          transform: translateX(-50%);
          width: 3px;
        }
        &:before {
          height: 130px;
          top: -10px!important; bottom: unset!important;
          transform: translate(-50%, -100%);
        }
        /*&:after {*/
        /*  height: 30px;*/
        /*  top: unset!important; bottom: 0!important;*/
        /*}*/
      }
      
    }
  }
  .level-4-wrapper {
    grid-template-columns: min-content;
    top: unset;
    grid-row-gap: 10px;
    padding: 10px;
  }
  
}

@media screen and (max-width: 767px) {
    .level-2-wrapper > li:last-child >.level-2::after {
        display: block!important;
        content: "";
        position: absolute;
        top: calc(100%);
        left: calc(50%);
        transform: translateX(-50%);
        width: 3px;
        height: 40px;
    }
    .level-3-wrapper {
        top: 40px!important;
        > li {
            padding-top: 60px;
            &:first-child,
            &:last-child {
                transform: unset;
                margin-top: unset;
                
                &:before {
                  position: absolute;
                  content: "";
                  top: 0;
                  height: 3px;
                  width: calc(50%);
                }
            }
            > .level-3{
                &:before {
                    height: 50px;
                }
            }
        }
    }
}

/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* @media screen and (max-width: 1650px) {
  .rectangle {
    width: 150px;
  }
}

@media screen and (max-width: 1300px) {
  body {
    font-size: 16px;
  }
  
  h1,
  h2,
  h3,
  h4 {
    font-size: revert;
  }

  .rectangle {
    padding: 20px 10px;
    width: auto;
  }

  .container {
    display: block;
  }

  .level-1 {
    margin-bottom: 20px;
  }

  .level-1::before,
  .level-2::after,
  .level-3::after {
    display: none;
  }

  .level-2-wrapper::before,
  .level-2-wrapper::after,
  .level-3-wrapper::before,
  .level-3-wrapper::after,
  .level-2-wrapper > li,
  .level-3-wrapper > li {
    display: block;
  }

  .level-2-wrapper {
    padding-left: 30px;
    border-left: none;
  }

  .level-2-wrapper > li:last-child {
    margin-top: 50px;
  }

  .level-2-wrapper > li:last-child .level-3-wrapper,
  .level-3-wrapper > li:last-child .level-4-wrapper,
  .level-3-wrapper,
  .level-4-wrapper {
    top: 0;
  }

  .level-3-wrapper {
    padding: 20px 0 20px 30px;
    border-left: none;
  }

  .level-3-wrapper > li:last-child {
    margin-top: 50px;
  }

  .level-4-wrapper {
    padding: 20px 0 0 30px;
    grid-template-columns: repeat(2, 1fr);
  }

  .level-4-wrapper > li:first-child {
    margin-bottom: 20px;
  }

  .level-4-wrapper::before {
    left: 10px;
    height: 100%;
  }
} */


/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* .page-footer {
  position: fixed;
  right: 0;
  bottom: 20px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  padding: 5px;
}

.page-footer a {
  margin-left: 4px;
} *//* End custom CSS */