#moovlin-rotate-text {
    display: inline-block;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    min-width: 420px;
    text-align: left;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gradient-text {
    background: linear-gradient(-45deg, #3498db, #96c8e6, #4ECDC4, #3BC995, #28C565, #15C135, #00cfcf, #3498db) !important;
    background-size: 400% 400% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    animation: gradientMove 4s ease infinite !important;
    display: inline-block !important;
}

/* Override WordPress color classes */
.has-black-color .gradient-text,
.has-text-color .gradient-text {
    color: transparent !important;
    background: linear-gradient(-45deg, #3498db, #96c8e6, #4ECDC4, #3BC995, #28C565, #15C135, #00cfcf, #3498db) !important;
    background-size: 400% 400% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: gradientMove 4s ease infinite !important;
}








.entry-title {
    display: none !important;
}









.hover-image-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.hover-image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.4s ease-in-out;
}

.hover-image-wrapper .hover-img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

.hover-image-wrapper:hover .hover-img {
  opacity: 1;
}

.hover-image-wrapper:hover .default-img {
  opacity: 0;
}






nav a img {
  height: 18px;
  vertical-align: middle;
  margin-right: 6px;
}




nav a img {
  transition: transform 0.3s ease;
}

nav a:hover img {
  animation: bounce 0.6s;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-6px);
  }
  60% {
    transform: translateY(3px);
  }
}


.moovlin-icon {
  animation: slowBounce 4s infinite;
  filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.4)); /* soft glow */
  transition: transform 0.3s ease;
}

/* Bounce keyframes */
@keyframes slowBounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}










.moovlin-logo {
  height: 52px;
  max-width: 150px;
  width: auto;
  object-fit: contain;
  margin-right: 2rem;
  transition: filter 0.3s ease, transform 0.3s ease;
  filter: none;
  display: inline-block;
  vertical-align: middle;
}


@keyframes moovlinScroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}







header .menu-item:before,
header .elementor-icon,
header .check-icon {
  display: none !important;
}











.moovlin-gmb ul {
  list-style: none;
  padding-left: 0;
  text-align: left;
}

.moovlin-gmb ul li {
  padding-left: 32px;
  margin-bottom: 0.75rem;
  position: relative;
}

.moovlin-gmb ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  background-image: url('https://moovlin.com/wp-content/uploads/2025/04/moovlin-checkmark-e1744959023170.png');
  background-size: contain;
  background-repeat: no-repeat;
}







.faq details {
  border: 1px solid #e1e5ea;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  background: #f9fbfc;
  transition: all 0.3s ease;
}

.faq summary {
  font-weight: bold;
  cursor: pointer;
  color: #007cf0;
  font-size: 1rem;
  list-style: none;
}

.faq summary::marker {
  display: none;
}

.faq p {
  margin-top: 0.5rem;
}


























.recommended-ribbon {
  position: absolute;
  top: -16px;
  right: -16px;
  font-size: 0.85rem;
  padding: 0.45rem 1rem;
  font-weight: 700;
  color: white;
  background: #00cfcf;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  animation: floatBadge 2.8s ease-in-out infinite;
  transform: rotate(-6deg);
  z-index: 10;
  letter-spacing: 0.4px;
}





















.cart-contents,
.woocommerce.widget_shopping_cart,
.widget_shopping_cart_content,
.site-header-cart,
.menu-item-cart,
.woocommerce-cart,
.woocommerce-page .cart {
  display: none !important;
}


	
	
	
	
	
	



.moovlin-cards-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}

.moovlin-card {
  background: linear-gradient(145deg, #ffffff, #f4f7fa);
  border-radius: 18px;
  padding: 1.75rem 1.8rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  min-width: 280px;
  max-width: 360px;
  flex: 1;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.moovlin-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);
}

.moovlin-card img.moovlin-icon {
  height: 26px;
  margin-bottom: 1rem;
  opacity: 0.95;
}

.moovlin-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 0.5rem;
}

.moovlin-card p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
}



















.moovlin-card-scroll {
  overflow-x: hidden;
}

@media screen and (max-width: 768px) {
  .moovlin-card-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 1rem;
    margin: 0 -1rem;
  }

  .moovlin-card-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    padding: 0 1rem;
  }

  .moovlin-card-track > div {
    scroll-snap-align: center;
    flex-shrink: 0;
    width: 90vw;
    max-width: 420px;
  }
}













/* This CSS targets ONLY the page with the specific div */
body:has(#page-specific-background-trigger) {
  background: #f5f7fa !important;
  background-image: radial-gradient(rgba(0,0,0,0.03) 1px, transparent 1px) !important;
  background-size: 15px 15px !important;
}

body:has(#page-specific-background-trigger)::before {
  content: "";
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: -1 !important;
  opacity: 0.3 !important;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%233498db' fill-opacity='0.05' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E") !important;
}











/* Comprehensive navbar styling with exact Moovlin blue color - page specific */
body:has(#page-specific-background-trigger) header,
body:has(#page-specific-background-trigger) .site-header,
body:has(#page-specific-background-trigger) .main-navigation,
body:has(#page-specific-background-trigger) .main-header-bar,
body:has(#page-specific-background-trigger) .header-main,
body:has(#page-specific-background-trigger) .header-container,
body:has(#page-specific-background-trigger) .header-wrap,
body:has(#page-specific-background-trigger) .main-header,
body:has(#page-specific-background-trigger) #masthead,
body:has(#page-specific-background-trigger) .masthead,
body:has(#page-specific-background-trigger) .header-area,
body:has(#page-specific-background-trigger) .top-header,
body:has(#page-specific-background-trigger) .nav-wrapper,
body:has(#page-specific-background-trigger) #site-navigation,
body:has(#page-specific-background-trigger) .main-header-menu,
body:has(#page-specific-background-trigger) .header-main-layout-1,
body:has(#page-specific-background-trigger) .navbar,
body:has(#page-specific-background-trigger) .navbar-header,
body:has(#page-specific-background-trigger) .navbar-inner,
body:has(#page-specific-background-trigger) .navbar-collapse,
body:has(#page-specific-background-trigger) .nav,
body:has(#page-specific-background-trigger) .navbar-nav,
body:has(#page-specific-background-trigger) .elementor-nav-menu--main,
body:has(#page-specific-background-trigger) .elementor-nav-menu,
body:has(#page-specific-background-trigger) .navigation,
body:has(#page-specific-background-trigger) .navigation-top,
body:has(#page-specific-background-trigger) .primary-navigation,
body:has(#page-specific-background-trigger) .header-navigation,
body:has(#page-specific-background-trigger) #header-navigation,
body:has(#page-specific-background-trigger) .main-navigation-wrapper,
body:has(#page-specific-background-trigger) .site-navbar,
body:has(#page-specific-background-trigger) .menu-primary-container,
body:has(#page-specific-background-trigger) .menu-header-container,
body:has(#page-specific-background-trigger) .menu-container,
body:has(#page-specific-background-trigger) .header-menu,
body:has(#page-specific-background-trigger) .primary-menu,
body:has(#page-specific-background-trigger) .menu-wrapper {
  background-color: rgba(52, 152, 219, 1) !important; /* Solid version of Moovlin blue */
  border-color: rgba(52, 152, 219, 1) !important;
  color: #ffffff !important;
}

/* Fix for specific elements that might have their own background */
body:has(#page-specific-background-trigger) header *,
body:has(#page-specific-background-trigger) .site-header *,
body:has(#page-specific-background-trigger) .main-navigation *,
body:has(#page-specific-background-trigger) #site-navigation *,
body:has(#page-specific-background-trigger) .navbar * {
  background-color: transparent;
}

/* Force the specific blue color on ALL header elements */
body:has(#page-specific-background-trigger) header,
body:has(#page-specific-background-trigger) header > *,
body:has(#page-specific-background-trigger) header > * > *,
body:has(#page-specific-background-trigger) header > * > * > *,
body:has(#page-specific-background-trigger) header > * > * > * > *,
body:has(#page-specific-background-trigger) header > * > * > * > * > * {
  background-color: rgba(52, 152, 219, 1) !important;
}

/* Target any white buttons or elements in the header */
body:has(#page-specific-background-trigger) header button,
body:has(#page-specific-background-trigger) .site-header button,
body:has(#page-specific-background-trigger) header .button,
body:has(#page-specific-background-trigger) .site-header .button,
body:has(#page-specific-background-trigger) header .wp-block-button,
body:has(#page-specific-background-trigger) .site-header .wp-block-button,
body:has(#page-specific-background-trigger) header .search-form,
body:has(#page-specific-background-trigger) .site-header .search-form,
body:has(#page-specific-background-trigger) header input,
body:has(#page-specific-background-trigger) .site-header input,
body:has(#page-specific-background-trigger) header .header-button,
body:has(#page-specific-background-trigger) .site-header .header-button,
body:has(#page-specific-background-trigger) header .menu-toggle,
body:has(#page-specific-background-trigger) .site-header .menu-toggle,
body:has(#page-specific-background-trigger) header .navbar-toggler,
body:has(#page-specific-background-trigger) .site-header .navbar-toggler,
body:has(#page-specific-background-trigger) header .menu-button,
body:has(#page-specific-background-trigger) .site-header .menu-button,
body:has(#page-specific-background-trigger) header .mobile-menu-toggle,
body:has(#page-specific-background-trigger) .site-header .mobile-menu-toggle {
  background-color: rgba(52, 152, 219, 1) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Exception for the login/contact button that appears white in the screenshot */
body:has(#page-specific-background-trigger) .login-button,
body:has(#page-specific-background-trigger) .contact-button,
body:has(#page-specific-background-trigger) a.button.login,
body:has(#page-specific-background-trigger) a.button.contact-us,
body:has(#page-specific-background-trigger) .contact-us,
body:has(#page-specific-background-trigger) .header-cta {
  background-color: #ffffff !important;
  color: rgba(52, 152, 219, 1) !important;
  border-color: #ffffff !important;
}

/* Links in the header */
body:has(#page-specific-background-trigger) header a,
body:has(#page-specific-background-trigger) .site-header a,
body:has(#page-specific-background-trigger) .main-navigation a,
body:has(#page-specific-background-trigger) #site-navigation a,
body:has(#page-specific-background-trigger) .navbar a,
body:has(#page-specific-background-trigger) .menu-item a,
body:has(#page-specific-background-trigger) .nav-menu a,
body:has(#page-specific-background-trigger) .primary-menu a {
  color: #ffffff !important;
}

/* Child element bg color fixes */
body:has(#page-specific-background-trigger) .site-logo,
body:has(#page-specific-background-trigger) .site-branding,
body:has(#page-specific-background-trigger) .logo-wrapper,
body:has(#page-specific-background-trigger) .logo-container,
body:has(#page-specific-background-trigger) .custom-logo-link,
body:has(#page-specific-background-trigger) .menu-item,
body:has(#page-specific-background-trigger) .menu-item-container,
body:has(#page-specific-background-trigger) .nav-item,
body:has(#page-specific-background-trigger) .header-item {
  background-color: rgba(52, 152, 219, 1) !important;
}















/* Override admin bar spacing */
body.admin-bar .main-navigation-container {
    margin-top: 0 !important;
}

/* Make header stick to top */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
}

/* Navigation container adjustments */
.main-navigation-container {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 0.5rem 0;
}

/* Logo scaling */
.custom-logo {
    width: 140px !important;
    height: auto;
    transition: all 0.4s ease;
}

body.scrolled .custom-logo {
    width: 85px !important;
}

/* Fixed header background when scrolled */
body.scrolled .main-navigation-container {
    background-color: white !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Adjust page content to not hide behind fixed header */
.site-wrapper {
    margin-top: 70px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .custom-logo {
        width: 90px !important;
    }
    
    body.scrolled .custom-logo {
        width: 65px !important;
    }
    
    .main-navigation-container {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        padding: 0.3rem 0;
    }
    
    .site-wrapper {
        margin-top: 50px;
    }
}

















.moovlin-flowing-gradient {
    background: linear-gradient(-45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3) !important;
    background-size: 400% 400% !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: flowingGradient 4s ease infinite !important;
}