@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&family=Quicksand:wght@300..700&display=swap');
    /* --- CSS Variables for Easy Customization --- */
    :root {
        /* Adjusted colors for a light, soft look to match the image */
        --primary-text-color: #000000; /* Darker text for better contrast on light background */
        --card-bg-rgba: rgba(255, 255, 255, 0.45); /* Less transparent glass */
        --card-border-rgba: rgba(255, 255, 255, 0.7); /* Clearer border */
        --text-color-light: #ffffff;
        --text-color-dark: #333333; /* Dark gray for secondary text */
        --icon-bg-rgba: rgba(255, 255, 255, 0.75); /* Near-solid white for icons */
        --button-bg-rgba: rgba(255, 255, 255, 0.6);
        --button-hover-bg-rgba: rgba(255, 255, 255, 0.9);
        --shadow-color: rgba(0, 0, 0, 0.15); /* Softer shadow */
    }

    /* --- Animated Background Colors and Keyframes --- */
    body {
        margin: 0;
        padding: 0 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        font-family: 'Montserrat', sans-serif;
        color: var(--primary-text-color);
        /* overflow: hidden; */
        background: url('backgrounds/bg-3.jpg');
            background-size: cover;
background-repeat: no-repeat;
background-position: bottom;

        /* Initial Gradient Background Setup */
        /* background-size: 400% 400%;
        animation: colorShift 20s ease infinite; Slower, continuous shift */
    }

    h1,h2,h3,h4,h5,h6 {
        font-family: "Quicksand", sans-serif;
        font-weight: 500;
    }

    @keyframes colorShift {
        0% { background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%); } /* Light Pink to Lavender */
        25% { background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); } /* Pink to Soft Blue */
        50% { background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%); } /* Blue to Sky Blue */
        75% { background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%); } /* Indigo to Light Pink */
        100% { background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%); }
    }

    /* Removing the extra blob shapes for a cleaner, flat background look, similar to your image. 
        If you want them back, uncomment the body::before/after and @keyframes moveShape rules. */
    
    /* --- Card Container (The Core 3D Element) --- */
    .card {
        position: relative;
        max-width: 340px; 
        padding-bottom: 15px; 
        background: var(--card-bg-rgba);
        border-radius: 30px; 
        border: 1px solid var(--card-border-rgba);
        box-shadow: 0 10px 30px 0 var(--shadow-color); /* Lighter shadow */
        /* Glassmorphism Effect */
        backdrop-filter: blur(5px); /* Lighter blur */
        -webkit-backdrop-filter: blur(5px);
        /* 3D Transform Setup */
        transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
        transform-style: preserve-3d;
    }

    /* 3D Hover Effect */
    .card:hover {
        transform: translateY(-8px) perspective(1000px) rotateX(2deg); /* Subtle lift and tilt */
        box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.2);
    }

    /* --- Card Elements Styling --- */
    .card-image {
        /* Container for the top image (1.jpg) */
        position: relative;
        height: 190px; /* Slightly shorter banner */
        overflow: hidden;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }
    .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(1); /* No darkening filter */
    }
    
    .profile-image img {
        position: relative;
        z-index: 2;
        width: 100%; /* Adjusted size */
        height: 150px;
        /* border-radius: 50%; */
        display: block;
        border: 6px solid #fff; 
        margin: -45px auto 20px auto; /* Centered, positioned over the banner */
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); 
        transition: 0.5s ease-in-out all;
        background-color: white; 
        object-fit: contain;
    }

    /* Ensure the video fills the container and covers it without distortion */
.video-banner video {
width: 100%;
height: 100%;
object-fit: cover; /* This is key! It makes the video fill the entire space */
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}

/* Ensure the parent container has overflow hidden to respect border radius */
.card-image.video-banner {
overflow: hidden; 
}

    .card-content {
        padding: 0 20px;
        text-align: center;
    }
    
    .card-content h3 {
        margin: 0;
        font-size: 20px; 
        font-weight: 700;
        color: var(--primary-text-color);
        text-shadow: none; /* Removed heavy text shadow */
        text-transform: capitalize;
    }

    .card-content h6 {
        font-size: 14px;
        color: var(--text-color-dark);
        margin-bottom: 20px;
        margin-top: 5px;
        font-weight: 500;
        text-transform: capitalize;

    }

    .card-content p {
        font-weight: 400;
        font-size: 14px;
        line-height: 1.6;
        color: var(--text-color-dark);
        padding: 0 ;
        text-align: center;
    }

    /* Quick-Access Buttons (Phone, Website) */
    .kiran {
        display: flex;
        flex-direction: column; /* Stack vertically for the look in the image */
        align-items: center;
        gap: 12px;
        margin-bottom: 25px;
        padding: 0 30px;
    }

    .kiran a {
        color: var(--primary-text-color);
        text-decoration: none;
        font-size: 13px; 
        font-weight: 600;
        width: 80%; /* Width adjustment for stack */
        background: var(--icon-bg-rgba);
        padding: 12px 18px; 
        border-radius: 30px;
        transition: background 0.3s ease, transform 0.2s ease;
        white-space: nowrap;
        display: flex; 
        justify-content: center; /* Center text/icon within the button */
        align-items: center;
        gap: 10px; 
        border: 1px solid var(--card-border-rgba);
    }

    .kiran a:hover {
        background: var(--button-hover-bg-rgba);
        transform: translateY(-2px);
    }
    
    /* Social Media Icons */
    .card-icons {
        display: flex;
        justify-content: center;
        padding: 0 ;
        gap: 15px; /* Less space between icons */
    }

    .card-icons a {
        text-decoration: none;
        font-size: 20px; 
        width: 30px; 
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: var(--icon-bg-rgba);
        border: 1px solid var(--card-border-rgba); 
        transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    }

    .card-icons a:hover {
        transform: scale(1.15); 
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        background: var(--button-hover-bg-rgba);
    }

    /* Icon Colors - Retaining the original colors on a near-white background */
    .card-icons .fa-facebook { color: #3b5998; }
    .card-icons .fa-instagram { color: #E1306C; }
    .card-icons .fa-whatsapp { color: #25D366; }
    /* Resetting custom SVG icon size and colors to work better on the light background */
    .card-icons a svg { width: 20px; height: 20px; }
    .card-icons img {max-width: 20px;}

    /* "View More" Toggle Button */
    .span {
        text-align: center;
        margin-top: 25px;
        padding: 0 30px;
    }

    .span a {
        text-decoration: none;
        color: var(--primary-text-color);
        font-size: 13px;
        cursor: pointer;
        font-weight: 600;
        padding: 12px 30px; /* Wider button */
        border-radius: 30px;
        background: var(--button-bg-rgba);
        border: 1px solid var(--card-border-rgba);
        transition: background 0.3s ease, transform 0.2s ease;
    }

    .span a:hover {
        background: var(--button-hover-bg-rgba);
        transform: translateY(-2px);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    }

    /* Download/Save/Share Buttons */
    .end_buttons_container {
        display: none; 
        justify-content: center;
        gap: 15px;
        padding: 0 30px;
        margin-top: 25px;
        flex-wrap: nowrap;
    }

    .end_buttons {
/* From https://css.glass */
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 5px 10px;
    }
    
    .end_buttons:hover {
        background: var(--button-hover-bg-rgba);
        transform: scale(1.02);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }

    .profile-image {
position: relative;
width: fit-content;
height: 150px;
margin: -45px auto 20px auto;
}

/* The gradient border (Instagram style) */
.profile-image::before {
/* content: ""; */
position: absolute;
top: -5px;
left: -5px;
width: 170px;
height: 170px;
border-radius: 50%;
background: conic-gradient(
    #f58529,
    #dd2a7b,
    #8134af,
    #515bd4,
    #f58529
);
z-index: 1;
    animation: spin 3s linear infinite;
}

@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

/* Image styling */
.profile-image img {
position: relative;
z-index: 2;
width: 100%;
height: 150px;
/* border-radius: 50%; */
border: 5px solid #fff;
display: block;
background-color: white;
object-fit: cover;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
transition: 0.4s ease-in-out all;
}

/* Optional: subtle hover glow */
.profile-image:hover::before {
filter: brightness(1.2);
}

/* ------------------------------ */
/* Marquee Container */
/* ------------------------------ */
.services-marquee {
width: 100%;
overflow: hidden;
position: relative;
padding: 15px 0;
mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

/* ------------------------------ */
/* Marquee Track */
/* ------------------------------ */
.marquee-track {
display: flex;
gap: 10px;
width: max-content;
animation: scroll-left 25s linear infinite;
transform-style: preserve-3d;
perspective: 800px;
}

/* ------------------------------ */
/* Service Box Styling */
/* ------------------------------ */
.service-box {
position: relative;
flex: 0 0 auto;
color: #000;
padding: 12px 18px;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgb(37, 0, 255);
border-radius: 10px;
font-family: "Poppins", sans-serif;
font-weight: 500;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
min-width: 120px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ------------------------------ */
/* Instagram-style ring (top-left corner) */
/* ------------------------------ */
.service-box::before {
content: "";
position: absolute;
top: -6px;
left: -6px;
width: 16px;
height: 16px;
border-radius: 50%;
background: conic-gradient(
#f58529,
#dd2a7b,
#8134af,
#515bd4,
#f58529
);
z-index: 2;
animation: spin 3s linear infinite;
}

/* ------------------------------ */
/* Subtle scaling for depth illusion */
/* ------------------------------ */
.service-box:hover {
transform: scale(1.1);
border-color: #dd2a7b;
}

/* ------------------------------ */
/* Fade effect on edges */
/* ------------------------------ */
.services-marquee::before,
.services-marquee::after {
content: "";
position: absolute;
top: 0;
width: 12%;
height: 100%;
z-index: 5;
pointer-events: none;
}

.services-marquee::before {
left: 0;
background: linear-gradient(to right, rgba(255,255,255,0.6) 0%, transparent 100%);
}
.services-marquee::after {
right: 0;
background: linear-gradient(to left, rgba(255,255,255,0.6) 0%, transparent 100%);
}

.form-error-minimal {
    /* Background and Border */
    background-color: #f7f7f7; /* Light gray background */
    border-left: 5px solid #d32f2f; /* Thick red bar on the left */
    border-radius: 4px; 
    
    /* Layout and Spacing */
    padding: 10px 15px;
    margin-bottom: 20px;
    
    /* Text appearance */
    color: #444; /* Dark gray text */
    font-size: 13px;
}

.form-error-minimal strong {
    color: #d32f2f; /* Red emphasis on the 'Error' label */
    margin-right: 5px;
}

.address .preview_address_link, .card-content a {
       display: flex;
    justify-content: center;
    text-decoration: none;
    gap: 5px;
    word-break: break-all;
    margin-bottom: 10px;
    color: #505256;
    font-size: 14px;
    align-items: baseline;
}

.fa-youtube {
    color: red;
}

.fa-map-marker-alt {
    color: black;
}

/* ------------------------------ */
/* Marquee Animation */
/* ------------------------------ */
@keyframes scroll-left {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

/* ------------------------------ */
/* Ring Rotation Animation */
/* ------------------------------ */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.action-section {
    display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 20px;
}

.action-section img {
height: 20px;
}

  /* --- Background Selector Styles --- */
        .background-selector {
            margin-bottom: 20px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background-color: #0000001f;
        }
        .background-gallery, .banner-preset-gallery {
            display: flex;
            overflow-x: auto; /* Enable horizontal scrolling */
            gap: 10px;
            padding-bottom: 10px; /* Space for scrollbar */
                max-width: 80vw;
        }
        .background-thumbnail,.preset-item img {
            width: 80px;
            height: 50px;
            flex-shrink: 0; /* Prevents thumbnails from shrinking */
            border: 2px solid transparent;
            border-radius: 4px;
            cursor: pointer;
            background-size: cover;
            background-position: center;
            transition: border-color 0.2s;
        }
        .background-thumbnail.selected, .preset-item.selected img {
            border-color: #007bff; /* Highlight selected background */
            box-shadow: 0 0 5px rgba(0, 123, 255, 0.7);
        }

        /* --- Accordion Styles (NEW) --- */
        .accordion-button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 20px 15px;
        background-color: #4a4a4a;
        color: #fff;
        border: none;
        text-align: left;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        border-radius: 4px;
        margin-top: 10px;
        transition: background-color 0.3s;
        color: #333;
        background: -webkit-linear-gradient(#01315e, #000000ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        border-bottom: 1px solid #2f5b9d;
            }
            .accordion-button:hover {
                background-color: #666;
            }
            .accordion-button .fas {
                transition: transform 0.3s;
            }
            .accordion-content {
                /* padding: 15px 10px; */
                background-color: #00000000;
                /* border: 1px solid #ddd; */
                border-top: none;
                border-radius: 0 0 4px 4px;
                overflow: hidden;
                max-height: 0;
                transition: max-height 0.3s ease-in-out;
            }
            .accordion-content.open {
                max-height: 1000px; /* A large value to allow content to expand */
                border-radius: 4px; /* Fix borders if content is last item */
                border-top: 1px solid #ddd;
                margin-top: 5px;
            }
            .accordion-button.open {
                border-radius: 4px 4px 0 0;
            }
            .accordion-button.open .fas {
                transform: rotate(180deg);
            }
            /* Style adjustments for better visibility inside accordion */
            .accordion-content .form-group label {
                color: #333;
            }
            .accordion-content h3 {
                display: none; /* Hide original headings */
            }
            .accordion-content .background-selector {
                background-color: #f8f8f8;
            }
            
            /* --- Minimal Error Styling --- */
            .form-error-minimal {
                background-color: #f7f7f7; /* Light gray background */
                border-left: 5px solid #d32f2f; /* Thick red bar on the left */
                border-radius: 4px; 
                padding: 10px 15px;
                margin-bottom: 20px;
                color: #444; /* Dark gray text */
                font-size: 13px;
            }

            .form-error-minimal strong {
                color: #d32f2f; /* Red emphasis on the 'Error' label */
                margin-right: 5px;
            }
            
            /* --- Dynamic Service Field Styles --- */
            .service-input-group {
                display: flex;
                gap: 5px;
                margin-bottom: 10px;
                align-items: center;
            }

            .service-input-group input[type="text"] {
                flex-grow: 1;
                margin-bottom: 0 !important; /* Override form.css margin */
            }

            .remove-service-button {
                background-color: #dc3545;
                color: white;
                border: none;
                border-radius: 4px;
                padding: 9px;
                cursor: pointer;
                transition: background-color 0.2s;
                
                width: 44px;
                flex-shrink: 0;
            }

            .remove-service-button:hover {
                background-color: #c82333;
            }
            
            .add-service-button {
                display: block;
                width: 100%;
                background-color: #ebfff0;
                color: #00831a;
                border: 1px solid green;
                border-radius: 4px;
                padding: 10px 15px;
                font-weight: 600;
                cursor: pointer;
                transition: background-color 0.2s;
                margin-top: 15px;
            }
            
            .add-service-button:hover {
                background-color: #218838;
                color: white;
            }