/* ---------------------------------------------
   ColBiz Consulting – style.css
   Neumorphism + Hyperrealistic Textures Theme
   --------------------------------------------- */

/* ---------- Root Theme Variables ---------- */
:root{
	/* Neutral Palette */
	--clr-bg:#e5e7eb;
	--clr-surface:#f5f7fa;
	--clr-surface-alt:#ffffff;
	--clr-text:#333333;
	--clr-text-light:#ffffff;
	--clr-primary:#5865F2;
	--clr-primary-dark:#404bc3;
	--clr-accent:#ffb703;
	--clr-shadow:rgba(0,0,0,0.15);
	--clr-shadow-light:rgba(255,255,255,0.7);

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

	/* Radius & Elevation */
	--radius-lg:20px;
	--radius-md:12px;
	--elev-low:4px 4px 8px var(--clr-shadow), -4px -4px 8px var(--clr-shadow-light);
	--elev-inset:inset 4px 4px 8px var(--clr-shadow), inset -4px -4px 8px var(--clr-shadow-light);

	/* Timing */
	--ts-fast:.25s ease;
}

/* ---------- Global Resets ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	background:var(--clr-bg);
	color:var(--clr-text);
	font-family:var(--ff-body);
	line-height:1.6;
}
h1,h2,h3,h4,h5,h6{
	font-family:var(--ff-heading);
	color:#222222;
	margin-bottom:.75em;
	text-align:center;
}
section{padding:3rem 0}

/* ---------- Helper Utilities ---------- */
.text-center{text-align:center}
.is-rounded{border-radius:var(--radius-md)}
.parallax{
	background-attachment:fixed;
	background-size:cover;
	background-repeat:no-repeat;
}
.overlay-gradient{
	background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5));
}
.fullheight{min-height:100vh;display:flex;align-items:center;justify-content:center}
.pt-header{padding-top:100px}

/* ---------- Buttons & CTAs ---------- */
.btn,
button,
input[type='submit']{
	display:inline-block;
	background:var(--clr-primary);
	color:var(--clr-text-light);
	border:none;
	border-radius:var(--radius-md);
	padding:.75rem 2rem;
	font-weight:600;
	cursor:pointer;
	transition:transform var(--ts-fast),box-shadow var(--ts-fast);
	box-shadow:var(--elev-low);
}
.btn:hover,
button:hover,
input[type='submit']:hover{
	transform:translateY(-3px);
	box-shadow:0 6px 12px var(--clr-shadow);
}
.btn:active,
button:active,
input[type='submit']:active{
	transform:translateY(0);
	box-shadow:var(--elev-inset);
}
.button.is-primary{ /* Bulma override */
	background:var(--clr-primary);
	border:none;
}

/* ---------- Navbar ---------- */
.navbar{
	background:var(--clr-surface);
	box-shadow:var(--elev-low);
}
.navbar-item:hover{color:var(--clr-primary)}

/* ---------- Hero ---------- */
#hero{
	position:relative;
	color:var(--clr-text-light);
	text-shadow:1px 1px 3px rgba(0,0,0,.6);
}
#hero .title{font-size:2.5rem}
#hero .subtitle{font-size:1.2rem}

/* ---------- Card Components ---------- */
.card{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	background:var(--clr-surface-alt);
	border-radius:var(--radius-lg);
	box-shadow:var(--elev-low);
	transition:transform var(--ts-fast),box-shadow var(--ts-fast);
}
.card:hover{
	transform:translateY(-6px);
	box-shadow:0 12px 24px var(--clr-shadow);
}
.card-image,
.image-container{
	width:100%;
	height:220px;
	overflow:hidden;
	border-top-left-radius:var(--radius-lg);
	border-top-right-radius:var(--radius-lg);
	display:flex;
	align-items:center;
	justify-content:center;
}
.card-image img,
.image-container img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.card-content{padding:1.5rem}

/* ---------- Timeline Bullets ---------- */
.timeline .timeline-marker{
	box-shadow:var(--elev-low);
}

/* ---------- Success Stories – Video Modal ---------- */
.modal-content .box{
	background:var(--clr-surface);
	box-shadow:var(--elev-low);
}

/* ---------- Neumorphic Form ---------- */
form.box{
	background:var(--clr-surface);
	box-shadow:var(--elev-low);
}
.input, .textarea{
	border:none;
	border-radius:var(--radius-md);
	box-shadow:var(--elev-inset);
	background:var(--clr-surface-alt);
	color:var(--clr-text);
}
.input:focus, .textarea:focus{
	outline:none;
	box-shadow:var(--elev-low);
}

/* ---------- Links ---------- */
a{color:var(--clr-primary);transition:color var(--ts-fast)}
a:hover{color:var(--clr-primary-dark)}
.read-more{
	font-weight:600;
	position:relative;
}
.read-more::after{
	content:'';
	position:absolute;
	left:0;bottom:-2px;
	width:100%;height:2px;
	background:var(--clr-accent);
	transition:transform var(--ts-fast);
	transform:scaleX(0);
	transform-origin:right;
}
.read-more:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Social Links in Footer ---------- */
.footer a{margin-right:1rem;font-weight:500}
.footer a:hover{text-decoration:underline;color:var(--clr-primary)}

/* ---------- Drawn Animation (Scribble underline) ---------- */
@keyframes scribble{
	0%{stroke-dashoffset:220;}
	100%{stroke-dashoffset:0;}
}
.scribble-underline{
	position:relative;display:inline-block;
}
.scribble-underline svg{
	position:absolute;left:0;bottom:-5px;width:100%;height:15px;
	stroke:var(--clr-accent);stroke-width:3;fill:none;
	stroke-dasharray:220;stroke-dashoffset:220;
	animation:scribble 1.4s forwards;
}

/* ---------- Pseudo Textures ---------- */
.surface-texture{
	background:linear-gradient(135deg,rgba(255,255,255,.05) 25%,transparent 25%) -50px 0/100px 100px,
	            linear-gradient(225deg,rgba(0,0,0,.05) 25%,transparent 25%) -50px 0/100px 100px,
	            var(--clr-surface);
}

/* ---------- Media Queries ---------- */
@media(max-width:1024px){
	#hero .title{font-size:2rem}
	.card-image, .image-container{height:180px}
}
@media(max-width:768px){
	.navbar-item{padding:.75rem 1rem}
	section{padding:2rem 0}
}

/* ---------- Page Specific ---------- */
/* success.html */
.success-hero{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center}

/* privacy / terms top offset */
.legal-page{padding-top:100px}

/* ---------- Parallax Shadow Overlay ---------- */
.parallax::before{
	content:'';
	position:absolute;top:0;left:0;width:100%;height:100%;
	background:rgba(0,0,0,.5);
}

/* ---------- ScrollBar (optional aesthetic) ---------- */
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-thumb{background:var(--clr-primary);border-radius:4px}