@charset "UTF-8";

/* ===================================
    studio-hero
===================================== */
section.studio-hero {
    margin: 10rem 0 10rem 0;
}
    @media (max-width: 575px) {
        section.studio-hero {
            margin: 3.5rem 0 3.5rem 0;
        }
    }
    @media (min-width: 576px) {
        section.studio-hero {
            margin: 4rem 0 4rem 0;
        }
    }
    @media (min-width: 768px) {
        section.studio-hero {
            margin: 7.25rem 0 7.25rem 0;
        }
    }
    @media (min-width: 992px) {
        section.studio-hero {
            margin: 8.5rem 0 8.5rem 0;
        }
    }
    @media (min-width: 1200px) {
        section.studio-hero {
            margin: 10rem 0 10rem 0;
        }
    }
section.studio-hero .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    margin: 50px 0;
    text-align: start;
    gap: 20px;
}
    @media (max-width: 575px) {
        section.studio-hero .content {
            gap: 10px;
        }
    }
    @media (min-width: 576px) {
        section.studio-hero .content {
            gap: 12px;
        }
    }
    @media (min-width: 768px) {
        section.studio-hero .content {
            gap: 15px;
        }
    }
    @media (min-width: 1200px) {
        section.studio-hero .content {
            gap: 20px;
        }
    }
section.studio-hero .content .title h1 {
    font-family: 'Gilmer-Bold';
}
[data-bs-theme="dark"] section.studio-hero .content .title h1 {
    color: var(--glam-light);
}
[data-bs-theme="light"] section.studio-hero .content .title h1 {
    color: var(--glam-black);
}

[data-bs-theme="dark"] section.studio-hero .content .description p {
    color: var(--glam-light);
}
[data-bs-theme="light"] section.studio-hero .content .description p {
    color: var(--glam-black);
}


/* ===================================
    studio-images-gallery
===================================== */
section.studio-images-gallery {
    margin: 0 0 7.5rem 0;
}
    @media (max-width: 575px) {
        section.studio-images-gallery {
            margin: 0 0 4.75rem 0;
        }
    }
    @media (min-width: 576px) {
        section.studio-images-gallery {
            margin: 0 0 6.25rem 0;
        }
    }
    @media (min-width: 1200px) {
        section.studio-images-gallery {
            margin: 0 0 7.5rem 0;
        }
    }
section.studio-images-gallery .image {
    margin-bottom: 2rem;
}
section.studio-images-gallery .image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: .875rem;
}


/* ===================================
    studio-who-we-are
===================================== */
section.studio-who-we-are {
    margin: 0 0 10rem 0;
}
    @media (max-width: 575px) {
        section.studio-who-we-are {
            margin: 0 0 4.75rem 0;
        }
    }
    @media (min-width: 576px) {
        section.studio-who-we-are {
            margin: 0 0 6.25rem 0;
        }
    }
    @media (min-width: 1200px) {
        section.studio-who-we-are {
            margin: 0 0 10rem 0;
        }
    }

section.studio-who-we-are .title {
    margin-bottom: 2rem;
}
section.studio-who-we-are .title h2 {
    font-family: 'Gilmer-Medium';
}
[data-bs-theme="dark"] section.studio-who-we-are .title h2 {
    color: var(--glam-light);
}
[data-bs-theme="light"] section.studio-who-we-are .title h2 {
    color: var(--glam-black);
}

[data-bs-theme="dark"] section.studio-who-we-are .text p {
    color: var(--glam-light);
}
[data-bs-theme="light"] section.studio-who-we-are .text p {
    color: var(--glam-black);
}


/* ===================================
    studio-scrolling-text
===================================== */
section.studio-scrolling-text {
    margin: 0 0 10rem 0;
}
section.studio-scrolling-text .scrolling-animation-wrapper {
    position: relative;
    display:flex;
    align-items:center;
    overflow-x: hidden;
}
section.studio-scrolling-text .scrolling-animation-wrapper .scrolling-items {
    position: relative;
    white-space: nowrap;
    padding: 0;
    margin: 0;
    will-change: transform;
}
section.studio-scrolling-text .scrolling-animation-wrapper .scrolling-items span.js-item {
    padding: 0;
    display: inline-block;
    font-family: "Gilmer-Bold";
    font-size: 10rem;
    font-weight: 700;
}
    @media (max-width: 575px) {
        section.studio-scrolling-text .scrolling-animation-wrapper .scrolling-items span.js-item {
            font-size: 4rem;
        }
    }
    @media (min-width: 576px) {
        section.studio-scrolling-text .scrolling-animation-wrapper .scrolling-items span.js-item {
            font-size: 5rem;
        }
    }
    @media (min-width: 768px) {
        section.studio-scrolling-text .scrolling-animation-wrapper .scrolling-items span.js-item {
            font-size: 7.5rem;
        }
    }
    @media (min-width: 1200px) {
        section.studio-scrolling-text .scrolling-animation-wrapper .scrolling-items span.js-item {
            font-size: 10rem;
        }
    }
[data-bs-theme="dark"] section.studio-scrolling-text .scrolling-animation-wrapper .scrolling-items span.js-item {
    color: var(--glam-lime-light);
}
[data-bs-theme="light"] section.studio-scrolling-text .scrolling-animation-wrapper .scrolling-items span.js-item {
    color: var(--glam-gray-3);
}
section.studio-scrolling-text .scrolling-animation-wrapper .scrolling-items span.js-item:after {
    position: relative;
    top:0;
    left:0;
    font-family: 'Font Awesome 6 Pro';
    content:'\f061';
    font-weight: 400;
    margin: 0 7rem;
}
    @media (max-width: 575px) {
        section.studio-scrolling-text .scrolling-animation-wrapper .scrolling-items span.js-item:after {
            margin: 0 3.25rem;
        }
    }
    @media (min-width: 576px) {
        section.studio-scrolling-text .scrolling-animation-wrapper .scrolling-items span.js-item:after {
            margin: 0 4.25rem;
        }
    }
    @media (min-width: 768px) {
        section.studio-scrolling-text .scrolling-animation-wrapper .scrolling-items span.js-item:after {
            margin: 0 5rem;
        }
    }
    @media (min-width: 1200px) {
        section.studio-scrolling-text .scrolling-animation-wrapper .scrolling-items span.js-item:after {
            margin: 0 7rem;
        }
    }


/* ===================================
    studio-big-media
===================================== */
section.studio-big-media {
    position: relative;
    overflow: hidden;
    z-index: 2; /* zindex */
}
section.studio-big-media .image img {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: .875rem;
}
section.studio-big-media .image video {
    width: 100%;
    transition: transform .5s ease;
    border-radius: .875rem;
}


/* ===================================
    studio-stats
===================================== */
section.studio-stats {
    position: relative;
    padding: 22rem 0 10rem 0;
    margin-top: -15rem;
    text-align: center;
    z-index: 1; /* zindex */
}
[data-bs-theme="dark"] section.studio-stats {
    background-color: var(--glam-lime-light);
    transition: background-color .5s ease, color .5s ease;
}
[data-bs-theme="light"] section.studio-stats {
    background-color: var(--glam-black);
    transition: background-color .5s ease, color .5s ease;
}
    @media (max-width: 575px) {
        section.studio-stats {
            margin-top: -7.5rem;
            padding: 12rem 0 10rem 0;
        }
    }
    @media (min-width: 576px) {
        section.studio-stats {
            margin-top: -12rem;
            padding: 18rem 0 10rem 0;
        }
    }
    @media (min-width: 768px) {
        section.studio-stats {
            margin-top: -15rem;
            padding: 22rem 0 10rem 0;
        }
    }
section.studio-stats .stats-item {
    display: flex;
    flex-direction: column;
    gap: .4375rem;
}
section.studio-stats .stats-item .title h1 {
    font-family: 'Gilmer-Bold';
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 0;
}
[data-bs-theme="dark"] section.studio-stats .stats-item .title h1 {
    color: var(--glam-black);
}
[data-bs-theme="light"] section.studio-stats .stats-item .title h1 {
    color: var(--glam-light);
}
section.studio-stats .stats-item .content p {
    font-size: 24px;
}
[data-bs-theme="dark"] section.studio-stats .stats-item .content p {
    color: var(--glam-black);
}
[data-bs-theme="light"] section.studio-stats .stats-item .content p {
    color: var(--glam-light);
}


/* ===================================
    studio-clients
===================================== */
section.studio-clients {
    margin: 10rem 0 5rem 0;
}
    @media (max-width: 575px) {
        section.studio-clients {
            margin:5rem 0 2.5rem 0;
        }
    }
    @media (min-width: 576px) {
        section.studio-clients {
            margin: 6.25rem 0 3rem 0;
        }
    }
    @media (min-width: 1200px) {
        section.studio-clients {
            margin: 10rem 0 5rem 0;
        }
    }
section.studio-clients .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 3.125rem 0 6rem 0;
    text-align: center;
    gap: 20px;
}
    @media (max-width: 575px) {
        section.studio-clients .content {
            gap: 10px;
        }
    }
    @media (min-width: 576px) {
        section.studio-clients .content {
            gap: 12px;
        }
    }
    @media (min-width: 768px) {
        section.studio-clients .content {
            gap: 15px;
        }
    }
    @media (min-width: 1200px) {
        section.studio-clients .content {
            gap: 20px;
        }
    }
section.studio-clients .content .title h1 {
    font-family: 'Gilmer-Bold';
}
[data-bs-theme="dark"] section.studio-clients .content .title h1 {
    color: var(--glam-light);
}
[data-bs-theme="light"] section.studio-clients .content .title h1 {
    color: var(--glam-black);
}

[data-bs-theme="dark"] section.studio-clients .content .description p {
    color: var(--glam-light);
}
[data-bs-theme="light"] section.studio-clients .content .description p {
    color: var(--glam-black);
}

section.studio-clients .clients-column {
    margin-bottom: 6.25rem;
}
    @media (max-width: 575px) {
        section.studio-clients .clients-column {
            margin-bottom: 3.75rem;
        }
    }
    @media (min-width: 576px) {
        section.studio-clients .clients-column {
            margin-bottom: 3.75rem;
        }
    }
    @media (min-width: 768px) {
        section.studio-clients .clients-column {
            margin-bottom: 5rem;
        }
    }
    @media (min-width: 992px) {
        section.studio-clients .clients-column {
            margin-bottom: 6.25rem;
        }
    }
section.studio-clients .clients-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    margin: 0 auto;
}
section.studio-clients .clients-item .item-show {
    min-width: 210px;
    max-width: 210px;
}
@media (max-width: 575px) {
    section.studio-clients .clients-item .item-show {
        min-width: 150px;
        max-width: 150px;
    }
}
@media (min-width: 576px) {
    section.studio-clients .clients-item .item-show {
        min-width: 210px;
        max-width: 210px;
    }
}
section.studio-clients .clients-item .item-show img {
    width: 100%;
}
section.studio-clients .clients-item .item-show img.theme-image {
    display: none;
}
html[data-bs-theme="light"] section.studio-clients .clients-item .item-show img.light-theme-image {
    display: block;
}
html[data-bs-theme="dark"] section.studio-clients .clients-item .item-show img.dark-theme-image {
    display: block;
}

/* ===================================
    studio-meet-the-team
===================================== */
section.studio-meet-the-team {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10rem;
    margin: 0 0 10rem 0;
}
    @media (max-width: 575px) {
        section.studio-meet-the-team {
            margin: 0 0 4.75rem 0;
        }
    }
    @media (min-width: 576px) {
        section.studio-meet-the-team {
            margin: 0 0 6.25rem 0;
        }
    }
    @media (min-width: 1200px) {
        section.studio-meet-the-team {
            margin: 0 0 10rem 0;
        }
        section.studio-meet-the-team .wf-20 {
            -webkit-box-flex: 0;
            -ms-flex: 0 0 20% !important;
            flex: 0 0 20% !important;
            max-width: 20%;
        }
    }
section.studio-meet-the-team .content .title {
    margin-bottom: 2rem;
}
[data-bs-theme="dark"] section.studio-meet-the-team .content .title h1 {
    color: var(--glam-light);
}
[data-bs-theme="light"] section.studio-meet-the-team .content .title h1 {
    color: var(--glam-black);
}
[data-bs-theme="dark"] section.studio-meet-the-team .content .text p {
    color: var(--glam-light);
}
[data-bs-theme="light"] section.studio-meet-the-team .content .text p {
    color: var(--glam-black);
}


/* ===================================
    studio-career
===================================== */
section.studio-career {
    margin: 0px 0 10rem 0;
}
    @media (max-width: 575px) {
        section.studio-career {
            margin: 0 0 5rem 0;
        }
    }
    @media (min-width: 576px) {
        section.studio-career {
            margin: 0 0 5rem 0;
        }
    }
    @media (min-width: 992px) {
        section.studio-career {
            margin: 0px 0 10rem 0;
        }
    }
section.studio-career .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    text-align: center;
    gap: 30px;
}
    @media (max-width: 575px) {
        section.studio-career .content {
            gap: 10px;
        }
    }
    @media (min-width: 576px) {
        section.studio-career .content {
            gap: 15px;
        }
    }
    @media (min-width: 768px) {
        section.studio-career .content {
            gap: 20px;
        }
    }
    @media (min-width: 1200px) {
        section.studio-career .content {
            gap: 30px;
        }
    }

[data-bs-theme="dark"] section.studio-career .content .title h1 {
    color: var(--glam-light);
}
[data-bs-theme="light"] section.studio-career .content .title h1 {
    color: var(--glam-black);
}
[data-bs-theme="dark"] section.studio-career .content .description p {
    color: var(--glam-light);
}
[data-bs-theme="light"] section.studio-career .content .description p {
    color: var(--glam-black);
}
section.studio-career .content .direction-button {
    padding: 3rem 0;
    text-align: center;
}


/* ===================================
    studio-start-project
===================================== */
section.studio-start-project {
    margin: 7.5rem 0 7.5rem 0;
}
    @media (max-width: 575px) {
        section.studio-start-project {
            margin: 5rem 0 5rem 0;
        }
    }
    @media (min-width: 576px) {
        section.studio-start-project {
            margin: 5rem 0 5rem 0;
        }
    }
    @media (min-width: 992px) {
        section.studio-start-project {
            margin: 7.5rem 0 7.5rem 0;
        }
    }
section.studio-start-project .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    text-align: center;
    gap: 4.375rem;
}
    @media (max-width: 575px) {
        section.studio-start-project .content {
            gap: 2.5rem;
        }
    }
    @media (min-width: 576px) {
        section.studio-start-project .content {
            gap: 2.5rem;
        }
    }
    @media (min-width: 768px) {
        section.studio-start-project .content {
            gap: 3.125rem;
        }
    }
    @media (min-width: 1200px) {
        section.studio-start-project .content {
            gap: 4.375rem;
        }
    }

section.studio-start-project .content .title h1 {
    font-family: 'Gilmer-Bold';
}
[data-bs-theme="dark"] section.studio-start-project .content .title h1 {
    color: var(--glam-light);
}
[data-bs-theme="light"] section.studio-start-project .content .title h1 {
    color: var(--glam-black);
}
section.studio-start-project .content .direction-button {
    padding: 0 0 0 0;
    text-align: center;
}