/********** Template CSS **********/
:root {
    --primary: #D81324;
    --secondary: #0B2154;
    --light: #F2F2F2;
    --dark: #111111;
}

.fw-medium {
    font-weight: 600 !important;
}

html, body {
    margin: 0;
    padding: 0;

    overflow-x: hidden !important;


    overflow-y: scroll;
    scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}


.back-to-top {
    position: fixed!important;
    display: none;
    right: 45px;
    bottom: 50px;
    z-index: 999999;
}

/*** Admin Panel btn ***/
.btn-center {
    display: flex!important;
    align-items: center!important;
    justify-content: center!important;
    gap: 6px;
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 500;
    text-transform: uppercase;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 2px;
}

/*  */
.img-fluid {
    width: 100%;           /* same as w-100 */
    height: 350px;         /* your fixed height */
    object-fit: cover;     /* crop image properly */
    border-radius: 8px;    /* same as rounded */
    margin-bottom: 15px;   /* same as mb-3 */
    display: block;
}


/*** Navbar ***/
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar-light .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: #FFFFFF;
    font-size: 15px;
    text-transform: uppercase;
    outline: none;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

@media (max-width: 991.98px) {
    .navbar-light .navbar-nav .nav-link  {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar-light .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

.navbar-light .navbar-brand,
.navbar-light a.btn {
    height: 75px;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--dark);
    font-weight: 500;
}

.navbar-light.sticky-top {
    top: -100px;
    transition: .5s;
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        border: none;
        margin-top: 0;

        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu {
        top: 100%;
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}

/*** Countdown ****/
.plus::after {
    content: "+";
}
.percent::after {
    content: "%";
}
.slash7::after {
    content: "/7";
}


/*** Header ***/
/* Floating Navbar Container */
         /* Floating Navbar Container */
        /* Floating Navbar Container */
        .navbar-custom {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(12px);
            border-radius: 50px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.04), 0px 1px 2px rgba(0, 0, 0, 0.06);
            padding: 10px 32px;
            position: fixed;
            top: 40px;
            left: 10px;
            right: 10px;
            z-index: 1000;
        }



        /* Aceternity-style Dropdown Animation */
        .dropdown-container {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            padding-top: 20px;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            /* Start slightly lower and smaller */
            transform: translateX(-50%) translateY(10px) scale(0.95);
            transition:
                opacity 0.2s ease-out,
                transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            z-index: 999;
        }

        /* Active State (triggered by JS) */
        .dropdown-container.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0) scale(1);
        }

        /* Inner Dropdown Card */
        .dropdown-card {
            background-color: #ffffff;
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 1.25rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0,0,0,0.02);
            overflow: hidden;
            padding: 1.25rem;
        }

        /* Mega Menu Grid Card */
        .mega-card {
            display: flex;
            gap: 12px;
            text-decoration: none;
            color: inherit;
            transition: background 0.2s;
            padding: 10px;
            border-radius: 12px;
        }
        .mega-card:hover {
            background: rgba(0, 0, 0, 0.04);
        }
        .mega-title {
            font-weight: 700;
            font-size: 1rem;
            color: #000000;
            margin-bottom: 2px;
        }
        .mega-desc {
            font-size: 0.75rem;
            color: #737373;
            line-height: 1.3;
            max-width: 140px;
        }

        /* Compact Contact Grid Styles */
        .contact-img {
            width: 80px;
            height: 50px;
            object-fit: cover;
            border-radius: 6px;
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
.carousel-caption {
    top: 0;
    left: 0;
    right: 0;
    /* bottom: 0; */
    background: rgba(0, 0, 0, 0.185);
    z-index: 1;
}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

/* header icons */
.icon-wrapper {
    display: flex !important;
    gap: 30px !important;
}

.nav-icon-btn i {
    font-size: 25px !important;
    gap: 20px!important;
}

.nav-icon-btn {
    width: 30px !important;
    height: 30px !important;
    display: flex;
    gap: 20px!important;
    justify-content: center;
    align-items: center;
}

.icon-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: red;
    color: #fff;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 50%;
    font-weight: bold;
    line-height: 1;
}


@media (max-width: 768px) {
    #header-carousel .carousel-item {
        position: relative;
        min-height: 450px;
    }

    #header-carousel .carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.page-header {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.page-header-inner {
    background: rgba(0, 0, 0, .7);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--light);
}


/*** Facts ***/
.fact {
    background: linear-gradient(rgba(0, 0, 0, 0.263), rgba(0, 0, 0, .7)), url(../img/factcount.webp);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 250px;
}


/*** Service ***/
.service .nav .nav-link {
    background: var(--light);
    transition: .5s;
}

.service .nav .nav-link.active {
    background: var(--primary);
}

.service .nav .nav-link.active h4 {
    color: #FFFFFF !important;
}


/*** Booking ***/
.booking {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url(../img/carousel-bg-2.jpg) center center no-repeat;
    background-size: cover;
}

.bootstrap-datetimepicker-widget.bottom {
    top: auto !important;
}

.bootstrap-datetimepicker-widget .table * {
    border-bottom-width: 0px;
}

.bootstrap-datetimepicker-widget .table th {
    font-weight: 500;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 10px;
    border-radius: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--primary);
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--primary);
}


/*** Team ***/
.team-item .team-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    transform: scale(0);
    transition: .5s;
}

.team-item:hover .team-overlay {
    transform: scale(1);
}

.team-item .team-overlay .btn {
    color: var(--primary);
    background: #FFFFFF;
}

.team-item .team-overlay .btn:hover {
    color: #FFFFFF;
    background: var(--secondary)
}


/*** Testimonial ***/
.testimonial-carousel .owl-item .testimonial-text,
.testimonial-carousel .owl-item.center .testimonial-text * {
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-text {
    background: var(--primary) !important;
}

.testimonial-carousel .owl-item.center .testimonial-text * {
    color: #FFFFFF !important;
}

.testimonial-carousel .owl-dots {
    margin-top: 24px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    border: 1px solid #CCCCCC;
    transition: .5s;
}

.testimonial-carousel .owl-dot.active {
    background: var(--primary);
    border-color: var(--primary);
}


/* Partners Section Black Strip */
.partners-dark-strip {
    background: #0b0b0b;
    padding: 30px 0;
    margin-top: 40px;
}

.partners-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}

.partners-list img {
    height: 45px;
    width: auto;
    /* filter: brightness(0) invert(1);  */
    opacity: 0.85;
    transition: 0.3s ease;
}

.partners-list img:hover {
    opacity: 1;
    transform: scale(1.07);
}


/*** Footer ***/
.footer {
    background: linear-gradient(rgba(0, 0, 0, .9), rgba(0, 0, 0, .9)), url(../img/factcount.webp) center center no-repeat;
    background-size: cover;
}

.footer .btn.btn-social {
    margin-right: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    border: 1px solid #FFFFFF;
    border-radius: 35px;
    transition: .3s;
}

.footer .btn.btn-social:hover {
    color: var(--primary);
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .footer-menu a {
    margin-right: 15px;
    padding-right: 15px;
    border-right: 1px solid rgba(255, 255, 255, .3);
}

.footer .footer-menu a:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

/* Force swap for all Google Fonts */
@font-face {
    font-family: 'Barlow';
    font-display: swap !important;
}

@font-face {
    font-family: 'Ubuntu';
    font-display: swap !important;
}

/*Carousel animated*/

:root {
            --light: #f4f4f4;
            --bg-gradient: linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.6) 50%,
                rgba(0, 0, 0, 0.1) 100%
            );
        }

        /** {*/
        /*    box-sizing: border-box;*/
        /*    user-select: none;*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*}*/

        /*body {*/
        /*    margin: 0;*/
        /*    padding: 0;*/
        /*    height: 100vh;*/
        /*    color: var(--light);*/
        /*    background-color: #111;*/
        /*    text-transform: uppercase;*/
        /*    font-family: 'Oswald', sans-serif;*/
            /*overflow: hidden; */
        /*}*/

        a {
            color: var(--light);
            text-decoration: none;
            transition: opacity 0.3s;
        }

        a:hover {
            opacity: 0.7;
        }

        h1 {
            font-size: clamp(1rem, 6vw, 10rem);
            font-weight: 600;
            line-height: 1.2;
            text-align: center;


            text-transform: none;

            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            pointer-events: none;
        }


        /* Helper for the custom text splitter */
        .char-wrap {
            display: inline-block;
            overflow: hidden;
            vertical-align: top;
            position: relative; /* Ensure z-index works locally if needed */
        }

        .char {
            display: inline-block;
            will-change: transform;
        }

        /*header {*/
        /*    position: fixed;*/
        /*    display: flex;*/
        /*    align-items: center;*/
        /*    justify-content: space-between;*/
        /*    padding: 0 5%;*/
        /*    width: 100%;*/
        /*    z-index: 3;*/
        /*    height: 7em;*/
        /*    font-family: sans-serif;*/
        /*    font-size: clamp(0.66rem, 2vw, 1rem);*/
        /*    letter-spacing: 0.2em;*/
        /*}*/

       #gsap-hero {
        position: relative;
        height: 100vh;
        overflow: hidden;
        }
        #gsap-hero section {
        position: absolute;
        width: 100%;
        height: 100%;
        }


        section .outer,
        section .inner {
            width: 100%;
            height: 100%;
            overflow-y: hidden;
        }

        section .bg {
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            height: 100%;
            width: 100%;
            top: 0;
            background-size: cover;
            background-position: center;
        }

        /* Ensure h2 sits above the background image */
        section .bg h2 {
            z-index: 2;
            position: relative;
        }

        /* Specific Backgrounds */
        .first .bg {
            background-image: var(--bg-gradient), url("https://carmodify.pathalkudwamasjid.com/public/img/carousel2-bg-2.jpg");
        }

        .second .bg {
            background-image: var(--bg-gradient), url("https://carmodify.pathalkudwamasjid.com/public/img/carousel2-bg-3.jpg");
        }

        .third .bg {
            background-image: var(--bg-gradient), url("https://carmodify.pathalkudwamasjid.com/public/img/carousel4.jpg");
        }

        .fourth .bg {
            background-image: var(--bg-gradient), url("https://carmodify.pathalkudwamasjid.com/public/img/carousel5.jpg");
        }

        .fifth .bg {
            background-image: var(--bg-gradient), url("https://carmodify.pathalkudwamasjid.com/public/img/carousel3-bg-3.jpg");
            background-position: 50% 45%;
        }


/* RESPONSIVE FOR MOBILE SCREENS */
@media (max-width: 768px) {

    #gsap-hero {
        height: 100vh;
    }

    /* Reduce padding inside sections */
    #gsap-hero section .bg {
        padding: 0 15px;
    }

    /* Perfect mobile heading size */
    .section-heading {
        font-size: clamp(1.2rem, 7vw, 2.3rem);
        line-height: 1.3;
        padding: 0 10px;
        text-align: center;
        word-break: break-word;
    }

    /* Ensure inner containers fit comfortably */
    #gsap-hero .outer,
    #gsap-hero .inner {
        height: 100%;
    }

    /* Background images optimized for mobile */
    #gsap-hero .bg {
        background-position: center;
        background-size: cover;
    }
}

/* EXTRA SMALL DEVICES */
@media (max-width: 480px) {

    .section-heading {
        font-size: clamp(1rem, 8vw, 2rem);
        padding: 0 12px;
    }
}
/*carousel animated end*/

 /* --- LOADER CSS START --- */
        #shoezy-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: #ffffff;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.8s ease-out, visibility 0.8s;
        }

        #shoezy-loader.hidden {
            opacity: 0;
            visibility: hidden;
        }

        .autograph {
            width: 600px;
            max-width: 90%;
            height: auto;
        }

        .autograph__path {
            opacity: 0;
            fill: none;
            stroke: #2d3748;
            stroke-width: 3;
            stroke-linecap: round;
            stroke-linejoin: round;
            animation-timing-function: linear;
            animation-fill-mode: forwards;
        }

        .accent-stroke { stroke: red; }

        #shoezy-loader.animated .autograph__path {
            opacity: 1;
            animation-name: line;
        }

        @keyframes line {
            100% { stroke-dashoffset: 0; }
        }
        /* --- LOADER CSS END --- */


        /*3D Marquee*/
        /* --- 1. RESET & VARIABLES --- */
        :root {
            --bg-color: #f3f4f6;
            --card-bg: #fff;
            --line-color: #e5e7eb;
            --shadow-color: rgba(0, 0, 0, 0.1);
            --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }



        /* --- 2. MAIN CONTAINER --- */
        #marquee-wrapper {
            width: 100%;
            max-width: 1350px;
            height: 600px; /* Fixed height window */
            background-color: #fff;
            border-radius: 16px;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            /* Optional: Add a vignette to fade edges */
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }

        @media (max-width: 640px) {
            #marquee-wrapper { height: 500px; }
        }

        /* --- 3. TRANSFORM CONTAINER (Now Straight) --- */
        .marquee-3d-plane {
            /* CHANGED: Removed rotation to make it straight like a wall */
            transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg);

            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            /* Added perspective for the hover effects on cards */
            perspective: 1000px;
        }

        /* Scale wrapper */
        .scale-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            /* Slight padding to prevent cards from clipping edges abruptly */
            padding: 20px;
            box-sizing: border-box;
        }

        /* --- 4. GRID LAYOUT --- */
        .marquee-grid {
            display: grid;
            width: 100%;
            height: 100%;
            gap: 20px; /* Slightly increased gap for wall look */
            grid-template-columns: repeat(4, 1fr);
        }

        /* --- 5. COLUMNS & ANIMATION --- */
        .marquee-col {
            display: flex;
            flex-direction: column;
            gap: 24px;
            position: relative;
        }

        /* Vertical Line Decoration */
        .col-decoration-line {
            position: absolute;
            left: 50%; /* Center the line behind the column */
            transform: translateX(-50%);
            top: -50%;
            bottom: -50%;
            width: 1px;
            background-color: var(--line-color);
            z-index: 0;
        }

        /* Animations */
        @keyframes marquee-up {
            0% { transform: translateY(0px); }
            100% { transform: translateY(-150px); }
        }

        @keyframes marquee-down {
            0% { transform: translateY(-150px); }
            100% { transform: translateY(0px); }
        }

        .animate-odd {
            animation: marquee-down 20s linear infinite alternate;
            transform: translateY(-50px);
        }

        .animate-even {
            animation: marquee-up 25s linear infinite alternate;
            transform: translateY(50px);
        }



        /* --- 6. IMAGE CARDS --- */
        .img-container {
            position: relative;
            width: 100%;
            padding: 0 4px;
            box-sizing: border-box;
            z-index: 1;
            justify-content: center;
            align-items: center;

        }

        /* Horizontal Line Decoration (Optional) */
        .img-top-line {
            display: none; /* Removed for cleaner straight wall look */
        }

        .marquee-img {
            display: block;
            width: 100%;
            /*aspect-ratio: 9/12; */
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border: 1px solid rgba(0,0,0,0.05);

            /* transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); */
            cursor: pointer;
            background: #eee;
        }

        /* Dependent dropdown states and cities css  */


        select.form-control.bg-dark {
            /* Remove default arrow */
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;

            /* Space for custom arrow */
            padding-right: 44px;

            /* Firefox scrollbar */
            scrollbar-width: thin;
            scrollbar-color: #d81324 transparent;

            /* Chevron DOWN (default) */
            background-image: url("data:image/svg+xml;utf8,\
            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
            <path d='m6 9 6 6 6-6'/>\
            </svg>");
            background-repeat: no-repeat;
            background-position: right 14px center;
            background-size: 18px;
        }

        /* Chevron UP on focus */
        select.form-control.bg-dark:focus {
            background-image: url("data:image/svg+xml;utf8,\
        <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>\
        <path d='m18 15-6-6-6 6'/>\
        </svg>");
        }

        /* Chrome, Edge, Safari */
        select.form-control.bg-dark::-webkit-scrollbar {
            width: 6px;
        }

        select.form-control.bg-dark::-webkit-scrollbar-track {
            background: transparent;
        }

        select.form-control.bg-dark::-webkit-scrollbar-thumb {
            background-color: #d81324;
            border-radius: 10px;
        }

        select.form-control.bg-dark::-webkit-scrollbar-thumb:hover {
            background-color: #b0101d;
        }

        /* close btn of Coupon selected */
            button {
                    all: unset;
                    cursor: pointer;
                    color: grey;
                    }