/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0.0
*/

.counter-text{
	text-align:center;
}
/* Parent acts like .group */
.my-image {
    position: relative;
    overflow: hidden;
}

/* Background layer acts like the child with scale-105 */
.my-image::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-image: inherit !important; /* Take Elementor background */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transform: translate(-50%, -50%) scale(1); /* Default scale */
    transition: transform 300ms ease;     /* Same as Tailwind duration-300 */
    z-index: 1;
}

/* Equivalent to .group:hover .group-hover:scale-105 */
.my-image:hover  {-ms-transform: scale(1.01); /* IE 9 */
  -webkit-transform: scale(1.01); /* Safari 3-8 */
  transform: scale(1.01); 
}

/* Shadow on bottom */
.my-image::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 45%;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));
    z-index: 2;
}

/* Text stays on top */
.my-image > * {
    position: relative;
    z-index: 3;
}
.no-underline,
.no-underline a,
a.no-underline {
    text-decoration: none !important;
}

.no-underline:hover,
.no-underline a:hover,
a.no-underline:hover {
    text-decoration: none !important;
}
/* drop-icon animation */
.drop-icon {
    display: inline-block;
    animation: dropBounce 1s infinite ease-in-out;
}

@keyframes dropBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}


html {
    scroll-behavior: auto !important;
}


/* ===========================
   DESKTOP + TABLET (>=768px)
   =========================== */
@media (min-width: 768px) {

    /* Base Header - TOP (Transparent) */
    .men-header {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 9999;
        padding: 20px 0 !important;
        background: transparent !important;  /* transparent at top */
        transition: background 0.3s ease;
    }

    /* SCROLLED (Sticky) - Solid color */
    .men-header.mh-sticky {
        background: black !important;   /* your original color */
        padding: 20px 0 !important;     /* keep same height */
		border-bottom: 1px solid #333333;
		
    }

    /* If menu opens (tablet dropdown) → always solid */
    body.elementor-nav-menu--dropdown-active .men-header {
        background: black !important;
        position: fixed !important;
    }
}


/* ===========================
   MOBILE (<=767px)
   =========================== */
@media (max-width: 767px) {

    /* Always solid, never sticky */
    .men-header {
        position: relative !important;
        background: black !important;
        padding: 20px 0 !important;
    }

    /* Remove sticky effect on mobile completely */
    .men-header.mh-sticky {
        background: black !important;
        position: relative !important;
    }
}



/* card animation */

.s-img .card-image {
    transition: 0.4s ease;
}

.s-img:hover .card-image {
    transform: scale(1.03);
}

/* our services accordian */

    /* Layout */
    .custom-image-accordion {
        display:flex;
        width:100%;
        gap:12px;
        overflow:hidden;
        align-items:stretch;
        min-height:400px;
    }
    .custom-image-accordion .cia-item {
        flex:1;
        position:relative;
        cursor:pointer;
        display:flex;
        align-items:stretch; /* item stretch so overlay centering is consistent */
        transition: flex 350ms ease, transform 250ms ease;
        min-width:0;
        border-radius:2px;
        overflow:hidden;
    }

    /* background image */
    .custom-image-accordion .cia-bg{
        position:absolute;
        inset:0;
        background-size:cover;
        background-position:center;
        filter:brightness(.55);
        transition: transform 450ms ease, filter 350ms ease;
        will-change: transform, filter;
    }

    /* overlay with title + desc - center content so title lines up */
    .custom-image-accordion .cia-overlay{
    position:relative;
	Top:31%;	
    z-index:2;
    padding:28px;
    color:#fff;
    width:100%;
    box-sizing:border-box;
    pointer-events:none;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 50%, transparent 100%);

    /* REMOVE flex layout to stop shifting */
}

    /* Title always visible and centered (fixed position across items) */
    .custom-image-accordion .cia-title{
        margin:0;
        font-size:24px;
        font-weight:700;
        line-height:1.05;
        pointer-events:auto;
        z-index:3;
        /* prevent title from moving when container expands */
        transform: translateZ(0);
		font-family:playfair-dispaly;
    }

    /* description: hidden by default, revealed smoothly */
    .custom-image-accordion .cia-desc{
        margin-top:10px;
        font-size:15px;
        line-height:1.4;

        /* Smooth reveal using opacity + translate (no height jump) */
        opacity:0;
        transform:translateY(12px);
        transition: opacity 320ms ease, transform 320ms ease;
        pointer-events:none;
    }

    /* active/expanded state */
    .custom-image-accordion .cia-item.cia-active {
        flex:2.25; /* expanded size */
    }
    .custom-image-accordion .cia-item.cia-active .cia-bg {
        filter:brightness(.35);
        transform:scale(1.02);
    }
    .custom-image-accordion .cia-item.cia-active .cia-desc {
        opacity:1;
        transform:translateY(0);
    }

    /* keep title position visually fixed across items (helps when one expands) */
    .custom-image-accordion .cia-item .cia-overlay,
    .custom-image-accordion .cia-item .cia-title {
        transition: transform 350ms ease;
    }

    /* responsive: stack on mobile but keep title centered and visible */
    @media (max-width: 768px) {
        .custom-image-accordion {
            flex-direction:column;
            gap:10px;
            min-height:initial;
        }
        .custom-image-accordion .cia-item {
            min-height:120px;
            height:auto;
            align-items:stretch;
        }
        .custom-image-accordion .cia-item:not(.cia-active) .cia-overlay{
            padding:16px;
        }
        .custom-image-accordion .cia-item.cia-active {
            flex: none;
            min-height:220px;
        }
        .custom-image-accordion .cia-title {
            font-size:20px;
			font-family:playfair-dispaly;
        }
    }

    /* focus style for keyboard users */
    .custom-image-accordion .cia-item:focus {
        outline: 3px solid rgba(255,255,255,0.12);
        outline-offset: -3px;
    }