@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700);
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,300,200,700,600,700italic);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap);

:root {
  --red: #DC2430;
  --header-blue: #233347;
  --green: #56D85E;
  --white: #fff;
  --orange: #FA6400;
  --blue:#287CB3;
  --ani-blue:#1A6EF4;
  --green:#348339;
}

body {
  font-family: "roboto", sans-serif;
    font-weight:400;
    font-size: clamp(14.55px, 0.139vw + 14.106px, 16px);
    padding:0;
    margin:0;
}
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
h1, h2, h3, h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight:800 !important;
    text-transform: uppercase;
    color:#287CB3;
    word-break: normal;
    hyphens: none;
    overflow-wrap: normal;
}
h1 {
  font-size: 48px;
}
h2 {
  font-size: 36px
}
h3 {
  font-size: 30px
}

p span {
  font-weight:700;
  color: var(--orange);
}
header {
    background-color: var(--header-blue);
    position:relative;
    color:#fff;
    margin:0 auto;
}
header:after {
    content:"";
    position:absolute;
    bottom:-2px;
    left:0;
    height:8px;
    width:100%;
    background-color:#fff;
}
header #wrapper {
  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-rows: auto;
  gap: 0px 0px; 
  padding:1em;
}

@media screen and (min-width: 1200px) {

  header #wrapper { 
    padding:0 1rem;
    grid-template-columns: 400px auto;
   }
}

header h1 {
  margin:0;
}
header h1 a {
    display:block;
    background-image: url(../images/logo.svg);
    background-repeat: no-repeat;
    height: 90px;
    overflow: hidden;
    text-indent: 10000%;
    white-space: nowrap;
    background-size: 100%;
    width: 100%;
    max-width: 250px;
    color:#fff;
}
header .branding-logo a {
  background-image: url(../images/logo-red.svg);
}
header .illustration-logo a {
  background-image: url(../images/logo-green.svg);
}
header .c-animation-logo a {
  background-image: url(../images/logo-amber.svg);
}
header h1,
header .branding-logo,
header .illustration-logo,
header .c-animation-logo {
display: flex;
justify-content: flex-start;
}
@media screen and (min-width: 1200px) {

header h1,
header .branding-logo,
header .illustration-logo,
header .c-animation-logo {
justify-content:flex-start;
}
   header h1 a {
    height: 124px;
    max-width: 380px;
    margin:0.5em 0;
}

}

.projects-cta {
  background-color:#2ecc71;
  color:#2c2c2c;
  display:flex;
  justify-content: center;
  padding:0.5rem 0;
}
.projects-cta p {
  position:relative;
  margin:0;
  text-transform: uppercase;
}
.projects-cta p:before {
  content:"";
  position:absolute;
  left: -32px;
  top: -2px;
  bottom:0;
  width:24px;
  height:24px;
  background-image:url(../images/tick.svg);
  background-repeat:no-repeat;
  background-size:24px
}
@media screen and (min-width: 1200px) {

  .projects-cta {
    background-color: transparent;
    color: #2ecc71;
    display: block;
    text-align: center;
    padding: 0.5rem 0;
    width: 30%;
    max-width:360px;
    position: absolute;
    right: 0.5em;
    top: 0.5em;
    border-radius: 10px;
    border: solid 2px #2ecc71;
}
  .projects-cta p:before {
    display:none;
  }

}

main {
    background-color:#ffffff;
    /* padding: 2.5em 10%; */
    position:relative;
    color:#555;
}
.content {
  padding: 2.5rem 1rem;
}
.content h2 {
  position:relative;
  color:var(--header-blue);
  transform-style: preserve-3d;
}

.what-i-offer, .testimonial-area {
  padding: 2.5em;
}
.what-i-offer .content, .testimonial-area .content  {
  padding: 0;
}
.what-i-offer h2 span {
  color:#fff;
}
.what-i-offer h2::before {
  content:"";
  position:absolute;
  transform: translateZ(-1px);
  top: -8px;
  left: 140px;
  background-image:url(../images/heading.svg);
  background-size:100%;
  background-repeat:no-repeat;
  width:160px;
  height:60px;
}

.card-area {
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  padding:1.7em 0;
}
.card {
  width:100%;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
  margin:0 auto 1.7em;
  border-radius:4px;
  padding:1em;
  position:relative;
  background-color:var(--header-blue);
  min-height:420px;
}
.card:hover, .card:focus {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.5), 0 5px 5px -3px rgba(0, 0, 0, 0.5);
}
.card:focus {
  outline: solid 4px var(--orange);
}

.red:before, .amber:before, .green:before {
  content: "";
  position: absolute;
  font-size:1.25em;
  bottom: 0;
  right: 0;
  padding: 0.5em 2.5em 0.5em 0.5em;
  color: #fff;
  background-image: url(../images/arrow-right.svg);
  background-color: var(--header-blue);
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: 95% 50%;
}
.red:before {
  content: "View Digital Design";
}
.amber:before {
  content: "View Character Animation";
}
.green:before {
  content: "View Illustration";
}
.red:after,
.amber:after,
.green:after {
  position:absolute;
  content:"";
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:1;
  background-color:transparent;
  cursor: pointer;
  -webkit-transition-duration: 0.25s; /* Safari */
  transition-duration: 0.25s;

}
.red:hover:after,
.amber:hover:after,
.green:hover:after,
.red:focus:after,
.amber:focus:after,
.green:focus:after
 {
  position:absolute;
  content:"";
  top:0;
  bottom:0;
  left:0;
  right:0;
  z-index:1;
}
.red:hover:after,
.red:focus:after
 {
  background-image:url(../images/branding-faded.svg);
  background-position: 50% 15%;
  background-size:320px;
  background-repeat:no-repeat;
background-color:var(--red);
}
.amber:hover:after,
.amber:focus:after  {
  background-image:url(../images/animation-faded.svg);
  background-position: 50% 15%;
  background-size:320px;
  background-repeat:no-repeat;
  background-color:var(--ani-blue);
}
.green:hover:after,
.green:focus:after  {
  background-image:url(../images/illustration-faded.svg);
  background-position: 50% 15%;
  background-size:320px;
  background-repeat:no-repeat;
  background-color:#348339;
}

.card h3 {
  visibility: hidden;
  position:absolute;
  text-align: right;
  bottom:0.5em;
  right:0.5em;
  z-index:2;
  color:#fff;
}
.card h3:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -40px;
  width: 40px;
  height: 40px;
  background-size: 40px;
  background-image: url(../images/proceed.svg);
  background-repeat: no-repeat;
}
.card:hover h3,
.card:focus h3 {
  visibility: visible;
}
.card > .amber:hover h3{
  color:#555;
}
.digital-img,
.web-design-img,
.illustration-img {
  background-size:cover;
  overflow:hidden;
  background-position:center;
}
.digital-img {
  background-image:url(../images/embellish-you-featured.png);
}
.web-design-img {
  background-image:url(../images/character-animation-2.png);
}
.illustration-img {
  background-image:url(../images/klopp.png);
}

@media screen and (min-width: 640px) {

  .card {
    width:50%
  }

}

@media screen and (min-width: 1024px) {

  .card {
    width:30%;
    margin-bottom:0 auto;
  }

}



.grid {
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  justify-content:flex-start;
  margin:0 auto 6.5em;
}
.grid a {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  justify-content:flex-start;
  position:relative;
  width:100%;
  margin:1em auto;
  border-radius:4px;
  min-height:320px;
  border:solid 1px var(--header-blue);
  cursor:pointer;
  padding-bottom:80px;
  overflow:hidden;
}
@media screen and (min-width: 600px) {
  .grid a {
    width:46%;
  }
}
@media screen and (min-width: 768px) {
  .grid a {
    width:30%;
  }
}
@media screen and (min-width: 1200px) {
  .grid a {
      width: 23%;
  }
}
.grid a img {
  width:100%;
  max-width:100%;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.grid a div {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  position:absolute;
  width:100%;
  bottom:0;
  left:0;
  padding:1em;
  background-color:#fff;
}
.grid a div h3, .grid a div p  {
margin:0;
}
p.item-price {
  color:#000;
}
.grid a:hover, .grid a:focus  {
  border:solid 1px var(--orange);
}
.grid a:focus  {
  outline:solid 4px var(--orange);
  outline-offset: 4px;
}
.grid a:hover img, .grid a:focus img  {
  transform: scale(1.2);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.grid a:hover div, .grid a:focus div  {
  background-color:var(--header-blue);
}
.grid a:hover div h3, .grid a:focus div h3 {
  color:#FF6F0F;
  }
.grid a:hover div p, .grid a:focus div p {
color:#fff;
}
.testimonial-area h2 {
  position: relative;
}
.testimonial-area h2::before {
  content: "";
  position: absolute;
  transform: translateZ(-1px);
  top: -15px;
  left: -30px;
  background-image: url(../images/testimonial-heading.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 106px;
}
@media screen and (min-width: 640px) {
  .testimonial-area h2::before {
    background-size: 340px;
  }
  }



/****** FOOTER ******/


footer {
  position:relative;
  min-height:180px;
  background-color:var(--header-blue);
  color:#fff;
  padding: 1em 2.5em 1em;
}
 
.socials {
display:flex;
flex-wrap:wrap;
flex-direction:row;
}
.socials a {
display:block;
position:relative;
margin-right:1em;
margin-bottom:1em;
}
.socials a:before {
content:"";
display:block;
width:60px;
height:60px;
background-size:60px;
background-repeat:no-repeat;
background-position:center;
}
.socials a span {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.socials a:hover, .socials a:focus {
  border-radius:50%;
  outline:solid 4px #FA6400;
  outline-offset: 4px;
}
.instagram-icon:before {
background-image: url(../images/instagram-icon.svg);
}
.linkedin-icon:before {
background-image: url(../images/linkedin-icon.svg);
}
.email-icon:before {
background-image: url(../images/email-icon.svg);
}

@media screen and (min-width: 640px) {
footer #wrapper {
  grid-template-columns: 1fr 1fr;
  gap:5em;
}
}


/****** CONTACT FORM ******/

.contact-form h2, .connect-with-me h2 {
  color: #fff;
  position: relative;
  font-size: 36px;
  font-weight: 700;
  margin: 0.83rem 0;
}
.contact-form h2 span {
  position: relative;
  color: #fff;
  transform-style: preserve-3d;
}
.contact-form h2::before {
  content: "";
  position: absolute;
  transform: translateZ(-1px);
  top: -10px;
  left: -10px;
  background-image: url(../images/heading-v2.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 210px;
  height: 60px;
}
.connect-with-me h2 span {
  position: relative;
  color: #233347;
  transform-style: preserve-3d;
}
.connect-with-me h2::before {
  content: "";
  position: absolute;
  transform: translateZ(-1px);
  top: -10px;
  left: -10px;
  background-image: url(../images/heading-v3.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 210px;
  height: 60px;
}

.container {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  justify-content: center;
  width:100%;
}
.disclaimer span {
  color:var(--orange);
}


#digi-design:after {
  background-color:#a06868;
}
#digi-design h1 a {
  background-image: url(../images/logo-red.svg);
}

#illustration:after {
  background-color:#62D668;
}
#illustration h1 a {
  background-image: url(../images/logo-green.svg);
}
#web-design:after {
  background-color:#FFC107;
}
#web-design h1 a {
  background-image: url(../images/logo-amber.svg);
}
#c-studies {
  background-color:#fff;
}
.case-studies {
  background-color:#4AA3DE;
  padding: 2.5em;
}
.case-studies h2 {
  color:#233347;
  position:relative;
}
.case-studies h2 span {
  position:relative;
  color:#fff;
  transform-style: preserve-3d;
}
.case-studies h2::before {
  content: "";
  position: absolute;
  transform: translateZ(-1px);
  top: -10px;
  left: 98px;
  background-image: url(../images/heading.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 200px;
  height: 60px;
}


.case-grid {
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  justify-content: space-between;
  padding:1.7em 0;
}
.case-card {
  width:100%;
  max-width:400px;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
  margin:0 auto;
  border-radius:4px;
  position:relative;
  background-color:#fff;
  min-height:420px;
  color:#233347;
  overflow: hidden;
  text-decoration:none;
  border-bottom:solid 4px transparent;
  margin-bottom:1.7em;
}
.case-card img {
  display:block;
  max-width:100%;
  height:auto;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  overflow:hidden;
}
.case-card .card-description {
  padding:1em;
  position:relative;
  background-color: #fff;
}
.case-card .card-description h3 {
  margin-top:0.5em;
}
.case-card .card-description .tag {
  position: absolute;
  display:inline-block;
  margin-right:10px;
  top: -15px;
  left: 0;
  background-color: #134E5E;
  padding: 0.25em 0.5em;
  color: #fff;
  margin: 0;
}
.case-card .card-description .tag:nth-child(2n) {
  top: -15px;
  left: 6em;
}
.case-card .card-description > .animation-tag {
  background-color:#1A6EF4;
}
.case-card .card-description > .illustration-tag {
  background-color:#2e7d32;
}
.case-card .card-description > .print-tag {
  background-color:#802F5B;
}
.case-card .card-description > .branding-tag {
  background-color:#db3633;
}
.case-card:hover, .case-card:focus {
  border-bottom:solid 4px #E66B00;
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.44), 0 3px 14px 2px rgba(0, 0, 0, 0.24), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}
.case-card:focus {
  outline:solid 4px #E66B00;
}
.case-card:hover img, .case-card:focus img  {
  transform: scale(1.2);
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
  overflow:hidden;
}
.case-card:hover .card-description h3,.case-card:focus .card-description h3  {
  color:#FA6400;
}

@media screen and (min-width: 600px) {
  .case-card {
    width:30%;
    margin-bottom:0;
  }
}

/********** CREATIVE PROCESS ***********/

.creative-process {
  display:flex;
}
.creative-process ul {
  display:grid;
  grid-template-columns: 1fr; 
  grid-template-rows:auto;
  gap:1em;
  margin:0;
  padding:0;
}
.creative-process ul li {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  border:solid 1px #233347;
}
.cp-title {
  background-color:#287CB3;
  display:flex;
  justify-content: center;
  align-items: center;
  padding:0 1em;
  position:relative;
  min-height: 80px;
}
.cp-title:before {
  content:"";
  background-color:#233347;
  position:absolute;
  width:60px;
  height:80px;
  top:0;
  left:0;
}
.cp-title h3 {
  color:#fff;
  font-size:24px;
  margin:0;
}
.cp-desc {
display:flex;
flex-wrap:wrap;
justify-content: center;
align-items: center;
padding:1em;
}

@media screen and (min-width: 640px) {

  .creative-process ul {
    grid-template-columns: 1fr 1fr; 
    gap:1.75em;
  }
  .creative-process ul li {
    position:relative;
  }

}

@media screen and (min-width: 1024px) {

  .creative-process ul {
    grid-template-columns: 1fr 1fr 1fr; 
    gap:1.75em 2.5em;
    
  }
  .creative-process ul li:before {
    content: "";
    width: 2.6em;
    height: 5px;
    position: absolute;
    right: -42px;
    top: 50%;
    background-color: orange;
}
.creative-process ul li:nth-child(3n):before, .creative-process ul li:last-of-type:before {
  content: "";
  width: 0;
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.creative-process ul li {
border-right:solid 2px orange;
}
.creative-process ul li:nth-child(3n), .creative-process ul li:last-of-type  {
  border-right:solid 1px #233347;
  }

}


svg { 
  position:absolute;
  z-index:1; 
}

.digi-content {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  justify-content: center;
  width:50%;
}
.digi-content p { 
  font-size:1.25em;
}
.digi-featured {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  justify-content: center;
  width:50%;
}
.digi-featured img {
  width: auto;
  position: absolute;
  max-width: 100%;
  z-index: 2;
  top: 3em;
  right: 0;
}

/**** MENU *****/


nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
}
.menu,
.submenu {
  list-style-type: none;
}
.item {
  padding: 1rem 0;
  text-transform: uppercase;
}
.item.button {
  padding: 9px 5px;
}
.item:not(.button) a:hover,
.item a:hover::after {
  background: #217BB5;
  border-radius: 5px;
}
.item:not(.button) a:focus,
.item a:focus::after{
  outline:solid 4px #FA6400;
  outline-offset: 4px;
  background: #217BB5;
  border-radius: 5px;
}
/* Mobile menu */
.menu {
  width:100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  margin:0;
  padding:0 2rem 0 0;
  position:relative;
}
.menu li a {
  color: #fff;
  text-decoration: none;
  padding: 1em;
  font-size: 18px;
  transition: 0.3s;
  text-transform: uppercase;
}
.menu li.subitem a {
  padding: 15px;
}
.toggle {
  order: 1;
  font-size: 20px;
  position:absolute;
  right:0;
  top:-4rem;
}
.toggle a {
    border: solid 2px #E66B00;
}
.item {
  order: 3;
  width: 100%;
  text-align: center;
  display: none;
}
.active .item {
  display: block;
}

/* Tablet menu */
@media all and (min-width: 700px) {
  .toggle {
    flex: 1;
    text-align: right;
    order: 2;
  }
  /* Button up from tablet screen */
  .menu li.button a {
    padding: 10px 15px;
    margin: 5px 0;
  }
}
/* Desktop menu */
@media all and (min-width: 960px) {
  .item {
    order: 1;
    position: relative;
    display: block;
    width: auto;
  }

  .toggle {
    display: none;
  }
}





.featured {
  background: #2c3e50;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #3498db, #2c3e50);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #3498db, #2c3e50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  position:relative;
  color:#fff;
}
.intro-text {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items:center;
}
.intro-text div {
  background-color:#fff;
  width:100%;
  padding:1.7em;
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  position:relative;
}
.intro-text div h2.slogan {
  font-size:40px;
  margin-bottom:0;
}
.intro-text div h2 span.typed-text {
    color: #FA6400;
}
.intro-text div h2 span.cursor {
    display: inline-block;
    background-color: #ccc;
    margin-left: 0.1rem;
    width: 3px;
    animation: blink 1s infinite;
}
.intro-text div h2 span.cursor.typing {
    animation: none;
}
@keyframes blink {
  0%  { background-color: #ccc; }
  49% { background-color: #ccc; }
  50% { background-color: transparent; }
  99% { background-color: transparent; }
  100%  { background-color: #ccc; }
}

.intro-text div p {
    font-size:1.25em;
    color:#233347;
}
.intro-image {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position:relative;
}
.intro-image img {
  max-width:60%;
  height:auto;
}

@media screen and (min-width: 640px) {

  .featured #wrapper {
    grid-template-columns: 1fr 1fr; 
  }

  .intro-text {
    padding-left:2.5em;
  }
  .intro-text div {
    background-color:#fff;
    width:100%;
    padding:1.7em;
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    position:relative;
    border-radius:50px;
  }
  .intro-text div:after {
    content: '';
    position: absolute;
    top: 90px;
    right: -95px;
    width: 0;
    height: 0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 100px solid #ffffff;
  }
}

.case-study-details {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  padding-left:1em;
  margin:0;
  list-style: none;
  border:solid 1px #fff;
  max-width:60%;
}
.case-study-details .category {
  font-family: 'Montserrat', sans-serif;
  font-weight:800;
  text-transform: uppercase;
  margin:1em 0 0;
}
.case-study-details li p {
  margin:0.25em 0 1em;
}

.case-study .content ul {
  list-style:none;
  padding:0;
}
.case-study .content ul li {
  background-image: url(../images/list-style.svg);
  background-size: 24px;
  background-repeat: no-repeat;
  background-position: left 25%;
  padding: 0.5em 0;
  padding-left: 32px;
}



/******* CHARACTER ANIMATION PAGE *******/

.f-design #wrapper, .f-case #wrapper {
  grid-template-columns: 1fr; 
  padding:2.5em;
}

.f-design, .f-case {
  background: #2c3e50;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #3498db, #2c3e50);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #3498db, #2c3e50); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  position:relative;
  color:#fff;
  display: grid; 
  grid-template-columns: 1fr auto; 
  border-bottom:solid 6px #233347; 
}
.f-design div, .f-case div {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  justify-content: center;
}
.f-design div:nth-child(2), .f-case div:nth-child(2) {
  display:none;
}
.f-design div img {
  width:100%;
  height:auto;
  clip-path: circle(50% at 50% 50%);
}
.f-case div img {
  width:100%;
  height:auto;
}
.f-design h1, .f-case h1 {
  color:#fff;
}
@media screen and (max-width:640px) {
  .f-case h1 {
    font-size:36px;
}
.case-study-details {
  max-width:100%;
}
}
@media screen and (min-width: 1024px) {
  .f-design #wrapper, .f-case #wrapper {
    grid-template-columns: 1fr auto; 
    gap: 2.5em;
  }
  .f-design div:nth-child(2), .f-case div:nth-child(2) {
    display:block;
    align-items: flex-end;
    margin: 0 auto;
  }
}

/******* STANDARD CONTENT PAGE *******/

.standard-content #wrapper {
  grid-template-columns: 1fr; 
  padding:2.5em;
}

.standard-content{
  background: #fff;  /* fallback for old browsers */
  position:relative;
  color:#233347;
  display: grid; 
  grid-template-columns: 1fr auto; 
}
.standard-content div {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  justify-content: center;
}
.standard-content div:nth-child(2) {
  display:none;
}
.standard-content div img {
  width:100%;
  height:auto;
  clip-path: circle(50% at 50% 50%);
}
.standard-content div img {
  width:100%;
  height:auto;
}
.standard-content h1 {
  color:#233347;
}
@media screen and (max-width:640px) {
  .standard-content h1 {
    font-size:36px;
}
}
@media screen and (min-width: 1024px) {
  .standard-content #wrapper {
    grid-template-columns: 1fr auto; 
    gap: 2.5em;
  }
.standard-content div:nth-child(2) {
    display:block;
    align-items: flex-end;
    margin: 0 auto;
  }
}



.branding {
  background: #910505;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #D93838, #910505);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #D93838, #910505); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  position:relative;
  color:#fff;
  display: grid; 
  grid-template-columns: 1fr; 
  border-bottom:solid 6px #233347; 
}
.branding div {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  justify-content: center;
  word-break: break-word;
}
.branding h1 {
  color:#fff;
}
#character-animation, #illustration, #digi-design {
  background-color: #fff; 
  position:relative;
  color:#233347;
  display: grid; 
  grid-template-columns: 1fr; 
}
#character-animation div, #illustration div, #digi-design div  {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  justify-content: center;
  word-break: break-word;
}
#character-animation h1, #illustration h1, #digi-design h1  {
  color:#233347;
  margin-bottom:0;
}
#character-animation h2, #illustration h2, #digi-design h2  {
  color:#233347;
  margin-top:0;
}
#character-animation h2 span  {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#illustration h2 span {
background: linear-gradient(90deg, #56D85E, #348339);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#character-animation h2 span  {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
#digi-design h2 span {
background: linear-gradient(90deg, #7B4397, #DC2430, #E27525);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#character-animation p, #illustration p, #digi-design p {
  font-size:1.25rem;
}

.character-animation, .illustration, .digi-design {
background-color:#233347;
  position:relative;
  color:#fff;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  text-align: center; 
  border-bottom:solid 6px #fff; 
}
.character-animation div, .illustration div, .digi-design div {
  display:grid;
}
.character-animation div > *, .illustration div > *, .digi-design div > * {
  min-width: 0;
  box-sizing: border-box;
} 
.character-animation h2, .illustration h2, .digi-design h2 {
  color:#fff;
}
.character-animation h2 span {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.illustration h2  span {
background: linear-gradient(90deg, #56D85E, #348339);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.digi-design h2  span {
background: linear-gradient(180deg, #7B4397, #DC2430, #E27525);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.character-animation p, .illustration p, .digi-design p  {
  color:#fff;
}
.box {
  text-align: left;
}
.box h2 {
  color:#233347;
  margin-bottom:0;
  font-size: 150%;
}
.box.c-ani h2 span {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.box.vect-ill h2 span {
  background: linear-gradient(90deg, #56D85E, #348339);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.box.digi-design h2 span {
  background: linear-gradient(90deg, #7B4397, #DC2430, #E27525);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.box p {
  color:#233347;
}



.branding .featured-hero, .illustration .featured-hero,#character-animation .featured-hero,#illustration .featured-hero,#digi-design .featured-hero, .character-animation .featured-hero {
  margin: 0 auto;
  display:none;
}
.branding #wrapper, .illustration #wrapper,#character-animation #wrapper, #illustration #wrapper,#digi-design #wrapper,.digi-design #wrapper, .character-animation #wrapper  {
  padding:2.5em;
}

@media screen and (min-width: 1200px) {


  .branding .featured-hero, .illustration .featured-hero,#character-animation .featured-hero, #illustration .featured-hero, #digi-design .featured-hero, .character-animation .featured-hero {
    display:block;
  }
}


.service-timeline {
  padding: 50px 20px;
  margin: 0 auto;
  max-width: 1000px;
  color: var(--dark-blue);
  display: grid;
  grid-template-columns: 1fr;
}

.service-timeline ol {
  position: relative;
  list-style: none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap: wrap;
}

.service-timeline ol::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--green);
}

.service-timeline ol li .item-inner {
  padding: 20px 180px;
  margin-bottom: 8vh;
}

.service-timeline ol li .time-wrapper {
  position: relative;
  font-size: 4.5rem;
  font-weight: bold;
  line-height: 0.9;
}
.service-timeline ol li .time-wrapper iframe {
  width: 100%;
}

.service-timeline ol li .time-wrapper::before,
.service-timeline ol li .time-wrapper::after {
  content: "";
  position: absolute;
  background: var(--green);
}
.t-char-ani ol li .time-wrapper::before,
.t-char-ani ol li .time-wrapper::after {
  background-color: #3b82f6;
}
.t-illust ol li .time-wrapper::before,
.t-illust ol li .time-wrapper::after {
  background-color: #56D85E;
}
.t-brand ol li .time-wrapper::before,
.t-brand ol li .time-wrapper::after {
  background-color:  #DC2430;
}

.service-timeline ol li .time-wrapper::before {
  top: 50%;
  left: -180px;
  transform: translateY(-50%);
  width: 0;
  height: 3px;
  transition: width 0.8s linear;
}

.service-timeline ol li .time-wrapper::after {
  top: calc(50% - 8px);
  left: -60px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: scale(0);
  transform-origin: left center;
  transition: all 0.4s linear;
}
.t-char-ani ol::before {
  background-color: #3b82f6;
}
.t-illust ol::before {
  background-color: #56D85E;
}
.t-brand ol::before {
  background-color: #DC2430;
}


.service-timeline ol li img,
.service-timeline ol li .details > * {
  opacity: 0;
  transition: 0.5s;
}

.service-timeline ol li img {
  display: inline-block;
  transform: translateY(-30px);
}

.service-timeline ol li .details > * {
  transform: translateY(30px);
}

.service-timeline ol li .details h3 {
  font-size: 2rem;
  line-height: 1;
  margin: 15px 0;
}
.time-wrapper {
  background-color:#fff;
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
.time-wrapper img {
  width:100%;
  max-width:100%;
  height:auto;
}
.details {
  background-color: #fff;
  padding:1.7rem;
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}
.details h2 {
  font-size:150%;
}
.details h2, .details p {
  color:#233347;
  word-break: normal;
  hyphens: none;
  overflow-wrap: break-word;
}

/* ANIMATION STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.service-timeline ol li.in-view .time-wrapper::before {
  width: 120px;
}

.service-timeline ol li.in-view .time-wrapper::after {
  transition-delay: 0.8s;
  transform: scale(1.5);
}

.service-timeline ol li.in-view img,
.service-timeline ol li.in-view .details > * {
  opacity: 1;
  transform: none;
}

.service-timeline ol li.in-view img {
  transition-delay: 1.3s;
}

.service-timeline ol li.in-view .details h3 {
  transition-delay: 1.5s;
}

.service-timeline ol li.in-view .details p {
  transition-delay: 1.7s;
}

/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 700px) {
  .service-timeline ol li .item-inner {
    padding: 20px 40px;
  }

  .service-timeline ol li .time-wrapper::before {
    display: none;
  }

  .service-timeline ol li .time-wrapper::after {
    left: -45px;
    transform-origin: center;
  }

  .service-timeline ol li.in-view .time-wrapper::after {
    transition-delay: 0s;
  }

  .service-timeline ol li.in-view img {
    transition-delay: 0.5s;
  }

  .service-timeline ol li.in-view .details h3 {
    transition-delay: 0.7s;
  }

  .service-timeline ol li.in-view .details p {
    transition-delay: 0.9s;
  }
}



/******* COMING SOON PAGE *******/

.coming-soon {
  background-color:transparent !important;
}
  .intro-text .coming-soon:after{
display: none !important;
}
.coming-soon h2 {
  color:#fff;
  font-size:4em;
  text-align: center;
}



/******* WHAT I OFFER LANDING PAGE *******/


.service-area{
  display:grid;
  grid-gap:1em;
}
.service-area div {
  padding:1em;
}
.service-area div h2,.service-area div p {
  color:#fff;
}
.service-area .description {
  display:flex;
  flex-direction:column;
  justify-content: center;
  align-items: flex-start;
  padding:0 2.5rem 2rem;
}
.service-area .description .cta-btn {
  padding:0.5em 1em;
  border:solid 4px #fff;
  background-color:transparent;
  font-weight:700;
  display:inline-block;
  color:#fff;
  text-decoration:none;
  cursor: pointer;
  border-radius:4px;
}
.service-area .description .cta-btn:after {
  content: "\00A0\00BB";
}
.service-area .description .cta-btn:hover, .service-area .description .cta-btn:focus {
  padding:0.5em 1em;
  border:solid 4px #fff;
  background-color:#fff;
  font-weight:700;
  display:inline-block;
  color:inherit;
  text-decoration:none;
  cursor: pointer;
}
.service-area .description .cta-btn:focus {
  outline:solid 4px #FA6400;
  outline-offset: 4px;
}
.sa-branding {
  background-color:#fff;
}
.sa-illustration {
  background-color:#fff;
}
.sa-character {
  background-color:#fff;
}
.sa-branding #wrapper,
.sa-illustration #wrapper,
.sa-character #wrapper {
  grid-template-columns:1fr;
  padding:0;
  margin:0;
}
.sa-branding #wrapper .description,
.sa-illustration #wrapper .description,
.sa-character #wrapper .description {
  order:2;
}
.sa-branding #wrapper .image,
.sa-illustration #wrappe .image,
.sa-character #wrapper .image {
  order:1;
}
.sa-branding #wrapper .image {   background: linear-gradient(90deg, #7B4397, #DC2430, #E27525); }
.sa-illustration #wrapper .image { background: linear-gradient(90deg, #348339, #56D85E); }
.sa-character #wrapper .image { background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); }

@media screen and (min-width: 1024px) {
  .sa-branding #wrapper .description,
  .sa-character #wrapper .description {
    order:2;
  }
    .sa-illustration #wrapper .description {
    order:1;
  }
  .sa-illustration #wrapper .image {
    order:2;
  }
}
.sa-branding div h2,.sa-branding div p,
.sa-illustration div h2,.sa-illustration div p,
.sa-character div h2,.sa-character div p {
  color:#2c2c2c;
}
.sa-branding div h2,.sa-branding div h3,
.sa-illustration div h2,.sa-illustration div h3,
.sa-character div h2,.sa-character div h3 {
  color:#2c2c2c;
  margin:0.75rem 0 0;
}
.sa-branding div h3 span,
.sa-illustration div h3 span,
.sa-character div h3 span {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sa-branding div h3 span {  
  background: linear-gradient(90deg, #7B4397, #DC2430, #E27525);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; 
}
.sa-illustration div h3 span {   
  background: linear-gradient(90deg, #348339, #56D85E);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; 
}
.sa-character div h3 span {   
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; 
}

.sa-branding  .description .cta-btn,
.sa-illustration  .description .cta-btn,
.sa-character  .description .cta-btn {
  padding:0.5em 1em;
  border:solid 4px transparent;
  background-color:#FA6400;
  font-weight:700;
  display:inline-block;  
  color:#fff;
  text-decoration:none;
  cursor: pointer;
}
.sa-branding  .description .cta-btn:hover,
.sa-illustration  .description .cta-btn:hover,
.sa-character  .description .cta-btn:hover {
  background-color:#287CB3;
    padding:0.5em 1em;
  border:solid 4px transparent;
  font-weight:700;
  display:inline-block;  
  color:#fff;
  text-decoration:none;
  cursor: pointer;
}
.sa-branding .image,
.sa-illustration .image,
.sa-character .image {
/*   min-height:480px; */
  background-size:cover;
  background-repeat:no-repeat;
  background-position: center;
  padding:0;
  display: flex;
  justify-content: center;
}
/* .sa-branding .image img,
.sa-illustration .image img,
.sa-character .image img {
  margin-bottom: -4px;
} */

@media screen and (min-width: 1024px) {
  .sa-branding #wrapper,
  .sa-illustration #wrapper,
  .sa-character #wrapper {
    grid-template-columns:1fr 1fr;
    max-width:100%;
  }
}
@media screen and (min-width: 1366px) {
  .sa-branding #wrapper,
  .sa-illustration #wrapper,
  .sa-character #wrapper {
    grid-template-columns:720px 1fr;
  }
}

#wrapper {
  width:100%;
  margin:0 auto;
}
.spacer {
  display:flex;
  flex-direction:column;
  justify-content: center;
  margin:0 auto;
}
.spacer img {
  width:100%;
  max-width:100%;
  height:auto;
}

@media screen and (max-width: 1024px) {

  .spacer iframe {
    width: 100%;
    max-width: 100%;
  }
}
@media screen and (min-width: 768px) {
  #wrapper {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0px 0px;
    max-width: 1366px;
    margin: 0 auto;
}
}
@media screen and (min-width: 1200px) {

  .profile #wrapper, .case-study #wrapper {
    grid-template-columns: 1fr 1fr; 
  }
  .branding #wrapper, .illustration #wrapper, #character-animation #wrapper, #illustration #wrapper,#digi-design #wrapper,.digi-design #wrapper, .character-animation #wrapper  {
    grid-template-columns: 1fr auto; 
  }
}




button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

[type="checkbox"],
[type="radio"],
[type="range"] {
  appearance: none;
  flex-shrink: 0;
  padding: 0;
  user-select: none;
}

[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
  outline: none;
}

/** Components **/

.fs-form {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.fs-form:where(.fs-layout__2-column) {
  column-gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
}

fieldset {
  display: grid;
  row-gap: 1.5rem;
}

.fs-form:where(.fs-layout__2-column) fieldset {
  column-gap: 1.5rem;
  grid-template-columns: 1fr 1fr;
  grid-column: 1 / -1;
}

.fs-field {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

.fs-label {
  color: #fff;
  display: block;
  font-size: 1rem;
  line-height: 1.25rem;
  text-transform: uppercase;
}

.fs-description {
  color: #fff;
  display: block;
  font-size: 1rem;
  line-height: 1.25rem;
}

.fs-button-group {
  display: flex;
  column-gap: 1.5rem;
}

.fs-form:where(.fs-layout__2-column) .fs-button-group {
  grid-column: 1 / -1;
}

.fs-button {
  background-color: #FF6C0A;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  padding: 0.75rem 2rem;
  transition-duration: 200ms;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  border:none;
}

.fs-button:hover {
  background-color: #287CB3;
}

.fs-button:focus-visible {
  background-color: #287CB3;
  outline:solid 4px #FA6400;
  outline-offset: 4px;
}

.fs-input,
.fs-select {
  appearance: none;
  border-radius: 4px;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: #2c2c2c;
  font-size: 1rem;
  height: 3rem;
  line-height: 1.5rem;
  outline: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

.fs-input:focus-visible,
.fs-select:focus-visible {
  outline:solid 4px #FA6400;
  outline-offset: 4px;
}

.fs-input::placeholder {
  color: var(--color-text-muted);
}

.fs-checkbox-group,
.fs-radio-group {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
}

.fs-checkbox-field,
.fs-radio-field {
  column-gap: 0.5rem;
  display: flex;
}

:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
  margin-top: 0.25rem;
}

.fs-checkbox-wrapper,
.fs-radio-wrapper {
  align-items: center;
  display: flex;
  height: 1.25rem;
}

.fs-checkbox,
.fs-radio {
  background-color: #fff;
  border: 1px solid var(--color-border-default);
  height: 1.25rem;
  width: 1.25rem;
}

.fs-checkbox {
  border-radius: 0.25rem;
}

.fs-radio {
  border-radius: 100%;
}

.fs-checkbox:checked,
.fs-radio:checked {
  background-color: var(--color-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: transparent;
}

.fs-checkbox:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.fs-radio:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
  border-color: var(--color-border-active);
  outline: 4px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-checkbox:checked:focus-visible,
.fs-radio:checked:focus-visible {
  border-color: transparent;
}

.fs-select {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.625em 1.625em;
  padding-right: 2.875rem;
}

.fs-slider {
  background: transparent;
  cursor: pointer;
  height: 1.25rem;
  width: 100%;
}

.fs-slider::-moz-range-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-webkit-slider-runnable-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-moz-range-thumb {
  background-color: var(--color-primary);
  border: none; /* Removes extra border that FF applies */
  border-radius: 50%;
  height: 1.25rem;
  width: 1.25rem;
}

.fs-slider::-webkit-slider-thumb {
  appearance: none;
  background-color: var(--color-primary);
  border-radius: 50%;
  height: 1.25rem;
  margin-top: -0.375rem; /* Centers thumb on the track */
  width: 1.25rem;
}

.fs-slider:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-switch-field {
  align-items: center;
  column-gap: 0.75rem;
  display: flex;
  justify-content: space-between;
}

.fs-switch {
  background-color: var(--color-background-alt);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e");
  background-position: left center;
  background-repeat: no-repeat;
  border-radius: 1.25rem;
  cursor: pointer;
  height: 1.25rem;
  transition-duration: 200ms;
  transition-property: background-color, background-position;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 2.5rem;
}

.fs-switch:checked {
  background-color: var(--color-primary);
  background-position: right center;
}

.fs-switch:focus-visible {
  outline: 4px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea {
  appearance: none;
  border-radius: 4px;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: #2c2c2c;
  font-size: 1rem;
  line-height: 1.5rem;
  outline: none;
  padding: 0.5rem 0.75rem;
  resize: vertical;
  min-height:100px;
}

.fs-textarea:focus-visible {
  outline:solid 4px #FA6400;
  outline-offset: 4px;
}

.fs-textarea::placeholder {
  color: #2c2c2c;
}
.breadcrumb {
  margin: 0 -1rem;
}
.breadcrumb ol {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0.5rem 1rem;
}
.breadcrumb ol li {
  list-style: none;
  position:relative;
  text-transform: uppercase;
}
.breadcrumb li:not(:first-child) {
  margin-left: 2rem;
}
.breadcrumb li:not(:first-child):before {
  content: '';
  display: block;
  top: 0.35rem;
  left: -1.25rem;
  width: 0.4rem;
  height: 0.4rem;
  margin: auto 0;
  transform: rotate(45deg);
  border: solid #fff;
  border-width: 1px 1px 0 0;
  position:absolute;
}
.breadcrumb ol li a {
  color:#fff;
  text-transform: uppercase;
}
#character-animation ol li a , #illustration ol li a, #digi-design ol li a {
  color:#233347;
}
#character-animation li:not(:first-child):before, #illustration li:not(:first-child):before, #digi-design li:not(:first-child):before {
  content: '';
  display: block;
  top: 0.35rem;
  left: -1.25rem;
  width: 0.4rem;
  height: 0.4rem;
  margin: auto 0;
  transform: rotate(45deg);
  border: solid #233347;
  border-width: 1px 1px 0 0;
  position:absolute;

}

/* PRICING PAGE */


.popular-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.popular-badge.c-ani {
  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
}
.popular-badge.vect-ill {
  background: linear-gradient(90deg, #56D85E, #348339);
}
.popular-badge.creative-partner {
    background: linear-gradient(90deg, #7B4397, #DC2430, #E27525);
}

.pricing-card {
  transition: all 0.3s ease;
  position: relative;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.popular-card {
  border: 2px solid #3b82f6;
  box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3);
}

.feature-item {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}

.feature-item:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: bold;
}

.section-divider {
  width: 100px;
  height: 4px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  margin: 20px auto;
  border-radius: 2px;
}
.mb-20 {
  margin-bottom:0!important;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  position: relative;
}
.gap-8 {
    width: 100%;
}
.btn {
  width: auto;
  justify-self: center;
  display: inline-block;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  background-color: #E66B00;
  padding: 1rem 2rem;
  margin: 0 auto;
  border-radius: 10px;
  margin-bottom: 5rem;
  text-align: center;
}
.btn:hover,.btn:focus {
  background: #217BB5;
  outline:solid 4px #FA6400;
  outline-offset: 4px;
}
.lets-chat {
  display:none;
} 

@media screen and (min-width: 1024px) {
.lets-chat {
  display:block;
  position: absolute;
  bottom: -5rem;
  left: 16rem;
  z-index: 111;
}

}
.pricing {
  display:flex;
  flex-wrap:wrap;
  flex-direction:column;
  width:100%;
  padding:2.5rem 5%;
  justify-content: center;
  align-items: center;
}
.pricing h2 {
  color:#233347;
  position:relative;
  border-bottom:solid 1px #ccc;
  padding-bottom:1.5rem;
}

.pricing h2 span.c-ani {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pricing h2 span.vect-ill {
      background: linear-gradient(90deg, #56D85E, #348339);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pricing h2 span.creative-partner {
      background: linear-gradient(90deg, #7B4397, #DC2430, #E27525);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pricing-intro {
  align-items: center;
}
.pricing-grid {
  display:grid;
  grid-template-columns: 1fr;
  gap:2.5rem;
  width:100%;
  padding:2rem 0;
}
@media screen and (min-width: 1024px) {
.pricing-grid {
  grid-template-columns: 1fr 1fr 1fr;
}
}
.price-box {
  position:relative;
  padding: 0 1.65rem 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 3px 5px 1px rgba(0, 0, 0, 0.14), 0 3px 10px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}
.price-box h3 {
color:#2c3e50;
margin-bottom:0;
}
.price-box ul {
  padding:0;
  list-style: none;
}
.most-popular {
  border:solid 2px #3b82f6;
}
.most-popular.vect-ill {
  border:solid 2px #348339;
}
.most-popular.creative-partner {
  border:solid 2px #DC2430;
}
.cost {
  font-weight: 700;
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.cost.c-ani {
  color:#ec4899;
}
.cost.vect-ill {
  color:#348339;
}
.cost.creative-partner {
  color:#DC2430;
}
.cost span {
  font-size:1.25rem;
  font-style: italic;
}



.current-project {
  background-color:#233347;
}
.current-project .content {
  padding-bottom:5rem;
}
.current-project .content h2 {
  color:#fff;
} 
.current-project .content h2::before {
  content: "";
  position: absolute;
  transform: translateZ(-1px);
  top: -10px;
  left: 182px;
  background-image: url(../images/heading-v2.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  width: 210px;
  height: 60px;
}
.project-name {
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows: auto;
  gap:1rem;
  background-color:#fff;
  border-radius: 4px;
  width: 95%;
  margin: 0 auto;
  margin-top: 1.7em;
}
@media screen and (min-width: 900px) {
.project-name {
  display:grid;
  grid-template-columns: 480px 1fr;
  gap:1rem;
  background-color:#fff;
  border-radius: 4px;
  width: 95%;
  margin: 0 auto;
  margin-top: 1.7em;
}

}
.project-image {
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center;
}
.project-image img {
  width:480px;
  max-width:100%;
  height:auto;
}
.project-name .description {
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  flex-direction:column;
  padding:2rem;
}