:root {
    --primary-color: rgb(0, 0, 0);
    --secondary-color: rgb(217, 217, 217);
    --tertiary-color: rgb(60, 190, 255);
    --grey-color: rgb(67, 67, 67);
    --text-color: rgb(145, 145, 145);
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--primary-color);
}

.overflow {
    overflow-y: hidden;
}

.primary {
    color: var(--primary-color);
}

.secondary {
    color: var(--secondary-color);
}

.blur {
    filter: blur(0.2rem);
}

.mobile-homepage {
    height: 100vh;
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    transition: filter 0.5s ease;
    overflow: hidden;
    position: relative;
    top: 0;
}

.mobile-top-nav {
    width: 100vw;
    height: 4.5rem;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    position: fixed;
    z-index: 10;
}

.mobile-top-nav-dark {
    background-color: rgba(0, 0, 0, 1);
}

.logo {
    position: absolute;
    height: 2.5rem;
    left: 5%;
}

.mobile-menu {
    position: absolute;
    height: 3.5rem;
    width: 3.5rem;
    right: 5%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
}

.mobile-menu-line-1, 
.mobile-menu-line-2, 
.mobile-menu-line-3 {
    width: 2rem;
    height: 0.1rem;
    background-color: var(--secondary-color);
    border-radius: 10px;
}

.mobile-menu-line-1-animation {
    animation: line1 1s forwards;
}

.mobile-menu-line-1-animation-rev {
    animation: line1rev 1s forwards reverse;
}

@keyframes line1 {
    from{
        transform: translateY(0);
    }
    to{
      transform: translateY(0.62rem) rotate(45deg);
    }
}

@keyframes line1rev {
    from{
        transform: translateY(0);
    }
    to{
      transform: translateY(0.7rem) rotate(45deg);
    }
}

.mobile-menu-line-2-animation {
    animation: line2 1s forwards;
}

.mobile-menu-line-2-animation-rev {
    animation: line2rev 1s forwards reverse;
}

@keyframes line2 {
    from{
        transform: translateY(0);
    }
    to{
      transform: rotate(-45deg);
    }
}

@keyframes line2rev {
    from{
        transform: translateY(0);
    }
    to{
      transform: rotate(-45deg);
    }
}

.mobile-menu-line-3-animation {
    animation: line3 1s forwards;
}

.mobile-menu-line-3-animation-rev {
    animation: line3rev 1s forwards reverse;
}

@keyframes line3 {
    from{
        transform: translateY(0);
    }
    to{
      transform: translateY(0.7rem);
    }
}

@keyframes line3rev {
    from{
        transform: translateY(0);
    }
    to{
      transform: translateY(0.7rem);
    }
}

.mobile-menu-dropdown {
    position: fixed;
    top: -23rem;
    height: 50vh;
    width: 100vw;
    transition: top 1s ease;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
}

.mobile-menu-dropdown-open {
    top: 4.5rem;
}

.mobile-menu-dropdown a {
    font-family: "Reddit Mono";
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    color: white;
    text-decoration: none;
    opacity: 1;
}

.mobile-homepage-text-container {
    position: absolute;
    top: 20%;
    display: flex;
    flex-direction: column;
    left: 10%;
    gap: 1rem;
}

.mobile-homepage-text {
    font-family: "Reddit Mono";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    color: white;
}

.highlighted {
    position: relative;
    display: inline-block;
    z-index: 1;
    width: fit-content;
}

.highlighted::before {
    content: "";
    position: absolute;
    top: -0.6rem;     /* move background up */
    left: -0.6rem;
    right: 12.5rem;
    bottom: -0.6rem;
    background-color: var(--secondary-color);
    z-index: -1;
    border-radius: 4px;
}

.highlighted.animate::before {
    animation: highlightAnimation 4s forwards;
}

@keyframes highlightAnimation {
    0% {
        right: 12rem;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    20% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    40% {
        opacity: 0;
    }
    50% {
        opacity: 1;
        right: 12rem;
    }
    60% {
        opacity: 1;
    }
    100% {
        right: -0.6rem;
    }
}

.mobile-blue-thing {
    position: absolute;
    top: 42%;
    height: 7rem;
    width: 70%;
    border: 0.5rem solid var(--tertiary-color);
    border-left: none;
    left: 30%;
}

.mobile-grey-thing {
    position: absolute;
    top: 120%;
    height: 2.5rem;
    width: 70%;
    border: 0.5rem solid var(--grey-color);
    border-right: none;
    left: 15%;
}

.mobile-homepage-p-container {
    color: var(--text-color);
    font-family: MuseoModerno;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    position: absolute;
    top: 55%;
    height: fit-content;
    width: 80%;
}

.mobile-homepage-line {
    position: absolute;
    width: 6rem;
    height: 0.1rem;
    background-color: white;
    bottom: 2rem;
    border-radius: 10px;
}

.mobile-about {
    width: 100vw;
    height: 100vh;
    background-color: var(--primary-color);
    background-image: url(rectangle69.svg);
    background-size: cover;
    position: relative;
    transition: filter 0.5s ease;
    overflow: hidden;
}

.mobile-about-text-container {
    display: flex;
    position: relative;
    left: 10%;
    flex-direction: column;
    padding-top: 5rem;
    width: 60%;
}

.mobile-about-title {
    font-family: MuseoModerno;
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: white;
    margin: 0;
}

.mobile-about-text {
    color: var(--text-color);
    font-family: MuseoModerno;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.mobile-about-button {
    background-color: var(--secondary-color);
    border-radius: 0.8rem;
    height: 2rem;
    width: fit-content;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--primary-color);
}
.mobile-about-button p {
    font-family: MuseoModerno;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.mobile-about-icons-grid {
    position: relative;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(4, 1fr);
    height: 10rem;
    align-items: center;
    justify-items: center;
    top: 20%;
    padding: 5%;
    row-gap: 3rem;
}

.mobile-about-icons {
    height: 2rem;
}

.mobile-pricing {
    height: fit-content;
    background-color: rgb(0, 0, 0);
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    transition: filter 0.5s ease;
    overflow: hidden;
}

.mobile-pricing-expanded {
    width: 100vw;
    height: 0;
    background-color: var(--secondary-color);
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    transition: height 1s ease;
    overflow: hidden;
}

.mobile-pricing-expanded-visible {
    height: calc(100vh - 4.5rem);
}

.enquiry-go-back {
    height: 2rem;
    width: fit-content;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    background-color: black;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    font-family: MuseoModerno;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: white;
    position: absolute;
    right: 10%;
    top: 2rem;
}

.pricing-expanded-title {
    position: relative;
    font-family: MuseoModerno;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-top: 5rem;
    padding-left: 10%;
    padding-right: 10%;
    text-align: center;
    height: fit-content;
}

.mobile-pricing-title, .mobile-pricing-subtitle {
    position: relative;
    padding-top: 5rem;
    font-family: MuseoModerno;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: white;
    margin: 0;
    text-align: center;
}

.mobile-pricing-subtitle {
    font-size: 1rem;
    padding-top: 0;
}

.mobile-pricing-static, 
.mobile-pricing-dynamic,
.mobile-pricing-custom  {
    width: 60%;
    height: 25rem;
    border: solid 0.1rem white;
    position: relative;
    margin-top: 4rem;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mobile-pricing-box-title {
    color: white;
    padding-top: 0.6rem;
    font-family: MuseoModerno;
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0;
}

.popular {
    height: fit-content;
    width: fit-content;
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    background-color: #10717C;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    margin-top: 0.3rem;
}

.popular p {
    font-family: MuseoModerno;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
    color: white;
}

.mobile-product-desc {
    width: 80%;
    height: fit-content;
    padding-top: 1rem;
}

.mobile-product-desc p {
    font-family: MuseoModerno;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: var(--text-color);
}

.mobile-price {
    font-family: MuseoModerno;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: white;
    margin-bottom: 0;
}

.mobile-subprice {
    font-family: MuseoModerno;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: var(--text-color);
    margin-top: 0;
}

.enquiry {
    background-color: var(--secondary-color);
    border-radius: 0.8rem;
    height: 2rem;
    width: fit-content;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: -1rem;
}

.enquiry p {
    font-family: MuseoModerno;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.mobile-pricing-dynamic {
    border: solid 0.1rem rgb(114, 0, 0);
    margin-top: 5rem;
    background-image: url(rectangle73.svg);
    background-size: cover;
}

.mobile-pricing-custom {
    border: solid 0.1rem rgb(129, 114, 0);
    margin-top: 5rem;
    margin-bottom: 1rem;
    background-image: url(rectangle75.svg);
    background-size: cover;
}

.mobile-questions {
    height: fit-content;
    background-color: var(--primary-color);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: filter 0.5s ease;
    overflow: hidden;
}

.mobile-questions-title {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 1rem;
    font-family: MuseoModerno;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: white;
    margin: 0;
    text-align: center;
}

.mobile-questions-grid {
    margin-bottom: 2rem;
}

.mobile-question {
    width: 80vw;
    height: 3rem;
    border: 0.1rem solid white;
    border-bottom: none;
    display: grid;
    grid-template-columns: 1fr 5fr;
}

.mobile-question p {
    font-family: MuseoModerno;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: white;
}

.plus p {
    text-align: center;
    font-size: 2rem !important;
    margin: 0;
}

.answer {
    color: white;
    width: 80vw;
    max-height: 0;
    border-left: 0.1rem white solid;
    border-right: 0.1rem white solid;
    transition: max-height 1s ease;
    overflow: hidden;
}

.answer p {
    color: var(--text-color);
    font-family: MuseoModerno;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-left: 10%;
    padding-right: 10%;
    margin: 0;
    padding-bottom: 2rem;
    padding-top: 1rem;
}

.answer-expanded {
    max-height: 20rem;
}

.mobile-projects {
    height: fit-content;
    background-color: var(--primary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: filter 0.5s ease;
    overflow: hidden;
}

.mobile-projects-title {
    position: relative;
    padding-top: 5rem;
    padding-bottom: 3rem;
    font-family: MuseoModerno;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: white;
    margin: 0;
    text-align: center;
}

.mobile-projects-container {
    width: 70vw;
    height: fit-content;
    border: 0.1rem solid white;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 3rem;
}

.mobile-projects-container-title {
    font-family: MuseoModerno;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: white;
}

.mobile-projects-container-desc {
    font-family: MuseoModerno;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: var(--text-color);
    padding-left: 10%;
    padding-right: 10%;
}

.mobile-projects-container-img {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 0.5rem;
    height: 8rem;
    width: 80%;
    padding-bottom: 3rem;
    padding-top: 2rem;
}

.projects-img1 {
    background-image: url(88daysmobile.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.projects-img2 {
    background-image: url(88daysdesktop.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.go-to-site {
    background-color: var(--secondary-color);
    border-radius: 0.8rem;
    height: 2rem;
    width: fit-content;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: -1rem;
    text-decoration: none;
    color: var(--primary-color);
}

.go-to-site p {
    font-family: MuseoModerno;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.mobile-contact {
    width: 100vw;
    height: fit-content;
    background-color: var(--primary-color);
    background-image: url(rectangle102.svg);
    background-size: cover;
    transition: filter 0.5s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.mobile-contact-container {
    width: 100vw;
    display: flex;
    flex-direction: column;
    padding-top: 5rem;
    position: relative;
}

.mobile-contact-container p {
    font-family: MuseoModerno;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: white;
    padding-left: 10%;
}

.mobile-contact-text {
    margin: 0 !important;
    color: var(--text-color) !important;
}

.linkedin-logo {
    background-image: url(linkedinLogo.png);
    background-size: contain;
    background-repeat: no-repeat;
    height: 1.5rem;
    width: 7rem;
    margin-left: 10%;
    margin-top: 2rem;
}

.mobile-contact-form {
    width: 80vw;
    height: fit-content;
    background-color:  var(--primary-color);
    position: relative;
    margin-top: 5rem;
    border-radius: 1rem;
    margin-bottom: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mobile-contact-form-title {
    font-family: MuseoModerno;
    font-size: 1.2rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: white;
    padding-left: 15%;
    padding-top: 0.6rem;
}

.mobile-contact-form-option, .mobile-contact-form-message, .mobile-contact-form-submit {
    background-color: #ADABAB;
    border-radius: 0.7rem;
    height: 2rem;
    width: 70%;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    position: relative;
    border: none;
}

.mobile-contact-form-message {
    height: 7rem;
}

input::placeholder,
textarea::placeholder {
    font-family: MuseoModerno;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: #585858;
    padding-left: 10%;
}

textarea::placeholder {
    padding-top: 0.5rem;
}

.mobile-contact-form-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #5443A0;
    font-family: MuseoModerno;
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: white;
}

.footer {
    position: absolute;
    bottom: 0.5rem;
    left: 5%;
    font-family: MuseoModerno;
    font-size: 0.6rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    color: white;
    margin: 0;
}