@charset "UTF-8";

.lists--22 {
	display: flex;
	gap: var(--pd) 2rem;
	flex-direction: column;

	& > div:first-child {
		padding-inline: var(--pd);
		width: 100%;
		display: flex;
		gap: 2rem;
		& > .title {
			width: calc(50% - 1rem);
			margin: 0;
			font-size: 2rem;
			font-weight: 700;
			line-height: 110%;
			color: var(--g6);
		}
		& > .text {
			width: calc(50% - 1rem);
			font-size: .85rem;
			line-height: 120%;
			font-weight: 400;
			color: var(--g4);
			padding-top:.5rem;
		}
		& .b-cta {
		  & .btns {
				display: inline-block;
				& a {
					text-decoration: none;
					display: flex;
					align-items: center;
					padding: .8rem 1.2rem;
					color: #fff;
					background: linear-gradient(180deg, var(--main), var(--main-dark));
					font-size: .9rem;
					gap: .8rem;
					border-radius: var(--r3);
					& svg {
						height: 1.5rem;
					}
					&:hover {
						background: linear-gradient(0deg, var(--main), var(--main-dark));
					}
				}
			}
		}
	}
	& > div:nth-child(2) {
		padding-inline: var(--pd);
		width: 100%;
		gap: 2rem;
		display: flex;
		flex-wrap: wrap;
		& > .item {
			display: flex;
			gap: 1.5rem;
			width: calc(100% / 3 - 2rem * 2 / 3);
			position: relative;
			scroll-snap-align: start;
			padding: 0;
			border-radius: var(--r2);
			box-shadow: .2rem .2rem .5rem 0 var(--bg4);
			background: var(--bg);
			background-size: cover;
			flex-direction: column;
			transition: all .2s linear;
			&:hover {
				transform: translate(0, -0.3rem);
			}
			& > .img {
				& img {
					width: 100%;
					aspect-ratio: 16/10;
					object-fit: cover;
					border-radius: var(--r2);
				}
			}
			& > .desc {
				display: flex;
				gap: 1rem;
				flex-direction: column;
				flex-grow: 1;
				padding: 0 1rem 1rem 1rem;
				& > .ttl {
					margin-top: 0;
					font-weight: 400;
					font-size: .85rem;
					flex-grow: 1;
					& h3 {
						font-weight: 700;
						font-size: 1.1rem;
						margin: 0 0 1rem;
					}
				}
				& > .prms {
					& .items {
						display: flex;
						gap: 2rem;
						flex-wrap: wrap;
						& > .i {
							flex: 0 0 calc(50% - 1rem);
							& > .k {
								color: var(--g3);
								font-size: .7rem;
							}
							& > .v {
								color: var(--g6);
								font-size: 1.1rem;
								& span.small {
									font-size: .5rem;
								}
							}
						}
					}
				}
			}
		}
	}
	@media (max-width:991px) {
		& > div:nth-child(1) {
			flex-direction: column;
			gap: .5rem;
			& > .title, > .text {
				width: 100%;
				padding-top: 0;
			}
		}
		& > div:nth-child(2) {
			& > .item {
				width: calc(50% - 1rem);
			}
		}
	}
	
	@media (max-width:767px) {
		& > div:nth-child(2) {
			& > .item {
				width: 100%;
			}
		}
	}
}

.lists--23 {
	padding-inline: var(--pd);
	display: flex;
	gap: 2rem;
	& > div:nth-child(1) {
		width: calc(100% / 3 - 1rem);
		& h2 {
			margin: 0;
		}
	}
	& > div:nth-child(2) {
		width: calc(100% * 2 / 3 - 1rem);
		display: flex;
		gap: 1rem;
		flex-direction: column;
		& > label {
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 1rem;
			font-size: 1rem;
			padding: 0.6rem 1rem;
			background-color: var(--bg2o);
			box-shadow: .2rem .2rem .5rem 0 var(--bg4);
			cursor: pointer;
			& h3 {
				margin:0;
				font-size: 1rem;
				font-weight: 400;
				line-height: 100%;
				position: relative;
				padding-right: 2rem;
				&:before {
					content: '«';
					position: absolute;
					top: 50%;
					right: 0;
					width: 1rem;
					height: 1rem;
					z-index: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					transform: translateY(-50%) rotate(-90deg);
				}
			}
			& > div {
				display: none;
				font-weight: 300;
				font-size: 1rem;
			}
			& > input {
				position: absolute;
				opacity: 0;
				visibility: hidden;
				left: -200vw;
			}
			& input:checked + div {
				display: block;
			}
		}
		& label:has(input:checked) h3:before {
			transform: translateY(-50%) rotate(90deg);
		}
	}
	@media (max-width: 991px) {
		flex-direction: column;
		& > div:nth-child(1),
		& > div:nth-child(2) {
			width: 100%;
		}
	}
}

.content--7 {
	padding-inline: var(--pd);
	display: flex;
	flex-direction: column;

	& h2,
	& h3 {
		font-weight: 400;
		margin-top: 3rem;
	}

	& > h2 {
		max-width: 40rem;
		margin-inline: auto;
		text-align:center;
	}

	& >  div:nth-child(2) {
		position: relative;

		& > .img {
			position: absolute;
			top: 0;
			right: calc(-1 * var(--pd));
			height: 100%;
			width: calc(50% - 3rem);
			z-index: 2;
			box-shadow: .2rem .2rem .5rem 0 var(--bg4);
			& img {
				position: relative;
				z-index: 2;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		& > .cont {
			position: relative;
			z-index: 2;
			width: 55%;

			& .l1 {
				display: flex;
				gap: 4rem;

				& .items {
					width: calc(33.3333333333% - 4rem * 2 / 3);
					display: flex;
					flex-direction: column;

					& .img {
						width: 50%;
						box-shadow: var(--shad);
						aspect-ratio: 16 / 9;
						& img {
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}

					& .ttl {
						margin-top: 1rem;
						font-weight: 700;
						font-size: 0.8rem;
					}

					& .dsc {
						font-weight: 400;
						font-size: 0.8rem;
					}
				}
			}

			& .l2 {
				display: flex;
				gap: 1rem;

				& .items {
					width: calc(25% - 0.75rem);

					& .num {
						font-size: 2.5rem;
						font-weight: 300;
					}

					& .dsc {
						font-size: 0.8rem;
					}
				}
			}
		}
	}

	@media (max-width: 767px) {
		gap: var(--pd);
		& h2 {
			width: 100%;
			line-height: 120%;
			font-size: 1.7rem;
			margin: 0;
		}

		& >  div:nth-child(2) {
			z-index: 2;
			flex-direction: column;
			display: flex;
			gap: 2rem;
			& > .img {
				width: 100%;
				z-index: 1;
				top: auto;
				left: auto;
				right: auto;
				position: relative;
				order: 2;
				& img {
					z-index: 0;
				}
			}

			& > .cont {
				width: 100%;
				order: 1;
				display: flex;
				flex-direction: column;
				gap: 1rem;
				& >  .l1 {
					gap: 1rem;
					& .items {
						width: calc(33.3333333333% - 1rem * 2 / 3);
					}
				}
				& > .l2 {
					flex-wrap: wrap;
					& .items {
						width: calc(50% - 1rem / 2);
					}
				}
			}
		}
	}
}

.content--1 {
	padding-inline: var(--pd);
	display: flex;
	gap: var(--pd);
	flex-wrap: wrap;
	@media (max-width: 991px) {gap: 2rem;}
	& .title {
		width: 100%;
		padding-inline: max(0px, calc((100% - 40rem) / 2));
		font-size: 1.7rem;
		color: var(--g6);
		line-height: 120%;
		font-weight: 400;
		text-align: center;
	}
	& .c1 {
		width: calc(50% - var(--pd) / 2);
		display: flex;
		flex-direction: column;
		gap: var(--pd);
		@media (max-width: 991px) {width: 100%;}
		& .text {
			& img {
				width: 100%;
				border-radius: var(--r3);
				box-shadow: .2rem .2rem .5rem 0 var(--bg4);
			}
			font-size: 1rem;
			color: var(--g4);
			line-height: 160%;
		}
	}
	& .c2 {
		width: calc(50% - var(--pd) / 2);
		display: flex;
		flex-wrap: wrap;
		gap: var(--pd);
		height: max-content;
		@media (max-width: 991px) {width: 100%;}
		& > .i {
			display: flex;
			flex-direction: column;
			gap: .3rem;
			width: calc(100% / 3 - var(--pd) * 2 / 3);
			@media (max-width: 767px) {width: calc(50% - var(--pd) / 2);}
			& > .img {
				display: flex;
				justify-content: center;
				border-radius: var(--r2);
				box-shadow: .2rem .2rem .5rem 0 var(--g2);
				& img {
					width: 100%;
					aspect-ratio: 1 / 1;
					object-fit: cover;
					object-position: center center;
					border-radius: var(--r2);
				}
			}
			.ttl {
				font-weight: 700;
				font-size: 1rem;
				color: var(--g5);
			}
			.dsc {
				font-size: .9rem;
				color: var(--g4);
			}
		}
	}
}

.lists--3 {
	padding-inline: var(--pd);
	padding-top: var(--pd);
	display: flex;
	gap: calc(var(--pd) * 2);
	flex-wrap: wrap;
	& .left {
		width: calc(50% - var(--pd) * 2);
		min-height: 100%;
		& .slapped {
			position: sticky;
			top: 0px;
		}
		& h2 {
			line-height: 120%;
		}
	}
	& .right {
		width: 50%;
		counter-reset: feats2;
		display: flex;
		flex-direction: column;
		gap: var(--pd);
		& .item {
			padding-left: 4rem;
			position: relative;
			counter-increment: feats2;
			aspect-ratio: 16 / 10;
			&:before {
				content: counter(feats2, decimal-leading-zero);
				position: absolute;
				left: 0;
				top: 0;
				width: 4rem;
				font-weight: 700;
				color: var(--main);
				height: 100%;
				font-size: 1.5rem;
				display: flex;
				padding-left: 1.5rem;
				padding-top: 1.5rem;
			}
			& img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				border-radius: var(--r3);
			}
			& > div {
				position: absolute;
				bottom: 4rem;
				left: 0;
				width: 70%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 1rem 1.5rem;
				background-color: var(--bg);
				font-size: 1.2rem;
				line-height: 150%;
				box-shadow: 0 0.4rem 0.7rem 0.2rem color-mix(in srgb, var(--g6) 20%, transparent);
			}
		}
	}
	@media (max-width: 767px) {
		& .left, & .right {
			width: 100%;
		}
		& .left {
			text-align: center;
			padding: 0 var(--pd);
		}
		& .right {
			padding-left: var(--pd);
			gap: calc(2 * var(--pd));
			& .item {
				aspect-ratio: auto;
				&:before {
					padding-top: 0;
					padding-left: 0;
					font-weight: 400;
					font-size: 2.5rem;
					justify-content: center;
				}
				& img {
					height: auto;
					box-shadow: var(--shad);
				}
				& > div {
					position: relative;
					width: 100%;
					padding: 1rem var(--pd) 0 0;
					bottom: auto;
					left: auto;
					justify-content: flex-start;
					box-shadow: none;
				}
			}
		}
	}
}

.lists--4 {
	padding-inline: var(--pd);
	display: flex;
	flex-direction: column;
	gap: 2rem;
	& h2 {
		text-align: center;
		margin-block: 0;
		max-width: 40rem;
		margin-inline: auto;
	}
	& .desc {
		text-align: center;
		font-size: 1rem;
		line-height: 160%;
		font-weight: 400;
		color: var(--g6);
		max-width: 60rem;
		margin-inline: auto;
		text-wrap: balance;
	}
	& .list {
		display: flex;
		flex-wrap: wrap;
		gap: 2rem;
		& >.i {
			width: calc(100% / 3 - 2rem * 2 / 3);
			position: relative;
			& >img {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				width: 100%;
				height: 100%;
				object-fit: cover;
				z-index: 1;
				border-radius: var(--r3);
			}
			& >div:nth-child(2) {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 2;
				opacity: .8;
				background: linear-gradient(180deg, var(--g6) 0%, transparent 100%);
				border-radius: var(--r3);
			}
			& >div:nth-child(3) {
				position: relative;
				z-index: 3;
				width: 100%;
				height: 100%;
				text-align: center;
				padding: var(--pd);
				text-wrap: balance;
				color: var(--bg);
				border-radius: var(--r3);
				display: flex;
				flex-direction: column;
				gap: 4rem;
				& >div:nth-child(1) {
					width: 100%;
					flex-grow: 1;
				}
				& >div:nth-child(2) {
					width: 100%;
					text-align: center;
					& a {
						display: inline-block;
						background: var(--main);
						color: var(--bg);
						padding: .8rem 1.2rem;
						border-radius: var(--r3);
						transition: all .2s ease;
						font-size: .8rem;
						text-transform: uppercase;
						position: relative;
						overflow: hidden;
						white-space: nowrap;
						transition: all .2s linear;
						&::before {
							content: "";
							position: absolute;
							top: 0;
							left: -150%;
							left: 0;
							height: 100%;
							width: 100%;
							transform: skewX(-45deg);
							background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), white);
							box-shadow: 0.625rem 0 1.25rem -0.625rem #fff;
							animation: a 5s infinite linear;
						}
						&:hover {
							opacity: .8;
							&::before {
								display: none;
							}
						}
					}
				}
			}
			@media (max-width: 991px) {
				width: 100%;
				& >div:nth-child(3) {
					padding: calc(2 * var(--pd));
				}
			}
		}
	}
}

.list--5 {
	padding-inline: var(--pd);
	display: flex;
	flex-direction: column;
	gap: 2rem;

	& .hh {
		padding-top: 0;
		padding-bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		& .line1 {
            max-width: 40rem;
            margin: 0;
            font-size: 2rem;
            font-weight: 700;
            line-height: 110%;
            color: var(--g6);
		}
		& .line2 {
            max-width: 60rem;
			font-size: .85rem;
            line-height: 120%;
            font-weight: 400;
            color: var(--g4);
            padding-top: .5rem;
		}
	}

	& .cont {
		display: flex;
		gap: 2rem;
		flex-wrap: wrap;
		width: 100%;

		& .re3 {
			flex: 0 0 calc(100% / 4 - 2rem * 3 / 4);
			text-decoration: none;
			background-color: #fff;
			transition: all 0.5s ease-in-out;
			display: flex;
			flex-direction: column;
			gap: .5rem;

			@media (max-width: 991px) {
				flex: 0 0 calc(50% - 1rem);
			}

			@media (max-width: 767px) {
				flex: 0 0 100%;
			}

			&:nth-child(1) {
				flex: 0 0 calc((100% / 4 - 2rem * 3 / 4) * 2 + 2rem);

				@media (max-width: 991px) {
					flex: 0 0 100%;
				}

				@media (max-width: 767px) {
					flex: 0 0 100%;
				}
			}

			& .pic {
				width: 100%;
				height: 17rem;

				& img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					border-radius: var(--r1);
				}
			}

			& .title {
				display: block;
				text-decoration: none;
				color: #000;
				font-size: 1.1rem;
				font-weight: 400;
				line-height: 140%;
				text-align: left;
				&:hover {
					color: var(--main);
				}
			}


			& .txt {
				color: var(--main);
				font-size: 1rem;
				font-weight: 300;
				letter-spacing: 0;
				color: var(--g2);
				line-height: 160%;
			}

			& .path {
				color: #aaa;
				font-size: .75rem;
				font-weight: 100;
				text-align: left;
			}

			& .params {
				display: inline-block;
				margin-right: 1rem;
				& > div:nth-child(1) {
					font-size: 1.25rem;
					line-height: 2rem;
					font-weight: 400;
					color: var(--g1);
				}
	
				& > div:nth-child(2) {
					font-size: .65rem;
					line-height: 1.25rem;
					font-weight: 300;
					text-transform: uppercase;
				}
			}


			& .pd15 {
				border: 1px solid #fafafa;
				border-top: none;
			}

			&:hover {
				& > a {
					box-shadow: 0 0 1rem .33rem rgba(0, 0, 0, .2);
				}
	
				& .pic > div > div > div {
					transform: scale(1.1);
				}
	
				& .title {
					color: var(--main);
				}
			}
		}
	}
}

.content--8 {
	padding-inline: var(--pd);
	display: flex;
	gap: var(--pd);
	flex-wrap: wrap;
	& > div:nth-child(1) {
		width: calc(100% / 3 - var(--pd) * 1 / 2);
		padding: 2rem;
		border-radius: var(--r3);
		border: var(--px) solid var(--brd);
   		background: var(--bg2);
		& h2 {
			font-weight: 600;
			margin-top: 0;
		}
		& h3 {
			margin-bottom: .5rem;
		}
	}
	& >div:nth-child(2) {
		width: calc(100% / 3 * 2 - var(--pd) * 1 / 2);
		display: flex;
		gap: 1rem;
		flex-wrap: wrap;
		& > iframe {
			width: 100%;
			height: 100%;
			border: none;
		}
	}
	@media (max-width: 767px) {
		& >div:nth-child(1) {
			width: 100%;
		}
		& >div:nth-child(2) {
			width: 100%;
			& .photo {
				height: 10rem;
			}
		}
	}
}

.lists--2-2 {
	display: flex;
	flex-direction: column;
	& >.ttl {
		text-align: center;
		font-weight: 400;
		padding-inline: var(--pd);
		line-height: 110%;
	}
	& .list {
		display: flex;
		flex-wrap: wrap;
		& .item {
			flex: 1 0 calc(100% / 4);
			position: relative;
			overflow: hidden;
			display: flex;

			@media (max-width: 991px) {flex: 1 0 calc(100% / 2);}
			@media (max-width: 450px) {flex: 0 0 100%;}
			& .bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
				overflow: hidden;
				& img {
					position: relative;
					z-index: 1;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background-color: var(--g6);
					opacity: .6;
					z-index: 2;
				}
			}
			& .cont {
				position: relative;
				width: 100%;
				z-index: 2;
				padding: 2rem;
				display: flex;
				flex-direction: column;
				gap: 1rem;
				padding-top: 8rem;
				& >.ttl {
					color: var(--bg);
					font-weight: 700;
					font-size: 1rem;
					& span {
						color: var(--main);
						display: inline;
						border-bottom: var(--px) dashed var(--main);
					}
				}
				& .txt {
					flex-grow: 1;
					color: var(--bg);
					font-size: .75rem;
					& ul {
						list-style:url(../svg/plus-b.svg);
						display: flex;
						flex-direction: column;
						gap: .5rem;
						& li {
							padding: 0;
							font-size: .8rem;
							& a {
								text-decoration: none;
								display: inline-block;
								padding-bottom: .1rem;
								color: var(--bg);
								border-bottom: var(--px) dashed var(--main);
								&:hover {
									border-color: transparent;
								}
							}
						}
					}
				}
				& .btns {
					display: flex;
					& .btn {
						text-decoration: none;
						background-color: var(--main);
						display: flex;
						align-items: center;
						gap: .5rem;
						padding: .5rem 1rem;
						font-size: .8rem;
						border-radius: 1rem;
						& svg {
							height: .6rem;
							fill: var(--bg);
						}
						& span {
							color: var(--bg);
						}
						&:hover {
							opacity: .8;
						}
					}
				}
			}
		}
	}
}

.list--24 {
	counter-reset: lst24;
	position: relative;
	padding-inline: var(--pd);
	padding-bottom: var(--pd);
	& h2 {
		position: relative;
		max-width: 40rem;
		margin-inline: auto;
		text-align:center;
		margin-bottom: var(--pd);
		color: var(--g6);
		z-index: 3;
	}
	& > .bg {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 21rem;
		z-index: 1;
		& > img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	& > .ovr {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to top, transparent 0%, var(--bg) 20rem, var(--bg) 100%);
		z-index: 2;
	}
	& .items {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
		gap: var(--pd);
		& .item {
			z-index: 3;
			position: relative;
			text-decoration: none;
			overflow: hidden;
			border-radius: var(--r1);
			aspect-ratio: 2/3;
			text-decoration: none;
			transition: all .2s linear;
			&:hover {
				transform: translate(0, -0.3rem);
			}
			& > img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				z-index: 4;
			}
			& > .ovr {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: var(--g6);
				opacity: .6;
				box-shadow: .2rem .2rem .5rem 0 var(--g2);
				z-index: 5;
			}
			& > .ttl {
				position: absolute;
				left: 0;
				bottom: 0;
				color: var(--bg);
				width: 100%;
				padding: 2rem;
				z-index: 6;
				display: flex;
				flex-direction: column;
				gap: 1rem;
				& > .one {
					width: 100%;
					font-size: 1rem;
					font-weight: 400;
					text-transform: uppercase;
				}
				& > .two {
					font-size: .75rem;
					width: 100%;
				}
			}
			& > .num {
				position: absolute;
				right: 2rem;
				top: 2rem;
				z-index: 6;
				color: var(--main);
				font-size: .8rem;
				counter-increment: lst24;
				&::before {
					content: counter(lst24, decimal-leading-zero);
				}
			}
		}
	}
}

.cta--3 {
	position: relative;
	padding-inline: 4rem;
	padding-block: 4rem;

	@media (max-width: 991px) {
		padding-inline: 3rem;
		padding-block: 2rem;
	}
	@media (max-width: 767px) {
		padding-inline: var(--pd);
		padding-block: var(--pd);
	}
	& .img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		& img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	}
	& .ovr {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: radial-gradient(circle, rgba(0,0,0,0.3) 0%, rgba(0,0,0,1) 100%);
		opacity: 0.5;
		z-index: 2;
	}
	& .content {
		position: relative;
		z-index: 3;
		background: rgba(0,0,0, .1);
		backdrop-filter: blur(.5rem);
    	-webkit-backdrop-filter: blur(.5rem);
		box-shadow: 0 0 5rem .5rem rgba(0,0,0,.2);
		border: var(--px) solid var(--g4);
		border-radius: var(--r3);
		padding: var(--pd);

		& .grid {
			display: grid;
			grid-template-columns: calc(50% - var(--pd) / 2) calc(50% - var(--pd) / 2);
			gap: var(--pd);
			& .form {
				display: flex;
				flex-direction: column;
				gap: 2rem;
				padding-block: 3rem;
				& .ttl {
					color: var(--bg);
					font-size: 1.7rem;
                    font-weight: 600;
					@media (max-width: 767px) {
						text-align: center;
					}
				}
				& form {
					display: flex;
					flex-direction: column;
					gap: 1rem;
					margin-top: 1rem;
					& input,
					& textarea {
						width: 100%;
						padding: 1rem;
						border: var(--px) solid var(--brd);
						border-radius: var(--r2);
						background-color: var(--bg2);
						color: var(--g6);
						font-size: 1rem;
						resize: vertical;
						font-family: var(--font-text);
						&::placeholder {
							color: var(--g4);
						}
					}
					& button {
						width: max-content;
						background: var(--main);
						color: #fff;
						font-weight: 400;
						font-size: .75rem;
						text-transform: uppercase;
						padding: 1.1rem 2.8rem;
						border-radius: var(--r3);
						box-shadow: 0 .1rem .8rem rgba(231,196,122,0.18);
						border: none;
						cursor: pointer;
						transition: background 0.2s;
						&:hover {
							opacity: .8;
						}
					}
					@media (max-width: 767px) {
						& .item {
							display: flex;
							width: 100%;
							justify-content: center;
						}
					}
				}
			}
			& .cont {
				display: flex;
				flex-direction: column;
				gap: 2rem;
				padding-block: 3rem;
				& .ttl {
					color: var(--bg);
					font-size: 1.7rem;
                    font-weight: 600;
					@media (max-width: 767px) {
						text-align: center;
					}
				}
				& .lst {
					display: grid;
					grid-template-columns: 1fr 1fr;
					gap: 1rem;
					counter-reset: cta3;
					& .itm {
						position: relative;
						counter-increment: cta3;
						padding-left: 2.5rem;
						&:before {
							content: counter(cta3, decimal-leading-zero);
							position: absolute;
							left: 0;
							top: 0;
							font-size: 1rem;
							color: var(--c3);
							font-weight: 400;
						}
						& .t {
							font-size: .9rem;
							font-weight: 700;
							color: var(--bg);
						}
						& .c {
							font-size: .8rem;
							font-weight: 400;
							color: var(--bg);
						}
					}
				}
				& .ctlblk {
					display: flex;
					gap: 2rem;
					& .txt {
						color: var(--bg);
						font-size: .8rem;
					}
					& .btn {
						& a {
							display: inline-block;
							background: var(--main);
							color: #fff;
							font-weight: 400;
							font-size: .75rem;
							text-transform: uppercase;
							padding: 1.1rem 2.8rem;
							border-radius: var(--r3);
							box-shadow: 0 .1rem .8rem rgba(231,196,122,0.18);
							text-decoration: none;
							transition: background 0.2s;
							border: none;
							cursor: pointer;
							position: relative;
							overflow: hidden;
							white-space: nowrap;
							transition: all .2s linear;
							&::before {
								content: "";
								position: absolute;
								top: 0;
								left: -150%;
								left: 0;
								height: 100%;
								width: 100%;
								transform: skewX(-45deg);
								background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), white);
								box-shadow: 0.625rem 0 1.25rem -0.625rem #fff;
								animation: a 5s infinite linear;
							}
							&:hover {
								opacity: .8;
								&::before {
									display: none;
								}
							}
						}
					}
					@media (max-width: 767px) {
						flex-direction: column;
						align-items: center;
						& .txt {
							text-align: center;
						}
					}
				}
			}
			@media (max-width: 767px) {
				grid-template-columns: 1fr;
				& .form, & .cont {
					padding-block: var(--pd);
				}
			}
		}
	}
}

/* FOOTER */

.footers--footer-2 {
	padding-inline: var(--pd);
	padding-top: 2rem;
	padding-bottom: 1rem;
	background-color: var(--bg2);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	& .logo {
		width: 18rem;
		display: flex;
		gap: 1rem;
		align-items: center;
		line-height: 100%;
		@media (max-width: 1199px) {
			width: 4rem;
		}
		@media (max-width: 767px) {
			width: 100%;
		}
		& a {
			display: block;
			text-decoration: none;
			color: var(--c1);
			& svg,
			& img {
				height: 2.5rem;
			}
		}
		& .slogan {
			flex-grow: 1;
			font-size: .6rem;
			color: var(--g6);
			font-family: var(--font-text);
			display: flex;
			flex-direction: column;
			gap: .5rem;
			& strong {
				font-size: 1rem;
				color: var(--g6);
				letter-spacing: -0.05rem;
			}
			& span {
				line-height: 100%;
			}
			@media (max-width: 1199px) {
				display: none;
			}
			@media (max-width: 767px) {
				display: flex;
			}
		}
	}
	& .hbar {
		display: flex;
		width: calc(100% - 20rem);
		row-gap: 1rem;
		align-items: center;
		gap: 1rem;
		justify-content: space-between;
		@media (max-width: 1199px) {
			width: calc(100% - 6rem);
		}
		@media (max-width: 767px) {
			width: 100%;
			flex-wrap: wrap;
			padding-top: 2rem;
		}
		& .location {
			display: flex;
			gap: .5rem;
			& > div:nth-child(1) {
				color: var(--main);
				display: flex;
				svg {
					height: 1rem;
				}
			}
			& > div:nth-child(2) {
				& > div:nth-child(1) {
					text-transform: uppercase;
					font-size: .7rem;
					font-weight: 700;
					color: var(--g6);
				}
				& > div:nth-child(2) {
					font-size: .7rem;
					font-weight: 400;
					color: var(--g4);
				}
			}
		}
		& .hours {
			display: flex;
			gap: .5rem;
			& > div:nth-child(1) {
				color: var(--main);
				display: flex;
				& svg {
					height: 1rem;
				}
			}
			& > div:nth-child(2) {
				& > div:nth-child(1) {
					text-transform: uppercase;
					font-size: .7rem;
					font-weight: 700;
					color: var(--g6);
				}
				& > div:nth-child(2) {
					font-size: .7rem;
					font-weight: 400;
					color: var(--g4);
				}
			}
			@media (max-width: 991px) {
				display: none;
			}
		}
		& .wbtn {
			& > a {
				position: relative;
				display: flex;
				gap: .5rem;
				text-decoration: none;
				color: #fff;
				padding: .5rem 1rem;
				transition: background .25s linear;
				font-weight: 400;
				font-size: .8rem;
				text-transform: capitalize;
				border: none;
				border-radius: var(--r3);
				background: var(--bg-whatsapp);
				letter-spacing: .04rem;
				justify-content: center;
				align-items: center;
				overflow: hidden;
				white-space: nowrap;
				transition: all .2s linear;
				&::before {
					content: "";
					position: absolute;
					top: 0;
					left: -150%;
					left: 0;
					height: 100%;
					width: 100%;
					transform: skewX(-45deg);
					background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), white);
					box-shadow: 0.625rem 0 1.25rem -0.625rem #fff;
					animation: a 5s infinite linear;
				}
				&:hover {
					opacity: .8;
					&::before {
						display: none;
					}
				}
				&.disabled {
					opacity: .5;
					pointer-events: none;
					&::before {
						display: none;
					}
				}
				&.hidden {
					display: none;
				}
				& svg {
					height: 1rem;
					fill: #fff;
				}
			}
		}
		& .contact {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			& > a:nth-child(1) {
				display: flex;
				gap: .5rem;
				align-items: flex-end;
				text-decoration: none;
				color: var(--g6);
				& > svg {
					color: var(--main);
					height: .85rem;
				}
				& > span {
					font-size: .85rem;
					font-weight: 700;
				}
				&:hover {
					opacity: .8;
				}
			}
			& > div:nth-child(2) {
				line-height: 100%;
				height: auto;
				& > a {
					color: var(--main);
					text-decoration: none;
					font-size: .7rem;
					font-weight: 700;
					&:hover {
						opacity: .8;
					}
				}
			}
		}
	}
	& .copyright {
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: var(--px) dashed var(--g1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		& > div:nth-child(1) {
			font-size: .6rem;
			color: var(--g4);
		}
		& > div:nth-child(2) {
			display: flex;
			gap: 2rem;
			font-size: .6rem;
			color: var(--g4);
			& a {
				text-decoration: none;
				color: var(--main);
			}
		}
		@media (max-width: 767px) {
			flex-wrap: wrap;
			row-gap: 1rem;
			& > div:nth-child(1) {
				width: 100%;
				text-align: center;
			}
			& > div:nth-child(2) {
				width: 100%;
				justify-content: space-between;
			}
		}
	}
}