.rds-languages {
	position: relative;

	@include mobile {
		padding-top: 10px;
	}

	.shape {
		position: absolute;
		top: -61px;
		left: calc(50% - 154px);

		@include mobile {
			zoom: 0.5;
			top: 380px;
			left: -150px;
		}
	}

	.languages-list {
		align-items: center;
		z-index: 2;
		display: flex;
		justify-content: space-around;
		position: relative;
		margin: 0 auto 0.5rem;
		padding: 0;
		max-width: 1050px;
		list-style: none;

		@include mobile {
			flex-wrap: wrap;
			justify-content: center;
		}

		&:not(:first-child) {
			margin-top: 2rem;

			@include mobile {
				margin-top: 12px;
			}
		}

		li {
			@include mobile {
				flex: 0 0 50%;
				margin-top: 42px;
				text-align: center;
			}

			a {
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				height: 100%;
				text-align: center;
				text-decoration: none;
				box-shadow: 0 1px 5px 0 RGB(0 0 0 / 7%), 0 7px 17px 0 RGB(0 0 0 / 10%);
				width: 150px;
				padding-top: 20px;

				svg {
					margin-bottom: 0.25rem;
					&:hover {
						animation: spin infinite 10s;
					}

					@include mobile {
						zoom: 0.85;
					}
				}

				.btn {
					margin-top: auto;
					margin-bottom: 10px;
					padding: 6px 15px 8px;
					border-radius: 3px;
					line-height: 1.3;
					font-family: $trevas-font-book;
					font-size: 16px;
					font-weight: 500;
					background-color: $trevas-dark;
					color: $trevas-purple;
					transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;

					@include mobile {
						font-size: 14px;
					}
				}

				&:hover .btn {
					color: $trevas-dark;
					background-color: $trevas-purple;
				}
			}
		}
	}
}