html, body {
  /* remove bounce effect when user overscroll */
  overscroll-behavior: none;
}
@font-face {
  font-family: 'Just Sans';
  src: url("/static/ggtbk/assets/fonts/JUST-Sans-Regular.woff2") format('woff2'),
       url("/static/ggtbk/assets/fonts/JUST-Sans-Regular.woff") format('woff');
  font-weight: 400; /* normal */
  font-style: normal;
}

@font-face {
  font-family: 'Just Sans';
  src: url("/static/ggtbk/assets/fonts/JUST-Sans-Medium.woff2") format('woff2'),
       url("/static/ggtbk/assets/fonts/JUST-Sans-Medium.woff") format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Just Sans';
  src: url("/static/ggtbk/assets/fonts/JUST-Sans-SemiBold.woff2") format('woff2'),
       url("/static/ggtbk/assets/fonts/JUST-Sans-SemiBold.woff") format('woff');
  font-weight: 600;
  font-style: normal;
}

:root {
  --brand-color: #B92025;
  --primary-color: #DA291C; /* Red */
  --secondary-color: #001A72; /* Blue */
  --alternate-color: #ECD898; /* Gold */
  --olive: #BBA16B; /* Olive */
  --grey-bg: #E6E6E6; /* #e6e6e6 */
  --grey-text: #A1A1A1; /* #CCC */
  --base-text: #555555;
  --tab-wrapper-bg: #EAEAEA;
  --tab-wrapper-text: #555555;
  --download-border: #D5D5D5;
  --text-red: #AA2F2C;
}

/***********
* STYLE V2 *
***********/
html, 
body, 
main, 
p, 
.h3, 
h3, 
.tab-content 
.tab-pane.active 
.row ul:not(.dropdown__filter) li,
section p {
  font-family: 'Roboto', sans-serif;
  font-weight: 400 !important;
  color: var(--base-text)
}

.tab-content {
  background-color: transparent;
}
ul.nav.theme-25:before {
  display: none;
}

.footer-v2 ul.children {
  float: left;
  display: block;
  padding: 0;
}

.footer-v2 ul > li{
  float: left;
  list-style: none;
  /* min-width: 10rem; */
}

.footer-v2 ul > li > ul > li.footer-item {
  float: none;
  padding: 8px 3.75rem .1rem 0;
}
.footer-v2 ul > li > ul > li > a {
  color: #FFF;
  font-family: 'futura-condensed-medium', arial, sans;
}
.footer-v2 ul li a:hover,
.footer-v2 ul li a:focus,
.footer-v2 ul li a:visited {
  text-decoration: none;
  background-color: transparent;
}
.footer-v2 .nav>li>a {
  padding-left: 0px !important;
  color: #FFF;
  font-weight: 600;
  font-family: 'futura-condensed-medium', arial, sans;
  font-size: 20px;
}
.privacy-policy {
  margin: 3rem 0 0;
  padding-bottom: 2rem;
  display: flex;
}

.privacy-policy span {
  flex: 1
}

.privacy-policy span a {
  position: relative;
  float: right;
  font-weight: 600;
}
.privacy-policy span p {
  margin-bottom: 0;
  color: #fff;
}


/************
* DROP DOWN *
************/
.dropdown-25 {
  width: 100%;
}
.dropdown__switch:checked + .dropdown__options-filter .dropdown__select {
  transform: scaleY(1);
  opacity: 1;
}
.dropdown__switch:checked + .dropdown__options-filter .dropdown__filter:after {
  transform: rotate(-135deg);
}
.dropdown__options-filter {
  width: 100%;
  cursor: pointer;
}
.dropdown__filter {
  position: relative;
  display: flex;
  margin: 0;
  padding: .5rem 2rem;
  color: #fff;
  background-color: var(--primary-color);
  border-radius: 120px;
  font-size: 26px;
  transition: 0.3s;
  list-style-type: none;
  z-index: 2;
}
.dropdown__filter li {
  font-family: 'futura-condensed-medium', arial, sans !important;
  font-weight: 500 !important;
}
.dropdown__filter-selected {
  color: #FFF !important;
}
.dropdown__filter:focus {
  outline: none;
}
.dropdown__filter::after {
  position: absolute;
  top: 45%;
  right: 20px;
  content: "";
  width: 10px;
  height: 10px;
  border-right: 1px solid #FFF;
  border-bottom: 1px solid #FFF;
  transform: rotate(45deg) translateX(-45%);
  transition: 0.3s ease-in-out;
}
.dropdown__select {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 5px;
  overflow: hidden;
  transform: scaleY(0);
  transform-origin: top;
  border-radius: 18px;
  opacity: 0;
  transition: 0.2s ease-in-out;
  list-style-type: none;
  padding: 0;
  z-index: 1;
}
.dropdown__select-option {
  /* padding: 20px; */
  padding: .5rem 2rem;
  background-color: #fff;
  /* border-bottom: 1px solid #e9ecef; */
  transition: 0.3s;
  color: #000 !important;
}
.dropdown__select-option:last-of-type {
  border-bottom: 0;
}
.dropdown__select-option:hover, 
.dropdown__select-option.selected {
  background-color: #ec948d;
}
ul.dropdown__select li {
  font-family: 'futura-condensed-medium', arial, sans !important;
  font-weight: 500;font-size: 26px;
}
/* SLIDER */
.slider-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  max-width: 100%;
  margin: auto;
  padding-top: 100px;
  padding-bottom: 50px;
}

.slider-container {
  overflow: hidden;
  flex: 1;
}

.slider-container.center {
  flex: none;
  align-items: center;
}

.slider-track {
  display: flex;
  transition: transform 0.4s ease-in-out;
  will-change: transform;
}

.card {
  flex: 0 0 auto;
  box-sizing: border-box;
}

.owl-dots {
  display: none;
}

.owl-carousel .item-inner-wrapper {
  position: relative;
}

.owl-item.active{
  z-index: 1;
  transition: transform 0.3s ease-in-out; /* Smooth transition for the zoom effect */
}

.owl-item.active:hover{
  transform: scale(1.5); /* Zooms the image to 150% of its original size */
  z-index: 2;
}

.owl-item img {
  /* Basic styling for images within owl-items */
  width: 100%;
  height: auto;
}

.slide-nav {
  background: transparent;
  color: rgba(0, 0, 0, 0.5);
  border: none;
  font-size: 28px;
  cursor: pointer;
  padding: 12px;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.slide-nav:hover {
  color: rgba(0, 0, 0, 0.7);
}

/* DETAILS */
#detail-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    padding: 3rem 5rem 0;
    border-top: 1px solid #000;
    /* scroll-margin-bottom: 9rem; */
    
}

.product-image {
    grid-column: span 2;
    margin: -3rem 0 0;
    max-height: 350px;
}
.product-image > img {
    max-width: 100% !important;
}

.product-detail {
    grid-column: span 4;
}

.detail-box {
  border-radius: 20px;
  background-color: #FFF;
  padding: 10px;
  padding-bottom: calc(2rem + 10px);
}

.product-detail > .detail-box > h3 {
  font-family: 'futura-condensed-medium', arial, sans !important;
  font-size: 24px;
  color: var(--base-text);
  padding-left: 2rem;
  text-transform: uppercase;
}
.product-detail > .detail-box label {
  padding-left: 2rem;
}

.product-detail > .detail-box > p {
  font-family: 'Just Sans', sans-serif;
  line-height: 1.5;
}

/* Loading Indicator */
.bouncing-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 100px;
}

/* Utilities */
.font-futura {
  font-family: 'futura-condensed-medium', arial, sans !important;
}
.font-sans {
  font-family: initial;
}

.office-address {
  font-size: 24px;
}
@media (min-width: 1200px) {
  .container {padding-left:0px !important; padding-right:0px !important;}
  /* .checkbox > .agreement {
    font-size: 22px;
  } */
  ul.tab.theme-25 {
    margin: 37px 40px;
    height: 104px;
  }
  ul.tab.theme-25 li a {
    height: 104px;
  }
  .container .tab-content p,
  .container .tab-content ol > li ,
  p.description {
    font-size: 18px;
    line-height: 1.75;
  }
}
@media (min-width: 992px) {
  .container {padding-left:0px !important; padding-right:0px !important;}
}
@media (min-width: 800px) {
  .container {padding-left:0px !important; padding-right:0px !important;}
}
.h3, h3.title-top {
    font-size:34px !important;
}
h3 > img {
  width: 34px;
  height: 34px;
}
.row .download {
  display: flex;
  align-items: center;
  background-color: var(--tab-wrapper-bg);
  border-radius: 120px;

  img {
    width: 24px;
    height: 24px;
  }

  .text {
    flex: 1;
    font-family: 'Roboto', sans-serif !important;
    font-weight: normal;
    color: var(--base-text);
    border-right: 1px solid var(--download-border);
    padding: 12px 24px;
  }

  a {
    width: 71px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
  }
}
img.pdf-icon {
  width: 24px;
  height: 24px;
}
.download.theme-25 {
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background-color: var(--primary-color);
  border-radius: 4rem;
  max-width: 40%;

  span {
    flex: 1;
    border: none !important;
  }
  a {
    border-left: 2px solid #FFF !important;
  }
  
  span.text {
    color: #FFF !important;
    margin: 0 !important;
    text-align: inherit !important;
    text-overflow: ellipsis;
    padding: 16px 32px;
  }

  a {
    width: 60px;
    height: 60px;
  }

  max-width: 40%;
}
.page-content .tab-content:not(.sub) {
    /* padding: 42px 32px 40px; */
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}
@media (min-width:1024px) {
  .page-content .tab-content {
    padding: 46px 60px;
  }
}
.page-content .tab-content.sub:has(#gudanggaramfamily) {
  padding: 0;
}
.container h3 {
  font-family: 'futura-condensed-medium', arial, sans; /* request 2025-11-26 Title produk font sans*/
  font-weight: 500 !important;
}
.container.investor #keuangan .row .contents {
  padding: 0 60px;
}
.panel-group .panel .parent {
  background-color: var(--tab-wrapper-bg) !important;
  border-radius: 120px !important;
  color: var(--tab-wrapper-text) !important;
  padding: 12px 24px !important;
}
.collapse-years {
  margin-right: 0 !important;
}
.panel-group .panel .arrow {
  right: 0 !important;
}
.panel-group .panel .collapsed .arrow {
  border-top: 12px solid var(--primary-color);
}
.collapse-years:not(.collapsed) .arrow {
  border-bottom: 10px solid var(--primary-color);
}
.navbar {
  margin-bottom: initial !important;
  border: none !important;
}
.navbar-fixed-top {
    border-width:0px !important;
}
/************
* NAVBAR v2 *
************/
.navbar,
.main-nav {
  font-family: 'futura-condensed-medium', arial, sans;
  font-weight: 300;
  background-color: #000;
}
.navbar {
  min-height: auto !important;
}
.main-nav {
  padding-left: 28px;
  padding-right: 28px;
}
.navbar-brand {
    background-color: var(--brand-color);
    height: auto;
    padding: 17px 10px !important;
}
.navbar-brand>img {
  width: 142px !important;
  height: 38px;
}
ul.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav.main-nav>li>a {
    color: #FFF;
    padding: 24px 14px;
    font-size: 20px;
    font-weight: 500 !important;
}
.nav.main-nav>li>a:hover {
    color: var(--primary-color);
    transition: all ease-in 3ms;
    background-color: transparent !important;
}

.text-white {
    color: #FFF;
}
.header {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.navbar-right {
    flex: 1;
    float: initial;
    justify-content: center;
    gap: 56px;
}
.widget-group {
    flex-direction: row;
    display: flex;
    align-items: center;
    gap: 32px;
}
.widget-group>.navbar-widget>div:first-child {
    font-size: 20px;
}
.navbar-widget {
    padding: 0;
}

a.lang-switch {
  font-family: 'Roboto';
  background-color: #191445;
  color: #fff;
  padding: 10px !important;
  font-size: 20px;
  border-radius: 6px;
}

a.lang-switch:hover {
    text-decoration: none !important;
}

#tentang-kami .height-2 {
  margin: 0 auto;
}

.page-content {
  padding: 0;
  margin: calc(7rem + 70px) 0 5rem;
  background-color: #FFF;
  border-radius: 2rem;
  border-bottom-left-radius: 40px;
  border-bottom-right-radius: 40px;
}
.container.about #overview {
  padding-bottom: 0;
}
/* .page-content .tab-content:not(.sub) {
  padding-bottom: 8px !important;
} */
@media only screen and (max-width: 1440px) {
  .navbar {
    padding-right: 0px !important;

    .navbar-right {
      gap: 37px;
    }
  }
  .navbar-brand {
    padding: 10px 6px !important;
  }
  .navbar-brand>img {
    width: 95px !important;
    height: 26px;
  }
  .main-nav {
    padding-left: 15px !important;
    padding-right: 15px !important;
    gap: 18px !important;
  }
  .main-nav > li > a {
    padding: 12px 10px !important;
    font-size: 14px !important;
  }

  span.active {
    height: 2px !important;
  }

  a.lang-switch {
    padding: 7px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-weight: 400;
  }
  .widget-group {
    gap: 21px;
  }
  .widget-group>.navbar-widget>div:first-child {
    font-size: 14px;
  }
  .bottom > .text {
    font-size: 12px;
  }
  #refreshBtn > img {
    width: 22px !important;
    height: 22px !important;
  }

  /* # Homepage
  .sticky-section #tentang-kami {
      padding-top: 92px !important;
  } */
  #tentang-kami h1,
  #our-brand h1 {
    font-size: 40px;
  }
  #tentang-kami .height-2 > p {
    margin: 0 auto;
    max-width: 65%;
    font-size: 16px !important;
  }
  #our-brand .height-2 > p {
    margin: 0;
  }
  #our-brand .height-2 > p {
    margin-bottom: 41px !important;
  }
}

@media screen and (max-width: 1440px) and (orientation: landscape) {  .footer-v2 {
    padding: 40px 132px 0 !important;
  }
  ul.nav.theme-25:not(.nav-tabs) {
    column-gap: 9px !important;
    grid-template-columns: 1fr 1fr 1fr 1fr 118px 1fr 118px 1fr !important;
  }
  .footer-v2 ul > li > ul > li.footer-item {
    padding: 0 !important;
  }
  
}

@media (min-width: 1500px) {
  .footer-v2 {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
  }
}


/* Menu code starts here */
body:has(input#menuCheckbox:checked) {
    overflow: hidden;
}

#menuToggle
{
  display: block;
  /* You can also use relative/absolute here if you want to stay on the top */
  position: fixed;
  top: 26px;
  
  z-index: 1;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #FFF;
  
  transition: color 0.3s ease;

  padding: 30px;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 80px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  margin-left: 16px;
  position: relative;
  
  background: #cdcdcd;
  border-radius: 3px;
  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(0, -1px);
  margin-left: 16px;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(2px, 0px);
}
/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

.mobile-brand {
  padding: 16px !important;
  padding-left: 10% !important;
}

.mobile-widget {
    flex: 1;
    display: flex;
    align-items: center;
    /* justify-items: flex-end; */
    /* justify-content: space-between; */
    float: right;
    gap: 20px;
    padding-left: 2rem;
    padding-right: 2rem;
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu-25
{
  position: absolute;
  width: 100vw;
  height: 100vh;
  margin-top: 1rem;
  padding: 50px;
  padding-top: 4.25rem;
  box-sizing: border-box;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.7);
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu-25 li
{
  padding: 10px 0;
  font-size: 22px;
  text-align: center;
  margin: 1.25rem 0;
}
#menu-25 li:first-child {
  margin-top: 0 !important;
}
#menu-25 li:last-child {
  margin-bottom: 0 !important;
}

#menu-25 li.active {
    background-color: var(--primary-color);
    border-radius: 40px;
}

#menu-25 li label
{
  cursor: pointer;
}

@media (min-width: 991px) {
  .navbar-header {
    float: left;
  }
}

@media (min-width: 761px) and (max-width:990px) {
  .navbar-header {
    float: none;
    height: 98px;
  }
  .navbar-header .mobile-brand {
    padding-right: 38px !important;

    img {
      height: 58px;
      width: auto !important;
    }
  }
  #menuToggle {
    transform: translate(0, 12px);
  }
  #menuToggle span {
    width: 22px !important;
    margin-left: 38px !important;
    height: 2px !important;
  }
  .widget-group {
    gap: 24px !important;
  }
  a.lang-switch {
    padding: 22px !important;
    font-size: 22px !important;
  }
  .navbar-widget > .top {
    font-size: 26px !important;
  }
  .navbar-widget > .bottom {
    font-size: 22px;
  }
  #refreshBtn > img {
    width: 40px !important;
    height: 40px !important;
  } 
  #menu-25 {
    margin-top: 2.4rem !important;
    padding: 150px 300px;
  }
  #menu-25 li {
    padding: 17px 0 !important;
    margin-bottom: 25px !important;
  }
}
@media (max-width: 480px) {
  .widget-group {
    gap: 12px !important;
  }

  .widget-group>.navbar-widget>div:first-child {
    font-size: 14px;
  }
  .widget-group>.navbar-widget>div:last-child {
    font-size: 12px;
  }

  #refreshBtn > img {
    width: 18px;
    height: 18px;
  }
  /* #menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(3px, -1px);
  } */

  #menuToggle {
    margin-top: -1px;
  }
  #menuToggle input {
    width: 40px;
  }
  #menuToggle span {
    width: 18px;
    height: 2px;
    margin-bottom: 3px !important;
  }
  #menu-25 {
    margin-top: 1.2rem !important;
    padding: 45px 90px;
  }
  #menu-25 li {
    padding: 8px 0;
    font-size: 18px;
    text-align: center;
    margin: 12px 0;
  }
  .mobile-brand {
    padding-left: 50px !important;
  }
}
span.active {
    width: 100%;
    height: 5px;
    border-radius: 2px;
    background-color: var(--primary-color);
    position: absolute;
}

.bottom > .fa {
  padding-left: 8px;
  position: relative;
  bottom: 4px;
}

.bottom > .fa-sort-asc {
  color: greenyellow;
  top: 6px;
}

.bottom > .fa-sort-desc {
  color: var(--primary-color);
}
/***************
* HERO SECTION *
***************/
.hero-background {
  position: fixed;
  width: 100vw;
  height: 100vh;
}
.sticky-section {
  position: absolute;
  min-width: 100%;
  top: 100vh;
}
.section-25 {
  position: relative;
  min-width: 100%;
  top: 100vh;
}
#heroBanner .carousel-inner .item {
  transition-property: opacity;
  width: 100%;
  height: 100%;
}
#heroBanner .carousel-inner .item,
#heroBanner .carousel-inner .active.left,
#heroBanner .carousel-inner .active.right {
  opacity: 0;
}
#heroBanner .carousel-inner .active,
#heroBanner .carousel-inner .next.left,
#heroBanner .carousel-inner .prev.right {
  opacity: 1;
  background-position: top center;
  background-size: cover;
  height: 100vh;
  background-repeat: no-repeat;
  margin-top: 2rem;
}
#heroBanner .carousel-inner .next,
#heroBanner .carousel-inner .prev,
#heroBanner .carousel-inner .active.left,
#heroBanner .carousel-inner .active.right {
  left: 0;
  transform: translate3d(0, 0, 0);
}
#heroBanner .carousel-inner .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.hero-caption h1 {
  font-family: 'futura-condensed-medium', arial, sans;
  font-size: 60px;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 1.2rem;
}
.hero-caption p {
  font-size: 24px;
  font-weight: normal;
  color: #FFF;
  padding: 0 3rem;
  /* padding: 0 13rem; /* fix padding on IPhone X device */
}
.media {
    overflow: initial !important;
    zoom: 0 !important;
}
/* #hero-section .overlay .carousel-inner .item > img {
  animation: zoomin 10s infinite;
} */
/* Infinite Zoom Effect */
.zoom-effect {
    animation: zoomout 10s linear forwards;
    transform-origin: center center;
}

@keyframes zoomin {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

@keyframes zoomout {
  from {
    transform: scale(1.1);
  }
  to {
    transform: scale(1);
  }
}

.sticky-section > section > section,
#parallax > .container {
  max-width: 78%;
  margin: 0 auto;
}
.sticky-section #our-brand {
  padding: 8rem 0 52px;
}
.sticky-section #tentang-kami {
  padding-top: 142px;
}
#tentang-kami > .main-content {
  display: flex;
  flex-direction: column;
    gap: 24px;
}
/* .container.about h3, 
.container.kretek h4 {
  font-family: 'futura-condensed-medium', arial, sans !important;
  font-weight: 500 !important;
} */
.container.about h3:not(.title-top) {
  padding-bottom: 0;
  margin-bottom: 24px;
}
.container .tab-content p,
.container .tab-content ol > li ,
p.description {
  font-family: 'PTSansRegular', sans !important;
  font-weight: 400;
}
.option-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding-top: 3.35rem;
}
.container.media .page-content .tab-content {
  padding-left: 0;
  padding-right: 0;
  border-bottom-left-radius: 120px;
  border-bottom-right-radius: 120px;

  .tab-pane {
    background-color: transparent !important;
  }
  
  .featured-tvc img.img-responsive {
    min-width: 100%;
  }

  .load-more {
    margin-top: 60px;
    
    a {
      padding: 10px 40px;
      border-radius: 120px;
      font-family: 'futura-condensed-medium', arial, sans;
      font-size: 28px;
    }
  }
}
.media .navigator.theme-25 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.media .selector {
  min-width: 0;
}
ul.nav-tabs.tabs > li.active a {
  font-family: 'futura-condensed-medium', arial, sans;
  font-size: 34px;
  font-weight: 500;
}
/******
* CSR *
******/
.container.csr .page-content {
  background-image:  none !important;
}
.container.csr .tab-content,  .container.csr .tab-content p {
  /* background-color: transparent !important; */
  border-top-left-radius: 40px;
  padding-bottom: 0;
  border-top-right-radius: 40px;
}
.container.csr .row .doc {
  margin: 0 0 3rem;
  padding-bottom: 78px;

  .download {
    background-color: var(--tab-wrapper-bg) !important;
  }
  
  .download img {
    width: 38px;
    height: 38px;
  }
  span.text {
    color: var(--base-text) !important;
    font-size: 18px;
  }
  a {
    padding: 16px;
  }
  h3 {
    font-size: 24px;
    margin-bottom: 36px;
  }
}
/********
* MEDIA *
********/
.navigator.theme-25 {
  font-family: 'Just Sans', sans-serif;
  font-weight: normal;
  font-size: 20px;
}
.theme-25 .selector > .dropdown-25 {
  background: var(--primary-color);
  color: #FFF;
  border-radius: 1.25rem;

  .btn {
    font-family: 'futura-condensed-medium', arial, sans;
    font-size: 20px;
    text-align: center;

    .arrow {
      border-top-color: #FFF;
    }
  }

  .dropdown-menu {
    li {
      font-family: inherit;
      font-weight: inherit;
    }
  }
}
.theme-25 .selector > .dropdown-25.open > .btn, .btn:hover {
  color: #FFF !important;
}
.media .selector .dropdown {
  padding: 10px 52px 10px 32px;
  border-radius: 120px;
}
.media .selector .dropdown .btn .arrow {
  top: 24px;
  right: 24px;
}
.media .selector .dropdown-25.open .arrow {
  border-bottom: 10px solid #fff;
}
/* NEW UI CSR */
.container.csr {
  .page-content {
    padding: 80px 0 114px
  }

  .row {
    .tab-content {
      padding-top: 0;
    }
  }
}
/* KARIR */
.container.karir {
  .page-content {
    padding: 80px 0 114px
  }

  .row {
    .tab-content {
      padding: 0;
      /* max-width: 84%; */
      margin: 0 auto;

      .tab-pane p:last-child {
        padding-top: 28px;

        a {
          font-size: 18px;
        }
      }
    }
  }

}
/* KONTAK */
.container.kontak .page-content {
  padding-top: 50px;

  .tab-content {
    padding: 0;

    .tab-pane {
      margin: 0 auto;

      p.description {
        font-size: 22px;
        font-weight: 500;
        text-align: center;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
      }
      
    }

    .form-contact {
      font-size: 20px;
      font-family: 'futura-condensed-medium', arial, sans;

      .form-control {
        font-size: 20px;
      }
      label {
        color: #c3111b;
        line-height: 3;
        font-weight: 500;
        text-transform: uppercase;
      }

      #id_to {
        background: none;
        -webkit-appearance: none;
        border: none;
        box-shadow: none;
        /* margin-bottom: 10px; */
      }

      textarea, input:not([type='checkbox']) {
        background-color: var(--grey-bg);
        border: none;
        padding: 24px 12px;
        margin: 0px;
      }

      textarea {
        border-radius: 24px;
        width: 100%;
      }

      input {
        border-radius: 120px;
      }

      #agree_terms {
        margin-left: -20px;
        margin-top: 8px;
      }

      .checkbox {
        margin: 0;

        .agreement {
          margin-top: 60px;
          line-height: 1.5;
        }
      }
    }
  }
}
#kontak-kami {
  padding: 36px 54px 78px 34px !important;
  margin: 0;

  h3 {
    margin: 0;
    font-family: 'futura-condensed-medium', arial, sans;
    font-size: 34px;
  }
  p {
    margin: 0;
    font-size: 20px;
    padding-top: 1rem;
    background-color: #E6E6E6 !important;
  }
}
.agreement {
  display: inline-block;
}
#submit_button {
  font-family: 'futura-condensed-medium', arial, sans;
  padding: 8px 73px;
  border-radius: 120px;
  background-color: var(--primary-color);
  color: #FFF;
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

ul.tab.theme-25 {
  background-color: var(--tab-wrapper-bg);
  border-radius: 120px;
}
ul.tab.theme-25::-webkit-scrollbar {
  display: none;
}
ul.tab.theme-25 > li {
  font-family: 'futura-condensed-medium', arial, sans;
  font-weight: 500;
  background-color: var(--tab-wrapper-bg) !important;
  margin-bottom: 0 !important;
  padding: 0 15px;
}
ul.tab.theme-25 > li:nth-of-type(1) {
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
}
ul.tab.theme-25 > li:last-child {
  border-top-right-radius: 120px !important;
  border-bottom-right-radius: 120px !important;
}
ul.tab.theme-25 li.active {
  background-color: var(--primary-color) !important;
  border-radius: 120px;
}
ul.tab.theme-25 li.active a {
  color: #FFF !important;
}
ul.tab.theme-25 li a {
  color: var(--tab-wrapper-text);
  display: flex;
  align-items: center;
  justify-content: center;
  /* font-size: 28px; */
  line-height: 1.2;
}
@media (min-width: 1680px) {
  /* .row #timeline li.active a .bullet {
    left: 8.75em  !important;
  }
  .row #timeline li a .bullet {
    left: 13.5em !important;
  } */
  .dropdown-25 {
    min-width: 35%;
  }
}
@media (min-width: 1440px) {
  #tentang-kami > .main-content {
    gap: 82px !important;
  }
  .container.investor #keuangan h3 {
    font-size: 28px;
    margin-bottom: 1rem;
  }
  .font-futura.md {
    font-size: 22px;
  }
  .font-futura.lg {
    font-size: 28px;
  }
}
@media (min-width: 1024px) and (max-width: 1440px){
  #tentang-kami > .main-content {
    gap: 24px;
  }
  .hero-caption {
    gap: 12px !important;
  }
  .hero-caption h1 {
    font-size: 40px;
  }
  .hero-caption p {
    font-size: initial;
  }
  ul.tab.theme-25 {
    width: calc(100% - 52px) !important;
    margin: 26px !important;
    height: 55px;
  }
  ul.tab.theme-25 li a {
    font-size: 18px !important;
    height: 55px;
    /* padding-top: 20px !important;
    padding-bottom: 20px !important; */
  }
  .container {
    & .page-content {

      & ul.nav-tabs:not(.subtab) li.active a {
        font-family: 'futura-condensed-medium', arial, sans;
        font-size: 24px;
        font-weight: 500;
      }
    }
  }
  .container.brand .tab-content p.description {
    padding: 0 !important;
  }
  .container.brand .page-content {
    margin-bottom: 0;
  }
  .container.investor {
    ul.tab.theme-25 {
      height: 63px !important;
    }

    ul.tab.theme-25 li a {
      height: 63px !important;
    }
  }
  p.description,
  .container .tab-content p,
  .container .tab-content ol > li  {
    font-size: 12px;
  }
  #brand-desc {
    font-size: 16px;
    text-align: center;
  }
  .container.about #overview {
    max-width: 80%;
    margin: 0 auto;
    padding-bottom: 0;
  }
  .container .page-content {
    margin-top: 60px !important;
  }
  .container.investor .row .contents {
    padding: 0 40px;
  }
  .row .download {
    img {
      width: 16px;
      height: 17px;
    }
    .text {
      font-size: 12px;
    }
    a {
      width: 48px;
    }
  }
  img.pdf-icon {
    width: 16px;
    height: 17px;
  }
  .collapse-years,
  .panel-group .panel .collapse li,
  .panel-group .panel .collapsing li {
    font-size: 12px !important;

    img {
      width: 16px;
      height: 17px;
    }

    .arrow {
      top: 6px !important;
    }
  }
  /* .page-content .tab-content:not(.sub) {
    padding-bottom: 8px !important;
    padding-top: 28px !important;
  } */
  .page-content .tab-content {
    padding: 0;
  }
  .container.about h3 {
    font-size: initial !important;
    img {
      width: 22px;
      height: 22px;
    }
  }
  .container.about h4 {
    font-size: 14px;
  }
  .container.about h3.title-top {
    font-size: 22px !important;
    margin: 0;
    padding-top: 0.5rem !important;
  }
  .container.about h3.title {
    font-size: 14px;
  }
  .container.investor h3 {
    font-size: 18px;
  }
  .row #timline {
    padding-right: 0;
  }
  .row #timeline li a {
    font-size: 16px;
  }
  .row #timeline li.active a {
    font-size: 18px;
  }
  .row #timeline li:not(:last-child) {
    margin-bottom: 26px;
  }
  .timeline {
    font-family: 'futura-condensed-medium', arial, sans;
    font-weight: 500;
    
    h2 {
      font-size: initial;
    }
    h3 {
      font-size: 14px;
    }
  }
  .dropdown__filter {
    font-size: initial !important;
    padding: .5rem 1rem;
  }
  .collapse-years:not(.collapsed) .arrow {
    border-bottom: 5px solid var(--text-red) !important;
  }
  .panel-group .panel .collapsed .arrow {
    border-top: 5px solid var(--text-red) !important;
    border-bottom: none !important;
  }
  .panel-group .panel .arrow {
    border-left: 4px solid transparent !important;
    border-right: 4px solid transparent !important;
  }
  .brand .theme-25 .nav-tabs li a, 
  .brand .theme-25 .nav-tabs li.active a {
    font-size: 32px !important;
  }
  .brand-title {
    margin-bottom: 36px;
  }
  .option-wrapper {
    padding-top: 36px !important;
    gap: 1rem !important;
  }
  ul.dropdown__select li {
    font-size: initial;
  }
  .slider-wrapper {
    padding-top: 40px;
    padding-bottom: 0;
  }
  #detail-container {
    padding-top: 26px;

    .product-image {
      margin-top: -2rem;
    }

    .product-detail {
      .detail-box { 
        padding: 26px;

        h3 {
          margin: 0;
          padding-left: 0;
          font-size: initial;
          margin-bottom: 1rem;
        }

        p {
          padding: 0;
        }

        label {
          margin: 0;
          padding: 0;
          font-size: 12px;
        }
      }
    }
  }

  .container.kretek .tab-content .contents {
    padding: 16px 80px 8px !important;
  }

  .line-divider {
    margin-left: 80px;
    margin-right: 80px;
  }

  .container.csr {
    .page-content {
      padding: 33px;
      border-bottom-left-radius: 40px;
      border-bottom-right-radius: 40px;
    }

    h3 {
      margin: 0;
      font-size: 24px;
      margin-bottom: 24px;
    }

    .row .doc {
      margin: 0;
      padding-bottom: 52px;

      span.text {
        font-size: initial;
      }

      a {
        padding: 16px 32px;
      }
    }
  }

  /* media */
  .media .navigator.theme-25 {
    padding: 24px;
    font-size: 14px;
  }
  .theme-25 .selector > .dropdown-25 {
    .btn {
      font-size: 14px;
      padding: 0;
    }
  }
  .media .selector .dropdown .btn .arrow {
    top: 16px;
    right: 24px;
  }
  .load-more {
    margin: 52px 0 20px;

    a {
      padding: 6px 26px !important;
      font-size: 18px !important;
    }
  }

  .container.karir {
    & .page-content {
      padding-top: 53.33px;
      padding-bottom: 74px;

      & ul.nav-tabs li.active a {
        padding: 18px 0;
      }
    }
    & .row {
        & .tab-content {
            .tab-pane p:last-child {
                padding-top: 18px;

                & a {
                  font-size: 12px !important;
                }
            }
        }
    }
  }

  .container.kontak .page-content {
    padding-top: 37px;

    .tab-content {
      .tab-pane {
        p.description {
          font-size: 14px !important;
        }
      }
    }

    .form-contact {
      font-size: 14px !important;

      .form-control {
        font-size: 14px !important;
      }

      textarea, input:not([type='checkbox']) {
        padding: 6px 9px !important;
      }

      textarea {
        border-radius: 16px !important;
      }

      input {
        border-radius: 120px !important;
      }

      #agree_terms {
        margin-top: 4px;
      }

      #submit_button {
        font-size: initial !important;
        padding: 5.33px 49px;
      }

      & .checkbox {
        .agreement {
          margin-top: 50px !important;
        }
      }
    }

    .box-map-kontak {
      ul:not(.dropdown-menu) {
        margin: 32px 0 !important;

        li {
          font-size: initial !important;
          padding: 24px 34px 0 !important;
        }

        li.custom {
          padding-top: 0;
          margin-top: -24px !important;

          button {
            font-family: 'futura-condensed-medium', arial, sans;
            font-size: initial !important;
          }

          #faspro {
            button {
              padding: 0 !important;
            }
            ul {
              padding: 10px;

              li {
                font-size: initial !important;
                padding: 0 !important;
              }
            }
          }
        }
      }
    }
  }

  #kontak-kami {
    padding: 24px 36px 52px 22.67px !important;

    & h3 {
      font-size: 22px;
    }

    & p {
      padding-top: 11px;
      font-size: 14px;
    }
  }
  /* Footer */
  .footer-v2 .nav>li>a {
    font-size: 16px;
    padding-top: 0;
  }
  .footer-v2 ul > li > ul > li > a {
    font-size: 12px;
  }

  /* PRivacy Policy */
  .privacy-policy {
    margin-top: 2rem;
  }

  .font-futura.sm {
    font-size: 12px;
  }
  .font-futura.md {
    font-size: 14px;
  }
  .font-futura.lg {
    font-size: 18px;
  }
}

.sticky-section .content-about {
  padding: 8rem 12rem 0;
}
@media (max-width: 1024px) {
  .sticky-section #our-brand,
  .sticky-section #tentang-kami,
  .sticky-section .content-about {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (max-width: 991px) and (min-width: 481px) {
  ul.tab.theme-25,
  ul.tab.theme-25 > li a {
   height: 68px !important;
  }
  .overlay.swipe {
    height: 68px;
  }
  .childtab li a,
  .childtab li.active a {
    font-size: 24px;
  }
  /* .scroll-tab:has(.childtab) ul li {
    width: 50%;
  } */
  .hero-caption {
    top: 50% !important;
    left: 10% !important;
    transform: translate(-7.5%, -50%) !important;
  }
   .hero-caption h1 {
    font-size: 2rem !important;
  }
  .hero-caption p {
    font-size: 1rem !important;
    line-height: 1.8;
  }
  .container.csr {
    padding: 2rem 1rem;
  }
  .container .single-tab .tab a {
    font-size: 28px;
  }
  .media .box-archieve , .media .box-bottom{
    padding: 0;
  }
  ul.dropdown__filter li.dropdown__filter-selected, 
  ul.dropdown__select li {
    font-size: 18px;
  }
  #kuartal > div {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  #kuartal > div > .dropdown.kuartal-dropdown {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .scroll-tab ul {
    display: flex;
    flex-direction: row;
    flex-basis: min-content;
  }
  .scroll-tab ul li {
    flex: 1 0 min-content;
    min-width: 280px;
  }
}
@media (max-width: 480px) {
  .hero-caption {
    top: 45% !important;

    h1 {
      font-size: 1.5rem !important;
    }

    p {
      font-size: 12px !important; 
      line-height: 1.5;
    }
  }

  a.lang-switch {
    padding: 10px;font-size: 12px;
  }

  .navbar-brand>img {
    height: 27px;
    width: 102px !important;
  }

  #tentang-kami .height-2 > p {
    max-width: initial;
    font-size: 12px !important;
  }
  p.description,
  .container .tab-content p,
  .container .tab-content ol > li {
    font-size: 12px;
    line-height: 1.5;
    list-style: none;
  }
  .container.csr .row .doc {
    span.text {
      font-size: 12px;
    }
    .download img {
      width: 24px;
      height: 24px;
    }
  }
  .childtab li a,
  .childtab li.active a {
    font-family: 'futura-condensed-medium', arial, sans !important;
    font-size: initial;
  }
  .childtab .active a span {
    border: none;
  }
  .container.investor #keuangan .row .contents .collapse-years {
    font-size: 14px;
  }
  .row .download .text{font-size: 14px;}
  .container.investor #keuangan .row .contents .panel-group .panel .arrow {
    top: 5px
  }
  .tab-pane.active > .table {
    overflow-y: scroll;
  }
   
}
/******************
* ABOUT US & BRAND *
*******************/
#tentang-kami h1,
#our-brand h1 {
  font-family: 'futura-condensed-medium', arial, sans;
  color: var(--olive);
  letter-spacing: 0; 
  margin: 0 !important;
}
#tentang-kami h1 {
  padding-bottom: 24px;
}
#tentang-kami p,
#our-brand p {
  /* font-family: 'Just Sans', sans-serif;
  font-weight: 400; */
  line-height: 1.75;
}
#tentang-kami p {
  text-align: center;
}

@media(min-width: 1441px) {
  .sticky-section #tentang-kami {
    min-height: 100vh;
  }

  #tentang-kami h1,
  #our-brand h1 {
    font-size: 60px;
  }
  
  #tentang-kami h1 {
    padding-bottom: 82px;
  }

  #tentang-kami p,
  #our-brand p {
    font-size: 24px !important;
  }

  #tentang-kami p {
    max-width: 779px;
  }

  #our-brand p {
    padding: 0 0 3.5rem;
  }
  
  ul.tab.theme-25 li a {
    font-size: 28px;
  }
  

  .media .navigator {
    padding-top: 2em !important;
    padding-bottom: 5em !important;
  }
}
/* @media (min-width: 980px) and (max-width: 1024px) {
  #tentang-kami h1 {
    padding-bottom: 80px;
  }
} */

/* @media (min-width: 780px) and (max-width: 1024px) {
  #tentang-kami p {
    padding-left: 15%;
    padding-right: 15%;
  }
} */
@media (max-width: 480px) {
  #tentang-kami h1, #our-brand h1 {
    padding-bottom: 24px;
    font-size: 24px;
  }
  #tentang-kami p,
  #our-brand p {
    font-size: 12px !important;
  }
  #our-brand p {
    margin-bottom: 24px !important;
  }
}
#tentang-kami img,
#our-brand img {
  width: 100%;
}

@media (max-width: 768px) {
    #our-brand p {
      /* padding-top: 2rem !important; */
      text-align: center;
    }
    .hierarchy .bottom .box {
      width: 8em;
    }
}
/***************
*   FOOTER V2  *
***************/
.footer-v2 {
  background-color: #000;
  color: #FFF;
  padding: 3rem 1.5rem;
}


ul.nav.theme-25:not(.nav-tabs) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(100% / 8), 1fr)); /* 8 columns, min 150px, fills space */
  grid-template-rows: 1fr;
  grid-row-gap: .5rem;
}
/* @media (max-width: 1400px) and (min-width: 991px) { 
  #our-brand .image-container {
    padding-bottom: 290px !important;
    margin-bottom: 7rem !important;
  }
   #our-brand .image-container  > img{
      
      height: 40vh !important;
      object-fit: cover;
    }
} */
@media (max-width: 767px) {
    ul.nav.theme-25:not(.nav-tabs) {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 991px) { 
    section#tentang-kami, section#our-brand {
        padding: 5rem 2rem 0 !important;
        max-width: 100%;
    }
    section#our-brand {
      padding-bottom: 3rem !important;
    }

    #parallax p.description {
        padding: 2.5rem 0;
        line-height: 1.8;
    }
    .footer-v2 {
        padding: 2rem 2rem 0;
    }
    ul.nav.theme-25:not(.nav-tabs) {
        grid-template-columns: repeat(auto-fill, minmax(calc(100% / 4), 1fr));
        row-gap: 32px;
    }
    .hero-caption h1 {
      margin: 0 !important;
      padding: 0 !important;
    }
    .hero-caption p {
      padding: 0 1rem !important;
    }
    .mobile-widget {
      justify-content: space-between;
    }
    #parallax > .container {
      max-width: initial;
      /* padding: 2rem; */
    }
}
@media (max-width: 480px) {
  section#tentang-kami,
  section#our-brand {
    padding: 5rem 1.5rem 3rem !important;
  }
  section#our-brand {
    padding-top: 3rem !important;
  }
  .mobile-widget {
    font-size: 10px;
    padding-left: .5rem;
    padding-right: .5rem;
  }
  .footer-v2 {
      padding: 2rem 1rem 0;
  }
  .footer-v2 ul > li > ul > li.footer-item {
    padding: 0 !important;
    padding-right: 6px;
  }
  .footer-v2 .nav>li>a {
    font-size: 12px;
  }
  .footer-v2 ul > li > ul > li > a {
    font-size: 10px;
  }
  #heroBanner .carousel-inner .active {
    background-position: center center;
    margin-top: initial;
  }
}
@media (min-width: 768px) and (max-width:1440px) {
    ul.nav.theme-25:not(.nav-tabs) {
      column-gap: 0;
    }
}
@media (max-width: 1440px) {
  .privacy-policy span {
    font-size: 12px;
  }
  .office-address {
    font-size: initial;
  }
}

/****************
* UTILITY CLASS *
****************/
.uppercase {
  text-transform: uppercase;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.d-flex {
  display: flex;
  flex-direction: row;
}
.items-center {
  align-items: center;
}
.text-small {
  font-size: 12px;
}

/**************
* STATIC HERO *
**************/
.hero-caption {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translate(0%, -50%);
  text-align: center;
  color: #FFF;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

@media (max-width: 1024px) {
  .hero-caption {
    gap: 32px;
  }
}

/*****************************
* FLOATING CTA SCROLL BUTTON *
*****************************/
.cta-scroll-wrapper {
  position: fixed;
  bottom: 2rem;
  right: 5rem;
}

@media (max-width: 1440px) {
  .cta-scroll-wrapper {
    right: 24px;
  }
}

.floating-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cta-scroll-btn {
  position: relative;

  border-radius: 50%;
  background-color: var(--primary-color);

  vertical-align: center;
  text-align: center;
  font-size: 16px;
  padding: .75rem 1rem;
  color: #FFF;

  cursor: pointer;
}
.cta-scroll-wrapper:hover  .my-tooltip {
  opacity: 1;
}

.my-tooltip {
  position: absolute;

  /*   The distance between the tooltip and the element to hover over */
  bottom: calc(0);
  left: calc(-10px + -120px);
  transform-origin: top center;

  /*   Set a minimum height for your tooltip, which affects text wrapping */
  min-width: 120px;

  /*   Adding some nice padding */
  padding: 1rem;
  border-radius: 0.4rem;

  background: black;
  color: white;

  opacity: 0;
  transition: opacity 0.2s ease;
}
.arrow-1 {
  width: 80px;
  height: 80px;
  background-color: var(--primary-color);
  opacity: 0.5;
  border-radius: 50%;
  position: absolute;
  left: -15px;
  z-index: -1;
}

/***********
* ABOUT US *
***********/
/* .page-content > .tab-content .tab-pane.active > p.description {
  color: #000;
  font-size: 18px;
} */

/* @media (min-width: 960px) {
  ul.tab.theme-25 li a {
    min-height: 5rem;
  }
} */
@media (max-width: 480px) {
    ul.tab.theme-25 li a {
        min-height: 3rem !important;
    }

  .swipe-25 {
    height: 3rem !important;
  }


  .mobile-widget {
    padding: 0 1rem !important;
  }
}
.tab-content p.description {
  background-color: #FFF;
}
@media (max-width: 480px) {
  .page-content {
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
  }
  .page-content .tab-content:not(.sub) {
      padding: 16px 0 0;
      border-bottom-left-radius: 40px;
      border-bottom-right-radius: 40px;
  }
  #parallax .brand .page-content .tab-content:not(.sub) {
    padding-bottom: initial !important;
  }
  .brand .tab-content p.description{
    background-color: transparent !important;
  }
  img.surya-madistrindo {
    display: block;
    max-width: 100%;
    height: auto;
  }
}
.tab-content .title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
div#tatakelola .tab-content .title {
  align-items: flex-start;
}
.tab-content .title h3:nth-of-type(1) {
  color: #c0a063;
}
.tab-content p.description:not(.px-sm), 
.content-about h3:not(.title-top) {
  padding-bottom: 3rem;
}

@media (max-width:990px) {
  .download,
  .panel-group .panel .parent {
    border-radius: 2rem !important;
  }
  .single-tab .tab {
    background-color: transparent !important;
  }
  div#detail-container {
    /* display: block; */
    padding: 1.5rem;
  }
  .product-detail > .detail-box > h3 {
    padding: 0 2rem;
  }
}
@media (max-width: 1680px) {
  .download.theme-25 {
    width: 60%;
  }
}

@media (max-width: 1024px) {
  .download.theme-25 {
    width: 80%;
    max-width: 100%;
  }
}

@media (max-width: 762px) {
  .download.theme-25 {
    width: inherit !important;

    span.text {
      padding: 8px 24px;
      width: inherit !important;
    }
  }
  .container.csr .row .doc a {
    padding: 8px;
    width: 3rem;
    height: 3rem;
  }
}

.panel.theme-25 {
  border-radius: 1rem;
}

.bg-white {
  background-color: #FFF !important;
}

.overlay__theme-25 {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
}
.overlay__theme-25.black::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("/static/ggtbk/images/Clove-Pattern-Desktop.png");
  background-size: cover;
  z-index: -1; /* Place behind the content */
}
.overlay__theme-25.black {
  background-color: rgba(0, 0, 0, 0.5);
}
.overlay__theme-25.clove-pattern {
  background-image: url("/static/ggtbk/images/Clove-Pattern-Desktop.png");
  background-size: cover;
}
@media (max-width: 480px) {
  .overlay__theme-25.clove-pattern {
    background-image: url("/static/ggtbk/images/Clove-Pattern-Mobile.png") !important;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
  }
  .overlay__theme-25.black::before {
    background-image: url("/static/ggtbk/images/Clove-Pattern-Mobile.png") !important;
  }
  .container.brand {
    padding-left: 1rem;
    padding-right: 1rem;
    min-height: 100vh;
  }
  .option-wrapper {
    padding: 0 !important;
  }
  ul.dropdown__filter {
    padding: 4px 1.5rem;
  }
  ul.dropdown__filter::after {
    top: 40%;
    right: 12px;
  }
  li.dropdown__filter-selected,
  ul.dropdown__select li {
    font-size: initial;
  }
  ul.dropdown__select li {
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
  }
}

.media .page-content,
.karir .page-content,
.kretek .page-content,
.csr .page-content {
  background-image: linear-gradient(#FFF, #FFF);

  .tab-pane, .tab-content {
    background-color: #FFF !important;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
  }
}
/* .container.kretek .tab-content .contents {
  padding-top: 3em !important;
} */

@media (max-width: 991px) {
   .container.about #overview {
    padding-bottom: 0 !important;
   }
   .container.kretek .tab-content .contents {
    padding-left: 0;
    padding-right: 0;
   }
   .detail .tab-content .press-detail {
    padding: 0;
   }
   .box-news .title {
    align-items: flex-start;
   }
  .page-content {
    background-image: linear-gradient(#FFF, #FFF) !important;
    margin: 80px 0 !important;
    padding: 28px 0 !important;
  }
  .tab-content .subtab {
    background-color: #FFF !important;
  } 
  ul.tab.theme-25, ul.tab.theme-25 li a {
    height: 48px;
  }
  #timeline li a .bullet,
  #timeline li.active a .bullet {
    left: 1.6em !important;
  }
}


@media (max-width: 760px) {
  .tab-content p.description {
    padding: 0 .75rem 1.5rem !important;
  }
}

.karir .page-content,
.kontak .page-content,
.csr .page-content {
  ul.nav-tabs li {
    background-color: #FFF !important;
  }
  .tab-pane p {
    background-color: #FFF !important;
  }
}
/* .nav-tabs li.active a {
  font-family: 'futura-condensed-medium', arial, sans !important;
  font-size: 34px;
} */

.brand .page-content.theme-25 {
  background-image: none !important;
  background-color: transparent;
  /* margin-top: calc(3rem + 70px) !important; */
}
.brand .page-content.theme-25 .tab-pane.active p {
  /* padding-top: 2rem !important; */
}
.brand .theme-25 .nav-tabs.tab, 
.brand .theme-25 .nav-tabs.tab li.active {
  background-color: transparent !important;
}
.brand .theme-25 .nav-tabs li a,
.brand .theme-25 .nav-tabs li.active a,
.kontak .nav-tabs li.active a,
.karir .nav-tabs li.active a,
.csr .nav-tabs li.active a  {
  padding: 0;
  font-family: 'futura-condensed-medium', arial, sans;
  font-weight: 500 !important;
  font-size: 42px;
  line-height: 1.75;
}

.brand .tab-content, .brand .tab-content p.description {
  background-color: transparent;
}

@media (max-width: 768px) {
  .option-wrapper {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .dropdown-25 {
    width: 320px;
  }
}

a.brand-title {
    text-transform: uppercase;
}
.bouncing-loader div {
  width: 12px;
  height: 12px;
  background: var(--primary-color);
  border-radius: 50%;
  animation: bounce 0.6s infinite alternate;
}

.bouncing-loader div:nth-child(2) {
  animation-delay: 0.2s;
}
.bouncing-loader div:nth-child(3) {
  animation-delay: 0.4s;
}

@media (max-width: 500px) {
  #detail-container {
    /* align-items: center; */
    grid-template-columns: repeat(10, 1fr);
    padding: 2rem 0 1.5rem !important
  }

  .product-image {
      grid-column: span 4;
      margin: 0 !important;
      align-self: center;
  }

  .product-image > img {
    margin-top: -2rem !important;
    vertical-align: initial !important;
  }

  .product-detail {
    grid-column: span 6;
    width: 90%;
  }

  .detail-box {
    padding-bottom: 10px !important;
  }

  .product-detail .detail-box h3 {
    font-size: 14px !important;
    padding-left: 1rem !important;
    margin: 0 !important;
    font-weight: 600 !important;
  }
  .product-detail > .detail-box > p {
    font-size: 10px !important;
    line-height: initial !important;
    margin-top: -2em !important;
  }
  .brand .page-content.theme-25 .tab-pane.active p {
    padding-top: 0.8rem !important;
  }
  .option-wrapper {
    gap: 0 !important;
  }
  .row.option-wrapper .dropdown-25:first-child {
    margin-right: .25rem !important;
  }
  .row.option-wrapper .dropdown-25:last-child {
    margin-left: .25rem !important;
  }
  ul.dropdown__filter {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important;

    border-radius: 40px !important;
  }
}

@keyframes bounce {
  to {
    transform: translateY(-16px);
  }
}

/* Mobile responsive tweak (optional) */
@media (max-width: 480px) {
  .bouncing-loader div {
    width: 10px;
    height: 10px;
  }
}

/* Data Not Found */
.not-found  {
  display: flex;
  align-items: center;
  justify-content: center;
}

.not-found p {
  text-align: center !important;
  font-size: initial;
}

@media (min-width: 1280px) {
  .not-found  {
    min-height: 100px;
  }
  .container .page-content {
    margin-top: 100px !important;
  }

  /* KONTAK */
  .container.kontak .page-content .tab-content .tab-pane {
    max-width: 84%;
    margin: 0 auto;
  }

  .box-map-kontak {
    ul:not(.dropdown-menu) {
      display: flex !important;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin: 52px 0;

      li.current {
        color: #c6222c;
        cursor: default;

        i {
          color: #c6222c !important;
        }
      }

      li {
        font-family: 'futura-condensed-medium', arial, sans;
        color: gray;

        list-style: none;
        text-transform: uppercase;
        text-align: center;
        /* display: flex !important; */
        padding: 1em 52px 0;
        cursor: pointer;
        width: max-content;

        font-size: 24px;

        i {
          color: transparent;
        }

      }

      li:not(:last-child) {
        border-right: 1px solid #EAEAEA;
      }

      li.custom {
        padding-top: 0;
        margin-top: -12px;

        .btn, .btn:hover {
          color: gray;
          background-color: transparent;
          border: none;
          box-shadow: none;
        }

        button {
          font-family: 'futura-condensed-medium', arial, sans;
          font-size: 24px;
        }

        #faspro {
          ul {
            padding: 10px;

            li {
              border: none;
              font-size: initial;
              padding: 10px 0;
              width: 100%;
              text-align: center;
            }
          }
        }
      }
    }
  }
}

/* Horizontal scroll on mobile */
@media (max-width: 991px) {
  .scroll-tab {
    padding: 0 !important;
    margin: 0 1rem;
    border-radius: 2rem;
  }
  .swipe-25 {
    margin-left: -.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
  }
  .page-content .tab-content:not(.sub) {
      padding: 16px 0 0;
  }
  .tab-content {
    padding: 0 1rem;
  }

  section ol {
    padding: 0 !important;
  }
  .container .tab-content ol > li {
    list-style: none;
  }
  .tab-content .tab-pane.active .row .profile {
    padding: 2rem 0 1rem;
  }
  .tab-pane#sejarah,
  .tab-pane#saham,
  .tab-pane#dividen {
    padding-top: 1.5rem;
  }
  .tab-pane#sejarah p.description {
    padding-bottom: 0 !important;
    background-color: transparent !important;
  }
  /* hide empty content */
  #tatakelola > p:first-child {
    display: none;
  }
  .childtab .active a {
    border-bottom: none !important;
  }
  #perusahaan h3,
  #tata-perusahaan h3 {
    text-align: center !important;
  }
  .download > .text >p {
    padding: 0 !important;
  }
  #hubungikami {
    padding-bottom: 28px;
  }
  form.form-contact > .row {
    margin: 0 1rem 0 !important;
  }
  form.form-contact label,
  .form-control {
    text-transform: none !important;
    font-size: 14px !important;
  }

  .form-contact input,
  .form-contact textarea {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }

  .form-contact .agreement {
    margin-top: 0 !important;
    margin-bottom: 28px;
  }
  #submit_button {
    font-size: 14px;
  }
  #kontak-kami {
    display: none;
  }
  select.select-pane {
    font-size: 14px;
    text-align: center;
    font-weight: 500;
    font-family: 'futura-condensed-medium', arial, sans !important;
  }
}


#kuartal > div > .dropdown.kuartal-dropdown {
  margin-right: -15px !important;
  background-color: var(--primary-color) !important;
  color: #FFF;
  font-family: 'Just Sans', sans-serif;
  font-weight: 600;
  border-radius: 1.25rem;
}

.kuartal-dropdown:not(.open) > .arrow {
  border-top: 10px solid #FFF !important;
}
.kuartal-dropdown.open > .arrow {
  border-bottom: 10px solid #FFF !important;
}

@media (max-width: 640px) {
  .container.investor #saham .row .contents,
  .container.investor #dividen .row .contents,
  .container.investor #rups  .row .contents {
    padding-left: 1em !important;
    padding-right: 1em !important;
  }

  #kuartal .kuartal-dropdown {
    margin: 0 !important;
    margin-top: -0.2em !important;
    width: 100%;
    font-size: initial !important;
  }
  .container.investor #saham #table-saham #kuartal .dropdown.kuartal-dropdown .arrow {
    bottom: 1rem;
  }
  .tab-content > .tab-pane:has(.table) {
    overflow: auto;
  }
  #dividen .contents:has(.table) {
    overflow: auto;
  }
}

@media (min-width: 992px) {
  .dropdown-menu {
    min-width: 180px !important;
    width: 100%;

    li {
      text-align: center;
      a {
        font-size: 20px;
        padding: 8px auto;
      }
    }
  }
  #saham .row:first-child .contents:first-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
.hidden-before {
  /* supaya tidak kelihatan sebelum discroll */
  opacity: 0; 
}
.row.top {
    padding-top:3em !important;
}

/**
* fix product image cropped on hover
*/
.owl-stage-outer {
  padding-top: .5rem;
  padding-bottom: .5rem;
}
@media (max-width: 1024px) {
  #tentang-kami, #our-brand {
    p {
      padding-top: 0 !important;
      padding-bottom: 1.5rem !important;
    }
  }
}

@media (max-width: 760px) {
  .slider-wrapper {
    gap: 0;
  }
  .slide-nav {
    padding-left: 0;
    padding-right: 0;
  }
  .owl-stage-outer {
    padding: 3rem 0 !important;
  }
  
  #tentang-kami, #our-brand {
    padding-bottom: 1rem !important;

    h1 {
      text-align: center;
    }
    p {
      line-height: 1.75 !important;
      padding: 0 15% !important;
      /* font-size: initial !important; */
    }
  }
}

.container.csr {
  margin: 0 auto;
  padding-bottom: 0 !important;
  text-align: justify;
}

/* section p {
  line-height: initial !important;
} */

.karir p.description {
  text-align: justify !important;
  line-height: 1.75em;
}


#kontak-kami > p {
  text-align: inherit !important;
  line-height: 1.75em !important;
}

@media (max-width:780px) {
  p.description {
    line-height: 1.75em !important;
  }

  .brand .tab-content p.description {
    padding-bottom: 4rem !important;
  }

  .slider-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
}


@media (max-width: 500px) {
  .container .tab-content p {
    font-size: 12px;
  }
  .tab-pane#sejarah, .tab-pane#saham, .tab-pane#dividen {
    padding-top: 0;
  }
  .brand .page-content.theme-25 {
    margin-bottom: 0 !important;
    margin-top: 70px !important;
  }

  #parallax > .container .row {
    margin: initial;
  }

  .page-content .tab-content {
    padding: 0;
  }
  /* .tab-pane h4 {
    text-align: initial !important;
  } */
  h3, .h3, h3.title-top {
    font-size: initial !important;
  }
  h3:not(.title-top) {
    margin-top: 0 ;
  }
  h3 > img {
    width: 28px;
    height: 28px;
  
  }
  #timeline {
    display: initial !important;
  }
  #timeline li {
    margin-top: 8px;
  }
  #timeline li a,
  #timeline li.active a {
    font-family: 'futura-condensed-medium', arial, sans !important;
    font-size: 14px;
  }
  .timeline h2.title {
    font-family: 'futura-condensed-medium', arial, sans !important;
    font-size: 20px;
  }

  ul.tab.theme-25 li a {
    padding: initial !important;
    font-size: initial !important;
  }

  .csr p.description {
    margin-bottom: 2rem !important;
  }

  /* .doc .download.theme-25 {
    background-color: lightgray;

    span {
      border-right: 1px solid lightgray !important;
    }
  } */
  .doc .download.theme-25 span > p {
    /* color: #000 !important; */
    font-weight: normal !important;
  }
  .container.csr .tab-content .row {
    margin-left: 2rem !important;
    margin-right: 2rem !important;

    h3 {
      padding-bottom: 1rem !important;
    }
  }

  /* .tab-content p.description {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  } */

  #kontak-kami {
    background-color: transparent !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .not-found {
    margin: 5rem auto;
  }

  #csr > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 1rem;

    .doc {
      margin-bottom: 0;
      padding-bottom: 0;
      border: none;
      
      h3 {
        margin-bottom: 0;
      }
    }
  }

  /* Media */
  .media .navigator.theme-25 {
    padding: 1rem;
    font-size: 10px;
    margin-bottom: 0;
    padding-bottom: 10px;
  }
  .media .navigator.theme-25 div {
    flex: 1
  }
  .media .selector {
    padding-bottom: 10px;
  }
  .media .selector .dropdown {
    display: block;
    padding: 0 12px;
    width: auto;
  }
  .media .selector .dropdown .btn,
  .media .box-top {
    font-size: 12px !important;
    font-weight: 500;
    text-align: left;
  }
  .media .selector .dropdown .btn .arrow {
    top: 10px;
    right: 12px;
  }
  .load-more > a {
    font-size: 14px !important;
  }
  .media .box-news,
  .media .box-archieve,
  .media .box-bottom {
    margin: 0 !important;
    padding: 0 !important;
  }
  .media .box-news h4 {
    margin-left: 0;
    padding-left: 0;
  }
  .media .box-news ul li .latest div a.title {
    padding-top: 0;
  }
}

@media (min-width: 1441px) {
  .row .download .text {
    font-size: 18px;
  }
  .container.investor #keuangan .row .contents .panel-group .panel .collapse li, .container.investor #keuangan .row .contents .panel-group .panel .collapsing li {
    font-size: 18px;
  }
}

.section-25 .load-more > a{
  background-color: var(--primary-color);
  border-radius: 20px;
  color: #FFF;
}

.media .tab-content .box-map-kontak {
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
}


/* Mobile Cta scroll button */
@media (max-width: 480px) {
  .cta-scroll-btn {
    font-size: initial !important;
    padding: .25rem .5rem !important;
  }
  .arrow-1 {
    width: 50px;
    height: 50px;
    left: -9px;
  }
}

@media (max-width: 480px) {
  .my-tooltip {
    min-width: 100px;
    padding: 0.5rem !important;
    border-radius: 0.4rem;
    font-size: 12px;
    left: -106px;
  }
}

@media (max-width: 480px) {
  .container.about #tatakelola #tata-manajemen .tab-content {
    padding-left: 0 !important;
    padding-right: 0 !important;

    h3 {
      text-align: left !important;
    }
  }
}

@media (max-width: 480px) {
  .tab-content > .tab-pane{
    padding-top: 0 !important;
  }
  .tab-pane p:not(.description) {
    padding: 0;
  }
  .container.kretek .tab-content .contents {
    padding-top: 1em !important;
  }
  .kretek .contains p:has("\u00a0") {
    padding: 0 !important;
  }

  #hubungikami p {

  }
}

.media .tab-content .form-contact button {
  padding: .5rem 3rem !important;
  border-radius: 20px;
}
.multiline-truncated-text {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  padding-bottom: 0 !important;
}
input#expanded:checked + p {
  line-clamp: unset;
  -webkit-line-clamp: unset;
}
input#expanded {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}
.read-more { display: none; }
.description-box:has(.multiline-truncated-text.truncated) .read-more { display: block; }

@media (min-width: 1240px) {
  .spacing-lg {
    padding-left: 10rem !important;
    padding-right: 10rem !important;
  }
  .detail-box {
    max-width: 90%;
  }
  #our-brand p {
    max-width: 80%;
  }
  .container.csr {
    margin-top: 100px !important;
    max-width: 87%;
  }
}
/* @media (min-width: 1024px) and (max-width: 1680px) {
  #tentang-kami, #our-brand {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
  }
} */
/**
* VIEW 150%
*/


/** Mobile responsiveness */
@media (max-width: 480px) {
  .zoom-effect {
    animation: zoomin 10s linear forwards;
    transform-origin: center center;
  }
  .hero-background {
    width: 100vw;
    height: 100vh;
    top: 3rem;
  }
  #heroBanner .carousel-inner .active,
  #heroBanner .carousel-inner .next.left,
  #heroBanner .carousel-inner .prev.right {
    margin-top: initial !important;
  }
  #heroBanner .carousel-inner .item img {
    width: 100vw;
  }
  #heroBanner .carousel-inner .item img {
     opacity: 1;
  }
  .tab-pane .description-box p:not(.description), 
  .product-detail > .detail-box label {
    padding-left: 1rem !important;
    font-size: 12px !important;
  }
  .brand .page-content.theme-25 .tab-pane.active p:not(.multiline-truncated-text) {
    padding: .75rem 0 1.5rem !important;
    text-align: justify !important;
  }
  .pt-0 {
    padding-top: 0 !important;
  }
  .px-sm {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .description.px-sm {
    text-align: center !important;
  }
  .container.investor #keuangan .row .contents {
    padding: 1em 0.5rem !important;
  }
  .sticky-section > section > section,
  #parallax > .container {
    max-width: initial;
    /* padding: 2rem; */
  }
}

.kontak .tab-content .box-map-kontak #faspro button {
  text-transform: uppercase;
  font-family: 'futura-condensed-medium', arial, sans !important;
  color: gray !important;
  font-weight: 500;
}

/**
* TABLET PORTRAIT
*/
@media only screen and (orientation: portrait) and (min-width: 780px) {
  #tentang-kami > .container-fluid > .row {
    padding: 4rem 0;
  }

  section#tentang-kami {
    padding-top: 8rem !important;
    padding-bottom: 2rem !important;
  }
  section#our-brand {
    padding-top: 3rem !important;
    padding-bottom: 5rem !important;
  }
  /* .container.about #overview .row p {
    padding-left: 3rem !important;
    padding-right: 3rem !important;
  } */
  .row:has(.timeline-wrapper) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* text-align: center !important; */
  }
  .navbar-header {
    /* padding-right: 1rem !important; */
  }
  .page-content .tab-content:has(#hubungikami) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  #tentang-kami .height-2 {
    max-width: 100% !important;
  }
}

.img-rounded {
  border-radius: 50px;
}

@media (max-width: 1100px) {
  .img-rounded {
    border-radius: 1.5rem;
  }
}

@media (min-width: 1680px) {
  .container {
    width: 1514px;
  }
}

@media (max-width: 991px) { /* adjust as needed for Bootstrap sm breakpoint */
  .single-tab .tab a {
    font-family: 'futura-condensed-medium', arial, sans;
    font-size: 20px;
  }
  #timeline {
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  #timeline li {
    padding-right: 4px;
  }
  #hubungikami p {
    font-size: 12px;
  }
  .container.csr {
    margin-top: 46px;
    padding: 0;
  }
  .tab-content:not(.sub) {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  
}
.container.investor .tab-content #keuangan .row .contents:nth-child(2) {
  background-color: transparent !important;
}
@media (max-width: 480px) {
  #timeline li.active a .bullet {
    top: -8px;
    margin-left: -4px;
  }
}
@media (max-width: 380px) {
  .mobile-widget {
    padding-left: .5rem !important;
    padding-right: .5rem !important;
  }
}
@media (max-width: 480px) {
  #timeline {
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
  }
}
.txt-detail p {
  color: #555 !important;
}
.gallery-item-25{
  display: flex;
  align-items: center;
  justify-content: center;
}
.tab-content p.text-center {
  text-align: center !important;
}

@media (orientation: portrait) and (min-width: 700px) and (max-width: 991px) {
  .scroll-tab ul li {
    width: 480px;
  }
}

/**
* Checkbox mobile
**/
@media (max-width: 990px) {
  .agreement {
    display: flex;
    align-items: center;
  }

  .agreement input {
    margin-top: .8rem !important; /* optional, biar sejajar teks */
  }

  .agreement span {
    margin-left: 1rem;
  }
}

/**
* Responsive iframe (web content)
**/
.iframe-container {
    position: relative; /* Allows absolute positioning for the iframe */
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (9 / 16 = 0.5625) */
    /* Adjust padding-top percentage for different ratios (e.g., 75% for 4:3) */
    height: 0; /* Ensures the padding determines the height */
}

.iframe-container iframe {
    position: absolute; /* Positions the iframe relative to its parent */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Makes the iframe fill the container */
}