@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Space+Grotesk:wght@300..700&display=swap");

:root {
  /* primary brand */
  --color-primaryBrand: #fff100;

  /* primarygray */
  --color-primaryGray100: #acada7;
  --color-primaryGray200: #8d928e;

  /* primarylight */
  --color-primaryLight100: #e3e5dd;
  --color-primaryLight200: #dddfd7;
  --color-primaryLight200-40: rgba(221, 223, 215, 0.4);
  --color-divider-80: rgba(255, 255, 255, 0.8);

  /* secondary brand */
  --color-secondaryBrand: #25292e;
  --color-secondary100: #5f696a;
  --color-secondary200: #2b3036;
  --color-secondary300: #25292e;

  /* white */
  --color-white100: #f5f5f5;
  --color-white200: #f0f0f0;

  /* black */
  --color-black: #2b2a18;

  /* gray */
  --color-gray100: #cfcfcf;

  /* fonts */
  --font-body: "Nunito Sans", sans-serif;
  --font-english: "Space Grotesk", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

:root {
  --wrapper-max-width: 1110px;
  --wrapper-padding-inline: 15px;
}

html {
  font-size: 16px;
}

/* @media only screen and (min-width: 1200px) {
  html {
    font-size: 16px;
  }
} */

body {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.875rem;
  text-rendering: optimizeLegibility;
  color: var(--color-primaryLight200);
  /* overflow-x: hidden; */
  background-color: var(--color-secondary200);
  /* padding-right: 0px !important; */
  /* overflow: visible !important;
   */
}

.navbar-toggler-body {
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  pointer-events: none;
  box-shadow: 0 -4px 24px #23232363;
  will-change: transform, opacity;
}

.navbar-toggler-body.active {
  transform: translateX(0);
  pointer-events: auto;
}

.svg-responsive {
  width: clamp(42px, 8vw, 90px);
  height: clamp(42px, 8vw, 90px);
}

/* rebase */
a {
  text-decoration: none;
}

ul,
ol {
  padding-left: 0;
}

button,
input,
optgroup,
select,
textarea {
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
}

a,
button {
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  text-decoration: none !important;
}

textarea {
  resize: none !important;
}

.proj-header--scroll {
  /* background-color: var(--color-secondary200) !important; */
  background-color: #1f2327 !important;
}

.btn-link {
  font-family: var(--font-english);
  color: var(--color-white100);
  border-bottom: 1px solid var(--color-primaryGray100);
  display: flex;
  align-items: center;
  gap: 2.625rem;
  width: max-content;
  letter-spacing: -0.5px;
}

.btn-link:hover {
  color: var(--color-white100);
  opacity: 0.7;
}

/* size variant button */
.btn-link--sm {
  font-size: 1rem;
  line-height: 1.5rem;
  padding: 0.625rem 0;
  gap: 1.5rem;
}

.btn-link--reg {
  padding: 8px 0;
  font-size: clamp(18px, calc(18px + (2 * ((100vw - 992px) / (1920 - 992)))), 20px);
  line-height: 1.6;
}

.btn-link--md {
  padding: 8px 0;
  font-size: clamp(20px, calc(20px + (4 * ((100vw - 992px) / (1920 - 992)))), 24px);
  line-height: 1.5;
}

.btn-link--lg {
  padding: 8px 0;
  font-size: clamp(24px, calc(24px + (4 * ((100vw - 992px) / (1920 - 992)))), 28px);
  line-height: 1.5;
}

.btn-link--xl {
  padding: 8px 0;
  font-size: clamp(40px, calc(40px + (12 * ((100vw - 992px) / (1920 - 992)))), 52px);
  line-height: 1.5;
}

/* button icon size */
@media only screen and (min-width: 768px) {
  .btn-services-detail {
    background-size: 42px;
  }
}

.btn-link--reg .icon, .btn-link--md .icon  {
  width: clamp(20px, 2vw, 24px);
  height: clamp(20px, 2vw, 24px);
}

.btn-link--lg .icon {
  width: clamp(28px, 4vw, 32px);
  height: clamp(28px, 4vw, 32px);
}

.btn-link--lg .icon, .btn-link--xl .icon {
  width: clamp(32px, 6vw, 42px);
  height: clamp(32px, 6vw, 42px);
}

.btn-icon--lg {
  width: 2.625rem;
  height: 2.625rem;
}

.container-padding {
  width: 100%;
  padding: 0 clamp(0.9375rem, 2vw, 2.625rem);
}

/* text sizes */
.banner-title {
  font-size: clamp(50px, 8vw, 8vw);
  line-height: clamp(60px, 9vw, 9vw);
}

.heading-title {
  font-size: clamp(46px, 5.2vw, 5.2vw);
  line-height: clamp(56px, 6.2vw, 6.2vw);
}

.cta-title {
  font-size: clamp(56px, 7.8vw, 7.8vw);
  line-height: clamp(56px, 8.8vw, 8.8vw);
}

.marquee-text {
  font-size: clamp(48px, 3.788vw + 2.142rem, 4.5rem);
  line-height: clamp(58px, 3.788vw + 2.142rem, 5.125rem);
}

.text40 {
  font-size: clamp(34px, calc(34px + (6 * ((100vw - 992px) / (1920 - 992)))), 40px);
  line-height: clamp(58px, calc(58px + (6 * ((100vw - 992px) / (1920 - 992)))), 64px);
}

.text32 {
  font-size: clamp(28px, calc(28px + (4 * ((100vw - 992px) / (1920 - 992)))), 32px);
  line-height: clamp(44px, calc(44px + (8 * ((100vw - 992px) / (1920 - 992)))), 52px);
}

.text28 {
  font-size: clamp(26px, calc(26px + (2 * ((100vw - 992px) / (1920 - 992)))), 28px);
  line-height: clamp(42px, calc(42px + (4 * ((100vw - 992px) / (1920 - 992)))), 46px);
}

.text24 {
  font-size: clamp(22px, calc(22px + (2 * ((100vw - 992px) / (1920 - 992)))), 24px);
  line-height: clamp(32px, calc(32px + (10 * ((100vw - 992px) / (1920 - 992)))), 42px);
}

.text20 {
  font-size: clamp(18px, calc(18px + (2 * ((100vw - 992px) / (1920 - 992)))), 20px);
  line-height: clamp(32px, calc(32px + (10 * ((100vw - 992px) / (1920 - 992)))), 42px);
}

.text18 {
  font-size: clamp(16px, calc(16px + (2 * ((100vw - 992px) / (1920 - 992)))), 18px);
  line-height: clamp(32px, calc(32px + (10 * ((100vw - 992px) / (1920 - 992)))), 42px);
}

.text16 {
  font-size: clamp(15px, calc(15px + (1 * ((100vw - 992px) / (1920 - 992)))), 16px);
  line-height: 28px;
}

.text14 {
  font-size: clamp(13px, calc(13px + (1 * ((100vw - 992px) / (1920 - 992)))), 14px);
  line-height: 1.2;
}

.text12 {
  font-size: clamp(11px, calc(11px + (1 * ((100vw - 992px) / (1920 - 992)))), 12px);
  line-height: 1.2;
}

.text-outline {
  -webkit-text-stroke: 1px var(--color-secondary100);
  -webkit-text-fill-color: transparent;
}

iframe {
  filter: grayscale(0.8) !important;
  transition: all 0.4 ease-in-out;
  -webkit-filter: grayscale(0.8) !important;
}

select {
  outline: none;
  cursor: pointer;
}

.form-control,
select {
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  outline: none;
}

.form-control.form-control--bg:focus {
  box-shadow: 0 0 0 0.25rem #fffcf529;
  color: var(--color-primary);
}

select,
.form-control.form-control--bg {
  background-color: #25292e;
  border: 1px solid #25292e;
  padding: 1.375rem;
  width: 100%;
}

select:hover,
.form-control.form-control--bg:hover {
  border-color: #666063;
}

.form-group:not(:last-of-type) {
  margin-bottom: 12px;
}

select:focus,
.form-control.form-control--bg:focus {
  box-shadow: 0 0 0 0.25rem #fffcf50a;
}

select,
.form-control.form-control--bg::placeholder {
  color: #acada7;
}

select,
.form-control.form-control--bg {
  color: #acada7;
}

.services-details,
.media-coverage-details {
  display: none;
}

.services-details.open,
.media-coverage-details.open {
  display: block;
}

.btn-services-detail.service-active,
.btn-media-coverage-detail.active {
  background-image: url("../images/icons/icon-less-lg.svg");
}

.btn-services-detail,
.btn-media-coverage-detail {
  background-image: url("../images/icons/icon-more-lg.svg");
  background-size: 2rem;
  background-position: center;
  background-repeat: no-repeat;
}

.filter-img:hover {
  filter: brightness(0) saturate(100%) invert(78%) sepia(91%) saturate(2672%) hue-rotate(1deg) brightness(105%)
    contrast(107%);
}

.proj-tab span,
.proj-tab h4 {
  color: var(--color-primaryGray200);
}

.proj-tab.active span {
  color: var(--color-primary);
}

.proj-tab.active h4 {
  color: var(--color-primaryLight200);
}

@keyframes scroll-text-lr {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.rolling-text {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  white-space: nowrap;
  width: max-content;
  animation: scroll-text-lr 20s linear infinite;
}

@keyframes rotateLogo {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.rotating-logo {
  animation: rotateLogo 10s linear infinite;
}


#left-nav {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

#left-nav::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

.audio-wrapper {
  border-radius: 0 !important;
  display: inline-block;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -ms-border-radius: 0 !important;
  -o-border-radius: 0 !important;
}

audio::-webkit-media-controls-enclosure {
    width:100%;
    background-color:transparent;
    -moz-border-radius: 1px !important;
    -webkit-border-radius: 1px !important;
    border-radius: 1px !important;
    filter: alpha(opacity=80);
    opacity: 0.9;
    margin-bottom:-20px;
    overflow: hidden;
}
audio::-webkit-media-controls-panel {
    background-color: #eee;
    height:32px !important;
}

.lang-dropdown-content {
  display: none;
  position: absolute;
  width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.music-cards {
  display: flex;
  flex-direction: column;
  height: 100%;
}