.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
}

.addno{
    mix-blend-mode: difference;
}

.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: #2f303d;
    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;
    text-align: center;
}

.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: #f9dddf;
    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
}

.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: #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: #FFFF33 !important;
    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(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: #F3FA32;
    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: #bc2637;
    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: #68a7f4;
    padding: 1rem 0 .7rem;
    z-index: 1;
    transform: rotate(-3deg)
}

.sub-heading span {
    display: inline-block;
    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: white;
    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: black;
    background-color: #FFFF33;
    transform: rotate(-3deg)
}

.keyword-bottom {
    position: absolute;
    bottom: 25%;
    right: 35%;
    color: white;
    background-color: #7000BF;
    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: 24%;
        right: 11%;

    }

    .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: #2f303d;
    gap: 2rem;
    width: 100%;
    height: 200vh;
    text-align: center
}

.content-title {
    background-color: #2f303d;
    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: black;
    overflow: hidden;
    padding: 5rem 0
}

.full-height-pink-title,
.full-height-pink-introduction,
.full-height-pink-description {
    color: #01FF9D;
}

.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: white;
    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
}

.addjourneycontent{
    width: 100%;
    min-height: 100vh;
   
    background-color: #7000BF;
    display: flex;
    gap: 15px;
    color: white !important;
     
    flex-direction: column;
    padding: 200px 100px;
    clip-path: polygon(0 0, 100% 23%, 100% 100%, 0 83%);

}
.addjourneycontent h2{

    color: white !important;
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
     font-size: 7vw;
   
    font-weight: bolder;

}
.addjourneycontent p{

    color: white !important;
    font-size: 2.3vw;
    padding-right: 6%;
    padding-left: 12px;

}


.addjourneycontent {
    width: 100%;
    min-height: 100vh;
    background-color: #7000BF;
    display: flex;
    gap: 15px;
    color: white !important;
    flex-direction: column;
    padding: 200px 100px;
    clip-path: polygon(0 0, 100% 23%, 100% 100%, 0 83%);
}

/* Heading styles */
.addjourneycontent h2 {
    color: white !important;
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
    font-size: 7vw;
    font-weight: bolder;
}

/* Paragraph styles */
.addjourneycontent p {
    color: white !important;
    font-size: 2.3vw;
    padding-right: 6%;
    padding-left: 12px;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    .addjourneycontent {
        padding: 160px 20px; /* Reduce padding for smaller screens */
        gap: 10px; /* Reduce gap between elements */
    }
    
    .addjourneycontent h2 {
        font-size: 9vw; /* Increase font size slightly for visibility */
    }
    
    .addjourneycontent p {
        font-size: 4vw; /* Adjust paragraph font size */
        padding-right: 4%;
        padding-left: 0%; /* Equal padding on both sides for smaller screens */
        
    }
}



.expertisesection{
    width: 100%;
    min-height: 100vh;
    flex-direction: column;
    padding: 150px   50px;
    justify-content: center;

   
    
    align-items: center;
}
.expertisesection h2{
   color: white;
   font-family: obviously-variable, sans-serif;
   font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
   font-size: 6.5vw;
   text-align: center;
   letter-spacing: 3px;
   font-weight: bold;
   text-transform: uppercase;

}

.expertisecontainer{
    width: 100%;
    min-height: 50vh;
    display: flex;
    justify-content: center ;
    align-items: center;
    gap: 4px !important;
}

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

    width: 50%;
    height: 40vh;
    display:flex ;
justify-content: center;
    flex-direction: column;
    /* align-items: center; */
    padding: 0 5px !important;
  


}
.headtext{
    font-size: 2.2vw !important;
    text-align: start !important; 
    font-weight: normal !important;
    /* font-family: sans-serif !important; */
    font-family: forma-djr-micro, sans-serif !important;
    text-transform: capitalize !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

.spacingtext{
    width: 100%;
    height: 10vh;
    display: flex;
    justify-content: start;
 
    font-family: forma-djr-micro, sans-serif;
    align-items: center;
    font-size: 1.2vw;
}
.addtexting{
    color: white;
    font-size: 1.2vw !important;
    font-family: forma-djr-micro, sans-serif;
}
.textspace{
    width: 100%;
    height: 10vh;
    
}




@media screen and (max-width: 1024px) {
    .expertisesection {
        padding: 100px 15px;
    }

    .expertisesection h2 {
        font-size: 8vw !important; /* Slightly smaller on tablets */
        letter-spacing: 2px;
        
    }

    .expertisecontainer {
        flex-direction: column; /* Stack items vertically */
        gap: 20px; /* Add more spacing for better visibility */
    }
}

@media screen and (max-width: 768px) {
    .expertisesection {
        padding: 80px 20px;
         display: flex;
         flex-direction: column;
         gap: 40px;
    }

    .addcentertext{
        padding: 0;
        width: 100%;
    }

    .expertisesection h2 {
        font-size: 6vw !important; /* Adjust font size for smaller screens */
        letter-spacing: 1px;
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 20px;
    }

    .expertisesection p {
        font-size: 4vw !important; /* Further reduce font size for mobile */
    }

    .expertisecontainer {
        gap: 12px; /* Increase gap for smaller screens */
    }
}

@media  (max-width: 480px) {
    .expertisesection {
        padding: 50px 0px;
    }

    .expertisesection h2 {
        font-size: 7vw !important; /* Further reduce font size for mobile */
        letter-spacing: 0.5px;
        text-align: center !important;
        padding: 0;
    }
   
    .addcentertext{
        
        width: 100%;
       
        padding: 8px !important;
        font-size: 4vw !important;
        text-align: center;
        height: 24vh;
    }
   

    .expertisecontainer {
        gap: 20px; /* Ensure enough spacing for mobile */
    }

    .addjourneycontent {
        padding: 150px 20px; 

        min-height: 50vh;
    }

    .footer-logo{
        display: flex;
        justify-content: start  !important;
    }
    
    .toolsiuse {
        height: 45vh !important;
    }
   
    
   
}





.toolsiuse{
    width: 100%;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 25px;
    align-items: center;
    gap: 100px ;
    
}

.toolsiuse h2{
    color: white !important;
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
     font-size: 7vw;
   
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 3px;


}

.tooluse {
    width: 100%;
    height: 40vh;
    overflow: hidden; /* Hide content outside the container */
    position: relative;
 
}

.marquee {
    width: 200%; /* Ensure extra width for smooth looping */
    display: flex;
    align-items: center;
    position: relative;
    animation: scroll 20s linear infinite; /* Continuous scrolling animation */
}

.marquee-content {
    display: flex;
    gap: 40px;
    justify-content: center;
    align-items: center;
    padding: 20px;


}

.addsamesize{
    width: 100px ;
    height: 100px;
}

.marquee-content img {
    height: 100px; /* Make images fit the container height */
    width: 100px; /* Maintain aspect ratio */
    object-fit: cover; /* Ensure the image covers the space */
    border-radius: 0;
    aspect-ratio: 1 / 1;
}


.sectioncntentend{
    width: 100%;
    min-height: 100vh;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    clip-path: polygon(0 21%, 100% 0, 100% 81%, 0 100%);
    align-items: end;
    padding: 100px;

}


.sectioncntentend h2{
    font-family: obviously-variable, sans-serif;
    font-variation-settings: "wght" 700, "wdth" 80, "ital" 0;
    color: black !important;
    font-size: 7vw !important;
    letter-spacing: 3px;
}
.sectioncntentend p{
    text-align: end;
    color: black !important;
    font-size: 2vw !important;
    padding-left: 160px !important;
    margin-top: 12px;
}


 @media screen and (max-width: 1024px) {
   

    .sectioncntentend h2 {
        font-size: 8vw;
        letter-spacing: 2px; 
        text-align: right; 
    }

    .sectioncntentend p {
        font-size: 2vw;
        text-align: right; 
        padding-right: 0 !important; 
      
    }
} 

/* Tablets and Large Mobiles */
@media screen and (max-width: 768px) {
    .sectioncntentend {
        padding: 40px  !important; 
    }

    .sectioncntentend h2 {
        font-size: 5vw; 
        
        letter-spacing: 1.5px; 
        padding-left: 0 !important; 
    }

    .sectioncntentend p {
        font-size: 4vw; 
        text-align: right;
        padding-left: 0 !important; 
       
    }
}

@media screen and (max-width: 480px) {
    .sectioncntentend {
        padding: 20px !important; 

       min-height: 50vh;
    }

    .sectioncntentend h2 {
        font-size: 7vw !important; 
        
     
        padding-left: 0 !important; 
    }

    .sectioncntentend p {
        font-size: 4vw  !important; 
        text-align: right;
        padding-left: 0 !important; 
       
    }
}





/* Keyframes for seamless scrolling */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Move left by half the width */
    }
}




.slider {
    width: 100%;
    overflow: hidden;

   

}

.slider h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #FFFF33;
}

.slider-container {
    display: flex;
    gap: 20px;
    animation: scroll 20s linear infinite;
    gap: 40px ;
    margin-bottom: 20px;

    border: 1px solid white;
}


.slider-container img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%;
    
    /* mix-blend-mode: multiply; */
}
.slider-container2 img {
    width: 300px;
    height: 300px;
    object-fit: cover;
    /* mix-blend-mode: multiply; */
}
.slider-container3 img {
    width: 300px;
    height: 300px;
    object-fit: cover;
 
    /* mix-blend-mode: multiply; */
}


@keyframes scroll {
    0% {
        transform: translateX(0);
    }

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

.centertext{
    width: 100%;
    height:  0vh;

    
}
.addcentertext p{
    font-size: 1.2vw;
}

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

.sectioncntentend{
    padding: 100px;

}




.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: "View Project";
    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: "View Project";
    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: #bc2637;
    border: 2px solid #f9dddf;
    border-radius: 50%;
    color: #f9dddf;
    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: #bc2637;
    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: #f9dddf;
    color: #bc2637;
    padding: 1.2rem 1.3rem .8rem;
    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.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: #bc2637;
    color: #f9dddf;
    border: 2px solid #f9dddf;
    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: #f9dddf
}

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

.services-heading-title,
.services-heading-subtitle {
    color: #bc2637
}

.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: #2f303d;
    z-index: 2;
    margin: 0 auto;
    transform: rotate(-3deg)
}

.service-item:nth-child(2) {
    background-color: #68a7f4;
    top: 27%;
    transform: rotate(-4deg)
}

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

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

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

.heading-title-item {
    color: #f9dddf;
    font-size: 10vw;
    line-height: 9vw
}

.service-description {
    color: #f9dddf;
    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: #2f303d
}

.service-item:nth-child(2) .service-description {
    color: #2f303d
}

@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: #f9dddf;
        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, black 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 !important;
}

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

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

.footer-item a:hover,
.footer-item a:focus-visible {
    text-decoration: underline;
    color: #F3FA32;
    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%, black 50%)
}

.copyright-list {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: left;
    flex-wrap: wrap;
    gap: .5vw;
    padding: 5vw;
    color: #bc2637;
    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: #f9dddf;
        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
    }
}
@media(min-width:1920px) {
    .menu-text {
        font-size: 2vw;
        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 */
}
@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 */
       
    }
    

}
.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 */
}