.energy-solution-mobile, .modul-mobile{
    display: none;
}
.certification-box p{
    margin-bottom: 2%;
}
.certification-content{
    margin-top: 3%;
    display: flex;
    justify-content: space-between;
    gap: 11.5%;
}

.certification-box{
    width: 50%;
}

.inaction, .inaction-sustainability{
    margin-top: 8%;
    margin-bottom: 12.1%;
}
.news-action{
    margin-top: 3%;
    display: flex;
    gap: 3%;
}

.susdev, .susdev-section{
    margin-top: 7.5%;
}
.sus-tit{
    margin-top: 0.5%;
    margin-bottom: 3.5%;
}

.sus-content{
    margin-top: 2.5%;
    display: flex;
    gap: 11%;
}
.box-sus-content, .box-sus-content-2{
    width: 50%;
}
.content-sustain {
  display: flex;
  margin-top: 3%;
  padding-bottom: 3%;
}
.arrow-sus img{
    width: 50%;
    display: none;
}
.arrow-sus{
    align-self: center;
    width: 5%;
}
.sus-content-title{
    margin-bottom: 8%;
}
.ee-content-title{
    margin-top: 6%;
    margin-bottom: 7%;
}
.content-sustain.active .content-title {
    color: #ED4F18;
}

.content-sustain.active .arrow-sus img {
    display: block;
}
.box-desc-sus{
    display: none;
}
.box-desc-sus.active{
    display: block;
    padding-left: 3%;
}

.road-zero-section{
    display: flex;
    justify-content: space-between;
}

.box-road-zero{
    width: 50%;
}
.box-road-zero img{
    margin-top: -4%;
    width: 100%;
}
.text-sustain{
    width: 80%;
}
.text-de{
    width: 90%;
}
.road-zero{
    margin-bottom: 7.5%;
}

.iso, .iso-2{
    display: flex;
    justify-content: space-between;
    gap: 5%;
}
.iso-2{
    margin: 0 0 7%;
}
.iso-box, .iso-box-2, .prop-box, .prop-box-2{
    width: 50%;
}
.iso-box img, .iso-box-2 img{
    width: 92%;
}
.prop-box-2 img{
    margin-top: 11%;
    margin-left: -5%;
    width: 97%;
}
.prop-box img{
    width: 97%;
}
.prop-box img, .iso-box img{
    margin-left: 7.3%;
}
.iso-box-2 img{
    margin-top: 5%;
}
.prop-box-2 p, .iso-box-2 p{
 margin-left: 12%;
}
 .iso-box-2 h3{
    margin-top: 15%;
    margin-left: 12%;
    margin-bottom: 2.5%;
}
.prop-box-2 h3{
    margin-top: 21%;
    margin-left: 12%;
    margin-bottom: 1%;
}
 .iso-box h3{
    margin-top: 8%;
    margin-left: 5%;
    margin-bottom: 2.5%;
}
.prop-box h3{
    margin-top: 10%;
    margin-left: 4%;
}
.iso-box p{
    margin-left: 5%;
}
.prop-box p{
    margin-left: 5%;
}

.text-iso{
    margin-top: 7.5%;
    width: 80%;
}

.certification{
    margin-top: 7.4%;
  margin-bottom: -1.5%;
}

.logo-sustain-1 {
  width: 5.5%;
  height: 60%;
}
.logo-sustain-2 {
  width: 5.5%;
  height: 58%;
}
.logo-sustain-3 {
  width: 5.5%;
  height: 60%;
  margin-top: 0.6%;
}
.logo-sustain-4{
    width: 10%;
    height: 60%;
}
.logo-sustain-5 {
  width: 6%;
  height: 60%;
  margin-top: -0.5%;
}
.logo-sustain-6 {
  margin-top: 1.2%;
  width: 16%;
  height: 60%;
}
/* vpp page */

.vpp-section{
    margin-top: 11%;
    margin-bottom: 8%;
    display: flex;
    justify-content: space-between;
    gap: 8%;
}.plat-ren{
    margin-bottom: 8%;
    display: flex;
    justify-content: space-between;
    gap: 8%;
}

.tam-description, .vpp-help, .ee-help{
    margin-top: 10.5%;
    margin-bottom: 8%;
    display: flex;
    justify-content: space-between;
    gap: 8%;
}
.tam-description{
    margin-top: 10.5%;
    margin-bottom: -1%;
    display: flex;
    justify-content: space-between;
    gap: 11%;
}
.vpp-box{
    width: 50%;
}
.plat-ren-img{
    width: 100%;
}

.vpp-box-img{
    width: 92%;
}
.vpp-box-img-2{
    width: 100%;
}
.logo-tam{
    width: 100%;
    margin-top: 17%;
}
.vpp-box h3{
    margin-bottom: 2%;
}
.vpp-box h4{
    margin-bottom: 8%;
}
.vpp-box p{
    width: 100%;
}

.vpp-data{
    margin-top: 8%;
    display: flex;
    gap: 14%;
}
.vpp-box-data{
    width: 100%;
}
.vpp-box-data h2{
    margin-top: 0.5%;
}

.margin-top{
    margin-top: 10%
}
.modulations-section{
    margin-top: 3%;
    display: flex;
    justify-content: space-between;
    gap: 3%;
}
.box-modul{
    padding: 2% 2% 2% 2%;
    background-color: #F8F8F8;
    width: 100%;
}

/* banner vpp */

.banner-de{
    margin: -1% 0;
    background-image: url('/wp-content/themes/Aden%20services/assets/digital-banner.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 6.5% 0 8.5% 0;
}
.banner-vpp{
    margin: 8% 0;
    background-image: url('/wp-content/themes/Aden%20services/assets/banner-vpp.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding: 6.5% 0 8.5% 0;
}

.text-banner-vpp {
    margin-top: 5%;
    width: 39%;
  }

.top-minus-3{
    margin-top: -1%;
}
.top-minus-2{
    margin-top: -4%;
}
.top-minus{
    margin-top: -7%;
}
.top-minus-content{
    margin-top: -3%;
}

.energy-solution{
    margin-top: 8%;
    margin-bottom: 8%;
}
.re-energy-solution{
    margin-top: -15%;
    margin-bottom: 8%;
}
.energy-solution-section{
    margin-top: 4%;
    display: flex;
    gap: 5%;
}
.energy-solution-box{
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
}
.energy-solution-box img{
    width: 100%;
    height: 100%;
    transition: 0.3s ease-in-out;
    position: relative;
    z-index: 0;
}
.energy-solution-box:hover img{
    transform: scale(1.2);
}
.text-solution{
  position: absolute;
  bottom: 5%;
  left: 5%;
}

/* remote-sites */

.quotes-remote-block-left{
    padding: 5%;
    background-color: rgba(255, 255, 255, 0.9);
    margin-left: 13%;
    margin-top: -30.3%;
    width: 32%;
    position: relative;
    z-index: 100;
    float: left;
    margin-right: 8%;
    height: 13.2vw;   
}


/* Smart Camp - Section 2 */
.smart-camp-content {
  display: flex;
}

.text-slide {
  width: 100%;
}

.smart-camp-image img {
  margin-left: 16%;
  margin-top: -16%;
}

.border-industries {
  margin-top: -10%;
  margin-right: 16%;
}

.border-slider-industries{
    margin-top: 9.4%;
}
/* Key Expertise - Section 3*/
.key-expertiest-title {
  display: flex;
}

.key-expertiese-left-title {
  margin-left: 6%;
  width: 60%;
}

.key-expertiese-right-title {
    margin-top: -2%;
  margin-left: -10.5%;
  width: 40%;
}
.tam-right {
    margin-top: -2%;
  margin-left: -12.5%;
  width: 35%;
}

.benefits-content, .expertise-content, .re-benefits-content {
    margin-top: 3%;
    margin-bottom: 10%;
    display: grid;
    gap: 4%;
  grid-template-columns: repeat(3, 30.5%);
}

.diff-box {
    margin-bottom: 4%;
    padding: 8% 6% 0% 10%;
    background-color: #F8F8F8;
  }
.diff-box-about {
    margin-bottom: 4%;
    padding: 8% 6% 0% 10%;
    background-color: #F8F8F8;
  }
.box-expertise{
  margin-bottom: 8%;
  padding: 2% 6% 3% 6%;
  background-color: #F8F8F8;
}

.diff-title-tam {
  width: 100%;
}
.diff-title {
  margin-top: 7%;
  width: 80%;
}
.w-title {
  margin-top: 7%;
  width: 100%;
}

.diff-text{
  margin-bottom: 8%;
}

.diff-text-4{
  margin-top: 7%;
  margin-bottom: 8%;
}


.rtb-title{
  display: flex;
  gap: 2%;
}

.rtb-title-2{
  margin-top: 3%;
}

.border-slider-key-expertiese{
    margin-top: 9%;
    margin-left: -13.5%;
    display: flex;
    gap: 2%;
    width: 50%;
}

.bbb-section{
    display: flex;
}
.bbb-box{
    width: 50%;
}
.bbb-box h3{
    margin-top: 2%;
    margin-bottom: 9%;
}
.bbb-box img{
    margin-top: -12%;
    margin-left: 30%;
    width: 61%;
}
.bbb-box p{
    margin-top: 7%;
}

.hard-services{
    margin-top: 8%;
}
.call-to-action-sustain {
    margin-top: 6%;
    background-image: url('/wp-content/themes/Aden%20services/assets/cta-sustain.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 34vw;
    position: relative; /* Menambahkan properti posisi */
  }
  
  .call-to-action-sustain::after {
    content: '';
    background-color: #283948;
    opacity: 0.4;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
@media(min-width: 640px) and (max-width: 1024px){
    .diff-title{
        width: 79%;
    }
    
    .iso-box h3, .iso-box p{
        margin-left: 0;
    }
}
@media(min-width: 360px) and (max-width: 640px){
    
    .vpp-section{
        margin-top: -17%;
    }
    .hard-services{
        margin-top: 12%;
    }
    .energy-solution{
        margin-top: 22%;
    }
    /* display: none */
    .news-action, .modulations-section, .energy-solution-section{
        display: none;
    }
    .ee-help{
        margin-top: 20.5%;
    }
    /* display: block */
    .modul-mobile {
        display: block;
    }
    /* flex-direction: column */
    .tam-description, .ee-help, .plat-ren, .bbb-section, .key-expertiest-title, .vpp-section, .iso, .certification-content{
        flex-direction: column;
    }
    .iso{
        margin-top: 13%;
    }
    /* flex-direction: column-revrese */

    .diff-box {
        margin-top: 0.2%;
    }
    .vpp-help, .iso-2, .road-zero-section{
        flex-direction: column-reverse;
        gap: 30px;
    }
    .vpp-help{
        margin-top: 25.5%;
        gap: 30px;
    }
    .tam-description{
        margin-top: 11.5%;
        margin-bottom: 19%;
        gap: 30px;
    }
    /* width: 100% */
    .text-sustain, .key-expertiese-right-title, .bbb-box img, .key-expertiese-left-title,.bbb-box,.bbb-box img, .vpp-box p, .vpp-box, .iso-box-2 img, .text-iso, .iso-box img, .iso-box, .iso-box-2, .prop-box, .prop-box-2, .box-road-zero, .certification-box{
        width: 100%;
    }
    
    .prop-box h3{
        margin-top: 5%;
    }
    .prop-box-2 img, .prop-box-2 p, .prop-box h3, .prop-box img, .prop-box p, .prop-box-2 h3, .bbb-box img, .vpp-box h3, .vpp-box h4,.key-expertiese-left-title,.key-expertiese-right-title, .vpp-box p, .iso-box h3, .iso-box p, .iso-box-2 h3, .iso-box-2 p, .iso-box img{
        margin-left: 0;
    }
    .text-banner-vpp{
        width: 93%;
    }
    .key-expertiese-right-title{
        margin: 5% 0;
    }
    .prop-box-2 h3{
        margin-top: 5%;
    }
    .tam-right{
        margin: 5% 0;
        width: 100%;
    }
    .call-to-action-sustain{
        background-image: url(/wp-content/themes/Aden%20services/assets/sustain-cta-mobile.png);
        height: auto;
        padding: 7% 0 12%;
    }
    .susdev{
        margin-top: 10%;
    }
    .susdev-section{
        margin-top: 17%;
    }
    .sus-tit{
        margin-bottom: 9.5%;
    }
    .banner-vpp{
        margin: 20% 0;
        padding: 73% 0 11.5% 0;
        background-image: url('/wp-content/themes/Aden%20services/assets/banner-vpp-mobile.png');
    }
    .banner-de{
        padding: 13.5% 0 98% 0;
        background-image: url('/wp-content/themes/Aden%20services/assets/digital-banner-mobile.png')
    }
    .vpp-data{
        gap: 7%;
    }
    .logo-tam, .bbb-box img{
        margin-top: 0;
    }
    .modul-mobile{
        margin-top: 5%;
        overflow: hidden;
    }
    .box-road-zero img{
        margin: 0% 0;
    }
    .www-mobile, .energy-solution-mobile{
        display: block;
        margin-bottom: 20%;
    }

    .re-benefits-content, .expertise-content{
        margin-top: 3%;
        grid-template-columns: repeat(2, 49%);
    }
    .energy-solution-mobile{
        margin-bottom: 24%;
        overflow: hidden;
        position: relative;
    }
    .plat-ren-img{
 width: 116%;
    margin-left: -7%;
    margin-bottom: -26%;
    }
    .box-expertise{
        margin-bottom: -5%;
    }
    .re-energy-solution{
        margin-top: 18%;
    }
    .road-zero{
        margin: 25% 0;
    }
    .iso-box-2 img{
        margin-top: 17%;
    }
    .iso-box-2 h3{
        margin-top: 6%;
        margin-bottom: 2.5%;
    }
    .inaction{
        margin-top: 25%;
    }
    .inaction-sustainability{
        margin-top: 25%;
    }
    .box-modul{
        padding: 9% 2% 12% 5%;
        background-color: #F8F8F8;
        width: 100%;
    }
    .energy-solution-box:hover img{
        transform: none;
    }
    
    .plat-ren {
  margin-bottom: 8%;
  margin-top: 17%;
  gap: 30px
}
}