/* ========================================
   Developer 2 - Custom Styles
   Add all your custom CSS here.
   This file loads AFTER style.css, so your
   styles will override when needed.
   ======================================== */


.h-screen {
	height: 100vh
}

/* Banner heading: 30px on mobile, let Tailwind md:text-7xl handle desktop */
@media (max-width: 767px) {
	.banner-heading {
		font-size: 30px !important;
	}

	.section-heading {
		font-size: 25px !important;
	}
}

/* ========================================
   Solutions Section — Height-Responsive
   Scales down for short viewports so
   card content never overlaps the header.
   ======================================== */

/* ---- Medium-short viewports (≤ 700px height) ---- */
@media (max-height: 640px) {

	/* Section header: less padding, smaller heading */
	.solutions-sticky>div:first-child {
		padding-top: 5.05rem;
	}

	.solutions-container h2 {
		font-size: 1.5rem;
	}

	/* Card grid: reduce top clearance + gap */
	.solution-card .max-w-7xl>div {
		padding-top: 3.5rem;
		gap        : 1.5rem;
	}

	/* Card heading */
	.solution-card h3 {
		font-size    : 1.25rem;
		margin-bottom: 0.375rem;
	}

	/* Paragraph text */
	.solution-card .text-lg {
		font-size    : 0.8rem;
		line-height  : 1.4;
		margin-bottom: 0.75rem;
	}

	/* Bullet list */
	.solution-card ul {
		margin-bottom: 0.75rem;
	}

	.solution-card ul>li+li {
		margin-top: 0.125rem;
	}

	.solution-card ul li span {
		font-size: 0.8rem;
	}

	/* CTA button */
	.solution-card a.inline-flex {
		padding  : 0.5rem 1.25rem;
		font-size: 0.8rem;
	}

	/* Stat / feature boxes */
	.solution-card .grid-cols-2>div {
		padding: 0.75rem;
	}

	.solution-card .grid-cols-2 .text-3xl {
		font-size: 1.25rem;
	}

	.solution-card .grid-cols-2 .text-sm {
		font-size: 0.65rem;
	}

	/* Badge pill */
	.solution-card span.inline-block {
		margin-bottom: 0.375rem;
		font-size    : 0.6rem;
		padding      : 0.2rem 0.6rem;
	}

	/* Scroll dots closer to bottom */
	.solutions-sticky>div:last-child {
		bottom: 0.75rem;
	}
}

/* ---- Very short viewports (≤ 500px height) ---- */
@media (max-height: 500px) {
	.solutions-sticky>div:first-child {
		padding-top: 0.4rem;
	}

	.solutions-container h2 {
		font-size: 1.15rem;
	}

	.solutions-container .rounded-full.text-sm {
		font-size    : 0.6rem;
		padding      : 0.2rem 0.6rem;
		margin-bottom: 0.25rem;
	}

	.solution-card .max-w-7xl>div {
		padding-top: 2.5rem;
		gap        : 1rem;
	}

	.solution-card h3 {
		font-size    : 1rem;
		margin-bottom: 0.25rem;
	}

	.solution-card .text-lg {
		font-size    : 0.7rem;
		margin-bottom: 0.5rem;
	}

	.solution-card ul>li+li {
		margin-top: 0;
	}

	.solution-card ul li span {
		font-size: 0.7rem;
	}

	.solution-card ul li i,
	.solution-card ul li svg {
		width : 14px;
		height: 14px;
	}

	.solution-card a.inline-flex {
		padding  : 0.35rem 1rem;
		font-size: 0.7rem;
	}

	.solution-card .grid-cols-2 {
		gap: 0.375rem;
	}

	.solution-card .grid-cols-2>div {
		padding: 0.5rem;
	}

	.solution-card .grid-cols-2 .text-3xl {
		font-size: 1rem;
	}
}

/* ========================================
   Solutions Section — Mobile (≤ 767px width)
   Compact fonts, gaps & boxes to fit on mobile.
   Scroll effect stays active.
   ======================================== */
@media (max-width: 767px) {

	/* 1. Fix top text cut — push header below nav */
	.solutions-sticky>div:first-child {
		padding-top: 1rem;
	}

	/* Section heading — smaller */
	.solutions-container h2 {
		font-size  : 1.15rem;
		line-height: 1.3;
	}

	/* 2. Fix gap — reduce badge margin above heading */
	.solutions-container .rounded-full.text-sm {
		font-size    : 0.6rem;
		padding      : 0.15rem 0.5rem;
		margin-bottom: 0.15rem;
	}

	/* Fix vertical centering gap — push content to top */
	.solution-card>div:nth-child(2) {
		align-items: flex-start !important;
		padding-top: 5.5rem;
	}

	/* Card grid: tighter gap */
	.solution-card .max-w-7xl>div {
		padding-top: 0;
		gap        : 1.3rem;
		align-items: start;
	}

	/* Badge pill */
	.solution-card span.inline-block {
		font-size    : 0.55rem;
		padding      : 0.1rem 0.4rem;
		margin-bottom: 0.15rem;
	}

	/* Card heading */
	.solution-card h3 {
		font-size    : 1rem;
		margin-bottom: 0.15rem;
	}

	/* Paragraph */
	.solution-card .text-lg {
		font-size    : 0.75rem;
		line-height  : 1.35;
		margin-bottom: 0.35rem;
	}

	/* Bullet list */
	.solution-card ul {
		margin-bottom: 0.35rem;
	}

	.solution-card ul>li+li {
		margin-top: 0;
	}

	.solution-card ul li {
		gap: 0.25rem;
	}

	.solution-card ul li span {
		font-size: 0.7rem;
	}

	.solution-card ul li i,
	.solution-card ul li svg {
		width : 12px;
		height: 12px;
	}

	/* CTA button */
	.solution-card a.inline-flex {
		padding  : 0.3rem 0.75rem;
		font-size: 0.7rem;
	}

	/* 3. Stat / feature boxes — bigger font, less height */
	.solution-card .grid-cols-2 {
		gap: 0.25rem;
	}

	.solution-card .grid-cols-2>div {
		padding      : 0.25rem 0.35rem;
		border-radius: 0.5rem;
	}

	.solution-card .grid-cols-2 .text-3xl {
		font-size    : 1.1rem;
		margin-bottom: 0;
	}

	.solution-card .grid-cols-2 .text-sm {
		font-size: 0.55rem;
	}
}