.__btn-underline {
	transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.__btn-underline:not(:hover) {
	text-decoration: underline;
}

.__btn-under {
	position: relative;
}
.__btn-under::before {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	background-color: #f0cc8a;
	bottom: -2px;
	left: 0;
	border-radius: 2px;
	transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.__btn-under:hover::before {
	left: auto;
	width: 100%;
}

.__btn-under-white {
	position: relative;
}
.__btn-under-white::before {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	background-color: #fdfbe9;
	bottom: -2px;
	left: 0;
	border-radius: 2px;
	transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.__btn-under-white:hover::before {
	left: auto;
	width: 100%;
}

.__btn-under-black {
	position: relative;
}
.__btn-under-black::before {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	background-color: #200e09;
	bottom: -2px;
	left: 0;
	border-radius: 2px;
	transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.__btn-under-black:hover::before {
	left: auto;
	width: 100%;
}

.__btn-under-brown {
	position: relative;
}
.__btn-under-brown::before {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	background-color: #331d16;
	bottom: -2px;
	left: 0%;
	border-radius: 2px;
	transition: 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.__btn-under-brown:hover::before {
	left: auto;
	width: 100%;
}

.__btn-under-center {
	position: relative;
}
.__btn-under-center::before {
	content: '';
	position: absolute;
	width: 0;
	height: 2px;
	background-color: #ffffff;
	bottom: -2px;
	left: 50%;
	border-radius: 2px;
	transition: 0.4s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.__btn-under-center:hover::before {
	left: 0;
	width: 100%;
}

.__custom-btn {
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
}

/* border */
.__custom-btn.-border {
	/* line-height: 39px; */
	/* padding: 0; */
}
.__custom-btn.-border:hover {
	/* background: transparent; */
	/* color: #000; */
}
.__custom-btn.-border span {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
.__custom-btn.-border:before,
.__custom-btn.-border:after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	background: #fcf6f0;
	transition: all 0.3s ease;
}
.__custom-btn.-border:before {
	height: 0%;
	width: 2px;
}
.__custom-btn.-border:after {
	width: 0%;
	height: 2px;
}
.__custom-btn.-border:hover:before {
	height: 100%;
}
.__custom-btn.-border:hover:after {
	width: 100%;
}
.__custom-btn.-border span:before,
.__custom-btn.-border span:after {
	position: absolute;
	content: '';
	right: 0;
	bottom: 0;
	background: #fcf6f0;
	transition: all 0.3s ease;
}
.__custom-btn.-border span:before {
	width: 2px;
	height: 0%;
}
.__custom-btn.-border span:after {
	width: 0%;
	height: 2px;
}
.__custom-btn.-border span:hover:before {
	height: 100%;
}
.__custom-btn.-border span:hover:after {
	width: 100%;
}

/* border-2 */
.__custom-btn.-border-2 {
	position: relative;
	/* color: #000; */
	z-index: 2;
}
.__custom-btn.-border-2:hover {
	border-color: transparent;
}
.__custom-btn.-border-2:before,
.__custom-btn.-border-2:after {
	position: absolute;
	content: '';
	width: 0%;
	height: 0%;
	border: 2px solid;
	z-index: -1;
	transition: all 0.4s ease;
}
.__custom-btn.-border-2:before {
	top: 0;
	left: 0;
	border-bottom-color: transparent;
	border-right-color: transparent;
	border-top-color: #fff;
	border-left-color: #fff;
}
.__custom-btn.-border-2:after {
	bottom: 0;
	right: 0;
	border-top-color: transparent;
	border-left-color: transparent;
	border-bottom-color: #fff;
	border-right-color: #fff;
}
.__custom-btn.-border-2:hover:before,
.__custom-btn.-border-2:hover:after {
	border-color: #fff;
	height: 103%;
	width: 103%;
}

/* border-3 */
.__custom-btn.-border-3 {
	background: #182949;
	color: #fff;
	line-height: normal;
	/* padding: 1.53rem 5.28rem; */
	border: none;
	transition: 300ms ease;
}
.__custom-btn.-border-3:hover {
	background: transparent;
	color: #182949;
	/* box-shadow:
    -7px -7px 20px 0px #fff9,
    -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #0002,
    4px 4px 5px 0px #0001; */
}
.__custom-btn.-border-3:before,
.__custom-btn.-border-3:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 2px;
	width: 0;
	background: #182949;
	transition: width 600ms ease;
}
.__custom-btn.-border-3:after {
	right: inherit;
	top: inherit;
	left: 0;
	bottom: 0;
}
.__custom-btn.-border-3:hover:before,
.__custom-btn.-border-3:hover:after {
	width: 100%;
}

.__custom-btn.-border-3:not(:hover):before,
.__custom-btn.-border-3:not(:hover):after {
	width: 0;
	transition: width 600ms ease;
}

.__custom-btn.-border-3-1 {
	background: #fffefb;
	color: #182949;
	line-height: normal;
	/* padding: 1.53rem 5.28rem; */
	border: none;
	transition: 300ms ease;
}
.__custom-btn.-border-3-1:hover {
	background: transparent;
	color: #fffefb;
	/* box-shadow:
    -7px -7px 20px 0px #fff9,
    -4px -4px 5px 0px #fff9,
    7px 7px 20px 0px #0002,
    4px 4px 5px 0px #0001; */
}
.__custom-btn.-border-3-1:before,
.__custom-btn.-border-3-1:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 2px;
	width: 0;
	background: #fffefb;
	transition: width 600ms ease;
}
.__custom-btn.-border-3-1:after {
	right: inherit;
	top: inherit;
	left: 0;
	bottom: 0;
}
.__custom-btn.-border-3-1:hover:before,
.__custom-btn.-border-3-1:hover:after {
	width: 100%;
}

.__custom-btn.-border-3-1:not(:hover):before,
.__custom-btn.-border-3-1:not(:hover):after {
	width: 0;
	transition: width 600ms ease;
}

/* border-4 */
.__custom-btn.-border-4 {
	background: #000;
	color: #fff;
	line-height: 42px;
	padding: 0;
	border: none;
}
.__custom-btn.-border-4 span {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
}
.__custom-btn.-border-4:before,
.__custom-btn.-border-4:after {
	position: absolute;
	content: '';
	height: 0%;
	width: 2px;
	background: #000;
}
.__custom-btn.-border-4:before {
	right: 0;
	top: 0;
	transition: all 500ms ease;
}
.__custom-btn.-border-4:after {
	left: 0;
	bottom: 0;
	transition: all 500ms ease;
}
.__custom-btn.-border-4:hover {
	color: #000;
	background: transparent;
}
.__custom-btn.-border-4:hover:before {
	transition: all 500ms ease;
	height: 100%;
}
.__custom-btn.-border-4:hover:after {
	transition: all 500ms ease;
	height: 100%;
}
.__custom-btn.-border-4 span:before,
.__custom-btn.-border-4 span:after {
	position: absolute;
	content: '';
	background: #000;
}
.__custom-btn.-border-4 span:before {
	left: 0;
	top: 0;
	width: 0%;
	height: 2px;
	transition: all 500ms ease;
}
.__custom-btn.-border-4 span:after {
	right: 0;
	bottom: 0;
	width: 0%;
	height: 2px;
	transition: all 500ms ease;
}
.__custom-btn.-border-4 span:hover:before {
	width: 100%;
}
.__custom-btn.-border-4 span:hover:after {
	width: 100%;
}

/* cube */
.__custom-btn.-cube {
	position: relative;
	right: 20px;
	bottom: 20px;
	border: none;
	width: 130px;
	height: 40px;
	line-height: 40px;
	-webkit-perspective: 230px;
	perspective: 230px;
}
.__custom-btn.-cube span {
	display: block;
	position: absolute;
	width: 130px;
	height: 40px;
	border: 2px solid #000;
	margin: 0;
	text-align: center;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}
.__custom-btn.-cube span:nth-child(1) {
	box-shadow:
		-7px -7px 20px 0px #fff9,
		-4px -4px 5px 0px #fff9,
		7px 7px 20px 0px #0002,
		4px 4px 5px 0px #0001;
	-webkit-transform: rotateX(90deg);
	-moz-transform: rotateX(90deg);
	transform: rotateX(90deg);
	-webkit-transform-origin: 50% 50% -20px;
	-moz-transform-origin: 50% 50% -20px;
	transform-origin: 50% 50% -20px;
}
.__custom-btn.-cube span:nth-child(2) {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
	-webkit-transform-origin: 50% 50% -20px;
	-moz-transform-origin: 50% 50% -20px;
	transform-origin: 50% 50% -20px;
}
.__custom-btn.-cube:hover span:nth-child(1) {
	-webkit-transform: rotateX(0deg);
	-moz-transform: rotateX(0deg);
	transform: rotateX(0deg);
}
.__custom-btn.-cube:hover span:nth-child(2) {
	background: transparent;
	color: #e0e5ec;
	-webkit-transform: rotateX(-81deg);
	-moz-transform: rotateX(-81deg);
	transform: rotateX(-81deg);
}

/* ttb */
.__custom-btn.-ttb {
	background: #000;
	color: #fff;
	z-index: 1;
}
.__custom-btn.-ttb:after {
	position: absolute;
	content: '';
	width: 100%;
	height: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: #e0e5ec;
	transition: all 0.3s ease;
}
.__custom-btn.-ttb:hover {
	color: #000;
}
.__custom-btn.-ttb:hover:after {
	top: 0;
	height: 100%;
}
.__custom-btn.-ttb:active {
	top: 2px;
}

/* btt */
.__custom-btn.-btt {
	background: #000;
	color: #fff;
	z-index: 1;
}
.__custom-btn.-btt:after {
	position: absolute;
	content: '';
	width: 100%;
	height: 0;
	top: 0;
	left: 0;
	z-index: -1;
	background: #e0e5ec;
	transition: all 0.3s ease;
}
.__custom-btn.-btt:hover {
	color: #000;
}
.__custom-btn.-btt:hover:after {
	top: auto;
	bottom: 0;
	height: 100%;
}
.__custom-btn.-btt:active {
	top: 2px;
}

/* ver */
.__custom-btn.-ver {
	background: #000;
	color: #fff;
	z-index: 1;
}

.__custom-btn.-ver:after {
	position: absolute;
	content: '';
	width: 100%;
	height: 0;
	top: 50%;
	left: 0;
	z-index: -1;
	background: #e0e5ec;
	transition: all 0.3s ease;
}

.__custom-btn.-ver:hover {
	color: #000;
}

.__custom-btn.-ver:hover:after {
	top: 0;
	height: 100%;
}

.__custom-btn.-ver:active {
	top: 2px;
}

/* ltr */
.__custom-btn.-ltr {
	/* background: #000; */
	/* color: #fff; */
	z-index: 1;
}
.__custom-btn.-ltr:after {
	position: absolute;
	content: '';
	width: 0;
	height: 100%;
	top: 0;
	right: 0;
	z-index: -1;
	background: #002b55;
	transition: all 0.4s ease;
	border-radius: 3.125rem;
}
.__custom-btn.-ltr:hover p {
	color: #ffecc1;
}
.__custom-btn.-ltr:hover svg circle,
.__custom-btn.-ltr:hover svg path {
	stroke: #ffecc1;
}
.__custom-btn.-ltr:hover:after {
	left: 0;
	width: 100%;
}
.__custom-btn.-ltr:active {
	top: 2px;
}

/* rtl */
.__custom-btn.-rtl {
	background: #000;
	color: #fff;
	z-index: 1;
}
.__custom-btn.-rtl:after {
	position: absolute;
	content: '';
	width: 0;
	height: 100%;
	top: 0;
	left: 0;
	direction: rtl;
	z-index: -1;
	background: #e0e5ec;
	transition: all 0.3s ease;
}
.__custom-btn.-rtl:hover {
	color: #000;
}
.__custom-btn.-rtl:hover:after {
	left: auto;
	right: 0;
	width: 100%;
}
.__custom-btn.-rtl:active {
	top: 2px;
}

/* hor */
.__custom-btn.-hor {
	background: #000;
	color: #fff;
	z-index: 1;
}
.__custom-btn.-hor:after {
	position: absolute;
	content: '';
	width: 0;
	height: 100%;
	top: 0;
	left: 50%;
	direction: rtl;
	z-index: -1;
	background: #e0e5ec;
	transition: all 0.3s ease;
}
.__custom-btn.-hor:hover {
	color: #000;
}
.__custom-btn.-hor:hover:after {
	left: 0;
	width: 100%;
}
.__custom-btn.-hor:active {
	top: 2px;
}

/* arrow */

.__custom-btn-arrow {
	--w: 180px;
	--h: 60px;
	--icon-size: 25px;
	--text-color: #fff;
	--box-glow-color: transparent;
	--box-glow-blur: 20px;
	position: relative;
	min-width: var(--w);
	min-height: var(--h);
	border-radius: var(--h);
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	font-family: 'Montserrat';
	color: var(--text-color);
	background: #fc6100;
	box-shadow:
		0 0 0 1px rgb(200 200 220 / 0.22),
		0 0 var(--box-glow-blur) var(--box-glow-color),
		inset 0 0 26px -10px var(--box-glow-color);
	overflow: hidden;
	cursor: pointer;
	transition: box-shadow 500ms ease;
	z-index: 2;
}
.__custom-btn-arrow::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #fac300;
	box-shadow: inset 0 0px 24px 0 rgb(170 230 250 / 0.12);
	border-radius: var(--h);
	z-index: 1;
	transition:
		transform 500ms ease,
		box-shadow 500ms ease;
}

.__custom-btn-arrow .text,
.icon {
	z-index: 2;
}

.__custom-btn-arrow .text {
	transform: translateX(-50%);
	font-family: 'Montserrat';
	transition: transform 500ms ease;
}

.__custom-btn-arrow .icon {
	position: absolute;
	width: var(--icon-size);
	height: var(--icon-size);
	left: 0;
	transform: translateX(calc((var(--w)) / 2 + 8px));
	transition:
		transform 500ms ease,
		color 500ms ease;
}
.__custom-btn-arrow svg {
	width: 100%;
	height: 100%;
	fill: #fff;
}

.__custom-btn-arrow:active {
	--box-glow-blur: 36px;
}
.__custom-btn-arrow:hover,
.__custom-btn-arrow:active {
	--box-glow-color: var(--color);
}
.__custom-btn-arrow:hover::before,
.__custom-btn-arrow:active::before {
	transform: translateX(65%);
	box-shadow: inset 0 0px 0px 0 transparent;
}
.__custom-btn-arrow:hover .text,
.__custom-btn-arrow:active .text {
	transform: translateX(0%);
	animation-play-state: running;
}
.__custom-btn-arrow:hover .icon,
.__custom-btn-arrow:active .icon {
	transform: translateX(calc(var(--w) - var(--icon-size) - 19px));
	color: var(--color);
}

.__custom-btn-arrow:focus-visible {
	outline: none;
}
.__custom-btn-arrow:focus-visible:not(:hover, :active) {
	--box-glow-color: rgb(114 114 114 / 0.5);
}

/* social */

/* <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> */

.__transit-icon ul {
	position: relative;
	display: flex;
}
.__transit-icon ul li {
	position: relative;
	list-style: none;
	margin: 0 20px;
	cursor: pointer;
}
.__transit-icon ul li a {
	text-decoration: none;
}
.__transit-icon ul li a .fa-brands {
	font-size: 6em;
	color: #222;
}
.__transit-icon ul li a::before {
	font-family: 'FontAwesome';
	position: absolute;
	top: 0;
	left: 0;
	font-size: 6em;
	height: 0;
	overflow: hidden;
	transition: 0.5s ease-in-out;
}

.__transit-icon ul li:nth-child(1) a::before {
	content: '\f16d';
	color: #dc2743;
	/* border-bottom: 4px solid #dc2743; */
}
.__transit-icon ul li:nth-child(2) a::before {
	content: '\f232';
	color: #25d366;
	/* border-bottom: 4px solid #25D366; */
}
.__transit-icon ul li:nth-child(3) a::before {
	content: '\f099';
	color: #1da1f2;
	/* border-bottom: 4px solid #1DA1F2; */
}
.__transit-icon ul li:hover a::before {
	height: 100%;
}

/* out */

.__custom-btn.-out {
	--theme: #ffffff;

	border: 1px solid var(--theme);
	overflow: hidden;
	transition: 0.3s 0.1s;
	/* padding: 12px 24px; */
	/* font-weight: 700; */
	/* font-size: 1.2rem; */
	text-align: center;
	position: relative;
	display: inline-block;
	text-decoration: none;
	color: var(--theme);
	background: #ffffff1a;
	cursor: pointer;

	/* &:active {
      transform: translateX(100px);
      background: rgba(255, 255, 255, 0.5);
    } */

	span {
		position: relative;
		z-index: 5;
		transition: 1s ease-in-out;
	}

	&:hover,
	&:active {
		span {
			color: #494949;
		}
	}

	&:before,
	&:after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 20px;
		width: 20px;
		border-radius: 50%;
		background-color: var(--theme);
	}

	&:hover,
	&:active {
		&:before {
			animation: collisionLeft 1s both alternate;
		}
		&:after {
			animation: collisionRight 1s both alternate;
		}
	}

	&:before {
		left: -30%;
	}
	&:after {
		left: 125%;
	}
}

@keyframes collision {
	0% {
		left: -30%;
		width: 20px;
		height: 20px;
	}
	50% {
		left: 50%;
		width: 40px;
		height: 40px;
	}
	100% {
		left: 50%;
		width: 300px;
		height: 300px;
	}
}

@keyframes collisionLeft {
	0% {
		left: -30%;
		width: 20px;
		height: 20px;
	}
	50% {
		left: 50%;
		width: 40px;
		height: 40px;
	}
	100% {
		left: 40%;
		width: 300px;
		height: 300px;
	}
}

@keyframes collisionRight {
	0% {
		left: 125%;
		width: 20px;
		height: 20px;
	}
	50% {
		left: 50%;
		width: 40px;
		height: 40px;
	}
	100% {
		left: 60%;
		width: 300px;
		height: 300px;
	}
}

/* @media (max-width: 768px) {
    .__custom-btn.-out::before, .__custom-btn.-out::after {
      display: none;
    }
    .__custom-btn.-out span {
      color: #fff !important;
    }
} */

/* nav */
.__custom-btn-nav ul li a:before,
.__custom-btn-nav ul li:before,
.__custom-btn-nav ul li:after {
	content: '';
	position: absolute;
	height: 33.33%;
	width: 0;
	background-color: #fb872b;
	transition: all 0.7s ease;
}

.__custom-btn-nav ul {
	list-style-type: none;
	padding: 0;
	display: flex;
	justify-content: space-around;
}

.__custom-btn-nav ul li {
	position: relative;
	padding: 4px 15px;
	margin: 0 5px;
	height: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.__custom-btn-nav ul li a {
	font-family: 'Tomorrow', sans-serif;
	font-size: 24px;
	color: #000;
	text-transform: uppercase;
	letter-spacing: 3px;
	text-decoration: none;
	padding: 10px 5px;
	transition: all 0.6s ease;
	z-index: 1;
}

.__custom-btn-nav ul li a:before {
	left: 0;
	bottom: 66.66%;
}

.__custom-btn-nav ul li:before {
	right: 0;
	top: 33.33%;
}

.__custom-btn-nav ul li:after {
	left: 0;
	bottom: 0;
}

.__custom-btn-nav ul li:hover a {
	text-shadow: 1px 1px 5px #000;
	color: #fff;
}

.__custom-btn-nav ul li:hover a:before {
	width: 100%;
}

.__custom-btn-nav ul li:hover:before,
.__custom-btn-nav ul li:hover:after {
	width: 100%;
}