/* ===========================================
   Ray G Handyman Services
   Version 1.0
=========================================== */

:root{

	--navy:#081624;
	--navy-light:#102844;
	--navy-card:#153556;

	--red:#c62828;
	--red-hover:#e53935;

	--white:#ffffff;
	--light:#eef3f8;
	--grey:#c7d0db;

	--shadow:0 20px 50px rgba(0,0,0,.35);

	--radius:18px;

	--transition:.3s ease;

}

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

html{

	scroll-behavior:smooth;

}

body{

	font-family:"Inter",sans-serif;

	background:var(--navy);

	color:var(--white);

	line-height:1.7;

}

img{

	max-width:100%;

	display:block;

}

a{

	color:inherit;

	text-decoration:none;

}

.container{

	width:min(1200px,92%);

	margin:auto;

}

/* ===========================
HEADER
=========================== */

.site-header{

	position:fixed;

	top:0;

	left:0;

	width:100%;

	z-index:999;

	display:flex;

	justify-content:space-between;

	align-items:center;

	padding:24px 60px;

	background:rgba(8,22,36,.65);

	backdrop-filter:blur(14px);

	border-bottom:1px solid rgba(255,255,255,.08);

}

.logo{

	font-size:1.6rem;

	font-weight:800;

	letter-spacing:.04em;

}

.logo a{

	color:white;

}

nav{

	display:flex;

	gap:40px;

}

nav a{

	font-weight:600;

	color:white;

	transition:.25s;

}

nav a:hover{

	color:var(--red);

}

/* ===========================
HERO
=========================== */

.hero{

	position:relative;

	height:100vh;

	overflow:hidden;

}

.hero-slider{

	position:absolute;

	inset:0;

}

.hero-slide{

	position:absolute;

	inset:0;

	opacity:0;

	transition:opacity 1.5s;

}

.hero-slide.active{

	opacity:1;

}

.hero-slide img{

	width:100%;

	height:100%;

	object-fit:cover;

}

.hero::after{

	content:"";

	position:absolute;

	inset:0;

	background:linear-gradient(rgba(5,12,22,.65),rgba(5,12,22,.78));

}

.hero-overlay{

	position:relative;

	z-index:5;

	height:100%;

	display:flex;

	flex-direction:column;

	justify-content:center;

	align-items:center;

	text-align:center;

	padding:30px;

}

.hero-overlay h1{

	font-size:clamp(3rem,7vw,5.5rem);

	font-weight:800;

	margin-bottom:20px;

	max-width:900px;

}

.hero-overlay p{

	font-size:1.3rem;

	color:var(--grey);

	margin-bottom:40px;

	max-width:700px;

}

.primary-btn{

	background:var(--red);

	color:white;

	padding:18px 42px;

	border:none;

	border-radius:50px;

	font-size:1rem;

	font-weight:700;

	cursor:pointer;

	transition:.25s;

	box-shadow:var(--shadow);

}

.primary-btn:hover{

	background:var(--red-hover);

	transform:translateY(-3px);

}

/* ===========================
INTRO
=========================== */

.intro{

	padding:120px 0;

	text-align:center;

}

.intro h2{

	font-size:3rem;

	margin-bottom:30px;

}

.intro p{

	max-width:850px;

	margin:auto;

	font-size:1.15rem;

	color:var(--grey);

}

/* ===========================
SERVICES
=========================== */

.services{

	padding:100px 0;

	background:var(--navy-light);

}

.services h2{

	text-align:center;

	font-size:2.8rem;

	margin-bottom:60px;

}

.service-grid{

	display:grid;

	grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

	gap:30px;

}

.service-card{

	background:var(--navy-card);

	padding:40px;

	border-radius:var(--radius);

	border:1px solid rgba(255,255,255,.08);

	transition:var(--transition);

}

.service-card:hover{

	transform:translateY(-8px);

	border-color:var(--red);

	box-shadow:var(--shadow);

}

.service-card h3{

	font-size:1.5rem;

	margin-bottom:18px;

}

.service-card p{

	color:var(--grey);

}

/* ===========================
ABOUT
=========================== */

.about{

	padding:100px 0;

}

.about-grid{

	display:flex;

	justify-content:center;

}

.about-text{

	max-width:800px;

	text-align:center;

}

.about-text h2{

	font-size:2.8rem;

	margin-bottom:30px;

}

.about-text p{

	color:var(--grey);

	font-size:1.1rem;

	margin-bottom:20px;

}

.about-tags{

	display:flex;

	flex-wrap:wrap;

	justify-content:center;

	gap:12px;

	margin-top:30px;

}

.about-tags span{

	background:var(--navy-card);

	border:1px solid rgba(255,255,255,.08);

	padding:10px 18px;

	border-radius:999px;

	font-size:.9rem;

	color:var(--light);

}

/* ===========================
PROMO
=========================== */

.promo{

	padding:100px 0;

	background:var(--navy-light);

}

.promo-grid{

	display:grid;

	grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

	gap:30px;

}

.promo-card{

	background:var(--navy-card);

	padding:40px;

	border-radius:var(--radius);

	border:1px solid rgba(255,255,255,.08);

}

.promo-card h2{

	font-size:1.6rem;

	margin-bottom:18px;

}

.promo-card p{

	color:var(--grey);

}

/* ===========================
PROJECTS
=========================== */

.projects{

	padding:110px 0;

}

.projects h2{

	text-align:center;

	font-size:2.8rem;

	margin-bottom:60px;

}

.project-grid{

	display:grid;

	grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

	gap:30px;

}

.project-card{

	overflow:hidden;

	border-radius:var(--radius);

	box-shadow:var(--shadow);

}

.project-card img{

	height:280px;

	width:100%;

	object-fit:cover;

	transition:.5s;

}

.project-card:hover img{

	transform:scale(1.08);

}

/* ===========================
GALLERY
=========================== */

.gallery{

	padding:100px 0 80px;

	background:var(--navy-light);

}

.gallery h2{

	text-align:center;

	font-size:2.8rem;

	margin-bottom:12px;

}

.gallery-sub{

	text-align:center;

	color:var(--grey);

	margin-bottom:50px;

}

.gallery-strip-wrap{

	overflow:hidden;

	width:100%;

	mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);

	-webkit-mask-image:linear-gradient(to right, transparent, black 6%, black 94%, transparent);

}

.gallery-strip{

	display:flex;

	gap:20px;

	width:max-content;

	animation:galleryScroll 34s linear infinite;

}

.gallery-strip-wrap:hover .gallery-strip{

	animation-play-state:paused;

}

@keyframes galleryScroll{

	from{ transform:translateX(0); }

	to{ transform:translateX(-50%); }

}

.gallery-strip-item{

	flex:0 0 auto;

	width:280px;

	height:200px;

	border-radius:var(--radius);

	overflow:hidden;

	cursor:pointer;

	box-shadow:var(--shadow);

}

.gallery-strip-item img{

	width:100%;

	height:100%;

	object-fit:cover;

	transition:.4s;

}

.gallery-strip-item:hover img{

	transform:scale(1.06);

}

.gallery-cta-wrap{

	text-align:center;

	margin-top:44px;

}

.gallery-modal-content{

	width:min(900px,95%);

	padding:30px;

}

.gallery-viewer{

	display:flex;

	align-items:center;

	justify-content:center;

	gap:16px;

	min-height:60vh;

}

.gallery-viewer img{

	max-width:100%;

	max-height:70vh;

	border-radius:14px;

	object-fit:contain;

	touch-action:pan-y;

}

.gallery-nav{

	flex:0 0 auto;

	width:46px !important;

	height:46px;

	background:rgba(8,22,36,.7);

	border:1px solid rgba(255,255,255,.15);

	color:white;

	border-radius:50%;

	cursor:pointer;

	font-size:1.1rem;

	transition:.2s;

}

.gallery-nav:hover{

	background:var(--red);

	border-color:var(--red);

}

.gallery-counter{

	text-align:center;

	color:var(--grey);

	margin-top:16px;

	font-size:.9rem;

}

@media(max-width:768px){

	.gallery-strip-item{

		width:180px;

		height:130px;

	}

	.gallery-nav{

		width:38px !important;

		height:38px;

		font-size:.95rem;

	}

	.gallery-viewer{

		min-height:45vh;

		gap:8px;

	}

}

/* ===========================
REVIEWS
=========================== */

.reviews{

	padding:110px 0;

	background:var(--navy-light);

}

.reviews h2{

	text-align:center;

	font-size:2.8rem;

	margin-bottom:60px;

}

.review-grid{

	display:grid;

	grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

	gap:30px;

}

.review-card{

	background:var(--navy-card);

	padding:35px;

	border-radius:var(--radius);

	border:1px solid rgba(255,255,255,.08);

	transition:.3s;

}

.review-card:hover{

	transform:translateY(-8px);

	border-color:var(--red);

	box-shadow:var(--shadow);

}

.review-card h3{

	font-size:1.3rem;

	margin-bottom:15px;

}

.review-card p{

	color:var(--grey);

}

.review-stars{

	color:#ffd54f;

	font-size:1.2rem;

	margin-bottom:15px;

}

.review-photos{

	display:flex;

	flex-wrap:wrap;

	gap:10px;

	margin-top:20px;

}

.review-photos img{

	width:70px;

	height:70px;

	object-fit:cover;

	border-radius:10px;

	border:1px solid rgba(255,255,255,.1);

}

/* ===========================
CALL TO ACTION
=========================== */

.cta{

	padding:120px 20px;

	text-align:center;

	background:linear-gradient(135deg,#0d2238,#081624);

}

.cta h2{

	font-size:3rem;

	margin-bottom:25px;

}

.cta p{

	max-width:700px;

	margin:auto;

	color:var(--grey);

	margin-bottom:40px;

	font-size:1.1rem;

}

/* ===========================
FOOTER
=========================== */

footer{

	background:#050d16;

	padding:70px 20px;

	text-align:center;

	border-top:1px solid rgba(255,255,255,.08);

}

footer h3{

	font-size:1.8rem;

	margin-bottom:15px;

}

footer p{

	color:var(--grey);

	margin:8px 0;

}

footer a{

	color:white;

	transition:.25s;

}

footer a:hover{

	color:var(--red);

}

.footer-legal{

	font-size:.8rem;

	opacity:.6;

}

/* ===========================
SOCIAL BUTTONS
=========================== */

.social-buttons{

	position:fixed;

	left:25px;

	bottom:25px;

	display:flex;

	flex-direction:column;

	gap:12px;

	z-index:999;

}

.social-buttons a{

	width:55px;

	height:55px;

	border-radius:50%;

	display:flex;

	align-items:center;

	justify-content:center;

	background:var(--navy-card);

	border:1px solid rgba(255,255,255,.08);

	box-shadow:var(--shadow);

	transition:.25s;

}

.social-buttons a:hover{

	background:var(--red);

	transform:translateY(-5px);

}

/* ===========================
CONTACT FAB
=========================== */

.contact-fab{

	position:fixed;

	right:25px;

	bottom:25px;

	background:var(--red);

	color:white;

	padding:18px 28px;

	border-radius:60px;

	font-weight:700;

	cursor:pointer;

	box-shadow:var(--shadow);

	transition:.3s;

	z-index:999;

}

.contact-fab:hover{

	background:var(--red-hover);

	transform:translateY(-5px);

}

/* ===========================
MODAL
=========================== */

.modal{

	display:none;

	position:fixed;

	inset:0;

	background:rgba(0,0,0,.75);

	backdrop-filter:blur(8px);

	z-index:2000;

	align-items:center;

	justify-content:center;

	padding:30px;

}

.modal-content{

	background:var(--navy-card);

	width:min(700px,95%);

	padding:45px;

	border-radius:20px;

	position:relative;

}

.modal h2{

	margin-bottom:25px;

}

.modal input,

.modal textarea,

.modal select{

	width:100%;

	margin-bottom:18px;

	padding:16px;

	border-radius:12px;

	border:1px solid rgba(255,255,255,.1);

	background:#0c1d31;

	color:white;

	font-family:inherit;

	font-size:1rem;

}

.modal textarea{

	min-height:180px;

	resize:vertical;

}

.modal-actions{

	display:flex;

	gap:12px;

	justify-content:flex-end;

	margin-top:8px;

}

.modal-actions .primary-btn{

	width:auto;

}

.modal button{

	width:100%;

}

.close-modal{

	position:absolute;

	top:20px;

	right:25px;

	font-size:2rem;

	cursor:pointer;

	color:white;

}

/* ===========================
FORMS
=========================== */

input:focus,

textarea:focus{

	outline:none;

	border-color:var(--red);

}

/* ===========================
ANIMATIONS
=========================== */

.fade-up{

	opacity:0;

	transform:translateY(30px);

	animation:fadeUp .8s forwards;

}

@keyframes fadeUp{

	to{

		opacity:1;

		transform:translateY(0);

	}

}

@keyframes pulse{

	0%{

		transform:scale(1);

	}

	50%{

		transform:scale(1.04);

	}

	100%{

		transform:scale(1);

	}

}

.primary-btn{

	animation:pulse 3s infinite;

}

/* ===========================
SCROLLBAR
=========================== */

::-webkit-scrollbar{

	width:10px;

}

::-webkit-scrollbar-track{

	background:#081624;

}

::-webkit-scrollbar-thumb{

	background:var(--red);

	border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

	background:var(--red-hover);

}

/* ===========================
RESPONSIVE
=========================== */

@media(max-width:1024px){

	.site-header{

		padding:20px 30px;

	}

	.hero-overlay h1{

		font-size:3.5rem;

	}

}

@media(max-width:768px){

	.site-header{

		flex-direction:column;

		gap:20px;

		padding:20px;

	}

	nav{

		flex-wrap:wrap;

		justify-content:center;

		gap:20px;

	}

	.hero{

		height:85vh;

	}

	.hero-overlay h1{

		font-size:2.6rem;

	}

	.hero-overlay p{

		font-size:1rem;

	}

	.intro h2,

	.services h2,

	.projects h2,

	.reviews h2,

	.cta h2{

		font-size:2.2rem;

	}

	.service-grid,

	.project-grid,

	.review-grid{

		grid-template-columns:1fr;

	}

	.social-buttons{

		left:15px;

		bottom:15px;

	}

	.contact-fab{

		right:15px;

		bottom:15px;

		padding:15px 22px;

	}

}

@media(max-width:480px){

	.hero{

		height:75vh;

	}

	.hero-overlay h1{

		font-size:2rem;

	}

	.logo{

		font-size:1.2rem;

	}

	.primary-btn{

		width:100%;

	}

	.modal-content{

		padding:30px;

	}

}

.review-cta {
	margin-top: 3rem;
	text-align: center;
}

.review-cta p {
	margin-bottom: 1rem;
	color: #d6d6d6;
	font-size: 1.05rem;
}

.review-btn {
	display: inline-block;
	padding: 0.9rem 2rem;
	background: linear-gradient(135deg, #4285F4, #34A853);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	border-radius: 50px;
	box-shadow: 0 10px 25px rgba(0,0,0,.25);
	transition: transform .2s ease, box-shadow .2s ease;
}

.review-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 35px rgba(0,0,0,.35);
	color: #fff;
}

.review-btn:active {
	transform: translateY(0);
}

.review-btn {
	display: inline-block;
	padding: 0.9rem 2rem;
	background: #c62828;
	color: #fff;
	border: 2px solid #fff;
	border-radius: 50px;
	font-weight: 700;
	text-decoration: none;
	transition: .25s ease;
}

.review-btn:hover {
	background: #fff;
	color: #c62828;
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(0,0,0,.3);
}

/* ===========================
LEGAL PAGES
=========================== */

.legal-section{
	padding:140px 20px 100px;
	background:var(--navy);
	min-height:100vh;
}

.legal-content{
	max-width:800px;
	margin:auto;
}

.legal-content h1{
	font-size:2.8rem;
	margin-bottom:12px;
}

.legal-content .last-updated{
	color:var(--grey);
	font-size:0.95rem;
	margin-bottom:40px;
}

.legal-content h2{
	font-size:1.5rem;
	margin:36px 0 16px;
	color:var(--white);
}

.legal-content p,
.legal-content li{
	color:var(--grey);
	margin-bottom:14px;
	line-height:1.8;
}

.legal-content ul{
	padding-left:22px;
	margin-bottom:20px;
}

.legal-content a{
	color:var(--red-hover);
	text-decoration:underline;
}

.footer-legal-links{
	font-size:0.9rem;
	margin-top:12px;
}

.footer-legal-links a{
	color:var(--grey);
	text-decoration:underline;
}

.footer-legal-links a:hover{
	color:var(--red);
}