/* Global mobile fit fixes */
html, body {
    overflow-x: hidden;
    width: 100%;
}

figure {
    margin: 0;
}

.qb-color {
    color: #562D8E;
}

.qb-text {
    font-family: 'Google Sans Flex', sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Matching the dark blue and bold look */
.qb-title {
    font-weight: 400;
    font-size: 1.5rem;
    font-family: 'Google Sans Flex', sans-serif;
    color: #562D8E;
    margin: 0;
}

/* Matching the wide-spaced "SOLUTION" text */
.qb-subtitle {
    font-weight: 600;
    font-size: 0.6rem;
    font-family: 'Barlow', sans-serif;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-left: 1px;
    margin-top: 1px;
}

.carousel-item img {
    height: 95vh;
    object-fit: cover;
    background-color: #f8f9fa;
}

.carousel-caption {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    color: #a686d2;
}

.carousel-indicators .active {
    background-color: #562D8E;
    opacity: 1;
}

@media (max-width: 767.98px) {
    .carousel-item img {
        height: auto;
        min-height: 250px;
        object-fit: contain;
    }
    .carousel-caption {
        position: relative;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 1.5rem 1rem;
        margin-top: 5px;
        background-color: white;
        /* background-color: #333 !important; Solid background for readability below image */
        color: #000000;
        border-radius: 0;
    }
    .carousel-indicators {
        bottom: -40px; /* Move indicators down so they don't overlap text */
    }
    .carousel {
        margin-bottom: 50px; /* Add space for indicators */
    }

    /* Scale down large icons/text for very small screens */
    .material-text {
        font-size: 32px;
        line-height: 40px;
    }
    .material-icons {
        font-size: 48px;
    }
    .trademark {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 60px;
    line-height: 1;
    color: #562D8E;
}

.material-text {
    font-family: 'Noto Sans Cham', system-ui;
    font-weight: normal;
    font-style: normal;
    font-size: 48px;
    line-height: 60px; /* Matches the vertical space of the icons */
    color: #562D8E;
}

.trademark {
    border: 2px solid #562D8E;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    font-size: 24px; /* Reduced from 48px to fit inside the circle */
    font-weight: bold;
}

.social-icon {
    font-size: 2rem;
    color: #562D8E;
    transition: transform 0.3s ease, color 0.3s ease;
    text-decoration: none;
}

.social-icon:hover {
    transform: translateY(-5px);
}

.whatsapp:hover { color: #25D366; }
.facebook:hover { color: #1877F2; }
.instagram:hover { color: #E4405F; }

.form-control:focus {
    border-color: #562D8E;
    box-shadow: 0 0 0 0.25rem rgba(86, 45, 142, 0.25);
}

#formStatus {
    font-size: 0.9rem;
    font-weight: 500;
}