/* Main Navigation */

.site-navigation ul.menu li:first-child {
    margin-left: 2rem;
}

.site-logo,
.site-navigation ul.menu {
    padding: 0.5rem 2rem;
}

@media (min-width: 768px) {

    body:not(.elementor-editor-active) .site-header.scrolled .site-logo {
        width: 200px;
        border-radius: 1rem 0 0 1rem;
        padding: .5rem 2rem;
    }

    body:not(.elementor-editor-active) .site-header.scrolled .site-navigation ul.menu {
        border-radius: 0 1rem 1rem 0;
        padding: .5rem 2rem .5rem 0;
    }

    body:not(.elementor-editor-active) .site-header.scrolled .site-navigation ul.menu li {
        border-color: transparent;

    }
}

/* Navigation Rise Button Effect */
.site-navigation ul.menu li.arrax-button-rise {
    position: relative;
    overflow: hidden;
}

.site-navigation ul.menu li.arrax-button-rise a {
    position: relative;
    z-index: 1;
    transition: color 0.4s ease-in-out;
}

.site-navigation ul.menu li.arrax-button-rise .rise-circle {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
}

.site-navigation ul.menu li.arrax-button-rise:hover .rise-circle {
    width: 225%;
    height: 300px;
}

.site-navigation ul.menu li.arrax-button-rise:hover a {
   
}

/* Add this if you need to handle mobile menu differently */
@media (max-width: 767px) {
    .site-navigation ul.menu li.arrax-button-rise {
        overflow: visible;
    }
    
    .site-navigation ul.menu li.arrax-button-rise:before {
        display: none;
    }
}

span.accent-color,
span.primary-color,
span.secondary-color,
span.text-gradient,
span.accent-gradient {
    text-shadow: none;
    letter-spacing: calc(var(--e-global-typography-7bbe756-letter-spacing) - .2rem);
}


span.accent-color {
    color: var(--e-global-color-accent);
}

span.primary-color {
    color: var(--e-global-color-primary);
}

span.secondary-color {
    color: var(--e-global-color-secondary);
}

span.text-color {
    color: var(--e-global-color-text);
}

span.text-gradient,
span.accent-gradient,
span.primary-gradient,
span.secondary-gradient {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}



span.text-gradient {
    background-image: linear-gradient(168deg, #ffffff, var(--e-global-color-text));
}

span.accent-gradient {
    background-image: linear-gradient(168deg, #ffffff, var(--e-global-color-accent));
}

span.primary-gradient {
    background-image: linear-gradient(168deg, #ffffff, var(--e-global-color-primary));
}

span.secondary-gradient {
    background-image: linear-gradient(168deg, #ffffff, var(--e-global-color-secondary));
}

span.text-before {
    vertical-align: super;
    position: absolute;
    font-size: 6rem;
    font-family: "Luxurious Script", sans-serif;
    text-shadow: none;
    color: var(--e-global-color-text);
    letter-spacing: -.02rem;
    font-weight: normal;
    word-spacing: -.1rem;
}

span.text-after {
    vertical-align: bottom;
    font-size: 6rem;
    font-family: "Luxurious Script", sans-serif;
    text-shadow: none;
    color: var(--e-global-color-text);
    letter-spacing: -.02rem;
    font-weight: normal;
    word-spacing: -.1rem;
}


/**/



h1 {
  font-size: clamp(4rem, -1rem + 16vw, 8rem);
}


#arrax {
    grid-template-columns: 1fr min(100% - 2rem, 90rem) 1fr;
}

/* Base grainy effect styles */
body.arrax-grainy-effect:after {
    position: fixed;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 100%;
    z-index: 3023023023020;
    pointer-events: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

/* Default grainy effect */
body.arrax-grainy-effect:not([data-custom-svg="true"]):after {
    filter: url(#grainy-effect);
    opacity: 0.2;
}

/* Hide SVG filter when using custom SVG */
body.arrax-grainy-effect[data-custom-svg="true"] .arrax-grainy {
    display: none !important;
}


/* Animations */

:is(body.elementor-editor-active) .arrax-flow > div, :is(body.elementor-editor-preview) .arrax-flow > div,
:is(body.elementor-editor-active) .arrax-flowRight > div, :is(body.elementor-editor-preview) .arrax-flowRight > div,
:is(body.elementor-editor-active) .arrax-flowLeft > div, :is(body.elementor-editor-preview) .arrax-flowLeft > div
 {
	opacity: 1;
  }
/* .arrax-flow, .arrax-flowRight, .arrax-flowLeft, */
.arrax-flow > div, .arrax-flowRight > div, .arrax-flowLeft > div {
  opacity: 0;
}


/* Heading Animation Styles */
.split-chars,
.split-words,
.split-lines {
    opacity: 0;
    display: inline-block;
}

.line-animation .split-lines {
    display: block;
    overflow: hidden;
}

.word-animation .split-words,
.letter-animation .split-chars {
    display: inline-block;
    will-change: transform;
}

/* Ensure proper height calculations */
.split-text {
    visibility: hidden;
}

.split-text.initialized {
    visibility: visible;
}

/* Fix for text wrapping */
.elementor-heading-title {
    width: 100%;
}

/* Prevent FOUC */
.elementor-heading-title[class*="-animation"] {
    opacity: 0;
}

.elementor-heading-title[class*="-animation"].initialized {
    opacity: 1;
}

/* Highlight Effect Styles */
/* .highlight-animation .elementor-heading-title .line strong {
    color: black;
} */

/* .highlight-animation .elementor-heading-title .line {
    color: transparent;
    --line-width: 100%;
    position: relative;
    background-color: grey;
    background-image: linear-gradient(
        90deg,
        hsla(0, 0%, 100%, 1),
        hsla(0, 0%, 100%, 1) var(--line-width),
        hsla(0, 0%, 100%, 0) var(--line-width)
    );
    -webkit-background-clip: text;
    background-clip: text;
} */

/* Make highlight effect work in Firefox */
/* @-moz-document url-prefix() {
    .linetext {
        -webkit-text-fill-color: transparent;
    }
} */

/* Highlight Animation Styles */

.highlight-animation .elementor-heading-title.split-text {
	visibility: visible;
}
.highlight-animation .elementor-heading-title .highlight-line {
    color: transparent;
    --line-width: 100%;
    position: relative;
    background-color: var(--highlight-background-color, grey);
    background-image: linear-gradient(
        90deg,
        var(--highlight-font-color, black),
        var(--highlight-font-color, black) var(--line-width),
        transparent var(--line-width)
    );
    -webkit-background-clip: text;
    background-clip: text;
}

.highlight-animation .elementor-heading-title .highlight-line strong {
    color: var(--highlight-font-color, black);
}

/* Firefox Fix */
@-moz-document url-prefix() {
    .highlight-animation .elementor-heading-title .highlight-line {
        -webkit-text-fill-color: transparent;
    }
}

/* Arrax Button Styles */
/* Removed ripple effect styles */

/* Common button styles */
.arrax-button-wrapper .elementor-button {
    border-style: solid;
    transition: border-color 0.3s ease;
}

/* Swipe Effect */
.arrax-button-wrapper.arrax-button-swipe .elementor-button {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: transparent;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.arrax-button-wrapper.arrax-button-swipe .elementor-button:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--arrax-button-hover-background, currentColor);
    transform: translateX(-101%);
    transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.arrax-button-wrapper.arrax-button-swipe .elementor-button:hover:before {
    transform: translateX(0);
}

.arrax-button-wrapper.arrax-button-swipe .elementor-button .elementor-button-text,
.arrax-button-wrapper.arrax-button-swipe .elementor-button .elementor-button-icon {
    transition: color 0.5s cubic-bezier(0.65, 0, 0.35, 1);
    /* transition-delay: 0.1s; */
    color: inherit;
}

.arrax-button-wrapper.arrax-button-swipe .elementor-button:hover {
    background: transparent;
}

.arrax-button-wrapper.arrax-button-swipe .elementor-button:hover .elementor-button-text,
.arrax-button-wrapper.arrax-button-swipe .elementor-button:hover .elementor-button-icon {
    color: var(--arrax-button-hover-color, #fff);
}

.arrax-button-wrapper.arrax-button-swipe .elementor-button-content-wrapper {
    position: relative;
    z-index: 1;
}

/* Rise Effect */
.arrax-button-wrapper.arrax-button-rise .elementor-button {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: transparent;
    transition: color 0.5s ease-in-out, border-color 0.5s ease-in-out;
}

.arrax-button-wrapper.arrax-button-rise .elementor-button .rise-circle {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
}

.arrax-button-wrapper.arrax-button-rise .elementor-button:hover {
    background: transparent;
}

.arrax-button-wrapper.arrax-button-rise .elementor-button:hover .rise-circle {
    width: 225%;
    height: 300px;
}

.arrax-button-wrapper.arrax-button-rise .elementor-button-content-wrapper {
    position: relative;
    z-index: 1;
}

/* Diagonal Swipe Effect */
.arrax-button-wrapper.arrax-button-diagonal .elementor-button {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: transparent;
    transition: color 0.3s ease-out, border-color 0.3s ease-out;
}

.arrax-button-wrapper.arrax-button-diagonal .elementor-button:before {
    content: "";
    position: absolute;
    top: 0;
    right: -50px;
    bottom: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-bottom: 100px solid var(--arrax-button-hover-background, currentColor);
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: -1;
}

.arrax-button-wrapper.arrax-button-diagonal .elementor-button:hover {
    background: transparent;
}

.arrax-button-wrapper.arrax-button-diagonal .elementor-button:hover:before {
    transform: translateX(0);
}

.arrax-button-wrapper.arrax-button-diagonal .elementor-button-content-wrapper {
    position: relative;
    z-index: 1;
}

/* Backdrop Filter Effect */
.arrax-button-wrapper.arrax-button-backdrop-filter .elementor-button {
    -webkit-backdrop-filter: 
        blur(var(--arrax-button-blur, 5px))
        brightness(var(--arrax-button-brightness, 100%))
        saturate(var(--arrax-button-saturate, 100%));
    backdrop-filter: 
        blur(var(--arrax-button-blur, 5px))
        brightness(var(--arrax-button-brightness, 100%))
        saturate(var(--arrax-button-saturate, 100%));
}

.arrax-button-wrapper.arrax-button-backdrop-filter .elementor-button:hover {
    -webkit-backdrop-filter: 
        blur(calc(var(--arrax-button-blur, 5px) * 1.2))
        brightness(calc(var(--arrax-button-brightness, 100%) * 1.1))
        saturate(calc(var(--arrax-button-saturate, 100%) * 1.1));
    backdrop-filter: 
        blur(calc(var(--arrax-button-blur, 5px) * 1.2))
        brightness(calc(var(--arrax-button-brightness, 100%) * 1.1))
        saturate(calc(var(--arrax-button-saturate, 100%) * 1.1));
}



/* Image sizing based on ratio */

/* Square */
.ratio-1-1 img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    max-width: 100%;
}

/* Landscape Orientation */
.ratio-2-1 img {
    aspect-ratio: 2 / 1;
    object-fit: cover;
    max-width: 100%;
}

.ratio-3-2 img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
    max-width: 100%;
}

.ratio-4-3 img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    max-width: 100%;
}

.ratio-5-4 img {
    aspect-ratio: 5 / 4;
    object-fit: cover;
    max-width: 100%;
}

.ratio-16-9 img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    max-width: 100%;
}

.ratio-21-9 img {
    aspect-ratio: 21 / 9;
    object-fit: cover;
    max-width: 100%;
}

.ratio-1-91-1 img {
    aspect-ratio: 1.91 / 1;
    /* FB social share */
    object-fit: cover;
    max-width: 100%;
}

/* Portrait Orientation */
.ratio-1-2 img {
    aspect-ratio: 1 / 2;
    object-fit: cover;
    max-width: 100%;
}

.ratio-2-3 img {
    aspect-ratio: 2 / 3;
    object-fit: cover;
    max-width: 100%;
}

.ratio-3-4 img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    max-width: 100%;
}

.ratio-4-5 img {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    max-width: 100%;
}

.ratio-9-16 img {
    aspect-ratio: 9 / 16;
    object-fit: cover;
    max-width: 100%;
}

.ratio-9-21 img {
    aspect-ratio: 9 / 21;
    object-fit: cover;
    max-width: 100%;
}



/* Media Queries */
@media screen and (min-width:992px) {
	
} 

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


}

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

}

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


}