/*
Theme Name: Purfect Solutions
Description: Custom wordpress theme of Purfect Solutions website
Author: Nazareno Mateo
Author URI: 
Template: twentytwentyfive
Version: 1.0.0
*/
/* Add your custom styles here */


html {
  scroll-behavior: smooth;
}
.wp-block-post-featured-image{
	display: none !important;
}
.hidden{
	display: none !important;
}

/* html,body{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
} */

main{
margin-block-start: 0px !important;
margin-top: 0px !important;
}

main > div:first-of-type {
padding-top: 0px !important;
}
.wp-block-post-title{
	display:none;
}
.legal-heading{
	margin-top: 100px !important;
}

footer {
display: none;
}

/* Base sticky header styles */
header.wp-block-kadence-header {
  position: fixed;
  top: 0;
  z-index: 9999;
  background-color: #ffffff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Drop shadow on bottom */

  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
	width: 100%;
}

header a:not(.kb-identity-layout-logo-only)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px; /* thickness of underline */
  background-color: currentColor;
  transition: width 0.3s ease;
}

header a:not(.kb-identity-layout-logo-only):hover::after {
  width: 100%;
}

/* Add shadow when scrolling */
header.is-scrolled {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Hidden state when scrolling down */
header.is-hidden {
  transform: translateY(-100%);
}

.scroll-up-btn {
	display:flex;
	justify-content:center;
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: #fff;
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 9999;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

}

.scroll-up-btn.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);

}


.cards-stacked-container {
  position: relative;
}

.card-stacked {
  position: sticky;
}

.cards-stacked-container .card-stacked:nth-child(1) { z-index: 3; top: 6.5rem; }
.cards-stacked-container .card-stacked:nth-child(2) { z-index: 4; top: 7.5rem; }
.cards-stacked-container .card-stacked:nth-child(3) { z-index: 5; top: 8.5rem;  }
.cards-stacked-container .card-stacked:nth-child(4) { z-index: 6; top: 9.5rem;  }
.cards-stacked-container .card-stacked:nth-child(5) { z-index: 7; top: 10.5rem;  }
.cards-stacked-container .card-stacked:nth-child(6) { z-index: 8; top: 11.5rem;  }
.cards-stacked-container .card-stacked:nth-child(7) { z-index: 9; top: 12.5rem;  }



@keyframes float {
0% {
		transform: translatey(0px);
	    filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.5));
	}
	50% {
		transform: translatey(-80px);
		    filter: drop-shadow(0px 25px 15px rgba(0, 0, 0, 0.2));
	}
	100% {
		transform: translatey(0px);
		    filter: drop-shadow(0px 5px 15px rgba(0, 0, 0, 0.5));
	}
}

.parallax-img {
  animation: float 4s ease-in-out infinite;
  max-width: 300px; /* Adjust size as needed */
	position: relative;
	bottom: -40px;

}
.services-cta{
	box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.4);
}
.menu-container {
  margin-right: -0.5em;
}
	.testimonial-container {
 width: 100vw !important;
		overflow-x: hidden !important;
}

.map-global{
	min-height: 250px;
	max-width: 1200px;
	margin: 0 0 auto;
	display: flex;
	justify-content:center;
	align-items: center;
}
.map-regional > div {
	min-height: 350px!important;
}
	.desktop-hidden{
		display: none;
	}

	.tablet-hidden{
		display: block;
	}


/* lg */
@media (max-width: 1024px) {
		.scroll-up-btn {	
		bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
}	
	.kb-off-canvas-inner-wrap {
		min-height: 12rem;		
  		z-index: 1;
		overflow: visible !important;
		position: absolute !important;
		top: 0px !important;
		left: 0px !important;
		width: 100% !important;
	}
	
	.kb-off-canvas-inner-wrap::before {
		content:"";
		position: absolute;
		background-color: rgba(0, 0, 0, 0.5) !important; /* 0.5 = 50% transparent */
		top: 0;
		left: 0;
  		/* Optional styling */
  		z-index: 20;
		min-height: 100vh !important;
		min-width: 100vw !important;
		top: 12rem;
	}
	
	.tablet-hidden{
		display: none !important;
	}
		.desktop-hidden{
		display: block !important;
	}
	
}


/* Medium (md):768px */
@media (max-width: 768px) {
  /* styles for medium screens and up */
	
	.focus-section br{
		display:none;
		padding-right: 5rem !important;
		padding-left: 5rem !imporntant;
	}
	
	.hero-text {
		text-align: center !important;
	}
	
		.kb-off-canvas-inner-wrap {
		width: 100% !important;
	}
	
	.hero-section{
		margin-left: 0px !important;
		margin-right: 0px !important;
	}
	.kb-bg-slide {
		background-size: cover !important;
	}
	
}



	

/* Small (sm):576px */
@media (max-width: 576px) {
	.testimonial-container {
 width: 100vw !important;
		overflow-x: hidden !important;
}
	.mobile-hidden{
		display:none !important;
	}

  /* styles for small screens and up */
	
	.testimonial-texts{
		max-width: 300px !important;
	}

}

/* Custom html section */
.services-section {
        background: transparent;
        font-family: "Manrope";
      }

      .services-container {
        max-width: 1242px;
        margin: 0 auto;
      }

      .services-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(280px, 1fr));
        gap: 40px;
      }

      .service-card {
        background: white;
        border-radius: 16px;
        padding: 32px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
          0 2px 4px -1px rgba(0, 0, 0, 0.06);
        transition: all 0.3s ease;
        border: 1px solid #e2e8f0;
        position: relative;
        overflow: hidden;
      }

      .service-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #fecc32);
        transform: scaleX(0);
        transition: transform 0.3s ease;
      }

      .service-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
          0 10px 10px -5px rgba(0, 0, 0, 0.04);
      }

      .service-card:hover::before {
        transform: scaleX(1);
      }

      .service-icon {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #0b8384);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        font-size: 24px;
      }

      .service-title {
        font-size: 2rem;
        font-weight: 400;
        color: #111111;
        margin-bottom: 1rem;
        line-height: 1.2;
        letter-spacing: 2px;
        text-wrap: pretty;
        font-family: "Manrope";
      }

      .service-description {
        font-size: 1.25rem;
        font-weight: 300;
        color: #111111;
        margin-bottom: 1rem;
        line-height: 1.2;
        letter-spacing: 2px;
        text-wrap: pretty;
        font-family: "Manrope";
      }

      .service-features {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .feature-category {
        margin-bottom: 20px;
      }

      .feature-category:last-child {
        margin-bottom: 0;
      }

      .feature-title {
        font-size: 1.25rem;
        font-weight: 300;
        color: #111111;
        margin-bottom: 1rem;
        line-height: 1.2;
        letter-spacing: 2px;
        text-wrap: pretty;
        font-family: "Manrope";
      }

      .feature-title::before {
        content: "→";
        color: #0b8384;
        font-weight: bold;
        margin-right: 8px;
        font-size: 0.8rem;
      }

      .feature-items {
        font-size: 1rem;
        font-weight: 300;
        color: #111111;
        margin-bottom: 1rem;
        line-height: 1.2;
        letter-spacing: 0.5px;
        text-wrap: pretty;
        font-family: "Manrope";
      }

      @media (max-width: 768px) {
        .services-section {
          padding: 60px 16px;
        }

        .services-grid {
          grid-template-columns: 1fr;
          gap: 24px;
        }

        .service-card {
          padding: 24px;
        }
      }

      @media (max-width: 1200px) and (min-width: 769px) {
        .services-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }