/*CODES FOR NEWS PAGE ----------------------------------------------------------*/

.aec_news{
  .view-latest-grid{
    padding: 0 50px;
  }

  .view-latest-grid .item-latest + .item-latest{
    border: none!important;
  }

  .view-latest-grid .item-latest {
    margin-bottom: 35px;
  }

  .content-article{
    border: 1px solid #2f5b1f;
    border-radius: 5px;
    padding: 30px 20px;
  }

  .title-article h3 a {
    font-family: Roboto !important;
    color: #2f5b1f!important;
    font-weight: bold!important;
  }

  .desc-article {
    max-height: 200px;
    overflow: hidden;
    position: relative;
  }

.desc-article::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0), /* Fully transparent white at the top of the fade area */
        rgba(255, 255, 255, 1) /* Fully opaque white at the very bottom */);
    pointer-events: none;
  }

  .view-latest-grid .readmore .readmore-link {
    text-decoration: none;
    color: white;
    background: #2f5b1f;
    display: inline-flex;
    padding: 10px 20px;
    margin-top: 30px;
    border-radius: 5px;
    font-family: Roboto!important;
    transition: .4s ease;

    &:hover{
      color: white;
      opacity: .7;
    }
 }



  @media(max-width: 1280px){
    .view-latest-grid .item-latest {
      padding-right: 10px!important;
      padding-left: 10px!important;
    }
  }

  @media(max-width: 425px){
    .view-latest-grid {
        padding: 0 15px!important;
    }
  }
}







.com-content-article {
  display: flex;
  padding: 50px;
  flex-direction: column;

  .page-header{
    order: 1;
  }

  .com-content-article__body{
    order: 2;
  }

  .article-info{
    order: 3;
  }

  .pagenavigation{
    order: 4;
  }

  .page-header h1{
    color: #2f5b1f!important;
  }
}

@media(max-width: 640px){
  .com-content-article {
    padding: 50px 20px;
  }
}

/*CODES FOR NEWS PAGE ----------------------------------------------------------*/














.container-header{
    display: none!important;
}

div#burger-menu.openX {
    position: fixed;
}

/*
nav.navbar .li_about-us,
nav.navbar .li_contact-us,
nav.navbar .li_our-solutions,
nav.navbar .li_our-projects{
    pointer-events: none !important;
}
*/



.site-grid{
  display: flex!important;
}

.container-component main {
    margin: 0 !important;
}





/*OUR SOLUTIONS -----------------------------------------*/
.our_solutions div.divider {
    border-top: 1px solid #81c535;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    height: fit-content;
    min-height: 0px;
    max-width: 60%;
}




@media(max-width: 640px){
  #irgfb {
    padding: 70px 0 64px 0!important;
  }
  #in4vb,
  #in4vb-2,
  #in4vb-3,
  #im652b,
  #ij7mmi,
  #i9bwij{
    font-size: 1.5em!important;
  }
}
/*OUR SOLUTIONS -----------------------------------------*/














/*OUR PROJECTS -----------------------------------------*/

.our_projects div.divider {
    border-top: 1px solid #81c535;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    height: fit-content;
    min-height: 0px;
    max-width: 60%;
}

@media(max-width: 1280px){
  section#igl99 .row, section#ijcls8 .row, section#ilhvn .row{
    flex-direction: column!important;
    gap: 50px!important;
    max-width: 800px!important;
    margin: auto!important;
  }

  section#itim57 .row, section#i2srf .row{
    flex-direction: column-reverse!important;
    gap: 50px!important;
    max-width: 800px!important;
    margin: auto!important;
  }
}

@media (max-width: 640px) {
    html body #ig8d33 {
        font-size: 1.2em !important;
    }

  html body #ig8d334 {
    font-size: 16px!important;
  }

  #iiwc8, #iz4a03, #i6yxi, #ioout, #iljbk{
    font-size: 1.5em!important;
  }

  #i8ju3, #irlkfi, #idhfb, #i1464, #iuq1p{
    font-size: 1.2em!important;
    line-height: normal!important;
  }

  #ilhvn {
    padding: 64px 0 70px 0!important;
  }
  #igl99 {
    padding: 70px 0 64px 0!important;
  }
}


@media (max-width: 480px) {
    html body #ig8d33 {
        font-size: 1.2em !important;
    }

  html body #ig8d334 {
    font-size: 16px!important;
  }
}






/*OUR PROJECTS -----------------------------------------*/









/*CONTACT US -----------------------------------------*/


section#iuzjk .col {
    display: flex;
    justify-content: center;
}


@media(max-width: 640px){
  div#i4dzqz {
    padding: 70px 20px!important;
}
  #ijh7hc {
    font-size: 2em!important;
  }
  #inrnrp {
    font-size: 1.5em!important;
  }

  #ihdijs {
    font-size: 16px!important;
  }

  #iuzjk {
    padding: 0 20px!important;
    margin: 0 auto 70px!important;
  }
  
  #iydn18 {
    margin: 0 0 70px!important;
  }
}

/*CONTACT US -----------------------------------------*/









/*ABOUT US----------------------------------------------------------*/

@media(max-width: 1440px){

  #ieuqt {
    padding: 64px 0 0!important;
}
  section#ieuqt, section#i0ppfh{
    max-width: 950px;
    margin: auto;
  }
  
.about_us #ieuqt .row, .about_us #i0ppfh .row{
  display: flex;
  flex-direction: column!important;
}

.about_us #ieuqt .col.cell, .about_us #i0ppfh .col.cell {
    display: flex!important;
    width: 100%!important;
    max-width: 100% !important;
    align-items: center!important;
    margin-bottom: 15px!important;
    gap: 10px!important;
}

  .iBorder {
    width: 40%;
  }

  .txtSec {
    width: 60%;
  }

  .txtSec * {
    text-align: left !important;
    padding: 0 !important;
  }
  
}


@media(max-width: 1024px){
  
  div#i0x6gt {
    flex-direction: column!important;
    gap: 50px!important;

    *{
      text-align: center!important;
    }

    #i1h9n2 {
      max-width: 650px!important;
      margin: auto!important;
    }
  }
}



@media(max-width: 768px){
  #ieuqt {
    padding: 30px 0 0 !important;
  }
  
  #team_Tit {
    margin: 70px auto 0 auto!important;
  }
  
  #i0ppfh {
    padding: 30px 0 40px 0 !important;
  }
  
  .about_us #ieuqt .row, .about_us #i0ppfh .row {
        gap: 30px!important;
    }
  
  .about_us #ieuqt .col.cell, .about_us #i0ppfh .col.cell {
        align-items: center;
        flex-direction: column;
    }

  .iBorder {
        width: 100%;
        max-width: 290px;
  }

      .txtSec {
        width: 100%;
    }

  .txtSec * {
    text-align: center!important;
  }

  #itjpo5{
    padding: 70px 10px!important;
  }

  div#i7ryjk {
    flex-direction: column!important;
    gap: 50px!important;
    max-width: 500px!important;
    margin: auto!important;
 }

  #ii46o3 {
    padding: 10px 0 70px 0!important;
  }

  #igrf0j{
    padding: 70px 0!important;
    background-position: center center!important;
    background-attachment: initial!important;
  }
  
}


@media(max-width: 480px){

  .iBorder {
    max-width: 100%;
  }
  
  #team_Tit {
    font-size: 2em!important;
  }

  div#i8js0k {
    font-size: 2em!important;
  }

  #ig8d33 {
    font-size: 1.5em!important;
  }

  #ichq47{
    font-size: 2em!important;
  }

  #i4hg45 {
    font-size: 16px!important;
  }

  #i30pao {
    font-size: 2em!important;
  }

  #i1h9n2{
    padding: 10px!important;
  }
  
}
/*ABOUT US----------------------------------------------------------*/














/*CODES FOR HOME PAGE ----------------------------------------------------------*/
html body.aec_home{
  
  #headerCustom {
    position: absolute;
    background: transparent;
    z-index: 4 !important;
    top: 0;
    left: 0;
    bottom: unset;
    right: unset;
    align-items: center;
    justify-content: center;
    height: fit-content;
    padding: 50px 100px;
 }

  #headerCustom .navbar-nav li:last-child a {
  background: #2f521c;
  color: white!important;
}

  /*<main> tag*/
  .container-component>:first-child,
  .container-sidebar-left>:first-child,
  .container-sidebar-right>:first-child,
  .container-component>*+*,
  .container-sidebar-left>*+*,
  .container-sidebar-right>*+*{
    margin-top: 0;
}






  /*banner*/
  #i957i{
    display: flex!important;
    align-items: center!important;
  }

  #igbm8{
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, .3)!important;
    background-size: cover;
  }

    



  /*second section*/
  #i07g {
    align-items: center!important;
  }
  #i6wg p{
    margin-bottom: 0!important;
  }

  /*our mission*/
  #iqwkd::before, #iqwkd::after{
    display: none!important;
  }



  /*3 cols*/
  .row.colx3x {
    gap: 30px;
    
    a {
      display: flex!important;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-end;
      padding: 0 !important;
    }

    a:before{
      transition: .4s ease;
      display: flex;
      width: 0px;
      height: 0px;
      content:'';
      background: url('/images/colrow.png');
      background-size: 100%;
      background-position: center;
      margin-bottom: 30px;
    }

    a:hover:before{
      width: 50px;
      height: 50px;
    }
  }




/*sticker*/
  main, .content.clearfix{
    overflow: hidden!important;
  }
  
  .content.clearfix:after {
    display: block;
    position: absolute;
    bottom: 820px;
    clear: both;
    content: "";
    width: 1100px;
    aspect-ratio: 1;
    background-size: cover;
    z-index: 0;
    opacity: .7;
    right: -200px;
    background-image: url(https://www.asiaenvi.com/images/asset_aec_g.png);
    mask-image: linear-gradient(to top, transparent, black);
    user-select: none;
    pointer-events: none;
}



  #cta_Sec{
    z-index: 1;
  }
  

  div#forFooter {
    display: block;
    height: 50px;
    margin-bottom: -50px;
    background: #505650;
    z-index: 3;
  }

  #footerCustom{
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    z-index: 3;
  }
}








@media(max-width: 1280px){
  /*sticker*/
  html body.aec_home .content.clearfix:after {
    bottom: 950px!important;
    width: 900px!important;
  }

  /*what we do*/
  #iz4fu, #iqwkm, #ib1hr {
    font-size: 35px!important;
  }
}




@media(max-width: 1024px){

  /*banner*/
  #iyb3g {
    padding: 0 70px!important;
  }
  #iji32 {
    font-size: 50px!important;
  }


  /*under ban*/
  #i6wg{
    padding: 100px 70px!important;
  }

  #ius0l {
    font-size: 45px!important;
    br{
      height: 35px!important;
    }
  }
  
  #ici0q, #ius0l{
    line-height: 45px!important;
  }

  #i2ouj {
    font-size: 18px!important;
  }


  /*mission*/
  #i4wbl{
    padding: 100px 70px!important;
  }
  #idrzj {
    padding: 0 70px 100px 0!important;
  }

  #iqmxf {
    font-size: 45px!important;
  }


  /*what we do*/
  #idm3f {
    padding: 100px 20px 0!important;
  }
  #ivg35 {
    padding: 50px 10px 100px!important;
  }

  #iuamj {
    font-size: 45px!important;
  }

  /*bot cta*/
  html body.aec_home #cta_Sec {
    padding: 100px 20px!important;
  }
  div#ik3uh * {
    font-size: 45px !important;
  }
  
}





@media(max-width: 768px){

  /*under ban*/
  html body.aec_home #i07g {
    flex-direction: column!important;
    justify-content: center!important;
    gap: 30px!important;

    *{
      text-align: center!important;
    }
  }


  /*mission*/
  #i4wbl *{
    text-align: center!important;
  }
  
  #idrzj {
    flex-direction: column-reverse!important;
    padding: 0!important;
  }

  #iqwkd {
    border-radius: 50px 50px 0 0!important;
    padding: 200px 50px 200px 50px!important;
  }

  #i2s3c p{
     margin: 0!important;
  }

  /*what we do*/
  html body.aec_home .content.clearfix:after {
   bottom: 1450px !important;
   width: 500px !important;
   right: -150px !important;
  }

  #iz4fu, #iqwkm, #ib1hr{
    height: unset!important;
  }
}




@media(max-width: 640px){

  /*banner*/
  div#iswjt {
    width: 100%!important;

    *{
      text-align: center!important;
    }
  }
  
  #iyb3g {
    padding: 0 20px!important;
  }
  #iji32 {
    font-size: 42px!important;
  }


  /*under ban*/
  #i6wg {
    padding: 70px 10px !important;
  }
  #ius0l {
    font-size: 38px !important;
  }

  /*mission*/
  #i4wbl {
    padding: 70px 20px !important;
  }
  
  #iqmxf {
    font-size: 38px !important;
  }


  /*what we do*/
  #idm3f {
    padding: 70px 20px 0 !important;
  }
  
  #iuamj {
    font-size: 38px !important;
  }
  
  #ivg35 {
    padding: 50px 10px 70px !important;
  }

  #ikko7, #iv404, #iacqk {
    font-size: 18px!important;
  }

  #iuhre, #ilml8, #i5bpm{
    padding: 30px 20px!important;
  }
  
  html body.aec_home .row.colx3x {
    flex-direction: column!important;

    .col.cell{
      width: 100%!important;
    }
  }


  /*cta bot*/
  html body.aec_home #cta_Sec {
    padding: 70px 10px !important;
  }

  div#ik3uh * {
    font-size: 38px !important;
  }

  #ik3uh p{
    margin-bottom: 0!important;
  }
  
}





/*CODES FOR HOME PAGE ----------------------------------------------------------*/











































.nav-item.active {
    opacity: .5;
}


/* HEADER NAV CODES ----------------------------------------------------------*/
#headerCustom {
    background: #2f5b1f;
    z-index: 4 !important;
    align-items: center;
    justify-content: center;
    height: fit-content;
    padding: 50px 100px;

    
    /*logo*/
    #idq52 {
      height: 90px;
    }
    /*logo container*/
    #i6ami {
      width: fit-content;
      flex: unset;
    }

    a#homeLink:hover img {
      opacity: .75;
      transition:.4s ease;
    }
    
    .navbar{
      height: 100%;
    }

    .navbar-nav {
      display: flex;
      flex-direction: row;
      gap: 50px;
      justify-content: flex-end;
      width: 100%;
      align-items: center;

      li:first-child{
        display: none;
      }

      a{
        text-decoration: none!important;
        color: white!important;
        transition: .2s ease;

        &:hover{
          opacity: .8;
        }
      }
    }

    .navbar-nav li:last-child a {
      display: flex;
      height: 60px;
      align-items: center;
      justify-content: center;
      padding: 0 40px;
      border-radius: 15px;
      color: #2f5b1f !important;
      background: #ffffff;
    }

    .navbar-nav li:last-child a:hover {
      border-top-left-radius: 100px;
      border-bottom-right-radius: 100px;
    }

    
 }





.burger-menu {
  cursor: pointer;
  z-index: 1000; /* Ensure it's on top */
  position: absolute;
  top: 30px;
  right: 0;
}

.burger-menu .line {
  width: 25px;
  height: 3px;
  background-color: white;
  margin: 5px;
  transition: all 0.3s ease;
}

/* Media query for screens less than or equal to 1320px */
@media screen and (max-width: 1320px) {
  
  html body #headerCustom {
    padding: 25px 50px!important;
  }
    
  #headerCustom .nav.navbar-nav {
    flex-direction: column;
    position: fixed;
    right: -100%; /* Initially off-screen */
    top: 0;
    height: 100vh;
    width: 250px;
    background-color: #1e3b13;
    padding: 60px 20px;
    z-index: 999;
  }

  /* Class toggled by jQuery to show the side nav */
  html body #headerCustom .navbar-nav.active {
    right: 0;
    max-width: 280px;
    gap: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    transition: right 0.3s ease-in-out;
    padding-top: 100px;
  }

  #headerCustom .nav-item {
    margin: 15px 0;
  }

  #headerCustom .navbar {
    justify-content: space-between;
  }

  html body #headerCustom .navbar-nav li:first-child{
    display: block!important;
  }

  .burger-menu.openX .line:first-child{
    rotate: 45deg;
  }

  .burger-menu.openX .line:nth-child(2){
    opacity: 0;
  }

  .burger-menu.openX .line:last-child{
    rotate: -45deg;
    margin-top: -16px;
  }
}



@media(max-width: 640px){
  
  html body #headerCustom {
    padding: 25px 5px !important;
  }

  html body #headerCustom #idq52 {
    height: 65px!important;
  }

  .burger-menu {
    right: 5px;
    top: 20px;
  }
}

/* HEADER NAV CODES ----------------------------------------------------------*/











/*CUSTOM FOOTER ----------------------------------------------------------*/
#footerCustom{
  #cell1x{
    width: 40%;
    flex: unset;

    img{
      max-width: 280px;
    }
  }

  #cell2x,#cell3x,#cell4x{
    width: 20%;
    flex: unset;
  }

  .navbar{
    padding: 0;

    .navbar-nav a{
      color: white;
      text-decoration: none;
      display: block;
      margin-bottom: 10px;
      text-transform: uppercase;
      transition: .4s ease;
    }

    .navbar-nav a:hover{
      color: #81c535;
    }
  }

  div#cell3x a {
    display: block;
    margin-bottom: 10px;
    text-decoration: none;
    transition: .4s ease;
  }

  div#cell3x a:hover{
    color: #81c535;
  }

  div#tcpcx {
    border-top: 1px solid #fff;
    margin-top: 50px;
    padding-top: 50px;
  }
  
}


@media(max-width: 1280px){
  #footerCustom {
    padding: 150px 20px!important;
  }
}

@media(max-width: 1024px){
  #footerCustom {
    padding: 100px 20px!important;

    #cell1x {
        width: 100%!important;
        display: flex!important;
        align-items: center!important;
        justify-content: center!important;
    }

    #i5m876{
      justify-content: center!important;
      gap: 50px;
    }

    #cell2x, #cell3x, #cell4x {
        width: fit-content!important;
        flex: unset!important;
        text-align: center!important;
    }
    
    .navbar {
        justify-content: center!important;
    }
    
  }

}


@media(max-width: 768px){
  #footerCustom #i5m876 {
    flex-direction: column!important;
    align-items: center!important;
  }

  #footerCustom #tcpcx {
    flex-direction: column;
    gap: 20px!important;

    p{
      text-align: center!important;
    }
  }
}
/*CUSTOM FOOTER ----------------------------------------------------------*/






/*CODES FOR SPLASH PAGE ----------------------------------------------------------*/
.aec_splash{
  .site-grid{
    display: flex;
  }
  
  .container-header{
    display: none!important;
  }
  
  .grid-child {
    width: 100%;
    max-width: 100%;
  }

  main{
    margin: 0;
  }

  #imek, #i4yn{
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.5);
  }

  #iatk{
    height: 100vh;
  }

  #iyd1{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
 }
}
/*CODES FOR SPLASH PAGE ----------------------------------------------------------*/