﻿.ftr_CBWTF {
    color: #003366 !important;
    font-weight: bold !important;
    font-family: Arial !important;
}

.ftr_Smart {
    color: #FF5C00 !important;
    font-weight: bold !important;
    font-family: Georgia !important;
}

.ftr_Care {
    color: #7DC607 !important;
    font-weight: bold !important;
    font-family: Georgia !important;
}

:root {
    --brand: #0f766e;
    --brand2: #22c55e;
    --ink: #0f172a;
}

body {
    font-family: Inter,system-ui,Segoe UI,Arial,sans-serif;
    color: #1f2937;
    background: #f7faf9;
}
/* Hero background */
.hero-wrap {
    background: radial-gradient(1200px 600px at -10% -20%, rgba(34,197,94,.12), transparent 60%), radial-gradient(900px 500px at 110% 0%, rgba(15,118,110,.10), transparent 55%), linear-gradient(180deg,#ffffff, #f2fbf7 65%, #f7faf9);
}

.logo-lockup img {
    height:95px;
}
.fw-logo span{
    font-size: 15pt !important;
}
.low-top{margin-top:0.5rem !important;}

.topbar {
    background: #f9fbff
}
/* Trust strip */
.trust-strip i {
    font-size: 1.1rem
}

.trust-pill {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    background: #eef8f1;
    border: 1px solid #d7f1dc;
    border-radius: 999px;
    padding: .35rem .75rem;
    font-weight: 600;
    color: #166534;
}

/* Left content */
.promo-card, .feature-card, .faq-card {
    background: #fff;
    border: 1px solid #e7eef0;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(2,32,22,.05);
}

.promo-card {
    padding: 22px
}

.feature-card {
    padding: 18px
}

    .feature-card i {
        font-size: 1.25rem;
        color: var(--brand)
    }

.kpi {
    display: flex;
    gap: 14px;
    align-items: center
}

    .kpi .num {
        font-weight: 800;
        font-size: 1.35rem;
        color: #0a3b2f
    }

    .kpi small {
        color: #64748b
    }

/* Carousel */
.carousel-item {
    padding: 22px
}

    .carousel-item h6 {
        color: #0a3b2f;
        font-weight: 700
    }

/* Login side */
.login-card {
    background: #ffffff;
    border: 1px solid #e7eef0;
    border-radius: 16px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(2,32,22,.08);
    position: sticky;
    top: 24px;
}

    .login-card .hint {
        color: #64748b
    }

.form-control {
    padding: .65rem .75rem
}

.input-group-text {
    background: #f8fafc
}

.btn-brand {
    background: var(--brand);
    border: none
}

    .btn-brand:hover {
        background: #0d5f59
    }

.meta-links a {
    color: #0f766e;
    text-decoration: none
}

    .meta-links a:hover {
        text-decoration: underline
    }

/* FAQ */
.faq-card {
    padding: 10px
}

.accordion-button:not(.collapsed) {
    background: #f6fff9;
    color: #0a3b2f
}

/* Footer */
footer {
    background: #0f1724;
    color: #cbd5e1
}

    footer a {
        color: #94e2b6;
        text-decoration: none
    }

        footer a:hover {
            text-decoration: underline
        }

/* Mobile tweaks */
@media (max-width:991px) {
    .login-card {
        position: static
    }

    .logo-lockup img {
        height: 56px
    }
}

/* Highlight form labels professionally */
.form-label {
    font-weight: 600; /* medium-bold */
    color: #343a40; /* Bootstrap dark gray */
    font-size: 0.95rem; /* slightly smaller for elegance */
}

/* Form section heading style */
.form-section-title {
    font-weight: 600;
    font-size: 1.05rem;
    padding: 0.5rem 0.75rem;
    background: #f8f9fa; /* subtle gray */
    border-left: 4px solid #198754; /* Bootstrap success green */
    margin: 1.5rem 0 1rem;
    border-radius: 4px;
    color: #212529; /* dark text */
}

.waitLoader {
    position: fixed; /* Stays in the same position even when scrolling */
    top: 0; /* Aligns to the top */
    left: 0; /* Aligns to the left */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background: rgba(0, 0, 0, 0.5); /* Darker semi-transparent background for contrast */
    z-index: 9999; /* Ensures it’s on top */
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('https://demo.cbwtf.in/Images/CBWTF-Logo-Loading.png?v=1.0'); /* Your loader image */
    background-size: 110px 110px !important;
    background-repeat: no-repeat;
    background-position: center; /* Center the image */
}

.waitLoader:before {
    content: '';
    width: 115px !important; /* Slightly larger loader */
    height: 115px !important; /* Slightly larger loader */
    border: 5px solid #ff5c00; /* Border color */
    border-top: 5px solid transparent; /* Top border transparent for spinning effect */
    border-radius: 50%; /* Makes it circular */
    animation: spin 1.2s linear infinite; /* Slightly slower spin for smoothness */
}

@keyframes spin {
	0% {
		transform: rotate(0deg); /* Start at 0 degrees */
	}

	100% {
		transform: rotate(360deg); /* Spin to 360 degrees */
	}
}
.company-name {
    display: inline-block;
    position: relative;
    font-size: 2rem;
    font-weight: bold;
    color: #003366 !important;
}

.company-name::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #00aaff, #0077cc);
    border-radius: 2px;
}
