/* ===============================
   Global Theme & Variable Setup
   =============================== */
:root{
	/* Bright palette */
	--clr-primary: #ff5722;
	--clr-primary-dark: #e64a19;
	--clr-secondary: #00bcd4;
	--clr-secondary-dark:#0097a7;
	--clr-accent: #8bc34a;
	--clr-accent-dark:#689f38;
	--clr-light:#ffffff;
	--clr-dark:#222222;
	--clr-muted:#666666;

	/* Glassmorphism */
	--glass-bg: rgba(255,255,255,0.25);
	--glass-border:rgba(255,255,255,0.4);

	/* Gradients */
	--grad-accent: linear-gradient(135deg,var(--clr-secondary) 0%,var(--clr-primary) 100%);
	--grad-card: linear-gradient(145deg,#ffffff44 0%,#ffffff22 100%);

	/* Shadows & Blur */
	--shadow-lg:0 8px 24px rgba(0,0,0,0.25);
	--blur:blur(12px);

	/* Typography */
	--font-heading:'Poppins',sans-serif;
	--font-body:'Work Sans',sans-serif;
}

/* ===============================
   Base & Utility
   =============================== */
html{scroll-behavior:smooth;}
body{
	font-family:var(--font-body);
	color:var(--clr-dark);
	background-color:#fafafa;
	line-height:1.65;
}

h1,h2,h3,h4,h5,h6{
	font-family:var(--font-heading);
	font-weight:700;
	color:var(--clr-dark);
	text-align:center;
	text-shadow:1px 1px 3px rgba(0,0,0,0.15);
}

a{
	color:var(--clr-primary);
	text-decoration:none;
	transition:color .3s ease;
}
a:hover,a:focus{color:var(--clr-primary-dark);}

/* Section spacing helpers */
.section-space{padding-block:4rem;}
.pt-header{padding-top:100px;} /* For privacy / terms pages */

/* ===============================
   Glassmorphism Container
   =============================== */
.glassmorph{
	background:var(--glass-bg);
	backdrop-filter:var(--blur);
	-webkit-backdrop-filter:var(--blur);
	border:1px solid var(--glass-border);
	border-radius:1.25rem;
}

/* ===============================
   Buttons (Global)
   =============================== */
.btn,
button,
input[type='submit']{
	position:relative;
	display:inline-block;
	font-family:var(--font-heading);
	font-weight:600;
	border:none;
	border-radius:50px;
	padding:.65rem 1.5rem;
	color:var(--clr-light);
	background:var(--grad-accent);
	box-shadow:0 4px 12px rgba(0,0,0,0.15);
	transition:all .35s ease;
}
.btn:hover,
button:hover,
input[type='submit']:hover{
	transform:translateY(-3px);
	box-shadow:0 8px 20px rgba(0,0,0,0.25);
	background:linear-gradient(135deg,var(--clr-primary) 0%,var(--clr-secondary) 100%);
}
.btn:active{transform:translateY(0);}

/* Outline Light Variant */
.btn-outline-light{
	background:transparent;
	border:2px solid #ffffff;
	color:#ffffff;
}
.btn-outline-light:hover{
	background:#ffffff;
	color:var(--clr-primary);
}

/* ===============================
   Navigation
   =============================== */
header .navbar{
	backdrop-filter:var(--blur);
}
.navbar-brand{font-weight:700;}
.nav-link{
	font-weight:500;
	margin-inline:1rem;
}
.nav-link:hover,
.nav-link:focus{color:var(--clr-primary) !important;}

/* ===============================
   Hero Section
   =============================== */
#hero{
	color:#fff;
	text-align:center;
	display:flex;
	justify-content:center;
	align-items:center;
}
#hero .display-4{
	text-shadow:2px 2px 6px rgba(0,0,0,0.45);
}

/* ===============================
   Cards & Image Containers
   =============================== */
.card{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	text-align:center;
	background:var(--glass-bg);
	backdrop-filter:var(--blur);
	border:1px solid var(--glass-border);
	border-radius:1rem;
	overflow:hidden;
	box-shadow:var(--shadow-lg);
	transition:transform .4s ease;
}
.card:hover{transform:translateY(-6px);}

.card-image,
.image-container{
	width:100%;
	height:220px;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--grad-card);
}
.card-image img,
.image-container img{
	width:100%;
	height:100%;
	object-fit:cover;
	margin:0 auto;
	transition:transform .6s ease;
}
.card:hover img{transform:scale(1.08);}

.card-content{padding:1.25rem;}

/* ===============================
   Testimonials
   =============================== */
.testimonial,
.card-content{
	color:var(--clr-dark);
}
.testimonial p{margin-bottom:0;}

/* ===============================
   Behind the Scenes Toggles
   =============================== */
#behind input[type="checkbox"]{
	accent-color:var(--clr-primary);
	transform:scale(1.2);
	margin-top:.1rem;
}

/* ===============================
   Parallax Sections
   =============================== */
.parallax{
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
	position:relative;
}
.parallax::before{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.2) 100%);
}
.parallax>*{position:relative;}

/* ===============================
   Read-more Links
   =============================== */
.link-read-more{
	font-weight:600;
	display:inline-flex;
	align-items:center;
	gap:.3em;
}
.link-read-more::after{
	content:"›";
	transition:transform .35s ease;
}
.link-read-more:hover::after{transform:translateX(4px);}

/* ===============================
   Social Links (Footer)
   =============================== */
footer a{
	color:var(--clr-light);
	margin-inline:.25rem;
	
}
footer a:hover{text-decoration:underline;}
footer{color:#f1f1f1;background-color: #474747 !important;}

/* ===============================
   Success Page Helper
   =============================== */
.full-vh{min-height:100vh;display:flex;align-items:center;justify-content:center;}

/* ===============================
   Animations – "Hand-drawn" style
   =============================== */
@keyframes sketch-in{
	from{stroke-dasharray:0 300;opacity:0;}
	to{stroke-dasharray:300 0;opacity:1;}
}
.sketch-path{
	stroke:var(--clr-primary);
	stroke-width:3;
	fill:none;
	animation:sketch-in 2s forwards;
}

/* Fade-in utility for ScrollReveal fallback */
.fade-in{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease;}
.fade-in.appear{opacity:1;transform:none;}

/* ===============================
   Media Queries
   =============================== */
@media (max-width:767.98px){
	.nav-link{margin-inline:.5rem;}
	.card-image,.image-container{height:180px;}
}