.total-IntroBoxes--parent {
    display: flex;
    position: relative;
    max-width: 100%;
    min-width: 100%;
    z-index: 2;
    justify-content: center;
    text-align: center;
    align-items: center;
}


.--intro--bg--styles {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 2;
}

.-YourColor-Intro-Info {
    display: flex;
    align-items: center;
    max-width: 100%;
    justify-content: space-between;
    min-width: 100%;
    flex: 1;
    margin-bottom: 55px;
    position: sticky;
    border-radius: var(--largeradius);
    overflow: hidden;
}

 .YC-YourColor-Intro_title {
        line-height: 1.5;
        position: relative;
        color: var(--primary-text);
        margin-bottom: 10px;
        text-align: center;
        font-size: 72px;
        font-weight: 700;
        transition: all 0.3s ease;
}

.-YourColor-Intro-title {
    max-width: 950px;
    min-width: 650px;
    position: sticky;
    top: 12px;
    flex: 1;
    z-index: 22;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.-YourColor-Intro-title h4 {color: var(--uicolor);display: flex;width: max-content;font-size: 24px;font-weight: 500;margin-bottom: 18px;transition: all 0.3s ease;}

.-p-content {
    font-size: 24px;
    line-height: 1.7;
    color: #797EA6;
    font-weight: 400;
    display: block;
    text-align: center;
    max-width: calc(100% - 135px);
    margin-inline: auto;
    transition: all 0.2s ease;
}
.-YourColor-Intro-URL-BTN a {border: 0px solid transparent;display: inline-flex;align-items: stretch;font-size: 23px;overflow: visible;position: relative;z-index: 0;padding: 15px 24px;color: white;border-radius: 20px;font-weight: 400;background: linear-gradient(270deg, #4d89f9 20%, #704ee7 40%, #e8428c 80%, #ed6d4b 100%);background-size: 150%;transition: all .4s ease-in-out;background-position: left;}

.-YourColor-Intro-URL-BTN a i {
    font-weight: 600;
    font-size: 17px;
}

.YC-YourColor-Intro-slider {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    min-width: 100%;
    opacity: 0;
    overflow: hidden;
    border-radius: var(--largeradius);
}


.YC--YourColor-Intro-container-auto {
    display: flex;
    align-content: center;
    max-width: var(--container-width);
    min-width: var(--container-width);
    margin: 0 auto;
    flex-wrap: wrap;
    align-items: center;
    padding: var(--container-padding);
    justify-content: center;
    text-align: center;
    position: relative;
}


.YC--YourColor-Intro-largerContainer-auto {height: 100%;position: relative;padding-inline: 20px;z-index: 22;padding: 60px 0px 72px;margin-inline: 10px;margin: 0 auto;}

.YC--YourColor-Intro-largerContainer-auto svg {width: 100%;left: -20px;position: relative;height: 100%;opacity: 0.2;}


.YC_YourColor-container-Gallery {
    width: max-content;
    height: max-content;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    border: 1px solid #0000001a;
    margin: 17px;
}

.YC_YourColor-container-Gallery img {
    height: auto;
    width: 220px;
}

.YC_YourColor-container-Gallery-SecondHalf {transition-timing-function: linear !important;position: relative;display: flex;}

.YC_YourColor-Gallery-list {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline-end: 0;
    flex-direction: column;
}

.YC_YourColor-Gallery-list.Gallery-FirstHalf {
    margin-inline-end: 25px;
}

.YC-YourColor-Intro_title c--color {background: linear-gradient(270deg, #4d89f9 20%, #704ee7 40%, #e8428c 80%, #ed6d4b 100%);-webkit-background-clip: text !important;background-clip: text !important;-webkit-text-fill-color: transparent !important;vertical-align: baseline;margin: -1px 0;margin-inline: 5px;display: inline;padding-bottom: 15px;}

.YourColor-IntroBoxes::before {
    z-index: 5;
}
.YourColor-IntroBoxes::after {
    z-index: 3;
}

.-YourColor-Intro-URL-BTN {
    display: flex;
}

.YC-search-socialheader {
    background: linear-gradient(180deg, #FFFFFF0F 0%, #FFFFFF05 100%);
    border-radius: 555px 555px 555px 555px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    margin-top: 30px;
    overflow: hidden;
    position: relative;
}

.YC-search-socialheader form {
    font-size: 17px;
    line-height: 24px;
    padding: 14px 24px 14px 24px;
    color: #9D9EB6;
    width: 100%;
    display: flex;
    position: relative;
    border-radius: 555px 555px 555px 555px;
    overflow: hidden;
    align-items: center;
}

.YC-search-socialheader form input {
    border: 0 !important;
    background: 0 0 !important;
    color: inherit !important;
    flex: 1;
    padding-inline-start: 22px;
    color: white;
    font-size: 17px;
    font-weight: 300;
    z-index: 2;
    padding: 10px;
}

.YC-search-socialheader {
    display: flex;
}

.YC-search-socialheader form button {
    border: 0 !important;
    background: #FFFFFF17;
    padding: 8px 21px;
    color: white;
    border-radius: 60px;
    font-size: 19px;
    font-weight: 500;
}

.YC-search-socialheader form svg {
    color: #ABECD6;
}

.YC_YourColor-Gallery-list .swiper-wrapper {
    display: flex;
    flex-direction: column !important;
}

.-YourColor-Intro-BTN-v1 {
    margin-top: 30px;
}

.YC-YourColor-Intro_title h2 {
    display: flex;
    position: relative;
    font-size: 51px;
    line-height: 1.5;
    min-height: 72px;
    overflow: hidden;
    transition: 0.65s cubic-bezier(0.23,1,0.320,1);
}
.YC-YourColor-Intro_title span.change-hide {
     transform: translate3d(0,0,0) scale(1) rotateX(0) rotateY(0) rotateZ(0) skew(0,0);
    opacity: 1;
    filter: blur(0)
}

.YC-YourColor-Intro_title>h2>span.change-show {
    opacity: 0;
     transform: translate3d(var(--lqd-tr-leave-x,0.5em),var(--lqd-tr-leave-y,0),var(--lqd-tr-leave-z,0)) scale(var(--lqd-tr-leave-scale,1)) rotateX(var(--lqd-tr-leave-rotateX,0)) rotateY(var(--lqd-tr-leave-rotateY,0)) rotateZ(var(--lqd-tr-leave-rotateZ,0)) skew(var(--lqd-tr-leave-skewX,0),var(--lqd-tr-leave-skewY,0));
        opacity: var(--lqd-tr-leave-opacity,0);
        filter: blur(var(--lqd-tr-leave-blur,10px))
}
.YC-YourColor-Intro_title h2 span {
    position: absolute;
    text-overflow: ellipsis;
    max-width: 100%;
    top: 5%;
    right: 0px;
    opacity: 0;
    opacity: 1;
    transition: 0.65s cubic-bezier(0.23,1,0.320,1);
}


.YourColor-IntroBoxes {
	display: flex;
	margin: 0;
	transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;
	margin-bottom: 0px;
	padding-bottom: 60px;
	padding-top: 230px;
	flex-direction: column;
	position: relative;
	isolation: isolate;
	background-image: var(--bg-Boxes);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	overflow: hidden;
	min-height: 880px;
}

.YC_YourColor-container-Gallery- {display: flex;flex-direction: column;justify-content: center;align-items: center;margin-inline: auto;}
.YC_YourColor-container-Gallery-FirstHalf {
    flex-direction: row;
    display: flex;
    align-self: flex-end;
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
    padding-inline: 0;
    align-items: end;
    position: relative;
    max-width: var(--container-width);
    min-width: var(--container-width);
    gap: 4%;
}

.Gallery-slide-list {
    transform: translate3d(-40px, 40px, 0px) scale(0.4, 0.4) rotateX(0deg) rotateY(0deg) rotateZ(-30deg) skew(0deg, 0deg);
    opacity: 0;
    min-width: 305px;
    max-width: 305px !important;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: end;
    display: flex;
    transition: all 0.3s ease;
    transition: transform 0.5s ease, opacity 0.5s ease;
    height: 305px;
}

.Gallery-slide-list img {
    height: 100%;
    width: 100%;
}
.Gallery-slide-list:nth-child(1) .Gallery-slide-boxed {
      --e-transform-rotateZ: 40deg;
      transform: perspective(var(--e-transform-perspective,0)) rotate(var(--e-transform-rotateZ,0)) rotateX(var(--e-transform-rotateX,0)) rotateY(var(--e-transform-rotateY,0)) translate(var(--e-transform-translate,0)) translateX(var(--e-transform-translateX,0)) translateY(var(--e-transform-translateY,0)) scaleX(calc(var(--e-transform-flipX, 1) * var(--e-transform-scaleX, var(--e-transform-scale, 1)))) scaleY(calc(var(--e-transform-flipY, 1) * var(--e-transform-scaleY, var(--e-transform-scale, 1)))) skewX(var(--e-transform-skewX,0)) skewY(var(--e-transform-skewY,0));
      transform-origin: var(--e-transform-origin-y) var(--e-transform-origin-x);
}
.Gallery-slide-list:nth-child(2) .Gallery-slide-boxed {
      --e-transform-rotateZ: 30deg;
      transform: perspective(var(--e-transform-perspective,0)) rotate(var(--e-transform-rotateZ,0)) rotateX(var(--e-transform-rotateX,0)) rotateY(var(--e-transform-rotateY,0)) translate(var(--e-transform-translate,0)) translateX(var(--e-transform-translateX,0)) translateY(var(--e-transform-translateY,0)) scaleX(calc(var(--e-transform-flipX, 1) * var(--e-transform-scaleX, var(--e-transform-scale, 1)))) scaleY(calc(var(--e-transform-flipY, 1) * var(--e-transform-scaleY, var(--e-transform-scale, 1)))) skewX(var(--e-transform-skewX,0)) skewY(var(--e-transform-skewY,0));
      transform-origin: var(--e-transform-origin-y) var(--e-transform-origin-x);
}

.Gallery-slide-list:nth-child(4) .Gallery-slide-boxed {
      --e-transform-rotateZ: -20deg;
      transform: perspective(var(--e-transform-perspective,0)) rotate(var(--e-transform-rotateZ,0)) rotateX(var(--e-transform-rotateX,0)) rotateY(var(--e-transform-rotateY,0)) translate(var(--e-transform-translate,0)) translateX(var(--e-transform-translateX,0)) translateY(var(--e-transform-translateY,0)) scaleX(calc(var(--e-transform-flipX, 1) * var(--e-transform-scaleX, var(--e-transform-scale, 1)))) scaleY(calc(var(--e-transform-flipY, 1) * var(--e-transform-scaleY, var(--e-transform-scale, 1)))) skewX(var(--e-transform-skewX,0)) skewY(var(--e-transform-skewY,0));
      transform-origin: var(--e-transform-origin-y) var(--e-transform-origin-x);
}
.Gallery-slide-list:nth-child(5) .Gallery-slide-boxed {
      --e-transform-rotateZ: -40deg;
      transform: perspective(var(--e-transform-perspective, 0)) rotate(var(--e-transform-rotateZ, 0)) rotateX(var(--e-transform-rotateX, 0)) rotateY(var(--e-transform-rotateY, 0)) translate(var(--e-transform-translate, 0)) translateX(var(--e-transform-translateX, 0)) translateY(var(--e-transform-translateY, 0)) scaleX(calc(var(--e-transform-flipX, 1)* var(--e-transform-scaleX, var(--e-transform-scale, 1)))) scaleY(calc(var(--e-transform-flipY, 1)* var(--e-transform-scaleY, var(--e-transform-scale, 1)))) skewX(var(--e-transform-skewX, 0)) skewY(var(--e-transform-skewY, 0));
}


.largerContainer-svg {
    position: absolute;
    left: 0;
    position: absolute;
    left: 0;
    width: 310px;
    height: 100%;
    --glow-blur-value: 75px;
    filter: blur(var(--glow-blur-value));
    isolation: isolate;
    pointer-events: none;
    transform: perspective(var(--e-transform-perspective, 0)) rotateZ(var(--e-transform-rotateZ, 0)) rotateX(var(--e-transform-rotateX, 0)) rotateY(var(--e-transform-rotateY, 0)) translate3d(var(--e-transform-translateX, 0), var(--e-transform-translateY, 0), 0) scaleX(calc(var(--e-transform-flipX, 1)* var(--e-transform-scaleX, var(--e-transform-scale, 1)))) scaleY(calc(var(--e-transform-flipY, 1)* var(--e-transform-scaleY, var(--e-transform-scale, 1)))) skewX(var(--e-transform-skewX, 0)) skewY(var(--e-transform-skewY, 0));
    overflow: hidden;
    transition: background .3s, border .3s, border-radius .3s, box-shadow .3s, transform var(--e-transform-transition-duration, .4s);
    z-index: -1;
    opacity: 0.09;
}