@charset "UTF-8";
/**
 * @license
 * MyFonts Webfont Build ID 4089100, 2021-05-15T18:57:37-0400
 *
 * The fonts listed in this notice are subject to the End User License
 * Agreement(s) entered into by the website owner. All other parties are
 * explicitly restricted from using the Licensed Webfonts(s).
 *
 * You may obtain a valid license at the URLs below.
 *
 * Webfont: BoubaRound-Black by HVD Fonts
 * URL: https://www.myfonts.com/fonts/hvdfonts/bouba-round/black/
 * Copyright: Copyright © 2020 by Hannes von Doehren. All rights reserved.
 *
 *
 *
 * © 2021 MyFonts Inc
*/
/* @import must be at top of file, otherwise CSS will not work */
@import url("//hello.myfonts.net/count/3e650c");
@font-face {
  font-family: "BoubaRound-Black";
  src: url("webFonts/BoubaRoundBlack/font.woff2") format("woff2"), url("webFonts/BoubaRoundBlack/font.woff") format("woff"); }
* {
  box-sizing: border-box; }

html {
  scroll-behavior: unset !important; }

.group:after {
  content: "";
  display: table;
  clear: both; }

body {
  background-color: #fff;
  position: relative; }
  body .container {
    padding-right: 20px;
    padding-left: 20px; }
    body .container h2 {
      font-family: "BoubaRound-Black", "Poppins", sans-serif;
      font-size: 60px;
      color: #200c42;
      margin-bottom: 15px; }
      body .container h2 span {
        color: #f8b827; }
    body .container h3 {
      font-family: "BoubaRound-Black", "Poppins", sans-serif;
      font-size: 32px;
      color: #3f5cbf; }
    body .container p {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      font-size: 16px;
      color: #200c42;
      margin-bottom: 60px; }

.burger-container {
  position: fixed;
  bottom: 80px;
  right: 40px;
  background: #fff;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  box-shadow: 0px 7px 40px rgba(63, 92, 191, 0.45);
  z-index: 1000;
  overflow: hidden;
  display: none; }
  .burger-container .burger {
    display: block;
    width: 40px;
    height: 30px;
    margin: 0;
    float: none;
    left: 20px;
    top: 23px; }
  .burger-container .burger:after {
    content: "";
    display: block;
    position: absolute;
    height: 80px;
    width: 80px; }
  .burger-container .burger-lines {
    height: 7px;
    margin: 0; }
  .burger-container .burger.burger-squeeze.open .burger-lines:before,
  .burger-container .burger.burger-squeeze.open .burger-lines:after {
    left: 0.3em;
    background-color: #f8b827; }
  .burger-container .burger.burger-squeeze .burger-lines,
  .burger-container .burger.burger-squeeze .burger-lines:after,
  .burger-container .burger.burger-squeeze .burger-lines:before {
    height: 6px; }
  .burger-container .burger.burger-squeeze.open .burger-lines,
  .burger-container .burger.burger-squeeze.open .burger-lines:after,
  .burger-container .burger.burger-squeeze.open .burger-lines:before {
    width: 35px;
    height: 6px; }
  .burger-container .burger .burger-lines,
  .burger-container .burger .burger-lines:after,
  .burger-container .burger .burger-lines:before {
    background-color: #48d5e5; }
  .burger-container .burger .burger-lines:before {
    background-color: #f8b827; }
  .burger-container .burger .burger-lines:after {
    background-color: #3f5cbf; }

nav {
  height: 90px;
  position: fixed;
  width: 100%;
  max-width: 220px;
  z-index: 10000;
  top: 0;
  right: 0; }
  nav .container {
    position: relative; }
    nav .container .col-sm-6:nth-of-type(2) {
      position: relative; }
    nav .container img {
      margin-top: 30px;
      height: 30px; }
  nav ul {
    top: 40px;
    position: absolute;
    list-style: none;
    right: 30px;
    margin-bottom: 0; }
    nav ul .navIcon {
      position: absolute; }
    nav ul .navIcon1 {
      top: 16px;
      right: 19px; }
    nav ul .navIcon2 {
      top: 19px;
      right: 18px; }
    nav ul .navIcon3 {
      top: 19px;
      right: 21px; }
    nav ul .navIcon4 {
      top: 18px;
      right: 18px; }
    nav ul .hideInit {
      opacity: 0;
      transition: all 0.2s ease;
      margin-right: 62px;
      transition: all 0.2s ease;
      text-align: right;
      display: inline-block; }
    nav ul a {
      display: inline-block;
      text-align: right;
      font-family: "BoubaRound-Black", Poppins, sans-serif;
      font-weight: 700;
      font-size: 18px;
      color: #fff;
      width: 100%;
      max-width: 220px;
      padding: 20px 0;
      background-color: none;
      text-decoration: none;
      border-radius: 60px;
      position: relative;
      z-index: 0;
      transition: all 0.5s ease;
      transition: background-color 0.2s ease;
      max-height: 64px;
      margin-bottom: 20px; }
      nav ul a::before {
        content: "";
        position: absolute;
        width: 64px;
        height: 64px;
        border-radius: 60px;
        z-index: -1;
        top: 0;
        right: 0;
        transition: all 0.5s ease;
        float: left; }
    nav ul .paynesGrey::before {
      background-color: #200c42; }
    nav ul .oceanBlue::before {
      background-color: #3f5cbf; }
    nav ul .seaBreeze::before {
      background-color: #53d5e5; }
    nav ul .pinneapleYellow::before {
      background-color: #f8b827; }
    nav ul .sunsetVista::before {
      background-color: #d30c7b; }
    nav ul a:hover:before,
    nav ul a:active:before,
    nav ul a:focus:before {
      color: #fff;
      width: 180px;
      transition: all 0.2s ease; }
    nav ul a:hover {
      color: #fff;
      transition: all 0.2s ease; }
    nav ul a:hover .hideInit {
      opacity: 1;
      transition: all 0.2s ease; }

/* =========================
   SKILLS SECTION
   ========================= */

.skills-panel {
  background: #FAFAF8;
  border: 1px solid #EFEDE7;
  border-radius: 28px;
  padding: 56px 48px;
  max-width: 1200px;
  margin: 0 auto;
}


/* =========================
   SECTION HEADER
   ========================= */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E84D8A;
  display: inline-block;
}

.eyebrow-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #E84D8A;
}

.skills-heading {
  font-size: 52px;
  font-weight: 800;
  color: #18181B;
  letter-spacing: -0.02em;
  margin: 0;
}

.skills-sub {
  font-size: 17px;
  line-height: 1.55;
  color: #71717A;
  margin: 14px 0 40px;
  max-width: 560px;
}


/* =========================
   CARDS
   ========================= */

.skill-card {
  --accent: #55C9DE;
  --accent-soft: #EAF7FB;
  --accent-border: #CDEBF3;
  --glow: rgba(85, 201, 222, 0.16);

  width: 100%;
  height: 100%;

  background: #FFFFFF;

  /* Match original card — no visible outline */
  border: 0;
  border-radius: 24px;

  padding: 32px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  box-shadow:
    0 10px 32px rgba(41, 48, 72, 0.05),
    0 0 48px var(--glow);

  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}


/* =========================
   CARD COLORS
   ========================= */

.card-blue {
  --accent: #53d5e5;
  --accent-soft: #EAF7FB;
  --accent-border: #CDEBF3;
  --glow: rgba(85, 201, 222, 0.16);
}

.card-amber {
  --accent: #f8b827;
  --accent-soft: #FDF6E8;
  --accent-border: #F6E4BE;
  --glow: rgba(242, 181, 68, 0.13);
}

.card-pink {
  --accent: #d30c7b;
  --accent-soft: #FDEEF1;
  --accent-border: #F6D3DB;
  --glow: rgba(239, 130, 153, 0.13);
}

.card-purple {
  --accent: #6C3FF3;
  --accent-soft: #F3F0FC;
  --accent-border: #E1D9F7;
  --glow: rgba(155, 135, 232, 0.14);
}


/* =========================
   TOP CONTENT
   ========================= */

.card-head {
  display: flex;
  align-items: flex-start;
  gap: 22px;

  min-height: 150px;
}


/* =========================
   HEX ICON
   ========================= */

.hex-wrap {
  width: 76px;
  height: 76px;

  position: relative;
  flex-shrink: 0;

  filter: drop-shadow(0 8px 18px var(--glow));
}

.hex-wrap svg.hex {
  position: absolute;
  inset: 0;

  width: 76px;
  height: 76px;
}

.hex-wrap .hex path {
  fill: var(--accent);
  stroke: none;
}

.hex-icon {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #FFFFFF;
}

.hex-icon svg {
  width: 29px;
  height: 29px;
  stroke-width: 1.7;
}


/* =========================
   TYPOGRAPHY
   ========================= */

.skill-title {
  /*
   * Keep your existing display font.
   * This deliberately doesn't override font-family.
   */
  font-size: 32px;
  line-height: 1.2;
  font-weight: 500;

  color: #4261C9;

  letter-spacing: -0.02em;

  margin: 2px 0 0;
}

.skill-desc {
  font-size: 16px;
  line-height: 1.5;

  color: #261B4D;

  margin: 12px 0 0;

  max-width: 390px;
}


/* =========================
   DIVIDER + TAG AREA
   ========================= */

.card-footer-row {
  margin-top: auto;
  padding-top: 22px;

  border-top: 1px solid #E9E8EC;
}

.tags {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin: 0;
}


/* =========================
   TAG PILLS
   ========================= */

.tag-pill {
  display: inline-flex;
  align-items: center;

  font-size: 13.5px;
  line-height: 1;
  font-weight: 600;

  color: #3B3650;

  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-border) !important;

  border-radius: 8px;

  padding: 9px 14px;
}


/* =========================
   HOVER
   ========================= */

.skill-card:hover {
  transform: translateY(-3px);

  box-shadow:
    0 14px 38px rgba(41, 48, 72, 0.07),
    0 0 56px var(--glow);
}


/* =========================
   BOOTSTRAP MOBILE BREAKPOINT
   ========================= */

@media (max-width: 767.98px) {

  .skills-panel {
    padding: 40px 24px;
    border-radius: 22px;
  }

  .skills-heading {
    font-size: 40px;
  }

  .skills-sub {
    font-size: 16px;
    margin-bottom: 32px;
  }

  .skill-card {
    padding: 28px;
  }

  .card-head {
    min-height: 140px;
  }

  .skill-title {
    font-size: 28px;
  }

}


/* =========================
   SMALL MOBILE
   ========================= */

@media (max-width: 480px) {

  .skills-panel {
    padding: 32px 18px;
  }

  .skills-heading {
    font-size: 34px;
  }

  .skill-card {
    padding: 24px;
  }

  .card-head {
    gap: 16px;
  }

  .hex-wrap,
  .hex-wrap svg.hex {
    width: 64px;
    height: 64px;
  }

  .hex-icon svg {
    width: 25px;
    height: 25px;
  }

  .skill-title {
    font-size: 25px;
  }

  .skill-desc {
    font-size: 15px;
  }

  .tag-pill {
    font-size: 13px;
    padding: 8px 11px;
  }

}


#mainSection {
  width: 100%;
  overflow: hidden; }
  #mainSection .hexagon {
    position: absolute;
    height: 175px;
    bottom: -87.5px;
    right: -50px;
    opacity: 1; }
  #mainSection h1:first-of-type {
    color: #3f5cbf;
    font-size: 28px;
    margin: 180px 0 15px 0; }
  #mainSection .wrapper {
    position: relative;
    padding: 40px 0 180px 0;
    z-index: 0; }
  #mainSection .wrapper::before {
    content: "";
    position: absolute;
    border-bottom-left-radius: 50px;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(72, 213, 229, 0.1) 0%, rgba(211, 12, 123, 0.1) 100%);
    top: 0;
    left: 60px;
    z-index: -1; }
  #mainSection .container {
    z-index: 10;
    position: relative; }
    #mainSection .container .col-sm-6 {
      align-content: center; }
  #mainSection .mainLogo {
    height: 30px; }
  #mainSection .mainIllustration {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center; }
    #mainSection .mainIllustration img {
      width: 100%;
      max-width: 100%; }
  #mainSection .typedHeight {
    height: 48px;
    margin-bottom: 30px; }
  #mainSection h1,
  #mainSection #typed {
    font-family: "BoubaRound-Black", Poppins, sans-serif;
    font-size: 40px;
    color: #200c42; }
    #mainSection h1 span,
    #mainSection #typed span {
      color: #f8b827; }
  #mainSection .yellowLightning {
    display: inline-block;
    stroke: #f8b827;
    stroke-width: 1.5px;
    fill: none;
    height: 42px;
    margin-top: -18px;
    transform: rotate(0deg);
    margin-left: 8px; }
  #mainSection p {
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    font-size: 17px;
    color: #200c42;
    margin-bottom: 0; }
  #mainSection a {
    display: inline-block;
    text-align: center;
    margin-top: 30px;
    font-family: "BoubaRound-Black", Poppins, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #200c42;
    width: 100%;
    max-width: 220px;
    padding: 18.5px 0;
    background-color: none;
    text-decoration: none;
    border-radius: 60px;
    position: relative;
    z-index: 0;
    transition: all 0.5s ease;
    transition: background-color 0.2s ease; }
    #mainSection a::before {
      content: "";
      position: absolute;
      background-color: #f8b827;
      width: 64px;
      height: 64px;
      border-radius: 60px;
      z-index: -1;
      top: 0;
      left: 0;
      transition: all 0.5s ease; }
  #mainSection .bolt {
    opacity: 0;
    margin-left: 15px;
    transition: all 0.2s ease; }
  #mainSection .yellowDots {
    position: absolute;
    bottom: 120px;
    left: -120px; }
  #mainSection a:hover:before,
  #mainSection a:active:before,
  #mainSection a:focus:before {
    color: #fff;
    width: 220px;
    box-shadow: 0px 7px 40px rgba(248, 184, 39, 0.7);
    transition: all 0.2s ease; }
  #mainSection a:hover {
    color: #fff;
    transition: all 0.2s ease; }
  #mainSection a:hover {
    color: #fff;
    transition: all 0.2s ease; }
  #mainSection a:hover .bolt {
    opacity: 1;
    transition: all 0.2s ease; }

    

#mySkills {
  position: relative;
  overflow: hidden; }
  #mySkills .container {
    padding-top: 60px;
    padding-bottom: 60px; }
    #mySkills .container .hexagon {
      position: absolute;
      height: 175px;
      top: -87.5px;
      right: -50px;
      opacity: 0.6; }
    #mySkills .container h2 {
      font-family: "BoubaRound-Black", "Poppins", sans-serif;
      font-size: 60px;
      color: #200c42; }
      #mySkills .container h2 span {
        color: #f8b827; }
    #mySkills .container h3 {
      font-family: "BoubaRound-Black", "Poppins", sans-serif;
      font-size: 32px;
      color: #3f5cbf; }
    #mySkills .container p {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      font-size: 17px;
      color: #200c42;
      margin-bottom: 60px; }
    #mySkills .container .skillBox {
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 0px 0px 60px rgba(36, 139, 152, 0.15);
      text-align: center;
      margin: 0 auto;
      max-width: 363px;
      width: 100%;
      padding: 0; }
    #mySkills .container .skillDescription {
      border-top: solid 1px #e0e0e0;
      padding: 0 40px 40px 40px;
      background-color: #fff;
      border-radius: 0 0 20px 20px; }
      #mySkills .container .skillDescription p {
        font-weight: 700;
        margin-bottom: 0px;
        font-size: 16px; }
      #mySkills .container .skillDescription ul {
        list-style: none;
        display: inline; }
        #mySkills .container .skillDescription ul li {
          display: inline-block; }
        #mySkills .container .skillDescription ul li:first-of-type,
        #mySkills .container .skillDescription ul li:nth-of-type(2) {
          float: left; }
        #mySkills .container .skillDescription ul li:nth-of-type(2) {
          padding-left: 10px; }
        #mySkills .container .skillDescription ul li:last-of-type {
          float: right; }
      #mySkills .container .skillDescription .likeSaveIcons {
        margin: 40px 0 20px 0;
        position: relative; }
        #mySkills .container .skillDescription .likeSaveIcons button {
          padding: 0;
          background-color: transparent;
          border: none; }
        #mySkills .container .skillDescription .likeSaveIcons .heart {
          stroke: #f45f5f;
          fill: none;
          height: 25px;
          transition: all 0.2s ease; }
        #mySkills .container .skillDescription .likeSaveIcons .likes {
          font-family: "BoubaRound-Black", "Poppins", sans-serif;
          font-size: 17px;
          margin-left: 0px;
          color: #3f5cbf;
          left: 35px;
          opacity: 0.75; }
        #mySkills .container .skillDescription .likeSaveIcons .clickedHeart {
          fill: #f45f5f;
          transition: all 0.2s ease;
          animation: 0.5s linear burst; }
        #mySkills .container .skillDescription .likeSaveIcons .heart:target {
          fill: #f45f5f;
          animation: 0.5s linear burst; }
@keyframes burst {
  0%,
          10% {
    transform: scale(1);
    opacity: 0.5;
    color: lavender; }
  45% {
    transform: scale(0.2) rotate(30deg);
    opacity: 0.75; }
  50% {
    transform: scale(2) rotate(-37.5deg);
    opacity: 1;
    color: red;
    text-shadow: 2px 2px 6px rgba(235, 9, 9, 0.5); }
  90%,
          95% {
    transform: scale(1) rotate(10deg);
    text-shadow: none; }
  100% {
    transform: rotate(-2.5deg); } }
        #mySkills .container .skillDescription .likeSaveIcons .bookmark {
          stroke: #f8b827;
          fill: none;
          height: 25px;
          cursor: pointer;
          transition: all 0.2s ease; }
        #mySkills .container .skillDescription .likeSaveIcons .clickedBookmark {
          fill: #f8b827;
          transition: all 0.2s ease; }
    #mySkills .container .iconBox {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 36px;
      margin: 30px auto 30px auto;
      transition: transform 0.5s ease-in-out; }
      #mySkills .container .iconBox svg {
        text-align: center; }
    #mySkills .container .iconBox:hover {
      transform: scale(0.8); }
    #mySkills .container .designIcon {
      transition: all 0.7s ease; }
    #mySkills .container .devIcon {
      transition: all 0.7s ease; }
    #mySkills .container .illustrationIcon {
      transition: all 0.7s ease; }
    #mySkills .container .designIcon:hover,
    #mySkills .container .illustrationIcon:hover,
    #mySkills .container .devIcon:hover {
      box-shadow: none;
      transition: all 0.7s ease; }

#parallaxMountain .container-fluid {
  min-height: 580px;
  overflow: hidden;
  position: relative;
  background-image: linear-gradient(to top, rgba(248, 184, 39, 0.3), rgba(72, 213, 229, 0.3));
  background-attachment: scroll;
  z-index: -1; }
  #parallaxMountain .container-fluid .mountain {
    position: absolute;
    left: 50%;
    bottom: 0;
    max-width: 672px;
    margin-left: -336px;
    width: 100%;
    z-index: 2; }
  #parallaxMountain .container-fluid .sunMountain {
    max-width: 358px;
    position: absolute;
    left: 51%;
    top: -10%;
    z-index: 1;
    margin: 0 auto; }
  #parallaxMountain .container-fluid .topBox {
    max-width: 880px;
    width: 100%;
    margin-left: -440px;
    position: absolute;
    left: 50%;
    top: 40%;
    z-index: 0; }
  #parallaxMountain .container-fluid .bottomBox {
    max-width: 880px;
    width: 100%;
    margin-left: -440px;
    position: absolute;
    left: 50%;
    top: 40%;
    z-index: 3; }

    /* =========================
   TRACE
   ========================= */

#latestWork .project-tags {
  display: flex !important;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;

  width: 100%;
  margin: 22px 0 0;
  padding: 0;

  visibility: visible;
  opacity: 1;
}

#latestWork .project-tags .project-tag {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  width: auto;
  min-width: 0;

  padding: 8px 13px;

  background-color: #F3F0FC;
  border: 1px solid #DED5FA;
  border-radius: 8px;

  color: #25144F !important;

  font-size: 13px;
  line-height: 1;
  font-weight: 600;

  white-space: nowrap;

  visibility: visible;
  opacity: 1;
}

#latestWork .coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-top: 26px;
  padding: 9px 14px;

  width: fit-content;

  background: #FFF6DD;
  border: 1px solid #F8D985;
  border-radius: 999px;

  color: #25144F;

  font-size: 13px;
  font-weight: 700;
  line-height: 1;

  letter-spacing: 0.01em;
}

#latestWork .coming-soon-dot {
  width: 8px;
  height: 8px;

  background: #F8B827;
  border-radius: 50%;

  box-shadow: 0 0 0 4px rgba(248, 184, 39, 0.15);
}

#latestWork .container {
  padding-top: 60px;
  padding-bottom: 60px; }
  #latestWork .container p {
    font-size: 17px; }
  #latestWork .container a {
    text-decoration: none;
    color: #d30c7b;
    transition: all 0.2s ease; }
  #latestWork .container a:hover {
    opacity: 0.6;
    transition: all 0.2s ease; }
  #latestWork .container .projectWrapper {
    border-radius: 20px;
    margin-bottom: 60px;
    padding-left: 20px;
    padding-right: 20px;
    display: flex; }
    #latestWork .container .projectWrapper h3 {
      font-family: "BoubaRound-Black", "Poppins", sans-serif;
      font-size: 48px;
      color: #200c42;
      z-index: 1000; }
      #latestWork .container .projectWrapper h3 span {
        color: #f8b827; }
    #latestWork .container .projectWrapper p {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      font-size: 14px;
      color: #200c42;
      margin-bottom: 0px;
      margin-top: 20px;
      z-index: 1000; }
    #latestWork .container .projectWrapper .col-md-5 {
      position: relative;
      z-index: 1; }
  #latestWork .container .noBtmMargin {
    margin-bottom: 0; }
  #latestWork .container .projectPadding1,
  #latestWork .container .projectPadding2,
  #latestWork .container .projectPadding3,
  #latestWork .container .projectPadding4,
  #latestWork .container .projectPadding5,
  #latestWork .container .projectPadding6 {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1000; }
  #latestWork .container .projectPadding1::before,
  #latestWork .container .projectPadding2::before,
  #latestWork .container .projectPadding3::before,
  #latestWork .container .projectPadding4::before,
  #latestWork .container .projectPadding5::before,
  #latestWork .container .projectPadding6::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    box-shadow: 0px 0px 60px rgba(36, 139, 152, 0.17);
    border-radius: 20px; }
  #latestWork .container .projectPadding1::after,
  #latestWork .container .projectPadding2::after,
  #latestWork .container .projectPadding3::after,
  #latestWork .container .projectPadding4::after,
  #latestWork .container .projectPadding5::after,
  #latestWork .container .projectPadding6::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: #fff; }
  #latestWork .container .projectPadding1::after,
  #latestWork .container .projectPadding1::before {
    border-radius: 0 20px 20px 0; }
  #latestWork .container .projectPadding2::after,
  #latestWork .container .projectPadding2::before {
    border-radius: 20px 0 0 20px; }
  #latestWork .container .projectPadding3::after,
  #latestWork .container .projectPadding3::before {
    border-radius: 0 20px 20px 0; }
  #latestWork .container .projectPadding4::after,
  #latestWork .container .projectPadding4::before {
    border-radius: 20px 0 0 20px; }
  #latestWork .container .projectPadding5::after,
  #latestWork .container .projectPadding5::before {
    border-radius: 0 20px 20px 0; }
  #latestWork .container .projectPadding6::after,
  #latestWork .container .projectPadding6::before {
    border-radius: 20px 0 0 20px; }
  #latestWork .container .projectImg1,
  #latestWork .container .projectImg2,
  #latestWork .container .projectImg3,
  #latestWork .container .projectImg4,
  #latestWork .container .projectImg5,
  #latestWork .container .projectImg6 {
    padding: 0 60px;
    text-align: center;
    min-height: 400px;
    z-index: 1000; }
    #latestWork .container .projectImg1 img,
    #latestWork .container .projectImg2 img,
    #latestWork .container .projectImg3 img,
    #latestWork .container .projectImg4 img,
    #latestWork .container .projectImg5 img,
    #latestWork .container .projectImg6 img {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      max-height: 400%;
      max-width: 100%;
      z-index: 1000; }
  #latestWork .container .projectImg1::before,
  #latestWork .container .projectImg2::before,
  #latestWork .container .projectImg3::before,
  #latestWork .container .projectImg4::before,
  #latestWork .container .projectImg5::before,
  #latestWork .container .projectImg6::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    box-shadow: 0px 0px 60px rgba(36, 139, 152, 0.17); }
  #latestWork .container .projectImg1::after,
  #latestWork .container .projectImg2::after,
  #latestWork .container .projectImg3::after,
  #latestWork .container .projectImg4::after,
  #latestWork .container .projectImg5::after,
  #latestWork .container .projectImg6::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(211, 12, 123, 0.1) 0%, rgba(72, 213, 229, 0.1) 100%); }
  #latestWork .container .projectImg1::after,
  #latestWork .container .projectImg1::before {
    border-radius: 20px 0 0 20px; }
  #latestWork .container .projectImg2::after,
  #latestWork .container .projectImg2::before {
    border-radius: 0 20px 20px 0; }
  #latestWork .container .projectImg3::after,
  #latestWork .container .projectImg3::before {
    border-radius: 20px 0 0 20px; }
  #latestWork .container .projectImg4::after,
  #latestWork .container .projectImg4::before {
    border-radius: 0 20px 20px 0; }
  #latestWork .container .projectImg5::after,
  #latestWork .container .projectImg5::before {
    border-radius: 20px 0 0 20px; }
  #latestWork .container .projectImg6::after,
  #latestWork .container .projectImg6::before {
    border-radius: 0 20px 20px 0; }
#latestWork .projectImg1:after {
  background: url("../img/trace-latest-work-clean.png") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat; }
#latestWork .projectImg2:after {
  background: url("../img/podcast-logo-preview.png") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat; }
#latestWork .projectImg3:after {
  background: url("../img/ebook-preview.png") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat; }
#latestWork .projectImg4:after {
  background: url("../img/vr-movie-app-preview.png") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat; }
#latestWork .modal {
  padding-top: 40px;
  z-index: 10000; }
  #latestWork .modal .btn-close {
    position: absolute;
    top: 14px;
    right: 20px;
    background: none;
    padding: 0;
    margin: 0;
    transition: opacity 0.2s ease; }
    #latestWork .modal .btn-close svg {
      width: 16px;
      height: 16px;
      vertical-align: top; }
  #latestWork .modal .btn-secondary {
    background-color: #3f5cbf;
    border: none;
    border-radius: 60px;
    max-width: 140px;
    padding: 14px 0;
    width: 100%;
    font-family: "BoubaRound-Black", Poppins, sans-serif;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.5s ease; }
  #latestWork .modal .btn-secondary:hover {
    box-shadow: 0px 7px 30px rgba(63, 92, 191, 0.7);
    transition: all 0.5s ease; }
  #latestWork .modal .btn-contact {
    background-color: #d30c7b;
    color: #fff;
    border: none;
    border-radius: 60px;
    max-width: 140px;
    padding: 14px 0;
    width: 100%;
    font-family: "BoubaRound-Black", Poppins, sans-serif;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.5s ease;
    margin-bottom: 0; }
  #latestWork .modal .btn-contact:hover {
    box-shadow: 0px 7px 40px rgba(211, 12, 123, 0.7);
    transition: all 0.5s ease; }
  #latestWork .modal .modal-content {
    border-top-right-radius: 12px;
    border-top-left-radius: 12px;
    overflow-y: scroll;
    z-index: 1; }
    #latestWork .modal .modal-content .col-sm-12 {
      text-align: center; }
    #latestWork .modal .modal-content .modalImg img {
      width: 100%;
      max-width: 960px;
      border-radius: 20px;
      box-shadow: 0px 0px 60px rgba(36, 139, 152, 0.27); }
  #latestWork .modal .modal-header {
    padding: 20px;
    justify-content: center;
    position: relative; }
    #latestWork .modal .modal-header .modal-title {
      text-align: center;
      font-family: "BoubaRound-Black", "Poppins", sans-serif;
      font-size: 28px;
      color: #200c42; }
      #latestWork .modal .modal-header .modal-title span {
        color: #f8b827; }
  #latestWork .modal .modal-body {
    background-color: #fff;
    overflow-y: initial;
    padding: 0; }
    #latestWork .modal .modal-body .container {
      padding: 60px 0; }
      #latestWork .modal .modal-body .container p {
        font-family: "Open Sans", sans-serif;
        font-weight: 300;
        font-size: 17px;
        color: #200c42;
        margin: 60px 0 40px 0;
        text-align: center; }
      #latestWork .modal .modal-body .container .col-sm-8 p:first-of-type {
        margin: 60px 0 30px 0; }
      #latestWork .modal .modal-body .container .col-sm-8 p:nth-of-type(2) {
        margin: 0 0 40px 0; }
    #latestWork .modal .modal-body .modal-outro p:first-of-type {
      text-align: center;
      font-family: "BoubaRound-Black", "Poppins", sans-serif;
      font-size: 28px;
      color: #200c42;
      margin: 20px 0 0 0; }
    #latestWork .modal .modal-body .modal-outro p:nth-of-type(2) {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      font-size: 16px;
      color: #200c42;
      margin: 10px 0 15px 0; }
    #latestWork .modal .modal-body .modal-outro p:nth-of-type(3) {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      font-size: 16px;
      color: #200c42;
      margin: 0 0 30px 0; }
  #latestWork .modal .modal-footer {
    display: none;
    background-color: #fff; }
  #latestWork .modal .modal-signature {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    margin-top: 60px; }
    #latestWork .modal .modal-signature img {
      width: 60px;
      height: 60px;
      margin: 0 24px;
      border-radius: 50%; }
  #latestWork .modal .line {
    width: 100%;
    border: 1px solid #e7e7e9; }
#latestWork .btn-close:hover {
  transition: opacity 0.2s ease; }
#latestWork .btn-yellow {
  display: inline-block;
  text-align: center;
  margin-top: 30px;
  font-family: "BoubaRound-Black", Poppins, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #200c42;
  width: 100%;
  max-width: 200px;
  padding: 18.5px 0;
  background-color: none;
  text-decoration: none;
  border-radius: 60px;
  position: relative;
  z-index: 0;
  transition: all 0.5s ease;
  transition: background-color 0.2s ease;
  z-index: 1000; }
  #latestWork .btn-yellow::before {
    content: "";
    position: absolute;
    background-color: #f8b827;
    width: 64px;
    height: 64px;
    border-radius: 60px;
    z-index: -1;
    top: 0;
    left: 0;
    transition: all 0.5s ease; }
#latestWork .bolt {
  opacity: 0;
  margin-left: 15px;
  transition: all 0.2s ease; }
#latestWork .btn-yellow:hover:before,
#latestWork .btn-yellow:active:before,
#latestWork .btn-yellow:focus:before {
  color: #fff;
  width: 200px;
  box-shadow: 0px 7px 40px rgba(248, 184, 39, 0.7);
  transition: all 0.2s ease; }
#latestWork .btn-yellow:hover {
  color: #fff;
  transition: all 0.2s ease; }
#latestWork .btn-yellow:hover {
  color: #fff;
  transition: all 0.2s ease; }

#contactSection {
  padding: 60px 0;
  position: relative; }
  #contactSection h2 {
    font-family: "BoubaRound-Black", "Poppins", sans-serif;
    font-size: 60px;
    color: #200c42;
    text-align: left; }
    #contactSection h2 span {
      color: #f8b827; }
  #contactSection h3 {
    text-align: left;
    font-family: "BoubaRound-Black", "Poppins", sans-serif;
    font-size: 32px;
    color: #3f5cbf;
    margin: 0; }
  #contactSection p {
    font-family: "Open Sans", sans-serif;
    font-weight: 300;
    font-size: 17px;
    color: #200c42;
    margin-bottom: 0;
    text-align: left; }
  #contactSection a {
    float: left;
    display: inline-block;
    text-align: center;
    margin-top: 30px;
    font-family: "BoubaRound-Black", Poppins, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #200c42;
    width: 100%;
    max-width: 220px;
    padding: 0;
    height: 64px;
    background-color: none;
    text-decoration: none;
    border-radius: 60px;
    position: relative;
    z-index: 0;
    transition: all 0.5s ease;
    transition: background-color 0.2s ease; }
    #contactSection a::before {
      content: "";
      position: absolute;
      background-color: #d30c7b;
      width: 64px;
      height: 64px;
      border-radius: 60px;
      z-index: -1;
      top: 0;
      left: 0;
      transition: all 0.5s ease; }
  #contactSection .col-lg-6 {
    background-color: none;
    text-align: center; }
  #contactSection .contactIllustration {
    background-image: url(../img/contact-beach-bg-03.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left;
    height: 350px;
    width: 100%;
    max-width: 100%;
    position: absolute;
    z-index: -10000;
    height: 350px;
    top: 283px;
    left: 0; }
  #contactSection input.submit {
    margin: 0;
    padding: 0;
    background-color: transparent !important;
    border: none;
    font-family: "BoubaRound-Black", Poppins, sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #200c42;
    height: 64px; }
  #contactSection .bolt {
    opacity: 0;
    margin-left: 15px;
    transition: all 0.2s ease; }
  #contactSection a:hover:before,
  #contactSection a:active:before,
  #contactSection a:focus:before {
    color: #fff;
    width: 220px;
    box-shadow: 0px 7px 40px rgba(211, 12, 123, 0.7);
    transition: all 0.2s ease; }
  #contactSection a:hover * {
    color: #fff;
    transition: all 0.2s ease; }
  #contactSection a input:focus {
    padding: 0; }
  #contactSection a:hover .bolt {
    opacity: 1;
    transition: all 0.2s ease; }
  #contactSection .container .col-lg-6:first-of-type {
    background-color: none; }
  #contactSection .container .col-lg-6:nth-of-type(2) {
    background-color: #fff;
    border-radius: 20px 20px 20px 20px;
    box-shadow: 0px 0px 60px rgba(36, 139, 152, 0.15);
    padding: 40px; }
  #contactSection .form-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    text-align: center; }
    #contactSection .form-container h2 {
      font-family: "BoubaRound-Black", Poppins, sans-serif; }
  #contactSection input,
  #contactSection textarea {
    width: 100%;
    margin-top: 40px;
    padding-bottom: 10px;
    border: none;
    border-bottom: 3px solid #d4d4d4;
    outline: none;
    font-family: "Open Sans", sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #200c42;
    transition: all 0.5s ease;
    background-color: transparent; }
  #contactSection ::placeholder {
    color: #ccc; }
  #contactSection input:focus,
  #contactSection textarea:focus {
    border-color: #3f5cbf;
    padding-bottom: 20px;
    transition: all 0.5s ease; }

#footerSection {
  width: 100%;
  overflow: hidden;
  position: relative;
  background: linear-gradient(90deg, rgba(211, 12, 123, 0.1) 0%, rgba(72, 213, 229, 0.1) 100%);
  background-position: right -60px; }
  #footerSection h1:first-of-type {
    color: #3f5cbf;
    font-size: 42px;
    margin: 0; }
  #footerSection .container {
    z-index: 1000; }
  #footerSection .col-sm-6 {
    display: flex;
    align-self: center; }
  #footerSection .footerLogo {
    justify-content: flex-end; }
    #footerSection .footerLogo img {
      width: 100%;
      max-width: 169px; }
  #footerSection .rightsReserved {
    justify-content: flex-start; }
  #footerSection .wrapper {
    position: relative;
    padding: 0;
    z-index: 0; }
  #footerSection .wrapper::before {
    content: "";
    position: absolute;
    border-top-right-radius: 50px;
    width: 100%;
    height: 100%;
    background: #200c42;
    top: 0;
    right: 60px;
    z-index: -1; }
  #footerSection p {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    color: #fff;
    margin: 0; }
  #footerSection img {
    float: right;
    margin-top: 40px;
    margin-bottom: 40px; }

#socialFooterWrap {
  position: absolute;
  width: 100%;
  bottom: 0; }

#footerSocialMedia {
  width: 100%;
  overflow: hidden;
  position: relative; }
  #footerSocialMedia .wrapper {
    position: relative;
    width: 100%;
    z-index: 0; }
  #footerSocialMedia .wrapper::before {
    content: "";
    position: absolute;
    border-top-left-radius: 50px;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(211, 12, 123, 0.1) 0%, rgba(72, 213, 229, 0.1) 100%);
    top: 0;
    left: 60px;
    z-index: -1; }
  #footerSocialMedia ul {
    list-style: none;
    padding: 0;
    margin: 40px 0; }
    #footerSocialMedia ul li {
      display: inline;
      margin-right: 40px;
      opacity: 0.75;
      transition: all 0.2s ease; }
    #footerSocialMedia ul li:hover {
      opacity: 0.5;
      transition: all 0.2s ease; }
    #footerSocialMedia ul li:last-of-type {
      margin-right: 0px; }
    #footerSocialMedia ul a {
      text-decoration: none; }

.display {
  display: inline-block !important; }

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 1020px) {
  #mainSection .wrapper::before {
    left: 20px; }

  #footerSocialMedia .wrapper::before {
    left: 20px; }

  #footerSection .wrapper::before {
    right: 20px; } }
/* Extra small devices (phones, 600px and down) */
/* Small devices (portrait tablets and large phones, 576px and down) */
@media only screen and (max-width: 575px) {
  #footerSocialMedia ul {
    text-align: center; }

  #footerSection .footerLogo {
    justify-content: center; }
    #footerSection .footerLogo img {
      float: none;
      margin-bottom: 30px; }
  #footerSection .rightsReserved {
    justify-content: center;
    text-align: center;
    margin-bottom: 40px; } }
/* Medium devices (landscape tablets, 767px and down) */
@media only screen and (max-width: 767px) {
  #mainSection {
    width: 100%;
    overflow: hidden; }
    #mainSection h1:first-of-type {
      color: #3f5cbf;
      font-size: 28px; }
    #mainSection h1,
    #mainSection #typed {
      font-family: "BoubaRound-Black", Poppins, sans-serif;
      font-size: 36px;
      color: #200c42; }
      #mainSection h1 span,
      #mainSection #typed span {
        color: #f8b827; }
    #mainSection #typed {
      min-height: 12px; }
    #mainSection .yellowLightning {
      display: inline-block;
      stroke: #f8b827;
      stroke-width: 1.5px;
      fill: none;
      height: 42px;
      margin-top: -18px;
      transform: rotate(0deg);
      margin-left: 8px; }
    #mainSection .typedHeight {
      height: 46px;
      margin-bottom: 20px; }
    #mainSection p {
      font-family: "Open Sans", sans-serif;
      font-weight: 300;
      font-size: 16px;
      color: #200c42;
      margin-bottom: 0; }
    #mainSection a {
      display: inline-block;
      text-align: center;
      margin-top: 30px;
      font-family: "BoubaRound-Black", Poppins, sans-serif;
      font-weight: 700;
      font-size: 18px;
      color: #200c42;
      width: 100%;
      max-width: 220px;
      padding: 20px 0;
      background-color: none;
      text-decoration: none;
      border-radius: 60px;
      position: relative;
      z-index: 0;
      transition: all 0.5s ease;
      transition: background-color 0.2s ease; }
      #mainSection a::before {
        content: "";
        position: absolute;
        background-color: #f8b827;
        width: 64px;
        height: 64px;
        border-radius: 60px;
        z-index: -1;
        top: 0;
        left: 0;
        transition: all 0.5s ease; }
    #mainSection .bolt {
      opacity: 0;
      margin-left: 15px;
      transition: all 0.2s ease; }
    #mainSection a:hover:before,
    #mainSection a:active:before,
    #mainSection a:focus:before {
      color: #fff;
      width: 220px;
      box-shadow: 0px 7px 40px rgba(248, 184, 39, 0.7);
      transition: all 0.2s ease; }
    #mainSection a:hover {
      color: #fff;
      transition: all 0.2s ease; }
    #mainSection a:hover {
      color: #fff;
      transition: all 0.2s ease; }
    #mainSection a:hover .bolt {
      opacity: 1;
      transition: all 0.2s ease; }

  #mySkills .container .col-sm-8 {
    width: 100%; }

  #latestWork .container .col-sm-8 {
    width: 100%; }
  #latestWork .container .projectPadding1::after,
  #latestWork .container .projectPadding1::before {
    border-radius: 0 0 20px 20px; }
  #latestWork .container .projectPadding2::after,
  #latestWork .container .projectPadding2::before {
    border-radius: 0 0 20px 20px; }
  #latestWork .container .projectPadding3::after,
  #latestWork .container .projectPadding3::before {
    border-radius: 0 0 20px 20px; }
  #latestWork .container .projectPadding4::after,
  #latestWork .container .projectPadding4::before {
    border-radius: 0 0 20px 20px; }
  #latestWork .container .projectPadding5::after,
  #latestWork .container .projectPadding5::before {
    border-radius: 0 0 20px 20px; }
  #latestWork .container .projectPadding6::after,
  #latestWork .container .projectPadding6::before {
    border-radius: 0 0 20px 20px; }
  #latestWork .container .projectWrapper h3 {
    font-size: 32px; }
  #latestWork .container .projectImg1::after,
  #latestWork .container .projectImg1::before {
    border-radius: 20px 20px 0 0; }
  #latestWork .container .projectImg2::after,
  #latestWork .container .projectImg2::before {
    border-radius: 20px 20px 0 0; }
  #latestWork .container .projectImg3::after,
  #latestWork .container .projectImg3::before {
    border-radius: 20px 20px 0 0; }
  #latestWork .container .projectImg4::after,
  #latestWork .container .projectImg4::before {
    border-radius: 20px 20px 0 0; }
  #latestWork .container .projectImg5::after,
  #latestWork .container .projectImg5::before {
    border-radius: 20px 20px 0 0; }
  #latestWork .container .projectImg6::after,
  #latestWork .container .projectImg6::before {
    border-radius: 20px 20px 0 0; }
  #latestWork .offset-sm-2 {
    margin: 0; }
  #latestWork .modal-body .container {
    padding: 60px 20px !important; }
    #latestWork .modal-body .container .row {
      padding: 0; }

  #mainSection .wrapper::before {
    left: 0px; }

  #footerSocialMedia .wrapper::before {
    left: 0px; }

  #footerSection .wrapper::before {
    right: 0px; } }
/* Medium devices (landscape tablets, 991px and down) */
@media only screen and (max-width: 991px) {
  #mainSection h1:first-of-type {
    margin-top: 80px; }
  #mainSection .mainIllustration img {
    max-width: 560px;
    width: 75%; }
  #mainSection a {
    margin-bottom: 60px; }
  #mainSection .yellowDots {
    bottom: -100px; }

  .nav {
    display: none; }
    .nav ul {
      bottom: 165px;
      top: initial; }

  nav {
    height: 90px;
    position: fixed;
    width: 100%;
    max-width: 220px;
    z-index: 10000;
    top: initial;
    bottom: 0;
    right: 0; }
    nav .container {
      position: relative; }
      nav .container .col-sm-6:nth-of-type(2) {
        position: relative; }
      nav .container img {
        margin-top: 30px;
        height: 30px; }
    nav ul {
      position: absolute;
      list-style: none;
      right: 40px; }
      nav ul .hideInit {
        opacity: 1;
        transition: all 0.2s ease; }
      nav ul a::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 64px;
        border-radius: 60px;
        z-index: -1;
        top: 0;
        right: 0;
        transition: all 0.5s ease;
        float: left; }
      nav ul .paynesGrey::before {
        background-color: #200c42;
        width: 190px; }
      nav ul .oceanBlue::before {
        background-color: #3f5cbf; }
      nav ul .seaBreeze::before {
        background-color: #53d5e5;
        width: 180px; }
      nav ul .pinneapleYellow::before {
        background-color: #f8b827;
        width: 170px; }
      nav ul .sunsetVista::before {
        background-color: #d30c7b;
        width: 160px; }
      nav ul a.paynesGrey:hover:before,
      nav ul a.paynesGrey:active:before,
      nav ul a.paynesGrey:focus:before {
        color: #fff;
        width: 210px;
        transition: all 0.2s ease; }
      nav ul a.seaBreeze:hover:before,
      nav ul a.seaBreeze:active:before,
      nav ul a.seaBreeze:focus:before {
        color: #fff;
        width: 200px;
        transition: all 0.2s ease; }
      nav ul a.pinneapleYellow:hover:before,
      nav ul a.pinneapleYellow:active:before,
      nav ul a.pinneapleYellow:focus:before {
        color: #fff;
        width: 190px;
        transition: all 0.2s ease; }
      nav ul a.sunsetVista:hover:before,
      nav ul a.sunsetVista:active:before,
      nav ul a.sunsetVista:focus:before {
        color: #fff;
        width: 180px;
        transition: all 0.2s ease; }
      nav ul a:hover {
        color: #fff;
        transition: all 0.2s ease; }
      nav ul a:hover .hideInit {
        opacity: 1;
        transition: all 0.2s ease; }

  .burger-container {
    display: inline-block; }

  #mySkills .container .col-sm-8:first-of-type {
    width: 100%; }
  #mySkills .container h2 {
    font-size: 52px; }
  #mySkills .container .skillBox {
    margin-bottom: 60px; }
  #mySkills .container .skillBox:last-of-type {
    margin-bottom: 0; }

  #parallaxMountain .container-fluid {
    min-height: 380px;
    overflow: hidden;
    position: relative;
    background-image: linear-gradient(to top, rgba(248, 184, 39, 0.3), rgba(72, 213, 229, 0.3));
    background-attachment: scroll;
    z-index: -1; }
    #parallaxMountain .container-fluid .mountain {
      position: absolute;
      left: 50%;
      bottom: 0;
      max-width: 460px;
      margin-left: -230px;
      width: 100%;
      z-index: 2; }
    #parallaxMountain .container-fluid .sunMountain {
      max-width: 220px;
      position: absolute;
      left: 51%;
      top: -10%;
      z-index: 1;
      margin: 0 auto; }
    #parallaxMountain .container-fluid .topBox {
      max-width: 600px;
      width: 100%;
      margin-left: -300px;
      position: absolute;
      left: 50%;
      top: 40%;
      z-index: 0; }
    #parallaxMountain .container-fluid .bottomBox {
      max-width: 600px;
      width: 100%;
      margin-left: -300px;
      position: absolute;
      left: 50%;
      top: 40%;
      z-index: 3; }

  #latestWork .container .col-sm-8:first-of-type {
    width: 100%; }
  #latestWork .container h2 {
    font-size: 52px; }

  #contactSection .container h2 {
    font-size: 52px; }
  #contactSection .container .col-lg-6:nth-of-type(2) {
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.8) 100%);
    margin: 60px auto 0 auto;
    max-width: 90%; }
  #contactSection .container input {
    margin-top: 35px; }
  #contactSection .container input.submit {
    margin-top: 0; }
  #contactSection .container textarea#message {
    max-height: 160px; }
  #contactSection .contactIllustration {
    top: 334px; } }
@media only screen and (max-width: 428px) {
  #parallaxMountain .container-fluid {
    min-height: 240px;
    overflow: hidden;
    position: relative;
    background-image: linear-gradient(to top, rgba(248, 184, 39, 0.3), rgba(72, 213, 229, 0.3));
    background-attachment: scroll;
    z-index: -1; }
    #parallaxMountain .container-fluid .mountain {
      position: absolute;
      left: 50%;
      bottom: 0;
      max-width: 300px;
      margin-left: -150px;
      width: 100%;
      z-index: 2; }
    #parallaxMountain .container-fluid .sunMountain {
      max-width: 140px;
      position: absolute;
      left: 51%;
      top: -10%;
      z-index: 1;
      margin: 0 auto; }
    #parallaxMountain .container-fluid .topBox {
      max-width: 320px;
      width: 100%;
      margin-left: -160px;
      position: absolute;
      left: 50%;
      top: 40%;
      z-index: 0; }
    #parallaxMountain .container-fluid .bottomBox {
      max-width: 320px;
      width: 100%;
      margin-left: -160px;
      position: absolute;
      left: 50%;
      top: 40%;
      z-index: 3; } }
@media only screen and (min-width: 429px) and (max-width: 620px) {
  #parallaxMountain .container-fluid {
    min-height: 300px;
    overflow: hidden;
    position: relative;
    background-image: linear-gradient(to top, rgba(248, 184, 39, 0.3), rgba(72, 213, 229, 0.3));
    background-attachment: scroll;
    z-index: -1; }
    #parallaxMountain .container-fluid .mountain {
      position: absolute;
      left: 50%;
      bottom: 0;
      max-width: 380px;
      margin-left: -190px;
      width: 100%;
      z-index: 2; }
    #parallaxMountain .container-fluid .sunMountain {
      max-width: 180px;
      position: absolute;
      left: 51%;
      top: -10%;
      z-index: 1;
      margin: 0 auto; }
    #parallaxMountain .container-fluid .topBox {
      max-width: 420px;
      width: 100%;
      margin-left: -210px;
      position: absolute;
      left: 50%;
      top: 40%;
      z-index: 0; }
    #parallaxMountain .container-fluid .bottomBox {
      max-width: 420px;
      width: 100%;
      margin-left: -210px;
      position: absolute;
      left: 50%;
      top: 40%;
      z-index: 3; } }
@media only screen and (max-width: 1199px) {
  #mainSection .yellowDots {
    bottom: -100px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #contactSection .contactIllustration {
    top: 309px; } }
@media only screen and (max-width: 768px) {
  #contactSection .contactIllustration {
    top: 360px; } }
@media only screen and (max-width: 437px) {
  #contactSection .contactIllustration {
    top: 385px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #mySkills .skillBox:last-of-type {
    margin-top: 60px; } }
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  #mainSection .yellowDots {
    bottom: 0; } }
@media only screen and (min-width: 1020px) and (max-width: 1450px) {
  #mainSection .wrapper::before {
    left: 25px; }

  #footerSocialMedia .wrapper::before {
    left: 25px; }

  #footerSection .wrapper::before {
    right: 25px; } }
/* Extra large devices (large laptops and desktops, 1200px and up) */
/* iPad Pro 12.9) */
@media only screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 1.5) {
  .nav {
    display: none; }
    .nav ul {
      bottom: 165px;
      top: initial; }

  nav {
    height: 90px;
    position: fixed;
    width: 100%;
    max-width: 220px;
    z-index: 10000;
    top: initial;
    bottom: 0;
    right: 0; }
    nav .container {
      position: relative; }
      nav .container .col-sm-6:nth-of-type(2) {
        position: relative; }
      nav .container img {
        margin-top: 30px;
        height: 30px; }
    nav ul {
      position: absolute;
      list-style: none;
      right: 40px; }
      nav ul .hideInit {
        opacity: 1;
        transition: all 0.2s ease; }
      nav ul a::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 64px;
        border-radius: 60px;
        z-index: -1;
        top: 0;
        right: 0;
        transition: all 0.5s ease;
        float: left; }
      nav ul .paynesGrey::before {
        background-color: #200c42;
        width: 190px; }
      nav ul .oceanBlue::before {
        background-color: #3f5cbf; }
      nav ul .seaBreeze::before {
        background-color: #53d5e5;
        width: 180px; }
      nav ul .pinneapleYellow::before {
        background-color: #f8b827;
        width: 170px; }
      nav ul .sunsetVista::before {
        background-color: #d30c7b;
        width: 160px; }
      nav ul a.paynesGrey:hover:before,
      nav ul a.paynesGrey:active:before,
      nav ul a.paynesGrey:focus:before {
        color: #fff;
        width: 210px;
        transition: all 0.2s ease; }
      nav ul a.seaBreeze:hover:before,
      nav ul a.seaBreeze:active:before,
      nav ul a.seaBreeze:focus:before {
        color: #fff;
        width: 200px;
        transition: all 0.2s ease; }
      nav ul a.pinneapleYellow:hover:before,
      nav ul a.pinneapleYellow:active:before,
      nav ul a.pinneapleYellow:focus:before {
        color: #fff;
        width: 190px;
        transition: all 0.2s ease; }
      nav ul a.sunsetVista:hover:before,
      nav ul a.sunsetVista:active:before,
      nav ul a.sunsetVista:focus:before {
        color: #fff;
        width: 180px;
        transition: all 0.2s ease; }
      nav ul a:hover {
        color: #fff;
        transition: all 0.2s ease; }
      nav ul a:hover .hideInit {
        opacity: 1;
        transition: all 0.2s ease; }

  .burger-container {
    display: inline-block; } }
@media only screen and (max-width: 1024px) {
  #mainSection a {
    color: #fff; }
  #mainSection a::before {
    width: 220px; }
  #mainSection .bolt {
    opacity: 1;
    display: none; }
    #mainSection .bolt svg {
      stroke-width: 1.5px;
      fill: #fff; }
  #mainSection .yellowDots {
    bottom: -120px; }

  .nav {
    display: none; }
    .nav ul {
      bottom: 165px;
      top: initial; }

  nav {
    height: 90px;
    position: fixed;
    width: 100%;
    max-width: 220px;
    z-index: 10000;
    top: initial;
    bottom: 0;
    right: 0; }
    nav .container {
      position: relative; }
      nav .container .col-sm-6:nth-of-type(2) {
        position: relative; }
      nav .container img {
        margin-top: 30px;
        height: 30px; }
    nav ul {
      position: absolute;
      list-style: none;
      right: 40px; }
      nav ul .hideInit {
        opacity: 1;
        transition: all 0.2s ease; }
      nav ul a::before {
        content: "";
        position: absolute;
        width: 180px;
        height: 64px;
        border-radius: 60px;
        z-index: -1;
        top: 0;
        right: 0;
        transition: all 0.5s ease;
        float: left; }
      nav ul .paynesGrey::before {
        background-color: #200c42;
        width: 190px; }
      nav ul .oceanBlue::before {
        background-color: #3f5cbf; }
      nav ul .seaBreeze::before {
        background-color: #53d5e5;
        width: 180px; }
      nav ul .pinneapleYellow::before {
        background-color: #f8b827;
        width: 170px; }
      nav ul .sunsetVista::before {
        background-color: #d30c7b;
        width: 160px; }
      nav ul a.paynesGrey:hover:before,
      nav ul a.paynesGrey:active:before,
      nav ul a.paynesGrey:focus:before {
        color: #fff;
        width: 210px;
        transition: all 0.2s ease; }
      nav ul a.seaBreeze:hover:before,
      nav ul a.seaBreeze:active:before,
      nav ul a.seaBreeze:focus:before {
        color: #fff;
        width: 200px;
        transition: all 0.2s ease; }
      nav ul a.pinneapleYellow:hover:before,
      nav ul a.pinneapleYellow:active:before,
      nav ul a.pinneapleYellow:focus:before {
        color: #fff;
        width: 190px;
        transition: all 0.2s ease; }
      nav ul a.sunsetVista:hover:before,
      nav ul a.sunsetVista:active:before,
      nav ul a.sunsetVista:focus:before {
        color: #fff;
        width: 180px;
        transition: all 0.2s ease; }
      nav ul a:hover {
        color: #fff;
        transition: all 0.2s ease; }
      nav ul a:hover .hideInit {
        opacity: 1;
        transition: all 0.2s ease; }

  .burger-container {
    display: inline-block; }

  #latestWork .btn-yellow {
    color: #fff; }
  #latestWork .btn-yellow::before {
    width: 200px; }

  #contactSection input.submit {
    color: #fff; }
  #contactSection a::before {
    width: 220px; } }
@media only screen and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  #mainSection a {
    color: #fff; }
  #mainSection a::before {
    width: 220px; }
  #mainSection .bolt {
    opacity: 1;
    display: none; }
    #mainSection .bolt svg {
      stroke-width: 1.5px;
      fill: #fff; }
  #mainSection .yellowDots {
    bottom: -120px; }

  #latestWork .btn-yellow {
    color: #fff; }
  #latestWork .btn-yellow::before {
    width: 200px; }

  #contactSection input.submit {
    color: #fff; }
  #contactSection a::before {
    width: 220px; } }

/*# sourceMappingURL=style.css.map */

/* Trace card and case-study popup */
#latestWork .trace-card .projectPadding1 { background: #fff; border-radius: 0 20px 20px 0; box-shadow: 0 0 60px rgba(36,139,152,.17); }
#latestWork .trace-card .projectPadding1::before,
#latestWork .trace-card .projectPadding1::after { content: none; }
#latestWork .trace-project-button { align-self: flex-start; position: relative; margin-top: 30px; padding: 16px 32px; min-height: 48px; border: 0; border-radius: 999px; background: #f8b827; color: #fff; font: 700 16px "BoubaRound-Black", "Poppins", sans-serif; cursor: pointer; }
#latestWork .trace-project-button:hover { background: #eead1b; box-shadow: 0 7px 24px rgba(248,184,39,.35); }
#latestWork .trace-project-button:focus-visible { outline: 3px solid #4864dc; outline-offset: 4px; }
#latestWork .container a  { font-size: 18px; color: #6C3FF3; display:inline-block; margin-top: 24px; }
@media (max-width: 767px) { #latestWork .trace-card .projectPadding1 { border-radius: 0 0 20px 20px; } }
#latestWork #traceModal { z-index: 10001; }
body.modal-open .modal-backdrop { z-index: 10000; }
/* Clip the scrolling content and scrollbar to both upper modal corners. */
#latestWork #traceModal .modal-dialog {
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

/* Trace case-study introduction and Explore hero. */
#latestWork #traceModal .trace-intro { max-width: 1120px; margin: 0 auto; padding: 64px 40px 48px; }
#latestWork #traceModal #trace-headline { font-family: "BoubaRound-Black", "Poppins", sans-serif; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.12; color: #200c42; max-width: 900px; margin: 0 0 24px; }
#latestWork #traceModal .trace-summary { font-family: "Open Sans", sans-serif; font-size: 18px; line-height: 1.8; color: #200c42; max-width: 920px; margin: 0; text-align: left;}
#latestWork #traceModal .paragraph-margin-bottom { margin-bottom: 16px;}
#latestWork #traceModal .trace-details { display: grid; grid-template-columns: 1fr 2.2fr 1fr; gap: 32px; margin: 40px 0 0; color: #200c42; font-family: "Open Sans", sans-serif; font-size: 15px; line-height: 1.7; }
#latestWork #traceModal .trace-details dt { font-weight: 700; margin-bottom: 8px; }
#latestWork #traceModal .trace-details dd { margin: 0; }
#latestWork #traceModal .trace-explore-shot { margin: 0; padding: clamp(16px, 4vw, 64px); background: linear-gradient(135deg, #eeebfb, #f4f5fa 55%, #e7e2f7); }
#latestWork #traceModal .trace-explore-shot img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 16px 56px rgba(32,12,66,.12); }
@media (max-width: 767px) { #latestWork #traceModal .trace-intro { padding: 36px 24px; } #latestWork #traceModal .trace-details { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; } #latestWork #traceModal .trace-summary { font-size: 16px; } }

/* Sidebar illustration beside the navigation design rationale. */
#latestWork #traceModal .trace-navigation { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: start; }
#latestWork #traceModal .trace-navigation-image { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 12px 40px rgba(32,12,66,.10); }
#latestWork #traceModal .trace-navigation-copy { padding-top: 32px; }
@media (max-width: 767px) { #latestWork #traceModal .trace-navigation { grid-template-columns: 1fr; gap: 32px; } #latestWork #traceModal .trace-navigation-image { max-width: 240px; margin: 0 auto; } #latestWork #traceModal .trace-navigation-copy { padding-top: 0; } }

/* Synthesis setup flows into the generated report. */
#latestWork #traceModal .trace-synthesis-flow { display: grid; grid-template-columns: minmax(0,1fr) 56px minmax(0,1fr); align-items: center; gap: 20px; }
#latestWork #traceModal .trace-synthesis-arrow { display: block; width: 56px; height: 56px; color: #6954dd; }
@media (max-width: 767px) { #latestWork #traceModal .trace-synthesis-flow { grid-template-columns: minmax(0,1fr); gap: 24px; } #latestWork #traceModal .trace-synthesis-arrow { justify-self: center; transform: rotate(90deg); } }

/* Report rationale with the finished screen to its right. */
#latestWork #traceModal .trace-report-layout { max-width: 1440px; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
#latestWork #traceModal #trace-report-heading { font-family: "BoubaRound-Black", "Poppins", sans-serif; font-size: clamp(32px,4.5vw,56px); line-height: 1.12; color: #200c42; margin: 0 0 24px; }
#latestWork #traceModal .trace-report-image { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 12px 40px rgba(32,12,66,.12); }
@media (max-width: 767px) { #latestWork #traceModal .trace-report-layout { grid-template-columns: minmax(0,1fr); gap: 32px; } }