/*
	Theme Name: v215 Child
	Template:v215
	Author:The 215 Guys
	Author URI: https://www.the215guys.com
	Version: 1
*/

:root {
	--blue: #279ed7;
}

#header img {filter: drop-shadow(0px 0px 35px rgb(0, 0, 0, .2));}
#header .menu-item a {text-shadow: 0 0 20px rgb(0, 0, 0, .2);}
#header.scrolled {background: rgb(0, 0, 0, .5);}
#header .header-cta span {color: white !important; outline: 2px solid transparent; background: linear-gradient(90deg, rgba(39, 158, 215, 1) 0%, rgba(34, 37, 42, 1) 100%);padding: 14px 26px;border-radius: 30px;transition: .5s;}
#header .header-cta a:hover span {outline-color: white;color: white !important;}

.project-grid {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 10px;}
.project-grid .textbox {z-index: 9; position: absolute;bottom: 30px;width: 100%;text-align: center;padding-left: 30px;padding-right: 30px;}
.project-grid .post-item {position: relative; border-radius: 20px;overflow: hidden;}
.project-grid .post-image, .project-grid .post-image img {height: 100%;object-fit: cover;padding: 0;}
.project-grid .post-item:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 75%);}
.project-grid .post-item:after {transition: .5s; content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgb(0,0,0,.5); opacity: 0;}
.project-grid .post-item:hover:after {opacity: 1;}
.project-grid .title {color: white;}
.project-grid p {margin-bottom: 0 !important; color: white;}
.project-grid .categories {color: white; font-size: 24px; line-height: 34px; font-weight: 700;}
.project-grid.featured .post-item:first-child {grid-column: span 2;grid-row: span 2;}
.project-grid.featured .post-item:nth-child(2) {grid-column: 3;grid-row: 1;}
.project-grid.featured .post-item:nth-child(3) {grid-column: 3;grid-row: 2;}

.services-slider .post-item {position: relative;border-radius: 20px;overflow: hidden;}
.services-slider .title {z-index: 9; position: absolute;bottom: 20px;color: white;padding-left: 30px; padding-right: 30px;}
.services-slider .post-image {padding: 0;}
.services-slider img {aspect-ratio: 1/1; width: 100%; object-fit: cover;}
.services-slider .post-item:before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 75%);}
.services-slider .post-item:after {transition: .5s; content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgb(0,0,0,.5); opacity: 0;}
.services-slider .post-item:hover:after {opacity: 1;}
.services-slider .slick-slide {margin: 0 5px;}
.services-slider img {width: 100%;}

.opening-animation {position: fixed; opacity: 0;background: white;width: 100vw;height: 100vh;top: 0;left: 0;z-index: -1;display: flex;align-items: center;justify-content: center; animation: fadeIn 3.25s;}
.opening-animation svg {width: 100%; max-width: 600px;}
.opening-animation path {animation: slideUp .5s ease-out forwards; opacity: 0; }
.opening-animation .fil1 {animation-delay: .3s}
.opening-animation .fil2 {animation-delay: .4s;}
.opening-animation .fil3 {animation-delay: .5s;}
.opening-animation .fil4 {animation-delay: .6s;}
.opening-animation .fil12 {animation-delay: .7s;}
.opening-animation .fil11 {animation-delay: .8s;}
.opening-animation .fil10 {animation-delay: .9s;}
.opening-animation .fil9 {animation-delay: 1s;}
.opening-animation .fil8 {animation-delay: 1.1s;}
.opening-animation .fil7 {animation-delay: 1.2s;}
.opening-animation .fil6 {animation-delay: 1.3s;}
.opening-animation .fil5 {animation-delay: 1.4s;}
.opening-animation .fil13 {animation-delay: 1.5s;}
@keyframes fadeIn {
  0% {
	z-index: 99999;
	opacity: 1;
  }
  70% {
	opacity: 1;
  }
  100% {
    opacity: 0;
	z-index: -9;
  }
}
@keyframes slideUp {
	0% {
		opacity: 0;
		transform: translateY(20%);
	}
	25% {
		opacity: 1;	
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
@media (max-width: 1023px) {
	.opening-animation svg {max-width: 400px;}
}
@media (max-width: 1023px) {
	.opening-animation svg {max-width: 275px;}
}

.cta {min-height: 500px;}
.cta .container {position: unset !important;}
.cta h2 {background: url(/wp-content/uploads/2025/11/bg-cta-1.jpg) no-repeat 50% 20%;background-size: cover;-webkit-background-clip: text;-webkit-text-fill-color: transparent;    background-clip: text;color: transparent;font-weight: 800;position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: grid;align-items: center;}
.cta .cta-right {z-index: 9;}
.cta .cta-right .jawn_button {position: absolute;top: 50%;transform: translateY(-50%);}
.cta {background-position: 50% 20%;}

.back-to-top div:hover {background: var(--blue);color: white;border-color: var(--blue);}

#footer .col-1 img {max-height: 88px;}
#footer .col-2 a:not(:last-child), #footer .col-3 a:not(:last-child), #footer .col-4 a:not(:last-child) {margin-bottom: 5px;display: inline-block;}
#footer {background-position: 50% 15%;}
#footer .footer-top-inner > div {justify-content: space-between;align-items: stretch;}
#footer .footer-col {height: auto;padding-top: 20px;}
#footer .footer-col:not(:last-child) {border-right: 1px solid rgb(21, 154, 215, .1);}
#footer .col-1 {max-width: 270px;}
#footer .col-2 {max-width: 280px;}
#footer .col-3 {max-width: 325px;}
#footer .col-4 {max-width: 250px;}

.slide-right:not(.animated),
.slide-left:not(.animated),
.fade-slide-up:not(.animated),
.fade-in-center:not(.animated),
.jawn-itr.left-image:not(.animated) .itr-image-side, .jawn-itr.left-image:not(.animated) .itr-content-side,
.jawn-itr.right-image:not(.animated) .itr-image-side, .jawn-itr.right-image:not(.animated) .itr-content-side {opacity: 0;}
.jawn-itr.left-image.animated .itr-image-side,
.jawn-itr.right-image.animated .itr-content-side,
.slide-right.animated {animation: fadeInLeft 1s ease 0s 1 normal forwards;}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-25%);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.jawn-itr.left-image.animated .itr-content-side,
.jawn-itr.right-image.animated .itr-image-side,
.slide-left.animated {animation: fadeInRight 1s ease 0s 1 normal forwards;}
@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(25%);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.fade-in-center.animated {animation: fadeInCenter 2s ease 0s 1 normal forwards;}
@keyframes fadeInCenter {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.fade-slide-up.animated {animation: fadeSlideUp 1s ease 0s 1 normal forwards;}
@keyframes fadeSlideUp {
	0% {
		opacity: 0;
		transform: translateY(25%);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}