a,
a:hover,
a:focus,
a:active {
  outline: none;
}
/* Dido */
@font-face {
  font-family: "didot_lt_stdbold";
  src: url("../fonts/didot_lt_std_bold-webfont.woff2") format("woff2"),
    url("../fonts/didot_lt_std_bold-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

/* Avenir */
@font-face {
  font-family: "avenir_lt_std55_roman";
  src: url("../fonts/avenirltstd-roman-webfont.woff2") format("woff2"),
    url("../fonts/avenirltstd-roman-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
:root {
  --vertical-padding: 100px;
  --persona-padding: 130px;
  --side-padding: 250px;
  --paragraph-size: 20px;
  --paragraph-linehight: 32px;
  --banner-paragraph-size: 24px;
  --banner-paragraph-linehight: 36px;
  --stix-heading-size: 28px;
}
@media (max-width: 1680.99px) {
  :root {
    --vertical-padding: 90px;
    --persona-padding: 100px;
    --side-padding: 250px;
    --paragraph-size: 18px;
    --paragraph-linehight: 28px;
    --stix-heading-size: 26px;
  }
}
@media (max-width: 1440.99px) {
  :root {
    --vertical-padding: 80px;
    --persona-padding: 80px;
    --side-padding: 125px;
    --paragraph-size: 16px;
    --paragraph-linehight: 26px;
    --banner-paragraph-size: 22px;
    --banner-paragraph-linehight: 32px;
    --stix-heading-size: 24px;
  }
}
@media (max-width: 500.99px) {
  :root {
    --vertical-padding: 30px;
    --persona-padding: 30px;
    --side-padding: 30px;
    --banner-paragraph-size: 18px;
    --banner-paragraph-linehight: 28px;
  }
}
body {
  font-family: "Montserrat", sans-serif;
}
.heading-font {
  /* font-family: "STIX Two Text", serif; */
  font-family: "didot_lt_stdbold";
  color: #444;
  font-size: var(--stix-heading-size);
  font-weight: 600;
  line-height: 1;
}
/* Loader Animation */
@keyframes flip-with-rotate {
  0% {
    transform: perspective(400px) rotateY(0);
  }

  100% {
    transform: perspective(400px) rotateY(180deg);
  }
}
body.preloader-site {
  overflow: hidden;
}
.preloader-wrapper {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 555;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
}
.preloader-wrapper img {
  animation-name: flip-with-rotate;
  animation-timing-function: ease-in-out;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  height: 85px;
}
@media (max-width: 1680.99px) {
  .preloader-wrapper img {
    height: 75px;
  }
}
.logo {
  width: 50px;
  height: 50px;
}
.logo h4 {
  font-family: "Pacifico", cursive;
  font-size: 24px;
}
.logo-white {
  display: none;
}
body.google-pay .logo-white,
body.westpharma .logo-white,
body.rescue-india .logo-white {
  display: block;
}
body.google-pay .logo-grey,
body.westpharma .logo-grey,
body.rescue-india .logo-grey {
  display: none;
}
section.intro-banner {
  padding-bottom: 75px;
  position: relative;
  height: 800px;
  overflow: hidden;
}
section.intro-banner:before {
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: -1;
  background: rgb(125, 124, 154);
  background: linear-gradient(
    180deg,
    rgba(125, 124, 154, 1) 0%,
    rgba(158, 147, 177, 1) 33%,
    rgba(196, 178, 206, 1) 100%
  );
}
@media (max-width: 1680.99px) {
  section.intro-banner {
    height: 800px;
  }
  section.intro-banner.gpay-intro-banner {
    height: 750px;
  }
}
@media (max-width: 1440.99px) {
  section.intro-banner {
    height: 670px;
  }
}
@media (max-width: 500.99px) {
  .logo {
    width: 45px;
    height: 45px;
  }
}

header.header-main {
  position: relative;
  z-index: 2;
  padding: 50px 100px;
}
header.header-main .logo {
  margin-right: 50px;
}
header.header-main .logo:hover img {
  animation-name: flip-with-rotate;
  animation-timing-function: ease-in-out;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
header.header-main .nav {
  column-gap: 40px;
}
header.header-main .nav .nav-item .nav-link {
  color: #444444;
}
body.google-pay header.header-main .nav .nav-item .nav-link,
body.westpharma header.header-main .nav .nav-item .nav-link,
body.rescue-india header.header-main .nav .nav-item .nav-link {
  color: #fff;
}
header.header-main .nav .nav-item .nav-link:hover {
  color: #a7419b;
}
header.header-main .nav .nav-item {
  display: flex;
  align-items: center;
}
header.header-main .nav .nav-item .nav-link {
  overflow: hidden;
  position: relative;
  display: inline-block;
  border-radius: 0;
  padding: 0 0 5px 0;
  margin-top: 5px;
}

header.header-main .nav .nav-item .nav-link::before,
header.header-main .nav .nav-item .nav-link::after {
  content: "";
  position: absolute;
  width: 100%;
  left: 0;
}
header.header-main .nav .nav-item .nav-link::before {
  background-color: #a7419b;
  height: 2px;
  bottom: 0;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}
header.header-main .nav .nav-item .nav-link::after {
  content: attr(data-replace);
  height: 100%;
  top: 0;
  transform-origin: 100% 50%;
  transform: translate3d(200%, 0, 0);
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
  color: #a7419b;
}

header.header-main .nav .nav-item .nav-link:hover::before {
  transform-origin: 0% 50%;
  transform: scaleX(1);
}
header.header-main .nav .nav-item .nav-link:hover::after {
  transform: translate3d(0, 0, 0);
}

header.header-main .nav .nav-item .nav-link span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}

header.header-main .nav .nav-item .nav-link:hover span {
  transform: translate3d(-200%, 0, 0);
}
header.header-main .icons-right {
  margin-left: auto;
}
header.header-main .icons-right ul {
  display: grid;
  list-style: none;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 20px;
  margin-bottom: 0;
}
header.header-main .icons-right i {
  font-size: 22px;
  color: #fc5287;
  transition: 1s;
}
header.header-main .icons-right li:hover i {
  transform: rotateY(360deg);
}
body.google-pay header.header-main .icons-right i,
body.westpharma header.header-main .icons-right i,
body.rescue-india header.header-main .icons-right i {
  color: #fff;
}
header.header-main .icons-right li:nth-of-type(2) i {
  font-size: 20px;
}
.custom-tooltip {
  --bs-tooltip-bg: transparent;
  --bs-tooltip-color: #c06f9f;
  border: 1px solid #c06f9f;
  border-radius: 20px;
  padding: 1px 10px;
}

body.google-pay .top-gradient {
  height: 14px;
  width: 100%;
  background: rgb(177, 158, 186);
  background: linear-gradient(
    90deg,
    rgba(177, 158, 186, 1) 0%,
    rgba(130, 128, 158, 1) 100%
  );
  position: relative;
}
.banner-area {
  display: grid;
  grid-template-columns: 1fr 375px;
  grid-column-gap: 300px;
  padding: 0 var(--side-padding);
}
.banner-area .gpay-img-banner img {
  margin-bottom: -100px;
}
.banner-area .banner-intro .intro-title {
  display: flex;
  padding-top: var(--vertical-padding);
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 35px;
}
.banner-area .banner-intro .intro-title h2 {
  font-size: 43px;
  font-weight: 600;
  padding-right: 35px;
  margin-right: 35px;
  margin-bottom: 20px;
  color: #fff;
}
.banner-area .banner-intro .intro-title h5 {
  font-size: 24px;
  color: #fff;
  font-style: italic;
  font-weight: 500;
}
.banner-area .banner-intro .intro-para p {
  font-size: var(--banner-paragraph-size);
  line-height: var(--banner-paragraph-linehight);
  color: #fff;
  margin-bottom: 0;
}
.banner-area .banner-intro .intro-para .banner-disclaimer {
  margin-top: 30px;
}
.banner-area .banner-intro .intro-para .banner-disclaimer p {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
}
.banner-area .banner-intro .intro-para .banner-disclaimer p strong {
  font-weight: 600;
}
.intro-banner .gpay-artwork {
  position: absolute;
  right: -10px;
  bottom: -12px;
  z-index: 2;
}

@media (max-width: 1440.99px) {
  .banner-area .banner-intro .intro-title h2 {
    font-size: 40px;
  }
}

@media (max-width: 500.99px) {
  .banner-area {
    grid-template-columns: 1fr;
  }
  .banner-area .banner-intro .intro-title {
    align-items: center;
    padding-top: 0;
    margin-bottom: 20px;
  }
  .banner-area .banner-intro .intro-title h2 {
    font-size: 30px;
    padding-right: 0;
    margin-right: 0;
    margin-bottom: 10px;
  }
  header.header-main {
    padding: 20px 30px;
  }
  .banner-area .intro-para {
    margin-bottom: 30px;
  }
  .banner-area .banner-intro .intro-para .banner-disclaimer {
    margin-top: 15px;
  }
  .banner-area .banner-intro .intro-para .banner-disclaimer p {
    font-weight: 400;
  }
  .banner-area .gpay-img-banner img {
    max-width: 100%;
    height: 300px;
    margin-left: 20px;
  }
}

/* Mobile payment apps in India */
section.mobile-payment-apps-india {
  padding: var(--vertical-padding) var(--side-padding);
}
section.mobile-payment-apps-india h2 {
  margin-bottom: 20px;
  text-align: center;
}
section.mobile-payment-apps-india p {
  font-size: var(--paragraph-size);
  line-height: var(--paragraph-linehight);
  margin-bottom: 0;
}

/* Features of Google pay app */
section.features-of-google-pay-app {
  padding: var(--vertical-padding) var(--side-padding);
  background: #f8f8f8;
}
section.features-of-google-pay-app h2 {
  text-align: center;
  margin-bottom: 30px;
}
.feature-timeline {
  position: relative;
  padding-left: 4rem;
  margin: 0 0 0 30px;
  color: #444;
}
.feature-timeline:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  background: #ffffff;
  box-shadow: 0px 3px 6px #00000029;
}
.feature-timeline .timeline-container {
  position: relative;
  margin-bottom: 15px;
}
.feature-timeline .timeline-container:last-child {
  margin-bottom: 0;
}
.feature-timeline .timeline-container:last-child .timeline-body {
  padding-bottom: 0;
}
.feature-timeline .timeline-container .timeline-icon img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.feature-timeline .timeline-container .timeline-body {
  padding: 0 40px 15px;
}
.feature-timeline .timeline-container .timeline-body:before {
  content: "";
  width: 40px;
  height: 2px;
  background: #a7a7a7;
  display: block;
  position: absolute;
  left: -13px;
  top: 30px;
}
.feature-timeline .timeline-container .timeline-body .timeline-title {
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 22px;
}
.feature-timeline .timeline-container .timeline-body p {
  color: #444;
  font-size: var(--paragraph-size);
}
.feature-timeline .timeline-container:nth-child(1) .hexagon {
  background-image: linear-gradient(90deg, #ceb783, #ceb783);
}
.feature-timeline .timeline-container:nth-child(2) .hexagon {
  background-image: linear-gradient(90deg, #9c9f83, #9c9f83);
}
.feature-timeline .timeline-container:nth-child(3) .hexagon {
  background-image: linear-gradient(90deg, #7a9ca3, #7a9ca3);
}
.feature-timeline .timeline-container:nth-child(4) .hexagon {
  background-image: linear-gradient(90deg, #7cb5ce, #7cb5ce);
}
.feature-timeline .timeline-container:nth-child(5) .hexagon {
  background-image: linear-gradient(90deg, #8399b2, #8399b2);
}
.feature-timeline .timeline-container:nth-child(6) .hexagon {
  background-image: linear-gradient(90deg, #a9a5bc, #a9a5bc);
}
.feature-timeline .timeline-container:nth-child(7) .hexagon {
  background-image: linear-gradient(90deg, #9bc6bf, #9bc6bf);
}
.feature-timeline .timeline-container:nth-child(8) .hexagon {
  background-image: linear-gradient(90deg, #a789b9, #a789b9);
}
.feature-timeline .timeline-container .hexagon {
  width: 45.75px;
  height: 65px;
  border-radius: 13px;
  transition: transform 400ms ease;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: -85px;
  top: 2px;
}
.feature-timeline .timeline-container .hexagon img {
  position: relative;
  z-index: 2;
  height: 30px;
}
.feature-timeline .timeline-container .hexagon:before,
.feature-timeline .timeline-container .hexagon:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: inherit;
  height: inherit;
  background-image: inherit;
  border-radius: inherit;
}
.feature-timeline .timeline-container .hexagon:before {
  transform: rotate(60deg);
}
.feature-timeline .timeline-container .hexagon:after {
  transform: rotate(-60deg);
}

@media (max-width: 500.99px) {
  .feature-timeline {
    padding-left: 2rem;
  }
  .feature-timeline .timeline-container .timeline-body {
    padding: 0 0px 5px;
  }
  .feature-timeline .timeline-container .timeline-body p {
    font-size: 14px;
  }
  .feature-timeline .timeline-container .timeline-body .timeline-title {
    font-size: 18px;
    margin-bottom: 6px;
  }
  .feature-timeline .timeline-container .timeline-body:before {
    display: none;
  }
  .feature-timeline:before {
    display: none;
  }
  .feature-timeline .timeline-container .hexagon {
    width: 27.75px;
    height: 42px;
    border-radius: 4px;
    left: -55px;
    top: 2px;
  }
  .feature-timeline .timeline-container .hexagon img {
    height: 20px;
  }
}

/* Problem Statement */
section.problem-statement {
  padding: 35px var(--side-padding);
  border: 1px solid #d6edeb;
  background: #466e9d;
}
section.problem-statement .content {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-column-gap: 100px;
}
section.problem-statement .content h2 {
  color: #fff;
  margin-bottom: 15px;
}
section.problem-statement .content p {
  font-size: 18px;
  line-height: 28px;
  color: #fff;
  margin-bottom: 0;
}
section.problem-statement .content .img-right {
  position: relative;
}
section.problem-statement .content .img-right img {
  position: absolute;
  bottom: -35px;
}
@media (max-width: 500.99px) {
  section.problem-statement .content {
    grid-template-columns: 1fr;
  }
  section.problem-statement .content .img-right img {
    right: 0;
    height: 200px;
  }
}
/* My Process */
section.my-process {
  padding: var(--vertical-padding) var(--side-padding);
}
section.my-process h2 {
  text-align: center;
  margin-bottom: 50px;
}
section.my-process .process-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
section.my-process .process-timeline .process-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
}
section.my-process .process-timeline .process-item:nth-child(1)::before {
  display: none;
}
section.my-process .process-timeline .process-item:before,
section.my-process .process-timeline .process-item:after {
  content: "";
  border-top: 1px dashed #567f72;
  width: 50%;
  top: 25px;
  position: absolute;
  z-index: -1;
}
section.my-process .process-timeline .process-item:before {
  left: 0;
}
section.my-process .process-timeline .process-item:after {
  left: 50%;
  transform: translateX(-2px);
}
section.my-process .process-timeline .process-item:nth-child(5)::after {
  display: none;
}
section.my-process .process-timeline .process-item .process-number {
  background: #f7fcfa;
  border: 1px solid #557e71;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #557e71;
  font-weight: 500;
  margin-bottom: 20px;
}
section.my-process .process-timeline .process-item h4 {
  font-size: 20px;
  color: #444444;
  font-weight: 600;
  margin-bottom: 15px;
}
section.my-process .process-timeline .process-item ul {
  padding-left: 0;
  margin-bottom: 0;
}
section.my-process .process-timeline .process-item ul li {
  list-style: none;
  color: #444;
  font-size: 16px;
  letter-spacing: 0.16px;
  font-weight: 500;
  margin-bottom: 5px;
}
section.my-process .process-timeline .process-item ul li:last-child {
  margin-bottom: 0;
}

/*Objective*/
section.objective {
  background: #f8f8f8;
  box-shadow: 0px 3px 6px #00000029;
  padding: 60px var(--side-padding);
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  grid-column-gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}
section.objective .image img {
}
section.objective h2 {
  margin-bottom: 14px;
  font-weight: 700;
  font-size: 32px;
}
section.objective .heading-font.heading-font-sm-screen {
  display: none;
}
section.objective p {
  font-size: var(--paragraph-size);
  line-height: 36px;
  color: #444;
  font-weight: 500;
  margin-bottom: 0;
}
/* Direct Competitor Analysis */
section.direct-competitor-analysis {
  position: relative;
  padding: 0 0 165px 0;
  overflow: hidden;
}
section.direct-competitor-analysis:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: transparent linear-gradient(270deg, #f4f9ff 0%, #b8bee0 100%);
}
section.direct-competitor-analysis .title-section {
  padding: 35px;
  text-align: center;
  margin-bottom: 100px;
  margin-top: 100px;
}
section.direct-competitor-analysis .title-section h2 {
  font-size: var(--stix-heading-size);
  margin-bottom: 15px;
  line-height: 1;
}
section.direct-competitor-analysis .title-section p {
  font-size: var(--paragraph-size);
  line-height: var(--paragraph-linehight);
  max-width: 55%;
  margin: 0 auto;
}
section.direct-competitor-analysis .title-section p strong {
  font-weight: 500;
}
section.direct-competitor-analysis .competitor-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 35px;
  padding: 20px var(--side-padding);
}
section.direct-competitor-analysis .competitor-items .competitor-content {
  background: #fff;
  border-top-left-radius: 75px;
  border-bottom-right-radius: 75px;
  padding: 100px 30px 30px 30px;
  box-shadow: 0px 3px 9px 3px #0000000f;
  position: relative;
  height: 100%;
}
section.direct-competitor-analysis
  .competitor-items
  .competitor-content:before {
  content: "";
  width: 90%;
  height: 62px;
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0.5;
}
section.direct-competitor-analysis
  .competitor-items
  .competitor-content::after {
  content: "";
  width: 90%;
  height: 75px;
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
section.direct-competitor-analysis
  .competitor-items
  .competitor-content
  .competitor-logo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  position: absolute;
  top: -75px;
  left: 50%;
  transform: translateX(-50%);
}
section.direct-competitor-analysis .competitor-items .competitor-content p {
  color: #444444;
  font-size: 14px;
  font-weight: 600;
  font-style: italic;
  text-align: center;
  margin-bottom: 25px;
}
section.direct-competitor-analysis .competitor-items .competitor-content h6 {
  color: #444444;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
section.direct-competitor-analysis .competitor-items .competitor-content ul {
  margin-bottom: 30px;
  padding-left: 15px;
}
section.direct-competitor-analysis
  .competitor-items
  .competitor-content
  ul:last-child {
  margin-bottom: 0;
}
section.direct-competitor-analysis .competitor-items .competitor-content ul li {
  color: #444444;
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  margin-bottom: 15px;
  list-style: none;
  position: relative;
}
section.direct-competitor-analysis
  .competitor-items
  .competitor-content
  ul
  li:before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  position: absolute;
  left: -20px;
  top: 6px;
  z-index: 1;
}
section.direct-competitor-analysis
  .competitor-items
  .phonepe
  .competitor-content
  .competitor-logo {
  box-shadow: 0px 3px 6px #5f259f4a;
}
section.direct-competitor-analysis
  .competitor-items
  .phonepe
  .competitor-content
  ul
  li:before {
  background-color: #5f259f;
}
section.direct-competitor-analysis
  .competitor-items
  .phonepe
  .competitor-content:before {
  background: #5f259f;
  filter: blur(30px);
}
section.direct-competitor-analysis
  .competitor-items
  .phonepe
  .competitor-content:after {
  background: #5f259f;
}
section.direct-competitor-analysis .competitor-items .gpay {
  position: relative;
  top: 75px;
}
section.direct-competitor-analysis
  .competitor-items
  .gpay
  .competitor-content
  .competitor-logo {
  box-shadow: 0px 3px 6px #327eef4a;
}
section.direct-competitor-analysis
  .competitor-items
  .gpay
  .competitor-content
  ul
  li:before {
  background-color: #327eef;
}
section.direct-competitor-analysis
  .competitor-items
  .gpay
  .competitor-content:before {
  background: #4c78bb;
  filter: blur(30px);
}
section.direct-competitor-analysis
  .competitor-items
  .gpay
  .competitor-content::after {
  background: #4c78bb;
}
section.direct-competitor-analysis
  .competitor-items
  .paytm
  .competitor-content
  .competitor-logo {
  box-shadow: 0px 3px 6px #54c1f04a;
}
section.direct-competitor-analysis
  .competitor-items
  .paytm
  .competitor-content
  ul
  li:before {
  background-color: #54c1f0;
}
section.direct-competitor-analysis
  .competitor-items
  .paytm
  .competitor-content:before {
  background: #54c1f0;
  filter: blur(30px);
}
section.direct-competitor-analysis
  .competitor-items
  .paytm
  .competitor-content:after {
  background: #54c1f0;
}
section.direct-competitor-analysis
  .competitor-items
  .paytm
  .competitor-content
  .competitor-logo
  img {
  width: 80px;
}
@media (max-width: 1680.99px) {
  section.direct-competitor-analysis {
    padding: 0 0 125px 0;
  }
  section.direct-competitor-analysis .competitor-items {
    grid-column-gap: 30px;
  }
  section.direct-competitor-analysis .title-section {
    padding: 25px;
    margin-bottom: 50px;
    margin-top: 30px;
  }
  section.direct-competitor-analysis
    .competitor-items
    .competitor-content
    .competitor-logo {
    width: 130px;
    height: 130px;
  }
  section.direct-competitor-analysis .competitor-items .competitor-content ul {
    margin-bottom: 15px;
    padding-left: 15px;
  }
  section.direct-competitor-analysis .competitor-items .competitor-content {
    padding: 70px 30px 30px 30px;
  }
  section.direct-competitor-analysis .competitor-items .gpay {
    top: 55px;
  }
  section.direct-competitor-analysis
    .competitor-items
    .competitor-content:before {
    height: 50px;
  }
  section.direct-competitor-analysis
    .competitor-items
    .competitor-content
    ul
    li {
    margin-bottom: 10px;
  }
  section.direct-competitor-analysis .competitor-items .competitor-content p {
    margin-bottom: 20px;
  }
}

@media (max-width: 500.99px) {
  section.direct-competitor-analysis .title-section {
    text-align: left;
  }
  section.direct-competitor-analysis .title-section p {
    max-width: 100%;
  }
  section.objective {
    grid-template-columns: 1fr;
    padding: var(--side-padding);
  }
  section.objective .image {
    display: flex;
    margin-bottom: 20px;
  }
  section.objective h2 {
    display: none;
  }
  section.objective .heading-font.heading-font-sm-screen {
    display: block;
    margin: auto;
  }
  section.objective .image img {
    max-width: 200px;
  }
  section.direct-competitor-analysis .competitor-items {
    grid-template-columns: 1fr;
  }
  section.direct-competitor-analysis {
    padding: 0 0 30px 0;
  }
  section.objective p {
    margin-bottom: 15px;
  }
}
/* User Analysis */
section.user-analysis {
  background: #ffffff;
  padding: var(--vertical-padding) calc(var(--side-padding) + 80px);
}
section.user-analysis .target-group {
  background: rgb(185, 172, 208);
  background: linear-gradient(
    90deg,
    rgba(185, 172, 208, 1) 0%,
    rgba(90, 139, 185, 1) 100%
  );
  padding: 15px 100px;
}
section.user-analysis h2.heading-font {
  margin-bottom: 35px;
}
section.user-analysis .target-group h4 {
  margin-bottom: 0;
  font-size: var(--paragraph-size);
  font-weight: 600;
  color: #fff;
}
section.user-analysis .target-group h4 strong {
  font-weight: 600;
}
section.user-analysis .user-analyst-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 55px;
  background: #fafafa;
  box-shadow: 0px 3px 6px #00000029;
  padding-top: 55px;
}
section.user-analysis .user-analyst-list-item {
  background: #ffffff;
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-column-gap: 40px;
  padding: 0 100px 0 120px;
}
section.user-analysis .user-analyst-list-item:nth-child(even) {
  grid-template-columns: 1fr 160px;
}
section.user-analysis .user-analyst-list-item:nth-child(1) .user-analyst-img {
  background: rgb(223, 226, 226);
  background: linear-gradient(
    180deg,
    rgba(223, 226, 226, 1) 0%,
    rgba(227, 233, 233, 1) 50%,
    rgba(249, 252, 252, 1) 100%
  );
}
section.user-analysis .user-analyst-list-item:nth-child(2) .user-analyst-img {
  background: rgb(242, 245, 247);
  background: linear-gradient(
    0deg,
    rgba(242, 245, 247, 1) 0%,
    rgba(214, 224, 237, 1) 100%
  );
}
section.user-analysis .user-analyst-list-item:nth-child(3) .user-analyst-img {
  background: rgb(239, 229, 229);
  background: linear-gradient(
    180deg,
    rgba(239, 229, 229, 1) 0%,
    rgba(247, 245, 244, 1) 50%,
    rgba(245, 244, 244, 1) 100%
  );
}
section.user-analysis .user-analyst-list-item .user-analyst-img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: -15px;
  margin-bottom: -15px;
  position: relative;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
section.user-analysis .user-analyst-list-item .user-analyst-img:before {
  right: -8px;
  top: 1px;
  content: "\A";
  border-style: solid;
  border-width: 12px 10px 8px 0;
  position: absolute;
  transform: rotate(320deg);
}
section.user-analysis
  .user-analyst-list-item:nth-child(1)
  .user-analyst-img:before {
  border-color: transparent #677e86 transparent transparent;
}
section.user-analysis
  .user-analyst-list-item:nth-child(2)
  .user-analyst-img:before {
  border-color: transparent #46779b transparent transparent;
  right: 160px;
  transform: rotate(230deg);
}
section.user-analysis
  .user-analyst-list-item:nth-child(3)
  .user-analyst-img:before {
  border-color: transparent #b18f72 transparent transparent;
}
section.user-analysis .user-analyst-list-item .user-analyst-img h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 15px 0 0 0;
}
section.user-analysis
  .user-analyst-list-item:nth-child(1)
  .user-analyst-img
  h3 {
  color: #5c7474;
}
section.user-analysis
  .user-analyst-list-item:nth-child(2)
  .user-analyst-img
  h3 {
  color: #46779b;
}
section.user-analysis
  .user-analyst-list-item:nth-child(3)
  .user-analyst-img
  h3 {
  color: #b18372;
}
section.user-analysis .user-analyst-list-item .analyst-list {
  padding: 20px 0;
}
section.user-analysis .user-analyst-list-item .analyst-list ul {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 500;
  list-style: none;
}
section.user-analysis .user-analyst-list-item .analyst-list ul li {
  margin-bottom: 8px;
  position: relative;
}
section.user-analysis .user-analyst-list-item .analyst-list ul li::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  transform: matrix(-0.71, 0.71, -0.71, -0.71, 0, 0);
}
section.user-analysis
  .user-analyst-list-item:nth-of-type(1)
  .analyst-list
  ul
  li::before {
  background: #598493;
}
section.user-analysis
  .user-analyst-list-item:nth-of-type(2)
  .analyst-list
  ul
  li::before {
  background: #2a6691;
}
section.user-analysis
  .user-analyst-list-item:nth-of-type(3)
  .analyst-list
  ul
  li::before {
  background: #b7775f;
}
section.user-analysis .user-analyst-list-item .analyst-list ul li:last-child {
  margin-bottom: 0;
}
@media (max-width: 1440.99px) {
  section.user-analysis {
    padding: var(--vertical-padding) var(--side-padding);
  }
}
@media (max-width: 500.99px) {
  section.user-analysis h2.heading-font {
    margin-bottom: 25px;
  }
  section.user-analysis .target-group {
    display: none;
  }
  section.user-analysis .user-analyst-list {
    box-shadow: none;
    padding-top: 0;
    grid-row-gap: 40px;
    background: #ffffff;
  }
  section.user-analysis .user-analyst-list-item {
    padding: 0;
    box-shadow: none;
    grid-template-columns: 1fr;
    background: #ffffff;
  }
  section.user-analysis .user-analyst-list-item .user-analyst-img {
    margin-top: 0;
    margin-bottom: 0;
    width: 150px;
    height: 160px;
    justify-self: center;
  }
  section.user-analysis .user-analyst-list-item .user-analyst-img h3 {
    font-size: 16px;
  }
  section.user-analysis .user-analyst-list-item .analyst-list ul li {
    margin-bottom: 10px;
    font-size: 14px;
  }
  section.user-analysis .user-analyst-list-item:nth-child(2) .user-analyst-img {
    order: 1;
  }
  section.user-analysis .user-analyst-list-item:nth-child(2) .analyst-list {
    order: 2;
  }
  section.user-analysis
    .user-analyst-list-item:nth-child(2)
    .user-analyst-img:before {
    right: 150px;
  }
  section.user-analysis .user-analyst-list-item:nth-child(even) {
    grid-template-columns: 1fr;
  }
}

/* Personas */
section.personas {
  padding: var(--persona-padding) var(--persona-padding);
  background: url(../images/projects/gpay/persona-bg.png) no-repeat 0 bottom /
    cover;
}
section.personas h2.heading-font {
  margin-bottom: 20px;
  color: #fff;
  padding-left: 10px;
}
section.personas .persona-imgs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 50px;
}
section.personas .persona-imgs .image-base {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0px 3px 6px #00000029;
  padding: 18px;
}

@media (max-width: 1680.99px) {
  section.personas {
    padding: calc(var(--persona-padding) - 45px) var(--persona-padding);
  }
}
@media (max-width: 500.99px) {
  section.personas {
    padding: var(--side-padding);
  }
  section.personas h2.heading-font {
    text-align: center;
    margin: auto;
    margin-bottom: 20px;
    padding-left: 0px;
  }
  section.personas .persona-imgs {
    grid-template-columns: 1fr;
  }
}

/* Current GooglePay app screens */
section.current-google-pay-app-screens {
  padding: var(--vertical-padding) 0;
  background: url(../images/projects/gpay/current-google-pay-app-screens.png)
    no-repeat 0 0 / cover;
}
section.current-google-pay-app-screens h2.heading-font {
  margin-bottom: 50px;
  font-size: 30px;
  font-weight: 700;
}
section.current-google-pay-app-screens img {
  padding: 0 calc(var(--side-padding) + 50px);
}
@media (max-width: 1680.99px) {
  section.current-google-pay-app-screens img {
    padding: 0 calc(var(--side-padding) + 75px);
  }
}
@media (max-width: 500.99px) {
  section.current-google-pay-app-screens h2.heading-font {
    font-size: 26px;
    margin: 20px 20px 50px;
  }
}

/* Low Fidelity Wireframes */
section.low-fidelity-wireframes {
  background: #fff;
  padding: var(--vertical-padding) 60px;
}
section.low-fidelity-wireframes h2.heading-font {
  margin-bottom: 25px;
  font-size: 30px;
  font-weight: 700;
}
section.low-fidelity-wireframes .note {
  padding: 13px 40px;
  background: rgb(85, 128, 176);
  background: linear-gradient(
    90deg,
    rgba(85, 128, 176, 1) 0%,
    rgba(70, 110, 157, 1) 100%
  );
  margin-bottom: 50px;
  display: inline-block;
}
section.low-fidelity-wireframes .note h4 {
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 0;
  text-align: center;
}
section.low-fidelity-wireframes .note h4 strong {
  font-weight: 500;
}
section.low-fidelity-wireframes img {
  padding: 0 var(--side-padding);
}
@media (max-width: 1680.99px) {
  section.low-fidelity-wireframes img {
    padding: 0 calc(var(--side-padding) + 75px);
  }
}
@media (max-width: 1440.99px) {
  section.low-fidelity-wireframes img {
    padding: 0 calc(var(--side-padding) + 25px);
  }
}
@media (max-width: 500.99px) {
  section.low-fidelity-wireframes h2.heading-font {
    font-size: 24px;
  }
  section.low-fidelity-wireframes .note h4 {
    font-size: 16px;
  }
  section.low-fidelity-wireframes .note h4 strong {
    font-weight: 400;
    font-size: 14px;
  }
  section.low-fidelity-wireframes .note {
    margin: 0 -30px 25px;
    padding: 15px 22px;
  }
}

/* Final Mock up a revamped version */
section.final-mockup-revamped {
  padding: var(--vertical-padding) 0;
  position: relative;
}
section.final-mockup-revamped:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../images/projects/gpay/final-mockup-revamped.png) no-repeat 0
    bottom / cover;
  z-index: -1;
}
section.final-mockup-revamped h2.heading-font {
  margin-bottom: 20px;
  color: #fff;
}
section.final-mockup-revamped .note {
  padding: 8px 20px;
  background: #2c2b55;
  box-shadow: 0px 3px 6px #121212;
  margin-bottom: 50px;
}
section.final-mockup-revamped .note h4 {
  color: #fff;
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 0;
  text-align: center;
  font-style: italic;
}
section.final-mockup-revamped .mockup-screens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 100px;
  padding: 0 var(--side-padding);
}
section.final-mockup-revamped .mockup-screens .mockup-item:nth-child(1) {
  margin-top: 65px;
}
section.final-mockup-revamped .mockup-screens .mockup-item:nth-child(3) {
  margin-top: 150px;
}
section.final-mockup-revamped .mockup-screens .mockup-item .item {
  margin-bottom: 50px;
}
section.final-mockup-revamped .mockup-screens .mockup-item .item:last-child {
  margin-bottom: 0;
}
section.final-mockup-revamped .mockup-screens .mockup-item .mockup-title {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid #0279c3;
  position: relative;
  padding: 11px 50px;
  margin-bottom: 20px;
}
section.final-mockup-revamped
  .mockup-screens
  .mockup-item
  .mockup-title:before {
  content: "";
  width: 4px;
  height: 30px;
  background: #0279c3;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
section.final-mockup-revamped .mockup-screens .mockup-item .mockup-title h5 {
  margin-bottom: 0;
  color: #fff;
  font-family: "STIX Two Text", serif;
  font-weight: 400;
  text-align: center;
}
@media (max-width: 1680.99px) {
  section.final-mockup-revamped .mockup-screens {
    padding: 0 calc(var(--side-padding) + 75px);
  }
}
@media (max-width: 1440.99px) {
  section.final-mockup-revamped .mockup-screens {
    padding: 0 calc(var(--side-padding) + 15px);
  }
  section.final-mockup-revamped .mockup-screens .mockup-item .mockup-title h5 {
    font-size: 18px;
  }
}
/* Other Projects */
section.other-projects {
  padding: var(--vertical-padding) var(--side-padding);
  background: #f8f8f8;
}
section.other-projects h2.heading-font {
  margin-bottom: 15px;
}
section.other-projects .project-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 45px;
}
section.other-projects .project-items .item {
  background: #fff;
  box-shadow: 0px 3px 6px #00000029;
  padding: 20px 25px;
}
section.other-projects .project-items .item a {
  text-decoration: none;
  display: block;
}
section.other-projects .project-items .item figure {
  margin-bottom: 20px;
  height: 230px;
  overflow: hidden;
  padding: 15px 0;
  display: flex;
  justify-content: center;
}
section.other-projects .project-items .item.westpharma figure {
  background: transparent
    linear-gradient(237deg, #4a779d 0%, #5a9db6 67%, #5ca1b9 100%);
}
section.other-projects .project-items .item.gpay figure {
  background: transparent
    linear-gradient(124deg, #c3b2ce 0%, #c1b0cc 34%, #7e7d9b 100%);
}
section.other-projects .project-items .item.rescue-india figure {
  background: transparent
    linear-gradient(124deg, #9aa99a 0%, #bdc2b2 58%, #d5d3c2 100%);
}
section.other-projects .project-items .item.collection figure {
  background: transparent linear-gradient(124deg, #ba8f93 0%, #e9cabc 100%);
}
section.other-projects .project-items .item figure img {
  /* width: 100%; */
  object-fit: contain;
  height: 100%;
  padding: 7px;
}
section.other-projects .project-items .item.gpay figure img {
  width: 100%;
}
section.other-projects .project-items .item .content {
  padding: 0 25px;
}
section.other-projects .project-items .item .content h6 {
  font-size: 18px;
  color: #444444;
  font-weight: 600;
}
section.other-projects .project-items .item .content p {
  font-size: 16px;
  color: #444444;
  line-height: 21px;
  margin-bottom: 0;
}
@media (max-width: 500.99px) {
  section.other-projects .project-items {
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 20px;
  }
}

/* Drop a Message */
.drop-a-message {
  padding: 55px 0 0 0;
}
.drop-a-message h1 {
  font-family: "STIX Two Text", serif;
  font-size: 30px;
  margin-bottom: 30px;
  text-align: center;
  color: #fff;
}
.drop-a-message .social-media {
  width: 100%;
  padding-bottom: 35px;
}
.drop-a-message .social-media ul {
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  column-gap: 45px;
  margin-bottom: 0;
  padding-left: 0;
}
.drop-a-message .social-media i {
  font-size: 35px;
  color: #fff;
  transition: 1s;
}
.drop-a-message .social-media li:nth-of-type(2) i {
  font-size: 30px;
}
.drop-a-message .social-media li {
  transition: 1s;
  position: relative;
  -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
  -moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
  transition: transform ease-out 0.1s, background 0.2s;
  width: 55px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.drop-a-message .social-media li:hover i {
  transform: rotateY(360deg);
}
.drop-a-message .social-media li:after {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  content: "";
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}
.drop-a-message .social-media li:after {
  top: 0;
  left: 0;
  padding: 0;
  z-index: -1;
  /* box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1); */
  /* opacity: 0; */
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}

.drop-a-message .social-media li:hover:hover {
  background: rgba(255, 255, 255, 0.05);
  /* -webkit-transform: scale(0.93);
  -moz-transform: scale(0.93);
  -ms-transform: scale(0.93);
  transform: scale(0.93); */
  color: #fff;
}

.drop-a-message .social-media li:hover:after {
  -webkit-animation: sonarEffect 1.3s ease-out 75ms;
  -moz-animation: sonarEffect 1.3s ease-out 75ms;
  animation: sonarEffect 1.3s ease-out 75ms;
}

.drop-a-message.dark-theme {
  background: url(../images/footer-bg.png) no-repeat 0 -140px / cover;
  overflow: hidden;
}
.drop-a-message.dark-theme .bottom-gradient {
  display: none;
}
@keyframes sonarEffect {
  0% {
    opacity: 0.3;
  }
  40% {
    opacity: 0.5;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 5px 5px #d72e9c6d,
      0 0 0 10px rgba(255, 255, 255, 0.5);
  }
  100% {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 5px 5px #d72e9c6d,
      0 0 0 10px rgba(255, 255, 255, 0.5);
    transform: scale(1.5);
    opacity: 0;
  }
}
.drop-a-message p {
  font-size: 14px;
  padding: 10px 200px;
  margin-bottom: 0;
  text-align: center;
  color: #444;
  background: #fff;
}

.email-copy-icon {
  cursor: pointer;
  position: relative;
}

.copy-tooltip-container {
  display: flex;
  align-items: center;
  gap: 15px;
  position: absolute;
  bottom: -50px;
  color: #c06f9f;
  opacity: 0;
  display: none;
  background: #fff;
  padding: 0.25rem 1.5rem;
  border: 1px solid #c06f9f;
  border-radius: 20px;
  transition: opacity 0.6s;
}

.copy-tooltip-container.show {
  opacity: 1;
  display: flex;
}

.copy-tooltip-container h5 {
  font-size: 14px;
}

.copy-tooltip-container i.bi {
  font-size: 14px !important;
  color: var(--bs-heading-color);
}

.email-copy-to-tooltip {
  position: absolute;
  bottom: -43px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  background-color: #514262;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 13px;
  text-align: center;
  white-space: pre;
}

.email-copy-icon:hover .email-copy-to-tooltip {
  opacity: 1;
}

.phone-copy-icon {
  cursor: pointer;
  position: relative;
}

.phone-copy-tooltip h5 {
  white-space: pre;
}

.phone-copy-to-tooltip {
  position: absolute;
  bottom: -43px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  background-color: #514262;
  /* Bootstrap primary color */
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 13px;
  text-align: center;
  white-space: pre;
}

.phone-copy-icon:hover .phone-copy-to-tooltip {
  opacity: 1;
}

@media (max-width: 1680.99px) {
  .drop-a-message {
    padding: 50px 0 0 0;
  }
  .drop-a-message h1 {
    font-size: 28px;
    margin-bottom: 20px;
  }
  .drop-a-message .social-media i {
    font-size: 32px;
  }
  .drop-a-message .social-media li:nth-of-type(2) i {
    font-size: 28px;
  }
  .drop-a-message .social-media {
    padding-bottom: 25px;
  }
}

@media (max-width: 1024.99px) {
  .drop-a-message.dark-theme {
    background: url(../images/footer-bg.png) no-repeat -405px -10px / 240%;
  }
  .drop-a-message h1 {
    font-size: 22px;
    margin-bottom: 18px;
  }
  .drop-a-message p {
    display: none;
  }
  .drop-a-message .social-media ul {
    column-gap: 5px;
  }
  .drop-a-message .social-media i {
    font-size: 22px;
  }
  .drop-a-message .social-media li:nth-of-type(2) i {
    font-size: 20px;
  }
}

/*Project: Westpharma*/
body.westpharma .top-gradient {
  height: 14px;
  width: 100%;
  background: rgb(59, 109, 144);
  background: linear-gradient(
    270deg,
    rgba(59, 109, 144, 1) 0%,
    rgba(91, 159, 183, 1) 100%
  );
  position: relative;
}
section.project-westpharma:before {
  background: transparent linear-gradient(180deg, #49759b 0%, #5ca1b9 100%);
}
section.project-westpharma .banner-area {
  grid-template-columns: 1fr 510px;
  column-gap: 90px;
}
section.project-westpharma .banner-area .banner-intro .intro-para h6 {
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  margin-top: 25px;
}
section.project-westpharma .banner-area .banner-intro .intro-para a {
  font-size: 20px;
  color: #fff;
  font-weight: 500;
  font-style: italic;
}
section.project-westpharma.intro-banner .westpharma-artwork {
  position: absolute;
  right: -10px;
  bottom: -15px;
  z-index: 2;
}
section.project-westpharma .banner-area .img-base img {
  position: absolute;
  right: -210px;
  width: 100%;
  height: auto;
  bottom: -160px;
}
@media (max-width: 1680.99px) {
  section.project-westpharma .banner-area {
    grid-template-columns: 1.5fr 500px;
    column-gap: 0px;
  }
}
@media (max-width: 1600px) {
  section.project-westpharma .banner-area {
    column-gap: 100px;
  }
  section.project-westpharma .banner-area .banner-intro .intro-para a {
    font-size: 18px;
  }
}
@media (max-width: 1440.99px) {
  section.project-westpharma .banner-area .img-base img {
    right: -100px;
    bottom: -60px;
  }
}
@media (max-width: 500.99px) {
  section.project-westpharma .banner-area {
    grid-template-columns: 1fr;
  }
  section.project-westpharma .banner-area .banner-intro .intro-para a {
    font-size: 16px;
  }
  section.project-westpharma .banner-area .img-base img {
    position: relative;
    width: 85%;
    margin-left: 0;
    right: -25px;
    height: auto;
    bottom: 0;
  }
  section.project-westpharma .banner-area {
    column-gap: 100px;
  }
  section.project-westpharma.intro-banner .westpharma-artwork {
    right: -15px;
    bottom: -10px;
  }
}

/* Brief Role */
section.brief-role-goal {
  padding: var(--vertical-padding) var(--side-padding);
}
section.brief-role-goal .brief-role {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
section.brief-role-goal .brief-role .item {
  position: relative;
  padding: 28px 60px;
}
section.brief-role-goal .brief-role .item h3 {
  margin-bottom: 15px;
}
section.brief-role-goal .brief-role .item p {
  font-size: calc(var(--paragraph-size) + 2px);
  line-height: calc(var(--paragraph-linehight) + 2px);
  text-align: left;
  color: #444444;
  margin-bottom: 0;
}
section.brief-role-goal .brief-role .item * {
  z-index: 2;
  position: relative;
}
section.brief-role-goal .brief-role .item:before {
  content: "";
  width: 8px;
  height: 75%;
  border-radius: 15px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
section.brief-role-goal .brief-role .item.brief:before {
  background: #5c8fb5;
}
section.brief-role-goal .brief-role .item::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
section.brief-role-goal .brief-role .item.brief::after {
  background: transparent linear-gradient(90deg, #d0e6ef 0%, #ffffff 100%);
}
section.brief-role-goal .brief-role .item.role::after {
  background: transparent
    linear-gradient(269deg, #f1ebea4a 0%, #f0e8e851 53%, #efd2dd 100%);
  opacity: 0.44;
}
section.brief-role-goal .brief-role .item.role:before {
  background: #aa6d84;
}

@media (max-width: 1680.99px) {
  section.brief-role-goal .brief-role .item p {
    font-size: var(--paragraph-size);
  }
}
@media (max-width: 1440.99px) {
  section.brief-role-goal .brief-role {
    grid-column-gap: 50px;
  }
}
@media (max-width: 500.99px) {
  section.brief-role-goal .brief-role {
    grid-template-columns: 1fr;
    grid-row-gap: 20px;
  }
  section.brief-role-goal .brief-role .item {
    padding: 20px 20px 20px 25px;
  }
  section.brief-role-goal .brief-role .item:before {
    height: 100%;
  }
  section.brief-role-goal .brief-role .item p {
    line-height: calc(var(--paragraph-linehight) + 8px);
  }
}

section.primary-goal {
  margin-top: 75px;
  margin-bottom: 75px;
  background: transparent linear-gradient(270deg, #ffffff 0%, #f0faf8 100%);
}
section.primary-goal .primary-goal-sec {
  display: grid;
  grid-template-columns: 1fr 600px;
  grid-column-gap: 50px;
}
section.primary-goal .primary-goal-sec .content {
  padding-left: var(--side-padding);
  display: flex;
  justify-content: center;
  flex-direction: column;
}
section.primary-goal .primary-goal-sec .image {
  padding-bottom: 50px;
}
section.primary-goal .primary-goal-sec .image img {
  width: 100%;
  height: auto;
}
section.primary-goal h3 {
  font-size: calc(var(--stix-heading-size) + 4px);
  margin-bottom: 15px;
}
section.primary-goal p {
  font-size: calc(var(--paragraph-size) + 2px);
  line-height: calc(var(--paragraph-linehight) + 8px);
  text-align: justify;
  margin-bottom: 0;
  letter-spacing: 0.22px;
  color: #444444;
}

@media (max-width: 1680.99px) {
  section.primary-goal {
    margin-top: 0;
  }
}
@media (max-width: 500.99px) {
  section.primary-goal {
    margin-bottom: 20px;
  }
  section.primary-goal .primary-goal-sec {
    grid-template-columns: 1fr;
  }
  section.primary-goal .primary-goal-sec .content {
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
  }
  section.primary-goal h3 {
    margin-bottom: 15px;
    margin-top: 25px;
  }
  section.primary-goal p {
    font-size: calc(var(--paragraph-size));
    line-height: calc(var(--paragraph-linehight) + 4px);
  }
  section.primary-goal .primary-goal-sec .image {
    padding-top: 25px;
  }
  section.primary-goal .primary-goal-sec .image img {
    width: 100%;
    height: 250px;
  }
}

/* Problems of Old West Website */
section.problems-of-old-west-website {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
section.problems-of-old-west-website .screenshot-reference {
  background: transparent linear-gradient(180deg, #ebebeb 0%, #fefdff 100%);
  padding: 30px 140px;
}
section.problems-of-old-west-website .list-of-issues {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  padding: 35px 95px 35px 125px;
}
section.problems-of-old-west-website .list-of-issues h3 {
  margin-bottom: 15px;
  padding-left: 30px;
}
section.problems-of-old-west-website .list-of-issues ul {
  font-size: 22px;
  margin-bottom: 0;
}
section.problems-of-old-west-website .list-of-issues ul li:last-child {
  margin-bottom: 0;
}
section.problems-of-old-west-website .list-of-issues ul li {
  margin-bottom: 10px;
  list-style: none;
  position: relative;
}
section.problems-of-old-west-website .list-of-issues ul li:before {
  content: "-";
  position: absolute;
  left: -25px;
  top: 0;
}
@media (max-width: 500.99px) {
  section.problems-of-old-west-website {
    grid-template-columns: 1fr;
    grid-row-gap: 25px;
    padding: var(--side-padding);
  }
  section.problems-of-old-west-website .screenshot-reference {
    order: 2;
    margin: 0 -30px;
  }
  section.problems-of-old-west-website .list-of-issues {
    order: 1;
    padding: 0;
  }
  section.problems-of-old-west-website .list-of-issues h3 {
    padding-bottom: 20px;
    margin: auto;
  }
  section.problems-of-old-west-website .list-of-issues ul {
    font-size: 16px;
    margin-bottom: 0;
  }
  section.problems-of-old-west-website .list-of-issues ul li:before {
    left: -15px;
  }
  section.problems-of-old-west-website .screenshot-reference {
    padding: 25px 30px;
  }
}

/* Ideation */
section.ideation {
  background: #e2f2fd;
}
section.ideation .ideation-sec {
  display: grid;
  grid-template-columns: 1fr 500px;
  gap: 120px;
}
section.ideation .ideation-sec .content {
  padding: var(--vertical-padding) 0 var(--vertical-padding) var(--side-padding);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
section.ideation .ideation-sec .image {
  position: relative;
}
section.ideation .ideation-sec .image img {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  left: auto;
  top: 50%;
  max-width: none;
  object-fit: cover;
  transform: translateY(-50%);
}
section.ideation h3 {
  margin-bottom: 15px;
}
section.ideation p {
  font-size: var(--paragraph-size);
  line-height: var(--paragraph-linehight);
  margin-bottom: 30px;
  text-align: justify;
}
section.ideation p:nth-of-type(2) {
  margin-bottom: 0;
}
@media (max-width: 1680.99px) {
  section.ideation .ideation-sec .image {
    text-align: right;
  }
  section.ideation .ideation-sec .content {
    padding: calc(var(--vertical-padding) - 25px) 0
      calc(var(--vertical-padding) - 25px) var(--side-padding);
  }
}
@media (max-width: 500.99px) {
  section.ideation .ideation-sec {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 30px;
  }
  section.ideation .ideation-sec .content {
    padding: 0;
  }
}

/* Video Section */
section.video-section {
  padding: var(--vertical-padding) var(--side-padding);
}
section.video-section h4 {
  font-size: 24px;
  font-weight: 500;
  color: #444;
  margin-bottom: 30px;
  text-align: center;
  font-style: italic;
}
section.video-section .video-content-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #deeef7;
}
section.video-section .video-content-box figure {
  margin-bottom: 0;
  position: relative;
}
section.video-section .video-content-box figure:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  opacity: 0.5;
  background: rgb(226, 238, 239);
  background: linear-gradient(
    299deg,
    rgba(226, 238, 239, 1) 0%,
    rgba(234, 226, 238, 1) 35%,
    rgba(189, 135, 150, 1) 70%,
    rgba(162, 77, 123, 1) 100%
  );
}
section.video-section .video-content-box figure img {
  width: 100%;
  height: 330px;
  object-fit: cover;
}
section.video-section .video-content-box figure a.thumbnail-a {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 35px;
  color: #a24d7b;
  box-shadow: 0px 3px 6px #00000029;
}
section.video-section .video-content-box figure a.thumbnail-a i {
  margin-left: 5px;
}
#keerthanaVideo .video-keerthana {
  padding: 7px 7px 0 7px;
}
/*Modal for Video*/
#keerthanaVideo .btn-close {
  position: absolute;
  right: -25px;
  top: -15px;
  background: #fff;
  border-radius: 50%;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

#keerthanaVideo .btn-close i {
  font-size: 24px;
  color: #a24d7b;
}

#keerthanaVideo .modal-content {
  background: #deeef7;
}

#keerthanaVideo .modal-dialog {
  max-width: 1000px;
}

#keerthanaVideo .modal-dialog iframe {
  height: 500px;
}
section.video-section .video-content-box article {
  padding: 30px 45px;
  display: flex;
  align-items: center;
  box-shadow: 0px 3px 6px #00000029;
  background: #dcf4f0;
}
section.video-section .video-content-box article h5 {
  font-size: var(--paragraph-size);
  line-height: var(--paragraph-linehight);
  font-weight: 400;
  text-align: justify;
}
@media (max-width: 500.99px) {
  section.video-section {
    padding: 0;
  }
  .video-content-box {
    padding: var(--vertical-padding) var(--side-padding);
  }
  section.video-section .video-content-box {
    grid-template-columns: 1fr;
    background-color: #dcf4f0;
  }
  section.video-section .video-content-box article {
    box-shadow: none;
    padding: 20px 0px 0px;
  }
  section.video-section h4 {
    font-size: 18px;
    margin: 20px 30px;
  }
  section.video-section .video-content-box figure img {
    height: 250px;
  }
}

/* Test Objectives */
section.test-objectives {
  padding: 45px 110px var(--vertical-padding) 110px;
  background: #f7fbff;
}
section.test-objectives .test-objectives-sec {
  display: grid;
  grid-template-columns: 510px 1fr;
  grid-column-gap: 100px;
  align-items: center;
}
section.test-objectives .test-objectives-sec .heading-font-sm-screen {
  display: none;
}
section.test-objectives h3 {
  margin-bottom: 35px;
  padding-left: 30px;
}
section.test-objectives ul {
  font-size: var(--paragraph-size);
  font-weight: 400;
  margin-bottom: 0;
  padding-left: 35px;
}
section.test-objectives ul li {
  margin-bottom: 20px;
  line-height: var(--paragraph-linehight);
  position: relative;
  list-style: none;
}
section.test-objectives ul li:last-child {
  margin-bottom: 0;
}
section.test-objectives ul li:before {
  content: "";
  width: 9px;
  height: 9px;
  background: transparent linear-gradient(180deg, #e87ea7 0%, #982b56 100%);
  position: absolute;
  left: -30px;
  top: 12px;
  border-radius: 50%;
}
@media (max-width: 500.99px) {
  section.test-objectives {
    padding: var(--side-padding);
  }
  section.test-objectives .test-objectives-sec {
    grid-template-columns: 1fr;
  }
  section.test-objectives .test-objectives-sec .heading-font-sm-screen {
    display: block;
    margin: auto 0 auto 20px;
  }
  section.test-objectives .test-objectives-sec .image {
    display: flex;
    margin-bottom: 30px;
  }
  section.test-objectives .test-objectives-sec .image img {
    height: 100px;
  }
  section.test-objectives h3 {
    margin-top: 35px;
    text-align: center;
  }
}

/* Testers */
section.testers {
  background: rgb(233, 244, 226);
  background: linear-gradient(
    90deg,
    rgba(233, 244, 226, 1) 0%,
    rgba(234, 243, 231, 1) 20%,
    rgba(252, 252, 252, 1) 100%
  );
  padding: var(--vertical-padding) var(--side-padding);
}
section.testers h2 {
  margin-bottom: 15px;
}
section.testers p {
  font-size: var(--paragraph-size);
  line-height: var(--paragraph-linehight);
  letter-spacing: 0.22px;
  margin-bottom: 40px;
  text-align: justify;
}
section.testers .testers-screens {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 65px;
}
section.testers .testers-screens .tester-item:nth-child(1) {
  margin-top: 165px;
}
section.testers .testers-screens .tester-item:nth-child(3) {
  margin-top: 145px;
}
section.testers .testers-screens .tester-item img {
  box-shadow: 0px 3px 6px #00000029;
}

/* Re-Branding */
section.re-branding {
  background: url(../images/projects/westpharma/rebranding-bg.jpg) no-repeat 0 0 /
    cover;
  padding: var(--vertical-padding) 0 var(--vertical-padding) var(--side-padding);
  overflow: hidden;
}
section.re-branding h2 {
  margin-bottom: 15px;
  color: #fff;
}
section.re-branding .re-branding-screens {
  display: grid;
  grid-template-columns: 1fr 600px;
  grid-column-gap: 220px;
  margin-bottom: 100px;
}
section.re-branding .re-branding-screens.accessibility {
  grid-template-columns: 1fr 390px;
  grid-column-gap: 220px;
  margin-bottom: 80px;
}
section.re-branding .re-branding-screens .re-branding-img {
  position: relative;
}
section.re-branding .re-branding-screens .re-branding-img .image {
  position: absolute;
  top: -102px;
  right: 0;
}
section.re-branding .re-branding-screens .re-branding-right .colour-palette {
  margin-bottom: 40px;
}
section.re-branding p {
  font-size: calc(var(--paragraph-size) + 2px);
  line-height: calc(var(--paragraph-linehight) + 15px);
  color: #fff;
  margin-bottom: 0;
}
@media (max-width: 1680.99px) {
  section.re-branding .re-branding-screens {
    margin-bottom: 60px;
  }
  section.re-branding p {
    line-height: calc(var(--paragraph-linehight) + 10px);
  }
}
@media (max-width: 1440.99px) {
  section.re-branding .re-branding-screens .re-branding-img .image {
  }
  section.re-branding .re-branding-screens .re-branding-img .image img {
  }
  section.re-branding p {
    font-size: calc(var(--paragraph-size));
    line-height: calc(var(--paragraph-linehight) + 5px);
  }
}
@media (max-width: 500.99px) {
  section.re-branding {
    padding: var(--side-padding);
  }
  section.re-branding .re-branding-screens {
    grid-template-columns: 1fr;
    grid-column-gap: 0px;
    margin-bottom: 30px;
  }
  section.re-branding p {
    font-size: calc(var(--paragraph-size));
    line-height: calc(var(--paragraph-linehight) + 5px);
  }
  section.re-branding .re-branding-screens .re-branding-right {
    order: 2;
  }
  section.re-branding .re-branding-screens .re-branding-img {
    order: 1;
    display: none;
  }
  section.re-branding .re-branding-screens .re-branding-img .image {
    position: relative;
  }
  section.re-branding .re-branding-screens.accessibility {
    margin-bottom: 20px;
    grid-template-columns: 1fr;
    grid-column-gap: 0px;
  }
}

/* Landing Page Before After */
section.landing-page-before-after {
  padding: var(--vertical-padding) var(--side-padding);
}
section.landing-page-before-after .before-after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 35px;
  position: relative;
}
section.landing-page-before-after h2 {
  margin-bottom: 25px;
}
section.landing-page-before-after .before,
section.landing-page-before-after .after {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 70px;
}
section.landing-page-before-after h4 {
  font-size: 22px;
  font-weight: 500;
  color: #444;
  padding: 40px 0 0 0;
  margin-bottom: 0;
}
section.landing-page-before-after .before:before {
  content: "";
  position: absolute;
  background: #e6e6e6;
  opacity: 0.3;
  width: 100%;
  height: 100%;
  z-index: -1;
}
section.landing-page-before-after .after:before {
  content: "";
  position: absolute;
  background: rgb(192, 216, 230);
  background: linear-gradient(
    180deg,
    rgba(192, 216, 230, 1) 0%,
    rgba(232, 241, 246, 1) 50%,
    rgba(252, 252, 252, 1) 100%
  );
  width: 100%;
  height: 100%;
  z-index: -1;
}
section.landing-page-before-after .before .img-base {
  padding: 20px 80px;
}
section.landing-page-before-after .after .img-base {
  padding: 40px 95px;
}
section.landing-page-before-after .after .img-base img {
  box-shadow: 0px 3px 6px #ffffff7c;
}
section.landing-page-before-after p {
  font-size: 18px;
  color: #444444;
  line-height: 26px;
  margin-bottom: 0;
  padding: 35px 50px 0 50px;
}
section.landing-page-before-after .before-after .transform-icon {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border: 1px solid #017a35;
}
section.landing-page-before-after .before-after i {
  font-size: 40px;
  color: #017a35;
}

/* Highlights */
section.highlights {
  padding: var(--vertical-padding) var(--side-padding);
  background: url(../images/projects/westpharma/highlights-bg.svg) no-repeat 0
    center / cover;
  height: 650px;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
section.highlights h3 {
  margin-bottom: 15px;
  color: #fff;
  margin-left: 2rem;
}
section.highlights ul {
  font-size: calc(var(--paragraph-size) + 2px);
  font-weight: 400;
  margin-bottom: 0;
  color: #fff;
}
section.highlights ul li {
  margin-bottom: 15px;
  line-height: var(--paragraph-linehight);
  position: relative;
  list-style: none;
}
section.highlights ul li:before {
  content: "";
  width: 9px;
  height: 9px;
  background: #53bead;
  position: absolute;
  left: -25px;
  top: 12px;
  border-radius: 50%;
}
@media (max-width: 1440.99px) {
  section.highlights {
    background: url(../images/projects/westpharma/highlights-bg.svg) no-repeat
      right center / cover;
    height: 560px;
  }
}
@media (max-width: 500.99px) {
  section.highlights {
    height: auto;
    background: url(../images/projects/westpharma/highlights-bg.svg) no-repeat 0
      center / cover;
  }
  section.highlights h3 {
    text-align: center;
    margin-left: 0px;
    margin-bottom: 20px;
  }
  section.highlights ul {
    font-size: calc(var(--paragraph-size));
  }
  section.highlights ul li:before {
    top: 8px;
  }
}

/* Real Website Pages Mockups */
section.real-website-mockups {
  padding: var(--vertical-padding) var(--side-padding);
  position: relative;
}
section.real-website-mockups:before {
  background: #ffffff
    url(../images/projects/westpharma/real-website-mockup-bg.svg) no-repeat
    bottom / cover;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0.45;
  z-index: -1;
}
section.real-website-mockups h2 {
  color: #444;
  margin-bottom: 60px;
}
section.real-website-mockups .website-pages {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 75px;
  max-width: 950px;
  margin: 0 auto;
}
section.real-website-mockups .website-pages .page-item:not(:last-child) {
  margin-bottom: 35px;
}
section.real-website-mockups .website-pages .page-item .img-base {
  text-align: center;
}
section.real-website-mockups .website-pages .page-item .img-base img {
  box-shadow: 0px 3px 6px #00000029;
}
section.real-website-mockups .website-pages .page-item h3 {
  color: #6c6c6c;
  opacity: 0.5;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  white-space: pre;
  margin-bottom: 15px;
}
@media (max-width: 1680.99px) {
  section.real-website-mockups .website-pages .page-item h3 {
    font-size: 20px;
  }
}
/* Mobile Screens */
section.mobile-screens {
  position: relative;
  padding: 70px var(--side-padding);
  background: url(../images/projects/westpharma/mobile-screens.png) no-repeat 0
    0 / cover;
}
section.mobile-screens:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background: transparent
    linear-gradient(270deg, #fcfcfc 0%, #e0e0e3 19%, #acbdcb 56%, #7c98ad 100%)
    0% 0% no-repeat padding-box;
  opacity: 0.6;
  z-index: -1;
}
section.mobile-screens h2 {
  font-weight: 700;
  color: #fff;
}
section.mobile-screens .mockup-placeholder {
  text-align: center;
  max-width: 850px;
  margin: 0 auto;
}
@media (max-width: 1680.99px) {
  section.mobile-screens .mockup-placeholder {
    max-width: 800px;
  }
}
@media (max-width: 1440.99px) {
  section.mobile-screens .mockup-placeholder {
    max-width: 700px;
  }
}
@media (max-width: 500.99px) {
  section.mobile-screens {
    padding: var(--side-padding);
  }
}

/* Awards */
section.awards .award-item {
  box-shadow: 0px 3px 6px #00000029;
  position: relative;
  z-index: 1;
}
section.awards .award-item {
  display: grid;
  grid-template-columns: 430px 1fr;
  padding: 0 200px;
}
section.awards .award-item h2 {
  font-size: 28px;
  font-weight: 700;
}
section.awards .award-item .award-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 30px;
  padding-top: 30px;
}
section.awards .award-item .award-icon img {
  margin-bottom: 5px;
}
section.awards .award-item .award-content {
  padding: 70px 75px;
}
section.awards .award-item .award-content h5 {
  font-size: var(--paragraph-size);
  font-weight: 300;
  color: #444;
  line-height: var(--paragraph-linehight);
}
section.awards .award-item .award-content h5 strong {
  font-weight: 600;
}
section.awards .award-item .award-content h5 span {
  font-style: italic;
  font-weight: 500;
}
section.awards .award-item .award-content p {
  font-size: var(--paragraph-size);
  line-height: var(--paragraph-linehight);
  color: #444;
  letter-spacing: 0.22px;
  margin: 20px 0;
}
@media (max-width: 1440.99px) {
  section.awards .award-item {
    grid-template-columns: 300px 1fr;
    padding: 0 100px;
  }
}
@media (max-width: 500.99px) {
  section.awards .award-item {
    grid-template-columns: 1fr;
    padding: var(--side-padding);
    box-shadow: none;
  }
  section.awards .award-item .award-icon {
    padding: 0;
  }
  section.awards .award-item .award-icon img {
    height: 200px;
  }
  section.awards .award-item .award-content {
    padding: 20px 15px;
  }
}

/* Testimonials */
section.testimonials {
  padding: var(--vertical-padding) var(--side-padding) 75px var(--side-padding);
  background: #f7fcff;
  position: relative;
  overflow: hidden;
}
section.testimonials:before {
  content: "";
  position: absolute;
  width: 420px;
  height: 380px;
  left: -170px;
  bottom: -170px;
  background: #db5185;
  border-radius: 50%;
  opacity: 0.12;
}
section.testimonials:after {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  right: -150px;
  top: -150px;
  background: #2e9bc9;
  border-radius: 50%;
  opacity: 0.12;
}
section.testimonials h2 {
  margin-bottom: 15px;
}
section.testimonials .testimonial-item {
  display: grid;
  align-items: center;
  grid-template-columns: 1fr 400px;
  grid-column-gap: 45px;
  position: relative;
  padding: 0 75px;
}
section.testimonials .testimonial-item p::before {
  left: -45px;
  top: -5px;
  background: url(../images/projects/westpharma/quote-begin.svg) no-repeat 0 0;
}
section.testimonials .testimonial-item p::after {
  right: -45px;
  bottom: -10px;
  background: url(../images/projects/westpharma/quote-end.svg) no-repeat 0 0;
}
section.testimonials .testimonial-item p::before,
section.testimonials .testimonial-item p::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  background-size: contain;
}
section.testimonials .testimonial-item h4 {
  font-size: 32px;
  letter-spacing: 0.24px;
  color: #449ec4;
  font-weight: 600;
}
section.testimonials .testimonial-item h5 {
  font-size: var(--paragraph-size);
  letter-spacing: 0.24px;
  color: #444444;
  font-weight: 500;
  margin-bottom: 40px;
}
section.testimonials .testimonial-item p {
  font-size: calc(var(--paragraph-size) + 2px);
  letter-spacing: 0.24px;
  line-height: calc(var(--paragraph-linehight) + 2px);
  color: #444;
  font-weight: 500;
  position: relative;
  display: inline;
}
@media (max-width: 1680.99px) {
  section.testimonials .testimonial-item {
    padding: 0;
    grid-column-gap: 25px;
  }
}
@media (max-width: 500.99px) {
  section.testimonials {
    padding: var(--side-padding);
  }
  section.testimonials .testimonial-item {
    grid-template-columns: 1fr;
  }
  section.testimonials .testimonial-item .testimonial-left {
    order: 2;
  }
  section.testimonials .testimonial-item .testimonial-right {
    order: 1;
  }
  section.testimonials .testimonial-item h4 {
    font-size: 24px;
  }
  section.testimonials .testimonial-item h4 {
    font-size: 24px;
    margin-top: 16px;
    text-align: center;
  }
  section.testimonials .testimonial-item h5 {
    text-align: center;
  }
  section.testimonials .testimonial-item .testimonial-right .testimonial-img {
    text-align: center;
  }
  section.testimonials
    .testimonial-item
    .testimonial-right
    .testimonial-img
    img {
    height: 200px;
  }
  section.testimonials .testimonial-item p::before,
  section.testimonials .testimonial-item p::after {
    display: none;
  }
  section.testimonials .testimonial-item p br {
    display: none;
  }
}
section.testimonials + section.other-projects {
  background: #fff;
}
/*Project: Rescue India*/
body.rescue-india .top-gradient {
  height: 14px;
  width: 100%;
  background: rgb(185, 201, 159);
  background: linear-gradient(
    90deg,
    rgba(185, 201, 159, 1) 0%,
    rgba(152, 162, 138, 1) 100%
  );
  position: relative;
}
section.project-rescue-india {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  height: 750px;
}
section.project-rescue-india:before {
  background: rgb(149, 160, 136);
  background: linear-gradient(
    180deg,
    rgba(149, 160, 136, 1) 0%,
    rgba(179, 188, 164, 1) 50%,
    rgba(199, 199, 167, 1) 100%
  );
}
section.project-rescue-india .banner-area {
  grid-template-columns: 500px 1fr;
  column-gap: 100px;
  height: 100%;
  /* margin-top: auto;
 margin-bottom: auto; */
}
section.project-rescue-india .banner-area .banner-intro {
  margin: 100px 0 auto 0;
}
section.project-rescue-india .banner-area .banner-intro .intro-title {
  padding-top: 0;
}
section.project-rescue-india .banner-area .img-base {
  position: relative;
}
section.project-rescue-india .banner-area .img-base .intro-2 {
  position: absolute;
  right: 80px;
  width: 100%;
  height: auto;
  bottom: -100px;
}
.project-rescue-india .rescue-india-artwork {
  position: absolute;
  left: -10px;
  bottom: -14px;
  z-index: -1;
  width: 730px;
}
@media (max-width: 1440.99px) {
  section.project-rescue-india {
    height: 670px;
  }
  section.project-rescue-india .banner-area {
    grid-template-columns: 480px 1fr;
  }
  section.project-rescue-india .banner-area .img-base .intro-2 {
    right: 0;
  }
}
@media (max-width: 500.99px) {
  section.project-rescue-india .banner-area {
    grid-template-columns: 1fr;
    column-gap: 100px;
    height: auto;
  }
  section.project-rescue-india .banner-area .img-base {
    order: 2;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  section.project-rescue-india .banner-area .img-base .intro-2 {
    width: auto;
    height: 400px;
    top: 0;
    right: auto;
  }
  section.project-rescue-india .banner-area .banner-intro {
    margin: 0;
    order: 1;
  }
}

/* Problem Statement */
section.problem-statement.rescue-india {
  background: transparent;
  border: none;
  padding: var(--vertical-padding) var(--side-padding);
}
section.problem-statement.rescue-india .content {
  grid-template-columns: 1.2fr 1fr;
  padding-top: 45px;
}
section.problem-statement.rescue-india .content h2,
section.problem-statement.rescue-india .content p {
  color: #444;
}
section.problem-statement.rescue-india .content p {
  font-size: var(--paragraph-size);
  line-height: var(--paragraph-linehight);
  margin-bottom: 30px;
  text-align: justify;
}
section.problem-statement.rescue-india.inspiration {
  background: transparent linear-gradient(271deg, #eaebe1 0%, #ffffff 100%);
}
section.problem-statement.rescue-india.inspiration .content {
  grid-template-columns: 1fr 1.5fr;
  grid-column-gap: 15px;
  padding-top: 0;
}
section.problem-statement.rescue-india.inspiration .content-left {
  order: 2;
}
section.problem-statement.rescue-india.inspiration .content-right {
  display: flex;
  align-items: center;
  justify-content: center;
}
section.problem-statement.rescue-india .content h5 {
  font-style: italic;
  font-size: 20px;
  font-weight: 600;
  color: #444;
}
section.problem-statement.rescue-india.brainstorming .content {
  grid-template-columns: 1.5fr 1fr;
}
section.problem-statement.rescue-india.brainstorming .content + p {
  font-size: var(--paragraph-size);
  color: #444;
  line-height: var(--paragraph-linehight);
}
section.problem-statement.rescue-india.brainstorming .content-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
}
section.problem-statement.rescue-india.brainstorming .content-right img {
  padding: 25px;
}
@media (max-width: 500.99px) {
  section.problem-statement.rescue-india {
    box-shadow: 0px 6px 20px #a7a7a77b;
    margin: 20px;
    padding: 20px;
  }
  section.problem-statement.rescue-india .content {
    grid-template-columns: 1fr;
    padding-top: 20px;
  }
  section.problem-statement.rescue-india .content .content-left {
    margin-bottom: 20px;
  }
  section.problem-statement.rescue-india.inspiration {
    margin: 0 0px;
    padding: var(--side-padding);
    box-shadow: none;
  }
  section.problem-statement.rescue-india.inspiration .content {
    grid-template-columns: 1fr;
  }
  section.problem-statement.rescue-india.inspiration .content-left {
    order: 1;
  }
  section.problem-statement.rescue-india.inspiration .content-right {
    order: 2;
    margin-top: 20px;
  }
  section.problem-statement.rescue-india .content h2 {
    margin-bottom: 25px;
  }
  section.problem-statement.rescue-india .content h5 {
    font-style: normal;
  }
  section.problem-statement.rescue-india.brainstorming .content {
    grid-template-columns: 1fr;
  }
}

/* Process of Rescue India */
section.my-process.rescue-india-process {
  background: transparent linear-gradient(2deg, #ffffff 0%, #f0e7e2 100%) 0% 0%
    no-repeat padding-box;
}
section.my-process.rescue-india-process
  .process-timeline
  .process-item
  .process-number {
  width: auto;
  height: auto;
  border: none;
  background: none;
  padding: 0 15px;
  position: relative;
  z-index: 1;
}
section.my-process.rescue-india-process
  .process-timeline
  .process-item
  .process-number
  img {
  height: 75px;
  object-fit: contain;
}
section.my-process.rescue-india-process .process-timeline .process-item:before,
section.my-process.rescue-india-process .process-timeline .process-item:after {
  border-top: 2px dashed #3d4b65;
  z-index: 0;
  top: 45px;
}
section.my-process.rescue-india-process .process-timeline .process-item h4 {
  color: #444;
}

@media (max-width: 1440.99px) {
  section.my-process.rescue-india-process {
    padding: calc(var(--vertical-padding) - 15px) var(--side-padding);
  }
}

/* Features of Rescue India */
section.features-of-rescue-india {
  margin-top: 15px;
  background: #fff;
  padding: var(--vertical-padding) 0 0 0;
}
section.features-of-rescue-india .timeline-area {
  padding: 0 var(--side-padding);
}
.features-of-rescue-india
  .feature-timeline
  .timeline-container
  .timeline-body
  p {
  line-height: var(--paragraph-linehight);
  margin-bottom: 0;
}
.features-of-rescue-india .feature-timeline:before {
  background: transparent;
  box-shadow: none;
}
.features-of-rescue-india .feature-timeline .timeline-container .hexagon img {
  height: 38px;
}
.features-of-rescue-india
  .feature-timeline
  .timeline-container:nth-child(1)
  .hexagon {
  background-image: linear-gradient(90deg, #98a798, #98a798);
}
.features-of-rescue-india
  .feature-timeline
  .timeline-container:nth-child(2)
  .hexagon {
  background-image: linear-gradient(90deg, #d3bd96, #d3bd96);
}
.features-of-rescue-india
  .feature-timeline
  .timeline-container:nth-child(4)
  .hexagon {
  background-image: linear-gradient(90deg, #cbb5a5, #cbb5a5);
}
.features-of-rescue-india
  .feature-timeline
  .timeline-container:nth-child(4)
  .hexagon {
  background-image: linear-gradient(90deg, #accbca, #accbca);
}
.features-of-rescue-india
  .feature-timeline
  .timeline-container:nth-child(5)
  .hexagon {
  background-image: linear-gradient(90deg, #aa8a7f, #aa8a7f);
}
.features-of-rescue-india
  .feature-timeline
  .timeline-container:nth-child(6)
  .hexagon {
  background-image: linear-gradient(90deg, #7eabaf, #7eabaf);
}
.features-of-rescue-india .note {
  position: relative;
  padding: 45px var(--side-padding);
  margin-top: var(--vertical-padding);
  overflow: hidden;
  color: #fff;
}
.features-of-rescue-india .note * {
  position: relative;
  z-index: 2;
}
.features-of-rescue-india .note::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #9ea289 url(../images/projects/rescue-india/note-bg.png) no-repeat
    right 0 / contain;
}
.features-of-rescue-india .note h2 {
  color: #fff;
  text-align: left;
  margin-bottom: 10px;
}
.features-of-rescue-india .note p {
  font-size: var(--paragraph-size);
  line-height: var(--paragraph-linehight);
}
.features-of-rescue-india .note h5 {
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  line-height: 30px;
  margin-bottom: 0;
}
@media (max-width: 1440.99px) {
  section.features-of-rescue-india {
    margin: 0;
    padding: 0;
  }
  .features-of-rescue-india .note {
    margin-top: calc(var(--vertical-padding) - 10px);
  }
}
@media (max-width: 500.99px) {
  .features-of-rescue-india .feature-timeline .timeline-container .hexagon img {
    height: 24px;
  }
}

/*Function*/
section.function {
  padding: var(--vertical-padding) var(--side-padding);
  position: relative;
}
section.function::before {
  background: url(../images/projects/rescue-india/function-bg.svg) no-repeat 0 0 /
    cover;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: -1;
  opacity: 0.6;
}
section.function h2.heading-font {
  margin-bottom: 35px;
}
section.function .function-blocks {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-row-gap: 50px;
  grid-column-gap: 50px;
}
section.function .function-blocks .row {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 30px;
  margin-top: 0;
}
section.function .function-blocks .box1,
section.function .function-blocks .box2,
section.function .function-blocks .box3 {
  margin-top: 0;
}
section.function .function-blocks .item.box1 {
  flex: 0 0 23%;
  max-width: 23%;
}
section.function .function-blocks .item.box2 {
  flex: 0 0 35%;
  max-width: 35%;
}
section.function .function-blocks .item.box3 {
  flex: 0 0 42%;
  max-width: 42%;
}
section.function .function-blocks .item.box4 {
  flex: 0 0 25%;
  max-width: 25%;
}
section.function .function-blocks .item.box5 {
  flex: 0 0 28%;
  max-width: 28%;
}
section.function .function-blocks .item.box6 {
  flex: 0 0 47%;
  max-width: 47%;
}
section.function .function-blocks .item .white-box {
  background: #fff;
  padding: 30px 25px;
  box-shadow: 0px 6px 20px #a7a7a77b;
  height: 100%;
}
section.function .function-blocks .item p {
  font-size: var(--paragraph-size);
  line-height: var(--paragraph-linehight);
  margin-bottom: 0;
}
@media (max-width: 500.99px) {
  section.function .function-blocks .row {
    align-items: stretch;
  }
  section.function .function-blocks .item.box1,
  section.function .function-blocks .item.box2,
  section.function .function-blocks .item.box3,
  section.function .function-blocks .item.box4,
  section.function .function-blocks .item.box5,
  section.function .function-blocks .item.box6 {
    flex: 1;
    max-width: 50%;
    margin-bottom: 20px;
    margin-top: 0;
  }
  section.function h2.heading-font {
    padding: var(--vertical-padding) 0;
    margin-bottom: 0;
  }
  section.function .function-blocks .item .white-box {
    padding: 15px;
  }
  section.function .function-blocks .item p {
    font-size: 14px;
  }
}

/* Personas */
section.personas.rescue-india {
  background: #ffffff;
  padding: var(--vertical-padding) var(--persona-padding);
}
section.personas.rescue-india .persona-imgs img {
  margin: 0 auto;
  box-shadow: 0px 6px 10px #a7a7a74d;
}
section.personas.rescue-india h2.heading-font {
  color: #444;
  margin-bottom: 45px;
}
section.personas.rescue-india .persona-imgs {
  grid-template-columns: 1fr;
  grid-row-gap: 65px;
}
section.personas.rescue-india .persona-imgs img {
  max-width: 1100px;
}
@media (max-width: 500.99px) {
  section.personas.rescue-india h2.heading-font {
    margin-bottom: 30px;
  }
  section.personas.rescue-india .persona-imgs {
    grid-template-columns: 1fr;
    grid-row-gap: 0;
  }
  section.personas.rescue-india .persona-imgs img {
    max-width: 100%;
  }
}

/*Wireframe with User Flow*/
section.wireframe-user-flow {
  background: transparent
    linear-gradient(52deg, #ffffff 0%, #fcfbfa 60%, #ddd5bb 100%);
  padding: 50px var(--side-padding) 10px var(--side-padding);
}
section.wireframe-user-flow h2.heading-font {
  margin-bottom: 35px;
}
section.wireframe-user-flow .wireframe-imgs {
  padding: 0 100px;
}
section.wireframe-user-flow .persona-imgs img {
  margin: 0 auto;
}
@media (max-width: 1680.99px) {
  section.wireframe-user-flow h2.heading-font {
    margin-bottom: 0;
  }
  section.wireframe-user-flow .wireframe-imgs {
    padding: 0;
  }
}
@media (max-width: 500.99px) {
  section.wireframe-user-flow h2.heading-font {
    margin-bottom: 15px;
  }
}
/*Style Guide*/
section.style-guide {
  padding: var(--vertical-padding) var(--side-padding);
  background: transparent linear-gradient(230deg, #f8f8f8 0%, #fafafa 100%);
}
section.style-guide h2.heading-font {
  margin-bottom: 25px;
}
section.style-guide .sub-sections {
  max-width: 80%;
  margin: 0 auto;
}
section.style-guide .sub-sections.colour-pallete .sub-section-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 35px;
  margin-bottom: 50px;
}
section.style-guide .sub-sections.colour-pallete .sub-section-content .item {
  background: #ffffff;
  box-shadow: 0px 3px 6px #00000029;
}
section.style-guide .sub-sections .sub-sec-title {
  border-bottom: 1px solid #707070;
  margin-bottom: 25px;
}
section.style-guide .sub-sections .sub-sec-title h3 {
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  padding-bottom: 5px;
  color: #444444;
}
section.style-guide .sub-sections.colour-pallete .pallete-head {
  padding: 15px;
  text-align: center;
  margin-bottom: 5px;
}
section.style-guide
  .sub-sections.colour-pallete
  .item:nth-of-type(1)
  .pallete-head {
  background: #c47f67;
}
section.style-guide
  .sub-sections.colour-pallete
  .item:nth-of-type(2)
  .pallete-head {
  background: #28759f;
}
section.style-guide
  .sub-sections.colour-pallete
  .item:nth-of-type(3)
  .pallete-head {
  background: #d0a172;
}
section.style-guide
  .sub-sections.colour-pallete
  .item:nth-of-type(4)
  .pallete-head {
  background: #a9b7b1;
}
section.style-guide .sub-sections.colour-pallete .pallete-head h5 {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  margin-bottom: 0;
}
section.style-guide .sub-sections.colour-pallete .pallete-content {
  padding: 15px 30px;
  text-align: center;
}
section.style-guide .sub-sections.colour-pallete .pallete-content p {
  font-size: 16px;
  font-weight: 500;
}
section.style-guide
  .sub-sections.colour-pallete
  .pallete-content
  p:first-child {
  border-bottom: 1px solid #707070;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
section.style-guide .sub-sections.buttons .sub-section-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 85px;
  margin-bottom: 50px;
}
section.style-guide .sub-sections.buttons .sub-section-content .item {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 25px;
}
section.style-guide .sub-sections.buttons .sub-section-content .item .btn {
  font-family: "STIX Two Text", serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  height: 45px;
  border-radius: 0;
  border: 2px solid #c47f67;
}
section.style-guide
  .sub-sections.buttons
  .sub-section-content
  .item
  .btn.donate {
  background: #fff;
  color: #c47f67;
}
section.style-guide
  .sub-sections.buttons
  .sub-section-content
  .item
  .btn.volunteer {
  background: #c47f67;
  color: #fff;
}
@media (max-width: 1680.99px) {
  section.style-guide .sub-sections .sub-sec-title h3 {
    font-size: 20px;
  }
  section.style-guide .sub-sections.buttons .sub-section-content .item .btn {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 500;
  }
}
@media (max-width: 1440.99px) {
  section.style-guide .sub-sections {
    max-width: 100%;
  }
}
@media (max-width: 500.99px) {
  section.style-guide .sub-sections .sub-sec-title h3 {
    font-size: 18px;
  }
  section.style-guide .sub-sections.colour-pallete .pallete-content {
    padding: 15px 15px;
  }
  section.style-guide .sub-sections.colour-pallete .pallete-content p {
    font-size: 14px;
  }
}
section.style-guide .sub-sections.fontface .sub-section-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 85px;
}
section.style-guide .sub-sections.fontface .sub-section-content .item img {
  height: 25px;
  margin-bottom: 25px;
}
section.style-guide .sub-sections.fontface .sub-section-content .item p {
  font-size: var(--paragraph-size);
  line-height: var(--paragraph-linehight);
  margin-bottom: 20px;
}
section.style-guide
  .sub-sections.fontface
  .sub-section-content
  .item.libertinus
  h4 {
  font-size: 25px;
  line-height: var(--paragraph-linehight);
  font-weight: 500;
}
section.style-guide .sub-sections.fontface .sub-section-content .avenir h4 {
  font-size: var(--paragraph-size);
  line-height: var(--paragraph-linehight);
  margin-bottom: 0;
}

@media (max-width: 1680.99px) {
  section.style-guide .sub-sections.fontface .sub-section-content .item img {
    height: 25px;
  }
  section.style-guide
    .sub-sections.fontface
    .sub-section-content
    .item.libertinus
    h4 {
    line-height: 28px;
    font-size: 22px;
  }
}
@media (max-width: 500.99px) {
  section.style-guide .sub-sections.colour-pallete .sub-section-content {
    grid-template-columns: 1fr;
    grid-row-gap: 35px;
  }
  section.style-guide .sub-sections.buttons {
    margin-top: 30px;
  }
  section.style-guide .sub-sections.fontface .sub-section-content {
    grid-template-columns: 1fr;
  }
  section.style-guide
    .sub-sections.fontface
    .sub-section-content
    .item.libertinus {
    margin-top: 20px;
  }
}
@media (max-width: 500.99px) {
  section.style-guide .sub-sections.colour-pallete .sub-section-content {
    grid-row-gap: 25px;
  }
}

/* Mobile Mockup */
section.mobile-mockup {
  padding: var(--vertical-padding) 0 0 0;
}
section.mobile-mockup .mobile-mockup-imgs {
  padding: var(--vertical-padding) 0;
  overflow: hidden;
  background: transparent
    linear-gradient(89deg, #e6e5d5 0%, #d6d4c3 25%, #cdcdbd 47%, #98a798 100%);
}
section.mobile-mockup .mobile-mockup-imgs img {
  transform: scale(1.3);
  margin-top: 25px;
  transform-origin: 50% 30%;
}
section.mobile-mockup h2.heading-font {
  margin-bottom: 30px;
}
@media (max-width: 500.99px) {
  section.mobile-mockup {
    padding: var(--vertical-padding) 0;
  }
}

/* Prototype */
section.prototype {
  background: url(../images/projects/rescue-india/prototype-bg.svg) no-repeat 0
    0 / 60%;
  border-top: 100px solid #f7f7f7;
}
section.prototype .prototype-holder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--vertical-padding) calc(var(--side-padding) - 120px)
    var(--vertical-padding) var(--side-padding);
  align-items: flex-start;
}
section.prototype .prototype-holder .content {
  display: grid;
  grid-template-columns: 160px 1fr;
  grid-column-gap: 25px;
}
section.prototype .prototype-holder .content .text {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
section.prototype .prototype-holder .content h2 {
  margin-bottom: 15px;
}
section.prototype .prototype-holder .content p {
  font-size: var(--paragraph-size);
  font-weight: 500;
  line-height: calc(var(--paragraph-linehight) + 10px);
  margin-bottom: 0;
}
section.prototype .prototype-holder iframe {
  width: 100%;
  height: 680px;
  mix-blend-mode: darken;
  transform: scale(1.2);
}
section.prototype .prototype-holder .mockup-img {
  position: relative;
}
section.prototype .prototype-holder .mockup-img .white-bg {
  width: 428px;
  background: #fff;
  height: calc(100% - 178px);
  position: absolute;
  left: 50%;
  top: 75px;
  transform: translateX(-50%);
  border-radius: 30px;
}
@media (max-width: 500.99px) {
  section.prototype {
    background: none;
    border-top: none;
    margin: var(--side-padding) 0;
  }
  section.prototype .prototype-holder {
    display: grid;
    grid-template-columns: 1fr;
    padding: 50px;
  }
  section.prototype .prototype-holder .content {
    display: none;
  }
  section.prototype .prototype-holder .mockup-img {
    width: 100%;
  }
  section.prototype .prototype-holder .mockup-img .white-bg {
    display: none;
  }
}

/* Web Mockup */
section.web-mockups {
  padding: calc(var(--vertical-padding) - 50px) 0 var(--vertical-padding) 0;
  background: #fff;
}
section.web-mockups h2.heading-font {
  margin-bottom: 30px;
}
section.web-mockups .website-pages {
  padding: 0 var(--side-padding);
  text-align: center;
}
body.google-pay section.other-projects {
  background: #f8f8f8;
}
body.rescue-india section.other-projects {
  /* background: #fff; */
}
@media (max-width: 500.99px) {
  section.web-mockups {
    padding: var(--side-padding);
    background: transparent
      linear-gradient(89deg, #e6e5d5 0%, #d6d4c3 25%, #cdcdbd 47%, #98a798 100%);
  }
}

/* Landing Page */
body.landing-page .top-gradient {
  height: 14px;
  width: 100%;
  background: rgb(66, 54, 87);
  background: linear-gradient(
    91deg,
    rgba(66, 54, 87, 1) 0%,
    rgba(168, 72, 113, 1) 40%,
    rgba(192, 111, 115, 1) 73%,
    rgba(196, 158, 179, 1) 100%
  );
  position: relative;
  display: none;
}
body .bottom-gradient {
  height: 14px;
  width: 100%;
  background: transparent
    linear-gradient(90deg, #514262 0%, #c06f73 65%, #c06fa1 100%) 0% 0%;
  position: relative;
  margin-top: 15px;
}
/*Landing Page*/
section.keerthana-reddy {
  background: #fafafa;
  padding-bottom: 100px;
  box-shadow: 0px 3px 6px #00000029;
}
section.keerthana-reddy .keerthana-intro-sec {
  padding: 0 var(--side-padding);
  margin-top: 50px;
}
section.keerthana-reddy .keerthana-intro {
  display: grid;
  grid-template-columns: 395px 1fr;
  grid-column-gap: 65px;
  background: #fdfdfd;
  box-shadow: 0px 3px 6px #00000029;
  position: relative;
  border-bottom-left-radius: 20px;
  border-top-right-radius: 50px;
}
section.keerthana-reddy .keerthana-intro .keerthana-portrait {
  height: 500px;
  margin-top: -35px;
  position: relative;
}
section.keerthana-reddy .keerthana-intro .keerthana-portrait::before {
  content: "";
  position: absolute;
  width: 90%;
  height: 100%;
  left: -12px;
  top: -12px;
  /* background: rgb(107, 69, 90);
  background: linear-gradient(
    85deg,
    rgba(107, 69, 90, 1) 0%,
    rgba(179, 105, 106, 1) 40%,
    rgba(180, 109, 111, 1) 73%,
    rgba(186, 125, 134, 1) 81%,
    rgba(196, 158, 179, 1) 100%
  ); */
  background: url(../images/keerthana-intro-bg.svg) no-repeat 0 0 / cover;
  z-index: 1;
  border-radius: 20px;
}
section.keerthana-reddy .keerthana-intro .keerthana-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 2;
  border-radius: 20px;
}
section.keerthana-reddy .keerthana-intro .keerthana-intro-content {
  padding: 65px 65px 0 0;
  position: relative;
  z-index: 2;
}
section.keerthana-reddy .keerthana-intro .wave-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  max-height: 100%;
  opacity: 0.7;
}
section.keerthana-reddy .keerthana-intro .keerthana-intro-content h2 {
  font-family: "didot_lt_stdbold";
  font-size: 46px;
  font-weight: normal;
  color: #90446b;
  margin-bottom: 10px;
}
section.keerthana-reddy .keerthana-intro .keerthana-intro-content h3 {
  font-size: 26px;
  font-weight: 500;
  font-style: italic;
  color: #444444;
  margin-bottom: 25px;
}
section.keerthana-reddy .keerthana-intro .keerthana-intro-content p {
  font-size: 18px;
  line-height: 32px;
  color: #444444;
  margin-bottom: 20px;
}
section.keerthana-reddy .keerthana-intro .keerthana-intro-content p strong {
  font-weight: 500;
}

/* NEW DARK THEME */
section.keerthana-reddy.dark-theme {
  background: transparent linear-gradient(119deg, #201b24 0%, #443855 100%) 0%
    0%;
  position: relative;
  height: 850px;
}
section.keerthana-reddy.dark-theme .wave-bg {
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0.5;
}
section.keerthana-reddy.dark-theme header.header-main {
  padding: 50px 100px;
}
section.keerthana-reddy.dark-theme header.header-main .nav .nav-item .nav-link {
  color: #fff;
}

@media (max-width: 1680.99px) {
  section.keerthana-reddy.dark-theme {
    height: 820px;
  }
  section.keerthana-reddy.dark-theme header.header-main {
    padding: 35px 100px;
  }
}

@media (max-width: 1440.99px) {
  section.keerthana-reddy.dark-theme {
    height: 670px;
  }
}

@media (max-width: 1024.99px) {
  body.landing-page .top-gradient {
    display: block;
    height: 8px;
  }
  section.keerthana-reddy.dark-theme header.header-main {
    padding: 25px 30px;
    height: auto;
  }
  header.header-main .logo .logo-grey {
    display: none;
  }
  header.header-main .logo .logo-white {
    display: block;
  }
  header.header-main .nav,
  header.header-main .icons-right {
    display: none;
  }
}

@media (max-width: 500.99px) {
  header.header-main .logo .logo-white {
    display: block;
    height: 100%;
  }
}

section.keerthana-reddy.dark-theme .keerthana-intro-sec {
  position: relative;
  padding: 0 100px;
}
section.keerthana-reddy.dark-theme .keerthana-intro-sec:before {
  width: 150px;
  height: 150px;
  background: #563c63;
  border-radius: 50%;
  content: "";
  position: absolute;
  top: -50px;
  left: 520px;
  filter: blur(1.8rem);
  opacity: 0.9;
}
section.keerthana-reddy.dark-theme .keerthana-intro {
  background: transparent
    linear-gradient(
      180deg,
      #1c1c2e 0%,
      #402c4d 100%,
      #5d3c56 100%,
      #b1759c 100%,
      #e7cbcb 100%
    )
    0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #302540;
  border-radius: 0;
  margin-left: 100px;
  grid-column-gap: 35px;
}
section.keerthana-reddy.dark-theme .keerthana-intro:after {
  content: "";
  position: absolute;
  bottom: -20px;
  width: 100%;
  height: 20px;
  background: rgb(66, 54, 87);
  background: linear-gradient(
    90deg,
    rgba(66, 54, 87, 1) 0%,
    rgba(168, 72, 113, 1) 51%,
    rgba(192, 111, 115, 1) 79%,
    rgba(196, 158, 179, 1) 100%
  );
}
section.keerthana-reddy.dark-theme
  .keerthana-intro
  .keerthana-portrait::before {
  display: none;
}
section.keerthana-reddy.dark-theme .keerthana-intro .keerthana-portrait {
  height: 420px;
  margin-left: -100px;
  margin-right: 80px;
}
section.keerthana-reddy.dark-theme .keerthana-intro .keerthana-portrait img {
  border-radius: 0;
}
section.keerthana-reddy.dark-theme
  .keerthana-intro
  .keerthana-intro-content
  h2 {
  color: #fff;
}
section.keerthana-reddy.dark-theme
  .keerthana-intro
  .keerthana-intro-content
  h3 {
  color: #fff;
  font-style: normal;
}
section.keerthana-reddy.dark-theme .keerthana-intro .keerthana-intro-content p {
  color: #fff;
  max-width: 85%;
  font-weight: 500;
}
section.keerthana-reddy.dark-theme .keerthana-intro .keerthana-intro-content {
  padding: 95px 65px 130px 0;
}

@media (max-width: 1600px) {
  section.keerthana-reddy .keerthana-intro .keerthana-intro-content h2 {
    font-size: 34px;
  }
  section.keerthana-reddy .keerthana-intro .keerthana-intro-content h3 {
    font-size: 24px;
    margin-bottom: 20px;
  }
}
@media (max-width: 1440.99px) {
  section.keerthana-reddy.dark-theme .keerthana-intro .keerthana-intro-content {
    padding: 95px 65px 70px 0;
  }
  section.keerthana-reddy.dark-theme
    .keerthana-intro
    .keerthana-intro-content
    p {
    font-weight: 300;
  }
  section.keerthana-reddy .keerthana-intro .keerthana-intro-content h2 {
    font-size: 38px;
  }
  section.keerthana-reddy.dark-theme
    .keerthana-intro
    .keerthana-intro-content
    h3 {
    font-weight: 400;
  }
}
@media (max-width: 1024.99px) {
  section.keerthana-reddy.dark-theme {
    height: auto;
    background: rgb(32, 27, 36);
    background: linear-gradient(
      180deg,
      rgba(32, 27, 36, 1) 0%,
      rgba(68, 56, 85, 1) 100%
    );
    overflow: hidden;
  }
  section.keerthana-reddy .keerthana-intro .keerthana-intro-content h2 {
    font-size: 35px;
  }
  section.keerthana-reddy.dark-theme
    .keerthana-intro
    .keerthana-intro-content
    h3 {
    font-weight: 300;
    max-width: 100%;
  }
  section.keerthana-reddy.dark-theme .keerthana-intro-sec {
    padding: 0 30px;
    margin-top: 20px;
  }
  section.keerthana-reddy.dark-theme .keerthana-intro {
    grid-template-columns: 1fr;
    margin: 0;
    background: transparent;
    box-shadow: none;
  }
  section.keerthana-reddy.dark-theme .keerthana-intro .keerthana-portrait {
    margin: 0;
    order: 2;
    padding: 0 30px;
    height: 300px;
  }
  section.keerthana-reddy.dark-theme .keerthana-intro .keerthana-intro-content {
    padding: 0;
  }
  section.keerthana-reddy.dark-theme .wave-bg {
    height: 150px;
  }
  section.keerthana-reddy.dark-theme .keerthana-intro:after {
    bottom: -100px;
    width: 120%;
    height: 10px;
  }
  section.keerthana-reddy.dark-theme .keerthana-intro-sec:before {
    width: 220px;
    height: 220px;
    bottom: 170px;
    right: -30px;
    left: auto;
    top: auto;
  }
}
section.projects.dark-theme h2.heading-font {
  text-align: center;
}
section.projects.dark-theme .project-items {
  padding: 0 250px;
  grid-row-gap: 65px;
  margin-bottom: 85px;
}
section.projects.dark-theme .project-items .item {
  padding: 0;
}
section.projects.dark-theme .project-items .item:nth-of-type(odd) .content {
  margin: 0;
}
section.projects.dark-theme .project-items .item .image {
  margin: 0;
  position: relative;
  border-radius: 0;
  overflow: hidden;
}
section.projects.dark-theme .project-items .item .image a {
  height: 100%;
  position: absolute;
}
section.projects.dark-theme .project-items .item .image a img {
  padding: 0 35px;
}
section.projects .project-items .item .image img {
  height: 100%;
}
section.projects .project-items .item .image img.artwork {
  width: 80%;
  height: auto;
  position: absolute;
  right: 0;
  bottom: 0;
}
section.projects.dark-theme .project-items .item:nth-of-type(1) {
  background: transparent linear-gradient(271deg, #e6edf6 0%, #dcf1ff 100%) 0%
    0% no-repeat padding-box;
}
section.projects.dark-theme .project-items .item:nth-of-type(2) {
  background: transparent linear-gradient(90deg, #e6eae1 0%, #f7fbf1 100%) 0% 0%
    no-repeat padding-box;
}
section.projects.dark-theme .project-items .item:nth-of-type(3) {
  background: transparent linear-gradient(270deg, #e7e6f0 0%, #dfd6e0 100%) 0%
    0% no-repeat padding-box;
}
section.projects.dark-theme .project-items .item:nth-of-type(4) {
  background: transparent linear-gradient(90deg, #f8eeed 0%, #ffebeb 100%) 0% 0%
    no-repeat padding-box;
}
section.projects.dark-theme .project-items .item:nth-of-type(1) .image {
  background: none;
  padding-top: 80px;
}
section.projects.dark-theme
  .project-items
  .item:nth-of-type(even)
  .btn-epic:after {
  /* background: transparent; */
}
section.projects.dark-theme
  .project-items
  .item:nth-of-type(even)
  .btn-epic:after {
  /* background: transparent; */
}
section.projects.dark-theme
  .project-items
  .item:nth-of-type(odd)
  .btn-epic:after {
  /* background: transparent; */
}
section.projects.dark-theme
  .project-items
  .item
  .btn-epic:hover
  span:last-child {
  transform: translateY(-30px);
}
/* Projects */
section.projects {
  padding: 75px 0 0 0;
}
section.projects h2.heading-font {
  font-weight: 500;
  font-size: 40px;
  padding: 0 var(--side-padding);
  margin-bottom: 45px;
}
section.projects .project-items {
  display: grid;
  grid-template-columns: 1fr;
}
section.projects .project-items .item {
  display: grid;
  grid-template-columns: 1fr 500px;
  /* box-shadow: 0px 3px 6px #8e8e8e29; */
  padding: 40px var(--side-padding) 200px var(--side-padding);
  grid-column-gap: 220px;
  align-items: center;
}
section.projects .project-items .item:nth-of-type(odd) {
  background: #f2f5fa;
}
section.projects .project-items .item:nth-of-type(even) {
  grid-template-columns: 500px 1fr;
  position: relative;
  grid-column-gap: 350px;
}
section.projects .project-items .item .image {
  margin-top: -130px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}
section.projects .project-items .item .image img {
  width: 100%;
  object-fit: contain;
}
section.projects .project-items .item:nth-of-type(1) .image {
  padding: 20px 0 20px 50px;
}
section.projects .project-items .item:nth-of-type(3) .image {
  padding: 10px 50px 10px 50px;
}
section.projects .project-items .item:nth-of-type(2) .image {
  padding: 10px 25px 0 50px;
  align-items: flex-end;
  justify-content: flex-end;
  overflow: hidden;
}
section.projects.dark-theme .project-items .item:nth-of-type(2) .image {
  padding-left: 0;
}
section.projects.dark-theme .project-items .item:nth-of-type(3) .image {
  padding-right: 0;
}
section.projects .project-items .item:nth-of-type(2) .image img {
  height: 430px;
}
section.projects.dark-theme .project-items .item:nth-of-type(2) .image a img {
  position: relative;
  bottom: -35px;
}
section.projects.dark-theme .project-items .item:nth-of-type(3) .image a img {
  position: relative;
  bottom: -25px;
}
section.projects.dark-theme .project-items .item:nth-of-type(4) .image a img {
  object-fit: contain;
  padding: 0;
}
section.projects.dark-theme
  .project-items
  .item:nth-of-type(2)
  .image
  img.artwork {
  width: 100%;
  height: auto;
  left: -20px;
  bottom: -20px;
  z-index: -1;
}
section.projects.dark-theme
  .project-items
  .item:nth-of-type(3)
  .image
  img.artwork {
  width: 100%;
  right: -10px;
  bottom: -10px;
}
section.projects.dark-theme
  .project-items
  .item:nth-of-type(4)
  .image
  img.artwork {
  width: 100%;
  left: -20px;
  bottom: -12px;
}
section.projects .project-items .item:nth-of-type(4) .image {
  padding: 10px 30px 10px 0;
  overflow: hidden;
}
section.projects .project-items .item:nth-of-type(4) .image a img {
  margin-left: -75px;
}
section.projects .project-items .item .content {
  border-left: 1px solid #444;
  padding: 60px 25px;
  display: flex;
  flex-direction: column;
}
section.projects.dark-theme .project-items .item .content {
  padding: 15px 25px;
}
section.projects .project-items .item:nth-of-type(odd) .content {
  margin-left: auto;
  padding-left: 6rem;
}
section.projects.dark-theme .project-items .item:nth-of-type(odd) .content {
  padding-left: 50px;
  margin-left: 135px;
}
section.projects .project-items .item:nth-of-type(even) .content {
  margin-right: auto;
  padding-left: 50px;
}
section.projects .project-items .item .content h4 {
  font-size: 42px;
  font-weight: 500;
}
section.projects .project-items .item .content p {
  font-size: calc(var(--paragraph-size) + 5px);
  font-weight: 500;
  margin-bottom: 25px;
}
.btn-shadow {
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 25px;
  display: flex;
  max-width: 200px;
}
.btn-epic {
  position: relative;
  width: 100%;
  max-width: 200px;
  height: 50px;
  transform: translate3d(0px, 0%, 0px);
  text-decoration: none;
  transition-delay: 0.6s;
  overflow: hidden;
  border: 0.5px solid #444;
  font-size: 20px;
  font-weight: 500;
  border-radius: 25px;
  background: #fff;
  box-shadow: inset 0px 3px 3px #9f9f9f29, 0px 3px 0px #d6d6d629;
}
.btn-epic:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #444;
  border-radius: 50% 50% 0 0;
  transform: translateY(100%) scaleY(0.5);
  transition: all 0.6s ease;
}
.btn-epic:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f2f5fa;
  border-radius: 0;
  transform: translateY(0) scaleY(1);
  transition: all 0.6s ease;
}
section.projects .project-items .item:nth-of-type(even) .btn-epic:after {
  background: #fff;
}
.btn-epic div {
  position: relative;
  top: 10px;
  width: 100%;
  height: 26px;
  overflow: hidden;
}
.btn-epic span {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  transition: transform 0.5s ease;
}
.btn-epic span:first-child {
  color: #fff;
  transform: translateY(24px);
}
.btn-epic span:last-child {
  color: #1e0f21;
  transform: translateY(0);
}
.btn-epic:hover {
  background: #444;
  transition: background 0.2s linear;
  transition-delay: 0.6s;
}
.btn-epic:hover:after {
  border-radius: 0 0 50% 50%;
  transform: translateY(-100%) scaleY(0.5);
  transition-delay: 0;
}
.btn-epic:hover:before {
  border-radius: 0;
  transform: translateY(0) scaleY(1);
  transition-delay: 0;
}
.btn-epic:hover span:first-child {
  transform: translateY(0);
}
.btn-epic:hover span:last-child {
  transform: translateY(-30px);
}

@media (max-width: 1690px) {
  section.projects.dark-theme .project-items {
    padding: 0 180px;
  }
  section.projects .project-items .item {
    grid-column-gap: 120px;
  }
  section.projects .project-items .item:nth-of-type(even) {
    grid-column-gap: 300px;
  }
  section.projects.dark-theme .project-items .item:nth-of-type(odd) .content {
    margin-left: 175px;
  }
}

@media (max-width: 1680.99px) {
  section.projects .project-items .item:nth-of-type(odd) .content {
    padding-left: 4rem;
  }
  section.projects .project-items .item:nth-of-type(even) .content {
    padding-left: 4rem;
  }
  section.projects .project-items .item .content h4 {
    font-size: 44px;
  }
  section.projects .project-items .item .content p {
    font-size: calc(var(--paragraph-size) + 2px);
  }
  section.projects .project-items .item {
    padding: 40px var(--side-padding) 280px var(--side-padding);
  }
}

@media (max-width: 1440.99px) {
  section.projects.dark-theme .project-items .item:nth-of-type(odd) .content {
    margin-left: 115px;
  }
  section.projects .project-items .item {
    grid-column-gap: 10px;
  }
  section.projects .project-items .item:nth-of-type(even) {
    grid-column-gap: 100px;
  }
  section.projects .project-items .item .content h4 {
    font-size: 40px;
  }
}

@media (max-width: 1024.99px) {
  section.projects {
    padding: 35px 0 0 0;
  }
  section.projects.dark-theme h2.heading-font {
    font-size: 25px;
    margin-bottom: 25px;
  }
  section.projects.dark-theme .project-items {
    padding: 0;
    margin-bottom: 0;
  }
  section.projects.dark-theme .project-items .item:nth-of-type(odd) .content {
    margin-left: 25px;
    padding-left: 25px;
  }
  section.projects .project-items .item {
    grid-template-columns: 1fr;
  }
  section.projects .project-items .item:nth-of-type(even) {
    grid-template-columns: 1fr;
  }
  section.projects.dark-theme .project-items .item:nth-of-type(2) .image,
  section.projects.dark-theme .project-items .item:nth-of-type(4) .image {
    order: 2;
  }
  section.projects.dark-theme .project-items .item .content {
    padding: 15px 25px;
    margin-top: 25px !important;
    margin-left: 25px;
  }
  section.projects .project-items .item .content h4 {
    font-size: 26px;
  }
}

/* Declaration */
section.declaration {
  background: transparent linear-gradient(269deg, #f6f4f8 0%, #ffffff 100%);
  padding: var(--vertical-padding) var(--side-padding);
}
section.declaration h2 {
  margin-bottom: 15px;
}
section.declaration p {
  font-size: var(--paragraph-size);
  line-height: var(--paragraph-linehight);
  margin-bottom: 25px;
}
section.declaration.dark-theme {
  padding: var(--vertical-padding) var(--vertical-padding);
  color: #fff;
  position: relative;
  overflow: hidden;
}
section.declaration.dark-theme:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: url(../images/understanding-design-main-bg.png) no-repeat 0 67% /
    cover;
}
section.declaration.dark-theme .ripple {
  position: absolute;
  right: -100px;
  top: 0;
  z-index: 1;
  height: 100%;
}
section.declaration.dark-theme .declaration-container {
  display: grid;
  grid-template-columns: 1fr 500px;
  grid-column-gap: 35px;
  align-items: center;
  position: relative;
  z-index: 2;
}
section.declaration.dark-theme h2 {
  font-size: 40px;
  font-weight: 500;
  line-height: 52px;
  color: #fff;
  display: inline-block;
  position: relative;
  margin-bottom: 35px;
}
section.declaration.dark-theme h2 small {
  font-size: 32px;
}
section.declaration.dark-theme h2::after {
  content: "";
  width: 100%;
  height: 3px;
  background: rgb(66, 54, 87);
  background: linear-gradient(
    90deg,
    rgba(66, 54, 87, 1) 0%,
    rgba(168, 72, 113, 1) 33%,
    rgba(192, 111, 115, 1) 66%,
    rgba(196, 158, 179, 1) 100%
  );
  position: absolute;
  left: 0;
  bottom: -10px;
  display: none;
}
@media (max-width: 1440.99px) {
  section.declaration.dark-theme {
    padding: calc(var(--vertical-padding) - 15px)
      calc(var(--vertical-padding) - 15px);
  }
  section.declaration.dark-theme .declaration-container {
    grid-template-columns: 1fr 400px;
  }
  section.declaration.dark-theme h2 {
    font-size: 35px;
  }

  section.declaration p {
    margin-bottom: 15px;
  }
}

@media (max-width: 1024.99px) {
  section.declaration.dark-theme .declaration-container {
    grid-template-columns: 1fr;
  }
  section.declaration.dark-theme h2 {
    font-size: 26px;
    line-height: 36px;
    margin-bottom: 20px;
  }
  section.declaration.dark-theme h2 small {
    font-size: 22px;
  }
  section.declaration.dark-theme .image-vector {
    text-align: center;
    margin-top: 30px;
  }
  section.declaration.dark-theme .image-vector img {
    height: 220px;
  }
}
/*Side note*/
section.side-note {
  padding: 100px;
}
section.side-note .side-note-white {
  display: grid;
  grid-template-columns: 600px 1fr;
  grid-column-gap: 100px;
  align-items: center;
}
section.side-note .side-note-white .content {
  display: flex;
  flex-direction: column;
}
section.side-note .side-note-white .content h2 {
  font-size: 40px;
  color: #000000;
}
section.side-note .side-note-white .content p {
  font-size: var(--paragraph-size);
  line-height: var(--paragraph-linehight);
}
section.side-note .side-note-white .content .btn-epic:after {
  background: #fff;
}
section.side-note .side-note-white .image.mobile-screens {
  display: none;
}
@media (max-width: 1024.99px) {
  section.side-note {
    padding: 30px;
  }
  section.side-note .side-note-white {
    grid-template-columns: 1fr;
  }
  section.side-note .side-note-white .image.hd-screens {
    display: none;
  }
  section.side-note .side-note-white .image.mobile-screens {
    display: block;
  }
  section.side-note .side-note-white .content a.btn-epic {
    margin: 0 auto;
  }
}

/* Collections Page */
body.collection .top-gradient {
  height: 14px;
  width: 100%;
  background: #ba8f93;
  position: relative;
}
section.collection {
  background: transparent
    linear-gradient(90deg, #d1c8de 0%, #e9d8df 41%, #f9e3e0 55%, #f0cdc7 100%);
}
.collections-main {
}
.collections-main .intro-title {
  margin-bottom: 45px;
}
.collections-main .intro-title h2 {
  font-size: 34px;
}
.collections-main .intro-title h5 {
  font-size: var(--paragraph-size);
  font-weight: 500;
}
.collections-main .collections-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 30px;
  grid-row-gap: 45px;
}
.collections-main .collections-items .item {
  text-align: center;
}
.collections-main .collections-items .item .image-base {
  background: #f7f7f7;
  box-shadow: 0px 3px 6px #00000029;
  padding: 120px 35px;
  height: 550px;
  margin-bottom: 20px;
}
.collections-main .collections-items .item:nth-of-type(1) .image-base {
  padding: 50px 35px;
}
.collections-main .collections-items .item:nth-of-type(3) .image-base {
  padding: 30px 35px;
}
.collections-main .collections-items .item:nth-of-type(4) .image-base {
  padding: 100px 25px;
}
.collections-main .collections-items .item .image-base img {
  object-fit: contain;
  max-height: 100%;
}
.collections-main .collections-items .item h3 {
  font-size: 24px;
  font-weight: 600;
}
.collections-main .collections-items .item p {
  font-family: "avenir_lt_std55_roman";
  font-size: 18px;
  color: #444;
  font-weight: normal;
}
.collections-main .collection-full-image {
  /* background: transparent
    linear-gradient(90deg, #d1c8de 0%, #e9d8df 41%, #f9e3e0 55%, #f0cdc7 100%); */
  overflow: hidden;
  position: relative;
  padding-right: 40px;
  /* height: 1000px; */
}
.collections-main .collection-full-image img {
  /* max-height: 1000px;
  height: 100%; */
}

@media (max-width: 1440.99px) {
  section.collection header.header-main {
    padding-bottom: 25px;
  }
}

@media (max-width: 500.99px) {
  body,
  html {
    overflow-x: hidden;
  }
  section.low-fidelity-wireframes {
    padding: var(--vertical-padding) 30px;
  }
  section.current-google-pay-app-screens img,
  section.low-fidelity-wireframes img {
    padding: 0 25px;
  }
}