/*!
	Theme Name: Skeleton Theme Child
	Theme URI: http://cmsmart.net
	Author: DJDezignz
	Author URI: http://djdezignz.com
	Description: This is a child theme of skeleton theme to be used for development of custom themes
	Version: 1.0.0
	Template: skeleton-theme-store
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Text Domain: skeleton-theme-store
	Tags: responsive, custom-menu, custom-header, post-formats
*/

/* ============================== */
/* ::::::::: Misc Styles :::::::: */
/* ============================== */
:root {
	--font-weight-light: 200;
}
.inner_cont {
	@media(max-width: 767px) {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
}
/* ================================ */
/* ::::::::: Header Styles :::::::: */
/* ================================ */
.top_bar {
	.inner_cont, .navbar-right {
		display: flex;
		align-items: center;
		@media (max-width: 767px) {
			.navbar-right {
				flex-direction: column;
			}
		}
	}
	.inner_cont {
		justify-content: space-between;
		&:after {
			content: none;
		}
		@media (max-width: 767px) {
			& {
				flex-direction: column-reverse;
			}
		}
	}
	a:has(.logo) {
		@media (max-width: 767px) {
			& {
				display: none;
			}
		}
	}
	.social a {
		width: auto;
		height: auto;
		border-radius: 0;
		padding: 0.3em 0.6em;
	}
	.btn_cont {
		margin-top: 0;
		@media (max-width: 767px) {
			& .btn {
				display: none;
			}
		}
	}
}
nav.navbar-st {
	.inner_cont {
		@media (max-width: 767px) {
			&{
				display: flex;
				align-items: center;
				justify-content: space-around;
				background-color: #012e41;
				border: none;
			}
		}
		&:after {
			content: none;
		}
	}
	.navbar-menu-custom {
		display: flex;
		align-items: center;
	}
	.nav > li > a {	
		font-weight: 300;
		text-transform: uppercase;
		&:after {
			font-weight: bold;
		}
	}
	a:has(.logo) {
		.logo {
			max-width: 360px;
		}
		@media (min-width: 767px) {
			& {
				display: none;
			}
		}
	}
}


.green-gradient {
	background: linear-gradient(to right, #cfd5b1 10%, transparent 50%);
}
.margin-0 {
	padding-top: 1em;
	.inner_cont {
		margin-right: 0;
		padding-right: 0 !important;
	}
	.custom-row-design-two {
		.vc_column-inner {
			padding-right: 0;
			.wpb_wrapper {
				@media(max-width: 767px) {
					& {
						text-align: center;
					}
				}
			}
			@media(max-width: 767px) {
				& {
					padding-right: 15px;
				}
			}
		}
		img {
			@media(max-width: 767px) {
				& {
					display: none;			
				}
			}
		}
	}
}
.mb-0 {
	margin-bottom: 0 !important;
}
.mt-lg {
	margin-top: 3em;
}
/* ======================================= */
/* ::::::::: Custom Header Styles :::::::: */
/* ======================================= */

/* ==================================== */
/* ::::::::: Breadcrumb Styles :::::::: */
/* ==================================== */

/* ============================== */
/* ::::::::: Body Styles :::::::: */
/* ============================== */
/*Home*/
.hero {
	text-align: center;
	color: #FFFFFF;
	padding: 10em 0 8em;
	h2 {
		text-transform: uppercase;
		color: inherit;
		font-size: 3em;
		font-weight: bold;
		line-height: 1;
	}
	.wpb_wrapper > p {
		margin-bottom: 3em !important;
	}
}
.banner {
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 1.1em;
	font-weight: 100;
	text-align: center;
	padding: 2em 0;
	.wpb_content_element {
		margin-bottom: 0;
	}
}
.custom-row-design {
	font-weight: 200;
	line-height: 1.5;
	h2 {
		font-weight: inherit;
		margin-bottom: 0.5em;
		line-height: inherit;
	}
	.shorten-width {
		width: 80%;
		margin-bottom: 5em;
		@media (max-width: 767px) {
			& {
				width: auto;
				margin-bottom: 3em;
			}
		}
	}
	.wpb_content_element {
		margin-bottom: 0;
		.wpb_wrapper {
			@media (max-width: 767px) {
				& {
					display: flex;
					flex-direction: column;
					align-items: center;
				}
			}
		}
	}
	p:has(img), img {
		@media (max-width: 767px) {
			& {
				width: 100%;
			}
		}
	}
	@media (max-width: 767px) {
		& {
			text-align: center;
		}
	}
}
.custom-list {
	list-style-type: none;
	padding: 0;
	font-weight: 100;
	margin-top: 3em;
	text-align: left;
	li {
		display: flex;
		margin-bottom: 1em;
	}
	li:before {
		content: "-";
		background: #9f191d;
		color: #FFFFFF;
		border-radius: 100%;
		margin-right: 0.8em;
		padding: 0 0.5em;
		text-align: center;
		height: fit-content;
	}
}
#buiding-our-services > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 3em 0 1.5em;
	h2 {
		margin: 0;
		font-weight: 200;
	}
}
.accordion-controls {
	text-align: right;
	.accordion-prev {
		background-color: #9f191d;
		padding: 0.6em;
		&:hover {
			cursor: pointer;
		}
	}
	.accordion-next {
		transform: rotate(180deg);
		background-color: #012e41;
		padding: 0.6em;
		&:hover {
			cursor: pointer;
		}
	}	
}
.accordion {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.5em;
}
.accordion-panel {
	display: flex;
	background: #FFFFFF;
	width: 10em;
	height: 34em;
	justify-content: space-between;
	@media (max-width: 767px) {
		& {
			width: 50%;
		}
	}
	summary {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 1.5em 0;
		width: 100%;
		.accordion-arrow-border {
			width: 100%;
			border-bottom: 2px solid rgba(33, 33, 33, 0.1);
			padding: 1em 0 2em;
		}
		img {
			width: 5em;
			height: 4em;
			&:first-child {
				width: 1em;
				height: 1em;
				&:hover {
					cursor: pointer;
				}
			}
		}
		div {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			gap: 1em;
		}
		span {
			width: max-content;
			transform: rotate(-90deg) translateX(50%);
			font-size: 1.3em;
			font-weight: 300;
		}
	}
}
.accordion-panel[open] {
	summary {
		display: none;
	}
	width: 30em;
	@media (max-width: 767px) {
		& {
			width: 90%;
		}
	}
	@media (max-width: 500px) {
		& {
			width: 100%;
		}
	}
}
.accordion-content {
	color: #FFFFFF;
	background-color: #012e41;
	height: 34em;
	padding: 1em;
	line-height: 1.5;
	font-weight: 100;
	.accordion-image {
		position: relative;
		z-index: 0;
		.close-panel {
			position: absolute;
			z-index: 99;
			top: 0.1em;
			left: 1.1em;
			background-color: #9f191d;
			padding: 1.3em;
			width: 3.6em;
			height: 3.6em;
			&:hover {
				cursor: pointer;
			}
		}
		img {
			width: 100%;
			height: 18em;
		}
	}
	h3, a {
		color: inherit !important;
		font-weight: inherit;
	}
	a {
		&:hover {
			color: #bdc8a9 !important;
		}
	}
	div {
		padding: 0 1em;
		p {
			width: 90%;
		}
	}
}
.company-working-process {
	color: #FFFFFF;
	padding: 3em;
	.wpb_content_element > .wpb_wrapper {
		@media (max-width: 767px)
		{
			& {
				display:flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
			}
		}	
	}
	.vc_column-inner>.wpb_wrapper, .wpb_wrapper:has(h2){
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	h2, h3 {
		color: inherit;
	}
	h2, .green-gradient {
		margin-top: 0;
		li::marker {
			color: #000000;
		}
	}
	h3 , p {
		font-weight: 100;	
	}
	.company-working-process-column {
		margin-bottom: 3em;
		line-height: 1.5;
		.vc_column-inner {
			height: 100%;
			background-color: rgba(255, 255, 255, 0.05);
			padding: 1em;
		}
	}
}
.recent-projects {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 3em 0 1em;
	.recent-projects__title {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.carousel-controls {
		.carousel-prev {
			background-color: #9f191d;
			padding: 0.6em;
			&:hover {
				cursor: pointer;
			}
		}
		.carousel-next {
			transform: rotate(180deg);
			background-color: #012e41;
			padding: 0.6em;
			&:hover {
				cursor: pointer;
			}
		}	
	}
	h2 {
		font-weight: 200;
		margin: 0 0 1em;
	}
	#range {
		-webkit-appearance: none;
		width: 30em;
		height: 0.8em;
		background: rgba(33, 33, 33, 0.1);
		outline: none;
		margin-top: 3em;
		padding: 0 0.3em;
		@media (max-width: 767px) {
			& {
				width: 20em;
			}	
		}
		&::-webkit-slider-thumb {
		  -webkit-appearance: none;
		  appearance: none;
		  width: 50%;
		  height: 0.5em;
		  background: #012e41;
		  cursor: pointer;
		}
		&::-moz-range-thumb {
		  width: 50%;
		  height: 0.5em;
		  background: #012e41;
		  cursor: pointer;
		}
	}
}
.carousel {
	display: flex;
	gap: 3em;
	transition: transform 1s ease-in;
	#carousel__item-1 {
		transform: translateX(-85%);
		@media (max-width: 767px) {
			& {
				transform: initial;
			}
		}
	}
	#carousel__item-2 {
		transform: translateX(-85%);
		@media (max-width: 767px) {
			& {
				transform: initial;
			}
		}
	}
	#carousel__item-3 {
		transform: translateX(-85%);
		@media (max-width: 767px) {
			& {
				transform: initial;
			}
		}
	}
	.carousel__item {
		display: flex;
		align-items: center;
		background-color: #f1f1eb;
		padding: 1em 1em 1em 2em;
		flex: 1 0 75%;
		@media (max-width: 767px) {
			& {
				flex-direction: column;
				align-items: center;
				flex: 0 1 auto;
				padding: 1em 0 1em;
			}
		}
		.carousel__item-column-1 {
			flex: 1 1 60%;
			@media (max-width: 767px) {
				& {
					display:flex;
					flex-direction: column;
					align-items: center;
				}
			}
		}
		.carousel__item-column-2 {
			flex: 1 1 40%;
			height: 100%;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.carousel__item-subtitle {
			color: #FFFFFF;
			background-color: #9f191d;
			padding: 0.5em 1em;
			font-weight: 100;
		}
		.carousel__item-title {
			font-size: 2em;
			font-weight: 200;
			margin: 1em 0;
		}
		.carousel__item-information {
			display: flex;
			gap: 3em;
			div {
				display: flex;
				align-items: center;
				gap: 1em;
				img {
					width: 2em;
					height: 2em;
				}
				p {
					margin : 0;
					span {
						display: block;
						font-weight: 100;
						width: max-content;
					}
				}
			}
		}
		.carousel__item-description {
			margin: 1em 0;
			line-height: 1.5;
			font-weight: 100;
			width: 80%;
		}
		.btn {
			position: relative;
			padding: 0.1em 1em 0.1em 0;
			text-transform: uppercase;
			font-size: 1em;
			font-weight: 100;
			margin: 0 1em 1em;
			.btn__icon {
				background-color: #FFFFFF;
				padding: 0.8em 1.5em;
				position: relative;
				left: 0;
				top: 0;
				clip-path: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%);
				margin-right: 1em;
			}
		}
	}
}
.get-in-touch {
	color: #FFFFFF;
	padding: 3em;
	h2 {
		color: inherit;
		font-weight: 100;
	}
	.vc_column-inner {
		@media (max-width: 767px) {
			& {
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}
	}
}
/*About*/
.about {
	.custom-row-design {
		padding-top: 3em;
	}
	h2 {
		line-height: 1;
	}
	.shorten-width {
		width: 80%;
		margin-bottom: 1em;
		@media (max-width: 767px) {
			& {
				width: auto;
			}
		}
	}
	p {
		font-weight: 100;
		line-height: 1.5;
	}
}
.about.margin-0 {
	padding-top: 0;
}
.why-choose-fabmaster {
	.green-gradient {
		margin-bottom: 0;
	}
	h2, .custom-list {
		margin-top: 0;
	}
	p {
		font-weight: 100;
		margin-top: 1em;
	}
}
#our-team > .vc_column-inner > .wpb_wrapper {
	padding: 3em 0 0;
	.wpb_content_element 
	{	
		display: flex;
		flex-direction: column;
		align-items: center;
		.wpb_wrapper {
			width: 80%;
		}
	}
	.our-team-members {
		overflow-x: hidden;
		& > div {
			display: flex;
			gap: 1.5em;
			transition: transform 1s ease-in;
			@media (max-width: 767px) {
				& {
					gap: 0;
				}
			}
		}
		.our-team-member {
			position: relative;
			flex: 1 0 calc(33.3% - 1em);
			@media (max-width: 767px) {
				& {
					flex: 1 0 100%;
				}
			}
			h3 {
				background-color: #FFFFFF;
				margin: 0;
				padding: 0.8em 1em;
			}
			div {
				position: relative;
				img {
					width: 100%;
				}
				p {
					display: none;
				}	
			}
			&:hover {
				overflow-y: hidden;
				cursor: pointer;
				h3 {
					color: #FFFFFF;
					background-color: #012e41;
				}
				p {
					display: block;
					position: absolute;
					bottom: -3%;
					z-index: 1;
					padding: 1em;
					background-color: rgba(255, 255, 255, 0.8);
				}
			}
		}
	}
}
/*Project*/
.project ~ .vc_row h2 {
	@media (max-width: 767px) {
		& {
			text-align: center !important;
		}
	}
}
.project .wpb_text_column > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 3em 6em 0;
	@media (max-width: 767px) {
		& {
			padding: 3em 1em 0;
		}
	}
	.green-gradient {
		background: linear-gradient(to right, #cfd5b1 30%, transparent 100%);
	}
	h2{
		margin-top: 0;
		margin-bottom: 1em;
	}
	p {
		font-weight: 200;
		line-height: 1.5;
	}
	.project-overview {
		color: #FFFFFF;
		background-color: #212121;
		padding: 2em 1em;
		margin: 3em 6em;
		@media (max-width: 767px) {
			& {
				margin: 3em 1em;
			}
		}
		h3 {
			color: inherit;
			font-size: 2em;
		}
		.project-overview-list {
			display: flex;
			gap: 6em;
		}
		ul {
			list-style-type: none;
			padding: 0;
			font-weight: 200;
			li {
				display: flex;
				align-items: center;
				&:before {
					content:  url("https://webdevelopment33.cowlickdev.com/wp-content/uploads/2026/03/check-mark.png");
					margin-right: 0.8em;
				}
			}
		}
	}
}
/*Service*/
.cnc-design {
	text-align: center;
	padding: 3em 0 1em;
	h2 {
		color: #FFFFFF;
		font-size: 3em;
		font-weight: bold;
		text-transform: uppercase;
	}
}
.cnc-design-service {
	padding: 3em 10em 1em !important;
	font-weight: 200;
	@media (max-width: 767px) {
		& {
			padding: 3em 1em 1em !important;
		}
	}
	.wpb_text_column > .wpb_wrapper {
		@media (max-width: 767px) {
			& {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
			}
		}
	}
	h3 {
		margin-top:0;
		margin-bottom: 1em;
		padding: 0 1em;
	}
}
.cnc-design-what-we-do {
	padding: 0 6em 3em !important;
	font-weight: 200;
	@media (max-width: 767px) {
		& {
			padding: 0 1em 3em !important;
		}
	}
	.wpb_text_column > .wpb_wrapper {
		@media (max-width: 767px) {
			& {
				display: flex;
				flex-direction: column;
				align-items: center;
				text-align: center;
			}
		}
	}
	figure, .vc_single_image-wrapper, img {
		width: 100%;
	}
	.custom-list {
		margin: 1em 0 3em;
		font-weight: inherit;
	}
}
.service-gallery {
	margin-bottom: 1em;
	img {
		height: 250px;
		@media (max-width: 767px) {
			& {
				height: 200px;
			}
		}
		@media (max-width: 424px) {
			& {
				height: 300px;
			}
		}
	}
	.btn {
		background: rgb(159,25,29);
		border: 2px solid transparent;
		color: #ffffff;
		padding-top: 10px;
		padding-right: 30px;
		padding-bottom: 10px;
		padding-left: 30px;
		border-radius: 0px;
		&:hover {
			border: 3px solid rgb(159,25,29);
			color: rgb(159,25,29);
		}
	}
	
}
/*recent project*/
.recent-project {
	padding-top: 3em;
	.wpb_text_column > .wpb_wrapper
	{	
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	h2 {
		margin: 0;
	}
}
.recent-project-column {
	font-weight: 200;
	line-height: 1.5;
	& > .vc_column-inner > .wpb_wrapper {
		border: 3px solid #f1f1eb;
	}
	img {
		width: 100%;
	}
	.recent-project-description {
		padding: 1em 1em 0;
	}
	a {
		display: block;
		font-weight: initial;
		margin-top: 1em !important;
	}
}
/*Contact*/
.contact > .vc_column-inner {
	padding-top: 1em;
	display: flex;
	flex-direction: column;
	align-items: center;
	.wpb_wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}
.contact-description > .vc_column-inner {
	font-weight: 200;
	color: #FFFFFF;
	line-height: 1.5;
	display: flex;
	justify-content: flex-end;
	padding-left: 1em !important;
	margin-bottom: 1em;
	@media (max-width: 767px) {
		& {
			align-items: center;
			text-align: center;
		}
	}
	h3 {
		color: inherit;
	}
}
#wpforms-form-292 {
	@media (max-width: 767px) {
		& {
			margin: 0 1em;
		}
		.wpforms-submit-container {
			text-align: center;
		}
	}
}
/* ============================== */
/* ::::::::: Shop Styles :::::::: */
/* ============================== */

/* ============================== */
/* ::::::::: Post Styles :::::::: */
/* ============================== */

/* ================================= */
/* ::::::::: Related Styles :::::::: */
/* ================================= */

/* ================================== */
/* ::::::::: Comments Styles :::::::: */
/* ================================== */

/* ==================================== */
/* ::::::::: Pagination Styles :::::::: */
/* ==================================== */

/* ==================================== */
/* ::::::::: Login Form Styles :::::::: */
/* ==================================== */

/* ================================ */
/* ::::::::: Footer Styles :::::::: */
/* ================================ */
footer {
	.inner_cont {
		display: flex;
		justify-content: space-evenly;
		@media (max-width:767px) {
			& {
				flex-direction: column;
				align-items: center;
			}
		}
		h2 {
			color: #FFFFFF;
			padding: 0;
			text-align: left;
			font-weight: 100;
		}
	}
	.navbar-center {
		display: flex !important;
		gap: 3em;
		line-height: 1.5;
		font-weight: 100;
		@media (max-width:767px) {
			& {
				flex-direction: column;
				align-items: center;
			}
		}
	.footer-service {
		ul {
			display: flex;
			flex-direction: column;
			text-align: left;
			padding: 0;
			a {
				padding: 0 !important;
			}
		}
	}
	.areas-served {
		ul {
			list-style-type: none;
			text-align: left;
			padding: 0;
		}
	}
	.footer-address {
		div {
			text-align: left;
		}
	}
		h2, ul, .footer-address div {
			@media (max-width:767px) {
				& {
					text-align:center !important;
				}
			}
		}
	}
}

/* =============================== */
/* ::::::::: Media Styles :::::::: */
/* =============================== */