/*  
 
Developed By: Velocitec Systems
https://velocitecsystems.com/
Developer: Shoaib Hussain

*/

/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wdth,wght@75..100,300..800&display=swap');

@font-face {
    font-family: montserrat;
    src: url('../fonts/montserrat-thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: montserrat;
    src: url('../fonts/montserrat.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: montserrat;
    src: url('../fonts/montserrat-medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: montserrat;
    src: url('../fonts/montserrat-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: montserrat;
    src: url('../fonts/montserrat-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: marisa;
    src: url('../fonts/marisabold.woff') format('woff2');
    /* font-weight: 700; */
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: bebasneuebold;
    src: url('../fonts/bebasneuebold.woff') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: diene;
    src: url('../fonts/diene.woff') format('woff2');
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: hagin;
    src: url('../fonts/hagin.woff') format('woff2');
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Harper Bold Bold';
    src: url('../fonts/harper.woff') format('woff2');
    font-style: normal;
    font-display: swap
}


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

body {
    font-family: montserrat;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #29272a;
    font-size: 14px;
    overflow-x: hidden;
}

/* Chrome, Edge and Safari */
body::-webkit-scrollbar {
    width: 5px;
}

body::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: transparent;
}


body::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #7F7F7F;
}

body::-webkit-scrollbar-thumb:hover {
    background-color: #7F7F7F;
}

body::-webkit-scrollbar-thumb:active {
    background-color: #7F7F7F;
}

.container-fluid {
    padding: 0 2.12195vw !important;
}

.container {
    max-width: calc(65% + 40px);
    padding: 0 20px;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
}

.bebasneuebold {
    font-family: 'bebasneuebold' !important;
    font-weight: 700 !important;
}

/* Custom Cursor */


.cursor {
    position: fixed;
    top: -20px;
    left: -20px;
    pointer-events: none;
    z-index: 1000;
    transition: opacity .35s ease;
    mix-blend-mode: difference;
    border-radius: 50%;
    /* opacity: 0; */
    visibility: hidden;
    /* display: none */
}

.cursor__item {
    min-width: 40px;
    min-height: 40px;
    width: calc(70/4100 * 100vw);
    height: calc(70/4100 * 100vw);
    border-radius: 50%;
    border: 2px solid #fff;
    transform: scale(1);
    transition: transform .5s ease 0s;
}

.cursor.active {
    background-color: #fff
}

.cursor.active .cursor__item {
    background-color: #fff;
    -webkit-transform: scale(2.7);
    -ms-transform: scale(2.7);
    transform: scale(2.7)
}

.mobile-main {
    display: none;
}

.desktop-main {
    display: block;
}

/* Header */

header {
    padding: 1.125rem 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
}

header .container-fluid {
    padding: 0 2.12195vw !important;
}

.navbar-brand img {
    height: 40px;
}


.menu_btn {
    pointer-events: all;
    display: block !important;
    position: relative;
    width: 30px;
    height: 20px;
    border: 0 !important;
    padding: 0 !important;
    z-index: 5;
}

.menu_btn span {
    transition: all .3s ease 0s;
    top: calc(50% - 1px);
    left: 0;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #000;
}

header.dark .menu_btn span {
    background-color: white;
}

.menu_btn span:first-child {
    top: 0;
}

.menu_btn span:last-child {
    top: auto;
    bottom: 0;
}

header.isopen .menu_btn span:first-child {
    transform: rotate(-45deg);
    top: calc(50% - 1px);
}

header.isopen .menu_btn span {
    transform: scale(0);
}

header.isopen .menu_btn span:last-child {
    transform: rotate(45deg);
    bottom: calc(50% - 1px);
}

.menu {
    margin-left: auto;
    /*visibility: hidden;*/
    /*opacity: 0;*/
    transition: 0.5s ease;
}

.menu ul {
    display: flex;
}

header.isopen .menu {
    visibility: visible;
    opacity: 1;
}

.menu li {
    margin-right: 40px;
}

.menu li a {
    color: #29272a;
    font-weight: 600;
    text-transform: uppercase;
    position: relative;
    z-index: 3;
    font-size: 18px;
}

.sub__menu li {
    margin: 0 1.12195vw 0 0;
}

.sub__menu li a {
    font-size: 13px;
    text-transform: capitalize;
}

header.dark .menu li a {
    color: white;
}

.menu :not(.sub__menu) li a:after {
    content: "";
    height: 2px;
    background-color: #29272a;
    position: absolute;
    bottom: -10px;
    transition: all .3s ease 0s;
    left: 0;
    width: 0
}

.menu li a:hover::after {
    width: 57.14286%;
}

/* !Header */

/* Main Hero Section */
.hero-section {
    width: 100%;
    height: 100vh;
}

.main-hero {
    position: relative;
}

.hero-section .swiper-slide {
    align-items: start;
    justify-content: start;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.slide-content {
    width: 100%;
    color: #29272a;
    height: 100vh;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 3.17073vw 0;
}

.slide-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.slide-content h5 {
    font-weight: 600;
    will-change: transform;
    transition: transform .8s ease .2s, opacity .8s ease .2s, color .8s ease .3s;
    position: relative;
    color: #29272a;
    opacity: 0;
    -webkit-transform: perspective(200px) rotateX(20deg) scale(.9);
    transform: perspective(200px) rotateX(20deg) scale(.9);
    position: relative;
    color: #29272a;
    opacity: 0;
    transform: perspective(200px) rotateX(20deg) scale(.9);
    font-size: calc(42/4100 * 100vw);
    text-transform: uppercase;
    padding: 0 0 1.11905em;
    margin: 0 0 5.17391vh;
}

.slide-content h5::after {
    content: "";
    transition: width .8s ease 0s, background-color .8s ease 0s;
    width: 48.22695%;
    height: calc((4 / 4100)* 100vw);
    min-height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #29272a;
}

.hero-section .swiper-slide-active .slide-content h1,
.hero-section .swiper-slide-active .slide-content h5,
.hero-section .swiper-slide-active .slide-content p,
.hero-section .swiper-slide-active .slide-content .btn {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

.slide-content h1 {
    font-weight: 600;
    transition: transform .8s ease .2s, opacity .8s ease .2s;
    font-size: calc(180/4100 * 100vw);
    margin: 0 0 4.34783vh -.1em;
    opacity: 0;
    transform: perspective(200px) rotateX(30deg) scale(.8);
}

.slide-content p {
    will-change: transform;
    transition: transform .8s ease .2s, opacity .8s ease .2s;
    opacity: 0;
    transform: perspective(200px) rotateX(30deg) scale(.9);
    font-weight: 600;
    font-size: calc(42/4100 * 100vw);
    line-height: calc(75/42);
    letter-spacing: .18px;
}

.slide-content .btn {
    margin: 4.91304vh 0 0;
    opacity: 0;
    transition: transform .8s ease 0s, opacity .8s ease 0s, color .8s ease 0s, border .8s ease 0s;
    transform: perspective(200px) rotateX(50deg) scale(.9);
    color: #29272a;
    font-weight: 600;
    border: 2px solid #29272a;
    display: inline-flex;
    padding: 0 3.04878vw 0 .78049vw;
    border-radius: 80px;
    height: 3.17073vw;
    font-size: .80488vw;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.slide-content .btn>* {
    position: relative;
    z-index: 2;
}

.slide-content .btn i {
    transition: border .3s ease 0s, color .3s ease 0s;
    margin: 0 .78049vw 0 0;
    width: 1.85366vw;
    height: 1.85366vw;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .2em 0 0 .2em;
    border: 2px solid #29272a;
}

.slide-content .btn:after {
    content: "";
    transition: all 1s cubic-bezier(.19, 1, .22, 1);
    background-color: #29272a;
    position: absolute;
    width: 0%;
    height: 100%;
    top: 0;
    left: 0;
}

.slide-content .btn:hover {
    color: white;
}

.slide-content .btn:hover i {
    border-color: white;
}

.slide-content .btn:hover::after {
    width: 100%;
}

.hero-section .dark-slide {
    background-color: #131212;
}

.hero-section .dark-slide .slide-content h1,
.hero-section .dark-slide .slide-content h5,
.hero-section .dark-slide .slide-content p,
.hero-section .dark-slide .slide-content .btn {
    color: white;
}

.hero-section .dark-slide .slide-content h5::after {
    background-color: white;
}

.hero-section .dark-slide .slide-content .btn,
.hero-section .dark-slide .slide-content .btn i {
    border-color: white;
}

.hero-section .dark-slide .slide-content .btn:hover {
    color: black;
}

.hero-section .dark-slide .slide-content .btn:after {
    background-color: white;
}

.slide_bg {
    position: absolute;
    inset: 0;
}

.slide_bg picture img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.slide_bg .bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translate3d(-15%, 0, 0);
    will-change: transform;
    transition: transform 2.1666s cubic-bezier(.55, 0, .09, 1), opacity 2.1666s cubic-bezier(.55, 0, .09, 1), left .4s cubic-bezier(.55, 0, .09, 1);
}

.hero-section .swiper-slide-active .slide_bg .bg-img {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.swiper-control {
    display: flex;
    position: absolute;
    bottom: 4.99132vh;
    gap: 3rem;
}

.swiper-control>* {
    position: static;
    margin: 0;
    color: #3f393b;
    width: 2em;
    height: 2em;
    border: 0 !important;
}

.hero-section.dark .swiper-control>* {
    color: white;
}

.swiper-control>*::after {
    font-size: calc((60/4101) * 100vw) !important;
}

.thumbnail-slider {
    position: absolute;
    left: 0;
    z-index: 2;
    height: 17vw;
    min-height: 500px;
    top: 50%;
    margin: -20px 0;
    transition: all .8s ease 2s;
    transform: translate(0, -45%);
}

.thumbnail-slider .swiper-slide-prev .thumbnail-slide,
.thumbnail-slider .swiper-slide-next .thumbnail-slide {
    transform: translate(-45%, 0);
}

.thumbnail-slide {
    padding: 20px 0;
    width: 7.73171vw;
    transform: translate(-100%, 0);
    transition: all .8s ease 0s;
    display: block;
    position: relative;
}


.thumbnail-slider .swiper-slide .thumbnail-slide:hover span,
.thumbnail-slide span {
    color: #29272a;
    font-weight: 300;
    font-size: calc(48/4100 * 100vw);
    position: absolute;
    top: 20px;
    right: .2em;
    margin: -1.1em 0 0;
    transform-origin: bottom;
    transition: all .3s ease 0s;
    transform: perspective(50px) rotateX(90deg);
}

.dark-slide .thumbnail-slide span {
    color: #fff;
}

.thumbnail-slide .img {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
}

.thumbnail-slide .img img {
    /* width: 100%; */
    /* height: 100%; */
    object-fit: cover;
}

.thumbnail-slide .img:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: #737373;
    transition: all .8s ease 0s;
}

.thumbnail-slider .swiper-slide-active .thumbnail-slide,
.thumbnail-slider .swiper-slide .thumbnail-slide:hover {
    transform: translate(0, 0);
}

.thumbnail-slide:hover .img::after {
    opacity: 0.5;
}

.thumbnail-slider .swiper-slide-active .thumbnail-slide span {
    transition: all .8s ease .3s;
    transform: perspective(50px) rotateX(0deg);
}

/* !Main Hero Section */

/* Brand CTA Section */
.brand-cta {
    background-color: #fff;
    /* min-height: calc(1850 / 4100* 100vw); */
    display: flex;
    align-items: center;
    padding: 210px 0 80px;
}
.brand-cta .line-down{
    border-bottom: 1.5px solid #000;
    margin: 80px 0px 0px;
}
.cta-heading {
    margin: 0 0 .41852em;
    text-align: center;
}

.cta-heading p {
    font-weight: 700;
    font-size: calc(330/4100 * 40vw);
    line-height: 1.2;
    margin: 0;
}

.cta-heading p.short {
    font-size: calc(330 / 4100 * 20vw);
    font-weight: 600;
    margin: 30px 0px 0px;
}

.outline {
    color: transparent;
    -webkit-text-stroke: .025em #29272a;
    background-clip: text;
    display: inline-block;
}

.works-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: calc(383 / 4100* 100vw);
    width: calc(383 / 4100* 100vw);
    font-weight: 600;
    font-size: calc(33/4100 * 100vw);
    line-height: 1.25;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
    background-color: white;
    border-radius: 50%;
    position: relative;
    color: #29272a;
    border: 2px solid #29272a;
    margin-left: calc(104/4100 * 100vw)
}

.works-link.fill {
    background-color: #29272a;
    color: #fff;
}

.works-link.fill:hover {
    color: #29272a;
}

.works-link:hover {
    color: #fff
}

.works-link>* {
    z-index: 9;
}

.works-link:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    transition-property: width, height;
    transition-duration: .35s;
    transition-timing-function: ease-in-out;
    border-radius: 50%;
    box-shadow: inset 0 0 0 calc(383/4100 * 100vw) #29272a;
    z-index: 1
}

.works-link.fill:before {
    box-shadow: inset 0 0 0 calc(383/4100 * 100vw) white;
}

.works-link:hover:before {
    width: 100%;
    height: 100%
}

/* !Brand CTA Section */

/* VIDEO SECTION */

.video-section {
    overflow: hidden;
}

.video-section video {
    width: 100vw;
    object-fit: cover;
}

/* !VIDEO SECTION */

/* SERVICES SECTION */

.services-section {
    padding: calc(390 / 4100* 100vw) 0 calc(300 / 4100* 100vw);
}

.services-container {
    /*padding: 0 calc(370 / 4100* 100vw);*/
}

.services-section h2 {
    font-weight: 600;
    font-size: calc(42/4100 * 100vw);
    line-height: calc(44/4100 * 100vw);
    text-align: left;
    color: #29272a;
    letter-spacing: .08em;
    position: relative;
    margin-bottom: calc(31 / 4100* 100vw);
    text-transform: uppercase;
}

.services-section h2::after {
    content: '';
    width: calc(136 / 4100* 100vw);
    height: calc(4 / 4100* 100vw);
    background: #29272a;
    position: absolute;
    bottom: calc(-31 / 4100* 100vw);
    left: 0;
}

.services-section .accordion-item,
.services-section .accordion-header {
    padding: 0;
    border: 0;
    border-radius: 0;
}

.services-section .accordion-header .accordion-button {
    background-color: transparent !important;
    box-shadow: none !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: calc(465 / 4100* 100vw);
    padding: 0;
}

.services-section .accordion-header .accordion-button span {
    font-size: calc(270/4100 * 100vw);
    font-weight: 700;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #29272a;
    position: relative;
    white-space: nowrap;
}

.services-section .accordion-header .accordion-button span:not(.accordion-controls)::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    -webkit-text-fill-color: #29272a;
    width: 0%;
    height: calc(465 / 4100* 100vw);
    color: #fff;
    overflow: hidden;
    transition: width 2s cubic-bezier(.17, .67, .39, .81);
}

.services-section .accordion-item .accordion-header .accordion-button:not(.collapsed) span {
    -webkit-text-fill-color: #29272a;
}

.services-section .accordion-item:hover .accordion-header .accordion-button.collapsed span::before {
    width: 100%;
}

.accordion-button::after {
    height: auto;
    font-weight: 100 !important;
    text-align: center;
}

.accordion-button::after {
    content: "+";
    /* font-family: "Font Awesome 6 Pro"; */
    background-image: none;
    font-size: calc(306/4100 * 100vw);
    width: calc(172 / 4100* 100vw) !important;
    color: #29272a;
    width: auto;
}

.accordion-button:not(.collapsed)::after {
    content: "-";
    /* font-family: "Font Awesome 6 Free"; */
    background-image: none;
    font-size: calc(306/4100 * 100vw);
    width: calc(172 / 4100* 100vw) !important;
    color: #29272a;
    transform: none;
    width: auto;
}

.services-section .accordion-item {
    /*padding: 0 calc(370 / 4100* 100vw);*/
    min-height: 11.34146341vw;
    width: 100%;
    border-bottom: 2px solid #29272a;
}

.accordion-text {
    height: calc(590 / 4100* 100vw);
    width: 100%;
    transition: height linear .4s;
    overflow: hidden;
    font-size: calc(42/4100 * 100vw);
    line-height: calc(75/4100 * 100vw);
    color: #29272a;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.accordion-text .list h4 {
    font-weight: 600;
    font-size: inherit;
    margin-bottom: 0.25rem;
}

/* !SERVICES SECTION */


/* AWARDS SECTION */

.awards-section h2 {
    font-size: calc(120/4100 * 100vw);
    font-weight: 600;
    text-align: center;
}

.awards-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: calc(200 / 4100* 100vw) calc(370 / 4100* 100vw) calc(420 / 4100* 100vw);
}

.awards-list li:nth-child(1) {
    width: calc(276/4100 * 100vw)
}

.awards-list li:nth-child(2) {
    width: calc(301/4100 * 100vw)
}

.awards-list li:nth-child(3) {
    width: calc(388/4100 * 100vw)
}

.awards-list li:nth-child(4) {
    width: calc(228/4100 * 100vw)
}

.awards-list li:nth-child(5) {
    width: calc(471/4100 * 100vw)
}

.awards-list li:nth-child(6) {
    width: calc(388/4100 * 100vw)
}

.awards-list li:nth-child(7) {
    width: calc(368/4100 * 100vw)
}

/* !AWARDS SECTION */

/* Blog Section */

.blog-section {
    width: 100%;
    padding-bottom: calc(465/4100 * 100vw);
    text-align: center
}

.blog-section .container {
    max-width: calc(3468/4100 * 100vw);
}

.blog-section h2 {
    font-size: calc(120/4100 * 100vw);
    color: #29272a;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

.blog-title {
    margin-bottom: calc(155 / 4100* 100vw);
}

.blog-title a {
    font-size: calc(50/4100 * 100vw);
    font-family: montserrat, sans-serif;
    color: #29272a;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-title a i {
    font-size: calc(35/4100 * 100vw);
    margin-left: calc(50 / 4100* 100vw);
}

.blog-section .blog-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    grid-column-gap: calc(114 / 4100* 100vw);
    grid-row-gap: calc(124 / 4100* 100vw);
}

.blog-section .blog-list .item {
    cursor: pointer;
    max-width: calc(1080 / 4100* 100vw);
    width: 100%;
    background: #fff;
    box-shadow: 0 25px 50px rgba(0, 0, 0, .05);
}

.blog-section .item .img {
    overflow: hidden;
    position: relative;
}

.blog-section .item .img img {
    transition: .5s ease-in-out;
}

.blog-section .item:hover .img img {
    transform: scale(1.5);
}

.blog-section .item:hover .overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, .58);
    z-index: 2;
}

.blog-section .item .text {
    text-transform: uppercase;
    opacity: 0;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: 600;
    font-size: calc(48/4100 * 100vw);
    letter-spacing: .6em;
    pointer-events: none;
    z-index: 4;
    transition: .3s ease-in-out;
}

.blog-section .item:hover .text {
    opacity: 1;
    animation: move-down .3s linear;
}

@keyframes move-down {
    0% {
        top: 10%
    }

    50% {
        top: 35%
    }

    100% {
        top: 50%
    }
}

.blog-section .item-content {
    min-height: calc(722.79 / 4100* 100vw);
    padding: calc(97 / 4100* 100vw) calc(56 / 4100* 100vw) calc(55 / 4100* 100vw) calc(51 / 4100* 100vw);
    display: flex;
    flex-direction: column;
}

.blog-section .item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(89 / 4100* 100vw);
}

.blog-section .item-user {
    font-weight: 600;
    font-size: calc(42/4100 * 100vw);
    line-height: 1.2;
    text-align: left;
    color: #292a27;
    display: flex;
    align-items: center;
}

.blog-section .item-views,
.blog-section .item-socials,
.blog-section .item-date {
    font-weight: 400;
    font-size: calc(42/4100 * 100vw);
    line-height: 1.2;
    text-align: left;
    color: #292a27;
}

.blog-section .item-profile-img {
    margin-right: calc(23 / 4100* 100vw);
    width: calc(105 / 4100* 100vw);
    height: calc(105 / 4100* 100vw);
    background-color: #2c2c2c;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
}

.blog-section .item-profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    filter: blur(1px);
    opacity: 0.75;
}

.blog-section .item-views img {
    width: calc(54 / 4100* 100vw);
    height: calc(27 / 4100* 100vw);
    margin-right: calc(17 / 4100* 100vw);
}

.blog-section .item-title {
    font-family: montserrat;
    font-weight: 700;
    font-size: calc(60/4100 * 100vw);
    line-height: calc(75/4100 * 100vw);
    text-align: left;
    color: #292a27;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: -o-ellipsis-lastline;
    text-align: justify;
}

.blog-section .item-bottom {
    margin-top: auto;
    padding-top: calc(67 / 4100* 100vw);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-top: 1px solid #292a27;
}

.blog-section .item-socials {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog-section .item-socials .likes {
    display: flex;
    align-items: center;
}

.blog-section .item-socials .likes img {
    width: calc(47 / 4100* 100vw);
    height: calc(45 / 4100* 100vw);
    margin-right: calc(17 / 4100* 100vw);
}

.blog-section .item-socials .share {
    display: flex;
    align-items: center;
    margin-left: calc(30 / 4100* 100vw);
}

.blog-section .item-socials .share img {
    width: calc(46 / 4100* 100vw);
    height: calc(38 / 4100* 100vw);
    margin-right: calc(18 / 4100* 100vw);
}

/* !Blog Section */

/* Contact Cta */

.contact-cta {
    background-color: #dfdfdf;
    padding: 6.19512vw 0;
    text-align: center;
}

.contact-cta h2 {
    font-size: calc(180/4100 * 100vw);
    line-height: calc(210/180);
    font-weight: 600;
    margin: 0 0 .58333em;
}

.contact-cta .btn,
.contaact-call-wrapper .btn {
    color: #29272a;
    font-weight: 600;
    border: 3px solid #29272a;
    display: inline-flex;
    padding: 0 3.04878vw 0 .78049vw;
    border-radius: 80px;
    height: 3.17073vw;
    font-size: .80488vw;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
}

.contact-cta .btn i,
.contaact-call-wrapper .btn i {
    transition: border .3s ease 0s, color .3s ease 0s;
    margin-right: .78049vw;
    width: 1.85366vw;
    height: 1.85366vw;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid #29272a;
}

.contact-cta .btn>*,
.contaact-call-wrapper .btn>* {
    position: relative;
    z-index: 2;
}

.contact-cta .btn:after,
.contaact-call-wrapper .btn:after {
    content: "";
    -webkit-transition: all 1s cubic-bezier(.19, 1, .22, 1);
    -o-transition: all 1s cubic-bezier(.19, 1, .22, 1);
    transition: all 1s cubic-bezier(.19, 1, .22, 1);
    background-color: #29272a;
    position: absolute;
    width: 0%;
    height: 100%;
    top: 0;
    left: 0;
}

/* !Contact Cta */

footer {
    position: relative;
    z-index: 5;
    background-color: #29272a;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    /* padding: calc(148 / 4100* 100vw) calc(85 / 4100* 100vw); */
    padding: 2rem calc(85 / 4100* 100vw);
}

.footer__logo {
    flex: 0 0 6%;
    margin-right: calc(738 / 4100* 100vw);
}

.footer__logo img {
    height: 40px;
    max-width: inherit;
}

.footer-link {
    display: flex;
}

.info-footer__item {
    font-size: calc(36/4100 * 100vw);
    line-height: 1.667;
    font-weight: 600;
    letter-spacing: .85px;
    margin: 0
}

.info-footer__item:not(:last-child) {
    margin-right: calc(243/4100 * 100vw)
}

.info-footer__link {
    color: #fff;
    position: relative;
    overflow: hidden
}

.info-footer__link span {
    display: inline-block;
    transition: transform .3s ease 0s;
}

.info-footer__link:before {
    display: none
}

.info-footer__item li {
    display: block;
    overflow: hidden;
}

.info-footer__item li a {
    color: white;
}


.info-block {
    position: fixed;
    z-index: 99999;
    left: calc(80/4100 * 100vw);
    bottom: calc(70/4100 * 100vw)
}

.info-block h1,
.info-block h2,
.info-block h3 {
    font-size: calc(30/4100 * 100vw);
    font-family: montserrat, sans-serif;
    color: #29272a;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: calc(34/4100 * 100vw)
}

.info-block h2 {
    font-size: calc(36/4100 * 100vw)
}

.info-block h3 {
    font-size: 18px
}

.info-block p {
    font-size: 15px;
    font-family: montserrat, sans-serif;
    color: #29272a;
    line-height: 1.75;
    margin-bottom: calc(34/4100 * 100vw)
}

.info-block .info-close {
    cursor: pointer
}

.info-block .info-container {
    overflow: hidden;
    width: 1px;
    height: 1px;
    opacity: 0
}

.info-block .info-header {
    padding: 10px calc(50/4100 * 100vw);
    background-color: #000;
    color: #fff;
    line-height: 1.3;
    font-size: calc(32/4100 * 100vw);
    font-weight: 600;
    font-family: montserrat, sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center
}

.info-block .info-header span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(130/4100 * 100vw)
}

.info-block .icon {
    cursor: pointer;
    position: absolute;
    bottom: 0;
    left: 0;
    min-width: 60px;
    min-height: 60px;
    width: calc(133/4100 * 100vw);
    height: calc(133/4100 * 100vw);
    background-color: #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.info-block .icon img {
    width: 70%;
    height: 70%
}

.info-block.open .info-container {
    position: relative;
    z-index: 2;
    display: block;
    width: calc(824/4100 * 100vw);
    opacity: 1;
    min-width: 380px;
    min-height: 540px;
    height: calc(1282/4100 * 100vw);
    padding-bottom: calc(34/4100 * 100vw);
    overflow: hidden;
    border-radius: calc(30/4100 * 100vw);
    background-color: #fff
}

.info-block.open .content {
    position: relative;
    width: 100%;
    height: calc(100% - calc(34/4100 * 100vw) - 55px);
    padding: calc(44/4100 * 100vw) calc(50/4100 * 100vw) 0;
    overflow-y: scroll
}


/* Cases Page */

.page {}

.contact-call {
    position: relative;
    background-color: #dfdfdf;
    padding: 2.43902vw 0;
    text-align: center;
}

.project-nav {
    padding: 0 2.04878vw;
    display: flex;
    justify-content: space-between;
}

.project-nav a {
    color: #2d2b2e;
    font-size: 1.02439vw;
    text-transform: uppercase;
    font-weight: 600;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    white-space: nowrap;
    transition: all .3s ease 0s;
}

.project-nav a:nth-child(1) i {
    margin-right: 1.63415vw;
}

.project-nav a:nth-child(2) i {
    margin-left: 1.63415vw;
}

.contaact-call-wrapper {
    padding: 3.65854vw 0;
}

.contact-call h2 {
    font-size: calc(180 / 2800* 100vw);
    line-height: calc(210 / 180);
    font-weight: 600;
    margin: 0 0 .58333em;
}


/* ECO Bottles */

.eco-bottle-cta {
    /* padding: 5.36585vw 0 30%; */
    padding: 5.36585vw 0 0;
    overflow: hidden;
}

.eco-bottle-cta h2 {
    font-size: calc(75 / 4100* 100vw);
    margin: 0 0 calc(80 / 4100* 100vw);
    font-family: montserrat, sans-serif;
    color: #29272a;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.141;
    text-align: left;
    transform: translate(0, -100px);
    opacity: 0;
    transition: transform 0.8s ease 0.2s, opacity 0.8s ease 0.2s;
}

.eco-bottle-cta.active h2 {
    opacity: 1;
    transform: translate(0, 0);
}

.eco-bottle-cta .text {
    transition: all 1s ease 0.5s;
    padding: 0 0 0 4.26829vw;
    font-size: 1.02439vw;
    font-weight: 600;
    line-height: calc(75 / 42);
    position: relative;
    opacity: 0;
    transform: translate(0, 30%);
}

.eco-bottle-cta.active .text {
    opacity: 1;
    transform: translate(0, 0);
}

.eco-bottle-cta .text::before {
    position: absolute;
    left: calc(40 / 4100* 100vw);
    top: 0;
    content: '';
    background-color: #29272a;
    width: calc(6 / 4100* 100vw);
    height: 100%;
}

.eco-bottle_cta_img {
    position: relative;
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: white;
    /* margin-top: -100vh; */
}

.eco-bottle-cta12 {
    transform: translate(0, 30%);
    opacity: 0;
    transition: all 1s ease-out 0.5s;
}

.eco-bottle-cta.active .eco-bottle-cta12 {
    opacity: 1;
    transform: translate(0, 0);
}

.eco-bottle_cta_img::before,
.eco-bottle_cta_img::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 50vh;
    background: url('https://stanbranding.com/wp-content/themes/stanbranding/img/cases/ecobottle/block-3/mountains.svg') 0 0 / 100% no-repeat;
}

.eco-bottle_cta_img::before {
    top: -40%;
    opacity: .4;
}

.eco-bottle_cta_img::after {
    top: -25%;
    opacity: 1;
}

.eco-bottle_cta_img picture {
    position: relative;
    z-index: 2;
}

.eco-bottle_print {
    overflow: hidden;
}

.eco-bottle_print .container {
    max-width: 82%;
    margin: 0 auto;
}

.eco-bottle_print__wrapper {
    padding: 4.04878vw 0 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.eco-bottle_print__wrapper .content {
    flex: 0 1 50%;
    padding: 0 30px 4.87805vw 0;
}

.eco-bottle_logo {
    width: 11.92683vw;
    margin: 0 0 3.65854vw;
    transform: perspective(400px) translate(0, 1vw) rotateX(65deg);
    transition: all 0.8s ease 0s;
}

.eco-bottle_print.active .eco-bottle_logo {
    transform: translate(0, 0);
}

.eco-bottle_print__wrapper .content h2 {
    font-size: 2.19512vw;
    font-weight: 600;
    margin: 0 0 1.11111em;
    position: relative;
}

.eco-bottle_print__wrapper .content h2::before {
    content: "";
    height: .14634vw;
    min-height: 1px;
    background-color: #2d2b2e;
    position: absolute;
    width: 100vw;
    top: 50%;
    transform: translate(-102vw, -.07317vw);
}

.eco-bottle_print__wrapper .content p {
    font-weight: 600;
    font-size: calc(42 / 4100* 100vw);
    line-height: calc(75 / 42);
    letter-spacing: .18px;
}

.eco-bottle_print__wrapper .image {
    align-self: flex-end;
    transition: transform 1.5s ease-out .5s;
    flex: 0 1 50%;
    transform: translate(0, 100%);
}

.eco-bottle_print.active .eco-bottle_print__wrapper .image {
    transform: translate(0, 0);
}

.eco-bottle_print__wrapper .image img {
    max-width: 37vw;

}

.video-cta-1 video {
    width: 100%;
}

.desktop {
    display: block;
}

.mobile {
    display: none !important;
}

.eco-bottle-showcase {
    min-height: 100vh;
    background-color: #f2f2f2;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}

.eco-bottle-showcase:after {
    content: "";
    position: absolute;
    width: 130%;
    height: 20%;
    bottom: -15%;
    left: -15%;
    background-color: #fff;
    transform: rotate(4deg);
}

.eco-bottle-showcase .container {
    max-width: 52%;
}

.eco-bottle__images-wrap {
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
}

/* !Eco Bottles */

/* KARA COLLECTION */

.kara_mainhero {
    padding: 20px 0;
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    line-height: 1;
}

.kara_mainhero .content {
    width: 50%;
    position: relative;
    z-index: 2;
}

.kara_mainhero .kara-logo {
    width: 81%;
    margin: 0 auto;
}

.kara-logo_context {
    display: flex;
    align-items: center;
    padding: 9.51969vh 0 0;
}

.kara-logo_context .logo_color {
    flex: 0 1 50%;
}

.kara-logo_context .logo_font__text {
    flex: 1 1 auto;
    min-width: 270px;
    padding: 0 0 0 6.15385%;
    font-family: marisa;
    color: #634541;
}

.kara-logo_context .logo_font__text h6 {
    font-weight: 700;
    margin: 0 0 .72973em;
    font-size: 30px;
}

.kara-logo_context .logo_font__text p {
    font-weight: 500;
    font-size: 16px;
    margin: 0 0 .89744em;
    line-height: 1;
}

.kara_mainhero .kara__bg {
    transition: transform 3s ease 0s;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.kara_mainhero .kara__bg img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.kara_main-section {
    overflow: hidden;
}

.kara_main {
    display: flex;
    justify-content: space-between;
    margin: 0 -6.39024vw;
}

.kara_col {
    flex: 0 1 50%;
    padding: 0 6.39024vw;
}

.kara_main .block-2 {
    padding: 16.73913vh 0 19.56522vh 8.97561vw;
    color: #634541;
    font-weight: 600;
}

.kara_main .block-2 h2 {
    transition: all .5s ease 0s;
    margin: 0 0 1.05556em;
    font-size: 28px;
    position: relative;
    font-weight: 600;
}

.kara_main .block-2 h2:before {
    content: "";
    transition: all .5s ease 0s;
    position: absolute;
    left: 0;
    top: .5em;
    height: .14634vw;
    min-height: 1px;
    margin: 0 0 0 -8.97561vw;
    background-color: #634541;
    width: 5.65854vw;
}

.kara_main .block-2 p {
    font-size: 14px;
    transition: all .5s ease 0s;
    line-height: calc(76 / 42);
}

.kara_main .block-1._image {
    text-align: center;
}

.kara_main .block-3 {
    padding: 19.78261vh 0;
}

.kara_main .kara_col:nth-child(2) .block-2 {
    text-align: right;
    padding: 16.73913vh 8.97561vw 19.56522vh 0;
}

.kara_main .kara_col:nth-child(2) .block-2 h2::before {
    left: auto;
    right: 0;
    margin: 0 -8.97561vw 0 0;
}

.kara_cta_image {
    background-color: #fff;
    padding: 0 0 12.04348vh;
}

.kara-strategy {
    background-color: #fff;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    justify-content: space-between;
}

.kara-strategy .content {
    flex: 1 1 auto;
    padding: 30px 50px 30px 8.97561vw;
    color: #634541;
    font-weight: 600;
}

.kara-strategy .content h2 {
    transition: all .5s ease 0s;
    margin: 0 0 1.05556em;
    font-size: 28px;
    position: relative;
}

.kara-strategy .content h2::before {
    content: "";
    transition: all .5s ease 0s;
    position: absolute;
    left: 0;
    top: .5em;
    height: .14634vw;
    min-height: 1px;
    margin: 0 0 0 -8.97561vw;
    background-color: #634541;
    width: 5.65854vw;
}

.kara-strategy .content p {
    font-size: 14px;
    transition: all .5s ease 0s;
    line-height: calc(76 / 42);
}

.kara-strategy .image {
    flex: 0 0 59.09756vw;
}

/* Beejoya Page  */

.beejoya_mainhero {
    position: relative;
}

.beejoya-cta {
    overflow: hidden;
    padding: 50px 0;
    display: flex;
    align-items: center;
}

.beejoya-cta h2 {
    display: inline-block;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 1.05556em;
    letter-spacing: .04311em;
    transition: all .3s ease 0s;
    position: relative;
    font-size: calc(14px + 60*(100vw / 4100));
}

.beejoya-cta .text {
    position: relative;
    font-weight: 600;
    line-height: calc(75 / 42);
    font-size: calc(14px + 28*((100vw - 320px) / 3780));
}

.beejoya_cta_img {
    width: 100%;
    max-width: 42.07317%;
    margin: 0 auto;
}

.beejoya_cta_img-wrapper {
    display: flex;
    justify-content: space-between;
    margin: 0 -4.14634vw;
}

.beejoya_wrapper-col {
    flex: 0 1 50%;
    padding: 0 4.14634vw;
    position: relative;
}

.beejoya_wrapper-col .image {
    position: relative;
    z-index: 5;
}

.beejoya_wrapper-col .clouds {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.beejoya__cloud-images {
    width: 25.04878vw;
    position: absolute;
    bottom: 0;
    left: -20%;
    transform-origin: bottom;
}

.beejoya__cloud-images.beejoya_cloud_1 {
    max-width: 26.26829vw;
    transform: translate(-30%, -15%) scale(0);
    z-index: 6;
}

.beejoya__cloud-images.beejoya_cloud_2 {
    max-width: 30.92683vw;
    transform: translate(-48%, -42%) scale(0);
    z-index: 3;
}

.beejoya__cloud-images.beejoya_cloud_3 {
    transform: translate(-27%, -85%) scale(0);
    z-index: 2;
}

.beejoya__cloud-images.beejoya_cloud_4 {
    transform: translate(53%, -70%) scale(0);
    z-index: 2;
}

.beejoya__cloud-images.beejoya_cloud_5 {
    max-width: 23.34146vw;
    transform: translate(47%, -18%) scale(0);
    z-index: 6;
}

.beejoya__cloud-images.beejoya_cloud_6 {
    max-width: 30.87805vw;
    transform: translate(70%, -45%) scale(0);
    z-index: 3;
}

.beejoya__cloud-images.beejoya_cloud_7 {
    transform: translate(40%, -90%) scale(0);
    z-index: 2;
}

.active .beejoya__cloud-images {
    transition: left 5s ease-out 0s, transform 1.5s ease;
    left: 0;
}

.active .beejoya__cloud-images.beejoya_cloud_1 {
    transition-delay: 1.2s;
    transform: translate(-30%, -15%) scale(1);
}

.active .beejoya__cloud-images.beejoya_cloud_2 {
    transition-delay: 1.5s;
    transform: translate(-48%, -42%) scale(1);
}

.active .beejoya__cloud-images.beejoya_cloud_3 {
    transition-delay: .9s;
    transform: translate(-27%, -85%) scale(1);
}

.active .beejoya__cloud-images.beejoya_cloud_4 {
    transition-delay: .6s;
    transform: translate(53%, -70%) scale(1);
}

.active .beejoya__cloud-images.beejoya_cloud_5 {
    transition-delay: .3s;
    transform: translate(47%, -18%) scale(1);
}

.active .beejoya__cloud-images.beejoya_cloud_6 {
    transition-delay: .1s;
    transform: translate(70%, -45%) scale(1);
}

.active .beejoya__cloud-images.beejoya_cloud_7 {
    transition-delay: .5s;
    transform: translate(40%, -90%) scale(1);
}

.beejoya__decor {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
}

.beejoya__cloud {
    transform-origin: top;
    position: absolute;
}

.beejoya__cloud:first-child {
    top: 0;
    width: 20.70732vw;
    left: 15%;
    animation: cloud_1 2s infinite ease-in-out alternate;
}

@keyframes cloud_1 {
    0% {
        transform: translate(0%, 0) rotate(-1deg)
    }

    100% {
        transform: translate(0%, 0) rotate(1deg)
    }
}

.beejoya__cloud:last-child {
    top: -5%;
    width: 22.90244vw;
    right: 15%;
    transform-origin: top;
    animation: cloud_2 2s infinite ease-in-out alternate-reverse;
}

@keyframes cloud_2 {
    0% {
        -webkit-transform: translate(0%, 0) rotate(-1deg);
        transform: translate(0%, 0) rotate(-1deg)
    }

    100% {
        -webkit-transform: translate(0%, 0) rotate(1deg);
        transform: translate(0%, 0) rotate(1deg)
    }
}

.beejoya__image {
    padding: 1.95122vw 0 0;
    position: relative;
    z-index: 2;
    text-align: center;
}

.beejoya__bgvideo {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

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

/* Aloe-Love page */

.aloelove-bottle-cta {
    overflow: hidden;
    padding: 30px 0 0;
}

.aloelove-bottle-cta h2 {
    font-size: calc(110 / 4100* 100vw);
    margin-bottom: 3%;
}

.aloelove-bottle-cta .text {
    font-weight: 600;
    font-size: calc(14px + 28*((100vw - 320px) / 3780));
    line-height: calc(75 / 42);
    position: relative;
}

.aloelove-bottle-cta .text::before {
    content: "";
    width: .14634vw;
    height: 100%;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 0;
}

.aloelove_bottles-wrapper {
    display: flex;
    margin-top: 4.87805vw;
}

.backwelle_mainhero {
    position: relative;
    z-index: 2;
    text-align: center;
}

.backwelle_mainhero picture img,
.backwelle_cta-bg picture img {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.backwelle_cta-bg picture img {
    object-position: top;
}

.backwelle_cta-wrapper {
    padding: 6.08696vh 0;
    flex: 1 1 auto;
}

.backwelle_cta-content {
    padding: 0 0 0 2.04878vw;
    flex: 0 0 33.04878vw;
    display: flex;
    flex-direction: column;
}

.backwelle_cta-item-wrap {
    flex: 1 1 auto;
}

.backwelle_cta-item {
    display: flex;
    align-items: center;
}

.backwelle_cta-item+.backwelle_cta-item {
    margin-top: 6.95652vh;
}

.backwelle_cta-item-img {
    flex: 0 0 150px;
}

.backwelle_cta-item-text {
    padding: 0 0 0 1.95122vw;
    flex: 1 1 auto;
    font-family: hagin;
    line-height: 1;
}

.backwelle_cta-item-text h4 {
    font-size: calc(8px + 75*((100vw - 320px) / 3780));
}

.backwelle_cta-item-text h6 {
    margin: .67568em 0;
    font-size: calc(6px + 31*((100vw - 320px) / 3780));
}

.backwelle_cta-item-text .backwelle_cta__text {
    font-size: calc(4px + 26*((100vw - 320px) / 3780));
}

.backwelle_cta-item:last-child .backwelle_cta-item-text {
    font-family: diene;
}

.backwelle_cta-item:last-child .backwelle_cta-item-text h4 {
    font-size: calc(8px + 58*((100vw - 320px) / 3780));
}

.backwelle_cta-item:last-child .backwelle_cta-item-text h6 {
    font-size: calc(6px + 30*((100vw - 320px) / 3780));
}

.backwelle_cta-decor {
    text-align: right;
    margin: 50px -3% 4.34783vh 0;
    height: 33.91304vh;
    width: 100%;
    background: url('https://stanbranding.com/wp-content/themes/stanbranding/img/cases/backwelle/wheat.svg') 0 0 / auto 100% repeat-x;
}

.backwelle_cta-image {
    z-index: 2;
    position: relative;
    flex: 1 1 auto;
}

.backwelle_cta-bg {
    position: relative;
    z-index: 3;
}

.backwelle_text-block {
    position: relative;
    z-index: 4;
    display: flex;
    padding: 10.43478vh 0 0 1.95122vw;
}

.backwelle_text-block-content {
    align-self: center;
    flex: 0 0 36.58537vw;
    padding: 0 5.07317vw 0 5vw;
    font-weight: 600;
    line-height: 1;
}

.backwelle_text-block-content h2 {
    font-size: calc(20px + 70*((100vw - 320px) / 3780));
    letter-spacing: .78px;
    margin: 0 0 1.05556em;
    position: relative;
    font-weight: 600;
    line-height: 1;
}

.backwelle_text-block-content h2::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    background-color: #000;
    height: .12195vw;
    min-height: 1px;
    margin: 0 0 0 -3.41463vw;
    transform: translate(-100%, -50%);
}

.backwelle_text-block-content p {
    line-height: 176.74419%;
    font-size: calc(3px + 40*((100vw - 320px) / 3780));
    margin: 0;
}

.backwelle_text-block-img {
    height: 100%;
    width: 100%;
    position: relative;
    -webkit-box-flex: 1;
    flex: 1 1 auto;
}

.backwelle_text-block-img img {
    /* position: absolute; */
    width: 100%;
    height: 100%;
    /* top: 0;
    left: 0; */
    object-fit: cover;
}

.backwelle_divider {
    position: relative;
}

.backwelle_divider-img {
    flex: 0 1 50%;
    align-self: stretch;
    padding: 0 7.63415vw 0 0;
}

.backwelle_divider-img .backwelle_divider-img_wrap {
    position: relative;
    z-index: 2;
    display: none;
}

.backwelle_divider-img .backwelle_divider-img_wrap img,
.backwelle_divider-img2 .backwelle_divider-img_wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.backwelle_divider_img2 {
    -webkit-box-flex: 0;
    flex: 0 1 50%;
    text-align: right;
    position: relative;
}

.backwelle_divider-img2 .backwelle_divider-img_wrap {
    position: relative;
}

.backwelle_divider__decor {
    position: absolute;
    top: 15.21739vh;
    width: 37.80488vw;
    left: 42.31707vw;
    margin: 0 0 0 -1%;
}

.backwelle_last_wrapper {
    display: flex;
    position: relative;
}

.backwelle_last_img {
    -webkit-box-flex: 0;
    flex: 0 1 50%;
}

.backwelle_last_img div {
    position: relative;
    z-index: 2;
    height: 100%;
}

.backwelle_last_content {
    -webkit-box-flex: 0;
    flex: 0 1 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: right;
}

.backwelle_last_content-text {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    /* display: flex;
    align-items: center; */
    padding: 50px 9.02439vw 50px 0;
    line-height: 1;
    overflow: hidden;
}

.backwelle_last_content-text h2 {
    font-size: calc(20px + 70*((100vw - 320px) / 3780));
    letter-spacing: .78px;
    margin: 0 0 1.05556em;
    position: relative;
}

.backwelle_last_content-text h2::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 100%;
    background-color: #000;
    height: .12195vw;
    min-height: 1px;
    margin: 0 0 0 3.41463vw;
}

.backwelle_last_content-text p {
    font-size: calc(3px + 40*((100vw - 320px) / 3780));
    line-height: 176.74419%;
    margin: 0;
    font-weight: 600;
}

.backwelle_last_content-img {
    position: relative;
}

.backwelle_last_content-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.backwelle__logo {
    position: absolute;
    /* position: fixed; */
    bottom: 0;
    background-color: #fff;
    width: 23.65854vw;
    left: 7.68293vw;
    border-radius: 12.19512vw 12.19512vw 0 0;
    padding: 3.17073vw 3.82927vw;
    z-index: 20;
    transition: all 1.5s ease 0s;
}

.sawa__hero {
    position: relative;
}

.sawa__hero img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover
}

.sawa-logo {
    transform: translate(0, 100%);
    opacity: 0;
    position: absolute;
    bottom: 0;
    background-color: #fff;
    width: 18.04878vw;
    left: 7.68293vw;
    z-index: 2;
    padding: 1.95122vw 2.43902vw;
    z-index: 20;
    transition: all 1.5s ease 0s;
    transform: translate(0, 58%);
    opacity: 1
}

.sawa-logo-img {
    margin: 0 auto;
    width: 9.7561vw;
}

.sawa-logo-color {
    display: flex;
    padding: 1.82927vw 0 0;
    margin: 0 -1.21951vw 3.65854vw;
}

.sawa-logo-color div {
    flex: 0 1 50%;
    padding: 0 1.21951vw;
}

.sawa-logo__font h2 {
    text-transform: uppercase;
    margin: 0 0 1.53846em;
    font-size: calc(6px + 20*((100vw - 320px) / 3780));
    letter-spacing: .03415vw;
    font-weight: 400;
}

.sawa-logo__font p {
    letter-spacing: .0439vw;
    line-height: 169.23077%;
    font-size: calc(6px + 20*((100vw - 320px) / 3780));
    margin: 0;
}

.sawa__hero-cta {
    overflow: hidden;
}

.sawa_hero-cta-img {
    position: relative;
    -webkit-box-flex: 0;
    flex: 0 0 67.56098vw;
}

.sawa_hero-cta-img img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.sawa_hero-cta-content {
    align-self: center;
    position: relative;
}

.sawa_hero-cta-content::after {
    transform: translate(0%, 50%);
}

.sawa_hero-cta-content__box {
    z-index: 2;
    overflow: hidden;
    padding: 50px 5.73171vw 50px 7.56098vw;
    position: relative;
    background-image: linear-gradient(to top, #4e2714 0%, #121212 100%);
    color: #fff;
    font-weight: 600 !important;
}

.sawa_hero-cta-content__box h2 {
    letter-spacing: .78px;
    margin: 0 0 1.05556em;
    position: relative;
    font-weight: 600 !important;
    line-height: 1;
    font-size: calc(13px + 70*((100vw - 320px) / 3780));
}

.sawa_hero-cta-content__box h2::before {
    content: "";
    position: absolute;
    top: 25%;
    left: 0;
    width: 100%;
    background-color: #fff;
    height: .12195vw;
    min-height: 1px;
    margin: 0 0 0 -3.41463vw;
    transform: translate(-100%, -50%);
}

.sawa_hero-cta-content__box p {
    margin: 0;
    font-size: calc(3px + 40*((100vw - 320px) / 3780));
    line-height: 176.74419%
}

.sawa-cta-text-content {
    z-index: 2;
    font-weight: 900;
    font-size: calc(20px + 610*((100vw - 320px) / 3780));
    padding: 30px 0;
    text-align: center;
    line-height: 1;
}

.sawa-cta-image {
    padding: 11.95122vw 0;
    width: 65.29268vw;
    margin: 0 auto;
}

.sawa-cta-text-bg {
    position: relative;
    -webkit-box-flex: 0;
    flex: 0 0 67.56098vw;
}

.sawa-cta-text-bg img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.sawa-img-wrapper {
    overflow: hidden;
}

.sawa-img-wrapper-1 {
    -webkit-box-flex: 0;
    flex: 0 0 67.56098vw;
    position: relative;
}

.sawa-img-wrapper-2 {
    -webkit-box-flex: 0;
    flex: 0 0 42.19512vw;
    position: relative;
}

.sawa-img-wrapper img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
}

.sawa__hero-cta1 {
    display: flex;
    overflow: hidden;
}

.sawa_hero-cta-content1 {
    align-self: center;
    position: relative;
}

.sawa_hero-cta-content__box1 {
    z-index: 2;
    overflow: hidden;
    padding: 50px 5.73171vw 50px 7.56098vw;
    position: relative;
    background-image: linear-gradient(to top, #4e2714 0%, #121212 100%);
    color: #fff;
    font-weight: 600;
}

.sawa__wrapper_images {
    position: relative;
    z-index: 3;
}

.sawa__wrapper_images-block {
    display: flex;
}

.sawa-wrapper__image {
    position: relative;
    flex: 0 1 25%;
    background-image: linear-gradient(to bottom, #1a1615 90%, rgba(16, 16, 18, .02) 150%);
}

.sawa-wrapper__image:last-child {
    background: 0 0;
}

.sawa__showcase {
    overflow: hidden;
}

.sawa__showcase-block_img {
    -webkit-box-flex: 0;
    flex: 0 0 75vw;
    position: relative;
    z-index: 2;
}

.sawa__showcase-block_text {
    align-self: center;
}

.sawa__showcase-block_text .decor-img {
    background: url('https://stanbranding.com/wp-content/themes/stanbranding/img/cases/sawa/block-2/pattern.svg') 0 0 no-repeat;
    width: 76.21951vw;
    height: 12.78049vw;
}

.sawa_hero-cta-img1 {
    -webkit-box-flex: 0;
    flex: 0 0 67.56098vw;
    position: relative;
}

.sawa_hero-cta-img1 img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

/* Turbane Case */

.turbane_hero {
    overflow: hidden;
    position: relative;
}

.turbane_hero_wrapper {
    display: flex;
    align-items: center;
}

.turbane_hero_wrapper .container {
    z-index: 5;
}

.turbane_hero_wrapper-logo {
    width: 17.68293vw;
}

.turbane_hero_wrapper-bg {
    transition: all 1s ease 0s;
    top: 0;
    left: 0;
    position: relative;
    z-index: 2;
    text-align: center;
}

.turbane_hero_wrapper-bg img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.turbane_cta {
    overflow: hidden;
    position: relative;
    z-index: 2;
    padding: 6.09756vw 0 0;
}

.turbane_cta-content h2 {
    display: inline-block;
    text-transform: uppercase;
    font-weight: 600;
    margin: 0 0 1.05556em;
    letter-spacing: .04311em;
    font-size: calc(19px + 65*((100vw - 320px) / 3780));
    transition: all .3s ease 0s;
    position: relative;
}

.turbane_cta-content .text {
    position: relative;
    font-weight: 600;
    line-height: calc(75 / 42);
    font-size: calc(14px + 28*((100vw - 320px) / 3780));
}

.turbane_cta_pack {
    overflow: hidden;
    text-align: center;
    position: relative;
    padding: 50px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.turbane_cta_pack1 {
    background-color: #e9e9f4;
}

.turbane_cta_pack2 {
    background-color: #f2dae8;
}

.turbane_cta_pack3 {
    background-color: #f9d3d3;
}

.turbane_cta_pack-body {
    position: relative;
}

.turbane_cta_pack-bg {
    position: relative;
    z-index: 2;
}

.turbane_cta_pack-item {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.turbane_wrapper {
    overflow: hidden;
}

.turbane_wrapper-content {
    flex: 1 1 auto;
}

.turbane_wrapper-block {
    display: flex;
    align-items: center;
    padding: 50px 6.09756vw 50px 9.02439vw;
}

.turbane_wrapper-block h2 {
    font-size: calc(20px + 70*((100vw - 320px) / 3780));
    letter-spacing: .78px;
    margin: 0 0 1.05556em;
    position: relative;
    font-weight: 600;
}

.turbane_wrapper-block h2::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    background-color: #000;
    height: .12195vw;
    min-height: 1px;
    margin: 0 0 0 -3.41463vw;
    transform: translate(-100%, -50%);
}

.turbane_wrapper-block p {
    line-height: 176.74419%;
    font-size: calc(3px + 40*((100vw - 320px) / 3780));
    font-weight: 600;
}

.turbane_wrapper-image {
    flex: 0 0 57.68293vw;
}

.turbane_wrapper-image-item {
    position: relative;
}

.turbane_wrapper-image-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.turbane_images-cta {
    overflow: hidden;
    background-color: #fff;
    position: relative;
    z-index: 2;
}

.turbane_images-cta-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3.65854vw 0 0;
}

.turbane_images-cta-wrapper-images {
    display: flex;
    transform: translate(0, 5%);
}

.turbane_images-block {
    position: relative;
}

.turbane_images-block:nth-child(1) {
    transform: translate(50%, 0);
    z-index: 3;
}

.turbane_images-block:nth-child(2) {
    transform: translate(0, 0);
    z-index: 2;
}

.turbane_images-block:nth-child(3) {
    transform: translate(-55%, -15%) rotate(0deg);
}

.turbane_last-wrapper {
    background-color: #fff;
    position: relative;
    z-index: 2;
}

/* Morozoff Page */

.morozoff_hero video {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.morozoff_img {
    padding: calc(125 / 4100* 100vw) calc(141 / 4100* 100vw) calc(131 / 4100* 100vw) calc(137 / 4100* 100vw);
}

.morozoff_about {
    padding: calc(322 / 4100* 100vw) 0 calc(363 / 4100* 100vw);
}

.morozoff_about_content {
    width: calc(2786 / 4100* 100vw);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-bottom: calc(256 / 4100* 100vw);
}

.morozoff_about_content img {
    width: calc(857 / 4100* 100vw);
    height: calc(265 / 4100* 100vw);
}

.morozoff_about_content .text {
    font-size: calc(42 / 4100* 100vw);
    color: #29272a;
    font-weight: 600;
    line-height: 1.786;
    width: calc(1794 / 4100* 100vw);
    text-align: justify;
}

.morozoff_about_wrapper {
    margin: 0 auto;
    width: calc(2784 / 4100* 100vw);
    height: calc(1834 / 4100* 100vw);
    background-color: #1b3139;
    position: relative;
}

.morozoff_about_wrapper h2 {
    font-size: calc(42 / 4100* 100vw);
    color: #29272a;
    text-transform: uppercase;
    line-height: .86;
    position: absolute;
    left: calc(-144 / 4100* 100vw);
    top: 50%;
    transform: translateX(-50%) rotate(-90deg);
    font-weight: 500;
    letter-spacing: .4em;
    margin: 0;
}

.morozoff_about_wrapper picture img {
    width: 100%;
}

.morozoff_about_wrapper p {
    font-size: calc(42 / 4100* 100vw);
    color: #29272a;
    text-transform: uppercase;
    line-height: .86;
    position: absolute;
    right: calc(-168 / 4100* 100vw);
    top: 0;
    font-weight: 500;
    letter-spacing: .4em;
}

.morozoff_about_logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: calc(236 / 4100* 100vw) calc(944 / 4100* 100vw) calc(272 / 4100* 100vw) calc(323 / 4100* 100vw);
}

.morozoff_about_logo .logo-wrapper {
    display: flex;
}

.morozoff_about_logo .logo-wrapper:nth-child(1) {
    margin-bottom: calc(248 / 4100* 100vw);
}

.morozoff_about_logo .logo-wrapper:nth-child(2) {
    margin-bottom: calc(252 / 4100* 100vw);
}

.morozoff_about_logo .logo-wrapper:nth-child(1) img:nth-child(1) {
    width: calc(594 / 4100* 100vw);
    height: calc(261 / 4100* 100vw);
    margin-right: calc(331 / 4100* 100vw);
    margin-top: calc(130 / 4100* 100vw);
}

.morozoff_about_logo .logo-wrapper:nth-child(1) img:nth-child(2) {
    width: calc(588 / 4100* 100vw);
    height: calc(323 / 4100* 100vw);
}

.morozoff_about_logo .logo-wrapper:nth-child(2) img:nth-child(1) {
    width: calc(593 / 4100* 100vw);
    height: calc(237 / 4100* 100vw);
    margin-right: calc(331 / 4100* 100vw)
}

.morozoff_about_logo .logo-wrapper:nth-child(2) img:nth-child(2) {
    margin-top: calc(10 / 4100* 100vw);
    width: calc(587 / 4100* 100vw);
    height: calc(193 / 4100* 100vw);
}

.morozoff_about_logo .logo-wrapper:nth-child(3) img:nth-child(1) {
    width: calc(555 / 4100* 100vw);
    height: calc(198 / 4100* 100vw);
    margin-right: calc(345 / 4100* 100vw);
}

.morozoff_about_logo .logo-wrapper:nth-child(3) img:nth-child(2) {
    width: calc(598 / 4100* 100vw);
    height: calc(122 / 4100* 100vw);
    margin-top: calc(57 / 4100* 100vw);
}

.morozoff_showcase {
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(118 / 4100* 100vw);
    position: relative;
}

.morozoff_showcase h2 {
    font-size: calc(42 / 4100* 100vw);
    margin: 0;
    color: #29272a;
    text-transform: uppercase;
    line-height: .86;
    position: absolute;
    left: calc(368 / 4100* 100vw);
    bottom: 0;
    font-weight: 500;
    letter-spacing: .4em;
}

.morozoff_showcase p {
    font-size: calc(42 / 4100* 100vw);
    color: #29272a;
    text-transform: uppercase;
    line-height: .86;
    position: absolute;
    left: calc(1588 / 4100* 100vw);
    bottom: 0;
    font-weight: 500;
    letter-spacing: .4em;
    margin: 0;
}

.morozoff_showcase_col {
    width: calc(2000 / 4100* 100vw);
}

.morozoff_showcase_col video {
    width: calc(2000 / 4100* 100vw);
    height: calc(627 / 4100* 100vw);
    object-fit: cover;
    margin-bottom: calc(100 / 4100* 100vw);
}

.morozoff_showcase_col picture+picture img {
    margin-top: calc(100 / 4100* 100vw);
}

.morozoff_cta_video video,
.morozoff_cta_video img {
    width: 100%;
    height: calc(2300 / 4100* 100vw);
    object-fit: cover;
}

.morozoff_cta {
    position: relative;
    padding-right: calc(104 / 4100* 100vw);
    background-color: #1b1c1f;
}

.morozoff_cta h2 {
    font-size: calc(42 / 4100* 100vw);
    color: #fff;
    text-transform: uppercase;
    line-height: .86;
    position: absolute;
    right: calc(13 / 4100* 100vw);
    top: calc(1463 / 4100* 100vw);
    transform: rotate(90deg) translateX(50%);
    font-weight: 500;
    letter-spacing: calc(18 / 4100* 100vw);
    margin: 0;
}

.morozoff_cta p {
    font-size: calc(42 / 4100* 100vw);
    color: #fff;
    text-transform: uppercase;
    line-height: .86;
    position: absolute;
    right: calc(170 / 4100* 100vw);
    top: calc(380 / 4100* 100vw);
    font-weight: 500;
    letter-spacing: calc(18 / 4100* 100vw);
    margin: 0;
}

.morozoff_cta_wrapper-img {
    display: flex;
    justify-content: space-between;
}

.morozoff_cta_wrapper-img picture:first-child {
    width: calc(1738 / 4100* 100vw);
}

.morozoff_cta_wrapper-img picture:last-child {
    width: calc(1756 / 4100* 100vw);
}

.morozoff_cta_wrapper-img picture:last-child img {
    margin-top: calc(379 / 4100* 100vw);
}

.morozoff__image-section {
    padding: calc(146 / 4100* 100vw) calc(141 / 4100* 100vw) calc(149 / 4100* 100vw) calc(137 / 4100* 100vw);
}

.morozoff__image {
    display: flex;
    justify-content: space-between;
}

.morozoff__image picture:first-child img {
    width: calc(2454 / 4100* 100vw);
}

.morozoff__image picture:last-child img {
    width: calc(1222/4100 * 100vw);
}

.morozoff_video_wrap {
    position: relative;
}

.morozoff_video_wrap h2 {
    font-size: calc(42 / 4100* 100vw);
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    line-height: .86;
    position: absolute;
    left: calc(192 / 4100* 100vw);
    bottom: calc(176 / 4100* 100vw);
    font-weight: 500;
    letter-spacing: calc(17 / 4100* 100vw);
}

.morozoff_video_wrap p {
    font-size: calc(42 / 4100* 100vw);
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    line-height: .86;
    position: absolute;
    left: calc(1271 / 4100* 100vw);
    bottom: calc(176 / 4100* 100vw);
    font-weight: 500;
    letter-spacing: calc(17 / 4100* 100vw);
}

.morozoff_video_wrap video,
.morozoff_video_wrap img {
    width: 100%;
    height: calc(2300 / 4100* 100vw);
    object-fit: cover;
}

/* !Cases Page */


/* INNER PAGES */

/* Branding Page */

.inner-page {
    padding: 5.2439vw 2.02439vw 0;
    background-color: #fff;
    line-height: 1;
}

.page-header h1 {
    letter-spacing: 8.27px;
    font-size: calc(18px + 18*((100vw - 320px) / 3780));
    line-height: 138.88889%;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
}

.branding_wrap {
    padding: 3.41463vw 0 0;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1.04878vw;
}

.branding_col {
    flex: 0 1 33.333%;
    padding: 0 1.04878vw;
}

.branding_item {
    overflow: hidden;
    position: relative;
    display: block;
    padding: 0 0 1.95122vw;
}

.branding_image {
    padding: 0 0 58.8%;
    position: relative;
    transition: all .3s ease 0s;
}

.branding_image img,
.branding_video video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.branding_video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all .3s ease 0s;
    opacity: 0;
    padding: 0 0 58.8%;
}

.branding_view {
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 2;
    text-align: center;
    font-size: calc(14px + 22*((100vw - 320px) / 3780));
    letter-spacing: 21.6px;
    color: #29282b;
    text-transform: uppercase;
    font-weight: 600;
}

.branding_view::before {
    content: "";
    background-color: #fff;
    position: absolute;
    width: 100%;
    height: 0%;
    bottom: 0;
    left: 0;
    transition: all .8s ease 0s;
}

.branding_view span {
    opacity: 0;
    transition: all .8s ease 0s;
    display: block;
    visibility: hidden;
    padding: 1.58537vw 20px;
    transform: translate(0, 100%);
}

.inner_cta_contact {
    margin: 0 auto calc(2.43902vw + 20px);
}

.inner_tag {
    padding: 0 0 2.43902vw;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 -20px;
}

.inner_tag a {
    margin: 0 20px 20px;
    color: #bcbcbc;
    font-weight: 600;
    font-size: calc(12px + 24*((100vw - 320px) / 3780));
    line-height: 200%;
    transition: all .3s ease 0s;
}

/* Branding Inner Pages  */

.branding_hero__section {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.branding_hero__bg {
    position: absolute;
    inset: 0;
}

.branding_logo__hero {
    width: calc(1321 / 4100* 100vw);
    height: calc(623 / 4100* 100vw);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.branding_hero__down {
    position: absolute;
    bottom: 5vh;
    display: block;
    left: 50%;
    z-index: 50;
    transform: translate(-50%, 0);
    width: 2.92683vw;
    height: 2.92683vw;
    border-radius: 50%;
}

.branding_hero__down_arrow {
    position: absolute;
    inset: 0;
}

.branding_hero__down_arrow::before {
    content: "";
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: .5;
    border-radius: 50%;
    position: absolute;
    animation: zoomIn 2s ease-in-out infinite;
}


@keyframes zoomIn {
    0% {
        opacity: 0
    }

    50% {
        opacity: .5
    }

    100% {
        opacity: 0;
        transform: scale3d(1.4, 1.4, 1.4)
    }
}

.branding_hero__down_arrow::after {
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    background-color: #fff;
}

.branding_hero__down_arrow.dark::before,
.branding_hero__down_arrow.dark::after {
    background-color: #29272a;
}

.branding_hero__down_arrow-icon {
    z-index: 3;
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 55%;
    width: .73171vw;
    height: 0;
    transform-origin: 50% 50%;
    transform: translate3d(-50%, -50%, 0);
}

.branding_hero__down_arrow-icon:first-child {
    animation: arrow-movement 2s ease-in-out infinite;
}

.branding_hero__down_arrow-icon:last-child {
    animation: arrow-movement 2s 1s ease-in-out infinite;
}

@keyframes arrow-movement {
    0% {
        opacity: 0;
        top: 15%
    }

    70% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.branding_hero__down_arrow-icon::before {
    background: 0 0;
    content: "";
    display: block;
    min-height: 3px;
    height: .85366vw;
    position: absolute;
    top: 0;
    left: 0;
    width: .85366vw;
    border-style: solid;
    border-color: transparent #29272a #29272a transparent;
    border-width: .18vw;
    transform: rotate(45deg) translate(-20%, -17%);
    transform-origin: center center;
}

.branding_hero__down_arrow.dark .branding_hero__down_arrow-icon::before {
    border-color: transparent #fff #fff transparent;
}

.remake_body__section {
    position: relative;
}

.remake_body__section h2 {
    font-size: calc(65 / 4100* 100vw);
    color: #1c1c1b;
    font-weight: 600;
    text-transform: uppercase;
    line-height: .923;
    margin-bottom: calc(128 / 4100* 100vw);
    text-align: center;
}

.remake_body__section p {
    font-size: calc(42 / 4100* 100vw);
    color: #282626;
    font-weight: 600;
    line-height: 1.714;
    text-align: center;
}

.remake_body__section h3 {
    font-size: calc(45 / 4100* 100vw);
    color: #1c1c1b;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
}

.remake_mission {
    position: absolute;
    top: calc(242 / 4100* 100vw);
    right: calc(370 / 4100* 100vw);
    width: calc(1097 / 4100* 100vw);
}

.remake_mission h3 {
    position: absolute;
    left: calc(-2440 / 4100* 100vw);
    top: 0;
}

.remake_story {
    position: absolute;
    top: calc(2484 / 4100* 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: calc(2600 / 4100* 100vw);
}

.remake_identity {
    position: absolute;
    top: calc(4660 / 4100* 100vw);
    left: calc(196 / 4100* 100vw);
    width: calc(410 / 4100* 100vw);
}

.remake_identity h3 {
    color: #eaded1;
}

.remake_values {
    position: absolute;
    top: calc(7189 / 4100* 100vw);
    left: calc(1224 / 4100* 100vw);
    width: calc(544 / 4100* 100vw);
}

.remake_values h3 {
    margin-top: calc(1647 / 4100* 100vw);
}

.remake_values h3.light {
    margin-top: calc(72 / 4100* 100vw);
    transform: rotate(90deg);
    left: calc(2402 / 4100* 100vw);
    position: absolute;
    color: #e5d9cc;
}

.bup_bg .branding_logo__hero {
    width: calc(917 / 4100* 100vw);
    height: calc(1103 / 4100* 100vw);
}

.bup_inner_page h2 {
    font-size: calc(90 / 4100* 100vw);
    color: #333;
    font-weight: 600;
    text-transform: uppercase;
    line-height: .95;
    margin-bottom: calc(107 / 4100* 100vw);
}

.bup_inner_page p {
    font-size: calc(42 / 4100* 100vw);
    color: #29272a;
    font-weight: 700;
    line-height: 1.785;
}

.bup_story {
    padding: calc(277 / 4100* 100vw) 0 calc(209 / 4100* 100vw);
    margin: 0 auto;
    position: relative;
    width: calc(2850 / 4100* 100vw);
}

.bup_story p {
    padding-left: calc(107 / 4100* 100vw);
    margin-left: calc(162 / 4100* 100vw);
    position: relative;
    margin-bottom: 0;
}

.bup_story p::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: calc(6 / 4100* 100vw);
    height: 100%;
    background-color: #29272a;
}

.bup_list {
    display: flex;
}

.bup_list .bup_column:first-child {
    width: calc(2273 / 4100* 100vw);
}

.bup_list .bup_column:last-child {
    width: calc(1827/4100 * 100vw);
}

.bup_list .bup_column .bup_item {
    position: relative;
}

.bup_list .bup_column:first-child .bup_item:nth-child(1) h2 {
    position: absolute;
    transform: rotate(270deg);
    top: calc(604 / 4100* 100vw);
    left: 0;
}

.bup_list .bup_column:first-child .bup_item:nth-child(1) .item-img {
    position: absolute;
    width: calc(166 / 4100* 100vw);
    height: calc(557 / 4100* 100vw);
    top: 50%;
    left: calc(529 / 4100* 100vw);
    transform: translateY(-50%);
}

.bup_list .bup_column:first-child .bup_item:nth-child(2) {
    background-color: #fff;
    height: calc(1889 / 4100* 100vw);
}

.bup_list .bup_column:first-child .bup_item:nth-child(2) h2 {
    margin-bottom: 0;
    position: absolute;
    right: calc(205 / 4100* 100vw);
    bottom: calc(136 / 4100* 100vw);
}

.bup_list .bup_column:first-child .bup_item:nth-child(2) .item-img {
    width: calc(1145 / 4100* 100vw);
    position: absolute;
    left: calc(536 / 4100* 100vw);
    top: calc(366 / 4100* 100vw);
    height: calc(793 / 4100* 100vw);
}

.bup_list .bup_column:first-child .bup_item:nth-child(3) {
    height: calc(1451/4100 * 100vw);
}

.bup_list .bup_column:first-child .bup_item:nth-child(3) .abs-image {
    position: absolute;
    left: 0;
    top: calc(-306 / 4100* 100vw);
    width: 100%;
    height: calc(1791 / 4100* 100vw);
    background: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/b-up/img/Image5.png') center center / contain no-repeat;
}

.bup_list .bup_column:first-child .bup_item:nth-child(3) h2 {
    position: absolute;
    right: calc(-34 / 4100* 100vw);
    bottom: calc(257 / 4100* 100vw);
    transform: rotate(90deg);
    color: #fff;
}

.bup_list .bup_column:first-child .bup_item:nth-child(4) {
    height: calc(1593/4100 * 100vw);
}

.bup_list .bup_column:first-child .bup_item:nth-child(4) h2 {
    position: absolute;
    right: calc(205 / 4100* 100vw);
    top: calc(205 / 4100* 100vw);
}

.bup_list .bup_column:first-child .bup_item:nth-child(4) .flag-image {
    background: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/b-up/img/Image7.png') center center / contain no-repeat;
    width: calc(1644 / 4100* 100vw);
    height: calc(1815 / 4100* 100vw);
    position: absolute;
    bottom: calc(-12 / 4100* 100vw);
    right: 0;
}

.bup_list .bup_column:last-child .bup_item:nth-child(1) .vertical-img {
    position: absolute;
    left: calc(331 / 4100* 100vw);
    top: calc(458 / 4100* 100vw);
    width: calc(325 / 4100* 100vw);
    height: calc(391 / 4100* 100vw);
}

.bup_list .bup_column:last-child .bup_item:nth-child(1) .horizontal-img {
    position: absolute;
    right: calc(286 / 4100* 100vw);
    top: calc(560 / 4100* 100vw);
    width: calc(624 / 4100* 100vw);
    height: calc(187 / 4100* 100vw);
}

.bup_list .bup_column:last-child .bup_item:nth-child(2) {
    height: calc(1889 / 4100* 100vw);
    padding-top: calc(166 / 4100* 100vw);
}

.bup_list .bup_column:last-child .bup_item:nth-child(2) p {
    margin-bottom: calc(186 / 4100* 100vw);
}

.bup_list .bup_column:last-child .bup_item:nth-child(3) h2 {
    position: absolute;
    top: calc(133 / 4100* 100vw);
    left: calc(133 / 4100* 100vw);
}

.bup_list .bup_column:last-child .bup_item:nth-child(4) {
    height: calc(1593 / 4100* 100vw);
}

.bup_list .bup_column:last-child .bup_item:nth-child(4) h2 {
    position: absolute;
    color: #b3935d;
    transform: rotate(90deg);
    bottom: calc(265 / 4100* 100vw);
    left: calc(-105 / 4100* 100vw);
}

.bup_list .bup_column:last-child .bup_item:nth-child(4) .abs-image {
    position: absolute;
    left: 0;
    top: calc(-61 / 4100* 100vw);
    width: 100%;
    height: calc(1655 / 4100* 100vw);
    background: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/b-up/img/Image8.png') center center / contain no-repeat;
}

.bup_brand-identity {
    position: relative;
}

.bup_brand-identity h2 {
    position: absolute;
    top: calc(177 / 4100* 100vw);
    left: calc(161 / 4100* 100vw);
}

.immo_body__section {
    position: relative;
}

.immo_body__section h2 {
    font-size: calc(117 / 4100* 100vw);
    color: #043434;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: calc(93 / 4100* 100vw);
}

.immo_body__section p {
    font-size: calc(48 / 4100* 100vw);
    color: #fff;
    font-weight: 600;
    line-height: calc(72 / 4100* 100vw);
    margin: 0;
}

.immo_story {
    position: absolute;
    top: calc(3629 / 4100* 100vw);
    left: calc(380 / 4100* 100vw);
    width: calc(1746 / 4100* 100vw);
}

.immo_typography {
    position: absolute;
    top: calc(4464 / 4100* 100vw);
    left: calc(380 / 4100* 100vw);
}

.immo_mission {
    position: absolute;
    top: calc(5520 / 4100* 100vw);
    right: calc(532 / 4100* 100vw);
    width: calc(873 / 4100* 100vw);
}

.immo_identity {
    position: absolute;
    top: calc(7917 / 4100* 100vw);
    left: calc(370 / 4100* 100vw);
    width: calc(1050 / 4100* 100vw);
}

.immo_body__section .branding_hero__section {
    position: absolute;
    top: 0;
    width: 100%;
}

.sport_body__section {
    position: relative;
}

.sport_body__section h2 {
    font-size: calc(2.19512vw);
    color: rgb(0, 0, 0);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 0.95;
    text-align: left;
    margin-bottom: calc(2.56098vw);
}

.sport_body__section p {
    font-size: calc(0.97561vw);
    color: rgb(0, 0, 0);
    font-weight: 600;
    line-height: 1.873;
    text-align: left;
}

.sport_story {
    position: absolute;
    top: calc(7.07317vw);
    left: 50%;
    transform: translateX(-50%);
    width: calc(62.8537vw);
}

.sport_mission {
    position: absolute;
    top: calc(50.3902vw);
    right: calc(12.1951vw);
    width: calc(30.6585vw);
}

.sport_identity {
    position: absolute;
    top: calc(113.341vw);
    left: calc(9.5122vw);
    width: calc(30.6585vw);
}

.sport_value {
    position: absolute;
    top: calc(185.366vw);
    right: calc(10.9756vw);
    width: calc(39.0244vw);
}

.beer_hero_sect {
    position: absolute;
    top: 0;
    width: 100%;
}

.beer_body__section {
    position: relative;
}

.beer_body__section .branding_hero__section {
    min-height: auto;
}

.beer_body__section .branding_hero__bg {
    position: relative;
}

.beer_body__section .branding_logo__hero {
    position: absolute;
    top: 15.9%;
    left: 50%;
    transform: translate(-50%, 0);
    width: calc(906 / 4100* 100vw);
    height: calc(1387 / 4100* 100vw);
    object-fit: cover;
}

.beer_body__section .mission-content {
    max-width: calc(3580 / 4100* 100vw);
    width: 100%;
    margin: 0 auto;
}

.beer_body__section h2 {
    font-size: calc(2.43902vw);
    color: rgb(37, 33, 33);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
}

.beer_body__section p {
    font-size: calc(1.09756vw);
    color: rgb(37, 33, 33);
    font-weight: 700;
    line-height: 1.6;
    text-align: left;
    margin-bottom: 0;
}

.beer_mission {
    position: relative;
}

.beer_mission picture {
    z-index: 1;
    max-width: calc(3353 / 4100* 100vw);
    position: absolute;
    margin-top: calc(-728 / 4100* 100vw);
    right: 0;
}

.beer_mission .content {
    margin-top: calc(-80 / 4100* 100vw);
    max-width: calc(950 / 4100* 100vw);
    margin-bottom: calc(295 / 4100* 100vw);
    width: 100%;
}

.beer_mission h2 {
    margin-bottom: calc(103 / 4100* 100vw);
}

.beer_brand {
    position: relative;
    padding: calc(1015 / 4100* 100vw) 0 calc(230 / 4100* 100vw);
    background-image: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/beer/img/Image3.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.beer_brand h2 {
    color: #d7d4cd;
}

.beer_brand .mission-content {
    padding-left: calc(300 / 4100* 100vw);
    padding-right: calc(200 / 4100* 100vw);
}

.beer_brand-elements {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(138 / 4100* 100vw) calc(100 / 4100* 100vw) calc(280 / 4100* 100vw) 0;
}

.beer_brand-elements .beer_item {
    width: 100%;
}

.beer_brand-elements .beer_item:nth-child(1) {
    max-width: calc(581 / 4100* 100vw);
}

.beer_brand-elements .beer_item:nth-child(2) {
    max-width: calc(619/4100 * 100vw);
}

.beer_brand-elements .beer_item:nth-child(3) {
    max-width: calc(606/4100 * 100vw);
}

.beer_brand-elements .list-color {
    display: flex;
    justify-content: space-between;
    margin-bottom: calc(173 / 4100* 100vw);
}

.beer_brand-elements .list-color div {
    width: calc(144 / 4100* 100vw);
    height: calc(144 / 4100* 100vw);
    position: relative;
}

.beer_brand-elements .list-color div::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(-1.41463vw);
    font-size: calc(0.731707vw);
    color: rgb(215, 212, 205);
    font-weight: 700;
    line-height: 1.786;
}

.beer_brand-elements .list-color div.dark {
    background-color: #252121;
}

.beer_brand-elements .list-color div.dark:after {
    content: '#252121';
}

.beer_brand-elements .list-color div.blue {
    background-color: #4167a4;
}

.beer_brand-elements .list-color div.blue:after {
    content: '#4167a4';
}

.beer_brand-elements .list-color div.white {
    background-color: #d7d4cd;
}

.beer_brand-elements .list-color div.white:after {
    content: '#d7d4cd';
}

.beer_brand-story {
    display: flex;
    justify-content: space-between;
}

.beer_brand-story .content {
    max-width: calc(1856 / 4100* 100vw);
}

.beer_brand-story h2 {
    margin-bottom: calc(100 / 4100* 100vw);
}

.beer_brand-story p {
    color: #d7d4cd;
}

.beer_brand-story .img picture {
    max-width: calc(814 / 4100* 100vw);
}

.beer_values {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.beer_values::before {
    content: '';
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(530 / 4100* 100vw);
    height: calc(530 / 4100* 100vw);
    background-color: #d7d4cd;
    border-radius: 50%;
}

.beer_values::after {
    content: '';
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: calc(478 / 4100* 100vw);
    height: calc(444 / 4100* 100vw);
    background-image: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/beer/img/Vectors/Logo5.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.beer_values_item {
    width: 50%;
    display: flex;
    align-items: center;
}

.beer_values_item:nth-last-child(2) {
    align-items: flex-start;
}

.beer_values_item:last-child {
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
}

.beer_values_item:last-child .content {
    padding: calc(252 / 4100* 100vw) 0 0 calc(300 / 4100* 100vw);
    max-width: calc(1650 / 4100* 100vw);
    width: 100%;
}

.beer_values_item:last-child .content h2 {
    margin-bottom: calc(100 / 4100* 100vw);
}

.beer_values_item:last-child .img {
    position: absolute;
    right: 0;
    top: calc(450 / 4100* 100vw);
    width: 86%;
}

.beer_bottom-content {
    display: flex;
    align-items: center;
    padding: calc(90 / 4100* 100vw) calc(80 / 4100* 100vw) 0 calc(100 / 4100* 100vw);
}

.beer_bottom-content .small-img {
    margin-left: calc(-270 / 4100* 100vw);
}

.yumeat_body__section {
    position: relative;
}

.yumeat_body__section h2 {
    color: #44382a;
    line-height: .95;
    font-size: calc(90 / 4100* 100vw);
    font-weight: 600;
    text-transform: uppercase;
    text-align: left;
    margin-bottom: calc(68 / 4100* 100vw);
}

.yumeat_body__section p {
    color: #44382a;
    line-height: 1.784;
    font-size: calc(42 / 4100* 100vw);
    font-weight: 600;
    text-align: justify;
    margin-bottom: 0;
}

.yumeat_story {
    position: absolute;
    top: calc(224 / 4100* 100vw);
    left: calc(939 / 4100* 100vw);
    width: calc(2736 / 4100* 100vw);
}

.yumeat_body__section .yumeat_story h2 {
    margin-bottom: calc(135 / 4100* 100vw);
}

.yumeat_identity {
    position: absolute;
    top: calc(2469 / 4100* 100vw);
    left: calc(939 / 4100* 100vw);
    width: calc(966 / 4100* 100vw);
}

.yumeat_values {
    position: absolute;
    top: calc(6540 / 4100* 100vw);
    left: calc(939 / 4100* 100vw);
    width: calc(961 / 4100* 100vw);
}

.yumeat_mission {
    position: absolute;
    top: calc(10916 / 4100* 100vw);
    left: calc(2696 / 4100* 100vw);
    width: calc(961 / 4100* 100vw);
}


.jfrealty_body__section {
    position: relative;
}

.jfrealty_body__section h2 {
    color: #cfdee5;
    line-height: .449;
    text-align: center;
    font-size: calc(72 / 4100* 100vw);
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
}

.jfrealty_body__section p {
    color: #1a2340;
    line-height: 1.905;
    font-size: calc(42 / 4100* 100vw);
    font-weight: 600;
    text-align: justify;
    margin-bottom: 0;
}

.jfrealty_mission {
    position: absolute;
    top: calc(390 / 4100* 100vw);
    left: calc(262 / 4100* 100vw);
    width: calc(1404 / 4100* 100vw);
}

.jfrealty_mission h2 {
    position: absolute;
    top: calc(310 / 4100* 100vw);
    left: calc(-280 / 4100* 100vw);
    transform: rotate(-90deg);
}

.jfrealty_mission p {
    transform: translateX(calc(180 / 4100* 100vw));
}

.jfrealty_story {
    position: absolute;
    top: calc(3242 / 4100* 100vw);
    right: calc(526 / 4100* 100vw);
    width: calc(1252 / 4100* 100vw);
}

.jfrealty_story h2 {
    position: absolute;
    top: calc(100 / 4100* 100vw);
    right: calc(-490 / 4100* 100vw);
    transform: rotate(90deg);
}

.jfrealty_safe {
    position: absolute;
    top: calc(4850 / 4100* 100vw);
    left: calc(513 / 4100* 100vw);
    width: calc(80 / 4100* 100vw);
}

.jfrealty_safe h2 {
    transform: rotate(-90deg);
}

.jfrealty_typography {
    position: absolute;
    top: calc(5860 / 4100* 100vw);
    left: calc(513 / 4100* 100vw);
    width: calc(80 / 4100* 100vw);
}

.jfrealty_typography h2 {
    transform: rotate(-90deg);
}

.jfrealty_identity {
    position: absolute;
    top: calc(6518 / 4100* 100vw);
    right: calc(270 / 4100* 100vw);
    width: calc(80 / 4100* 100vw);
}

.jfrealty_identity h2 {
    color: #fff;
    transform: rotate(90deg);
}

.jfrealty_values {
    position: absolute;
    top: calc(9260 / 4100* 100vw);
    left: calc(1567 / 4100* 100vw);
    width: calc(930 / 4100* 100vw);
}

.jfrealty_values h2 {
    text-align: left;
    line-height: 1;
    margin-bottom: calc(91 / 4100* 100vw);
}

/* Uphi */

.uphi_brand {
    padding-top: calc(8.2439vw);
    position: relative;
    z-index: 2;
}

.uphi_wrapper {
    width: calc(79.5122vw);
    margin: 0px auto;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.uphi_list {
    display: flex;
    justify-content: space-between;
    padding-bottom: calc(5.26829vw);
}

.uphi_list .uphi_item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.uphi_list .uphi_item:nth-child(1) img:first-child {
    width: calc(11.1463vw);
    height: calc(6.46341vw);
}

.uphi_list .uphi_item:nth-child(1) div img:first-child {
    width: calc(4.04878vw);
    height: calc(4.82927vw);
}

.uphi_list .uphi_item:nth-child(2) {
    width: calc(25.5854vw);
}

.uphi_list .uphi_item .meaning {
    width: calc(22.9512vw);
    height: calc(4.29268vw)
}

.uphi_body__section h2 {
    font-size: calc(1.7561vw);
    color: rgb(255, 222, 131);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.25;
    text-align: left;
    margin-bottom: calc(1.78049vw);
}

.uphi_body__section p {
    font-size: calc(1.07317vw);
    margin-bottom: 0;
    color: rgb(212, 212, 195);
    font-weight: 600;
    line-height: 2.045;
    text-align: justify;
}

.uphi_colors {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.uphi_colors .color {
    width: calc(10.2927vw);
    height: calc(3.92683vw);
}

.uphi_body__section h3 {
    font-size: calc(1.07317vw);
    color: rgb(212, 212, 195);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 2.045;
    text-align: left;
}

.uphi_body__section h4 {
    font-size: calc(0.97561vw);
    color: rgb(44, 96, 43);
    font-weight: 600;
    text-transform: uppercase;
    line-height: 2.232;
    text-align: left;
}

.uphi_brand_footer {
    position: relative;
    width: 100%;
    height: calc(14.2195vw);
}

.uphi_brand_footer picture img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

.uphi_brand_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    padding: 0px calc(9.07317vw);
}

.uphi_brand_content img {
    width: calc(8.02439vw);
    height: calc(4.63415vw);
    z-index: 1;
}

.uphi_brand_content h4 {
    transform: rotate(270deg);
    z-index: 1;
}

.uphi_identity {
    margin-top: calc(-2.73171vw);
    position: relative;
}

.uphi_identity h2 {
    height: calc(15.5854vw);
    transform: rotate(270deg);
    position: absolute;
    left: calc(4.2439vw);
    bottom: calc(4.36585vw);
    margin-bottom: 0px;
}

.uphi_mission {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin: calc(3.17073vw) 0px calc(3.39024vw);
}

.uphi_mission_content {
    width: calc(846 / 4100* 100vw);
    margin: calc(270 / 4100* 100vw) 0 0 calc(250 / 4100* 100vw);
}

.uphi_mission_content .small-img img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(1554 / 4100* 100vw);
    height: calc(1199 / 4100* 100vw);
}

.uphi_mission .big-img img {
    width: calc(2767 / 4100* 100vw);
    height: calc(2027 / 4100* 100vw);
}

.uphi_values {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.uphi_values .big-img img {
    width: calc(2416 / 4100* 100vw);
    height: calc(2306 / 4100* 100vw);
}

.uphi_values .small-img img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(1994 / 4100* 100vw);
    height: calc(1402 / 4100* 100vw);
}

.uphi_values_content {
    width: calc(954 / 4100* 100vw);
    margin: calc(214 / 4100* 100vw) calc(316 / 4100* 100vw) 0 calc(415 / 4100* 100vw);
}

/* Chocolate Page */
.chocolate_hero .branding_logo__hero {
    top: calc(678 / 4100* 100vw);
    left: calc(1348 / 4100* 100vw);
    transform: none;
    width: calc(1401 / 4100* 100vw);
    height: calc(939 / 4100* 100vw);
}

.chocolate_story {
    max-width: calc(3380 / 4100* 100vw);
    width: 100%;
    margin: 0 auto;
    padding-top: calc(195 / 4100* 100vw);
    padding-bottom: calc(329 / 4100* 100vw);
}

.chocolate_body__section h2 {
    color: #072e35;
    font-size: calc(48 / 4100* 100vw);
    font-weight: 700;
    line-height: 1.22;
    margin-bottom: calc(72 / 4100* 100vw);
    text-transform: uppercase;
}

.chocolate_body__section p {
    color: #072e35;
    font-size: calc(34 / 4100* 100vw);
    width: calc(1924 / 4100* 100vw);
    line-height: 2.05;
    font-weight: 700;
    margin: 0;
    text-align: justify;
    position: absolute;
    left: 0;
    z-index: 1;
}

.chocolate_story__images {
    position: relative;
}

.chocolate_story__images .top-block {
    height: calc(1983 / 4100* 100vw);
    position: relative;
}

.chocolate_story__images .top-block .left-image {
    position: absolute;
    bottom: 0;
    left: 0;
    height: calc(1548 / 4100* 100vw);
    width: calc(2097 / 4100* 100vw);
    background-color: #113239;
}

.chocolate_story__images .top-block .left-image::after {
    position: absolute;
    width: calc(2042 / 4100* 100vw);
    height: calc(1455 / 4100* 100vw);
    border: calc(3 / 4100* 100vw) solid #ddbf99;
    border-right: none;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    content: '';
}

.chocolate_story__images .top-block .left-image .logo {
    position: absolute;
}

.chocolate_story__images .top-block .left-image .logo-1 {
    width: calc(349 / 4100* 100vw);
    height: calc(341 / 4100* 100vw);
    left: calc(348 / 4100* 100vw);
    top: calc(284 / 4100* 100vw);
}

.chocolate_story__images .top-block .left-image .logo-2 {
    width: calc(630 / 4100* 100vw);
    height: calc(223 / 4100* 100vw);
    left: calc(996 / 4100* 100vw);
    top: calc(350 / 4100* 100vw);
}

.chocolate_story__images .top-block .left-image .logo-3 {
    width: calc(366 / 4100* 100vw);
    height: calc(180 / 4100* 100vw);
    left: calc(324 / 4100* 100vw);
    top: calc(987 / 4100* 100vw);
}

.chocolate_story__images .top-block .left-image .logo-4 {
    width: calc(705 / 4100* 100vw);
    height: calc(472 / 4100* 100vw);
    left: calc(942 / 4100* 100vw);
    top: calc(797 / 4100* 100vw);
}

.chocolate_story__images .top-block .right-image {
    width: calc(1283 / 4100* 100vw);
    height: calc(1983 / 4100* 100vw);
    position: absolute;
    bottom: 0;
    right: 0;
}

.chocolate_story__images .top-block .right-image::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(547 / 4100* 100vw);
    background-color: #865038;
}

.chocolate_story__images .top-block .right-image::after {
    content: '';
    position: absolute;
    bottom: calc(56 / 4100* 100vw);
    left: 0;
    width: 100%;
    height: calc(429 / 4100* 100vw);
    opacity: .3;
    background-image: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/chocolate/img/Vectors/Pattern.svg');
    background-position: calc(-74 / 4100* 100vw) center;
    background-size: cover;
    background-repeat: repeat;
}

.chocolate_story__images .top-block .right-image .original {
    height: calc(1443 / 4100* 100vw);
}

.chocolate_story__images .top-block .right-image .meaning {
    position: absolute;
    width: calc(469 / 4100* 100vw);
    height: calc(139 / 4100* 100vw);
    left: calc(397 / 4100* 100vw);
    top: calc(110 / 4100* 100vw);
}

.chocolate_story__images .top-block .right-image .logo {
    position: absolute;
    width: calc(939 / 4100* 100vw);
    height: calc(461 / 4100* 100vw);
    left: calc(178 / 4100* 100vw);
    top: calc(595 / 4100* 100vw);
}

.chocolate_story__images .bottom-block {
    position: relative;
    margin-top: calc(306 / 4100* 100vw);
}

.chocolate_story__images .bottom-block .color-list {
    width: calc(2087 / 4100* 100vw);
    display: flex;
}

.chocolate_story__images .bottom-block .color-list .item {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.chocolate_story__images .bottom-block .color-list .item:nth-child(1) {
    width: calc(729 / 4100* 100vw);
}

.chocolate_story__images .bottom-block .color-list .item .color {
    padding: calc(80 / 4100* 100vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.chocolate_story__images .bottom-block .color-list .item h3 {
    font-size: calc(45 / 4100* 100vw);
    font-weight: 600;
    line-height: 1.22;
    margin-bottom: calc(39 / 4100* 100vw);
    text-transform: uppercase;
    color: #fff;
}

.chocolate_story__images .bottom-block .color-list .item p {
    position: static;
    font-size: calc(30 / 4100* 100vw);
    font-weight: 300;
    line-height: 1.5;
    color: #fff;
}

.chocolate_story__images .bottom-block .color-list .item:nth-child(1) .color {
    height: calc(363 / 4100* 100vw);
    background-color: #113239;
}

.chocolate_story__images .bottom-block .color-list .item:nth-child(2) {
    width: calc(678 / 4100* 100vw);
    flex-direction: column-reverse;
}

.chocolate_story__images .bottom-block .color-list .item:nth-child(2) .color {
    background-color: #ddbf99;
}

.chocolate_story__images .bottom-block .color-list .item:nth-child(3) {
    width: calc(680 / 4100* 100vw);
}

.chocolate_story__images .bottom-block .color-list .item:nth-child(3) .color {
    background-color: #81503b;
}

.chocolate_story__images .bottom-block .text-content {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: calc(1120 / 4100* 100vw);
}

.chocolate_story__images .bottom-block .text-content p {
    width: 100%;
    position: static;
}

.chocolate_story__images .bottom-block .bottom-logo {
    width: calc(326 / 4100* 100vw);
    height: calc(319 / 4100* 100vw);
    position: absolute;
    right: 0;
    top: 0;
}

.chocolate_values {
    position: relative;
    margin-bottom: calc(170 / 4100* 100vw);
}

.chocolate_values .abs-image {
    position: absolute;
    width: calc(1656 / 4100* 100vw);
    height: calc(1215 / 4100* 100vw);
    right: 0;
    bottom: calc(243 / 4100* 100vw);
}

.chocolate_values .main-image {
    position: relative;
    width: calc(3600 / 4100* 100vw);
}

.chocolate_values .main-image .absolute-element {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    width: calc(428 / 4100* 100vw);
    height: calc(428 / 4100* 100vw);
    background: #eac9a0;
    border-radius: 50%;
}

.chocolate_values .main-image .absolute-element img {
    width: calc(319 / 4100* 100vw);
    height: calc(157 / 4100* 100vw);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.chocolate_values .main-image .abs-text {
    position: absolute;
    right: calc(185 / 4100* 100vw);
    top: calc(260 / 4100* 100vw);
    text-align: right;
}

.chocolate_values .main-image .abs-text h2 {
    color: #f7d4a7;
}

.chocolate_values .main-image .abs-text p {
    position: static;
    color: #f7d4a7;
    width: calc(801 / 4100* 100vw);
    text-align: right;
    font-weight: 600;
}

.chocolate_company {
    height: calc(2133 / 4100* 100vw);
    position: relative;
}

.chocolate_company .first-img {
    position: absolute;
    right: calc(2048 / 4100* 100vw);
    width: calc(1575 / 4100* 100vw);
    height: calc(1652 / 4100* 100vw);
}

.chocolate_company .first-img .logo {
    width: calc(502 / 4100* 100vw);
    height: calc(502 / 4100* 100vw);
    position: absolute;
    left: 50%;
    bottom: 0;
    background-color: #865038;
    transform: translate(-50%, 50%);
    border-radius: 50%;
}

.chocolate_company .first-img .logo img {
    width: calc(396 / 4100* 100vw);
    height: calc(387 / 4100* 100vw);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.chocolate_company .last-img {
    position: absolute;
    right: 0;
    top: 0;
    height: calc(2133 / 4100* 100vw);
    width: calc(2048 / 4100* 100vw);
}

.chocolate_company .last-img img {
    height: 100%;
}

.spice_body__section {
    position: relative;
}

.spice_body__section h2 {
    color: #fff;
    line-height: 1.5;
    font-size: calc(48 / 4100* 100vw);
    font-weight: 600;
    text-transform: uppercase;
    text-align: left;
    margin-bottom: calc(106 / 4100* 100vw);
}

.spice_body__section p {
    color: #fff;
    line-height: 1.905;
    font-size: calc(42 / 4100* 100vw);
    font-weight: 600;
    text-align: justify;
}

.spice_body__section .branding_hero__section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.spice_brand_background {
    position: absolute;
    top: calc(2363 / 4100* 100vw);
    left: calc(1150 / 4100* 100vw);
    width: calc(1805 / 4100* 100vw);
}

.spice_brand_mission {
    position: absolute;
    top: calc(4315 / 4100* 100vw);
    left: calc(1617 / 4100* 100vw);
    width: calc(1334 / 4100* 100vw);
}

.spice_brand_iconograghy {
    position: absolute;
    top: calc(5384 / 4100* 100vw);
    left: calc(2574 / 4100* 100vw);
}

.spice_identity {
    position: absolute;
    top: calc(7915 / 4100* 100vw);
    left: calc(2350 / 4100* 100vw);
    width: calc(1256 / 4100* 100vw);
}

.spice_values {
    position: absolute;
    top: calc(10316 / 4100* 100vw);
    left: calc(573 / 4100* 100vw);
    width: calc(855 / 4100* 100vw);
}

.spice_values p {
    width: calc(473 / 4100* 100vw);
}

.spice_values p.right {
    position: absolute;
    bottom: 0;
    right: calc(-200 / 4100* 100vw);
}

.babaland_body__section {
    position: relative;
}

.babaland_body__section .branding_hero__section {
    background-color: #d5bf99;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
}

.babaland_body__section .branding_hero__section::before {
    content: "";
    position: absolute;
    width: 29.26829vw;
    height: 24.39024vw;
    top: 0;
    right: 0;
    background: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/baba-land/img/flowers_1.webp') 0 0 / 100% no-repeat;
    z-index: 2;
}

.babaland_body__section .branding_hero__section::after {
    content: "";
    position: absolute;
    width: 26.82927vw;
    height: 56.09756vw;
    bottom: 0;
    left: 0;
    z-index: 2;
    transform: translate(0, 35%);
    background: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/baba-land/img/flowers_2.webp') 0 0 / 100% no-repeat;
}

.babaland_body__section .branding_hero__section .branding_hero__bg {
    position: static;
    width: 45.21951vw;
}

.babaland_cta {
    padding: 8.17073vw 17.07317vw;
    margin: 0 auto;
    position: relative;
}

.babaland_pictures {
    position: relative;
}

.babaland_pictures::before {
    content: "";
    position: absolute;
    width: 44.39024vw;
    height: 89.02439vw;
    top: -24.39024vw;
    right: 0;
    z-index: 2;
    background: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/baba-land/img/flowers_3.webp') 0 0 / 100% no-repeat;
}

.timemd_hero .branding_logo__hero {
    width: 24.39024vw;
    height: 23.21951vw;
}

.timemd_cta {
    background-color: #74643d;
    padding: 0 0 29.26829vw;
}

.timemd_cta_row {
    display: flex;
    padding: 10.2439vw 16.58537vw;
    position: relative;
}

.timemd_cta_row::before {
    content: "";
    position: absolute;
    width: 11.5122vw;
    height: 19.95122vw;
    top: 0;
    right: 0;
    background: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/time-md/img/circle1.webp') 0 0 / 100% no-repeat;
}

.timemd_cta_row_img {
    width: 100%;
}

.timemd_cta_row .timemd_cta_item {
    flex: 0 0 50%;
    display: flex;
    justify-content: center;
}

.timemd_cta_row .timemd_cta_item .timemd_cta_item_inner {
    max-width: 25.97561vw;
    height: 100%;
}

.timemd_cta_row .timemd_cta_item:nth-child(2) .timemd_cta_item_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 2.43902vw;
}

.timemd_cta_item_logo {
    flex: 1 1 auto;
}

.timemd_cta_item_logo img {
    width: 21.53659vw;
}

.timemd_cta_item .timemd_cta_item_title {
    text-align: center;
    margin: 0 0 2.43902vw;
    color: #fff;
    font-family: montserrat;
    font-weight: 300;
    font-size: 38px;
    text-transform: uppercase;
    letter-spacing: .30951vw;
}

.timemd_cta_item_colors {
    flex: 0 0 7.80488vw;
    width: 21.53659vw;
}

.timemd_cta__picture {
    margin: -9.7561vw 0 0;
}

.time-md__picture {
    margin: -29.26829vw 0 0;
}

.wallboxen_body__section {
    position: relative;
}

.wallboxen_body__section h2 {
    font-size: calc(100 / 4100* 100vw);
    color: #ec6906;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.02;
    text-align: left;
    margin-bottom: calc(91 / 4100* 100vw);
}

.wallboxen_body__section p {
    font-size: calc(30 / 4100* 100vw);
    color: #000103;
    font-weight: 600;
    line-height: 1.633;
    text-align: justify;
}


.wallboxen_history {
    position: absolute;
    top: calc(212 / 4100* 100vw);
    right: calc(200 / 4100* 100vw);
    width: calc(734 / 4100* 100vw);
}

.wallboxen_element {
    position: absolute;
    top: calc(208 / 4100* 100vw);
    left: calc(197 / 4100* 100vw);
}

.wallboxen_mission {
    position: absolute;
    top: calc(2960 / 4100* 100vw);
    left: calc(2013 / 4100* 100vw);
    width: calc(772 / 4100* 100vw);
}

.wallboxen_mission p {
    color: #fff;
}

.wallboxen_values {
    position: absolute;
    top: calc(9630 / 4100* 100vw);
    right: calc(197 / 4100* 100vw);
    width: calc(702 / 4100* 100vw);
}

.powerhouse_body__section {
    position: relative;
}

.powerhouse_body__section h2 {
    font-size: calc(77 / 4100* 100vw);
    color: #1c76cb;
    font-weight: 600;
    text-transform: uppercase;
    line-height: calc(72 / 4100* 100vw);
    text-align: left;
    margin-bottom: calc(75 / 4100* 100vw);
}

.powerhouse_body__section p {
    font-size: calc(48 / 4100* 100vw);
    color: #01172c;
    font-weight: 600;
    line-height: calc(72 / 4100* 100vw);
    text-align: justify;
    margin: 0;
}

.powerhouse_story {
    position: absolute;
    top: calc(220 / 4100* 100vw);
    left: calc(464 / 4100* 100vw);
    width: calc(1370 / 4100* 100vw);
}

.powerhouse_identity {
    position: absolute;
    top: calc(6310 / 4100* 100vw);
    left: calc(465 / 4100* 100vw);
    width: calc(1404 / 4100* 100vw);
}

.powerhouse_values {
    position: absolute;
    top: calc(9333 / 4100* 100vw);
    left: calc(454 / 4100* 100vw);
    width: calc(1217 / 4100* 100vw);
}

.kravknife_body__section {
    position: relative;
}

.kravknife_body__section h2 {
    font-size: calc(90 / 4100* 100vw);
    color: #d30102;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: left;
    margin-bottom: calc(48 / 4100* 100vw);
}

.kravknife_body__section h3 {
    font-size: calc(52 / 4100* 100vw);
    color: #818181;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: left;
    transform: rotate(-90deg);
}

.kravknife_body__section p {
    font-size: calc(42 / 4100* 100vw);
    color: #29272a;
    font-weight: 600;
    line-height: 1.783;
    text-align: justify;
    padding-left: calc(111 / 4100* 100vw);
}

.kravknife_story {
    position: absolute;
    top: calc(188 / 4100* 100vw);
    left: calc(408 / 4100* 100vw);
    width: calc(1640 / 4100* 100vw);
}

.kravknife_logo {
    position: absolute;
    top: calc(1356 / 4100* 100vw);
    left: calc(2191 / 4100* 100vw);
    width: calc(52 / 4100* 100vw);
}

.kravknife_logo h3 {
    white-space: nowrap;
}

.kravknife_identity {
    position: absolute;
    top: calc(4108 / 4100* 100vw);
    right: calc(217 / 4100* 100vw);
    width: calc(1690 / 4100* 100vw);
}

.kravknife_values {
    position: absolute;
    top: calc(9402 / 4100* 100vw);
    left: calc(408 / 4100* 100vw);
    width: calc(1647 / 4100* 100vw);
}

.branding_logo__hero.little_box {
    z-index: 1;
    width: 25.60976vw;
    height: auto;
}

.litte_box__about {
    display: flex;
    padding: 3.17073vw 0;
}

.litte_box__about_col {
    flex: 0 0 33.3333%;
}

.litte_box__about .mobile-col {
    display: none;
}

.little_box__about_col-title {
    text-align: center;
    color: #535353;
    font-size: 36px;
    text-transform: uppercase;
    letter-spacing: .17561vw;
    margin: 0 0 2.43902vw;
}

.litte_box__about_col-colors {
    width: 15.85366vw;
    margin: 0 auto;
}

.litte_box__about_col-fonts {
    width: 32.92683vw;
}

.litte_box__about_col-texture {
    width: 16.82927vw;
}

.litte_box__cta .litte_box__cta_wrapper:nth-child(2) {
    padding: 4.26829vw 0;
    overflow: hidden;
}

.litte_box__cta .litte_box__cta_wrapper-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 -2.43902vw;
}

.litte_box__cta .litte_box__cta_wrapper-content .litte_box__cta_wrapper_col {
    padding: 0 1.21951vw;
}

.litte_box__cta .litte_box__cta_wrapper:last-child {
    padding: 2.43902vw 0 2.43902vw 12.19512vw;
}

.branding_hero__section.conscious_hero {
    min-height: auto;
}

.branding_hero__section.conscious_hero .branding_hero__down {
    bottom: auto;
    top: calc(95vh - 2.92683vw);
}

.branding_hero__section.conscious_hero .branding_hero__bg {
    position: relative;
}

.conscious_hero .branding_logo__hero {
    z-index: 1;
    top: 14.63415vw;
    left: 50%;
    height: 14.63415vw;
    width: 30.4878vw;
    transform: translate(-50%, 0);
}

.conscious_about__section {
    margin: -31.70732vw 0 0 0;
    position: relative;
    z-index: 1;
}

.conscious_about__section .conscious_about-wrapper {
    display: flex;
    justify-content: center;
}

.conscious_about-wrapper .conscious_about_col {
    flex: 0 0 33.333%;
    padding: 0 .85366vw;
}

.conscious_about-picture {
    padding: 6.34146vw 14.63415vw;
}

.b20_body__section .branding_hero__section {
    position: absolute;
    top: 0;
    width: 100%;
}

.b20_body__section {
    position: relative;
}

.b20_hero_text {
    position: absolute;
    top: calc(1369 / 4100* 100vw);
    left: calc(602 / 4100* 100vw);
}

.b20_body__section h1 {
    font-size: calc(156 / 4100* 100vw);
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    margin: 0;
}

.b20_body__section h2 {
    font-size: calc(60 / 4100* 100vw);
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
}

.b20_body__section p {
    margin: 0;
    margin-top: calc(140 / 4100* 100vw);
    font-size: calc(36 / 4100* 100vw);
    color: #fff;
    font-weight: 600;
    line-height: 1.667;
}

.b20_logo_concept {
    position: absolute;
    top: calc(2477 / 4100* 100vw);
    left: calc(601 / 4100* 100vw);
}

.b20_token_concept {
    position: absolute;
    top: calc(3315 / 4100* 100vw);
    right: calc(601 / 4100* 100vw);
}

.b20_character_content {
    position: absolute;
    top: calc(5024 / 4100* 100vw);
    left: calc(1904 / 4100* 100vw);
    width: calc(1924 / 4100* 100vw);
}

.b20_illustration {
    position: absolute;
    top: calc(6613 / 4100* 100vw);
    left: calc(260 / 4100* 100vw);
}

.b20_typography {
    position: absolute;
    top: calc(8446 / 4100* 100vw);
    left: calc(602 / 4100* 100vw);
}

.b20_wallet {
    position: absolute;
    top: calc(11623 / 4100* 100vw);
    left: calc(258 / 4100* 100vw);
    width: calc(963 / 4100* 100vw);
}

.b20_social {
    position: absolute;
    top: calc(13350 / 4100* 100vw);
    right: calc(520 / 4100* 100vw);
    width: calc(715 / 4100* 100vw);
}

.b20_memes {
    position: absolute;
    top: calc(15410 / 4100* 100vw);
    left: calc(258 / 4100* 100vw);
    width: calc(785 / 4100* 100vw);
}

.vita_global_hero .branding_logo__hero {
    position: relative;
    z-index: 1;
    width: 45.02439vw;
    height: 12vw;
}

.vita_global__cta {
    background-color: #ebebeb;
}

.vita_global__cta-font {
    position: relative;
    z-index: 1;
}

.vita_global__cta-image {
    position: relative;
    z-index: 0;
    margin: -24.39024vw 0 0;
}

.vita_global__section-wrapper {
    display: flex;
}

.vita_global__section-wrapper img {
    height: 100%;
    object-fit: cover;
}

.vita_global__wrapper-col {
    flex: 1 1 auto;
}

.branding_hero__bg.bee_kind_hero .branding_logo__hero {
    width: 21.95122vw;
    height: auto;
    z-index: 1;
}

.bee_kind__section {
    position: relative;
    z-index: 1;
    background-color: #fff;
}

.bee_kind__img:first-child {
    padding: 0 0 0 9.7561vw;
}

.power_supplements__hero .branding_hero__down {
    bottom: auto;
    top: calc(95vh - 2.92683vw);
}

.power_supplements__hero .branding_hero__bg {
    position: static;
}

.shaken_body__section {
    position: relative;
}

.shaken_body__section h2 {
    color: #1c1c1b;
    line-height: 1.2;
    font-size: calc(66 / 4100* 100vw);
    font-weight: 600;
    text-transform: uppercase;
    text-align: left;
    margin-bottom: calc(106 / 4100* 100vw);
}

.shaken_body__section p {
    color: #1c1c1b;
    line-height: 1.395;
    font-size: calc(43 / 4100* 100vw);
    font-weight: 600;
    text-align: justify
}

.shaken_branding {
    position: absolute;
    top: calc(3910 / 4100* 100vw);
    left: calc(571 / 4100* 100vw);
    width: calc(1938 / 4100* 100vw);
}

.feminine_balance__hero::before {
    content: "";
    width: 100%;
    background-color: #000;
    height: 15.85366vw;
    position: absolute;
    bottom: 0;
    z-index: 2;
    left: 0;
    background: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/feminine-balance/img/background.webp') 0 0 / 100% no-repeat;
}

.feminine_balance__hero .branding_logo__hero {
    width: 25.36585vw;
    height: auto;
}

.feminine_about__section {
    position: relative;
    margin: -2px 0 0 0;
    background-color: #000;
    padding: 11.46341vw 0 6.58537vw 0;
}

.feminine_about_wrapper {
    display: flex;
    justify-content: center;
}

.feminine_about_col {
    flex: 0 0 50%;
    margin: 0 0 6.58537vw 0;
    padding: 0 9.7561vw;
    color: white;
}

.feminine_about_col-img {
    height: 100%;
}

.feminine_about_col-fonts {
    margin: 0 0 50px 0;
}

.feminine_about_col h3 {
    text-align: center;
    font-size: 38px;
    font-weight: 100;
    line-height: 131.57895%;
    text-transform: uppercase;
    letter-spacing: .31073vw;
    margin: 0 0 3.65854vw 0;
}

.feminine_about_col h4 {
    font-size: 102px;
    margin: 0 0 .4878vw 0;
}

.feminine_about_col-fonts h5 {
    font-size: 62px;
    margin: 0 0 2.43902vw 0;
}

.feminine_about_col-fonts p {
    font-size: 34px;
    line-height: 141.17647%;
    font-weight: 100;
    margin: 0;
}

.feminine_about_col-colors__wrapper {
    display: flex;
    justify-content: space-between;
}

.feminine_about_col-colors__wrapper span {
    display: inline-block;
    width: 5.56098vw;
    height: 5.56098vw;
    border-radius: 50%;
    background: #fff;
}

.feminine_about_col-colors__wrapper span:nth-child(2) {
    background-color: #f9b4a3;
}

.feminine_about_col-colors__wrapper span:nth-child(3) {
    border: 2px solid #fff;
    background-color: #000;
}

.fitup_page {
    position: relative;
}

.fitup_page .branding_hero__section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}

.strawmans_hero .branding_logo__hero {
    width: 26.95122vw;
    height: auto;
}

.strawmans__img-2,
.strawmans__img-4 {
    background-color: #201a19;
    position: relative;
    z-index: 1;
}

.strawmans__img-2::before,
.strawmans__img-3::before {
    content: "";
    width: 100%;
    height: 10px;
    background-color: #201a19;
    position: absolute;
    top: -5px;
    left: 0;
    z-index: 0;
}

.strawmans__img-3 {
    position: relative;
    background-color: #201a19;
    padding: 9.5122vw 0;
}

.strawmans__img-3::after {
    content: "";
    width: 100%;
    height: 10px;
    background-color: #201a19;
    position: absolute;
    bottom: -5px;
    left: 0;
    z-index: 0;
}

.strawmans__img-3 img {
    max-width: 35.95122vw;
    max-height: 28.04878vw;
    margin: 0 auto;
    display: block;
}

.genie_space_hero .branding_logo__hero {
    padding: 3.65854vw 6.46341vw 4.87805vw 6.09756vw;
    background-color: #000;
    width: 35.60976vw;
    height: 23.85366vw;
}

.genie_space_cta {
    background: #000;
}

.minamo .branding_hero__section {
    position: absolute;
    top: 0;
    width: 100%;
    left: 0;
}

.estative_slider {
    height: 100vh;
    background-color: #29282b;
}

.estative_slider .swiper-slide .slide_bg {
    display: flex;
    align-items: center;
    position: relative;
}

.estative_slider .swiper-slide .swiper-left,
.estative_slider .swiper-slide .swiper-right {
    width: 100%;
    position: absolute;
    top: 0;
    height: 100vh;
    overflow: hidden;
    transition: 1s ease;
    visibility: hidden;
}

.estative_slider .swiper-slide .swiper-left {
    left: 0;
    transform: translateY(-100%) scaleZ(1);
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}

.estative_slider .swiper-slide .swiper-right {
    right: 0;
    transform: translateY(100%) scaleZ(1);
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}


.estative_slider .swiper-slide-active .swiper-left,
.estative_slider .swiper-slide-active .swiper-right {
    transform: translateY(0) scaleZ(1);
    visibility: visible;
}

.estative_slider .swiper-slide div picture img {
    width: 100vw;
    height: 100%;
    /* transform: scale(1.262); */
    /* height: 100vh; */
    object-fit: cover;
}

.estative_slider .swiper-slide .swiper-left picture img {
    object-position: left center;
}

.estative_slider .swiper-slide .swiper-right picture img {
    object-position: right center;
}

.slider_fixed_Text {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #f7f0ea;
    font-size: 16px;
    text-align: center;
    letter-spacing: 20px;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 2;
}

.estative_slider .swiper-slide .slide_text {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, 0%);
    color: #f7f0ea;
    text-transform: uppercase;
    font-size: 28px;
    overflow: hidden;
}

.estative_slider .swiper-slide .slide_text span {
    transform: translateY(100%);
    visibility: hidden;
    display: inline-block;
    white-space: nowrap;
    transition: 1s ease;
}

.estative_slider .swiper-slide-active .slide_text span {
    visibility: visible;
    transform: translate(0);
}

.estative_slider .swiper-pagination {
    right: 20px;
}

.estative_slider .swiper-pagination-bullet {
    opacity: 0.6;
    background-color: #fff;
    width: 20px;
    height: 2px;
    border-radius: 0;
    margin: 12px 0 !important;
    transition: all .3s ease-in-out;
    transform-origin: center right;
}

.estative_slider .swiper-pagination-bullet-active {
    transform: scaleX(2);
    opacity: 0.9;
}

.estative_sections .branding_hero__section {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: auto;
}

.estative_cta {
    position: relative;
}

.estative_cta .estative_cta_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 26.3%;
}

.estative_cta .estative_cta_logo .estative_cta_logo_bg {
    border-radius: 1.7vw;
    overflow: hidden;
}

.estative_cta .estative_cta_logo .cta_logo_img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 72%;
}

.estative_introduction {
    overflow: hidden;
    padding: 7vw 0 4.5vw;
}

.estative_introduction_row {
    position: relative;
    margin: 0 -3vw;
}

.estative_introduction_col {
    position: relative;
    width: 100%;
    padding: 0 6vw;
    margin-bottom: 4vw;
}

.estative_title {
    margin-bottom: 0;
    color: #131313;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.estative_title_text {
    margin-bottom: 15px;
    color: #131313;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
}

.estative_text {
    color: #131313;
    font-weight: 400;
    text-align: justify;
}

.estative_sections p {
    margin-top: calc(80 / 4100* 100vw);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
}

.estative_colors {
    text-align: center;
}

.estative_colors .estative_color {
    display: inline-block;
    width: 4.6vw;
    height: 8vw;
    border-radius: 3vw;
    background-color: #00cacb;
}

.estative_colors .col {
    padding: 1vw;
}

.estative_colors .col:nth-of-type(2) .estative_color {
    background-color: #ff8749;
}

.estative_colors .col:nth-of-type(3) .estative_color {
    background-color: #626771;
}

.estative_colors .col:nth-of-type(4) .estative_color {
    background-color: #e6e8ed;
}

.estative_colors .color_text {
    margin-top: 1.3vw;
    color: #131313;
    font-weight: 600;
    text-align: center;
}

.estative_introduction_col:nth-child(3),
.estative_introduction_col:nth-child(4) {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 4vw;
}

.letter_col .estative_title {
    font-weight: 100;
}

.estative_brand {
    padding: 3.4vw 0 4.5vw;
}

.estative_brand .row {
    margin: 0;
}

.estative_brand .col {
    padding: 0 0 0 1vw;
}

.estative_brand .col:nth-child(2) {
    padding: 0 6vw;
}

.estative_brand .col .estative_title_text {
    margin-top: 1.7vw;
    margin-bottom: 1.9vw;
}

.estative_brand .col .estative_text {
    margin-bottom: 3vw;
    text-align: justify;
}

.estative__obj_right {
    display: flex;
}

.estative__obj_right picture {
    display: block;
    width: 25%;
    padding-right: 30px;
    transform: translate(-15%, 0);
}

.estative_appicons {
    padding: 2.9vw 0 0;
    overflow-x: clip;
}

.estative_appicons_row {
    display: flex;
    justify-content: space-between;
}

.estative_appicons_row .col:first-child {
    width: 70%;
    text-align: center;
    flex: none;
}

.estative_appicons_row .col:last-child {
    width: 30%;
    flex: none;
    position: relative;
}

.estative_appicons .estative_title_text {
    margin-bottom: 2.8vw;
}

.estative_appicons .estative_back_bg {
    position: absolute;
    right: 0;
    top: -10vw;
    transform: translate(50%, 0);
    display: block;
    width: 22vw;
    height: 61vw;
    border-radius: 11vw;
    background-color: #00cacb;
    transition: all .5s ease 0s;
}

.estative_appicons .estative_back_bg+picture {
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    max-width: 37vw;
}

.estative_appicons .estative_back_bg+picture img {
    transform: scale(1.2) translateX(-2vw);
}

.estative_img_cta {
    background-color: #00cacb;
    padding-bottom: 10vw;
}

.estative_img_cta_Wrap {
    max-width: 90vw;
    margin-left: auto;
}

.estative_wireframes {
    position: relative;
    overflow: hidden;
    background-color: #fff;
}

.estative_wireframes::before {
    content: '';
    position: absolute;
    right: -16px;
    bottom: -145px;
    display: block;
    width: 40vw;
    height: 40vw;
    opacity: .5;
    -webkit-transform: translate(12vw, -11vw);
    -ms-transform: translate(12vw, -11vw);
    transform: translate(12vw, -11vw);
    background-image: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/estative/img/svg/Circle.svg');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: contain
}

.estative_wireframes_wrap {
    background-color: #fff;
}

.estative_wireframes_scene {
    display: flex;
    flex-flow: row wrap;
    max-height: 62vw;
}

.estative_wireframes_scene .item-1 {
    width: 15vw;
}

.estative_wireframes_scene .item-2 {
    width: 50vw;
}

.estative_wireframes_scene .item-3 {
    width: 33vw;
}

.estative_wireframes_scene .item-4 {
    width: 23vw;
}

.estative_wireframes_scene .item-4 img {
    transform: scale(1.15) translate(2vw, -16.4vw);
}

.estative_wireframes_scene .item-5 {
    width: 51vw;
}

.estative_wireframes_scene .item-5 img {
    transform: scale(1.15) translate(0, -16.4vw);
}

.estative_wireframes_scene .item-6 {
    width: 24vw;
}

.estative_wireframes_scene .item-6 img {
    transform: scale(1.15) translate(0, -5.4vw);
}


.estative_wireframes-text {
    transform: translateY(-5vw);
    padding: 0 6vw;
}

.estative_wireframes-text .estative_text {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3vw;
    margin-bottom: 3vw;
    text-align: justify;
}

.estative_design {
    overflow: hidden;
}

.estative_design_wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

.estative_design-col {
    width: 100%;
}

.estative_design-col:last-child {
    padding-top: 17vw;
    padding-bottom: 17vw;
}

.estative_design_scene {
    position: relative;
}

.estative_design_scene::before {
    content: '';
    position: absolute;
    left: -15.5vw;
    top: 0;
    display: block;
    width: 73vw;
    height: 28.4vw;
    border-radius: 15vw;
    background-color: #00cacb;
}

.estative_design_scene-item {
    position: absolute;
    max-width: 78vw;
    top: 9.5vw;
    left: -6.9vw;
}

.estative_design_scene-item.item-2 {
    top: -8.5vw;
    right: -6.5vw;
    left: auto;
}

.estative_cta_slider {
    position: relative;
    background-color: #00cacb;
    padding: 8vw 0 6vw;
    overflow: hidden;
}

.estative_cta_slider_wrap {
    position: relative;
    margin: 0 auto;
    width: 90vw;
    border-radius: 5vw;
    overflow: hidden;
}

.slider_holder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    border-radius: 5vw;
    box-shadow: 2px 4px 39px -10px #000
}

.estative_slider_cta .swiper-slide img {
    padding: 0.6vw;
}

.branding-page.mutant_sections {
    background-color: #100410;
}

.mutant_hero {
    min-height: 15.6vw;
    background-image: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/little-mutant/images-lm/1sc/Screen_Background.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mutant_hero_scene {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.mutant_hero .branding_hero__section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.mutant_hero_scene .layer__rock {
    position: relative;
    z-index: 0;
}

.mutant_hero_scene .layer__rock img {
    width: 100vw;
}

.mutant_hero_scene .layer__logo {
    position: absolute;
    left: 50%;
    top: 45.5%;
    width: 28.9vw;
    height: 28.9vw;
    transform: translate(-50%, -50%);
    transition: all 300ms ease-in-out;
}

.mutant_hero_scene .layer__logo .moon-logo__bg {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.mutant_hero_scene .layer__logo .moon-logo__bg img {
    width: 45vw;
    animation: rotateLogo 15s linear infinite;
}

@keyframes rotateLogo {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.mutant_hero_scene .layer__logo .moon-logo__text {
    position: absolute;
    left: 50%;
    top: 53.5%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.mutant_hero_scene .layer__logo .moon-logo__text img {
    width: 24.3vw;
}

.mutant_hero_scene .layer__logo .moon-logo__logo {
    position: absolute;
    left: 50%;
    top: 55%;
    transform: translate(-50%, -50%);
}

.mutant_hero_scene .layer__logo .moon-logo__logo img {
    width: 12.7vw;
}

.mutant_hero_scene .layer__bottom-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 20%;
    background-image: linear-gradient(0deg, #100410 62%, rgba(255, 255, 255, 0) 100%);
}

.mutant_hero_scene .layer__mut1 {
    position: absolute;
    z-index: -1;
    top: 43.7%;
    left: 17.7vw;
    max-width: 13vw;
    transition: all 1000ms ease-in;
}

.mutant_hero_scene .layer__mut2 {
    position: absolute;
    z-index: -1;
    top: -.8%;
    right: 17.5vw;
    max-width: 10.2vw;
    transition: all 1000ms ease-in;
}

.mutant_hero_scene .layer__mut3 {
    position: absolute;
    z-index: 1;
    bottom: 8.5%;
    right: 7.3vw;
    max-width: 18.2vw;
    transition: all 1000ms ease-in;
}

.mutant_brand_section {
    padding-top: 3.7vw;
}

.mutant_sections .container {
    max-width: 90vw !important;
    padding: 0 !important;
}

.mutant_brand_section .scene-simple {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.mutant_brand_section .layer__table {
    display: grid;
    grid-template-columns: 4% 19% 10% 18% 49%;
    color: #fff;
}

.mutant_brand_section .layer__table .table-cell {
    position: relative;
}

.mutant_brand_section .layer__table .table-cell:not(.last) {
    border-bottom: 1px solid rgba(207, 121, 77, .7);
}

.mutant_brand_section .layer__table .table-cell:not(:nth-child(5n)) {
    border-right: 1px solid rgba(207, 121, 77, .7);
}

.mutant_brand_section .layer__table .bold {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    display: inline-block;
    text-align: center;
    font-family: "Harper Bold Bold";
    font-weight: 400;
    letter-spacing: 1.8px;
    font-size: 2.5vw;
}

.mutant_brand_section .layer__table .bold--bottom {
    bottom: 41%;
}

.mutant_brand_section .layer__table .logo {
    padding: 15%;
    text-align: center;
}

.mutant_brand_section .layer__table .logo img {
    max-width: 98%;
}

.mutant_brand_section .layer__table .logo.logo--first {
    padding-top: 18%;
    padding-bottom: 5%;
}

.mutant_brand_section .layer__table .logo.logo--middle {
    padding-top: 5%;
    padding-bottom: 5%;
}

.mutant_brand_section .layer__table .logo.logo--last {
    padding-top: 25%;
    padding-bottom: 15%;
}

.mutant_brand_section .layer__table .table-cell--last {
    padding-left: 6.5vw;
}

.mutant_brand_section .layer__table .table-cell--last .text {
    padding-bottom: 6.3%;
    font-size: .9vw;
    font-weight: 400;
    letter-spacing: 1.05px;
    line-height: 1.7;
    max-width: 90%;
}

.mutant_brand_section .layer__table .table-cell--last .text:first-child {
    margin-top: 4.7%;
}

.mutant_brand_section .layer__table .aa {
    position: absolute;
    top: -2%;
    left: 50%;
    transform: scale(1.03) translate(-50%, 0);
    display: block;
    width: 100%;
    font-family: "Harper Bold Bold";
    font-size: 24.1vw;
    font-weight: 400;
    text-align: center;
    letter-spacing: 2.38px;
    line-height: .8;
    color: #ffc12c;
}

.mutant_brand_section .layer__table .icons {
    display: flex;
    align-items: center;
}

.mutant_brand_section .layer__table .icons .icon__item {
    width: 3.4vw;
    margin-right: 3%;
}

.mutant_brand_section .layer__table .bold--top {
    top: 52%;
}

.mutant_brand_section .layer__table .colors {
    display: flex;
    align-items: center;
    padding-top: 3%;
}

.mutant_brand_section .layer__table .colors .color__item {
    width: 15%;
    text-align: center;
    font-size: 0.85vw;
}

.mutant_brand_section .layer__table .colors .color__item .color {
    display: inline-block;
    width: 3.5vw;
    height: 3.5vw;
    border-radius: 20%;
    margin-bottom: 15%;
}

.mutant_brand_section .layer__mobile {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10%;
}

.mutant_brand_section .layer__mobile .table-cell {
    color: #fff;
}

.mutant_brand_section .layer__mobile .table-cell__text {
    width: 100vw;
    margin-bottom: 4.7%;
}

.mutant_brand_section .layer__mobile .table-cell__text .text {
    margin-bottom: 2%;
    font-size: 2.5vw;
    font-weight: 400;
    letter-spacing: 1.05px;
    line-height: 1.7;
    max-width: 90%;
}

.mutant_brand_section .layer__mobile .table-cell__text .text:first-child {
    font-size: 2.8vw;
}

.mutant_brand_section .layer__mobile .table-cell.colors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 55vw;
}

.mutant_brand_section .layer__mobile .table-cell.colors .color__item {
    width: 26%;
    text-align: center;
    margin-bottom: 7%;
    font-size: 2.5vw;
}

.mutant_brand_section .layer__mobile .table-cell.colors .color {
    display: inline-block;
    width: 8.5vw;
    height: 8.5vw;
    border-radius: 7%;
    margin-bottom: 7%;
}

.mutant_brand_section .layer__mobile .table-cell.icons {
    padding-left: 10%;
    display: inline-flex;
    align-items: center;
    align-content: flex-start;
    flex-flow: row wrap;
    justify-content: center;
    width: 30vw;
}

.mutant_brand_section .layer__mobile .table-cell.icons .icon__item {
    width: 40%;
    margin: 0 5% 10%;
}

.mutant_concept_section {
    position: relative;
    padding-top: 5vw;
    padding-bottom: 10vw;
    z-index: 0;
}

.mutant_concept_section::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 0;
    display: block;
    width: 43vw;
    height: 46vw;
    background-image: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/little-mutant/images-lm/3sc/3_Screen_Image_Bg_1.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mutant_concept_section::after {
    content: '';
    position: absolute;
    top: -3vw;
    right: 0;
    z-index: -1;
    display: block;
    width: 31vw;
    height: 46vw;
    background-image: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/little-mutant/images-lm/3sc/3_Screen_Image_Bg_2.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


.mutant_concept_section .concept_top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}

.mutant_sections p {
    margin-top: calc(60 / 4100* 100vw);
    font-size: 13px;
    color: #fff;
    font-weight: 400;
    line-height: 1.55;
}

.mutant_concept_section .concept-text {
    padding-bottom: 10%;
    font-size: .9vw;
    font-weight: 400;
    letter-spacing: 1.05px;
    line-height: 1.8;
    max-width: 90%;
}

.mutant_concept_section .concept-text:first-child {
    margin-top: 15%;
}


.mutant_concept_section .concept_bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 11%;
}


.mutant_concept_section .concept_bottom_big {
    position: relative;
    width: 62%;
}

.mutant_concept_section .concept__title {
    position: absolute;
    display: inline-block;
    width: auto;
    color: #100410;
    font-weight: 600;
    font-size: 2.5vw;
    letter-spacing: 1.4px;
}

.mutant_concept_section .concept__title:first-child {
    top: 20%;
    left: 6%;
}

.mutant_concept_section .concept__title:nth-child(2) {
    bottom: 22%;
    left: 1.4%;
}

.mutant_concept_section .concept_animate_box {
    position: relative;
    margin-left: 4%;
    width: 38%;
    border-radius: 5%;
    background-color: #eb4f2f;
}

.mutant_concept_section .concept_animate_box::before {
    content: '';
    position: absolute;
    top: -2vw;
    right: -4vw;
    display: block;
    width: 15vw;
    height: 7vw;
    background-image: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/little-mutant/images-lm/3sc/bat.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.mutant_concept_section .concept_animate_box .animation {
    position: relative;
    height: 100%;
    margin: 30% auto 0;
    max-width: 69%;
}

.mutant_concept_section .concept_animate_box .animation__item {
    position: absolute;
    height: 100%;
    transition: top 400ms linear;
    transition-delay: 1000ms;
    animation: infiniteLayers 1.5s ease-in-out infinite alternate;
}

@keyframes infiniteLayers {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }

    100% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

.mutant_concept_section .concept_animate_box .concept__title {
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0);
}

.mutant_concept_section .concept_animate_box .animation__item:nth-child(1) {
    animation-delay: 2000ms;
    top: 5.5%;
}

.mutant_concept_section .concept_animate_box .animation__item:nth-child(2) {
    animation-delay: 2300ms;
    top: 21.5%;
}

.mutant_concept_section .concept_animate_box .animation__item:nth-child(3) {
    animation-delay: 2600ms;
    top: 38%;
}

.mutant_collection_section {
    position: relative;
    overflow: hidden;
    /* padding-bottom: 17vw; */
    /* padding-bottom: 7vw; */
}

.mutant-combination-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: 2.2vw;
    padding-left: 2.2vw;
    width: 55.2vw;
    height: 30vw;
    background-color: #100410;
    font-weight: 700;
    color: #fff;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, 0);
}

.mutant-combination-text .text-top {
    display: inline-block;
    vertical-align: bottom;
    font-size: 17vw;
    letter-spacing: 1.4px;
    color: #eb4f2f;
    line-height: 1;
}

.mutant-combination-text .text-top span:first-child {
    position: relative;
    top: 12%;
    left: -4%;
}

.mutant-combination-text .text-bottom {
    line-height: .8;
    font-size: 4.1vw;
    padding-left: 7vw;
}

.mutant_collection_section .swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

.collect_top {
    margin-bottom: 2.2vw;
}

.mutant_collection_section .mutant_mount {
    position: relative;
    z-index: 3;
    /* top: 26vw; */
    transform: translate(0, 0);
    transition: all 1000ms ease-in-out;
}

.mutant_collection_section .mutant_mount_club {
    position: relative;
    z-index: 1;
}

.mutant_collection_section .mutant_mount_club .mutant_mount_box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: absolute;
    top: 30%;
    transform: translateY(23%);
}

.mutant_mount_club .mutant_mount_box img:nth-child(1) {
    width: 35vw;
    transform: translate(21%, 22%);
}

.mutant_mount_club .mutant_mount_box img:nth-child(2) {
    width: 25vw;
    transform: scale(1.7);
}

.mutant_mount_club .mutant_mount_box img:nth-child(3) {
    width: 35vw;
    transform: translate(-12%, -10%);
}

.mutant_coffee_section {
    position: relative;
    z-index: 2;
}

.mutant_coffee_section .scene-simple {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.mutant_coffee_section .scene-simple .layer {
    position: absolute;
}

.mutant_coffee_section .scene-simple .layer__star1 {
    width: 10vw;
    top: 54%;
    left: 23vw;
    animation-name: sparkle;
    animation-duration: 14s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    opacity: 0;
}

.mutant_coffee_section .scene-simple .layer__star2 {
    width: 10vw;
    top: 49%;
    left: 51vw;
    animation-name: sparkle;
    animation-duration: 14s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes sparkle {
    0% {
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
        opacity: 1
    }

    16% {
        -webkit-transform: scale(1) rotate(30deg);
        transform: scale(1) rotate(30deg);
        opacity: 1
    }

    32% {
        -webkit-transform: scale(1) rotate(60deg);
        transform: scale(1) rotate(60deg);
        opacity: 1
    }

    48% {
        -webkit-transform: scale(0) rotate(90deg);
        transform: scale(0) rotate(90deg);
        opacity: 1
    }

    64% {
        -webkit-transform: scale(1) rotate(-60deg);
        transform: scale(1) rotate(-60deg);
        opacity: 1
    }

    83% {
        -webkit-transform: scale(1) rotate(30deg);
        transform: scale(1) rotate(30deg);
        opacity: 1
    }

    100% {
        -webkit-transform: scale(1) rotate(0deg);
        transform: scale(1) rotate(0deg);
        opacity: 1
    }
}

.mutant_coffee_section .scene-simple .layer__coffee1 {
    width: 3vw;
    top: 56%;
    left: 18vw;
    transform: translate(0, 0);
    animation-name: rotate1;
    animation-duration: 8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
}

@keyframes rotate1 {
    0% {
        transform: rotate(0deg);
        opacity: 1
    }

    100% {
        transform: rotate(360deg);
        opacity: 1
    }
}

.mutant_coffee_section .scene-simple .layer__coffee2 {
    width: 6vw;
    top: 16%;
    left: 31vw;
    transform: translate(0, 0);
    animation: rotate 17s ease-in-out infinite alternate;
}

.mutant_coffee_section .scene-simple .layer__coffee3 {
    width: 7vw;
    top: 26%;
    left: 68vw;
    transform: translate(0, 0);
    animation: rotate 14s ease-in-out infinite alternate;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg) translate(0, 0);
        opacity: 1
    }

    100% {
        transform: rotate(360deg) translate(-3vw, -3vw);
        opacity: 1
    }

    100% {
        transform: rotate(480deg) translate(-3vw, 0);
        opacity: 1
    }
}


.mutant_identity_section {
    position: relative;
    background-image: url('https://stanbranding.com/wp-content/themes/stanbranding/works-branding-templates/little-mutant/images-lm/7sc/7Screen_Bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.mutant_identity_section .mutant_identity_wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}


.mutant_identity_section .mutant_identity_wrap .img-box:nth-child(1) {
    position: relative;
    top: 14vw;
    flex: 0 0 90vw;
    height: auto;
    order: 1;
}

.mutant_identity_section .mutant_identity_wrap .img-box:nth-child(2) {
    position: relative;
    top: 8vw;
    flex: 0 0 55vw;
    height: auto;
    order: 3
}

.mutant_identity_section .mutant_identity_text {
    width: 90vw;
    order: 2;
}

.mutant_identity_section .mutant_identity_text p {
    font-size: 2.5vw;
    font-weight: 400;
    letter-spacing: 1.05px;
    line-height: 1.8;
}

.mutant_identity_section .mutant_identity_text p:first-child {
    font-size: 2.8vw;
    margin-top: 18%;
    margin-bottom: 1%;
}

.mutant_merchandise_section {
    position: relative;
    transition: all 600ms ease-in-out;
}

.mutant_merchandise_inner {
    position: relative;
    width: 100%;
}

.mutant_merchandise_inner .merchandise_left {
    width: calc(50% + 2vw);
    padding-right: 4vw;
    padding-left: 10vw;
}

.mutant_merchandise_inner .merchandise_left .img-box {
    padding-top: 4vw;
}

.mutant_merchandise_inner .merchandise_left .merchandise_text p {
    font-size: .9vw;
    font-weight: 400;
    letter-spacing: 1.05px;
    line-height: 1.8;
    max-width: 90%;
}

.mutant_merchandise_inner .merchandise_left .merchandise_text p:first-child {
    margin-top: 18%;
    margin-bottom: 0;
    padding-bottom: 6%;
}

.mutant_merchandise_inner .merchandise_right {
    width: calc(50% - 2vw);
    padding-right: 5vw;
}

.mutant_merchandise_inner .merchandise_right .img-box:first-child {
    padding-bottom: 4vw;
}

.mutant_merchandise_inner .merchandise_right .img-box:nth-child(2) {
    max-width: 80%;
}

.mutant_merchandise_inner.inner_desktop {
    display: none;
}

.mutant_merchandise_inner.inner_mobile {
    display: flex;
    flex-wrap: wrap;
}

.mutant_merchandise_inner.inner_mobile .merchandise_text {
    width: 90vw;
}

.mutant_merchandise_inner.inner_mobile .merchandise_text p {
    font-size: 2.5vw;
    font-weight: 400;
    letter-spacing: 1.05px;
    line-height: 1.8;
    margin-bottom: 0;
}

.mutant_merchandise_inner.inner_mobile .merchandise_text p:first-child {
    font-size: 2.8vw;
    margin-top: 0;
    margin-bottom: 1%;
}

.mutant_merchandise_inner.inner_mobile .img-box.img_2 {
    width: 90vw;
    margin: 4% auto;
    padding-bottom: 0;
}

.mutant_merchandise_inner.inner_mobile .bottom {
    display: flex;
    margin: 0 auto;
    align-items: stretch;
    justify-content: space-between;
    width: 90vw;
}

.mutant_merchandise_inner.inner_mobile .bottom img {
    border-radius: 6%;
}

.mutant_merchandise_inner.inner_mobile .img-box.img_1 {
    width: 45%;
    padding-top: 0;
}

.mutant_merchandise_inner.inner_mobile .img-box.img_3 {
    width: 50.6%;
}

.inner-page {
    overflow: hidden;
}

.inner-page .web_wrap {
    display: flex;
    margin: 0 -1.95122vw -3.90244vw -1.95122vw;
    flex-wrap: wrap;
    padding: 3.34146vw 0 2.19512vw 0;
}

.inner-page .web_wrap .web_col {
    flex: 0 1 50%;
    margin: 0 0 3.90244vw 0;
    padding: 0 1.95122vw;
}

.inner-page .web_wrap .web_col .web_col_video {
    box-shadow: 0 0 30px rgba(0, 0, 0, .1);
    display: block;
    position: relative;
    padding: 0 0 56.2% 0;
}

.inner-page .web_wrap .web_col .web_col_video video,
.inner-page .web_wrap .web_col .web_col_video img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inner-page .web_wrap .web_col .web_col_mobile {
    display: none;
}

.inner_cta_contact .packaging__text {
    color: #bcbcbc;
    margin: 0 0 2.80488vw 0;
}

.inner_cta_contact .packaging__text h2,
.inner_cta_contact .packaging__text h3,
.inner_cta_contact .packaging__text p,
.inner_cta_contact .packaging__text ul {
    color: #bcbcbc;
    font-size: calc(12px + 24*((100vw - 320px) / 3780)) !important;
    line-height: 200% !important;
    font-weight: 600;
}

/* .inner_cta_contact .packaging__text h2,
.inner_cta_contact .packaging__text h3 {
    margin: 0;
} */


.inner_cta_contact .packaging__text p {
    margin: 0 0 .97561vw 0;
}

.inner_cta_contact .packaging__text ul {
    list-style-type: disc !important;
    padding-left: 1.25vw;
    margin: 0 0 .97561vw 0;
}

/* Web Inner Pages */
.web-pages {
    overflow: hidden;
}

/* Airguard */
.airguard_style {
    margin: 0 auto;
    padding: 160px 6.60976vw;
    position: relative;
}

.airguard_style h1 {
    font-size: calc(54 / 4100* 100vw);
    position: absolute;
    width: 100%;
    text-align: center;
    color: #dfdfdf;
    text-transform: uppercase;
    line-height: .869;
    top: 30px;
    left: 0;
}

.airguard_style__row {
    display: flex;
    margin: 0 -30px;
}

.airguard_style__col {
    flex: 0 1 50%;
    padding: 0 30px;
}


.airguard_style__content {
    max-width: 1350px;
    color: #29272a;
    font-family: "Open Sans";
    font-size: 54px;
    letter-spacing: .26341vw;
}


.airguard_style__content h2 {
    font-size: 90px;
    letter-spacing: .05488vw;
    color: #29272a;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 2.43902vw 0;
}

.airguard_style__content h5 {
    text-transform: uppercase;
    margin: 0 0 2.43902vw 0;
    line-height: 133.33333%;
    font-size: inherit;
}

.airguard_style__content .text {
    line-height: 133.33333%;
    letter-spacing: normal;
}

.airguard_style__content .text p {
    margin: 0;
}

.airguard_style__colors {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}


.airguard-title {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    font-size: 54px;
    letter-spacing: .26341vw;
    color: #29272a;
    text-transform: uppercase;
}

.airguard-title::after {
    content: "";
    display: block;
    margin: 1.70732vw 0 0 0;
    position: relative;
    width: 6.95122vw;
    height: 3px;
    background-color: #29272a;
}

.airguard_style__colors-row {
    display: flex;
    align-items: center;
}

.airguard_style__colors-item {
    flex: 0 1 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.airguard_style__colors-item-color {
    width: 4.70732vw;
    height: 4.70732vw;
    border-radius: 50%;
    margin: 0 0 2.43902vw 0;
    background-color: var(--air-color);
}

.airguard_style__colors-item-text {
    font-size: 48px;
    letter-spacing: .02634vw;
    color: #29272a;
    line-height: 160.83333%;
}

.airguard_icons {
    padding: 0 6.60976vw;
    margin: 0 auto 5.4878vw auto;
}

.airguard_icons-wrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 6.21951vw;
}


.airguard_icons_item {
    flex: 0 0 14%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 4.14634vw 0;
}


.airguard_icons_item picture {
    width: 6.70732vw;
    height: 6.70732vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.airguard_icons_item picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.airguard_cta {
    position: relative;
}

.airguard_cta h2 {
    position: absolute;
    left: 0;
    width: 100%;
    top: 7.31707vw;
    z-index: 2;
}

/* Keep fit up */

.keep-fitup-content {
    padding-top: 9.7561vw;
    line-height: 1;
}

.keep-fitup_container {
    padding: 0 15.85366vw;
}

.keep-fitup-content h1 {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    font-size: calc(54 / 4100* 100vw);
    color: #aeaeae;
    text-transform: uppercase;
    line-height: .28;
    top: 80px;
}

.keep-fitup__wrapper {
    color: #fff;
    position: relative;
    z-index: 1;
}

.fitup-heading {
    color: #fff;
    font-size: calc(20px + 79*((100vw - 320px) / 3780));
    font-weight: 600;
    letter-spacing: .0878vw;
    display: inline-flex;
    gap: 12px;
}

.fitup-heading sup {
    font-size: calc(8px + 25*((100vw - 320px) / 3780));
    letter-spacing: .0878vw;
    transform: translateY(50%);
}

.keep-fitup__wrapper .fitup-heading {
    margin-bottom: .86869em;
}

.fitup_colors_wrapper {
    display: flex;
    justify-content: space-between;
    margin: 0 -40px;
}

.fit_color_col {
    padding: 0 40px;
    flex: 1 1 auto;
}

.fitup_colors-item {
    display: flex;
    align-items: center;
    margin: 0 0 1.58537vw 0;
}

.fitup_colors-item-color {
    width: 2.43902vw;
    height: 2.43902vw;
    border-radius: 50%;
    flex: 0 0 2.43902vw;
    background-color: var(--fitup-color);
}

.fit_color_col:nth-child(2) .fitup_colors-item-color {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.fitup_colors-item-text {
    font-size: calc(10px + 49*((100vw - 320px) / 3780));
    padding-left: 1.21951vw;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .0878vw;
}

.fitup_colors-text {
    font-size: calc(10px + 17*((100vw - 320px) / 3780));
    line-height: 155.55556%;
    letter-spacing: .01659vw;
}

.keep-fitup-bg {
    margin-top: -21.95122vw;
}

.keep-fitup__mobile {
    background: #0f0f0f url('https://stanbranding.com/wp-content/themes/stanbranding/works-web-templates/fitness/img/mobile-view__bg.webp') bottom / 100% 50% no-repeat;
}

.keep-fitup__mobile_container {
    max-width: calc(65% + 40px);
    margin: 0 auto;
    padding: 0 20px;
}

.keep-fitup__mobile .fitup-heading {
    margin-bottom: 4.39024vw;
}

.fitup_mobile__wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 0 8.78049vw 0;
    margin: 0 -3vw;
}

.fitup_mobile-col {
    padding: 0 3vw;
    flex: 0 1 33.333%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fitup_mobile-item {
    box-shadow: -100px 0 155px #000;
    border-radius: 110px;
    background-color: #000;
    transition: all 0.5s ease 0s;
}

.fitup_mobile-item:hover {
    transform: scale(1.2);
}

/* 500 design web pages */

@font-face {
    font-family: 'Helvetica Neue Roman';
    src: url('../fonts/helveticaNeueLTStd-Roman.ttf');
}

@font-face {
    font-family: 'Helvetica Neue Medium';
    src: url('../fonts/helveticaNeueLTStd-Md.ttf');
}

@font-face {
    font-family: 'Helvetica Neue Bold';
    src: url('../fonts/helveticaNeueLTStd-Bd.ttf');
}

.designs-500 {
    padding: calc(106px + 7.5rem) 0 7.5rem 0;
    background-color: #DFDBD8;
    font-family: 'Helvetica Neue Medium';
}

.container_designs-500 {
    padding: 0 4.38rem;
}

.designs-500_title {
    font-size: 120px;
    color: #2D1A0B;
    font-weight: 500;
    line-height: 1;
    margin: 0;
    letter-spacing: -3.5px;
    font-family: 'Helvetica Neue Medium';
    max-width: 1324px;
}

.designs-500_section {
    display: flex;
    flex-direction: column;
    gap: 120px;
}

.designs-500_cta video {
    width: 100%;
}

.designs-500_cta_text {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.designs-500_cta_text h3 {
    margin: 0;
    padding: 0;
    color: #645346;
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.925rem;
}

.designs-500_cta_text h4 {
    margin: 0;
    padding: 0;
    color: #968B83;
    font-family: 'Helvetica Neue Roman';
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.75rem;
}

.designs-500_cta_text p {
    max-width: 1100px;
    color: #2D1A0B;
    margin: 0;
    padding: 0;
    font-size: 2.25rem;
    font-weight: 500;
    line-height: 2.7rem;
}

.designs-500_approach {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.designs-500_line {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #968B83;
}

.designs-500_approach h3 {
    color: #645346;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 2.45rem;
    margin: 0 0 -12px 0;
}


.designs-500_approach h4,
.designs-500_visual h4,
.designs-500_experience h4,
.designs-500_verbal-text h4 {
    color: #2D1A0B;
    font-size: 3rem;
    font-weight: 500;
    line-height: 3.6rem;
    margin-bottom: 12px;
}

.designs-500_approach p,
.designs-500_visual p,
.designs-500_experience p,
.designs-500_verbal-text p {
    max-width: 651px;
    color: #645346;
    font-family: 'Helvetica Neue Roman';
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.75rem;
    margin-bottom: 0.9rem;
}

.designs-500_approch-img {
    margin-top: 1.5rem;
}

.designs-500_verbal {
    display: flex;
    align-items: center;
    gap: 58px;
}

.designs-500_verbal-img,
.designs-500_verbal-text {
    flex: 0 1 50%;
}

.designs-500_verbal-text p {
    max-width: 100%;
}

.designs-500_visual,
.designs-500_experience {
    display: flex;
    flex-direction: column;
}

.designs-500_visual p,
.designs-500_experience p {
    max-width: 660px;
    margin: 12px 0 64px;
}

.designs-500_testimonial {
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.designs-500_testimonial h3 {
    color: #645346;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 2.25rem;
    margin: 0;
}

.designs-500_testimonial-content {
    margin-top: 30px;
    max-width: 1100px;
}

.designs-500_testimonial-item {
    display: flex;
    flex-direction: column;
}

.designs-500_testimonial-item .testimonial_text {
    color: #2D1A0B;
    font-size: 3rem;
    font-weight: 500;
    line-height: 3.6rem;
    margin: 2.313rem 0 0;
}

.designs-500_testimonial-item .testimonial_footer {
    margin: 2.5rem 0 -0.25rem;
}

.designs-500_testimonial-item .testimonial_footer h3 {
    color: #645346;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 2.45rem;
    margin: 0;
}

.designs-500_testimonial-item .testimonial_footer h5,
.designs-500_testimonial-item .testimonial_footer span {
    color: #645346;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.75rem;
    margin: 0;
    font-family: 'Helvetica Neue Roman';
}

.designs-500_more {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.designs-500_more h2 {
    margin: 1.5rem 0 0 0;
    color: #2D1A0B;
    font-size: 4rem;
    font-weight: 500;
    line-height: 4.8rem;
    letter-spacing: -0.14rem;
}

.designs-500_more-wrapper {
    margin: 0 calc(1.313rem / -2);
    width: calc(100% + 1.313rem);
    display: flex;
    flex-wrap: wrap;
}

.designs-500_more-item {
    padding: 0 calc(1.313rem / 2);
    flex: 0 1 33.333%;
}

.designs-500_more-item .designs-500_more-img {
    margin-bottom: 24px;
    overflow: hidden;
}

.designs-500_more-item .designs-500_more-img img {
    transition: transform 2s ease;
}

.designs-500_more-item .designs-500_more-img img:hover {
    transform: scale(1.1);
}

.designs-500_more-item a {
    color: inherit;
}

.designs-500_more-item h6 {
    color: #1B1612;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 2.1rem;
    margin: 0;
    letter-spacing: -0.05rem;
    display: inline-block;
}

.designs-500_more-item h6:hover {
    color: #645346;
}

.designs-500_more-item p {
    color: #645346;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.75rem;
    margin: 16px 0;
    font-family: 'Helvetica Neue Roman';
}

.designs-500_more-item p:hover {
    color: #1B1612;
}

.designs-500_more-item .designs-500_more-btn {
    font-weight: 700;
    color: #1B1612;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Helvetica Neue Bold';
}

.designs-500_more-item .designs-500_more-btn,
.designs-500_more-item p,
.designs-500_more-item h6 {
    transition: color .5s ease-in-out;
}

.designs-500_more-item .designs-500_more-btn:hover {
    color: #574835;
}

/* Ad Digital */


.digital_col {
    flex: 0 1 50%;
    padding: 0 1.5vw;
    margin-bottom: 3.78049vw;
}


.digital_col .digital_item {
    display: block;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}

.digital_col .digital_item .digital_image img {
    /* height: 500px; */
    width: 100%;
    object-fit: cover;
}

/* Package Page */

.packaging_wrapper {
    padding-top: 45px;
    margin: 0 -1.09756vw;
    /* masonry layout like pinterest */
    columns: 4;
}

.print_graphics__item,
.packaging_item {
    display: block;
    padding: 0 1.09756vw 2.19512vw;
    position: relative;
    overflow: hidden;
}

.print_graphics--overlay,
.packaging_item--overlay {
    position: absolute;
    bottom: -60px;
    width: 100%;
    padding: 1.70732vw 20px;
    background-color: #fff;
    z-index: 2;
    text-align: center;
    font-size: calc(14px + 22*((100vw - 320px) / 3780));
    letter-spacing: 21.6px;
    color: #29282b;
    text-transform: uppercase;
    font-weight: 600;
    visibility: hidden;
    transition: 0.8s ease;
}

.packaging_item:hover .packaging_item--overlay,
.print_graphics__item:hover .print_graphics--overlay {
    bottom: 0;
    visibility: visible;
}

.packaging_item--img,
.print_graphics__img {
    width: 100%;
}

.packaging_item--img picture,
.print_graphics__img picture {
    display: block;
}

.packaging_item--img picture img,
.print_graphics__img picture img {
    width: 100%;
    object-fit: cover;
}

.packaging_hero-section {
    position: relative;
}

.packaging_hero-section .bg-image img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.packaging_hero__text {
    position: absolute;
    display: inline-block;
    z-index: 1;
    bottom: 5.85366vw;
    left: 8.53659vw;
    color: white;
}

.packaging_hero__text.dark {
    color: #29272a;
}

.packaging_hero__text h1 {
    font-size: 90px;
    text-transform: uppercase;
    letter-spacing: 0.09463vw;
    margin: 0px 0px 0.73171vw 0px;
    font-weight: 600;
}

.packaging_hero__text h4 {
    font-size: calc(16px + 30*((100vw - 320px) / 3780));
    letter-spacing: 0.06415vw;
    display: block;
    margin: 0;
    font-weight: 600;
}

.packaging_content {
    padding: 4.5122vw 0px;
    display: flex;
    overflow: hidden;
}

.packaging_content .packaging_content__aside {
    flex: 0 0 25%;
}

.packaging_content .packaging_content__main {
    flex: 0 0 75%;
    text-align: justify;
    border-left: 1px solid #000;
}

.packaging_content .packaging_content__aside,
.packaging_content .packaging_content__main {
    color: #29272a;
    font-size: calc(16px + 26*((100vw - 320px) / 3780));
    line-height: 178.57143%;
    padding: 0px 2.43902vw;
}

.packaging_content .text-block__bold {
    font-weight: 600;
    margin: 0px 10px 0px 0px;
}

.packaging_content .rating {
    display: flex;
    position: relative;
    width: 100%;
}

.packaging_content .rating .text-block__bold {
    padding: 11px 10px 0 0;
}

.packaging_content .rating a {
    color: inherit !important;
}

.packaging_content .rating .stars {
    display: flex;
    align-items: center;
    margin: 0 20px 0 0;
    width: calc(350 / 4100* 100vw);
}

.packaging_content .rating .count {
    font-size: calc(16px + 6*((100vw - 320px) / 3780));
    padding: 13px 10px 0 0;
}

.packaging_content__main .packaging_content__title {
    font-size: inherit;
    color: inherit;
    font-weight: 600;
}

.packaging_content__main .text_content {
    margin: 0px 0px 1.82927vw 0;
}

.text_italic {
    font-style: italic !important;
}

.packaging_cta-images {
    display: flex;
    flex-wrap: wrap;
}

.packaging_cta__item {
    position: relative;
}

.packaging_cta__item .packaging_cta__img-logo {
    position: absolute;
    width: 17.43902vw;
    height: 13.41463vw;
    bottom: 5.60976vw;
    right: 5.60976vw;
}

.packaging_cta__item .packaging_cta__img-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.packaging_cta__item {
    z-index: 2;
}

.packaging_cta__item picture {
    display: block;
    height: 100%;
}

.packaging_cta__item.h-auto picture img {
    height: 100%;
    object-fit: cover;
}

.crunchy-granola_cta>.packaging_cta-images,
.crunchy-granola_cta>.packaging_cta-images .d-flex,
.elegant-disposable-flatware_cta>.packaging_cta-images {
    flex-direction: column;
    gap: 1.21951vw;
}

.crunchy-granola_cta>.packaging_cta-images .w-md-50 {
    width: 100%;
}

.elegant-disposable-flatware_cta>.packaging_cta-images .packaging_cta__item picture+picture {
    margin-top: 1.21951vw;
}


/* Print Graphics */

.print_graphics__wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* grid-auto-rows: 450px; */
    padding-top: 45px;
}

.print_graphics__item {
    display: inline-block;
    height: fit-content;
    overflow: hidden;
}

.print_graphics__item.wide {
    grid-column: span 2;
}

.print_graphics__item.tall {
    grid-row: span 2;
}

.print_graphics__item:nth-child(2) {
    grid-row: 1 / 3;
    grid-column: 3;
}

.print_graphics__item:nth-child(4) {
    grid-row: 2 / 4;
    grid-column: 1;
}

.print_graphics__item:nth-child(6) {
    grid-row: 2 / 3;
    grid-column: 3;
    margin-top: auto;
}

.print_graphics__item:nth-child(7) {
    grid-row: 2 / 4;
    grid-column: 4;
}

.print_graphics__item:nth-child(9) {
    grid-row: 3 / 4;
    grid-column: 4;
    margin-top: auto;
}

.print_graphics__item:nth-child(10) {
    grid-row: 3 / 5;
    grid-column: 1;
    margin-top: auto;
}

/*  */

@font-face {
    font-family: 'Clash Display';
    src: url('../fonts/clash-display.woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'Clash Display';
    src: url('../fonts/clash-display-medium.woff2');
    font-weight: 500;
}

.passionate-pages {
    padding: 108px 40px 0px 40px;
    font-family: "DM Sans", sans-serif;
    overflow: hidden;
}

.passionate_hero {
    padding-top: 36px;
}

.passionate_hero h1 {
    color: #000;
    font-family: 'Clash Display', serif;
    font-size: 60px;
    line-height: 1.3em;
    text-align: center;
    margin: 0;
    font-weight: 400;
}

.passionate_hero_links {
    padding: 70px 0 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.passionate_hero_links_items {
    display: flex;
    flex-direction: column;
    align-items: start;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dmsans.woff2');
    font-weight: 400;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dmsans-medium.woff2');
    font-weight: 500;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dmSans-bold.woff2');
    font-weight: 700;
}

.passionate_hero_links_items span {
    color: #ababab;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6em;
}

.passionate_hero_links_items a {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.6em;
}

.passionate_hero_links_items .social-link {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.passionate_hero_links_items:nth-child(1) {
    width: 25%;
    padding-right: 20px;
}

.passionate_hero_links_items:nth-child(2) {
    /* width: 43%; */
    padding-right: 40px;
}

.passionate_hero_links_items:nth-child(3) {
    width: 14%;
    padding-right: 0px;
}

.passionate_hero_links_items:nth-child(4) {
    width: 18%;
    padding-right: 0px;
}

.studeo_hero_video {
    background-color: #13d2c3;
    padding: 4% 10% 0;
    margin-top: 40px;
    /* margin-bottom: 120px; */
}

.studeo_hero_video video {
    width: 100%;
    display: block;
}

.studeo_about-section {
    padding: 0 12%;
    margin: 120px 0;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: start;
}

@font-face {
    font-family: 'Helvetica';
    src: url('../fonts/helvetica.ttf');
}

.studeo_about-section_title {
    width: 100%;
    background-image: url('../images/web/studeo/title.svg');
    padding: 20px 0px 0px 0px;
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 445px auto;
}

.studeo_about-section h2 {
    color: #1a5352;
    font-family: "Helvetica", Sans-serif;
    font-size: 139px;
    line-height: 1em;
}

.studeo_about-section_content {
    display: flex;
    font-family: "Helvetica", Sans-serif;
}

.studeo-about-content {
    max-width: 50%;
}

.studeo-problem-content {
    max-width: 50%;
    padding-left: 9%;
    margin-top: -80px;
}

.studeo-about-content p,
.studeo-problem-content p {
    margin: 0;
    color: #424753;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6em;
}

.studeo-problem-content h3 {
    font-size: 40px;
    line-height: 1em;
    color: #1a5352;
    margin-bottom: 40px;
}

.studeo_timeline-section h3 {
    font-size: 80px;
    color: #1a5352;
    line-height: 1em;
}

.studeo_solution-section {
    position: relative;
    background-color: #f0fffe;
}

.studeo_solution-section_content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 8%;
    padding-left: 12%;
    display: flex;
    flex-direction: column;
    gap: 25px;
    font-family: "Helvetica", Sans-serif;
}

.studeo_mobile-mockup h2,
.studeo_solution-section_content h3,
.studeo_customicon-section h2 {
    color: #1a5352;
    font-size: 80px;
    line-height: 1em;
    font-family: "Helvetica", Sans-serif;
    margin: 0;
}

.studeo_solution-section_content p {
    color: #424753;
    font-family: "Helvetica", Sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6em;
    margin: 0;
    max-width: 370px;
}

.studeo_thanks-section {
    padding-top: 120px;
    text-align: center;
}

.studeo_mobile-mockup {
    position: relative;
    background-color: #13D2C3;
    background-image: url('../images/web/studeo/abstract-1.svg');
    background-position: 100% 100px;
    background-repeat: no-repeat;
    background-size: 16.25% auto;
    display: flex;
    flex-direction: column;
    gap: 100px;
    padding: 120px 0 209px;
}

.studeo_mobile-mockup::before {
    background-image: url('../images/web/studeo/abstract-2.svg');
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 15% auto;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.studeo_mobile-mockup h2 {
    color: #fff;
    text-align: center;
}

.studeo-mobile-mockup_wrapper {
    display: flex;
    justify-content: space-between;
    margin: 0 -1.1%;
}

.studeo-mobile-mockup_img {
    width: 16.5%;
}

.studeo-mobile-mockup_img:nth-child(odd) {
    margin-top: 8vw;
}

.studeo_customicon-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 120px 0;
    text-align: center;
}

.studeo_customicon-section p {
    max-width: 667px;
    color: #424753;
    font-family: "Helvetica", Sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6em;
    margin: 0 auto 1em;
}

.studeo_cta-section {
    padding-top: 120px;
    display: flex;
    flex-wrap: wrap;
    background-color: #13d2c3;
    background-image: url('../images/web/studeo/abstract-3.svg');
    background-position: 88.4% 0px;
    background-repeat: no-repeat;
    background-size: 47% auto;
    justify-content: space-between;
    position: relative;
}

.studeo_cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/web/studeo/abstract-4.svg');
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: 49% auto;
}

.studeo_cta-section_img {
    position: relative;
}

.studeo_cta-section_img img {
    width: 100%;
}

.studeo_cta-section_img p {
    color: white;
    font-family: "Helvetica", Sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.6em;
    margin: 0;
}

.studeo_cta-section_img>div {
    padding: 0 0% 0 15%;
}

/* PRIVIO PAGE */
.privio_main-section {
    background-color: #131128;
    background-image: url('../images/web/privio/privio-main.webp');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-top: 15%;
    margin-bottom: 115px;
    margin-top: 40px;
    color: #a396e7;
    overflow: hidden;
    font-family: "DM Sans", sans-serif;
}

.privio_main-section_header_logo {
    position: absolute;
    top: 40px;
    left: 40px;
    max-width: 17%;
}

.privio_main-section_hero {
    position: relative;
}

.privio_main-section_hero_content {
    position: absolute;
    inset: 0;
}

.privio_about {
    padding: 0 80px;
    display: flex;
    position: relative;
}

.privio_about_content,
.privio_about_image {
    width: 50%;
}

.privio_about_content {
    padding-right: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.privio-heading {
    font-size: 24px;
    font-weight: bold;
    font-family: "Clash Display", sans-serif;
    margin: 0;
}

.privio-paragraph {
    font-size: 16px;
    margin-bottom: 1em;
}

.privio_about_content .privio-paragraph {
    max-width: 431px;
}

.privio_userflow {
    padding: 5% 0;
    position: relative;
}

.privio_userflow .privio-heading {
    position: absolute;
    left: 80px;
}

.privio_wireframes {
    position: relative;
}

.privio_wireframes_content {
    position: absolute;
    top: 59px;
    right: 0;
    width: 37.7%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 10vw;
}

.privio_wireframes_content-more {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 50%;
    padding-right: 13.8vw;
}

.privio_colors {
    padding: 6% 0;
    display: flex;
    flex-wrap: wrap;
}

.privio_colors_content {
    padding-left: 80px;
}

.privio_colors_content,
.privio_colors_icons {
    width: 50%;
}

.privio_colors_icons {
    padding-right: 80px;
}

.privio_options {
    background-color: #3f336b;
}

.privio_options_image {
    padding: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.privio_options_image .privio_options_image_wrapper {
    border: solid 10px #6457ac;
    border-radius: 28px;
    overflow: hidden;
    max-width: 30%;
}

.privio_options_image video {
    width: 100%;
}

.privio_options_content {
    padding-left: 16%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.privio_options_content .privio-paragraph {
    max-width: 431px;
}

.privio_options:nth-child(even) {
    background-color: #131128;
}

/* PRIVIO PAGE */

/* WORK PAGE */

.work_list {
    min-height: 100vh;
    display: flex;
}

.work_list-item {
    position: relative;
}

.work_list-item h4 {
    z-index: 2;
    white-space: nowrap;
    transition: all 1s ease 0s;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    top: 50%;
    font-size: calc(5px + 57*((100vw - 320px) / 3780));
    font-weight: 600;
    letter-spacing: .10244vw;
    color: #fff;
    width: 100%;
    left: 0;
    opacity: 0;
    transform: translate(0, 200%);
}


.work_list-item h5 {
    position: absolute;
    bottom: 2.92683vw;
    width: 100%;
    left: 0;
    z-index: 2;
    transition: all 0.8s ease 0s;
    font-size: calc(5px + 37*((100vw - 320px) / 3780));
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .10244vw;
    text-align: center;
}

.work_list-item .img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.work_list-item .img::after {
    transition: all 0.8s ease 0s;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #29272a;
    opacity: .3;
}

.work_list-item:hover .img::after {
    opacity: 0;
}

.work_list-item .img img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

/* Solace Page  */
.solance_hero_imgs {
    margin: 0 auto;
    max-width: 1600px;
    display: flex;
    flex-direction: column;
    gap: 60px;
    padding: 40px 0;
}

.solance_hero_imgs img {
    display: block
}

.hyre-page {
    font-family: 'DM Sans', sans-serif;
    padding-bottom: 115px;
}

.hyre-page h1,
.hyre-page h2,
.hyre-page h3,
.hyre-page h4,
.hyre-page h5,
.hyre-page h6 {
    font-family: 'Clash Display', sans-serif;
}

.hyre-main {
    position: relative;
    background-image: linear-gradient(90deg, #5a5ee0 0%, #2ee5b5 100%);
}

.hyre-main_image {
    position: absolute;
    inset: 0;
    background-image: url('../images/web/hyre/main-page.svg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.hyre-main_content {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.hyre-main_content_logo_content {
    padding: 0% 18% 8% 19.5%;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.hyre-main_content_logo_content p,
.hyre-main_content_text p {
    font-size: 16px;
    color: rgba(255, 255, 255, .74);
    margin-bottom: 1em;
}

.hyre-main_content_text {
    padding: 9% 0% 0% 0%;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
    gap: 50px;
    position: relative;
}

.hyre-main_content_text h4 {
    max-width: 453px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    margin: 0;
    padding-bottom: 20px;
}

.hyre-main_content_text p {
    max-width: 431px;
}

.hyre-timeline {
    background-color: #f2f9ff;
    padding: 100px 80px 60px 80px;
}

.hyre-timeline-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
}

.hyre-timeline-line {
    width: 86%;
    height: 4px;
    display: block;
    background-color: #5666e1;
}

.hyre-timeline-line2 .hyre-timeline-line {
    width: 40% !important;
}

.hyre-timeline-item {
    width: 100%;
    max-width: 15%;
    display: block;
    margin-top: -21px;
    color: #5666e1;
}

.hyre-timeline-item_icon {
    display: inline-block;
}

.hyre-timeline-item_icon svg {
    margin-left: -12px;
    width: 50px;
    height: 50px;
    display: block;
}

.hyre-timeline-item h4 {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.hyre-timeline-item p {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2em;
    margin: 0;
}

.hyre-about-section {
    background-color: #f2f9ff;
    background-image: url('../images/web/hyre/brand-guide-bg.svg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.hyre-brandguide {
    padding: 100px 0px 50px 0px;
    display: flex;
    position: relative;
}

.hyre-brandguide_text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-left: 80px;
    gap: 20px;
}

.hyre-brandguide_text h2 {
    margin: 0;
    color: #5666e1;
    font-size: 30px;
    font-weight: bold;
    max-width: 477px;
    width: 100%;
}

.hyre-brandguide_text p {
    font-size: 16px;
    color: #434a54;
    margin-bottom: 1em;
    max-width: 477px;
    width: 100%;
    padding-right: 20%;
}

.hyre-brandguide_text h3 {
    margin: 0;
    color: #434a54;
    font-size: 26px;
    font-weight: bold;
    width: 100%;
    max-width: 477px;
}

.hyre-brandguide_content,
.hyre-brandguide_image {
    width: 50%;
}

.hyre-about-guide {
    padding: 0 40px;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
}

.hyre-about-guide_item {
    width: 50%;
}

.hyre-about-guide_item:nth-child(1) {
    margin-top: -8%;
}

.hyre-about-guide_item:nth-child(3) {
    margin-top: -14%;
}

.hyre-iconography {
    background-color: #f2f9ff;
    padding: 0 80px 60px 80px;
}

.hyre-iconography-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.hyre-iconography_item_text {
    padding-right: 80px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.hyre-iconography_item_text h2 {
    color: #434a54;
    font-size: 26px;
    font-weight: bold;
    margin: 0;
}

.hyre-iconography_item_text_image {
    padding-bottom: 20px;
}

.hyre-iconography_item_text_image img {
    width: 40%;
}

.hyre-iconography_item_text p {
    margin-bottom: 1em;
    font-size: 16px;
    color: #434a54;
    max-width: 431px;
}

.hyre-iconography_item_image {
    padding-left: 80px;
}

.hyre-mascot {
    padding: 0 80px;
    background: #f2f9ff;
}

.hyre-mascot-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.hyre-mascot_item {
    width: 25%;
}

.hyre-mascot_item_text {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.hyre-mascot_item_text h2 {
    color: #434a54;
    font-size: 26px;
    font-weight: bold;
    margin: 0;
}

.hyre-mascot_item_text p {
    font-size: 16px;
    color: #434a54;
    max-width: 431px;
    margin-bottom: 1em;
}

.hyre-mascot_item_image {
    width: 75%;
    margin: 0 auto;
}

.hyre-mascot-2 {
    padding-bottom: 100px;
}

.hyre-website {
    background-color: #f2f9ff;
    padding: 0px 80px 0px 80px;
}

.hyre-website-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.hyre-website_item:nth-child(1) {
    width: 45%;
}

.hyre-website_item:nth-child(2) {
    width: 55%;
}

.hyre-website_item_text {
    max-width: 500px;
    text-align: center;
    padding-right: 80px;
}

.hyre-website_item_text h2 {
    margin-bottom: 20px;
    color: #5666e1;
    font-size: 30px;
    font-weight: bold;
}

.hyre-website_item_text p,
.hyre-website_item_imagetext p {
    color: #434a54;
    font-size: 16px;
    margin-bottom: 1em;
}

.hyre-website_item_image1 {
    margin-top: 60%;
}

.hyre-website_item_image1 img {
    width: 90%;
}

.hyre-website_item_imagetext {
    padding-left: 80px;
    max-width: 392px;
}

.hyre-cta-sec1 {
    background-color: #f2f9ff;
    background-image: url('../images/web/hyre/hyre-cta-img1.svg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
}

.hyre-webdesign {
    background-color: #f2f9ff;
}

.hyre-webdesign-wrapper {
    display: flex;
    justify-content: center;
    position: relative;
    padding-bottom: 4%;
}

.hyre-webdesign-wrapper .hyre-webdesign_item {
    z-index: 2;
    width: 40%;
}

.hyre-webdesign-wrapper .hyre-webdesign_item:nth-child(1) {
    position: absolute;
    top: 13%;
    left: 0;
    width: 42%;
    z-index: 3;
}

.hyre-webdesign-wrapper .hyre-webdesign_item:nth-child(3) {
    position: absolute;
    top: 20.6%;
    right: 0;
    width: 38.4%;
    z-index: 1;
}

.hyre-wireframe {
    background-color: #f2f9ff;
    padding: 0px 80px 80px 80px;
}

.hyre-wireframe-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.hyre-wireframe_content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-right: 60px;
}

.hyre-wireframe_content h2 {
    margin-bottom: 0px;
    color: #5666e1;
    font-size: 30px;
    font-weight: bold;
    max-width: 500px;
    text-align: center;
}

.hyre-thanks {
    background-color: #f2f9ff;
    background-image: url('../images/web/hyre/hyre-thanks-bg.svg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.hyre-homescreen {
    background-color: transparent;
    background-image: linear-gradient(180deg, #f2f9ff 79%, #fff 0%);
    padding: 50px 0px 80px 0px;
    position: relative;
    z-index: 1;
}

.hyre-homescreen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background-color: #f2f9ff; */
    background-image: url('../images/web/hyre/hyre-homescreen-bg.svg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: -1;
}

.hyre-homescreen-item {
    padding: 0px 80px;
}

.hyre-homescreen-item:nth-child(1) {
    padding-bottom: 70px;
}

.hyre-mobilescreens {
    background-color: #f2f9ff;
}

.hyre-desktopapp {
    background-color: #f2f9ff;
    padding: 50px 80px 80px 80px;
}

.hyre-desktopapp-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.hyre-desktopapp_item_text {
    padding-right: 60px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hyre-desktopapp_item_text h2 {
    margin-bottom: 20px;
    color: #5666e1;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}

.hyre-desktopapp_item_text img {
    width: 60%;
}

.hyre-uielements {
    background-image: url('../images/web/hyre/hyre-uielements-bg.svg');
    background-position: 0px 130%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    padding: 0px 80px 60px 80px;
}

.hyre-uielements-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.hyre-uielements_item h2 {
    max-width: 477px;
    padding-bottom: 20px;
    margin: 0;
    color: #434a54;
    font-size: 26px;
    font-weight: bold;
}

.hyre-uielements_item_image {
    text-align: center;
    margin-bottom: 34vh;
    padding-bottom: 40px;
}

.hyre-uielements_item .hyre-uielements_item_image img {
    width: 68.125%;
}

.hyre-uielements_item h3 {
    padding-bottom: 30px;
    margin: 0;
    color: #5666e1;
    font-size: 26px;
    font-weight: bold;
    max-width: 500px;
}

.hyre-uielements_item p {
    max-width: 450px;
    margin-bottom: 1em;
    font-size: 16px;
    color: #434a54;
    padding-right: 0.5em;
}

.hyre-uielements_item:nth-child(2) {
    padding-top: 57px;
}

.hyre-uielements_item:nth-child(2) h2 {
    display: none;
}

.hyre-uielements_item:nth-child(2) img {
    width: 66.375%;
}

.nymble-main {
    padding: 0 40px 115px;
}

.nymble-page h1,
.nymble-page h2,
.nymble-page h3,
.nymble-page h4,
.nymble-page h5,
.nymble-page h6 {
    font-family: 'Clash Display', serif;
}

.nymble-screens {
    background-color: #2d325a;
    background-image: url('../images/web/nymble/nymble-screen-bg.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    position: relative;
}

.nymble-screens::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    background-image: url('../images/web/nymble/nymble-screen-bg_overlay.svg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.nymble-screens_content {
    position: relative;
    z-index: 1;
}

.nymble-screens_title {
    padding: 150px 80px 0px 80px;
}

.nymble-heading {
    /* max-width: ; */
    font-size: 24px;
    font-weight: bold;
    line-height: 1em;
    margin: 0;
    color: white;
    margin: 0;
}

.nymble-screens_title .nymble-heading {
    max-width: 1256px;
    margin: 0 auto;
}

.nymble-screens_img:nth-child(2) {
    margin-top: -150px;
}

.nymble-screens_iconography {
    padding: 80px 80px 0px 80px;
}

.nymble-screens_iconography_wrapper {
    max-width: 1256px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.nymble-screens_colors_item,
.nymble-screens_iconography_item {
    width: 100%;
}

.nymble-screens_colors_item h2,
.nymble-screens_iconography_item h2 {
    padding-bottom: 20px;
}

.nymble-screens_colors_item p,
.nymble-screens_iconography_item p {
    margin-bottom: 1em;
    padding-bottom: 30px;
    color: rgba(255, 255, 255, .4);
    max-width: 313px;
    font-size: 16px;
}

.nymble-screens_iconography_item .icon_wrapper {
    margin-left: -30px;
}

.nymble-screens_iconography_item .icon_wrapper img {
    width: 75%;
}

.nymble-screens_iconography_item:nth-child(2) {
    display: flex;
    align-items: end;
}

.nymble-screens_colors {
    padding: 120px 80px 140px 80px;
}

.nymble-screens_colors_item .color_wrapper img {
    width: 72%;
}

.nymble-screens_colors_item:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.nymble-screens_colors_item:nth-child(2) img:nth-child(1) {
    width: 39%;
    margin: 0px 0px -39px -12px;
}

.nymble-screens_colors_item:nth-child(2) img:nth-child(2) {
    width: 52%;
}

.nymble-cta {
    background-color: #2d325a;
    background-image: url('../images/web/nymble/nymble-cta-bg.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

.nymble-cta_section {
    padding: 80px 40px 120px 40px;
}

.nymble-cta_section .nymble-cta_img {
    text-align: center;
}

.nymble-cta_section .nymble-cta_img img {
    width: 80%;
}

.nymble-web-application {
    padding: 160px 80px 80px 80px;
}

.nymble-web-application_wrapper {
    max-width: 1256px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.nymble-web-application_item:first-child {
    padding-right: 60px;
    position: relative;
}

.nymble-web-application_item .nymble-heading {
    font-size: 30px;
    margin-bottom: 30px;
}

.nymble-web-application_item p {
    font-size: 16px;
    max-width: 480px;
    color: rgba(255, 255, 255, .4);
    margin-bottom: 1em;
    padding-bottom: 40px;
}

.nymble-wireframes {
    padding: 160px 20px 0px 20px;
}

.nymble-wireframes_wrapper {
    max-width: 1376px;
    margin: 0 auto;
    padding-left: 60px;
    position: relative;
}

.nymble-wireframes .nymble-heading {
    margin-bottom: 30px;
}

.nymble-wireframes_text {
    position: absolute;
    bottom: 10%;
    left: 0;
    max-width: 25%;
    padding-bottom: 40px;
}

.nymble-wireframes_text p {
    font-size: 16px;
    color: rgba(255, 255, 255, .4);
    margin-bottom: 1em;
}

.nymble-branding {
    background-image: url('../images/web/nymble/nymble-branding-bg.jpg');
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 17% 80px 0% 80px;
}

.nymble-branding-guide {
    max-width: 1256px;
    margin: 0 auto;
    position: relative;
}

.nymble-sec-count {
    font-family: "Poppins", Sans-serif;
    font-size: 70px;
    font-weight: bold;
    line-height: 1em;
    color: rgba(255, 255, 255, .07);
    position: absolute;
    top: -30px;
    left: -23px;
}

.nymble-branding-guide .nymble-heading {
    margin-bottom: 30px;
    font-size: 30px;
}

.nymble-branding-guide .nymble-branding-text {
    max-width: 391px;
}

.nymble-branding-guide .nymble-branding-text p {
    font-size: 16px;
    color: rgba(255, 255, 255, .4);
    margin-bottom: 1em;
}

.nymble-branding-img.img1 {
    padding-bottom: 130px;
    text-align: center;
}

.nymble-branding-img.img1 img {
    width: 90%;
}

.nymble-guide-wrapper {
    display: flex;
    justify-content: space-between;
}

.nymble-guide-wrapper .nymble-branding-img:nth-child(1) {
    max-width: 45.7%;
}

.nymble-guide-wrapper .nymble-branding-img:nth-child(2) {
    max-width: 50.4%;
}

.nymble-branding-content {
    padding-top: 9%;
}

.nymble-branding-content_text {
    max-width: 1600px;
    margin: 0 auto;
}

.nymble-branding-content h4 {
    text-align: left;
    font-family: "Poppins", Sans-serif;
    font-size: 9.2vw;
    font-weight: 700;
    line-height: 1.3em;
    letter-spacing: -4.1px;
    background-color: transparent;
    background-image: linear-gradient(90deg, #ff83a5 0%, #d167cb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    background-position: center;
    background-size: cover;
    margin: 0;
}

.nymble-branding-content h4:nth-child(2) {
    margin-top: -3%;
    padding-left: 22%;
}

.nymble-branding-content h4:nth-child(3) {
    margin-top: -3%;
    text-align: right;
}

.nymble-website-content-text {
    max-width: 1256px;
    margin: 0 auto;
    position: relative;
}

.nymble-website-content-text .nymble-heading {
    font-size: 30px;
    padding-bottom: 30px;
}

.nymble-website-content-text p {
    max-width: 480px;
    padding-bottom: calc(40px + 1em);
    font-size: 16px;
    color: rgba(255, 255, 255, .4);
    margin: 0;
}

.nymble-logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #f7f9fa;
    height: 100%;
    position: relative;
}

.nymble-logo-item1 {
    width: 100%;
    text-align: center;
    padding: 10% 0;
    background-color: #6045e2;
}

.nymble-logo-item1+.nymble-logo-item1 {
    background-color: #2d325a;
}

.nymble-logo-item1 img {
    width: 36.6%;
}

.nymble-logo-item .logo1 {
    max-width: 47.3%;
    margin: 0 auto;
}

.nymble-logo-item p {
    max-width: 318px;
    bottom: 0px;
    z-index: 3;
    color: rgba(65, 66, 83, .5);
    left: 40px;
    position: absolute;
    font-size: 16px;
    margin-bottom: 1em;
    padding-bottom: 15px;
}

.nymble-website1 {
    background-color: #6045e2;
}

.nymble-website1_img {
    padding: 0px 80px 80px 80px;
}

.nymble-website1_wrapper>div:nth-child(1) img {
    border-radius: 20px 20px 0px 0px;
}

.nymble-website1_wrapper>div:nth-child(3) img {
    border-radius: 0px 0px 20px 20px;
    box-shadow: 0px 120px 100px -70px rgba(45, 50, 90, .72);
}

.nymble-website1_wrapper {
    max-width: 1256px;
    margin: 0 auto;
}

.nymble-website2_img {
    padding: 100px 80px 0px 8px;
}

.nymble-website2_wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding-bottom: 60px;
    text-align: center;
}

.nymble-hero {
    background-image: url('../images/web/nymble/nymble-main-bg.webp');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.nymble-hero_logo {
    padding: 80px 80px 0px 80px;
}

.nymble-hero_logo_wrapper {
    position: relative;
    max-width: 1256px;
    margin: 0 auto;
}

.nymble-hero_logo img {
    width: 81.55%;
}

.nymble-hero_logo_wrapper .nymble-heading {
    font-size: 30px;
    padding-bottom: 50px;
}

.nymble-hero_logo_wrapper>div {
    padding: 150px 0;
}

.nymble-hero_logo_content {
    padding: 80px 80px 140px 80px;
}

.nymble-hero_logo_content_wrapper {
    max-width: 1256px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.nymble-hero_logo_content_img img {
    width: 64.4%;
}

.nymble-hero_logo_content_text p {
    max-width: 381px;
    color: rgba(255, 255, 255, .4);
    font-size: 16px;
    margin-bottom: 1em;
}

.nymble-steps {
    padding: 0px 0px 160px 0px;
}

.nymble-steps-wrapper {
    max-width: 1256px;
    margin: 0 auto;
}

.nymble-steps-text .nymble-heading {
    margin-bottom: 20px;
}

.nymble-steps-text p {
    max-width: 410px;
    color: rgba(255, 255, 255, .4);
    margin-bottom: 1em;
    font-size: 16px;
}

.nymble-steps-timeline {
    display: flex;
    flex-wrap: wrap;
}

.nymble-step-item {
    width: 100%;
    max-width: 10%;
    background-image: url('../images/web/nymble/nymble-line.svg');
    padding: 18px 0px 60px 0px;
    background-position: 23.5px 37px;
    background-repeat: no-repeat;
    background-size: 2px auto;
}

.nymble-step-item:nth-child(3),
.nymble-step-item:nth-child(5),
.nymble-step-item:nth-child(7) {
    background-position: 23.5px 0px;
}

.nymble-step-item:nth-child(9) {
    background-position: 23.5px -260px;
    padding: 18px 0 0 0;
}

.nymble-step-item img {
    width: 50px;
}

.nymble-step-content {
    width: 100%;
    max-width: 90%;
}

.nymble-step-content span {
    text-align: left;
    color: #767aa3;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.2em;
}

.nymble-step-content h3 {
    text-align: left;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2em;
    background-color: transparent;
    background-image: linear-gradient(90deg, #ff83a5 0%, #913fff 100%);
    background-clip: text;
    color: transparent;
    width: fit-content;
}

.nymble-main_hero {
    display: flex;
    flex-wrap: wrap;
    min-height: 106vh;
}

.nymble-main_hero_content {
    width: 100%;
    padding: 10.5% 0% 0% 10%;
}

.nymble-main_hero_content_logo {
    margin-bottom: 15vh;
}

.nymble-main_hero_content_logo img {
    width: 57%;
}

.nymble-main_hero_content .nymble-heading {
    max-width: 255px;
    font-size: 20px;
    line-height: 1.3em;
    padding-bottom: 20px;
}

.nymble-main_hero_content p {
    max-width: 332px;
    color: rgba(255, 255, 255, .4);
    font-size: 16px;
    margin-bottom: 1em;
}

.nymble-main_hero_img {
    width: 100%;
    position: relative;
}

.nymble-main_hero_img img,
.nymble-main_hero_img .mainimg1 {
    position: absolute;
}

.nymble-main_hero_img .mainimg1 {
    top: 17%;
    left: 5.2%;
    width: 71.8%;
}

.nymble-main_hero_img .mainimg2 {
    top: 49%;
    left: -1%;
    width: 17.35%;
}

.nymble-main_hero_img .mainimg3 {
    top: 20%;
    right: 13.8%;
    width: 20.22%;
}

.casestudy_box {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    margin-top: 1.75rem;
}

.casestudy_box>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Case Study MAin PAge */


/*logo_design_wrap*/
section.logo_design_wrap {
    position: relative;
    overflow: hidden;
}

section.logo_design_wrap .logo_tab {
    margin: 50px 0px;
}
section.logo_design_wrap .logo_tab .logo-nav {
    margin: 0px 0px 30px;
    gap: 10px;
    justify-content: center;
}

section.logo_design_wrap .logo_tab .logo-nav .nav-item {
}

section.logo_design_wrap .logo_tab .logo-nav .nav-item .nav-link {
    background: transparent;
    color: #29272a;
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    padding: 6px 15px;
    border: 1px solid #29272a;
    border-radius: 100px;
    width: 100%;
}

section.logo_design_wrap .logo_tab .logo-nav .nav-item .nav-link.active {
    background: #29272a;
    color: #fff;
}

section.logo_design_wrap .logo_tab .tab-content {}

section.logo_design_wrap .logo_tab .tab-content .images_taps {
    display: grid;
    grid-template-columns: repeat(4 ,1fr);
    gap: 30px;
}

section.logo_design_wrap .logo_tab .tab-content .images_taps img {
    width: 100%;
}
/*logo_design_wrap*/


/*home_base_wrap*/
section.casestudies_wrap.home_base_wrap {
    padding: 0px 0px 60px;
}

section.casestudies_wrap.home_base_wrap .page-header h1 {
    text-align: left;
    text-decoration: underline;
    letter-spacing: 2px;
    font-size: 25px;
}
section.casestudies_wrap.home_base_wrap .branding_view {
    font-size: 15px;
    letter-spacing: 3.6px;
}
section.casestudies_wrap.home_base_wrap .btn-load{
    background: #000;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    padding: 10px 30px;
    border-radius: 100px;
    margin: 50px 0px 0px;
}

section.casestudies_wrap.home_base_wrap .gallery-item{
   display:none;
}
section.casestudies_wrap.home_base_wrap .case-link {
    margin: 15px 0px 0px;
}

section.casestudies_wrap.home_base_wrap .case-link a {
    font-size: 18px;
    color: #000;
    font-weight: 600;
    position: relative;
}
section.casestudies_wrap.home_base_wrap .case-link a::after {
    content: "";
    height: 2px;
    background-color: #29272a;
    position: absolute;
    bottom: -3px;
    transition: all .3s ease 0s;
    left: 0;
    width: 0;
}
section.casestudies_wrap.home_base_wrap .case-link a:hover::after {
    width: 60%;
}
section.casestudies_wrap.home_base_wrap .case-link h6 {
    font-size: 16px;
    line-height: 20px;
    color: #000;
    font-weight: 600;
    margin: 8px 0px 0px;
}
/*home_base_wrap*/



/*  
 
Developed By: Velocitec Systems
https://velocitecsystems.com/
Developer: Shoaib Hussain

*/