/* WE-Agency Custom Styles */

body {
     /* background: radial-gradient(circle, rgba(17,104,218,0.15), rgba(1,207,201,0.15), rgba(1,207,201,0.10));
      background-size: 300% 300%;
      animation: circularGradient 6s ease-in-out infinite;*/
}

.ai-btn {
  position: relative!important;
  padding: 14px 28px!important;
  font-size: 16px!important;
  font-weight: 500!important;
  color: #1f1f1f!important;
  background: #fff!important;
  border: none!important;
  border-radius: 999px!important;
  cursor: pointer!important;
  z-index: 1!important;
  overflow: hidden!important;
}

button, input[type="submit"], .btn {
    background: #ff0000;
}

footer svg { padding: 12px; }

footer#site-footer li.elementor-icon-list-item svg {
    padding: 0;
}

/* Animated gradient border */
.ai-btn::before {
  content: "";
  position: absolute!important;
  inset: 0!important;
  padding: 2px!important; /* border thickness */
  border-radius: inherit!important;
  background: linear-gradient(
    120deg,
    #4285f4,
    #34a853,
    #fbbc05,
    #ea4335,
    #4285f4
  )!important;
  background-size: 300% 300%!important;
  animation: borderMove 4s linear infinite!important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0)!important;
  -webkit-mask-composite: xor!important;
          mask-composite: exclude!important;
  z-index: -1!important;
}

/* Hover glow */
.ai-btn:hover::before {
  filter: blur(1px)!important;
}

/* Animation */
@keyframes borderMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 300% 50%;
  }
}

/* Element with scroll-based fill animation */
    .animate-text-fill {
      font-size: 2em;
      font-weight: bold;
      color: transparent;
      -webkit-text-stroke: 2px #4C0055; /* Border text */
      background: linear-gradient(90deg, #4C0055, #FC6440);
      background-size: 200% 100%;
      background-position: 100% 0;
      background-clip: text;
      -webkit-background-clip: text;
      transition: color 0.3s ease, -webkit-text-stroke 0.3s ease;
      animation: fill-animation 1s forwards;
      animation-timeline: scroll();
    }

    /* Define the animation */
    @keyframes fill-animation {
      0% {
        background-position: 100% 0;
      }
      100% {
        background-position: 0 0;
      }
    }

    /* Define scroll timeline */
    @scroll-timeline {
      name: scroll;
      source: auto;
      scroll-offsets: auto;
    }

.scroll-fill-text {
  font-size: 80px;
  font-weight: 800;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ff0057 0%, #00d4ff 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
  transition: background-position 0.1s ease-out;
}

.site-logo img { width: 200px; }

/** swiper css **/

/* 1. Target the main container via the class you manually assigned */
.slider-section .mySwiper {
    display: block !important;
    overflow: hidden !important;
    position: relative;
    width: 100%;
}

/* 2. Force the wrapper to stay in a row (stops vertical stacking) */
.slider-section .mySwiper .swiper-wrapper {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
}

/* 3. Ensure slides don't shrink and are visible */
.slider-section .mySwiper .swiper-slide {
    flex-shrink: 0 !important;
    height: auto !important;
    display: flex;
    justify-content: center;
    margin-right: 0!important; /* Adjust spacing here */
}

/* 4. FIX: Force visibility for Elementor entrance animations */
.slider-section .mySwiper .elementor-invisible {
    visibility: visible !important;
    opacity: 1 !important;
    animation: none !important;
}

/* 5. Navigation Button Colors */
.slider-section .swiper-button-next, 
.swiper-button-prev {
    color: #f00 !important;
}

.slider-section .swiper-button-prev {
    position: absolute;
    left: 0;
    width: 48px;
}

.slider-section .swiper-button-next {
    position: absolute;
    right: 0;
    width: 48px;
}

/** end swiper css **/

/***** mega menu  *****/

/* ==========================================================================
   1. LAYOUT RESET & CONTAINER ANCHORING
   ========================================================================== */
.custo-site-header {
    display: flex;
    flex-wrap: nowrap;
    position: relative !important; 
}

.custo-nav-area,
.elementor-widget-shortcode,
.elementor-shortcode,
.we-agency-nav,
.menu-wrapper,
header#site-header .we-agency-menu {
    position: static !important;
}

header#site-header .container {
    width: 100% !important;
    max-width: 100% !important;
}

/* ==========================================================================
   2. LINK TEXT, BUBBLES & ARROW RE-ANCHORING
   ========================================================================== */
header#site-header .we-agency-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

header#site-header .we-agency-menu > li {
    position: static !important;
    display: inline-block !important;
    margin: 0 16px 0 0 !important;
    padding: 0 !important;
}

/* Target the anchor tags directly to lock down local element structures */
header#site-header .we-agency-menu > li > a {
    position: relative !important;
    display: inline-block !important;
    padding-left: 20px !important; /* Space inside link for your bubble dot */
    text-decoration: none;
    font-size: 16px;
    color: #111;
    opacity: 0.6;
    transition: opacity 0.25s ease, color 0.25s ease;
}

header#site-header .we-agency-menu li:hover > a { 
    opacity: 1; 
}

/* FORCE THE BUBBLE DOTS TO SIT RELATIVE TO THE LINK TEXT */
header#site-header .we-agency-menu > li a::before {
    content: "";
    position: absolute !important;
    left: 4px !important; 
    top: 50% !important;
    transform: translateY(-50%) scale(0.6) !important;
    width: 12px !important;
    height: 12px !important;
    background: transparent;
    border-radius: 50% !important;
    opacity: 0.4 !important;
    transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.25s ease !important;
}

header#site-header .we-agency-menu > li:hover a::before {
    transform: translateY(-50%) scale(1) !important;
    opacity: 1 !important;
    background: #7d7d7d !important;
}

/* Active styles mapping */
header#site-header .we-agency-menu .current-menu-item a::before,
header#site-header .we-agency-menu .current_page_item a::before {
    background: red !important;
    transform: translateY(-50%) scale(1.1) !important;
    opacity: 1 !important;
}

header#site-header .we-agency-menu .current-menu-item > a,
header#site-header .we-agency-menu .current_page_item > a {
    color: red !important;
    opacity: 1 !important;
    font-weight: 600;
}

/* ==========================================================================
   3. BREAKOUT DROP-DOWN PANEL WITH TRANSITION GAP BRIDGE
   ========================================================================== */
header#site-header .we-agency-menu li ul.sub-menu {
    display: none;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border-radius: 0 0 12px 12px !important;
    padding: 24px !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08) !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
    border-top: 30px solid transparent !important;
    margin-top: -30px !important;
    background-clip: padding-box !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
	border-radius:12px;
	align-items: stretch !important;
}

header#site-header .we-agency-menu li:hover ul.sub-menu { 
    display: flex !important; 
	flex-wrap:wrap; }

header#site-header .we-agency-menu li ul.sub-menu li {
    display: block !important;
    position: relative !important; 
    flex: 1 1 20%;
    min-width: 22%;
    margin: 0 !important;
    padding: 0 !important;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0.1) !important;
}

.customer-login ul.sub-menu li {
    min-width: 10% !important;
	flex: 1 1 18% !important;
}

header#site-header .we-agency-menu li ul.sub-menu li a {
    display: flex;
    gap: 0;
    height: 100% !important;
    align-items: baseline;
    background: #f5efee;
    border-radius: 10px;
    padding: 24px;
    color: #000;
    flex-direction: column;
	justify-content: center;
	align-items: center;
}

header#site-header .we-agency-menu li ul.sub-menu li a span { margin: 0 !important; }
header#site-header .we-agency-menu li ul.sub-menu li a:hover { background: #ff000033; }
header#site-header .we-agency-menu li ul.sub-menu li a img { margin: 0 !important; }
header#site-header .we-agency-menu > li ul.sub-menu li a::before { display:none; }

/* Controls */
.custo-site-header .menu-toggle { color: #000000!important; }
.custo-site-header button:hover, input[type="submit"]:hover, .btn:hover { background: #ff0000!important; }
.menu-toggle { display: none; background: none; border: 1px solid #333; padding: 8px 12px; cursor: pointer; color: #0d5891; font-size: 16px; }

/* ==========================================================================
   4. MOBILE NAV STYLES (FIXED & OPTIMIZED)
   ========================================================================== */
@media (max-width: 992px) {
    header#site-header .we-agency-menu {
        display: none;
        flex-direction: column;
        background: #fff; 
        position: relative !important;
    }

    header#site-header .menu-toggle { 
        display: inline-block; 
    }

    header#site-header .we-agency-nav.active .we-agency-menu {
        display: flex !important;
        z-index: 99999;
        width: 90%;
        
        /* 1. Set a dynamic max-height based on the viewport */
        max-height: calc(100vh - 120px) !important; /* Subtract header height space */
        
        /* 2. Enable vertical scrolling for long lists */
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        
        top:120px; 
        position: fixed !important;
        left: 5%;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 12px 24px rgba(0,0,0,0.15);
    }

    /* Keep the rest of your mobile item overrides as they are */
    header#site-header .we-agency-menu > li { 
        display: block !important;
        width: 100% !important;
        margin: 12px 0 !important; 
    }

    header#site-header .we-agency-menu > li a {
        display: block !important;
        width: 100%;
        padding: 8px 0 8px 24px !important;
    }

    header#site-header .we-agency-menu > li a::before { 
        left: 4px !important; 
        top: 50% !important; 
    }

    /* FIX: Override the desktop positioning and force a clean vertical accordion look */
    header#site-header .we-agency-menu li ul.sub-menu {
        position: relative !important; 
        top: 0 !important;
        width: 100% !important;
        display: none !important; 
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Display sub-menu when parent is active/hovered on mobile */
    header#site-header .we-agency-menu li:hover ul.sub-menu {
        display: flex !important;
    }

    /* FIX: Reset desktop grid sizing on sub-menu items */
    header#site-header .we-agency-menu li ul.sub-menu li {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        flex: 1 1 100% !important;
        margin: 0 0 4px 0 !important;
        padding: 0 !important;
    }

    /* Simplify links inside the sub-menu for mobile devices */
    header#site-header .we-agency-menu li ul.sub-menu li a {
        align-items: flex-start !important; /* Left-align content */
        justify-content: center !important;
        padding: 12px 16px !important;
        text-align: left !important;
    }
    
    .counter-bg { 
        background:#f00; 
        border-radius:12px; 
    }

    .hero-heading b { 
        font-size: 32px; 
        line-height: 38px; 
    }


	li.menu-item-has-children a span::after { top: 2px!important; }

}

/***** mega menu end  *****/








.form-w { color: #fff; }
.form-w label.wpforms-field-label { color: #fff; }
.form-w input  { color: #fff; }
.form-w legend.wpforms-field-label { color: #fff; }

.form-w li.wpforms-icon-choices-item {
    background: #fff !important;
    border-radius: 8px;
}

.form-w li.wpforms-icon-choices-item.wpforms-selected { background: #428fcc !important; }

.form-w li.wpforms-icon-choices-item.wpforms-selected span.wpforms-icon-choices-icon svg { fill: #fff !important; }

.form-w li.wpforms-icon-choices-item.wpforms-selected span.wpforms-icon-choices-label { color:#fff!important; }

.contact-page-form div.wpforms-container.wpforms-container-full .wpforms-form ul.wpforms-icon-choices { gap: 8px; }

.contact-page-form div.wpforms-container.wpforms-container-full .wpforms-form ul.wpforms-icon-choices li.wpforms-icon-choices-item { width: 18% !important; }

footer#site-footer .container {
    width: 100% !important;
    max-width: 100% !important;
}

/* Footer only */
footer#site-footer .we-agency-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block !important;
}

footer#site-footer .we-agency-menu li {
    display: block !important;
    position: relative;
    padding: 0 0 0 24px;
    margin-bottom: 8px;
}

/* Bubble dot */
footer#site-footer .we-agency-menu li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(0.6);
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.4;
    transition: 
        transform 0.25s ease,
        opacity 0.25s ease,
        background-color 0.25s ease;
}

/* Text style */
footer#site-footer .we-agency-menu a {
    text-decoration: none;
    font-size: 14px;
    color: #fff;
    opacity: 0.6;
    transition: opacity 0.25s ease, color 0.25s ease;
}

/* Hover effect = bubble expands */
footer#site-footer .we-agency-menu li:hover::before {
    transform: translateY(-50%) scale(1); /* bubble grows */
    opacity: 1;
}

footer#site-footer .we-agency-menu li:hover a {
    opacity: 1;
}

/* ACTIVE item = red bubble + larger size */
footer#site-footer .we-agency-menu .current-menu-item::before,
footer#site-footer .we-agency-menu .current_page_item::before {
    background: red !important;
    transform: translateY(-50%) scale(1.1);
    opacity: 1 !important;
}

footer#site-footer .we-agency-menu .current-menu-item a,
footer#site-footer .we-agency-menu .current_page_item a {
    color: red !important;
    opacity: 1 !important;
    font-weight: 600;
}
    
/*****blog******/

.wp-singular h1.entry-title {
    font-size: 36px;
    text-align: center;
    line-height: 48px;
}


body.wp-singular.single.single-post article.post a { color: #ff0000!important; }

body.wp-singular.single.single-post article.post a strong{ color: #ff0000!important; }

.blog-page header.page-header {
    padding: 164px 0 24px;
    text-align: center;
}

nav.navigation.posts-navigation .nav-links {
    font-size: 24px;
    text-align: center;
}

nav.navigation.posts-navigation .nav-links {
    font-size: 24px;
    text-align: center;
    gap: 36px;
	display: flex;
    justify-content: center;
}

nav.navigation.posts-navigation .nav-links .nav-previous::before {
	content: '\2304';
    line-height: 20px;
    vertical-align: text-top;
    padding: 0 12px 0 0;
}

nav.navigation.posts-navigation .nav-links .nav-next::after {
    content: '\2303';
    line-height: 20px;
    vertical-align: sub;
    padding: 0 0 0 12px;
}

article.post { width: 980px; margin: 0 auto; padding: 164px 0 0; }

article.post img {
	border-radius:24px;
	text-align:center;
	margin:24px; }

body.wp-singular article.post h1 { margin: 0; }

body.wp-singular table td p { margin: 0; }

body.wp-singular table td { padding: 8px; border: 1px solid #000; margin: 0; }

body.wp-singular article.post h1.entry-title a {
    font-size: 36px;
    font-weight: 800;
    line-height: 42px;
    color: rgb(46, 46, 46);
    text-decoration: none;
	display:block;
	text-align:center;
	margin:0 16%;
}

body.wp-singular article.post ul { margin:0 0 16px; }

body.wp-singular article.post ul li { color:#000; margin:0 0 8px; }

.blog-side-bar-form label { color: #000 !important; }

.blog-side-bar-form input { border: 1px solid #000 !important; }

.blog-side-bar-form .wpforms-field {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
}

.blog-side-bar-form label {
    color: #000 !important;
    margin: 0 0 4px !important;
}

article.post h2.entry-title a {
    font-size: 32px;
    font-weight: 800;
    line-height: 38px;
    color: rgb(46, 46, 46);
    text-decoration: none;
}

article.post h3 {
    font-size: 18px;
    font-weight: 500;
    line-height: 38px;
    color: rgb(46, 46, 46);
    text-decoration: none;
}

article.post strong {
    font-weight: 800;
    color: rgb(46, 46, 46);
}

article.post p{
	font-family: Poppins, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: rgb(46, 46, 46);
}

article.post hr{
	margin:24px 0;
}

.we-latest-posts .we-post-card {
    display: inline-block;
    width: 30%;
    text-align: center;
    padding: 0;
    background: #fff;
    border-radius: 24px;
    vertical-align: top;
    margin: 1.5%;
}

h3.we-post-title {
    margin: 0;
    padding: 12px 24px;
}
h3.we-post-title a {
    color: #0d5891;
    margin: 0;
}

.we-latest-posts .we-post-card p{
	padding:0 24px 24px;
	font-weight:500;
}

.we-post-thumb img {
    width: 100%;
    border-radius: 24px;
    margin: 0 0 24px;
}

.list-container .blog-post .elementor-widget-container { background-position: 100% 0%; }

.latest-posts { display: flex; }

.latest-posts .post-card {
    margin: 12px;
	border-radius:12px;
	padding:0 0 12px;
}

.latest-posts .post-card img { width: 100%; border-radius:16px; }

.latest-posts .post-card h3 {
	font-family: "Kodchasan", Sans-serif;
    margin: 0;
    font-size: 18px;
    padding: 0 12px 8px;
}

.latest-posts .post-card h3 a { color: #2E2E2E; font-weight:600; }

.latest-posts .post-card p {
    margin: 0;
    padding: 0 12px;
}

.testimonial-slider figure.swiper-slide-inner img {
    width: 64px;
    border-radius: 24px;
    margin: 12px auto;
	display:none;
}


.sticky-div {
	position: sticky;
    top: 0;
}

header#site-header .container {
    width: 100%;
    max-width: 100%;
}

.top-header svg { width:12px; }

.top-header ul li{
	display:inline-block;
	padding:0 0 0 12px;
}

.footer-form legend.wpforms-field-label {
    margin: 0 0 4px 0 !important;
    font-size: 14px !important;
    color: #0d5891 !important;
}

.footer-form label.wpforms-field-label{
	margin: 0 0 4px 0 !important;
    font-size: 14px !important;
    color: #0d5891 !important;
}

.footer-form .wpforms-field {
    padding: 0 0 8px !important;
}

.footer-form .radio-select label.wpforms-field-label-inline {
    padding: 16px 4px !important;
}


footer#site-footer ul.elementor-icon-list-items li.elementor-icon-list-item {
    list-style: none;
}

footer#site-footer ul.elementor-icon-list-items li.elementor-icon-list-item svg {
    width: 14px;
    height: 18px;
    margin: 0px 0 -4px 0;
}

.specialities-icons svg {
	fill: #0d5891 !important;
	stroke:#0d5891 !important;
}

body.wp-singular.page-id-306 .footer-form{ display:none; }

body.wp-singular.page-id-306 .footer-faqs { width:100%!important; }

.proven-success .elementor-counter-title {
    text-align: center;
}

.blog-page article.post {
    width: 33%;
    display: inline-block;
    padding: 24px;
    vertical-align: top;
}

.blog-page article.post img { margin: 0; width: 100%; }

.blog-page article.post h2 { margin:12px 0 0; }

.blog-page article.post h2 a { font-size:24px; }

.blog-page article.post:hover {
    background: rgb(16, 101, 204, 0.1);
    border-radius: 24px;
}

.blog-page article.post:hover h2 a { color: #1064ca; }

.sticky-header-main {
  position: relative;
  transition: all 0.3s ease;
}
.sticky-header-main.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;      /* change color if needed */
  box-shadow: 0 8px 12px rgba(0,0,0,0.1);
  z-index: 999;
}


@media screen and (max-width: 760px) {
	body.wp-singular article.post h1.entry-title a { margin:0; }
}

@media screen and (max-width: 520px) {

	article.post {
		width: 100%;
		margin: 0;
		padding:12px;
	}

 	.counter-hero{
		position:relative!important;
		right:0!important;
	} 

	.we-latest-posts .we-post-card {
		display: block;
		width: 100%;
	}

	.blog-page article.post {
   		width: 100%;
		display: block;
	}

}