/*
Theme Name: Uncode Child
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/
/*ABOUT*/
.about-text {
	z-index:1;
}
.about-icon {
	width:40%;
	position:absolute!important;
	right:-40%;
	overflow:hidden;
	top:15%;
}

@media only screen and (max-width: 1600px) {
  .about-icon {
	right:-35%;
}
}
@media only screen and (max-width: 1500px) {
  .about-icon {
	right:-30%;
}
}
@media only screen and (max-width: 1400px) {
  .about-icon {
	right:-25%;
}
}
@media only screen and (max-width: 1300px) {
  .about-icon {
	right:-20%;
	top:20%;
}
}
@media only screen and (max-width: 1024px) {
  .about-icon {
	right:-20%;
	top:50%;
}
}

a.about-btn {
	margin-top:5%!important;
	color:#000!important;
	background-color:#4ef4d7!important;
	border-color:#4ef4d7!important;
}

/*ABOUT*/

/*SERVICES*/
.servicelisting .wpb_raw_code {
	margin-top:0!important;
	overflow:hidden;
}

.services-list {
	border: 2px solid rgba(0, 0, 0, 0.5);
	border-left: none;
	border-right: none;
	border-top: none;
	height: 140px;
}

.services-list .text,
.services-list .thumbnail {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	color: #000;
	padding: 0 20px;
}

.event-management {
	border-top: 2px solid rgba(0, 0, 0, 0.5);
}

.services-list .text h1 {
	text-align: left;
	margin:0;
	font-family: "Lexend"
}

.event-services {
	display: flex;
	width:45%;
	font-size: 18px;
	line-height: 1.8;
	text-align: left;
	justify-content: space-between;
}

.event-services div {
	width: 45%;
}

.event-services p {
	margin: 0;
}

.services-list .text {
  position: relative;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
  z-index: 2;
}

.services-list .thumbnail .wrap {
  max-height:120px;
  vertical-align: middle;
  margin-right:10px;
	
}
.services-list .thumbnail .wrap img{
  width: auto; 
  height: 120px;
  object-fit: cover; 
	border-radius: 15px;
}

.services-list .thumbnail {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  opacity: 0;
  z-index: 1;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

@media (max-width: 959px) {
	.services-list {
		flex-direction: column;
		height: auto;
		width: 100%;
		padding: 20px 0;
	}
	.services-list .text {
		flex-direction: column;
		width:100%;
	}

	.event-services {
		flex-direction: column;
		width: 100%;
		margin-top: 20px;
	}

	.event-services div, .text h1 {
		margin-left: 0;
		width:100%;
	}
	.services-list .thumbnail {
	  display: grid!important;
	  grid-template-columns: repeat(3, 1fr); 
	  gap: 10px;
	  margin:0!important;
	  padding: 10px 0;
	}
	.services-list .thumbnail .wrap {
		margin:0;
	}
}




/* Hover effect to show the thumbnail and hide the text */
.servicelisting .wpb_wrapper:hover .text {
  transform: translateY(100%);
  opacity: 0;
	cursor: pointer;
}
.servicelisting .wpb_wrapper:hover .thumbnail {
  transform: translateY(100%);
  opacity: 1;
	cursor: pointer;
}


/*SERVICES*/

/*OUR PROJECTS*/
.projects-row {
	margin-top:0!important;
}
.projects-gallery .marquee-gallery,
.projects-gallery .marquee-clone-wrap,
.projects-gallery .marquee-original-core{
	display: inline-flex; /* Align items in a row */
}

.gallery-item {
    position: relative;
    min-width: 500px;
    min-height: 100%;
    margin-left: 15px;
    border-radius: 50px;
    overflow: hidden;
}

@media only screen and (max-width: 959px) {
    .gallery-item {
		margin-left: 10px;
        min-width: 300px;
        min-height: 100%;
    }
}

.gallery-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 30px;
    border: 5px solid transparent;
    box-sizing: border-box;
    transition: filter 0.3s ease, border-color 0.3s ease;
}

.gallery-item:hover img {
    filter: brightness(50%);
    border-color: #4EF4D7;
	cursor: pointer;
}

.gallery-details {
    position: absolute;
    bottom: 60px;
    left: 0;
    color: #4EF4D7;
    text-align: left;
    transition: opacity 0.3s ease;
    opacity: 0;
    padding: 0 40px;
    border-radius: 5px;
	z-index:2;
	text-transform:uppercase;
	white-space: initial;
	line-height:1.2;
	font-size:24px;
	font-weight:400;
}

@media only screen and (max-width: 959px) {
    .gallery-details {
		bottom: 55px;
		font-size: 18px;
		padding: 0 30px;
	}
}

.gallery-item:hover .gallery-details {
    opacity: 1;
	z-index:2;
}

/*OUR PROJECTS*/

/*OUR ICON*/
.our-icon {
	display:inline-block;
	width:20%;
	margin-right:15px;
	margin-top:5%!important;
}
/*OUR ICON*/

/*FOOTER*/
footer#colophon {
background: radial-gradient(circle at left top, rgb(0, 0, 0), rgb(18, 8, 47) 41%, rgb(33, 12, 81) 68%);
}

.contact-stroke{ 
  color: transparent;
  -webkit-text-fill-color: transparent; /* Will override color (regardless of order) */
  -webkit-text-stroke: 1px white;
}

.contact-icon {
	margin-top:60%!important;
	width:80%;
	float:right;
}

@media only screen and (max-width: 959px) {
  .contact-icon {
	margin-top:5%!important;
	width:30%;
	float:left;
}
}

.contact a:hover{ 
	color:#ef2424!important;
}

/*FOOTER*/



/*PROJECT PAGE*/
.projects .menu-smart--filter-cats .active,
.projects .menu-smart--filter-cats li:hover a{
	color:#ff5151!important;
}

.projects .t-entry-visual,
.projects .t-entry-visual-tc,
.projects .t-entry-visual-cont  {
	height:220px!important;
}

.projects .t-entry-cat-single span {
	font-weight:300!important;
}

.projects .t-entry-title,
.projects .t-entry-meta {
	margin-top:0!important;
}

/*FILTER*/
.projects .menu-smart {
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
    align-items: center; 
}

.projects .menu-smart li {
    order: 0; /* Default order */
}

.projects .menu-smart .filter-show-all {
    order: 1; /* First item */
}

.projects .menu-smart .filter-cat-5 {
    order: 4; /* Second item */
}

.projects .menu-smart .filter-cat-7 {
    order: 3; /* Third item */
}

.projects .menu-smart .filter-cat-12 {
    order: 6; /* Fourth item */
}

.projects .menu-smart .filter-cat-11 {
    order: 5; /* Fifth item */
}

.projects .menu-smart .filter-cat-6 {
    order: 2; /* Sixth item */
}

/*FILTER*/

/*PROJECT PAGE*/


/*PAUSE ANIMATION FOR SCREEN SIZE SMALL*/
@media only screen and (max-width: 959px) {
  .uncode-rotate.uncode-rotate-always{
	  transform:none!important;
}
	canvas.uncode-bg-animated-gradient {
		display:none;
	}
}