/* templatemo-topic-listing — REM-based (75% scale ready)
   Convert px -> rem (base 16px). Set html { font-size: 75%; } to achieve 75% visual scale.
*/

/*---------------------------------------
  ROOT VARIABLES
-----------------------------------------*/
:root {
  --white-color:                  #ffffff;

  /* Colors */
  --primary-color:                #81131C;
  --secondary-color:              #4B726D;
  --section-bg-color:             #D7F1ED;
  --custom-btn-bg-color:          #C22630;
  --custom-btn-bg-hover-color:    #81131C;
  --dark-color:                   #81131C;
  --p-color:                      #717275;
  --border-color:                 #7FD1C5;
  --link-hover-color:             #C22630;
  --tertier-color:                #f0c8cb;

  /* Fonts */
  --body-font-family:             'Open Sans', sans-serif;
  --title-font-family:            'Montserrat', sans-serif;

  /* Typography sizes (px -> rem) */
  --h1-font-size:                 3.625rem;   /* 58px */
  --h2-font-size:                 2.875rem;   /* 46px */
  --h3-font-size:                 2rem;       /* 32px */
  --h4-font-size:                 1.75rem;    /* 28px */
  --h5-font-size:                 1.5rem;     /* 24px */
  --h6-font-size:                 1.375rem;   /* 22px */
  --p-font-size:                  1.25rem;    /* 20px */
  --menu-font-size:               1rem;       /* 16px */
  --btn-font-size:                1.125rem;   /* 18px */
  --copyright-font-size:          0.875rem;   /* 14px */

  /* Border radius (px -> rem) */
  --border-radius-large:          6.25rem;    /* 100px */
  --border-radius-medium:         1.25rem;    /* 20px */
  --border-radius-small:          0.625rem;   /* 10px */

  /* Font weights */
  --font-weight-normal:           400;
  --font-weight-medium:           500;
  --font-weight-bold:             600;
  --font-weight-semibold:         600; /* added to match usage */

  /* Small helpers */
  --site-gutter:                  1.875rem;   /* 30px default gutter reference */
}

/* Root scaling control: set in your site to make everything 75% visually */
html {
  font-size: 75%; /* 16px * 0.75 = 12px base => 1rem = 12px visual */
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

/*---------------------------------------
  TYPOGRAPHY
-----------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-family: var(--title-font-family);
  color: var(--dark-color);
}

h1 { font-size: var(--h1-font-size); font-weight: var(--font-weight-bold); }
h2 { font-size: var(--h2-font-size); font-weight: var(--font-weight-bold); }
h3 { font-size: var(--h3-font-size); }
h4 { font-size: var(--h4-font-size); }
h5 { font-size: var(--h5-font-size); }
h6 { font-size: var(--h6-font-size); color: var(--primary-color); }

p, ul, label, .page-link, .copyright-text {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-normal);
}

label { font-size: var(--menu-font-size); padding-left: 0.625rem; }

ul li { font-size: var(--p-font-size); }

/* Links / buttons */
a, button { touch-action: manipulation; transition: all 0.3s; }
a { display:inline-block; color: var(--tertier-color); text-decoration:none; }
a:hover { color: var(--link-hover-color); }
b, strong { font-weight: var(--font-weight-bold); }

/*---------------------------------------
  SECTIONS & LAYOUT
-----------------------------------------*/
.section-padding { padding-top: 6.25rem; padding-bottom: 6.25rem; } /* 100px */
.section-bg { background-color: var(--section-bg-color); }

.section-overlay {
  background-image: linear-gradient(15deg, #81131C 0%, #4B726D 100%);
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0.85;
}
.section-overlay + .container { position: relative; }

.tab-content { background: var(--white-color); border-radius: var(--border-radius-medium); }

.nav-tabs {
  border-bottom: 0.0625rem solid #ecf3f2; /* 1px */
  margin-bottom: 2.5rem; /* 40px */
  justify-content: center;
}
.nav-tabs .nav-link {
  border-radius: 0;
  vertical-align: middle;
  color: var(--p-color);
  font-family: var(--title-font-family);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-medium);
  padding: 0.9375rem 1.5625rem; /* 15px 25px */
  transition: all 0.3s;
}
.nav-tabs .nav-link:first-child { margin-right: 1.25rem; } /* 20px */
.nav-tabs .nav-link.active,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover { color: var(--primary-color); border-bottom-color: var(--primary-color); }

/*---------------------------------------
  ICONS & BUTTONS
-----------------------------------------*/
.custom-icon { color: var(--secondary-color); }

.custom-btn {
  background: var(--custom-btn-bg-color);
  border: 0.125rem solid transparent;
  border-radius: var(--border-radius-large);
  color: var(--white-color);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-semibold);
  line-height: normal;
  transition: all 0.3s;
  padding: 0.625rem 1.25rem; /* 10px 20px */
}
.custom-btn:hover { background: var(--custom-btn-bg-hover-color); color: var(--white-color); }

.custom-border-btn {
  background: transparent; border: 0.125rem solid var(--custom-btn-bg-color);
  color: var(--custom-btn-bg-color);
}
.custom-border-btn:hover { background: var(--custom-btn-bg-color); color: var(--white-color); }

.custom-btn-bg-white { border-color: var(--white-color); color: var(--white-color); }

/*---------------------------------------
  SITE HEADER
-----------------------------------------*/
.site-header {
  background-image: linear-gradient(15deg, #81131C 0%, #4B726D 100%);
  padding-top: 9.375rem;  /* 150px */
  padding-bottom: 5rem;   /* 80px */
}
.site-header .container { height: 100%; }
.breadcrumb-item+.breadcrumb-item::before,
.breadcrumb-item a:hover,
.breadcrumb-item.active { color: var(--white-color); }

.site-header .custom-icon { color: var(--white-color); font-size: var(--h4-font-size); }
.site-header .custom-icon:hover { color: var(--secondary-color); }

/*---------------------------------------
  NAVIGATION
-----------------------------------------*/
.sticky-wrapper { position: absolute; top: 0; left: 0; right: 0; }

.sticky-wrapper.is-sticky .navbar { background-color: var(--white-color); opacity: 0.8; }

.navbar {
  background: transparent;
  border-bottom: 0.0625rem solid rgba(128,208,199,0.35); /* 1px */
  z-index: 100;
}

.navbar-brand, .navbar-brand:hover {
  font-size: var(--h3-font-size); font-weight: var(--font-weight-bold); display:block;
}
.navbar-brand span { font-family: var(--title-font-family); }

.navbar-expand-lg .navbar-nav .nav-link {
  border-radius: var(--border-radius-large);
  margin: 0.625rem; /* 10px */
  padding: 0.625rem; /* 10px */
}

.navbar-nav .nav-link {
  display:inline-block; color: var(--white-color);
  font-family: var(--title-font-family);
  font-size: var(--menu-font-size);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase; letter-spacing: 0.5px;
  position: relative;
  padding-top: 0.9375rem; padding-bottom: 0.9375rem;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link:hover { color: var(--primary-color); }

.navbar .dropdown-menu {
  background: var(--white-color);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
  border: 0;
  display: inherit;
  opacity: 0;
  min-width: 9rem; /* 144px */
  margin-top: 1.25rem; /* 20px */
  padding: 0.8125rem 0 0.625rem 0; /* 13px 0 10px */
  transition: all 0.3s;
  pointer-events: none;
}
.navbar .dropdown-menu::before {
  content:""; width: 0; height: 0;
  border-left: 1.25rem solid transparent; /* 20px */
  border-right: 1.25rem solid transparent; /* 20px */
  border-bottom: 0.9375rem solid var(--white-color); /* 15px */
  position: absolute; top: -0.625rem; left: 0.625rem;
}

.navbar .dropdown-item {
  display:inline-block; color: var(--p-color);
  font-family: var(--title-font-family); font-size: var(--menu-font-size);
  font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.5px;
}

.navbar .dropdown-item:focus, .navbar .dropdown-item:hover { color: var(--primary-color); background: transparent; }

.navbar .dropdown-toggle::after {
  content: "\f282";
  display:inline-block;
  font-family: bootstrap-icons !important;
  font-size: var(--copyright-font-size);
  position: relative; left: 0.125rem; /* 2px */
  border: 0;
}

/* show dropdown on hover for large screens */
@media screen and (min-width: 992px) {
  .navbar .dropdown:hover .dropdown-menu { opacity:1; margin-top: 0; pointer-events: auto; }
}

.navbar-icon {
  background: var(--white-color);
  border-radius: var(--border-radius-large);
  display:inline-block; font-size: var(--h5-font-size);
  width: 2.5rem; height: 2.5rem; line-height: 2.5rem; text-align:center;
  transition: all 0.3s ease;
}
.navbar-icon:hover { background: var(--primary-color); color: var(--white-color); }

.navbar-toggler {
  border: 0; padding: 0; cursor:pointer; margin: 0;
  width: 1.875rem; height: 2.1875rem; /* 30px x 35px */
  outline: none;
}
.navbar-toggler:focus { outline:none; box-shadow:none; }

.navbar-toggler .navbar-toggler-icon {
  background: var(--white-color);
  transition: background 10ms 300ms ease; display:block;
  width: 1.875rem; height: 0.125rem; position: relative;
}
.navbar-toggler .navbar-toggler-icon::before,
.navbar-toggler .navbar-toggler-icon::after {
  position:absolute; right:0; left:0; background: var(--white-color);
  width: 1.875rem; height: 0.125rem; content: '';
}
.navbar-toggler .navbar-toggler-icon::before { top: -0.5rem; } /* -8px */
.navbar-toggler .navbar-toggler-icon::after  { top: 0.5rem; } /* 8px */

/*---------------------------------------
  HERO
-----------------------------------------*/
.hero-section {
  background-image: linear-gradient(15deg, #81131C 0%, #4B726D 100%);
  position: relative; overflow: hidden;
  padding-top: 9.375rem; /*150px*/ padding-bottom: 4.6875rem; /*75px*/
}

.hero-section .input-group {
  background-color: var(--white-color);
  border-radius: var(--border-radius-large);
  padding: 0.625rem 0.9375rem; /* 10px 15px */
}

.hero-section .input-group-text { background-color: transparent; border: 0; }

.hero-section input[type="search"] {
  border:0; box-shadow:none; margin-bottom:0; padding-left:0;
}
.hero-section button[type="submit"] {
  background-color: var(--primary-color); border:0; border-radius: var(--border-radius-large) !important;
  color: var(--white-color); max-width: 9.375rem; /*150px*/
}

/*---------------------------------------
  FEATURED / TOPICS
-----------------------------------------*/
.featured-section {
  background-color: var(--secondary-color);
  border-radius: 0 0 6.25rem 6.25rem; /* 100px */
  padding-bottom: 6.25rem; /*100px*/
}
.featured-section .row { position: relative; bottom: 6.25rem; margin-bottom: -6.25rem; }

.custom-block {
  border-radius: var(--border-radius-medium);
  position: relative; overflow: hidden;
  padding: 1.875rem; /*30px*/
  transition: all 0.3s ease;
  height: 100%;
}
.custom-block:hover { background-color: var(--secondary-color); transform: translateY(-0.1875rem); } /* -3px */

.custom-block > a { width: 100%; }

.custom-block-image {
  display:block; width:100%; height:12.5rem; /*200px*/
  object-fit: cover; margin-top: 2.1875rem; /*35px*/
}
.custom-block .rounded-pill {
  border-radius: 0.3125rem !important; display:flex; justify-content:center;
  text-align:center; width: 1.875rem; height:1.875rem; line-height:1.25rem; /*30px x30px*/
}

.custom-block-overlay {
  height:100%; min-height:21.875rem; /*350px*/ padding:0;
}
.custom-block-overlay > a { height:100%; }
.custom-block-overlay .custom-block-image {
  border-radius: var(--border-radius-medium); display:block; height:100%; margin-top:0;
}

.custom-block-overlay-text { position:absolute; z-index:2; top:0; right:0; left:0; padding:1.875rem; } /*30px*/

.social-share {
  position:absolute; bottom:0; right:0; left:0; z-index:2; padding:1.25rem 2.1875rem; /*20px 35px*/
}
.social-share .bi-bookmark { color: var(--white-color); font-size: var(--h5-font-size); }
.social-share .bi-bookmark:hover { color: var(--secondary-color); }

/* Background color badges */
.bg-design { background-color: #00B0FF; }
.bg-graphic { background-color: #00BFA6; }
.bg-advertising { background-color: #F50057; }
.bg-finance { background-color: #536DFE; }
.bg-music { background-color: #F9A826; }
.bg-education { background-color: #00BFA6; }

/*---------------------------------------
  TOPICS DETAIL / LISTING
-----------------------------------------*/
.topics-detail-block { border-radius: var(--border-radius-medium); position: relative; overflow:hidden; }

.topics-detail-block-image { display:block; border-radius: var(--border-radius-medium); }

blockquote {
  background-color: var(--section-bg-color);
  border-radius: var(--border-radius-small);
  font-family: var(--title-font-family);
  font-size: var(--h4-font-size);
  font-weight: var(--font-weight-bold);
  display:inline-block; text-align:center; margin:1.875rem; padding:2.5rem; /*40px*/
}

.topics-listing-page .site-header { padding-bottom: 4.0625rem; } /* 65px */

.custom-block-topics-listing-info { margin:1.875rem 1.25rem 1.25rem 1.875rem; } /*30px 20px 20px 30px*/
.custom-block-topics-listing { height: inherit; }
.custom-block-topics-listing .custom-block-image { width: 12.5rem; } /*200px*/

/*---------------------------------------
  PAGINATION
-----------------------------------------*/
.pagination { margin-top: 2.5rem; } /*40px*/
.page-link {
  border: 0;
  border-radius: var(--border-radius-small);
  color: var(--p-color);
  font-family: var(--title-font-family);
  margin: 0 0.3125rem; /*5px*/
  padding: 0.625rem 1.25rem; /*10px 20px*/
}
.page-link:hover,
.page-item:first-child .page-link:hover,
.page-item:last-child .page-link:hover {
  background-color: var(--secondary-color); color: var(--white-color);
}
.page-item:first-child .page-link { margin-right: 0.625rem; }
.page-item:first-child .page-link,
.page-item:last-child .page-link { background-color: var(--section-bg-color); }

.active > .page-link, .page-link.active {
  background-color: var(--secondary-color); border-color: var(--secondary-color);
}

/*---------------------------------------
  TIMELINE
-----------------------------------------*/
.timeline-section {
  background-image: url('../images/colleagues-working-cozy-office-medium-shot.jpg');
  background-repeat:no-repeat; background-position:center; background-size:cover; position:relative;
}

.timeline-container .vertical-scrollable-timeline { list-style-type:none; position:relative; padding-left:0; }

.timeline-container .vertical-scrollable-timeline .list-progress {
  width: 0.5rem; height: 87%;
  background-color: var(--primary-color);
  position: absolute; left: 3.25rem; /* 52px */
  top: 0; overflow: hidden;
}
.timeline-container .vertical-scrollable-timeline .list-progress .inner {
  position:absolute; right:0; bottom:0; height:100%; background-color: var(--secondary-color); width:100%;
}

.timeline-container .vertical-scrollable-timeline li {
  position: relative; padding: 1.25rem 0 4.0625rem 9.0625rem; /* 20px 0 65px 145px */
}
.timeline-container .vertical-scrollable-timeline li:last-child { padding-bottom:0; }
.timeline-container .vertical-scrollable-timeline li p { line-height: 2.5rem; }
.timeline-container .vertical-scrollable-timeline li p:last-child { margin-bottom:0; }

.timeline-container .vertical-scrollable-timeline li .icon-holder {
  position:absolute; left:0; top:0; width:6.5rem; height:6.5rem; /*104px*/
  display:flex; justify-content:center; align-items:center;
  background-color: var(--secondary-color); border-radius:50%; z-index:1; transition:0.4s all;
}
.timeline-container .vertical-scrollable-timeline li .icon-holder::before {
  content:""; width:5rem; height:5rem; border:0.25rem solid #fff; position:absolute; background-color: var(--secondary-color);
  border-radius:50%; z-index:-1; transition:0.4s all;
}
.timeline-container .vertical-scrollable-timeline li .icon-holder i { font-size: 1.5625rem; color: var(--white-color); } /*25px*/

.timeline-container .vertical-scrollable-timeline li::before {
  content:""; position:absolute; height:100%; width:0.5rem; background-color: transparent; left:3.25rem; z-index:0;
}

.timeline-container .vertical-scrollable-timeline li.active .icon-holder { background-color: var(--primary-color); }
.timeline-container .vertical-scrollable-timeline li.active .icon-holder::before { background-color: var(--primary-color); }

/*---------------------------------------
  FAQ
-----------------------------------------*/
.faq-section .accordion-item { border: 0; }
.faq-section .accordion-button { font-size: var(--h6-font-size); font-weight: var(--font-weight-semibold); }
.faq-section .accordion-item:first-of-type .accordion-button { border-radius: var(--border-radius-large); }
.faq-section .accordion-button:not(.collapsed) { border-radius: var(--border-radius-large); box-shadow:none; color: var(--primary-color); }
.faq-section .accordion-body { color: var(--p-color); font-size: var(--btn-font-size); line-height: 2.5rem; }

/*---------------------------------------
  NEWSLETTER
-----------------------------------------*/
.newsletter-image { border-radius: var(--border-radius-medium); }

/*---------------------------------------
  CONTACT
-----------------------------------------*/
.google-map { border-radius: var(--border-radius-medium); }
.contact-form .form-floating > textarea { border-radius: var(--border-radius-medium); height: 9.375rem; } /*150px*/

/*---------------------------------------
  SUBSCRIBE FORM
-----------------------------------------*/
.subscribe-form-wrap { padding: 3.125rem; } /*50px*/
.subscribe-form { width: 95%; }

/*---------------------------------------
  CUSTOM FORM
-----------------------------------------*/
.custom-form .form-control {
  border-radius: var(--border-radius-large);
  color: var(--p-color);
  margin-bottom: 1.5rem; /*24px*/
  padding-top: 0.8125rem; padding-bottom: 0.8125rem; padding-left: 1.25rem; /*13px,13px,20px*/
  outline: none;
}
.form-floating > label { padding-left: 1.25rem; }
.custom-form button[type="submit"] {
  background: var(--custom-btn-bg-color); border:none; border-radius: var(--border-radius-large);
  color: var(--white-color); font-family: var(--title-font-family);
  font-size: var(--p-font-size); font-weight: var(--font-weight-semibold);
  transition: all 0.3s; margin-bottom:0;
}
.custom-form button[type="submit"]:hover,
.custom-form button[type="submit"]:focus {
  background: var(--custom-btn-bg-hover-color); border-color: transparent;
}

/*---------------------------------------
  SITE FOOTER
-----------------------------------------*/
.site-footer {
  border-bottom: 0.625rem solid var(--secondary-color); /*10px*/
  position: relative;
}
.site-footer::after {
  content:""; position:absolute; bottom:0; right:0; width:0; height:0;
  border-style: solid; border-width: 0 0 12.5rem 12.5rem; /* 200px -> 12.5rem */
  border-color: transparent transparent var(--secondary-color) transparent;
  pointer-events: none;
}
.site-footer-title { color: var(--primary-color); }
.site-footer .dropdown-menu { padding: 0; }
.site-footer .dropdown-item {
  color: var(--p-color); font-size: var(--menu-font-size); font-weight: var(--font-weight-medium);
  padding: 0.25rem 1.125rem; /*4px 18px*/
}
.site-footer .dropdown-item:hover { background-color: transparent; color: var(--primary-color); }
.site-footer .dropdown-menu li:first-child .dropdown-item { padding-top: 0.625rem; } /*10px*/
.site-footer .dropdown-menu li:last-child .dropdown-item { padding-bottom: 0.75rem; } /*12px*/

.site-footer .dropdown-toggle { background-color: var(--secondary-color); border-color: var(--white-color); }
.site-footer .dropdown-toggle:hover { background-color: var(--primary-color); border-color: transparent; }

.site-footer-links { padding-left: 0; }
.site-footer-link-item { display:block; list-style:none; line-height: normal; }
.site-footer-link { 
  color: var(--secondary-color); 
  font-size: var(--copyright-font-size); 
  font-weight: var(--font-weight-medium); 
  line-height: normal;
  vertical-align: middle;
  display:inline-block; 
  padding: 0.3125rem 0; /*5px*/
}

.copyright-text { font-size: var(--copyright-font-size); }

/*---------------------------------------
  SOCIAL ICONS
-----------------------------------------*/
.social-icon { margin:0; padding:0; }
.social-icon-item { list-style:none; display:inline-block; vertical-align: top; }
.social-icon-link {
  background: var(--secondary-color); border-radius: var(--border-radius-large);
  color: var(--white-color); font-size: var(--copyright-font-size);
  display:block; margin-right: 0.625rem; /*10px*/
  text-align:center; width: 2.1875rem; height: 2.1875rem; line-height: 2.25rem; /*35px x 35px */
  transition: background 0.2s, color 0.2s;
}
.social-icon-link:hover { background: var(--primary-color); color: var(--white-color); }

/*---------------------------------------
  HORIZONTAL SCROLL / CUSTOM CREATIVE
-----------------------------------------*/
.horizontal-scroll-wrapper {
  overflow-x:auto; padding-bottom:1.25rem; /*20px*/
  display:flex;
}
.scroll-item {
  width: 16.25rem; /*260px*/
  flex-shrink: 0; margin-right: 1.25rem; /*20px*/
}
.scroll-item:last-child { margin-right: 0; }

.horizontal-scroll-wrapper::-webkit-scrollbar { height: 0.5rem; } /*8px*/
.horizontal-scroll-wrapper::-webkit-scrollbar-track { background: var(--section-bg-color); border-radius: 0.625rem; } /*10px*/
.horizontal-scroll-wrapper::-webkit-scrollbar-thumb { background: var(--secondary-color); border-radius: 0.625rem; }
.horizontal-scroll-wrapper::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }

/*---------------------------------------
  ARTIST PROFILE / HOVER EFFECTS
-----------------------------------------*/
.artist-profile-frame {
  width: 8.125rem; height: 8.125rem; /*130px*/
  border-radius: 50%; object-fit: cover; border: 0.25rem solid var(--white-color); /*4px*/
  box-shadow: 0 0.25rem 0.625rem rgba(0,0,0,0.1); transition: transform 0.3s;
}
.artist-profile-frame:hover { transform: scale(1.1); }

.artist-scroll-item { flex-shrink:0; margin-right: 1.875rem; text-align:center; } /*30px*/

.artist-wrapper {
  position: relative; display:flex; flex-direction:column; align-items:center;
  margin-right: 1.25rem; transition: z-index 0s 0.3s;
}
.artist-wrapper:hover { z-index: 10; transition: z-index 0s; }

/* force image front */
.artist-profile-frame {
  position: relative !important; z-index: 2 !important; background-color: #fff;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.artist-default-name {
  margin-top: 0.9375rem; text-align:center; color: var(--dark-color);
  font-weight: 600; font-size: 1.1rem; transition: opacity 0.2s;
}

.artist-info-card {
  position: absolute; left: 4.0625rem; /*65px*/
  top: 4.0625rem; transform: translateY(-50%);
  width: 0; height: 6.875rem; /*110px*/
  background: rgba(0,0,0,0.85);
  border-top-right-radius: 3.75rem; border-bottom-right-radius: 3.75rem; /*60px*/
  z-index: 1 !important; overflow:hidden; opacity:0;
  transition: all 0.4s ease-in-out;
  display:flex; flex-direction:column; justify-content:center; padding-left:0; pointer-events:none;
}
.artist-info-content { width: 17.5rem; padding-right:1.25rem; color:white; white-space:normal; } /* 280px -> 17.5rem */

/* Hover triggers */
.artist-wrapper:hover .artist-profile-frame { transform: scale(1.1); }
.artist-wrapper:hover .artist-info-card { width: 21.875rem; /*350px*/ opacity:1; padding-left:5rem; } /*80px -> 5rem*/
.artist-wrapper:hover .artist-default-name { opacity:0; }

/*---------------------------------------
  ARTWORK & IMAGE WRAPS
-----------------------------------------*/
.artwork-frame { border-radius: var(--border-radius-large); overflow:hidden; line-height:0; margin-bottom: 2rem; } /*32px -> 2rem */
.custom-block-image-wrap { width:100%; aspect-ratio: 1 / 1; border-radius: 1.25rem; margin-bottom:0; } /*20px*/
.custom-block-image-wrap > img { width:100%; height:100%; object-fit: cover; object-position:center; display:block; }

/* overlay */
.artwork-overlay {
  position:absolute; bottom:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.6);
  display:flex; align-items:center; justify-content:center; padding:1.25rem;
  transform: translateY(100%); transition: transform 0.3s ease-in-out;
}
.custom-block-image-wrap:hover .artwork-overlay { transform: translateY(0%); }

.artwork-overlay-text {
  color: var(--white-color); font-size: 0.875rem; text-align:center;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical;
}

/* bold title in .p-3 */
.custom-block .p-3 .fw-bold { font-weight: var(--font-weight-bold); color: var(--dark-color); }

/* full-card link behavior */
.custom-block-link { text-decoration:none; transition: all 0.3s; }
.custom-block-link:hover .custom-block { transform: translateY(-0.3125rem); box-shadow: 0 0.625rem 1.25rem rgba(0,0,0,0.1); } /* -5px -> 0.3125rem*/

/*---------------------------------------
  CUSTOM EVENT / PINNED
-----------------------------------------*/
.pinned.custom-block-overlay {
  position: sticky; top: 6.25rem; /*100px*/ max-height: 31.25rem; /*500px*/ z-index:3;
}
.pinned.custom-block-overlay .custom-block-image { height:100%; object-fit:cover; }

.custom-block-topics-listing .custom-block-image {
  border-radius: var(--border-radius-large);
  border-top-left-radius: var(--border-radius-large);
  border-top-right-radius: var(--border-radius-large);
}

/* Event card overrides */
.event-card .custom-block-image { border-radius: var(--border-radius-large); }
.event-card-badge { position:absolute; top:0.9375rem; right:0.9375rem; z-index:2; } /*15px*/

/* pinned badge styling */
.pinned .custom-block-overlay-text .badge {
  font-size: 0.875rem; padding: 0.5rem 0.75rem; height: fit-content; flex-shrink:0;
}

/* pinned description clamp */
.pinned-description {
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
}

/*---------------------------------------
  CUSTOM PROFILE FORM STYLING (file input fixes)
-----------------------------------------*/
.custom-form .form-control { border-radius: var(--border-radius-large); }
.custom-form input[type="file"]::file-selector-button {
  background: var(--custom-btn-bg-color); border: 0.125rem solid transparent;
  border-radius: var(--border-radius-large); color: var(--white-color);
  font-family: var(--title-font-family); font-weight: var(--font-weight-bold);
  padding: 0.625rem 1.25rem; margin-right: 0.9375rem; transition: all 0.3s; cursor:pointer;
}
.custom-form input[type="file"]::file-selector-button:hover {
  background: var(--custom-btn-bg-hover-color); color: var(--white-color);
}

/*---------------------------------------
  RESPONSIVE STYLES
-----------------------------------------*/
@media screen and (max-width: 991px) {
  h1 { font-size: 3rem; }   /* 48px -> 3rem */
  h2 { font-size: 2.25rem; } /* 36px -> 2.25rem */
  h3 { font-size: 2rem; }    /* 32px -> 2rem */
  h4 { font-size: 1.75rem; } /* 28px -> 1.75rem */
  h5 { font-size: 1.25rem; } /* 20px -> 1.25rem */
  h6 { font-size: 1.125rem; } /* 18px -> 1.125rem */

  .section-padding { padding-top: 3.125rem; padding-bottom: 3.125rem; } /* 50px */
  .navbar { background-color: var(--secondary-color); }

  .navbar-nav .dropdown-menu {
    position: relative; left: 0.625rem; opacity:1; pointer-events:auto;
    max-width: 9.6875rem; /*155px*/ margin-top: 0.625rem; margin-bottom: 0.9375rem;
  }

  .navbar-expand-lg .navbar-nav { padding-bottom: 1.25rem; }
  .navbar-expand-lg .navbar-nav .nav-link { padding: 0; }

  .nav-tabs .nav-link:first-child { margin-right: 0.3125rem; }
  .nav-tabs .nav-link { font-size: var(--copyright-font-size); padding: 0.625rem; }

  .featured-section { border-radius: 0 0 5rem 5rem; padding-bottom: 3.125rem; } /*80px->5rem 50px*/
  .custom-block-topics-listing .custom-block-image { width: auto; }

  .custom-block-topics-listing > .d-flex,
  .custom-block-topics-listing-info,
  .custom-block-topics-listing a { flex-direction: column; }

  .timeline-container .vertical-scrollable-timeline .list-progress { height: 75%; }
  .timeline-container .vertical-scrollable-timeline li { padding-left: 8.4375rem; } /*135px*/

  .subscribe-form-wrap { padding-top: 1.875rem; padding-bottom: 0; }
}

@media screen and (max-width: 480px) {
  h1 { font-size: 3rem; }   /*36px -> 3rem */
  h2 { font-size: 1.75rem; } /*28px -> 1.75rem */
  h3 { font-size: 1.625rem; } /*26px -> 1.625rem */
  h4 { font-size: 1.375rem; } /*22px -> 1.375rem */
  h5 { font-size: 1.25rem; }  /*20px -> 1.25rem */
}

/*---------------------------------------
  CUSTOM SCROLL ALIGNMENT (duplicate removal kept)
-----------------------------------------*/
.horizontal-scroll-wrapper { display:flex; overflow-x:auto; padding-bottom:1.25rem; }
.horizontal-scroll-wrapper.justify-content-end { justify-content: flex-end; }

/*---------------------------------------
  ARTWORK HOVER & IMAGE FIX
-----------------------------------------*/
/* Already set above with custom-block-image-wrap & artwork-overlay */

/*---------------------------------------
  CUSTOM ARTWORK SHOW PAGE
-----------------------------------------*/
.artwork-frame { border-radius: var(--border-radius-large); overflow:hidden; line-height:0; margin-bottom:2rem; }

/*---------------------------------------
  CUSTOM EVENT CARD STYLES (additional)
-----------------------------------------*/
.event-card .custom-block-image { border-radius: var(--border-radius-large); }
.event-card-badge { position:absolute; top: 0.9375rem; right: 0.9375rem; z-index:2; }

/*---------------------------------------
  FINAL TWEAKS
-----------------------------------------*/
/* Utility small sizes */
.small-1px { border-width: 0.0625rem; } /* 1px */
.sm-space { padding: 0.3125rem; } /*5px*/
.md-space { padding: 0.625rem; } /*10px*/

/* ============================================================
   CREATIVE SECTION — MOBILE FIXES
   ============================================================ */
@media (max-width: 991px) {

    /* Force Creative Titles (Lukisan / Craft) to be centered on mobile */
    #section_4 h3 {
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    /* Container for scroll */
    .horizontal-scroll-wrapper {
        overflow-x: auto !important;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        padding-bottom: 10px;
    }

    .horizontal-scroll-wrapper::-webkit-scrollbar {
        display: none;
    }

    .horizontal-scroll-wrapper .d-flex {
        gap: 15px !important;
        padding: 10px 0 !important;
    }

    .scroll-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    /* Make items smaller for mobile */
    .scroll-item .custom-block {
        width: 220px !important;
    }

    /* Fix reversed row for "Craft" so it stacks vertically */
    #section_4 .row .order-md-1,
    #section_4 .row .order-md-2 {
        order: initial !important;
        text-align: center !important;
    }
}


/* ============================================================
   ARTIST ARTWORK SECTION — MOBILE FIXES
   ============================================================ */
@media (max-width: 991px) {

    /* Make every artist row become vertical */
    .artist-row,
    .row.mb-5.pb-lg-5.align-items-center {
        display: block !important;
    }

    /* Artist image and name centered */
    .artist-profile-frame {
        margin: 0 auto !important;
        display: block;
    }

    .row h4 {
        text-align: center !important;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    /* Move artwork scroller below the artist image in all cases */
    .row .col-lg-10,
    .row .col-md-9,
    .row .col-12 {
        text-align: center !important;
    }

    /* Horizontal scroll consistent for artist items */
    .horizontal-scroll-wrapper {
        overflow-x: auto !important;
        overflow-y: hidden;
        white-space: nowrap;
        scroll-snap-type: x proximity;
    }

    .horizontal-scroll-wrapper .d-flex {
        gap: 25px !important;
        padding: 15px 0 !important;
    }

    /* Artwork cards smaller for mobile */
    .scroll-item .custom-block {
        width: 220px !important;
    }

    /* Full block clickable */
    a.custom-block-link {
        display: inline-block;
    }
}

/* ============================================================
   EVENTS SECTION — MOBILE FIXES (max-width: 991px)
   ============================================================ */
@media (max-width: 991px) {

    /* Force every column to center its child
    #section_3 .row > [class*="col-"] {
        display: flex !important;
        justify-content: center !important;
    } */

    #section_3 .event-card {
    margin-left: auto !important;
    margin-right: auto !important;
    }


    /* Center entire card block */
    #section_3 .custom-block,
    #section_3 .event-card,
    #section_3 .custom-block-overlay {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Center content inside event cards */
    #section_3 .event-card,
    #section_3 .custom-block-overlay-text,
    #section_3 .custom-block {
        text-align: center !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Center the Learn More button */
    #section_3 .event-card .btn,
    #section_3 .custom-block-overlay-text .btn {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Center text elements */
    #section_3 h3,
    #section_3 h5,
    #section_3 p {
        text-align: center !important;
    }

    /* Badge for small event cards */
    .event-card-badge {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        transform: none !important;
        margin: 0 !important;
        z-index: 20;
    }

    /* Badge on pinned (big) event */
    .custom-block-overlay-text .badge {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        z-index: 20;
    }

    /* Center pinned event text layout */
    .custom-block-overlay-text .d-flex {
        flex-direction: column !important;
        align-items: center !important;
    }

    .custom-block-overlay-text p,
    .custom-block-overlay-text h3 {
        text-align: center !important;
        width: 100%;
    }
}

/* Fix mobile overflow causing right gap */
html, body {
    overflow-x: hidden !important;
}

/* Ensure rows do not exceed viewport */
#section_3 .row {
    margin-right: 0 !important;
    margin-left: 0 !important;
    overflow-x: hidden !important;
}

/* Ensure columns don't force extra width */
/* #section_3 .row > [class*="col-"] {
    max-width: 100% !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
} */

/* Badge no longer pushes card wider */
.event-card-badge {
    right: 10px !important;
    top: 10px !important;
}

@media (max-width: 991px) {
    #section_3 .row > [class*="col-"] {
        max-width: 100% !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        justify-content: center !important;
        display: flex !important;
    }
}

.reverse-row {
    flex-direction: row-reverse;
    /* direction: rtl; */
}