
.section.scroll-section {
	height: 600vh
}

.section.full-scroll {
	height: 400vh
}

.section.images-text {
	z-index: 1;
	opacity: 1;
	-webkit-text-fill-color: inherit;
	mix-blend-mode: normal;
	background-color: #0000;
	background-clip: border-box;
	border-radius: 0;
	height: 100vh;
	position: sticky;
	top: 0
}

.container {
	transition: box-shadow .3s
}

.container.full-container {
	background-image: url(../65a7819ebf55c0618b7f6dee_Group%20160.webp);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 40%;
	justify-content: space-between;
	align-items: center;
	max-width: 100%;
	height: 100vh;
	padding-left: 0;
	display: flex
}

.container.single-container {
	height: 100vh
}

.container.single-container.stick {
	justify-content: center;
	align-items: center;
	max-width: 100%;
	display: flex;
	z-index: -10;
	top: 0;
	overflow: visible
}

.image {
	width: 100%;
	height: 100%
}

.image:hover {
	filter: none
}

.image.abso {
	z-index: auto;
	opacity: 0;
	position: absolute;
	inset: 0
}

.image.abso._2,
.image.abso._3,
.image.abso._4 {
	transition: opacity 3s
}

.image.abso._5 {
	height: 100%;
	transition: opacity 3s
}

.image.abso._6 {
	transition: opacity 3s
}

.image._1 {
	height: 100%;
	transition: opacity 3s
}

.fade-div {
	z-index: 1;
	background-image: linear-gradient(#e1a45d, #ff890040 48%, #0000 83%);
	height: 10%;
	margin-top: -1px;
	position: absolute;
	inset: 0 0 auto
}

.small-text-move {
	font-size: 22px;
	line-height: 1;
	position: absolute;
	inset: auto auto 0 10%
}

.small-text-move._3 {
	left: 66%
}

.paragraph {
	margin-bottom: 0;
	font-size: 18px;
	line-height: 24px
}

.paragraph.max {
	position: relative;
	max-width: 100%;
	font-size: 14px;
	width: 100%;
	height: 100%;
	line-height: 30px
}

.paragraph h2 {
	font-weight: 500
}

.big-wrapper {
	height: 100%;
	display: flex;
	position: relative
}

.title-wrapper {
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	flex-direction: column;
	align-items: flex-start;
	max-width: 540px;
	margin-bottom: 60px;
	margin-left: 60px;
	display: flex
}

._500 {
	font-weight: 500
}

.full-single-wrapper {
	grid-column-gap: 16px;
	grid-row-gap: 16px;
	grid-template-rows: auto;
	grid-template-columns: .9fr 1fr .9fr;
	grid-auto-columns: 1fr;
	align-items: center;
	height: 100%;
	display: grid
}

.button-arrow {
	width: 20px
}

.single-line-div {
	width: 20%;
	position: absolute;
	inset: 0 auto auto 0
}

.img {
	width: 160px;
	position: absolute;
	inset: auto 0 0 auto
}

.p-image-wrapper {
	height: 100%;
	position: relative
}

.p-image {
	height: 100%;
	overflow: hidden
}

.abso-image {
	object-fit: cover;
	height: 100%;
	padding-bottom: 21%;
	position: absolute;
	inset: 2% 0 0
}

.wrapper-single {
	z-index: 2;
	grid-column-gap: 50px;
	grid-row-gap: 50px;
	text-align: center;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	display: flex;
	position: relative
}

.small-image {
	width: 60%
}

.cent-big-text {
	font-size: 170px;
	font-weight: 700;
	line-height: 133px;
	text-transform: uppercase;
	color: #ffffffd6
}

.inner-big-wrapper {
	z-index: 1;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	max-width: 800px;
	height: 100%;
	padding-top: 4%;
	display: flex;
	position: relative
}

.text-title {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	font-size: 36px;
	font-weight: 500;
	line-height: 1;
	transition: opacity .3s;
	position: sticky;
	inset: 14% 0 auto
}

.images-wrapper {
	opacity: 1;
	position: absolute;
	inset: 0
}

.small-image-move {
	width: 60px;
	transition: all .5s;
	position: absolute;
	top: auto;
	left: auto
}

.small-image-move._2 {
	border-radius: 0;
	width: 150px;
	transition-duration: .1s;
	inset: 15vh 8vw auto auto
}

.small-image-move._3 {
	width: 150px;
	transition-duration: .1s;
	inset: 60vh auto auto 8vw
}

.small-image-move._4 {
	width: 150px;
	margin-top: auto;
	margin-bottom: auto;
	transition-duration: .1s;
	inset: 40vh auto auto 20vw
}

.small-image-move._5 {
	width: 150px;
	transition-duration: .1s;
	inset: 60vh 8vw auto auto
}

.small-image-move._6 {
	width: 150px;
	margin-top: auto;
	margin-bottom: auto;
	transition-duration: .1s;
	inset: 40vh 20vw auto auto
}

.small-image-move._1 {
	width: 150px;
	transition-duration: .1s;
	top: 15vh;
	left: 8vw
}

.full-rot-image {}

.wrapper-text {
	position: absolute;
	overflow: hidden;
	left: 0;
	right: 0;
	text-align: center;
	top: 65px
}

.wrapper-inner-move {
	height: 133px;
	transition: all .3s
}

.para-buttons-wrapper {
	grid-column-gap: 28px;
	grid-row-gap: 28px;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	transition: opacity .3s;
	display: flex;
	overflow: hidden
}

.para-buttons-wrapper.abso {
	opacity: 0;
	position: absolute;
	inset: 0
}

.para-buttons-wrapper.abso._5 {
	opacity: 1
}

.rel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	z-index: 111;
	height: 370px
}

.para-buttons-wrapper {
	height: 100%
}

.full-images-div {
	position: absolute;
	inset: 0
}

.wrapper-inner {
	grid-column-gap: 0;
	grid-row-gap: 0;
	color: var(--white);
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr;
	grid-auto-columns: 1fr;
	align-items: center;
	height: 210px;
	transition: all .6s;
	display: grid
}

.inner-image-div {
	background-color: var(--white);
	border-radius: 8px;
	position: absolute;
	inset: 0;
	transform: translate(-3%, 9%) rotate(4deg)
}

.single-para-div {
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	flex-direction: column;
	align-items: flex-start;
	max-width: 488px;
	display: flex
}

.abso-wrapper {
	z-index: 1;
	pointer-events: none;
	padding-top: 20%;
	position: absolute;
	inset: 0
}

.para-div {
	justify-content: space-around;
	align-items: flex-end;
	height: 168px;
	display: flex
}

.scroll-move {
	flex: none;
	height: 100%;
	transform: translate(0)
}

.rel-arrow {
	position: relative
}

.abso-wrapper-arrow {
	grid-column-gap: 0;
	grid-row-gap: 4px;
	filter: invert();
	color: var(--black);
	flex-direction: row;
	justify-content: center;
	align-items: flex-end;
	font-size: 26px;
	font-weight: 500;
	display: flex;
	position: absolute;
	inset: 0 4% auto auto
}

.fade-img {
	width: 100%;
	height: 140px;
	position: absolute;
	inset: 0 0 auto
}

.arrow-wrapper {
	cursor: pointer;
	border: 1px solid #f0f0ef;
	border-radius: 50%;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	padding-right: 2px;
	display: flex;
	position: absolute;
	inset: auto auto 88px 14%
}

.arrow-wrapper._2 {
	top: auto;
	left: auto;
	right: 14%;
	transform: rotate(180deg)
}

.arrow-1 {
	height: 9px;
	margin-top: -5px
}

.arrow-1._2 {
	margin-top: -9px;
	margin-left: auto
}

.button {
	border: 1px solid var(--black);
	color: var(--black);
	background-color: #3898ec00;
	border-radius: 60px;
	padding: 16px 40px;
	transition-property: all;
	transition-duration: .3s
}

.button:hover {
	background-color: var(--black);
	color: var(--white)
}

.move-div-wrapper {
	z-index: auto;
	justify-content: center;
	align-items: center;
	display: flex;
	position: absolute;
	inset: 0
}



.wrapper-arrow {
	width: 20%
}



.image-wrapper {
	width: 60%
}

.button-div {
	color: var(--black);
	border: 1px solid #000;
	border-radius: 32px;
	padding: 14px 20px;
	text-decoration: none;
	transition: opacity .2s
}

.wrapper-button-div {
	justify-content: flex-start;
	align-items: center;
	margin-top: 80px;
	display: flex
}

.small-text-button {
	text-align: left;
	flex: none;
	padding-top: 0;
	font-size: 14px;
	line-height: 17px
}

.section-2 {
	background-image: url(../../img/background-image.svg);
	background-position: 0 0;
	background-size: auto;
	position: sticky
}

@media screen and (min-width:1440px) {

	.small-image-move._1,
	.small-image-move._2,
	.small-image-move._3,
	.small-image-move._4,
	.small-image-move._5,
	.small-image-move._6 {
		width: 200px
	}

	.full-rot-image {
		width: 160vw;
		top: 26%
	}

	.h1 {
		font-size: 25vw
	}
}

@media screen and (min-width:1920px) {
	.container.single-container.stick {
		padding-top: 40px;
		padding-bottom: 40px
	}

	.small-text-move {
		font-size: 26px
	}

	.paragraph.max {
		font-size: 18px;
		line-height: 26px
	}

	.title-wrapper {
		max-width: 660px
	}



	.abso-image {
		left: -2%
	}

	.cent-big-text {
		font-size: 200px;
		line-height: 200px
	}

	.inner-big-wrapper {
		padding-top: 8%
	}

	.full-rot-image {
		width: 160vw;
		top: 0
	}

	.wrapper-text {
		margin-top: -12%
	}

	.wrapper-inner-move {
		height: 400px
	}

	.para-buttons-wrapper {
		padding-bottom: 40px
	}

	.wrapper-inner {
		flex: none;
		height: 248px
	}

	.single-para-div {
		max-width: 500px
	}

	.abso-wrapper {
		padding-top: 30%
	}

	.abso-wrapper-arrow {
		top: 2%;
		right: 14%
	}

	.arrow-wrapper {
		left: 16%
	}

	.arrow-wrapper._2 {
		right: 16%
	}

	.h1 {
		font-size: 480px
	}

	.wrapper-arrow {
		width: 20%
	}

	

	.image-wrapper {
		width: 55%
	}

	.button-div {
		border-radius: 52px;
		padding: 20px 32px
	}

	.small-text-button {
		font-size: 16px
	}
}

@media screen and (max-width:991px) {
	.container {
		padding-left: 20px;
		padding-right: 20px
	}

	.container.full-container {
		height: auto
	}

	.image.move {
		object-fit: cover
	}

	.small-text-move {
		font-size: 16px
	}

	.paragraph.max {
		line-height: 35px
	}

	.big-wrapper {
		grid-column-gap: 200px;
		grid-row-gap: 200px;
		flex-direction: column
	}

	.title-wrapper {
		margin-left: 0
	}

	.single-line-div {
		width: 30%
	}

	

	.cent-big-text {
		font-size: 16vw;
		line-height: 130px
	}

	.full-rot-image {
		width: 280vw
	}

	.wrapper-inner-move {
		height: 130px
	}

	.single-para-div {
		width: 50%
	}

	.abso-wrapper {
		padding-top: 0
	}

	.para-div {
		height: auto
	}

	.rel-arrow {
		justify-content: center;
		align-items: center;
		display: flex
	}

	.abso-wrapper-arrow {
		font-size: 18px;
		line-height: 21px
	}

	.arrow-wrapper {
		bottom: -40px;
		left: 6%
	}

	.arrow-wrapper._2 {
		right: 6%
	}

	.image-wrapper {
		width: 100%
	}

	.wrapper-button-div {
		margin-top: 30px
	}
}

@media screen and (max-width:767px) {
	.container {
		padding: 60px 20px
	}

	.container.full-container {
		padding-left: 10px
	}

	.paragraph.max {
		font-size: 16px;
		line-height: 35px
	}

	.paragraph h2 {
		font-size: 28px;
		line-height: 40px
	}

	.big-wrapper {
		grid-column-gap: 100px;
		grid-row-gap: 100px
	}

	.button-arrow {
		width: 16px
	}

	.small-image-move {
		width: 34px
	}

	.full-rot-image {
		width: 398vw
	}

	.single-para-div {
		width: 70%
	}

	
}

@media screen and (max-width:479px) {
	h1 {
		font-size: 36px;
		line-height: 52px
	}

	.container {
		padding-top: 50px;
		padding-bottom: 50px
	}

	.small-text-move {
		font-size: 14px;
		left: 8%
	}

	.small-text-move._3 {
		left: 60%
	}

	.paragraph.max {
		line-height: 20px
	}

	.paragraph h2 {
		font-size: 25px;
		line-height: 34px
	}

	.single-line-div {
		width: 36%;
		top: 20%
	}

	

	.cent-big-text {
		line-height: 80px
	}

	.small-image-move._2 {
		width: 100px;
		top: 15vh;
		right: 10vw
	}

	.small-image-move._3 {
		width: 100px;
		bottom: 37.3vh;
		left: 11.5vw
	}

	.small-image-move._4 {
		top: 32.5vh;
		left: 12.2vw
	}

	.small-image-move._5 {
		top: 54.1vh;
		right: 4.4vw
	}

	.small-image-move._6 {
		top: 36.5vh;
		right: 13.3vw
	}

	.small-image-move._1 {
		width: 100px;
		top: 14vh;
		left: 7vw
	}

	.wrapper-inner-move {
		height: 160px
	}

	.single-para-div {
		width: 80%
	}

	.abso-wrapper {
		top: -4%
	}

	.abso-wrapper-arrow {
		font-size: 12px;
		line-height: 13px;
		top: -5%;
		right: 2%
	}

	.button {
		padding: 10px 32px
	}
}