/* Gradient text style */
.elementor-heading-title .gradient {
    background: linear-gradient(to right, #3DC7D3, #1A8C96) !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-background-clip: text !important;
    color: transparent !important; /* Override any inline color */
}
/* Solid blue text style */
.elementor-heading-title .bluecolor {
    background: none !important;
    color: #3DC7D3 !important; /* Override inline color */
}
/* Hover effect ONLY for Elementor buttons with .custom-button-hover on the widget */
.custom-button-hover .elementor-button:hover .elementor-button-icon {
    margin-left: 3px !important;
}
.custom-button-hover .elementor-button:hover .elementor-button-text {
    margin-right: 3px !important;
}
.custom-button-hover .elementor-button .elementor-button-icon {
    transition: margin-left 0.9s ease !important;
}
/* CSS for industry hover */
.single-card {
    position: relative;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.1); /* Add transparency */
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: all 0.5s ease-in-out;
}
.single-card:hover {
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    background-color: rgba(255, 255, 255, 0.3); /* Increase transparency */
}
/* Animate h2, p, and a */
.single-card h2,
.single-card p,
.single-card a {
    position: relative;
    transition: all 0.5s ease-in-out;
}
/* Initial states */
.single-card h2 {
    bottom: -50px;
}
.single-card p {
    bottom: -500px;
}
.single-card a {
    top: 500px;
}
/* On hover, reset to normal */
.single-card:hover h2,
.single-card:hover p {
    bottom: 0 !important;
}
.single-card:hover a {
    top: 0 !important;
}
/* Parent background image transition */
#main-parent {
    transition: background 0.4s ease-in-out;
    background-size: cover;
    background-position: center;
}
/* Sticky website header code */
/* Sticky website header background */
.webheader.elementor-sticky--effects {
  background: white !important;
  box-shadow: 0 0 30px 0 rgb(0 0 0 / 10%);
}
/* The scroll-logo is currently off. */
.scroll-logo {
  display: none;
}
/* Shut this logo off and activate the other logo after scroll */
.elementor-sticky--effects .scroll-logo {
  display: inline-block;
}
.elementor-sticky--effects .original-logo {
  display: none;
}
/* Change Text Colour and Links colour */
.elementor-sticky--effects .menutextcolours ul li a {
  color: #303030 !important;
}
.elementor-sticky--effects .premium-dropdown-icon {
  color: #3A3A3C !important;
}
/* Custom dropup and dropdown icon code in header*/
/* Default dropdown state (Hidden) */
.premium-mega-content-container {
    opacity: 0;
    transform: translateY(-10px); /* Start slightly above */
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
    visibility: hidden;
    pointer-events: none;
}
/* Fade & Slide Down Effect when Opening */
.fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible;
    pointer-events: auto;
}
/* Fade & Slide Up Effect when Closing */
.closing {
    opacity: 0 !important;
    transform: translateY(-10px) !important;
    visibility: hidden !important;
    pointer-events: none;
}
/* Prevent flickering when quickly switching dropdowns */
.disable-hover .premium-mega-content-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease;
}
/* Ads page code*/
.page-id-22772 .yellow, .page-id-24317 .yellow{
   color: #C8AD1B
}
.page-id-22772 .my-button-blue, .page-id-24317  .ads-button-blue{
   padding: 8px 20px 8px 20px;
   color: white;
   background-color:white;
   border-radius: 20px
}
.page-id-22772 .button1, .page-id-24317 .ads-button-yellow {
   padding: 10px 10px 10px 10px;
   background-color: #C8AD1B;
   border-radius: 20px
}
/* hover effect for specific pages and selected image boxes */ 
 .custom-img-box-hover img { 
  transition: transform 0.9s ease !important;
}
.custom-img-box-hover:hover img {
  transform: scale(1.04) !important;
}
/*Adding custom button on image boxes*/ 
.custom-img-box-hover .image-box-btn {
  display: inline-block !important;
  padding: 8px 35px !important;
  background-color: #3DC7D3 !important;
  color: #ffffff !important;
  font-size: 16px !important;
  border: none !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}
.custom-img-box-hover .image-box-btn:hover {
  background-color: #33b9c4 !important;
}
/* Tablet view */
@media (max-width: 1024px) {
  .custom-img-box-hover .image-box-btn {
    font-size: 15px !important;
    padding: 8px 28px !important;
  }
}
/* Mobile view */
@media (max-width: 767px) {
  .custom-img-box-hover .image-box-btn {
    font-size: 14px !important;
    padding: 6px 22px !important;
  }
}
/* text testimonial yellow underline */ 
.highlight-underline {
  text-decoration: underline;
  text-decoration-color: #FEC600;
  text-decoration-thickness: 2px;
}
/* Sports pages custom tab section design code */
/* Base button style */
.custom-tab-button {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: transparent;
  transition: background-color 0.3s ease;
  cursor: pointer;
}
/* Hover for inactive buttons only */
.custom-tab-button:hover {
  background-color: #FAFAFA;
}
/* Active button */
.custom-tab-button.active {
  background-color: #3DC7D3;
}
/* Prevent hover overriding active state */
.custom-tab-button.active:hover {
  background-color: #3DC7D3 !important;
}
/* Shared arrow base styles (desktop + mobile) */
.custom-tab-button .arrow {
  font-size: 20px;
  width: 38px;
  height: 38px;
  line-height: 35px;
  text-align: center;
  display: inline-block;
  transition: transform 0.3s ease, background-color 0.3s ease;
  color: black;
  background: transparent;
  border-radius: 50%;
}
/* Desktop styles */
@media (min-width: 1025px) {
  .tab-content-mobile {
    display: none !important;
  }
  .tab-container {
    display: block;
  }
  .tab-content-desktop {
    display: none;
  }
  .tab-content-desktop.active-tab {
    display: block;
  }
  .custom-tab-button .arrow {
    transform: rotate(45deg);
  }
  .custom-tab-button:hover .arrow {
    transform: rotate(0deg);
  }
  .custom-tab-button.active .arrow {
    background-color: white;
    transform: rotate(0deg);
  }
}
/* Mobile/Tablet styles */
@media (max-width: 1024px) {
  .custom-tab-button .elementor-button-icon {
    display: none !important;
  }
  .tab-container {
    display: none !important;
  }
  .tab-content-mobile {
    display: none;
  }
  .tab-content-mobile.active {
    display: block;
  }
  .custom-tab-button .arrow {
    transform: rotate(90deg); /* ↓ */
  }
  .custom-tab-button.active .arrow,
  .custom-tab-button:hover.active .arrow {
    transform: rotate(-90deg); /* ↑ */
    background-color: white;
  }
}
/* Tab content visibility */
.tab-content {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
}
.tab-container {
  position: relative;
  min-height: 300px;
  overflow: hidden;
}
.tab-content.active-tab {
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 1;
}
/* Sports page carousel custom styling */
/* Width differences */
.custom-carousel-wrapper.testimonial-wrapper .elementor-main-swiper { 
  width: 90% !important; 
}
.custom-carousel-wrapper.portfolio-wrapper .elementor-main-swiper { 
  width: 80% !important; 
}
/* Shared styles (apply only if testimonial-wrapper OR portfolio-wrapper exists) */
.custom-carousel-wrapper.testimonial-wrapper .elementor-main-swiper,
.custom-carousel-wrapper.portfolio-wrapper .elementor-main-swiper {
  overflow: visible;
  position: relative;
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start;
  display: flex;
}
.custom-carousel-wrapper.testimonial-wrapper .swiper-slide,
.custom-carousel-wrapper.portfolio-wrapper .swiper-slide {
  flex-shrink: 0;
  box-sizing: border-box;
}
.custom-carousel-wrapper.testimonial-wrapper .swiper-wrapper,
.custom-carousel-wrapper.portfolio-wrapper .swiper-wrapper {
  display: flex;
  transition: transform 0.3s ease;
}
/*Sports vertical timeline code*/
/* ===============================
   DESKTOP TIMELINE (Default - with vertical line)
   =============================== */
/* Timeline wrapper */
.vertical-timeline {
    position: relative;
    counter-reset: step;
    padding-left: 200px;
}
/* DESKTOP vertical lines */
.vertical-timeline.steps-3::before,
.vertical-timeline.steps-4::before,
.vertical-timeline.steps-5::before,
.vertical-timeline.steps-6::before {
    content: "";
    position: absolute;
    left: 228px;
    width: 1px;
    background: #ccc;
    z-index: 0;
}
.vertical-timeline.steps-3::before { top: 15px; left: 258px; height: 120px; }
.vertical-timeline.steps-4::before { top: 15px; left: 158px; height: 180px; }
.vertical-timeline.steps-5::before { top: 90px; height: 1210px; }
.vertical-timeline.steps-6::before { top: 15px; height: 300px; }
/* Timeline step */
.timeline-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 60px;
    position: relative;
    z-index: 1;
}
.timeline-step:last-child { margin-bottom: 0; }
/* Number */
.timeline-step-number {
    position: relative;
    width: 55px;
    flex-shrink: 0;
}
.timeline-step-number::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    top: 0;
    left: 12.5px;
    width: 30px; height: 30px;
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    font-weight: bold;
    font-size: 16px;
    color: #333;
    transition: all 0.3s ease;
}
.timeline-step:hover .timeline-step-number::before {
    background: #00bcd4; color: #fff; border-color: #00bcd4;
}
/* Clean up */
.vertical-timeline .timeline-step:last-child .timeline-step-number::after {
    display: none !important;
}
/* ===============================
   TABLET (768px - 1024px)
   =============================== */
@media screen and (max-width: 1024px) and (min-width: 768px) {
    .vertical-timeline { padding-left: 5vw !important; }

    /* Hide lines on tablet */
    .vertical-timeline.steps-3::before,
    .vertical-timeline.steps-4::before,
    .vertical-timeline.steps-5::before,
    .vertical-timeline.steps-6::before { display: none !important; }
    .timeline-step {
        margin-bottom: 60px !important;
        align-items: top !important;
        gap: 25px !important;
    }
    .timeline-step-number {
        width: 40px !important;
        margin-top: -2px !important;

    }
    .timeline-step-number::before {
        left: 0 !important;
        width: 40px; height: 40px;
        line-height: 38px;
        font-size: 18px;
        border: 2px solid #4a4a4a;
    }
    .timeline-content { font-size: 15px; line-height: 1.5; }
}
/* ===============================
   MOBILE (Below 768px)
   =============================== */
@media screen and (max-width: 767px) {
    .vertical-timeline { padding-left: 0vw !important; }
    /* Hide lines on mobile */
    .vertical-timeline.steps-3::before,
    .vertical-timeline.steps-4::before,
    .vertical-timeline.steps-5::before,
    .vertical-timeline.steps-6::before { display: none !important; }
    .timeline-step {
        margin-bottom: 60px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 60px;
    }
    .timeline-step-number {
        width: 45px !important;
    }
    .timeline-step-number::before {
        width: 40px; height: 40px;
        line-height: 37px;
        font-size: 20px;
        background: transparent;
        border: 2px solid #4A4A4A;
        color: #4A4A4A;
    }
    .timeline-content { font-size: 14px; line-height: 1.4; margin-top: 5px; }
}
/* ===============================
   EXTRA SMALL (Below 480px)
   =============================== */
@media screen and (max-width: 479px) {
    .timeline-step {
        margin-bottom: 60px !important;
                gap: 45px;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left;
    }
    .timeline-step-number {
        width: 40px !important;
        margin-bottom: 15px !important;
    }
    .timeline-step-number::before {
        font-size: 20px;
        background: transparent;
        border: 2px solid #4A4A4A;
        color: #4A4A4A;
    }
    .timeline-step:hover .timeline-step-number::before {
        background: #3DC7D3;
        color: #fff;
        border-color: #3DC7D3;
    }
    .timeline-content { font-size: 13px; line-height: 1.4; }
}
/* Resolve CLS error fro Iframes, ads, vidoe iframe */
/* ===== Responsive iframe wrapper (modern browsers) ===== */
.responsive-iframe {
  position: relative;
  width: 100%;
  /* fallback background while iframe loads */
  background: #0000; 
  overflow: hidden;
  /* prefer aspect-ratio if supported */
  aspect-ratio: 16 / 9; /* default, overridden by inline style/data-aspect if set */
}
/* iframe/video inside wrapper fill the container */
.responsive-iframe iframe,
.responsive-iframe video {
  position: absolute;
  inset: 0;           /* top:0; right:0; bottom:0; left:0 */
  width: 100%;
  height: 100%;
  border: 0;
}
/* ===== Legacy padding-top fallback for older browsers ===== */
.responsive-iframe.legacy {
  /* 16:9 -> padding-top 56.25% */
  padding-top: 56.25%;
}
.responsive-iframe.legacy iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
}
/* ===== Specific common selectors (Elementor / videos) ===== */
.elementor-widget-video .responsive-iframe,
.elementor-video .responsive-iframe {
  background: #000; /* or a light placeholder */
}
/* ===== Example ad-slot placeholder (adjust to your ad sizes) ===== */
.ad-slot {
  display: block;
  width: 100%;             /* for responsive ad, or use fixed px */
  aspect-ratio: 1 / 1.91;  /* example for 300x250 -> use 300/250 = 1.2; change as needed */
  min-height: 250px;       /* safe min height for legacy browsers */
  background: #f6f6f6;     /* placeholder color while ad loads */
  overflow: hidden;
}
.ad-slot iframe { width:100%; height:100%; }
/* ===== Optional: make sticky header non-shifting (example) ===== */
.site-header { height: 72px; } /* ensure your header has a fixed height from first paint */
/* ====== Fix CLS for Tawk.to Chat Widget === */
/* Reserve space for the collapsed Tawk.to button */
.tawk-button.tawk-button-circle.tawk-button-large {
    width: 60px !important;   /* Approx. button diameter */
    height: 60px !important;  /* Match width for circle */
    position: fixed !important;
    bottom: 40px !important;  /* Matches their inline style offset */
    left: 40px !important;    /* Matches their inline style offset */
    z-index: 9999 !important; /* Ensure visible */
}
/* Mobile adjustments */
@media (max-width: 768px) {
    .tawk-button.tawk-button-circle.tawk-button-large {
        width: 50px !important;
        height: 50px !important;
        bottom: 20px !important;
        left: 20px !important;
    }
}
/* Prevent CLS in Testimonial Slider */
.premium-testimonial-text-wrapper {
    min-height: 200px; /* adjust this value to the tallest testimonial text */
}
/* === Prevent CLS in Elementor Image Carousel Arrows === */
.elementor-image-carousel-wrapper .elementor-swiper-button,
.elementor-image-carousel-wrapper .elementor-swiper-button-prev,
.elementor-image-carousel-wrapper .elementor-swiper-button-next {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Ensures all images reserve space even without width/height attributes to Fiz CLS and image width height error*/
img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* === Swiper/Carousel Images (Elementor) === */
/* Forces them to respect container sizing */
.swiper-slide img,
.elementor-swiper-button img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}
/* === Logos, Partner Badges, etc. === */
/* Set a consistent space so they don’t jump around */
.logo-carousel img,
.partner-logo img,
.client-badge img {
  max-height: 80px;   /* adjust per design */
  width: auto;
  object-fit: contain;
  display: inline-block;
}
/* === Emojis in <img> (common in WP plugins) === */
img.emoji {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
/* Reserve space only for the logo(Fix CLS issues of header logo) */ 
.original-logo {
  width: 200px;
  height: auto;
  aspect-ratio: 200 / 60;
}
/* Remove CLS issues of elemnetor button icon */ 
.elementor-button .elementor-button-icon {
  width: 1.2em;
  height: 1.2em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.2em;
}
.elementor-button .elementor-button-icon svg,
.elementor-button .elementor-button-icon img {
  width: 100%;
  height: 100%;
  display: block;
}