/**
* Template Name: Workfolio
* Template URL: https://bootstrapmade.com/workfolio-bootstrap-portfolio-template/
* Updated: Jun 09 2026 with Bootstrap v5.3.8
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Inter",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Poppins",  sans-serif;
  --nav-font: "Inter",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #0a1020; /* Background color for the entire website, including individual sections */
  --default-color: #aeb9cc; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #ffffff; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #38bdf8; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #192134; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #aeb9cc;  /* The default color of the main navmenu links */
  --nav-hover-color: #38bdf8; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #0a1020; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #0a1020; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #aeb9cc; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #38bdf8; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #0f1626;
  --surface-color: #18203a;
}

.dark-background {
  --background-color: #06080f;
  --default-color: #aeb9cc;
  --heading-color: #ffffff;
  --surface-color: #10172a;
  --contrast-color: #06121f;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--default-color) 8%, transparent);
  padding: 14px 0;
  transition: all 0.4s ease;
  z-index: 997;
}

.header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: linear-gradient(90deg, var(--accent-color), #f06cae);
  animation: header-topbar-glow 2.4s ease-in-out infinite;
}

@keyframes header-topbar-glow {
  0%, 100% {
    box-shadow: 0 0 2px color-mix(in srgb, var(--accent-color) 50%, transparent);
    opacity: 0.85;
  }
  50% {
    box-shadow: 0 0 6px var(--accent-color), 0 0 10px color-mix(in srgb, #f06cae 60%, transparent);
    opacity: 1;
  }
}

.header .logo {
  line-height: 1;
}

.header .logo .mark {
  position: relative;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  border-radius: 16px;
  background: var(--background-color);
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 32px;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

.header .logo .mark::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 19px;
  padding: 3px;
  background: conic-gradient(from 0deg, var(--accent-color), #f06cae, var(--accent-color));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: logo-ring-spin 3.5s linear infinite;
  z-index: -1;
}

@keyframes logo-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Animated profile photo with spinning rings (navbar logo) */
.header .nav-avatar {
  position: relative;
  flex: 0 0 auto;
  width: 84px;
  height: 84px;
  margin-left: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header .nav-avatar .avatar {
  position: relative;
  z-index: 2;
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 60%, #f06cae));
}

.header .nav-avatar .avatar img {
  width: 100%;
  height: 100%;
  max-height: none;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 2px solid var(--background-color);
}

.header .nav-avatar .avatar-ring {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  border: 2px solid transparent;
}

.header .nav-avatar .avatar-ring-a {
  width: 84px;
  height: 84px;
  border-top-color: var(--accent-color);
  border-right-color: var(--accent-color);
  animation: avatar-ring-spin 3s linear infinite;
}

.header .nav-avatar .avatar-ring-b {
  width: 76px;
  height: 76px;
  border-bottom-color: #f06cae;
  border-left-color: #f06cae;
  animation: avatar-ring-spin 2.2s linear infinite reverse;
}

.header .logo img {
  max-height: 32px;
  margin-right: 8px;
}

.header .logo .logo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1;
}

.header .logo h1.sitename {
  font-size: 24px;
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.01em;
  background-image: linear-gradient(90deg, var(--accent-color), #f06cae, var(--accent-color));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sitename-gradient-flow 4s linear infinite;
}

.header .logo .tagline {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--nav-color);
}

@keyframes sitename-gradient-flow {
  to {
    background-position: -200% center;
  }
}

.header .header-carousel {
  width: 64px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent-color) 25%, transparent);
}

.header .header-carousel .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header .cta-btn {
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, #f06cae));
  color: var(--contrast-color);
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 30%, transparent);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  animation: headerCtaLiquidMorph 6s ease-in-out infinite;
}

@keyframes headerCtaLiquidMorph {
  0%, 100% {
    border-radius: 30px;
  }
  25% {
    border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
  }
  50% {
    border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%;
  }
  75% {
    border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header .cta-btn {
    animation: none;
    border-radius: 30px;
  }
}

.header .cta-btn i {
  transition: transform 0.3s ease;
}

.header .cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent-color) 40%, transparent);
  color: var(--contrast-color);
}

.header .cta-btn:hover i {
  transform: translate(2px, -2px);
}

.scrolled .header {
  background-color: var(--surface-color);
  border-bottom-color: transparent;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  padding: 9px 0;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
    margin: 0;
  }

  .navmenu li+li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    background: linear-gradient(180deg, transparent, var(--accent-color), #f06cae, transparent);
    background-size: 100% 200%;
    opacity: 0.6;
    animation: navdivider-flow 3s linear infinite;
  }

  @keyframes navdivider-flow {
    to {
      background-position: 0 200%;
    }
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 9px;
    font-size: 14px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu a::after,
  .navmenu a:focus::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 14px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-color));
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s ease, opacity 0.2s ease;
  }

  .navmenu a::before,
  .navmenu a:focus::before {
    content: "";
    position: absolute;
    bottom: 12px;
    left: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f06cae;
    box-shadow: 0 0 8px #f06cae, 0 0 16px color-mix(in srgb, #f06cae 60%, transparent);
    opacity: 0;
  }

  .navmenu a:hover::after,
  .navmenu a:focus:hover::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .navmenu a:hover::before,
  .navmenu a:focus:hover::before {
    opacity: 1;
    animation: navlink-comet 0.5s ease forwards;
  }

  @keyframes navlink-comet {
    from {
      left: 10px;
    }
    to {
      left: calc(100% - 16px);
    }
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu li:hover>a::after,
  .navmenu .active::after,
  .navmenu .active:focus::after {
    opacity: 1;
    transform: scaleX(1);
  }

  .navmenu li:hover>a::before,
  .navmenu .active::before,
  .navmenu .active:focus::before {
    opacity: 1;
    animation: navlink-comet 0.5s ease forwards;
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding: 60px 0 30px;
  position: relative;
}

.footer .footer-top {
  padding-bottom: 40px;
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 20px;
}

.footer .footer-about .logo .sitename {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--heading-font);
  color: var(--heading-color);
}

.footer .footer-about p {
  font-size: 15px;
  line-height: 1.7;
  max-width: 360px;
}

.footer .social-links {
  gap: 10px;
}

.footer .social-links a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--default-color) 10%, transparent);
  color: var(--heading-color);
  font-size: 16px;
  transition: all 0.3s ease;
}

.footer .social-links a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
}

.footer .footer-links h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 18px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul li {
  padding: 6px 0;
}

.footer .footer-links ul li a {
  color: var(--default-color);
  transition: all 0.3s ease;
}

.footer .footer-links ul li a:hover {
  color: var(--accent-color);
  padding-left: 4px;
}

.footer .footer-contact h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 18px;
}

.footer .footer-contact p {
  margin-bottom: 4px;
  line-height: 1.6;
}

.footer .footer-contact p strong {
  color: var(--heading-color);
}

.footer .copyright {
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--default-color) 12%, transparent);
}

.footer .copyright p {
  margin-bottom: 4px;
}

.footer .copyright .sitename {
  color: var(--accent-color);
}

.footer .copyright .credits {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color) 70%, transparent);
}

.footer .copyright .credits a {
  color: var(--accent-color);
  font-weight: 500;
}

.footer .copyright .credits a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 90px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  min-height: 100vh;
  padding: 140px 0 90px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent-color) 12%, transparent), transparent 65%);
  z-index: 0;
}

.hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: -130px;
}

.hero .by-label {
  font-family: "Pacifico", "Brush Script MT", cursive;
  font-size: 20px;
  line-height: 1;
  margin: 0 0 6px;
  text-align: center;
  background: linear-gradient(90deg, #38bdf8, #a78bfa 55%, #f06cae);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero .avatar-wrap {
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0 auto 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .avatar {
  position: relative;
  z-index: 2;
  width: 120px;
  height: 120px;
  margin: 0;
  border-radius: 50%;
  padding: 5px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 60%, #f06cae));
}

.hero .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  border: 4px solid var(--background-color);
}

.hero .avatar-ring {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  border: 3px solid transparent;
}

.hero .avatar-ring-a {
  width: 150px;
  height: 150px;
  border-top-color: var(--accent-color);
  border-right-color: var(--accent-color);
  animation: avatar-ring-spin 3s linear infinite;
}

.hero .avatar-ring-b {
  width: 128px;
  height: 128px;
  border-bottom-color: #f06cae;
  border-left-color: #f06cae;
  animation: avatar-ring-spin 2.2s linear infinite reverse;
}

@keyframes avatar-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

.hero .status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
  color: var(--accent-color);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 24px;
}

.hero .status .ping {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.hero h1 {
  font-size: 48px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 8px;
  display: inline-block;
  max-width: 100%;
}

.hero h1 .title-underline {
  position: absolute;
  left: 0;
  bottom: 0;
  transform: scaleX(0.62);
  transform-origin: center;
  width: 100%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-color), #f06cae);
  animation: heroUnderlineBreathe 3.2s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes heroUnderlineBreathe {
  0%, 100% {
    transform: scaleX(0.62);
    opacity: 0.7;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

.hero h1 .hl {
  color: var(--accent-color);
}

.hero h1 .char {
  display: inline-block;
  opacity: 0;
  animation: heroGlowCascade 0.9s ease forwards;
  animation-delay: calc(var(--i) * 0.06s);
}

@keyframes heroGlowCascade {
  0% {
    opacity: 0;
    text-shadow: none;
  }
  35% {
    opacity: 1;
    text-shadow: 0 0 18px var(--accent-color), 0 0 36px color-mix(in srgb, var(--accent-color) 70%, transparent);
  }
  100% {
    opacity: 1;
    text-shadow: 0 0 0 transparent;
  }
}

@keyframes heroWordReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .char,
  .hero .hero-subtitle span {
    animation: none;
    opacity: 1;
    transform: none;
    text-shadow: none;
    letter-spacing: 0.02em;
  }

  .hero h1 .title-underline {
    animation: none;
    transform: scaleX(1);
    opacity: 1;
  }
}

.hero .hero-subtitle {
  text-align: center;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: 24px;
}

.hero .hero-subtitle span {
  display: block;
  font-weight: 400;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: #38bdf8;
  opacity: 0;
  animation: heroSubtitleReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 0.06s);
}

@keyframes heroSubtitleReveal {
  to {
    opacity: 1;
    letter-spacing: 0.02em;
  }
}

.hero .hero-trends-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 36px;
  padding: 12px 30px;
  border-radius: 30px;
  background: linear-gradient(90deg, var(--accent-color), #f06cae, var(--accent-color));
  background-size: 220% 100%;
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 35%, transparent);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: heroTrendsGradient 3.5s linear infinite;
}

.hero .hero-trends-btn:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent-color) 45%, transparent);
}

@keyframes heroTrendsGradient {
  to {
    background-position: -220% 0;
  }
}

.hero .hero-trends-btn .ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--accent-color);
  opacity: 0;
  pointer-events: none;
  animation: heroTrendsSonar 2.4s ease-out infinite;
}

.hero .hero-trends-btn .ring:nth-child(2) {
  animation-delay: 0.8s;
}

.hero .hero-trends-btn .ring:nth-child(3) {
  animation-delay: 1.6s;
}

@keyframes heroTrendsSonar {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-trends-btn {
    animation: none;
  }

  .hero .hero-trends-btn .ring {
    animation: none;
    display: none;
  }
}

.hero .hero-news-carousel {
  padding-bottom: 44px;
}

.hero .hero-news-carousel .swiper-wrapper {
  align-items: stretch;
}

.hero .hero-news-carousel .swiper-slide {
  height: auto;
}

.hero .hero-news-carousel .swiper-pagination {
  bottom: 0;
  --swiper-pagination-color: var(--accent-color);
  --swiper-pagination-bullet-inactive-color: var(--default-color);
  --swiper-pagination-bullet-inactive-opacity: 0.3;
}

.hero .hero-news-box {
  position: relative;
  height: 100%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 22px 20px 20px;
  border-radius: 12px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 10%, transparent);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.hero .hero-news-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-color), #f06cae);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.hero .hero-news-box:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.hero .hero-news-box:hover::before {
  transform: scaleX(1);
}

.hero .hero-news-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-color);
  margin-bottom: 10px;
}

.hero .hero-news-box h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--heading-color);
  margin-bottom: 8px;
}

.hero .hero-news-box p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--default-color);
  margin-bottom: 12px;
  flex: 1 1 auto;
}

.hero .hero-news-more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, #f06cae));
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero .hero-news-more:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

.hero .hero-news-more .type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 0;
  border-right: 2px solid rgba(255, 255, 255, 0.85);
  animation: heroNewsTypeCycle 5s ease-in-out infinite;
}

@keyframes heroNewsTypeCycle {
  0%, 4% {
    width: 0;
  }
  45%, 55% {
    width: 17ch;
  }
  96%, 100% {
    width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-news-more .type {
    animation: none;
    width: 17ch;
    border-right-color: transparent;
  }
}

.hero .lead {
  font-size: 18px;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 32px;
}

.hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 40px;
}

.hero .btn-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, #f06cae));
  color: var(--contrast-color);
  font-weight: 600;
  font-size: 16px;
  border: none;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 30%, transparent);
  transition: all 0.3s ease;
}

.hero .btn-main:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent-color) 40%, transparent);
  color: var(--contrast-color);
}

.hero .btn-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 30px;
  background: transparent;
  color: var(--heading-color);
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--default-color) 20%, transparent);
  transition: all 0.3s ease;
}

.hero .btn-line i {
  transition: transform 0.3s ease;
}

.hero .btn-line:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.hero .btn-line:hover i {
  transform: translateX(4px);
}

.hero .socials {
  display: flex;
  gap: 14px;
  justify-content: center;
}

.hero .socials a {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 10%, transparent);
  color: var(--heading-color);
  font-size: 18px;
  transition: all 0.3s ease;
}

.hero .socials a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
}

.hero .hero-carousel {
  margin-top: 56px;
  padding-bottom: 44px;
}

.hero .hero-carousel .swiper-slide {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  opacity: 0.5;
  transform: scale(0.92);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hero .hero-carousel .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero .hero-carousel .swiper-slide-active {
  opacity: 1;
  transform: scale(1);
}

.hero .hero-carousel .swiper-pagination {
  --swiper-pagination-color: var(--accent-color);
  --swiper-pagination-bullet-inactive-color: var(--default-color);
  --swiper-pagination-bullet-inactive-opacity: 0.3;
  bottom: 0;
}

.hero .hero-curvy-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero .hero-curvy-bg svg {
  display: block;
}

/* Photo carousel replaced by the curvy vector background; remove display:none to bring it back */
.hero .hero-fullwidth-carousel {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero .hero-fullwidth-carousel .swiper-wrapper,
.hero .hero-fullwidth-carousel .swiper-slide {
  height: 100%;
}

.hero .hero-fullwidth-carousel .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  opacity: 0.5;
}

.hero .hero-fullwidth-carousel .swiper-slide-active img {
  animation: hero-kenburns 6s ease-out forwards;
}

@keyframes hero-kenburns {
  from {
    transform: scale(1) translate(0, 0);
  }
  to {
    transform: scale(1.15) translate(-1.5%, -1.5%);
  }
}

.hero .hero-fullwidth-carousel .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 20, 0.72), rgba(10, 10, 20, 0.82));
  z-index: 1;
}

.hero .hero-fullwidth-carousel .swiper-slide .slide-caption {
  position: absolute;
  top: 53%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 2;
  text-align: center;
  color: #fff;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

@media (max-width: 768px) {
  .hero .hero-fullwidth-carousel .swiper-slide .slide-caption {
    font-size: 20px;
  }
}

.hero .hero-fullwidth-carousel .carousel-caption-title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: #fff;
  font-size: 64px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

@media (max-width: 768px) {
  .hero .hero-fullwidth-carousel .carousel-caption-title {
    font-size: 36px;
  }
}

.hero .hero-fullwidth-carousel .swiper-pagination {
  --swiper-pagination-color: var(--accent-color);
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: 0.5;
  z-index: 2;
  bottom: 16px;
}

.hero .status {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.hero h1,
.hero .lead {
  color: #fff;
}

.hero .lead {
  opacity: 0.85;
}

.hero .btn-line {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.hero .socials a {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

@media (max-width: 768px) {
  .hero {
    padding: 120px 0 60px;
  }

  .hero h1 {
    font-size: 34px;
  }

  .hero .actions .btn-main,
  .hero .actions .btn-line {
    width: 100%;
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Management Section
--------------------------------------------------------------*/
.page-divider-gradient {
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #ff2079, #ffcc00, #00e5ff, #7c4dff, #ff2079);
  background-size: 300% 100%;
  box-shadow: 0 0 12px rgba(124, 77, 255, 0.6);
  animation: page-divider-shimmer 6s linear infinite;
}

@keyframes page-divider-shimmer {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

.management-title-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 34px;
  border-radius: 40px;
  background: linear-gradient(90deg, var(--accent-color), #f06cae, var(--accent-color));
  background-size: 220% 100%;
  color: #ffffff;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  animation: managementGradientShift 3.5s linear infinite;
}

.management-title-btn:hover {
  color: #ffffff;
}

@keyframes managementGradientShift {
  to {
    background-position: -220% 0;
  }
}

.management-title-btn::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 2px solid var(--accent-color);
  pointer-events: none;
  animation: managementOutlineBreathe 3s ease-in-out infinite;
}

@keyframes managementOutlineBreathe {
  0%, 100% {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 40%, transparent);
    opacity: 0.7;
  }
  50% {
    border-color: #f06cae;
    box-shadow: 0 0 18px 3px color-mix(in srgb, #f06cae 45%, transparent);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .management-title-btn {
    animation: none;
  }

  .management-title-btn::before {
    animation: none;
    border-color: var(--accent-color);
    box-shadow: none;
    opacity: 0.85;
  }
}

.management-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 48px;
  padding: 12px 30px;
  border-radius: 30px;
  background: var(--accent-color);
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 35%, transparent);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.management-btn:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent-color) 45%, transparent);
}

.management-grid {
  margin-bottom: 8px;
}

.management-placeholder {
  height: 100%;
  min-height: 280px;
  border-radius: 12px;
  border: 1.5px dashed color-mix(in srgb, var(--default-color) 30%, transparent);
  background: color-mix(in srgb, var(--surface-color) 60%, transparent);
  transition: border-color 0.3s ease, background 0.3s ease;
}

.management-placeholder:hover {
  border-color: color-mix(in srgb, var(--accent-color) 55%, transparent);
  background: var(--surface-color);
}

.text-placeholder {
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.text-placeholder .ph-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
  color: var(--accent-color);
  font-size: 18px;
}

.text-placeholder h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 6px;
}

.text-placeholder p {
  font-size: 13px;
  color: var(--default-color);
  margin-bottom: 0;
}

.video-placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.video-placeholder .play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-color), #f06cae);
  color: #ffffff;
  font-size: 20px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

.video-placeholder .ph-label {
  font-size: 12.5px;
  color: var(--default-color);
  letter-spacing: 0.02em;
}

/* Magazine-style layout placeholder */
.mn-media-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: none;
  border-radius: 10px;
  border: 1.5px dashed color-mix(in srgb, var(--default-color) 30%, transparent);
  background: color-mix(in srgb, var(--surface-color) 60%, transparent);
}

.mn-media-ph .ph-icon {
  font-size: 22px;
  color: var(--accent-color);
  opacity: 0.85;
}

.mn-media-ph .ph-label {
  font-size: 11px;
  color: var(--default-color);
  text-align: center;
  padding: 0 8px;
}

.mn-media-ph .play-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-color), #f06cae);
  color: #ffffff;
  font-size: 17px;
}

.mn-media-lg {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 18px;
}

.mn-video-embed {
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 10px;
  overflow: hidden;
}

.mn-video-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.mn-media-md {
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: 14px;
}

.mn-media-img {
  overflow: hidden;
  border-radius: 10px;
}

.mn-media-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mn-media-sm {
  width: 96px;
  height: 96px;
}

.mn-main-articles .mn-media-sm {
  width: 140px;
  height: 140px;
}

.mn-media-xs {
  width: 56px;
  height: 56px;
  font-size: 16px;
  color: var(--accent-color);
}

.mn-media-xs.mn-media-featured {
  width: 90px;
  height: 90px;
}

.mn-featured-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--heading-color);
  margin-bottom: 10px;
}

.mn-featured-excerpt {
  font-size: 14px;
  line-height: 1.7;
  color: var(--default-color);
  margin-bottom: 0;
}

.mn-divider {
  width: 70px;
  height: 3px;
  margin: 26px 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent-color), #f06cae);
}

.mn-section-gap {
  margin-top: 12px;
}

.mn-article {
  margin-bottom: 16px;
}

.mn-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--heading-color);
  margin-bottom: 4px;
}

h6.mn-title {
  font-size: 13.5px;
  margin-bottom: 0;
}

.mn-title-shimmer {
  background: linear-gradient(
    100deg,
    var(--heading-color) 30%,
    #f06cae 45%,
    #a06cf0 50%,
    #6ccef0 55%,
    var(--heading-color) 70%
  );
  background-size: 250% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: mn-title-shimmer 3.5s linear infinite;
}

@keyframes mn-title-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -50% 0;
  }
}

.mn-title-fluoro {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
  color: #fff;
}

.mn-title-fluoro::after {
  content: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ff2079, #ffcc00, #00e5ff, #7c4dff, #ff2079);
  background-size: 400% 100%;
  filter: saturate(1.4);
}

@keyframes mn-holo-shimmer-v45 {
  0% {
    background-position: 0% 0;
  }
  50% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0% 0;
  }
}

.mn-econ-title {
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
  font-size: 16px;
  color: #fff;
}

.mn-econ-title::before,
.mn-econ-title::after {
  content: none;
  position: absolute;
  bottom: 0;
  width: 50%;
  height: 3px;
}

.mn-econ-title::before {
  left: 0;
  background: #00e5ff;
  transform-origin: right;
  box-shadow: 0 0 8px #00e5ff;
}

.mn-econ-title::after {
  right: 0;
  background: #7c4dff;
  transform-origin: left;
  box-shadow: 0 0 8px #7c4dff;
}

.mn-econ-title-strategy {
  padding-bottom: 0;
}

.mn-econ-title-strategy::before,
.mn-econ-title-strategy::after {
  content: none;
}

.mn-loading-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 8px;
  margin: 8px 0 16px;
}

.mn-loading-dots .ld {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00e5ff;
  box-shadow: 0 0 6px #00e5ff;
}

.mn-loading-dots .ld:nth-child(1) {
  animation-delay: 0s;
}

.mn-loading-dots .ld:nth-child(2) {
  animation-delay: 0.15s;
}

.mn-loading-dots .ld:nth-child(3) {
  animation-delay: 0.3s;
}

.mn-loading-dots .ld:nth-child(4) {
  animation-delay: 0.45s;
}

.mn-loading-dots .ld:nth-child(5) {
  animation-delay: 0.6s;
}

@keyframes mn-loadingdots-pulse {
  0%,
  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes mn-econ-centerout {
  0%,
  100% {
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
}

.mn-meta {
  font-size: 11.5px;
  color: var(--default-color);
}

.mn-media-overlay {
  position: relative;
}

.mn-media-caption {
  position: absolute;
  z-index: 2;
  display: block;
  margin: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 12px 10px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.mn-media-caption a {
  color: #fff;
  text-decoration: none;
}

.mn-media-caption a:hover {
  text-decoration: underline;
}

.mn-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-color);
  margin-bottom: 4px;
}

.mn-promo {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.mn-promo-tag {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-color);
  margin-bottom: 6px;
}

.mn-promo p {
  font-size: 13px;
  color: var(--default-color);
  margin: 0;
}

.mn-article-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color) 10%, transparent);
}

.mn-article-row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.mn-article-row-body {
  flex: 1;
}

.mn-article-row-body p {
  font-size: 13px;
  color: var(--default-color);
  margin: 0;
}

.mn-ad-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 16 / 10;
  margin-bottom: 22px;
  border-radius: 12px;
  border: 1.5px dashed color-mix(in srgb, var(--accent-color) 40%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent-color) 14%, var(--surface-color)), var(--surface-color));
}

.mn-ad-ph .ph-icon {
  font-size: 24px;
  color: var(--accent-color);
}

.mn-ad-ph .ph-label {
  font-size: 12px;
  color: var(--default-color);
  letter-spacing: 0.04em;
}

.mn-ad-article {
  display: block;
  aspect-ratio: auto;
  padding: 20px 20px 18px;
  border-style: solid;
}

.mn-ad-article .mn-media-md {
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

.mn-ad-article .mn-media-md.mn-media-full {
  width: calc(100% + 40px);
  margin: -20px -20px 14px;
  border-radius: 10px 10px 0 0;
}

.mn-ad-article-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.mn-ad-article-link .mn-title {
  margin: 6px 0;
  transition: color 0.25s ease;
}

.mn-ad-article-link:hover .mn-title {
  color: var(--accent-color);
}

.mn-ad-article-link .mn-meta {
  display: block;
}

.mn-side-featured {
  margin-bottom: 24px;
}

.mn-side-featured .mn-title {
  position: relative;
  display: inline-block;
  color: #00e5ff;
  padding-bottom: 20px;
  margin-bottom: 16px;
  text-shadow: 0 0 8px color-mix(in srgb, #00e5ff 60%, transparent);
}

.mn-side-featured .mn-title i {
  font-size: 22px;
  vertical-align: -2px;
}

.mn-ekg-svg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 20px;
}

.mn-ekg-path {
  fill: none;
  stroke: #00e5ff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px #00e5ff);
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: mn-ekg-draw 2s linear infinite;
}

@keyframes mn-ekg-draw {
  0% { stroke-dashoffset: 200; }
  70% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -10; }
}

.mn-side-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color) 10%, transparent);
}

.mn-side-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.mn-title a.mn-link-white,
.mn-title a.mn-link-white:hover {
  color: #fff;
}

.mn-side-row-spaced {
  margin-top: 20px;
}

.mn-side-row-body {
  flex: 1;
}

.mn-newsletter {
  padding: 22px 20px;
  border-radius: 12px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 10%, transparent);
}

.mn-newsletter h5 {
  font-size: 16px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 14px;
}

.mn-input-ph {
  display: block;
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--default-color);
  background: color-mix(in srgb, var(--background-color) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--default-color) 15%, transparent);
}

.mn-btn-ph {
  display: block;
  text-align: center;
  padding: 10px 14px;
  margin-bottom: 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background: var(--accent-color);
}

.mn-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--default-color);
}

.mn-check input {
  margin-top: 2px;
}

.mn-col-header {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--heading-color);
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 3px solid var(--accent-color);
}

.mn-small-excerpt {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--default-color);
  margin: 6px 0 0;
}

.mn-side-list-plain .mn-title {
  margin-bottom: 4px;
}

@media (max-width: 480px) {
  .mn-article-row {
    flex-direction: column;
  }

  .mn-article-row .mn-media-sm {
    width: 100%;
    height: 160px;
  }
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  padding: 48px 0;
}

.clients .eyebrow {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--default-color) 70%, transparent);
  margin-bottom: 32px;
}

.clients .logos img {
  max-height: 40px;
  width: auto;
  margin: 0 auto;
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.45;
  transition: all 0.3s ease;
}

.clients .logos>div:hover img {
  opacity: 0.9;
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .story {
  font-size: 20px;
  line-height: 1.8;
  color: var(--heading-color);
  margin-bottom: 56px;
}

.about .counters .counter {
  text-align: center;
  padding: 32px 16px;
  border-radius: 18px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 8%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.about .counters .counter .purecounter,
.about .counters .counter .plus {
  font-size: 44px;
  font-weight: 700;
  font-family: var(--heading-font);
  color: var(--accent-color);
  line-height: 1;
}

.about .counters .counter .plus {
  margin-left: 2px;
}

.about .counters .counter p {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--default-color);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-rows .row-item {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 32px 8px;
  border-top: 1px solid color-mix(in srgb, var(--default-color) 12%, transparent);
  transition: all 0.3s ease;
}

.services .service-rows .row-item:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color) 12%, transparent);
}

.services .service-rows .row-item .n {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--heading-font);
  color: color-mix(in srgb, var(--accent-color) 40%, transparent);
  min-width: 56px;
  transition: color 0.3s ease;
}

.services .service-rows .row-item .body {
  flex: 1;
}

.services .service-rows .row-item .body h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
  transition: color 0.3s ease;
}

.services .service-rows .row-item .body p {
  font-size: 16px;
  margin: 0;
}

.services .service-rows .row-item>i {
  font-size: 24px;
  color: var(--default-color);
  transition: all 0.3s ease;
}

.services .service-rows .row-item:hover {
  padding-left: 24px;
}

.services .service-rows .row-item:hover .n {
  color: var(--accent-color);
}

.services .service-rows .row-item:hover .body h3 {
  color: var(--accent-color);
}

.services .service-rows .row-item:hover>i {
  color: var(--accent-color);
  transform: translate(4px, -4px);
}

@media (max-width: 576px) {
  .services .service-rows .row-item {
    gap: 16px;
  }

  .services .service-rows .row-item .n {
    font-size: 22px;
    min-width: 40px;
  }

  .services .service-rows .row-item .body h3 {
    font-size: 20px;
  }
}

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .intro h3 {
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 16px;
}

.skills .intro p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.skills .intro .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skills .intro .tags span {
  padding: 8px 16px;
  border-radius: 24px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 10%, transparent);
  font-size: 14px;
  font-weight: 500;
  color: var(--heading-color);
}

.skills .skills-animation .progress {
  display: block;
  height: auto;
  background: none;
  border-radius: 0;
  margin-bottom: 24px;
  overflow: visible;
}

.skills .skills-animation .progress .skill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  color: var(--heading-color);
  font-weight: 600;
  font-size: 16px;
}

.skills .skills-animation .progress .skill .val {
  font-style: normal;
  color: var(--accent-color);
  font-size: 14px;
}

.skills .skills-animation .progress .bar {
  width: 100%;
  height: 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--default-color) 12%, transparent);
  overflow: hidden;
}

.skills .skills-animation .progress .progress-bar {
  width: 0;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 65%, #f06cae));
  transition: width 1.2s ease-in-out;
}

/*--------------------------------------------------------------
# Experience Section
--------------------------------------------------------------*/
.experience .col-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.experience .col-head i {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  color: var(--accent-color);
  font-size: 22px;
}

.experience .col-head h3 {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}

.experience .timeline {
  position: relative;
  padding-left: 28px;
}

.experience .timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: color-mix(in srgb, var(--default-color) 12%, transparent);
}

.experience .item {
  position: relative;
  padding-bottom: 32px;
}

.experience .item:last-child {
  padding-bottom: 0;
}

.experience .item::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-color);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 18%, transparent);
}

.experience .item .year {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-color);
  margin-bottom: 6px;
}

.experience .item h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.experience .item .org {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color) 75%, transparent);
  margin-bottom: 10px;
}

.experience .item p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.experience .btn-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, #f06cae));
  color: var(--contrast-color);
  font-weight: 600;
  font-size: 16px;
  border: none;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 30%, transparent);
  transition: all 0.3s ease;
}

.experience .btn-main:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent-color) 40%, transparent);
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .cases {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.portfolio .shot {
  display: block;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.portfolio .shot img {
  width: 100%;
  display: block;
  transition: transform 0.6s ease;
}

.portfolio .shot:hover img {
  transform: scale(1.05);
}

.portfolio .copy {
  padding: 0 8px;
}

.portfolio .copy .cat {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-color);
  margin-bottom: 12px;
}

.portfolio .copy h3 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 14px;
}

.portfolio .copy p {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 20px;
}

.portfolio .copy .more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--accent-color);
}

.portfolio .copy .more i {
  transition: transform 0.3s ease;
}

.portfolio .copy .more:hover i {
  transform: translateX(4px);
}

@media (min-width: 992px) {
  .portfolio .case.reverse .copy {
    padding-left: 24px;
  }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .q-card {
  height: 100%;
  margin: 0;
  padding: 32px;
  border-radius: 20px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 8%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.testimonials .q-card .rating {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
}

.testimonials .q-card .rating i {
  color: #f6b73c;
  font-size: 16px;
}

.testimonials .q-card blockquote {
  margin: 0 0 24px;
  padding: 0;
  border: none;
  font-size: 16px;
  line-height: 1.7;
  color: var(--default-color);
}

.testimonials .q-card figcaption {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonials .q-card figcaption img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}

.testimonials .q-card figcaption .name {
  display: block;
  font-weight: 600;
  color: var(--heading-color);
  font-size: 15px;
}

.testimonials .q-card figcaption .role {
  display: block;
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color) 75%, transparent);
}

.testimonials .q-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.09);
}

/*--------------------------------------------------------------
# Process Section
--------------------------------------------------------------*/
.process .steps {
  position: relative;
}

.process .step {
  position: relative;
  height: 100%;
  padding: 36px 28px;
  border-radius: 18px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 8%, transparent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.process .step .num {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 38px;
  font-weight: 700;
  font-family: var(--heading-font);
  color: color-mix(in srgb, var(--accent-color) 12%, transparent);
  line-height: 1;
}

.process .step i {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin-bottom: 20px;
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  color: var(--accent-color);
  font-size: 26px;
  transition: all 0.3s ease;
}

.process .step h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 10px;
}

.process .step p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.process .step:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
  border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.process .step:hover i {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, #f06cae));
  color: var(--contrast-color);
}

.process .step:hover .num {
  color: color-mix(in srgb, var(--accent-color) 22%, transparent);
}

/*--------------------------------------------------------------
# Cta Section
--------------------------------------------------------------*/
.cta {
  position: relative;
  overflow: hidden;
}

.cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 500px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent-color) 28%, transparent), transparent 60%);
}

.cta .container {
  position: relative;
  z-index: 1;
}

.cta .cta-center .kicker {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--accent-color) 22%, transparent);
  color: var(--accent-color);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}

.cta .cta-center h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
}

.cta .cta-center p {
  font-size: 18px;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 32px;
}

.cta .cta-center .btn-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, #f06cae));
  color: var(--contrast-color);
  font-weight: 600;
  font-size: 16px;
  border: none;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 30%, transparent);
  transition: all 0.3s ease;
}

.cta .cta-center .btn-main:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent-color) 40%, transparent);
  color: var(--contrast-color);
}

.cta .cta-center .note {
  display: block;
  margin-top: 20px;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color) 80%, transparent);
}

.cta .cta-center .note i {
  color: var(--accent-color);
  margin-right: 6px;
}

@media (max-width: 768px) {
  .cta .cta-center h2 {
    font-size: 30px;
  }

  .cta .cta-center .btn-main {
    width: 100%;
    justify-content: center;
  }
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .quick {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-bottom: 32px;
}

.contact .quick a,
.contact .quick span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--default-color);
}

.contact .quick a i,
.contact .quick span i {
  color: var(--accent-color);
  font-size: 18px;
}

.contact .quick a:hover {
  color: var(--accent-color);
}

.contact .php-email-form {
  padding: 40px;
  border-radius: 20px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 8%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.contact .php-email-form .form-control {
  height: 52px;
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--default-color) 18%, transparent);
  background: var(--background-color);
  color: var(--default-color);
  font-size: 16px;
  box-shadow: none;
  transition: all 0.3s ease;
}

.contact .php-email-form .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color) 50%, transparent);
}

.contact .php-email-form .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
}

.contact .php-email-form textarea.form-control {
  height: auto;
  resize: vertical;
}

.contact .php-email-form .btn-submit {
  margin-top: 8px;
  padding: 14px 44px;
  border-radius: 30px;
  border: none;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, #f06cae));
  color: var(--contrast-color);
  font-weight: 600;
  font-size: 16px;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 30%, transparent);
  transition: all 0.3s ease;
}

.contact .php-email-form .btn-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent-color) 40%, transparent);
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 28px;
  }
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .gallery {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.portfolio-details .gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-details .gallery .swiper-pagination {
  --swiper-pagination-color: var(--contrast-color);
  --swiper-pagination-bullet-inactive-color: var(--contrast-color);
  --swiper-pagination-bullet-inactive-opacity: 0.5;
}

.portfolio-details .meta-card {
  padding: 32px;
  border-radius: 20px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 8%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.portfolio-details .meta-card h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

.portfolio-details .meta-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.portfolio-details .meta-card ul li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color) 8%, transparent);
}

.portfolio-details .meta-card ul li:last-child {
  border-bottom: none;
}

.portfolio-details .meta-card ul li .lbl {
  color: color-mix(in srgb, var(--default-color) 75%, transparent);
  font-size: 15px;
}

.portfolio-details .meta-card ul li .val {
  font-weight: 600;
  color: var(--heading-color);
  font-size: 15px;
  text-align: right;
}

.portfolio-details .btn-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  justify-content: center;
  padding: 14px 30px;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, #f06cae));
  color: var(--contrast-color);
  font-weight: 600;
  font-size: 16px;
  border: none;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 30%, transparent);
  transition: all 0.3s ease;
}

.portfolio-details .btn-main:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent-color) 40%, transparent);
  color: var(--contrast-color);
}

.portfolio-details .writeup {
  margin-top: 16px;
}

.portfolio-details .writeup h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 16px;
}

.portfolio-details .writeup .lead {
  font-size: 19px;
  line-height: 1.7;
  color: var(--heading-color);
  margin-bottom: 20px;
}

.portfolio-details .writeup p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.portfolio-details .writeup .highlights {
  margin-top: 16px;
}

.portfolio-details .writeup .highlights .hl {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
  font-weight: 600;
  color: var(--heading-color);
}

.portfolio-details .writeup .highlights .hl i {
  font-size: 24px;
  color: var(--accent-color);
}

.portfolio-details .writeup .highlights .hl span {
  font-size: 15px;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .sidebar {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.service-details .sidebar .services-list {
  padding: 28px;
  border-radius: 18px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 8%, transparent);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.service-details .sidebar .services-list h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.service-details .sidebar .services-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-details .sidebar .services-list li {
  margin-bottom: 8px;
}

.service-details .sidebar .services-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 12px;
  color: var(--default-color);
  font-weight: 500;
  font-size: 15px;
  transition: all 0.3s ease;
}

.service-details .sidebar .services-list li a i {
  font-size: 14px;
  opacity: 0.6;
  transition: transform 0.3s ease;
}

.service-details .sidebar .services-list li a:hover {
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
  color: var(--accent-color);
}

.service-details .sidebar .services-list li a:hover i {
  transform: translateX(3px);
}

.service-details .sidebar .services-list li.active a {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, #f06cae));
  color: var(--contrast-color);
}

.service-details .sidebar .services-list li.active a i {
  opacity: 1;
}

.service-details .sidebar .help-card {
  padding: 28px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
  text-align: center;
}

.service-details .sidebar .help-card i {
  font-size: 32px;
  color: var(--accent-color);
}

.service-details .sidebar .help-card h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 12px 0 8px;
}

.service-details .sidebar .help-card p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.service-details .detail .hero-img {
  width: 100%;
  border-radius: 18px;
  margin-bottom: 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.service-details .detail h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 16px;
}

.service-details .detail h3 {
  font-size: 22px;
  font-weight: 600;
  margin: 36px 0 16px;
}

.service-details .detail .lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--heading-color);
  margin-bottom: 18px;
}

.service-details .detail p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 16px;
}

.service-details .detail .includes .inc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 8%, transparent);
  font-weight: 500;
  font-size: 15px;
}

.service-details .detail .includes .inc i {
  color: var(--accent-color);
}

.service-details .detail .steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.service-details .detail .steps .step {
  display: flex;
  gap: 20px;
  padding: 24px;
  border-radius: 16px;
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color) 8%, transparent);
}

.service-details .detail .steps .step .n {
  font-size: 28px;
  font-weight: 700;
  font-family: var(--heading-font);
  color: color-mix(in srgb, var(--accent-color) 45%, transparent);
  line-height: 1;
}

.service-details .detail .steps .step h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.service-details .detail .steps .step p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.service-details .btn-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, #f06cae));
  color: var(--contrast-color);
  font-weight: 600;
  font-size: 15px;
  border: none;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--accent-color) 30%, transparent);
  transition: all 0.3s ease;
}

.service-details .btn-main:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent-color) 40%, transparent);
  color: var(--contrast-color);
}

@media (max-width: 992px) {
  .service-details .sidebar {
    position: static;
  }
}

/*--------------------------------------------------------------
# Hero bottom news scroller
--------------------------------------------------------------*/
.hero-ticker {
  position: relative;
  margin-top: -20px;
  z-index: 3;
  overflow: hidden;
  padding: 12px 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--background-color) 82%, transparent);
  backdrop-filter: blur(6px);
  border-top: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.hero-ticker-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: hero-ticker-scroll 55s linear infinite;
}

/* Manual < > buttons for the ticker (same look as the carousel above) */
.hero-ticker-wrap {
  position: relative;
  margin-top: -20px;
  z-index: 3;
  padding: 0 42px;
}

.hero-ticker-wrap .hero-ticker {
  margin-top: 0;
}

.hero .hero-ticker-wrap .hero-news-nav {
  width: 32px;
  height: 32px;
  font-size: 15px;
}

.hero .hero-ticker-wrap .hero-ticker-prev { left: 0; }
.hero .hero-ticker-wrap .hero-ticker-next { right: 0; }
.hero-ticker:hover .hero-ticker-track {
  animation-play-state: paused;
}

@keyframes hero-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 7px)); }
}

.hero-ticker-item {
  display: block;
  padding: 14px 14px 16px;
  text-align: left;
  border: 1px solid #c4e0f7;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 14px;
  transition: background .2s ease, transform .2s ease;
}

.hero-ticker-item:hover {
  background: #ffffff;
  transform: translateY(-2px);
}

.hero-ticker-item .cap {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #e07b12;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-ticker-item p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #1e3a5f;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Static articles panel (replaces the scrolling ticker) */
.hero-news-panel {
  position: relative;
  z-index: 3;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(59, 130, 196, 0.12);
}

.hero-news-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 2px;
  font-size: 15px;
  font-weight: 700;
  color: #1e3a5f;
}

.hero-news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 991px) {
  .hero-news-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .hero-news-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ticker { overflow-x: auto; }
  .hero-ticker-track { animation: none; }
}


/* Hero subtitle: headline + highlighted supporting lines */
.hero .hero-subtitle span.sub-head {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 38px);
  letter-spacing: 0.04em;
  line-height: 1.2;
  margin-bottom: 14px;
  background: linear-gradient(90deg, #38bdf8, #a78bfa 55%, #f06cae);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.hero .hero-subtitle span.sub-body {
  font-size: clamp(15px, 1.7vw, 20px);
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.6;
  color: #d5deee;
}

.hero .hero-subtitle span.sub-body b {
  font-weight: 600;
  color: #ffffff;
  border-bottom: 2px solid color-mix(in srgb, var(--accent-color) 70%, transparent);
  padding-bottom: 1px;
}

/* Type + Delete loop: reserve each line's height and show a blinking caret on the active line */
.hero .hero-subtitle span.sub-body {
  min-height: 1.6em;
}

.hero .hero-subtitle span.sub-body.typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: #38bdf8;
  animation: typeCaretBlink 0.9s steps(1) infinite;
}

@keyframes typeCaretBlink {
  50% { opacity: 0; }
}

/* Rainbow text on hover/focus for highlighted words */
.hero .hero-subtitle span.rainbow-words b {
  cursor: pointer;
  outline: none;
}

.hero .hero-subtitle span.rainbow-words b:hover,
.hero .hero-subtitle span.rainbow-words b:focus {
  background: linear-gradient(90deg, #ff3b3b, #ff9f1a, #ffe033, #3ddc5f, #2fb7ff, #7a5cff, #ff4fd8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Keep the name (with its underline) on its own line so the Trending button sits below it */
.hero h1.hero-title {
  display: table;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}

/* Fixed gap between the tagline and the subtitle below it */
.hero .tagline {
  display: block;
  font-size: 24px;
  margin-bottom: 16px;
}

/* Per-letter staggered gradient flow on the tagline */
.hero .tagline .c {
  display: inline-block;
  white-space: pre;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: linear-gradient(90deg, #38bdf8, #f06cae, #fbbf24, #38bdf8);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: taglineFlow 3s linear infinite;
  animation-delay: calc(var(--i) * -0.12s);
}

@keyframes taglineFlow {
  to { background-position: -300% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .tagline .c { animation: none; }
}

/* Compact hero news cards so the scroller below stays inside the first screen */
.hero .hero-news-carousel {
  padding-bottom: 0;
}

.hero .hero-news-box {
  min-height: 0;
  padding: 12px 14px 12px;
}

.hero .hero-news-tag {
  font-size: 10px;
  margin-bottom: 4px;
}

.hero .hero-news-box h4 {
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 4px;
}

.hero .hero-news-box p {
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero .hero-news-more {
  padding: 4px 11px;
  font-size: 10px;
}

/* Wider hero news cards that show up to 4 lines of text */
.hero .hero-news-carousel {
  width: min(1320px, 96vw);
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.hero .hero-news-box p {
  -webkit-line-clamp: 4;
}

/* Narrower, taller hero news cards */
.hero .hero-news-carousel {
  width: min(1000px, 96vw);
}

.hero .hero-news-box {
  min-height: 200px;
  padding: 18px 16px 16px;
}

/* Lift the "Click for Details" button off the card's bottom border */
.hero .hero-news-box {
  padding-bottom: 30px;
}

/* Hero headline: Word Spotlight (each word lights up in turn) */
.hero .hero-subtitle span.sub-spot {
  background: none;
  -webkit-text-fill-color: initial;
  color: #5b6b88;
}

.hero .hero-subtitle span.sub-spot span.w {
  display: inline-block;
  font-size: inherit;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: inherit;
  color: #5b6b88;
  opacity: 1;
  animation: none;
  transition: none;
}

.hero .hero-subtitle span.sub-spot span.w.on,
.hero .hero-subtitle span.sub-spot span.w:hover {
  background: linear-gradient(90deg, #ff3b3b, #ff9f1a, #ffe033, #3ddc5f, #2fb7ff, #7a5cff, #ff4fd8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
}

/* Hero name: Rainbow Letters (keeps the original glow-in, then cycles colours per letter) */
.hero h1.hero-title .char {
  animation: heroGlowCascade 0.9s ease forwards, heroRainbow 3s linear infinite;
  animation-delay: calc(var(--i) * 0.06s), calc(var(--i) * -90ms);
}

@keyframes heroRainbow {
  0%, 100% { color: #38bdf8; }
  25% { color: #a78bfa; }
  50% { color: #f06cae; }
  75% { color: #fbbf24; }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1.hero-title .char { animation: none; }
}

/*--------------------------------------------------------------
# About Me block (about.html)
--------------------------------------------------------------*/
.about-me {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 44px;
  align-items: center;
  padding-bottom: 60px;
}

.about-me-text h2 {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 18px;
}

.about-me-text h2 span {
  color: var(--accent-color);
}

.about-me-text p {
  font-size: 18px;
  margin: 0;
}

.about-me-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.about-me-timeline li {
  position: relative;
  padding: 0 0 14px 22px;
  color: var(--heading-color);
}

.about-me-timeline li:last-child {
  padding-bottom: 0;
}

.about-me-timeline li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 9px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent-color);
}

.about-me-timeline small {
  display: block;
  color: var(--default-color);
}

@media (max-width: 768px) {
  .about-me {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .about-me-text h2 {
    font-size: 38px;
  }
}

.about-me-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.about-me-tags span {
  background: var(--surface-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  color: var(--heading-color);
  font-size: 14px;
  font-weight: 500;
  padding: 6px 18px;
  border-radius: 50px;
}

/*--------------------------------------------------------------
# Footer: arrow links + email button
--------------------------------------------------------------*/
.footer .footer-arrow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-bottom: 20px;
}

.footer .footer-arrow-grid h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 18px;
}

.footer .footer-arrow-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
}

.footer .footer-arrow-links li {
  padding: 5px 0;
  break-inside: avoid;
}

.footer .footer-arrow-links li a {
  color: var(--default-color);
  transition: all 0.3s ease;
}

.footer .footer-arrow-links li a::before {
  content: "\2192\00a0";
  color: var(--accent-color);
}

.footer .footer-arrow-links li a:hover {
  color: var(--accent-color);
  padding-left: 4px;
}

.footer .footer-email-btn {
  display: inline-block;
  background: var(--accent-color);
  color: var(--contrast-color);
  font-weight: 600;
  padding: 9px 24px;
  border-radius: 50px;
  transition: all 0.3s ease;
}

.footer .footer-email-btn:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .footer .footer-arrow-grid {
    grid-template-columns: 1fr;
  }

  .footer .footer-arrow-links ul {
    columns: 1;
  }
}

.footer .footer-map {
  margin-top: 20px;
  width: 50%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.footer .footer-map iframe {
  display: block;
  width: 100%;
  height: 110px;
  border: 0;
}

/* Manual < > navigation: vertically centred on the left and right edges of the hero news cards */
.hero .hero-news-nav-wrap {
  position: relative;
  width: min(1000px, 96vw);
  left: 50%;
  transform: translateX(-50%);
}

.hero .hero-news-nav-wrap .hero-news-carousel {
  width: 100%;
  left: 0;
  transform: none;
}

.hero .hero-news-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: linear-gradient(135deg, #0d83fd, #8a4dff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(13, 131, 253, 0.45);
  transition: filter 0.2s;
}

.hero .hero-news-nav:hover {
  filter: brightness(1.15);
}

.hero .hero-news-prev { left: 6px; }
.hero .hero-news-next { right: 6px; }

/* Hero news cards reduced to 165px tall */
.hero .hero-news-box {
  min-height: 165px;
}

/* Slimmer hero news cards so the news ticker below stays inside the first viewport */
.hero .hero-news-box {
  min-height: 130px;
  padding: 12px 14px 22px;
}

.hero .hero-news-box p {
  -webkit-line-clamp: 2;
}

.hero .hero-trends-btn {
  margin-bottom: 18px;
}

.hero .hero-news-nav-wrap {
  width: min(900px, 96vw);
}

/* Even slimmer hero news cards + tighter hero spacing to expose the ticker */
.hero .hero-news-box {
  min-height: 100px;
  padding: 10px 14px 16px;
}

.hero .hero-news-box h4 {
  font-size: 13px;
  margin-bottom: 2px;
}

.hero .hero-news-box p {
  font-size: 11.5px;
  line-height: 1.35;
  margin-bottom: 6px;
}

.hero .hero-news-tag {
  margin-bottom: 2px;
}

.hero {
  padding-top: 110px;
}

/* News cards: clickable thumbnail that opens the video on YouTube / Facebook */
.hero-news-box .news-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: #0b1020;
}
.hero-news-box .news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.hero-news-box .news-thumb:hover img {
  transform: scale(1.05);
}
.hero-news-box .news-thumb-fb {
  background: linear-gradient(135deg, #1877f2, #0b1020 80%);
}
.hero-news-box .news-fb-mark {
  font-size: 56px;
  color: rgba(255, 255, 255, 0.85);
}
.hero-news-box .news-play {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
  transition: background 0.3s ease, transform 0.3s ease;
}
.hero-news-box .news-thumb:hover .news-play {
  background: var(--accent-color);
  transform: scale(1.1);
}

/* Hero: compact stack that starts right below the header so the top headline line is visible */
.hero {
  min-height: 0;
  padding: 24px 0 40px;
  align-items: flex-start;
}
.hero .container {
  margin-top: 0;
}
.hero .hero-subtitle {
  margin-bottom: 12px;
}
.hero .hero-subtitle span.sub-head {
  margin-bottom: 6px;
}
.hero .avatar-wrap {
  width: 120px;
  height: 120px;
}
.hero .avatar {
  width: 96px;
  height: 96px;
}
.hero h1 {
  margin-bottom: 8px;
}
.hero .hero-trends-btn {
  margin: 8px 0 20px;
}
.hero .hero-news-box {
  min-height: 0;
}

/* Hero: avatar block and name / tagline / intro text (between compact and original sizes) */
.hero .avatar-wrap {
  width: 108px;
  height: 108px;
  margin-bottom: 0;
}
.hero .avatar {
  width: 86px;
  height: 86px;
  padding: 4px;
}
.hero .avatar-ring-a {
  width: 112px;
  height: 112px;
}
.hero .avatar-ring-b {
  width: 96px;
  height: 96px;
}
.hero h1.hero-title {
  font-size: 40px;
  line-height: 1.12;
  padding-bottom: 6px;
}
.hero .tagline {
  font-size: 21px;
  margin-bottom: 8px;
}
.hero .hero-subtitle span.sub-body {
  font-size: clamp(14px, 1.5vw, 18px);
  line-height: 1.5;
}

/* Scriptures: headings above the ribbon buttons are removed */
.scriptures .tc-hdr{display:none!important}
.scriptures .tc-sl .t{display:none!important}
.scriptures .nb{margin-top:0!important}
.scriptures .tc{margin-bottom:0!important}

/* Hero news cards: wider so the video thumbnails grow proportionally (16:9 keeps the height in step) */
.hero .hero-news-nav-wrap {
  width: min(1240px, 96vw);
}

/* Hero news cards: taller video area (about 4:3 instead of 16:9) */
.hero .hero-news-box .ratio-16x9 {
  --bs-aspect-ratio: 75%;
}

/* Clear gap between the video carousel and the news scroller below it */
.hero .hero-ticker-wrap {
  margin-top: 36px;
}

/* Fit the news scroller inside the first screen: video height follows the viewport height */
.hero .hero-news-box .ratio-16x9 {
  --bs-aspect-ratio: 0%;
  height: clamp(130px, calc(100vh - 680px), 340px);
}
.hero .hero-ticker-wrap {
  margin-top: 22px;
}

/* "By" label: lines either side */
.hero .by-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 0 auto 8px;
  padding: 0;
  font-family: var(--default-font, inherit);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  border: 0;
  background: none;
  -webkit-text-fill-color: #cdd8f5;
  color: #cdd8f5;
}
.hero .by-label::before,
.hero .by-label::after {
  content: "";
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #38bdf8);
}
.hero .by-label::after {
  transform: scaleX(-1);
}

/* Tighter vertical spacing so the colored strip at the bottom stays inside the first screen */
.hero {
  padding: 4px 0 14px;
}
.hero .hero-trends-btn {
  margin: 4px 0 10px;
}
.hero .hero-ticker-wrap {
  margin-top: 14px;
}
.hero .hero-news-box .ratio-16x9 {
  height: clamp(90px, calc(100vh - 680px), 340px);
}

/*--------------------------------------------------------------
# Responsive refinements (tablet + phone) for the home page
--------------------------------------------------------------*/
html, body { overflow-x: hidden; }
.hero img, .hero .swiper { max-width: 100%; }

@media (max-width: 991px) {
  .hero .hero-news-box .ratio-16x9 { height: clamp(150px, 28vw, 260px); }
}

@media (max-width: 767px) {
  /* Header: smaller logo + avatar, keep the menu toggle reachable */
  .header { padding: 10px 0; }
  .header::before { height: 8px; }
  .header .container { justify-content: space-between !important; gap: 8px; }
  .header .logo .mark { width: 46px; height: 46px; font-size: 24px; border-radius: 12px; margin-right: 0; }
  .header .logo .mark::before { border-radius: 15px; }
  .header .nav-avatar { width: 58px; height: 58px; margin-left: auto; margin-right: 4px; }
  .header .nav-avatar .avatar { width: 48px; height: 48px; padding: 2px; }
  .header .nav-avatar .avatar-ring-a { width: 58px; height: 58px; }
  .header .nav-avatar .avatar-ring-b { width: 52px; height: 52px; }
  .mobile-nav-toggle { font-size: 32px; margin-right: 0; padding: 6px; }
  .navmenu a, .navmenu a:focus { padding: 14px 22px; font-size: 16px; white-space: normal; }
  .navmenu ul { inset: 70px 14px 14px 14px; }
  .mobile-nav-active .mobile-nav-toggle { top: 14px; right: 14px; }

  /* Hero text */
  .hero { padding: 12px 0 24px; }
  .hero .container { padding-left: 16px; padding-right: 16px; }
  .hero .hero-subtitle span.sub-head { font-size: clamp(18px, 5.6vw, 26px); letter-spacing: 0.02em; }
  .hero h1.hero-title { font-size: clamp(30px, 10vw, 40px); }
  .hero .tagline { font-size: clamp(16px, 5.2vw, 21px); }
  .hero .hero-subtitle span.sub-body { display: block; font-size: 14.5px; line-height: 1.55; }
  .hero .by-label::before, .hero .by-label::after { width: 26px; }
  .hero .hero-trends-btn {
    display: block;
    max-width: 100%;
    padding: 12px 18px;
    font-size: 14px;
    line-height: 1.35;
    white-space: normal;
    text-align: center;
  }
  .hero .hero-trends-btn .ring { display: none; }

  /* News cards: full width, arrows tucked inside, real 16:9 thumbnails */
  .hero .hero-news-nav-wrap { width: 100%; }
  .hero .hero-news-box .ratio-16x9 { height: auto; --bs-aspect-ratio: 56.25%; }
  .hero .hero-news-box { padding: 12px 12px 18px; }
  .hero .hero-news-box h5.hero-news-tag { font-size: 13px; line-height: 1.35; }
  .hero .hero-news-nav { width: 34px; height: 34px; font-size: 16px; top: 36%; }
  .hero .hero-news-prev { left: 4px; }
  .hero .hero-news-next { right: 4px; }
  .hero-news-box .news-play { width: 46px; height: 46px; font-size: 26px; }
  .hero .hero-news-more { padding: 7px 14px; font-size: 11px; }

  /* Ticker */
  .hero-news-panel { margin-top: 18px; padding: 12px; width: 100%; }
  .hero-news-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero-ticker-item { width: 100%; }
  .hero-ticker-item { padding: 10px 10px 12px; }
  .hero-ticker-item .cap { font-size: 10px; }
  .hero-ticker-item p { font-size: 13px; -webkit-line-clamp: unset; display: block; }

  /* Footer / divider / scroll-top */
  .scroll-top { right: 14px; bottom: 14px; }
}

@media (max-width: 380px) {
  .header .logo .mark { width: 40px; height: 40px; font-size: 20px; }
  .header .nav-avatar { width: 50px; height: 50px; }
  .header .nav-avatar .avatar { width: 42px; height: 42px; }
  .header .nav-avatar .avatar-ring-a { width: 50px; height: 50px; }
  .header .nav-avatar .avatar-ring-b { width: 45px; height: 45px; }
  .hero .hero-subtitle span.sub-body { font-size: 14px; }
}

/* Landscape phones: avoid giant thumbnails */
@media (max-height: 480px) and (orientation: landscape) {
  .hero .hero-news-box .ratio-16x9 { height: 110px; --bs-aspect-ratio: 0%; }
}

/*--------------------------------------------------------------
# Navbar: smaller animated HP mark + HPPAL avatar
--------------------------------------------------------------*/
.header .logo .mark { width: 46px; height: 46px; font-size: 24px; border-radius: 12px; margin-right: 10px; }
.header .logo .mark::before { border-radius: 15px; }
.header .nav-avatar { width: 62px; height: 62px; margin-left: 10px; }
.header .nav-avatar .avatar { width: 52px; height: 52px; padding: 2px; }
.header .nav-avatar .avatar-ring-a { width: 62px; height: 62px; }
.header .nav-avatar .avatar-ring-b { width: 56px; height: 56px; }

@media (max-width: 767px) {
  .header .logo .mark { width: 36px; height: 36px; font-size: 19px; border-radius: 10px; margin-right: 0; }
  .header .logo .mark::before { border-radius: 13px; }
  .header .nav-avatar { width: 46px; height: 46px; margin-left: auto; }
  .header .nav-avatar .avatar { width: 38px; height: 38px; }
  .header .nav-avatar .avatar-ring-a { width: 46px; height: 46px; }
  .header .nav-avatar .avatar-ring-b { width: 41px; height: 41px; }
}

/*--------------------------------------------------------------
# Soft Sky light theme (index.html only: body.index-page)
--------------------------------------------------------------*/
body.index-page {
  --background-color: #eef6fd;
  --default-color: #3a4b61;
  --heading-color: #1e3a5f;
  --accent-color: #3b82c4;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
  --nav-color: #3a4b61;
  --nav-hover-color: #3b82c4;
  --nav-mobile-background-color: #ffffff;
  --nav-dropdown-background-color: #ffffff;
  --nav-dropdown-color: #1e3a5f;
  --nav-dropdown-hover-color: #3b82c4;
}

/* Header */
.index-page .header { background-color: color-mix(in srgb, #eef6fd 88%, transparent); border-bottom-color: #c4e0f7; }
.index-page.scrolled .header { background-color: #ffffff; }
.index-page .header .logo .mark { background: linear-gradient(135deg, #3b82c4, #5aa2de); color: #fff; }
.index-page .header .nav-avatar .avatar img { border-color: #eef6fd; }

/* Hero background: pale sky with soft pastel aurora instead of the dark night scene */
.index-page .hero-curvy-bg svg rect { fill: #eef6fd; }
.index-page .hero-curvy-bg svg g[filter] { opacity: 0.4; }
.index-page .hero-curvy-bg svg g[fill="#fff"] { display: none; }
.index-page .hero::before { background: radial-gradient(ellipse, rgba(59, 130, 196, 0.12), transparent 65%); }

/* Hero text */
.index-page .hero .by-label { -webkit-text-fill-color: #3a4b61; color: #3a4b61; }
.index-page .hero .by-label::before,
.index-page .hero .by-label::after { background: linear-gradient(90deg, transparent, #3b82c4); }
.index-page .hero .hero-subtitle span.sub-head { background: linear-gradient(90deg, #2a7ab8, #6a64cf 55%, #c2479d); -webkit-background-clip: text; background-clip: text; }
.index-page .hero .hero-subtitle span.sub-spot,
.index-page .hero .hero-subtitle span.sub-spot span.w { color: #7f93ad; }
.index-page .hero .hero-subtitle span.sub-spot span.w.on,
.index-page .hero .hero-subtitle span.sub-spot span.w:hover { color: transparent; }
.index-page .hero .hero-subtitle span.sub-body { color: #3a4b61; }
.index-page .hero .hero-subtitle span.sub-body b { color: #1e3a5f; border-bottom-color: #3b82c4; }
.index-page .hero .hero-subtitle span.sub-body.typing::after { background: #3b82c4; }
.index-page .hero .hero-subtitle span.rainbow-words b:hover,
.index-page .hero .hero-subtitle span.rainbow-words b:focus { color: transparent; }

/* Name + tagline: darker colour stops so they read on a light background */
@keyframes heroRainbowLight {
  0%, 100% { color: #2a7ab8; }
  25% { color: #6a64cf; }
  50% { color: #c2479d; }
  75% { color: #d97706; }
}
.index-page .hero h1.hero-title .char {
  animation: heroGlowCascade 0.9s ease forwards, heroRainbowLight 3s linear infinite;
  animation-delay: calc(var(--i) * 0.06s), calc(var(--i) * -90ms);
}
.index-page .hero .tagline .c { background-image: linear-gradient(90deg, #2a7ab8, #c2479d, #d97706, #2a7ab8); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; }

/* News cards + ticker */
.index-page .hero .hero-news-box { background: #ffffff; border-color: #c4e0f7; box-shadow: 0 4px 14px rgba(59, 130, 196, 0.10); }
.index-page .hero .hero-news-box:hover { box-shadow: 0 14px 30px rgba(59, 130, 196, 0.22); }
.index-page .hero .hero-news-box h5.hero-news-tag { color: #1e3a5f; text-transform: none; letter-spacing: 0; }
.index-page .hero-ticker { background: rgba(255, 255, 255, 0.75); border-top-color: #c4e0f7; }

/* Divider glow softened for the light page */
.index-page .page-divider-gradient { box-shadow: 0 0 10px rgba(59, 130, 196, 0.35); }

/*--------------------------------------------------------------
# Creative light page background (index.html): pastel aurora + dot grid
--------------------------------------------------------------*/
body.index-page {
  background-color: #eaf4fd;
  background-image:
    radial-gradient(circle at 10% 15%, rgba(125, 211, 252, 0.50), transparent 40%),
    radial-gradient(circle at 90% 10%, rgba(196, 181, 253, 0.45), transparent 38%),
    radial-gradient(circle at 85% 85%, rgba(251, 207, 232, 0.50), transparent 40%),
    radial-gradient(circle at 12% 90%, rgba(167, 243, 208, 0.45), transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.70), transparent 55%),
    linear-gradient(180deg, #f3f9ff, #e4f0fb);
  background-attachment: fixed;
}
body.index-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(59, 130, 196, 0.22) 1.2px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 25%, #000 100%);
  mask-image: radial-gradient(ellipse at center, transparent 25%, #000 100%);
}
/* Let the page background show through the hero */
.index-page .hero-curvy-bg svg rect { fill: transparent; }
.index-page .hero-curvy-bg svg g[filter] { opacity: 0.25; }
.index-page .hero-ticker { background: rgba(255, 255, 255, 0.6); }

/*--------------------------------------------------------------
# Bolder creative light background (index.html): colourful gradient + rings + dots
--------------------------------------------------------------*/
body.index-page {
  background-color: #dff0ff;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(56, 189, 248, 0.55), transparent 38%),
    radial-gradient(circle at 92% 8%, rgba(167, 139, 250, 0.50), transparent 36%),
    radial-gradient(circle at 90% 88%, rgba(244, 114, 182, 0.42), transparent 38%),
    radial-gradient(circle at 10% 92%, rgba(52, 211, 153, 0.42), transparent 36%),
    linear-gradient(135deg, #d9efff 0%, #e8e3ff 50%, #ffe3f0 100%);
  background-attachment: fixed;
}
body.index-page::before {
  background-image: radial-gradient(rgba(59, 130, 196, 0.35) 1.4px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 30%, #000 100%);
  mask-image: radial-gradient(ellipse at center, transparent 30%, #000 100%);
}
/* Concentric rings in two corners */
body.index-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-radial-gradient(circle at 100% 0%, transparent 0 34px, rgba(124, 92, 196, 0.16) 35px 37px),
    repeating-radial-gradient(circle at 0% 100%, transparent 0 34px, rgba(31, 156, 160, 0.16) 35px 37px);
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0, transparent 38%), radial-gradient(circle at 0% 100%, #000 0, transparent 38%);
  mask-image: radial-gradient(circle at 100% 0%, #000 0, transparent 38%), radial-gradient(circle at 0% 100%, #000 0, transparent 38%);
}
.index-page .hero-curvy-bg svg g[filter] { opacity: 0; }
.index-page .header { background-color: rgba(255, 255, 255, 0.55); backdrop-filter: blur(8px); }

/* The generic `section` rule paints an opaque background that hid the page background: make it transparent */
.index-page section,
.index-page .section,
.index-page .hero { background-color: transparent; }

/* Keep the rings to the corners so they don't compete with the hero text */
body.index-page::after {
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0, transparent 24%), radial-gradient(circle at 0% 100%, #000 0, transparent 24%);
  mask-image: radial-gradient(circle at 100% 0%, #000 0, transparent 24%), radial-gradient(circle at 0% 100%, #000 0, transparent 24%);
}

/*--------------------------------------------------------------
# Royal Lagoon animated theme (index.html): medium blue / green / purple flow
--------------------------------------------------------------*/
@keyframes royalLagoonFlow {
  0%, 100% { background-position: 50% 0%; }
  50% { background-position: 50% 100%; }
}
@keyframes heroRainbowSky {
  0%, 100% { color: #ffffff; }
  25% { color: #ffe14d; }
  50% { color: #bff3ff; }
  75% { color: #ffd0ee; }
}

body.index-page {
  --background-color: #1f3f9a;
  --default-color: #eef3ff;
  --heading-color: #ffffff;
  --accent-color: #2a52be;
  --nav-color: #ffffff;
  --nav-hover-color: #ffe14d;
  background-color: #2a52be;
  background-image: linear-gradient(180deg, #2a52be, #0b7d78, #6d3fc7, #2a52be);
  background-size: 100% 400%;
  background-attachment: scroll;
  animation: royalLagoonFlow 14s ease-in-out infinite;
}
body.index-page::before,
body.index-page::after { display: none; }

/* Header: dark glass bar with white links */
.index-page .header,
.index-page.scrolled .header { background-color: rgba(14, 24, 72, 0.55); backdrop-filter: blur(10px); border-bottom-color: rgba(255, 255, 255, 0.18); }
.index-page .header .logo .mark { background: linear-gradient(135deg, #5aa2ff, #8b5cf6); }
.index-page .header .nav-avatar .avatar img { border-color: #ffffff; }
.index-page .navmenu a:hover,
.index-page .navmenu .active { color: #ffe14d; }
@media (min-width: 1200px) { .index-page .navmenu a { color: #ffffff; } .index-page .navmenu a.active,
.index-page .navmenu a:hover { color: #ffe14d; } }
/* Mobile menu: Royal Lagoon animated panel (same gradient + animation as the page) with white links */
@media (max-width: 1199px) {
  .index-page .navmenu ul {
    background-color: #2a52be;
    background-image: linear-gradient(180deg, #2a52be, #0b7d78, #6d3fc7, #2a52be);
    background-size: 100% 400%;
    animation: royalLagoonFlow 14s ease-in-out infinite;
    border: 1px solid rgba(255, 255, 255, 0.25);
  }
  .index-page .navmenu a { color: #ffffff; }
  .index-page .navmenu a:hover,
  .index-page .navmenu a.active { color: #ffe14d; }
}
@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
  .index-page .navmenu ul { animation: none; }
}

/* Hero text: white / light on the medium-tone background */
.index-page .hero .by-label { -webkit-text-fill-color: #f4f7ff; color: #f4f7ff; }
.index-page .hero .by-label::before,
.index-page .hero .by-label::after { background: linear-gradient(90deg, transparent, #ffe14d); }
.index-page .hero .hero-subtitle span.sub-spot,
.index-page .hero .hero-subtitle span.sub-spot span.w { color: #d6e2ff; }
.index-page .hero .hero-subtitle span.sub-spot span.w.on,
.index-page .hero .hero-subtitle span.sub-spot span.w:hover { background: linear-gradient(90deg, #ffe14d, #ffb86b, #ff8fd0, #ffffff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.index-page .hero h1.hero-title .char { animation: heroGlowCascade 0.9s ease forwards, heroRainbowSky 3s linear infinite; animation-delay: calc(var(--i) * 0.06s), calc(var(--i) * -90ms); text-shadow: 0 2px 10px rgba(10, 15, 50, 0.35); }
.index-page .hero h1 .title-underline { background: linear-gradient(90deg, #ffe14d, #ff8fd0); }
.index-page .hero .tagline .c { background-image: linear-gradient(90deg, #fff3a6, #ffffff, #b8fbe0, #fff3a6); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; }
.index-page .hero .hero-subtitle span.sub-body { color: #f1f5ff; }
.index-page .hero .hero-subtitle span.sub-body b { color: #ffffff; border-bottom-color: #ffe14d; }
.index-page .hero .hero-subtitle span.sub-body.typing::after { background: #ffe14d; }

/* Trending button, cards and ticker on the colourful background */
.index-page .hero .hero-trends-btn { background-image: linear-gradient(90deg, #5aa2ff, #ff8fd0, #5aa2ff); background-size: 220% 100%; box-shadow: 0 8px 20px rgba(10, 15, 50, 0.35); }
.index-page .hero .hero-trends-btn .ring { border-color: #ffffff; }
.index-page .hero .hero-news-box { box-shadow: 0 8px 22px rgba(10, 15, 50, 0.25); border-color: rgba(255, 255, 255, 0.6); }
.index-page .hero .hero-news-box:hover { box-shadow: 0 16px 34px rgba(10, 15, 50, 0.4); }
.index-page .hero-ticker { background: rgba(14, 24, 72, 0.35); border-top-color: rgba(255, 255, 255, 0.35); }

@media (prefers-reduced-motion: reduce) { body.index-page { animation: none; } }

/*--------------------------------------------------------------
# Jade Orchid animated theme (replaces Royal Lagoon): breathing jade / orchid / blue glow
--------------------------------------------------------------*/
@keyframes jadeOrchidBreathe {
  0%, 100% { background-size: 140% 140%; }
  50% { background-size: 280% 280%; }
}
body.index-page {
  --background-color: #0d8466;
  --accent-color: #2a63cf;
  background-color: #0d8466;
  background-image: radial-gradient(circle at 50% 35%, #2a63cf, #8a40c0 55%, #0d8466);
  background-repeat: no-repeat;
  background-position: 50% 35%;
  background-size: 140% 140%;
  background-attachment: fixed;
  animation: jadeOrchidBreathe 9s ease-in-out infinite;
}
.index-page .header .logo .mark { background: linear-gradient(135deg, #2a63cf, #8a40c0); }

/*--------------------------------------------------------------
# Azure Violet animated theme (replaces Jade Orchid): vertical blue / violet flow
--------------------------------------------------------------*/
@keyframes azureVioletFlow {
  0%, 100% { background-position: 50% 0%; }
  50% { background-position: 50% 100%; }
}
body.index-page {
  --background-color: #1f68d6;
  --accent-color: #3a50c0;
  background-color: #1f68d6;
  background-image: linear-gradient(180deg, #1f68d6, #7a44d2, #3a50c0, #1f68d6);
  background-repeat: repeat;
  background-position: 50% 0%;
  background-size: 100% 400%;
  background-attachment: fixed;
  animation: azureVioletFlow 12s ease-in-out infinite;
}
.index-page .header .logo .mark { background: linear-gradient(135deg, #3a8bff, #8b5cf6); }

/*--------------------------------------------------------------
# Inner pages (about, management, AI, music, astrology, scriptures, contact)
# share the Azure Violet background but keep dark-theme content colours
--------------------------------------------------------------*/
body.index-page.inner-page {
  --accent-color: #7dd3fc;
  --surface-color: rgba(255, 255, 255, 0.10);
  --contrast-color: #0b1b4a;
}
/* The header keeps the exact look it has on the home page */
.inner-page .header {
  --accent-color: #3a50c0;
  --surface-color: #ffffff;
  --contrast-color: #ffffff;
}
.inner-page .scroll-top i { color: #0b1b4a; }
.inner-page .about-me-tags span { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); color: #ffffff; }
.inner-page .about-me-timeline { border-left-color: rgba(255, 255, 255, 0.35); }
.inner-page .about-me-timeline li::before { background: #7dd3fc; }
.inner-page .footer-email-btn { color: #0b1b4a; }

/*--------------------------------------------------------------
# AI & Web Programming page: white headers, light-blue body text
# (overrides the inline colours so text stays readable on the blue/violet background)
--------------------------------------------------------------*/
.inner-page .AI {
  --default-color: #dbeafe;
  --heading-color: #ffffff;
}
.inner-page .AI .section-title p { color: #dbeafe; }
.inner-page .AI .mn-col-header {
  color: #ffffff !important;
  border-bottom-color: #bfdbfe;
  text-shadow: 0 1px 4px rgba(10, 15, 50, 0.45);
}
.inner-page .AI .mn-tag { color: #bae6fd !important; text-shadow: 0 1px 3px rgba(10, 15, 50, 0.4); }
.inner-page .AI h5.mn-title,
.inner-page .AI h6.mn-title,
.inner-page .AI .mn-featured-title,
.inner-page .AI .mn-featured-title a,
.inner-page .AI h5[style] { color: #ffffff !important; }
.inner-page .AI .mn-title a,
.inner-page .AI .mn-article a[style] { color: #e0f2fe !important; }
.inner-page .AI .mn-meta,
.inner-page .AI .mn-article p,
.inner-page .AI .mn-article-row p,
.inner-page .AI p[style] { color: #cfe3ff !important; }
.inner-page .AI .mn-title a:hover,
.inner-page .AI .mn-article a[style]:hover { color: #ffffff !important; }
/* Title pill: deeper gradient so the white heading text has strong contrast */
.inner-page .AI .management-title-btn {
  background: linear-gradient(90deg, #1e3a8a, #6d28d9, #be185d, #1e3a8a);
  background-size: 220% 100%;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(10, 15, 50, 0.5);
}
.inner-page .AI .section-title p { font-family: "Poppins", sans-serif !important; font-size: 19px; }
/* Subtitle: light blue; descriptions/bylines below it: medium blue */
.inner-page .AI .section-title p { color: #bae6fd; }
.inner-page .AI .mn-meta,
.inner-page .AI .mn-article p,
.inner-page .AI .mn-article-row p,
.inner-page .AI p[style] { color: #93c5fd !important; }
/* Left and right columns: same contrast scheme as the middle column
   (light-blue category label, white title, medium-blue byline) */
.inner-page .AI h6.mn-title:not(:has(a)) {
  color: #bae6fd !important;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 0 1px 3px rgba(10, 15, 50, 0.4);
}
.inner-page .AI .mn-article-row-body a,
.inner-page .AI .mn-title a,
.inner-page .AI .mn-article a[style] { color: #ffffff !important; font-weight: 600; }
.inner-page .AI .mn-title a:hover,
.inner-page .AI .mn-article a[style]:hover { color: #bae6fd !important; }

/*--------------------------------------------------------------
# Management, Music and Vedic Astrology: same text colours as AI & Web Programming
# (white headers, light-blue labels, white titles, medium-blue bylines/descriptions)
--------------------------------------------------------------*/
.inner-page :is(.management, .music, .vedic-astrology) {
  --default-color: #dbeafe;
  --heading-color: #ffffff;
}
.inner-page :is(.management, .music, .vedic-astrology) .section-title p {
  font-family: "Poppins", sans-serif;
  color: #bae6fd !important;
}
.inner-page :is(.management, .music, .vedic-astrology) .management-title-btn {
  background: linear-gradient(90deg, #1e3a8a, #6d28d9, #be185d, #1e3a8a);
  background-size: 220% 100%;
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(10, 15, 50, 0.5);
}
.inner-page :is(.management, .music, .vedic-astrology) .mn-col-header {
  color: #ffffff !important;
  border-bottom-color: #bfdbfe;
  text-shadow: 0 1px 4px rgba(10, 15, 50, 0.45);
}
.inner-page :is(.management, .music, .vedic-astrology) .mn-tag {
  color: #bae6fd !important;
  text-shadow: 0 1px 3px rgba(10, 15, 50, 0.4);
}
.inner-page :is(.management, .music, .vedic-astrology) :is(.mn-title, .mn-featured-title, .mn-econ-title, .mn-title-fluoro),
.inner-page :is(.management, .music, .vedic-astrology) :is(.mn-title, .mn-featured-title) a { color: #ffffff !important; }
.inner-page :is(.management, .music, .vedic-astrology) :is(.mn-title, .mn-featured-title) a:hover { color: #bae6fd !important; }
.inner-page :is(.management, .music, .vedic-astrology) :is(.mn-meta, .mn-small-excerpt, .mn-featured-excerpt, .mn-article p, .mn-article-row p, .mn-video-cap, .t p) { color: #93c5fd !important; }

/* Mobile nav fix: backdrop-filter on the header makes it the containing block for the fixed menu overlay, so drop it while the menu is open */
body.mobile-nav-active .header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }

/* Desktop: hero news carousel spans the visible navbar (logo -> CTA button), about 960px */
@media (min-width: 992px) { .hero .hero-news-nav-wrap { width: min(960px, 96vw); } }

/* Mid carousel gets the same frosted-white bordered frame as the Latest News panel */
.hero .hero-news-nav-wrap {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(59, 130, 196, 0.12);
}
@media (max-width: 767px) { .hero .hero-news-nav-wrap { padding: 10px; } }

/* Keep the < > buttons centred on the cards now that the Spotlight header sits above them */
.hero .hero-news-nav-wrap .hero-news-nav { top: calc(50% + 17px); }
@media (max-width: 767px) { .hero .hero-news-nav-wrap .hero-news-nav { top: calc(36% + 17px); } }

/* Mobile / tablet: no carousel - Spotlight videos are stacked vertically */
@media (max-width: 991px) {
  .hero .hero-news-nav-wrap .hero-news-nav { display: none; }
  .hero .hero-news-carousel { padding-bottom: 0; overflow: visible; }
  .hero .hero-news-carousel .swiper-wrapper {
    display: flex !important;
    flex-direction: column;
    gap: 14px;
    transform: none !important;
    transition: none !important;
    height: auto !important;
  }
  .hero .hero-news-carousel .swiper-slide {
    width: 100% !important;
    max-width: 640px;
    margin: 0 auto !important;
    height: auto !important;
  }
  .hero .hero-news-carousel .swiper-slide-duplicate { display: none !important; }
  .hero .hero-news-carousel .swiper-pagination { display: none; }
  .hero .hero-news-box .ratio-16x9 { height: auto !important; --bs-aspect-ratio: 56.25% !important; }
}

/* Hero news cards: "View Summary" tab sits right-aligned beside "Watch on YouTube" and shares its typing animation */
.hero .hero-news-box .news-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.hero .hero-news-box .news-summary-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, #f06cae));
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero .hero-news-box .news-summary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent-color) 35%, transparent);
}
.hero .hero-news-box .news-summary-btn .type {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 0;
  border-right: 2px solid rgba(255, 255, 255, 0.85);
  animation: heroNewsSummaryTypeCycle 5s ease-in-out infinite;
}
@keyframes heroNewsSummaryTypeCycle {
  0%, 4% { width: 0; }
  45%, 55% { width: 12ch; }
  96%, 100% { width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-news-box .news-summary-btn .type {
    animation: none;
    width: 12ch;
    border-right-color: transparent;
  }
}
.news-summary-modal {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
}
.news-summary-modal .modal-title { font-size: 16px; line-height: 1.35; }
.news-summary-modal .modal-body { font-size: 15px; line-height: 1.6; }

/* Hero news cards: "Watch on YouTube" and "View Summary" tabs share one height */
.hero .hero-news-box .news-actions { align-items: stretch; }
.hero .hero-news-box .news-actions .hero-news-more,
.hero .hero-news-box .news-actions .news-summary-btn {
  box-sizing: border-box;
  height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
  font-family: inherit;
  align-self: auto;
}

.news-summary-modal .news-summary-list { margin: 0; padding-left: 20px; }
.news-summary-modal .news-summary-list li { margin-bottom: 8px; }

/* Summary popup: the site's heading colour is white, so give the popup a dark surface to keep the header visible */
.news-summary-modal {
  background: var(--surface-color);
  color: var(--default-color);
}
.news-summary-modal .modal-header { border-bottom-color: rgba(255, 255, 255, 0.12); }
.news-summary-modal .modal-title { color: var(--heading-color); font-weight: 700; }
.news-summary-modal .modal-body strong { color: var(--heading-color); }
.news-summary-modal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* Summary popup: fixed literal colours so the text is always readable (overrides the variable-based rules above) */
#newsSummaryModal .modal-content.news-summary-modal {
  background: #192134 !important;
  color: #e6ebf5 !important;
}
#newsSummaryModal .modal-header { border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; }
#newsSummaryModal .modal-title { color: #ffffff !important; }
#newsSummaryModal .modal-body,
#newsSummaryModal .modal-body li,
#newsSummaryModal .modal-body span { color: #e6ebf5 !important; }
#newsSummaryModal .modal-body strong { color: #ffffff !important; }

/* Summary popup: style 3 (white body, violet-to-pink gradient header) */
#newsSummaryModal .modal-content.news-summary-modal {
  background: #ffffff !important;
  color: #2a2f45 !important;
  border: 0 !important;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(108, 92, 231, 0.35);
}
#newsSummaryModal.show .modal-content.news-summary-modal {
  animation: newsPopupIn 0.45s ease both;
}
@keyframes newsPopupIn {
  from { opacity: 0; transform: scale(0.85) translateY(10px); }
  to { opacity: 1; transform: none; }
}
#newsSummaryModal .modal-header {
  background: linear-gradient(135deg, #6c5ce7, #f06cae);
  border-bottom: 0 !important;
}
#newsSummaryModal .modal-title { color: #ffffff !important; }
#newsSummaryModal .modal-body,
#newsSummaryModal .modal-body li,
#newsSummaryModal .modal-body span { color: #2a2f45 !important; }
#newsSummaryModal .modal-body strong { color: #1f2340 !important; }
#newsSummaryModal .news-summary-list li::marker { color: #f06cae; }
#newsSummaryModal .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.9; }
@media (prefers-reduced-motion: reduce) {
  #newsSummaryModal.show .modal-content.news-summary-modal { animation: none; }
}

/* Summary popup: fit phones (near full width, scrollable body) and use a roomier width on larger screens */
#newsSummaryModal .modal-dialog {
  width: calc(100% - 24px);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
#newsSummaryModal .modal-content { max-height: calc(100vh - 24px); }
#newsSummaryModal .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 575.98px) {
  #newsSummaryModal .modal-header { padding: 12px 14px; }
  #newsSummaryModal .modal-title { font-size: 15px; }
  #newsSummaryModal .modal-body { padding: 12px 14px 16px; font-size: 14px; line-height: 1.55; }
  #newsSummaryModal .news-summary-list { padding-left: 18px; }
}

/* Summary popup: more compact (narrower, shorter, smaller text) */
#newsSummaryModal .modal-dialog {
  width: calc(100% - 48px);
  max-width: 420px;
}
#newsSummaryModal .modal-content { max-height: 70vh; }
#newsSummaryModal .modal-header { padding: 8px 12px; }
#newsSummaryModal .modal-title { font-size: 14px; }
#newsSummaryModal .modal-body { padding: 10px 12px 12px; font-size: 13px; line-height: 1.45; }
#newsSummaryModal .news-summary-list { padding-left: 16px; }
#newsSummaryModal .news-summary-list li { margin-bottom: 5px; }

/* Recommended Reading: "Key Learning" button under each article card (reuses the video summary popup) */
.hero-ticker-card { position: relative; display: flex; }
.hero-ticker-card .hero-ticker-item { flex: 1; padding-bottom: 44px; }
.hero-ticker-card .ticker-actions { position: absolute; right: 10px; bottom: 8px; z-index: 2; }
.hero-ticker-card .ticker-kl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border: 0;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color) 70%, #f06cae));
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hero-ticker-card .ticker-kl-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

/* Hero subtitle text: Libre Baskerville Italic */
.hero .hero-subtitle span.sub-body {
  font-family: "Libre Baskerville", Georgia, serif;
  font-style: italic;
}
.hero .hero-subtitle span.sub-body b {
  font-weight: 700;
}

/* Hero trending button: Rubik */
.hero .hero-trends-btn {
  font-family: "Rubik", sans-serif;
  font-weight: 600;
}


/* Column panels (same look as the Recommended Reading panel) */
.mn-panel-col {
  position: relative;
  z-index: 1;
}

.mn-panel-col::before {
  content: "";
  position: absolute;
  inset: 0 calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(59, 130, 196, 0.12);
}

.mn-panel-col {
  --heading-color: #1e3a5f;
  --default-color: #1e3a5f;
  color: #1e3a5f;
}

.mn-panel-col a { color: #1e3a5f; }
.mn-panel-col a:hover { color: #0d6efd; }

.mn-panel-col > * {
  margin-left: 14px;
  margin-right: 14px;
}

.mn-panel-col > :first-child { margin-top: 14px; }
.mn-panel-col > :last-child { margin-bottom: 14px; }

.mn-panel-col .mn-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 12px;
  padding-bottom: 8px;
  color: #1e3a5f !important;
}

/* Override inline light colours inside the panels */
.mn-panel-col [style*="color"],
.mn-panel-col h1, .mn-panel-col h2, .mn-panel-col h3, .mn-panel-col h4, .mn-panel-col h5, .mn-panel-col h6,
.mn-panel-col p, .mn-panel-col span, .mn-panel-col li {
  color: #1e3a5f !important;
}
.mn-panel-col .mn-col-header { border-bottom-color: #1e3a5f; }

/* Beat the .inner-page .AI light-on-dark text rules inside the panels */
.inner-page .AI .mn-panel-col .mn-col-header {
  color: #1e3a5f !important;
  border-bottom-color: #1e3a5f;
  text-shadow: none;
}
.inner-page .AI .mn-panel-col .mn-tag,
.inner-page .AI .mn-panel-col h6.mn-title:not(:has(a)) {
  color: #2563a8 !important;
  text-shadow: none;
}
.inner-page .AI .mn-panel-col h5.mn-title,
.inner-page .AI .mn-panel-col h6.mn-title,
.inner-page .AI .mn-panel-col .mn-featured-title,
.inner-page .AI .mn-panel-col .mn-featured-title a,
.inner-page .AI .mn-panel-col h5[style],
.inner-page .AI .mn-panel-col .mn-title a,
.inner-page .AI .mn-panel-col .mn-article a[style],
.inner-page .AI .mn-panel-col .mn-article-row-body a,
.inner-page .AI .mn-panel-col a[style],
.inner-page .AI .mn-panel-col [style*="color"] {
  color: #1e3a5f !important;
}
.inner-page .AI .mn-panel-col .mn-meta,
.inner-page .AI .mn-panel-col .mn-article p,
.inner-page .AI .mn-panel-col .mn-article-row p,
.inner-page .AI .mn-panel-col p[style],
.inner-page .AI .mn-panel-col .mn-small-excerpt {
  color: #3f5f86 !important;
}
.inner-page .AI .mn-panel-col .mn-title a:hover,
.inner-page .AI .mn-panel-col .mn-article a[style]:hover,
.inner-page .AI .mn-panel-col a[style]:hover {
  color: #0d6efd !important;
}

/* Card rows: white rounded card, thumbnail left, orange category, bold blue title */
.inner-page .AI .mn-panel-col :is(.mn-side-row, .mn-article-row) {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  margin: 0 0 12px;
  background: #ffffff;
  border: 1px solid #e6ecf5;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(30, 58, 95, 0.12);
}
.inner-page .AI .mn-panel-col .mn-side-row { flex-direction: row; }
.inner-page .AI .mn-panel-col :is(.mn-side-row, .mn-article-row):last-child { margin-bottom: 0; padding-bottom: 10px; }

.inner-page .AI .mn-panel-col :is(.mn-side-row, .mn-article-row) :is(.mn-media-xs, .mn-media-sm) {
  flex: none;
  width: 64px;
  height: 64px;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}
.inner-page .AI .mn-panel-col :is(.mn-side-row, .mn-article-row) .mn-media-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.inner-page .AI .mn-panel-col :is(.mn-side-row-body, .mn-article-row-body) { flex: 1; min-width: 0; }

/* Category label: orange, uppercase, bold */
.inner-page .AI .mn-panel-col :is(.mn-side-row, .mn-article-row) .mn-tag,
.inner-page .AI .mn-panel-col :is(.mn-side-row, .mn-article-row) h6.mn-title:not(:has(a)) {
  display: block;
  margin: 0 0 2px;
  color: #e0861a !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: none;
}

/* Title: bold blue */
.inner-page .AI .mn-panel-col :is(.mn-side-row, .mn-article-row) h5.mn-title,
.inner-page .AI .mn-panel-col :is(.mn-side-row, .mn-article-row) h5.mn-title a,
.inner-page .AI .mn-panel-col :is(.mn-side-row, .mn-article-row) h6.mn-title a,
.inner-page .AI .mn-panel-col .mn-side-row .mn-side-row-body > a[style] {
  color: #2a4fd6 !important;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
.inner-page .AI .mn-panel-col .mn-side-row .mn-side-row-body > a[style] { font-size: 14px; line-height: 1.25; }
.inner-page .AI .mn-panel-col :is(.mn-side-row, .mn-article-row) :is(h5.mn-title a, h6.mn-title a, .mn-side-row-body > a[style]):hover {
  color: #1b37a0 !important;
}

/* Bylines / descriptions */
.inner-page .AI .mn-panel-col :is(.mn-side-row, .mn-article-row) :is(.mn-meta, p, p[style], span.mn-meta) {
  color: #6b7a90 !important;
  font-size: 11.5px;
  line-height: 1.35;
  margin: 3px 0 0;
}

.inner-page .AI .mn-panel-col > .mn-article-row { margin: 0 14px 12px; }
.inner-page .AI .mn-panel-col .mn-side-row .mn-meta { display: block; line-height: 1.35 !important; }

/* Column headings: Midnight Indigo */
.inner-page .AI .mn-panel-col .mn-col-header {
  color: #1a237e !important;
  border-bottom-color: #1a237e;
}