/*------------------------------------------------------------------
	[Master Stylesheet]

	Author        : Abbas Rafeeq (https://themeforest.net/user/webfulcreationsvision/portfolio)
	Template Name : Plumber Website Template
	Version       : 1.0
	CopyRight     : 2017 April @ www.webfulcreations.com


	- Main CSS file is inside assets/css/theme-style.css
-------------------------------------------------------------------*/

@import 'assets/css/animate.css';	   		   /* Including Animations CSS file */
@import 'assets/css/font-awesome.min.css';	   /* Including Font Awesome Icons */
@import 'assets/css/owl.carousel.css';		   /* Owl Carousel CSS File */
@import 'assets/css/lightbox.min.css';		   /* LightBox CSS File */
@import 'assets/css/foundation.min.css';       /* Including Foundation CSS File */
@import 'assets/css/theme-styles.css';		   /* Main Theme CSS File */
@import 'assets/css/responsive-styles.css';	   /* Main Theme CSS File */

/**
 * Import Website Main Fonts 
 *
 * To change Fonts Get Google Fonts replace in following Link, 
 * AFter replacing below go to theme-style.css and update
 * Font Families
 *
 */
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,700|Raleway:300,400,700" rel="stylesheet';


/*=========================================
	Below This Line You Can add Your CSS
	Please Do not Edit Files above if you 
	are not sure what you are doing!
==========================================*/

.projects .columns {
	display: flex;
}

.projects .columns > a {
	display: block;
	width: 100%;
}

.projects .gallery-thumb {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 220px;
	object-fit: cover;
}

@supports (aspect-ratio: 1) {
	.projects .gallery-thumb {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

.services .row {
	display: flex;
	flex-wrap: wrap;
}

.services .columns {
	display: flex;
}

.services .columns .service {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.service-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
}

@media (min-width: 40em) {
	.service-list {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}

.dynamic-gallery {
	margin-top: 1.5rem;
	width: 100%;
}

.gallery-status {
	background: #f5f5f5;
	border: 1px dashed #c7c7c7;
	border-radius: 4px;
	padding: 1rem;
	text-align: center;
	font-weight: 600;
}

.gallery-status--error {
	background: #fff4f2;
	border-color: #f78d7b;
	color: #b83211;
}

.gallery-sections {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.gallery-section__header {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin-bottom: 1rem;
}

.gallery-section__header h3 {
	margin-bottom: 0;
}

.gallery-section__blurb {
	color: #666;
	max-width: 620px;
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.5rem;
}

.gallery-grid__item {
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	transition: transform 120ms ease, box-shadow 120ms ease;
}

.gallery-grid__item:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.gallery-grid__item a {
	display: block;
}

.gallery-grid__item img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: cover;
}

@supports (aspect-ratio: 4 / 3) {
	.gallery-grid__item img {
		height: auto;
		aspect-ratio: 4 / 3;
	}
}

.gallery-empty {
	grid-column: 1 / -1;
	text-align: center;
	font-style: italic;
	color: #777;
	padding: 1rem;
	border: 1px dashed #d0d0d0;
	border-radius: 4px;
	background: #fafafa;
}