h3 {
  font-size: clamp(20px, 4vw, 32px);
}
.primary-button-div.gray-lined .custom-btn {
  background: none;
  border-color: #1a1a1a;
  color: #1a1a1a;
}
.primary-button-div.gray-lined .pb-right-block {
  background: none;
  border: 1px solid #1a1a1a;
}
.primary-button-div.gray-lined .pb-right-block svg path {
  fill: #1a1a1a;
}
.primary-button-div.black .custom-btn {
  background: #1a1a1a;
  border-color: #1a1a1a;
  color: #fff;
}
.primary-button-div.black .pb-right-block {
  background: #1a1a1a;
  border: 1px solid #1a1a1a;
}
.primary-button-div.yellow-lined .custom-btn {
  background: none;
  border-color: var(--yellow);
  color: var(--yellow);
}
.primary-button-div.yellow-lined .pb-right-block {
  background: none;
  border: 1px solid var(--yellow);
}
.primary-button-div.yellow-lined .pb-right-block svg path {
  fill: var(--yellow);
}
.studio-banner {
  background-color: #1a1a1a;
}
.studio-banner-in {
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.studio-banner-in .left {
  width: 40%;
  padding-top: 180px;
  padding-bottom: 84px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  padding-left: 60px;
}
.studio-banner-in .right {
  width: 60%;
}
.studio-banner-in h1 {
  font-size: clamp(28px, 5vw, 62px);
  color: var(--white);
  text-transform: uppercase;
  position: relative;
  z-index: 3;
}
.studio-banner-in .left p {
  color: var(--white);
  max-width: 42ch;
  position: relative;
  z-index: 3;
}
.studio-banner-in .pps-counter-wrap {
  flex-direction: column;
  background-color: var(--blue);
  height: 100%;
  padding: 60px 10px;
  gap: 80px;
}
.studio-banner-in .sb-r-bottom {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
}
.studio-banner-in .r-bottom-right img {
  filter: grayscale(1);
}
.studio-banner-in .left::before {
  content: "";
  background-image: url("https://www.upkrama.com/wp-content/uploads/2026/01/studio-banner-bg.svg");
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  opacity: 70%;
  inset: 0;
  background-size: cover;
}

/* Regional Focus */

.regional-focus {
  position: relative;
}

.regional-focus-in {
  display: grid;
  grid-template-columns: 3.8fr 6.2fr;
}

/* Make left side sticky */
.regional-focus-in .left {
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 1;
}

.regional-focus-in .rf-left-top {
  background-color: var(--yellow);
  padding-top: 42px;
  padding-bottom: 42px;
}

.regional-focus-in .rf-left-bottom {
  background-color: var(--blue);
  padding-left: 60px;
  padding-right: 20px;
  padding-bottom: 89px;
  height: calc(100vh - 136px);
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.regional-focus-in .rf-left-top h2 {
  font-size: 42px;
  text-align: center;
}

.regional-focus-in .rf-left-bottom h3 {
  font-size: 42px;
  color: #fff;
  line-height: 121%;
}

.regional-focus-in .right {
  position: relative;
  /* This creates the scroll space for all cards */
}

.regional-focus-in .right-content-inner {
  display: grid;
  grid-template-columns: 6fr 4fr;
  background-color: #eeeeee;
  height: 100vh;
  width: 100%;
}

.regional-focus-in .right-content-inner .rci-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  padding-left: 48px;
  padding-right: 20px;
  padding-top: 50px;
}

.regional-focus-in .right-content-inner .rci-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.regional-focus-in .right-content-inner .rci-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-height: 100vh;
}
/* Regional Focus */

/* DBB */
.dbb-in {
  display: flex;
  align-items: stretch;
}
.dbb-in .left {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 40px;
}
.dbb-in .right {
  width: 50%;
}
.dbb-in .jig-dhol {
  height: calc(100% - 48.5px);
}
.dbb-in .black-box {
  background-color: var(--black);
  padding: 50px 46px 38px 46px;
}
.dbb-in .blue-box {
  background-color: var(--blue);
  height: 48.5px;
}
.dbb-in .yellow-box {
  background-color: var(--yellow);
  height: 48.5px;
}
.dbb-in .dbb-logo-img {
  width: 44%;
  margin-left: auto;
  padding-top: 40px;
}
.dbb-in .left p {
  color: #fff;
  max-width: 44ch;
}
/* DBB */

/* Our Journey */
.our-journey {
  background-color: var(--black);
  padding: 80px 0px;
  position: relative;
}
.our-journey::before {
  content: "";
  background-image: url("https://www.upkrama.com/wp-content/uploads/2026/01/topographic-map.svg");
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  opacity: 70%;
  inset: 0;
  background-size: cover;
}
.our-journey-in {
  position: relative;
  z-index: 3;
}
.our-journey .heading h2,
.our-journey .heading p {
  color: #fff;
}
.our-journey .custom-next-btn,
.our-journey .custom-prev-btn {
  background-color: var(--blue);
}
.our-journey-in .heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.custom-slider-nav.for-desktop {
  padding-top: 0px;
  align-items: center;
}
.our-journey .heading .text-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.our-journey .heading .text-content p {
  max-width: 42ch;
}
.our-journey .oj-slider-card {
  background-color: #f5f3f0;
  padding: 24px;
}
.our-journey .oj-slider-card p {
  color: var(--black);
}
.oj-slider-wrap {
  padding-left: 170px;
}
.oj-slider-wrap .card-img {
  aspect-ratio: 3/2;
  max-width: 290px;
  margin-top: 100px;
}
.oj-slider-card h2.year {
  font-size: clamp(68px, 12vw, 134px);
}
.oj-slider-card a {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Our Journey */
/* Geo Limit  */
.geo-limit {
  background-color: var(--black);
  padding-top: 90px;
}
.geo-limit .heading {
  display: flex;
  justify-content: space-between;
}
.geo-limit .heading h2 {
  color: #fff;
}
.geo-limit-in h2 {
  max-width: 14ch;
}
.geo-limit-in .map-card-img {
  aspect-ratio: 1.7/1.3;
}
/* Geo Limit  */

.principles-guide-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0px 28px;
}
.principles-guide-in .left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 50px;
}
.pri-guide-img {
  height: 100% !important;
}
.principles-guide-in .right {
  position: relative;
}
.principles-guide-in .right::before {
  content: "";
  background: rgba(1, 88, 244, 1);
  mix-blend-mode: multiply;
  opacity: 60%;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.principles-guide-in .right::after {
  content: "";
  background-image: url("https://www.upkrama.com/wp-content/uploads/2026/01/prince-topo.svg");
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  inset: 0;
  background-size: cover;
  opacity: 60%;
}
.pri-guide-content {
  height: 100%;
  width: 100%;
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 52px 35px;
}
.pri-guide-content h3,
.pri-guide-content p {
  color: #fff;
}
.pri-guide-content h3 {
  font-size: clamp(24px, 4vw, 42px) !important;
  max-width: 18ch;
}
.pri-guide-content p {
  font-size: 14px;
  max-width: 42ch;
  letter-spacing: 0.02em;
}
.principles-guide-in .yellow-box {
  background-color: var(--yellow);
  padding: 30px 16px;
  width: 80%;
  margin-left: auto;
}
.principles-guide-in .yellow-box p {
  font-size: 14px;
  max-width: 52ch;
  padding-top: 30px;
}
.principles-guide-in .below-boxes {
  display: flex;
}
.principles-guide-in h2 {
  max-width: 16ch;
}
.principles-guide-in .bb-left {
  background-color: #0158f4;
  aspect-ratio: 1/1;
}
.principles-guide-in .below-boxes > div {
  padding: 34px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.principles-guide-in .below-boxes > div p {
  font-size: 14px;
}
.principles-guide-in .bb-left h3 {
  color: #fff;
}
.principles-guide-in .bb-left p {
  color: #fff;
}
.principles-guide-in .bb-right {
  background-color: #f5f3f0;
  aspect-ratio: 1/1;
}
.principles-guide-in h3 {
  font-size: 32px;
}
.map-wrapper {
  position: relative;
}

.map-img {
  width: 100%;
  display: block;
}

/* Marker (checkbox style) */
.map-marker {
  position: absolute;
  width: 10px;
  height: 10px;
  cursor: pointer;
}

.map-marker::after {
  content: "";
  position: absolute;
  inset: -6px;
}

/* Card */
.map-card {
  position: absolute;
  background: #fff;
  width: 220px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: none;
  z-index: 10;
}
.map-card {
  display: none;
  position: absolute;
}

.map-card.visible {
  display: block;
}

.map-marker {
  cursor: pointer;
}

.close-btn {
  cursor: pointer;
}
.map-card-inner {
  position: relative;
  padding: 20px;
  padding-top: 40px;
}
/* .map-card-inner::before {
  content: "";
  background-image: url('https://www.upkrama.com/wp-content/uploads/2026/01/card-grid-bg.svg');
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  inset: 0;
  background-size: cover;
} */
.map-card .close-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 3;
  cursor: pointer;
}
.map-card img {
  width: 100%;
  margin-bottom: 10px;
  position: relative;
  z-index: 3;
}
.map-card .card-content {
  position: relative;
  z-index: 3;
}

.map-card h4 {
  font-size: 18px;
  padding-top: 10px;
  padding-bottom: 5px;
}

.map-card p {
  font-size: 12px;
  color: #5d5d5d;
}

#usa {
  top: 20%;
  left: 18%;
}
#africa {
  top: 60%;
  left: 48%;
}
#dubai {
  top: 38%;
  left: 58%;
}
#india {
  top: 42%;
  left: 64%;
}

/* Geo Limit  */

/* Meaningful Together */
.meaningful-togther-in .bottom {
  display: grid;
  grid-template-columns: 8fr 6fr;
}
.meaningful-togther-in .bottom .mb-right {
  background-color: var(--black);
  gap: 20px;
}
.meaningful-togther-in .bottom .mb-left img {
  filter: grayscale(1);
}
.meaningful-togther-in .top {
  display: flex;
}
.meaningful-togther-in .mt-right {
  background-color: #0158f4;
  height: 165px;
  width: 30%;
}
.meaningful-togther-in .mt-left {
  width: 70%;
  background-color: #eaeaea;
  display: flex;
  align-items: center;
  padding-left: 60px;
}
.meaningful-togther-in .mb-left-card {
  position: absolute;
  z-index: 3;
  background-color: var(--white);
left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
  max-height: 447px;
  max-width: 338px;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 48px 32px;
  flex-direction: column;
  text-align: center;
  align-items: center;
}
.meaningful-togther-in .mb-left {
  position: relative;
}
.meaningful-togther-in .primary-button-div.gray-lined {
  justify-content: center;
  margin-top: 20px;
}
.meaningful-togther-in .mb-left-card h3 {
  font-size: 32px;
  max-width: 12ch;
}
.meaningful-togther-in .mb-left-card p {
  font-size: 16px;
}
.meaningful-togther-in .mb-right-bottom-div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  z-index: 3;
}
.meaningful-togther-in .mb-right-left {
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding-bottom: 40px;
}
.meaningful-togther-in .mb-left-img {
  height: 100%;
}
.meaningful-togther-in .mb-right-left p {
  color: #fff;
  font-size: 16px;
}
.meaningful-togther-in .primary-button-div.yellow-lined {
  margin-top: 50px;
}
.meaningful-togther-in .mb-right-right {
  aspect-ratio: 2.7/3.2;
  padding-bottom: 30px;
  padding-left: 20px;
}
.meaningful-togther-in .mb-right {
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 58px;
  padding-left: 40px;
}
.meaningful-togther-in .mb-right h2 {
  color: #fff;
  max-width: 12ch;
  position: relative;
  z-index: 3;
}
.meaningful-togther-in .bottom .mb-right {
  position: relative;
}
.meaningful-togther-in .bottom .mb-right::before {
  content: "";
  background-image: url('https://www.upkrama.com/wp-content/uploads/2026/01/blue-topography.svg');
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  inset: 0;
  background-size: cover;
}

.meaningful-togther-in .bottom .mb-left {
  position: relative;
}
.meaningful-togther-in .bottom .mb-left::before {
  content: "";
  background-image: url('https://www.upkrama.com/wp-content/uploads/2026/01/white-topography.svg');
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  inset: 0;
  background-size: cover;
}
/* Meaningful Together */

/* Our Team */
.our-team-in .bx-wrapper {
  margin-bottom: 15px !important;
}
.our-team-in li {
  height: 280px;
  position: relative;
}
.our-team-in li .team-info {
  position: absolute;
  top: 26px;
  left: 14px;
  z-index: 2;
}
.our-team-in li .team-name {
  color: #fff;
  font-size: 24px;
}
.our-team-in li .team-desig {
  color: #fff;
  text-transform: uppercase;
  font-size: 12px;
  font-family: var(--neue);
  letter-spacing: 2px;
  padding-top: 2px;
}
/* Our Team */
/* Awards */
.awards-img {
  aspect-ratio: 2.7/3.3;
}
.awards .awards-content .aw-content-head {
  font-family: var(--neue);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--black);
  padding-bottom: 10px;
}
.awards .awards-content p {
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--black);
  padding-bottom: 10px;
}
.awards .awards-content p.year {
  font-family: var(--neue);
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--black);
  padding-bottom: 10px;
}
.awards-wrapper {
  overflow: hidden;
  padding-top: 50px;
}

.awards-wrapper .owl-stage {
  display: flex;
  align-items: flex-end;
}

.awards-wrapper .owl-item {
  display: flex;
  align-items: flex-end;
}

.awards-item {
  width: 100%;
  transform-origin: bottom center;
  transition:
    transform 0.6s ease,
    opacity 0.6s ease;
  transform: scale(0.75);
}

.owl-item.active.center .awards-item {
  transform: scale(1);
}
.owl-item.active.center + .owl-item .awards-item,
.owl-item.prev .awards-item {
  transform: scale(0.88);
}

.awards-img {
  width: 100%;
  height: 360px;
  overflow: hidden;
}

.owl-item.active.center .awards-img {
  height: 460px;
}

.owl-item.active.center + .owl-item .awards-img,
.owl-item.prev .awards-img {
  height: 410px;
}
.awards-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Awards */

/* Inside Studio */
.inside-studio .heading h2 {
  font-size: clamp(24px, 4vw, 52px);
  text-transform: unset;
}
.inside-studio .aw-tabs {
  margin: 0px;
  padding-top: 10px;
}
.inside-studio .all-work-grid-wrap .black-bg-block::before {
  display: none;
}
.inside-studio .all-work-grid-wrap .black-bg-block {
  padding: 0;
}

.inside-studio .all-work-grid-wrap .right-top {
  padding: 0;
  aspect-ratio: 1/1;
}

.inside-studio .all-work-grid-wrap .left img {
  border: none;
}
.inside-studio img,
.inside-studio div {
  border-radius: 0px !important;
}
.inside-studio .aw-tabcontent.active {
  clip-path: inset(0%);
}
.inside-studio .aw-tabs {
  overflow: auto;
  overflow-y: hidden;
}
/* Inside Studio */

/* Process Led By */
.process-led-by-in {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}
.process-led-by-in .accordion-title {
  color: #000000;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 26px;
  font-family: var(--neue);
  transition: 0.4s;
  position: relative;
}
.process-led-by-in .accordion-item {
  padding: 28px 0px;
  border-bottom: 1px solid #d4d4d4;
}

.process-led-by-in .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  max-width: 90%;
}
.process-led-by-in .accordion-content p {
  padding-top: 10px;
  font-size: 16px;
}
.process-led-by-in .accordion-icon {
  height: 32px;
  width: 32px;
  display: inline-block;
  position: absolute;
  right: 0;
  transition: 0.4s ease all;
}
.process-led-by-in .accordion-icon svg {
  width: 100%;
  height: 100%;
}
.process-led-by-in
  .accordion-title.active
  .accordion-icon
  svg
  path:nth-child(2) {
  display: none;
}
/* Process Led By */

/* All Work */

.all-work .heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.all-work .layout-wrap {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.all-work .heading h2 {
  font-size: clamp(42px, 9vw, 115px);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 102%;
}

.all-work .aw-tabs {
  display: flex;
  gap: 60px;
  row-gap: 10px;
  flex-wrap: nowrap;
  margin-bottom: 50px;
  padding-bottom: 10px;
  overflow: auto;
  overflow-y: hidden;
}

.all-work .all-work-tablinks {
  cursor: pointer;
  transition: 0.3s;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 2px;
  font-weight: 400;
  font-family: var(--neue);
  color: #111111;
  text-transform: uppercase;
}

.all-work .aw-tabs .all-work-tablinks:hover {
  color: var(--blue);
}

.all-work .aw-tabs .all-work-tablinks.active {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.all-work .all-work-tabcontent {
  display: none;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

.all-work-grid-wrap {
  display: flex;
  gap: 20px;
}

.all-work-grid-wrap .left {
  width: 62%;
  border-radius: 15px;
  overflow: hidden;
}

.all-work-grid-wrap .left img {
  border: 6px solid #e5e5e5;
  border-radius: calc(15px + 6px);
}

.all-work-grid-wrap .right {
  width: 38%;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 20px;
}

.all-work-grid-wrap .right-top {
  background-color: var(--blue);
  padding: 35px 40px;
  display: flex;
  flex-direction: column;
  gap: 80px;
  height: 67%;
  border-radius: 15px;
}

.all-work-grid-wrap .right-top > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
  height: 100%;
}

.all-work-grid-wrap .blue-box-bottom h4 {
  font-size: 32px;
  color: #e5e5e5;
  letter-spacing: -0.03em;
  line-height: 102%;
  font-weight: var(--neue);
}

.all-work-grid-wrap .blue-box-bottom p {
  font-size: 18px;
  color: #e5e5e5;
  letter-spacing: 0.02em;
  line-height: 130%;
  margin-bottom: 20px;
}

.all-work-grid-wrap .right-bottom {
  display: flex;
  gap: 20px;
}

.all-work-grid-wrap .right-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 40%;
}

.all-work-grid-wrap .beige-bg-block {
  background-color: #e5e5e5;
  transition: 0.4s ease-in;
  cursor: pointer;
}

.all-work-grid-wrap .beige-bg-block:hover {
  background-color: var(--yellow);
}

.all-work-grid-wrap .black-bg-block {
  width: 60%;
  background-color: #222222;
  position: relative;
  padding: 30px;
  border-radius: 15px;
  color: #e5e5e5;
  letter-spacing: 0.02em;
  line-height: 130%;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.all-work-grid-wrap .black-bg-block::before {
  content: "";
  background-image: url("https://www.upkrama.com/wp-content/uploads/2025/12/bg-tabs.svg");
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  background-size: cover;
}

.all-work-grid-wrap .aw-r-info {
  border: 1px solid #e5e5e5;
  border-radius: 7px;
  padding: 8px 15px;
  width: fit-content;
}

.all-work-grid-wrap .aw-r-info p {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--neue);
  color: #e5e5e5;
}

.aw-social-icon {
  display: flex;
  gap: 10px;
  align-items: center;
}

.aw-social-icon a {
  transition: 0.4s ease all;
}

.aw-social-icon a:hover {
  transform: translateY(-5px);
}

.aw-social-icon img {
  height: 18px;
  width: 18px;
}

.all-work-grid-wrap .beige-bg-block {
  height: 100px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
   font-family: var(--neue);
  color: var(--black);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.all-work-grid-wrap .beige-bg-block a {
  font-family: var(--neue);
  color: var(--black);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.all-work-grid-wrap .aw-image-block {
  aspect-ratio: 1/1;
  border-radius: 15px;
  overflow: hidden;
}

.tab-content-2 .all-work-grid-wrap .right {
  flex-direction: column-reverse;
}

.tab-content-4 .all-work-grid-wrap .right {
  flex-direction: column-reverse;
}

.tab-content-5 .all-work-grid-wrap .right-bottom {
  flex-direction: row-reverse;
}
/* 
.flip-card {
  width: 100%;
  perspective: 1000px;
  aspect-ratio: 2/1.2;
}

.flip-card-inner {
  position: relative;
  width: 100%;
	height: 100%;  
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  width: 100%;
  backface-visibility: hidden;
  border-radius: 7px;
  overflow: hidden;

}

.flip-card-front {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.flip-card-back {
  position: relative;
  transform: rotateY(180deg);
  padding: 30px 20px !important;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: auto;
  overflow-x: hidden;
}

.flip-card-front,
.flip-card-back {
  position: absolute;     
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 7px;
  overflow: hidden;

}
.flip-card-back h5 {
  font-size: 18px;
  font-family: var(--neue);
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 102%;
  font-weight: 400;
}

.flip-card-back p {
  font-size: 14px;
  color: var(--white);
  line-height: 130%;
  padding-top: 10px;
}

.flip-card-back .pills-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.flip-card-back .pills-cta p {
  font-size: 10px;
  text-transform: uppercase;
  border: 1px solid var(--white);
  border-radius: 7px;
  padding: 10px 18px;
}

.awg-mobile-card > .flip-card:nth-child(3n + 1) .flip-card-back {
  background-color: var(--blue);
}

.awg-mobile-card > .flip-card:nth-child(3n + 2) .flip-card-back {
  background-color: var(--yellow);
}

.awg-mobile-card > .flip-card:nth-child(3n + 3) .flip-card-back {
  background-color: #eeeeee;
}

.awg-mobile-card > .flip-card:nth-child(3n + 3) .flip-card-back p,
.awg-mobile-card > .flip-card:nth-child(3n + 3) .flip-card-back h5,
.awg-mobile-card > .flip-card:nth-child(3n + 3) .flip-card-back a,
.awg-mobile-card > .flip-card:nth-child(3n + 2) .flip-card-back p,
.awg-mobile-card > .flip-card:nth-child(3n + 2) .flip-card-back h5,
.awg-mobile-card > .flip-card:nth-child(3n + 2) .flip-card-back a {
  color: var(--black) !important;
  border-color: var(--black) !important;
}

.awg-mobile-card .flip-card-cta {
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--white);
  font-size: 10px;
  letter-spacing: 2px;
  line-height: 128%;
  text-decoration-thickness: 0%;
  font-weight: var(--neue);
  cursor: pointer;
}
 */

.flip-card {
  width: 100%;
  perspective: 1000px;
	aspect-ratio: 5/3;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
	height: 100%;
}

.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  width: 100%;
  backface-visibility: hidden;
  border-radius: 7px;
  overflow: hidden;
	height: 100%;

}

.flip-card-front {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.flip-card-back {
  position: relative;
  transform: rotateY(180deg);
  padding: 30px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: auto;
  overflow-x: hidden;
}

.flip-card-back h5 {
  font-size: 18px;
  font-family: var(--neue);
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 102%;
  font-weight: 400;
}

.flip-card-back p {
  font-size: 14px;
  color: var(--white);
  line-height: 130%;
  padding-top: 10px;
}

.flip-card-back .pills-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.flip-card-back .pills-cta p {
  font-size: 10px;
  text-transform: uppercase;
  border: 1px solid var(--white);
  border-radius: 7px;
  padding: 10px 18px;
}

.awg-mobile-card > .flip-card:nth-child(3n + 1) .flip-card-back {
  background-color: var(--blue);
}

.awg-mobile-card > .flip-card:nth-child(3n + 2) .flip-card-back {
  background-color: var(--yellow);
}

.awg-mobile-card > .flip-card:nth-child(3n + 3) .flip-card-back {
  background-color: #eeeeee;
}

.awg-mobile-card > .flip-card:nth-child(3n + 3) .flip-card-back p,
.awg-mobile-card > .flip-card:nth-child(3n + 3) .flip-card-back h5,
.awg-mobile-card > .flip-card:nth-child(3n + 3) .flip-card-back a,
.awg-mobile-card > .flip-card:nth-child(3n + 2) .flip-card-back p,
.awg-mobile-card > .flip-card:nth-child(3n + 2) .flip-card-back h5,
.awg-mobile-card > .flip-card:nth-child(3n + 2) .flip-card-back a {
  color: var(--black) !important;
  border-color: var(--black) !important;
}

.awg-mobile-card .flip-card-cta {
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--white);
  font-size: 10px;
  letter-spacing: 2px;
  line-height: 128%;
  text-decoration-thickness: 0%;
  font-weight: var(--neue);
  cursor: pointer;
}

/* All Work */

.grid-layout-icon {
  width: 36px;
  height: auto;
  cursor: pointer;
  transition: 0.4s ease all;
}
.list-layout-icon {
  width: 46px;
  height: auto;
  cursor: pointer;
  transition: 0.4s ease all;
}
.layout-wrap .active svg path {
  fill: var(--black);
}

.grid-mobile {
  display: none;
}
.list-mobile {
  display: none;
}
.all-work-list-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.all-work-list-mobile .accordion-title {
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  transition: 0.4s;
  position: relative;
  padding: 0px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.all-work-list-mobile .accordion-title p {
  font-size: 12px;
  font-family: var(--neue);
  color: var(--black);
  text-transform: uppercase;
  line-height: 88%;
  letter-spacing: 2px;
}
.all-work-list-mobile .accordion-title h3 {
  font-size: 26px;
  font-family: var(--neue);
}
.all-work-list-mobile .accordion-item {
  border-bottom: 1px solid #afafaf;
  padding: 12px 0px;
}

.all-work-list-mobile .accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  max-width: 100%;
  display: flex;
}
.list-mobile-project-img {
  padding-top: 30px;
}
.all-work-list-mobile .accordion-content p {
  padding-top: 10px;
}
.all-work-list-mobile .accordion-icon {
  height: 24px;
  width: 24px;
  display: inline-block;
  position: absolute;
  transition: 0.4s ease all;
}
.all-work-list-mobile .accordion-title.active .accordion-icon {
  transform: rotate(45deg);
  transition: 0.4s ease all;
}
.all-work-list-tab .list-tablinks {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid #afafaf;
  padding: 0px 60px;
}
.all-work-list-tab .list-tablinks h3 {
  font-size: 32px;
  padding-top: 20px;
  padding-bottom: 12px;
}
.all-work-list-tab .list-tablinks p {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 88%;
  font-family: var(--neue);
  color: var(--black);
}
.list-view-right-inner {
  display: flex;
  height: 100%;
}
.list-view-right-inner .lvr-left {
  width: 54px;
  background-color: var(--blue);
  display: flex;
  justify-content: center;
  align-items: center;
}
.list-view-right-inner .lvr-right {
  background-color: var(--black);
  width: calc(100% - 54px);
  height: 750px;
  position: relative;
  overflow: auto;
  overflow-x: hidden;
}
/* .list-view-right-inner .lvr-right::before{
 content: "";
  background-image: url("https://www.upkrama.com/wp-content/uploads/2026/01/list-desktop-topo.svg");
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  opacity: 70%;
  inset: 0;
  background-size: cover;
} */
.up-list-view-logo {
  width: 17px;
}
.all-work-list-tab {
  padding-top: 50px;
}
.list-content-inner {
  padding: 50px 36px;
  clip-path: inset(0 100% 0 0);
  position: relative;
  z-index: 2;
  background: var(--black);
  transition: .4s ease all;
}
.list-mobile .list-content-inner {
    clip-path: inset(0 0 0 0) !important;
}
.list-content-inner .social-icon {
  display: flex;
  gap: 20px;
  align-items: center;
}
.list-content-inner .social-icon a {
  transition: 0.3s ease all;
}
.list-content-inner .social-icon a:hover {
  transform: translateY(-5px);
}
.list-content-inner .head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}
.list-content-inner h3 {
  color: var(--white);
  font-size: clamp(26px, 5vw, 42px);
}
.list-view-projects .project-img {
  height: 400px;
}
.list-view-projects .project-details p {
  color: var(--white);
  margin-top: 20px;
}
.list-view-projects .project-info-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.list-view-projects .project-info-pills div {
  border: 1px solid var(--white);
  border-radius: 7px;
  color: #fff;
  padding: 12px 18px;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 100%;
  font-family: var(--neue);
  font-weight: 400;
}
.list-tablinks h3 {
  transition: 0.35s ease all;
}
.list-tablinks h3::after {
  transition: 0.3s ease all;
}
.list-tablinks:hover h3 {
  color: #0158f4;
  transition: 0.35s ease all;
}
.list-tablinks.active h3::after {
  content: "";
  display: inline-block;
  width: 19px;
  height: 20px;
  margin-left: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='19' height='22' viewBox='0 0 19 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5084 13.1998L0 21.904L0 18.7954L17.0258 10.952L0 3.06082L0 0L18.5084 8.65638V13.1998Z' fill='%231A1A1A'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.all-work-list-mobile .list-content-inner {
  background-color: var(--black);
  padding: 0;
}
.all-work-list-mobile .accordion-content .up-list-view-logo {
  width: 54px;
  background-color: var(--blue);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
}
.tabcontent-wrap > div:nth-child(6n + 2) .all-work-grid-wrap .right {
  flex-direction: column-reverse;
}
.tabcontent-wrap > div:nth-child(6n + 3) .all-work-grid-wrap .left {
  order: 2;
}
.tabcontent-wrap
  > div:nth-child(6n + 4)
  .all-work-grid-wrap
  .right-bottom-left {
  grid-row: 2;
}
.tabcontent-wrap > div:nth-child(6n + 5) .all-work-grid-wrap .right {
  flex-direction: column-reverse;
}
.all-work-list-mobile .list-content-inner {
  position: relative;
}
.all-work-list-mobile .list-content-inner::before {
  content: "";
  background-image: url("https://www.upkrama.com/wp-content/uploads/2026/01/mobile-topo-list-view.svg");
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  opacity: 70%;
  inset: 0;
  background-size: cover;
}
.all-work-list-mobile .list-view-projects {
  position: relative;
  z-index: 3;
}

/* Project Outer List View  */

/* Thank You */
section.thankyou {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--black);
  position: relative;
}
section.thankyou::before {
  content: "";
  background-image: url("https://www.upkrama.com/wp-content/uploads/2026/01/mobile-topo-list-view.svg");
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
  mix-blend-mode: overlay;
  opacity: 70%;
  inset: 0;
  background-size: cover;
}
.thankyou-inner {
  position: relative;
  z-index: 3;
}
section.thankyou {
  padding: 20px;
}
section.thankyou h1 {
  font-family: var(--neue);
  color: var(--white);
  font-weight: 600;
  letter-spacing: 5px;
  font-size: 9vw;
  text-align: center;
  text-transform: uppercase;
}
.back-to-home-btn {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
section.error h1 {
  font-size: 12vw;
  letter-spacing: 5px;
  color: var(--white);
}
/* Thank You */

/* Inside Studio  */
.inside-studio-tabs {
  display: flex;
  gap: 36px;
  overflow: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
}
.inside-studio .heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.inside-studio-tablinks {
  cursor: pointer;
  transition: 0.3s;
  font-size: 12px;
  letter-spacing: 2px;
  font-family: var(--neue);
  line-height: 150%;
  font-weight: 500;
  text-transform: uppercase;
  transition: 0.35s ease all;
}

.inside-studio-tablinks:hover {
  color: var(--blue);
}

.inside-studio-tablinks.active {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.inside-studio-tabcontent {
  display: none;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}
@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.is-img-grid {
  display: flex;
  justify-content: stretch;
  gap: 20px;
}
.is-img-grid .left {
  width: 60%;
  aspect-ratio: 1/1;
}
.is-img-grid .right {
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: stretch;
}
.is-img-grid .right-top {
  aspect-ratio: 1/1;
}
.is-img-grid .right-bottom {
  display: flex;
  justify-content: stretch;
  gap: 20px;
  height: 100%;
}
.is-img-grid .right-bottom-left {
  width: 35%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: stretch;
}
.is-img-grid .right-bottom-left-bottom {
  aspect-ratio: 1/1;
}
.is-img-grid .right-bottom-right {
  width: 65%;
  aspect-ratio: 1/1;
}
.right-bottom-left-top {
  height: 100%;
}
.inside-studio-in .inside-studio-tabcontent:nth-child(2) .is-img-grid {
  flex-direction: row-reverse;
}
.inside-studio-in .inside-studio-tabcontent:nth-child(3) .is-img-grid .right {
  flex-direction: column-reverse;
}
.inside-studio-in .inside-studio-tabcontent:nth-child(4) .is-img-grid {
  flex-direction: row-reverse;
}
.inside-studio-in .inside-studio-tabcontent:nth-child(3) .is-img-grid .right {
  flex-direction: column;
}
/* Inside Studio  */

.list-content-default {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 60px;
  padding-bottom: 0px;
  gap: 30px;
  z-index: 3;

}
.list-content-default .lcd-img {
  max-width: 380px;
  height: 224px;
}
.list-content-default .lcd-content {
padding: 5px 0px;
}
.list-content-default .lcd-content p{
  color: var(--white);
  text-transform: uppercase;
  font-family: var(--neue);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
}
.list-content-default .lcd-content p.location{
    font-size: 12px;
    padding-top: 5px;
}
.list-content-default > a:nth-child(1){
  transform: translateX(80px);
  display: inline-block;
}
.list-content-default > a:nth-child(2){
 margin-left: auto;
  display: inline-block;

}
.list-content-default > a:nth-child(3){
  margin-right: auto;
  display: inline-block;

}
.list-content-default > a:nth-child(4){
  transform: translateX(80px);
  display: inline-block;

}
.list-content-default > a:last-child{
  display: inline-block;
 margin-right: auto;
}
.list-content-inner.active{
  clip-path: inset(0 0 0 0);
  transition: .4s ease all;
}
.lvr-close-btn{
  cursor: pointer;
  position: absolute;
  right: 10px;
  top: 10px;

}