/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
/* Add your custom styles here */

/* Common CSS */
.menu-open-icon svg, .menu-close-icon svg {
	cursor: pointer;
}
#full-screen-menu {
/* 	display: none; */
	overflow: hidden;
	align-items: center; /* Vertical centering */
	justify-content: center; /* Optional: Horizontal centering */
	transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
    z-index: 9999;
}

#full-screen-menu nav {
	width: 100% !important;
}

/* Add this class to trigger slide-in */
#full-screen-menu.slide-in {
    transform: translateX(0);
}
/* .fixed-header {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
} */

.artbit-main-header {
  /* Basic header styles */
/*   position: fixed; */
  top: 0;
  background-color: #333;
  color: white;
/*   z-index: 1000; */

  /* Add the transition for a smooth animation */
  transition: transform 0.5s ease-in-out;
}

.artbit-main-header.hide-header {
  /* This class will be added by JavaScript to hide the header */
  /* Move the header up by its full height to hide it */
  transform: translateY(-100%);
}
















#popup-nav-menu ul {
	text-align: center;
}
#popup-nav-menu ul li {
	    margin-bottom: 0 !important;
}
#popup-nav-menu ul li a {
  position: relative;
  display: inline-flex;
  text-decoration: none;
	transition: margin-left 0.3s ease;
	padding: 7px 0;
}
#popup-nav-menu ul li a:hover {
	  
	margin-left: -30px;
}
#popup-nav-menu ul li a::after {
	content: '\f061'; /* Font Awesome arrow-right icon (Unicode) */
	font-family: 'Font Awesome 5 Free'; /* Adjust based on your FA version */
	font-weight: 600; /* Required for solid icons */
	margin-left: 8px;
	margin-left: 3px;
	opacity: 0;
	transition: all 0.3s ease;
	transition: all 0.3s ease;
	position: absolute;
	right: -35px;
	color: #FFFFFF96;
	background: transparent;
	transform: rotate(-45deg);
	font-size: 18px;
}

#popup-nav-menu ul li a:hover::after {
  opacity: 1;
}

/* .fixed-header {
  transition: all 0.7s ease;
} */
/* .fixed-header.active { */
/*   background-color: #e3e3e3 !important; */
/* } */
.theme-btn-animation {
  align-items: center;
  transition: padding 0.3s ease, width 0.3s ease;
  overflow: hidden;
}

.theme-btn-animation svg {
  opacity: 0;
  width: 0;
  margin-left: 0;
  transition: opacity 0.3s ease, width 0.3s ease, margin-left 0.3s ease;
	transform: rotate(-45deg);
}

/* Show SVG on hover */
.theme-btn-animation:hover svg {
  opacity: 1;
  width: 16px; /* or your SVG width */
  margin-left: 8px; /* optional spacing between text and icon */
}



/* 
#popup-nav-menu ul li a:hover::after {
  width: 100%;
} */


/* Home page styling */
 #spin-icon img {
    animation: spin 5s linear infinite;
  }

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes spin-once {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }




/* #home-video-section, #home-work-section {
  background-color: white;
  transition: background-color 0.7s ease;
} */


#home-works-section .work-block {
	overflow: hidden;
}

/* works section */
#home-works-section .work-block .work-title {
	position: absolute;
	bottom: 50px;
	left: -90%;
	opacity: 0;
	transition: all 0.3s ease-in-out;
	display: block;
	width: 80%;
}

#home-works-section .work-block:hover .work-title {
	opacity: 1;
	left: 20px;
	bottom: 50px;
}
#home-works-section .work-block .brand-name {
	position: absolute;
	left: 20px;
	bottom: 20px;
}
#home-works-section .work-block .icon {
	position: absolute;
	right: 20px;
	bottom: 10px;
	display: none;
	transform: rotate(-45deg);
}
#home-works-section .work-block:hover .icon {
	display: block;
}


#home-blog-section .eael-entry-wrapper:hover {
	background: #000 !important;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

#home-blog-section .eael-entry-wrapper:hover .eael-entry-content p, #home-blog-section .eael-entry-wrapper:hover .eael-entry-header a {
	color: #fff;
}










.scroll-container {
	height: 70px;
	width: 700px;
	overflow: hidden;
	position: relative;
}
ul.scroll-list {
	list-style: none;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: transform 0.5s ease-in-out;
}
.scroll-list li {
	height: 75px;
	font-size: 60px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 700px) {
	.scroll-container {
		width: 500px;
	}
	.scroll-list li {
		font-size: 45px;
	}
}
@media (max-width: 500px) {
	.scroll-container {
		width: 400px;
	}
	.scroll-list li {
		font-size: 35px;
	}
}

@media (max-width: 400px) {
	.scroll-container {
		width: 300px;
	}
	.scroll-list li {
		font-size: 25px;
	}
}


/*Testimonial*/

.sp-testimonial-client-testimonial {
	padding: 0 25px;
	margin-bottom: 0 !important;
}


/******************
 * About Page
 * ****************/

#challenges-section .block {
	overflow: hidden;
}

#challenges-section .block ul li svg {
	transform: rotate(-45deg);
}



/******************
 * Contact Us Page
 * ****************/


#contact-text-scroll {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;      
      color: transparent;
      padding: 10px 0;
      box-sizing: border-box;
      background: #000;
    }

    .scrolling-text {
      display: inline-block;
      white-space: nowrap;
      font-size: 10vw;
      font-weight: bold;
    }

    .scrolling-text span {
      display: inline-block;
      padding: 0 20px;
      -webkit-text-stroke: 1px #D8D8D7;
      text-stroke: 1px #D8D8D7;
    }


@media (max-width: 450px) {
	.scrolling-text span {
		font-size: 15vw;
	}
}

/******************
 * Blog Page
 * ****************/

.custom-blog-page {
	max-width: 1400px !important;
	padding: 120px 0 70px !important;
	margin: 0 auto;
}
@media (min-width: 1025px) {
	#custom-blog-page-outer {
	padding: 0 40px;
	}
	.custom-blog-page {
		padding: 120px 0 50px !important;
		margin: 0 auto;
	}
	.custom-blog-page .entry-content {
		width: 70%;
		padding-left: 100px;
	}
}
@media (max-width: 1024px) {
	.custom-blog-page {
		padding: 90px 20px 50px !important;
	}
}
@media (min-width: 900px) {
	
}



/* Features Post */
.featured-post.full-width {
	width: 100%;
	margin-bottom: 40px;
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	background-color: #f3f4f4;
	padding: 20px;
	border-radius: 10px;
	align-items: center;
}
@media (max-width: 450px) {
	.featured-post.full-width {
		flex-direction: column-reverse;
	}
	
	.featured-post.full-width .post-image img {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	
}
.featured-post a.theme-btn-animation {
	color: #000;
	padding:7px 15px 7px 15px;
	background:transparent;
	border: 1px solid #000;
	border-radius: 5px;
	display: flex;
	 width: fit-content;
    font-size: 14px;
}
.featured-post a.theme-btn-animation:hover {
	background: #000;
	color: #fff;
}
.featured-post a.theme-btn-animation:hover svg {
	fill: #fff;
	width: 15px;
}
.featured-post .col {
	flex: 1;
	padding: 30px;
}
.featured-post .post-image {
	padding: 0;
}
.featured-post .post-title {
	color: #000;
    font-weight: 600;
    font-size: 45px;
}
.featured-post .post-title:hover {
	color: #000 !important;
}
.featured-post img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}
@media (max-width: 768px) {
	.featured-post {
		flex-direction: column;
	}
	.featured-post .post-title {
		font-size: 35px;
	}
	.featured-post.full-width {
		padding: 0;
		gap: 0;
	}
}

/* Blog Flex */
.post-flex {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}


.post-flex article {
	display: flex;
    gap: 15px;
    flex-wrap: wrap;
	flex: 0 0 calc(50% - 15px);
	max-width: calc(50% - 15px);
	box-sizing: border-box;
}
.post-flex .featured-img {
	flex: 1;
}
.post-flex .post-body {
	flex: 2;
}
.post-flex .post-title {
	color: #000;
    font-weight: 600;
    font-size: 24px;
}
.post-flex .post-title:hover {
	color: #000 !important;
}
.post-date {
	color: #7a7a7a;
}
/* Flexbox two-column layout */
.post-flex img {
	width: 100%;
	height: auto;
	border-radius: 5px;
}
.post-flex h2 {
	font-size: 1.25rem;
	margin: 5px 0 10px;
}
@media (max-width: 768px) {
  .post-flex article {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (max-width: 450px) {
	.post-flex article {
		flex: none;
	}
	.post-flex article .article-border {
		border-bottom: 1px solid #dfdfdf;
		width: 100%;
		padding: 5px 0;
	}
	
	.post-flex article:last-child .article-border {
border-bottom: none;
}

	.post-flex .featured-img {
		flex: none;
	}
	.post-flex .featured-img, .post-flex .post-body {
		width: 100%;
	}
}
/* Pagination */
.pagination {
  margin: 30px 0;
  text-align: center;
	    justify-content: center;
}
.pagination .page-numbers {
  display: inline-block;
  margin: 0 5px;
  padding: 8px 12px;
  background: #f0f0f0;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
}

.pagination .current {
  background: #333;
  color: #fff;
  font-weight: bold;
}












#portfolio-block .overlay {
	background-color: rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transition: background-color 1s ease, opacity 1s ease, visibility 0s linear 1s;
	pointer-events: none; /* so hover works on parent */
}

#portfolio-block:hover .overlay {
	background-color: #00000017;
	opacity: 1;
	visibility: visible;
	transition: background-color 1s ease, opacity 1s ease, visibility 0s;
}
#portfolio-block .img-block {
	overflow: hidden;
}
#portfolio-block .img-block img {
  transition: transform 0.5s ease-in-out; /* Smooth effect */
}
#portfolio-block:hover .img-block img {
	transform: scale(1.1);
}





/* Single Post */
.single-post-intro {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	margin-bottom: 25px;
	border-radius: 10px;
}
.post-thumbnail img {
	border-radius: 5px;
	display: block;
}

@media (min-width: 1025px) {
	.single-post-intro {
		width: 70%;
		padding-left: 100px;
	}
}

.single-post-img img {
	margin-bottom: 50px;
	max-height: inherit !important;
}
.single-post-intro .single-post-title h1.entry-title {
	color: #000;
    font-weight: 500;
    font-size: 50px;
    line-height: 65px;
}

.similar-posts .related-posts-wrapper .custom-post-item {
	background:#f3f4f4;
}

@media (max-width: 768px) {
	.single-post-intro {
		flex-direction: column;
	}
	.single-post-intro .single-post-title h1.entry-title {
		font-size: 40px;
		line-height: 50px;
	}
}

.social-share {
    margin-top: 45px;
    padding-top: 15px;
    border-top: 1px solid #ddd;
	padding-top: 45px;
}

.social-share h4 {
    margin-bottom: 10px;
    font-size: 16px;
    color: #333;
}

.social-icons {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 15px;
	align-items: center;
}

.social-icons li a {
    background-color: #f3f4f4;
    padding: 8px 12px;
    border-radius: 4px;
    color: #000;
    font-size: 14px;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    gap: 7px;
}

.social-icons li a:hover {
    background-color: #000; /* LinkedIn color (for effect) */
    color: #fff;
}
@media (max-width: 768px) {
	.social-icons li a span.text {
		display: none;
	}
}



.similar-posts {
    margin-top: 45px;
    padding-top: 25px;
    border-top: 1px solid #ddd;
}

.related-posts-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

@media (max-width: 768px) {
	.related-posts-wrapper {
		flex-direction: column;
	}
}

.related-post {
    flex: 1 1 calc(33.333% - 20px);
}

.related-post img {
    width: 100%;
    height: auto;
	border-radius: 5px;
}
.similar-posts .related-post h3 {
	margin: 0 0 5px;
}
.similar-posts .related-post h3 a {
	font-size: 22px;
	margin: 10px 0 5px;
	color: #000;
	font-weight: 600;
}

.related-post .post-meta {
    font-size: 14px;
    color: #888;
}