/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.7.1781037800
Updated: 2026-06-10 01:43:20

*/

@font-face {
    font-family: 'Clash Display';
    src: url('/wp-content/themes/hello-elementor-child/assets/fonts/ClashDisplay-Variable.woff2') format('woff2');
    font-weight: 200 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Chivo Mono';
    src: url('/wp-content/themes/hello-elementor-child/assets/fonts/ChivoMono-Variable.woff2') format('woff2');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('/wp-content/themes/hello-elementor-child/assets/fonts/BeVietnamPro-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('/wp-content/themes/hello-elementor-child/assets/fonts/BeVietnamPro-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


#hero-brands {
  position: relative;
  overflow: hidden;
}

.hero-brand-logos .swiper-wrapper{
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important; 
}

.hero-brand-logos {
  pointer-events: none;
  opacity: 0.4;
  mask-image: linear-gradient(
    to right,
    transparent 0,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 80%,
    transparent 100%
  );
}

.cool-btn a,
#footer .footer-form .elementor-button,
#contact .elementor-button {
  border-radius: 8px;
  transition: box-shadow 0.3s ease, border-radius 0.3s ease;
}

.cool-btn a:hover,
#footer .footer-form .elementor-button:hover,
#contact .elementor-button:hover {
  box-shadow: 0 0 30px rgba(227, 253, 49, 0.2),
              0 0 60px rgba(227, 253, 49, 0.08);
}

.cool-btn-wh a {
  border-radius: 8px;
  transition: box-shadow 0.3s ease, border-radius 0.3s ease;
}

.cool-btn-wh a:hover {
  color: inherit !important;
  box-shadow: 0 0 40px rgba(227, 253, 49, 0.5),
              0 0 80px rgba(227, 253, 49, 0.3);
}

#content a {
  color: #0f0f10;
  transition: color 0.6s ease;
}

#content a:hover {
  color: #E5FB3E;
}

#footer .footer-form .remove-before {
  padding: 0 !important;
}

#footer .footer-form .elementor-field-textual {
  padding: 16px !important;
}

#footer .footer-below a,
#footer .footer-inner a,
#footer .footer-form a {
  color: #b8b8b8;
  transition: color 0.6s ease;
}

#footer .footer-below a:hover,
#footer .footer-inner a:hover,
#footer .footer-form a:hover {
  color: #E5FB3E;
}

#footer .footer-inner {
  opacity: 0.6;
}

#pricing .e-n-tabs-heading .e-n-tab-title:first-child {
  border-radius: 8px 0 0 8px;
}

#pricing .e-n-tabs-heading .e-n-tab-title:last-child {
  border-radius: 0 8px 8px 0;
}

#pricing .e-n-tab-title[aria-selected="true"],
#pricing .e-n-tab-title[aria-selected="false"]:hover,
#hero-glass {
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(20px);
}

#pricing .e-n-tab-title:hover,
#pricing .e-n-tab-title[aria-selected="true"] {
  background: #e3fd31 !important;
}

.h1-highlight {
  color: #0f0f10;
  background: #ebebeb;
  padding: 0 8px;
  border-radius: 8px;
}

#blog-carous .swiper-slide {
  overflow: visible;
}

#blog-carous .elementor-loop-container {
  overflow: visible;
}

#blog-item:hover {
    z-index: 20;
}

#blog-item:hover .blog-btn a { 
    box-shadow: 0 0 30px rgba(227, 253, 49, 0.2),
              0 0 60px rgba(227, 253, 49, 0.08);
}

.servicebox {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.grid-item-testi {
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

.marq-parent {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    pointer-events: none;
}

.marquee-text,
.marquee-text-rev {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.marquee-text > *,
.marquee-text-rev > * {
    display: inline-block;
    min-width: 100%;
    max-width: none;
    will-change: transform;
}

.marquee-text > * {
    animation: scroll-marquee 70s linear infinite;
}

.marquee-text-rev > * {
    animation: scroll-marquee-rev 70s linear infinite;
}

@keyframes scroll-marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes scroll-marquee-rev {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@media (max-width: 767px) {
    #header,
    .scrolled {
        width: calc(100% - 20px) !important;
        max-width: calc(100% - 20px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@keyframes scroll-marquee-rev {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(0%); }
}


#header {
     backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#header .elementor-item.elementor-item-anchor::after,
#header .elementor-item.elementor-item-active::after {
    position: relative;
    width: 6px;
}

#header .elementor-item.elementor-item-anchor,
#header .elementor-item.elementor-item-active {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

body {
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
}

#header {
    transition: all 0.3s ease-in-out !important;
    margin: 30px auto 0 auto !important;
    border-radius: 12px !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    position: fixed !important;

    width: 100% !important;
    max-width: 1250px !important;
    box-sizing: border-box !important;

    padding-left: 0;
    padding-right: 0;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.scrolled {
    border: none !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition: opacity 0.3s ease-in-out !important;
    background-color: rgba(10, 10, 12, 0.95) !important;

    width: 100% !important;
    max-width: 1250px !important;
    box-sizing: border-box !important;

    margin: 0 auto !important;

    border-radius: 12px !important;
    padding: 10px 24px !important;

    left: 0 !important;
    right: 0 !important;

    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#mobile-header {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); 
}


#footer a {
  transition: color 0.4s ease;
}

#footer a:hover {
  color: #e3fd31;
}


.reacton, .reactonmonth, .reactprice, .reactpricemonth {
  display: none;
}
.reactoff, .reacton, .reactoffmonth, .reactonmonth {
  cursor: pointer;
  user-select: none;
}