/* Custom CSS for insync landing page */

body {
    background-color: #000;
    font-family: Arial, sans-serif;
}

/* Make carousel buttons more visible */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(100%);
}

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

/* Custom Hero Section Styling */
.hero-custom {
    padding-top: 56px;
    min-height: 100vh;
    background: linear-gradient(to right, #000000 50%, #2e0854 100%); /* New gradient background */
}

/* Adjust the hero image to blend with the background */
.hero-image {
    max-height: 100vh; /* Adjust height to fit the hero section */
    /* Add a subtle blend effect to the image */
    mask-image: linear-gradient(to right, transparent, black 50%);
    -webkit-mask-image: linear-gradient(to right, transparent, black 50%);
}

/* Update the CTA button color to match the new color scheme */
.btn-primary {
    background-color: #4b0082; /* Deep purple */
    border-color: #4b0082;
}

.btn-primary:hover {
    background-color: #6a00b6; /* Lighter purple on hover */
    border-color: #6a00b6;
}

.text-white {
    color: #ffffff !important;
}

/* larger emojis */
.emoji-large {
    font-size: 1.9rem; /* Adjust this value as needed */
    vertical-align: middle;
}

/* Art illustrations */


/* New CSS for uniform art container */
.card-art-container {
    height: 210px; /* Set a fixed height for the image container */
    display: flex; /* Use flexbox to center the image vertically */
    align-items: center;
    justify-content: center;
}

/* Updated CSS for art illustrations */
.card-art {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Styling for carousel controls */