:root {
    /* Color Palette */
    --color-1: #7093A4;
    --color-1-tint-9: #7e9dad;
    --color-1-tint-8: #8ca8b6;
    --color-1-tint-7: #9ab2bf;
    --color-1-tint-6: #a8bdc8;
    --color-1-tint-5: #b6c8d1;
    --color-1-tint-4: #c4d3da;
    --color-1-tint-3: #d3dee3;
    --color-1-tint-2: #e1e9ec;
    --color-1-tint-1: #f0f4f6;
    --color-1-shade-1: #607f8e;
    --color-1-shade-2: #516c79;
    --color-1-shade-3: #435964;
    --color-1-shade-4: #354750;
    --color-1-shade-5: #27363d;
    --color-1-shade-6: #1a252b;
    --color-1-shade-7: #0e161a;
    --color-1-shade-8: #04080a;
    --color-1-shade-9: #010101;
    
    --color-2: #e4dbd4;
    
    --color-3: #104756;
    
    --color-black: var(--color-1-shade-9);
    --color-white: #ffffff;
    
    /* Background Colors */
    --bg-light: var(--color-1-tint-2);
    --bg-1: var(--color-1);
    --bg-dark: var(--color-1-shade-6);
    --bg-2: var(--color-2);
    --bg-3: var(--color-3);
    
    /* Text Colors */
    --text-dark: var(--color-black);
    --text-light: var(--color-white);
    
    /* Font Families */
    --font-1: 'Bree Serif', serif;
    --font-2: 'Pacifico', cursive;
    --font-3: 'Poppins', sans-serif;
    --font-4: 'Quicksand', sans-serif;
}

a {
    color: var(--color-1);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.accordion-button {
    background-color: var(--bg-light);
    font-family: var(--font-4);
    font-weight: 600;
}
.accordion-button:not(.collapsed) {
    background-color: var(--bg-1);
    color: var(--text-light);
}
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}
.bg-1 {
    background-color: var(--color-1);
    color: var(--text-light);
}
.bg-2 {
    background-color: var(--color-2);
    color: var(--text-dark);
}
.bg-3 {
    background-color: var(--color-3);
    color: var(--text-light);
}
.bg-3 a{
    color: var(--text-light) !important;
}
.bg-3 a:hover {
    color: var(--color-1-tint-2) !important;
}
.bg-dark {
    background-color: var(--bg-dark) !important;
}
.bg-light {
    background-color: var(--bg-light) !important;
}
.bg-white {
    background-color: #ffffff;
}
body {
    background-color: var(--bg-dark);
    scroll-behavior: smooth;
}
.border {
    border-color: var(--color-1) !important;
}
.border-dark {
    border-color: var(--color-black);
}
.breadcrumb {
    margin-bottom: 0;
}
#breadcrumbs {
    background-color: var(--bg-2);
    font-family: var(--font-3);
    padding: 0.5em 3em;
    position: sticky;
    top: 66px;
    z-index: 1020;
}
#breadcrumbs a {
    color: var(--color-3);
}
.btn-dark,
.btn-light,
.btn-outline-dark,
.btn-outline-light {
    border-radius: 0;
    font-family: var(--font-3);
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.2s ease-in-out;
}
.btn-dark {
    background-color: var(--bg-dark);
    color: var(--text-light);
    border: 2px solid var(--bg-dark);
}
.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--color-1-shade-5);
    border-color: var(--color-1-shade-5);
    color: var(--text-light);
    text-decoration: none;
}
.btn-dark-outline {
    background-color: transparent;
    border: 2px solid var(--bg-dark);
    border-radius: 0;
    color: var(--bg-dark);
}
.btn-dark-outline:hover,
.btn-dark-outline:focus {
    background-color: var(--bg-dark);
    color: var(--text-light);
    text-decoration: none;
}
.btn-light {
    background-color: var(--bg-light);
    color: var(--text-dark);
    border: 2px solid var(--bg-light);
}
.btn-light:hover,
.btn-light:focus {
    background-color: var(--color-1-tint-3);
    border-color: var(--color-1-tint-3);
    color: var(--text-dark);
    text-decoration: none;
}
.btn-light-outline {
    background-color: transparent;
    color: var(--bg-light);
    border: 2px solid var(--bg-light);
}
.btn-light-outline:hover,
.btn-light-outline:focus {
    background-color: var(--bg-light);
    color: var(--text-dark);
    text-decoration: none;
}
.card-img-left {
  object-fit: cover;
  width: 30%;
}
.carousel-control-prev,
.carousel-control-next {
    color: var(--text-dark);
    top: 50%;
    transform: translateY(-50%);
    width: 5%;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
    filter: invert(0);
}
.carousel-control-next {
    margin-right: -50px;
}
.carousel-control-prev {
    margin-left: -50px;
}
.carousel-indicators [data-bs-target] {
    background-color: var(--bg-1);
    border-radius: 50%;
    height: 15px;
    width: 15px;
}
.contact-icons a {
    color: #000;
    font-size: 1.5rem;
    margin-right: 1rem;
}
.counter {
    font-family: var(--font-2);
}
.cs1-UJMCard1, .cs1-UJMCard2, .cs1-UJMCard3 {
    min-height: 310px;
}
.cs1-UJMCard4 {
    min-height: 330px;
}
.cs1-UJMCard5 {
    min-height: 215px;
}
.cs2-UJMCard3 {
    min-height: 233px;
}
.cs2-UJMCard4 {
    min-height: 208px;
}
.cs2-UJMCard5 {
    min-height: 170px;
}
.cs2-UJMCard6 {
    min-height: 146px;
}
.cs3-UJMCard1 {
    min-height: 168px;
}
.cs3-UJMCard2 {
    min-height: 148px;
}
.cs3-UJMCard3, .cs3-UJMCard7 {
    min-height: 143px;
}
.cs3-UJMCard4 {
    min-height: 145px;
}
.cs3-UJMCard5, .cs3-UJMCard6 {
    min-height: 166px;
}
.cs1-wireCards {
    min-height: 140px;
}
.eyebrow {
    background-color: var(--color-1);
    border-radius: 500px;
    color: var(--text-light);
    display: inline-block;
    font-family: var(--font-2);
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
}
.eyebrow-light {
    background-color: var(--color-white);
    border-radius: 500px;
    color: var(--color-1);
    display: inline-block;
    font-family: var(--font-2);
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
}
.eyebrow-v2 {
    background-color: var(--color-1);
    border-radius: 4px;
    color: var(--text-light);
    display: inline-block;
    font-family: var(--font-1);
    font-size: 1.25rem;
    padding: 0.25rem 0.5rem;
    margin-bottom: 0.25rem;
}
.fade-in {
    opacity: 1;
}
.fade-out {
    opacity: 0;
}
.form-control {
    border-color: var(--color-1-tint-2);
    border-radius: 0;
}
h1 {
    font-family: var(--font-4);
    font-size: 2.986rem;
    font-weight: 400;
}
h2 {
    font-family: var(--font-1);
    font-size: 2.488rem;
    font-weight: 400;
}
h3 {
    font-family: var(--font-4);
    font-size: 2.074rem;
    font-weight: 500;
}
h4 {
    font-family: var(--font-1);
    font-size: 1.728rem;
    font-weight: 400;
}
h5 {
    font-family: var(--font-4);
    font-size: 1.44rem;
    font-weight: 600;
}
h6 {
    font-family: var(--font-1);
    font-size: 1.2rem;
    font-weight: 400;
}
header {
    background-color: var(--bg-light);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.hero {
    padding: 6rem 0;
}
.hero-portfolio {
    padding: 4rem 1rem;
    position: relative;
    text-align: center;
}
.laptop-container {
    position: relative;
    display: inline-block;
}
.laptop-container-gd {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-bottom: -5em;
    position: relative;
}
.laptop-bg {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 5%;
    left: 15%;
    right: 15%;
    bottom: 20%;
    pointer-events: none;
    position: absolute;
    opacity: 1;
    transition: opacity 400ms ease-in-out;
    z-index: 1;
}
.laptop-bg-gd {
    background: url(images/laptop-graphic.png) no-repeat center;
    background-size: cover;
    height: 250px;
    top: 0;
    position: absolute;
    width: 400px;
    z-index: 1;
}
.laptop-bg-ux {
    background: url(images/laptop-ux-product.png) no-repeat center;
    background-size: cover;
    height: 250px;
    top: 0;
    position: absolute;
    width: 400px;
    z-index: 1;
}
.laptop-bg-wd {
    background: url(images/laptop-web.png) no-repeat center;
    background-size: cover;
    height: 250px;
    top: 0;
    position: absolute;
    width: 400px;
    z-index: 1;
}
.laptop-img {
    display: block;
    height: auto;
    max-width: 100%;
    position: relative;
    z-index: 2;
}
.laptop-img-portfolio {
    display: block;
    height: auto;
    max-width: 600px;
    position: relative;
    width: 100%;
    z-index: 2;
}
.logoName {
    color: var(--color-3);
    display: inline-block;
    font-family: var(--font-4);
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
    text-decoration: none;
}
@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}
.mb-6 {
  margin-bottom: 4.5rem !important; /* 72px */
}
.navbar-brand {
    text-decoration: none !important;
}
.navbar-brand:hover{
    text-decoration: none !important;
}
.nav-item a:hover {
    text-decoration: none !important;
}
.nav-link {
    font-family: var(--font-3);
    font-weight: 400;
}
.nav-link.active {
    font-weight: 800;
}
.nav-pills {
    background-color: var(--color-1-tint-4);
    border-radius: 100px;
    padding: 0.5rem;
}
.nav-pills button {
    border-radius: 100px;
}
.nav-pills .btn-light {
    background-color: transparent!important;
    border-color: transparent!important;
}
.numberCircle {
    font-family: var(--font-1);
    font-size: 1.5rem;
    margin-top: 13px;
}
.ORinitials {
    fill: var(--color-3);
}
.overlap-hero {
  margin-top: -4em;
  position: relative;
  z-index: 1;
}
.overlap-icon-circle {
    height: 50px;
    margin-top: -1.5rem;
    width: 50px;
}
p {
    font-family: var(--font-3);
    font-size: 1rem;
    font-weight: 400;
}
.persona-card {
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 6px 18px rgba(21, 29, 40, 0.06);
}
.project-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-1);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    max-width: 900px;
    margin: 0 auto; 
}
.project-card-body {
    padding: 1rem 1.5rem;
}
.project-card-img {
    background-position: left;
    border-radius: 8px 0 0 8px;
    height: auto;
    max-width: 300px;
    object-fit: cover;
    object-position: left;
    width: 100%;
}
.rotate-180 {
    display: inline-block;
    transform: rotate(180deg);
}
.selfPortrait {
  border-radius: 12px;
  height: 350px;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.selfPortrait img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: top;
  width: 100%;
}
.SGCColorCard1 {
    background-color: #00285E;
    height: 125px;
    width: 100%;
}
.SGCColorCard2 {
    background-color: #FF1493;
    height: 125px;
    width: 100%;
}
.SGCColorCard3 {
    background-color: #0CCFE8;
    height: 125px;
    width: 100%;
}
.SGCColorCard4 {
    background-color: #F78BCD;
    height: 125px;
    width: 100%;
}
.SGCColorCard5 {
    background-color: #B6F1F8;
    height: 125px;
    width: 100%;
}
.SGCFont1 {
    font-family: 'Molle';
}
.SGCFont2 {
    font-family: 'Graduate';
}
small {
    font-family: var(--font-3);
    font-size: 0.833rem;
    font-weight: 600;
}
.stage-card {
    background: var(--color-1-tint-1);
    border: 1px solid var(--color-1);
}
.text-dark {
    color: var(--text-dark);
}
.text-muted {
    font-family: var(--font-3) !important;
    font-size: 0.694rem !important;
    font-weight: 600 !important;
}
#typewriter::after {
    animation: blink 0.7s infinite;
    color: black;
    content: "|";
    display: inline-block;
    margin-left: 5px;
}

@media (min-width: 992px) {
    .cs1-UJMCard1, .cs1-UJMCard2, .cs1-UJMCard3, .cs1-UJMCard4, .cs1-UJMCard5, .cs2-UJMCard1, .cs2-UJMCard2, .cs2-UJMCard3, .cs2-UJMCard4, .cs2-UJMCard5, .cs2-UJMCard6, .cs3-UJMCard1, .cs3-UJMCard2, .cs3-UJMCard3, .cs3-UJMCard4, .cs3-UJMCard5, .cs3-UJMCard6, .cs3-UJMCard7 {
        height: auto;
    }
    .project-card {
        flex-direction: row;
    }
    .project-card img {
        width: 40%;
    }
    .project-card-body {
        width: 60%;
    }
}

@media (max-width: 767px) {
    .laptop-bg-gd {
        height: 200px;
        width: 335px;
    }
    .overlap-hero {
        margin-top: 0;
    }
}

@media (max-width: 576px) {
  .laptop-bg-gd {
    height: 180px;
    width: 300px;
  }
  .laptop-img-gd {
    max-width: 460px;
  }
  .laptop-container-gd {
    margin-bottom: -2em;
  }
}