.section-header {
    max-width: 100%;
}
/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 10px 0;
  background: black;
  min-height: 50px;
  margin-top: 71px;
}

.breadcrumbs h2 {
  margin: 0;
  padding-top: 4px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.045rem;
  color: white;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.030em;
}

.breadcrumbs ol li + li {
  margin-top: 8px;
  padding-left: 7px;
  font-weight: 700;
  color: white;
  letter-spacing: normal;
}

.breadcrumbs ol a {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: normal;
  display: inline-block;
}

.breadcrumbs ol a:hover {
  color: #4bc4ff;
}

.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 16px;
  padding-left: 13px;
  color: #ffffff60;
  content: "|";
}

.breadcrumbs.sticky-top {
  top: 70px;
  z-index: 100;
}

.bi.bi-arrow-left {
  font-size: 26px;
  margin-right: 14px;
  display: inline-block;
}

.breadcrumbs .d-flex {
  gap: 1rem;
}

.breadcrumbs .custom-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  padding: 0;
}

.breadcrumbs .custom-list li {
  list-style: none;
  margin: 0 0 0 0.5rem;
}

.breadcrumbs .custom-list a {
  display: inline-flex;
  align-items: center;
}

.breadcrumbs .custom-list i {
  margin-right: 0.75rem;
}

.gradient-text {
  display: inline-block;
  color: white;
  transition: color 0.2s ease;
}

.gradient-text:hover {
  /*background-image: linear-gradient(90deg, #feb8ff, #e990ff, #4fdcff);*/
  background-image: linear-gradient(90deg, #feb8ff, #e990ff, #c793ff);
  background-size: 150% 100%;
  background-position: 100% 50%;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


/*--------------------------------------------------------------
# Static Hero Section
--------------------------------------------------------------*/
.hero-static {
  width: 100%;
  min-height: 50vh;
  background: url("../img/hero-bg.png") center center;
  background-size: cover;
  position: relative;
  padding: 120px 0 60px;
}

.hero-static h2 {
  margin: 0 0 10px 0;
  font-size: 48px;
  font-weight: 300;
  color: var(--color-secondary);
  font-family: var(--font-secondary);
}

.hero-static h2 span {
  color: var(--color-primary);
}

.hero-static p {
  color: rgba(var(--color-secondary-rgb), 0.8);
  margin: 0 0 30px 0;
  font-size: 20px;
  font-weight: 400;
}

.hero-static .btn-get-started {
  font-size: 16px;
  font-weight: 400;
  display: inline-block;
  padding: 10px 28px;
  border-radius: 4px;
  transition: 0.5s;
  color: var(--color-white);
  background: var(--color-primary);
  font-family: var(--font-secondary);
}

.hero-static .btn-get-started:hover {
  background: rgba(var(--color-primary-rgb), 0.8);
}

.hero-static .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  margin-left: 25px;
  font-family: var(--font-secondary);
  color: var(--color-secondary);
  font-weight: 600;
}

.hero-static .btn-watch-video i {
  color: var(--color-primary);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.hero-static .btn-watch-video:hover {
  color: var(--color-primary);
}

.hero-static .btn-watch-video:hover i {
  color: rgba(var(--color-primary-rgb), 0.8);
}



/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.section-header .container h1 {
  margin-top: 24px;
}

.portfolio-details {
  padding-top: 0;
  background: linear-gradient(30deg, #000 0%, #333143 50%, white 50%, white 100%);
  max-height: 500px;
}

.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 28px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--color-white);
  opacity: 1;
  border: 1px solid var(--color-primary);
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #34b7a7;
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0 0 30px rgba(34, 34, 34, 0.08);
  margin-top: 140px;
  background: white;
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li + li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding: 0 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-description h3 {
  padding: 20px 0 10px 0;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  width: 85%;
  color: #434343;
}

.portfolio-description.samples p {
  width: 65%;
  padding-bottom: 28px;
}

#portfolio-details {
  width: 100%;
  height: 500px;
  /*background: linear-gradient(30deg, #000 0%, #333143 50%, white 50%, white 100%);*/
}

.custom-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.custom-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0;
}

/*--------------------------------------------------------------
# Story Overview & Challenge
--------------------------------------------------------------*/
section.story-overview {
  padding-top: 20px;
}

.challenge .section-header h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.story-overview .portfolio-info {
  padding-right: 15%;
}

.story-overview .section-header {
  margin-bottom: 32px;
  border-bottom: 1px solid rgba(74, 79, 84, 0.2);
}

/*--------------------------------------------------------------
# Approach Section
--------------------------------------------------------------*/
.approach {
  padding: 0;
  padding-bottom: 0;
  background: #000;
}

.approach .container .row > * {
  flex-shrink: 0;
  max-width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-top: var(--bs-gutter-y);
}

.approach .icon-box {
  position: relative;
  overflow: hidden;
  width: 100%;
  transition: all 0.3s ease-in-out;
  z-index: 1;
}

.approach .icon-box::before {
  content: "";
  position: absolute;
  background: #d9f1f2;
  right: 0;
  left: 0;
  bottom: 0;
  top: 100%;
  transition: all 0.3s;
  z-index: -1;
  border-bottom: 1px solid #e3e3e3;
}

.icon img {
  margin: 10px 0 12px 0;
}

.approach h4 {
  font-weight: bold;
  font-size: 1.25rem;
  margin-bottom: 0.20rem;
}

.approach p.description {
  font-size: 90%;
  color: #4d4a54;
}

#approach a.scrollto {
  display: block;
  padding: 90px 30px;
  color: black;
  border-top: 4px solid #000;
}

#approach a.scrollto:hover {
  border-top: 4px solid #05a2ee;
}

.counts .count-box i {
  display: block;
  font-size: 30px;
  color: #3fbbc0;
  float: left;
}

.approach-planning .section-header {
  max-width: 80%;
  text-align: left;
}

.approach-planning .section-header h2 {
  margin: 0 auto;
}

/*--------------------------------------------------------------
# Portfolio Images
--------------------------------------------------------------*/
.portfolio-image {
  margin: 16px 0;
  padding: 28px 0;
  width: 100%;
  min-height: 300px;
  border-bottom: 1px solid rgba(74, 79, 84, 0.2);
  background: #f8f8f8;
  border-radius: 12px;
}

.portfolio-info .portfolio-image img {
  width: 1100px;
  padding: 20px 150px;
  background: #fff;
}

.portfolio-info .portfolio-image.port-img-lg img {
  padding: 4px;
}

.portfolio-info .portfolio-image.port-img-lgAI {
  width: 1296px;
}

.portfolio-info .portfolio-image.port-img-lgAI img {
  width: 1080px;
  padding: 20px;
}

/*--------------------------------------------------------------
# Icon Box
--------------------------------------------------------------*/
.icon-box {
  text-align: left;
}

.icon-box .icon {
  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 24px;
  color: #000000;
  font-size: 64px;
  -webkit-text-stroke-width: 5px;
  -webkit-text-stroke-color: #f8f8f8;
}

.icon-box .icon .bi-rocket-takeoff {
  -webkit-text-stroke-width: 3px;
}

.icon-box .icon i {
  line-height: 1;
}

/*--------------------------------------------------------------
# Responsibility Labels
--------------------------------------------------------------*/
.responsibility-label,
.responsibility-description {
  display: inline-block;
  text-transform: uppercase;
  font-size: 70%;
  letter-spacing: 0.035em;
  color: #888888;
}

.responsibility-label {
  padding: 12px 5px 10px 0;
  font-weight: bold;
}

.responsibility-description {
  padding: 12px 40px 10px 5px;
}

/*--------------------------------------------------------------
# Case Study Hero Sections
--------------------------------------------------------------*/

#portfolio-details {
  position: relative;
  width: 100%;
  min-height: 500px;
  height: 500px; /* Fixed height */
  background-image: url("../img/portfolio/portfolio-page-hero-irshpc.png");
    /*linear-gradient(30deg, #000 0%, #333143 50%, white 50%, white 100%);*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 500px, cover;
  background-blend-mode: normal;
}

 /*IRS Hoempage */
#portfolio-details.irshpc {
  position: relative;
  height: 500px; /* Fixed height */
  background-image: url("../img/portfolio/portfolio-page-hero-irshpc.png");
  background-size: auto 430px; /* Height = 460px, width auto to maintain aspect ratio */
  background-position: center; /* Vertically and horizontally centered */
  background-repeat: no-repeat;
}

#portfolio-details.irshpc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Changed from min-height to height for exact 500px */
  background-image: linear-gradient(to bottom, rgba(0, 31, 63, 0.5), rgba(0, 20, 40, 0.5)), 
                    url("../img/portfolio/portfolio-page-hero-irshpc.png");
  background-size: 100% 100%, cover; /* Gradient fills 100%, image covers */
  background-position: bottom;
  background-repeat: no-repeat;
  filter: blur(10px);
  transform: scale(1.1);
  z-index: -1;
}

#portfolio-details.irshpc::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 430px;
  width: 1300px; /* Fixed width based on 16:9 aspect ratio (460 * 16/9 ≈ 818px) */
  max-width: calc(100% - 40px); /* Prevents overflow on smaller screens with 20px margin on each side */
  /*background-image: url(../img/portfolio/portfolio-page-hero-irshpc.png), linear-gradient(30deg, #c0c0c0d1 0%, #ffffffe0 50%, #ffffff38 50%, #999999c7 100%);*/
  background-image: url(../img/portfolio/portfolio-page-hero-irshpc.png), linear-gradient(30deg, #c0c0c0a1 0%, #ffffff 50%, #ffffff 50%, #999999 100%);
  background-size: inherit;
  background-position: center;
  background-repeat: no-repeat;
  border: 6px solid #dbe9f05c;
  border-radius: 18px;
  overflow: hidden;
  z-index: 1;
}


/*IRS Design System */
#portfolio-details.irsds {
  position: relative;
  height: 500px; /* Fixed height */
  background-image: url("../img/portfolio/portfolio-piece-irsds-design-system.png");
  background-size: auto 430px; /* Height = 460px, width auto to maintain aspect ratio */
  background-position: center; /* Vertically and horizontally centered */
  background-repeat: no-repeat;
}

#portfolio-details.irsds::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Changed from min-height to height for exact 500px */
  background-image: linear-gradient(to bottom, rgba(0, 31, 63, 0.5), rgba(0, 20, 40, 0.5)), 
                    url("../img/portfolio/portfolio-piece-irsds-design-system.png");
  background-size: 100% 100%, cover; /* Gradient fills 100%, image covers */
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(10px);
  transform: scale(1.1);
  z-index: -1;
}

#portfolio-details.irsds::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 430px;
  width: 1300px; /* Fixed width based on 16:9 aspect ratio (460 * 16/9 ≈ 818px) */
  max-width: calc(100% - 40px); /* Prevents overflow on smaller screens with 20px margin on each side */
  background-image: url("../img/portfolio/portfolio-page-hero-irsds.png");
  background-size: initial;
  background-position: center;
  background-repeat: no-repeat;
  border: 6px solid #dbe9f05c;
  border-radius: 18px;
  overflow: hidden;
  z-index: 1;
}

/*background-image: url("../img/portfolio/portfolio-page-hero-irsar5.png");*/
/*IRS Accounts */
#portfolio-details.irsar {
  position: relative;
  height: 500px; 
  background-image: url("../img/portfolio/promo-irs-ar.jpg");
  
  background-size: auto 430px; 
  background-position: center; 
  background-repeat: no-repeat;
}

#portfolio-details.irsar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Changed from min-height to height for exact 500px */
  background-image: linear-gradient(to bottom, rgba(0, 31, 63, 0.5), rgba(0, 20, 40, 0.5)), 
                    url("../img/portfolio/promo-irs-ar.jpg");
  background-size: 100% 100%, cover; /* Gradient fills 100%, image covers */
  background-position: bottom;
  background-repeat: no-repeat;
  filter: blur(10px);
  transform: scale(1.1);
  z-index: -1;
}

#portfolio-details.irsar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 430px;
  width: 1300px; /* Fixed width based on 16:9 aspect ratio (460 * 16/9 ≈ 818px) */
  max-width: calc(100% - 40px); /* Prevents overflow on smaller screens with 20px margin on each side */
  background-image: url("../img/portfolio/portfolio-page-hero-irsar8.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /*border: 6px solid #dbe9f05c;*/
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
}

/*IRS Research Re[psitory] */
#portfolio-details.irsrr {
  position: relative;
  height: 500px; /* Fixed height */
  background-image: url("../img/portfolio/portfolio-piece-irsrr-atlasboard.png");
  background-size: auto 430px; /* Height = 460px, width auto to maintain aspect ratio */
  background-position: center; /* Vertically and horizontally centered */
  background-repeat: no-repeat;
}

#portfolio-details.irsrr::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Changed from min-height to height for exact 500px */
  background-image: linear-gradient(to bottom, rgba(0, 31, 63, 0.5), rgba(0, 20, 40, 0.5)), 
                    url("../img/portfolio/portfolio-piece-irsrr-atlasboard.png");
  background-size: 100% 100%, cover; /* Gradient fills 100%, image covers */
  background-position: bottom;
  background-repeat: no-repeat;
  filter: blur(10px);
  transform: scale(1.1);
  z-index: -1;
}

#portfolio-details.irsrr::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 430px;
  width: 1300px; /* Fixed width based on 16:9 aspect ratio (460 * 16/9 ≈ 818px) */
  max-width: calc(100% - 40px); /* Prevents overflow on smaller screens with 20px margin on each side */
  background-image: url("../img/portfolio/portfolio-page-hero-irsrr2.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 6px solid #dbe9f05c;
  border-radius: 18px;
  overflow: hidden;
  z-index: 1;
}










/*--------------------------------------------------------------
# SaaS Hero
--------------------------------------------------------------*/
#portfolio-details.saasfs {
  position: relative;
  height: 500px;
  min-height: 320px;
  /*background: url("../img/portfolio/portfolio-page-hero-saasfs3.png") center/cover no-repeat;*/
  background: url("../img/portfolio/portfolio-page-hero-saasfs7.png") center/cover no-repeat;
  overflow: hidden;
  background-position: 0% 50%;
  background-size: 100%;
}

/*#portfolio-details.saasfs:before {
  content: "";
  display: block;
  background-image: radial-gradient(circle at bottom left, rgba(2, 48, 122, 0.6) 0%, transparent 65%),
    radial-gradient(circle at top right, rgba(255, 231, 10, 0.2) 0%, transparent 85%);
  background-size: 900px 400px, 900px 400px;
  background-position: 0% 100%, 100% 0%;
  background-repeat: no-repeat;
  position: absolute;
  inset: 0;
  opacity: 0.8;
}*/

#portfolio-details.saasfs .texture {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
  pointer-events: none;
  z-index: 1;
}

#portfolio-details.saasfs .pill-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#portfolio-details.saasfs .pill-wrap:nth-child(2) {
  margin-left: 10px;
}

#portfolio-details.saasfs .pill-wrap:nth-child(3) {
  margin-right: 10px;
}
#portfolio-details.saasfs .pill-wrap:nth-of-type(4) {
    margin-left: 6px;
}  

#portfolio-details.saasfs .pill {
  position: relative;
  width: 60px;
  border-radius: 999px;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
  filter: blur(18px);
  opacity: 1;
  z-index: 2;
}

#portfolio-details.saasfs .pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: inherit;
  filter: blur(120px);
  opacity: 0.8;
  z-index: -1;
}

#portfolio-details.saasfs .pill-stroke {
  margin: 20px 5px;
  position: absolute;
  inset: 0;
  width: 44px;
  border-radius: 999px;
  border: 1px solid #fff;
  transform: rotate(45deg);
  background: transparent;
  z-index: 3;
  pointer-events: none;
}

#portfolio-details.saasfs .pill-wrap:nth-of-type(1) .pill,
#portfolio-details.saasfs .pill-wrap:nth-of-type(4) .pill {
  height: 220px;
  margin: 24px 1px 34px -14px;
}
/*#portfolio-details.saasfs .pill-wrap:nth-of-type(4) .pill {
    margin-left: 6px;
}  */  
#portfolio-details.saasfs .pill-wrap:nth-of-type(2) .pill,
#portfolio-details.saasfs .pill-wrap:nth-of-type(3) .pill {
  height: 140px;
}

#portfolio-details.saasfs .pill-wrap:nth-of-type(1) .pill-stroke,
#portfolio-details.saasfs .pill-wrap:nth-of-type(4) .pill-stroke {
  margin-left: 0px;
  margin-top: 38px;
  height: 200px;
}

#portfolio-details.saasfs .pill-wrap:nth-of-type(2) .pill-stroke,
#portfolio-details.saasfs .pill-wrap:nth-of-type(3) .pill-stroke {
  height: 105px;
}

#portfolio-details.saasfs .pill-wrap:nth-of-type(1) .pill-stroke,
#portfolio-details.saasfs .pill-wrap:nth-of-type(4) .pill-stroke,
#portfolio-details.saasfs .pill-wrap:nth-of-type(2) .pill-stroke,
#portfolio-details.saasfs .pill-wrap:nth-of-type(3) .pill-stroke {
  border-color: #ddff3c;
}

#portfolio-details.saasfs .color1,
#portfolio-details.saasfs .color4 {
  color: #ff2faf;
  /*background: linear-gradient(135deg, #ff7fd1, #ff2faf);*/
  background:linear-gradient(135deg,#ffee5e,#ff67ff); 
}

#portfolio-details.saasfs .color2,
#portfolio-details.saasfs .color3 {
  color: #ff2faf;
  background: linear-gradient(135deg, #ff7fd1, #ff2faf);
}

/*--------------------------------------------------------------
# Case Study Specific Styles
--------------------------------------------------------------*/
#main.caseStudy .story-overview .section-header {
  padding-bottom: 18px;
}

#story-overview.story-overview .section-header .container h1 {
  text-align: left;
  font-size: 3rem;
  font-weight: 900;
}

#main.caseStudy #facts {
  margin-bottom: 40px;
  padding-top: 120px;
  padding-bottom: 120px;
}

#main.caseStudy #facts::after {
  background-image: none;
}

#main.caseStudy .facts .portfolio-description p {
  padding-right: 60px;
  letter-spacing: .020rem;
  line-height: 1.825rem;
}

#main.caseStudy .approach ul li,
#main.caseStudy .facts ul li {
  padding: 10px 30px 10px 0;
  margin-left: 0;
  font-size: 90%;
  letter-spacing: .010rem;
  border-bottom: 1px dotted #d7d7d7;
}

#main.caseStudy .approach ul li {
  border-bottom: none;
}

#main.caseStudy .facts ul li:last-child {
  border-bottom: none;
}

i.bi.bi-check-circle-fill {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  margin-right: 0.5rem;
  font-family: inherit !important;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 64 64'%3E%3Cpath fill='%23ff54c2' d='m39.637 40.831-5.771 15.871a1.99 1.99 0 0 1-3.732 0l-5.771-15.87a2.02 2.02 0 0 0-1.194-1.195L7.298 33.866a1.99 1.99 0 0 1 0-3.732l15.87-5.771a2.02 2.02 0 0 0 1.195-1.194l5.771-15.871a1.99 1.99 0 0 1 3.732 0l5.771 15.87a2.02 2.02 0 0 0 1.194 1.195l15.871 5.771a1.99 1.99 0 0 1 0 3.732l-15.87 5.771a2.02 2.02 0 0 0-1.195 1.194'%3E%3C/path%3E%3C/svg%3E")
  /*background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 64 64'%3E%3Cpath fill='%2305a2ee' d='m39.637 40.831-5.771 15.871a1.99 1.99 0 0 1-3.732 0l-5.771-15.87a2.02 2.02 0 0 0-1.194-1.195L7.298 33.866a1.99 1.99 0 0 1 0-3.732l15.87-5.771a2.02 2.02 0 0 0 1.195-1.194l5.771-15.871a1.99 1.99 0 0 1 3.732 0l5.771 15.87a2.02 2.02 0 0 0 1.194 1.195l15.871 5.771a1.99 1.99 0 0 1 0 3.732l-15.87 5.771a2.02 2.02 0 0 0-1.195 1.194'%3E%3C/path%3E%3C/svg%3E")*/
  /*background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 64 64'%3E%3Cpath fill='%23b92ac3' d='m39.637 40.831-5.771 15.871a1.99 1.99 0 0 1-3.732 0l-5.771-15.87a2.02 2.02 0 0 0-1.194-1.195L7.298 33.866a1.99 1.99 0 0 1 0-3.732l15.87-5.771a2.02 2.02 0 0 0 1.195-1.194l5.771-15.871a1.99 1.99 0 0 1 3.732 0l5.771 15.87a2.02 2.02 0 0 0 1.194 1.195l15.871 5.771a1.99 1.99 0 0 1 0 3.732l-15.87 5.771a2.02 2.02 0 0 0-1.195 1.194'%3E%3C/path%3E%3C/svg%3E")*/
    no-repeat center;
  background-size: contain;
  border: 1px solid #000;
}

.dotted-divider {
  width: 100%;
  height: 2px;
  background-image: radial-gradient(circle, #000 1px, transparent 1px);
  background-size: 16px 2px;
  background-repeat: repeat-x;
  background-position: center;
}

#main.caseStudy .visual-elements {
  padding-bottom: 140px;
  border-bottom: 1px solid rgba(74, 79, 84, 0.2);
}

#main.caseStudy .visual-elements p {
  padding-right: 25%;
}

/*--------------------------------------------------------------
# Reflection
--------------------------------------------------------------*/
.portfolio-description.challenges ul, 
.reflection ul {
  padding-left: 0;
}

.portfolio-description.challenges ul li,
.reflection ul li {
  list-style-type: none;
  padding: 20px 0;
  padding-left: 0;
  margin-left: 0;
  border-bottom: 1px dotted #d7d7d757;
}
.portfolio-description.challenges ul li {
  border-bottom: 1px dotted #d7d7d7

  ;
}

.portfolio-description.challenges ul li:last-child,
.reflection ul li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}


















/*--------------------------------------------------------------
# Facts Section
--------------------------------------------------------------*/
#facts.facts.csKPMG
#approach.approach.csKPMG {
  padding: 120px 0;
}

/*#approach .counters span, */
.facts .counters span {
  font-size: 100px;
  display: block;
  color: #c858ef;
}

.purecounter[data-purecounter-end="365536"] {
  position: relative;
  left: -24px;
}

/*#approach .counters p,*/
.facts .counters p {
  padding: 0;
  margin: 0 0 20px 0;
  font-family: "Raleway", sans-serif;
  font-size: 14px;
}

/*#approach,*/
#facts {
  position: relative;
  background-color: #000 !important;
  overflow: hidden;
  z-index: 0;
}


#facts::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/legoBrick.png");
  background-repeat: no-repeat;
  background-position: 54.5% 29.5%;
  background-size: 100% auto;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
  filter: blur(20px);
}


#approach > .container,
#approach .section-header,
#approach .row,
#approach *,
#facts > .container,
#facts .section-header,
#facts .row,
#facts * {
  position: relative;
  z-index: 1;
}

#approach .section-header h2,
#facts .section-header h2 {
  margin-top: 0;
}

#approach .section-header p,
#facts .section-header p {
  padding: 10px 0;
  margin-top: -10px;
}

#approach .icon .bi.bi-rocket-takeoff,
#facts .icon .bi.bi-rocket-takeoff {
  -webkit-text-stroke-width: 3px;    
}

#approach .icon .bi,
#facts .icon .bi {
  padding-bottom: 7px;
  display: block;
  /*font-size: 38px;*/
  font-size: 54px;
  -webkit-text-stroke-width: 6px;
  -webkit-text-stroke-color: #f8f8f8;
}

#approach .dotted-divider
#facts .dotted-divider {
  margin-top: 30px;
  margin-bottom: 34px;
}

#approach .portfolio-info {
  width: 90%;
}

#approach .portfolio-info .icon .bi.bi-rocket-takeoff {
  -webkit-text-stroke-width: 1px; 
}

#approach .portfolio-info .icon .bi {
  padding-bottom: 7px;
  display: block;
  font-size: 38px;
  -webkit-text-stroke-width: 3px;
  -webkit-text-stroke-color: #f8f8f8;
}

.dotted-divider.topDL {
  display: none;
  padding-bottom: 100px;
}


#facts.csKPMG .section-header h2,
#facts.csKPMG .portfolio-description h3, 
#facts.csKPMG .portfolio-description,
.approach h4,
.approach p.description,
#facts.csKPMG  ul li,
#approach .icon .bi, #facts .icon .bi,
#approach .icon .bi,
#main.caseStudy .testimonial-item p,
.icon-box .icon .bi-rocket-takeoff
 {
  color: white;
}
/*#approach .icon .bi, #facts .icon .bi,
#approach .icon .bi {
  color: #b92ac3;
}*/
#approach .section-header p, 
#facts .section-header p {
  color: #e2e2e2;
}

#approach .icon .bi, #facts .icon .bi,
.icon-box .icon .bi-rocket-takeoff {
  -webkit-text-stroke-color: #000;
}

#facts .dotted-divider {  
    background-image: radial-gradient(circle, #ffffff6b 1px, transparent 1px);
}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
#main.caseStudy .testimonial-item {
  margin-top: 30px;
  left: 26px;
  left: 95px;
  padding: 16px 0;
  border-left: 8px solid #ff54c2;
}

#main.caseStudy .testimonial-item p {
  margin-bottom: 0;
  padding-left: 30px;
  padding-bottom: 0;
/*  font-family: source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif;
  font-style: italic;*/
  font-family: "Nothing You Could Do", cursive;
  font-weight: 400;
  font-style: normal;
  letter-spacing: .065rem;
}

#main.caseStudy .testimonial-item span {
  margin-top: -10px;
  padding-left: 30px;
  font-size: 85%;
  font-weight: 600;
}

/*--------------------------------------------------------------
# My Role
--------------------------------------------------------------*/

.my-role {
  display: flex;
  justify-content: center;
  margin-top: 60px;
  padding: 48px 4vw;
  width: 90%;
  background-color: black;
  color: white;
  border-radius: 12px;
  filter: drop-shadow(0px 3px 3px #333333);
  
}
.my-role h3 {
  color: white;
}

.my-artifacts p,
.my-role p {
    font-size: 93%;
    letter-spacing: .0125rem;
  }

.my-role .portfolio-description {
  max-width: 520px;        /* adjust to taste */
  /*margin-inline: auto;      centers the block */
  text-align: left !important;        /* keeps text left-justified */
}

.my-artifacts {
  margin-top: 110px;
  display: flex;
}






















    /*--------------------------------------------------------------
    # Vertical Carousel
    --------------------------------------------------------------*/
    :root {
      /*--active: #0096fb;
      --visited: #56d6ff;
      --default: #d0d5dd;*/

      --active: #7b00d7;
      --visited: #ff54c2;
      --default: #d3d0dd;

      --dot-size: 12px;
      --dot-border: 2px;
      --line-width: 2px;
      --line-ease: cubic-bezier(.4,0,.2,1);
    }

    /* ===== CONTAINER ===== */
    .home-platform_tabs-right {
      position: relative;
      display: flex;
    }

    /* ===== DOT COLUMN ===== */
    .dots-column {
      position: relative;
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      width: 24px;
      margin-right: 12px;
    }

    /* ===== CONTENT COLUMN ===== */
    .content-column {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    /* ===== ITEM ===== */
    .home-platform_tab-link-wrapper {
      position: relative;
      display: flex;
      align-items: flex-start;
    }

    /* ===== DOT WRAPPER - matches height of text ===== */
    .home-platform_dot-wrapper {
      position: relative;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding-top: 25px;
      background: #fff;
    }

    /* ===== CONNECTOR LINE ===== */
    .connector-line {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      background-image: repeating-linear-gradient(
        to bottom,
        var(--default) 0px,
        var(--default) 4px,
        transparent 4px,
        transparent 8px
      );
      transform-origin: top;
      transition: 
        height 0.6s var(--line-ease),
        background-image 0.6s ease;
      height: 0;
    }

    .connector-line.active {
      background-image: repeating-linear-gradient(
        to bottom,
        var(--visited) 0px,
        var(--visited) 4px,
        transparent 4px,
        transparent 8px
      );
    }

    /* ===== DOT (grey base) ===== */
    .home-platform_dot {
      position: relative;
      z-index: 2;
      width: var(--dot-size);
      height: var(--dot-size);
      border-radius: 50%;
      background: var(--default);
      border: var(--dot-border) solid #fff;
      flex-shrink: 0;
      transition:
        background-color 0.6s ease,
        border-color 0.6s ease;
    }

    /* ===== ACTIVE RING (donut shape over grey dot) ===== */
    .home-platform_dot::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: calc(var(--dot-size) + 8px);
      height: calc(var(--dot-size) + 8px);
      border-radius: 50%;
      border: 1px solid var(--active);
      background: transparent;
      transform: translate(-50%, -50%) scale(0);
      transition: transform 0.6s var(--line-ease);
      pointer-events: none;
    }

    /* ===== ACTIVE STATE (SYNCED) ===== */
    .home-platform_tab-link-wrapper.is-active .home-platform_dot::after,
    .home-platform_dot-wrapper.is-active .home-platform_dot::after {
      transform: translate(-50%, -50%) scale(1);
    }

    /* Grey dot stays visible during active state */
    .home-platform_tab-link-wrapper.is-active .home-platform_dot,
    .home-platform_dot-wrapper.is-active .home-platform_dot {
      background: var(--active);
      border-color: #fff;
    }

    /* ===== VISITED STATE ===== */
    .home-platform_tab-link-wrapper.is-visited .home-platform_dot,
    .home-platform_dot-wrapper.is-visited .home-platform_dot {
      background: var(--visited);
      border-color: #fff;
    }

    /* ===== LABEL ===== */
    .home-platform_tab-link {
      padding: 20px;
      width: 100%;
      color: #344054;
      border-bottom: 1px solid #d7d7d7a3;
      transition: color 0.4s ease;
    }

    .home-platform_tab-link-wrapper.is-active .home-platform_tab-link {
      color: var(--active);
    }

    .home-platform_tab-link-wrapper.is-visited .home-platform_tab-link {
      color: #333;
    }

    /* hover cursor hint */
    .home-platform_tabs-right:hover {
      cursor: default;
    }


    .disclaimer {
      display: block;
      margin-top: 36px;
      font-style: italic;
      font-size: 90%;
      letter-spacing: .025rem;
    }








/*--------------------------------------------------------------
# Media Queries - Desktop Large
--------------------------------------------------------------*/

/*@media (min-width: 1280px) {
  #portfolio-details.hrsaots {
    height: 50px;
    min-height: 400px;
    background-position: center 20px;
  }
}

@media (min-width: 1601px) {
  #portfolio-details.hrsaots {
    height: 500px;
    min-height: 500px;
    background-position: center -40px;
  }
}

@media (min-width: 1801px) {
    #portfolio-details.hrsaots {
        height: 460px;
        min-height: 460px;
        background-position: center -110px;
    }
}*/

@media (max-width: 1280px) {
  #portfolio-details {
    height: 430px;
    background: linear-gradient(30deg, #000 0%, #333143 50%, white 50%, white 100%);
  }

  #portfolio-details.irshpc::after,
  #portfolio-details.irsds::after,
  #portfolio-details.irsar::after,
  #portfolio-details.irsrr::after {
    border: none;
    border-radius: 0;
  }

}

@media (max-width: 1024px) {
  #portfolio-details {
    height: 360px;
    background: linear-gradient(30deg, #000 0%, #333143 50%, white 50%, white 100%);
  }
}

/*--------------------------------------------------------------
# Media Queries - Tablet & Mobile
--------------------------------------------------------------*/
@media (max-width: 992px) {

  #main.caseStudy .section-header {
    text-align: left;
  }

  section.story-overview {
    padding-top: 20px;
  }

  .story-overview .section-header {
    margin-bottom: 60px;
  }

  .story-overview .portfolio-info {
    padding-right: 5%;
  }

  #facts .section-header h2 {
    font-size: 2rem;
  }

  #story-overview.story-overview .section-header .container h1 {
    font-size: 2.5rem;
  }

  .breadcrumbs .d-flex {
    display: block !important;
  }

  .breadcrumbs h2 {
    margin-bottom: 10px;
    margin-top: 33px;
    font-size: 24px;
  }

  .breadcrumbs ol {
    display: block;
    margin-top: -90px;
    margin-bottom: 50px;
  }

  .breadcrumbs ol li {
    display: inline-block;
  }

  .breadcrumbs ol li + li {
    display: none;
  }

  #portfolio-details {
    position: relative;
    width: 100%;
    min-height: 320px;
    background-image: url("../img/portfolio/portfolio-page-hero-irshpc.png"),
      linear-gradient(30deg, #000 0%, #333143 50%, #333143 50%, #000 100%);
    background-repeat: no-repeat;
    background-position: center top, initial;
    background-size: auto 320px, cover;
    background-position: center;
    background-blend-mode: normal;
  }

  /*#portfolio-details.irsar::after,*/
  #portfolio-details.irsrr::after,
  #portfolio-details.irshpc::after,
  #portfolio-details.irsds::after {
    max-width: calc(100% - 0px);
    background-size: initial;
    background-position: center;
  }

  #portfolio-details.irsar::after {
    max-width: calc(100% - 0px);
    background-size: initial;
    background-position: -260px -83px;
  }

  #portfolio-details.irshpc {
    background-image: url("../img/portfolio/portfolio-page-hero-irshpc.png"),
      linear-gradient(30deg, #000 0%, #333143 50%, #333143 50%, #000 100%);
  }

  #portfolio-details.irsrr {
    background-image: url("../img/portfolio/portfolio-page-hero-irsrr.png");
  }

  #portfolio-details.irsrr::after {
    background-position: 50% 20px;
  }

  #portfolio-details.irsds {
    background-image: url("../img/portfolio/portfolio-page-hero-irsds.png"),
      linear-gradient(30deg, #000 0%, #333143 50%, #333143 50%, #000 100%); 
  }

  #portfolio-details.irsar {
    background-image: url("../img/portfolio/portfolio-page-hero-irsar5.png");
  }

  #portfolio-details.hrsaots {
    background-image: url("../img/portfolio/portfolio-page-hero-hrsaots.png");
    background-size: cover;
    background-position: left top, initial;
  }



/* ===========================================================================================================check if needed here or to move */
  #portfolio-details.dodpm {
    position: relative;

    background-image: radial-gradient(circle at 3px 3px, rgba(255, 255, 255, 0.25) 3px, transparent 4px),
      url("../img/portfolio/portfolio-page-hero-dodpm.png");
    background-size: 40px 40px, cover;
    background-position: -3px -3px, center;
    background-repeat: repeat, no-repeat;
    background-blend-mode: normal;
  }
/* ===========================================================================================================check if needed here or to move */



  #portfolio-details.saasfs {
    background: url("../img/portfolio/portfolio-page-hero-saasfs3.png") center/cover no-repeat;
    overflow: hidden;
    background-position: 22% 50%;
  }


#portfolio-details.irsar,
#portfolio-details.irsds,
#portfolio-details.irshpc,
#portfolio-details.irsrr,
#portfolio-details.dodpm,
#portfolio-details.dodaif,
#portfolio-details.hrsaots,
#portfolio-details.saasfs
 {
    position: relative;
    max-height: 360px;
    min-height: 360px;
}





  #portfolio-details.saasfs .texture {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    z-index: 1;
  }

  #portfolio-details.saasfs .pill {
    position: relative;
    width: 100px;
    border-radius: 999px;
    border: 1px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
    opacity: 1;
    z-index: 2;
    overflow: visible;
    filter: blur(26px);
  }

  #portfolio-details.saasfs .pill-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #portfolio-details.saasfs .pill-wrap:nth-child(2) {
    margin-left: 10px;
  }

  #portfolio-details.saasfs .pill-wrap:nth-child(3) {
    margin-right: 10px;
  }

  #portfolio-details.saasfs .pill-wrap:nth-child(4) {
    margin-left: 0;
  }

  #portfolio-details.saasfs .pill {
    position: relative;
    width: 40px;
    border-radius: 999px;
    border: 1px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
    filter: blur(18px);
    opacity: 1;
    z-index: 2;
  }

  #portfolio-details.saasfs .pill::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: inherit;
    filter: blur(120px);
    opacity: 0.8;
    z-index: -1;
  }

  #portfolio-details.saasfs .pill-stroke {
    margin: 20px 5px;
    position: absolute;
    inset: 0;
    width: 32px;
    border-radius: 999px;
    border: 1px solid #fff;
    transform: rotate(45deg);
    background: transparent;
    z-index: 3;
    pointer-events: none;
  }

  #portfolio-details.saasfs .pill-wrap:nth-of-type(1) .pill,
  #portfolio-details.saasfs .pill-wrap:nth-of-type(4) .pill {
    height: 140px;
  }

  #portfolio-details.saasfs .pill-wrap:nth-of-type(2) .pill,
  #portfolio-details.saasfs .pill-wrap:nth-of-type(3) .pill {
    height: 70px;
  }

  #portfolio-details.saasfs .pill-wrap:nth-of-type(1) .pill-stroke,
  #portfolio-details.saasfs .pill-wrap:nth-of-type(4) .pill-stroke {
    margin-left: 0;
    margin-top: 30px;
    height: 110px;
    border-color: #ff78ce;
  }

  #portfolio-details.saasfs .pill-wrap:nth-of-type(2) .pill-stroke,
  #portfolio-details.saasfs .pill-wrap:nth-of-type(3) .pill-stroke {
    height: 52.5px;
    border-color: #ff78ce;
  }

  #portfolio-details.saasfs .pill-wrap:nth-of-type(1) .pill-stroke,
  #portfolio-details.saasfs .pill-wrap:nth-of-type(4) .pill-stroke,
  #portfolio-details.saasfs .pill-wrap:nth-of-type(2) .pill-stroke,
  #portfolio-details.saasfs .pill-wrap:nth-of-type(3) .pill-stroke {
    border-color: #ddff3c;
  }

  #portfolio-details.saasfs .color1,
  #portfolio-details.saasfs .color4 {
    color: #ff2faf;
    background: linear-gradient(135deg, #ff7fd1, #ff2faf);
  }

  #portfolio-details.saasfs .color2,
  #portfolio-details.saasfs .color3 {
    color: #ff2faf;
    background: linear-gradient(135deg, #ff7fd1, #ff2faf);
  }







  .portfolio-info h3 {
    font-size: 26px;
  }

  .portfolio-info p {
    margin-bottom: 2rem;
  }

  .portfolio-info .portfolio-image.port-img-lg img {
    padding: 0;
  }

  .portfolio-image {
    margin-bottom: 30px;
    min-height: 0;
  }

  .mb-5 {
    margin-bottom: 0 !important;
  }

  #portfolio-details .container {
    padding-left: 0;
    padding-right: 0;
  }

  .responsibility-label,
  .responsibility-description {
    display: block;
    padding: 12px 40px 10px 5px;
  }

  .responsibility-description {
    padding: 0 40px 10px 5px;
  }

  /*#approach a.scrollto {
    border-bottom: 1px solid #e3e3e3;
  }*/

  #approach .portfolio-info,
  #approach a.scrollto {
    display: block;
    padding: 60px 30px;
    color: black;
    /*border-top: 4px solid #e8e5e5;*/
    border-bottom: 1px solid #e3e3e35c;
  }

  .my-role {
    width: 100%;
  }

  .my-role {
    padding: 48px 6vw;
  }

  #main.caseStudy .testimonial-item {
    margin-top: 30px;
    left: 26px;
  }

  #facts::after {
    background-position: 70% 20.5%;
    background-size: 55% auto;
  }

}

@media (max-width: 768px) {
  #portfolio-details {
    min-height: 150px;
  }
}

@media (max-width: 640px) {
  .hero-static h2 {
    font-size: 32px;
  }

  .hero-static p {
    font-size: 18px;
    margin-bottom: 30px;
  }

  .hero-static .btn-get-started,
  .hero-static .btn-watch-video {
    font-size: 14px;
  }
}