:root{
    --bs-body-font-family : "Montserrat", sans-serif;
    --bs-body-font-size : 16px;
    --bs-body-line-height : 28px;
    --bs-body-bg : #FFFFFF; 
    --bs-section-bg : #FFFCEA; 
    --bs-font-color: #4E504F;
    --bs-darkmode-black: #1A1919;
    --bs-darkmode-grey: #303130;

    --white: #ffffff;
	--black: #000000;
    --font-black: #332600;
    --black-grey : #513629;
	--dark-blue: #1f2029;
	--dark-light: #353746;
	--red: #da2c4d;
	--yellow: #f8ab37;
	--grey: #ecedf3;
    --diy-orange : #FFC728;
    --diy-darkyellow : #FFCD40;
    --diy-coffee : #513629;

    color-scheme: light;

}

*{backface-visibility: hidden;}}
html,body{height: 100%; width: 100%; font-family: "Noto Sans", sans-serif; font-optical-sizing: auto; color:var(--font-black); font-weight: 300; line-height:30px;background-color: var(--bs-body-bg); }
body{transition: background-color 0.5s; color: var(--font-black);}
body.darkmode{background-color: var(--bs-darkmode-grey); color: var(--white);}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{color: var(--font-black);}
.darkmode .h1, .darkmode .h2, .darkmode .h3, .darkmode .h4, .h5, .h6, .darkmode h1, .darkmode h2, .darkmode h3, .darkmode h4, .darkmode h5, .darkmode h6{color: var(--white);}
.form-check-input:checked{background-color: var(--diy-orange); border-color: var(--diy-orange);}
.breadcrumb li a{color: var(--diy-coffee);}

.pushpad-top{padding-top: 160px;}
.section{display: flex;}
.mw-800{max-width: 800px;}
.mw-1000{max-width: 996px;}
.mw-1100{max-width: 1100px;}
.bg-yellow{background-color: var(--bs-section-bg); transition: all 0.5s;}
.bg-orange{background-color: var(--diy-orange);}
.slick-prev::before, .slick-next::before{font-family: bootstrap-icons !important; color: var(--font-black); font-size: 30px;}
.slick-prev::before{content: "\F12A";}
.slick-next::before{content: "\F134";}
.font-black{color: var(--font-black) !important;}
.darkmode .slick-prev::before, .darkmode .slick-next::before{color: var(--white);}

.navbar{background-color: var(--bs-section-bg);}

.darkmode .bg-yellow{background-color: var(--bs-darkmode-black); color: var(--white);}

.link a{transition: all 0.5s; }
.link a:after{content:""; transition: all 0.5s; font-size: 1rem; opacity: 0;}
.link:hover a:after{content: "\F134"; font-family: bootstrap-icons !important; line-height: 16px; vertical-align: sub; padding-left: 8px; opacity: 1;}

.light-switch .checkbox + label{transition: all 0.5s;}
.light-switch .checkbox:checked ~ .background-color{background-color: var(--white);}
.light-switch [type="checkbox"]:checked,.light-switch [type="checkbox"]:not(:checked),.light-switch [type="radio"]:checked,.light-switch [type="radio"]:not(:checked){position: absolute; left: -9999px; width: 0; height: 0; visibility: hidden; }
.light-switch .checkbox:checked + label,.checkbox:not(:checked) + label{ position: relative; width: 55px; display: inline-block; padding: 0; margin: 0 auto; text-align: center; margin: 17px 0; margin-top: 12px; height: 25px; border-radius: 25px; background-image: linear-gradient(298deg, var(--red), var(--yellow)); z-index: 100 !important; }
.light-switch .checkbox:checked + label:before,.checkbox:not(:checked) + label:before { position: absolute; font-family:  bootstrap-icons !important;; cursor: pointer; top: 0px; z-index: 2; font-size: 20px; line-height: 26px; text-align: center; width: 25px; height: 25px; border-radius: 50%; -webkit-transition: all 300ms linear; transition: all 300ms linear; font-size: 12px;}
.light-switch .checkbox:not(:checked) + label:before { content: '\F1D1'; left: 0; color: var(--white); background-color: var(--dark-light); box-shadow: 0 4px 4px rgba(0,0,0,0.15), 0 0 0 1px rgba(26,53,71,0.07); }
.light-switch  .checkbox:checked + label:before { content: '\F495'; left: 30px; color: var(--white); background-color: var(--black); box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07); }
.light-switch  .checkbox:checked ~ .section .container .row .col-12 p{ color: var(--dark-blue); }
.light-switch  .checkbox:not(:checked) + label{background: #CCC;}
.light-switch  .checkbox:checked + label{background: #666;}
.light-switch  .checkbox:checked ~ .section .container .row .col-12 .checkbox-tools:not(:checked) + label{background-color: var(--light); color: var(--dark-blue); box-shadow: 0 1x 4px 0 rgba(0, 0, 0, 0.05); }
.light-switch  .checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:not(:checked) + label,
.light-switch .checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:checked + label{background-color: var(--light);color: var(--dark-blue);}
.light-switch .checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:checked + label::after,
.light-switch .checkbox:checked ~ .section .container .row .col-12 .checkbox-booking:not(:checked) + label::after{background-color: var(--light);}

.navbar{transition: background-color 0.5s;}
.navbar .navbar-brand img{height: 50px; margin-top: -20px;}
.navbar.navbar-first{padding-bottom: 0px; padding-top: 0px; }
.navbar.navbar-first > .container {align-items: flex-start; justify-content: flex-end;}
.navbar.navbar-second.fixed-top{top:50px; padding-top: 0px;}
.navbar .nav-item a{font-size: 15.5px; font-weight: 600;}
.navbar .light-switch{padding-left: 0px; padding-right: 15px;}
.navbar .lang-switch {display: flex; padding: 10px; background-color: var(--diy-orange); border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;}
.navbar .lang-switch i{padding-right: 1px;}
.navbar .lang-switch .switcher{list-style: none;  display: inline; margin: 0px; padding-left: 0px;}
.navbar .lang-switch .switcher li{ display: inline; padding: 0px 8px; position: relative;}
.navbar .lang-switch .switcher li a{color: var(--bs-font-color); text-decoration: none;}
.navbar .lang-switch .switcher li:first-child:after{content:""; border: 1px solid #000; position: absolute; top:0px; right: -2px; height: 20px; width: 1px;}
.navbar .lang-switch .switcher li.active a{color: var(--white); font-weight: 800;}
.navbar .navbar-brand img:nth-child(1){display: block;}
.navbar .navbar-brand img:nth-child(2){display: none;}
.navbar .dropdown-menu{background-color: var(--bs-section-bg); border:0px}
.navbar .dropdown-menu .dropdown-item{position: relative;}
.navbar .dropdown-menu a:after{content:""; border-bottom: 0.5px solid rgba(81, 54, 41, 0.3); width: 100%; position: relative; bottom: -5px; left: 50%; transform: translateX(-50%); height: 1px; display: block;}
.navbar .dropdown-menu li:last-child a:after{border:0px}
.navbar .dropdown-item:hover{background-color: var(--diy-darkyellow);}

.darkmode .navbar{background-color: var(--bs-darkmode-black);}
.darkmode .navbar .nav-item a{color: var(--white);}
.darkmode .navbar .nav-item a.nav-link img{filter: brightness(3);}
.darkmode .navbar .navbar-brand img:nth-child(1){display: none;}
.darkmode .navbar .navbar-brand img:nth-child(2){display: block;}
.darkmode .navbar .dropdown-menu{background-color: var(--bs-darkmode-black);}
.darkmode .navbar .dropdown-menu .dropdown-item{color: var(--white);}
.darkmode .navbar .dropdown-menu a:after{border-bottom: 0.5px solid rgba(255, 255, 255, 0.3); }
.darkmode .navbar .dropdown-menu .dropdown-item:hover{background-color: var(--black-grey);}

.struktur-perusahaan img:nth-child(1){display: block;}
.struktur-perusahaan img:nth-child(2){display: none;}
.darkmode .struktur-perusahaan img:nth-child(1){display: none;}
.darkmode .struktur-perusahaan img:nth-child(2){display: block;}

.struktur-organisasi img:nth-child(1){display: block;}
.struktur-organisasi img:nth-child(2){display: none;}
.darkmode .struktur-organisasi img:nth-child(1){display: none;}
.darkmode .struktur-organisasi img:nth-child(2){display: block;}

.banner{margin-top: 160px; display: block; padding-bottom: 60px; position: relative;}
.banner.noimage{margin-top: 0px; padding-bottom: 30px;}
.banner.noimage h1{color: var(--font-black);}
.banner.noimage.withIntro h1{font-size: 1rem; font-weight: 500;}
.banner.noimage.withIntro .font-big{font-size: 26px; line-height: 45px;}
.banner h1{font-size: 4rem; font-weight: 800; color: var(--white); padding-bottom: 30px;}
.banner video{max-width: 100%;border-radius: 50px; overflow: hidden;}
.banner img{border-radius: 50px; overflow: hidden;}
.banner .wrapper{position: relative;}
.banner .wrapper .overlay{position: absolute; top:0px; left: 0px; width: 100%; height: 100%; padding: 40px 60px; display: flex; align-items: flex-end; font-size: 3rem; max-width: 80%; line-height: 4rem; color: #FFFFFF;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
.banner .wrapper .img-banner-small{height: 200px; object-fit: cover; width: 100%; padding-bottom: 0px;}
.banner .wrapper .img-banner-small ~ .overlay{background-color: rgba(0,0,0,0.5); width: 100%; max-width: 100%; border-radius:50px}
.banner .wrapper .img-banner-small ~ .overlay h1{padding-bottom: 0px;}

.intro{}
.intro .section-title{color: var(--diy-coffee); font-weight: 600;}
.intro h1{font-weight: 900; font-size: 3.5rem; margin-bottom: 30px;}
.intro h2{font-size: 2rem; font-weight: bold;}
.darkmode .intro h1{color: var(--diy-darkyellow);}
.darkmode .intro .section-title{color: var(--diy-darkyellow);}

.featured{padding-top: 60px; padding-bottom: 60px;}
.featured .featured-wrapper{position: relative;}
.featured .featured-item{min-height: 593px; background-size: cover; border-radius: 50px;} 
.featured .slider-caption{position: absolute; top:50%; left:10%; max-width: 600px; transform: translateY(-50%);}
.featured .slider-caption .caption-wrapper .caption-item{opacity: 0.6; color: var(--white); display: flex; padding: 15px 0px; border-bottom: 1px solid var(--white);}
.featured .slider-caption .caption-wrapper .caption-item.active{opacity: 1; background-color: rgba(0,0,0,0.5); padding-left: 15px;}
.featured .slider-caption .caption-wrapper .caption-item:last-child{border-bottom: 0px;}
.featured .slider-caption .caption-wrapper .caption-item .number{padding-right: 15px; font-size: 4rem;  line-height: 4rem; width: 0px; opacity: 0; transition: all 0.5s;}
.featured .slider-caption .caption-wrapper .caption-item.active .number{display: block;width: 94px; opacity: 1;}
.featured .slider-caption .caption-wrapper .caption-item .text .title{font-size: 1.7rem; font-weight: 600; line-height: 2rem; padding-bottom: 5px;}
.featured .slider-caption .caption-wrapper .caption-item .text .description{font-size: 1.2rem; line-height: 2rem;}
.featured .slick-dots{bottom:15px; z-index: 999; }
.featured .slick-dots li button::before{font-size: 20px;color: var(--white);}

.history{ margin-bottom: 80px; overflow-x: hidden;}
.history h2{font-weight: 800; padding-bottom: 30px;}
.history .milestone-wrapper{position: relative; display: block; min-height: 400px; }
.history .milestone-wrapper .milestone-item{display: flex; min-height: 367px; width: 70% !important; background-color: var(--diy-orange); border:1px solid var(--white); border-radius: 50px; overflow: hidden; position: absolute; top:0px; transition: all 1s;}
.history .milestone-wrapper .milestone-item.active{}
.history .milestone-wrapper .milestone-item[data-pos="1"]{left:0%; z-index: 9; opacity: 1; background-color: #FFC216 ;}
.history .milestone-wrapper .milestone-item[data-pos="2"]{left:6%; z-index: 8; opacity: 1; background-color: #FFC726;}
.history .milestone-wrapper .milestone-item[data-pos="3"]{left:12%; z-index: 7; opacity: 1; background-color: #FFCB39;}
.history .milestone-wrapper .milestone-item[data-pos="4"]{left:18%; z-index: 6; opacity: 1; background-color: #FFD253;}
.history .milestone-wrapper .milestone-item[data-pos="5"]{left:24%; z-index: 5; opacity: 1; background-color: #FFD869;}
.history .milestone-wrapper .milestone-item[data-pos="6"]{left:30%; z-index: 4; opacity: 1; background-color: #FFDD7E;}
.history .milestone-wrapper .milestone-item[data-pos="7"]{left:36%; z-index: 3; opacity: 0; width: 0px;}
.history .milestone-wrapper .milestone-item[data-pos="8"]{left:42%; z-index: 2; opacity: 0; width: 0px;}
.history .milestone-wrapper .milestone-item[data-pos="9"]{left:0%; z-index: 1; opacity: 0; width: 0px;}
.history .milestone-wrapper .milestone-item .image{flex: 0 0 50%; background-size: cover; background-position: center;}
.history .milestone-wrapper .milestone-item .description{flex: 0 0 50%; padding: 25px 20px;}
.history .milestone-wrapper .milestone-item .description .title, .history .milestone-wrapper .milestone-item .description .text{opacity: 0; transition: all 0.3s; padding-left: 10px; padding-right: 40px; font-size: 0.9rem;}
.history .milestone-wrapper .milestone-item[data-pos="1"] .description .title, .history .milestone-wrapper .milestone-item[data-pos="1"] .description .text{opacity: 1;}
.history .milestone-wrapper .milestone-item .description .year{display: flex; justify-content: flex-end;}
.history .milestone-wrapper .milestone-item .description .year .wrapper{max-width: 2ch; font-size: 2rem; word-wrap: break-word ; line-height: 2.2rem; color: var(--white); text-align: right;}
.history .milestone-wrapper .milestone-item .description .title{font-weight: 700; margin-bottom: 15px; margin-top: 5px;}
.history .milestone-wrapper .milestone-item .description .text{}
.history .milestone-arrow{position: relative; text-align: center;}
.history .milestone-arrow ul{list-style: none; margin: 0px; padding: 0px;}
.history .milestone-arrow ul li{display: inline; font-size: 2rem; padding: 0px 15px;}
.history .milestone-arrow ul li:hover{cursor: pointer;}
.darkmode .history .description .title, .darkmode .history .description .text{color: var(--font-black);}

.trivia{ padding-bottom: 40px;}
.trivia .column{display: flex; gap: 10px; flex-direction: column; justify-content: space-between;}
.trivia .item{position: relative; border-radius: 50px; overflow: hidden;}
.trivia .item.big{height: 100%; width: 100%;}
.trivia .item.small{height: auto; width: 100%; }
.trivia .item img{object-fit: cover; width: 100%; height: 100%;}
.trivia .item .overlay{position: absolute; top:0px; left: 0px; width: 100%; height: 100%; display: flex; align-items: center; padding-left: 10%;}
.trivia .item.big .overlay{align-items: flex-end; padding-bottom: 11%;}
.trivia .item .overlay.dark{}
.trivia .item .overlay.darker{}
.trivia .item .overlay .numbers{color: var(--white); font-weight: 900; font-size: 7rem; line-height: 7rem;}
.trivia .item .overlay .caption{color: var(--white); font-size: 2rem; font-weight: 600;}

.products{padding-top: 40px;}
.products .title{display: flex; padding-bottom: 40px; padding-left: 50px;}
.products .title .number{font-size: 8rem; line-height: 8rem; font-weight: 800; padding-right: 15px;}
.products .title h2{font-weight: bold; display: flex; align-items: center; padding: 0px; margin: 0px; }
.products .wrapper{--n : 5; display: grid;grid-template-columns: repeat(auto-fill, minmax(max(200px,(100% - (var(--n) - 1)*10px)/var(--n)), 1fr)); gap: 10px;}
.products .wrapper .column{display: flex; flex-direction: column;justify-content: flex-end; margin-bottom: 30px; align-items: center; }
.products .wrapper .column img{align-self: center; transition: all 0.5s;}
.products .wrapper .column img:hover{transform: scale(1.2);}
.products .wrapper .column .caption{text-align: center; padding-top: 10px; font-weight: 500;}
.products .column img:nth-child(1){display: block;}
.products .column img:nth-child(2){display: none;}
.darkmode .products .column img:nth-child(1){display: none;}
.darkmode .products .column img:nth-child(2){display: block;}
.products .products-archive{}
.products .products-archive .item{margin-bottom: 30px;}
.products .products-archive .item .wrapper{display: block;  background-color: var(--white); border-radius: 20px; overflow: hidden; height: 100%;}
.products .products-archive .item .wrapper .image{height: 250px;}
.products .products-archive .item .wrapper .image img{height: 100%; width: 100%; object-fit: cover; object-position: center top;}
.products .products-archive .item .wrapper .text{display: flex; padding: 15px; color: var(--font-black);}
.products .products-archive .item .wrapper .text .icon{padding: 10px 15px 15px 10px; }
.products .products-archive .item .wrapper .text .icon img:nth-child(2){display: none;}
.products .products-archive .item .wrapper .text .desc h3{font-weight: 700; margin-bottom: 3px;}
.products .products-archive .item .wrapper .text .desc p{margin-bottom: 0px; font-size: 0.9rem; line-height: 1.4rem;}
.darkmode .products .products-archive .item .wrapper .desc h3{color: var(--font-black);}

.listings .item{padding: 30px 0px; border-bottom: 1px solid rgba(0, 0, 0, 0.5); justify-content: center;}
.listings .item:last-child{border-bottom: 0px;}
.listings .item .icon{text-align: center; display: flex; justify-content: center; align-items: center;}
.listings .item .title{display: flex; align-items: center;}
.listings .item .text{display: flex; align-items: center; flex-direction: column; align-items: flex-start; justify-content: center;}
.listings .item .text a{text-decoration: none; color: var(--font-black);}
.listings .item .text a:hover{text-decoration: underline;}
.listings .item .text p{margin-bottom: 0px;}
.listings .item .arrow{position: relative;}
.listings .item .arrow:after{font-family: bootstrap-icons !important; content: "\F138"; position: absolute; right:7px; top:50%; transform:  translateY(-50%); font-size:20px; color: var(--diy-darkyellow);}
.darkmode .listings .item{border-color: var(--diy-darkyellow);}
.darkmode .listings .item .text a{color: var(--white);}

.responsibility{padding-top: 80px; padding-bottom: 80px;}
.responsibility .images{ border-radius: 50px; overflow: hidden; position: relative; padding: 0px;}
.responsibility .images img{width: 100%;}
.responsibility .overlay{position: absolute; top: 0px; left:0px; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; color: var(--white);}
.responsibility .overlay h2{font-weight: 800;text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5); color: var(--white);}
.responsibility .description{display: flex; align-items: center; padding: 30px; font-weight: 500;}

.home-partners{padding: 100px 0px 60px; text-align: center; margin-bottom: 20px; display: none;}
.home-partners h2{background-color: var(--bs-section-bg); padding: 15px 60px; display: inline-block; border-radius: 20px; position: absolute; margin-top:-130px; left:50%; transform: translateX(-50%);}
.home-partner .item img{border-radius: 20px; overflow: hidden;}

.home-news{padding-top: 40px;}
.home-news .title h2{font-weight: bold;}
.home-news .title p{font-size: 1.1rem;}
.home-news .link{text-align: center; margin-top: 40px;}
.home-news .link a{background-color: var(--diy-orange);padding: 10px 30px;border-radius: 25px;text-decoration: none;color: var(--font-black);font-weight: 600;}
.news .archive{}
.news .archive .item a{color: var(--font-black); text-decoration: none;}
.news .archive .item a .image{border-radius: 50px; overflow: hidden;}
.news .archive .item a .image img{width: 100%; height: 270px; object-fit: cover; transition: all 0.5s;} 
.news .archive .item:hover a .image img{transform: scale(1.1);}
.news .archive .item a .meta{padding-top: 15px; display: flex; justify-content: space-between;}
.news .archive .item a .meta .date{font-size: 14px; font-weight: 600; }
.news .archive .item a .meta .category{color: var(--diy-orange); font-size: 14px; text-decoration: underline;}
.news .archive .item a .title{padding-top: 12px; height: 96px; font-weight: 500;}
.news .archive .item a .link{padding: 0px 0px; font-size: 13px; font-weight: 600; display: inline-block; transition: all 0.5s; border-radius: 20px;}
.news .archive .item:hover a .link{background-color: var(--diy-darkyellow);padding: 0px 15px;}
.darkmode .news .archive .item a{color: var(--white);}

.home-career{margin-top:60px;height: 500px; background-image: url(../images/bg-home-career-a.jpg); background-size: cover;}
.home-career h2{font-weight: 900; color: var(--white); font-size: 3.3rem; margin-top:42%}
.home-career .left-side{position: relative; }
.home-career .right-side{position: relative;}
.home-career .right-side > div{max-width: 75%; margin-top: 42%;}
.home-career .right-side p{font-size: 1.25rem; font-weight: 700; color: var(--white);}
.home-career .right-side .link{margin-top: 25px;}
.home-career .right-side .link a{background-color: var(--diy-orange); padding: 10px 30px; border-radius: 25px; text-decoration: none; color: var(--font-black); font-weight: 600;}

.awards .awards-wrapper .slick-list{padding: 10px 0px;}
.awards .awards-wrapper .item{background-color: var(--white); text-align: center; margin: 0px 20px; border-radius: 20px;box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); padding: 20px 0px;}
.awards .awards-wrapper .item:hover{cursor: grab;}
.awards .awards-wrapper .item .image{display: flex; justify-content: center;}
.awards .awards-wrapper .item .image img{height: 207px; width: auto;}
.awards .awards-wrapper .item .title{font-size: 0.8rem; font-weight: bold; line-height: 1.1rem; padding: 10px 15px 0px 15px;}
.awards .awards-wrapper .item .year{font-size: 0.8rem; line-height: 1.2rem; padding-top: 5px;}
.awards .slick-track{display: flex !important;}
.awards .slick-slide{height: inherit !important;}
.darkmode .awards .awards-wrapper .item{color: var(--font-black);}

.story-feature .item{width: 100%; aspect-ratio: 1; border-radius: 50px; background-size: cover; background-position: center center; position: relative;}
.story-feature .item .overlay{position: absolute; top:0px; left: 0px; height: 100%; width: 100%; border-radius: 50px;display: flex; align-items: flex-end; padding: 40px; color: var(--white);}
.story-feature > div:nth-child(1) .overlay{background: linear-gradient(180deg, rgba(255, 199, 40, 0.07) 0%, rgba(62, 62, 61, 0.7) 70%);background-blend-mode: multiply, normal;}
.story-feature .item .overlay .numbers{font-size: 2.8rem; font-weight: 700; padding-bottom: 10px;}
.story-feature .item .overlay .caption{font-size: 1.5rem;}

.vision{}
.vision .item{margin-left: 30px; margin-right: 30px;}
.vision .item:nth-child(2) .row{flex-direction: row-reverse;}
.vision .item:nth-child(2) .text{margin-right: -100px; margin-left:auto}
.vision img{border-radius: 50px;}
.vision .text{background-color: var(--diy-darkyellow); padding: 0px 30px; height: 80%; margin-left: -100px; border-radius: 50px; display: flex; align-items: center; color: var(--font-black);}
.vision .text h2{font-weight: 600;}
.vision .text p{font-size: 1.75rem; padding-top: 20px; padding-bottom: 20px; line-height: 2.5rem; }
.vision .text .link{display: flex; justify-content: flex-end;}
.vision .text .link a{padding: 10px 30px; width: 250px; text-decoration: none; background-color: var(--white); border-radius: 10px; justify-content: space-between; display: flex; color: var(--font-black); font-weight: 500;}
.vision .text .link a:after{display: none;}
.darkmode .vision .text h2{color: var(--font-black);}

.timeline{}
/* .timeline .wrapper{position: relative; margin-top: 40px; margin-bottom: 40px; overflow-y: scroll; height: 1000px;} */
.timeline .wrapper{position: relative; margin-top: 40px; margin-bottom: 40px; }
.timeline .wrapper:after{content:""; position: absolute; width: 5px; border-right: 5px solid; border-image: linear-gradient(180deg, #FFC82C 0%, rgba(237, 28, 36, 0.7) 100%) 1; height: 100%; left:50%; transform: translateX(-50%); top:0%; bottom:0%; overflow: visible;}
/* .timeline .wrapper .border{position: absolute; width: 5px; background-image: linear-gradient(180deg, #FFC82C 0%, rgba(237, 28, 36, 0.7) 100%) ; height: 3300px; left:50%; transform: translateX(-50%); top:0%; } */
.timeline .wrapper .item{display: flex; flex-wrap: wrap; position: relative; margin-bottom: 100px ; z-index: 9;}
.timeline .wrapper .item:nth-child(odd){flex-direction: row;}
.timeline .wrapper .item:nth-child(even){flex-direction: row-reverse;}
.timeline .wrapper .item::after{content:""; position: absolute; right: calc(50% - 12px); top:50%; transform: translateY(-50%); width: 25px; height: 25px; background-color: var(--diy-orange); z-index: 9; border-radius: 20px;}
.timeline .wrapper .item .left-side{flex: 0 0 auto; width: 50%; display: flex; justify-content: center; position: relative;}
.timeline .wrapper .item .image{display: flex; flex-direction: column; justify-content: center; text-align: center; font-size: 1.2rem; font-weight: 500;}
.timeline .wrapper .item .image img{align-self: center; height: 250px; padding-bottom: 10px; border-radius: 20px; overflow: hidden;}
.timeline .wrapper .item .right-side{flex: 0 0 auto; width: 50%; display: flex; justify-content: center;}
.timeline .wrapper .item .description{background: #FFFCEA;box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.25);border-radius: 10px; padding: 25px; max-width: 65%; display: flex; flex-direction: column; justify-content: center; color: var(--font-black);}

.media{margin-bottom: 50px;}
.media .feature{padding-bottom: 80px;}
.media .feature .content{display: flex; align-items: center; }
.media .feature .content .category{font-size: 1.1rem; padding-bottom: 20px;}
.media .feature .content .title{font-size: 1.5rem; font-weight: 700; line-height: 2.5rem; padding-right: 40px;}
.media .feature .image img{border-radius: 50px; overflow: hidden; }
.media h1{padding-top: 30px; padding-bottom: 30px; font-size: 2rem; font-weight: bold;}
.media .filter-checkbox .subtitle{font-weight: 600; padding-bottom: 10px;}
.media .filter-checkbox .form-check{margin-bottom: 10px;}
.media .archive a{text-decoration: none;}
.media .archive .item{margin-bottom: 40px;}
.media .archive .item .image{aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; }
.media .archive .item .image img{width: 100%; object-fit: cover; height: 100%; object-position: center center; transition: all 0.5s;}
.media .archive .item:hover .image img{transform: scale(1.1);}
.media .archive .item .content .meta{display: flex; font-size: 0.8rem; display: flex; justify-content: space-between; margin: 10px 0px 5px; color: var(--font-black);}
.darkmode .media .archive .item .content .meta{display: flex; font-size: 0.8rem; display: flex; justify-content: space-between; margin: 10px 0px 5px; color: white;}
.media .archive .item .content .meta .category{font-weight: 700;}
.media .archive .item .content .meta .date:before{content:"\F214"; font-family: bootstrap-icons !important ;padding-right: 5px; vertical-align: bottom;}
.media .archive .item .content .title{font-weight: 600; color: var(--font-black); text-decoration: none; font-size: 1rem; line-height: 1.7rem;}
.darkmode .media .archive .item .content .title{font-weight: 600; color: white; text-decoration: none; font-size: 1rem; line-height: 1.7rem;}
.latest-news.media{padding-left: 25px; padding-right: 25px; border-radius: 20px; margin-top: 60px;}
.latest-news.media > .title{text-align: center; font-size: 1.5rem; font-weight: 700; padding-top: 15px; padding-bottom: 15px;}
.latest-news.media .archive .meta{border: 0px; font-size: 12px; margin-bottom: 0px;}
.latest-news.media .archive .item .content .meta{margin-bottom: 0px;}
.latest-news.media .archive .item{margin-bottom: 20px;}
.latest-news.media .archive .item .content{padding-bottom: 0px;}
.latest-news.media .archive .item .content .meta{padding-bottom: 5px;}
.latest-news.media .archive .item .content .title{font-size: 0.9rem;}

.article h1{font-size: 2.2rem; font-weight: 700; line-height: 3rem; margin-bottom: 30px;}
.article .meta{display: flex; font-size: 1rem; display: flex; justify-content: space-between; margin: 25px 0px 20px; color: var(--font-black); border-bottom: 1px solid var(--font-black);  padding-bottom: 15px; }
.article .meta .category{font-weight: 700;}
.article .meta .date:before{content:"\F214"; font-family: bootstrap-icons !important ;padding-right: 5px; vertical-align: bottom;}
.article .main-image{margin-bottom: 40px;}
.article .main-image img{border-radius: 50px;}
.article .title{font-weight: 600; color: var(--font-black); text-decoration: none; font-size: 0.9rem; line-height: 1.7rem; margin-bottom: 20px;}
.article .content img{border-radius: 50px; margin-bottom: 15px;}

.share-bar{margin-top: 40px; margin-bottom: 100px; padding-top: 30px; border-top: 1px solid var(--font-black);}
.share-bar ul{list-style: none; padding-left: 0px;}
.share-bar ul li{display: inline-block;}
.share-bar ul li a{text-decoration: none; padding: 5px 12px; border-radius: 5px;}
.share-bar ul li a svg{vertical-align: sub; margin-right: 3	px;}
.share-bar ul li:first-child{font-size: 14px; font-weight: bold; margin-right: 15px;}
.share-bar ul li:nth-child(n+1){font-weight: light; font-size: 14px;}
.share-bar ul li:nth-child(n+1) a{color: #FFF;}
.share-bar ul li:nth-child(2) a{background-color: rgb(74, 105, 173);}
.share-bar ul li:nth-child(3) a{background-color: rgb(78, 161, 235);}
.share-bar ul li:nth-child(4) a{background-color: rgb(106, 206, 114);}

.structure .nav-item .nav-link{font-weight: 700; color: var(--diy-orange); font-size: 1.75rem; padding: 0px; padding-right: 40px; background-color: transparent; position: relative;}
.structure .nav-item .nav-link:after{position: absolute; right: 0px; top: 50%; transform: translateY(-50%); content:""; height: 50px; width: 2px; border-right: 2px solid var(--black);}
.structure .nav-item:last-child .nav-link:after{border: 0px;}
.structure .nav-item .nav-link.active{background-color: transparent; color: var(--font-black);}
.darkmode .structure .nav-item .nav-link.active{background-color: transparent; color: white;}
.structure .nav-item .nav-link img{transition: all 0.5s; vertical-align: bottom; height: 25px;}
.structure .nav-item .nav-link.active img{transform: rotate(90deg); filter: brightness(0) saturate(100%);}
.structure .tab-content{padding-top:80px; padding-bottom: 100px;}
.structure .tab-content .director-wrapper{display: flex; flex-direction: row;}
.structure .tab-content .director-wrapper .item{flex: 0 0 auto; width: 20%; display: flex; justify-content: center; text-align: center; padding: 20px;}
.structure .tab-content .director-wrapper .item div[type="button"]:hover{cursor: default;}
.structure .tab-content .director-wrapper .item .image img{border-radius: 50%; overflow: hidden; border:1px solid}
.structure .tab-content .director-wrapper .item .name{padding-top: 15px; font-weight: 600; line-height: 1rem;}
.structure .tab-content .director-wrapper .item .title{font-size: 0.8rem;}
.structure .tab-content .director-wrapper .item .excerpt{display: none;}

#modalDirectors{overflow: hidden;}
#modalDirectors .modal-dialog{height: 100%; display: flex; align-items: center; margin-top: -40px;}
#modalDirectors .modal-content{border:0px; border-radius: 20px; overflow: hidden;}
#modalDirectors .modal-header{background-color: var(--diy-orange);}
#modalDirectors .photo{padding: 0px;}
#modalDirectors .details{display: flex; align-items: center;}
#modalDirectors .details .name{font-size: 1.1rem; font-weight: 700;}
#modalDirectors .details .title{font-size: 0.9rem;}
#modalDirectors .text{padding-top: 10px; padding-bottom: 20px; padding-left: 25px;}

.darkmode .modal-content{border:1px solid var(--diy-darkyellow) !important}
.darkmode .modal-body{background-color: var(--bs-darkmode-black); }

.document .doc-wrapper{padding-left: 30px; padding-right: 30px; margin-bottom: 100px;}
/* .document .doc-wrapper .item{border:1px solid var(--font-black); padding: 15px ; font-size: 1.25rem; font-weight: 600; border-radius: 20px; transition: all 0.3s; margin-bottom: 15px;} */
.document .doc-wrapper .item{border:1px solid ; padding: 15px ; font-size: 1.25rem; font-weight: 600; border-radius: 20px; transition: all 0.3s; margin-bottom: 15px;}
.document .doc-wrapper .item:hover{background-color: var(--diy-darkyellow);}
.document .doc-wrapper .item i{font-size: 1.4rem; vertical-align: top;}
.document .doc-wrapper .item .filetype{text-align: center;}
.document .doc-wrapper .item .action{text-align: center;font-size: 1rem;}
.document .doc-wrapper .item .action a{color: var(--font-black); text-decoration: none; }
.darkmode .document .doc-wrapper .item .action a{color: white; text-decoration: none; }
.document .doc-wrapper .item .action a:hover{text-decoration: underline;}

.information h2{font-weight: 700;}
.information ol li{padding-bottom: 10px;}
.information ol li::marker{font-weight: 600; border: 1px solid;}
.information .custom-table{margin-top: 15px;}
.information .custom-table .item{margin-bottom: 10px;border: 1px solid;}
.information .custom-table .item .cell{padding: 15px; font-weight: 500;}
.information .custom-table .item .cell.head{font-weight: 700; background-color: var(--diy-darkyellow);}
.darkmode .banner.noimage h1{color: var(--white);}
.darkmode .information .custom-table .item .cell.head{color: var(--font-black);}

.whistleblow{display: flex; flex-wrap: wrap; justify-content: center;}
.whistleblow .item{ flex: 0 0 auto; width: 100%; padding-left: 25px; padding-right: 25px; margin-bottom: 30px   ;}
.whistleblow .item .number{font-size: 1rem;}
.whistleblow .item .title{font-weight: 700; text-align: left; margin-bottom: 10px; font-size: 1.2rem;}
.whistleblow .item .title i{padding-right: 10px;}
.whistleblow .item .description{text-align: left;  font-size: 1rem; padding-left: 33px;}

.reports h2{font-weight: bold;}
.reports.headline-report{background-image: url("../images/bg-infosaham.jpg") ; color: var(--white-web); padding-top: 80px; padding-bottom: 80px; background-size: cover;}
.reports.headline-report h1{font-size: 2rem; text-transform: uppercase;}
.reports.headline-report p{font-size: 1.15rem; margin-bottom: 40px; margin-top: 30px;}
.reports.headline-report .details{display: flex; align-items: center; padding-left: 3rem;}
.reports.headline-report .details .year{font-size: 3rem; font-weight: 300;}
.reports.headline-report .details .title{font-size: 3rem; font-weight: 600; line-height: 3rem; padding-top: 20px; padding-bottom: 15px;}
.reports.headline-report .details .excerpt{margin-bottom: 50px;}

.reports.archive{padding-top: 40px;}
.reports .filter{padding-bottom: 50px;}
.reports.archive .list{}
.reports.archive .list .wrapper{margin-bottom: 25px;}
.reports.archive .list .wrapper .item{display: flex; margin-bottom: 30px;}
.bg-dark .reports.archive .list .wrapper .item{}
.reports.archive .list .item .image{padding:0px; max-width: 166px; flex: 0 0 40%;}
.reports.archive .list .item .details{padding-left: 25px; display: flex; flex-direction: column; justify-content: space-around; width: 55%;}
.reports.archive .list .item .details .year{ font-size: 1.5rem; font-weight: 700;}
.reports.archive .list .item .details .title{font-weight: 700; line-height: 1.5rem; font-size: 0.9em;}
.reports.archive .list .item .details .excerpt{font-size: 0.8rem;}
.reports.archive .list .item .pdf-cta.vertical{display: flex; flex-direction: column; }
.reports.archive .list .item .pdf-cta.vertical{}
.reports.archive .list .item .pdf-cta.vertical img{fill: black; padding-right: 5px;}
.reports.archive .list .item .pdf-cta.vertical a{color: var(--black-text); border:0px; padding-left: 0px; border-bottom: 1px solid #000; padding: 3px; font-size: 0.9rem; text-decoration: none;}
.bg-dark .reports.archive .list .item .pdf-cta.vertical a{color: #FFF; border-color: #FFF;}
.bg-dark .reports.archive .list .item .pdf-cta.vertical a img{filter: invert();}
.reports.archive .list .item .pdf-cta.vertical a:last-child{border:0px}

.reports .archive-pdf .item{display: flex; margin-top: 30px; margin-bottom: 30px;}
.reports .archive-pdf .item img{width: 18%; }
.reports .archive-pdf .item .details{display: flex; flex: 1 0 auto; flex-direction: column; padding-left: 20px;} 
.reports .archive-pdf .item h3{font-size: 1.25rem; font-weight: 600; margin-bottom: 0px;}
.reports .archive-pdf .item .meta{display: flex; font-size: 0.9rem;}
.reports .archive-pdf .item .meta .year{padding-right: 5px;}
.reports .archive-pdf .item .meta .month{padding-left: 5px;}
.reports .archive-pdf .item .cta{padding-top: 10px; font-size: 0.9rem;}
.reports .archive-pdf .item .cta a:before{content: url(../images/ico-downloadpdf.svg); padding-right: 7px; vertical-align: sub;}
.reports .archive-pdf .item .cta a{color: var(--white); text-decoration: none; background-color: var(--font-black); padding: 5px 20px; border-radius: 5px; font-size: 0.8rem;}
.reports .archive-pdf .item .cta a:hover{text-decoration: underline;}
.reports .archive-pdf.big{}

.report-category{}
.report-category .category-list .nav-link{text-align: left; color: var(--bs-font-color); font-weight: 500; margin-bottom: 15px; border-radius: 30px; padding-left: 30px; padding-right: 30px;display: flex; justify-content: flex-start; padding-left: 25px !important;} 
.report-category .category-list .nav-pills .nav-link.active{background-color: rgba(255, 199, 40,0.4); }
.report-category .tab-content{padding-left: 30px; border-left: 2px solid var(--diy-darkyellow); width: 100%;}
.report-category .tab-content .item a{display: flex; margin-bottom: 40px; text-decoration: none; color: var(--black-text); padding: 8px 5px; border-radius: 8px;}
.report-category .tab-content .item a:hover{background-color: rgba(255, 199, 40,0.2);}
.report-category .tab-content .item img{max-width: 40px;}
.report-category .tab-content .item .details{margin-left: 15px; display: flex; align-items: center;}
.report-category .tab-content .item .details h3{font-size: 0.9rem; font-weight: 600; margin-bottom: 0px;}
.report-category .tab-content .item .details .meta{font-size: 0.8rem; display: flex;}
.report-category .tab-content .item .details .meta .year{padding-right: 5px;}
.report-category .tab-content .item .details .meta .month{padding-left: 5px;}

.stock-composition .stock-wrapper{height: 500px;}
.stock-holder-list .item{border-bottom: 1px solid #000; padding-bottom: 15px; margin-bottom: 15px; display: flex; justify-content: space-between; padding-left: 20px; padding-right: 20px;}
.stock-holder-list .item .number{font-weight: bold;}

.information{}
.information .info-wrapper{padding-bottom: 100px;}
.information .info-wrapper a{text-decoration: none; color: var(--black-text); }
.information .info-wrapper a:hover .item{background-color: var(--bs-section-bg); }
.information .info-wrapper .item{padding: 15px 0px 15px 10px; border-bottom: 1px solid var(--diy-coffee);}
.information .info-wrapper .row a:last-child .item{border-bottom: 0px;}
.information .info-wrapper .item .name{font-weight: 700; font-size: 1.1rem; padding-left: 0px; display: flex; align-items: center;}
.information .info-wrapper .item .action{text-align: right; font-size: 0.8rem; font-weight: 600; display: flex; align-items: center; justify-content: flex-end; }
.information .info-wrapper .item .action p{margin-bottom: 0px; padding: 5px 15px; background-color: var(--diy-orange); border-radius: 20px; display: flex; align-items: center; transition: all 0.5s;}
.information .info-wrapper .item .action p:after{content:""; transition: all 0.5s; content: "\F135"; font-family: "Bootstrap-icons"; width: 0px; opacity: 0;}
.information .info-wrapper .item:hover .action p:after{width: 10px; opacity: 1;}
.information .detail{margin-bottom: 100px;}
.information .detail h1{font-weight: 600; line-height: auto;}
.information .detail .meta{border-bottom: 1px solid var(--diy-coffee); margin-bottom: 30px; padding: 10px 0px;}
.information .detail .files{margin-top: 50px;}
.information .detail .files ul{list-style-type: none; padding-left: 0px; margin-top: 30px;}
.information .detail .files ul li a{text-decoration: none; font-weight: bold; padding: 15px 30px; background-color: var(--diy-darkyellow); color: var(--diy-coffee); border-radius: 30px;}
.information .detail .files ul li a:after{content: " \F1B9"; font-family: "Bootstrap-icons"; vertical-align: middle; width: 0px; opacity: 0; display: inline-block; padding-left: 0px; transition: all 0.5s;}
.information .detail .files ul li a:hover:after{opacity: 1; width: 20px; padding-left: 5px;}

.sustainability .pillars .item{text-align: center; padding-left: 40px; padding-right: 40px;}
.sustainability .pillars .item .image{margin-bottom: 20px; height: 135px;}
.sustainability .pillars .item h3{font-size: 1.3rem; font-weight: bold; border-bottom: 1px solid #000; line-height: 2rem; height: 115px; overflow: hidden; border-bottom: 1px solid #000; margin-bottom: 25px;}
.sustainability .pillars .item ul{list-style: none; padding-left: 0px;}
.sustainability .pillars .item ul li{margin-bottom: 20px; font-size: 0.9rem; line-height: 1.5rem; font-weight: 500;}
.sustainability .archive{padding-top: 0px;}
.sustainability .archive .item a{color: var(--font-black); text-decoration: none;}
.sustainability .archive .item a .image{border-radius: 20px; overflow: hidden;}
.sustainability .archive .item a .image img{width: 100%; height: 220px; object-fit: cover; transition: all 0.5s;} 
.sustainability .archive .item:hover a .image img{transform: scale(1.1);}
.sustainability .archive .item a .meta{padding-top: 15px; display: flex; justify-content: space-between;}
.sustainability .archive .item a .meta .date{font-size: 14px; font-weight: 600; }
.sustainability .archive .item a .meta .category{color: var(--diy-coffee); font-size: 12px; text-decoration: underline; font-weight: 700;}
.sustainability .archive .item a .title{padding-top: 12px; height: 96px; font-weight: 500;}
.sustainability .archive .item a .link{padding: 0px 0px; font-size: 13px; font-weight: 600; display: inline-block; transition: all 0.5s; border-radius: 20px;}
.sustainability .archive .item:hover a .link{background-color: var(--diy-darkyellow);padding: 0px 15px;}

.annual-graph{margin-bottom: 100px;}
.annual-graph .nav-tabs{border-bottom: 3px solid #AAAAAA; margin-top: 50px; padding-left: 30px;}
.annual-graph .nav-tabs .nav-link{font-weight: 600; font-size: 1.3rem; padding: 15px 30px !important; color: #AAAAAA;}
.annual-graph .nav-tabs .nav-link:hover{border-color: transparent;}
.annual-graph .nav-tabs .nav-link.active{margin-bottom: -3px; border: 3px solid var(--diy-darkyellow); border-bottom: 3px solid var(--diy-darkyellow); color: #333333; background-color: var(--diy-darkyellow);}
.annual-graph .tab-content{padding-top: 40px;}
.annual-graph .bargraph{padding: 15px 30px; }
.annual-graph .bargraph .title{border-left: 3px solid var(--diy-orange); padding-left: 15px; margin-bottom: 15px;}
.annual-graph .bargraph h2{font-size: 1.1rem; font-weight: bold; margin-bottom: 0px;}
.annual-graph .bargraph notes{font-size: 0.8rem;}
.annual-graph table{margin-top: 80px;}
.annual-graph table.table tr td{padding: 15px; font-size: 0.9rem;}
.annual-graph table.table .header-row th{background-color: var(--diy-orange); }
.annual-graph table.table .subheader-row td{background-color: #DDD;  font-size: 0.9rem;}

.navbar.navBarFinancial{background-color: #FFFFFF; border-bottom: 3px solid var(--diy-darkyellow); padding-bottom: 0px;}
.navbar.navBarFinancial .nav-link{font-weight: 600;}
.navbar.navBarFinancial .nav-link.active{background-color: var(--diy-darkyellow);}
.annual-graph .tab-content{padding-top: 70px;}

footer{background-color: var(--diy-orange); padding-top: 40px;}
footer .column{margin-top:20px; margin-bottom: 20px;}
footer .column h3{font-size: 1.2rem; font-weight: 600;}
footer .column ul{list-style: none; padding-left: 0px;}
footer .column ul li a{color: var(--font-black); text-decoration: none; font-size: 14px;}
footer .social{display: flex; justify-content: flex-end;}
footer .social ul{list-style: none; padding-left: 0px;}
footer .social ul li{display:inline-block; padding: 15px;}
footer .black-footer{background-color: var(--black-grey); color: var(--white); font-weight: 500; padding: 15px 0px; font-size: 13px; }
footer .black-footer > .container{display: flex; justify-content: space-between;}
footer .black-footer ul{list-style: none; padding-left: 0px; margin-bottom: 0px;}
footer .black-footer ul li{display: inline-block; padding: 0px 15px;}
footer .black-footer ul li a{color: var(--white); text-decoration: none;}
.darkmode footer h3{color: var(--font-black);}



@media (max-width: 540px) {
    .section{overflow-x: hidden;}
    .section > .container{padding-left: 20px; padding-right: 20px;}

    .pushpad-top{padding-top: 120px;}
    .slick-prev{left:-15px}
    .slick-next{right:-5px}

    .navbar .navbar-collapse{border-bottom: 5px solid var(--diy-darkyellow);}
    .navbar .lang-switch{padding: 5px; font-size: 0.8rem; padding-left: 10px;}
    .navbar .lang-switch .switcher li{padding: 0 5px;}
    .navbar .checkbox:checked + label, .checkbox:not(:checked) + label{margin:10px; margin-top: 7px;}
    .navbar .navbar-toggler{border:0px; transition: all 0.5s;}
    .navbar .navbar-toggler:focus{box-shadow: none;}
    .navbar .navbar-toggler.collapsed .navbar-toggler-icon{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-three-dots-vertical' viewBox='0 0 16 16'%3E%3Cpath d='M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'/%3E%3C/svg%3E"); transition: all 0.5s;}
    .navbar .navbar-toggler .navbar-toggler-icon{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-lg' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z'/%3E%3C/svg%3E");}
    .navbar .dropdown-menu.show{border-left: 3px solid var(--diy-darkyellow); border-radius: 0px;}
    .darkmode .navbar .navbar-toggler .navbar-toggler-icon{filter: invert(3);}

    .banner{margin-top: 120px; padding-bottom: 30px;}
    .banner h1{font-size: 2rem; padding-bottom: 0px;}
    .banner img{border-radius: 20px;}
    .banner.noimage h1{margin-bottom: 15px;}
    .banner .wrapper .overlay{font-size: 1.25rem; line-height: 1.8rem; padding: 15px; max-width: 100%; }
    .banner .wrapper .overlay p{margin-bottom: 0px;}

    .intro .section-title{font-size: 0.8rem;}
    .intro h1{font-size: 1.75rem;}

    .featured{padding-top: 30px; padding-bottom: 30px;}
    .featured .featured-item{min-height: 500px; background-position: center center;}
    .featured .slider-caption{left: 0px; margin-left: 20px; margin-right: 20px;}
    .featured .slider-caption .caption-wrapper .caption-item{padding-left: 0px;}
    .featured .slider-caption .caption-wrapper .caption-item .text .title{font-size: 1.25rem;}
    .featured .slider-caption .caption-wrapper .caption-item .text .description{font-size: 1rem; line-height: 1.5rem;}

    .history{margin-bottom: 30px; overflow-x: hidden;}
    .history .milestone-wrapper .milestone-item{flex-direction: column; width: 100% !important; border-radius: 20px; height: auto;}
    .history .milestone-wrapper .milestone-item .image{flex: 1 0 100%; background-size: 100%}
    .history .milestone-wrapper .milestone-item .description{padding: 5px 15px 15px;}
    .history .milestone-wrapper .milestone-item .description .year{justify-content: flex-start;}
    .history .milestone-wrapper .milestone-item .description .year .wrapper{max-width: 100%; font-size: 1rem; text-align: left;}
    .history .milestone-wrapper .milestone-item .description .title, .history .milestone-wrapper .milestone-item .description .text{padding-left: 0px; padding-right: 0px; line-height: 1.5rem;}
    .history .milestone-wrapper .milestone-item[data-pos="1"]{left:0%; z-index: 9; opacity: 1; background-color: #FFC216 ;}
    .history .milestone-wrapper .milestone-item[data-pos="2"]{left:0%; opacity: 0; width: 0px;}
    .history .milestone-wrapper .milestone-item[data-pos="3"]{left:0; opacity: 0; width: 0px;}
    .history .milestone-wrapper .milestone-item[data-pos="4"]{left:0; opacity: 0; width: 0px;}
    .history .milestone-wrapper .milestone-item[data-pos="5"]{left:0; opacity: 0; width: 0px;}
    .history .milestone-wrapper .milestone-item[data-pos="6"]{left:0; opacity: 0; width: 0px;}
    .history .milestone-wrapper .milestone-item[data-pos="7"]{left:0; opacity: 0; width: 0px;}
    .history .milestone-wrapper .milestone-item[data-pos="8"]{left:0; opacity: 0; width: 0px;}
    .history .milestone-wrapper .milestone-item[data-pos="9"]{left:0; opacity: 0; width: 0px;}
    
    .trivia{padding-bottom: 0px;}
    .trivia .item{border-radius: 20px; margin-bottom: 20px;}
    .trivia .column{margin-top: 20px; margin-bottom: 20px;}
    .trivia .item .overlay{padding: 20px !important; align-items: flex-end;}
    .trivia .item .overlay .numbers{font-size: 3rem; line-height: 4rem;}
    .trivia .item .overlay .caption{font-size: 1.5rem;}
    .trivia .row > div:first-child{aspect-ratio: 16 / 8;}

    .products{padding-top: 0px;}
    .products .title{padding-left: 15px;}
    .products .title .number{font-size: 6rem;}
    .products .title h2{font-size: 1.3rem;}
    .products .wrapper{display: flex; flex-wrap: wrap; max-width: 100%; gap: 0px;}
    .products .wrapper .column{flex: 0 0 auto; width: 50%;}
    .products .wrapper .column img{max-width: 100px;}
    .products .wrapper .column .caption{font-size: 0.9rem;}

    .responsibility{padding-top: 20px; padding-bottom: 0px;}
    .responsibility .images{border-radius: 20px;}
    .responsibility .description{padding: 15px;}

    .home-news{padding-top: 20px;}
    .news .archive .item{margin-bottom: 20px;}
    .news .archive .item a{display: flex;}
    .news .archive .item a .image{border-radius: 20px; flex: 0 0 auto; width: 40%; height: 200px;}
    .news .archive .item a .content{padding-left: 10px; display: flex; flex-direction: column; justify-content: space-around;}
    .news .archive .item a .content .meta{flex-direction: column; padding-top: 5px;}
    .news .archive .item a .content .meta .date, .news .archive .item a .content .meta .category{font-size: 12px; line-height: 18px;}
    .news .archive .item a .content .title{font-size: 0.85rem; line-height: 1.35rem; height: auto;}

    .home-career{margin-top: 40px; height: auto; padding: 15px 0px 30px; background-position: left center;}
    .home-career h2{margin-top: 0px; font-size: 2rem; }
    .home-career .right-side > div{max-width: 100%; margin-top: 0px;}
    .home-career .right-side p{font-size: 1rem; font-weight: 500;}
    
    .story-feature .item{aspect-ratio: 5/3;border-radius: 20px; margin-bottom: 20px;}
    .story-feature .item .overlay .numbers{font-size: 2rem;}
    .story-feature .item .overlay .caption{font-size: 1.25rem;}

    .vision img{border-radius: 0px; border-top-left-radius: 20px; border-top-right-radius: 20px;}
    .vision .text{margin-left: 0px; height: 100%; border-radius: 0px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; padding: 25px;}
    .vision .text p{font-size: 1.25rem; line-height: 2rem; padding-top: 0px; padding-bottom: 0px;}
    .vision .text .link a{width: 100%;}
    .vision .item:nth-child(2) .text{margin-right: 0px;}
    .vision .slick-prev{left:-15px}
    .vision .slick-next{right:-5px}

    .timeline .wrapper::after{left:3%}
    .timeline .wrapper .item{margin-bottom: 50px;}
    .timeline .wrapper .item::after {right: auto; left: -2px; top:12px}
    .timeline .wrapper .item .right-side, .timeline .wrapper .item .left-side{width: 100%; }
    .timeline .wrapper .item .image{max-width: 100%; margin-left: 40px; display: flex; flex-direction: column-reverse; justify-content: flex-start; align-items: flex-start; width: 100%; font-weight: 700;}
    .timeline .wrapper .item .image img{border-radius: 10px; width: 100%; padding-bottom: 0px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; padding-top: 10px;}
    .timeline .wrapper .item .description{max-width: 100%; margin-left: 40px; margin-top: -10px; padding: 25px 15px 0px; line-height: 1.5rem; font-size: 0.9rem;}
    .timeline .wrapper .item .image img{height: auto;}

    .listings .item{display: grid; grid-template-columns: 3fr auto;}
    .listings .item .icon{grid-row-start: 1; grid-row-end: 3; max-width: 150px;}
    .listings .item > div:last-child{display: none;}
    .listings .item .arrow::after{display: none;}
    .listings.contacts .item{grid-template-columns: 3fr 13fr}
    .listings.contacts .item .icon{width: 80px;}
    .listings.contacts .item > div:last-child{display: block;}
    .listings.contacts .item .title h4{font-size: 1.1rem;}
    .listings.contacts .item .text{font-size: 0.8rem;}

    .awards .slick-track{padding-left: 0px;}

    .products .products-archive .item .wrapper .image img{object-fit: none;}
    .products .products-archive .item .wrapper .image{height: 150px;}
    .products .products-archive .item .wrapper .text .icon{flex: 0 0 auto; max-width: 20%; padding-left: 0px;}
    .products .products-archive .item .wrapper .text .desc h3{font-size: 1.2rem;}

    .structure .nav-item .nav-link{font-size: 1rem; padding-right: 25px;}
    .structure .nav-pills{justify-content: center; padding-top: 40px;}
    .structure .tab-content{padding-top: 30px;}
    .structure .nav-item:last-child .nav-link{padding-right: 0px;}
    .structure .nav-item .nav-link::after{height: 20px; border-width: 1px; right: 11px;}
    .structure .nav-item .nav-link img{height: 18px; vertical-align: sub;}
    .structure .tab-content .director-wrapper{flex-wrap: wrap; gap:20px; justify-content: center;}
    .structure .tab-content .director-wrapper .item{width: 40%;}

    .document .doc-wrapper .item{font-size: 1rem;}
    .document .doc-wrapper .item .action{font-size: 0.8rem;}
    .document .doc-wrapper .item .action i{font-size: 0.75rem;}

    .whistleblow .item{padding-left: 0px; padding-right: 0px;}    
    .whistleblow .item .title{font-size: 1rem; margin-bottom: 5px;}

    .information .info-wrapper .item .action{justify-content: flex-start; padding-left: 0px; margin-top: 15px;}

    footer .img-logo{max-width: 100px; margin-bottom: 30px;}
    footer .column{margin: 0px;}
    footer .column h3{font-size: 1rem; margin-bottom: 5px;}
    footer .column ul li a{font-size: 12px; line-height: 18px;}
    footer .social{justify-content: center;}
    footer .black-footer{text-align: center;}
    footer .black-footer > .container{flex-direction: column;}
    footer .black-footer ul{margin-top: 10px;}
}