/*
Theme Name:   SNN-BRX - Advanced Bricks Builder Child Theme
Theme URI:    https://sinanisler.com/
Description:  SNN BRX Child Theme is a purpose-built WordPress theme for Bricks Builder, designed for agencies and teams who demand speed, security, and flexibility. It offers advanced features for site management, security, advanced features, custom elements, role-based access, media and design system control, search logs, 301 redirects, 301 and 404 logs, accessibility, and enhanced editor features. Enabling the efficient delivery of scalable, secure, and highly customized WordPress solutions.
Author:       sinanisler
Author URI:   https://sinanisler.com/
Text Domain:  snn
Template:     bricks
Version: 0.258
Text Domain:  bricks
*/

.hidden{
    display: none !important;
}

/* Sticky Menu Styles */
.menu-will-stick {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%) ;
    transition: all 0.3s ease-in-out;
    position: fixed !important;
    width:100vw !important;

}

.menu-will-stick.menu-sticked {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.menu-will-stick.menu-sticked.menu-hiding {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
}

.testtsts{
    background-color: red;
}

.text-white{
    color: #ffffff;
}

/* Heading styles */
.h1, .h2, .h3, .h4, .h5, .h6{
    font-weight: 500 !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
    color: var(--color-primary);
}

.h1{
    font-size: 48px !important;
}

.h2{
    font-size: 40px !important;
}

.h3{
    font-size: 32px !important;
}

.h4{
    font-size: 24px !important;
}

.h5{
    font-size: 20px !important;
}

.h6{
    font-size: 16px !important;
}

/* Text styles */
.text-primary{
    color: var(--color-primary);
}

.text-secondary{
    color: var(--color-secondary);
}

.text-normal{
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--color-text);
}

.text-lead{
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--color-text);
}

.text-small{
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--color-text);
}

.text-bold{
    font-weight: 700 !important;
}

.text-italic{
    font-style: italic !important;
}

.text-center{
    text-align: center !important;
}

.text-left{
    text-align: left !important;
}

.text-right{
    text-align: right !important;
}

.text-justify{
    text-align: justify !important;
}

/* Additional CSS Classes */
.serif {
    font-family: serif !important;
}

.ami-seperator-title {
    font-style: italic !important;
    color: #002453 !important;
}

.mega-menu {
    visibility: collapse !important;
}

.brxe-close {
    /* Add specific styles as needed */
}

.mega-menu2 {
    visibility: collapse !important;
}

.ami-menu-animated {
    justify-content: center !important;
}

.hide {
    display: none !important;
}

.top-menu {
    /* Add specific styles as needed */
}

.hero {
    /* Add specific styles as needed */
}

.brxe-heading {
    /* Add specific styles as needed */
}

.demo-a {
    /* Add specific styles as needed */
}

.texxt-lead {
    /* Add specific styles as needed */
}

/* Animation de trait au survol pour le bouton TerDeMaât */
#brxe-tbfhzy {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

#brxe-tbfhzy::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

#brxe-tbfhzy:hover::before {
    left: 100%;
}

/* Horizontal Scroll Cards Animation */
.horizontal-scroll-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

.horizontal-scroll-track {
    display: flex;
    gap: 20px;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.horizontal-scroll-card {
    flex: 0 0 450px;
    min-width: 450px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.horizontal-scroll-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.horizontal-scroll-card .brxe-suiwze {
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.horizontal-scroll-card .brxe-mfkyeu {
    margin-bottom: 20px;
}

.horizontal-scroll-card .Texte-chiffre {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-primary, #002453);
    line-height: 1;
    margin-bottom: 10px;
}

.horizontal-scroll-card .Title-section {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text, #333);
    margin: 0 0 15px 0;
    line-height: 1.3;
}

.horizontal-scroll-card .brxe-text-basic {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text, #666);
    flex-grow: 1;
}

/* Navigation Buttons */
.horizontal-scroll-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.horizontal-scroll-nav:hover {
    background: var(--color-primary, #002453);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.horizontal-scroll-nav.prev {
    left: 20px;
}

.horizontal-scroll-nav.next {
    right: 20px;
}

.horizontal-scroll-nav svg {
    width: 20px;
    height: 20px;
}

/* Scroll Indicators */
.horizontal-scroll-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

.horizontal-scroll-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.horizontal-scroll-indicator.active {
    background: var(--color-primary, #002453);
    transform: scale(1.2);
}

/* Responsive Design */
@media (max-width: 768px) {
    .horizontal-scroll-card {
        flex: 0 0 350px;
        min-width: 350px;
    }
    
    .horizontal-scroll-nav {
        width: 40px;
        height: 40px;
    }
    
    .horizontal-scroll-nav.prev {
        left: 10px;
    }
    
    .horizontal-scroll-nav.next {
        right: 10px;
    }
    
    .horizontal-scroll-card .brxe-suiwze {
        padding: 20px;
    }
    
    .horizontal-scroll-card .Texte-chiffre {
        font-size: 36px;
    }
    
    .horizontal-scroll-card .Title-section {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .horizontal-scroll-card {
        flex: 0 0 280px;
        min-width: 280px;
    }
    
    .horizontal-scroll-card .brxe-suiwze {
        padding: 15px;
    }
    
    .horizontal-scroll-card .Texte-chiffre {
        font-size: 32px;
    }
    
    .horizontal-scroll-card .Title-section {
        font-size: 18px;
    }
}


/* Animation alternative avec un trait plus visible */
#brxe-tbfhzy::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    transition: left 0.5s ease;
    z-index: 1;
}

#brxe-tbfhzy:hover::after {
    left: 0;
}

/* Classe pour l'effet de zoom sur les images au survol */
.image-zoom-hover {
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.image-zoom-hover img {
    transition: transform 0.3s ease;
    width: 100%;
    height: auto;
    display: block;
}

.image-zoom-hover:hover img {
    transform: scale(1.1);
}

/* Variante avec un zoom plus subtil */
.image-zoom-subtle {
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.image-zoom-subtle img {
    transition: transform 0.3s ease;
    width: 100%;
    height: auto;
    display: block;
}

.image-zoom-subtle:hover img {
    transform: scale(1.05);
}

/* Variante avec un zoom plus prononcé */
.image-zoom-strong {
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.image-zoom-strong img {
    transition: transform 0.3s ease;
    width: 100%;
    height: auto;
    display: block;
}

.image-zoom-strong:hover img {
    transform: scale(1.2);
}

/* Variante avec effet de zoom et ombre */
.image-zoom-shadow {
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 8px;
}

.image-zoom-shadow img {
    transition: all 0.3s ease;
    width: 100%;
    height: auto;
    display: block;
}

.image-zoom-shadow:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.image-zoom-shadow:hover img {
    transform: scale(1.1);
}

/* Version pour les images directes (sans conteneur) */
img.image-zoom-hover {
    transition: transform 0.3s ease;
    cursor: pointer;
}

img.image-zoom-hover:hover {
    transform: scale(1.1);
}

img.image-zoom-subtle {
    transition: transform 0.3s ease;
    cursor: pointer;
}

img.image-zoom-subtle:hover {
    transform: scale(1.05);
}

img.image-zoom-strong {
    transition: transform 0.3s ease;
    cursor: pointer;
}

img.image-zoom-strong:hover {
    transform: scale(1.2);
}

/* Version avec ombre pour images directes */
img.image-zoom-shadow {
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 8px;
}

img.image-zoom-shadow:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Scroll Text Fill Animation Styles */
.scroll-text-fill {
    font-family: serif;
    line-height: 1.4;
    overflow: hidden;
}

.scroll-text-fill span {
    display: inline-block;
    transition: all 0.3s ease;
    position: relative;
}

/* Alternative method using mask for better browser support */
.scroll-text-fill.mask-method span {
    background: linear-gradient(to right, var(--color-black) 0%, var(--color-black) 0%, var(--color-background) 0%, var(--color-background) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    background-size: 0% 100%;
    background-repeat: no-repeat;
    color: var(--color-background);
}

/* Smooth transition for character appearance */
.scroll-text-fill span.filled {
    color: var(--color-black) !important;
    background: none !important;
}

/* Ensure proper spacing for non-breaking spaces */
.scroll-text-fill span.space {
    width: 0.25em;
}