/*
 Theme Name:   formexa Wedding
 Theme URI:    https://wedding.formexastudio.com/
 Description:  A custom child theme for Hello Elementor tailored for formexa Wedding.
 Author:       Your Name
 Author URI:   https://wedding.formexastudio.com/
 Template:     hello-elementor
 Version:      1.0.0
 Text Domain:  formexa-wedding
*/
/* Custom CSS for formexa Wedding goes below this line */
.elementor-element-0917581:hover {
	z-index: 999;
}
.col_hover:hover {
    z-index: 12;
}
.elementor-element-da28714:hover{
	position: relative !important;
	z-index: 2 !important;
}
.elementor-element-b833be6:hover {
	z-index: 999;
}
.elementor-element-ec2012f:hover{
	position: relative !important;
	z-index: 2 !important;
}
@media (max-width: 767px) {
    /* First image */
    .elementor-element-f2171dd {
        position: relative !important;
        z-index: 1 !important;
    }
    /* Second image */
    .elementor-element-6efcce9 {
        position: relative !important;
        z-index: 2 !important;
    }
    /* Second image hover */
    .elementor-element-6efcce9:hover {
        position: relative !important;
        z-index: 9999 !important;
    }
}
/* .elementor-element-b833be6:hover {
	z-index: 999;
}
.elementor-element-ec2012f:hover{
	position: relative !important;
	z-index: 2 !important;
} */
html,
body {
    overflow-x: hidden !important;
}
/* @media (max-width: 1024px) {
    .elementor {
        max-width: 100%;
        overflow-x: hidden;
    }
} */
/* ===============================
   Animated Gradient Hover Effect
================================ */
.elementor-button{
    position: relative;
    overflow: hidden;
    background: rgb(12, 77, 83); /* Normal color */
    color: #fff !important;
    transition: all .35s ease;
    z-index: 1;
}
/* Animated Gradient Overlay */
.elementor-button::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        270deg,
        transparent 0%,
        rgba(255,255,255,.10) 15%,
        rgba(255,255,255,.25) 30%,
        rgb(18,108,116) 55%,
        rgb(12,77,83) 80%,
        transparent 100%
    );
    background-size: 250% 100%;
    background-position: right center;
    opacity: 0;
    transition:
        background-position .8s ease,
        opacity .35s ease;
    z-index: -1;
}
/* Hover */
.elementor-button:hover::before{
    opacity: 1;
    background-position: left center;
}
/* Content */
.elementor-button-content-wrapper{
    display:flex;
    align-items:center;
    gap:0;
    position:relative;
    z-index:2;
    transition:gap .3s ease;
}
.elementor-button-text{
    transition:transform .3s ease;
}
/* Chevron */
.elementor-button-content-wrapper::after{
    content:"›";
    width:0;
    opacity:0;
    overflow:hidden;
    transform:translateX(-8px);
    transition:all .3s ease;
    font-size:20px;
    font-weight:600;
}
/* Hover Text */
.elementor-button:hover .elementor-button-text{
    transform:translateX(-6px);
}
.elementor-button:hover .elementor-button-content-wrapper{
    gap:10px;
}
.elementor-button:hover .elementor-button-content-wrapper::after{
    width:18px;
    opacity:1;
    transform:translateX(0);
}
.sub-menu.elementor-nav-menu--dropdown.sm-nowrap { margin-left: 0px !important; margin-top: 0px !important; }
a.elementor-sub-item {
    text-align: center !important;
    display: block !important;
}
@media (max-width: 767px) {
    /* Main menu - one column */
    .e-n-menu-wrapper > .e-n-menu-heading {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }
    .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    /* Dropdown/child menu stays under its parent */
    .e-n-menu-wrapper > .e-n-menu-heading > .e-n-menu-item > .e-n-menu-content {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0 !important;
    }
    /* Services child menu */
    .e-n-menu-content .e-n-menu-heading {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        align-items: center !important;
    }
    .e-n-menu-content .e-n-menu-item {
        width: 100% !important;
    }
}
/**********/
.scrolling-laptop {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
}
/* Laptop frame */
.scrolling-laptop .laptop-frame {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}
/* Exact laptop screen area */
.scrolling-laptop .laptop-screen {
    position: absolute;
    z-index: 3;
    /* Adjusted for your supplied laptop frame */
    top: 9.5%;
    left: 13.5%;
    width: 73%;
    height: 80.5%;
    overflow: hidden;
    background: #ffffff;
    border-radius: 4px;
}
/* Full website screenshot */
.scrolling-laptop .laptop-screen img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center top;
    animation: portfolio-scroll 18s ease-in-out infinite alternate;
    will-change: object-position;
}
/* Scroll from top to bottom */
@keyframes portfolio-scroll {
    0%,
    8% {
        object-position: center top;
    }
    92%,
    100% {
        object-position: center bottom;
    }
}
/* Pause scrolling when hovered */
.scrolling-laptop:hover .laptop-screen img {
    animation-play-state: paused;
}
/* Mobile adjustments */
@media (max-width: 767px) {
    .scrolling-laptop .laptop-screen img {
        animation-duration: 14s;
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .scrolling-laptop .laptop-screen img {
        animation: none;
        object-position: center top;
    }
}
