.sr-only:not(:focus):not(:active) {
    position: absolute;
    white-space: nowrap;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%)
}

@keyframes fadeIn {
    to {
        opacity: 1
    }
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li {
    color: inherit
}

h1 span,
h1 a,
h2 span,
h2 a,
h3 span,
h3 a,
h4 span,
h4 a,
h5 span,
h5 a,
h6 span,
h6 a,
p span,
p a,
a span,
a a,
li span,
li a {
    font-family: inherit;
    color: inherit
    /* color: #FFFF33; */
}

h1,
h2,
h3 {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    color: inherit
}

body {
    font-family: forma-djr-micro, sans-serif;
    color: #2f303d
}

.hero-heading {
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
    font-size: 15vw;
    line-height: 14vw;
    text-transform: uppercase;
    color: white !important;
    letter-spacing: -2px
}

.large-hero-heading {
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
    font-size: 23vw;
    line-height: 19.5vw;
    text-transform: uppercase;
    color: #f9dddf;
    letter-spacing: -2px
}

.large-heading {
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
    font-size: 14vw;
    line-height: 13vw;
    text-transform: uppercase;
    color: #FFFF33 !important;
    letter-spacing: -1px
}

.xl-medium-heading {
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
    font-size: 12vw;
    line-height: 11vw;
    text-transform: uppercase;
    color: #FFFF33 !important;
    letter-spacing: -1px
}
.xl-medium-heading2 {
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
    font-size: 7vw;
    line-height: 11vw;
    text-transform: uppercase;
    color: black;
    letter-spacing: -1px
}
.xl-medium-heading3 {
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
    font-size: 7vw;
    line-height: 11vw;
    text-transform: uppercase;
    color: #f9dddf;
    letter-spacing: -1px
}

.l-medium-heading {
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
    font-size: 6vw;
    line-height: 5vw;
    text-transform: uppercase;
    color: #f9dddf
}

.s-keyword-heading {
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
    font-size: 1rem;
    line-height: 1rem;
    text-transform: uppercase;
    color: #f9dddf
}

.medium-heading {
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 500, "wdth" 80, "ital" 0;
    font-size: 1.5rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    color: #2f303d;
    letter-spacing: -1px
}

.large-body {
    font-family: forma-djr-micro, sans-serif;
    font-weight: 500;
    font-size: 4vw;
    line-height: 5.5vw;
    color: #2f303d;
    letter-spacing: -.5px
}

.medium-body {
    font-family: forma-djr-micro, sans-serif;
    font-weight: 700;
    font-size: 5vw;
    line-height: 6vw;
    color: #f9dddf;
    letter-spacing: -.5px;
    text-transform: uppercase
}
.medium-body2 {
    font-family: forma-djr-micro, sans-serif;
    font-weight: 700;
    font-size: 5vw;
    line-height: 6vw;
    color: #FFFF33 !important;
    letter-spacing: -.5px;
    text-transform: uppercase
}

.medium-body-lowercase {
    font-family: forma-djr-micro, sans-serif;
    font-weight: 500;
    font-size: 5vw;
    line-height: 6vw;
    color: #f9dddf;
    letter-spacing: -.5px
}

.small-body {
    font-family: forma-djr-micro, sans-serif;
    font-weight: 600;
    font-size: 4vw;
    line-height: 6vw;
    color: #f9dddf;
    letter-spacing: -.5px
}

@media screen and (max-width: 1024px) {
    .footer-logo{
        display: flex;
        justify-content: flex-start !important;
    }
}
@media(min-width:1025px) {
    .hero-heading {
        font-size: 8vw;
        line-height: 7vw
    }

    .large-hero-heading {
        font-size: 8vw;
        line-height: 7vw
    }

    .large-heading {
        font-size: 7vw;
        line-height: 6vw
    }

    .large-body {
        font-size: 4vw;
        line-height: 5.5vw
    }

    .xl-medium-heading {
        font-size: 5.5vw;
        line-height: 5vw
    }

    .l-medium-heading {
        font-size: 2vw;
        line-height: 2.5vw
    }

    .medium-heading {
        font-size: 2rem;
        line-height: 2rem
    }

    .s-keyword-heading {
        font-size: 1.8rem;
        line-height: 1.8rem
    }

    .medium-body {
        font-size: 1.5vw;
        line-height: 2vw
    }

    .medium-body-lowercase {
        font-size: 1.8vw;
        line-height: 2.2vw
    }

    .small-body {
        font-size: 1.4vw;
        line-height: 1.9vw
    }
}

.header {
    padding: 5vw 5vw 0
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 10vh
}

.logo img {
    z-index: 10001;
    position: relative
}

.header-menu-button {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    font-size: 2vw;
    line-height: 2vw
}

.menu-text {
    text-transform: lowercase;
    color: white;
    font-weight: 600
}

.close-button {
    position: absolute;
    top: 6rem;
    right: 5vw
}

.close-button .menu-text {
    color: #f9dddf
}

.sticky-header {
    position: sticky;
    top: 0;
    z-index: 1000
}

.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2f303d;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden
}

.menu-overlay nav ul {
    position: relative;
    list-style-type: none;
    text-align: left;
    margin-bottom: 5vw;
    background-color: #7000BF;
    padding: 5rem 10vw 1rem 5vw;
    transform: rotate(-3deg)
}

.menu-item {
    position: absolute;
    top: -2%;
    left: 5%;
    max-width: fit-content;
    padding: .7rem 1rem .4rem;
    color: #2f303d;
    background-color: #00FEA3;
}

.menu-overlay nav a {
    color: #f9dddf;
    text-decoration: none
}

.social-media {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    color: #f9dddf;
    width: 100%;
    padding: 5vw 4vw;
    text-align: center;
    position: absolute;
    bottom: 10vw;
    margin: 0 auto
}

.social-list {
    min-width: 100%;
    gap: 3vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style: none;
    padding: 0
}

.social-list a {
    color: #f9dddf;
    text-decoration: none;
    display: flex;
    align-items: center;
    position: relative;
    transition: transform .3s ease
}

.social-list a:before {
    content: "•";
    position: absolute;
    left: -20px;
    color: #f9dddf;
    font-size: 1.5rem;
    opacity: 0;
    transition: opacity .3s ease
}

.social-list a:hover {
    transform: translateX(10px)
}

.social-list a:hover:before {
    opacity: 1
}

@media(min-width:1025px) {
    .header {
        padding: 2.5rem 5vw 0
    }

    .logo img:hover,
    .header-menu-button:hover {
        transform: scale(1.3);
        transition: transform .3s ease-in-out
    }

    .menu-item {
        padding: 1.3rem 3rem .7rem;
        font-size: 2rem;
        line-height: 2rem
    }

    .social-media {
        padding: 3vw;
        bottom: 0
    }

    .menu-overlay nav ul {
        margin-bottom: 0;
        padding: 10rem 10rem 2rem 4rem
    }

    .nav-link {
        position: relative;
        display: block;
        overflow: hidden;
        font-size: 6vw;
        line-height: 7.5vw
    }

    .nav-link span {
        display: block;
        transition: color .3s ease, transform .5s cubic-bezier(.68, -.55, .265, 1.55);
        position: relative;
        z-index: 1
    }

    .nav-link:hover span {
        transform: translateY(-100%)
    }

    .nav-link:after {
        content: attr(data-hover);
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        text-align: left;
        transition: top .5s cubic-bezier(.68, -.55, .265, 1.55);
        color: #2f303d;
        z-index: 0
    }

    .nav-link:hover:after {
        top: 0
    }

    .header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 10vh
    }
}

.heading-wrapper {
    width: 100%;
    position: relative;
    height: 100%;
    overflow-x: hidden
}

.welcome-heading>p {
    color: white;
    padding: 10vw 5vw 0;
    text-align: center
}

.hero-heading {
    width: 100%;
    padding: 7vw 5vw;
    text-align: center
}

.hero-heading .inline-video {
    width: 75px;
    height: 85px;
    object-fit: cover;
    margin-bottom: -.5rem
}

.sub-heading {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-color: #01FF9D;
    padding: 1rem 0 .7rem;
    z-index: 1;
    transform: rotate(-3deg)
}

.sub-heading span {
    display: inline-block;
    color: black;
    animation: marquee 15s linear infinite
}

.scroll-down-button {
    transform-origin: center;
    margin: auto;
    padding-top: 10vw
}

.hero-heading .word {
    will-change: transform, opacity
}

@keyframes marquee {
    0% {
        transform: translateX(0%)
    }

    100% {
        transform: translateX(-100%)
    }
}

.wrapper {
    position: relative;
    height: 200%
}

.homepage-header-video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.video-mask {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    clip-path: circle(25%)
}

@media(min-width:1025px) {
    .heading-wrapper {
        position: relative;
        height: 80%
    }

    .hero-heading {
        padding: 4vw 5vw
    }

    .welcome-heading>p {
        padding: 4vw 5vw 0
    }

    .wrapper {
        position: relative;
        height: 200vh
    }

    .hero-heading .inline-video {
        width: 150px;
        height: 150px;
        object-fit: cover;
        margin-bottom: -1rem
    }
}

.page-header-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

.page-header-subtitle {
    width: 100%;
    color: #bc2637;
    text-align: center
}

.page-header-title {
    width: 100%;
    max-width: 80rem;
    height: 25rem;
    color: #2f303d;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 5vw 0;
    opacity: 0;
    transform: scale(.1)
}

.page-header-keywords {
    position: absolute;
    top: 10vw;
    width: 100%;
    height: 25rem
}

.keyword-item {
    max-width: fit-content;
    padding: 1rem 1rem .7rem;
    opacity: 0
}

.keyword-top {
    position: absolute;
    top: 20%;
    left: 15%;
    color: #f9dddf;
    background-color: #bc2637;
    transform: rotate(-3deg)
}

.keyword-bottom {
    position: absolute;
    bottom: 25%;
    right: 35%;
    color: #2f303d;
    background-color: #68a7f4;
    transform: rotate(3deg)
}

.page-header-media {
    position: absolute;
    top: 35%;
    right: 8%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0
}

.page-header-media .media-file {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.scroll-height {
    height: 5vw
}

@media(min-width:768px) {
    .page-header-title {
        margin: 8rem 0;
        font-size: 15vw;
        line-height: 13vw
    }

    .page-header-keywords {
        height: 35rem
    }

    .keyword-top {
        top: 30%;
        left: 15%
    }

    .keyword-bottom {
        bottom: 35%;
        right: 35%
    }

    .page-header-media {
        top: 25%;
        right: 15%;
        width: 120px;
        height: 120px
    }
}

@media(min-width:1025px) {
    .page-header-title {
        margin: 8rem 0 0;
        font-size: 12vw;
        line-height: 10vw
    }

    .page-header-keywords {
        height: 25rem
    }

    .keyword-item {
        padding: 1.3rem 2rem .9rem
    }

    .keyword-top {
        top: 25%;
        left: 15%
    }

    .keyword-bottom {
        bottom: 30%;
        right: 35%
    }

    .page-header-media {
        top: 15%;
        right: 25%;
        width: 150px;
        height: 150px
    }
}

.project-detail-block {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 2.5rem 5vw
}

.project-header-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.5rem
}

.project-header-title {
    width: 100%;
    color: #2f303d;
    text-align: left
}

.project-detail-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
    margin-bottom: .5rem;
    color: #2f303d
}

.project-header-services h3,
.project-header-website h3,
.project-header-services p,
.project-header-website p {
    color: #2f303d
}

.project-thumbnail-block {
    position: relative;
    width: 100%
}

.project-thumbnail {
    width: 100%;
    height: 50%;
    overflow: hidden;
    margin-top: 4rem
}

.project-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.work-date-item {
    position: absolute;
    top: 10%;
    left: 5%;
    max-width: fit-content;
    padding: 1rem 1rem .6rem;
    color: #2f303d;
    background-color: #68a7f4;
    transform: rotate(-3deg)
}

@media(min-width:1025px) {
    .project-detail-block {
        padding: 8rem 5vw
    }

    .project-header-info {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 3rem
    }

    .project-header-title {
        width: 60%;
        text-align: left
    }

    .project-detail-info {
        width: 40%;
        display: flex;
        flex-direction: row;
        justify-content: right;
        align-items: flex-end;
        gap: 2.5rem
    }

    .project-thumbnail {
        width: 100%;
        height: 80vh;
        overflow: hidden;
        margin-top: 4rem
    }

    .work-date-item {
        position: absolute;
        top: 2rem;
        left: 5%
    }
}

.project-intro-block {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 0 5vw
}

.project-text-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    padding: 10rem 0
}

.project-intro-title,
.project-intro-description,
.project-intro-text p {
    color: #2f303d
}

.project-media {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.5rem
}

.project-media-overflow {
    width: 100%;
    height: 80vh;
    overflow: hidden
}

.project-media-overflow img,
.project-media-overflow video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media(min-width:768px) {
    .project-text-block {
        gap: 3rem;
        text-align: center
    }

    .project-intro-description {
        max-width: 70%;
        margin: auto
    }

    .project-media-overflow {
        width: 100%;
        height: 100vh;
        overflow: hidden
    }
}

@media(min-width:1025px) {
    .project-text-block {
        padding: 15rem 0
    }

    .project-intro-title,
    .project-intro-description {
        max-width: 70%
    }

    .project-media {
        flex-direction: row;
        gap: 3rem
    }

    .project-media-overflow {
        width: 100%;
        height: 80vh;
        overflow: hidden
    }
}

.project-role-block {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 0 5vw
}

.project-role-text-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2.5rem;
    padding: 5rem 0
}

.project-role-title,
.project-role-text-block p {
    color: #2f303d
}

.project-role-media {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3vw
}

.project-role-media-overflow {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.project-role-media-overflow img,
.project-role-media-overflow video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.next-project-section {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    gap: 5vw;
    padding: 10vw 5vw 20vw
}

.next-project-info {
    width: 90%;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3vw;
    background-color: #2f303d;
    z-index: 2;
    transform: rotate(-2deg);
    padding: 10vw;
    margin: 0 auto
}

.next-project-info p {
    color: #f9dddf
}

.next-project-arrow {
    margin-right: 1rem
}

.next-project-link {
    color: #f9dddf;
    text-decoration: none
}

.next-project-button {
    text-decoration: none
}

.next-project-button img {
    margin-right: .5rem
}

@media(min-width:1025px) {
    .project-role-text-block {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        gap: 3vw;
        padding: 8vw 0 16vw
    }

    .next-project-info {
        max-width: 70%;
        height: 400px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 3vw;
        background-color: #2f303d;
        z-index: 2;
        transform: rotate(-3deg);
        padding: 10vw;
        margin: 0 auto
    }

    .next-project-arrow {
        display: none
    }

    .project-role-description {
        max-width: 50%
    }

    .project-role-media {
        gap: 5vw
    }

    .next-project-link {
        position: relative;
        color: #f9dddf;
        text-decoration: underline;
        display: flex;
        align-items: center;
        transition: transform .3s ease-in-out
    }

    .next-project-link:before {
        content: "→";
        position: absolute;
        left: -100px;
        color: #f9dddf;
        font-size: 6vw;
        opacity: 0;
        transition: opacity .3s ease-in-out
    }

    .next-project-link:hover {
        transform: translateX(100px)
    }

    .next-project-link:hover:before {
        opacity: 1
    }
}

.content {
    position: relative;
    background-color: #7000BF;
    gap: 2rem;
    width: 100%;
    height: 200vh;
    text-align: center
}

.content-title {
    background-color: #7000BF;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    padding: 0 5vw
}

.medium-body {
    color: #f9dddf
}

.loading-animation img {
    width: 50px;
    height: 50px
}

@media(min-width:1025px) {
    .loading-animation img {
        width: 100px;
        height: 100px
    }
}

.full-height-pink-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    width: 100%;
    background-color: #f9dddf;
    overflow: hidden;
    padding: 15rem 0
}

.full-height-pink-title,
.full-height-pink-introduction,
.full-height-pink-description {
    color: #bc2637
}

.marquee-title {
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    will-change: transform;
    width: 100%;
    margin: 0;
    padding-left: 1rem
}

.full-height-pink-text {
    display: flex;
    flex-direction: column;
    gap: 5vw;
    max-width: 70rem;
    padding: 0 5vw
}

.full-height-pink-introduction {
    font-weight: 700
}

.red-loading-animation img {
    width: 50px;
    height: 50px
}

@media(min-width:1025px) {
    .red-loading-animation img {
        width: 100px;
        height: 100px
    }
}

.text-editor-content {
    max-width: 70rem;
    color: #bc2637;
    padding: 5vw 5vw 20vw;
    margin: auto
}

.text-editor-content h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
li,
p {
    color: #bc2637;
    padding: 0
}

.text-editor-content .l-medium-heading,
.medium-body-lowercase {
    color: #bc2637;
    padding: 0
}

.text-editor-content .l-medium-heading {
    margin: 6vw 0 3vw
}

.text-editor-content a {
    color: #2f303d;
    text-decoration: underline
}

.work-block {
    width: 100%;
    background-color: #f9dddf;
    padding: 20rem 0
}

.my-work-title {
    width: 100%;
    text-align: left;
    padding: 0 5vw;
    color: #2f303d
}

.carousel-container {
    overflow: hidden;
    position: relative;
    width: 100vw
}

.carousel {
    display: flex;
    align-items: center;
    gap: 15vw;
    transition: transform .5s ease;
    width: 100vw;
    padding: 7rem 0
}

.work-item a {
    text-decoration: none
}

.work-item {
    width: 300px;
    transform: rotate(5deg);
    position: relative
}

.work-item:nth-child(even) {
    transform: rotate(-5deg);
    margin-top: 10vw
}

.work-thumbnail-mask {
    overflow: hidden;
    width: 300px;
    height: 400px;
    position: relative;
    outline: none
}

.work-thumbnail-mask:hover {
    background-color: #2f303d
}

.work-thumbnail-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .3s ease-in-out
}

.work-thumbnail-mask:hover img {
    opacity: .05
}

.work-thumbnail-mask:after {
    content: "Visit a Website";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.8);
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
    font-size: 5vw;
    line-height: 5vw;
    text-transform: uppercase;
    text-align: center;
    color: #f9dddf;
    opacity: 0;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    pointer-events: none
}

.work-thumbnail-mask:hover:after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3)
}

.work-title-dark {
    text-align: center;
    margin: 2.5rem 0 .5rem;
    color: #2f303d
}

.work-title a {
    text-align: center;
    text-decoration: none
}

.work-item a:focus-visible {
    outline: none
}

.work-item a:focus-visible h3 {
    color: #2f303d;
    padding: 1rem 0 .5rem;
    border: 2px dashed #2f303d
}

.work-tags {
    width: 100%;
    display: flex;
    justify-content: center
}

.tag-dark {
    font-size: .7rem;
    line-height: .9rem;
    position: relative;
    color: #2f303d
}

.tag-dark:after {
    content: ",";
    padding: 0 .5vw 0 .1vw
}

.tag-dark:last-child:after {
    content: ""
}

.tag-dark>span {
    color: #f9dddf
}

.carousel-button-dark {
    position: absolute;
    width: 60px;
    height: 60px;
    bottom: 0;
    right: 20px;
    background-color: #f9dddf;
    border: 2px solid #2f303d;
    border-radius: 50%;
    color: #2f303d;
    font-size: 1.5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .3s, transform .2s
}

.carousel-button-dark:active {
    background-color: #2f303d;
    color: #f9dddf;
    transform: scale(1.1)
}

.prev-button {
    left: 33vw
}

.next-button {
    right: 33vw
}

.primary-button {
    width: 100%;
    justify-content: center;
    margin: 16vw 0
}

@media(min-width:1025px) {
    .work-block {
        padding: 25rem 0
    }

    .my-work-title {
        text-align: center
    }

    .title-button-wrapper {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 0vw;
        padding: 5vw
    }

    .prev-button,
    .next-button {
        display: none
    }

    .carousel {
        width: 200vw
    }

    .work-item {
        width: 500px
    }

    .tag-dark {
        font-size: 1rem;
        line-height: 1.1rem
    }

    .work-thumbnail-mask {
        width: 500px;
        height: 700px
    }
}

.selected-work-block {
    width: 100%;
    min-height: 100%;
    background-color: #2f303d;
    padding: 8rem 0
}

.selected-work-title {
    width: 100%;
    text-align: center;
    padding: 0 5vw
}

.carousel-container {
    overflow: hidden;
    position: relative;
    width: 100vw
}

.carousel {
    display: flex;
    align-items: center;
    gap: 15vw;
    transition: transform .5s ease;
    width: 100vw;
    padding: 7rem 0
}

.work-item a {
    text-decoration: none
}

.work-item {
    width: 300px;
    transform: rotate(5deg);
    position: relative
}

.work-item:nth-child(even) {
    transform: rotate(-5deg);
    margin-top: 10vw
}

.work-thumbnail-mask {
    overflow: hidden;
    width: 300px;
    height: 400px;
    position: relative;
    outline: none
}

.work-thumbnail-mask:hover {
    background-color: #2f303d
}

.work-thumbnail-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .3s ease-in-out
}

.work-thumbnail-mask:hover img {
    opacity: .05
}

.work-thumbnail-mask:after {
    content: "Visit a Website";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.8);
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
    font-size: 3vw;
    line-height: 3vw;
    text-transform: uppercase;
    text-align: center;
    color: #f9dddf;
    opacity: 0;
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
    pointer-events: none
}

.work-thumbnail-mask:hover:after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.3)
}

.work-title {
    text-align: center;
    margin: 2.5rem 0 .5rem
}

.work-title a {
    text-decoration: none;
    color: #f9dddf
}

.work-item a:focus-visible {
    outline: none
}

.work-item a:focus-visible h3 {
    color: #2f303d;
    padding: 1rem 0 .5rem;
    border: 2px dashed #2f303d
}

.work-tags {
    width: 100%;
    display: flex;
    justify-content: center
}

.tag {
    font-size: .7rem;
    line-height: .9rem;
    position: relative
}

.tag:after {
    content: ",";
    padding: 0 .5vw 0 .1vw
}

.tag:last-child:after {
    content: ""
}

.tag>span {
    color: #f9dddf
}

.carousel-button {
    position: absolute;
    width: 60px;
    height: 60px;
    bottom: 0;
    right: 20px;
    background-color: #01FF9D;
    border: 2px solid #01FF9D;
    border-radius: 50%;
    color: black;
    font-size: 1.5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .3s, transform .2s
}

.carousel-button:active {
    background-color: #f9dddf;
    color: #7000BF;
    transform: scale(1.1)
}

.prev-button {
    left: 33vw
}

.next-button {
    right: 33vw
}

.button-block {
    display: flex;
    justify-content: center;
    margin: 16vw 0
}

.button-more-work {
    display: flex;
    justify-content: center;
    margin: auto;
    max-width: fit-content;
    background-color: white;
    color: black;
    padding: 1.2rem 1.3rem .8rem;
    border: 2px solid white;
    border-radius: 0;
    transition: background-color .3s;
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
    font-size: 1.5rem;
    line-height: 1.5rem;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transform: rotate(-3deg)
}

.primary-button:hover,
.primary-button:focus-visible {
    background-color: #01FF9D;
    color: #7000BF;
    border: 2px solid #01FF9D;
    outline: none;
    text-decoration: underline
}

@media(min-width:1025px) {
    .title-button-wrapper {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
        gap: 0vw;
        padding: 5vw
    }

    .prev-button,
    .next-button {
        display: none
    }

    .carousel {
        width: 200vw
    }

    .work-item {
        width: 500px
    }

    .work-thumbnail-mask {
        width: 500px;
        height: 700px
    }

    .tag {
        font-size: 1rem;
        line-height: 1.1rem;
        position: relative
    }

    .button-more-work {
        padding: 1.3rem 1.5rem .9rem;
        font-size: 1.5rem;
        line-height: 1.5rem
    }
}

.my-services-block {
    position: relative;
    width: 100%;
    background-color: #EEF1F4;
}

.wrapper-heading-services {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    gap: 2rem;
    padding: 4rem 5vw
}

.services-heading-title,
.services-heading-subtitle {
    color: black;
}

.services-list {
    position: relative;
    list-style-type: none;
    padding: 0;
    z-index: 1
}

.services-array {
    width: 100%;
    height: 350%;
    display: flex;
    flex-direction: column;
    gap: 15vw;
    padding: 0;
    margin-bottom: 20vw
}

.service-item {
    position: sticky;
    top: 25%;
    width: 90%;
    height: 300px;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 10vw 5vw;
    background-color: #2c2b2b;
    z-index: 2;
    margin: 0 auto;
    transform: rotate(-3deg)
}

.service-item:nth-child(2) {
    background-color: #F3FA32;
    color: white !important;
    top: 27%;
    transform: rotate(-4deg)
}

.service-item:nth-child(3) {
   background-color: #00FEA3;
    top: 29%;
    transform: rotate(-5deg)
}

.service-item:nth-child(4) {
    top: 31%;
    transform: rotate(-6deg);
    background-color: #7000BF;
}

.service-item-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.heading-title-item {
    color: black;
    font-size: 10vw;
    line-height: 9vw
}
.heading-title-item2 {
    color: white;
    font-size: 5vw;
    line-height: 9vw
}

.service-description {
    color: black;
    font-weight: 500
}

.service-media {
    position: absolute;
    top: 5vw;
    right: 5vw;
    z-index: 1
}

.service-media img {
    width: 50px;
    height: 50px;
    opacity: .2
}

.service-item:nth-child(2) .heading-title-item {
    color: black;
}

.service-item:nth-child(2) .service-description {
    color: black;
}

@media(min-width:1025px) {
    .wrapper-heading-services {
        width: 100%;
        height: 500px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 16vw 5vw
    }

    .services-heading-subtitle {
        width: 40%
    }

    .services-array {
        gap: 15vw
    }

    .service-item {
        height: 500px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10rem
    }

    .heading-title-item {
        color: black;
        font-size: 6vw;
        line-height: 6vw
    }

    .service-description {
        max-width: 70%
    }

    .service-media {
        position: absolute;
        top: 10rem;
        right: 5rem;
        z-index: 1
    }

    .service-media img {
        width: 180px;
        height: 180px
    }
}

.contact-block {
    width: 100%;
    padding: 20rem 5vw
}

.contact-text-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3vw;
    padding: 5rem 0
}

.contact-title,
.contact-description {
    width: 100%;
    color: #bc2637
}

.contact-form-block {
    width: 100%;
    padding: 5rem 0
}

.contact-form-block form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.5rem
}

.contact-form-block .form-flex {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.5rem
}

.contact-form-block .form-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.5rem
}

.contact-form-block label {
    width: 100%;
    color: #bc2637
}

.contact-form-block input,
.contact-form-block textarea {
    width: 100%;
    padding: 1.5rem;
    border: 1.5px solid #bc2637;
    border-radius: 0;
    color: #2f303d;
    font-family: forma-djr-micro, sans-serif;
    font-weight: 500;
    font-size: 1.3rem;
    line-height: 2.5vw;
    letter-spacing: -.5px;
    background-color: #f9dddf;
    margin-top: 1rem
}

.contact-form-block input:focus,
.contact-form-block textarea:focus {
    border-color: #68a7f4;
    outline: none
}

.contact-form-block .wpcf7-submit {
    max-width: fit-content;
    background-color: #68a7f4;
    color: #2f303d;
    padding: 1.2rem 2rem .7rem;
    border: none;
    border-radius: 0;
    transition: background-color .3s;
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
    font-size: 1.2rem;
    line-height: 1.2rem;
    text-transform: uppercase;
    cursor: pointer
}

.contact-form-block .wpcf7-submit:hover,
.contact-form-block .wpcf7-submit:focus-visible {
    background-color: #2f303d;
    color: #68a7f4;
    outline: none
}

@media(min-width:768px) {
    .contact-form-block form {
        width: 100%;
        display: flex;
        flex-direction: column
    }

    .contact-form-block .form-flex {
        width: 100%;
        display: flex;
        flex-direction: row
    }

    .contact-form-block .form-row {
        width: 50%;
        display: flex;
        flex-direction: column
    }
}

@media(min-width:1025px) {
    .contact-text-block {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center
    }

    .contact-title {
        width: 60%
    }

    .contact-description {
        width: 40%
    }

    .contact-form-block .wpcf7-submit {
        padding: 1.5rem 3rem 1rem;
        font-size: 1.5rem;
        line-height: 1.5rem
    }
}

.footer {
    width: 100%
}

.footer-cta {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 3rem;
    padding: 6rem 5vw;
    background-color: black;
}

.footer-cta-flex {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    color: #f9dddf
}

.footer-cta-flex p {
    color: #f9dddf
}

.separator-red {
    width: 100%;
    height: 20px;
    background: linear-gradient(to bottom right, #000000 50%, #7000BF 50%)
}

.footer-menu-social {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 4rem 5vw 2rem;
    background-color: #7000BF;
}

.footer-menu-social-flex {
    display: flex;
    flex-direction: column;
    gap: 2.5rem
}

.footer-menu h3,
.footer-social h3 {
   
    color: white;
    margin-bottom: 1rem
}

.footer-social ul,
.footer-menu ul {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem
}

.footer-social li,
.footer-item {
    list-style-type: none;
    color: white
}

.footer-social a,
.footer-item a {
    text-decoration: none
}

.footer-social a:hover,
.footer-social a:focus-visible {
    text-decoration: underline;
    color: #FFFF33;
    outline: none
}

.footer-item a:hover,
.footer-item a:focus-visible {
    text-decoration: underline;
    color: #FFFF33;
    outline: none
}

.footer-logo {
    width: 50% !important;
    height: 100% ;
    display: flex;
    justify-content: center;
}

.footer-logo img {
    width: 40% !important;
    height: 100%;
}

.footer-copyright {
    width: 100%;
    background-color: black;
    position: relative
}

.separator-blue {
    width: 100%;
    height: 20px;
    background: linear-gradient(to bottom right, #7000BF 50%, #000000 50%)
}

.copyright-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: left;
    flex-wrap: wrap;
    gap: .5vw;
    padding: 5vw;
    color: black;
    list-style-type: none
}

.copyright-list li {
    font-size: 1rem;
    line-height: 1.2rem;
    color: #f9dddf
}

.copyright-list a {
    text-decoration: none
}

.copyright-list a:hover {
    text-decoration: underline
}

.copyright-list a:focus-visible {
    text-decoration: underline;
    color: #f9dddf;
    outline: none;
    padding: 1rem 1rem .5rem;
    border: 2px dashed #f9dddf
}

@media(min-width:1025px) {
    .footer {
        background-color: #bc2637
    }

    .footer-heading {
        font-size: 2rem;
        line-height: 2.2rem
    }

    .footer-cta {
        padding: 8rem 5vw 4rem
    }

    .footer-cta-flex {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-bottom: 4rem
    }

    .footer-menu-social {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 5rem 5vw
    }

    .footer-menu-social-flex {
        display: flex;
        flex-direction: row;
        gap: 5rem
    }

    .footer-logo {
        width: 50%
    }

    .footer-logo img {
        width: 100%;
        height: 100%
    }

    .copyright-list {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: right;
        padding: 0 5vw
    }

    .separator-red,
    .separator-blue {
        height: 60px
    }

    .footer-contact-btn {
        position: relative;
        color: #F3FA32;
        text-decoration: underline;
        display: flex;
        align-items: center;
        transition: transform .3s ease-in-out
    }

    .footer-contact-btn:before {
        content: "→";
        position: absolute;
        left: -100px;
        color: #F3FA32;
        font-size: 6vw;
        opacity: 0;
        transition: opacity .3s ease-in-out
    }

    .footer-contact-btn:hover {
        transform: translateX(100px)
    }

    .footer-contact-btn:hover:before {
        opacity: 1
    }

    .footer-contact-btn:focus-visible {
        padding: 1rem 0 .5rem;
        border: 2px dashed #f9dddf;
        outline: none
    }

    .footer-copyright {
        padding: 1rem 0 2rem
    }

    .copyright-list li {
        font-size: 1.5rem;
        line-height: 1.5rem
    }
}

.page-404 {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: #2f303d;
    pointer-events: auto
}

.page-404-subtitle {
    width: 100%;
    color: #f9dddf;
    text-align: center
}

.page-404-title {
    width: 100%;
    max-width: 80rem;
    color: #f9dddf;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 25rem
}

.page-404-keywords {
    position: absolute;
    top: 10vw;
    width: 100%;
    height: 25rem
}

.keyword-item-404 {
    max-width: fit-content;
    padding: 1rem 1rem .7rem
}

.page-404-keyword-top {
    position: absolute;
    top: 60%;
    left: 15%;
    color: #f9dddf;
    background-color: #bc2637;
    transform: rotate(-3deg)
}

.page-404-keyword-bottom {
    position: absolute;
    bottom: 10%;
    right: 25%;
    color: #2f303d;
    background-color: #68a7f4;
    transform: rotate(3deg)
}

.page-404-image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    margin-top: -5vw
}

.page-404-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.page-404-button-block .button-more-work {
    display: flex;
    justify-content: center;
    margin: auto;
    max-width: fit-content;
    background-color: #2f303d;
    color: #f9dddf;
    padding: 1.2rem 2rem .7rem;
    border: 2px solid #f9dddf;
    border-radius: 0;
    transition: background-color .3s;
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
    font-size: 1.2rem;
    line-height: 1.2rem;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transform: rotate(0);
    pointer-events: auto
}

.page-404-button-block .button-more-work:hover,
.page-404-button-block .button-more-work:focus-visible {
    background-color: #f9dddf;
    color: #2f303d;
    border: 2px solid #f9dddf;
    outline: none;
    text-decoration: underline
}

@media(min-width:768px) {
    .page-404-image {
        top: 25%;
        right: 15%;
        width: 150px;
        height: 150px
    }
}

@media(min-width:1025px) {
    .page-404-title {
        font-size: 13vw;
        line-height: 13vw
    }

    .page-404-keywords {
        height: 30rem
    }

    .page-404-keyword-top {
        top: 50%;
        left: 25%
    }

    .page-404-image {
        top: 15%;
        right: 25%;
        width: 200px;
        height: 200px;
        margin-top: -8vw
    }

    .page-404-button-block .button-more-work {
        padding: 1.5rem 3rem 1rem;
        font-size: 1.5rem;
        line-height: 1.5rem
    }
}

*,
body {
    margin: 0
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.background--dark {
    background: #000
}

.color--dark {
    color: #000
}

.border--dark {
    border-color: #000
}

.background--light {
    background: #fff
}

.color--light {
    color: #fff
}

.border--light {
    border-color: #fff
}

.background--yellow {
    background: #fc0
}

.color--yellow {
    color: #fc0
}

.border--yellow {
    border-color: #fc0
}

.background--red {
    background: #bc2637
}

.color--red {
    color: #bc2637
}

.border--red {
    border-color: #bc2637
}

.background--pink {
    background: #f9dddf
}

.color--pink {
    color: #f9dddf
}

.border--pink {
    border-color: #f9dddf
}

.background--blue {
    background: #68a7f4
}

.color--blue {
    color: #68a7f4
}

.border--blue {
    border-color: #68a7f4
}

.background--darkblue {
    background: #2f303d
}

.color--darkblue {
    color: #2f303d
}

.border--darkblue {
    border-color: #2f303d
}

.row {
    display: flex;
    flex-wrap: wrap;
    width: 100%
}

.row.center {
    justify-content: center;
    margin-left: auto;
    margin-right: auto
}

@media only screen and (min-width:0px) {
    .column.small-0 {
        width: 0
    }
}

@media only screen and (min-width:0px) {
    .column.small-1 {
        width: 4.1666666667%
    }
}

@media only screen and (min-width:0px) {
    .column.small-2 {
        width: 8.3333333333%
    }
}

@media only screen and (min-width:0px) {
    .column.small-3 {
        width: 12.5%
    }
}

@media only screen and (min-width:0px) {
    .column.small-4 {
        width: 16.6666666667%
    }
}

@media only screen and (min-width:0px) {
    .column.small-5 {
        width: 20.8333333333%
    }
}

@media only screen and (min-width:0px) {
    .column.small-6 {
        width: 25%
    }
}

@media only screen and (min-width:0px) {
    .column.small-7 {
        width: 29.1666666667%
    }
}

@media only screen and (min-width:0px) {
    .column.small-8 {
        width: 33.3333333333%
    }
}

@media only screen and (min-width:0px) {
    .column.small-9 {
        width: 37.5%
    }
}

@media only screen and (min-width:0px) {
    .column.small-10 {
        width: 41.6666666667%
    }
}

@media only screen and (min-width:0px) {
    .column.small-11 {
        width: 45.8333333333%
    }
}

@media only screen and (min-width:0px) {
    .column.small-12 {
        width: 50%
    }
}

@media only screen and (min-width:0px) {
    .column.small-13 {
        width: 54.1666666667%
    }
}

@media only screen and (min-width:0px) {
    .column.small-14 {
        width: 58.3333333333%
    }
}

@media only screen and (min-width:0px) {
    .column.small-15 {
        width: 62.5%
    }
}

@media only screen and (min-width:0px) {
    .column.small-16 {
        width: 66.6666666667%
    }
}

@media only screen and (min-width:0px) {
    .column.small-17 {
        width: 70.8333333333%
    }
}

@media only screen and (min-width:0px) {
    .column.small-18 {
        width: 75%
    }
}

@media only screen and (min-width:0px) {
    .column.small-19 {
        width: 79.1666666667%
    }
}

@media only screen and (min-width:0px) {
    .column.small-20 {
        width: 83.3333333333%
    }
}

@media only screen and (min-width:0px) {
    .column.small-21 {
        width: 87.5%
    }
}

@media only screen and (min-width:0px) {
    .column.small-22 {
        width: 91.6666666667%
    }
}

@media only screen and (min-width:0px) {
    .column.small-23 {
        width: 95.8333333333%
    }
}

@media only screen and (min-width:0px) {
    .column.small-24 {
        width: 100%
    }
}

@media only screen and (min-width:0px) {
    .column.small-full {
        width: 100%
    }
}

@media only screen and (min-width:0px) {
    .column.small-half {
        width: 50%
    }
}

@media only screen and (min-width:0px) {
    .column.small-third {
        width: 33.3333333333%
    }
}

@media only screen and (min-width:0px) {
    .column.small-two-third {
        width: 66.6666666667%
    }
}

@media only screen and (min-width:0px) {
    .column.small-quarter {
        width: 25%
    }
}

@media only screen and (min-width:0px) {
    .column.small-three-quarter {
        width: 75%
    }
}

@media only screen and (min-width:0px) {
    .column.small-fifth {
        width: 20%
    }
}

@media only screen and (min-width:0px) {
    .column.small-two-fifth {
        width: 40%
    }
}

@media only screen and (min-width:0px) {
    .column.small-three-fifth {
        width: 60%
    }
}

@media only screen and (min-width:0px) {
    .column.small-four-fifth {
        width: 80%
    }
}

@media only screen and (min-width:0px) {
    .column.small-sixth {
        width: 16.6666666667%
    }
}

@media only screen and (min-width:0px) {
    .column.small-five-sixth {
        width: 83.3333333333%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-0 {
        width: 0
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-1 {
        width: 4.1666666667%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-2 {
        width: 8.3333333333%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-3 {
        width: 12.5%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-4 {
        width: 16.6666666667%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-5 {
        width: 20.8333333333%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-6 {
        width: 25%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-7 {
        width: 29.1666666667%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-8 {
        width: 33.3333333333%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-9 {
        width: 37.5%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-10 {
        width: 41.6666666667%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-11 {
        width: 45.8333333333%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-12 {
        width: 50%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-13 {
        width: 54.1666666667%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-14 {
        width: 58.3333333333%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-15 {
        width: 62.5%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-16 {
        width: 66.6666666667%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-17 {
        width: 70.8333333333%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-18 {
        width: 75%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-19 {
        width: 79.1666666667%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-20 {
        width: 83.3333333333%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-21 {
        width: 87.5%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-22 {
        width: 91.6666666667%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-23 {
        width: 95.8333333333%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-24 {
        width: 100%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-full {
        width: 100%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-half {
        width: 50%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-third {
        width: 33.3333333333%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-two-third {
        width: 66.6666666667%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-quarter {
        width: 25%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-three-quarter {
        width: 75%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-fifth {
        width: 20%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-two-fifth {
        width: 40%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-three-fifth {
        width: 60%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-four-fifth {
        width: 80%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-sixth {
        width: 16.6666666667%
    }
}

@media only screen and (min-width:750px)and (max-width:9999px) {
    .column.medium-five-sixth {
        width: 83.3333333333%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-0 {
        width: 0
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-1 {
        width: 4.1666666667%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-2 {
        width: 8.3333333333%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-3 {
        width: 12.5%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-4 {
        width: 16.6666666667%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-5 {
        width: 20.8333333333%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-6 {
        width: 25%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-7 {
        width: 29.1666666667%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-8 {
        width: 33.3333333333%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-9 {
        width: 37.5%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-10 {
        width: 41.6666666667%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-11 {
        width: 45.8333333333%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-12 {
        width: 50%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-13 {
        width: 54.1666666667%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-14 {
        width: 58.3333333333%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-15 {
        width: 62.5%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-16 {
        width: 66.6666666667%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-17 {
        width: 70.8333333333%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-18 {
        width: 75%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-19 {
        width: 79.1666666667%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-20 {
        width: 83.3333333333%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-21 {
        width: 87.5%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-22 {
        width: 91.6666666667%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-23 {
        width: 95.8333333333%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-24 {
        width: 100%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-full {
        width: 100%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-half {
        width: 50%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-third {
        width: 33.3333333333%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-two-third {
        width: 66.6666666667%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-quarter {
        width: 25%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-three-quarter {
        width: 75%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-fifth {
        width: 20%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-two-fifth {
        width: 40%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-three-fifth {
        width: 60%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-four-fifth {
        width: 80%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-sixth {
        width: 16.6666666667%
    }
}

@media only screen and (min-width:1024px)and (max-width:9999px) {
    .column.mediumlarge-five-sixth {
        width: 83.3333333333%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-0 {
        width: 0
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-1 {
        width: 4.1666666667%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-2 {
        width: 8.3333333333%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-3 {
        width: 12.5%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-4 {
        width: 16.6666666667%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-5 {
        width: 20.8333333333%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-6 {
        width: 25%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-7 {
        width: 29.1666666667%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-8 {
        width: 33.3333333333%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-9 {
        width: 37.5%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-10 {
        width: 41.6666666667%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-11 {
        width: 45.8333333333%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-12 {
        width: 50%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-13 {
        width: 54.1666666667%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-14 {
        width: 58.3333333333%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-15 {
        width: 62.5%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-16 {
        width: 66.6666666667%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-17 {
        width: 70.8333333333%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-18 {
        width: 75%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-19 {
        width: 79.1666666667%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-20 {
        width: 83.3333333333%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-21 {
        width: 87.5%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-22 {
        width: 91.6666666667%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-23 {
        width: 95.8333333333%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-24 {
        width: 100%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-full {
        width: 100%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-half {
        width: 50%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-third {
        width: 33.3333333333%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-two-third {
        width: 66.6666666667%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-quarter {
        width: 25%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-three-quarter {
        width: 75%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-fifth {
        width: 20%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-two-fifth {
        width: 40%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-three-fifth {
        width: 60%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-four-fifth {
        width: 80%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-sixth {
        width: 16.6666666667%
    }
}

@media only screen and (min-width:1280px)and (max-width:9999px) {
    .column.large-five-sixth {
        width: 83.3333333333%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-0 {
        width: 0
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-1 {
        width: 4.1666666667%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-2 {
        width: 8.3333333333%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-3 {
        width: 12.5%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-4 {
        width: 16.6666666667%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-5 {
        width: 20.8333333333%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-6 {
        width: 25%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-7 {
        width: 29.1666666667%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-8 {
        width: 33.3333333333%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-9 {
        width: 37.5%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-10 {
        width: 41.6666666667%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-11 {
        width: 45.8333333333%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-12 {
        width: 50%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-13 {
        width: 54.1666666667%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-14 {
        width: 58.3333333333%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-15 {
        width: 62.5%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-16 {
        width: 66.6666666667%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-17 {
        width: 70.8333333333%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-18 {
        width: 75%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-19 {
        width: 79.1666666667%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-20 {
        width: 83.3333333333%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-21 {
        width: 87.5%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-22 {
        width: 91.6666666667%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-23 {
        width: 95.8333333333%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-24 {
        width: 100%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-full {
        width: 100%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-half {
        width: 50%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-third {
        width: 33.3333333333%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-two-third {
        width: 66.6666666667%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-quarter {
        width: 25%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-three-quarter {
        width: 75%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-fifth {
        width: 20%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-two-fifth {
        width: 40%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-three-fifth {
        width: 60%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-four-fifth {
        width: 80%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-sixth {
        width: 16.6666666667%
    }
}

@media only screen and (min-width:1440px)and (max-width:9999px) {
    .column.xlarge-five-sixth {
        width: 83.3333333333%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-0 {
        width: 0
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-1 {
        width: 4.1666666667%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-2 {
        width: 8.3333333333%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-3 {
        width: 12.5%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-4 {
        width: 16.6666666667%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-5 {
        width: 20.8333333333%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-6 {
        width: 25%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-7 {
        width: 29.1666666667%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-8 {
        width: 33.3333333333%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-9 {
        width: 37.5%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-10 {
        width: 41.6666666667%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-11 {
        width: 45.8333333333%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-12 {
        width: 50%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-13 {
        width: 54.1666666667%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-14 {
        width: 58.3333333333%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-15 {
        width: 62.5%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-16 {
        width: 66.6666666667%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-17 {
        width: 70.8333333333%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-18 {
        width: 75%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-19 {
        width: 79.1666666667%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-20 {
        width: 83.3333333333%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-21 {
        width: 87.5%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-22 {
        width: 91.6666666667%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-23 {
        width: 95.8333333333%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-24 {
        width: 100%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-full {
        width: 100%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-half {
        width: 50%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-third {
        width: 33.3333333333%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-two-third {
        width: 66.6666666667%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-quarter {
        width: 25%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-three-quarter {
        width: 75%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-fifth {
        width: 20%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-two-fifth {
        width: 40%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-three-fifth {
        width: 60%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-four-fifth {
        width: 80%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-sixth {
        width: 16.6666666667%
    }
}

@media only screen and (min-width:1920px)and (max-width:9999px) {
    .column.xxlarge-five-sixth {
        width: 83.3333333333%
    }
}

[data-lazy-load] {
    opacity: 0;
    transition: opacity .4s ease-out
}

[data-lazy-load].is-loaded {
    opacity: 1
}

html.lenis,
html.lenis body {
    height: auto
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain
}

.lenis.lenis-stopped {
    overflow: hidden
}

.lenis.lenis-smooth iframe {
    pointer-events: none
}

*,
*:before,
*:after {
    box-sizing: border-box
}

body {
    background-color: #f9dddf;
    width: 100%
}

.circle,
.cursor-text {
    display: none
}

@media(min-width:1200px) {
    .circle {
        width: 20px;
        height: 20px;
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 9999;
        border-radius: 50%;
        border: solid 2px #7000BF;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color .3s ease
    }

    .cursor-text {
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(.15);
        pointer-events: none;
        white-space: nowrap;
        color: #2f303d;
        border-radius: 50%;
        opacity: 0;
        transition: opacity .3s ease, transform .3s ease;
        max-width: 5rem;
        font-family: forma-djr-micro, sans-serif;
        font-weight: 500;
        font-size: 1.5rem;
        line-height: 1.5rem;
        text-align: center;
        text-transform: inherit
    }
}

.menu-text {
    font-size: 1rem;
    line-height: 1.4rem
}

@media(min-width:1025px) {
    .menu-text {
        font-size: 1.3rem;
        line-height: 1.7rem
    }
}

@keyframes jump {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-5px)
    }
}

.scroll-down-button {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: .5rem
}

.scroll-down-button img {
    transform-origin: 30% 30%;
    animation: jump 1s linear alternate infinite
}

.scroll-text {
    text-transform: lowercase;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4rem
}

@media(min-width:1025px) {
    .scroll-text {
        font-size: 1.3rem;
        line-height: 1.7rem
    }
}

.transition-overlay {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 10vw;
    height: 10vw;
    border-radius: 50%;
    background-color: #7000BF;
    z-index: 9999;
    transform: translate(-50%, -50%) scale(.1);
    transform-origin: center;
    visibility: hidden;
    opacity: 0;
    pointer-events: none
}
.iconseq {
    display: flex  !important; /* Icons ek line mein lane ke liye */
    flex-direction: row  !important; /* Ensure horizontal layout */
    gap: 15px; /* Icons ke darmiyan space */
  
    padding: 10px;
    list-style: none; /* Default list styles remove */
    align-items: center; /* Icons center mein align karne ke liye */
    justify-content: center; /* Icons center mein lane ke liye */
}

.iconseq span {
    display: flex !important; /* Ensure inline positioning */
   
   padding-left: 5px;
   padding-right: 5px;
}

.iconseq a {
    font-size: 30px; /* Adjust icon size */
    color: #fff; /* Icon color */
    text-decoration: none;
}

.iconseq a:hover {
    color: #ffcc00; /* Hover effect */
}
@media (max-width: 768px){
    .iconseq {
        display: flex  !important; /* Icons ek line mein lane ke liye */
        flex-direction: row  !important; /* Ensure horizontal layout */
        gap: 15px; /* Icons ke darmiyan space */
      
        padding: 10px;
        list-style: none; /* Default list styles remove */
        align-items: center; /* Icons center mein align karne ke liye */
        justify-content: start; /* Icons center mein lane ke liye */
       
    }
    
.iconseq a {
    font-size: 25px !important; /* Adjust icon size */
    color: #fff; /* Icon color */
    text-decoration: none;
}
}
@media (max-width: 1024px){
    .iconseq {
        display: flex  !important; /* Icons ek line mein lane ke liye */
        flex-direction: row  !important; /* Ensure horizontal layout */
        gap: 15px; /* Icons ke darmiyan space */
      
        padding: 10px;
        list-style: none; /* Default list styles remove */
        align-items: center; /* Icons center mein align karne ke liye */
        justify-content: start; /* Icons center mein lane ke liye */
       
    }
    

}
.blog-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding-left: 60px;
    padding-right: 60px;
}



@media (max-width: 1024px) {
    .blog-section {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Small devices (Phones, 480px and up) */
@media (max-width: 768px) {
    .blog-section {
        grid-template-columns: repeat(1, 1fr); /* 1 column on mobile */
        padding-left: 20px;
        padding-right: 20px;
    }
}


.blog-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s linear;
    transform-style: preserve-3d;
    filter: brightness(80%);
}
.blog-card:hover {
    transform: perspective(1000px) rotateX(10deg) rotateY(10deg);
    filter: brightness(100%);
}
.blog-card img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    transition: opacity 0.5s ease-in-out;
}
.blog-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #7000bf; /* Purple overlay */
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    text-align: start;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.blog-card:hover img {
    opacity: 0;
}
.blog-card:hover .blog-content {
    opacity: 1;
}
.blog-content h3 {
    font-size: 32px; /* Increase heading size */
    font-weight: bold;
    color: white; /* Ensure heading is white */
    margin-bottom: 10px;
}
.blog-content p {
    font-size: 15px;
    font-weight: 500;
    color: white; 
}
.rounded-Arrow{
    overflow: hidden;
    top: -35px;
    right: -35px;
    position: absolute;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    border: 2px solid white;
    justify-content: center;
    border-radius: 100%;
}
.Arrow {
    font-size: 30px;
    transform: scale(1); 
    transition: transform 0.3s ease-in-out; 
}
.Arrow:hover {
    transform: scale(1.2);
}
.rounded-Arrow {
    transition: background 0.3s ease-in-out, color 0.3s ease-in-out, border 0.3s ease-in-out;
}
.rounded-Arrow:hover {
    background: white;
    color: rgba(128, 0, 128, 0.9);
    border: 2px solid black;
    cursor: pointer;
}
.rounded-Arrow:hover .Arrow {
    transform: scale(1.3);
}
.rounded-Arrow .Arrow {
    transition: transform 0.3s ease-in-out; 
}
.myBlogs{
    padding-left: 60px;
    font-size: 50px;
    padding-bottom: 30px;
    color: white;
    font-weight: bold;
    
}


.accordion {
    width: 100%;
    max-width: 90%;
    margin: auto;
    
    /* border: 1px solid red; */
}
.accordion-item {
    /* border-bottom: 1px solid #ccc; */
    /* border: 1px solid red; */
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    flex-direction: column;
    width: 100% !important;
}
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #7000BF;
    color: white;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease;
    border-radius: 10px;
    font-weight: bold;
    font-size: 17px;
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 50px;
    background: #fff;
    border-radius: 0 0 10px 10px;
    width: 100%;
    position: relative;
    top: -5px;
    opacity: 0;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
    line-height: 1.5rem;
    font-size: 16px;
}
.accordion-item.active .accordion-content {
    opacity: 1;
    padding: 20px;
    padding-top: 20px;
    padding-bottom: 30px;
}
.arrow {
    transition: transform 0.3s ease;
}
.accordion-item.active .arrow {
    transform: rotate(90deg);
}
.hereFaq{
    width: 100%;
    margin-top: 80px;
    /* border: 1px solid red; */
}
.sectionFaq{
    /* display: flex; */
    font-size: 50px;
    padding: 30px 60px;
    /* justify-items: center; */
    /* border: 1px solid red; */
    color: white;
    text-align: center;
    

}
.sectionFaq h2{
    color: white!important;
    font-family: obviously-variable, sans-serif !important;
    font-variation-settings: "wght" 700,  "ital" 0;
    font-weight: bolder;
    text-align: center;
    
}

@media (max-width: 768px){
    .sectionFaq{
        /* display: flex; */
        font-size: 50px;
        padding: 30px 19.5px !important;
        /* justify-items: center; */
        /* border: 1px solid red; */
        color: white;
        text-align: start;
        
    
    }
    .sectionFaq h1{
        font-size: 32px !important;
        font-family: forma-djr-micro, sans-serif;
        font-weight: bolder;
    
        
    
    }
    .accordion-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background: #7000BF;
        color: white;
        cursor: pointer;
        transition: background 0.3s ease, color 0.3s ease;
        border-radius: 10px;
        font-weight: bold;
        font-size: 14px !important;
        line-height: 1.2rem;
        gap: 20px !important;
    }
    .accordion-content {
        max-height: 0;
        overflow: hidden;
        padding: 0 50px;
        border-radius: 0 0 10px 10px;
        width: 100%;
        position: relative;
        top: -5px;
        opacity: 0;
        transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
        line-height: 1.2rem !important;
        font-size: 14px !important;
    }
}
@media (max-width: 1024px){
    .sectionFaq{
        /* display: flex; */
        font-size: 50px;
        padding: 30px 48.1.5px;
        /* justify-items: center; */
        /* border: 1px solid red; */
        color: white;
        text-align: start;
        
    
    }
    .sectionFaq h1{
        font-size: 32px;
        font-family: forma-djr-micro, sans-serif;
        font-weight: bolder;
    
        
    
    }
    .accordion-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background: #7000BF;
        color: white;
        cursor: pointer;
        transition: background 0.3s ease, color 0.3s ease;
        border-radius: 10px;
        font-weight: bold;
        font-size: 16px;
        line-height: 1.2rem;
        gap: 20px !important;
    }
    .accordion-content {
        max-height: 0;
        overflow: hidden;
        padding: 0 50px;
        border-radius: 0 0 10px 10px;
        width: 100%;
        position: relative;
        top: -5px;
        opacity: 0;
        transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
        line-height: 1.5rem;
        font-size: 18px;
        font-family: forma-djr-micro, sans-serif;

    }
}
@media (min-width: 1536px) {
    .accordion {
        width: 100%;
        max-width: 90%;
        margin: auto;
        /* border: 1px solid red; */
    }
    .accordion-item {
        /* border-bottom: 1px solid #ccc; */
        /* border: 1px solid red; */
        padding-top: 10px;
        padding-bottom: 10px;
        display: flex;
        flex-direction: column;
        width: 100% !important;
    }
    .accordion-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        background: #7000BF;
        color: white;
        cursor: pointer;
        transition: background 0.3s ease, color 0.3s ease;
        border-radius: 10px;
        font-weight: bold;
        font-size: 20px;
    }
    .accordion-header:hover {
        background: white;
        color: #7000BF;
        font-weight: bold;
    }
    .accordion-content {
        max-height: 0;
        overflow: hidden;
        padding: 0 50px;
        background: #fff;
        border-radius: 0 0 10px 10px;
        width: 100%;
        position: relative;
        top: -5px;
        opacity: 0;
        transition: max-height 0.4s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out;
        line-height: 1.6rem;
        font-size: 18px;
    }
    .accordion-item.active .accordion-content {
        opacity: 1;
        padding: 20px;
        padding-top: 20px;
        padding-bottom: 30px;
    }
    .arrow {
        transition: transform 0.3s ease;
    }
    .accordion-item.active .arrow {
        transform: rotate(90deg);
    }
    .hereFaq{
        width: 100%;
        /* border: 1px solid red; */
    }
    .sectionFaq{
        /* display: flex; */
        font-size: 50px;
        padding: 30px 60px;
        /* justify-items: center; */
        /* border: 1px solid red; */
        color: white;
        text-align: center;
        
    
    }
    .sectionFaq h1{
        /* border: 1px solid red; */
        font-family: forma-djr-micro, sans-serif;
        font-weight: bolder;
        font-size: 64px;
    
        
    
    }
}