@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap");
@import url("../../css/font-variable.css");
@font-face {
	font-family: "Avenir-Next-LT-Pro-Regular";
	font-weight: normal;
	font-style: normal;
	font-display: block;
	src: url("../../fonts/AvenirNextLTPro-Regular.ttf") format("truetype");
}
@font-face {
	font-family: "Avenir-Next-LT-Pro-Bold";
	font-weight: normal;
	font-style: normal;
	font-display: block;
	src: url("../../fonts/AvenirNextLTPro-Bold.ttf") format("truetype");
}
* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-decoration: none;
	list-style: none;
}
p,
h1,
h2,
h3,
h4,
h5,
h6,
.style-hub-supplement a,
.style-hub-supplement div {
	padding: 0;
	margin: 0 auto;
	box-sizing: border-box;
	text-decoration: none;
	list-style: none;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
	margin-bottom: 0.5rem;
}
.introduce-influencer--right a.influencer-see-room:hover {
	text-decoration: none;
	color: #ffffff;
}
.influencer-follow-social i.fa-linkedin-square,
.influencer-follow-social i.fa-facebook-square,
.follow-social-media i.fa-facebook-square {
	display: inherit;
}
.introduce-influencer .introduce-influencer--right p {
	text-align: left;
}
:root {
	--color-white: #ffffff;
	--color-blue-text: #351c75;
	--color-red-text: #741b47;
	--color-text-purple: #2d2673;
}
.blue-text {
	color: #00ffff;
}
.welcome-hub-section {
	max-width: 100vw;
	width: 100%;
	/* margin-top: -18px; */
}
.welcome-hub-container {
	display: flex;
}

.welcome-hub-container .left {
	width: 50%;
	/* flex:50%; */
}
.welcome-hub-container .right {
	width: 50%;
}
.welcome-style-wrapper {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;

	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.welcome-style-wrapper .title {
	font-size: 45px;
	color: var(--color-white);
	margin-bottom: 40px;

	text-transform: none;
  font-family: caveat, sans-serif;
}
.welcome-style-wrapper .content p,
.welcome-style-wrapper .content {
	max-width: 550px;
	font-size: 20px;
	color: #ffffff;
	text-align: center;

	font-family: "Avenir-Next-LT-Pro-Regular";
	line-height: 30px;
	font-weight: 300;
	width: 100%;
}
/* right */
.influencer-summary-wrapper {
	padding: 70px 50px 50px;
	position: relative;
	height: 100%;
}
.each-influencer-slider {
	width: 100%;
	box-shadow: 0px 0px 10px 1px #979797;
	border: 1px solid #ffffff;
}
.each-influencer-item .wrapper {
	padding: 26px 38px 26px 30px;
	display: flex;
}

.each-influencer-item .picture-container {
	margin-right: 30px;
}
.each-influencer-item .picture-container img {
	width: 320px;
	min-width: 320px;
	height: 320px;
	object-fit: cover;
}
.each-influencer-item .info-container {
	padding-top: 10px;
	overflow-wrap: break-word;
	display: flex;
	flex-direction: column;
}
.each-influencer-item .name-side {
	font-size: 32px;
	line-height: 40px;
	color: var(--color-blue-text);
}
.each-influencer-item .describe-side,
.each-influencer-item p {
	font-family: "Avenir Next LT Pro", sans-serif;
	font-size: 18px;
	color: #2e2773;
	letter-spacing: 0;

	line-height: 20px;
	flex: 1;
	margin-bottom: 20px;
	text-align: left;
}
.each-influencer-item .name-side .name-hashtag {
	font-size: 24px;
	color: var(--color-red-text);
}
.each-influencer-item .bottom-side {
	display: flex;
	justify-content: space-between;
}
.each-influencer-item .bottom-side .see-more {
	font-size: 16px;
	font-weight: 500;
	color: var(--color-blue-text);
	text-decoration: underline;

	text-transform: uppercase;
	text-underline-offset: 2px;
}
.each-influencer-item .icon-container {
	display: flex;
	align-items: center;
}
.each-influencer-item .icon-container a {
	font-size: 18px;
	color: var(--color-blue-text);
}
.each-influencer-item .icon-container img {
	height: 18px;
	width: 18px;
}
.each-influencer-item .icon-container a:not(:first-child) {
	margin-left: 5px;
}

@media screen and (max-width: 768px) {
	.each-influencer-item .icon-container {
		display: none;
	}
}

/* Primary influencer side */
.primary-influencer-slider {
	position: relative;
}
.influencer-summary-wrapper .bottom {
	display: none;
}
.prev-primary-influencer,
.next-primary-influencer {
	font-size: 35px;
	color: #d3d3d3;
	display: none;
	position: absolute;

	/* width:40px;
    height:40px; */
	display: flex;
	justify-content: center;

	align-items: center;
	outline: none;
	border: 0;
	background-color: transparent;
}
.prev-primary-influencer {
	top: 50%;
	transform: translateY(-50%);
	left: -20px;
}
.next-primary-influencer {
	top: 50%;
	transform: translateY(-50%);
	right: -20px;
}

.primary-influencer-item .slick-slider {
	margin: 0 20px;
}
/* the parent */
.primary-influencer-item .slick-track {
	margin-left: 0 -10px;
}
.primary-influencer-item .wrapper {
	padding: 10px 10px 20px;
	text-align: center;
	/* the children */
	margin: 10px 10px;
	box-shadow: 0px 0px 10px 1px #d5d5d5;
}
.primary-influencer-item .image-container img {
	object-fit: content-box;
	width: 100%;
	height: auto;
}
.primary-influencer-item .name-side {
	font-size: 20px;
	color: var(--color-blue-text);
}
.primary-influencer-item .name-hashtag {
	font-size: 18px;
	color: var(--color-red-text);
	margin-bottom: 30px;
}
.primary-influencer-item .bottom-side {
	display: flex;
	justify-content: space-between;
}

.primary-influencer-item .bottom-side .see-more {
	font-size: 11px;
	font-weight: 500;
	color: var(--color-blue-text);
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 2px;
}
.primary-influencer-item .icon-container {
	display: flex;
	align-items: center;
}
.primary-influencer-item .icon-container a {
	font-size: 13px;
	color: var(--color-blue-text);
}
.primary-influencer-item .icon-container a:not(:first-child) {
	margin-left: 5px;
}
/* Style hub supplement side */
.style-hub-supplement {
	margin-top: 40px;
	padding: 0 2%;
}
/* .style-hub-supplement .wrapper{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
} */
.style-hub-supplement .new-wrapper .info-supplement-cover {
	width: 100%;
	max-width: unset;
	padding-bottom: 40px;
}
/* .style-hub-supplement .new-wrapper .instagram-posts{
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .style-hub-supplement .new-wrapper .instagram-posts{
    margin-bottom: 20px;
  }
} */
.info-supplement-cover {
	border-top: 4px solid #33257c;
	max-width: 676px;
}
.info-supplement-cover .content-wrapper {
	padding: 0 50px;
}
.info-supplement-cover .title {
	font-size: 37px;
	color: var(--color-blue-text);
	margin-bottom: 28px;
	cursor: pointer;
	text-decoration: none;
}
.info-supplement-cover .title:hover {
	text-decoration: none;
}
.info-supplement-cover .image-container {
	width: 576px;
	height: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}
.info-supplement-cover .image-container img {
	object-fit: cover;
	width: 288px;
	height: 288px;
	padding: 4px;
}
.info-supplement-cover .image-container .stye-hub-img1 {
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
}
.info-supplement-cover .image-container .stye-hub-img1 img,
.info-supplement-cover .image-container .people-img-1 img,
.info-supplement-cover .image-container .people-img-2 img {
	width: 288px;
	height: 288px;
}
.info-supplement-cover .image-container .people-img-1 {
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
}
.info-supplement-cover .image-container .people-img-2 {
	grid-column: 3 / span 2;
	grid-row: 3 / span 2;
}
.info-supplement-slider {
	max-width: 100%;
}

.style-hub-supplement .follow-instagram-mobile,
.style-hub-supplement .follow-facebook-mobile {
	display: none;
}
.slider-mobile-container {
	display: none;
}
.style-hub-supplement .follow-side {
	text-align: center;
	/* position:absolute;
    content:'';
    bottom:0; */
}
.style-hub-supplement .follow-social-media p {
	background-color: #edf0ef;
	font-size: 10px;
	color: #545c6c;
	text-align: left;

	line-height: 10px;
	padding: 5px 10px;
	border-radius: 20px;
	display: inline-block;

	position: relative;
	top: -10px;
}
.style-hub-supplement .follow-social-media p:before {
	position: absolute;
	top: -20px;
	left: 0;
	content: "";

	width: 100%;
	height: 2px;
	background-color: #edf0ef;
}

/* Influencer page */
.introduce-influencer {
	min-height: 100%;
}
.introduce-influencer a {
	color: #43bbbe;
}
.introduce-influencer a:hover {
	color: #43bbbe;
}
.introduce-influencer--left {
	width: 30%;
	background-color: #e5e4f3;
}
.introduce-influencer--right {
	width: 100%;
}
.introduce-influencer--left .wrapper {
	padding: 20% 10%;
	height: 100%;
}
.introduce-influencer--left .image-avatar {
	margin-bottom: 12px;
}
.introduce-influencer--left .image-avatar img {
	width: 100%;
}
.introduce-influencer--left .information-side .title {
	font-size: 35px;
	text-align: center;
	color: var(--color-text-purple);
}
.introduce-influencer--left .information-side .content {
	max-width: 60%;
	text-align: center;
	margin: 0 auto 200px;
	font-size: 18px;

	font-family: Avenir-Next-LT-Pro-Regular;
	color: var(--color-text-purple);
	font-weight: 300;
}

.introduce-influencer--left .influencer-instagram-side .title {
	font-size: 30px;
	text-align: center;
	color: var(--color-text-purple);

	margin-bottom: 25px;
}
.influencer-instagram-box {
	padding: 10px 10px 20px;
	background-color: white;
	border-radius: 10px;
}
.influencer-instagram-box .direct-instagram {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}
.influencer-instagram-box .direct-instagram img {
	width: 60px;
	height: 60px;
	margin-right: 10px;
	object-fit: contain;
}
.influencer-instagram-box .direct-instagram span {
	font-family: AvenirNextLTPro-Regular;
	font-size: 19px;
	color: #595959;
}
.influencer-instagram-box .follow-button {
	text-align: center;
}
.influencer-instagram-box .follow-button a {
	font-family: AvenirNextLTPro-Regular;
	font-size: 14px;
	padding: 10px 15px;
	border-radius: 8px;

	color: #ffffff;
	background-color: #2d2673;
	position: relative;
	display: inline-block;
}
.influencer-instagram-box .feed-container {
	width: 100%;
	height: 288px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 2px;
	margin-bottom: 15px;
	overflow-y: scroll;
}
.influencer-instagram-box .instagram-image-item {
	cursor: pointer;
}
.influencer-instagram-box .feed-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Influencer-right side */
/* .introduce-influencer--right{
    padding:30px 5% 85px;
} */
.introduce-influencer--right {
	padding: 30px 15px 0;
	max-width: 780px;
	margin: 0 auto;
}
.introduce-influencer--right .assesment-side h1 {
	color: #000000;
	font-size: 24px;
	margin-bottom: 20px;
	text-align: left;
	line-height: 28px;
	font-weight: 700;
	text-transform: inherit;
}
.introduce-influencer--right .assesment-side h2,
.introduce-influencer--right .assesment-side h3,
.introduce-influencer--right .assesment-side .collection-side-title {
	/* color:var(--color-text-purple); */
	color: #000000;
	font-size: 18px;
	line-height: 22px;
	margin-bottom: 20px;

	font-weight: 700;
}
.introduce-influencer--right .assesment-side .normal-sub-title{
  font-size: 18px;
  line-height: 22px;
  margin-bottom: 20px;

  font-weight: 400;
}
.introduce-influencer--right a {
	color: #33247C;
}
.introduce-influencer--right .assesment-side .last-paragraph,
.introduce-influencer--right .assesment-side p {
	color: #000000;
	font-family: AvenirNextLTPro-Regular, sans-serif;
	font-size: 15px;
	line-height: 18px;

  margin-bottom: 20px;
}

.introduce-influencer--right .assesment-side .last-paragraph {
  margin-bottom: 40px;
}

.introduce-influencer--right .info-product-side {
	margin: 0 auto;
}

.introduce-influencer--right .info-product-side .mejs-container {
	margin: auto;
}
.introduce-influencer--right .introduce-influencer__video video {
	width: 100%;
	height: auto;
}

.introduce-influencer--right .wp-video {
  margin-bottom: 20px;
}

.introduce-influencer__video {
	position: relative;
	overflow: hidden;
	margin-bottom: 80px;
}
.introduce-influencer__video:hover .buttons-control button {
	display: block;
}
.introduce-influencer__video:hover .bar-duration {
	transform: translateY(0);
}
.introduce-influencer__video .buttons-control button {
	width: 60px;
	height: 60px;
	color: white;
	font-size: 30px;

	border-radius: 50%;
	background-color: transparent;
	border: 2px solid white;
	outline: 0;

	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;

	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;

	display: none;
	transition: all 0.25s;
}
.introduce-influencer__video .bar-duration {
	position: absolute;
	content: "";
	left: 0;
	bottom: 0px;

	width: 100%;
	height: 10px;
	background-color: gray;
	transform: translateY(100%);
	/* opacity:0.5; */

	transition: transform 0.25s;
	cursor: pointer;
}
.introduce-influencer__video .bar-duration .bar-current {
	width: 0;
	background-color: rgba(245, 234, 71, 0.8);
	height: 10px;
}
.influencer-product-name {
	font-size: 35px;
	color: var(--color-text-purple);
}
.influencer-product-content {
	font-family: AvenirNextLTPro-Regular;
	color: var(--color-text-purple);
	font-size: 19px;
	margin-bottom: 30px;
}
.influencer-product-image {
	display: grid;
	grid-template-columns: max-content max-content;
	column-gap: 10px;
	row-gap: 10px;

	margin-bottom: 18px;
	justify-content: center;
}
.influencer-product-image img {
	/* object-fit:cover; */
	width: 300px;
	height: 300px;
}
.influencer-see-side-1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.influencer-see-room {
	font-size: 18px;
	color: #ffffff;
	font-weight: 400;
	background-color: #811f5f;

	padding: 7px;
	border-radius: 8px;
	display: inline-block;
	line-height: 20px;
}
.influencer-see-collection {
	font-family: AvenirNextLTPro-Regular;
	display: inline-block;
	text-decoration: underline;
	color: var(--color-text-purple);
}
.influencer-see-collection:hover {
	color: var(--color-text-purple);
	text-decoration: underline;
}
.influencer-say-image {
	max-width: 610px;
	margin: 80px auto 32px;
	display: grid;
	column-gap: 5px;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
}
.influencer-say-image.one-image-only {
	display: block;
	text-align: center;
}
.influencer-say-image img {
	width: 100%;
}
.influencer-say-image video {
	width: 100%;
}
.influencer-say-image.one-image-only img,
.influencer-say-image.one-image-only video {
	width: 65%;
}
.influencer-say-image .image-1 {
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
}
.influencer-see-people {
	font-family: AvenirNextLTPro-Regular;
	font-size: 13px;
	text-decoration: underline;
	color: var(--color-text-purple);
}
.influencer-see-people:hover {
	color: var(--color-text-purple);
	text-decoration: underline;
}
.influencer-follow-social {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 15px;

	margin-top: 16px;
	border-top: 4px solid var(--color-text-purple);
}
.influencer-follow-social .follow-name {
	font-size: 30px;
	color: var(--color-text-purple);
	margin-left: 0;
	margin-bottom: 0;
}
.influencer-follow-social .social-icon-item {
	font-size: 20px;
	color: var(--color-text-purple);
}
.influencer-follow-social .social-icon-item:hover {
	color: var(--color-text-purple);
	cursor: pointer;
}
.influencer-follow-social .social-icon-item:not(:first-child) {
	margin-left: 5px;
}
.influencer-follow-social .social-icon-item img {
	width: 21px;
	height: 21px;
}
.footer-subscribe-newsletter {
	width: 100%;
	text-align: center;
	background-color: #33257c;
	padding: 5px 0 10px;
}
.footer-subscribe-newsletter .title {
	font-family: "Avenir-Next-LT-Pro-Bold";
	font-size: 20px;
	color: #ffffff;
	margin-bottom: 10px;
}
.footer-subscribe-newsletter input.mail-address {
	height: 32px;
	min-width: 250px;
	font-family: AvenirNextLTPro-Regular;
	font-size: 16px;

	color: #cbcbcb;
	color: #000000;
	text-align: left;
	outline: none;
}
.footer-subscribe-newsletter .subscribe-button {
	color: var(--color-text-purple);
	font-size: 15px;
	height: 32px;
	padding: 0 10px;

	background-color: #ffffff;
	outline: none;
	border-radius: 5px;
	margin-left: 10px;

	font-family: "Avenir-Next-LT-Pro-Bold";
}
@media only screen and (max-width: 1440px) {
	/* style hub side */
	.welcome-style-wrapper .title {
		font-size: 35px;
	}
	.welcome-style-wrapper .content p {
		font-size: 18px;
	}
}
@media only screen and (max-width: 1280px) {
	/* Style hub side */
	.influencer-summary-wrapper {
		padding-top: 30px;
		padding-bottom: 10px;
	}
	.style-hub-supplement {
		margin-top: 20px;
	}
	.welcome-style-wrapper {
		background-size: auto;
		padding: 40px 1%;
	}
	.welcome-hub-container {
		display: block;
	}
	.welcome-hub-container .right,
	.welcome-hub-container .left {
		width: 100%;
	}

	.style-hub-supplement .wrapper {
		display: block;
	}
	.influencer-product-image img {
		width: 250px;
		height: 250px;
	}
}
@media only screen and (max-width: 769px) {
	/* Style Hub side */
	.influencer-summary-wrapper {
		padding: 40px 10% 10px;
	}
	.each-influencer-item .wrapper {
		display: block;
		text-align: center;
	}
	.each-influencer-item .picture-container {
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.each-influencer-item .picture-container img {
		width: 300px;
		height: 300px;
		max-width: 300px;
		object-fit: cover;
	}
	.each-influencer-item .name-side {
		font-size: 28px;
		line-height: 36px;
	}
	.each-influencer-item .name-side .name-hashtag {
		font-size: 20px;
	}
	.each-influencer-item .describe-side,
	.each-influencer-item p {
		font-size: 14px;
	}
	.each-influencer-item .bottom-side .see-more {
		font-size: 13px;
	}
	.each-influencer-item .icon-container a {
		font-size: 16px;
	}
	.each-influencer-item .icon-container img {
		width: 16px;
		height: 16px;
	}
	.info-supplement-cover {
		border-top: 2px;
	}
	.info-supplement-cover .content-wrapper {
		padding: 10px 5%;
		text-align: center;
		max-width: 100%;
	}
	.info-supplement-cover .title {
		font-size: 30px;
	}
	.info-supplement-cover .image-container {
		width: fit-content;
		height: auto;
		margin: 0 auto;
		grid-template-columns: max-content max-content max-content max-content;
	}
	.info-supplement-cover .image-container img {
		/* object-fit:cover; */
		width: 110px;
		height: 110px;
		/* padding: 2px; */
	}
	.info-supplement-cover .image-container .stye-hub-img1 img,
	.info-supplement-cover .image-container .people-img-1 img,
	.info-supplement-cover .image-container .people-img-2 img {
		width: 220px;
		height: 220px;
	}

	/* Influencer page */
	.influencer-summary-wrapper .top {
		/* display:none; */
	}

	.introduce-influencer--right {
		width: 100%;
		padding: 30px 15px 30px;
	}
	.introduce-influencer--left {
		display: none;
	}
	.introduce-influencer__video {
		margin-bottom: 40px;
	}
	.influencer-product-content {
		margin-bottom: 20px;
	}
	.introduce-influencer--right .assesment-side h3 {
		font-size: 30px;
    line-height: 34px;
	}
	.influencer-say-image.one-image-only img,
	.influencer-say-image.one-image-only video {
		width: 100%;
	}
}
@media only screen and (max-width: 596px) {
	/* Style hub side */
	.each-influencer-item .picture-container img {
		width: 250px;
		height: 250px;
		min-width: 0;
		object-fit: cover;
	}
	.prev-primary-influencer,
	.next-primary-influencer {
		display: block;
	}
	.info-supplement-slider {
		display: none !important;
	}
	.style-hub-supplement .follow-side {
		display: none;
	}
	.style-hub-supplement .follow-instagram-mobile,
	.style-hub-supplement .follow-facebook-mobile {
		font-family: AvenirNextLTPro-Regular;
		font-size: 18px;
		color: #ffffff;
		padding: 5px 10px;

		background-color: #33257c;
		display: inline-flex;
		align-items: center;
	}
	.slider-mobile-container {
		display: block;
	}
	.info-supplement-cover .slider-mobile-container {
		margin-top: 30px;
	}
	.info-supplement-mobile {
		width: 60vw;
		height: 60vw;
		/* border-radius:5vw; */
		/* position:relative;        */
	}
	.info-supplement-mobile img {
		width: 60vw;
		height: 60vw;
		/* max-height:60vw;
        max-width:60vw; */

		/* object-fit: fill; */
		border-radius: 5vw;
		margin: 0 auto;
	}
	.info-supplement-mobile .previous-slider-button,
	.info-supplement-mobile .next-slider-button {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		font-size: 35px;

		background-color: transparent;
		color: #d3d3d3;
		border: 0;
		outline: none;
	}
	.info-supplement-mobile .previous-slider-button {
		left: -10vw;
	}
	.info-supplement-mobile .next-slider-button {
		right: -10vw;
	}

	/* influencer page */
	.influencer-product-image {
		grid-template-columns: max-content;
		/* row-gap:10px;     */
	}
	.influencer-see-side-1 {
		display: block;
		text-align: right;
	}
	.influencer-see-room {
		margin-bottom: 20px;
	}
	.influencer-product-image img {
		width: 300px;
		height: 300px;
	}
	.influencer-follow-social {
		display: block;
		text-align: center;
	}
	.influencer-say-image {
		margin: 25px auto 25px;
	}
	.influencer-follow-social .follow-name {
		margin-bottom: 15px;
	}
}
/* .slick-track{
    width: 100%;
}
.slick-list{
    width: 100%;
} */