:root {
    --primary: #20448C;      /* Main brand / CTA base */
    --primary-light: #7EBCF2; /* Card background */
    --primary-hover: #91D7F2;  /* Card hover */

    --cta: #F25749;          /* CTA buttons */
    --danger: #BF3434;       /* Alerts / delete */
}
.hindi{
    font-family: 'Noto Sans Devanagari', sans-serif;
}
/* ============================= */
/* PRIMARY BUTTON (Blue) */
/* ============================= */
.btn-blue {
    background: linear-gradient(135deg, var(--primary), #163a75);
    color: #fff;
    border: none;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-blue:hover {
    background: linear-gradient(135deg, #163a75, var(--primary));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(32, 68, 140, 0.3);
}


/* ============================= */
/* LIGHT BUTTON (Soft Blue) */
/* ============================= */
.btn-lightblue {
    background: linear-gradient(135deg, var(--primary-light), var(--primary-hover));
    color: var(--primary);
    border: none;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-lightblue:hover {
    background: linear-gradient(135deg, var(--primary-hover), var(--primary-light));
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(126, 188, 242, 0.4);
}


/* ============================= */
/* CTA BUTTON (Orange) */
/* ============================= */
.btn-orange {
    background: linear-gradient(135deg, var(--cta), #bf2e2e);
    color: #fff;
    border: none;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-orange:hover {
    background: linear-gradient(135deg, #bf2e2e, var(--cta));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(242, 87, 73, 0.3);
}

/* CARD */
.service-card {
    /*background: var(--primary-light);*/
    border-radius: 16px;
    transition: all 0.3s ease;
    border: none;
}

/* HOVER EFFECT */
.service-card:hover {
    background: var(--primary-hover);
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(32, 68, 140, 0.25);
}

/* TITLE */
.service-card:hover .card-title {
    color: var(--primary);
}

/* PRIMARY BUTTON */
.btn-primary-custom {
    background: var(--primary);
    color: #fff;
    border: none;
}

.btn-primary-custom:hover {
    opacity: 0.9;
}

/* CTA BUTTON (Call) */
.btn-cta {
    background: var(--cta);
    color: #fff;
    border: none;
}

.btn-cta:hover {
    opacity: 0.9;
}

/* OPTIONAL: Danger Button */
.btn-danger-custom {
    background: var(--danger);
    color: #fff;
    border: none;
}
.service-card:hover {
    border: 1px solid var(--primary);
}

/* NAVBAR */
.navbar-custom {
    background: linear-gradient(45deg, var(--primary), var(--primary-light));
    box-shadow: 0 4px 12px rgba(32, 68, 140, 0.3);
}

/* LOGO */
.navbar-custom .navbar-brand {
    color: #fff;
    font-size: 1.3rem;
}

.navbar-custom .navbar-brand:hover {
    color: var(--primary-hover);
}

/* TOGGLER */
.navbar-custom .navbar-toggler {
    border-color: rgba(255,255,255,0.5);
}

.navbar-custom .navbar-toggler-icon {
    filter: invert(1);
}

/* LIGHT BUTTON (Login / Dashboard) */
.btn-light-custom {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: none;
    transition: 0.3s;
}

.btn-light-custom:hover {
    background: rgba(255,255,255,0.25);
}

/* CTA BUTTON (Register) */
.btn-cta {
    background: linear-gradient(45deg, var(--cta), var(--danger));
    color: #fff;
    border: none;
    transition: 0.3s;
}

.btn-cta:hover {
    background: linear-gradient(45deg, var(--danger), var(--cta));
    box-shadow: 0 6px 15px rgba(242, 87, 73, 0.4);
}

/* Logout button */
.btn-danger-custom {
    background: var(--danger);
    color: #fff;
    border: none;
}

/* HERO SECTION */
.hero-section {
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    padding: 80px 0;
    position: relative;
}

/* Optional overlay for depth */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.2);
}

.hero-section .container {
    position: relative;
    z-index: 1;
}

/* SELECT BOX */
.custom-select {
    border-radius: 10px;
    border: none;
    padding: 10px;
}

/* SEARCH BUTTON (THEME CTA 🔥) */
.btn-search {
    background: linear-gradient(45deg, var(--cta), var(--danger));
    color: #fff;
    border: none;
    border-radius: 10px;
    transition: 0.3s;
	height:44px;
}

.btn-search:hover {
    background: linear-gradient(45deg, var(--danger), var(--cta));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(242, 87, 73, 0.4);
}
/* FOOTER */
.footer-section {
    background: linear-gradient(45deg, var(--primary), var(--primary-light));
    padding: 40px 0 20px 0;
    color: #fff;
}

/* Links */
.footer-section a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-section a:hover {
    color: var(--primary-hover);
}

/* Divider */
.footer-divider {
    border-color: rgba(255,255,255,0.2);
    margin: 20px 0;
}

/* Pagination Custom Theme */
.pagination .page-link {
    color: var(--primary);
    border-radius: 8px;
    margin: 0 3px;
}

.pagination .page-item.active .page-link {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.pagination .page-link:hover {
    background: var(--primary-hover);
    color: #fff;
}

/* CALL BUTTON (Primary Gradient) */
.btn-call {
    background: linear-gradient(135deg, var(--primary), #163a75);
    color: #fff;
    border: none;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-call:hover {
    background: linear-gradient(135deg, #163a75, var(--primary));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(32, 68, 140, 0.3);
}

/* WHATSAPP BUTTON (CTA Gradient) */
.btn-whatsapp {
    background: linear-gradient(135deg, var(--cta), #bf2e2e);
    color: #fff;
    border: none;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.btn-whatsapp:hover {
    background: linear-gradient(135deg, #bf2e2e, var(--cta));
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(242, 87, 73, 0.3);
}

/* Table polish */
.table {
    border-radius: 12px;
    overflow: hidden;
}

/* Row hover */
.table tbody tr:hover {
    background-color: rgba(126, 188, 242, 0.15); /* your light theme */
    transition: 0.2s;
}

    .google-login-btn{
        background: var(--primary);
        color: #fff;
        border: none;
        border-radius: 14px;
        padding: 14px 28px;
        font-size: 18px;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        width: 100%;
        transition: all 0.3s ease;
        box-shadow: 0 6px 18px rgba(32, 68, 140, 0.18);
    }

    .google-login-btn:hover{
        background: var(--cta);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 22px rgba(242, 87, 73, 0.22);
    }

    .google-login-btn img{
        background: white;
        border-radius: 50%;
        padding: 4px;
    }

    .google-login-text{
        font-size: 17px;
        letter-spacing: 0.3px;
    }