/* Global Color Variables */

:root {
  --primary-color: #3F00FF;
  --ultramrine-light: #F0EBFF;
  --secondary-color: #F6B025;
  --secondary-color-blue: #D1C4E9;
  --secondary-color-light: #EAE6F1;
  --background-color: #F5F5F5;
  --text-color: #2A292C;
  --text-color-light: #3C3B3F;
  --greay-black-light: #78767F;
  --card-background-color: #FFFFFF;
  --heading-color: #1C1C1C;
  --accent-color: #FF8800;
  --error-color: #FF4D4D;
  --border-color: #E0E0E0;
  --link-color: #3A6EFF;
  --success-color: #28A745;
  --gradient-primary: linear-gradient(90deg, #3F00FF 0%, #F6B025 100%);
  --gradient-background: linear-gradient(180deg, #F5F5F5 0%, #FFFFFF 100%);
  --gradient-colorful: linear-gradient(135deg, #3F00FF 0%, #F6B025 100%);
  --gradient-colorful-light: linear-gradient(135deg, #eee8ff 0%, #ffe8ba 100%);
  --button-primary-bg: #3F00FF;
  --button-primary-hover: #2A00CC;
  --button-secondary-bg: #F6B025;
  --button-secondary-hover: #D9941E;
  --box-shadow-light: 0px 2px 8px rgba(0, 0, 0, 0.05);
  --box-shadow-medium: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --off-white: #c6c6c6;
}

/* color styles */

.primarycolor {
  color: var(--primary-color);
}

/* Display Styles */

.display-1 {
  font-family: 'Futura', sans-serif;
  font-size: clamp(4rem, 2.5rem + 5vw, 6rem) !important;
  line-height: 1.52 !important;
  letter-spacing: normal !important;
}

.display-2 {
  font-family: 'Futura', sans-serif;
  font-size: clamp(3.5rem, 2.25rem + 4vw, 5rem) !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
}

.display-3 {
  font-family: 'Futura', sans-serif;
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem) !important;
  line-height: 1.56 !important;
}

.display-4 {
  font-family: 'Futura', sans-serif;
  font-size: clamp(2.5rem, 1.8rem + 2.5vw, 4rem) !important;
  line-height: 1.55 !important;
}

/* Heading Styles */

.h1, h1 {
  font-family: 'Futura', sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 4vw, 2.8rem) !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
}

.h2, h2 {
  font-family: 'Futura', sans-serif;
  font-size: clamp(1.25rem, 1.05rem + 3vw, 2.6rem) !important;
  line-height: 1.3 !important;
}

.h3, h3 {
  font-family: 'Futura', sans-serif;
  font-size: clamp(1.125rem, 1rem + 2vw, 2rem) !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
}

.h4, h4 {
  font-family: 'Futura', sans-serif;
  font-size: clamp(1rem, 0.95rem + 1.2vw, 1.5rem) !important;
  line-height: 1.45 !important;
}

.h5, h5 {
  font-family: 'Futura', sans-serif;
  font-size: clamp(0.94rem, 0.9rem + 0.8vw, 1.25rem) !important;
  line-height: 1.5 !important;
}

.h6, h6 {
  font-family: 'Futura', sans-serif;
  font-size: clamp(0.9rem, 0.85rem + 0.6vw, 1.05rem) !important;
  line-height: 1.6 !important;
}

/* Body Text */

.body-1 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.25px !important;
}

.body-2 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: clamp(1rem, 1rem + 0.4vw, 1.125rem) !important;
  line-height: 1.4 !important;
  letter-spacing: 0.2px !important;
}

.body-3 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.2px !important;
}

/* Caption and Footnotes */

.caption {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: clamp(0.6875rem, 0.65rem + 0.1vw, 0.8125rem) !important;
  line-height: 1.4 !important;
  letter-spacing: 0.2px !important;
}

.footnote {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 0.875rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.15px !important;
}

.footnotecaps {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 0.875rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.15px !important;
  text-transform: uppercase !important;
}

.subtitle-2 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.4vw, 1.25rem) !important;
  line-height: 1.5;
  letter-spacing: 0.15px;
}

.subtitle-1 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.125rem) !important;
  line-height: 1.5;
  letter-spacing: 0.15px;
}

/* Font Weights */

.font-weight-regular {
  font-weight: 400 !important;
}

.font-weight-medium {
  font-weight: 500 !important;
}

.font-weight-semibold {
  font-weight: 600 !important;
}

.font-weight-bold {
  font-weight: 700 !important;
}

/* Navbar */

/* Full-Screen Section */

@media (min-height: 940px) {
  .fullscreen-section {
    height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-color);
  }
}

.nav-tabs {
  --bs-nav-tabs-border-width: var(--bs-border-width);
  --bs-nav-tabs-border-color: var(--background-color);
  --bs-nav-tabs-border-radius: var(--bs-border-radius);
  --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
  --bs-nav-tabs-link-active-color: var(--text-color);
  --bs-nav-tabs-link-active-bg: var(--background-color);
  --bs-nav-tabs-link-active-border-color: var(--background-color);
  /*border-bottom: var(--background-color);*/
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
  isolation: isolate;
  border-color: var(--background-color);
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: var(--primary-color);
  background-color: var(--background-color);
  border-color: var(--background-color);
  font-weight: 600;
  text-decoration: none;
}

.nav-link-underline {
  text-decoration: underline;
}

.nav-link-underline:hover {
  text-decoration: none;
}

/* Marquee Section */

.marquee-section {
  width: 100%;
  overflow: hidden;
  background-color: var(--background-color, #f5f5f5);
  padding: 1rem 0;
  position: relative;
}

/* Marquee Content */

.marquee-content {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: marquee 15s linear infinite;
  color: var(--primary-color, #3F00FF);
}

/* Individual Content Items */

.marquee-content span {
  white-space: nowrap;
  font-size: clamp(1rem, 0.9rem + 0.3vw, 1.125rem);
  font-weight: 600;
}

/* Marquee Animation */

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-30%);
  }
}

/* projects card styles */

@media (min-width: 577px) and (max-width: 768px) {
  .casestudy-leftimagecard {
    border-radius: 20px 2px 2px 20px;
    width: 30% !important;
    align-items: end;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .casestudy-lefttextcard {
    border-radius: 20px 2px 2px 20px;
    width: 68% !important;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .casestudy-rightimagecard {
    border-radius: 2px 20px 20px 2px;
    width: 30% !important;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .casestudy-righttextcard {
    border-radius: 2px 20px 20px 2px;
    width: 68% !important;
  }
}

@media (min-width: 768px) {
  .casestudy-leftimagecard {
    border-radius: 20px 2px 2px 20px;
    width: 33.7% !important;
  }
}

@media (min-width: 768px) {
  .casestudy-lefttextcard {
    border-radius: 2px 20px 20px 2px;
    width: 66.2% !important;
  }
}

@media (min-width: 768px) {
  .casestudy-rightimagecard {
    border-radius: 2px 20px 20px 2px;
    width: 33.7% !important;
  }
}

@media (min-width: 768px) {
  .casestudy-righttextcard {
    border-radius: 20px 2px 2px 20px;
    width: 66.2% !important;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  .fixwrap {
    flex-wrap: nowrap !important;
  }
}

@media (min-width: 200px) and (max-width: 576px) {
  .casestudy-leftimagecard {
    border-radius: 20px 20px 0px 0px;
    width: 100% !important;
  }
}

@media (min-width: 200px) and (max-width: 576px) {
  .casestudy-lefttextcard {
    border-radius: 0px 0px 0px 0px;
    width: 100% !important;
  }
}

@media (min-width: 200px) and (max-width: 576px) {
  .casestudy-rightimagecard {
    border-radius: 20px 20px 0px 0px;
    width: 100% !important;
  }
}

@media (min-width: 200px) and (max-width: 576px) {
  .casestudy-righttextcard {
    border-radius: 0px 0px 0px 0px;
    width: 100% !important;
  }
}

/* dxter Styling */

@media (min-width: 600px) {
  .dextrcasestudy-cardcolors {
    background: var(--ultramrine-light);
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    /*background-image: radial-gradient(circle at 3.8% 4.5%, rgba(83, 183, 124, 0.22) 0%, rgba(0, 145, 255, 0.00) 96%);*/
  }
}

@media (min-width: 200px) and (max-width: 576px) {
  .casestudy-responsive-margin {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
}

@media (min-width: 200px) and (max-width: 576px) {
  .casestudy-card-columnoutline-dextr {
    border-radius: 20px 20px 20px 20px;
    background: var(--ultramrine-light);
    outline: 2px solid #53B77C;
    outline-offset: -2px;
    background-image: radial-gradient(circle at 3.8% 4.5%, rgba(83, 183, 124, 0.22) 0%, rgba(0, 145, 255, 0.00) 96%);
  }
}

@media (min-width: 200px) and (max-width: 576px) {
  .dextrcasestudy-cardcolors {
    background: var(--ultramrine-light);
    outline: 2px solid var(--primary-color);
    outline-offset: none;
    background-image: none;
  }
}

/* GraphIQ styling */

@media (min-width: 576px) {
  .dextrcasestudy-cardcolors {
    background: var(--ultramrine-light);
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    /*background-image: radial-gradient(circle at 3.8% 4.5%, rgba(83, 183, 124, 0.22) 0%, rgba(0, 145, 255, 0.00) 96%);*/
  }
}

@media (min-width: 200px) and (max-width: 576px) {
  .casestudy-card-columnoutline-dextr {
    border-radius: 20px 20px 20px 20px;
    background: var(--ultramrine-light);
    outline: 2px solid #53B77C;
    outline-offset: -2px;
    background-image: radial-gradient(circle at 3.8% 4.5%, rgba(83, 183, 124, 0.22) 0%, rgba(0, 145, 255, 0.00) 96%);
  }
}

@media (min-width: 200px) and (max-width: 576px) {
  .dextrcasestudy-cardcolors {
    background: var(--ultramrine-light);
    outline: 2px solid var(--primary-color);
    outline-offset: none;
    /*background-image: none;*/
  }
}

.cardpill {
  background: var(--secondary-color);
  /*outline: 2px solid var(--secondary-color-blue);*/
  /*outline-offset: -2px;*/
  border-radius: 100px;
}

/* Medium Devices */

@media (min-width: 0px) and (max-width: 950px) {
  .herotextwidth {
    width: 100%;
  }
}

/* Extra-Large Devices (992px and above) */

@media (min-width: 951px) {
  .herotextwidth {
    max-width: 100%;
  }
}

a:hover {
  color: var(--primary-color)!important;
  font-weight: 500;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: var(--primary-color);
  font-weight: 700;
  border-bottom: 2px solid;
}

@media (min-height: 970px) {
  .dynamicpadding {
    margin-top: 5rem !important;
  }
}

@media (min-width: 1048px) {
  .dynamicpaddingcasestudysections-40 {
    margin-top: 2.5rem !important;
  }
}

@media (max-width: 1047px) {
  .dynamicpaddingcasestudysections-40 {
    margin-top: 1.5rem !important;
  }
}

@media (min-width: 900px) {
  .card-padding-right {
    margin-top: 2.4rem !important;
  }
}

@media (max-width: 576px) {
  .casestudy-card-image-sizeontablet {
    width: 250px;
  }
}

@media (max-width: 576px) {
  .casestudy-card-text-insidepadding {
    padding-left: 12px!important;
    padding-bottom: 12px !important;
  }
}

.footer-height-maintainer {
  height: 286px;
}

@media (max-width: 576px) {
  .heroimage {
    height: 320px !important;
  }
}

@media (max-width: 900px) {
  .casestudypadding-responsive {
    padding-right: 8px;
    padding-left: 8px;
  }
}

@media (max-width: 1063px) {
  .casestudytextpadding {
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (max-width: 768px) {
  .subtitle-1.subheading-casestudy-width {
    max-width: 100% !important;
  }
}

/* Image Zoom */

/* Modal body styling */

.modal-body {
  padding: 0;
  margin: 0;
  background-color: #000000a8;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Fit the image within the screen */

.modal-body img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: auto;
}

/* Define a CSS variable for scroll speed */

:root {
  --scroll-speed: 20s;
}

/* Full-screen container */

.full-screen-container {
  height: 80vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Image wrapper for animation */

.image-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  animation: scrollImageRightToLeft var(--scroll-speed) linear infinite;
  animation-play-state: running;
}

/* Slow down on hover
  .image-wrapper:hover {
    animation-duration: var(--hover-speed); /* Slow down the animation
  } */

/* Image Styling */

.image-wrapper img {
  height: 100%;
  width: auto;
  display: block;
}

/* Keyframes for right-to-left scrolling */

@keyframes scrollImageRightToLeft {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Static Text Styling */

.static-text {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.ignore-a-hover:hover {
  font-weight: initial!important;
  text-decoration: none;
  color: var(--primary-color);
}

.ignore-a-hover {
  text-decoration: none!important;
  color: var(--text-color);
}

@media (max-width: 765px) {
  .killpadding {
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
}

.nav-link:focus, .nav-link:hover {
  color: var(--primary-color)!important;
}

.btn:hover {
  color: var(--text-color-light)!important;
  background-color: var(--secondary-color-blue)!important;
  border-color: var(--primary-color);
}

/* =============================================================== */

/* Site-wide dotted background + icon spotlight */

/* =============================================================== */

/* 0) make sure body can hold a mask and stay scrollable */

html, body {
  height: 100%;
}

body.dotted-site {
  position: relative;
  overflow-x: hidden;
  background: repeating-radial-gradient(#d0d0d0 0 2px, transparent 2px 32px);
  /*default: no mask so mobile sees everything;*/
}

/* 1) icons wrapper — spans the viewport, stays fixed while you scroll */

body.dotted-site .ux-icons {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* 2) single icon (inline SVG) */

.ux-icon {
  position: absolute;
  width: 48px;
  height: 48px;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .25s ease-out, transform .25s ease-out;
  will-change: opacity, transform;
  fill: var(--bs-body-color, #212529);
  pointer-events: auto;
}

/* ------- Desktop spotlight -------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  body.dotted-site {
    --r: 64px;
    --x: -150px;
    --y: -150px;
    mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #fff 100%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #fff 100%, transparent 100%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-type: luminance;
  }
}

/* Icons fade in within the spotlight */

@media (hover: hover) and (pointer: fine) {
  body.dotted-site .ux-icon {
    opacity: .35;
  }
}

/* Extra pop and scale reset when you hover an icon directly */

@media (hover: hover) and (pointer: fine) {
  body.dotted-site .ux-icon:hover, body.dotted-site .ux-icon:focus-visible {
    opacity: 1;
    transform: scale(1);
  }
}

/* ------- Touch screens & motion-sensitive ----------------------- */

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  body.dotted-site .ux-icon {
    opacity: .35;
    transform: scale(.9);
  }
}

/* ===== Skill-burst v3  —  pastel, asymmetric, no overlap ====== */

.skill-burst {
  position: relative;
  display: inline-block;
}

.skill-burst img {
  display: block;
}

/* base tag ----------------------------------------------------- */

.skill {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(.15);
  opacity: 0;
  font-size: .8rem;
  font-weight: 500;
  line-height: 1.35;
  padding: .35rem .9rem;
  border-radius: 6px;
  color: #242424;
  white-space: nowrap;
  transition: transform .45s cubic-bezier(.25,.8,.25,1), opacity .45s;
}

/* arrow (triangle) -------------------------------------------- */

.skill::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  transform: rotate(var(--arrow,0deg));
}

/* --------- individual tags: colour, offset, arrow placement --- */

/* 1 ▸ top-left corner ---------------------------------------- */

.s1 {
  --bg: #FFE5EC;
  --x: -200px;
  --y: -150px;
  --arrow: 45deg;
}

.s1, .s1::after {
  background: var(--bg);
  border-top-color: var(--bg);
}

.s1::after {
  top: 100%;
  left: 50%;
  translate: -50% 4px;
}

/* 2 ▸ top-right corner --------------------------------------- */

.s2 {
  --bg: #D0F4DE;
  --x: 200px;
  --y: -150px;
  --arrow: -45deg;
}

.s2, .s2::after {
  background: var(--bg);
  border-top-color: var(--bg);
}

.s2::after {
  top: 100%;
  left: 50%;
  translate: -50% 4px;
}

/* 3 ▸ mid-left edge ------------------------------------------ */

.s3 {
  --bg: #FFF1BD;
  --x: -160px;
  --y: -15px;
  --arrow: 45deg;
}

.s3, .s3::after {
  background: var(--bg);
  border-top-color: var(--bg);
}

.s3::after {
  right: 100%;
  top: 50%;
  translate: 4px -50%;
}

/* 4 ▸ mid-right edge ----------------------------------------- */

.s4 {
  --bg: #D7E3FC;
  --x: 260px;
  --y: 35px;
  --arrow: -45deg;
}

.s4, .s4::after {
  background: var(--bg);
  border-top-color: var(--bg);
}

.s4::after {
  right: 100%;
  top: 50%;
  translate: -4px -50%;
}

/* 5 ▸ bottom-left corner ------------------------------------- */

.s5 {
  --bg: #E0C3FC;
  --x: -180px;
  --y: 190px;
  --arrow: 135deg;
}

.s5, .s5::after {
  background: var(--bg);
  border-top-color: var(--bg);
}

.s5::after {
  bottom: 100%;
  left: 50%;
  translate: -50% -4px;
}

/* 6 ▸ bottom-right corner ------------------------------------ */

.s6 {
  --bg: #C8E7FF;
  --x: 180px;
  --y: 190px;
  --arrow: -135deg;
}

.s6, .s6::after {
  background: var(--bg);
  border-top-color: var(--bg);
}

.s6::after {
  bottom: 100%;
  left: 50%;
  translate: -50% -4px;
}

/* reveal on hover --------------------------------------------- */

.skill-burst:hover .skill {
  opacity: 1;
  transform: translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1);
}

/* touch screens / motion-sensitive: always visible ------------- */

@media (pointer:coarse), (prefers-reduced-motion:reduce) {
  .skill {
    opacity: .85;
    transform: translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1);
  }
}

@media (pointer:coarse), (prefers-reduced-motion:reduce) {
  .skill::after {
    display: none;
  }
}

/* ============================================================= */

/* Compact circle ➜ full rect on hover (no text clipping) */

/* ============================================================= */

/* --- overall card container ---------------------------------- */

.pc-compact {
  display: block;
  position: relative;
  padding: 48px 18px 28px;
  text-align: center;
  color: var(--bs-body-color, #242424);
  text-decoration: none;
  transition: all .45s cubic-bezier(.25,.8,.25,1);
}

/* --- circle thumbnail ---------------------------------------- */

.pc-thumb {
  --d: 260px;
  width: var(--d);
  height: var(--d);
  margin: 0 auto;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  overflow: hidden;
  background: var(--background-color);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .45s cubic-bezier(.25,.8,.25,1);
}

.pc-thumb img {
  max-width: 100%;
  height: auto;
  transition: transform .45s;
}

/* title & description (default) ------------------------------- */

.pc-title {
  margin: 24px 0 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: inherit;
}

.pc-desc {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  color: rgba(var(--bs-body-color-rgb, 36,36,36), .75);
  transition: opacity .3s .05s, max-height .3s .05s;
}

/* === EXPANDED on hover / keyboard focus ====================== */

.pc-compact:hover, .pc-compact:focus-within {
  padding: 56px 56px;
  border-radius: 16px;
  background: var(--background-color);
  box-shadow: 0 24px 48px rgba(0,0,0,.15);
}

.pc-compact:hover .pc-thumb, .pc-compact:focus-within .pc-thumb {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.pc-compact:hover .pc-thumb img, .pc-compact:focus-within .pc-thumb img {
  transform: scale(1.08);
}

.pc-compact:hover .pc-desc, .pc-compact:focus-within .pc-desc {
  opacity: 1;
  max-height: 400px;
}

/* turn off tilt while expanded */

.project-card.hover-tilt-left:hover, .project-card.hover-tilt-right:hover {
  transform: none;
}

/* --- touch screens & reduced-motion -------------------------- */

@media (pointer:coarse), (prefers-reduced-motion:reduce) {
  .pc-desc {
    opacity: 1;
    max-height: none;
  }
}

@media (pointer:coarse), (prefers-reduced-motion:reduce) {
  .pc-compact {
    padding: 56px;
  }
}

@media (pointer:coarse), (prefers-reduced-motion:reduce) {
  .pc-thumb {
    width: 100%;
    height: auto;
    border-radius: 16px;
  }
}

@media (pointer:coarse), (prefers-reduced-motion:reduce) {
  .pc-thumb img {
    transform: none;
  }
}

/* === EXPANDED on hover / keyboard focus ====================== */

.pc-compact:hover, .pc-compact:focus-within {
  padding: 56px 56px;
  border-radius: 16px;
  background: var(--background-color);
  box-shadow: 0 24px 48px rgba(0,0,0,.15);
}

/* remove bg + shadow from the thumbnail itself */

.pc-compact:hover .pc-thumb, .pc-compact:focus-within .pc-thumb {
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: none;
  box-shadow: none;
}

/* ===== hero headline rotator ================================= */

.hero-heading {
  font-weight: 700;
  font-size: clamp(2.5rem,5vw,4rem);
  line-height: 1.2;
  text-align: left;
  color: var(--text-color,#212529);
}

/* mask window */

.hero-rotator {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.2em;
}

/* each line */

.hero-rotator .phrase {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  transform: translateY(0);
  transition: transform .55s cubic-bezier(.25,.8,.25,1);
}

/* states */

.phrase.exit {
  transform: translateY(-100%);
}

/* slide up & out */

.phrase.enter {
  transform: translateY( 100%);
}

/* start below slot */

.phrase.enter.show {
  transform: translateY(0);
}

/* slide into view */

/* headline look */

.hero-heading {
  font-weight: 700;
  font-size: clamp(2.5rem,5vw,4rem);
  line-height: 1.2;
  color: var(--text-color,#212529);
}

/* fade-in / fade-out */

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(0.6rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#hero-rotate.animate-out {
  animation: fadeOut .5s forwards;
}

#hero-rotate.animate-in {
  animation: fadeIn .5s forwards;
}

/* ------------------------------------------------------------- */

/* Responsive hero portrait */

/* ------------------------------------------------------------- */

/* 1) default: mobile-first  ----------------------------------- */

.hero-photo {
  width: clamp(250px, 38vw, 340px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  max-width: 100%;
}

/* 2) large tablets & small laptops (≥ 992 px) ------------------ */

@media (min-width: 992px) {
  .hero-photo {
    width: 380px;
  }
}

/* locks at a comfortable desktop size */

/* 3) big monitors (≥ 1400 px) ---------------------------------- */

@media (min-width: 1400px) {
  .hero-photo {
    width: 440px;
  }
}

/* gives the image a touch more presence */

@media (min-width: 992px) {
  .casestudypadding-one-personajm {
    padding: 0;
    margin-left: -100px;
    margin-top: 32px;
  }
}

.cta-hover:hover {
  background: var(--gradient-colorful-light)!important;
}

@media (max-width: 991px) {
  .hide-under-lg {
    display: none !important;
  }
}