/*----------------------------------------------------------------

	Template Name: Rainfo - Minimal Creative Portfolio for Freelancers & Agencies
	Version: 1.0

-------------------------------------------------------------------------*/

/* Homepage Contact CTA form (#start-project) */
.cta-form-card.form-wrapper {
	top: 0;
	margin-top: 0;
	margin-bottom: 0;
}

.cta-form-card input[type="tel"] {
	color: #7c7d7e;
	font-size: 18px;
	font-weight: 300;
	border: 0 none;
	border-bottom: 1px solid #ebebec;
	padding: 0;
	margin-top: 25px;
	height: 60px;
}

.cta-privacy-note {
	margin: 25px 0 0;
	font-size: 13px;
	color: #9a9a9a;
}

.cta-privacy-note + .cta-privacy-note {
	margin-top: 6px;
}

.rn-contact-cta-area .form-output {
	max-width: 720px;
	margin: 0 auto;
}

/* Technologies section (#skill) tile grid */
.tech-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 30px;
}

.tech-tile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.tech-tile i {
	font-size: 38px;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Devicon's own "colored" variant for modern Angular is white, invisible on our white tiles */
.tech-tile .devicon-angular-plain.colored {
	color: #dd0031;
}

.tech-tile-name {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px;
	background: rgba(20, 20, 20, 0.88);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.tech-tile:hover i {
	opacity: 0;
	transform: scale(0.9);
}

.tech-tile:hover .tech-tile-name {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 767px) {
	.tech-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Portfolio section (#portfolio) */
.portfolio.project-bg--spoke::before {
	background: url("../img/portfolio/spoke_route.png");
}

@media (max-width: 991px) {
	.rn-portfolio-area .portfolio-wrapper .col-lg-4 {
		max-width: 480px;
		margin-left: auto;
		margin-right: auto;
	}
}

/* Hero slider Prev/Next nav — clicking the text left a blinking text-selection caret */
.nav-wrapper .nav-up,
.nav-wrapper .nav-down,
.nav-wrapper .nipa,
.nav-wrapper .nipa span {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	caret-color: transparent;
	outline: none;
}