@import"https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap";

* {
    font-family: Poppins, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html,
body {
    max-width: 100%;
    overflow-x: hidden
}

body::-webkit-scrollbar {
    display: none
}

button {
    outline: none;
    border: none
}

a {
    text-decoration: none !important
}

.color-base-green {
    color: #0a9e33
}

.color-base-blue {
    color: #edf852
}

.color-base-black {
    color: #252525
}

.color-base-white {
    color: #fff
}

.color-base-green2 {
    color: #84ffa6
}

.color-base-grey {
    color: #757575
}

.bg-green {
    background-color: #f5f5f5
}

.bg-blue {
    background-color: #e9e9e9
}

.gradient-100 {
    background: var(--Gradient-100, linear-gradient(270deg, #35BF5B 0%, #0A9E33 100%))
}

.text-xs-reguler {
    font-size: 16px;
    font-weight: 400
}

.text-xs-medium {
    font-size: 16px;
    font-weight: 500
}

.text-xs-bold {
    font-size: 16px;
    font-weight: 700
}

.text-sm-reguler {
    font-size: 18px;
    font-weight: 400
}

.text-sm-medium {
    font-size: 18px;
    font-weight: 500
}

.text-sm-semibold {
    font-size: 18px;
    font-weight: 600
}

.text-m-medium {
    font-size: 24px;
    font-weight: 500
}

.text-m-bold {
    font-size: 24px;
    font-weight: 700
}

.text-l-bold {
    font-size: 26px;
    font-weight: 700
}

.text-heading-2 {
    font-size: 36px;
    font-weight: 400
}

.text-heading-1 {
    font-size: 38px;
    font-weight: 600
}

.ln-normal {
    line-height: normal
}

.fw-600 {
    font-weight: 600
}

.text-align-justify {
    text-align: justify !important
}

.lh-1 {
    line-height: 1px
}

.lh-2 {
    line-height: 2px
}

.lh-3 {
    line-height: 3px
}

.lh-4 {
    line-height: 4px
}

.lh-5 {
    line-height: 5px
}

.lh-6 {
    line-height: 6px
}

.lh-7 {
    line-height: 7px
}

.lh-8 {
    line-height: 8px
}

.lh-9 {
    line-height: 9px
}

.lh-10 {
    line-height: 10px
}

.lh-11 {
    line-height: 11px
}

.lh-12 {
    line-height: 12px
}

.lh-13 {
    line-height: 13px
}

.lh-14 {
    line-height: 14px
}

.lh-15 {
    line-height: 15px
}

.lh-16 {
    line-height: 16px
}

.lh-17 {
    line-height: 17px
}

.lh-18 {
    line-height: 18px
}

.lh-19 {
    line-height: 19px
}

.lh-20 {
    line-height: 20px
}

.lh-21 {
    line-height: 21px
}

.lh-22 {
    line-height: 22px
}

.lh-23 {
    line-height: 23px
}

.lh-24 {
    line-height: 24px
}

.lh-25 {
    line-height: 25px
}

.lh-26 {
    line-height: 26px
}

.lh-27 {
    line-height: 27px
}

.lh-28 {
    line-height: 28px
}

.lh-29 {
    line-height: 29px
}

.lh-30 {
    line-height: 30px
}

.lh-31 {
    line-height: 31px
}

.lh-32 {
    line-height: 32px
}

.lh-33 {
    line-height: 33px
}

.lh-34 {
    line-height: 34px
}

.lh-35 {
    line-height: 35px
}

.lh-36 {
    line-height: 36px
}

.lh-37 {
    line-height: 37px
}

.lh-38 {
    line-height: 38px
}

.lh-39 {
    line-height: 39px
}

.lh-40 {
    line-height: 40px
}

.lh-41 {
    line-height: 41px
}

.lh-42 {
    line-height: 42px
}

.lh-43 {
    line-height: 43px
}

.lh-44 {
    line-height: 44px
}

.lh-45 {
    line-height: 45px
}

.lh-46 {
    line-height: 46px
}

.lh-47 {
    line-height: 47px
}

.lh-48 {
    line-height: 48px
}

.lh-49 {
    line-height: 49px
}

.lh-50 {
    line-height: 50px
}

.lh-51 {
    line-height: 51px
}

.lh-52 {
    line-height: 52px
}

.lh-53 {
    line-height: 53px
}

.lh-54 {
    line-height: 54px
}

.lh-55 {
    line-height: 55px
}

.lh-56 {
    line-height: 56px
}

.lh-57 {
    line-height: 57px
}

.lh-58 {
    line-height: 58px
}

.lh-59 {
    line-height: 59px
}

.lh-60 {
    line-height: 60px
}

.lh-61 {
    line-height: 61px
}

.lh-62 {
    line-height: 62px
}

.lh-63 {
    line-height: 63px
}

.lh-64 {
    line-height: 64px
}

.lh-65 {
    line-height: 65px
}

.lh-66 {
    line-height: 66px
}

.lh-67 {
    line-height: 67px
}

.lh-68 {
    line-height: 68px
}

.lh-69 {
    line-height: 69px
}

.lh-70 {
    line-height: 70px
}

.lh-71 {
    line-height: 71px
}

.lh-72 {
    line-height: 72px
}

.lh-73 {
    line-height: 73px
}

.lh-74 {
    line-height: 74px
}

.lh-75 {
    line-height: 75px
}

.lh-76 {
    line-height: 76px
}

.lh-77 {
    line-height: 77px
}

.lh-78 {
    line-height: 78px
}

.lh-79 {
    line-height: 79px
}

.lh-80 {
    line-height: 80px
}

.lh-81 {
    line-height: 81px
}

.lh-82 {
    line-height: 82px
}

.lh-83 {
    line-height: 83px
}

.lh-84 {
    line-height: 84px
}

.lh-85 {
    line-height: 85px
}

.lh-86 {
    line-height: 86px
}

.lh-87 {
    line-height: 87px
}

.lh-88 {
    line-height: 88px
}

.lh-89 {
    line-height: 89px
}

.lh-90 {
    line-height: 90px
}

.lh-91 {
    line-height: 91px
}

.lh-92 {
    line-height: 92px
}

.lh-93 {
    line-height: 93px
}

.lh-94 {
    line-height: 94px
}

.lh-95 {
    line-height: 95px
}

.lh-96 {
    line-height: 96px
}

.lh-97 {
    line-height: 97px
}

.lh-98 {
    line-height: 98px
}

.lh-99 {
    line-height: 99px
}

.lh-100 {
    line-height: 100px
}

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

.text-center {
    text-align: center
}

.flex {
    display: flex
}

.flex.items-center {
    align-items: center
}

.flex.items-end {
    align-items: end
}

.flex.justify-between {
    justify-content: space-between
}

.w-100 {
    width: 100%
}

.h-100 {
    height: 100%
}

.flex-col-1 {
    display: flex;
    flex-direction: column;
    gap: 1px
}

.flex-col-1.items-center {
    align-items: center
}

.flex-col-1.items-start {
    align-items: start
}

.flex-col-1.justify-center {
    justify-content: center
}

.flex-col-2 {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.flex-col-2.items-center {
    align-items: center
}

.flex-col-2.items-start {
    align-items: start
}

.flex-col-2.justify-center {
    justify-content: center
}

.flex-col-3 {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.flex-col-3.items-center {
    align-items: center
}

.flex-col-3.items-start {
    align-items: start
}

.flex-col-3.justify-center {
    justify-content: center
}

.flex-col-4 {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.flex-col-4.items-center {
    align-items: center
}

.flex-col-4.items-start {
    align-items: start
}

.flex-col-4.justify-center {
    justify-content: center
}

.flex-col-5 {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.flex-col-5.items-center {
    align-items: center
}

.flex-col-5.items-start {
    align-items: start
}

.flex-col-5.justify-center {
    justify-content: center
}

.flex-col-6 {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.flex-col-6.items-center {
    align-items: center
}

.flex-col-6.items-start {
    align-items: start
}

.flex-col-6.justify-center {
    justify-content: center
}

.flex-col-7 {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.flex-col-7.items-center {
    align-items: center
}

.flex-col-7.items-start {
    align-items: start
}

.flex-col-7.justify-center {
    justify-content: center
}

.flex-col-8 {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.flex-col-8.items-center {
    align-items: center
}

.flex-col-8.items-start {
    align-items: start
}

.flex-col-8.justify-center {
    justify-content: center
}

.flex-col-9 {
    display: flex;
    flex-direction: column;
    gap: 9px
}

.flex-col-9.items-center {
    align-items: center
}

.flex-col-9.items-start {
    align-items: start
}

.flex-col-9.justify-center {
    justify-content: center
}

.flex-col-10 {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.flex-col-10.items-center {
    align-items: center
}

.flex-col-10.items-start {
    align-items: start
}

.flex-col-10.justify-center {
    justify-content: center
}

.flex-col-11 {
    display: flex;
    flex-direction: column;
    gap: 11px
}

.flex-col-11.items-center {
    align-items: center
}

.flex-col-11.items-start {
    align-items: start
}

.flex-col-11.justify-center {
    justify-content: center
}

.flex-col-12 {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.flex-col-12.items-center {
    align-items: center
}

.flex-col-12.items-start {
    align-items: start
}

.flex-col-12.justify-center {
    justify-content: center
}

.flex-col-13 {
    display: flex;
    flex-direction: column;
    gap: 13px
}

.flex-col-13.items-center {
    align-items: center
}

.flex-col-13.items-start {
    align-items: start
}

.flex-col-13.justify-center {
    justify-content: center
}

.flex-col-14 {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.flex-col-14.items-center {
    align-items: center
}

.flex-col-14.items-start {
    align-items: start
}

.flex-col-14.justify-center {
    justify-content: center
}

.flex-col-15 {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.flex-col-15.items-center {
    align-items: center
}

.flex-col-15.items-start {
    align-items: start
}

.flex-col-15.justify-center {
    justify-content: center
}

.flex-col-16 {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.flex-col-16.items-center {
    align-items: center
}

.flex-col-16.items-start {
    align-items: start
}

.flex-col-16.justify-center {
    justify-content: center
}

.flex-col-17 {
    display: flex;
    flex-direction: column;
    gap: 17px
}

.flex-col-17.items-center {
    align-items: center
}

.flex-col-17.items-start {
    align-items: start
}

.flex-col-17.justify-center {
    justify-content: center
}

.flex-col-18 {
    display: flex;
    flex-direction: column;
    gap: 18px
}

.flex-col-18.items-center {
    align-items: center
}

.flex-col-18.items-start {
    align-items: start
}

.flex-col-18.justify-center {
    justify-content: center
}

.flex-col-19 {
    display: flex;
    flex-direction: column;
    gap: 19px
}

.flex-col-19.items-center {
    align-items: center
}

.flex-col-19.items-start {
    align-items: start
}

.flex-col-19.justify-center {
    justify-content: center
}

.flex-col-20 {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.flex-col-20.items-center {
    align-items: center
}

.flex-col-20.items-start {
    align-items: start
}

.flex-col-20.justify-center {
    justify-content: center
}

.flex-col-21 {
    display: flex;
    flex-direction: column;
    gap: 21px
}

.flex-col-21.items-center {
    align-items: center
}

.flex-col-21.items-start {
    align-items: start
}

.flex-col-21.justify-center {
    justify-content: center
}

.flex-col-22 {
    display: flex;
    flex-direction: column;
    gap: 22px
}

.flex-col-22.items-center {
    align-items: center
}

.flex-col-22.items-start {
    align-items: start
}

.flex-col-22.justify-center {
    justify-content: center
}

.flex-col-23 {
    display: flex;
    flex-direction: column;
    gap: 23px
}

.flex-col-23.items-center {
    align-items: center
}

.flex-col-23.items-start {
    align-items: start
}

.flex-col-23.justify-center {
    justify-content: center
}

.flex-col-24 {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.flex-col-24.items-center {
    align-items: center
}

.flex-col-24.items-start {
    align-items: start
}

.flex-col-24.justify-center {
    justify-content: center
}

.flex-col-25 {
    display: flex;
    flex-direction: column;
    gap: 25px
}

.flex-col-25.items-center {
    align-items: center
}

.flex-col-25.items-start {
    align-items: start
}

.flex-col-25.justify-center {
    justify-content: center
}

.flex-col-26 {
    display: flex;
    flex-direction: column;
    gap: 26px
}

.flex-col-26.items-center {
    align-items: center
}

.flex-col-26.items-start {
    align-items: start
}

.flex-col-26.justify-center {
    justify-content: center
}

.flex-col-27 {
    display: flex;
    flex-direction: column;
    gap: 27px
}

.flex-col-27.items-center {
    align-items: center
}

.flex-col-27.items-start {
    align-items: start
}

.flex-col-27.justify-center {
    justify-content: center
}

.flex-col-28 {
    display: flex;
    flex-direction: column;
    gap: 28px
}

.flex-col-28.items-center {
    align-items: center
}

.flex-col-28.items-start {
    align-items: start
}

.flex-col-28.justify-center {
    justify-content: center
}

.flex-col-29 {
    display: flex;
    flex-direction: column;
    gap: 29px
}

.flex-col-29.items-center {
    align-items: center
}

.flex-col-29.items-start {
    align-items: start
}

.flex-col-29.justify-center {
    justify-content: center
}

.flex-col-30 {
    display: flex;
    flex-direction: column;
    gap: 30px
}

.flex-col-30.items-center {
    align-items: center
}

.flex-col-30.items-start {
    align-items: start
}

.flex-col-30.justify-center {
    justify-content: center
}

.flex-col-31 {
    display: flex;
    flex-direction: column;
    gap: 31px
}

.flex-col-31.items-center {
    align-items: center
}

.flex-col-31.items-start {
    align-items: start
}

.flex-col-31.justify-center {
    justify-content: center
}

.flex-col-32 {
    display: flex;
    flex-direction: column;
    gap: 32px
}

.flex-col-32.items-center {
    align-items: center
}

.flex-col-32.items-start {
    align-items: start
}

.flex-col-32.justify-center {
    justify-content: center
}

.flex-col-33 {
    display: flex;
    flex-direction: column;
    gap: 33px
}

.flex-col-33.items-center {
    align-items: center
}

.flex-col-33.items-start {
    align-items: start
}

.flex-col-33.justify-center {
    justify-content: center
}

.flex-col-34 {
    display: flex;
    flex-direction: column;
    gap: 34px
}

.flex-col-34.items-center {
    align-items: center
}

.flex-col-34.items-start {
    align-items: start
}

.flex-col-34.justify-center {
    justify-content: center
}

.flex-col-35 {
    display: flex;
    flex-direction: column;
    gap: 35px
}

.flex-col-35.items-center {
    align-items: center
}

.flex-col-35.items-start {
    align-items: start
}

.flex-col-35.justify-center {
    justify-content: center
}

.flex-col-36 {
    display: flex;
    flex-direction: column;
    gap: 36px
}

.flex-col-36.items-center {
    align-items: center
}

.flex-col-36.items-start {
    align-items: start
}

.flex-col-36.justify-center {
    justify-content: center
}

.flex-col-37 {
    display: flex;
    flex-direction: column;
    gap: 37px
}

.flex-col-37.items-center {
    align-items: center
}

.flex-col-37.items-start {
    align-items: start
}

.flex-col-37.justify-center {
    justify-content: center
}

.flex-col-38 {
    display: flex;
    flex-direction: column;
    gap: 38px
}

.flex-col-38.items-center {
    align-items: center
}

.flex-col-38.items-start {
    align-items: start
}

.flex-col-38.justify-center {
    justify-content: center
}

.flex-col-39 {
    display: flex;
    flex-direction: column;
    gap: 39px
}

.flex-col-39.items-center {
    align-items: center
}

.flex-col-39.items-start {
    align-items: start
}

.flex-col-39.justify-center {
    justify-content: center
}

.flex-col-40 {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.flex-col-40.items-center {
    align-items: center
}

.flex-col-40.items-start {
    align-items: start
}

.flex-col-40.justify-center {
    justify-content: center
}

.flex-col-41 {
    display: flex;
    flex-direction: column;
    gap: 41px
}

.flex-col-41.items-center {
    align-items: center
}

.flex-col-41.items-start {
    align-items: start
}

.flex-col-41.justify-center {
    justify-content: center
}

.flex-col-42 {
    display: flex;
    flex-direction: column;
    gap: 42px
}

.flex-col-42.items-center {
    align-items: center
}

.flex-col-42.items-start {
    align-items: start
}

.flex-col-42.justify-center {
    justify-content: center
}

.flex-col-43 {
    display: flex;
    flex-direction: column;
    gap: 43px
}

.flex-col-43.items-center {
    align-items: center
}

.flex-col-43.items-start {
    align-items: start
}

.flex-col-43.justify-center {
    justify-content: center
}

.flex-col-44 {
    display: flex;
    flex-direction: column;
    gap: 44px
}

.flex-col-44.items-center {
    align-items: center
}

.flex-col-44.items-start {
    align-items: start
}

.flex-col-44.justify-center {
    justify-content: center
}

.flex-col-45 {
    display: flex;
    flex-direction: column;
    gap: 45px
}

.flex-col-45.items-center {
    align-items: center
}

.flex-col-45.items-start {
    align-items: start
}

.flex-col-45.justify-center {
    justify-content: center
}

.flex-col-46 {
    display: flex;
    flex-direction: column;
    gap: 46px
}

.flex-col-46.items-center {
    align-items: center
}

.flex-col-46.items-start {
    align-items: start
}

.flex-col-46.justify-center {
    justify-content: center
}

.flex-col-47 {
    display: flex;
    flex-direction: column;
    gap: 47px
}

.flex-col-47.items-center {
    align-items: center
}

.flex-col-47.items-start {
    align-items: start
}

.flex-col-47.justify-center {
    justify-content: center
}

.flex-col-48 {
    display: flex;
    flex-direction: column;
    gap: 48px
}

.flex-col-48.items-center {
    align-items: center
}

.flex-col-48.items-start {
    align-items: start
}

.flex-col-48.justify-center {
    justify-content: center
}

.flex-col-49 {
    display: flex;
    flex-direction: column;
    gap: 49px
}

.flex-col-49.items-center {
    align-items: center
}

.flex-col-49.items-start {
    align-items: start
}

.flex-col-49.justify-center {
    justify-content: center
}

.flex-col-50 {
    display: flex;
    flex-direction: column;
    gap: 50px
}

.flex-col-50.items-center {
    align-items: center
}

.flex-col-50.items-start {
    align-items: start
}

.flex-col-50.justify-center {
    justify-content: center
}

.flex-col-51 {
    display: flex;
    flex-direction: column;
    gap: 51px
}

.flex-col-51.items-center {
    align-items: center
}

.flex-col-51.items-start {
    align-items: start
}

.flex-col-51.justify-center {
    justify-content: center
}

.flex-col-52 {
    display: flex;
    flex-direction: column;
    gap: 52px
}

.flex-col-52.items-center {
    align-items: center
}

.flex-col-52.items-start {
    align-items: start
}

.flex-col-52.justify-center {
    justify-content: center
}

.flex-col-53 {
    display: flex;
    flex-direction: column;
    gap: 53px
}

.flex-col-53.items-center {
    align-items: center
}

.flex-col-53.items-start {
    align-items: start
}

.flex-col-53.justify-center {
    justify-content: center
}

.flex-col-54 {
    display: flex;
    flex-direction: column;
    gap: 54px
}

.flex-col-54.items-center {
    align-items: center
}

.flex-col-54.items-start {
    align-items: start
}

.flex-col-54.justify-center {
    justify-content: center
}

.flex-col-55 {
    display: flex;
    flex-direction: column;
    gap: 55px
}

.flex-col-55.items-center {
    align-items: center
}

.flex-col-55.items-start {
    align-items: start
}

.flex-col-55.justify-center {
    justify-content: center
}

.flex-col-56 {
    display: flex;
    flex-direction: column;
    gap: 56px
}

.flex-col-56.items-center {
    align-items: center
}

.flex-col-56.items-start {
    align-items: start
}

.flex-col-56.justify-center {
    justify-content: center
}

.flex-col-57 {
    display: flex;
    flex-direction: column;
    gap: 57px
}

.flex-col-57.items-center {
    align-items: center
}

.flex-col-57.items-start {
    align-items: start
}

.flex-col-57.justify-center {
    justify-content: center
}

.flex-col-58 {
    display: flex;
    flex-direction: column;
    gap: 58px
}

.flex-col-58.items-center {
    align-items: center
}

.flex-col-58.items-start {
    align-items: start
}

.flex-col-58.justify-center {
    justify-content: center
}

.flex-col-59 {
    display: flex;
    flex-direction: column;
    gap: 59px
}

.flex-col-59.items-center {
    align-items: center
}

.flex-col-59.items-start {
    align-items: start
}

.flex-col-59.justify-center {
    justify-content: center
}

.flex-col-60 {
    display: flex;
    flex-direction: column;
    gap: 60px
}

.flex-col-60.items-center {
    align-items: center
}

.flex-col-60.items-start {
    align-items: start
}

.flex-col-60.justify-center {
    justify-content: center
}

.flex-col-61 {
    display: flex;
    flex-direction: column;
    gap: 61px
}

.flex-col-61.items-center {
    align-items: center
}

.flex-col-61.items-start {
    align-items: start
}

.flex-col-61.justify-center {
    justify-content: center
}

.flex-col-62 {
    display: flex;
    flex-direction: column;
    gap: 62px
}

.flex-col-62.items-center {
    align-items: center
}

.flex-col-62.items-start {
    align-items: start
}

.flex-col-62.justify-center {
    justify-content: center
}

.flex-col-63 {
    display: flex;
    flex-direction: column;
    gap: 63px
}

.flex-col-63.items-center {
    align-items: center
}

.flex-col-63.items-start {
    align-items: start
}

.flex-col-63.justify-center {
    justify-content: center
}

.flex-col-64 {
    display: flex;
    flex-direction: column;
    gap: 64px
}

.flex-col-64.items-center {
    align-items: center
}

.flex-col-64.items-start {
    align-items: start
}

.flex-col-64.justify-center {
    justify-content: center
}

.flex-col-65 {
    display: flex;
    flex-direction: column;
    gap: 65px
}

.flex-col-65.items-center {
    align-items: center
}

.flex-col-65.items-start {
    align-items: start
}

.flex-col-65.justify-center {
    justify-content: center
}

.flex-col-66 {
    display: flex;
    flex-direction: column;
    gap: 66px
}

.flex-col-66.items-center {
    align-items: center
}

.flex-col-66.items-start {
    align-items: start
}

.flex-col-66.justify-center {
    justify-content: center
}

.flex-col-67 {
    display: flex;
    flex-direction: column;
    gap: 67px
}

.flex-col-67.items-center {
    align-items: center
}

.flex-col-67.items-start {
    align-items: start
}

.flex-col-67.justify-center {
    justify-content: center
}

.flex-col-68 {
    display: flex;
    flex-direction: column;
    gap: 68px
}

.flex-col-68.items-center {
    align-items: center
}

.flex-col-68.items-start {
    align-items: start
}

.flex-col-68.justify-center {
    justify-content: center
}

.flex-col-69 {
    display: flex;
    flex-direction: column;
    gap: 69px
}

.flex-col-69.items-center {
    align-items: center
}

.flex-col-69.items-start {
    align-items: start
}

.flex-col-69.justify-center {
    justify-content: center
}

.flex-col-70 {
    display: flex;
    flex-direction: column;
    gap: 70px
}

.flex-col-70.items-center {
    align-items: center
}

.flex-col-70.items-start {
    align-items: start
}

.flex-col-70.justify-center {
    justify-content: center
}

.flex-col-71 {
    display: flex;
    flex-direction: column;
    gap: 71px
}

.flex-col-71.items-center {
    align-items: center
}

.flex-col-71.items-start {
    align-items: start
}

.flex-col-71.justify-center {
    justify-content: center
}

.flex-col-72 {
    display: flex;
    flex-direction: column;
    gap: 72px
}

.flex-col-72.items-center {
    align-items: center
}

.flex-col-72.items-start {
    align-items: start
}

.flex-col-72.justify-center {
    justify-content: center
}

.flex-col-73 {
    display: flex;
    flex-direction: column;
    gap: 73px
}

.flex-col-73.items-center {
    align-items: center
}

.flex-col-73.items-start {
    align-items: start
}

.flex-col-73.justify-center {
    justify-content: center
}

.flex-col-74 {
    display: flex;
    flex-direction: column;
    gap: 74px
}

.flex-col-74.items-center {
    align-items: center
}

.flex-col-74.items-start {
    align-items: start
}

.flex-col-74.justify-center {
    justify-content: center
}

.flex-col-75 {
    display: flex;
    flex-direction: column;
    gap: 75px
}

.flex-col-75.items-center {
    align-items: center
}

.flex-col-75.items-start {
    align-items: start
}

.flex-col-75.justify-center {
    justify-content: center
}

.flex-col-76 {
    display: flex;
    flex-direction: column;
    gap: 76px
}

.flex-col-76.items-center {
    align-items: center
}

.flex-col-76.items-start {
    align-items: start
}

.flex-col-76.justify-center {
    justify-content: center
}

.flex-col-77 {
    display: flex;
    flex-direction: column;
    gap: 77px
}

.flex-col-77.items-center {
    align-items: center
}

.flex-col-77.items-start {
    align-items: start
}

.flex-col-77.justify-center {
    justify-content: center
}

.flex-col-78 {
    display: flex;
    flex-direction: column;
    gap: 78px
}

.flex-col-78.items-center {
    align-items: center
}

.flex-col-78.items-start {
    align-items: start
}

.flex-col-78.justify-center {
    justify-content: center
}

.flex-col-79 {
    display: flex;
    flex-direction: column;
    gap: 79px
}

.flex-col-79.items-center {
    align-items: center
}

.flex-col-79.items-start {
    align-items: start
}

.flex-col-79.justify-center {
    justify-content: center
}

.flex-col-80 {
    display: flex;
    flex-direction: column;
    gap: 80px
}

.flex-col-80.items-center {
    align-items: center
}

.flex-col-80.items-start {
    align-items: start
}

.flex-col-80.justify-center {
    justify-content: center
}

.flex-col-81 {
    display: flex;
    flex-direction: column;
    gap: 81px
}

.flex-col-81.items-center {
    align-items: center
}

.flex-col-81.items-start {
    align-items: start
}

.flex-col-81.justify-center {
    justify-content: center
}

.flex-col-82 {
    display: flex;
    flex-direction: column;
    gap: 82px
}

.flex-col-82.items-center {
    align-items: center
}

.flex-col-82.items-start {
    align-items: start
}

.flex-col-82.justify-center {
    justify-content: center
}

.flex-col-83 {
    display: flex;
    flex-direction: column;
    gap: 83px
}

.flex-col-83.items-center {
    align-items: center
}

.flex-col-83.items-start {
    align-items: start
}

.flex-col-83.justify-center {
    justify-content: center
}

.flex-col-84 {
    display: flex;
    flex-direction: column;
    gap: 84px
}

.flex-col-84.items-center {
    align-items: center
}

.flex-col-84.items-start {
    align-items: start
}

.flex-col-84.justify-center {
    justify-content: center
}

.flex-col-85 {
    display: flex;
    flex-direction: column;
    gap: 85px
}

.flex-col-85.items-center {
    align-items: center
}

.flex-col-85.items-start {
    align-items: start
}

.flex-col-85.justify-center {
    justify-content: center
}

.flex-col-86 {
    display: flex;
    flex-direction: column;
    gap: 86px
}

.flex-col-86.items-center {
    align-items: center
}

.flex-col-86.items-start {
    align-items: start
}

.flex-col-86.justify-center {
    justify-content: center
}

.flex-col-87 {
    display: flex;
    flex-direction: column;
    gap: 87px
}

.flex-col-87.items-center {
    align-items: center
}

.flex-col-87.items-start {
    align-items: start
}

.flex-col-87.justify-center {
    justify-content: center
}

.flex-col-88 {
    display: flex;
    flex-direction: column;
    gap: 88px
}

.flex-col-88.items-center {
    align-items: center
}

.flex-col-88.items-start {
    align-items: start
}

.flex-col-88.justify-center {
    justify-content: center
}

.flex-col-89 {
    display: flex;
    flex-direction: column;
    gap: 89px
}

.flex-col-89.items-center {
    align-items: center
}

.flex-col-89.items-start {
    align-items: start
}

.flex-col-89.justify-center {
    justify-content: center
}

.flex-col-90 {
    display: flex;
    flex-direction: column;
    gap: 90px
}

.flex-col-90.items-center {
    align-items: center
}

.flex-col-90.items-start {
    align-items: start
}

.flex-col-90.justify-center {
    justify-content: center
}

.flex-col-91 {
    display: flex;
    flex-direction: column;
    gap: 91px
}

.flex-col-91.items-center {
    align-items: center
}

.flex-col-91.items-start {
    align-items: start
}

.flex-col-91.justify-center {
    justify-content: center
}

.flex-col-92 {
    display: flex;
    flex-direction: column;
    gap: 92px
}

.flex-col-92.items-center {
    align-items: center
}

.flex-col-92.items-start {
    align-items: start
}

.flex-col-92.justify-center {
    justify-content: center
}

.flex-col-93 {
    display: flex;
    flex-direction: column;
    gap: 93px
}

.flex-col-93.items-center {
    align-items: center
}

.flex-col-93.items-start {
    align-items: start
}

.flex-col-93.justify-center {
    justify-content: center
}

.flex-col-94 {
    display: flex;
    flex-direction: column;
    gap: 94px
}

.flex-col-94.items-center {
    align-items: center
}

.flex-col-94.items-start {
    align-items: start
}

.flex-col-94.justify-center {
    justify-content: center
}

.flex-col-95 {
    display: flex;
    flex-direction: column;
    gap: 95px
}

.flex-col-95.items-center {
    align-items: center
}

.flex-col-95.items-start {
    align-items: start
}

.flex-col-95.justify-center {
    justify-content: center
}

.flex-col-96 {
    display: flex;
    flex-direction: column;
    gap: 96px
}

.flex-col-96.items-center {
    align-items: center
}

.flex-col-96.items-start {
    align-items: start
}

.flex-col-96.justify-center {
    justify-content: center
}

.flex-col-97 {
    display: flex;
    flex-direction: column;
    gap: 97px
}

.flex-col-97.items-center {
    align-items: center
}

.flex-col-97.items-start {
    align-items: start
}

.flex-col-97.justify-center {
    justify-content: center
}

.flex-col-98 {
    display: flex;
    flex-direction: column;
    gap: 98px
}

.flex-col-98.items-center {
    align-items: center
}

.flex-col-98.items-start {
    align-items: start
}

.flex-col-98.justify-center {
    justify-content: center
}

.flex-col-99 {
    display: flex;
    flex-direction: column;
    gap: 99px
}

.flex-col-99.items-center {
    align-items: center
}

.flex-col-99.items-start {
    align-items: start
}

.flex-col-99.justify-center {
    justify-content: center
}

.flex-col-100 {
    display: flex;
    flex-direction: column;
    gap: 100px
}

.flex-col-100.items-center {
    align-items: center
}

.flex-col-100.items-start {
    align-items: start
}

.flex-col-100.justify-center {
    justify-content: center
}

.flex-row-1 {
    display: flex;
    flex-direction: row;
    gap: 1px
}

.flex-row-1.items-center {
    align-items: center
}

.flex-row-1.items-start {
    align-items: start
}

.flex-row-1.justify-center {
    justify-content: center
}

.flex-row-2 {
    display: flex;
    flex-direction: row;
    gap: 2px
}

.flex-row-2.items-center {
    align-items: center
}

.flex-row-2.items-start {
    align-items: start
}

.flex-row-2.justify-center {
    justify-content: center
}

.flex-row-3 {
    display: flex;
    flex-direction: row;
    gap: 3px
}

.flex-row-3.items-center {
    align-items: center
}

.flex-row-3.items-start {
    align-items: start
}

.flex-row-3.justify-center {
    justify-content: center
}

.flex-row-4 {
    display: flex;
    flex-direction: row;
    gap: 4px
}

.flex-row-4.items-center {
    align-items: center
}

.flex-row-4.items-start {
    align-items: start
}

.flex-row-4.justify-center {
    justify-content: center
}

.flex-row-5 {
    display: flex;
    flex-direction: row;
    gap: 5px
}

.flex-row-5.items-center {
    align-items: center
}

.flex-row-5.items-start {
    align-items: start
}

.flex-row-5.justify-center {
    justify-content: center
}

.flex-row-6 {
    display: flex;
    flex-direction: row;
    gap: 6px
}

.flex-row-6.items-center {
    align-items: center
}

.flex-row-6.items-start {
    align-items: start
}

.flex-row-6.justify-center {
    justify-content: center
}

.flex-row-7 {
    display: flex;
    flex-direction: row;
    gap: 7px
}

.flex-row-7.items-center {
    align-items: center
}

.flex-row-7.items-start {
    align-items: start
}

.flex-row-7.justify-center {
    justify-content: center
}

.flex-row-8 {
    display: flex;
    flex-direction: row;
    gap: 8px
}

.flex-row-8.items-center {
    align-items: center
}

.flex-row-8.items-start {
    align-items: start
}

.flex-row-8.justify-center {
    justify-content: center
}

.flex-row-9 {
    display: flex;
    flex-direction: row;
    gap: 9px
}

.flex-row-9.items-center {
    align-items: center
}

.flex-row-9.items-start {
    align-items: start
}

.flex-row-9.justify-center {
    justify-content: center
}

.flex-row-10 {
    display: flex;
    flex-direction: row;
    gap: 10px
}

.flex-row-10.items-center {
    align-items: center
}

.flex-row-10.items-start {
    align-items: start
}

.flex-row-10.justify-center {
    justify-content: center
}

.flex-row-11 {
    display: flex;
    flex-direction: row;
    gap: 11px
}

.flex-row-11.items-center {
    align-items: center
}

.flex-row-11.items-start {
    align-items: start
}

.flex-row-11.justify-center {
    justify-content: center
}

.flex-row-12 {
    display: flex;
    flex-direction: row;
    gap: 12px
}

.flex-row-12.items-center {
    align-items: center
}

.flex-row-12.items-start {
    align-items: start
}

.flex-row-12.justify-center {
    justify-content: center
}

.flex-row-13 {
    display: flex;
    flex-direction: row;
    gap: 13px
}

.flex-row-13.items-center {
    align-items: center
}

.flex-row-13.items-start {
    align-items: start
}

.flex-row-13.justify-center {
    justify-content: center
}

.flex-row-14 {
    display: flex;
    flex-direction: row;
    gap: 14px
}

.flex-row-14.items-center {
    align-items: center
}

.flex-row-14.items-start {
    align-items: start
}

.flex-row-14.justify-center {
    justify-content: center
}

.flex-row-15 {
    display: flex;
    flex-direction: row;
    gap: 15px
}

.flex-row-15.items-center {
    align-items: center
}

.flex-row-15.items-start {
    align-items: start
}

.flex-row-15.justify-center {
    justify-content: center
}

.flex-row-16 {
    display: flex;
    flex-direction: row;
    gap: 16px
}

.flex-row-16.items-center {
    align-items: center
}

.flex-row-16.items-start {
    align-items: start
}

.flex-row-16.justify-center {
    justify-content: center
}

.flex-row-17 {
    display: flex;
    flex-direction: row;
    gap: 17px
}

.flex-row-17.items-center {
    align-items: center
}

.flex-row-17.items-start {
    align-items: start
}

.flex-row-17.justify-center {
    justify-content: center
}

.flex-row-18 {
    display: flex;
    flex-direction: row;
    gap: 18px
}

.flex-row-18.items-center {
    align-items: center
}

.flex-row-18.items-start {
    align-items: start
}

.flex-row-18.justify-center {
    justify-content: center
}

.flex-row-19 {
    display: flex;
    flex-direction: row;
    gap: 19px
}

.flex-row-19.items-center {
    align-items: center
}

.flex-row-19.items-start {
    align-items: start
}

.flex-row-19.justify-center {
    justify-content: center
}

.flex-row-20 {
    display: flex;
    flex-direction: row;
    gap: 20px
}

.flex-row-20.items-center {
    align-items: center
}

.flex-row-20.items-start {
    align-items: start
}

.flex-row-20.justify-center {
    justify-content: center
}

.flex-row-21 {
    display: flex;
    flex-direction: row;
    gap: 21px
}

.flex-row-21.items-center {
    align-items: center
}

.flex-row-21.items-start {
    align-items: start
}

.flex-row-21.justify-center {
    justify-content: center
}

.flex-row-22 {
    display: flex;
    flex-direction: row;
    gap: 22px
}

.flex-row-22.items-center {
    align-items: center
}

.flex-row-22.items-start {
    align-items: start
}

.flex-row-22.justify-center {
    justify-content: center
}

.flex-row-23 {
    display: flex;
    flex-direction: row;
    gap: 23px
}

.flex-row-23.items-center {
    align-items: center
}

.flex-row-23.items-start {
    align-items: start
}

.flex-row-23.justify-center {
    justify-content: center
}

.flex-row-24 {
    display: flex;
    flex-direction: row;
    gap: 24px
}

.flex-row-24.items-center {
    align-items: center
}

.flex-row-24.items-start {
    align-items: start
}

.flex-row-24.justify-center {
    justify-content: center
}

.flex-row-25 {
    display: flex;
    flex-direction: row;
    gap: 25px
}

.flex-row-25.items-center {
    align-items: center
}

.flex-row-25.items-start {
    align-items: start
}

.flex-row-25.justify-center {
    justify-content: center
}

.flex-row-26 {
    display: flex;
    flex-direction: row;
    gap: 26px
}

.flex-row-26.items-center {
    align-items: center
}

.flex-row-26.items-start {
    align-items: start
}

.flex-row-26.justify-center {
    justify-content: center
}

.flex-row-27 {
    display: flex;
    flex-direction: row;
    gap: 27px
}

.flex-row-27.items-center {
    align-items: center
}

.flex-row-27.items-start {
    align-items: start
}

.flex-row-27.justify-center {
    justify-content: center
}

.flex-row-28 {
    display: flex;
    flex-direction: row;
    gap: 28px
}

.flex-row-28.items-center {
    align-items: center
}

.flex-row-28.items-start {
    align-items: start
}

.flex-row-28.justify-center {
    justify-content: center
}

.flex-row-29 {
    display: flex;
    flex-direction: row;
    gap: 29px
}

.flex-row-29.items-center {
    align-items: center
}

.flex-row-29.items-start {
    align-items: start
}

.flex-row-29.justify-center {
    justify-content: center
}

.flex-row-30 {
    display: flex;
    flex-direction: row;
    gap: 30px
}

.flex-row-30.items-center {
    align-items: center
}

.flex-row-30.items-start {
    align-items: start
}

.flex-row-30.justify-center {
    justify-content: center
}

.flex-row-31 {
    display: flex;
    flex-direction: row;
    gap: 31px
}

.flex-row-31.items-center {
    align-items: center
}

.flex-row-31.items-start {
    align-items: start
}

.flex-row-31.justify-center {
    justify-content: center
}

.flex-row-32 {
    display: flex;
    flex-direction: row;
    gap: 32px
}

.flex-row-32.items-center {
    align-items: center
}

.flex-row-32.items-start {
    align-items: start
}

.flex-row-32.justify-center {
    justify-content: center
}

.flex-row-33 {
    display: flex;
    flex-direction: row;
    gap: 33px
}

.flex-row-33.items-center {
    align-items: center
}

.flex-row-33.items-start {
    align-items: start
}

.flex-row-33.justify-center {
    justify-content: center
}

.flex-row-34 {
    display: flex;
    flex-direction: row;
    gap: 34px
}

.flex-row-34.items-center {
    align-items: center
}

.flex-row-34.items-start {
    align-items: start
}

.flex-row-34.justify-center {
    justify-content: center
}

.flex-row-35 {
    display: flex;
    flex-direction: row;
    gap: 35px
}

.flex-row-35.items-center {
    align-items: center
}

.flex-row-35.items-start {
    align-items: start
}

.flex-row-35.justify-center {
    justify-content: center
}

.flex-row-36 {
    display: flex;
    flex-direction: row;
    gap: 36px
}

.flex-row-36.items-center {
    align-items: center
}

.flex-row-36.items-start {
    align-items: start
}

.flex-row-36.justify-center {
    justify-content: center
}

.flex-row-37 {
    display: flex;
    flex-direction: row;
    gap: 37px
}

.flex-row-37.items-center {
    align-items: center
}

.flex-row-37.items-start {
    align-items: start
}

.flex-row-37.justify-center {
    justify-content: center
}

.flex-row-38 {
    display: flex;
    flex-direction: row;
    gap: 38px
}

.flex-row-38.items-center {
    align-items: center
}

.flex-row-38.items-start {
    align-items: start
}

.flex-row-38.justify-center {
    justify-content: center
}

.flex-row-39 {
    display: flex;
    flex-direction: row;
    gap: 39px
}

.flex-row-39.items-center {
    align-items: center
}

.flex-row-39.items-start {
    align-items: start
}

.flex-row-39.justify-center {
    justify-content: center
}

.flex-row-40 {
    display: flex;
    flex-direction: row;
    gap: 40px
}

.flex-row-40.items-center {
    align-items: center
}

.flex-row-40.items-start {
    align-items: start
}

.flex-row-40.justify-center {
    justify-content: center
}

.flex-row-41 {
    display: flex;
    flex-direction: row;
    gap: 41px
}

.flex-row-41.items-center {
    align-items: center
}

.flex-row-41.items-start {
    align-items: start
}

.flex-row-41.justify-center {
    justify-content: center
}

.flex-row-42 {
    display: flex;
    flex-direction: row;
    gap: 42px
}

.flex-row-42.items-center {
    align-items: center
}

.flex-row-42.items-start {
    align-items: start
}

.flex-row-42.justify-center {
    justify-content: center
}

.flex-row-43 {
    display: flex;
    flex-direction: row;
    gap: 43px
}

.flex-row-43.items-center {
    align-items: center
}

.flex-row-43.items-start {
    align-items: start
}

.flex-row-43.justify-center {
    justify-content: center
}

.flex-row-44 {
    display: flex;
    flex-direction: row;
    gap: 44px
}

.flex-row-44.items-center {
    align-items: center
}

.flex-row-44.items-start {
    align-items: start
}

.flex-row-44.justify-center {
    justify-content: center
}

.flex-row-45 {
    display: flex;
    flex-direction: row;
    gap: 45px
}

.flex-row-45.items-center {
    align-items: center
}

.flex-row-45.items-start {
    align-items: start
}

.flex-row-45.justify-center {
    justify-content: center
}

.flex-row-46 {
    display: flex;
    flex-direction: row;
    gap: 46px
}

.flex-row-46.items-center {
    align-items: center
}

.flex-row-46.items-start {
    align-items: start
}

.flex-row-46.justify-center {
    justify-content: center
}

.flex-row-47 {
    display: flex;
    flex-direction: row;
    gap: 47px
}

.flex-row-47.items-center {
    align-items: center
}

.flex-row-47.items-start {
    align-items: start
}

.flex-row-47.justify-center {
    justify-content: center
}

.flex-row-48 {
    display: flex;
    flex-direction: row;
    gap: 48px
}

.flex-row-48.items-center {
    align-items: center
}

.flex-row-48.items-start {
    align-items: start
}

.flex-row-48.justify-center {
    justify-content: center
}

.flex-row-49 {
    display: flex;
    flex-direction: row;
    gap: 49px
}

.flex-row-49.items-center {
    align-items: center
}

.flex-row-49.items-start {
    align-items: start
}

.flex-row-49.justify-center {
    justify-content: center
}

.flex-row-50 {
    display: flex;
    flex-direction: row;
    gap: 50px
}

.flex-row-50.items-center {
    align-items: center
}

.flex-row-50.items-start {
    align-items: start
}

.flex-row-50.justify-center {
    justify-content: center
}

.flex-row-51 {
    display: flex;
    flex-direction: row;
    gap: 51px
}

.flex-row-51.items-center {
    align-items: center
}

.flex-row-51.items-start {
    align-items: start
}

.flex-row-51.justify-center {
    justify-content: center
}

.flex-row-52 {
    display: flex;
    flex-direction: row;
    gap: 52px
}

.flex-row-52.items-center {
    align-items: center
}

.flex-row-52.items-start {
    align-items: start
}

.flex-row-52.justify-center {
    justify-content: center
}

.flex-row-53 {
    display: flex;
    flex-direction: row;
    gap: 53px
}

.flex-row-53.items-center {
    align-items: center
}

.flex-row-53.items-start {
    align-items: start
}

.flex-row-53.justify-center {
    justify-content: center
}

.flex-row-54 {
    display: flex;
    flex-direction: row;
    gap: 54px
}

.flex-row-54.items-center {
    align-items: center
}

.flex-row-54.items-start {
    align-items: start
}

.flex-row-54.justify-center {
    justify-content: center
}

.flex-row-55 {
    display: flex;
    flex-direction: row;
    gap: 55px
}

.flex-row-55.items-center {
    align-items: center
}

.flex-row-55.items-start {
    align-items: start
}

.flex-row-55.justify-center {
    justify-content: center
}

.flex-row-56 {
    display: flex;
    flex-direction: row;
    gap: 56px
}

.flex-row-56.items-center {
    align-items: center
}

.flex-row-56.items-start {
    align-items: start
}

.flex-row-56.justify-center {
    justify-content: center
}

.flex-row-57 {
    display: flex;
    flex-direction: row;
    gap: 57px
}

.flex-row-57.items-center {
    align-items: center
}

.flex-row-57.items-start {
    align-items: start
}

.flex-row-57.justify-center {
    justify-content: center
}

.flex-row-58 {
    display: flex;
    flex-direction: row;
    gap: 58px
}

.flex-row-58.items-center {
    align-items: center
}

.flex-row-58.items-start {
    align-items: start
}

.flex-row-58.justify-center {
    justify-content: center
}

.flex-row-59 {
    display: flex;
    flex-direction: row;
    gap: 59px
}

.flex-row-59.items-center {
    align-items: center
}

.flex-row-59.items-start {
    align-items: start
}

.flex-row-59.justify-center {
    justify-content: center
}

.flex-row-60 {
    display: flex;
    flex-direction: row;
    gap: 60px
}

.flex-row-60.items-center {
    align-items: center
}

.flex-row-60.items-start {
    align-items: start
}

.flex-row-60.justify-center {
    justify-content: center
}

.flex-row-61 {
    display: flex;
    flex-direction: row;
    gap: 61px
}

.flex-row-61.items-center {
    align-items: center
}

.flex-row-61.items-start {
    align-items: start
}

.flex-row-61.justify-center {
    justify-content: center
}

.flex-row-62 {
    display: flex;
    flex-direction: row;
    gap: 62px
}

.flex-row-62.items-center {
    align-items: center
}

.flex-row-62.items-start {
    align-items: start
}

.flex-row-62.justify-center {
    justify-content: center
}

.flex-row-63 {
    display: flex;
    flex-direction: row;
    gap: 63px
}

.flex-row-63.items-center {
    align-items: center
}

.flex-row-63.items-start {
    align-items: start
}

.flex-row-63.justify-center {
    justify-content: center
}

.flex-row-64 {
    display: flex;
    flex-direction: row;
    gap: 64px
}

.flex-row-64.items-center {
    align-items: center
}

.flex-row-64.items-start {
    align-items: start
}

.flex-row-64.justify-center {
    justify-content: center
}

.flex-row-65 {
    display: flex;
    flex-direction: row;
    gap: 65px
}

.flex-row-65.items-center {
    align-items: center
}

.flex-row-65.items-start {
    align-items: start
}

.flex-row-65.justify-center {
    justify-content: center
}

.flex-row-66 {
    display: flex;
    flex-direction: row;
    gap: 66px
}

.flex-row-66.items-center {
    align-items: center
}

.flex-row-66.items-start {
    align-items: start
}

.flex-row-66.justify-center {
    justify-content: center
}

.flex-row-67 {
    display: flex;
    flex-direction: row;
    gap: 67px
}

.flex-row-67.items-center {
    align-items: center
}

.flex-row-67.items-start {
    align-items: start
}

.flex-row-67.justify-center {
    justify-content: center
}

.flex-row-68 {
    display: flex;
    flex-direction: row;
    gap: 68px
}

.flex-row-68.items-center {
    align-items: center
}

.flex-row-68.items-start {
    align-items: start
}

.flex-row-68.justify-center {
    justify-content: center
}

.flex-row-69 {
    display: flex;
    flex-direction: row;
    gap: 69px
}

.flex-row-69.items-center {
    align-items: center
}

.flex-row-69.items-start {
    align-items: start
}

.flex-row-69.justify-center {
    justify-content: center
}

.flex-row-70 {
    display: flex;
    flex-direction: row;
    gap: 70px
}

.flex-row-70.items-center {
    align-items: center
}

.flex-row-70.items-start {
    align-items: start
}

.flex-row-70.justify-center {
    justify-content: center
}

.flex-row-71 {
    display: flex;
    flex-direction: row;
    gap: 71px
}

.flex-row-71.items-center {
    align-items: center
}

.flex-row-71.items-start {
    align-items: start
}

.flex-row-71.justify-center {
    justify-content: center
}

.flex-row-72 {
    display: flex;
    flex-direction: row;
    gap: 72px
}

.flex-row-72.items-center {
    align-items: center
}

.flex-row-72.items-start {
    align-items: start
}

.flex-row-72.justify-center {
    justify-content: center
}

.flex-row-73 {
    display: flex;
    flex-direction: row;
    gap: 73px
}

.flex-row-73.items-center {
    align-items: center
}

.flex-row-73.items-start {
    align-items: start
}

.flex-row-73.justify-center {
    justify-content: center
}

.flex-row-74 {
    display: flex;
    flex-direction: row;
    gap: 74px
}

.flex-row-74.items-center {
    align-items: center
}

.flex-row-74.items-start {
    align-items: start
}

.flex-row-74.justify-center {
    justify-content: center
}

.flex-row-75 {
    display: flex;
    flex-direction: row;
    gap: 75px
}

.flex-row-75.items-center {
    align-items: center
}

.flex-row-75.items-start {
    align-items: start
}

.flex-row-75.justify-center {
    justify-content: center
}

.flex-row-76 {
    display: flex;
    flex-direction: row;
    gap: 76px
}

.flex-row-76.items-center {
    align-items: center
}

.flex-row-76.items-start {
    align-items: start
}

.flex-row-76.justify-center {
    justify-content: center
}

.flex-row-77 {
    display: flex;
    flex-direction: row;
    gap: 77px
}

.flex-row-77.items-center {
    align-items: center
}

.flex-row-77.items-start {
    align-items: start
}

.flex-row-77.justify-center {
    justify-content: center
}

.flex-row-78 {
    display: flex;
    flex-direction: row;
    gap: 78px
}

.flex-row-78.items-center {
    align-items: center
}

.flex-row-78.items-start {
    align-items: start
}

.flex-row-78.justify-center {
    justify-content: center
}

.flex-row-79 {
    display: flex;
    flex-direction: row;
    gap: 79px
}

.flex-row-79.items-center {
    align-items: center
}

.flex-row-79.items-start {
    align-items: start
}

.flex-row-79.justify-center {
    justify-content: center
}

.flex-row-80 {
    display: flex;
    flex-direction: row;
    gap: 80px
}

.flex-row-80.items-center {
    align-items: center
}

.flex-row-80.items-start {
    align-items: start
}

.flex-row-80.justify-center {
    justify-content: center
}

.flex-row-81 {
    display: flex;
    flex-direction: row;
    gap: 81px
}

.flex-row-81.items-center {
    align-items: center
}

.flex-row-81.items-start {
    align-items: start
}

.flex-row-81.justify-center {
    justify-content: center
}

.flex-row-82 {
    display: flex;
    flex-direction: row;
    gap: 82px
}

.flex-row-82.items-center {
    align-items: center
}

.flex-row-82.items-start {
    align-items: start
}

.flex-row-82.justify-center {
    justify-content: center
}

.flex-row-83 {
    display: flex;
    flex-direction: row;
    gap: 83px
}

.flex-row-83.items-center {
    align-items: center
}

.flex-row-83.items-start {
    align-items: start
}

.flex-row-83.justify-center {
    justify-content: center
}

.flex-row-84 {
    display: flex;
    flex-direction: row;
    gap: 84px
}

.flex-row-84.items-center {
    align-items: center
}

.flex-row-84.items-start {
    align-items: start
}

.flex-row-84.justify-center {
    justify-content: center
}

.flex-row-85 {
    display: flex;
    flex-direction: row;
    gap: 85px
}

.flex-row-85.items-center {
    align-items: center
}

.flex-row-85.items-start {
    align-items: start
}

.flex-row-85.justify-center {
    justify-content: center
}

.flex-row-86 {
    display: flex;
    flex-direction: row;
    gap: 86px
}

.flex-row-86.items-center {
    align-items: center
}

.flex-row-86.items-start {
    align-items: start
}

.flex-row-86.justify-center {
    justify-content: center
}

.flex-row-87 {
    display: flex;
    flex-direction: row;
    gap: 87px
}

.flex-row-87.items-center {
    align-items: center
}

.flex-row-87.items-start {
    align-items: start
}

.flex-row-87.justify-center {
    justify-content: center
}

.flex-row-88 {
    display: flex;
    flex-direction: row;
    gap: 88px
}

.flex-row-88.items-center {
    align-items: center
}

.flex-row-88.items-start {
    align-items: start
}

.flex-row-88.justify-center {
    justify-content: center
}

.flex-row-89 {
    display: flex;
    flex-direction: row;
    gap: 89px
}

.flex-row-89.items-center {
    align-items: center
}

.flex-row-89.items-start {
    align-items: start
}

.flex-row-89.justify-center {
    justify-content: center
}

.flex-row-90 {
    display: flex;
    flex-direction: row;
    gap: 90px
}

.flex-row-90.items-center {
    align-items: center
}

.flex-row-90.items-start {
    align-items: start
}

.flex-row-90.justify-center {
    justify-content: center
}

.flex-row-91 {
    display: flex;
    flex-direction: row;
    gap: 91px
}

.flex-row-91.items-center {
    align-items: center
}

.flex-row-91.items-start {
    align-items: start
}

.flex-row-91.justify-center {
    justify-content: center
}

.flex-row-92 {
    display: flex;
    flex-direction: row;
    gap: 92px
}

.flex-row-92.items-center {
    align-items: center
}

.flex-row-92.items-start {
    align-items: start
}

.flex-row-92.justify-center {
    justify-content: center
}

.flex-row-93 {
    display: flex;
    flex-direction: row;
    gap: 93px
}

.flex-row-93.items-center {
    align-items: center
}

.flex-row-93.items-start {
    align-items: start
}

.flex-row-93.justify-center {
    justify-content: center
}

.flex-row-94 {
    display: flex;
    flex-direction: row;
    gap: 94px
}

.flex-row-94.items-center {
    align-items: center
}

.flex-row-94.items-start {
    align-items: start
}

.flex-row-94.justify-center {
    justify-content: center
}

.flex-row-95 {
    display: flex;
    flex-direction: row;
    gap: 95px
}

.flex-row-95.items-center {
    align-items: center
}

.flex-row-95.items-start {
    align-items: start
}

.flex-row-95.justify-center {
    justify-content: center
}

.flex-row-96 {
    display: flex;
    flex-direction: row;
    gap: 96px
}

.flex-row-96.items-center {
    align-items: center
}

.flex-row-96.items-start {
    align-items: start
}

.flex-row-96.justify-center {
    justify-content: center
}

.flex-row-97 {
    display: flex;
    flex-direction: row;
    gap: 97px
}

.flex-row-97.items-center {
    align-items: center
}

.flex-row-97.items-start {
    align-items: start
}

.flex-row-97.justify-center {
    justify-content: center
}

.flex-row-98 {
    display: flex;
    flex-direction: row;
    gap: 98px
}

.flex-row-98.items-center {
    align-items: center
}

.flex-row-98.items-start {
    align-items: start
}

.flex-row-98.justify-center {
    justify-content: center
}

.flex-row-99 {
    display: flex;
    flex-direction: row;
    gap: 99px
}

.flex-row-99.items-center {
    align-items: center
}

.flex-row-99.items-start {
    align-items: start
}

.flex-row-99.justify-center {
    justify-content: center
}

.flex-row-100 {
    display: flex;
    flex-direction: row;
    gap: 100px
}

.flex-row-100.items-center {
    align-items: center
}

.flex-row-100.items-start {
    align-items: start
}

.flex-row-100.justify-center {
    justify-content: center
}

.gap-1 {
    gap: 1px
}

.gap-2 {
    gap: 2px
}

.gap-3 {
    gap: 3px
}

.gap-4 {
    gap: 4px
}

.gap-5 {
    gap: 5px
}

.gap-6 {
    gap: 6px
}

.gap-7 {
    gap: 7px
}

.gap-8 {
    gap: 8px
}

.gap-9 {
    gap: 9px
}

.gap-10 {
    gap: 10px
}

.gap-11 {
    gap: 11px
}

.gap-12 {
    gap: 12px
}

.gap-13 {
    gap: 13px
}

.gap-14 {
    gap: 14px
}

.gap-15 {
    gap: 15px
}

.gap-16 {
    gap: 16px
}

.gap-17 {
    gap: 17px
}

.gap-18 {
    gap: 18px
}

.gap-19 {
    gap: 19px
}

.gap-20 {
    gap: 20px
}

.gap-21 {
    gap: 21px
}

.gap-22 {
    gap: 22px
}

.gap-23 {
    gap: 23px
}

.gap-24 {
    gap: 24px
}

.gap-25 {
    gap: 25px
}

.gap-26 {
    gap: 26px
}

.gap-27 {
    gap: 27px
}

.gap-28 {
    gap: 28px
}

.gap-29 {
    gap: 29px
}

.gap-30 {
    gap: 30px
}

.gap-31 {
    gap: 31px
}

.gap-32 {
    gap: 32px
}

.gap-33 {
    gap: 33px
}

.gap-34 {
    gap: 34px
}

.gap-35 {
    gap: 35px
}

.gap-36 {
    gap: 36px
}

.gap-37 {
    gap: 37px
}

.gap-38 {
    gap: 38px
}

.gap-39 {
    gap: 39px
}

.gap-40 {
    gap: 40px
}

.gap-41 {
    gap: 41px
}

.gap-42 {
    gap: 42px
}

.gap-43 {
    gap: 43px
}

.gap-44 {
    gap: 44px
}

.gap-45 {
    gap: 45px
}

.gap-46 {
    gap: 46px
}

.gap-47 {
    gap: 47px
}

.gap-48 {
    gap: 48px
}

.gap-49 {
    gap: 49px
}

.gap-50 {
    gap: 50px
}

.gap-51 {
    gap: 51px
}

.gap-52 {
    gap: 52px
}

.gap-53 {
    gap: 53px
}

.gap-54 {
    gap: 54px
}

.gap-55 {
    gap: 55px
}

.gap-56 {
    gap: 56px
}

.gap-57 {
    gap: 57px
}

.gap-58 {
    gap: 58px
}

.gap-59 {
    gap: 59px
}

.gap-60 {
    gap: 60px
}

.gap-61 {
    gap: 61px
}

.gap-62 {
    gap: 62px
}

.gap-63 {
    gap: 63px
}

.gap-64 {
    gap: 64px
}

.gap-65 {
    gap: 65px
}

.gap-66 {
    gap: 66px
}

.gap-67 {
    gap: 67px
}

.gap-68 {
    gap: 68px
}

.gap-69 {
    gap: 69px
}

.gap-70 {
    gap: 70px
}

.gap-71 {
    gap: 71px
}

.gap-72 {
    gap: 72px
}

.gap-73 {
    gap: 73px
}

.gap-74 {
    gap: 74px
}

.gap-75 {
    gap: 75px
}

.gap-76 {
    gap: 76px
}

.gap-77 {
    gap: 77px
}

.gap-78 {
    gap: 78px
}

.gap-79 {
    gap: 79px
}

.gap-80 {
    gap: 80px
}

.gap-81 {
    gap: 81px
}

.gap-82 {
    gap: 82px
}

.gap-83 {
    gap: 83px
}

.gap-84 {
    gap: 84px
}

.gap-85 {
    gap: 85px
}

.gap-86 {
    gap: 86px
}

.gap-87 {
    gap: 87px
}

.gap-88 {
    gap: 88px
}

.gap-89 {
    gap: 89px
}

.gap-90 {
    gap: 90px
}

.gap-91 {
    gap: 91px
}

.gap-92 {
    gap: 92px
}

.gap-93 {
    gap: 93px
}

.gap-94 {
    gap: 94px
}

.gap-95 {
    gap: 95px
}

.gap-96 {
    gap: 96px
}

.gap-97 {
    gap: 97px
}

.gap-98 {
    gap: 98px
}

.gap-99 {
    gap: 99px
}

.gap-100 {
    gap: 100px
}

.mb-1 {
    margin-bottom: 1px
}

.mb-2 {
    margin-bottom: 2px
}

.mb-3 {
    margin-bottom: 3px
}

.mb-4 {
    margin-bottom: 4px
}

.mb-5 {
    margin-bottom: 5px
}

.mb-6 {
    margin-bottom: 6px
}

.mb-7 {
    margin-bottom: 7px
}

.mb-8 {
    margin-bottom: 8px
}

.mb-9 {
    margin-bottom: 9px
}

.mb-10 {
    margin-bottom: 10px
}

.mb-11 {
    margin-bottom: 11px
}

.mb-12 {
    margin-bottom: 12px
}

.mb-13 {
    margin-bottom: 13px
}

.mb-14 {
    margin-bottom: 14px
}

.mb-15 {
    margin-bottom: 15px
}

.mb-16 {
    margin-bottom: 16px
}

.mb-17 {
    margin-bottom: 17px
}

.mb-18 {
    margin-bottom: 18px
}

.mb-19 {
    margin-bottom: 19px
}

.mb-20 {
    margin-bottom: 20px
}

.mb-21 {
    margin-bottom: 21px
}

.mb-22 {
    margin-bottom: 22px
}

.mb-23 {
    margin-bottom: 23px
}

.mb-24 {
    margin-bottom: 24px
}

.mb-25 {
    margin-bottom: 25px
}

.mb-26 {
    margin-bottom: 26px
}

.mb-27 {
    margin-bottom: 27px
}

.mb-28 {
    margin-bottom: 28px
}

.mb-29 {
    margin-bottom: 29px
}

.mb-30 {
    margin-bottom: 30px
}

.mb-31 {
    margin-bottom: 31px
}

.mb-32 {
    margin-bottom: 32px
}

.mb-33 {
    margin-bottom: 33px
}

.mb-34 {
    margin-bottom: 34px
}

.mb-35 {
    margin-bottom: 35px
}

.mb-36 {
    margin-bottom: 36px
}

.mb-37 {
    margin-bottom: 37px
}

.mb-38 {
    margin-bottom: 38px
}

.mb-39 {
    margin-bottom: 39px
}

.mb-40 {
    margin-bottom: 40px
}

.mb-41 {
    margin-bottom: 41px
}

.mb-42 {
    margin-bottom: 42px
}

.mb-43 {
    margin-bottom: 43px
}

.mb-44 {
    margin-bottom: 44px
}

.mb-45 {
    margin-bottom: 45px
}

.mb-46 {
    margin-bottom: 46px
}

.mb-47 {
    margin-bottom: 47px
}

.mb-48 {
    margin-bottom: 48px
}

.mb-49 {
    margin-bottom: 49px
}

.mb-50 {
    margin-bottom: 50px
}

.mb-51 {
    margin-bottom: 51px
}

.mb-52 {
    margin-bottom: 52px
}

.mb-53 {
    margin-bottom: 53px
}

.mb-54 {
    margin-bottom: 54px
}

.mb-55 {
    margin-bottom: 55px
}

.mb-56 {
    margin-bottom: 56px
}

.mb-57 {
    margin-bottom: 57px
}

.mb-58 {
    margin-bottom: 58px
}

.mb-59 {
    margin-bottom: 59px
}

.mb-60 {
    margin-bottom: 60px
}

.mb-61 {
    margin-bottom: 61px
}

.mb-62 {
    margin-bottom: 62px
}

.mb-63 {
    margin-bottom: 63px
}

.mb-64 {
    margin-bottom: 64px
}

.mb-65 {
    margin-bottom: 65px
}

.mb-66 {
    margin-bottom: 66px
}

.mb-67 {
    margin-bottom: 67px
}

.mb-68 {
    margin-bottom: 68px
}

.mb-69 {
    margin-bottom: 69px
}

.mb-70 {
    margin-bottom: 70px
}

.mb-71 {
    margin-bottom: 71px
}

.mb-72 {
    margin-bottom: 72px
}

.mb-73 {
    margin-bottom: 73px
}

.mb-74 {
    margin-bottom: 74px
}

.mb-75 {
    margin-bottom: 75px
}

.mb-76 {
    margin-bottom: 76px
}

.mb-77 {
    margin-bottom: 77px
}

.mb-78 {
    margin-bottom: 78px
}

.mb-79 {
    margin-bottom: 79px
}

.mb-80 {
    margin-bottom: 80px
}

.mb-81 {
    margin-bottom: 81px
}

.mb-82 {
    margin-bottom: 82px
}

.mb-83 {
    margin-bottom: 83px
}

.mb-84 {
    margin-bottom: 84px
}

.mb-85 {
    margin-bottom: 85px
}

.mb-86 {
    margin-bottom: 86px
}

.mb-87 {
    margin-bottom: 87px
}

.mb-88 {
    margin-bottom: 88px
}

.mb-89 {
    margin-bottom: 89px
}

.mb-90 {
    margin-bottom: 90px
}

.mb-91 {
    margin-bottom: 91px
}

.mb-92 {
    margin-bottom: 92px
}

.mb-93 {
    margin-bottom: 93px
}

.mb-94 {
    margin-bottom: 94px
}

.mb-95 {
    margin-bottom: 95px
}

.mb-96 {
    margin-bottom: 96px
}

.mb-97 {
    margin-bottom: 97px
}

.mb-98 {
    margin-bottom: 98px
}

.mb-99 {
    margin-bottom: 99px
}

.mb-100 {
    margin-bottom: 100px
}

.mt-1 {
    margin-top: 1px
}

.mt-2 {
    margin-top: 2px
}

.mt-3 {
    margin-top: 3px
}

.mt-4 {
    margin-top: 4px
}

.mt-5 {
    margin-top: 5px
}

.mt-6 {
    margin-top: 6px
}

.mt-7 {
    margin-top: 7px
}

.mt-8 {
    margin-top: 8px
}

.mt-9 {
    margin-top: 9px
}

.mt-10 {
    margin-top: 10px
}

.mt-11 {
    margin-top: 11px
}

.mt-12 {
    margin-top: 12px
}

.mt-13 {
    margin-top: 13px
}

.mt-14 {
    margin-top: 14px
}

.mt-15 {
    margin-top: 15px
}

.mt-16 {
    margin-top: 16px
}

.mt-17 {
    margin-top: 17px
}

.mt-18 {
    margin-top: 18px
}

.mt-19 {
    margin-top: 19px
}

.mt-20 {
    margin-top: 20px
}

.mt-21 {
    margin-top: 21px
}

.mt-22 {
    margin-top: 22px
}

.mt-23 {
    margin-top: 23px
}

.mt-24 {
    margin-top: 24px
}

.mt-25 {
    margin-top: 25px
}

.mt-26 {
    margin-top: 26px
}

.mt-27 {
    margin-top: 27px
}

.mt-28 {
    margin-top: 28px
}

.mt-29 {
    margin-top: 29px
}

.mt-30 {
    margin-top: 30px
}

.mt-31 {
    margin-top: 31px
}

.mt-32 {
    margin-top: 32px
}

.mt-33 {
    margin-top: 33px
}

.mt-34 {
    margin-top: 34px
}

.mt-35 {
    margin-top: 35px
}

.mt-36 {
    margin-top: 36px
}

.mt-37 {
    margin-top: 37px
}

.mt-38 {
    margin-top: 38px
}

.mt-39 {
    margin-top: 39px
}

.mt-40 {
    margin-top: 40px
}

.mt-41 {
    margin-top: 41px
}

.mt-42 {
    margin-top: 42px
}

.mt-43 {
    margin-top: 43px
}

.mt-44 {
    margin-top: 44px
}

.mt-45 {
    margin-top: 45px
}

.mt-46 {
    margin-top: 46px
}

.mt-47 {
    margin-top: 47px
}

.mt-48 {
    margin-top: 48px
}

.mt-49 {
    margin-top: 49px
}

.mt-50 {
    margin-top: 50px
}

.mt-51 {
    margin-top: 51px
}

.mt-52 {
    margin-top: 52px
}

.mt-53 {
    margin-top: 53px
}

.mt-54 {
    margin-top: 54px
}

.mt-55 {
    margin-top: 55px
}

.mt-56 {
    margin-top: 56px
}

.mt-57 {
    margin-top: 57px
}

.mt-58 {
    margin-top: 58px
}

.mt-59 {
    margin-top: 59px
}

.mt-60 {
    margin-top: 60px
}

.mt-61 {
    margin-top: 61px
}

.mt-62 {
    margin-top: 62px
}

.mt-63 {
    margin-top: 63px
}

.mt-64 {
    margin-top: 64px
}

.mt-65 {
    margin-top: 65px
}

.mt-66 {
    margin-top: 66px
}

.mt-67 {
    margin-top: 67px
}

.mt-68 {
    margin-top: 68px
}

.mt-69 {
    margin-top: 69px
}

.mt-70 {
    margin-top: 70px
}

.mt-71 {
    margin-top: 71px
}

.mt-72 {
    margin-top: 72px
}

.mt-73 {
    margin-top: 73px
}

.mt-74 {
    margin-top: 74px
}

.mt-75 {
    margin-top: 75px
}

.mt-76 {
    margin-top: 76px
}

.mt-77 {
    margin-top: 77px
}

.mt-78 {
    margin-top: 78px
}

.mt-79 {
    margin-top: 79px
}

.mt-80 {
    margin-top: 80px
}

.mt-81 {
    margin-top: 81px
}

.mt-82 {
    margin-top: 82px
}

.mt-83 {
    margin-top: 83px
}

.mt-84 {
    margin-top: 84px
}

.mt-85 {
    margin-top: 85px
}

.mt-86 {
    margin-top: 86px
}

.mt-87 {
    margin-top: 87px
}

.mt-88 {
    margin-top: 88px
}

.mt-89 {
    margin-top: 89px
}

.mt-90 {
    margin-top: 90px
}

.mt-91 {
    margin-top: 91px
}

.mt-92 {
    margin-top: 92px
}

.mt-93 {
    margin-top: 93px
}

.mt-94 {
    margin-top: 94px
}

.mt-95 {
    margin-top: 95px
}

.mt-96 {
    margin-top: 96px
}

.mt-97 {
    margin-top: 97px
}

.mt-98 {
    margin-top: 98px
}

.mt-99 {
    margin-top: 99px
}

.mt-100 {
    margin-top: 100px
}

@media (min-width: 1500px) {
    .container {
        max-width: 1294px
    }
}

@media (min-width: 1800px) {
    .container {
        max-width: 1550px
    }
}

.button-custom {
    padding: 15px 10px;
    border-radius: 900000px;
    background-color: #0a9e33;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: #fff;
    min-width: 180px;
    width: fit-content;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center
}

.button-custom.bg-white {
    background-color: #fff
}

.button-custom.color-base-green {
    color: #0a9e33
}

.button-custom.padding-md {
    padding: 15px 22px
}

.button-custom.padding-sm {
    padding: 10px 22px
}

.button-custom.bg-green {
    background-color: #0a9e33
}

.about {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: #0a9e33
}

.about .wrapper {
    max-width: 1212px;
    display: flex;
    align-items: center;
    gap: 50px;
    position: relative
}

.about .wrapper .left {
    position: relative
}

.about .wrapper .left img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%
}

.about .wrapper .left .position-absolute {
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 1
}

.about .wrapper .left .rotating-image {
    width: 100%;
    animation: rotate-left 10s linear infinite
}

.about .quote {
    font-size: 26px;
    font-style: italic;
    font-weight: 600;
    color: #fff;
    text-align: center;
    font-family: poppins, sans-serif
}

.about .none {
    display: none
}

.about .collapse {
    display: none;
    transition: height .35s ease
}

.about .collapse.show {
    display: flex !important;
    flex-direction: column
}

.about .wrapper2 {
    max-width: 1212px;
    display: flex;
    align-items: center;
    gap: 50px;
    position: relative
}

.about .wrapper2 .right2 {
    position: relative
}

.about .wrapper2 .right2 img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%
}

.about .wrapper2 .right2 .position-absolute {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.about .wrapper2 .right2 svg {
    width: 150%
}

.about .wrapper2 .right2 .rotating-image {
    width: 170%;
    animation: rotate-left 10s linear infinite
}

@keyframes rotate-left {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(-360deg)
    }
}

.showcase {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 100px 150px;
    display: flex;
    justify-content: center;
    align-items: center
}

.showcase .wrapper {
    max-width: 1212px
}

.showcase.contact .wrapper .top {
    order: 2
}

.showcase.contact iframe {
    height: 383px;
    object-fit: cover;
    border: 5px solid #FFFFFF;
    border-radius: 10px
}

.showcase.left-and-right .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center
}

.video-profile {
    background-image: url(/build/assets/video-profile-bg-CDJp6GTz.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 182px 0;
    display: flex;
    justify-content: center;
    align-items: center
}

.video-profile h1 {
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: -1.2px;
    color: #fff;
    text-align: center
}

.video-profile p {
    color: #ffffff61;
    text-align: center;
    font-size: 19px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
    letter-spacing: -.2px
}

.video-profile .wrapper {
    max-width: 600px
}

footer {
    background-color: #173c32;
    padding: 40px 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100vw
}

footer hr {
    margin: 0;
    background-color: #00000080
}

footer .wrapper {
    display: flex;
    flex-direction: column
}

footer .wrapper .top {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    gap: 30px
}

footer .wrapper .top .navigation-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px
}

footer .wrapper .top .navigation-wrapper .nav-column .nav-links {
    margin-top: 10px
}

footer .wrapper .top .certif-social-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px
}

footer .wrapper .top .certif-social-wrapper .certif-section .certif-wrapper {
    flex: 1;
    width: 100%;
    height: 100%;
    margin-top: 10px
}

footer .wrapper .top .certif-social-wrapper .certif-section .certif-wrapper img {
    transform: scale(.9)
}

footer .wrapper .top .certif-social-wrapper .social-section .social-wrapper {
    margin-top: 10px
}

footer .wrapper .bottom {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px
}

footer .wrapper .bottom a,
footer .wrapper .bottom p {
    font-size: 12px
}

@media (min-width: 530px) and (max-width: 719px) {
    footer {
        padding: 34px 80px
    }

    footer .wrapper {
        gap: 20px
    }

    footer .wrapper .top {
        font-size: 8.533px;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
        flex-wrap: wrap;
        max-width: 80dvw
    }

    footer .wrapper .top .brand-nav-row {
        display: flex;
        flex-direction: row;
        min-width: 85dvw
    }

    footer .wrapper .top .brand-nav-row .brand-view {
        flex: 1;
        max-width: 600px
    }

    footer .wrapper .top .brand-nav-row .navigation-wrapper {
        flex-direction: row;
        gap: 40px;
        flex: 1;
        justify-content: center;
        margin-top: 0 !important
    }

    footer .wrapper .top .certif-social-wrapper {
        flex: 1;
        max-width: 74dvw;
        gap: 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }

    footer .wrapper .top .certif-social-wrapper .certif-section .certif-wrapper img {
        transform: scale(.8)
    }

    footer .wrapper .bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 0 !important;
        scale: 1
    }
}

@media (min-width: 719px) {
    footer {
        padding: 34px 80px
    }

    footer .wrapper {
        gap: 20px
    }

    footer .wrapper .top {
        font-size: 8.533px;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
        flex-wrap: wrap;
        max-width: 80dvw
    }

    footer .wrapper .top .brand-nav-row {
        display: flex;
        flex-direction: row;
        min-width: 85dvw
    }

    footer .wrapper .top .brand-nav-row .brand-view {
        flex: 1;
        max-width: 600px
    }

    footer .wrapper .top .brand-nav-row .navigation-wrapper {
        flex-direction: row;
        gap: 40px;
        flex: 1;
        justify-content: center
    }

    footer .wrapper .top .certif-social-wrapper {
        flex: 1;
        max-width: 74dvw;
        gap: 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }

    footer .wrapper .top .certif-social-wrapper .certif-section .certif-wrapper img {
        transform: scale(.8)
    }

    footer .wrapper .bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: 0
    }
}

@media (min-width: 992px) {
    footer .wrapper .top {
        font-size: 8.533px;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
        flex-wrap: wrap;
        max-width: 81.5dvw
    }

    footer .wrapper .top .brand-nav-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        min-width: 98dvw
    }

    footer .wrapper .top .brand-nav-row .brand-view {
        flex: 1;
        max-width: 600px
    }

    footer .wrapper .top .brand-nav-row .navigation-wrapper {
        flex-direction: row;
        gap: 40px;
        flex: 1;
        justify-content: center
    }

    footer .wrapper .top .certif-social-wrapper {
        flex: 1;
        max-width: 98dvw;
        gap: 30px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }

    footer .wrapper .top .certif-social-wrapper .certif-section .certif-wrapper img {
        transform: scale(.8)
    }

    footer .wrapper .bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }
}

@media (min-width: 1200px) {
    footer {
        padding: 50px 150px
    }

    footer .wrapper .top {
        font-size: 8.533px;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
        flex-wrap: nowrap
    }

    footer .wrapper .top .brand-nav-row {
        display: flex;
        flex-direction: row;
        min-width: 57.5dvw;
        gap: 100px
    }

    footer .wrapper .top .brand-nav-row .brand-view {
        flex: 1;
        display: inline-block;
        max-width: unset
    }

    footer .wrapper .top .brand-nav-row .navigation-wrapper {
        flex: 1;
        flex-direction: row;
        gap: 40px
    }

    footer .wrapper .top .brand-nav-row .nav-column {
        flex: 1
    }

    footer .wrapper .top .certif-social-wrapper {
        flex: 1;
        gap: 30px;
        flex-direction: column
    }

    footer .wrapper .top .certif-social-wrapper .certif-section p {
        padding-left: 10px
    }

    footer .wrapper .top .certif-social-wrapper .certif-section .certif-wrapper img {
        transform: scale(.8)
    }

    footer .wrapper .bottom {
        margin-top: 0;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }

    footer .wrapper .bottom p {
        font-size: 18px
    }

    footer .wrapper .bottom .flex-row-5 a {
        font-size: 18px
    }
}

@media (max-width: 719px) {
    footer .wrapper .top .navigation-wrapper {
        margin-top: 25px !important
    }

    footer .wrapper .top .navigation-wrapper .nav-column .text-xs-bold {
        margin: 0 !important
    }

    footer .wrapper .bottom {
        margin-top: -20px;
        scale: 1.15
    }
}

.navbar-no-scroll {
    overflow: hidden !important;
    height: 100vh;
    position: fixed;
    width: 100%
}

.navbar-component {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #173c32;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64.533px;
    padding: 0 20px;
    z-index: 100;
    transition: all .3s
}

.navbar-component.in-top {
    background-color: transparent
}

.navbar-component.in-top.mobile-menu-open,
.navbar-component.mobile-menu-open {
    background-color: #173c32 !important
}

.navbar-component.scroll-down {
    transform: translateY(-100%)
}

.navbar-component.scroll-top {
    transform: translateY(0)
}

.navbar-component .left {
    gap: 0 !important
}

.navbar-component .left svg {
    transform: scale(.7)
}

.navbar-component .left p,
.navbar-component .middle .navbar-navs {
    display: none
}

.navbar-component .right {
    display: flex;
    align-items: center
}

.navbar-component .navbar-mobile-action-row {
    display: flex;
    align-items: center;
    margin-left: 12px
}

.navbar-component .navbar-mobile-action-row .navbar-hamburger {
    flex: 0 0 18px;
    width: 18px;
    height: 14px;
    position: relative;
    transform: rotate(0);
    transition: .5s ease-in-out;
    background: transparent;
    cursor: pointer;
    border: none;
    outline: none
}

.navbar-component .navbar-mobile-action-row .navbar-hamburger span {
    display: block;
    position: absolute;
    height: 1.5px;
    width: 100%;
    background: #fff !important;
    opacity: 1;
    left: 0;
    transform: rotate(0);
    transition: .25s ease-in-out
}

.navbar-component .navbar-mobile-action-row .navbar-hamburger span:nth-child(1) {
    top: 0
}

.navbar-component .navbar-mobile-action-row .navbar-hamburger span:nth-child(2),
.navbar-component .navbar-mobile-action-row .navbar-hamburger span:nth-child(3) {
    top: 6px
}

.navbar-component .navbar-mobile-action-row .navbar-hamburger span:nth-child(4) {
    top: 12px
}

.navbar-component .navbar-mobile-action-row .navbar-hamburger.open span:nth-child(1) {
    top: 7px;
    width: 0%;
    left: 50%
}

.navbar-component .navbar-mobile-action-row .navbar-hamburger.open span:nth-child(2) {
    transform: rotate(45deg);
    background: #fff !important
}

.navbar-component .navbar-mobile-action-row .navbar-hamburger.open span:nth-child(3) {
    transform: rotate(-45deg);
    background: #fff !important
}

.navbar-component .navbar-mobile-action-row .navbar-hamburger.open span:nth-child(4) {
    top: 7px;
    width: 0%;
    left: 50%
}

@media (min-width: 719px) and (max-width: 1200px) {
    .navbar-component {
        padding: 0 42.667px
    }

    .navbar-component .left p {
        display: block;
        font-size: 9px !important
    }

    .navbar-component .navbar-mobile-action-row .navbar-hamburger span {
        background: #fff !important
    }

    .navbar-component .navbar-mobile-action-row .navbar-hamburger.open span:nth-child(2),
    .navbar-component .navbar-mobile-action-row .navbar-hamburger.open span:nth-child(3) {
        background: #fff !important
    }
}

@media (min-width: 1200px) {
    .navbar-component {
        height: 100px;
        padding: 0 80px
    }

    .navbar-component .left svg {
        transform: scale(1)
    }

    .navbar-component .left p {
        font-size: 18px !important
    }

    .navbar-component .middle {
        width: 100%;
        display: flex;
        justify-content: center
    }

    .navbar-component .middle .navbar-navs {
        display: flex;
        gap: 35px;
        align-items: center;
        justify-content: center
    }

    .navbar-component .middle .navbar-navs a {
        font-family: Poppins, sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 22px;
        color: #fff;
        width: max-content;
        opacity: .7;
        position: relative
    }

    .navbar-component .middle .navbar-navs a:after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -4px;
        width: 0;
        height: 2px;
        background-color: currentColor;
        transition: width .3s ease
    }

    .navbar-component .middle .navbar-navs a:hover:after,
    .navbar-component .middle .navbar-navs a.active:after {
        width: 100%;
        opacity: .9
    }

    .navbar-component .middle .navbar-navs a:hover,
    .navbar-component .middle .navbar-navs a.active {
        opacity: .9
    }

    .navbar-component .middle .navbar-navs a.c-black {
        color: #000
    }

    .navbar-component .middle .navbar-navs a.c-black.active:after {
        background-color: #000
    }

    .navbar-component .navbar-mobile-action-row {
        display: none
    }

    .navbar-component .select-language {
        padding: 0 16px
    }

    .navbar-component .select-language select {
        font-size: 16px
    }
}

.navbar-mobile-navs {
    background: #173c32;
    visibility: hidden;
    opacity: 0;
    height: 0;
    width: 100%;
    padding: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 64.533px;
    z-index: 999999998
}

.navbar-mobile-navs.open {
    opacity: 1;
    visibility: visible;
    height: calc(100vh - 64.533px);
    padding: 40px 20px;
    overflow-y: auto
}

.navbar-mobile-navs-item {
    width: 100%;
    margin-bottom: 32px;
    padding: 0 20px;
    color: #fff;
    font-family: Poppins;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    text-transform: capitalize
}

.navbar-mobile-navs-item.active {
    color: #fff;
    font-weight: 700
}

.navbar-mobile-navs .dropdown-content {
    display: none;
    position: relative;
    background: #fff;
    border: none !important;
    margin: 0 20px;
    padding-left: 0;
    flex-direction: column;
    width: auto;
    min-width: 200px
}

.navbar-mobile-navs .dropdown-content a {
    padding: 12px 15px;
    text-decoration: none;
    color: var(--Base-Grey, #646363);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize;
    display: block;
    border-bottom: 1px solid rgba(100, 99, 99, .1);
    transition: all .2s ease
}

.navbar-mobile-navs .dropdown-content a:last-child {
    border-bottom: none
}

.navbar-mobile-navs .dropdown-content a.active,
.navbar-mobile-navs .dropdown-content a:hover {
    background: var(--Base-Green, #0a9e33);
    color: var(--Color, #fff);
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    text-transform: capitalize
}

.navbar-mobile-navs .has-dropdown.dropdown-open+.dropdown-content {
    display: flex;
    flex-direction: column;
    animation: dropdownSlide .3s ease-out
}

.navbar-mobile-navs .has-dropdown.dropdown-open img {
    transform: rotate(180deg);
    transition: transform .3s ease
}

.navbar-mobile-navs .has-dropdown img {
    transition: transform .3s ease
}

@media (min-width: 1200px) {
    .navbar-mobile-navs {
        display: none
    }
}

@keyframes dropdownSlide {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (min-width: 719px) and (max-width: 1200px) {
    .navbar-mobile-navs {
        top: 64.533px
    }

    .navbar-mobile-navs.open {
        height: calc(100vh - 64.533px)
    }

    .navbar-mobile-navs .has-dropdown.dropdown-open+.dropdown-content {
        display: flex;
        margin-top: -20px;
        margin-bottom: 30px;
        flex-direction: column;
        animation: dropdownSlide .3s ease-out
    }
}

@media (max-width: 719px) {
    .navbar-component {
        padding: 0 20px 0 5px !important
    }

    .navbar-component .left svg {
        width: 50px;
        height: 50px
    }

    .navbar-mobile-navs {
        background: #173c32;
        visibility: hidden;
        opacity: 0;
        height: 0;
        width: 100%;
        padding: 0;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 64.533px;
        z-index: 999999998
    }

    .navbar-mobile-navs.open {
        opacity: 1;
        visibility: visible;
        height: calc(100vh - 64.533px);
        padding: 40px 20px;
        overflow-y: auto
    }

    .navbar-mobile-navs-item {
        width: 100%;
        margin-bottom: 32px;
        padding: 0 20px;
        color: #fff;
        font-family: Poppins;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        text-transform: capitalize
    }

    .navbar-mobile-navs-item.active {
        color: #fff;
        font-weight: 700
    }

    .navbar-mobile-navs .dropdown-content {
        display: none;
        position: relative;
        background: #fff;
        border: none !important;
        margin: 0 20px;
        padding-left: 0;
        flex-direction: column;
        width: auto;
        min-width: 200px
    }

    .navbar-mobile-navs .dropdown-content a {
        padding: 12px 15px;
        text-decoration: none;
        color: var(--Base-Grey, #646363);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: capitalize;
        display: block;
        border-bottom: 1px solid rgba(100, 99, 99, .1);
        transition: all .2s ease
    }

    .navbar-mobile-navs .dropdown-content a:last-child {
        border-bottom: none
    }

    .navbar-mobile-navs .dropdown-content a.active,
    .navbar-mobile-navs .dropdown-content a:hover {
        background: var(--Base-Green, #0a9e33);
        color: var(--Color, #fff);
        font-size: 12px;
        font-weight: 500;
        line-height: normal;
        text-transform: capitalize
    }

    .navbar-mobile-navs .has-dropdown.dropdown-open+.dropdown-content {
        display: flex;
        margin-top: -20px;
        margin-bottom: 30px;
        flex-direction: column;
        animation: dropdownSlide .3s ease-out
    }

    .navbar-mobile-navs .has-dropdown.dropdown-open img {
        transform: rotate(180deg);
        transition: transform .3s ease
    }

    .navbar-mobile-navs .has-dropdown img {
        transition: transform .3s ease
    }
}

.hero-section-new {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(132.06% 112.27% at 11.18% 8.3%, #000000bd, #0000008c 51.41%, #000000db)
}

.hero-section-new.snap-section {
    justify-content: flex-start
}

.hero-section-new.with-video {
    background: radial-gradient(132.06% 112.27% at 11.18% 8.3%, #000000bd, #0000008c 51.41%, #000000db)
}

.hero-section-new .hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1
}

.hero-section-new .hero-img {
    background: #000b;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1
}

.hero-section-new #wrapp-top {
    width: 100%;
    align-items: center
}

.hero-section-new .wrapp-text {
    width: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6.395px;
    align-self: stretch;
    top: 40%;
    transform: translateY(-50%);
    z-index: 2
}

.hero-section-new .wrapp-text .gap-10 {
    gap: 5px
}

.hero-section-new .wrapp-text .text-wt-bg {
    color: #fff;
    font-family: Poppins;
    font-size: 7px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%
}

.hero-section-new .wrapp-text svg {
    width: 490px
}

.hero-section-new .wrapp-text p {
    font-style: normal;
    line-height: normal
}

.hero-section-new .wrapp-text p.title {
    color: #fff;
    text-align: center;
    font-size: 42px;
    font-weight: 600;
    text-transform: capitalize;
    width: 50%
}

.hero-section-new .wrapp-text p.desc {
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize
}

.hero-section-new .wrapp-text .link {
    text-decoration: none;
    color: #00ca39;
    font-family: Poppins;
    font-size: 5px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    display: flex;
    gap: 5px
}

.hero-section-new .wrapp-text .link .arrow-icon {
    width: 7px;
    height: 7px;
    animation: moveArrow 1s infinite alternate
}

@keyframes moveArrow {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(10px)
    }
}

.hero-section-new .hero-footer {
    overflow: hidden;
    position: absolute;
    bottom: 10%;
    left: 10%;
    width: 80%;
    height: 120px;
    display: flex;
    padding: 34px 38px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #232323;
    border-radius: 20px;
    gap: 50px;
    z-index: 2
}

.hero-section-new .hero-footer p {
    color: #fff;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 0
}

.hero-section-new .hero-footer .show {
    background: var(--Base-Green, #0a9e33);
    width: 100%;
    max-width: 300px;
    margin-top: 10px;
    height: 50px;
    font-size: 16px;
    color: var(--Base-White, #fff);
    padding: 12px 32px;
    border-radius: 50px
}

.hero-section-new .hero-footer.homepage {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #2c2b2b;
    padding: 25px 40px;
    border-radius: 20px;
    margin-top: 24px
}

.hero-section-new .hero-footer.homepage .section-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%
}

.hero-section-new .hero-footer.homepage .section-title-wrapper .section-title {
    flex: 1 0 0
}

.hero-section-new .hero-footer.homepage .line-vertical {
    height: 40px;
    width: 1px;
    background: #e7e0e0;
    margin-right: 24px
}

.hero-section-new .hero-footer.homepage .section-title {
    color: #fff;
    width: 200px
}

.hero-section-new .hero-footer.homepage .section-title .text-top {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 7px
}

.hero-section-new .hero-footer.homepage .section-title .text-bottom {
    font-size: 15px;
    color: #fff
}

.hero-section-new .btn-pause-vid {
    display: inline-flex;
    min-width: 85px;
    height: 30px;
    padding: 0 10px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    border-radius: 9000px;
    border: 1px solid #fff;
    position: absolute;
    bottom: 50px;
    right: 25px;
    color: #fff;
    text-align: center;
    font-size: 8px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%
}

.hero-section-new .btn-pause-vid img {
    width: 15px;
    height: 15px
}

@media (max-width: 1200px) {
    .hero-section-new {
        height: 40dvh;
        min-height: 40dvh !important
    }

    .hero-section-new.snap-section {
        min-height: 0 !important
    }

    .hero-section-new .hero-video {
        object-fit: cover
    }

    .hero-section-new #wrapp-top {
        align-items: center
    }

    .hero-section-new .wrapp-text {
        width: 100%
    }

    .hero-section-new .wrapp-text .text-wt-bg {
        font-size: 9px
    }

    .hero-section-new .wrapp-text p.title {
        font-size: 22px
    }

    .hero-section-new .wrapp-text svg {
        margin-top: -10px;
        padding-left: 0 !important;
        width: 271.159px;
        height: 100% !important
    }

    .hero-section-new .wrapp-text .link {
        font-size: 10px;
        gap: 3px
    }

    .hero-section-new .wrapp-text .link .arrow-icon {
        width: 12px;
        height: 12px
    }

    .hero-section-new .wrapp-text .d-flex {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 90%
    }

    .hero-section-new .hero-footer {
        flex-direction: row;
        width: 80%;
        height: fit-content;
        padding: 18px 13px !important
    }

    .hero-section-new .hero-footer.homepage .section-title {
        width: unset
    }

    .hero-section-new .hero-footer p {
        font-size: 13px;
        line-height: 18px
    }

    .hero-section-new .hero-footer .show {
        width: 100%;
        padding: 0 20px !important;
        height: 40px;
        font-size: 12px !important;
        margin-bottom: 0 !important
    }

    .hero-section-new .hero-footer .section-title {
        color: #fff;
        width: 100px
    }

    .hero-section-new .hero-footer .section-title .text-top {
        font-weight: 700;
        font-size: 16px !important;
        margin-bottom: 7px
    }

    .hero-section-new .hero-footer .section-title .text-bottom {
        font-size: 13px !important;
        color: #fff
    }

    .hero-section-new .btn-pause-vid {
        font-size: 11px
    }
}

@media (max-width: 719px) {
    .hero-section-new {
        height: 261px;
        min-height: 261px
    }

    .hero-section-new.snap-section {
        min-height: 0 !important
    }

    .hero-section-new .wrapp-text {
        position: absolute;
        top: 45%
    }

    .hero-section-new .wrapp-text p.title {
        width: 262px;
        color: #fff;
        text-align: center;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 18.2px;
        letter-spacing: -.28px;
        margin-bottom: 3px
    }

    .hero-section-new .wrapp-text svg {
        width: 134.622px
    }

    .hero-section-new .hero-footer {
        width: 85%;
        left: 7%;
        position: absolute;
        bottom: 10% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        border-radius: 10px !important;
        flex-direction: row !important;
        height: 40px;
        padding: 10px 9px !important;
        gap: 10px
    }

    .hero-section-new .hero-footer.homepage .gap-10 {
        gap: 0 !important
    }

    .hero-section-new .hero-footer.homepage .line-vertical {
        height: 25.012px !important;
        margin: 0 5px !important
    }

    .hero-section-new .hero-footer.homepage .section-title-wrapper {
        display: flex;
        align-items: center;
        justify-content: start;
        min-width: 70% !important;
        width: 70% !important
    }

    .hero-section-new .hero-footer p {
        width: 250px;
        font-size: 7px;
        line-height: 9.391px;
        text-align: start
    }

    .hero-section-new .hero-footer a {
        margin-left: -10px
    }

    .hero-section-new .hero-footer a .show {
        width: 100%;
        padding: 2.538px 5.076px !important;
        height: 15px !important;
        font-size: 7px !important;
        margin-bottom: 8px !important;
        align-self: center
    }

    .hero-section-new .hero-footer .section-title:first-child {
        text-align: left !important
    }

    .hero-section-new .hero-footer .section-title {
        color: #fff;
        width: 70px !important;
        text-align: center
    }

    .hero-section-new .hero-footer .section-title .text-top {
        font-weight: 600 !important;
        font-size: 9px !important;
        margin-bottom: 0 !important
    }

    .hero-section-new .hero-footer .section-title .text-bottom {
        font-size: 7px !important;
        color: #fff
    }
}

.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    z-index: 999999999999999;
    transition: .5s all
}

.splash-screen img,
.splash-screen h2 {
    animation: blink 2s ease-in-out infinite
}

.splash-screen h2 {
    text-align: center
}

.splash-screen.animate-enter {
    animation: animate-enter .5s ease
}

@keyframes animate-enter {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.splash-screen.animate-leave {
    animation: animate-leave .5s ease
}

@keyframes animate-leave {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes blink {

    0%,
    to {
        opacity: 1
    }

    50% {
        opacity: 0
    }
}

@keyframes floatUpDown {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-40px)
    }

    to {
        transform: translateY(0)
    }
}

.swiper-dekstop {
    display: none !important
}

@media (min-width: 719px) {
    .swiper-dekstop {
        display: block !important;
        width: 100%;
        height: 100%;
        overflow: hidden
    }

    .swiper-dekstop .swiper-slide {
        display: flex;
        align-items: center
    }

    .swiper-dekstop .swiper-wrapper {
        padding-bottom: 50px
    }

    .swiper-dekstop .swiper-pagination {
        position: absolute;
        bottom: 0;
        display: flex;
        gap: 12px;
        justify-content: center
    }

    .swiper-dekstop .swiper-pagination-bullet {
        width: 26px;
        height: 6px;
        border-radius: 90px;
        background: var(--Base-Grey, #646363)
    }

    .swiper-dekstop .swiper-pagination-bullet-active {
        width: 70px;
        height: 6px;
        border-radius: 90px;
        background: var(--Secondary, #00ca39)
    }
}

@media (min-width: 375px) {
    .swiper-dekstop {
        display: block !important;
        width: 100%;
        height: 100%;
        overflow: hidden
    }

    .swiper-dekstop .swiper-slide {
        display: flex;
        align-items: center
    }

    .swiper-dekstop .swiper-wrapper {
        padding-bottom: 50px
    }

    .swiper-dekstop .swiper-pagination {
        position: absolute;
        bottom: 0;
        display: flex;
        gap: 12px;
        justify-content: center
    }

    .swiper-dekstop .swiper-pagination-bullet {
        width: 26px;
        height: 6px;
        border-radius: 90px;
        background: var(--Base-Grey, #646363);
        transition: width .3s cubic-bezier(.4, 0, .2, 1), background .3s
    }

    .swiper-dekstop .swiper-pagination-bullet-active {
        width: 70px;
        height: 6px;
        border-radius: 90px;
        background: var(--Secondary, #00ca39)
    }
}

.swiper-mobile {
    display: none !important;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.swiper-mobile .swiper-slide {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 6px
}

.swiper-mobile .swiper-slide .top,
.swiper-mobile .swiper-slide .center,
.swiper-mobile .swiper-slide .bottom {
    display: flex;
    flex-direction: row !important;
    gap: 6px !important;
    width: 100%
}

.swiper-mobile .swiper-slide .top img,
.swiper-mobile .swiper-slide .center img,
.swiper-mobile .swiper-slide .bottom img {
    object-fit: cover;
    height: 126px
}

.swiper-mobile .swiper-slide .top img:first-child {
    width: 174px;
    flex: 0 0 1
}

.swiper-mobile .swiper-slide .top img:nth-child(2) {
    flex: 1
}

.swiper-mobile .swiper-slide .center img:nth-child(2) {
    width: 174px;
    flex: 0 0 1
}

.swiper-mobile .swiper-slide .center img:first-child {
    flex: 1
}

.swiper-mobile .swiper-slide .bottom img {
    width: 100%
}

.swiper-mobile .swiper-wrapper {
    padding-bottom: 50px
}

.swiper-mobile .swiper-pagination {
    position: absolute;
    bottom: 0;
    display: flex;
    gap: 6px;
    justify-content: center
}

.swiper-mobile .swiper-pagination-bullet {
    width: 20px;
    height: 6px;
    border-radius: 90px;
    background: var(--Base-Grey, #646363)
}

.swiper-mobile .swiper-pagination-bullet-active {
    width: 40px;
    height: 6px;
    border-radius: 90px;
    background: var(--Secondary, #00ca39)
}

@media (min-width: 719px) {
    .swiper-mobile {
        display: none !important
    }
}

.certificate-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow: hidden
}

.certificate-container .swiper-wrapper {
    display: flex;
    gap: 0px
}

.certificate-container .swiper-slide {
    width: 259.933px;
    height: 349.225px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    box-sizing: border-box
}

.certificate-container .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 10px
}

@media (min-width: 375px) {
    .certificate-container .swiper-slide {
        width: 160px;
        height: auto
    }

    .certificate-container img {
        width: 100%;
        height: auto;
        object-fit: contain
    }
}

@media (min-width: 719px) {
    .certificate-container .swiper-slide {
        width: 182px;
        height: auto
    }
}

@media (min-width: 1200px) {
    .certificate-container .swiper-slide {
        width: 260px;
        height: auto
    }
}

.legalitas-container {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    overflow: hidden
}

.legalitas-container .swiper-wrapper {
    display: flex;
    justify-content: flex-end;
    height: auto;
    gap: 20px
}

.legalitas-container .swiper-slide {
    width: 500px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    box-sizing: border-box;
    border-radius: 10px !important
}

.legalitas-container .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.legalitas-container .detail-1,
.legalitas-container .detail-2 {
    width: 100%;
    margin-top: 20px;
    padding-left: 80px
}

.legalitas-container .detail-1 span,
.legalitas-container .detail-2 span {
    font-size: 14px;
    font-style: normal;
    font-weight: 700
}

.certificate-pagination {
    display: none !important
}

.swiper-button-prev {
    background-image: url(/build/assets/arrow-prev-_MqUHiGQ.png);
    top: 69% !important;
    left: -50px !important;
    color: transparent !important
}

.swiper-button-prev:active {
    background-image: url(/build/assets/arrow-prev-active-CUSyWMMy.png)
}

.swiper-button-next {
    top: 69% !important;
    right: -50px !important;
    color: transparent !important;
    background-image: url(/build/assets/arrow-next-KaY13YBY.png)
}

.swiper-button-next:active {
    background-image: url(/build/assets/arrow-next-active-D38rhQhD.png)
}

@media (min-width: 375px) {
    .legalitas-container .swiper-slide {
        width: 300px;
        height: 150px
    }

    .certificate-pagination {
        display: none !important
    }

    .swiper-button-prev {
        position: absolute;
        top: 25% !important;
        left: -42% !important;
        color: transparent !important;
        background-image: url(/build/assets/arrow-prev-_MqUHiGQ.png);
        background-repeat: no-repeat;
        background-position: center;
        width: 100% !important;
        height: 100% !important;
        scale: .2
    }

    .swiper-button-prev:active {
        background-image: url(/build/assets/arrow-prev-active-CUSyWMMy.png)
    }

    .swiper-button-next {
        position: absolute;
        top: 25% !important;
        right: -42% !important;
        color: transparent !important;
        background-image: url(/build/assets/arrow-next-KaY13YBY.png);
        background-repeat: no-repeat;
        background-position: center;
        width: 100% !important;
        height: 100% !important;
        scale: .2
    }

    .swiper-button-next:active {
        background-image: url(/build/assets/arrow-next-active-D38rhQhD.png)
    }
}

@media (min-width: 719px) {
    .legalitas-container .swiper-slide {
        width: 400px;
        height: 200px
    }

    .certificate-pagination {
        display: none !important
    }

    .swiper-button-prev {
        position: absolute;
        top: 25% !important;
        left: -44% !important;
        color: transparent !important;
        background-image: url(/build/assets/arrow-prev-_MqUHiGQ.png);
        background-repeat: no-repeat;
        background-position: center;
        width: 100% !important;
        height: 100% !important;
        scale: .3
    }

    .swiper-button-prev:active {
        background-image: url(/build/assets/arrow-prev-active-CUSyWMMy.png)
    }

    .swiper-button-next {
        position: absolute;
        top: 25% !important;
        right: -44% !important;
        color: transparent !important;
        background-image: url(/build/assets/arrow-next-KaY13YBY.png);
        background-repeat: no-repeat;
        background-position: center;
        width: 100% !important;
        height: 100% !important;
        scale: .3
    }

    .swiper-button-next:active {
        background-image: url(/build/assets/arrow-next-active-D38rhQhD.png)
    }
}

@media (min-width: 1200px) {
    .legalitas-container .swiper-slide {
        width: 500px;
        height: 350px
    }

    .certificate-pagination {
        display: none !important
    }

    .swiper-nav {
        position: absolute;
        height: 0px;
        bottom: 10%;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center
    }

    .swiper-nav .swiper-button-prev {
        position: absolute;
        order: 1;
        position: static;
        top: 0% !important;
        right: 0% !important;
        color: transparent !important;
        background-image: url(/build/assets/arrow-prev-_MqUHiGQ.png);
        background-repeat: no-repeat;
        background-position: center;
        height: 200px !important;
        width: 200px !important;
        scale: .3
    }

    .swiper-nav .swiper-button-prev:active {
        background-image: url(/build/assets/arrow-prev-active-CUSyWMMy.png)
    }

    .swiper-nav .swiper-button-next {
        margin-left: -100px;
        order: 2;
        position: static;
        top: 0% !important;
        right: 0% !important;
        color: transparent !important;
        background-image: url(/build/assets/arrow-next-KaY13YBY.png);
        background-repeat: no-repeat;
        background-position: center;
        height: 200px !important;
        width: 200px !important;
        scale: .3
    }

    .swiper-nav .swiper-button-next:active {
        background-image: url(/build/assets/arrow-next-active-D38rhQhD.png)
    }
}

.wrapp-input {
    display: flex;
    flex-direction: column;
    width: 100%
}

.wrapp-input label {
    color: #161c2d;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: -.1px
}

.wrapp-input input,
.wrapp-input textarea {
    border-radius: 8px;
    background: #fff;
    color: var(--Base-Grey, #646363);
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 26px;
    letter-spacing: -.1px;
    padding: 12px 18px
}

.custom-select-wrapper select {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 8px;
    background: var(--Base-White, #FFF);
    box-shadow: 0 4px 100px #00000005;
    color: var(--Base-Grey, #646363);
    text-align: center;
    font-family: Poppins;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.42px;
    padding: 10px 25px;
    align-items: center;
    gap: 10px;
    align-self: stretch
}

.custom-select-wrapper select:hover,
.custom-select-wrapper select::selection {
    color: #fff;
    background: var(--Base-Green, #0A9E33)
}

.custom-select-wrapper select option {
    color: var(--Base-Grey, white) !important;
    background: var(--Base-White, #0A9E33) !important;
    font-size: 14px;
    font-family: Poppins;
    padding: 10px 25px;
    text-align: center
}

.custom-select-wrapper select option:hover {
    color: #fff !important;
    background: var(--Base-Green, #0A9E33) !important
}

.custom-select-wrapper select option:checked,
.custom-select-wrapper select option:hover {
    color: #fff !important;
    background: var(--Base-Green, #0A9E33) !important
}

.nav-tabs {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border: none;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    gap: 10px
}

.nav-tabs .nav-link {
    display: flex;
    width: 100%;
    padding: 15px;
    align-items: center;
    gap: 15px;
    border-radius: 10px;
    border: 1px solid #0A9E33;
    background: #fff;
    margin-bottom: 5px;
    color: var(--Base-Grey, #646363);
    font-size: 20px;
    font-style: normal;
    line-height: 22px;
    letter-spacing: -.8px;
    font-weight: 500;
    text-align: start
}

.nav-tabs .nav-link.f-14 {
    font-size: 14px;
    line-height: 24px;
    max-width: 200px;
    width: 100%;
    background-color: transparent
}

.nav-tabs .nav-link.f-14.active {
    color: var(--Base-White, #FFF);
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid #EBEBEB;
    background: var(--Base-Green, #0A9E33);
    box-shadow: none
}

.nav-tabs .nav-link .icon-active {
    display: none;
    width: 40px;
    height: 40px
}

.nav-tabs .nav-link .icon-nonactive {
    width: 40px;
    height: 40px
}

.nav-tabs .nav-link.active {
    color: var(--Base-White, #FFF);
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid #EBEBEB;
    background: var(--Base-Green, #0A9E33);
    box-shadow: 0 43px 80px #00000012, 0 17.964px 33.422px #0000000d, 0 9.605px 17.869px #0000000a, 0 5.384px 10.017px #0000000a, 0 2.86px 5.32px #00000008, 0 1.19px 2.214px #00000005
}

.nav-tabs .nav-link.active .icon-active {
    display: flex;
    width: 40px;
    height: 40px
}

.nav-tabs .nav-link.active .icon-nonactive {
    display: none;
    width: 40px;
    height: 40px
}

@media (min-width: 1200px) {
    .nav-tabs .nav-link {
        padding: 20px;
        gap: 20px;
        border-radius: 15px;
        line-height: 25px
    }

    .nav-tabs .nav-link.active {
        border-radius: 15px
    }
}

.tab-content {
    margin-top: 20px;
    padding: 0 150px 40px
}

.tab-content.pengolahan {
    padding: 0
}

@media (min-width: 1200px) {
    .tab-content {
        margin-top: 60px
    }
}

.poin {
    display: flex;
    padding: 11px;
    flex-direction: column;
    align-items: start;
    gap: 10px;
    align-self: stretch;
    border-radius: 10px;
    border: 1px solid #EBEBEB;
    background: #fff
}

.poin .nomer {
    padding: 7px 17px;
    background-color: #6eb02e;
    border-radius: 10px;
    color: var(--Base-White, #FFF);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -.72px
}

.poin .ket {
    overflow: hidden;
    color: var(--Base-Grey, #646363);
    text-overflow: ellipsis;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0
}

@media (min-width: 1200px) {
    .poin {
        flex-direction: row;
        padding: 20px;
        align-items: center
    }

    .poin .nomer {
        padding: 10px 25px;
        font-size: 24px
    }

    .poin .ket {
        font-size: 14px;
        line-height: 24px
    }
}

.step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center
}

.step.active .number,
.step:hover .number {
    background-color: #e6f5eb;
    color: var(--Base-Green, #0A9E33)
}

.step.active .ket,
.step:hover .ket {
    color: var(--Base-Green, #0A9E33)
}

.step .number {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #efefef;
    color: var(--Base-Green, #646363);
    text-align: center;
    font-feature-settings: "liga" off, "clig" off;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 13.983px;
    letter-spacing: -1.047px;
    display: flex;
    align-items: center;
    justify-content: center
}

.step .number.active,
.step .number:hover {
    background-color: #e6f5eb;
    color: var(--Base-Green, #0A9E33)
}

.step .ket {
    color: var(--Base-Green, #646363);
    text-align: center;
    font-size: 7px;
    font-style: normal;
    font-weight: 600;
    line-height: 10px;
    letter-spacing: -.421px
}

.step .ket.active,
.step .ket:hover {
    color: var(--Base-Green, #0A9E33)
}

.step img {
    width: 4px;
    height: 38px
}

@media (min-width: 719px) {
    .step {
        gap: 12px
    }

    .step .number {
        width: 44.448px;
        height: 44.448px;
        font-size: 14.179px
    }

    .step .ket {
        font-size: 12px
    }
}

@media (min-width: 1200px) {
    .step {
        gap: 12px
    }

    .step .number {
        width: 65.448px;
        height: 65.448px;
        font-size: 26.179px;
        line-height: 30.106px
    }

    .step .ket {
        font-size: 14.033px;
        line-height: 22.907px
    }

    .step img {
        width: 5px;
        height: 82px
    }
}

.card-fase {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 0 0;
    border-radius: 15.047px;
    background: var(--White, #FFF);
    box-shadow: 22.571px 14.295px 73.73px #c1c1c13d
}

.card-fase .wrapp-img {
    position: relative;
    width: 100%
}

.card-fase .wrapp-img img {
    width: 100%;
    object-fit: cover;
    border-top-left-radius: 15.047px;
    border-top-right-radius: 15.047px;
    display: flex;
    max-height: 225.706px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.762px;
    align-self: stretch
}

.card-fase .wrapp-img .logo-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    transition: all .3s ease
}

.card-fase .wrapp-img .logo-icon:hover {
    transform: scale(1.5);
    transition: all .3s ease
}

.card-fase .wrapp-img .angka {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 68.464px;
    height: 50.408px;
    padding: 22.571px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 7.524px;
    border-radius: 15.047px 0 37.618px 37.618px;
    background: var(--Base-Green, #0A9E33);
    color: var(--White, #FFF);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.card-fase .text {
    display: flex;
    padding: 22.571px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15.047px;
    align-self: stretch;
    color: var(--Text-Primary, #000);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 23.323px
}

.menu-nav {
    position: relative;
    white-space: nowrap
}

.menu-nav .drop-navs-item {
    font-style: normal;
    font-family: Poppins, sans-serif;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    color: #fff;
    width: max-content;
    opacity: .7;
    position: relative
}

.menu-nav .drop-navs-item:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background-color: currentColor;
    transition: width .3s ease
}

.menu-nav .drop-navs-item:hover:after,
.menu-nav .drop-navs-item.active:after {
    width: 100%;
    opacity: .9
}

.menu-nav .drop-navs-item:hover,
.menu-nav .drop-navs-item.active {
    opacity: .9
}

.menu-nav .drop-menu {
    border: none !important;
    border-radius: 8px !important;
    background: var(--Base-White, #FFF);
    box-shadow: 0 4px 100px #00000005
}

.menu-nav .drop-menu .drop-item {
    width: 100%
}

.menu-nav .drop-menu li {
    width: 100%;
    border: none !important
}

.menu-nav .drop-menu li a {
    width: 100%;
    color: var(--Base-Grey, #646363);
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.42px;
    display: flex;
    padding: 7.5px 18.75px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border: none;
    text-decoration: none
}

.menu-nav .drop-menu li a:hover {
    color: #fff;
    border: none;
    transition: none !important;
    background: var(--Base-Green, #0A9E33)
}

.menu-nav .drop-menu.show li {
    width: 100%;
    border: none !important
}

.menu-nav .drop-menu.show li a {
    width: 100%;
    color: var(--Base-Grey, #646363);
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.42px;
    display: flex;
    padding: 7.5px 18.75px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border: none;
    text-decoration: none
}

.menu-nav .drop-menu.show li a:hover {
    color: #fff;
    background: var(--Base-Green, #0A9E33)
}

.menu-nav:hover .drop-menu {
    display: flex;
    flex-direction: column;
    padding: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    background: var(--Base-White, #FFF);
    box-shadow: 0 4px 100px #00000005
}

.menu-nav:hover .drop-menu .drop-item {
    width: 100%
}

.menu-nav:hover .drop-menu li {
    width: 100%;
    border: none !important
}

.menu-nav:hover .drop-menu li a {
    width: 100%;
    color: var(--Base-Grey, #646363);
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.42px;
    display: flex;
    padding: 7.5px 18.75px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border: none;
    text-decoration: none
}

.menu-nav:hover .drop-menu li a:hover {
    color: #fff;
    background: var(--Base-Green, #0A9E33)
}

.menu-nav:hover .drop-menu.show li {
    width: 100%;
    border: none !important
}

.menu-nav:hover .drop-menu.show li a {
    width: 100%;
    color: var(--Base-Grey, #646363);
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.42px;
    display: flex;
    padding: 7.5px 18.75px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border: none;
    text-decoration: none
}

.menu-nav:hover .drop-menu.show li a:hover {
    color: #fff;
    background: var(--Base-Green, #0A9E33)
}

.menu-lang .lang-choise {
    width: fit-content !important;
    display: flex;
    height: 26.667px;
    padding: 5.333px 8.533px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border: none;
    border-radius: 10px;
    background: #ffffff21;
    color: var(--Base-White, #FFF);
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px
}

.menu-lang .lang-choise img {
    transform: scale(.7)
}

.menu-lang .lang-choise:hover {
    background: var(--Base-Green, #0A9E33) !important;
    color: var(--Base-White, #FFF) !important
}

.menu-lang .submenu-lang {
    position: absolute;
    top: 15px;
    min-width: 100px;
    width: fit-content !important;
    border-radius: 8px;
    background: var(--Base-White, #FFF);
    box-shadow: 0 4px 100px #00000005
}

.menu-lang .submenu-lang li {
    width: 100% !important
}

.menu-lang .submenu-lang li .menu-lang-other {
    width: 100% !important;
    transform: scale(.7)
}

.menu-lang .submenu-lang li .menu-lang-other:hover {
    color: #fff;
    background: var(--Base-Green, #0A9E33)
}

@media (min-width: 1200px) {

    .menu-nav .drop-menu li a,
    .menu-nav .drop-menu.show li a,
    .menu-nav:hover .drop-menu li a,
    .menu-nav:hover .drop-menu.show li a {
        font-size: 14px;
        padding: 10px 25px
    }

    .menu-lang .lang-choise {
        height: 50px;
        padding: 10px 16px;
        gap: 10px;
        font-size: 16px
    }

    .menu-lang .lang-choise img {
        transform: scale(1)
    }

    .menu-lang .submenu-lang {
        min-width: 70px;
        top: 20px
    }

    .menu-lang .submenu-lang li .menu-lang-other {
        transform: scale(1)
    }
}

.modal {
    overflow-y: auto !important
}

.modal-dialog.modal-sm {
    max-width: 440px
}

.modal-dialog.modal-md {
    max-width: 607px
}

.modal-dialog.modal-md {
    max-width: 807px
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.modal .spin {
    animation: spin 2s linear infinite
}

.modal .modal-content {
    background: #fff;
    padding: 0;
    box-shadow: 0 4px 10px 3px #0000000f;
    border-radius: 16px !important;
    border: none;
    overflow: hidden
}

.modal .modal-content .modal-head {
    padding: 30px 30px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--Dark-300, #2c2c2c)
}

.modal .modal-content .modal-head.plain {
    padding: 30px 24px 0;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.modal .modal-content .modal-head.plain h1 {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    color: #000;
    margin-bottom: 0
}

.modal .modal-content .modal-head .icons {
    width: 41px;
    height: 41px
}

.modal .modal-content .modal-head h3 {
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    color: #000;
    margin-bottom: 0
}

.modal .modal-content .modal-head button {
    padding: 0;
    background: transparent;
    height: 25px;
    width: 41px;
    display: flex;
    align-content: center;
    justify-content: center
}

.modal .modal-content .modal-head button img,
.modal .modal-content .modal-head button svg {
    width: 16px;
    height: 16px
}

.modal .modal-content .modal-body {
    border-bottom: 1px solid var(--Dark-300, #2c2c2c);
    padding: 24px
}

.modal .modal-content .modal-body.no-padding-top {
    padding-top: 12px
}

.modal .modal-content .modal-body .content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    color: var(--Gray-200, #a9a3a3);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -.8px
}

.modal .modal-content .modal-body h1 {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    color: #000;
    margin-bottom: 0;
    line-height: normal
}

.modal .modal-content .modal-body h2 {
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    color: #000
}

.modal .modal-content .modal-body h2.light {
    font-weight: 400;
    color: #000
}

.modal .modal-content .modal-body h2.light span {
    color: #000
}

.modal .modal-content .modal-body h3 {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    color: #fcbb65;
    margin-bottom: 0;
    line-height: normal
}

.modal .modal-content .modal-body .product-detail {
    display: grid;
    grid-template-columns: 202px 1fr;
    gap: 20px
}

.modal .modal-content .modal-body .product-detail .image-wrapper {
    width: 100%
}

.modal .modal-content .modal-body .product-detail .image-wrapper img {
    height: 100%
}

.modal .modal-content .modal-body .product-detail.w-134 {
    grid-template-columns: 134px 1fr
}

.modal .modal-content .modal-body .product-detail .text h3 {
    color: green;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -.65px
}

.modal .modal-content .modal-body .product-detail .text p {
    color: var(--Gray-200, #a9a3a3);
    text-align: justify;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.65px
}

.modal .modal-content .modal-body .product-detail .text .orange {
    color: #fcbb65;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.65px
}

.modal .modal-content .modal-body .product-detail .text .orangeProduct {
    color: #fcbb65;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.modal .modal-content .modal-body .product-detail-recipe {
    display: flex;
    justify-content: center;
    margin-bottom: 20px
}

.modal .modal-content .modal-body .product-detail-recipe .image-wrapper {
    width: 100%
}

.modal .modal-content .modal-body .product-detail-recipe .image-wrapper img {
    border-radius: 10px;
    height: 100%
}

.modal .modal-content .modal-body .product-detail-recipe.w-134 {
    grid-template-columns: 134px 1fr;
    margin-left: 50px
}

.modal .modal-content .modal-body .product-detail-recipe .text h3 {
    color: green;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -.65px
}

.modal .modal-content .modal-body .product-detail-recipe .text a,
.modal .modal-content .modal-body .product-detail-recipe .text span {
    color: var(--Gray-200, #a9a3a3);
    text-align: justify;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.65px
}

.modal .modal-content .modal-body .product-detail-recipe .image-wrapper {
    width: 254px;
    margin: 0 auto;
    text-align: center
}

.modal .modal-content .modal-body .product-detail-recipe .image-wrapper img {
    width: 100%;
    height: auto
}

.modal .modal-content .modal-body .modal-body-recipe .middle-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    margin-bottom: 15px;
    width: 100%;
    text-align: center
}

.modal .modal-content .modal-body .modal-body-recipe .left-text {
    justify-self: start;
    font-weight: 700;
    color: #7b7878
}

.modal .modal-content .modal-body .modal-body-recipe .right-text {
    justify-self: end;
    font-weight: 700;
    color: #7b7878
}

.modal .modal-content .modal-body .modal-body-recipe .text {
    margin-bottom: 15px
}

.modal .modal-content .modal-body .separator {
    width: 372px;
    height: 1px;
    background-color: var(--Dark-300, #7b7878);
    margin: 20px auto
}

.modal .modal-content .modal-body .orange {
    color: #fcbb65 !important;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.65px
}

.modal .modal-content .modal-body .modal-body-recipe a {
    color: #fff;
    text-align: justify;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.65px
}

.modal .modal-content .modal-body .modal-body-recipe h2,
.modal .modal-content .modal-body .modal-body-recipe h1 {
    color: #7b7878;
    text-align: justify;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -.65px
}

.modal .modal-content .modal-body .product-detail-recipe .text p {
    color: var(--Gray-200, #a9a3a3);
    text-align: justify;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.65px;
    margin-top: 15px
}

.modal .modal-content .modal-body p {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    color: green;
    margin-bottom: 0
}

.modal .modal-content .modal-body p.p-bold {
    font-weight: 500;
    color: #000
}

.modal .modal-content .modal-body .svg-center {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px
}

.modal .modal-content .modal-body .svg-center svg {
    width: 100%
}

.modal .modal-content .modal-body .dummy-image {
    object-fit: cover;
    width: 100%;
    height: 322px;
    border-radius: 28.98px;
    border: 6.9px solid #ab7a00
}

.modal .modal-content .modal-body .dummy-image.sm {
    border: 0;
    border-radius: 15px;
    height: 180px
}

.modal .modal-content .modal-body .custom-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: none !important
}

.modal .modal-content .modal-body .custom-switch input {
    height: fit-content !important;
    box-shadow: none !important
}

.modal .modal-content .modal-body .custom-switch label {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important
}

.modal .modal-content .modal-body input::placeholder {
    color: #c5c1c1 !important;
    font-size: 12px;
    font-style: normal;
    font-weight: 400
}

.modal .modal-content .modal-body img.image-xsm {
    width: 21px;
    height: 21px
}

.modal .modal-content .modal-body.body-flex-col {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.modal .modal-content .modal-body label {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
    color: #fff;
    margin-bottom: 0
}

.modal .modal-content .modal-body .detail-transaction {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.modal .modal-content .modal-body .detail-transaction .title {
    align-self: stretch;
    display: flex;
    justify-content: space-between
}

.modal .modal-content .modal-body .detail-transaction .title img {
    height: 74px;
    width: 74px
}

.modal .modal-content .modal-body .detail-transaction .title .item {
    display: flex;
    flex-direction: column
}

.modal .modal-content .modal-body .detail-transaction .title .item.align-end {
    align-items: end
}

.modal .modal-content .modal-body .detail-transaction .title .item.detail {
    color: #7b7878;
    font-size: 13px;
    padding-left: 25px;
    margin-top: -20px
}

.modal .modal-content .modal-body .detail-transaction .title .item.detail span {
    color: #7b7878 !important
}

.modal .modal-content .modal-body .detail-transaction hr {
    width: 100%;
    margin: 0;
    background-color: #2c2c2c
}

.modal .modal-content .modal-body .detail-transaction p {
    color: var(--Primary-200, #fcbb65);
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -.8px;
    margin-bottom: 0;
    display: flex;
    justify-content: space-between;
    align-self: stretch
}

.modal .modal-content .modal-body .detail-transaction p.item {
    color: #a9a3a3;
    font-weight: 400
}

.modal .modal-content .modal-body .detail-transaction p.item span {
    color: #fff;
    max-width: 250px;
    min-width: 150px;
    text-align: end
}

.modal .modal-content .modal-body .detail-transaction p.item.small {
    font-size: 13px
}

.modal .modal-content .modal-body .detail-transaction p.item.detail {
    color: #7b7878;
    font-size: 13px;
    padding-left: 25px;
    margin-top: -20px
}

.modal .modal-content .modal-body .detail-transaction p.item.detail span {
    color: #7b7878 !important
}

.modal .modal-content .modal-body .detail-transaction p.total {
    color: #fff;
    font-weight: 600
}

.modal .modal-content .modal-footer {
    background-color: #000;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 16px 24px;
    border: none
}

.modal .modal-content .modal-footer button {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    color: #000;
    padding: 16px;
    height: 55px;
    border-radius: 6px;
    background: #fff;
    width: 100%
}

.modal .modal-content .modal-footer button.btn-transparent {
    border: none;
    background-color: green;
    color: #fff
}

.modal .modal-content .modal-footer.cashier {
    grid-template-columns: 1fr
}

.modal .modal-content .modal-button-row {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
    gap: 16px
}

.modal-footer {
    background-color: #fff;
    display: inline-block
}

.modal-body-recipe .middle-section a {
    color: #7b7878 !important;
    text-align: justify;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.65px;
    text-decoration: none
}

.orange {
    color: #fcbb65 !important;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.65px
}

.align-center {
    text-align: center
}

#recipe-slogan {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

#recipe-instruction ol {
    font-size: 12px;
    margin-left: 15px;
    color: #a9a3a3;
    font-weight: 400
}

.carousel .carousel-indicators {
    bottom: 20px
}

.carousel .carousel-indicators button {
    width: 100%
}

.carousel .carousel-indicators button img {
    width: 300px;
    height: 50px;
    object-fit: cover
}

.carousel .carousel-inner .carousel-item {
    position: none
}

.carousel .carousel-inner .carousel-item img {
    height: 600px !important;
    object-fit: cover
}

.row {
    display: flex;
    flex-direction: row
}

.homepage {
    overflow-x: hidden
}

.homepage.snap-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.homepage.snap-container::-webkit-scrollbar {
    display: none
}

@media (max-width: 768px) {
    .homepage.snap-container {
        scroll-snap-type: y proximity;
        height: 100dvh;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain
    }
}

.homepage .scroll-indicator {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000
}

.homepage .scroll-indicator .scroll-dots {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.homepage .scroll-indicator .scroll-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ffffff80;
    border: 2px solid rgba(10, 158, 51, .3);
    cursor: pointer;
    transition: all .3s ease
}

.homepage .scroll-indicator .scroll-dots .dot:hover {
    background-color: #0a9e33b3;
    transform: scale(1.2)
}

.homepage .scroll-indicator .scroll-dots .dot.active {
    background-color: #0a9e33;
    border-color: #0a9e33;
    transform: scale(1.3)
}

@media (max-width: 768px) {
    .homepage .scroll-indicator {
        display: none
    }
}

.homepage .snap-section {
    scroll-snap-align: center;
    scroll-snap-stop: normal;
    scroll-margin-top: 100px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    position: relative
}

.homepage .snap-section [data-aos] {
    pointer-events: none
}

.homepage .snap-section [data-aos].aos-animate {
    pointer-events: auto
}

@media (max-width: 768px) {
    .homepage .snap-section {
        min-height: 100dvh;
        scroll-snap-align: start;
        scroll-snap-stop: normal
    }

    .homepage .snap-section.hero-section-new,
    .homepage .snap-section.article {
        justify-content: flex-start
    }
}

.homepage .snap-section.partnership,
.homepage .snap-section.chartdiv {
    justify-content: flex-start;
    padding: 2rem 0
}

@media (max-width: 768px) {

    .homepage .snap-section.partnership,
    .homepage .snap-section.chartdiv {
        padding: 1rem 0
    }
}

.homepage .milestones {
    display: flex;
    padding: 0 25px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    background: var(--Base-Green, #0a9e33)
}

.homepage .milestones .wrapp-miles {
    display: flex;
    padding: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    flex: 1 0 0
}

.homepage .milestones .wrapp-miles p {
    font-style: normal;
    text-align: center;
    color: var(--Base-White, #fff);
    margin-bottom: 0;
    text-transform: capitalize
}

.homepage .milestones .wrapp-miles p.title {
    font-size: 14px;
    font-weight: 600;
    line-height: normal
}

.homepage .milestones .wrapp-miles p.ket {
    font-size: 11px;
    font-weight: 300;
    line-height: normal
}

.homepage .milestones .line {
    height: 25px;
    width: 1px;
    border: 1px solid #fff
}

.homepage .snap-section:has(.partnership) {
    flex-direction: column
}

.homepage .partnership {
    padding: 30px 150px;
    background: var(--Base-White, #fff)
}

.homepage .partnership .text-1 {
    font-size: 30px;
    color: #0a9e33;
    font-weight: 500;
    text-align: center
}

.homepage .partnership .text-2 {
    color: #646363;
    text-align: center
}

.homepage .partnership p.title {
    color: var(--Base-Green, #0a9e33);
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 4px;
    letter-spacing: -1.2px
}

.homepage .partnership .group-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-top: 50px
}

.homepage .partnership .group-logo img {
    width: 150px;
    filter: grayscale(100%);
    transition: all .3s ease
}

.homepage .partnership .group-logo img:hover {
    filter: grayscale(0%);
    transform: scale(1.1)
}

@keyframes slide {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(-100%)
    }
}

.homepage .partnership .logos {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    margin-top: 40px
}

.homepage .partnership .logos:hover .logos-slide {
    animation-play-state: paused
}

.homepage .partnership .logos-slide {
    display: inline-block;
    animation: 30s slide infinite linear
}

.homepage .partnership .logos-slide img {
    height: 40px;
    width: auto;
    margin: 0 30px
}

.homepage .artikel {
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.homepage .artikel .wrapper {
    display: flex;
    flex-direction: row;
    padding: 50px 50px 50px 150px;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 50px
}

.homepage .artikel .wrapper .left {
    width: 75%
}

.homepage .artikel .wrapper .left p {
    text-align: justify;
    font-family: Poppins, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px
}

.homepage .artikel .wrapper .right {
    width: 25%;
    padding: 0 30px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.homepage .artikel .wrapper .right .item {
    padding-top: 10px
}

.homepage .artikel .wrapper .right .item p {
    color: var(--Base-Grey, #646363);
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -.32px;
    text-transform: capitalize
}

.homepage .artikel .wrapper .right .item span {
    color: var(--Base-Grey, #646363);
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.28px;
    text-transform: capitalize
}

.homepage .casper {
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 40px 30px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center
}

.homepage .casper .wrapper .top-desc {
    display: flex;
    flex-direction: column;
    gap: 25px
}

.homepage .casper .wrapper .top-desc h5 {
    width: 100%;
    text-align: center;
    color: var(--Base-Green, #0a9e33);
    font-family: Poppins, sans-serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -.72px
}

.homepage .casper .wrapper .top-desc p {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    text-align: center !important
}

.homepage .casper .wrapper .top-desc p span {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.homepage .casper .wrapper .top-desc p span.green {
    color: #0a9e33
}

.homepage .casper .wrapper .bot-desc {
    position: relative;
    height: 400px;
    margin-top: -70px
}

.homepage .casper .wrapper .bot-desc .green {
    color: #0a9e33 !important
}

.homepage .casper .wrapper .bot-desc .casper-mid {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center
}

.homepage .casper .wrapper .bot-desc .casper-mid button {
    background: none;
    color: #8e8989;
    text-align: center;
    font-size: 55px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.homepage .casper .wrapper .bot-desc .arrow-ca {
    position: absolute;
    top: 33%;
    left: 25%
}

.homepage .casper .wrapper .bot-desc .arrow-ca img {
    width: 224.904px;
    height: 61px
}

.homepage .casper .wrapper .bot-desc .position-absolute {
    position: absolute
}

.homepage .casper .wrapper .bot-desc .position-absolute.top-left {
    top: 22%;
    left: -30px
}

.homepage .casper .wrapper .bot-desc .position-absolute.top-right {
    top: 22%;
    right: -30px
}

.homepage .casper .wrapper .bot-desc .position-absolute.bot-left {
    top: 72.5%;
    left: -30px
}

.homepage .casper .wrapper .bot-desc .position-absolute.bot-right {
    top: 72.5%;
    right: -30px
}

.homepage .casper .wrapper .bot-desc .content-ca {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
    gap: 10px
}

.homepage .casper .wrapper .bot-desc .content-ca img {
    width: 55px;
    height: 55px
}

.homepage .casper .wrapper .bot-desc .content-ca .text-ca {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center
}

.homepage .casper .wrapper .bot-desc .content-ca .text-ca .top-text {
    font-family: Poppins, sans-serif;
    color: #898e8a;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 5px
}

.homepage .casper .wrapper .bot-desc .content-ca .text-ca p {
    color: #898e8a;
    text-align: center;
    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px
}

.homepage .casper .wrapper .bot-desc .arrow-s {
    position: absolute;
    top: 33%;
    right: 25%
}

.homepage .casper .wrapper .bot-desc .arrow-s img {
    width: 224.904px;
    height: 61px
}

.homepage .casper .wrapper .bot-desc .arrow-p {
    position: absolute;
    top: 72%;
    left: 25%
}

.homepage .casper .wrapper .bot-desc .arrow-p img {
    width: 224.904px;
    height: 61px
}

.homepage .casper .wrapper .bot-desc .arrow-er {
    position: absolute;
    top: 72%;
    right: 25%
}

.homepage .casper .wrapper .bot-desc .arrow-er img {
    width: 224.904px;
    height: 61px
}

.homepage .certificate {
    background-color: #e2ffe8;
    background-size: cover;
    padding: 40px 30px;
    display: flex;
    justify-content: center;
    align-items: center
}

.homepage .certificate .wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    justify-content: start
}

.homepage .certificate .wrapper .top h1 {
    color: var(--Base-Black, #252525);
    text-align: center;
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: -1.2px
}

.homepage .certificate .wrapper .top p {
    color: var(--Base-Grey, #646363);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px
}

.homepage .certificate .wrapper .certificate-container .swiper-wrapper .swiper-slide {
    position: relative
}

.homepage .certificate .notification {
    border-radius: 10.254px;
    background: var(--Base-Black, #252525);
    box-shadow: 0 63.574px 65.624px -10.254px #0117301f;
    padding: 0 11px;
    position: absolute;
    z-index: 3;
    top: 80%;
    left: 10%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 5px;
    opacity: 0;
    transition: opacity .5s ease;
    width: 80%
}

.homepage .certificate .notification span {
    color: var(--Base-White, #fff);
    font-size: 9.916px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
    letter-spacing: -.103px
}

.homepage .certificate .notification p {
    font-size: 11.238px;
    color: var(--Base-White, #fff);
    font-weight: 500
}

.homepage .klien-kami {
    background-color: #0a9e33;
    background-size: cover;
    display: flex;
    padding-left: 0;
    justify-content: end;
    align-items: center
}

.homepage .klien-kami .wrapper {
    display: flex;
    flex-direction: row
}

.homepage .klien-kami .wrapper .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding-left: 80px;
    margin-bottom: 70px
}

.homepage .klien-kami .wrapper .left .top-desc {
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-family: Poppins, sans-serif
}

.homepage .klien-kami .wrapper .left .top-desc span {
    color: #84ffa6;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.homepage .klien-kami .wrapper .left .top-desc h1 {
    color: var(--Base-White, #fff);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -1.08px
}

.homepage .klien-kami .wrapper .left .top-desc p {
    color: #fff;
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 0
}

.homepage .klien-kami .wrapper .left .out-bottom-desc {
    display: flex;
    gap: 12px;
    width: 100%
}

.homepage .klien-kami .wrapper .left .out-bottom-desc .bottom-desc {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 12px;
    width: 100%
}

.homepage .klien-kami .wrapper .left .out-bottom-desc .bottom-desc .item {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 15px
}

.homepage .klien-kami .wrapper .left .out-bottom-desc .bottom-desc .item svg {
    width: 24px;
    height: 24px
}

.homepage .klien-kami .wrapper .left .out-bottom-desc .bottom-desc .item span {
    color: var(--Base-White, #fff);
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.homepage .klien-kami .wrapper .image-wrapper {
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: flex-end
}

.homepage .klien-kami .wrapper .image-wrapper img {
    height: 100%;
    width: 100%;
    object-fit: cover
}

.homepage .chartdiv {
    background: var(--Base-White, #fff);
    display: flex;
    gap: 25px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%
}

.homepage .chartdiv .map {
    display: flex;
    position: relative;
    justify-content: center
}

.homepage .chartdiv .map img {
    width: 50%;
    height: auto
}

.homepage .chartdiv .map .tooltip-item {
    position: absolute;
    cursor: pointer;
    transition: transform .3s ease
}

.homepage .chartdiv .map .tooltip-item:hover {
    transform: scale(1.1)
}

.homepage .chartdiv .map .tooltip-item img {
    width: 16px
}

.homepage .chartdiv .map .tooltip-item.riau {
    top: 27.5%;
    left: 31.75%
}

.homepage .chartdiv .map .tooltip-item.jambi {
    top: 38%;
    left: 32.5%
}

.homepage .chartdiv .map .tooltip-item.sumsel {
    top: 50%;
    left: 34%
}

.homepage .chartdiv .map .tooltip-item.lampung {
    top: 60%;
    left: 35%
}

.homepage .chartdiv .map .tooltip-item.jawa-barat {
    top: 72%;
    left: 37.25%
}

.homepage .chartdiv .map .tooltip-item.jawa-tengah {
    top: 77%;
    left: 40%
}

.homepage .chartdiv .map .tooltip-item.surabaya {
    top: 83%;
    left: 44.5%
}

.homepage .chartdiv .map .tooltip-item.bali {
    top: 84%;
    left: 46.15%
}

.homepage .chartdiv .map .tooltip-item.ntb {
    top: 87%;
    left: 48.5%
}

.homepage .chartdiv .map .tooltip-item.ss {
    top: 60%;
    left: 51.3%
}

.homepage .chartdiv .map .tooltip-item.sb {
    top: 44%;
    left: 50.9%
}

.homepage .chartdiv .map .tooltip-item.kalteng {
    top: 38%;
    left: 44.5%
}

.homepage .chartdiv .map .tooltip-item.kalut {
    top: 5%;
    left: 47.5%
}

.homepage .chartdiv .map .tooltip-item.kalbar {
    top: 20%;
    left: 48%
}

.homepage .chartdiv .map .tooltip-item.kalsel {
    top: 48%;
    left: 46.3%
}

.homepage .chartdiv .map .tooltip-item.singkawang {
    top: 28%;
    left: 42%
}

.homepage .chartdiv .map .tooltip-item .tooltip-content {
    padding: 5px;
    font-size: 11px
}

.homepage .chartdiv .map .tooltip-item .tooltip-content ul {
    padding-left: 15px
}

.homepage .chartdiv .map .tooltip-item .tooltip-content {
    white-space: nowrap;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translate(-50%);
    background-color: #fff;
    color: #000;
    padding: 5px;
    width: fit-content;
    border-radius: 10px;
    box-shadow: 0 4px 8px #0000001a;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    font-size: 11px;
    z-index: 3
}

.homepage .chartdiv .map .tooltip-item .tooltip-content:after {
    content: "";
    position: absolute;
    width: fit-content;
    top: 100%;
    left: 50%;
    transform: translate(-50%);
    border-width: 8px;
    border-style: solid;
    border-color: #ffffff transparent transparent transparent
}

.homepage .chartdiv .map .tooltip-item .tooltip-content ul {
    color: #6c6b6b
}

.homepage .chartdiv .map .tooltip-item:hover .tooltip-content {
    opacity: 1;
    visibility: visible
}

.homepage .chartdiv .d-flex {
    gap: 10px;
    margin-top: 0
}

.homepage .chartdiv .d-flex .main-item {
    flex-direction: row;
    gap: 20px;
    display: flex
}

.homepage .chartdiv .d-flex .main-item .item-list {
    gap: 20px;
    display: flex;
    flex-direction: row
}

.homepage .chartdiv .d-flex .main-item .item-list .item {
    display: flex;
    gap: 15px;
    align-items: center;
    font-size: 14px
}

.homepage .chartdiv .d-flex .main-item .item-list .item img {
    width: 20px;
    height: 20px
}

.homepage .chartdiv .item {
    font-size: 16px
}

.homepage .chartdiv .item img {
    width: 35px;
    height: 35px
}

.homepage .chartdiv h6 {
    color: var(--Base-Green, #0a9e33);
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -1.2px;
    margin-bottom: 0
}

.homepage .chartdiv h5 {
    color: #000;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -1px;
    margin-bottom: 0;
    margin-top: 15px
}

.homepage .chartdiv p {
    width: 100%;
    color: var(--Base-Grey, #757575);
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-style: normal;
    text-align: justify;
    font-weight: 500;
    line-height: 22px;
    margin-bottom: 0
}

.homepage .legalitas {
    background: var(--BG-Green, #f6fff9);
    background-size: cover;
    padding: 40px 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-family: Poppins, sans-serif
}

.homepage .legalitas .wrapper {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between
}

.homepage .legalitas .wrapper .tabs {
    flex: 1;
    position: relative;
    width: 100%;
    justify-content: center;
    display: flex;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 15px;
    border-bottom: 2px solid #e8e8e8
}

.homepage .legalitas .wrapper .tab {
    flex: 1;
    padding: 10px 5px;
    font-weight: 500;
    font-size: 14px;
    color: #757575;
    position: relative;
    transition: color .3s;
    text-align: center
}

.homepage .legalitas .wrapper .tab.active {
    color: #0a9e33
}

.homepage .legalitas .wrapper .underline {
    position: absolute;
    bottom: -1px;
    height: 2px;
    background-color: #0a9e33;
    transition: all .5s ease;
    left: 0 !important
}

.homepage .legalitas .wrapper .tab-content {
    display: none;
    opacity: 0;
    transform: translate(-30px);
    transition: opacity .5s ease, transform .5s ease;
    padding-left: 20px;
    margin-top: 0 !important
}

.homepage .legalitas .wrapper .tab-content ul {
    color: #847f7f;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px
}

.homepage .legalitas .wrapper .tab-content #legalitas-list-1 li,
.homepage .legalitas .wrapper .tab-content #legalitas-list-2 li,
.homepage .legalitas .wrapper .tab-content #legalitas-list-3 li {
    cursor: pointer
}

.homepage .legalitas .wrapper .tab-content #legalitas-list-1 li.active,
.homepage .legalitas .wrapper .tab-content #legalitas-list-2 li.active,
.homepage .legalitas .wrapper .tab-content #legalitas-list-3 li.active {
    color: green;
    font-weight: 700
}

.homepage .legalitas .wrapper .tab-content #legalitas-list-1 li:hover,
.homepage .legalitas .wrapper .tab-content #legalitas-list-2 li:hover,
.homepage .legalitas .wrapper .tab-content #legalitas-list-3 li:hover {
    opacity: 70%
}

.homepage .legalitas .wrapper .tab-content.active {
    display: block;
    opacity: 1;
    transform: translate(0)
}

.homepage .legalitas .wrapper .tab-content.fade-right {
    animation: fadeRight .7s ease-out .2s
}

@keyframes fadeRight {
    0% {
        opacity: 0;
        transform: translate(-30px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

.homepage .legalitas .wrapper span {
    color: #0a9e33;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.homepage .legalitas .wrapper h1 {
    color: #252525;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px
}

.homepage .legalitas .wrapper p {
    color: var(--Base-Grey, #757575);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px
}

.homepage .legalitas .wrapper .right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 15px
}

.homepage .legalitas .wrapper .right h2 {
    color: var(--Base-Black, #252525);
    font-family: Poppins, sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: -1.2px
}

.homepage .legalitas .wrapper .right p {
    color: var(--Base-Grey, #646363);
    font-family: Poppins, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 33px
}

.homepage .legalitas .wrapper .right ul {
    padding-left: 17px;
    color: var(--Base-Grey, #646363);
    font-family: Poppins, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 41px
}

.homepage .snap-section:has(.penghargaan-new-wrapper) {
    flex-direction: column
}

.homepage .penghargaan-new {
    background: #e2ffe8
}

.homepage .penghargaan-new-wrapper {
    padding: 0 20px;
    gap: 15px
}

.homepage .penghargaan-new-wrapper .top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch
}

.homepage .penghargaan-new-wrapper .top span {
    color: var(--Base-Green, #0a9e33) !important;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.homepage .penghargaan-new-wrapper .top h2 {
    color: var(--Base-Black, #252525);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.homepage .penghargaan-new-wrapper .top p {
    color: var(--Base-Grey, #757575);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 33px
}

.homepage .penghargaan-new-wrapper .image-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    gap: 20px;
    align-self: stretch;
    width: 100%
}

.homepage .penghargaan-new-wrapper .image-wrapper .top,
.homepage .penghargaan-new-wrapper .image-wrapper .bottom {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 20px;
    align-self: stretch;
    width: 100%
}

.homepage .penghargaan-new-wrapper .image-wrapper .top .image-container,
.homepage .penghargaan-new-wrapper .image-wrapper .bottom .image-container {
    position: relative;
    width: 100%;
    height: 350px;
    margin-bottom: 0
}

.homepage .penghargaan-new-wrapper .image-wrapper .top .image-container img,
.homepage .penghargaan-new-wrapper .image-wrapper .bottom .image-container img {
    border-radius: 10px;
    transition: transform .3s ease-in-out;
    height: 100%;
    object-fit: cover;
    width: 100%;
    z-index: 1
}

.homepage .penghargaan-new-wrapper .image-wrapper .top .image-container:hover:before,
.homepage .penghargaan-new-wrapper .image-wrapper .bottom .image-container:hover:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, #0000, #00782140 70.25%, #00782180 83.97%);
    z-index: 2;
    border-radius: 10px
}

.homepage .penghargaan-new-wrapper .image-wrapper .top .image-container:hover:after,
.homepage .penghargaan-new-wrapper .image-wrapper .bottom .image-container:hover:after {
    content: "Penghargaan Excellent Safety Performance";
    position: absolute;
    bottom: 5%;
    left: 40%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    color: #fff;
    font-weight: 400;
    text-align: left;
    z-index: 3
}

.homepage .penghargaan-new-wrapper .image-wrapper .top .image-container:hover img,
.homepage .penghargaan-new-wrapper .image-wrapper .bottom .image-container:hover img {
    transform: scale(.98)
}

.homepage .penghargaan-new .swiper-mobile {
    display: block;
    width: 100%;
    padding-bottom: 50px
}

@media (min-width: 719px) {
    .homepage .penghargaan-new .swiper-mobile {
        display: none
    }
}

.homepage .penghargaan-new .swiper-mobile .swiper-wrapper {
    display: flex;
    width: 100%
}

.homepage .penghargaan-new .swiper-mobile .swiper-wrapper .swiper-slide {
    display: flex;
    flex-direction: column !important;
    gap: 20px;
    width: 100%;
    flex-shrink: 0
}

.homepage .penghargaan-new .swiper-mobile .swiper-wrapper .swiper-slide .top,
.homepage .penghargaan-new .swiper-mobile .swiper-wrapper .swiper-slide .center,
.homepage .penghargaan-new .swiper-mobile .swiper-wrapper .swiper-slide .bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%
}

.homepage .penghargaan-new .swiper-mobile .swiper-wrapper .swiper-slide .top img,
.homepage .penghargaan-new .swiper-mobile .swiper-wrapper .swiper-slide .center img,
.homepage .penghargaan-new .swiper-mobile .swiper-wrapper .swiper-slide .bottom img {
    width: calc(50% - 5px);
    height: 150px;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 10px;
    transition: transform .3s ease-in-out
}

.homepage .penghargaan-new .swiper-mobile .swiper-wrapper .swiper-slide .top img:hover,
.homepage .penghargaan-new .swiper-mobile .swiper-wrapper .swiper-slide .center img:hover,
.homepage .penghargaan-new .swiper-mobile .swiper-wrapper .swiper-slide .bottom img:hover {
    transform: scale(.95)
}

.homepage .penghargaan-new .swiper-mobile .swiper-wrapper .swiper-slide .center img:first-child {
    width: 100%
}

.homepage .penghargaan-new .swiper-mobile .swiper-wrapper .swiper-slide .center img:last-child {
    width: calc(50% - 5px)
}

.homepage .penghargaan-new .swiper-mobile .swiper-wrapper .swiper-slide .bottom {
    justify-content: center
}

.homepage .penghargaan-new .swiper-mobile .swiper-wrapper .swiper-slide .bottom img {
    width: 100%
}

.homepage .penghargaan-new .swiper-mobile .swiper-pagination {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    justify-content: center;
    gap: 8px
}

.homepage .penghargaan-new .swiper-mobile .swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #0a9e334d;
    cursor: pointer;
    transition: all .3s ease
}

.homepage .penghargaan-new .swiper-mobile .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #0a9e33;
    transform: scale(1.2)
}

.homepage .penghargaan-new .swiper-dekstop {
    display: none
}

.homepage .slogan {
    background: var(--Base-White, #fff);
    padding: 100px 150px
}

.homepage .slogan .wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 60px
}

.homepage .slogan .wrapper .top-slogan {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center
}

.homepage .slogan .wrapper .top-slogan h1 {
    color: var(--Base-Black, #252525);
    text-align: center;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 53px
}

.homepage .slogan .wrapper .top-slogan p {
    padding: 0 20px;
    color: var(--Base-Grey, #757575);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px
}

.homepage .slogan .wrapper .slogan-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
    align-items: flex-start
}

.homepage .slogan .wrapper .slogan-content .item {
    display: flex;
    flex-direction: column;
    padding: 20px 85px;
    align-items: center
}

.homepage .slogan .wrapper .slogan-content .item p {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    color: #757575;
    text-align: center
}

.homepage .slogan .wrapper .slogan-content .item span {
    padding-top: 27px;
    font-size: 25px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: var(--Base-Black, #252525);
    text-align: center
}

.homepage .craddle {
    background: var(--Base-Green, #0a9e33);
    background-image: url(/build/assets/bg-craddle-KI04eFN7.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 91px 150px;
    display: flex;
    justify-content: center;
    align-items: center
}

.homepage .craddle .wrapper .left {
    flex-grow: 1
}

.homepage .craddle .wrapper p {
    width: 531px
}

.homepage .article {
    background-color: var(--Base-White, #fff);
    padding: 40px 0
}

.homepage .article .wrapper {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    align-self: stretch
}

.homepage .article .wrapper .top-article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch
}

.homepage .article .wrapper .top-article span {
    color: var(--Base-Green, #0a9e33);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.homepage .article .wrapper .top-article h1 {
    color: var(--Base-Black, #252525);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px
}

.homepage .article .wrapper .content-article {
    display: flex;
    flex-direction: column
}

.homepage .article .wrapper .content-article .row {
    display: flex;
    flex-direction: row !important;
    justify-content: flex-start;
    margin-top: 20px;
    gap: 20px
}

.homepage .article .wrapper .content-article .row .image-wrapper1 {
    width: 32% !important;
    max-height: 100% !important;
    display: flex;
    flex-direction: column !important;
    gap: 15px;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease;
    perspective: 1000px
}

.homepage .article .wrapper .content-article .row .image-wrapper1 img {
    width: auto;
    object-fit: cover;
    border-radius: 10px;
    transition: all .3s ease
}

.homepage .article .wrapper .content-article .row .image-wrapper1 .foto-article {
    width: auto !important;
    height: 220px !important
}

.homepage .article .wrapper .content-article .row .image-wrapper1 .image-wrapper:hover {
    transform: rotateY(10deg) rotateX(10deg) scale(1.05);
    box-shadow: 0 20px 30px #0000004d
}

.homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc {
    width: 100%;
    margin-top: 0
}

.homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc span {
    color: #252525;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc p {
    font-size: 12px;
    color: #757575;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 0;
    margin-bottom: 0;
    text-align: justify;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc h1 {
    font-size: 14px;
    color: #0a9e33;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc .image-date {
    margin-top: 12px
}

.homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc .image-date span {
    color: #000;
    font-size: 10px;
    font-style: normal;
    font-weight: 400
}

.homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc .group-author {
    display: flex;
    gap: 0px;
    align-items: center;
    margin-top: 5px
}

.homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc .group-author img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px
}

.homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc .group-author h2 {
    font-size: 10px;
    color: #523a48;
    font-weight: 500;
    margin-bottom: 0
}

.homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc .group-author span {
    font-size: 10px;
    color: #8d8d8d;
    font-weight: 500;
    margin-bottom: 0
}

.homepage .article .read-more {
    cursor: pointer;
    width: 100%;
    overflow: hidden;
    color: var(--Base-Green, #0A9E33);
    text-align: center;
    text-overflow: ellipsis;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 38px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font
}

@media (max-width: 1200px) {
    .homepage.snap-section {
        scroll-snap-type: none !important
    }

    .homepage .snap-section {
        min-height: 0 !important
    }

    .homepage .milestones {
        padding: 25px
    }

    .homepage .milestones .wrapp-miles p.title {
        font-size: 19px
    }

    .homepage .milestones .wrapp-miles p.ket {
        font-size: 14px
    }

    .homepage .milestones .line {
        height: 33px
    }

    .homepage .casper {
        padding: 40px 80px;
        height: auto;
        min-height: unset
    }

    .homepage .casper .wrapper .top-desc h5 {
        font-size: 18.2px
    }

    .homepage .casper .wrapper .top-desc p {
        font-size: 12px
    }

    .homepage .casper .wrapper .bot-desc {
        height: 400px;
        scale: .9;
        margin-top: -140px
    }

    .homepage .casper .wrapper .bot-desc .casper-mid {
        top: 52%
    }

    .homepage .casper .wrapper .bot-desc .casper-mid button {
        font-size: 36.267px
    }

    .homepage .casper .wrapper .bot-desc .arrow-ca {
        top: 35%;
        left: 26%
    }

    .homepage .casper .wrapper .bot-desc .arrow-ca img {
        width: 122.185px;
        height: 35.733px
    }

    .homepage .casper .wrapper .bot-desc .content-ca.position-absolute.bot-right,
    .homepage .casper .wrapper .bot-desc .content-ca.position-absolute.bot-left {
        top: 74%
    }

    .homepage .casper .wrapper .bot-desc .content-ca img {
        width: 50px;
        height: 50px
    }

    .homepage .casper .wrapper .bot-desc .content-ca .text-ca p {
        width: 200px
    }

    .homepage .casper .wrapper .bot-desc .content-ca .text-ca .top-text {
        font-size: 15px
    }

    .homepage .casper .wrapper .bot-desc .content-ca .text-ca p {
        font-size: 12px;
        line-height: 15px
    }

    .homepage .casper .wrapper .bot-desc .arrow-s {
        top: 35%;
        right: 26%
    }

    .homepage .casper .wrapper .bot-desc .arrow-s img {
        width: 122.185px;
        height: 35.733px
    }

    .homepage .casper .wrapper .bot-desc .arrow-p {
        top: 73%
    }

    .homepage .casper .wrapper .bot-desc .arrow-p img {
        width: 122.185px;
        height: 35.733px
    }

    .homepage .casper .wrapper .bot-desc .arrow-er {
        top: 73%
    }

    .homepage .casper .wrapper .bot-desc .arrow-er img {
        width: 122.185px;
        height: 35.733px
    }

    .homepage .klien-kami {
        padding-left: 43px
    }

    .homepage .klien-kami.snap-section {
        min-height: 0
    }

    .homepage .klien-kami .wrapper {
        flex-direction: row;
        padding-left: 0;
        gap: 35.5px
    }

    .homepage .klien-kami .wrapper .left {
        padding: 53px 0;
        gap: 0px;
        margin-bottom: 0
    }

    .homepage .klien-kami .wrapper .left .top-desc {
        gap: 10px
    }

    .homepage .klien-kami .wrapper .left .top-desc span {
        font-size: 14px
    }

    .homepage .klien-kami .wrapper .left .top-desc h1 {
        font-size: 16px
    }

    .homepage .klien-kami .wrapper .left .top-desc p {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc {
        display: grid
    }
}

@media (max-width: 1200px) and (min-width: 719px) and (max-width: 1200px) {
    .homepage .klien-kami .wrapper .left .out-bottom-desc {
        grid-template-columns: repeat(1, 1fr);
        margin-top: 15px
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(1) {
        order: 1
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(6) {
        order: 2
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(2) {
        order: 3
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(7) {
        order: 4
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(3) {
        order: 5
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(8) {
        order: 6
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(4) {
        order: 7
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(9) {
        order: 8
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(5) {
        order: 9
    }
}

@media (max-width: 1200px) {
    .homepage .klien-kami .wrapper .left .out-bottom-desc .bottom-desc {
        display: contents
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .bottom-desc .item svg {
        width: 16px;
        height: 16px
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .bottom-desc .item span {
        font-size: 12px
    }

    .homepage .klien-kami .wrapper .image-wrapper img {
        object-fit: cover
    }

    .homepage .snap-section {
        min-height: 0
    }

    .homepage .snap-section .partnership {
        padding: 40px 80px
    }

    .homepage .snap-section .partnership .logos img {
        width: auto;
        height: 39.996px
    }

    .homepage .chartdiv {
        padding: 0 80px 40px;
        gap: 25px
    }

    .homepage .chartdiv h5 {
        font-size: 14.5px
    }

    .homepage .chartdiv .map .tooltip-item.jakarta {
        top: 70%;
        left: 26%
    }

    .homepage .chartdiv .map .tooltip-item.surabaya {
        top: 78%;
        left: 39.6%
    }

    .homepage .chartdiv .d-flex {
        gap: 8px;
        margin-bottom: 10px;
        margin-top: 0
    }

    .homepage .chartdiv .d-flex .main-item {
        flex-direction: row;
        width: 600px;
        flex-wrap: wrap
    }

    .homepage .chartdiv .d-flex .main-item .item-list {
        display: flex;
        flex-direction: row;
        gap: 8px
    }

    .homepage .chartdiv .d-flex .main-item .item-list .item {
        font-size: 13px
    }

    .homepage .chartdiv .d-flex .main-item .item-list .item img {
        width: 18px;
        height: 18px
    }

    .homepage .certificate {
        padding: 40px 80px
    }

    .homepage .certificate .wrapper {
        flex-direction: column;
        gap: 15px
    }

    .homepage .certificate .wrapper .top h1 {
        font-size: 18px
    }

    .homepage .certificate .wrapper .top p {
        font-size: 13px
    }

    .homepage .certificate .wrapper .left img {
        width: 219.542px
    }

    .homepage .certificate .wrapper .left .bg-green {
        width: 196.476px;
        height: 274.562px
    }

    .homepage .certificate .wrapper .right {
        gap: 8px;
        margin-top: 0
    }

    .homepage .certificate .wrapper .right h2 {
        line-height: 25px
    }

    .homepage .certificate .wrapper .right p {
        line-height: 17.6px
    }

    .homepage .certificate .wrapper .right ul {
        line-height: 20px
    }

    .homepage .certificate .wrapper .right ul li {
        margin-left: 10px
    }

    .homepage .certificate .wrapper .notification {
        left: 15%;
        gap: 8px
    }

    .homepage .certificate .wrapper .notification span {
        font-size: 10.735px;
        line-height: 26.66px
    }

    .homepage .certificate .wrapper .notification p {
        font-size: 10.166px;
        font-weight: 600
    }

    .homepage .legalitas {
        padding: 40px 80px
    }

    .homepage .legalitas .wrapper .tabs {
        margin-bottom: 13px;
        width: 100%;
        overflow-x: hidden
    }

    .homepage .legalitas .wrapper .tab {
        padding: 5.333px 10.667px;
        width: 33%
    }

    .homepage .legalitas .wrapper .underline {
        width: 100px
    }

    .homepage .legalitas .wrapper .tab-content .d-flex {
        display: flex;
        flex-direction: column-reverse;
        gap: 20px
    }

    .homepage .legalitas .wrapper .tab-content ul {
        line-height: 18px
    }

    .homepage .legalitas .wrapper h1 {
        line-height: 28.267px
    }

    .homepage .legalitas .wrapper p {
        line-height: 22px
    }

    .homepage .penghargaan-new {
        padding: 40px 80px
    }

    .homepage .penghargaan-new .penghargaan-new-wrapper {
        padding: 0
    }

    .homepage .penghargaan-new .penghargaan-new-wrapper .top span {
        color: var(--Base-Green, #0A9E33);
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }

    .homepage .penghargaan-new .penghargaan-new-wrapper .top h2 {
        color: var(--Base-Black, #252525);
        font-family: Poppins;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
        line-height: 29.334px
    }

    .homepage .penghargaan-new .penghargaan-new-wrapper .top p {
        color: var(--Base-Grey, #757575);
        font-size: 13px;
        font-style: normal;
        font-weight: 400;
        line-height: normal
    }

    .homepage .penghargaan-new .image-wrapper {
        gap: 15px;
        justify-content: center
    }

    .homepage .penghargaan-new .image-wrapper .top {
        display: flex;
        flex-direction: row
    }

    .homepage .penghargaan-new .image-wrapper .top .image-container {
        height: 193.717px
    }

    .homepage .penghargaan-new .image-wrapper .top,
    .homepage .penghargaan-new .image-wrapper .bottom {
        gap: 15px
    }

    .homepage .penghargaan-new .image-wrapper .top img,
    .homepage .penghargaan-new .image-wrapper .bottom img {
        aspect-ratio: 1/1;
        height: 210px;
        object-fit: cover
    }
}

@media (max-width: 1200px) and (min-width: 992px) {

    .homepage .penghargaan-new .image-wrapper .top img,
    .homepage .penghargaan-new .image-wrapper .bottom img {
        height: 270px
    }
}

@media (max-width: 1200px) {
    .homepage .penghargaan-new .swiper-mobile {
        display: none !important;
        flex-direction: row !important
    }

    .homepage .article {
        padding: 30px 80px
    }

    .homepage .article .wrapper {
        padding: 0;
        margin-top: 0;
        gap: 11px
    }

    .homepage .article .wrapper .top-article {
        gap: 16px
    }

    .homepage .article .wrapper .top-article h1 {
        max-width: 700px
    }

    .homepage .article .wrapper .content-article .row {
        flex-direction: row;
        gap: 0
    }

    .homepage .article .wrapper .content-article .row .image-wrapper1 {
        width: 33%;
        flex-direction: column;
        max-height: 100%;
        padding: 0 7px
    }

    .homepage .article .wrapper .content-article .row .image-wrapper1 .foto-article {
        height: 150px !important
    }

    .homepage .article .wrapper .content-article .row .image-wrapper1 img {
        width: 100%;
        height: 100%
    }

    .homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc {
        margin-top: 1px;
        width: unset
    }

    .homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc p {
        text-align: start
    }

    .homepage .article .read-more {
        padding-top: 20px;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
        width: 100%
    }
}

@media (max-width: 719px) {
    .homepage .snap-section {
        min-height: 0 !important
    }

    .homepage .penghargaan-new {
        padding: 40px 150px
    }

    .homepage .penghargaan-new-wrapper {
        padding: 0 20px;
        gap: 15px
    }

    .homepage .penghargaan-new-wrapper .top {
        gap: 10px
    }

    .homepage .penghargaan-new-wrapper .top span {
        font-size: 16px
    }

    .homepage .penghargaan-new-wrapper .top h2 {
        font-size: 24px
    }

    .homepage .penghargaan-new-wrapper .top p {
        font-size: 16px
    }

    .homepage .penghargaan-new-wrapper .image-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
        gap: 20px;
        align-self: stretch;
        width: 100%
    }

    .homepage .penghargaan-new-wrapper .image-wrapper .top,
    .homepage .penghargaan-new-wrapper .image-wrapper .bottom {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 20px;
        align-self: stretch;
        width: 102%
    }

    .homepage .penghargaan-new-wrapper .image-wrapper .top .image-container,
    .homepage .penghargaan-new-wrapper .image-wrapper .bottom .image-container {
        position: relative;
        width: 100%;
        height: auto;
        margin-bottom: 0
    }

    .homepage .penghargaan-new-wrapper .image-wrapper .top .image-container img,
    .homepage .penghargaan-new-wrapper .image-wrapper .bottom .image-container img {
        border-radius: 0;
        transition: transform .3s ease-in-out;
        height: 100%;
        object-fit: cover;
        width: 100%;
        z-index: 1;
        width: 101px;
        height: 126px
    }

    .homepage .penghargaan-new-wrapper .image-wrapper .top .image-container:hover:before,
    .homepage .penghargaan-new-wrapper .image-wrapper .bottom .image-container:hover:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(180deg, #0000, #00782140 70.25%, #00782180 83.97%);
        z-index: 2;
        border-radius: 10px
    }

    .homepage .penghargaan-new-wrapper .image-wrapper .top .image-container:hover:after,
    .homepage .penghargaan-new-wrapper .image-wrapper .bottom .image-container:hover:after {
        content: "Penghargaan Excellent Safety Performance";
        position: absolute;
        bottom: 5%;
        left: 40%;
        transform: translate(-50%, -50%);
        font-size: 13px;
        color: #fff;
        font-weight: 400;
        font-size: 10px;
        text-align: left;
        z-index: 3
    }

    .homepage .penghargaan-new-wrapper .image-wrapper .top .image-container:hover img,
    .homepage .penghargaan-new-wrapper .image-wrapper .bottom .image-container:hover img {
        transform: scale(.98)
    }

    .homepage .notification {
        position: absolute;
        left: 12.5% !important
    }

    .homepage .notification .mt-1 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 10px !important
    }

    .homepage .notification .mt-1 span {
        font-weight: 400;
        font-size: 11.735px;
        line-height: 20.66px
    }

    .homepage .notification .mt-1 p {
        font-weight: 700;
        font-size: 12.166px;
        white-space: nowrap
    }

    .homepage .casper.snap-section {
        min-height: 0 !important
    }

    .homepage .casper {
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        padding: 40px 30px;
        margin-bottom: 40px;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .homepage .casper .wrapper .top-desc {
        display: flex;
        flex-direction: column;
        gap: 25px
    }

    .homepage .casper .wrapper .top-desc h5 {
        width: 100%;
        text-align: center;
        color: var(--Base-Green, #0a9e33);
        font-family: Poppins, sans-serif;
        font-size: 14px !important;
        font-style: italic;
        font-weight: 600;
        line-height: normal;
        letter-spacing: -.72px
    }

    .homepage .casper .wrapper .top-desc h5 span {
        display: block
    }

    .homepage .casper .wrapper .top-desc p {
        color: var(--Base-Grey, #646363);
        text-align: justify !important;
        font-family: Poppins, sans-serif;
        font-size: 12px !important;
        font-style: normal;
        font-weight: 400;
        line-height: 22px
    }

    .homepage .casper .wrapper .top-desc p span {
        color: var(--Base-Grey, #646363);
        text-align: justify;
        font-family: Poppins, sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px
    }

    .homepage .casper .wrapper .top-desc p span.green {
        color: #0a9e33
    }

    .homepage .casper .wrapper .bot-desc {
        position: relative;
        height: 300px;
        margin-top: -90px
    }

    .homepage .casper .wrapper .bot-desc .green {
        color: #0a9e33 !important
    }

    .homepage .casper .wrapper .bot-desc .casper-mid {
        position: absolute;
        top: 47%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .homepage .casper .wrapper .bot-desc .casper-mid button {
        background: none;
        color: #8e8989;
        text-align: center;
        font-size: 22px;
        font-style: normal;
        font-weight: 700;
        line-height: normal
    }

    .homepage .casper .wrapper .bot-desc .arrow-ca {
        position: absolute;
        top: 33%;
        left: 23%
    }

    .homepage .casper .wrapper .bot-desc .arrow-ca img {
        width: 63.704px;
        height: 22.351px
    }

    .homepage .casper .wrapper .bot-desc .position-absolute {
        position: absolute
    }

    .homepage .casper .wrapper .bot-desc .position-absolute.top-left {
        top: 30%;
        left: 0%
    }

    .homepage .casper .wrapper .bot-desc .position-absolute.top-right {
        top: 30%;
        right: 0%
    }

    .homepage .casper .wrapper .bot-desc .position-absolute.bot-left {
        top: 67.5%;
        left: 0%
    }

    .homepage .casper .wrapper .bot-desc .position-absolute.bot-right {
        top: 67.5%;
        right: 0
    }

    .homepage .casper .wrapper .bot-desc .content-ca {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 30%;
        gap: 7px
    }

    .homepage .casper .wrapper .bot-desc .content-ca img {
        width: 28px;
        height: 28px
    }

    .homepage .casper .wrapper .bot-desc .content-ca .text-ca {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center
    }

    .homepage .casper .wrapper .bot-desc .content-ca .text-ca .top-text {
        font-family: Poppins, sans-serif;
        color: #898e8a;
        font-size: 10px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 2px
    }

    .homepage .casper .wrapper .bot-desc .content-ca .text-ca p {
        color: #898e8a;
        text-align: center;
        font-family: Poppins, sans-serif;
        font-size: 7.5px;
        font-style: normal;
        font-weight: 500;
        line-height: 9.341px;
        width: unset
    }

    .homepage .casper .wrapper .bot-desc .arrow-s {
        position: absolute;
        top: 33%;
        right: 23%
    }

    .homepage .casper .wrapper .bot-desc .arrow-s img {
        width: 63.704px;
        height: 22.351px
    }

    .homepage .casper .wrapper .bot-desc .arrow-p {
        position: absolute;
        top: 65%;
        left: 23%
    }

    .homepage .casper .wrapper .bot-desc .arrow-p img {
        width: 63.704px;
        height: 22.351px
    }

    .homepage .casper .wrapper .bot-desc .arrow-er {
        position: absolute;
        top: 65%;
        right: 23%
    }

    .homepage .casper .wrapper .bot-desc .arrow-er img {
        width: 63.704px;
        height: 22.351px
    }

    .homepage .klien-kami.snap-section {
        min-height: 0 !important
    }

    .homepage .klien-kami {
        background-color: #0a9e33;
        background-size: cover;
        display: flex;
        padding-left: 0;
        justify-content: end;
        align-items: center
    }

    .homepage .klien-kami .wrapper {
        display: flex;
        flex-direction: column;
        gap: 0px
    }

    .homepage .klien-kami .wrapper .left {
        order: 2;
        display: flex;
        width: 100%;
        gap: 20px;
        flex-direction: column;
        padding: 40px 30px;
        margin-bottom: 0
    }

    .homepage .klien-kami .wrapper .left .top-desc {
        display: flex;
        flex-direction: column;
        gap: 11px;
        font-family: Poppins, sans-serif
    }

    .homepage .klien-kami .wrapper .left .top-desc span {
        color: #84ffa6;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }

    .homepage .klien-kami .wrapper .left .top-desc h1 {
        color: var(--Base-White, #fff);
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0px
    }

    .homepage .klien-kami .wrapper .left .top-desc p {
        color: #fff;
        text-align: justify;
        font-size: 12px !important;
        font-style: normal;
        font-weight: 400;
        line-height: 20px
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .bottom-desc {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        gap: 12px;
        width: 100%
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .bottom-desc .item {
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 15px
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .bottom-desc .item svg {
        width: 24px;
        height: 24px
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .bottom-desc .item span {
        color: var(--Base-White, #fff);
        font-family: Poppins, sans-serif;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc {
        display: grid
    }
}

@media (max-width: 719px) and (max-width: 719px) {
    .homepage .klien-kami .wrapper .left .out-bottom-desc {
        grid-template-columns: repeat(1, 1fr)
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(1) {
        order: 1
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(6) {
        order: 2
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(2) {
        order: 3
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(7) {
        order: 4
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(3) {
        order: 5
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(8) {
        order: 6
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(4) {
        order: 7
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(9) {
        order: 8
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .item:nth-child(5) {
        order: 9
    }
}

@media (max-width: 719px) {
    .homepage .klien-kami .wrapper .left .out-bottom-desc .bottom-desc {
        display: contents
    }

    .homepage .klien-kami .wrapper .left .out-bottom-desc .bottom-desc .item span {
        font-size: 12px
    }

    .homepage .klien-kami .wrapper .image-wrapper {
        display: flex;
        justify-content: end;
        width: 100%;
        aspect-ratio: 3/4
    }

    .homepage .klien-kami .wrapper .image-wrapper img {
        object-fit: cover;
        width: 100%
    }

    .homepage .partnerships.snap-section {
        min-height: 0 !important
    }

    .homepage .snap-section .partnership {
        padding: 40px 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: var(--Base-White, #fff)
    }

    .homepage .snap-section .partnership .title {
        color: var(--Base-Green, #0a9e33);
        text-align: center;
        font-size: 14px !important;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: -1.2px;
        width: 100%;
        margin: 0 auto
    }

    .homepage .snap-section .partnership .text-1 {
        font-size: 30px;
        color: #0a9e33;
        font-weight: 500;
        text-align: center
    }

    .homepage .snap-section .partnership .text-2 {
        color: #646363;
        text-align: center
    }

    .homepage .snap-section .partnership p.title {
        color: var(--Base-Green, #0a9e33);
        text-align: center;
        font-size: 14px !important;
        margin-bottom: 25px !important;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        width: 240px !important;
        letter-spacing: -1.2px;
        width: 100%;
        margin: 0 auto
    }

    .homepage .snap-section .partnership .group-logo {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 50px;
        margin-top: 50px
    }

    .homepage .snap-section .partnership .group-logo img {
        width: 150px;
        filter: grayscale(100%);
        transition: all .3s ease
    }

    .homepage .snap-section .partnership .group-logo img:hover {
        filter: grayscale(0%);
        transform: scale(1.1)
    }

    @keyframes slide {
        0% {
            transform: translate(0)
        }

        to {
            transform: translate(-100%)
        }
    }

    .homepage .snap-section .partnership .logos {
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        margin-top: 0
    }

    .homepage .snap-section .partnership .logos:hover .logos-slide {
        animation-play-state: paused
    }

    .homepage .snap-section .partnership .logos-slide {
        display: inline-block;
        animation: 30s slide infinite linear
    }

    .homepage .snap-section .partnership .logos-slide img {
        height: 40px;
        margin: 0 30px
    }

    .homepage .chartdiv {
        background: var(--Base-White, #fff);
        display: flex;
        padding: 0 30px 40px;
        gap: 25px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%
    }

    .homepage .chartdiv .map {
        display: flex;
        position: relative;
        justify-content: center;
        margin-bottom: 0
    }

    .homepage .chartdiv .map img {
        width: 100%
    }

    .homepage .chartdiv .d-flex.flex-col-25.w-100.mt-36.align-items-center {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        align-items: center
    }

    .homepage .chartdiv .d-flex.flex-col-25.w-100.mt-36.align-items-center h5 {
        font-size: 11px !important;
        font-style: normal;
        font-weight: 500 !important;
        line-height: normal;
        letter-spacing: -1px !important;
        width: 250px
    }

    .homepage .chartdiv .d-flex.flex-col-25.w-100.mt-36.align-items-center h6 {
        color: var(--Base-Green, #0a9e33);
        font-family: Poppins;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: -1.2px;
        margin-bottom: 10;
        text-align: center
    }

    .homepage .chartdiv .d-flex.flex-col-25.w-100.mt-36.align-items-center .main-item {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        gap: 15px
    }

    .homepage .chartdiv .d-flex.flex-col-25.w-100.mt-36.align-items-center .main-item .item-list {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px 25px;
        width: 100%
    }

    .homepage .chartdiv .d-flex.flex-col-25.w-100.mt-36.align-items-center .main-item .item-list .item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: #646363;
        font-family: Poppins, sans-serif;
        font-weight: 400;
        white-space: nowrap;
        flex: 0 1 auto;
        min-width: fit-content
    }

    .homepage .chartdiv .d-flex.flex-col-25.w-100.mt-36.align-items-center .main-item .item-list .item img {
        width: 16px;
        height: 16px;
        flex-shrink: 0
    }

    .homepage .chartdiv .d-flex.flex-col-25.w-100.mt-36.align-items-center .main-item.d-flex.flex-row-15.w-100.justify-content-center {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%
    }

    .homepage .chartdiv .d-flex.flex-col-25.w-100.mt-36.align-items-center .main-item.d-flex.flex-row-15.w-100.justify-content-center .item-list {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px 20px;
        width: 100%
    }

    .homepage .chartdiv .d-flex.flex-col-25.w-100.mt-36.align-items-center .main-item.d-flex.flex-row-15.w-100.justify-content-center .item-list .item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #646363;
        font-family: Poppins, sans-serif;
        font-weight: 400
    }

    .homepage .chartdiv .d-flex.flex-col-25.w-100.mt-36.align-items-center .main-item.d-flex.flex-row-15.w-100.justify-content-center .item-list .item img {
        width: 14px;
        height: 14px
    }

    .homepage .chartdiv .d-flex.flex-col-25.w-100.mt-36.align-items-center .location-grid-mobile {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px 10px;
        width: 100%;
        max-width: 350px;
        margin: 0 auto;
        justify-items: center
    }

    .homepage .chartdiv .d-flex.flex-col-25.w-100.mt-36.align-items-center .location-grid-mobile .item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #646363;
        font-family: Poppins, sans-serif;
        font-weight: 400;
        text-align: left;
        justify-content: flex-start;
        width: 100%
    }

    .homepage .chartdiv .d-flex.flex-col-25.w-100.mt-36.align-items-center .location-grid-mobile .item img {
        width: 14px;
        height: 14px;
        flex-shrink: 0
    }

    .homepage .chartdiv .d-flex.flex-col-25.w-100.mt-36.align-items-center h5 {
        color: #000;
        font-family: Poppins;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: -1px;
        margin-bottom: 0;
        margin-top: 15px;
        text-align: center
    }

    .homepage .chartdiv .item {
        font-size: 12px;
        color: #646363
    }

    .homepage .chartdiv .item img {
        width: 14px;
        height: 14px
    }

    .homepage .certificate {
        padding: 40px 30px
    }

    .homepage .certificate.snap-section {
        min-height: 0 !important
    }

    .homepage .certificate .wrapper .top h1 {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal
    }

    .homepage .certificate .wrapper .top p {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal
    }

    .homepage .legalitas {
        padding: 40px 30px;
        background-color: #fff
    }

    .homepage .legalitas.snap-section {
        min-height: 0 !important
    }

    .homepage .legalitas .wrapper {
        gap: 0 !important
    }

    .homepage .legalitas .wrapper .tab-content {
        padding: 0 !important
    }

    .homepage .legalitas .wrapper .tab-content ul {
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: 20px
    }

    .homepage .legalitas .wrapper .tabs {
        display: flex;
        justify-content: start
    }

    .homepage .legalitas .wrapper .tabs .tab {
        font-size: 13px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }

    .homepage .legalitas .wrapper span {
        font-size: 12px !important;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }

    .homepage .legalitas .wrapper h1 {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal
    }

    .homepage .legalitas .wrapper p {
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 20px
    }

    .homepage .penghargaan-new {
        padding: 40px 30px;
        background-color: #e2ffe8
    }

    .homepage .penghargaan-new.snap-section {
        min-height: 0 !important
    }

    .homepage .penghargaan-new .penghargaan-new-wrapper {
        padding: 0
    }

    .homepage .penghargaan-new .penghargaan-new-wrapper .top {
        gap: 0 !important
    }

    .homepage .penghargaan-new .penghargaan-new-wrapper .top span {
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        color: #0a9e33 !important
    }

    .homepage .penghargaan-new .penghargaan-new-wrapper .bottom h2 {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal
    }

    .homepage .penghargaan-new .penghargaan-new-wrapper .bottom p {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal
    }

    .homepage .penghargaan-new .penghargaan-new-wrapper .swiper.swiper-mobile .swiper-wrapper .swiper-slide {
        display: flex;
        flex-direction: row !important
    }

    .homepage .penghargaan-new .penghargaan-new-wrapper .swiper.swiper-mobile .swiper-wrapper .swiper-slide .top {
        gap: 5.5px !important
    }

    .homepage .penghargaan-new .penghargaan-new-wrapper .swiper.swiper-mobile .swiper-wrapper .swiper-slide .top img {
        width: auto;
        height: 127px
    }

    .homepage .article {
        padding: 40px 30px
    }

    .homepage .article.snap-section {
        min-height: 0 !important
    }

    .homepage .article .wrapper {
        margin-top: 0 !important
    }

    .homepage .article .wrapper .top-article span {
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }

    .homepage .article .wrapper .top-article h1 {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal
    }

    .homepage .article .wrapper .content-article .row {
        display: flex;
        flex-direction: column !important
    }

    .homepage .article .wrapper .content-article .row .image-wrapper1 {
        display: flex;
        flex-direction: row !important
    }

    .homepage .article .wrapper .content-article .row .image-wrapper1 .foto-article {
        width: 108px !important;
        height: 86px !important
    }

    .homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc {
        width: 200% !important
    }

    .homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc h1 {
        display: none
    }

    .homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc .image-date {
        margin: 0 !important
    }

    .homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc span {
        overflow: unset;
        width: 200%;
        -webkit-line-clamp: 4
    }

    .homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc p {
        -webkit-line-clamp: 1;
        width: 200%
    }

    .homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc .group-author {
        width: 200%
    }

    .homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc .group-author img {
        width: 14px !important;
        height: 14px !important
    }

    .homepage .article .wrapper .content-article .row .image-wrapper1 .image-desc .group-author h2 {
        margin-left: -5px
    }

    .homepage .article .read-more {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 22px;
        width: 100%
    }
}

.tentang-kami {
    overflow-x: hidden !important
}

.tentang-kami.snap-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.tentang-kami.snap-container::-webkit-scrollbar {
    display: none
}

@media (max-width: 768px) {
    .tentang-kami.snap-container {
        scroll-snap-type: y proximity;
        height: 100dvh;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain
    }
}

.tentang-kami .snap-section {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    scroll-margin-top: 100px;
    min-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.tentang-kami .hero {
    position: relative;
    width: 100%;
    height: 30vh;
    overflow-x: hidden !important
}

.tentang-kami .hero.wt-overlay {
    position: relative;
    width: 100%;
    height: 30vh
}

.tentang-kami .hero.wt-overlay:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(178deg, #305a4fa6 49.08%, #3b605391 57.5%, #5e83737d 66.38%, #a6cbb452 82.12%)
}

.tentang-kami .hero.wt-overlay-article {
    position: relative;
    width: 100%;
    height: 30vh
}

.tentang-kami .hero.wt-overlay-article:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #0009, #0009)
}

.tentang-kami .hero.wt-overlay-article .group-text {
    width: 70%;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6.395px;
    padding-left: 25px;
    align-self: stretch;
    top: 40%;
    left: 25%;
    transform: translateY(-50%)
}

.tentang-kami .hero.wt-overlay-article .group-text p {
    font-style: normal;
    line-height: normal
}

.tentang-kami .hero.wt-overlay-article .group-text p.text-1 {
    color: #fff;
    text-align: center;
    font-weight: 600;
    text-transform: capitalize
}

.tentang-kami .hero.wt-overlay-article .group-text p.desc {
    color: #fff;
    font-size: 8px;
    font-weight: 400;
    line-height: normal;
    text-transform: capitalize
}

.tentang-kami .hero.wt-overlay-article .hero-footer {
    position: absolute;
    bottom: 10%;
    left: 10%;
    width: 1185px;
    height: 120px;
    display: flex;
    padding: 20px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    background: #232323;
    width: 80%;
    z-index: 1
}

.tentang-kami .hero.wt-overlay-article .hero-footer p {
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 0;
    width: 80%
}

.tentang-kami .hero.wt-overlay-article .hero-footer .show {
    background: var(--Base-Green, #0a9e33);
    color: var(--Base-White, #fff);
    font-size: 16px;
    padding: 10px 30px;
    height: 55px
}

.tentang-kami .hero img {
    width: 100%;
    height: 30vh
}

.tentang-kami .hero .group-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    z-index: 2
}

.tentang-kami .hero .group-text .text-1 {
    color: var(--Base-White, #fff);
    text-align: center;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 800;
    line-height: normal
}

.tentang-kami .hero .group-text .text-2 {
    color: #fff;
    text-align: center;
    font-family: Poppins, sans-serif;
    font-size: 9px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.tentang-kami .history {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 80px;
    background-color: #fff;
    align-items: center
}

.tentang-kami .history .left {
    width: 30%
}

.tentang-kami .history .left img {
    width: 100%
}

.tentang-kami .history .title-1 {
    font-size: 24px;
    font-weight: 700;
    line-height: normal
}

.tentang-kami .history .title-1 a {
    color: #0a9e33
}

.tentang-kami .history .right {
    width: 60%;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 20px
}

.tentang-kami .history .right .title-1 {
    font-size: 24px;
    font-weight: 700;
    line-height: normal
}

.tentang-kami .history .right .title-1 a {
    color: #0a9e33
}

.tentang-kami .history .right p {
    margin-bottom: 0;
    width: 100%
}

.tentang-kami .history .right p.text-1 {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px
}

.tentang-kami .history .right .text-2 {
    width: 100%;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
    color: #646363;
    text-align: justify
}

.tentang-kami .history .right .text-2:hover {
    text-decoration: underline
}

.tentang-kami .video-section {
    background: #fff;
    padding: 0
}

.tentang-kami .video-section-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    align-self: stretch
}

.tentang-kami .video-section-wrapper .left {
    width: 50%
}

.tentang-kami .video-section-wrapper .left .video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.tentang-kami .video-section-wrapper .left .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10
}

.tentang-kami .video-section-wrapper .left .text-1 {
    font-size: 24px;
    font-weight: 600;
    color: #252525;
    margin-bottom: 10px
}

.tentang-kami .video-section-wrapper .left .text-1 span {
    color: #0a9e33
}

.tentang-kami .video-section-wrapper .left .text-2 {
    font-size: 14px;
    font-weight: 500;
    color: #646363;
    margin-bottom: 20px;
    text-align: justify
}

.tentang-kami .video-section-wrapper .left video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.tentang-kami .video-section-wrapper .right {
    width: 50%
}

.tentang-kami .video {
    position: relative;
    background: #e1ffe8
}

.tentang-kami .video .videoo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative
}

.tentang-kami .video .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 10
}

.tentang-kami .video .play-icon img {
    width: 30px;
    height: 30px
}

.tentang-kami .visi-misi-new {
    background: #f7fff9 !important;
    padding: 40px 150px
}

.tentang-kami .visi-misi-new-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    align-self: stretch
}

.tentang-kami .visi-misi-new-wrapper .wrapp-text p.title {
    color: var(--Base-Black, #252525);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    font-family: Poppins, sans-serif
}

.tentang-kami .visi-misi-new-wrapper .wrapp-text p.title span {
    font-family: Poppins, sans-serif;
    color: #0a9e33
}

.tentang-kami .visi-misi-new-wrapper .wrapp-text p.desc {
    color: var(--Base-Grey, #646363);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px
}

.tentang-kami .visi-misi-new-wrapper .wrapp-val {
    display: flex;
    flex-direction: column;
    gap: 25px;
    width: 100%
}

.tentang-kami .visi-misi-new-wrapper .wrapp-val .top,
.tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0
}

.tentang-kami .visi-misi-new-wrapper .wrapp-val .top img,
.tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom img {
    border-radius: 28px;
    width: 100%;
    width: 397.421px;
    height: 216px;
    object-fit: cover
}

.tentang-kami .visi-misi-new-wrapper .wrapp-val .top .visi,
.tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom .visi {
    min-width: 600px;
    width: 600px;
    z-index: 1;
    display: flex;
    padding: 20px 18px;
    margin-left: -50px;
    margin-top: 0;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    flex-shrink: 0;
    border-radius: 16px;
    background: var(--Base-White, #fff);
    box-shadow: 0 0 20px #00000014
}

.tentang-kami .visi-misi-new-wrapper .wrapp-val .top .visi p,
.tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom .visi p {
    margin-bottom: 0
}

.tentang-kami .visi-misi-new-wrapper .wrapp-val .top .visi p.title,
.tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom .visi p.title {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.tentang-kami .visi-misi-new-wrapper .wrapp-val .top .visi p.desc,
.tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom .visi p.desc {
    color: #000;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.tentang-kami .visi-misi-new-wrapper .wrapp-val .top .misi,
.tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom .misi {
    min-width: 600px;
    width: 600px;
    z-index: 1;
    display: flex;
    padding: 20px 18px;
    margin-top: 0;
    margin-right: -50px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    flex-shrink: 0;
    border-radius: 16px;
    background: var(--BG-Green, #0a9e33);
    box-shadow: 0 0 20px #00000014
}

.tentang-kami .visi-misi-new-wrapper .wrapp-val .top .misi p,
.tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom .misi p {
    margin-bottom: 0
}

.tentang-kami .visi-misi-new-wrapper .wrapp-val .top .misi p.title,
.tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom .misi p.title {
    color: #fff;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.tentang-kami .visi-misi-new-wrapper .wrapp-val .top .misi p.desc,
.tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom .misi p.desc {
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom {
    flex-direction: column-reverse
}

.tentang-kami .about.slogan-kami {
    padding: 100px 150px
}

.tentang-kami .about.slogan-kami.snap-section,
.tentang-kami .about.our-team.snap-section {
    min-height: 87dvh !important
}

.tentang-kami .slogan-kami {
    background: #f7fff9;
    min-height: max-content
}

.tentang-kami .slogan-kami-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px
}

.tentang-kami .slogan-kami-wrapper .wrapp-top {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.tentang-kami .slogan-kami-wrapper .wrapp-top p {
    margin-bottom: 0
}

.tentang-kami .slogan-kami-wrapper .wrapp-top p.title {
    color: var(--Base-Black, #252525);
    text-align: center;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px
}

.tentang-kami .slogan-kami-wrapper .wrapp-top p.desc {
    color: var(--Base-Grey, #757575);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.tentang-kami .slogan-kami-wrapper .wrapp-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row
}

.tentang-kami .slogan-kami-wrapper .wrapp-bottom .kotak {
    display: flex;
    padding: 20px 36px;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    justify-content: center
}

.tentang-kami .slogan-kami-wrapper .wrapp-bottom .kotak.border-lr {
    position: relative;
    border: none;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: none;
    border-bottom: none
}

.tentang-kami .slogan-kami-wrapper .wrapp-bottom .kotak.border-lr:before,
.tentang-kami .slogan-kami-wrapper .wrapp-bottom .kotak.border-lr:after {
    content: "";
    display: none
}

.tentang-kami .slogan-kami-wrapper .wrapp-bottom .kotak p.title {
    color: var(--Base-Black, #252525);
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.tentang-kami .slogan-kami-wrapper .wrapp-bottom .kotak p.desc {
    color: #757575;
    text-align: center;
    font-size: 12.5px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.tentang-kami .cradle {
    padding: 40px 30px;
    background: #f6fff9;
    position: relative
}

.tentang-kami .cradle:before {
    content: "";
    top: 0;
    right: 0;
    position: absolute;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: 1
}

.tentang-kami .cradle-wrapper {
    display: flex;
    gap: 50px
}

.tentang-kami .cradle-wrapper .left {
    display: flex;
    flex-direction: column;
    width: 60%
}

.tentang-kami .cradle-wrapper .right {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%
}

.tentang-kami .cradle-wrapper .right img {
    width: 100%;
    height: auto;
    object-fit: cover
}

.tentang-kami .cradle-wrapper p.title {
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.tentang-kami .cradle-wrapper p.title span {
    color: #0a9e33
}

.tentang-kami .cradle-wrapper p.desc {
    color: #757575;
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.tentang-kami .value-kami {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 75px 150px;
    background-color: #fff
}

.tentang-kami .value-kami .text-1 {
    font-size: 36px;
    font-weight: 700
}

.tentang-kami .value-kami .text-1 a {
    color: #0a9e33
}

.tentang-kami .value-kami .text-2 {
    font-size: 16px;
    font-weight: 400;
    color: #646363;
    text-align: justify
}

.tentang-kami .value-kami .group-card {
    display: flex;
    gap: 50px;
    margin-top: 50px
}

.tentang-kami .value-kami .group-card .cardbox {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    justify-content: center;
    width: 50%
}

.tentang-kami .value-kami .group-card .cardbox .text-3 {
    font-size: 25px;
    font-weight: 700;
    color: #000;
    text-align: left
}

.tentang-kami .value-kami .group-card .cardbox .text-4 {
    font-size: 15px;
    font-weight: 400;
    color: #646363;
    text-align: justify;
    margin-bottom: 0
}

.tentang-kami .value-kami .group-card .cardbox.active {
    background-color: #0a9e33;
    border: 1px solid #0a9e33
}

.tentang-kami .value-kami .group-card .cardbox.active .text-3,
.tentang-kami .value-kami .group-card .cardbox.active .text-4 {
    color: #fff
}

.tentang-kami .our-team {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #0a9e33;
    min-height: max-content;
    padding: 50px 100px;
    gap: 20px
}

.tentang-kami .our-team .text-1 {
    color: var(--Base-White, #FFF);
    text-align: center;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.tentang-kami .our-team .text-1 span {
    color: #0a9e33
}

.tentang-kami .our-team .text-2 {
    overflow: hidden;
    color: var(--Base-White, #FFF);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px
}

.tentang-kami .our-team .box-person {
    display: flex;
    gap: 50px;
    margin-top: 50px;
    width: 100%
}

.tentang-kami .our-team .card-person {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%
}

.tentang-kami .our-team .card-person img,
.tentang-kami .our-team .card-person p {
    width: 100%
}

.tentang-kami .our-team .card-person p.text-2 {
    font-size: 20px !important;
    font-weight: 600;
    color: #252525;
    margin-bottom: 0;
    margin-top: 10px;
    text-align: start
}

.tentang-kami .our-team .card-person p.text-3 {
    font-size: 14px;
    font-weight: 400;
    color: #646363;
    margin-bottom: 0;
    margin-top: 10px
}

.tentang-kami .our-team .card-person .socmed {
    display: flex;
    gap: 10px;
    margin-top: 10px
}

.tentang-kami .our-team .card-person .socmed .logo {
    padding: 8px 13px;
    border-radius: 10px;
    border: 1px solid #252525;
    cursor: pointer
}

.tentang-kami .snap-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.tentang-kami .snap-container::-webkit-scrollbar {
    display: none
}

@media (max-width: 768px) {
    .tentang-kami .snap-container {
        scroll-snap-type: y proximity;
        height: 100dvh;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain
    }
}

.tentang-kami .scroll-indicator {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000
}

.tentang-kami .scroll-indicator .scroll-dots {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.tentang-kami .scroll-indicator .scroll-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ffffff80;
    border: 2px solid rgba(10, 158, 51, .3);
    cursor: pointer;
    transition: all .3s ease
}

.tentang-kami .scroll-indicator .scroll-dots .dot:hover {
    background-color: #0a9e33b3;
    transform: scale(1.2)
}

.tentang-kami .scroll-indicator .scroll-dots .dot.active {
    background-color: #0a9e33;
    border-color: #0a9e33;
    transform: scale(1.3)
}

@media (max-width: 768px) {
    .tentang-kami .scroll-indicator {
        display: none
    }
}

.tentang-kami .snap-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 100px;
    min-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.tentang-kami .snap-section [data-aos] {
    pointer-events: none
}

.tentang-kami .snap-section [data-aos].aos-animate {
    pointer-events: auto
}

@media (max-width: 768px) {
    .tentang-kami .snap-section {
        min-height: 100dvh;
        scroll-snap-align: start;
        scroll-snap-stop: normal
    }

    .tentang-kami .snap-section.hero-section-new,
    .tentang-kami .snap-section.article {
        justify-content: flex-start
    }
}

.tentang-kami .snap-section.partnership,
.tentang-kami .snap-section.chartdiv {
    justify-content: flex-start;
    padding: 2rem 0
}

@media (max-width: 768px) {

    .tentang-kami .snap-section.partnership,
    .tentang-kami .snap-section.chartdiv {
        padding: 1rem 0
    }
}

@media (max-width: 1200px) {
    .tentang-kami .about.history {
        padding: 60px 80px
    }

    .tentang-kami .about.history.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .history {
        display: flex;
        flex-direction: column;
        gap: 42.667px;
        padding: 0
    }

    .tentang-kami .history .left {
        width: 50%;
        order: 1
    }

    .tentang-kami .history .right {
        order: 2;
        width: 100%
    }

    .tentang-kami .history .right .title-1 {
        font-size: 19px
    }

    .tentang-kami .history .right p.text-1,
    .tentang-kami .history .right .text-2 {
        font-size: 12px
    }

    .tentang-kami .why.video-section {
        margin-bottom: 55px
    }

    .tentang-kami .why.video-section .container .video-section-wrapper {
        display: flex;
        flex-direction: column !important
    }

    .tentang-kami .why.video-section .container .video-section-wrapper .left {
        width: 80dvw
    }

    .tentang-kami .video .play-icon img {
        width: 50px;
        height: 50px
    }

    .tentang-kami .about.visi-misi-new.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .visi-misi-new {
        padding: 60px 80px
    }

    .tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom {
        display: flex;
        justify-content: flex-end
    }

    .tentang-kami .visi-misi-new-wrapper .wrapp-val .top img,
    .tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom img {
        height: 180px;
        width: 250px
    }

    .tentang-kami .visi-misi-new-wrapper .wrapp-val .top .visi,
    .tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom .visi {
        padding: 16px 20.267px;
        min-width: 510px;
        width: 510px;
        margin-left: -155px;
        margin-top: 0
    }

    .tentang-kami .visi-misi-new-wrapper .wrapp-val .top .misi,
    .tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom .misi {
        padding: 16px 20.267px;
        min-width: 510px;
        width: 510px;
        margin-right: -155px;
        margin-top: 0
    }

    .tentang-kami .about.slogan-kami {
        padding: 60px 80px
    }

    .tentang-kami .about.slogan-kami.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .slogan-kami {
        padding: 0
    }

    .tentang-kami .slogan-kami-wrapper {
        gap: 32px
    }

    .tentang-kami .slogan-kami-wrapper .wrapp-top {
        gap: 11px
    }

    .tentang-kami .slogan-kami-wrapper .wrapp-top .title {
        font-size: 18px
    }

    .tentang-kami .slogan-kami-wrapper .wrapp-top .desc {
        font-size: 12px
    }

    .tentang-kami .slogan-kami-wrapper .wrapp-bottom {
        flex-direction: column
    }

    .tentang-kami .slogan-kami-wrapper .wrapp-bottom .kotak {
        gap: 15px;
        padding: 20px 17px
    }

    .tentang-kami .slogan-kami-wrapper .wrapp-bottom .kotak .desc {
        width: 400px
    }

    .tentang-kami .slogan-kami-wrapper .wrapp-bottom .kotak.border-lr {
        position: relative;
        border: none
    }

    .tentang-kami .slogan-kami-wrapper .wrapp-bottom .kotak.border-lr:before,
    .tentang-kami .slogan-kami-wrapper .wrapp-bottom .kotak.border-lr:after {
        content: "";
        position: absolute;
        left: 50%;
        width: 50%;
        height: 1px;
        background-color: #ccc;
        transform: translate(-50%)
    }

    .tentang-kami .slogan-kami-wrapper .wrapp-bottom .kotak.border-lr:before {
        top: 0
    }

    .tentang-kami .slogan-kami-wrapper .wrapp-bottom .kotak.border-lr:after {
        bottom: 0
    }

    .tentang-kami .why.cradle.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .cradle .cradle-wrapper {
        gap: 30px
    }

    .tentang-kami .cradle .cradle-wrapper .right img {
        height: 40vh;
        border-radius: 10px;
        margin-bottom: 15px
    }

    .tentang-kami .about.our-team.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .our-team {
        padding: 60px 80px;
        background: var(--Base-Green, #0a9e33)
    }

    .tentang-kami .our-team .text-1 {
        color: var(--Base-White, #fff);
        text-align: center;
        font-size: 18px;
        font-weight: 600
    }

    .tentang-kami .our-team .text-2 {
        color: var(--Base-White, #fff);
        text-align: start;
        font-size: 12px;
        font-weight: 400
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tentang-kami .visi-misi-new {
        margin: 60px 80px;
        padding: 0 !important
    }

    .tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom {
        display: flex;
        justify-content: flex-end
    }

    .tentang-kami .visi-misi-new-wrapper .wrapp-val .top img,
    .tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom img {
        height: 180px;
        width: 250px
    }

    .tentang-kami .visi-misi-new-wrapper .wrapp-val .top .visi,
    .tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom .visi {
        padding: 16px 20.267px;
        min-width: 750px !important;
        width: 750px;
        margin-left: -155px;
        margin-top: 0
    }

    .tentang-kami .visi-misi-new-wrapper .wrapp-val .top .misi,
    .tentang-kami .visi-misi-new-wrapper .wrapp-val .bottom .misi {
        padding: 16px 20.267px;
        min-width: 750px !important;
        width: 750px;
        margin-right: -155px;
        margin-top: 0
    }

    .tentang-kami .slogan-kami-wrapper .wrapp-top .desc {
        width: 500px
    }

    .tentang-kami .slogan-kami-wrapper .wrapp-bottom .kotak {
        padding: 20px 36px
    }

    .tentang-kami .cradle {
        padding: 53.333px 80px
    }

    .tentang-kami .cradle .cradle-wrapper {
        gap: 30px
    }

    .tentang-kami .cradle .cradle-wrapper .right img {
        aspect-ratio: 1.8/2
    }

    .tentang-kami .video-section {
        margin-bottom: 55px
    }

    .tentang-kami .video-section .container .video-section-wrapper {
        display: flex;
        flex-direction: column !important
    }

    .tentang-kami .video-section .container .video-section-wrapper .left {
        width: 85dvw !important
    }
}

@media (max-width: 719px) {
    .tentang-kami .about.history {
        padding: 30px
    }

    .tentang-kami .about.history.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .about .history {
        gap: 20px
    }

    .tentang-kami .about .history .title-1 {
        font-size: 14px;
        margin-bottom: 0;
        width: 100%;
        text-align: start
    }

    .tentang-kami .about .right .title-1 {
        font-size: 14px
    }

    .tentang-kami .about .right .text-1 {
        font-size: 12px !important
    }

    .tentang-kami .about .left {
        width: 223px;
        height: 196.997px
    }

    .tentang-kami .about.slogan-kami {
        background-color: #f7fff9;
        padding: 40px 30px
    }

    .tentang-kami .about.slogan-kami.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .about.slogan-kami .slogan-kami-wrapper .wrapp-top .title {
        font-size: 16px
    }

    .tentang-kami .about.slogan-kami .slogan-kami-wrapper .wrapp-top .desc {
        font-size: 12px !important
    }

    .tentang-kami .about.slogan-kami .slogan-kami-wrapper .wrapp-bottom .kotak {
        padding: 20px 0
    }

    .tentang-kami .about.slogan-kami .slogan-kami-wrapper .wrapp-bottom .kotak .title {
        font-size: 13px
    }

    .tentang-kami .about.slogan-kami .slogan-kami-wrapper .wrapp-bottom .kotak .desc {
        width: auto;
        font-size: 12px
    }

    .tentang-kami .about.our-team {
        padding: 40px 30px;
        background: var(--Base-Green, #0a9e33)
    }

    .tentang-kami .about.our-team.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .about.our-team .text-1 {
        text-align: center;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        color: #fff
    }

    .tentang-kami .about.our-team .text-2 {
        text-align: justify;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px;
        color: #fff
    }

    .tentang-kami .about.visi-misi-new {
        padding: 40px 0
    }

    .tentang-kami .about.visi-misi-new.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .about.visi-misi-new .visi-misi-new-wrapper .wrapp-text {
        width: 100dvw !important;
        padding: 0 30px !important
    }

    .tentang-kami .about.visi-misi-new .visi-misi-new-wrapper .wrapp-text .title {
        font-size: 14px
    }

    .tentang-kami .about.visi-misi-new .visi-misi-new-wrapper .wrapp-text .desc {
        font-size: 12px
    }

    .tentang-kami .about.visi-misi-new .visi-misi-new-wrapper .wrapp-val {
        display: flex;
        flex-direction: column
    }

    .tentang-kami .about.visi-misi-new .visi-misi-new-wrapper .wrapp-val .top,
    .tentang-kami .about.visi-misi-new .visi-misi-new-wrapper .wrapp-val .bottom {
        display: flex;
        flex-direction: column !important
    }

    .tentang-kami .about.visi-misi-new .visi-misi-new-wrapper .wrapp-val .top .visi {
        margin: -40px 0 0;
        min-width: 83.5dvw;
        width: 83.5dvw
    }

    .tentang-kami .about.visi-misi-new .visi-misi-new-wrapper .wrapp-val .top img {
        min-width: 83.5dvw !important;
        width: 83.5dvw !important
    }

    .tentang-kami .about.visi-misi-new .visi-misi-new-wrapper .wrapp-val .bottom {
        margin-top: 10px
    }

    .tentang-kami .about.visi-misi-new .visi-misi-new-wrapper .wrapp-val .bottom .misi {
        order: 2;
        margin: -35px 0 0;
        min-width: 83.5dvw !important;
        width: 83.5dvw !important
    }

    .tentang-kami .about.visi-misi-new .visi-misi-new-wrapper .wrapp-val .bottom img {
        order: 1;
        min-width: 83.5dvw !important;
        width: 83.5dvw !important
    }
}

.tentang-kami .mengapa-kami {
    padding: 40px 150px;
    background: #fff
}

.tentang-kami .mengapa-kami-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px
}

.tentang-kami .mengapa-kami-wrapper .mengapa-top {
    display: flex;
    flex-direction: column;
    gap: 16.891px
}

.tentang-kami .mengapa-kami-wrapper .mengapa-top p {
    margin-bottom: 0
}

.tentang-kami .mengapa-kami-wrapper .mengapa-top p.title {
    color: var(--Base-Black, #252525);
    text-align: center;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px
}

.tentang-kami .mengapa-kami-wrapper .mengapa-top p.sub-title {
    color: var(--Base-Grey, #757575);
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item {
    gap: 80px;
    display: flex;
    flex-direction: row;
    overflow: hidden
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column {
    display: flex;
    flex-direction: column
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-left {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    order: -1
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-right {
    padding-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    order: 2
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-tablet {
    display: none
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-left .card {
    align-items: end;
    max-width: 500px;
    border: none;
    text-align: end
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-right .card {
    align-items: start;
    max-width: 500px;
    border: none;
    text-align: start
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-tablet .card {
    align-items: start;
    max-width: 450px;
    border: none;
    text-align: start
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-icon {
    width: 250px;
    height: max-content;
    order: 1;
    position: static;
    top: 0
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-icon .tree-image {
    width: 220px;
    height: 500px;
    object-fit: cover;
    object-position: 43%
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .arrow-left {
    position: absolute;
    top: 17px;
    left: 105%;
    width: 35%;
    z-index: 1
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .arrow-right {
    position: absolute;
    top: 20px;
    right: 105%;
    width: 35%;
    z-index: 1
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card {
    gap: 10px
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .icon {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0a9e33;
    border-radius: 10px;
    background-image: url(/build/assets/num-back-snAsQdC5.svg)
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .icon span {
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 15px;
    margin-right: 5px;
    margin-bottom: 5px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    transform: translate(4px, 2px)
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .card-content .title {
    margin-bottom: 0;
    color: var(--Base-Black, #252525);
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .card-content .desc {
    width: 420px;
    margin-bottom: 0;
    color: #757575;
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px
}

@media (max-width: 1200px) {
    .tentang-kami .mengapa-kami {
        padding: 0
    }

    .tentang-kami .mengapa-kami-wrapper {
        gap: 30px;
        align-items: flex-start;
        padding: 40px 80px 40px 0
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-top {
        margin-left: 80px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-top p.title {
        font-size: 24px;
        line-height: 36px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-top p.sub-title {
        font-size: 14px;
        line-height: 20px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom {
        gap: 0px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        text-align: center
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-right,
    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-left {
        display: none
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-tablet {
        order: 1;
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 25px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column .mengapa-column-tablet .card {
        align-items: start;
        max-width: 250px;
        border: none;
        text-align: start
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-icon {
        width: 300px;
        height: 1000px;
        order: -1;
        position: static
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-icon .tree-image {
        width: 200px;
        height: 1000px;
        object-fit: cover;
        object-position: 42%
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .arrow-right {
        position: absolute;
        top: 15px;
        right: 105%;
        z-index: 1;
        width: 100%
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card {
        min-width: 350px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .icon {
        width: 40px;
        height: 40px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .icon span {
        font-size: 18px;
        transform: translate(0)
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .card-content .title {
        font-size: 14px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .card-content .desc {
        font-size: 12px;
        line-height: 20px
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tentang-kami .mengapa-kami-wrapper {
        gap: 30px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-top {
        margin-left: 40px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-top p.title {
        font-size: 24px;
        line-height: 36px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-top p.sub-title {
        font-size: 14px;
        line-height: 20px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 90px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        text-align: center
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-right,
    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-left {
        display: none
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-tablet {
        order: 1;
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 25px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column .mengapa-column-tablet .card {
        align-items: start;
        max-width: 250px;
        border: none;
        text-align: start
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-icon {
        width: 300px;
        height: 1000px;
        order: -1;
        position: static
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-icon .tree-image {
        width: 250px;
        height: 1000px;
        object-fit: cover;
        object-position: 42%
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .arrow-right {
        position: absolute;
        top: 15px;
        right: 105%;
        z-index: 1;
        width: 85%
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card {
        min-width: 350px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .icon {
        width: 40px;
        height: 40px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .icon span {
        font-size: 18px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .card-content .title {
        font-size: 14px
    }

    .tentang-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .card-content .desc {
        font-size: 12px;
        line-height: 20px
    }
}

@media (max-width: 719px) {
    .tentang-kami .mengapa-kami {
        padding: 0
    }

    .tentang-kami .mengapa-kami.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .mengapa-kami .mengapa-kami-wrapper {
        align-items: flex-start;
        padding: 30px 40px 30px 0
    }

    .tentang-kami .mengapa-kami .mengapa-kami-wrapper .mengapa-top {
        margin-left: 40px;
        gap: 0
    }

    .tentang-kami .mengapa-kami .mengapa-kami-wrapper .mengapa-top .title {
        font-size: 14px
    }

    .tentang-kami .mengapa-kami .mengapa-kami-wrapper .mengapa-top .sub-title {
        font-size: 12px
    }

    .tentang-kami .mengapa-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-column-right,
    .tentang-kami .mengapa-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-column-left {
        display: none
    }

    .tentang-kami .mengapa-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-column-tablet {
        gap: 0px
    }

    .tentang-kami .mengapa-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-column-tablet .card {
        min-width: unset;
        padding: 10px 20px 20px 15px
    }

    .tentang-kami .mengapa-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item {
        gap: 20px
    }

    .tentang-kami .mengapa-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-icon {
        height: 1200px;
        width: unset
    }

    .tentang-kami .mengapa-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-icon .tree-image {
        width: 110px;
        height: auto
    }

    .tentang-kami .mengapa-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .arrow-right {
        width: 84px;
        position: absolute;
        right: 103%
    }

    .tentang-kami .mengapa-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .icon span {
        transform: translate(0)
    }

    .tentang-kami .mengapa-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .card-content .title {
        font-size: 12px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        width: 200px;
        margin-bottom: 10px
    }

    .tentang-kami .mengapa-kami .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .card-content .desc {
        font-size: 10px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        width: 220px
    }

    .tentang-kami .cradle {
        padding: 30px
    }

    .tentang-kami .why.cradle.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .why.video-section {
        padding: 40px 30px;
        margin-bottom: 30px
    }

    .tentang-kami .why.video-section.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .why.video-section .container {
        padding: 0
    }

    .tentang-kami .why.video-section .container .video-section-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%
    }

    .tentang-kami .why.video-section .container .video-section-wrapper .left .text-1 {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal
    }

    .tentang-kami .why.video-section .container .video-section-wrapper .left .text-2 {
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: normal
    }

    .tentang-kami .why.video-section .container .video-section-wrapper .left .video-wrapper video {
        height: 167px
    }
}

.tentang-kami .artikel {
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.tentang-kami .artikel .wrapper {
    display: flex;
    flex-direction: column;
    padding: 40px 30px;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 40px
}

.tentang-kami .artikel .wrapper .left {
    width: 100%;
    padding-right: 0;
    border-right: none
}

.tentang-kami .artikel .wrapper .left p {
    text-align: justify;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px
}

.tentang-kami .artikel .wrapper .right {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.tentang-kami .artikel .wrapper .right .item {
    padding-top: 10px;
    padding-bottom: 10px
}

.tentang-kami .artikel .wrapper .right .item:not(:last-child) {
    margin-top: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f1f3f5
}

.tentang-kami .artikel .wrapper .right .item p {
    color: var(--Base-Grey, #646363);
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -.32px;
    text-transform: capitalize;
    margin-bottom: 0
}

.tentang-kami .artikel .wrapper .right .item span {
    color: var(--Base-Grey, #646363);
    font-family: Poppins, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.28px;
    text-transform: capitalize
}

.tentang-kami .layanan.limbah.snap-section {
    min-height: 60dvh !important
}

.tentang-kami .limbah {
    padding: 40px 30px;
    display: flex;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.tentang-kami .limbah-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 45px;
    align-self: stretch
}

.tentang-kami .limbah-wrapper .top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
    align-self: stretch
}

.tentang-kami .limbah-wrapper .top p {
    margin-bottom: 0
}

.tentang-kami .limbah-wrapper .top p.title {
    color: var(--Base-Black, #252525);
    font-size: 28px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -1.08px
}

.tentang-kami .limbah-wrapper .top p.title span {
    color: var(--Base-Green, #0a9e33)
}

.tentang-kami .limbah-wrapper .top p.desc {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.tentang-kami .limbah-wrapper .bottom {
    display: flex;
    align-items: center;
    flex-direction: row;
    align-content: center;
    gap: 25px;
    align-self: stretch;
    flex-wrap: wrap
}

.tentang-kami .limbah-wrapper .bottom .card-wrapper {
    display: flex;
    padding: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex: 1 0 0
}

.tentang-kami .limbah-wrapper .bottom .card-wrapper p.name {
    color: var(--Base-Black, #252525);
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 33px;
    letter-spacing: -1.2px
}

.tentang-kami .limbah-wrapper .bottom .card-wrapper p.ket {
    overflow: hidden;
    color: var(--Base-Grey, #646363);
    text-align: center;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.tentang-kami .slogan {
    height: 300px;
    align-items: center;
    gap: 10px;
    display: flex;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 211px;
    background-image: url(/build/assets/bg-slogan-GXqzO3ne.webp)
}

.tentang-kami .slogan-wrapper {
    padding: 0 150px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 10px
}

.tentang-kami .slogan-wrapper p {
    margin-bottom: 0
}

.tentang-kami .slogan-wrapper p.title {
    color: #fff;
    text-align: center;
    font-family: Poppins;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.tentang-kami .slogan-wrapper p.desc {
    color: #fff;
    text-align: center;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 35px
}

.tentang-kami .service {
    display: flex;
    padding: 40px 30px;
    flex-direction: column;
    background: var(--Base-White, #fff)
}

.tentang-kami .service-wrapper {
    display: flex;
    flex-direction: column
}

.tentang-kami .service-wrapper p.sub-title {
    text-align: center;
    color: var(--Base-Green, #252525);
    font-size: 16px;
    font-style: normal;
    letter-spacing: -.64px;
    font-weight: 600;
    line-height: normal
}

.tentang-kami .definisi {
    display: flex;
    flex-direction: column;
    gap: 25px
}

.tentang-kami .definisi .wrapp-image-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px
}

.tentang-kami .definisi .wrapp-image-content img {
    width: 100%;
    max-width: 100%;
    max-height: 248px;
    object-fit: contain
}

.tentang-kami .definisi .wrapp-image-content .wrapp-text {
    width: 100%
}

.tentang-kami .definisi .wrapp-image-content .wrapp-text p.title {
    color: var(--Base-Black, #252525);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -.9px;
    text-align: justify
}

.tentang-kami .definisi .wrapp-image-content .wrapp-text p.title span {
    color: #0a9e33
}

.tentang-kami .definisi .wrapp-image-content .wrapp-text p.desc {
    color: var(--Base-Grey, #646363);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    text-align: justify
}

.tentang-kami .pengelolaan {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    display: flex
}

.tentang-kami .pengelolaan .wrapp-himbau {
    display: flex;
    flex-direction: column
}

.tentang-kami .pengelolaan .wrapp-himbau .wrapp-img-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    align-self: stretch
}

.tentang-kami .pengelolaan .wrapp-himbau .wrapp-img-text img {
    width: 100%;
    max-width: 300px
}

.tentang-kami .pengelolaan p.title {
    color: var(--Base-Black, #252525);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -.9px
}

.tentang-kami .pengelolaan p.title span {
    color: #0a9e33
}

.tentang-kami .pengelolaan p.desc {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.tentang-kami .pengelolaan p.desc span {
    font-style: italic;
    color: #0a9e33;
    font-weight: 600
}

.tentang-kami .pengelolaan .tahapan {
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    margin-top: 20px
}

.tentang-kami .pengelolaan .tahapan img {
    width: 100%;
    position: relative
}

.tentang-kami .pengelolaan .tahapan .wrapp-step {
    position: absolute;
    top: -38px;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    justify-content: space-between;
    width: 100%
}

.tentang-kami .pengelolaan .tahapan .wrapp-step-2 {
    position: absolute;
    bottom: -38px;
    padding-left: 8px;
    padding-right: 0;
    display: flex;
    justify-content: space-between;
    width: 100%
}

.tentang-kami .pengelolaan .simpulan {
    width: 100%
}

.tentang-kami .pengelolaan .simpulan p.title {
    color: var(--Base-Grey, #646363);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.tentang-kami .pengelolaan .simpulan p.desc {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.tentang-kami .pengelolaan .simpulan p.desc span {
    font-style: italic;
    color: #0a9e33
}

.tentang-kami .pengelolaan .bahaya {
    display: flex;
    background: #e2ffe8
}

.tentang-kami .pengelolaan .bahaya .left {
    padding-left: 150px;
    padding-right: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px
}

.tentang-kami .pengelolaan .bahaya .left p.title {
    color: var(--Base-Black, #252525);
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -1.08px
}

.tentang-kami .pengelolaan .bahaya .left p.title span {
    color: #0a9e33
}

.tentang-kami .pengelolaan .wrapp-card {
    display: grid;
    gap: 15px;
    justify-content: center;
    grid-template-columns: repeat(2, 1fr)
}

.tentang-kami .penyimpanan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch
}

.tentang-kami .penyimpanan .top {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.tentang-kami .penyimpanan .top p.title {
    color: var(--Base-Black, #252525);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -.9px
}

.tentang-kami .penyimpanan .top p.title span {
    color: #0a9e33
}

.tentang-kami .penyimpanan .top p.desc {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.tentang-kami .penyimpanan .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    align-self: stretch
}

.tentang-kami .pengangkutan {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    align-self: stretch
}

.tentang-kami .pengangkutan .top {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.tentang-kami .pengangkutan .image-wrapper {
    display: grid;
    gap: 10px;
    width: 100%;
    grid-template-columns: 30% 1fr
}

.tentang-kami .pengangkutan .image-wrapper img {
    height: 100%;
    max-height: 118px
}

.tentang-kami .pengangkutan .image-wrapper .img-1 {
    width: 100%;
    min-width: 123px;
    object-fit: cover
}

.tentang-kami .pengangkutan .image-wrapper .img-2 {
    width: 100%;
    min-width: 187px;
    object-fit: cover
}

.tentang-kami .pengangkutan p.title {
    color: var(--Base-Black, #252525);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -.9px
}

.tentang-kami .pengangkutan p.title span {
    color: #0a9e33
}

.tentang-kami .pengangkutan p.desc {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.tentang-kami .service,
.tentang-kami .service .pengangkutan-section {
    display: flex;
    flex-direction: column;
    width: 100%
}

.tentang-kami .service .pengangkutan-section .top-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.tentang-kami .service .pengangkutan-section .top-title p.title {
    color: var(--Base-Black, #252525);
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -.9px
}

.tentang-kami .service .pengangkutan-section .top-title p.title span {
    color: #0a9e33
}

.tentang-kami .service .pengangkutan-section .middle-title {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    gap: 5px;
    margin-bottom: 10px
}

.tentang-kami .service .pengangkutan-section .middle-title p.title {
    color: var(--Base-Black, #252525);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -.9px;
    margin-bottom: 0
}

.tentang-kami .service .pengangkutan-section .middle-title p.title span {
    color: #0a9e33
}

.tentang-kami .service .pengangkutan-section .middle-title p.sub-title {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.tentang-kami .service .pengangkutan-section .article-section {
    display: flex;
    align-items: start;
    width: 100%;
    gap: 20px
}

.tentang-kami .service .pengangkutan-section .article-section .card-box {
    position: relative;
    width: 33.3%
}

.tentang-kami .service .pengangkutan-section .article-section .card-box .number {
    display: flex;
    width: 28px;
    height: 20.615px;
    padding: 9.231px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.077px;
    position: absolute;
    left: 8.822px;
    top: 6.495px;
    color: var(--White, #FFF);
    text-align: center;
    font-family: Poppins;
    font-size: 13.231px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.tentang-kami .service .pengangkutan-section .article-section .card-box img {
    width: 100%
}

.tentang-kami .service .pengangkutan-section .article-section .card-box p.title {
    font-size: 14px;
    line-height: 15px;
    font-weight: 400;
    margin-top: 15px;
    color: #757575
}

.tentang-kami .service .pengangkutan-section .article-section .card-box p.desc {
    font-size: 14px;
    font-weight: 600;
    color: #252525
}

.tentang-kami .service-2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #f6fff8
}

.tentang-kami .service-2 .top-section {
    display: flex;
    width: 100%;
    align-items: center;
    text-align: start
}

.tentang-kami .service-2 .top-section .top-title {
    font-size: 24px;
    font-weight: 700;
    width: 35%;
    margin: 0
}

.tentang-kami .service-2 .top-section .top-title span {
    color: #0a9e33
}

.tentang-kami .service-2 .top-section .article-section {
    display: flex;
    width: 100%;
    gap: 10px
}

.tentang-kami .service-2 .top-section .article-section .card-box {
    position: relative;
    width: 50%;
    display: flex;
    flex-direction: column
}

.tentang-kami .service-2 .top-section .article-section .card-box .number {
    border-radius: 0 0 15.385px 15.385px;
    background: var(--Base-Green, #0A9E33);
    display: flex;
    width: 28px;
    height: 20.615px;
    padding: 9.231px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.077px;
    position: absolute;
    left: 8.822px;
    top: 0;
    color: var(--White, #FFF);
    text-align: center;
    font-family: Poppins;
    font-size: 13.231px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.tentang-kami .service-2 .top-section .article-section .card-box img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 6.14px
}

.tentang-kami .service-2 .top-section .article-section .card-box p.title {
    font-size: 14px;
    line-height: 15px;
    font-weight: 600;
    margin-top: 10px;
    color: #000;
    margin-bottom: 5px
}

.tentang-kami .service-2 .top-section .article-section .card-box p.desc {
    font-size: 14px;
    font-weight: 400;
    color: #6a6868
}

.tentang-kami .service-2 .bottom-section {
    display: flex;
    gap: 20px;
    width: 100%
}

.tentang-kami .service-2 .bottom-section .article-section {
    display: flex;
    width: 100% !important;
    gap: 10px
}

.tentang-kami .service-2 .bottom-section .article-section .card-box {
    position: relative;
    display: flex;
    flex-direction: column
}

.tentang-kami .service-2 .bottom-section .article-section .card-box .number {
    border-radius: 0 0 15.385px 15.385px;
    background: var(--Base-Green, #0A9E33);
    display: flex;
    width: 28px;
    height: 20.615px;
    padding: 9.231px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.077px;
    position: absolute;
    left: 8.822px;
    top: 0;
    color: var(--White, #FFF);
    text-align: center;
    font-family: Poppins;
    font-size: 13.231px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.tentang-kami .service-2 .bottom-section .article-section .card-box.left,
.tentang-kami .service-2 .bottom-section .article-section .card-box.right {
    width: 50%
}

.tentang-kami .service-2 .bottom-section .article-section .card-box img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 6.14px
}

.tentang-kami .service-2 .bottom-section .article-section .card-box p.title {
    font-size: 14px;
    line-height: 15px;
    font-weight: 600;
    margin-top: 10px;
    color: #000;
    margin-bottom: 5px
}

.tentang-kami .service-2 .bottom-section .article-section .card-box p.desc {
    font-size: 14px;
    font-weight: 400;
    color: #6a6868
}

@media (max-width: 1200px) {

    .tentang-kami .layanan.limbah.snap-section,
    .tentang-kami .layanan.slogan.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .layanan.slogan .slogan-wrapper .desc {
        width: 559px
    }

    .tentang-kami .slogan-wrapper p.title {
        font-size: 19px
    }

    .tentang-kami .slogan-wrapper p.desc {
        font-size: 14px;
        line-height: 25px
    }

    .tentang-kami .layanan.service {
        padding: 60px 80px
    }

    .tentang-kami .layanan.service.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .service .pengangkutan-section .top-title p.title {
        color: var(--Base-Black, #252525);
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -.9px
    }

    .tentang-kami .service .pengangkutan-section .middle-title p.title {
        color: var(--Base-Black, #252525);
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: -.9px;
        margin-bottom: 0
    }

    .tentang-kami .service .pengangkutan-section .middle-title p.sub-title {
        color: var(--Base-Grey, #646363);
        text-align: justify;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 22px
    }

    .tentang-kami .tentang-kami .service .pengangkutan-section .middle-title {
        margin-top: 30px
    }

    .tentang-kami .layanan.service-2 {
        padding: 40px 80px;
        margin-bottom: 40px
    }

    .tentang-kami .layanan.service-2.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .layanan.service-2 .top-section {
        display: flex;
        flex-direction: column
    }

    .tentang-kami .layanan.service-2 .top-section .top-title {
        width: 100%;
        text-align: center;
        font-size: 18px;
        display: block;
        margin-bottom: 20px
    }

    .tentang-kami .layanan.service-2 .top-section svg {
        margin-top: -30px !important
    }

    .tentang-kami .layanan.service-2 .top-section .article-section {
        width: 100%
    }

    .tentang-kami .layanan.service-2 .bottom-section .article-section .card-box.left {
        width: 50%
    }

    .tentang-kami .layanan.service-2 .bottom-section .article-section .card-box.left img {
        object-position: left !important
    }

    .tentang-kami .layanan.service-2 .bottom-section .article-section .card-box.right {
        width: 50%
    }

    .tentang-kami .layanan.service-2 .bottom-section .article-section .card-box.right img {
        object-position: left !important
    }

    .tentang-kami .artikel,
    .tentang-kami .limbah {
        padding: 60px 80px
    }

    .tentang-kami .limbah-wrapper .bottom {
        flex-direction: row
    }

    .tentang-kami .definisi {
        padding: 60px 80px;
        gap: 40px
    }

    .tentang-kami .definisi .wrapp-image-content {
        width: 100%;
        flex-direction: row
    }

    .tentang-kami .definisi .wrapp-image-content img {
        width: 100%;
        height: 100%
    }

    .tentang-kami .definisi .wrapp-image-content .wrapp-text p.title {
        text-align: justify
    }

    .tentang-kami .pengelolaan {
        padding: 60px 80px
    }

    .tentang-kami .pengelolaan .wrapp-himbau .wrapp-img-text {
        flex-direction: row
    }

    .tentang-kami .pengelolaan .tahapan {
        margin-bottom: 10px;
        margin-top: 10px
    }

    .tentang-kami .pengelolaan .tahapan .wrapp-step {
        top: -20px;
        padding-left: 0;
        padding-right: 0
    }

    .tentang-kami .pengelolaan .tahapan .wrapp-step-2 {
        bottom: -20px;
        padding-left: 12px;
        padding-right: 0
    }

    .tentang-kami .pengangkutan {
        padding: 60px 80px
    }

    .tentang-kami .pengangkutan .image-wrapper img {
        max-height: 200px
    }

    .tentang-kami .penyimpanan {
        padding: 60px 80px
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tentang-kami .slogan-wrapper {
        gap: 20px
    }

    .tentang-kami .slogan-wrapper p.title {
        font-size: 25px
    }

    .tentang-kami .slogan-wrapper p.desc {
        font-size: 18px;
        line-height: 30px
    }

    .tentang-kami .artikel .wrapper {
        flex-direction: row
    }
}

@media (max-width: 719px) {
    .tentang-kami .layanan.limbah.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .layanan.limbah .limbah-wrapper .top .desc {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px
    }

    .tentang-kami .layanan.limbah .limbah-wrapper .bottom {
        display: flex;
        flex-direction: column
    }

    .tentang-kami .layanan.limbah .limbah-wrapper .bottom .card-wrapper .name {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: -.56px
    }

    .tentang-kami .layanan.limbah .limbah-wrapper .bottom .card-wrapper .ket {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal
    }

    .tentang-kami .layanan.slogan.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .layanan.slogan .slogan-wrapper .title {
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal
    }

    .tentang-kami .layanan.slogan .slogan-wrapper .desc {
        width: 100%;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal
    }

    .tentang-kami .layanan.service {
        padding: 40px 30px
    }

    .tentang-kami .layanan.service.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .layanan.service .container .pengangkutan-section .top-title .title {
        text-align: center;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal
    }

    .tentang-kami .layanan.service .container .pengangkutan-section .top-title svg {
        margin-top: -10px;
        width: 151px
    }

    .tentang-kami .layanan.service .container .pengangkutan-section .middle-title .title {
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: -.42px
    }

    .tentang-kami .layanan.service .container .pengangkutan-section .middle-title .sub-title {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal
    }

    .tentang-kami .layanan.service .container .pengangkutan-section .article-section {
        display: flex;
        flex-direction: column;
        width: 100%
    }

    .tentang-kami .layanan.service .container .pengangkutan-section .article-section .card-box {
        width: 100%
    }

    .tentang-kami .layanan.service .container .pengangkutan-section .article-section .card-box .title {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-bottom: 5px
    }

    .tentang-kami .layanan.service .container .pengangkutan-section .article-section .card-box .desc {
        font-size: 13px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 0
    }

    .tentang-kami .layanan.service-2 {
        padding: 40px 30px
    }

    .tentang-kami .layanan.service-2.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .layanan.service-2 .container .top-section {
        display: flex;
        flex-wrap: wrap
    }

    .tentang-kami .layanan.service-2 .container .top-section .article-section {
        display: flex;
        padding: 0;
        flex-direction: column;
        width: 100%
    }

    .tentang-kami .layanan.service-2 .container .top-section .article-section .card-box {
        width: 100%
    }

    .tentang-kami .layanan.service-2 .container .top-section .article-section .card-box img {
        height: 180px
    }

    .tentang-kami .layanan.service-2 .container .top-section .top-title {
        align-items: center;
        width: 100%
    }

    .tentang-kami .layanan.service-2 .container .top-section .top-title .title {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -.48px;
        text-align: center
    }

    .tentang-kami .layanan.service-2 .container .top-section .top-title svg {
        width: 227px;
        margin-top: -70px;
        position: absolute;
        top: 110px;
        left: 25%
    }

    .tentang-kami .layanan.service-2 .container .bottom-section .article-section {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0
    }

    .tentang-kami .layanan.service-2 .container .bottom-section .article-section .card-box {
        width: 100%
    }

    .tentang-kami .layanan.service-2 .container .bottom-section .article-section .card-box img {
        width: 100% !important;
        height: 180px
    }

    .tentang-kami .slogan-wrapper,
    .tentang-kami .limbah {
        padding: 40px 30px
    }

    .tentang-kami .service .pengangkutan-section .middle-title {
        margin-top: 30px
    }
}

.blog {
    overflow-x: hidden !important
}

.blog .latest-post {
    margin: 100px 150px 0
}

.blog .latest-post h1.title {
    color: var(--Base-Black, #252525);
    font-family: Poppins;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 30px
}

.blog .latest-post .post-content {
    display: flex;
    gap: 30px;
    align-items: center
}

.blog .latest-post .post-content img {
    border-radius: 10px;
    width: 50%
}

.blog .latest-post .post-content .article-container {
    padding: 36px 0
}

.blog .latest-post .post-content .article-container span.article-category,
.blog .latest-post .post-content .article-container p.article-category {
    color: var(--Base-Green, #0a9e33);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 15px
}

.blog .latest-post .post-content .article-container h1.article-title {
    color: var(--Base-Black, #252525);
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.blog .latest-post .post-content .article-container p.article {
    overflow: hidden;
    color: #757575;
    text-overflow: ellipsis;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    align-self: stretch;
    margin-bottom: 15px
}

.blog .latest-post .post-content .article-container p.date {
    color: var(--Base-Black, #252525);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.blog .latest-post .post-content .article-container .author {
    gap: 0px;
    align-items: center;
    margin-top: 5px
}

.blog .latest-post .post-content .article-container .author img.pp-author {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 10px
}

.blog .latest-post .post-content .article-container .author h2 {
    font-size: 14px;
    color: #523a48;
    font-weight: 500;
    margin-bottom: 0
}

.blog .latest-post .post-content .article-container .author span {
    font-size: 14px;
    color: #8d8d8d;
    font-weight: 500;
    margin-bottom: 0
}

.blog .article-list {
    margin: 0 150px 100px
}

.blog .article-list h1.title {
    color: var(--Base-Black, #252525);
    font-family: Poppins;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 30px
}

.blog .article-list .container-article {
    gap: 30px
}

.blog .article-list .container-article .content-article {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 1fr)
}

.blog .article-list .container-article .content-article .image-wrapper1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    position: relative;
    transition: transform .3s ease, box-shadow .3s ease;
    perspective: 1000px
}

.blog .article-list .container-article .content-article .image-wrapper1 img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    border-radius: 10px;
    transition: all .3s ease
}

.blog .article-list .container-article .content-article .image-wrapper1 .image-wrapper:hover {
    transform: rotateY(10deg) rotateX(10deg) scale(1.05);
    box-shadow: 0 20px 30px #0000004d
}

.blog .article-list .container-article .content-article .image-wrapper1 .image-desc {
    width: 100%;
    margin-top: 0
}

.blog .article-list .container-article .content-article .image-wrapper1 .image-desc span {
    color: #252525;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.blog .article-list .container-article .content-article .image-wrapper1 .image-desc p {
    font-size: 12px;
    color: #757575;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-top: 0;
    margin-bottom: 0;
    text-align: justify;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.blog .article-list .container-article .content-article .image-wrapper1 .image-desc h1 {
    font-size: 14px;
    color: #0a9e33;
    font-style: normal;
    font-weight: 400;
    line-height: normal
}

.blog .article-list .container-article .content-article .image-wrapper1 .image-desc .image-date {
    margin-top: 12px
}

.blog .article-list .container-article .content-article .image-wrapper1 .image-desc .image-date span {
    color: #000;
    font-size: 10px;
    font-style: normal;
    font-weight: 400
}

.blog .article-list .container-article .content-article .image-wrapper1 .image-desc .group-author {
    display: flex;
    gap: 0px;
    align-items: center;
    margin-top: 5px
}

.blog .article-list .container-article .content-article .image-wrapper1 .image-desc .group-author img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px
}

.blog .article-list .container-article .content-article .image-wrapper1 .image-desc .group-author h2 {
    font-size: 10px;
    color: #523a48;
    font-weight: 500;
    margin-bottom: 0
}

.blog .article-list .container-article .content-article .image-wrapper1 .image-desc .group-author span {
    font-size: 10px;
    color: #8d8d8d;
    font-weight: 500;
    margin-bottom: 0
}

.blog hr {
    height: 1px;
    background: #dedede;
    margin: 40px
}

@media (max-width: 1200px) {
    .blog .latest-post {
        margin: 40px 60px 0
    }

    .blog .latest-post .title {
        margin-bottom: 0 !important
    }

    .blog .latest-post .post-content {
        margin-top: -20px
    }

    .blog .latest-post .post-content img {
        width: 50%;
        border-radius: 10px;
        height: 232px;
        width: auto
    }

    .blog .article-list {
        margin: 40px 60px
    }

    .blog .article-list .container-article .content-article {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(3, 1fr));
        gap: 20px
    }

    .blog .article-list .container-article .content-article .image-wrapper1 img {
        aspect-ratio: 4/2.8;
        height: auto
    }

    .blog hr {
        margin: 0 0 40px
    }

    .blog .blog.hero-section-new {
        min-height: 0 !important
    }

    .blog .history {
        display: flex;
        flex-direction: column;
        gap: 42.667px;
        padding: 53.333px 80px
    }

    .blog .history .left {
        width: 50%
    }

    .blog .history .right {
        width: 100%
    }

    .blog .history .right .title-1 {
        font-size: 19px
    }

    .blog .history .right p.text-1,
    .blog .history .right .text-2 {
        font-size: 12px
    }

    .blog .video .play-icon img {
        width: 50px;
        height: 50px
    }

    .blog .visi-misi-new {
        padding: 53.333px 80px
    }

    .blog .visi-misi-new-wrapper .wrapp-val .top .visi,
    .blog .visi-misi-new-wrapper .wrapp-val .bottom .visi,
    .blog .visi-misi-new-wrapper .wrapp-val .top .misi,
    .blog .visi-misi-new-wrapper .wrapp-val .bottom .misi {
        padding: 16px 20.267px
    }

    .blog .mengapa-kami {
        padding: 50px 30px 50px 0
    }

    .blog .mengapa-kami-wrapper {
        gap: 30px
    }

    .blog .mengapa-kami-wrapper .mengapa-top {
        margin-left: 40px
    }

    .blog .mengapa-kami-wrapper .mengapa-top p.title {
        font-size: 24px;
        line-height: 36px
    }

    .blog .mengapa-kami-wrapper .mengapa-top p.sub-title {
        font-size: 14px;
        line-height: 20px
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 90px
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        text-align: center
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-right,
    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-left {
        display: none
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-tablet {
        order: 1;
        padding-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 25px
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column .mengapa-column-tablet .card {
        align-items: start;
        max-width: 250px;
        border: none;
        text-align: start
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-icon {
        width: 300px;
        height: 1000px;
        order: -1;
        position: static
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-icon .tree-image {
        width: 300px;
        height: 1000px;
        object-fit: cover;
        object-position: 42%
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .arrow-right {
        position: absolute;
        top: 15px;
        right: 105%;
        z-index: 1;
        width: 60%
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card {
        min-width: 350px
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .icon {
        width: 40px;
        height: 40px
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .icon span {
        font-size: 18px
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .card-content .title {
        font-size: 14px
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .card-content .desc {
        font-size: 12px;
        line-height: 20px
    }

    .blog .slogan-kami {
        padding: 53.333px 80px
    }

    .blog .slogan-kami-wrapper {
        gap: 32px
    }

    .blog .slogan-kami-wrapper .wrapp-top {
        gap: 11px
    }

    .blog .slogan-kami-wrapper .wrapp-bottom {
        flex-direction: column
    }

    .blog .slogan-kami-wrapper .wrapp-bottom .kotak {
        gap: 15px;
        padding: 20px 17px
    }

    .blog .slogan-kami-wrapper .wrapp-bottom .kotak.border-lr {
        position: relative;
        border: none
    }

    .blog .slogan-kami-wrapper .wrapp-bottom .kotak.border-lr:before,
    .blog .slogan-kami-wrapper .wrapp-bottom .kotak.border-lr:after {
        content: "";
        position: absolute;
        left: 50%;
        width: 50%;
        height: 1px;
        background-color: #ccc;
        transform: translate(-50%)
    }

    .blog .slogan-kami-wrapper .wrapp-bottom .kotak.border-lr:before {
        top: 0
    }

    .blog .slogan-kami-wrapper .wrapp-bottom .kotak.border-lr:after {
        bottom: 0
    }

    .blog .cradle,
    .blog .our-team,
    .blog .contac-us,
    .blog .form,
    .blog .tentang {
        padding: 53.333px 80px
    }

    .blog .spin-earth {
        height: 2000px
    }

    .blog .spin-earth .left .image-wrapper img {
        top: 5%
    }

    .blog .spin-earth .left .arrow img {
        width: 100%
    }

    .blog .spin-earth .left .arrow.top-1 {
        top: 13%;
        left: 20%
    }

    .blog .spin-earth .left .arrow.top-2 {
        top: 20%;
        left: 40%
    }

    .blog .spin-earth .left .arrow.top-3 {
        top: 34%;
        left: 49%
    }

    .blog .spin-earth .left .arrow.bot-1 {
        bottom: 45%;
        left: 50%
    }

    .blog .spin-earth .left .arrow.bot-2 {
        bottom: 30%;
        left: 42%
    }

    .blog .spin-earth .left .arrow.bot-3 {
        bottom: 20%;
        left: 25%
    }

    .blog .spin-earth .left .content {
        gap: 15px
    }

    .blog .spin-earth .left .content img {
        width: 48px;
        height: 48px
    }

    .blog .spin-earth .left .content p {
        font-size: 12px
    }

    .blog .spin-earth .left .content.tree {
        top: 12%;
        left: 40%
    }

    .blog .spin-earth .left .content.water {
        top: 18%;
        left: 58%
    }

    .blog .spin-earth .left .content.bicycle {
        top: 31.5%;
        left: 67%
    }

    .blog .spin-earth .left .content.trash {
        bottom: 43%;
        left: 68%
    }

    .blog .spin-earth .left .content.lights {
        bottom: 28%;
        left: 60%
    }

    .blog .spin-earth .left .content.recycle {
        bottom: 18.5%;
        left: 43%
    }

    .blog .spin-earth .card img {
        height: 500px
    }

    .blog .spin-earth .text,
    .blog .artikel,
    .blog .limbah {
        padding: 53.333px 80px
    }

    .blog .limbah-wrapper .bottom {
        flex-direction: row
    }

    .blog .definisi {
        padding: 53.333px 80px;
        gap: 40px
    }

    .blog .definisi .wrapp-image-content {
        width: 100%;
        flex-direction: row
    }

    .blog .definisi .wrapp-image-content img {
        width: 100%;
        height: 100%
    }

    .blog .definisi .wrapp-image-content .wrapp-text p.title {
        text-align: justify
    }

    .blog .pengelolaan {
        padding: 53.333px 80px
    }

    .blog .pengelolaan .wrapp-himbau .wrapp-img-text {
        flex-direction: row
    }

    .blog .pengelolaan .tahapan {
        margin-bottom: 10px;
        margin-top: 10px
    }

    .blog .pengelolaan .tahapan .wrapp-step {
        top: -20px;
        padding-left: 0;
        padding-right: 0
    }

    .blog .pengelolaan .tahapan .wrapp-step-2 {
        bottom: -20px;
        padding-left: 12px;
        padding-right: 0
    }

    .blog .pengangkutan {
        padding: 53.333px 80px
    }

    .blog .pengangkutan .image-wrapper img {
        max-height: 200px
    }

    .blog .penyimpanan {
        padding: 53.333px 80px
    }
}

@media (min-width: 992px) {

    .blog .visi-misi-new-wrapper .wrapp-val .top,
    .blog .visi-misi-new-wrapper .wrapp-val .bottom {
        gap: 25px;
        flex-direction: row
    }

    .blog .visi-misi-new-wrapper .wrapp-val .top img,
    .blog .visi-misi-new-wrapper .wrapp-val .bottom img {
        width: 259.2px;
        height: 197.867px
    }

    .blog .visi-misi-new-wrapper .wrapp-val .top .visi,
    .blog .visi-misi-new-wrapper .wrapp-val .bottom .visi {
        margin-left: -70px;
        margin-top: 0;
        min-width: 500px
    }

    .blog .visi-misi-new-wrapper .wrapp-val .top .misi,
    .blog .visi-misi-new-wrapper .wrapp-val .bottom .misi {
        margin-right: -70px;
        margin-top: 0;
        min-width: 500px
    }

    .blog .mengapa-kami {
        padding: 80px 50px
    }

    .blog .mengapa-kami-wrapper {
        gap: 40px
    }

    .blog .mengapa-kami-wrapper .mengapa-top {
        gap: 16px
    }

    .blog .mengapa-kami-wrapper .mengapa-top p.title {
        font-size: 28px;
        line-height: 40px
    }

    .blog .mengapa-kami-wrapper .mengapa-top p.sub-title {
        font-size: 16px;
        line-height: 24px
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item {
        gap: 50px;
        flex-direction: row
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-left,
    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-column-right {
        padding-top: 0;
        gap: 40px
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-icon {
        width: 300px;
        height: 800px;
        position: static
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .mengapa-icon .tree-image {
        width: 300px;
        height: 800px;
        object-fit: cover;
        object-position: 42%
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card {
        max-width: 300px
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .icon {
        width: 50px;
        height: 50px
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .icon span {
        font-size: 20px
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .card-content .title {
        font-size: 16px
    }

    .blog .mengapa-kami-wrapper .mengapa-bottom .mengapa-item .card .card-content .desc {
        font-size: 12px;
        line-height: 20px
    }

    .blog .slogan-kami-wrapper .wrapp-bottom .kotak {
        padding: 20px 36px
    }

    .blog .contac-us {
        padding: 53.333px 0 53.333px 80px
    }

    .blog .contac-us-wrapper {
        flex-direction: row
    }

    .blog .form-wrapper {
        flex-direction: row;
        gap: 30px
    }

    .blog .spin-earth .left .image-wrapper img {
        top: -5%;
        left: -86%
    }

    .blog .spin-earth .left .arrow.top-1 {
        top: 10%;
        left: 25%
    }

    .blog .spin-earth .left .arrow.top-2 {
        top: 20%;
        left: 45%
    }

    .blog .spin-earth .left .arrow.top-3 {
        top: 38%;
        left: 49%
    }

    .blog .spin-earth .left .arrow.bot-1 {
        bottom: 38%;
        left: 50%
    }

    .blog .spin-earth .left .arrow.bot-2 {
        bottom: 23%;
        left: 45%
    }

    .blog .spin-earth .left .arrow.bot-3 {
        bottom: 10%;
        left: 30%
    }

    .blog .spin-earth .left .content img {
        width: 50px;
        height: 50px
    }

    .blog .spin-earth .left .content p {
        font-size: 14px
    }

    .blog .spin-earth .left .content.tree {
        top: 8%;
        left: 40%
    }

    .blog .spin-earth .left .content.water {
        top: 18%;
        left: 60%
    }

    .blog .spin-earth .left .content.bicycle {
        top: 35%;
        left: 63%
    }

    .blog .spin-earth .left .content.trash {
        bottom: 37%;
        left: 64%
    }

    .blog .spin-earth .left .content.lights {
        bottom: 20%;
        left: 60%
    }

    .blog .spin-earth .left .content.recycle {
        bottom: 8%;
        left: 45%
    }

    .blog .slogan-wrapper {
        gap: 20px
    }

    .blog .slogan-wrapper p.title {
        font-size: 25px
    }

    .blog .slogan-wrapper p.desc {
        font-size: 18px;
        line-height: 30px
    }

    .blog .artikel .wrapper {
        flex-direction: row
    }
}

@media (max-width: 719px) {
    .blog .latest-post {
        margin: 40px 30px
    }

    .blog .latest-post .post-content {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 0
    }

    .blog .latest-post .post-content .article-container {
        padding-top: 15px;
        padding-bottom: 25px
    }

    .blog .latest-post .post-content img {
        width: 100%;
        border-radius: 10px
    }

    .blog .article-list {
        margin: 40px 30px !important
    }

    .blog .article-list .container-article .content-article {
        grid-template-columns: 1fr
    }

    .blog .article-list .container-article .content-article .image-wrapper1 {
        height: auto
    }

    .blog hr {
        margin: 0 30px !important
    }
}

.service-pages .environment-impact {
    background-image: url(/build/assets/environment-impact-bg-BMWPdRmR.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 100px 150px;
    display: flex;
    justify-content: center;
    align-items: center
}

.service-pages .environment-impact hr {
    width: 150px;
    margin: auto;
    background-color: #fff;
    border-radius: 100000px
}

.service-pages .environment-impact .wrapper {
    max-width: 612px
}

.service-pages .environment-impact p {
    color: #ffffffb5
}

.service-pages .limbah-b3 {
    background-color: #fff;
    background-size: cover;
    padding-left: 150px;
    display: flex;
    justify-content: end;
    align-items: center
}

.service-pages .limbah-b3 .wrapper {
    display: flex;
    flex-direction: row
}

.service-pages .limbah-b3 .wrapper .left {
    display: flex;
    width: 100%;
    gap: 45px;
    flex-direction: column;
    justify-content: center
}

.service-pages .limbah-b3 .wrapper .left .top-desc {
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-family: Poppins, sans-serif
}

.service-pages .limbah-b3 .wrapper .left .top-desc span {
    color: #0a9e33;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.service-pages .limbah-b3 .wrapper .left .top-desc h1 {
    color: var(--Base-White, #0a9e33);
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -1.08px
}

.service-pages .limbah-b3 .wrapper .left .top-desc p {
    color: #646363;
    text-align: justify;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px
}

.service-pages .limbah-b3 .wrapper .left .bottom-desc {
    display: flex;
    justify-content: flex-start;
    gap: 27px
}

.service-pages .limbah-b3 .wrapper .left .bottom-desc .item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 22px;
    background-color: #0a9e33;
    border-radius: 20px
}

.service-pages .limbah-b3 .wrapper .left .bottom-desc .item span {
    color: var(--Base-White, #fff);
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.service-pages .limbah-b3 .wrapper .image-wrapper {
    display: flex;
    justify-content: end;
    width: 100%
}

.service-pages .limbah-b3 .wrapper .image-wrapper img {
    width: 100%
}

.service-pages .tabs-container {
    width: 100%;
    position: relative
}

.service-pages .tabs-container .tabs {
    display: flex;
    background-color: #4caf50;
    padding: 10px 0;
    position: relative
}

.service-pages .tabs-container .tabs .tab {
    flex: 1;
    text-align: center;
    color: #fff;
    padding: 10px;
    cursor: pointer;
    position: relative;
    transition: color .3s
}

.service-pages .tabs-container .tabs .tab.active {
    font-weight: 700
}

.service-pages .tabs-container .tabs .underline {
    position: absolute;
    bottom: 0;
    height: 3px;
    background-color: #fff;
    width: 25%;
    transition: left .3s;
    left: 0
}

.service-pages .tabs-container .tab-content {
    border-top: 1px solid #ddd;
    background-color: #f8f8f8
}

.service-pages .tabs-container .tab-content .content {
    display: none
}

.service-pages .tabs-container .tab-content .content.active {
    display: flex
}

.service-pages .tabs-container .tab-content .content .content-wrapper {
    display: flex;
    flex-direction: row;
    background-color: #fff;
    gap: 90px
}

.service-pages .tabs-container .tab-content .content .content-wrapper .left {
    width: 60%
}

.service-pages .tabs-container .tab-content .content .content-wrapper .left img {
    width: 100%
}

.service-pages .tabs-container .tab-content .content .content-wrapper .right {
    width: 70%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-right: 120px
}

.service-pages .tabs-container .tab-content .content .content-wrapper .right h1 {
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -1.08px;
    margin-bottom: 15px
}

.service-pages .tabs-container .tab-content .content .content-wrapper .right p {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px
}

.service-pages .tabs-container .tab-content .content .content-wrapper .right .styled-list {
    padding-left: 3%;
    padding-top: 4%
}

.service-pages .tabs-container .tab-content .content .content-wrapper .right .styled-list li {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
    padding-top: 10px;
    padding-bottom: 10px
}

.service-pages .tabs-container .tab-content .content .content-wrapper .left-bot {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 120px;
    width: 100%
}

.service-pages .tabs-container .tab-content .content .content-wrapper .left-bot h1 {
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -1.08px;
    margin-bottom: 15px
}

.service-pages .tabs-container .tab-content .content .content-wrapper .left-bot p {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px
}

.service-pages .tabs-container .tab-content .content .content-wrapper .right-bot,
.service-pages .tabs-container .tab-content .content .content-wrapper .right-bot img {
    width: 100%
}

.service-pages .tabs-container .tab-content .content .pengolahan {
    background-color: #fff;
    display: flex;
    padding: 100px 150px;
    flex-direction: column;
    align-items: flex-start;
    gap: 60px
}

.service-pages .tabs-container .tab-content .content .pengolahan .top h1 {
    color: var(--Base-Black, #252525);
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -1.08px
}

.service-pages .tabs-container .tab-content .content .pengolahan .top p {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 37px
}

.service-pages .tabs-container .tab-content .content .pengolahan .flow,
.service-pages .tabs-container .tab-content .content .pengolahan .flow img {
    width: 100%
}

.service-pages .tabs-container .tab-content .content .pengolahan .intersect {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 37px
}

.service-pages .tabs-container .tab-content .content .pengolahan .row {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between
}

.service-pages .tabs-container .tab-content .content .pengolahan .row .item {
    display: flex;
    width: 30%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 20px;
    padding-bottom: 20px;
    gap: 5px;
    align-self: stretch;
    box-shadow: 30px 19px 98px #c1c1c13d
}

.service-pages .tabs-container .tab-content .content .pengolahan .row .item .img {
    width: 100%;
    position: relative
}

.service-pages .tabs-container .tab-content .content .pengolahan .row .item .img img {
    z-index: 1;
    width: 100%;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px
}

.service-pages .tabs-container .tab-content .content .pengolahan .row .item .img .no {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: #4caf50;
    padding: 10px 30px 30px;
    border-radius: 0 0 50px 50px;
    font-size: 43px;
    color: #fff
}

.service-pages .tabs-container .tab-content .content .pengolahan .row .item .text {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px
}

.service-pages .tabs-container .tab-content .content .pengolahan .row .item .text span {
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 31px
}

.service-pages .tabs-container .tab-content .content .pengolahan .foot {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 37px
}

.service-pages .tabs-container .tab-content .content .dumping {
    background-color: #f6fff9;
    background-size: cover;
    padding-left: 150px;
    display: flex;
    justify-content: end;
    align-items: center
}

.service-pages .tabs-container .tab-content .content .dumping .wrapper {
    display: flex;
    flex-direction: row
}

.service-pages .tabs-container .tab-content .content .dumping .wrapper .left {
    display: flex;
    width: 100%;
    gap: 45px;
    flex-direction: column;
    justify-content: center
}

.service-pages .tabs-container .tab-content .content .dumping .wrapper .left .top-desc {
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-family: Poppins, sans-serif
}

.service-pages .tabs-container .tab-content .content .dumping .wrapper .left .top-desc span {
    color: #0a9e33;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.service-pages .tabs-container .tab-content .content .dumping .wrapper .left .top-desc h1 {
    color: var(--Base-White, #252525);
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -1.08px
}

.service-pages .tabs-container .tab-content .content .dumping .wrapper .left .top-desc p {
    color: #646363;
    text-align: justify;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px
}

.service-pages .tabs-container .tab-content .content .dumping .wrapper .left .bottom-desc {
    display: flex;
    justify-content: flex-start;
    gap: 27px
}

.service-pages .tabs-container .tab-content .content .dumping .wrapper .left .bottom-desc .item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 22px;
    background-color: #0a9e33;
    border-radius: 20px
}

.service-pages .tabs-container .tab-content .content .dumping .wrapper .left .bottom-desc .item span {
    color: var(--Base-White, #fff);
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.service-pages .tabs-container .tab-content .content .dumping .wrapper .image-wrapper {
    display: flex;
    justify-content: end;
    width: 100%
}

.service-pages .tabs-container .tab-content .content .dumping .wrapper .image-wrapper img {
    width: 100%
}

.service-pages .tabs-container .tab-content .content .jasa {
    background-color: #fff;
    background-size: cover;
    padding-left: 150px;
    display: flex;
    justify-content: end;
    align-items: center
}

.service-pages .tabs-container .tab-content .content .jasa .wrapper {
    display: flex;
    flex-direction: row
}

.service-pages .tabs-container .tab-content .content .jasa .wrapper .left {
    display: flex;
    width: 100%;
    gap: 45px;
    flex-direction: column;
    justify-content: center
}

.service-pages .tabs-container .tab-content .content .jasa .wrapper .left .top-desc {
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-family: Poppins, sans-serif
}

.service-pages .tabs-container .tab-content .content .jasa .wrapper .left .top-desc span {
    color: #0a9e33;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.service-pages .tabs-container .tab-content .content .jasa .wrapper .left .top-desc h1 {
    color: var(--Base-White, #252525);
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -1.08px
}

.service-pages .tabs-container .tab-content .content .jasa .wrapper .left .top-desc p {
    color: #646363;
    text-align: justify;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px
}

.service-pages .tabs-container .tab-content .content .jasa .wrapper .left .bottom-desc {
    display: flex;
    justify-content: flex-start;
    gap: 27px
}

.service-pages .tabs-container .tab-content .content .jasa .wrapper .left .bottom-desc .item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 22px;
    background-color: #0a9e33;
    border-radius: 20px
}

.service-pages .tabs-container .tab-content .content .jasa .wrapper .left .bottom-desc .item span {
    color: var(--Base-White, #fff);
    font-family: Poppins, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.service-pages .tabs-container .tab-content .content .jasa .wrapper .image-wrapper {
    display: flex;
    justify-content: end;
    width: 100%
}

.service-pages .tabs-container .tab-content .content .jasa .wrapper .image-wrapper img {
    width: 100%
}

.hidden {
    display: none
}

.esg-page .laporan-esg {
    display: flex;
    padding: 100px 0;
    font-family: Poppins, sans-serif;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch
}

.esg-page .laporan-esg .content {
    padding: 0 150px
}

.esg-page .laporan-esg .content h3 {
    color: var(--Base-Green, #0a9e33);
    font-family: Poppins, sans-serif;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal
}

.esg-page .laporan-esg .content h3 span {
    font-family: Poppins, sans-serif;
    color: #000
}

.esg-page .laporan-esg .content p {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px
}

.esg-page .hero {
    position: relative
}

.esg-page .hero img {
    width: 100%
}

.esg-page .hero .group-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center
}

.esg-page .hero .group-text .text-2 {
    font-size: 1.1rem;
    font-weight: 300;
    width: 100%
}

.esg-page .kontak-kami {
    background-color: #fff;
    background-size: cover;
    font-family: Poppins, sans-serif !important;
    padding: 100px 150px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center
}

.esg-page .kontak-kami .wrapper {
    display: flex;
    flex-direction: row;
    width: 100%
}

.esg-page .kontak-kami .wrapper .left {
    display: flex;
    width: 60%;
    gap: 25px;
    flex-direction: column;
    justify-content: center
}

.esg-page .kontak-kami .wrapper .left .top-desc {
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-family: Poppins, sans-serif
}

.esg-page .kontak-kami .wrapper .left .top-desc span {
    color: #0a9e33;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.esg-page .kontak-kami .wrapper .left .top-desc h1 {
    color: #000;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -1.08px
}

.esg-page .kontak-kami .wrapper .left .top-desc p {
    color: #646363;
    text-align: justify;
    font-size: 16px;
    font-style: normal;
    font-weight: 400
}

.esg-page .kontak-kami .wrapper .left .bottom-desc {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    gap: 27px
}

.esg-page .kontak-kami .wrapper .left .bottom-desc iframe {
    border-radius: 10px
}

.esg-page .kontak-kami .wrapper .left .bottom-desc .item {
    display: flex;
    align-items: center;
    gap: 15px;
    border-radius: 20px
}

.esg-page .kontak-kami .wrapper .left .bottom-desc .item span {
    color: var(--Base-White, #000);
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal
}

.esg-page .kontak-kami .wrapper .image-wrapper {
    display: flex;
    width: 40%;
    justify-content: end
}

.esg-page .form-box {
    padding: 100px 150px;
    background-color: #f2fff5;
    display: flex;
    gap: 50px
}

.esg-page .form-box .left {
    width: 50%
}

.esg-page .form-box .left .box-form {
    width: 100%;
    padding: 20px;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 4px 4px #0000001a
}

.esg-page .form-box .left .box-form .input-box {
    width: 100%;
    display: flex;
    flex-direction: column
}

.esg-page .form-box .left .box-form .input-box p {
    margin: 0 0 5px;
    font-weight: 500;
    font-size: 15px
}

.esg-page .form-box .left .box-form .input-box input {
    padding: 10px;
    border: 1px solid #e7e9ed;
    border-radius: 10px;
    font-size: 15px
}

.esg-page .form-box .left .box-form .input-box textarea {
    padding: 10px;
    border: 1px solid #e7e9ed;
    border-radius: 10px;
    font-size: 15px;
    height: 75px
}

.esg-page .form-box .left .box-form .button-submit {
    cursor: pointer;
    width: 100%;
    border-radius: 10px;
    background-color: #0a9e33;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 16px
}

.esg-page .form-box .left .box-form .group-input {
    width: 100%;
    display: flex;
    gap: 20px
}

.esg-page .form-box .right {
    width: 50%;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.esg-page .form-box .right .text-1 {
    color: #000;
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 30px
}

.esg-page .form-box .right .text-1 span {
    color: #0a9e33
}

.esg-page .form-box .right .text-2 {
    color: #646363;
    font-size: 16px;
    font-weight: 400;
    text-align: justify
}

.esg-page .spin-earth {
    background-color: #f6fff9;
    height: 900px;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.esg-page .spin-earth .left {
    display: flex;
    flex-direction: column;
    width: 70%;
    position: relative
}

.esg-page .spin-earth .left .bg {
    width: 31%;
    position: absolute;
    top: 20%;
    left: 0%
}

.esg-page .spin-earth .left .bg img {
    width: 100%
}

.esg-page .spin-earth .left .image-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start
}

.esg-page .spin-earth .left .image-wrapper img {
    width: 133%;
    position: absolute;
    top: 6.5%;
    left: -58%
}

.esg-page .spin-earth .left .arrow {
    position: absolute
}

.esg-page .spin-earth .left .arrow.top-1 {
    top: 10%;
    left: 4%
}

.esg-page .spin-earth .left .arrow.top-2 {
    top: 22%;
    left: 21%
}

.esg-page .spin-earth .left .arrow.top-3 {
    top: 38%;
    left: 27%
}

.esg-page .spin-earth .left .arrow.bot-1 {
    bottom: 37%;
    left: 27%
}

.esg-page .spin-earth .left .arrow.bot-2 {
    bottom: 21%;
    left: 21%
}

.esg-page .spin-earth .left .arrow.bot-3 {
    bottom: 10%;
    left: 4%
}

.esg-page .spin-earth .left .content {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px
}

.esg-page .spin-earth .left .content p {
    color: var(--Base-Green, #0a9e33);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -.8px
}

.esg-page .spin-earth .left .content.tree {
    top: 5%;
    left: 18%
}

.esg-page .spin-earth .left .content.water {
    top: 17%;
    left: 34%
}

.esg-page .spin-earth .left .content.bicycle {
    top: 33%;
    left: 40%
}

.esg-page .spin-earth .left .content.trash {
    bottom: 32.5%;
    left: 40%
}

.esg-page .spin-earth .left .content.lights {
    bottom: 16.5%;
    left: 34%
}

.esg-page .spin-earth .left .content.recycle {
    bottom: 5%;
    left: 19%
}

.esg-page .spin-earth .left .none {
    display: none
}

.esg-page .spin-earth .right {
    position: relative;
    width: 25%;
    height: 100%;
    background-color: #0a9e33;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center
}

.esg-page .spin-earth .right .card-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.esg-page .spin-earth .right .card-container .card {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    background-color: #0a9e33;
    opacity: 0;
    transition: all .6s ease
}

.esg-page .spin-earth .right .card-container .card img {
    width: 100%
}

.esg-page .spin-earth .right .card-container .card .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 50px
}

.esg-page .spin-earth .right .card-container .card .text h2 {
    color: var(--Base-White, #fff);
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -1.08px
}

.esg-page .spin-earth .right .card-container .card .text p {
    margin-top: 10px;
    color: #84ffa6;
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px
}

.esg-page .spin-earth .right .card-container .card .text ul {
    color: #84ffa6;
    padding-left: 15px;
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 26px
}

.esg-page .spin-earth .card.active-card {
    left: 0;
    opacity: 1;
    z-index: 1
}

.esg-page .spin-earth .rotate-animation {
    transition: transform 1s ease-in-out
}

.esg-page .spin-earth .arrow.active img {
    animation: arrowBounce .5s ease-in-out infinite
}

.esg-page .spin-earth .fade-in {
    animation: fadeInSlide .5s ease forwards
}

.esg-page .spin-earth .fade-out {
    animation: fadeInSlide .5s ease reverse forwards
}

.esg-page .spin-earth .content.green img,
.esg-page .spin-earth .content.green p {
    opacity: 1;
    transform: scale(1.1)
}

.esg-page .spin-earth .content img,
.esg-page .spin-earth .content p {
    opacity: .5
}

.esg-page .spin-earth .none {
    display: none
}

.tentang-kami .tentang {
    padding: 40px 30px 20px;
    display: flex;
    justify-content: center;
    background-image: none !important
}

.tentang-kami .tentang-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.tentang-kami .tentang-wrapper p {
    font-style: normal
}

.tentang-kami .tentang-wrapper p.sub-title {
    color: var(--Base-Green, #0a9e33);
    font-size: 14px;
    font-weight: 500;
    line-height: normal
}

.tentang-kami .tentang-wrapper p.title {
    color: var(--Base-Black, #252525);
    font-size: 20px;
    font-weight: 700;
    line-height: normal
}

.tentang-kami .tentang-wrapper p.title span {
    color: #0a9e33
}

.tentang-kami .tentang-wrapper p.desc {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px
}

.tentang-kami .spin-earth {
    background-color: #f6fff9;
    height: 1500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.tentang-kami .spin-earth .left {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative
}

.tentang-kami .spin-earth .left .bg {
    width: 50%;
    position: absolute;
    top: 25%;
    left: -16%
}

.tentang-kami .spin-earth .left .bg img {
    width: 100%;
    transform: scale(1.4)
}

.tentang-kami .spin-earth .left .image-wrapper {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start
}

.tentang-kami .spin-earth .left .image-wrapper img {
    width: 200%;
    position: absolute;
    top: 14%;
    left: -86%
}

.tentang-kami .spin-earth .left .arrow {
    position: absolute
}

.tentang-kami .spin-earth .left .arrow img {
    width: 50%
}

.tentang-kami .spin-earth .left .arrow.top-1 {
    top: 15%;
    left: 11%
}

.tentang-kami .spin-earth .left .arrow.top-2 {
    top: 23%;
    left: 36%
}

.tentang-kami .spin-earth .left .arrow.top-3 {
    top: 34%;
    left: 40%
}

.tentang-kami .spin-earth .left .arrow.bot-1 {
    bottom: 50%;
    left: 41%
}

.tentang-kami .spin-earth .left .arrow.bot-2 {
    bottom: 40%;
    left: 37%
}

.tentang-kami .spin-earth .left .arrow.bot-3 {
    bottom: 31%;
    left: 16%
}

.tentang-kami .spin-earth .left .content {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px
}

.tentang-kami .spin-earth .left .content img {
    width: 42px;
    height: 42px
}

.tentang-kami .spin-earth .left .content p {
    color: var(--Base-Green, #0a9e33);
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -.8px
}

.tentang-kami .spin-earth .left .content p.none-active {
    color: #a3aba5
}

.tentang-kami .spin-earth .left .content.tree {
    top: 12%;
    left: 34%
}

.tentang-kami .spin-earth .left .content.water {
    top: 20%;
    left: 55%
}

.tentang-kami .spin-earth .left .content.bicycle {
    top: 31.5%;
    left: 58%
}

.tentang-kami .spin-earth .left .content.trash {
    bottom: 47.5%;
    left: 60%
}

.tentang-kami .spin-earth .left .content.lights {
    bottom: 37.5%;
    left: 55%
}

.tentang-kami .spin-earth .left .content.recycle {
    bottom: 28.5%;
    left: 35%
}

.tentang-kami .spin-earth .left .none {
    display: none
}

.tentang-kami .spin-earth .right {
    width: 500px !important;
    height: 100%;
    background-color: #0a9e33;
    overflow: hidden;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    align-items: center
}

.tentang-kami .spin-earth .card-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.tentang-kami .spin-earth .card {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    background-color: #0a9e33;
    opacity: 0;
    transition: all .6s ease
}

.tentang-kami .spin-earth .card img {
    width: 100%;
    height: 550px !important;
    object-fit: cover;
    height: auto
}

.tentang-kami .spin-earth .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 29.286px
}

.tentang-kami .spin-earth .text h2 {
    color: var(--Base-White, #fff);
    font-size: 22px !important;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: .5px
}

.tentang-kami .spin-earth .text p {
    margin-top: 10px;
    color: #84ffa6;
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px
}

.tentang-kami .spin-earth .text ul {
    color: #84ffa6;
    padding-left: 14px;
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px
}

.tentang-kami .spin-earth .card.active-card {
    left: 0;
    opacity: 1;
    z-index: 1
}

.tentang-kami .spin-earth .rotate-animation {
    transition: transform 1s ease-in-out
}

@keyframes arrowBounce {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }
}

.tentang-kami .spin-earth .arrow.active img {
    animation: arrowBounce .5s ease-in-out infinite
}

@keyframes fadeInSlide {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.tentang-kami .spin-earth .fade-in {
    animation: fadeInSlide .5s ease forwards
}

.tentang-kami .spin-earth .fade-out {
    animation: fadeInSlide .5s ease reverse forwards
}

.tentang-kami .spin-earth .content.green img,
.tentang-kami .spin-earth .content.green p {
    opacity: 1;
    transform: scale(1.1)
}

.tentang-kami .spin-earth .content img,
.tentang-kami .spin-earth .content p {
    opacity: .5
}

.tentang-kami .spin-earth .none {
    display: none
}

.tentang-kami .dumping {
    background: #fff;
    display: flex;
    overflow-x: hidden;
    align-items: center
}

.tentang-kami .dumping .accordion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border: none;
    border-bottom: none
}

.tentang-kami .dumping .accordion-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: none;
    color: #fff;
    background: #0a9e33
}

.tentang-kami .dumping .accordion-item:first-of-type .accordion-button,
.tentang-kami .dumping .accordion-item:last-of-type .accordion-button {
    border-radius: 10px
}

.tentang-kami .dumping .accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-radius: 10px
}

.tentang-kami .dumping .accordion-body {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px
}

.tentang-kami .dumping .accordion-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #fff;
    cursor: pointer;
    border-radius: 10px;
    background: var(--Base-Green, #0a9e33);
    padding: 15px;
    border-bottom: 10px solid #0a9e33;
    font-size: 14px
}

.tentang-kami .dumping .accordion-button span {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 26px;
    height: 26px;
    border-radius: 10%;
    font-size: 13px;
    font-weight: 600;
    background-color: #fff;
    color: #0a9e33
}

.tentang-kami .dumping .accordion-button.collapsed {
    background: #305a4f;
    border: #305a4f
}

.tentang-kami .dumping .accordion-button:after {
    content: url(/build/assets/arrow-down-BmnpXfVy.png);
    width: 24px;
    height: 24px;
    background-image: none
}

.tentang-kami .dumping .left {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column
}

.tentang-kami .dumping .left p.title {
    color: var(--Base-Black, #252525);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -1.08px
}

.tentang-kami .dumping .left p.title #tentang-txt {
    font-weight: 400
}

.tentang-kami .dumping .left p.title span {
    color: #0a9e33
}

.tentang-kami .dumping .left p.desc {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.tentang-kami .dumping .left p.desc span {
    color: var(--Base-Black, #252525);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px
}

.tentang-kami .dumping .left ol,
.tentang-kami .dumping .left ul,
.tentang-kami .dumping .left li {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    color: #fff
}

.tentang-kami .dumping .left ul {
    margin-left: -15px
}

.tentang-kami .dumping .left .read-more {
    color: var(--Base-Black, #252525);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    width: 100%;
    text-align: left;
    margin-left: 10px
}

.tentang-kami .dumping .right,
.tentang-kami .dumping .right img {
    width: 100%
}

@media (min-width: 719px) and (max-width: 1200px) {

    .tentang-kami .laporan.tentang.snap-section,
    .tentang-kami .laporan.dumping.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .tentang {
        padding: 53.333px 80px
    }

    .tentang-kami .spin-earth.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .spin-earth {
        display: flex;
        flex-direction: row !important;
        height: 700px
    }

    .tentang-kami .spin-earth .text {
        padding: 20px !important
    }

    .tentang-kami .spin-earth .card img {
        width: auto;
        height: 300px !important;
        aspect-ratio: 16/9 !important
    }

    .tentang-kami .spin-earth .left {
        width: 55% !important;
        position: relative !important
    }

    .tentang-kami .spin-earth .left .bg img {
        position: absolute;
        top: -35px;
        left: -110px;
        scale: .6;
        width: 428.516px;
        height: 436.452px !important;
        flex-shrink: 0 !important
    }

    .tentang-kami .spin-earth .left .content {
        gap: 15px;
        position: absolute !important
    }

    .tentang-kami .spin-earth .left .content img {
        width: 44px;
        height: 44px
    }

    .tentang-kami .spin-earth .left .content p {
        font-size: 11px;
        width: 100px
    }

    .tentang-kami .spin-earth .left .content p.three-line {
        width: 100px;
        margin-top: 15px
    }

    .tentang-kami .spin-earth .left .content.tree {
        top: 12% !important;
        left: 18% !important
    }

    .tentang-kami .spin-earth .left .content.water {
        top: 24%;
        left: 42%
    }

    .tentang-kami .spin-earth .left .content.bicycle {
        top: 40%;
        left: 52%
    }

    .tentang-kami .spin-earth .left .content.trash {
        bottom: 35%;
        left: 54%
    }

    .tentang-kami .spin-earth .left .content.lights {
        bottom: 22%;
        left: 42%
    }

    .tentang-kami .spin-earth .left .content.recycle {
        bottom: 12%;
        left: 18%
    }

    .tentang-kami .spin-earth .right {
        width: 35% !important
    }

    .tentang-kami .spin-earth .image-wrapper img {
        width: 428.516px !important;
        height: 436.452px !important;
        flex-shrink: 0;
        scale: 1;
        position: absolute;
        left: -180px !important;
        top: 140px !important
    }

    .tentang-kami .spin-earth .image-wrapper .arrow img {
        width: 100%
    }

    .tentang-kami .spin-earth .image-wrapper .arrow.top-1 {
        top: 13%;
        left: 20%
    }

    .tentang-kami .spin-earth .image-wrapper .arrow.top-2 {
        top: 20%;
        left: 40%
    }

    .tentang-kami .spin-earth .image-wrapper .arrow.top-3 {
        top: 34%;
        left: 49%
    }

    .tentang-kami .spin-earth .image-wrapper .arrow.bot-1 {
        bottom: 45%;
        left: 50%
    }

    .tentang-kami .spin-earth .image-wrapper .arrow.bot-2 {
        bottom: 30%;
        left: 42%
    }

    .tentang-kami .spin-earth .image-wrapper .arrow.bot-3 {
        bottom: 20%;
        left: 25%
    }

    .tentang-kami .spin-earth .card img {
        height: 500px
    }

    .tentang-kami .spin-earth .text {
        padding: 53.333px 80px
    }

    .tentang-kami .spin-earth .text h2 {
        font-size: 14px !important
    }

    .tentang-kami .spin-earth .text p {
        line-height: 1.6 !important;
        font-size: 12px !important
    }

    .tentang-kami .spin-earth .text ul {
        font-size: 12px !important;
        line-height: 1.4 !important
    }

    .tentang-kami .dumping {
        overflow: hidden;
        scrollbar-width: none;
        flex-direction: row
    }

    .tentang-kami .dumping .left {
        padding: 80px 53.333px;
        width: 65%
    }

    .tentang-kami .dumping .right {
        width: 35%
    }

    .tentang-kami .dumping .right img {
        min-height: 1050px;
        height: 1050px;
        object-fit: cover;
        margin-bottom: -px !important
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tentang-kami .spin-earth {
        display: flex;
        flex-direction: row !important;
        height: 700px
    }

    .tentang-kami .spin-earth .text {
        padding: 20px !important
    }

    .tentang-kami .spin-earth .card img {
        width: auto;
        height: 300px !important;
        aspect-ratio: 16/9 !important
    }

    .tentang-kami .spin-earth .left {
        width: 60% !important;
        position: relative !important
    }

    .tentang-kami .spin-earth .left .bg img {
        position: absolute;
        top: -35px;
        left: -80px;
        scale: .6;
        scale: .7;
        width: 428.516px;
        height: 436.452px !important;
        flex-shrink: 0 !important
    }

    .tentang-kami .spin-earth .left .content {
        gap: 15px;
        position: absolute !important
    }

    .tentang-kami .spin-earth .left .content img {
        width: 48px;
        height: 48px
    }

    .tentang-kami .spin-earth .left .content p {
        font-size: 12px;
        width: 100px
    }

    .tentang-kami .spin-earth .left .content.tree {
        top: 10% !important;
        left: 15% !important
    }

    .tentang-kami .spin-earth .left .content.water {
        top: 24%;
        left: 38%
    }

    .tentang-kami .spin-earth .left .content.bicycle {
        top: 40%;
        left: 47%
    }

    .tentang-kami .spin-earth .left .content.trash {
        bottom: 35%;
        left: 47%
    }

    .tentang-kami .spin-earth .left .content.lights {
        bottom: 20%;
        left: 38%
    }

    .tentang-kami .spin-earth .left .content.recycle {
        bottom: 8%;
        left: 15%
    }

    .tentang-kami .spin-earth .right {
        width: 40%
    }

    .tentang-kami .spin-earth .image-wrapper img {
        width: 428.516px !important;
        height: 436.452px !important;
        flex-shrink: 0;
        scale: 1;
        position: absolute;
        left: -180px !important;
        top: 140px !important
    }

    .tentang-kami .spin-earth .image-wrapper .arrow img {
        width: 100%
    }

    .tentang-kami .spin-earth .image-wrapper .arrow.top-1 {
        top: 13%;
        left: 20%
    }

    .tentang-kami .spin-earth .image-wrapper .arrow.top-2 {
        top: 20%;
        left: 40%
    }

    .tentang-kami .spin-earth .image-wrapper .arrow.top-3 {
        top: 34%;
        left: 49%
    }

    .tentang-kami .spin-earth .image-wrapper .arrow.bot-1 {
        bottom: 45%;
        left: 50%
    }

    .tentang-kami .spin-earth .image-wrapper .arrow.bot-2 {
        bottom: 30%;
        left: 42%
    }

    .tentang-kami .spin-earth .image-wrapper .arrow.bot-3 {
        bottom: 20%;
        left: 25%
    }

    .tentang-kami .spin-earth .card img {
        height: 500px
    }

    .tentang-kami .spin-earth .text {
        padding: 53.333px 80px
    }

    .tentang-kami .dumping .left {
        padding: 80px 53.333px;
        width: 65%
    }

    .tentang-kami .dumping .right {
        width: 35%
    }

    .tentang-kami .dumping .right img {
        min-height: 1000px;
        height: 1000px;
        object-fit: cover;
        margin-bottom: -px !important;
        margin-bottom: -200px
    }
}

@media (min-width: 1200px) {
    .tentang-kami .laporan.tentang.snap-section {
        min-height: 0dvh !important
    }

    .tentang-kami .laporan.tentang .tentang-wrapper div .title span:nth-child(1) {
        display: none
    }

    .tentang-kami .tentang {
        padding: 45px 100px;
        min-height: max-content
    }

    .tentang-kami .tentang-wrapper {
        gap: 10px
    }

    .tentang-kami .tentang-wrapper p.sub-title {
        font-size: 20px;
        margin: 0
    }

    .tentang-kami .tentang-wrapper p.title {
        font-size: 24px;
        margin: 0
    }

    .tentang-kami .tentang-wrapper p.desc {
        line-height: 30px;
        margin: 0;
        font-size: 14px
    }

    .tentang-kami .spin-earth {
        height: calc(100vh - 100px);
        flex-direction: row
    }

    .tentang-kami .spin-earth .left {
        width: 65%
    }

    .tentang-kami .spin-earth .left .bg {
        width: 33%;
        left: -9%
    }

    .tentang-kami .spin-earth .left .image-wrapper img {
        width: 55%;
        top: 8.5%;
        left: -19%
    }

    .tentang-kami .spin-earth .left .arrow img {
        width: 100%
    }

    .tentang-kami .spin-earth .left .arrow.top-1 {
        top: 10%;
        left: 4%
    }

    .tentang-kami .spin-earth .left .arrow.top-2 {
        top: 22%;
        left: 21%
    }

    .tentang-kami .spin-earth .left .arrow.top-3 {
        top: 40%;
        left: 27%
    }

    .tentang-kami .spin-earth .left .arrow.bot-1 {
        bottom: 37%;
        left: 27%
    }

    .tentang-kami .spin-earth .left .arrow.bot-2 {
        bottom: 21%;
        left: 21%
    }

    .tentang-kami .spin-earth .left .arrow.bot-3 {
        bottom: 10%;
        left: 4%
    }

    .tentang-kami .spin-earth .left .content {
        gap: 30px
    }

    .tentang-kami .spin-earth .left .content img {
        width: 50px;
        height: 50px
    }

    .tentang-kami .spin-earth .left .content p {
        font-size: 14px;
        white-space: nowrap;
        margin: 0
    }

    .tentang-kami .spin-earth .left .content.tree {
        top: 10%;
        left: 22%
    }

    .tentang-kami .spin-earth .left .content.water {
        top: 22%;
        left: 31%
    }

    .tentang-kami .spin-earth .left .content.bicycle {
        top: 35%;
        left: 35%
    }

    .tentang-kami .spin-earth .left .content.trash {
        bottom: 42%;
        left: 36%
    }

    .tentang-kami .spin-earth .left .content.lights {
        bottom: 26%;
        left: 33%
    }

    .tentang-kami .spin-earth .left .content.recycle {
        bottom: 12%;
        left: 26%
    }

    .tentang-kami .spin-earth .right {
        width: 35%
    }

    .tentang-kami .spin-earth .card img {
        height: 275px !important
    }

    .tentang-kami .spin-earth .text {
        padding: 30px;
        gap: 10px
    }

    .tentang-kami .spin-earth .text h2 {
        font-size: 18px;
        line-height: normal;
        margin: 0
    }

    .tentang-kami .spin-earth .text p,
    .tentang-kami .spin-earth .text ul {
        line-height: 22px;
        margin: 0
    }

    .tentang-kami .dumping {
        flex-direction: row;
        padding: 20px 0;
        position: relative;
        margin: 0 90px 0 0;
        justify-content: flex-end !important
    }

    .tentang-kami .dumping .accordion-body {
        padding: 0 20px 0 10px
    }

    .tentang-kami .dumping .left {
        padding: 0;
        z-index: 5;
        width: 62%
    }

    .tentang-kami .dumping .left p.title {
        font-size: 24px;
        margin: 0 0 5px
    }

    .tentang-kami .dumping .left p.desc {
        font-size: 14px;
        line-height: 22px
    }

    .tentang-kami .dumping .left p.desc span {
        line-height: 25px
    }

    .tentang-kami .dumping .left ol,
    .tentang-kami .dumping .left ul,
    .tentang-kami .dumping .left li {
        line-height: 25px;
        font-size: 13px
    }

    .tentang-kami .dumping .left ul {
        margin-left: -25px
    }

    .tentang-kami .dumping .left .read-more {
        line-height: 25px;
        margin-left: 20px
    }

    .tentang-kami .dumping .right {
        position: absolute;
        left: -4px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 35%
    }

    .tentang-kami .dumping .right img {
        object-fit: cover;
        height: calc(100vh - 150px)
    }
}

@media (max-width: 719px) {
    .tentang-kami .laporan .contact.contact-us.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .laporan .contac-us-wrapper {
        display: flex;
        flex-direction: column !important
    }

    .tentang-kami .laporan .contac-us-wrapper .left .title {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -.48px;
        width: 250px
    }

    .tentang-kami .laporan .contac-us-wrapper .right iframe {
        width: 100dvw;
        margin-left: -30px;
        height: 70dvw
    }

    .tentang-kami .laporan.tentang.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .laporan.dumping {
        margin-top: 40px;
        display: flex;
        flex-direction: column !important
    }

    .tentang-kami .laporan.dumping.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .laporan.dumping .left {
        padding: 0 30px;
        margin-bottom: 40px
    }

    .tentang-kami .laporan.dumping .right {
        order: 2
    }

    .tentang-kami .laporan.dumping .right img {
        height: 304px;
        object-fit: cover
    }

    .tentang-kami .spin-earth {
        background-color: #f6fff9
    }

    .tentang-kami .spin-earth.snap-section {
        min-height: 0 !important;
        height: 900px
    }

    .tentang-kami .spin-earth .left .content.tree {
        gap: 20px;
        left: 10%;
        width: 170px
    }

    .tentang-kami .spin-earth .left .content.water {
        top: 18%;
        left: 32%;
        width: 170px
    }

    .tentang-kami .spin-earth .left .content.bicycle {
        top: 26%;
        left: 43%;
        width: 170px
    }

    .tentang-kami .spin-earth .left .content.trash {
        bottom: 58%;
        left: 44%;
        width: 170px
    }

    .tentang-kami .spin-earth .left .content.lights {
        bottom: 47%;
        left: 35%;
        width: 170px
    }

    .tentang-kami .spin-earth .left .content.recycle {
        bottom: 38%;
        left: 10%;
        width: 170px
    }

    .tentang-kami .spin-earth .left .bg img {
        position: absolute;
        left: -10%
    }

    .tentang-kami .spin-earth .left .image-wrapper img {
        width: 90%;
        position: absolute;
        top: 16.7%;
        left: -45%
    }

    .tentang-kami .spin-earth .right {
        margin-top: -270px;
        height: 50dvh
    }

    .tentang-kami .spin-earth .right .card-container .card {
        display: flex;
        flex-direction: row;
        overflow: auto;
        align-items: center
    }

    .tentang-kami .spin-earth .right .card-container .card img {
        aspect-ratio: 9/33;
        height: auto !important;
        width: 25dvw;
        margin-top: 0%;
        object-fit: cover
    }

    .tentang-kami .spin-earth .right .card-container .card .text {
        display: flex;
        overflow-y: auto;
        height: 250px;
        padding: 0% 28% 0% 4%
    }

    .tentang-kami .spin-earth .right .card-container .card .text.tree,
    .tentang-kami .spin-earth .right .card-container .card .text.water {
        padding: 0% 28% 0% 4%
    }

    .tentang-kami .spin-earth .right .card-container .card .text.bicycle {
        padding: 25% 28% 0% 4%
    }

    .tentang-kami .spin-earth .right .card-container .card .text.trash {
        padding: 55% 28% 0% 4%
    }

    .tentang-kami .spin-earth .right .card-container .card .text.lights,
    .tentang-kami .spin-earth .right .card-container .card .text.recycle {
        padding: 0% 28% 0% 4%
    }

    .tentang-kami .spin-earth .right .card-container .card .text h2 {
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -.42px
    }

    .tentang-kami .spin-earth .right .card-container .card .text p {
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        color: #fff
    }

    .tentang-kami .spin-earth .right .card-container .card .text ul {
        color: #fff;
        font-weight: 400
    }
}

@media (min-width: 500px) and (max-width: 600px) {
    .tentang-kami .spin-earth .left {
        width: 100% !important;
        min-height: 220px;
        position: relative !important
    }

    .tentang-kami .spin-earth .left .content {
        gap: 15px
    }

    .tentang-kami .spin-earth .left .content img {
        width: 40px;
        height: 40px
    }

    .tentang-kami .spin-earth .left .content p {
        font-size: 12px;
        width: 90px
    }

    .tentang-kami .spin-earth .left .content p.three-line {
        width: 130px
    }

    .tentang-kami .spin-earth .left .content.trash {
        bottom: 56%;
        left: 45%
    }

    .tentang-kami .spin-earth .left .content.lights {
        bottom: 46%;
        left: 40%
    }

    .tentang-kami .spin-earth .left .content.recycle {
        bottom: 36%;
        left: 30%
    }

    .tentang-kami .spin-earth .left .bg {
        width: 100%;
        position: absolute
    }

    .tentang-kami .spin-earth .left .bg img {
        width: 100% !important;
        max-width: 280px
    }

    .tentang-kami .spin-earth .left .image-wrapper {
        width: 100%;
        height: 300px;
        display: flex;
        position: relative;
        align-items: flex-start;
        justify-content: flex-start
    }

    .tentang-kami .spin-earth .left .image-wrapper img.earth {
        width: 100% !important;
        max-width: 480px;
        min-width: 180px;
        top: 37% !important;
        position: absolute !important;
        z-index: 2
    }

    .tentang-kami .spin-earth .right {
        width: 100% !important;
        margin-top: -200px !important;
        min-height: 220px;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: flex-start
    }

    .tentang-kami .spin-earth .right .card-container {
        padding: 0 !important
    }

    .tentang-kami .spin-earth .right .card-container .card {
        padding: 0 !important;
        margin: 0 !important;
        display: flex;
        flex-direction: row;
        align-items: flex-start
    }

    .tentang-kami .spin-earth .right .card-container .card img {
        width: 20vw !important;
        height: auto !important;
        align-self: flex-start
    }

    .tentang-kami .spin-earth .right .card-container .card .text {
        padding: 16px 10px 10px !important;
        justify-content: flex-start !important
    }
}

@media (min-width: 600px) and (max-width: 719px) {

    .tentang-kami .spin-earth,
    .tentang-kami .spin-earth.snap-section {
        display: flex;
        flex-direction: row !important;
        height: 400px !important;
        min-height: 600px !important;
        max-height: 600px !important
    }

    .tentang-kami .spin-earth .left,
    .tentang-kami .spin-earth.snap-section .left {
        width: 60% !important;
        position: relative !important;
        height: 100% !important
    }

    .tentang-kami .spin-earth .left .bg,
    .tentang-kami .spin-earth.snap-section .left .bg {
        position: absolute;
        left: -25% !important;
        top: 30% !important;
        width: 100% !important;
        max-width: 270px !important
    }

    .tentang-kami .spin-earth .left .bg img,
    .tentang-kami .spin-earth.snap-section .left .bg img {
        width: 100% !important;
        max-width: 480px !important;
        min-width: 180px !important;
        left: 0 !important;
        top: 0 !important;
        position: relative !important
    }

    .tentang-kami .spin-earth .left .image-wrapper,
    .tentang-kami .spin-earth.snap-section .left .image-wrapper {
        width: 100%;
        height: 100%;
        position: absolute;
        top: -8px;
        left: 0
    }

    .tentang-kami .spin-earth .left .image-wrapper img.earth,
    .tentang-kami .spin-earth.snap-section .left .image-wrapper img.earth {
        width: 100% !important;
        max-width: 500px !important;
        min-width: 450px !important;
        position: relative !important;
        z-index: 2;
        display: block
    }

    .tentang-kami .spin-earth .left .content,
    .tentang-kami .spin-earth.snap-section .left .content {
        position: absolute;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 15px
    }

    .tentang-kami .spin-earth .left .content img,
    .tentang-kami .spin-earth.snap-section .left .content img {
        width: 48px;
        height: 48px
    }

    .tentang-kami .spin-earth .left .content p,
    .tentang-kami .spin-earth.snap-section .left .content p {
        font-size: 12px;
        width: 100px
    }

    .tentang-kami .spin-earth .left .content p.three-line,
    .tentang-kami .spin-earth.snap-section .left .content p.three-line {
        width: 150px
    }

    .tentang-kami .spin-earth .left .content.tree,
    .tentang-kami .spin-earth.snap-section .left .content.tree {
        top: 13% !important;
        left: 25% !important
    }

    .tentang-kami .spin-earth .left .content.water,
    .tentang-kami .spin-earth.snap-section .left .content.water {
        top: 25%;
        left: 45%
    }

    .tentang-kami .spin-earth .left .content.bicycle,
    .tentang-kami .spin-earth.snap-section .left .content.bicycle {
        top: 40%;
        left: 55%
    }

    .tentang-kami .spin-earth .left .content.trash,
    .tentang-kami .spin-earth.snap-section .left .content.trash {
        bottom: 35%;
        left: 53%
    }

    .tentang-kami .spin-earth .left .content.lights,
    .tentang-kami .spin-earth.snap-section .left .content.lights {
        bottom: 22%;
        left: 43%
    }

    .tentang-kami .spin-earth .left .content.recycle,
    .tentang-kami .spin-earth.snap-section .left .content.recycle {
        bottom: 9%;
        left: 25%
    }

    .tentang-kami .spin-earth .right,
    .tentang-kami .spin-earth.snap-section .right {
        width: 40% !important;
        margin-top: 0 !important;
        height: 100% !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center
    }

    .tentang-kami .spin-earth .right .card-container,
    .tentang-kami .spin-earth.snap-section .right .card-container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start
    }

    .tentang-kami .spin-earth .right .card-container .card,
    .tentang-kami .spin-earth.snap-section .right .card-container .card {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: 100%;
        background: none
    }

    .tentang-kami .spin-earth .right .card-container .card img,
    .tentang-kami .spin-earth.snap-section .right .card-container .card img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: unset !important;
        object-fit: contain !important;
        margin: 0 auto 8px;
        display: block
    }

    .tentang-kami .spin-earth .right .card-container .card .text,
    .tentang-kami .spin-earth.snap-section .right .card-container .card .text {
        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        height: auto !important;
        min-height: 0 !important
    }

    .tentang-kami .spin-earth .right .card-container .card .text h2,
    .tentang-kami .spin-earth.snap-section .right .card-container .card .text h2 {
        font-size: 16px !important
    }
}

.all-pages .text-page {
    display: none;
    gap: 20px;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

.all-pages .text-page.show {
    display: flex
}

.all-pages .item-page {
    display: none
}

.all-pages .item-page.show {
    display: block
}

.waste {
    overflow-x: hidden
}

.waste.snap-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.waste.snap-container::-webkit-scrollbar {
    display: none
}

.waste.snap-container hr {
    margin: 0 -3px
}

@media (max-width: 768px) {
    .waste.snap-container {
        scroll-snap-type: y proximity;
        height: 100dvh;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain
    }
}

.waste .scroll-indicator {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000
}

.waste .scroll-indicator .scroll-dots {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.waste .scroll-indicator .scroll-dots .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ffffff80;
    border: 2px solid rgba(10, 158, 51, .3);
    cursor: pointer;
    transition: all .3s ease
}

.waste .scroll-indicator .scroll-dots .dot:hover {
    background-color: #0a9e33b3;
    transform: scale(1.2)
}

.waste .scroll-indicator .scroll-dots .dot.active {
    background-color: #0a9e33;
    border-color: #0a9e33;
    transform: scale(1.3)
}

@media (max-width: 768px) {
    .waste .scroll-indicator {
        display: none
    }
}

.waste .snap-section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    scroll-margin-top: 100px;
    min-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative
}

.waste .snap-section [data-aos] {
    pointer-events: none
}

.waste .snap-section [data-aos].aos-animate {
    pointer-events: auto
}

@media (max-width: 768px) {
    .waste .snap-section {
        min-height: 100dvh;
        scroll-snap-align: start;
        scroll-snap-stop: normal
    }

    .waste .snap-section.hero-section-new,
    .waste .snap-section.article {
        justify-content: flex-start
    }
}

.waste .snap-section.partnership,
.waste .snap-section.chartdiv {
    justify-content: flex-start;
    padding: 2rem 0
}

@media (max-width: 768px) {

    .waste .snap-section.partnership,
    .waste .snap-section.chartdiv {
        padding: 1rem 0
    }
}

.waste .olah.wrapp-himbau.snap-section {
    min-height: 80dvh !important
}

.waste .pengelolaan {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    display: flex
}

.waste .pengelolaan .wrapp-himbau {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    gap: 60px
}

.waste .pengelolaan .wrapp-himbau .wrapp-img {
    max-width: 350px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center !important
}

.waste .pengelolaan .wrapp-himbau .wrapp-img img {
    width: 350px !important;
    height: 347.879px !important
}

.waste .pengelolaan .wrapp-himbau .wrapp-img .title {
    min-width: 900px !important;
    width: 900px !important;
    display: flex;
    margin-bottom: 80px;
    justify-content: start !important;
    flex-direction: row;
    font-size: 26px
}

.waste .pengelolaan .wrapp-himbau .wrapp-img .title span {
    margin-left: 7px
}

.waste .pengelolaan .wrapp-himbau .wrap-text {
    text-align: left;
    display: flex;
    flex-direction: column;
    margin-top: 100px !important;
    max-width: 100dvw !important;
    width: 100% !important
}

.waste .pengelolaan .wrapp-himbau .wrap-text .desc {
    margin: 0;
    line-height: 1.6
}

.waste .pengelolaan .wrapp-himbau .wrap-text .desc .see-more-btn {
    background: none;
    border: none;
    color: #595959;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    font-weight: 600;
    font-size: 14px;
    line-height: 25px;
    letter-spacing: 0%;
    text-align: justify
}

.waste .pengelolaan .wrapp-himbau .wrap-text .desc .see-more-btn:hover {
    text-decoration: none
}

.waste .pengelolaan .wrapp-himbau .wrap-text .desc.more-content {
    display: none;
    margin-top: 8px
}

.waste .pengelolaan p.title {
    color: var(--Base-Black, #252525);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -.9px
}

.waste .pengelolaan p.title span {
    color: #0a9e33
}

.waste .pengelolaan p.desc {
    color: var(--Base-Grey, #646363);
    font-size: 14px;
    text-align: justify;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.waste .pengelolaan p.desc span {
    font-style: italic;
    color: #0a9e33;
    font-weight: 600
}

.waste .pengelolaan .tahapan {
    width: 100%;
    position: relative;
    margin: 20px auto
}

.waste .pengelolaan .tahapan .garis-hijau {
    width: 100%;
    position: relative;
    padding: 10px 0 10px 45px
}

.waste .pengelolaan .tahapan .garis-hijau-loop {
    width: 100%;
    position: relative;
    padding: 10px 0
}

.waste .pengelolaan .tahapan .wrapp-step {
    height: 80px;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between
}

.waste .pengelolaan .tahapan .wrapp-step .step {
    position: absolute;
    display: flex !important;
    align-items: center
}

.waste .pengelolaan .tahapan .wrapp-step .step .tool-tip {
    top: -65px;
    position: absolute;
    display: flex;
    padding: 6px 9.8px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 7.841px;
    background: var(--Neutral-100, #FFF);
    color: var(--Base-Dark, #171717);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    opacity: 0;
    transition: opacity .3s ease;
    box-shadow: 1px 5px 13px -1px #b8b8b8bf
}

.waste .pengelolaan .tahapan .wrapp-step .step .tool-tip .triangle {
    width: 10px;
    height: 10px;
    bottom: -4px;
    position: absolute;
    background-color: #fff;
    transform: rotate(45deg)
}

.waste .pengelolaan .tahapan .wrapp-step .step:hover .tool-tip {
    opacity: 1
}

.waste .pengelolaan .tahapan .wrapp-step .step.satu {
    left: 1.5%
}

.waste .pengelolaan .tahapan .wrapp-step .step.dua {
    left: 30%
}

.waste .pengelolaan .tahapan .wrapp-step .step.tiga {
    left: 57.5%
}

.waste .pengelolaan .tahapan .wrapp-step .step.tiga img {
    width: 45px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto
}

.waste .pengelolaan .tahapan .wrapp-step .step.empat {
    left: 85.5%
}

.waste .pengelolaan .tahapan .wrapp-step .step.empat img {
    width: 45px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto
}

.waste .pengelolaan .tahapan .wrapp-step .step.one {
    left: 1.5%
}

.waste .pengelolaan .tahapan .wrapp-step .step.two {
    left: 30%
}

.waste .pengelolaan .tahapan .wrapp-step .step.three {
    left: 57.5%
}

.waste .pengelolaan .tahapan .wrapp-step .step.three img {
    width: 45px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto
}

.waste .pengelolaan .tahapan .wrapp-step .step.four {
    left: 85.9%
}

.waste .pengelolaan .tahapan .wrapp-step .step.four img {
    width: 45px;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto
}

.waste .pengelolaan .tahapan .wrapp-step-2 {
    height: 80px;
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%
}

.waste .pengelolaan .tahapan .wrapp-step-2 .step {
    position: absolute
}

.waste .pengelolaan .tahapan .wrapp-step-2 .step.lima {
    left: 2%
}

.waste .pengelolaan .tahapan .wrapp-step-2 .step.enam {
    left: 29.5%
}

.waste .pengelolaan .tahapan .wrapp-step-2 .step.tujuh {
    left: 57.9%
}

.waste .pengelolaan .tahapan .wrapp-step-2 .step.delapan {
    left: 86%
}

.waste .pengelolaan .tahapan .wrapp-step-2 .step.eight {
    left: 2%
}

.waste .pengelolaan .tahapan .wrapp-step-2 .step.seven {
    left: 29.5%
}

.waste .pengelolaan .tahapan .wrapp-step-2 .step.six {
    left: 57.9%
}

.waste .pengelolaan .tahapan .wrapp-step-2 .step.five {
    left: 86%
}

.waste .pengelolaan .simpulan {
    width: 100%
}

.waste .pengelolaan .simpulan p.title {
    color: var(--Base-Grey, #646363);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal
}

.waste .pengelolaan .simpulan p.desc {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-family: Poppins, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px
}

.waste .pengelolaan .simpulan p.desc span {
    font-style: italic;
    color: #0a9e33
}

.waste .pengelolaan .wrapp-card {
    display: grid;
    gap: 15px;
    justify-content: center;
    grid-template-columns: repeat(3, 1fr)
}

.waste .service {
    display: flex;
    flex-direction: column;
    width: 100%
}

.waste .definisi {
    display: flex;
    flex-direction: column
}

.waste .definisi .wrapp-image-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px
}

.waste .definisi .wrapp-image-content img {
    width: 100%;
    max-width: 100%;
    max-height: 248px;
    object-fit: contain
}

.waste .definisi .wrapp-image-content .wrapp-text {
    width: 100%
}

.waste .definisi .wrapp-image-content .wrapp-text p.title {
    color: var(--Base-Black, #252525);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -.9px;
    text-align: justify
}

.waste .definisi .wrapp-image-content .wrapp-text p.title span {
    color: #0a9e33
}

.waste .definisi .wrapp-image-content .wrapp-text p.desc {
    color: var(--Base-Grey, #646363);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    text-align: justify
}

@media (min-width: 719px) and (max-width: 1200px) {
    .waste .olah.wrapp-himbau {
        display: flex;
        flex-direction: column !important
    }

    .waste .olah.wrapp-himbau .wrap-text {
        margin: 0 !important;
        min-width: 56dvh;
        width: 56dvh
    }

    .waste .olah.wrapp-himbau.snap-section {
        min-height: 0 !important
    }

    .waste .olah.wrapp-himbau .wrapp-img {
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 80px !important
    }

    .waste .olah.wrapp-himbau .wrapp-img .title {
        text-align: center !important;
        min-width: 350px !important;
        width: 350px !important;
        display: flex;
        flex-direction: column;
        margin-bottom: 0 !important
    }

    .waste .olah.wrapp-himbau .wrapp-img .title span {
        margin: 0
    }

    .waste .olah.wrapp-himbau .wrapp-img img {
        width: 204.9px !important;
        height: 203.658px !important
    }

    .waste .olah.fase .grub .title {
        font-size: 18px
    }

    .waste .olah.fase .grub .nav .pemerintah {
        font-size: 12px;
        width: 170px !important;
        min-width: 170px !important
    }

    .waste .olah.fase .grub .nav .pdmj {
        font-size: 12px;
        width: 150px !important;
        min-width: 150px !important
    }

    .waste .olah.fase .title {
        display: flex;
        flex-direction: row;
        gap: 3px
    }

    .waste .olah.fase.snap-section {
        min-height: 0 !important
    }

    .waste .olah.simpulan {
        margin-top: 40px
    }

    .waste .olah.simpulan .desc {
        margin-top: 30px
    }

    .waste .olah.simpulan .title {
        font-size: 16.5px !important;
        margin-bottom: 50px
    }

    .waste .olah.simpulan.snap-section {
        min-height: 0 !important
    }

    .waste .olah.simpulan .wrapp-card {
        display: grid;
        gap: 15px;
        justify-content: center;
        grid-template-columns: repeat(3, 1fr)
    }

    .waste .olah.simpulan .wrapp-card .card-fase .wrapp-img .angka {
        padding: 15px 20px;
        width: 18px !important;
        height: 12.615px !important;
        scale: .7;
        border-radius: 0 0 15.385px 15.385px
    }

    .waste .pengelolaan {
        padding: 53.333px 80px
    }

    .waste .pengelolaan .tahapan .garis-hijau {
        position: relative;
        padding: 10px 0 10px 27px
    }

    .waste .pengelolaan .tahapan .wrapp-step {
        height: 70px;
        width: 100%
    }

    .waste .pengelolaan .tahapan .wrapp-step-2 {
        height: 70px;
        padding-left: 0 !important;
        display: flex;
        width: 100%;
        gap: 0
    }

    .waste .pengelolaan .wrapp-himbau {
        gap: 30px
    }

    .waste .pengelolaan .wrapp-himbau .wrapp-img-text {
        flex-direction: row
    }

    .waste .pengelolaan .wrapp-himbau .wrap-text {
        margin-top: 0;
        text-align: left;
        min-width: 280px
    }

    .waste .pengelolaan p.title {
        color: var(--Base-Black, #252525);
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -.9px
    }

    .waste .pengelolaan p.title span {
        color: #0a9e33
    }

    .waste .pengelolaan p.desc {
        color: var(--Base-Grey, #646363);
        font-size: 14px;
        text-align: justify;
        font-style: normal;
        font-weight: 400;
        line-height: 22px
    }

    .waste .pengelolaan p.desc span {
        font-style: italic;
        color: #0a9e33;
        font-weight: 600
    }

    .waste .pengelolaan .tahapan {
        margin-bottom: 10px;
        margin-top: 10px
    }

    .waste .pengelolaan .tahapan .wrapp-step {
        top: -20px;
        padding-left: 0;
        padding-right: 0
    }

    .waste .pengelolaan .tahapan .wrapp-step-2 {
        bottom: -20px;
        padding-left: 12px;
        padding-right: 0
    }

    .waste .definisi {
        padding: 53.333px 80px
    }

    .waste .definisi.snap-section {
        min-height: 0 !important
    }

    .waste .definisi .wrapp-image-content {
        width: 100%;
        flex-direction: row
    }

    .waste .definisi .wrapp-image-content img {
        width: 100%;
        height: 100%
    }

    .waste .definisi .wrapp-image-content .wrapp-text p.title {
        text-align: justify
    }

    .waste .bahaya-limbah-b3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
        padding: 0 80px 60px
    }

    .waste .bahaya-limbah-b3 .card-bahaya-atas,
    .waste .bahaya-limbah-b3 .card-bahaya-bawah {
        display: contents
    }

    .waste .bahaya-limbah-b3 .card-bahaya {
        padding: 15px 15px 20px;
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, .1);
        box-sizing: border-box
    }

    .waste .bahaya-limbah-b3 .card-bahaya img {
        width: 48px;
        height: 48px;
        margin-bottom: 15px;
        flex-shrink: 0
    }

    .waste .bahaya-limbah-b3 .card-bahaya .title {
        margin-bottom: 10px;
        color: #252525;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.3
    }

    .waste .bahaya-limbah-b3 .card-bahaya .desc {
        font-size: 13px;
        font-weight: 400;
        margin-bottom: 0;
        color: #646363;
        line-height: 1.4
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .waste .olah.wrapp-himbau {
        display: flex
    }

    .waste .olah.wrapp-himbau .wrap-text {
        margin: 0 !important;
        min-width: 62dvh !important
    }

    .waste .olah.wrapp-himbau.snap-section {
        min-height: 0 !important
    }

    .waste .olah.wrapp-himbau .wrapp-img {
        max-width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 150px !important
    }

    .waste .olah.wrapp-himbau .wrapp-img .title {
        text-align: center !important;
        min-width: 250px !important;
        width: 250px !important;
        display: flex;
        flex-direction: column;
        margin-bottom: 0 !important
    }

    .waste .olah.wrapp-himbau .wrapp-img .title span {
        margin: 0
    }

    .waste .olah.wrapp-himbau .wrapp-img img {
        width: 204.9px !important;
        height: 203.658px !important
    }

    .waste .olah.simpulan {
        margin-top: 50px
    }

    .waste .olah.simpulan .title {
        font-size: 22px !important;
        margin-bottom: 50px
    }
}

@media (min-width: 1200px) {
    .waste .pengelolaan {
        gap: 60px;
        padding: 0
    }

    .waste .pengelolaan .wrapp-himbau {
        padding: 40px 150px 0;
        display: flex;
        flex-direction: row
    }

    .waste .pengelolaan .wrapp-himbau .wrapp-img {
        gap: 60px !important;
        flex-direction: row
    }

    .waste .pengelolaan .wrapp-himbau .wrapp-img img {
        max-width: 500px;
        width: 100%
    }

    .waste .pengelolaan .wrapp-himbau .wrap-text {
        text-align: left
    }

    .waste .pengelolaan p.title {
        font-size: 24px
    }

    .waste .pengelolaan p.desc {
        line-height: 34px
    }

    .waste .pengelolaan .tahapan {
        margin-top: 0;
        margin-bottom: 0
    }

    .waste .pengelolaan .tahapan .wrapp-step {
        top: 0
    }

    .waste .pengelolaan .tahapan .wrapp-step .step .number {
        width: 45px;
        height: 45px;
        font-size: 12px
    }

    .waste .pengelolaan .tahapan .wrapp-step .step .ket {
        font-size: 14px
    }

    .waste .pengelolaan .tahapan .wrapp-step .step img {
        width: 45px;
        height: 45px
    }

    .waste .pengelolaan .tahapan .wrapp-step-2 {
        bottom: 0
    }

    .waste .pengelolaan .tahapan .wrapp-step-2 .step {
        display: flex;
        align-items: center
    }

    .waste .pengelolaan .tahapan .wrapp-step-2 .step .number {
        width: 45px;
        height: 45px;
        font-size: 12px
    }

    .waste .pengelolaan .fase {
        background: #f7fff9;
        padding: 25px 150px;
        display: flex;
        flex-direction: column;
        gap: 20px
    }

    .waste .pengelolaan .fase .tab-pane {
        padding: 10px 20px
    }

    .waste .pengelolaan .simpulan {
        padding: 8px 150px 0
    }

    .waste .pengelolaan .simpulan p.title {
        font-size: 16px;
        line-height: 37px
    }

    .waste .pengelolaan .simpulan p.desc {
        text-align: center;
        line-height: 30px
    }

    .waste .pengelolaan .wrapp-card {
        padding: 0 170px 20px;
        gap: 10px;
        grid-template-columns: repeat(3, 1fr)
    }

    .waste .pengelolaan .wrapp-card .card-fase .wrapp-img {
        height: 160px
    }

    .waste .pengelolaan .wrapp-card .card-fase .wrapp-img img {
        height: 100%;
        border-radius: 10px
    }

    .waste .pengelolaan .wrapp-card .card-fase .wrapp-img img.logo-icon {
        width: 35px;
        height: 35px;
        transition: all .3s ease
    }

    .waste .pengelolaan .wrapp-card .card-fase .wrapp-img img.logo-icon:hover {
        transform: scale(1.5);
        transition: all .3s ease
    }

    .waste .pengelolaan .wrapp-card .card-fase .angka {
        margin: 10px;
        width: 28px;
        height: 15px;
        font-size: 13px;
        border-top-left-radius: 0;
        padding: 10px
    }

    .waste .pengelolaan .wrapp-card .card-fase .text {
        padding: 10px
    }

    .waste .definisi {
        padding: 0;
        flex-direction: column;
        justify-content: space-between;
        min-height: calc(50vh - 50px);
        align-items: center;
        justify-content: center
    }

    .waste .definisi .wrapp-image-content {
        justify-content: space-between;
        flex-direction: row;
        width: unset;
        padding: 0 150px
    }

    .waste .definisi .wrapp-image-content img {
        max-width: 466px;
        max-height: 425px
    }

    .waste .definisi .wrapp-image-content.bg {
        background: #f6fff8
    }

    .waste .definisi .wrapp-image-content .wrapp-text p.title {
        font-size: 24px;
        text-align: right
    }

    .waste .definisi .wrapp-image-content .wrapp-text p.desc {
        line-height: 25px;
        text-align: right;
        margin-bottom: 0
    }

    .waste .bahaya-limbah-b3 {
        display: grid;
        flex-direction: column;
        grid-template-columns: repeat(4, 1fr);
        min-height: 45vh;
        gap: 15px;
        padding: 0 150px 50px
    }

    .waste .bahaya-limbah-b3 .card-bahaya-atas,
    .waste .bahaya-limbah-b3 .card-bahaya-bawah {
        display: flex;
        gap: 15px
    }

    .waste .bahaya-limbah-b3 .card-bahaya-atas {
        margin-top: -10px
    }

    .waste .bahaya-limbah-b3 .card-bahaya {
        padding: 10px;
        display: flex;
        flex-direction: column;
        width: 100%;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, .1)
    }

    .waste .bahaya-limbah-b3 .card-bahaya img {
        width: 38px;
        margin-bottom: 10px
    }

    .waste .bahaya-limbah-b3 .card-bahaya .title {
        margin-bottom: 0;
        color: #252525;
        font-size: 12px;
        font-weight: 700
    }

    .waste .bahaya-limbah-b3 .card-bahaya .desc {
        font-size: 12px;
        font-weight: 300;
        margin-bottom: 0
    }
}

@media (max-width: 719px) {
    .waste .waste .pengelolaan .wrapp-himbau .wrapp-img {
        display: flex;
        flex-direction: column
    }

    .waste .pengelolaan .simpulan p.title {
        padding: 0 40px
    }

    .waste .definisi {
        background-color: #f6fff9
    }

    .waste .definisi .wrapp-image-content {
        margin-top: 0 !important
    }

    .waste .definisi .wrapp-image-content img {
        padding: 0 21px
    }

    .waste .definisi.snap-section {
        min-height: 0 !important
    }

    .waste .definisi .wrapp-image-content {
        margin-top: 60px
    }

    .waste .definisi .wrapp-image-content .wrapp-text {
        padding: 0 30px
    }

    .waste .definisi .wrapp-image-content .wrapp-text .title {
        font-size: 18px !important
    }

    .waste .definisi .wrapp-image-content img {
        order: 2
    }

    .waste .bahaya-limbah-b3 {
        display: grid;
        margin: 40px 0;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 30px
    }

    .waste .bahaya-limbah-b3 .card-bahaya {
        margin: 0;
        height: 197px;
        padding: 9.891px;
        border-radius: 9.891px;
        border: .989px solid rgba(0, 0, 0, .1)
    }

    .waste .bahaya-limbah-b3 .card-bahaya .title {
        font-size: 13px;
        font-style: normal;
        font-weight: 600;
        line-height: normal
    }

    .waste .bahaya-limbah-b3 .card-bahaya .desc {
        font-size: 11px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        color: var(--Base-Grey, #646363);
        line-height: 15px
    }

    .waste .bahaya-limbah-b3 .card-bahaya-atas .card-bahaya {
        margin: 12px 0;
        height: 197px;
        padding: 9.891px;
        border-radius: 9.891px;
        border: .989px solid rgba(0, 0, 0, .1)
    }

    .waste .bahaya-limbah-b3 .card-bahaya-atas .card-bahaya .title {
        font-size: 13px;
        font-style: normal;
        font-weight: 600;
        line-height: normal
    }

    .waste .bahaya-limbah-b3 .card-bahaya-atas .card-bahaya .desc {
        font-size: 11px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        color: var(--Base-Grey, #646363);
        line-height: 15px
    }

    .waste .bahaya-limbah-b3 .card-bahaya-bawah .card-bahaya {
        margin: 12px 0;
        height: 197px;
        padding: 9.891px;
        border-radius: 9.891px;
        border: .989px solid rgba(0, 0, 0, .1)
    }

    .waste .bahaya-limbah-b3 .card-bahaya-bawah .card-bahaya .title {
        font-size: 13px;
        font-style: normal;
        font-weight: 600;
        line-height: normal
    }

    .waste .bahaya-limbah-b3 .card-bahaya-bawah .card-bahaya .desc {
        font-size: 11px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        color: var(--Base-Grey, #646363);
        line-height: 15px
    }

    .waste .olah.simpulan.snap-section {
        min-height: 0 !important
    }

    .waste .olah.simpulan .wrapp-card {
        padding: 0 30px;
        display: flex;
        flex-direction: column
    }

    .waste .olah.simpulan .wrapp-card .card-fase .wrapp-img .angka {
        left: -3%;
        top: -3%;
        scale: .5
    }

    .waste .olah.simpulan .desc {
        padding: 0 30px 40px
    }

    .waste .olah.fase {
        background: #f6fff9;
        padding: 40px 0
    }

    .waste .olah.fase.snap-section {
        min-height: 0 !important
    }

    .waste .olah.fase .gap-3 {
        gap: 0 !important
    }

    .waste .olah.fase .d-flex {
        position: relative;
        display: flex;
        flex-direction: column
    }

    .waste .olah.fase .d-flex .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: left
    }

    .waste .olah.fase .d-flex .title span {
        margin-left: 4px
    }

    .waste .olah.fase .d-flex .nav {
        padding: 0 30px 40px
    }

    .waste .olah.fase .d-flex .nav .nav-link {
        font-size: 10px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: -.48px;
        color: green
    }

    .waste .olah.fase .d-flex .nav .nav-link.f-14.active {
        color: #fff !important
    }

    .waste .olah.fase .tab-pane .desc,
    .waste .olah.fase .tab-pane .tahapan {
        padding: 0 30px
    }

    .waste .olah.fase .tab-pane .tahapan .garis-hijau {
        padding: 10px 0 10px 15px
    }

    .waste .olah.fase .tab-pane .tahapan .wrapp-step {
        height: 45px
    }

    .waste .olah.fase .tab-pane .tahapan .wrapp-step .step.tiga img,
    .waste .olah.fase .tab-pane .tahapan .wrapp-step .step.empat img,
    .waste .olah.fase .tab-pane .tahapan .wrapp-step .step.three img,
    .waste .olah.fase .tab-pane .tahapan .wrapp-step .step.four img {
        width: 30px;
        height: auto;
        object-fit: contain;
        display: block;
        margin: 0 auto
    }

    .waste .olah.fase .tab-pane .tahapan .wrapp-step-2 {
        display: flex;
        width: 100%;
        gap: 0
    }

    .waste .olah.fase .tab-pane .tahapan .wrapp-step-2 .step {
        display: flex;
        align-items: center
    }

    .waste .olah.wrapp-himbau {
        display: flex;
        flex-direction: column !important
    }

    .waste .olah.wrapp-himbau.snap-section {
        min-height: 0 !important
    }

    .waste .olah.wrapp-himbau .wrapp-img {
        display: flex;
        flex-direction: column;
        height: 220px
    }

    .waste .olah.wrapp-himbau .wrapp-img img {
        order: 2;
        scale: .8
    }

    .waste .olah.wrapp-himbau .wrapp-img .title {
        width: unset !important;
        min-width: unset !important;
        margin-top: 40px !important;
        margin-bottom: -30px !important;
        margin: 0;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap;
        font-size: 20px !important
    }

    .waste .olah.wrapp-himbau .wrap-text {
        padding: 0 30px !important;
        margin-top: 120px !important
    }
}

@media (min-width: 485px) and (max-width: 719px) {
    .waste .olah.fase .d-flex {
        align-items: center;
        justify-content: center
    }

    .waste .olah.fase .d-flex>.nav {
        display: inline-flex;
        justify-content: center !important;
        align-items: center;
        gap: 16px;
        padding-left: 0;
        padding-right: 0;
        width: max-content;
        margin-left: auto;
        margin-right: auto;
        align-self: center !important;
        text-align: center
    }

    .waste .olah.fase .grub .nav {
        display: inline-flex;
        justify-content: center !important;
        align-items: center;
        gap: 16px;
        width: max-content;
        margin-left: auto;
        margin-right: auto;
        text-align: center
    }

    .waste .olah.fase .nav-link {
        white-space: nowrap
    }
}

@media (max-width: 375px) {
    .waste .wrapp-step .step {
        position: absolute;
        display: flex !important;
        align-items: center
    }

    .waste .wrapp-step .step .tool-tip {
        top: -65px;
        left: -80px;
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        opacity: 0;
        transition: opacity .3s ease;
        box-shadow: 1px 5px 13px -1px #b8b8b8bf
    }

    .waste .wrapp-step .step .tool-tip .triangle {
        width: 10px;
        height: 10px;
        bottom: -4px;
        right: 40px;
        position: absolute;
        background-color: #fff;
        transform: rotate(45deg)
    }
}

.detail-artikel .artikel .wrapper {
    display: flex;
    flex-direction: row;
    padding: 50px 50px 50px 150px;
    gap: 0
}

.detail-artikel .artikel .wrapper .left {
    width: 55%;
    padding-right: 50px;
    border-right: 1px solid #e8e8e8
}

.detail-artikel .artikel .wrapper .left .title {
    font-size: 20px;
    font-weight: 600;
    color: #0a9e33
}

.detail-artikel .artikel .wrapper .left .content {
    font-size: 14px;
    line-height: 30px;
    color: #646363
}

.detail-artikel .artikel .wrapper .left .content h3 {
    font-size: 20px
}

.detail-artikel .artikel .wrapper .left .content h2 {
    font-size: 24px
}

.detail-artikel .artikel .wrapper .left .detail-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    margin-bottom: 30px;
    border-radius: 10px
}

.detail-artikel .artikel .wrapper .left .wrapp-info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 32.5px;
    padding: 0
}

.detail-artikel .artikel .wrapper .left .wrapp-info img {
    width: 35px
}

.detail-artikel .artikel .wrapper .left .wrapp-info p {
    font-size: 16px;
    margin-bottom: 0
}

.detail-artikel .artikel .wrapper .left .wrapp-info p.desc {
    color: #523a48
}

.detail-artikel .artikel .wrapper .left .wrapp-info p.text1,
.detail-artikel .artikel .wrapper .left .wrapp-info p.text2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #8d8d8d
}

.detail-artikel .artikel .wrapper .right {
    width: 45%;
    padding: 0 30px 20px
}

.detail-artikel .artikel .wrapper .right h4 {
    color: var(--Base-Black, #252525);
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: -.44px;
    text-transform: capitalize
}

.detail-artikel .artikel .wrapper .right .item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px
}

.detail-artikel .artikel .wrapper .right .item img {
    border-radius: 3.68px
}

.detail-artikel .artikel .wrapper .right .item:not(:last-child) {
    margin-top: 0;
    margin-bottom: 0
}

.detail-artikel .artikel .wrapper .right .item p {
    color: var(--Base-Grey, #646363);
    text-overflow: ellipsis;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -.28px;
    text-transform: capitalize;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}

.detail-artikel .artikel .wrapper .right .item span {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -.24px;
    text-transform: capitalize;
    color: var(--Base-Grey, #646363)
}

@media (max-width: 1200px) {
    .detail-artikel .artikel .wrapper {
        padding: 53.33px 26.667px 53.33px 30px;
        display: flex;
        flex-direction: row;
        flex: 1
    }

    .detail-artikel .artikel .wrapper .left .wrapp-info img {
        height: 26px !important;
        width: auto
    }

    .detail-artikel .artikel .wrapper .left img {
        height: 222px !important
    }

    .detail-artikel .artikel .wrapper .right .item {
        display: flex;
        flex-direction: row;
        gap: 10px
    }

    .detail-artikel .artikel .wrapper .right .item p {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }

    .detail-artikel .wrapp-info {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        margin-bottom: 32.5px;
        padding: 0
    }

    .detail-artikel .wrapp-info img {
        width: 35px
    }

    .detail-artikel .wrapp-info p {
        font-size: 16px;
        margin-bottom: 0
    }

    .detail-artikel .wrapp-info p.desc {
        color: #523a48
    }

    .detail-artikel .wrapp-info p.text1,
    .detail-artikel .wrapp-info p.text2 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: #8d8d8d
    }
}

@media (max-width: 719px) {
    .detail-artikel .artikel .wrapper {
        display: flex;
        flex-direction: column !important;
        margin: 0 20px;
        padding: 20px 0;
        gap: 30px
    }

    .detail-artikel .artikel .wrapper .left {
        max-width: 100%;
        padding-right: 0 !important;
        border-right: none !important
    }

    .detail-artikel .artikel .wrapper .left .title {
        font-size: 24px;
        font-weight: 600;
        color: #0a9e33;
        margin-bottom: 20px
    }

    .detail-artikel .artikel .wrapper .left .wrapp-info {
        display: flex;
        flex-direction: row !important;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px
    }

    .detail-artikel .artikel .wrapper .left .wrapp-info img {
        height: 40px !important;
        width: 40px !important;
        border-radius: 50%
    }

    .detail-artikel .artikel .wrapper .left .wrapp-info p {
        font-size: 14px;
        margin-bottom: 0
    }

    .detail-artikel .artikel .wrapper .left .wrapp-info p.desc {
        color: #523a48;
        font-weight: 600
    }

    .detail-artikel .artikel .wrapper .left .wrapp-info p.text2 {
        color: #8d8d8d;
        font-size: 12px
    }

    .detail-artikel .artikel .wrapper .left .detail-img {
        height: auto !important;
        width: 100% !important;
        border-radius: 8px;
        margin-bottom: 25px
    }

    .detail-artikel .artikel .wrapper .left .content {
        font-size: 12px !important;
        line-height: 26px !important;
        color: #646363;
        text-align: justify
    }

    .detail-artikel .artikel .wrapper .left .content h3 {
        font-size: 18px
    }

    .detail-artikel .artikel .wrapper .left .content h2 {
        font-size: 20px
    }

    .detail-artikel .artikel .wrapper .right {
        width: 100% !important;
        padding: 0 !important;
        margin-top: 20px
    }

    .detail-artikel .artikel .wrapper .right h4 {
        font-size: 20px;
        font-weight: 700;
        color: #333;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #0a9e33
    }

    .detail-artikel .artikel .wrapper .right .item {
        display: flex !important;
        gap: 15px !important;
        align-items: flex-start !important;
        padding: 15px 0 !important;
        text-decoration: none
    }

    .detail-artikel .artikel .wrapper .right .item:not(:last-child) {
        border-bottom: 1px solid #f1f3f5;
        margin-bottom: 0;
        margin-top: 0
    }

    .detail-artikel .artikel .wrapper .right .item img {
        width: 80px !important;
        height: 60px !important;
        object-fit: cover;
        border-radius: 6px;
        flex-shrink: 0
    }

    .detail-artikel .artikel .wrapper .right .item p {
        font-size: 14px !important;
        line-height: 20px !important;
        color: #333;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 5px
    }

    .detail-artikel .artikel .wrapper .right .item p span {
        font-size: 11px !important;
        color: #8d8d8d;
        font-weight: 400
    }
}

.tentang-kami .contac-us {
    background: var(--Base-White, #fff);
    padding: 40px 30px
}

@media (max-width: 719px) {
    .tentang-kami .contac-us {
        padding: 40px 30px 0
    }
}

.tentang-kami .contac-us-wrapper {
    display: flex;
    align-items: center;
    gap: 100px;
    flex-direction: row;
    justify-content: space-between
}

.tentang-kami .contac-us-wrapper .left {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 578.03px
}

.tentang-kami .contac-us-wrapper .left p {
    margin-bottom: 0
}

.tentang-kami .contac-us-wrapper .left p.title {
    color: var(--Base-Black, #252525);
    width: 100%;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px !important
}

.tentang-kami .contac-us-wrapper .left p.desc {
    color: var(--Base-Grey, #646363);
    text-align: justify;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px
}

.tentang-kami .contac-us-wrapper .left p.sosmed {
    align-items: center;
    display: flex;
    color: var(--Base-Black, #252525);
    gap: 10px;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: -.48px
}

.tentang-kami .contac-us-wrapper .left .wrapp-sosmed {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.tentang-kami .contac-us-wrapper .right {
    width: 100%;
    height: 100%
}

.tentang-kami .contac-us-wrapper .right iframe {
    width: 100%;
    height: 100%;
    min-height: 218px;
    border-radius: 10px
}

.tentang-kami .form {
    padding: 0 30px;
    padding-top: 20px !important;
    background: var(--Base-Green, #0a9e33);
    margin-bottom: 0
}

.tentang-kami .form-wrapper {
    display: flex;
    flex-direction: column-reverse !important
}

.tentang-kami .form-wrapper .left {
    display: flex;
    padding: 20px !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px !important;
    width: 100%;
    border-radius: 10px;
    border: 0px solid #e7e9ed;
    background: #fff;
    box-shadow: 0 20px 20px -23px #161c2d21
}

.tentang-kami .form-wrapper .left .form-label {
    margin-bottom: 2px;
    font-size: 14px
}

.tentang-kami .form-wrapper .left .form-control {
    height: 40px;
    font-size: 12px
}

.tentang-kami .form-wrapper .left textarea {
    height: 70px !important
}

.tentang-kami .form-wrapper .left .button-custom {
    padding: 10px 0;
    font-size: 14px
}

.tentang-kami .form-wrapper .right {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0px !important;
    align-items: center;
    justify-content: center;
    padding: 0
}

.tentang-kami .form-wrapper .right p.title {
    color: var(--Base-White, #fff);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    width: 100%;
    margin-bottom: 5px
}

.tentang-kami .form-wrapper .right p.title.f-32 {
    font-size: 22px
}

.tentang-kami .form-wrapper .right p.desc {
    color: var(--Base-White, #fff);
    text-align: justify;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px;
    max-width: 900px !important;
    text-align: center
}

@media (min-width: 719px) and (max-width: 1200px) {
    .tentang-kami .contact.contac-us {
        padding: 0 0 0 80px !important;
        margin-bottom: -5px
    }

    .tentang-kami .contact.contac-us.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .contact.contac-us .contac-us-wrapper .right iframe {
        width: 100%;
        min-height: 400px !important;
        height: 400px
    }

    .tentang-kami .contact.form.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .contact.form .form-wrapper {
        margin-top: 40px
    }

    .tentang-kami .contac-us,
    .tentang-kami .form {
        padding: 53.333px 80px
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .tentang-kami .contac-us {
        padding: 0 0 0 80px !important;
        margin-bottom: -5px
    }

    .tentang-kami .contac-us .contac-us-wrapper .right iframe {
        width: 100%;
        min-height: 500px !important;
        height: 500px !important
    }

    .tentang-kami .form-wrapper {
        flex-direction: row;
        gap: 30px
    }
}

@media (min-width: 1200px) {
    .tentang-kami .contac-us {
        padding: 0 0 0 150px
    }

    .tentang-kami .contac-us-wrapper .left {
        gap: 40px
    }

    .tentang-kami .contac-us-wrapper .left p.title {
        font-size: 24px;
        line-height: 25px
    }

    .tentang-kami .contac-us-wrapper .left p.desc {
        line-height: 25px
    }

    .tentang-kami .contac-us-wrapper .left p.sosmed {
        line-height: 26px
    }

    .tentang-kami .contac-us-wrapper .left .wrapp-sosmed {
        gap: 20px
    }

    .tentang-kami .contac-us-wrapper .right iframe {
        min-height: calc(100vh - 100px);
        border-radius: 0
    }

    .tentang-kami .form {
        padding: 0 150px 35px
    }

    .tentang-kami .form-wrapper {
        gap: 15px
    }

    .tentang-kami .form-wrapper .left {
        padding: 40px 20px;
        gap: 25px
    }
}

@media (max-width: 719px) {
    .tentang-kami .contact .contact.contact-us.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .contact .contac-us-wrapper {
        display: flex;
        flex-direction: column !important
    }

    .tentang-kami .contact .contac-us-wrapper .left .title {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -.48px;
        width: 250px
    }

    .tentang-kami .contact .contac-us-wrapper .right iframe {
        width: 100dvw;
        margin-left: -30px;
        height: 70dvw
    }

    .tentang-kami .contact.contac-us.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .contact.contac-us .contac-us-wrapper .left .wrapp-sosmed .sosmed.maps {
        display: flex;
        align-items: flex-start
    }

    .tentang-kami .contact.form.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .contact.form form {
        margin: 40px 0
    }

    .tentang-kami .contact.form form .form-wrapper .right .desc {
        text-align: justify;
        font-size: 15.94px
    }
}

.tentang-kami .privacy-policy {
    padding: 80px 150px
}

.tentang-kami .privacy-policy-wrapper {
    display: flex;
    padding: 80px 150px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 25px;
    align-self: stretch
}

.tentang-kami .privacy-policy-wrapper .word-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    align-self: stretch
}

.tentang-kami .privacy-policy-wrapper .word-wrapper p.title {
    color: var(--Base-White, #000);
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-align: left;
    width: 100%
}

.tentang-kami .privacy-policy-wrapper .word-wrapper p.desc {
    color: var(--Base-White, #000);
    text-align: justify;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px
}

@media (min-width: 0) {
    .tentang-kami .privacy-policy {
        padding: 80px 150px
    }

    .tentang-kami .privacy-policy-wrapper {
        padding: 30px
    }
}

@media (min-width: 719px) and (max-width: 1200px) {
    .tentang-kami .privacy-policy {
        padding: 40px 80px
    }

    .tentang-kami .privacy-policy .privacy-policy-wrapper {
        padding: 0
    }
}

@media (max-width: 719px) {
    .tentang-kami .privacy .contact.contact-us.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .privacy .contac-us-wrapper {
        display: flex;
        flex-direction: column !important
    }

    .tentang-kami .privacy .contac-us-wrapper .left .title {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -.48px;
        width: 250px
    }

    .tentang-kami .privacy .contac-us-wrapper .right iframe {
        width: 100dvw;
        margin-left: -30px;
        height: 70dvw
    }

    .tentang-kami .privacy-policy {
        padding: 0
    }

    .tentang-kami .privacy-policy .privacy-policy-wrapper {
        margin: 40px 0;
        padding: 0 30px
    }

    .tentang-kami .privacy-policy .privacy-policy-wrapper .word-wrapper {
        width: 85dvw
    }

    .tentang-kami .privacy-policy .privacy-policy-wrapper .word-wrapper .title {
        margin-bottom: -10px
    }

    .tentang-kami .sk .contact.contact-us.snap-section {
        min-height: 0 !important
    }

    .tentang-kami .sk .contac-us-wrapper {
        display: flex;
        flex-direction: column !important
    }

    .tentang-kami .sk .contac-us-wrapper .left .title {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: -.48px;
        width: 250px
    }

    .tentang-kami .sk .contac-us-wrapper .right iframe {
        width: 100dvw;
        margin-left: -30px;
        height: 70dvw
    }
}