/* Font Files */

@font-face {
  font-family: 'PP Editorial Old';
  src: url('../fonts/PPEditorialOld-UltralightItalic.woff2') format('woff2'),
       url('../fonts/PPEditorialOld-UltralightItalic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Editorial Old';
  src: url('../fonts/PPEditorialOld-Ultrabold.woff2') format('woff2'),
  url('../fonts/PPEditorialOld-Ultrabold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Editorial Old';
  src: url('../fonts/PPEditorialOld-Italic.woff2') format('woff2'),
  url('../fonts/PPEditorialOld-Italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Editorial Old';
  src: url('../fonts/PPEditorialOld-Ultralight.woff2') format('woff2'),
  url('../fonts/PPEditorialOld-Ultralight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Editorial Old';
  src: url('../fonts/PPEditorialOld-Regular.woff2') format('woff2'),
  url('../fonts/PPEditorialOld-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Editorial Old';
  src: url('../fonts/PPEditorialOld-UltraboldItalic.woff2') format('woff2'),
  url('../fonts/PPEditorialOld-UltraboldItalic.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}


@font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 50;
    font-display: swap;
    src: url('../fonts/Aspekta-50.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url('../fonts/Aspekta-100.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 150;
    font-display: swap;
    src: url('../fonts/Aspekta-150.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url('../fonts/Aspekta-200.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 250;
    font-display: swap;
    src: url('../fonts/Aspekta-250.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/Aspekta-300.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 350;
    font-display: swap;
    src: url('../fonts/Aspekta-350.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Aspekta-400.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 450;
    font-display: swap;
    src: url('../fonts/Aspekta-450.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Aspekta-500.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 550;
    font-display: swap;
    src: url('../fonts/Aspekta-550.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Aspekta-600.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 650;
    font-display: swap;
    src: url('../fonts/Aspekta-650.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Aspekta-700.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 750;
    font-display: swap;
    src: url('../fonts/Aspekta-750.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/Aspekta-800.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 850;
    font-display: swap;
    src: url('../fonts/Aspekta-850.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/Aspekta-900.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 950;
    font-display: swap;
    src: url('../fonts/Aspekta-950.woff2') format('woff2');
  }
  
  @font-face {
    font-family: 'Aspekta';
    font-style: normal;
    font-weight: 1000;
    font-display: swap;
    src: url('../fonts/Aspekta-1000.woff2') format('woff2');
  }
:root{
  --aspekta:'Aspekta';
  --pp: 'PP Editorial Old';
}
*
{
    margin: 0;
    padding: 0;
}
html{
  
}
html, body
{
    scroll-behavior: smooth;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body
{
    font-family: var(--aspekta);
    font-style: normal;
    /* cursor: none; */
    height: 100vh;
    overflow-x: hidden;
  
}
body.menu-open{
  overflow: hidden;
}
a{
  text-decoration: none;
  color: inherit;
  display: block;
}
a:hover{
  /* cursor: none; */
}
p{
  font-weight: 400;
  font-size: 18px;
  line-height: 150%;
  letter-spacing: 1px;
}
p.small{
  font-size: 16px;
}

h2{
  font-weight: 300;
  font-size: 90px;
  line-height: 95.5%;
  color: #111111;
  padding-bottom: 11px;
}
h2 span{
  font-family: var(--pp);
  font-weight: 200;
  font-style: italic;
  line-height: 95.5%;
}

h3{
  font-weight: 300;
  font-size: 87.4386px;
  line-height: 101.5%;
  color: #111111;
}
h3 span{
  font-family: var(--pp);
  font-style: italic;
  font-weight: 200;
}

h4{
  font-weight: 300;
  font-size: 70px;
  line-height: 108%;
  letter-spacing: -1px;
}
h4 span{
  font-family: var(--pp);
  font-weight: 200;
  font-style: italic;
}

h5{
font-weight: 300;
font-size: 64px;
line-height: 95.5%;
}
h5 span{
  font-family: var(--pp);
  font-weight: 200;
  font-style: italic;
}
.pin-spacer section {
  overflow: hidden;
}
.testing-video{
  height: calc(100vh);
}
.testing-video video{
  height: 100%;width: 100%;object-fit: cover;
  object-position: bottom;
}

/* Loader Screen */
body.stay{
    overflow: hidden;
}
#loader{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: #D8031D;
  z-index: 999999999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: .4s ease all;
  transition-delay: 1.4s;
}
#loader.active{
  opacity: 0;
  visibility: hidden;
  z-index: 0;
}
.loader-icons{
  position: relative;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.white-circle, .black-circle{
   width: 45px;
   height: 45px;
   border-radius: 50%;
   position: absolute;
}
.black-circle.close{
    transform: rotate(0deg) translateX(5vw); 
}
.white-circle.close{
    transform: rotate(0deg) translateX(-5vw);
}
.white-circle{
  background-color: #FFFFFF;
  transform: rotate(0deg) translateX(-15vw);
}
.black-circle{
  background-color:#111111;
  transform: rotate(0deg) translateX(15vw);
}
.white-overlay, .black-overlay, .red-overlay{
  height: 100vh;
  width: 100vw;
  position: absolute;
}
.white-overlay{
  background-color: white;
  -webkit-clip-path: circle(0% at 50% 50%);
  clip-path: circle(0% at 50% 50%);
  opacity: 0;
  -webkit-transition: left 0s linear .9s,bottom 0s linear .9s,-webkit-clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89);
  transition: left 0s linear .9s,bottom 0s linear .75s,-webkit-clip-path .75s cubic-bezier(0.9, 0.03, 0.47, 0.89);
  -o-transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear .9s,bottom 0s linear .9s;
  transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear .9s,bottom 0s linear .9s;
  transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear .9s,bottom 0s linear .9s,-webkit-clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89);
}
.black-overlay{
  background-color: #111;
  -webkit-clip-path: circle(0% at 50% 50%);
  clip-path: circle(0% at 50% 50%);
  opacity: 0;
  -webkit-transition: left 0s linear .9s,bottom 0s linear .9s,-webkit-clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89);
  transition: left 0s linear .9s,bottom 0s linear .75s,-webkit-clip-path .75s cubic-bezier(0.9, 0.03, 0.47, 0.89);
  -o-transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear .9s,bottom 0s linear .9s;
  transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear .9s,bottom 0s linear .9s;
  transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear .9s,bottom 0s linear .9s,-webkit-clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89);
  transition-delay: .2s;
}
.red-overlay{
  background-color: #D8031D;
  -webkit-clip-path: circle(0% at 50% 50%);
  clip-path: circle(0% at 50% 50%);
  opacity: 0;
  -webkit-transition: left 0s linear .9s,bottom 0s linear .9s,-webkit-clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89);
  transition: left 0s linear .9s,bottom 0s linear .75s,-webkit-clip-path .75s cubic-bezier(0.9, 0.03, 0.47, 0.89);
  -o-transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear .9s,bottom 0s linear .9s;
  transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear .9s,bottom 0s linear .9s;
  transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear .9s,bottom 0s linear .9s,-webkit-clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89);
  transition-delay: .4s;
}
.white-overlay.active, .black-overlay.active, .red-overlay.active{
  opacity: 1;
  -webkit-clip-path: circle(100% at 50% 50%);
  clip-path: circle(100% at 50% 50%);
}
/* Loader Screen Ends */

/* Header CSS */
.simpleplan-menu-text{
  font-weight: 600;
  font-size: 18px;
  line-height: 150%;
  text-transform: uppercase;
  color: #FFFFFF;
}
.midnightHeader.default .simpleplan-menu-text{
    color: #FFFFFF;
}
.midnightHeader.white .simpleplan-menu-text{
  color: #111111;
}
.simpleplan-menu-text-wrapper{
  overflow: hidden;
  position: relative;
  height: 27px;
}
.simpleplan-menu-text-wrapper span{
  display: block;
  transition: 1.2s cubic-bezier(0.75, 0, 0.25, 1);
  transition-delay: .3s;
}
.simpleplan-menu-text-wrapper span:nth-child(2){
  color: #FFFFFF !important;
}
.simpleplan-menu-text-wrapper span:nth-child(2){
  padding-right: 6px;
}
.simpleplan-menu-text-wrapper span:nth-child(1){
  position: relative;
  left: 10px;
}
body.menu-open .simpleplan-menu-text-wrapper span{
  transform: translateY(-27px);
}
.midnightHeader.default .simpleplan-menu-button{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    overflow: hidden;
    position: relative;
    transition: 1s all ease;
    transition-delay: 0.3s;
}
.menu-open .midnightHeader.white .simpleplan-menu-button{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid #FFFFFF;
  overflow: hidden;
  position: relative;
    transition: 1s all ease;
    transition-delay: 0.3s;
}
.midnightHeader.white .simpleplan-menu-button{
  width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid #111111;
    overflow: hidden;
    position: relative;
    transition: 1s all ease;
    transition-delay: 0.3s;
}

.simpleplan-menu-button svg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-51%, -51%);
    transition: 1.2s cubic-bezier(0.75, 0, 0.25, 1);
    transition-delay: .3s;
}
.simpleplan-menu-button svg path{
  stroke: white;
    transition: 1.2s all ease;
    transition-delay: 0.3s all ease
}
.midnightHeader.default .simpleplan-menu-button svg path{
  stroke: white;
}
.menu-open .midnightHeader.white .simpleplan-menu-button svg path{
  stroke: white;
}
.midnightHeader.white .simpleplan-menu-button svg path{
  stroke: black;
}
body.menu-open .simpleplan-menu-button svg{
  transform: translate(-48%, -48%) rotate(45deg);
}
.header-wrapper{
    width: 100%;
    left: 0;
    right: 0;
    top:0;
    z-index: 9999;
    animation: fadeEffect 1s;
    overflow: hidden;
    background-color: #D8031D;
}
.header-wrapper.active{
  display: none;
}
.midnightHeader.default .simpleplan-logo img{
  filter: invert(0);
}
.simpleplan-logo{
  transition: .2s ease all;
}
.simpleplan-logo.active{
  transform: translateY(-400%);
}
.menu-open .midnightHeader.white .simpleplan-logo img{
  /* filter: invert(0); */
    transition: 1s all ease;
    transition-delay: 0.4s;
}
.midnightHeader.white .simpleplan-logo img{
  /* filter: invert(1); */
    transition: 1s all ease;
    transition-delay: 0.4s;
}
.header-contents-wrapper .header-menu-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
}
.header-menu-wrap .cart a {
    font-weight: 600;
    font-size: 18px;
    line-height: 150%;
    text-transform: uppercase;
    color: #fff;
    transition: .3s ease all;
    transition-delay: .6s;
    position: relative;
}
.header-menu-wrap .cart a span {
    
}
.midnightHeader.white .header-menu-wrap .cart a {
    color: #111;
}
body.menu-open .midnightHeader.white .header-menu-wrap .cart a {
    color: #fff;
}
.midnightInner{
  overflow: hidden !important;
}
.header-contents-wrapper{
  padding: 32px 62px;
  padding-bottom: 0;
  overflow: hidden;
}
.simpleplan-hamburger-menu, .simpleplan-overlay{
    position: fixed;
    pointer-events: none;
    width: 100vw;
    height: auto;
    top: 0;
    left: 100%;
    bottom: 100%;
    right: 0;
    overflow: hidden;
    -webkit-clip-path: circle(0% at calc(100vw - 100px) 53px);
    clip-path: circle(0% at calc(100vw - 100px) 53px);
    padding-top: 72px;
    -webkit-transition: left 0s linear .9s,bottom 0s linear .9s,-webkit-clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89);
    transition: left 0s linear .9s,bottom 0s linear .75s,-webkit-clip-path .75s cubic-bezier(0.9, 0.03, 0.47, 0.89);
    -o-transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear .9s,bottom 0s linear .9s;
    transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear .9s,bottom 0s linear .9s;
    transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear .9s,bottom 0s linear .9s,-webkit-clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89);
}
.simpleplan-hamburger-menu.active, .simpleplan-overlay.active {
    left: 0;
    bottom: 0;
    -webkit-clip-path: circle(140% at calc(100vw - 100px) 53px);
    clip-path:circle(140% at calc(100vw - 100px) 53px);
    -webkit-transition: left 0s linear 0s,bottom 0s linear 0s,-webkit-clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89);
    transition: left 0s linear 0s,bottom 0s linear 0s,-webkit-clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89);
    -o-transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear 0s,bottom 0s linear 0s;
    transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear 0s,bottom 0s linear 0s;
    transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear 0s,bottom 0s linear 0s,-webkit-clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89);
    pointer-events: auto;
}
.simpleplan-hamburger-menu{
  z-index: 50;
  background: #D8031D;
  overflow: hidden;
  overflow-y: auto;
  padding-bottom: 100px;
}
.simpleplan-hamburger-menu.active{
  transition-delay: .3s;
}
.simpleplan-overlay{
  z-index: 49;
  background: #FFFFFF;
}
.sp-menu-link{
  font-weight: 300;
/*  font-size: 90px;*/
    font-size: 10vh;
  line-height: 95.5%;
  text-transform: capitalize;
  color: #FFFFFF;
  transition: opacity .2s ease-in-out; 
  overflow: hidden;
}
.sp-menu-links{
  gap: 47px;
}
.sp-menu-link a{
  display: inline-flex;
  transform: translateY(100%);
  transition: 1.2s cubic-bezier(0.9, 0.03, 0.47, 0.89);;
  transition-delay: .3s;
}
.simpleplan-hamburger-menu.active .sp-menu-link a{
  transform: translateY(0%);
}
.sp-menu-closer-look{
  overflow: hidden;
}
.sp-menu-closer-look span{
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  line-height: 115%; /* 11.5px */
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFFFFF;
  display: block;
  transform: translateY(100%);
  transition: 1.2s cubic-bezier(0.9, 0.03, 0.47, 0.89);;
  transition-delay: .3s;
}
.simpleplan-hamburger-menu.active .sp-menu-closer-look span{
  transform: translateY(0%);
}
.sp-menu-secondary .sp-menu-secondary-link{
  font-weight: 300;
  font-size: 36px;
  line-height: 95.5%;
  color: #FFFFFF;
  transition: opacity .2s ease-in-out; 
  overflow: hidden;
  padding-bottom: 5px;
}
.sp-menu-secondary .sp-menu-secondary-link a{
  display: inline-flex;
  transform: translateY(120%);
  transition: 1.2s cubic-bezier(0.9, 0.03, 0.47, 0.89);;
  transition-delay: .3s;
}
.simpleplan-hamburger-menu.active .sp-menu-secondary .sp-menu-secondary-link a{
  transform: translateY(0%);
}
.sp-menu-second-wrapper{
  gap: 37px;
  align-items: start;
  position: relative;
  top: 0px;
  flex-direction: column;
}
.sp-menu-secondary{
  gap: 30px;
}
.simpleplan-hamburger-wrapper{
  padding-top: 7vh;
  width: 85%;
  margin: 0 auto;
}
.sp-menu-second{
/*    margin-bottom: -50px;*/
    margin-bottom: 0px;
}
/* Header CSS Ends */

/* Home Banner CSS */
.sp-banner-home{
  background-color: #D8031D;
  padding-top: 70px;
  overflow: hidden;
}
.sp-banner-home .container{
  position: relative;
  height: 100vh;
  width: 100vw;
}
.circle-small{
  width: 15vw;
  height: 15vw;
  position:absolute;
}
.circle-big{
  width:25vw;
  height:25vw;
  position:absolute;
}

.circle-2{
  right:5%;
  top:0%;
  transform-origin: left;
}
.circle-2 .circle-wrapper img{
  transform-origin: right bottom;
}
.circle-1{
  left:10%;
  top:5%;
}
.circle-3{
  left: 35%;
  top: 10%;
}
.circle-4{
  top: 23%;
  left: 5%;
}
.circle-6{
  right: 5%;
  bottom: 25%;
}
.circle-6 .circle-wrapper img{
  transform-origin: right bottom;
}
.circle-1 .circle-wrapper img{
  transform-origin: left bottom;
}
.circle-3 .circle-wrapper img{
  transform-origin: left bottom;
}
.circle-4 .circle-wrapper img{
  transform-origin: left bottom;
}
.circle-5 .circle-wrapper img{
  transform-origin: left bottom;
}
.circle-5{
  left: 25%;
  top: 5%;
}
@keyframes circle-5{
  from{
    scale: 0
  }
  to{
    scale: 1
  }
} 
.circle-wrapper{
  position: relative;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  scale: 0.3 !important;
  transition: .4s cubic-bezier(0.9, 0.03, 0.47, 0.89);
}
.circle-small.active .circle-wrapper, .circle-big.active .circle-wrapper{
scale: 1 !important;
}
.circle-small.active2 .circle-wrapper, .circle-big.active2 .circle-wrapper{
  scale: 1.3 !important;
}
.circle-wrapper img{
  border-radius: 50%;
  -webkit-transform-origin:center;
  transform-origin: center;
  position: absolute;
  z-index: 1;
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
  transition: .2s ease all;
}
.circle-small.active img, .circle-big.active img{
transform: scale(1);
opacity: 1;
transition-delay: 0.8s;
}
.circle-small.active2 img, .circle-big.active2 img{
  transform: scale(1);
}
.fill{
  background-color: white;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: absolute;
  inset: 0px;
  transition: .4s cubic-bezier(0.9, 0.03, 0.47, 0.89);;
  transform: scale(1);
  transition-delay: 0.8s;
}
.circle-small.active .fill,  .circle-big.active .fill{
  transform: scale(0);
  transition-delay: 0s;
}
.banner-text{
font-weight: 300;
font-size: 84.4829px;
line-height: 150%;
color: #FFFFFF;
}
.banner-text-3, .banner-text span{
  font-family: var(--pp);
  font-style: italic;
  font-weight: 200;
  font-size: 84.4829px;
  line-height: 150%;
  color: #FFFFFF;
}
.banner-text-wrapper{
  gap: 16px;
  overflow: hidden;
}
.banner-text-wrapper h1{
  transform: translateY(100%);
  opacity: 0;
  transition: 0.6s ease all;
  transition-delay: .5s;
}
.sp-banner-home.was-in-viewport h1, .sp-banner-home.in-viewport h1{
  transform: translateY(0%);
  opacity: 1;
}
.banner-text-container{
  padding-bottom: 58px;
  position: absolute;
  bottom: 5vh;
  left: 0;
  right: 0;
}
 /* Home Banner CSS Ends */


 /* Quite Simple CSS Starts */
.sp-quite-simple{
  height: 100vh;
  overflow: hidden;
  padding-bottom: 20vh;
  position: relative;
}
.sp-quite-simple-svg svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  top: 15vh;
}
.sp-quite-simple-svg svg path.cls-1{
  transition:1s ease all;
  transition-delay:.1s;
  fill:none;
  stroke:#111;
}
.cls-2{
  r:52;
  transition:1s ease all;
  cursor: pointer;
  fill:#d8031d;
}
.cls-2.active{
  r:150;
}
.sp-quite-simple-svg svg path.cls-1{
  d: path("M1440.08.39l-233,192.81-154,296.57L723.51,557.21.08,434.66");
}
.sp-quite-simple-svg svg path.cls-1.path-1{
  d: path("M1447.92.29l-221,310.84-216,23L675.33,513.94.19,367.74");
}
.sp-quite-simple-svg svg path.cls-1.path-3{
  d: path("M1447.62.29l-364.5,501.32-404.5-66-186,100.5L.14,393.24");
}
.circle-1-path, .circle-2-path, .circle-3-path{
  transition: 1s ease all;
}
.circle-1-path.path-1{
  d: path("M715.9,558.1v-2.7h6.8v-6.8h2.7v6.8h6.8v2.7h-6.8v6.8h-2.7v-6.8H715.9z");
  transition-delay: 1.2s;
  opacity:1;
}
.circle-2-path.path-1{
  d: path("M477.8,539.4v-2.7h6.8v-6.8h2.7v6.8h6.8v2.7h-6.8v6.8h-2.7v-6.8H477.8z");
  opacity: 0;
  transition-delay: 1.2s
}
.circle-3-path.path-1{
  d: path("M1207.9,176.9v-2.7h6.8v-6.8h2.7v6.8h6.8v2.7h-6.8v6.8h-2.7v-6.8H1207.9z");
  transition-delay: 1.2s;
  opacity:1;
}
.circle-1-path.path-3{
  d: path("M715.9,558.1v-2.7h6.8v-6.8h2.7v6.8h6.8v2.7h-6.8v6.8h-2.7v-6.8H715.9z");
  opacity: 0;
  transition-delay: 0s
}
.circle-2-path.path-3{
  d: path("M1007.2,340v-2.7h6.8v-6.8h2.7v6.8h6.8v2.7h-6.8v6.8h-2.7V340H1007.2z");
  opacity: 1;
  transition-delay: 1.2s
}
.circle-3-path.path-3{
  d: path("M1210.2,311v-2.7h6.8v-6.8h2.7v6.8h6.8v2.7h-6.8v6.8h-2.7V311H1210.2z");
  opacity: 1;
  transition-delay: 1.2s
}
.circle-2-path.path-2{
  d: path("M1007.2,340v-2.7h6.8v-6.8h2.7v6.8h6.8v2.7h-6.8v6.8h-2.7V340H1007.2z");
  opacity: 0;
  transition-delay: 0s
}
.circle-1-path.path-2{
   d: path("M715.9,558.1v-2.7h6.8v-6.8h2.7v6.8h6.8v2.7h-6.8v6.8h-2.7v-6.8H715.9z");
   opacity: 1;
   transition-delay: 1.2s
}
.circle-3-path.path-2{
   d: path("M1207.9,176.9v-2.7h6.8v-6.8h2.7v6.8h6.8v2.7h-6.8v6.8h-2.7v-6.8H1207.9z");
   opacity: 1;
   transition-delay: 1.2s
}
.circle-1-path.path3{
   d: path("M477.8,539.4v-2.7h6.8v-6.8h2.7v6.8h6.8v2.7h-6.8v6.8h-2.7v-6.8H477.8z");
   opacity: 1;
   transition-delay: 1.2s
}
.circle-2-path.path3{
  d: path("M659.8,440.4v-2.7h6.8v-6.8h2.7v6.8h6.8v2.7h-6.8v6.8h-2.7v-6.8H659.8z");
  opacity: 1;
  transition-delay: 1.2s;
}
.circle-3-path.path3{
  opacity: 1;
}
#circle-1{
  cx: 724.08;
  cy: 554.53;
}
#circle-2{
  cx: 1054.58;
  cy: 470.03;
}
#circle-3{
  cx:1216.08;
  cy:173.53;
}
#circle-1.path-3{
  cx:486.62;
  cy:535.11;
}
#circle-2.path-3{
  cx:667.62;
  cy:437.11;
  
}
.circle-1-g path{
  transition: opacity .2s ease;
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}
.circle-2-g path{
  transition: opacity .2s ease;
  opacity: 0;
  transition-delay: 0s;
  pointer-events: none;
}
.circle-3-g path{
  transition: opacity .2s ease;
  opacity: 0;
  transition-delay: 0s;
  pointer-events: none;
}
#circle-3.path-3{
  cx:1073.12;
  cy:501.61;
}
#circle-1.path-1{
  cx:672.19;
  cy:500.13;
}
#circle-2.path-1{
  cx:1015.42;
  cy:336.63;
  
}
#circle-3.path-1{
  cx:1218.4;
  cy:307.6;
}
.circle-2-active.active{
  opacity: 1;
  transition: 0.5s ease all;
  transition-delay: 1.2s;
}
.circle-2-active, .circle-1-active, .circle-3-active{
  opacity: 0;
  transition: .1s ease all;
  transition-delay: 0s;
}
.circle-1-active.active{
  opacity: 1;
  transition: 0.5s ease all;
  transition-delay: 1s;
}
.circle-3-active.active{
  opacity: 1;
  transition: 0.5s ease all;
  transition-delay: 1.2s;
}
.impression-1{
  transform: translate(-15px, -15px);
}
.impression-2{
  transform: translate(-15px, -15px);
}
.revenue-1{
  transform: translate(15px, 40px);
}
.revenue-2 {
  transform: translate(15px, 40px);
}
.reach-1{
  transform: translate(0px, 15px);
}
.reach-2{
  transform: translate(0px, 15px);
}
.sp-quite-simple-body{
  padding-top: 46px;
  overflow: hidden;
}
.sp-quite-simple-body p{
  transform: translateY(100%);
  opacity: 0;
  transition: 0.6s cubic-bezier(0.9, 0.03, 0.47, 0.89);
  transition-delay: 0.3s;
}
.sp-quite-simple-body.in-viewport p, .sp-quite-simple-body.was-in-viewport p{
  transform: translateY(0%);
  opacity: 1;
}
.sp-quite-simple-text-wrapper{
  max-width: 60ch;
  padding-top: 120px;
  position: absolute;
  padding-left: 150px;
}
.sp-quite-simple-safari .sp-quite-slider-wrapper{
  display: block;
}
.sp-quite-simple-safari .sp-quite-slider-wrapper .quite-sp-slider-box {
  width: 400px;
  height: 400px;
  margin: 0;
  margin-left: auto;
  margin-right: 10%;
  border-radius: 50%;
  background: #D8031D;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}
.sp-quite-simple-safari .sp-quite-slider-wrapper .swiper.mySwiper .swiper-wrapper .swiper-slide:nth-child(2) .quite-sp-slider-box {
  background-color: #CA0019;
}
.sp-quite-simple-safari .sp-quite-slider-wrapper .swiper.mySwiper .swiper-wrapper .swiper-slide:nth-child(3) .quite-sp-slider-box {
  background-color: #AD0217;
}
.sp-quite-simple-safari .quite-sp-slider-label p {
  color: var(--SP-WHITE, #FFF);
  text-align: center;
  font-size: 10.761px;
  font-style: normal;
  font-weight: 600;
  line-height: 74.5%;
  letter-spacing: 2.69px;
  text-transform: uppercase;
}
.sp-quite-simple-safari .quite-sp-slider-heading h2 {
  color: var(--SP-WHITE, #FFF);
  text-align: center;
  font-size: 69.179px;
  font-style: italic;
  font-weight: 400;
  line-height: 74.5%;
  font-family: var(--pp);
}
.sp-quite-simple-safari .quite-sp-slider-heading {
  margin-top: 20px;
}
.sp-quite-simple-safari .sp-quite-slider-wrapper .swiper-slide-shadow{
  display: none;
}
.sp-quite-simple-safari{
  position: relative;
  top: 50%;
  -webkit-height: 100%;
  right: 0;
  /* display: flex; */
  /* align-self: center; */
  /* justify-content: center; */
  width: auto;
}
.sp-quite-simple-wrapper{
  -webkit-height: 100%;
}

 /* Quite Simple CSS Ends */


/* We Do Great CSS Starts */
.sp-we-do{
  background-color: #111111;
  position: relative;
  padding-bottom: 120px;
  min-height: 100vh;
  overflow: hidden;
}
.sp-quite-simple-heading{
  overflow: hidden;
}
.sp-we-do .sp-quite-simple-heading h2{
  color: #FFFFFF;
}
.sp-quite-simple-heading h2{
  transform: translateY(100%);
  opacity: 0;
  transition: .6s ease all;
}
.sp-quite-simple-heading.in-viewport h2, .sp-quite-simple-heading.was-in-viewport h2{
  transform: translateY(0%);
  opacity: 1;
}
.sp-we-do .sp-quite-simple-text-wrapper{
  position: static;
}
.sp-we-do-circles-wrapper{
  position: relative;
}
.sp-we-do-circle{
  width: 196px;
  height: 196px;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: .9s ease all;
}
.spwd-circle-1{
  background-color: white;
  z-index: 3;
  opacity: 0;
  transform: translateX(150px);
  transition-delay: .8s;
}
.spwd-circle-2{
  background-color: #D8031D;
  z-index: 2;
  opacity: 0;
  transition-delay: .2s;
}
.spwd-circle-3{
  background-color: white;
  z-index: 1;
  opacity: 0;
  transform: translateX(-150px);
  transition-delay: .8s;
}
.sp-we-do-circle.in-viewport.spwd-circle-3, .sp-we-do-circle.was-in-viewport.spwd-circle-3{
  transform: translateX(-20px);
  opacity: 1;
}
.sp-we-do-circle.in-viewport.spwd-circle-1, .sp-we-do-circle.was-in-viewport.spwd-circle-1{
  transform: translateX(20px);
  opacity: 1;
}
.sp-we-do-circle.in-viewport.spwd-circle-2, .sp-we-do-circle.was-in-viewport.spwd-circle-2{
  opacity: 1;
}
.sp-we-do-circles{
  padding-right: 180px;
  padding-top: 66px;
  overflow: hidden;
}
.spwd-head{
  font-family: var(--pp);
  font-style: italic;
  font-weight: 400;
  font-size: 49px;
  line-height: 74.5%;
  text-align: center;
}
.spwd-body{
  font-weight: 500;
  font-size: 11px;
  line-height: 74.5%;
  text-align: center;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding-top: 13px;
}
.sp-ticker{
  transform: rotate(4.49deg);
  position: relative;
  bottom: -10vh;
  left: -10px;
  overflow: hidden;
  width: 110%;
}
.sp-ticker-wrapper{
  gap: 60px;
  overflow: hidden;
  background-color: #FFFFFF;
}
.sp-ticker-container{
  -webkit-animation: ticker-animation 20s linear infinite;
    animation: ticker-animation 20s linear infinite;
    display: inline-flex;
    flex-shrink: 0;
    gap: 60px;
    overflow: hidden;
    white-space: nowrap;
    padding: 8px 0;
}
.sp-ticker-item{
    flex-shrink: 0;
    white-space: nowrap;
}
.sp-ticker-item img{
  max-width: 110px;
  max-height: 24px;
  width: 100%;
  height: 100%;
}
@keyframes ticker-animation{
0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
100% {
    -webkit-transform: translateX(calc(-100% - 10px));
    transform: translateX(calc(-100% - 10px));
}
}
/* We Do Great CSS Ends */


/* Give Our Best CSS Starts */
.sp-give-our-best{
  padding-top: 60px;
  background-color: #D8031D;
}
.sp-give-our-best-wrapper{
  padding-left: 170px;
  padding-bottom: 50vh;
}
.sp-gob-heading{
  overflow: hidden;
  padding:100px 0 46px 0;
  width: 100%;
  position: sticky;
  top: 0px;
  z-index: 9;
  background-color: #D8031D;
}
.sp-gob-heading h4{
  
}
.sp-gob-heading h4{
  transform: translateY(100%);
  opacity: 0;
  transition: .6s ease all;
}
.sp-gob-heading.in-viewport h4, .sp-gob-heading.was-in-viewport h4{
  transform: translateY(0%);
  opacity: 1;
}
.sp-gob-awards{
  padding-top: 80px;
  opacity: 0;
  transform: translateY(100px);
  transition: .6s ease all;
  transition-delay: 0.3s;
  margin-bottom: -50vh;
  padding-bottom: 100px;
}
.sp-gob-awards.in-viewport, .sp-gob-awards.was-in-viewport{
  opacity: 1;
  transform: translateY(0px);
}
.sp-gob-awards-wrapper{
  gap: 24px;
}
.sp-gob-awards-award{
  height: 108px;
  border: 1px solid #FFFFFF;
  border-radius: 6px;
  width: 60%;
  background:transparent;
  transition: all .3s ease-out;
  position: relative;
  cursor: url('../images/cursor-eye.svg') 50 50, auto;
}
.sp-gob-awards-award:hover{
  background: #111111;
  border: 1px solid #111111;
  z-index: 1;
}
.sp-gob-awards-award-wrapper{
  padding-left: 36px;
  transition: all .3s ease-out;
  transform: translateX(-100px);
  gap: 32px;
}
.sp-gob-awards-award:hover .sp-gob-awards-award-wrapper{
  gap: 32px;
  transform: translateX(0px);
}
.sp-award-year{
  height: 58px; 
  overflow: hidden;
  border-radius: 50%;
  font-family: var(--pp);
  font-style: italic;
  font-weight: 200;
  font-size: 18px;
  line-height: 140%;
  color: #FFFFFF;
  background-color: #D8031D;
  width: 58px;
  opacity: 0;
  transition: all .3s ease-out;
}
.sp-gob-awards-award:hover .sp-award-year{
  opacity: 1;
}
.sp-award-text{
  font-weight: 400;
  font-size: 24px;
  line-height: 140%;
  color: #FFFFFF;
}
.sp-award-image{
  position: absolute;
  transition: -webkit-clip-path .3s ease-out;
  z-index: 3;
  transition: clip-path .3s ease-out;
  transition: clip-path .3s ease-out,-webkit-clip-path .3s ease-out;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%);
  clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%);
  width: 238px;
  height: 170px;
  border-radius: 6px;
  overflow: hidden;
}
.sp-award-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sp-gob-awards-award:hover .sp-award-image{
  -webkit-clip-path: polygon(0 100%,100% 100%,100% 0,0 0);
  clip-path: polygon(0 100%,100% 100%,100% 0,0 0);
}
/* Give Our Best CSS Ends */


/* SP Our Work CSS Starts */
.sp-works{
  padding-top: 120px;
  position: relative;
}
.sp-works-wrapper{
  padding-left: 170px;
  padding-right: 170px;
  align-items: baseline;
}
.sp-works-body{
  padding-top: 39px;
  max-width: 38ch;
  overflow: hidden;
}
.sp-works-body p{
  opacity: 0;
  transform: translateY(100%);
  transition: .6s ease all;
  transition-delay: 0.3s;
}
.sp-works-body.in-viewport p, .sp-works-body.was-in-viewport p{
  opacity: 1;
  transform: translateY(0%);
}
.sp-works-heading{
  max-width: 37ch;
  overflow: hidden;
  padding-bottom: 12px;
}
.sp-works-heading h2{
  opacity: 0;
  transform: translateY(100%);
  transition: .6s ease all;
}
.sp-works-heading.in-viewport h2, .sp-works-heading.was-in-viewport h2{
  opacity: 1;
  transform: translateY(0%);
}
.sp-works-cta{
  padding-top: 48px;
  overflow: hidden;
  opacity: 0;
  transition: .6s ease all;
  transition-delay: .6s;
}
.sp-works-cta.in-viewport, .sp-works-cta.was-in-viewport{
  opacity: 1;
}
.sp-works-work-heading{
  font-weight: 400;
  font-size: 28px;
  line-height: 106%;
  letter-spacing: -1.27947px;
  max-width: 19ch;
  margin-top: 20px;
  text-transform: capitalize;
  letter-spacing: 0.2px;
  word-spacing: 0.3px;
}
.sp-works-work-heading span{
  color: #D8031D;
	text-transform: capitalize;
}
.sp-works-work-image{
  border-radius: 7px;
  overflow: hidden;
  position: relative;
  max-width: 382px;
  height: 350px;
}
.sp-works-work-image.blog-img{
  height: 0;
  padding-top: 70%;
}
.sp-works-work-image.blog-img img{
  position: absolute;
  inset: 0;
}
.sp-works-work-cta{
  padding-top: 22px;
}
.sp-works-right-wrapper{
  gap: 136px;
}
.sp-works-left{
  position: sticky;
  top: 10vh;
  padding-bottom: 45vh;
}
.sp-works-right{
  position: relative;
  z-index: 8;
  top: 30px;
  transform: translateY(100px);
  opacity: 0;
  transition: .6s ease all;
  transition-delay: .6s;
}
.sp-works-right.in-viewport, .sp-works-right.was-in-viewport{
  transform: translateY(0px);
  opacity: 1;
}
.sp-works-work:last-child{
  padding-bottom: 80px;
}
.sp-works-work-image-wrapper a{
  cursor: url('../images/cursor-red.svg') 50 50, auto;
}
.sp-works-work-wrapper{
  align-items: start;
  gap: 10px;
}
/* SP Our Work CSS Ends */


/* Glad to meet you CSS Starts */
.sp-glad-meet{
  height: 100vh;
  overflow: hidden;
  padding-top: 120px;
  position: relative;
  background-color: #D8031D;
}
.sp-glad-meet-wrapper{
  padding-left: 170px;
  padding-top: 60px;
}
.sp-glad-content-heading{
  overflow: hidden;
  padding-bottom: 10px;
}
.sp-glad-content-heading h2{
  transform: translateY(100%);
  opacity: 0;
  transition: .6s ease all;
}
.sp-glad-content-heading.in-viewport h2, .sp-glad-content-heading.was-in-viewport h2{
  transform: translateY(0%);
  opacity: 1;
}
.sp-glad-content-body{
  padding-top: 46px;
  overflow: hidden;
}
.sp-glad-content-body p{
  transform: translateY(100%);
  opacity: 0;
  transition: .6s ease all;
  transition-delay: 0.3s;
}
.sp-glad-content-body.in-viewport p, .sp-glad-content-body.was-in-viewport p{
  transform: translateY(0%);
  opacity: 1;
}
.sp-glad-cta{
  padding-top: 69px;
  overflow: hidden;
  opacity: 0;
  transition: .6s ease all;
  transition-delay: .6s;
}
.sp-glad-cta.in-viewport, .sp-glad-cta.was-in-viewport{
  opacity: 1;
}
.sp-glad-cta a{
  color: #FFFFFF;
}
.sp-glad-content{
  max-width: 55ch;
}
.sp-glad-picture{
  width: 55vw;
  height: 55vw;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  right: -7%;
  bottom: -20%;
  transform: scale(0);
  transition: 1.2s ease all;
  transition-delay: .8s;
  transform-origin: bottom right;
}
.sp-glad-meet-wrapper.in-viewport .sp-glad-picture, .sp-glad-meet-wrapper.was-in-viewport .sp-glad-picture{
  transform: scale(1);
}
.sp-glad-picture a{
  cursor: url('../images/cursor-eye.svg') 10 25, auto;
  height: 100%;
}
/* Glad to meet you CSS Ends */


/* Get Reading CSS Starts */
.sp-get-reading{
  background-color: #111111;
  padding-top: 120px;
  position: relative;

}
.sp-get-reading-wrapper{
  padding-left: 170px;
  padding-right: 170px;
  align-items: baseline;
}
.sp-get-reading .sp-cta{
  color: #FFFFFF;
}
.sp-get-reading .sp-works-work-heading{
  color: #FFFFFF;
}
.sp-get-reading-read-body p{
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  color: #F5F3EE;
}
.sp-get-reading-read-body{
  max-width: 40ch;
  padding-top: 22px;
}
/* Get Reading CSS Ends */


/* SP Are You CSS Starts */
.sp-are-you{
  padding-top: 96px;
  padding-bottom: 120px;
}
.sp-are-you-heading{
  font-weight: 300;
  font-size: 48px;
  line-height: 95.5%;
  text-align: center;
  color: #111111;
}
.sp-are-you-heading span{
  font-family: var(--pp);
  font-weight: 200;
  font-style: italic;
}
.tabcontent {
  display: none;
  padding-top: 100px;
  padding-left: 190px;
  padding-right: 190px;
  border-top: none;
  animation: fadeEffect 1s;
}
.sp-are-you-tab-btns{
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 140%;
color: #6F6F6F;
gap: 50px;
padding-top: 36px;
flex-wrap: wrap;
}
.sp-are-you-tab-btns .tablinks{
  background-color: transparent;
  border: none;
  outline: none;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 140%;
  color: #515151;
    text-transform: uppercase;
  transition: .4s ease all;
  /* cursor: none; */
    letter-spacing: 2px;
    position: relative;
}
.sp-are-you-tab-btns .tablinks.active{
  color:#D8031D ; 
}
.sp-are-you-tab-btns .tablinks:hover{
  color:#D8031D;
}
.sp-are-you-tab-btns .tablinks::before {
    content: '';
    position: absolute;
    top: 6px;
    left: -15px;
    width: 6.857px;
    height: 6.857px;
    background-color: #B8B8B8;
    border-radius: 50%;
    transition: .4s ease all;
}
.sp-are-you-tab-btns .tablinks.active::before {
    background-color:#D8031D
}
.sp-are-you-molecules{
  width: 240px;
  height: 216px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.say-molecule{
  position: absolute;
  transition: .4s ease all;
}
.say-molecule-1{
  width: 136px;
  height: 136px;
  border-radius: 50%;
  background-color: #E91630;
  z-index: 3;
}

 .say-molecules-3 .say-molecule-3{
  width: 160px;
  height: 160px;
} 
.say-molecule-2{
  width: 176px;
  height: 176px;
  background-color: #D8031D;
  border-radius: 50%;
  z-index: 2;
  opacity: 0;
}
.say-molecule-3{
  background-color: #CB1228;
  width: 117px;
  height: 117px;
  border-radius: 50%;
  opacity: 0;
  z-index: 1;
}
.say-molecule-text{
  position: relative;
  z-index: 4;
  font-weight: 400;
  font-size: 24px;
  line-height: 140%;
  color: #FFFFFF;
  opacity: 0;
  transition: .4s ease all;
  transition-delay: 1s;
}
.sp-are-you-molecules:hover .say-molecule{
  transform: translate(0px, 0px) !important;
  transition-delay: 0s;
}
.sp-are-you-molecules:hover .say-molecule-2{
  z-index: 3;
}
/* SP Are You CSS Ends */


/* SP Services CSS Starts */
.services-banner{
  background: #111111;
  position: relative;
}
.services-banner-wrapper{
  padding: 0 80px;
  padding-top: 160px;
}
.services-banner-heading{
  overflow: hidden;
}
.services-banner-heading h1 {
    font-weight: 300;
    font-size: 90px;
    line-height: 95.5%;
    color: #111;
    padding-bottom: 11px;
    color: #fff;
}
.services-banner-heading h2, .services-banner-heading h1{
  transition: 1.4s ease all;
  transform: translateY(100%);
  opacity: 0;
    text-align: left;
}
.services-banner-heading.active h2, .services-banner-heading.active h1{
  transform: translateY(0%);
  opacity: 1;
}
.services-banner-bottom-body{
  max-width: 46ch;
  overflow: hidden;
  position: sticky;
  top: 100px;
  padding-bottom: 20%;
}
.services-banner-bottom-body p{
  transition: 1.4s ease all;
  transition-delay: .5s;
  transform: translateY(100%);
  opacity: 0;
  padding-top: 46px;
}
.services-banner-bottom-body.active p{
  transform: translateY(0%);
  opacity: 1;
}
.services-banner-bottom-body p a{
  display: contents;
  color: #D8031D;
  text-decoration: underline;
}
.services-banner-bottom{
  padding-top: 46px;
}
.services-banner-bottom-wrapper{
  align-items: start;
}
.services-service-image{
  position: relative;
  padding-top: 32%;
  overflow: hidden;
  border-radius: 7px;
  margin-top: 42px;
}
/* .services-service-image:after{
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(216, 3, 29, 0.57) 0%, rgba(216, 3, 29, 0.57) 100%);
} */
.services-service-image img{
  position: absolute;
  inset: 0px;
}
.services-explainer{
  width: 60%;
  transition: 1.4s ease all;
  transition-delay: .9s;
  opacity: 0;
  transform: translateY(20%);
  margin-top: 20%;
}
.services-explainer.active{
  opacity: 1;
  transform: translateY(0%);
}
.services-explainer-wrapper{
  gap: 100px;
}
.services-service-body{
  padding-top: 17px;
}
.services-service-bullets{
  padding-top: 18px;
}
.services-service-bullets ul li{
  font-weight: 400;
  font-size: 14px;
  line-height: 172%;
  color: #F5F3EE;
  list-style: none;
  position: relative;
  padding-left: 15px;
}
.services-service-bullets ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 40%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #F5F3EE;
}
.services-service-we-answer{
  padding-top: 10px;
}
.services-service-we-answer a{
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  text-decoration-line: underline;
  color: #D8031D;
}
.services-service-cta{
  padding-top: 52px;
}
.services-service-cta a{
  color: #FFFFFF;
}
.services-service-image-overlay{
  height: 100%;
  width: 100%;
  position: absolute;
  inset: 0px;
  z-index: -1;
  opacity: 0;
  transition: .4s ease all;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.67), rgba(0, 0, 0, 0.67)); 
}
.services-service-image-overlay a{
  color: #FFFFFF;
}
.services-service-image:hover .services-service-image-overlay{
   z-index: 1;
   opacity: 1;
}
.services-service:last-child{
  padding-bottom: 100px;
}
.services-banner .questions, .questions.specific-ques{
    position: fixed;
    inset: 0px;
    background: transparent;
    z-index: 750;
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    padding:120px 170px;
}
.questions.specific-ques{
  padding-right: 20px;
  padding-bottom: 20px;
}
.services-banner .single-question, .questions.specific-ques .single-question{
    position: absolute;
    background:#F6F2F3;
    border-radius:7px;
    padding: 2em;
    max-width: 40em;
    pointer-events: all;
    display: flex;
    gap: 0.5em;
    flex-direction: column;
    transform: translateY(15vh) scale(1) rotate(0.001deg);
    transition: 0.7s cubic-bezier(0.9, 0.03, 0.47, 0.89);
    margin-left: min(4vw, 4em);
    opacity: 0;
    visibility: hidden;
}
.services-banner .single-question.active, .questions.specific-ques .single-question.active{
    opacity: 1;
    transform: translateY(0%) scale(1) rotate(0.001deg);
    z-index: 2;
    visibility: visible;
}
.services-banner .single-question .close, .questions.specific-ques .single-question .close{
    position: absolute;
    right: 2em;
    top: 2em;
    width: 2em;
    height: 2em;
    background:#D8031D;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.9, 0.03, 0.47, 0.89);
    transform: rotate(0.001deg) scale(1);
}
.services-banner .single-question .close:hover, .questions.specific-ques .single-question .close:hover{
  transform: rotate(90deg) scale(1.1);
}
.services-banner .single-question .close .bar, .questions.specific-ques .single-question .close .bar{
  width: 40%;
  background: #FFFFFF;
  position: absolute;
  height: 1px;
  transform: rotate(45deg);
}
.services-banner .single-question .close .bar:nth-child(2), .questions.specific-ques .single-question .close .bar:nth-child(2){
  transform: rotate(-45deg);
}
.services-banner .single-question h4, .questions.specific-ques .single-question h4{
  font-weight: 400;
  font-size: 24px;
  line-height: 115%;
  letter-spacing: 1px;
  max-width: 25ch;
}
.services-banner .single-question ul, .questions.specific-ques .single-question ul{
  padding-top: 30px;
  padding-left: 1.4em;
}
.services-banner .single-question ul li, .questions.specific-ques .single-question ul li{
  color: #6F6F6F;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
}
/* SP Services CSS Ends */


/* SP About CSS Starts  */
.sp-about-banner{
  background-color: #111111;
  position: relative;
  height: 100vh;
}
.sp-about-banner-wrapper{
  padding-top: 200px;
  padding-left: 170px;
  position: relative;
  overflow: hidden;
  padding-bottom: 100px;
  /*z-index: 2;*/
}
.sp-about-banner-wrap-element{
  height: 200px;
  background-color: white;
  /*margin-top: -200px;*/
  position: relative;
  z-index: 2;
}
.sp-about-banner-heading{
  overflow: hidden;
  padding-bottom: 10px;
}
.sp-about-banner-heading h1{
  font-weight: 300;
  font-size: 70px;
  line-height: 108%;
  letter-spacing: -1px;
  color: #FFFFFF;
  transition: 1.4s ease all;
  transform: translateY(100%);
  opacity: 0;
}
.sp-about-banner-heading.active h1{
  transform: translateY(0%);
  opacity: 1;
}
.sp-about-banner-heading h1 span{
  font-family: var(--pp);
  font-weight: 200;
  font-style: italic;
}
.sp-about-banner-body{
  padding-top: 46px;
  overflow: hidden;
}
.sp-about-banner-body p{
  transition: 1.4s ease all;
  transform: translateY(100%);
  opacity: 0;
  transition-delay: .5s;
}
.sp-about-banner-body.active p{
  transform: translateY(0%);
  opacity: 1;
}
.sp-about-content-wrapper{
  max-width: 40ch;
}
.sp-about-content-wrapper.extended {
    max-width: 44ch;
}
.sp-about-banner-wrapper.about-page .sp-about-content-wrapper{
  max-width: 59ch;
}
.sp-about-image-wrapper{
  width: 45vw;
  height: 45vw;
}
.sp-about-image-wrapper svg{
  position: absolute;
  height: 100%;
  width: 100%;
  inset: 0px;
}
.sp-about-image{
  position: relative;
  left: 50px;
  z-index: 3;
}
.sp-about-image img{
  overflow: hidden;
  border-radius: 50%;
}
.sp-about-orbit{
  width: 9vw;
  height: 9vw;
  background-color: #D8031D;
  border-radius: 50%;
  position: absolute;
  inset: 0;
  transform: rotate(60deg) translate(-22.5vw);
  margin: auto;
  /* animation: circle 12s linear infinite; */
}
.what-is-sp-wrapper{
  width: 50%;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 200px;
  padding-top: 5px;
}
.what-is-sp-wrapper.in-viewport .what-is-sp-label, .what-is-sp-wrapper.was-in-viewport .what-is-sp-label{
  transform: translateY(0%);
  opacity: 1;
}
.what-is-sp-label{
  font-weight: 600;
  font-size: 14px;
  line-height: 74.5%;
  text-align: center;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #111111;
  transform: translateY(100%);
  opacity: 0;
  transition: .6s ease all;
}
.what-is-sp-heading{
  padding-top: 48px;
  overflow: hidden;
}
.what-is-sp-heading a{
  display: inline;
}
.what-is-sp-heading h2{
  font-weight: 300;
  font-size: 48px;
  line-height: 120%;
  transform: translateY(100%);
  opacity: 0;
  transition:.6s ease all;
  transition-delay: .6s;
}
.what-is-sp-wrapper.in-viewport .what-is-sp-heading h2, .what-is-sp-wrapper.was-in-viewport .what-is-sp-heading h2{
  transform: translateY(0%);
  opacity: 1;
}
.what-is-sp-heading h2 span{
  color: #D8031D;
  font-weight: 400;
}
.what-we-do-sp{
  position: relative;
  height: 100vh;
  background-color:#D8031D;
  overflow: hidden;
}
.what-we-do-sp-wrapper{
  padding-top: 25vh;
  padding-left: 170px;
}
.what-we-do-body{
  padding-top: 46px;
  overflow: hidden;
}
.what-we-do-body p{
  transition: .6s ease all;
  transition-delay: .6s;
}
.what-we-do-content.in-viewport .what-we-do-body p, .what-we-do-content.was-in-viewport .what-we-do-body p{
  opacity: 1;
  transform: translateY(0%);
}
.what-we-do-body p button{
  text-decoration: underline;
  background-color: transparent;
  padding: 0;
  font-size: 18px;
  color: #FFFFFF;
  border: none;
  outline: none;
}
.what-we-do-body p button{
  /* cursor: none; */
}
.what-we-do-button{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 26px;
  margin-top: 36px;
}
.what-we-do-button button{
  color: #FFF;
  leading-trim: both;
  text-edge: cap;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 21px */
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  background-color: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  opacity: 0.5;
  transition: 0.6s all ease;
}
.what-we-do-button button.active{
  opacity: 1;
}
.what-we-do-button button svg{
  width: 6px;
  height: auto;
  max-height: 100%;
}
.what-we-do-tenets{
  width: 65vw;
  height: 65vw;
  background-color: #CA0315;
  border-radius: 50%;
  position: absolute;
  right: -10%;
  bottom: -50%;
  overflow: hidden;
  transform: scale(0);
  opacity: 0;
  transition: 1.2s ease all;
  transition-delay: .8s;
  transform-origin: bottom right;
}
.what-we-do-sp-wrapper.in-viewport .what-we-do-tenets, .what-we-do-sp-wrapper.was-in-viewport .what-we-do-tenets{
  transform: scale(1);
  opacity: 1;
}
.what-we-do-tenet{
  display: none;
  animation: fadeEffect 1s;
}
.what-we-do-content{
  max-width: 50ch;
}
.what-we-do-heading{
  overflow: hidden;
}
.what-we-do-heading h2{
  transition: .6s ease all;
}
.what-we-do-content.in-viewport .what-we-do-heading h2, .what-we-do-content.was-in-viewport .what-we-do-heading h2{
  opacity: 1;
  transform: translateY(0%);
}
.simple-story{
  background-color:#111111;
  height: 101vh;
}
.simple-story-cta a{
  color: #FFFFFF;
}
.simple-story-wrapper{
  padding-left: 170px;
  padding-top: 120px;
}
.simple-story-body{
  padding-top: 58px;
  overflow: hidden;
  max-width: 88ch;
}
.simple-story-body p{
  opacity: 0;
  transform: translateY(100%);
  transition: .6s ease all;
  transition-delay: .6s;
}
.simple-story-wrapper.in-viewport .simple-story-body p, .simple-story-wrapper.was-in-viewport .simple-story-body p{
  opacity: 1;
  transform: translateY(0%);
}
.simple-story-cta{
  padding-top: 64px;
  overflow: hidden;
}
.simple-story-cta a{
  opacity: 0;
  transform: translateY(100%);
  transition: .6s ease all;
  transition-delay: .9s;
}
.simple-story-wrapper.in-viewport .simple-story-cta a, .simple-story-wrapper.was-in-viewport .simple-story-cta a{
  opacity: 1;
  transform: translateY(0%);
}
.simple-story-heading{
  max-width: 70ch;
  overflow: hidden;
  padding-bottom: 15px;
}
.simple-story-heading h2{
  opacity: 0;
  transform: translateY(100%);
  transition: .6s ease all;
}
.simple-story-wrapper.in-viewport .simple-story-heading h2, .simple-story-wrapper.was-in-viewport .simple-story-heading h2{
  opacity: 1;
  transform: translateY(0%);
}
.what-we-do-tenet-head{
  text-align: left;
  font-weight: 300;
  font-size: 48px;
  line-height: 95.5%;
  color: #FFFFFF;
}
.what-we-do-tenet-head sup{
  font-size: 16px;
}
.what-we-do-tenet-body{
  text-align: left;
  padding-top: 36px;
}
.what-we-do-tenets-wrapper{
  width: 55ch;
  padding-top: 200px;
  padding-left: 10vw;
}
/* SP About CSS Ends */

/* SP Service Specific CSS Starts */
.sp-service-spec-banner .sp-about-banner-wrapper{
  padding-top: 111px;
}
.sp-service-spec-banner .sp-about-banner-heading span.big{
  font-family: var(--pp);
  font-size: 90px;
  font-style: italic;
  font-weight: 200;
  line-height: 103%;
}
.sp-service-spec-banner .sp-about-banner-heading h1{
  color: #111111;
  text-align: start;
}
.sp-service-spec-banner .sp-about-content-wrapper{
  position: relative;
  top: 56px;
}
.sp-service-spec-banner .sp-about-banner-body p{
   color: #6F6F6F;
}
.sp-service-spec-cta{
  padding-top: 58px;
  overflow: hidden;
}
.sp-service-spec-cta a{
  color: #D8031D;
  opacity: 0;
  transform: translateY(100%);
  transition: 1.4s ease all;
  transition-delay: .8s;
}
.sp-service-spec-cta.active a{
  opacity: 1;
  transform: translateY(0%);
}
.sp-service-deliverables-wrapper{
  padding:80px 170px;
  overflow: hidden;
  width: 100%;
}
.sp-service-deliv-numbers{
  position: relative;
  right: 15%;
}
.sp-service-deliv-heading{
  overflow: hidden;
}
.sp-service-deliv-heading h5{
  opacity: 0;
  transform: translateY(100%);
  transition: .6s ease all;
}
.sp-service-deliverables-wrapper.in-viewport .sp-service-deliv-heading h5, .sp-service-deliverables-wrapper.was-in-viewport .sp-service-deliv-heading h5{
  opacity: 1;
  transform: translateY(0%);
}
.sp-serv-deliv-deliverables-wrapper{
  padding-top: 68px;
}
.sp-service-deliv-body-wrapper{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
}
.sp-service-deliv-body{
  padding-top: 46px;
  overflow: hidden;
}
.sp-service-deliv-numbers ul{
  display: flex;
  gap: 18px;
  list-style: none;
  align-items: flex-end;
}
.sp-service-deliv-numbers ul li{
  color: #6F6F6F;
  font-size: 18px;
  font-weight: 400;
}
.sp-service-deliv-numbers ul li.active{
  color: #D8031D;

}
.sp-service-deliv-body p{
  color: #6F6F6F;
  opacity: 0;
  max-width: 58ch;
  transform: translateY(100%);
  transition: .6s ease all;
  transition-delay: .6s;
}
.sp-service-deliverables-wrapper.in-viewport .sp-service-deliv-body p, .sp-service-deliverables-wrapper.was-in-viewport .sp-service-deliv-body p{
  opacity: 1;
  transform: translateY(0%);
}
.sp-serv-deliv-deliverable{
  background: transparent;
  border-radius: 26.8644px;
  /* width: 32%; */
  min-width: 500px;
  border: 1px solid #E3E3E3;
  border-radius: 6px;
}
.sp-serv-deliv-deliverable.active{
  background-color: #F8F7F7;
}
.sp-serv-deliv-deliv-head h6{
  font-weight: 450;
  font-size: 28px;
  line-height: 150%;
  /* letter-spacing: 2px; */
  /* text-transform: uppercase; */
  color: #111111;
  font-family: var(--aspekta);
}
.sp-serv-deliv-deliv-top-head p{
  font-size: 30px;
  font-style: italic;
  letter-spacing: 1.6px;
  font-weight: 200;
  font-family: var(--PP);
}
.sp-serv-deliv-deliv-body{
  padding-top: 10px;
}
.sp-serv-deliv-deliv-body p{
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  color: #6F6F6F;
  font-family: var(--aspekta);

}
.sp-serv-deliv-deliverable.active .sp-serv-deliv-deliv-top-head p{
  color: #D8031D;
}
.sp-serv-deliv-deliverable.active .sp-serv-deliv-deliv-head h6{
  color: #D8031D;
}
.sp-serv-deliv-deliverable.active .sp-serv-deliv-deliv-body p{
  color: #111111;
}
.sp-serv-deliv-deliv-cta{
  padding-top: 30px;
}
.sp-serv-deliv-deliv-cta{
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease all;
}
.sp-serv-deliv-deliverable.active .sp-serv-deliv-deliv-cta{
  opacity: 1;
  visibility: visible;
}
.sp-serv-deliv-deliv-cta p{
  color: #D8031D;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
}
.sp-serv-deliv-deliverable:hover .sp-serv-deliv-deliv-cta{
  opacity: 1;
  visibility: visible;
}
.sp-serv-deliv-deliverable-wrapper{
  display: flex;
  flex-direction: column;
  gap: 54px;
  padding: 30px 24px;
  transition: 0.8s all ease;
  cursor: url(../images/cursor-eye-small.svg) 50 50, auto;
}
.sp-serv-deliv-deliverables-wrapper{
  gap: 14px;
  align-items: stretch;
  flex-wrap: nowrap;
}
.sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(1){
  opacity: 0;
  transform: translateX(-20px);
  transition: .3s ease all;
}
.sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(2){
  opacity: 0;
  transform: translateX(-100px);
  transition: .3s ease all;
}
.sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(3){
  opacity: 0;
  transform: translateX(-150px);
  transition: .3s ease all;
}
.sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(4){
  opacity: 0;
  transform: translateX(-20px);
  transition: .3s ease all;
}
.sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(5){
  opacity: 0;
  transform: translateX(-100px);
  transition: .3s ease all;
}
.sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(6){
  opacity: 0;
  transform: translateX(-100px);
  transition: .3s ease all;
}
.sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(7){
  opacity: 0;
  transform: translateX(-100px);
  transition: .3s ease all;
}
.sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(8){
  opacity: 0;
  transform: translateX(-100px);
  transition: .3s ease all;
}
.sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(9){
  opacity: 0;
  transform: translateX(-100px);
  transition: .3s ease all;
}
.sp-service-deliverables-wrapper.in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(1), .sp-service-deliverables-wrapper.was-in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(1){
  opacity: 1;
  transform: translateX(0px);
}
.sp-service-deliverables-wrapper.in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(2), .sp-service-deliverables-wrapper.was-in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(2){
  opacity: 1;
  transform: translateX(0px);
}
.sp-service-deliverables-wrapper.in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(3), .sp-service-deliverables-wrapper.was-in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(3){
  opacity: 1;
  transform: translateX(0px);
}
.sp-service-deliverables-wrapper.in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(4), .sp-service-deliverables-wrapper.was-in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(4){
  opacity: 1;
  transform: translateX(0px);
}
.sp-service-deliverables-wrapper.in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(5), .sp-service-deliverables-wrapper.was-in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(5){
  opacity: 1;
  transform: translateX(0px);
}
.sp-service-deliverables-wrapper.in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(6), .sp-service-deliverables-wrapper.was-in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(6){
  opacity: 1;
  transform: translateX(0px);
}
.sp-service-deliverables-wrapper.in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(7), .sp-service-deliverables-wrapper.was-in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(7){
  opacity: 1;
  transform: translateX(0px);
}
.sp-service-deliverables-wrapper.in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(8), .sp-service-deliverables-wrapper.was-in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(8){
  opacity: 1;
  transform: translateX(0px);
}
.sp-service-deliverables-wrapper.in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(9), .sp-service-deliverables-wrapper.was-in-viewport .sp-serv-deliv-deliverables-wrapper .sp-serv-deliv-deliverable:nth-child(9){
  opacity: 1;
  transform: translateX(0px);
}
.sp-how-we-do-svg{
  position: relative;
    top: 30px;
}
.sp-how-we-do-circle{
   width: 229px;
   height: 229px;
   overflow: hidden;
   border-radius: 50%;
   background-color: #D8031D;
   position: absolute;
   inset: 0px;
   margin: auto;
   transition: .4s ease all;
}
.sp-how-we-do-circle:hover{
  background-color: #F7F2F3;
}
.sp-how-we-do-circle.active{
  pointer-events: none;
}
.sp-hwd-circle-1{
  left: 55vw;
  bottom: 26vw;
  background-color: #F7F2F3;
}
.sp-hwd-circle-1:hover{
  background-color: #D8031D;
}
.sp-hwd-circle-2{
  left: 38vw;
  top: 38vw;
}
.sp-hwd-circle-3{
  top: 26vw;
  right: 50vw;
  background-color: #F7F2F3;
}
.sp-hwd-circle-3:hover{
  background-color: #D8031D;
}
.sp-how-we-do-svg svg{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.sp-hwd-circle-head{
  font-weight: 600;
  font-size: 14px;
  line-height: 74.5%;
  text-align: center;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: #D8031D;
  transition: .4s ease all;
}
.sp-how-we-do-circle:hover .sp-hwd-circle-head{
  color: #F7F2F3;
}
.sp-hwd-circle-body{
  font-family: var(--pp);
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 74.5%;
  text-align: center;
  color: #D8031D;
  margin-top: 17px;
  transition: .4s ease all;
}
.sp-how-we-do-circle-wrapper{
  height: 100%;
}
.sp-how-we-do-circle:hover  .sp-hwd-circle-body{
  color: #F7F2F3;
}
.sp-hwd-circle-2 .sp-hwd-circle-body, .sp-hwd-circle-2 .sp-hwd-circle-head{
  color: #FFFFFF;
  transition: .4s ease all;
}
.sp-hwd-circle-2:hover .sp-hwd-circle-body, .sp-hwd-circle-2:hover .sp-hwd-circle-head{
  color: #D8031D;
}

.sp-how-we-do-cont{
  background-color: #D8031D;
  position: fixed;
  width: 100%;
  height: 95%;
  z-index: 9999999;
  top: 0;
  left: 100%;
  bottom: 100%;
  right: 0;
  pointer-events: none;
  overflow: hidden;
  -webkit-transition: left 0s linear .9s,bottom 0s linear .9s,-webkit-clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89);
  transition: left 0s linear .9s,bottom 0s linear .75s,-webkit-clip-path .75s cubic-bezier(0.9, 0.03, 0.47, 0.89);
  -o-transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear .9s,bottom 0s linear .9s;
  transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear .9s,bottom 0s linear .9s;
  transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear .9s,bottom 0s linear .9s,-webkit-clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89);
}
.sp-how-we-do-cont.active .what-we-do-heading h2{
  opacity: 1;
  transform: translateY(0%);
}
.sp-how-we-do-cont.active .what-we-do-body p{
  opacity: 1;
  transform: translateY(0%);
}
.sp-how-we-do-cont.active .what-we-do-tenets{
  transform: scale(1);
  opacity: 1;
}
.sp-hwd-circle-1 .sp-how-we-do-cont{
  -webkit-clip-path: circle(0% at 78vw 9vw);
  clip-path: circle(0% at 78vw 9vw);
}
.sp-hwd-circle-1 .sp-how-we-do-cont.active{
  -webkit-clip-path: circle(140% at 78vw 9vw);
  clip-path: circle(140% at 78vw 9vw);
}
.sp-hwd-circle-2 .sp-how-we-do-cont{
  -webkit-clip-path: circle(0% at 68vw 40vw);
  clip-path: circle(0% at 68vw 40vw);
}
.sp-hwd-circle-2 .sp-how-we-do-cont.active{
  -webkit-clip-path: circle(140% at 68vw 40vw);
  clip-path: circle(140% at 68vw 40vw);
}
.sp-hwd-circle-3 .sp-how-we-do-cont{
  -webkit-clip-path: circle(0% at 23vw 35vw);
  clip-path: circle(0% at 23vw 35vw);
}
.sp-hwd-circle-3 .sp-how-we-do-cont.active{
  -webkit-clip-path: circle(140% at 23vw 35vw);
  clip-path: circle(140% at 23vw 35vw);
}
.sp-how-we-do-cont.active{
  left: 0;
  bottom: 0;
  -webkit-transition: left 0s linear 0s,bottom 0s linear 0s,-webkit-clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89);
  transition: left 0s linear 0s,bottom 0s linear 0s,-webkit-clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89);
  -o-transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear 0s,bottom 0s linear 0s;
  transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear 0s,bottom 0s linear 0s;
  transition: clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89),left 0s linear 0s,bottom 0s linear 0s,-webkit-clip-path .9s cubic-bezier(0.9, 0.03, 0.47, 0.89);
  pointer-events: auto;
}
.sp-how-we-do-cross{
    position: absolute;
    right: 3em;
    top: 8em;
    width: 3em;
    height: 3em;
    background: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
    transition: transform 0.4s cubic-bezier(0.9, 0.03, 0.47, 0.89);
    transform: rotate(0.001deg) scale(1);
}
.sp-how-we-do-cross:hover{
  transform: rotate(90deg);
}
.sp-how-we-do-cross .sp-how-we-do-bar{
    width: 40%;
    background: #111111;
    position: absolute;
    height: 1px;
    transform: rotate(45deg);
}
.sp-how-we-do-cross .sp-how-we-do-bar:nth-child(2){
  transform: rotate(-45deg);
}
.sps-wrapper{
  padding-top: 50px;
}
.sps-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.sps-top{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding-bottom: 114px;
}
.sps-container.card-container .sps-top{
  flex-direction: column;
  gap: 86px;
}
.sps-top .head p{
  color: var(--SP-BLACK, #111);
  leading-trim: both;
  text-edge: cap;
  font-feature-settings: 'ss02' on, 'ss03' on, 'clig' off, 'liga' off;
  font-size: 42px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 50.4px */
  letter-spacing: -1.279px;
}
.sps-top .head p span{
  color: #D8031D;
}
.sps-top .sub-head{
  margin-top: 32px;
  max-width: 50ch;
}
.sps-top .sub-head p {
  color: #6F6F6F;
  font-feature-settings: 'ss02' on, 'clig' off, 'liga' off;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: 1px;
}
.sps-top .cta{
  margin-top: 78px;
}
.sps-top .cta a{
  color: #D8031D;
}
.sps-top .spst-left{
  width: 50%;
}
.sps-container.card-container .spst-left{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
}
.sps-container.card-container .spst-left .head{
  width: 50%;
}

.sps-top .spst-right{
  width: 40%;
}
.sps-container.card-container .spst-right .cta.sps-mobile-cta{
  display: none;
}
.sps-container.card-container .sps-top .spst-right{
  width: 100%;
}
.spst-right{
  display: flex;
  align-items: flex-end;
}
.spst-right ul{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}
.spst-right ul li{
  position: relative;
  color: #272727;
  leading-trim: both;
  text-edge: cap;
  font-feature-settings: 'ss03' on, 'ss02' on, 'clig' off, 'liga' off;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 18px */
  letter-spacing: 1px;
  width: 100%;
}
.spst-right ul li:after{
  content: "";
  width: 100%;
  height: 1px;
  background-color: #EDEDED;
  position: absolute;
  left: 0;
  top: -15px;
}
.spst-right ul li:first-child::after{
  display: none;
}
.spstr-card-container{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
}

.spstr-card{
  border-radius: 16px;
    background: #F8F7F7;
    display: flex;
    flex-direction: column;
    justify-content: end;
    position: relative;
    height: 18vmax;
    min-height: 300px;
    padding: 20px;
}
/* .spstr-card-hovered{
  padding: 20px;
} */
.spstrc-top {
  display: flex;
  align-items: end;
  position: absolute;
  top: 20px;
  right: 20px;
}
.spstrc-top .spstrc-dot{
  width: 10px;
  height: 10px;
  background-color: #111111;
  border-radius: 50%;
  margin-left: auto;
  transition: all .3s ease;
}

.spstrc-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  transition: all .3s ease;
  padding-top: 50px;
  
}
.spstrc-c-head h6{
  font-size: 20px;
  color: #111111;
  text-transform: capitalize;
  font-family: var(--aspekta);
  font-weight: 400;
}
.spstrc-c-body{
  display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: all .4s;
}
.spstrc-c-body>div{
  overflow: hidden;
}
.spstrc-c-body p{
  font-size: 14px;
  font-weight: 400;
  color: #6F6F6F;
  font-family: var(--aspekta);
  letter-spacing: .8px;
}
.spstr-card:hover .spstrc-top .spstrc-dot{
  background-color:#D8031D;
}
.spstr-card:hover .spstrc-c-body{
  grid-template-rows: 1fr;
    opacity: 1;
}
.spstr-card:hover .spstrc-c-head h6{
  color: #D8031D;
}

.sps-mid{
  background: #111;
  padding-top: 50px;
  padding-bottom: 60px;
}
.service-highlights .sh-head p{
  color: #FFF;
  leading-trim: both;
  text-edge: cap;
  font-feature-settings: 'ss02' on, 'ss03' on, 'clig' off, 'liga' off;
  font-size: 26px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 31.2px */
}
.service-highlights .sh-highlights{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-column-gap: 68px;
  grid-row-gap: 40px;
  margin-top: 56px;
}
.service-highlights .sh-highlights a{
  color: #B0B0B0;
  leading-trim: both;
  text-edge: cap;
  font-feature-settings: 'clig' off, 'liga' off; 
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 18px */
  letter-spacing: 2px;
  text-transform: uppercase;
}
.sps-bottom{
  background-color: #F7F2F3 !important;
  padding: 74px 0;
}
.related-service{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.related-service .rs-head{
  width: 20%;
}
.related-service .rs-services{
  display: flex;
  flex-wrap: wrap;
  grid-column-gap: 33px;
  grid-row-gap: 34px;
  align-items: center;
  justify-content: flex-end;
}
.related-service .rs-head p{
  color: #D8031D;
  leading-trim: both;
  text-edge: cap;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 21px */
  letter-spacing: 2px;
  text-transform: uppercase;
}
.related-service .rs-services a{
  color: #444;
  leading-trim: both;
  text-edge: cap;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 21px */
  letter-spacing: 1px;
  transition: all .3s ease;
  text-decoration: underline;
  transition: all .3s ease;
}
.related-service .rs-services a:hover{
  color: #D8031D;
  /* font-weight: 600; */
  -webkit-text-stroke: .3px #D8031D;
  /* text-decoration: underline; */
}

.related-section{
  padding-bottom: 80px;
  background-color: #F7F2F3;
}
.sis-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 200px;
  border-radius: 13px;
  background: var(--SP-WHITE, #FFF);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
}
.si-sticky{
  position: sticky;
  top: 88%;
  z-index: 49;
  background-color: transparent !important;
  margin-bottom: 30px;
}
.sis-wrapper a{
  color: #515151;
  leading-trim: both;
  text-edge: cap;
  font-feature-settings: 'clig' off, 'liga' off;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 95.5%; /* 15.28px */
  position: relative;
}
.sis-wrapper a::after{
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: -14px;
  top: 4px;
  background-color: #B8B8B8;
  border-radius: 50%;
}
.sis-wrapper .item.active a::after{
  background-color: #D8031D;
}
.sis-wrapper .item.active a{
  color: #D8031D;
}
.sp-choice-slider .owl-theme .owl-nav{
  margin-top: 20px;
}
.owl-theme .owl-nav [class*=owl-]:hover{
  background: transparent;
}

/* SP Service Specific CSS Ends */

/* SP Work Main CSS Starts */
.sp-work-we-do{
   background-color: #FFFFFF;
   padding-bottom: 50px;
}

.sp-work-we-do .sp-quite-simple-heading h2{
  color: #111111;
}
.sp-work-we-do .sp-quite-simple-body p{
  color: #6F6F6F;
}
.sp-work-we-do .spwd-circle-1{
  background-color: #111111;
}
.sp-work-we-do .spwd-circle-3{
  background-color: #111111;
}
.sp-work-we-do .sp-ticker-wrapper{
  background-color: #D8031D;
}
.sp-work-we-do .sp-ticker{
  transform: rotate(7.46deg);
}
.sp-work-we-do .sp-ticker-item img{
  filter: invert(1);
}
.yg-quote-section{
  height: 101vh;
  background-color: #111111;
  overflow: hidden;
}
.yg-quote-body{
  overflow: hidden;
}
.sp-simple-choice-cta{
  text-align: center;
  margin-top: 34px;
}
.sp-choice-slider{
  margin-top: 150px;
}
.sp-simple-choice-cta a{
  color: #fff;
}
.yg-quote-body h3{
  font-weight: 300;
  font-size: 48px;
  line-height: 120%;
  color: #FFFFFF;
  transform: translateY(100%);
  opacity: 0;
  transition: .6s ease all;
  transition-delay: 0.3s;
}
.yg-quote-body.in-viewport h3, .yg-quote-body.was-in-viewport h3{
  transform: translateY(0%);
  opacity: 1;
}
.yg-quote-label{
  padding-top: 46px;
  overflow: hidden;
}
.yg-quote-label span{
  font-weight: 600;
  font-size: 18px;
  line-height: 150%;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #D8031D;
  display: block;
  transform: translateY(100%);
  opacity: 0;
  transition: .6s ease all;
  transition-delay: 0.5s;
}
.yg-quote-label.in-viewport span, .yg-quote-label.was-in-viewport span{
  transform: translateY(0%);
  opacity: 1;
}
.owl-item.active .yg-quote-body h3, .owl-item.active .yg-quote-label span{
  transform: translateY(0%);
  opacity: 1;
}
.yg-quote-section-wrapper{
  padding-left: 170px;
}
.yg-quote-body{
  min-width: 965px;
  width: 76%;
}
.sp-wm-banner-heading{
  max-width: 35ch;
  overflow: hidden;
}
.sp-wm-banner-heading h2{
  transform: translateY(100%);
  opacity: 0;
  transition: 1.4s cubic-bezier(0.9, 0.03, 0.47, 0.89);
}
.sp-wm-banner-heading.in-viewport h2, .sp-wm-banner-heading.was-in-viewport h2{
  transform: translateY(0%);
  opacity: 1;
}
.sp-work-main-banner{
  padding-top: 180px;
  background-color: #D8031D;
}
.sp-work-main-banner-wrapper{
  padding-left: 170px;
  align-items: start;
}
.sp-wm-dropdowns{
  padding-top: 63px;
  gap: 29px;
  transform: translateY(100%);
  opacity: 0;
  transition: 1.4s cubic-bezier(0.9, 0.03, 0.47, 0.89);
  transition-delay: .5s;
}
.sp-work-main-banner-wrapper.in-viewport .sp-wm-dropdowns, .sp-work-main-banner-wrapper.was-in-viewport .sp-wm-dropdowns{
  transform: translateY(0%);
  opacity: 1;
}
.sp-wm-dropdown-head{
  font-weight: 600;
  font-size: 18px;
  line-height: 150%;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFFFFF;
  display: flex;
  gap: 8px;
}
.sp-wm-dropdown-head span:first-child{
  font-size: 10px;
  position: relative;
  display: inline-flex;
  line-height: 2;
  top: -1px;
}
.sp-wm-dropdown-links{
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  --webkit-transition: all .9s;
  transition: all .9s;
}
.sp-wm-dropdown.active .sp-wm-dropdown-links{
  grid-template-rows: 1fr;
  opacity: 1;
}
.sp-wm-dropdown-links > div{
  overflow: hidden;
}
.sp-wm-dropdown-links ul{
  padding-top: 8px;
  padding-left: 15px;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
}
.sp-wm-dropdown-links li{
  
  list-style-type: none;
  position: relative;
  padding-left: 15px;
}
.sp-wm-dropdown-links li button{
  background: transparent;
  border: none;
  color: inherit;
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 1px;
  color: #FFFFFF;
}
.sp-wm-dropdown-links li button:hover{
  /* cursor: none; */
}
.sp-wm-dropdown-links li::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 4px;
  height: 4px;
  background-color: #FFFFFF;
  border-radius: 50%;
}
.sp-work-main-project-image{
  background: #111111;
  border-radius: 26.8644px;
  max-height: 356px;
  overflow: hidden;
}
.sp-work-main-project-image img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.sp-work-main-banner-left{
  width: 30%;
  position: sticky;
  top: 100px;
  padding-bottom: 25vh;
}
.sp-work-main-banner-right{
  width: 60%;
  transform: translateY(100%);
  transition: 1.4s cubic-bezier(0.9, 0.03, 0.47, 0.89);
  opacity: 0;
  transition-delay: 1s;
}
.sp-work-main-banner-wrapper.in-viewport .sp-work-main-banner-right, .sp-work-main-banner-wrapper.was-in-viewport .sp-work-main-banner-right{
  transform: translateY(0%);
  opacity: 1;
}
.sp-work-main-project-title{
  padding-top: 17px;
}
.sp-work-main-project-title h3{
  font-weight: 400;
  font-size: 24px;
  line-height: 106%;
  letter-spacing: 1px;
  color: #FFFFFF;
  text-align: center;
}
.sp-work-main-banner-right-wrapper{
  gap: 72px;
  display: none;
  animation: fadeEffect 1s;
}
.sp-work-main-banner-right-wrapper a:last-child{
  padding-bottom: 100px;
}
.sp-work-main-banner-right-wrapper a{
  cursor: url('images/cursor-eye-white.html') 50 50, auto;
}
.sp-work-main-banner-right-wrapper a:nth-child(even) .sp-work-main-project-circle{
  -wenkit-clip-path: circle(50% at 14vw 16vw);
  clip-path: circle(50% at 14vw 16vw);

}
.sp-work-main-project-circle{
  -wenkit-clip-path: circle(55% at 36vw 26vw);
  clip-path: circle(55% at 36vw 26vw);
}
/* SP Work Main CSS Ends */

/* SP Project Inner CSS Starts */
.sp-project-inner-banner{
  background-color:  #111111;
  padding-top: 104px;
  padding-bottom: 73px;
}
.sp-project-inner-banner-wrapper{
  width: 95%;
  margin: 0 auto;
}
.sp-project-images{
  padding-top: 120px;
}
.sp-project-images-wrapper{
  width: 95%;
  margin: 0 auto;
}
.sp-pro-inner-image{
  position: relative;
  padding-top: 44%;
  overflow: hidden;
  border-radius: 27px;
}
.sp-pro-inner-title{
  padding-top: 66px;
  overflow: hidden;
}
.sp-pro-inner-title h2{
  text-align: center;
  transform: translateY(100%);
  opacity: 0;
  transition: .6s ease all;
}
.sp-pro-inner-title.in-viewport h2, .sp-pro-inner-title.was-in-viewport h2{
  transform: translateY(0%);
  opacity: 1;
}
.sp-pro-inner-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0px;
}
.sp-quote-section{
  padding-top: 120px;
}
.sp-quote-cta a{
  color: #D8031D;
  transform: translateY(100%);
  opacity: 0;
  transition: .6s ease all;
  transition-delay: .5s;
}
.sp-quote-cta.in-viewport a, .sp-quote-cta.was-in-viewport a{
  transform: translateY(0%);
  opacity: 1;
}
.sp-quote-cta{
  text-align: center;
  padding-top: 37px;
  overflow: hidden;
}
.sp-quote-body h3{
  font-weight: 300;
  font-size: 36px;
  line-height: 150%;
  text-align: center;
  color: #111111;
  transform: translateY(100%);
  opacity: 0;
  transition: 0.6s ease all;
}
.sp-quote-body.in-viewport h3, .sp-quote-body.was-in-viewport h3{
  transform: translateY(0%);
  opacity: 1;
}
.sp-quote-wrapper{
  max-width: 1012px;
  width: 75%;
  margin:0 auto;
}
.sp-project-images-top-wrapper{
  gap: 20px;
}
.sp-project-images-top-wrapper .sp-project-image{
   position: relative;
   padding-top: 65%;
   width: 100%;
}
.sp-project-image{
  overflow: hidden;
  border-radius: 27px;
}
.sp-project-image img, .sp-project-image video{
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0px;
}
.sp-project-images-bottom-wrapper .sp-project-image{
  position: relative;
  padding-top: 44%;
}
.sp-project-images-bottom{
  padding-top: 20px;
}
.sp-project-images-bottom.diff .sp-project-images-bottom-wrapper .sp-project-image{
  padding-top: 64%;
}
.sp-project-images-bottom.diff .sp-project-image{
  border-radius: 0px;
}
.sp-quote-wrapper .yg-quote-body{
  min-width: 100%;
}
.sp-quote-wrapper .yg-quote-label span{
  text-align: center;
}
.sp-quote-wrapper .yg-quote-body h3{
  color: #111111;
  text-align: center;
}
.sp-project-found-quote{
  padding-bottom: 61px;
}
.project-inner-content-wrapper{
  position: relative;
}
.sticky-project-nav{
  background: #FFFFFF;
  border-radius: 13px;
  width: 80%;
  position: sticky;
  bottom: 10px;
  margin: 0 auto;
  box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.10);
  margin-top: 50px;
}
.sticky-project-nav-wrapper{
  padding: 15px 20px;
}
.sticky-project-prev-nav, .sticky-project-next-nav{
  width: 26px;
  height: 26px;
  overflow: hidden;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #111111;
}
.sticky-project-title span{
  font-weight: 300;
  font-size: 24px;
  line-height: 95.5%;
  color: #111111;
}
.sticky-project-next-nav svg{
  transform: rotate(180deg);
}
/* SP Project Inner CSS Ends */

/* SP Project Expanded CSS Starts */
.sp-project-expanded-banner{
  background-color: #111111;
  padding-top: 138px;
}
.sp-proj-exp-body{
  padding-top: 46px;
}
.sp-proj-exp-body p{
  color: #EEEEEE;
}
.sp-proj-exp-content{
  max-width: 75ch;
  margin: 0 auto;
  text-align: center;
}
.sp-proj-exp-image{
  padding-top: 129px;
}
.sp-proj-exp-image-wrap{
  position: relative;
  padding-top: 35%;
}
.sp-proj-exp-image-wrap img{
  position: absolute;
  inset: 0px;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.sp-project-expanded-content{
  padding-top: 32px;
  padding-bottom: 150px;
}
.sp-proj-exp-cont-wrapper{
  width: 95%;
  margin: 0 auto;
  align-items: start;
  gap:80px;
}
.sp-proj-exp-cont-left-wrapper{
  position: relative;
  top: 82px;
}
.sp-proj-exp-cont-left{
  flex: 1 1 40%;
}
.sp-proj-exp-cont-right{
  flex: 1 1 50%;
  overflow: hidden;
  overflow-y: auto;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none; 
}
.sp-proj-exp-cont-right::-webkit-scrollbar {
  display: none;
}
.sp-proj-exp-quote-cta{
  padding-top: 60px;
}
.sp-proj-exp-quote-cta a{
  color: #D8031D;
  color: #D8031D;
}
.sp-proj-exp-quote-head h4{
  font-weight: 300;
  font-size: 32px;
  line-height: 150%;
  color: #111111;
}
.sp-proj-exp-blog{
  padding-top: 120px;
}
.sp-proj-exp-blog-cont > div:first-child{
  padding-top: 0px;
}
.sp-proj-exp-blog-cont-head h5{
  font-weight: 300;
  font-size: 32px;
  line-height: 136%;
  color: #111111;
}
.sp-proj-exp-blog-cont-head h6{
    color: #111;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: 95.5%;
}
.sp-proj-exp-blog-cont-head.diff h6{
  color: #111;
  font-family: var(--aspekta);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.sp-proj-exp-blog-cont-body{
  padding-top: 32px;
}
.sp-proj-exp-blog-cont-body p, .sp-proj-exp-blog-cont-body ul li{
  font-weight: 400;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 1px;
  color: #6F6F6F;
}
.sp-proj-exp-blog-cont-body ul{
  padding-left: 30px;
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sp-proj-exp-blog-cont:not(:first-child){
  padding-top: 67px;
}
.sp-proj-exp-blog-cont-body p:not(:first-child){
  padding-top: 32px;
}
.sp-proj-exp-cont-image{
  overflow: hidden;
  position: relative;
  padding-top: 60%;
  border-radius: 27px;
}
.sp-proj-exp-cont-image img, .sp-proj-exp-cont-image video{
  height: 100%;
  width: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0px;
}
.sp-proj-exp-cont-quote-right h3{
  text-align: right;
}
.sp-proj-exp-cont-image:not(:first-child){
  margin-top: 31px;
}
.sp-proj-exp-cont-quote-right{
  margin-top: 105px;
  margin-bottom: 97px;
}
.select-works-sp{
  padding-top: 250px;
  padding-bottom: 100px;
}
.select-works-sp-right .sp-wm-dropdown-head{
  color: #111;
  position: relative;
}
.select-works-sp-right .sp-wm-dropdown-head-drop{
  background-color: #FFF;
  position: absolute;
  top: 25px;
  left: -30px;
  display: none;
}
.select-works-sp-right .sp-wm-dropdown-head-drop.active{
  display: block;
}
.sp-drop-selected{
  color: #D8031D;
  font-family: var(--aspekta);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 18px */
  letter-spacing: 1px;
  position: absolute;
  bottom: -20px;
}
.select-works-sp-right .sp-wm-dropdown-head-drop ul{
  list-style-type: none;
  padding: 30px 44px 42px 23px;
  min-width: 232px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: 300px;
  overflow: hidden;
  overflow-y: auto;
}
.select-works-sp-right .sp-wm-dropdown-head-drop ul li{
  color: #6F6F6F;
  font-family: var(--aspekta);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 1px;
}

.select-works-sp-wrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 56px;
  position: sticky;
  top: -1px;
  z-index: 9999;
  background-color: #FFF;
}
.select-works-sp-wrap.active{
  z-index: 99999;
  box-shadow: 1px 5px 4px 0 rgba(0,0,0,0.2);
}
.select-works-sp-right{
  display: flex;
  gap: 90px;
  padding: 30px 0;
}
.select-work-content-head{
  color: #111;
  font-family: var(--aspekta);
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 106%;
  max-width: 25ch;
}
.select-work-content-head span{
  color: #D8031D;
}
.select-work-content-body{
  color: #5A5A5A;
  font-family: var(--aspekta);
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  max-width: 50ch;
}
.select-work-content-body span{
  color: #D8031D;
}
.select-work-content{
  display: flex;
  justify-content: space-between;
  margin-top: 35px;
  flex-wrap: wrap;
  gap: 32px;
}
.select-work-img{
  position: relative;
  padding-top: 45%;
}
.select-multiple-work-sp-right .select-work-img{
  padding-top: 120%;
}
.select-multiple-work-sp-left .select-work-img{
  padding-top: 51%;
}
.select-work-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0px;
}
.select-work-sp a{
  width: 55%;
  margin-left: auto;
  padding-right: 155px;
}
.select-multiple-work-sp{
  display: flex;
  padding: 0px 115px;
  gap: 103px;
}
.select-multiple-work-sp-right{
  width: 30%;
}
.select-multiple-work-sp-left{
  width: 70%;
}
.select-multiple-work-sp.flex-rev{
  flex-direction: row-reverse;
}
.multiple-works-select-parent{
  padding-top: 108px;
}
.multiple-works-select-parent .select-multiple-work-sp:not(:first-child){
  margin-top: 20px;
}
.select-multiple-work-sp .select-multiple-work-sp-left{
  margin-top: 100px;
}
.select-multiple-work-sp .select-multiple-work-sp-right.top-no-marg{
  margin-top: 0;
}
.select-multiple-work-sp.flex-rev .select-multiple-work-sp-right{
   margin-top: 0px;
}
.select-multiple-work-sp.flex-rev .select-multiple-work-sp-left{
  margin-top: 150px;
}
.select-multiple-work-sp{
  padding-top: 108px;
}
.select-multiple-work-sp.flex-rev{
  padding-top: 50px;
}
/* SP Project Expanded CSS Ends */

/* Footer CSS Starts */
.footer-whole{
	background-color: #D8031D;
}
footer{
  overflow: hidden;
  position: relative;
  background-color: #D8031D;
  bottom: -45px !important;
  padding-bottom: 60px !important;
}
.footer-bottom{
  background-color: transparent;
  position: relative;
  z-index: 2;
  display: flex;
}
.footer-bottom-link a{
  color: #EFEFEF;
}
.footer-bottom-wrapper{
  padding: 13px 59px;
  flex-direction: column;
  gap: 64px;
  justify-content: end;
  padding-right: 0px;
}
.footer-bottom-left, .footer-bottom-right{
  gap: 20px;
  flex-direction: column;
  align-items: end;
}
.footer-top-left{
  background-color: white;
  width: 80vw;
  height: 80vw;
  border-radius: 50%;
  position: absolute;
  top: 10vh;
  left: -10%;
  z-index: 1;
  overflow: hidden;
  transition: 1.2s ease all;
  transform: scale(0);
  transform-origin: bottom left;
}
.footer-wrapper.in-viewport .footer-top-left, .footer-wrapper.was-in-viewport .footer-top-left{
  transform: scale(1);
}
.footer-top-right{
  padding: 20px;
  top: 0;
  height: 90%;
  min-height: 811px;
  display: flex;
}
.footer-top-right svg{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.footer-top-left-container{
  padding-top: 136px;
  padding-left: 170px;
  max-width: 80ch;
}
.footer-top-circle{
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border:1px solid #D8031D;
  font-weight: 400;
  font-size: 14px;
  line-height: 121.5%;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #D8031D;
  position: relative;
  transition: .6s ease all;
  opacity: 0;
  transition-delay: 1.6s;
}
.footer-top-circle.active{
  background-color: #D8031D;
  color: #FFFFFF;
  transition-delay: 0;
  transition: .4s ease all;
}
.footer-top-circle.not-active{
  transition-delay: 0;
  transition: .4s ease all;
}
.footer-wrapper.in-viewport .footer-top-left .ftc-1, .footer-wrapper.was-in-viewport .footer-top-left .ftc-1{
  opacity: 1;
}
.footer-wrapper.in-viewport .footer-top-left .ftc-2, .footer-wrapper.was-in-viewport .footer-top-left .ftc-2{
  transform: translateX(-10px);
  opacity: 1;
}
.footer-wrapper.in-viewport .footer-top-left .ftc-3, .footer-wrapper.was-in-viewport .footer-top-left .ftc-3{
  opacity: 1;
  transform: translateX(-20px);
}
.ftc-1{
  z-index: 3;
}
.ftc-2{
  z-index: 2;
  transform: translateX(-30px);
  transition-delay: 1.8s;
}
.ftc-3{
  z-index: 1;
  transform: translateX(-50px);
  transition-delay: 2s;
}
.footer-top-circle div{
  padding: 0 10px;
}
.footer-top-circles{
  padding-top: 64px;
}
.footer-top-body{
  padding-top: 32px;
  overflow: hidden;
}
.footer-top-body p{
  transition: .6s ease all;
  transition-delay: 1.4s;
  transform: translateY(100%);
    max-width: 70ch;
}
.footer-wrapper.in-viewport .footer-top-left .footer-top-body p, .footer-wrapper.was-in-viewport .footer-top-left .footer-top-body p{
  transform: translateY(0%);
}
.footer-top-heading{
  font-weight: 400;
  font-size: 20px;
  line-height: 140%;
  color: #111111;
  overflow: hidden;
}
.footer-top-heading h3{
  transform: translateY(100%);
  transition: .6s ease all;
  transition-delay: 1.2s;
}
.footer-wrapper.in-viewport .footer-top-left .footer-top-heading h3, .footer-wrapper.was-in-viewport .footer-top-left .footer-top-heading h3{
  transform: translateY(0%);
}
.footer-top-form form{
  position: relative;
}
.footer-top-form input{
  border: 1px solid #B5B5B5;
  border-radius: 6px;
  width: 100%;
  padding: 15px 20px;
  padding-right: 0;
  font-family: var(--aspekta);
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: #6F6F6F;
  outline: none;
}
.footer-top-form button , .footer-top-form input[type="submit"]{
  background-color: transparent;
  padding: 0;
  border: none;
  outline: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 150%;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #D8031D;
  border-left: 1px solid #B5B5B5;
  padding-left: 32px;
  margin-top: 15px;
  position: absolute;
  right: 0;
  top: 0;
  width: 13%;
  border-radius: 0px;
}
.footer-top-mailing-list{
  padding-top: 100px;
  opacity: 0;
  transition: .6s ease all;
  transition-delay: 2.2s;
}
.footer-wrapper.in-viewport .footer-top-left .footer-top-mailing-list, .footer-wrapper.was-in-viewport .footer-top-left .footer-top-mailing-list{
 opacity: 1;
}

.footer-top-form{
  padding-top: 10px;
}
.footerbottomPart {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    background-color: #CB1228;
    z-index: 9;
}
.footerbottomPart .fb-in {
    text-align: center
}
.footerbottomPart .fb-in p {
    text-align: center;
    font-size: 14px;
    color: #fff;
    padding: 6px 30px;
}
/* Footer CSS Ends */

/* Cursor CSS */
/* .cursor-wrapper {
   pointer-events: none;
}
.cursor-circle {
  position: fixed;
  width: 2rem;
  height: 2rem;
  border-radius: 100%;
  overflow: hidden;
  background-color: white;
  inset: 0px;
  z-index: 999999;
}
.cursor-circle.cursor-2 {
  width: 1rem;
  height: 1rem;
}
.cursor-circle.cursor-3{
    width: 0.5rem;
    height: 0.5rem;
}
.cursor-circle.cursor-main {
  width: 1.5rem;
  height: 1.5rem;
  transform: translate3d();
} */
.select-works-sp-left {
  position: relative;
  width: 20%;
}
.select-works-sp-left-sticky{
  color:#111;
  font-family: var(--aspekta);
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%; /* 30px */
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0;
  transition: .4s ease all;
  transition-delay: .06s;
  position: absolute;
  width: 100%;
  top: -16px;
}
.select-works-sp-left-sticky.active{
  opacity: 1;
}
.select-works-sp-left h2, .select-works-sp-left h1 {
   position: absolute;
   width: 100%;
   top: -150px;
   transition: .4s ease all;
   transform: translateY(100%);
   opacity: 0;
}
.select-works-sp-left h1 {
    font-weight: 300;
    font-size: 90px;
    line-height: 95.5%;
    color: #111;
    padding-bottom: 11px;
    text-align: left;
}
.select-works-sp-left h1 span {
    font-family: var(--pp);
    font-weight: 200;
    font-style: italic;
    line-height: 95.5%;
}
.select-work-sp{
  padding-top: 70px;
}
.select-work-sp:nth-child(2){
	width: 65%;
	padding-top: 120px;
}
.select-work-sp:nth-child(2) a {
    width: 90%;
	padding: 0;
    padding-left: 7%;
}
.select-work-sp:nth-child(3) {
    width: 30%;
    margin-left: auto;
    padding-right: 5%;
    padding-top: 0;
    margin-top: -25%;
}
.select-work-sp:nth-child(3) a {
    width: 80%;
    /* margin-right: 15%; */
    padding: 0;
}
.select-work-sp:nth-child(3) .select-work-img {
    padding-top: 120%;
}
.select-work-sp:nth-child(4){
	width: 30%;
    padding-left: 7%;
}
.select-work-sp:nth-child(4) a {
    width: 80%;
	margin-left: 0;
	margin-right: auto;
    padding: 0;
}
.select-work-sp:nth-child(4) .select-work-img {
    padding-top: 120%;
}
.select-work-sp:nth-child(5){
	width: 65%;
	margin-left: auto;
	padding-right: 5%;
	margin-top: -30%;
	padding-top: 0;
}
.select-work-sp:nth-child(5) a{
	width: 90%;
	padding: 0;
}
.select-work-sp:nth-child(6){
	width: 65%;
	padding-top: 120px;
}
.select-work-sp:nth-child(6) a {
    width: 90%;
	padding: 0;
    padding-left: 7%;
}
.select-work-sp:nth-child(7) {
    width: 30%;
    margin-left: auto;
    padding-right: 5%;
    padding-top: 0;
    margin-top: -25%;
}
.select-work-sp:nth-child(7) a {
    width: 80%;
    /* margin-right: 15%; */
    padding: 0;
}
.select-work-sp:nth-child(7) .select-work-img {
    padding-top: 120%;
}
.select-work-sp:nth-child(8){
	width: 30%;
    padding-left: 7%;
}
.select-work-sp:nth-child(8) a {
    width: 80%;
	margin-left: 0;
	margin-right: auto;
    padding: 0;
}
.select-work-sp:nth-child(8) .select-work-img {
    padding-top: 120%;
}
.select-work-sp:nth-child(9){
	width: 65%;
	margin-left: auto;
	padding-right: 5%;
	margin-top: -30%;
	padding-top: 0;
}
.select-work-sp:nth-child(9) a{
	width: 90%;
	padding: 0;
}
.select-work-sp:nth-child(10){
	width: 65%;
	padding-top: 120px;
}
.select-work-sp:nth-child(10) a {
    width: 90%;
	padding: 0;
    padding-left: 7%;
}
.select-work-sp:nth-child(11) {
    width: 30%;
    margin-left: auto;
    padding-right: 5%;
    padding-top: 0;
    margin-top: -25%;
}
.select-work-sp:nth-child(11) a {
    width: 80%;
    /* margin-right: 15%; */
    padding: 0;
}
.select-work-sp:nth-child(11) .select-work-img {
    padding-top: 120%;
}
.select-work-sp:nth-child(12){
	width: 30%;
    padding-left: 7%;
}
.select-work-sp:nth-child(12) a {
    width: 80%;
	margin-left: 0;
	margin-right: auto;
    padding: 0;
}
.select-work-sp:nth-child(12) .select-work-img {
    padding-top: 120%;
}
.select-work-sp:nth-child(13){
	width: 65%;
	margin-left: auto;
	padding-right: 5%;
	margin-top: -30%;
	padding-top: 0;
}
.select-work-sp:nth-child(13) a{
	width: 90%;
	padding: 0;
}
.select-work-sp:nth-child(14){
	width: 65%;
	padding-top: 120px;
}
.select-work-sp:nth-child(14) a {
    width: 90%;
	padding: 0;
    padding-left: 7%;
}
.select-work-sp:nth-child(15) {
    width: 30%;
    margin-left: auto;
    padding-right: 5%;
    padding-top: 0;
    margin-top: -25%;
}
.select-work-sp:nth-child(15) a {
    width: 80%;
    /* margin-right: 15%; */
    padding: 0;
}
.select-work-sp:nth-child(15) .select-work-img {
    padding-top: 120%;
}
.select-work-sp:nth-child(16){
	width: 30%;
    padding-left: 7%;
}
.select-work-sp:nth-child(16) a {
    width: 80%;
	margin-left: 0;
	margin-right: auto;
    padding: 0;
}
.select-work-sp:nth-child(16) .select-work-img {
    padding-top: 120%;
}
.select-work-sp:nth-child(17){
	width: 65%;
	margin-left: auto;
	padding-right: 5%;
	margin-top: -30%;
	padding-top: 0;
}
.select-work-sp:nth-child(17) a{
	width: 90%;
	padding: 0;
}
.select-work-sp:nth-child(18){
	width: 65%;
	padding-top: 120px;
}
.select-work-sp:nth-child(18) a {
    width: 90%;
	padding: 0;
    padding-left: 7%;
}
.select-work-sp:nth-child(19) {
    width: 30%;
    margin-left: auto;
    padding-right: 5%;
    padding-top: 0;
    margin-top: -25%;
}
.select-work-sp:nth-child(19) a {
    width: 80%;
    /* margin-right: 15%; */
    padding: 0;
}
.select-work-sp:nth-child(19) .select-work-img {
    padding-top: 120%;
}
.select-work-sp:nth-child(20){
	width: 30%;
    padding-left: 7%;
}
.select-work-sp:nth-child(20) a {
    width: 80%;
	margin-left: 0;
	margin-right: auto;
    padding: 0;
}
.select-work-sp:nth-child(20) .select-work-img {
    padding-top: 120%;
}
.select-work-sp:nth-child(21){
	width: 65%;
	margin-left: auto;
	padding-right: 5%;
	margin-top: -30%;
	padding-top: 0;
}
.select-work-sp:nth-child(21) a{
	width: 90%;
	padding: 0;
}
.select-work-sp:nth-child(22){
	width: 65%;
	padding-top: 120px;
}
.select-work-sp:nth-child(22) a {
    width: 90%;
	padding: 0;
    padding-left: 7%;
}
.select-work-sp:nth-child(23) {
    width: 30%;
    margin-left: auto;
    padding-right: 5%;
    padding-top: 0;
    margin-top: -25%;
}
.select-work-sp:nth-child(23) a {
    width: 80%;
    /* margin-right: 15%; */
    padding: 0;
}
.select-work-sp:nth-child(23) .select-work-img {
    padding-top: 120%;
}
.select-work-sp:nth-child(24){
	width: 30%;
    padding-left: 7%;
}
.select-work-sp:nth-child(24) a {
    width: 80%;
	margin-left: 0;
	margin-right: auto;
    padding: 0;
}
.select-work-sp:nth-child(24) .select-work-img {
    padding-top: 120%;
}
.select-work-sp:nth-child(25){
	width: 65%;
	margin-left: auto;
	padding-right: 5%;
	margin-top: -30%;
	padding-top: 0;
}
.select-work-sp:nth-child(25) a{
	width: 90%;
	padding: 0;
}
.select-work-sp:nth-child(26){
	width: 65%;
	padding-top: 120px;
}
.select-work-sp:nth-child(26) a {
    width: 90%;
	padding: 0;
    padding-left: 7%;
}
.select-work-sp:nth-child(27) {
    width: 30%;
    margin-left: auto;
    padding-right: 5%;
    padding-top: 0;
    margin-top: -25%;
}
.select-work-sp:nth-child(27) a {
    width: 80%;
    padding: 0;
}
.select-work-sp:nth-child(27) .select-work-img {
    padding-top: 120%;
}
.select-work-sp:nth-child(28){
	width: 30%;
    padding-left: 7%;
}
.select-work-sp:nth-child(28) a {
    width: 80%;
	margin-left: 0;
	margin-right: auto;
    padding: 0;
}
.select-work-sp:nth-child(28) .select-work-img {
    padding-top: 120%;
}
.select-work-sp:nth-child(29){
	width: 65%;
	margin-left: auto;
	padding-right: 5%;
	margin-top: -30%;
	padding-top: 0;
}
.select-work-sp:nth-child(29) a{
	width: 90%;
	padding: 0;
}
.select-work-sp:nth-child(30){
	width: 65%;
	padding-top: 120px;
}
.select-work-sp:nth-child(30) a {
    width: 90%;
	padding: 0;
    padding-left: 7%;
}
.select-work-sp:nth-child(31) {
    width: 30%;
    margin-left: auto;
    padding-right: 5%;
    padding-top: 0;
    margin-top: -25%;
}
.select-work-sp:nth-child(31) a {
    width: 80%;
    /* margin-right: 15%; */
    padding: 0;
}
.select-work-sp:nth-child(31) .select-work-img {
    padding-top: 120%;
}
.select-work-sp:nth-child(32){
	width: 30%;
    padding-left: 7%;
}
.select-work-sp:nth-child(32) a {
    width: 80%;
	margin-left: 0;
	margin-right: auto;
    padding: 0;
}
.select-work-sp:nth-child(32) .select-work-img {
    padding-top: 120%;
}
.select-work-sp:nth-child(33){
	width: 65%;
	margin-left: auto;
	padding-right: 5%;
	margin-top: -30%;
	padding-top: 0;
}
.select-work-sp:nth-child(33) a{
	width: 90%;
	padding: 0;
}
.select-work-sp:nth-child(10){
	
}
.select-work-sp:nth-child(11){
	
}
.select-work-sp:nth-child(12){
	
}
.select-work-sp:nth-child(13){
	
}
.select-work-sp:nth-child(14){
	
}
.select-work-sp:nth-child(15){
	
}
.select-work-sp:nth-child(16){
	
}
.select-work-sp:nth-child(17){
	
}
.select-work-sp:nth-child(18){
	
}
.select-work-sp:nth-child(19){
	
}
.select-work-sp:nth-child(20){
	
}
.select-works-sp a{
  cursor: url(../images/cursor-red.svg) 50 50, auto;
}
.select-works-sp-tab{
  animation: fadeEffect 1s;
}
.select-works-sp-right{
  transition: .4s ease all;
  opacity: 0;
}
.select-works-sp.in-viewport .select-works-sp-right, .select-works-sp.was-in-viewport .select-works-sp-right{
  opacity: 1;
}
.select-works-sp.in-viewport h2, .select-works-sp.in-viewport h1, .select-works-sp.was-in-viewport h2, .select-works-sp.was-in-viewport h1{
  transform: translateY(0%);
  opacity: 1;
}
.select-works-sp-left h2.active{
  opacity: 0;
}
.we-build-things-right p{
  color: #111;
  font-family: var(--aspekta);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 27px */
  letter-spacing: 1px;
}
.we-build-things-right p a{
    display: contents;
    color: #D8031D;
    text-decoration: underline;
}
.we-build-things-wrap{
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding: 143px 172px;
}
.we-build-things-right{
  max-width: 37ch;
  overflow: hidden;
}
.we-build-things-right p{
  transform: translateY(100%);
  opacity: 0;
  transition: .9s ease all;
}
.we-build-things-left{
  overflow: hidden;
  padding-bottom: 10px;
}
.we-build-things-left h2{
  transform: translateY(100%);
  opacity: 0;
  transition: .9s ease all;
}
.we-build-things.in-viewport .we-build-things-left h2, .we-build-things.was-in-viewport .we-build-things-left h2{
  transform: translateY(0%);
  opacity: 1;
}
.we-build-things.in-viewport .we-build-things-right p, .we-build-things.was-in-viewport .we-build-things-right p{
  transform: translateY(0%);
  opacity: 1;
}
.good-good{
  background-color: #111;
  padding: 40px 42px;
  position: relative;
}
.good-good-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.good-good-text{
  color: #FFF;
  font-family: var(--pp);
  font-size: 55.939px;
  font-style: italic;
  font-weight: 200;
  line-height: 121%; /* 67.686px */
  letter-spacing: -0.963px;
  opacity: 0.1;
	padding-left: 7px;
}
.good-good.active .good-good-text{
  opacity: 1;
}
.good-good-text-wrap{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.good-good-text-wrap{
  position: relative;
}
.good-good-row-text{
  color: #FFF;
  font-family: var(--pp);
  font-size: 55.939px;
  font-style: italic;
  font-weight: 200;
  line-height: 121%;
  letter-spacing: -0.963px;
  background-color: #111;
  position: absolute;
  opacity: 0;
}
.good-good-row-text.text-1 {
  top: 20%;
  right: 19%;
  padding: 0 10px;
  padding-bottom: 5px;
}
.good-good-row-text.text-2 {
  bottom: 49%;
  left: 2%;
  padding: 0 10px;
  padding-bottom: 5px;
}
.good-good-row-text.text-3{
  top: 12%;
  right: 11%;
  padding-left: 10px;
  padding-right: 70px;
  padding-bottom: 5px;
}
.good-good-row-text.text-4{
    top: 34.4%;
    left: 33.4%;
    padding: 5px 5px;
}
.good-good-row-text.text-5{
    top: 27.4%;
    left: 33.9%;
    padding-right: 50px;
    padding-left: 39px;
    padding-bottom: 5px;
}
.good-good-row-text span{
  color: #EB0000;
}
.mission-vision-content-head{
  color: #D8031D;
  text-align: center;
  font-family: var(--aspekta);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.mission-vision-content-body{
  padding-top: 17px;
}
.mission-vision-content-body p{
  color: #787878;
  text-align: center;
  font-family: var(--aspekta);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
.mission-vision-sp-wrap{
  display: flex;
  padding: 123px 65px;
  justify-content: center;
  gap: 120px;
}
.mission-vision-sp-wrap .mission-vision-content-wrap:nth-child(1){
  width: 50%;
}
.mission-vision-sp-wrap .mission-vision-content-wrap:nth-child(2){
  width: 50%;
}
.all-it-takes-sp{
  height: 100vh;
  background-color: #D8031D;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.all-it-takes-ticker-text{
  color: #FFF;
  text-align: center;
  font-family: var(--aspekta);
  font-size: 37.614px;
  font-style: normal;
  font-weight: 300;
  line-height: 120%;
}
.all-it-takes-ticker-wrap .owl-carousel.owl-drag .owl-item{
  width: 120% !important;
}
.all-it-takes-ticker-wrap .owl-carousel .owl-stage{
  display: flex;
}
.all-it-takes-ticker{
  display: flex;
  overflow: hidden;
  background-color: #C20018;
  position: absolute;
  left: -110px;
  width: 110%;
}
.all-it-takes-ticker-wrap{
  -webkit-animation: ticker-animation 40s linear infinite;
    animation: ticker-animation 40s linear infinite;
    animation-play-state: paused;
    display: inline-flex;
    flex-shrink: 0;
    overflow: hidden;
    white-space: nowrap;
    padding: 10px 0;
}
.all-it-takes-ticker-wrap.active{
  animation-play-state: running;
}
#firstTicker{
  z-index: 2;
}
#secondTicker{
  z-index: 1;
}
#thirdTicker{
  z-index: 3;
}
.all-it-takes-content .txt-type span, .all-it-takes-content .all-it-takes-content-top-cont{
  color: #FFF;
  text-align: center;
  font-family: var(--aspekta);
  font-size: 58.614px;
  font-style: normal;
  font-weight: 300;
  line-height: 120%;
  display: block;
  position: relative;
}
.all-it-takes-content-top-cont.active{
  display: none;
}
.all-it-takes-content .txt-type2{
  color: #FFF;
  text-align: center;
  font-family: var(--aspekta);
  font-size: 37.614px;
  font-style: normal;
  font-weight: 300;
  line-height: 120%;
  display: block;
  position: relative;
  opacity: 0;
  height: 0;
  transition: .4s ease all;
}
.all-it-takes-content .txt-type2.active{
  opacity: 1;
  height: auto;
}
.all-it-takes-content{
  text-align: center;
  max-width: 84ch;
  margin: 0 auto;
  position: relative;
  display: none;
  animation: fadeEffect .6s;
}
.all-it-takes-content.active{
  display: block;
}
.all-it-takes-content-top {
  display: flex;
  gap: 10px;
  justify-content: center;
}
/* .cursorBlink{
  height: 45px;
  width: 1px;
  background-color: #FFFFFF;
  animation: blinking .9s linear infinite;
  display: inline-flex;
} */
.cursorAllTakes{
   width: 10vw;
   height: 10vw;
   border-radius: 50%;
   background-color: #CA0315;
   position: fixed;
   bottom: 0;
   left: 0;
   z-index: -1;
   opacity: 0;
}
.culture-banner-head{
  color:#FFF;
  font-family: var(--aspekta);
  font-size: 96px;
  font-style: normal;
  font-weight: 400;
  line-height: 103%;
  transition: 1.4s ease all;
  transform: translateY(100%);
  opacity: 0;
    text-align: left;
}
.culture-banner-head.active{
  opacity: 1;
  transform: translateY(0%);
}
.culture-banner-head .first{
  color:#FFF;
  font-family: 'Inter', sans-serif;
  font-size: 46px;
  font-style: normal;
  font-weight: 400;
  line-height: 103%;
}
.culture-banner-head .second{
  font-family: var(--pp);
  font-style: italic;
  font-weight: 200;
}
.culture-banner{
  background-color: #111;
  overflow: hidden;
}
.culture-banner-wrap{
  padding-top: 0px;
  padding-bottom: 85px;
  padding-left: 173px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  min-height: 800px;
}
.culture-banner-body{
  padding-top: 30px;
  opacity: 0;
  transform: translateY(100%);
  transition: 1.4s ease all;
  transition-delay: .9s;
}
.culture-banner-body.active{
  opacity: 1;
  transform: translateY(0%);
}
.culture-banner-body p{
  color: #F6F6F6;
}
.culture-banner-left{
  max-width: 45ch;
  overflow: hidden;
}
.culture-banner-circle{
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background-color: #D8031D;
}
.culture-banner-img{
  width: 276px;
  height: 190px;
}
.culture-banner-img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.culture-banner-top, .culture-banner-middle, .culture-banner-bottom{
  display: flex;
  align-items: center;
}
.culture-banner-middle{
  padding-top: 35px;
}
.culture-banner-bottom{
  padding-top: 37px;
}
.culture-banner-top .culture-banner-circle:nth-child(3) {
  margin-left: 27px;
}
.culture-banner-top .culture-banner-img{
  margin-left: 20px;
}

.culture-banner-top .culture-banner-img img{
  /* filter: grayscale(1); */
}
.culture-banner-middle .culture-banner-circle{
  margin-left: 39px;
}
.culture-banner-middle div:nth-child(3){
  transform: translateX(28px);
}
.culture-banner-middle div:nth-child(3) img{
  /* filter: grayscale(1); */
}
.culture-banner-bottom .culture-banner-img:nth-child(2){
  margin-left: 33px;
}
.culture-banner-bottom .culture-banner-img:nth-child(1) img{
  filter: grayscale(1);
}
.culture-banner-bottom .culture-banner-circle{
  margin-left: 19.3px;
}
.culture-banner-top, .culture-banner-bottom{
  transform: translateX(36px);
}
.culture-banner-right{
  transform: translateX(-180px);
  transition: 1.4s ease all;
  transition-delay: 1.8s;
  opacity: 0;
}
.culture-banner-right.active{
   opacity: 1;
   transform: translateX(80px);
}
.culture-pillars{
  background-color: #111;
  height: 105vh;
  overflow: hidden;
}
.culture-pillars-wrap{
  padding-top: 79px;
  padding-left: 173px;
  padding-right: 190px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pillars-drives{
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 106%;
  color: #FFF;
  padding-bottom: 80px;
  transition: .6s ease all;
  transform: translateY(100%);
  opacity: 0;
}
.culture-pillars.in-viewport .pillars-drives, .culture-pillars.was-in-viewport .pillars-drives{
  opacity: 1;
  transform: translateY(0%);
}
.pillars-drives span{
  color: #D8031D;
}
.pillars-drives-content{
   padding-bottom: 220px;
   max-width: 76ch;
   position: relative;
   opacity: 0;
   transform: translateY(100%);
   transition: .6s ease all;
   transition-delay: .6s;
}
.culture-pillars.in-viewport .pillars-drives-content, .culture-pillars.was-in-viewport .pillars-drives-content{
  opacity: 1;
  transform: translateY(0%);
}
.pillars-drives-content-wrap{
  position: absolute;
  top: 0;
}
.pillars-drives-content .pillars-drives-content-wrap:not(:first-child){
  opacity: 0;
}
.pillars-drives-content-head{
  color: #FFF;
  font-family: var(--pp);
  font-size: 35px;
  font-style: italic;
  font-weight: 400;
  line-height: 74.5%;
  padding: 5px 0;
}
.pillars-drives-content-body{
  padding-top: 26px;
}
.pillars-drives-content-body p{
  color: #F5F3EE;
}
.pillars-images{
  display: flex;
  justify-content: space-between;
  margin-top: auto;
}
.pillars-image-bottom img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pillars-image-bottom{
  width: 164px;
  height: 100%;
}
.pillars-image-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bPath{
  fill: #B90517;
}
.aPath{
  fill: #810A18;
}
.cross-cultured{
  background-color: #D8031D;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.cross-cultured-wrap{
  padding: 137px 0;
}
.cross-cultured-text{
  color: #FFF;
  text-align: center;
  font-size: 77px;
  font-style: normal;
  font-weight: 300;
  line-height: 95.5%;
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
}
.cross-cultured-text span{
  font-family: var(--pp);
  font-style: italic;
  font-weight: 200;
}
.cross-cultured-img{
  width: 28vw;
  height: 30vw;
}
.cross-cultured-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.our-guiding-tenets-wrap{
  padding: 65px 51px 109px 51px;
}
.our-guiding-tenets-box{
  width: 33%;
  min-height: 456px;
  border: 1px solid #D8031D;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.our-guiding-tenets-boxes{
  display: flex;
}
.our-guiding-tenets-boxes .our-guiding-tenets-box:nth-child(1){
  opacity: 0;
  transform: translateX(100px);
  transition: .9s ease all;
  transition-delay: 1s;
}
.our-guiding-tenets-boxes .our-guiding-tenets-box:nth-child(2){
  opacity: 0;
  transition: .9s ease all;
  transition-delay: .5s;
}
.our-guiding-tenets-boxes .our-guiding-tenets-box:nth-child(3){
  opacity: 0;
  transform: translateX(-100px);
  transition: .9s ease all;
  transition-delay: 1s;
}
.our-guiding-tenets.in-viewport .our-guiding-tenets-boxes .our-guiding-tenets-box:nth-child(2), .our-guiding-tenets.was-in-viewport .our-guiding-tenets-boxes .our-guiding-tenets-box:nth-child(2){
   opacity: 1;
}
.our-guiding-tenets.in-viewport .our-guiding-tenets-boxes .our-guiding-tenets-box:nth-child(1), .our-guiding-tenets.was-in-viewport .our-guiding-tenets-boxes .our-guiding-tenets-box:nth-child(1){
  opacity: 1;
  transform: translateX(0);
}
.our-guiding-tenets.in-viewport .our-guiding-tenets-boxes .our-guiding-tenets-box:nth-child(3), .our-guiding-tenets.was-in-viewport .our-guiding-tenets-boxes .our-guiding-tenets-box:nth-child(3){
  opacity: 1;
  transform: translateX(0);
}
.our-guiding-tenets-head{
  color: #111;
  font-family:var(--pp);
  font-size: 48px;
  font-style: italic;
  font-weight: 200;
  line-height: 98.5%;
  text-align: center;
  opacity: 0;
  transform: translateY(100%);
  transition: .6s ease all;
}
.our-guiding-tenets.in-viewport .our-guiding-tenets-head , .our-guiding-tenets.was-in-viewport .our-guiding-tenets-head{
  opacity: 1;
  transform: translateY(0%);
}
.our-guiding-tenets-boxes{
  padding-top: 75px;
}
.our-guiding-tenets-box-head{
  color: #D8031D;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 4.5px;
  text-transform: uppercase;
  text-align: center;
  display: inline-flex;
  position: relative;
  padding-right: 21px;
  transition: .4s ease all;
}
.our-guiding-tenets-box-wrap:hover .our-guiding-tenets-box-head{
   color: #FFF;
}
.our-guiding-tenets-box-head::after{
   content: "";
   right: 0;
   top: 2px;
   position: absolute;
   width: 10px;
   height: 10px;
   border-radius: 50%;
   transition: .4s ease all;
   background-color: #D8031D;
}
.our-guiding-tenets-box-wrap:hover .our-guiding-tenets-box-head::after{
  background-color: #FFF;
}
.our-guiding-tenets-box-body{
  color: #5F5F5F;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.88px;
  text-align: center;
  padding-top: 35px;
  transition: .4s ease all;
}
.our-guiding-tenets-box-wrap:hover .our-guiding-tenets-box-body{
  color: #FFF;
}
.our-guiding-tenets-box-wrap{
  height: 29vw;
  width: 29vw;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: .4s ease all;
}
.our-guiding-tenets-box-wrap:hover{
  background-color: #D8031D;
}
.our-guiding-tenets-box-content{
  padding: 0 18px;
}

/* Cursor CSS Ends */

/* Keyframes */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes circle{
  0%{
    transform:rotate(0deg);
  
  }
  100%{
    transform:rotate(360deg);
  }
}
@keyframes blinking {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes pop {
  0% { transform:scale(.1); }
  3% { transform:scale(2); }
  6% { transform:scale(1); }
  100% { transform:scale(1) rotate(720deg); }
}
/* Keyframes Ends */

/* Utilities */

.flex{
    display: flex;
}
.flex-c{
    flex-direction: column;
}
.align{
    align-items: center;
}
.align-e{
    align-items: end;
}
.align-s{
  align-items: start;
}
.align-b{
    align-items: baseline;
}
.flex-jsc{
    justify-content: center;
}
.flex-jsb{
    justify-content: space-between;
}
.flex-jse{
    justify-content: end;
}
.img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.col-grey{
  color: #6F6F6F;
}
.col-white{
  color: #F2F2F2;
}
.white{
  color: #FFFFFF;
}
.black{
  color: #111111;
}
.bg-white{
  background-color: #FFFFFF;
}
.sp-cta{
  font-weight: 600;
  font-size: 16px;
  line-height: 150%;
  letter-spacing: 2px;
  text-decoration-line: underline;
  text-transform: uppercase;
  color: #111111;
}
.we-give-damn{
  background-color: #111;
  overflow: hidden;
}
.we-give-damn-top-label{
  color: #FFF;
  font-family: var(--aspekta);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 74.5%;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  transform: translateY(10%);
  transition: .6s ease all;
}
.we-give-damn.in-viewport .we-give-damn-top-label, .we-give-damn.was-in-viewport .we-give-damn-top-label{
  opacity: 1;
  transform: translateY(0%);
}
.we-give-damn-top-head{
  color: #FFF;
  font-family: var(--aspekta);
  font-size: 42px;
  font-style: normal;
  font-weight: 450;
  line-height: 95.5%;
  letter-spacing: 0.88px;
  text-align: center;
  padding-top: 20px;
  opacity: 0;
  transform: translateY(50%);
  transition: .6s ease all;
  transition-delay: .5s;
}
.we-give-damn.in-viewport .we-give-damn-top-head, .we-give-damn.was-in-viewport .we-give-damn-top-head{
  opacity: 1;
  transform: translateY(0%);
}
.we-give-damn-top-body{
  padding-top: 52px;
  overflow: hidden;
}
.we-give-damn-top-body p{
  color: #F5F3EE;
  text-align: center;
  opacity: 0;
  transform: translateY(100%);
  transition: .6s ease all;
  transition-delay: .9s;
}
.we-give-damn.in-viewport .we-give-damn-top-body p, .we-give-damn.was-in-viewport .we-give-damn-top-body p{
  opacity: 1;
  transform: translateY(0%);
}
.we-give-damn-wrap{
  padding-top: 98px;
}
.we-give-damn-top{
  max-width: 76ch;
  margin: 0 auto;
}
.we-give-damn-bottom{
  padding-top: 150px;
  margin-bottom: -5.5px;
}
.we-give-damn-bottom img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: .9s ease all;
  transition-delay: 1.2s;
  opacity: 0;
  transform: translateY(50px);
}
.we-give-damn.in-viewport .we-give-damn-bottom img, .we-give-damn.was-in-viewport .we-give-damn-bottom img{
  opacity: 1;
  transform: translateY(0px);
}
.contact-form-wrapper .error{
  font-size: 14px;
   color: #D8031D;
}
.emailmessage{
    border: 1px solid red;
    padding: 5px 9px;
    display: inline-flex;
    margin: 10px 0;
}
.emailmessage p{
  font-size: 14px;
}
.sp-how-we-do-slider-wrapper{
  display: none;
}
.pillars-drive-content-slider{
  display: none !important;
}


/* updated inner page css */

.landingPage .sps-top .spst-left{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}
.landingPage .spst-left .head{
  max-width: 45ch;
}
.landingPage .sps-top .cta{
  margin-top: 0px;
}
.landingPage .sps-top{
  flex-direction: column;
}
.spst-bottom{
  padding-top: 90px;
}
.spst-bottom-card{
  border-radius: 16px;
  background: #F8F7F7;
  display: flex;
  flex-direction: column;
  justify-content: end;
  position: relative;
  height: 19vmax;
  min-height: 270px;
}
.spst-bottom-card-wrap{
  padding: 20px;
}
.spst-bottom-cards{
  display: flex;
  gap: 18px;
}
.spst-bottom-card-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #111111;
  position: absolute;
  top: 20px;
  right: 20px;
  transition: .4s ease all;
}
.spst-bottom-card-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: .4s ease all;
  opacity: 0;
}
.spst-bottom-card-body > div{
  overflow: hidden;
}
.spst-bottom-card:hover .spst-bottom-card-body{
  opacity: 1;
  grid-template-rows: 1fr;
}
.spst-bottom-card-body p{
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: 0.800000011920929px;
  text-align: left;
  padding-top: 20px;
  color: #6F6F6F;
}
.spst-bottom-card-head{
  padding-top: 50px;
  max-width: 21ch;
}
.spst-bottom-card-head span{
  font-size: 20px;
  font-weight: 450;
  line-height: 24px;
  text-align: left;
  color: #A5A5A5;
  text-transform: capitalize;
  transition: .4s ease all;
}
.spst-bottom-card:hover .spst-bottom-card-head span{
  color: #D8031D;
}
.spst-bottom-card:hover .spst-bottom-card-dot{
  background-color: #D8031D;
}
.service-ib-sub{
  overflow: hidden;
}
.service-ib-sub span{
  font-size: 24.99px;
  font-weight: 400;
  line-height: 29.99px;
  letter-spacing: 1.2495636940002441px;
  text-align: left;
  color: #FFFFFF;
  display: block;
  transform: translateY(100%);
  transition: .6s ease all;
}
section.service-inner-banner-section.landingPage.in-viewport .service-ib-sub span, section.service-inner-banner-section.landingPage.was-in-viewport .service-ib-sub span{
  transform: translateY(0%);
}
.service-ib-titleI h1{
  font-size: 49.94px;
  font-weight: 300;
  line-height: 59.93px;
  text-align: left;
  color: #FFFFFFB2;
  transform: translateY(100%);
  transition: .6s ease all;
}
section.service-inner-banner-section.landingPage.in-viewport .service-ib-titleI h1, section.service-inner-banner-section.landingPage.was-in-viewport .service-ib-titleI h1{
  transform: translateY(0%);
}
.service-ib-titleI h1 span{
  font-family: var(--pp);
  font-size: 49.94px;
  font-style: italic;
  font-weight: 400;
  line-height: 59.93px;
  letter-spacing: 1.0404653549194336px;
  text-align: left;
  color: #FFFFFF;
}
.service-ib-circles{
  display: flex;
  padding-top: 65px;
}
.service-inner-banner-section.landingPage .service-ib-wrapper{
  padding: 150px 0;
}
.service-inner-banner-section.landingPage .service-ib-circles .sp-we-do-circle{
  width: 104px;
  height: 104px;
}
.service-inner-banner-section.landingPage .spwd-circle-1{
  background-color: #111111;
}
.service-inner-banner-section.landingPage .spwd-circle-2{
  background-color: #FFFF;
}
.service-inner-banner-section.landingPage .spwd-circle-3{
  background-color: #111111;
}
.service-inner-banner-section.landingPage .spwd-head{
  font-size: 26px;
}
.service-inner-banner-section.landingPage .spwd-body{
  font-size: 6px;
}
.service-inner-banner-section.landingPage .spwd-head.red{
  color: #D8031D;
}
.service-inner-banner-section.landingPage .spwd-bod.red{
  color: #D8031D;
}
.service-ib-circles .sp-we-do-circle.in-viewport.spwd-circle-3, .service-ib-circles .sp-we-do-circle.was-in-viewport.spwd-circle-3{
  transform: translateX(-5px);
}
.service-ib-circles .sp-we-do-circle.in-viewport.spwd-circle-1, .service-ib-circles .sp-we-do-circle.was-in-viewport.spwd-circle-1{
  transform: translateX(5px);
}
section.service-inner-banner-section.landingPage{
  align-items: start;
  flex-direction: column;
  overflow: hidden;
}
section.service-inner-banner-section.landingPage .section-container{
  max-width: 100%;
  padding: 0 62px;
  max-width: 85ch;
  margin: 0;
}
.service-ib-titleI{
  padding-top: 24px;
  overflow: hidden;
}
section.service-inner-banner-section.landingPage .service-ticker-box{
  position: relative;
  width: 100%;
  height: 100%;
  top: -10%;
  transform: rotate(-11deg);
}


/* updated inner page css ends */






/* Media Queries */
@media only screen and (min-width:1800px){
  .footer-top-left{
    top:5vh;
  }
  .sp-quite-simple-text-wrapper{
    padding-top: 200px;
  }
  .sp-together-section .sp-glad-picture{
    width: 65vw !important;
    height: 65vw !important;
  }
  .sp-together-section .sp-glad-picture{
    right: -13% !important;
    bottom: -15% !important;
  }
}
@media only screen and (max-width:1400px){
  h2{
    font-size: 86px;
  }
  h3{
    font-size: 77px;
  }
  .yg-quote-body h3{
    font-size: 44px;
  }
  .sp-are-you-heading{
    font-size: 44px;
  }
  .sp-are-you-tab-btns .tablinks{
    font-size: 22px;
  }
  .say-molecule-text{
    font-size: 22px;
  }
  .footer-top-left{
    width: 90vw;
    height: 90vw;
  }
  .sp-menu-link{
    /*font-size: 80px;*/
  }
  .sp-menu-secondary .sp-menu-secondary-link{
    font-size: 32px;
  }
  .sp-proj-exp-quote-head h4{
    font-size: 28px;
  }
  .sp-quote-body h3{
    font-size: 32px;
  }
  .what-is-sp-heading h2{
    font-size: 44px;
  }
  .our-guiding-tenets-boxes{
    flex-wrap: wrap;
  }
  .our-guiding-tenets-box{
    width: 49%;
  }
    .services-banner-heading h1, .select-works-sp-left h1 {
        font-size: 86px;
    }
}

@media only screen and (max-width:1300px){
  .yg-quote-body h3{
    font-size: 40px;
  }
  h2{
    font-size: 82px;
  }
  .sp-glad-meet-wrapper{
    padding-top: 46px;
  }
  section.sp-quirks .spq-grid{
    margin-top: 60px !important;
  }
  .sp-about-banner-wrapper.about-page .sp-about-banner-heading {
    max-width: 50ch;
  }
  .what-is-sp-heading h2{
    font-size: 40px;
  }
  .culture-banner-wrap{
    padding-left: 93px;
  }
  .our-guiding-tenets-box-wrap {
    height: 39vw;
    width: 39vw;
  }
    .services-banner-heading h1, .select-works-sp-left h1 {
        font-size: 72px;
    }
}
@media only screen and (max-width:1200px){
  .tabcontent{
    padding-left: 100px;
    padding-right: 100px;
  }
  .yg-quote-body h3{
    font-size: 36px;
  }
  .sp-quote-body h3{
    font-size: 32px;
  }
  .footer-top-left-container{
    padding-left: 120px;
  }
  h3{
    font-size: 67px;
  }
  h2{
    font-size: 78px;
  }
  .sp-menu-link{
/*    font-size: 70px;*/
      font-size: 8vh;
  }
  .sp-menu-secondary .sp-menu-secondary-link{
    font-size: 28px;
  }
  .sp-proj-exp-quote-head h4 {
    font-size: 24px;
}
.sp-quote-body h3 {
  font-size: 28px;
}
.sp-proj-exp-blog-cont-head h5 {
  font-size: 28px;
}
.what-is-sp-heading h2{
  font-size: 38px;
}
.culture-banner-head{
  font-size: 76px;
}
.culture-banner-img{
  width: 216px;
  height: 150px;
}
.culture-banner-circle{
  width: 120px;
  height: 120px;
}
.culture-banner-right.active {
  opacity: 1;
  transform: translateX(20px);
}
.cross-cultured-text{
  font-size: 67px;
}
    .services-banner-heading h1,.select-works-sp-left h1 {
        font-size: 68px;
    }
}
@media only screen and (max-width:1100px){
  .footer-top-right svg{
    display: none;
  }
  .footer-top-right{
    height: 100vh;
  }
  .footer-top-left {
    width: 110vw;
    height: 110vw;
    left: -5%;
  }
  .footer-top-mailing-list{
    padding-top: 60px;
  }
  h3{
    font-size: 57px;
  }
  .footer-top-left-container{
    max-width: 60ch;
    padding-left: 0px;
  }
  .we-build-things-wrap{
    padding: 143px 92px;
  }
  
}
@media only screen and (max-width:991px){
  h2{
    font-size: 74px;
  }
  .sp-quote-body h3 {
    font-size: 28px;
  }
  .yg-quote-body h3{
    font-size: 32px;
  }
  .sp-quote-wrapper{
    width: 90%;
  }
  .tabcontent{
    padding-left: 30px;
    padding-right: 40px;
  }
  .sp-cta{
    font-size: 14px;
  }
  .footer-bottom-wrapper{
    align-items: center;
    flex-direction: column;
  }
/*
  .footer-top-right{
    display: none;
  }
*/
.footer-top-wrapper.flex.flex-jse {
        flex-direction: column;
    }
    .footer-bottom {
        justify-content: center;
        border-top: 1px solid #e6e6e6;
        padding-top: 20px;
    }
    .footer-top-right {
        display: block;
        height: auto;
        background: #fff;
        min-height: auto;
    }
    .footer-bottom-wrapper {
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 13px 0px;
        gap: 20px;
    }
    .footer-bottom-left, .footer-bottom-right {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        justify-content: center;
    }
    .footer-bottom-link {
        color: #545454 !important;
        text-align: right;
        font-size: 12px;
        font-style: normal;
        font-weight: 500;
        line-height: 81.5%;
        letter-spacing: 0.49px;
        text-transform: capitalize;
    }
    .footer-bottom-link a {
        color: #545454 !important;
        text-align: right;
    }
  .footer-top-left{
    border-radius: 0;
    transform: scale(1);
    position: static;
    clip-path: circle(0% at 51% 94%);
  }
  .footer-top-left-container{
    padding-top: 0px;
    margin-top: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .footer-wrapper.in-viewport .footer-top-left, .footer-wrapper.was-in-viewport .footer-top-left{
    clip-path: circle(90% at 51% 94%);
  }
  .sp-are-you-heading{
    font-size: 40px;
  }
  .header-contents-wrapper{
    padding: 32px;
  }
  .sp-menu-link{
    font-size: 60px;
  }
  .sp-menu-secondary .sp-menu-secondary-link{
    font-size: 24px;
  }
  .sticky-project-nav{
    width: 90%;
  }
  .sp-proj-exp-cont-wrapper{
    flex-direction: column;
    gap: 50px;
  }
  .sp-proj-exp-cont-left{
    position: static;
  }
  .sp-proj-exp-cont-left-wrapper{
    position: static;
  }
  .sp-proj-exp-blog{
    padding-top: 70px;
  }
  .sp-glad-meet-wrapper{
    padding-top: 0;
  }
  .sp-about-banner-wrap-element{
    display: none;
	height: 0;
  }
  .sp-about-banner-wrapper.about-page {
    flex-direction: column;
    gap: 30px;
    padding-top: 100px;
  }
  .sp-about-image-wrapper{
    width: 85vw;
    height: 85vw;
  }
  .what-is-sp-heading h2{
    font-size: 34px;
  }
  .what-is-sp-wrapper{
    padding-top: 150px;
    padding-bottom: 150px;
  }
  .what-is-sp-wrapper{
    width: 70%;
  }
  .we-build-things-wrap{
    flex-direction: column;
    gap:50px;
  }
  .we-build-things-right{
    max-width: 100%;
  }
  .all-it-takes-content .txt-type2{
    font-size: 30px;
  }
  .all-it-takes-content .txt-type span, .all-it-takes-content .all-it-takes-content-top-cont{
    font-size: 40px;
  }
  .all-it-takes-ticker-text{
    font-size: 32px;
  }
  .sp-about-orbit{
    display: none;
  }
  .good-good-text{
    display: none;
  }
  .good-good-row-text{
    position: static;
  }
  .culture-banner-wrap{
    flex-direction: column;
    padding-top: 70px;
    gap: 50px;
    height: 100%;
    align-items: baseline;
  }
  .culture-banner-left{
    overflow: visible;
  }
  .culture-pillars-wrap{
    padding-left: 50px;
    padding-right: 50px;
  }
  .cross-cultured-text{
    font-size: 50px;
  }
  .cross-cultured-wrap{
    padding: 107px 0px;
  }
  .our-guiding-tenets-box{
    width: 100%;
  }
  .our-guiding-tenets-box-wrap {
    height: 69vw;
    width: 69vw;
}
.pillars-drive-content-slider{
  display: block !important;
}
.pillars-drives-content{
  display: none;
}
.pillars-drives-content-wrap{
  position: static;
}
.culture-pillars{
  height: 100%;
}
.culture-pillars-wrap{
  padding-bottom: 80px;
}
.pillars-images{
  margin-top: 0px;
}
.culture-pillars{
  position: relative;
}
#sliderOwl.owl-carousel, #sliderOwl.owl-carousel .owl-item{
  position: static;
}
#sliderOwl.owl-carousel .owl-stage-outer{
  position: static;
}
#sliderOwl.owl-carousel .owl-stage{
  position: static;
}
#sliderOwl.owl-theme .owl-dots{
  position: absolute;
  bottom: 20px;
  width: 100%;
  left: 0;
  justify-content: center;
}
#sliderOwl.owl-theme .owl-dots .owl-dot span{
  width: 4vw;
  height: 4vw;
  background: #414141;
}
#sliderOwl.owl-theme .owl-dots .owl-dot.active span, #sliderOwl.owl-theme .owl-dots .owl-dot:hover span{
  background:#D8031D;
}
.pillars-drives-content-head{
  line-height: 104%;
}
.our-guiding-tenets{
  overflow: hidden;
}
.sp-about-banner-wrapper.about-page .sp-about-banner-heading{
    max-width: 40ch;
}
.sp-about-banner{
    height: auto;
}
.spstr-card{
  height: 25vmax;
}
    .services-banner-heading h1 , .select-works-sp-left h1{
        font-size: 58px;
    }
}
@media only screen and (max-width:767px){
  h2{
    font-size: 70px;
  }
  .sp-project-inner-banner-wrapper{
    width: 100%;
  }
  .sp-banner-home{
      min-height:calc(100vh - 70px) ;
  }
  .sp-pro-inner-image{
    padding-top: 120%;
    border-radius: 0px;
  }
  .sp-about-banner-wrapper.about-page{
      padding-top: 60px;
  }
  .tabcontent{
    flex-direction: column;
    gap: 50px;
  }
  .sticky-project-nav{
    width: 100%;
  }
  .sp-quote-body h3 {
    font-size: 24px;
  }
  .sp-quote-section {
    padding-top: 100px;
  }
  .sp-project-images {
    padding-top: 100px;
  }
  .sp-project-images-top-wrapper .sp-project-image{
    width: 100%;
  }
  .sp-project-images-top-wrapper{
    flex-direction: column;
  }
  .sp-project-images-bottom-wrapper .sp-project-image{
    padding-top: 44%;
  }
  .yg-quote-body h3 {
    font-size: 28px;
  }
  .footer-bottom-left, .footer-bottom-right{
    flex-direction: column;
    align-items: center;
  }
  .footer-bottom-wrapper{
    gap: 20px;
  }
  h3{
    font-size: 47px;
  }
  p.small {
    font-size: 14px;
  }
  .footer-top-left-container{
    text-align: center;
    margin-top: 100px;
  }
  .footer-top-circles{
    justify-content: center;
  }
  .footer-top-form form{
    width: 90%;
    margin: 0 auto;
  }
  .footer-top-form button, .footer-top-form input[type="submit"]{
    right: 7%;
    width: 30%;
    background-color:white;
  }
  .footer-top-form input{
    width: 90%;
  }

  .sp-are-you-molecules{
    margin: 0 auto;
  }
  .sp-are-you-heading{
    font-size: 36px;
  }
  .sp-are-you-wrapper{
    padding: 0 20px;
  }
  .footer-top-left{
    width: 100%;
    height: 100%;
  }
  .footer-top-left-container{
    margin: 200px 0 30px 0;
    width: 90%;
  }
  .footer-wrapper.in-viewport .footer-top-left, .footer-wrapper.was-in-viewport .footer-top-left{
    clip-path: circle(100% at 51% 94%);
  }
  .sp-menu-link {
    font-size: 50px;
  }
  .sp-menu-secondary .sp-menu-secondary-link{
    font-size: 20px;
  }
  .simpleplan-hamburger-wrapper{
    padding-top: 5vh;
    flex-direction: column;
    gap: 50px;
  }
  .simpleplan-menu-text{
    font-size: 16px;
  }
  .simpleplan-menu-text-wrapper{
    height: 24px;
  }
  .header-contents-wrapper{
    padding: 20px;
  }
  .simpleplan-logo img{
    width: 130px;
  }
.sp-menu-second{
  display: block;
}
body.menu-open .simpleplan-menu-text-wrapper span {
  transform: translateY(-24px);
}
.sp-menu-second-wrapper{
  justify-content: space-between;
  flex-direction: column;
}
.sp-menu-links{
  gap: 30px;
}
.sp-menu-secondary{
  gap: 20px;
}
.simpleplan-menu-text{
  font-size: 16px;
}
p {
  font-size: 16px;
}
.sp-proj-exp-content{
  max-width: 90%;
}
.sp-proj-exp-image{
  padding-top: 90px;
}
.sp-proj-exp-image-wrap{
  padding-top: 80%;
}
.sp-about-banner-heading h1{
  font-size: 34px;
}
.what-is-sp-heading h2{
  font-size: 24px;
}
.what-is-sp-wrapper{
  width: 90%;
}
.mission-vision-sp-wrap{
  flex-direction: column;
}
.mission-vision-sp-wrap .mission-vision-content-wrap:nth-child(1){
  width: 100%;
}
.mission-vision-sp-wrap .mission-vision-content-wrap:nth-child(2){
  width: 100%;
}
.we-build-things-wrap {
  padding: 73px 20px;
}
.mission-vision-sp-wrap{
  padding: 73px 20px;
}
.sp-about-banner-wrapper{
  padding-top: 120px;
}
.what-is-sp-wrapper{
  padding-top: 73px;
  padding-bottom: 73px;
}
.all-it-takes-content-top{
  flex-direction: column;
  justify-content: center;
}
.all-it-takes-ticker-text{
  font-size: 26px;
}
.good-good{
  padding: 40px 20px;
}
.good-good-row-text{
  font-size: 30px;
}
.all-it-takes-sp{
  position: relative;
  overflow: hidden;
}
.culture-banner-wrap{
  padding-left: 20px;
}
.culture-banner-head{
  font-size: 56px;
}
.culture-banner-img {
  width: 136px;
  height: 80px;
}
.culture-banner-circle{
  width: 70px;
  height: 70px;
}
.culture-banner-wrap{
  justify-content: start;
  padding-bottom: 0px;
}
.culture-pillars-wrap{
  padding-top: 0px;
  padding-left: 20px;
  padding-right: 20px;
}
.pillars-image-bottom{
  width: 64px;
}
.pillars-image-top{
  width: 40px;
}
.pillars-image-top svg{
  width: 100%;
  height: 100%;
}
.culture-pillars{
  height: 100%;
}
.cross-cultured-img {
  width: 68vw;
  height: 50vw;
}
.cross-cultured-text{
  font-size: 29px;
}
.cross-cultured-wrap {
  padding: 70px 0px;
}
.our-guiding-tenets-wrap {
  padding: 65px 20px 109px 21px;
}
.our-guiding-tenets-box{
  min-height: 366px;
}
.our-guiding-tenets-box-wrap {
  height: 90vw;
  width: 90vw;
}
.we-give-damn-top-head{
  font-size: 32px;
}
.we-give-damn-top-label{
  font-size: 10px;
}
.we-give-damn-top{
  padding: 0 20px;
}
.we-give-damn-bottom{
  padding-top: 90px;
}
.our-guiding-tenets-box-head{
  font-size: 10px;
}
.our-guiding-tenets-box-body{
  font-size: 14px;
}
.our-guiding-tenets{
  overflow: hidden;
}
.services-banner .single-question h4, .questions.specific-ques .single-question h4{
  font-size: 16px;
}
.services-banner .single-question ul li, .questions.specific-ques .single-question ul li{
  font-size: 12px;
}
.services-banner .single-question, .questions.specific-ques .single-question{
  max-width: 100%;
  width: 300px;
  left: 5px;
  margin-left: 0px;
  padding: 1.5em;
}
.services-banner .single-question .close, .questions.specific-ques .single-question .close{
  right: 1.5em;
  top: 1.5em;
}
.circle-5{
  display: none;
}
#sliderOwl.owl-theme .item{
  padding: 5px 0;
}
.our-guiding-tenets-box-wrap:hover{
  background-color: transparent;
}
.our-guiding-tenets-box-wrap:hover .our-guiding-tenets-box-head{
  color: #D8031D;
}
.our-guiding-tenets-box-wrap:hover .our-guiding-tenets-box-body{
  color: #5F5F5F;
}
.spstr-card{
  height: 40vmax;
}
.related-section{
  padding-bottom: 100px;
}
    .services-banner-heading h1, .select-works-sp-left h1 {
        font-size: 48px;
    }
}
/* .swipe-section {
  position: relative;
  height: inherit;
  width: 100%;
  overflow: hidden;
}

.swipe-section section {
  position: absolute;
  width: 100%;

} */

.arrow-svg{
  position: absolute;
  bottom: 25%;
  right: 0;
  left: 0;
  opacity: 0;
  text-align: center;
  margin: 0 auto;
}
.arrow-svg svg{
  transform: rotate(90deg) scale(1.2); 
  -webkit-animation-name: blinking;
	-webkit-animation-duration: 0.6s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:ease-in-out;
	-webkit-animation-direction: alternate;
}

@keyframes blinking {
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}



.sp-service-deliv-body.flex-sb{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cardcount{
  display: flex;
  gap: 20px;
}
.cardcount p{
font-size: 18px;
font-weight: 400;
line-height: 27px;
letter-spacing: 1px;
text-align: right;
color: #6F6F6F;
}
.sp-serv-deliv-deliverables-wrapper.flex.o-auto{
  display: flex;
  overflow-x: auto;
  flex-wrap: nowrap !important;
  position: sticky;
  top: 0;
}

.sp-serv-deliv-deliverables-wrapper.flex.o-auto::-webkit-scrollbar{
  display: none;
}
.sp-serv-deliv-deliverables-wrapper.flex.o-auto .sp-serv-deliv-deliv-head h6 {
  color: #111111;
}

.sp-serv-deliv-deliverables-wrapper.flex.o-auto a{
  min-width: 400px;
}
.count p{
color: #111111;
font-size: 26.95px;
font-style: italic;
font-weight: 200;
line-height: 40.42px;
letter-spacing: 1.6842106580734253px;
text-align: left;

}
.learnmorecta a{
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
line-height: 21px;
letter-spacing: 2px;
text-align: left;
color: #D8031D;
opacity:0;
}
.sp-serv-deliv-deliverables-wrapper.flex.o-auto .sp-serv-deliv-deliv-body {
  padding-top: 70px;
}
.sp-serv-deliv-deliverables-wrapper.flex.o-auto .sp-serv-deliv-deliv-body p {
  padding-top: 14px;
}
.learnmorecta{
  padding-top: 40px;
}

.sp-serv-deliv-deliverables-wrapper.flex.o-auto .sp-serv-deliv-deliverable-wrapper{
  /* cursor: none !important; */
  /* height: 100%; */
}
.sp-serv-deliv-deliverables-wrapper.flex.o-auto .sp-serv-deliv-deliverable-wrapper:hover .count p ,.sp-serv-deliv-deliverables-wrapper.flex.o-auto .sp-serv-deliv-deliverable-wrapper:hover .sp-serv-deliv-deliv-head h6
{
  color: #D8031D;
}
.sp-serv-deliv-deliverables-wrapper.flex.o-auto .sp-serv-deliv-deliverable-wrapper:hover .learnmorecta a {
  opacity: 1;
}
.sp-serv-deliv-deliverables-wrapper.flex.o-auto .sp-serv-deliv-deliverable-wrapper:hover{
  background-color: #F8F7F7;
}






@media only screen and (max-width:991px){
  .arrow-svg{
    display: none;
  }
}





/* Contact form : New project additional CSS */

.ct_code p{
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.ct_code p span:nth-child(1) {
    width: 90px;
}
.ct_code p span:nth-child(2) {
    width: calc(100% - 90px);
}
.policy-head h1 {
    color: #111;
}
.footer-top-left-container .name-and-email{
  display: flex;
  gap: 40px;
}

.sp-contact-input.ct-code {
  display: grid;
  align-items: center;
  width: 100%;
  grid-template-columns: 1fr 7fr;
    gap:24px;
}
.sp-contact-input.ct-code .country_code{
  margin-bottom: 20px;
}
.sp-contact-input.ct-code p{
  display: flex;
  flex-direction: column;
}
.sp-contact-input.ct-code span{
  width: 100%;
  display: contents;
}
.sp-contact-input.ct-code .country-select{
max-width: 20px !important;
}
.sp-contact-input.ct-code .country-select.inside input, .sp-contact-input.ct-code .country-select.inside input[type=text]{
max-width: 20px !important;
height: 27px !important;
    border: none!important;
}
#start-a-proj .sp-contact-input.ct-code .country-select.inside input, #start-a-proj .sp-contact-input.ct-code .country-select.inside input[type=text]{
background-color: transparent!important;
border: none !important;
}
.country-select .country-list .country-name, .country-select .country-list .flag {
font-size: 10px !important;
}
.footer-top-mailing-list {
    display: none;
}

@media(max-width:767px){
    .ct_code p {
        flex-direction: column;
    }
    .ct_code p span {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
  h1 {
      font-size: 2em;
  }

  .options {
      font-size: 1em;
  }

  .circles-container {
      flex-direction: column;
      align-items: center;
  }

  .circle-group {
      margin: 20px 0;
  }
}