/*!
Theme Name: webizseo
Theme URI: http://underscores.me/
Author: webizseo
Author URI: https://www.webizseo.com/
Description: A wordpress theme by WebizSEO.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: webizseo
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

webizseo is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* Webizseo CSS */

/*** 
=============================================
  Color Css 
=============================================
***/

/*** 
=============================================
  Header Section Css 
=============================================
***/
.main-header {
	background: var(--light-blue);
}
.main-menu ul li a {
	color: var(--accent-color);
	&:hover {
		color: var(--black-color);
	}
}
@media (max-width: 768px){
}
/*** 
=============================================
  BreadCrumb Section Css 
=============================================
***/
.mu-breadcrumb-img {
	background-image: url('assets/mu-images/breadcrumbs/mu-breadcrumb.jpg');
	margin-top: 105px;
	background-attachment: unset !important;
	background-position: center !important;
}
.page-header {
	padding: 150px 0 150px;
}
.breadcrumb-item + .breadcrumb-item::before {
	content: '/';
}
@media (max-width: 768px){
	.page-header {
		padding: 100px 0 80px;
	}
}
/*** 
=============================================
  Home Page Css 
=============================================
***/
.hero.hero-slider-layout {
	padding: 100px 0 0;
}
.hero.hero-slider-layout .hero-slide::before {
	background: #000;
	opacity: 0.5;
}
.hero.hero-slider-layout .hero-slide {
	padding: 180px 0 180px;
}
.about-us::before {
	background: none;
}
.mu-about-home .success-story-body ul li {
	width: 100%;
	font-size: 18px;
}
.section-title h1 {
	font-size: 50px;
}
.section-title h1 span {
	color: var(--light-blue);
}
.our-testimonials::before {
	background: none;
}

/* OnePage Scroll Website */
:root {
  --card-height: 40vw;
  --card-margin: 4vw;
  --card-top-offset: 0;
  --outline-width: 0px;
}

#cards {
	padding-bottom: calc(var(--numcards) * var(--card-top-offset)); /* Make place at bottom, as items will slide to that position*/
	margin-bottom: var(--card-margin); /* Don't include the --card-margin in padding, as that will affect the scroll-timeline*/
}

.card {
	position: sticky;
	top: 0;
	padding-top: calc(var(--index) * var(--card-top-offset));
	border: 1px solid var(--black-color);
	border-radius: 1em;
}

@supports (animation-timeline: works) {

	@scroll-timeline cards-element-scrolls-in-body {
		source: selector(body);
		scroll-offsets:
			selector(#cards) start 1,
			selector(#cards) start 0;
		start: selector(#cards) start 1; 
		end: selector(#cards) start 0; 
		time-range: 4s;
	}

	.card {
		--index0: calc(var(--index) - 1); 
		--reverse-index: calc(var(--numcards) - var(--index0)); 
		--reverse-index0: calc(var(--reverse-index) - 1); 
	}

	.card__content {
		transform-origin: 50% 0%;
		will-change: transform;
		--duration: calc(var(--reverse-index0) * 1s);
		--delay: calc(var(--index0) * 1s);
		animation: var(--duration) linear scale var(--delay) forwards;
		animation-timeline: cards-element-scrolls-in-body;
	}

	@keyframes scale {
		to {
			transform: scale(calc( 1.1 - calc(0.1 * var(--reverse-index)) ));
		}
	}
}

#cards {
	list-style: none;
	outline: calc(var(--outline-width) * 10) solid blue;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(var(--numcards), 30vw);
	gap: var(--card-margin);
}

.card {
	outline: var(--outline-width) solid hotpink;
}

.card__content {
	box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1);
	background: var(--accent-color);
	color: rgb(10, 5, 7);
	border-radius: 1em;
	overflow: hidden;
	display: grid;
	grid-template-areas: "text img";
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	align-items: stretch;
	outline: var(--outline-width) solid lime;
}

.card__content > div {
	grid-area: text;
	width: 80%;
	place-self: center;
	text-align: left;
	display: grid;
	gap: 1em;
	place-items: start;
}

.card__content > div > h2 {
	color: var(--black-color);
	font-size: 65px;
}
.card__content > figure {
	grid-area: img;
	overflow: hidden;
}

.card__content > figure > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mu-project-border {
	border: 1px solid #000;
	color: #000;
}

@media (max-width: 768px){
	.hero.hero-slider-layout .hero-slide {
		padding: 100px 0 80px;
	}
	.section-title h1 {
		font-size: 30px;
	}
	#cards {
		padding: 0;
		grid-template-rows: repeat(var(--numcards), 60vw);
	}
	.card__content > div {
		width: 90%;
		padding: 30px 15px;
	}
	.card__content > div > h2 {
		font-size: 30px;
	}
}
/*** 
=============================================
  About Page Css 
=============================================
***/
@media (max-width: 768px){
}
/*** 
=============================================
  Serivces Page Css 
=============================================
***/
.service-item {
	background: var(--accent-color);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 120px 20px;
}
.service-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5); /* Adjust opacity here */
	z-index: 1;
}
.mu-service-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0); /* Adjust opacity here */
	z-index: 1;
}
.mu-service-item {
	background: var(--accent-color);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 120px 20px;
	height: 350px;
	object-fit: cover;
}
.service-content h3 {
	color: var(--light-blue);
}
.service-content p {
	color: var(--white-color);
}
.readmore-btn {
	color: var(--light-blue);
}
@media (max-width: 768px){
}
/*** 
=============================================
  Gallery Page Css 
=============================================
***/
.project-image figure img, .page-gallery-box .photo-gallery img {
	width: 100%;
	height: 350px;
	object-fit: cover;
}
@media (max-width: 768px){
}
/*** 
=============================================
  Contact Page Css 
=============================================
***/
@media (max-width: 768px){
}
/*** 
=============================================
  Footer Section Css 
=============================================
***/
.main-footer {
	background: var(--light-blue);
}
.footer-logo img {
	width: 100px;
	max-width: 100%;
}
.footer-contact-content p {
	color: var(--black-color);
}
.footer-links h3 {
	color: var(--accent-color);
}
.footer-links ul li a {
	color: var(--black-color);
}
.footer-copyright {
	border-top: 1px solid #000;
}
@media (max-width: 768px){
}
/*** 
=============================================
  Floating button Area Css 
=============================================
***/
.mu-single-call-box {
	max-width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 25px;
	padding: 0 50px;
}
.mu-single-call-box .mu-btn {
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	text-decoration: none;
	transition: 0.1s;
	margin: 0 auto;
}
.floating-btn, .floating-btn-2 {
	display: none;
}
.floating-btn , .floating-btn-2 {
	background:    var(--accent-color);
	border-radius: 5px;
	box-shadow:    0 5px #000000;
	padding:       15px 15px;
	color:         #ffffff;
	font:          normal bold 20px/1 "Open Sans", sans-serif;
	text-align:    center;
}
/*Mobile Css Start*/
@media (max-width: 768px){
	.mu-single-call-box {
		display: none;
	}
	.floating-btn, .floating-btn-2 {
		position: fixed;
		bottom: 20px;
		display: block !important;
		z-index: 999;
	}
	.floating-btn{
		left: 10px;
	}
	.floating-btn-2{
		right: 70px;
	}
	.floating-btn a, .floating-btn-2 a {
		color: white !important;
		font-size: 20px;
	}
}