@charset "utf-8";
/* CSS Document */
/* ==========================================================================
   Button Component
   ========================================================================== */

.tc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;

	min-width: 180px;
	min-height: 56px;

	padding: 0.95rem 1.75rem;

	font-size: 1rem;
	font-weight: 600;
	line-height: 1;

	text-decoration: none;
	white-space: nowrap;

	border: 2px solid transparent;
	border-radius: var(--tc-radius-lg);

	cursor: pointer;

	position: relative;
	overflow: hidden;

	transition:
    all .35s cubic-bezier(.4,0,.2,1);

	will-change: transform;
	
	letter-spacing: .01em;

	
}

/* ==========================================================================
   Primary Button
   ========================================================================== */

.tc-btn--primary {
	background: linear-gradient(
    135deg,
    var(--tc-primary) 0%,
    var(--tc-primary-dark) 100%
);

	color: var(--tc-white);
box-shadow:
    var(--tc-shadow-primary);
}

.tc-btn--primary:hover {

	transform:
    translateY(-3px)
    scale(1.02);

	box-shadow:
    0 18px 45px rgba(227,30,36,.30);

}

.tc-btn--primary:active {

	transform: translateY(-1px);

}

/* ==========================================================================
   Secondary Button
   ========================================================================== */

.tc-btn--secondary {

	background: transparent;

	color: var(--tc-primary);

	border: 2px solid var(--tc-primary);

	box-shadow: none;

}

.tc-btn--secondary:hover{

	background: var(--tc-primary);

	color: var(--tc-white);

	border-color: var(--tc-primary);

	transform: translateY(-3px);

	box-shadow: var(--tc-shadow-primary);

}

.tc-btn--secondary:hover .tc-btn__icon{

	color: var(--tc-white);

}

.tc-btn--secondary:active {

	transform: translateY(-1px);

}

/* ==========================================================================
   Icon
   ========================================================================== */

.tc-btn__icon {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	transition:
		transform .3s ease;

}

.tc-btn:hover .tc-btn__icon {

	transform:
    translateX(6px)
    rotate(-8deg);

}

/* ==========================================================================
   Shine Effect
   ========================================================================== */

.tc-btn::before {

	content: "";

	position: absolute;

	top: 0;
	left: -120%;

	width: 60%;

	height: 100%;

	background:
		linear-gradient(
			120deg,
			transparent,
			rgba(255,255,255,.4),
			transparent
		);

	transform: skewX(-20deg);

	transition: left .75s ease;

}

.tc-btn:hover::before {

	left: 140%;

}

/* ==========================================================================
   Focus
   ========================================================================== */

.tc-btn:focus-visible {

	outline: none;

	box-shadow:
    0 0 0 4px rgba(227,30,36,.18),
    0 0 0 7px rgba(227,30,36,.08);

}

/* ==========================================================================
   Disabled
   ========================================================================== */

.tc-btn[disabled],
.tc-btn.is-disabled {

	opacity: .6;

	cursor: not-allowed;

	pointer-events: none;

}

/* ==========================================================================
   Hero Buttons
   ========================================================================== */

.tc-hero__buttons {

	display: flex;

	align-items: center;

	flex-wrap: wrap;

	gap: 1rem;

}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width:991px){

	.tc-hero__buttons{

		justify-content:center;

	}

}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width:767px){

	.tc-hero__buttons{

		flex-direction:column;

		align-items:stretch;

		width:100%;

	}

	.tc-btn{

		width:100%;

		min-width:100%;

	}

}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce){

	.tc-btn,
	.tc-btn::before,
	.tc-btn__icon{

		transition:none;

	}

	.tc-btn:hover{

		transform:none;

	}

}