body {
        overflow-x: hidden;
      }
      .container-fluid {
        --bs-gutter-x: 6.5rem!important;
      }
      .container-portfolio {
        margin: 6rem 0rem 6rem 0rem;
      }
      .col-4 {
        padding: 1rem 1rem 1rem 1rem;
      }
      .col-sm-6 {
        padding: 4rem 4rem 4rem 4rem;
        padding-right: 5rem!important;
      }
      .wire {
        padding-right: 0rem!important;
        padding-left: 5rem!important;
      }
      .fixed-top {
        background-color: white!important;
      }
      .nav-item {
        font-size: .8rem;
      }
      .navbar-brand {
        font-family: "playfair-display", serif!important;
        font-weight: 400!important;;
        font-style: normal!important;;
        font-size: 28px!important;;
      }
      .navbar-collapse {
        flex-grow: 0!important;
        flex-basis: 100%;
        align-items: center;
      }
      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }
      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
      .navbar-toggler {
        border: none!important;
      }
      .btn-bd-primary {
        --bd-violet-bg: #712cf9;
        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--bd-violet-bg);
        --bs-btn-border-color: var(--bd-violet-bg);
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #6528e0;
        --bs-btn-hover-border-color: #6528e0;
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #5a23c8;
        --bs-btn-active-border-color: #5a23c8;
      }
      .bd-mode-toggle {
        z-index: 1500;
      }
      .bd-mode-toggle .bi {
        width: 1em;
        height: 1em;
      }
      .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }
      .hero {
        margin-top: 5.375rem;
        background-size: cover;
        background-position: center; /* Centers the image within the div */
        background-repeat: no-repeat;
        height: 50%; /* Sets the div height to 100% of the viewport height */
        width: 100%;
        position: relative;
      }
      .hero-image {
        width: 100%;
        padding: 4rem 0rem;
      }
      .header-main {
        font-family: "playfair-display", serif;
        font-weight: 400;
        font-style: normal;
        font-size: 50px;
        text-align: center;
        font-style: normal;
        margin-top: 4rem;
      }
      p {
        font-family: "montserrat", sans-serif;
        font-weight: 400;
        font-style: normal;
        line-height: 2.5;
      }
      h1 {
        font-weight: 600;
        font-size: 100px;
        text-align: center;
        font-style: normal;
        font-family: "montserrat", sans-serif;
        font-weight: 400;
        font-style: normal;
      }
      h2 {
        position: relative;
        text-align: center;
        margin: 0 auto!important;
        width: 40%; 
        border-bottom: 1px solid #000; 
        line-height: 0.1em;
        z-index: 1;
        font-family: "montserrat", sans-serif;
        font-weight: 400;
        font-style: normal;
      }
      .header-type {
        width: 100%;
        text-align: left;
        font-family: "montserrat", sans-serif;
        font-size: .9rem;
        font-weight: 100;
        font-style: normal;
        color: #999;
        border-bottom: 0px;
        text-transform: uppercase;
      }
      .header-brand {
        font-family: "playfair-display", serif;
        font-size: 2.5rem;
        font-weight: 200;
        text-align: left;
        padding: .5rem 0rem;

      }
      .header-promo {
        font-family: "playfair-display", serif;
        font-size: 1.5rem;
        font-weight: 400;
        text-align: left;
        padding: .5rem 0rem;
        text-transform: uppercase;
      }
      .promo {
        padding: 5rem 0rem 0rem 0rem;
      }
      .promo-desc {
        font-family: "montserrat", sans-serif;
        font-size: .8rem;
        line-height: 26px;
        padding-top: 2rem;
      }
      .promo-hero {
        background-image: url(./images/promo-bg.png);
        width: 43%;
        right: 1px;
        top: -60px;
        position: absolute;
      }
      .promo-kickoff {
        font-family: "montserrat", sans-serif;
        font-size: .8rem;
        line-height: 26px;
      }
      .promo-process {
        padding-right: 0px !important;
        font-family: "montserrat", sans-serif;
        font-size: .8rem;
        line-height: 26px;
        padding-top: 2rem;
        margin-top: 3rem!important;
      }
      #aboutMe-header {
        position: relative;
        text-align: center;
        margin: 0 auto!important;
        width: 20%;  
        line-height: 0.1em;
        z-index: 1;
      }
      .promotion-header {
        text-align: left;
        margin-top: 4rem;
      }
      .lines {
        background:#fff; 
        padding:0 10px; 
        z-index: 2;
      }
      .icons {
        padding: 0rem 1rem;
        width: 100%;
      }
      .apps {
        width: 400px;
      }
      .landing-page-img {
        width: 100%;
      }
      .int-page {
        padding: 4rem 0rem;
        background-color: #F5F5F5;
      }
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }
      .card {
        border:0px;
      }
      .overlaySuperman {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        font-size: 1rem;
        font-weight: 300;
        transition: .3s ease;
        background-color: rgba(255, 255, 255, 0.8);
        opacity: 0;
        -moz-animation: overlayKeyframe 2s ease-in 1.7s;
        -webkit-animation: overlayKeyframe 2s ease-in 1.7s; 
        -ms-animation: overlayKeyframe 2s ease-in 1.7s; 
        -o-animation: overlayKeyframe 2s ease-in 1.7s; 
        animation: overlayKeyframe 2s ease-in 1.7s;*/
      }
      @-webkit-keyframes overlayKeyframe { /* Chrome, Safari */
          100% {width:100%;}
      }
      @-moz-keyframes overlayKeyframe {
          0% {opacity: .0;}
          40% {opacity: .5;}
          60% {opacity: .5;}
          100% {opacity: .0;}
      }
      @-ms-keyframes overlayKeyframe {
          0% {opacity: .0;}
          40% {opacity: .5;}
          60% {opacity: .5;}
          100% {opacity: .0;}
      }
      @-o-keyframes overlayKeyframe {
          0% {opacity: .0;}
          40% {opacity: .5;}
          60% {opacity: .5;}
          100% {opacity: .0;}
      }
     @keyframes overlayKeyframe {
          0% {opacity: .0;}
          40% {opacity: .5;}
          60% {opacity: .5;}
          100% {opacity: .0;}
      }
      .overlaySuave {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        font-size: 1rem;
        font-weight: 300;
        transition: .3s ease;
        background-color: rgba(255, 255, 255, 0.8);
        opacity: 0;
      }
      .overlayFandango {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        font-size: 1rem;
        font-weight: 300;
        transition: .3s ease;
        background-color: rgba(255, 255, 255, 0.8);
        opacity: 0;
      }
      .overlayHalo {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        font-size: 1rem;
        font-weight: 300;
        transition: .3s ease;
        background-color: rgba(255, 255, 255, 0.8);
        opacity: 0;
      }
      .overlayMcdonalds {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        font-size: 1rem;
        font-weight: 300;
        transition: .3s ease;
        background-color: rgba(255, 255, 255, 0.8);
        opacity: 0;
      }
      .card:hover .overlaySuperman {
        opacity: 1;
        cursor: pointer;
      }
      .card:hover .overlaySuave {
        opacity: 1;
        cursor: pointer;
      }
      .card:hover .overlayAmazon {
        opacity: 1;
        cursor: pointer;
      }
      .card:hover .overlayFandango {
        opacity: 1;
        cursor: pointer;
      }
      .card:hover .overlayHalo {
        opacity: 1;
        cursor: pointer;
      }
      .card:hover .overlayMcdonalds {
        opacity: 1;
        cursor: pointer;
      }

      .block-text {
        color: black;
        font-size: 18px;
        font-family: "playfair-display", serif;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        text-align: center;
      }
      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
      .b-example-divider {
        width: 100%;
        height: 3rem;
        border: solid rgba(0, 0, 0, 0.15);
        border-width: 1px 0;
        box-shadow:
          inset 0 0.5em 1.5em #0000001a,
          inset 0 0.125em 0.5em #00000026;
      }
      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }
      .bi {
        vertical-align: -0.125em;
        fill: currentColor;
      }
      .navbar {
        background: white;
      }
      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }
      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
      .btn-bd-primary {
        --bd-violet-bg: #712cf9;
        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--bd-violet-bg);
        --bs-btn-border-color: var(--bd-violet-bg);
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #6528e0;
        --bs-btn-hover-border-color: #6528e0;
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #5a23c8;
        --bs-btn-active-border-color: #5a23c8;
      }
      .bd-mode-toggle {
        z-index: 1500;
      }
      .bd-mode-toggle .bi {
        width: 1em;
        height: 1em;
      }
      .bd-mode-toggle .dropdown-menu .active .bi {
        display: block !important;
      }
      .text {
        position:relative;
        line-height:2em;
        overflow:hidden;
        margin:0 auto;
      }
      .fadingEffect {
          position:absolute;
          top:0; bottom:0; right:0;
          width:0%;
          background:white;
          z-index: 0;
          animation-iteration-count: 1;
          -moz-animation: showHide 5s ease-in; /* Firefox */
          -webkit-animation: showHide 5s ease-in; /* Safari and Chrome */
          -ms-animation: showHide 5s ease-in; /* IE10 */
          -o-animation: showHide 5s ease-in; /* Opera */
          animation: showHide 5s ease-in;
      }
      @-webkit-keyframes showHide { /* Chrome, Safari */
          100% {width:100%;}
      }
      @-moz-keyframes showHide { /* FF */
          0% {width:100%}
          40% {width:0%}
          60% {width:0%;}
          100% {width:0%;}
      }
      @-ms-keyframes showHide { /* IE10 */
          0% {width:100%}
          40% {width:0%}
          60% {width:0%;}
          100% {width:0%;}
      }
      @-o-keyframes showHide { /* Opera */
          0% {width:100%}
          40% {width:0%}
          60% {width:0%;}
          100% {width:0%;}
      }
      @keyframes showHide {
          0% {width:100%}
          40% {width:0%}
          60% {width:0%;}
          100% {width:0%;}
      }
      #me {
        text-align: center;
        margin: 6rem 0rem 1rem 0rem;
        img {
          width: 150px;
          margin: 3rem 0rem 1rem 0rem;
        }
      }
      #bio {
          max-width: 620px;
          text-align: justify;
          margin: 0 auto;
          margin-top: 3rem;
          font-size: 18px;
          line-height: 30px;
      }
      .mobile-only {
        display:none;
      }
      @media (max-width: 430px) {
            .container-portfolio {
              margin: 3rem 0rem 6rem 0rem;
            }
            #aboutMe-header {
              width: 50%!important;
            }
            .apps {
              width: 100%!important;
            }
            .promo {
              padding: 0rem 0rem 0rem 0rem!important;
            }
            .col-sm-4, .col-sm-6, .col-sm-8, .col-12 {
              padding: 2rem 3rem 0rem 3rem !important;
            }
            .col-4 {
              padding: .4rem .4rem .4rem .4rem!important;
            }
            .block-text { 
              font-size: 12px!important;
            }
      }
      @media (min-width: 768px) {
            .header-main {
              font-size: 100px;
            }
           
      }
      @media (max-width: 768px) { 
            .col-6 {
              width: 100%!important;
            }
            p {
              width: 100%!important;
            }
            .col-sm-4, .col-sm-6, .col-sm-8, .col-12 {
              width: 100%!important;
              padding: 1rem !important;
            }
            .promotion-header {
              padding-left: 3rem !important;
            }
            .promo-hero {
              display: none;
            }
            .apps {
              width: 100%!important;
            }
            .mobile-only {
              display: block;
            }
            .desk-only {
              display: none;
              text-transform: uppercase;
            }
      }
      @media (max-width: 865px) { 
            h2 { line-height: normal!important;
            }
      }