*{
    margin: 0%;
    width: 100%;

}

html {
    width: 100%;
    height: auto;
    margin: 0px;
    background-color: #f4f4f4; 
    display: flex;
}

body {
    width: 100%;
}



.hero {
    width: 100%;

    display: flex;
 
    justify-content: center;
    align-items: center;
}

.esg-container {
    display: flex;
     flex-direction: column;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;

   
 
}
.esg-header {
    display: flex;
    width: 50%;
    justify-content: center;
}

.esg-content {
    display: flex;
    width: 80%;
    justify-content: center;

}

.icon_container {
    display: flex;

    width: 100%;
     background: linear-gradient(90deg, #31914b 0%, #72c769 100%);
     justify-content: center;
     align-items: center;
}

.icon01 {
 
    display: flex;
    width: 80%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
}
.icon01 img {
    display: flex;
    width: 50%;
   
}


.frame_container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 5%;
}

.framer01 {
    width: 80%;
    display: flex;
    flex-direction: row;
}

.framer01 img{
    width: 50%;
    display: flex;
    flex-direction: row;
}

.framer02 {
    width: 80%;
    display: flex;
    flex-direction: row;
}

.framer02 img{
    width: 50%;
    display: flex;
    flex-direction: row;
}

.framer03 {
    width: 80%;
    display: flex;
    flex-direction: row;
}

.framer03 img{
    width: 50%;
    display: flex;
    flex-direction: row;
}


.framer04 {
    width: 80%;
    display: flex;
    flex-direction: row;
}

.framer04 img{
    width: 50%;
    display: flex;
    flex-direction: row;
}
.envir_container {
    margin-top: 5%;
    background-image: url(https://onefreenix.com/greenfactory/assets/img//Bg_envir.png) ;
    background-size: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5%;
}

.envir_content {
    display: flex;
    width: 50%;
    justify-content: center;
    margin-top: 1.5%;

}

.atopic_container {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 1%;
}
.atopic {
    display: flex;
    width: 80%;
}

.acontent {
    display: flex;
    width: 80%;

}


.btopic_container {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 1%;
    
}
.btopic {
    display: flex;
    width: 80%;

}


.bcontent1 {
    display: flex;
    flex-direction: row;
    width: 78%;
    justify-content: center;
    max-width: 100vw;
 
}
.bcontent1 img {
    display: flex;
    width: 50%;
}

.bcontent2 {
    display: flex;
    flex-direction: row;
    width: 80%;
}

.bcontent2 img {
    display: flex;
    width: 50%;
}

.ctopic_container {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 1%;
}

.ctopic01 {
    display: flex;
    width: 50%;
    align-self: start;
    margin-left: 9%;

}

.ccontent1 {
    display: flex;
    flex-direction: row;
    width: 80%;
    justify-content: center ;

}

.ccontent1 img {
    display: flex;
    width: 32%;
}

.ccontent1 {
    display: flex;
    flex-direction: row;
    width: 68%;
}
.ccontent2 {
    display: flex;
    flex-direction: row;
    align-self: start;
    width: 50%;
    margin-left: 17%;
    
}


.ccontent2 img {
    display: flex;
    width: 50%;
   
}



.ctopic02 {
    display: flex;
    width: 50%;
    align-self: start;
    margin-left: 17%;

}


.ccontent3 {
    display: flex;
    flex-direction: row;
    width: 70%;
    justify-content: center;
}


.ccontent3 img {
    display: flex;
    width: 31%;
}


.socail_container {
    margin-top: 5%;
    background-image: url(https://onefreenix.com/greenfactory/assets/img/Bg_socail.png) ;
    background-size: 100%;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5%;
 
}

.socail_content {
    display: flex;
    width: 70%;
    justify-content: center;
    margin-top: 1.5%;
    margin-left: 17%;
    

}


.dtopic {
    display: flex;
    width: 50%;
    padding-right: 33%;
}

.dcontent {
    display: flex;
    width: 80%;

}

.econtentr01 {
    display: flex;
    flex-direction: row;
    width: 80%;
}
.econtentr02 {
    display: flex;
    flex-direction: row;
    width: 80%;
}


.ftopic {
    display: flex;
    width: 65%;
    padding-right: 18%;

}
.fcontent {
    display: flex;
    flex-direction: row;
    width: 80%;

}

.fcontent img {
    display: flex;
    width: 50%;
}


.gcontent3 {
    display: flex;
    flex-direction: row;
    width: 80%;
    justify-content: center;
}


.gcontent3 img {
    display: flex;
    width: 34%;
}

.gover_container {
    margin-top: 5%;
    background-image: url(https://onefreenix.com/greenfactory/assets/img/Bg_gov.png) ;
    background-size: 100%;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5%;
 
}

.hcontent {
    display: flex;
    width: 80%;

}
.hcontent_mo {
    display: none;
}

.jcontent {
    display: flex;
    width: 30%;
    padding-right: 43%;
    padding-top: 2%;

}

.kcontent {
    display: flex;
    width: 80%;
    gap: 2%;
    padding: 1%;
}

.kcontent img{
    display: flex;
    width: 50%;
   
}

@media (max-width: 600px) {


.framer01 {
    width: 80%;
    display: flex;
    flex-direction: column;
}

.framer01 img{
    width: 100%;
    display: flex;

}

.framer02 {
    width: 80%;
    display: flex;
    flex-direction: column;
}

.framer02 img{
    width: 100%;
    display: flex;

}

.framer03 {
    width: 80%;
    display: flex;
    flex-direction: column;
}

.framer03 img{
    width: 100%;
    display: flex;

}


.framer04 {
    width: 80%;
    display: flex;
    flex-direction: column;
}

.framer04 img{
    width: 100%;
    display: flex;

}    

.icon01 {
    width: 80%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.icon01 img {
    width: 50%;
    display: flex;

}




.bcontent1 {
    display: flex;
    flex-direction: column;
    width: 80%;
}


.bcontent2 {
    display: flex;
    flex-direction: column;
    width: 80%;
}


.bcontent1 img {
    display: flex;
    width: 100%;
}


.bcontent2 img {
    display: flex;
    width: 100%;
}

.econtentr01 {
    display: flex;
    flex-direction: column;
    width: 80%;
}
.econtentr02 {
    display: flex;
    flex-direction: column;
    width: 80%;
}


.hcontent {
    display: none;
  
    width: 80%;

}
.hcontent_mo {
    display: flex;
    width: 80%;
}


.jcontent {
    display: flex;
    width: 80%;
    padding: 0;
   

}

.kcontent {
    display: flex;
    flex-direction: column;
    width: 80%;
    gap: 5%;
   
}

.kcontent img{
    display: flex;
    width: 100%;
    margin-top: 2%;

   
}
}